1. ใบความรู้ที่ 2.2
รูปแบบโครงสร้างและการออกแบบของเว็บเพจ
ในการออกแบบโครงสร้างเว็บไซต์ สามารถทาได้หลายแบบ ขึ้นอยู่กับลักษณะของข้อมูล
ความถนัดของผู้ออกแบบ ตลอดจนกลุ่มเป้าหมายที่ต้องการนาเสนอ โดยโครงสร้างของเว็บไซต์มักจะ
ประกอบไปด้วย 4 รูปแบบใหญ่ๆ ดังนี้
รูปแบบโครงสร้างของเว็บไซต์
1. โครงสร้างของเว็บไซต์แบบเรียงตามลาดับ (Sequential Structure)
เป็นโครงสร้างแบบธรรมดาที่ใช้กันมากที่สุด เนื่องจากง่ายต่อการจัด ระบบข้อมูล ข้อมูลที่นิยม
จัดด้วยโครงสร้างแบบนี้มักเป็นข้อมูลที่มีลักษณะเป็นเรื่องราว ตามลาดับ โดยโครงสร้างนี้ เหมาะกับ
เว็บไซต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การลิงค์ (Link) ไปทีละหน้า ทั้งนี้ทิศทางของการเข้าสู่เนื้อหา
ภายในเว็บจะเป็นการดาเนินเรื่องในลัก ษณะเส้นตรง โดยมีปุ่มเดินหน้า -ถอยหลัง เป็นเครื่องมือหลัก
ข้อเสียของโครงสร้างระบบนี้คือ ผู้ใช้ไ ม่สามารถกาหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้ทาให้
เสียเวลา ในการเข้าสู่เนื้อหา
2. โครงสร้างของเว็บไซต์แบบลาดับขั้น (Hierarchical Structure)
เป็นโครงสร้างที่ดีที่สุดวิธีหนึ่งในการจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูล โดยแบ่ง
เนื้อหา ออกเป็นส่วนต่างๆ และมีรายละเอียดย่อย ๆ ในแต่ละส่วนลดหลั่นกันมาในลักษณะแนวคิด
เดียวกับ แผนภูมิองค์กร จึงเป็นการง่ายต่อการทาความเข้าใจกับโครงสร้างของเนื้อหา ลักษณะเด่นคือ
การมีจุดเริ่มต้นที่จุดร่วมจุดเดียว นั่นคือ โฮมเพจ (Homepage) และเชื่อมโยงไปสู่เนื้อหาในลักษณะ
เป็นลาดับจากบนลงล่าง

2. 3. โครงสร้างของเว็บไซต์แบบตาราง (Grid Structure)
โครงสร้างรูปแบบนี้มีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเพิ่มความยืดหยุ่น
ให้แก่การเข้าสู่เนื้อหาของผู้ใช้ โดยเพิ่มการเชื่อมโยง ซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน เหมาะแก่
การแสดงให้เห็นความสัมพันธ์กันของเนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็นลักษณะเชิง เส้นตรง
เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้
4. โครงสร้างเว็บไซต์แบบใยแมงมุม (Web Structure)
โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกันได้
หมด เป็นการสร้างรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ ผู้ใช้สามารถกาหนดวิธีการเข้าสู่เนื้อหาได้ด้วย
ตนเอง การเชื่อมโยงเนื้อหาแต่ละหน้าเป็นไปในลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย ที่สามารถ
เชื่อมโยงออกไปสู่เนื้อหาจากเว็บภายนอกได้

3. หลักในการสร้างและออกแบบเว็บเพจ
ในการสร้างเว็บเพจ หรือหน้าเอกสารแต่ละหน้าของเว็บไซต์นน จาเป็นต้องมีขั้นตอนการสร้าง
ั้
เว็บเพจได้ ดังนี้
1. การวางแผน
1.1 กาหนดเนื้อหา ก่อนทาเว็บเราจะต้องรู้ว่าเราจะทาเว็บเกี่ยวกับอะไร เนื้อหาเป็น
อย่างไร กลุ่มเป้าหมายเป็นกลุ่มใด ทั้งนี้เพื่อที่จะได้นาเนื้อหา เหล่านั้นมาใส่ในเว็บเพื่อแสดงให้รู้ว่า
เนื้อหาโดยรวมเกี่ยวกับอะไรบ้าง
1.2 ออกแบบมุมมองหน้าเว็บ (Layout) เป็นการจัดวางองค์ประกอบในเว็บเพจว่า
ส่วนใดควรจะมีอะไร โดยการร่างใส่กระดาษเปล่า ๆ ไว้ก่อนหรือใช้โปรแกรมคอมพิวเตอร์ช่วยใน
การออกแบบก็ได้ สามารถใช้ตารางช่วยในการจัดองค์ประกอบในหน้าเว็บนั้น ซึ่งจะทาให้เว็บเพจ
มีความเป็นระเบียบยิ่งขึ้น และสะดวกต่อการแก้ไข ปรับปรุงต่อไป
2. การเตรียมการ
2.1 การเตรียมการด้านข้อมูล เช่นเนื้อหา ภาพ เสียง หรือสิ่งจาเป็นต่างๆ ที่คิดว่า
ต้องการจะนาเสนอในการทาเว็บเพจนั้น เมื่อเรารู้แล้วว่าเราจะทาเว็บเกี่ยวกับอะไร
2.2 การรวบรวมข้อมูล เช่น ถ้าจะทาเว็บ เกี่ยวกับโรงเรียน ก็ต้องไปหาคติพจน์
ประจาโรงเรียน สีประจาโรงเรียน บุคลากรในโรงเรียน ประวัติโรงเรียน ฯลฯ มารวบรวมไว้เพื่อ
จัดรูปแบบต่อไป
2.3 การหาเครื่องมือในการจัดทา หมายถึงโปรแกรมการทางานต่าง ๆ เช่น
โปรแกรมจัดการรูปภาพ เสียง ภาพเคลื่อนไหวต่างๆ โปรแกรมในการจัดทาเว็บเพจเป็นต้น
3. การสร้างและออกแบบเว็บเพจ
เมื่อวางแผนและเตรียมการเรียบร้อยแล้ว ก็ถึงเวลาจัดสร้างเว็บเพจ ซึ่งอาจจะทาคนเดียวหรือ
ทาเป็นกลุ่มก็ได้ โดยใช้เครื่องมือที่เตรียมไว้ ซึ่งมีขั้นตอน ดังนี้

4. 3.1 ขั้นตอนที่ 1 กาหนดโครงสร้างของเว็บไซต์
การสร้างเว็บไซต์นั้น ควรเริ่มจากการสร้างแผนผังของเว็บไซต์ก่อน หรือที่เรียกว่า
Site Map ซึ่งสามารถเขียนแผนผังออกมาเพื่อกาหนดจานวนหน้าเว็บเพจที่ต้องการ ดังตัวอย่าง
หน้ าเว็บเพจ-1
(โฮมเพจ)
index.html
หน้ าเว็บเพจ-2 หน้ าเว็บเพจ-3 หน้ าเว็บเพจ-4
ประวัติจงหวัดเลย
ั แหล่งท่องเที่ยว เที่ยวเชียงคาน
history.html list.html ck.html
3.2 ขั้นตอนที่ 2 กาหนดการเชื่อมโยงระหว่างเว็บเพจ
เป็นการกาหนดการเชื่อมโยงให้เว็บเพจแต่ละหน้า มีการเชื่อมโยงถึงกัน เพื่อให้กลับไปกลับมา
ระหว่างหน้าต่าง ๆ ได้ โดยแสดงชื่อไฟล์ HTML แต่ละไฟล์ที่มีการเชื่อมโยงสัมพันธ์แต่ละไฟล์อย่าง
ชัดเจน ดังภาพตัวอย่าง
index.html
history.html list.html ck.html phu.html
about.html vision.html ckhis.html food.html room.html

5. 3.3 ขั้นตอนที่ 3 การออกแบบเว็บเพจแต่ละหน้า
เป็นการออกแบบหน้าเว็บเพจแต่ละหน้า หรือเลย์เอาท์ (Lay Out) ให้สวยงาม โดยเฉพาะใน
เว็บเพจหน้าแรก ซึ่งเรียกว่า “โฮมเพจ” นั้น เราสามารถออกแบบให้สวยงามเพื่อดึงดูดความสนใจของผู้
เข้าชม สามารถทาได้ ้โดยการเขียนลงในกระดาษ หรือใช้โปรแกรมคอมพิวเตอร์
ช่วยในการออกแบบก็ได้
Logo ชื่อเว็บไซต์
หน้ าหลัก ประวัติ แหล่งท่องเที่ยว ร้ านอาหาร ที่พก ข่าวท่องเที่ยว ติดต่อเรา
ั
เมนู link
รูป และข้ อความ
ที่อยู่ ที่ติดต่อ อีเมล์
3.4 ขั้นตอนที่ 4 การสร้างเว็บเพจแต่ละหน้า
เป็นการนาเว็บเพจที่ออกแบบไว้มาสร้างโดยใช้ภาษา html หรืออาจใช้โปรแกรมสาเร็จรูป เช่น
FrontPage, Macromedia Dreamweaver หรือโปรแกรมสาเร็จรูปอื่น ๆ ตามความถนัด
3.5 ขั้นตอนที่ 5 ทดสอบและการแก้ไขข้อบกพร่อง
ในการสร้างเว็บเพจทุกครั้ง ควรจะมีการทดสอบก่อนเผยแพร่ทุกครั้ง เพื่อตรวจสอบความ
ถูกต้องของการแสดงผล โดยทดสอบที่เครื่องของตัวเอง ด้วยโปรแกรมเว็บบราวเซอร์ที่ใช้อ่านข้อมูล
ภาษ html เช่น Internet Explorer, Firefox, Google Chrome เป็นต้น พร้อมทั้งสามารถอัพโหลด
ขึ้นไปยังที่จัดเก็บเว็บเพจเพื่อหาข้อบกพร่องและนามาแก้ไขต่อไป

6. 3.6 ขั้นตอนที่ 6 การนาเว็บเพจต่าง ๆ มารวบรวมเป็นเว็บไซต์
เมื่อสร้างเว็บเพจเสร็จ จัดรวบรวม และเรียบเรียงหน้าเว็บเพจแต่ละหน้า ทาการทดสอบ แก้ไข
ปรับปรุงเสร็จแล้ว ก็สามารถเผยแพร่เว็บเพจทั้งหมดสู่สาธารณชนในรูปแบบของเว็บไซต์ได้
3.7 ขั้นตอนที่ 7 ลงทะเบียนขอพื้นทีเ่ ว็บไซต์
เป็นการเผยแพร่เว็บไซต์ที่สร้างเสร็จแล้วสู่ระบบเครือข่ายอินเทอร์เน็ต เพื่อให้บุคคลอื่น ๆ
สามารถเข้าชมเว็บไซต์ของเราได้ วิธีการก็คือ นาเว็บไซต์ที่เราสร้างขึ้นไปไว้บนพืนที่ ที่ให้บริการ
้
(Web Hosting) ซึ่งมีพื้นที่ ที่ให้บริการฟรีและแบบที่ต้องเสียค่าบริการ ตัวอย่างเว็บ host ที่ให้พื้นที่ฟรี
เช่น google site เป็นต้น
3.8 ขั้นตอนที่ 8 การอัพโหลดเว็บไซต์
หลังจากสร้างเว็บไซต์และลงทะเบียนขอพื้นที่สาหรับฝากเว็บไซต์แล้ว เราก็ใช้โปรแกรมสาหรับ
อัปโหลด (Upload) เช่น โปรแกรม CuteFTP เพื่อให้คนทั่วโลกสามารถเข้าชมเว็บไซต์ของเราผ่าน
ทางระบบเครือข่ายอินเทอร์เน็ตได้
***********************************************