การสร้างเว็บไซต์

1 คำนำ หนังสืออิเล็กทรอนิกส์ (E-BOOK) วิชาการสร้างเว็บไซต์ เล่มนี้จัดทำขึ้นเพื่อการเรียนการสอนวิชา โครงการ ระดับชั้นประกาศนียบัตรวิชาชีพ (ปวช.) วิทยาลัยเทคนิคยะลา โดยมีวัตถุประสงค์ที่จะพัฒนาการ เรียนรู้ในสื่อการเรียนการสอนในรูปแบบออนไลน์วิชาการสร้างเว็บไซต์นี้ เพื่อความสะดวกสบายต่อนักเรียน นักศึกษา และครูอาจารย์ ตามหลักสูตรประกาศนวิชาชีพ (ปวช.) เนื้อหาของหนังสืออิเล็กทรอนิกส์ วิชาการสร้างเว็บไซต์ มีด้วยกันทั้งหมด 10 หน่วยการเรียน ประกอบไปด้วย (1) ความรู้เบื้องต้นเกี่ยวกับเก็บไซต์ (2) กระบวนการและโครงสร้างการทำงานของเว็บไซต์ (3) โครงสร้างและไวยกรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ (4) การออกแบบและใช้โปรแกรมเสริมใน การสร้างเว็บไซต์ (5) การติดตั้งและใช้งานโปรแกรม Adobe Dreamwever CC 2018 (6) การสร้างเว็บไซต์ ด้วยโปรแกรม Adobe Dreamwever CC 2018 (7) การจัดการไฟล์ภาพกราฟิก ภาพเคลื่อนไหวและข้อความ ในเว็บไซต์ (8) การเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ (9) การเชื่อมโยงและการทดสอบการทำงานของเว็บไซต์ (10) การขอพื้นที่และการอัพโหลดเว็บไซต์ เพื่อให้ผู้เรียนได้ศึกษา ค้นคว้าหาความรู้ รวมทั้งบูรณาการกับการ ทำงานตามสาขาวิชาต่าง ๆ ต่อไป หนังสืออิเล็กทรอนิกส์เล่มนี้ ผู้จัดทำ (E-BOOK) หวังเป็นอย่างยิ่งว่า หนังสืออิเล็กทรอนิกส์เรื่องการ สร้างเว็บไซต์ เล่มนี้ จะสามารถใช้ศึกษาให้เกิดประโยชน์แก่ผู้เรียน ผู้สอน ตลอดจนผู้สนใจศึกษาทั่วไปได้เป็น อย่างดี หากมีข้อผิดพลาดประการใด ผู้จัดทำขอน้อมรับคำติชมเพื่อเป็นประโยชน์ในการปรับปรุงแก้ไขใน โอกาศต่อไป นางสาวณัฐจิตกานต์ อินทรสาย นางสาวอรอุมา อินทนิล นางสาวชาคริยา มุนชี ผู้จัดทำโครงการ

2 สารบัญ หน้า หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์ 5 1.1 ความหมายและความสำคัญของเว็บไซต์ 6 1.2 ที่มาของเว็บไซต์ 7 1.3 ประเภทของเว็บไซต์ 8 1.4 คำศัพท์พื้นฐานที่เกี่ยวข้องกับเว็บไซต์ 12 หน่วยที่ 2 กระบวนการและโครงสร้างการทำงานของเว็บไซต์ 16 2.1 การบวนการเตรียมข้อมูลในการสร้างเว็บไซต์ 17 2.2 กระบวนการออกแบบและการเลือกใช้สีในเว็บไซต์ 18 2.3 กระบวนการพัฒนาและเผยแพร่เว็บไซต์ 26 2.4 โครงสร้างการทำงานของเว็บไซต์ 26 2.5 การออกแบบโครงสร้างการทำงานของเว็บไซต์ 29 หน่วยที่ 3 โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ 31 3.1 โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ 32 3.2 คำสั่งภาษา HTML พื้นฐานในการสร้างเว็บไซต์ 36 3.3 โปรแกรมภาษาที่นิยมใช้ในการพัฒนาเว็บไซต์ 42 หน่วยที่ 4 การออกแบบและใช้โปรแกรมกราฟิกเสริมในการสร้างเว็บไซต์ 47 4.1 การออกแบบส่วนประกอบของเว็บไซต์ 48 4.2 โปรแกรมกราฟิกที่นิยมใช้ในการออกแบบเว็บไซต์ 49 4.3 การใช้โปรแกรม Adobe Photoshop CC 2018 52 4.4 การบันทึกไฟล์ภาพกราฟิกสำหรับเว็บไซต์ 60 4.5 การใช้โปรแกรม Adobe Animate CC 2018 62 4.6 การบันทึกไฟล์ภาพเคลื่อนไหวสำหรับเว็บไซต์ 67 หน่วยที่ 5 การติดตั้งและใช้งานโปรแกรม Adobe Dreamwever CC 2018 70 5.1 รู้จักกับโปรแกรม Adobe Dreamwever CC 2018 71 5.2 การติดตั้งโปรแกรม Adobe Dreamwever CC 2018 73 5.3 ส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamwever CC 2018 76

3 หน้า หน่วยที่ 6 การสร้างเว็บไซต์ด้วยโปรแกรม Adobe Dreamwever CC 2018 81 6.1 การใช้งานโปรแกรม Adobe Dreamwever CC 2018 82 6.2 การสร้างไซต์ 85 6.3 การจัดการโครงร่างเว็บไซต์ด้วยตาราง 88 6.4 การตั้งค่าการแสดงผลเว็บไซต์ 93 6.5 การบันทึกเอกสารเว็บไซต์ 94 หน่วยที่ 7 การจัดการไฟล์ภาพกราฟิก ภาพเคลื่อนไหว และข้อความในเว็บไซต์ 97 7.1 การจัดการไฟล์ภาพกราฟิกในเว็บไซต์ 98 7.2 การจัดการไฟล์ภาพเคลื่อนไหวในเว็บไซต์ 102 7.3 การจัดการข้อความในเว็บไซต์ 104 หน่วยที่ 8 การเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ 110 8.1 เครื่องมือในการเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ 111 8.2 การกำหนดพฤติกรรมการแสดงผลของภาพในเว็บไซต์ 112 8.3 การเพิ่มวิดีโอ YouTube ในเว็บไซต์ 120 หน่วยที่ 9 การเชื่อมโยงและการทดสอบการทำงานของเว็บไซต์ 126 9.1 รู้จักกับการเชื่อมโยงเว็บไซต์ 127 9.2 การเชื่อมโยงเว็บไซต์ 128 9.3 การตรวจสอบการเชื่อมโยงเว็บไซต์ 131 หน่วยที่ 10 การขอพื้นที่และการอัพโหลดเว็บไซต์ 133 10.1 การขอพื้นที่ในการอัพโหลดเว็บไซต์ 134 10.2 โปรแกรมที่ใช้ในการอัพโหลดเว็บไซต์ 135 10.3 การอัพโหลดเว็บไซต์ 135

4 ส

5 ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์ หัวข้อเรื่อง (Topics) 1.1 ความหมายและความสําคัญของเว็บไซต์ 1.2 ที่มาของเว็บไซต์ 1.3 ประเภทของเว็บไซต์ 1.4 คำศัพท์พื้นฐานที่เกี่ยวข้องกับเว็บไซต์ แนวคิดสําคัญ (Main ldea) ปัจจุบันคนส่วนใหญ่มักนิยมใช้อินเทอร์เน็ตในการสืบคันข้อมูลจากแหล่งข้อมูลต่าง ๆ เว็บไซต์จึงเป็น อีกหนึ่งทางเลือกที่หน่วยงานองค์กรต่าง ๆ นิยมสร้างขึ้นมาเพื่อจัดเก็บข้อมูล ประชาสัมพันธ์ข้อมูล เป็นต้น ก่อนที่จะสร้างเว็บไซต์สิ่งสําคัญที่ต้องเรียนรู้ในหน่วยนี้คือความรู้เบื้องตันเกี่ยวกับเว็บไซต์ ซึ่งประกอบด้วย ความหมายและความสําคัญของเว็บไซต์ ที่มาของเว็บไซต์ ประเภทของเว็บไซต์ และคําศัพท์พื้นฐานที่เกี่ยวข้อง กับเว็บไซต์ เพื่อเป็นความรู้พื้นฐานในการออกแบบและพัฒนาเว็บไซต์ต่อไป สมรรถนะทางย่อย (Element of Competency) แสดงความรู้เบื้องต้นเกี่ยวกับเว็บไซต์ จุดประสงค์เชิงพฤติกรรม (Behavioral Objectives) 1. อธิบายความหมายและความสําคัญของเว็บไซต์ได้ 2. บอกที่มาของเว็บไซต์ได้ 3. จําแนกประเภทของเว็บไซต์ได้ 4. บอกคําศัพท์พื้นฐานที่เกี่ยวข้องกับเว็บไซต์ได้

6 1.1 ความหมายและความสำคัญของเว็บไซต์ เนื้อหาสาระ (Content) เว็บไซต์(Website) หมายถึง เอกสารหน้าเว็บเพจหลายหน้าที่เชื่อมโยงกัน ส่วนใหญ่จัดทําขึ้นเพื่อเสนอ ข้อมูลผ่านอินเทอร์เน็ต หน้าแรกของเว็บไซต์เรียกว่า โฮมเพจ (Home Page) เว็บไซต์ให้บริการ ต่อผู้ใช้ฟรีแต่ในขณะเดียวกันบางเว็บไซต์จําเป็นต้องมีการสมัครสมาชิกและเสียค่าบริการเพื่อที่จะดูข้อมูล หรือดาวน์โหลด ข้อมูลในเว็บไซต์นั้น ซึ่งได้แก่ข้อมูลทางวิซาการ ข้อมูลตลาดหลักทรัพย์ ภาพยนตร์ เพลง หรือข้อมูลสื่ออื่น ๆ ผู้ทำเว็บไซต์มีหลากหลายระดับ ตั้งแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดับเว็บไซด์สำหรับ ธุรกิจหรือองค์กรต่าง ๆ การเรียกดูเว็บไชต์โดยทั่วไปนิยมเรียกดูผ่านซอฟต์แวร์ในลักษณะของเว็บบราวเซอร์ ในยุคปัจจุบันเว็บไซต์ได้กลายเป็นสื่อที่มีความสําคัญอย่างมาก ไม่ว่าจะเป็นเรื่องของการโฆษณาและ ประชาสัมพันธ์หน่วยงาน การติดต่อประสานงาน การเก็บรวบรวมข้อมูล การนําเสนอข้อมูล ทั้งนี้เนื่องจาก คุณสมบัติที่สามารถนําเสนอ เผยแพร่ ข้อมูลข่าวสารได้อย่างไร้ขีดจํากัด ทั้งในเรื่องเวลาและระยะทาง โดย สามารถคลิกเปิดดูได้ตลอด 24 ชั่วโมง ไม่ว่าจะอยู่ในโลกก็ตาม ด้วยข้อดีดังกล่าว บริษัท ห้าง ร้าน สถานศึกษา สถานประกอบการเกือบทุกแห่งทั้งภาครัฐและเอกชน หรือแม้แต่บุคคลทั่วไป ต่างก็มีความต้องการจัดทํา เว็บไซต์ขึ้นเพื่อเป็นช่องทางการสื่อสารรูปแบบใหม่และเพื่อประโยชน์ในการเผยแพร่ข้อมูล ข่าวสาร ไ ปสู่ กลุ่มเป้าหมาย เช่น การโฆษณาขายสินค้าและบริการในรูปแบบต่าง ๆ ที่มีจุดมุ่งหมายในเชิงธุรกิจ หรือ การใช้ เว็บไซต์เป็นช่องทางเผยแพร่ข้อมูล ข่าวสารขององค์กร เพื่อประชาสัมพันธ์องค์กรให้เป็นที่รู้จักเพื่อหวังผลใน การสร้างภาพลักษณ์ขององค์กรให้เป็นที่ยอมรับ ซึ่งเว็บไชต์เป็นสื่อที่มีประสิทธิภาพเป็นอย่างมาก ในการสนอง ภารกิจดังกล่าว รูปที่ 1.1 เว็บไซต์ในงานธุรกิจ https://www.google.com/searchq

7 1.2 ที่มาของเว็บไซต์ เว็บไซต์ เซอร์ทิโมที จอห์น เบอร์เนิร์ส-ลี (Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA) เกิดเกิดเมื่อวันที่ 8 มิถุนายน พ.ศ. 2498 เป็นผู้คิดค้นและประดิษฐ์เวิลด์ไวด์เว็บ โดยเริ่มจากการจัดทําโครงการ หนึ่งที่ใช้แนวคิด “ข้อความหลายมิติ” หรือไฮเปอร์เท็กซ์ (Hypertext) มาใช้สําหรับการแลกเปลี่ยนข้อมูล ระหว่างนักวิจัยด้วยกัน ขณะที่ เซอร์ทิโมที จอห์น เบอร์เนิร์ส-ลี ทํางานอยู่ที่ “เซิร์น” เขาให้สร้างระบบต้นแบบ ไว้แล้วเรียกว่าเอ็นไควร์ (Enquire) หลังจากออกจากเซิร์น เมื่อ พ.ศ. 2523 เบอร์เนิร์ส-ลี ไปร่วมงานกับ บริษัท “อิมเมจคอมพิวเตอร์ซิสเต็ม” ของจอห์น พุล เบอร์เนิร์ส-ลี และได้กลับมาทํางานที่เซิร์นอีกครั้งหนึ่งเมื่อ พ.ศ. 2527 ในตําแหน่งสิกขบัณฑิต (Fellow) เมื่อถึง พ.ศ. 2532 เซิร์นได้กลายเป็นศูนย์อินเทอร์เน็ตที่ใหญ่ที่สุดใน ยุโรป ซึ่งเบอร์เนิร์ส-ลี ได้เล็งเห็นโอกาสในการใช้ “ข้อความหลายมิติ” ผนวกเข้ากับอินเทอร์เน็ต โดยเอา ความคิดเรื่องข้อความหลายมิตินี้เชื่อมต่อเข้ากับความคิด “ทีซีพี” และ “DNS”จึงกลายเป็น “เวิลด์ไวด์เว็บ” และได้ใช้ความคิดเดียวกับระบบเอ็นไควร์มาใช้สร้างเวิลด์ไวด์เว็บ ซึ่งได้ออกแบบพัฒนาสร้างเว็บบราวเซอร์และ เอดิเตอร์ตัวแรกของโลก ชื่อว่าเวิลด์ไวด์เว็บ “World Wide Web” บนระบบปฏิบัติการเน็กซ์สเต็ป (Nextstep) ของสตีฟ จอบส์และสร้างเว็บเซิร์ฟเวอร์ขึ้น เรียกว่า httpd (ย่อ มาจาก HyperText Transfer Protocal Daemon) เว็บไซต์แรกสุดสร้างขึ้นที่เซิร์นนําขึ้นออนไลน์ เมื่อวันที่ 6 สิงหาคม พ.ศ. 2534 ให้คําอธิบายว่าเวิลด์ไวด์เว็บคืออะไร การที่จะ เป็นเจ้าของบราวเซอร์ทําได้อย่างไร และ จะติดตั้งเว็บเซิร์ฟเวอร์ได้ อย่างไร นอกจากนี้ยังนับเป็นเว็บไดเร็กทอรีอันแรกของโลกด้วย เนื่องจากเบอร์เบิร์ส-ลีดูแลรายชื่อของเว็บไซต์อื่น ๆ ทั้งหมด นอกจากเว็บไซต์ของตนเองด้วย ในปี พ.ศ. 2537 เบอร์เนิร์ส-ลี ได้ ก่อตั้งกลุ่มบริษัทเวิลด์ไวด์เว็บ(W3C) ขึ้นที่สถาบันเทคโนโลยี แมสซาชูเซตส์หรือเอ็มไอที ประกอบด้วยบริษัท หลายบริษัทที่ ยินยอมพร้อมใจมาร่วมสร้างมาตรฐานและข้อเสนอแนะ สําหรับใช้ เป็นหลักในการปรับปรุงคุณภาพของเว็บในเดือนธันวาคม พ.ศ. 2547เบอร์เนิร์ส-ลี ยอมรับตําแหน่งประธานสาขาวิทยาศาสตร์ คอมพิวเตอร์ที่คณะอิเล็กทรอนิกส์และวิทยาศาสตร์คอมพิวเตอร์ ของ มหาวิทยาลัยเซาท์แธมตันสหราชอาณาจักรเพื่อดําเนิน โครงการใหม่ “นั่นคือ“ซีแมนติกเว็บ” (Semantic Web) เบอร์เนิร์ส-ลี ไม่ทําการจดทะเบียนลิขสิทธิ์การคิดค้น รวมทั้งไม่เรียกค่าตอบแทนหรือรางวัลจากองค์กรใด ดังนั้น กลุ่มบริษัทเวิลด์ไวด์เว็บจึงตัดสินใจไม่คิดมูลค่าใด ๆ จากการนํามาตรฐานของกลุ่มบริษัทไปใช้ทั้งนี้เพื่อให้ผู้ประกอบการทุกรายยอมรับมาตรฐานเดียวกันได้ บนพื้นฐานทางเทคโนโลยีต่อไป

8 1.3 ประเภทของเว็บไซต์ เว็บไซต์ การออกแบบเว็บไซต์เพื่อใช้ในงานต่าง ๆ ให้เหมาะสมและเกิดประโยชน์สูงสุดนั้นจําเป็นอย่างยิ่ง ที่จะต้องเข้าใจถึงลักษณะของเว็บไซต์แต่ละประเภทเพื่อที่จะสามารถแยกแยะข้อแตกต่างของเว็บไซต์แต่ละ ประเภทและนํามาออกแบบเว็บไซต์ให้ตรงตามความต้องการของผู้ใช้ โดยเว็บไซต์ในปัจจุบันสามารถ แบ่งเป็น กลุ่มใหญ่ ๆ ได้ 9 ประเภท ตามลักษณะของเนื้อหาและรูปแบบของเว็บไซต์ ได้แก่ 1.3.1 เว็บธุรกิจหรือการตลาด (Business / Marketing Site) เว็บธุรกิจเป็นเว็บไซต์ที่มักสร้างขึ้นโดยองค์กรธุรกิจต่าง ๆ มีจุดมุ่งหมายหลักเพื่อประชาสัมพันธ์สินค้า และบริการ โดยเนื้อหาส่วนใหญ่จะนําเสนอข้อมูลที่มีความน่าสนใจและตรงใจกลุ่มเป้าหมายมากที่สุด ทั้งนี้เพื่อ ผลกําไรทางธุรกิจนั่นเอง รูปที่ 1.3 ตัวอย่างเว็บธุรกิจหรือการตลาด (ที่มา : https//shopee.co.th) 1.3.2 เว็บหน่วยงานการศึกษา (Education Site) เว็บหน่วยงานการศึกษาเป็นเว็บที่สร้างขึ้นเพื่อเผยแพร่ความรู้และให้โอกาสในการ ค้นคว้าหาข้อมูล เพื่อการศึกษาโดยจะให้บริการข้อมูลเกี่ยวกับการเรียนรู้ทั้งหมด เว็บไซต์ที่ให้บริการ เรียนรู้แบบออนไลน์ที่ เรียกว่า อี-เลิร์นนิง (e-Learning) รวมถึงเว็บไซต์ที่สอนหรือให้ความรู้เกี่ยวกับเรื่องต่าง ๆ เช่นเว็บไซต์การ ทําอาหารเว็บไซต์เขียนโปรแกรม ฯลฯ รูปที่ 1.4 ตัวอย่างเว็บหน่วยงานการศึกษา (ที่มา : http://www2.kmutt.ac.th)

9 1.3.3 เว็บบันเทิง (Entertainment Site) เว็บบันเทิงเป็นเว็บที่นําเสนอและให้บริการต่าง ๆ เพื่อเสริมสร้างความบันเทิงเช่นดนตรีภาพยนตร์ ดารากีฬาความรักบทกลอนการ์ตูนเรื่องขําขันเว็บประเภทนี้อาจมีรูปแบบที่ใช้เทคโนโลยีมัลติมีเดียทีน่าตื่นตา ตื่นใจมากกว่าเว็บประเภทอื่น รูปที่ 1.5 ตัวอย่างเว็บบันเทิง (ที่มา : http://www.mthia.com/#tab-women) 1.3.4 เว็บท่า (Portal Site) เว็บท่าเป็นเว็บที่ให้บริการที่เกี่ยวกับเรื่องราวที่มีสาระและความบันเทิงหลากหลายประเภทเช่นดูหนัง ฟังเพลงดูดวงท่องเที่ยวไอทีเกมสุขภาพหรืออื่น ๆ และเป็นแหล่งแลกเปลี่ยนความคิดเห็นของผู้คนในสังคมใน เรื่องเกี่ยวกับประเด็นต่าง ๆ ซึ่งเรียกว่าเว็บชุมชน (Community Webs) คือเว็บที่ให้บริการพื้นที่แก่กลุ่มคนผู้ที่ มีความสนใจในเรื่องเดียวกันได้เข้ามาแลกเปลี่ยนและแสดงความคิดเห็นกัน รูปที่ 1.6 ตัวอย่างเว็บท่า (ที่มา : https://www.sanook.com)

10 1.3.5 เว็บข่าว (News Site) เว็บข่าวเป็นเว็บที่สร้างขึ้นโดยองค์กรข่าวหรือสถาบันสื่อสารมวลชนต่าง ๆ เพื่อนําเสนอข่าวและสาระ ที่เป็นการสรุปใจความสําคัญซึ่งช่วยให้ผู้ใช้สามารถค้นหาข้อมูลและติดตามข่าวสารได้ทุกที่ทุกเวลา แม้ว่าจะอยู่ ที่ใดก็ตามเช่นสถานีโทรทัศน์สถานีวิทยุหนังสือพิมพ์นิตยสารวารสารหรือแม้กระทั่ง กระทรวงทบวงกรมต่าง ๆ เป็นต้น รูปที่ 1.7 ตัวอย่างเว็บข่าว (ที่มา : https://www.thairath.co.th/news) 1.3.6 เว็บข้อมูล (Information Site) เว็บข้อมูลเป็นเว็บที่ให้บริการเกี่ยวกับการสืบค้นข้อมูลข่าวสารหรือข้อเท็จจริงต่าง ๆ เป็นช่องทางให้ประชาชน หรือกลุ่มบุคคลที่สนใจได้เข้ามาศึกษาค้นคว้าข้อมูลที่เกี่ยวข้องกับองค์กรของตนได้อีกทั้งยังเป็นการสร้างโอกาส ในการประชาสัมพันธ์ให้แก่ประชาชนในสังคม รูปที่ 1.8 ตัวอย่างเว็บข้อมูล (ที่มา : https://www.vec.go.th)

11 1.3.7 เว็บองค์กรที่ไม่แสวงหาผลกําไร (Non-profit Organization Site) เว็บองค์กรที่ไม่แสวงหาผลกําไรเป็นเว็บที่สร้างขึ้นโดยกลุ่มบุคคลหรือองค์กรต่าง ๆ ที่มีนโยบายในการ สร้างสรรค์ช่วยเหลือสังคมโดยไม่หวังผลกําไรหรือค่าตอบแทนเช่นสมาคมชมรมมูลนิธิโครงการต่าง ๆ โดยมี จุดประสงค์เฉพาะที่แตกต่างกันเช่นพิทักษ์สิ่งแวดล้อมเพื่อทําความดี สร้างสรรค์สังคมรณรงค์เป็นต้น รูปที่ 1.9 เว็บองค์กรที่ไม่แสวงหาผลกําไร (ที่มา : https://www.vec.go.th) 1.3.8 เว็บส่วนตัว (Personal Site) เว็บส่วนตัวเป็นเว็บที่จัดทําขึ้นด้วยเหตุผลที่แตกต่างกันเช่นแนะนํากลุ่มเพื่อนโชว์รูปภาพแสดงความ คิดเห็นเขียนไดอารี่ประจําวันนําเสนอผลงานถ่ายทอดประสบการณ์เกี่ยวกับสิ่งที่เชี่ยวชาญหรือน่าสนใจ โดย ทั้งหมดนี้อาจทําเป็นเว็บไซต์หรือเป็นเพียงเว็บเพจหน้าเดียวก็ได้ รูปที่ 1.10 ตัวอย่างเว็บส่วนตัว (ที่มา : https://www.vec.go.th)

12 1.4 คำศัพท์พื้นฐานที่เกี่ยวข้องกับเว็บไซต์ เว็บไซต์ 1.3.9 เว็บสังคมออนไลน์ (Social Network) เว็บสังคมออนไลน์เป็นเว็บที่รวบรวมข้อมูลของหลาย ๆ บุคคลเชื่อมโยงถึงกันทําความรู้จักกันผ่าน ระบบอินเทอร์เน็ตโดยเว็บไซต์เหล่านี้จะมีพื้นที่ให้บุคคลเข้ามาทําความรู้จักกันมีเครื่องมือต่าง ๆ เพื่ออํานวย ความสะดวกในการสร้างเครือข่ายสร้างเนื้อหาตามความสนใจของผู้ใช้สังคมออนไลน์ช่วยให้คนสามารถรู้จักกัน แลกเปลี่ยนความคิดเห็นและความสนใจร่วมกันได้ง่ายขึ้นเช่น Facebook, MySpace, Linkedin, Line เป็น ต้น รูปที่ 1.11 ตัวอย่างเว็บสังคมออนไลน์ (ที่มา : https://www.vec.go.th) ก่อนที่จะออกแบบและพัฒนาเว็บไซต์นั้นจําเป็นต้องมีความรู้เกี่ยวกับคําศัพท์ต่าง ๆ ที่เกี่ยวข้อง เพื่อ เป็นพื้นฐานความรู้ในการสร้างเว็บไซต์ ซึ่งมีคําศัพท์ที่สําคัญดังนี้ 1. โฮมเพจ (Home Page) หมายถึง เว็บเพจหน้าแรกที่ปรากฏของแต่ละเว็บไซต์ โดยเป็นทางเข้าหลัก ของเว็บไซต์ เมื่อเปิดเว็บไซต์นั้นขึ้นมาจะเป็นหน้าแรกที่ปรากฏขึ้นในโปรแกรมเว็บบราวเซอร์เปรียบเสมือน หน้าปกหนังสือ 2. เว็บเพจ (Web Page) หมายถึง หน้าเอกสารหนึ่งหน้าภายในเว็บเพจประกอบด้วยข้อความ ภาพ ลิงก์ เว็บเพจแต่ละหน้าจะเชื่อมโยงกันเพื่อให้เรียกดูเอกสารหน้าอื่น ๆ ที่เกี่ยวข้องได้อย่างสะดวก เปรียบเสมือนเอกสารและหน้าในหนังสือ 1 เล่ม 3. เว็บไซต์ (Website) หมายถึง หน้าเว็บเพจหลายหน้าซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ เปรียบเสมือนแหล่งเก็บรวบรวมข้อมูลของหน่วยงาน องค์กร ถูกจัดเก็บไว้ใน www (เวิลด์ไวด์เว็บ) 4. เว็บบราวเซอร์ (Web Browser) หมายถึง โปรแกรมสําหรับเรียกดูเว็บไซต์โดยจะแปลคําสั่ง HTML แล้วประมวลผลแสดงผลออกมาเป็นเว็บเพจเช่น Google Chrome, Internet Explorer, Mozilla Firefox, Safari, Opera, Netscape Navigator tuu 5. เว็บเซิร์ฟเวอร์ (Web Server) หมายถึง เครื่องคอมพิวเตอร์ซึ่งให้บริการเว็บไซต์ ซึ่งผู้ใช้เรียกชม หน้าเว็บไซต์ได้โดยใช้โปรโตคอล HTTP ผ่านทางเว็บบราวเซอร์

13 6. URL (Uniform Resource Locator) หมายถึง ข้อความที่บอกตําแหน่งของข้อมูลในอินเทอร์เน็ต ไม่ว่าจะเป็นเว็บเพจไฟล์ประเภทต่าง ๆ เช่นรูปภาพเสียงเป็นต้น URL ประกอบด้วยโปรโตคอลโดเมนเนม (Domain Name (ไดเร็กทอรีที่เก็บไฟล์)) ชื่อไฟล์เช่น http://www.reallyhost.com เป็นต้น 7. www (World Wide Web) เป็นบริการข้อมูลโดยข้อมูลของ www จะอยู่ในรูปเอกสารแบบ ไฮเปอร์เท็กซ์ (Hypertext) ซึ่งภายในเอกสารจะมีจุดเชื่อมโยง (Link) ไปยังเอกสารอื่น ๆ ที่เกี่ยวข้องเอกสาร ต่าง ๆ ที่เชื่อมโยงกันเหมือนใยแมงมุม เป็นที่มาของคําว่าเว็บ (Web) 8. อัพโหลด (Upload) และดาวน์โหลด (Download) หมายถึง การส่งผ่านข้อมูลทางอิเล็กทรอนิกส์ ระหว่างคอมพิวเตอร์ 2 เครื่อง การส่งข้อมูล แฟ้มข้อมูล หรือโปรแกรมจากคอมพิวเตอร์เครื่องที่ใช้อยู่ขึ้นไป เก็บไว้ในเครื่องแม่ข่าย (Server) เรียกว่า การอัพโหลด (Upload) ขณะเดียวกันการดึงข้อมูลจากแฟ้มข้อมูล ที่ เก็บอยู่ในเครื่องแม่ข่าย (Server) ลงมาเก็บไว้ในเครื่องคอมพิวเตอร์ที่ใช้งานอยู่ เรียกว่า การดาวน์โหลด (Download) 9. โดเมนเนม (Domain Name) หมายถึง ชื่อเว็บไซต์ซึ่งโดยปกติเป็นชื่อที่สื่อถึงหน่วยงานองค์กรที่ ตั้งขึ้นเพื่อให้จดจําและนําไปใช้งานได้ง่ายโดยแบ่งออกเป็น 2 ประเภท คือ (1) โดเมนเนม 2 ระดับประกอบด้วย www. ชื่อโดเมน. ประเภทของโดเwww.sanook.corn ประเภทของโดเมน คือ ค าย่อขององค์กร โดยประเภทขององค์กรที่พบบ่อย ๆ มีดังนี้ * com คือ บริษัทหรือองค์กรพาณิชย์ * org คือ องค์กรเอกชนที่ไม่แสวงผลก าไร * .net คือ องค์กรที่เป็นเกตเวย์หรือจุดเชื่อมต่อเครือข่าย * .edu คือ สถาบันการศึกษา * .gov คือ องค์กรของรัฐบาล * mil คือ องค์กรทางทหาร (2) โดเมนเนม 3 ระดับประกอบด้วย www. ชื่อโดเมน.ประเภทของโดเมน.ประเทศอย่างเช่น www.google.co.th ประเภทขององค์กรที่พบบ่อยคือ * .co คือ บริษัทหรือองค์กรพาณิชย์ * .ac คือ สถาบันการศึกษา * .go คือ องค์กรของรัฐบาล * .net คือ องค์กรที่ให้บริการเครือข่าย * .or คือ องค์กรเอกชนที่ไม่แสวงผลกําไร ตัวย่อของประเทศที่ตั้งขององค์กร * .th คือ ประเทศไทย * .cn คือ ประเทศจีน * .Uk คือ ประเทศอังกฤษ * .jp คือ ประเทศญี่ปุ่น

14 ตัวอย่างการเรียกใช้ข้อมูลเว็บไซต์ผ่านโปรแกรมเว็บบราวเซอร์โดยพิมพ์ URL (Uniform Resource Locator) ซึ่งเป็นที่อยู่ของเว็บไซต์ที่ผู้ใช้บริการจะเข้าไปเรียกดูข้อมูล ซึ่งรูปแบบของ URL จะประกอบด้วย 3 ส่วนหลัก ๆ ได้แก่ 1. ส่วนของชื่อโปรโตคอล http, https 2. ส่วนของชื่อโดเมนเช่น http://www.sisat.ac.th/main/index.php 3. ส่วนของชื่อไฟล์เว็บเพจ เช่น ไฟล์นามสกุล. php, ไฟล์นามสกุล. html ซึ่งก่อนจะถึงไฟล์ เอกสาร นั้นบางครั้งอาจต้องผ่านไดเร็กทอรี รูปที่ 1.12 ตัวอย่างการเรียกใช้ข้อมูลผ่านโปรแกรมเว็บเบราเซอร์ (ที่มา: http://www.sisat.ac.th./main/index.php) จากรูปที่ 1.12 http://www.sisat.ac.th/main/index.php อธิบายให้เข้าใจได้ดังนี้ - http คือ ชื่อของโปโตคอล ซึ่งในตัวอย่างจะเป็น Hypertext Transfer Protocol - www คือ เครือข่ายWord Wide Web - sisat.ac.th คือ ชื่อของเว็บไซต์ที่ตั้งขึ้น เรียกว่า โดเมนเนม (Domain Name) .ac คือ หน่วยงาน ทาง การศึกษา .th คือประเทศไทย - index.php คือ ชื่อไฟล์เว็บเพจ ซึ่งประกอบด้วยเนื้อหาความรู้หรือข้อมูลต่าง ๆ

15

16 แนวคิดสําคัญ (Main Idea) 2.1 กระบวนการเตรียมข้อมูลในการสร้างเว็บไซต์ 2.2 กระบวนการออกแบบและการเลือกใช้สีในเว็บไซต์ 2.3 กระบวนการพัฒนาและเผยแพร่เว็บไซต์ 2.4 โครงสร้างการทำงานของเว็บไซต์ 2.5 การออกแบบโครงสร้างการทํางานของเว็บไซต์ ในการสร้างเว็บไซต์ให้ประสบผลสำเร็จจะต้องมีกระบวนการในการจัดเตรียมข้อมูลในการสร้าง เว็บไซต์ กระบวนการออกแบบและการเลือกใช้สีในเว็บไซต์ที่เหมาะสมเพราะการเลือกใช้สีที่เหมาะสมจะช่วย ส่งเสริม ให้เว็บไซต์มีความน่าเชื่อถือมากยิ่งขึ้น นอกจากนั้น การศึกษาโครงสร้างการทำงานของเว็บไซต์ และ การออกแบบโครงสร้างการทํางานของเว็บไซต์จะทำให้มองเห็นลักษณะภาพรวมของการทำงานของ เว็บไซต์ ซึ่งจะส่งผลให้การออกแบบเว็บไซต์ทำได้ง่ายขึ้น 1. แสดงความรู้เกี่ยวกับกระบวนการเตรียมข้อมูลในการสร้างเว็บไซต์ 2. แสดงความรู้เกี่ยวกับกระบวนการออกแบบและการเลือกใช้สีในเว็บไซต์ 3. แสดงความรู้เกี่ยวกับกระบวนการพัฒนาและเผยแพร่เว็บไซต์ 4. แสดงความรู้เกี่ยวกับโครงสร้างการทำงานของเว็บไซต์ 5. แสดงความรู้เกี่ยวกับการออกแบบโครงสร้างการทำงานของเว็บไซต์ 1. อธิบายกระบวนการเตรียมข้อมูลในเว็บไซต์ได้ 2. อธิบายกระบวนการออกแบบและการเลือกใช้สีในเว็บไซต์ได้ 3. อธิบายกระบวนการพัฒนาและเผยแพร่เว็บไซต์ได้ 4. อธิบายโครงสร้างการทำงานของเว็บไซต์ได้ 5. ออกแบบโครงสร้างการทำงานของเว็บไซต์ได้ หัวข้อเรื่อง (Topics) กระบวนการและโครงสร้างการทำงานของเว็บไซต์ สมรรถนะย่อย (Element of Cornpetency) จุดประสงค์เชิงพฤติกรรม (Behavioral Objectives)

17 2.1 กระบวนการเตรียมข้อมูลในการสร้างเว็บไซต์ เนื้อหาสาระ (Content) เว็บไซต์เป็นแหล่งรวบรวมข้อมูลที่เกี่ยวข้องกับหน่วยงาน ร้านค้า หรือองค์กรต่าง ๆ ดังนั้นในการสร้าง เว็บไซต์จะต้องมีกระบวนการเตรียมข้อมูลต่าง ๆ เพื่อให้ได้ข้อมูลที่มีความถูกต้อง เหมาะสม และเพียงพอต่อ การสร้างเว็บไซต์โดยกระบวนการในการเตรียมข้อมูลในการสร้างเว็บไซต์ มีดังนี้ 2.1.1 เตรียมข้อมูลหรือเนื้อหาคร่าว ๆ ที่เกี่ยวข้องกับเว็บไซต์ที่เกี่ยวข้องกับเว็บไซต์ เพื่อให้การ สร้างเว็บไซต์ตรงตามจุดประสงค์มากที่สุด ข้อมูลสำคัญที่ผู้คนคาดหวังว่าจะได้เห็นเมื่อเข้าชมเว็บไซต์ประกอบด้วยรายละเอียดของผลิตภัณฑ์ ซึ่ง เป็นรายละเอียดตามจริง ข้อมูลเกี่ยวกับหน่วยงาน องค์กร บริษัท หรือสถานที่ผลิตจำหน่ายข้อมูลสำหรับการ ติดต่อ เช่น ชื่อ หมายเลขโทรศัพท์ ช่องทางการติดต่ออื่น ๆ ข่าวสารความคืบหน้า เรื่องราวอัพเดตที่น่าสนใจ คำถามยอดนิยมต่าง ๆ หากการเตรียมข้อมูลต่าง ๆ เรียบร้อยก่อนจะทำให้การสร้างเว็บไซต์เสร็จได้อย่าง รวดเร็ว และง่ายในการสร้างเว็บไซต์มากขึ้น นอกจากนั้นยังสามารถปรับแต่งการนำเสนอข้อมูลให้ผู้ที่เข้ามา เยี่ยมชมเว็บไซต์รู้สึกดีและประทับใจจนอยากกลับมาเยี่ยมชมเว็บไซต์ในภายหลังได้ 2.1.2 การแยกประเภทข้อมูลออกเป็นกลุ่มย่อยเพื่อให้ง่ายต่อการสร้างเว็บไซต์ หลังจากที่ได้รวบรวมข้อมูลทั้งหมดมาแล้วต้องแยกข้อมูลและกำหนดผังงานให้กับเว็บไซต์จัด เรียงลำดับความสำคัญของข้อมูลต่าง ๆ แยกข้อมูลไปในแต่ละหน้าตามความต้องการ ดังตัวอย่างการแยก ประเภทข้อมูลออกเป็นกลุ่มย่อยหลังจากนั้นนำเนื้อหาข้อมูลมาจัดเรียงให้อยู่ในไฟล์เอกสาร บันทึก แยกไฟล์ ออกมาตามเมนูต่าง ๆ ดังนี้

18 2.2 กระบวนการออกแบบและการเลือกใช้สีในเว็บไซต์ YOUR WEBSITE HOME ABOUT US CONTACT US ข้อมูลองค์กร/ร้านค้าคร่าว ๆ จุดเด่น/จุดขาย ขององค์กร/ร้านค้า รูปที่ 2.1 กำหนดผังงานให้กับเว็บไซต์ 2.1.3 การเตรียมข้อมูลรูปภาพที่ใช้บนเว็บไซต์ การเตรียมข้อมูลรูปภาพที่ใช้บนเว็บไซต์ถือว่ามีความสำคัญมาก เพราะถ้ารูปภาพบนเว็บไซต์สวยงาม สะดุดตาจะดึงดูดให้ผู้เข้าชมมีความสนใจอยากจะเยี่ยมชมเว็บไซต์ ซึ่งนอกจากรูปภาพสวยแล้ว ขนาดของ รูปภาพก็มีความสำคัญมากเพราะถ้าไฟล์รูปภาพที่นำมาสร้างเว็บไซต์มีขนาดไม่เหมาะสมจะทำให้การโหลด รูปภาพนานยิ่งขึ้นอาจส่งผลให้ผู้เข้าชมเบื่อหน่ายกับการรอการแสดงผลของเว็บไซต์ได้ 2.2.1 กระบวนการออกแบบเว็บไซต์ กระบวนการออกแบบเว็บไซต์ หมายถึง ขั้นตอนวิธีการถ่ายทอดรูปแบบของเว็บไซต์จากความคิด ออกมาเป็นผลงาน ทำให้ผู้อื่นสามารถมองเห็น รับรู้ หรือสัมผัสได้ เพื่อให้มีความเข้าใจในผลงานที่ออกมาจาก ความคิดร่วมกัน รูปแบบของเว็บไซต์ที่คิดออกมาอาจเป็นสิ่งที่เป็นไปได้จริงหรือเป็นเพียงนามธรรมก็ได้ผู้ที่ทำ หน้าที่ออกแบบเว็บไซต์เรียกว่านักออกแบบและพัฒนาเว็บไซต์ (Webmaster) ซึ่งหมายถึงบุคคลที่ทำงาน วิชาชีพในสาขาการออกแบบและพัฒนาเว็บไซต์โดยเฉพาะการออกแบบเว็บไซต์มีความสำคัญต่อการพัฒนา เว็บไซต์มากเพราะจะทำให้ผู้พัฒนาเว็บไซต์สามารถพัฒนางานได้อย่างถูกต้องรวดเร็วตรงตามวัตถุประสงค์ของ องค์กรซึ่งในการออกแบบเว็บไซต์นั้นองค์ประกอบต่อไปนี้ถือเป็นพื้นฐานที่สำคัญในการออกแบบพัฒนาเว็บไซต์ ได้อย่างมีประสิทธิภาพ รูปภาพภายในองค์กร ข้อมูลองค์กร/ร้านค้าอย่างระเอียด สถานที่ติดต่อ โปรโมชั่นหรือสินค้าใหม่ การทำงานภายในองค์กร หมายเลขโทรศัพท์/อีเมล แผนที่

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

20 9. ระบบการใช้งานที่ถูกต้อง (Functional Stability) การทำงานต่าง ๆ ในเว็บไซต์ต้อง มีความ แน่นอนและทำหน้าที่ได้อย่างถูกต้อง เช่น ลิงก์ต่าง ๆ ที่มีอยู่นั้นจะต้องเชื่อมโยงไปยังหน้าที่มีปรากฏอยู่จริงและ ถูกต้อง 2.2.2 การเลือกใช้สีในเว็บไซต์ การเลือกใช้สีในเว็บไซต์เป็นสิ่งที่มีความสำคัญมากเพราะสีเป็นสิ่งที่ดึงดูดความสนใจของผู้เข้า ชมเว็บไซต์ ดังนั้น ในการสร้างเว็บไซต์ สีเป็นสิ่งที่กำหนดความรู้สึกสามารถใช้สีตกแต่งตัวอักษร รูปภาพ ลิงก์ และรูปภาพทั้งหมด การเลือกใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหาได้ อย่างถูกต้อง เพิ่มความสวยงามให้กับหน้าเว็บไซต์ หากใช้สีที่ไม่เหมาะสมอาจทำให้ยากต่อการสื่อสาร ความหมายอาจผิดจากวัตถุประสงค์และดึงดูดความสนใจของผู้เข้าชมเว็บไซต์ได้น้อยลง สิ่งที่ต้อง คำนึงถึงเกี่ยวกับการเลือกใช้สีสำหรับเว็บไซต์มีดังนี้ 1. การใช้สีอย่างสม่ำเสมอ การออกแบบเว็บไซต์โดยใช้สีอย่างสม่ำเสมอจะสามารถสร้าง ขอบเขตของเว็บไซต์ที่สัมผัสได้ด้วยตา เมื่อผู้ใช้คลิกเข้าไปในแต่ละหน้าของเว็บไซต์จะรู้สึกเหมือนอยู่ ภายในเว็บไซต์เดียวกัน 2. ใช้สีอย่างเหมาะสม เว็บไซต์เปรียบเสมือนสถานที่หนึ่ง ๆ ที่มีลักษณะเฉพาะของตนเอง เช่น ธนาคาร โรงเรียน หรือร้านค้าต่าง ๆ ดังนั้น การเลือกใช้สีที่เหมาะสมกับลักษณะของเว็บไซต์จะ ช่วยส่งเสริมเป้าหมายและภาพพจน์ของเว็บไซต์ได้ ควรคำนึงถึงหลายปัจจัยให้เหมาะสมกับสีใน เว็บไซต์ เช่น วัฒนธรรม แฟชั่น อายุ และประสบการณ์ของผู้เข้าชมเว็บไซต์กลุ่มเป้าหมาย 3. ใช้สีเพื่อความหมาย สีแต่ละสีสื่อความหมายและความรู้สึกต่างกัน สีหนึ่งอาจสื่อ ความหมายทางบวกหรือทางลบก็ได้ ขึ้นอยู่กับสถานการณ์ ตัวอย่างเช่น สีดำให้ความรู้สึกโศกเศร้าใน งานศพแต่กลับแสดงถึงความเป็นมืออาชีพในการแสดงผลของศิลปิน ดังนั้น สีที่ให้ความหมายและ ความรู้สึกตรงกับเนื้อหา จะช่วยสนับสนุนให้ผู้ใช้ได้รับข้อมูลที่ถูกต้องและครบถ้วน การใช้สีในงาน ออกแบบต่าง ๆ นั้นจะต้องเข้าใจหลักจิตวิทยา ความหมายและสัญลักษณ์ของสี แต่อย่าลืมว่าทุกคน ไม่ได้มองความหมายของสีได้เหมือนกัน ความหมายของสีในมุมแต่ละคนนั้นมักจะได้รับอิทธิพลมาจาก วัฒนธรรม สังคมที่แตกต่างกันโดยสีแต่ละสีนั้นมีความหมายและสามารถเชื่อมโยงกับความรู้สึกของ ผู้คนในงานออกแบบได้ ดังนี้

21 1. สีแดง ให้ความรู้สึกที่หลากหลายมากที่สุดเพราะเป็นสีที่ใกล้เคียงไฟ สามารถเป็นตัวแทน ของความอบอุ่นหรืออันตรายก็ได้ในเวลาเดียวกัน แต่ในอีกแง่มุมนึงสีแดงก็บ่งบอกถึงอารมณ์ ความรู้สึกที่มีพลัง มีชีวิตชีวา ร้อนแรง นอกจากนั้นยังมีความหมายไปในทางลบ คือ การใช้ความ รุนแรง รูปที่ 2.2 เว็บเพจที่เลือกใช้สีแดง (ที่มา : https://www.mcdonalds.co.th) 2. สีส้ม สื่อถึงความอบอุ่น ซึ่งความหมายในแง่อื่น ๆ คือ ความคิดสร้างสรรค์ ความเป็นมิตร และอารมณ์ความรู้สึกที่ทำให้ผู้คนที่มองเห็นแล้วรู้สึกสบายตา สบายใจ รูปที่ 2.3 เว็บเพจที่เลือกใช้สีส้ม (ที่มา : https://www.nokair.com)

22 3. สีเหลือง สื่อถึงแสงแดด ความรู้สึกทางอารมณ์ คือ ความสุข ความปลื้มปิติ ความสดใสร่า เริง และความสดใหม่ ในแง่ของงานออกแบบสีเหลืองจะเป็นสีที่ดึงดูดความสนใจได้ดีมากให้ความรู้สึก ที่เป็นมิตรและมีความสนุก รูปที่ 2.4 เว็บเพจที่เลือกใช้สีเหลือง (ที่มา : https://www.nokair.com) 4. สีเขียว บ่งบอกถึงธรรมชาติ อีกความหมายคือ การเจริญเติบโต ความสดใหม่ มีคุณภาพ และสิ่งที่ดี หรือถ้าใช้ในสินค้าจะสามารถบ่งบอกได้ว่าสินค้าชนิดนี้มาจากธรรมชาติ นอกจากนี้ ยัง หมายถึงความมั่งคั่งเกี่ยวกับการเงินและความมั่นคง สีเขียวที่ใช้ในงานออกแบบส่วนมากจะเป็นโลโก้ ธนาคารและสินค้าออร์แกนิก สินค้าเพื่อสุขภาพ หรือธุรกิจทางการเงิน รูปที่ 2.5 เว็บเพจที่เลือกใช้สีเขียว (ที่มา : www.kasikornbank.com)

23 5. สีฟ้า บ่งบอกถึงความสงบเงียบและน่าเชื่อถือ สะอาด และทำให้มีพลังมากขึ้น ในแง่ของ การออกแบบ สีฟ้าเป็นสีที่ใช้กันอย่างแพร่หลายมากที่สุด เพราะความหมายทางการสื่อสาร หมายถึง ความมั่นคง ความปลอดภัย และภาพลักษณ์ที่ดูเป็นมืออาชีพ รูปที่ 2.6 เว็บเพจที่เลือกใช้สีฟ้า (ที่มา : https//www.ktbnetbank.com/consumer) 6. สีม่วง บ่งบอกถึงความหรูหราและมั่งคั่งมีเกียรติ บางประเทศจะใช้สีม่วงเป็นส่วนที่เกี่ยวข้องกับพระ บรมวงศานุวงศ์ นอกจากนี้ ยังมีความหมายเกี่ยวกับความเชื่อทางจิตวิญญาณ ความลึกลับ และ ศาสนา สีม่วง ในการออกแบบส่วนมากสีม่วงเกี่ยวกับเรื่อง แฟชั่น ผู้หญิง และสินค้าที่ต้องการความหรูหราน่าเชื่อถือ รูปที่ 2.7 เว็บเพจที่เลือกใช้สีม่วง (ที่มา : http://www.scb.co.th/th/home)

24 7. สีดำ บ่งบอกถึงความทันสมัย หรูหรา และความชับซ้อน ในทางกลับกันความหมายในทางลบคือ ความตาย ความชั่วร้าย หรือความลึกลับ แต่ในแง่ของการออกแบบ มีตราสินค้ามากมายที่ใช้สีดำอย่าง แพร่หลาย อีกแง่มุมหนึ่งคือ ความมั่นคง ความเป็นกลาง และเป็นสีที่สามารถสื่อสารได้อย่างง่าย รูปที่ 2.8 เว็บเพจที่เลือกใช้สีดำ (ที่มา : https://www.apple.com/th/mac)

25 8. สีขาว บ่งบอกถึงความบริสุทธิ์ ไร้เดียงสา ความสะอาด และความเรียบง่าย ปัจจุบันสีขาวถูกมาใช้ ในงานออกแบบสไตล์มินิมอล (Minimal) อย่างแพร่หลาย เพราะสามารถสื่อสารถึงควานเรียบง่ายได้ดี หรือ ร้านค้าที่ทำให้บริเวณร้านเป็นสีขาวเพื่อให้รู้สึกถึงความโปร่งและความสะอาด รูปที่ 2.9 เว็บเพจที่เลือกใช้สีขาว (ที่มา : https://www.11street.co.th)

26 2.3 กระบวนการพัฒนาและเผยแพร่เว็บไซต์ 2.4 โครงสร้างการทำงานของเว็บไซต์ เมื่อได้สร้างกระบวนการออกแบบและสร้างเว็บไซต์เสร็จเรียบร้อยแล้ว กระบวนการต่อไปของการ สร้างเว็บไซต์คือการเผยแพร่เว็บไซต์ให้ผู้อื่นได้เห็น การจัดทำเว็บไซต์และเผยแพร่ในระบบอินเทอร์เน็ต ควร ดูแลรักษาหน้าเว็บไซต์และตรวจสอบการเชื่อมโยงอัพเดตข้อมูลให้เป็นปัจจุบัน เพื่อให้มีผู้เยี่ยมชมเว็บไซต์อย่าง ต่อเนื่อง กระบวนการพัฒนาและเผยแพร่เว็บไซต์ มีดังนี้ 1. การจัดโครงร่างและตรวจสอบการทำงานของไฟล์ภายในเว็บไซต์ การจัดโครงร่างเว็บไซต์อย่างเป็น ระบบ จะช่วยให้สามารถค้นหา แก้ไขไฟล์ต่าง ๆ ได้อย่างรวดเร็ว ทำให้การพัฒนาเว็บไซต์ทำได้อย่างมี ประสิทธิภาพ 2. การขอพื้นที่เว็บไซต์บนเว็บเซิร์ฟเวอร์ (Web Server) การนำเว็บไซต์ที่สร้างและพัฒนาเสร็จ เรียบร้อยแล้วอัพโหลดขึ้นบนเครื่องเว็บเซิร์ฟเวอร์ 3. การจดโดเมนเนม (Domain Name) เพื่อใช้ระบุแทนชื่อเว็บไซต์ การตั้งชื่อเว็บไซต์จะไม่ช้ำกับ บุคคลอื่น ดังนั้น ควรเลือกใช้ชื่อที่ง่ายต่อการพิมพ์เพื่อให้บุคคลอื่นสามารถเรียกใช้งานได้ง่าย โครงสร้างการทำงานของเว็บไซต์การทำงานของเว็บไซต์ คือ รูปแบบ เค้าโครง แบบแผนการจัดลำดับ เนื้อหาโดยแบ่งออกเป็นหมวดหมู่ เพื่อจัดทำเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด เปรียบเสมือน แผนที่ของเว็บไซต์ ทำให้เห็นโครงสร้างทั้งหมดของเว็บไซต์ ช่วยให้ผู้สร้างเว็บไซต์ไม่หลงทาง การจัดโครงสร้าง ของเว็บไชต์ มีจุดมุ่งหมายสำคัญคือ การที่จะทำให้ผู้เข้าเยี่ยมชม สามารถค้นหาข้อมูลในเว็บเพจได้อย่างเป็น ระบบซึ่งถือว่าเป็นขั้นตอนที่สำคัญ ที่สามารถสร้างความสำเร็จให้กับผู้ที่ทำหน้าที่ในการออกแบบและพัฒนา เว็บไซต์(Webmaster) การออกแบบโครงสร้างหรือจัดระเบียบของข้อมูลที่ชัดเจน แยกย่อยเนื้อหาออกเป็น ส่วนต่าง ที่สัมพันธ์กันและให้อยู่ในมาตรฐานเดียวกัน จะช่วยให้น่าใช้งานและง่ายต่อการอ่านเนื้อหาซองผู้ใช้ เว็บไชตีโครงสร้างการทำงานของเว็บไชต์ที่ดีจะส่งผลดีต่อผู้ใช้งานระบบ เพราะข้อมูลที่มีอยู่มากมายนั้นต้อง อาศัยการเชื่อมโยงเนื้อหาหรือการจัดระเบียบของเนื้อหาให้กับการสืบคันภายในเว็บไชต์ การจัดระเบียบที่ดีจะ ช่วยให้ผู้ใช้มีความสะดวก รวดเร็วในการเข้าถึงเนื้อหา ในขณะเดียวกันโครงสร้างที่ไม่เหมาะสมย่อมส่งผลเสีย ต่อผู้ใช้เช่นกัน รูปแบบโครงสร้างของเว็บไซต์ตามแนวคิดของลินช์และฮอร์ตัน (Lynch and Horton) มีดังนี้

27 2.4.1 โครงสร้างของเว็บไซต์แบบเรียงตามลำดับ (Sequential Structure) โครงสร้างของเว็บไซต์แบบเรียงตามลำดับเป็นโครงสร้างของเว็บไซต์แบบธรรมดาที่ใช้กันมากที่สุด เนื่องจากง่ายต่อการจัดระบบข้อมูล ข้อมูลที่นิยมจัดด้วยโครงสร้างแบบนี้มักเป็นข้อมูลที่มีลักษณะเป็นเรื่องราว ตามลำดับไม่ซับซ้อน เหมาะกับเว็บไชต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การลิงก์ (Link) ไปทีละหน้า ทิศทาง ของการเข้าสู่เนื้อหา (Navigation) ภายในเว็บไซต์จะเป็นการดำเนินเรื่องที่ต่อเนื่องในลักษณะของเส้นตรง โดย มีปุ่มเดินหน้า-ถอยหลังเป็นเครื่องมือหลักในการกำหนดทิศทาง ข้อเสียของโครงสร้างระบบนี้คือ ผู้ใช้ไม่ สามารถกำหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้ ทำให้เสียเวลาในการเข้าสู่เนื้อหาเพราะ ต้องคลิกต่อเนื่องแบบเรียงลำดับ sale.html product. html index.html รูปที่ 2.10 ผังโครงสร้างของเว็บไซต์แบบเรียงตามลำดับ 2.4.2 โครงสร้างของเว็บไซต์แบบลำดับขั้น (Hierarchical Structure) โครงสร้างของเว็บไชต์แบบลำดับขั้นเป็นโครงสร้างที่มีความเหมาะสมกับข้อมูลที่มีความซับซ้อนโดย แบ่งเนื้อหาออกเป็นส่วนต่าง ๆ และมีรายละเอียดย่อย ในแต่ละส่วนลดหลั่นกันลงมาในลักษณะเดียวกันกับ แผนภูมิองค์กร จึงง่ายต่อการทำความเข้าใจกับโครงสร้างของเนื้อหา ลักษณะเด่น คือ การมีจุดเริ่มต้นที่จุดรวม จุดเดียว นั่นคือโฮมเพจ (Home Page) และเชื่อมโยงไปสู่เนื้อหาในลักษณะเป็นลำดับจากบนลงล่าง Index Product sale about us Lenovo Huawel samsung รูปที่ 2.1.1 ผังโครงสร้างของเว็บไซต์แบบลำดับชั้น contact.html

28 2.4.3 โครงสร้างของเว็บไซต์แบบตาราง (Grid Structure) โครงสร้างของเว็บไชต์แบบตารางนี้มีความชับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเน้นเพิ่ม ความยืดหยุ่นให้แก่การเข้าสู่เนื้อหาของผู้ใช้โดยเพิ่มการเชื่อมโยงซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วนเหมาะ สำหรับการแสดงให้เห็นความสัมพันธ์กันของเนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็นลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้ Index Computer program printer Notebook windows driver รูปที่ 2.12 ผังโครงสร้างของเว็บไซต์แบบตาราง 2.4.4 โครงสร้างของเว็บไซต์แบบใยแมงมุม (Web Structure) โครงสร้างของเว็บไซต์แบบใยแมงมุมจะมีความยืดหยุ่นมากที่สุด โดยเนื้อหาทุกหน้าในเว็บไซต์สามารถ จะเชื่อมโยงไปถึงกันได้หมด จึงเป็นรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ ซึ่งผู้ใช้สามารถกำหนดวิธีการเข้าสู่ เนื้อหาได้ด้วยตนเอง สามารถคลิกเพื่อเชื่อมโยงเนื้อหาแต่ละหน้า โครงสร้างลี้กษณะนี้จัดเป็นรูปแบบที่ไม่มี โครงสร้างที่แน่นอนตายตัว (Unstructured) นอกจากนี้ การเชื่อมโยงไม่ได้จำกัดเฉพาะเนื้อหาภายในเว็บไซต์ นั้น ๆ แต่สามารถเชื่อมโยงออกไปสู่เนื้อหาของเว็บไซต์ภายนอกเพิ่มเติมได้ ทำให้การเข้าสู่เนื้อหามีความ หลากหลายและสะดวกต่อผู้ใช้งาน Index Computer program printer Notebook windows driver รูปที่ 2.13 ผังโครงสร้างของเว็บไซต์แบบใยแมงมุม

29 2.5 การออกแบบโครงสร้างการทำงานของเว็บไซต์ การออกแบบโครงสร้างเว็บไชต์ คือ การออกแบบ การวางแผน การจัดหมวดหมู่ลำดับของเว็บไซต์ ทั้งหมด และจัดทำเป็นแผนผังโครงสร้างเว็บไซต์ เพื่อให้ผู้พัฒนาเว็บไซต์สามารถพัฒนาย่างถูกต้องรวดเร็ว การ ออกแบบโครงสร้างเว็บไชที่ดีจะช่วยให้ผู้ใช้ไม่สับสนและค้นหาข้อมูลได้อย่างรวดเร็ว หลักการออกแบบ โครงสร้างเว็บไซต์ มีดังนี้ 1. กำหนดวัตถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้างเว็บไซต์ทำเพื่ออะไร 2. ศึกษาคุณลักษณะของผู้ใช้ว่าต้องการกลุ่มเป้าหมายใดในการเข้าใช้งานเว็บไซต์ 3. วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การออกแบบเว็บไซต์ต้องมีการจัดโครงสร้าง หรือจัดระเบียบข้อมูลที่ชัดเจน การที่เนื้อหามีความต่อเนื่องไปไม่สิ้นสุดหรือกระจายมากเกินไป อาจทำให้เกิด ความสับสนต่อผู้ใช้ได้ ดังนั้น จึงควรออกแบบให้มีลักษณะที่ชัดเจน แยกย่อยออกเป็นส่วนต่าง ๆ จัดหมวดหมู่ ให้สัมพันธ์กัน รวมทั้งอาจมีการแสดงให้ผู้ใช้เห็นแผนที่โครงสร้างเพื่อป้องกันความสับสน 4. กำหนดรายละเอียดให้กับโครงสร้างเว็บไซต์ ซึ่งพิจารณาจากวัตถุประสงค์ที่ตั้งไว้ โดยตั้งเกณฑ์ ในการใช้ เช่น ผู้ใช้ควรทำอะไรบ้าง จำนวนหน้าควรมีเท่าไร มีการเชื่อมโยงมากน้อยเพียงใด การออกแบบโครงสร้างเว็บไซต์ถือว่าเป็นขั้นตอนที่สำคัญที่สามารถสร้างความสำเร็จให้กับผู้ที่ทำ หน้าที่ในการออกแบบและพัฒนาเว็บไซต์ (Webmaster) การออกแบบโครงสร้างหรือจัดระเบียบของข้อมูลที่ Home ร้านจำหน่ายโทรศัพท์มือถือ รูปที่ 2.14 ตัวอย่างการออกแบบโครงสร้างเว็บไซต์ในร้านจำหน่ายโทรศัพท์มือถือ ชัดเจนแยกย่อยเนื้อหาออกเป็นส่วนต่าง ๆ ให้สัมพันธ์กันและเป็นมาตรฐานเดียวกัน จะช่วยให้น่าใช้งานง่าย ต่อการเข้าอ่านเนื้อหาของผู้ใช้เว็บไซต์ สินค้า ราคามือถือ ซ่อมมือถือ ติดต่อเรา สินค้าใหม่ สินค้าขายดี อุปกรณ์เสริม FAQ Manual ประวัติ สถานที่ตั้ง

30

31 แนวคิดสําคัญ (Main) Idea) 3.1 โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ 3.2 คำสั่งภาษาใน HTML พื้นฐานในการสร้างเว็บไซต์ 3.3 โปรแกรมภาษาที่นิยมใช้ในการพัฒนาเว็บไซต์ ปัจจุบันอินเทอร์เน็ตกลายเป็นสิ่งจำเป็นในชีวิตประจำวัน การใช้งานเว็บไซต์มีเพิ่มมากขึ้น ผู้คน สามารถ ติดต่อสื่อสารกันได้อย่างสะดวกรวดเร็วขึ้น รวมทั้งการสร้างเว็บไซต์ในปัจจุบันสามารถทำได้ง่าย โดยที่ ผู้สร้าง เว็บไซต์เพียงแค่ออกแบบโปรแกรมก็สร้างชุดคำสั่งในการทำงานให้โดยที่ผู้สร้างไม่จำเป็นต้องมีความรู้ ในเรื่อง การเขียนชุดคำสั่งยาก ๆ ก็สามารถทำเว็บไซต์ออกมาอย่างสวยงามได้ แต่หากผู้สร้างเว็บไซต์รู้จัก โครงสร้าง ภาษาและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์จะทำให้การสร้างเว็บไซต์มีประสิทธิภาพ มาก ยิ่งขึ้น หากมีปัญหาใด ๆ เกิดขึ้นก็สามารถแก้ไขผ่านชุดคำสั่งได้ทันที ดังนั้น ในหน่วยนี้จะกล่าวถึง โครงสร้าง และไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ คำสั่งภาษา HTML พื้นฐานในการสร้าง เว็บไซต์และ โปรแกรมภาษาที่นิยมใช้ในการพัฒนาเว็บไซต์เพื่อให้มีความรู้ในการสร้างเว็บไซต์ในหน่วยต่อไป แสดงความรู้เกี่ยวกับโครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ 1. อธิบายโครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ได้ 2. ใช้คำสั่งภาษา HTML พื้นฐานในการสร้างเว็บไซต์ได้ 3. บอกโปรแกรมภาษาที่นิยมใช้ในการพัฒนาเว็บไซต์ได้ หัวข้อเรื่อง (Topics) โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้าง เว็บไซต์ สมรรถนะย่อย (Element of Cornpetency) จุดประสงค์เชิงพฤติกรรม (Behavioral Objectives)

32 3.1 โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ เนื้อหาสาระ (Content) ในการสร้างเว็บไซต์สามารถสร้างได้โดยการเขียนผ่านโปรแกรมต่าง ๆ เช่นเดียวกันกับการเขียน โปรแกรม ก่อนที่จะนำไปเผยแพร่ให้ผู้ชมได้ชมเว็บไซต์ โปรแกรมภาษาที่ใช้ในการพัฒนาเว็บไซต์โดยพื้นฐาน ได้แก่ 3.1.1 HTML (Hypertext Markup Language) HTML เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ โครงสร้างหลักของ HTML เริ่มด้วย <html> และ จบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วน คือ 1. head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับเว็บเพจ (Web Page) ซึ่งจะไม่ แสดงผลที่เว็บเพจโดยตรง 2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้ จะแสดงที่โปรแกรมเว็บบราวเซอร์โดยตรง Source Code <html> <head> คําสั่งในหัวข้อของ head <head> <body> คำสั่งในหัวข้อของ body ในส่วนนี้จะเป็นส่วนที่ใช้แสดงผล </ body> </ html> ลักษณะของคำสั่งในหัวข้อ head และ body 1. คำสั่งในหัวข้อของ head (Head Section) เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ อย่างเช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ (Author) คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมีแท็ก Tag สำคัญ คือ

33 Source Code <head> <title>ข้อความอธิบายชื่อเรื่องของเว็บ</title> <meta http –equiv = “Content-Type”Content=”text/html; charset = utf -8”> <meta name=”Author” Content=”ชื่อผู้พัฒนาเว็บ”> <meta name=”Keywords” Content=”ข้อความ 1, ข้อความ 2”> <head> title ข้อความที่ใช้เป็นชื่อเรื่อง ไม่ควรพิมพ์เกิน 64 ตัวอักษร ไม่ต้องใส่ลักษณะพิเศษเช่น ตัวหนา เอียง หรือสี โดยข้อความในส่วนนี้จะแสดงผลในแถบชื่อเรื่อง (Title Bar) ของโปรแกรมเว็บบราวเซอร์ แท็ก meta จะไม่ปรากฎผลในโปรแกรมเว็บบราวเซอร์ แต่จะเป็นส่วนสำคัญในการจัดอันดับบัญชีเว็บ ไชต์ในการสืบค้นข้อมูล (Search Engine เช่น Google, YouTube, Yahoo) charset ใช้บอกว่าใช้ชุดตัวอักษรแบบใดในการแสดงผล ภาษาไทย charset=utf-8 keywords คำหลักที่ใช้ในการสืบค้นเว็บไซต์ สามารถใช้คำหลักมากกว่า 1 คำได้โดยใช้เครื่องหมาย คอมม่า () ในการคั่นระหว่างคำ 2. คำสั่งในหัวข้อของ Body (Body Section) เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผล จะต้องใช้แท็กจำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ รูปภาพ เสียง วิดีโอ หรือไฟล์ต่าง ๆ ส่วน เนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูลที่ ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ไม่มีข้อจำกัด สามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1คำสั่งก็ได้ แต่ มักจะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้แท็ก <BODY> </BODY> 3.1.2 CSS (Cascading Style Sheets) CSS เป็นภาษาที่มีรูปแบบการเขียนโครงสร้าง (Syntax) ที่เฉพาะ ถูกกำหนดขึ้นเพื่อใช้เสริมภาษา HTML ให้สามารถจัดรูปแบบการแสดงผลให้กับเอกสาร HTML ได้สมบูรณ์แบบมากขึ้น โครงสร้างรูปแบบ คำสั่งมี 2 ส่วน คือ

34 h1 {Color:blue; font-size:12px;} 1. Selector เป็นองค์ประกอบภายใน HTML ที่ต้องการกำหนดรูปแบบการแสดงผล 2. Declaration เป็นเงื่อนไขการแสดงผลและค่าที่กำหนด เช่น (color : blue) กำหนดให้สี เป็น น้ำเงิน เป็นต้น Declarations ประกอบด้วย Property และ Value คือ คุณสมบัติการแสดงผล เช่นcolor สำหรับกำหนดสีตัวอักษร, font สำหรับกำหนดลักษณะตัวอักษร และอื่น ๆ ส่วน value คือ ค่าที่กำหนดให้ Property เช่น color : green; font : 12px sans-serif, เป็นต้น 3.1.3 XHTML (Extensible Hypertext Markup Language) XHTML เป็นมาตรฐานใหม่ของ HTML คำสั่งต่าง ๆ นั้น ยังเหมือนกับ HTML แต่จะมีความเข้มงวดใน เรื่องโครงสร้างภาษามากกว่า และมีการตัดแท็ก และแอตทริบิวต์ที่ล้าสมัยออกไป จากข้อเสียของHTML ที่เมื่อ แสดงผลผ่านบราวเซอร์ของค่ายต่าง ๆ เช่น Internet Explorer, Firefox, Netscape, Operaและอื่น ๆ ได้ผล ที่แตกต่างกัน เว็บเพจที่ออกแบบมาอย่างดี อาจดูสวยงามถูกต้องใน E แต่กลับแสดงผลผิดเพี้ยนไปเมื่อดูด้วย Firefox ภาษา XHTML เป็นภาษาที่ถูกกำหนดโดย W3C (World Wide WebConsortium) เป็นองค์กร ระหว่างประเทศที่ทำงานด้านการพัฒนาเทคโนโลยีเว็บให้เป็นภาษามาตรฐานใหม่ที่จะใช้ในการสร้างเว็บเพจ ต่อไปในอนาคต เว็บบราวเซอร์ทุกค่ายจะรองรับการใช้งาน XHTML และในอนาคตจะไม่มีปัญหาการแสดงผล ที่ไม่เหมือนกันในเว็บบราวเซอร์ต่างค่ายอีก กฎของ XHTML ที่สำคัญ มีดังนี้ 1. ทุก XHTML Element ที่ซ้อนกันต้องเรียงลำดับให้ถูกแต่ละเอลิเมนต์ ต้องไม่เปิด ปิด ข้ามกัน เช่น <b><i>ข้อความนี้เป็นตัวหนา และตัวเอียง</b></i> 2. ทุก XHTML Element ต้องเขียนแท็ก แอตทริบิวต์และค่าของเอลิเมนต์ด้วยตัวพิมพ์เล็ก <body> <p align="center">ข้อความจัดวางกึ่งกลาง</p> </body> Selector Declaration Declaration ↕ ↕ ↕ ↕ Property Value Property Value

35 3. เอกสาร XHTML จะมีรูตเอลิเมนต์ (Root Element) เดี่ยว ทุก XHTML Element จะต้องอยู่ ภายในเอลิเมนต์ <html>.../html> <html> <head> ... </head> <body> ... </body> </html> 4. ค่าของแอตทริบิวต์ต้องอยู่ในเครื่องหมาย ".." เสมอ <table width= "100%"> 5. แอตทริบิวต์ ของ XHTML ให้เขียนแบบเต็ม <input type="text" readonly-"readonly"1> <input type="text" disabled="disabled" 1> 6. ใช้แอตทริบิวต์ d แทนแอตทริบิวต์ name และเพื่อให้ใช้กับเว็บบราวเซอร์รุ่นเก่าได้ให้ใส่ทั้งแอตทริ บิวต์ id และแอตทริบิวต์ name ควบคู่กัน เช่น <img src="picture.gif" id="pic1"name="pic1"/> 7. เอกสาร XHTML จะต้องประกาศ DOCTYPE และจะต้องมีเอลิเมนต์ html, head, titeและ body/frame อย่างครบถ้วนเสมอ <!DOCTYPE html PUBLIC "-//3C//DTD XHTML 1.0 TransitionaV/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" <html> <head> <title>XHTML คืออะไร </title> </head> <body> <p>สวัสดีภาษา XHTML</p> </body> </html>

36 3.2 คำสั่งภาษา HTML พื้นฐานในการสร้างเว็บไซต์ 3.1.4 ภาษา Script ที่ใช้ในการสร้างเว็บเพจ ภาษา Scipt คือ โครงสร้างภาษาที่มีรูปแบบง่าย ๆ และมีความสามารถในการทำงาน ดังนี้ 1. ใช้ในการสร้างและกำหนดค่าตัวแปร 2. ส่งค่าตัวแปรผ่านไปยังโปรแกรมเว็บเบราวเซอร์ฝั่ง Client เพื่อแสดงผลลัพธ์ 3. เป็นชุดคำสั่งที่ใช้ควบคุมการทำงาน เช่น การใช้เงื่อนไข การทำซ้ำ รูปแบบของการเขียนภาษา Scipt จะมีรูปแบบเขียนอยู่ 2 รูปแบบ คือ รูปแบบที่ 1: Client-Side Script เป็นการเขียนโปรแกรมภาษา Scipt ให้ทำงานบนเว็บบราวเชอร์ โดยเขียนโปรแกรมแทรกหรือฝัง (Embed) เข้าไปเป็นส่วนหนึ่งของเอกสาร HTML ภาษาScript ประเภทนี้ ได้แก่ Java Script, VB Script เป็นต้น รูปแบบที่ 2 : Server-Side Script เป็นการเขียนโปรแกรมภาษา Script ให้ทำงานบนเว็บเชิร์ฟเวอร์ โดยโปรแกรมเว็บบราวเซอร์จะเป็นเพียงแค่ตัวที่แสดงผลการทำงานเท่านั้น โปรแกรมที่ทำงานบนเว็บเชิร์ฟ เวอร์เหล่านั้น เช่น ASP ซึ่งสามารถเขียนด้วยภาษาต่าง ๆ เช่น JScript, VB Script เป็นต้น ในกรณีที่ต้องการให้แอปพลิเคชันทำงานร่วมกันกับแอปพลิเคชันอื่น เช่น ฐานข้อมูลจะต้องใช้ServerSide Script เขียนคำสั่งติดต่อกับฐานข้อมูล โดยผู้ชมเว็บจะไม่สามารถดูคำสั่ง (Source Code) ของServerSide Script เหล่านั้นได้ ต่างจากการเขียนคำสั่งแบบ Client-Side Script ที่ผู้ชมเว็บสามารถดูคำสั่งที่เขียน ด้วย Client-Side Script รวมถึง HTML, CSS ของหน้าเว็บเพจนั้นได้ ด้วยการคลิกเมาส์ขวาบนหน้าเว็บเพจ นั้น ๆ และเลือกคำสั่ง View Source หรือ View Page Source ในโปรแกรมเว็บบราวเซอร์ ภาษา HTML (Hypertext Markup Language) เป็นภาษาคอมพิวเตอร์ที่แสดงทั้งข้อมูลและข้อมูล รูปแบบเข้าด้วยกัน โดยข้อมูลรูปแบบอธิบายถึงโครงสร้างหรือการแสดงผล ซึ่งส่วนนี้เรียกว่า "Markup"ที่ใช้ใน การสร้างเว็บไซต์หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บบราวเซอร์ ซึ่งตัวโค้ดจะแสดงโครงสร้างของข้อมูลในการ แสดง หัวข้อ ลิงก์ ย่อหน้า รายการ รวมถึงการสร้างแบบฟอร์ม เชื่อมโยงภาพหรือวิดีโอด้วย โครงสร้างของ ภาษา HTML นั้นจะอยู่ในลักษณะภายในวงเล็บสามเหลี่ยม ซึ่งเรียกว่าแท็ก (Tag)

37 <html> <head> <meta charset-"utf-8"> <title>Untitled Document</title> </head> <body> </body> </html> แท็กเป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่งหรือการลงรหัสคำสั่ง HTMLภายในเครื่องหมาย Less-than Bracket (<) และ Greater-than Bracket (>) โดยแท็ก HTML แบ่งได้ 2ลักษณะ คือ ㆍ แท็กเดี่ยว เป็นแท็กที่ไม่ต้องมีการปิดรหัส เช่น <P>, <BR> เป็นต้น ㆍแท็กคู่ เป็นแท็กที่ประกอบด้วยแท็กเปิด <...> และแท็กปิด</...> โดยแท็กปิด จะมีเครื่องหมาย Slash (/) นำหน้าคำสั่งในแท็กนั้น ๆ เช่น <b>.../b>, <p>...</p> เป็นต้น การเขียนคำสั่งภาษา HTML สามารถเขียนด้วยตัวอักษรพอมพ์เล็กหรือพิมใหญ่ก็ได้ เพราะ คำสั่งถูกมองว่าเป็นตัวอักษรชุดเดียวกัน เช่น <HTML> หรือ <Html> หรือ <htm> ซึ่งจะ ให้ผลเหมือนกัน โดยทั่วไปคำสั่งภาษา HTML พื้นฐานที่นิยมใช้ในการสร้างเว็บไซต์ มีดังนี้ 1. การใส่ชื่อให้กับเว็บ <title>

38 2. การใส่สี/ภาพพื้นหลัง <body> bgcolor = “สีที่ต้องการ” > เป็นการใส่สีให้กับพื้นหลังที่ต้องการ สามารถใส่ชื่อในภาษาอังกฤษ เช่น pink,blue หรือใช้รหัสสี เช่น #F3B7EF , #3B07EF ก็ได้เช่นกัน 3. การใส่พื้นหลังให้กับเว็บ <body background= “ชื่อของรูปภาพหรือลิงก์ที่อยู่ของรูปภาพ”> เป็น การใส่รูปพื้นหลังให้กับเว็บ 4. การใส่รูปภาพ <img src= link > ซึ่งมีคำสั่งย่อยลงไปอีก เช่น height= “ค่าความสูงที่ต้องการ” width= “ค่าความกว้างที่ต้องการ”

39 5. การกำหนดขนาดของหัวข้อ <h1> ถึง <h6> ซึ่ง <h1> นั้นมีขนาดใหญ่ที่สุด เรียงลำดับไปจนถึง <h6> 6. การสร้างตาราง ประกอบด้วยแท็บ (tab) ย่อย ๆ ดังนี้ <table> แท็กสร้างตาราง <tr> แท็กสร้างแถว <td> แท็กสร้างคอลัมน์ Width คือ ขนาดความกว้าง Border คือ ขนาดเส้นขอบ

40 7. การใส่เส้นคั่น <hr> แท็กเส้นคั่น

41 8. การจัดการตัวอักษรโดยใช้แท็กต่อไปนี้ <br> แท็กตัวอักษรหนา <i> แท็กตัวอักษรเอียง <u> แท็กตัวอักษรขีดเส้นใต้ 9. การกำหนดรูปแบบตัวอักษร <font face =”รูปแบบตัวอักษร”> Size = “ขนาดตัวอักษร” color = “สีตัวอักษร>”

42 3.3 โปรแกรมภาษาที่นิยมใช้ในการพัฒนาเว็บไซต์ 10. การเชื่อมโยงข้อมูลในเว็บ สามารถใช้แท็ก <a href= ที่อยู่ลิงก์”> ข้อความลิงก์ </a> โปรแกรมที่ใช้ในการสร้างเว็บไซต์มีประสิทธิภาพและข้อดีข้อเสียที่แตกต่างกัน แล้วแต่จะเลือกใช้ เครื่องมือใดในการสร้างเว็บไซต์ เช่น โปรแกรม Dreamweaver, NetObject, ColdFusion,Visual InterDev หรืออาจสร้างได้โดยใช้ภาษาสำหรับสร้างเว็บเพจ (Web Program’s Language) โดยเฉพาะ เช่น Active Sever Page (ASP) , PHP, Java Server Pages (JSP), JavaScript, VBScript, Visual C++ .Net, Visual C# .Net ทุกโปรแกรมที่ได้กล่าวถึงข้างต้นต่างก็มีพื้นฐานมาจากการใช้ภาษา HTML (Hypertext Markup Language) เกือบทั้งหมด โดยเป็นภาษาที่มีลักษณะของโค้ด คือเป็นไฟล์เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐาน ของรหัสแอสกี (ASCII Code) ซึ่งสามารถที่จะอ่านเข้าใจได้ และเป็นเอกสารที่มีความสามารถสูงกว่าเอกสาร ธรรมดาทั่วไป ทั้งนี้เพราะเป็นเอกสารแบบไฮเปอร์เท็กซ์ และจัดอยู่ในตระกูลของภาษาที่ใช้สำหรับกำหนด รูปแบบของเอกสาร (Markup Language) แต่ปัจจุบันมีโปรแกรมที่สามารถสร้างเว็บไซต์ได้โดยที่ผู้ใช้ไม่จำเป็น ต้องมีพื้นฐานหรือความรู้เกี่ยวกับภาษา HTML ซึ่งเป็นการอำนวยความสะดวกให้กับผู้ที่ต้องการมีเว็บไซต์เป็น ของตนเอง โดยไม่ต้องมีพื้นฐานในการเขียนโปรแกรมภาษาใด ๆ โปรแกรมที่นิยมใช้เป็นเครื่องมือในการสร้าง เว็บไซต์ มีดังนี้

43 3.3.1 โปรแกรม Adobe Dreamweaver Adobe Dreamweaver CC เป็นหนึ่งในชุด โปรแกรม Adobe Creative Cloud เป็นเครื่อง มือหนึ่ง ในการช่วยสร้างเว็บไซต์ได้อย่างมีประสิทธิภาพ มีเครื่องมือหลากหลายแบบที่ช่วยให้สร้างเว็บไซต์ได้ สะดวกสบายขึ้น โปรแกรมนี้ได้เป็นที่นิยมกันมากของเว็บมาสเตอร์ต่าง ๆ ทั้งในเมืองไทยและต่างประเทศ รูปที่ 3.1 โปรแกรม Adobe dreamweaver CC 2018 โปรแกรม Adobe Dreamweaver ช่วยให้ผู้ที่ต้องการสร้างเว็บเพจไม่ต้องเขียนภาษา HTML หรือ โค้ดโปรแกรมเอง หรือที่เรียกว่า “WYSIWYG" ย่อมาจาก "what you see is whatyou get หมายความว่าสิ่ง ที่เห็นในมุมมองออกแบบจะเหมือนกับลักษณะของเพจที่ปรากฏในเว็บบราวเซอร์ ของโปรแกรม Dreamweaver มีฟังก์ชันที่ทําให้ผู้ใช้สามารถจัดวางข้อความ รูปภาพ ตาราง ฟอร์ม วีดีโอ รวมถึงองค์ประกอบ อื่น ๆ ภายในเว็บเพจได้อย่างสวยงามตามที่ผู้ใช้ต้องการ และเป็นโปรแกรมตัวหนึ่งที่นิยม และเหมาะสำหรับ นักพัฒนาเว็บไซต์มือใหม่ มีเครื่องมือช่วยเหลือในการท างานมากและสามารถดูผลลัพธ์ได้ ทันทีโดยไม่ต้องเปิด โปรแกรมเว็บ 3.3.2 โปรแกรม JOOMLA โปรแกรม JOOMLA เป็นโปรแกรมประเภท CMS (Content Management SystemX ตัวหนึ่งที่ ได้รับความนิยมในปัจจุบัน คือ ระบบบริหารจัดการเนื้อหาของเว็บไซต์ เช่น การเพิ่มบทความ การเพิ่มรูปภาพ หรือการปรับแต่งโยกย้ายโมดูลต่าง ๆ ไม่จำเป็นต้องเขียนโค้ด (Code) ด้วยภาษา HTML PHP, SOL เพียงแต่ เรียนรู้วิธีการติดตั้ง การปรับแต่ง การใช้งาน CMS เท่านั้น

44 รูปที่ 3.2 โปรแกรม JOOMLA 3.3.3 โปรแกรม WordPress WordPress คือ โปรแกรมสําเร็จรูปที่ใช้สําหรับสร้างบล็อกหรือเว็บไซต์ สามารถใช้งานได้ฟรี ถูกจัด อยู่ในประเภท CMS ซึ่งหมายถึง โปรแกรมสําเร็จรูปที่มีไว้สําหรับสร้างและบริหารจัดการเนื้อหาและ ข้อมูลบน เว็บไซต์ ซึ่งเป็นโปรแกรมสําหรับจัดการฐานข้อมูลมีหน้าที่เก็บ เรียกดู แก้ไข เพิ่ม และลบข้อมูล การใช้งาน WordPress ร่วมกับ MySQL อยู่ภายใต้สัญญาอนุญาตใช้งานแบบ GNU (General Public License) ปัจจุบัน นี้ WordPress ได้รับความนิยมเพิ่มขึ้นอย่างรวดเร็ว รูปที่ 3.3 โปรแกรม Wordpress

45 3.3.4 โปรแกรม Web Page Maker Web Page Maker คือ โปรแกรมช่วยออกแบบเว็บไซต์ และสร้างเว็บไซต์ได้ง่าย ๆ ด้วย ภาษ HITML มีรูปแบบเว็บไซต์สําเร็จรูปที่หลากหลาย ใช้หลักการลากแล้ววาง เลือกได้สี HTML ได้ สนับสนุน JavaScript และมี FTP อัพโหลดไฟล์ในตัวได้ รูปที่ 3.4 โปรแกรม Web Page Maker 3.3.5 โปรแกรม Web Page Maker Google Site คือ โปรแกรมที่ให้บริการต่อยอดมาจาก Google ผู้ใช้สามารถสร้างเว็บเพจได้ในแบบที่ ต้องการ ด้วยเครื่องมือในการสร้างเว็บไซต์อย่างง่ายเหมือนกับโปรแกรม Microsoft Front Page หรือ โปรแกรม Dreamweaver แต่ Google Site สามารถออกแบบมาให้ใช้งานได้ง่ายกว่า สามารถเพิ่ม ลูกเล่นได้ มากกว่า และสามารถ Add Google Gadgets ได้ นอกจากนั้นยังทํางานบน Web Service การสร้างเว็บไซต์ บน Google Site ให้พื้นที่ในการเก็บเว็บไซต์ไว้บน Google Site ฟรี 100 MB และสําหรับลูกค้าประเภทอื่น ๆ จะได้รับสิทธิ์ตามที่สมัครใช้งานได้ รูปที่ 3.5 โปรแกรม Google Site

46

47 แนวคิดสําคัญ (Main) 4.1 การออกแบบส่วนประกอบของเว็บไซต์ 4.2 โปรแกรมกราฟิกที่นิยมใช้ในการออกแบบเว็บไซต์ 4.3 การใช้โปรแกรม Adobe Photoshop cc 2018 ในการออกแบบเว็บไซต์ 4.4 การบันทึกไฟล์ภาพกราฟิกสําหรับเว็บไซต์ 4.5 การใช้โปรแกรม Adobe Animate cc 2018 ในการออกแบบเว็บไซต์ 4.6 การบันทึกไฟล์ภาพเคลื่อนไหวสําหรับเว็บไซต์ ปัจจุบันผู้คนนิยมใช้อินเทอร์เน็ตและมีการใช้เว็บไซต์เพิ่มมากขึ้นเพราะท าให้ติดต่อสื่อสารกันได้อย่าง สะดวกรวดเร็วซึ่งการมีหน้าเว็บไซต์สวยๆจะดึงดูดความสนใจให้ผู้เข้าชมได้เป็นอย่างดีดังนั้นในหน่วยนี้จะมี เนื้อหาประกอบด้วยการออกแบบส่วนประกอบของเว็บไซต์โปรแกรมกราฟิกที่นิยมใช้ในการออกแบบเว็บไซต์ การใช้โปรแกรม Adobe Photoshop cc 2018 ในการออกแบบเว็บไซต์การบันทึกไฟล์ภาพกราฟิกการใช้ โปรแกรม Adobe animate cc 2018 ในการออกแบบเว็บไซต์การบันทึกไฟล์ภาพเคลื่อนไหวสําหรับเว็บไซต์ เนื้อหาในหน่วยนี้จึงเป็นพื้นฐานในการออกแบบและสร้างเว็บไซต์ในหน่วยต่อไป 1. แสดงความรู้เกี่ยวกับโครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ 2. ประยุกต์ใช้โปรแกรมกราฟิกเพื่อเสริมในการออกแบบและการสร้างเว็บไซต์ 1. ออกแบบส่วนประกอบของเว็บไซต์ได้ 2. อธิบายเกี่ยวกับโปรแกรมกราฟิกที่นิยมใช้ในการออกแบบเว็บไซต์ได้ 3. ใช้โปรแกรม Adobe Photoshop cc 2018 ในการออกแบบเว็บไซต์ได้ 4. บันทึกไฟล์ภาพกราฟิกสําหรับเว็บไซต์ได้ 5. ใช้โปรแกรม Adobe animate cc 2018 ในการออกแบบเว็บไซต์ได้ 6. บันทึกไฟล์ภาพเคลื่อนไหวสําหรับเว็บไซต์ได้ หัวข้อเรื่อง (Topics) การออกแบบและใช้โปรแกรมกราฟิกเสริมในการสร้างเว็บไซต์ สมรรถนะย่อย (Element of Cornpetency) จุดประสงค์เชิงพฤติกรรม (Behavioral Objectives)

48 4.1 การออกแบบส่วนประกอบของเว็บไซต์ เนื้อหาสาระ (Content) หน้าเว็บไซต์เป็นสิ่งแรกที่ผู้ใช้จะได้เห็นขนาดที่เปิดเข้าสู่เว็บไซต์และยังเป็นสิ่งแรกที่แสดงถึงประสิทธิ ภาพในการออกแบบเว็บไซต์การออกแบบหน้าเว็บไซต์ให้สวยงามเหมาะสมจึงเป็นสิ่งสําคัญมากเพราะเป็น สื่อกลางให้ผู้ชมสามารถใช้ประโยชน์จากข้อมูลของระบบงานของเว็บไซต์นั้นได้โดยปกติหน้าเว็บไซต์จะปรากฏ ประกอบด้วยรูปภาพตัวอักษรสีพื้นระบบ Navigation และองค์ประกอบอื่นๆที่ช่วยสื่อความหมายของเนื้อหา และอํานวยความสะดวกต่อการใช้งานหลักสําคัญในการออกแบบหน้าเว็บไซต์ก็คือการใช้รูปภาพและ องค์ประกอบต่างๆร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสําคัญของเว็บไซต์โดยมีเป้าหมาย สําคัญเพื่อการสื่อความหมายที่ชัดเจนและน่าสนใจบนพื้นฐานของความเรียบง่ายและความสะดวกของผู้ใช้งาน ส่วนประกอบของหน้าเว็บไซต์แบ่งออกเป็น 3 ส่วน ดังนี้ 1. ส่วนหัวของหน้า (Page Header) เป็นส่วนที่ถูกออกแบบมาให้อยู่ด้านบนสุดของหน้าเว็บเพจถือเป็นส่วน ที่สําคัญเพราะเป็นส่วนที่ผู้ออกแบบจะใส่ข้อมูลชื่อหน่วยงาน องค์กร เจ้าของ เว็บไซต์ในส่วนนี้จะเน้นการ ออกแบบเพื่อดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์มักใส่ภาพกราฟิกเพื่อสร้างความสวยงาม และ ประทับใจ ส่วนใหญ่ประกอบด้วยส่วนต่าง ๆ ต่อไปนี้ โลโก้ (Logo) เป็นเครื่องหมายสัญลักษณ์ที่แสดงถึงหน่วยงาน องค์กร หรือชื่อเจ้าของเว็บไซต์ถือเป็น สิ่งสําคัญที่ช่วยให้ผู้เข้าชมเว็บไซต์สามารถจดจําเว็บไซต์ได้นอกจากนี้โลโก้ยังช่วยให้เว็บไซต์มีความเป็น เอกลักษณ์เฉพาะ ที่แสดงถึงเจ้าของหน่วยงานหรือเจ้าของเว็บไซต์ได้ ชื่อเว็บไซต์ เป็นสิ่งสําคัญอีกสิ่งหนึ่งซึ่งจะแสดงความเป็นเอกลักษณ์ เพื่อให้เป็นที่รู้จักและจดจําการ เลือกใช้ชื่อเว็บไซต์ควรตั้งให้สั้นกระชับและได้ใจความใช้หลักอ่านง่าย พูดง่าย จำง่าย และสะกดง่าย อ่าน เข้าใจหรือมีความหมาย ซึ่งจะช่วยให้ผู้เข้าชมเว็บไซต์รู้ว่าเว็บไซต์นี้ทําอะไร รูปที่ 4.1 ส่วนประกอบของหน้าเว็บไซต์

49 4.2 โปรแกรมกราฟิกที่นิยมใช้ในการออกแบบเว็บไซต์ เมนูหรือลิงก์(Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาหน้าอื่น ๆ ของเว็บไซต์โดยเว็บไซต์ ทั่ว ๆ ไปจะมีเมนูหรือลิงก์ในส่วนต่าง ๆ ของเว็บไซต์ด้วยเพื่อช่วยให้ผู้เข้าชมเว็บไซต์สามารถใช้งานเว็บไซต์ได้ง่ายขึ้น 2. ส่วนเนื้อหา (Page Body) เป็นส่วนที่อยู่ตอนกลางของหน้าเว็บไซต์ใช้แสดงข้อมูลเนื้อหาของ เว็บไซต์ซึ่งประกอบด้วย ข้อความ ตารางข้อมูล ภาพกราฟิก วิดีโอ และอื่น ๆ และ อาจมีเมนูหลักหรือเมนู เฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วย สําหรับส่วนเนื้อหาควรแสดงใจความสําคัญที่เป็นหัวเรื่องไว้บนสุดข้อมูลมีความ กระชับใช้รูปแบบตัวอักษรที่อ่านง่าย จัดเลย์เอาต์(Layout) ให้เหมาะสมและเป็นระเบียบ 3. ส่วนท้ายของหน้า (Page Footer) เป็นส่วนที่อยู่ด้านล่างสุดของหน้าเว็บไซต์ มักวางระบบนําทาง ที่เป็นลิงก์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์ ข้อความแสดงลิขสิทธิ์ วิธีการติดต่อกับผู้ดูแลเว็บไซต์ คําแนะนํา การใช้เว็บไซต์เป็นต้น โดยปกติส่วนหัวและ ส่วนท้ายมักแสดงเหมือนกันในทุกหน้าของเว็บเพจ โปรแกรมสาหรับกราฟิกถือเป็นโปรแกรมที่สําคัญมากของผู้ที่ทํางานเกี่ยวกับ ภาพถ่ายนักออกแบบ นักดีไซน์ นักทําโฆษณาสถาปนิก และอาชีพอื่น ๆ เพราะการจะสร้างชิ้นงานหนึ่งชิ้นให้มีความสวยงามน่าสนใจดึงดูด ลูกค้าจําเป็นต้องมีการออกแบบคิดวิเคราะห์ที่ดีและเลือกใช้เครื่องมือที่เหมาะสม ปัจจุบันโปรแกรมกราฟิกมีอยู่ มากมายขึ้นอยู่กับงานและความถนัดของผู้ใช้ซึ่งในหน่วยนี้จะใช้โปรแกรมกราฟิกที่นิยมนําไปใช้ในงานออกแบบ เว็บไซต์มีดังนี้ 4.2.1 โปรแกรม Adobe Photoshop CC 2018 โปรแกรม Adobe Photoshop CC เป็นโปรแกรมประยุกต์ที่มีความสามารถในการจัดการแก้ไขและ ตกแต่งรูปภาพ (Photo Editing and Retouching) แบบเรสเตอร์ผลิตโดยบริษัทอะโดบีซิสเต็มส์ปัจจุบัน โปรแกรมโฟโตชอปได้พัฒนามาถึงรุ่น CC (Creative Cloud) เป็นโปรแกรมในการออกแบบ การแต่งภาพ การ ใส่เอฟเฟกต์ยอดนิยม ด้วยความที่ใช้งานง่ายและมีเครื่องมือในการใช้งานมากมาย ใช้ในการตัดต่อภาพ การ แต่งภาพให้สวยขึ้น คมชัดขึ้น ซึ่งโปรแกรม Adobe Photoshop CC ได้เพิ่มคุณสมบัติใหม่ ๆ เข้าไป มากมาย ไม่ว่าจะเป็นการปรับแต่งรูปที่มีการสั่นไหวของกล้อง หรือการท ารูปภาพให้กลายเป็นภาพ 3 มิติ(3D) ที่มีมิติ เพิ่มมากขึ้นกว่าเดิม เพิ่มการขยายเวิร์กโฟลว์3D ให้รองรับการใช้งานกับหลายไฟล์ นอกจากนั้นยังเพิ่ม ประสิทธิภาพให้สามารถประมวลผลได้ดียิ่งขึ้น พร้อมกับการปรับปรุงในด้านของการสั่งพิมพ์รูป 3D มีมิติ คุณสมบัติใหม่ของโปรแกรม Adobe Photoshop CC 1. แก้ไขครั้งเดียวอัพเดตทุกที่ที่มีAssets ที่เชื่อมโยง Assets ใน Creative Cloud Libraries 2. ความเร็วในการส่งออกเร็วขึ้น ส่งออกภาพได้ง่ายขึ้น ช่วยให้ส่งออก Single Layer Artboard หรือ เอกสารทั้งหมดได้ด้วยคลิกเดียว ไฟล์ได้รับการบีบอัดที่ดีกว่าเดิม ตัวเลือกแสดงตัวอย่างขั้นสูง ที่มีCanvas Size และการแยก Assets ที่เพิ่มขึ้น บันทึกที่ทันสมัยสําหรับงานเว็บไซต์