ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

CHAPTER 2: WEB DESIGN 31 ช่วยสืบค้นข้อมูลเฉพาะภายในเว็บไซต์ท่ีกาหนด จะทาให้ได้ผลลัพธ์การสืบค้นท่ีถูกต้อง แม่นยามาก ยิง่ ขึ้น โดยสร้างเครื่องมือไดท้ เ่ี วบ็ ไซต์ https://www.google.com/cse ดงั ภาพที่ 2.11 Google Custom Search ภาพที่ 2.11 Google Custom Search ทม่ี า: (ราชวิทย์ ทิพยเ์ สนา, 2560) 1.5 ภาพสไลด์ ภาพสไลด์ (Image Slideshow) คือ ภาพท่ีถูกออกแบบให้มีความโดดเด่น เพื่อดึงดูด ความสนใจของผู้เข้าชมเว็บไซต์ ใช้ในการประชาสัมพันธ์เหตุการณ์สาคัญที่กาลังจะเกิดข้ึน หรือการ ประชาสัมพันธ์ข้อมูลที่มีความสาคัญเป็นพิเศษ เช่น ประชาสัมพันธ์กิจกรรมท่ีกาลังจะดาเนินการ ประชาสมั พนั ธ์การรบั สมัครงาน โฆษณาสนิ ค้าลดราคาและโปรโมช่นั เพื่อดงึ ดูดลกู คา้ เป็นต้น โดยภาพ สไลด์จะสามารถเลื่อนหรือเคล่ือนไหวได้ ซ่ึงผู้ออกแบบจะต้องมีการติดตั้งสคริปต์เสริม เช่น สไตล์ชีต หรือจาวาสคริปต์ เป็นต้น เพื่อให้ภาพเลื่อนหรือเคลื่อนไหวในรูปแบบท่ีต้องการ และนิยมติดตั้งภาพ สไลด์ในหน้าแรกของเว็บไซต์ ท้ังนี้ สามารถดาวน์โหลดสคริปต์ได้จากเว็บไซต์ต่าง ๆ และนามาติดต้ัง ในเวบ็ ไซตข์ องตนเองได้ ดังภาพที่ 2.12 และภาพท่ี 2.13 Image Slideshow ภาพท่ี 2.12 การออกแบบภาพสไลด์ ทม่ี า: (ราชวิทย์ ทิพยเ์ สนา, 2560)

32 CHAPTER 2: WEB DESIGN Next Previous ภาพที่ 2.13 การออกแบบภาพสไลด์ ทีม่ า: (Fylan, 2018: 1) 2. สว่ นเน้ือหาของเว็บเพจ ส่วนเน้ือหาของเว็บเพจ (Page Body) เป็นส่วนประกอบท่ีอยู่ในตาแหน่งกึ่งกลางระหว่าง ส่วนบนกับส่วนลา่ งของเว็บเพจ เน้นการนาเสนอเนื้อหาในรูปแบบขอ้ ความ ตาราง ภาพนิ่ง หรือวิดีโอ ซงึ่ เปน็ เนื้อหาหลกั ของหน้าเวบ็ เพจนนั้ ๆ โดยในสว่ นของเนอื้ หาจะตอ้ งแสดงหัวขอ้ หลักให้ชดั เจน และ รายละเอียดในเว็บเพจจะต้องสอดคล้องกับหัวข้อหลักท่ีกาหนด ควรแบ่งเนื้อหาออกเป็นย่อหน้า (Paragraph) หรือคอลัมน์ (Column) เพ่ือความสะดวกในการอ่านของผู้เข้าชมเว็บไซต์ ไม่ควรมี เนื้อหามากจนเกินไป ซึ่งอาจทาให้ผู้เข้าชมเว็บไซต์เกิดความรู้สึกเบื่อหน่าย เมื่อต้องเพ่งอ่านข้อความ เป็นเวลานาน Page Body ภาพที่ 2.14 ส่วนเน้ือหาของเว็บเพจ ทีม่ า: (ราชวิทย์ ทพิ ย์เสนา, 2560)

CHAPTER 2: WEB DESIGN 33 นอกจากนี้ ผู้ออกแบบเว็บไซต์ควรจัดวางองค์ประกอบต่าง ๆ ในส่วนของเนื้อหาให้ เหมาะสม ท้ังข้อความและภาพประกอบ ควรเลือกใช้แบบอักษรท่ีนิยมใช้งานกับเว็บเพจ เพ่ือให้การ แสดงผลมีประสิทธิภาพ กาหนดขนาดตัวอักษรให้เหมาะสม ไม่ใหญ่หรือเล็กจนเกินไป และเลือกใช้สี ข้อความให้เป็นสีตรงข้ามกับสีพื้นหลัง เช่น ข้อความสีดา พ้ืนหลังเว็บเพจสีขาว เป็นต้น จะให้ให้ผู้เข้า ชมเว็บไซต์อา่ นขอ้ ความได้งา่ ยมากย่ิงขน้ึ 3. ส่วนขา้ งของเวบ็ เพจ ส่วนข้างของเว็บเพจ (Page Sidebar) เป็นส่วนประกอบท่ีอยู่ในตาแหน่งทางด้านซ้ายหรือ ทางด้านขวาของส่วนเนื้อหา โดยตาแหนง่ ทางด้านซา้ ยนิยมออกแบบให้เป็นลิงก์สาหรับเช่อื มโยงไปยงั เว็บเพจอ่ืน ๆ ท่ีเป็นเว็บเพจย่อยของแถบนาทางหลัก และตาแหน่งทางด้านขวานิยมใช้เป็นตาแหน่ง ของช่องค้นหา ป้ายโฆษณา สัญลักษณ์ส่ือสังคมออนไลน์ หรือลิงก์สาหรับเชื่อมโยงไปยังเว็บไซต์ท่ี เกยี่ วข้อง ดงั ภาพที่ 2.15 Page Sidebar ภาพท่ี 2.15 ส่วนข้างของเว็บเพจ ทมี่ า: (Balkhi, 2017: 1)

34 CHAPTER 2: WEB DESIGN 4. สว่ นล่างของเว็บเพจ ส่วนล้างของเว็บเพจ (Page Footer) เป็นส่วนประกอบท่ีอยู่ในตาแหนง่ ลา่ งสุดของหน้าเว็บ เพจ นิยมใช้เป็นพื้นท่ีสาหรับจัดวางลิงก์ เพ่ือเช่ือมโยงไปยังเว็บไซต์อื่นที่เกี่ยวข้อง มีการจัดหมวดหมู่ ของลิงก์ที่ชัดเจน และนิยมแบ่งหมวดหมู่ของลิงก์ในรูปแบบคอลัมน์ นอกจากน้ี ผู้ออกแบบเว็บไซต์ อาจเพ่ิมข้อมูลที่อยู่ อีเมล เบอร์โทรศัพท์ เง่ือนไขการใช้งานข้อมูลในเว็บไซต์ หรือข้อความและ สญั ลักษณส์ งวนลิขสทิ ธ์ิ © (Copyright) ไวใ้ นตาแหนง่ ลา่ งสดุ ดงั ภาพท่ี 2.16 Page Footer ภาพท่ี 2.16 ส่วนล่างของเวบ็ เพจ ทมี่ า: (Lu, 2018: 1) การกาหนดขนาดเวบ็ เพจ การพิจารณาถึงขนาดหน้าจอของอุปกรณ์ท่ีใชส้ าหรับแสดงผลเว็บเพจ ซ่ึงปัจจุบันมีอุปกรณ์ที่ สามารถเปิดใช้งานเว็บได้หลากหลายประเภท อุปกรณ์จึงมีขนาดหน้าจอที่แตกต่างกัน และหน้าจอ ของโปรแกรมแสดงผลเว็บท่ีสามารถปรับเปลี่ยนขนาดหรือย่อ-ขยายหน้าจอได้ ผู้ออกแบบเว็บไซต์จึง ควรให้ความสาคัญกับการออกแบบเว็บเพจเพ่ือให้เหมาะสมกับการใช้งานมากที่สุด โดยมีหลักการ ออกแบบขนาดของเว็บเพจ ดงั น้ี (กรรณกิ าร์ สวรรคโ์ พธพิ นั ธิ,์ 2550: 292-293) 1. เว็บเพจท่ีมขี นาดคงท่ี (Fixed Design) การออกแบบเว็บเพจท่ีเป็นการออกแบบให้องค์ประกอบทุกส่วนมีขนาดและตาแหน่งคงที่ เม่ือเปิดเว็บเพจกับหน้าจอที่มีขนาดแตกต่างกัน เน้ือหาในเว็บเพจจะอยู่ในตาแหน่งเดิม ไม่มีการ เปลี่ยนแปลง โดยการออกแบบเว็บเพจจะกาหนดหน่วยของพื้นท่ีเป็น พิกเซล (Pixcel) ข้อดีของการ ออกแบบเว็บเพจให้มีขนาดคงท่ี คือ ผู้ออกแบบสามารถควบคุมการทางานได้ง่าย เน่ืองจากทราบ ตาแหน่งและขนาดความกว้างหรือพ้ืนท่ีของเน้ือหาแต่ละส่วนท่ีแน่นอน แต่การออกแบบในลักษณะนี้ เว็บเพจจะไม่เหมาะกับการแสดงผลในหน้าจอที่มีขนาดแตกต่างกันออกไป หรือการย่อหน้าต่าง

CHAPTER 2: WEB DESIGN 35 โปรแกรมแสดงผลเวบ็ จะสง่ ผลใหเ้ กดิ แถบเล่ือนแนวนอน (Horizontal Scrolling) ซ่งึ จะส่งผลให้ผู้ใช้ เกิดความไมส่ ะดวกในการใชง้ าน 2. เว็บเพจท่ีมีขนาดยดื หย่นุ (Flexible Design) การออกแบบเว็บเพจที่เป็นการออกแบบให้องค์ประกอบทุกส่วนมีขนาดยืดหยุ่น สามารถ ปรับเปลี่ยนขนาดไปตามขนาดของหน้าจออุปกรณ์หรือหน้าจอโปรแกรมแสดงผลเว็บ โดยการ ออกแบบเว็บเพจจะกาหนดหน่วยของพนื้ ทเ่ี ปน็ เปอร์เซน็ ต์ (Percent) เมอ่ื ขนาดของหนา้ จอเปลี่ยนไป โปรแกรมแสดงผลเว็บจะประมวลผลและเทียบอัตราส่วนของพ้ืนที่ และจะแสดงผลให้มีขนาดที่พอดี กับหน้าจอ ข้อดีของการออกแบบเว็บเพจให้มีขนาดยืดหยุ่น คือ ผู้ใช้สามารถเห็นองค์ประกอบต่าง ๆ ในหน้าเว็บเพจได้อย่างครบถ้วน โดยไม่ต้องเลื่อนแถบใด ๆ แต่เนื่องจากขนาดพื้นท่ีไม่แน่นอน การ ออกแบบในลักษณะน้ี จึงส่งผลต่อการกาหนดตาแหน่งเน้ือหา ซ่ึงเนื้อหาอาจถูกบีบให้เล็กลงเม่ือ แสดงผลกบั หนา้ จอขนาดเล็ก อาจทาให้ไม่สามารถมองเหน็ เนือ้ หาได้อย่างสะดวก การออกแบบระบบนาทาง การออกแบบระบบนาทาง (Navigation Design) คอื การออกแบบระบบนาทางหรอื เมนูท่ีใช้ สาหรบั เชอ่ื มโยงเว็บเพจ รวมไปถงึ เชือ่ มโยงข้อมลู ในเวบ็ เพจ ใหส้ ามารถเข้าถงึ ข้อมลู ท่ตี ้องการได้อย่าง สะดวก รวดเรว็ ซ่งึ ระบบนาทางมีความสาคญั ต่อผู้เข้าใช้งานเวบ็ ไซต์เป็นอย่างยงิ่ เนื่องจากการใช้งาน เว็บไซต์ต้องอาศัยระบบนาทางเพ่ือให้สามารถเข้าถึงข้อมูลท่ีต้องการได้ อีกท้ังยังเป็นสิ่งบ่งบอกถึง ตาแหนง่ ของเว็บเพจทีก่ าลังใช้งานอยู่ ทาให้ผ้ใู ช้ทราบว่ากาลงั อยู่ในสว่ นไหนของเว็บไซต์ และสามารถ กลบั ไปยงั จุดเรม่ิ ต้นได้อย่างรวดเร็ว 1. คุณสมบัตขิ องระบบนาทางที่ดี การออกแบบระบบนาทางที่ดี ผอู้ อกแบบเวบ็ ไซต์ควรคานึงถึงองค์ประกอบต่าง ๆ ไม่ว่าจะ เป็น ขนาดของเมนหู รือลิงก์ จานวนเมนู ตาแหน่งการจัดวาง รูปแบบข้อความหรือรปู แบบกราฟิกที่ใช้ และส่วนอ่ืน ๆ ซ่ึงจะช่วยให้การเข้าถึงข้อมูลในเว็บไซต์มีความสะดวก ผู้ใช้สามารถไปยังเว็บเพจหรือ ตาแหนง่ ท่ตี ้องการได้อยา่ งรวดเร็ว และไดร้ ับข้อมลู ตรงตามความต้องการ โดยมตี วั อยา่ งคณุ สมบัติของ ระบบนาทางท่ีดี ดงั นี้ (Enjoyday, 2552: 1) 1.1 ระบบนาทางต้องจัดอยู่ในตาแหน่งที่สามารถมองเห็นได้ชัดเจนและเข้าถึงได้ง่าย เช่น สว่ นบน ด้านซา้ ยหรอื ดา้ นขวาของเว็บเพจ เป็นต้น 1.2 ระบบนาทางต้องสื่อถึงเว็บเพจที่จะเชื่อมโยงไป เข้าใจง่าย มีข้อความกากับชัดเจน ผู้ใช้งานสามารถใชไ้ ดท้ นั ทีโดยไมต่ ้องทดลองคลิก

36 CHAPTER 2: WEB DESIGN 1.3 ระบบนาทางควรมีความสม่าเสมอ จัดวางอยู่ในตาแหน่งเดียวกันของทุกเว็บเพจ และ ใช้รูปแบบข้อความ สี หรือกราฟิก ในรูปแบบเดียวกันท้ังหมด เพ่ือให้ผู้ใช้รู้สึกคุ้นเคยกับระบบนาทาง ในเวบ็ ไซต์ 1.4 เว็บเพจจะต้องแสดงข้อความหรือสัญลักษณ์เพ่ือให้ผู้ใช้ทราบว่า กาลังเปิดใช้งานเว็บ เพจในส่วนไหนของเว็บไซต์ 1.5 ระบบนาทางต้องมีการตอบสนองกับผู้ใช้งาน เช่น เปล่ียนสีข้อความหรือสีพ้ืนหลังเมื่อ วางเมาส์เหนอื เมนู และเปล่ยี นสีขอ้ ความเมื่อคลิกเมาส์ท่เี มนู เป็นต้น 1.6 จานวนรายการของระบบนาทางไม่ควรมีมากจนเกินไป ซ่ึงอาจส่งผลให้ผู้ใช้เกิด ความรู้สึกเบื่อหน่ายกับปริมาณของเว็บเพจจานวนมาก ทั้งน้ี หากมีเว็บเพจจานวนมาก และ จาเป็นต้องสร้างระบบนาทางเช่ือมโยงไปยังทุกเว็บเพจ ควรจัดวางระบบนาทางมากกว่า 1 ตาแหน่ง เช่น ด้านบนกบั ด้านล่าง และดา้ นซา้ ย หรือด้านขวา เปน็ ตน้ 1.7 ระบบนาทางควรมีรูปแบบที่หลากหลายให้เลือกใช้ เช่น เมนูกราฟฟิก เมนูข้อความ เมนูแบบเลือ่ นลงหรอื ขยายด้านขา้ ง ชอ่ งค้นหาข้อมูล และเวบ็ เพจแสดงแผนผังเว็บไซต์ เป็นต้น 1.8 มีจุดเช่ือมโยงกลับไปยังหน้าแรกของเว็บไซต์ แสดงอยู่ในทุกเว็บเพจ และมองเห็นได้ ชัดเจน อาจกาหนดใหต้ ราสัญลักษณ์ในสว่ นหัวเป็นลิงก์กลับไปยงั หน้าแรก เพ่ือให้ผู้ใช้สามารถกลบั ไป ยังจุดเริ่มตน้ หรอื หน้าแรกได้อยา่ งรวดเร็ว 2. รปู แบบของระบบนาทาง รูปแบบของระบบนาทางท่ีนิยมใช้งานกับเว็บไซต์ในปัจจุบัน มีรูปแบบการใช้งานท่ี หลากหลาย เนอ่ื งจากเว็บไซตจ์ ะต้องตอบสนองการทางานกับอุปกรณ์ประเภทตา่ ง ๆ ท่ีนอกเหนอื จาก เคร่ืองคอมพิวเตอร์ต้ังโต๊ะ ได้อย่างมีประสิทธิภาพ หากเป็นระบบนาทางที่เน้นการปฏิสัมพันธ์กับผู้ใช้ มันจะพัฒนาจากภาษาสคริปต์ คือ CSS (Cascading Style Sheets) และ JS (JavaScript) ดังน้ัน การออกแบบระบบนาทาง สามารถเลือกใช้รูปแบบท่ีผสมผสานกัน เพ่ือให้เกิดความเหมาะสมกับการ ใช้งาน โดยรูปแบบของระบบนาทางที่มีแนวโน้ม (Trends) เป็นที่นิยมใช้งานในยุคปัจจุบัน มีดังนี้ (Rocheleau, 2018: 1)

CHAPTER 2: WEB DESIGN 37 2.1 Sticky/Affix Navbar แถบนาทางหรือเมนูลักษณะคงที่ ออกแบบมาเพ่ือช่วยให้ผู้ใช้ สามารถเช่ือมโยงไปยังตาแหน่งต่าง ๆ ในเว็บไซต์ได้อย่างสะดวก ทางานโดยใช้สไตล์ชีต (Style Sheet) รว่ มกบั จาวาสคริปต์ (JavaScript) ซง่ึ มผี ูพ้ ฒั นาเปิดใหด้ าวนโ์ หลดสคริปต์ไดโ้ ดยไม่มีค่าใช้จ่าย ใด ๆ เช่น www.w3schools.com เป็นต้น สามารถค้นหาและดาวน์โหลดมาเพ่ือทดลองติดต้ังใน เว็บไซต์ และปรับแต่งให้เหมาะสมกับเว็บไซต์ได้ โดยระบบนาทางจะคงที่ในตาแหน่งท่ีกาหนดเสมอ เมื่อเลื่อนหน้าจอเว็บเพจลงล่าง ระบบนาทางจะติดอยู่ในขอบด้านบนของหน้าจอ ทาให้ผู้ใช้สามารถ คลิกเมนูเพ่ือไปยังตาแหน่งท่ีต้องการได้ตลอดเวลาที่ท่องไปบนเว็บไซต์ ตัวอย่างเว็บไซต์ท่ีใช้ระบบนา ทาง Sticky/Affix Navbar เชน่ www.powderlife.com ดงั ภาพที่ 2.17 แถบนาทาง เม่ือเล่ือนหนา้ จอลงลา่ ง แถบนาทางจะคงท่ี ภาพที่ 2.17 แถบนาทาง Sticky/Affix Navbar ท่มี า: (Powerlife, 2018: 1)

38 CHAPTER 2: WEB DESIGN 2.2 Mega Menu แถบนาทางหรือเมนูแบบคงท่ี ซ่ึงมีรูปแบบคล้ายกับ Sticky/Affix Navbar คือ เม่ือเลื่อนหน้าจอเว็บเพจลงล่าง ระบบนาทางจะติดอยู่ในขอบด้านบนของหน้าจอ ส่วน การทางานเพ่ิมเติมคือ ในเมนูหลักจะสามารถแสดงเมนูย่อยเม่ือคลิกเมาสห์ รือวางเมาสเ์ หนือเมนู โดย เมนูย่อยจะแสดงรายละเอียดที่สาคัญเพิ่มเติม เช่น ภาพ คาโปรยสาหรับอ่านเนื้อหาโดยย่อ เป็นต้น ตวั อยา่ งเว็บไซต์ท่ใี ช้ระบบนาทาง Mega Menu เช่น www.vandelaydesign.com ดงั ภาพที่ 2.18 แถบนาทาง เมือ่ คลิกหรือวางเมาส์เหนือเมนู จะแสดงเมนยู ่อยแบบขยายออก ภาพที่ 2.18 แถบนาทาง Mega Menu ที่มา (Snell, 2016: 1)

CHAPTER 2: WEB DESIGN 39 2.3 Universal Navigation ระบบนาทางที่ใช้งานท่ัวไป เน้นรูปแบบที่เรียบง่าย ไม่มีเมนู ย่อย เมอ่ื เล่อื นหน้าจอเว็บเพจลงล่าง แถบนาทางจะถูกเล่ือนตามไปด้วย นิยมใช้การเปลยี่ นสีข้อความ เม่ือคลิกเมาส์ท่ีเมนู หรือเน้นแถบสีเม่ือเปิดเว็บเพจของเมนูน้ันอยู่ เพื่อความสะดวกในการใช้งาน จึง เหมาะสาหรับเว็บไซต์ที่มีเน้ือหาไม่ซับซ้อน ซึ่งจะส่งผลให้เว็บเพจทางานได้รวดเร็วย่ิงข้ึน ตัวอย่าง เว็บไซตท์ ่ีใช้ระบบนาทาง Universal Navigation เช่น www.nngroup.com ดงั ภาพท่ี 2.19 แถบนาทาง เมือ่ เล่อื นหนา้ จอลงล่าง แถบนาทางจะหายไป ภาพท่ี 2.19 แถบนาทาง Universal Navigation ทีม่ า: (Sherwin, 2016: 1)

40 CHAPTER 2: WEB DESIGN 2.4 Vertical Sliding Navigation เป็นแถบนาทางหรือเมนูเลื่อนเข้า-ออก ในแนวตั้ง ออกแบบมาเพื่อตอบสนองการใช้งานกับอุปกรณ์เคลื่อนที่เป็นหลัก เช่น โทรศัพท์สมาร์ทโฟน หรือ แท็บแล็ต เป็นต้น สาหรับการใช้งานเว็บไซต์ในรูปแบบเวบ็ แอปพลิเคชัน (Web Application) เพื่อให้ สามารถมองเห็นส่วนของเนื้อหาได้มากย่ิงข้ึน โดยระบบนาทางจะถูกซ่อนให้อยู่ชิดขอบหน้าจอ ทางด้านซ้ายหรือด้านขวา และจะแสดงเมนูเมื่อคลิกท่ีสัญลักษณ์หรือปุ่มท่ีกาหนดไว้สาหรับแสดงเมนู ตัวอย่างเว็บไซต์ท่ีใช้ระบบนาทาง Vertical Sliding Navigation เช่น www.chula.ac.th ดังภาพท่ี 2.20 แถบนาทางแนวตั้ง แสดงแถบนาทาง ภาพที่ 2.20 แถบนาทาง Vertical Sliding Navigation ท่ีมา: (จุฬาลงกรณ์มหาวิทยาลยั , ม.ป.ป.: 1)

CHAPTER 2: WEB DESIGN 41 2.5 Globally Hidden Menu หรือ Hamburger Menu เปน็ ระบบนาทางหรอื เมนูท่ีถูก ซ่อนไว้ภายใต้สัญลักษณ์หรือปุ่ม ในตาแหน่งมุมใดมุมหน่ึงของเว็บเพจ ซึ่งอาจจะทาให้ผู้ใช้งานเข้าถึง ระบบนาทางได้ช้า แต่ข้อดีคือ เว็บเพจจะมีพ้ืนท่ีสาหรับเน้ือหาเพ่ิมมากขึ้น และเป็นการซ่อนระบบนา ทางซ่ึงอาจรบกวนสายตาของผู้ใช้ ในกรณีที่มีเมนูจานวนมาก จึงเหมาะกับการใช้งานเว็บไซต์ใน รูปแบบเว็บแอปพลิเคชันผ่านอุปกรณ์สมาร์ทโฟนที่มีหน้าจอขนาดเล็ก เน่ืองจากโดยส่วนใหญ่ผู้ใช้ สมาร์ทโฟนจะมีความคุ้นเคยกับปุ่ม Hamburger Menu ซึ่งเป็นสัญลักษณ์เส้นขีดแนวนอน 3 เส้น ตัวอย่างเว็บไซต์ท่ีใช้ระบบนาทาง Globally Hidden Menu หรือ Hamburger Menu เช่น www.computerworld.com ดงั ภาพท่ี 2.21 คลิกเพื่อแสดงแถบนาทาง แสดงแถบนาทาง ภาพท่ี 2.21 แถบนาทาง Globally Hidden Menu หรอื Hamburger Menu ทีม่ า: (Computerworld, 2018: 1)

42 CHAPTER 2: WEB DESIGN 2.6 Responsive Subnav Menu เป็นแถบนาทางหรือเมนูที่สามารถตอบสนองการใช้ งานกบั อุปกรณ์ทีม่ ขี นาดหน้าจอแตกตา่ งกนั หากใช้งานกับหนา้ จอขนาดปกติหรือหน้าจอคอมพิวเตอร์ ทั่วไปท่เี ปดิ หน้าต่างโปรแกรมแสดงผลเว็บเต็มหน้าจอ ผู้ใช้จะเห็นแถบนาทางท่ีแสดงเมนูหลักและเมนู ย่อยให้เห็นทุกเมนู และหากใช้งานกับหน้าจอท่ีมีขนาดเล็กหรือหน้าจอโทรศัพท์ ผู้ใช้จะเห็นแถบนา ทางในลักษณะของกลุ่มเมนู ซ่ึงเมนูย่อยจะถูกซ่อนให้อยู่ภายใต้เมนูหลัก จึงนิยมใช้เป็นระบบนาทาง ของเว็บไซต์ที่เน้นกลุ่มเป้าหมายการใช้งานผ่านโทรศัพท์มือถือสมาร์ทโฟนหรือแท็บแล็ต ตัวอย่าง เวบ็ ไซต์ทใี่ ชร้ ะบบนาทาง Responsive Subnav Menu เช่น www.politico.com ดงั ภาพท่ี 2.22 คลกิ เพอื่ แสดงแถบนาทาง เมอ่ื ใช้งานกบั หน้าจอปกติ เม่ือใช้งานกับหนา้ จอโทรศัพท์ ภาพที่ 2.22 แถบนาทาง Responsive Subnav Menu ทมี่ า: (Politico, 2018: 1)

CHAPTER 2: WEB DESIGN 43 2.7 Top Story Carousels เป็นระบบนาทางท่ีแสดงบทความยอดนิยมหรือบทความ ล่าสุดไว้บนแถบนาทางในตาแหน่งด้านบนของเว็บเพจ ซ่ึงเหมาะกับเว็บบล็อกหรือเว็บข่าวท่ีมีเนื้อหา ปรมิ าณมาก หรือในแตล่ ะวนั มกี ารนาเสนอบทความจานวนหลายบทความ การเพิ่มบทความยอดนิยม ในตาแหน่งด้านบนจะเป็นการเพิ่มโอกาสให้ผู้ใช้สามารถอ่านบทความที่ได้รับความนิยมหรือบทความ ลา่ สดุ ได้อยา่ งรวดเร็ว และเม่อื เลอ่ื นหนา้ จอเว็บเพจลงล่าง แถบนาทางกจ็ ะถูกซอ่ นไว้ เพ่ือไมใ่ ห้รบกวน สายตาของผู้ใช้ขณะอ่านบทความ ตัวอย่างเว็บไซต์ที่ใช้ระบบนาทาง Top Story Carousels เช่น www.vogue.co.uk ดงั ภาพที่ 2.23 แถบนาทาง เมื่อเลือ่ นหนา้ จอลงล่าง แถบนาทางจะถกู ซ่อน ภาพท่ี 2.23 แถบนาทาง Top Story Carousels ทมี่ า: (Berrington, 2018: 1)

44 CHAPTER 2: WEB DESIGN 2.8 Table of Contents ระบบนาทางในรูปแบบของสารบัญ เหมาะสาหรับการนาเสนอ เนื้อหาหรอื บทความให้อยภู่ ายใต้เวบ็ เพจเพยี งหน้าเดยี ว โดยจะใช้สารบัญเป็นระบบนาทางไปยังหัวข้อ ต่าง ๆ ของบทความ ทาใหผ้ ใู้ ช้ไม่ต้องเสียเวลาเปิดหน้าเว็บเพจใหม่ สามารถอ่านบทความตามหัวข้อท่ี สนใจ โดยคลิกเลือกที่สารบัญได้ทันที ตัวอย่างเว็บเพจท่ีใช้ระบบนาทาง Table of Contents เช่น www.ahrefs.com/blog/seo-tips ดงั ภาพท่ี 2.24 แถบนาทาง ภาพท่ี 2.24 แถบนาทาง Table of Contents ทมี่ า: (Hardwick, 2017: 1)

CHAPTER 2: WEB DESIGN 45 2.9 All-Caps Corner Links เป็นระบบนาทางหรือเมนทู ่ีใชร้ ปู แบบคล้ายกนั ทัง้ หมด เชน่ ใช้อักษรตัวพิมพ์ใหญ่ท้ังหมด ใช้อักษรตัวพิมพ์ใหญ่เป็นตัวอักษรแรกทั้งหมด ใช้อักษรขนาดเล็ก ทั้งหมด ใช้แบบอักษรเดียวกันท้ังหมด เป็นต้น ซ่ึงจะทาให้ผู้ใช้รู้สึกถึงความสม่าเสมอ เรียบง่าย และ สะอาดตา ตัวอย่างเว็บเพจท่ีใช้ระบบนาทาง All-Caps Corner Links เช่น www.triaetc.com ดัง ภาพท่ี 2.25 ใชอ้ กั ษรตัวพิมพ์ใหญท่ งั้ หมด ภาพท่ี 2.25 แถบนาทาง All-Caps Corner Links ทม่ี า: (Triaetc, 2018: 1)

46 CHAPTER 2: WEB DESIGN 2.10 Single Page dot Navigation เป็นระบบนาทางหรือเมนูแบบจุด สาหรับเว็บเพจ หนา้ เดียว โดยใชจ้ ุดเปน็ สญั ลษั ณ์สาหรับเชื่อมโยงไปยังสว่ นตา่ ง ๆ ในเว็บเพจ อาจวางตาแหนง่ ของจุด ไว้ทางด้านซ้ายหรือขวาของหน้าจอ เพื่อแสดงตาแหน่งเน้ือหาในแนวตั้ง หรือวางตาแหน่งของจุดไว้ ก่ึงกลางหน้าจอ เพ่ือแสดงเน้ือหาในแนวนอน และจะเน้นจุด (Highlighted) ในส่วนท่ีกาลังแสดง เนื้อหาอยู่ เพื่อให้ผู้ใช้ทราบว่ากาลังอยู่ในตาแหน่งใดของเน้ือหา ตัวอย่างเว็บเพจท่ีใช้ระบบนาทาง Single Page dot Navigation เช่น www.gumtreejobs.sg ดงั ภาพที่ 2.26 ใชจ้ ุดเปน็ แถบนาทาง เน้นจดุ ในตาแหน่งปัจจบุ ัน ภาพท่ี 2.26 แถบนาทาง Single Page dot Navigation ท่มี า: (Gumtree, 2016: 1)

CHAPTER 2: WEB DESIGN 47 การออกแบบกราฟิกสาหรับเวบ็ ไซต์ การออกแบบกราฟิก (Graphic Design) เป็นการนาหลักการออกแบบทางศิลปะเข้ามา ประยุกต์ใช้กับการออกแบบเว็บเพจ ซึ่งกราฟิกถือเป็นเป็นองค์ประกอบสาคัญของเว็บเพจ ท่ีจะช่วย ถ่ายทอดหรือนาเสนอเนือ้ หาต่าง ๆ ด้วยภาพหรือข้อความ ส่งผลให้เวบ็ ไซต์มีความนา่ สนใจมากยง่ิ ขนึ้ นอกจากน้ี การใช้กราฟิกที่ดจี ะช่วยดึงดดู ความสนใจของผู้ใช้ได้มากกว่าเวบ็ ไซต์ท่ีขาดกราฟิกหรือขาด สีสัน ดังนั้น ในการออกแบบเว็บไซต์จึงควรให้ความสาคัญกับการออกแบบกราฟิก และควรเลือก กราฟกิ ใหเ้ หมาะสม เพอื่ ตอบสนองความต้องการของกลมุ่ เป้าหมายในการใชง้ านเวบ็ ไซต์ 1. ภาพกราฟกิ ภาพกราฟกิ ทีแ่ สดงผลด้วยระบบคอมพวิ เตอร์ โดยสว่ นใหญ่เกิดจากการสร้างดว้ ยโปรแกรม คอมพิวเตอร์หรืออาจได้จากเครื่องบันทึกภาพแล้วนาไฟล์ภาพเข้าสู่คอมพิวเตอร์ โดยภาพกราฟิกใน ระบบคอมพวิ เตอร์แบง่ ออกเปน็ 2 ประเภท ดงั นี้ (อนนั วาโซะ, 2558: 27-30) 1.1 ภาพบิตแมพ (Bitmap) หรือภาพเรสเตอร์ (Raster) คือ ภาพท่ีเกิดจากการรวมกัน ของจุดหรือเม็ดสที ีเ่ รียกว่าพิกเซล (Pixel) เปน็ หนว่ ยทเ่ี ล็กท่ีสุดของภาพ ภายใน 1 พิกเซล จะแสดงค่า สีของแต่ละตาแหน่งเพียง 1 สี เมื่อนาจุดมาเรียงต่อกัน จะทาให้เกิดเป็นภาพที่มีสีเป็นธรรมชาติ และ ทาให้ภาพมีความสมบรู ณ์ ภาพแต่ละภาพจึงมีการเก็บข้อมูลจานวนมาก ซึ่งโดยส่วนใหญ่ภาพบิตแมพ ได้มาจากการถ่ายภาพดว้ ยระบบกล้องดิจิทัลและการสแกนภาพ แล้วนาเข้าสู่เคร่ืองคอมพิวเตอร์ เม่ือ ขยายภาพจะสง่ ผลใหภ้ าพแตกเหน็ เปน็ จุดขนาดเลก็ จานวนมาก ดงั ภาพที่ 2.27 ภาพท่ี 2.27 ภาพบติ แมพ ทม่ี า: (ราชวทิ ย์ ทพิ ยเ์ สนา, 2560) ค่าความละเอียดของภาพ (Resolution) มีหน่วยวัดเป็นพิกเซลต่อหน่วยความยาว เช่น ภาพ มีค่าความละเอียด 300 ppi. (Pixels/Inches) แสดงว่าใน 1 ตารางนิ้ว ประกอบด้วยพิกเซลจานวน 300 พิกเซล ดังนั้น การใช้งานภาพบติ แมพตอ้ งคานึงถึงค่าความละเอียดของภาพ ซึ่งจะมีผลต่อขนาด ไฟล์และความละเอียดของภาพ หากภาพมีค่าความละเอียดสูง จะส่งผลให้ไฟล์มีขนาดใหญ่ อาจใช้ เวลาในการประมวลผลนาน และอาจมีผลกระทบตอ่ การแสดงผลของเว็บเพจ

48 CHAPTER 2: WEB DESIGN 1.2 ภาพเวกเตอร์ (Vector) คือ ภาพที่สร้างด้วยเทคนิคความสัมพันธ์ทางคณิตศาสตร์ ลักษณะการสร้างจะทาให้แต่ละส่วนของภาพเป็นอิสระต่อกัน โดยแต่ละส่วนเกิดจากการสร้างเส้น รูปทรง ส่วนโค้ง หรือนาวัตถุต่าง ๆ มารวมเป็นภาพเดียวกัน เช่น การนาสี่เหลี่ยม วงกลม เส้นตรง ลูกบาศก์ มาผสมผสานกันเพ่ือให้เกิดภาพ เป็นต้น เม่ือมีการแก้ไขภาพจะเป็นการแก้ไขคุณสมบัตขิ อง เส้น ทาให้ภาพไม่สูญเสียค่าความละเอียด ดังนั้น เมื่อมีการขยายภาพจะไม่มีผลกระทบต่อค่าความ ละเอียดของภาพหรอื ภาพไมแ่ ตก ดังภาพที่ 2.28 ภาพที่ 2.28 ภาพเวกเตอร์ ท่มี า: (Vecteezy, n.d.: 1) 1.3 แหล่งดาวน์โหลดภาพกราฟิก ภาพกราฟิกท่ีนามาใช้งานในเว็บไซต์ จะต้องเป็น ภาพกราฟิกทีเ่ ปน็ ลขิ สิทธิ์ของเจ้าของเว็บไซตเ์ ท่านนั้ อาจใชว้ ิธีการสร้างภาพกราฟิกดว้ ยตนเองหรือซื้อ ภาพกราฟิกจากเว็บไซต์ขายภาพออนไลน์ ท้ังภาพถ่ายและภาพเวกเตอร์ เช่น shutterstock.com eyeem.com gettyimages.com เป็นต้น นอกจากน้ี ยังมีเว็บไซต์ที่ให้ดาวน์โหลดภาพกราฟิกโดยไม่ มคี า่ ใชจ้ ่าย ซึ่งผู้ออกแบบสามารถนาภาพมาใช้ประกอบในเว็บไซต์ได้ ตามเงือ่ นไขการใช้งานท่ีกาหนด เชน่ flaticon.com rawpixel.com เปน็ ตน้ ดังภาพที่ 2.29 และภาพท่ี 2.30 ภาพท่ี 2.29 ภาพจากเว็บไซต์ flaticon.com ที่มา: (Flaticon, n.d.: 1)

CHAPTER 2: WEB DESIGN 49 ภาพท่ี 2.30 ภาพจากเวบ็ ไซต์ rawpixel.com ทีม่ า: (Rawpixel, n.d.: 1) 2. รปู แบบไฟล์ภาพกราฟิก รูปแบบไฟล์ภาพกราฟิก (File Format) ท่ีสามารถนามาใช้งานกับเว็บไซต์ มีรูปแบบไฟล์ หลายประเภท ซึ่งแต่ละประเภทจะมีคุณสมบัติของไฟล์ที่แตกต่างกัน มีรายละเอียดรูปแบบไฟล์ ภาพกราฟิกสาหรับใชง้ านในเว็บไซต์ทสี่ าคัญ ดงั นี้ 2.1 JPG หรือ JPEG (Joint Photographic Experts Group) รูปแบบนามสกุล .jpg หรือ .jpeg เป็นไฟล์ภาพที่มีการบีบอัดโดยสูญเสียความละเอียดจากภาพต้นฉบับน้อยที่สุด อยู่ใน ลักษณะของภาพถ่ายหรือภาพที่สร้างขึ้นด้วยโปรแกรมคอมพิวเตอร์ แสดงสีได้สูงสุดถึง 16.7 ล้านสี นยิ มนามาใชง้ านในเวบ็ ไซต์ เนือ่ งจากมีความละเอียดสูง ถึงแมจ้ ะเปน็ ไฟลข์ นาดเล็ก 2.2 PNG (Portable Network Graphics) รูปแบบนามสกุล .png เป็นไฟล์ภาพที่มีการ บีบอัดให้มีขนาดเล็กลง โดยสูญเสยี ความละเอียดของภาพน้อย เช่นเดียวกับไฟล์ JPG และมีคุณสมบัติ ทสี่ ามารถทาภาพใหม้ ีพ้ืนหลังโปรง่ ใส (Transparency) ได้ จงึ งา่ ยตอ่ การนาไปตกแต่งภายในเวบ็ ไซต์ 2.3 GIF (Graphics Interchange Format) รูปแบบนามสกุล .gif เป็นไฟล์ภาพท่ีมีการ บีบอัดให้มีขนาดเล็กลง โดยท่ีไม่เน้นรายละเอียดสีที่สมจริง อยู่ในลักษณะของภาพน่ิงและ ภาพเคล่ือนไหวท่ีสร้างข้ึนด้วยโปรแกรมคอมพิวเตอร์ มีเฉดสีเพียง 256 สี เหมาะสาหรับใช้เป็นภาพ ภาพเคลอ่ื นไหวขนาดเลก็ สาหรับแสดงในเว็บไซต์

50 CHAPTER 2: WEB DESIGN 3. รูปแบบการใช้งานกราฟกิ การใช้กราฟิกสาหรบั เว็บไซตใ์ นปัจจุบัน จะเน้นการออกแบบเพ่ือตอบสนองการใช้งานของ ผู้ใช้ผ่านอุปกรณ์ต่าง ๆ ให้มีประสิทธิภาพมากท่ีสุด ออกแบบรูปลักษณ์ให้มีความทันสมัย เน้นความ เรียบง่ายแต่มีองค์ประกอบของกราฟิกที่สามารถแสดงถึงเอกลักษณ์และเนื้อหาของเว็บไซต์ได้อย่าง ชัดเจน ผู้ออกแบบจึงควรออกแบบและใช้งานกราฟิกใหเ้ หมาะสมกับเวบ็ ไซต์เพ่ือดงึ ดูดผู้ใช้ และใหผ้ ู้ใช้ จดจาเอกลักษณ์ใหไ้ ดม้ ากท่ีสดุ มีรปู แบบการใช้งานกราฟิกทีส่ าคญั ดังนี้ (Cann, 2017: 1) 3.1 Responsive Logos การออกแบบตราสัญลักษณ์หรือโลโก้ พร้อมกับการพัฒนาเว็บ เพจให้สามารถตอบสนองการใชง้ านผ่านอุปกรณ์เคลือ่ นท่ีได้อยา่ งเหมาะสม โดยโลโก้จะถูกปรับขนาด อัตโนมัติเม่ือใช้งานบนอุปกรณ์ที่มีขนาดของหน้าจอเล็กลง ผู้ออกแบบเว็บไซต์จึงต้องจัดเตรียมโลโก้ ขนาดต่าง ๆ เพือ่ รองรับการทางานบนอุปกรณ์ท่ีมีความแตกตา่ งกนั ดังภาพที่ 2.31 ภาพท่ี 2.31 การออกแบบตราสัญลักษณ์หลายขนาด ท่ีมา: (Burnham, 2018: 1)

CHAPTER 2: WEB DESIGN 51 3.2 Gradients การไล่ระดับสีในเว็บเพจ เพ่ือแสดงถึงระยะความตื่น-ลึก ของสีท่ีใช้ รวมถึงการสลับโทนสีในเว็บเพจ เพื่อสร้างความตื่นเต้นให้กับผู้ใช้งาน และยังนิยมใช้การไล่ระดับสีมา ซ้อนทบั ภาพเคล่อื นไหวหรือวิดโี อ เพ่อื ให้เว็บเพจมกี ารเคลื่อนไหวอยูต่ ลอดเวลา ดงั ภาพท่ี 2.32 ภาพท่ี 2.32 การไล่ระดับสใี นเว็บเพจ ทม่ี า: (NYCPride, n.d.: 1) 3.3 More Depth (with Semi-Flat Design) การออกแบบภาพกราฟิกในเว็บเพจให้มี ระดับความลึกก่ึงแบน และเพิ่มเงาให้กับภาพ เพ่ือให้ภาพกราฟิกมีความสมจริง ดูมีมิติมากยิ่งข้ึน ดัง ภาพที่ 2.33 ภาพท่ี 2.33 การออกแบบภาพกราฟกิ ให้มีความลึก ทมี่ า: (Android, 2014: 1)

52 CHAPTER 2: WEB DESIGN 3.4 Dashing Duotones การออกแบบภาพกราฟิกโดยกาหนดให้มีเพยี ง 2 โทนสีภายใน ภาพ ทาให้ภาพดูแปลกใหม่ มีความโดดเด่นมากกว่าการใช้สีต้นฉบับ ซ่ึงอาจใช้วิธีการไล่ระดับสีเพ่ือ เพ่ิมมิติให้กับภาพ เป็นการออกแบบเพื่อให้ผู้เข้าชมเว็บไซต์เกิดอารมณ์ตามภาพที่เห็น เหมาะสาหรับ เว็บไซต์ทมี่ ีกล่มุ เปา้ หมายเปน็ วัยรุ่น (Parboonpasent, 2560: 1) ดงั ภาพที่ 2.34 ภาพท่ี 2.34 การออกแบบกราฟิก 2 โทนสี ที่มา: (Davis, 2017: 1) 3.5 Palettes & Patterns Inspired by The 80’s & 90’s การออกแบบกราฟิกโดย ใชส้ ีสันและลวดลายท่ีได้รับความนิยมในยุค ค.ศ. 1980 และ ค.ศ. 1990 ซึง่ จะให้ความรู้สึกท่ีแตกต่าง จากงานกราฟิกในยุคปัจจุบัน งานกราฟิกจะแสดงถึงความเป็นนามธรรม (Abstract) การออกแบบ กราฟกิ ในลักษณะนี้ จงึ ได้รับความนยิ มในปจั จุบัน ดงั ภาพท่ี 2.35 ภาพท่ี 2.35 การออกแบบกราฟกิ ยุค ค.ศ. 1980 และ ค.ศ. 1990 ทีม่ า: (Funemployed, n.d.: 1)

CHAPTER 2: WEB DESIGN 53 3.6 Movement: Animations & GIFs การออกแบบกราฟิกโดยใช้ภาพเคลื่อนไหว ขนาดเล็กเพื่อสรา้ งปฏิสัมพันธ์กับผู้ใช้ (Microinteractions) นยิ มใช้ตราสญั ลกั ษณห์ รือโลโกน้ ามาเป็น ภาพเคลื่อนไหวเพื่อสร้างความโดดเด่น เป็นการออกแบบตามหลัก User Experience Design: UX โดยคานึงถึงประสบการณ์ของผู้ใช้งาน ความพึงพอใจ และสิ่งที่ผู้ใช้จะได้รับ เป็นการสื่อสารท่ีมี ประสิทธิภาพมากกว่าภาพนิ่ง ซึ่งเป็นแนวโน้มการออกแบบกราฟิกสาหรับเว็บไซต์ที่กาลังได้รับความ นิยมในปจั จบุ ัน ดงั ภาพท่ี 2.36 ภาพท่ี 2.36 การออกแบบกราฟิกเคล่ือนไหวขนาดเลก็ ทม่ี า: (Cann, 2017: 1) 3.7 Bold Typography การใชต้ ัวอกั ษรในรปู แบบตัวหนาขนาดใหญ่ เพ่ือแสดงถึงจุดเด่น ของเนอื้ หาที่ตอ้ งการนาเสนอ ซึ่งจะให้ความร้สู ึกท่ตี น่ื เต้น มพี ลัง โดยการกาหนดตัวอักษรในลักษณะน้ี จะต้องจัดวางตาแหน่งและเวน้ ระยะห่างของตัวอกั ษรให้เหมาะสม ดงั ภาพท่ี 2.37 ภาพท่ี 2.37 การใชร้ ูปแบบอักษรหนาขนาดใหญ่ ทม่ี า: (Nurture Digital, 2016: 1)

54 CHAPTER 2: WEB DESIGN 3.8 Custom Graphic Art and Illustration การออกแบบภาพกราฟิกท่ีเป็นผลงาน หรือสร้างสรรค์ด้วยตนเอง โดยใช้องค์ประกอบทางศิลปะในรูปแบบต่าง ๆ ร่วมกับจินตนาการของ ผู้ออกแบบ ซ่ึงจะให้ความแตกต่างจากงานกราฟิกทั่วไป แสดงออกถึงภาพลักษณ์หรือรสนิยมของ เวบ็ ไซตไ์ ดเ้ ปน็ อย่างดี ดังภาพที่ 2.38 ภาพที่ 2.38 การออกแบบกราฟิกด้วยตนเอง ทีม่ า: (Svensson, n.d.: 1) 3.9 Authentic Photography การออกแบบกราฟิกโดยใช้ภาพถ่าย เพ่ือส่ือถึงรูปแบบ ของเว็บไซต์ ซึ่งภาพถ่ายจะให้ความรู้สึกเสมือนจริง สามารถถ่ายทอดอารมณ์ความรู้สึก และบอกเล่า เรื่องราวไปยังผู้เข้าชมเวบ็ ไซตไ์ ด้เป็นอย่างดี ดงั ภาพท่ี 2.39 ภาพท่ี 2.39 การออกแบบกราฟกิ ดว้ ยภาพถา่ ย ทมี่ า: (YETI, n.d.: 1)

CHAPTER 2: WEB DESIGN 55 4. สี สี (Color) เป็นองค์ประกอบสาคัญเช่นเดียวกันองค์ประกอบอ่ืน ๆ ในเว็บไซต์ เป็น องค์ประกอบท่ีมีอิทธิพลต่อความรู้สึก อารมณ์ และจิตใจ รวมถึงเป็นการสร้างบรรยากาศให้กับ เว็บไซต์ เป็นปัจจัยท่ีช่วยดึงดูดผู้ใช้ให้เข้าเย่ียมชมเว็บไซต์ การเลือกใช้สีให้สอดคล้องกับเน้ือหาและ รูปแบบเว็บไซต์ จึงเป็นส่ิงท่ีจะต้องให้ความสาคัญเป็นอย่างยิ่ง ซ่ึงสีจะบ่งบอกถึงความเป็นตัวตน เอกลักษณ์ และอตั ลกั ษณข์ ององค์กรได้เปน็ อย่างดี ดงั นนั้ ผูอ้ อกแบบเวบ็ ไซตต์ ้องมคี วามเขา้ ใจพื้นฐาน เกี่ยวกับทฤษฎีสีเพื่อใชส้ าหรับการออกแบบเวบ็ ไซต์ให้ตรงตามวัตถุประสงค์ สามารถเลอื กใช้สีสาหรับ เวบ็ ไซต์โดยยึดหลกั การทฤษฎีสี ดงั น้ี (กษริ า ศริ ิวฒั นากลุ และวราคณา ธนสริ ติ ระกลู , 2551: 22-25) 4.1 การใช้วงลอ้ สี (Color Wheel) คือ การผสมสเี ปน็ คู่เพ่ือให้เกดิ เปน็ สใี หม่ขน้ึ มา ซง่ึ จะ ได้สีทั้งหมด 12 สี การนาหลักการของวงล้อสีไปใช้สาหรับการออกแบบเว็บไซต์ จะสามารถใช้เฉดสี หรอื กล่มุ สไี ด้อย่างเหมาะสม โดยแบ่งวงจรสอี อกเปน็ 3 ขนั้ ดังภาพท่ี 2.40 ภาพที่ 2.40 วงลอ้ สี ทมี่ า: (Pengadprinting, 2012: 1) สีข้ันที่ 1 (Primary Color) หรอื แมส่ ี เปน็ สีทส่ี ามารถนาไปผสมกนั แลว้ เกิดเป็นสีใหม่ข้ึนมา ไดแ้ ก่ สีแดง สีเหลอื ง สีนา้ เงนิ สีข้ันที่ 2 (Secondary Color) เกิดจากการผสมกันทีละคู่ของแม่สี 3 สี โดยใช้อัตราส่วน ของสเี ทา่ กนั จะทาให้เกิดสีเพม่ิ ขนึ้ มาอกี 3 สี ได้แก่ สสี ้ม สีเขยี ว สมี ว่ ง สีข้ันที่ 3 (Tertiary Color) เกิดจากการผสมกันทีละคู่ระหว่างแม่สีกับสีขั้นที่ 2 โดยใช้ อัตราส่วนของสีเท่ากัน จะทาให้เกิดสีเพ่ิมข้ึนมาอีก 6 สี ได้แก่ สีส้มแดง สีส้มเหลือง สีเขียวเหลือง สี เขียวนา้ เงิน สมี ว่ งแดง สมี ว่ งน้าเงิน

56 CHAPTER 2: WEB DESIGN 4.2 การใช้วรรณะของสี (Tone of Color) หรือโทนสี คือ การแบ่งกลุ่มสีตามอุณหภูมิ ของสี เพ่ือให้ได้ความรู้สึกที่แตกต่างกัน โดยแบ่งวรรณะของสีออกเป็น 2 กลุ่ม คือ สีวรรณะร้อน (Warm Tone) ได้แก่ สีเหลือง สีแดง สีส้ม สีส้มเหลือง สีส้มแดง สีม่วงแดง ซึ่งจะให้ความรู้สึกตนื่ เตน้ เรา้ ใจ เร่ารอ้ น ร้อนแรง กระฉบั กระเฉง และสวี รรณะเย็น (Cool Tone) ไดแ้ ก่ สีม่วง สีน้าเงิน สเี ขียว สีเขียวน้าเงิน สีเขียวเหลือง ซึ่งจะให้ความรู้สึกเย็นสบาย สดช่ืน สงบ เงียบขรึม เป็นธรรมชาติ ท้ังนี้ การออกแบบเวบ็ ไซต์ให้เปน็ เอกลักษณ์มักจะนยิ มใช้สใี นโทนเดยี วกนั ดงั ภาพท่ี 2.41 WARM COOL ภาพท่ี 2.41 วรรณะของสี ท่ีมา: (ราชวิทย์ ทพิ ย์เสนา, 2560) ภาพที่ 2.42 การออกแบบเว็บไซต์ด้วยสโี ทนรอ้ นและสีโทนเย็น ทม่ี า: (Moreno, 2011: 1)

CHAPTER 2: WEB DESIGN 57 4.3 การใช้สีคู่ตรงข้าม (Complementary Color) คือ สีในวงจรสีท่ีอยู่ในตาแหน่งตรง ข้ามกัน สจี ะมีลักษณะตัดกันอย่างชดั เจน ส่งผลใหเ้ กิดความโดดเด่น การออกแบบเวบ็ เพจโดยเลือกใช้ สีตามหลักสีคู่ตรงข้าม ไม่ควรใช้สีในสัดส่วนท่ีเท่ากัน ซ่ึงจะทาให้เว็บเพจแสดงถึงความขัดแย้งกันมาก เกินไป ควรแบ่งสัดส่วนสีในอัตราส่วน 80/20 หรือ 70/30 เช่น ใช้สีแดงในเว็บเพจรอ้ ยละ 80 และใช้ สีเขียวในเว็บเพจร้อยละ 20 เป็นต้น จะทาให้เว็บไซต์มีความโดดเด่นมากย่ิงขึ้น โดยสีคู่ตรงข้ามหลัก ประกอบด้วยสี แดง-เขียว เหลือง-ม่วง และส้ม-น้าเงิน (จรุงยศ อรัญยะนาค, 2560: 122) ดังภาพท่ี 2.43 ภาพท่ี 2.43 สีคตู่ รงขา้ ม ทม่ี า: (ราชวทิ ย์ ทิพยเ์ สนา, 2560) 4.4 การใช้สีใกล้เคียงกับสีคู่ตรงข้าม (Split Complementary) คือ การใช้คู่สีที่อยู่ ทางด้านซ้ายและด้านขวาของสีคู่ตรงข้ามในวงจรสี ซ่ึงจะให้ความนุ่มนวลมากกว่าการใช้สีคู่ตรงข้าม แตย่ งั คงเป็นสีทต่ี ดั กันอยู่ เชน่ สีส้ม สีนา้ เงิน และสเี ขียว เป็นตน้ ดงั ภาพท่ี 2.44 ภาพที่ 2.44 สีใกลเ้ คียงกบั สีคู่ตรงข้าม ทมี่ า: (ราชวิทย์ ทิพยเ์ สนา, 2560)

58 CHAPTER 2: WEB DESIGN 4.5 การใช้สีใกล้เคียงกัน (Analogous Colors) คือ การใช้สีท่ีอยู่ใกล้เคียงกันทาง ดา้ นซ้ายหรือดา้ นขวาในวงจรสี โดยเลอื กสีจานวน 3-5 สี มาใช้งานในเวบ็ เพจ มกั เปน็ สที ่อี ย่ใู นวรรณะ เดียวกัน ซ่ึงจะส่งผลให้เว็บเพจมีเฉดสีท่ีกลมกลืนมากย่ิงขึ้น เช่น สีเขียว สีเขียวเหลือง และสีเหลือง เป็นต้น ดงั ภาพท่ี 2.45 ภาพท่ี 2.45 สีใกลเ้ คียงกนั ท่ีมา: (ราชวทิ ย์ ทพิ ย์เสนา, 2560) 4.6 การใช้โครงสีสามเหลี่ยม (Triad Colors) คือ การเลือกใช้สีจานวน 3 สี โดยใช้รูปร่าง สามเหล่ียมด้านเท่าวางลงบนวงจรสี จะได้สีตามที่กาหนด ซ่ึงการใช้สีในลักษณะน้ี ต้องควบคุมสมดุล ระหว่างสีทั้ง 3 สี โดยอาจเลือกสีใดสีหนึ่งเป็นสีหลัก และอีก 2 สี ใช้เป็นสีสนับสนุนเพื่อให้สีหลักมี ความโดดเด่น เช่น ใช้สีส้มแดงเป็นสีหลัก ใช้สีม่วงน้าเงินและสีเขียวเหลืองเป็นสีสนับสนุน เป็นต้น (จรงุ ยศ อรัญยะนาค, 2560: 124-125) ดงั ภาพท่ี 2.46 ภาพที่ 2.46 โครงสีสามเหลี่ยม ท่ีมา: (ราชวทิ ย์ ทิพยเ์ สนา, 2560)

CHAPTER 2: WEB DESIGN 59 4.7 การใช้สีกลาง (Neutral Colors) คือ การใช้สีท่ีสามารถเข้าได้กับทุกสี นิยมใช้เป็นสี พื้นหลังของเว็บเพจ เพอ่ื ใหค้ วามรูส้ ึกท่ีบางเบา ส่งผลใหอ้ งคป์ ระกอบอน่ื ๆ ในเวบ็ เพจมีความโดดเด่น มากย่ิงขึ้น โดยกลุ่มสีกลางประกอบด้วยสีกลางโทนอ่อน เช่น สีเทา สีครีม สีขาว เป็นต้น และสีกลาง โทนเข้ม เชน่ สีเทาเข้ม สีนา้ ตาล สีดา เปน็ ต้น ดงั ภาพท่ี 2.47 ภาพท่ี 2.47 สีกลาง ท่ีมา: (Aliehous1, n.d.: 1) 4.8 การใช้สีโทนเดียว (Monotone Colors) คือ การใช้งานสีเพียงสีเดียว โดยจะการ แบ่งน้าหนักความอ่อน-เข้มของสี ซ่ึงการใช้สีโทนเดียวกับเว็บเพจ จะแสดงถึงความประณีต เรียบง่าย และองคป์ ระกอบตา่ ง ๆ มคี วามกลมกลนื กนั ดงั ภาพท่ี 2.48 ภาพที่ 2.48 สโี ทนเดียว ทม่ี า: (Chapman, 2010: 1) สามารถใช้งานเคร่ืองมือ Adobe Color เพื่อเลือกโทนสีที่ได้รับความนิยม และยังมี เครื่องมือสาหรับกาหนดค่าสีในรูปแบบต่าง ๆ จากเว็บไซต์ https://color.adobe.com ซึ่งจะได้ค่าสี มาตรฐานท่สี ามารถนามาใชง้ านกับเว็บไซตไ์ ด้ ดงั ภาพที่ 2.49 ภาพที่ 2.49 Adobe Color CC ที่มา: (Adobe Color CC, n.d.: 1)

60 CHAPTER 2: WEB DESIGN 5. แบบอักษร แบบอกั ษร (Font) เป็นองคป์ ระกอบทีม่ ีความสาคัญในการออกแบบกราฟิกสาหรบั เว็บไซต์ การเลือกแบบอักษรที่เหมาะสม จะสามารถส่ือถึงวัตถุประสงค์และลักษณะของเว็บไซต์ได้เป็นอย่างดี แบบอกั ษรยงั สามารถสอื่ ถงึ อารมณ์หรือความรสู้ ึกทแี่ ตกตา่ งกนั และยงั สามารถดึงดดู ความสนใจของผู้ เข้าชมเว็บไซต์ได้เช่นเดียวกับภาพกราฟิก ดังน้ัน ในการออกแบบเว็บไซต์ควรเลือกใช้แบบอักษรให้ เหมาะสม เพอื่ ใหส้ ามารถสอ่ื สารกบั ผู้ใช้ได้อย่างมปี ระสิทธิภาพ ลักษณะของแบบอักษรท่ีใช้งานในเว็บไซต์แบ่งออกเป็น 2 ประเภท คือ แบบมีเชิง (Serif) มีลักษณะเป็นขีดบางอยู่ที่ปลายของตัวอักษรหรือเรียกกว่าแบบอักษรโรมัน (Roman) นิยมใช้สาหรับ พิมพ์เน้ือหาเป็นย่อหน้า และแบบไม่มีเชิง (Sans Serif) ไม่มีขีดบางที่ปลายอักษรหรือเรียกว่าแบบ กอทิก (Gothic) นิยมใช้สาหรับพิมพ์หัวข้อหลักหรือหัวเร่ือง (กรรณิการ์ สวรรค์โพธิพันธ์ิ, 2550: 89; Pitithanarith, 2557: 1) ดงั ภาพที่ 2.50 ภาพท่ี 2.50 ลกั ษณะแบบอักษร Serif และ Sans Serif ที่มา: (Candelita, n.d.: 1) 5.1 หลกั การเลือกแบบอกั ษรสาหรบั เวบ็ ไซต์ การเลือกแบบอักษรสาหรับนามาใช้งานให้เหมาะสมกับเว็บไซต์ สามารถแสดงผลได้ อย่างมีประสิทธิภาพ ท้ังแบบอักษรท่ีใช้แสดงบนเว็บเพจ และแบบอักษรที่แสดงบนภาพกราฟิก มี หลกั การเลือกแบบอกั ษร ดังนี้ (มนัสวนิ แสนคา, 2557: 1; Saikam, 2559: 1) 5.1.1 เลือกแบบอักษรตามลักษณะของเวบ็ ไซต์ ซึ่งแบบอักษรจะมีผลต่อความรสู้ ึกของ ผู้เข้าชมเว็บไซต์ เช่น เว็บไซต์สุขภาพและความงาม ควรใช้แบบอักษรท่ีมีความหรูหรา โค้งมน เหมาะ กบั สุภาพสตรี หรอื เวบ็ ไซต์นาเสนอข่าว ควรใชแ้ บบอักษรที่มคี วามเป็นทางการ อ่านง่าย เปน็ ต้น 5.1.2 เลือกแบบอักษรท่ีเหมาะกับกลุ่มเป้าหมาย โดยคานึงถึงลักษณะของ กลุ่มเป้าหมายที่ต้องการให้เข้าชมเว็บไซต์ ไม่ว่าจะเป็นด้านอายุ เพศ อาชีพ หรือบุคลิกภาพ เช่น กลุ่มเป้าหมายที่เป็นศิลปินทางด้านศิลปะ ควรเลือกใช้แบบอักษรที่ส่ือถึงความเป็นศิลปะ แบบอักษร ตวดั หาง เป็นตน้

CHAPTER 2: WEB DESIGN 61 5.1.3 เลือกแบบอักษรท่ีสามารถใชง้ านได้กับทกุ อุปกรณ์ โดยตอ้ งคานึงถึงการแสดงผล เว็บไซต์ผ่านโทรศัพท์สมาร์ทโฟนหรอื แท็บเลต็ ซึ่งจะมีความแตกต่างจากการเปิดด้วยคอมพิวเตอร์ จึง ควรทดสอบการแสดงผลกบั อปุ กรณ์ตา่ ง ๆ ก่อนเผยแพรเ่ ว็บไซต์จรงิ 5.1.4 เปรียบเทียบแบบอักษรหลายแบบ โดยการทดลองใช้แบบอักษรรูปแบบต่าง ๆ และทดสอบการแสดงผลผ่านโปรแกรมแสดงผลเว็บ จากนั้นเลือกแบบอักษรที่มีความเข้ากันได้กับ องค์ประกอบกราฟกิ อนื่ ๆ ภายในเวบ็ เพจ 5.2 แหลง่ ดาวนโ์ หลดแบบอกั ษร แบบอักษรท่ีนามาใช้งานในเว็บไซต์ นอกจากแบบอักษรประเภท Serif หรือ Sans Serif สามารถดาวน์โหลดแบบอักษรได้จากเว็บไซต์ต่าง ๆ เช่น f0nt.com fonts.google.com เป็น ต้น โดยมีทั้งแบบเสียค่าใช้จ่ายและไม่มีค่าใช้จ่าย ซึ่งหากเป็นแบบอักษรท่ีอนุญาตให้ใช้งานโดยที่ไม่มี ค่าใช้จา่ ยใด ๆ ผอู้ อกแบบเว็บไซต์ควรศึกษาข้อกาหนดในการใช้งาน กอ่ นนามาใชง้ านในเวบ็ ไซต์ ทงั้ น้ี การใช้แบบอักษรในเว็บไซต์จะต้องเรียกใช้งานด้วยสไตล์ชีต (Style Sheet) ซ่ึงมีรายละเอียดและ วธิ ีการใช้งานในบทที่ 9 เทคนคิ การแสดงผลภาพและตัวอักษร ภาพที่ 2.51 เวบ็ ไซต์ f0nt.com สาหรบั ดาวน์โหลดแบบอักษร ทมี่ า: (ฟอนต.์ คอม, 2552: 1)

62 CHAPTER 2: WEB DESIGN ภาพที่ 2.52 เวบ็ ไซต์ fonts.google.com สาหรบั ดาวนโ์ หลดแบบอักษร ท่มี า: (Google Fonts, n.d.: 1) ภาพที่ 2.53 เวบ็ ไซต์ befonts.com สาหรบั ดาวน์โหลดแบบอักษร ทม่ี า: (Befonts, n.d.: 1)

CHAPTER 2: WEB DESIGN 63 สรุป การออกแบบเว็บไซต์เพ่ือให้ได้เว็บไซต์ท่ีตอบสนองการใช้งาน จะต้องดาเนินการตาม กระบวนการของการสร้างเว็บไซต์ ซง่ึ เปน็ กระบวนการทมี่ คี วามสาคญั อยา่ งยิง่ โดยเรมิ่ จากการกาหนด วัตถุประสงค์ในการสร้างเว็บไซต์ให้มีความชัดเจนและกาหนดกลุ่มเป้าหมายหลักท่ีจะเข้าใช้งาน เว็บไซต์ เพื่อนาไปสู่การออกแบบโครงสร้างเว็บไซต์ให้สอดคล้องกับวัตถุประสงค์และกลุ่มเป้าหมาย เมื่อกาหนดโครงสร้างท่ีชัดเจนแล้ว ต้องดาเนินการจัดเตรียมเนื้อหาประเภทข้อความ ภาพน่ิง วิดีโอ หรือเน้ือหารูปแบบอื่น ๆ ให้ครบถ้วน แล้วทาการคัดเลือกเน้ือหาที่มีความสมบูรณ์พร้อมที่จะนามา เผยแพร่ผ่านเว็บไซต์ จากน้ันจึงดาเนินการพัฒนาเว็บไซต์โดยการเลือกภาษาและเครื่องมือให้ เหมาะสมกบั รูปแบบของเวบ็ ไซต์ องคป์ ระกอบสาคัญของการออกแบบเว็บไซต์ ประกอบด้วย 1) การออกแบบเค้าโครงเว็บเพจ ให้มีส่วนประกอบ 4 ส่วนหลัก ได้แก่ ส่วนหัว ส่วนเนื้อหา ส่วนข้าง และส่วนล่าง จึงจะถือได้ว่าเป็น เว็บไซตท์ ี่มีความสมบูรณ์ 2) การกาหนดขนาดเวบ็ เพจ ผ้อู อกแบบจะตอ้ งกาหนดขนาดให้เหมาะสมกับ เน้ือหา และคานึงถึงการแสดงผลผ่านอุปกรณ์ที่แตกต่างกัน 3) การออกแบบระบบนาทาง ผู้ออกแบบ จะต้องศึกษาคุณสมบัติของระบบนาทางท่ีดี และเลือกรูปแบบระบบนาทางให้เหมาะสมกับลักษณะ การใช้งานเว็บไซต์ ซึ่งควรออกแบบระบบนาทางให้สามารถตอบสนองการใช้งานกับอุปกรณ์ในยุค ปัจจุบัน และ 4) การออกแบบกราฟิกสาหรับเว็บไซต์ ถือเป็นองค์ประกอบที่สาคัญในการออกแบบ เว็บไซต์ เน่ืองจากกราฟิกเป็นองค์ประกอบที่ใช้สาหรับถ่ายทอดและนาเสนอเน้ือหาต่าง ๆ ไปยังผู้ใช้ ท้ังในด้านของการใช้งานภาพประกอบ การเลือกโทนสี และการเลือกใช้แบบอักษร ดังน้ัน ผู้ออกแบบ จงึ ตอ้ งใหค้ วามสาคัญกับการออกแบบเวบ็ ไซต์ เพอ่ื ใหไ้ ด้เว็บไซต์ทีต่ อบสนองการใชง้ านของผู้ใช้อย่างมี ประสิทธภิ าพ

64 CHAPTER 2: WEB DESIGN

เอกสารอา้ งองิ กรรณิการ์ สวรรคโ์ พธิพันธิ์. (2550). ออกแบบเว็บให้นา่ ใช้ (Designing Web Usability). กรงุ เทพฯ: เคทีพี คอมพ์ แอนด์ คอนซัลท์. กษิรา ศริ ิวฒั นากลุ และวราคณา ธนสริ ติ ระกลู . (2551). Computer arts & graphic design : เส้นทางสู่นกั กราฟิกมืออาชีพ. กรงุ เทพฯ: สถาบนั อนิ เทอรเ์ น็ทและการออกแบบ. จรุงยศ อรญั ยะนาค. (2560). การออกแบบเว็บไซต์ Website Design. กรุงเทพฯ: จุฬาลงกรณ์ มหาวทิ ยาลัย. จุฬาลงกรณ์มหาวทิ ยาลัย. (ม.ป.ป.). Hompage: จฬุ าลงกรณ์มหาวิทยาลัย. สืบคน้ เมื่อ 18 ธันวาคม 2560, จาก https://www.chula.ac.th. ชาตพล นภาวาร.ี (2554). Photoshop Web Design. กรุงเทพฯ: ซมิ พลิฟาย. ฟอนต.์ คอม. (2552). Homepage: ฟอนต์.คอม. สืบคน้ เมอ่ื 16 สิงหาคม 2560, จาก https://www.f0nt.com/release. มนัสวนิ แสนคา. (2557). การเลอื กใช้ Font ในการออกแบบเวบ็ ไซต์. สบื ค้นเมอื่ 5 ธนั วาคม 2560, จาก http://www.siamhttp.com/site/article/how-to-use-fonts-for-web- design.html. ราชวิทย์ ทพิ ย์เสนา. (2560). การสรา้ งสรรคภ์ าพประกอบตาราวชิ าการ. [ไฟล์คอมพิวเตอร์]. อุดรธานี: สาขาวชิ าสารสนเทศศาสตร์ คณะมนุษยศาสตร์และสังคมศาสตร์ มหาวทิ ยาลัย ราชภฏั อุดรธานี. วนั บีลีฟ. (2560). หลกั การออกแบบเว็บขนั้ พน้ื ฐาน พร้อมองคป์ ระกอบและรปู แบบโครงสร้าง. สบื คน้ เม่อื 18 ธันวาคม 2560, จาก https://www.1belief.com/article/website- design. อนนั วาโซะ. (2558). Graphic Design for Printing & Publishing. นนทบุรี: ไอดซี ีฯ. Adobe Color CC. (n.d.). Explore | Most Popular Adobe Color CC. Retrieved February 13, 2018, from https://color.adobe.com/create. Aliehous1. (n.d.). Neutral colors Color Palette. Retrieved February 5, 2018, from https://www.color-hex.com/color-palette/19619. Android. (2014). Homepage: Android. Retrieved February 15, 2018, from https://www.android.com. Balkhi, S. (2017). How to Display Different Sidebar for Each Post and Page in WordPress. Retrieved February 10, 2018, from https://www.wpbeginner.com/wp-themes/display-different-sidebar-for-each- post-and-page-for-wordpress. Befonts. (n.d.). Homepage: Befonts. Retrieved October 23, 2018, from https://befonts.com. Berrington, K. (2018). Where The Vogue Editors Are Going This Winter. Retrieved October 23, 2018, from https://www.vogue.co.uk/gallery/where-the-vogue- editors-are-going-this-winter.

66 CHAPTER 2: WEB DESIGN Burnham, A. (2018). What are ‘Responsive Logos’ and Why are They the Way Forward?. Retrieved May 30, 2018, from https://diony.co.uk/uncategorised/responsive-logos-way-forward. Candelita. (n.d.). Finding The Perfect Font. Retrieved February 30, 2018, from https://candelita.is/finding-perfect-font. Cann, M. (2017). 10 inspirational graphic design trends for 2018. Retrieved February 15, 2018, from https://99designs.com/blog/trends/graphic-design- trends-2018. Chapman, C. (2010). Color Theory for Designers: How To Create Your Own Color Schemes. Retrieved February 30, 2018, from https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3- creating-your-own-color-palettes. Computerworld. (2018). Hompage: Computerworld. Retrieved February 13, 2018, from https://www.computerworld.com. Davis, B. (2017). 23 examples of duotones and colour filters in web design. Retrieved August 20, 2017, from https://econsultancy.com/23-examples-of- duotones-and-colour-filters-in-web-design. Enjoyday. (2552). การออกแบบระบบนาทาง (Site Navigation Design). สบื คน้ เม่อื 20 พฤษภาคม 2560, จาก http://www.enjoyday.net/site-navigation-design.html. Flaticon. (n.d.). Travel App. Retrieved August 12, 2017, from https://www.flaticon.com/packs/travel-app-14. Funemployed. (n.d.). Homepage: funemployed. Retrieved August 23, 2017, from http://funemployed.life. Fylan, J. (2018). 35+ Best Slideshow WordPress Themes 2018. Retrieved March 16, 2018, from https://www.theme-junkie.com/best-slideshow-wordpress- themes. Google Fonts. (n.d.). Homepage: Google Fonts. Retrieved March 12, 2018, from https://fonts.google.com. Gumtree. (2016). Homepage: Gumtree. Retrieved April 15, 2018, from https://www.gumtreejobs.sg. Hardwick, J. (2017). 75 Actionable SEO Tips (That Work Like A Charm in 2018). Retrieved March 23, 2018, from https://ahrefs.com/blog/seo-tips. Lu, L. (2018). How to Increase ROI Through Your Website’s Footer. Retrieved August 3, 2018, from https://envato.com/blog/how-to-increase-roi-through- your-websites-footer. Moreno, H. (2011). Warm and Cool – Color Psychology in Web Design. Retrieved August 30, 2017, from https://www.templatemonster.com/blog/warm-cool- color-psychology-web-design.

CHAPTER 2: WEB DESIGN 67 Nurture Digital. (2016). Homepage: Nurture Digital. Retrieved May 5, 2018, from http://www.nurturedigital.com. NYCPride. (n.d.). Hompage: NYC PRIDE WORLD. Retrieved August 4, 2017, from https://2019-worldpride-stonewall50.nycpride.org. Parboonpasent, W. (2560). เทคนคิ ทาภาพ DUOTONES ทาง่ายได้ภาพสวย. สืบคน้ เมื่อ 25 เมษายน 2560, จาก https://www.grappik.com/duotones. Pengadprinting. (2012). Introduction and the Color Wheel. Retrieved May 14, 2018, form http://www.pengadprinting.com/content/color-theory-part-i- primer-1. Pitithanarith, P. (2557). [Infographic] ข้อแตกตา่ งระหวา่ งฟอนต์ Serifs กับ Sans Serifs. สบื คน้ เม่อื 23 เมษายน 2560, จาก https://www.marketingoops.com/reports/infographic-reports/infographic-serifs- vs-sans. Politico. (2018). Homepage: Politico. Retrieved March 6, 2018, from https://www.powderlife.com. Powerlife. (2018). Homepage: Powderlife. Retrieved May 20, 2018, from https://www.powderlife.com. Rawpixel. (n.d.). Free creative resources. Retrieved February 20, 2018, from https://www.creativebloq.com/features/10-website-navigation-trends-for-2017. Rocheleau, J. (2018). Top web navigation trends. Retrieved February 22, 2018, from https://www.creativebloq.com/features/10-website-navigation-trends-for- 2017. Saikam, W. (2559). 7 วิธี เลอื กฟอนต์อย่างไร ให้เข้ากับเวบ็ ไซต์คุณ. สบื คน้ เม่อื 5 พฤษภาคม 2560, จาก https://blog.readyplanet.com/15773079/content-marketing-how-to- choose-perfect-fonts-for-your-website. Sherwin, K. (2016). Universal Navigation: Connecting Subsites to Main Sites. Retrieved January 23, 2017, from https://www.nngroup.com/articles/universal-navigation. Snell, S. (2016). Web Design Mega Menu Examples for Design Inspiration. Retrieved January 23, 2017, from https://www.vandelaydesign.com/mega- menus. Svensson, S. (n.d.). Homepage: Insidethehead. Retrieved August 18, 2018, from https://insidethehead.co. Triaetc. (2018). Homepage: Triaetc. Retrieved August 20, 2018, from https://www.triaetc.com. Vecteezy. (n.d.). Avatar Icons Vector. Retrieved May 3, 2018, form https://www.vecteezy.com/vector-art/133253-avatar-icons-vector. YETI. (n.d.). Homepage: YETI Cycles. Retrieved January 22, 2018, from https://www.yeticycles.com.



บทท่ี 3 การพัฒนาเว็บไซต์ดว้ ย HTML5 HTML (HyperText Markup Language) คำส่ังทำงคอมพิวเตอร์ท่ีใช้แสดงผลเอกสำรเว็บ หรอื เรียกว่ำเวบ็ เพจ (Webpage) เปน็ ภำษำพ้ืนฐำนสำหรับกำรพัฒนำเว็บไซต์ อยู่ในรูปแบบของภำษำ มำร์คอัพ (Markup Language) ซ่ึงเป็นภำษำที่แสดงข้อมูล โครงสร้ำง รูปแบบ และข้อมูลที่เกี่ยวข้อง ไว้ด้วยกัน ผู้เร่ิมต้นจะต้องศึกษำรำยละเอียดต่ำง ๆ โดยเฉพำะโครงสร้ำงของภำษำและรูปแบบของ ไวยำกรณ์ เพื่อให้สำมำรถเขียนภำษำ HTML ได้อย่ำงถูกต้อง โดย HTML มีกำรพัฒนำขีด ควำมสำมำรถและรูปแบบไวยำกรณ์ในกำรเขียน ได้แก่ HTML HTML2.0 HTML3.2 HTML4.01 XHTML ปัจจุบันมีกำรพัฒนำถึง HTML5 ซ่ึงเป็นกำรเพิ่มขีดควำมสำมำรถและประสิทธิภำพในกำร ทำงำนของ HTML โดยเฉพำะกำรแสดงผลผ่ำนอุปกรณ์เคล่ือนท่ีสมัยใหม่ ไม่ว่ำจะเป็นโทรศัพท์มือถือ สมำรท์ โฟน แทบ็ เลต็ หรอื คอมพิวเตอร์พกพำประเภทตำ่ ง ๆ กำรสร้ำงเว็บเพจดว้ ย HTML5 เป็นกำรเขียนคำส่ังในรูปแบบของแทก็ (Tag) ซง่ึ สำมำรถเขยี น ได้ด้วยโปรแกรมสำหรับแก้ไขข้อควำม (Text Editor) เช่น Notepad WordPad Editplus เป็นต้น หรืออำจใช้โปรแกรมสำหรับออกแบบและพัฒนำเว็บเพจโดยเฉพำะ เช่น Adobe Dreamweaver, Google Web Designer เป็นต้น ส่วนกำรเรียกใช้งำนหรือทดสอบเว็บเพจ ต้องใช้งำนผ่ำนโปรแกรม แสดงผลเว็บ (Web Browser) เช่น Google Chrome, Opera, Firefox, Internet Explorer เป็นตน้ (กรีวุธ อัศวศุปตำนนท์, 2556: 4-9) โดยเนื้อหำในบทน้ี จะอธิบำยถึงโครงสร้ำงของ HTML5 กำรใช้ งำนคำส่งั ตำ่ ง ๆ และกำรเขียนคำส่ังท่ีถกู ต้องตำมรปู แบบ HTML5 พร้อมกบั แสดงตัวอย่ำงกำรใช้งำน วิวัฒนาการของ HTML HTML เป็นภำษำสำหรับสร้ำงเว็บเพจโดยเฉพำะ มีพ้ืนฐำนรูปแบบกำรเขียนมำจำกภำษำ SGML (Standard Generalized Markup Language) เป็นภำษำท่ีมีรูปแบบของตัวอักษรอยู่ใน มำตรฐำนของรหัสแอสกี (American Standard Code for Information Interchange: ASCII) เขียนในรูปของเอกสำรข้อควำม (Text Document) จึงกำหนดรูปแบบและโครงสร้ำงได้ง่ำย รวมถึง ไฟล์เอกสำรมีขนำดเล็ก จงึ สง่ ผลให้กำรถำ่ ยโอนข้อมูลทำได้อย่ำงรวดเรว็ ปัจจบุ ันองค์กรผู้พัฒนำมีกำร พัฒนำภำษำ HTML อย่ำงต่อเน่ือง เพื่อให้สำมำรถทำงำนได้อย่ำงมีประสิทธิภำพ และใช้งำนได้กับ อุปกรณ์ต่ำง ๆ จึงสรุปวิวัฒนำกำรของภำษำ HTML ดังนี้ (วฤษำย์ ร่มสำยหยุด, 2556: 13-14; W3Schools, 1999a: 1)

70 CHAPTER 3: HTML5 ปี ค.ศ. 1991 นำย Tim Berners Lee นักวิจัยประจำศูนย์วิจัยนิวเคลียร์ยุโรป (CERN: Conseil Européen Pour La Recherche Nucléaire) ไ ด้ ส ร้ ำ ง ชุ ด ค ำ ส่ั ง HTML ( HyperText Markup Language) โดย HTML ในยุคแรก ถูกใช้เพื่อจัดทำรูปแบบตัวอักษรในเอกสำรประเภท ไฮเปอร์เท็กซ์ (Hypertext) ซึ่งเป็นเอกสำรรูปแบบข้อควำมท่ีมีกำรเช่ือมโยงเข้ำหำกัน ควำมสำมำรถ จงึ ยังคงจำกดั สำมำรถกำหนดรูปแบบหัวขอ้ หลัก (Heading) ตัวอักษรหนำ้ (Bold) และตัวอักษรเอียง (Italic) ได้เท่ำนั้น โดยในช่วงเวลำเดียวกัน อินเทอร์เน็ตได้ถูกพัฒนำขึ้นพร้อมกับภำษำทำง คอมพิวเตอร์ และโพรโทคอล (Protocol) ภำษำ HTML จึงเป็นภำษำท่ีถูกนำมำใช้จัดรูปแบบเอกสำร เว็บ และแลกเปล่ยี นข้อมลู ผำ่ นระบบคอมพวิ เตอร์ ซ่งึ ได้รบั ควำมนิยมในหมนู่ ักพัฒนำเวบ็ ไซต์ ปี ค.ศ. 1995 กลุ่มผู้พัฒนำ HTML ได้มีกำรกำหนดมำตรฐำน HTML2.0 โดยมีกำรกำหนด รปู แบบ องค์ประกอบ และโครงสร้ำงของภำษำ HTML ให้มคี วำมชัดเจนมำกยิง่ ขึน้ ปี ค.ศ. 1997 W3C (World Wide Web Consortium) องค์กรระหว่ำงประเทศท่ีก่อต้ังขึ้น เพื่อทำหน้ำที่กำหนดมำตรฐำนเว็บ และทำงำนด้ำนกำรพัฒนำเทคโนโลยีเว็บ ได้กำหนดมำตรฐำน HTML3.2 โดยมีกำรรวม Cascading Style Sheet: CSS เข้ำกับ HTML เพื่อช่วยจัดรูปแบบเอกสำร เว็บให้สำมำรถแสดงผลผ่ำนโปรแกรมแสดงผลเว็บให้มีประสิทธิภำพมำกยิ่งขึ้น และมีกำรกำหนด องค์ประกอบยอ่ ย (Element) และคณุ ลัษณะ (Attribute) ตำ่ ง ๆ เพิ่มเติม ปี ค.ศ. 1999 W3C มีกำรพัฒนำ HTML อย่ำงต่อเน่ือง จึงได้กำหนดมำตรฐำน HTML4.01 โดยเพิ่มขีดควำมสำมำรถจำกเดิมท่ีสำมำรถจัดรูปแบบเอกสำรได้เพียงอย่ำงเดียว ให้สำมำรถควบคุม กำรแสดงผลของเอกสำรในรูปแบบของวัตถุ (Object) เพ่ือให้กำรแสดงผลภำพ เสียง และแบบฟอร์ม มีประสิทธิภำพมำกย่ิงข้ึน และมีกำรใช้งำนภำษำสคริปต์ (Scripting Language) เพื่อให้เว็บเพจ สำมำรถโตต้ อบกบั ผู้ใช้ได้มำกย่งิ ข้นึ ปี ค.ศ. 2000 W3C มีกำรพัฒนำ XHTML (Extensible Hyper Text Markup Language) เพือ่ ใช้เป็นมำตรฐำนในกำรเขยี นคำส่ัง สำหรบั กำรสร้ำงเว็บเพจให้สำมำรถใช้ได้กับอปุ กรณ์ต่ำง ๆ เพ่ิม มำกขน้ึ ซึ่งมลี ักษณะของโครงสร้ำงคล้ำยภำษำ XML (eXtensible Markup Language) ปี ค.ศ. 2014 W3C ร่วมกบั กลุม่ WHATWG (Web Hypertext Application Technology) ซ่ึงเป็นกลุ่มนักพัฒนำจำกบริษัท Apple Mozilla และ Opera มีกำรกำหนดมำตรฐำน HTML5 เพ่ือ สนับสนุนกำรสร้ำงเว็บแอปพลิเคชัน (Web Application) ส่งผลให้นักพัฒนำสำมำรถออกแบบ เว็บไซต์ให้มีปฏิสัมพันธ์กับผู้ใช้ได้มำกยิ่งขึ้น และยังเป็นมำตรฐำนที่เหมำะสำหรับกำรทำ SEO (Search Engine Optimization) ให้กับเว็บไซต์ เพ่ือให้เคร่ืองมือค้นหำ (Search Engine) สำมำรถ ค้นหำเว็บไซต์ได้ง่ำยมำกยิ่งขึ้น โดยมำตรฐำนใหม่จะมีคุณลักษณะเด่นท่ีสำคัญ ได้แก่ กำรใช้งำนวิดีโอ และเสียง กำรแสดงตำแหน่งทำงภูมิศำสตร์ กำรเก็บไฟล์ในลักษณะออฟไลน์ กำรทำงำนด้ำนกรำฟิก และชนิดของกำรป้อนข้อมูลรูปแบบใหม่ นอกจำกนี้ มำตรฐำน HTML5 ได้มีกำรตัดคำสั่งที่ซ้ำซ้อน และไม่จำเป็นออกไปบำงสว่ น เพื่อให้กำรเขียนทำไดร้ วดเรว็ มำกขึน้ กว่ำเดมิ

CHAPTER 3: HTML5 71 รปู แบบแบบการเขียนคาสง่ั HTML5 รูปแบบกำรเขียนคำสั่งหรือโค้ด (Code) ตำมมำตรฐำนของ HTML5 คำสั่งจะต้องอยู่ภำยใต้ เครื่องหมำย Less-than bracket (<) และ Greater-than bracket (>) หรือเรียกว่ำแท็ก (Tag) โดย แบ่งออกเป็น 2 ประเภท ได้แก่ แท็กเดี่ยว (Single tag) เช่น <br> <hr> <img> เป็นต้น โดยแท็ก เด่ียวใน HTML5 จะไม่ใช้เครื่องหมำย Slash (/) ปิดแท็กเหมือน HTML ในรุ่นก่อน และแท็กเปิด/ปดิ (Start tag/End tag) เชน่ <h1>…</h1> <p>…</p> เป็นตน้ 1. แอตทรบิ ิวต์ แอตทริบิวต์ (Attributes) คือ กำรกำหนดคุณสมบัติเพิ่มเติมให้กับคำส่ังหรือแท็ก เพื่อให้ กำรทำงำนของคำสั่งมีรำยละเอียดเพ่ิมเติมหรือมีคุณลักษณะที่นอกเหนือจำกคำสั่ง โดยคุณสมบัติ จะตอ้ งอยูภ่ ำยในแท็กเสมอ ประกอบด้วยแอตทรบิ วิ ต์ 2 รปู แบบ ไดแ้ ก่ 1.1 กาหนดชอ่ื และกาหนดค่า (Name & Value) แอตทริบิวต์ท่ีมีรูปแบบ name=\"value\" อยู่ในแท็กเปิดของคำส่ังเสมอ โดยกำร กำหนดช่ือและค่ำจะขึ้นอยู่กับแท็ก ซึ่งแต่ละแท็กจะมีรูปแบบของกำรกำหนดชื่อและค่ำแตกต่ำงกัน ตัวอย่ำงเช่น แท็ก \"img\" สำหรับแสดงภำพ ประกอบด้วยแอตทริบิวต์ \"src\" ท่ีอยู่ของภำพ \"width\" ควำมกว้ำงของภำพ \"height\" ควำมสูงของภำพ และ \"alt\" คำอธิบำยภำพ เป็นต้น ซ่ึงจะต้อง กำหนดค่ำให้กบั แอตทรบิ วิ ต์ในรูปแบบท่ถี ูกต้อง กำรแสดงผลเวบ็ เพจจงึ จะมีควำมสมบรู ณ์ tag value value value value <img src=\"images/banner.png\" width=\"40\" height=\"50\" alt=\"banner logo\"> name name name name กำรกำหนดคำ่ (Value) ใหก้ บั แอตทริบวิ ต์แบบกำหนดชื่อและกำหนดค่ำ สำมำรถกำหนด ได้ 3 ลักษณะ ได้แก่ ค่ำอยู่ภำยใตเ้ คร่ืองหมำยอญั ประกำศ \"...\" (Double Quote) <img src=\"images/banner.png\"> ค่ำอยู่ภำยใต้เครือ่ งหมำยอญั ประกำศเดี่ยว '...' (Apostrophe) <img src='images/banner.png'>

72 CHAPTER 3: HTML5 คำ่ ไมอ่ ยภู่ ำยใต้เครื่องหมำยใด ๆ ซงึ่ หำกกำหนดค่ำในลักษณะน้ี ค่ำทก่ี ำหนดจะต้องไม่ มชี อ่ งว่ำงหรอื เว้นวรรคในข้อควำม หำกมชี อ่ งว่ำงหรือเว้นวรรค จะทำให้กำรทำงำนผดิ พลำด <img src=images/bannerlogo.png>  <img src=images/banner logo.png>  1.2 บูลีน (Boolean) แอตทริบิวต์สำหรับกำหนดคุณสมบัติแบบ เปิด/ปิด กำรใช้งำน เช่น แท็ก \"input\" ใช้ สำหรับเป็นชอ่ งรับขอ้ มลู สำมำรถใช้แอตทริบิวต์ \"disabled\" (ปิดกำรใชง้ ำน) เพอ่ื กำหนดคุณสมบัติให้ ชอ่ งรับข้อมูลไมส่ ำมำรถใชง้ ำนไดห้ รอื ป้อนขอ้ มลู ไม่ได้ เปน็ ตน้ Boolean <input type=\"text\" name=\"firstName\" size=\"30\" disabled> 2. อลิ เิ มนต์ อิลเิ มนต์ (Elements) คอื องค์ประกอบท้ังหมดของแท็ก ประกอบด้วย แท็กเรมิ่ ตน้ (Start tag) + แอตทริบิวต์ (Attributes) + ค่ำ (Value) + เนื้อหำ (Content) + แท็กสิ้นสุด (End tag) เช่น อิลิเมนต์ P (Paragraph) ใช้สำหรับกำหนดยอ่ หนำ้ ให้กับขอ้ ควำม มอี งคป์ ระกอบคือ แทก็ เปิด ช่อื แท็ก แอตทริบวิ ต์ คำ่ สำหรับแอตทริบวิ ต์ ขอ้ ควำม และแทก็ ปดิ รวมกันเปน็ 1 อลิ เิ มนต์ เป็นตน้ <p style=\"font-size:14px; color:red;\">Hello World !</p> ดงั น้ัน ในเวบ็ เพจจะประกอบดว้ ยอิลิเมนต์จำนวนหลำยอิลเิ มนต์ เมอ่ื นำอิลเิ มนต์ต่ำง ๆ มำ รวมกนั จะสง่ ผลใหก้ ำรแสดงผลเวบ็ เพจมีควำมสมบรู ณ์ พรอ้ มใช้งำน <h1 style=\"font-size:14px;\">Importance of Website</h1> Element: h1 <p> Element: p Websites are also available and accessible 24 hours a day, every Element: ul day of the year Element: img </p> <ul> <li>Importace A</li> <li>Importace B</li> <li>Importace C</li> </ul> <img src=\"images/website.png\" width=\"40\" height=\"50\" alt=\"web\">

CHAPTER 3: HTML5 73 โครงสรา้ งของ HTML5 โครงสร้ำงของ HTML5 คือ คำสั่งหลักที่จะแสดงอยู่ในเว็บเพจทุกหน้ำ ซ่ึงเป็นมำตรฐำนของ เอกสำร HTML ท่ีจะต้องมีรำยละเอียดโครงสร้ำงครบทุกส่วน หำกเว็บเพจขำดโครงสร้ำงส่วนใดส่วน หนึ่ง จะทำให้กำรแสดงผลไม่สมบูรณ์ หรือกำรแสดงผลอำจผิดเพี้ยนไปจำกรูปแบบท่ีกำหนดไว้ โดย รำยละเอียดโครงสร้ำงของ HTML5 เปรยี บเทยี บกบั HTML4.01 มีรำยละเอยี ดดงั นี้ HTML5 HTML4.01 <!doctype html> <!DOCTYPE HTML PUBLIC \"-//W3C//DTD <html> HTML 4.01//EN\" <head> \"http://www.w3.org/TR/html4/strict.dtd\"> <meta charset=\"UTF-8\"> <html> <title>Information Science</title> <head> </head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"> <body> <title>Information Science</title> <h1>Heading 1</h1> </head> <p>My first paragraph</p> <body> </body> <h1>Heading 1</h1> </html> <p>My first paragraph</p> </body> </html> ตำรำงที่ 3.1 รำยละเอียดของคำสัง่ โครงสร้ำง HTML5 Tag Description <!doctype html> กำรประกำศให้เอกสำรอยูใ่ นรปู แบบของ HTML5 <html>…</html> กำหนดจดุ เร่มิ ตน้ และจุดสิ้นสดุ ของเอกสำร HTML <head>...</head> <meta charset=\"UTF-8\"> กำหนดรำยละเอียดข้อมูลเฉพำะของเอกสำร HTML ให้อยู่ภำยใต้แท็ก <head>...</head> เช่น หวั เรอ่ื ง คำสำคัญ คำอธบิ ำย เปน็ ตน้ <title>...</title> กำหนดรูปแบบภำษำท่ีใช้งำนในเว็บเพจ โดย utf-8 คือ รหัสของรูปแบบภำษำ นำนำชำติ จึงส่งผลให้ในเว็บเพจสำมำรถแสดงข้อควำมได้หลำยภำษำ รวมถึง <body>...</body> ภำษำไทย กำหนดหัวเรือ่ งของเวบ็ เพจ ให้อยู่ภำยใต้แทก็ <title>ขอ้ ควำม</title> โดยหัว เร่ืองท่ีดีจะต้องมีควำมยำวข้อควำมไม่เกิน 64 ตัวอักษร และห้ำมกำหนด ลกั ษณะพิเศษให้กบั ขอ้ ควำม เช่น ตวั หนำ ตวั เอียง กำหนดสี เป็นต้น สว่ นแสดงเน้ือหำของเวบ็ เพจ ไดแ้ ก่ ขอ้ ควำม ภำพกรำฟกิ เสียง วดิ ีโอ หรอื ไฟล์ เอกสำรอื่น ๆ ซึ่งเนื้อหำท่ีอยู่ภำยใต้ <body>...</body> จะเป็นส่วนที่ แสดงผลเมื่อเปิดเวบ็ เพจด้วยโปรแกรมแสดงผลเวบ็

74 CHAPTER 3: HTML5 คาสั่งพ้ืนฐานใน HTML5 กำรสร้ำงเว็บเพจด้วย HTML5 ผู้พัฒนำจำเป็นจะต้องทรำบถึงคำส่ังหรือแท็กที่ใช้สำหรับ ควบคุมกำรแสดงผล ไม่ว่ำจะเป็น คำส่ังแสดงข้อควำม แสดงภำพ แสดงตำรำง และคำส่ังอ่ืน ๆ ซึ่ง คำสั่งจะอยู่ในรูปแบบของอิลิเมนต์หรือแท็ก และแอตทริบิวต์ โดยรูปแบบกำรเขียนคำส่ังใน HTML ทุกรุ่น จะใช้ไวยำกรณ์ภำษำอังกฤษ ตัวเลข เคร่ืองหมำย และสัญลักษณ์ สำมำรถใช้อักษรท่ีเป็น ตวั พิมพเ์ ล็กหรอื ตวั พมิ พใ์ หญไ่ ด้ โดยควำมหมำยและกำรใชง้ ำนจะไมเ่ ปลย่ี นแปลง (Case-Insensitive) เช่น <IMG> กับ <img> จะได้ผลลัพธ์เหมือนกัน เป็นต้น ซ่ึงนักพัฒนำเว็บ (Web Developer) ส่วน ใหญ่ จะนิยมใช้อักษรตัวพิมพ์เล็กท้ังหมด และคำสั่งสำหรับแสดงผลเว็บเพจจะต้องอยู่ภำยใต้แท็ก \"<body>…</body>\" มรี ำยละเอยี ดของคำสง่ั ตำ่ ง ๆ ดังน้ี 1. HTML Heading คำส่ังกำหนดข้อควำมหัวข้อหลัก (Heading) ในเว็บเพจ ประกอบด้วยหัวข้อหลัก 6 ระดับ (Heading 1-6) โดยใช้อิลิเมนต์ \"<h1>…</h1>\" ถึง \"<h6>…</h6>\" โดยหัวข้อหลักจะมีขนำด แตกต่ำงกันตำมลำดับ สำมำรถใช้งำนแอตทริบิวต์ \"style\" กำหนดขนำดของข้อควำมได้ ซึ่งหัวเร่ือง หรือชื่อเร่ืองหลักในหน้ำเว็บเพจ ควรกำหนดให้อยู่ในรูปแบบของ Heading เสมอ เน่ืองจำกมีผลต่อ เคร่อื งมือคน้ หำข้อมูล (Search Engine) มรี ูปแบบกำรใช้งำนดงั น้ี HTML5 <!doctype html> <html> <body> <h1>This is a heading 1</h1> <h2>This is a heading 2</h2> <h3>This is a heading 3</h3> <h4>This is a heading 4</h4> <h5>This is a heading 5</h5> <h6>This is a heading 6</h6> </body> </html> Result

CHAPTER 3: HTML5 75 2. HTML Paragraphs คำส่งั กำหนดย่อหน้ำข้อควำม (Paragraphs) สำหรับกำหนดข้อควำมในเวบ็ เพจให้อยู่ในย่อ หน้ำที่กำหนด โดยใช้อิลิเมนต์ \"<p>…</p>\" หำกมีข้อควำมหลำยบรรทัดในอิลิเมนต์ \"<p>\" และ ไม่ได้แทรกคำสั่งสำหรับตัดบรรทัด \"<br>\" ข้อควำมจะถูกรวมให้อยู่ในบรรทัดเดียวกัน และเม่ือ กำหนดย่อหน้ำใหม่ ข้อควำมจะถูกตดั ขนึ้ บรรทดั ใหมโ่ ดยอตั โนมัติ มรี ปู แบบกำรใช้งำนดงั นี้ HTML5 <!doctype html> <html> <body> <p> This paragraph contains many lines. </p> <p>I Love HTML.</p> <p>This is another paragraph.</p> </body> </html> Result 3. HTML Style คำสง่ั กำหนดรปู แบบ (Style) สำหรับกำหนดรปู แบบเพม่ิ เติมใหก้ ับอิลิเมนต์ ซง่ึ จะช่วยเสรมิ คำส่ัง HTML ให้มีรูปแบบที่หลำกหลำยมำกย่ิงข้ึน โดยใช้แอตทริบิวต์ \"style\" แบบกำหนดค่ำ อยู่ใน รูปแบบของสไตล์ชีต (Style Sheets) มีรูปแบบ คือ \"property: value;\" นิยมใช้สำหรับกำหนดสี ข้อควำม ขนำดข้อควำม ลักษณะข้อควำม และสำมำรถกำหนดรูปแบบอื่น ๆ ได้ ซึ่งจะมีรำยละเอียด เพม่ิ เตมิ ในบทเรียนเรื่องสไตล์ชีต มีรูปแบบกำรใชง้ ำนดังน้ี HTML5 <!doctype html> <html> <body> <h1 style=\"color: green; font-size: 28px;\">This is a Heading 1</h1> <p style=\"font-weight: bold;\">This is a paragraph.</p> <p style=\"color: red;\">This is another paragraph.</p> <p style=\"font-size: small;\">This is small text.</p> </body> </html>

76 CHAPTER 3: HTML5 Result 4. HTML Color กำรกำหนดสี (Color) สำหรับกำหนดสีข้อควำมหรือสีพื้นหลัง โดยใช้แอตทริบิวต์ \"style\" แบบกำหนดค่ำสี สำมำรถกำหนดสีด้วยวธิ ีกำรระบุค่ำสใี นรปู แบบตำ่ ง ๆ ประกอบด้วย 1) กำหนดค่ำสี โดยใชช้ ื่อของสี เชน่ red green blue violet tomato เปน็ ตน้ 2) กำหนดคำ่ สีโดยใช้รหสั สีเลขฐำนสบิ หก เช่น #ffffff #000000 #0000ff #ffa500 เป็นต้น และ 3) กำหนดค่ำสีโดยใช้ค่ำสีตำมหลัก RGB (Red Green Blue) เชน่ rgb(255, 0, 0) rgb(60, 179, 113) rgb(238, 130, 238) เป็นตน้ มีรูปแบบ กำรใช้งำน ดังนี้ HTML5 <!doctype html> <html> <body> <h1 style=\"color: green; background-color: yellow;\">Information literacy</h1> <h1 style=\"color: #000000; background-color: #ff0000;\">Information literacy</h1> <h1 style=\"color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);\">Important</h1> <p style=\"color: firebrick; text-align: justify;\">Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html> Result

CHAPTER 3: HTML5 77 5. HTML Text Formatting คำสั่งจดั รูปแบบข้อควำม (Text Formatting) โดยใช้อลิ ิเมนต์สำหรบั กำหนดรปู แบบให้กับ ข้อควำมเพื่อใหม้ ีรูปแบบทีแ่ ตกต่ำงไปจำกเดิม ประกอบดว้ ย ขอ้ ควำมหนำ (Blod, Strong) ข้อควำม เอียง (Italic, Emphasized) ขดี เส้นใตข้ ้อควำม (Underlined, Inserted) เนน้ ขอ้ ควำม (Marked) ขดี เส้นทบั ข้อควำม (Deleted) ข้อควำมตวั เล็ก (Small) ขอ้ ควำมยก (Superscript) และข้อควำม ห้อย (Subscript) มรี ูปแบบกำรใชง้ ำนดังนี้ HTML5 <!doctype html> <html> <body> HTML <b>Bold Text</b> HTML <strong>Strong Text</strong> HTML <i>Italic Text</i> HTML <u>Underlined Text</u> HTML <em>Emphasized Text</em> HTML <mark>Marked Text</mark> HTML <small>Small Text</small> HTML <del>Deleted Text</del> HTML <ins>Inserted Text</ins> HTML^{Superscript Text} HTML_{Subscript Text} </body> </html> Result HTML Bold Text HTML Strong Text HTML Italic Text HTML Underlined Text HTML Emphasized Text HTML Marked Text HTML Small Text HTML Deleted Text HTML Inserted Text HTMLSuperscript Text HTMLSubscript Text

78 CHAPTER 3: HTML5 6. HTML Comments คำสั่งแทรกควำมคิดเห็น (Comment) ลงในเว็บเพจ โดยใช้อิลิเมนต์ \"<!-- … -->\" ควำม คิดเห็นจะเป็นข้อควำมท่ีไม่สำมำรถแสดงในเว็บเพจเม่ือแสดงผลผ่ำนโปรแกรมแสดงผลเว็บได้ แต่ ต้องกำรให้มีอยู่ในเอกสำรเว็บ เช่น ข้อควำมสำหรับเตือนควำมจำ หรือใช้สำหรับซ่อนอิลิเมนต์ที่ไม่ ตอ้ งกำรใหแ้ สดงผลชัว่ ครำว ให้อลิ เิ มนต์อยู่ภำยใตแ้ ทก็ ควำมคดิ เห็น เปน็ ตน้ มีรูปแบบกำรใช้งำนดังน้ี HTML5 <!doctype html> <html> <body> <h1>Information Science</h1> <!-- Remember to add more information --> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <!-- Do not display this at the moment <a herf=\"http://is.udru.ac.th\">IS UDRU</a> --> </body> </html> Result 7. HTML Image คำสั่งแทรกภำพนิ่ง (Image) ลงในเว็บเพจ โดยใช้อิลิเมนต์ \"img\" ใช้งำนร่วมกับแอตทริ บิวต์ \"src\" กำหนดค่ำเป็นตำแหน่งจัดเก็บไฟล์ภำพ \"width\" กำหนดค่ำควำมกว้ำงของภำพ \"height\" กำหนดค่ำควำมสูงของภำพ \"alt\" กำหนดค่ำเป็นคำอธิบำยภำพ และ \"title\" กำหนดค่ำเป็นช่ือภำพ ซง่ึ รปู แบบของภำพน่งิ ที่สำมำรถใชแ้ สดงในเวบ็ เพจ คือ JPG PNG และ GIF มีรูปแบบกำรใชง้ ำนดงั น้ี HTML5 <!doctype html> <html> <body> <h1>HTML Image</h1> <img src=\"images/wall.png\" width=\"400\" height=\"260\" alt=\"wall\" title=\"wallpaper\"> </body> </html>

CHAPTER 3: HTML5 79 Result กำรแสดงภำพใน HTML5 จะใช้อลิ เิ มนต์ \"<figure>…</figure>\" เป็นอลิ ิเมนต์หลกั เพือ่ ระบุ ให้ทรำบว่ำเป็นตำแหน่งของภำพ และใช้อิลิเมนต์ \"<figcaption>…</figcaption>\" เพ่ือกำหนด คำอธิบำยเพ่ิมเติ่มให้กับภำพ ซ่ึงกำรกำหนดอิลิเมนต์ \"<figure>\" และ \"<figcation>\" จะมีผลต่อ เคร่อื งมอื คน้ หำข้อมูล (Search Engine) มรี ูปแบบกำรใชง้ ำนดงั น้ี (ศภุ ชยั สมพำนิช, 2556: 85-86) HTML5 <!doctype html> <html> <body> <h1>Beautiful Flower</h1> <figure> <img src=\"images/flower1.jpg\" width=\"300\" height=\"220\" alt=\"Flower in garden\"> <figcaption>Fig.1 close up of pollen flowers in garden</figcaption> </figure> </body> </html> Result Beautiful Flower Fig.1 close up of pollen flowers in garden

80 CHAPTER 3: HTML5 8. HTML Links คำส่ังกำรเช่ือมโยง (Links) เพื่อเชื่อมโยงไปยังตำแหน่งปลำยทำงท่ีกำหนด โดยใช้อิลิเมนต์ \"<a>…</a>\" ใช้งำนรว่ มกบั แอตทริบวิ ต์ \"href\" กำหนดค่ำเปน็ เวบ็ เพจหรือเวบ็ ไซตท์ ต่ี อ้ งกำรเช่ือมโยง แอตทริบิวต์ \"target\" กำหนดค่ำเป็นรูปแบบกำรเปิดหน้ำต่ำงโปรแกรมแสดงผลเว็บ ได้แก่ \"_blank\" เปิดหน้ำเว็บเพจในหน้ำต่ำงใหม่ \"_parent\" เปิดหน้ำเว็บเพจในหน้ำต่ำงเดิม \"_self\" เปิดหน้ำเว็บเพจ ในหน้ำต่ำงเดิมและเฟรมเดิม และ \"_top\" เปิดหน้ำเว็บเพจในหน้ำต่ำงเดิมโดยจะแสดงแบบเต็ม หนำ้ จอ ซง่ึ สำมำรถใช้ข้อควำมหรอื ภำพนิ่งเปน็ จุดเช่ือมโยงได้ มรี ูปแบบกำรใช้งำนดงั น้ี HTML5 <!doctype html> <html> <body> <a href=\"product.html\">Product</a> <a href=\"http://is.udru.ac.th\">Information Science Website</a> <a href=\"textbook.pdf\">Text Book</a> <a href=\"http://ww.udru.ac.th\" target=\"_blank\">UDRU Website</a> <a href=\"http://ww.udru.ac.th\" target=\"_top\"><img src=\"images/webbanner.png\" width=\"100\" height=\"50\" alt=\"UDRU Web\"></a> </body> </html> Result Product Information Science Website Text Book UDRU Website 9. HTML Table คำสั่งแทรกตำรำง (Table) ลงในเว็บเพจ เพื่อนำเสนอข้อมูลด้วยตำรำง โดยใช้อิลิเมนต์ \"<table>…</table>\" เป็นอิลิเมนต์หลัก ใช้งำนร่วมกับอิลิเมนต์ \"<thead>…</thead>\" สำหรับ กำหนดส่วนของหัวตำรำง \"<tbody>…</tbody>\" สำหรับกำหนดส่วนเน้ือหำของตำรำง \"<tfoot>…</tfoot>\" สำหรับกำหนดส่วนท้ำยของตำรำง \"<tr>…</tr>\" สำหรับกำหนดแถว \"<td>…</td>\" สำหรับกำหนดคอลัมน์ และ \"<th>…</th>\" สำหรับเน้นคอลมั น์ที่เป็นหัวแถว ซึ่งจะ กำหนดคุณสมบัติใหก้ ับตำรำงดว้ ยสไตลช์ ีตแทนกำรใชง้ ำนแอตทรบิ วิ ต์ มรี ูปแบบกำรใชง้ ำนดงั น้ี