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

100 3. ปรากฎหน้าจอให้ เลือกรูปภาพคลิกรูปภาพที่ต้องการ คลิก OK 4. รูปภาพที่เลือกจะปรากฏขึ้นมาดังรูป 5. เลือกมุมมอง Slipt Code ชุดคำสั่งในการจัดการรูปภาพจะปรากฏขึ้น <img src="header.jpg" width="1010" height="300" alt=" "/> หมายถึง คำสั่งแทรกรูปภาพ ชื่อรูปภาพ = หมายถึง ขนาด หมายถึง ความสูง หมายถึง ข้อความคำอธิบายรูปภาพบนเว็บไซต์

101 สิ่งที่ควรรู้ At Attribute หรือ Alt Tag หรือ Alt image คือข้อความคำอธิบายรูปภาพบนเว็บไซต์ Alt หน้าที่ หลักคือ ช่วยอธิบายรูปภาพคืออะไร มีความเกี่ยวข้องกับบทความและเว็บไซต์ ในกรณีที่รูปภาพบนเว็บไซต์ ไม่แสดง Alt Attribute จะทำให้รู้ได้ว่ารูปที่ไม่แสดงหรือมีปัญหาคือรูปอะไร การใส่คำสำคัญ (Keyword) ลงใน Alt Attribute จะช่วยในเรื่องของ SEO การสืบค้นข้อมูลใน Google ด้วย 7.1.2 การปรับขนาดภาพกราฟิกในเว็บไซต์ การปรับขนาดภาพกราฟิกสามารถทำได้หลายวิธี ทั้งใช้คำสั่งและใช้มุมมอง Design โดยการ ได้เมาส์ คลิกที่ภาพ จะปรากฏตให้สามารถปรับขนาดของภาพให้เล็กลงได้ในส่วนของคำสั่งตัวเลขที่อยู่กับ ค่า Width และ Hight จะลดลงตาม ดังรูป 7.1.3 การลบภาพกราฟิกในเว็บไซต์ การลบภาพกราฟิกสามารถทำได้หลายวิธี ทั้งใช้คำสั่งและใช้มุมมอง Design โดยการใช้เมาส์คลิก ที่ภาพ กดปุ่ม Delete ที่แป้นพิมพ์ หรือกด Ctrl+X รูปภาพ จะหายไปทั้งมุมมอง Design ดังรูป

102 ภาพเคลื่อนไหว หมายถึง ภาพที่ถูกสร้างขึ้นโดยการนำภาพนิ่งหลาย ๆ ภาพมาขยายต่อเนื่องกันด้วย ความเร็วสูงทำให้เกิดภาพลวงตาของการเคลื่อนไหว โดยปกติความเร็วของภาพเคลื่อนไหวจะฉายด้วยความเร็ว ที่ต่างกันขึ้นอยู่กับชนิดของการแสดงผล (Output) การนำภาพเคลื่อนไหวมาใช้สำหรับเว็บไซต์นั้นจะทำให้ เว็บไซต์มีความน่าสนใจน่าตื่นเต้นมากกว่าการสร้างเว็บไซต์จากภาพนิ่งธรรมดา 7.2.1 ประเภทของภาพเคลื่อนไหว แบ่งได้เป็น 2 ประเภท คือ 1. ภาพเคลื่อนไหวแบบ 2 มิติ (2D Animation) จะมองเห็นได้ทั้งความสูงและความกว้าง ซึ่งจะมีความเหมือนจริงพอสมควรและการสร้างจะไม่สลับซับซ้อนมากนัก เช่นภาพเคลื่อนไหวที่ปรากฏตาม เว็บไซต์ต่าง ๆ รวมทั้งภาพที่มีนามสกุล Gif swf เป็นต้น 2. ภาพเคลื่อนไหวแบบ 3 มิติ (3D Animation) จะมองเห็นได้ทั้งความสูง ความกว้าง และ ความลึก ภาพที่เห็นจะมีความสมจริงมากที่สุด เช่น ภาพยนตร์ต่าง ๆ เป็นต้น 7.2.2 การแทรกภาพเคลื่อนไหว การแทรกภาพเคลื่อนไหวมีขั้นตอนดังนี้ 1. คลิกที่มุมมองออกแบบ คลิกตำแหน่งที่ต้องการภาพเคลื่อนไหว 2. คลิกเครื่องมือ Flash SWF 3. จะปรากฏหน้าจอ Select SWE ให้เลือกไฟล์ภาพเคลื่อนไหว คลิก OK 7.2 การจัดการไฟล์ภาพเคลื่อนไหวในเว็บไซต์

103 4. จะปรากฏหน้าต่าง Object Tag Accessibility Attributes ใส่ชื่อ คลิก Ok 5. ไฟล์ภาพเคลื่อนไหวจะถูกแทรกเข้ามา ดังรูป 6. กด Ctrl+S คลิกที่ปุ่ม Real-time Preview 7. คลิกเลือกบราวเซอร์ที่จะแสดงผล 8. ไฟล์ภาพเคลื่อนไหวทีแทรกจะแสดงผลผ่านบราวเซอร์ที่เลือก ดังรูป

104 การใช้ข้อความในเว็บเพจมีความสำคัญมากเพราะข้อความจะแสดงถึงรายละเอียดของข้อมูล ที่ต้องการนำเสนอผ่านทางเว็บไซต์ การพิมพ์ข้อความควรพิมพ์ให้ถูกต้อง ทั้งรูปแบบหัวข้อเลือกใช้ให้เหมาะสม การเว้นวรรคตอน การเลือกใช้สีควรเลือกให้เหมาะสมกับข้อมูลเพราะการใช้ข้อความในเว็บเพจนั้น จะสร้างความน่าเชื่อถือให้กับเว็บไซต์และหน่วยงานเป็นอย่างมากการจัดการข้อความในเว็บเพจด้วย โปรแกรม Dreamweaver CC 2018 สามารถทำได้ดังนี้ 7.3.1 การจัดการข้อความกับตำราง 7.3.1 คลิกตำแหน่งที่ต้องการพิมพ์ข้อความ 7.3.2 ที่หน้าต่าง Properties จัดตำแหน่ง ที่ช่อง Horz เลือก Left จัดตำแหน่งให้ชิดซ้าย Vert เลือก Top คือจัดตำแหน่งให้ชิดด้านบน ดังรูป 7.3.3 แทรกตาราง ที่แถบ HTML คลิกปุ่ม Table กำหนด 7.3.4 ปรากฏหน้าต่าง Table ขึ้นมากำหนดคุณสมบัติเบื้องต้นของตารางในหน้าต่าง Table มีรายละเอียดดังนี้กำหนดค่าของตาราง Rows = B, Columns = 1, Table width = 250 pixels,Border thickness = 1 pixels, Cell padding = 4, Cell spacing= 4 man OK 7.3.5 จะได้ตารางตามต้องการ 7.3 การจัดการข้อความในเว็บไซต์

105 7.3.6 พิมพ์ข้อความหัวข้อให้กับตาราง 7.3.7 คลิกเลือกเซลล์ใส่สีพื้นหลังให้กับตารางกำหนดให้ข้อความเป็นหัวข้อที่แถบProperties 7.3.10 การพิมพ์ข้อความในส่วนท้าย คลิกตำแหน่งที่ต้องการพิมพ์ข้อความในส่วนท้ายเทสี ที่ต้องการ สามารถใช้หน้าต่าง CSS ที่ช่อง By เลือกสีที่ต้องการได้เลย 7.3.11 เปลี่ยนสีตัวอักษรให้เป็นสีขาวเพื่อให้ตัดกับพื้นหลังสีเข้ม 7.3.12 พิมพ์ข้อความตามต้องการที่มุมมอง Design โดยกด Shift+Enter เมื่อขึ้นบรรทัดใหม่ โดยระยะบรรทัดจะไม่ห่างกันมาก ในมุมมอง Code จะปรากฏแท็ก <br> เป็นคำสั่งขึ้นบรรทัดใหม่ให้อัตโนมัติ

106 7.3.13 การใส่ข้อความในส่วนเนื้อหา ควรกำหนดสีพื้นหลังให้เหมาะกับการอ่านนาน ๆ เช่นสีขาว สีเหลืองอ่อน สีฟ้าอ่อน สีชมพูอ่อน เพื่อให้อ่านตัวอักษรได้นานขึ้น (คำสั่งการหนดสีพื้นหลังให้เป็น สีขาว bgcolor="#FFFFFF) หรือสามารถเลือกสีช่อง Be ในแถบ Properties ได้เลย 7.3.14 คลิกตำแหน่งที่ต้องการแทรกตาราง จัดตำแหน่งให้กึ่งกลางด้านบน 7.3.15 แทรกรูปภาพที่แถบ HTML คลิกที่เครื่องมือ 2 image เลือกรูปภาพที่ต้องการ กำหนดขนาดรูปภาพให้เหมาะสมที่แถบ Properties W = 34 H = 33 พิมพ์ข้อความระหว่างรูปภาพดังรูป 7.3.16 กำหนดให้ข้อความเลื่อน

107 7.3.17 คลิกตำแหน่งที่จะใส่ตาราง กด Enter ข้อพึงระวัง ต้องอยู่หลัง </marquee>เท่านั้น 7.3.18 คลิกเครื่องมือแทรกตารางกำหนดคุณสมบัติตามที่ต้องการ 7.3.19 จะได้ตารางตามที่กำหนด ที่แถบ HTML แทรกรูปภาพแถวที่ 1 คลิกเครื่องมือImage แทรกรูปภาพที่ต้องการ คลิก OK ดังรูป

108 7.3.20 แทรกรูปภาพให้ครบ 3 แถว ดังรูป 7.3.21 พิมพ์ข้อความและจัดรูปแบบตำแหน่งให้สวยงาม 7.3.22 คลิกเมนู File > Save กด F12 เพื่อดูการแสดงผลผ่านโปรแกรมเว็บบราวเซอร์

109

110 การเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ หัวข้อเรื่อง (Topics) 8.1 เครื่องมือในการเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ 8.2 การกำหนดพฤติกรรมการแสดงผลของภาพในเว็บไซต์ 8.3 การเพิ่มวิดีโอ YouTube ในเว็บไซต์ แนวคิดสำคัญ(Main Idea) หลังจากที่ได้สร้างเว็บไซต์จัดการไฟล์ภาพกราฟิก การจัดการไฟล์ภาพเคลื่อนไหว และการจัดการ ข้อความเนื้อหาสำหรับเว็บไซต์เสร็จเรียบร้อยแล้ว เนื้อหาในหน่วยนี้จะประกอบไปด้วย การเพิ่มเทคนิคพิเศษ ให้กับเว็บไซต์การกำหนดพฤติกรรมการแสดงผลของภาพในเว็บไซต์การเพิ่มวิดีโอ YouTube ในเว็บไซต์ เพื่อให้เพิ่มเทคนิคพิเศษกับเว็บไซต์ให้มีความน่าสนใจมากยิ่งขึ้น สมรรถนะทางย่อย (Element of Competency) 1. แสดงความรู้เกี่ยวกับการเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ 2. ประยุกต์ใช้โปรแกรม Adobe Dreamweaver CC 2018 ในการเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ จุดประสงค์เชิงพฤติกรรม (Behavioral Objectives) 1. บอกเครื่องมือในการเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ได้ 2. กำหนดพฤติกรรมการแสดงผลของภาพในเว็บไซต์ได้ 3. เพิ่มวีดีโอ YouTube ในเว็บไซต์ได้

111 8.1 เครื่องมือในการเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ เนื้อหาสาระ (content) การเพิ่มเทคนิคพิเศษให้กับเว็บไซต์เป็นการเพิ่มคุณลักษณะต่าง ๆ เพื่อสร้างความน่าสนใจเป็น จุดดึงดูดและความตื่นตาตื่นใจให้กับผู้เข้าชมเว็บไซต์ โปรแกรม Adobe Dreamweaver 2018 มีเครื่องมือ ต่าง ๆ มากมายในการช่วยให้ผู้สร้างสามารถเพิ่มเทคนิคพิเศษ เพิ่มลูกเล่นที่น่าสนใจให้กับเว็บไซต์ได้ อย่างง่ายดายตัวอย่างเครื่องมือโปรแกรมสนับสนุน ได้แก่ HTML5 Video, Canvas, Flash, Rollover image, Java Script ActiveX และ Plugin เป็นต้น 1. HTML5 Video คือ การเขียนโค้ด HTML5 สำหรับการเล่นวิดีโอผ่านเว็บบราวเซอร์ด้วยแท็ก <video> 2. Canvas คือ แท็กตัวหนึ่งใน HTML5 ซึ่งเป็นคำสั่งใช้ในการสร้างงานกราฟิก จะมีแท็ก <canvas> </ canvas> แท็ก Canvas ช่วยเปลี่ยนลูกเล่นการแสดงผลของเว็บเพจ เป็นการวาดออบเจกต์ (เช่น ข้อความ รูปกล่องข้อความ ฯลฯ ) ขึ้นมาเป็นหน้าจอ 3. Flash เป็นไฟล์ภาพเคลื่อนไหวที่เกิดจากโปรแกรม Flash หรือ Animate ขนาดไฟล์ค่อนข้างเล็ก เพราะเป็นภาพแบบ Vector-Based ใช้ลายเส้นสร้างภาพ มีนามสกุลไฟล์แบบ .swf โดยผู้ใช้ต้องติดตั้ง โปรแกรม Flash Player กับเว็บบราวเซอร์ก่อนจึงจะใช้งานได้ 4. Rollover image เป็นการสร้างเอฟเฟกต์ให้กับรูปภาพคือลักษณะของการสลับรูปภาพ เมื่อนำ เมาส์ไปที่รูปภาพนั้น ๆ จะเปลี่ยนจากรูปหนึ่งเป็นอีกรูปหนึ่งทันทีโดยไม่ต้องใช้โค้ด Java Script อีกทั้งยัง สามารถใช้ Rollover เป็นจุดเชื่อมโยงได้อีกด้วย แต่ก่อนที่จะแทรกรูปภาพแบบ Rollover Image นั้นจะต้อง มีการเตรียมรูปภาพไว้ 2 รูปและมีขนาดที่เท่ากันเพื่อความสวยงามในขณะเปลี่ยนรูปภาพสำหรับการแทรก รูปภาพแบบ Rollover image 5. Java Script เป็นคำสั่งภาษา Java ขนาดสั้น เหมาะสำหรับสร้างลูกเล่นให้เว็บเพจ เช่น สร้าง ฟอร์มติดต่อกับผู้ใช้งาน นำมาสร้างเว็บเพจได้นอกเหนือจากภาษา HTML ซึ่ง Java Applet เป็นโปรแกรม ขนาดเล็กสร้างเกมที่สร้างด้วยภาษา Java ทำหน้าที่เฉพาะเจาะจง เช่น เกม ภาพเคลื่อนไหว เป็นต้น 6. ActiveX เป็นโปรแกรมขนาดเล็กซึ่งเรียกว่า“ คอนโทรล (Control) ทำหน้าที่เฉพาะตามที่เขียน ในโปรแกรมไว้ถูกเรียกใช้โดยดาวน์โหลดจากเว็บเซิร์ฟเวอร์มาทำงานบนเครื่องอัตโนมัติเช่น การแสดงภาพ 3 มิติการหมุนภาพแบบ 360 องศา 7. Plugin เป็นโปรแกรมเสริมที่ทำงานร่วมกับเว็บบราวเซอร์

112 8.2 การกำหนดพฤติกรรมการแสดงผลของภาพใน เว็บไซต์การกำหนดพฤติกรรมการแสดงผลของภาพในเว็บไซต์สามารถสร้างได้โดยการกำหนดค่าต่าง ๆ ใน หน้าต่าง Behaviors เพื่อเป็นการสร้างชุดรูปแบบในการโต้ตอบกับผู้เข้าชมเว็บไซต์เพื่อทำให้เว็บไซต์มีลูกเล่น ที่แปลกตา ทำให้ผู้เข้าชมไม่เบื่อหน่ายในการเข้าเยี่ยมชมเว็บไซต์ Behaviors ในโปรแกรม Dreamweaver CC 2018 ที่สามารถนำมากำหนดพฤติกรรมการแสดงผลของภาพต่าง ๆ ในเว็บไซต์ ได้แก่ Effects Goto URL Jump Menu Show-Hide Elements Swap Image Swap Image Restore เป็นต้นการก ำ ห น ด พฤติกรรมการแสดงผลของภาพในเว็บไซต์ที่น่าสนใจและนิยมนำมาประยุกต์ใช้ในเว็บไซต์ประเภทขายสินค้า คือ การทํา Swap Image สิ่งที่ควรเตรียมก่อนทำ Swap Image คือต้องเตรียมภาพจากโปรแกรมกราฟิก เพื่อให้ได้ภาพที่มีคุณภาพสวยงาม ทำให้เว็บไซต์มีความเป็นมาตรฐานและมีความน่าเชื่อถือมากขึ้น โดยเตรียม ภาพ 2 ขนาด คือ ขนาดใหญ่กับขนาดเล็ก ถ้ามีสินค้า 3 อย่าง ต้องมีภาพขนาดใหญ่ 3 ภาพ และมีภาพขนาด เล็ก 3 ภาพ เพื่อให้การสร้างเว็บไซต์ทำได้อย่างมีประสิทธิภาพและสวยงามขนาดของภาพต้องมีมาตรฐาน เดียวกัน ตัวอย่างภาพที่ต้องเตรียมในการทำ Swep lmage ขั้นตอนในการทำ Swep Image 1.เปิดหน้า index.html ขึ้นมา คลิกที่เมนู File > Save as เพื่อทำการบันทึกไฟล์ที่ได้สร้างโครงร่าง เว็บและส่วนประกอบต่าง ๆ ไว้เรียบร้อยแล้ว

113 2.ตั้งชื่อไฟล์ product.html คลิก Save 3.ลบข้อมูลในตารางออก โดยคลิกที่รูปภาพ และกดปุ่ม Delete ดังรูป 4.คลิกเลือกแถวแรกทั้งหมด คลิกเครื่องมือที่แถบ Properties คลิกเครื่องมือ Merge Cellsg เพื่อ ทำการรวมเซลล์

114 5.เซลล์ที่เลือกจะรวมกัน ดังรูป 6.เลือกแถวที่ 2 คอลัมน์ที่ 1 มี่แถบ HTML คลิกเครื่องมือ Image 7.คลิกเลือกรูปภาพสินค้าที่ต้องการ คลิก OK

115 8.คลิกรูปภาพที่ 1 ที่หน้าต่าง Properties กำหนด ID : small1 9.แทรกรูปภาพที่ 2 กำหนด ID : small2 10.แทรกรูปภาพที่ 3 กำหนด ID : small3

116 11. แถวที่ 1ของตาราง จะถูกกำหนดให้ใส่ภาพสินค้าขนาดใหญ่ ให้แทรกรูปภาพที่ 1 กำหนด ID : Big ที่หน้าต่าง Properties ดังรูป 12.คลิกเลือกภาพ ภาพที่ 1 ID : small1 คลิดเมนู Windows > Behaviors หรือกดคีย์ลัด Shift+F4 จะปรากฎหน้าจอ Behavior ดังรูป

117 13.ที่หน้าต่าง Behaviors คลิกเครื่องหมาย Add Behaviors เลือก Swep Image 14.จะปรากฏหน้าต่าง Swep Image - Image : ตำแหน่งของภาพที่เปลี่ยน ให้เลือก Image “Big” - Set source to : คลิกที่ปุ่ม Browse เลือกภาพขนาดใหญ่ของสินค้าภาพที่ 1 ซึ่งจะปรากฎเมื่อเลื่อน เมาส์ผ่านภาพ ID : smll1 - Preioad Images ให้ทำการยกเลิกการเลือกช่องนี้เพื่อให้การโหลดภำทำได้เร็วขึ้น - Restore Imgaes onMouseOut คืนค่ารูปภาพเดิมเมื่อเอาเมาส์ออก เมื่อตั้งค่าเรียบร้อยให้คลิก Ok

118 15.คลิกภาพ ID : small2 คลิกเครื่องหมาย + Add Behaviors เลือก Swep Image 16.จะปรากฏหน้าต่าง Swep Image - Image : ตำแหน่งของภาพทีปลี่ยน ให้เลือก Image “ Big” - Set source to: คลิกที่ปุ่ม Browse เลือกภาพขนาดใหญ่ของสินค้าภาพที่ 2 ซึ่งจะปรากฎเมื่อเลื่อน เมาส์ผ่านภาพ ID : small2 - Preioad Images ให้ทำการยกเลิกการเลือกช่องนี้เพื่อให้การโหลดภำทำได้เร็วขึ้น - Restore Imgaes onMouseOut คืนค่ารูปภาพเดิมเมื่อเอาเมาส์ออก เมื่อตั้งค่าเรียบร้อยให้คลิก Ok 17. คลิกภาพ ID: small3 คลิกเครื่องหมาย + Add Behaviors เลือก Swap Image 18. จะปรากฏหน้าต่าง Swap Image - Images : ตำแหน่งของภาพที่เปลี่ยนให้เลือก Image "Big" - Set source to: คลิกที่ปุ่ม Browse เลือกภาพขนาดใหญ่ของสินค้าภาพที่ 3 ซึ่งจะปรากฏเมื่อเลื่อน เมาส์ผ่านภาพ ID: small3 - Preload images ให้ทำการยกเลิกการเลือกช่องนี้เพื่อให้การโหลดภาพทำได้เร็วขึ้น - Restore irmages onMouseOut คืนค่ารูปภาพเดิมเมื่อเอาเมาส์ออก เมื่อตั้งค่าเรียบร้อยแล้วให้คลิก OK

119 19.บันทึก คลิกที่เมนู File > Save หรือกดคีย์ลัด Ctrl+S เพื่อบันทึก กด F12 แสดงผล

120 8.3 การเพิ่มวิดีโอ YouTube ในเว็บไซต์ เว็บไซต์การเพิ่มวีดีโอ YouTube ให้กับเว็บไซต์ถือเป็นการเพิ่มลูกเล่นให้กับเว็บไซต์อีกอย่างหนึ่ง ทำให้ เว็บไซต์มีความทันสมัย โดยเว็บไซต์ที่สามารถเพิ่มวิดีโอจากเว็บ YouTube และแสดงผลของวิดีโอผ่าน บราวเซอร์ได้จะต้องเชื่อมต่ออินเทอร์เน็ต เนื่องจากวิดีโอที่จะเพิ่มในเว็บไซต์นั้นนำชุดคำสั่งมาจากเว็บไซต์ที่มี การเผยแพร่ออนไลน์ในการเพิ่มวีดีโอ YouTube ในโปรแกรม Abode Dreamweaver CC 2018 มีขั้นตอนดังนี้ 1.เปิดหน้า index.html ขึ้นมาคลิกที่เมนู File> Save As เพื่อทำการบันทึกไฟล์ที่ได้สร้างโครงร่างเว็บ และส่วนประกอบต่าง ๆ ไว้เรียบร้อยแล้ว 2.ตั้งชื่อไฟล์ land.html คลิก Save

121 3.ลบข้อมูลในตารางออก เลือกแถวทั้งหมด คลิกขวา Table > Merge Cells 4.ตารางจะรวมกันที่หน้าต่าง Properties กำหนดความสูงของแถวที่ช่อง H : 300 5.เข้าสู่เว็บไซต์ You Tube ค้นหาวิดีโอที่ต้องการฝัง เมื่อได้วิดีโอแล้วคลิก แชร์

122 6.คลิกการแชร์แบบฝัง 7.จะปรากฏคำสั่งในการฝังวิดีโอ คลิก คัดลอก

123 8.คลิกที่มุมมอง Split คลิกตำแหน่งในมุมมอง Design ตำแหน่งในมุมมอง Code จะกะพริบให้วาง คำสั่งวิดีโอจาก YouTube ลง (ข้อควรรู้หากวาง Code ในมุมมอง Design จะไม่แสดงผลเป็นวิดีโอ แต่จะ แสดงผลเป็นชุดคำสั่งที่คัดลอกมาเท่านั้น) 9. บันทึกและกด F12 เพื่อดูการแสดงผล

124 10.การตั้งค่าให้วิดีโอ <iframe width="560" height ="315" src="https://www.youtube.com/embed/Dom8h1dTcpg" frameborder= "0" allow="accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture" allowfullscreen> </ iframe> การให้วิดีโอเล่นอัตโนมัติให้ใช้คำสั่ง ?autoplay=1 หลังวิดีโอ ภายใน“” <iframe width="560" height ="315" src = "https://www.youtube.com/embed/Dom8h1dTcpg?autoplay=1" frameborder="0" allow="accelerometer; ; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></ iframe>

125

126 การเชื่อมโยงและการทดสอบการทำงานของเว็บไซต์ หัวข้อเรื่อง (Topics) 9.1 รู้จักกับการเชื่อมโยงเว็บไซต์ 9.2 การเชื่อมโยงเว็บไซต์ 9.3 การตรวจสอบการเชื่อมโยงเว็บไซต์ แนวคิดสําคัญ (Main Idea) หลังจากที่ได้สร้างเว็บไซต์เพิ่มเทคนิคพิเศษให้กับเว็บไซต์การกำหนดพฤติกรรมการแสดงผลของภาพ ในเว็บไซต์การเพิ่มวิดีโอ YouTube ในเว็บไซต์เพื่อเพิ่มความน่าสนใจให้กับเว็บไซต์เรียบร้อยแล้ว เนื้อหา ในหน่วยนี้จะประกอบไปด้วย การรู้จักกับการเชื่อมโยงเว็บไซต์การเชื่อมโยงเว็บไซต์การตรวจสอบการ เชื่อมโยงเว็บไซต์เพื่อให้มีความรู้ความเข้าใจในการสร้างเว็บไซต์ต่อไป สมรรถนะย่อย (Element of Competency) 1. แสดงความรู้เกี่ยวกับการเชื่อมโยงเว็บไซต์ 2. ประยุกต์ใช้โปรแกรม Adobe Dreamweaver CC 2018 ในการเชื่อมโยงและการทดสอบ การทํางานของเว็บไซต์ จุดประสงค์เชิงพฤติกรรม (Behavioral Objectives) 1. อธิบายการเชื่อมโยงเว็บไซต์ได้ 2. เชื่อมโยงเว็บไซต์ได้ 3. ตรวจสอบการเชื่อมโยงเว็บไซต์ได้

127 9.1 รู้จักกับการเชื่อมโยงเว็บไซต์ เว็บไซต์ เนื้อหาสาระ (Content) การเชื่อมโยงเว็บไซต์คือ การกำหนดส่วนของข้อความ หรือรูปภาพที่ต้องการ ในเว็บเพจหน้าหนึ่ง ให้เชื่อมโยงไปยังเว็บเพจหน้าอื่น ๆ ซึ่งเนื้อหาที่เชื่อมโยงนั้นอาจจะอยู่ภายในหน้าเดียวกันเว็บไซต์เดียวกัน หรืออยู่คนละหน้าต่างเว็บไซต์ก็ได้การเชื่อมโยงหน้าเว็บเพจแต่ละหน้าจะประกอบด้วยลิงก์ (Link) หรือจุดที่ ใช้สำหรับเชื่อมโยงไปยังเป้าหมายปลายทางอาจเป็นรูปภาพหรือข้อความก็ได้และเป้าหมาย (Target) เป็นส่วน ปลายทางหรือจุดที่ต้องการให้เชื่อมโยงมาถึงจะอยู่ส่วนใดของเอกสารก็ได้การเชื่อมโยงเว็บไซต์แบ่งตาม วัตถุประสงค์ของการใช้งานจะแบ่งการเชื่อมโยงออกเป็น 5 ประเภทดังนี้ • การเชื่อมโยงภายในหน้าเว็บเดียวกัน • การเชื่อมโยงภายในเว็บไซต์ • การเชื่อมโยงภายนอกเว็บไซต์ • การเชื่อมโยงเพื่อส่งอีเมล • การเชื่อมโยงด้วย Map Link ตัวอย่างการเชื่อมโยงเว็บไซต์เช่น

128 9.2 การเชื่อมโยงเว็บไซต์ เว็บไซต์ 9.2.1 การเชื่อมโยงภายในเว็บเพจเดียวกัน การเชื่อมโยงภายในหน้าเว็บเดียวกัน หากข้อมูลในหน้าเดียวกันมีความยาวมากทำให้ต้อง เลื่อนแถบ Scroll Bar เพื่อเลื่อนดูข้อมูล สามารถสร้างจุดเชื่อมโยงข้อมูลส่วนดังกล่าวให้เชื่อมโยง ข้อมูลที่ต้องการได้โดยไม่ต้องเลื่อน Scroll Bar ด้วยการใช้ชุดคำสั่งในการเชื่อมโยงเว็บเพจหน้า เดียวกัน มีขั้นตอนการทําดังนี้ 1. คลิกรูปภาพสัญลักษณ์ของการเชื่อมโยงไปยังเนื้อหาที่อยู่ด้านล่าง 2. หน้าต่าง Properties กำหนดรหัสที่ช่อง ID: top 3. หน้าต่าง Properties กำหนดการเชื่อมโยง Link: #down 4. มุมมอง Split ชุดคำสั่งดังนี้ <a href="#down"> คือ สร้างการเชื่อมโยงไปจุดหมายปลายทางที่กำหนด <img src = "sign-down.png" alt = "width =" 75 "height =" 1 "คือรูปภาพที่ใช้ในการเชื่อมโยง กำหนดความกว้างและความสูงของรูปภาพ id =" top " คือ การกำหนดชื่อให้รูปภาพ

129 5. คลิกชื่อภาพที่ต้องการเชื่อมโยงที่แถบ Properties 6. หน้าต่าง Properties กำหนดรหัสที่ช่อง ID: down 7. หน้าต่าง Properties กำหนดการเชื่อมโยง Link #top 8. กด Ctrl + S เพื่อบันทึกกด F12 แสดงผลการทำงาน 9.2.2 การเชื่อมโยงภายในเว็บไซต์ การเชื่อมโยงภายในเว็บไซต์ เป็นการเชื่อมโยงไปยังหน้าเว็บหนึ่ง ที่อยู่ในเว็บไซต์เดียวกัน โดยมีขั้นตอนการเชื่อมโยง ดังนี้ 1.เปิดไฟล์ที่ต้องการเชื่อมโยง คลิกตำแหน่งที่ต้องการเชื่อมโยง สามารถคลิกได้ทั้งรูปภาพและ ข้อความ 2. ที่แถบ Properties ที่ช่อง Link คลิก Browse for File 3. จะปรากฏหน้าจอ Select File เลือกไฟล์ที่ต้องการเชื่อมโยงข้อมูลไปถึง คลิก OK 4. ที่ช่อง Link จะปรากฏชื่อไฟล์ที่ได้ทำการเชื่อมโยง 5.Target เป็นการกำหนดวิธีเปิดหน้าเว็บที่เชื่อมโยงดังนี้ Default : เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างบราวเซอร์เดิม _blank : เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างบราวเซอร์ใหม่ทุกครั้ง New : เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างบราวเซอร์ใหม่อีกหน้าต่าง _parent : เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างบราวเซอร์เดิม Self : เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างบราวเซอร์เดิม _top : เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างบราวเซอร์เดิมแสดงผลเต็มเว็บเพจเดิม ที่ช่อง Target คลิก Defalt 6.ข้อความที่ถูกเชื่อมโยงจะขีดเส้นใต้

130 7. รูปแบบคำสั่งของการเชื่อมโยง <a href="product.html" target="_self-"> - สินค้า</a> <a hrefo "product.html" คือ แท็กในการเชื่อมโยง ="ชื่อไฟล์ที่ถูกเชื่อมโยง" target =" _ self "> - สินค้า> คือ รูปแบบเปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างบราวเซอร์เดิม แสดงผลตัวอย่างการเชื่อมโยงภายในเว็บไซต์ 9.2.3 การเชื่อมโยงภายนอกเว็บไซต์ การเชื่อมโยงภายนอกเว็บไซต์คือ การสร้างจุดเชื่อมโยงไปยังเว็บไซต์อื่น ๆ สามารถทำได้โดย การพิมพ์ http: // นำหน้าชื่อเว็บไซต์ที่ต้องการเชื่อมโยง มีขั้นตอนดังนี้ 1. เลือกข้อความหรือรูปภาพที่ต้องการใช้เป็นจุดเชื่อมโยงไปยังเว็บไซต์อื่น 2. ที่หน้าต่าง Properties ในช่อง Link ให้พิมพ์ชื่อ URL ของเว็บไซต์ที่ต้องการเชื่อมโยง โดยพิมพ์คำว่า http: // แล้วตามด้วยชื่อของเว็บไซต์เช่น http://www.kruwipawee.com 3. ชุดคำสั่งในการเชื่อมโยงเว็บไซต์คือ <a href="http://www.kruwipawee.com/">kruwipme.comc</a><br> <a href="http://www.kruwipawee.com/">คือชื่อที่อยู่เว็บไซต์ kruwipawee.com </a> <br>คือ ชื่อข้อความที่ใช้เชื่อมโยง

131 9.3 การตรวจสอบการเชื่อมโยงเว็บไซต์ เว็บไซต์ ก่อนทำการอัพโหลดไฟล์เว็บไซต์ขึ้นสู่ระบบอินเทอร์เน็ต การตรวจสอบการเชื่อมโยงของเว็บเพจ ถือว่า เป็นสิ่งที่สำคัญ เพื่อป้องกันไม่ให้เกิด Broken Link คือ การเชื่อมโยงที่ผู้ใช้คลิกแล้ว ไม่สามารถเปิดเว็บ เพจที่ต้องการได้ ปัญหา Broken Link จะเกิดขึ้นได้เมื่อมีการเปลี่ยนชื่อไฟล์ย้ายไฟล์หรือโฟลเดอร์รวมถึง การลบไฟล์ มักเกิดขึ้นเมื่อมีการอัพโหลดไฟล์จากเครื่องที่ทำงานขึ้นสู่ระบบอินเทอร์เน็ต การตรวจสอบ การเชื่อมโยงทั้งหมดในไซต์มีขั้นตอนดังนี้ 1. คลิกที่เมนูSite> Site Options> Check Links Sitewide หรือกด Ctrl + F8 2. จะปรากฏหน้าต่างการตรวจสอบในโปรแกรม Adobe Dreamweaver CC 2018 จะสามารถ ตรวจสอบก่อนการอัพโหลดไฟล์ 3 ฟังก์ชัน คือ • Broker Links คือ ลิงก์ที่ผู้ใช้คลิกแล้วไม่สามารถเปิดเว็บเพจที่ต้องการได้จะเกิดขึ้นได้เมื่อมี การเปลี่ยนชื่อไฟล์ย้ายไฟล์หรือโฟลเดอร์รวมถึงการลบไฟล์ • External Links คือ ลิงก์ที่เชื่อมโยงภายนอกเว็บไซต์ • Orphaned Files คือ ไฟล์ที่เก็บในไซต์แต่ไม่ได้ถูกใช้งาน ตัวอย่างการตรวจสอบพบข้อผิดพลาดจะแสดงรายงานทั้ง 3 ฟังก์ชันดังรูป หากมีข้อผิดพลาดใน Broken Links เกิดขึ้นให้แก้ไขไฟล์ให้สมบูรณ์ตามจุดที่ตรวจสอบแล้ว จึงอัพโหลดไฟล์ขึ้นเว็บเซิร์ฟเวอร์เพื่อเผยแพร่ หากไม่ทำการแก้ไขจะทำให้เมื่อคลิกลิงก์แล้วจะเปิดไปยังไฟล์ ที่ไม่ถูกต้องหรือไฟล์เปิดไม่ได้เมื่อมีการแก้ไขเสร็จเรียบร้อยแล้วตรวจสอบ Broken Link ถ้าไม่พบข้อผิดพลาด ไฟล์เว็บไซต์ก็พร้อมในการเผยแพร่

132

133 การขอพื้นที่และการอัพโหลดเว็บไซต์ หัวข้อเรื่อง (Topics) 10.1 การขอพื้นที่ในการอัพโหลดเว็บไซต์ 10.2 โปรแกรมที่ใช้ในการอัพโหลดเว็บไซต์ 10.3 การอัพโหลดเว็บไซต์ แนวคิดสำคัญ (Main Idea) หลังจากที่ได้สร้างเว็บไซต์รู้จักกับการเชื่อมโยงเว็บไซต์วิธีการเชื่อมโยงเว็บไซต์การตรวจสอบ การเชื่อมโยงเว็บไซต์และการเตรียมพร้อมไฟล์ข้อมูลต่าง ๆ ของเว็บไซต์เสร็จเรียบร้อยแล้ว ในหน่วยนี้เนื้อหา จะประกอบไปด้วย การขอพื้นที่ในการอัพโหลดเว็บไซต์โปรแกรมที่ใช้ในการอัพโหลดเว็บไซต์การอัพโหลดเว็บ เพื่อเผยแพร่และนำเสนอเว็บไซต์ต่อไป สมรรถนะย่อย (Element of Competency) 1.แสดงความรู้เกี่ยวกับการขอพื้นที่และการอัพโหลดเว็บไซต์ 2.ติดตั้งโปรแกรมจําลอง Web Server หรืออัพโหลด (Upload) เว็บไซต์ จุดประสงค์เชิงพฤติกรรม (Behavioral Objectives) 1.ขอพื้นที่ในการอัพโหลดเว็บไซต์ได้ 2.บอกโปรแกรมในการอัพโหลดเว็บไซต์ได้ 3.อัพโหลดเว็บไซต์ได้

134 10.1 การขอพื้นที่ในการอัพโหลดเว็บไซต์ เว็บไซต์ เนื้อหาสาระ (Content) การขอพื้นที่ในการอัพโหลดไฟล์เว็บไซต์ (Web Hosting) คือ พื้นที่สำหรับเก็บข้อมูลเว็บไซต์บน อินเทอร์เน็ต โดยต้องจดทะเบียนเพื่อสํารองพื้นที่ไว้สำหรับอัพโหลดไฟล์เว็บไซต์ที่ได้ออกแบบไว้ไปเก็บไว้ที่ Web Hosting ซึ่งจะทำให้คอมพิวเตอร์เครื่องอื่นสามารถเปิดชมเว็บไซต์ได้ผ่านระบบอินเทอร์เน็ตซึ่งมี 2 แบบ ให้เลือกใช้งาน คือแบบเสียค่าใช้จ่าย และแบบให้บริการฟรีโดยมีข้อแตกต่างกันดังนี้ 10.1.1 Web Hosting แบบเสียค่าใช้จ่าย Web Hosting แบบเสียค่าใช้จ่าย จะเป็นพื้นที่เหมาะกับเว็บไซต์ที่ต้องการความน่าเชื่อถือ เช่น เว็บไซต์หน่วยงาน เว็บไซต์ขายสินค้า เว็บไซต์บริษัท หรือเว็บไซต์ให้บริการต่าง ๆ เนื่องจากสามารถใช้ชื่อ Domain Name ที่จดทะเบียนไว้ได้โดยรองรับระบบฐานข้อมูล และภาษาสคริปต์ต่าง ๆ หรือ Free E-mail Hosting ประเภทนี้จะมีทีมงานที่คอยดูแลระบบเซิร์ฟเวอร์เพื่อให้มีความเสถียรในการทำงาน 10.1.2 Web Hosting แบบบริการฟรี Web Hosting แบบให้บริการฟรีเป็นโฮสต์ที่เหมาะกับเว็บไซต์ที่ออกแบบเพื่อการศึกษาเว็บไซต์ ทดลองที่ไม่หวังผลทางธุรกิจ มีข้อจำกัดในการใช้งาน เช่น ให้พื้นที่น้อย ไม่มีอีเมล และมักจะมีป้ายโฆษณาบน เว็บไซต์ให้อัตโนมัติ 10.1.3 การขอใช้พื้นที่เพื่ออัพโหลดไฟล์แบบฟรีมีขั้นตอนดังนี้ 1. เปิดโปรแกรมเว็บบราวเซอร์แล้วพิมพ์ URL ที่ช่อง Address Bar พิมพ์ freewebhostingarea.com ใส่ชื่อโดเมนเนมที่ต้องการซึ่งต้องไม่ซ้ำกัน และคลิก PROCEED 2.กรอกข้อมูล อีเมล รหัสผ่านที่เข้าระบบ ทำเครื่องหมายถูกในช่องข้อตกลง คลิก CREATE 3.เมื่อสมัครเรียบร้อยแล้วระบบจะแสดงข้อความต้อนรับ Account Manager และ Your Personal FTP Information ให้ทำการบันทึกไว้ เนื่องจากเป็นข้อมูลที่สำคัญในการอัพโหลดเว็บไซต์ในขั้นต่อไป 4.จะปรากฎหน้าเว็บแสดงข้อมูลการใช้งาน Hosting ซึ่งประกอบด้วยข้อมูลที่สำคัญดังนี้ • Username : คือ ชื่อผู้ใช้ระบบ • Password : คือ รหัสผ่านเข้าใช้งานระบบ • หน้าเว็บแสดงผล คือ โดเมนเนมที่ผู้ใช้คลิกแล้วจะพบเว็บไซต์ปรากฏขึ้นมา • ข้อมูล FTP (File Transfer Protocol) คือ การโอนย้ายไฟล์ข้ามระบบเครื่องใช้โปรโตคอล TCP เป็นกลไกขนส่งข้อมูล

135 10.2 โปรแกรมที่ใช้ในการอัพโหลดเว็บไชต์ เว็บไซต์ 10.3 การอัพโหลดเว็บไซต์ เว็บไซต์ FTP ย่อมาจาก File Transfer Protocol คือ โปรโตคอลเครือข่ายชนิดหนึ่ง ถูกนำใช้ในการ ถ่ายโอนไฟล์ระหว่างเครื่องคอมพิวเตอร์การถ่ายโอนไฟล์ระหว่างไคลเอนต์ (Client) กับเครื่องคอมพิวเตอร์ที่ เป็นแม่ข่าย เรียกว ่า Hostine หรือ Server ซึ่งทำให้การถ่ายโ อนไฟล์ง่ายและปลอดภัย การใช้ FTP ที่พบบ่อยสุด เช่น การดาวน์โหลดไฟล์จากอินเทอร์เน็ต ความสามารถในการถ่ายโอนไฟล์ ทําให้ FTP เป็นสิ่งจําเป็นเมื่อสร้างเว็บไซต์เสร็จเรียบร้อยแล้ว โดยทีการติดต่อกันทาง FTP จะต้องติดต่อผ่าน Port 21 ซึ่งก่อนจะเข้าใช้งานได้จะต้องเป็นสมาชิก ต้องมีชื่อผู้เข้าใช้ (User) และรหัสผู้เข้าใช้ (password) โปรแกรมที่นิยมใช้ในการถ่ายโอนไฟล์ข้อมูล ได้แก่ โปรแกรม FileZilla, CuteFTP หรือ WSFTP เป็นต้น FTP แบ่งเป็น 2 ส่วน 1. FTP Server เป็นโปรแกรมที่ถูกติดตั้งไว้ที่เครื่องเซิร์ฟเวอร์ทำหน้าที่ ให้บริการ FTP หาก มีการเชื่อมต่อจากโคลเอนต์เข้าไป 2. FTP Client เป็นโปรแกรม FTP ที่ถูกติดตั้งในเครื่องคอมพิวเตอร์ของผู้ใช้ (User) ทั่วไป ทำหน้าที่ เชื่อมต่อไปยัง FTP Server และทําการอัพโหลด ดาวน์โหลดไฟล์หรือจะสั่งแก้ไขชื่อไฟล์ ลบไฟล์และเคลื่อนย้ายไฟล์ก็ได้เช่นกัน เมื่อขอพื้นที่ (Web Hosting) เพื่ออัพโหลดเว็บไซต์บนระบบอินเทอร์เน็ตเรียบร้อยแล้ว ขั้นตอนต่อไป คือ การโอนข้อมูลไปยังพื้นที่ที่ได้ขอไว้โปรแกรมที่ใช้ในการอัพโหลดไฟล์ ได้แก่ SSH Secure Shell, FileZilla เป็นต้น เว็บไซต์ที่ใช้พื้นที่ฟรีส่วนใหญ่โปรแกรมที่สามารถถ่ายโอนไฟล์ข้อมูล ได้ส่วนใหญ่คือ โปรแกรม FileZilla ซึ่งสามารถดาวน์โหลดมาติดตั้งได้ฟรี 10.3.1 ขั้นตอนการติดตั้งโปรแกรม FileZilla 1. ดาวน์โหลดโปรแกรม https://filezilla-project.org/filezilla pro.php 2. ดับเบิลคลิกโปรแกรม FileZilla.exe จะปรากฏหน้าจอ License agreement คลิก I Agree 3. เลือก Options ที่ต้องการ และคลิก Next 4. โปรแกรมจะทำการติดตั้ง Components ต่าง ๆ และคลิก Next 5. เลือกแหล่งที่ตั้งของไฟล์ และคลิก Next 6. โปรแกรมตั้งค่าให้เลือกจาก Start Manu 7. รอสักครู่โปรแกรมกำลังทำการติดตั้ง 8. โปรแกรมจะทำการติดตั้งจนเสร็จดังรูป

136 10.3.2 การอัพโหลดเว็บไซต์ เมื่อติดตั้งโปรแกรม FileZilla เสร็จเรียบร้อยแล้ว ขั้นตอนการอัพโหลดไฟล์เว็บไซต์มีดังนี้ 1.เปิดโปรแกรม FileZilla ขึ้นมา กรอกข้อมูลการใช้งานเว็บไซต์ที่ได้จากการสมัครพื้นที่คลิกปุ่ม Quickconnect โปรแกรมจะทําการเชื่อมต่อไปยัง Hosting หลังจาก FTP เข้ามาในเซิร์ฟเวอร์จะ พบว่า ด้านซ้ายของโปรแกรม คือ ส่วนของ Computer/Desktop และ ด้านขวาของโปรแกรม คือส่วนของ Hosting 2.คลิกเลือกไฟล์ทั้งหมด คลิกขวา เลือก Upload ไฟล์ โปรแกรมจะทำการอัพโหลดไฟล์ไปยังฝั่ง Hosting 3.โปรแกรมจะแสดงสถานการณ์ถ่ายโอนไฟล์ข้อมูล เมื่อถ่ายโอนไฟล์ข้อมูลหมด โปรแกรมจะ แสดง Successful transfers พร้อมบอกจำนวนไฟล์ข้อมูลที่ได้ถ่ายโอนข้อมูลสำเร็จ 4.เมื่ออัพโหลดเสร็จเรียบร้อยแล้วสามารถเข้าไปดูเว็บไซต์ได้ที่ blossomtea.eu5.org หาก ต้องการแก้ไขไฟล์สามารถดาวน์โหลด (Download) ไฟล์มาแก้ไข แล้วอัพโหลดไปแทนที่ไฟล์เดิม ได้