Chapter 1

1. Chapter 1:
Introduction to Web Design
946-341 Web Design & Development in Business946-341 Web Design & Development in Business946-341 Web Design & Development in Business946-341 Web Design & Development in Business
1
COURSE SYLLABUS
1. Course Syllabus
2. Grading
3. Lab & Lecture
4. Chapter 1 – Introduction to web Design
2
ใคร ๆ ก็มีเว็บไซต์ได้
ในโลกของอินเตอร์เน็ต เว็บเพจ(Web Page)นันเป็น
เสมือนกระดาษอิเล็กทรอนิกส์ (e-paper) ทีสามารถ
นําไปใช้ประโยชน์ได้อย่างไม่จํากัด
Chapter 1 : Introduction to Web Design
3
รู้จักกับศัพท์เทคนิค
(1) Web Page (เว็บเพจ)
(2) Web Site ( เว็บไซต์ )
(3) Home Page (โฮมเพจ)
(4) LINK ( ลิงค์ )
(5) Web Browser (เว็บเบราเซอร์)
ความเหมือนทีแตกต่างของโฮมเพจและเว็บไซต์
Chapter 1 : Introduction to Web Design
4

2. รู้จักกับศัพท์เทคนิค
(1) Web Page คือ คําทีเรียกหน้าเอกสารต่าง ๆ ทีเราเปิดดูใน WWW
เปรียบเสมือนหน้ากระดาษแต่ละหน้าซึงส่วนใหญ่ถูกสร้างจากภาษา
ทีเรียกว่า HTML
(2) Web Site คือ คําทีใช้เรียกกลุ่มของเว็บเพจ โดยมักจะใช้เรียกเว็บทีมี
ขนาดใหญ่และมีการจดทะเบียนชือเว็บไซต์นันๆ ไว้แล้ว (Domain
Name) เช่น http://www.sanook.com
Chapter 1 : Introduction to Web Design
5
รู้จักกับศัพท์เทคนิค
(3) HomePage คือ ในแต่ละเว็บไซต์ จะประกอบด้วยเว็บเพจหลายหน้า
แต่ต้องมีการกําหนดไว้ว่า จะให้หน้าใดเป็นหน้าแรก เว็บเพจทีเป็น
หน้าแรกนี เรียกว่า “HomePage” ทําหน้าทีเหมือนเป็นปกหนังสือ
ซึงมีสารบัญ สรุปเนือหา คําแนะนําการใช้งาน ข้อมูลทีน่าสนใจ
จากหน้าแรก link ไปได้ทังแบบตัวอักษรและ graphic ลิงค์เหล่านี
ทําหน้าทีเชือมโยงไปยังเว็บเพจหน้าอืน ๆ
Chapter 1 : Introduction to Web Design
6
Chapter 1 : Introduction to Web Design
ความเหมือนทีแตกต่างของโฮมเพจและเว็บไซต์
เรามักสับสนกับคําว่า “โฮมเพจ” และ “เว็บไซต์” ซึงจริงๆแล้ว
เราสามารถเรียกได้ทัง 2 ชือ แต่จะนิยมเรียก site ทีไม่ได้
จดทะเบียนและไม่มีชือโดเมน เป็นของตนเองว่า “โฮมเพจ”
รู้จักกับศัพท์เทคนิค
7
Chapter 1 : Introduction to Web Design
คือ การเชือมต่อถึงกัน ของเว็บเพจแต่ละหน้า ทําให้เราสามารถ
เรียกดูเว็บเพจจากหน้าหนึงไปอีกหน้าหนึงได้ โดยในเว็บเพจมี
จุดเชือมโยงทีเรียกว่า Link ให้เราคลิกเมาส์ เพือไปดูข้อมูลใน
ส่วนอืนของเว็บเพจหน้านัน หรือ ไปเว็บเพจหน้าอืนได้
(4) LINK
รู้จักกับศัพท์เทคนิค
8

3. Chapter 1 : Introduction to Web Design
(5) Web Browser
โปรแกรมเว็บเบราเซอร์ทําหน้าทีรับ
ข้อมูลจากเว็บเซิร์ฟเวอร์ ตีความ
แล้วแสดงผล โดยข้อมูลทีส่งมา จะ
อยู่ในรูปแบบของภาษา HTML (ซึง
เป็นภาษาทางคอมพิวเตอร์อย่าง
หนึง) ภาษานี เราตีความยาก จึงต้อง
อาศัยเว็บเบราเซอร์แปลให้อยู่ใน
รูปแบบทีเราเข้าใจ
รู้จักกับศัพท์เทคนิค
9
Chapter 1 : Introduction to Web Design
การสร้าง Web Page ทําได้ 2 ทาง
1. สร้างขึนเอง โดยการเรียนรู้คําสังของภาษา HTML พิมพ์
ผ่านทางโปรแกรม Text Editor ใด ๆ เช่น Notepad
2. ใช้โปรแกรมสําหรับสร้างเว็บ การสร้างเว็บด้วยวิธีนี เราไม่
จําเป็นต้องเรียนรู้คําสังของภาษา HTML โปรแกรมเหล่านี
จะทําการแปลงให้เราเองโดยอัตโนมัติ ได้แก่ Macromedia
Dreamweaver , Joomla เป็นต้น
รู้จักกับศัพท์เทคนิค
10
Chapter 1 : Introduction to Web Design
รู้จักกับศัพท์เทคนิค
ภาษา HTML (Hypertext Markup Language)
เป็นภาษาทีใช้ในการเขียนโปรแกรมภาษาหนึงของคอมพิวเตอร์
เพือตอบสนองในการแสดงผลบนจอภาพในระบบอินเตอร์เน็ต
มีลักษณะพิเศษทีควรทราบดังนี
1. สามารถใช้ได้กับโปรแกรมสร้างและแก้ไขไฟล์ข้อความ(Text Editor)
ได้แก่ Notepad, Word Processing ต่างๆ
2. HTML ทีถูกบันทึกใน Text Editor จะมีชนิดของไฟล์เป็น HTML
3. สามารถทํางานได้บนเว็บเบราเซอร์ทุกตัวทีสนับสนุนภาษา HTML
11
Chapter 1 : Introduction to Web Design
รู้จักกับศัพท์เทคนิค
ไฟล์ HTML ชือ "TestPage.HTML"
(เรียกว่า Input ก็ได้)เนือความในไฟล์นี คือ ภาษา HTML
12

4. Chapter 1 : Introduction to Web Design
รู้จักกับศัพท์เทคนิค
ผลลัพธ์จากการตีความภาษา HTML (เรียกว่า Output ก็ได้)
บนโปรแกรมเว็บเบราเซอร์ (ในภาพ คือ Internet Explorer)
13
Chapter 1 : Introduction to Web Design
คือ การเคลือนทีไปยังหัวข้อต่างๆทีต้องการโดยไม่มีลําดับ
(6) surfing the web (ท่องเว็บ)
รู้จักกับศัพท์เทคนิค
(7) URL (Uniform Resource Locator)
คือ ใช้ในการระบุถึงชือและทีอยู่ของเว็บเพจแต่ละหน้า ซึง
ประกอบด้วยข้อมูล 4 ส่วน ดังนี
http://www.markmyweb.com/fw/getStart/into.cfm
โปรโตคอล ชือโดเมน path ชือไฟล์
14
Chapter 1 : Introduction to Web Design
เว็บแต่ละหน้าคือไฟล์หนึงไฟล์ โดยแต่ละไฟล์จะเก็บอยู่ทีเครือง
คอมพิวเตอร์เรียกว่า Webserver ทีเชือมต่อกับเครือข่ายอินเตอร์เน็ต
ทีทําหน้าทีให้บริการส่งข้อมูลเว็บแต่ละหน้า
WebServer
Internet
WebBrowser
หลักการทํางานของเว็บเพจ (How the web work)
15
Chapter 1 : Introduction to Web Design
หลักการทํางานของเว็บเพจ (How the web work)
เมือคลิกทีลิงค์หรือพิมพ์ URL ใน เว็บเบราเซอร์ เบราเซอร์จะทําการติดต่อไปยัง
เว็บเซิร์ฟเวอร์ทีเว็บนันอยู่เพือขอข้อมูล ผ่านโปรโตคอล HTTP เว็บเซิร์ฟเวอร์
ทําการค้นหาไฟล์ตามคําขอกลับมาให้ เบราเซอร์ในการแสดงข้อมูลของเว็บเพจ
16

5. Chapter 1 : Introduction to Web Design
หลักการทํางานของเว็บเพจ (How the web work)
Webserver นอกจากจะทําหน้าทีเก็บเว็บเพจและไฟล์ต่าง ๆ แล้วยังทํา
หน้าทีควบคุมการทํางานทังหมดของเว็บไซต์ ควบคุมการสือสารระหว่าง
คอมพิวเตอร์ โดยเว็บเซิร์ฟเวอร์จะคอยส่งข้อมูลของเว็บเพจทีถูกเรียกไปยัง
เครืองของผู้ใช้
17
Chapter 1 : Introduction to Web Design
ข้อดี
การนําเสนอข้อมูล สามารถใช้สือได้หลายรูปแบบในการนําเสนอข้อมูลเช่น
จัดทําเป็นวารสาร ประกาศในหนังสือพิมพ์ นําเสนอทางวิทยุหรือโทรทัศน์
เปรียบเทียบเอกสารบนเว็บกับสืออืน
ราคาถูก
เปลียนแปลง ปรับปรุงข้อมูลได้ง่ายมาก
ใส่สีสัน ภาพเคลือนไหวได้ โดยไม่มีข้อจํากัด
ผู้ทีต้องการอ่าน สามารถเข้าถึงข้อมูลจากทีไหนและเวลาใดก็ได้
ข้อจํากัด
การเข้าถึงข้อมูลต้องใช้อุปกรณ์คอมฯ และเครือข่ายอินเตอร์เน็ต18
Chapter 1 : Introduction to Web Design
แบ่งได้เป็นกลุ่มใหญ่ ๆ 8 ประเภท
ประเภทของเว็บไซต์
เว็บท่า (Portal site)/เว็บวาไรตี(variety web) คือเว็บทีให้บริการต่างๆ
ไว้มากมาย มักประกอบด้วย เสิร์ชเอ็นจิน (search engine) รวมถึง
เรืองราวทีมีสาระและบันเทิงหลากหลาย ทังยังอาจมีลักษณะเป็น
แหล่งแลกเปลียนข้อมูลและความคิดเห็น เรียกว่า เว็บชุมชน
(community web)
เว็บข่าว (News site)
เว็บข้อมูล (Informational site)
เว็บธุรกิจหรือการตลาด(Business/Marketing site)
19
Chapter 1 : Introduction to Web Design
ประเภทของเว็บไซต์ (ต่อ)
เว็บการศึกษา(Education Site)
เว็บบันเทิง (Entertainment site)
เว็บองค์กรทีไม่แสวงหาผลกําไร(Nonprofit Organization site)
เว็บกลุ่มนีมีจุดประสงค์ทีต่างกัน เช่นเพือทําความดี สร้างสรรค์สังคม
พิทักษ์สิงแวดล้อม หรืออาจรวมตัวกันเพือดูแลผลประโยชน์ของสมาชิก
ในกลุ่ม
เว็บส่วนตัว(Personal site)
20

6. รู้จักกับการออกแบบเว็บไซต์
1. What is Web Design
ความสําคัญของการออกแบบเว็บไซต์2. ความสําคัญของการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ทีดี3. การออกแบบเว็บไซต์ทีดี
ข้อพึงระวังในการออกแบบเว็บไซต์4. ข้อพึงระวังในการออกแบบเว็บไซต์
21
What is Web Design
Chapter 1 : Introduction to Web Design
การออกแบบเว็บไซต์อย่างมีคุณภาพ เป็นการสร้าง
จุดเชือมต่อ (interface) ระหว่างคนและเทคโนโลยี
ทักษะการออกแบบเว็บ นอกเหนือจากการสร้างเว็บ
1. Information Design (ช่วยจัดเนือหาให้เข้าใจง่าย)
2. Interface Design (ช่วยให้เว็บใช้งานง่าย)
3. Graphic Design (ช่วยให้เว็บมีความสวยงาม)
22
ความสําคัญของการออกแบบเว็บไซต์
Chapter 1 : Introduction to Web Design
การออกแบบเว็บไซต์ทีดีมีส่วนสําคัญในการสร้างความ
ประทับใจให้กับผู้ใช้บริการและอยากกลับเข้ามาใช้อีกใน
อนาคตจึงเป็นการสร้างความได้เปรียบเหนือคู่แข่ง
หากมีการออกแบบน่าเชือถือน้อยกว่าคู่แข่งจะทําให้พลาด
โอกาสทางธุรกิจไปอย่างน่าเสียดาย
23
การออกแบบเว็บไซต์ทีดี
Chapter 1 : Introduction to Web Design
ออกแบบให้มีความเรียบง่าย (Simplicity)
ออกแบบให้มีความสมําเสมอ (Consistency)
ออกแบบให้ตรงกับเป้ าหมายและลักษณะของเว็บ
ออกแบบให้มีความเป็นเอกลักษณ์
(Identity)
24

7. การออกแบบเว็บไซต์ทีดี
Chapter 1 : Introduction to Web Design
ระบบเนวิเกชันใช้งานง่าย
(User-Friendly Navigation)
การใช้งานอย่างไม่จํากัด (Compatible)
เนือหามีประโยชน์ (Useful Content)
มีระบบการใช้งานทีถูกต้อง
(Functional Stability)
25
การออกแบบเว็บไซต์ทีดี
Chapter 1 : Introduction to Web Design
ความเร็วในการโหลดเว็บ
ความง่ายในการค้นหาข้อมูล
โครงสร้างของเว็บ
ตัวอักษร ฉากหลัง และสี
26
การออกแบบเว็บไซต์ทีดี
Chapter 1 : Introduction to Web Design
ส่วนประกอบทีขาดไม่ได้ของเว็บ
ก่อนทีเว็บจะ Publish
รูปภาพ
หลังจากเว็บ Publish
การส่งเว็บออกสู่สายตา
สาธารณชน
27
ข้อพึงระวังในการออกแบบเว็บไซต์
Chapter 1 : Introduction to Web Design
การใช้เทคโนโลยีขันสูงโดยไม่จําเป็น
การใช้กราฟิกผิด
การใช้เฟรม
การใช้ Font ต่าง ๆ
28

8. ข้อพึงระวังในการออกแบบเว็บไซต์
Chapter 1 : Introduction to Web Design
การใช้ภาพเคลือนไหว (Animation) ทีมากเกินไป
มีความยาวของหน้ามากเกินไป
Background ทีซับซ้อน
ต้องกลับไปหน้าแรกได้เสมอ
29
ข้อพึงระวังในการออกแบบเว็บ
Chapter 1 : Introduction to Web Design
การไม่บอกแหล่งทีมา
ใช้สีของลิงค์ไม่เหมาะสม
การแสดงความคิดเห็นมากเกินไป
เว็บเพจแสดงผลช้า
30
การใช้เฟรม
Chapter 1 : Introduction to Web Design
โดยส่วนใหญ่ มักออกแบบแบ่ง browser window ทีแยกกันว่า
เฟรม แม้จะเชือกันว่าเฟรมจะช่วยให้ผู้อ่านหาทิศทางได้ง่าย
แต่ก็อาจสร้างความสับสนได้ เมือผู้ใช้เลือกก็มักไม่แน่ใจว่าข้อมูล
อะไรจะปรากฏทีไหน
นอกจากนัน เฟรมจะอาศัยขนาดของจอทีเฉพาะเจาะจง
เมือผู้ใช้มีขนาดจอทีแตกต่างไปอาจจะทําให้เห็นข้อมูลทังหมด
ของเว็บนันไม่ครบถ้วนได้
31
การใช้เทคนิคขันสูงโดยไม่จําเป็น
Chapter 1 : Introduction to Web Design
ผู้ใช้ส่วนใหญ่ให้ความสนใจกับเนือหาและการใช้งานทีดี
มากกว่าและไม่พร้อมทีจะใช้เทคโนโลยีขันสูงมาก
เช่น ถ้าหากข้อมูลไม่จําเป็นต้องแสดงผลในรูปแบบ 3 มิติ ก็
ไม่ควรใช้ในเว็บของคุณ เพราะจะทําให้ผู้ใช้ยุ่งยากเนืองจาก
จะต้องโหลดหรือมีโปรแกรมทีสามารถอ่าน file 3 มิติได้
32

9. การใช้กราฟิกผิด
Chapter 1 : Introduction to Web Design
ผู้ออกแบบต้องละเว้นการใช้กราฟิกขนาดใหญ่หรือปริมาณ
มากเพือทีจะเลียงปัญหาคนออกจาก site เพราะรู้สึกเบือ
และควรจะลดขนาดไฟล์ภาพ เพือป้ องกันการเสียเวลา
ในการโหลดภาพเหล่านัน
33
การใช้ Font ต่างๆ
Chapter 1 : Introduction to Web Design
นักออกแบบทีดีจะใช้รูปแบบ font เพียงแค่ 1- 2 แบบ
เท่านัน ข้อความทีเล็กหรือใหญ่เกินไปจะอ่านยาก
ประเภทบทความควรตังเป็นแบบธรรมดา ในขณะที
หัวข้อควรมีขนาดโตขึนเล็กน้อย หากต้องการเน้นข้อความ
ไม่ควรขีดเส้นใต้ แต่ให้ใช้ตัวหนา เอียง หรือสีทีต่างออกไป
จะดีกว่า เพราะบทความทีใช้ link จะมีการขีดเส้นใต้เสมอ
34
Background ทีซับซ้อน
Chapter 1 : Introduction to Web Design
Background ทีซับซ้อนอาจสร้างงานทีสวยงาม แต่จะดู
ยุ่งเหยิงหาอยู่ข้างหลังบทความ เพราะจะทําให้ตาลาย
สิงทีควรระวังคือหากบทความสีอ่อนใช้กับ background
สีอ่อน จะอ่านยากเช่นเดียวกัน บทความสีเข้ม อยู่บน
Background สีเข้มก็อ่านยากเช่นกัน
35
การใช้ภาพเคลือนไหวมากเกินไป
Chapter 1 : Introduction to Web Design
ไม่ควรใส่องค์ประกอบเคลือนไหวตลอดเวลามากเกินกว่า
1-2 หน้า เพราะจะมีผลกระทบต่อทัศนวิสัย และดึงความ
สนใจของผู้ชมไปจากองค์ประกอบอืน
36

10. มีความยาวของหน้ามากเกินไป
Chapter 1 : Introduction to Web Design
โดยส่วนใหญ่มักจะบรรจุข้อมูลไว้ในหน้าแรกให้ผู้ใช้
มองเห็น ได้มากทีสุด แต่จะทําให้เกิดความสับสนกับข้อมูล
ทีมีจํานวนมากเกินไป และหน้าเว็บทีมีความยาวมากจะทํา
ให้เสียเวลาในการดาวน์โหลดมาก และอาจทําให้เกิดอาการ
ตาลายมองหาสิงทีต้องการหาไม่เจอ ก็เป็นได้
37
การแสดงความคิดเห็นมากเกินไป
Chapter 1 : Introduction to Web Design
ในหน้าเว็บไม่ควรใส่ข้อมูลส่วนตัวหรือ ข้อมูลส่วนตัว
เหล่านีไม่มีจุดรวม กระจัดกระจาย ปะปนกับข้อมูลที
ต้องการแสดง ผู้ออกแบบ ควรจะรวบรวมข้อมูลเหล่านีเป็น
หัวข้อหนึงแยกออกมา
38
ใช้สีของ Link ไม่เหมาะสม
Chapter 1 : Introduction to Web Design
โดยปกติสีของ link ทียังไม่ได้เข้าจะเป็นสีนําเงิน ส่วนลิงค์
ทีได้เข้าไปแล้วจะเป็นสีม่วง หากมีการสลับสีอาจทําให้ผู้ใช้
งงเกิดความไม่แน่ใจ ว่าส่วนไหนลิงค์ได้ หรือลิงค์ไหนทีได้
คลิกเข้าไปแล้ว
39
เว็บแสดงผลช้า
Chapter 1 : Introduction to Web Design
กราฟิกขนาดใหญ่จะมีผลทําให้เว็บใช้เวลาในการดาวน์
โหลดมาก ถ้าใช้เวลานานเกิน 15 วินาที อาจจะทําให้ผู้ใช้
ขาดความสนใจได้
40

11. ปัจจัยสําคัญทีผู้ใช้ทุกคนต้องการ
(1) เนือหาเป็นประโยชน์ ตรงกับทีผู้ใช้ต้องการ
(2) มีการปรับปรุงเพิมเติมเนือหา
และพัฒนาเว็บอยู่เสมอ
(3) ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว
(4) การใช้งานทีสะดวกและเข้าใจง่าย
Chapter 1 : Introduction to Web Design
41
ออกแบบให้ตรงกับเป้ าหมาย
Chapter 1 : Introduction to Web Design
เว็บแต่ละประเภทมีเป้ าหมายและลักษณะทีต่างกัน เช่น
เว็บทีเป็น Search Engine เป็นแหล่งรวมทีอยู่ของเว็บ
ต่างๆเว็บประเภทนีมีเป้ าหมายทีจะให้ข้อมูลแก่ผู้ใช้อย่าง
รวดเร็ว สิงสําคัญของเว็บประเภทนีคือ สามารถแสดง
หน้าเว็บอย่างรวดเร็ว และมีระบบสืบค้นข้อมูลทีมี
ประสิทธิภาพและให้ผลลัพธ์ทีรวดเร็ว
เช่น http://www.google.co.th/
42
ออกแบบให้ตรงกับเป้ าหมาย
Chapter 1 : Introduction to Web Design
เว็บเพือความบันเทิงเกียวกับศิลปะ ควรออกแบบให้มี
ความน่าตืนเต้น สนุกสนาน เพลิดเพลิน ดังนันความ
สําคัญในการออกแบบมากพอๆ กับเนือหาภายในเว็บ
สําหรับเว็บทีให้บริการข้อมูล ควรจัดข้อมูลอย่างเป็น
ระบบและมีรูปแบบทีเข้าใจง่าย ทําให้สามารถเข้าถึง
ข้อมูลทีต้องการได้อย่างรวดเร็ว
43
ออกแบบให้มีความเรียบง่าย
Chapter 1 : Introduction to Web Design
เว็บขององค์กรใหญ่ ๆ จะมีรูปแบบทีเรียบง่าย
ไม่ซับซ้อนและใช้งานได้อย่างสะดวก ไม่มีกราฟิกหรือ
ตัวอักษรทีเคลือนไหวตลอดเวลา ใช้ชนิดและสีของตัว
อักษรไม่มากจนเกินไป
หลักสําคัญของความเรียบง่าย คือการสือสารเนือหาถึง
ผู้ใช้ให้เลือกเฉพาะสิงทีจําเป็นเท่านัน
ตัวอย่าง http://www.apple.com
44

12. ออกแบบให้มีความสมําเสมอ
Chapter 1 : Introduction to Web Design
รูปแบบของหน้า, สไตล์กราฟิก, ระบบเนวิเกชัน และ
โทนสีทีใช้ควรมีความคล้ายคลึงกันตลอดทังเว็บ
เนืองจากผู้ใช้จะรู้สึกกับเว็บว่าเป็นเสมือนสถานทีจริง
หากลักษณะของแต่ละหน้าในเว็บไซต์เดียวกันแตกต่าง
กันมากผู้ใช้จะเกิดความสับสนและไม่แน่ใจว่ากําลังอยู่
ในเว็บเดิมหรือไม่
45
ออกแบบให้มีความเป็นเอกลักษณ์
Chapter 1 : Introduction to Web Design
การออกแบบต้องคํานึงถึงลักษณะองค์กรเนืองจาก
รูปแบบของเว็บสามารถสะท้อนถึงเอกลักษณ์และ
ลักษณะขององค์กรนันได้
เช่น เว็บของธนาคาร ไม่ควรจะฉูดฉาด มากเกินไป
http://www.manager.co.th/
http://sanook.com/
46
เนือหาทีมีประโยชน์
Chapter 1 : Introduction to Web Design
เนือหาเป็นสิงสําคัญทีสุดในเว็บ เราควรจัดเตรียม
เนือหาและข้อมูลทีผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์
ต้องปรับปรุงให้ทันต่อสถานการณ์อยู่เสมอ
เนือหาทีสําคัญทีสุด คือเนือหาทีสร้างขึนเอง เพราะ
จะทําให้ผู้ใช้เข้าเว็บเราเสมอ
47
ระบบเนวิเกชันทีใช้งานง่าย
Chapter 1 : Introduction to Web Design
ระบบเนวิเกชัน เป็นองค์ประกอบทีสําคัญของเว็บ
ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและสะดวก มีคําอธิบาย
ชัดเจน มีรูปแบบและลําดับของรายการทีสมําเสมอ
เช่น วางไว้ในตําแหน่งเดียวกันทุกหน้า
48

13. Chapter 1 : Introduction to Web Design
Navigation Bar
49
http://www.neodigital.co.th/
50
การใช้งานอย่างไม่จํากัด
Chapter 1 : Introduction to Web Design
ควรออกแบบให้ผู้ใช้ส่วนใหญ่เข้าถึงได้ มากทีสุด
สามารถแสดงผลได้ในทุกระบบปฏิบัติการและที
ความละเอียดหน้าจอต่างกันได้อย่างไม่มีปัญหา
เหล่านีเหมาะกับเว็บทีมีผู้ใช้บริการจํานวนมากหรือ
กลุ่มเป้ าหมายต่างกัน
51
ระบบการใช้งานทีถูกต้อง
Chapter 1 : Introduction to Web Design
ระบบการทํางานในเว็บต้องมีความแน่นอนและถูกต้อง
เช่น มีแบบฟอร์มสําหรับกรอกข้อมูล ต้องแน่ใจว่าฟอร์ม
นันสามารถใช้งานได้จริง
ลิงค์ต่างๆ ทีมีอยู่นันใช้งานได้ตังแต่แรก โดยเฉพาะลิงค์
ทีเชือมไปเว็บอืน อาจมีการเปลียนแปลงโดยเราไม่ทราบ
52

14. โครงสร้างของเว็บ
Chapter 1 : Introduction to Web Design
การจัดโครงสร้างมีจุดมุ่งหมาย เพือให้ผู้เข้าชม สามารถ
ค้นหาข้อมูลได้อย่างเป็นระบบ
การจัดกลุ่มของข้อมูลทีกระจัดกระจายให้รวมอยู่ใน
หัวข้อย่อย และให้อยู่ในหัวข้อหลัก มีจุดมุ่งหมายให้
จํานวนข้อหลักน้อยทีสุด
53
ความเร็วในการโหลดเว็บ
Chapter 1 : Introduction to Web Design
ผู้เข้าชมไม่ควรรอนานเกินไปในการรอให้โหลดเสร็จ
โดยเฉพาะหน้าแรก ผู้เข้าชมอาจเบือและเปลียนไปหา
ข้อมูลจากทีอืนได้
ปัจจัยทีกระทบต่อความเร็วคือขนาดและจํานวนของ
รูปภาพ ขนาดของรูปควรมีขนาดไม่เกิน 20-30K ต่อรูป
ประเภทของรูปเป็น GIF หรือ JPEG หากมีจํานวน
ตัวอักษรมากก็จะทําให้ความเร็วลดลงเช่นกัน
54
ความง่ายในค้นหาข้อมูล
Chapter 1 : Introduction to Web Design
ความอดทนของผู้เข้าชมในการค้นหาข้อมูลมีจํากัด
ทําอย่างไรให้ผู้เข้าชมสามารถค้นหาข้อมูลในเว็บได้ง่าย
ปัจจัยหลักคือโครงสร้างของเว็บและการจัดกลุ่มของ
ข้อมูล อาจใช้ frames หรือ ตาราง เพือช่วยในการจัดกลุ่ม
55
ตัวอักษร ฉากหลัง สี
Chapter 1 : Introduction to Web Design
ต้องกําหนดประเภทของตัวอักษร เป็นแบบสากลนิยม
โดยเฉพาะตัวอักษรภาษาไทยต้องระวังเป็นพิเศษ
หากเครืองผู้เข้าชม ไม่มีตัวอักษรตัวนันอาจทําให้ไม่
สามรถอ่านตัวอักษรได้
ฉากหลังไม่ควรเด่นเกินตัวอักษร เพราะทําให้อ่านยาก
หากเว็บมีรายละเอียดมาก จํานวนตัวอักษรในแต่ละ
บรรทัดช่วยให้อ่านง่ายขึน
56

15. รูปภาพ
Chapter 1 : Introduction to Web Design
ภาพแต่งหรือภาพถ่ายทีใช้สีมากๆ ควรใช้ไฟล์ประเภท
JEPG แต่ถ้าเป็นเพียงปุ่ มหรือป้ ายใช้สีไม่มากควรใช้ GIF
พร้อมทังพิจารณาเรืองขนาดของไฟล์ด้วย
ควรมีการคาดคะเนขนาดของรูปภาพทีจะใส่บนเว็บ
เพือจะได้ขนาด และอัตราส่วนทีต้องการ
57
ส่วนประกอบทีขาดไม่ได้ของเว็บ
Chapter 1 : Introduction to Web Design
ข้อมูล ตัวบริษัท ผู้จัดทํา ประวัติความเป็นมาจะช่วยเพิมความ
น่าเชือถือให้กับผู้เข้าชม ต่อบริษัท ผู้จัดทํา
ควรให้ข้อมูลถึงวิธีทีจะติดต่อบริษัทแก่ผู้เข้าชม ไม่ว่าจะเป็นทาง
จดหมาย โทรศัพท์ เฟ็กซ์ หรือ อีเมล์ เผือผู้เข้าชมมีปัญหา
หรือต้องการข้อมูลเพิมเติมสามารถติดต่อได้
หัวข้ออืน ๆ เช่น ข้อเสนอแนะ คําถามทีถูกถามบ่อยหรือ
เว็บทีน่าสนใจอืน เหล่านีจะช่วยลดเวลาในการหาข้อมูล
58
ก่อนทีเว็บจะ Publish
Chapter 1 : Introduction to Web Design
ก่อนทีจะ upload ไปยัง server ควรจะทดสอบกับเบราเซอร์ต่างๆ
และ version ทีใช้ควรทีจะไม่ใหม่จนเกินไปและไม่เก่าเกินไป
ความเร็วในการโหลด link ทังภายในและภายนอก ถูกต้องหรือไม่
รูปภาพ และข้อมูลต่าง ๆ ถูกต้องหรือไม่
ควรตรวจสอบ resolution ต่างๆ กันด้วย เช่น 960 x 600 และ
1024 x 768 pixels คุณภาพทีแตกต่างกันของจอภาพ
เช่น 256 สี , 16bit และ 24bit
59
คุณลักษณะของเว็บไซต์ทีดี
Chapter 1 : Introduction to Web Design
Web Usability คือ ประสิทธิภาพหรือคุณภาพของเว็บทีสร้าง
ความพึงพอใจให้กับผู้ใช้งาน
คุณลักษณะสําคัญ คือ เครืองมือบนหน้าเว็บต้องสามารถใช้งาน
ได้ง่าย ใช้งานได้จริง ให้ผลลัพธ์ตรงตามความต้องการ ภายใน
ระยะเวลารวดเร็ว และมีจํานวนข้อผิดพลาดน้อยทีสุด
60

16. 6C กับความสําเร็จของการทําเว็บ
Chapter 1 : Introduction to Web Design
เว็บทีประสบภาพสําเร็จในการทํา E-Marketing
จะประกอบด้วยสิงต่าง ๆ ต่อไปนี
(1) Content(ข้อมูล) เนือหามีความน่าเชือถือ
(2) Community (ชุมชน,สังคม)
มีการจัดทําเว็บบอร์ดให้โพสแสดงความคิดเห็น
(3) Commerce (การค้าขาย)
61
6C กับความสําเร็จของการทําเว็บ
Chapter 1 : Introduction to Web Design
(4) Customization (การปรับให้เหมาะสม)
มีการปรับให้เหมาะสมกับกลุ่มผู้ทีเข้ามาใช้
(5) Communication, Channel (การสือสารและช่องทาง)
มีช่องทางการติดต่อสือสารระหว่างผู้ใช้กับเว็บ
(6) Convenience (ความสะดวกสบาย)
เข้ามาทีเว็บแล้วมี Navigation Bar ทีชัดเจน
62
ทีมงานพัฒนาเว็บไซต์
Chapter 1 : Introduction to Web Design
Webmaster : ควรมีความรู้ในการออกแบบเว็บ ควบคุมการ
ออกแบบ เนือหา รายละเอียดทางเทคนิค
Information Architect : จัดระบบข้อมูล บริหารจัดการข้อมูล
ทดสอบประสิทธิภาพการใช้งาน
Designer : ออกแบบหน้าตาทังหมดของเว็บ
63
ทีมงานพัฒนาเว็บไซต์
Chapter 1 : Introduction to Web Design
System Administrator : ควบคุม web server รวมถึง H/W&S/W
Content Editor/Writer : จัดเตรียมเนือหา
Developer/Programmer : เขียนโปรแกรมต่าง ๆ เกียวข้องกับ DB
HTML and JavaScript Coder : สร้างเว็บโดยอาศัยเครืองมือ
64