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

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

1 หลักการและขั้นตอน การออกแบบเว็บไซต์
ครูผู้สอน นางสาวพิกุลแก้ว นวลวรรณ์ โรงเรียหนองกี่พิทยาคม

2 เนื้อหา 1. การกำหนดขนาดเว็บเพจ 2. รูปแบบการออกแบบเว็บไซต์
3. การออกแบบโครงสร้างเว็บไซต์ 4. โครงสร้างของเว็บไซต์ 5. องค์ประกอบของการออกแบบเว็บไซต์ 6. ขั้นตอนการสร้างเว็บไซต์ 7. การใช้สี

3 1. การกำหนดขนาดเว็บเพจ 1. ขนาดเว็บไซต์แบบ 800 X 600 pixels เป็นขนาดที่สามารถใช้ได้กับหน้าจอทุกขนาดในปัจจุบันเป็นขนาดของการออกแบบเว็บไซต์ที่ใช้ในอดีต เนื่องจากอดีตขนาดของจอคอมพิวเตอร์มีขนาดเล็ก 2. ขนาดเว็บไซต์แบบ 1024 X 768 pixels เป็นขนาดที่นิยมในปัจจุบัน เนื่องจากผู้ใช้นิยมใช้จอคอมพิวเตอร์ขนาดใหญ่ขึ้นเนื่องมาจากราคาจอคอมพิวเตอร์ที่ถูกลง

4 2. รูปแบบการออกแบบเว็บไซต์
1. การออกแบบเว็บไซต์ที่เน้นการนำเสนอเนื้อหา 2. การออกแบบเว็บไซต์ที่เน้นภาพกราฟิก 3.การออกแบบเว็บไซต์ที่มีทั้งภาพและเนื้อหา

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

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

7 องค์ประกอบที่ดีของการออกแบบเว็บไซต์
1. โครงสร้างที่ชัดเจน 2. การใช้งานที่ง่าย 3. การเชื่อมโยงที่ดี 4. ความเหมาะสมในหน้าจอ 5. ความรวดเร็ว

8 4. โครงสร้างของเว็บไซต์
1. เว็บที่มีโครงสร้างแบบเรียงลำดับ (Sequential Structure) 2. เว็บที่มีโครงสร้างแบบลำดับขั้น (Hierarchical Structure) 3. เว็บที่มีโครงสร้างแบบตาราง (Grid Structure) 4.เว็บที่มีโครงสร้างแบบใยแมงมุม (Web Structure)

9 5. องค์ประกอบของการออกแบบเว็บไซต์
1. ความเรียบง่าย (Simplicity) 2. ความสม่ำเสมอ ( Consistency) 3. ความเป็นเอกลักษณ์ (Identity) 4. เนื้อหา (Useful Content) 5. ระบบเนวิเกชั่น (User-Friendly Navigation) 6. คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal) 7. ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility) 8. ความคงที่ในการออกแบบ (Design Stability) 9. ความคงที่ของการทำงาน (Function Stability)

10 6. ขั้นตอนการออกแบบเว็บไซต์
ขั้นตอนที่ 1 การวางแผนการจัดทำเว็บไซต์ ขั้นตอนที่ 2 การกำหนดโครงสร้างของเว็บ ขั้นตอนที่ 3 การกำหนดการเชื่อมโยงเว็บเพจ ขั้นตอนที่ 4 การตั้งชื่อไฟล์และโฟลเดอร์ ขั้นตอนที่ 5 การออกแบบเว็บเพจแต่ละหน้าในเว็บไซต์

11 7. การเลือกใช้สี รูปแบบของสีที่สายตาของมนุษย์มองเห็น สามารถแบ่งออกเป็น 3 กลุ่ม 1. สีโทนร้อน (Warm Colors) เป็นกลุ่มสีที่แสดงถึงความสุข ความปลอบโยน ความอบอุ่น และดึงดูดใจ สีกลุ่มนี้เป็นกลุ่มสีที่ช่วยให้หายจากความเฉื่อยชา มีชีวิตชีวามากยิ่งขึ้น 2. สีโทนเย็น (Cool Colors) แสดงถึงความที่ดูสุภาพ อ่อนโยน เรียบร้อย เป็นกลุ่มสีที่มีคนชอบมากที่สุด สามารถโน้มนาวในระยะไกลได้ 3. สีโทนกลาง (Neutral Colors) สีที่เป็นกลาง ประกอบด้วย สีดำ สีขาว สีเทา และสีน้ำตาล กลุ่มสีเหล่านี้คือ สีกลางที่สามารถนำไปผสมกับสีอื่น ๆ เพื่อให้เกิดสีกลางขึ้นมา