1.
การออกแบบเว็บไซต์

2.
วัตถุประสงค์ <ul><li>เมื่อจบบทเรียนนี้แล้วนักเรียนสามารถ </li></ul><ul><li>บอกองค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ได้อย่างถูกต้อง </li></ul><ul><li>ออกแบบเว็บไซต์ได้อย่างถูกต้อง และเหมาะสม </li></ul>

3.
เนื้อหา <ul><li>คำศัพท์เกี่ยวกับเว็บไซต์ </li></ul><ul><li>องค์ประกอบพื้นฐานของการออกแบบ </li></ul><ul><li>วิธีการสร้างเว็บเพจ </li></ul><ul><li>กระบวนการ 13 ขั้นตอนในการออกแบบ </li></ul><ul><li>หลักการออกแบบเว็บไซต์ </li></ul><ul><li>รูปแบบของเว็บไซต์ </li></ul>

4.
คำศัพท์เกี่ยวกับเว็บไซต์ <ul><li>เว็บไซต์ ( Web site) </li></ul><ul><ul><li>แหล่งข้อมูลที่บรรจุอยู่บนเครือข่ายอินเตอร์เน็ต  หนังสือหนึ่งเล่ม </li></ul></ul><ul><li>เว็บเพจ ( Web page) </li></ul><ul><ul><li>หน้าที่แสดงเอกสาร เนื้อหาของเว็บไซต์  เอกสารแต่ละหน้า </li></ul></ul><ul><li>โฮมเพจ ( Home page) </li></ul><ul><ul><li>หน้าแรกของเว็บไชต์  ปกของหนังสือ </li></ul></ul>

5.
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ <ul><li>ความเรียบง่าย ( Simplicity) </li></ul><ul><ul><li>มีรูปแบบที่เรียบง่าย ไม่ซับซ้อนและใช้งานได้อย่างสะดวก </li></ul></ul><ul><ul><li>สื่อสารเนื้อหาถึงผู้ใช้โดยมีเฉพาะองค์ประกอบเสริมที่จำเป็นเท่านั้น </li></ul></ul><ul><li>ความสม่ำเสมอ ( Consistency) </li></ul><ul><ul><li>สร้างความสม่ำเสมอให้กับเว็บไซต์โดยใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ ทั้งในส่วนของรูปแบบหน้า สไตล์ของกราฟิก ระบบเนวิเกชัน และโทนสี </li></ul></ul><ul><ul><li>ถ้าลักษณะของแต่ละหน้าในเว็บไซต์เดียวกัน แตกต่างกัน อาจทำให้ผู้ใช้เกิดความสับสนได้ </li></ul></ul>

6.
<ul><li>ความเป็นเอกลักษณ์ ( Identity) </li></ul><ul><ul><li>การออกแบบต้องคำนึงถึงลักษณะขององค์กร </li></ul></ul><ul><ul><li>รูปแบบของเว็บไซต์สามารถสะท้อนถึงเอกลักษณ์ขององค์กร </li></ul></ul><ul><li>เนื้อหาที่มีประโยชน์ ( Useful Content) </li></ul><ul><ul><li>ควรจัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ </li></ul></ul><ul><ul><li>ควรมีการปรับปรุงและเพิ่มเติมให้ทันต่อเหตุการณ์อยู่เสมอ </li></ul></ul>

7.
<ul><li>ระบบเนวิเกชันที่ใช้งานง่าย ( User-Friendly Naviagtion) </li></ul><ul><ul><li>ระบบเนวิเกชันจะต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก โดยใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายอย่างชัดเจน </li></ul></ul><ul><ul><li>มีรูปแบบและลำดับของรายการอย่างสม่ำเสมอ </li></ul></ul><ul><li>มีลักษณะที่น่าสนใจ ( Visual Appeal) </li></ul><ul><ul><li>ความน่าในใจของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่าง ๆ เช่น คุณภาพของกราฟิก การใช้ชนิดตัวอักษร การใช้โทนสี เป็นต้น </li></ul></ul>

8.
<ul><li>การใช้งานอย่างไม่จำกัด ( Compatibility) </li></ul><ul><ul><li>ควรออกแบบเว็บไซต์ให้ครอบคลุมกับผู้ใช้ส่วนใหญ่มากที่สุด </li></ul></ul><ul><ul><li>ไม่ควรมีการติดตั้งโปรแกรมเพิ่มเติม หรือเลือกใช้บราวเซอร์ชนิดใดชนิดหนึ่ง </li></ul></ul><ul><ul><li>สามารถแสดงผลได้ทุกระบบปฏิบัติการและที่ความละเอียดหน้าจอต่าง ๆ กันได้อย่างไม่มีปัญหา </li></ul></ul><ul><li>คุณภาพในการออกแบบ ( Design Stability) </li></ul><ul><ul><li>ควรให้ความสำคัญกับการออกแบบเว็บไซต์ </li></ul></ul><ul><ul><li>ควรมีมาตรฐานการออกแบบและการจัดระบบข้อมูล </li></ul></ul>

9.
<ul><li>ระบบการใช้งานที่ถูกต้อง ( Functional Stability) </li></ul><ul><ul><li>ระบบการทำงานต่าง ๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง เช่น การกรอกข้อมูล การเชื่อมโยง เป็นต้น </li></ul></ul><ul><ul><li>ควรมีการตรวจสอบการทำงานอยู่เสมอ </li></ul></ul>

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

11.
ทีมงานพัฒนาเว็บไซต์ <ul><li>Webmaster </li></ul><ul><ul><li>เป็นผู้ควบคุมในเรื่องการออกแบบ เนื้อหา และรายละเอียดทางเทคนิค </li></ul></ul><ul><li>Information Architect </li></ul><ul><ul><li>ทำหน้าที่จัดระเบียบข้อมูลและทดสอบประสิทธิภาพในการใช้งาน </li></ul></ul><ul><li>Designer </li></ul><ul><ul><li>เป็นผู้ออกแบบลักษณะหน้าตาของเว็บไซต์ และองค์ประกอบต่าง ๆ </li></ul></ul><ul><li>HTML and JavaScript Coder </li></ul><ul><ul><li>รับผิดชอบการสร้างเว็บเพจโดยอาศัยเครื่องมือต่าง ๆ </li></ul></ul><ul><ul><li>ปรับปรุง เปลี่ยนแปลงข้อมูล รวมถึงการอัพโหลดไฟล์ </li></ul></ul>

12.
<ul><li>Developer/Programmer </li></ul><ul><ul><li>เป็นผู้เขียนสคริปต์และโปรแกรมต่าง ๆ </li></ul></ul><ul><ul><li>อาจต้องเกี่ยวข้องกับระบบฐานข้อมูล </li></ul></ul><ul><li>System Administrator </li></ul><ul><ul><li>ทำหน้าที่ควบคุม ดูแลเว็บเซิร์ฟเวอร์ รวมถึงฮาร์ดแวร์และซอฟต์แวร์อื่นที่เกี่ยวข้อง </li></ul></ul><ul><ul><li>สามารถวิเคราะห์และปรับตั้งระบบเพื่อการทำงานที่มีประสิทธิภาพ </li></ul></ul><ul><li>Content Editor/Writer </li></ul><ul><ul><li>เป็นบรรณาธิการ โดยรับผิดชอบในการจัดเตรียมเนื้อหา ตรวจสอบความถูกต้อง </li></ul></ul>

13.
วิธีการสร้างเว็บเพจ <ul><li>สร้างด้วยภาษา HTML โดยการใช้โปรแกรมสร้างเอกสาร (Text Editor) โดยทั่วไป เช่น โปรแกรม NotePad โดยการใส่คำสั่ง (Tag) ของภาษา HTML เข้าไปโดยตรง วิธีนี้ผู้สร้างต้องมีประสบการณ์และการเรียนรู้ภาษา HTML มาก่อน </li></ul><ul><li>สร้างด้วยโปรแกรมประยุกต์ เป็นการสร้างแบบที่เรียกว่า WYSIWYG (What-You-See-Is- What-You-Get) เช่น Dreamweaver, FrontPage เป็นต้น </li></ul>

14.
โปรแกรมช่วยในการสร้างเว็บ <ul><li>Macromedia Dreamweaver </li></ul><ul><li>Microsoft FrontPage </li></ul><ul><li>Allaire HomeSite </li></ul><ul><li>CoffeeCup </li></ul><ul><li>GoLive </li></ul><ul><li>HotDog Pro </li></ul><ul><li>HotMetaPro </li></ul><ul><li>NetObjects Fusion </li></ul>

15.
Macromedia Dreamweaver <ul><li>สามารถออกแบบหน้าเว็บได้อย่างสะดวกโดยอาศัยเครื่องมือต่าง ๆ โดยไม่จำเป็นต้องรู้เกี่ยวกับภาษา HTML </li></ul><ul><li>มีหน้าจอในการแสดงหน้าจอการออกแบบและหน้าจอคำสั่ง </li></ul><ul><li>มีระบบเทมเพลตที่จะทำให้ผู้ออกแบบสามารถใช้โครงสร้างเดียวกันทั้งเว็บไซต์ </li></ul><ul><li>มีเครื่องมือเพื่อช่วยในการดาวน์โหลดและอัพโหลดไฟล์ระหว่างเครื่องเซิร์ฟเวอร์กับเครื่องที่ใช้พัฒนาเว็บเพจ </li></ul>

16.
Microsoft FrontPage <ul><li>ลักษณะการทำงานใกล้เคียงกับโปรแกรมอื่น ๆ ที่อยูในชุด Office </li></ul><ul><li>มีระบบอำนวยความสะดวกแบบ Wizard </li></ul><ul><li>มีระบบในการบริหารจัดการเว็บไซต์ เช่น ระบบรายงานเกี่ยวกับหน้าเว็บเพจที่แสดงผลช้า เว็บเพจที่ถูกเพิ่มเข้าไป ลิงค์ที่ใช้งานไม่ได้ </li></ul><ul><li>สามารถเชื่อมโยงกับระบบฐานข้อมูลได้โดยสะดวก </li></ul><ul><li>บางครั้งอาจมีคำสั่งเพิ่มเติมเข้ามาเกินความจำเป็น หรืออาจเปลี่ยนแปลงโค้ดโดยไม่รู้ตัว </li></ul>

17.
Allaire HomeSite <ul><li>ช่วยในการเขียนโค้ดภาษา HTML ด้วยคุณสมบัติที่เรียกว่า Tag Insight และ Function Insight ซึ่งจะแสดงแอตตริบิวต์ที่เหมาะสมขึ้นมาให้เลือกใช้กับแท็กที่กำลังเขียน </li></ul><ul><li>เหมาะสำหรับนักออกแบบเว็บที่ถนัดในการใช้ภาษา HTML </li></ul>

18.
กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซต์ <ul><li>Phase 1 สำรวจปัจจัยสำคัญ ( Research) </li></ul><ul><li>1. รู้จักตัวเอง – กำหนดเป้าหมายและสำรวจความพร้อม </li></ul><ul><li>2. เรียนรู้ผู้ใช้ – ระบุกลุ่มผู้ใช้และศึกษาความต้องการ </li></ul><ul><li>3. ศึกษาคู่แข่ง – สำรวจการแข่งขันและเรียนรู้คู่แข่งสิ่งที่ได้รับ </li></ul><ul><li>สิ่งที่ได้รับ </li></ul><ul><li>1. เป้าหมายหลักของเว็บไซต์ </li></ul><ul><li>2. ความต้องการของผู้ใช้ </li></ul><ul><li>3. กลยุทธ์ในการแข่งขัน </li></ul>

19.
<ul><li>Phase 2 : พัฒนาเนื้อหา ( Site Content) </li></ul><ul><li>4. สร้างกลยุทธ์การออกแบบ </li></ul><ul><li>5. หาข้อสรุปขอบเขตเนื้อหา </li></ul><ul><li>สิ่งที่ได้รับ </li></ul><ul><li>แนวทางการออกแบบเว็บไซต์ </li></ul><ul><li>ขอบเขตเนื้อหาและการใช้งาน </li></ul><ul><li>ข้อมูลที่ถูกจัดอย่างเป็นระบบ </li></ul>

20.
<ul><li>Phase 3 : พัฒนาโครงสร้างเว็บไซต์ ( Site Structure) </li></ul><ul><li>6. จัดระบบข้อมูล </li></ul><ul><li>7. จัดทำโครงสร้างข้อมูล </li></ul><ul><li>8. พัฒนาระบบเนวิเกชัน </li></ul><ul><li>สิ่งที่ได้รับ </li></ul><ul><li>แผนผังโครงสร้างข้อมูล </li></ul><ul><li>แนวทางการท่องเว็บ </li></ul><ul><li>ระบบเนวิเกชัน </li></ul>

21.
<ul><li>Phase 4 : ออกแบบและพัฒนาหน้าเว็บ ( Visual design) </li></ul><ul><li>9. ออกแบบลักษณะหน้าตาเว็บเพจ </li></ul><ul><li>10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย </li></ul><ul><li>สิ่งที่ได้รับ </li></ul><ul><li>ลักษณะหน้าตาของเว็บไซต์ </li></ul><ul><li>เว็บเพจต้นแบบที่จะใช้ในการพัฒนา </li></ul><ul><li>รูปแบบโครงสร้างของเว็บไซต์ </li></ul><ul><li>ข้อกำหนดในการพัฒนาเว็บไซต์ </li></ul>

22.
<ul><li>Phase 5 : พัฒนาและดำเนินการ ( Production and Operation) </li></ul><ul><li>11. ลงมือพัฒนาเว็บเพจ </li></ul><ul><li>12. เปิดตัวเว็บไซต์ </li></ul><ul><li>13. ดูแลและพัฒนาต่อเนื่อง </li></ul><ul><li>สิ่งที่ได้รับ </li></ul><ul><li>เว็บไซต์ที่สมบูรณ์ </li></ul><ul><li>เปิดตัวเว็บไซต์และทำให้เป็นที่รู้จัก </li></ul><ul><li>แนวทางการดูแลและพัฒนาต่อไป </li></ul>

23.
หลักในการออกแบบเว็บไซต์ <ul><li>การออกแบบโครงสร้างเว็บไซต์ ( Website Structure Design) </li></ul><ul><li>การออกแบบหน้าตาเว็บไซต์ ( Website Interface Design) </li></ul>

24.
การออกแบบโครงสร้างเว็บไซต์ <ul><li>Site Map </li></ul><ul><ul><li>เป็นการวางแผนเนื้อหาของเว็บไซต์ เพื่อเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด </li></ul></ul><ul><ul><li>เปรียบเสมือนแผนที่ที่ทำให้เห็นโครงสร้างทั้งหมดของเว็บไซต์ </li></ul></ul><ul><ul><li>ช่วยในการออกแบบเว็บไซต์เพื่อไม่ให้หลงทาง หรือการเชื่อมโยงแต่ละหน้า </li></ul></ul><ul><ul><li>เป็นการนำเสนอแนวความคิดแบบลำดับชั้นจากส่วนใหญ่ไปหาส่วนย่อย หรือที่เรียกว่าแบบบนลงล่าง ( Top Down Thinking) </li></ul></ul>

25.
<ul><li>Site Map ที่ดี </li></ul><ul><ul><li>ทุก ๆ เว็บเพจจะต้องมีลิงก์ทางออกเสมอ </li></ul></ul><ul><ul><li>ทุก ๆ เว็บเพจควรมีลิงก์กลับหน้าโฮมเพจ หรือจุดเริ่มต้น </li></ul></ul><ul><ul><li>ควรมีหน้าแสดง Site Map ในกรณีที่เว็บไซต์มีจำนวนหน้ามาก ๆ </li></ul></ul><ul><li>สามารถประเมินราคาจาก Site Map ได้ </li></ul>

26.
การออกแบบหน้าเว็บไซต์ <ul><li>ใช้งานง่ายและสะดวก โดยมีระบบ Navigation หรือระบบนำทางที่ดี </li></ul><ul><ul><li>เข้าใจง่าย การใช้งานไม่ซับซ้อน </li></ul></ul><ul><ul><li>มองเห็นได้ชัด ควรวางไว้ด้านซ้าย หรือด้านบน </li></ul></ul><ul><ul><li>อย่าเคลื่อนย้ายไปมา </li></ul></ul><ul><ul><li>ควรมีลิงก์กลับไปยังโฮมเพจ </li></ul></ul><ul><li>มีการออกแบบกราฟิกที่สวยงาม สื่อความหมาย </li></ul>

27.
<ul><li>ไม่ควรเสียเวลาโหลดภาพมากเกินไป </li></ul><ul><ul><li>ขนาดกราฟิกรวมกันไม่ควรเกิน 75 KB </li></ul></ul><ul><ul><li>เป็น Flash ไม่ควรเกิน 120 KB </li></ul></ul><ul><li>ภาพรวมทั้งหมดควรออกมาในอารมณ์เดียวกัน ( Theme) หรือโครงเดียวกัน แนวความคิดเดียวกัน </li></ul>

28.
รูปแบบของเว็บไซต์ <ul><li>แบบ Content </li></ul><ul><li>แบบ Image </li></ul><ul><li>แบบผสม </li></ul>

29.
แบบ Content <ul><li>ลักษณะงานจะเป็นภาพกราฟิกเล็ก ๆ มาเรียงกันเป็นหน้าเว็บเพจ </li></ul><ul><li>จะมีเนื้อหามากกว่ารูป </li></ul><ul><li>พัฒนามาจากการเขียนด้วยภาษา HTML </li></ul><ul><li>มีข้อดีคือ ความเร็วในการโหลด </li></ul>

30.
แบบ Image <ul><li>เป็นภาพกราฟิกขนาดใหญ่เต็มหนึ่งหน้า แล้วตัดแบ่งเป็นชิ้นเล็ก ๆ ( Slice Image) มาวางเรียงกัน เพื่อความเร็วในการดาวน์โหลด และแสดงผล </li></ul><ul><li>มีรูปแบบที่สวยงามและหลายหลาย โดยจะทำการสร้างจากโปรแกรมสร้างรูป หรือตกแต่งรูปโดยทั่วไป </li></ul><ul><li>เหมาะกับหน้าที่มีเนื้อหาน้อย ต้องการความสวยงามเป็นหลัก </li></ul><ul><li>หากภาพใหญ่จะทำให้การดาวน์โหลดช้า </li></ul>

31.
แบบผสม <ul><li>เป็นการผสมผสานระหว่างแบบ Content และแบบ Image </li></ul>

32.
ความผิดพลาดในการออกแบบเว็บไซต์ <ul><li>ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม </li></ul><ul><li>ใช้เทคโนโลยีชั้นสูงโดยไม่จำเป็น </li></ul><ul><li>ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา </li></ul><ul><li>มีที่อยู่เว็บไซต์ที่ซับซ้อน ( URL) ยากต่อการจดจำและพิมพ์ </li></ul><ul><li>ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ </li></ul><ul><li>มีความยาวของหน้ามากเกินไป </li></ul><ul><li>ขาดระบบเนวิเกชันที่มีประสิทธิภาพ </li></ul>

33.
<ul><li>ใช้สีของลิงค์ไม่เหมาะสม </li></ul><ul><li>ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย </li></ul><ul><li>เว็บเพจแสดงผลช้า </li></ul><ul><ul><li>มีรายงานวิจัยว่า ถ้าเกิน 8 วินาที ผู้ใช้กว่า 90% จะเปลี่ยนไปดูเว็บอื่นแทน </li></ul></ul>