เอกสารประกอบการสอน หลักสูตรประกาศนียบัตรวิชาชีพชั้นสูง 2563 นางสาวเบญญาภา สุรสุข ต าแหน่ง ครูผู้ช่วย วิทยาลัยเทคนิควังน้ำเย็น สำนักงานอาชีวศึกษาจังหวัดสระแก้ว สำนักงานคณะกรรมการการอาชีวศึกษา การออกแบบและพัฒนาเว็บไซต์ 30901-1002
คำนำ เอกสารประกอบการสอนวิชา การออกแบบและพัฒนาเว็บไซต์ (30901-1002) จัดทำขึ้น เพื่อ ประกอบการจัดการเรียนรู้ที่เน้นผู้เรียนเป็นสำคัญ ตามหลักสูตรประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) พุทธศักราช 2562 ของสำนักงานคณะกรรมการการอาชีวศึกษา กระทรวงศึกษาธิการ เนื้อหาของเอกสารประกอบการสอนมีด้วยกัน 10 หน่วยการเรียนรู้ ประกอบด้วย ความรู้เบื้องต้น เกี่ยวกับเว็บไซต์ หลักการออกแบบเว็บไซต์ การออแบบเว็บเพจด้วยPhotoshop CS6 การตกแต่งภาพสำหรับ เว็บไซต์ พื้นฐานภาษา HTML5. CSS, และ JavaScript การจัดการเว็บไซต์ด้วย Dreamweaver CS6 การ ตกแต่งเว็บเพจ ความรู้พื้นฐานการใช้ Flash CS6 การอัปโหลดไฟล์ขึ้นเชิร์ฟเวอร และกรณีศึกษาการสร้างเว็บ เพจ ผู้เรียบเรียง หวังเป็นอย่างยิ่งว่า เอกสารประกอบการสอนวิชา เทคโนโลยีเรือข่ายไร้สาย เล่มนี้ จะสามารถใช้ประกอบการศึกษาให้เกิดการเรียนรู้และเกิดประโยชน์แก่ผู้เรียน ผู้สอน ตลอดจนผู้สนใจศึกษา ทั่วไปได้เป็นอย่างดี หากมีข้อผิดพลาดประการใด ผู้เรียบเรียง ขอน้อมรับคำติชมเพื่อเป็นประโยชน์ในการ ปรับปรุงแก้ไขในโอกาสต่อไป เบญญาภา สุรสุข แผนกเทคโนโลยีสารสนเทศ วิทยาลัยเทคนิควังน้ำเย็น
สารบัญ เรื่อง หน้า หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์ 1 หน่วยที่ 2 หลักการออกแบบเว็บไซต์ 10 หน่วยที่ 3 การออแบบเว็บเพจด้วยPhotoshop CS6 17 หน่วยที่ 4 การตกแต่งภาพสำหรับเว็บไซต์ 28 หน่วยที่ 5 พื้นฐานภาษา HTML5. CSS, และ JavaScript 41 หน่วยที่ 6 การจัดการเว็บไซต์ด้วย Dreamweaver CS6 66 หน่วยที่ 7 การตกแต่งเว็บเพจ 105 หน่วยที่ 8 ความรู้พื้นฐานการใช้ Flash CS6 112 หน่วยที่ 9 การอัปโหลดไฟล์ขึ้นเชิร์ฟเวอร์ 115 หน่วยที่ 10 กรณีศึกษาการสร้างเว็บเพจ 140
1 หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์ สาระการเรียนรู้ 1. ความหมายและความสำคัญของเว็บไซต์ 2. ที่มาของเว็บไซต์ 3. ประเภทของเว็บไซต์ 4. คำศัพท์พื้นฐานที่เกี่ยวข้องกับเว็บไซต์ 5. โปรแกรมที่นิยมในการพัฒนาเว็บไซต์ 1. ความหมายและความสำคัญของเว็บไซต์ เว็บไซต์(Website) หมายถึง หน้าเว็บเพจที่จัดทำขึ้น เพื่อนำเสนอข้อมูลต่างๆ ผ่านทางคอมพิวเตอร์ และอินเทอร์เน็ต โดยจะมีหน้าเว็บเพจหลายๆ หน้าที่เชื่อมโยงเข้ากับไฮเปอร์ลิ้งค์เพื่อให้สามารถเปิดไปยังหน้า เพจต่างๆ ได้อย่างง่ายดายและถูกจัดเก็บไว้ใน www. (เวิลด์ไวด์เว็บ) โดยเว็บไซต์ส่วนใหญ่นั้นก็มีทั้งเว็บไซต์ที่ เปิดให้เข้าชมได้ฟรี และเว็บไซต์ที่ต้องสมัครสมาชิกและเสียค่าบริการ จึงจะเข้าใช้งานเว็บได้ ซึ่งข้อมูลในเว็บก็ จะมีหลากหลายแบบ ขึ้นอยู่กับความต้องการนำเสนอของเจ้าของเว็บไซต์ การเรียกดูเว็บไซต์จะเรียกดูผ่านทาง ซอฟต์แวร์ ในลักษณะของเบราว์เซอร์ ที่มา : http://www.1belief.com/article/website/ ความสำคัญของเว็บไซต์ ในปัจจุบันเว็บไซต์ได้กลายเป็นสื่อที่มีความสำคัญซึ่งมีบทบาทอย่างมากใน เรื่องของการโฆษณาและ ประชาสัมพันธ์ ทั้งนี้เนื่องจากคุณสมบัติที่สามารถนำเสนอ เผยแพร่ ข้อมูลข่าวสารได้อย่างไร้ขีดจำกัด ทั้งใน เรื่องเวลาและระยะทาง ใครๆก็สามารถคลิกเข้ามาเปิดดูได้ตลอดเวลา 24 ชั่วโมง ไม่ว่าจะนั่งอยู่ส่วนใดๆของ โลกก็ตาม ด้วยข้อดีดังกล่าว บริษัท ห้างร้าน สถานประกอบการเกือบทุกแห่งทั้งภาครัฐและเอกชน หรือแม้แต่ บุคคลทั่วไป ต่างก็มีความต้องการจัดทำเว็บไซต์ขึ้นเพื่อเป็นช่องทางการสื่อสารรูปแบบใหม่ เพื่อประโยชน์ใน การเผยแพร่ข้อมูล ข่าวสาร ไปสู่กลุ่มเป้าหมาย เช่นการโฆษณาขายสินค้าและบริการในรูปแบบต่างๆ ที่มี จุดมุ่งหมายในเชิงธุรกิจ หรือการใช้เว็บไซต์เป็นช่องทางเผยแพร่ข้อมูล ข่าวสารขององค์กร เพื่อประชาสัมพันธ์
2 องค์กรให้เป็นที่รู้จักเพื่อหวังผลในการสร้างภาพลักษณ์ ขององค์กรให้เป็นที่ยอมรับ ซึ่งเว็บไซต์นั้นเป็นสื่อที่มี ประสิทธิภาพเป็นอย่างมากในการสนองภาระกิจดังกล่าว ประโยชน์ของการทำเว็บไซต์ ประโยชน์ของการทำเว็บไซต์ ไม่เพียงแต่มีประโยชน์ในการนำเสนอข้อมูล ให้กับผู้ใช้งานได้ทราบ เท่านั้น แต่ยังมีประโยชน์อื่นๆ อีกมากมาย ได้แก่ • ขยายช่องทางในการขายสินค้าและบริการ ซึ่งสามารถเข้าถึงกลุ่มลูกค้าที่ต้องการได้มากขึ้น และไม่ ต้องเสียค่าใช้จ่ายที่สูงเกินไป • สำหรับการทำธุรกิจร้านค้าออนไลน์หรือขายของบนเว็บไซต์ จะทำให้มีหน้าร้านเป็นของตัวเอง ซึ่งก็คือ โฮมเพจ และเป็นการเปิดตัวสินค้าสู่ตลาดโลก • เป็นการเสริมสร้างภาพลักษณะขององค์กร ร้านค้าและบริษัท ให้มีความน่าเชื่อถือและทันสมัยมาก ยิ่งขึ้น • มีความเป็นสากล ด้วยช่องทางการติดต่อลูกค้าที่หลากหลาย ทั้งอีเมลล์ Facebook Line และอื่นๆ • เพิ่มความสะดวกให้กับกลุ่มผู้บริโภค โดยสามารถซื้อสินค้าหรือบริการผ่านทางเว็บไซต์ได้ตลอดเวลา • ช่วยโฆษณาบริษัท องค์กรและสินค้าให้เป็นที่รู้จักอย่างแพร่หลาย ทั้งในประเทศและต่างประเทศ • ทำหน้าที่ในการส่งเสริมการขาย และบริการของบริษัท • ช่วยยกระดับมาตรฐานในการซื้อขายระหว่างประเทศ และสามารถเสริมสร้างธุรกิจให้มีความแข็งแรง ได้ดี 2. ที่มาของเว็บไซต์ เว็บไซต์ (Website, Web site หรือ Site) หมายถึง หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทาง ไฮเปอร์ลิงก์ ส่วนใหญ่จัดทำขึ้นเพื่อนำเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้าแรก ของเว็บไซต์ที่เก็บไว้ที่ชื่อหลักจะเรียกว่า โฮมเพจ เว็บไซต์โดยทั่วไปจะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดียวกัน บางเว็บไซต์จำเป็นต้องมีการสมัครสมาชิกและเสียค่าบริการเพื่อที่จะดูข้อมูลในเว็บไซต์นั้น ซึ่งได้แก่ข้อมูลทาง วิชาการ ข้อมูลตลาดหลักทรัพย์ หรือข้อมูลสื่อต่างๆ ผู้ทำเว็บไซต์มีหลากหลายระดับ ตั้งแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดับเว็บไซต์สำหรับธุรกิจหรือองค์กรต่างๆ การเรียกดูเว็บไซต์โดยทั่วไปนิยมเรียกดูผ่านซอฟต์แวร์ใน ลักษณะของ เว็บเบราว์เซอร์ เว็บไซต์แรกของโลก คือ http://info.cern.ch เปิดตัวครั้งแรกบนโลกไซเบอร์เมื่อวันที่ 6 สิงหาคม 2534(1991) สร้างโดย เซอร์ทิโมที จอห์น เบอร์เนิร์ส-ลี (Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA) หรือที่เรารู้จักในนาม ทิม เบอร์เนิร์ส-ลี ผู้คิดและพัฒนาระบบ เวิลด์ไวด์เว็บ (WorldWideWeb) เป็นคนแรกของโลก ระหว่างเดือนมิถุนายน – ธันวาคม พ.ศ. 2523 เป็นช่วงที่ ทิม เบอร์เนิร์ส-ลี ได้ทำงานเป็น Freeland อยู่ที่เซิร์น (Cern) ได้เสนอโครงการ ข้อความหลายมิติ (Hypertext) ขึ้นเพื่อใช้ในการแลกเปลี่ยนข้อมูลระหว่าง นักวิจัยด้วยกัน และมีการเริ่มสร้างระบบต้นแบบไว้แล้ว โดยใช้ชื่อว่า ENQUIRE
3 “เมื่อถึง พ.ศ. 2532 เซิร์นได้กลายเป็นศูนย์อินเทอร์เน็ตที่ใหญ่ที่สุดในยุโรป และเบอร์เนิร์ส-ลีได้ เล็งเห็นโอกาสในการใช้ “ข้อความหลายมิติ” ผนวกเข้ากับอินเทอร์เน็ต เบอร์เนิร์ส-ลีเขียนไว้ในข้อเสนอ โครงการของเขาว่า “…ผมเพียงเอาความคิดเรื่องข้อความหลายมิตินี้เชื่อมต่อเข้ากับความคิด “ทีซีพี” และ “DNS” และเท่านั้นก็จะได้ “เวิลด์ไวด์เว็บ..” เบอร์เนิร์ส-ลีร่างข้อเสนอของเขาเมื่อเดือนมีนาคม พ.ศ. 2532 และในปี พ.ศ. 2533 ด้วยความช่วยเหลือของโรเบิร์ต ไคลิยู ช่วยปรับร่างโครงการให้ ไมค์ เซนดอลล์ผู้จัดการ ของเบอร์เนิร์ส-ลีจึงรับข้อเสนอของเขา ในข้อเสนอนี้ เบอร์เนิร์ส-ลีได้ใช้ความคิดเดียวกับระบบเอ็นไควร์มาใช้ สร้างเวิลด์ไวด์เว็บ ซึ่งเขาได้ออกแบบและสร้างเว็บเบราว์เซอร์และเอดิเตอร์ตัวแรก (เรียกว่าWorldWideWeb และพัฒนาด้วย NEXTSTEP)และเว็บเซิร์บเวอร์ขึ้น เรียกว่า httpd (ย่อมาจาก HyperText Transfer Protocal Deamon) เว็บไซต์แรกสุดสร้างขึ้นที่เซิร์น นำขึ้นออนไลน์เมื่อวันที่ 6 สิงหาคม พ.ศ. 2534 ให้คำอธิบายว่า เวิลด์ไวด์เว็บคืออะไร การที่จะเป็นเจ้าของเบราว์เซอร์ทำได้อย่างไรและจะติดตั้งเว็บเซิร์บเวอร์ได้อย่างไร นอกจากนี้ยังนับเป็นเว็บไดเร็กทอรี่อันแรกของโลกด้วยเนื่องจากเบอร์เนิร์ส-ลีดูแลรายชื่อของเว็บไซต์อื่นๆ ทั้งหมด นอกจากของตนเองด้วย วัตถุประสงค์ในการสร้างเว็บไซต์ของเบอร์เนอร์ส ลี ก็เพื่อให้ผู้คนสามารถแชร์ข้อมูลต่างๆ ซึ่งมีอยู่ เพียงชิ้นเดียวร่วมกันได้โดยอาศัยระบบอินเทอร์เน็ต กล่าวง่ายๆ ก็คือ แทนที่จะต้องส่งข้อมูลที่มีอยู่ในมือไปให้ คนอื่นผลัดกันดู เราสามารถนั่งดูข้อมูลดังกล่าวได้ในเวลาพร้อมๆ กันบนเว็บไซต์โดยไม่ต้องอาศัยอยู่ที่เดียวกัน นั่นเอง 3. ประเภทของเว็บไซต์ 1. เว็บท่า (Portal site) เว็บท่านั้นอาจเรียกอีกชื่อหนึ่งได้ว่าเว็บวาไรตี้ (variety web) ซึ่งหมายถึงเว็บที่ให้บริการต่างๆ ไว้ มากมาย มักประกอบไปด้วยบริการเครื่องมือค้นหา ที่รวบรวมลิงค์ของเว็บไซต์ที่น่าสนใจไว้มากมายให้ได้ค้นหา รวมถึงบริการที่เกี่ยวกับเรื่องราวที่มีสาระและบันเทิงหลากหลายประเภท เช่น ดูหนัง ฟังเพลง ดูดวง ท่องเที่ยว IT เกม สุขภาพ หรืออื่นๆ นอกจากนั้นแล้วเว็บท่ายังมีลักษณะในการเป็นแหล่งแลกเปลี่ยนความ คิดเห็นของผู้คนในสังคมในเรื่องเกี่ยวกับประเด็นต่างๆ ซึ่งเรียกว่าเว็บชุมชน (community web) คือเป็นเว็บที่ ให้บริการพื้นที่แก่กลุ่มคนผู้ที่มีความสนใจในเรื่องเดียวกันได้เข้ามาแลกเปลี่ยนและแสดงความคิดเห็นกัน 2. เว็บข่าว (News site) เว็บข่าวมักเป็นเว็บไซต์ที่สร้างขึ้นโดยองค์กรข่าวหรือสถาบันสื่อสารมวลชนต่างๆ ที่มีสื่อมวลชน ประเภทต่างๆ ของตนอยู่เป็นหลัก เช่น สถานีโทรทัศน์ สถานีวิทยุ หนังสือพิมพ์ นิตยสาร วารสาร หรือ แม้กระทั่งกระทรวง ทบวง กรมต่างๆ แต่องค์กรเหล่านี้ได้นำเว็บไซต์มาใช้เป็นเครื่องมือในการสื่อสารอีก รูปแบบหนึ่ง เพื่อนำเสนอข่าวและสาระที่เป็นการสรุปใจความสำคัญหรือรวบรวมเนื้อหาจากข่าวในรอบเดือน หรือรอบปี ซึ่งช่วยให้ผู้ใช้สามารถค้นหาข้อมูลและติดตามข่าวสารได้ทุกที่ทุกเวลา แม้ว่าจะอยู่ที่ใดก็ตาม
4 3. เว็บข้อมูล (Information site) เว็บข้อมูลนั้นเป็นเว็บที่ให้บริการเกี่ยวกับการสืบค้นข้อมูล ข่าวสาร หรือข้อเท็จจริงต่างๆ ตนเองขึ้นมา เพื่อเป็นช่องทางให้ประชาชนหรือกลุ่มบุคคลที่สนใจ ได้เข้ามาศึกษาค้นคว้าข้อมูลที่เกี่ยวข้องกับองค์กรของตน ได้ อีกทั้งยังเป็นการสร้างโอกาสในการประชาสัมพันธ์และสร้างความเข้าใจอันดีให้เกิดแก่ประชาชนในสังคมอีก ด้วย 4. เว็บธุรกิจหรือการตลาด (Business/ Marketing site) เว็บธุรกิจหรือการตลาด เป็นเว็บไซต์ที่มักสร้างขึ้นโดยองค์กรธุรกิจต่างๆ มีจุดมุ่งหมายหลักในการ ประชาสัมพันธ์องค์กรและเพิ่มผลกำไรทางการค้า โดยเนื้อหาส่วนใหญ่หรือเกือบทั้งหมดมักจะเป็นการนำเสนอ ที่มีความน่าสนใจและตรงใจกลุ่มเป้าหมายมากที่สุด ทั้งนี้เพื่อผลกำไรทางธุรกิจนั่นเอง 5. เว็บการศึกษา (Education site) เว็บการศึกษามักเป็นเว็บที่สร้างขึ้นโดยสถาบันการศึกษาต่างๆ หรือองค์กรทั้งภาครัฐและเอกชนที่มี นโยบายในการเผยแพร่ความรู้ และให้โอกาสในการค้นคว้าหาข้อมูลเพื่อการศึกษาแก่นักเรียน นิสิต นักศึกษา รวมถึงประชาชนทั่วไป เว็บการศึกษาให้ข้อมูลเกี่ยวกับการเรียนรู้ทั้งแบบที่เป็นทางการและไม่เป็นทางการ เว็บ ที่เกี่ยวกับการศึกษาโดยตรงนั้น ได้แก่เว็บของสถาบันการศึกษา ห้องสมุด และเว็บที่ให้บริการการเรียนรู้แบบ ออนไลน์ที่เรียกว่า อี-เลิร์นนิ่ง (e-learning) นอกจากนี้แล้วยังรวมถึงเว็บที่สอนหรือให้ความรู้เกี่ยวกับเรื่อง ต่างๆ เช่น การทำเว็บ การทำอาหาร การถ่ายภาพ การเขียนโปรแกรม ฯลฯ 6. เว็บบันเทิง (Entertainment site) เว็บบันเทิงนั้นมุ่งเสนอและให้บริการต่างๆ เพื่อเสริมสร้างความบันเทิง โดยทั่วไปอาจนำเสนอเรื่องราว เกี่ยวกับการบันเทิงทั่วไป เช่น ดนตรี ภาพยนตร์ ดารา กีฬา ความรัก บทกลอน การ์ตูน เรื่องขำขัน รวมถึงการ ให้บริการดาวน์โหลดโลโก้และริงโทนสำหรับโทรศัพท์เคลื่อนที่อีกด้วย เว็บประเภทนี้อาจมีรูปแบบที่เป็น อินเตอร์แอคทีฟที่ตื่นตาตื่นใจ หรือใช้เทคโนโลยีมัลติมิเดียได้มากกว่าเว็บประเภทอื่น 7. เว็บองค์กรที่ไม่แสวงหาผลกำไร (None-profit organization site) เว็บประเภทนี้มักจะเป็นเว็บที่สร้างขึ้นโดยกลุ่มบุคคลหรือองค์กรต่างๆ ที่มีนโยบายในการสร้างสรรค์ที่ ช่วยเหลือสังคมโดยที่ไม่หวังผลกำไรหรือค่าตอบแทน ซึ่งกลุ่มบุคคลหรือองค์กรเหล่านี้ได้แก่ สมาคม ชมรม มูลนิธิ และโครงการต่างๆ โดยอาจมีจุดประสงค์เฉพาะที่แตกต่างกัน เช่น เพื่อทำความดี สร้างสรรค์สังคม พิทักษ์สิ่งแวดล้อม ปกป้องสิทธิมนุษยชน รณรงค์ไม่ให้สูบบุหรี่ หรืออาจรวมตัวกันเพื่อดูแลผลประโยชน์ของ สมาชิกในกลุ่ม 8. เว็บส่วนตัว (personal site) เว็บส่วนตัวอาจเป็นเว็บของคนๆ เดียว เพื่อนฝูง หรือครอบครัวก็ได้ โดยอาจจัดทำขึ้นด้วยเหตุผลที่ แตกต่างกัน เช่น แนะนำกลุ่มเพื่อน โชว์รูปภาพ แสดงความคิดเห็น เขียนไดอารี่ประจำวัน นำเสนอผลงาน ถ่ายทอดประสบการณ์เกี่ยวกับสิ่งที่เชี่ยวชาญหรือสนใจ โดยทั้งหมดนี้อาจทำเป็นเว็บไซต์หรือเป็นเพียงเว็บเพจ หน้าเดียวก็ได้
5 4. คำศัพท์พื้นฐานที่เกี่ยวข้องกับเว็บไซต์ 4.1 เว็บเบราว์เซอร์(Web browser) คือ โปรแกรมคอมพิวเตอร์ที่ใช้ในการท่องเว็บ และมีการจัดเก็บข้อมูลสารสนเทศต่างๆ ด้วยภาษา เฉพาะ เช่น ภาษา HTML ซึ่งก็เปรียบเสมือนกับเป็นเครื่องมือที่ใช้ในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาด ใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ นอกจากนี้ยังสามารถดูเอกสารในเว็บเซิร์ฟเวอร์ได้ ไม่ว่าเว็บเหล่านั้นจะแสดงข้อมูล ในลักษณะของภาพ ระบบมัลติมีเดีย รูปภาพหรือข้อความ ในปัจจุบันเว็บเบราว์เซอร์ที่รองรับระบบ HTML 5 สามารถอ่าน CSS 3 ได้อย่างสวยงาม และกำลังได้รับความนิยมมากที่สุด ก็มี 4 ประเภทดังนี้ • Internet Explorer • Mozilla Firefox • Google Chrome • Safari 4.2 โฮมเพจ (Home Page) คือหน้าแรกของเว็บไซต์เมื่อเปิดเข้าไปยังเว็บไซต์ใดเว็บไซต์หนึ่ง โดยหน้าแรกนี้จะรวมเมนูและ เรื่องราวต่างๆ ไว้มากมาย ซึ่งก็มีความสำคัญเป็นอย่างมาก เพราะหากหน้าแรกมีการออกแบบได้อย่างสวยงาม และจัดหน้าอย่างเป็นระเบียบก็จะทำให้ผู้ชมเกิดความสนใจและอยากเข้าชมเว็บมากขึ้น ที่มา : http://www.1belief.com/article/website/ 4.3 เว็บเพจ (Web Page) คือหน้าเอกสารต่างๆ ที่อยู่ในรูปของ HTML โดยจะนำเสนอข้อมูลหรือเรื่องราวต่างๆ เป็นหน้าๆ ไป และใช้การเชื่อมโยงเพื่อให้สามารถคลิกไปหน้าเว็บเพจแต่ละหน้าได้ง่ายขึ้น 4.4 เว็บ Static คือเว็บที่แสดงผล เพื่อให้ความรู้หรือข้อมูลแก่ผู้เข้าชมเว็บเพียงอย่างเดียว ไม่สามารถโต้ตอบหรือ รับส่งข้อมูลกับผู้ที่เข้าชมเว็บได้ซึ่งส่วนใหญ่แล้วเว็บไซต์ประเภทนี้ ก็จะเป็นเว็บ Gallery รูปภาพ เว็บของ บริษัทหรือองค์กรต่างๆ และเว็บให้ความรู้ทั่วไป
6 4.5 เว็บ Dynamic เป็นเว็บไซต์ที่สามารถตอบโต้ และรับส่งข้อมูลระหว่างผู้เข้าชมกับเว็บไซต์ได้ซึ่งเว็บเหล่านี้ส่วนใหญ่ก็ จะมีระบบเว็บบอร์ด รวมไปถึง Social Media ประเภทต่างๆ มีการสมัครสมาชิก หรือเป็นเว็บขายสินค้า ออนไลน์ที่มีระบบแชทกับผู้ขาย เป็นต้น 4.6 Web Service เป็นบริการด้านข้อมูล ที่สามารถดึงข้อมูลของอีกเว็บหนึ่งไปแสดงผลในอีกเว็บหนึ่งได้ 4.7 Hosting คือ พื้นที่เก็บข้อมูลเว็บไซต์ทั้งหมด อาจจะมีเป็นขององค์กรเองหรือโดยเช่าใช้รายปีหรือรายเดือน ขนาดของพื้นที่เก็บข้อมูล ขึ้นอยู่กับปริมาณข้อมูลของเว็บไซต์นั้นๆเป็นพื้นที่ของคอมพิวเตอร์แม่ข่ายที่ทางผู้ ให้บริการได้ทำการจัดสรรมาให้เช่า โดยส่วนใหญ่จะมีการให้เช่าเป็นแบบรายเดือน รายปีหรือตามแต่ผู้ ให้บริการกำหนด 4.8 อินเตอร์เน็ต (Internet) เป็นตัวกลางในการเชื่อมต่อให้ผู้คนสามารถท่องเว็บไซต์ต่างๆ ได้อย่างง่ายดาย และช่วยให้กลุ่มองค์กร ธุรกิจหรือบริษัทสามารถนำเสนอข้อมูลของตนลงบนอินเทอร์เน็ต ผ่านทางเว็บไซต์ เป็นการให้ความรู้และ แลกเปลี่ยนข้อมูลข่าวสารต่อกันได้อย่างมีประสิทธิภาพ 4.9 HTML HTML คือ ภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจขึ้นมา โดยมีแม่แบบที่มาจาก ภาษา SGML โดย HTML จะเป็นภาษาในการสร้างเว็บที่สามารถเรียนรู้และทำความเข้าใจได้ง่าย ซึ่งในปัจจุบัน ก็มีการนำมาใช้กันอย่างแพร่หลายและมีการพัฒนาและกำหนดมาตรฐานจากองค์กร World Wide Web Consortium (W3C) 4.10 CSS CSS คือ ภาษาที่ใช้สำหรับตกแต่งเอกสาร HTML/XHTML ให้มีหน้าตา สีสัน ระยะห่าง พื้นหลัง เส้น ขอบและอื่นๆ ตามที่ต้องการ CSS ย่อมาจาก Cascading Style Sheets มีลักษณะเป็นภาษาที่มีรูปแบบใน การเขียน Syntax แบบเฉพาะและได้ถูกกำหนดมาตรฐานโดย W3C เป็นภาษาหนึ่งในการตกแต่งเว็บไซต์ ได้รับความนิยมอย่างแพร่หลาย ประโยชน์ของ CSS CSS มีประโยชน์อย่างหลากหลาย ซึ่งได้แก่ 1. ช่วยให้เนื้อหาภายในเอกสาร HTML มีความเข้าใจได้ง่ายขึ้นและในการแก้ไขเอกสารก็สามารถทำ ได้ง่ายกว่าเดิม เพราะการใช้ CSS จะช่วยลดการใช้ภาษา HTML ลงได้ในระดับหนึ่ง และแยก ระหว่างเนื้อหากับรูปแบบในการแสดงผลได้อย่างชัดเจน 2. ทำให้สามารถดาวน์โหลดไฟล์ได้เร็ว เนื่องจาก code ในเอกสาร HTML ลดลง จึงทำให้ไฟล์มี ขนาดเล็กลง
7 3. สามารถกำหนดรูปแบบการแสดผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีการแสดงผลใน เอกสารแบบเดียวทั้งหน้าหรือในทุกๆ หน้าได้ ช่วยลดเวลาในการปรับปรุงและทำให้การสร้าง เอกสารบนเว็บมีความรวดเร็วยิ่งขึ้น นอกจากนี้ยังสามารถควบคุมการแสดงผล ให้คล้ายหรือ เหมือนกันได้ในหลาย Web Browser 4. ช่วยในการกำหนดการแสดงผลในรูปแบบที่มีความเหมาะกับสื่อต่างๆ ได้เป็นอย่างดี 5. ทำให้เว็บไซต์มีความเป็นมาตรฐานมากขึ้นและมีความทันสมัย สามารถรองรับการใช้งานใน อนาคตได้ดี 4.11 โดเมนเนม (Domain Name) โดเมนเนม (Domain Name) คือ ชื่อเว็บไซต์ (ที่ไม่มีการซ้ำกันกับเว็บไซต์อื่นๆ) เช่น google.com, enjoyday.net เป็นชื่อที่จะใช้ระบุลงไปในคอมพิวเตอร์เพื่อให้สามารถค้นหาได้ในโดเมนเนมซีสเทม โดยการตั้ง ชื่อโดเมนนั้น จะต้องเป็นชื่อที่ง่ายต่อการจดจำ เพื่อให้สามารถเข้าใช้งานได้ง่ายขึ้น เงื่อนไขในการตั้งชื่อโดเมนเนม จะต้องมีตัวอักษรภาษาอังกฤษ ตัวเลขและ “-” คั่นด้วย “.” มีความ ยาวตั้งแต่ 1 ถึง 63 ตัวอักษร และไม่ว่าจะเป็นตัวอักษรตัวใหญ่หรือตัวเล็กก็ถือว่าเหมือนกัน เช่น • 1procast.com (ถูก) • oneprocast.com (ถูก) • 1-procast.com (ถูก) • 1_procast.com (ผิด) 4.12. Header คือ ส่วนหัวของเว็บไซต์ ซึ่งอยู่บนสุดของเว็บไซต์ แสดงชื่อเว็บไซต์ Logo และรายการเมนูหลักของเว็บ เพื่อเป็นช่องทางในการเข้าถึงคงรายละเอียดอื่นๆ เพิ่มเติมขององค์กร 4.13 Footer คือ ส่วนท้ายของเว็บไซต์ เน้นเป็นส่วนช่องทางลัดในการสื่อสารกับองค์กร และเข้าถึงข้อมูลที่สำคัญ ของสินค้าและบริการ รวมทั้งข้อมูลการติดต่อองค์กร เป็นต้น 4.14 Menu Bar คือ ส่วนแถบเมนูของเว็บไซต์ 4.15 Upload คือ การส่งข้อมูลจากเครื่องของเราไปยัง Web Server เมื่อเราสร้าง Web page แต่ละหน้าแล้ว ต้อง ส่งข้อมูลไปเก็บไว้ที่ Web Server ที่เป็นเครื่องคอมพิวเตอร์ที่ให้บริการข้อมูล www โดยอาศัยโปรแกรม FTP 4.16 Search engine เป็นเครื่องมือหรือโปรแกรมในการค้นหาเว็บต่างๆ และข้อมูลต่างๆ อาทิเช่น yahoo.com, Google.com, bing.com เป็นต้น
8 4.17 Banner คือ ป้ายโฆษณา หรือรูปภาพที่ต้องการสื่อถึงสินค้า และบริการในข้อความสั้นๆ และใช้รูปภาพเป็น ตัวกลางหลักในการสร้างความจดจำ และดึงดูดใจลูกค้า 4.18 SEO (Search Engine optimization) คือ บริการจัดการให้เว็บไซต์ติดอันดับในการค้นหาของระบบ Search engine เป็นอันดับต้นๆ เพื่อให้ ผู้ใช้งานเว็บไซต์เข้าถึงรายละเอียด เนื้อหาของตัวเว็บไซต์ง่ายขึ้น 4.19 Add Product คือ การเพิ่มสินค้า (ข้อมูลสินค้า รูปภาพ) เข้าสู่เว็บไซต์ 4.20 Add Content คือ การเพิ่มบทความ รายละเอียดข้อมูลของเว็บไซต์ หรือข้อมูลที่เกี่ยวข้องเข้าสู่เว็บไซต์ 4.21 Template คือ โครงร่างของหน้าเว็บไซต์ที่ถูกออกแบบมาเพื่อให้ลูกค้าได้เลือกใช้งานตามความพึงพอใจ 4.22 Theme คือ รูปแบบของเว็บไซต์ที่ลูกค้าต้องการ อาทิเช่น ลวดลาย โทนสี เป็นต้น 4.23 Lay Out คือ การจัดวางรูปแบบของเว็บไซต์ เป็นการวางสัดส่วนข้อมูลของเว็บไซต์ให้ใช้งานง่าย 4.24 Category คือ หมวดหมู่หลักของสินค้า หรือบริการ 4.25 Webmaster คือ ผู้ดูแล ปรับปรุงเว็บไซต์ 4.26 E-newsletter คือ จดหมายข่าวอิเล็คทรอนิคส์ ที่ทางเว็บไซต์จัดส่งให้สมาชิกผ่านระบบอินเทอร์เน็ต 4.27 Keyword คือคำค้นที่ระบุบนเว็บไซต์ เพื่อให้ผู้ใช้งานเว็บไซต์สามารถค้นหาเว็บได้ง่ายๆ จากคำคำนั้น 4.28 Spam คือ Email ที่เป็นขยะที่เราไม่ต้องการ โดยส่งมาจาก Email ที่เราไม่รู้จักซึ่งจะทำให้เราเสียพื้นที่เก็บ ข้อมูลของเราไปโดยเปล่า ประโยชน์ จุดประสงค์ของ Email Spam นั้นผู้ส่งส่วนใหญ่ต้องการโฆษณาบริการ ต่างๆ ที่ตัวเองมี 4.29 FAQ (Frequently Asked Questions) คือ คำถามที่พบบ่อย จากลูกค้าหรือผู้ใช้งานเว็บไซต์ ดังนั้นทางผู้ดูแลเว็บไซต์จึงนำคำถาม และคำตอบ เหล่านั้น ขึ้นบนเว็บไซต์เพื่อนำเสนอให้กับผู้ใช้งานท่านอื่นๆ สามารถรับทราบถึงปัญหา และวิธีการแก้ไขปัญหา ได้อย่างง่ายขึ้น
9 5. โปรแกรมที่นิยมในการพัฒนาเว็บไซต์ Adobe Dreamweaver CC โปรแกรม Adobe Dreamweaver เป็นโปรแกรมช่วยเขียนโฮมเพจคุณภาพสูง มีเครื่องมือหลากหลาย ที่ช่วยให้เขียนโฮมเพจ หรือเว็บไซต์ได้สะดวกสบายขึ้น ด้วยระบบการแสดงผลและคำสั่งอัตโนมัติ Web Page Maker (โปรแกรมช่วยออกแบบเว็บ) 3.21 โปรแกรม Web Page Maker เป็นโปรแกรมช่วยออกแบบเว็บและสร้างเว็บได้ง่ายๆ ด้วยภาษา HTML มีรูปแบบเว็บสำเร็จรูปให้เลือกใช้ ใช้หลักการลากแล้ววาง เลือกโค้ดสี HTML ได้ สนับสนุน JavaScript และมี FTP อัพโหลดไฟล์ในตัว KompoZer (โปรแกรมสร้างเว็บ โปรแกรมเขียนเว็บ ฟรี สนับสนุน CSS HTML) 0.7.10 โปรแกรม KompoZer เป็นโปรแกรมสร้างเว็บ (โปรแกรมเขียนเว็บ) สำหรับคนอยากทำเว็บเอง สนับสนุน HTML CSS เหมือน Dreamwaver แต่เร็วกว่า ขนาดเล็ก เป็นโปรแกรมแจกฟรี PHP Creator (โปรแกรมช่วยสร้าง เขียนโค้ด PHP) 4.22 โปรแกรม PHP Creator โปรแกรมช่วยเขียนโค้ด PHP สำเร็จรูป เช่น เชื่อมต่อกับฐานข้อมูล MySQL ได้ง่ายสุด ตั้งแต่การค้นหา ดึงข้อมูล เพิ่ม ลบ แบ่งหน้า แบ่งคอลัมน์ ฯลฯ Aptana (โปรแกรมสร้างเว็บ โปรแกรมออกแบบเว็บ พัฒนาเว็บไซต์) 3.6.0 โปรแกรม Aptana เป็นโปรแกรมสร้างเว็บ พัฒนาเว็บไซต์ เอาไว้ออกแบบเว็บ พัฒนาเว็บไซต์ สามารถ สร้างเว็บไซต์ หรือ Web Application ต่างๆ ผ่านโปรแกรมสร้างเว็บตัวนี้ได้ฟรี Adobe Muse (โหลดโปรแกรม Muse ออกแบบเว็บเพจ) CC โปรแกรม Adobe Muse เป็นโปรแกรมออกแบบเว็บเพจและเว็บไซต์สำหรับภาษา HTML ไม่ จำเป็นต้องมานั่งเขียนโค้ดให้เสียเวลา และมีเทมเพลตสวยๆ ให้เลือกไปใช้งานกันได้ WebSite X5 Evolution (โปรแกรม WebSite X5 สร้างเว็บเพจ) โปรแกรม WebSite X5 Evolution สร้างเว็บไซต์ง่ายๆ ด้วยตัวคุณเอง ทั้งการออกแบบหน้าตา เว็บไซต์ การเขียนโค้ดในภาษาต่างๆ ที่จะใช้งาน มีเทมเพลตให้เลือก สะดวก สวยงาม ไม่ต้องเสียเวลาออกแบบ ให้ยุ่งยาก PageBreeze Free HTML Editor (โปรแกรม สร้างเว็บไซต์) 4.0e การสร้างเว็บไซต์ที่ไม่จำเป็นต้องเขียนโปรแกรมหรือสคริปต์ PageBreeze Free HTML Editor เป็น ตัวเลือกที่น่าสนใจทีเดียวครับ… TOWeb (โปรแกรมเขียนเว็บ TOWeb) โปรแกรม TOWeb ซอฟท์แวร์ที่ออกแบบมาสำหรับคนและองค์กรที่ต้องการที่จะสร้าง Blog หรือ เว็บไซต์ แม้แต่ผู้ที่ไม่เคยใช้งานมาก่อนก็สามารถใช้ได้อย่างสบายๆ มี Theme ให้เลือกใช้อย่างมากมาย WebSite X5 Professional 10 (โปรแกรม WebSite X5 สร้างเว็บสำเร็จรูป) โปรแกรม WebSite X5 Professional 10 โปรแกรมสำหรับสร้างเว็บไซต์สำหรับเร็จรูปและแสดงผล บนสมาร์ทโฟนแล้วแท็บเล็ตได้ทันที ประหยัดเวลาสร้างสรรค์เว็บไซต์ได้ด้วยตัวเองง่ายๆ
10 หน่วยที่ 2 หลักการออกแบบเว็บไซต์ การออกแบบเว็บไซต์ในขั้นตอนนี้เป็นการวางโครงสร้างทั้งหมดของเว็บไซต์ ว่าแต่ละหน้าจะ ประกอบด้วยเนื้อหาอะไรบ้าง มีภาพประกอบ ตาราง ฯลฯ ตลอดจนการเชื่อมโยงเว็บเพจแต่ละหน้าเข้าด้วยกัน 1. การกำหนดโครงสร้างเว็บไซต์ การกำหนดโครงสร้างของเว็บไซต์ เป็นการออกแบบส่วนประกอบทั้งหมดของเว็บไซต์ที่ต้องการให้ผู้ เข้ามาเยี่ยมชมได้ทราบ เช่น ทั้งเว็บไซต์มีกี่หน้า แต่ละหน้ามีเนื้อหาอะไรบ้าง เนื้อหาแต่ละส่วนเชื่อมโยงกันย่าง ไร เปรียบเสมือนการเขียนหนังสือที่แบ่งเนื้อหาออกเป็นบทย่อยๆ แต่ละบทมีหัวข้อใหญ่และหัวข้อย่อยรียง ลำดับกันไป ตัวอย่าง การออกแบบเว็บไซต์ บทเรียนผ่านเว็บ เรื่องการสร้างเว็บไซต์ด้วย Dreamweaver CS 6
11 2. การออกแบบหน้าโฮมเพจ (Index.html) 2.1 ส่วนประกอบสำคัญ ๆ ในหน้าโฮมเพจ ในหน้าโฮมเพจ (หน้าเเรกของเว็บไซต์) นั้น ควรมีส่วนประกอบสำคัญ ๆ อย่างครบถ้วน เพื่อให้ผู้ชม สามารถเข้ามาใช้งานได้สะดวก ซึ่งหน้าโฮมเพจส่วนใหญ่มักมีส่วนประกอบที่สำคัญ ดังนี้ 1) โลโก้ (Logo) สิ่งสำคัญที่จะช่วยให้ผู้เข้าเว็บจดจำเว็บไซต์ขอฃเราได้ก็คือ “โลโก้” นอกจากนี้เเล้วโลโก้ยังช่วยให้ เว็บไซต์ของเราดูมีเอกลักษณ์อีกด้วย โดยเรานิยมวางตำเเหน่งโลโก้ไว้ที่มุมบนซ้ายเพราะเป็นจุดที่สามารถ สังเกตได้ง่าย ซึ่งจากการวิจัยพบว่าวางตำเเหน่งโลโก้ที่มุมบนซ้ายนั้นช่วยให้ผู้ชมสามารถจดจำเว็บไซต์ของเรา ได้ถึง 84% เลยทีเดียวคุณค่าของการวางตำแหน่งโลโก้ ● บนซ้าย (Upper Left) = 84% ● บนขวา (Upper Right) = 6% ● บนกลาง (Upper Center) = 6% ● ที่อื่น ๆ (Other Position) = 4% จะสังเกตได้ว่าการออกแบบโลโก้ของเเต่ละเว็บไซต์นั้นจะไม่ซับซ้อนมากนั้น แต่จะเน้นไปในทางด้าน การออกแบบให้เรียบง่ายและสามารถอ่านชื่อเว็บไซต์ได้ชัดเจนมากกว่า เนื่องจากใช้ภาพโลโก้ที่ซับซ้อนอาจ ส่งผลให้ ผู้เข้าชมไม่สามารถจดจำชื่อเว็บไซต์ของเราได้นั่นเอง 2) เมนูหลัก (Link Menu) เมนูหลักเป็นจุดเชื่อมโยงสิ่งสำคัญๆ ที่รวบรวมไว้ในรูปแบบของเมนูปุ่มหรือข้อความ โดยผู้เข้าชมจะ สามารถรับรู้ได้ว่าภายในเว็บไซต์นี้มีเรื่องราวที่น่าสนใจอย่างไรบ้าง เช่น News (ข่าวใหม่ ๆ) และLink (เชื่อมโยงเว็บที่เกี่ยวข้อง) เป็นต้น รูปแบบของเมนูหลักที่นิยมใช้กันมักเป็นเมนูแบบแนวตั้งและเมนูแบบแนวนอนตามลำดับ 3) โฆษณา (Banner) โฆษณานั้นเป็นส่วนที่สำคัญอีกเช่นเดียวกัน เพราะเว็บไซต์ที่มีโฆษณาจะช่วยส่งเสริมภาพลักษณ์ ความ น่าเชื่อถือ และช่วยกระตุ้นความสนใจเพราะมักมีการใช้ภาพเคลื่อนไหว (Gif animation) ประกอบซึ่งจะทำให้ เว็บไซต์ของเราดูตื่นตาตื่นใจมากยิ่งขึ้น จากการวิจัยพบว่าภาพเคลื่อนไหวยังช่วยให้เว็บไซต์ของเราดูน่าสนใจ มากยิ่งขึ้น 30% เลยทีเดียว นอกจากนี้แล้วยังสามารถแสดงถึงความนิยมของผู้เข้าชมได้อีกด้วย แต่ก็ไม่ควรให้ มีโฆษณามากเกินไปและควรจัดวางตำแหน่งให้เหมาะสมด้วย 4) ภาพประกอบและเนื้อหา (Content) เนื้อหาสาระที่น่ารู้เป็นส่วนสำคัญอย่างยิ่งที่จะทำให้ผู้เข้าชมอยากจะเข้าเยี่ยมชมเว็บไซต์ของเรามาก ขึ้นและใช้บริการอย่างสม่ำเสมอ เราจึงควรอัพเดทเนื้อหาให้ใหม่สด มีรูปเเบบการจัดวางที่อ่านง่าย เนื้อหาไม่ ยาวหรือ สั้นจนเกินไป นอกจากนี้หากเราใช้ภาพประกอบที่สวยงามก็จะช่วยให้เนื้อหาดูดึงดูดใจมากยิ่งขึ้น ซึ่งการใช้ ภาพประกอบที่สวยงามและฟอนต์ที่อ่านง่ายจะช่วยให้เนื้อหาของเราน่าสนใจเพิ่มมากยิ่งขึ้นถึง 40-45%
12 2.2 ทำอย่างไรให้โฮมเพจดูดี ในความเป็นจริงแล้วการออกเเบบเว็บไซต์ไม่ได้มีรูปเเบบที่ตายตัวและเเน่นนอนเเต่ก็มีองค์ประกอบ หลายอย่างที่จะช่วยให้เว็บไซต์เราดูดีและน่าใช้ ผู้เขียนจึงมีข้อแนะนำและวิธีการง่าย ๆ ที่จะช่วยให้โฮมเพจของ คุณดูดีขึ้น 1) เลือกใช้สีให้เหมาะสม การเลือกใช้สีนั้นมีผลอย่างมากในภาพรวมของเว็บไซต์ เนื่องจากสีเเต่ละสีนั้นมีผลต่ออารมณ์และความรู้สึกกับ ผู้ที่เข้ามาใช้บริการ ดังนั้นเราจึงควรเลือกใช้สีให้เหมาะสมกับเว็บไซต์ โดยเเต่ละประเภทของสีนั้นจะให้ ความหมายและความรู้สึกที่ต่าง ๆ กันนี้ ● สีฟ้า เป็นสีของท้องฟ้าจึงช่วยให้เรารู้สึกปลอดโปร่งโล่งสบาย สีฟ้านั้นเป็นสีที่ดูแล้วสบายตาและ นอกจากนี้ยังรู้สึกนุ่มนวลและสุขสบายอีกด้วย ● สีน้ำเงิน ให้ความรู้สึกถึงความจริงจัง มั่นคงและจริงจัง สงบและปลอดภัย นอกจากนี้แล้วยังให้ ความรู้สึกหรูหรา มีระดับ มีราคาและความเป็นชายอีกด้วย ● สีเขียว สีเขียวเป็นสีของต้นไม้ใบหญ้าทำให้เรารู้สึกสดชื่นเย็นสบาย และชวนให้นึกถึงความเป็น ธรรมชาติ สีเขียวนั้นเป็นสีที่สบายตามากที่สุดสีหนึ่ง ● สีเเดง ให้ความรู้สึกร้อนแรง ความรุนแรงความมีพลังและความตื่นเต้นสนุกสนาน นอกจากนี้แล้ว เป็นสีมงคลของคนจีนอีกด้วย ● สีเหลืองและสีส้ม สีเหลืองนั้นให้อารมณ์สดใสและดึงดูดสายตาเเต่บางครั้งอาจทำให้รู้สึกเหนื่อย ส่วนสีส้มนั้นทำให้ความรู้สึกอบอุ่นกระตือรือร้นและนอกจากนี้แล้วยังดูทันสมัยอีกด้วย ● สีเทา ให้ความรู้สึกสุภาพ สุขุม สงบ และมั่นคง และยังให้ความรู้สึกหม่อนหมอง และโศกเศร้าอีก ด้วย ● สีขาว ให้ความรู้สึกเรียบง่าย สะอาดสะอ้าน โล่งสบายและบริสุทธิ์ 2) มีความเป็นเอกลักษณ์ เราสามารถออกเเบบเว็บไซต์ให้มีความเป็นเอกลักษณ์อย่างง่ายๆ ด้วยการเลือกใช้สีฟอนต์และ ภาพประกอบที่มีความคล้ายคลึงกันทุกๆ หน้าของเว็บไซต์ เนื่องจากเว็บไซต์ที่มีเอกลักษณ์มักทำให้ผู้ใช้จดจำได้ ง่าย นอกจากนี้ยังมีจุดสนใจอื่น ๆ เป็นส่วนประกอบอีก เช่น โลโก้ สี และความคล้ายคลึงกัน 3) ต้องสามารถใช้งานได้อย่างเหมาะสม หากเว็บไซต์ของคุณนั้นมีการใช้งานที่สลับซับซ้อนจนเกินไปอาจมีผลทำให้ผู้ที่มาใช้บริการหงุดหงิด รำคาญใจได้ และทำให้ไม่อยากกลับมาใช้บริการที่เว็บไซต์ของเราอีก โดยเฉพาะหากเว็บไซต์ของคุณเป็น เว็บไซต์เพื่อการบริการซื้อขายแล้วล่ะก็ จะยิ่งเป็นผลเสียอย่างมากในการสั่งซื้อสินค้าและใช้บริการ
13 4) สามารถแสดงผลได้อย่างรวดเร็ว ในการออกแบบหน้าโฮมเพจนั้นนอกจากจะเน้นหน้าตาที่น่าสนใจแล้ว การแสดงผลที่รวดเร็วก็จะทำ ให้เว็บไซต์ไม่น่าเบื่อ ดังนั้นการใช้ภาพหรือกราฟิกประกอบจึงควรคำนึงถึงเรื่องระยะเวลาในการแสดงผล เว็บไซต์ด้วย เนื่องจากยิ่งมีภาพประกอบมากเวลาในการแสดงผลก็จะยิ่งมากด้วยไปด้วย นอกจากหัวข้อต่างๆ ที่กล่าวมาแล้วลักษณะของตัวอักษรที่ใช้ประกอบ ก็เป็นส่วนสำคัญอีกอย่างหนึ่งที่จะช่วยให้โฮมเพจของเราดู ทันสมัย น่าเชื่อถือหรือสนุกสนานมากยิ่งขึ้น เนื่องจากตัวหนังสือแต่ละลักษณะนั้นจะให้ความรู้สึกแตกต่างกัน ไป ● ตัวหนังสือแบบ Serif (มีเชิง) ให้ความรู้สึกของความคลาสสิก ดูเก่าแก่ และค่อนข้างเป็น ทางการ ● ตัวหนังสือแบบ San Serif (ไม่มีเชิง) ให้ความรู้สึกเรียบง่าย มีความทันสมัยและนอกจากนี้แล้ว ยังช่วยให้อ่านง่ายอีกด้วย ● Script (ตัวอักษรแบบลายมือ) ให้ความรู้สึกสนุกสนานเป็นกันเองและดูไม่เป็นทางการ มักใช้กับ คำโฆษณาสั้น ๆ ● ตัวอักษรแบบมีหัว มักใช้กับบทความยาวๆ เพราะช่วยให้อ่านง่าย เช่น หนังสือเรียน แต่ใน ขณะเดียวกันก็ดูโบราณ ● ตัวอักษรแบบไม่มีหัว ตัวหนังสือแบบนี้ค่อนข้างที่จะอ่านยาก มักใช้กับข้อความสั้น ๆ แต่ก็ให้ ความรู้สึกที่ทันสมัย 3. การออกแบบโครงสร้างเว็บ รูปแบบโครงสร้างเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ ขึ้นอยู่กับลักษณะของข้อมูลและความชอบของผู้ออกแบบ ตลอดจน กลุ่มเป้าหมายที่ต้องการนำเสนอ โครงสร้างของเว็บไซต์ประกอบไปด้วย 4 รูปแบบใหญ่ๆ ได้ดังนี้ 1. โครงสร้างแบบเรียงลำดับ (Sequential Structure) เป็นโครงสร้างแบบธรรมดาที่ใช้กันมากที่สุดเนื่องจากง่ายต่อการจัดระบบข้อมูล ข้อมูลที่นิยม จัดด้วย โครงสร้างแบบนี้มักเป็นข้อมูลที่มีลักษณะเป็นเรื่องราวตามลำดับของเวลา เช่น การเรียงลำดับตามตัวอักษร ดรรชนี สารานุกรม หรืออภิธานศัพท์ โครงสร้างแบบนี้ เหมาะกับเว็บไซต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การ ลิงก์ (Link) ไปทีละหน้า ทิศทางของการเข้าสู่เนื้อหา (Navigation) ภายในเว็บจะเป็นการดำเนินเรื่องใน ลักษณะเส้นตรง โดยมี ปุ่มเดินหน้า-ถอยหลังเป็นเครื่องมือหลักในการกำหนดทิศทาง ข้อเสียของโครงสร้าง ระบบนี้คือ ผู้ใช้ไม่สามารถกำหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้ (ที่มาภาพ http://www.oknation.net/blog/print.php?id=185314)
14 2. โครงสร้างแบบลำดับขั้น (Hierarchical Structure) เป็นวิธีที่ดีที่สุดวิธีหนึ่งในการจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูล โดยแบ่งเนื้อหา ออกเป็น ส่วนต่างๆ และมีรายละเอียดย่อยๆ ในแต่ละส่วนลดหลั่นกันมาในลักษณะแนวคิดเดียวกับ แผนภูมิองค์กร จึงเป็นการง่ายต่อการทำความเข้าใจกับโครงสร้างของเนื้อหาในเว็บลักษณะนี้ ลักษณะเด่นเฉพาะของ เว็บ ประเภทนี้คือการมีจุดเริ่มต้นที่จุดร่วมจุดเดียว นั่นคือ โฮมเพจ (Homepage) และเชื่อมโยงไปสู่เนื้อหา ใน ลักษณะเป็นลำดับจากบนลงล่าง (ที่มาภาพ http://www.oknation.net/blog/print.php?id=185314) 3. โครงสร้างแบบตาราง (Grid Structure) โครงสร้างรูปแบบนี้มีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเพิ่มความยืดหยุ่น ให้แก่ การเข้าสู่เนื้อหาของผู้ใช้ โดยเพิ่มการเชื่อมโยงซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน เหมาะแก่ การแสดงให้ เห็นความสัมพันธ์กันของเนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็นลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถ เปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้ เช่น ในการศึกษาข้อมูลประวัติศาสตร์ สมัยสุโขทัย อยุธยา ธนบุรี และรัตนโกสินทร์ โดยในแต่ละสมัยแบ่งเป็นหัวข้อย่อยเหมือนกันคือ การปกครอง ศาสนา วัฒนธรรม และ ภาษา ในขณะที่ผู้ใช้กำลังศึกษาข้อมูลทางประวัติศาสตร์เกี่ยวกับ การปกครองในสมัยอยุธยา ผู้ใช้อาจศึกษา หัวข้อศาสนาเป็นหัวข้อต่อไปก็ได้ หรือจะข้ามไปดูหัวข้อ การปกครองในสมัยรัตนโกสินทร์ก่อนก็ได้เพื่อ เปรียบเทียบลักษณะข้อมูลที่เกิดขึ้นคนละสมัยกัน (ที่มาภาพ http://www.oknation.net/blog/print.php?id=185314)
15 4. โครงสร้างแบบใยแมงมุม (Web Structure) โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกัน ได้หมด เป็นการสร้างรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ ผู้ใช้สามารถกำหนดวิธีการเข้าสู่เนื้อหาได้ด้วย ตนเอง การ เชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงใยข้อความที่มีมโนทัศน์ (Concept) เหมือนกัน ของแต่ละหน้าใน ลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย โครงสร้างลักษณะนี้จัดเป็นรูปแบบที่ ไม่มีโครงสร้างที่แน่นนอน ตายตัว (Unstructured) นอกจากนี้การเชื่อมโยงไม่ได้จำกัดเฉพาะเนื้อหา ภายในเว็บนั้นๆ แต่สามารถ เชื่อมโยงออกไปสู่เนื้อหาจากเว็บภายนอกได้ (ที่มาภาพ http://www.oknation.net/blog/print.php?id=185314) 4. องค์ประกอบที่ควรมีในเว็บไซต์ องค์ประกอบทั่วไป 1. ชื่อของเว็บเพจ (Title) 2. ประวัติและรูปภาพผู้จัดทำ (Profile/Picture) 3. การเชื่อมโยงภายในและภายนอกเว็บ (Links) 4. การแสดงที่อยู่ของเว็บ : URL 5. วัน/เวลาที่สร้างเว็บ (Date/Time) 6. การปรับปรุงครั้งล่าสุด (Update) 7. ผู้จัดทำเว็บ : (created by) 8. การสงวนลิขสิทธิ์ (Copy right) 9. การติดต่อผู้จัดทำเว็บ (contract /e-mail) 10. สถานที่ติดต่อของเว็บ (Address) 11. บราวเซอร์ที่เหมาะสมสำหรับการชม (Browser ) 12. ขนาดหน้าจอที่เหมาะสมในการชม 13. คำถามที่ถูกถามบ่อย FAQ (Frequency Asked Question) 14. ความช่วยเหลือ (Help)
16 องค์ประกอบพิเศษ 1. สมุดเยี่ยม (Guest book) 2. ฝากข้อความ (Web board) 3. กระดานข่าว (Bulletin Board) 4. กระทู้ 5. แบบสำรวจ (Web poll) 6. จำนวนผู้เข้าชม (Counter) 7. ห้องสนทนา (Chat Room) 8. สถิติทุกประเภท (Web state) 9. เทคนิคพิเศษด้วยโปรแกรมสคริปต์ (Java script, VBscript, cgi, asp, php) 10. โปรแกรมพิเศษสนับสนุน (Download) 11. สไลด์สรุปบรรยาย (Presentation)
17 หน่วยที่ 3 การออกแบบเว็บเพจด้วย Photoshop CS6 คุณสมบัติพื้นฐานของโปรแกรม Adobe Photoshop CS6 โปรแกรม Photo shop เป็นโปรแกรมในตระกูล Adobe ที่ใช้สำหรับตกแต่งภาพถ่ายและภาพ กราฟฟิก ได้อย่างมีประสิทธิภาพ ไม่ว่าจะเป็นงานด้านสิ่งพิมพ์ นิตยสาร และงานด้านมัลติมีเดีย อีกทั้งยัง สามารถ retouching ตกแต่งภาพและการสร้างภาพ ซึ่งกำลังเป็นที่มนิยมสูงมากในขณะนี้ เราสามารถใช้ โปรแกรม Photoshop ในการตกแต่งภาพ การใส่ Effect ต่าง ๆให้กับภาพ และตัวหนังสือ การทำภาพขาวดำ การทำภาพถ่ายเป็นภาพเขียน การนำภาพมารวมกัน การ Retouch ตกแต่งภาพต่าง เราสามารถเรียนรู้วิธีการใช้โปรแกรม Adobe Photoshop นี้ได้ด้วยตัวเอง คุณสามารถที่จะทำการ แก้ไขภาพ ตกแต่งภาพ ซ้อนภาพในรูปแบบต่างๆ ได้อย่างง่ายดาย และสิ่งที่ขาดไม่ได้ก็คือ การใส่ข้อความ ประกอบลงในภาพด้วย และเนื่องด้วย Adobe Photoshop มีการพัฒนาโปรแกรมมาอย่างต่อเนื่อง ทำให้เรา จำเป็นต้องศึกษาคำสั่งต่างๆ ให้เข้าใจ แต่ที่สำคัญ เมื่อคุณเรียนรู้การใช้คำสั่งในเวอร์ชั่นเก่า คุณก็ยังคงสามารถ นำไปประยุกต์ใช้กับเวอร์ชั่นใหม่ๆ ส่วนประกอบชองโปรแกรม Adobe Photoshop CS6 1. เมนูของโปรแกรม Application menu หรือ Menu bar ประกอบด้วย 1. File หมายถึง รวมคำสั่งที่ใช้จัดการกับไฟล์รูปภาพ เช่น สร้างไฟล์ใหม่, เปิด, ปิด, บันทึกไฟล์, นำเข้าไฟล์, ส่งออกไฟล์ และอื่น ๆ ที่เกี่ยวกับไฟล์
18 2. Edit หมายถึง รวมคำสั่งที่ใช้สำหรับแก้ไขภาพ และปรับแต่งการทำงานของโปรแกรมเบื้องต้น เช่น ก๊อปปี้, วาง, ยกเลิกคำสั่ง, แก้ไขเครื่องมือ และอื่น ๆ 3. Image หมายถึง รวมคำสั่งที่ใช้ปรับแต่งภาพ เช่น สี, แสง, ขนาดของภาพ (image size), ขนาด ของเอกสาร (canvas), โหมดสีของภาพ, หมุนภาพ และอื่น ๆ 4. Layer หมายถึง รวมคำสั่งที่ใช้จัดการกับเลเยอร์ ทั้งการสร้างเลเยอร์, แปลงเลเยอร์ และการ จัดการกับเลเยอร์ในด้านต่าง ๆ 5. select รวม คำสั่งเกี่ยวกับการเลือกวัตถุหรือพื้นที่บนรูปภาพ (Selection) เพื่อนำไปใช้งานร่วมกับ คำสั่งอื่น ๆ เช่น เลือกเพื่อเปลี่ยนสี, ลบ หรือใช้เอฟเฟ็กต์ต่าง ๆ กับรูปภาพ 6. Filter เป็นคำสั่งการเล่น Effects ต่างๆสำหรับรูปภาพและวัตถุ 7. View เป็นคำสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่างๆ เช่น การขยายภาพและย่อภาพ ให้ดูเล็ก 8. Window เป็นส่วนคำสั่งในการเลือกใช้อุปกรณ์เสริมต่างๆที่จำเป็นในการใช้สร้าง Effects ต่างๆ 9. Help เป็นคำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียดของโปรแกรมอยู่ในนั้น 2. เมนูของพื้นที่ทำงาน Panel menu Panel (พาเนล) เป็นวินโดว์ย่อย ๆ ที่ใช้เลือกรายละเอียด หรือคำสั่งควบคุมการทำงานต่าง ๆ ของ โปรแกรม ใน Photoshop มีพาเนลอยู่เป็นจำนวนมาก เช่น พาเนล Color ใช้สำหรับเลือกสี, พาเนล Layers ใช้สำหรับจัดการกับเลเยอร์ และพาเนล Info ใช้แสดงค่าสีตรงตำแหน่งที่ชี้เมาส์ รวมถึงขนาด/ตำแหน่งของ พื้นที่ที่เลือกไว้ 3. พื้นที่ทำงาน Stage หรือ Panel เป็นพื้นที่ว่างสำหรับแสดงงานที่กำลังทำอยู่ 4. เครื่องมือที่ใช้งาน Tools panel หรือ Tools box Tool Panel (ทูลพาเนล) หรือ กล่องเครื่องมือ จะประกอบไปด้วยเครื่องมือต่าง ๆ ที่ใช้ในการวาด ตกแต่ง และแก้ไขภาพ เครื่องมือเหล่านี้มีจำนวนมาก ดังนั้นจึงมีการรวมเครื่องมือที่ทำหน้าที่คล้าย ๆ กันไว้ใน ปุ่มเดียวกัน โดยจะมีลักษณะรูปสามเหลี่ยมอยู่บริเวณมุมด้านล่างดังภาพ 2 เพื่อบอกให้รู้ว่าในปุ่มนี้ยังมี เครื่องมืออื่นอยู่ด้วย
19 5. สิ่งที่ควบคุมเครื่องมือที่ใช้งาน Tools control menu หรือ Option bar 1. Option Bar คือ เป็นส่วนที่ใช้ปรับแต่งค่าการทำงานของเครื่องมือต่าง ๆ โดยรายละเอียดในออปชั่นบาร์จะเปลี่ยนไป ตามเครื่องมือที่เราเลือกจากทูลบ็อกซ์ในขณะนั้น เช่น เมื่อเราเลือกเครื่องมือ Brush (พู่กัน) บนออปชั่นบาร์จะ ปรากฏออปชั่นที่ใช้ในการกำหนดขนาด และลักษณะหัวแปรง, โหมดในการระบายความโปร่งใสของสี และ อัตราการไหลของสี เป็นต้น 2. แถบเครื่องมือ (Tools Bar) เครื่องมือแต่ละชิ้นมีคุณสมบัติ ดังนี้ Move ใช้สำหรับเลือกพื้นที่บนภาพเป็นรูปสี่เหลี่ยม วงกลม วงรี หรือเลือกเป็นแถวคอลัมน์ ขนาด 1 พิเซล Marquee ใช้สำหรับย้ายพื้นที่ที่เลือกไว้ของภาพ หรือย้ายภาพในเลเยอร์หรือย้ายเส้นไกด์ Lasso ใช้เลือกพื้นที่บนภาพเป็นแนวเขตแบบอิสระ Magic Wand ใช้เลือกพื้นที่ด้วยวิธีระบายบนภาพ หรือเลือกจากสีที่ใกล้เคียงกัน Crop ใช้ตัดขอบภาพ Slice ใช้ตัดแบ่งภาพเพื่อบันทึกไฟล์ภาพย่อย ๆ ที่เรียกว่าสไลซ์ (Slice) สำหรับนำไปสร้างเว็บเพจ
20 Eyedropper ใช้เลือกสีจากสีต่าง ๆ บนภาพ Healing Brush ใช้ตกแต่งลบรอยตำหนิในภาพ Brush ใช้ระบายลงบนภาพ Clone Stamp ใช้ทำสำเนาภาพ โดยก๊อปปี้ภาพจากบริเวณอื่นมาระบาย หรือระบายด้วย ลวดลาย History Brush ใช้ระบายภาพด้วยภาพของขั้นตอนเดิมที่ผ่านมา หรือภาพของสถานะ เดิมที่ บันทึกไว้ Eraser ใช้ลบภาพบางส่วนที่ไม่ต้องการ Gradient ใช้เติมสีแบบไล่ระดับโทนสีหรือความทึบ Blur ใช้ระบายภาพให้เบลอ Bern ใช้ระบายเพื่อให้ภาพมืดลง Dodge ใช้ระบายเพื่อให้ภาพสว่างขึ้น pen ใช้วาดเส้นพาธ (Path) Horizontal Type ใช้พิมพ์ตัวอักษรหรือข้อความลงบนภาพ Path Selection ใช้เลือกและปรับแต่งรูปทรงของเส้นพาธ Rectangle ใช้วาดรูปทรงเรขาคณิตหรือรูปทรงสำเร็จรูป Hand ใช้เลื่อนดูส่วนต่าง ๆ ของภาพ Zoom ใช้ย่อหรือขยายมุมมองภาด set Foreground Color, Set Background Color ใช้สำหรับกำหนดสี- Foreground Color และ Background Color เปิดแสดงหน้ากระดาษ แบบ Full screen
21 3. Panel คือ เป็นวินโดว์ย่อย ๆ ที่ใช้เลือกรายละเอียด หรือคำสั่งควบคุมการทำงานต่าง ๆ ของโปรแกรม ใน Photoshop มีพาเนลอยู่เป็นจำนวนมาก เช่น พาเนล Color ใช้สำหรับเลือกสี, พาเนล Layers ใช้สำหรับ จัดการกับเลเยอร์ และพาเนล Info ใช้แสดงค่าสีตรงตำแหน่งที่ชี้เมาส์ รวมถึงขนาด/ตำแหน่งของพื้นที่ที่เลือก ไว้ 4. พื้นที่การำงาน (Stage) คือ พื้นที่สำหรับการทำงาน ที่ใช้สร้าง ตกแต่งวัตถุต่างๆ 5. แถบแสดงสถานะ (Status Bar) คือ แถบแสดงสถานการณ์ทำงานของไฟล์งานนั้นๆ 6. Control Bar คือ ใช้ในการเก็บการใช้งานโปรแกรม การปิดโปรแกรมเมื่อไม่ต้องการใช้ แล้วยังสามารถจะย่อหน้าต่าง โปรแกรมให้เล็กลงตามต้องการได้ ไว้ใช้ในกรณีใช้งานร่วมกับโปรแกรมอื่นๆ มี 3 ปุ่มด้วยกัน ประกอบด้วย 1.Minimize คือ การพับโปรแกรมมาเก็บไว้ที่ ทาร์สบาร์ด้านล่าง 2.Restorn คือ การย่อหน้าต่างโปรแกรม ให้เล็กลง หรือให้เต็มหน้าจอ 3.Close คือ การใช้ปิดโปรแกรมเมื่อไม่ต้องการใช้งาน
22 การสร้างส่วนประกอบของเว็บไซต์ 1. ส่วนหัวของเว็บเพ็จ (Page Header) เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ ติดตามเนื้อหาภายในเว็บไซต์ มักใส่ภาพกราฟฟิกเพื่อสร้างความประทับใจ ส่วนใหญ่ประกอบด้วย - โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็นอย่างดี และยังทำให้เว็บ น่าเชื่อถือ - ชื่อเว็บไซต์ - เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์ 2. ส่วนของเนื้อหา (Page Body) เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ซึ่งประกอบด้วยข้อความ , ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนูหลัก หรือเมนูเฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วย สำหรับส่วนเนื้อหาควรแสดงใจความสำคัญที่เป็นหัวเรื่องไว้บนสุด ข้อมูลมีความกระชับ ใช้รูปแบบ ตัวอักษรที่อ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบียบ 3. ส่วนท้ายของหน้า (Page Footer) เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้ มักวางระบบนำทางที่เป็นลิงค์ข้อความง่าย ๆ และ อาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธิ์, วิธีการ ติดต่อกับผู้ดูแลเว็บไซต์, คำแนะนำการใช้เว็บไซต์ เป็นต้น โดยปกติส่วนหัวและส่วนท้ายมักแสดงเหมือนกันใน ทุกหน้าของเว็บเพจ
23 ส่วนประกอบย่อยอื่นๆ ที่จำเป็น 1. Text เป็นข้อความปกติ โดยเราสามารถตกแต่งให้สวยงามและมีลูกเล่นต่างๆ ดังเช่นโปรแกรม ประมวลคำ 2. Graphic ประกอบด้วยรูปภาพ ลายเส้น ลายพื้น ต่างๆ มากมาย 3. Multimedia ประกอบด้วยรูปภาพ ภาพเคลื่อนไหว และแฟ้มเสียง 4. Counter ใช้นับจำนวนผู้ที่เข้ามาเยี่ยมชมเว็บเพจของเรา 5. Cool Links ใช้เชื่อมโยงไปยังเว็บเพจของตนเองหรือเว็บเพจของคนอื่น 6. Forms เป็นแบบฟอร์มที่ให้ผู้เข้าเยี่ยมชม กรอกรายละเอียด แล้วส่งกลับมายังเว็บเพจ 7. Frames เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนก็จะแสดงข้อมูลที่แตกต่างกันและเป็นอิสระจากกัน 8. Image Maps เป็นรูปภาพขนาดใหญ่ที่กำหนดส่วนต่างๆ บนรูป เพื่อเชื่อมโยงไปยังเว็บเพจอื่นๆ 9.Java Applets เป็นโปรแกรมสำเร็จรูปเล็กๆ ที่ใส่ลงในเว็บเพจ เพื่อให้การใช้งานเว็บเพจมี ประสิทธิภาพมากยิ่งขึ้น นอกจากส่วนประกอบดังกล่าวแล้ว องค์ประกอบที่นิยมใส่ไว้ในเว็บเพจอีก 2 ส่วน ได้แก่ สมุดเยี่ยม (guestbook) และเว็บบอร์ด (webboard) ที่ช่วยให้เว็บเพจกลายเป็นสื่อที่มีปฏิสัมพันธ์ระหว่างผู้ใช้กับผู้สร้าง และระหว่างผู้ใช้ด้วยกันเอง การสร้างเอกสารและการกำหนดเอกสาร การตัดภาพเป็นชิ้นเล็ก ชิ้นน้อยด้วย Slice Tool Slice Tool จะเป็นการตัดภาพเป็นชิ้นเล็กๆไว้สำหรับทำงานออกแบบเว็บ ทุกภาพที่ถูกตัดแบ่งจะ สามารถเชื่อมโยงลิงก์ได้ และโปรแกรมจะสร้างโค้ด HTML ให้ด้วยค่ะ เคยเห็นเมนูที่ดูเหมือนจะเป็นภาพ เดียวกันใช่ไหมคะ แต่จะมีหลายลิงก์ให้เราคลิกเข้าไป Slice Tool ก็สามารถทำแบบนั้นได้ค่ะ (หรือเขาอาจจะ ใช้ Slice Tool ทำส่วน Slice Selection Tool คือ เครื่องมือไว้สำหรับแก้ไขหรือปรับแต่ง Slice
24 วิธีการใช้งาน Slice Tool คลิกค้างแดรกเมาส์สร้างเป็นกรอบสี่เหลี่ยมค่ะ พอปล่อยก็จะมีเส้น Slice ขึ้นมา Slice ที่เราสร้างจะ เรียกว่า User-Slice (เส้นทึบ) ส่วน Slice ที่เกิดขึ้นหลังจากที่เราสร้าง Slice จะเรียกว่า Auto-Slice (เส้นประ) การสร้าง Layer Based Slice ไปที่เมนูบาร์ Layer เลือก New Layer Based Slice
25 และ เรายังสามารถสร้าง Slice จาก Guides ก่อนอื่นก็ต้องสร้าง Guides แล้วเลือกเครื่องมือ Slice Tool คลิกที่ Slice From Guides การลบ Slice เลือกใช้เครื่องมือ Slice Selection Tool คลิกที่ Slice ที่ต้องการลบ เมื่อคลิก Slice Slice นั้น จะเป็นสีเหลืองแล้วกดปุ่ม Delete การตั้งค่า Slice
26 Slice Type : สามารถเลือกได้ว่าจะมีภาพหรือไม่มีภาพ Name : ชื่อ Slice URL : ลิงก์ เมื่อคลิกที่ Slice นั้นจะไปยังลิงก์ที่ระบุ Target : เป้าหมาย กำหนดว่าจะให้ลิงก์เปิดหน้าต่างใหม่ (ระบุ _blank) หรือเปิดในหน้าต่าง เดิม (ระบุ _self) Message Text : ข้อความที่จะให้ปรากฏบริเวณ Status Bar ของ Browser Alt Tag : ข้อความที่จะให้ปรากฏ เมื่อเมาส์เลื่อนผ่าน Dimensions : ตำแหน่งของสไลด์ การบันทึก Slice ไปที่เมนูบาร์ File เลือก Save for Web... หรือใช้คีย์ลัด Alt+Shift+Ctrl+S แล้วคลิกปุ่ม Save ตรง Format เลือก HTML and Images ถ้าไม่ต้องการตั้งค่าอะไรเพิ่มเติม คลิกปุ่ม OK
27 การ Save รูปภาพจาก Photoshop Cs6 เป็นไฟล์นามสุกุลต่าง ๆ เมื่อเราตกแต่งภาพในโปรแกรม Photoshop Cs6 เสร็จแล้ว ต่อไปก็ต้องเป็นวิธีการ Save ไฟล์ รูปภาพที่เราได้แต่งขึ้นมา แต่จะ Save เป็นไฟล์นามสกุลต่างๆ เช่น JPEG PNG หรือไฟล์ชนิดใดก็แล้วแต่ มีวิธี Save ยังไง ?เรามีวิธีเบื้องต้นง่ายๆสำหรับมือใหม่เรียกได้ว่าเรียนรู้กันตั้งแต่ทำอะไรไม่เป็นเลย 1. File - Save As.. 2. เลือกตำแหน่ง Save ที่ต้องการ แล้ว เลือก Format เป็นชนิดไฟล์ที่ต้องการ (วงกลมสีแดง) แล้วกดปุ่ม Save เพียงเท่านี้เราก็สามารถ Save นามสกุลไฟล์นามสกุลต่างๆ จาก Photoshop Cs6 เพื่อใช้งานได้ตามที่เรา ต้องการได้
28 หน่วยที่ 4 การตกแต่งภาพสำหรับเว็บไซต์ การตกแต่งภาพสำหรับเว็บไซต์เป็นการเพิ่มความสวยงาม ความน่าสนใจให้กับเว็บไซต์เพื่อดึงดูดความ สนใจจากผู้ใช้งาน 1. รูปแบบของไฟล์ภาพสำหรับเว็บไซต์ ชนิดไฟล์รูปภาพในงานเว็บไซต์ รูปภาพเป็นสิ่งสำคัญอย่างมากในการสร้างเว็บไซต์ เพราะจะทำให้ผู้อ่าน เข้าใจเรื่องราวที่นำเสนอมาก ยิ่งขึ้น เว็บไซต์มีความน่าสนใจมากขึ้น หากเป็นเว็บไซต์ขายสินค้ารูปภาพก็จะช่วยให้ผู้ซื้อเห็นสินค้าเบื้องต้นเพื่อ ประกอบการตัดสินใจซื้อ และหากเว็บไซต์เป็นลักษณะโปรไฟล์หรือให้บริการ รูปภาพก็จะช่วยสร้างความ น่าเชื่อถือให้กับธุรกิจของคุณ สิ่งที่จะต้องคำนึงในการนำรูปภาพมาในงานเว็บไซต์ ภาพควรจะมีขนาดที่เหมาะสม รูปภาพที่มีขนาดเล็กแต่ไม่สูญเสียคุณภาพ โดยมากการรูปภาพขนาด เล็ก เว็บจะโหลดได้เร็วขึ้น ซึ่งมีผลการประเมินประสิทธิภาพของเว็บไซต์บน Google ให้อยู่ในลำดับที่ดี แต่ อาจจะไม่เป็นที่พอใจของผู้อ่านนัก เพราะคุณภาพของรูปจะถูกลดทอนทำให้รูปภาพเบลอและไม่ชัดได้ ในทาง กลับกันหากเราใช้รูปภาพที่มีคุณภาพสูง คม ชัด ย่อมทำให้ขนาดไฟล์รูปภาพมีขนาดใหญ่ตามไปด้วย ผลคือ หน้าเว็บไซต์ของเราจะโหลดช้าอย่างมาก ผลการประเมินประสิทธิภาพของเว็บไซต์บน Google ก็จะไม่อยู่ใน ลำดับที่ดีนัก แถมเมื่อผู้อ่านต้องรอโหลดเว็บเป็นเวลานานหลายวินาที นั้นย่อมทำให้เว็บเราถูกมองข้ามไป ในทันที ชนิดไฟล์รูปภาพในงานเว็บไซต์ ไฟล์รูปภาพหลักๆ ที่ใช้บนเว็บไซต์ที่เป็นที่นิยมกันอยู่ในปัจจุบัน คือ .gif , .jpg , . png, .Svg, .Webp ซึ่งในอนาคตอาจมีเพิ่มเติมเข้ามาอีก แต่ในบทความนี้เราจะแนะนำหลักๆ ดังนี้ ไฟล์ JPEG หรือ JPG (Joint Photographic Experts Group)
29 เป็นไฟล์ที่มีนามสกุล .jpeg หรือ .jpg เป็นไฟล์ที่พัฒนาเพื่อใช้งานกับภาพที่มีสีสันสดใสและความ ละเอียดสูงสามารถเก็บภาพได้ 24 บิตสี สามารถแสดงสีได้ถึง 16.7 ล้านสี พบได้ทุกที่ตามเว็บเบราวเซอร์และสมาร์ทโฟน สำหรับการแสดงผลในเว็บไซต์ ไฟล์ jpg เหมาะสำหรับ การใช้งานทั่วไป ข้อดีของไฟล์ JPEG - ไฟล์ JPEG อาจเรียกได้ว่าเป็นรูปแบบไฟล์ภาพที่มีการใช้งานอย่างกว้างขวางที่สุด ซึ่งเข้ากันได้กับเบ ราวเซอร์ ซอฟต์แวร์ และแอปส่วนมาก - ขนาดไฟล์ที่เล็กทำให้ผู้ใช้ถ่ายโอนไฟล์ได้เร็วและสามารถเข้าถึงเพื่อดูไฟล์บนโลกออนไลน์ได้อย่าง ว่องไว ไฟล์ JPEG สามารถมีขนาดที่เล็กที่สุดเท่าที่จะเป็นไปได้ โดยการบีบอัดแบบละทิ้งสีที่ดวงตามนุษย์ไม่ สามารถแยกออก - กระบวนการปรับแต่งภาพหลังการถ่ายจะง่ายขึ้นเนื่องจากสมดุลสีขาวและความเข้มในไฟล์ JPEG นั้นถูกกำหนดไว้แล้วตั้งแต่ตอนกดชัตเตอร์ ข้อเสียของไฟล์ JPEG - การบีบอัดไฟล์อาจช่วยประหยัดพื้นที่ แต่คุณภาพจะไม่ค่อยดีนัก รูปภาพที่มีขอบและเส้นชัดเจนจะ สูญเสียความคมชัดไปในระหว่างการบีบอัด - การสูญเสียข้อมูลจำนวนมากอาจก่อให้เกิด Posterization ซึ่งรูปภาพจะสูญเสียการไล่ระหว่างสีที่ เรียบเนียน ทำให้รูปภาพแลดูแตกแยกเป็นบล็อก และขาดตอน นอกจากนี้ยังอาจก่อให้เกิดรอยหยักบนขอบ วง แสง หรือนอยส์ ซึ่งอาจส่งผลกระทบรุนแรงต่อคุณภาพของรูปภาพได้ ไฟล์ GIF (Graphics Interchange Format) ไฟล์รูปภาพ GIF มักถูกนำไปใช้เพื่อแสดงภาพกราฟิกและโลโก้บนเว็บ นอกจากนี้ ไฟล์ประเภทนี้ยัง รองรับภาพเคลื่อนไหวขั้นพื้นฐาน จึงเป็นรูปแบบไฟล์ยอดนิยมสำหรับมีมบนเว็บไซต์โซเชียลมีเดีย ข้อดีของไฟล์ GIF - ภาพเคลื่อนไหว GIF นั้นไม่มีความซับซ้อน จึงทำให้แสดงผลเร็วและสร้างไฟล์ได้ง่าย ไม่ต้องใช้ความรู้ ทางเทคนิคมาก และสามารถเผยแพร่ในเว็บไซต์โซเชียลมีเดียได้ เช่นรูปมีม คลิปตลกสั้นๆ - มีขีดจำกัดของสีในไฟล์ GIF ทำให้ไฟล์มีขนาดค่อนข้างเล็ก ซึ่งช่วยให้โหลดไฟล์บนหน้าเว็บได้รวดเร็ว ขึ้น
30 - ไฟล์ GIF นั้นมีฟีเจอร์ที่เรียกว่าการบีบอัดแบบไม่สูญเสียข้อมูล ซึ่งทำให้คุณภาพของรูปภาพไม่ลดลง เมื่อบีบอัดข้อมูลในไฟล์ ข้อเสียของไฟล์ GIF - รูปแบบไฟล์ GIF รองรับเฉพาะจานสี 256 สีเท่านั้น ซึ่งหมายความว่ารูปภาพอาจมีความละเอียดต่ำ หรืออาจเบลอเล็กน้อย - ในบางครั้ง การกลับไปแก้ไขไฟล์ GIF แบบเคลื่อนไหวอาจเป็นเรื่องยากเนื่องจากไฟล์ใช้รูปภาพหลาย รูป - แม้ว่าไฟล์ GIF มักจะมีขนาดเล็กและโหลดได้เร็ว แต่ความเร็วในการเชื่อมต่ออินเทอร์เน็ตที่ช้าก็อาจ ทำให้การแสดงผลไฟล์ประเภทนี้ล่าช้า หรือส่งผลเสียต่อรูปลักษณ์เนื้อหาบนเว็บไซต์ได้ ไฟล์ PNG (Portable Network Graphic) จะเป็นไฟล์ที่มีนามสกุล .png เป็นไฟล์ที่พัฒนาขึ้นมาโดยนาเอาคุณสมบัติที่ดีเด่นของไฟล์ GIF และ JPG มารวมกัน ซึ่งสนับสนุนจำนวนบิตสีได้ถึง 24 บิต เหมือนกับภาพแบบ JPG ในขณะที่การบีบอัดไฟล์ใช้การทำงานแบบ GIF การแสดงผลในแบบ Interlace และยังสามารถทำ ภาพโปร่งใสได้ ข้อดีของไฟล์ PNG - ไฟล์ PNG สามารถเก็บภาพที่มีรายละเอียดสูงกว่า GIF ได้เพราะรูปแบบไฟล์นี้สามารถรองรับสีได้ มากกว่าล้านสี ซึ่งต่างจากไฟล์ GIF ที่รองรับได้เพียงหลักร้อย - สามารถดูและแก้ไขไฟล์ได้ด้วยโปรแกรมต่างๆ มากมาย - เมื่อผ่านการบีบอัด ไฟล์รูปภาพ PNG จะไม่สูญเสียข้อมูลใดๆ การเก็บรักษาและถ่ายโอนจึงเป็นเรื่อง ง่าย ซึ่งเป็นเหตุผลที่ทำให้รูปแบบไฟล์นี้เหนือกว่ารูปแบบสูญเสียข้อมูล เช่น ไฟล์ JPEG ที่ซึ่งข้อมูลจะหายไปใน ขั้นตอนการบีบอัด ข้อเสียของไฟล์ PNG - การเก็บข้อมูลดั้งเดิมทั้งหมดเอาไว้ระหว่างการบีบอัดทำให้ไฟล์ PNG มีขนาดใหญ่กว่าไฟล์ GIF หรือ JPEG ซึ่งหมายถึงการใช้พื้นที่มากขึ้นในฮาร์ดไดรฟ์ในคอมพิวเตอร์ของคุณ - PNG นั้นถูกออกแบบมาโดยคำนึงถึงเว็บไซต์ตั้งแต่ต้น ไฟล์ประเภทนี้จึงไม่รองรับโหมดสี CMYK ดังนั้นการเปลี่ยนไฟล์เป็นสิ่งพิมพ์อาจทำได้ยาก - แม้ว่าไฟล์ PNG ที่ผ่านการบีบอัดจะมีรูปภาพที่คุณภาพและรายละเอียดสูง แต่ขนาดไฟล์ที่ใหญ่ก็ทำ ให้การโหลดหน้าเพจและการตอบสนองช้าลงเช่นกัน
31 ไฟล์ SVG (Scalable Vector Graphics) รูปแบบไฟล์ SVG เป็นเครื่องมือที่ได้รับความนิยมสำหรับการแสดงกราฟิกแบบสองมิติ แผนภูมิ และ ภาพประกอบบนเว็บไซต์ นอกจากนี้ SVG ยังเป็นไฟล์รูปภาพที่สามารถปรับขนาดให้ใหญ่ขึ้นหรือเล็กลงได้โดยไม่สูญเสีย รายละเอียดใดๆ ด้วย เนื่องจากเป็นไฟล์เวกเตอร์ เหมาะสำหรับโลโก้และกราฟิกออนไลน์ ข้อดีของไฟล์ SVG - กราฟิกเวกเตอร์เช่น SVG นั้นสามารถคงระดับคุณภาพเอาไว้ได้ไม่ว่าคุณจะปรับขนาดให้เล็กหรือ ใหญ่เพียงใดก็ตาม คุณไม่จำเป็นต้องกังวลว่าไฟล์ภาพ SVG จะสูญเสียคุณภาพเมื่อแสดงบนเบราวเซอร์บาง ชนิดหรือเมื่อคุณปรับขนาดไฟล์เพื่อนำไปแสดงในตำแหน่งต่างๆ - ไฟล์SVG แบบพื้นฐานมักมีขนาดเล็กกว่ารูปภาพราสเตอร์ ซึ่งถูกสร้างขึ้นจากพิกเซลสีจำนวนมาก แทนที่จะเป็นอัลกอริธึมคณิตศาสตร์ - เนื่องจากไฟล์ SVG จะแสดงข้อความในฐานะของข้อความตัวอักษรจริงๆ (แทนที่จะเป็นงาน ออกแบบ) โปรแกรมอ่านข้อมูลจากจอจึงสามารถสแกนข้อความที่อยู่ในรูปภาพ SVG ได้ คุณสมบัตินี้มี ประโยชน์มากสำหรับผู้คนที่ต้องการอ่านเว็บเพจ นอกจากนี้ โปรแกรมค้นหายังสามารถอ่านและจัดทำดัชนี จากข้อความในรูปภาพ SVG ได้อีกด้วย ข้อเสียของไฟล์ SVG - ไฟล์ SVG นั้นเหมาะกับกราฟิกสำหรับเว็บไซต์ เช่น โลโก้ ภาพประกอบ และแผนภูมิ แต่ไฟล์ สามารถแสดงภาพถ่ายคุณภาพสูงได้อย่างยากลำบากเนื่องจากไม่ได้ใช้พิกเซล ทั้งนี้ ไฟล์ JPEG นั้นมักเหมาะ กับภาพถ่ายที่มีรายละเอียดสูงมากกว่า - มีเพียงเบราว์เซอร์รุ่นใหม่ๆ เท่านั้นที่สามารถรองรับรูปภาพ SVG ได้ คุณอาจพบปัญหาในการใช้ไฟล์ SVG กับ Internet Explorer 8 และเบราว์เซอร์รุ่นเก่ากว่า - การทำความเข้าใจโค้ดภายในภาพ SVG เป็นเรื่องยากหากคุณเพิ่งเริ่มใช้รูปแบบไฟล์นี้
32 ไฟล์ WEBP Google สร้างรูปแบบไฟล์ WebP ขึ้นเพื่อทำให้รูปภาพออนไลน์มีขนาดเล็กลง ด้วยขนาดของภาพถ่าย และกราฟิกที่ลดลงอย่างมาก เว็บไซต์ต่างๆ จึงโหลดได้อย่างรวดเร็วและให้ประสบการณ์ที่ดีขึ้นแก่ผู้ใช้ ข้อดีของไฟล์ WebP - เว็บเพจที่โหลดได้รวดเร็วยิ่งขึ้นจะให้ประสบการณ์ที่ดีกว่าแก่ผู้ใช้ ทั้งยังช่วยเพิ่มอันดับของเว็บไซต์ใน โปรแกรมค้นหาอีกด้วย ในทางกลับกัน เว็บไซต์ที่โหลดรูปภาพต่างๆ อย่างเชื่องช้าอาจกระตุ้นให้ผู้คนมองหา ผลิตภัณฑ์และบริการบนเว็บไซต์อื่น - รูปแบบ WebP นั้นสามารถใช้งานได้กับเบราวเซอร์ต่างๆ มากมาย ซึ่งรวมถึง Google Chrome, Microsoft Edge และ Mozilla Firefox 3 WebP จะช่วยประหยัดพื้นที่เก็บข้อมูลให้กับธุรกิจได้ด้วยการบีบอัดรูปภาพบนเว็บไซต์ให้อยู่ใน ขนาดที่จัดการได้ง่ายขึ้น ข้อเสียของไฟล์ WebP - ไฟล์ WebP นั้นถูกออกแบบมาเพื่อการใช้งานบนอินเทอร์เน็ตเป็นหลัก ดังนั้นจึงไม่ค่อยมีประโยชน์ เท่าไรนักหากคุณใช้งานไฟล์รูปภาพนี้แบบออฟไลน์ - เบราวเซอร์รุ่นเก่าบางส่วน เช่น Internet Explorer อาจไม่สามารถรองรับรูปภาพ WebP ได้อย่าง เต็มประสิทธิภาพ แม้ว่ารูปแบบนี้มีความเข้ากันได้กับซอฟต์แวร์และอุปกรณ์ต่างๆ อย่างแพร่หลายก็ตาม - การบีบอัดข้อมูลแม้เพียงในปริมาณเล็กน้อยก็อาจลดทอนคุณภาพของรูปภาพได้ ซึ่งเป็นข้อเสียที่คุณ ควรตระหนักหากคุณกำลังทำงานกับช่างภาพมืออาชีพและใช้งานรูปภาพคุณภาพสูง การเลือกใช้รูปภาพในงานเว็บไซต์ ภาพโลโก้ เป็นจุดแรกและจุดสำคัญของเว็บไซต์ เพราจะทำให้ผู้ชมและผู้อ่านจดจำเว็บไซต์และแบรนด์ของเราได้ เมื่อผู้ชมและผู้อ่านนำชื่อแบรนด์หรือบล็อกของเราไป search ใน Google ก็จะพบกับภาพโลโก้ และเว็บไซต์ ของเรา ไฟล์รูปภาพโลโก้ที่เหมาะจะนำมาใช้เน้นมีความคมชัด ไม่ถูกบีบอัดมากจนสูญเสียคุณภาพ จึงเหมาะที่ จะใช้ไฟล์อย่าง PNG หรือ SVG ถ้าหากโลโก้ของคุณถูกวาดด้วย vector แนะนำให้ใช้ SVG นะคะ จะทำให้ได้ ไฟล์ขนาดเล็กพร้อมกับคุณภาพที่คมชัด ส่วนขนาดความกว้างของโลโก้นั้น อาจแตกต่างกันไปตามธีมที่เลือกใช้ โดยส่วนมากไม่เกิน 512 px
33 รูปประจำเรื่อง Featured Image คือรูปภาพที่แสดงโพสต์หรือหน้าบนเว็บไซต์ WordPress ของคุณ โดยทั่วไปจะปรากฏที่ด้านบนสุด ของโพสต์ หน้าบทความ และส่วนโพสต์ที่เกี่ยวข้อง รูปภาพประจำเรื่อง จะปรากฏขึ้นเมื่อคุณแชร์โพสต์บน โซเชียลมีเดียด้วย เราขอแนะนำให้ใช้ขนาดรูปภาพ 1200 x 628 พิกเซล เพราะเป็นขนาดของภาพที่ Facebook แนะนำสำหรับการแสดงผลบนโพสต์แบบแชร์ลิงก์ (Shared Link)
34 รูปภาพประกอบบทความ ภาพประกอบบทความเป็นส่วนหนึ่งที่สร้างความเชื่อมต่อระหว่างเนื้อหากับลูกค้าหรือผู้ใช้บริการได้ จึงมีความสำคัญอย่างมากเมื่อผู้ใช้ได้อยู่ในหน้าเว็บนั้นแล้ว รูปภาพประกอบจะเป็นส่วนที่ผู้ชมจะต้องใช้เวลา โหลดมากที่สุดบนเว็บไซต์ ดังนั้นเพื่อให้ผู้ชมใช้เวลาในการรอให้น้อยที่สุด และรูปภาพประกอบบทความมีประ สิทธิการแสดงผลที่ดี ควรปรับรูปภาพดังนี้ 1. ควรจะใช้ไฟล์ JPG หรือ WebP เท่านั้น 2. ขนาดความกว้างควรจะอยู่ที่ 800px – 1,000px เพราะเป็นขนาดความกว้างของหน้าเว็บในการ อ่าน 3. ขนาดของไฟล์ภาพไม่ควรเกิน 400kb ขึ้นอยู่กับรายละเอียดของภาพด้วย 4. ความละเอียดของภาพ (Resolution) ควรอยู่ที่ 75 Pixel/Inch เหมาะสำหรับการแสดงบน จอแสดงผล รูปภาพเป็นส่วนที่สำคัญ ช่วยตกแต่งเพิ่มสีสัน ความน่าสนใจให้กับเว็บไซต์ของคุณได้ สามารถช่วย ปรับปรุงรูปลักษณ์ของหน้าเว็บของคุณและเพิ่ม UX สำหรับผู้เยี่ยมชมของเว็บคุณ อย่างไรก็ตามหากไม่ได้รับ การปรับขนาดให้เหมาะสม รูปภาพที่มีคุณภาพอาจหนักและทำให้เวลาในการโหลดเว็บไซต์ช้าลงได้ ซึ่งจะส่งผล เสียต่อความเร็วและประสิทธิภาพของเว็บไซต์ของคุณ หรือหากการปรับขนาดถูกบีบอัดไฟล์ให้เล็กเพื่อหวังผล ให้โหลดเว็บไซต์เร็ว โดยไม่ได้คำนึงถึงคุณภาพของรูปที่จะส่งผลให้รูปภาพแตก เบลอแล้ว ก็จะส่งผลให้เว็บไซต์ ของคุณไม่ได้รับความสนใจจากผู้ใช้งานเช่นกัน 2. การปรับแต่งภาพ 2.1 การปรับความสดใสให้ภาพด้วยคำสั่ง Brightness/Contrast คำสั่ง Brightness/Contrast ใช้สำหรับปรับแต่งค่าพิกเซลในภาพ ให้เกิดความมืด ความสว่าง และ ความคมชัด โดยค่า Brightness ใช้ปรับค่าความมืดสว่าง ส่วนค่า Contrast ใช้ปรับความคมชัดให้กับภาพ มี ขั้นตอนการทำงานดังนี้ 2.1.1 เปิดไฟล์ภาพที่ต้องการ 2.1.2 คลิกเมนูคำสั่ง Image > Adjustments > Brightness/Contrast หรือคลิกปุ่ม Brightness /Contrast บนพาเนล Adjustments 2.1.3 คลิกเมาส์ค้างไว้แล้วลาก เพื่อกำหนดค่า ดังนี้ - Brightness ปรับความมืดสว่างให้กับภาพ - Contrast ปรับความคมชัด 2.1.4 คลิกปุ่ม OK เพื่อตกลง วิธีการดังแสดงในภาพที่ 1
35 ภาพที่1 การปรับความสดใสให้ภาพด้วยคำสั่ง Brightness/Contrast
36 2.2 การปรับความสมดุลของสีด้วยคำสั่ง Color Balance คำสั่ง Color Balance ใช้สำหรับปรับแต่งสีภาพให้สมดุลขึ้น เพื่อแก้ปัญหาสีผิดเพี้ยน มีขั้นตอนการ ทำงานดังนี้ 2.2.1 เปิดไฟล์ภาพที่ต้องการ 2.2.2 คลิกเมนูคำสั่ง Image > Adjustments > Color Balance หรือกดคีย์ลัด <Ctrl + B> หรือ คลิกปุ่ม Color Balance บนพาเนล Adjustments 2.2.3 คลิกเลือกปรับความมืดสว่างให้กับภาพ ดังนี้ - Shadows ปรับแต่งส่วนมืดของภาพ - Midtones ปรับแต่งน้ำหนักส่วนกลางของภาพ - Highlights ปรับแต่งส่วนสว่างของภาพ 2.2.4 คลิกเมาส์ค้างไว้แล้วลาก เพื่อปรับความสมดุลของสีตามต้องการ 2.2.5 คลิกปุ่ม OK เพื่อตกลง วิธีการดังแสดงในภาพที่ 2 ภาพที่2 การปรับความสมดุลของสีด้วยคำสั่ง Color Balance
37 3. การบันทึกและกำหนดคุณสมบัติไฟล์ภาพ บันทึกไฟล์ภาพใน Photoshop เมื่อสร้างหรือตกแต่งภาพเสร็จแล้ว เราจะต้องบันทึกไฟล์ด้วยเพื่อเก็บการเปลี่ยนแปลง ที่ทำกับภาพ โดยเลือกบันทึกไฟล์ได้หลายรูปแบบขึ้นอยู่กับวัตถุประสงค์ของการนำไปใช้งานสำหรับ ไฟล์ประเภทแรกที่ควร บันทึกคือ รูปแบบ PSD ของ Photoshopเองเพื่อเก็บเป็นต้นฉบับไว้สำหรับ นำมาแก้ไขในภายหลังจากนั้นจึง สั่งบันทึกไฟล์เป็นประเภทอื่น เช่น GIF หรือ JPG เพื่อให้เหมาะสำหรับ การนำไปใช้งานในแต่ละกรณี บันทึกไฟล์ Photoshop (.PSD) การแก้ไขไฟล์ภาพโดยการสร้างกราฟิก เพิ่มการตัดต่อ หรือเปลี่ยนแปลงลักษณะของไฟล์ภาพที่มีผล กับโครงสร้าง เดิมของภาพเมื่อเลือกคำสั่ง File > Save จะแสดงไดอะล็อกบ็อกซ์ Save As ขึ้นมา โดยจะเลือก รูปแบบของไฟล์เป็น Photoshop (*.PSD, *.PDD) เป็นค่าพื้นฐานดังนี้ ** คุณสมบัติของไฟล์ PSD จะเก็บรายละเอียดการทำงานต่าง ๆ เช่น เลเยอร์, ฟอนต์ และเส้นพาธ ไว้ ได้อย่างครบถ้วนช่วยให้การนำไฟล์ภาพกลับมาแก้ไขทำได้ง่าย ในขณะที่ไฟล์ประเภทอื่นจะเก็บข้อมูลเหล่านี้ ไม่ได้ หรือได้เพียงบางส่วน
38 บันทึกไฟล์ทับของเดิม การเปิดไฟล์ภาพมาตกแต่งสี, แสงเงา หรือกำหนดค่าเอฟเฟ็กต์ให้กับภาพ แต่ไม่ได้ใช้คำสั่งเกี่ยวกับ การสร้างเลเยอร์ (เลเยอร์ คือ ชั้นที่จัดวางรูปภาพ) หรือสร้างกราฟิกอื่น ๆ เพิ่มเติมในภาพ เมื่อเลือกคำสั่ง File > Save โปรแกรมจะให้บันทึกทับชื่อไฟล์เดิม รูปแบบเดิม (จะไม่มีไดอะล็อกบ๊อกซ์ Save As เปิดขึ้นมา หากไม่ ต้องการให้ทับไฟล์เดิม ต้องคลิกเลือกคำสั่ง File > Save As เอง) บันทึกเป็นไฟล์รูปแบบอื่น ๆ นอกจากการบันทึกเป็นไฟล์ .psd และบันทึกลงในรูปแบบของไฟล์ต้นฉบันเดิม แล้วยังบันทึกไฟล์ภาพ เก็บไว้ในรูปแบบอื่น ๆ ได้ตามต้องการ โดยคลิกเลือกคำสั่ง File > Save As แล้วเลือกรูปแบบของไฟล์ในช่อง Format ซึ่งจะมีรูปแบบไฟล์ให้เลือกหลายแบบดังภาพ
39 บันทึกไปใช้กับเว็บเพจ หรืออุปกรณ์อื่น รูปภาพที่นำไปใช้กับเว็บเพจ จะต่างจากรูปภาพที่นำไปใช้กับงานด้านอื่น ๆ คือ ชนิดของภาพที่จะ นำไปใช้บนเว็บเพจ นั้น ต้องเป็น GIF, JPG หรือ PNG เท่านั้น และควรให้ไฟล์มีขนาดเล็ก ขนาดภาพต้องพอดี ไม่ใหญ่จนเกินไป เมื่อผู้ชมเปิดเข้าไปในเว็บไซต์จะได้โหลดภาพได้เร็วยิ่งขึ้น โปรแกรมจึงมีคำสั่งสำหรับบันทึก รูปภาพ ไปใช้ในเว็บเพจโดยเฉพาะ คือ Save for Web & Devices โดยคำสั่งนี้จะให้กำหนดค่าออปชั่น การ บันทึกภาพประเภทต่าง ๆ พร้อมกับดูภาพตัวอย่าง ขนาดของไฟล์ และระยะเวลาในการดาวน์โหลด เปรียบเทียบกันได้อีกด้วย ดังนี้ 1. เลือกคำสั่ง File > Save for Web & Devices 2. กำหนดออปชั่นต่าง ๆ ในการแปลงไฟล์ แล้วดูภาพ ขนาด และเวลาในการดาวน์โหลดเปรียบเทียบ กันในไดอะล็อกบ็อกซ์ Save for Web & Devices ดังภาพหน้า 3. เลือกภาพจากกรอบตัวอย่างที่ต้องการใช้งาน 4. คลิกปุ่ม Save เพื่อบันทึกภาพ 5. บนไดอะล็อกบ๊อกซ์ Save Optimized As เลือกตำแหน่งโฟลเดอร์ที่จะจัดเก็บในช่อง Save in 6. กำหนดชื่อไฟล์ภาพในช่อง File name 7. คลิกปุ่ม Save ไฟล์ภาพที่ใช้ใน Photoshop Photoshop สามารถรองรับการทำงานกับไฟล์ภาพได้หลายชนิด ดังนี้ .GIF เป็นการบันทึกรูปภาพที่จะสามารถบีบอัดข้อมูลให้มีขนาดเล็ก ส่วนมากจะนำไปบันทึกเป็นไฟล์ ภาพเคลื่อนไหว
40 .PNG ใช้บันทึกรูปภาพประเภทเวกเตอร์ จะมีคุณสมบัติคล้ายกับไฟล์ GIF ซึ่งสามารถบีบอัดข้อมูลให้มี ขนาดเล็ก บันทึกส่วนที่โปร่งใสและสามารถเลือกระดับสีให้แสดงถึง 16.7ล้านสี .Tiff เป็นการบันทึกไฟล์ภาพซึ่งสามารถบีบอัดข้อมูลทำให้คุณภาพของสีภาพเหมือนต้นฉบับ แต่ไฟล์ ภาพนั้นจะมีขนาดใหญ่ ในกรณีที่บันทึกเป็นไฟล์สกุล TIFF สามารถนำไปใช้ร่วมกับ PageMaker เพื่อสร้างสื่อ สิ่งพิมพ์ต่อไป .BMP เป็นรูปแบบของไฟล์มาตรฐานที่ใช้ในระบบปฏิบัติการ Windows และ Dos ซึ่งสามารถที่จะ จัดเรียงสีดำไปหาสีขาว (1 ไบต์ต่อ 1 pixel) และจะสามารถเลือกระดับสีสูงถึง 24 บิต หรือ 16.7 ล้านสี .EPS เป็นรูปของไฟล์ที่สามารถบรรจุภาพแบบเวกเตอร์และบิตแม็บสนับสนุนการนำรูปภาพ ไปเป็น ภาพประกอบใน Illustrator หรือนำไปใช้ร่วมกับโปรแกรมจัดหน้าเอกสาร ในกรณีที่นำภาพแบบเวกเตอร์มา เปิดใน Photoshopจะถูกแปลงเป็น Bitmap ทันที .PDF เป็นรูปแบบของไฟล์ที่ใช้เป็นเอกสารอิเล็กทรอนิกส์หรือนำเสนอข้อมูลบนอินเทอร์เน็ต ข้อดีของ ไฟล์ PDF คือ รักษารูปแบบหน้ากระดาษ ตัวอักษร รูปภาพให้เหมือนกับต้นฉบับและนิยมนำไฟล์ PDF บันทึก ไฟล์งานก่อนส่งโรงพิมพ์ส่วนโปรแกรมที่ใช้อ่านไฟล์ PDF คือ Adobe Acrobat Reader .JPEG เป็นไฟล์ที่สามารถบีบอัดข้อมูลที่เป็นไฟล์รูปภาพประเภท Bitmap หรือ ภาพถ่ายและสามารถ กำหนดการแสดงภาพบนเว็บจากหยาบไปหาความละเอียดที่เรียกว่า Progressive ซึ่งเราสามารถปรับค่าออป ชันของรูปแบบไฟล์ JPEG ได้ (ส่วนมากไฟล์ภาพเป็น *.jpeg เกือบทั้งหมด .PSD เป็นไฟล์มาตรฐานที่สร้างขึ้นด้วยโปรแกรม Photoshop สามารถเปิดไฟล์ที่สร้างขึ้นด้วยเวอร์ชัน ก่อนหน้านี้ได้ด้วย โดยไฟล์ .PSD จะไมสามารถเปิดใช้งานได จากโปรแกรมอื่น ๆ .BMP เป็นไฟล์มาตรฐานของระบบปฏิบัติการโปรแกรม Windows .TIFF เป็นไฟล์ที่สามารถใช้ได้ทั้งเครื่อง PC และ Macintosh ซึ่งส่วนใหญ่ใช้งาน โปรแกรมเกี่ยวกับสิ่งพิมพ์ เช่น โปรแกรม Page Maker .GIF เป็นไฟล์ที่ใช้กันมากในการสร้างเว็บไซต์ เพราะไฟล์มีขนาดไมใหญ่ ง่ายต่อการบีบอัดข้อมูลทั้ง ไฟล์ประเภทนี้ส่วนใหญ่จะสามารถเคลื่อนไหวไดสร้างขึ้นจาก โปรแกรมกราฟก และแอนิเมชั่น เช่น โปรแกรม Image Ready .JPEG เป็นที่นิยมใช้งานกันอย่างแพรหลาย เพราะมีขนาดเล็ก ง่ายต่อการบีบอัด สามารถสร้างขึ้นไดจากโปรแกรมกราฟิกทั่ว ๆ ไป .PCT เป็นไฟล์ที่ใช้ในบนเครื่อง Macintosh เท่านั้นและมีขนาดของไฟล์ค่อนข้างใหญ่มาก .RAW เป็นไฟล์ที่สามารถยืดหยุ่นได้เป็นอย่างดี ถาหากมีการเปลี่ยนแปลงการทำงานในระหว่าง Application หรือ ต่างเครื่องคอมพิวเตอร์ .PNG เป็นไฟล์ที่พัฒนาต่อจาก Gif ซึ่งข้อดี คือ จะเกิดความสูญเสียน้อยมากหากมีการบีบอัดข้อมูล ทำ ให้มีความเหมาะสมในการโอนถ่ายข้อมูลบนระบบเครือข่าย Internet
41 หน่วยที่ 5 พื้นฐานภาษา HTML5, CSS, และ JavaScript 1. ภาษา HTML HTML (Hypertext Markup Language) เป็นภาษาที่ใช้ในการเขียนโปรแกรมภาษาหนึ่งของ คอมพิวเตอร์เพื่อตอบสนองในการแสดงผลบนจอภาพในระบบอินเทอร์เน็ต (internet) ในลักษณะของเว็บ เพจ ซึ่งสามารถแสดงผลได้ทั้งภาษาไทยและภาษาอังกฤษ รวมทั้งรูปทรงกราฟิก, ภาพนิ่ง, ภาพเคลื่อนไหวเสียง หรือแม้กระทั่งการเชื่อมโยงไปยังเว็บไซต์ต่างๆ ในระบบอินเทอร์เน็ต ภาษา HTML เป็นภาษาที่มีลักษณะของโค้ด กล่าวคือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของนหัสแอสกี (ASCII Code) โดยเขียน อยู่ในรูปของเอกสารข้อความ (Text Document) ดังนั้นจึงทำให้ง่ายต่อการเรียนรู้ สามารถกำหนดรูปแบบ และโครงสร้างได้ง่ายด้วยภาษา HTML นี้ได้ถูกพัฒนามาอย่างต่อเนื่องเพื่อให้ใช้ได้ง่ายขึ้นและตอบสนองต่อ การใช้ภาพทางกราฟิกโดยเริ่มพัฒนามาตั้งแต่รุ่น 1.0,2.0,3.0 จนถึงรุ่น5.0 ในปัจจุบันนอกจากรี้ภาษา HTML ยังมีลักษณะที่พิเศษควรทราบดังนี้ สามารถใช้ได้กับโปรแกรมสร้างและแก้ไขไฟล์ข้อมูล (Text Editor) ได้แก่ Notepad, Word Processing ต่างๆซึ่งง่ายต่อการเรียนรู้ และไฟล์ที่จะได้มีขนาดเล็ก HTML ที่ถูกบันทึกใน Tex Editor จะมร ชนิดของไฟล์เป็น htm หรือ html ในระบบปฏิบัติการยูนิกส์และวินโดวส์สามารถทำงานได้บนเว็บเบราว์เซอร์ ทุกตัวที่สนับสนุน HTML ได้แก่ Microsoft internet Explorer, Google Chrome, Mozilla Firox, Safari เป็นต้น 1.1 HTML5 HTML5 เริ่มต้นถูกพัฒนาโดย Apple, Mozilla Foundation, และ Opera Software โดยต่างคน ต่างพัฒนา รู้จักกันดีในนาม Web HypertextApplication Technology Working Group (WHATWG) ภายหลัง W3C ได้นำเอกสารการพัฒนาของ WHATWG มาเริ่มกำหนดข้นเป็นข้อกำหนดขึ้นเป็นข้อกำหนดของ HTML (HTML Specification) HTML5 ไม่เป็นแต่ภาษาHTML อีกภาษาหนึ่ง แต่ถูกใช้ในบริบทของ Web applications เป็นภาษา ที่ได้รับการปรับโฉมของ HTML ขึ้นใหม่อย่างสมบูรณ์ ด้วยการเพิ่มความสามารถใหม่ๆแต่ยังคงเก็บข้อมูล สำคัญข้อมูล ทั้งหมดที่มีอยู่ใน HTML4 ไว้เพื่อให้ใช้ได้กับเบราว์เซอร์รุ่นก่อนได้ ยิ่งไปกว่านั้น HTML5 ยังใช้ รูปแบบคำสั่งที่เข้ากันทั้ง HTMLและ XHTML แต่ในช่วงเวลาที่ผ่านมาเว็บเบราว์เซอร์รุ่นเก่าๆยังคงถูกใช้กันอยู่ ทำให้การรับรองของ HTML5 อาจเกิดปัญหาจึงต้องมีการเปิดบริการทดสอบ เช่น “HTML5test” เพื่อ ตรวจสอบการรับรองของเบราว์เซอร์ HTML5 ให้ได้ความสำคัญไม่ใช่แต่กับโครงสร้างและองค์ประกอบที่เป็นสื่อผสมหรือมัลติมีเดีย (multimedia) เท่านั้น แต่ยังรวมถึง(Application programming interfaces (APLS) ซึ่งจะช่วยให้ผู้พัฒนา เว็บที่พอจะมีความรู้ทางการเขียนโปรแกรมสามารถพัฒนาโปรแกรมให้กับเว็บไซต์ของตนเองได้อีกด้วย
42 1.2 ความสามารถเด่นๆของ HTML5 HTML5 ได้เพิ่มความสามารถใหม่ๆ เช่น Audio/Video Support รองรับมัลติมีเดียได้อย่างเต็มรูปแบบหรือสมบูรณ์มากขึ้นโดยได้เพิ่มคำสั่งสำหรับการแสดงภาพและ เสียงโดยตรง New Form input ในการสร้างฟอร์มได้เพิ่มการรับรองข้อมูลชนิดใหม่ๆเข้ามามากมายเพื่อรับข้อมูลรูปแบบนั้นๆโดยตรง เช่น email, number, datetime เป็นต้นนอกจากนี้จะช่วยให้เรารับข้อมูลที่ถูกต้องแล้วยังลดขั้นตอนของการ เขียนสคริปต์(JavaScript หรือ PHP) เพื่อตรวจสอบความถูกต้องของข้อมูลด้วย Semantic Markup Page Layout เป็นองค์ประกอบเชิงความหมาย (Semantic element) ช่วยในการจัดหน้าแบบแบ่งส่วนได้โดยง่าย เช่น <header>,<nav>,<article>,section>,<aside>,และ <footer> Canvas Graphics ช่วยให้เราวาดรูปกราฟิกแบบต่างๆ ตามที่ราต้องการบนหน้าเว็บเพจได้ง่ายและสะดวกขึ้น Drag&Drop HTML5 นั้นรองรับการใช้เมาส์ในการลากแล้ววางวัตถุบนหน้าเว็บ (Drag&Drop) โดยใช้คำสั่ง จาวาสคริป (JavaSript) ควบคุมกระบวนการ Web Storage เป็นกลไกลการจัดเก็บข้อมูลในฝั่งเบราว์เซอร์แบบใหม่ซึ่งสามารถจัดเก็บข้อมูลแบบซับซ้อนได้ดีกว่า เดิมที่จัดเก็บแบบคุกกี้ 2. โครงสร้างของภาษา HTML การสร้างเอกสาร HTML มีองค์ประกอบ หรือ อีลีเมนต์ (Element) หลักๆ อยู่ 2ส่วน คือ ส่วนที่เป็น ข้อความที่จะพิมพ์และส่วนที่เป็นคำสั่ง 2.1 แท็กคำสั่ง สำหรับส่วนที่เป็นคำสั่งที่จะนำมาใช้เพื่อกำหนดส่วนต่างๆในเอกสารซึ่งจะถูกเรียกว่า แท็ก (Tag) และ จะเขียนอยู่ในเครื่องหมาย < > ในรูปแบบ < คำสั่ง > เช่น <html>,<b>,<u> เป็นต้นโดยแต่ละแท็กจะทำ หน้าที่แตกต่างกันไป แบ่งออกเป็น 2 กลุ่ม ดังนี้ 1. รูปแบบคำสั่งที่มีเพียงคำสั่งเดียวหรือมีแท็กเดียว สามารถใช้งานได้และสิ้นสุดความหมายด้วยตัวมัน เอง เช่น <br>,<wbr> เป็นต้น 2. รูปแบบคำสั่งที่แยกออกเป็น 2 ส่วน หรือแท็กคู่ คือ มีส่วนเริ่มต้นเรียกว่า แท็กเปิด ( Start tag) และส่วนจบของคำสั่งเรียกว่า แท็กปิด (End tag) โดยส่วนที่จบของรูปแบบคำสั่งจะมีเครื่องหมาย slash (/) กำกับไว้หน้าแท็กนั้นๆ
43 ในการเขียนรูปแบบคำสั่งที่แยกออกเป็น 2 ส่วนหรือแท็กคู่ คำสั่งนั้นจะต้องเป็นคำสั่งที่สมมาตรกัน เช่น เมื่อเปิดด้วยคำสั่งตัวหนา <b> และขีดเส้นใต้ <u> เวลาเปิดคำสั่งก็ต้องปิดด้วยคำสั่งขีดเส้นใต้ก่อนแล้วจึง ปิดด้วยคำสั่งตัวหนา ดังนี้ 2.2 คำสั่่งเสริมเพื่อบอกคุณลักษณะของแท็ก (Attribute) ลำพังเฉพาะตัวแท็กคำสั่งเองอาจจะไม่สามารถกำหนดอะไรได้มาก ดังนั้นในแต่ละแท็กคำสั่งยังอาจ กำหนดคำสั่งเสริมเพื่อกำหนดคุณลักษณะ (Attribute) ของแท็กคำสั่งนั้นซึ่งจะแตกต่างกันไป การกำหนดคุณลักษณะจะเขียนอยู่ในรูปแบบ Attributename=“value” เมื่อ attributenme คือชื่อของ attribute และ value คือค่าที่กำหนดให้กับ attribute โดย attribute จะเขียนถัดจากแท็กคำสั่ง โดยเว้นกันด้วยช่องว่าง และจะเขียนอยู่ในแท็กเปิดเท่านั้น <tag attributename = “value”> <tag attributename = “value”> content </tag> เราสามารถใส่ attribute ได้มากกว่า 1 คำสั่งโดยการเว้นวรรค <tag attribute1= “value” attribute2= “value”>
44 3. คำสั่งในการกำหนดโครงสร้างหลัก โครงสร้างหลักของเอกสาร HTML จะประกอบด้วยแท็กคำสั่งหลักๆซึ่งมีรายละเอียดดังนี้ 3.1 ประกาศชนิดของเอกสาร (HTML DOCTYPE) บรรทัดแรกสุดของเอกสาร HTML จะเป็นการประกาศชนิดของเอกสาร หรือ Document TypeDeclaration (DTD) , หรือเรียกสั้นๆว่า การประกาศ DOCTYPE ซึ่งจะเป็นการบอกถึงรุ่นของ HTML หรือ XHTML ที่เราใช้และยังบอกถึงเบราว์เซอร์รู้ด้วยว่าจะต้องแปลคำสั่งต่างๆในส่วนถัดๆ มาอย่างไร ใน HTML รุ่นก่อนการประกาศชนิดของเอกสารจะใช้คำสั่งที่ยุ่งยาก ตัวอย่างเช่น ใน HTML4 จะ ประกาศดังนี้ <!DOCTYPE HTMLPUDLIC”-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/loose.dtd”> แต่ใน HTML5 จะใช้การประกาศชนิดของเอกสารที่ง่ายขึ้นกว่าเดิมมาก โดยเขียนดังนี้ <!DOCTYPE html> 3.2 เริ่มต้นเอกสารด้วยแท็กคำสั่ง <html> หลังจากที่เราประกาศ DOCTYPE แล้วเราจะใส่แท็กคำสั่ง <html> ซึ่งเป็นคำสั่งแบบแท็กคู่เพื่อใช้ บอกจุดเริ่มต้นและจุดจบของเอกสารโดยแท็กคำสั่งนี้จะคลุมเนื้อหาทั้งหมดในหน้าเว็บเพจนั้นไว้ <!DOCTYPE html> <html> </html>
45 3.3 กำหนดส่วนหัวของเอกสารด้วยแท็ก <head> โครงสร้างของเอกสาร HTML จะรียงตามลำดับชั้น ซึ่งเอกสารส่วนใหญ่จะต้องมีสวนหัวของเอกสาร ดังนั้นเราจะกำหนดส่วนหัวของเอกสารต่อจากแท็กคำสั่ง <html> ทันทีโดยใช้แท็ก <head> ในการกำหนด จุดเริ่มต้นของส่วนหัว และปิดท้ายด้วยแท็ก </head> <!DOCTYPE html> <html> <head> </head> </html> ส่วนหัวของเอกสารถือเป็นองค์ประกอบหลักของเอกสาร HTML โดยจะประกอบด้วยข้อมูลพื้นฐาน เช่น ชื่อเรื่อง (Title) และข้อมูลของข้อมูล (Metadata คือข้อมูลที่อธิบายให้ทราบรายละเอียดของข้อมูลที่ ต้องการ) เช่น คำหลัก (keyword),ชุดอักขระ (character encoding),ข้อมูลผู้เขียนเว็บ,และคำอธิบาย การใส่ชื่อเรื่องด้วยแท็กคำสั่ง <title> แท็กคำสั่ง <title> …… </title> เป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการนำมาแสดงผลบน แถบชื่อเรื่อง (Title bar) โดยกำหนดความยาวของข้อความได้ไม่เกิน 64 ตัวอักษร การใส่ข้อมูล metadata ด้วยแท็ก <meta> ตัวอย่างเช่น การกำหนดชุดอักขรที่จะใช้ในหน้าเว็บใน HTML5 จะเขียนได้ง่ายๆ ดังนี้ <meta charset=”UTF-8”> อันที่จริงเราไม่จำเป็นต้องรู้ลึกถึงการเข้ารหัสอักขระ ซึ่งโดยพื้นฐานก็คือ การกำหนดชุดของอักขระใน ภาษาที่มนุษย์เข้าใจที่จะนำมาใช้ในเอกสารของเรา มันจะเป็นการดีที่จะกำหนดให้เป็น UTF-8 ซึ่งเป็นชุด อักขระสากล (Universal Character set) ที่ใช้ได้กับทุกภาษานอกจากเรายังอาจใส่ข้อมูลอื่นๆได้อีก เช่น <meta name=“author”content=“ittiwiti”> 3.4 ใส่เนื้อหาในแท็กคำสั่ง <body> หลังจากที่เรากำหนดส่วนหัวของเอกสารได้แก่ กำหนดชื่อเรื่องใน<title>,และกำหนดข้อมูลใน <mata>แล้วเราก็พร้อมจะที่จะสร้างส่วนของเนื้อหาของเราที่ต้องการให้แสดงผลในเว็บเบราว์เซอร์ได้ ซึ่งส่วน ของเนื้อหานี้จะถูกเขียนไว้ในแท็กคำสั่ง <body>……</body>
46 สรุปโครงสร้างหลักของเอกสาร HTML 3.5 การกำหนดภาษาใน HTML5 การกำหนดภาษาพื้นฐานที่จะใช้ในหน้าเอกสาร เป็นสิ่งสำคัญสำหรับโปรแกรมต่างๆ ที่เข้าถึงหน้า เอกสารนั้น รวมทั้งโปรแกรมค้นหาอย่าง Search engines ทางที่ง่ายที่สุดในการกำหนดภาษาในเอกสาร HTML ก็คือการใส่คำสั่ง lang ในแท็กคำสั่งหลัก <html> ตัวอย่างเช่น <html lang=“en”> จากตัวอย่างนี้ค่าที่กำหนดคือ en ซึ่งเป็นการกำหนดว่าเอกสารนี้ถูกเขียนในภาษาอังกฤษแต่ก็จะไม่มี ปัญหาใด ๆ ถ้าในเอกสารนั้นมีภาษาอื่นอยู่ด้วย 3.6 การใส่หมายเหตุ (Comment) HTML ก็เหมือนกับการเขียนโปรแกรมภาษาส่วนใหญ่ที่สามารถเขียนหมายเหตุลงไปได้ ซึ่งหมายเหตุนี้ อาจเป็นข้อความเพื่อเตือนความจำของผู้เขียน หรือบอกให้ผู้ศึกษาโปรแกรมของเราได้ทราบ โดยเว็บ เบราว์เซอร์จะไม่ประมวลในส่วนนี้ ส่วนของหมายเหตุจะขึ้นต้นด้วย <!— ตามด้วยข้อความหมายเหตุที่ ต้องการ ซึ่งเป็นอะไรก็ได้ยกเว้นขีดคั่นคู่ (--) เนื่องจากเป็นเครื่องหมายบอกจุดสิ้นสุดของส่วนนี้ (-->) เช่น <meta name=“author” content= “ittiwiti”> <!—บอกชื่อผู้เขียน -- >
47 3.7 ตัวอย่างเว็บเพจที่เขียนด้วย HTML5 4. การสร้างเว็บเพจด้วยภาษา HTML ก่อนที่จะเริ่มต้นเข้าสู่การสร้างเว็บเพจด้วยภาษา HTML เราจำป็นที่จะต้องมีเครื่องมือที่จะใช้ในการ สร้างเอกสาร HTML เสียก่อน ซึ่งเครื่องมือในการสร้างเอกสาร HTML นี้ประกอบด้วย 2 ส่วน ได้แก่ 1. เท็กซ์เอดิเตอร์ (Text Editor) 2. เว็บเบราว์เซอร์ (Web Browser) 4.1 เท็กซ์เอดิเตอร์ (Text Editor) เป็นส่วนของโปรแกรมที่ช่วยในการกำหนดข้อวามและรูปแบบคำสั่งต่างๆ ในมารฐานของ HTML ซึ่งมีอยู่มากมายหลายโปรแกรมให้เราเลือกใช้ได้ เช่น Notepad Notepad เป็นเท็กซ์เอดิเตอร์ที่ง่ายและพื้นๆที่สุด เป็นโปรแกรมที่มีมาพร้อมกับ Microsoft Windows อยู่แล้วจึงใช้งานได้ทันที หากเราใช้ Macintosh โปรแกรมที่ใกล้เคียงที่สุดจะได้แก่ Simple Tex ใน OS 9 หรือ Textedit ใน OS X