Page 1

การออกแบบเว็บไซต

การจัดการธุรกิจดวยคอมพิวเตอร (3562104)

1


วัตถุประสงค เมื่อจบบทเรียนนีแ้ ลวนักศึกษาสามารถ „ บอกองคประกอบพื้นฐานของการออกแบบเว็บไซตไดอยางถูกตอง „ ออกแบบเว็บไซตไดอยางถูกตอง และเหมาะสม

2


เนื้อหา „ คําศัพทเกี่ยวกับเว็บไซต „ องคประกอบพื้นฐานของการออกแบบ „ วิธีการสรางเว็บเพจ „ กระบวนการ 13 ขัน ้ ตอนในการออกแบบ „ หลักการออกแบบเว็บไซต „ รูปแบบของเว็บไซต

3


คําศัพทเกี่ยวกับเว็บไซต „ เว็บไซต (Web site) „

แหลงขอมูลที่บรรจุอยูบนเครือขายอินเตอรเน็ต Æ หนังสือหนึ่งเลม

„ เว็บเพจ (Web page) „

หนาที่แสดงเอกสาร เนื้อหาของเว็บไซต Æ เอกสารแตละหนา

„ โฮมเพจ (Home page) „

หนาแรกของเว็บไชต Æ ปกของหนังสือ

4


องคประกอบพื้นฐานของการออกแบบเว็บไซต „ ความเรียบงาย (Simplicity) „ มีรูปแบบที่เรียบงาย ไมซับซอนและใชงานไดอยางสะดวก „ สื่อสารเนื้อหาถึงผูใชโดยมีเฉพาะองคประกอบเสริมที่จําเปนเทานั้น „ ความสม่ําเสมอ (Consistency) „ สรางความสม่ําเสมอใหกับเว็บไซตโดยใชรูปแบบเดียวกันตลอดทั้งเว็บไซต ทั้งในสวนของรูปแบบหนา สไตลของกราฟก ระบบเนวิเกชัน และโทนสี „ ถาลักษณะของแตละหนาในเว็บไซตเดียวกัน แตกตางกัน อาจทําใหผูใชเกิด ความสับสนได

5


„ ความเปนเอกลักษณ (Identity)

การออกแบบตองคํานึงถึงลักษณะขององคกร „ รูปแบบของเว็บไซตสามารถสะทอนถึงเอกลักษณขององคกร „

„ เนื้อหาที่มีประโยชน (Useful Content)

ควรจัดเตรียมเนื้อหาและขอมูลที่ผูใชตองการใหถูกตองและสมบูรณ „ ควรมีการปรับปรุงและเพิ่มเติมใหทันตอเหตุการณอยูเสมอ „

6


„ ระบบเนวิเกชันที่ใชงานงาย (User-Friendly Naviagtion)

ระบบเนวิเกชันจะตองออกแบบใหผูใชเขาใจงายและใชงานสะดวก โดยใช กราฟกที่สื่อความหมายรวมกับคําอธิบายอยางชัดเจน „ มีรูปแบบและลําดับของรายการอยางสม่ําเสมอ „

„ มีลักษณะที่นาสนใจ (Visual Appeal) „

ความนาในใจของเว็บไซตจะมีความสัมพันธกับคุณภาพขององคประกอบตาง ๆ เชน คุณภาพของกราฟก การใชชนิดตัวอักษร การใชโทนสี เปนตน

7


„ การใชงานอยางไมจํากัด (Compatibility) „ ควรออกแบบเว็บไซตใหครอบคลุมกับผูใชสวนใหญมากที่สุด „ ไมควรมีการติดตัง้ โปรแกรมเพิ่มเติม หรือเลือกใชบราวเซอรชนิดใดชนิดหนึ่ง „ สามารถแสดงผลไดทุกระบบปฏิบัติการและที่ความละเอียดหนาจอตาง ๆ กันได อยางไมมีปญหา „ คุณภาพในการออกแบบ (Design Stability) „ ควรใหความสําคัญกับการออกแบบเว็บไซต „ ควรมีมาตรฐานการออกแบบและการจัดระบบขอมูล

8


„ ระบบการใชงานที่ถูกตอง (Functional Stability)

ระบบการทํางานตาง ๆ ในเว็บไซตจะตองมีความแนนอนและทําหนาที่ได อยางถูกตอง เชน การกรอกขอมูล การเชื่อมโยง เปนตน „ ควรมีการตรวจสอบการทํางานอยูเสมอ „

9


ปจจัยสําคัญทีผ่ ูใชตองการจากเว็บไซต „ มีเนื้อหาที่เปนประโยชน ตรงกับที่ผูใชตองการ „ มีการปรับปรุงเนื้อหา และพัฒนาเว็บไซตอยูเสมอ „ ใชเวลาในการดาวนโหลดนอย แสดงผลเร็ว „ การใชงานที่สะดวก เขาใจงาย

10


ทีมงานพัฒนาเว็บไซต „ Webmaster „ เปนผูควบคุมในเรื่องการออกแบบ เนือ ้ หา และรายละเอียดทางเทคนิค „ Information Architect „ ทําหนาทีจ่ ด ั ระเบียบขอมูลและทดสอบประสิทธิภาพในการใชงาน „ Designer „ เปนผูอ  อกแบบลักษณะหนาตาของเว็บไซต และองคประกอบตาง ๆ „ HTML and JavaScript Coder „ รับผิดชอบการสรางเว็บเพจโดยอาศัยเครือ ่ งมือตาง ๆ „ ปรับปรุง เปลี่ยนแปลงขอมูล รวมถึงการอัพโหลดไฟล

11


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


วิธีการสรางเว็บเพจ „ สรางดวยภาษา HTML

โดยการใชโปรแกรมสรางเอกสาร (Text Editor) โดยทั่วไป เชน โปรแกรม NotePad โดยการใสคําสัง่ (Tag) ของภาษา HTML เขาไปโดยตรง วิธีนี้ ผูสรางตองมีประสบการณและการเรียนรูภาษา HTML มากอน „ สรางดวยโปรแกรมประยุกต เปนการสรางแบบที่เรียกวา WYSIWYG (What-You-See-IsWhat-You-Get) เชน Dreamweaver, FrontPage เปนตน

13


โปรแกรมชวยในการสรางเว็บ „ Macromedia Dreamweaver „ Microsoft FrontPage „ Allaire HomeSite „ CoffeeCup „ GoLive „ HotDog Pro „ HotMetaPro „ NetObjects Fusion

14


Macromedia Dreamweaver „ สามารถออกแบบหนาเว็บไดอยางสะดวกโดยอาศัยเครื่องมือตาง ๆ โดยไม

จําเปนตองรูเกี่ยวกับภาษา HTML „ มีหนาจอในการแสดงหนาจอการออกแบบและหนาจอคําสั่ง „ มีระบบเทมเพลตที่จะทําใหผูออกแบบสามารถใชโครงสรางเดียวกันทั้ง เว็บไซต „ มีเครื่องมือเพื่อชวยในการดาวนโหลดและอัพโหลดไฟลระหวางเครื่อง เซิรฟเวอรกับเครื่องที่ใชพัฒนาเว็บเพจ

15


Microsoft FrontPage „ ลักษณะการทํางานใกลเคียงกับโปรแกรมอื่น ๆ ที่อยูในชุด Office „ มีระบบอํานวยความสะดวกแบบ Wizard „ มีระบบในการบริหารจัดการเว็บไซต เชน ระบบรายงานเกี่ยวกับหนาเว็บเพจ

ที่แสดงผลชา เว็บเพจที่ถูกเพิ่มเขาไป ลิงคที่ใชงานไมได „ สามารถเชื่อมโยงกับระบบฐานขอมูลไดโดยสะดวก „ บางครั้งอาจมีคําสั่งเพิ่มเติมเขามาเกินความจําเปน หรืออาจเปลี่ยนแปลงโคด โดยไมรูตัว

16


Allaire HomeSite „ ชวยในการเขียนโคดภาษา HTML ดวยคุณสมบัติที่เรียกวา Tag

Insight และ Function Insight ซึ่งจะแสดงแอตตริบิวตที่ เหมาะสมขึ้นมาใหเลือกใชกับแท็กที่กําลังเขียน „ เหมาะสําหรับนักออกแบบเว็บที่ถนัดในการใชภาษา HTML

17


กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซต Phase 1 สํารวจปจจัยสําคัญ (Research) 1. รูจักตัวเอง – กําหนดเปาหมายและสํารวจความพรอม 2. เรียนรูผูใช – ระบุกลุมผูใชและศึกษาความตองการ 3. ศึกษาคูแขง – สํารวจการแขงขันและเรียนรูคูแขงสิง่ ที่ไดรับ สิง่ ที่ไดรับ 1. เปาหมายหลักของเว็บไซต 2. ความตองการของผูใช 3. กลยุทธในการแขงขัน

18


Phase 2 : พัฒนาเนื้อหา (Site Content) 4. สรางกลยุทธการออกแบบ 5. หาขอสรุปขอบเขตเนื้อหา สิ่งที่ไดรับ 1. แนวทางการออกแบบเว็บไซต 2. ขอบเขตเนื้อหาและการใชงาน 3. ขอมูลทีถ่ ูกจัดอยางเปนระบบ

19


Phase 3 : พัฒนาโครงสรางเว็บไซต (Site Structure) 6. จัดระบบขอมูล 7. จัดทําโครงสรางขอมูล 8. พัฒนาระบบเนวิเกชัน สิง่ ที่ไดรับ 1. แผนผังโครงสรางขอมูล 2. แนวทางการทองเว็บ 3. ระบบเนวิเกชัน

20


Phase 4 : ออกแบบและพัฒนาหนาเว็บ (Visual design) 9. ออกแบบลักษณะหนาตาเว็บเพจ 10. พัฒนาเว็บตนแบบและขอกําหนดสุดทาย สิง่ ที่ไดรับ 1. ลักษณะหนาตาของเว็บไซต 2. เว็บเพจตนแบบที่จะใชในการพัฒนา 3. รูปแบบโครงสรางของเว็บไซต 4. ขอกําหนดในการพัฒนาเว็บไซต

21


Phase 5 : พัฒนาและดําเนินการ (Production and Operation) 11. ลงมือพัฒนาเว็บเพจ 12. เปดตัวเว็บไซต 13. ดูแลและพัฒนาตอเนื่อง สิง่ ที่ไดรับ 1. เว็บไซตทสี่ มบูรณ 2. เปดตัวเว็บไซตและทําใหเปนที่รูจัก 3. แนวทางการดูแลและพัฒนาตอไป

22


หลักในการออกแบบเว็บไซต „ การออกแบบโครงสรางเว็บไซต (Website Structure

Design) „ การออกแบบหนาตาเว็บไซต (Website Interface Design)

23


การออกแบบโครงสรางเว็บไซต „ Site Map „ เปนการวางแผนเนื้อหาของเว็บไซต เพื่อเปนโครงสรางในการจัดวางหนาเว็บ เพจทั้งหมด „ เปรียบเสมือนแผนที่ที่ทําใหเห็นโครงสรางทั้งหมดของเว็บไซต „ ชวยในการออกแบบเว็บไซตเพื่อไมใหหลงทาง หรือการเชือ ่ มโยงแตละหนา „ เปนการนําเสนอแนวความคิดแบบลําดับชั้นจากสวนใหญไปหาสวนยอย หรือ ที่เรียกวาแบบบนลงลาง (Top Down Thinking)

24


„ Site Map ที่ดี

ทุก ๆ เว็บเพจจะตองมีลิงกทางออกเสมอ „ ทุก ๆ เว็บเพจควรมีลิงกกลับหนาโฮมเพจ หรือจุดเริ่มตน „ ควรมีหนาแสดง Site Map ในกรณีที่เว็บไซตมีจํานวนหนามาก ๆ „

„ สามารถประเมินราคาจาก Site Map ได

25


การออกแบบหนาเว็บไซต „ ใชงานงายและสะดวก โดยมีระบบ Navigation หรือระบบนําทางที่ดี

เขาใจงาย การใชงานไมซับซอน „ มองเห็นไดชัด ควรวางไวดานซาย หรือดานบน „ อยาเคลือ ่ นยายไปมา „ ควรมีลิงกกลับไปยังโฮมเพจ „

„ มีการออกแบบกราฟกที่สวยงาม สื่อความหมาย

26


„ ไมควรเสียเวลาโหลดภาพมากเกินไป

ขนาดกราฟกรวมกันไมควรเกิน 75 KB „ เปน Flash ไมควรเกิน 120 KB „

„ ภาพรวมทั้งหมดควรออกมาในอารมณเดียวกัน (Theme) หรือโครง

เดียวกัน แนวความคิดเดียวกัน

27


รูปแบบของเว็บไซต „ แบบ Content „ แบบ Image „ แบบผสม

28


แบบ Content „ ลักษณะงานจะเปนภาพกราฟกเล็ก ๆ มาเรียงกันเปนหนาเว็บเพจ „ จะมีเนื้อหามากกวารูป „ พัฒนามาจากการเขียนดวยภาษา HTML „ มีขอดีคอื ความเร็วในการโหลด

29


แบบ Image „ เปนภาพกราฟกขนาดใหญเต็มหนึ่งหนา แลวตัดแบงเปนชิ้นเล็ก ๆ (Slice

Image) มาวางเรียงกัน เพื่อความเร็วในการดาวนโหลด และแสดงผล „ มีรูปแบบที่สวยงามและหลายหลาย โดยจะทําการสรางจากโปรแกรมสรางรูป หรือตกแตงรูปโดยทั่วไป „ เหมาะกับหนาที่มีเนื้อหานอย ตองการความสวยงามเปนหลัก „ หากภาพใหญจะทําใหการดาวนโหลดชา

30


แบบผสม „ เปนการผสมผสานระหวางแบบ Content และแบบ Image

31


ความผิดพลาดในการออกแบบเว็บไซต „ ใชโครงสรางหนาเว็บเปนระบบเฟรม „ ใชเทคโนโลยีชั้นสูงโดยไมจําเปน „ ใชตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา „ มีที่อยูเว็บไซตที่ซับซอน (URL) ยากตอการจดจําและพิมพ „ ไมมีการแสดงชื่อและที่อยูของเว็บไซตในหนาเว็บเพจ „ มีความยาวของหนามากเกินไป „ ขาดระบบเนวิเกชันที่มีประสิทธิภาพ

32


„ ใชสีของลิงคไมเหมาะสม „ ขอมูลเกาไมมีการปรับปรุงใหทันสมัย „ เว็บเพจแสดงผลชา „

มีรายงานวิจัยวา ถาเกิน 8 วินาที ผูใชกวา 90% จะเปลี่ยนไปดูเว็บอื่นแทน

33

Web Design Techniques  

หลักการออกแบบเว็บไซต์สำหรับ E-Commerce

Read more
Read more
Similar to
Popular now
Just for you