หลักการสร้างเว็บเบื้องต้น

การสร้างและออกแบบเว็บ
กระบวนการในการสร้างและออกแบบเว็บจะมีกระบวนการพื้นฐานอยู่ด้วยกัน 5 ขั้นตอนคือ
1. การวางแผน (Planning)

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

2. การออกแบบ (Design)

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

3. การพัฒนา (Development)

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

4. การติดตั้ง (Publishing)

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

5. การบำรุงรักษา (Maintenance) เป็นขั้นตอนประเมินผลและติดตามผลการติดตั้งเว็บไซต์
ว่ามีข้อขัดข้องหรือต้องปรับปรุงเปลี่ยนแปลงเว็บเพิ่มเติมให้ทันสมัยอยู่เสมอ อาจจะเรียกได้ว่าขั้นตอนการอับเดท (Up date)
การกำหนดรูปแบบเว็บไซต์ (Web-site)
เว็บไซต์ (Web-site) หมายถึง เว็บที่ประกอบด้วยเว็บเพจหลาย ๆ เว็บเพจมารวมกัน อยู่ภายในพื้นที่เดียวกันและเชื่อมโยงระหว่างกันภายใต้โดเมนเนมเดียวกัน โดยมีโฮมเพจเป็นหน้าแรกของเว็บไซต์ทำหน้าที่เชื่อมโยงไปยังเว็บเพจต่าง ๆ

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

เว็บเพจ (Web page) หมายถึง เอกสารที่สร้างขึ้นโดยในรูปแบบของ HTML หรือโปรแกรมการสร้างเว็บโดยเฉพาะ จะแสดงผลได้เฉพาะโปรแกรมบราวเซอร์ และต้องติดตั้งในเว็บเซอร์เวอร์เพื่อเข้าไปอ่านข้อมูลได้โดยผ่านระบบอินเทอร์เน็ต เว็บเพจจะมี 2 ลักษณะใหญ่คือ
– เว็บเพจแบบหน้าเดียว (Single page) หรือแบบสั้น (Short page) หมายถึง เว็บเพจที่แสดงผลข้อมูลหรือเนื้อหาเพียงหน้าเดียวมีขนาดเท่ากับหน้าจอคอมพิวเตอร์พอดี หรือมีแถบเลื่อนลงมาด้านล่างสั้น ๆ หรือมีรูปแบบเป็นกรอบพอดีหน้าจอภาพ
– เว็บเพจแบบแถบเลื่อน (Scroll page) หรือแบบยาว (Long page) หมายถึง เว็บเพจที่แสดงผลข้อมูลหรือเนื้อหาเป็นแนวยาวจากด้านบนลงมายังด้านล่างของหน้าจอภาพ โดยมีแถบเลื่อนอยู่ด้านข้างสำหรับเลื่อนหน้าจอภาพ เพื่อดูข้อมูลที่แสดงผลหน้าจอภาพ

การออกแบบโครงสร้างเว็บ
สิ่งที่ต้องพิจารณาในการสร้างเว็บเพื่อการศึกษาคือ โครงสร้างหลักของเว็บ เนื่องจากการจัดการข้อมูลเพื่อการเรียนการสอนมีความแตกต่างกัน กลุ่มผู้เรียนที่แตกต่างและเนื้อหาของเว็บแตกต่างกัน โครงสร้างของเว็บก็จะมีผลต่อการเรียนการสอนเช่นกัน (McCormack and Jones, 1998)
โครงสร้างของเว็บโดยพื้นฐานจะมี 2 ลักษณะคือ
1. โครงสร้างเว็บแบบตื้น เป็นโครงสร้างเว็บในลักษณะที่มีการเชื่อมโยงจากหน้าแรกหรือหน้าที่หลักไปยังเนื้อหาโดยตรง โดยไม่มีเว็บเพจที่เป็นเนื้อหาเชื่อมโยงต่อไปอีกมากนัก สามารถกลับมายังหน้าแรกหรือหน้าหลักของของเว็บไซต์ได้ในทันที อาจจะมีการเชื่อมโยงของเนื้อหาต่อไปอีกบ้างแต่ไม่ต่อเนื่องเป็นลำดับลึกลงไปเหมือนกับโครงสร้างของเว็บแบบลึก โครงสร้างลักษณะนี้จึงเป็นโครงสร้างที่มีเนื้อหาแยกเป็นหน่วยย่อย ๆ หรือมีเนื้อหาเฉพาะเรื่องไม่เกี่ยวข้องกัน ทำให้ไม่ต้องเชื่อมโยงเว็บเพจต่อไปเรื่อย ๆ เว็บแบบตื้นอาจจะมีเนื้อหามากก็ได้ แต่ไม่เชื่อมโยงลึกลงไปอีก การออกแบบเว็บเพจอาจเป็นแบบหน้าเดียวสั้น ๆ หรือแบบแถบเลื่อนยาวลงไปมากก็ได้ เนื้อหาจบในหน้านั้นและไม่เชื่อมโยงไปอีก

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

องค์ประกอบที่ควรมีในเว็บเพจ

องค์ประกอบทั่วไป
1. ชื่อของเว็บเพจ (Title)
2. ประวัติและรูปภาพผู้จัดทำ (Profile/Picture)
3. การเชื่อมโยงภายในและภายนอกเว็บ (Links)
4. การแสดงที่อยู่ของเว็บ : URL
5. วัน/เวลาที่สร้างเว็บ (Date/Time)
6. การปรับปรุงครั้งล่าสุด (Update)
7. ผู้จัดทำเว็บ : (created by)
8. การสงวนลิขสิทธิ์ (Copy right)
9. การติดต่อผู้จัดทำเว็บ (contract /e-mail)
10. สถานที่ติดต่อของเว็บ (Address)
11. บราวเซอร์ที่เหมาะสมสำหรับการชม (Browser )
12. ขนาดหน้าจอที่เหมาะสมในการชม (Bested View)
13. คำถามที่ถูกถามบ่อย FAQ (Frequency Asked Question)
14. ความช่วยเหลือ (Help)

องค์ประกอบพิเศษ

1. สมุดเยี่ยม (Guest book)
2. ฝากข้อความ (Web board)
3. กระดานข่าว (Bulletin Board)
4. กระทู้ ( Webboard )
5. แบบสำรวจ (Web poll)
6. จำนวนผู้เข้าชม (Counter)
7. ห้องสนทนา (Chat Room)
8. สถิติทุกประเภท (Web state)
9. เทคนิคพิเศษด้วยโปรแกรมสคริปต์ (Java script, VBscript , cgi,asp,php)
10. โปรแกรมพิเศษสนับสนุน (Download)
11. สไลด์สรุปบรรยาย (Presentation)