ขัน้ตอนท่ี 1 ก ำหนดโครงสร้ำงของเว็บไซต์ การสร้างเวบ็ไซตนั์น้ควรเร่ิมจากการสรา้งแผนผงัของเวบ็ไซตก่์อน หรือท่ี

เรียกว่า Site Map ดงัภาพตวัอย่างมีการก าหนดหน้าเวบ็เพจ็ 4 หน้า

ขัน้ตอนท่ี 2 ก ำหนดกำรเช่ือมโยงระหวำ่งเว็บเพ็จ เราต้องก าหนดการเช่ือมโยงให้เวบ็เพจ็แต่ละหน้าเช่ือมโยงถึงกนัเพ่ือให้กลบัไป

กลบัมา ระหว่างหน้าต่าง ๆ ได้ โดยแสดงช่ือไฟล ์ HTML แต่ละไฟลท่ี์มีการเช่ือมโยงสมัพนัธก์นัดงัภาพ

ขัน้ตอนท่ี 3 กำรออกแบบเว็บเพ็จแตล่ะหน้ำ นักเรียนสามารถออกแบบหน้าเวบ็เพจ็แต่ละหน้าให้สวยงาม โดยเฉพาะในเวบ็

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

ขัน้ตอนท่ี 4 กำรสร้ำงเว็บเพ็จแตล่ะหน้ำ น าเวบ็เพจ็ท่ีออกแบบไว้มาสร้างโดยใช้ภาษ html หรืออาจใช้โปรแกรม

ส าเรจ็รปู เช่น FrontPage, MacromediaDreamweaver หรือโปรแกรมส าเรจ็รปูอ่ืน ๆ ตามความถนัด

ขัน้ตอนท่ี 5 กำรลงทะเบียนขอพืน้ท่ีเว็บไซต ์ เป็นการเผยแพรเ่วบ็ไซตท่ี์สรา้งเสรจ็แล้วเข้าสู่ระบบเครือข่ายอินเทอรเ์น็ต

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

ขัน้ตอนท่ี 6 กำรอพัโหลดเว็บไซต์ หลงัจากสร้างเวบ็ไซตแ์ละลงทะเบยีนขอพืน้ท่ีส าหรบัฝากเวบ็ไซตแ์ล้ว ให้ใช้

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

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

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

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

2.โครงสร้างของเว็บไซต แบบล าดับขัน้ (Hierarchical Structure) เป็นโครงสร้างท่ีดีท่ีสดุวิธีหน่ึงในการจดัระบบโครงสร้างท่ีมีความซบัซ้อน ของ

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

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

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

4. โครงสร้างเว็บไซต แบบใยแมงมุม (Web Structure) โครงสร้างประเภทน้ีจะมีความยืดหยุ่นมากท่ีสดุ ทกุหน้าในเวบ็สามารถจะ

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

หลักในการสร้างเว็บเพจ็เว็บเพจ็คือหน้าเอกสารแต่ละหน้าของเว็บไซต สรุปหลักการในการสร้างเว็บเพจ็ได้ดังนี ้

1. การวางแผน- ก าหนดเน้ือหา ก่อนลงท าเวบ็เราจะต้องรู้ว่าเราจะท าเวบ็เก่ียวกบัอะไร

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

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

หลักในการสร้างเว็บเพจ็ 2. การเตรียมการ

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

หลักในการสร้างเว็บเพจ็ 3. การจดัท า

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

หลักในการสร้างเว็บเพจ็ 4. การทดสอบและการแก้ไข

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

หลักในการสร้างเว็บเพจ็ 5. การน าเวบ็เพจ็ต่าง ๆ มารวบรวมเป็นเวบ็ไซต ์

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