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

งานนำเสนอเรื่อง: "หลักการออกแบบเว็บไซต์"— ใบสำเนางานนำเสนอ:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16

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

18 Example 1 Example 1 Example 1 Example