หลักการออกแบบเว็บไซต์

Static Website รูปแบบของเว็บไซต์ Dynamic Website

Static Website เว็บไซต์ที่สร้างด้วยภาษา HTML ธรรมดา และบันทึกเป็นไฟล์นามสกุล .html   เนื้อหาข้อความ รูปภาพในหน้าเว็บเพจนั้นจะเป็นไปตามที่เราเขียนกำหนดไว้ Static Website เหมาะกับเว็บไซต์ที่มีขนาดไม่ใหญ่ จำนวนหน้าเว็บเพจไม่มาก ไม่มีการเปลี่ยนแปลงข้อมูลบ่อยๆ  และไม่มีการติดต่อฐานข้อมูล Dynamic Website เว็บไซต์ที่หน้าเว็บเพจสามารถเปลี่ยนแปลงข้อมูลเองได้ โดยไม่ต้องเขียนแต่ละหน้าเว็บเพจเอง  เช่น กระดานข่าว (Webboard), ระบบสืบค้นข้อมูล เว็บไซต์รูปแบบนี้จะถูกสร้างด้วยภาษา Script แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอื่นๆ  และมักจะมีการติดต่อกับฐานข้อมูลเพื่อบันทึกข้อมูลลงในฐานข้อมูล หรือนำข้อมูลจากฐานข้อมูลขึ้นมาแสดงผลเป็นหน้าเว็บเพจ

ส่วนประกอบของหน้าเว็บเพจ แบ่งเป็น 3 ส่วน ส่วนหัวของหน้า (Page Header) ส่วนของเนื้อหา (Page Body) ส่วนท้ายกระดาษ (Page Footer)

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

3. ส่วนท้าย (Page Footer)  จะอยู่บริเวณด้านล่างสุดของหน้าเว็บเพจ ส่วนมากใช้สำหรับลิงก์ข้อความสั้น ๆ เข้าใจง่าย หรือจะมีชื่อเจ้าของ เว็บไซต์ อีเมลแอดเดรสของผู้ดูแลเว็บไซต์สำหรับติดต่อกับทางเว็บไซต์

แนวคิดในการออกแบบเว็บไซต์

แนวคิดในการออกแบบเว็บไซต์ เรียนรู้จากเว็บไซต์ต่างๆ ประยุกต์รูปแบบจากสิ่งพิพม์ ใช้แบบจำลองเปรียบเทียบ ออกแบบอย่างสร้างสรรค์

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

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

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

ออกแบบอย่างสร้างสรรค์

ขั้นตอนในการออกแบบเว็บไซต์

ขั้นตอนการพัฒนาเว็บไซต์ 1. วางแผนการพัฒนาเว็บเพจ การกำหนดรูปแบบโครงสร้าง ออกแบบหน้าเว็บแต่ละหน้า 2. กำหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ที่ใช้เก็บเอกสารเว็บ 3. สร้างภาพหรือจัดหาภาพที่เกี่ยวข้องกับเนื้อหาแล้วจัดเก็บไว้ในไดเร็กทรอรี่ตามข้อ 2. 4. สร้างเอกสารเว็บ โดยกำหนดชื่อไฟล์เอกสารเว็บ ตามข้อกำหนดของผู้ดูแลระบบเครือข่าย (Web System Administrator) และจัดเก็บไว้ในไดเร็กทรอรี่ 5. ตรวจสอบผลเอกสารเว็บผ่านเบราเซอร์ 6. ส่งข้อมูลขึ้นเครื่องแม่ข่าย (Server) และทำการตรวจสอบผลการเรียกดูจาก เครื่องแม่ข่าย

การวางแผนพัฒนาเว็บเพจ แบบลำดับขั้น กำหนดรูปแบบของโครงสร้าง แบบเชิงเส้น แบบผสมผสาน

ออกแบบหน้าเว็บ

Example 1 Example 1 Example 1 Example