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

จากการเรียน เร่ือง การสรา้ งฟอร์ม ทำใหผ้ เู้ รียนมคี วามรเู้ พมิ่ เกยี่ วกบั ลักษณะของฟอรม์ ท่ีทำงานบนเว็บ เพจเรยี กวา่ “ไดนามกิ เว็บเพจ” (Dynamic Web) หมายถงึ เวบ็ เพจทีม่ ีการโตต้ อบกับผใู้ ช้ เชน่ แบบฟอรม์ สมัคร สมาชิก แบบฟอรม์ สอบถามความคดิ เห็นแบบฟอรม์ ค้นหาขอ้ มูล เป็นตน้ สื่อการเรยี นการสอน/การเรยี นรู้ สอื่ สิง่ พิมพ์ 40. เอกสารประกอบการสอนวิชา การสร้างเว็บไซต์ (ใชป้ ระกอบการเรียนการสอนจดุ ประสงค์เชงิ พฤติกรรมข้อท่ี 1-12) 41. ใบความร้ทู ่ี 9 เร่ือง การสร้างฟอรม์ (ใช้ประกอบการเรยี นการสอนขน้ั ให้ความรู้ เพอ่ื ใหบ้ รรลุ จุดประสงคเ์ ชงิ พฤติกรรมขอ้ ท่ี 1-12) 42. ใบงานท่ี 9 เรอื่ ง การสร้างฟอรม์ ขนั้ ประยกุ ตใ์ ช้ 1

43. แบบฝกึ หดั หนว่ ยท่ี 9 การสรา้ งฟอร์ม ขน้ั ประยกุ ตใ์ ช้ 2 44. กิจกรรมบรู ณาการอาเซียน ใช้ประกอบการสอนขน้ั สรปุ และประเมินผล ข้อ 2 45. แบบประเมนิ ผลงานตามใบงาน ใช้ประกอบการสอนขนั้ ประยุกต์ใช้ ข้อ 1 46. แบบประเมนิ พฤตกิ รรมการทำงาน ใช้ประกอบการสอนขนั้ สรุป ส่อื โสตทศั น์ (ถา้ ม)ี 3. เอกสารประกอบการสอน เรือ่ ง การสรา้ งฟอร์ม สือ่ ของจริง การสร้างฟอร์ม (ใช้ประกอบการเรียนการสอนจดุ ประสงคเ์ ชิงพฤตกิ รรมขอ้ ที่ 1-12) แหลง่ การเรยี นรู้ ในสถานศึกษา 3. ห้องสมดุ วิทยาลยั เทคนิคสมุทรสาคร 4. หอ้ งปฏบิ ัตกิ ารคอมพวิ เตอร์ ศกึ ษาหาข้อมูลทางอินเทอรเ์ นต็ นอกสถานศึกษา

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

25. สังเกตการทำงาน หลังเรยี น 16. ทำแบบฝกึ หัด หนว่ ยท่ี 9 17. ทำกิจกรรมบูรณาการอาเซียน ผลงาน/ชน้ิ งาน/ผลสำเร็จของผู้เรียน ใบงาน แบบฝึกหัด กิจกรรม

รายละเอียดการประเมินผลการเรยี นรู้ • จดุ ประสงค์เชิงพฤตกิ รรม ขอ้ ท่ี 1 บรรยายเกี่ยวกับการสรา้ งฟอรม์ ได้ 28. วิธีการประเมนิ : ทดสอบ 29. เครือ่ งมือ : แบบทดสอบ 30. เกณฑ์การให้คะแนน : บรรยายเก่ียวกบั การสรา้ งฟอรม์ ได้ จะได้ 0.5 คะแนน • จุดประสงคเ์ ชิงพฤติกรรม ขอ้ ท่ี 2 สรปุ ทำงานของฟอร์ม (From) และเครอื่ งมือในการสร้างฟอร์มได้ 28. วิธกี ารประเมิน : ทดสอบ 29. เครือ่ งมอื : แบบทดสอบ 30. เกณฑก์ ารใหค้ ะแนน : สรปุ ทำงานของฟอรม์ (From) และเครือ่ งมือในการสร้างฟอรม์ ได้ จะได้ 0.5 คะแนน • จุดประสงค์เชงิ พฤติกรรม ขอ้ ท่ี 3 สร้างฟอรม์ และฟลิ ดก์ รอกข้อความได้ 22. วธิ ีการประเมิน : ทดสอบ 23. เครอื่ งมอื : แบบทดสอบ 24. เกณฑก์ ารให้คะแนน : สรา้ งฟอรม์ และฟิลด์กรอกข้อความได้ จะได้ 1 คะแนน • จุดประสงค์เชิงพฤติกรรม ขอ้ ที่ 4 สรา้ งรายการตัวเลือก (List/Menu) ได้ 25. วธิ ีการประเมนิ : ทดสอบ 26. เครื่องมอื : แบบทดสอบ 27. เกณฑ์การให้คะแนน : สร้างรายการตัวเลอื ก (List/Menu) ได้ จะได้ 1 คะแนน • จดุ ประสงค์เชงิ พฤตกิ รรม ข้อที่ 5 สรา้ งพื้นท่รี บั ข้อความได้ 11. วิธกี ารประเมนิ : ตรวจผลงาน 12. เคร่อื งมือ : แบบประเมนิ กระบวนการทำงานกล่มุ 13. เกณฑก์ ารให้คะแนน : สรา้ งพนื้ ท่ีรับข้อความได้ จะได้ 1 คะแนน • จุดประสงค์เชงิ พฤติกรรม ขอ้ ที่ 6 สรา้ ง Radio Button ได้

16. วธิ ีการประเมิน : ตรวจผลงาน 17. เครือ่ งมอื : แบบประเมินกระบวนการทำงานกลมุ่ 18. เกณฑ์การให้คะแนน : สรา้ ง Radio Button ได้ จะได้ 1 คะแนน • จดุ ประสงคเ์ ชงิ พฤตกิ รรม ข้อท่ี 7 สร้าง checkbox ได้ 1. วิธกี ารประเมิน : ทดสอบ 2. เครอ่ื งมือ : แบบทดสอบ 3. เกณฑก์ ารให้คะแนน : สรา้ ง checkbox ได้ จะได้ 1 คะแนน • จุดประสงคเ์ ชงิ พฤติกรรม ขอ้ ท่ี 8 สรา้ ง File Field ได้ 1. วิธีการประเมนิ : ทดสอบ 2. เครือ่ งมอื : แบบทดสอบ 3. เกณฑก์ ารให้คะแนน : สรา้ ง File Field ได้ จะได้ 1 คะแนน • จดุ ประสงคเ์ ชงิ พฤตกิ รรม ข้อที่ 9 สรา้ งปมุ่ มาตรฐานได้ 1. วธิ ีการประเมิน : ทดสอบ 2. เครอ่ื งมอื : แบบทดสอบ 3. เกณฑ์การให้คะแนน : สรา้ งปุม่ มาตรฐานได้ จะได้ 1 คะแนน • จุดประสงคเ์ ชงิ พฤตกิ รรม ข้อที่ 10 สร้าง Jump menu ได้ 1. วิธีการประเมนิ : ทดสอบ 2. เครือ่ งมือ : แบบทดสอบ 3. เกณฑก์ ารให้คะแนน : สร้าง Jump menu ได้ จะได้ 1 คะแนน • จดุ ประสงค์เชงิ พฤตกิ รรม ขอ้ ที่ 11 นำการสร้างสรา้ งฟอรม์ มาประยุกต์ใช้ได้ 1. วิธีการประเมิน : ตรวจผลงาน

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

ใบงานหน่วยที่ 9 ตอนท่ี 1 ใหน้ กั เรียนตอบคำถามต่อไปน้ี 1. จงอธิบายการทำงานของฟอร์ม (Form) และเครอ่ื งมือในการสร้างฟอรม์ มาครา่ ว ๆ พอเข้าใจ ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... 2. จงบอกการสร้างพืน้ ที่รบั ข้อความ มาเป็นขอ้ ๆ ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... 3. ขั้นตอนการสร้างปุ่มมาตรฐาน มกี ีข่ นั้ ตอน จงอธบิ าย .....................................................................................................................................

..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... 4. จงอธิบายการตรวจสอบการป้อนข้อมูลของฟอร์ม ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... แบบฝึกหัด หน่วยที่ 9 คำชแี้ จง จงทำเคร่อื งหมาย (X) ลงหน้าขอ้ ที่ถกู ต้อง 1. ลกั ษณะของฟอรม์ ทท่ี ำงานบนเว็บเพจเรียกว่าอะไร

i. Static web ii. Startic web iii. Dynamic web iv. Dynamo web 2. นคี่ ือเครือ่ งมอื อะไร i. Text Field ii. Text area iii. Radio Button iv. List/Menu 3. นีค่ อื เครอื่ งมอื อะไร i. Text Field ii. Text area iii. Radio Button iv. List/Menu 4. นค่ี อื เคร่ืองมอื อะไร i. Text Field ii. Text area iii. Radio Button iv. List/Menu 5. น่คี ือเคร่อื งมอื อะไร i. Text Field ii. Text area iii. Radio Button iv. List/Menu 6. น่ีคือเครือ่ งมืออะไร i. Check Box ii. Label iii. File Field iv. Text Field

7. นคี่ ือเครือ่ งมอื อะไร i. File Field ii. Fieldset iii. Text Field iv. Label 8. คำสงั่ ทใ่ี หด้ ังต่อไปนถ้ี า้ เลือกเปน็ ไอคอน คือ ไอคอนใด Insert>> Form >> Jump Menu 9. ขอ้ ใดคือความหมายของ Jumb Menu i. เปน็ ปมุ่ สำหรบั ยนื ยนั ขอ้ มลู ภายในฟอรม์ ii. เป็นฟิลดส์ ำหรบั ใส่ข้อความอธิบายกำกบั ฟิลด์ iii. เป็นการออกแบบฟอร์มใหล้ ิงคไ์ ปยงั เว็บไซต์ หรอื URL ทต่ี ้องการ iv. เปน็ ฟลิ ด์สำหรับนำภาพกราฟกิ มาใช้แทนปมุ่ Submit ของฟอรม์ 10. ขอ้ ใดคอื ความหมายของ Image Field i. เป็นปุม่ สำหรับยืนยันขอ้ มลู ภายในฟอร์ม ii. เป็นฟลิ ดส์ ำหรบั ใส่ข้อความอธบิ ายกำกบั ฟลิ ด์ iii. เปน็ การออกแบบฟอร์มให้ลงิ ค์ไปยงั เว็บไซต์ หรือ URL ทตี่ อ้ งการ iv. เปน็ ฟิลด์สำหรับนำภาพกราฟิกมาใช้แทนปุม่ Submit ของฟอร์ม กจิ กรรมบรู ณาการอาเซยี น คำสงั่ ใหน้ ักเรยี นเลอื กคำท่ีให้ดังตอ่ ไปนีไ้ ปใสห่ น้าประโยคหรือความหมายให้ถกู ตอ้ ง

แบบประเมนิ ผลการนำเสนอผลงาน ชอ่ื กลุ่ม……………………………………………ชั้น………………………ห้อง........................... รายช่ือสมาชกิ 1……………………………………เลขท…่ี …. 2……………………………………เลขที่……. 3……………………………………เลขท…ี่ …. 4……………………………………เลขท่ี…….

ที่ รายการประเมิน คะแนน ข้อคดิ เห็น 32 1 1 เน้อื หาสาระครอบคลุมชัดเจน (ความรเู้ กย่ี วกบั เนือ้ หา ความถกู ตอ้ ง ปฏภิ าณในการตอบ และการแก้ไขปญั หาเฉพาะหน้า) 2 รูปแบบการนำเสนอ 3 การมสี ว่ นร่วมของสมาชกิ ในกลมุ่ 4 บคุ ลกิ ลักษณะ กิริยา ทา่ ทางในการพดู นำ้ เสยี ง ซ่ึงทำใหผ้ ู้ฟังมีความ สนใจ รวม ผู้ประเมิน………………………………………………… เกณฑก์ ารใหค้ ะแนน 1. เนอ้ื หาสาระครอบคลุมชัดเจนถูกต้อง 3 คะแนน = มีสาระสำคญั ครบถว้ นถกู ตอ้ ง ตรงตามจุดประสงค์ 2 คะแนน = สาระสำคญั ไมค่ รบถ้วน แตต่ รงตามจดุ ประสงค์ 1 คะแนน = สาระสำคญั ไม่ถกู ตอ้ ง ไม่ตรงตามจุดประสงค์ 2. รปู แบบการนำเสนอ 3 คะแนน = มรี ปู แบบการนำเสนอท่เี หมาะสม มีการใชเ้ ทคนคิ ท่แี ปลกใหม่ ใชส้ ่อื และเทคโนโลยี ประกอบการ นำเสนอทีน่ า่ สนใจ นำวัสดุในท้องถ่ินมาประยุกต์ใชอ้ ย่างคุม้ คา่ และประหยัด 8 คะแนน = มเี ทคนิคการนำเสนอท่แี ปลกใหม่ ใช้สื่อและเทคโนโลยปี ระกอบการนำเสนอทีน่ า่ สน ใจ แต่ ขาด การประยุกต์ใช้ วัสดใุ นท้องถ่ิน 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 คะแนน = สมาชกิ บางสว่ นมสี ว่ นร่วมไม่มสี ่วนร่วมปรกึ ษาหารือ และปรบั ปรุงงาน หน่วยที่ 9 การสรา้ งฟอรม์ เฉลยใบงาน หน่วยท่ี 9 คำชแ้ี จง ให้นกั เรียนตอบคำถามต่อไปน้ี 1. จงอธิบายการทำงานของฟอร์ม (Form) และเครือ่ งมือในการสรา้ งฟอรม์ มาคร่าว ๆ พอเขา้ ใจ ตอบ ฟอร์ม (Form) เป็นเครื่องมือที่ช่วยทำให้เกิดปฏิสัมพันธ์ระหว่างผู้ใช้งานกับเว็บไซต์โดยใช้ฟิลด์ Fieldชนดิ ต่าง ๆ เชน่ Text Field, Button, Check Boxในการรับขอ้ มลู จากผู้ใชเ้ พอ่ื นำไปผ่านการประมวลผล ใน Server ลักษณะของฟอรม์ ที่ทำงานบนเว็บเพจ เรยี กวา่ “ ไดนามิกเวบ็ เพจ ” (Dynamic Web) หมายถึง เว็บ เพจที่มีการโต้ตอบกับผู้ใช้ เช่น แบบฟอร์มสมัครสมาชิก แบบฟอร์มสอบถามความคิดเห็น แบบฟอร์มค้นหา ขอ้ มูล เป็นตน้

หลักการทำงานของฟอร์มบนไดนามิกเว็บเพจ คือจะต้องสร้างฟอร์มไว้บนเวบ็ เพจเม่ือผู้ใชก้ รอกขอ้ มูล และส่งข้อมูลเข้ามายังเว็บเซิร์ฟเวอร์ เซิร์ฟเวอร์จะค้นหาเว็บเพจและส่งข้อมูลไปยังแอพพลิเคชัน เซิร์ฟเวอร์ เซิร์ฟเวอร์จะประมวลผลขอ้ มูลทีไ่ ด้รับ แลว้ สง่ ผ่านหนา้ เว็บท่ีประมวลผลแลว้ ไปยงั เว็บเซริ ฟ์ เวอร์ แล้วส่งผลลัพธ์ ท่ไี ดไ้ ปยังเบราวเ์ ซอรอ์ กี ครั้ง 2. จงบอกการสร้างพน้ื ทีร่ บั ข้อความมาเปน็ ข้อ ๆ ตอบ ในกรณีทต่ี ้องพมิ พ์ขอ้ ความยาว ๆ เช่น ทีอ่ ยู่ผู้สมัคร ไมส่ ามารถพิมพ์ด้วย Text Field ปกติ จะต้องสรา้ งพน้ื ทร่ี บั ขอ้ ความ หรอื Text area ขน้ึ มา ดงั น้ี 1. คลกิ ท่ีตำแหน่งที่จะสรา้ ง Text area แล้วคลกิ ทท่ี ูลบาร์ Text area ( ) ต้งั ชือ่ Label เป็น “ ทีอ่ ยู่ ” แลว้ คลกิ OK 2. กำหนดรายละเอยี ดของพื้นที่ Properties เช่น ความยาวตัวอักษร 30 ตวั ตอ่ บรรทัดจำนวน 5 บรรทดั เป็นตน้ 3. สร้าง Text Field “เลือกจงั หวัด” และ “รหสั ไปรษณีย์” โดยกำหนดใหร้ หัสไปรษณยี ์เปน็ ตัวเลข 6หลัก 3. ขั้นตอนการสร้างปมุ่ มาตรฐาน มีกข่ี น้ั ตอน จงอธบิ าย ตอบ 1. สรา้ งขอบเขตของฟอร์มเพือ่ สรา้ งปุ่มมาตรฐาน 2. คลิกทีเ่ ครื่องมอื Button และตงั้ ช่อื ทชี่ อ่ ง Label แลว้ คลิก OK (ถา้ ไม่ตั้งชอื่ ปุ่มใหค้ ลกิ OK ไดเ้ ลย) 3. จะไดป้ ่มุ มาตรฐานชื่อ Submit คลกิ ทปี่ มุ่ มาตรฐาน แลว้ เลอื กตวั เลอื กท่ี Properties 4. ตวั เลือก Botton name กำหนดได้ 3 ตัวเลือกอัตโนมตั ิ คือ คลกิ ท่ี Submit, Reset, Cancel ในชอ่ ง Value แล้วเปล่ยี นชือ่ ปุ่ม เช่น ตกลง เป็นต้น 4. การยอ่ และขยายเลเยอร์ มีกแ่ี บบ จงอธิบาย ตอบ เปน็ การตรวจสอบว่าข้อมูลที่กรอกเข้ามานัน้ ถกู ตอ้ งหรือตรงตามข้อกำหนดที่ตงั้ ไว้หรอื ไม่ เช่น หมายเลขโทรศพั ท์ รหัสไปรษณยี ์ มีขน้ั ตอนดงั น้ี 1. คลิกเลอื ก Text Field ท่จี ะทำการตรวจสอบ 2. ไปท่พี าเนล Tag< Form > ทตี่ วั เลือก Behaviors คลกิ เครื่องหมาย + แล้วเลอื ก Validate Form 3. จะได้หนา้ ต่าง Validate Form เลอื ก Text ทต่ี อ้ งการในชอ่ ง Named Fields 4. เลือก Accept เปน็ Number คลิก OK 5. จะได้ event เปน็ onBlur หมายถงึ เม่ือคลิกทีฟ่ อร์มโดยไม่ใส่คา่ ใด ๆ ลงไปโปรแกรมจะเตอื นใหใ้ ส่ค่า ลงไปให้ถูกตอ้ ง

เฉลยแบบฝกึ หัด หน่วยท่ี 9 1. ลกั ษณะของฟอร์มทีท่ ำงานบนเวบ็ เพจเรยี กวา่ อะไร ตอบ ค. Dynamic web 2. นคี่ ือเครื่องมืออะไร ตอบ ก. Text Field 3. นี่คือเครอื่ งมืออะไร ตอบ ง. List / Menu 4. นค่ี อื เคร่ืองมอื อะไร ตอบ ข. Text area

5. นค่ี ือเครื่องมืออะไร ตอบ ค. Radio Button 6. นคี่ อื เคร่อื งมืออะไร ตอบ ก. Check Box 7. นี่คือเครื่องมืออะไร ตอบ ข. Fieldset 8. คำสั่งท่ีใหด้ ังตอ่ ไปน้ถี า้ เลือกเปน็ ไอคอน คือ ไอคอนใด Insert>> Form >> Jump Menu ตอบ ง. 9. ข้อใดคอื ความหมายของ Jumb Menu ตอบ ค. เป็นการออกแบบฟอร์มใหล้ ิงคไ์ ปยงั เว็บไซต์ หรอื URL ท่ีต้องการ 10. ข้อใดคือความหมายของ Image Field ตอบ ง. เปน็ ฟิลด์สำหรบั นำภาพกราฟิกมาใช้แทนปุ่ม Submit ของฟอร์ม เฉลยกิจกรรมบูรณาการอาเซียน คำสง่ั ให้นักเรียนเลอื กคำทใ่ี ห้ดังต่อไปนไ้ี ปใส่หน้าประโยคหรือความหมายให้ถกู ตอ้ ง

บนั ทึกหลังการสอน หน่วยที่ 9 การสรา้ งฟอร์ม ผลการใช้แผนการสอน 22. เนอื้ หาสอดคลอ้ งกบั จดุ ประสงค์เชงิ พฤตกิ รรม 23. กิจกรรมการสอนเหมาะสมกบั เน้อื หาและเวลาท่ีกำหนด 24. สื่อการสอนทเี่ ปน็ การสร้างฟอร์ม ผลการเรยี นของนักเรียน

25. นกั ศกึ ษาสว่ นใหญ่มีความตัง้ ใจในการปฏบิ ัติงาน 26. นกั ศึกษากระตือรือรน้ และรับผดิ ชอบในการทำงาน 27. นักศกึ ษาสร้างฟอรม์ บนเว็บเพจ ผลการสอนของครู 20. สอนเนื้อหาไดป้ ระมาณ 80% บางสว่ นให้นักศกึ ษาคน้ ควา้ เพม่ิ เตมิ 21. แผนการสอนปรับเปล่ยี นบ้างตามความเหมาะสม 3. สอนทันตามเวลาทก่ี ำหนด

แผนการสอน/แผนการเรียนรภู้ าคทฤษฎี แผนการสอน/การเรียนรภู้ าคทฤษฎี หน่วยที่ 10 ชื่อวชิ า การสรา้ งเว็บไซต์ สอนสัปดาหท์ ี่ 15-16 ชือ่ หนว่ ย การใชม้ ลั ตมิ เี ดยี บนเว็บ คาบรวม 64 ช่ือเร่ือง การใชม้ ัลตมิ ีเดยี บนเว็บ จำนวนคาบ 4 หวั ขอ้ เรอ่ื ง ด้านความรู้ 7. การใชม้ ลั ตมิ ีเดียบนเวบ็ ด้านทกั ษะ 8. แทรก Flash ลงเวย็ เพจ 9. แทรกไฟล์ .FLV ยอดนยิ ม 10. เลน่ เพลงในเวบ็ เพจด้วย Plugin ดา้ นจิตพิสัย 11. การปรบั แตง่ การเล่นไฟลเ์ สยี งได้ ด้านคุณธรรม จริยธรรม/บูรณาการเศรษฐกจิ พอเพียง 12. ใชม้ ลั ตมิ เี ดียบนเว็บไดถ้ กู ตอ้ งสมบรู ณ์ สาระสำคัญ การเพ่ิมเตมิ ลูกเลน่ ด้วยมัลติมีเดียชนิดต่าง ๆ อย่างเช่น เสียงเพลง ภาพเคล่ือนไหว แบบ Flash และ ภาพวีดีโอ เป็นอีกสิ่งหนึ่งที่ช่วยเพิ่มความน่าสนใจให้กับเว็บเพจไม่น้อย ซึ่งใน Dreamweaver มีเครื่องมือที่จะ ช่วยให้คุณสามารถสร้างและปรับแตง่ มัลติมเี ดยี เหล่าน้ีได้อยา่ งสะดวก สมรรถนะอาชีพประจำหน่วย 4. ใช้งานมัลตมิ ีเดียบนเว็บเพจ จดุ ประสงค์การสอน/การเรียนรู้

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

1. การแทรก Flash ลงเวบ็ เพจ เราสามารถแทรกไฟล์ทสี่ รา้ งจากโปรแกรม Flash ไม่วา่ จะเป็นปา้ ยโฆษณาแบนเนอร์ต่าง ๆ หรอื แม้แตร่ ูป ภาพเคลื่อนไหวลงไปในเว็บเพจได้ดว้ ยขัน้ ตอนดงั ตอ่ ไปนี้ 1. สรา้ งไฟล์ HTML ขนึ้ มาใหม่ แลว้ บันทกึ ชอ่ื ไฟล์ testFlash.html 2. วางเคอร์เซอรต์ รงตำแหนง่ ที่จะแทรกไฟล์ Flash 3. เลอื กคำส่ัง SWF บนแทบ็ Common ของ Insert Bar เพ่อื แทรกไฟล์ Flash จากนั้นหน้าต่าง Select Flie จะปรากฏข้ันมาให้เลือกไฟล์ Flash ทีต่ ้องการแทรกในเวบ็ เพจ 4. คลกิ เลือกโฟลเดอร์เกบ็ ไฟล์ Flash 5. คลิกเลือกไฟล์ Flash ท่ีต้องการแทรก 6. คลกิ ปุ่ม Save

จากน้นั ถ้าต้องการก็อบป้ภี าพมาไวใ้ นโฟลเดอรเ์ วบ็ ไซตก์ ็ใหก้ ำหนดโฟลเดอรแ์ ละไฟลท์ ี่ต้องการจดั เกบ็ เม่อื เสรจ็ แลว้ สามารถทดลองเลน่ ไฟล์ Flash ก่อนได้ โดยการคลกิ ป่มุ Play จากนัน้ ไฟล์ Flash จะแสดง บนพืน้ ท่ีสรา้ งงานทว่ี างเคอร์เซอร์ไว้ ถา้ ต้องการหยุดเล่นไฟล์ Flash ให้ คลกิ ปุ่ม Stop 2. การแทรกไฟล์ .FLV ยอดนิยม Flash Video หรือไฟล์นามสกุล .flv เป็นไฟล์วีดีโออีกรูปแบบที่กำลังได้รับความนิยม อย่างมากใน ปจั จบุ นั เน่อื งจากเป็นไฟล์ท่ีมขี นาดเลก็ สามารถเล่นบนเวบ็ เพจได้ด้วยโปรแกรม Flash Player ซง่ึ เปน็ โปรแกรม ทม่ี ักตดิ ตง้ั ไวใ้ นเครื่องคอมพิวเตอร์ โดยมขี ั้นตอนการแทรกไฟล์ Flash Viedo ดังนี้ 1. สรา้ งไฟล์ HTML ขนึ้ มาใหม่แลว้ บนั ทกึ ชอื่ ไฟล์ testFlv.html 2. วางเคอร์เซอรต์ รงตำแหน่งทต่ี อ้ งการจะวางไฟล์วดี โี อ

3. เลือกคำสั้ง FLV บนแท็บ common ของ Insert Bar (หรือคลิกเมนู Insert > Media >Flash Video) เพอ่ื แทรกไฟล์ Flash Video จากน้ันหนา้ ตา่ ง Insert FLV จะปรากฏข้นึ มา ให้เลอื กไฟล์ Flash Video ทีต่ ้องการแทรกในเว็บเพจและ กำหนดตา่ ง ๆ 4. เลือกวธิ ีแสดงวดี ีโอ - Progressive Download Video ไฟล์ Flash Video จะถกู ดาวนโ์ หลดไปเก็บไว้ทเ่ี คร่ืองของ ผชู้ มในขณะที่เล่นไปดว้ ย ซ่งึ สามารถเผยแพร่ไฟลว์ ดี โี อไดจ้ ากเซริ ์ฟเวอรท์ วั่ ไปได้ - Streming Video ไฟล์ Flash Video จะไมถ่ ูกดาวนโ์ หลดไปเก็บไวเ้ หมือนกบั วธิ แี รกซง่ึ การ เผยแพรไ่ ฟลว์ ดี ีโอประเภทนี้จะต้องใช้เวบ็ เซริ ฟ์ เวอรท์ ่ตี ดิ ตง้ั โปรแกรมโดยเฉพาะเทา่ นน้ั 5. คลกิ ปุ่ม Browse…เพอ่ื เลอื กไฟล์ Flash จากนน้ั ถา้ ตอ้ งการก็อบปภี้ าพมาไวใ้ นโฟลเดอรเ์ ว็บไซตก์ ็ให้ กำหนดโฟลเดอรแ์ ละไฟลท์ ่ีตอ้ งการจดั เกบ็ 6. กำหนดคุณสมบัตติ ่าง ๆ ให้ไฟล์วดี ีโอตามตอ้ งการ - Skin เลอื กรปู แบบของแผงควบคมุ การเล่นวีดโี อ ซึง่ จะแสดงตวั อย่างแผงควบคมุ เมอ่ื เลือก - Width / Height กำหนดความกว้างและความสูงของวีดีโอ - Constrain รักษาสัดสว่ นของวีดโี อไว้เม่ือปรับความกว้างหรอื ความสูง - Auto play เริ่มเลน่ วีดีโออตั โนมัติเมอื่ เว็บเพจถกู เปดิ - Prompt users to download… ในกรณีท่เี ครอื่ งของผ้ชู มไม่สามารถรับชมไดใ้ หไ้ ปยังเว็บ สำหรบั ดาวน์โหลดหรืออัพเกรดโปรแกรม Flash Player 7. คลิกปุ่ม OK หลงั จากนน้ั จะปรากฏไอคอนไฟล์ .flv ในพนื้ ทส่ี รา้ งงานตรงตำแหนง่ ทวี่ างเคอรเ์ ซอร์ไว้ ดงั รูป

3. การเล่นเพลงในเวบ็ เพจด้วย Plugin นอกจากปุ่ม ข้อความ และภาพเคลือ่ นไหวท่ีเป็นไฟล์ Flash แลว้ เราสามารถเพ่ิมเสียงดนตรีในเว็บเพจได้ สำหรบั ไฟล์เสยี งทีจ่ ะนำมาใส่ในเว็บเพจนัน้ มีอยู่ด้วยกนั หลายรปู แบบ ดงั นี้ 1. ไฟล์เสยี ง .midi (Musical Instrument Digital) คณุ ภาพเสยี งดมี าก ใช้ไดก้ บั ทกุ เว็บบราวเซอร์ นิยม ใช้กับเพลง 2. ไฟล์เสียง .wav (Waveform Extension) เป็นไฟล์เสียงขนาดใหญ่ คุณภาพเสียงดีใช้ได้กับทุกเว็บ บราวเซอร์ 3. ไฟล์เสียง .aif หรือ aiff (Audio Interchange File Format) คล้ายกับไฟล์ .wav คุณภาพเสียงดี แตม่ ขี นาดใหญ่ ใช้ไดก้ บั ทกุ เวบ็ บราวเซอร์ ไม่ต้องใชโ้ ปรแกรมเสริม 4. ไฟลเ์ สยี ง .mp3 หรอื .mpeg (Motion Picture Expert Group Audio – Audio Layer 3) เปน็ ไฟล์ ที่ถูกบีบอัดให้มีขนาดเล็กลง แต่คุณภาพเสียงดีมาก ต้องใช้โปรแกรมเสริมเวลาแสดงเสียง เช่น Media Player, Real Player, และ Quicktime เป็นตน้ 5. ไฟลเ์ สยี ง .ra .ram .rpm (Real Audio) เปน็ ไฟลเ์ สียงท่ีถกู บีบอัดใหเ้ ล็กกว่า MP3 แต่คุณภาพเสียง ลดกว่า MP3 ตอ้ งใช้โปรแกรมเสริมในการเลน่ เช่นเดียวกนั อาทิ Media Player, Real Player, และ Quicktime เปน็ ต้น สำหรับวิธีการใส่เสียงในเว็บเพจสามารถทำได้ 2 วิธีคือ แบบแรกสร้างลิงก์ไฟล์เสียงเพื่อใหผ้ ู้ชมเลอื กคลกิ ฟงั เสยี งเอง สว่ นแบบท่ีสองจะเป็นการฝงั ไฟล์เสียงลงในเวบ็ เพจ เมือ่ ผชู้ มเปดิ เว็บเพจนน้ั ก็สามารถฟังเสียงได้ทันที ซง่ึ สามารถทำไดด้ ังน้ี 1. สรา้ งไฟล์ HTML ข้ึนมาใหม่ แลว้ บนั ทกึ ชื่อไฟล์ testMusic.html

2. วางเคอร์เซอร์ตรงตำแหนง่ ทตี่ อ้ งการวางแผนควบคมุ การเล่นเสยี ง 3. เลือกคำสั่ง Plugin บนแทบ็ Common ของ Insert Bar เพือ่ แทรกไฟล์เสียงลงเว็บเพจ จากนั้นหน้าต่าง Select File จะปรากฏขึ้นมาใหเ้ ลือกไฟลเ์ สยี งที่ต้องการแทรกในเว็บเพจ 4. คลิกเลอื กโฟลเดอรท์ เี่ ก็บไฟล์เสยี ง 5. คลกิ เลือกไฟล์เสยี งที่ตอ้ งการแทรก 6. คลกิ ปมุ่ OK

จากนนั้ ถ้าต้องการก็อบปี้ไฟล์มาไว้ในโฟลเดอรเ์ วบ็ ไซตก์ ใ็ ห้กำหนดโฟลเดอร์และไฟล์ท่ตี อ้ งการจดั เกบ็ 7. กำหนดขนาดของ Windows Media Player ที่ใช้เล่นบนเว็บเพจที่ช่อง W (ความกว้าง) และ H (ความสูง) ซง่ึ สามารถเลือกกำหนดขนาดได้ ดงั น้ี เมือ่ เสรจ็ เรยี บรอ้ ยแล้วจะแสดงไอคอนของไฟล์ดังรปู สามารถทดลองเล่นไฟลเ์ สียงไดโ้ ดยคลิกปมุ่ Play บน Properties Inspector 4. การปรบั แต่งการเลน่ ไฟล์เสียง

เราสามารถปรับแต่งการเล่นไฟล์เสียงได้ เช่น ซ่อมแผงควบคุมการเล่นเสียง หรือกำหนดจำนวนรอบใน การเล่นเสยี ง เป็นต้น ซง่ึ สามารถปรับแตง่ การเลน่ เสียงไดโ้ ดยคลกิ ปมุ่ Parameters… บน Properties Inspector จากนั้นจะ ปรากฏหน้าต่าง Parameters ขึน้ มาเพอ่ื ให้กำหนดค่า Parameters และ Value ตามต้องการ เม่ือกำหนดเสรจ็ แล้วใหค้ ลิกปุม่ OK โดยสามารถเลอื กกำหนด Parameters และ Value ได้ดังนี้ • ดา้ นทักษะ+ดา้ นจิตพิสยั (ปฏิบัต+ิ ดา้ นจิตพสิ ัย) (จุดประสงคเ์ ชงิ พฤตกิ รรมขอ้ ท่ี 2-5) 7. ใบงานหนว่ ยที่ 10 8. แบบฝึกหัด หนว่ ยที่ 10 9. กิจกรรมบรู ณาการอาเซียน

10. กิจกรรมบูรณาการเศรษฐกิจพอเพยี ง 11. กิจกรรมการเรยี นรู้หนว่ ยท่ี 10 • ดา้ นคณุ ธรรม/จริยธรรม/จรรยาบรรณ/บรู ณาการเศรษฐกิจพอเพยี ง (จุดประสงคเ์ ชงิ พฤติกรรมขอ้ ท่ี 6) 1. ใช้มัลติมีเดยี บนเวบ็ ได้ถูกต้องสมบรู ณ์

กจิ กรรมการเรยี นการสอนหรือการเรียนรู้ ข้นั ตอนการสอนหรอื กิจกรรมของครู ข้ันตอนการเรยี นรู้หรอื กิจกรรมของนกั เรยี น 1. ขน้ั นำเขา้ สบู่ ทเรยี น ( 15 นาที ) 1. ข้ันนำเขา้ สูบ่ ทเรียน ( 15 นาที ) 4. ผู้สอนบรรยายการใชม้ ลั ติมเี ดียบนเว็บ 4. ผู้เรียนช่วยกันตอบคำถามตามความเข้าใจของ แต่ละคน 5. ผู้สอนแจ้งวัตถุประสงค์ของการเรียน หน่วย 5. ผู้เรียนทำความเข้าใจเกี่ยวกับวัตถุประสงค์ของ ที่ 10 เรอื่ ง การใชม้ ลั ตมิ เี ดียบนเว็บ การเรยี น หน่วยท่ี 10 เรอื่ ง การใช้มลั ตมิ ีเดียบนเวบ็ 6. ผูส้ อนให้ผู้เรยี นแทรก Flash ลงเวย็ เพจ 6. ผู้เรียนแทรก Flash ลงเว็ยเพจ 2. ขน้ั ใหค้ วามรู้ ( 255 นาที ) 2. ขั้นใหค้ วามรู้ ( 255 นาที ) 4. ผู้สอนเปิด PowerPoint และให้ผู้เรียนเปิด 4. ผู้เรียนศึกษา PowerPoint และให้ผู้เรียนเปิด เอกสารประกอบการสอนวิชา การสร้างเว็บไซต์หน่วย เอกสารประกอบการสอนวิชา การสรา้ งเวบ็ ไซต์ หน่วยที่ ที่ 10 เรื่อง การใช้มัลติมีเดียบนเว็บ หน้าที่ 184- 10 เรื่อง การใช้มัลติมีเดียบนเว็บ หน้าที่ 184-192 192 พรอ้ มอธบิ ายเนือ้ หาทลี ะสว่ น พรอ้ มอธิบายเนอ้ื หาทีละส่วน 5. ผู้สอนอธิบายความรู้เพิ่มเติมนอกเหนือจาก 5. ผู้เรียนฟังอธิบายความรู้เพิ่มเติมนอกเหนือจาก เอกสารประกอบการสอนวิชา การสร้างเว็บไซต์ เอกสารประกอบการสอนวิชา การสรา้ งเว็บไซต์ และ และใหผ้ ู้เรยี นช่วยกนั แทรกไฟล์ .FLV ยอดนยิ ม ให้ผเู้ รียนช่วยกันแทรกไฟล์ .FLV ยอดนยิ ม 6. ผู้สอนเปิดโอกาสให้ผู้เรียนซักถามข้อสงสัยที่ 6. ผูเ้ รยี นซักถามข้อสงสัยทเี่ กิดขน้ึ เกิดข้ึนระหวา่ งการเรยี นการสอน และตอบข้อซักถาม 3. ขนั้ ประยกุ ต์ใช้ ( 120 นาที ) 4. ผสู้ อนให้ผู้เรยี นทำใบงานหนว่ ยท่ี 10 หนา้ ที่ 3. ข้นั ประยุกต์ใช้ ( 120 นาที ) 194-195 4. ผเู้ รียนทำใบงานหนว่ ยที่ 10 หน้าที่ 194-195 5. ผ้สู อนให้ผเู้ รยี นทำแบบฝึกหัด หนว่ ยท่ี 10 หน้าท่ี 196-197 5. ผู้เรียนทำแบบฝึกหัด หน่วยที่ 10หน้าที่ 6. ผู้สอนให้ผู้เรียนสืบค้นข้อมูลจาก Web 196-197 Guide หน้าที่ 192 หรือหาความรู้เพิ่มเติมจาก 6. ผู้เรียนสืบค้นข้อมูลจาก Web Guide หน้าที่ อินเทอร์เนต็ 192 หรอื หาความรเู้ พ่มิ เติมจากอนิ เทอร์เนต็

กิจกรรมการเรียนการสอนหรือการเรียนรู้ ขั้นตอนการสอนหรือกจิ กรรมของครู ข้นั ตอนการเรยี นร้หู รือกิจกรรมของนกั เรยี น 4. ขนั้ สรุปและประเมินผล ( 90 นาที ) 4. ข้ันสรุปและประเมนิ ผล ( 90 นาที ) 5. ผสู้ อนและผู้เรียนร่วมกันสรุปเน้ือหาท่ีได้เรียน 1. ผู้สอนและผู้เรียนร่วมกันสรุปเนื้อหาที่ได้เรียน ใหม้ คี วามเข้าใจในทิศทางเดียวกัน ให้มีความเขา้ ใจในทศิ ทางเดียวกนั 6. ผสู้ อนใหผ้ ู้เรยี นทำกิจกรรมบรู ณาการอาเซียน 2. ผู้เรียนทำกิจกรรมบูรณาการอาเซียน หน้าที่ หน้าท่ี 198 198 7. ผู้สอนให้ผู้เรียนทำกิจกรรมบูรณาการ 3. ผู้เรียนทำกิจกรรมบูรณาการเศรษฐกิจพอเพียง เศรษฐกิจพอเพยี ง หนา้ ท่ี 199 หน้าท่ี 199 8. ผู้สอนใหผ้ ้เู รียนทำกิจกรรมการเรียนรู้หน่วยท่ี 4. ผู้เรียนทำกิจกรรมการเรียนรู้หน่วยที่ 10 10 หนา้ ที่ 199 หน้าที่ 199 9. ผู้สอนให้ผู้เรียนศึกษาเพิ่มเติมนอกห้องเรียน 5. ผู้เรียนศึกษาเพิ่มเติมนอกห้องเรียน ด้วย ด้วยบทเรยี นคอมพวิ เตอร์ชว่ ยสอนท่จี ดั ทำขึน้ บทเรียนคอมพิวเตอรช์ ่วยสอนที่จดั ทำข้นึ (บรรลจุ ุดประสงคเ์ ชิงพฤตกิ รรมข้อที่ 1-6) (บรรลุจดุ ประสงค์เชงิ พฤติกรรมข้อที่ 1-6) (รวม 480 นาที หรือ 8 คาบเรียน) งานทีม่ อบหมายหรือกิจกรรมการวดั ผลและประเมนิ ผล

ก่อนเรยี น 1. จดั เตรียมเอกสาร ส่อื การเรยี นการสอนหนว่ ยท่ี 10 2. ทำความเข้าใจเกี่ยวกับจุดประสงคก์ ารเรียนของหน่วยเรียนท่ี 10 และการให้ความร่วมมือในการทำ กจิ กรรมตา่ ง ๆ ขณะเรยี น 27. ปฏบิ ัติตามใบงานที่ 10 เร่อื ง การใช้มัลติมีเดียบนเว็บ 28. ปฏิบัติตามแบบฝกึ หัด หนว่ ยที่ 10 29. ร่วมกนั สรปุ “การใชม้ ลั ตมิ ีเดียบนเว็บ” หลงั เรียน 1. ทำกิจกรรมบรู ณาการอาเซียน 2. ทำกิจกรรมบูรณาการเศรษฐกจิ พอเพียง 3. ทำกจิ กรรมการเรียนรหู้ น่วยท่ี 10 คำถาม 22. จงอธบิ ายการแทรกไฟลม์ ัลติมเี ดยี แต่ละชนิดลงบนเว็บเพจ 23. แทรกไฟล์ Flath ลงบนเวบ็ เพจ มีเทคนิคการแทรกอยา่ งไร 24. แทรกไฟล์ .FLV ลงบนเวบ็ เพจ เหมือนหรือตา่ งกันกบั การแทรกไฟล์ Flath ลงบนเวบ็ เพจ 25. เล่นเพลงในเว็บเพจด้วย Plugin ไดอ้ ยา่ งไร 26. สามารถปรบั แต่งการเลน่ ไฟล์เสียงไดห้ รอื ไม่ ผลงาน/ช้นิ งาน/ความสำเรจ็ ของผู้เรียน ใบงาน แบบฝกึ หดั กจิ กรรม สมรรถนะท่พี งึ ประสงค์

ผเู้ รยี นสร้างความเขา้ ใจเกย่ี วกับการใชม้ ลั ติมีเดียบนเว็บ 41. วิเคราะหแ์ ละตคี วามหมาย 42. ตงั้ คำถาม 43. อภปิ รายแสดงความคิดเห็นระดมสมอง 44. การประยุกต์ความรูส้ ู่งานอาชีพ สมรรถนะการปฏิบตั ิงานอาชพี 2. ใชง้ านมลั ตมิ ีเดียบนเว็บเพจ สมรรถนะการขยายผล ความสอดคลอ้ ง จากการเรียน เรื่อง การใช้มัลติมีเดียบนเว็บ ทำให้ผู้เรียนมีความรู้เพิ่มเกี่ยวกับการเพิ่มเติมลูกเล่นด้วย มัลติมีเดียชนดิ ต่าง ๆ อย่างเช่น เสียงเพลง ภาพเคลื่อนไหว แบบ Flash และภาพวีดีโอ เป็นอีกสิ่งหนึง่ ที่ช่วยเพ่ิม ความน่าสนใจให้กับเว็บเพจไม่น้อย ซึ่งใน Dreamweaver มีเครื่องมือที่จะช่วยให้คุณสามารถสร้างและปรับแต่ง มัลตมิ เี ดยี เหลา่ นไี้ ด้อยา่ งสะดวก ส่อื การเรยี นการสอน/การเรยี นรู้ สื่อส่ิงพิมพ์

47. เอกสารประกอบการสอนวชิ า การสร้างเวบ็ ไซต์ (ใช้ประกอบการเรียนการสอนจดุ ประสงคเ์ ชงิ พฤติกรรมขอ้ ที่ 1-6) 48. ใบความรทู้ ี่ 10 เรอื่ ง การใช้มัลติมีเดยี บนเว็บ (ใชป้ ระกอบการเรียนการสอนขัน้ ให้ความรู้ เพื่อให้ บรรลุจดุ ประสงคเ์ ชงิ พฤติกรรมข้อท่ี 1-12) 49. ใบงานที่ 10 เรือ่ ง การใช้มัลติมเี ดยี บนเวบ็ ขั้นประยุกต์ใช้ 1 50. แบบฝึกหดั หนว่ ยท่ี 10 การใชม้ ัลติมีเดยี บนเว็บ ขนั้ ประยุกตใ์ ช้ 2 51. กิจกรรมบูรณาการอาเซยี น ใช้ประกอบการสอนข้ันสรปุ และประเมินผล ขอ้ 2 52. กิจกรรมบรู ณาการเศรษฐกิจพอเพยี ง ใช้ประกอบการสอนขน้ั สรปุ และประเมินผล ข้อ 3 53. กิจกรรมการเรียนรหู้ นว่ ยที่ 10 ใช้ประกอบการสอนขน้ั สรปุ และประเมินผล ข้อ 4 54. แบบประเมนิ ผลงานตามใบงาน ใช้ประกอบการสอนขั้นประยกุ ตใ์ ช้ ขอ้ 1 55. แบบประเมนิ พฤติกรรมการทำงาน ใช้ประกอบการสอนข้นั สรุป สอ่ื โสตทัศน์ (ถ้าม)ี 8. เคร่ืองไมโครคอมพวิ เตอร์ 9. PowerPoint เรอื่ ง การใชม้ ัลตมิ เี ดยี บนเว็บ สือ่ ของจริง การใช้มัลติมีเดยี บนเว็บ (ใชป้ ระกอบการเรยี นการสอนจุดประสงค์เชงิ พฤตกิ รรมขอ้ ท่ี 1-6) แหลง่ การเรยี นรู้ ในสถานศกึ ษา

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

ความรู้เบอื้ งตน้ ก่อนการเรียนการสอน ขณะเรียน 26. ตรวจผลงานตามใบงานหน่วยที่ 10 27. ตรวจแบบฝึกหัดหนว่ ยท่ี 10 28. สงั เกตการทำงาน หลังเรยี น 1. ตรวจกจิ กรรมบรู ณาการอาเซยี น 2. ตรวจกจิ กรรมบรู ณาการเศรษฐกิจพอเพยี ง 3. ตรวจกจิ กรรมการเรยี นร้หู น่วยท่ี 10 ผลงาน/ชนิ้ งาน/ผลสำเรจ็ ของผเู้ รยี น ใบงาน แบบฝึกหัด กจิ กรรม

รายละเอยี ดการประเมินผลการเรยี นรู้ • จดุ ประสงคเ์ ชิงพฤติกรรม ข้อที่ 1 บรรยายการใช้มัลติมีเดยี บนเวบ็ ได้ 31. วธิ ีการประเมนิ : ทดสอบ 32. เครือ่ งมอื : แบบทดสอบ 33. เกณฑก์ ารให้คะแนน : บรรยายการใช้มัลตมิ ีเดียบนเวบ็ ได้ จะได้ 1 คะแนน • จดุ ประสงคเ์ ชงิ พฤตกิ รรม ข้อท่ี 2 แทรก Flash ลงเว็บเพจได้ 31. วธิ ีการประเมนิ : ทดสอบ 32. เครอื่ งมือ : แบบทดสอบ 33. เกณฑก์ ารใหค้ ะแนน : แทรก Flash ลงเวบ็ เพจได้ จะได้ 2 คะแนน • จดุ ประสงค์เชงิ พฤตกิ รรม ข้อท่ี 3 แทรกไฟล์ .FLV ยอดนิยมได้ 28. วธิ กี ารประเมนิ : ทดสอบ 29. เคร่อื งมอื : แบบทดสอบ 30. เกณฑก์ ารให้คะแนน : แทรกไฟล์ .FLV ยอดนิยมได้ จะได้ 2 คะแนน • จุดประสงค์เชงิ พฤติกรรม ขอ้ ที่ 4 เลน่ เพลงในเว็บเพจด้วย Plugin ได้ 25. วธิ กี ารประเมนิ : ทดสอบ 26. เครอ่ื งมือ : แบบทดสอบ 27. เกณฑก์ ารให้คะแนน : แทรกไฟล์ .FLV ยอดนยิ มได้ จะได้ 2 คะแนน • จุดประสงคเ์ ชงิ พฤติกรรม ข้อท่ี 5 ประพฤติตามวิธกี ารปรบั แตง่ การเล่นไฟลเ์ สียงได้ 16. วิธีการประเมิน : ทดสอบ 17. เครือ่ งมอื : แบบทดสอบ 18. เกณฑก์ ารให้คะแนน : ประพฤตติ ามวิธกี ารปรับแตง่ การเล่นไฟลเ์ สียงได้ จะได้ 1 คะแนน

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

ใบงานหน่วยท่ี 10 ตอนท่ี 1 ใหน้ ักเรียนตอบคำถามต่อไปน้ี 1. จงบอกขน้ั ตอนการแทรกไฟลบ์ นเว็บเพจมาเป็นขอ้ ๆ ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... 2. จงบอกคุณสมบตั ิต่างๆ ของไฟล์วิดีโอตามทต่ี อ้ งการ ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... 3. การเลอื กแสดงวดิ ีโอมีกแ่ี บบ อะไรบ้าง จงอธิบาย

..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... 4. จงบอกไฟล์เสียงท่จี ะนำมาใส่ในเว็บเพจมาเป็นข้อ ๆ พรอ้ มอธิบายรายละเอียด ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... .....................................................................................................................................

แบบฝึกหดั หน่วยท่ี 10 คำชีแ้ จง จงทำเคร่ืองหมาย (X) ลงหนา้ ขอ้ ท่ีถูกต้อง 1. การแทรก Flash ลงบนเวบ็ เพจขนั้ ตอนท่ี 1 คือ การสร้างไฟล์ HTML ข้นึ มาใหม่แลว้ บนั ทกึ ชือ่ ไฟลเ์ ป็น อะไร i. testFlv.html ii. testMusic.html iii. testHTML.html iv. testFlash.html 2. การเลอื กคำส่งั SWF เพ่อื แทรกไฟล์ใด i. Skin ii. Music iii. Hidden iv. Flash 3. การแทรกไฟล์ .FLV ยอดนิยมขัน้ ตอนที่ 1 คอื การสร้างไฟล์ HTML ขึ้นมาใหมแ่ ล้วบนั ทึกไฟล์เปน็ อะไร ก. testFlv.html ข. testMusic.html ค. testHTML.html ง. testFlash.html 4. การเลอื กคำส่ัง FLV เพอื่ แทรกไฟลใด ก. Flash Video ข. Music ค. Picture ง. Flash 5. Skin คือขอ้ ใด ก. กำหนดความกว้าง และความสงู ของวดิ ีโอ ข. เลือกรปู แบบของแผงควบคุมการเล่นวิดีโอ ค. รักษาสัดสว่ นของวิดีโอ ง. เรม่ิ เลน่ วดิ ีโออัตโนมตั ิ 6. Auto play คอื ข้อใด ก. กำหนดความกวา้ ง และ ความสงู ของวดิ โี อ

ข. เลือกรปู แบบของแผงควบคุมการเลน่ วดิ โี อ ค. เรมิ่ เลน่ วิดโี ออัตโนมัติ ง. รักษาสดั สว่ นของวดิ โี อ 7. การแทรกไฟลเ์ พลงลงบนเว็บเพจขั้นตอนที่ 1 คือการสรา้ งไฟล์ HTML ขึ้นมาใหมแ่ ลว้ บนั ทกึ ช่อื ไฟลเ์ ป็น อะไร ก. testFlv.html ข. testMusic.html ค. testHTML.html ง. testFlash.html 8. การเลอื กคำสั่ง Plugin เพือ่ แทรกไฟลใ์ ด ก. ไฟลภ์ าพ ข. ไฟล์ Flash ค. ไฟลเ์ พลง ง. ไฟล์ HTML 9. Hidden > true คือความหมายใด ก. แสดงแผงควบคมุ การเลน่ เสยี ง ข. วนเลน่ เสยี งไปเร่อื ย ๆ ค. เล่นเสยี งแค่รอบเดยี ว ง. ซอ่ นแผงควบคุมการเลน่ เสียง 10. Hidden > False คือความหมายใด ข. แสดงแผงควบคุมการเล่นเสยี ง ค. วนเล่นเสียงไปเรือ่ ย ๆ ง. เล่นเสียงแคร่ อบเดียว จ. ซ่อนแผงควบคมุ การเลน่ เสียง กิจกรรมบรู ณาการอาเซยี น คำสงั่ จงเลอื กคำศัพท์ทถ่ี กู ต้องไปใสใ่ นชอ่ งวา่ งท่เี วน้ ไวข้ า้ งหน้าประโยคทีถ่ ูกต้อง

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

ตอนท่ี 1 ให้นกั เรยี นแบง่ กลุ่ม กลุ่มละ 3 - 4 เพอื่ สร้างมัลตมิ ีเดียบนเวบ็ เพจ 1. ชอ่ื เวบ็ เพจ ..................................................................................................................................... 2. ลักษณะของเว็บเพจ ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... 3. หลักการใช้เว็บเพจ ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... 4. ข้อดีและข้อเสียในการใช้เว็บเพจท่ีสร้าง ..................................................................................................................................... .....................................................................................................................................

..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... ..................................................................................................................................... แบบประเมนิ ผลการนำเสนอผลงาน ช่ือกลุม่ ……………………………………………ชนั้ ………………………หอ้ ง...........................

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

หน่วยที่ 10 การใช้มัลติมเี ดยี บนเวบ็ เพจ เฉลยใบงาน หนว่ ยที่ 10 ตอนท่ี 1 ให้นักเรยี นตอบคำถามต่อไปน้ี 1. จงบอกข้นั ตอนการแทรกไฟลบ์ นเว็บเพจมาเป็นข้อ ๆ ตอบ 1. สร้างไฟล์ HTML ขึ้นมาใหม่ แลว้ บันทกึ ชื่อไฟล์ testFlash.html 2. วางเคอร์เซอร์ตรงตำแหน่งที่จะแทรกไฟล์ Flash 3. เลือกคำสั่ง SWF บนแท็บ Common ของ Insert Bar เพอื่ แทรกไฟล์ Flash จากนน้ั หนา้ ตา่ ง Select Flie จะปรากฏขัน้ มาใหเ้ ลือกไฟล์ Flash ทต่ี อ้ งการแทรกในเวบ็ เพจ 4. คลิกเลอื กโฟลเ์ ดอร์เก็บไฟล์ Flash 5. คลิกเลือกไฟล์ Flash ทตี่ อ้ งการแทรก 6. คลกิ ปุ่ม OK 2. จงบอกคณุ สมบัตติ า่ งๆ ของไฟล์วิดโี อตามท่ีตอ้ งการ ตอบ - Skin เลอื กรปู แบบของแผงตวบคมุ การเล่นวดี โี อ ซง่ึ จะแสดงตวั อย่างแผงควบคมุ เมื่อเลอื ก - Width / Height กำหนดความกว้างและความสูงของวดี โี อ - Constrain รักษาสดั ส่วนของวีดีโอไว้เมือ่ ปรบั ความกว้างหรอื ความสงู - Auto play เรมิ่ เล่นวิดีโออัตโนมตั ิเมื่อเว็บเพจถูกเปดิ - Prompt users to download… ในกรณที เี่ คร่ืองของผู้ชมไมส่ ามารถรบั ชมไดใ้ ห้ไปยังเว็บสำหรบั ดาวนโ์ หลดหรืออพั เกรดโปรแกรม Flash Player 3. การเลอื กแสดงวิดีโอมีก่ีแบบ อะไรบ้าง จงอธิบาย ตอบ มี 2 แบบ - Progressive Download Video ไฟล์ Flash Video จะถูกดาวนโ์ หลดไปเกบ็ ไวท้ ี่เครอ่ื งของผู้ชมใน ขณะทีเ่ ลน่ ไปด้วย ซึ่งสามารถเผยแพรไ่ ฟลว์ ดี ีโอไดจ้ ากเซริ ฟ์ เวอรท์ วั่ ไปได้ - Streming Video ไฟล์ Flash Video จะไม่ถกู ดาวนโื หลดไปเก็บไวเ้ หมอื นกบั วธิ ีแรกซง่ึ การเผยแพร่ ไฟลว์ ดี โี อประเภทนีจ้ ะต้องใช้เวบ็ เซิรฟ์ เวอร์ทีต่ ดิ ตั้งโปรแกรมโดยเฉพาะเท่านน้ั 4. จงบอกไฟล์เสียงทจ่ี ะนำมาใส่ในเว็บเพจมาเป็นข้อ ๆ พร้อมอธิบายรายละเอียด ตอบ 1. ไฟล์เสียง .midi (Musical Instrument Digital) คุณภาพเสียงดีมาก ใชไ้ ด้กับทกุ เว็บเบราว์เซอร์ นิยมใชก้ ับเพลง 2. ไฟลเ์ สียง .wav (Waveform Extension) เปน็ ไฟลเ์ สียงขนาดใหญ่ คุณภาพเสยี งดี ใชไ้ ด้กับ ทกุ เวบ็ เบราว์เซอร์ 3. ไฟลเ์ สียง .aif หรือ aiff (Audio Interchange File Format) คล้ายกบั ไฟล์ .wav คุณภาพ เสียงดี แต่มขี นาดใหญ่ ใช้ได้กบั ทกุ เว็บเบราว์เซอร์ ไมต่ อ้ งใช้โปรแกรมเสริม

4. ไฟล์เสียง .mp3 หรอื .mpeg (Motion Picture Expert Group Audio – Audio Layer 3) เปน็ ไฟลท์ ่ถี กู บบี อัดใหม้ ีขนาดเล็กลง แต่คุณภาพเสียงดมี าก ต้องใช้โปรแกรมเสริมเวลาแสดงเสยี ง เชน่ Media Player, Real Player, และ Quicktime เปน็ ต้น 5. ไฟล์เสยี ง .ra .ram .rpm (Real Audio) เป็นไฟล์เสยี งทถ่ี กู บบี อัดใหเ้ ลก็ กวา่ MP3 แต่คุณภาพ เสียงลดกวา่ MP3 ตอ้ งใชโ้ ปรแกรมเสริมในการเล่นเชน่ เดียวกนั อาทิ Media Player, Real Player, และ Quicktime เป็นต้น เฉลยแบบฝึกหดั หน่วยที่ 10 1. การแทรก Flash ลงบนเวบ็ เพจขั้นตอนที่ 1 คอื การสรา้ งไฟล์ HTML ขึ้นมาใหมแ่ ล้วบันทกึ ชื่อไฟลเ์ ปน็ อะไร ตอบ ง. testFlash.html 2. การเลือกคำสัง่ SWF เพ่ือแทรกไฟลใ์ ด ตอบ ง. Flash 3. การแทรกไฟล์ .FLV ยอดนยิ มขน้ั ตอนที่ 1 คอื การสร้างไฟล์ HTML ขนึ้ มาใหมแ่ ล้วบันทึกไฟลเ์ ป็นอะไร ตอบ ก. testFlv.html 4. การเลือกคำส่งั FLV เพื่อแทรกไฟลใ์ ด ตอบ ก. Flash Video 5. Skin คือข้อใด ตอบ ข. เลือกรูปแบบของแผงควบคุมการเลน่ วดิ โี อ 6. Auto play คอื ขอ้ ใด ตอบ ค. เร่ิมเลน่ วดิ โี ออตั โนมัติ 7. การแทรกไฟล์เพลงลงบนเว็บเพจข้ันตอนที่ 1 คอื การสรา้ งไฟล์ HTML ขน้ึ มาใหมแ่ ล้วบันทึกช่ือไฟล์เป็น อะไร ตอบ ก. testFlv.html 8. การเลอื กคำสั่ง Plugin เพ่อื แทรกไฟลใ์ ด ตอบ ค. ไฟล์เพลง 9. Hidden > true คือความหมายใด ตอบ ง. ซอ่ นแผงควบคุมการเลน่ เสยี ง 10. Hidden > False คอื ความหมายใด ตอบ ก. แสดงแผงควบคมุ การเล่นเสยี ง

เฉลยกจิ กรรมบรู ณาการอาเซียน คำส่ัง จงเลอื กคำศัพท์ท่ถี ูกตอ้ งไปใส่ช่องวางทเี่ วน้ ไว้ขา้ งหนา้ ประโยคทถี่ ูกตอ้ ง