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

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

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

แผนการสอน/แผนการเรียนร้ภู าคทฤษฏี แผนการสอน/การเรียนรภู้ าคทฤษฎี หนว่ ยท่ี 3 ชื่อวชิ า การสร้างเวบ็ ไซต์ สอนสปั ดาหท์ ี่ 4 ชื่อหน่วย การจัดตกแต่งข้อความ คาบรวม 16 ช่อื เร่ือง การจัดตกแต่งข้อความ จำนวนคาบ 4 หัวขอ้ เรอ่ื ง ด้านความรู้ 15. การจัดแต่งขอ้ ความ 16. ลกั ษณะตัวอกั ษร 17. ออกแบบสไตล์ CSS ด้านทกั ษะ 18. สร้างข้อความ 19. คดั ลอกข้อความ 20. ข้นึ บรรทดั ใหมใ่ นย่อหน้าเดิม 21. เว้นระหวา่ งขอ้ ความ 22. จัดรปู แบบขอ้ ความ 23. เลือกฟอนต์ให้กบั ข้อความ 24. เพ่มิ ชุดฟอนตท์ ี่ใชก้ ับขอ้ ความ 25. ปรับเปลย่ี นขนาดฟอนต์ 26. เปลีย่ นสฟี อนต์ 27. เนน้ หัวข้อให้โดดเดน่ 28. ปฏบิ ัตติ ามข้นั ตอนการจดั รูปแบบขอ้ ความ ด้านจิตพสิ ัย 15. ประพฤติตามหลกั การจัดและตกแตง่ ขอ้ ความด้วยโปรแกรม Adobe Dreamweaver CS5 ได้ ดา้ นคณุ ธรรม จริยธรรม/บูรณาการเศรษฐกิจพอเพียง 17. จดั และตกแต่งข้อความด้วยโปรแกรม Adobe Dreamweaver CS5 ให้ถกู ต้องและเหมาะสมได้ สาระสำคัญ

ในการจดั ตกแต่งขอ้ ความด้วยโปรแกรม Dreamweaver สำหรับเวอรช์ ั่น ใหมๆ่ ต้ังแต่ CS3 ขึ้นไปนั้น จะมีการใช้ฟังก์ชั่น CSS ขึ้นมาเพื่อเพิ่มความสะดวกสบายในการตั้งค่าข้อความให้ง่ายขึ้น ซึ่งโปรแกรมที่จะใช้ใน การศกึ ษา คอื โปรแกรม Dreamweaver CS5 สมรรถนะอาชีพประจำหน่วย 2. จดั และตกแต่งขอ้ ความดว้ ยโปรแกรม Adobe Dreamweaver CS5 คำศัพท์สำคัญ 2. การสรา้ งขอ้ ความ คือ การพิมพข์ ้อความหรอื บทความทีต่ อ้ งการลงไปในหนา้ เว็บเพจที่เราสรา้ งขึน้ จุดประสงค์การสอน/การเรยี นรู้ • จดุ ประสงคท์ วั่ ไป / บรู ณาการเศรษฐกิจพอเพยี ง 17. เพอ่ื ให้มีความรู้เกี่ยวกบั การอธิบายการจัดแต่งข้อความ (ด้านความร)ู้ 18. เพื่อใหม้ ีความรู้เกย่ี วกับการรวบรวมลักษณะตวั อักษร (ด้านความรู้) 19. เพ่อื ใหม้ ีความรู้เกี่ยวกบั การออกแบบสไตล์ CSS (ดา้ นความร)ู้ 20. เพื่อให้มที กั ษะในการสร้างขอ้ ความ (ด้านทกั ษะ) 21. เพื่อให้มีทักษะในการคดั ลอกข้อความ (ด้านทักษะ) 22. เพือ่ ใหม้ ที ักษะในการข้นึ บรรทัดใหม่ในย่อหนา้ เดมิ ได้ (ด้านทกั ษะ) 23. เพอ่ื ให้มีทกั ษะในการเว้นระหว่างข้อความ (ด้านทกั ษะ) 24. เพือ่ ใหม้ ีทักษะในการจดั รูปแบบข้อความ (ด้านทกั ษะ) 25. เพื่อให้มที กั ษะในการเลือกฟอนตใ์ ห้กับขอ้ ความ (ดา้ นทักษะ) 26. เพ่ือใหม้ ีทกั ษะในการเพิ่มชุดฟอนตท์ ่ใี ช้กบั ขอ้ ความ (ดา้ นทกั ษะ) 27. เพื่อใหม้ ที กั ษะในการปรบั เปลย่ี นขนาดฟอนต์ (ด้านทักษะ) 28. เพอ่ื ใหม้ ีทักษะในการเปล่ียนสฟี อนต์ (ดา้ นทกั ษะ) 29. เพือ่ ให้มีทกั ษะในการเน้นหวั ข้อใหโ้ ดดเด่น (ด้านทกั ษะ) 30. เพือ่ ให้มที ักษะในการปฏบิ ัติตามข้นั ตอนการจดั รปู แบบข้อความ (ด้านทักษะ) 31. เพ่ือให้มีเจตคตทิ ่ีดตี อ่ การประพฤติตามหลักการจัดและตกแต่งข้อความด้วยโปรแกรม Adobe Dreamweaver CS5 (ด้านจติ พิสยั ) 32. เพื่อจัดและตกแตง่ ข้อความดว้ ยโปรแกรม Adobe Dreamweaver CS5 ให้ถกู ตอ้ งและเหมาะสม (ด้านคณุ ธรรม จรยิ ธรรม) • จดุ ประสงค์เชิงพฤตกิ รรม / บรู ณาการเศรษฐกจิ พอเพียง 17. การอธบิ ายการจัดแต่งขอ้ ความได้ (ดา้ นความรู้) 18. การรวบรวมลกั ษณะตัวอักษรได้ (ดา้ นความรู้)

19. การออกแบบสไตล์ CSS ได้ (ดา้ นความร้)ู 20. สรา้ งข้อความได้ (ดา้ นทักษะ) 21. คัดลอกขอ้ ความได้ (ด้านทักษะ) 22. ข้นึ บรรทัดใหมใ่ นยอ่ หนา้ เดมิ ได้ (ด้านทกั ษะ) 23. เวน้ ระหว่างขอ้ ความได้ (ดา้ นทกั ษะ) 24. จดั รปู แบบขอ้ ความได้ (ด้านทกั ษะ) 25. เลือกฟอนต์ให้กบั ข้อความได้ (ด้านทกั ษะ) 26. เพม่ิ ชุดฟอนต์ทใ่ี ช้กบั ข้อความได้ (ดา้ นทักษะ) 27. ปรับเปล่ยี นขนาดฟอนตไ์ ด้ (ด้านทักษะ) 28. เปล่ียนสฟี อนต์ได้ (ด้านทกั ษะ) 29. เนน้ หวั ข้อให้โดดเดน่ ได้ (ดา้ นทกั ษะ) 30. ปฏบิ ตั ิตามขัน้ ตอนการจดั รปู แบบขอ้ ความได้ (ด้านทักษะ) 31. ประพฤติตามหลักการจัดและตกแต่งข้อความด้วยโปรแกรม Adobe Dreamweaver CS5 ได้ (ดา้ นจติ พิสัย) 32. จัดและตกแตง่ ขอ้ ความดว้ ยโปรแกรม Adobe Dreamweaver CS5 ให้ถูกตอ้ งและเหมาะสมได้(ด้าน คุณธรรม จริยธรรม) เนื้อหาสาระการสอน/การเรียนรู้ • ด้านความรู้(ทฤษฎ)ี 2. การสร้างข้อความ คอื การพิมพ์ขอ้ ความหรอื บทความท่ีต้องการลงไปในหนา้ เวบ็ เพจที่เราสรา้ งขน้ึ ดังตัวอยา่ งตอ่ ไปน้ี

3. คลิกเคอร์เซอรต์ รงตำแหนง่ ทตี่ อ้ งการพมิ พ์ข้อความหรือบทความ 4. พมิ พ์ขอ้ ความลงตรงตำแหนง่ ท่ีตอ้ งการพิมพ์ 14. การคดั ลอกข้อความ การคัดลอกข้อความบนหน้าเวบ็ เพจสามารถทำไดด้ ังต่อไปน้ี 6. เลอื กข้อความทีต่ อ้ งการคัดลอก 7. คลกิ ขวา > เลอื ก Copy 8. เลอื กตำแหนง่ ที่ตอ้ งการนำขอ้ ความไปจดั วาง 9. คลกิ ขวา > เลือก Paste

10. ข้อความจะนำไปจดั วางตรงตำแหน่งท่กี ำหนด

15. การขึ้นบรรทดั ใหม่ในยอ่ หน้าเดมิ การพิมพ์ขอ้ ความในบางคร้ังอาจใชพ้ ื้นที่เต็มบรรทัด หากตอ้ งการขึ้นบรรทัดใหม่เราสามารถกดแปน้ Enter ได้ทันที แตร่ ะยะห่างระหวา่ งบรรทัดจะมากกวา่ ปกตซิ ึง่ ทำใหข้ ้อความทีแ่ สดงออกมาดไู ม่สวยงามซึ่งมวี ิธี เครื่องมือดงั ต่อไปนี้ทชี่ ่วยทำใหก้ ารจัดวางระยะหา่ งระหว่างบรรทดั ดสู วยงามข้นึ 5. วางเคอร์เซอรต์ รงตำแหนง่ ท่ีจะขน้ึ บรรทัดใหม่ 6. คลิกแท็บ Text ใน Insert Bar 7. เลอื กคำส่ัง เพ่ือขึ้นบรรทดั ใหม่ 8. พิมพข์ อ้ ความทต่ี ้องการ 16. การเวน้ ระหว่างข้อความ โปรแกรม Dreamweaver CS5 ไม่สามารถเว้นวรรคระหวา่ งขอ้ ความได้หลายตวั อกั ษรแต่มเี คร่ืองมือที่ สามารถเวน้ ตวั อักษรได้หลายตวั อักษร ดังน้ี 6. วางเคอรเ์ ซอร์ตรงตำแหนง่ ที่ต้องการเวน้ วรรค 7. คลิกแท็บText บน Insert Bar 8. คลกิ เลอื กคำสัง่ Characters 9. คลิกคำสั่ง Non-Breaking Space ตามจำนวนเว้นวรรคที่ตอ้ งการ

10. พิมพข์ อ้ ความทต่ี อ้ งการ 17. การจดั รูปแบบขอ้ ความ การจดั รูปแบบข้อความสามารถทำได้ 2 วธิ ี ดังน้ี 3. สไตล์ HTML 4. สไตล์ CSS 18. การเลือกฟอนตใ์ หก้ บั ขอ้ ความ ตอ้ งเปน็ ฟอนตม์ าตรฐานเท่าน้ัน เนอ่ื งจากในเคร่ืองของผู้เข้าชมเว็บไซต์อาจจะไมม่ ีฟอนต์ชนิดน้ัน ๆ เม่ือ ข้อความในเว็บเพจปรากฏบนบราวเซอร์ บราวเซอร์ก็จะดึงฟอนต์อื่นที่มีอยู่ในเครือ่ งมาแสดงแทน ส่วนฟอนต์ท่ี นิยมใชก้ นั ส่วนใหญ่เป็นฟอนต์ MS Sans Serif และ Tahoma เนือ่ งจากอา่ น และแสดงผลได้บน เบรา เซอรท์ กุ ชนดิ ซึ่งวิธีการเลอื กฟอนตใ์ หก้ บั ขอ้ ความ ทำได้ดงั น้ี

4. เลือกข้อความท่จี ะกำหนดชดุ ฟอนต์ 5. คลกิ เลือกการจัดรูปแบบขอ้ ความสไตล์ CSS 6. เลือกชดุ ฟอนตท์ ี่ต้องการใชท้ ชี่ อ่ ง Font ในหนา้ ต่าง Properties Inspector สไตล์ CSS 19. เพ่ิมชุดฟอนต์ท่ีใช้กบั ขอ้ ความ 5. คลกิ รายการ Edit Font List… ท่ชี ่อง Font ในหน้าต่าง Properties Inspector สไตล์ CSS 6. คลิกปมุ่ OK จากนัน้ ฟอนตท์ ่ีเลือกจะถูกเพ่มิ ไว้ในรายการชดุ ฟอนต์ Available fonts 7. คลกิ ปุม่ เพือ่ เพ่ิมฟอนตไ์ วใ้ นรายการชุดฟอนต์ท่จี ะสร้าง

8. คลิกปมุ่ OK จากนั้นฟอนตท์ ี่เลอื กจะถกู เพิ่มไว้ในรายการชดุ ฟอนต์ 20. ปรบั เปลี่ยนขนาดฟอนต์ 5. เลือกข้อความทตี่ ้องการเปลีย่ นขนาด 6. เลือกขนาดตัวอักษรหรือพิมพค์ า่ ลงไปในชอ่ ง Size บนหนา้ ต่าง Properties Inspector ในการ จดั รูปแบบข้อความสไตล์ CSS หลังจากคลิกเลือกขนาดฟอนต์ จะปรากฏหนา้ ต่าง New CSS Rule เพื่อกำหนดคุณสมบัติเบ้อื งต้นของ CSS 7. กำหนดชื่อเรียกของสไตล์ซึ่งควรตงั้ ชอื่ เรียกใหส้ อดคลอ้ งกบั สงิ่ ที่ให้สไตลไ์ ปกำหนดในท่ีนใ้ี ช้ชอื่ left 8. คลกิ ปุ่ม OK ขอ้ ความท่เี ลือกจะเปลีย่ นเป็นขนาดฟอนต์ตามทีไ่ ดก้ ำหนดในสไตล์ left

21. การเปลีย่ นสีฟอนต์ เราสามารถกำหนดใหแ้ ต่ละขอ้ ความในหน้าเวบ็ เพจใช้สีแตกต่างกนั เพอื่ เน้นข้อความนั้นใหโ้ ดดเด่น ได้ ดงั น้ี 4. เลอื กข้อความทจี่ ะเปลี่ยนสีฟอนต์ 5. คลกิ บนหนา้ ตา่ ง Properties Inspector สไตล์ CSS 6. คลกิ เลือกสจี ากตารางสี 22. การกำหนดลกั ษณะตัวอักษร การกำหนดลกั ษณะตวั อักษร ไมว่ ่าจะเปน็ ตัวหนา ตวั เอียง และลกั ษณะอน่ื ๆ สามารถทำได้ดงั น้ี 4. เลอื กขอ้ ความท่จี ะกำหนดลักษณะตัวอักษร 5. คลิกเลอื กลกั ษณะตวั อกั ษรบนหนา้ ต่าง Properties Inspector สไตล์ CSS 6. คลกิ เลือกลกั ษณะตวั อักษร 23. การเนน้ หวั ข้อใหโ้ ดดเดน่ สำหรบั ขอ้ ความส่วนที่เป็นหวั ข้อหลักหรือหัวข้อย่อย เราสามารถทำใหเ้ กดิ ความโดดเดน่ ไดด้ ังนี้ 3. เลอื กหวั ข้อหรือขอ้ ความทจ่ี ะเน้น

4. คลิกเลอื กรปู แบบท่ีช่อง Format บนหนา้ ต่าง Properties Inspector สไตล์ HTML โดยรปู แบบหวั ขอ้ ท่ีโปรแกรมมีใหเ้ ลอื กนน้ั จะเรียงลำดบั จากขนาดใหญ่ไปเลก็ จากนน้ั ขอ้ ความ ท่ีเลอื กกจ็ ะเปล่ยี นไปตามขนาดทกี่ ำหนด 24. วธิ กี ารจัดรปู แบบขอ้ ความ ในการจดั รูปแบบขอ้ ความทอี่ ยู่ในเว็บเพจใหอ้ ยู่ชิดซ้าย กง่ึ กลาง หรือ ชิดขวาได้ เพื่อให้ผู้ชมอ่านข้อความ นั้นงา่ ยขนึ้ ซ่งึ ทำได้หลายวธิ ดี ังน้ี คำส่งั Align 3. ครอบคลมุ ขอ้ ความที่ตอ้ งการจัดรูปแบบ 4. คลิกขวา > เลอื กคำสั่ง Align > เลอื กการจัดรปู แบบทต่ี อ้ งการ 25. การกำหนดสไตล์ CSS 5. เลือกข้อความทตี่ อ้ งการจดั รูปแบบ 6. คลิกเลือกรูปแบบการจัดข้อความบนหน้าต่าง Properties Inspector สไตล์ CSS จัดให้ข้อความชดิ ซา้ ย จัดให้ขอ้ ความอยูก่ ึ่งกลาง จัดใหข้ อ้ ความชดิ ขวา

จัดให้ขอ้ ความชดิ ด้านซา้ ยและด้านขวา จากนน้ั จะปรากฏหน้าต่าง New CSS Rule ข้ึนมา ให้กำหนดคณุ สมบัติเบอ้ื งต้นของCSS 7. กำหนดชือ่ เรยี กของสไตล์นน้ั ในทีน่ ้ใี ชช้ ือ่ textright 8. คลกิ ป่มุ OK หลังจากน้ันข้อความที่เลอื กจะจัดรูปแบบที่เรากำหนด และ ชื่อเรียกของสไตล์ก็จะแสดง ในหน้าตา่ งพาเนล CSS STYLES • ดา้ นทกั ษะ+ดา้ นจิตพสิ ยั (ปฏบิ ัติ+ดา้ นจติ พิสยั ) (จุดประสงคเ์ ชงิ พฤติกรรมขอ้ ท่ี 1-15) 9. กิจกรรมบูรณาการอาเซียน 10. กจิ กรรมบรู ณาการเศรษฐกจิ พอเพียง • ดา้ นคุณธรรม/จรยิ ธรรม/จรรยาบรรณ/บูรณาการเศรษฐกิจพอเพียง (จดุ ประสงค์เชิงพฤตกิ รรมขอ้ ที่ 16) 2. จดั และตกแต่งขอ้ ความด้วยโปรแกรม Adobe Dreamweaver CS5 ให้ถกู ตอ้ งและเหมาะสมได้

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

2. ข้ันให้ความรู้ ( 60 นาที ) 4. ผู้เรียนเปิด PowerPointหน่วยที่ 3 เรื่อง 4. ผู้สอนแนะนำให้ผู้เรียนเปิด PowerPoint การจัดตกแต่งข้อความ และให้ผู้เรียนศึกษาเอกสาร หน่วยที่ 3 เรื่อง การจัดตกแต่งข้อความ และให้ ประกอบการสอน วิชา การสร้างเว็บไซต์ หน้าที่ 44-54 ผู้เรียนศึกษาเอกสารประกอบการสอน วิชา การสร้าง โดยศึกษาทำความเขา้ ใจด้วยตนเอง เว็บไซต์ หน้าที่ 44-54 โดยศึกษาทำความเข้าใจด้วย ตนเอง 5. ผู้เรียนฟังคำอธิบายเพิ่มเติม เรื่อง หลักการ 5. ผสู้ อนอธิบายความรู้เพิ่มเติม เร่อื ง หลักการ จัดและตกแต่งข้อความด้วยโปรแกรม Adobe จัดและตกแต่งข้อความด้วยโปรแกรม Adobe Dreamweaver CS5 Dreamweaver CS5 6. ผู้เรยี นซกั ถามข้อสงสยั ที่เกิดข้นึ 6. ผู้สอนเปิดโอกาส ให้ผู้เรียนถามปัญหา และ ข้อสงสัยจากเนื้อหา โดยครูเป็นผู้ตอบปัญหาท่ีเกิดข้นึ ระหวา่ งการเรยี นการสอน 3. ขน้ั ประยกุ ตใ์ ช้ ( 105 นาที ) 3. ขนั้ ประยกุ ต์ใช้ ( 105 นาที ) 3. ผ้เู รียนทำกจิ กรรมบูรณาการอาเซียน หนา้ 56 3. ผู้สอนให้ผู้เรียนทำกิจกรรมบูรณาการ อาเซียน หนา้ 56 4. ผสู้ อนใหผ้ ู้เรยี นสืบคน้ ข้อมูลจาก Web Guide 4. ผู้สอนให้ผู้เรียนสืบค้นข้อมูลจาก Web หน้าที่ 55 หรอื หาความรเู้ พม่ิ เตมิ จากอนิ เทอร์เน็ต Guide หน้าที่ 55 หรือหาความรู้เพิ่มเติมจาก อนิ เทอรเ์ นต็ กจิ กรรมการเรยี นการสอนหรอื การเรียนรู้ ข้ันตอนการสอนหรอื กิจกรรมของครู ขั้นตอนการเรยี นรู้หรือกจิ กรรมของนักเรยี น 4. ขัน้ สรปุ และประเมนิ ผล ( 60 นาที ) 4. ขนั้ สรุปและประเมนิ ผล ( 60 นาที ) 4. ผูส้ อนและผเู้ รียนร่วมกันสรุปเนื้อหาท่ีได้เรียน 4. ผู้สอนและผู้เรียนร่วมกันสรุปเนื้อหาที่ได้เรียน ให้มีความเขา้ ใจในทิศทางเดียวกัน เพอื่ ใหม้ ีความเข้าใจในทศิ ทางเดยี วกนั 5. ผู้สอนให้ผู้เรียนทำกิจกรรมบูรณาการ 5. ผู้เรียนทำกิจกรรมบูรณาการเศรษฐกิจพอเพียง เศรษฐกิจพอเพยี ง หน่วยท่ี 3 หน้าท่ี 56 หน่วยที่ 3 หนา้ ที่ 56 6. ผู้สอนให้ผู้เรียนศึกษาเพิ่มเติมนอกห้องเรียน 6. ผู้เรียนศึกษาเพิ่มเติมนอกห้องเรียน ด้วย ดว้ ยบทเรยี นคอมพิวเตอรช์ ่วยสอนที่จัดทำข้นึ บทเรียนคอมพวิ เตอรช์ ว่ ยสอนทีจ่ ดั ทำขึน้ (บรรลจุ ุดประสงค์เชงิ พฤติกรรมขอ้ ที่ 1-16) (บรรลจุ ดุ ประสงค์เชงิ พฤติกรรมข้อท่ี 1-16)

(รวม 240 นาที หรอื 4 คาบเรยี น) งานท่มี อบหมายหรือกจิ กรรมการวดั ผลและประเมินผล ก่อนเรยี น 3. จดั เตรียมเอกสาร ส่อื การเรียนการสอนหน่วยท่ี 3 4. ทำความเข้าใจเกี่ยวกบั จุดประสงค์การเรียนของหน่วยเรยี นท่ี 3 และใหค้ วามรว่ มมือในการทำ กจิ กรรม ต่าง ๆ ขณะเรยี น 9. ปฏิบัตติ ามกิจกรรมบรู ณาการอาเซยี น 10. ร่วมกันสรุป “การจดั ตกแตง่ ขอ้ ความ” หลงั เรียน 2. ปฏบิ ัตติ ามกิจกรรมบรู ณาเศรษฐกจิ พอเพียง

คำถาม 8. การจัดแต่งขอ้ ความคอื อะไร 9. การจัดแตง่ ข้อความมขี ้อดขี ้อเสียอยา่ งไร 10. วิธีการจดั รูปแบบขอ้ ความประกอบดว้ ยอะไรบา้ ง ผลงาน/ช้ินงาน/ความสำเร็จของผเู้ รียน กิจกรรม สมรรถนะที่พงึ ประสงค์ ผเู้ รยี นสร้างความเข้าใจเกีย่ วกับการจดั ตกแต่งขอ้ ความ 13. วิเคราะหแ์ ละตีความหมาย 14. ตง้ั คำถาม 15. อภิปรายแสดงความคดิ เหน็ ระดมสมอง 16. การประยกุ ต์ความรสู้ งู่ านอาชีพ สมรรถนะการปฏิบตั งิ านอาชีพ 4. จัดและตกแต่งขอ้ ความด้วยโปรแกรม Adobe Dreamweaver CS5 สมรรถนะการขยายผล ความสอดคลอ้ ง จากการเรียน เรื่อง การจัดตกแต่งข้อความ ทำให้ผู้เรียนมีความรู้เพิ่มเกี่ยวกับการสร้างข้อความ การ เลือกฟอนตใ์ หก้ ับข้อความ การปรับเปลี่ยนขนาดฟอนต์ การเน้นหัวข้อใหโ้ ดดเด่น ฯลฯ ความรู้ที่ได้จากสามารถ นำพาให้ตนเองได้รบั ความพึงพอใจจากผู้ว่าจา้ ง ซง่ึ อาจหารายได้ในระหว่างการเรยี น ลดการใชจ้ ่ายของผู้ปกครอง ได้

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

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

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



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

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

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

6. เกณฑ์การใหค้ ะแนน : ปฏบิ ัตงิ านโดยใชห้ ลกั ความมีเหตุ และผลในการตัดสนิ ใจ จะได้ 1.5 คะแนน • จุดประสงค์เชิงพฤตกิ รรม ขอ้ ที่ 16 มคี วามซอื่ สัตย์ กับเพอื่ นร่วมงาน 4. วธิ กี ารประเมิน : ตรวจผลงาน 5. เครือ่ งมอื : แบบประเมินกระบวนการทำงานกลมุ่ 6. เกณฑก์ ารใหค้ ะแนน : มคี วามซอ่ื สตั ย์ กบั เพอ่ื นรว่ มงาน จะได้ 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. กิจกรรมบรู ณาการเศรษฐกจิ พอเพียง กิจกรรม จัดข้อความให้สวยงาม จุดประสงค์ สามารถจัดตกแตง่ ข้อความ ภาระงาน 3. ให้นกั เรยี นค้นคว้าหาความรเู้ กี่ยวกับโครงการตามแนวพระราชดำริมา 2 โครงการหลงั จากได้ขอ้ มลู ให้นำ ขอ้ มลู ทไี่ ดม้ าจดั วางบนหน้าเว็บให้สวยงามตามความพอใจของนกั เรยี น 4. บันทกึ หนา้ เวบ็ หลงั จากตกแตง่ ข้อความ แล้วส่งอเี มลใ์ ห้ครูผสู้ อน (ระบุชื่อ นามสกุลห้องเรียน ใหเ้ รียบร้อย กอ่ นส่งอีเมล์ใหค้ รูผู้สอน)

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

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

แผนการสอน/แผนการเรียนร้ภู าคทฤษฏี แผนการสอน/การเรียนรภู้ าคทฤษฎี หนว่ ยท่ี 3 ชื่อวชิ า การสร้างเวบ็ ไซต์ สอนสปั ดาหท์ ี่ 4 ชื่อหน่วย การจัดตกแต่งข้อความ คาบรวม 16 ช่อื เร่ือง การจัดตกแต่งข้อความ จำนวนคาบ 4 หัวขอ้ เรอ่ื ง ด้านความรู้ 29. การจัดแต่งขอ้ ความ 30. ลกั ษณะตัวอกั ษร 31. ออกแบบสไตล์ CSS ด้านทกั ษะ 32. สร้างข้อความ 33. คดั ลอกข้อความ 34. ข้นึ บรรทดั ใหมใ่ นย่อหน้าเดิม 35. เว้นระหวา่ งขอ้ ความ 36. จัดรปู แบบขอ้ ความ 37. เลือกฟอนต์ให้กบั ข้อความ 38. เพ่มิ ชุดฟอนตท์ ี่ใชก้ ับขอ้ ความ 39. ปรับเปลย่ี นขนาดฟอนต์ 40. เปลีย่ นสฟี อนต์ 41. เนน้ หัวข้อให้โดดเดน่ 42. ปฏบิ ัตติ ามข้นั ตอนการจดั รูปแบบขอ้ ความ ด้านจิตพสิ ัย 15. ประพฤติตามหลกั การจัดและตกแตง่ ขอ้ ความด้วยโปรแกรม Adobe Dreamweaver CS5 ได้ ดา้ นคณุ ธรรม จริยธรรม/บูรณาการเศรษฐกิจพอเพียง 18. จดั และตกแต่งข้อความด้วยโปรแกรม Adobe Dreamweaver CS5 ให้ถกู ต้องและเหมาะสมได้ สาระสำคัญ

ในการจดั ตกแต่งขอ้ ความด้วยโปรแกรม Dreamweaver สำหรับเวอรช์ ั่น ใหมๆ่ ต้ังแต่ CS3 ขึ้นไปนั้น จะมีการใช้ฟังก์ชั่น CSS ขึ้นมาเพื่อเพิ่มความสะดวกสบายในการตั้งค่าข้อความให้ง่ายขึ้น ซึ่งโปรแกรมที่จะใช้ใน การศกึ ษา คอื โปรแกรม Dreamweaver CS5 สมรรถนะอาชีพประจำหน่วย 3. จดั และตกแต่งขอ้ ความดว้ ยโปรแกรม Adobe Dreamweaver CS5 คำศัพท์สำคัญ 3. การสรา้ งขอ้ ความ คือ การพิมพข์ ้อความหรอื บทความทีต่ อ้ งการลงไปในหนา้ เว็บเพจที่เราสรา้ งขึน้ จุดประสงค์การสอน/การเรยี นรู้ • จดุ ประสงคท์ วั่ ไป / บรู ณาการเศรษฐกิจพอเพยี ง 33. เพอ่ื ให้มีความรู้เกี่ยวกบั การอธิบายการจัดแต่งข้อความ (ด้านความร)ู้ 34. เพื่อใหม้ ีความรู้เกย่ี วกับการรวบรวมลักษณะตวั อักษร (ด้านความรู้) 35. เพ่อื ใหม้ ีความรู้เกี่ยวกบั การออกแบบสไตล์ CSS (ดา้ นความร)ู้ 36. เพื่อให้มที กั ษะในการสร้างขอ้ ความ (ด้านทกั ษะ) 37. เพื่อให้มีทักษะในการคดั ลอกข้อความ (ด้านทักษะ) 38. เพือ่ ใหม้ ที ักษะในการข้นึ บรรทัดใหม่ในย่อหนา้ เดมิ ได้ (ด้านทกั ษะ) 39. เพอ่ื ให้มีทกั ษะในการเว้นระหว่างข้อความ (ด้านทกั ษะ) 40. เพือ่ ใหม้ ีทักษะในการจดั รูปแบบข้อความ (ด้านทกั ษะ) 41. เพื่อให้มที กั ษะในการเลือกฟอนตใ์ ห้กับขอ้ ความ (ดา้ นทักษะ) 42. เพ่ือใหม้ ีทกั ษะในการเพิ่มชุดฟอนตท์ ่ใี ช้กบั ขอ้ ความ (ดา้ นทกั ษะ) 43. เพื่อใหม้ ที กั ษะในการปรบั เปลย่ี นขนาดฟอนต์ (ด้านทักษะ) 44. เพอ่ื ใหม้ ีทักษะในการเปล่ียนสฟี อนต์ (ดา้ นทกั ษะ) 45. เพือ่ ให้มีทกั ษะในการเน้นหวั ข้อใหโ้ ดดเด่น (ด้านทกั ษะ) 46. เพือ่ ให้มที ักษะในการปฏบิ ัติตามข้นั ตอนการจดั รปู แบบข้อความ (ด้านทักษะ) 47. เพ่ือให้มีเจตคตทิ ่ีดตี อ่ การประพฤติตามหลักการจัดและตกแต่งข้อความด้วยโปรแกรม Adobe Dreamweaver CS5 (ด้านจติ พิสยั ) 48. เพื่อจัดและตกแตง่ ข้อความดว้ ยโปรแกรม Adobe Dreamweaver CS5 ให้ถกู ตอ้ งและเหมาะสม (ด้านคณุ ธรรม จรยิ ธรรม) • จดุ ประสงค์เชิงพฤตกิ รรม / บรู ณาการเศรษฐกจิ พอเพียง 33. การอธบิ ายการจัดแต่งขอ้ ความได้ (ดา้ นความรู้) 34. การรวบรวมลกั ษณะตัวอักษรได้ (ดา้ นความรู้)

35. การออกแบบสไตล์ CSS ได้ (ดา้ นความร้)ู 36. สรา้ งข้อความได้ (ดา้ นทักษะ) 37. คัดลอกขอ้ ความได้ (ด้านทักษะ) 38. ข้นึ บรรทัดใหมใ่ นยอ่ หนา้ เดมิ ได้ (ด้านทกั ษะ) 39. เวน้ ระหว่างขอ้ ความได้ (ดา้ นทกั ษะ) 40. จดั รปู แบบขอ้ ความได้ (ด้านทกั ษะ) 41. เลือกฟอนต์ให้กบั ข้อความได้ (ด้านทกั ษะ) 42. เพม่ิ ชุดฟอนต์ทใ่ี ช้กบั ข้อความได้ (ดา้ นทักษะ) 43. ปรับเปล่ยี นขนาดฟอนตไ์ ด้ (ด้านทักษะ) 44. เปล่ียนสฟี อนต์ได้ (ด้านทกั ษะ) 45. เนน้ หวั ข้อให้โดดเดน่ ได้ (ดา้ นทกั ษะ) 46. ปฏบิ ตั ิตามขัน้ ตอนการจดั รปู แบบขอ้ ความได้ (ด้านทักษะ) 47. ประพฤติตามหลักการจัดและตกแต่งข้อความด้วยโปรแกรม Adobe Dreamweaver CS5 ได้ (ดา้ นจติ พิสัย) 48. จัดและตกแตง่ ขอ้ ความดว้ ยโปรแกรม Adobe Dreamweaver CS5 ให้ถูกตอ้ งและเหมาะสมได้(ด้าน คุณธรรม จริยธรรม) เนื้อหาสาระการสอน/การเรียนรู้ • ด้านความรู้(ทฤษฎ)ี 3. การสร้างข้อความ คอื การพิมพ์ขอ้ ความหรอื บทความท่ีต้องการลงไปในหนา้ เวบ็ เพจที่เราสรา้ งขน้ึ ดังตัวอยา่ งตอ่ ไปน้ี

5. คลกิ เคอรเ์ ซอร์ตรงตำแหน่งทตี่ ้องการพิมพข์ อ้ ความหรือบทความ 6. พมิ พข์ ้อความลงตรงตำแหน่งทต่ี ้องการพิมพ์ 26. การคัดลอกข้อความ การคัดลอกขอ้ ความบนหน้าเวบ็ เพจสามารถทำได้ดังต่อไปนี้ 11. เลอื กขอ้ ความท่ีต้องการคดั ลอก 12. คลิกขวา > เลอื ก Copy 13. เลอื กตำแหน่งทต่ี อ้ งการนำข้อความไปจดั วาง 14. คลิกขวา > เลอื ก Paste

15. ข้อความจะนำไปจดั วางตรงตำแหน่งท่กี ำหนด

27. การขน้ึ บรรทดั ใหม่ในย่อหนา้ เดิม การพมิ พ์ขอ้ ความในบางครั้งอาจใชพ้ ้นื ท่เี ต็มบรรทัด หากตอ้ งการข้ึนบรรทัดใหม่เราสามารถกดแป้น Enter ไดท้ ันที แตร่ ะยะหา่ งระหว่างบรรทัดจะมากกว่าปกติซ่งึ ทำให้ข้อความท่ีแสดงออกมาดไู มส่ วยงามซึ่งมีวิธี เครอื่ งมอื ดงั ต่อไปนที้ ช่ี ่วยทำใหก้ ารจัดวางระยะห่างระหวา่ งบรรทดั ดูสวยงามข้ึน 9. วางเคอร์เซอรต์ รงตำแหนง่ ทีจ่ ะขนึ้ บรรทดั ใหม่ 10. คลิกแท็บ Text ใน Insert Bar 11. เลือกคำส่ัง เพือ่ ขึ้นบรรทัดใหม่ 12. พมิ พข์ อ้ ความที่ต้องการ 28. การเวน้ ระหว่างข้อความ โปรแกรม Dreamweaver CS5 ไม่สามารถเวน้ วรรคระหว่างขอ้ ความได้หลายตัวอกั ษรแต่มเี คร่อื งมอื ท่ี สามารถเว้นตวั อักษรไดห้ ลายตัวอักษร ดงั นี้ 11. วางเคอร์เซอรต์ รงตำแหนง่ ทตี่ ้องการเวน้ วรรค 12. คลิกแท็บText บน Insert Bar 13. คลิกเลอื กคำสงั่ Characters 14. คลกิ คำสั่ง Non-Breaking Space ตามจำนวนเว้นวรรคท่ีต้องการ

15. พิมพข์ อ้ ความทต่ี อ้ งการ 29. การจดั รูปแบบขอ้ ความ การจดั รูปแบบข้อความสามารถทำได้ 2 วธิ ี ดังน้ี 5. สไตล์ HTML 6. สไตล์ CSS 30. การเลือกฟอนตใ์ หก้ บั ขอ้ ความ ตอ้ งเปน็ ฟอนตม์ าตรฐานเท่าน้ัน เนอ่ื งจากในเคร่ืองของผู้เข้าชมเว็บไซต์อาจจะไมม่ ีฟอนต์ชนิดน้ัน ๆ เม่ือ ข้อความในเว็บเพจปรากฏบนบราวเซอร์ บราวเซอร์ก็จะดึงฟอนต์อื่นที่มีอยู่ในเครือ่ งมาแสดงแทน ส่วนฟอนต์ท่ี นิยมใชก้ นั ส่วนใหญ่เป็นฟอนต์ MS Sans Serif และ Tahoma เนือ่ งจากอา่ น และแสดงผลได้บน เบรา เซอรท์ กุ ชนดิ ซึ่งวิธีการเลอื กฟอนตใ์ หก้ บั ขอ้ ความ ทำได้ดงั น้ี

7. เลือกข้อความที่จะกำหนดชุดฟอนต์ 8. คลิกเลอื กการจดั รปู แบบขอ้ ความสไตล์ CSS 9. เลอื กชดุ ฟอนตท์ ่ีตอ้ งการใชท้ ชี่ ่อง Font ในหน้าต่าง Properties Inspector สไตล์ CSS 31. เพ่ิมชดุ ฟอนต์ท่ีใชก้ บั ขอ้ ความ 9. คลิกรายการ Edit Font List… ทช่ี อ่ ง Font ในหนา้ ต่าง Properties Inspector สไตล์ CSS 10. คลิกปมุ่ OK จากน้นั ฟอนต์ทเี่ ลือกจะถกู เพม่ิ ไว้ในรายการชุดฟอนต์ Available fonts 11. คลกิ ป่มุ เพ่ือเพิม่ ฟอนต์ไว้ในรายการชดุ ฟอนต์ท่ีจะสร้าง

12. คลกิ ปมุ่ OK จากนนั้ ฟอนต์ที่เลือกจะถกู เพิ่มไว้ในรายการชุดฟอนต์ 32. ปรับเปลยี่ นขนาดฟอนต์ 9. เลือกขอ้ ความท่ีต้องการเปลยี่ นขนาด 10. เลือกขนาดตวั อกั ษรหรือพมิ พค์ ่าลงไปในช่อง Size บนหนา้ ตา่ ง Properties Inspector ในการ จดั รูปแบบข้อความสไตล์ CSS หลังจากคลิกเลือกขนาดฟอนต์ จะปรากฏหน้าต่าง New CSS Rule เพื่อกำหนดคุณสมบัติเบ้อื งต้นของ CSS 11. กำหนดชอ่ื เรยี กของสไตลซ์ ่ึงควรตงั้ ชอ่ื เรยี กให้สอดคลอ้ งกบั ส่งิ ทใ่ี ห้สไตลไ์ ปกำหนดในทีน่ ใ้ี ช้ชอ่ื left 12. คลกิ ปมุ่ OK ขอ้ ความทีเ่ ลือกจะเปล่ียนเปน็ ขนาดฟอนตต์ ามทไี่ ดก้ ำหนดในสไตล์ left

33. การเปลีย่ นสีฟอนต์ เราสามารถกำหนดใหแ้ ต่ละขอ้ ความในหน้าเวบ็ เพจใช้สีแตกต่างกนั เพอื่ เน้นข้อความนั้นใหโ้ ดดเด่น ได้ ดงั น้ี 7. เลอื กข้อความทจี่ ะเปลี่ยนสีฟอนต์ 8. คลกิ บนหนา้ ตา่ ง Properties Inspector สไตล์ CSS 9. คลกิ เลือกสจี ากตารางสี 34. การกำหนดลกั ษณะตัวอักษร การกำหนดลกั ษณะตวั อักษร ไมว่ ่าจะเปน็ ตัวหนา ตวั เอียง และลกั ษณะอน่ื ๆ สามารถทำได้ดงั น้ี 7. เลอื กขอ้ ความท่จี ะกำหนดลักษณะตัวอักษร 8. คลิกเลอื กลกั ษณะตวั อกั ษรบนหนา้ ต่าง Properties Inspector สไตล์ CSS 9. คลกิ เลือกลกั ษณะตวั อักษร 35. การเนน้ หวั ข้อใหโ้ ดดเดน่ สำหรบั ขอ้ ความส่วนที่เป็นหวั ข้อหลักหรือหัวข้อย่อย เราสามารถทำใหเ้ กดิ ความโดดเดน่ ไดด้ ังนี้ 5. เลอื กหวั ข้อหรือขอ้ ความทจ่ี ะเน้น

6. คลิกเลือกรูปแบบท่ีช่อง Format บนหน้าต่าง Properties Inspector สไตล์ HTML โดยรปู แบบหัวข้อทีโ่ ปรแกรมมีให้เลือกน้ันจะเรยี งลำดบั จากขนาดใหญ่ไปเลก็ จากนั้นขอ้ ความ ท่ีเลอื กกจ็ ะเปลยี่ นไปตามขนาดทกี่ ำหนด 36. วิธกี ารจัดรูปแบบขอ้ ความ ในการจัดรูปแบบขอ้ ความทีอ่ ยู่ในเว็บเพจใหอ้ ยู่ชิดซา้ ย ก่งึ กลาง หรอื ชดิ ขวาได้ เพอื่ ให้ผู้ชมอ่านข้อความ นั้นงา่ ยขนึ้ ซง่ึ ทำได้หลายวิธดี ังนี้ คำสั่ง Align 5. ครอบคลุมขอ้ ความที่ต้องการจดั รปู แบบ 6. คลิกขวา > เลือกคำส่ัง Align > เลอื กการจัดรูปแบบทต่ี ้องการ 37. การกำหนดสไตล์ CSS 9. เลือกข้อความทต่ี ้องการจัดรูปแบบ 10. คลิกเลือกรูปแบบการจัดข้อความบนหน้าต่าง Properties Inspector สไตล์ CSS จัดใหข้ อ้ ความชดิ ซ้าย จัดใหข้ ้อความอยู่กึ่งกลาง จดั ใหข้ ้อความชดิ ขวา

จดั ใหข้ อ้ ความชดิ ด้านซา้ ยและด้านขวา จากนน้ั จะปรากฏหน้าตา่ ง New CSS Rule ขึน้ มา ใหก้ ำหนดคณุ สมบตั ิเบ้อื งตน้ ของCSS 11. กำหนดช่ือเรียกของสไตล์นน้ั ในท่ีนใ้ี ชช้ ่อื textright 12. คลกิ ปมุ่ OK หลงั จากนนั้ ข้อความทเี่ ลือกจะจดั รูปแบบท่ีเรากำหนด และ ชื่อเรียกของสไตล์ก็จะแสดง ในหนา้ ต่างพาเนล CSS STYLES • ดา้ นทักษะ+ดา้ นจิตพิสยั (ปฏบิ ตั ิ+ด้านจิตพิสัย) (จุดประสงคเ์ ชงิ พฤตกิ รรมขอ้ ที่ 1-15) 11. กจิ กรรมบูรณาการอาเซยี น 12. กจิ กรรมบูรณาการเศรษฐกิจพอเพยี ง • ด้านคณุ ธรรม/จรยิ ธรรม/จรรยาบรรณ/บรู ณาการเศรษฐกจิ พอเพียง (จุดประสงค์เชิงพฤติกรรมขอ้ ที่ 16) 3. จดั และตกแตง่ ข้อความดว้ ยโปรแกรม Adobe Dreamweaver CS5 ใหถ้ ูกตอ้ งและเหมาะสมได้

กจิ กรรมการเรยี นการสอนหรือการเรยี นรู้ ขนั้ ตอนการสอนหรือกจิ กรรมของครู ขัน้ ตอนการเรยี นรู้หรอื กิจกรรมของนักเรยี น 1. ขน้ั นำเข้าสู่บทเรียน ( 15 นาที ) 1. ขนั้ นำเข้าสบู่ ทเรียน ( 15 นาที ) 7. ผู้สอนตั้งคำถามว่า การตกแต่งข้อความบน 7. ผู้เรียนช่วยกันตอบคำถามตามความเขา้ ใจของ เวบ็ ไซตม์ ปี ระโยชนอ์ ย่างไร แตล่ ะคน 8. ผสู้ อนแจง้ จดุ ประสงค์การเรยี นของหน่วยที่ 3 8. ผู้เรียนทำความเข้าใจเกี่ยวกับจุดประสงค์การ เรอ่ื ง การจัดตกแต่งขอ้ ความ เรียนหนว่ ยที่ 3 เรอ่ื ง การจัดตกแตง่ ข้อความ 9. ผสู้ อนใหผ้ ูเ้ รียนระดมความคิด และ ออกแบบ 9. ผเู้ รียนระดมความคดิ และออกแบบสไตล์ CSS สไตล์ CSS 2. ข้ันให้ความรู้ ( 60 นาที )

2. ข้ันให้ความรู้ ( 60 นาที ) 7. ผู้เรียนเปิด PowerPointหน่วยที่ 3 เรื่อง 7. ผู้สอนแนะนำให้ผู้เรียนเปิด PowerPoint การจัดตกแต่งข้อความ และให้ผู้เรียนศึกษาเอกสาร หน่วยที่ 3 เรื่อง การจัดตกแต่งข้อความ และให้ ประกอบการสอน วิชา การสร้างเว็บไซต์ หน้าที่ 44-54 ผู้เรียนศึกษาเอกสารประกอบการสอน วิชา การสร้าง โดยศึกษาทำความเขา้ ใจด้วยตนเอง เว็บไซต์ หน้าที่ 44-54 โดยศึกษาทำความเข้าใจด้วย ตนเอง 8. ผู้เรียนฟังคำอธิบายเพิ่มเติม เรื่อง หลักการ 8. ผสู้ อนอธิบายความรู้เพิ่มเติม เร่อื ง หลักการ จัดและตกแต่งข้อความด้วยโปรแกรม Adobe จัดและตกแต่งข้อความด้วยโปรแกรม Adobe Dreamweaver CS5 Dreamweaver CS5 9. ผู้เรยี นซกั ถามข้อสงสยั ที่เกิดข้นึ 9. ผู้สอนเปิดโอกาส ให้ผู้เรียนถามปัญหา และ ข้อสงสัยจากเนื้อหา โดยครูเป็นผู้ตอบปัญหาท่ีเกิดข้นึ ระหวา่ งการเรยี นการสอน 3. ขน้ั ประยกุ ตใ์ ช้ ( 105 นาที ) 3. ขนั้ ประยกุ ต์ใช้ ( 105 นาที ) 5. ผ้เู รียนทำกจิ กรรมบูรณาการอาเซียน หนา้ 56 5. ผู้สอนให้ผู้เรียนทำกิจกรรมบูรณาการ อาเซียน หนา้ 56 6. ผสู้ อนใหผ้ ู้เรยี นสืบคน้ ข้อมูลจาก Web Guide 6. ผู้สอนให้ผู้เรียนสืบค้นข้อมูลจาก Web หน้าที่ 55 หรอื หาความรเู้ พม่ิ เตมิ จากอนิ เทอร์เน็ต Guide หน้าที่ 55 หรือหาความรู้เพิ่มเติมจาก อนิ เทอรเ์ นต็ กจิ กรรมการเรยี นการสอนหรอื การเรียนรู้ ข้ันตอนการสอนหรอื กิจกรรมของครู ขั้นตอนการเรยี นรู้หรือกจิ กรรมของนักเรยี น 4. ขัน้ สรปุ และประเมนิ ผล ( 60 นาที ) 4. ขนั้ สรุปและประเมนิ ผล ( 60 นาที ) 7. ผูส้ อนและผเู้ รียนร่วมกันสรุปเนื้อหาท่ีได้เรียน 7. ผู้สอนและผู้เรียนร่วมกันสรุปเนื้อหาที่ได้เรียน ให้มีความเขา้ ใจในทิศทางเดียวกัน เพอื่ ใหม้ ีความเข้าใจในทศิ ทางเดยี วกนั 8. ผู้สอนให้ผู้เรียนทำกิจกรรมบูรณาการ 8. ผู้เรียนทำกิจกรรมบูรณาการเศรษฐกิจพอเพียง เศรษฐกิจพอเพยี ง หน่วยท่ี 3 หน้าท่ี 56 หน่วยที่ 3 หนา้ ที่ 56 9. ผู้สอนให้ผู้เรียนศึกษาเพิ่มเติมนอกห้องเรียน 9. ผู้เรียนศึกษาเพิ่มเติมนอกห้องเรียน ด้วย ดว้ ยบทเรยี นคอมพิวเตอรช์ ่วยสอนที่จัดทำข้นึ บทเรียนคอมพวิ เตอรช์ ว่ ยสอนทีจ่ ดั ทำขึน้ (บรรลจุ ุดประสงค์เชงิ พฤติกรรมขอ้ ที่ 1-16) (บรรลจุ ดุ ประสงค์เชงิ พฤติกรรมข้อท่ี 1-16)

(รวม 240 นาที หรอื 4 คาบเรียน) งานทม่ี อบหมายหรือกจิ กรรมการวดั ผลและประเมนิ ผล กอ่ นเรียน 5. จดั เตรยี มเอกสาร สือ่ การเรียนการสอนหน่วยท่ี 3 6. ทำความเขา้ ใจเกี่ยวกบั จุดประสงค์การเรยี นของหนว่ ยเรียนท่ี 3 และใหค้ วามรว่ มมือในการทำ กจิ กรรม ต่าง ๆ ขณะเรียน 11. ปฏิบตั ติ ามกิจกรรมบูรณาการอาเซียน 12. รว่ มกันสรุป “การจัดตกแตง่ ข้อความ” หลงั เรียน 3. ปฏิบัตติ ามกิจกรรมบูรณาเศรษฐกจิ พอเพียง

คำถาม 11. การจัดแต่งข้อความคืออะไร 12. การจัดแตง่ ขอ้ ความมขี อ้ ดีขอ้ เสียอยา่ งไร 13. วิธีการจัดรูปแบบขอ้ ความประกอบดว้ ยอะไรบา้ ง ผลงาน/ชิน้ งาน/ความสำเร็จของผเู้ รียน กิจกรรม สมรรถนะที่พงึ ประสงค์ ผู้เรียนสรา้ งความเขา้ ใจเกยี่ วกับการจดั ตกแต่งขอ้ ความ 17. วเิ คราะหแ์ ละตคี วามหมาย 18. ต้งั คำถาม 19. อภิปรายแสดงความคดิ เหน็ ระดมสมอง 20. การประยกุ ตค์ วามรสู้ งู่ านอาชีพ สมรรถนะการปฏบิ ตั งิ านอาชพี 5. จัดและตกแต่งขอ้ ความด้วยโปรแกรม Adobe Dreamweaver CS5 สมรรถนะการขยายผล ความสอดคล้อง จากการเรียน เรื่อง การจัดตกแต่งข้อความ ทำให้ผู้เรียนมีความรู้เพิ่มเกี่ยวกับการสร้างข้อความ การ เลือกฟอนต์ใหก้ บั ข้อความ การปรับเปลี่ยนขนาดฟอนต์ การเน้นหัวข้อใหโ้ ดดเด่น ฯลฯ ความรู้ที่ได้จากสามารถ นำพาใหต้ นเองได้รับความพงึ พอใจจากผู้ว่าจา้ ง ซง่ึ อาจหารายได้ในระหว่างการเรยี น ลดการใชจ้ ่ายของผู้ปกครอง ได้

สือ่ การเรียนการสอน/การเรยี นรู้ สื่อส่ิงพิมพ์ 16. เอกสารประกอบการสอนวิชา การสร้างเว็บไซต์ (ใช้ประกอบการเรยี นการสอนจุดประสงคเ์ ชงิ พฤติกรรมขอ้ ท่ี 1-16) 17. ใบความร้ทู ่ี 3 เร่ือง การจัดตกแต่งข้อความ (ใช้ประกอบการเรียนการสอนขนั้ ใหค้ วามรู้ เพอื่ ให้ บรรลุจดุ ประสงคเ์ ชงิ พฤตกิ รรมข้อท่ี 1-16) 18. กิจกรรมบรู ณาการอาเซียน ขนั้ ประยกุ ตใ์ ช้ 1 19. กจิ กรรมบูรณาการเศรษฐกิจพอเพยี ง ใช้ประกอบการสอนข้ันสรปุ และประเมนิ ผล ขอ้ 2 สื่อโสตทศั น์ (ถ้าม)ี 3. PowerPoint เรื่อง การจดั ตกแต่งขอ้ ความ

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