ใบความรท 2.2

รปแบบโครงสรางและการออกแบบของเวบเพจ

ในการออกแบบโครงสรางเวบไซต สามารถท าไดหลายแบบ ขนอยกบลกษณะของขอมล

ความถนดของผออกแบบ ตลอดจนกลมเปาหมายทตองการน าเสนอ โดยโครงสรางของเวบไซตมกจะ

ประกอบไปดวย 4 รปแบบใหญๆ ดงน

รปแบบโครงสรางของเวบไซต

1. โครงสรางของเวบไซตแบบเรยงตามล าดบ (Sequential Structure)

เปนโครงสรางแบบธรรมดาทใชกนมากทสด เนองจากงายตอการจดระบบขอมล ขอมลทนยม

จดดวยโครงสรางแบบนมกเปนขอมลทมลกษณะเปนเรองราว ตามล าดบ โดยโครงสรางน เหมาะกบ

เวบไซตทมขนาดเลก เนอหาไมซบซอนใชการลงค (Link) ไปทละหนา ทงนทศทางของการเขาสเนอหา

ภายในเวบจะเปนการด าเนนเรองในลกษณะเสนตรง โดยมปมเดนหนา-ถอยหลง เปนเครองมอหลก

ขอเสยของโครงสรางระบบนคอ ผใชไมสามารถก าหนดทศทางการเขาสเนอหาของตนเองไดท าให

เสยเวลา ในการเขาสเนอหา

2. โครงสรางของเวบไซตแบบล าดบขน (Hierarchical Structure)

เปนโครงสรางทดทสดวธหนงในการจดระบบโครงสรางทมความซบซอนของขอมล โดยแบง

เนอหา ออกเปนสวนตางๆ และมรายละเอยดยอย ๆ ในแตละสวนลดหลนกนมาในลกษณะแนวคด

เดยวกบ แผนภมองคกร จงเปนการงายตอการท าความเขาใจกบโครงสรางของเนอหา ลกษณะเดนคอ

การมจดเรมตนทจดรวมจดเดยว นนคอ โฮมเพจ (Homepage) และเชอมโยงไปสเนอหาในลกษณะ

เปนล าดบจากบนลงลาง

3. โครงสรางของเวบไซตแบบตาราง (Grid Structure)

โครงสรางรปแบบนมความซบซอนมากกวารปแบบทผานมา การออกแบบเพมความยดหยน

ใหแกการเขาสเนอหาของผใช โดยเพมการเชอมโยง ซงกนและกนระหวางเนอหาแตละสวน เหมาะแก

การแสดงใหเหนความสมพนธกนของเนอหา การเขาสเนอหาของผใชจะไมเปนลกษณะเชงเสนตรง

เนองจากผใชสามารถเปลยนทศทางการเขาสเนอหาของตนเองได

4. โครงสรางเวบไซตแบบใยแมงมม (Web Structure)

โครงสรางประเภทนจะมความยดหยนมากทสด ทกหนาในเวบสามารถจะเชอมโยงไปถงกนได

หมด เปนการสรางรปแบบการเขาสเนอหาทเปนอสระ ผใชสามารถก าหนดวธการเขาสเนอหาไดดวย

ตนเอง การเชอมโยงเนอหาแตละหนาเปนไปในลกษณะของไฮเปอรเทกซหรอไฮเปอรมเดย ทสามารถ

เชอมโยงออกไปสเนอหาจากเวบภายนอกได

หลกในการสรางและออกแบบเวบเพจ

ในการสรางเวบเพจ หรอหนาเอกสารแตละหนาของเวบไซตนน จ าเปนตองมขนตอนการสราง

เวบเพจได ดงน

1. การวางแผน

1.1 ก าหนดเนอหา กอนท าเวบเราจะตองรวาเราจะท าเวบเกยวกบอะไร เนอหาเปน

อยางไร กลมเปาหมายเปนกลมใด ทงนเพอทจะไดน าเนอหา เหลานนมาใสในเวบเพอแสดงใหรวา

เนอหาโดยรวมเกยวกบอะไรบาง

1.2 ออกแบบมมมองหนาเวบ (Layout) เปนการจดวางองคประกอบในเวบเพจวา

สวนใดควรจะมอะไร โดยการรางใสกระดาษเปลา ๆ ไวกอนหรอใชโปรแกรมคอมพวเตอรชวยใน

การออกแบบกได สามารถใชตารางชวยในการจดองคประกอบในหนาเวบนน ซงจะท าใหเวบเพจ

มความเปนระเบยบยงขน และสะดวกตอการแกไข ปรบปรงตอไป

2. การเตรยมการ

2.1 การเตรยมการดานขอมล เชนเนอหา ภาพ เสยง หรอสงจ าเปนตางๆ ทคดวา

ตองการจะน าเสนอในการท าเวบเพจนน เมอเรารแลววาเราจะท าเวบเกยวกบอะไร

2.2 การรวบรวมขอมล เชน ถาจะท าเวบ เกยวกบโรงเรยน กตองไปหาคตพจน

ประจ าโรงเรยน สประจ าโรงเรยน บคลากรในโรงเรยน ประวตโรงเรยน ฯลฯ มารวบรวมไวเพอ

จดรปแบบตอไป

2.3 การหาเครองมอในการจดท า หมายถงโปรแกรมการท างานตาง ๆ เชน

โปรแกรมจดการรปภาพ เสยง ภาพเคลอนไหวตางๆ โปรแกรมในการจดท าเวบเพจเปนตน

3. การสรางและออกแบบเวบเพจ

เมอวางแผนและเตรยมการเรยบรอยแลว กถงเวลาจดสรางเวบเพจ ซงอาจจะท าคนเดยวหรอ

ท าเปนกลมกได โดยใชเครองมอทเตรยมไว ซงมขนตอน ดงน

3.1 ขนตอนท 1 ก าหนดโครงสรางของเวบไซต

การสรางเวบไซตนน ควรเรมจากการสรางแผนผงของเวบไซตกอน หรอทเรยกวา

Site Map ซงสามารถเขยนแผนผงออกมาเพอก าหนดจ านวนหนาเวบเพจทตองการ ดงตวอยาง

3.2 ขนตอนท 2 ก าหนดการเชอมโยงระหวางเวบเพจ

เปนการก าหนดการเชอมโยงใหเวบเพจแตละหนา มการเชอมโยงถงกน เพอใหกลบไปกลบมา

ระหวางหนาตาง ๆ ได โดยแสดงชอไฟล HTML แตละไฟลทมการเชอมโยงสมพนธแตละไฟลอยาง

ชดเจน ดงภาพตวอยาง

หนาเวบเพจ-1

(โฮมเพจ)

index.html

หนาเวบเพจ-2

ประวตจงหวดเลย history.html

หนาเวบเพจ-3

แหลงทองเทยว list.html

หนาเวบเพจ-4

เทยวเชยงคาน ck.html

index.html

history.html

list.html

ck.html

about.html

vision.html

phu.html

ckhis.html

food.html

room.html

3.3 ขนตอนท 3 การออกแบบเวบเพจแตละหนา

เปนการออกแบบหนาเวบเพจแตละหนา หรอเลยเอาท (Lay Out) ใหสวยงาม โดยเฉพาะใน

เวบเพจหนาแรก ซงเรยกวา “โฮมเพจ” นน เราสามารถออกแบบใหสวยงามเพอดงดดความสนใจของผ

เขาชม สามารถท าได โดยการเขยนลงในกระดาษ หรอใชโปรแกรมคอมพวเตอร

ชวยในการออกแบบกได

3.4 ขนตอนท 4 การสรางเวบเพจแตละหนา

เปนการน าเวบเพจทออกแบบไวมาสรางโดยใชภาษา html หรออาจใชโปรแกรมส าเรจรป เชน

FrontPage, Macromedia Dreamweaver หรอโปรแกรมส าเรจรปอน ๆ ตามความถนด

3.5 ขนตอนท 5 ทดสอบและการแกไขขอบกพรอง

ในการสรางเวบเพจทกครง ควรจะมการทดสอบกอนเผยแพรทกครง เพอตรวจสอบความ

ถกตองของการแสดงผล โดยทดสอบทเครองของตวเอง ดวยโปรแกรมเวบบราวเซอรทใชอานขอมล

ภาษ html เชน Internet Explorer, Firefox, Google Chrome เปนตน พรอมทงสามารถอพโหลด

ขนไปยงทจดเกบเวบเพจเพอหาขอบกพรองและน ามาแกไขตอไป

ชอเวบไซต

หนาหลก ประวต แหลงทองเทยว รานอาหาร ทพก ขาวทองเทยว ตดตอเรา

Logo

เมน link

ทอย ทตดตอ อเมล

รป และขอความ

3.6 ขนตอนท 6 การน าเวบเพจตาง ๆ มารวบรวมเปนเวบไซต

เมอสรางเวบเพจเสรจ จดรวบรวม และเรยบเรยงหนาเวบเพจแตละหนา ท าการทดสอบ แกไข

ปรบปรงเสรจแลว กสามารถเผยแพรเวบเพจทงหมดสสาธารณชนในรปแบบของเวบไซตได

3.7 ขนตอนท 7 ลงทะเบยนขอพนทเวบไซต

เปนการเผยแพรเวบไซตทสรางเสรจแลวสระบบเครอขายอนเทอรเนต เพอใหบคคลอน ๆ

สามารถเขาชมเวบไซตของเราได วธการกคอ น าเวบไซตทเราสรางขนไปไวบนพนท ทใหบรการ

(Web Hosting) ซงมพนท ทใหบรการฟรและแบบทตองเสยคาบรการ ตวอยางเวบ host ทใหพนทฟร

เชน google site เปนตน

3.8 ขนตอนท 8 การอพโหลดเวบไซต

หลงจากสรางเวบไซตและลงทะเบยนขอพนทส าหรบฝากเวบไซตแลว เรากใชโปรแกรมส าหรบ

อปโหลด (Upload) เชน โปรแกรม CuteFTP เพอใหคนทวโลกสามารถเขาชมเวบไซตของเราผาน

ทางระบบเครอขายอนเทอรเนตได

***********************************************