สารบัญ รายวิชาที่ 1 การออกแบบ ... · 2015-11-02 · สารบัญ รายวิชาที่ 2 การออกแบบและพัฒนาเว็บไซต

สารบัญ รายวิชาท่ี 1 การออกแบบพัฒนาเว็บไซต (เทอม 1) 4 แผนการจัดการเรียนรูท่ี 1 เร่ือง ระดับของเทคโนโลยี และหลักการทําโครงงานท่ีมีการใชเทคโนโลยีสารสนเทศ 5 แผนการจัดการเรียนรูท่ี 2 เร่ือง ความหมายของอินเทอรเน็ต และรูปแบบการบริการตางๆ บนอินเทอรเน็ต 9 แผนการจัดการเรียนรูท่ี 3 เร่ือง คําศัพทท่ีเก่ียวของกับอินเทอรเน็ตและคุณธรรม จริยธรรมในการใชงานอินเทอรเน็ต 13 แผนการจัดการเรียนรูท่ี 4 เร่ือง ความหมาย หลักการออกแบบของเว็บไซตและสวนประกอบของหนาเว็บเพจ 17 แผนการจัดการเรียนรูท่ี 5 เร่ือง แนะนําโปรแกรม Adobe Dreamweaver CS3 21 แผนการจัดการเรียนรูท่ี 6 เร่ือง การตกแตงขอความบนเว็บเพจ (1) 25 แผนการจัดการเรียนรูท่ี 7 เร่ือง การตกแตงขอความบนเว็บเพจ (2) 29 แผนการจัดการเรียนรูท่ี 8 เร่ือง การตกแตงเว็บเพจดวยภาพกราฟก (1) 33 แผนการจัดการเรียนรูท่ี 9 เร่ือง การตกแตงเว็บเพจดวยภาพกราฟก (2) 37 แผนการจัดการเรียนรูท่ี 10 เรื่อง การสรางตารางบนเว็บเพจ (1) 41 แผนการจัดการเรียนรูท่ี 11 เรื่อง การสรางตารางบนเว็บเพจ (2) 45 แผนการจัดการเรียนรูท่ี 12 เรื่อง การเชื่อมโยง 49 แผนการจัดการเรียนรูท่ี 13 เรื่อง การออกแบบเลยเอาท (1) 54 แผนการจัดการเรียนรูท่ี 14 เรื่อง การออกแบบเลยเอาท (2) 58 แผนการจัดการเรียนรูท่ี 15 เรื่อง การสรางเฟรมเซตในเว็บเพจ (1) 62 แผนการจัดการเรียนรูท่ี 16 เรื่อง การสรางเฟรมเซตในเว็บเพจ (2) 66 แผนการจัดการเรียนรูท่ี 17 เรื่อง การสรางฟอรม 70 แผนการจัดการเรียนรูท่ี 18 เรื่อง การใชมัลติมีเดีย (1) 74 แผนการจัดการเรียนรูท่ี 19 เรื่อง การใชมัลติมีเดีย (2) 78 แผนการจัดการเรียนรูท่ี 20 เรื่อง การตรวจสอบการทํางานของหนาเว็บเพจ 82

สารบัญ รายวิชาท่ี 2 การออกแบบและพัฒนาเว็บไซต (เทอม 2) 86 แผนการจัดการเรียนรูท่ี 1 เร่ือง แนะนําภาษา HTML(1) 87 แผนการจัดการเรียนรูท่ี 2 เร่ือง แนะนําภาษา HTML(2) 91 แผนการจัดการเรียนรูท่ี 3 เร่ือง แนะนําโปรแกรม EditPlus 96 แผนการจัดการเรียนรูท่ี 4 เร่ือง การจัดเอกสารบนหนาเว็บ(1) 101 แผนการจัดการเรียนรูท่ี 5 เร่ือง การจัดเอกสารบนหนาเว็บ(2) 105 แผนการจัดการเรียนรูท่ี 6 เร่ือง การจัดเอกสารบนหนาเว็บ(3) 109 แผนการจัดการเรียนรูท่ี 7 เร่ือง การจัดการขอความ(1) 114 แผนการจัดการเรียนรูท่ี 8 เร่ือง การจัดการขอความ(2) 118 แผนการจัดการเรียนรูท่ี 9 เร่ือง การจัดการขอความ(3) 122 แผนการจัดการเรียนรูท่ี 10 เรื่อง การตกแตงเว็บเพจดวยกราฟก(1) 127 แผนการจัดการเรียนรูท่ี 11 เรื่อง การตกแตงเว็บเพจดวยกราฟก(2) 131 แผนการจัดการเรียนรูท่ี 12 เรื่อง การตกแตงเว็บเพจดวยกราฟก(3) 135 แผนการจัดการเรียนรูท่ี 13 เรื่อง การสรางตาราง(1) 140 แผนการจัดการเรียนรูท่ี 14 เรื่อง การสรางตาราง(2) 144 แผนการจัดการเรียนรูท่ี 15 เรื่อง การเชื่อมโยงหนาเว็บไซต(1) 149 แผนการจัดการเรียนรูท่ี 16 เรื่อง การเชื่อมโยงหนาเว็บไซต(2) 153 แผนการจัดการเรียนรูท่ี 17 เรื่อง การสรางแบบฟอรม 158 แผนการจัดการเรียนรูท่ี 18 เรื่อง การสรางเฟรม 162 แผนการจัดการเรียนรูท่ี 19 เรื่อง การแทรกไฟลเสียงลงไปในเว็บเพจ 167 แผนการจัดการเรียนรูท่ี 20 เรื่อง การแทรกไฟลวิดีโอลงไปในเว็บเพจ 171

สารบัญ เฉลยแบบฝกหัดทายหนวยและคําถามทายเรื่องรายวิชา การออกแบบพัฒนาเว็บไซต 176 แบบฝกหัดทายหนวยการเรียนรูท่ี 1 เทคโนโลยี และหลักการทําโครงงานท่ีมีการใชเทคโนโลยีสารสนเทศ 177 แบบฝกหัดทายหนวยการเรียนรูท่ี 2 ความรูเบ้ืองตนเกี่ยวกับอินเทอรเน็ต 180 แบบฝกหัดทายหนวยการเรียนรูท่ี 3 พ้ืนฐานและองคประกอบของเว็บไซต 182 คําถามทายเร่ืองที่ 4.1 แนะนําโปรแกรม Adobe Dreamweaver CS3 185 คําถามทายเร่ืองที่ 4.2 การตกแตงขอความบนเว็บเพจ 186 คําถามทายเร่ืองที่ 4.3 การตกแตงเว็บเพจดวยภาพกราฟก 187 คําถามทายเร่ืองที่ 4.4 การสรางตารางบนเว็บเพจ 188 คําถามทายเร่ืองที่ 4.5 การเช่ือมโยง 189 คําถามทายเร่ืองที่ 4.6 การออกแบบเลยเอาท 190 คําถามทายเร่ืองที่ 4.7 การสรางเฟรมเซตในเว็บเพจ 192 คําถามทายเร่ืองที่ 4.8 การสรางฟอรม 193 คําถามทายเร่ืองที่ 4.9 การใชมัลติมีเดีย 194 คําถามทายเร่ืองที่ 4.10 การตรวจสอบการทํางานของหนาเว็บเพจ 195 เฉลยแบบฝกหัดทายหนวยและคําถามทายเรื่องรายวิชา การออกแบบและพัฒนาเว็บไซต 196 แบบฝกหัดทายหนวยเรียนท่ี 1 แนะนําภาษา HTML 197 แบบฝกหัดทายหนวยเรียนท่ี 2 แนะนําโปรแกรม EditPlus 198 แบบฝกหัดทายหนวยเรียนท่ี 3 การจัดการเอกสารบนหนาเว็บ 199 แบบฝกหัดทายหนวยเรียนท่ี 4 การจัดการขอความ 200 แบบฝกหัดทายหนวยเรียนท่ี 5 การตกแตงเว็บเพจดวยกราฟก 201 แบบฝกหัดทายหนวยเรียนท่ี 6 การสรางตาราง 202 แบบฝกหัดทายหนวยเรียนท่ี 7 การเชื่อมโยงหนาเว็บไซต 204 แบบฝกหัดทายหนวยเรียนท่ี 8 การสรางแบบฟอรมและเฟรม 205 แบบฝกหัดทายหนวยเรียนท่ี 9 การแทรกมัลติมีเดียลงบนเว็บเพจ 206

แผนการจัดการเรียนรู

รายวิชาที่ 1 การออกแบบพัฒนาเว็บไซต (เทอม 1)

แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 1 เรื่อง เทคโนโลยี และหลักการทําโครงงานท่ีม ี เวลา 2 ชั่วโมง

การใชเทคโนโลยีสารสนเทศ แผนการจัดการเรียนรูท่ี 1 เรื่อง ระดับของเทคโนโลยี และหลักการทําโครงงานท่ีม ี เวลา 2 ชั่วโมง การใชเทคโนโลยีสารสนเทศ ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 1 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด

ง 3.1เขาใจ เห็นคุณคา และใชกระบวนการเทคโนโลยีสารสนเทศในการสืบคนขอมูลการเรียนรู การส่ือสาร การแกปญหา การทํางาน และอาชีพอยางมีประสิทธิภาพ ประสิทธิผล และมีคุณธรรม

ตัวชี้วัด ง.3.1 ม.3/1 อธิบายหลักการทําโครงงาน เปนการพัฒนาผลงานที่มาจากการศึกษาคนควา ดําเนินการพัฒนา

ตามความสนใจและความถนัดโดยใชเทคโนโลยีสารสนเทศ

จุดประสงคปลายทาง นักเรียนสามารถอธิบายระดับของเทคโนโลยี และหลักการทําโครงงานที่มกีารใชเทคโนโลยีสารสนเทศได

จุดประสงคนําทาง 1. นักเรียนอธิบายระดับของเทคโนโลยี ได 2. นักเรียนสามารถอธิบายเกี่ยวกับหลักการทําโครงงานที่มีการใชเทคโนโลยีสารสนเทศได

สาระสําคัญ

ในปจจุบันจําเปนที่จะตองมีความรูพ้ืนฐานเก่ียวกับการใชเทคโนโลยีสารสนเทศเนื่องจากเทคโนโลยีสารสนเทศทําใหเกิดการส่ือสารไรพรหมแดน ชวยอํานวยความสะดวก และชวยสงเสริมใหมีคุณภาพชีวิตที่ดีข้ึน ในปจจุบันเราจึงไดพบเห็นการประยุกตใชเทคโนโลยีสารสนเทศในงานตาง ๆ จํานวนมาก เทคโนโลยีสารสนเทศมีลักษณะสําคัญในการเพ่ิมประสิทธิภาพการทํางาน ชวยดานการบริหาร ชวยดําเนินการในหนวยงาน และชวยอํานวยความสะดวกในชีวิตประจําวัน โดยใชเทคโนโลยีสารสนเทศในการบันทึกและจัดเก็บขอมูล ประมวลผล แสดงผล การส่ือสารและเครือขาย

วิธีการจัดการเรียนรู

1. ครูบรรยายเนื้อหาและใหชมตัวอยางงาน 2. ครูและนักเรียนสนทนาแลกเปล่ียนความคิดและรวมกันสรุปเนื้อหาที่ไดเรียน

สาระการเรียนรู ความรู

1. ระดับของเทคโนโลยี 2. หลักการทําโครงงานที่มีการใชเทคโนโลยีสารสนเทศ

ทักษะกระบวนการ 1. ทักษะกระบวนการอธิบาย

สมรรถนะสําคัญของผูเรียน 1. ความสามารถในการส่ือสาร 2. ความสามารถในการคิด 3. ความสามารถในการใชเทคโนโลยี

คุณลักษณะอันพึงประสงค 1. ซื่อสัตย สุจริต 2. ใฝเรียนรู 3. มุงม่ันในการทํางาน

กิจกรรมการเรียนรู กิจกรรมนําสูการเรียน

ครูทักทาย และทบทวนเนื้อหาที่ไดเรียนไปในเทอมที่แลว กิจกรรมพัฒนาการเรียนรู

กิจกรรมที่ 1 : ครอูธิบายระดับของเทคโนโลยีและหลักการทําโครงงานที่มีการใชเทคโนโลยีสารสนเทศ กิจกรรมที่ 2 :นักเรียนทําแบบฝกหัดทายหนวยการเรียนรู

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุประดับของเทคโนโลยี และหลักการทําโครงงานที่มีการใช

เทคโนโลยีสารสนเทศ พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพิ่มเติมในหนังสือ

สื่อการเรียนรู/แหลงการเรียนรู

สื่อการเรียนรู 1. ส่ือมัลติมีเดีย

แหลงการเรียนรู 1. หนังสือเรียน

การวัดผล – ประเมินผล สิ่งท่ีตองการวัด (ภาระงาน / ชิ้นงาน)

ภาระงาน -แบบฝกหัดทายหนวยการเรียนรู

ช้ินงาน - เครื่องมือ

- แบบประเมิน คุณลักษณะอันพึงประสงค

เกณฑการประเมิน

การประเมินผลคุณลักษณะท่ีพึงประสงค

ประเด็นการประเมิน ระดับคุณภาพ 4 3 2 1

ซ่ือสัตย สุจริต 1. ใชคอมพิวเตอรโดยเคารพกฎระเบียบ กติกามารยาท 2. ไมนําเอาผลงานของผูอื่นมาเปนของตน

3. ไมสอดแนมหรือแกไขเปดดูในแฟมของผูอื่น ใฝเรียนรู 1. มีความสนใจในกิจกรรมตางๆ 2. ซักถามขอมูลตางๆ เม่ือเกิดความสงสัย 3. ศึกษาหาความรูอยางสม่ําเสมอ

มุงมั่นในการทํางาน 1. ตั้งใจและรับผิดชอบในหนาที่การงาน 2. ทํางานดวยความเพียรพยายาม และอดทนเพ่ือใหงานสําเร็จตามเปาหมาย

ระดับเกณฑการประเมินผลคุณลกัษณะท่ีพึงประสงค

คะแนนท่ีทําได ระดับคุณภาพ ปฏิบัติทุกครั้ง 4 = ดีมาก ปฏิบัติเกือบทุกครั้ง 3 = ดี ปฏิบัติเปนบางครั้ง 2 = ปานกลาง ไมคอยปฏิบัต ิ 1 = ควรปรับปรุง บันทึกการตรวจแผน ขอเสนอแนะ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________

(ท่ีปรึกษา / ผูอํานวยการ / ฝายวิชาการ)

แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 2 เรื่อง ความรูเบื้องตนเกี่ยวกับอินเทอรเน็ต เวลา 4 ชั่วโมงแผนการจัดการเรียนรูท่ี 2 เรื่อง ความหมายของอินเทอรเน็ต เวลา 2 ชั่วโมง และรูปแบบการบริการตางๆ บนอินเทอรเน็ต ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 2 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด


ตัวชี้วัด ง.3.1 ม.3/3 ใชเทคโนโลยีสารสนเทศในรูปแบบที่เหมาะสมกับลักษณะงาน ง.3.1 ม.3/4ใชคอมพิวเตอรชวยสรางชิ้นงานจากจินตนาการหรืองานที่ทําในชีวิตประจําวันตามหลักการทํา

โครงงานอยางมีจิตสํานึกและความรับผิดชอบ

จุดประสงคปลายทาง นักเรียนสามารถอธิบายความหมายของอินเทอรเน็ต และรูปแบบการบริการตางๆ บนอินเทอรเน็ตได

จุดประสงคนําทาง 1. นักเรียนอธิบายความหมายของอินเทอรเน็ตได 2. นักเรียนสามารถอธิบายเกี่ยวกับรูปแบบการบริการตางๆ บนอินเทอรเน็ตได


อินเตอรเน็ตเปนเครือขายคอมพิวเตอรขนาดใหญที่เชื่อมตอกับเครื่องคอมพิวเตอรทั่วโลกเขาดวยกัน ผูใชอินเตอรเน็ตสามารถสื่อสารถึงกันได ภายในเวลาอันรวดเร็ว ชวยประหยัดทรัพยากรและทีส่ําคัญอินเตอรเน็ตคือคลังสมองอันย่ิงใหญหรือหองสมุดโลกที่ทุกคนสามารถคนควาหาความรูขอมูล ขาวสารไดโดยไมตองเดินทางไปยังแหลงความรูนั้น

วิธีการจัดการเรียนรู 1. ครูบรรยายเนื้อหาและใหชมตัวอยางงาน 2. ครูและนักเรียนสนทนาแลกเปล่ียนความคิดและรวมกันสรุปเนื้อหาที่ไดเรียน

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

ความรู 1. ความหมายของอินเทอรเน็ต 2. รูปแบบการบริการตางๆ บนอินเทอรเน็ต





ครูทักทาย และทบทวนเนื้อหาที่ไดเรียนไปในคาบที่แลว กิจกรรมพัฒนาการเรียนรู

กิจกรรมที่ 1 : ครูอธิบายความหมายของอินเทอรเน็ต และรูปแบบการบริการตางๆ บนอินเทอรเน็ต กิจกรรมรวบยอด

ครูและนักเรียนรวมกันสรุปความหมายของอินเทอรเน็ต และรูปแบบการบริการตางๆ บนอินเทอรเน็ต พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ

สื่อการเรียนรู/แหลงการเรียนรู สื่อการเรียนรู

1. ส่ือมัลติมีเดีย แหลงการเรียนรู

1. หนังสือเรียน การวัดผล – ประเมินผล สิ่งท่ีตองการวัด (ภาระงาน / ชิ้นงาน)

ภาระงาน -






ซ่ือสัตย สุจริต 1. ใชคอมพิวเตอรโดยเคารพกฎระเบียบ กติกามารยาท 2. ไมนําเอาผลงานของผูอื่นมาเปนของตน 3. ไมสอดแนมหรือแกไขเปดดูในแฟมของผูอื่น

ใฝเรียนรู 1. มีความสนใจในกิจกรรมตางๆ

2. ซักถามขอมูลตางๆ เมื่อเกิดความสงสัย 3. ศึกษาหาความรูอยางสมํ่าเสมอ มุงมั่นในการทํางาน 1. ต้ังใจและรับผิดชอบในหนาที่การงาน 2. ทํางานดวยความเพียรพยายาม และอดทนเพ่ือใหงานสําเร็จตามเปาหมาย

ระดับเกณฑการประเมินผลคุณลักษณะท่ีพึงประสงค


(ท่ีปรึกษา / ผูอํานวยการ / ฝายวิชาการ

แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลยี หนวยการเรียนรูที่ 2 เรื่อง ความรูเบื้องตนเกี่ยวกับอินเทอรเน็ต เวลา 4 ชั่วโมง แผนการจัดการเรียนรูท่ี 3 เรื่อง คําศัพทที่เกี่ยวของกับอินเทอรเน็ต เวลา 2 ชั่วโมง และคุณธรรม จริยธรรมในการใชงานอินเทอรเน็ต ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 3 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายคําศัพทที่เก่ียวของกับอินเทอรเน็ต และคุณธรรม จริยธรรมในการใชงานอินเทอรเน็ต

ได

จุดประสงคนําทาง 1. นักเรียนอธิบายคําศัพทที่เก่ียวของกับอินเทอรเน็ตได 2. นักเรียนสามารถอธิบายเกี่ยวกับคุณธรรม จริยธรรมในการใชงานอินเทอรเน็ตได


อินเตอรเน็ตเปนเครือขายคอมพิวเตอรขนาดใหญที่เชื่อมตอกับเครื่องคอมพิวเตอรทั่วโลกเขาดวยกัน ผูใชอินเตอรเน็ตสามารถสื่อสารถึงกันได ภายในเวลาอันรวดเร็ว ชวยประหยัดทรัพยากรและที่สําคัญอินเตอรเน็ตคอืคลังสมองอันย่ิงใหญหรือหองสมุดโลกที่ทุกคนสามารถคนควาหาความรูขอมูล ขาวสารไดโดยไมตองเดินทางไปยังแหลงความรูนั้น



ความรู 1. คําศัพทที่เก่ียวของกับอินเทอรเน็ต 2. คุณธรรม จริยธรรมในการใชงานอินเทอรเน็ต






กิจกรรมที่ 1 : ครูอธิบายคําศัพทที่เก่ียวของกับอินเทอรเน็ต และคุณธรรม จริยธรรมในการใชงานอินเทอรเน็ต กิจกรรมที่ 2 :นักเรียนทําแบบฝกหัดทายหนวยการเรียนรู

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปคําศัพทที่เก่ียวของกับอินเทอรเน็ต และคุณธรรม จริยธรรมใน

การใชงานอินเทอรเน็ต พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู











3. ไมสอดแนมหรือแกไขเปดดูในแฟมของผูอื่น ใฝเรียนรู 1. มีความสนใจในกิจกรรมตางๆ 2. ซักถามขอมูลตางๆ เมื่อเกิดความสงสัย 3. ศึกษาหาความรูอยางสมํ่าเสมอ

มุงมั่นในการทํางาน 1. ต้ังใจและรับผิดชอบในหนาที่การงาน 2. ทํางานดวยความเพียรพยายาม และอดทนเพ่ือใหงานสําเร็จตามเปาหมาย




แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 3 เรื่อง พื้นฐานและองคประกอบของเว็บไซต เวลา 2 ชั่วโมง แผนการจัดการเรียนรูท่ี 4 เรื่อง ความหมาย หลักการออกแบบของเว็บไซต เวลา 2 ชั่วโมง และสวนประกอบของหนาเว็บเพจ ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 4 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายความหมาย หลักการออกแบบของเว็บไซต และสวนประกอบของหนาเว็บเพจได

จุดประสงคนําทาง 1. นักเรียนอธิบายความหมายของเว็บไซตได 2. นักเรียนอธิบายหลักการออกแบบของเว็บไซตได 3. นักเรียนสามารถอธิบายเกี่ยวกับสวนประกอบของหนาเว็บเพจได


ในปจจุบันเว็บไซตไดกลายเปนส่ือที่มีความสําคัญซึ่งมีบทบาทอยางมากในเรื่องของการโฆษณาและประชาสัมพันธ ทั้งนี้เนื่องจากคุณสมบัติที่สามารถนําเสนอ เผยแพร ขอมูลขาวสารไดอยางไรขีดจํากัด ทั้งในเรื่องเวลาและระยะทาง เพ่ือประโยชนในการเผยแพรขอมูล ขาวสาร ไปสูกลุมเปาหมาย เชนการโฆษณาขายสินคาและบริการในรูปแบบตางๆ ที่มีจุดมุงหมายในเชิงธุรกิจ หรือการใชเว็บไซตเปนชองทางเผยแพรขอมูล ขาวสารขององคกร เพ่ือประชาสัมพันธองคกรใหเปนที่รูจักเพ่ือหวังผลในการสรางภาพลักษณขององคกรใหเปนที่ยอมรับ ซึ่งเว็บไซตนั้นเปนสื่อที่มีประสิทธิภาพเปนอยางมากในการสนองภาระกิ



ความรู 1. ความหมายของเว็บไซต 2. สวนประกอบของหนาเว็บเพจ 3. หลักการออกแบบของเว็บไซต






กิจกรรมที่ 1 : ครูอธิบายความหมายของเว็บไซต สวนประกอบของหนาเว็บเพจและหลักการออกแบบของเว็บไซต

กิจกรรมที่ 2 :นักเรียนทําแบบฝกหัดทายหนวยการเรียนรู

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปความหมาย หลักการออกแบบของเว็บไซต และสวนประกอบ

ของหนาเว็บเพจ พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนงัสือ สื่อการเรียนรู/แหลงการเรียนรู
















แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ี

หนวยการเรียนรูที่ 4 เรื่อง การออกแบบและพัฒนาเว็บไซต เวลา 32 ช่ัวโมง ดวยโปรแกรม Dreamweaver CS3

แผนการจัดการเรียนรูท่ี 5 เรื่อง แนะนําโปรแกรม Adobe Dreamweaver CS3 เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 5 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรยีนรู/ตัวช้ีวัด



โครงงานอยางมีจิตสํานึกและความรับผิดชอบ จุดประสงคปลายทาง

นักเรียนสามารถอธิบายเกี่ยวกับโปรแกรม Adobe Dreamweaver CS3 ได

จุดประสงคนําทาง 1. นักเรียนสามารถอธิบายข้ันตอนตางๆที่เกี่ยวกับโปรแกรม Adobe Dreamweaver CS3 ได


Adobe Dreamweaver เปนโปรแกรมที่ใชสําหรับสรางเว็บเพจ และบริหารเว็บไซตที่ไดรับความนิยมสูงสุด ในกลุมโปรแกรมประเภทเดียวกัน ในปจจุบัน เนื่องจากคุณสมบัติของโปรแกรมที่มีความสะดวกตอการใชงาน มีฟงกชันที่ทําใหผูใชสามารถจัดวางขอความ รูปภาพ ตาราง ฟอรม วิดีโอ รวมถึงองคประกอบอื่น ๆ ภายในเว็บเพจไดอยางสวยงามตามที่ผูใชตองการ โดยไมตองใชภาษาสคริปตที่ยุงยากซับซอนเหมือนกอน ดวยความสามารถและคุณสมบัติของโปรแกรม จึงทําใหงายตอการใชงาน



ความรู 1. ข้ันตอนตางๆของโปรแกรม Adobe Dreamweaver CS3

ทักษะกระบวนการ 1. ทักษะกระบวนการปฏิบัติ 2. ทักษะกระบวนการอธิบาย

สมรรถนะสําคัญของผูเรียน

1. ความสามารถในการส่ือสาร 2. ความสามารถในการคิด 3. ความสามารถในการใชเทคโนโลยี




กิจกรรมที่ 1 : ครูอธบิายแนะนําโปรแกรม Adobe Dreamweaver CS3 กิจกรรมที่ 2 :นักเรียนตอบคําถามทายเรื่อง

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปวิธีการและขั้นตอนของโปรแกรม Adobe Dreamweaver CS3

พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ




ภาระงาน - คําถามทายเรื่อง












แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 4 เรื่อง การออกแบบและพัฒนาเว็บไซต เวลา 32 ช่ัวโมง

ดวยโปรแกรม Dreamweaver CS3 แผนการจัดการเรียนรูท่ี 6 เรื่อง การตกแตงขอความบนเว็บเพจ (1) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 6 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายเกี่ยวกับการตกแตง การจัดรูปแบบตําแหนงขอความ และการเวนวรรคระหวาง

ตัวอักษรได

จุดประสงคนําทาง 1. นักเรียนอธิบายการตกแตง การจัดรูปแบบตําแหนงขอความได 2. นักเรียนสามารถอธิบายการเวนวรรคระหวางตัวอักษรได


Dreamweaver เปนโปรแกรมที่ใชสําหรับสรางเว็บเพจ และบริหารเว็บไซตที่ไดรับความนิยมสูงสุด ในกลุมโปรแกรมประเภทเดียวกัน ในปจจุบัน เนื่องจากคุณสมบัติของโปรแกรมที่มีความสะดวกตอการใชงาน มีฟงกชันที่ทําใหผูใชสามารถจัดวางขอความ รูปภาพ ตาราง ฟอรม วิดีโอ รวมถึงองคประกอบอื่น ๆ ภายในเว็บเพจไดอยางสวยงามตามที่ผูใชตองการ โดยไมตองใชภาษาสคริปตที่ยุงยากซับซอนเหมือนกอน ดวยความสามารถและคุณสมบัติของโปรแกรม จึงทําใหงายตอการใชงาน



ความรู 1. การตกแตง การจัดรูปแบบตําแหนงขอความ 2. การเวนวรรคระหวางตัวอักษร







กิจกรรมที่ 1 : ครูอธิบายการตกแตง การจัดรูปแบบตําแหนงขอความและการเวนวรรคระหวางตัวอักษร

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปวิธีการตกแตง การจัดรูปแบบตําแหนงขอความ และการเวน

วรรคระหวางตัวอักษร พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู







เกณฑการประเมิน การประเมินผลคุณลักษณะท่ีพึงประสงค










แผนการจัดการเรียนรูท่ี 7 เรื่อง การตกแตงขอความบนเว็บเพจ (2) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 7 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายเกี่ยวกับการแทรกสัญลักษณพิเศษ และการจัดขอความแบบหัวขอใหญ หัวขอยอยได

จุดประสงคนําทาง 1. นักเรียนอธิบายการแทรกสัญลักษณพิเศษ ได 2. นักเรียนสามารถอธิบายการจัดขอความแบบหัวขอใหญ หัวขอยอยได





ความรู 1. การแทรกสัญลักษณพิเศษ 2. การจัดขอความแบบหัวขอใหญ หัวขอยอย

ทักษะกระบวนการ

1. ทักษะกระบวนการปฏิบัติ 2. ทักษะกระบวนการอธิบาย






กิจกรรมที่ 1 : ครูอธิบายการแทรกสัญลักษณพิเศษและการจัดขอความแบบหัวขอใหญ หัวขอยอย กิจกรรมที่ 2 : นักเรียนตอบคําถามทายเรื่อง

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการแทรกสัญลักษณพิเศษ และการจัดขอความแบบหัวขอใหญ

หัวขอยอย พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู



การวัดผล – ประเมินผล สิ่งท่ีตองการวัด (ภาระงาน / ชิน้งาน)

ภาระงาน -คําถามทายเรื่อง














แผนการจัดการเรียนรูท่ี 8 เรื่อง การตกแตงเว็บเพจดวยภาพกราฟก (1) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 8 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




นักเรียนสามารถอธิบายเกี่ยวกับการแทรกภาพลงในเว็บเพจและการปรับแตงรายละเอียดของรูปภาพได

จุดประสงคนําทาง 1. นักเรียนอธิบายการแทรกภาพลงในเว็บเพจได 2. นักเรียนสามารถอธิบายการปรับแตงรายละเอียดของรูปภาพได





ความรู 1. การแทรกภาพลงในเว็บเพจ 2. การปรับแตงรายละเอียดของรูปภาพ








กิจกรรมที่ 1 : ครูอธิบายการแทรกภาพลงในเว็บเพจและการปรับแตงรายละเอียดของรูปภาพ

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการแทรกภาพลงในเว็บเพจและการปรับแตงรายละเอียดของ

รูปภาพ พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู


















แผนการจัดการเรียนรูท่ี 9 เรื่อง การตกแตงเว็บเพจดวยภาพกราฟก (2) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 9 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




นักเรียนสามารถอธิบายเกี่ยวกับการแสดงภาพเปนพ้ืนหลังเว็บเพจ และการแกไขรูปภาพในหนาเว็บเพจได

จุดประสงคนําทาง 1. นักเรียนอธิบายการแสดงภาพเปนพ้ืนหลังเว็บเพจได 2. นักเรียนสามารถอธิบายการแกไขรูปภาพในหนาเว็บเพจได


Dreamweaver เปนโปรแกรมที่ใชสําหรับสรางเว็บเพจ และบริหารเว็บไซตที่ไดรับความนิยมสูงสุด ในกลุมโปรแกรมประเภทเดียวกัน ในปจจุบัน เนื่องจากคุณสมบัติของโปรแกรมที่มีความสะดวกตอการใชงาน มีฟงกชนัที่ทําใหผูใชสามารถจัดวางขอความ รูปภาพ ตาราง ฟอรม วิดีโอ รวมถึงองคประกอบอื่น ๆ ภายในเว็บเพจไดอยางสวยงามตามที่ผูใชตองการ โดยไมตองใชภาษาสคริปตที่ยุงยากซับซอนเหมือนกอน ดวยความสามารถและคุณสมบัติของโปรแกรม จึงทําใหงายตอการใชงาน



ความรู 1. การแสดงภาพเปนพ้ืนหลังเว็บเพจ 2. การแกไขรูปภาพในหนาเว็บเพจ








กิจกรรมที่ 1 : ครูอธิบายการแสดงภาพเปนพ้ืนหลังเว็บเพจและการแกไขรูปภาพในหนาเว็บเพจ กิจกรรมที่ 2 : นักเรียนตอบคําถามทายเรื่อง

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการแสดงภาพเปนพ้ืนหลังเว็บเพจ และการแกไขรูปภาพในหน

เว็บเพจ พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู










ซ่ือสัตย สุจริต 1. ใชคอมพิวเตอรโดยเคารพกฎระเบียบ กติกามารยาท 2. ไมนําเอาผลงานของผูอื่นมาเปนของ

ตน 3. ไมสอดแนมหรือแกไขเปดดูในแฟมของผูอื่น ใฝเรียนรู 1. มีความสนใจในกิจกรรมตางๆ 2. ซักถามขอมูลตางๆ เมื่อเกิดความสงสัย 3. ศึกษาหาความรูอยางสมํ่าเสมอ







แผนการจัดการเรียนรูท่ี 10 เรื่อง การสรางตารางบนเว็บเพจ (1) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 10 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายเกี่ยวกับการสรางตาราง แทรกขอความ แทรกรูปภาพในตาราง การแทรกแถว แทรก

คอลัมน การลบแถว และลบคอลัมน ได

จุดประสงคนําทาง 1. นักเรียนอธิบายการสรางตาราง แทรกขอความ แทรกรูปภาพในตารางได 2. นักเรียนสามารถอธิบายการแทรกแถว แทรกคอลัมน การลบแถว และลบคอลัมน ได






ความรู 1. การสรางตาราง แทรกขอความ แทรกรูปภาพในตาราง 2. การแทรกแถว แทรกคอลัมน การลบแถว และลบคอลัมน








กิจกรรมที่ 1 : ครูอธิบายการสรางตาราง แทรกขอความ แทรกรูปภาพในตาราง การแทรกแถว แทรกคอลัมน การลบแถว และลบคอลัมน

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการสรางตาราง แทรกขอความ แทรกรูปภาพในตาราง การ

แทรกแถว แทรกคอลัมน การลบแถว และลบคอลัมน พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู















แผนการจัดการเรียนรูรายวชิา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ี


แผนการจัดการเรียนรูท่ี 11 เรื่อง การสรางตารางบนเว็บเพจ (2) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 11 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด


ตัวชี้วัด ง.3.1 ม.3/3 ใชเทคโนโลยีสารสนเทศในรูปแบบที่เหมาะสมกับลักษณะงาน ง.3.1 ม.3/4ใชคอมพิวเตอรชวยสรางชิ้นงานจากจินตนาการหรืองานทีท่ําในชีวิตประจําวันตามหลักการทํา


นักเรียนสามารถอธิบายเกี่ยวกับการรวมเซล การแบงเซล การปรับความกวาง ความสูงของตารางใน Properties Inspector และการกําหนดพ้ืนตารางได

จุดประสงคนําทาง

1. นักเรียนอธิบายการรวมเซล การแบงเซลได 2. นักเรียนสามารถอธิบายการปรับความกวาง ความสูงของตารางใน Properties Inspector และการกําหนด

พ้ืนตารางได สาระสําคัญ




ความรู 1. การรวมเซล การแบงเซล 2. การปรับความกวาง ความสูงของตารางใน Properties Inspector และการกําหนดพ้ืนตาราง








กิจกรรมที่ 1 : ครูอธิบายการรวมเซล การแบงเซล การการปรับความกวาง ความสูงของตารางใน Properties Inspector และการกําหนดพ้ืนตาราง

กิจกรรมที่ 2 : นักเรียนตอบคําถามทายเรื่อง

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการรวมเซล การแบงเซล การปรับความกวาง ความสูงของ

ตารางใน Properties Inspector และการกําหนดพ้ืนตาราง พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพิ่มเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู


















แผนการจัดการเรียนรูท่ี 12 เรื่อง การเชื่อมโยง เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 12 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด

ง 3.1เขาใจ เห็นคณุคา และใชกระบวนการเทคโนโลยีสารสนเทศในการสืบคนขอมูลการเรียนรู การส่ือสาร การแกปญหา การทํางาน และอาชีพอยางมีประสิทธิภาพ ประสิทธิผล และมีคุณธรรม



จุดประสงคปลายทาง นักเรียนสามารถอธิบายเกี่ยวกับการเชื่อมโยงเว็บไซตได

จุดประสงคนําทาง 1. นักเรียนอธิบายการเชื่อมโยงภายในเว็บไซต และเว็บไซตอื่นๆได 2. นักเรียนสามารถอธิบายการเชื่อมโยงเพื่อดาวนโหลดไฟล และการเชื่อมโยงดวย Map Linkได






ความรู 1. การเชื่อมโยงภายในเว็บไซต และเว็บไซตอื่น ๆ2. การเชื่อมโยงเพ่ือดาวนโหลดไฟล และการเชื่อมโยงดวย Map Link








กิจกรรมที่ 1 : ครูอธิบายการเชื่อมโยงภายในเว็บไซต และเว็บไซตอื่นๆ การเชื่อมโยงเพ่ือดาวนโหลดไฟล และการเชื่อมโยงดวย Map Link

กิจกรรมที่ 2 : นักเรียนตอบคําถามทายเรื่อง กิจกรรมรวบยอด

ครูและนักเรียนรวมกันสรุปการเชื่อมโยงภายในเว็บไซต เว็บไซตอื่นๆ การเชื่อมโยงเพื่อ ดาวนโหลดไฟล และการเชื่อมโยงดวย Map Link พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู










ใฝเรียนรู 1. มีความสนใจในกิจกรรมตาง ๆ 2. ซักถามขอมูลตางๆ เมื่อเกิดความสงสัย 3. ศึกษาหาความรูอยางสมํ่าเสมอ






ดวยโปรแกรม Dreamweaver CS3 แผนการจัดการเรียนรูท่ี 13 เรื่อง การออกแบบเลยเอาท (1) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 13 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายเกี่ยวกับการเขาสูโหมด Layout การสรางและการแกไขเปล่ีนแปลง Layout Tableได

จุดประสงคนําทาง 1. นักเรียนอธิบายการเขาสูโหมด Layout ได 2. นักเรียนสามารถอธิบายการสรางและการแกไขเปล่ียนแปลง Layout Tableได





ความรู 1. การเขาสูโหมด Layout 2. การสรางและการแกไขเปล่ีนแปลง Layout Table








กิจกรรมที่ 1 : ครูอธิบายการเขาสูโหมด Layoutและการสรางและการแกไขเปล่ีนแปลง Layout Table

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการเขาสูโหมด Layout การสรางและการแกไขเปล่ีนแปลง

Layout Table พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู


















แผนการจัดการเรียนรูท่ี 14 เรื่อง การออกแบบเลยเอาท (2) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 14 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายเกี่ยวกับการสราง การแกไขเปล่ียนแปลง Layout Cell และการกําหนดโครงสรางของ

หนาเว็บเพจดวยโหมด Layout ได

จุดประสงคนําทาง 1. นักเรียนอธิบายการสรางและ การแกไขเปล่ียนแปลง Layout Cell ได 2. นักเรียนสามารถอธิบายการกําหนดโครงสรางของหนาเว็บเพจดวยโหมด Layout ได


Dreamweaver เปนโปรแกรมที่ใชสําหรับสรางเว็บเพจ และบริหารเว็บไซตที่ไดรับความนิยมสูงสุด ในกลุมโปรแกรมประเภทเดียวกัน ในปจจุบัน เนื่องจากคุณสมบัติของโปรแกรมที่มีความสะดวกตอการใชงาน มีฟงกชันทีท่ําใหผูใชสามารถจัดวางขอความ รูปภาพ ตาราง ฟอรม วิดีโอ รวมถึงองคประกอบอื่น ๆ ภายในเว็บเพจไดอยางสวยงามตามที่ผูใชตองการ โดยไมตองใชภาษาสคริปตที่ยุงยากซับซอนเหมือนกอน ดวยความสามารถและคุณสมบัติของโปรแกรม จึงทําใหงายตอการใชงาน




ความรู 1. การสรางและ การแกไขเปล่ียนแปลง Layout Cell 2. การกําหนดโครงสรางของหนาเว็บเพจดวยโหมด Layout







กิจกรรมที่ 1 : ครูอธิบายการสรางและ การแกไขเปลี่ยนแปลง Layout Cellและการกําหนดโครงสรางของหนาเว็บเพจดวยโหมด Layout


กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการสราง การแกไขเปลี่ยนแปลง Layout Cell และการกําหนด

โครงสรางของหนาเว็บเพจดวยโหมด Layout พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู

















ดวยโปรแกรม Dreamweaver CS3 แผนการจัดการเรียนรูท่ี 15 เรื่อง การสรางเฟรมเซตในเว็บเพจ (1) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 15 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายเกี่ยวกับการสรางเฟรมจากรูปแบบเฟรมสําเร็จรูป การออกแบบเฟรมบนหนาเว็บเพจ

ดวยตนเอง และการกําหนดรายละเอียดของเฟรมได

จุดประสงคนําทาง 1. นักเรียนอธิบายการสรางเฟรมจากรูปแบบเฟรมสําเร็จรูป และการออกแบบเฟรมบนหนาเว็บเพจดวย

ตนเองได 2. นักเรียนสามารถอธิบายการกําหนดรายละเอียดของเฟรมได

สาระสําคัญ Dreamweaver เปนโปรแกรมที่ใชสําหรับสรางเว็บเพจ และบริหารเว็บไซตที่ไดรับความนิยมสูงสุด ในกลุม

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



ความรู 1. การสรางเฟรมจากรูปแบบเฟรมสําเร็จรูป และการออกแบบเฟรมบนหนาเว็บเพจดวยตนเอง 2. การกําหนดรายละเอียดของเฟรม







กิจกรรมที่ 1 : ครูอธิบายการสรางเฟรมจากรูปแบบเฟรมสําเร็จรูป การออกแบบเฟรมบนหนาเว็บเพจดวยตนเอง และการกําหนดรายละเอียดของเฟรม

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการสรางเฟรมจากรูปแบบเฟรมสําเร็จรูป การออกแบบเฟรม

บนหนาเว็บเพจดวยตนเอง และการกําหนดรายละเอียดของเฟรม พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพิ่มเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู







เกณฑการประเมนิ การประเมินผลคุณลักษณะท่ีพึงประสงค





ระดับเกณฑการประเมินผลคุณลักษณะท่ีพงึประสงค

คะแนนท่ีทําได ระดับคุณภาพ ปฏิบัติทุกครั้ง 4 = ดีมาก ปฏิบัติเกือบทุกครั้ง 3 = ดี ปฏิบัติเปนบางครั้ง 2 = ปานกลาง ไมคอยปฏิบัติ 1 = ควรปรับปรุง บันทึกการตรวจแผน ขอเสนอแนะ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________



ดวยโปรแกรม Dreamweaver CS3 แผนการจัดการเรียนรูท่ี 16 เรื่อง การสรางเฟรมเซตในเว็บเพจ (2) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 16 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายเกี่ยวกับการแทรกเว็บเพจลงในเฟรม การบันทึกเฟรม และการเชื่อมโยงหนาเว็บเพจ

ระหวางเฟรมได

จุดประสงคนําทาง 1. นักเรียนอธิบายการแทรกเว็บเพจลงในเฟรม และการบันทึกเฟรมได 2. นักเรียนสามารถอธิบายการเชื่อมโยงหนาเว็บเพจระหวางเฟรมได





ความรู 1. การแทรกเว็บเพจลงในเฟรม และการบันทึกเฟรม 2. การเชื่อมโยงหนาเว็บเพจระหวางเฟรม







กิจกรรมที่ 1 : ครูอธิบายการแทรกเว็บเพจลงในเฟรม การบันทึกเฟรมและการเชื่อมโยงหนาเว็บเพจระหวางเฟรม


กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการแทรกเว็บเพจลงในเฟรม การบันทึกเฟรม และการเชื่อมโยง

หนาเว็บเพจระหวางเฟรม พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู




ภาระงาน - คําถามทายเรื่อง












ดวยโปรแกรม Dreamweaver CS3 แผนการจัดการเรียนรูท่ี 17 เรื่อง การสรางฟอรม เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 17 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายเกี่ยวกับเครื่องมือที่ใชในการสรางฟอรม และการสรางฟอรมในรูปแบบตางๆได

จุดประสงคนําทาง 1. นักเรียนอธิบายเกี่ยวกับเครื่องมือที่ใชในการสรางฟอรมได 2. นักเรียนสามารถอธิบายการสรางฟอรมในรูปแบบตางๆได


Dreamweaver เปนโปรแกรมที่ใชสําหรับสรางเว็บเพจ และบริหารเว็บไซตที่ไดรับความนิยมสูงสุด ในกลุมโปรแกรมประเภทเดียวกัน ในปจจุบัน เนื่องจากคุณสมบัติของโปรแกรมที่มีความสะดวกตอการใชงาน มีฟงกชันที่ทําใหผูใชสามารถจัดวางขอความ รูปภาพ ตาราง ฟอรม วิดีโอ รวมถึงองคประกอบอืน่ ๆ ภายในเว็บเพจไดอยางสวยงามตามที่ผูใชตองการ โดยไมตองใชภาษาสคริปตที่ยุงยากซับซอนเหมือนกอน ดวยความสามารถและคุณสมบัติของโปรแกรม จึงทําใหงายตอการใชงาน



ความรู 1. เครื่องมือที่ใชในการสรางฟอรม 2. การสรางฟอรมในรูปแบบตาง ๆ







กิจกรรมที่ 1 : ครูอธิบายเครื่องมือที่ใชในการสรางฟอรม และการสรางฟอรมในรูปแบบตาง ๆกิจกรรมที่ 2 : นักเรียนตอบคําถามทายเรื่อง

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปเครื่องมือที่ใชในการสรางฟอรม และการสรางฟอรมในรูปแบบ

ตางๆ พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู






- แบบประเมิน คุณลักษณะอนัพึงประสงค











ดวยโปรแกรม Dreamweaver CS3 แผนการจัดการเรียนรูท่ี 18 เรื่อง การใชมัลติมีเดีย (1) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 18 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายเกี่ยวกับการแทรกไฟล Flash การสรางปุม Flash Button และการสราง Flash Textได

จุดประสงคนําทาง 1. นักเรียนอธิบายเกีย่วกับการแทรกไฟล Flashได 2. นักเรียนสามารถอธิบายการสรางปุม Flash Button และการสราง Flash Textได


Dreamweaver เปนโปรแกรมที่ใชสําหรับสรางเว็บเพจ และบริหารเว็บไซตที่ไดรับความนิยมสูงสุด ในกลุมโปรแกรมประเภทเดียวกัน ในปจจุบัน เนื่องจากคุณสมบติัของโปรแกรมที่มีความสะดวกตอการใชงาน มีฟงกชันที่ทําใหผูใชสามารถจัดวางขอความ รูปภาพ ตาราง ฟอรม วิดีโอ รวมถึงองคประกอบอื่น ๆ ภายในเว็บเพจไดอยางสวยงามตามที่ผูใชตองการ โดยไมตองใชภาษาสคริปตที่ยุงยากซับซอนเหมือนกอน ดวยความสามารถและคุณสมบัติของโปรแกรม จึงทําใหงายตอการใชงาน



ความรู 1. การแทรกไฟล Flash 2. การสรางปุม Flash Button และการสราง Flash Text








กิจกรรมที่ 1 : ครูอธิบายการแทรกไฟล Flash การสรางปุม Flash Button และการสราง Flash Text

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการแทรกไฟล Flash การสรางปุม Flash Button และการสราง

Flash Text พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู

















ดวยโปรแกรม Dreamweaver CS3 แผนการจัดการเรียนรูท่ี 19 เรื่อง การใชมัลติมีเดีย (2) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 19 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายเกี่ยวกับการใสไฟลเสียงดวย Plugin การแสดงคลิปวิดีโอดวย Flash Video และการ

สรางภาพสไลดดวย Image Viewerได

จุดประสงคนําทาง 1. นักเรียนอธิบายเกี่ยวกับการใสไฟลเสียงดวย Plugin และการแสดงคลิปวิดีโอดวย Flash Video ได 2. นักเรียนสามารถอธิบายการสรางภาพสไลดดวย Image Viewerได





ความรู 1. การใสไฟลเสียงดวย Plugin และการแสดงคลิปวิดีโอดวย Flash Video 2. การสรางภาพสไลดดวย Image Viewer








กิจกรรมที่ 1 : ครูอธิบายการใสไฟลเสียงดวย Plugin การแสดงคลิปวิดีโอดวย Flash Videoและ การสรางภาพสไลดดวย Image Viewer


กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการใสไฟลเสียงดวย Plugin การแสดงคลิปวิดีโอดวย Flash

Video และการสรางภาพสไลดดวย Image Viewer พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู

















ดวยโปรแกรม Dreamweaver CS3 แผนการจัดการเรียนรูท่ี 20 เรื่อง การตรวจสอบการทํางานของหนาเว็บเพจ เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 1 สัปดาหท่ี 20 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสามารถอธิบายเกี่ยวกับการตรวจสอบการทํางานของหนาเว็บเพจได

จุดประสงคนําทาง 1. นักเรียนอธิบายเกี่ยวกับการตรวจสอบการทํางานของหนาเว็บเพจได





ความรู 1. การตรวจสอบการทํางานของหนาเว็บเพจ








กิจกรรมที่ 1 : ครูอธิบายการตรวจสอบการทํางานของหนาเว็บเพจ กิจกรรมที่ 2 : นักเรียนตอบคําถามทายเรื่อง

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการตรวจสอบการทํางานของหนาเว็บเพจ พรอมกับแจก

หนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู















แผนการจัดการเรียนรู

รายวิชาที่ 2 การออกแบบและพัฒนาเว็บไซต (เทอม 2)

แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 1 เรื่อง แนะนําภาษา HTML เวลา 4 ช่ัวโมง แผนการจัดการเรียนรูท่ี 1 เรื่อง แนะนําภาษา HTML(1) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 1 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด

มาตรฐาน ง 3.1 เขาใจ เห็นคุณคา และใชกระบวนการเทคโนโลยีสารสนเทศในการสืบคนขอมูลการเรียนรู การส่ือสาร การแกปญหา การทํางาน และอาชีพอยางมีประสิทธิภาพ ประสิทธิผล และมีคุณธรรม

ตัวชี้วัด ง 3.1 ม.3/3 ใชเทคโนโลยีสารสนเทศนําเสนองานในรูปแบบที่เหมาะสมกับลักษณะงาน

จุดประสงคปลายทาง นักเรียนอธิบายโครงสรางหลักของภาษา HTML ได

จุดประสงคนําทาง 1. นักเรียนสามารถอธิบายโครงสรางหลักของภาษา HTML ได สาระสําคัญ

ภาษา HTML (Hyper Text Markup Language) เปนภาษาของคอมพิวเตอรซึ่งเปนภาษามาตรฐานสากลที่ใชนําเสนอขอมูลในการส่ือสารบนเครือขายอินเทอรเน็ต (Internet) รูปแบบหนึ่งโดยสามารถสื่อสารขอมูลในรูปแบบตางๆ ไมวาจะเปนขอความ รูปภาพ เสียง ภาพเคล่ือนไหวและอื่นๆ จะถูกเชื่อมโยงเขาหากัน ดวยชุดคําส่ังตางๆ เพื่อใหแสดงผลออกมาในหนาเว็บเพจ วิธีการจัดการเรียนรู


สาระการเรียนรู ความรู 1. โครงสรางหลักของภาษา HTML ทักษะกระบวนการ

1. ทักษะกระบวนการปฏิบัติงาน 2. ทักษะกระบวนการอธิบาย




ครูทักทาย และทบทวนเนื้อหาที่ไดเรียนไปในเทอมที่แลว กิจกรรมพัฒนาการเรียนรู

กิจกรรมที่ 1 : ครูและนักเรียนสนทนาเรื่องความสําคัญและภาษาที่ใชพัฒนาเว็บไซต กิจกรรมที่ 2 : ครูอธิบายเรื่องภาษาคอมพิวเตอรที่ใชในการพัฒนาเว็บเพจ จากสื่อมัลติมีเดีย กิจกรรมที่ 3 : ครูอธิบายเรื่องโครงสรางและหลักทางภาษา HTML และใหนกัเรียนชมเว็บไซตในปจจุบันจากสื่อมัลติมีเดีย

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปโครงสรางหลักของภาษา HTML พรอมกับแจกหนังสือเรียนใหนักเรียน

กลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ







- แบบประเมิน คุณลักษณะอันพึงประสงค เกณฑการประเมิน









แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลยี หนวยการเรียนรูที่ 1 เรื่อง แนะนําภาษา HTML เวลา 4 ช่ัวโมง แผนการจัดการเรียนรูท่ี 2 เรื่อง แนะนําภาษา HTML(2) เวลา 2 ชั่วโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 2 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด



จุดประสงคปลายทาง นักเรียนรูจักแท็กตางๆ ในภาษา HTML และรูกฎในการใชภาษา HTML

จุดประสงคนําทาง 1. นักเรียนรูแท็กตางๆ ในภาษา HTML 2. นักเรียนรูกฎในการใชภาษา HTML


ภาษา HTML (Hyper Text Markup Language) เปนภาษาของคอมพิวเตอรซึ่งเปนภาษามาตรฐานสากลที่ใชนําเสนอขอมูลในการส่ือสารบนเครือขายอินเทอรเน็ต (Internet) รูปแบบหนึ่งโดยสามารถสื่อสารขอมูลในรูปแบบตางๆ ไมวาจะเปนขอความ รูปภาพ เสียง ภาพเคล่ือนไหวและอื่นๆ จะถูกเชื่อมโยงเขาหากัน ดวยชุดคําส่ังตางๆ เพื่อใหแสดงผลออกมาในหนาเว็บเพจ วิธีการจัดการเรียนรู

1. ครูบรรยายเนื้อหาและใหชมตัวอยางงาน 2. ครูและนักเรียนสนทนาแลกเปล่ียนความคิดและรวมกันสรุปเนื้อหาที่ไดเรียน 3. ทําแบบฝกหัดทายหนวยการเรียนรู


1. แท็กตางๆ ในภาษา HTML 2. กฎในการใชภาษา HTML

ทักษะกระบวนการ 1. ทักษะกระบวนการปฏิบัติงาน 2. ทักษะกระบวนการอธิบาย





กิจกรรมที่ 1 : ครูอธิบายเรื่องแท็กตางๆ ของภาษา และกฎในการใชภาษา HTML(2) กิจกรรมที่ 2 : นักเรียนทําแบบฝกหัดทายหนวยการเรียนรู

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุป แท็กตางๆ ในภาษา HTML และกฎในการใชภาษา HTML พรอมกับแจก

หนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ




ภาระงาน - แบบฝกหัดทายหนวยการเรียนรู


- แบบประเมินแบบฝกหัดทายหนวยการเรียนรู - แบบประเมินแบบทดสอบหลังเรียน - แบบประเมิน คุณลักษณะอันพึงประสงค


ประเด็นการประเมิน ระดับคุณภาพ

4 3 2 1 แบบฝกหัดทายหนวยการเรียนรู ความถูกตองของการตอบคําถาม

แบบทดสอบหลังเรียน (Posttest) ความถูกตองของการตอบคําถาม

ระดับเกณฑการประเมินผล

คะแนนท่ีทําได ระดับคุณภาพ ทําได 9-10 คะแนน 4 = ดีมาก ทําได 7-8 คะแนน 3 = ดี ทําได 5-6 คะแนน 2 = ปานกลาง

ทําได 4 คะแนนลงมา 1 = ควรปรับปรุง




ใฝเรียนรู 1. มีความสนใจในกิจกรรมตางๆ 2. ซักถามขอมูลตางๆ เมื่อเกิดความสงสัย 3. ศึกษาหาความรูอยางสมํ่าเสมอ





แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 2 เรื่อง แนะนําโปรแกรม EditPlus เวลา 2 ช่ัวโมง แผนการจัดการเรียนรูท่ี 3 เรื่อง แนะนําโปรแกรม EditPlus เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 3 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด



จุดประสงคปลายทาง นักเรียนติดต้ังและใชงานโปรแกรม EditPlus ได และรูจักสวนประกอบของโปรแกรม

จุดประสงคนําทาง 1. นักเรียนสามารถติดต้ังและใชงานโปรแกรม EditPlusได 2. นักเรียนรูจักสวนประกอบของโปรแกรม EditPlus 3. นักเรียนสามารถใชงานโปรแกรม EditPlus


โปรแกรม EditPlus คือ โปรแกรม Text Editor โปรแกรมหนึ่ง ซึ่งเปนโปรแกรมที่ใชสําหรับสรางหรือแกไขโคด เหมาะสําหรับเขียนเว็บภาษา HTML และเขียนโปรแกรมภาษาตางๆ โดยไฟลที่ไดจะมีขนาดเล็ก และยังมีการแสดงผลในรูปสีตางๆ เพื่อเปนการชวยตรวจสอบวา เขียนไดถูกตองตามรูปแบบของภาษานั้นๆ หรือไม


1. ครูบรรยายและสาธิตเนื้อหา 2. นักเรียนฝกปฏิบัติตามคร ู3. ครูและนักเรียนสนทนาแลกเปล่ียนความคิดและรวมกันสรุปเนื้อหาที่ไดเรียน 4. ทําแบบฝกหัดทายหนวยการเรียนรู


1. การติดต้ังและใชงานโปรแกรม EditPlus 2. สวนประกอบของโปรแกรม EditPlus 3. การใชงานโปรแกรม EditPlus





ครูทักทาย และทบทวนเนื้อหาทีไ่ดเรียนไปในคาบที่แลว กิจกรรมพัฒนาการเรียนรู

กิจกรรมที่ 1 : ครูและนักเรียนสนทนาเรื่องโปรแกรมที่ใชในการเขียนภาษา HTML กิจกรรมที่ 2 : ครูสาธิตการติดต้ังโปรแกรม EditPlus อธิบายสวนประกอบและการใชงานโปรแกรม EditPlus กิจกรรมที่ 3 : นักเรียนทําแบบฝกหัดทายหนวยการเรียนรู

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการติดต้ังโปรแกรม EditPlus สวนประกอบและการใชงานโปรแกรม

EditPlus พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพิ่มเติมในหนังสือ














ทําได 4 คะแนนลงมา 1 = ควรปรับปรุง การประเมินผลคุณลักษณะท่ีพึงประสงค







(ท่ีปรกึษา / ผูอํานวยการ / ฝายวิชาการ)


หนวยการเรียนรูที่ 3 เรื่อง การจัดเอกสารบนหนาเว็บ เวลา 6 ช่ัวโมง แผนการจัดการเรียนรูท่ี 4 เรื่อง การจัดเอกสารบนหนาเว็บ(1) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 4 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด


ตัวชี้วัด ง.3.1 ม.3/2 เขียนโปรแกรมภาษาขั้นพ้ืนฐาน ง 3.1 ม.3/4 ใชคอมพิวเตอรชวยสรางชิ้นงานจากจินตนาการหรืองานที่ทําในชีวิตประจําวัน ตามหลักการ

ทําโครงงานอยางมีจิตสํานึกและความรับผิดชอบ

จุดประสงคปลายทาง นักเรียนสามารถตัดคําขึ้นบรรทัดใหม ขึ้นยอหนาใหม และจัดวางตําแหนงขอความใหอยูก่ึงกลางได

จุดประสงคนําทาง 1. นักเรียนสามารถตัดคําขึ้นบรรทัดใหมได 2. นักเรียนสามารถตัดคําขึ้นยอหนาใหมได 3. นักเรียนสามารถจัดวางตําแหนงขอความใหอยูก่ึงกลางได


การจัดการหนาเว็บเปนสวนสําคัญในการออกแบบหนาเว็บเพจใหดูสวยงามและเปนระเบียบ ทําใหอานงายและสวยงามโดยจัดการทั้งการวางตําแหนงของขอความตัวอักษร รูปภาพ สื่อตางๆ ที่นํามาใชในหนาเว็บเพจ เพ่ือใหนําเสนออยางเปนระบบ โดยการจัดหนาเว็บจะตองเขาใจพ้ืนฐานการเขียนภาษา HTML เพื่อสามารถจัดเอกสารไดตามที่ตองการได

วิธีการจัดการเรียนรู 1. ครูบรรยายและสาธิตเนื้อหา 2. นักเรียนฝกปฏิบัติตามคร ู3. ครูและนักเรียนสนทนาแลกเปล่ียนความคิดและรวมกันสรุปเนื้อหาที่ไดเรียน


ความรู 1. การตัดคําขึ้นบรรทัดใหม 2. การตัดคําขึ้นยอหนาใหม 3. การจัดวางตําแหนงขอความใหอยูก่ึงกลาง






กิจกรรมที่ 1 : ครูและนักเรยีนสนทนาเรื่องการเขียนภาษา HTML ในการจัดการหนาเว็บเพจ กิจกรรมที่ 2 : ครูสาธิตการเขียนภาษา HTML ในการจัดเอกสารบนหนาเว็บ(1)

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการจัดเอกสารบนหนาเว็บ พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไป

ทบทวนเนื้อหาเพ่ิมเติมในหนงัสือ

















หนวยการเรียนรูที่ 3 เรื่อง การจัดเอกสารบนหนาเว็บ เวลา 6 ช่ัวโมง แผนการจัดการเรียนรูท่ี 5 เรื่อง การจัดเอกสารบนหนาเว็บ(2) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 5 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด

มาตรฐาน ง 3.1 เขาใจ เห็นคุณคา และใชกระบวนการเทคโนโลยีสารสนเทศในการสบืคนขอมูลการเรียนรู การส่ือสาร การแกปญหา การทํางาน และอาชีพอยางมีประสิทธิภาพ ประสิทธิผล และมีคุณธรรม



จุดประสงคปลายทาง นักเรียนใชคําส่ังไมตัดขอมูล เพ่ือข้ึนบรรทัดใหม กําหนดตําแหนงในการตัดคํา และจัดรูปแบบเอกสารตามที่

กําหนดได

จุดประสงคนําทาง 1. นักเรียนสามารถใชคําส่ังไมตัดขอมูล เพ่ือข้ึนบรรทัดใหมได 2. นักเรียนสามารถกําหนดตําแหนงในการตัดคําได 3. นักเรียนสามารถจัดรูปแบบเอกสารตามที่กําหนดได





ความรู 1. การใชคําสั่งไมตัดขอมูล เพ่ือขึ้นบรรทัดใหม 2. การกําหนดตําแหนงในการตัดคํา 3. การจัดรูปแบบเอกสารตามที่กําหนด






กิจกรรมที่ 1 : ครูสาธิตการเขียนภาษา HTML ในการจัดเอกสารบนหนาเว็บ(2)

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการจัดเอกสารบนหนาเว็บพรอมกับแจกหนังสือเรียนใหนักเรียนกลับไป

ทบทวนเนื้อหาเพ่ิมเติมในหนังสือ
















แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 3 เรื่อง การจัดเอกสารบนหนาเว็บ เวลา 6 ช่ัวโมง แผนการจัดการเรียนรูท่ี 6 เรื่อง การจัดเอกสารบนหนาเว็บ(3) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 6 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสรางเสนค่ันในแนวนอน ทําหมายเหตุ และใสสีพ้ืนหลังเว็บเพจได

จุดประสงคนําทาง 1. นักเรียนสามารถสรางเสนค่ันในแนวนอนได 2. นักเรียนสามารถทําหมายเหตุได 3. นักเรียนสามารถใสสีพ้ืนหลังเว็บเพจได



วิธีการจัดการเรียนรู 1. ครูบรรยายและสาธิตเนื้อหา 2. นักเรียนฝกปฏิบัติตามคร ู3. ครูและนักเรียนสนทนาแลกเปล่ียนความคิดและรวมกันสรุปเนื้อหาที่ไดเรียน 4. ทําแบบฝกหัดทายหนวยการเรียนรู


ความรู 1. การสรางเสนคั่นในแนวนอน 2. การทําหมายเหต ุ3. การใสสีพ้ืนหลังเว็บเพจ






กิจกรรมที่ 1 : ครูสาธิตการเขียนภาษา HTML ในการจัดเอกสารบนหนาเว็บ(3) กิจกรรมที่ 2 : นักเรียนทําแบบฝกหัดทายหนวยการเรียนรู

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการจัดเอกสารบนหนาเวบ็ พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไป






















แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 4 เรื่อง การจัดการขอความ เวลา 6 ช่ัวโมง แผนการจัดการเรียนรูท่ี 7 เรื่อง การจัดการขอความ(1) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 7 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนกําหนดรูปแบบหัวเรื่อง กําหนดลักษณะตัวอักษร และปรับเปล่ียนขนาดตัวอักษรได

จุดประสงคนําทาง 1. นักเรียนสามารถกําหนดรูปแบบหัวเรื่องได 2. นักเรียนสามารถกําหนดลักษณะตัวอักษรได 3. นักเรียนสามารถปรับเปล่ียนขนาดตัวอักษรได


ขอความและตัวอักษรถือเปนสื่อที่สําคัญในการส่ือความหมายในหนาเว็บเพจ เพราะการส่ือสารดวยตัวอักษรจะสามารถใหรายละเอียดและขอมูลในปริมาณที่มากๆ โดยส่ิงสําคัญจะตองจัดวางตําแหนง การกําหนดขนาด การเลือกรูปแบบตัวอักษรที่เหมาะสมกับการส่ือสารเพื่อใหผูที่เขาชมเว็บเพจของเราสามารถอานและรับรูไดงาย



1. การกําหนดรูปแบบหัวเรื่อง 2. การกําหนดลักษณะตัวอักษร 3. การปรับเปล่ียนขนาดตัวอักษร






กิจกรรมที่ 1 : ครูและนักเรยีนสนทนาเรื่องการเขียนภาษา HTML ในการจัดการขอความ กิจกรรมที่ 2 : ครูสาธิตการเขียนภาษา HTML ในการจัดการขอความ(1)

กิจกรรมรวบยอด

ครูและนักเรียนรวมกันสรุปการจัดการขอความ พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพิ่มเติมในหนังสือ








การประเมินผลคุณลักษณะท่ีพึงประสงค ประเด็นการประเมิน ระดับคุณภาพ

4 3 2 1 ซ่ือสัตย สุจริต 1. ใชคอมพิวเตอรโดยเคารพกฎระเบียบ กติกามารยาท 2. ไมนําเอาผลงานของผูอื่นมาเปนของ

ตน 3. ไมสอดแนมหรือแกไขเปดดูในแฟมของผูอื่น ใฝเรียนรู 1. มีความสนใจในกิจกรรมตาง ๆ 2. ซักถามขอมูลตางๆ เมื่อเกิดความสงสัย 3. ศึกษาหาความรูอยางสมํ่าเสมอ






หนวยการเรียนรูที่ 4 เรื่อง การจัดการขอความ เวลา 6 ช่ัวโมง แผนการจัดการเรียนรูท่ี 8 เรื่อง การจัดการขอความ(2) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 8 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนกําหนดแบบตัวอักษรและกําหนดสีพ้ืนและสีตัวอักษรได

จุดประสงคนําทาง 1. นักเรียนสามารถกําหนดแบบตัวอักษรได 2. นักเรียนสามารถกําหนดสีพ้ืนและสีตัวอักษรได





ความรู 1. การกําหนดแบบตัวอักษร 2. การกําหนดสีพ้ืนและสีตัวอักษร






กิจกรรมที่ 1 : ครูสาธิตการเขียนภาษา HTML ในการจัดการขอความ(2) กิจกรรมที่ 2 : นักเรียนฝกปฏิบัติเขียนภาษา HTML ในการจัดการขอความ(2)

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการจัดการขอความ พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวน

เนื้อหาเพิ่มเติมในหนังสือ







- แบบประเมิน คุณลักษณะอนัพึงประสงค เกณฑการประเมิน









แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 4 เรื่อง การจัดการขอความ เวลา 6 ช่ัวโมง แผนการจัดการเรียนรูท่ี 9 เรื่อง การจัดการขอความ(3) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 9 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนกําหนดสีเฉพาะขอความและกําหนดอักษรวิ่งได

จุดประสงคนําทาง 1. นักเรียนสามารถกําหนดสีเฉพาะขอความได 2. นักเรียนสามารถกําหนดอักษรวิ่งได



วิธกีารจัดการเรียนรู 1. ครูบรรยายและสาธิตเนื้อหา 2. นักเรียนฝกปฏิบัติตามคร ู3. ครูและนักเรียนสนทนาแลกเปล่ียนความคิดและรวมกันสรุปเนื้อหาที่ไดเรียน 4. ทําแบบฝกหัดทายหนวยการเรียนรู


ความรู 1. การกําหนดสีเฉพาะขอความ 2. การกําหนดอักษรวิ่ง






กิจกรรมที่ 1 : ครูสาธิตการเขียนภาษา HTML ในการจัดการขอความ(3) กิจกรรมที่ 2 : นักเรียนฝกปฏิบัติเขียนภาษา HTML ในการจัดการขอความ(3) กิจกรรมที่ 3 : ทําแบบฝกหัดทายหนวยการเรียนรู

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการจัดการขอความ พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวน




1. หนังสือเรียน การวัดผล – ประเมนิผล สิ่งท่ีตองการวัด (ภาระงาน / ชิ้นงาน)




















หนวยการเรียนรูที่ 5 เรื่อง การตกแตงเว็บเพจดวยกราฟก เวลา 6 ช่ัวโมง แผนการจัดการเรียนรูท่ี 10 เรื่อง การตกแตงเว็บเพจดวยกราฟก(1) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 10 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนรูจักชนิดของภาพกราฟกบนเว็บ การแสดงภาพบนเว็บเพจ และใสขอความกํากับรูปภาพได

จุดประสงคนําทาง 1. นักเรียนรูจักกับชนิดของภาพกราฟกบนเว็บ 2. นักเรียนรูจักการแสดงภาพบนเว็บเพจ 3. นักเรียนสามารถใสขอความกํากับรูปภาพได


ภาพกราฟกเปนสวนประกอบที่สําคัญของหนาเว็บเพจซึ่งจะชวยสรางความสวยงามและดึงดูดความสนใจใหกับเว็บเพจของเรามากข้ึน ซึ่งภาพกราฟกมีรูปแบบไฟลหลายชนิด โดยแตละชนิดมีคุณสมบัติที่แตกตางกันไป การที่เราเรียนรูคุณสมบัติของรูปแบบไฟลตางๆ จะชวยใหเราสามารถเลือกรปูแบบของไฟลภาพเพ่ือนํามาใชงานไดอยางถูกตอง และมีประสิทธิภาพสูงสุดดวย


1. ครูบรรยายและสาธิตเนื้อหา 2. นักเรียนฝกปฏิบัติตามคร ู3. ครูและนักเรียนสนทนาแลกเปล่ียนความคิดและรวมกันสรุปเนื้อหาที่ไดเรียน


ความรู 1. ชนิดของภาพกราฟกบนเว็บ 2. การแสดงภาพบนเว็บเพจ 3. การใสขอความกํากับรูปภาพ




กิจกรรมการเรียนรู

กิจกรรมนําสูการเรียน ครูทักทาย และทบทวนเนื้อหาที่ไดเรียนไปในคาบที่แลว

กิจกรรมพัฒนาการเรียนรู กิจกรรมที่ 1 : ครูและนักเรียนสนทนาเรื่องการเขียนภาษา HTML ในการตกแตงเว็บเพจดวยกราฟกและสาธิตการเขียนภาษา HTML ในการตกแตงเว็บเพจดวยกราฟก(1)

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการตกแตงเว็บเพจดวยกราฟก พรอมกับแจกหนังสือเรียนใหนักเรียน
















แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 5 เรื่อง การตกแตงเว็บเพจดวยกราฟก เวลา 6 ช่ัวโมง แผนการจัดการเรียนรูท่ี 11 เรื่อง การตกแตงเว็บเพจดวยกราฟก(2) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 11 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนปรับขนาด ใสกรอบ และจัดตําแหนงรูปภาพได

จุดประสงคนําทาง 1. นักเรียนสามารถปรับขนาดของรูปภาพได 2. นักเรียนสามารถใสกรอบใหกับรูปภาพได 3. นักเรียนสามารถจัดตําแหนงรูปภาพได


ภาพกราฟกเปนสวนประกอบที่สําคัญของหนาเว็บเพจซึ่งจะชวยสรางความสวยงามและดึงดูดความสนใจใหกับเว็บเพจของเรามากข้ึน ซึ่งภาพกราฟกมีรูปแบบไฟลหลายชนิด โดยแตละชนิดมีคุณสมบัติที่แตกตางกันไป การที่เราเรียนรูคุณสมบัติของรูปแบบไฟลตางๆ จะชวยใหเราสามารถเลือกรูปแบบของไฟลภาพเพ่ือนํามาใชงานไดอยางถูกตอง และมีประสิทธิภาพสูงสุดดวย

วิธีการจัดการเรียนรู 1. ครบูรรยายและสาธิตเนื้อหา 2. นักเรียนฝกปฏิบัติตามคร ู3. ครูและนักเรียนสนทนาแลกเปล่ียนความคิดและรวมกันสรุปเนื้อหาที่ไดเรียน


ความรู 1. การปรับขนาดของรูปภาพ 2. การใสกรอบใหกับรูปภาพ 3. การจัดตําแหนงรูปภาพ






กิจกรรมที่ 1 : ครูสาธิตการเขียนภาษา HTML ในการตกแตงเว็บเพจดวยกราฟก(2) กิจกรรมที่ 2 : นักเรียนฝกปฏิบัติเขียนภาษา HTML ในการตกแตงเว็บเพจดวยกราฟก(2)

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการตกแตงเว็บเพจดวยกราฟก พรอมกับแจกหนังสือเรียนใหนักเรียน
















แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 5 เรื่อง การตกแตงเว็บเพจดวยกราฟก เวลา 6 ช่ัวโมง แผนการจัดการเรียนรูท่ี 12 เรื่อง การตกแตงเว็บเพจดวยกราฟก(3) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 12 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนเพ่ิมระยะระหวางรูปภาพกับขอความ ทิ้งระยะขอความใหพนขอบของรูปภาพ และแสดงภาพเปนฉาก

หลังได

จุดประสงคนําทาง 1. นักเรียนสามารถเพ่ิมระยะระหวางรูปภาพกับขอความได 2. นักเรียนสามารถทิ้งระยะขอความใหพนขอบของรูปภาพได 3. นักเรียนสามารถแสดงภาพเปนฉากหลังได


ภาพกราฟกเปนสวนประกอบที่สําคัญของหนาเว็บเพจซึ่งจะชวยสรางความสวยงามและดึงดูดความสนใจใหกับเว็บเพจของเรามากข้ึน ซึ่งภาพกราฟกมีรูปแบบไฟลหลายชนิด โดยแตละชนิดมีคุณสมบัติที่แตกตางกันไป การที่เราเรียนรูคุณสมบัติของรูปแบบไฟลตางๆ จะชวยใหเราสามารถเลือกรูปแบบของไฟลภาพเพ่ือนํามาใชงานไดอยางถูกตอง และมีประสิทธิภาพสูงสุดดวย

วิธีการจัดการเรียนรู 1. ครูบรรยายและสาธิตเนื้อหา 2. นักเรียนฝกปฏิบัติตามคร ู3. ครูและนักเรียนสนทนาแลกเปล่ียนความคิดและรวมกันสรุปเนื้อหาที่ไดเรียน 4. นักเรียนทําแบบฝกหัดทายหนวยการเรียนรู


ความรู 1. การเพ่ิมระยะระหวางรูปภาพกับขอความ 2. การทิ้งระยะขอความใหพนขอบของรูปภาพ 3. การแสดงภาพเปนฉากหลัง






กิจกรรมที่ 1 : ครูสาธิตการเขียนภาษา HTML ในการตกแตงเว็บเพจดวยกราฟก(3) กิจกรรมที่ 3 : ทําแบบฝกหัดทายหนวยการเรียนรู

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการตกแตงเว็บเพจดวยกราฟก(3) พรอมกับแจกหนังสือเรียนใหนักเรียน





ภาระงาน - แบบฝกหัดทายหนวยการเรียนรู ช้ินงาน

- เครื่องมือ















แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 6 เรื่อง การสรางตาราง เวลา 4 ช่ัวโมง แผนการจัดการเรียนรูท่ี 13 เรื่อง การสรางตาราง(1) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 13 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด


ตัวชี้วัด ง.3.1 ม.3/2 เขียนโปรแกรมภาษาขัน้พ้ืนฐาน ง 3.1 ม.3/4 ใชคอมพิวเตอรชวยสรางชิ้นงานจากจินตนาการหรืองานที่ทําในชีวิตประจําวัน ตามหลักการ


จุดประสงคปลายทาง นักเรียนสรางตารางและกําหนดลักษณะตางๆใหกับตารางได

จุดประสงคนําทาง 1. นักเรียนสามารถสรางตารางได 2. นักเรียนสามารถกําหนดเสนขอบของตารางได 3. นักเรียนสามารถปรับความกวางและความสูงใหกับตารางได 4. นักเรียนสามารถใสสีพ้ืนหลังใหกับตารางได


คําส่ังการสรางตารางดวยภาษา HTML เปนอีกหนึ่งคําส่ังที่มีความสําคัญเปนอยางมาก เพราะคําส่ังในการสรางตารางนัน้สามารถชวยควบคุมการแสดงผลของขอมูลบนเว็บเพจได เชน ชวยในเรื่องของการจัดวางขอความ รูปภาพ ปุมเมนูตางๆ ที่อยูบนหนาเว็บเพจ วาขอมูลไหนควรจะอยู ณ ตําแหนงใด โดยเราสามารถนําขอมูลตางๆ มาจัดแสดงภายในชองเซลลของตารางได ทําใหสะดวกในการออกแบบและจัดวางขอมูลเปนอยางมาก อีกทั้งยังสามารถอธิบายขอมูลที่อยูในรูปแบบของการเปรียบเทียบไดเปนอยางดี เพ่ือใหการนําเสนอขอมูลของเราดูมีระเบียบเรียบรอยและเหมาะสมตรงกับความตองการในการนําไปใชงาน



ความรู 1. การสรางตาราง 2. การกําหนดเสนขอบของตาราง 3. การปรับความกวางและความสูงใหกับตาราง 4. ตารางและสีพ้ืนหลัง






กิจกรรมที่ 1 : ครูสาธิตการเขียนภาษา HTML ในการสรางตาราง(1)

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการสรางตาราง พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวน

เนื้อหาเพิ่มเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู









ซ่ือสัตย สุจริต 1. ใชคอมพิวเตอรโดยเคารพกฎระเบียบ กติกามารยาท 2. ไมนําเอาผลงานของผูอื่นมาเปนของตน 3. ไมสอดแนมหรือแกไขเปดดูในแฟม

ของผูอื่น ใฝเรียนรู 1. มีความสนใจในกิจกรรมตางๆ 2. ซักถามขอมูลตางๆ เมื่อเกิดความสงสัย 3. ศึกษาหาความรูอยางสมํ่าเสมอ



คะแนนท่ีทําได ระดับคุณภาพ ปฏิบัติทุกครั้ง 4 = ดีมาก ปฏิบัติเกือบทุกครั้ง 3 = ดี ปฏิบัติเปนบางครั้ง 2 = ปานกลาง ไมคอยปฏิบัต ิ 1 = ควรปรบัปรุง บันทึกการตรวจแผน ขอเสนอแนะ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________


แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 6 เรื่อง การสรางตาราง เวลา 4 ช่ัวโมง แผนการจัดการเรียนรูท่ี 14 เรื่อง การสรางตาราง(2) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 14 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสรางตารางและกําหนดลักษณะตางๆใหกับตารางได

จุดประสงคนําทาง 1. นักเรียนสามารถรวมแถวและคอลัมนในตารางได 2. นักเรียนสามารถสรางตารางซอนตารางได 3. นักเรียนสามารถจัดการตําแหนงขอความในตารางได 4. นักเรียนสามารถแทรกรูปภาพในตารางได


คําส่ังการสรางตารางดวยภาษา HTML เปนอีกหนึ่งคําส่ังที่มีความสําคัญเปนอยางมาก เพราะคําส่ังในการสรางตารางนั้นสามารถชวยควบคุมการแสดงผลของขอมูลบนเว็บเพจได เชน ชวยในเรื่องของการจัดวางขอความ รูปภาพ ปุมเมนูตางๆ ที่อยูบนหนาเว็บเพจ วาขอมูลไหนควรจะอยู ณ ตําแหนงใด โดยเราสามารถนําขอมูลตางๆ มาจัดแสดงภายในชองเซลลของตารางได ทําใหสะดวกในการออกแบบและจัดวางขอมูลเปนอยางมาก อีกทั้งยังสามารถอธิบายขอมูลที่อยูในรูปแบบของการเปรียบเทียบไดเปนอยางดี เพ่ือใหการนําเสนอขอมูลของเราดูมีระเบียบเรียบรอยและเหมาะสมตรงกับความตองการในการนําไปใชงาน


1. ครูบรรยายและสาธิตเนื้อหา 2. นักเรียนฝกปฏิบัติตามคร ู3. ครูและนักเรียนสนทนาแลกเปล่ียนความคิดและรวมกันสรุปเนื้อหาที่ไดเรียน 4. นักเรียนทําแบบฝกหัดทายหนวยการเรียนรู


ความรู 1. การรวมแถวและคอลัมนในตาราง 2. การสรางตารางซอนตาราง 3. การจัดการตําแหนงขอความในตาราง 4. การแทรกรูปภาพในตาราง






กิจกรรมที่ 1 : ครูสาธิตการเขียนภาษา HTML ในการสรางตาราง(2) กิจกรรมที่ 2 : นักเรียนทําแบบฝกหัดทายหนวยการเรียนรู

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการสรางตาราง พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวน
















4 3 2 1 ซ่ือสัตย สุจริต 1. ใชคอมพิวเตอรโดยเคารพกฎระเบียบ กติกามารยาท 2. ไมนําเอาผลงานของผูอื่นมาเปนของตน 3. ไมสอดแนมหรือแกไขเปดดูในแฟมของผูอื่น






แผนการจัดการเรียนรูรายวชิา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 7 เรื่อง การเช่ือมโยงหนาเว็บไซต เวลา 4 ช่ัวโมง แผนการจัดการเรียนรูท่ี 15 เรื่อง การเชื่อมโยงหนาเว็บไซต(1) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 15 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนเชื่อมโยงภายในหนาเว็บเพจเดียวกัน เชื่อมโยงภายในเว็บไซต และเชื่อมโยงภายนอกเว็บไซตได

จุดประสงคนําทาง 1. นักเรียนสามารถเชื่อมโยงภายในหนาเว็บเพจเดียวกันได 2. นักเรียนสามารถเชื่อมโยงภายในเว็บไซตได 3. นักเรียนสามารถเชื่อมโยงภายนอกเวบ็ไซตได


การเชื่อมโยงของหนาเว็บเพจเปนการเชื่อมโยงเนื้อหาและสารสนเทศที่มีความสัมพันธกันเพ่ือขยายไปสูแหลงขอมูลที่สําคัญหรือที่ตอเนื่องเพ่ือใหไดขอมูลที่เปนประโยชนที่เกี่ยวของกันมากข้ึน อีกทั้งยังชวยเชื่อมโยงสูเนื้อหาที่สนใจในแหลงอื่นๆ ได จําเปนอยางย่ิงที่เราจะตองสรางการเชื่อมโยงใหกับหนาเว็บเพจ เพ่ือที่จะใหแตละหนาสามารถเชื่อมโยงขอมูลถึงกันได ทําใหสามารถคนหาขอมูลที่เราตองการไดอยางรวดเร็วและสะดวกมากยิ่งขึ้น



1. การเชื่อมโยงภายในหนาเว็บเพจเดียวกัน (Name Anchor) 2. การเชื่อมโยงภายในเว็บไซต (Web Page/File) 3. การเชื่อมโยงภายนอกเว็บไซต (URL/Website)






กิจกรรมที่ 1 : ครูอธิบายพรอมสาธิตการเชื่อมโยงภายในหนาเว็บเพจเดียวกัน (Name Anchor) และการเชื่อมโยงภายในเว็บไซต (Web Page/File) (1)

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการเชื่อมโยงหนาเว็บไซต พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไป




1. หนังสือเรียน การวัดผล – ประเมินผล สิ่งท่ีตองการวัด (ภาระงาน / ชิน้งาน)












แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 7 เรื่อง การเช่ือมโยงหนาเว็บไซต เวลา 4 ช่ัวโมง แผนการจัดการเรียนรูท่ี 16 เรื่อง การเชื่อมโยงหนาเว็บไซต(2) เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 16 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนเชื่อมโยง E-Mail และเชื่อมโยงไปยังเว็บไซตอื่น ๆ โดยใชรูปภาพได

จุดประสงคนําทาง 1. นักเรียนสามารถเชื่อมโยง E-Mail ได 2. นักเรียนสามารถเชื่อมโยงไปยังเว็บไซตอื่น ๆ โดยใชรูปภาพได


การเชื่อมโยงของหนาเว็บเพจเปนการเชื่อมโยงเนื้อหาและสารสนเทศที่มีความสัมพันธกันเพ่ือขยายไปสูแหลงขอมูลที่สําคัญหรือที่ตอเนื่องเพ่ือใหไดขอมูลที่เปนประโยชนที่เกี่ยวของกันมากข้ึน อีกทั้งยังชวยเชื่อมโยงสูเนื้อหาที่สนใจในแหลงอื่นๆ ได จําเปนอยางย่ิงที่เราจะตองสรางการเชื่อมโยงใหกับหนาเว็บเพจ เพ่ือที่จะใหแตละหนาสามารถเชื่อมโยงขอมูลถึงกันได ทําใหสามารถคนหาขอมูลที่เราตองการไดอยางรวดเร็วและสะดวกมากยิ่งขึ้น

วิธีการจัดการเรียนรู 1. ครูบรรยายและสาธิตเนื้อหา 2. นักเรียนฝกปฏิบัติตามคร ู3. ครูและนักเรียนสนทนาแลกเปล่ียนความคิดและรวมกันสรุปเนื้อหาที่ไดเรียน 4. นักเรียนทําแบบฝกหัดทายหนวยการเรียนรู


ความรู 1. การเชื่อมโยง E-Mail (E-Mail Link) 2. การสรางการเชื่อมโยงไปยังเว็บไซตอื่น ๆ โดยใชรูปภาพ






กิจกรรมที่ 1 : ครูพรอมสาธิตการเชื่อมโยงภายในหนาเว็บเพจเดียวกัน (Name Anchor) และการเชื่อมโยงภายในเว็บไซต (Web Page/File)(2) กิจกรรมที่ 2 : นักเรียนทําแบบฝกหัดทายหนวยการเรียนรู

กิจกรรมรวบยอด ครูและนักเรียนรวมกันสรุปการเชื่อมโยงหนาเว็บไซต พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไป











แบบฝกหัดทายหนวยการเรียนรู ความถูกตองของการตอบคําถาม












แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 8 เรื่อง การสรางแบบฟอรมและเฟรม เวลา 4 ช่ัวโมง แผนการจัดการเรียนรูท่ี 17 เรื่อง การสรางแบบฟอรม เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 17 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสรางแบบฟอรมได

จุดประสงคนําทาง นักเรียนสามารถสรางแบบฟอรมได


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



1. การสรางแบบฟอรม ทักษะกระบวนการ






กิจกรรมที่ 1 : ครูสาธิตการเขียนภาษา HTML การสรางแบบฟอรม กิจกรรมรวบยอด

ครูและนักเรียนรวมกันสรุปการสรางแบบฟอรม พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพิ่มเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู














แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรยีนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 8 เรื่อง การสรางแบบฟอรมและเฟรม เวลา 4 ช่ัวโมง แผนการจัดการเรียนรูท่ี 18 เรื่อง การสรางเฟรม เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 18 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนสรางเฟรมได

จุดประสงคนําทาง นักเรียนสามารถสรางเฟรมได


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



1. การสรางเฟรม ทักษะกระบวนการ






กิจกรรมที่ 1 : ครูสาธิตการเขียนภาษา HTML การสรางเฟรม กิจกรรมที่ 2 : นักเรียนทําแบบฝกหัดทายหนวยการเรียนรู กิจกรรมรวบยอด

ครูและนักเรียนรวมกันสรุปการสรางเฟรม พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ



















คะแนนท่ีทําได ระดับคุณภาพ ปฏิบัติทกุครั้ง 4 = ดีมาก ปฏิบัติเกือบทุกครั้ง 3 = ดี ปฏิบัติเปนบางครั้ง 2 = ปานกลาง ไมคอยปฏิบัต ิ 1 = ควรปรับปรุง บันทึกการตรวจแผน ขอเสนอแนะ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________


แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 9 เรื่อง การแทรกมัลติมีเดียลงบนเว็บเพจ เวลา 4 ช่ัวโมง แผนการจัดการเรียนรูท่ี 19 เรื่อง การแทรกไฟลเสียงลงไปในเว็บเพจ เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 19 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนแทรกไฟลเสียงลงไปในเว็บเพจได

จุดประสงคนําทาง นักเรียนสามารถแทรกไฟลเสียงลงไปในเว็บเพจได สาระสําคัญ

ในการสรางเว็บไซตใหมีความนาสนใจและโดดเดนมากข้ึนคือการเพ่ิมสื่อมัลติมีเดียเขามาใชงานในหนาเว็บเพจ เพื่อใหการแสดงผลมีความนาต่ืนตาต่ืนใจ อีกทั้งเปนแหลงทรัพยากรที่มีประสิทธิภาพในการสรางความเขาใจไดเปนอยางดี ซึ่งส่ือมัลติมีเดียประกอบดวยการเพ่ิมเสียง ภาพเคล่ือนไหวและวิดีโอ วิธีการจัดการเรียนรู



1. การแทรกไฟลเสียงลงไปในเว็บเพจ ทักษะกระบวนการ






กิจกรรมที่ 1 : ครูสาธิตการเขียนภาษา HTML การแทรกไฟลเสียงลงไปในเว็บเพจ กิจกรรมรวบยอด

ครูและนักเรียนรวมกันสรุปการแทรกไฟลเสียงลงไปในเว็บเพจ พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ สื่อการเรียนรู/แหลงการเรียนรู














แผนการจัดการเรียนรูรายวิชา กลุมสาระการเรียนรูการงานอาชีพและเทคโนโลย ีหนวยการเรียนรูที่ 9 เรือ่ง การแทรกมัลติมีเดียลงบนเว็บเพจ เวลา 4 ช่ัวโมง แผนการจัดการเรียนรูท่ี 20 เรื่อง การแทรกไฟลวิดีโอลงไปในเว็บเพจ เวลา 2 ช่ัวโมง ช้ัน ม. 3 ภาคเรียนท่ี 2 สัปดาหท่ี 20 วันท่ี ผูจัดทํา คุณครูจากทรูคลิกไลฟ ********************************************************************************************************************* ผลการเรียนรู/ตัวช้ีวัด




จุดประสงคปลายทาง นักเรียนแทรกวิดีโอลงไปในเว็บเพจได

จุดประสงคนําทาง นักเรียนสามารถแทรกไฟลวิดีโอลงไปในเว็บเพจได


ในการสรางเว็บไซตใหมีความนาสนใจและโดดเดนมากข้ึนคือการเพ่ิมสื่อมัลติมีเดียเขามาใชงานในหนาเว็บเพจ เพื่อใหการแสดงผลมีความนาต่ืนตาต่ืนใจ อีกทั้งเปนแหลงทรัพยากรที่มีประสิทธิภาพในการสรางความเขาใจไดเปนอยางดี ซึ่งส่ือมัลติมีเดียประกอบดวยการเพ่ิมเสียง ภาพเคล่ือนไหวและวิดีโอ วิธีการจัดการเรียนรู



1. การแทรกไฟลวิดีโอลงไปในเว็บเพจ ทักษะกระบวนการ






กิจกรรมที่ 1 : ครูสาธิตการเขียนภาษา HTML การแทรกวิดีโอลงไปในเว็บเพจ กิจกรรมที่ 2 : ทําแบบฝกหัดทายหนวยการเรียนรู กิจกรรมรวบยอด

ครูและนักเรียนรวมกันสรุปการแทรกวิดีโอลงไปในเว็บเพจ พรอมกับแจกหนังสือเรียนใหนักเรียนกลับไปทบทวนเนื้อหาเพ่ิมเติมในหนังสือ










แบบฝกหัดทายหนวยการเรียนรู ความถูกตองของการตอบคําถาม












เฉลยแบบฝกหัดทายหนวยและคําถามทายเร่ือง รายวิชา การออกแบบพัฒนาเว็บไซต

แบบฝกหัดทายหนวยการเรียนรูที่ 1 เทคโนโลย ี และหลักการทําโครงงานท่ีมีการใชเทคโนโลยีสารสนเทศ จงทําเครื่องหมาย X ตัวเลือกที่ถูกตอง 1. ขอใดเปนเทคโนโลยีระดับพ้ืนฐาน (Low Technology) ก. ครกตําขาว ข. เครื่องขูดมะพราว ค. จานดาวเทียม ง. ไมมีขอใดถูก 2. การปลูกพืชหมุนเวียนเพ่ือแกปญหาดินเส่ือม การผลิตอาหารโดยใชผลิตผลเหลือใชจากการเกษตร จัดเปนเทคโนโลยีในระดับใด ก. เทคโนโลยีระดับพ้ืนบาน ข. เทคโนโลยีระดับทองถ่ิน ค. เทคโนโลยีระดับกลาง ง. เทคโนโลยีระดับสูง 3. ขอใดตอไปนี้แสดงความสัมพันธของระดับเทคโนโลยีไดถูกตอง ก. เทคโนโลยีระดับพ้ืนฐาน - อางเก็บน้ํา ข. เทคโนโลยีระดับกลาง - คอมพิวเตอร ค. เทคโนโลยีระดับสูง - ลอบดักปลา ง. ไมมีขอใดถูก 4. ขอใดเปนเทคโนโลยีระดับสูง (High Technology) ก. การถนอมอาหาร ข. การคัดเลือกพันธุสัตวโดยใชเทคโนโลยีชีวภาพ ค. การสรางอางเก็บน้ํา ง. การปลูกพืชหมุนเวียน

5. โครงงานที่มีวัตถุประสงคในการรวบรวมขอมูลเรื่องใดเรือ่งหนึ่ง แลวนําขอมูลนั้นมาจําแนกเปนหมวดหมูในรูปแบบที่เหมาะสม คือรูปแบบของโครงงานใด ก. โครงงานที่เปนการสํารวจ รวบรวมขอมูล ข. โครงงานที่เปนการคนควา ทดลอง ค. โครงงานที่เปนการศึกษาทฤษฎี หลักการ ง. โครงงานที่เปนการประดิษฐ คิดคน 6. ขอใดคือขัน้ตอนแรกของการจัดทําโครงงาน ก. การนําเสนอและแสดงโครงงาน ข. จัดทําเคาโครงของโครงงาน ค. คัดเลือกหัวขอโครงงานท่ีสนใจ ง. ศึกษาคนควาจากเอกสารและแหลงขอมูล 7. นักเรียนควรวางแผนอยางไรในการทําโครงงานคอมพิวเตอร ก. มอบหมายใหคนที่เกงที่สุด จัดทําโครงงานเพียงคนเดียวเทานั้น ข. จัดลําดับภาระงานกอน-หลัง และทําตามแผนงานที่วางเอาไว ค. มีการแบงงานมอบหมายงานใหสมาชิกแตละคนทําตามความถนัด ง. ขอ ข และ ค ถูก 8. ขั้นตอนสุดทายของการทําโครงงานคือขอใด ก. จัดทําเคาโครงของโครงงาน ข. การนําเสนอและแสดงโครงงาน ค. คัดเลือกหัวขอโครงงานที่สนใจ ง. ศึกษาคนควาจากเอกสารและแหลงขอมูล

9. ขอใดไมใชประเด็นสําคัญในการจัดแสดงและการนําเสนอผลงาน ก. ชื่อโครงงาน ชื่อผูทําโครงงาน ชื่อที่ปรึกษา ข. ผลงานที่เกิดข้ึนจากการทําโครงงาน ค. ผลงานทุกช้ินท่ีทดลองไมสําเร็จ ง. วิธีการดําเนินการโดยเลือกเฉพาะข้ันตอนที่เดนและสําคัญ 10. ขอใดไมใชการใชคอมพิวเตอรชวยสรางงานตามหลักการทําโครงงาน ก. มีการอางอิงแหลงขอมูล ข. ใชทรัพยากรอยางคุมคา ค. ใชคําสุภาพ และไมสรางความเสียหายตอผูอื่น ง. คัดลอกผลงานผูอ่ืน

แบบฝกหัดทายหนวยการเรียนรูที่ 2 ความรูเบื้องตนเกี่ยวกับอินเทอรเน็ต จงทําเครื่องหมาย X ตัวเลือกที่ถูกตอง 1. อินเทอรเน็ต (Internet) หมายถึงขอใด ก. ชื่อเรียกกลุมของคอมพิวเตอร ข. การคนควาหาขอมูล ค. การสงสัญญาณเพ่ือส่ือสารกัน ง. การนําเครือขายหลายเครือขายมาเช่ือมโยงกันท่ัวโลก 2. องคกรกลางที่จัดตั้งข้ึนเพ่ือความรวมมือและการประสานงานของเครือขายและเทคโนโลยีการเชื่อมตออินเทอรเน็ต คือขอใด ก. ISOC ข. ARPA ค. ISP ง. AIT 3. อินเทอรเน็ต (Internet) เกิดข้ึนครั้งแรกในโลกที่ประเทศใด ก. อเมริกาใต ข. ออสเตรเลีย ค. สหรัฐอเมริกา ง. ญ่ีปุน 4. ประเทศไทยเริ่มใชอินเทอรเน็ตเปนครั้งแรกเม่ือปใด ก. พ.ศ. 2512 ข. พ.ศ. 2520 ค. พ.ศ. 2530 ง. พ.ศ. 2535

5. ขอใด ไมใช การบริการบนระบบอินเทอรเน็ต ก. การบริการคนหาขอมูล ข. การบริการรับสงพัสดุ ครุภัณฑ ค. การบริการดานการติดตอสื่อสาร ง. การบริการดานการรับสงขาวสารและแสดงความคิดเห็น 6. ขอใดคือบริการทางธุรกิจผานอินเทอรเน็ต ก. E-mail ข. E-commerce ค. Chat ง. Search Engines 7. โปรแกรมใดทีใ่ชสําหรับแสดงภาพ และเสียงบนอินเทอรเน็ต ก. Internet Explorer ข. Windows Media Player ค. Microsoft Word ง. Linux 8. URL (Uniform Resource Locator) คืออะไร ก. ภาษาที่ใชในการติดตอสื่อสารบนเครือขายอินเทอรเน็ต ข. ผูใหบริการอินเทอรเน็ตเชิงพานิชย ค. ตําแหนงท่ีอยูของเว็บบนอินเทอรเน็ต ง. ระบบการต้ังชื่ออินเทอรเน็ต 9. ขอใด ไมควร ปฏิบัติในการใชอินเทอรเน็ต ก. อานบทความที่เหมาะสมกับวัย ข. นําขอมูลสวนตัวของผูอ่ืนมาเผยแพร ค. ไมใชคําหยาบในการสนทนาในอินเทอรเน็ต ง. ไมบอกขอมูลสวนตัวกับคนรูจักกันทางอินเทอรเน็ต

10. ใครปฏิบัติตน ไมเหมาะสม ในการใชงานอินเทอรเน็ต ก. พี่คลิกใชภาษาสุภาพในการแสดงความคิดเห็นบนอินเทอรเน็ต ข. นองแยมไมเขาเว็บไซตที่ไมเหมาะสม ค. แทนรีบแจงคุณครูเมื่อพบปญหาจากการใชอินเทอรเน็ต ง. แฮกเกอรทําการเจาะระบบเพื่อโจรกรรมขอมูลของผูใชงาน แบบฝกหัดทายหนวยการเรียนรูที่ 3 พื้นฐานและองคประกอบของเว็บไซต จงทําเครื่องหมาย X ตัวเลือกที่ถูกตอง 1. ขอใดกลาวถึงเว็บไซต (Web Site) ไดถูกตองที่สุด ก. แหลงท่ีเก็บรวบรวมหนาเว็บเพจทั้งหมด ข. ตําแหนงที่อยูที่ใชสําหรับติดตอกับอินเทอรเน็ต ค. โปรแกรมที่ใชสําหรับดูขอมูลสารสนเทศที่จัดเก็บในหนาเว็บ ง. คําส่ังพิเศษที่ใชเชื่อมโยงไปยังหนาเว็บเพจตาง ๆ 2. เว็บเซิรฟเวอร (Web Server) คือขอใด ก. เครื่องมือในการใชอินเทอรเน็ต ข. เครื่องคอมพิวเตอรท่ีทําหนาที่เปนเครื่องบริการเว็บเพจ ค. เอกสารขอมูลในแตละหนาเว็บเพจ ง. โปรแกรมที่ทําหนาที่สําหรับเปดเว็บเพจ 3. เว็บบราวเซอร (Web Browser) คือขอใด ก. เครื่องมือในการใชอินเทอรเน็ต ข. เครื่องคอมพิวเตอรที่ทําหนาที่เปนเครื่องบริการเว็บเพจ ค. เอกสารขอมูลในแตละหนาเว็บเพจ ง. โปรแกรมท่ีทําหนาท่ีสําหรับเปดเว็บเพจ

4. ขอใด ไมใช โปรแกรมเว็บบราวเซอร ก. Firefox ข. Google ค. Chome ง. Safari 5. สวนของเอกสารซึ่งถูกสรางดวยภาษาคอมพิวเตอรที่รวบรวมเอาขอมูล ภาพ เสียง และภาพเคล่ือนไหวไวดวยกันคือขอใดตอไปนี ้ ก. Web Browser ข. Web Site ค. Web Page ง. Home Page 6. โฮมเพจ (Home Page) หมายถึง ก. เอกสารขอมูลในแตละหนาของเว็บไซต ข. เว็บเพจท่ีเปนหนาแรกในการเขาชมเว็บไซต ค. ที่เก็บหนาเว็บเพจ ง. โปรแกรมที่ใชในการเปดดูเว็บไซต 7. สวนประกอบใดของหนาเว็บเพจที่อยูตอนบนสุด เปนสวนที่ดึงดูดผูชมใหติดตามเนื้อหาภายในเว็บไซต ก. Header ข. Body ค. Footer ง. Logo

8. Navigation Bar คือขอใด ก. ขอมูลเนื้อหาของเว็บไซต ข. พื้นที่วางในเว็บไซต ค. เมนูหลักหรือลิงก ง. ขอความแสดงลิขสิทธ์ิ 9. Footer คือสวนที่อยูในตําแหนงใดของหนาเว็บเพจ ก. สวนบนสุดของหนาเว็บเพจ ข. สวนตอนกลางของหนาเว็บเพจ ค. สวนลางสุดของหนาเว็บเพจ ง. สวนที่เปนพ้ืนที่วางในหนาเว็บเพจ 10. หลักการออกแบบเว็บไซตที่ดีคือขอใด ก. กําหนดจุดมุงหมายและกลุมเปาหมาย ข. จัดองคประกอบในการสรางเว็บไซตโดยส่ือไปในทางเดียวกัน ค. จัดขอมูลใหเปนหมวดหมูไมสับสน ง. ถูกทุกขอ

คําถามทายเรื่องท่ี 4.1 แนะนําโปรแกรม Adobe Dreamweaver CS3 จงตอบคําถามตอไปนี้ โดยการเติมคําตอบลงในชองวางใหถูกตอง 1. โปรแกรม Adobe Dreamweaver เหมาะสําหรับการสรางผลงานในรูปแบบใด เพราะเหตุผลใด ? เฉลย

โปรแกรม Adobe Dreamweaver เหมาะสําหรับการออกแบบและพัฒนาเว็บไซต เพราะสามารถใชงานไดงาย มีเครื่องมือใหใชงานมากมาย สามารถพัฒนาเว็บไซตไดอยางรวดเร็วและงายดาย เราสามารถนําขอความ รูปภาพ หรือภาพเคล่ือนไหวมาสรางเปนเว็บไซตเพ่ือแสดงผลงานได 2. นักเรียนสามารถเปดเขาใชงานโปรแกรม Adobe Dreamweaver CS3 ไดดวยวิธีใดบาง ? เฉลย

1. คลิกที่ไอคอน Adobe Dreamweaver CS3 2. คลิก Start > All Programs > Adobe Dreamweaver CS3

3. Insert bar ในโปรแกรม Adobe Dreamweaver CS3 คือ เฉลย

เปนแถบรวบรวมเครื่องมือตางๆ ที่ใชในการสรางเว็บ โดยประกอบดวยคําส่ังตางๆ เชน Common Layout, Forms, Data, Spry, Text, Favorites เปนตน 4. มุมมองในการทํางานของโปรแกรม Adobe Dreamweaver CS3 มีก่ีแบบ อะไรบาง และแตกตางกันอยางไร ? โปรแกรม Adobe Dreamweaver CS3 มีมุมมองการทํางานอยู 3 แบบคือ ? เฉลย

1. Code View เปนมุมมองที่แสดงโคด HTML หรือ Script เพ่ือใชในการแกไขหรือเพิ่มเติมโคดใหเว็บไซต 2. Split View เปนมุมมองที่แสดงทั้งโคดและหนาเว็บที่เรากําลังทํางานอยู ซึ่งสามารถดูการแสดงผลของโคด

ของหนาเว็บไปพรอมกับการออกแบบหนาจอที่ใชในการออกแบบ 3. Design View เปนมุมมองสําหรับแสดงหนาจอสําหรับการออกแบบและจัดองคประกอบของเว็บเพจ

5. จงบอกวิธีการสรางโฟลเดอรยอยข้ึนมาใน Site ที่พาเนล Files ? เฉลย

คลิกขวาที่โฟลเดอร Site เลือกคําสั่ง New Folder จากนั้น ต้ังชื่อโฟลเดอรใหม แลวกดปุม Enter บนแปนพิมพ คําถามทายเรื่องท่ี 4.2 การตกแตงขอความบนเว็บเพจ จงตอบคําถามตอไปนี้ โดยการเติมคําตอบลงในชองวางใหถกูตอง 1. ขั้นตอนในการแสดงผลเว็บเพจบนเว็บบราวเซอรสามารถทําไดอยางไรบาง ? เฉลย

ข้ันตอนในการแสดงผลเว็บเพจบนเว็บบราวเซอรสามารถทําได ดังนี ้- เลือกคําส่ัง File > Preview in Browser > IExplore - กด F12 บนแปนพิมพ - คลิก ที่แถบเครื่องมือ Tool Bar แลวเลือกคําส่ัง Preview in IExplore

2. Text Indent และ Text Outdent ทําหนาที่อะไร มีความแตกตางกันอยางไร ? เฉลย

Text Indent ทําหนาที่เลื่อนยอหนาขอความไปทางขวามอืเขาไป สวน Text Outdent ทําหนาที่เลื่อนยอหนาขอความไปทางซายมือ 3. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Non-Breaking Space โดยทําหนาที่ในการเวนวรรคระหวางตัวอักษร เพราะในการสรางเว็บ เราไมสามารถใชปุม Tab ที่แปนพิมพเพ่ือยอหนาหรือเคาะ Spacebar เพ่ือเวนวรรคหลายๆ ครั้งเหมือนในโปรแกรม Word ได

4. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Definition List โดยทําหนาที่ในการการจัดขอความแบบหัวขอใหญ หัวขอยอย 5. การแทรกเสนค่ันระหวางบรรทัดเพ่ือแบงเนื้อหาออกเปนสวนๆ มีข้ันตอนอยางไร? เฉลย

การแทรกเสนค่ันทางแนวนอนบนหนาเว็บโดยใชคําส่ัง Insert > HTML > Horizontal Rule จะชวยแบงเนื้อหาออกเปนสวนๆ ทําใหอานไดงาย คําถามทายเรื่องท่ี 4.3 การตกแตงเว็บเพจดวยภาพกราฟก จงตอบคําถามตอไปนี้ โดยการเติมคําตอบลงในชองวางใหถูกตอง 1. ใหนักเรียนอธิบายความแตกตางของชนิดไฟลภาพแบบ .JPEG .GIF และ .PNG ? เฉลย

.JPEG เหมาะสําหรับภาพถาย หรือภาพที่มีจํานวนสีมากๆ ถึง 16.7 ลานสี ใชกับภาพโปรงใสไมได

.GIF ใชสําหรับภาพที่มีลักษณะเปนลายเสนหรือภาพที่ตองการสรางเปนภาพโปรงใส แตใชสีได เพียง 256 สีเทานั้น เชน ภาพการตูนและภาพเคล่ือนไหว

.PNG สําหรับภาพถายที่ตองการใหมีลักษณะโปรงใส แตไฟลที่ไดหลังการบีบอัดจะมีขนาดใหญและมีคุณภาพมากกวาไฟล JPEG และแสดงผลไดเร็วกวาแบบ .GIF 2. การใสกรอบใหกับรูปภาพ มีข้ันตอนอยางไร ? เฉลย

การใสกรอบใหกับรูปภาพมีข้ันตอน ดังนี ้1. คลิกรูปที่ตองการใสกรอบ 2. กําหนดคาตัวเลขในชอง Border ใน Properties Inspector เสนกรอบจะปรากฏขึ้น

3. การนําภาพมาสรางเปนพ้ืนหลังใหกับเว็บเพจ มีข้ันตอนอยางไร ? เฉลย

การนําภาพมาสรางเปนพ้ืนหลังใหกับเว็บเพจ มีขั้นตอนดังนี ้1. เลือกคําส่ัง Modify > Page Properties… หรือกด <Ctrl+J> จะปรากฏหนาตาง Page Properties ข้ึนมา 2. ที่ชอง Background image คลิกปุม Browse เพ่ือเลือกรูปที่จะนํามาใช 3. จากนั้นคลิกเลือกไฟลภาพพ้ืนหลังที่จะนํามาใช แลวคลิกปุม OK 4. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Crop ทําหนาที่ในการตัดภาพเฉพาะสวนที่ตองการ 5. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Optimize ทําหนาที่ในการลดขนาดภาพ คําถามทายเรื่องท่ี 4.4 การสรางตารางบนเว็บเพจ จงตอบคําถามตอไปนี้ โดยการเติมคําตอบลงในชองวางใหถูกตอง 1. คําส่ังที่ใชในการแทรกแถวคือ? เฉลย

คลิกเลือกเมนูคําส่ัง Modify > Table > Insert Row (Ctrl+M) หรือ คลิกขวาแลวเลือก Table > Insert Row 2. คําส่ังที่ใชในการลบคอลัมน คือ? เฉลย

คลิกเลือกเมนูคําส่ัง Modify > Table > Insert Column (Ctrl+C) หรือ คลิกขวาแลวเลือก Table > Insert Column

3. คําส่ังที่ใชในการรวมเซลลตาราง คือ? เฉลย

คลิกเลือกเมนูคําส่ัง Modify > Table > Split Cell… หรือ คลิกขวาแลวเลือก Table > Split Cell… 4. คําส่ังที่ใชในการแบงเซลลตาราง คือ? เฉลย

คลิกเลือกเมนูคําส่ัง Modify > Table > Merge Cells หรือ คลิกขวาแลวเลือก Table > Merge Cells 5. การนําภาพมาสรางเปนพ้ืนหลังตาราง มีข้ันตอนอยางไร ? เฉลย

การนําภาพมาสรางเปนพ้ืนหลังตาราง มีข้ันตอน 1. คลิกปุม ในชอง Bg Image เพ่ือเลือกภาพที่ตองการทําเปนพ้ืนหลังตาราง 2. จะปรากฏหนาตาง Select Image Source ขึ้นมา เลือกไฟลภาพที่ตองการ แลวคลิกปุม OK 3. ภาพที่เลือกจะถูกนํามาเรียงใหเต็มพื้นที่ของตาราง คําถามทายเรื่องท่ี 4.5 การเช่ือมโยง จงตอบคําถามตอไปนี้ โดยการเติมคําตอบลงในชองวางใหถูกตอง 1. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Named Anchor ทําหนาที่กําหนดจุดการเชื่อมโยงภายในเว็บเพจหนาเดียวกัน 2. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Email Link ทําหนาที่กําหนดการเชื่อมโยงไปยังอีเมล

3. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Point to File ทําหนาที่กําหนดการเชื่อมโยงภายในเว็บไซตเดียวกัน โดยการคลิกเลือกขอความหรือรูปภาพ จากนั้นคลิก Point to File ใน Properties Inspector แลวลากเมาสไปยังไฟลในพาเนล Files ที่ตองการเชื่อมโยง ซึ่งเปนวิธีที่สะดวกเพราะไมตองพิมพชื่อไฟลหรือคลิกหาไฟลที่ตองการ 4. การใชรูปภาพเปนลิงกเพ่ือเชื่อมโยงภายในเว็บไซตเดียวกัน มีขั้นตอนอยางไร ? เฉลย

การใชรูปภาพเปนลิงกเพ่ือเชื่อมโยงภายในเว็บไซตเดียวกัน มีข้ันตอนดังนี ้1. คลิกภาพที่ตองการกําหนดการเชือ่มโยง 2. ที่ Property Inspector ในชอง Link พิมพตําแหนงที่ตองการจะเชื่อมโยงลงไป 5. ในชอง Target หากกําหนดเปน _blank รูปแบบการเชื่อมโยงจะเปนลักษณะแบบใด ? เฉลย

_blank เปนการเปดหนาเว็บใหมที่เชื่อมโยงในหนาตางบราวเซอรใหม คําถามทายเรื่องท่ี 4.6 การออกแบบเลยเอาท จงตอบคําถามตอไปนี้ โดยการเติมคําตอบลงในชองวางใหถูกตอง 1. ขั้นตอนในการเขาสูโหมด Layout เพ่ือใชงานเครื่องมือ Layout Table และ Layout Cell จะทําอยางไร ? เฉลย

คลิกเลือกเมนูคําส่ัง View > Table Mode > Layout Mode 2. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Draw Layout Table ทําหนาที่ในการสราง Layout Table ซึ่งเปนการกําหนดขอบเขตของตารางบนหนาเว็บเพจซึ่งจะมีลักษณะเปนกรอบสีเขียว

3. คือเครื่องมือที่มีชื่อเรยีกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Draw Layout Cell ทําหนาที่ในการสราง Layout Cell สําหรับการวางขอมูลหรือรูปภาพภายใน Layout Table 4. เราสามารถสราง Layout Cell โดยที่ไมตองวาด Layout Table กอน ไดหรือไม ? เฉลย

เรา ไม สามารถสราง Layout Cell โดยที่ไมตองวาด Layout Table กอนได 5. หากตองการสรางแทรก Layout Cell อีกอัน ไวทางดานขวาของ Layout Cell เดิม ควรใชเครื่องมือใด ? เฉลย

Insert Column to the Right สําหรับแทรกคอลัมนใหมทางดานขวาของ Layout Cell ที่เลือก

คําถามทายเรื่องท่ี 4.7 การสรางเฟรมเซตในเว็บเพจ จงตอบคําถามตอไปนี้ โดยการเติมคําตอบลงในชองวางใหถูกตอง 1. เฟรมเซต (Frameset) คืออะไร และมีประโยชนอยางไรในการสรางเว็บ ? เฉลย

เฟรมเซต (Frameset) คือการแบงหนาจอบราวเซอรออกเปนสวนยอยที่เรียกวาเฟรม โดยในแตละสวนจะแยกกันเปนอิสระ ทําใหการออกแบบหนาเว็บเพจทําไดงายและสะดวกตอการจัดเรียงขอมูล 2. การสรางเฟรมแบบสําเร็จรูปโดยใช Insert Bar ที่แถบเครื่องมือ Layout หากเลือกรูปแบบเฟรมเซตเปน Top and Nexted Left Frames รูปแบบเฟรมเซตจะเปนอยางไร จงวาดภาพประกอบ 3. จากรูปแบบเฟรมเซตในขอ 2 เราจะตองสรางเว็บเพจกี่เว็บเพจเพ่ือนํามาใสในเฟรมยอยแตละเฟรม? เฉลย

เราจะตองสรางเว็บเพจ 3 เว็บเพจเพ่ือนํามาใสในเฟรมยอยแตละเฟรม 4. การบันทึกเฟรมทั้งหมดที่สราง จะตองใชคําส่ังใด ? เฉลย

File > Save All

5. ในชอง Target หากกําหนดเปน mainFrame รูปแบบการเชื่อมโยงจะเปนลักษณะแบบใด ? เฉลย

mainFrame เปนการเปดหนาเว็บเพจใหมในหนาหลัก mainframe

คําถามทายเรื่องท่ี 4.8 การสรางฟอรม จงตอบคําถามตอไปนี้ โดยการเติมคําตอบลงในชองวางใหถูกตอง 1. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Text Field เปนฟลดในการกรอกขอมูลที่เปนขอความส้ันๆ ไมเกิน 1 บรรทัด 2. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Checkbox เปนฟลดสําหรับขอมูลที่ใหเลือกเช็คก่ีขอก็ไดจากตัวเลือกทั้งหมด 3. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Jump Menu เปนลิสตเมนูที่เปนการออกแบบฟอรมใหลิงกไปยังเว็บไซต หรือ URL 4. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Image Field เปนฟลดรูปภาพเพ่ือใชแทนปุม Submit ของฟอรม 5. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Button เปนฟลดสําหรับสรางปุมกด

คําถามทายเรื่องท่ี 4.9 การใชมัลติมีเดีย จงตอบคําถามตอไปนี้ โดยการเติมคําตอบลงในชองวางใหถูกตอง 1. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Flash เปนการจะแทรกไฟล Flash ลงไปในหนาเว็บเพจ 2. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Flash Button เปนการสรางปุมกดเพ่ือใชเชื่อมโยงไปหนาเว็บเพจ 3. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Flash Text เปนการสรางขอความที่เปนลิงกได โดยสามารถที่จะกําหนดสีตัวอักษรของขอความไดตามตองการ และกําหนดตําแหนงที่ใชในการเชื่อมโยงไปยังเวบ็เพจ หรือเว็บไซตอื่น 4. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Plugin เปนการใสไฟลเสียงนํามาประกอบในเว็บเพจ (รูปแบบไฟลเสียงที่นิยมนํามาใช เชน .midi .wav .aif .mp3 เปนตน) 5. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาที่อยางไร ? เฉลย

คือเครื่องมือที่มีชื่อเรียกวา Flash Video เปนการจะแทรกคลิปวิดีโอที่แปลงเปนไฟล .flv เพ่ือนํามาประกอบในเว็บเพจ

คําถามทายเรื่องท่ี 4.10 การตรวจสอบการทํางานของหนาเว็บเพจ จงตอบคําถามตอไปนี ้ โดยการเติมคําตอบลงในชองวางใหถูกตอง 1. เหตุใดจึงควรมีการตรวจสอบการทํางานตางๆ ของหนาเว็บเพจ ? เฉลย

เราควรตรวจสอบการทํางานตางๆของเว็บไซตหลังจากที่ไดออกแบบและสรางเว็บไซตแลว เชน การตรวจสอบโครงสรางไฟลและโฟลเดอร การตรวจสอบการเชื่อมโยง หรือการลบแท็ก HTML ที่ไมจําเปนออก เปนตน เพ่ือตรวจสอบความถูกตองเผื่อมีขอผิดพลาด ก็จะไดแกไขใหถูกตองหรือตัดสวนที่ไมจําเปนออก เนื่องดวยอาจจะตองอพัโหลดเว็บไซตเพ่ือเผยแพรบนอินเทอรเน็ตตอไป 2. คําส่ังใดที่ใชในการตรวจสอบความถูกตองของลิงก ในการเชื่อมโยงตางๆ ของเว็บไซต ? เฉลย

File > Check Page > Links 3. คําส่ังใดที่ใชในการลบแท็ก HTML ที่ไมจําเปนออกไป ? เฉลย

Commands > Clean Up XHTML… 4. การจัดการเว็บไซตมีข้ันตอนที่สําคัญกี่ข้ันตอน มีอะไรบาง ? เฉลย

การจัดการเว็บไซตมีขั้นตอนสําคัญ 3 ขั้นตอน คือ 1.จดทะเบียนโดเมนเนม (Domain Name) 2.จัดหาพ้ืนที่ฝากเว็บไซตบนเว็บเซิรฟเวอร 3.การอัพโหลดไฟลเว็บเพจขึ้นบนเครือขายอินเทอรเน็ต

5. หากนักเรียนจะสรางเว็บไซตข้ึนมาหนึ่งเว็บไซต นักเรียนจะสรางเว็บไซตเกี่ยวกับอะไร และจะตั้งชื่อเว็บไซตวาอะไร เพราะเหตุใด ? เฉลย

ข้ึนอยูกับดุลยพินิจของครูผูสอน

เฉลยแบบฝกหัดทายหนวยและคําถามทายเร่ือง

รายวิชา การออกแบบและพัฒนาเว็บไซต

แบบฝกหัดทายหนวยเรียนท่ี 1 แนะนําภาษา HTML จงตอบคําถามตอไปนี ้ 1. ภาษา HTML คือ? เฉลย

ภาษาที่ถูกพัฒนาข้ึนมาเพื่อใชในการสรางเว็บเพจ หรือขอมูลอื่นๆ ที่เรียกดูผาน Web Browser 2. โครงสรางของภาษา HTML ประกอบดวยกี่สวน อะไรบาง? เฉลย

มี 2 สวน คือ สวนขอความหรือสวนเนื้อหา และสวนคําส่ังหรือสวนแท็ก (Tag) 3. แท็ก (Tag) ในภาษา HTML ทําหนาที่อะไร? เฉลย

ทําหนาที่เปนคําสั่งคอยควบคุมการแสดงผล 4. Tag เด่ียว หมายถึงอะไร พรอมยกตัวอยางคําสั่งแบบ Tag เด่ียว? เฉลย

Tag ที่เปน Tag เปดอยางเดียว โดยไมตองมี Tag ปด เชน <b> 5. Tag คู หมายถึงอะไร พรอมยกตัวอยางคําส่ังแบบ Tag คู? เฉลย

Tag ที่มีทั้ง Tag เปดและปดคูกัน คือเริ่มตนคําส่ังดวย Tag เปด แลวจบลงดวย Tag ปด เชน <b> </b>

แบบฝกหัดทายหนวยเรียนท่ี 2 แนะนําโปรแกรม EditPlus จงตอบคําถามตอไปนี ้ 1. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาอยางไร? เฉลย

View in Browser ใชแสดงผลหนาเว็บเพจ 2. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาอยางไร? เฉลย

Edit Source ใชแกไข Tag ตาง ๆ 3. คือเครื่องมือที่มีชื่อเรียกวาอะไร ทําหนาอยางไร? เฉลย

New ใชเปดหนาเอกสารใหม 4. โปรแกรม Edit Plus นอกจากจะสามารถเขียนและแกไขคําส่ังภาษา HTML ไดแลวยังสามารถเขียนและแกไขภาษาคอมพิวเตอรใดไดอีกบาง ยกตัวอยางมา 5 ตัวอยาง? เฉลย

CSS, PHP, ASP, Perl, C/C++, Java 5. ในการบันทึกไฟลในโปรแกรม Edit Plus เพื่อใชในเขียนเว็บเพจในรายวิชานี้จะตองเลือก Save as type เปนไฟลใด เพราะเหตุใด? เฉลย

HTML เพราะเปนการบันทึกไฟลในรูปแบบเว็บเพจ เพ่ือใหสามารถเรียกดูการแสดงผลผาน Web Browser ได

แบบฝกหัดทายหนวยเรียนท่ี 3 การจัดการเอกสารบนหนาเว็บ จงตอบคําถามตอไปนี ้ 1. จงเขียนโคดคําส่ังดวยภาษา HTML จากผลลัพธของขอความตอไปนี้ใหถูกตอง? ตอบ

การกําหนดสีพ้ืนหลังแลวแตวิจารณญาณ เพราะในคําถามไมไดกําหนด

แบบฝกหัดทายหนวยเรียนท่ี 4 การจัดการขอความ จงตอบคําถามตอไปนี ้ 1. คําสั่ง <Hn>……</Hn> คือคําส่ังแบบใด? เฉลย

คําส่ังกําหนดลักษณะหัวเรื่อง 2. <H3>…ยินดีตอนรับ…</H3> คําส่ังดังกลาวจะใหผลเปนอยางไร จงวาดภาพประกอบ ? 3. การใชคําสั่ง <font face = “..........(1)...........”>…........(2) …........</font> หมายเลข (1) จะตองเติมอะไร และหมายเลข (2) จะตองเติมอะไร? เฉลย (1) ชื่อฟอนต (2) ขอความ 4. หากการแสดงผลเปนดังนี้ ยินดีตอนรับเขาสูโรงเรียน Click Life (ตัวอักษรสีแดง) โคดภาษา HTML จะเปนอยางไร? 5. หากเราเขียนโคดภาษา HTML เปน <marquee>...สวัสดีคะ...</marquee> โปรแกรมจะแสดงผลอยางไร? เฉลย

ตัวอักษรจะวิ่งบนหนาเว็บเพจ

แบบฝกหัดทายหนวยเรียนท่ี 5 การตกแตงเว็บเพจดวยกราฟก จงตอบคําถามตอไปนี ้ 1. รูปภาพแบบไฟล JPEG มีลักษณะอยางไร มีจุดเดนอยางไรบาง? เฉลย เปนไฟลรูปภาพมาตรฐาน ที่ถูกบีบอัดใหมีขนาดไมใหญมาก สามารถเปดดูไดงาย ไมจําเปนตองมีโปรแกรมเปดเฉพาะ มีจุดเดน คือไฟลภาพมีขนาดเล็ก ใชงานบนเครือขายอินเทอรเน็ตไดดี 2. รูปภาพไฟลแบบ GIF และ PNG มีความเหมือนและแตกตางกันอยางไร ? เฉลย ความเหมือนคือ เปนไฟลรูปภาพที่มีขนาดเล็ก และสามารถปรับพ้ืนหลังใหโปรงใสไดเหมือนกัน สวนความตางคือ GIF สามารถทําใหภาพมีการเคลื่อนไหวได แต PNG ทําไมได และ GIF จะเหมาะกับการใชงานบนเว็บไซต มากกวา PNG 3. หากหนาเว็บเพจแสดงภาพดังตัวอยาง ลักษณะของโคดภาษา HTML จะเปนอยางไร?

แบบฝกหัดทายหนวยเรียนท่ี 6 การสรางตาราง จงตอบคําถามตอไปนี ้ 1. หากโคดภาษา HTML เปนดังภาพตัวอยาง ตารางที่ไดจะเปนอยางไร จงวาดภาพประกอบ? เฉลย

2. หากตองการสรางตารางดังภาพดานลาง โคดภาษา HTML จะเปนอยางไร จงเขียนโคดใหถูกตอง ? • สมมติกําหนดคาในตารางดานบนเปน #FF00FF , ตารางลางเปน #FF00BB

แบบฝกหัดทายหนวยเรียนท่ี 7 การเช่ือมโยงหนาเว็บไซต จงตอบคําถามตอไปนี ้ 1. คําสั่ง < A HREF =>……</A> ทําหนาที่ใด ? เฉลย

ทําหนาที่เปนคําสั่งจุดเชื่อมโยงไปยังเว็บเพจหรือเว็บไซตอื่น ๆ 2. คําสั่ง <A HREF =...............(1)................>…................(2)...............</A> หากตองการเชื่อมโยงไปยังเว็บไซตอื่น จะตองใส URL ในหมายเลขใด และอีกหมายเลขมีความหมายวาอยางไร? เฉลย

ใส URL ในหมายเลข (1) สวนหมายเลข (2) ใหใสขอความหรือรูปภาพที่ใชเปนจุดเชื่อมโยงลงไป 3. หากตองการเชื่อมโยงไปยังเว็บไซต www.trueclicklife.com โดยใชรูปภาพดังภาพ จะตองเขียนโคดภาษา HTML อยางไร? ตอบ

แบบฝกหัดทายหนวยเรียนท่ี 8 การสรางแบบฟอรมและเฟรม จงตอบคําถามตอไปนี ้ 1. คําสั่ง <form method = “............(1)..............” action = “..............(2).................”> </form> หมายเลข (1) และหมายเลข (2) หมายถึง? เฉลย (1) หมายถึง วิธีการสงขอมูล (2) หมายถึง ตําแหนงโปรแกรมที่สงฟอรมไป 2. หากกําหนดโคดภาษา HTML เปนดังภาพดานลาง โปรแกรมจะแสดงผลเปนอยางไร จงวาดภาพประกอบ วาดภาพประกอบ

แบบฝกหัดทายหนวยเรียนท่ี 9 การแทรกมัลติมีเดียลงบนเว็บเพจ จงตอบคําถามตอไปนี ้ 1. คําสั่ง <BGSOUND SRC=”..............(1)..............” LOOP =”....................(2)...............” > จงอธิบายความหมายของหมายเลข (1), และหมายเลข (2) ? เฉลย (1) ใหใสไฟลเสียงลงไป (2) ใสจํานวนครั้งที่ใหเลนเพลง 2. หากการแสดงผลเปนดังภาพดานลาง โคดภาษา HTMLจะตองเปนอยางไรกําหนดไฟลวิดีโอเปน clicklife.wmv ตอบ

Documents

สารบัญ รายวิชาที่ 1 การออกแบบ ... · 2015-11-02 · สารบัญ รายวิชาที่ 2 การออกแบบและพัฒนาเว็บไซต