หลักในการออกแบบเว็บไซต์ (Web site)

2. ขันตอนที่ 1 กำหนดโครงสร้ ำงของเว็บไซต์
้
 การสร้างเว็บไซต์นันควรเริ่มจากการสร้างแผนผังของเว็บไซต์ก่อน หรือที่
้
เรียกว่า Site Map ดังภาพตัวอย่างมีการกาหนดหน้ าเว็บเพ็จ 4 หน้ า

3. ขันตอนที่ 2 กำหนดกำรเชื่อมโยงระหว่ำงเว็บเพ็จ
้
 เราต้องกาหนดการเชื่อมโยงให้เว็บเพ็จแต่ละหน้ าเชื่อมโยงถึงกันเพื่อให้กลับไป
กลับมา ระหว่างหน้ าต่าง ๆ ได้ โดยแสดงชื่อไฟล์ HTML แต่ละไฟล์ที่มี
การเชื่อมโยงสัมพันธ์กนดังภาพ
ั

4. ขันตอนที่ 3 กำรออกแบบเว็บเพ็จแต่ละหน้ ำ
้
 นักเรียนสามารถออกแบบหน้ าเว็บเพ็จแต่ละหน้ าให้สวยงาม โดยเฉพาะในเว็บ
เพ็จหน้ าแรก ซึ่งเรียกว่าโฮมเพ็จนักเรียนควรออกแบบให้สวยงามเพื่อดึงดูด
ความสนใจของผูเข้าชมในขันตอนการออกแบบนี้ บางทีอาจเรียกว่าการ
้
้
ออกแบบเลย์เอาท์(Lay Out)
สามารถทาได้โดยการ เขียนลงใน
กระดาษหรือใช้โปรแกรมคอมพิวเตอร์
ช่วยในการออกแบบก็ได้

5. ขันตอนที่ 4 กำรสร้ ำงเว็บเพ็จแต่ละหน้ ำ
้
 นาเว็บเพ็จที่ออกแบบไว้มาสร้างโดยใช้ภาษ html หรืออาจใช้โปรแกรม
สาเร็จรูป เช่น FrontPage, Macromedia
Dreamweaver หรือโปรแกรมสาเร็จรูปอื่น ๆ ตามความถนัด

6. ขันตอนที่ 5 กำรลงทะเบียนขอพื ้นที่เว็บไซต์
้
 เป็ นการเผยแพร่เว็บไซต์ที่สร้างเสร็จแล้วเข้าสู่ระบบเครือข่ายอินเทอร์เน็ต
เพื่อให้บคคลอื่น ๆ สามารถเข้าชมเว็บไซต์ของเราได้ วิธีการก็คือ นาเว็บไซต์ที่
ุ
เราสร้างขึนไปไว้บนพืนที่ ที่ให้บริการ(Web Hosting) ซึ่งมีพืนที่ ที่
้
้
้
ให้บริการฟรี และ
แบบที่ต้องเสียค่าบริการ

7. ขันตอนที่ 6 กำรอัพโหลดเว็บไซต์
้
 หลังจากสร้างเว็บไซต์และลงทะเบียนขอพืนที่สาหรับฝากเว็บไซต์แล้ว ให้ใช้
้
โปรแกรมสาหรับอัปโหลด (Upload) เช่นโปรแกรม CuteFTP ,
WS-FTP เพื่อให้คนทัวโลกสามารถเข้าชมเว็บไซต์ของเราผ่านทางระบบ
่
เครือข่ายอินเทอร์เน็ตได้

8. รูปแบบโครงสร้ ำงของเว็บไซต์
การออกแบบโครงสร้างเว็บไซต์ สามารถทาได้หลาย
แบบ ขึนอยูกบลักษณะของข้อมูล ความถนัดของ
้ ่ ั
ผูออกแบบ ตลอดจนกลุมเป้าหมายทีตองการนาเสนอ
้
่
่ ้
โครงสร้างของเว็บไซต์ประกอบไปด้วย 4 รูปแบบ
ใหญ่ๆ ได้ดงนี้
ั

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

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

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

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

13. หลักในการสร้ างเว็บเพ็จ
เว็บเพ็จคือหน้ าเอกสารแต่ ละหน้ าของเว็บไซต สรุ ปหลักการในการสร้ างเว็บเพ็จได้ ดังนี ้
 1. การวางแผน
- กาหนดเนื้ อหา ก่อนลงทาเว็บเราจะต้องรู้ว่าเราจะทาเว็บเกี่ยวกับอะไร
เนื้ อหาเป็ นอย่างไร กลุ่มเป้ าหมายเป็ นกลุ่มใด ทังนี้ เพื่อที่เราจะได้นาเนื้ อหา
้
เหล่านันมาใส่ในเว็บเพื่อแสดงให้รว่า เนื้ อหาโดยรวมเกี่ยวกับอะไร เช่น
้
ู้
เกี่ยวกับคอมพิวเตอร์ ก็ต้องมีข้อมูลของคอมพิวเตอร์แต่ละชนิด ลักษณะ ราคาแต่
ละรุ่นและสถานที่ขาย เป็ นต้น
- ออกแบบมุมมองในหน้ าเว็บ (LayOut) คือการจัดวางองค์ประกอบใน
เว็บเพ็จว่าส่วนใดควรจะมีอะไร อาจทาโดยการร่างใส่กระดาษเปล่า ๆ ไว้ก่อนหรือ
ใช้โปรแกรมคอมพิวเตอร์ช่วยในการออกแบบก็ได้ การใช้ตารางช่วยในการจัด
องค์ประกอบในหน้ าเว็บนันจะทาให้เว็บเพ็จมีความเป็ นระเบียบยิ่งขึน และสะดวก
้
้
ต่อการแก้ไข ปรับปรุง

14. หลักในการสร้ างเว็บเพ็จ
 2. การเตรียมการ
เช่น การเตรียมการด้านข้อมูลทังที่เป็ นเนื้ อหา ภาพ เสียง หรือสิ่งจาเป็ นต่างๆ
้
ที่นักเรียนคิดว่าต้องการจะนาเสนอในการทาเว็บเพ็จนัน เมื่อเรารู้แล้วว่าเราจะทา
้
เว็บเกี่ยวกับอะไร การรวบรวมข้อมูลก็มีส่วนสาคัญ อย่างยิ่ง เช่น ถ้าจะทาเว็บ
เกี่ยวกับ โรงเรียน ก็ต้องไปหาคติพจน์ ประจาโรงเรียน สีประจาโรงเรียน บุคลากรใน
โรงเรียน ประวัติโรงเรียน ฯลฯ มารวบรวมไว้ แล้วหลังจากนันก็เอาข้อมูลนันมา
้
้
จัดรูปแบบในเว็บต่อไป การหาเครื่องมือในการจัดทานัน ก็เป็ นเรื่องสาคัญ
้
เครื่องมือในที่นี้ หมายถึงโปรแกรมการทางานต่าง ๆ เช่นโปรแกรมจัดการรูปภาพ
เสียง ภาพเคลื่อนไหวต่างๆ โปรแกรมในการจัดทาเว็บเพ็จ
จะใช้โปรแกรมสาเร็จรูปหรือจะใช้ภาษาคอมพิวเตอร์ ในการสร้างต้องเตรียมการ
ให้พร้อม

15. หลักในการสร้ างเว็บเพ็จ
 3. การจัดทา
เมื่อวางแผนและเตรียมการเรียบร้อยแล้ว ก็ถึงเวลาจัดทา
อาจจะทาคนเดียว หรือทาเป็ นกลุ่ม โดยใช้เครื่องมือที่เตรียมไว้ ซึ่งจะอธิบายถึง
วิธีการจัดทาหรือวิธีการสร้างเว็บเพ็จในลาดับต่อไป

16. หลักในการสร้ างเว็บเพ็จ
 4. การทดสอบและการแก้ไข
การสร้างเว็บเพ็จทุกครังควรจะมีการทดสอบก่อนเผยแพร่ทกครังเพือหาข้อ
้
ุ ้ ่
บกพร่องแล้วนามาแก้ไขการทาเว็บนันเมื่อทาเสร็จลอัพโหลดไปไว้ในเครื่อง
้
เซิรฟเวอร์แล้ว ให้ทดลองแนะนาเพื่อนที่สนิทชิดเชื้อและใช้อินเทอร์เน็ตอยู่ ลอง
์
เปิดดูและให้บอกข้อผิดพลาดมา เช่น การเชื่อมโยงต่าง ๆ , รูปภาพ และตัวอักษร
ว่าถูกต้อง ช้าไปหรือเปล่า หากทดสอบจากเครื่องของตนเองแล้ว ข้อผิดพลาด
ต่างๆ มักจะไม่ค่อยปรากฏให้เห็นเนื่ องจากว่าข้อมูลต่าง ๆ จะอยู่ในเครื่องของ
ตนเองและการเชื่อมโยงต่างๆ เช่นกัน โปรแกรมจะทาการค้นหาในเครื่องจนพบ
ทาให้เราไม่เห็นข้อผิดพลาด หลังจากทดสอบแล้วให้ดาเนินการแก้ไขข้อผิดพลาด

17. หลักในการสร้ างเว็บเพ็จ
 5. การนาเว็บเพ็จต่าง ๆ มารวบรวมเป็ นเว็บไซต์
เมื่อสร้างเว็บเพ็จเสร็จ จัดรวบรวม และเรียบเรียงหน้ าเว็บเพ็จแต่ละหน้ า ทา
การทดสอบ แก้ไขปรับปรุงเสร็จแล้ว ก็สามารถเผยแพร่เว็บเพ็จทังหมดออกสู่
้
สาธารณชนในรูปแบบของเว็บไซต์ได้