แผนการจัดการเรียนรู้สร้างเว็บเบื้องต้น

การประเมนิ ผลการเรยี นรู้ • หลกั การประเมนิ ผลการเรียนรู้ ก่อนเรยี น ความรู้กอ่ นการเรียนการสอน ขณะเรยี น 10. ตรวจผลงานตามกจิ กรรมบูรณาการอาเซยี น 11. สงั เกตการทำงาน หลงั เรยี น 6. ตรวจกจิ กรรมบูรณาการเศรษฐกิจพอเพียง ผลงาน/ชิ้นงาน/ผลสำเรจ็ ของผู้เรยี น กิจกรรม



รายละเอยี ดการประเมินผลการเรยี นรู้ • จดุ ประสงค์เชิงพฤติกรรม ขอ้ ท่ี 1 อธิบายการจัดแตง่ ขอ้ ความได้ 13. วิธีการประเมิน : ทดสอบ 14. เคร่อื งมอื : แบบทดสอบ 15. เกณฑก์ ารให้คะแนน : อธิบายการจัดแต่งขอ้ ความได้ จะได้ 0.5 คะแนน • จุดประสงคเ์ ชิงพฤติกรรม ข้อท่ี 2 รวบรวมลักษณะตวั อักษรได้ 13. วิธกี ารประเมิน : ทดสอบ 14. เคร่อื งมือ : แบบทดสอบ 15. เกณฑ์การให้คะแนน : รวบรวมลักษณะตวั อักษรได้ จะได้ 0.5 คะแนน • จดุ ประสงค์เชิงพฤติกรรม ข้อท่ี 3 ออกแบบสไตล์ CSS ได้ 10. วิธกี ารประเมนิ : ทดสอบ 11. เครือ่ งมอื : แบบทดสอบ 12. เกณฑก์ ารให้คะแนน : ออกแบบสไตล์ CSS ได้ จะได้ 0.5 คะแนน • จุดประสงค์เชิงพฤตกิ รรม ข้อที่ 4 สรา้ งข้อความได้ 10. วธิ ีการประเมิน : ทดสอบ 11. เคร่อื งมือ : แบบทดสอบ 12. เกณฑก์ ารให้คะแนน : สร้างขอ้ ความได้ จะได้ 1 คะแนน • จุดประสงค์เชิงพฤตกิ รรม ขอ้ ท่ี 5 คัดลอกข้อความได้ 7. วธิ ีการประเมนิ : ทดสอบ 8. เครือ่ งมือ : แบบทดสอบ 9. เกณฑก์ ารให้คะแนน : คัดลอกข้อความได้ จะได้ 0.5 คะแนน • จุดประสงค์เชิงพฤตกิ รรม ข้อที่ 6 ขน้ึ บรรทดั ใหมใ่ นยอ่ หนา้ เดมิ ได้ 7. วิธีการประเมนิ : ทดสอบ

8. เครือ่ งมอื : แบบทดสอบ 9. เกณฑ์การให้คะแนน : ขน้ึ บรรทัดใหม่ในยอ่ หน้าเดิมได้ จะได้ 0.5 คะแนน • จดุ ประสงค์เชงิ พฤติกรรม ข้อที่ 7 เว้นระหวา่ งขอ้ ความได้ 7. วธิ ีการประเมิน : ทดสอบ 8. เครอื่ งมอื : แบบทดสอบ 9. เกณฑก์ ารให้คะแนน : เวน้ ระหวา่ งข้อความได้ จะได้ 0.5 คะแนน • จุดประสงคเ์ ชงิ พฤติกรรม ขอ้ ที่ 8 จัดรปู แบบข้อความได้ 7. วิธกี ารประเมนิ : ทดสอบ 8. เครือ่ งมือ : แบบทดสอบ 9. เกณฑก์ ารให้คะแนน : จดั รปู แบบขอ้ ความได้จะได้ 0.5 คะแนน • จุดประสงคเ์ ชงิ พฤตกิ รรม ข้อที่ 9 เลอื กฟอนตใ์ ห้กบั ขอ้ ความได้ 7. วิธีการประเมนิ : ทดสอบ 8. เคร่อื งมอื : แบบทดสอบ 9. เกณฑ์การให้คะแนน : เลือกฟอนต์ให้กับขอ้ ความได้จะได้ 0.5 คะแนน • จดุ ประสงคเ์ ชิงพฤตกิ รรม ข้อที่ 10 เพ่มิ ชุดฟอนต์ทใี่ ชก้ ับขอ้ ความได้ 7. วิธกี ารประเมนิ : ทดสอบ 8. เครื่องมือ : แบบทดสอบ 9. เกณฑก์ ารให้คะแนน : เพิม่ ชุดฟอนตท์ ี่ใช้กบั ข้อความได้จะได้ 0.5 คะแนน • จุดประสงค์เชิงพฤติกรรม ข้อท่ี 11 ปรับเปล่ยี นขนาดฟอนตไ์ ด้ 7. วิธกี ารประเมนิ : ทดสอบ 8. เคร่ืองมือ : แบบทดสอบ

9. เกณฑก์ ารใหค้ ะแนน : ปรบั เปล่ยี นขนาดฟอนตไ์ ด้ จะได้ 0.5 คะแนน • จดุ ประสงค์เชิงพฤติกรรม ขอ้ ที่ 12 เปลีย่ นสีฟอนตไ์ ด้ 7. วิธกี ารประเมิน : ทดสอบ 8. เครอ่ื งมือ : แบบทดสอบ 9. เกณฑก์ ารใหค้ ะแนน : เปลยี่ นสฟี อนตไ์ ด้จะได้ 0.5 คะแนน • จุดประสงคเ์ ชิงพฤติกรรม ข้อท่ี 13 เวน้ ระหวา่ งขอ้ ความได้ 7. วธิ กี ารประเมิน : ทดสอบ 8. เคร่อื งมือ : แบบทดสอบ 9. เกณฑ์การใหค้ ะแนน : เวน้ ระหวา่ งขอ้ ความได้ จะได้ 0.5 คะแนน • จดุ ประสงค์เชิงพฤตกิ รรม ขอ้ ที่ 14 ปฏบิ ตั ิตามข้ันตอนการจัดรปู แบบข้อความได้ 7. วิธกี ารประเมนิ : ทดสอบ 8. เครอ่ื งมอื : แบบทดสอบ 9. เกณฑก์ ารใหค้ ะแนน : ปฏิบัติตามขั้นตอนการจดั รปู แบบข้อความได้จะได้ 2 คะแนน • จดุ ประสงคเ์ ชิงพฤตกิ รรม ข้อท่ี 15 ประพฤติตามหลักการจดั และตกแต่งขอ้ ความด้วยโปรแกรม Adobe Dreamweaver CS5 ได้ 7. วิธกี ารประเมนิ : ทดสอบ 8. เครอ่ื งมือ : แบบทดสอบ 9. เกณฑ์การให้คะแนน : ปฏบิ ัตงิ านโดยใช้หลักความมีเหตุ และผลในการตดั สนิ ใจ จะได้ 0.5 คะแนน • จุดประสงค์เชงิ พฤติกรรม ขอ้ ที่ 15 จัดและตกแต่งข้อความดว้ ยโปรแกรม Adobe Dreamweaver CS5 ให้ ถกู ตอ้ งและเหมาะสมได้ 7. วิธกี ารประเมนิ : ทดสอบ 8. เคร่อื งมือ : แบบทดสอบ

9. เกณฑ์การใหค้ ะแนน : ปฏบิ ัตงิ านโดยใชห้ ลกั ความมีเหตุ และผลในการตัดสนิ ใจ จะได้ 1.5 คะแนน • จุดประสงค์เชิงพฤตกิ รรม ขอ้ ที่ 16 มคี วามซอื่ สัตย์ กับเพอื่ นร่วมงาน 7. วธิ กี ารประเมิน : ตรวจผลงาน 8. เครือ่ งมอื : แบบประเมินกระบวนการทำงานกลมุ่ 9. เกณฑก์ ารใหค้ ะแนน : มคี วามซอ่ื สตั ย์ กบั เพอ่ื นรว่ มงาน จะได้ 1 คะแนน กิจกรรมบูรณาการอาเซียน คำสง่ั ให้นกั เรียนโยงเสน้ ความสมั พนั ธใ์ หถ้ ูกต้อง คดั ลอกขอ้ ความ The style CSS ข้ึนบรรทดั ใหม่ในยอ่ หนา้ เดิม select font for your text. การเวน้ ระหวา่ งขอ้ ความ new line in the same จดั รูปแบบขอ้ ความ paragraph. text format

การกาหนดลกั ษณะตวั อกั ษร Topics a prominent การเนน้ หวั ขอ้ ให้โดดเดน่ highlighting. การกาหนดสไตล์ CSS leave a message copy text. กิจกรรมบรู ณาการเศรษฐกจิ พอเพียง กิจกรรม จัดข้อความให้สวยงาม จุดประสงค์ สามารถจัดตกแตง่ ข้อความ ภาระงาน 5. ให้นกั เรยี นค้นคว้าหาความรเู้ กี่ยวกับโครงการตามแนวพระราชดำริมา 2 โครงการหลงั จากได้ขอ้ มลู ให้นำ ขอ้ มลู ทไี่ ดม้ าจดั วางบนหน้าเว็บให้สวยงามตามความพอใจของนกั เรยี น 6. บันทกึ หนา้ เวบ็ หลงั จากตกแตง่ ข้อความ แล้วส่งอเี มลใ์ ห้ครูผสู้ อน (ระบุชื่อ นามสกุลห้องเรียน ใหเ้ รียบร้อย กอ่ นส่งอีเมล์ใหค้ รูผู้สอน)

แบบประเมนิ ผลการนำเสนอผลงาน ช่ือกลมุ่ ……………………………………………ช้ัน………………………หอ้ ง........................... รายช่ือสมาชกิ 1……………………………………เลขท่ี……. 2……………………………………เลขท…ี่ …. 3……………………………………เลขท่ี……. 4……………………………………เลขท…ี่ …. ที่ รายการประเมนิ คะแนน ขอ้ คดิ เหน็ 32 1 1 เน้ือหาสาระครอบคลุมชัดเจน (ความร้เู ก่ยี วกับเนอ้ื หา ความถูกตอ้ ง ปฏิภาณในการตอบ และการแก้ไขปัญหาเฉพาะหน้า) 2 รปู แบบการนำเสนอ 3 การมสี ว่ นร่วมของสมาชิกในกลุ่ม

4 บคุ ลิกลักษณะ กริ ยิ า ทา่ ทางในการพูด น้ำเสยี ง ซึ่งทำให้ผู้ฟังมีความ สนใจ รวม ผ้ปู ระเมิน………………………………………………… เกณฑ์การใหค้ ะแนน 1. เนื้อหาสาระครอบคลมุ ชดั เจนถูกต้อง 3 คะแนน = มีสาระสำคญั ครบถว้ นถกู ต้อง ตรงตามจุดประสงค์ 2 คะแนน = สาระสำคญั ไมค่ รบถ้วน แตต่ รงตามจดุ ประสงค์ 1 คะแนน = สาระสำคญั ไมถ่ ูกตอ้ ง ไม่ตรงตามจดุ ประสงค์ 2. รูปแบบการนำเสนอ 3 คะแนน = มีรปู แบบการนำเสนอที่เหมาะสม มีการใชเ้ ทคนคิ ที่แปลกใหม่ ใชส้ อ่ื และเทคโนโลยี ประกอบการ นำเสนอที่นา่ สนใจ นำวสั ดุในท้องถ่นิ มาประยกุ ตใ์ ชอ้ ยา่ งคมุ้ คา่ และประหยดั 4 คะแนน = มีเทคนิคการนำเสนอท่ีแปลกใหม่ ใช้ส่ือและเทคโนโลยปี ระกอบการนำเสนอท่ีนา่ สน ใจ แต่ ขาดการประยกุ ต์ใช้ วัสดุในทอ้ งถน่ิ 1 คะแนน = เทคนิคการนำเสนอไมเ่ หมาะสม และไม่น่าสนใจ 3. การมสี ่วนร่วมของสมาชิกในกลุ่ม 3 คะแนน = สมาชกิ ทุกคนมบี ทบาทและมสี ่วนร่วมกจิ กรรมกลุม่ 2 คะแนน = สมาชิกส่วนใหญ่มบี ทบาทและมสี ว่ นรว่ มกจิ กรรมกลมุ่ 1 คะแนน = สมาชกิ สว่ นนอ้ ยมีบทบาทและมีสว่ นร่วมกจิ กรรมกลมุ่ 4. ความสนใจของผฟู้ ัง 3 คะแนน = ผฟู้ งั มากกวา่ รอ้ ยละ 90 สนใจ และใหค้ วามร่วมมือ 2 คะแนน = ผ้ฟู งั รอ้ ยละ 70-90 สนใจ และใหค้ วามรว่ มมือ 1 คะแนน = ผฟู้ งั น้อยกว่ารอ้ ยละ 70 สนใจ และใหค้ วามรว่ มมือ แบบประเมินกระบวนการทำงานกลมุ่ ชื่อกลุ่ม……………………………………………ชั้น………………………หอ้ ง........................... รายชือ่ สมาชกิ 2……………………………………เลขท…ี่ …. 4……………………………………เลขท…ี่ …. 1……………………………………เลขท…่ี …. 3……………………………………เลขท…ี่ …. ที่ รายการประเมนิ คะแนน ข้อคิดเห็น 1 การกำหนดเปา้ หมายรว่ มกนั 321 2 การแบง่ หนา้ ทรี่ ับผดิ ชอบและการเตรียมความพร้อม 3 การปฏบิ ัตหิ นา้ ทที่ ีไ่ ด้รบั มอบหมาย 4 การประเมนิ ผลและปรบั ปรุงงาน รวม

ผูป้ ระเมิน………………………………………………… วนั ท…ี่ ………เดือน……………………..พ.ศ…………... เกณฑก์ ารให้คะแนน 1. การกำหนดเป้าหมายรว่ มกนั 3 คะแนน = สมาชิกทุกคนมสี ว่ นร่วมในการกำหนดเปา้ หมายการทำงานอยา่ งชดั เจน 2 คะแนน = สมาชกิ สว่ นใหญ่มสี ่วนรว่ มในการกำหนดเป้าหมายในการทำงาน 1 คะแนน = สมาชิกส่วนนอ้ ยมสี ว่ นร่วมในการกำหนดเปา้ หมายในการทำงาน 2. การมอบหมายหน้าที่รับผิดชอบและการเตรยี มความพรอ้ ม 3 คะแนน = กระจายงานไดท้ วั่ ถงึ และตรงตามความสามารถของสมาชกิ ทุกคน มีการจดั เตรยี มสถานที่ สอ่ื / อุปกรณไ์ ว้อยา่ งพรอ้ มเพรียง 2 คะแนน = กระจายงานได้ทั่วถึง แต่ไมต่ รงตามความสามารถ และมสี อ่ื / อุปกรณไ์ วอ้ ย่างพร้อมเพรยี ง แตข่ าด การจัดเตรยี มสถานที่ 1 คะแนน = กระจายงานไม่ทว่ั ถงึ และมสี ื่อ / อปุ กรณ์ไมเ่ พยี งพอ 3. การปฏบิ ตั ิหนา้ ทที่ ี่ได้รับมอบหมาย 3 คะแนน = ทำงานได้สำเร็จตามเปา้ หมาย และตามเวลาทีก่ ำหนด 2 คะแนน = ทำงานได้สำเร็จตามเปา้ หมาย แตช่ ้ากว่าเวลาท่ีกำหนด 1 คะแนน = ทำงานไม่สำเรจ็ ตามเปา้ หมาย 4. การประเมินผลและปรบั ปรงุ งาน 3 คะแนน = สมาชิกทุกคนร่วมปรกึ ษาหารอื ตดิ ตาม ตรวจสอบ และปรบั ปรงุ งานเปน็ ระยะ 2 คะแนน = สมาชกิ บางส่วนมสี ่วนรว่ มปรึกษาหารอื แตไ่ มป่ รบั ปรุงงาน 1 คะแนน = สมาชกิ บางสว่ นมีส่วนร่วมไม่มีส่วนร่วมปรกึ ษาหารือ และปรบั ปรุงงาน

หน่วยท่ี 3 การจัดและตกแตง่ ข้อความ เฉลยกจิ กรรมบรู ณาการอาเซยี น

บันทึกหลงั การสอน บทท่ี 3 การจดั ตกแต่งขอ้ ความ ผลการใชแ้ ผนการสอน 10. เน้อื หาสอดคล้องกบั จุดประสงคเ์ ชงิ พฤติกรรม 11. กิจกรรมการสอนเหมาะสมกบั เนือ้ หาและเวลาทกี่ ำหนด 12. สอื่ การสอนเหมาะสมดี ผลการเรยี นของนักเรยี น 10. นักศกึ ษาสว่ นใหญ่มคี วามเขา้ ใจในบทเรียน อภิปรายตอบคำถามในกลุ่ม และรว่ มกันปฏบิ ตั ิ ใบ งานท่ไี ดร้ บั มอบหมาย 11. นกั ศึกษากระตอื รอื รน้ และรับผดิ ชอบในการทำงานกลุม่ เพ่ือใหง้ านสำเรจ็ ทนั เวลาท่กี ำหนด 12. นักศึกษาจดั และตกแต่งขอ้ ความดว้ ยโปรแกรม Adobe Dreamweaver CS5 ได้ ผลการสอนของครู 8. ต้องปรบั เรือ่ งเวลาในส่วนของขั้นให้ความรเู้ พมิ่ ขึ้น 9. สอนทนั ตามเวลาที่กำหนด

แผนการสอน/แผนการเรยี นรภู้ าคทฤษฎี แผนการสอน/การเรยี นรู้ภาคทฤษฎี หน่วยท่ี 5 ชื่อวชิ า การสรา้ งเว็บไซต์ สอนสปั ดาหท์ ี่ 7 ชอ่ื หนว่ ย การสร้างตาราง คาบรวม 28 ชื่อเรอ่ื ง การสร้างตาราง จำนวนคาบ 4 หัวขอ้ เร่ือง ดา้ นความรู้ 1. เขยี นโครงร่างการสร้างตาราง ดา้ นทกั ษะ 2. สร้างตารางในเว็บเพจ 3. ใสข่ ้อมูลในตาราง 4. เลอื กสว่ นของตาราง 5. ปรับแต่งรายละเอียดของตาราง 6. เรยี งข้อมูลในตาราง 7. เปล่ียนแปลงจำนวนแถว คอลัมน์ 8. ตกแตง่ ตาราง ดา้ นจติ พสิ ัย 9. นำเทคนิคการสร้างเวบ็ เพจมาประยกุ ตใ์ ช้ ด้านคุณธรรม จริยธรรม 10. สรา้ งตารางบนเว็บเพจให้ถกู ตอ้ งเหมาะสมกับความจำเป็น สาระสำคัญ ตาราง (Table) ประกอบด้วยแถว (Row) และคอลัมน์ (Column) ใช้สำหรับแสดงข้อมูลที่ต้องการ จดั ลำดับ จดั เรียงเนือ้ หา และจดั หมวดหมู่ เพ่อื ความเปน็ ระบบระเบยี บ สะดวกในการคน้ หาแกไ้ ขและนำไปใชง้ าน การนำเสนอข้อมูลในรูปตารางประกอบเว็บเพจ มปี ระโยชนอ์ ยา่ งมาก โดยเฉพาะถ้าเป็นข้อมูลตัวเลข สถิติ มูลค่า และราคาสินค้า ซ่งึ ชว่ ยใหผ้ ู้ชมเขา้ ถึงแหล่งข้อมลู ได้อย่างรวดเร็วและครบถว้ น ตลอดจนสามารถเปรียบเทยี บข้อมูล ท่ีหาไดอ้ ยา่ งรวดเรว็ สมรรถนะอาชีพประจำหน่วย 2. สร้างตารางลงบนเวบ็ เพจ

จุดประสงค์การสอน/การเรยี นรู้ • จดุ ประสงค์ทั่วไป / บรู ณาการเศรษฐกจิ พอเพยี ง 1. เพ่อื ให้มีความรู้เกย่ี วกับการเขียนโครงร่างการสร้างตาราง (ด้านความร)ู้ 2. เพอื่ ใหม้ ที กั ษะในการสรา้ งตารางในเว็บเพจ (ด้านทักษะ) 3. เพอ่ื ใหม้ ีทักษะในการใส่ขอ้ มูลในตาราง (ด้านทักษะ) 4. เพอ่ื ให้มีทักษะในการเลอื กส่วนของตาราง (ดา้ นทักษะ) 5. เพอ่ื ใหม้ ที ักษะในการปรับแต่งรายละเอียดของตาราง (ด้านทกั ษะ) 6. เพื่อให้มีทกั ษะในการเรียงขอ้ มูลในตาราง (ดา้ นทักษะ) 7. เพ่อื ใหม้ ที ักษะในการเปล่ียนแปลงจำนวนแถว คอลัมน์ (ดา้ นทักษะ) 8. เพอ่ื ใหม้ ีทกั ษะในการตกแตง่ ตาราง (ด้านทกั ษะ) 9. เพอ่ื ใหม้ เี จตคติที่ดตี ่อการนำเทคนิคการสร้างเว็บเพจมาประยุกต์ใช้ (ดา้ นจิตพิสยั ) 10. เพอื่ สร้างตารางบนเวบ็ เพจให้ถกู ตอ้ งเหมาะสมกบั ความจำเป็น (ด้านคุณธรรม จรยิ ธรรม) • จดุ ประสงค์เชิงพฤติกรรม / บูรณาการเศรษฐกิจพอเพียง 1. เขียนโครงรา่ งการสร้างตารางได้ (ด้านความร)ู้ 2. สรา้ งตารางในเว็บเพจได้ (ด้านทกั ษะ) 3. ใส่ขอ้ มูลในตารางได้ (ด้านทักษะ) 4. เลอื กส่วนของตารางได้ (ด้านทกั ษะ) 5. ปรับแตง่ รายละเอยี ดของตารางได้ (ด้านทกั ษะ) 6. เรียงขอ้ มลู ในตารางได้ (ด้านทกั ษะ) 7. เปล่ียนแปลงจำนวนแถว คอลมั นไ์ ด้ (ด้านทกั ษะ) 8. ตกแตง่ ตารางได้ (ด้านทักษะ) 9. นำเทคนิคการสร้างเวบ็ เพจมาประยกุ ต์ใชไ้ ด้ (ดา้ นจติ พสิ ัย) 10. สรา้ งตารางบนเว็บเพจให้ถกู ตอ้ งเหมาะสมกบั ความจำเปน็ ได้ (ด้านคุณธรรม จรยิ ธรรม) เนือ้ หาสาระการสอน/การเรยี นรู้ • ด้านความรู้(ทฤษฎ)ี 1. การสร้างตาราง

ลักษณะของตารางบนเวบ็ เพจ ตาราง (Table) ประกอบด้วยแถว (Row) และคอลัมน์ (Column) ใช้สำหรับแสดงข้อมูลที่ต้องการ จัดลำดบั จัดเรียงเนื้อหา และจดั หมวดหมู่ เพือ่ ความเปน็ ระบบระเบียบ สะดวกในการค้นหา แกไ้ ขและนำไปใช้งาน การนำเสนอข้อมูลในรูปตารางประกอบเว็บเพจมีประโยชน์อย่างมาก โดยเฉพาะถ้าเป็นข้อมูลตัวเลข สถิติ มูลค่า และราคาสินค้า ซึ่งช่วยให้ผู้ชมเข้าถึงแหล่งข้อมูลได้อย่างรวดเร็ว และครบถ้วน ตลอดจนสามารถ เปรียบเทยี บขอ้ มลู ทหี่ าไดอ้ ยา่ งรวดเร็ว ภายในตารางนอกจากจะใส่ข้อความแล้ว ยังสามารถใส่รูปภาพ ภาพกราฟิก วัตถุตารางซ้อนตาราง ตกแต่งตารางด้วยสสี ันต่าง ๆ และใสภ่ าพพ้ืนหลงั ได้สวยงาม 1. วิธีสรา้ งตารางบนเว็บเพจ การสรา้ งตารางบนเว็บเพจ มขี น้ั ตอน ดังน้ี 1. เปิดเอกสารท่ตี อ้ งการจะสร้างตาราง 2. เลอื กเมนู Insert >> Table 3. หรอื ใชแ้ ปน้ พิมพ์ < Ctrl > + < T > จะไดห้ น้าตา่ ง Table ดงั รปู 4. เลอื กลักษณะของตาราง ดังน้ี กลมุ่ ของ Table Size กำหนดรายละเอียดดงั นี้ Rows จำนวนแถว (แกนนอน) Columns จำนวนคอลมั น์ (แกนตงั้ ) Table Width ความกว้างของตารางท้งั หมด และหน่วยวดั ที่ใช้ Border Thickness ขนาดเสน้ กรอบตาราง (มหี น่วยเปน็ พกิ เซล)

Cell Padding ระยะหา่ งระหวา่ งขอบเซลกบั เนอื้ หาภายในเซล Cell Spacing ระยะห่างระหวา่ งเซลแต่ละเซล กลุ่ม Header เลือกตำแหน่งของหวั เร่ืองภายในตารางดงั น้ี None ไม่ใชห้ ัวเรือ่ งตาราง Left กำหนดให้มหี วั เรือ่ งทางด้านซา้ ย Top กำหนดใหม้ หี ัวเรื่องทางด้านบน Both กำหนดให้มีหัวเร่ืองทง้ั ด้านซา้ ยและด้านบน กลมุ่ Accessibility กำหนดข้อมูลทัว่ ไปในตาราง ดงั น้ี Caption คำอธบิ ายกำกับตาราง Align caption ตำแหน่งของข้อความ caption Summary ขอ้ ความสรปุ ของตาราง 5. กำหนดค่าต่าง ๆ ตามที่ต้องการ เช่น สร้างตารางแบบ 3 แถว 4 คอลัมน์ เม่ือคลิกปุ่ม OK จะได้ ตารางลักษณะน้ี 2. การใส่ขอ้ มูลในตาราง ตารางทีส่ ร้างเสร็จแล้วสามารถใสข่ อ้ มลู ลงไปได้ 2 ประเภทหลกั ๆ คอื ขอ้ มูลข้อความและข้อมลู รูปภาพ หรือวตั ถุ ขอ้ มูลข้อความ ขอ้ มูลข้อความ หมายรวมถึงตวั อกั ษร ตัวเลข อกั ษรพิเศษ หรือสัญลักษณ์ต่าง ๆ มวี ธิ ีการใส่ในตาราง ดงั นี้ 1. คลกิ ท่ีเซลล์ทจ่ี ะใส่ข้อความ 2. เคอร์เซอร์จะปรากฏอยู่ในชอ่ งเซลล์นนั้ พมิ พข์ อ้ ความลงไปเหมือนโปรแกรมเวิร์ด 3. ถ้าข้อความยาวมาก ๆ ใหก้ ดเปน็ < Enter > 4. ถ้าต้องการพมิ พข์ ้อมูลเพิม่ เติมในเซลล์ใด กค็ ลกิ ทีเ่ ซลลน์ ้นั ๆ และพิมพ์ข้อมลู ได้ทุกเซลล์

ข้อมลู รูปภาพ การใส่รปู ภาพในเซลลม์ ีวิธีการเหมอื นกบั การใส่ภาพในเว็บเพจ ซึ่งมีขัน้ ตอนดงั น้ี 1. คลิกที่ชอ่ งเซลลท์ ่ีตอ้ งการจะใส่รปู ภาพ 2. คลิกทีเ่ ครื่องมอื รูปภาพ หรือคำสง่ั Insert >> Image 3. จะได้หน้าต่าง Select Image Source เลอื กรปู ภาพที่ต้องการแลว้ คลกิ OK 4. ภาพจะแทรกในเซลล์นัน้ ทนั ที 5. ปรบั ขนาดของภาพให้เหมาะสมกบั ตาราง 3. การเลอื กสว่ นของตาราง ถ้าตารางหรือเซลล์มีขนาดใหญ่หรอื เลก็ เกนิ ไปจนทำใหข้ อ้ ความ หรอื รปู ภาพไมไ่ ด้สัดสว่ นตามทตี่ ้องการ ควรปรบั ขนาดของตารางใหเ้ หมาะสม ดงั นี้ 1. ปรับขนาดแถว เลื่อนเมาส์มาตรงเสน้ แนวนอน เมาสจ์ ะเปลย่ี นรปู เปน็ รูปคลกิ เมาส์คา้ งไว้แล้วลากยอ่ หรือขยายแถว 2. ปรับขนาดคอลัมน์ เลอื่ นเมาส์มาตรงเสน้ แนวตง้ั เมาส์จะเปลยี่ นรูปเปน็ รูป คลกิ เมาสค์ ้างไว้ แลว้ ลากยอ่ หรือขยายคอลมั น์

3. การขยายทั้งตาราง ให้เลื่อนเมาส์มาที่ปุ่มจับด้านขวามือล่างสุดของตาราง เมาส์จะเปลี่ยนเป็นรูป ลูกศรสองหวั เฉยี ง ๆ คลกิ และลากเพื่อยอ่ หรือขยายตารางทง้ั หมด 4. การปรบั แต่งรายละเอยี ดของตาราง การปรับแต่งรายละเอียดหรือคุณสมบัติของตาราง เพื่อให้เหมาะสมกับการใช้งานนั้นทำได้โดยใช้ Properties Inspector การปรบั ตารางด้วย Properties Inspector เมื่อคลกิ เลือกตารางที่ Properties ขน้ึ มาจะปรากฏคุณสมบตั ิของตารางขนึ้ มาสามารถปรับเปล่ียนได้ ตามตอ้ งการ การปรับตารางดว้ ยเมนคู ำส่ัง

การใช้เมนูคำส่ังในการปรบั ตาราง มวี ิธกี ารทำ ดังนี้ 1. คลิกที่เมนู Modify แลว้ เลอื กคำสงั่ ย่อย Table 2. หรอื คลกิ ขวาที่ตาราง จะไดเ้ มนูลดั เลอื กคำสง่ั ย่อย Table 5. การจัดเรียงข้อมลู ในตาราง ข้อมูลในตารางโดยเฉพาะข้อมูลตัวอักษรที่พิมพ์เข้าไป ในครั้งแรกอาจจะพิมพ์ลงไปในค่าเซลล์โดย ไมไ่ ดเ้ รียงลำดบั แต่ถ้าต้องการเรียงลำดับขอ้ มลู เชน่ เรียงลำดับตัวอักษร เรยี งค่าจากน้อยไปมาก หรือจากมากไป นอ้ ย กส็ ามารถทำได้ ดงั นี้ 1. คลิกเลอื กตารางที่ต้องการจดั เรียงข้อความ 2. เลือกคำสัง่ Commands>> Sort Table … จะไดห้ น้าต่าง Sort Table เพอื่ กำหนดรายละเอยี ด ดังนี้ Sort by เรียงลำดบั โดย ให้เลอื กคอลมั นแ์ รกทจี่ ะนำมาเรยี งลำดับ Order ลักษณะการเรยี ง เชน่ เรียงตามตัวอักษร จากนอ้ ยไปหามาก Then by แลว้ เรียงลำดบั ตาม เลือกคอลัมน์ท่จี ะนำมาเรียงลำดับอ่นื ๆ

Options ตวั เลือกเพิ่มเติมการเรียง 3. เลอื กรปู แบบการเรียงตามท่ีตอ้ งการ เชน่ เรยี งจากนอ้ ยไปหามาก ตามลำดบั ตัวอกั ษร 6. การเปลย่ี นจำนวนแถวและคอลมั น์ การแทรกแถว 1. คลิกขวาทตี่ ำแหนง่ ทีต่ อ้ งการจะแทรกแถว 2. จะไดเ้ มนูลดั เลอื กคำสั่ง Table >> Insert Row 3. จะมแี ถวเพิม่ มาให้ 1 แถว การแทรกคอลมั น์ 1. คลิกขวาท่ตี ำแหน่งท่ตี ้องการจะแทรกคอลมั น์ 2. จะได้เมนลู ัด เลอื กคำสงั่ Table >> Insert Column

การแทรกหลายแถวและคอลัมน์ ถา้ ตอ้ งการแทรกแถวและคอลัมนจ์ ำนวนมากในคราวเดยี วกัน มวี ธิ ีการทำ ดงั น้ี 1. คลกิ ขวาท่ีตำแหน่งทต่ี ้องการแทรกแถวหรือคอลัมน์ 2. เลอื กคำสัง่ Table>> Insert Rows or Columns 3. จะได้หนา้ ตา่ ง Insert Rows or Columns 4. ระบจุ ำนวนแถวหรือคอลัมนท์ ีต่ อ้ งการ แล้วคลิกปุม่ OK การลบแถวและคอลัมน์ 1. คลิกเลอื กแถวหรอื คอลมั นท์ ี่ตอ้ งการจะลบ 2. กดแป้น < Delete> หรือ แปน้ < Backspace >

3. หรอื คลิกขวาเลือกเมนูลัด แลว้ เลอื กคำสัง่ Table >> Delete Row หรอื Delete Column การรวมเซลล์ (Merge Cell) เซลลท์ ่อี ยใู่ นตาราง สามารถรวมกันได้ เรยี กว่า Merge Cells มีวธิ ีดงั ตอ่ ไปนี้ 1. เลอื กเซลลท์ จ่ี ะรวมเขา้ ดว้ ยกนั 2. คลกิ ขวาในตาราง แลว้ เลอื กคำสงั่ Table >> Merge Cells 3. เซลลท์ ่ีเลือกไว้จะรวมกันเปน็ เซลล์เดยี ว

การแบง่ เซลล์ ( Split Cell) 1. คลกิ เลือกเซลล์ท่ตี อ้ งการ 2. คลกิ ขวาแล้วเลือกคำส่ัง Table >> Split Cells 3. จะปรากฏหน้าต่าง Split Cell ซึง่ กำหนดรายละเอียดดังนี้ Split cell into Rows Split cell into Columns 7. การตกแต่งตาราง การใสส่ พี น้ื และเส้นขอบตาราง 1. คลิกเลือกตารางหรือชอ่ งเซลลท์ ่ีต้องการจะใสส่ ีพนื้ หลงั และเส้นขอบ 2. คลิกเลือก จะแสดงถาดสีจำนวนมาก 3. คลกิ เลือกสีทต่ี อ้ งการ

การใส่ภาพพนื้ ตาราง 1. คลกิ เลือกตารางท้งั ตาราง หรือเลือกบางเซลล์กไ็ ด้ 2. คลิกที่ป่มุ 3. จะได้หน้าต่าง Page Properties คลกิ ป่มุ Browse เลอื กภาพทตี่ อ้ งการจะนำไป สรา้ งพ้นื หลงั เสรจ็ แล้วคลกิ ป่มุ OK

4. ภาพทีน่ ำไปสรา้ งจะถูกนำไปสร้างเป็นพน้ื หลังทนั ที การเปลีย่ นขนาดเส้นตาราง เส้นตารางที่สร้างไว้นั้น หากไม่ต้องการแสดงผลบน Browser ก็สามารถสั่งให้ซ่อนเส้นตาราง หรือจะ เปลี่ยนขนาดของเสน้ ให้มขี นาดใหญข่ ้นึ หรือเลก็ ลงก็ได้ 1. คลิกเลือกตารางหรอื เส้นตารางทต่ี ้องการจะเปลยี่ นขนาดเสน้ ขอบ 2. ถ้าตอ้ งการซ่อนเส้นขอบให้เปล่ยี นเปน็ เลข 0

3. แลว้ คลิกพ้นื ทใี่ ด ๆ ของตาราง เสน้ ตารางจะถกู ซอ่ นไว้ แต่ยังคงมตี ารางอยู่ โดยจะแสดงเปน็ เสน้ ประ และจดั การกบั ตารางได้ตามปกติ 4. ถ้าต้องการเปลย่ี นขนาดของเสน้ ตารางใหแ้ กไ้ ขตวั เลขในช่อง Border เชน่ 1 2 3 • ด้านทกั ษะ+ดา้ นจติ พสิ ัย (ปฏิบตั +ิ ด้านจิตพิสัย) (จุดประสงคเ์ ชิงพฤตกิ รรมข้อท่ี 1-9)

1. ใบงานหน่วยท่ี 5 2. แบบฝึกหัด หน่วยท่ี 5 3. กิจกรรมบรู ณาการ 3D ฝึกทักษะภาคทฤษฎี หนว่ ยท่ี 5 4. กิจกรรมบูรณาการจิตอาสา 5. กิจกรรมบรู ณาการเศรษฐกิจพอเพียง 6. กจิ กรรมบูรณาการอาเซียน 7. กจิ กรรมบรู ณาการในชวี ติ ประจำาวัน หน่วยท่ี 5 • ดา้ นคณุ ธรรม/จริยธรรม/จรรยาบรรณ/บูรณาการเศรษฐกิจพอเพียง (จุดประสงค์เชงิ พฤติกรรมข้อท่ี 10) 1. สร้างตารางบนเว็บเพจให้ถูกต้องเหมาะสมกับความจำเปน็ ได้ กจิ กรรมการเรยี นการสอนหรอื การเรียนรู้ ข้ันตอนการสอนหรือกจิ กรรมของครู ข้นั ตอนการเรียนรู้หรอื กิจกรรมของนักเรยี น 1. ขนั้ นำเขา้ สู่บทเรยี น ( 15 นาที ) 1. ขนั้ นำเข้าสบู่ ทเรยี น ( 15 นาที )

1. ผู้สอนแจ้งจุดประสงค์การเรียนของหน่วยท่ี 1. ผู้เรียนทำความเข้าใจเกี่ยวกับจุดประสงค์การ 5 เรือ่ ง การสรา้ งตาราง เรียนของหน่วยเรียนที่ 5 เร่อื ง การสรา้ งตาราง 2. ผสู้ อนใหผ้ ้เู รียนเขยี นโครงร่างการสรา้ งตาราง 2. ผเู้ รยี นเขยี นโครงรา่ งการสร้างตาราง 2. ขัน้ ใหค้ วามรู้ ( 90 นาที ) 1. ผู้สอนให้ผู้เรียนเปิดเอกสารประกอบการ สอนวิชา การสร้างเว็บไซต์ หน่วยที่ 5 เรื่อง การ 2. ขัน้ ให้ความรู้ ( 90 นาที ) สร้างตาราง และให้ผู้เรียนศึกษารายละเอียดด้วย 1. ผู้เรียนเปิดเอกสารประกอบการสอนวิชา การ ตนเอง สร้างเวบ็ ไซต์ หน่วยที่ 5 เรื่อง การสร้างตาราง และให้ 2. ผู้สอนเปิดโอกาส ให้ผู้เรียนถามปัญหา และ ผู้เรียนศึกษารายละเอียดด้วยตนเองเลือกจดบันทึก ข้อสงสัยจากเนื้อหา โดยครูเป็นผู้ตอบปัญหาที่เกดิ ขน้ึ เน้ือหาที่สำคญั 2. ผู้เรียนซักถามข้อสงสัยที่เกิดขึ้นและผู้เรียน ระหวา่ งการเรียนการสอน 3. ผ้สู อนใหผ้ เู้ รียนสร้างตารางลงบนเวบ็ เพจ ร่วมมอื กบั ผู้สอน 3. ขั้นประยกุ ตใ์ ช้ ( 75 นาที ) 3. ผู้เรียนสรา้ งตารางลงบนเว็บเพจ 1. ผู้สอนให้ผู้เรียนทำใบงานหน่วยที่ 5 หน้าท่ี 98 หน่วยที่ 5 3. ข้ันประยุกต์ใช้( 75 นาที ) 2. ผู้สอนให้ผู้เรียนทำแบบฝึกหัด 1. ผเู้ รยี นทำใบงานหน่วยที่ 5 หนา้ ท่ี 98 หนา้ ท่ี 99 3. ผู้สอนให้ผู้เรียนสืบค้นข้อมูลจาก Web Guide หน้าที่ 97 หรือหาความรู้เพิ่มเติมจาก 2. ผู้เรยี นทำแบบฝกึ หัด หน่วยที่ 5 หน้าท่ี 99 อนิ เทอร์เนต็ 3. ผู้เรียนสืบค้นข้อมูลจาก Web Guide หน้าท่ี 97 หรือหาความร้เู พม่ิ เติมจากอินเทอรเ์ นต็ กิจกรรมการเรียนการสอนหรอื การเรยี นรู้ ข้นั ตอนการสอนหรอื กิจกรรมของครู ขน้ั ตอนการเรยี นรูห้ รอื กิจกรรมของนกั เรยี น

4. ขน้ั สรปุ และประเมนิ ผล ( 60 นาที ) 4. ขนั้ สรปุ และประเมินผล( 60 นาที ) 1. ผู้สอนและผู้เรียนร่วมกันสรุปเนื้อหาที่ได้เรียน 1. ผู้สอนและผูเ้ รียนรว่ มกันสรปุ เน้ือหาทีไ่ ด้เรียนให้ ใหม้ ีความเขา้ ใจในทศิ ทางเดยี วกนั มคี วามเขา้ ใจในทิศทางเดียวกัน 2. ผู้สอนให้ผู้เรียนทำกิจกรรมบูรณาการ 3D ฝึก 2. ผู้เรียนทำกิจกรรมบูรณาการ 3D ฝึกทักษะ ทกั ษะภาคทฤษฎี หนา้ ที่ 111 ภาคทฤษฎี หน้าที่ 111 3. ผู้สอนให้ผู้เรียนทำกิจกรรมบูรณาการจิตอาสา 3. ผู้เรียนทำกิจกรรมบูรณาการจิตอาสา หน้าที่ หน้าท่ี 102 102 4. ผู้สอนให้ผูเ้ รียนทำกจิ กรรมบูรณาการเศรษฐกิจ 4. ผู้เรียนทำกิจกรรมบูรณาการเศรษฐกิจพอเพียง พอเพยี ง หน้าที่ 102 หน้าที่ 102 5. ผู้สอนให้ผู้เรียนทำกิจกรรมบูรณาการอาเซียน 5. ผู้เรยี นทำกจิ กรรมบูรณาการอาเซยี นหน้าท่ี 103 หนา้ ท่ี 103 6. ผู้สอนให้ผู้เรียนทำกิจกรรมบูรณาการในชีวิต 6. ผู้เรียนทำกิจกรรมบูรณาการในชีวิตประจำาวนั ประจำาวนั หนว่ ยท่ี 5 หน้าที่ 103 หนว่ ยท่ี 5 หนา้ ที่ 103 7. ผู้สอนให้ผู้เรียนศึกษาเพิ่มเติมนอกห้องเรียน 7.ผู้เรียนศึกษาเพิ่มเติมนอกห้องเรียน ด้วย ดว้ ยบทเรยี นคอมพวิ เตอรช์ ว่ ยสอนที่จดั ทำขึ้น บทเรยี นคอมพิวเตอรช์ ่วยสอนท่จี ัดทำขนึ้ (บรรลจุ ดุ ประสงคเ์ ชิงพฤตกิ รรมขอ้ ที่ 1-10) (บรรลจุ ดุ ประสงคเ์ ชงิ พฤตกิ รรมขอ้ ท่ี 1-10) (รวม 240 นาที หรอื 4 คาบเรียน) งานที่มอบหมายหรอื กจิ กรรมการวัดผลและประเมินผล b. กอ่ นเรียน 1. จัดเตรยี มเอกสาร สอ่ื การเรยี นการสอนหนว่ ยที่ 5

2. ทำความเข้าใจเกี่ยวกบั จุดประสงค์การเรยี นของหนว่ ยเรยี นท่ี 5 และใหค้ วามรว่ มมอื ในการทำกิจกรรม c. ขณะเรียน 13. ปฏิบัติตามใบงานหน่วยที่ 5 14. ปฏิบัตติ ามแบบฝึกหัด หนว่ ยท่ี 5 15. ร่วมกนั สรปุ “การสรา้ งตาราง” หลงั เรียน 1. ทำกจิ กรรมบูรณาการ 3D ฝึกทกั ษะภาคทฤษฎี หนว่ ยที่ 5 2. ทำกิจกรรมบูรณาการจิตอาสา 3. ทำกจิ กรรมบรู ณาการเศรษฐกิจพอเพยี ง 4. ทำกิจกรรมบูรณาการอาเซยี น 5. ทำกิจกรรมบรู ณาการในชวี ิตประจำาวัน หน่วยท่ี 5 คำถาม 1. จงอธิบายวธิ กี ารสร้างตาราง 2. การสร้างตารางบนเวบ็ เพจมขี อ้ ดี-ขอ้ เสียอย่างไร ผลงาน/ชิน้ งาน/ความสำเร็จของผ้เู รยี น ใบงาน แบบฝึกหัด กิจกรรม สมรรถนะท่พี งึ ประสงค์ ผู้เรยี นสร้างความเข้าใจเกี่ยวกับการสร้างตาราง 21. วเิ คราะห์และตคี วามหมาย 22. ต้ังคำถาม 23. อภปิ รายแสดงความคิดเหน็ ระดมสมอง 24. การประยกุ ต์ความรสู้ งู่ านอาชีพ

สมรรถนะการปฏบิ ตั ิงานอาชีพ 6. สร้างตารางลงบนเวบ็ เพจ สมรรถนะการขยายผล ความสอดคลอ้ ง จากการเรียน เรื่อง การสรา้ งตาราง ทำใหผ้ ู้เรยี นมีความร้เู พิ่มเก่ียวกบั ตาราง (Table) ประกอบด้วยแถว (Row) และคอลัมน์ (Column) ใช้สำหรับแสดงข้อมูลที่ต้องการจัดลำดับ จัดเรียงเนื้อหา และจัดหมวดหมู่ เพ่ือ ความเปน็ ระบบระเบยี บ สะดวกในการคน้ หาแก้ไขและนำไปใชง้ านการนำเสนอขอ้ มลู ในรูปตารางประกอบเวบ็ เพจ มี ประโยชนอ์ ยา่ งมาก โดยเฉพาะถ้าเปน็ ขอ้ มูลตวั เลข สถิติ มูลคา่ และราคาสินค้า ซง่ึ ชว่ ยใหผ้ ชู้ มเข้าถึงแหล่งข้อมูลได้ อยา่ งรวดเรว็ และครบถว้ น ตลอดจนสามารถเปรียบเทยี บข้อมลู ทหี่ าไดอ้ ยา่ งรวดเร็ว ส่ือการเรยี นการสอน/การเรยี นรู้ สอ่ื ส่ิงพิมพ์ 7. เอกสารประกอบการสอนวิชา การสรา้ งเวบ็ ไซต์ (ใชป้ ระกอบการเรยี นการสอนจุดประสงค์เชิง พฤติกรรมข้อที่ 1-10) 8. ใบความร้ทู ี่ 5 เร่ือง การสรา้ งตาราง (ใช้ประกอบการเรยี นการสอนขั้นให้ความรู้ เพอ่ื ใหบ้ รรลุ จดุ ประสงคเ์ ชิงพฤตกิ รรมขอ้ ที่ 1-10) 9. ใบงานท่ี 5 เรื่อง การสรา้ งตาราง ขั้นประยกุ ต์ใช้ 1 10. แบบฝกึ หัด หนว่ ยที่ 4 ข้ันประยกุ ต์ใช้ ข้อ 2

11. กิจกรรมบรู ณาการ 3D ฝกึ ทกั ษะภาคทฤษฎี หนว่ ยที่ 5 ใช้ประกอบการสอนขั้นสรุป และ ประเมินผล ขอ้ 2 12. กจิ กรรมบูรณาการจติ อาสา ใชป้ ระกอบการสอนข้นั สรุป และประเมินผล ข้อ 3 13. กิจกรรมบรู ณาการเศรษฐกิจพอเพียง ใชป้ ระกอบการสอนขัน้ สรุป และประเมินผล ข้อ 4 14. กจิ กรรมบรู ณาการอาเซยี น ใช้ประกอบการสอนขั้นสรุป และประเมินผล ข้อ 5 15. กจิ กรรมบรู ณาการในชีวิตประจำาวัน หนว่ ยที่ 5 ใช้ประกอบการสอนข้นั สรุป และประเมินผล ข้อ 6 16. แบบประเมนิ ผลงานตามใบงาน ใช้ประกอบการสอนขน้ั ประยุกตใ์ ช้ ขอ้ 1-2 17. แบบประเมินพฤตกิ รรมการทำงาน ใช้ประกอบการสอนขัน้ สรปุ ขอ้ 2-6 ส่ือโสตทัศน์ (ถ้าม)ี 4. เครอื่ งไมโครคอมพวิ เตอร์ 5. PowerPoint เรอื่ ง การสร้างตาราง สื่อของจรงิ การสรา้ งตาราง (ใช้ประกอบการเรยี นการสอนจุดประสงคเ์ ชงิ พฤตกิ รรมขอ้ ท่ี 1-10) แหล่งการเรยี นรู้ ในสถานศึกษา 1. ห้องสมดุ วทิ ยาลยั เทคนิคสมุทรสาคร 2. ห้องปฏบิ ตั กิ ารคอมพวิ เตอร์ ศกึ ษาหาข้อมลู ทางอินเทอร์เน็ต นอกสถานศกึ ษา ผ้ปู ระกอบการ สถานประกอบการ ในท้องถิ่นจงั หวดั สมุทรสาคร

การบรู ณาการ/ความสมั พันธก์ ับวิชาอน่ื 11. บูรณาการกับวิชาชวี ิตและวัฒนธรรมไทย ดา้ นการพดู การอ่าน การเขยี น และการฝกึ ปฏบิ ตั ิตนทาง สังคมดา้ นการเตรียมความพร้อม ความรบั ผิดชอบ และความสนใจใฝร่ ู้ 12. บูรณาการกับวิชาพ้นื ฐานการสร้างเว็บไซต์ การประเมนิ ผลการเรียนรู้ • หลกั การประเมินผลการเรยี นรู้ ก่อนเรยี น ความรู้เบ้ืองต้นเกีย่ วกบั การเรยี นการสอน ขณะเรียน 12. ตรวจใบงานหน่วยท่ี 5 13. ตรวจแบบฝึกหัด หนว่ ยที่ 5

14. สงั เกตการทำงาน หลงั เรียน 7. ตรวจกจิ กรรมบูรณาการ 3D ฝึกทักษะภาคทฤษฎี หนว่ ยที่ 5 8. ตรวจกิจกรรมบรู ณาการจิตอาสา 9. ตรวจกจิ กรรมบูรณาการเศรษฐกิจพอเพยี ง 10. ตรวจกจิ กรรมบรู ณาการอาเซยี น 11. ตรวจกจิ กรรมบูรณาการในชีวติ ประจำาวัน หน่วยท่ี 5 ผลงาน/ชิ้นงาน/ผลสำเรจ็ ของผเู้ รียน ใบงาน แบบฝกึ หัด กิจกรรม

รายละเอียดการประเมนิ ผลการเรยี นรู้ • จุดประสงคเ์ ชิงพฤตกิ รรม ขอ้ ที่ 1 เขียนโครงรา่ งการสรา้ งตารางได้ 16. วิธีการประเมนิ : ทดสอบ 17. เคร่อื งมือ : แบบทดสอบ 18. เกณฑ์การให้คะแนน : เขียนโครงร่างการสร้างตารางได้ จะได้ 1 คะแนน • จุดประสงค์เชิงพฤตกิ รรม ข้อท่ี 2 สร้างตารางในเว็บเพจได้ 16. วิธีการประเมิน : ทดสอบ 17. เครือ่ งมือ : แบบทดสอบ 18. เกณฑ์การให้คะแนน : สร้างตารางในเว็บเพจได้ จะได้ 1 คะแนน • จดุ ประสงคเ์ ชิงพฤติกรรม ขอ้ ที่ 3 ใสข่ ้อมูลในตารางได้ 13. วธิ ีการประเมิน : ทดสอบ 14. เคร่ืองมือ : แบบทดสอบ 15. เกณฑก์ ารให้คะแนน : ใสข่ ้อมูลในตารางได้ จะได้ 1 คะแนน • จุดประสงค์เชิงพฤติกรรม ขอ้ ท่ี 4 เลอื กส่วนของตารางได้ 13. วธิ ีการประเมนิ : ทดสอบ 14. เครื่องมอื : แบบทดสอบ 15. เกณฑ์การให้คะแนน : เลอื กสว่ นของตารางได้ จะได้ 1 คะแนน • จดุ ประสงคเ์ ชิงพฤติกรรม ขอ้ ท่ี 5 ปรับแต่งรายละเอียดของตารางได้ 10. วธิ กี ารประเมนิ : ทดสอบ 11. เครื่องมอื : แบบทดสอบ 12. เกณฑก์ ารให้คะแนน : ปรับแตง่ รายละเอียดของตารางได้ จะได้ 1 คะแนน • จุดประสงคเ์ ชงิ พฤติกรรม ข้อท่ี 6 เรียงขอ้ มูลในตารางได้

1. วธิ ีการประเมนิ : ทดสอบ 2. เครื่องมอื : แบบทดสอบ 3. เกณฑ์การใหค้ ะแนน : เรียงข้อมลู ในตารางได้ จะได้ 1 คะแนน • จุดประสงค์เชงิ พฤติกรรม ข้อท่ี 7 เปลยี่ นแปลงจำนวนแถว คอลัมน์ได้ 2. วธิ กี ารประเมิน : ตรวจผลงาน 3. เครื่องมอื : แบบทดสอบ 4. เกณฑก์ ารให้คะแนน : เปล่ยี นแปลงจำนวนแถว คอลัมนไ์ ด้ จะได้ 1 คะแนน • จดุ ประสงค์เชงิ พฤตกิ รรม ข้อท่ี 8 ตกแต่งตารางได้ 1. วธิ ีการประเมิน : ทดสอบ 2. เครอ่ื งมอื : แบบทดสอบ 3. เกณฑก์ ารให้คะแนน : ตกแต่งตารางได้ จะได้ 1 คะแนน • จุดประสงค์เชงิ พฤตกิ รรม ข้อที่ 9 นำเทคนคิ การสร้างเว็บเพจมาประยกุ ตใ์ ชไ้ ด้ 1. วิธีการประเมนิ : ทดสอบ 2. เครอ่ื งมอื : แบบทดสอบ 3. เกณฑ์การให้คะแนน : นำเทคนิคการสรา้ งเว็บเพจมาประยกุ ต์ใช้ได้ จะได้ 1 คะแนน • จุดประสงคเ์ ชงิ พฤติกรรม ข้อท่ี 10 สร้างตารางบนเว็บเพจให้ถกู ต้องเหมาะสมกับความจำเปน็ ได้ 1. วธิ ีการประเมิน : ทดสอบ 2. เครอื่ งมอื : แบบทดสอบ 3. เกณฑก์ ารให้คะแนน : สร้างตารางบนเวบ็ เพจให้ถกู ต้องเหมาะสมกบั ความจำเปน็ ได้ จะได้ 1 คะแนน

ใบงานหน่วยท่ี 5 นักเรียนเข้าศกึ ษาบทเรียน เรอ่ื ง การสร้างตาราง 1. ใหน้ กั ศกึ ษาสร้างตารางดงั ต่อไปนี้ 2. ปรับปรุงแตง่ และรูปแบบเอกสารตามความเหมาะสม 3. แสดงผลงานออกทางโปรแกรมเวบ็ เบราวเ์ ซอร์ หรือกดแปน้ F12 4. บันทกึ ไฟล์ เสรจ็ แล้วส่งให้ครู แบบฝึกหัด หน่วยท่ี 5 คำชีแ้ จง จงทำเคร่ืองหมาย (X) ลงหนา้ ขอ้ ที่ถกู ต้อง

1. คำศัพท์ในขอ้ ใดทหี่ มายถึงการผสานเซลล์ ก. Spilts ข. Insert ค. Merges ง. Tatol Cell 2. การสรา้ งตารางใช้คำสงั่ ในขอ้ ใดต่อไปนี้ ก. Insert > Table ข. Insert > Form > Table ค. Insert > Object > Table ง. File > Table 3. ข้อใดกล่าวไมถ่ กู ต้องเกี่ยวกับการใช้ตารางในการสร้างเว็บเพจ ก. ตารางสามารถพิมพข์ ้อความลงได้ ข. ตารางสามารถผสานและแบ่งเซลล์ได้ ค. ตารางไม่สามารถแทรกรปู ภาพได้ ง. สามารถใสส่ ีเสน้ ขอบตารางได้ 4. Table Width คือการกำหนดค่าอะไรของตาราง ก. ความสูงของตาราง ข. เสน้ ขอบตาราง ค. ความกว้างของตาราง ง. จำนวนแถวของตาราง 5. การสรา้ งตารางต้องใชก้ ลมุ่ เครอ่ื งมอื ขอ้ ใด ก. Forms ข. Text ค. HTML ง. Common 6. การลบตารางที่ไม่ต้องการสามารถปฏบิ ัติตามขั้นตอนในขอ้ ใด ก. เลือกตารางทต่ี อ้ งการแล้วกดปมุ่ Delete ข. เลอื กตารางที่ต้องการแล้วกดปุ่ม Ctrl ค. เลอื กตารางทีต่ อ้ งการแลว้ กดปุ่ม Alt

ง. เลือกตารางท่ีตอ้ งการแลว้ กดปุ่ม Shift 7. ประโยชนข์ องการสร้างตารางคอื ขอ้ ใด ก. พิมพ์ขอ้ มูลได้มากที่สดุ ข. นำเสนอขอ้ มูลที่สวยงาม ค. แบง่ แยกงานได้ชดั เจน ง. สามารถใชใ้ นการคำนวณได้ 8. การกำหนด Properties Inspector ทีไ่ มต่ ้องการแสดงเส้นของตารางตอ้ งใส่ค่าลงในชอ่ ง Border ก. 0 ข. 1 ค. 2 ง. 3 9. ขัน้ แรกของการพิมพ์ข้อความลงในตาราง คือขอ้ ใด ก. คลิกเมนคู ำสั่ง Insert ก่อนทุกครัง้ ข. คลกิ เลอื กตารางท่ีตอ้ งการพิมพข์ ้อความ ค. ใสเ่ ส้นของตารางกอ่ น ง. คลิกเซลล์ท่ีต้องการจะพิมพ์ขอ้ ความ 10. คำศัพท์ในขอ้ ใดท่หี มายถงึ การแบง่ เซลล์ ก. Merges ข. Spilts ค. Insert ง. Table Cell กิจกรรมบูรณาการ 3D ฝกึ ทกั ษะภาคทฤษฎี หน่วยที่ 5 ตอนที่ 1 คำสัง่ ใหน้ กั เรยี นอธบิ ายสาระสำคัญตอ่ ไปน้ี การสรา้ งตารางบนเวบ็ ประกอบดว้ ยเนอื้ หาอะไรบา้ ง

กิจกรรมบรู ณาการจิตอาสา กจิ กรรม การสรา้ งเว็บไซต์ จดุ ประสงค์ เพอ่ื ใหม้ คี วามร้เู ก่ียวกบั การสร้างตารางและตกแต่งตาราง ภาระงาน 1. ใหน้ ักเรยี นแบง่ กลมุ่ กลุ่มละ 3 - 4 คน สรา้ งตารางมาหน่ึงหนา้ เวบ็ ไซต์ เนอื้ หาเก่ยี วกับทก่ี ลุ่มนักเรยี น สนใจ หาเน้ือหาเพิ่มเตมิ ในอินเทอร์เน็ต 2. นำเสนอช้นิ งานนี้ใหก้ ับรุ่นนอ้ ง และผทู้ ่สี นใจในการสรา้ งตารางบนเวบ็ ไซต์ กจิ กรรมบูรณาการเศรษฐกิจพอเพียง กจิ กรรม สรา้ งได้ ไมย่ าก จุดประสงค์ เพื่อใหน้ ักเรียนมคี วามรเู้ กยี่ วกบั การสรา้ งตารางบนเวบ็ ไซต์

ภาระงาน 1. ให้นกั เรยี นนำขอ้ มูลท่ไี ด้จากกจิ กรรมบรู ณาการจิตอาสามาทำเป็นรายงานโดยรายงานจะประกอบด้วย ข้อมลู เกีย่ วกับการสรา้ งตาราง ตกแตง่ ตาราง, ข้อมลู ,ผลการดำเนินงาน 2. ส่งรายงานเขา้ E-mail ของผู้สอน เพื่อเปน็ การลดการใชก้ ระดาษ กิจกรรมบูรณาการอาเซยี น คำสงั่ จงอธบิ ายรายละเอียดของการกำหนดลักษณะของตารางดังน้ี 1. Row ............................................................................................... 2. Columns ............................................................................................... 3. Merges ............................................................................................... 4. Properties Inspector ............................................................................................... 5. Border ............................................................................................... กิจกรรมบรู ณาการในชวี ติ ประจำาวัน หน่วยท่ี 5 คำสง่ั ให้นักเรยี นปฏิบัตติ ามดังนี้ 1. สำรวจและเก็บข้อมูลเกี่ยวการสรา้ งตาราง 2. หาข้อดขี ้อเสียของการสร้างตาราง แบบประเมนิ ผลการนำเสนอผลงาน ชอ่ื กลุ่ม……………………………………………ชน้ั ………………………ห้อง........................... รายช่ือสมาชิก 1……………………………………เลขท…่ี …. 2……………………………………เลขท…่ี …. 3……………………………………เลขท…ี่ …. 4……………………………………เลขท…่ี …. ท่ี รายการประเมนิ คะแนน ข้อคิดเหน็

32 1 1 เนอื้ หาสาระครอบคลมุ ชดั เจน (ความรู้เก่ียวกับเนื้อหา ความถูกต้อง ปฏิภาณในการตอบ และการแก้ไขปัญหาเฉพาะหน้า) 2 รปู แบบการนำเสนอ 3 การมีสว่ นรว่ มของสมาชิกในกลุม่ 4 บุคลิกลกั ษณะ กริ ยิ า ทา่ ทางในการพดู น้ำเสยี ง ซ่ึงทำให้ผู้ฟังมีความ สนใจ รวม ผปู้ ระเมิน………………………………………………… เกณฑก์ ารให้คะแนน 1. เนื้อหาสาระครอบคลมุ ชัดเจนถกู ตอ้ ง 3 คะแนน = มีสาระสำคญั ครบถว้ นถกู ตอ้ ง ตรงตามจดุ ประสงค์ 2 คะแนน = สาระสำคญั ไม่ครบถว้ น แต่ตรงตามจดุ ประสงค์ 1 คะแนน = สาระสำคญั ไม่ถกู ตอ้ ง ไม่ตรงตามจุดประสงค์ 2. รปู แบบการนำเสนอ 3 คะแนน = มีรปู แบบการนำเสนอทเ่ี หมาะสม มีการใชเ้ ทคนคิ ท่ีแปลกใหม่ ใชส้ อ่ื และเทคโนโลยี ประกอบการ นำเสนอที่น่าสนใจ นำวัสดใุ นทอ้ งถ่ินมาประยกุ ต์ใช้อยา่ งคุ้มคา่ และประหยัด 5 คะแนน = มีเทคนิคการนำเสนอท่แี ปลกใหม่ ใชส้ ่ือและเทคโนโลยีประกอบการนำเสนอทน่ี า่ สน ใจ แต ขาดการประยกุ ตใ์ ช้ วสั ดใุ นท้องถน่ิ 1 คะแนน = เทคนิคการนำเสนอไมเ่ หมาะสม และไมน่ า่ สนใจ 3. การมสี ว่ นร่วมของสมาชิกในกล่มุ 3 คะแนน = สมาชิกทุกคนมีบทบาทและมีส่วนร่วมกจิ กรรมกลุม่ 2 คะแนน = สมาชิกส่วนใหญ่มบี ทบาทและมสี ่วนรว่ มกจิ กรรมกลมุ่ 1 คะแนน = สมาชกิ สว่ นน้อยมบี ทบาทและมีสว่ นรว่ มกจิ กรรมกลุ่ม 4. ความสนใจของผ้ฟู ัง 3 คะแนน = ผูฟ้ ังมากกวา่ รอ้ ยละ 90 สนใจ และใหค้ วามรว่ มมือ 2 คะแนน = ผูฟ้ ังรอ้ ยละ 70-90 สนใจ และใหค้ วามรว่ มมือ 1 คะแนน = ผู้ฟงั น้อยกว่ารอ้ ยละ 70 สนใจ และใหค้ วามร่วมมือ แบบประเมินกระบวนการทำงาน ช่อื กลมุ่ ……………………………………………ช้ัน………………………ห้อง........................... รายชือ่ สมาชิก 2……………………………………เลขท…ี่ …. 4……………………………………เลขท…่ี …. 1……………………………………เลขท…ี่ …. 3……………………………………เลขท…ี่ …. ที่ รายการประเมนิ คะแนน ขอ้ คิดเหน็ 321

1 การกำหนดเป้าหมายร่วมกัน 2 การแบ่งหนา้ ท่รี บั ผดิ ชอบและการเตรียมความพร้อม 3 การปฏบิ ัติหนา้ ท่ีที่ไดร้ ับมอบหมาย 4 การประเมินผลและปรับปรุงงาน รวม ผู้ประเมนิ ………………………………………………… วันท…ี่ ………เดือน……………………..พ.ศ…………... เกณฑ์การใหค้ ะแนน 1. การกำหนดเป้าหมายร่วมกนั 3 คะแนน = สมาชกิ ทุกคนมีสว่ นร่วมในการกำหนดเป้าหมายการทำงานอยา่ งชัดเจน 2 คะแนน = สมาชิกสว่ นใหญ่มีสว่ นร่วมในการกำหนดเปา้ หมายในการทำงาน 1 คะแนน = สมาชิกส่วนน้อยมีสว่ นร่วมในการกำหนดเป้าหมายในการทำงาน 2. การหน้าท่รี ับผิดชอบและการเตรียมความพร้อม 3 คะแนน = กระจายงานไดท้ ว่ั ถึง และตรงตามความสามารถของสมาชกิ ทกุ คน มกี ารจดั เตรยี มสถานท่ี สื่อ / อุปกรณ์ไว้อยา่ งพรอ้ มเพรยี ง 2 คะแนน = กระจายงานได้ท่ัวถงึ แต่ไมต่ รงตามความสามารถ และมีสอื่ / อปุ กรณ์ไวอ้ ยา่ งพรอ้ มเพรยี ง แตข่ าด การจัดเตรียมสถานที่ 1 คะแนน = กระจายงานไม่ทวั่ ถงึ และมีสือ่ / อุปกรณ์ไมเ่ พยี งพอ 3. การปฏบิ ตั หิ น้าทที่ ไ่ี ด้รับมอบหมาย 3 คะแนน = ทำงานไดส้ ำเรจ็ ตามเปา้ หมาย และตามเวลาทกี่ ำหนด 2 คะแนน = ทำงานได้สำเรจ็ ตามเปา้ หมาย แต่ช้ากวา่ เวลาทกี่ ำหนด 1 คะแนน = ทำงานไม่สำเร็จตามเป้าหมาย 4. การประเมนิ ผลและปรับปรงุ งาน 3 คะแนน = สมาชิกทกุ คนรว่ มปรกึ ษาหารอื ติดตาม ตรวจสอบ และปรับปรงุ งานเป็นระยะ 2 คะแนน = สมาชกิ บางส่วนมีสว่ นร่วมปรกึ ษาหารอื แต่ไมป่ รบั ปรุงงาน 1 คะแนน = สมาชกิ บางส่วนมีส่วนร่วมไมม่ ีสว่ นรว่ มปรึกษาหารือ และปรับปรุงงาน

หน่วยท่ี 5 การสรา้ งตาราง เฉลยแบบฝกึ หดั หนว่ ยท่ี 5 1. คำศพั ท์ในขอ้ ใดทหี่ มายถึงการผสานเซลล์ ตอบ ค. Merges 2. การสร้างตารางใช้คำส่ังในข้อใดตอ่ ไปน้ี ตอบ ก. Insert > Table 3. ขอ้ ใดกลา่ วไมถ่ กู ตอ้ งเกย่ี วกับการใช้ตารางในการสร้างเวบ็ เพจ ตอบ ค. ตารางไม่สามารถแทรกรปู ภาพได้ 4. Table Width คอื การกำหนดคา่ อะไรของตาราง ตอบ ค. ความกว้างของตาราง 3. การสรา้ งตารางต้องใช้กลมุ่ เคร่อื งมือขอ้ ใด ตอบ ก. Forms 4. การลบตารางท่ีไม่ต้องการสามารถปฏิบัตติ ามขน้ั ตอนในข้อใด ตอบ ก. เลือกตารางท่ีต้องการแล้วกดปุม่ Delete 5. ประโยชน์ของการสรา้ งตารางคือข้อใด ตอบ ค. แบง่ แยกงานไดช้ ัดเจน 5. การกำหนด Properties Inspector ทไ่ี ม่ต้องการแสดงเสน้ ของตารางตอ้ งใส่ค่าลงในชอ่ ง Border ตอบ ก. 0 6. ขนั้ แรกของการพิมพ์ขอ้ ความลงในตาราง คอื ขอ้ ใด ตอบ ข. คลกิ เลือกตารางท่ตี ้องการพมิ พข์ ้อความ 7. คำศพั ท์ในข้อใดทห่ี มายถงึ การแบง่ เซลล์ ตอบ ข. Spilts

บนั ทึกหลงั การสอน หน่วยท่ี 5 การสรา้ งตาราง ผลการใชแ้ ผนการสอน 13. เนื้อหาสอดคลอ้ งกบั จดุ ประสงคเ์ ชิงพฤติกรรม 14. กิจกรรมการสอนเหมาะสมกบั เนอื้ หาและเวลาท่ีกำหนด 15. สือ่ การสอนเหมาะสมดี ผลการเรยี นของนักเรียน ใบ 13. นกั ศกึ ษาส่วนใหญ่มีความเขา้ ใจในบทเรียน อภปิ รายตอบคำถามในกล่มุ และรว่ มกนั ปฏิบตั ิ งานทไี่ ดร้ ับมอบหมาย 14. นักศกึ ษากระตือรอื รน้ และรับผิดชอบในการทำงานกลุม่ เพ่ือใหง้ านสำเร็จทนั เวลาทก่ี ำหนด 15. นักศกึ ษาสรา้ งตารางลงบนเว็บเพจได้ ผลการสอนของครู 10. สอนเน้อื หาได้ครบตามหลกั สูตร 11. แผนการสอนและวิธกี ารสอนครอบคลุมเน้อื หาการสอนทำให้ผู้สอนสอนได้อยา่ งมนั่ ใจ 12. สอนทันตามเวลาทกี่ ำหนด

แผนการสอน/แผนการเรยี นรภู้ าคทฤษฎี แผนการสอน/การเรยี นรู้ภาคทฤษฎี หน่วยท่ี 6 ชอื่ วชิ า การสรา้ งเว็บไซต์ สอนสัปดาหท์ ี่ 8 ช่อื หนว่ ย การสร้างจุดเชือ่ มโยง คาบรวม 32 ช่อื เรอ่ื ง การสร้างจุดเช่ือมโยง จำนวนคาบ 4 หัวขอ้ เรอื่ ง ดา้ นความรู้ 1. ระบคุ ุณสมบัตกิ ารเชอ่ื มโยงได้ ด้านทักษะ 2. สรา้ งจุดเช่อื มโยงได้ 3. เชื่อมโยงภายในเวบ็ ไซต์เดียวกนั ได้ 4. เชอื่ มโยงไปยังเวบ็ ไซต์อื่นได้ 5. เชือ่ มโยงไปยังอเี มล์ได้ 6. เช่อื มโยงโดย Map Link ได้ 7. แกไ้ ขการเช่อื มโยงเว็บเพจได้ ดา้ นจติ พิสยั 8. รเิ รม่ิ จดุ เช่อื มโยงบนเว็บเพจได้ ด้านคณุ ธรรม จรยิ ธรรม 9. เชื่อมโยงบนเว็บเพจได้อยา่ งถูกต้องเหมาะสม สาระสำคญั การสร้างจุดเชื่อมโยง (Hyperlink) เป็นการเชื่อมโยงกันจากจุดหนึ่งของเอกสารไปยังอีกตำแหน่งหนึ่ง ของเอกสารเดียวกันหรอื ตา่ งเอกสารกนั บนอนิ เทอร์เน็ต โดยใช้ข้อความภาพ หรอื เมนแู บบดรอ็ ปดาวน์อยา่ งใดอยา่ ง หนึ่ง เพื่อเป็นต้นทางในการเชื่อมโยงไปสู่เอกสารปลายทาง ซึ่งอาจเป็นจุดใดจุดหนึ่งในเอกสารเดียวกัน (Named Anchor), เว็บเพจอื่น ๆ, เว็บไซต์, อีเมล, หรือแม้แต่ไฟล์ขอ้ มูลสำหรับดาวน์โหลดและการรันไฟล์โปรแกรม เป็น ต้น สมรรถนะอาชีพประจำหนว่ ย 4. สรา้ งจุดเชอ่ื มโยงบนเวบ็ เพจ

จดุ ประสงคก์ ารสอน/การเรียนรู้ • จุดประสงคท์ ่ัวไป / บรู ณาการเศรษฐกิจพอเพยี ง 1. เพ่ือใหม้ ีความรู้เกยี่ วกับการระบุคุณสมบัติการเชื่อมโยง (ด้านความรู้) 2. เพื่อให้มีทกั ษะในการสร้างจดุ เชอ่ื มโยง (ดา้ นทักษะ) 3. เพื่อใหม้ ที ักษะในการเชื่อมโยงภายในเว็บไซตเ์ ดยี วกัน (ด้านทกั ษะ) 4. เพอื่ ใหม้ ที ักษะในการเชอ่ื มโยงไปยังเวบ็ ไซตอ์ ื่น (ด้านทักษะ) 5. เพื่อใหม้ ที กั ษะในการเชอ่ื มโยงไปยังอีเมล์ (ด้านทักษะ) 6. เพอ่ื ให้มีทักษะในการเชอื่ มโยงโดย Map Link (ด้านทกั ษะ) 7. เพอ่ื ใหม้ ที ักษะในการแก้ไขการเชื่อมโยงเวบ็ เพจ (ดา้ นทกั ษะ) 8. เพอ่ื ให้มเี จตคติท่ีดตี อ่ การริเริ่มจุดเชื่อมโยงบนเว็บเพจ (ด้านจิตพสิ ยั ) 9. เพอื่ เชอ่ื มโยงบนเว็บเพจไดอ้ ยา่ งถกู ตอ้ งเหมาะสม (ดา้ นคุณธรรม จริยธรรม) • จดุ ประสงคเ์ ชิงพฤตกิ รรม / บรู ณาการเศรษฐกิจพอเพยี ง 1. ระบคุ ณุ สมบัตกิ ารเชอื่ มโยงได้ (ด้านความร)ู้ 2. สร้างจุดเชื่อมโยงได้ (ด้านทกั ษะ) 3. เชอื่ มโยงภายในเวบ็ ไซตเ์ ดียวกนั ได้ (ดา้ นทกั ษะ) 4. เชื่อมโยงไปยังเวบ็ ไซตอ์ น่ื ได้ (ด้านทักษะ) 5. เชื่อมโยงไปยังอเี มล์ได้ (ดา้ นทักษะ) 6. เชอ่ื มโยงโดย Map Link ได้ (ด้านทักษะ) 7. แกไ้ ขการเชือ่ มโยงเวบ็ เพจได้ (ด้านทกั ษะ) 8. ริเริม่ จุดเช่ือมโยงบนเวบ็ เพจได้ (ด้านจิตพิสยั ) 9. เช่ือมโยงบนเวบ็ เพจได้อย่างถูกต้องเหมาะสม (ดา้ นคณุ ธรรม จรยิ ธรรม) เนื้อหาสาระการสอน/การเรยี นรู้ • ด้านความรู้(ทฤษฎ)ี 1. การสร้างจุดเชอื่ มโยง

การสร้างจุดเชื่อมโยง (Hyperlink) เป็นการเชื่อมโยงกันจากจุดหนึ่งของเอกสารไปยังอีกตำแหน่งหนึ่ง ของเอกสารเดยี วกันหรือต่างเอกสารกนั บนอินเทอร์เน็ต โดยใช้ข้อความ ภาพ หรือเมนูแบบดรอ็ ปดาวน์อย่างใด อย่างหนึ่งเพื่อเป็นต้นทางในการเชื่อมโยงไปสู่เอกสารปลายทาง ซึ่งอาจเป็นจุดใดจุดหนึ่งในเอกสารเดียวกัน (Named Anchor), เว็บเพจอื่น ๆ, เว็บไซต์, อีเมล์, หรือแม้แต่ไฟล์ข้อมูลสำหรับดาวน์โหลดและการรันไฟล์ โปรแกรม เป็นต้น การกำหนดเปา้ หมายการเชอื่ มโยง ในกรณีทเ่ี วบ็ เพจมีเน้อื หายาว ๆ แสดงผลไม่พอกบั จอภาพ ผู้อา่ นจะตอ้ งเลอ่ื นหน้าจอเพื่อดขู ้อมลู ด้านล่าง ทำให้ไม่สะดวกเท่าที่ควร ผู้ออกแบบเว็บเพจควรกำหนดการเชื่อมโยงโดยสร้างเป็นหัวเรื่องแยกไว้ต่างหาก เมื่อ ผู้อา่ นตอ้ งการทราบขอ้ มูลเร่อื งนน้ั สามารถคลิกทีห่ ัวเรอื่ งและเช่อื มโยงไปยงั เนอื้ เร่ืองน้นั ทนั ทีการเช่ือมโยงในหน้า เว็บเพจเดยี วกัน ขั้นตอนแรกจะต้องกำหนดจุดเป้าหมาย (Anchor Point) ว่าจะให้เชื่อมโยงไปทีต่ ำแหน่งใดของ หน้า ซึ่งมีขั้นตอนดังนี้ - คลกิ ทีร่ ูปภาพ ตาราง หรอื ขอ้ ความท่ีต้องการจะเปน็ จดุ เปา้ หมาย - เลอื กคำสง่ั Insert >> Name Anchor หรอื ใช้แป้น < Ctrl > + < Alt > + < A > หรือใชเ้ ครอ่ื งมือ บนกลมุ่ เครื่องมือ Common จะได้หนา้ ต่าง Name Anchor - ตง้ั ช่ือจดุ เป้าหมาย - คลิก OK จะปรากฏรปู สมอเรอื กำกับอย่ทู ่ีจุดเปา้ หมาย การสร้างการเชอ่ื มโยงไปยังเปา้ หมาย - เมื่อได้เป้าหมายแล้ว ขั้นต่อไปก็จะต้องสร้างการเชื่อมโยงให้ตรงกับเป้าหมาย ดังนี้เลือกข้อความ ภาพ หรือ ตำแหน่งท่ีจะทำการเชือ่ มโยง

- ไปที่ Properties ในชอ่ ง Link ให้พมิ พ์เคร่ืองหมาย # ตามด้วยชอ่ื Anchor ทไี่ ด้ตง้ั ไว(้ ตามตัวอย่าง คือ #email) เสร็จแล้วกด < Enter > - ตรงจดุ เชอ่ื มโยงจะปรากฏอกั ษรสนี ้ำเงนิ และขดี เส้นใตข้ นึ้ มา - กดแปน้ < F12 > เพ่อื ดูผลด้วยเวบ็ บราวเซอร์ - เมื่อเลือ่ นเมาสไ์ ปตรงจุดลงิ ค์ เมาสจ์ ะเป็นรูปมือ คลิกเมาส์จะเล่อื นไปยงั จุดเป้าหมาย 2. การเชื่อมโยงภายในเวบ็ ไซตเ์ ดียวกัน การสร้างจุดเชื่อมโยง (Hyperlink) เป็นการเชื่อมโยงกันจากจุดหนึ่งของเอกสารไปยังอีกตำแหน่งหนึ่ง ของเอกสารเดียวกันหรือต่างเอกสารกันบนอินเทอร์เน็ต โดยใช้ข้อความ ภาพหรือเมนูแบบดร็อปดาวน์อย่างใด อย่างหนึ่งเพื่อเป็นต้นทางในการเชื่อมโยงไปสู่เอกสารปลายทาง ซึ่งอาจเป็นจุดใดจุดหนึ่งในเอกสารเดียวกัน (Named Anchor), เว็บเพจอื่น ๆ, เว็บไซต์, อีเมล, หรือแม้แต่ไฟล์ข้อมูลสำหรับดาวน์โหลดและการรันไฟล์ โปรแกรม เปน็ ตน้ การกำหนดเปา้ หมายการเชอ่ื มโยง

เป็นการเชอื่ มโยงในเวบ็ เพจเดียวกัน หรอื ลงิ ค์ไปยังไฟล์อีกไฟลท์ อ่ี ยใู่ นเวบ็ ไซตเ์ ดียวกนั โดยให้เปิดไฟล์นั้น ขึ้นมาทัง้ ไฟล์ เช่น จากหน้าแรกให้ลิงคไ์ ปยงั หนา้ สินคา้ ใหม่ เปน็ ต้น การเช่ือมโยงในเว็บไซต์เดียวกนั มวี ธิ ีการดังน้ี - เลือกขอ้ ความ รูปภาพ ตาราง หรอื วตั ถทุ ี่ใชเ้ ป็นจดุ เชื่อมโยง - คลิกที่ไอคอน ดา้ นขวามอื ของช่อง Link เพื่อเลอื กไฟล์ (ถา้ จำชือ่ ไฟลไ์ ด้ให้พิมพ์ช่ือไฟล์ลงไป ในช่อง Link ได้เลย) - จะไดห้ น้าตา่ ง Select File เลือกไฟล์ทตี่ อ้ งการ แล้วคลิก OK - ช่ือไฟล์ที่ลงิ คก์ ็จะปรากฏอยู่ในช่องลิงค์ - บันทึกไฟล์ และแสดงผลบนเว็บบราวเซอรด์ ้วยแปน้ < F12 > - ลองคลกิ ทต่ี ำแหนง่ ท่ีกำหนดการเช่ือมโยง บราวเซอรจ์ ะแสดงผลหนา้ เว็บท่ีถูกลงิ ค์ไปทันที (ควรทำ ลิงค์ 2 ทางเพ่อื ผู้ใชจ้ ะได้คลิกกลับไปยังหน้าแรกได้ด้วย) 3. การเช่อื มโยงไปยงั เว็บไซตอ์ ื่น การกำหนดการเชื่อมโยงไปยังเว็บไซต์อืน่ ๆ ที่เกี่ยวข้อง เพื่อต้องการให้ผู้ชมศกึ ษาข้อมูลเพ่ิมเติม โดยมี วิธีการดังต่อไปนี้ 1. เลือกองคป์ ระกอบทจี่ ะใช้สรา้ งไฮเปอร์ลิงค์ เช่น ข้อความ หรอื ภาพ 2. พิมพ์ URL ของเว็บไซตป์ ลายทาง เชน่ http://www.google.co.th 3. เลอื กเฟรมเป้าหมายทจี่ ะแสดงในเวบ็ เพจ 4. ทดสอบการเช่ือมโยงโดยกดคีย์ F12 เพื่อดกู ารแสดงผลจากเว็บบราวเซอร์ 4. การเชือ่ มโยงไปยงั อเี มล์