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

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

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

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

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

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

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

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

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

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

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

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

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

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

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