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

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

หนว่ ยท่ี 7 การสร้างเฟรม เฉลยใบงาน หนว่ ยท่ี 7 คำชี้แจง ให้นกั เรยี นตอบคำถามตอ่ ไปนี้ 1. เฟรมเซตคอื อะไร และมีกีร่ ปู แบบ จงอธิบาย ตอบ เฟรมเซต (Frameset) คอื การแบ่งหนา้ เวบ็ เพจออกเป็นพนื้ ที่หลาย ๆ ส่วน โดยแตล่ ะส่วนที่แยกออกไป จะเป็ นอิสระไม่ข้ึนตอ่ กัน ตามปกตินิยมใชเ้ ฟรมเพื่อแบ่งเนื้อหาบนหน้าจอเป็น 2 กลุ่ม เพื่อใช้แสดงหรอื เปรยี บเทียบ ขอ้ มูล เฟรมจะมี 2 รูปแบบ คอื เฟรมหลัก(Frameset) และเฟรมยอ่ ย (Frame) 1. เฟรมหลัก (Frameset) คือ หน้าตา่ งเฟรมใหญ่ที่สุด ทำหนา้ ทีค่ อยควบคุมเฟรมย่อยอีกทีหนึง่ โดย กำหนดวา่ ในแต่ละส่วนชือ่ อะไร มีขนาดและคุณสมบัตอิ ย่างไร เรม่ิ ตน้ ทีต่ ำแหนง่ ใด เป็นตน้ 2. เฟรมย่อย (Frame) หน้าตา่ งเฟรมทที่ ำหนา้ ที่กำหนดชอ่ื ของแตล่ ะเฟรม และกำหนดไฟลเ์ วบ็ เพจ ภายในเฟรมได้ 2. จงอธิบายคำศพั ท์เบ้อื งต้นเกี่ยวกับเวบ็ ไซต์ดังต่อไปนี้ HTML, URL, Web browser, Web server ตอบ 1. การใช้แบบสำเรจ็ เปน็ เพรมเซตท่ีโปรแกรมได้ออกแบบไว้เป็นแบบสำเรจ็ รปู สามารถเลือกใช้ไดง้ า่ ย ๆ โดยเมอ่ื เปดิ โปรแกรมข้นึ มาใหค้ ลกิ เลือกคำสัง่ Framesets บนกลมุ่ คำสั่งCreate From Samples จะมเี ฟรมเซตให้ เลือก คลกิ เลอื กแบบท่ีต้องการ แล้วคลิกปุม่ Createการใชแ้ ถบเครือ่ งมอื ให้เลือกปมุ่ บนกล่มุ เคร่ืองมือ Layout จะมี รูปแบบเฟรมเซตยอ่ ย ๆ คลกิ เลอื กแบบท่ีตอ้ งการ 2. การออกแบบเฟรมเซตเอง มีวธิ ีทำโดยคลิกที่เมนู View >> Visual Aids >> Frame >> Borders ท่เี ว็บ เพจจะปรากฏเส้นขอบของเฟรมเซตข้นึ มา เลือ่ นเมาสไ์ ปท่เี ส้นขอบของเฟรมเซต คลิกและลากเมาส์เพอ่ื สร้างเฟรมเซต 3. จงบอกข้ันตอนการบันทกึ เฟรมหลักมาเปน็ ขอ้ ๆ ตอบ 1. คลิกทีโ่ ครงเฟรมหลกั ในหนา้ ตา่ ง Frame Panel 2. คลิกเมนู File >> Save Frameset หรอื กดปุ่ม < Ctrl + S > เพ่อื บันทกึ โครงเฟรม 3. เลอื กสถานทีเ่ กบ็ ไฟล์จากช่อง Save in 4. พมิ พ์ชื่อไฟล์ลงในชอ่ ง File Name 5. คลกิ ปุม่ Save เพอื่ บันทกึ เฟรม 4. จงบอกขั้นตอนในการบันทึกเฟรมย่อยมาเปน็ ขอ้ ๆ ตอบ 1. คลิกทโี่ ครงเฟรมย่อย ในหนา้ ต่าง Frame Panel 2. คลิกเมนู File >> Save Frame หรือกดปมุ่ < Ctrl + S > เพอ่ื บันทึกโครงเฟรม 3. เลือกสถานทเ่ี กบ็ ไฟลจ์ ากช่อง Save in 4. พิมพ์ช่ือไฟล์ลงในช่อง File Name 5. คลกิ ปมุ่ Save เพ่ือบันทกึ เฟรม

เฉลยแบบฝึกหดั หน่วยท่ี 7 1. ขอ้ ใดคอื ควาหมายของเฟรมเซต (Frameset) ตอบ ค. เป็นการแบ่งหน้าเว็บเพจออกเป็นพื้นทห่ี ลาย ๆ สว่ น โดยแต่ละสว่ นทแ่ี ยกออกไปจะเป็นอสิ ระไมข่ ึ้น ต่อกัน 2. ข้อใดไมใ่ ชร่ ปู แบบของเฟรม ตอบ ข. เฟรมหลกั , เฟรมย่อย 3. ข้อใดคอื ความหมายของเฟรมหลกั (Frameset) ตอบ ง. หนา้ ตา่ งเฟรมใหญท่ ี่สุด ทำหน้าทคี่ อยควบคมุ เฟรมย่อยอีกทหี นง่ึ 4. ข้อใดคือความหมายของเฟรมย่อย (Frame) ตอบ ข. หน้าตา่ งเฟรมทท่ี ำหนา้ ทีก่ ำหนดชอื่ ของแต่ละเฟรม และกำหนดไฟลเ์ วบ็ เพจภายในเฟรมได้ 3. ขอ้ ใดไมใ่ ชว่ ิธที ำในการออกแบบเฟรมเซตเอง ตอบ ข. View >> Visual Aids >> Frame >> Borders 4. ขอ้ ใดคอื วธิ กี ารเพมิ่ จำนวนเฟรม ตอบ ก. Modify >> Frame set 5. Borders คอื อะไร ตอบ ค. กำหนดให้แสดงหรอื ไม่แสดงเสน้ ขอบ 6. Border Color คอื อะไร ตอบ ข. กำหนดสขี องเส้นขอบเฟรม 5. Src คอื อะไร ตอบ ง. ตำแหน่งที่ใชบ้ นั ทกึ เวบ็ เพจของเฟรมนี้ 6. ข้อใดไมใ่ ช่ส่วนประกอบของเว็บเพจ ตอบ ข. แสดง / ซอ่ น แถบเล่อื นของเฟรมย่อย

บันทกึ หลงั การสอน หน่วยท่ี 7 การสรา้ งเฟรม ผลการใชแ้ ผนการสอน 19. ควรปรับเรอ่ื งเวลาในข้นั ประยุกต์ใชใ้ ห้นอ้ ยกว่าเดิม 20. กิจกรรมการสอนอาจปรบั เปลีย่ นตามความเหมาะสม 21. ตอ้ งจดั ทำส่อื การสอนเพ่ิมเติ่มเนอ่ื งจากเรือ่ ง ระบบอินพุท / เอาท์พทุ เปน็ เรื่องที่เข้าใจยาก ผลการเรยี นของนักเรยี น 19. นักศึกษาไม่คนุ้ กับระบบอนิ พทุ / เอาท์พุท ต้องอธบิ ายเพ่มิ เตมิ ใหม้ าก 20. นกั ศึกษากระตือรอื ร้นและรับผดิ ชอบในการทำงานกลมุ่ เพอื่ ให้งานสำเรจ็ ทันเวลาท่ีกำหนด 21. นกั ศกึ ษาสรา้ งเฟรมบนเว็บเพจได้ ผลการสอนของครู 16. ตอ้ งปรับเรอ่ื งเวลาในส่วนของขนั้ ประยกุ ต์ใช้ให้นอ้ ยกว่าเดิม 17. แผนการสอนและวิธกี ารสอนครอบคลมุ เน้ือหาการสอนทำให้ผู้สอนสอนได้อยา่ งม่นั ใจ 3. สอนทันตามเวลาที่กำหนด

แผนการสอน/แผนการเรยี นรู้ภาคทฤษฎี แผนการสอน/การเรยี นรภู้ าคทฤษฎี หนว่ ยที่ 8 ชือ่ วิชา การสร้างเวบ็ ไซต์ สอนสัปดาห์ที่ 11-12 ชื่อหนว่ ย การสร้างเลเยอร์ คาบรวม 48 ช่ือเรอ่ื ง การสร้างเลเยอร์ จำนวนคาบ 4 หวั ขอ้ เรอ่ื ง ด้านความรู้ 11. การสร้างเลเยอร์ ดา้ นทกั ษะ 9. สร้างเลเยอร์ 10. ปรับแตง่ รายละเอียดของเลเยอร์ 11. ใชง้ านพาเนลเลเยอร์ 12. สร้างเลเยอรซ์ ้อนกนั 13. แปลงเลเยอร์ ด้านจติ พิสยั 14. หลกั การสรา้ งสรา้ งเลเยอร์ ดา้ นคุณธรรม จริยธรรม 15.สรา้ งเลเยอร์ไดอ้ ยา่ งถูกต้องเหมาะสม สาระสำคญั Layer เปน็ เครื่องมอื หนง่ึ ใน Dreamweaver ทเี่ หมาะในการใชจ้ ดั หนา้ เวบ็ เพจ เนอ่ื งจากมีความสะดวก ในการเคลื่อนย้ายหรือจัดหน้าเว็บได้ตามความต้องการ ทั้งนี้เพราะ Layer เปรียบเสมือนแผ่นใสที่สามารถนำ องคป์ ระกอบต่าง ๆ มาวางไว้ภายใน และซอ้ นกันหลายชั้นได้ สมรรถนะอาชีพประจำหนว่ ย 6. สร้างเลเยอร์ คำศพั ท์สำคญั a. Layer ID หมายถึง หมายเลขอ้างอิงเมื่อเรียกใช้ Layer นั้น ๆ เช่น Layer1, Layer2 ซึ่งจะ เรยี งลำดับ เลเยอร์ ทส่ี รา้ งก่อนเป็นหลัก b. L และ T หมายถึง การกำหนดตำแหนง่ ของเลเยอร์ ซ่งึ ย่อมาจาก Left และ Top

c. W และ H หมายถึง การกำหนดขนาดของเลเยอร์ ซึ่งย่อมาจาก Width และ Height มีหน่วยเป็น พิกเซล (Pixel) จดุ ประสงคก์ ารสอน/การเรยี นรู้ • จุดประสงคท์ ั่วไป / บรู ณาการเศรษฐกิจพอเพียง d. เพ่อื ให้มีความรู้เก่ยี วกบั การอธิบายเกีย่ วกับการสรา้ งเลเยอร์ (ดา้ นความร)ู้ e. เพอ่ื ใหม้ ีทักษะในการสร้างเลเยอร์ (ดา้ นทกั ษะ) f. เพื่อใหม้ ที ักษะในการปรับแตง่ รายละเอียดของเลเยอร์ (ด้านทักษะ) g. เพอื่ ให้มีทักษะในการใช้งานพาเนลเลเยอร์ (ด้านทักษะ) h. เพือ่ ให้มีทักษะในการสรา้ งเลเยอรซ์ ้อนกัน (ดา้ นทกั ษะ) i. เพอื่ ใหม้ ีทักษะในการแปลงเลเยอร์ (ด้านทกั ษะ) j. เพอื่ ใหม้ เี จตคตทิ ่ีดตี อ่ ประพฤตติ ามหลักการสร้างสร้างเลเยอร์ (ด้านจติ พิสัย) k. เพอื่ สรา้ งเลเยอรไ์ ดอ้ ยา่ งถกู ตอ้ งเหมาะสม (ด้านคุณธรรม จริยธรรม) • จุดประสงคเ์ ชงิ พฤตกิ รรม / บูรณาการเศรษฐกจิ พอเพียง 1. อธิบายเกยี่ วกับการสร้างเลเยอร์ได้(ด้านความรู้) 2. สร้างเลเยอรไ์ ด้ (ด้านทักษะ) 3. ปรับแตง่ รายละเอียดของเลเยอรไ์ ด้ (ดา้ นทกั ษะ) 4. ใช้งานพาเนลเลเยอร์ได้ (ด้านทกั ษะ) 5. สรา้ งเลเยอร์ซอ้ นกนั ได้ (ด้านทักษะ) 6. แปลงเลเยอร์ได้ (ดา้ นทกั ษะ) 7. ประพฤติตามหลักการสร้างสร้างเลเยอร์ได้ (ด้านจติ พิสยั ) 8. สรา้ งเลเยอร์ไดอ้ ย่างถูกต้องเหมาะสมได้ (ดา้ นคุณธรรม จรยิ ธรรม) เนอื้ หาสาระการสอน/การเรยี นรู้ • ดา้ นความรู้(ทฤษฎ)ี

Layer เป็นเครื่องมอื หนึ่งใน Dreamweaver ที่เหมาะในการใช้จัดหน้าเว็บเพจเน่ืองจากมีความสะดวก ในการเคลื่อนย้ายหรือจัดหน้าเว็บได้ตามความต้องการ ทั้งนี้เพราะLayer เปรียบเสมือนแผ่นใสที่สามารถนำ องคป์ ระกอบตา่ ง ๆ มาวางไวภ้ ายใน และซ้อนกันหลายชนั้ ได้ 1. การสรา้ งเลเยอร์ การสร้างเลเยอรม์ ีวิธีการ ดงั นี้ 1. คลกิ แทบ็ Insert เพื่อสรา้ งเลเยอร์ คลิกเลือก Layout Objects 2. คลิกปุม่ AP Div 3. ลากพอยนเ์ ตอรใ์ หเ้ ปน็ กรอบสีเ่ หลีย่ มบนเวบ็ เพจ การพมิ พ์ข้อความในเลเยอร์ เมื่อสร้างเลเยอร์เสร็จแล้ว ตำแหน่งเคอร์เซอร์จะกะพริบอยู่ในเลเยอร์ สามารถพิมพ์ข้อความลงไปได้ เหมือนการพิมพง์ านปกติ โดยข้อความจะปรากฏอยดู่ ้านบนของเลเยอร์

การใสร่ ูปภาพในเลเยอร์ - คลิกท่ีเลเยอรท์ ่ีต้องการจะแทรกรูปภาพ - คลิกที่คำส่งั Insert >> Image หรือ เครือ่ งมือ Image บนกลุ่มเคร่ืองมอื Common - จะได้หนา้ ตา่ ง Select Image Source เลอื กรปู ภาพทตี่ อ้ งการแล้วคลกิ OK - ภาพท่เี ลอื กจะแทรกอยูใ่ นเลเยอร์ทันที หากภาพใหญ่เกนิ ไปเลเยอร์จะขยายใหเ้ ท่ากับขนาดของภาพ โดยอัตโนมัติ - คลิกทปี่ มุ่ แฮนเดลิ เพอ่ื ปรบั ขนาดภาพและเลเยอร์ตามความเหมาะสม การใสต่ ารางในเลเยอร์

ตารางที่สรา้ งในเลเยอร์อาจจะเป็นตารางเปล่าทีส่ ร้างข้ึนมาใหม่ หรือคดั ลอกตารางที่สร้างไวแ้ ล้วมาใส่ก็ได้ ดังน้ี - คลกิ ทเี่ ลเยอรท์ ี่จะแทรกตาราง - คลิกท่เี ครอื่ งมอื Table จะได้หนา้ ต่าง Table ขึน้ มา - เลือกลักษณะตาราง เช่น 3 แถว 3 คอลัมน์ แลว้ คลิกปุ่ม OK - ตารางจะแทรกในเลเยอรท์ ันที ปรบั ขนาดตารางและตกแตง่ ตาราง (ตามทไ่ี ด้ศึกษามาในบทที่ 5) 2. การปรับแต่งรายละเอยี ดของเลเยอร์ การปรับแต่งเลเยอร์ โดยทั่วไปจะใช้ Properties Inspector ซึ่งเมื่อคลิกที่เลเยอร์จะได้ Properties หนา้ ตาดังนี้ Layer ID หมายถึง หมายเลขอ้างอิงเมื่อเรียกใช้ Layer นั้น ๆ เช่น Layer1, Layer2 ซึ่งจะเรียงลำดับ เลเยอร์ ท่ีสร้างก่อนเปน็ หลัก L และ T หมายถึง การกำหนดตำแหนง่ ของเลเยอร์ ซึง่ ย่อมาจาก Left และ Top

W และ H หมายถงึ การกำหนดขนาดของเลเยอร์ ซ่งึ ย่อมาจาก Width และ Height มีหนว่ ยเปน็ พิกเซล (Pixel) Z-Index ใชใ้ นการเปล่ยี นลำดบั เลเยอร์ Bg image สำหรบั ปรบั แต่งสีและรปู ภาพพืน้ หลังเลเยอร์ Vis สำหรับกำหนดว่าจะแสดงหรอื ซ่อนเลเยอร์ Overflow หมายถึง การตงั้ ค่าเผ่อื องคป์ ระกอบทมี่ ีขนาดใหญ่กวา่ เลเยอร์ ซง่ึ แบง่ ออกเป็น Visible ขยายเลเยอร์เพอื่ ให้เหน็ ทง้ั หมด Hidden จำกัดเลเยอร์เทา่ เดิม Scroll ใหส้ รา้ งสกรอล์บารโ์ ดยอัตโนมตั ิ Auto ใหส้ รา้ งสกรอล์บาร์อตั โนมัตเิ มือ่ ขนาดองค์ประกอบใหญก่ วา่ เลเยอร์ Clip สำหรับจำกดั สว่ นในการแสดงผล โดยมตี ำแหนง่ L (Left), R (Right), T (Top), B (Bottom) การเคล่ือนยา้ ยเลเยอร์ เมื่อสร้างเลเยอร์เสร็จแล้ว ตำแหน่งเคอร์เซอร์จะกะพริบอยู่ในเลเยอร์ สามารถพิมพ์ข้อความลงไปได้ เหมอื นการพิมพง์ านปกติ โดยขอ้ ความจะปรากฏอยู่ด้านบนของเลเยอร์ - การย้ายเลเยอรด์ ้วย Properties โดยกำหนดเป็นตวั เลขท่ี L (Left) และ T (Top) - การใช้เมาส์ ให้เล่อื นเมาส์ไปตรงเสน้ ขอบหรือปุ่ม เมาส์จะเปลี่ยนเป็น คลิกเมาส์ค้าง ไวแ้ ล้วลากยา้ ยไปยงั ตำแหนง่ ทตี่ ้องการจงึ ให้ปลอ่ ยเมาส์ การย่อ / ขยายเลเยอร์ - คลิกท่ีเลเยอร์ ใช้ Properties กำหนดทชี่ ่อง W เพือ่ กำหนดความกวา้ ง และ H เพือ่ กำหนดความสูง โดยกำหนดเปน็ ตัวเลข Pixel

- คลกิ ที่เลเยอร์ เลอ่ื นเมาส์ไปท่ปี ุ่มแฮนเดลิ ดา้ นใดด้านหน่งึ เมาสจ์ ะเปลย่ี นเป็นรปู ลกู ศร 2 ทิศ คลกิ คา้ งไว้แลว้ ลากเมาสเ์ พอื่ ยอ่ หรอื ขยายเลเยอร์ การใสส่ ีและภาพพนื้ หลังเลเยอร์ - การใส่สพี ืน้ หลังให้คลกิ ท่ีเลเยอร์ แลว้ คลกิ เลอื ก Bg Color ที่ Properties Inspector

- การใส่ภาพพน้ื หลัง ให้คลิกเลือกที่ Bg Image ท่ชี ่อง Properties Inspector - เลอื กภาพทต่ี อ้ งการจากหนา้ ตา่ ง Select Image Source 3. การใช้งานพาเนลเลเยอร์ พาเนลเลเยอร์ มไี วส้ ำหรบั จดั การกบั เลเยอร์ เช่น จัดวางลำดับเลเยอร์ เปลีย่ นชอื่ เลเยอร์ ลบเลเยอร์ เป็น ตน้ การจดั ลำดบั เลเยอร์

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

- พิมพ์ชื่อใหม่ลงไปแทนที่คำว่า Layer หรือคลิกที่เลเยอร์เว็บเพจแล้วเปลี่ยนชื่อท่ี Layer ID ของ Properties Inspector ก็ได้ การลบเลเยอร์ การลบเลเยอรท์ ีต่ ้องการให้คลิกที่เลเยอร์น้ัน ๆ แล้วคลิกปุ่ม < Delete > ถ้าต้องการเรียกเลเยอรท์ ี่เพง่ิ ลบไปกลับคนื มา ใหค้ ลกิ คำส่งั Edit >> Undo >> Delete หรือใชแ้ ป้น < Ctrl > + < Z > 4. การสรา้ งเลเยอร์ซ้อนกนั ในบางกรณีอาจจะต้องนำเลเยอร์หลายอันมาซ้อนทับกันอยู่ในเลเยอร์แม่ (Parent Layer) อันใหญ่ อันหนึ่ง เพื่อที่จะใส่ข้อความ ภาพประกอบ หรือตาราง การซ้อนเลเยอร์ช่วยให้เว็บเพจน่าสนใจมากขึ้น ช่วย ประหยัดเนอื้ ท่ี สะดวกเวลาเคลื่อนย้าย แกไ้ ข และปรบั แตง่ เวบ็ เพจให้สวยงาม การซอ้ นเลเยอรม์ วี ธิ ที ำ ดังน้ี - วาดเลเยอรด์ ้วยเครือ่ งมือ Draw Layer โดยวาดเลเยอรแ์ มก่ ่อน แลว้ กดแปน้ < Alt > คา้ งไว้ พร้อมกบั ลากเมาสเ์ พื่อสรา้ งเลเยอร์ย่อยให้ซ้อนกัน

- หรือใช้พาเนลเลเยอร์ โดยคลิกที่เลเยอร์ย่อยพร้อมกับกดแป้น < Ctrl > ค้างไว้แล้วลากไปวางยัง เลเยอรแ์ ม่ - หรอื คลิกเลอื กเลเยอรแ์ ลว้ ใชเ้ มนู Insert >> Layout Objects >> Layer

การกำหนดให้เลเยอร์ที่สร้างให้ทีหลังซ้อนกันอัตโนมัติทุกครั้งให้เลือกคำสั่ง Edit >> Preference… หรือ < Ctrl > + < U > จะได้หน้าต่าง Preferences คลิกที่ Layers ใน Category แล้วเลือกตัวเลือก Nest when creates within a layer 5. การแปลงเลเยอร์ การแปลงเลเยอร์ ในการใช้เลเยอร์จัดองค์ประกอบต่าง ๆ ในหน้าเว็บเพจสามารถทำได้ง่ายและสะดวกแต่ผู้เข้าชมที่ใช้ บราวเซอร์รุน่ ตํา่ กว่าเวอร์ชัน 4 จะไม่สามารถชมหน้าเว็บเพจทีส่ รา้ งจากเลเยอรไ์ ด้ สำหรับในกรณีนีม้ ีวิธีแกไ้ ขคือ เปลี่ยนเลเยอรใ์ ห้เปน็ ตาราง ซง่ึ จะทำใหบ้ ราวเซอร์ทั่วไปแสดงข้อมูลได้ - คลิกเมนู Modify >> Convert >> AP Divs to Table - จะปรากฏหน้าตา่ งตง้ั คา่ ตาราง Convert AP Divs to Table

- คลิกปุม่ OK การแปลงตารางเปน็ เลเยอร์ - คลิกเมนู Modify >> Convert >> Table to AP Divs… - จะปรากฏหน้าต่างต้งั คา่ ต่าง ๆ ในสว่ นของ Convert Tables to AP Divs…

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

1. ขน้ั นำเข้าสบู่ ทเรียน ( 15 นาที ) 1. ขน้ั นำเขา้ ส่บู ทเรียน ( 15 นาที ) 1. ผู้สอนใหผ้ ู้เรยี นออกมาแสดงความคิดเห็น 1. ผู้เรียนแสดงความคิดเห็นเรื่อง การสร้างเล เก่ยี วกบั การสรา้ งเลเยอร์ ตามความเขา้ ใจของตนเอง เยอร์ ตามความเข้าใจของตนเอง 2. ผ้สู อนแจง้ จดุ ประสงค์การเรียนของ หน่วยที่ 8 2. ผู้เรียนทำความเข้าใจเกี่ยวกับจุดประสงค์การ เร่ือง การสรา้ งเลเยอร์ เรียนของ หน่วยท่ี 8 เร่ือง การสรา้ งเลเยอร์ 3. ผู้สอนให้ผู้เรียนสร้างเลเยอร์พร้อมให้เหตุผล 3. ผู้เรยี นสร้างเลเยอรพ์ ร้อมใหเ้ หตุผลประกอบ ประกอบ 2. ขนั้ ให้ความรู้ (255 นาที) 2. ขัน้ ให้ความรู้ (255 นาที ) 3. ผูส้ อนแนะนำวธิ กี ารใช้ PowerPoint หนว่ ย 3. ผู้เรียนศึกษา PowerPoint หน่วยที่ 8 เรื่อง ที่ 8 เรื่อง การสร้างเลเยอร์ และให้ผู้เรียนศึกษา การสร้างเลเยอร์ และให้ผู้เรียนศึกษาเอกสาร เอกสารประกอบการสอนการสรา้ งเว็บไซต์ หน่วยที่ 8 ประกอบการสอนการสร้างเว็บไซต์ หน่วยที่ 8 หน้าท่ี หน้าท่ี 142-154 142-154 4. ผ้สู อนและผ้เู รียนร่วมกนั ปรับแตง่ รายละเอียด 4. ผู้เรียนร่วมกันปรับแตง่ รายละเอียดของเลเยอร์ ของเลเยอร์ตามทไี่ ดศ้ ึกษา PowerPoint ตามทไี่ ด้ศกึ ษา PowerPoint 3. ขน้ั ประยุกต์ใช้ ( 180 นาที ) 3. ขน้ั ประยกุ ตใ์ ช้ ( 180 นาที ) 4. ผู้สอนให้ผู้เรียนใบงานหน่วยที่ 8 หน้า 156- 4. ผู้เรียนทำใบงานหน่วยที่ 1 หน้าที่ 13-14 157 เรอ่ื ง พื้นฐานการสร้างเว็บไซต์ 5. ผู้สอนให้ผู้เรียนทำแบบฝึกหัด หน่วยที่ 8 5. ผู้เรียนทำแบบฝึกหัด หน่วยที่ 1หน้าที่ 15- หน้าที่ 158-160 16 6. ผสู้ อนใหผ้ ูเ้ รยี นสืบคน้ ข้อมลู จากอินเทอร์เน็ต 4. ข้ันสรปุ และประเมินผล ( 60 นาที ) 6. ผู้เรียนสบื คน้ ขอ้ มลู จากอนิ เทอร์เนต็ 6. ผ้สู อนและผู้เรยี นรว่ มกนั สรุปเน้ือหาที่ได้เรียน 4. ข้นั สรปุ และประเมินผล ( 60 นาที ) ใหม้ คี วามเข้าใจในทิศทางเดยี วกัน 6. ผู้สอนและผู้เรียนร่วมกันสรุปเนื้อหาที่ไดเ้ รยี น 7. ผู้สอนให้ผู้เรียนทำกิจกรรมบูรณาการ เพอ่ื ใหม้ คี วามเขา้ ใจในทศิ ทางเดยี วกัน เศรษฐกจิ พอเพียง หนา้ 160 7. ผเู้ รียนทำกิจกรรมบรู ณาการเศรษฐกิจพอเพียง หนา้ 160 กจิ กรรมการเรียนการสอนหรือการเรยี นรู้ ขั้นตอนการสอนหรอื กจิ กรรมของครู ขนั้ ตอนการเรยี นรหู้ รือกิจกรรมของนกั เรยี น

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

22. จัดเตรียมเอกสาร สือ่ การเรยี นการสอนหน่วยท่ี 8 23. ทำความเขา้ ใจเก่ียวกบั จดุ ประสงคก์ ารเรียนของหนว่ ยเรยี นที่ 8 และใหค้ วามรว่ มมือในการทำ กิจกรรมต่าง ๆ ขณะเรียน 1. ปฏบิ ตั ิตามใบงานท่ี 8 เร่ือง การสร้างเลเยอร์ 2. ทำแบบฝึกหดั หนว่ ยที่ 8 3. ร่วมกันสรุป “การสรา้ งเลเยอร์” หลังเรยี น 1. กิจกรรมบูรณาการอาเซียน คำถาม 14. ภาพกราฟกิ ทเี่ หมาะสำหรบั ทำเวบ็ เพจ มีกช่ี นดิ อะไรบา้ ง และมีลักษณะอย่างไร 15. เครื่องมือของโปรแกรม Adobe Dreamweaver ทใ่ี ช้ปรบั แต่งภาพ มีอะไรบ้าง และหนา้ ทีอ่ ะไร 16.การใส่ภาพลงบนเว็บเพจมีก่ขี ั้นตอน อะไรบา้ ง 17. ภาพประกอบในเวบ็ เพจ มคี วามสำคญั อยา่ งไร 18. การปรับแต่งคณุ สมบัติของภาพมีเคร่อื งมืออะไรบ้าง ผลงาน/ชิน้ งาน/ความสำเรจ็ ของผ้เู รียน ใบงาน แบบฝกึ หดั กจิ กรรม สมรรถนะท่พี งึ ประสงค์ ผู้เรียนสร้างความเข้าใจเก่ยี วกบั การสรา้ งเลเยอร์ 33. วิเคราะหแ์ ละตีความหมาย 34. ตง้ั คำถาม

35. อภิปรายแสดงความคิดเห็นระดมสมอง 36. การประยุกตค์ วามร้สู ูง่ านอาชีพ สมรรถนะการปฏบิ ตั ิงานอาชีพ 9. สรา้ งเลเยอร์ สมรรถนะการขยายผล ความสอดคล้อง จากการเรียน เรื่อง การสร้างเลเยอร์ ทำให้ผู้เรียนมีความรู้เพิ่มเกี่ยวกับ Layer เป็นเครื่องมือหนึ่งใน Dreamweaver ทีเ่ หมาะในการใช้จัดหน้าเว็บเพจ เนื่องจากมีความสะดวกในการเคลื่อนย้ายหรือจัดหนา้ เว็บได้ตาม ความต้องการ ทั้งน้ีเพราะ Layer เปรียบเสมือนแผ่นใสที่สามารถนำองค์ประกอบต่าง ๆ มาวางไว้ภายใน และซ้อน กันหลายช้นั ได้ สอ่ื การเรียนการสอน/การเรยี นรู้ ส่ือสง่ิ พมิ พ์ 33. เอกสารประกอบการสอนวชิ า การสร้างเวบ็ ไซต์ (ใชป้ ระกอบการเรยี นการสอนจุดประสงคเ์ ชิง พฤติกรรมข้อท่ี 1-8) 34. ใบความรูท้ ่ี 8 เรือ่ ง การสร้างเลเยอร์(ใช้ประกอบการเรียนการสอนขั้นให้ความรู้ เพ่อื ให้บรรลุ จุดประสงคเ์ ชิงพฤตกิ รรมขอ้ ที่ 1-8)

35. ใบงานที่ 8 เร่ือง การสร้างเลเยอร์ขน้ั ประยกุ ตใ์ ช้ 1 36. แบบฝึกหดั หน่วยท่ี 8 การสร้างเลเยอร์ขั้นประยกุ ตใ์ ช้ 2 37. กจิ กรรมบรู ณาการอาเซียน ใช้ประกอบการสอนข้นั สรุป และประเมนิ ผล ขอ้ 2 38. แบบประเมินผลงานตามใบงาน ใช้ประกอบการสอนขั้นประยกุ ต์ใช้ ขอ้ 1 39. แบบประเมนิ พฤติกรรมการทำงาน ใช้ประกอบการสอนขัน้ สรุป สื่อโสตทัศน์ (ถ้าม)ี 1. เครือ่ งไมโครคอมพิวเตอร์ 2. PowerPoint เรอื่ ง การสรา้ งเลเยอร์ สอื่ ของจรงิ การสรา้ งเลเยอร์ (ใช้ประกอบการเรยี นการสอนจุดประสงคเ์ ชงิ พฤติกรรมขอ้ ที่ 1-8) แหลง่ การเรยี นรู้ ในสถานศึกษา 1. หอ้ งสมุดวิทยาลยั เทคนคิ สมทุ รสาคร 2. ห้องปฏบิ ตั กิ ารคอมพิวเตอร์ ศกึ ษาหาขอ้ มูลทางอินเทอรเ์ น็ต

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

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

รายละเอยี ดการประเมินผลการเรยี นรู้ • จดุ ประสงค์เชิงพฤตกิ รรม ขอ้ ท่ี 1 อธิบายเกยี่ วกบั การสร้างเลเยอรไ์ ด้ 25. วิธีการประเมิน : ทดสอบ 26. เคร่ืองมือ : แบบทดสอบ 27. เกณฑ์การให้คะแนน : อธิบายเกีย่ วกบั การสร้างเลเยอร์ได้ จะได้ 1 คะแนน • จดุ ประสงค์เชงิ พฤตกิ รรม ข้อท่ี 2 สรา้ งเลเยอรไ์ ด้ 25. วิธกี ารประเมิน : ทดสอบ 26. เครือ่ งมอื : แบบทดสอบ 27. เกณฑ์การใหค้ ะแนน : สรา้ งเลเยอร์ได้ จะได้ 1 คะแนน • จุดประสงค์เชิงพฤตกิ รรม ขอ้ ที่ 3 ปรับแตง่ รายละเอียดของเลเยอร์ได้ 22. วธิ กี ารประเมนิ : ทดสอบ 23. เครื่องมอื : แบบทดสอบ 24. เกณฑ์การให้คะแนน : ปรบั แต่งรายละเอียดของเลเยอรไ์ ด้ จะได้ 1 คะแนน • จดุ ประสงค์เชงิ พฤติกรรม ข้อท่ี 4 ใชง้ านพาเนลเลเยอรไ์ ด้ 8. วิธีการประเมิน : ตรวจผลงาน 9. เครือ่ งมอื : แบบประเมินกระบวนการทำงานกลมุ่ 10. เกณฑ์การใหค้ ะแนน : ใช้งานพาเนลเลเยอร์ได้ จะได้ 1 คะแนน • จุดประสงคเ์ ชงิ พฤตกิ รรม ข้อที่ 5 สร้างเลเยอร์ซ้อนกนั ได้ 13. วธิ ีการประเมนิ : ตรวจผลงาน 14. เครื่องมอื : แบบประเมนิ กระบวนการทำงานกลมุ่ 15. เกณฑก์ ารใหค้ ะแนน : สร้างเลเยอรซ์ อ้ นกันได้ จะได้ 1 คะแนน • จดุ ประสงคเ์ ชงิ พฤติกรรม ขอ้ ที่ 6 แปลงเลเยอรไ์ ด้

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

ตอบ Layer เป็ นเครื่องมือหนึ่งใน Dreamweaver ที่เหมาะในการใช้จัดหน้าเว็บเพจเนื่องจากมีความ สะดวกในการเคล่อื นย้ายหรือจดั หนา้ เวบ็ ไดต้ ามความต้องการ ทัง้ น้เี พราะLayer เปรียบเสมือนแผน่ ใสที่สามารถ นำองค์ประกอบตา่ ง ๆ มาวางไว้ภายใน และซ้อนกนั หลายช้นั ได้ 2. จงบอกการใสร่ ปู ภาพในเลเยอร์มาเป็นขอ้ ๆ พอเขา้ ใจ ตอบ 1. คลกิ ท่ีเลเยอรท์ ี่ต้องการจะแทรกรูปภาพ 2. คลกิ ที่คำสง่ั Insert >> Image หรือ เคร่อื งมอื Image บนกลุ่มเครอื่ งมอื Common 3. จะได้หนา้ ต่าง Select Image Source เลอื กรูปภาพท่ตี อ้ งการแล้วคลิก OK 4. ภาพที่เลือกจะแทรกอยู่ในเลเยอร์ทันที หากภาพใหญ่เกนิ ไปเลเยอร์จะขยายให้เท่ากบั ขนาด ของภาพโดยอัตโนมตั ิ 5. คลกิ ที่ปมุ่ แฮนเดิลเพ่ือปรบั ขนาดภาพและเลเยอรต์ ามความเหมาะสม 24. จงบอกการใส่ตารางในเลเยอร์มาเปน็ ข้อ ๆ พอเขา้ ใจ ตอบ ตารางทีส่ รา้ งในเลเยอร์อาจจะเป็ นตารางเปลา่ ท่ีสร้างข้ึนมาใหม่ หรอื คัดลอกตารางท่ีสร้างไว้แล้ว มาใสก่ ไ็ ด้ ดังน้ี 1) คลกิ ท่เี ลเยอรท์ จ่ี ะแทรกตาราง 2) คลิกที่เคร่อื งมอื Table จะได้หน้าต่าง Table ข้นึ มา 3) เลอื กลักษณะตาราง เช่น 3 แถว 3 คอลัมน์ แล้วคลิกป่มุ OK 4) ตารางจะแทรกในเลเยอร์ทนั ที ปรบั ขนาดตารางและตกแต่งตาราง 4. การยอ่ และขยายเลเยอร์ มกี แ่ี บบ จงอธิบาย ตอบ มี 2 แบบ 1. คลิกที่เลเยอร์ ใช้ Properties กำหนดที่ช่อง W เพื่อกำหนดความกว้าง และ H เพื่อกำหนด ความสูง โดยกำหนดเปน็ ตัวเลข Pixel 2. คลกิ ท่เี ลเยอร์ เลอื่ นเมาสไ์ ปทป่ี ุ่มแฮนเดิลด้านใดด้านหน่งึ เมาส์จะเปลี่ยนเป็นรูปลูกศร 2 ทิศ คลกิ ค้างไว้แล้วลากเมาสเ์ พอ่ื ย่อหรือขยายเลเยอร์ 5. การใช้งานพาเนลเลเยอร์มีการจัดวางลำดบั เลเยอร์ อย่างไร ? ตอบ ในกรณีที่สร้างเลเยอร์ไว้หลายอัน เลเยอร์ที่สร้างก่อนจะวางอยู่ล่างสุด เลเยอร์อื่น ๆ จะถูกวาง ซอ้ น ๆ กันข้ึนมาด้านบนโดยลำดบั การจัดลำดับหรอื สลบั เลเยอร์ให้เลือกเลเยอร์ที่ต้องการทพ่ี าเนล แลว้ พิมพ์ตัวเลขคา่ ท่ีต้องการลงไป โดย ค่าท่ีมีตวั เลขน้อยที่สุดจะอยู่ล่างสุด เฉลยแบบฝึกหดั หนว่ ยที่ 8 1. การแทรกรปู ภาพจะตอ้ งใช้คำส่ังใด ตอบ ง. Insert >> Image

2. Z-Index คอื ข้อใด ตอบ ก. ใชใ้ นการเปลี่ยนลำดับเลเยอร์ 3. Bg image คือขอ้ ใด ตอบ ข. ใชส้ ำหรบั ปรับแต่งสแี ละรปู ภาพพน้ื หลงั เลเยอร์ 4. Visible คือขอ้ ใด ตอบ ค. ขยายเลเยอรเ์ พอื่ ให้เห็นท้ังหมด 5. Hidden คอื ขอ้ ใด ตอบ ก. จำกดั เลเยอรเ์ ท่าเดมิ 6. ข้อใดคือวิธกี ารเพ่ิมจำนวนเฟรม ตอบ ข. คลิกที่เลเยอร์ แลว้ คลกิ เลือก Bg Color ท่ี Properties Inspector 7. คำส่ังดังต่อไปน้คี ือคำสง่ั ใด Edit >> Undo >> Delete ตอบ ค. การเรยี กคนื Layer ท่เี พ่ิงลบไป 8. จากข้อ 7. ถา้ ใช้แป้ นคียล์ ัดแทนการเลอื กคำสง่ั ควรใชค้ ีย์ลดั ข้อใด ตอบ ง. < Ctrl > + < Z > 9. คอื สญั ลักษณข์ องข้อใด ตอบ ข. การปิ ดเลเยอร์ 10. คือสญั ลกั ษณ์ของข้อใด ตอบ ก. การเปิ ดเลเยอร์ เฉลยกจิ กรรมบรู ณาการอาเซยี น คำสงั่ ใหน้ กั เรียนเลือกคำทใ่ี ห้ดังตอ่ ไปนี้ไปใสห่ น้าประโยคหรือความหมายให้ถูกตอ้ ง Layer ID Z-Index Bg image Overflow Hidden

Visible Scroll Auto Width(W) และ Height(H) Left(L) และ Top(T) บั นทึกหลงั การสอน หน่วยท่ี 8 การสรา้ งเลเยอร์

ผลการใช้แผนการสอน 22. กจิ กรรมการสอนจะตอ้ งปรบั ตามสถานการณ์เพ่ือความเหมาะสม 23. ตอ้ งให้ผเู้ รยี นมีสว่ นรว่ มในการหาสอื่ การสอนร่วมกับผูส้ อน 24. เนอื้ หาจะต้องปรบั ตามเทคโนโลยที เ่ี ปลยี่ นไปของการสร้างเลเยอร์ ผลการเรยี นของนักเรยี น ใบ 1. นกั ศึกษาส่วนใหญม่ คี วามเขา้ ใจในบทเรยี น อภิปรายตอบคำถามในกลมุ่ และร่วมกนั ปฏิบตั ิ งานที่ได้รบั มอบหมาย 2. นักศึกษากระตือรอื ร้นและรบั ผดิ ชอบในการทำงานกลุ่มเพอ่ื ใหง้ านสำเรจ็ ทนั เวลาทก่ี ำหนด 3. นกั ศกึ ษาสรา้ งเลเยอร์ 4. นักศกึ ษาปรบั แตง่ รายละเอยี ดของเลเยอร์ 5. นักศกึ ษาใช้งานพาเนลเลเยอร์ 6. นกั ศกึ ษาสร้างเลเยอรซ์ อ้ นกัน 7. นกั ศกึ ษาแปลงเลเยอร์ ผลการสอนของครู 18. สอนเนอ้ื หาได้ประมาณ 80% บางส่วนให้นกั ศกึ ษาคน้ คว้าเพม่ิ เตมิ 19. แผนการสอนปรบั เปล่ยี นบ้างตามความเหมาะสม 3. สอนทันตามเวลาทกี่ ำหนด

แผนการสอน/แผนการเรยี นรภู้ าคทฤษฎี แผนการสอน/การเรยี นรู้ภาคทฤษฎี หน่วยท่ี 9 ชอ่ื วิชา การสร้างเวบ็ ไซต์ สอนสัปดาห์ท่ี 13-14 ชอื่ หนว่ ย การสร้างฟอร์ม คาบรวม 56 ชอื่ เรื่อง การสร้างฟอรม์ จำนวนคาบ 4 หวั ขอ้ เร่อื ง ดา้ นความรู้ 13. การสรา้ งฟอรม์ 14. การทำงานของฟอรม์ (From) และเครือ่ งมอื ในการสรา้ งฟอรม์ ดา้ นทักษะ 15. สร้างฟอรม์ และฟลิ ด์กรอกขอ้ ความ 16. สรา้ งรายการตัวเลอื ก (List/Menu) 17. สร้างพ้ืนที่รบั ขอ้ ความ 18. สร้าง Radio Button 19. การสร้าง checkbox 20. สร้าง File Field 21. สรา้ งปมุ่ มาตรฐาน 22. สร้าง Jump menu ดา้ นจิตพสิ ัย 23. นำการสรา้ งสรา้ งฟอร์มมาประยกุ ต์ใช้ ดา้ นคณุ ธรรม จรยิ ธรรม/บูรณาการเศรษฐกจิ พอเพียง 24. สรา้ งฟอร์มได้อยา่ งถกู ตอ้ งเหมาะสม สาระสำคัญ ลักษณะของฟอร์มที่ทำงานบนเว็บเพจเรียกว่า “ไดนามิกเว็บเพจ” (Dynamic Web) หมายถึง เว็บ เพจทมี่ กี ารโต้ตอบกับผู้ใช้ เช่น แบบฟอร์มสมัครสมาชิก แบบฟอรม์ สอบถามความคิดเห็นแบบฟอร์มค้นหาข้อมูล เปน็ ตน้ สมรรถนะอาชพี ประจำหนว่ ย

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

1. การทำงานของฟอรม์ (Form) และเคร่อื งมอื ในการสรา้ งฟอร์มฟอรม์ (Form) ฟอร์ม (Form) เป็นเครื่องมือที่ช่วยทำให้เกิดปฏิสัมพันธ์ระหว่างผูใช้งานกับเว็บไซต์โดยใช้ฟิลด์ Field ชนิดต่าง ๆ เช่น Text Field, Button, Check Box ในการรับข้อมูลจากผูใช้เพื่อนำไปผ่านการประมวลผลใน เซริ ฟ์ เวอร์ ลักษณะของฟอร์มท่ีทำงานบนเว็บเพจเรียกว่า ไดนามิกเว็บเพจ (Dynamic Webpage) หมายถึง เว็บ เพจทีม่ กี ารโตต้ อบกบั ผูใช้ เช่น แบบฟอร์มสมคั รสมาชิก แบบฟอร์มสอบถามความคิดเห็น แบบฟอร์มค้นหาข้อมูล เปน็ ต้น หลักการทำงานของฟอร์มบนไดนามิกเว็บเพจ คือ จะต้องสร้างฟอร์มไว้บนเว็บเพจเมื่อผู้ใช้กรอกข้อมลู และส่งข้อมูลเข้ามายังเว็บเซิร์ฟเวอร์ เซิร์ฟเวอร์จะค้นหาเว็บเพจและส่งข้อมูลไปยังแอพพลิเคชัน เซิร์ฟเวอร์ เซริ ์ฟเวอร์จะประมวลผลข้อมูลที่ไดร้ ับ แลว้ สง่ ผ่านหน้าเวบ็ ที่ประมวลผลแล้วไปยงั เวบ็ เซิร์ฟเวอร์ แล้วส่งผลลัพธ์ท่ี ไดไ้ ปยังเบราว์เซอรอ์ กี คร้ัง เคร่ืองมอื ท่ีใชใ้ นการสร้างฟอร์ม

1. ฟอรม์ (Form) ใชส้ ร้างฟอร์มที่มีขอบเขตครอบคลุมฟิลดท์ อี่ ยใู่ นฟอร์มทงั้ หมด 2. Text Field เป็นฟิลดส์ ำหรับข้อมูลที่มีลักษณะเป็นข้อความสั้น ๆ ไม่เกิน 1 บรรทัด เช่น ชื่อ, อีเมล เป็นตน้ 3. Hidden Field เป็นฟิลด์ที่ถูกซ่อนไม่ให้ปรากฏขึ้นบนฟอร์ม ทำหน้าที่ส่งข้อมูลที่เรากำหนดไว้ ล่วงหน้าแลว้ ไปยังเวบ็ เซิรฟ์ เวอรพ์ ร้อมกบั ขอ้ มูลอื่นท่กี รอก 4. Text Area เป็นฟิลด์สำหรับข้อมูลที่มีลักษณะเป็นข้อความ หรือตัวอักษรมีความยาวมากกว่า 1 บรรทดั เช่น ข้อความในการส่งอเี มล 5. Check Box เปน็ ฟลิ ดส์ ำหรับขอ้ มูลทม่ี ลี ักษณะใหเ้ ลือกเช็กกี่ขอ้ กไ็ ด้จากตวั เลือกทงั้ หมด 6. Radio Button เป็นฟลิ ด์สำหรบั ใหเ้ ลอื กเช็กเพยี งข้อใดขอ้ หน่งึ 7. Radio Group เป็นฟลิ ด์ที่แสดงรายการใหเ้ ลือกจากรายการท่ีมตี วั เลือกคอ่ นข้างมาก 8. List / Menu เปน็ ฟลิ ดท์ แ่ี สดงรายการใหเ้ ลอื กจากขอ้ มูลที่กำหนดไว้ 9. Jumb Menu เป็นการออกแบบฟอร์มให้ลิงก์ไปยังเว็บไซต์ หรือ URL ทตี่ ้องการ 10. Image Field เป็นฟิลด์สำหรบั นำภาพกราฟกิ มาใชแ้ ทนปุ่ม Submit ของฟอรม์ 11. File Field เป็นฟิลด์สำหรับเลอื กไฟลใ์ นเคร่อื งของตน เพอ่ื อพั โหลดขนึ้ บนเซิร์ฟเวอร์ 12. Button เป็นปุ่มสำหรับยนื ยนั ขอ้ มลู ภายในฟอร์ม 13. Label เป็นฟิลด์สำหรบั ใส่ข้อความอธิบายกำกบั ฟลิ ด์ 14. Field Set เปน็ ฟิลดท์ ี่ใช้เพ่ือจัดกลมุ่ ฟิลดต์ ่าง ๆ รวมเขา้ ไวด้ ว้ ยกัน โดยมีขอ้ ความกำกับกลุ่มของฟิลด์ น้นั อยู่ 2. การสร้างฟอร์มและฟลิ ด์กรอกข้อความ การสร้างฟอรม์ มีวธิ ีการ ดงั นี้ 1. คลกิ ท่ีตำแหน่งทีจ่ ะสร้างฟอร์ม คำสั่ง Insert >> Form >> Form

2. จะปรากฏเส้นประอยู่ที่ตำแหน่งของเคอร์เซอร์ ซึ่งเป็นตำแหน่งที่จะสร้างฟอร์มพิมพ์ข้อความ “แบบฟอร์มสมคั รสมาชิก” 3. สร้างฟิลด์ข้อความ (Text Field) สำหรับ E-mail คำสัง่ Insert >> Form >>Text Field จะได้ หน้าต่าง Input Tag Accessibility Attributes ตั้งชื่อ Text Field ในช่อง Label เสร็จแล้วคลิก OK จะได้ Text Field ช่อื E-mail บนพืน้ ทส่ี ร้างฟอร์ม 4. สรา้ ง Text Field “รหัสผา่ น” พิมพร์ หัสผ่านอกี ครง้ั “ช่อื ” “นามสกุล”

3. การสรา้ งรายการตวั เลอื ก (List/Menu) การสรา้ งรายการให้เลอื กแบบ List / Menu เป็นรายการทม่ี ขี ้อมูลท่ีแนน่ อนเพอ่ื ให้ผู้สมัครเลือก รายการ ใดรายการหน่ึง เช่น วันท่ี เดือน เปน็ ต้น มวี ิธกี ารสร้าง ดังน้ี 1. คลิกตำแหน่งที่จะสร้างรายการ แล้วเลือกคำสั่ง Insert >> Form >> Select(List / Menu) ตั้งช่ือ Label เป็นวนั เกิด 2. เสร็จแล้วคลิกเลือกรายการที่สร้างไว้ ดูที่ Properties เลือก Type เป็น Menu แล้วกำหนด รายละเอยี ดของ List ท่ีปมุ่ จะไดห้ น้าตา่ ง List Values

3. คลิกและพิมพ์ตัวเลขที่ต้องการให้แสดงในรายการที่ Item Label และ Value ซึ่งเป็นค่าที่จะต้อง นำไปใชใ้ นโปรแกรมสคริปต์ คลกิ ที่ปุ่ม เพ่ือเพ่มิ รายการ และปุม่ เพื่อลบรายการออก เสร็จแล้ว คลกิ OK 4. สร้าง List / Menu ใหก้ บั “ เดอื น ” 5. สรา้ ง Text Field ให้กบั “พ.ศ.” โดยกำหนดตัวเลข พ.ศ. ให้ผู้สมัครเดมิ ขึน้ ต้นดว้ ย 25… 6. ให้คลิกที่ตวั เลอื ก Init Val แล้วเติมเลข 25 ลงไป จะได้ตัวอยา่ งแบบฟอร์ม ดงั รปู 4. การสร้างพ้นื ท่ีรับข้อความ ในกรณีที่ต้องพิมพ์ขอ้ ความยาว ๆ เช่น ที่อยู่ผู้สมัคร ไม่สามารถพิมพ์ด้วย Text Field ปกติจะต้องสร้าง พนื้ ที่รบั ขอ้ ความ หรอื Text area ข้ึนมา ดงั น้ี 1. คลกิ ท่ีตำแหนง่ ที่จะสร้าง Text area แล้วคลิกคำส่งั Insert >> Form >> Text area ตงั้ ช่ือ Label เปน็ “ท่ีอยู่” แล้วคลกิ OK 2. กำหนดรายละเอียดของพื้นที่ Properties เช่น ความยาวตัวอักษร 30 ตัวต่อบรรทัด จำนวน 5 บรรทัด เปน็ ตน้

3. สรา้ ง Text Field “เลอื กจงั หวดั ” และ “รหสั ไปรษณยี ์” โดยกำหนดใหร้ หัสไปรษณีย์ เปน็ ตัวเลข 6 หลัก 5. การสรา้ ง Ratio Button Radio Button เป็นปุ่มสำหรับข้อมูลที่ให้ผู้สมัครเลือกข้อมูลได้เพียงตัวเลือกเดียว โดยจะเป็นข้อมูลที่ กำหนดไว้แนน่ อน เช่น อายุ เพศ สถานภาพสมรส ฯลฯ มวี ิธกี ารสรา้ ง ดงั น้ี 1. เลือกบริเวณทีจ่ ะสรา้ ง Radio Button 2. เลือกคำสัง่ Insert >> Form >> Radio Button ต้งั ชอื่ Label 3. กำหนดค่าตา่ ง ๆ ที่ Properties 4. ทีต่ วั เลือก Checked value เปน็ คา่ ท่จี ะนำไปกำหนดในสครปิ ต์ ดงั นน้ั ถ้า Radio Button มีจำนวน หลายปุ่ม ให้ตั้งชอื่ แตกต่างกันออกไป โดยให้สอ่ื ถึงความหมายของปุ่มน้นั ๆ 6. การสรา้ ง checkbox Checkbox จัดเป็นกล่องรับข้อความชนิดหนึ่งซึ่งเหมาะกับข้อมูลประเภทมีตัวเลือกหลายคำตอบ เช่น สินคา้ ทีช่ อบ รายการโทรทศั น์ท่ีชอบ เป็นตน้ การสร้าง Check Box มีวิธีการทำ ดงั นี้ 1. คลิกบรเิ วณท่ีจะสรา้ ง Check Box 2. คลกิ คำส่งั Insert >> Form >> Check Box 3. ต้งั ช่ือท่ี Label

4. คลิกเลอื ก Check Box และกำหนดคา่ ตา่ ง ๆ ที่ Properties 7. การสรา้ ง File Field File Field เป็นกรอบสำหรับเปิดโอกาสให้ผู้นำไฟล์งาน เช่น ภาพ ข้อความ ตาราง อัพโหลดขึ้นมาใส่ใน เว็บเพจ เชน่ ภาพสมาชิก เปน็ ต้น การสรา้ ง File Field มวี ธิ ที ำดังน้ี 1. สรา้ งขอบเขตของฟอรม์ ท่ีจะใส่ File Field คลกิ คำส่งั Insert >> Form >> File Field 2. ตงั้ ช่อื File Field ในช่อง Label เช่น ภาพสมาชกิ

3. คลิกที่ File Field แล้วเลอื กกำหนดรายละเอยี ดท่ี Properties 4. การต้งั ช่อื File Field Name เปน็ ชอื่ ทีจ่ ะนำไปใชเ้ ป็นตวั แปรในการเขยี นโปรแกรมสคริปต์ได้ 8. การสร้างปุ่มมาตรฐาน ปุ่มมาตรฐาน (Button) เป็นปุม่ ท่สี รา้ งไว้สำหรับประมวลผลคา่ ทงั้ หมด ยกเลิก หรือคนื ค่า เชน่ เม่ือกรอก ขอ้ มลู เสร็จแล้ว คลิกปุ่มตกลง ป่มุ ยกเลิก เป็นต้น โดยปกตจิ ะประกอบด้วยป่มุ การสรา้ งปุม่ มาตรฐานมขี ้ันตอน ดังนี้ 1. สร้างขอบเขตของฟอรม์ เพือ่ สรา้ งปุ่มมาตรฐาน 2. คลิกทีเ่ ครอ่ื งมือ Button และต้ังชอ่ื ท่ชี อ่ ง Label แล้วคลิก OK (ถ้าไมต่ งั้ ชือ่ ปุม่ ให้คลิก OK ได้เลย) 3. จะไดป้ มุ่ มาตรฐานชื่อ Submit คลกิ ทีป่ ่มุ มาตรฐาน แล้วเลือกตวั เลอื กท่ี Properties

4. ตวั เลือก Botton name กำหนดได้ 3 ตัวเลือกอตั โนมตั ิ คือ คลิกท่ี Submit, Reset, Cancel ใน ชอ่ ง Value แล้วเปลี่ยนชื่อปมุ่ เช่น ตกลง เปน็ ตน้ การสรา้ งภาพในฟอรม์ 1. คลกิ เลอื กขอบเขตของฟอรม์ ที่จะใส่ภาพ 2. คลกิ ทีเ่ ครอ่ื งมอื Image Field จะไดห้ น้าตา่ ง Select Image Source ดังน้ี 3. เลอื กภาพทต่ี ้องการ แลว้ คลกิ OK 4. จดั รปู แบบรูปภาพด้วยป่มุ Edit Image ท่ี Properties การจดั กลุ่มฟอร์ม เป็นการรวมกลุม่ ของฟอรม์ ทีม่ เี นอ้ื หาใกลเ้ คยี งกนั หรือเปน็ หมวดหมู่เดียวกัน 1. คลกิ เลอื กเสน้ ประของฟอร์มทจ่ี ะจัดกล่มุ (กดแป้น < Shift > พร้อมเลือกฟอรม์ ทเี่ หลอื ) 2. คลกิ คำส่งั Insert >> Form >> Fieldset จะได้หนา้ ต่าง Fieldset 3. ตัง้ ช่อื Fieldset เช่น ขอ้ มลู สว่ นตัว 4. ด้านบนสดุ ของกลุ่มฟอร์มจะมชี ่อื ท่ตี ัง้ ไว้ และมขี อ้ ความ < /fieldset> อย่ทู ้ายข้อความทเ่ี ลอื ก 9. การสรา้ ง Jump menu

Jump Menu เปน็ การออกแบบฟอรม์ ให้ลงิ ค์ไปยงั เวบ็ ไซต์ หรือ URL ที่ตอ้ งการ 1. คลิกทีต่ ำแหนง่ ที่ตอ้ งการจะสรา้ ง Jump Menu 2. เลอื กคำส่งั Insert >> Form >> Jump Menu จะได้หนา้ ตา่ ง Jump Menu 3. เลือกการต้งั ค่าใน Menu Items และเลือก URL ทีป่ ุ่ม Browse 4. กำหนดลักษณะการเปิดไฟล์ เช่น Main Window 5. กำหนดรูปแบบการทำงานของ Jump Menu ที่ Properties 10. การตรวจสอบการปอ้ นขอ้ มลู ของฟอร์ม เปน็ การตรวจสอบว่าข้อมูลท่ีกรอกเข้ามาน้ันถกู ต้องหรือตรงตามข้อกำหนดท่ีตง้ั ไวห้ รอื ไม่ เช่น หมายเลข โทรศัพท์ รหัสไปรษณยี ์ มีข้นั ตอนดงั น้ี 1. คลกิ เลอื ก Text Field ท่จี ะทำการตรวจสอบ 2. ไปท่ีพาเนล Tag < Form > ท่ตี ัวเลอื ก Behaviors คลิกเครื่องหมาย + แล้วเลอื ก Validate Form

3. จะได้หน้าตา่ ง Validate Form เลือก Text ท่ีต้องการในชอ่ ง Named Fields 4. เลอื ก Accept เปน็ Number คลิก OK

5. จะได้ event เป็น onBlur หมายถึง เมื่อคลิกที่ฟอร์มโดยไมใ่ ส่ค่าใด ๆ ลงไปโปรแกรมจะเตือนให้ใส่ คา่ ลงไปให้ถกู ต้อง • ด้านทกั ษะ+ดา้ นจติ พิสัย (ปฏบิ ัต+ิ ด้านจิตพสิ ยั ) (จุดประสงค์เชิงพฤติกรรมข้อที่ 3-11) 1. ใบงานหนว่ ยท่ี 9 2. แบบฝกึ หัด หนว่ ยที่ 9 3. กิจกรรมบูรณาการอาเซยี น • ด้านคุณธรรม/จริยธรรม/จรรยาบรรณ/บูรณาการเศรษฐกิจพอเพียง (จุดประสงค์เชิง พฤติกรรมขอ้ ที่ 5-12) 1. สรา้ งฟอร์มไดอ้ ย่างถูกต้องเหมาะสม กจิ กรรมการเรียนการสอนหรือการเรยี นรู้ ขัน้ ตอนการสอนหรอื กจิ กรรมของครู ขัน้ ตอนการเรยี นรหู้ รือกิจกรรมของนกั เรยี น

1. ขัน้ นำเขา้ สู่บทเรยี น ( 15 นาที ) 1. ขัน้ นำเขา้ สู่บทเรยี น ( 15 นาที ) 3. ผู้สอนแจ้งจุดประสงค์การเรียนของหน่วยท่ี 3. ผู้เรียนทำความเข้าใจเกี่ยวกับจุดประสงค์การ 9 เรอื่ ง การสรา้ งฟอร์ม เรยี นของหน่วยเรยี นท่ี 9 เร่อื ง การสรา้ งฟอร์ม 4. ผู้สอนให้ผู้เรียนสรุปทำงานของฟอร์ม 4. ผู้เรียนสรุปทำงานของฟอร์ม (From) และ (From) และเครอ่ื งมอื ในการสร้างฟอร์ม เคร่อื งมอื ในการสรา้ งฟอรม์ 2. ข้ันให้ความรู้ ( 255 นาที ) 2. ขนั้ ใหค้ วามรู้ ( 255 นาที ) 1. ผู้สอนให้ผู้เรียนเปิดเอกสารประกอบการ 4. ผู้เรียนเปิดเอกสารประกอบการสอนวิชา การ สอนวิชา การสร้างเว็บไซต์ หน่วยที่ 9 เรื่อง การ สร้างเว็บไซต์ หน่วยท่ี 9 เรอ่ื ง การสร้างฟอร์ม และให้ สร้างฟอร์ม และให้ผู้เรียนศึกษารายละเอียดด้วย ผ้เู รียนศึกษารายละเอยี ดดว้ ยตนเอง ตนเอง 2. ผู้สอนเปิดโอกาส ให้ผู้เรียนถามปญั หา และ 5. ผู้เรียนซักถามข้อสงสัยที่เกิดขึ้นและผู้เรียน ข้อสงสัยจากเน้ือหา โดยครเู ปน็ ผู้ตอบปัญหาท่ีเกิดข้ึน ร่วมมือกบั ผู้สอน ระหว่างการเรียนการสอน 3. ผู้สอนให้ผู้เรียนสร้างฟอรม์ บนเวบ็ เพจ 6. ผ้เู รียนสร้างฟอร์มบนเวบ็ เพจ 3. ขนั้ ประยกุ ตใ์ ช้ ( 60 นาที ) 3. ขนั้ ประยกุ ตใ์ ช้( 60 นาที ) 4. ผู้สอนให้ผู้เรียนทำใบงานหน่วยที่ 9 หน้าที่ 4. ผู้เรยี นทำใบงานหน่วยท่ี 9 หนา้ ที่ 178-179 178-179 5. ผสู้ อนใหผ้ ้เู รียนสบื คน้ ขอ้ มูลจากอินเทอร์เนต็ 5. ผูเ้ รียนสบื ค้นขอ้ มูลจากอนิ เทอรเ์ นต็ กจิ กรรมการเรยี นการสอนหรือการเรยี นรู้ ขั้นตอนการสอนหรือกิจกรรมของครู ขนั้ ตอนการเรยี นรูห้ รือกจิ กรรมของนักเรยี น 4. ข้นั สรุปและประเมนิ ผล ( 180 นาที ) 4. ขั้นสรุปและประเมินผล( 180 นาที )

8. ผู้สอนและผู้เรียนร่วมกันสรุปเนื้อหาที่ได้ 1. ผู้สอนและผ้เู รยี นร่วมกนั สรุปเน้อื หาท่ีได้เรียนให้ เรยี นให้มีความเข้าใจในทศิ ทางเดยี วกนั มคี วามเข้าใจในทศิ ทางเดียวกนั 9. ผู้สอนให้ผู้เรียนทำแบบฝึกหัดหน่วยที่ 9 2. ผ้เู รยี นทำแบบฝึกหัดหนว่ ยท่ี 9 หนา้ ท่ี 180- หนา้ ที่ 180-181 181 10. ผู้สอนให้ผู้เรียนทำกิจกรรมบูรณาการ 3. ผู้เรียนทำกิจกรรมบูรณาการอาเซียน หน้าท่ี อาเซียน หนา้ ที่ 182 182 11. ผู้สอนให้ผู้เรียนศึกษาเพิ่มเติมนอกห้องเรียน 4. ผู้เรียนศึกษาเพิ่มเติมนอกห้องเรียน ด้วย ด้วยบทเรียนคอมพวิ เตอร์ชว่ ยสอนที่จัดทำขึน้ บทเรยี นคอมพิวเตอร์ช่วยสอนที่จัดทำขน้ึ (บรรลุจุดประสงคเ์ ชงิ พฤตกิ รรมขอ้ ท่ี 1-12) (บรรลจุ ุดประสงคเ์ ชงิ พฤติกรรมขอ้ ท่ี 1-12) (รวม 240 นาที หรอื 8 คาบเรียน) งานทม่ี อบหมายหรือกิจกรรมการวัดผลและประเมินผล 1. จัดเตรยี มเอกสาร สอ่ื การเรยี นการสอนหน่วยท่ี 9 2. ทำความเข้าใจเกี่ยวกับจุดประสงค์การเรียนของหน่วยเรียนที่ 9 และให้ความร่วมมือในการทำ กิจกรรมต่าง ๆ

ขณะเรียน 25. ปฏิบัตติ ามใบงานท่ี 9 เรอ่ื ง การสร้างฟอรม์ 26. ร่วมกันสรุป “การสร้างฟอรม์ ” หลังเรียน 1. ทำแบบฝึกหดั หนว่ ยที่ 9 2. ทำกจิ กรรมบรู ณาการอาเซียน คำถาม 19. จงอธบิ ายเกยี่ วกับการสร้างฟอรม์ 20. สามารถสร้างฟอร์มและฟลิ ด์กรอกขอ้ ความไดอ้ ยา่ งไร 21. การสรา้ งรายการตวั เลือก (List/Menu) มีหลักการทำอย่างไร ผลงาน/ชิน้ งาน/ความสำเร็จของผูเ้ รยี น ใบงาน แบบฝึกหัด กิจกรรม สมรรถนะที่พึงประสงค์ ผู้เรียนสรา้ งความเข้าใจเกย่ี วกับการสรา้ งฟอรม์ 37. วเิ คราะหแ์ ละตีความหมาย 38. ตง้ั คำถาม 39. อภิปรายแสดงความคดิ เหน็ ระดมสมอง 40. การประยกุ ต์ความรู้สูง่ านอาชพี สมรรถนะการปฏบิ ตั งิ านอาชพี 1. สรา้ งฟอรม์ บนเวบ็ เพจ สมรรถนะการขยายผล ความสอดคลอ้ ง