ขั้นตอนการพัฒนาเว็บเพจ
1. วางแผน/กำหนดข้อหัว และเนื้อหาที่นำเสนอ
2. สร้างผังความสัมพันธ์ของข้อมูลแบบรากต้นไม้
3. กำหนดชื่อไฟล์ของเอกสารเว็บ
4. สร้างโฟลเดอร์เฉพาะสำหรับเอกสารเว็บแต่ละชุด/เรื่อง ในโฟลเดอร์ที่สร้าง สามารถสร้างโฟลเดอร์ย่อย เพื่อเก็บไฟล์ให้เป็นระบบระเบียบได้
5. จัดหาภาพหรือสร้างภาพที่เกี่ยวข้องกับเนื้อหา ได้แก่
สร้างภาพด้วยโปรแกรมกราฟิก เช่น Adobe PhotoShop
คัดเลือกจาก Clipart fot Web เช่น CD-ROM รวมภาพสำหรับเว็บ
6. ภาพที่เลือกใช้ทั้งหมด ต้องเก็บไว้ในโฟลเดร์ที่สร้างไว้ก่อนแล้ว
7. สร้างเอกสารเว็บ โดยลงรหัส HTML หรือใช้โปรแกรมสร้างเว็บช่วย
7.1 การสร้างเว็บเพจ โดยลงรหัส HTML
- ใช้ภาษา HTML โดยป้อนคำสั่งภาษา HTML ด้วยโปรแกรม Text Editor เช่น NotePad
- ใส่คำสั่งได้ตามต้องการ
- ไม่เหมาะสำหรับผู้พัฒนาในระดับต้น
7.2 .ใช้โปรแกรมสร้างเอกสร้างเว็บ เช่น Macromedia Dreamweaver
- ไม่ต้องศึกษาภาษา HTML
- จุดด้อยคือ โปรแกรมจะไม่รู้จักคำสั่ง HTML ใหม่ๆ
8. ภาษาไทยกับการสร้างเว็บ เลือกรูปแบบการเข้ารหัสภาษาไทยที่ถูกต้อง Windows-874 หรือ TIS-620
9. กำหนดฟอนต์ให้กับข้อมูล เพื่อให้แสดงผลภาษาไทยได้ถกต้อง เช่น MS San Serif, Thonburi เป็นฟอนต์ที่เหมาะสมที่สุดในการแสดงผลภาษาไทย เช่น การเว้นวรรค เป็นระยะในประโยคเพื่อให้เบราเซอร์แสดงผลภาษาไทย
10. ไฟล์เอกสาร HTML ทุกไฟล์ต้องบันทึกไว้ในโฟลเดอร์ที่สร้างไว้ก่อน รวมกับรูปภาพที่จัดเตรียมไว้แล้ว
11. ตรวจสอบผลเอกสาร HTML ด้วยเบราเซอร์ซึ่งมีหลายค่ายหลายรุ่น เว็บเบราเซอร์แต่ละค่าย แต่ละรุ่น จะรู้จักคำสั่ง HTML ไม่เท่ากัน
12. ส่งข้อมูลขึ้นเครื่องคอมพิวเตอร์แม่ข่าย (server)
13. ตรวจสอบผลของเครื่องคอมพิวเตอร์ลูกข่ายที่เรียกดูข้อมูลจากเครื่องแม่ข่าย
โครงสร้างหรือหลักการออกแบบเว็บเพจ
1. รูปภาพ (Graphic or Photo) การใช้รูปภาพในเว็บไซต์มีอยู่ 2 จุดประสงค์ คือ เพื่อเพิ่มความสวยงามและดึงดูดความสนใจในการเข้าชมเพื่อแสดงข้อมูล และรายบละเอียดต่าง ๆ ของสินค้า ทั้งนี้รูปภาพดังกล่าวจะมีทั้งรูปที่เป็นภาพจริง (Photo) และภาพที่วาดขึ้นโดยใช้เทคนิคต่าง ๆ (Graphic) โดยรูปภาพดังกล่าวจะสามารถใช้เป็นจุดเชื่อมโยงได้อีกด้วยโดยที่สามารถทำการสร้างจุดเชื่อมโยงได้หลายจุดในภาพ 1 ภาพ (เรียกว่า Image map) หรือการแม็ปภาพ
2. แบบฟอร์ม (Form) ในการส่งข้อมูลผ่าน Web Site นอกเหนือการเขียน e-mail ยังสามารถส่งข้อมูลในแบบฟอร์มที่จัดทำอยู่ใน Web Site ได้โดยมีข้อดีคือทางผู้ใช้จะตอบเฉพาะคำถามที่ทางผู้ดูแล Web Site ต้องการทราบเท่านั้น โดยจะประหยัดเวลาทั้งสองฝ่ายในการเก็บข้อมูลดังกล่าว ทั้งนี้แบบฟอร์มต่าง ๆ จะมีอยู่ในหลายรูปแบบเช่น Check Box, Radio Button หรือ Scroll Bar ก็ได้
3. ภาพยนตร์และเสียงประกอบ (Movie and Sound) การเพิ่มภาพยนตร์และเสียงประกอบจะทำให้ Web Site มีความน่าสนใจและดึงดูดใจผู้เข้าชมมากขึ้น นอกจากเพิ่มความสวยงามและความสมจริงของข้อมูลแล้ว ยังเป็นการง่ายต่อผู้ใช้ที่จะรับรู้ข้อมูลข่าวสารต่าง ๆ ด้วยหรืออาจจะทำการแสดงแฉพาะเสียงประกอบเพียงอย่างเดียวก็ได้ เช่น เสียงเพลงประกอบตลอดเวลาที่ผู้ใช้ดูข้อมูลอยู่ใน Web Site
4. ตัวนับ (Hit Counter) ใช้นับจำนวนผู้เข้าชม Web Site (โดยมีพื้นฐานมาจากการใช้ CGI Script) และทำการวัดประสิทธิภาพของการโฆษณาและประชาสัมพันธ์
5. กรอบ (Frame) เพื่อความสวยงามและความสะดวกในการใช้งาน ผู้ออกแบบสามารถทำการแบ่งจอภาพออกเป็นหลายๆส่วน ในกรณีที่ Web Site มีขนาดใหญ่ และมี Link หลายๆชุดต่อกันออกไปทำให้การที่จะกลับมาที่จุเริ่มต้นสามารถทำได้โดยง่าย หรือการที่ต้องการข้อมูลบางอย่างแสดงผลภาพบางอย่างอยู่ตลอดเวลาใน Web Site
6. CGI Script เป็นการประมวลผลข้อมูลจากผู้ใช้ด้วย CGI หรือ Common Gateway Interface จะเป็นตัวกลาง ที่ทำหน้าที่เชื่อมโยง Web Site กับผู้ใช้เพื่อใช้ในการเก็บข้อมูลและนำไปประมวลผลส่งกลับให้กับผู้ใช้หรือให้กับผู้ดูแล Web Site (Web Master) เพื่อนำไปใช้ประโยชน์อื่น ๆ ต่อไป เช่น การสำรวจความคิดเห็น ทำ Poll การสั่งซื้อสินค้าทางอินเตอร์เนต การสมัครสมาชิกและอื่น ๆ (หมายเหตุ: ข้อมูลที่ประมวลผลแล้วสามารถนำกลับมาเพื่อแสดงใน Web Site ได้ในภายหลัง)
7. จาวา (Java) เป็นภาษาที่สามารถทำงานโดยไม่ขึ้นกับแพลตฟอร์ม (หมายความว่า Java สามารถทำงานได้แม้ในลักษณะของโปรแกรมที่แตกต่างกัน ไม่ว่าจะทำงานบน Windows NT หรือ UNIX ก็เหมือนกัน) โดย Java จะนำมาใช้สำหรับการโต้ตอบกับระบบ Multimedia เพื่อเพิ่มความน่าดึงดูดใจของ Web Site เช่นการใส่เสียงเพลง เป็นต้น รวมทั้งการใช้งานด้านความปลอดภัย เช่นการส่งข้อมูลของบัตรเครดิต เป็นต้น นอกจากนี้ยังใช้เป็นคำสั่งในการประมวลผลในลักษณะเดียวกันกับ CGI Script อีกด้วย
ที่มา http://www.pm.ac.th/vrj/web/disign.htm
