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

150 จงเลอื กคาตอบทีถ่ ูกต้องท่ีสุดเพยี งข้อเดียว 1. ถา้ ต้องการสรา้ งไซดเ์ ป็นมาตรฐานสากล ควรกาหนดชื่อโฟลเดอร์สาหรบั เกบ็ รูปภาพวา่ อะไรจงึ จะ เหมาะสม ก. pictures ข. images ค. กาหนดช่อื ให้สอดคล้องกับรูปภาพ เชน่ fl owers ง. กาหนดชอื่ อะไรกไ็ ด้ตามต้องการ 2. การแทรกภาพบนเวบ็ เพจทาอย่างไรจงึ จะแทรกภาพไดเ้ รว็ ก. ร้ชู อ่ื ไฟล์ ข. ตง้ั ช่อื ใหย้ าวๆ ค. ตง้ั ชือ่ ให้ส้นั ๆ ง. กาหนดชอ่ื อย่างไรก็ได้ตามต้องการ 3. หากต้องการย่อขยายภาพโดยไม่เสยี สัดสว่ น ทาได้อยา่ งไร ก. Double Click ที่ภาพถ่ีๆ ข. กด Shift ค้างรว่ มกับการปรบั ขนาด ค. กด Ctrl คา้ งรว่ มกบั การปรับขนาด ง. ใชเ้ มาสล์ ากอย่างระมัดระวงั ทลี ะด้าน 4. เลือกเมนูข้อใดเพ่ือใส่ภาพฉากหลังให้เวบ็ เพจ ก. Edit ข. Modify ค. Insert ง. View 5. เลือกเมนู Insert/Media/Plugin เปน็ ขนั้ ตอนเพ่ือแทรกอะไร ก. ไฟลเ์ สียง ข. ไฟลภ์ าพน่ิง ค. ไฟลภ์ าพเคลอ่ื นไหว ง. ไฟล์วดี โี อ 6. เลอื กเมนู Insert/Media/SWF เป็นขนั้ ตอนเพ่ือแทรกอะไร ก. ไฟล์เสียง ข. ไฟล์ภาพน่งิ ค. ไฟลภ์ าพเคลอื่ นไหว ง. ไฟลว์ ดี ีโอ

151 7. เลือกเมนู Insert/Media/FLV เปน็ ขัน้ ตอนเพอ่ื แทรกอะไร ก. ไฟล์เสียง ข. ไฟล์ภาพนิ่ง ค. ไฟล์ภาพเคลือ่ นไหว ง. ไฟลว์ ีดโี อ 8. ข้อใดไมใ่ ช่ รปู แบบการเปดิ หนา้ ลงิ ก์หรือ Target บนพาเนล Properties จากที่มี 5แบบ ก. _top ข. _bottom ค. _blank ง. _new 9. หากตอ้ งการให้การเปดิ ลงิ กอ์ ื่นๆใหอ้ ยใู่ นเฟรมหลักตอ้ งเลือกจากพาเนล Properties ขอ้ ใด ก. _top ข. _parrent ค. _blank ง. _new 10. เม่ือเลือก Link (CSS) จากป่มุ Page Properties บนพาเนล Properties เป็นการเลือกเพือ่ อะไร ก. จดั การสใี นข้อความลิงก์ ข. ปรับปรุงเฟรม ค. เลือกรูปแบบการเปดิ ลงิ กช์ นิดเฟรม ง. จดั การสีของเฟรม

152 บันทึกหลังการสอน ข้อสรปุ หลังการสอน .................................................................................................................. .............................. .................................................................................................................. .............................. ......................................................................................... ....................................................... .................................................................................................................. .............................. ................................................................................................................................................ ................................................................................................................... ............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................. .............................................. ปญั หาที่พบ ............................................................................................................................. ................... ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ................................................................................................ ................................................ ............................................................................................................................. ................... ................................................................................................................................................ .................................................................................................................. .............................. แนวทางแกป้ ญั หา .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .......................................................................................... ...................................................... .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ................................................................................................................. ...............................

153 แผนการจดั การเรยี นรูแ้ บบบรู ณาการที่ 14 หน่วยท่ี 8 รหัส 2204-2009 การสรา้ งเว็บไซต์ (2-2-3) สอนครัง้ ท่ี 14 (53- ช่ือหน่วย/เร่อื ง การจดั เลยเ์ อาท์ 56) จานวน 4 ช.ม. สาระสาคญั การออกแบบเว็บไซตน์ ั้น หากมคี วามเข้าใจในการจดั เลยเ์ อาท์ จะทาใหร้ ู้และเข้าใจการเลือกวา่ จะ ใชก้ ารจดั ดว้ ยเฟรม หรอื ตาราง หรืออาจเป็นทัง้ สองอย่าง เพือ่ ช่วยให้เวบ็ ไซตน์ ้นั มลี ักษณะเปน็ ไปตาม วตั ถปุ ระสงค์ของการสรา้ งเวบ็ ไซตไ์ ดง้ า่ ยข้นึ ไม่สบั สนสะดวกในการนาเอาแตล่ ะเว็บเพจมาเชื่อมโยงกนั เป็นอย่างดี จุดประสงค์การเรียนรู้ 1. มีความรูค้ วามเขา้ ใจในการจดั เลย์เอาท์ดว้ ยเฟรม 2. บอกประโยชนข์ องการใช้เฟรม 3. สามารถสรา้ งเฟรมและบันทึกเฟรมได้ 4. มกี ารพฒั นาคณุ ธรรม จรยิ ธรรม ค่านิยม และคุณลักษณะอนั พึงประสงค์ของผูส้ าเรจ็ การศึกษา สานกั งานคณะกรรมการการอาชวี ศึกษา ทคี่ รูสามารถสังเกตได้ขณะทาการสอนในเรื่อง 4.1 ความมมี นุษยสัมพันธ์ 4.2 ความมวี ินัย 4.3 ความรับผิดชอบ 4.4 ความซ่ือสัตย์สุจรติ 4.5 ความเชื่อมัน่ ในตนเอง 4.6 การประหยัด 4.7 ความสนใจใฝร่ ู้ 4.8 การละเว้นสิ่งเสพติดและการพนัน 4.9 ความรกั สามคั คี 4.10 ความกตัญญูกตเวที สมรรถนะรายวิชา 1. แสดงความรเู้ กี่ยวกับกระบวนการ โครงสร้างการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเวบ็ ไซต์ 2. ประยุกต์ใชโ้ ปรแกรมภาษาหรอื โปรแกรมสาเร็จรูปสาหรับสรา้ งเว็บไซต์ และการตดิ ตงั้ และอัพโหลด (Upload) เวบ็ ไซต์

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

155 5.ครูใช้เทคนคิ วิธีการจัดการเรยี นรู้แบบอภปิ ราย (Discussion Method) โดยใหผ้ ู้เรียนอภปิ ราย เรื่องประโยชนข์ องการใชเ้ ฟรม ซง่ึ เป็นการแบง่ เว็บเพจออกเปน็ ส่วนๆ มีประโยชน์หลกั คือแบ่งเปน็ ส่วน ตามการใชง้ าน เช่น แบง่ เปน็ สามส่วน ได้แก่ บน ซา้ ย และ กลาง โดยส่วนบนใชแ้ สดงโลโก้ของเว็บไซต์ ทางซา้ ยเปน็ การ เช่อื มโยงไปยังหนา้ ตา่ งๆ สว่ นกลางใช้ในการแสดงเนอื้ หาหลักเป็นต้น ดงั ตัวอย่าง 6.ครูใช้เทคนคิ วธิ สี อนแบบสาธติ (Demonstration Method) สาธติ การสร้างเฟรมและการ บันทึกเฟรมและใหผ้ เู้ รียนปฏิบัตติ ามทีละข้นั ตอนดังน้ี - การสรา้ งเฟรม สามารถสรา้ งได้ดว้ ยขน้ั ตอนดงั นี้ 1). ไปที่เมนู Insert > HTML > Frames โดยจะมเี ฟรมหลายรปู แบบให้เลอื ก โดยแบบที่ นยิ มใช้ในเวบ็ ทัว่ ไปคือเฟรมแบบ Top Nested Left 2). ใหต้ ้งั ช่อื แตล่ ะสว่ นของเฟรม โดยมสี ว่ นประกอบดังน้ี

156 mainFrame คือ สว่ นท่แี สดงเน้อื หาหลัก topFrame คอื เฟรมสว่ นบนของเว็บเพจ leftFrame คอื เฟรมทางดา้ นซา้ ยของเว็บเพจ เมอื่ ตั้งชื่อเสรจ็ แล้ว ให้คลกิ OK 3). จะได้เฟรมแบบที่เลือกไว้ (ในตัวอยา่ งเปน็ แบบ Top Nested Left) สาหรับพรอ้ มให้นา เนื้อหาใสล่ งไปไดท้ ันที -การบนั ทึกเฟรม เมอ่ื สรา้ งเฟรมเสรจ็ แลว้ จะตอ้ งทาการบันทึกเพื่อนาไปใชห้ รือนากลบั มา แกไ้ ข โดยมขี ั้นตอนดังน้ี 1). เลอื กเฟรมทต่ี ้องการบันทึก จะปรากฏชอื่ เฟรมเสมือนว่าเปน็ ชือ่ ไฟลเ์ ว็บเพจไฟล์หนึ่ง 2). ไปทีเ่ มนู File > Save Frame As… เพื่อบันทึกเฟรม โดยใหท้ าซ้าจนครบทกุ เฟรม 7.ครใู ช้สอื่ Power Point เพื่ออธบิ ายข้นั ตอนการจดั การกับเฟรม ประกอบกบั การใช้เทคนคิ วธิ ี สอนแบบสาธติ (Demonstration Method) สาธติ และให้ผเู้ รยี นปฏบิ ตั ิตามทลี ะขน้ั ตอนดังน้ี การจัดการกบั เฟรมทีส่ ร้างนนั้ สามารถทาได้ด้วยการคลิกเลือกที่ขอบของเฟรม จากนั้นจะ ปรากฏ

157 tag <frameset> บนพาเนล Properties ที่สามารถต้ังคา่ ต่างๆ ได้ และนอกจากพาเนล Properties นน้ั สามารถจัดการกบั เฟรมในรูปแบบอ่ืนๆ ไดด้ งั น้ี 1) การปรับขนาดเฟรม การปรบั ขนาดของเฟรมน้นั สามารถทาไดด้ ว้ ยการคลกิ เมาส์ท่ขี อบของเฟรม และลาก ซา้ ย-ขวา ขน้ึ -ลง เพอื่ ปรบั ขนาดไดท้ นั ที 2) การลบเฟรม การลบเฟรมท่ไี ม่ต้องการแล้วนัน้ สามารถทาได้ด้วยการคลิกเมาสแ์ ล้วลากไปไวท้ ่ีขอบของ หน้าจอ โปรแกรม โดยเฟรมนั้นๆ จะถกู ลบโดยอัตโนมตั ิ เมอ่ื ลบแล้วหน้าจอจะปรากฏดังรปู

158 8.ครูเนน้ ปฏิบัตกิ ารงานดว้ ยความระมัดระวัง และให้สามารถนาไปใช้ไดจ้ รงิ เพ่ือสรา้ งภูมิค้มุ กัน ในตวั เอง และเสนอแนะการนาความรไู้ ปประกอบอาชพี เพ่ือสรา้ งรายได้ใหแ้ ก่ตนเองและครอบครัวต่อไป ขั้นสรปุ และการประยุกต์ 9.ครแู ละผเู้ รียนสรุปเนื้อหาท่ีเรยี น 10.ครปู ระเมินผเู้ รยี นตามแบบฟอร์มตอ่ ไปนี้ ช่อื ผเู้ รยี น ประสบการณ์พืน้ ฐานการเรยี นรู้ วิธีการเรียนรู้ ความรู้ ทกั ษะ ผลงาน 1. 2. 3. 4. 5. สื่อและแหล่งการเรยี นรู้ 1.หนงั สือเรียน วิชาการสร้างเวบ็ ไซต์ ของสานกั พมิ พเ์ อมพันธ์ 2.รปู ภาพ 3.กิจกรรมการเรียนการสอน 4.แผน่ ใส 5.สอื่ PowerPoint 6.แบบประเมนิ ผู้เรียน หลกั ฐาน 1.บนั ทกึ การสอน 2.ใบเชค็ รายชื่อ 3.แผนจัดการเรียนรู้ 4.การตรวจประเมนิ ผลงาน

159 การวดั ผลและการประเมนิ ผล วิธีวัดผล 1. สงั เกตพฤติกรรมรายบคุ คล 2. ประเมินพฤติกรรมการเขา้ ร่วมกิจกรรมกลมุ่ 3. สังเกตพฤติกรรมการเข้ารว่ มกิจกรรมกลมุ่ 4. ตรวจใบงาน 5. ตรวจแบบประเมนิ ผลการเรียนรู้ 6. การสังเกตและประเมินพฤติกรรมด้านคุณธรรม จรยิ ธรรม ค่านยิ ม และคุณลักษณะอันพึง ประสงค์ เคร่ืองมอื วัดผล 1. แบบสงั เกตพฤติกรรมรายบุคคล 2. แบบประเมนิ พฤติกรรมการเข้าร่วมกจิ กรรมกล่มุ (โดยครู) 3. แบบสงั เกตพฤติกรรมการเขา้ ร่วมกิจกรรมกลุ่ม (โดยผู้เรยี น) 4. แบบประเมินกิจกรรมใบงาน 5. แบบประเมนิ ผลการเรยี นรู้ และแบบฝกึ ปฏิบัติ 6. แบบประเมินคุณธรรม จรยิ ธรรม ค่านยิ ม และคุณลักษณะอันพงึ ประสงค์ โดยครูและ ผ้เู รียนรว่ มกันประเมิน เกณฑ์การประเมินผล 1. เกณฑผ์ ่านการสงั เกตพฤตกิ รรมรายบคุ คล ต้องไมม่ ชี อ่ งปรบั ปรุง 2. เกณฑผ์ า่ นการประเมนิ พฤติกรรมการเข้ารว่ มกิจกรรมกลมุ่ คือ ปานกลาง (50 % ข้นึ ไป) 3. เกณฑผ์ า่ นการสงั เกตพฤตกิ รรมการเข้าร่วมกจิ กรรมกลุ่ม คือ ปานกลาง (50% ข้ึน ไป) 4. กิจกรรมใบงาน เกณฑ์ผ่าน คือ 50% 5. แบบประเมินผลการเรียนรู้ และแบบฝึกปฏบิ ัติมเี กณฑผ์ า่ น 50% 6. แบบประเมินคุณธรรม จริยธรรม คา่ นิยม และคุณลักษณะอันพึงประสงค์ คะแนน ขึ้นอยู่กับการประเมินตามสภาพจริง กจิ กรรมเสนอแนะ 1.ทาแบบใบงาน แบบฝกึ ปฏิบัติเพือ่ ให้เกิดความชานาญและปฏบิ ตั ิไดจ้ รงิ 2.อา่ นและทบทวนเนอื้ หา

160 บันทึกหลังการสอน ข้อสรปุ หลงั การสอน ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ......................................................................................... ....................................................... .................................................................................................................. .............................. ................................................................................................................................................ ปญั หาที่พบ .................................................................................................................. .............................. .................................................................................................................................... ............ .................................................................................................................. .............................. .................................................................................................................. .............................. ....................................................................................... ......................................................... .................................................................................................................. .............................. ............................................................................................................................................... .................................................................................................................. .............................. ............................................................................................................................... ................. .................................................................................................................. .............................. แนวทางแกป้ ญั หา .................................................................................................................. .............................. .................................................................................. .............................................................. .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ........................................................................................... ..................................................... .................................................................................................................. ..............................

161 แผนการจัดการเรียนรู้แบบบรู ณาการท่ี 15 หน่วยที่ 8 รหสั 2204-2009 การสรา้ งเว็บไซต์ (2-2-3) สอนครั้งที่ 15 (57- ชอ่ื หน่วย/เรือ่ ง การจดั เลยเ์ อาท์ 60) จานวน 4 ช.ม. สาระสาคญั การออกแบบเวบ็ ไซตน์ ั้น หากมีความเข้าใจในการจดั เลย์เอาท์ จะทาใหร้ ู้และเข้าใจการเลือกว่าจะ ใชก้ ารจดั ดว้ ยเฟรม หรอื ตาราง หรืออาจเปน็ ท้ังสองอย่าง เพื่อชว่ ยให้เวบ็ ไซต์นน้ั มีลักษณะเป็นไปตาม วัตถุประสงค์ของการสร้างเว็บไซตไ์ ดง้ า่ ยขึน้ ไมส่ บั สนสะดวกในการนาเอาแต่ละเว็บเพจมาเชอื่ มโยงกนั เปน็ อยา่ งดี จดุ ประสงคก์ ารเรยี นรู้ 4. มคี วามร้คู วามเขา้ ใจในเร่ืองการจัดเลยเ์ อาท์ด้วยตาราง 5. รวู้ ิธีจดั การกับเฟรมได้ 6. บอกประโยชน์ของการใช้ตารางได้ 7. บอกรปู แบบและประเภทของตารางได้ 8. สามารถปรับแตง่ ตารางที่สรา้ งได้ 9. แทรกตารางลงในเวบ็ เพจได้ 10. แก้ไขตารางบนพาเนล Properties ได้ 11. ตกแต่งตารางได้ 12. มกี ารพฒั นาคณุ ธรรม จริยธรรม คา่ นิยม และคุณลักษณะอันพงึ ประสงค์ของผสู้ าเร็จการศึกษา สานักงานคณะกรรมการการอาชีวศึกษา ที่ครูสามารถสงั เกตได้ขณะทาการสอนในเรื่อง 12.1 ความมมี นุษยสมั พนั ธ์ 12.8 การละเว้นสงิ่ เสพตดิ และการพนัน 12.2 ความมีวินัย 12.9 ความรักสามัคคี 12.3 ความรบั ผดิ ชอบ 12.10 ความกตญั ญูกตเวที 12.4 ความซอ่ื สัตยส์ ุจริต 12.5 ความเชื่อม่ันในตนเอง 12.6 การประหยดั 12.7 ความสนใจใฝ่รู้ สมรรถนะรายวิชา 1. แสดงความรเู้ ก่ียวกับกระบวนการ โครงสรา้ งการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเวบ็ ไซต์ 2. ประยกุ ต์ใช้โปรแกรมภาษาหรือโปรแกรมสาเร็จรปู สาหรับสร้างเวบ็ ไซต์ และการตดิ ตงั้ และอัพโหลด (Upload) เวบ็ ไซต์

162 เนื้อหาสาระ 5. การจดั เลย์เอาท์ด้วยตาราง กิจกรรมการเรียนรู้ ขน้ั นาเข้าสู่บทเรียน 1.ครูใช้เทคนิคการสอนแบบซิปปาโมเดล (CIPPA MODEL) โดยการทบทวนความรู้เดิมจาก สัปดาห์ท่ีผ่านมา โดยดึงความรู้เดิมของผู้เรียนในเร่ืองที่จะเรียน เพื่อช่วยให้ผู้เรียนมีความพร้อมในการ เช่ือมโยงความรู้ใหมก่ ับความรูเ้ ดมิ ของตน ผสู้ อนใชก้ ารสนทนาซักถามใหผ้ เู้ รยี นเลา่ ประสบการณเ์ ดิม 2. ครูกลา่ ววา่ การจดั เลย์เอาท์ดว้ ยตาราง เปน็ วธิ ีการจัดรปู แบบเน้อื หาภายในเวบ็ เพจให้เป็น ระเบยี บ ไม่วา่ จะเป็นการจดั ชิดซ้าย-ขวา นอกจากน้ันยังสามารถทาใหเ้ วบ็ เพจน่าสนใจข้ึนไดโ้ ดยการใส่สี พื้น หรือใสเ่ สน้ ขอบหรอื ตกแต่งแบบอื่นๆ ใหม้ ีความสวยงามได้ 3. ครแู สดงตัวอยา่ งการออกแบบเวบ็ เพจแบบใชต้ าราง เพื่อเชื่อมโยงเขา้ สเู่ น้ือหา ขั้นสอน 4. ครใู ชเ้ ทคนคิ วธิ ีสอนแบบบรรยาย (Lecture Method) บอกประโยชน์ของการออกแบบ เว็บไซต์โดยใช้ตารางเปน็ ส่วนประกอบ ซง่ึ มดี ังน้ี 1). ทาใหป้ ระหยัดพน้ื ท่ี 2). ทาให้เวบ็ เพจมีความสวยงาม 5. ครูใชส้ ่อื Power Point ประกอบการอธิบายเรื่องรูปแบบและประเภทของตารางซ่ึงสามารถ กาหนดคุณลักษณะได้ 3 แบบดังน้ี 1) แบบกาหนดขนาดตายตัว ตารางแบบกาหนดตายตัว เหมาะกับการออกแบบเวบ็ เพจที่ ต้องการแสดงเนื้อหาให้มีตาแหนง่ ตามท่ีกาหนดไว้ ไมเ่ คลื่อนท่ีหรือเปลีย่ นตาแหนง่ เม่ือแสดงผลบนเบรา เซอร์ตา่ งๆ หรอื เมื่อยืด-ขยายหนา้ จอโดยการสรา้ งตารางชนดิ นี้จะตอ้ งกาหนดคา่ โดยมีหน่วยเปน็ พิกเซล (px)

163 2) แบบขยายขนาดอสิ ระ ตารางแบบขยายขนาดอสิ ระ เหมาะกับการออกแบบเว็บเพจที่มี ข้อความมากๆ และยดื หยุ่นกับตาแหนง่ และเลย์เอาท์ของเนื้อหาได้ โดยตารางจะสามารถยืดหรือย่อไดต้ าม ขนาดของเบราเซอร์ โดยทาใหเ้ นื้อหามตี าแหนง่ ไมต่ รงท่ีนัก โดยการสรา้ งตารางชนิดน้ีต้องกาหนดค่าโดยมี หน่วยเปน็ เปอร์เซนต์ (%) 3) แบบตารางซ้อนตาราง ตารางแบบซ้อนตารางเปน็ เทคนิคหนง่ึ ทใี่ ชใ้ นการจัดเลยเ์ อาท์ของ เว็บเพจ เนื่องจากสามารถแยกและจัดระเบียบให้เน้ือหาแต่ละส่วนไดอ้ ย่างอิสระ รวมถึงสามารถตกแตง่ รปู แบบให้สวยงามได้อีกด้วย โดยจะใชข้ อ้ ดีของตารางแบบกาหนดขนาดตายตัวกบั แบบขยายขนาดอิสระ มาใช้รว่ มกนั ได้ 6. ครใู ชเ้ ทคนิควิธสี อนแบบสาธิต (Demonstration Method) สาธิตเร่อื งการแทรกตารางลง ในเวบ็ เพจ การแก้ไขตารางบนพาเนล Properties การเพิ่ม-ลบแถวและคอลมั น์ การจดั ตาแหน่งตาราง การจัดระเบยี บเนื้อหาในตารางแนวตัง้ -แนวนอน และการตกแตง่ ตาราง ซ่งึ มีขั้นตอนการปฏบิ ตั ดิ ังตอ่ ไปนี้ - การแทรกตารางลงในเวบ็ เพจ มขี ้นั ตอนต่างๆ ดงั น้ี 1). คลิกพาเนล Insert แลว้ เลอื ก Common จากนัน้ เลอื กเครอ่ื งมือ Table 2). กาหนดค่าต่างๆ ดังน้ี จากนั้นคลิก OK

164 - การแก้ไขตารางบนพาเนล Properties หลังจากท่แี ทรกตารางลงในเวบ็ เพจแล้ว สามารถปรับแต่งตารางได้ โดยทคี่ า่ การ ปรบั แตง่ สามารถทาได้บนพาเนล Properties โดยทาการเลือกที่ Tag <table> การแก้ไขตารางสามารถทาได้ทัง้ ปรบั แตง่ โดยรวมทั้งตาราง หรอื ปรบั เฉพาะช่องหรือ เซลล์ (cell) ทง้ั ในแบบคอลัมน์ (Column) หรือแถวแนวต้งั และแถว (Rows) หรือแถวแนวนอน โดยมี รูปแบบการปรับแต่งตา่ งๆ ดงั นี้  การปรับแต่งความกว้างของตาราง สามารถทาได้ด้วยขัน้ ตอนดังนี้ 1). เมือ่ คลิกทตี่ าราง จะพบขนาดท่กี าหนด และขนาดจริงทใี่ สเ่ นอื้ หาไปแล้ว (ตัวเลขในวงเล็บ) เชน่ 273(303) เปน็ ตน้ 2). กาหนดขนาดความกวา้ งตาราง (W) บนพาเนล Properties ใน tag <table> ให้มขี นาดใหญ่กวา่ ขนาดในตัวเลขดงั กลา่ ว จากน้ันกด Enter

165 3). จะได้ขนาดตารางใหม่ โดยทไี่ ม่มตี ัวเลขในวงเล็บ  การกาหนดความสงู ของแถว สามารถทาได้ดว้ ยขน้ั ตอนดังนี้ 1). คลกิ เลือก Tag <tr> เพอื่ เลอื กแถวในตาราง 2). กรอกค่าลงในช่อง H จากนน้ั คลิกที่ Enter

166 3). แถวทีเ่ ลือกจะมีความสงู ตามท่กี าหนดทนั ที หรืออีกวิธหี นึ่ง คอื การใช้เมาส์คลิกและลากบริเวณเส้นขอบของแตล่ ะแถวเพื่อปรบั ความสงู และกวา้ งได้ ทันที  การแยกเซลล์ ในกรณที ี่ต้องการแยกเซลล์ให้มแี ถวหรือคอลมั น์ใหม่ออกมา สามารถทาไดด้ ว้ ยขน้ั ตอนดังนี้ 1). คลิกเลือกภายในเซลลท์ ีต่ ้องการ แล้วกดปุ่ม (Splits cell into rows or columns) บนพาเนล Properties (CSS)

167 2). คลกิ เลอื ก Rows หรือ Columns แลว้ กาหนดจานวนแถวทต่ี อ้ งการก่อนคลิก OK 3). ได้แถวใหม่ตามคา่ ที่กาหนดในเซลลท์ ี่เลอื ก  การรวมเซลล์ ในกรณที ี่ตอ้ งการรวมเซลล์ของแถวหรอื คอลมั นใ์ หเ้ ป็นเซลลเ์ ดียว สามารถทาได้ดว้ ยขน้ั ตอนดงั นี้ 1). ลากเมาสค์ ลุมเซลลท์ ่ตี ้องการรวม

168 2. คลิกทปี่ มุ่ (Merges selected cells using spans) จะไดเ้ ซลล์ ทถ่ี ูกนามารวมกันเป็น 1 เซลล์ - การเพม่ิ -ลบแถวและคอลัมน์ มีหัวข้อตา่ งๆ ดงั นี้  การเพิ่มแถว/คอลมั น์ใหม่ สามารถทาได้ด้วยขั้นตอนดงั นี้ 1). คลกิ ขวาที่บริเวณทีต่ อ้ งการเพ่มิ แถวหรือคอลมั น์ แลว้ เลอื กคาสง่ั Table > Insert Rows or Columns 2). เลือกกาหนดค่าดังนี้

169 3). ได้คอลมั นห์ รอื แถวใหม่ ตามจานวนและบนบริเวณท่ีเลอื กไวท้ ันที  การลบแถว/คอลัมน์ออกจากตาราง สามารถทาไดด้ ้วยข้นั ตอนดังน้ี 1). คลกิ ขวาในเซลล์ที่ตอ้ งการลบแถวหรอื คอลมั น์ออก แลว้ เลือกคาส่ัง Table > Delete Row หรอื Delete Column ตามที่ต้องการ 2). แถวหรือคอลมั นท่ีเลือกไวถ้ ูกลบไปในทันที

170 - การจดั ตาแหนง่ ตาราง มีข้ันตอนดังน้ี 1). คลิกเลือก Tag <table> เพอื่ เลือกทางานกับตาราง จากน้ันเลือกตาแหน่งของ ตารางทคี่ าสง่ั Align บนพาเนล Properties 2). ตารางจะถูกยา้ ยตาแหน่งมาที่จุดใหม่ทนั ที - การจดั ระเบยี บเนอ้ื หาในตารางแนวตง้ั -แนวนอน โดยสามารถแก้ไขไดด้ ้วยการจัด ระเบยี บทั้งแนวตั้งและแนวนอนด้วยขัน้ ตอนดงั น้ี 1). ลากเมาสค์ ลุมข้อความทั้งหมดท่ตี ้องการจัดระเบียบ (สังเกตได้ว่าขอ้ ความจัด ตาแหนง่ ไวไ้ มเ่ ท่ากนั )

171 2). เลือกตง้ั ค่าด้วยคาส่ัง Horz และ Vert บนพาเนล Properties ดังนี้ (Default คอื คา่ ด้ังเดมิ ) - การตกแตง่ ตาราง สาหรบั การตกแต่งตารางมรี ูปแบบการตกแต่งตารางตา่ งๆ ตาม หวั ขอ้ ดังต่อไปน้ี  การใสส่ พี ื้นหลัง มีขั้นตอนดังน้ี 1). เลอื กแถว หรอื เลอื กเซลล์ทีต่ ้องการใส่สีพ้ืน

172 2). คลกิ เลือกสที ีต่ ้องการ แถวหรอื เซลลท์ เ่ี ลือกจะเปล่ยี นเป็นสีใหม่ทันที  การใส่ภาพเป็นฉากหลัง สามารถทาไดด้ ว้ ยข้นั ตอนดังน้ี 1). คลกิ เลือก Tag <table> บนพาเนล Properties เพื่อเลอื กทางานกบั ตาราง 2). ไปท่ีเมนู Modify > Edit Tag

173 3). คลิกเลอื ก Browser Specifi c และคลกิ ปุ่ม Browse… แล้วเลอื กไฟล์ภาพท่ี ต้องการ 4). ภาพทเี่ ตรียมไว้จะถูกนามาเป็นฉากหลงั ทนั ที  การใสเ่ ส้นขอบตาราง มีขั้นตอนดังนี้ 1). เลือก Tag <table> บนพาเนล Properties เพอื่ เลอื กทางานกบั ตาราง

174 2). ระบคุ วามหนาของเส้นขอบตารางท่ีต้องการ ดว้ ยคาส่งั Border จากนน้ั กดปุม่ Enter เมื่อกดแล้วเส้นขอบของตารางจะหน้าข้นึ มาตามคา่ ท่ีกาหนดทนั ที  การเปล่ยี นสเี สน้ ขอบตาราง มีขน้ั ตอนดังนี้ 1). คลิกเลอื ก Tag <table> เพือ่ เลือกทางานกับตาราง 2). ไปที่เมนู Modify > Edit Tag 2.1 คลิกเลือก Browser Specifi c 2.2 เลอื กสีเสน้ ขอบ Border ตามท่ตี ้องการ 2.3 คลิก OK

175 3). ได้ตารางท่ีเส้นขอบมสี สี นั ตามทต่ี ้องการ 7.ผู้เรียนสรา้ งเว็บไซต์ตามโครงสร้างดงั น้ี โครงสรา้ งที่ 1 หนา้ home.html 1). กาหนดใหแ้ สดงชื่อเวบ็ ไซต์ และรปู ภาพดอกไม้ท่ีนักเรียนชอบจานวน ๓ ชนดิ 2). สร้างการเชื่อมโยงไปยงั หนา้ ตา่ งๆ ใหถ้ กู ต้อง 3). กาหนดใหใ้ ช้ตารางจดั เลย์เอาทแ์ ละตกแตง่ เวบ็ เพจใหส้ วยงาม หนา้ f1.html, f2.html, f3.html 1). กาหนดให้แสดงช่ือ รปู ภาพและข้อมูลของดอกไมห้ นา้ ละ ๑ ชนิด 2). สรา้ งการเชื่อมโยงให้ทกุ ๆ หนา้ เชอ่ื มโยงไปหน้าตา่ งๆ ไดค้ รบถ้วน 3). กาหนดใหใ้ ชต้ ารางจัดเลยเ์ อาทแ์ ละตกแต่งเวบ็ เพจใหส้ วยงาม

176 โครงสรา้ งท่ี 2 หนา้ index.html 1). กาหนดให้แสดงชื่อเวบ็ ไซตแ์ ละรูปภาพอาหารทน่ี ักเรียนชน่ื ชอบ จานวน ๔ อยา่ ง 2). สรา้ งการเช่ือมโยงไปยงั หน้าต่างๆ ให้ถกู ตอ้ ง 3). กาหนดให้ใช้ตารางจดั เลย์เอาทแ์ ละตกแต่งเวบ็ เพจใหส้ วยงาม หนา้ food1.html, food2.html, food3.html, food4.html 1). กาหนดให้แสดงช่ือ รปู ภาพและวธิ ีการทาอาหารหน้าละ ๑ อยา่ ง 2). สร้างการเชื่อมโยงให้ทุกๆ หน้า เช่ือมโยงไปหนา้ ตา่ งๆ ได้ครบถ้วน 3). กาหนดใหใ้ ช้ตารางจดั เลยเ์ อาท์และตกแตง่ เว็บเพจให้สวยงาม 8.ครแู นะนาให้ผู้เรียนรูจ้ ักการนาเอาความพอเพียงไปใชใ้ หเ้ กดิ ประโยชน์ ซ่งึ เป็นความพอประมาณ ความมีเหตุผล รวมถึงความจาเปน็ ที่ต้องมีระบบภมู ิคมุ้ กันในตัวทีด่ พี อสมควรตอ่ ผลกระทบใดๆ อันเกดิ จากการเปลยี่ นแปลงทัง้ ภายนอกและภายใน การตัดสินใจและการดาเนินกจิ กรรมต่างๆให้อยู่ในระดับ พอเพยี งน้นั ต้องอาศยั ท้ังความรู้และคุณธรรมเป็นพนื้ ฐาน ข้ันสรุปและการประยุกต์ 9.ครสู รุปบทเรียน โดยใช้ VDO และ PowerPoint และอภปิ รายซักถามข้อสงสยั และให้ผูเ้ รียนฝึก ปฏบิ ตั ิในบางเร่ือง 10.ผเู้ รยี นทาแบบประเมินผลการเรยี นรู้ และแบบฝึกปฏิบัติ

177 ส่อื และแหล่งการเรยี นรู้ 1.หนงั สือเรยี น วชิ าการสร้างเวบ็ ไซต์ ของสานักพิมพ์เอมพันธ์ 2.รูปภาพ 3.กจิ กรรมการเรียนการสอน 4.แผน่ ใส 5.ส่ืออเิ ลก็ ทรอนิกส์ , VDO และสื่อ PowerPoint หลกั ฐาน 1.บันทึกการสอน 2.ใบเชค็ รายชื่อ 3.แผนจัดการเรยี นรู้ 4.การตรวจประเมินผลงาน การวัดผลและการประเมนิ ผล วธิ ีวัดผล 1. สงั เกตพฤตกิ รรมรายบุคคล 2. ประเมินพฤติกรรมการเข้าร่วมกิจกรรมกล่มุ 3. สงั เกตพฤติกรรมการเข้าร่วมกิจกรรมกลมุ่ 4 ตรวจกจิ กรรมสง่ เสรมิ คุณธรรมนาความรู้ 5. ตรวจใบงาน 6. ตรวจแบบประเมินผลการเรยี นรู้ และแบบฝึกปฏบิ ัติ 7. การสังเกตและประเมนิ พฤติกรรมด้านคุณธรรม จริยธรรม คา่ นยิ ม และคุณลักษณะอนั พงึ ประสงค์ เคร่อื งมือวัดผล 1. แบบสังเกตพฤติกรรมรายบคุ คล 2. แบบประเมนิ พฤตกิ รรมการเข้ารว่ มกจิ กรรมกลมุ่ (โดยครู) 3. แบบสงั เกตพฤติกรรมการเขา้ รว่ มกิจกรรมกลุ่ม (โดยผู้เรียน) 4. แบบประเมนิ กิจกรรมสง่ เสรมิ คุณธรรมนาความรู้ 5. แบบประเมินกิจกรรมใบงาน 6. แบบประเมนิ ผลการเรียนรู้ และแบบฝกึ ปฏิบัติ 7. แบบประเมินคุณธรรม จริยธรรม คา่ นิยม และคุณลักษณะอันพงึ ประสงค์ โดยครแู ละ ผู้เรยี นร่วมกนั ประเมิน

178 เกณฑก์ ารประเมินผล 1. เกณฑผ์ า่ นการสงั เกตพฤติกรรมรายบุคคล ต้องไม่มีชอ่ งปรบั ปรุง 2. เกณฑผ์ า่ นการประเมินพฤติกรรมการเข้าร่วมกิจกรรมกลุ่ม คือ ปานกลาง (50 % ข้ึนไป) 3. เกณฑ์ผา่ นการสงั เกตพฤตกิ รรมการเขา้ ร่วมกิจกรรมกล่มุ คือ ปานกลาง (50% ข้ึน ไป) 4. ตอบคาถามในกิจกรรมสง่ เสริมคณุ ธรรมนาความรู้จงึ จะถอื วา่ ผา่ น เกณฑ์การประเมิน มีเกณฑ์ 4 ระดับ คอื 4= ดีมาก, 3 = ด,ี 2 = พอใช้ , 1= ควร ปรบั ปรงุ 5. กจิ กรรมใบงาน เกณฑผ์ า่ น คือ 50% 6. แบบประเมินผลการเรียน และแบบฝกึ ปฏบิ ัติรู้มเี กณฑ์ผ่าน 50% 7 แบบประเมินคุณธรรม จริยธรรม ค่านยิ ม และคุณลักษณะอันพงึ ประสงค์ คะแนน ขนึ้ อยกู่ ับการประเมินตามสภาพจรงิ กจิ กรรมเสนอแนะ 1.ทากิจกรรมใบงาน และแบบฝกึ ปฏบิ ตั ิ 2.อ่านและทบทวนเนอื้ หา

179 จงเลือกคาตอบท่ีถูกต้องที่สดุ เพยี งข้อเดียว 1. ข้อใดไม่ใชร่ ูปแบบเฟรมทเ่ี ลือกใช้จากเมนู Insert > HTML > Frames ในโปรแกรม Adobe Dreamweaver ก. Middle Frame ข. Left ค. Top ง. Right 2. โลโก้ของเวบ็ ไซต์นยิ มไว้ ตรงสว่ นใดของเฟรม ก. ซา้ ย ข. บน ค. กลาง ง. สว่ นใดก็ได้ 3. ขอ้ ใดเป็นรูปแบบเฟรมทนี่ ิยมใช้ทสี่ ดุ ก. Top ข. Bottom Nested Left ค. Top Nested Left ง. Top Nested Right 4. ขอ้ ใดคือประโยชน์ของการจัดเลย์เอาทด์ ว้ ยตาราง ก. สะดดุ ตา ข. สะดวก ค. ประหยัดพ้นื ที่ ง. แสดงผลเรว็ 5. ขอ้ ใดไม่ใชค่ ุณลกั ษณะทั้ง 3 แบบของการจดั เลย์เอาทด์ ้วยตาราง ก. แบบตารางซ้อนตาราง ข. แบบกาหนดขนาดตายตวั ค. แบบขยายขนาดอสิ ระ ง. แบบตารางไขว้ 6. พาเนล Insert, Common, Table เปน็ การแทรกอะไร ก. แทรกภาพ ข. แทรกตาราง ค. แทรกเสียง ง. แทรกเฟรม

180 7. ขอ้ ใดคือการกาหนดความกว้างของตารางสามารถทาได้จากข้อใด ก. พาเนล Properties ข. Insert, Table ค. Insert, Frame ง. Table Adjust 8. การจดั ตาแหนง่ ของตารางสามารถทาไดจ้ ากขอ้ ใด ก. พาเนล Properties ข. Insert, Table ค. Insert, Frame ง. Table Adjust 9. การรวมเซลส์มปี ระโยชนอ์ ยา่ งไร ก. แก้ไขง่าย ข. ข้อมลู สวยงามเปน็ หมวดหมู่ ค. ใช้ลิงก์ง่าย ง. ป้อนขอ้ มลู และแก้ไขงา่ ย 10. ขอ้ ใดไมใ่ ช่คาสง่ั ปรับตาราง ในหัวขอ้ Align บนพาเนล Properties ก. Right คอื การจัดตารางชิดขวา ข. Center คือ การจัดตารางไว้ก่งึ กลาง ค. Left คือ การจัดตารางชดิ ซา้ ย ง. Top คอื การจดั ตารางชดิ บนสุด

181 บันทึกหลังการสอน ข้อสรปุ หลังการสอน ................................................................................................................................................ .................................................................................................................. .............................. ..................................................................................................................................... ........... .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ............................................................................................................................................... ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ ปัญหาที่พบ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. แนวทางแกป้ ญั หา .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ...................................................................................... ..........................................................

182 แผนการจดั การเรยี นรแู้ บบบรู ณาการท่ี 16 หน่วยที่ 9 รหัส 2204-2009 การสร้างเว็บไซต์ (2-2-3) สอนครง้ั ที่ 16 (61- ช่อื หน่วย/เรือ่ ง การทดสอบการทางานของเว็บไซต์ 64) จานวน 4 ช.ม. สาระสาคญั เม่อื สร้างเวบ็ ไซตต์ ามข้นั ตอน กระบวนการทีไ่ ด้ออกแบบเว็บไซต์นัน้ การทดสอบการทางานของ เว็บไซต์ เป็นอีกขัน้ ตอนที่จะตรวจสอบว่าเวบ็ ไซต์นั้นมกี ารเชื่อมโยงอยา่ งถกู ต้องหรือไม่ ก่อนทจี่ ะเผยแพร่ เข้าสโู่ ลกของอินเทอร์เน็ต เพราะหากวา่ เวบ็ ไซต์ไมถ่ ูกตอ้ ง สามารถก่อความเสียหายต่อผู้วา่ จ้าง หรอื เจา้ ของเวบ็ ไซต์ อนั จะส่งผลต่อชอื่ เสยี งและกระทบต่อภาพลักษณน์ ั้นได้ จดุ ประสงค์การเรียนรู้ 1. สามารถทางานบนพาเนล Files ได้ 2. บอกสว่ นประกอบของพาเนล Files ได้ 3. ปรบั ปรุงไฟลแ์ ละโฟลเดอร์บนพาเนล Files ได้ 4. ตรวจสอบการเช่ือมโยงของเวบ็ เพจได้ 5. ตรวจสอบการเชอ่ื มโยงท้งั หมดในเว็บไซต์ได้ 6. ตรวจสอบการเชอ่ื มโยงเฉพาะไฟล์ทีท่ างานได้ 7. แก้ไขลิงกเ์ สยี ในเวบ็ ไซตไ์ ด้ 8. มีคุณธรรม จรยิ ธรรม และค่านิยมท่ดี ีในการใช้คอมพิวเตอร์ 9. มกี ารพฒั นาคุณธรรม จรยิ ธรรม คา่ นยิ ม และคุณลกั ษณะอนั พงึ ประสงค์ของผสู้ าเรจ็ การศกึ ษา สานักงานคณะกรรมการการอาชีวศึกษา ทคี่ รูสามารถสงั เกตได้ขณะทาการสอนในเร่ือง 9.1 ความมมี นษุ ยสัมพนั ธ์ 9.2 ความมวี นิ ยั 9.3 ความรับผิดชอบ 9.4 ความซอ่ื สตั ย์สจุ ริต 9.5 ความเชอ่ื มัน่ ในตนเอง 9.6 การประหยดั 9.7 ความสนใจใฝ่รู้ 9.8 การละเว้นส่งิ เสพตดิ และการพนนั 9.9 ความรกั สามคั คี 9.10 ความกตัญญกู ตเวที

183 สมรรถนะรายวิชา 1. แสดงความรเู้ ก่ียวกบั กระบวนการ โครงสร้างการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเวบ็ ไซต์ 2. ประยุกตใ์ ช้โปรแกรมภาษาหรอื โปรแกรมสาเร็จรปู สาหรับสร้างเวบ็ ไซต์ และการตดิ ตง้ั และอัพโหลด (Upload) เว็บไซต์ เน้อื หาสาระ 1. การทางานบนพาเนล Files 2. ส่วนประกอบของพาเนล Files 3. การปรบั ปรงุ ไฟล์และโฟลเดอร์บนพาเนล Files 4. การตรวจสอบการเชือ่ มโยงของเว็บเพจ 5. การแก้ไขลิงก์เสยี กิจกรรมการเรยี นรู้ ขนั้ นาเข้าสู่บทเรียน 1.ครูและผ้เู รียนสนทนาเก่ียวความสาคญั ของการทดสอบการทางานของเวบ็ ไซต์ เพราะเปน็ อกี ขัน้ ตอนที่จะตรวจสอบว่าเว็บไซตน์ ัน้ มกี ารเช่ือมโยงอยา่ งถูกต้องหรือไม่ กอ่ นทีจ่ ะเผยแพร่เข้าสูโ่ ลกของ อินเทอรเ์ นต็ หากวา่ เว็บไซต์ไมถ่ กู ต้อง สามารถก่อความเสียหายตอ่ ผู้วา่ จ้าง หรอื เจา้ ของเว็บไซต์ อนั จะ ส่งผลต่อช่ือเสียงและกระทบต่อภาพลักษณ์น้ันได้ 2.ผเู้ รียนเลา่ ประสบการณท์ ่ีพบเหน็ ข้อผิดพลาดของเวบ็ ไซต์ พรอ้ มระบขุ ้อผิดพลาดดงั กล่าว 3.ผ้เู รียนทาแบบประเมณิ ผลก่อนเรียน ขั้นสอน 4.ครูใชเ้ ทคนิควธิ กี ารจัดการเรยี นรู้แบบอภปิ ราย (Discussion Method) โดยมีจดุ มุ่งหมายเพือ่ ให้ ผู้เรยี นเข้าใจเนอื้ หาได้อยา่ งมีประสทิ ธภิ าพ โดยอภปิ รายเนื้อหาเรื่องการทางานบนพาเนล Files ซง่ึ เป็น พาเนลที่ใช้สาหรับเก็บรวบรวมโครงสรา้ งทง้ั หมดของเว็บไซต์ โดยมที ั้งโฟลเดอร์ภาพและไฟล์เวบ็ เพจเป็น HTML โดยก่อนท่ีนาไปอัพโหลดและใชง้ านนน้ั จะต้องมีการจัดระเบียบ และตรวจสอบก่อนวา่ เวบ็ เพจ ทงั้ หมดทางานได้ถกู ต้องหรือไม่ โดยกระทาผา่ นพาเนล Files 5.ครูใชส้ ่ือ Power Point ประกอบการการอธิบายเรื่องส่วนประกอบของพาเนล Flies โดยมีเครื่องมือ ต่างๆ ดังนี้ 1). Connect to Server ใชเ้ ช่ือมต่อกบั Server เพื่ออัพโหลดเว็บไซต์ข้ึนส่อู นิ เทอร์เน็ต และในขณะทเ่ี ช่ือมต่ออยู่ จะกลายเปน็ ปุ่มสาหรับใชใ้ นการตัดการเชือ่ มตอ่ กับ Server ได้ทนั ที 2). Refresh ใชค้ ลกิ เพ่ือรเี ฟรชหรือปรบั ปรงุ รายการไฟลแ์ ละโฟลเดอร์ เมือ่ มีการ เปลีย่ นแปลงจากนอกโปรแกรมได้ทันที 3). Get Files from Server ใช้คลกิ เพื่อนาไฟลห์ รือโฟลเดอร์จาก Server ดาวนโ์ หลดมา เกบ็ ไวใ้ นเคร่ืองคอมพิวเตอร์

184 4). Put Files to Server ใชค้ ลกิ เพ่ือนาไฟลห์ รือโฟลเดอร์ที่เลือกไปวางบน Server Check Out File คลิกเพื่อดาวนโ์ หลดไฟลจ์ าก Server มาแก้ไข รวมทัง้ ปอ้ งการแก้ไข 5). จากผอู้ ื่น 6). Check In File คลกิ เพอื่ อพั โหลดไฟลท์ ่ีแก้ไขแล้วข้ึนไปบน Server และคนื สิทธ์กิ ารแกไ้ ข ใหผ้ ู้อื่น 7). Synchronize to Remote Server คลกิ เพือ่ ซิงค์ (Sync) หรอื เปรยี บเทยี บไฟลบ์ น คอมพวิ เตอร์ และ Server วา่ มีไฟล์ทต่ี ่างกนั หรือไม่ หากมไี ฟลท์ แี่ ตกตา่ งกันจะปรบั ปรุงและคดั ลอกไว้ให้ เหมอื นทั้งสองฝงั่ 8). Expand to Show คลิกเพ่อื ขยายการทางานระหว่างมุมมอง Local View และ มุมมองไฟลเ์ ชอ่ื มต่อกบั Server ไว้ 6.ครใู ช้เทคนิควิธีสอนแบบสาธิต (Demonstration Method) สาธิตตัวอยา่ งการปรับปรุงไฟล์และ โฟลเดอร์บนพาเนล Flies โดยมขี ้นั ตอนดังนี้ 1). คลกิ เลือกไฟล์ HTML ทตี่ ้องการ จากน้ันลากเมาส์ไปวางในโฟลเ์ ดอร์ทต่ี ้องการ 2). ปรากฏรายชอ่ื ของไฟล์ HTML อ่นื ๆ ที่ได้ทาการเชือ่ มโยงกบั ไฟล์ท่ีย้ายตาแหนง่ ไว้คลิก Update เพือ่ อัพเดตการเชื่อมโยงให้เป็นปกติ

185 3). สามารถลบไฟลอ์ อกจากพาเนล Filesดว้ ยการเลือกไฟล์แลว้ กดปมุ่ Delete บนคยี ์บอร์ดโดยหากว่า ไฟลน์ น้ั มีการเช่ือมโยงกบั ไฟล์อื่นๆโปรแกรม Dreamweaver จะแจง้ ข้อความเตือนให้ทราบทันทวี ่าต้องการลบ หรอื ไม่ 7.ครใู ช้เทคนิควธิ ีสอนแบบสาธิต (Demonstration Method) สาธิตตวั อยา่ งการตรวจสอบการเช่ือมโยง ของเว็บเพจ โดยมีวธิ กี ารต่างๆ ดังน้ี - การตรวจสอบการเชือ่ มโยงท้ังหมดในไซต์ สามารถตรวจสอบการเช่อื มโยงทั้งหมดใน Site วา่ เวบ็ เพจแตล่ ะหนา้ มีการเชอื่ มโยงทส่ี มบูรณ์ หรอื ไม่ซ่ึงไมเ่ พยี งแค่เช่ือมโยงโดยใช้ลิง้ กเ์ ทา่ น้นั คาสงั่ จะตรวจสอบว่า มภี าพทห่ี ายไปหรือ ไมเ่ ช่นกนั รวมถงึ การเชอ่ื มโยงกบั CSS ว่าสมบรู ณห์ รือไม่ โดยสามารถตรวจสอบการเช่ือมโยงท้ังหมดในเว็บไซต์โดยคลิกทเ่ี มนู Site > Check Links Sitewideหรอื กดปมุ่ ลัด Ctrl + F8 บนคีย์บอร์ด โดยจะปรากฏพาเนล Link Checker ขน้ึ มาให้ใชต้ รวจสอบการเช่ือมโยงไดท้ ัง้ Site ทันที - การตรวจสอบการเช่ือมโยงเฉพาะไฟล์ สามารถทาไดด้ ว้ ยขนั้ ตอนดงั น้ี 1). เลือกไฟล์ทต่ี ้องการตรวจสอบ โดยอาจเลือกเพียงไฟลเ์ ดยี วหรือหลายไฟล์กไ็ ด้

186 2). คลกิ ขวาแล้วเลือกคาสัง่ Check Links > Selected Files 3). จะปรากฏพาเนล Link Checker และรายการไฟล์ HTML ท่ีมีปญั หา - การตรวจสอบการเชือ่ มโยงเฉพาะไฟล์ทีท่ างาน การตรวจสอบการเช่ือมโยงเฉพาะในไฟล์ HTML ท่กี าลังทางานอยทู่ าได้ โดยคลกิ เมนู File > Check Page > Links หรอื กดปุม่ Shift + F8 จะปรากฏรายการที่มีปัญหาของไฟลท์ ่ีทางานอยเู่ ท่านั้น

187 - การทางานกบั พาเนล Link Checker ในขณะท่ที างานกับพาเนล Link Checker สามารถสลับการแสดงผล โดยเลอื กไดว้ ่าต้องการให้ แสดงผลแบบใดบา้ ง โดยปกติจะแสดงเปน็ Broken Link โดยมี 3 รปู แบบดงั น้ี  Broken Links แสดงเฉพาะลิงกเ์ สยี  External Links แสดงเฉพาะลิงกท์ เี่ ช่ือมโยงภายนอกท่ีมีปัญหา  Orphaned Files แสดงไฟลท์ ไี่ ม่ถูกนาไปใช้งาน และภายใตพ้ าเนล Link Checker นัน้ จะมีการสรปุ รายการของลงิ กท์ ัง้ หมด และการเชอื่ มโยงที่มีปัญหา ไว้ดงั น้ี  Total คือ จานวนลิงกภ์ ายใต้ไฟล์ HTML ทั้งหมด  HTML คอื จานวนไฟล์ HTML ที่มีสร้างการเช่ือมโยงไว้  Orphaned คือ ไฟล์ตา่ งๆ ที่สร้างไว้ แต่ไม่มีการเชื่อมโยงหรือใชร้ ่วมกับไฟล์อ่นื  All links คือ ลิงกท์ ง้ั หมดในไซต์  OK คือ จานวนลิงกท์ ี่ไม่มปี ัญหา  Broken คือ จานวนลงิ กท์ ่มี ีปัญหาการเชื่อมโยง  External คอื จานวนลิงกท์ ่ีมีการเชอื่ มโยงไปยังเว็บภายนอก 8.ครูใชส้ ือ่ วดิ ที ศั นแ์ สดงตัวอย่างการแก้ไขลงิ กเ์ สีย และใหผ้ เู้ รยี นจดบนั ทกึ และปฏิบตั ิตาม ซง่ึ การแกไ้ ขนน้ั มีอยู่หลากหลายวธิ ดี ังน้ี

188 - แก้ไขบนพาเนล Files หลงั จากทีไ่ ด้ทาการตรวจสอบลิงกแ์ บบต่างๆ แล้วจะพบไดว้ ่า Dreamweaver จะรายงานผล ผา่ น พาเนล Link Checker โดยสามารถแกไ้ ขการเช่ือมโยงจากพาเนลดงั ขั้นตอนต่อไปน้ี 1). เลือกไฟล์ จากนัน้ คลิกปุม่ (Browse for fi le) เพ่ือปรบั ปรงุ การเชอ่ื มโยงแต่ละ ไฟล์ 2). เลือกโฟลเดอรห์ รือไฟล์ให้ถกู ต้อง จากนน้ั คลิกปุ่ม OK การเช่อื มโยงจะถูกปรับปรงุ ทันที - การเปดิ ไฟล์ลิงกท์ ี่มีปัญหาขน้ึ มาแกไ้ ข ในกรณที ่ีพบว่าลิงก์ท่ีมีปัญหาเป็นภาพ หรอื CSS การคลิกปุ่ม Browse to File อาจะไมส่ ะดวก นักโดยสามารถดบั เบ้ลิ คลิกท่ีไฟล์ท่ีมีปญั หาจากพาเนล Link Checker ขนึ้ มาแก้ไขด้วยขน้ั ตอนต่อไปนี้ 1). ตัวอย่างไฟล์ทตี่ รวจสอบแลว้ วา่ มปี ัญหาภาพหายไป ดบั เบล้ิ คลกิ เพ่ือเปดิ ข้ึนมาแกไ้ ข

189 2). ดบั เบล้ิ ทภ่ี าพทห่ี ายไป 3). เลอื กโฟลเดอร์และภาพที่ตอ้ งการ จากน้นั คลิก OK 4). การเชื่อมโยงในเวบ็ จะถูกอัพเดต และภาพที่หายไปจะกลับมาแสดงผลทนั ที - การแกไ้ ขการเชื่อมโยงท้งั เวบ็ ไซต์ ในกรณที ี่ไม่ได้สรา้ งเว็บไซต์ดว้ ยเทมเพลต จะทาให้เวบ็ เพจแต่ละหน้าแยกจากกนั เม่อื มีการ เปล่ยี นแปลงใดๆ จะตอ้ งไปทาการแก้ไขทลี ะเว็บเพจ แมว้ า่ จะเชอื่ มโยงไปยังเวบ็ เพจเดยี วกันกต็ าม

190 อย่างไรก็ตามสามารถใช้คาส่ัง Change Link Sitewide มาช่วยแก้ไขในกรณีการเชอ่ื มโยงผิดพลาดได้ดัง ข้นั ตอนดงั นี้ 1). คลกิ เมนู Site > Change Link Sitewide เพื่อเปิดคาสั่ง 2). คลกิ Browse for File ในหวั ขอ้ Change all links to จากนั้นเลอื กเวบ็ เพจหรือ ระบุ URL ที่สรา้ งการเชื่อมโยงผดิ พลาด 2.1 คลกิ Browse for File ในหวั ข้อ Into links to จากน้ันเลอื กเวบ็ เพจหรือระบุ URL ท่ตี อ้ งการแก้ไข 2.2 คลกิ ปุ่ม OK 3). จะปรากฏรายการเว็บเพจทจ่ี ะถูกปรบั ปรุงการเชอ่ื มโยง คลกิ ปุม่ Update เพ่ือ ปรับปรงุ การเช่ือมโยงเว็บเพจตามรายการท่ปี รากฏ

191 9.ผู้เรยี นสร้างเวบ็ ไซต์แนะนาสถานที่ท่องเที่ยวใกลบ้ ้านของนกั เรียน 1 แหง่ โดยมีเวบ็ เพจอยา่ ง นอ้ ย 4 เว็บเพจ แล้วทดสอบการทางานและตรวจสอบการเช่ือมโยง พร้อมเขยี นขนั้ ตอนทดสอบการ ทางานและการตรวจสอบ 10.ผ้เู รยี นบอกวิธกี ารสงั เกตลงิ กเ์ สียและวิธีการแก้ไขลงิ กเ์ สีย 11.ครูแนะนาใหผ้ ู้เรียนรจู้ กั การนาเอาความพอเพียงไปใช้ให้เกิดประโยชน์ ซง่ึ เปน็ ความ พอประมาณ ความมเี หตผุ ล รวมถึงความจาเป็นที่ต้องมีระบบภูมคิ ุ้มกันในตัวที่ดพี อสมควรตอ่ ผลกระทบ ใดๆ อันเกิดจากการเปล่ียนแปลงทง้ั ภายนอกและภายใน การตดั สนิ ใจและการดาเนนิ กจิ กรรมต่างๆให้อยู่ ในระดับพอเพียงนั้น ต้องอาศัยท้งั ความรู้และคุณธรรมเปน็ พ้ืนฐาน ขั้นสรปุ และการประเมินผล 12.ครูและผเู้ รยี นสรปุ เนอื้ หาที่เรียนโดยใชส้ อื่ Power Point 13.ผเู้ รียนทาใบงาน และแบบประเมณิ หลังเรียน ส่ือและแหล่งการเรยี นรู้ 1.หนังสือเรยี น วชิ าการสร้างเวบ็ ไซต์ ของสานกั พมิ พเ์ อมพันธ์ 2.รปู ภาพ 3.กิจกรรมการเรยี นการสอน 4.แผน่ ใส 5.สื่อ PowerPoint หลกั ฐาน 1.บนั ทกึ การสอน 2.ใบเชค็ รายชือ่ 3.แผนจัดการเรียนรู้ 4.การตรวจประเมินผลงาน การวดั ผลและการประเมินผล วธิ วี ดั ผล 1. สังเกตพฤตกิ รรมรายบคุ คล 2. ประเมนิ พฤติกรรมการเข้าร่วมกิจกรรมกลุ่ม 3. สังเกตพฤติกรรมการเขา้ ร่วมกิจกรรมกลุ่ม 4 ตรวจกจิ กรรมสง่ เสรมิ คุณธรรมนาความรู้ 5. ตรวจใบงาน 6. ตรวจแบบประเมินผลการเรยี นรู้ และแบบฝึกปฏิบตั ิ 7. การสงั เกตและประเมนิ พฤติกรรมด้านคุณธรรม จรยิ ธรรม ค่านยิ ม และคุณลักษณะอันพงึ ประสงค์

192 เครอ่ื งมอื วัดผล 1. แบบสังเกตพฤติกรรมรายบุคคล 2. แบบประเมินพฤติกรรมการเข้าร่วมกิจกรรมกลุ่ม (โดยครู) 3. แบบสงั เกตพฤติกรรมการเขา้ รว่ มกจิ กรรมกลุ่ม (โดยผู้เรียน) 4. แบบประเมนิ กิจกรรมสง่ เสรมิ คุณธรรมนาความรู้ 5. แบบประเมินกิจกรรมใบงาน 6. แบบประเมนิ ผลการเรยี นรู้ และแบบฝึกปฏบิ ัติ 7. แบบประเมินคุณธรรม จรยิ ธรรม ค่านยิ ม และคุณลักษณะอันพึงประสงค์ โดยครแู ละ ผเู้ รียนรว่ มกันประเมนิ เกณฑ์การประเมนิ ผล 1. เกณฑผ์ า่ นการสังเกตพฤติกรรมรายบุคคล ต้องไมม่ ีชอ่ งปรบั ปรุง 2. เกณฑผ์ า่ นการประเมนิ พฤติกรรมการเขา้ รว่ มกจิ กรรมกลุม่ คือ ปานกลาง (50 % ข้ึนไป) 3. เกณฑ์ผา่ นการสงั เกตพฤติกรรมการเข้าร่วมกจิ กรรมกลุ่ม คือ ปานกลาง (50% ขน้ึ ไป) 4. ตอบคาถามในกจิ กรรมส่งเสริมคณุ ธรรมนาความรู้จึงจะถือวา่ ผ่าน เกณฑ์การประเมนิ มีเกณฑ์ 4 ระดบั คอื 4= ดีมาก, 3 = ด,ี 2 = พอใช้ , 1= ควร ปรับปรงุ 5. กิจกรรมใบงาน เกณฑ์ผา่ น คือ 50% 6. แบบประเมินผลการเรยี น และแบบฝกึ ปฏิบตั ิรู้มเี กณฑผ์ า่ น 50% 7 แบบประเมนิ คุณธรรม จริยธรรม ค่านยิ ม และคุณลักษณะอันพึงประสงค์ คะแนน ข้นึ อยกู่ ับการประเมินตามสภาพจริง กจิ กรรมเสนอแนะ 1.ผู้เรยี นควรฝึกปฏบิ ัตเิ พิ่มเติม เพอ่ื ความชานาญในการสร้างเว็บไซต์ 2.อ่านและทบทวนเนอ้ื หา

193 จงเลือกคาตอบทีถ่ กู ต้องที่สุดเพียงข้อเดียว 1. หากต้องการตอ้ งการจัดระเบยี บของไฟลใ์ หม่เช่นเปลยี่ นชอื่ ไฟล์ โฟลเดอร์ หรือยา้ ยตาแหน่งไฟลไ์ ปยงั ท่ี อ่ืนบนเว็บไซต์ทีส่ รา้ ง โดยท่ีโปรแกรมจะทาการอัพเดตลิงก์และการเปลยี่ นแปลงใหม่ๆ ให้โดยอตั โนมัติ จะต้องกระทาท่ีใด ก. บนพาเนลFiles ข. บน Panel Properties ค. บน PanelLink ง. บน Folder 2. ข้อใดคือคยี ล์ ดั ถา้ ต้องการตรวจสอบการเช่ือมโยงท้งั หมดในเว็บไซต์ ก. Shift + F8 ข. Ctrl + F8 ค. ALT +F8 ง. Ctrl +Alt+ F8 3. หากตอ้ งการตรวจสอบการเชื่อมโยงเฉพาะไฟล์ที่ทางาน ก. Shift + F8 ข. Ctrl + F8 ค. ALT + F8 ง. Ctrl + Alt + F8 4. ภายใตพ้ าเนล Link Checker นนั้ จะมีการสรปุ รายการของลิงก์ทงั้ หมด ข้อใดแสดงถงึ ลิงกไ์ ม่มปี ัญหา ก. 114 All links ข. 102 ok. ค. 3 Broken ง. 9 External 5. ภายใตพ้ าเนล Link Checker ข้อใดแสดงถึงลงิ กม์ ีปัญหา ก. 114 All links ข. 102 ok. ค. 3 Broken ง. 9 External 6. ภายใตพ้ าเนล Link Checker ข้อใดแสดงถึงลงิ ก์ท้งั หมดในไซต์ ก. 114 All links ข. 102 ok. ค. 3 Broken ง. 9 External

194 7. ภายใตพ้ าเนล Link Checker ขอ้ ใดแสดงถึงจานวนลงิ ก์ที่มกี ารเช่ือมโยงไปยังเวบ็ ภายนอก ก. 114 All links ข. 102 ok. ค. 3 Broken ง. 9 External 8. ในการแสดงพาเนล Link Checker 5 HTML แสดงถงึ ความหมายใด ก. จานวนลิงก์ท่ีมปี ญั หาการเชื่อมโยง ข. จานวนลิงกท์ ีไ่ ม่มีปญั หา ค. จานวนไฟล์ HTML ทมี่ ีสรา้ งการเชอ่ื มโยงไว้ ง. ไฟลต์ ่างๆ ทส่ี รา้ งไว้ แต่ไม่มีการเช่ือมโยงรว่ มกบั ไฟล์อื่น 9. ในการแสดงพาเนล Link Checker 15 External แสดงถึงความหมายใด ก. จานวนลงิ กท์ ่มี ีการเช่ือมโยงไปยงั เวบ็ ภายนอก ข. จานวนลิงก์ที่ไม่มีปญั หา ค. จานวนไฟล์ HTML ที่มีสรา้ งการเชอ่ื มโยงไว้ ง. ไฟล์ตา่ งๆ ท่สี รา้ งไวแ้ ต่ไมม่ ีการเช่อื มโยงร่วมกับไฟล์อนื่ 10. หากตอ้ งการแก้ไขการเชื่อมโยงทง้ั เว็บไซตส์ ามารถใชค้ าสั่งอะไร ก. Shift + F8 ข. Ctrl + F8 ค. Ctrl + X ง. Change Link Sitewide

195 บันทึกหลังการสอน ข้อสรปุ หลังการสอน ........................................................................................................ ........................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ............................................................................................................................... ................. ................................................................................................................. ............................... .................................................................................................................. .............................. ................................................................................................................................................ ปัญหาที่พบ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ....................................................................................................................... ......................... ............................................................................................................... ................................. .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. แนวทางแก้ปัญหา .................................................................................................................. .............................. ......................................................................................................... ....................................... .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................................... ............ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. ..............................

196 แผนการจดั การเรียนรแู้ บบบูรณาการที่ 17 หน่วยที่ 10 รหัส 2204-2009 การสรา้ งเวบ็ ไซต์ (2-2-3) สอนคร้งั ท่ี 17 (65- ช่ือหน่วย/เรอ่ื ง การลงทะเบียนและอัพโหลดเวบ็ ไซต์ 68) จานวน 4 ช.ม. สาระสาคญั หลังจากมีการตรวจสอบข้อมูล ความเรียบรอ้ ย ความถูกต้อง โดยรวมของเว็บไซตอ์ ยา่ งดเี ยย่ี มแล้ว ขั้นตอนการลงทะเบียน เพอ่ื จดชื่อโดเมนเนม ขอพื้นท่ี และการอัพโหลดเว็บไซต์ เป็นขั้นตอนสาคัญทีจ่ ะ ทาใหข้ ้อมูลทง้ั หมด ถูกเผยแพร่สู่โลกของอนิ เทอรเ์ น็ตตามวัตถปุ ระสงค์ของผสู้ ร้างและเจ้าของเว็บไซต์ จดุ ประสงค์การเรยี นรู้ 1. มคี วามเขา้ ใจในเรอื่ ง Domain Name และ Web Hosting 2. สามารถจดทะเบยี น Domain Name และ Web Hosting ได้ 3. มีความเขา้ ใจในเร่ืองการอัพโหลดเวบ็ ไซต์ 4. สามารถนาเวบ็ ไซต์ไปอัพโหลดได้ 5. มีคุณธรรม จริยธรรม และคา่ นิยมทีด่ ีในการใช้คอมพวิ เตอร์ 6. การพฒั นาคุณธรรม จรยิ ธรรม คา่ นยิ ม และคุณลกั ษณะอนั พงึ ประสงค์ของผ้สู าเร็จการศึกษา สานกั งานคณะกรรมการการอาชวี ศึกษา ท่คี รูสามารถสงั เกตได้ขณะทาการสอนในเร่ือง 6.1 ความมีมนุษยสัมพันธ์ 6.2 ความมีวนิ ยั 6.3 ความรบั ผดิ ชอบ 6.4 ความซ่อื สัตย์สจุ ริต 6.5 ความเช่อื ม่นั ในตนเอง 6.6 การประหยัด 6.7 ความสนใจใฝร่ ู้ 6.8 การละเวน้ สิ่งเสพตดิ และการพนนั 6.9 ความรักสามคั คี 6.10 ความกตัญญูกตเวที สมรรถนะรายวิชา 1. แสดงความร้เู ก่ียวกับกระบวนการ โครงสรา้ งการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเว็บไซต์ 2. ประยกุ ตใ์ ชโ้ ปรแกรมภาษาหรือโปรแกรมสาเรจ็ รูปสาหรับสรา้ งเว็บไซต์ และการตดิ ตัง้ และอัพโหลด (Upload) เวบ็ ไซต์

197 เนอ้ื หาสาระ 1. การจดทะเบยี น Domain Name 2. การจดทะเบียน Web Hosting 3. ตวั อย่างการสมัครและใช้บรกิ าร Domain Name และ Web Hosting 4. การอพั โหลดเว็บไซต์ กิจกรรมการเรยี นรู้ ข้นั นาเขา้ สูบ่ ทเรยี น 1.ครกู ลา่ วว่าหลงั จากมีการตรวจสอบขอ้ มูล ความเรียบร้อย ความถูกต้อง โดยรวมของเว็บไซต์ อย่างดีเย่ยี มแล้ว ข้นั ตอนการลงทะเบียน เพือ่ จดช่ือโดเมนเนม ขอพน้ื ท่ี และการอพั โหลดเวบ็ ไซต์ เป็น ขนั้ ตอนสาคัญที่จะทาให้ข้อมูลท้งั หมด ถูกเผยแพรส่ ูโ่ ลกของอินเทอรเ์ น็ตตามวตั ถุประสงค์ของผ้สู ร้างและ เจา้ ของเว็บไซต์ 2. ผเู้ รยี นแสดงความคดิ เหน็ ว่าขัน้ ตอนการสรา้ งเวบ็ ขน้ั ตอนใดทีส่ าคัญมากทส่ี ุด หากผิดพลาดใน ขน้ั ตอนนนั้ ๆ อาจก่อใหเ้ กดิ ปัญหาร้ายแรงได้ 3. ผ้เู รยี นทาแบบประเมิณก่อนเรยี น 4. ผเู้ รยี นบอกความแตกตา่ งของเว็บไซต์ดงั ต่อไปนี้ www.microsoft.com , www.ram.edu , www.tourismthailand.org , www.rd.go.th ข้นั สอน 5. ครูใช้เทคนิควธิ ีสอนแบบบรรยาย (Lecture Method) เพ่อื อธิบายการจดทะเบียน Domain Name ท่ีจะใช้เปน็ ฐานขอ้ มูลของเว็บไซตท์ ีส่ ร้างขน้ึ มา โดยทวั่ ไปแลว้ ในระบบอนิ เทอร์เนต็ เว็บไซต์จะมี หมายเลขประจาตัวของแตล่ ะเว็บไซต์ เรียกว่า IP Address เช่น 10.45.159.178 โดยการใชเ้ ปน็ ชดุ ตวั เลขในลกั ษณะน้ีอาจทาให้เกิดความสบั สนไดเ้ พราะจายาก จึงมกี ารจดทะเบยี นท่ีเรยี กวา่ Domain Name ขน้ึ มา ซึง่ จะเป็นคา ข้อความหรือตัวอกั ษรธรรมดา ซ่งึ สามารถจาได้งา่ ยกวา่ เช่น www.google.co.th เปน็ ตน้ หลกั การจดทะเบยี น Domain Name ท่ดี ีนัน้ คือช่อื ควรสอ่ื ถึงเนอื้ หาใน เวบ็ ไซต์ กระชับ และจดจาได้งา่ ย 6. ครูใชส้ ่ือ Power Point ประกอบการสอนเรอ่ื งประเภทของ Domain Name ซ่งึ การลงทา้ ย ของชือ่ เวบ็ ไซตแ์ ต่ละรูปแบบนน้ั จะบ่งบอกจดุ ประสงคข์ องแต่ละเวบ็ ไซต์ต่างกนั ไปดงั นี้ .com หรอื .co เป็นเวบ็ ไซต์เก่ยี วกับธุรกิจ การค้า (Commercial) เช่น www.microsoft.com, www.adobe.com, www.facebook.com .eduหรอื .ac เปน็ เวบ็ ไซต์เก่ียวกบั การศึกษา (Education) เช่น www.chula.ac.th, www.ram.edu .govหรือ .go เปน็ เวบ็ ไซตเ์ กี่ยวกับองค์กรของรฐั บาล (Government) เชน่ www.rd.go.th, www.nasa.gov .or หรอื .org เป็นเว็บไซต์เก่ียวกบั กลมุ่ องค์กรณท์ ่ีไมแ่ สวงหาผลประโยชน์ (Organizations) เชน่ www.wwf.or.th, www.tourismthailand.org

198 นอกจากน้ี การจด Domain Name ในประเทศตา่ งๆ จะมีตวั อกั ษรกากับ เพื่อแสดงว่า Domain Name นัน้ ถกู จดทะเบยี นในประเทศใด เช่น .us เปน็ เว็บไซต์ทีจ่ ดทะเบยี นในประเทศสหรัฐอเมริกา หรอื .th เปน็ เวบ็ ไซตท์ จี่ ดทะเบียนในประเทศไทย เป็นต้น 7. ครใู ชเ้ ทคนคิ วิธสี อนแบบบรรยาย (Lecture Method) อธบิ ายเรอ่ื งการขอชอื่ Domain Name และ Web Hosting ให้เว็บไซต์นซ่ึงสามารถทาได้ใน 2 ลักษณะดังน้ี 1). ขอช่อื Domain Name แบบมีค่าใช้จ่าย เป็นรูปแบบทสี่ ามารถเลอื กช่ือ Domain Name ได้อย่างอิสระ หากไม่ซ้ากบั ชื่อท่มี ีการใชแ้ ล้ว และหลงั จากทีจ่ ดทะเบยี นไปแล้ว จะมีสทิ ธ์ใิ ชช้ ่ือดังกล่าวได้ 1 ปี และตอ้ งต่ออายุเม่ือครบกาหนด แตใ่ น บางกรณีอาจจดทะเบยี นได้อายกุ ารใชง้ านถึง 10 ปีได้ โดยคา่ ใชจ้ ่ายของการจดทะเบียนและการต่ออายุ น้นั จะต่างกันไปตามผ้ใู หบ้ ริการการจด Domain Name 2). ขอชือ่ Domain Name แบบไมเ่ สียคา่ ใช้จ่าย เป็นรปู แบบท่ีไม่จาเป็นต้องลงทนุ แต่มีข้อจากัดคือไม่สามารถกาหนดไดว้ ่าจะใช้ .co.th หรือ อ่นื ๆ ได้ เพราะว่า Domain Name ลักษณะนี้มักมีการบงั คับใชช้ อื่ ที่ลงท้ายดว้ ยชือ่ ของ Web Serverที่ ให้บริการ และมักเป็นการลงทะเบียน Domain Name ทมี่ ี Web Hosting มาให้พร้อมใช้งานไดท้ นั ที 8. ครูใชเ้ ทคนคิ วิธสี อนแบบบรรยาย (Lecture Method) อธบิ ายเรื่องการจดทะเบียน Web Hosting ให้เว็บไซตน์ ซงึ่ สามารถทาได้ใน 2 ลกั ษณะดังน้ี 1). Web Hosting แบบมคี ่าใชจ้ ่าย เป็น Web Hosting ทเ่ี หมาะกับการสรา้ งเวบ็ ไซต์ทต่ี ้องการภาพลักษณ์ท่นี า่ เชื่อถอื เชน่ เวบ็ ไซตข์ ายสนิ ค้า เวบ็ ไซตใ์ ห้บรกิ ารตา่ งๆ เพราะสามารถเลอื ก Domain Name แบบเสยี คา่ ใช้จ่ายท่ีจด ไวไ้ ด้ รวมถึงจะมีระบบทีมงานทค่ี อยดูแลระบบ Server ทาให้เว็บไซตม์ ีความเสถียรมากกว่า นอกจากนี้ อาจยังมีบริการเสรมิ ต่างๆ เช่น Free E-mail สาหรบั สมาชิก หรือรองรบั ภาษาสครปิ ตต์ า่ งๆ ไดม้ ากกวา่ โดยทั่วไป Web Hosting ประเภทนี้มกั เรียกเก็บคา่ ใช้จา่ ยเป็นรายเดือน 2). Web Hosting แบบไม่มคี ่าใช้จ่าย เป็น Web Hosting ที่มขี ้อดีหลัก คือไม่มีคา่ ใชจ้ า่ ยรายเดือนซ่ึงเหมาะกบั เว็บไซต์ที่ไม่ได้หวังผลทางธุรกจิ หรอื ไม่ไดต้ ้องการภาพลกั ษณ์มากนกั ซึ่งโดยทวั่ ไปแล้ว Web Hosting ประเภทนี้มกั มขี ้อจากัดอยู่ พอสมควร เชน่ พื้นทใี่ ห้บรกิ ารทีม่ จี ากัด หรอื มีแบนเนอรโ์ ฆษณาอยู่ในเวบ็ ซงึ่ ลดความนา่ เช่อื ถอื ลงไปได้ เป็นสาเหตทุ ีท่ าให้ไมเ่ หมาะกับเว็บไซต์ประเภทธรุ กจิ นน่ั เอง และอีกข้อหน่งึ ที่ต้องพิจารณา คอื ความ น่าเช่ือถอื ของ Hosting วา่ ใหบ้ รกิ ารมานานเท่าใด หรอื มคี วามสเถยี รภาพหรอื ไม่ เป็นต้น Web Hosting ประเภทนีม้ ักใหบ้ ริการจดทะเบียนพรอ้ ม Domain Name แบบไมเ่ สยี ค่าใช้จ่าย ซง่ึ ต้องใชช้ ่ือทลี่ งท้าย ดว้ ยชอื่ ของผู้ใหบ้ ริการ 9. ครแู ละผู้เรยี นอภิปรายการเลอื ก Web Hosting ใหเ้ หมาะสม โดยหลักการตดั สินใจเลอื ก Web Hosting มีด้วยกันหลายขอ้ ประกอบกันดังนี้

199  ความม่นั คงและสเถยี รของ Web Hosting เปน็ เร่อื งทีส่ าคัญที่สุด เนอ่ื งจากวา่ หาก Web Hostingลม่ บอ่ ยๆ เวบ็ ไซต์ทีเ่ ก็บไวจ้ ะหายไปดว้ ย โดยการพิจารณาความมั่นคงนนั้ ทาไดโ้ ดยการ ตรวจสอบจากจานวนผูใ้ ชบ้ ริการ หรือระยะเวลาท่ใี ห้บริการ เป็นตน้  พ้ืนทใ่ี ห้บริการ ควรพิจารณาพ้นื ทท่ี ี่ให้บริการของ Web Hosting ใหส้ อดคล้องกบั ขนาดของเว็บไซต์ท่สี รา้ งไว้ ว่ามขี ้อมลู อยู่มากหรือนอ้ ยเพยี งใด รวมถงึ การเพิ่มเติมข้อมลู ในอนาคตว่า ถหี่ รือไม่ หากให้บรกิ ารพ้นื ทไ่ี มเ่ พยี งพอ ควรเปล่ียนไปใช้ Web Hosting รายอ่ืนทม่ี ีพน้ื ท่ีเพียงพอต่อ ความตอ้ งการแทน  ความค้มุ คา่ ในกรณีท่ีเปน็ บริการแบบมีค่าใชจ้ า่ ย ควรพจิ ารณาถงึ ความคุม้ คา่ ตอ่ คา่ ใชจ้ ่ายทตี่ ้องจ่าย เน่ืองจากแตล่ ะผ้ใู หบ้ รกิ ารจะใหบ้ ริการ Web Hosting ท่ตี า่ งกนั ท้ังพืน้ ที่ ให้บริการ บริการเสริมต่างๆ รวมถึงอตั ราการรับส่งข้อมลู โดยควรพจิ ารณาจากหลายๆ ผ้ใู หบ้ ริการ แล้วนามาเปรยี บเทียบกัน  ภาษาที่รองรบั เปน็ อกี ปัจจยั ทสี่ าคญั ในกรณีทีใ่ นเว็บไซต์มีการใชส้ ครปิ ตร์ ่วม หรอื การใชม้ ัลตมิ ีเดยี ต่างๆ ควรทีจ่ ะพจิ ารณาว่า Web Hosting ทีจ่ ะใช้งานน้นั มีการรองรบั หรือไม่ ไมเ่ ช่นนั้นเว็บไซต์อาจ ไมแ่ สดงผลตามท่ีออกแบบไว้ได้  แบนเนอร์ สาหรับ Web Hosting แบบไม่มคี ่าใช้จ่าย มกั มีแบนเนอร์โฆษณามาดว้ ย ซงึ่ โดยทั่วไป พบอยู่ 2 ลกั ษณะ คอื ดา้ นบนเว็บเพจ และเป็นแบนเนอร์แบบลอย ซึง่ ผู้ใชส้ ามารถปดิ ได้ 10. ครูใชส้ ่อื วิดที ัศน์เพ่ือแสดงตวั อย่างการสมัตรและใช้บริการ Domain Name และ Web Hosting มสี าระสาคญั ดงั น้ี วธิ กี ารสมคั รและใช้บรกิ ารดังนี้ 1). เปดิ เว็บไซต์ www.000webhost.com ขึ้นมา 2). คลิกทีป่ ่มุ Order Now ในหมวด Free Hosting