แผนการจัดการเรียนรู้ ...data.bopp-obec.info/emis/news/File/20190502142924.pdfผลการเร ยนร สาระการเร ยนร

แผนการจดการเรยนรประกอบการใชแบบฝกทกษะ การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3

ของนกเรยนชนมธยมศกษาปท 5

นางวนสนนท คค า ต าแหนง คร วทยฐานะ ครช านาญการ

โรงเรยนเสลภม

ส านกงานเขตพนทการศกษามธยมศกษา เขต 27 ส านกงานคณะกรรมการการศกษาขนพนฐาน

กระทรวงศกษาธการ

ค าน า

แผนการจดการเรยนรรายวชาการออกแบบและสรางเวบไซต เลมน จดท าขนเพอประกอบการใชแบบฝกทกษะการสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 ชนมธยมศกษาปท 5 เพอใหนกเรยนไดพฒนาดานความร ทกษะ/กระบวนการและดานคณธรรม การจดท าแผนการเรยนรน ไดจดท าตามหลกสตรแกนกลางการศกษาขนพนฐาน พทธศกราช 2551 ซงครอบคลมสาระและมาตรฐานการเรยนรสาระท 3 เทคโนโลยสารสนเทศและการสอสาร โดยผสอนไดสรางแบบฝกทกษะขน จ านวน 6 เลม ไดแก เลมท 1 เรอง รจกกบ Adobe Dreamweaver CS3 เลมท 2 เรอง การสรางเวบไซต เลมท 3 เรอง การใสขอความ เลมท 4 เรอง การแทรกรปภาพ เลมท 5 เรอง การแทรกตาราง เลมท 6 เรอง การเชอมโยงเวบเพจ (Hyperlink) การจดกจกรรมการเรยนรประกอบกบการใชแบบฝกทกษะทสรางขน เนนใหผเรยนไดเรยนรดวยตนเอง ฝกปฏบตดวยตนเอง เพอสรางทกษะการปฏบตการใชคอมพวเตอรและการใชงานโปรแกรมในการสรางเวบไซต ผจดท าหวงวา แผนการจดการเรยนรเลมน จะเปนประโยชนตอการจดการศกษา ใชเปนแนวทางในการจดการเรยนการสอนและการจดท าแผนการเรยนร เพอพฒนานกเรยนใหมความรความสามารถ และเปนก าลงของชาตสบไปในอนาคต วนสนนท คค า

ตารางวเคราะห การจดท าค าอธบายรายวชา รหสวชา ง 32206 ชอวชา การออกแบบและสรางเวบไซต

กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 จ านวน 1.0 หนวยกต/เวลา 40 ชวโมง

ผลการเรยนร สาระการเรยนร

ความร ทกษะ/กระบวนการ คณลกษณะอนพงประสงค 1. มความรเบองตนเกยวกบเวบไซต

1. ความหมายของเวบไซต เวบเพจ และโฮมเพจ 2. ประเภทของเวบไซต 3. ประโยชนของเวบไซต

1. การศกษา 2. การวเคราะห 3. การแกปญหา 4. การท างานรวมกน

1. มความรบผดชอบตอการท างาน 2. มเจตคตทดตอการใชคอมพวเตอรสรางงาน 3. มเจตคตทดตอการท างานรวมกบผอน 4. มจตส านกในการใชคอมพวเตอร

2. สามารถอธบายหลกการและปฏบตการออกแบบเวบไซต

1. องคประกอบของการออกแบบเวบไซต 2. หลกการออกแบบเวบไซตทด 3. โครงสรางเวบไซต 4. ขอควรรกอนเปนเวบมาสเตอร

1. การศกษา 2. การวเคราะห 3. การฝกปฏบต 4. การแกปญหา 5. การท างานรวมกน

1. มความรบผดชอบตอการท างาน 2. มเจตคตทดตอการใชคอมพวเตอรสรางงาน 3. มเจตคตทดตอการท างานรวมกบผอน 4. มจตส านกในการใชคอมพวเตอร

3. ปฏบตใชโปรแกรม Adobe Dreamweaver CS3 ออกแบบและสรางเวบไซต

1. แนะน าโปรแกรมสรางเวบไซต 2. สวนประกอบของโปรแกรมสรางเวบ 3. ค าสงการท างานของโปรแกรมสรางเวบ 4. การตกแตงเวบเพจดวยขอความ และรปภาพ 5. การตกแตงเวบเพจดวยตาราง เฟรม และเลเยอร


1. มความรบผดชอบตอการท างาน 2. มเจตคตทดตอการใชคอมพวเตอรสรางงาน 3. มเจตคตทดตอการท างานรวมกบผอน 4. มนสยรกการท างาน 5. มจตส านกในการใชคอมพวเตอร

4. ปฏบตการสรางการเชอมโยงเนอหาในเวบเพจและเวบไซต

1. การเชอมโยงภายในเวบไซต 2. การเชอมโยงภายในเวบเพจ 3. การเชอมโยงไปยงเวบไซตอน


1. มความรบผดชอบตอการท างาน 2. มเจตคตทดตอการใชคอมพวเตอรสรางงาน 3. มเจตคตทดตอการท างานรวมกบผอน

ผลการเรยนร สาระการเรยนร

ความร ทกษะ/กระบวนการ คณลกษณะอนพงประสงค 4. การเชอมโยงไปยง e-mail 5. การเชอมโยงเพอสรางการ Download ขอมล 6. Map Link

4. มนสยรกการท างาน 5. มจตส านกในการใชคอมพวเตอร

5. ปฏบตการตกแตงเวบเพจดวยโปรแกรมประกอบอนๆ

1. การใสลกเลนและคณสมบตพเศษใหกบเวบเพจ 2. การแทรกสอมลตมเดย 3. การแทรกสอแอนเมชน 4. การใส Code Java Script



6. รจกประยกตใชโปรแกรมสรางเวบไซตอยางสรางสรรคและมจตส านก

1. ประยกตใชโปรแกรมสรางเวบเปนของตนเอง 2. สรางเวบไซตอยางสรางสรรคและมจตส านกตอตนเองและสงคม

1. การศกษา 2. การวเคราะห 3. การฝกปฏบต 4. การแกปญหา 5. การจดการ 6. การท างานรวมกน


7. สามารถน าเวบไซตเขาสโลกอนเตอรเนต

1. รจกกบเวบโฮสตง และฟรโฮสตง 2. การขอใชพนทเกบเวบไซต 3. การใชงานโปรแกรมส าหรบถายโอน 4. การประชาสมพนธเวบไซต

1. การศกษา 2. การวเคราะห 3. การฝกปฏบต 4. การแกปญหา 5. การจดการ 6. การท างานรวมกน


ค าอธบายรายวชา รหสวชา ง 32206 ชอวชา การออกแบบและสรางเวบไซต

กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 จ านวน 1.0 หนวยกต/เวลา 40 ชวโมง

ศกษาความรเบองตนเกยวกบเวบไซต หลกการออกแบบเวบไซต การประชาสมพนธเวบไซต

จรรยาบรรณของผท าเวบ โปรแกรมทใชในการสรางเวบไซตและโปรแกรมประกอบอนๆ เพอใหสามารถสรางงานเวบไซตได

ปฏบตการออกแบบเคาโครงเวบไซต ปฏบตการสรางเวบไซตดวยโปรแกรมส าเรจรปทไดศกษา การจดท าโครงสรางเนอหา การตกแตงเวบเพจดวยรปภาพ ตาราง เฟรม ฟอรม เลเยอร การควบคมเวบเพจใหดสวยงาม การเชอมโยงเนอหา การสรางเทคนคเพอใหเวบเพจมความนาสนใจ ปฏบตการใชโปรแกรมประกอบอน ๆ เชน โปรแกรมการตกแตงภาพและโปรแกรมการสรางภาพเคลอนไหว จนสามารถสรางเวบไซตได และการอพโหลดขอมลขนสการใหบรการในเครอขายอนเทอรเนต

เพอใหเกดความรความเขาใจในการน าเสนองานในรปแบบเวบไซต สามารถน าไปประยกตใชในการด ารงชวต การท างาน การประกอบอาชพโดยสจรตอยางมประสทธภาพ มคณธรรมจรยธรรมในการใชเทคโนโลยสารสนเทศไดอยางคมคา ถกวธ ดวยความรบผดชอบตอตนเอง และตอสงคม

ผลการเรยนร

1. มความรเบองตนเกยวกบเวบไซต 2. สามารถอธบายหลกการและปฏบตการออกแบบเวบไซต 3. ปฏบตใชโปรแกรม Adobe Dreamweaver CS3 สรางเวบเพจ 4. ปฏบตการสรางการเชอมโยงเนอหาในเวบเพจและเวบไซต 5. ปฏบตการตกแตงเวบเพจดวยโปรแกรมประกอบอนๆ 6. รจกประยกตใชโปรแกรมสรางเวบไซตอยางสรางสรรคและมจตส านก 7. สามารถน าเวบไซตเขาสโลกอนเตอรเนต

ผลการเรยนร 7 ขอ

โครงสรางรายวชา รหสวชา ง 32206 ชอวชา การออกแบบและสรางเวบไซต

กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 จ านวน 1.0 หนวยกต/เวลา 40 ชวโมง อตราสวนคะแนน 80 : 20

ท ชอหนวย

การเรยนร ผลการเรยนร เวลา

(ชม) คะแนน

กอน กลาง หลง ปลาย รวม 1 หลกพนฐานการ

สรางเวบไซต 1. มความรเบองตนเกยวกบเวบไซต

2 5 5 10

2. สามารถอธบายหลกการและปฏบตการออกแบบเวบไซต

2 5 5 10

2 การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3

3. ปฏบตใชโปรแกรม Adobe Dreamweaver CS3 ออกแบบและสรางเวบไซต

4 5 5 2 2 14

4. ปฏบตการแทรกและตกแตงเวบเพจดวยขอความ รปภาพ และตาราง

6 5 5 3 3 16

5. ปฏบตการสรางการเชอมโยงเนอหาในเวบเพจและเวบไซต

10 10 10 5 25

3 ลกเลนหนาเวบเพจ

6. ปฏบตการตกแตงเวบเพจดวยโปรแกรมประกอบอนๆ

6 10 5 15

4 การเผยแพรเวบไซต

6. รจกประยกตใชโปรแกรมสรางเวบไซตอยางสรางสรรคและมจตส านก

2 2 2 4

7. สามารถน าเวบไซตเขาสโลกอนเตอรเนต

2 3 3 6

รวม 40 30 20 30 20 100

หนวยการเรยนรท 2 เรอง การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 รายวชา การออกแบบและเขยนเวบไซต รหสวชา ง32206

กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 เวลา 20 ชวโมง 55 คะแนน

ผลการเรยนร 1. ปฏบตใชโปรแกรม Adobe Dreamweaver CS3 สรางเวบไซต 2. ปฏบตการแทรกและตกแตงเวบเพจดวยขอความ รปภาพ และตาราง 3. ปฏบตการสรางการเชอมโยงเนอหาในเวบเพจและเวบไซต

สาระส าคญ การสรางเวบเพจใหไปแสดงบนเครอขายเวลดไวดเวบนนกคลายๆกบการท าสงพมพออกเผยแพรคอ ตองท าใหเสรจกอนจะน าออกมาเผยแพร โดยมขนตอนดงน วางแผนการจดท า พมพขอความ แทรกการเชอมตอ แทรกรปภาพประกอบ การออกแบบหนาเวบเพจดวยตาราง ดวยเฟรม หรอสรางแบบฟอรมการรบและคนหาขอมล และการสรางการเชอมโยงเนอหาในเวบเพจและเวบไซต

สาระการเรยนร

1. ความร 1.1 แนะน าโปรแกรมสรางเวบไซต 1.2 สวนประกอบของโปรแกรมสรางเวบ 1.3 ค าสงการท างานของโปรแกรมสรางเวบ 1.4 การตกแตงเวบเพจดวยขอความ และรปภาพ 1.5 การตกแตงเวบเพจดวยตาราง

1.6 การเชอมโยงภายในเวบไซต 1.7 การเชอมโยงภายในเวบเพจ 1.8 การเชอมโยงไปยงเวบไซตอน 1.9 การเชอมโยงไปยง e-mail 1.10 การเชอมโยงเพอสรางการ Download ขอมล 1.11 Map Link

2. ทกษะ/กระบวนการ 2.1 การศกษา 2.2 การวเคราะห 2.3 การฝกปฏบต 2.4 การแกปญหา

2.5 การท างานรวมกน

3. คณลกษณะอนพงประสงค 3.1 มความรบผดชอบตอการท างาน

3.2 มเจตคตทดตอการใชคอมพวเตอรสรางงาน 3.3 มเจตคตทดตอการท างานรวมกบผอน 3.4 มนสยรกการท างาน 3.5 มจตส านกในการใชคอมพวเตอร

ประเมนผลรวบยอด ชนงาน / ภาระงาน 1. ใบงาน 2. แบบทดสอบ 3. กจกรรม

-การสรางเวบไซตตามหวขอทก าหนดและการสรางเวบไซตตามความตองการ

การวดปละประเมนผล 1. ประเมนผลกอนเรยน

2. ประเมนผลระหวางเรยน

3. ประเมนผลหลงเรยน

กจกรรมการเรยนร 1. กจกรรมทดสอบกอนเรยน 2. ศกษาโปรแกรมสรางเวบไซต 3. ศกษาสวนประกอบของโปรแกรมสรางเวบ 4. ศกษาค าสงการท างานของโปรแกรมสรางเวบ 5. ศกษาและปฏบตการตกแตงเวบเพจดวยขอความ และรปภาพ 6. ศกษาและปฏบตการตกแตงเวบเพจดวยตาราง 7. การสรางการเชอมโยงเนอหาในเวบเพจและเวบไซต 8. ปฏบตการสรางเวบไซตอยางงาย ๆ ได 9. ด าเนนการตรวจสอบและปรบปรงผลงาน 10. กจกรรมทดสอบหลงเรยน 11. วดและประเมนผลการเรยนร

สอการเรยนร 1. ใบความร 2. ใบงาน 3. บทเรยนออนไลน 4. แบบทดสอบ 5. เครองคอมพวเตอร/อนเตอรเนต

ก าหนดการทดลองใชนวตกรรมแบบฝกทกษะ รายวชา การออกแบบและสรางเวบไซต ชนมธยมศกษาปท 5

ภาคเรยนท 2 ปการศกษา 2559 เวลา 24 ชวโมง หนวยท 2 เรอง การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3

แผนฯท เรอง จ านวนชวโมง วน เดอน ป ททดลอง

ปฐมนเทศ การทดสอบวดผลสมฤทธกอนเรยน (Pre-test) 2 23 พฤศจกายน 2559 1 รจกกบ Adobe Dreamweaver CS3 2 30 พฤศจกายน 2559 2 เรมตนสรางหนาเวบเพจ 2 7 ธนวาคม 2559 3 การใสขอความบนเวบเพจ 2 14 ธนวาคม 2559 4 การแตงหนาเวบเพจดวยภาพ 2 21 ธนวาคม 2559 5 การแทรกตารางบนเวบเพจ 2 28 ธนวาคม 2559 6 ความรเรอง Hyperlink 2 4 มกราคม 2560 7 การสรางการเชอมโยงภายในเวบไซต 2 11 มกราคม 2560 8 การสรางการเชอมโยงภายในเวบเพจ 2 18 มกราคม 2560 9 การสรางการเชอมโยง อเมล และการดาวนโหลด 2 25 มกราคม 2560 10 การสรางการเชอมโยงดวยภาพ (Map Link) 2 1 กมภาพนธ 2560

ปจฉมนเทศ

การทดสอบวดผลสมฤทธหลงเรยน (Post-test) 2 8 กมภาพนธ 2560

รวม 24 -

แผนปฐมนเทศ กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 เรอง การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 เวลาเรยน 2 ชวโมง สอนวนท 23 เดอน พฤศจกายน พ.ศ. 2559

มาตรฐานการเรยนร มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมล การ

เรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม

ตวชวด

ตวชวดท 11 ใชเทคโนโลยสารสนเทศน าเสนองานในรปแบบทเหมาะสม ตรงตามวตถประสงคของงาน

สาระส าคญ การท าความเขาใจกบนกเรยน ในการเรยนรายวชา การออกแบบและสรางเวบไซต รหส ง 32206 โดยใชแบบฝกทกษะ โดยใหนกเรยนไดรขอตกลงและขนตอนการปฏบตกจกรรม ใหเปนไปตามวตถประสงคการเรยนร เพอใหผเรยนบรรลผลตามทคาดหวงและชวยใหกจกรรมการเรยนการสอนมประสทธภาพ

ผลการเรยนรทคาดหวง นกเรยนรและเขาใจกระบวนการจดการเรยนร และวดผลสมฤทธกอนเรยน

จดประสงคการเรยนร 1. เพอใหนกเรยนมความรความเขาใจแนวทางการจดกจกรรมการเรยนการสอน โดยใชแบบฝกทกษะ 2. เพอใหนกเรยนรจกและเตรยมตวลวงหนาในการเรยน และมสวนรวมในกจกรมการเรยนการสอนอยางมประสทธภาพ 3. เพอทดสอบความรพนฐานเดมของนกเรยน และวดผลสมฤทธกอนเรยน เพอเปนแนวทางในการจดกจกรรมการเรยนร

สาระการเรยนร ปฐมนเทศเนอหาสาระและทดสอบกอนเรยน

กจกรรมการเรยนร 1. แจงผลการเรยนทคาดหวง 2. ครสรางความเขาใจเกยวกบรปแบบการเรยน และบทบาทของนกเรยน ในการเรยนโดยใชแบบ

ฝกทกษะ 3. นกเรยนรบแบบทดสอบวดผลสมฤทธทางการเรยนกอนเรยน วชา การออกแบบและสราง

เวบไซต รหสวชา ง 32206 4. ครอธบายถงขนตอนและวธการท าแบบทดสอบ หากสงสยใหซกถามเปนรายบคคล 5. นกเรยนท าแบบทดสอบวดผลสมฤทธทางการเรยนกอนเรยน วชา การออกแบบและสราง

เวบไซต รหสวชา ง 32206 จ านวน 40 ขอ ใชเวลาสอบ 1 ชวโมง

6. ครรบแบบทดสอบวดผลสมฤทธทางการเรยนกอนเรยน วชา การออกแบบและสรางเวบไซต รหสวชา ง 32206 ตรวจและบนทกคะแนนไวอยางเปนระบบ

7. ครแจงคะแนนผลการทดสอบใหนกเรยนทราบ 8. ครแนะน าแบบฝกทกษะ วชา การออกแบบและสรางเวบไซต รหสวชา ง 32206 ส าหรบ

นกเรยนชนมธยมศกษาปท 5 จ านวน 6 เลม พรอมทงชแจง อธบายขนตอน / วธการใชแบบฝกทกษะอยางละเอยดใหนกเรยนเขาใจกอนทจะเรมเรยนในชวโมงถดไป

สอ/แหลงเรยนร 1. เอกสารประกอบหลกสตรสาระการเรยนรเพมเตม (คอมพวเตอร) 2. แบบทดสอบวดผลสมฤทธทางการเรยน 3. แบบฝกทกษะการสรางเวบไซต จ านวน 6 เลม

การวดและประเมนผล วธการวด

- ตรวจแบบทดสอบวดผลสมฤทธทางการเรยนกอนเรยน เครองมอ

- แบบทดสอบวดผลสมฤทธทางการเรยนกอนเรยน เกณฑการวดและประเมนผล

- นกเรยนทกคนท าแบบทดสอบวดผลสมฤทธทางการเรยนกอนเรยน โดยคะแนนทไดจะเกบไวเปรยบเทยบกบการทดสอบหลงเรยน ซงตองผานเกณฑรอยละ 70

ลงชอ วนสนนท คค า (ผเขยนแผน) ( นางวนสนนท คค า )

ต าแหนง คร วทยฐานะ ช านาญการ ………../…………./……….

แผนการจดการเรยนรท 1 รายวชา การออกแบบและสรางเวบไซต รหสวชา ง 32206 ชนมธยมศกษาปท 5 ภาคเรยนท 2 หนวยการเรยนรท 2 การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 เวลาเรยน 20 ชวโมง เรอง การใชงานโปรแกรม Adobe Dreamweaver CS3 เบองตน เวลาเรยน 2 ชวโมง สอนวนท 30 เดอน พฤศจกายน พ.ศ. 2559



ตวชวด ตวชวดท 11 ใชเทคโนโลยสารสนเทศน าเสนองานในรปแบบทเหมาะสม ตรงตามวตถประสงคของงาน

สาระส าคญ โปรแกรม Adobe Dreamweaver CS3 เปนโปรแกรมทใชส าหรบสรางและพฒนาเวบเพจทไดรบความนยมเปนอยางมาก เนองจากเปนโปรแกรมสรางเวบทใชงานงาย มเครองมอตางๆ ทชวยใหสรางและพฒนาเวบอยางสะดวกรวดเรว มเครองมอทชวยใหสรางลกเลนและเอฟเฟคตางๆ และมความสามารถในการสรางภาพเคลอนไหวบนเวบเพจดวย

ผลการเรยนรทคาดหวง สามารถเรยกใชและบอกสวนประกอบของโปรแกรมไดอยางถกตอง

จดประสงคการเรยนร ดานความร

1. นกเรยนอธบายเกยวกบโปรแกรม Adobe Dreamweaver CS3 ได ดานทกษะ/กระบวนการ

1. นกเรยนปฏบตการใชงานโปรแกรม Adobe Dreamweaver CS3 เบองตนได 2. นกเรยนบอกสวนประกอบของโปรแกรม Adobe Dreamweaver CS3 ไดอยางถกตอง

ดานคณลกษณะอนพงประสงค 1. มวนย ใฝเรยนร และมงมนในการท างาน

สาระการเรยนร 1. รจกโปรแกรม Adobe Dreamweaver CS3 2. การเรยกใชโปรแกรม Adobe Dreamweaver CS3 3. สวนประกอบของโปรแกรม Adobe Dreamweaver CS3

กจกรรมการเรยนร ขนน า

1. ครแจงผลการเรยนรทคาดหวงประจ าหนวย และท าแบบทดสอบกอนเรยน 2. แจกแบบฝกทกษะการสรางเวบไซต เลมท 1 เรอง รจกกบ Adobe Dreamweaver CS3

3. ชแจงวธการศกษาแบบฝกทกษะ จากนนใหนกเรยนท าแบบทดสอบกอนเรยน ขนปฏบต

4. นกเรยนเปดเครองคอมพวเตอร และเรมบทเรยนจากแบบฝกทกษะ เลมท 1 เรอง รจกกบ Adobe Dreamweaver CS3 5. ครสอบถามนกเรยนเกยวกบโปรแกรมท าเวบไซตทนกเรยนอาจจะรจก และแนะน าโปรแกรมทนกเรยนจะใชในเรยนเพอการสรางเวบไซตของภาคเรยนน 4. นกเรยนศกษาความรจากแบบฝกทกษะการสรางเวบไซตเลมท 1 เรอง รจกกบ Adobe Dreamweaver CS3 พรอมทงดจากสอน าเสนอตวอยางโปรแกรมตางๆ และฟงครอธบาย เพมเตม 5. นกเรยนเขาสโปรแกรม Adobe Dreamweaver CS3 และศกษาสวนประกอบของโปรแกรม จากใบความรในแบบฝกทกษะ และหนาจอสาธตจากครผสอน 6. นกเรยนท าแบบฝกหดท 1.1 และ 1.2 ในแบบฝกทกษะการสรางเวบไซตเลมท 1 เรอง รจกกบ Adobe Dreamweaver CS3

ขนสรป 7. ครและนกเรยนรวมกนสรปการเรยกใชโปรแกรมและสวนประกอบตาง ๆ ของโปรแกรมทใช

สรางเวบไซต และนกเรยนจดบนทกลงในบนทกการเรยนรหนา 18 ของแบบฝกทกษะการสราง เวบไซต เลมท 1 เรอง รจกกบ Adobe Dreamweaver CS3

8. นกเรยนปดเครองคอมพวเตอร แลวท าแบบทดสอบหลงเรยน ในหนา 17 ของแบบฝกทกษะ การสรางเวบไซต เลมท 1 เรอง รจกกบ Adobe Dreamweaver CS3 โดยท าลงใน กระดาษค าตอบทครแจกให

สอ/แหลงเรยนร 1. แบบทดสอบกอนเรยน/หลงเรยน

2. เครองคอมพวเตอร 3. สอน าเสนอ ตวอยางโปรแกรมทใชในการสรางเวบไซต 4. แบบฝกทกษะเลมท 1 เรอง รจกกบ Adobe Dreamweaver CS3

การวดผลและประเมนผล

การวดผลประเมนผล วธการวด เครองมอวดผล เกณฑการประเมนผล ดานความร - ตรวจแบบทดสอบ

กอนเรยน/หลงเรยน - ตรวจแบบฝกหดท 1.1 และ 1.2

- แบบทดสอบกอนเรยน/หลงเรยน -แบบฝกหดท 1.1 -แบบฝกหดท 1.2

- ไดคะแนนรอยละ 70 ขนไปถอวา ผาน

ดานทกษะ/กระบวนการ

ตรวจผลงาน - ผลงานจากแบบฝกหด ถกตองสมบรณ - สงงานตามก าหนด

- แบบประเมนผลงาน - ไดคะแนนรอยละ 70 ขนไปถอวา ผาน

ดานคณลกษณะอนพงประสงค

สงเกตพฤตกรรมในหองเรยน - ความสนใจเรยน - ความรบผดชอบ

- แบบประเมนพฤตกรรม


กจกรรมเสนอแนะ

- ศกษาวธการสรางเวบไซตดวยโปรแกรมสรางเวบอนๆ ได โดยสบคนจากอนเทอรเนต



แผนการจดการเรยนรท 2 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 หนวยการเรยนรท 2 การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 เวลาเรยน 20 ชวโมง เรอง เรมตนสรางหนาเวบเพจ เวลาเรยน 2 ชวโมง สอนวนท 7 เดอน ธนวาคม พ.ศ. 2559



ตวชวด ตวชวดท 11 ใชเทคโนโลยสารสนเทศน าเสนองานในรปแบบทเหมาะสม ตรงตามวตถประสงคของ

งาน สาระส าคญ กอนจะเรมสรางเวบเพจ ตองเตรยมโฟลเดอร เพอใชเกบรวบรวมไฟลทใชในเวบไซตทงหมดในทเดยวกน เพอความสะดวกในการสรางงาน และหนาเวบเพจทเปดใชงานแตละครงกอนจะเรมใสเนอหา จะตองมการก าหนดคณสมบตพนฐานของเวบเพจกอน เพอจะใชก าหนดเปนคาเรมตนส าหรบการท างานกบเวบเพจนนตอไป ซงเวบเพจแตละหนาจะมคณสมบตพนฐานเฉพาะตว ซงไมเกยวของกบไฟลอนๆ

ผลการเรยนรทคาดหวง บอกวธการและปฏบตการก าหนดคาเรมตนในการสรางเวบเพจได

จดประสงคการเรยนร ดานความร 1. นกเรยนบอกวธการก าหนดคาเรมตนในการสรางเวบเพจได ดานทกษะ/กระบวนการ 1. นกเรยนปฏบตการเตรยมโฟลเดอรและสราง Site ได 2. นกเรยนปฏบตการสรางและก าหนดคณสมบตหนาเวบเพจ ได

3. นกเรยนปฏบตการแสดงผลเวบเพจบนโปรแกรมบราวเซอรได ดานคณลกษณะอนพงประสงค

1. มวนย ใฝเรยนร และมงมนในการท างาน สาระการเรยนร

1. การเตรยมโฟลเดอรและสราง Site 2. การสรางไฟลเวบเพจ 3. การก าหนดคณสมบตของหนาเวบเพจ 4. การแสดงผลเวบเพจบนโปรแกรมบราวเซอร


1. ครแจงจดประสงคการเรยนร และวธการเรยนร แลวใหนกเรยนท าแบบทดสอบกอนเรยน 2. นกเรยนเปดเครองคอมพวเตอร ครสอบถามนกเรยนการจดเกบขอมลของคอมพวเตอรในหนวย จดเกบขอมล ซงนกเรยนตองท าการแยกไฟลงานแตละงาน โดยการสรางเปนโฟลเดอร และในการ สรางเวบไซตกเชนเดยวกน

ขนปฏบต 3. ครใหนกเรยนสรางโฟลเดอรลงในไดรว D โดยตงชอโฟลเดอรเปนชอตวเองแลวตามดวยเลขหอง เชน wanas501 4. นกเรยนเขาสโปรแกรม Adobe Dreamweaver CS3 และศกษาใบความรในแบบฝกทกษะ เลมท 2 เรอง การสรางเวบไซต 5. ครสาธตขนตอนการก าหนด site และคณสมบตหนาเวบเพจพรอมอธบาย 6. นกเรยนฝกปฏบตการก าหนด site ตามกจกรรมฝกทกษะ 7. นกเรยนท ากจกรรมฝกทกษะในแบบฝกทกษะ การก าหนด site และคณสมบตหนาเวบเพจ เมอเสรจแลวน าแบบฝกสงคร 8. นกเรยนท าแบบฝกหดท 2.1 สง

ขนสรป 9. ครตรวจผลงาน และรวมกบนกเรยนสรปเนอหาและวธการการก าหนด site และคณสมบตหนา เวบเพจ 10. นกเรยนจดบนทกสรปเนอหาลงในสมดและปดเครองคอมพวเตอร แลวท าแบบทดสอบ หลงเรยน


2. แบบฝกทกษะเลมท 2 เรอง การสรางเวบไซต การวดผลและประเมนผล


กอนเรยน/หลงเรยน - ตรวจแบบฝกหดท 2.1

- แบบทดสอบกอนเรยน/หลงเรยน -แบบฝกหดท 2.1



ตรวจผลงาน - ผลงานจากแบบฝกหด


ถกตองสมบรณ - สงงานตามก าหนด





กจกรรมเสนอแนะ -



แผนการจดการเรยนรท 3 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 หนวยการเรยนรท 2 การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 เวลาเรยน 20 ชวโมง เรอง การใสขอความบนเวบเพจ เวลาเรยน 2 ชวโมง สอนวนท 14 เดอน ธนวาคม พ.ศ. 2559



ตวชวด ตวชวดท 11 เทคโนโลยสารสนเทศน าเสนองานในรปแบบทเหมาะสม ตรงตามวตถประสงคของงาน สาระส าคญ การใสขอความหรอเนอหาในเวบเพจนน จ าเปนตองก าหนดคาหรอจดรปแบบใหกบขอความหรอเนอหาใหดเดนชด เพอแยกความแตกตางของหวขอใหญ หวขอยอย หรอสวนของรายละเอยดเชน ส าหรบหวขอใหญ จะมฟอนตขนาดใหญ เปนตวหนา สวนของรายละเอยดหรอหวขอยอยจะมสญลกษณส าหรบเนนหวขอ สงเหลาน มสวนส าคญทท าใหเวบเพจ ดแลวสบายตาและนาสนใจยง

ผลการเรยนรทคาดหวง บอกและปฏบตการใสขอความในหนาเวบเพจไดอยางสรางสรรคและสวยงาม

จดประสงคการเรยนร ดานความร 1. นกเรยนบอกวธการใสและตกแตงขอความในหนาเวบเพจได ดานทกษะ/กระบวนการ 1. นกเรยนปฏบตการใสขอความในหนาเวบเพจได 2. นกเรยนปฏบตการจดรปแบบยอหนาและใชบลเลตได

3. นกเรยนปฏบตการแทรกสญลกษณพเศษได ดานคณลกษณะอนพงประสงค

1. มวนย ใฝเรยนร และมงมนในการท างาน

สาระการเรยนร 1. การใสขอความลงในหนาเวบเพจ 2. การจดรปแบบยอหนาและบลเลต 3. การแทรกสญลกษณพเศษ


1. ครแจงจดประสงคการเรยนร และวธการเรยนร แลวใหนกเรยนท าแบบทดสอบกอนเรยน 2. นกเรยนเปดเครองคอมพวเตอร แลวเขาสโปรแกรม Adobe Dreamweaver CS3 และก าหนดคาเบองตน 3. ครน าเสนอรปแบบตวหนงสอ (Font) แบบตางๆ ทนาสนใจ และสอบถามการปอนขอความลงในโปรแกรมคอมพวเตอรพนฐานทนกเรยนเคยปฏบตมา และแจงวา โปรแกรมสรางเวบไซตกท าไดอยางเดยวกน

ขนปฏบต 4. นกเรยนศกษาแบบฝกทกษะเลมท 3 เรอง การใสขอความ 5. ครสาธต วธการใสขอความลงหนาเวบเพจ การจดรปแบบยอหนา การใสบลเลต และการแทรกสญลกษณพเศษ นกเรยนฝกปฏบตตาม 6. นกเรยนท ากจกรรมฝกทกษะในแบบฝกทกษะทก าหนด เรอง การใสขอความบนเวบเพจ แลวบนทกไฟลงานสง 7. นกเรยนท าแบบฝกหดท 3.1 สง

ขนสรป 8. ครตรวจผลงาน จากนนรวมกบนกเรยนสรปเนอหา แลวใหนกเรยนจดบนทกสรปการใสขอความบนเวบเพจ ลงในสมด 9. นกเรยนปดเครองคอมพวเตอร แลวท าแบบทดสอบหลงเรยน


2. เครองคอมพวเตอร 3. แบบฝกทกษะเลมท 3 เรอง การใสขอความ

การวดผลและประเมนผล การวดผลประเมนผล วธการวด เครองมอวดผล เกณฑการประเมนผล

ดานความร - ตรวจแบบทดสอบกอนเรยน/หลงเรยน - ตรวจแบบฝกหดท 2.1













แผนการจดการเรยนรท 4 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 หนวยการเรยนรท 2 การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 เวลาเรยน 20 ชวโมง เรอง การแตงหนาเวบเพจดวยภาพ เวลาเรยน 2 ชวโมง สอนวนท 21 เดอน ธนวาคม พ.ศ. 2559



ตวชวด ตวชวดท 11 ใชเทคโนโลยสารสนเทศน าเสนองานในรปแบบทเหมาะสม ตรงตามวตถประสงคของงาน สาระส าคญ รปภาพ หรอภาพกราฟก เปนอกองคประกอบหนงทส าคญส าหรบการสรางเวบเพจ เพราะชวยท าใหเวบเพจสวยงามมสสนนาสนใจ และสอความหมายไดดขน เวบเพจทวไปมกมสวนประกอบทเปนภาพอยเปนจ านวนมาก ซงอาจจะเปนเรองทเกยวเนอหาโดยตรง หรอเปนรปภาพทน ามาใชตกแตงเพอใหเวบเพจดดกได

ผลการเรยนรทคาดหวง บอกหลกเกณฑการใชภาพกราฟกและปฏบตการแทรกรปภาพในหนาเวบเพจไดอยางสรางสรรค

และสวยงาม

จดประสงคการเรยนร ดานความร 1. นกเรยนบอกบอกหลกเกณฑการใชภาพกราฟกและแทรกรปภาพในหนาเวบเพจได ดานทกษะ/กระบวนการ 1. นกเรยนปฏบตการแทรกรปภาพในหนาเวบเพจได 2. นกเรยนปฏบตการก าหนดคณสมบตของรปภาพได

3. นกเรยนปฏบตการใสภาพพนหลงเวบเพจได ดานคณลกษณะอนพงประสงค


สาระการเรยนร 1. หลกเกณฑการใชภาพกราฟก 2. การแทรกรปภาพในหนาเวบเพจ 3. การก าหนดคณสมบตของรปภาพ

4. การใสภาพพนหลงเวบเพจ


1. ครแจงจดประสงคการเรยนร และวธการเรยนร แลวใหนกเรยนท าแบบทดสอบกอนเรยน 2. นกเรยนเปดเครองคอมพวเตอร แลวเขาสโปรแกรม Adobe Dreamweaver CS3 และ ก าหนดคาเบองตน 3. ครใหนกเรยนดโปรแกรม PowerPoint ซงมการใสรปภาพไดหลากหลาย ไมวาจะเปนภาพนง หรอภาพเคลอนไหว เพอกระตนใหนกเรยนอยากใสภาพทหลากหลายลงในหนาเวบเพจ

ขนปฏบต 4. นกเรยนศกษาใบความร จากแบบฝกทกษะเลมท 4 เรอง การแทรกรปภาพ โดยศกษาเกยวกบหลกเกณฑการใชภาพกราฟกในเวบเพจ และวธการแทรกรปภาพ 5. ครสาธต เกยวกบการแทรกรปภาพในหนาเวบเพจ การก าหนดคณสมบตของรปภาพ และการใสภาพพนหลงเวบเพจ 6. นกเรยนฝกปฏบตตามกจกรรมฝกทกษะ เรอง การแทรกรปภาพบนเวบเพจ แลวบนทกไฟลงานสง 7. นกเรยนท าแบบฝกหดท 4.1 สง

ขนสรป 8. ครตรวจผลงาน จากนนรวมกบนกเรยนสรปเนอหาและหลกเกณฑการใชภาพกราฟกในเวบเพจ และวธการแทรกรปภาพบนเวบเพจ 9. นกเรยนจดบนทกสรปเนอหาและปดเครองคอมพวเตอร แลวท าแบบทดสอบหลงเรยน


2. เครองคอมพวเตอร 3. แบบฝกทกษะเลมท 4 เรอง การแทรกรปภาพ
















แผนการจดการเรยนรท 5 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 หนวยการเรยนรท 2 การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 เวลาเรยน 20 ชวโมง เรอง การแทรกตารางบนหนาเวบเพจ เวลาเรยน 2 ชวโมง สอนวนท 28 เดอน ธนวาคม พ.ศ. 2559



ตวชวด ตวชวดท 11 ใชเทคโนโลยสารสนเทศน าเสนองานในรปแบบทเหมาะสม ตรงตามวตถประสงคของงาน สาระส าคญ หนาเวบเพจทสรางใน โปรแกรม Adobe Dreamweaver CS3 นนจะมหลายขนาด บางครงอาจจะก าหนดขนาดไวใหญสด เมอมการใสขอความลงไป ขอความกจะแสดงตอเนองไปเรอยๆ จนสดขอบความกวางของหนาเวบเพจทก าหนด ดงนนจงตองสรางตารางหลกครอบเนอหาทงหมดเอาไว การแสดงผลตาง ๆ กจะคงท ดสวยงามตามต าแหนงทเหนในการออกแบบหรอจะเปดดในบราวเซอรขนาดใดกตาม นอกจากนกจะไดตารางในการจดวางเนอหาในหนาเวบเพจ โดยแบงเปนชองเซลเพอวางเนอหาไดอยางอสระ เชน วางขอความ วางรปภาพสลบกน และยงก าหนดสของตารางแตละชองไดอยางอสระดวย

ผลการเรยนรทคาดหวง บอกและปฏบตการออกแบบหนาเวบเพจดวยตารางไดอยางสรางสรรคและสวยงาม

จดประสงคการเรยนร ดานความร 1. นกเรยนบอกวธการออกแบบหนาเวบเพจดวยตารางได ดานทกษะ/กระบวนการ 1. นกเรยนปฏบตการสรางตารางในหนาเวบเพจได 2. นกเรยนปฏบตการก าหนดคณสมบตของตารางได

3. นกเรยนปฏบตการออกแบบเวบเพจดวยตารางได



1. การสรางตารางในหนาเวบเพจ

2. การก าหนดคณสมบตของตาราง 3. การออกแบบเวบเพจดวยตาราง


1. ครแจงจดประสงคการเรยนร และวธการเรยนร แลวใหนกเรยนท าแบบทดสอบกอนเรยน 2. นกเรยนเปดเครองคอมพวเตอร แลวเขาสโปรแกรม Adobe Dreamweaver CS3 และ ก าหนดคาเบองตน 3. ครสอบถามเรองการสรางตารางของโปรแกรมออฟฟซพนฐานทนกเรยนเคยเรยนมา และการ ก าหนดคาตางๆ ของตารางและใหดตวอยางของตารางแบบตางๆ จากนนแจงใหนกเรยนทราบวา หนาเวบจะสวยตองใชตาราง

ขนปฏบต 4. นกเรยนศกษาใบความรจากแบบฝกทกษะเลมท 5 เรอง การแทรกตาราง 5. ครสาธต เกยวกบการสรางตารางในหนาเวบเพจ การก าหนดคณสมบตของตาราง และการออกแบบเวบเพจดวยตาราง นกเรยนฝกปฏบตตาม 6. นกเรยนท าแบบฝกหดท 5.1 แลวน าสง 7. นกเรยนปฏบตตามกจกรรมฝกทกษะ ในแบบฝก การแทรกตารางบนหนาเวบเพจ แลวบนทกไฟลงานสง

ขนสรป 8. ครตรวจผลงาน จากนนรวมกบนกเรยนสรปเนอหาและการแทรกตารางบนหนาเวบเพจ 9. นกเรยนจดบนทกสรปเนอหาลงในสมดและปดเครองคอมพวเตอร แลวท าแบบทดสอบหลงเรยน


2. เครองคอมพวเตอร 3. แบบฝกทกษะเลมท 5 เรอง การแทรกตาราง

















แผนการจดการเรยนรท 6 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 หนวยการเรยนรท 2 การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 เวลา 20 ชวโมง เรอง ความรเรอง Hyperlink เวลา 2 ชวโมง สอนวนท 4 เดอน มกราคม พ.ศ. 2560



ตวชวด ตวชวดท 11 ใชเทคโนโลยสารสนเทศน าเสนองานในรปแบบทเหมาะสม ตรงตามวตถประสงคของงาน สาระส าคญ Hyperlink หรอทเรยกกนวา ลงค (Link) คอ การเชอมโยงกนของเอกสารบนอนเทอรเนต จากจดหนงของเอกสารไปยงอกจดหนงภายในเอกสารชนเดยวกน หรอไปยงเอกสารชนอนๆ ซงอาจจะมเนอหาเกยวของกนหรอไมกได ตนทางของไฮเปอรลงคบนเวบเพจอาจจะเปนขอความ ภาพกราฟก เมน ปม หรอแมแตพนทบางสวนของภาพกได สวนปลายทางกจะเปนไฟลเวบเพจ รปภาพ เวบไซต ทอยอเมล ไฟลขอมลทจะใหดาวนโหลด หรอไฟลโปรแกรม เปนตน ผลการเรยนรทคาดหวง

อธบายและปฏบตการสรางการเชอมโยงเนอหาในเวบเพจและเวบไซต ไดอยางถกตอง

จดประสงคการเรยนร ดานความร 1. นกเรยนอธบายความหมายและองคประกอบการสรางการเชอมโยงเวบไซต ได ดานทกษะ/กระบวนการ 1. นกเรยนปฏบตการเขาใชงานรายการสรางการเชอมโยง (Hyperlink) ได 2. นกเรยนปฏบตการก าหนดคณสมบตการเชอมโยง (Hyperlink) ได

3. นกเรยนปฏบตการสรางการเชอมโยงหนาเวบเพจไปยงเวบไซตอนได


สาระการเรยนร 1. ความหมายของ Hyperlink

2. องคประกอบของ Hyperlink 3. การก าหนดคณสมบตการเชอมโยง


1. ครแจงจดประสงคการเรยนร และวธการเรยนร แลวใหนกเรยนท าแบบทดสอบกอนเรยน 2. นกเรยนเปดเครองคอมพวเตอร แลวเขาสโปรแกรม Adobe Dreamweaver CS3 และ ก าหนดคาเบองตน 3. ครเปดเวบไซตขนมา แลวใชเมาสวางทเมนตาง ๆของเวบไซต และใหนกเรยนไดดในหลายๆ เวบไซต ซงเมนแตละตวแสดงผลทแตกตางกน เหมอนทนกเรยนจะไดสรางเมนเพอเชอมโยงตอไป

ขนปฏบต 4. นกเรยนศกษาใบความรจากแบบฝกทกษะเลมท 6 เรอง การสรางการเชอมโยง (Hyperlink) หวขอ ความรเรอง Hyperlink และหนา 10 หวขอ การเชอมโยงไปยงเวบไซตอน 5. ครอธบายโดยน าเสนอดวยสอน าเสนอ และเกยวกบความหมายของของ Hyperlink องคประกอบของ Hyperlink และการก าหนดคณสมบตการเชอมโยง เพมเตม 6. ครสาธตและใหนกเรยนปฏบตตามเกยวกบการก าหนดคณสมบตของการเชอมโยง 7. นกเรยนท ากจกรรมฝกทกษะท 6.1 แลวบนทกไฟลงานสง

ขนสรป 8. ครตรวจผลงาน จากนนรวมกบนกเรยนสรปเนอหาและการก าหนดคณสมบตการเชอมโยง Hyperlink 9. นกเรยนจดบนทกสรปเนอหาลงในสมดและปดเครองคอมพวเตอร


2. เครองคอมพวเตอร 3. แบบฝกทกษะเลมท 6 เรอง การสรางการเชอมโยง (Hyperlink)

















แผนการจดการเรยนรท 7 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 หนวยการเรยนรท 2 การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 เวลา 20 ชวโมง เรอง การสรางการเชอมโยงภายในเวบไซต เวลา 2 ชวโมง สอนวนท 11 เดอน มกราคม พ.ศ. 2560




สาระส าคญ การเชอมโยงภายในเวบไซตเดยวกนเปนการเชอมจากหนาเวบเพจหนงไปยงอกหนาเวบเพจหนงซงมเนอหาเกยวของกน

ผลการเรยนรทคาดหวง บอกและปฏบตการสรางการเชอมโยงเนอหาในเวบเพจและเวบไซต ไดอยางถกตองและสวยงาม

จดประสงคการเรยนร ดานความร 1. นกเรยนบอกวธการสรางการเชอมโยงหนาเวบไซต ได ดานทกษะ/กระบวนการ 1. นกเรยนปฏบตการสรางการเชอมโยงภายในเวบไซตดวย Hyperlink ได 2. นกเรยนปฏบตการสรางการเชอมโยงภายในเวบไซตจากหนาตาง Propertiesได ดานคณลกษณะอนพงประสงค


สาระการเรยนร 1. หลกการเชอมโยงภายในเวบไซต 2. ขนตอนการสรางการเชอมโยงภายในเวบไซต


1. ครแจงจดประสงคการเรยนร และวธการเรยนร 2. นกเรยนเปดเครองคอมพวเตอร แลวเขาสโปรแกรม Adobe Dreamweaver CS3 และก าหนดคาเบองตน

3. นกเรยนทบทวนการใชงานการเชอมโยงครงทผานมา ขนปฏบต

4. นกเรยนศกษาใบความรจากแบบฝกทกษะเลมท 6 เรอง การสรางการเชอมโยง (Hyperlink) หนา 12 หวขอ การเชอมโยงภายในเวบไซต 5. ครอธบายและน าเสนอสาระความรดวยสอน าเสนอ เกยวกบหลกการเชอมโยงภายในเวบไซต 6. ครสาธตและใหนกเรยนปฏบตตามเกยวกบการสรางการเชอมโยงภายในเวบไซตตามขนตอน 7. นกเรยนปฏบตกจกรรมฝกทกษะท 6.2 แลวบนทกไฟลงานสง

ขนสรป 8. ครตรวจผลงาน จากนนรวมกบนกเรยนสรปเนอหาและการสรางการเชอมโยงภายในเวบไซต 9. นกเรยนจดบนทกสรปเนอหาลงในสมดและปดเครองคอมพวเตอร




การวดผลประเมนผล วธการวด เครองมอวดผล เกณฑการประเมนผล ดานความร - ตรวจแบบทดสอบกอน

เรยน/หลงเรยน - ตรวจแบบฝกหดท 6.2



ดานทกษะ/กระบวนการ ตรวจผลงาน - ผลงานจากแบบฝกหด ถกตองสมบรณ - สงงานตามก าหนด




- แบบประเมนพฤตกรรม - ไดคะแนนรอยละ 70 ขนไปถอวา ผาน




แผนการจดการเรยนรท 8 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 หนวยการเรยนรท 2 การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 เวลา 20 ชวโมง เรอง การสรางการเชอมโยงภายในเวบเพจ เวลา 2 ชวโมง สอนวนท 18 เดอน มกราคม พ.ศ. 2560




สาระส าคญ การเชอมโยงภายในเวบเพจหนาเดยวกน เหมาะส าหรบเวบเพจนน ๆ มขนาดขอมลยาวมาก เวลาด

ขอมลตองใชเมาสคลกเลอนแถบ Scrollbar เราสามารถก าหนดจดลงคได โดยคลกทขอความขางบน แลวกระโดดไปหาขอมลทอยดานลาง หรอสวนใดสวนหนงของเวบได

ผลการเรยนรทคาดหวง บอกและปฏบตการสรางการเชอมโยงเนอหาในหนาเวบเพจเดยวกน ไดอยางถกตองและสวยงาม

จดประสงคการเรยนร ดานความร 1. นกเรยนบอกวธการเชอมโยงเนอหาในหนาเวบเพจ เดยวกนได ดานทกษะ/กระบวนการ 1. นกเรยนปฏบตการสรางการเชอมโยงภายในเวบเพจดวย Hyperlink ได 2. นกเรยนปฏบตการสรางการเชอมโยงภายในเวบเพจจากหนาตาง Properties ได ดานคณลกษณะอนพงประสงค


สาระการเรยนร 1. หลกการเชอมโยงภายในเวบเพจ 2. ขนตอนการสรางการเชอมโยงภายในเวบเพจ


1. ครแจงจดประสงคการเรยนร และวธการเรยนร 2. นกเรยนเปดเครองคอมพวเตอร แลวเขาสโปรแกรม Adobe Dreamweaver CS3 และก าหนดคาเบองตน

3. นกเรยนรวมทบทวนการสรางการเชอมโยงในแบบทผานมา ขนปฏบต

4. นกเรยนศกษาใบความรจากแบบฝกทกษะเลมท 6 เรอง การสรางการเชอมโยง (Hyperlink) หนา 17 หวขอ การเชอมโยงภายในเวบเพจ 5. ครอธบายและน าเสนอเกยวกบหลกการเชอมโยงภายในเวบเพจ 6. ครสาธตและใหนกเรยนปฏบตตามเกยวกบการสรางการเชอมโยงภายในหนาเวบเพจตามขนตอน 7. นกเรยนปฏบตตามกจกรรมฝกทกษะท 6.3 เรอง การสรางการเชอมโยงเนอหาในหนาเวบเพจ แลวบนทกไฟลงานสง

ขนสรป 8. ครตรวจผลงาน จากนนรวมกบนกเรยนสรปเนอหาและการสรางการเชอมโยงภายในเวบไซต 9. นกเรยนจดบนทกสรปเนอหาลงในสมดและปดเครองคอมพวเตอร

สอ/แหลงเรยนร 1. เครองคอมพวเตอร

2. แบบฝกทกษะเลมท 6 เรอง การสรางการเชอมโยง (Hyperlink) 4. สอน าเสนอเรอง หลกการเชอมโยงภายในเวบเพจ


การวดผลประเมนผล วธการวด เครองมอวดผล เกณฑการประเมนผล ดานความร - ตรวจแบบทดสอบกอน

เรยน/หลงเรยน - ตรวจแบบฝกหดท 6.3



ดานทกษะ/กระบวนการ ตรวจผลงาน - ผลงานจากแบบฝกหด ถกตองสมบรณ - สงงานตามก าหนด




- แบบประเมนพฤตกรรม - ไดคะแนนรอยละ 70 ขนไปถอวา ผาน



ต าแหนง คร วทยฐานะ ช านาญการ

แผนการจดการเรยนรท 9 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 หนวยการเรยนรท 2 การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 เวลา 20 ชวโมง เรอง การสรางการเชอมโยงไปยงอเมลและการดาวนโหลด เวลา 2 ชวโมง สอนวนท 25 เดอน มกราคม พ.ศ. 2560



ตวชวด ตวชวดท 11 ใชเทคโนโลยสารสนเทศน าเสนองานในรปแบบทเหมาะสม ตรงตามวตถประสงคของงาน สาระส าคญ การเชอมโยงนเปนการเชอมโยงไปยงเวบไซตอนทอยระบบอนเทอรเนต เพอเปนการเขาไปเยยมชมเวบไซตตางๆ ทมอย หรอเชอมโยงเพอสงเมล เพอการดาวนโหลดไฟลโดยอาศยโปรแกรมอน ซงมวธการคลาย ๆ กบการเชอมโยงไปเวบเพจอน เราสามารถใชขอความหรอภาพ เปนตวคลกเชอมโยงได ตางกนทในชอง Link จะตองระบ URL ใหครบถวน ผลการเรยนรทคาดหวง บอกและปฏบตการสรางการเชอมโยงไปยง อเมลและเชอมโยงเพอการดาวนโหลดไฟลไดอยางถกตองและสวยงาม จดประสงคการเรยนร ดานความร 1. นกเรยนบอกวธการการเชอมโยงไปยง อเมลและเชอมโยงเพอการดาวนโหลดไฟลได ดานทกษะ/กระบวนการ 1. นกเรยนปฏบตการการสรางการเชอมโยงไปยงอเมลได 2. นกเรยนปฏบตการสรางการเชอมโยงการดาวนโหลดไฟลตางๆ ดวย Hyperlink ได

3. นกเรยนปฏบตการสรางการเชอมโยงการดาวนโหลดไฟลตางๆ จากหนาตาง Properties ได



1. หลกการเชอมโยง อเมลและการดาวนโหลด

2. ขนตอนการสรางการเชอมโยง อเมลและการดาวนโหลด


1. ครแจงจดประสงคการเรยนร และวธการเรยนร แลวทบทวนการสรางการเชอมโยงหนาเวบเพจและเวบไซต 2. นกเรยนเปดเครองคอมพวเตอร แลวเขาสโปรแกรม Adobe Dreamweaver CS3 และก าหนดคาเบองตน 3. ครและนกเรยนรวมกนทบทวนการสรางการเชอมโยงแบบตาง ๆ ทผานมา

ขนปฏบต 4. นกเรยนศกษาใบความรจากแบบฝกทกษะเลมท 6 เรอง การสรางการเชอมโยง (Hyperlink) หนา 20 หวขอ การสรางการเชอมโยงไปยงอเมล และหนา 23 หวขอ การเชอมโยงเพอดาวนโหลด 5. ครอธบายและน าเสนอเกยวกบหลกการสรางการเชอมโยงไปยงอเมล และหวขอการเชอมโยง เพอดาวนโหลด 6. ครสาธตและใหนกเรยนปฏบตตามเกยวกบการสรางการเชอมโยงไปยงเวบไซตอน การเชอมโยงเพอสงอเมลและการเชอมโยงเพอการดาวนโหลด ตามขนตอน 7. นกเรยนปฏบตตามกจกรรมฝกทกษะท 6.4 และ กจกรรมฝกทกษะท 6.5 บนทกไฟลงานสง

ขนสรป 8. ครตรวจผลงาน จากนนรวมกบนกเรยนสรปเนอหาการเชอมโยงเพอสงอเมลและการเชอมโยงเพอการดาวนโหลด 9. นกเรยนจดบนทกสรปเนอหาลงในสมดและปดเครองคอมพวเตอร

สอ/แหลงเรยนร 1. เครองคอมพวเตอร

2. แบบฝกทกษะเลมท 6 เรอง การสรางการเชอมโยง (Hyperlink) 3. สอน าเสนอ หลกการเชอมโยงอเมล และดาวนโหลด



กอนเรยน/หลงเรยน - ตรวจแบบฝกหดท 6.4 และ แบบฝกหดท 6.5

- แบบทดสอบกอนเรยน/หลงเรยน -แบบฝกหดท 6.4 และ แบบฝกหดท 6.5












แผนการจดการเรยนรท 10 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 หนวยการเรยนรท 2 การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 เวลา 20 ชวโมง เรอง การสรางการเชอมโยงดวยภาพ (Map Link) เวลา 2 ชวโมง สอนวนท 1 เดอน กมภาพนธ พ.ศ. 2560




สาระส าคญ การเชอมโยงดวย Map Link เปนการก าหนดขอบเขตของการลงคบนภาพกราฟกโดยใชเครองมอจาก Property Inspector ของรปภาพ โดยสามารถวาดพนทลงคเปนรปสเหลยม วงกลม หรอหลายเหลยมได โดยใชภาพเปนตวก าหนดพนทลงค และใชเครองมอ Map Link วาดลงในภาพเพอก าหนดพนทจะใชเปนสวนของลงคไปยงหนาเวบเพจทตองการ

ผลการเรยนรทคาดหวง บอกและปฏบตการสรางการเชอมโยงดวย Map Link ไดอยางถกตองและสวยงาม

จดประสงคการเรยนร ดานความร 1. นกเรยนบอกความหมายของ Map Link ได

2. นกเรยนบอกวธการสรางการเชอมโยงดวย Map Link ได ดานทกษะ/กระบวนการ 1. นกเรยนปฏบตการสรางสรางการเชอมโยงดวยภาพ ได

2. นกเรยนปฏบตการสรางการเชอมโยงดวย Map link ได ดานคณลกษณะอนพงประสงค


สาระการเรยนร 1. หลกการเชอมโยงดวย Map link 2. ขนตอนการสรางการเชอมโยงดวย Map link


1. ครแจงจดประสงคการเรยนร และวธการเรยนร แลวทบทวนการเชอมโยงจากบทเรยนทผานมา 2. นกเรยนเปดเครองคอมพวเตอรเขาสโปรแกรม Adobe Dreamweaver CS3 และก าหนดคาเบองตน 3. นกเรยนรวมกนทบทวนการสรางการเชอมโยงในแบบตาง ๆ ทผานมา

ขนปฏบต 4. นกเรยนศกษาใบความร จากแบบฝกทกษะเลมท 6 เรอง การสรางการเชอมโยง (Hyperlink) หนา 25 หวขอ หลกการเชอมโยงดวย Map link 5. ครอธบายและน าเสนอดวยสอน าเสนอ เกยวกบหลกการเชอมโยงดวย Map link 6. ครสาธตและใหนกเรยนปฏบตตามเกยวกบหลกการเชอมโยงดวย Map link ตามขนตอน 7. นกเรยนปฏบตตามกจกรรมฝกทกษะท 6.6 เรอง หลกการเชอมโยงดวย Map link แลวบนทกไฟลงานสง พรอมทงท าแบบฝกหดสง

ขนสรป 8. ครตรวจผลงาน จากนนรวมกบนกเรยนสรปเนอหาและหลกการเชอมโยงดวย Map link 9. นกเรยนจดบนทกสรปเนอหาลงในสมดและปดเครองคอมพวเตอร แลวท าแบบทดสอบหลงเรยน

สอ/แหลงเรยนร 1. แบบทดสอบกอนเรยน/ หลงเรยน

















แผนปจฉมนเทศ กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชนมธยมศกษาปท 5 ภาคเรยนท 2 เรอง การสรางเวบไซตดวยโปรแกรม Adobe Dreamweaver CS3 เวลาเรยน 2 ชวโมง สอนวนท 8 เดอน กมภาพนธ พ.ศ. 2560



ตวชวด

ตวชวดท 11 ใชเทคโนโลยสารสนเทศน าเสนองานในรปแบบทเหมาะสม ตรงตามวตถประสงคของงาน

สาระส าคญ การศกษาวชา การออกแบบและสรางเวบไซต โดยใชแบบฝกทกษะ นน เปนการศกษาเพอใหนกเรยนเกดทกษะการปฏบต สามารถสรางองคความรไดดวยตนเอง ทงยงกอใหเกดการสรางลกษณะนสยอนพงประสงค ในสงคม ทงความคดและการมคณธรรม จรยธรรม

ผลการเรยนรทคาดหวง นกเรยนมผลสมฤทธทางการเรยนสงขนและมความพงพอใจตอการจดการเรยนรโดยใชแบบฝกทกษะการสรางเวบไซต

จดประสงคการเรยนร นกเรยนทดสอบวดผลสมฤทธทางการเรยนหลงเรยน วชา การออกแบบและสรางเวบไซต รหสวชา ง 32206 ผานเกณฑรอยละ 70

กจกรรมการเรยนร 1. แจงผลการเรยนรทคาดหวงทจะวดและประเมนผล

2. นกเรยนรบแบบทดสอบวดผลสมฤทธทางการเรยนหลงเรยน 3. ครอธบายถงขนตอนและวธการท าแบบทดสอบจนเขาใจ หากสงสยใหซกถามเปนรายบคคล 4. นกเรยนท าแบบทดสอบวดผลสมฤทธทางการเรยนหลงเรยน วชา การออกแบบและสราง เวบไซต รหสวชา ง 32206 จ านวน 40 ขอ ตามขนตอนจนเสรจเรยบรอย

5. ครรบแบบทดสอบวดผลสมฤทธทางการเรยนหลงเรยน วชาวชา การออกแบบและสรางเวบไซต รหสวชา ง 32206 แลวน ามาตรวจและบนทกคะแนนไวอยางเปนระบบ

6.6 ครแจงคะแนนผลการทดสอบใหนกเรยนทราบ 6.7 ครชมเชยนกเรยนทรวมปฏบตกจกรรมจนผานเกณฑก าหนดทกคน จากนนใหนกเรยนท าแบบประเมนความพงพอใจในการเรยนรทเกดจากการใชแบบฝกทกษะ

สอ/แหลงการเรยนร แบบทดสอบวดผลสมฤทธทางการเรยน แบบประเมนความพงพอใจ

การวดและประเมนผล วธการวด - ตรวจแบบทดสอบวดผลสมฤทธทางการเรยนหลงเรยน - สรปผลการประเมนความพงพอใจ เครองมอ - แบบทดสอบวดผลสมฤทธทางการเรยนหลงเรยน - แบบประเมนความพงพอใจ เกณฑการประเมน - นกเรยนท าแบบทดสอบวดผลสมฤทธทางการเรยนหลงเรยนไดถกตองไมนอยกวารอยละ 70

- ความพงพอใจอยในระดบ ดมาก



แผนการจัดการเรียนรู้ ...data.bopp-obec.info/emis/news/File/20190502142924.pdfผลการเร ยนร สาระการเร ยนร

Documents