แผนการสอนวิชาการพัฒนาเว็บด้วยภาษาเอชทีเอ็มแอล

การนำความรู ความเขา ใจ 80 การนำวธิ ีการไปแกไ ขปญหา การแกไ ขปญหาเฉพาะหนา พทุ ธพิสัย (ภาคทฤษฏ)ี วิเคราะหตามความสำคญั นาเวบ็ ดว ยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 วิเคราะหต ามความสำพันธ ยงเวบ็ เพจดว ยลงิ ค เวลา ๓ ชม. วเิ คราะหตามหลกั การปฏิบตั ิ การวางแผน/การออกแบบ การนำไปใช การวเิ คราะห การสงั เคราะห การประเมนิ คา การนำสง่ิ ทเ่ี รียนรูมาผสมผสานสรางสรรคส ง่ิ ใหม รวม (30) การตดั สนิ ใจจากขอเทจ็ จริง ตัดสินใจจากเกณฑก ารยอมรบั ของสังคม

แบบประเมนิ ผลดานจ รหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั น หนว ยที่ ๖ ชื่อเรอื่ ง/ การช่อื มโย รายการประเมนิ ลำดับที่ ชือ่ -สกลุ หมายเหตุ การใหค ะแนน ๑ = ปรบั ปรงุ , ๒ = พอใช, (รายละเอยี ดของการประเมนิ สามารถปรบั ขอ ความใหเหมาะสมกบั รา

มีวินัย 81 รับผิดชอบจิตพิสัย (ภาคทฤษฏี) ซ่ือสัตยสุจริตนาเวบ็ ดวยภาษาเอชทเี อ็มแอล ท 1 ป 2 น 3 สามัคคียงเวบ็ เพจดว ยลิงค เวลา ๓ ชม. ขยัน ประหยัด๓ = ดี จิตอาสาายวิชา) สะอาด สุภาพ ละเวนอบายมุข รวม

แบบประเมนิ ผลคณุ รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั น หนว ยท่ี ๖ ชื่อเรอื่ ง/ การชอื่ มโย การประเมนิ คณุ ภาพของงาน ที่ รายช่ือ คณะทำงาน ความรับผิดชอบตอหนาที่ ขั้นตอนการทำงาน เวลา ความรวมมือในการทำงาน รวม หมายเหตุ เกณฑการใหค ะแนนการประเมนิ การทำงานเปน กลมุ เกณฑก ารตดั สินคณุ ภ ชว งคะแนน ระด พฤตกิ รรม/ผลงาน อยูในเกณฑด ี ได ๓ คะแนน ๒๑ – ๓๐ = ดี ๑๑ – ๒๐ = พอ พฤติกรรม/ผลงาน อยใู นเกณฑปานกลาง ได ๒ คะแนน ๐ – ๑๐ = ตอ พฤติกรรม/ผลงาน อยูใ นเกณฑพ อใช ได ๑ คะแนน พฤตกิ รรม/ผลงาน อยใู นเกณฑป รบั ปรงุ ได ๐ คะแนน

82 ณภาพผลงานกลมุ นาเวบ็ ดวยภาษาเอชทเี อ็มแอล ท 1 ป 2 น 3 ยงเว็บเพจดวยลงิ ค เวลา ๓ ชม. การประเมินการทำงานเปนกลมุ มีการมอบหมายหนาท่ี มีการวางแผน มีการชวยเหลือกันและกันในกลุม ความคิดเห็นผูอื่น ใชหลักประชาธิปไตย ผลงานเสร็จทันตามกำหนดเวลา ความถูกตองของผลงาน ความรู ความเขาใจในการทำงาน อธิบายและตอบคำถาม การจัดเก็บวัสดุ อุปกรณ เรียบรอย รวม รวมทั้งสิ้น ภาพ ความรวมมือในการทำงาน ๔ คะแนน ดับคณุ ภาพ ทกุ คนมีสวนรวมและใหความรวมมืออยางเตม็ ท่ี ๓ คะแนน 80% ของกลุม ที่มสี ว นรว มและใหค วามรว มมอื อยา งเตม็ ที่ ๒ คะแนน อใช ๖0% ของกลมุ ท่ีมสี ว นรว มและใหความรว มมืออยา งเต็มที่ ๑ คะแนน องปรบั ปรุง ๔0% ของกลมุ ทม่ี สี วนรวมและใหความรว มมืออยางเตม็ ที่

83 แผนการจัดการเรียนรู รหสั วชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั นาเว็บดวยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 หนว ยท่ี ๗ ชอ่ื เรือ่ ง/ การจัดขอมลู ใหเ ปน สดั สวนดว ยตาราง เวลา ๓ ชม. ๑. หวั ขอ เร่ือง การจัดขอมูลใหเ ปน สัดสวนดวยตาราง ๒. สาระสำคัญ การจัดเก็บขอมูลจำนวนมาก จำเปนมากที่ตองนำตารางเขามาชวยในการจัดขอมูลเหลาน้ี ใหดูเปนระเบยี บและเปน สดั สวน ซึ่งเว็บเพจโดยสวนใหญจะใชแ ทก็ ภาษา HTML ทเ่ี กยี่ วกับตารางมาชว ยทั้งสิน้ 3. จุดประสงคทัว่ ไป 3.1 ดานความรู (K) 1. มคี วามรูเกย่ี วกับประพจน และประโยค 2. มคี วามรเู กีย่ วกบั การเชือ่ มประพจน 3. มีความรูเก่ียวกับการเขยี นตารางคา ความจริง 4. มีความรูเกีย่ วกับการหาคา ความจรงิ ของประพจน ๕. มีความรูเกย่ี วกบั ประพจนท ส่ี มมลู กัน ๖. มีความรูเ กี่ยวกับการพิสจู น ๗. มีความรูเกย่ี วกบั การใหเ หตุและผล 3.2 ดา นทักษะ (S) 1. มีทกั ษะเก่ียวกับประพจน และประโยค 2. มที กั ษะเกี่ยวกบั การเชือ่ มประพจน 3. มที ักษะเกย่ี วกบั การเขียนตารางคา ความจริง 4. มีทักษะเกีย่ วกบั การหาคาความจรงิ ของประพจน ๕. มที กั ษะเกีย่ วกับประพจนท ่ีสมมลู กนั ๖. มีทกั ษะเกี่ยวกับการพสิ ูจน ๗. มีทกั ษะเกยี่ วกับการใหเ หตุและผล ๓.๓ เจตคติและคณุ ลักษณะทพ่ี ึงประสงค (A) ๑ พัฒนาลักษณะนสิ ยั แสดงพฤตกิ รรม และมีคุณธรรม จรยิ ธรรมทีด่ ตี อการปฏิบัตงิ าน 4. สาระการเรียนรู 1. ประพจน และประโยค 2. การเชือ่ มประพจน 3. การเขยี นตารางคาความจรงิ 4. การหาคา ความจริงของประพจน 5. ประพจนท่สี มมลู กนั 6. การพสิ ูจน 7. การใหเ หตแุ ละผล

84 5. กจิ กรรมการเรียนรู (เนนผเู รียนเปน สำคญั ดวยวธิ ีการสอน เทคนคิ การสอน กระบวนการสอนท่ี หลากหลายเหมาะสมกบั รายวิชา) (จำนวน ๓ ชม.) 5.1 ข้ันนำเขาสูบทเรยี น (จำนวน 30 นาท)ี 5.1.1 ผูสอนทบทวนเนอ้ื หาโดยการสอบถามถึงวิชาทผ่ี เู รียนเคยเรียน หรอื ประสบการณ ท่ีผูเ รียนรูเก่ยี วกบั การจดั ขอ มลู ใหเปนสดั สว นดวยตาราง 5.1.2 ผเู รยี นยกตวั อยางเก่ยี วกบั การจดั ขอ มลู ใหเ ปน สดั สวนดว ยตาราง 5.1.3 ผูสอนกลาวถึงการเรียนรูเครื่องหมายและสัญลักษณความปลอดภัย มีความสำคัญ สำหรับการปฏิบัติงานในทุกสาขาอาชีพ สถานประกอบการจะตองเห็นถึงความสำคัญพรอมทั้งอบรมใหความรู แกผูปฏิบัติงานทราบ เพื่อใหสามารถปฏิบัติตามไดอยางถูกตอง การใหความสำคัญกับเครื่องหมายและ สัญลักษณค วามปลอดภยั จะชวยใหเ กดิ ความปลอดภัยในการปฏิบัติงานมากขึน้ 5.2 ข้ันดำเนินการสอน (จำนวน 1 ชม.) 5.2.1 ผสู อนอธิบายหลักการและกฎเกณฑของการจดั ขอมูลใหเปนสดั สวนดว ยตาราง 5.2.2 ผสู อนยกตวั อยา งคำศัพทท่ีเกยี่ วของกบั การจดั ขอมลู ใหเ ปนสัดสว นดว ยตาราง 5.2.3 ผเู รยี นแบง กลุม ศกึ ษาและรายงานเร่อื งการจดั ขอ มลู ใหเปนสดั สวนดว ยตาราง 5.2.4 ผูเรียนศึกษาจากแหลงการเรียนรูที่ผูสอนแนะนำ เชน เอกสารประกอบการเรียน เว็บไซตที่ผูสอนแนะนำ 5.2.5 ผูสอนสังเกตพฤติกรรมการเรียนรูของผูเรียนรายบุคคลและกระบวนการทำงานกลุม และอำนวยความสะดวก ใหค ำแนะนำ สนบั สนนุ ทรพั ยากรการเรยี นรู 5.2.6 ผูสอนตรวจสอบการทำกิจกรรมตรวจสอบความเขาใจ แลวทบทวนในสวนที่ผูเรียนทำ ผิดมาก หรอื ตอบไมไ ด 5.2.7 ผูเรียนรายงานผลงานกลุม 5.2.8 ผูสอนและผูเรียนกลุมที่ไมไดรายงานประเมินผลการรายงานของเพื่อน แจงผลการ ประเมิน และใหข อ เสนอแนะตางๆ 5.3 ขนั้ ประกอบกิจกรรม (จำนวน 2 ชม.) 5.3.1 ผเู รียนทำแบบทดสอบเพอ่ื ประเมนิ ผลหลงั การเรียนรูในเอกสารประกอบการเรียน 5.3.2 ผเู รียนทำกจิ กรรมใบงานเพ่ือประเมินผลหลงั การเรยี นรู 5.4 ขั้นสรุป (จำนวน 30 นาท)ี 5.4.1 ตัวแทนผูเรยี นแตล ะกลุม สรุปเน้อื หาประจำหนว ยการเรยี น 5.4.2 ผูสอนเฉลยแบบทดสอบเพื่อประเมินผลหลังการเรียนรู สรุปคะแนนของผูเรียน แตละคน 6. สอื่ และแหลงการเรยี นรู 6.1 ส่อื E-BOOK วชิ าการพฒั นาเวบ็ ดวยภาษาเอชทเี อม็ แอล 6.๒ PowerPoint 6.๓ เว็บไซตป ระเภท e-learning ท่เี สริมการเรียนรู เชน 6.3.1 http://www.learnsquare.com 6.3.2 http://www.thaicyberu.go.th 6.๔ Google Classroom

85 6.๕ Google Site 6.๖. Youtube 6.๗ Google Froms 7. การวดั และประเมินผล ๗.๑ วธิ กี ารวดั ผลประเมินผล 7.๑.1 สังเกตผูเรียนมีความสนใจ เกิดความเขาใจในสาระการเรียนรู ตลอดจนแสดงความ กระตอื รือรนในการแสดงความคิดเห็นและสรุปสาระการเรียนรปู ระจำหนวย 7.๑.๒ สงั เกตการทำรายงานกลมุ และการนำเสนอ 7.๑.๓ กจิ กรรมใบงานทายหนวยการเรยี นรู 7.๑.๔ แบบทดสอบเพือ่ ประเมินผลหลงั การเรยี นรู ๗.๒ เคร่ืองมือในการวดั ผลและประเมนิ ผล 7.2.๑ แบบประเมนิ ผลการปฏบิ ัติงาน ใบงาน 7.2.๒ แบบทดสอบหลังเรยี น ๗.๓ เกณฑก ารวดั และประเมิน 7.3.1 แบบฝกหดั ใบงาน เกณฑผ าน ๖๐ % ขน้ึ ไป 7.3.2 แบบทดสอบหลงั เรียน เกณฑผ า น ๖๐ % ขนึ้ ไป 7.3.3 แบบประเมินการทำรายงานกลมุ และการนำเสนอ เกณฑผาน ๖๐ % ข้นึ ไป 7.3.4 แบบประเมินคณุ ธรรม จริยธรรม คา นยิ ม และคุณลกั ษณะอนั พงึ ประสงค คะแนน ข้นึ อยกู บั การประเมินตามสภาพจริง ๘. กจิ กรรมเสนอแนะ /งานมอบหมาย (ถา ม)ี 8.1 กิจกรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………. 8.2 งานมอบหมาย 8.2.๑ ใบงานทา ยหนว ยการเรยี นรู 8.2.๒ กิจกรรมงานกลุม 8.2.๓ แบบทดสอบหลงั เรียน ๙. เอกสารอางอิง /บรรณานุกรมประจำหนวย (หนังสือตำราหรือเอกสารประกอบการเรียนการสอบใน หนว ยนั้นๆ หรอื สื่อและแหลงการเรียนรใู นกรณีคน ควา เพมิ่ เติม) 9.1 สอื่ E-BOOK วชิ าการพฒั นาเว็บดวยภาษาเอชทเี อ็มแอล 9.๒ PowerPoint 9.๓ Google Classroom 9.๔ Google Site 9.๕ Youtube 9.๖ Google Froms

86 ๑๐. บนั ทกึ หลังการจัดการเรยี นรู 10.๑ ผลการใชแผนการจดั การเรยี นรู ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๒ ปญ หาและอปุ สรรค ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………....…………….. 10.๓ แนวทางแกไ ข ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๔ ขอเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ลงช่ือ….…………….....…………... ลงชือ่ ……..……………………. ลงชอ่ื …………………………… ( นางสาวกฤตพร ขามสาม) ( นางสาวสรียา สมยั ) (นายศักดดิ์ า สมิ เสมอ) ครูผูสอน หวั หนา แผนก รองผูอำนวยการฝา ยวิชาการ

87 แบบทดสอบหลงั เรยี นท่ี ๗.1 รหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั นาเว็บดวยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 หนว ยท่ี ๗ ชือ่ เร่ือง/ การจัดขอมลู ใหเปน สดั สวนดวยตาราง เวลา ๓ ชม. ตอนที่ ๑ จงทำเคร่ืองหมายวงกลม ในหัวขอท่ถี กู ทส่ี ุดเพยี งขอเดยี ว 1. ขอใดเปนแท็กในการสรางแถวและคอลมั นตามลำดบั ? ก. <tr>...</tr> และ <td>.. </td> ข. <th>...</th> และ <td>.. </td> ค. <td>...</td> และ <tr>.. </tr> ง. <tr>...</tr> และ <th>.. </th> 2. ขอใดเปน ความหมายของการใสเแอททรบิ วิ ท border หลงั แท็ก <table> ? ก. ขอความในตารางเปนตวั หนา ข. ใสเ สน ตาราง ค. ใสห วั ขอใหก บั ตาราง ง. สรา งกรอบลอ มรอบตาราง 3. ขอใดเปนความหมายของการใชแท็ก <caption align=\"ตำแหนง \">....</caption> ? ก. กำหนดตำแหนงของคำอธบิ ายตาราง ข. กำหนดตำแหนงของตารางในหนา เวบ็ เพจ ค. กำหนดตำแหนงของขอ ความในตาราง ง. กำหนดตำแหนง ของ caption 4. ขอ ใดเปนแท็กท่ีใชกำหนดใหม ที ว่ี างระหวา งขอบเซลลแ ละขอมูล? ก. <cellspacing> ข. <cellpadding> ค. <cellwidth> ง. <cellspan> 5. ขอ ใดเปนแท็กท่ีใชใ นการกำหนดสลี งในชอ งตาราง? ก. backcolor ข. background ค. color ง. Bgcolor 6. ขอ ใดเปน การปรับขนาดของตารางท้ังตารางใหมคี วามกวางเปน 60% ของหนา จอบราวเซอร ? ก. <table width=\"60\"> ข. <table border=\"60%\"> ค. <colgroup width=\"60\"> ง. <table width=\"60%\">

88 7. ขอใดเปน การใสรปู ภาพ sea.gif ใหเ ปน ภาพพน้ื หลงั ของตาราง ? ก. <table src=\"sea.gif\"> ข. <table background=\"sea.gif\"> ค. <table><img src=\"sea.gif\"></table> ง. <table bgimage=\"sea.gif\"> 8. ในการกำหนดเสน ของตาราง คา แอททริบิวท frame=\"void\" มคี วามหมายตรงตามขอใด ? ก. แสดงเสน ดานลา งของชองตาราง ข. ไมแสดงเสน ค. แสดงเสนดา นบนของชอ งตาราง ง. แสดงเฉพาะเสน void 9. หากเราตองการกำหนดเสนของตารางใหแสดงเฉพาะเสนแนวนอนทั้งหมด เราจะกำหนดคาของแอท ทริบิวท rules ดวยคาใด ? ก. horizon ข. rows ค. horizons ง. Row 10. ขอ ใดกลาวไดถ ูกตอเก่ียวกับแอททรบิ วิ ท valign ทีก่ ำหนดในแทก็ <td> ? ก. เปน การจัดขอมูลในแนวนอน ข. รปู แบบคำสัง่ คอื valign=\"ตำแหนง\" ค. ตัวเลือกท่กี ำหนดได คอื top, middle และ bottom ง. ถูกทุกขอ

89 แบบทดสอบหลงั เรียนที่ ๗.๒ รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเวบ็ ดวยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หนวยท่ี ๗ ชือ่ เรอ่ื ง/ การจัดขอมลู ใหเ ปน สัดสวนดว ยตาราง เวลา ๓ ชม. ตอนที่ 2 จงใสเครือ่ งหมาย หนา ขอความทถ่ี กู และใสเ ครื่องหมาย หนาขอ ความทีผ่ ิด .......................1. คา Border คือระยะหา งระหวางชอ งภายในตาราง .......................2. <table border=\"1\" width=\"70%\"> กำหนดความกวา งของตารางเปน 70%ของความ กวางบราวเซอร .......................3. เราสามารถใสส ใี หก บั กรอบตาราง โดยใชแ อททรบิ วิ ท bgcolor ใสลงไปในแท็ก<table> .......................4. การใสรปู ภาพใหก ับพื้นหลงั ของตาราง เราจะใชแอททริบิวท bgimage ...................5. box และ hsides เปนตวั เลือกของแอททรบิ วิ ท frame ...................6. ตวั เลอื กของแอททรบิ วิ ท rules ประกอบดวย all, cols, groups, none, rows .......................7. <td valign=\"top\">Top</td> เปนการจดั ขอมูลในแนวตง้ั .......................8. <thead> (Table Header) เปน การแบง สวนของหัวตาราง .......................9. ในการแบง สว นตาราง <thead>, <tfoot>, <tbody> ตอ งใสเ รียงกันตามลำดับกอนหลัง ของตาราง .....................10. backcolor เปน แท็กทใ่ี ชใ นการกำหนดสลี งในชอ งตาราง

90 แบบทดสอบหลงั เรียนท่ี ๗.๓ รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั นาเวบ็ ดว ยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 หนวยท่ี ๗ ชอ่ื เรอ่ื ง/ การจดั ขอ มูลใหเปน สัดสว นดวยตาราง เวลา ๓ ชม. ตอนที่ 3 จงตอบคำถามตอ ไปน้ี 1. จงเขยี นตาราง 3 แถว 3 คอลัมน ท่มี คี วามกวา ง 90% จากหนา ตา งบราวเซอร .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 2. จงเขียน HTMLท่ีไดผ ลลพั ธตรงกับรปู .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 3. กฏของแอททริบิวท rules มอี ะไรบา ง จงอธิบาย .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. ..............................................................................................................................................................................

คำศัพท/คำนิยาม แบบประเมนิ ผลดา นพ ขั้นตอน/วิ ีธการป ิฏบั ิตรหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพัฒน การคิดรวมยอดในเ ้นือเ ื่รอง การแปลความ/ ีตความหมายหนว ยท่ี ๗ ชื่อเรอ่ื ง/ การจดั ขอมลู ให การขยายความ รายการประเมิน ความรคู วามจำ ความเขาใจ ที่ ชอื่ -สกลุ หมายเหตุ การใหค ะแนน ๑ = ปรับปรงุ , ๒ = พอใช, ๓ = ดี

การนำความรู ความเขา ใจ 91 การนำวธิ ีการไปแกไ ขปญหา การแกไ ขปญหาเฉพาะหนา พทุ ธพิสัย (ภาคทฤษฏี) วิเคราะหตามความสำคญั นาเวบ็ ดว ยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 วิเคราะหต ามความสำพันธ หเ ปน สัดสว นดวยตาราง เวลา ๓ ชม. วเิ คราะหตามหลกั การปฏิบตั ิ การวางแผน/การออกแบบ การนำไปใช การวิเคราะห การสงั เคราะห การประเมนิ คา การนำสง่ิ ทเ่ี รียนรูมาผสมผสานสรางสรรคส ง่ิ ใหม รวม (30) การตดั สนิ ใจจากขอเทจ็ จริง ตัดสินใจจากเกณฑก ารยอมรบั ของสังคม

แบบประเมินผลดานจ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั น หนวยท่ี ๗ ช่อื เรอ่ื ง/ การจดั ขอ มลู ให รายการประเมิน ลำดับที่ ชื่อ-สกลุ หมายเหตุ การใหค ะแนน ๑ = ปรับปรุง, ๒ = พอใช, (รายละเอียดของการประเมนิ สามารถปรับขอ ความใหเ หมาะสมกับรา

มีวินัย 92 รับผิดชอบจติ พิสัย (ภาคทฤษฏ)ี ซ่ือสัตยสุจริตนาเวบ็ ดว ยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 สามัคคีหเปน สัดสว นดวยตาราง เวลา ๓ ชม. ขยัน ประหยัด๓ = ดี จิตอาสาายวชิ า) สะอาด สุภาพ ละเวนอบายมุข รวม

แบบประเมนิ ผลคุณ รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพัฒน หนวยที่ ๗ ช่ือเร่ือง/ การจัดขอ มลู ให การประเมินคุณภาพของงาน ที่ รายชื่อ คณะทำงาน ความรับผิดชอบตอหนาที่ ขั้นตอนการทำงาน เวลา ความรวมมือในการทำงาน รวม หมายเหตุ เกณฑก ารใหคะแนนการประเมนิ การทำงานเปนกลมุ เกณฑก ารตดั สินคณุ ภ ชว งคะแนน ระด พฤติกรรม/ผลงาน อยใู นเกณฑด ี ได ๓ คะแนน ๒๑ – ๓๐ = ดี ๑๑ – ๒๐ = พอ พฤติกรรม/ผลงาน อยใู นเกณฑปานกลาง ได ๒ คะแนน ๐ – ๑๐ = ตอ พฤติกรรม/ผลงาน อยูในเกณฑพอใช ได ๑ คะแนน พฤตกิ รรม/ผลงาน อยูในเกณฑปรบั ปรงุ ได ๐ คะแนน

93 ณภาพผลงานกลมุ นาเว็บดวยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หเปน สดั สวนดว ยตาราง เวลา ๓ ชม. การประเมินการทำงานเปนกลมุ มีการมอบหมายหนาท่ี มีการวางแผน มีการชวยเหลือกันและกันในกลุม ความคิดเห็นผูอื่น ใชหลักประชาธิปไตย ผลงานเสร็จทันตามกำหนดเวลา ความถูกตองของผลงาน ความรู ความเขาใจในการทำงาน อธิบายและตอบคำถาม การจัดเก็บวัสดุ อุปกรณ เรียบรอย รวม รวมทั้งสิ้น ภาพ ความรวมมือในการทำงาน ๔ คะแนน ดบั คณุ ภาพ ทกุ คนมีสวนรว มและใหความรว มมอื อยา งเต็มท่ี ๓ คะแนน 80% ของกลุม ทม่ี สี วนรวมและใหความรว มมืออยา งเตม็ ท่ี ๒ คะแนน อใช ๖0% ของกลมุ ทม่ี สี ว นรวมและใหความรว มมืออยา งเตม็ ที่ ๑ คะแนน องปรบั ปรุง ๔0% ของกลุมท่ีมีสว นรวมและใหความรว มมอื อยางเตม็ ที่

94 แผนการจดั การเรยี นรู รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเวบ็ ดวยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 หนวยท่ี ๘ ช่อื เรือ่ ง/ การแตงเตมิ เวบ็ เพจดวยกราฟก เวลา ๓ ชม. ๑. หัวขอเรอ่ื ง การแตงเตมิ เว็บเพจดวยกราฟก ๒. สาระสำคัญ กราฟกที่ใชสำหรับการสรางเว็บเพจนั้น โดยสวนใหญจะเปนชนิด GIF และ JPEG ซึ่งมีขอดีและขอเสีย แตกตางกันไป ในภาษา HTML มีแท็กสำหรับใชแสดงและควบคุมภาพนิ่งทั่วไป รวมถึงการสราง ภาพเคล่ือนไหวดว ย GIF Animation 3. จุดประสงคท ั่วไป 3.1 ดา นความรู (K) 1. มีความรูเกย่ี วกบั ภาพกราฟก ชนดิ ตางๆ 2. มีความรเู กีย่ วกบั การแสดงภาพบนเว็บ 3. มีความรเู กยี่ วกับการใสขอ ความกำกบั ภาพ 4. มคี วามรเู กย่ี วกบั การปรับขนาดรูปภาพ ๕. มคี วามรเู กี่ยวกบั การจดั ตำแหนงรปู ภาพ ๖. มีความรเู กย่ี วกบั การแสดงภาพเปน ฉากหลัง 3.2 ดา นทักษะ (S) 1. มีทกั ษะเกยี่ วกบั ภาพกราฟก ชนิดตางๆ 2. มที กั ษะเกี่ยวกบั การแสดงภาพบนเวบ็ 3. มีคทักษะเก่ยี วกบั การใสขอความกำกับภาพ 4. มีทักษะเก่ยี วกบั การปรบั ขนาดรปู ภาพ ๕. มีทกั ษะเกี่ยวกบั การจดั ตำแหนง รปู ภาพ ๖. มที ักษะเกี่ยวกับการแสดงภาพเปนฉากหลงั 3.3 เจตคตแิ ละคณุ ลกั ษณะท่พี ึงประสงค (A) 1 พฒั นาลกั ษณะนิสัย แสดงพฤตกิ รรม และมีคณุ ธรรม จริยธรรมท่ีดตี อ การปฏบิ ัติงาน 4. สาระการเรยี นรู 1. ภาพกราฟก ชนิดตา งๆ 2. แสดงภาพบนเวบ็ 3. การใสขอความกำกบั ภาพ 4. การปรบั ขนาดรปู ภาพ 5. การจัดตำแหนงรปู ภาพ 6. แสดงภาพเปน ฉากหลัง

95 5. กจิ กรรมการเรยี นรู (เนน ผูเ รยี นเปนสำคญั ดว ยวธิ ีการสอน เทคนคิ การสอน กระบวนการสอนท่ี หลากหลายเหมาะสมกับรายวชิ า) (จำนวน ๓ ชม.) 5.1 ขน้ั นำเขาสูบทเรยี น (จำนวน 30 นาท)ี 5.1.1 ผูสอนทบทวนเนื้อหาโดยการสอบถามถึงวิชาที่ผูเรียนเคยเรียน หรือประสบการณ ท่ีผเู รียนรเู ก่ยี วกับการแตงเตมิ เวบ็ เพจดวยกราฟก 5.1.2 ผเู รียนยกตัวอยางเกี่ยวกับการแตงเติมเวบ็ เพจดวยกราฟก 5.1.3 ผูสอนกลาวถึงการเรียนรูกราฟกที่ใชสำหรับการสรางเว็บเพจนั้น โดยสวนใหญจะเปน ชนิด GIF และ JPEG ซึ่งมีขอดีและขอเสียแตกตางกันไป ในภาษา HTML มีแท็กสำหรับใชแสดงและควบคุม ภาพน่งิ ทวั่ ไป รวมถงึ การสรา งภาพเคล่ือนไหวดวย GIF Animation 5.2 ข้นั ดำเนินการสอน (จำนวน 30 นาท)ี 5.2.1 ผูสอนอธิบายหลกั การและกฎเกณฑก ารแตงเตมิ เวบ็ เพจดวยกราฟก 5.2.2 ผสู อนยกตัวอยางคำศพั ทท่เี กีย่ วขอ งกับการแตงเติมเว็บเพจดว ยกราฟก 5.2.3 ผูเรียนแบงกลุมศึกษาและรายงานเร่อื งการแตง เติมเวบ็ เพจดว ยกราฟก 5.2.4 ผเู รียนศึกษาจากแหลง การเรยี นรทู ่ีผูส อนแนะนำ เชน เอกสารประกอบการเรียน เวบ็ ไซตท่ีผสู อนแนะนำ 5.2.5 ผสู อนสงั เกตพฤติกรรมการเรยี นรขู องผูเรยี นรายบุคคลและกระบวนการทำงานกลมุ และอำนวยความสะดวก ใหค ำแนะนำ สนบั สนุนทรัพยากรการเรยี นรู 5.2.6 ผูสอนตรวจสอบการทำกจิ กรรมตรวจสอบความเขา ใจ แลวทบทวนในสวนที่ผเู รียนทำ ผิดมาก หรอื ตอบไมได 5.2.7 ผเู รียนรายงานผลงานกลุม 5.2.8 ผูสอนและผูเ รยี นกลมุ ที่ไมไ ดรายงานประเมินผลการรายงานของเพอื่ น แจง ผลการ ประเมิน และใหข อเสนอแนะตางๆ 5.3 ข้ันประกอบกิจกรรม (จำนวน 30 นาท)ี 5.3.1 ผูเ รยี นทำแบบทดสอบเพอื่ ประเมนิ ผลหลงั การเรียนรูใ นเอกสารประกอบการเรียน 5.3.2 ผูเ รียนทำกิจกรรมใบงานเพื่อประเมนิ ผลหลงั การเรียนรู 5.4 ขั้นสรปุ (จำนวน 30 นาท)ี 5.4.1 ตวั แทนผูเ รียนแตล ะกลุมสรุปเนื้อหาประจำหนว ยการเรยี น 5.4.2 ผูสอนเฉลยแบบทดสอบเพื่อประเมินผลหลังการเรียนรู สรุปคะแนนของผูเรียน แตล ะคน 5.4.3 ผูสอนตรวจสอบความเขาใจของผูเรียนโดยวิธีตางๆ เชน สุมสอบถามรายบุคคล และ มอบหมายงานในการศึกษาคนควา เพิ่มเติมเกี่ยวกบั การแตงเตมิ เว็บเพจดว ยกราฟก 6. ส่อื และแหลง การเรยี นรู 6.1 สือ่ E-BOOK วิชาการพฒั นาเว็บดว ยภาษาเอชทีเอม็ แอล 6.๒ PowerPoint 6.๓ เวบ็ ไซตป ระเภท e-learning ท่เี สรมิ การเรยี นรู เชน 6.3.1 http://www.learnsquare.com 6.3.2 http://www.thaicyberu.go.th

96 6.๔ Google Classroom 6.๕ Google Site 6.๖ Youtube 6.๗ Google Froms 7. การวดั และประเมินผล ๗.๑ วิธกี ารวดั ผลประเมนิ ผล 7.1.๑ สังเกตผูเรียนมีความสนใจ เกิดความเขาใจในสาระการเรียนรู ตลอดจนแสดงความ กระตอื รอื รนในการแสดงความคิดเหน็ และสรุปสาระการเรยี นรูป ระจำหนว ย 7.1.๒ สังเกตการทำรายงานกลุมและการนำเสนอ 7.1.๓ กจิ กรรมใบงานทา ยหนวยการเรยี นรู 7.1.๔ แบบทดสอบเพอ่ื ประเมินผลหลงั การเรยี นรู ๗.๒ เครื่องมือในการวัดผลและประเมินผล 7.2.๑ แบบประเมินผลการปฏิบัตงิ าน ใบงาน 7.2.๒ แบบทดสอบหลงั เรยี น ๗.๓ เกณฑก ารวัดและประเมนิ 7.3.1 แบบฝก หดั ใบงาน เกณฑผ า น ๖๐ % ขนึ้ ไป 7.3.2 แบบทดสอบหลังเรยี น เกณฑผา น ๖๐ % ขึน้ ไป 7.3.3 แบบประเมนิ การทำรายงานกลมุ และการนำเสนอ เกณฑผ า น ๖๐ % ข้ึนไป 7.3.4 แบบประเมนิ คุณธรรม จรยิ ธรรม คา นยิ ม และคณุ ลักษณะอันพงึ ประสงค คะแนน ขน้ึ อยกู บั การประเมนิ ตามสภาพจรงิ ๘. กิจกรรมเสนอแนะ /งานมอบหมาย (ถา มี) 8.1 กจิ กรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………. 8.2 งานมอบหมาย 8.2.๑ ใบงานทา ยหนวยการเรียนรู 8.2.๒ กิจกรรมงานกลุม 8.2.๓ แบบทดสอบหลังเรยี น ๙. เอกสารอางอิง /บรรณานุกรมประจำหนวย (หนังสือตำราหรือเอกสารประกอบการเรียนการสอบใน หนวยน้นั ๆ หรอื ส่อื และแหลง การเรียนรูในกรณีคน ควา เพิม่ เติม) 9.1 สอ่ื E-BOOK วชิ าการพัฒนาเว็บดวยภาษาเอชทีเอ็มแอล 9.๒ PowerPoint 9.๓ Google Classroom 9.๔ Google Site 9.๕ Youtube 9.๖ Google Froms

97 ๑๐. บนั ทกึ หลังการจดั การเรียนรู 10.๑ ผลการใชแผนการจดั การเรยี นรู ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๒ ปญ หาและอุปสรรค ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………....…………….. 10.๓ แนวทางแกไ ข ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๔ ขอเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ลงช่ือ….…………….....…………... ลงชือ่ ……..……………………. ลงชื่อ…………………………… ( นางสาวกฤตพร ขามสาม) ( นางสาวสรยี า สมยั ) (นายศักดิด์ า สมิ เสมอ) ครผู สู อน หวั หนาแผนก รองผูอำนวยการฝา ยวิชาการ

98 แบบทดสอบหลงั เรยี นท่ี 8.1 รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั นาเวบ็ ดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หนวยที่ ๘ ชื่อเรือ่ ง/ การแตง เตมิ เวบ็ เพจดว ยกราฟก เวลา ๓ ชม. ตอนท่ี ๑ จงทำเคร่อื งหมายวงกลม ในหัวขอทีถ่ ูกทส่ี ดุ เพยี งขอเดยี ว 1. ขอใดคือไฟลภาพทีน่ ยิ มนำมาใชบนเว็บเพจมากท่ีสุด ? ก. GIF และ TIFF ข. GIF และ JPEG ค. PSD และ JPEG ง. PSD และ TIFF 2. หากตองการแสดงภาพววิ ทเ่ี ปน ภาพถายบนเวบ็ เพจควรแสดงเปน ไฟลต ามขอใด ? ก. GIF ข. TIFF ค. JPEG ง. PSD 3. ขอใดควรระวังในการนำไฟลภ าพขน้ึ ใชงานบนเวบ็ เพจ ? ก. ขนาดไมค วรใหญจนเกนิ ไป ข. ตรวจสอบใหด กี อ นวาภาพนั้นมีลิขสทิ ธิ์หรอื ไม ค. ควรเลอื กชนิดภาพท่ีใชอ ยา งเหมาะสม และใชภาพเทาท่ีจำเปน ง. ถูกทกุ ขอ 4. แทก็ <br clear=\"left\" /> หมายความวา อยางไร ? ก. ขึน้ บรรทัดใหมใ นบริเวณที่ดานซา ยไมมีวัตถใุ ดวางอยู ข. ขน้ึ บรรทดั ใหมโ ดยวางขอ ความไวดานซา ย ค. ขน้ึ บรรทัดใหมโดยวางขอ ความเสมอขอบดานซา ยของรปู และไมทบั รูป ง. ถูกท้งั ขอ ก. และ ค. 5. ขอใดไมใ ชคา ทสี่ ามารถกำหนดในแอททรบิ วิ ท align ได ? ก. top ข. down ค.left ง. Right 6. ขอ ใดเปนแอททรบิ ิวทท ี่ใชในการใสขอ ความกำกับภาพ ? ก. alt ข. shift ค. ctrl ง. Txt 7. ขอ ใดเปน ความหมายของการใชแ ทก็ ท่ีมรี ูปแบบดงั น้ี <img hspace=\"10\" src=\"ชื่อไฟลภาพ\"> ? ก. ระยะหางที่ขอบบนและลา งของภาพมคี าเทา กบั 10 พิกเซล ข. ระยะหา งทข่ี อบซา ยและขวาของภาพมีคา เทา กบั 10 พกิ เซล ค. ระยะหา งท่ีขอบทกุ ดา นของภาพมคี าเทา กับ 10 พิกเซล ง. ภาพมขี อบหนาเทากับ 10

99 8. ขอใดหมายถงึ การใสแอททริบวิ ท bgproperties=\"fixed\" ภายในแทก็ <body> ? ก. รปู ทีเ่ ราใชเ ปน พ้ืนหลังจะอยูก ับท่แี มจะเลือ่ น Scrollbar ข. ภาพพน้ื หลังจะเปนภาพเดิมตลอดแมเ ราจะเปลี่ยนเว็บเพจไปหนาอ่นื ค. การใสภ าพพื้นหลงั ทีม่ ีชอื่ วา \"fixed\" ใหกับหนาเวบ็ เพจ ง. ไมม ขี อถูก 9. การโหลดภาพโดยบราวเซอรขึ้นมาอยางรวดเร็วแบบไมชัดกอน และคอยๆ ชัดขึ้นตามลำดับเปนการใช เทคนคิ ในขอใดกับภาพ ? ก. Interlaced ข. loading ค. Transparency ง. Slicing 10. ขอใดไมถ กู ตองเกยี่ วกับภาพเคลื่อนไหวบนเวบ็ เพจ ? ก. จะใชแ ทก็ ในการแสดงเหมอื นกบั ภาพปกติ ข. ใชไดเ ฉพาะไฟลภ าพ FWS เทา นน้ั ค. นำภาพน่งิ หลายภาพมาประกอบกันเปน ภาพเคล่อื นไหวเพอ่ื แสดงบนเว็บได ง. โปรแกรม GIF Construction Set สามารถสรางภาพเคลื่อนไหวเพือ่ แสดงบนเว็บได

100 แบบทดสอบหลงั เรยี นท่ี ๘.๒ รหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั นาเว็บดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หนว ยท่ี ๘ ชื่อเรือ่ ง/ การแตง เตมิ เว็บเพจดวยกราฟก เวลา ๓ ชม. ตอนที่ 2 จงใสเคร่อื งหมาย หนาขอ ความท่ีถูกและใสเครือ่ งหมาย หนา ขอ ความทผี่ ดิ .......................1. การใชไ ฟลภาพใหญเ กนิ ไปจะทำใหการแสดงผลในเว็บเพจชา .......................2. กราฟกชนิด GIF ใชการบบี อดั ขอ มูลเพ่ือลดพืน้ ท่กี ารจดั เก็บขอ มูล .......................3. เราสามารถกำหนดระดับการบบี อัดของภาพชนิด JPEG เปน High, Medium หรอื Low ได โดยใชโ ปรแกรมตกแตง ภาพเชน Photoshop .......................4. การแทรกขอ ความกำกับภาพทำไดโดยใชแอททรบิ ิวท Ctrl .......................5. <img src=\"ช่อื ภาพ\" border=\"ความหนาของกรอบ\" />เปนรูปแบบใน XHTML .......................6. การใช Interlacing จะชว ยใหภาพถกู โหลดโดยบราวเซอรขน้ึ มาอยา งรวดเรว็ แบบไมชัดกอ น และคอ ยๆ ชัดขึน้ ตามลำดับ .......................7. การทำ Transparency คือการกำหนดสีใดสหี นึง่ ในรูปชนดิ JPEG ใหเปน สที ีไ่ มถูกนำมา แสดงบนบราวเซอร .......................8. การโหลดภาพประเภท Slicing กค็ ือภาพจะถกู โหลดเขา มาแปะบนเวบ็ เพจทีละช้ินจนครบท้ัง รูปภาพคลา ยจกิ๊ ซอว .......................9. ขอ จำกดั ของ GIF ท่ีสำคัญก็คอื สามารถใชส ีไดส งู สดุ เพียงครั้งละ 512 สเี ทานั้น .....................10. GIF และ JPEG เปน กราฟกท่เี หมาะสมในการสรา งเวบ็ เพจ

101 แบบทดสอบหลงั เรยี นท่ี ๘.๓ รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเว็บดว ยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 หนวยท่ี ๘ ช่อื เร่อื ง/ การแตงเติมเว็บเพจดว ยกราฟก เวลา ๓ ชม. ตอนที่ 3 จงตอบคำถามตอ ไปนี้ 1. จงเขยี น HTML ทีต่ รงกบั ผลลัพธดงั รูป .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 2. แอททริบวิ ท align มรี ูปแบบการจดั ตำแหนง แบบใดบา งจงอธบิ าย .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 3. จงอธิบายคำศพั ทตอไปนี้ .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. ..............................................................................................................................................................................

คำศัพท/คำนิยาม แบบประเมนิ ผลดานพ ขั้นตอน/วิ ีธการป ิฏบั ิตรหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั น การคิดรวมยอดในเ ้นือเ ื่รอง การแปลความ/ ีตความหมายหนวยที่ ๘ ช่อื เร่อื ง/ การแตงเติม การขยายความ รายการประเมนิ ความรคู วามจำ ความเขา ใจ ที่ ช่อื -สกลุ หมายเหตุ การใหค ะแนน ๑ = ปรับปรงุ , ๒ = พอใช, ๓ = ดี

การนำความรู ความเขา ใจ 102 การนำวธิ ีการไปแกไ ขปญหา การแกไ ขปญหาเฉพาะหนา พุทธพิสัย (ภาคทฤษฏี) วิเคราะหตามความสำคญั นาเวบ็ ดวยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 วิเคราะหต ามความสำพันธ มเว็บเพจดว ยกราฟก เวลา ๓ ชม. วเิ คราะหตามหลกั การปฏิบตั ิ การวางแผน/การออกแบบ การนำไปใช การวิเคราะห การสงั เคราะห การประเมนิ คา การนำสง่ิ ทเ่ี รียนรูมาผสมผสานสรางสรรคส ง่ิ ใหม รวม (30) การตดั สนิ ใจจากขอเทจ็ จริง ตัดสินใจจากเกณฑก ารยอมรบั ของสังคม

แบบประเมินผลดา นจ รหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒน หนวยท่ี ๘ ชื่อเร่ือง/ การแตง เตมิ รายการประเมนิ ลำดับที่ ชือ่ -สกลุ หมายเหตุ การใหคะแนน ๑ = ปรบั ปรุง, ๒ = พอใช, (รายละเอียดของการประเมนิ สามารถปรบั ขอ ความใหเหมาะสมกบั รา

มีวินัย 103 รับผิดชอบจิตพสิ ยั (ภาคทฤษฏ)ี ซ่ือสัตยสุจริตนาเว็บดว ยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 สามัคคีมเว็บเพจดว ยกราฟก เวลา ๓ ชม. ขยัน ประหยัด๓ = ดี จิตอาสาายวชิ า) สะอาด สุภาพ ละเวนอบายมุข รวม

แบบประเมนิ ผลคุณ รหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั น หนวยที่ ๘ ช่อื เรือ่ ง/ การแตง เติม การประเมินคุณภาพของงาน ท่ี รายชือ่ คณะทำงาน ความรับผิดชอบตอหนาที่ ขั้นตอนการทำงาน เวลา ความรวมมือในการทำงาน รวม หมายเหตุ เกณฑการใหค ะแนนการประเมนิ การทำงานเปนกลมุ เกณฑการตดั สินคณุ ภ ชวงคะแนน ระด พฤติกรรม/ผลงาน อยใู นเกณฑด ี ได ๓ คะแนน ๒๑ – ๓๐ = ดี ๑๑ – ๒๐ = พอ พฤติกรรม/ผลงาน อยูใ นเกณฑป านกลาง ได ๒ คะแนน ๐ – ๑๐ = ตอ พฤตกิ รรม/ผลงาน อยใู นเกณฑพอใช ได ๑ คะแนน พฤติกรรม/ผลงาน อยูในเกณฑป รับปรุง ได ๐ คะแนน

104 ณภาพผลงานกลุม นาเว็บดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 มเวบ็ เพจดวยกราฟก เวลา ๓ ชม. การประเมนิ การทำงานเปน กลมุ มีการมอบหมายหนาท่ี มีการวางแผน มีการชวยเหลือกันและกันในกลุม ความคิดเห็นผูอื่น ใชหลักประชาธิปไตย ผลงานเสร็จทันตามกำหนดเวลา ความถูกตองของผลงาน ความรู ความเขาใจในการทำงาน อธิบายและตอบคำถาม การจัดเก็บวัสดุ อุปกรณ เรียบรอย รวม รวมทั้งสิ้น ภาพ ความรวมมือในการทำงาน ๔ คะแนน ดบั คณุ ภาพ ทกุ คนมีสวนรว มและใหค วามรว มมอื อยา งเต็มท่ี ๓ คะแนน 80% ของกลมุ ที่มีสวนรว มและใหความรว มมืออยางเตม็ ที่ ๒ คะแนน อใช ๖0% ของกลุมทมี่ สี วนรวมและใหค วามรว มมอื อยา งเตม็ ที่ ๑ คะแนน องปรับปรงุ ๔0% ของกลุม ท่มี ีสว นรวมและใหความรว มมืออยางเตม็ ที่

105 แผนการจดั การเรยี นรู รหสั วชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพฒั นาเวบ็ ดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หนว ยท่ี ๙ ชือ่ เร่ือง/ การแบงหนา จอโดยใชเฟรม เวลา ๓ ชม. ๑. หัวขอ เรื่อง การแบง หนา จอโดยใชเ ฟรม ๒. สาระสำคัญ เฟรมเปนการแบงหนาจอของบราวเซอรออกเปนสวนยอย ทำใหเราสามารถใชพื้นที่บนหนาจอทั้งหมด บนจอไดอยางมีประสิทธิภาพ โดยแตละสวนยอยจะเปนอิสระแกกัน เมื่อเราเลื่อนขอมูลขึ้นลงที่สวนใด จะไมสงผลตอสวนอน่ื ๆ ในภาษา HTML มแี ทก็ สำหรบั สรางเฟรมในแนวตางๆ รวมถงึ แทก็ ในการปรบั แตง เฟรม ดว ย 3. จดุ ประสงคท ัว่ ไป 3.1 ดา นความรู (K) 1. มีความรูเกี่ยวกับการสรา งเฟรม 2. มีความรเู กี่ยวกบั การกำหนดลกั ษณะของกรอบเฟรม 3. มคี วามรูเกีย่ วกบั การกำหนดชองวา งระหวา งเวบ็ เพจกับเฟรมและเนอื้ หากับเวบ็ เพจ 4. มคี วามรเู กย่ี วกบั การแทรกเฟรมภายในเว็บเพจ 3.2 ดา นทักษะ (S) 1. มที ักษะเก่ยี วกบั การสรางเฟรม 2. มีทกั ษะเก่ียวกบั การกำหนดลกั ษณะของกรอบเฟรม 3. มีทกั ษะเก่ยี วกับการกำหนดชองวา งระหวา งเวบ็ เพจกบั เฟรมและเน้อื หากบั เวบ็ เพจ 4. มที กั ษะเกี่ยวกับการแทรกเฟรมภายในเว็บเพจ 3.3 เจตคติและคณุ ลักษณะทพ่ี ึงประสงค (A) 1. พฒั นาลักษณะนสิ ยั แสดงพฤตกิ รรม และมีคุณธรรม จรยิ ธรรมท่ดี ีตอการปฏบิ ตั งิ าน 4. สาระการเรยี นรู 1. การสรา งเฟรม 2. การกำหนดลักษณะของกรอบเฟรม 3. การกำหนดชองวางระหวางเว็บเพจกับเฟรมและเน้ือหากบั เวบ็ เพจ 4. การแทรกเฟรมภายในเวบ็ เพจ 5. กิจกรรมการเรียนรู (เนน ผูเ รียนเปน สำคัญ ดว ยวิธกี ารสอน เทคนคิ การสอน กระบวนการสอนท่ี หลากหลายเหมาะสมกบั รายวชิ า) (จำนวน ๓ ชม.) 5.1 ขั้นนำเขา สูบทเรียน (จำนวน 30 นาท)ี 5.1.1 ผูสอนทบทวนเนื้อหาโดยการสอบถามถึงวิชาที่ผูเรียนเคยเรียน หรือประสบการณ ท่ผี เู รียนรเู ก่ยี วกบั การแบง หนา จอโดยใชเ ฟรม 5.1.2 ผเู รียนยกตวั อยางเกีย่ วกับการแบง หนาจอโดยใชเ ฟรม 5.1.3 ผูสอนกลาวถึงการเรียนรูเฟรมเปนการแบงหนาจอของบราวเซอรออกเปนสวนยอย ทำใหเราสามารถใช พื้นที่บนหนาจอทั้งหมด บนจอไดอยางมีประสิทธิภาพ โดยแตละสวนยอยจะเปนอิสระแกกัน เมื่อเราเลื่อน ขอมูลขึ้นลงที่สวนใด จะไมสงผลตอสวนอื่นๆ ในภาษา HTML มีแท็กสำหรับสรางเฟรมในแนวตางๆ รวมถงึ แทก็ ในการปรับแตงเฟรมดว ย

106 5.2 ขั้นดำเนินการสอน (จำนวน 30 นาท)ี 5.2.2 ผสู อนยกตวั อยางคำศพั ทท เ่ี ก่ยี วขอ งกับการแบง หนา จอโดยใชเ ฟรม 5.2.3 ผเู รียนแบง กลมุ ศกึ ษาและรายงานเรอื่ งการแบง หนา จอโดยใชเ ฟรม 5.2.4 ผูเรียนศึกษาจากแหลงการเรยี นรูทผ่ี ูสอนแนะนำ เชน เอกสารประกอบการเรียน เว็บไซตทผี่ สู อนแนะนำ 5.2.5 ผูสอนสังเกตพฤติกรรมการเรียนรขู องผูเรยี นรายบุคคลและกระบวนการทำงานกลุม และอำนวยความสะดวก ใหค ำแนะนำ สนับสนนุ ทรัพยากรการเรียนรู 5.2.6 ผูสอนตรวจสอบการทำกิจกรรมตรวจสอบความเขา ใจ แลวทบทวนในสว นทผ่ี เู รียนทำ ผดิ มาก หรือตอบไมได 5.2.7 ผเู รียนรายงานผลงานกลมุ 5.2.8 ผสู อนและผเู รียนกลุมทไี่ มไ ดร ายงานประเมินผลการรายงานของเพ่ือน แจงผลการ ประเมิน และใหข อเสนอแนะตางๆ 5.3 ขน้ั ประกอบกิจกรรม (จำนวน 30 นาท)ี 5.3.1 ผูเรียนทำแบบทดสอบเพอ่ื ประเมนิ ผลหลังการเรยี นรใู นเอกสารประกอบการเรียน 5.3.2 ผเู รียนทำกิจกรรมใบงานเพือ่ ประเมินผลหลังการเรยี นรู 5.4 ขน้ั สรุป (จำนวน 30 นาท)ี 5.4.1 ตวั แทนผเู รียนแตล ะกลมุ สรุปเนื้อหาประจำหนวยการเรียน 5.4.2 ผูสอนเฉลยแบบทดสอบเพื่อประเมินผลหลังการเรียนรู สรุปคะแนนของผูเรียน แตละคน 5.4.3 ผูสอนตรวจสอบความเขาใจของผูเรียนโดยวิธีตางๆ เชน สุมสอบถามรายบุคคล และ มอบหมายงานในการศึกษาคน ควา เพ่มิ เตมิ เก่ยี วกบั การแบงหนาจอโดยใชเ ฟรม 6. สอ่ื และแหลง การเรียนรู 6.1 ส่ือ E-BOOK วชิ าการพฒั นาเว็บดว ยภาษาเอชทีเอ็มแอล 6.๒ PowerPoint 6.๓ เวบ็ ไซตประเภท e-learning ทเ่ี สรมิ การเรยี นรู เชน 6.3.1 http://www.learnsquare.com 6.3.2 http://www.thaicyberu.go.th 6.๔ Google Classroom 6.๕ Google Site 6.๖ Youtube 6.๗ Google Froms 7. การวัดและประเมินผล ๗.๑ วธิ กี ารวัดผลประเมินผล 7.1.๑ สังเกตผูเรียนมีความสนใจ เกิดความเขาใจในสาระการเรียนรู ตลอดจนแสดงความ กระตือรอื รนในการแสดงความคดิ เหน็ และสรปุ สาระการเรียนรปู ระจำหนว ย 7.1.๒ สังเกตการทำรายงานกลมุ และการนำเสนอ

107 7.1.๓ กจิ กรรมใบงานทายหนว ยการเรียนรู 7.1.๔ แบบทดสอบเพื่อประเมนิ ผลหลังการเรียนรู ๗.๒ เครอ่ื งมือในการวัดผลและประเมินผล 7.2.๑ แบบประเมินผลการปฏบิ ัติงาน ใบงาน 7.2.๒ แบบทดสอบหลงั เรยี น ๗.๓ เกณฑการวดั และประเมิน 7.3.1 แบบฝกหดั ใบงาน เกณฑผา น ๖๐ % ขึ้นไป 7.3.2 แบบทดสอบหลงั เรยี น เกณฑผ า น ๖๐ % ข้นึ ไป 7.3.3 แบบประเมนิ การทำรายงานกลมุ และการนำเสนอ เกณฑผ าน ๖๐ % ขึ้นไป 7.3.4 แบบประเมนิ คณุ ธรรม จรยิ ธรรม คา นยิ ม และคุณลกั ษณะอนั พึงประสงค คะแนน ขึ้นอยกู บั การประเมินตามสภาพจริง ๘. กิจกรรมเสนอแนะ /งานมอบหมาย (ถา มี) 8.1 กิจกรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………. 8.2 งานมอบหมาย 8.2.๑ ใบงานทายหนว ยการเรียนรู 8.2.๒ กิจกรรมงานกลมุ 8.2.๓ แบบทดสอบหลังเรียน ๙. เอกสารอางอิง /บรรณานุกรมประจำหนวย (หนังสือตำราหรือเอกสารประกอบการเรียนการสอบใน หนวยน้นั ๆ หรอื สื่อและแหลงการเรยี นรใู นกรณีคน ควาเพ่ิมเตมิ ) 9.1 สื่อ E-BOOK วชิ าการพัฒนาเวบ็ ดว ยภาษาเอชทเี อ็มแอล 9.๒ PowerPoint 9.๓ Google Classroom 9.๔ Google Site 9.๕ Youtube 9.๖ Google Froms

108 ๑๐. บนั ทกึ หลงั การจัดการเรยี นรู ๑ ผลการใชแผนการจัดการเรียนรู ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ๒ ปญหาและอุปสรรค ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………....…………….. ๓ แนวทางแกไข ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ๔ ขอ เสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ลงชอ่ื ….…………….....…………... ลงชอื่ ……..……………………. ลงชอ่ื …………………………… ( นางสาวกฤตพร ขามสาม) ( นางสาวสรยี า สมัย) (นายศกั ด์ดิ า สมิ เสมอ) ครผู สู อน หวั หนา แผนก รองผูอำนวยการฝา ยวิชาการ

109 แบบทดสอบหลังเรยี นท่ี 9.1 รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพัฒนาเว็บดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หนวยท่ี ๙ ชื่อเรอ่ื ง/ การแบงหนา จอโดยใชเฟรม เวลา ๓ ชม. ตอนท่ี ๑ จงทำเคร่ืองหมายวงกลม ในหวั ขอ ท่ถี ูกทส่ี ุดเพียงขอเดยี ว 1. ขอ ใดคอื ความหมายของเคร่ืองหมาย * ทใ่ี สเพือ่ แบง ขนาดของแถวและคอลัมนข องเฟรม? ก. พน้ื ท่ีท่เี หลอื จากสวนอน่ื ข. คร่งึ หนึง่ ของพื้นทที่ ้ังหมด ค. เตม็ พ้นื ทท่ี ั้งหมด ง. ไมมีขอใดถกู 2. ขอใดถกู ตองในการแบงเฟรมออกเปน จำนวน 4 แถว ? ก. <frameset cols=\"*,*,*,*\"> ข. <frameset rows=\"4\"> ค. <frameset cols=\"25%,30%,30%,35%\"> ง. <frameset rows=\"25%,40%,20%,*\"> 3. ขอ ใดกลาวไดถูกตอ งเกี่ยวกบั การใชคำสั่ง frameset ? ก. ในการแบง เฟรมน้นั ผลรวมท้งั หมดจะตองเทา กบั 100% ข. เฟรมแตละเฟรมจะแสดงหนา เว็บเพจเดยี วกันเสมอ ค. เมือ่ เราใชแ ถบเลอ่ื นขอ มลู ขอ มูลเฟรมท่ีอยูติดกนั จะเล่ือนไปพรอมกัน ง. แทก็ <frameset> จะใชต อทา ยแท็ก <body> 4. ขอใดคอื แท็กท่ใี ชแสดงขอ ความใหผ ูใชท ราบเมอื่ บราวเซอรร นุ เกา ไมสามารถแสดงเฟรมได ? ก. <noframe> ข. <notframe> ค. <notframes> ง. <noframes> 5. ขอใดเปนแอททรบิ วิ ทใ นการกำหนดชองวางระหวางเวบ็ เพจกบั เฟรมท้งั 4 ดาน ? ก. cellpadding ข. width และ height ค. colspan และ rowspan ง. marginwidth และ marginheight

110 6. ขอ ใดเปนการกำหนดใหเฟรมมขี นาดที่แนนอนและไมสามารถทำการปรบั ขนาดได ? ก. ใชแ อททรบิ วิ ท notresize แทรกในแทก็ <frame...> ข. ใชแอททรบิ ิวท notresize แทรกในแทก็ <frameset...> ค. ใชแอททรบิ วิ ท noresize แทรกในแท็ก <frame...> ง. ใชแอททริบิวท noresize แทรกในแท็ก <frameset...> 7. ขอใดเปนการกำหนดใหเ ฟรมไมแ สดงแถบเลอ่ื น ? ก. ใชแอททริบวิ ท scrolling=\"no\" แทรกในแท็ก <frame...> ข. ใชแ อททรบิ วิ ท scroll=\"no\" แทรกในแทก็ <frame...> ค. ใชแ อททริบวิ ท noscrolling=\"noscrolling\" แทรกในแท็ก <frameset...> ง. ใชแอททรบิ วิ ท noscrolling=\"noscrolling\" แทรกในแทก็ <frame...> 8. ขอ ใดกลาวไมถ กู ตอ งในการใชแอททริบิวท target เพื่อการแสดงผล ? ก. แทรกในแทก็ <frame...> ข. ใชใ นการกำหนดเฟรมปลายทางท่ตี องการใหห นาเว็บทีล่ ิงคไปแสดง ค. รูปแบบคอื target=\"ช่อื เฟรมปลายทาง\" ง. ไมม ีขอ ถกู 9. ขอใดเปนการใชแ อททรบิ วิ ท target กำหนดใหลงิ คเปด หนา เวบ็ ในเฟรมปจจุบนั ? ก. target=\"_top\" ข. target=\"_self\" ค. target=\"_me\" ง. target=\"_now\" 10. ขอ ใดกลาวไมถ ูกตอ งเก่ียวกบั การแทรกเฟรมภายในเว็บเพจ ? ก. ใชแ ท็ก <iframe> แทนทีแ่ ทก็ <body> ข. เราสามารถจัดตำแหนง เฟรมในหนา เวบ็ เพจไดโดยใชแ อททริบวิ ท align ค. รูปแบบแท็กคอื <iframe src=\"ชอื่ ไฟล HTML\">...</iframe> ง. แทรกแอททริบิวท width และ height ในแทก็ <iframe> เพ่อื กำหนดความกวา งและสงู ของเฟรม

111 แบบทดสอบหลังเรียนท่ี ๙.๒ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั นาเว็บดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หนวยที่ ๙ ชอ่ื เรอื่ ง/ การแบง หนา จอโดยใชเ ฟรม เวลา ๓ ชม. ตอนท่ี 2 จงใสเ ครือ่ งหมาย หนาขอความทถี่ ูกและใสเ ครื่องหมาย หนาขอ ความที่ผดิ .......................1. การใชเฟรมเปนการแบงหนาจอของบราวเซอรออกเปนสวนยอ ยทำใหเราสามารถใชพ้นื ท่ี ทง้ั หมดบนหนาจอไดอยา งมปี ระสทิ ธภิ าพ .......................2. ชือ่ แอททริบิวท columns และ rows เปนการแบงพน้ื ทต่ี ามแนวตงั้ และแนวนอน .......................3. frameborder เปน ตัวเลือกหนึ่งในการกำหนดลกั ษณะของกรอบเฟรม .......................4. border, bordercolor, frameborder, framespacing เปน แอททรบิ วิ ทท ี่กำหนดโดย Internet Explorer .......................5. แอททรบิ วิ ท marginwidth และ marginheight ไมส นับสนนุ Netscape .......................6. leftmargin เปนแอททริบิวทท่กี ำหนดชองวา งทางดานซาย สนับสนุนเฉพาะ Internet Explorer .......................7. scrolling มีคา ท่กี ำหนดได 2 คา คอื no และ yes .......................8. การปรบั ขนาดเฟรมสามารถปรบั ขนาดได โดยการคลกิ เมาสท ่กี รอบของเฟรมจะปรากฏ เคอรเซอรเ ปนสญั ลักษณลกู ศร 2 หัว เพ่ือใชเ ล่ือนปรบั ขนาด .......................9. noresize คอื แอททริบิวทท ป่ี อ งกนั ไมใ หปรับขนาดเฟรม .....................10. target=\"_blank\" เปนการเปดไฟลลงิ คน้ันในพน้ื ท่ีเฟรมของตนเอง

112 แบบทดสอบหลงั เรียนท่ี ๙.๓ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพัฒนาเว็บดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หนวยที่ ๙ ช่ือเร่อื ง/ การแบง หนา จอโดยใชเ ฟรม เวลา ๓ ชม. ตอนท่ี 3 จงตอบคำถามตอไปนี้ 1. จงเขียน HTML เพ่ือสรา งเฟรมตามรูป .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 2. จงอธบิ ายคำศัพทตอ ไปน้ี .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 3. ถาเราตอ งการใชเฟรมกบั บราวเซอรท ่ดี เู ฟรมได และดูเฟรมไมได เราตองเขียน HTML อยางไร .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. ..............................................................................................................................................................................

คำศัพท/คำนิยาม แบบประเมนิ ผลดา นพ ขั้นตอน/วิ ีธการป ิฏบั ิตรหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพฒั น การคิดรวมยอดในเ ้นือเ ื่รอง การแปลความ/ ีตความหมายหนวยที่ ๙ ชื่อเร่ือง/ การแบง ห การขยายความ รายการประเมิน ความรคู วามจำ ความเขา ใจ ที่ ชอ่ื -สกลุ หมายเหตุ การใหคะแนน ๑ = ปรับปรุง, ๒ = พอใช, ๓ = ดี

การนำความรู ความเขา ใจ 113 การนำวธิ ีการไปแกไ ขปญหา การแกไ ขปญหาเฉพาะหนา พุทธพสิ ัย (ภาคทฤษฏี) วิเคราะหตามความสำคญั นาเว็บดวยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 วิเคราะหต ามความสำพันธ หนาจอโดยใชเฟรม เวลา ๓ ชม. วเิ คราะหตามหลกั การปฏิบตั ิ การวางแผน/การออกแบบ การนำไปใช การวเิ คราะห การสงั เคราะห การประเมนิ คา การนำสง่ิ ทเ่ี รียนรูมาผสมผสานสรางสรรคส ง่ิ ใหม รวม (30) การตดั สนิ ใจจากขอเทจ็ จริง ตัดสินใจจากเกณฑก ารยอมรบั ของสังคม

แบบประเมินผลดา นจ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒน หนว ยที่ ๙ ชอ่ื เรื่อง/ การแบงห รายการประเมนิ ลำดับที่ ช่อื -สกุล หมายเหตุ การใหคะแนน ๑ = ปรับปรุง, ๒ = พอใช, (รายละเอียดของการประเมนิ สามารถปรับขอ ความใหเ หมาะสมกับรา

มีวินัย 114 รับผิดชอบจิตพสิ ัย (ภาคทฤษฏี) ซ่ือสัตยสุจริตนาเว็บดวยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 สามัคคีหนาจอโดยใชเฟรม เวลา ๓ ชม. ขยัน ประหยัด๓ = ดี จิตอาสาายวิชา) สะอาด สุภาพ ละเวนอบายมุข รวม

แบบประเมินผลคณุ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพัฒน หนวยท่ี ๙ ช่อื เรื่อง/ การแบง ห การประเมนิ คุณภาพของงาน ท่ี รายช่อื คณะทำงาน ความรับผิดชอบตอหนาที่ ขั้นตอนการทำงาน เวลา ความรวมมือในการทำงาน รวม หมายเหตุ เกณฑการใหค ะแนนการประเมินการทำงานเปนกลมุ เกณฑการตัดสนิ คณุ ภ ชวงคะแนน ระด พฤตกิ รรม/ผลงาน อยูในเกณฑด ี ได ๓ คะแนน ๒๑ – ๓๐ = ดี ๑๑ – ๒๐ = พอ พฤติกรรม/ผลงาน อยใู นเกณฑป านกลาง ได ๒ คะแนน ๐ – ๑๐ = ตอ พฤติกรรม/ผลงาน อยใู นเกณฑพ อใช ได ๑ คะแนน พฤติกรรม/ผลงาน อยูในเกณฑปรับปรุง ได ๐ คะแนน

115 ณภาพผลงานกลมุ นาเว็บดวยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หนา จอโดยใชเ ฟรม เวลา ๓ ชม. การประเมินการทำงานเปนกลมุ มีการมอบหมายหนาท่ี มีการวางแผน มีการชวยเหลือกันและกันในกลุม ความคิดเห็นผูอื่น ใชหลักประชาธิปไตย ผลงานเสร็จทันตามกำหนดเวลา ความถูกตองของผลงาน ความรู ความเขาใจในการทำงาน อธิบายและตอบคำถาม การจัดเก็บวัสดุ อุปกรณ เรียบรอย รวม รวมทั้งสิ้น ภาพ ความรวมมือในการทำงาน ๔ คะแนน ดับคุณภาพ ทุกคนมีสวนรวมและใหค วามรวมมืออยางเตม็ ท่ี ๓ คะแนน 80% ของกลุมทม่ี ีสว นรว มและใหค วามรวมมืออยางเตม็ ที่ ๒ คะแนน อใช ๖0% ของกลมุ ที่มีสวนรว มและใหความรวมมอื อยา งเตม็ ที่ ๑ คะแนน องปรบั ปรงุ ๔0% ของกลมุ ทม่ี ีสวนรวมและใหค วามรวมมืออยางเตม็ ที่

116 แผนการจดั การเรยี นรู รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเวบ็ ดว ยภาษาเอชทเี อ็มแอล ท 1 ป 2 น 3 หนวยท่ี ๑๐ ช่ือเรอื่ ง/ การสรางฟอรม เวลา ๓ ชม. ๑. หัวขอเรื่อง การสรางฟอรม ๒. สาระสำคญั ปจจบุ นั เราใชฟอรมเพือ่ ประโยชน หลายดา น เชน รายละเอียดของผูท่ีมาเยย่ี มชมเว็บ หรือรวบรวม ความสนใจตางๆ โดยอนั ดับแรกตองทำความเขา ใจกบั การทำงานรวมกันของฟอรม และ CGI กอ น ในภาษา HTML มแี ทก็ ทชี่ วยในการสรา งฟอรม และรูปแบบการเลอื กและการกรอกขอ มลู ที่ใชก ันบอยๆ 3. จดุ ประสงคเชงิ พฤติกรรม 3.1 ดานความรู (K) 1. มคี วามรูเขา ใจเก่ยี วกบั รูปแบบการทำงานของฟอรมและ CGI 2. มคี วามรเู กย่ี วกบั การสรางฟอรม 3. มีความรูเ กย่ี วกบั อุปกรณในการรับขอมลู 4. มคี วามรเู กย่ี วกับการตวั เลือกรายการ ๕. มีความรเู กี่ยวกับตวั เลือกแบบจัดกลมุ ๖. มีความรูเก่ียวกบั ตวั เลอื กรายการแบบหลายบรรทัด ๗. มคี วามรูเกย่ี วกับการจัดแบง ฟอรม 3.2 ดา นทักษะ (S) 1. มีทักษะและเขา ใจเก่ยี วกบั รูปแบบการทำงานของฟอรม และ CGI 2. มีทกั ษะเกีย่ วกับการสรา งฟอรม 3. มีทักษะเกีย่ วกบั อุปกรณในการรบั ขอมลู 4. มีทกั ษะเก่ียวกบั การตัวเลอื กรายการ ๕. มีทักษะเกยี่ วกับตัวเลอื กแบบจัดกลุม ๖. มีทกั ษะเก่ียวกับตวั เลือกรายการแบบหลายบรรทัด ๗. มที กั ษะเกย่ี วกบั การจัดแบง ฟอรม 3.3 เจตคตแิ ละคุณลักษณะทพี่ งึ ประสงค (A) 1 พฒั นาลกั ษณะนิสยั แสดงพฤตกิ รรม และมีคุณธรรม จริยธรรมทีด่ ีตอ การปฏบิ ตั ิงาน 4. สาระการเรยี นรู 1. เขา ใจรปู แบบการทำงานของฟอรมและ CGI 2. การสรางฟอรม 3. อุปกรณในการรบั ขอ มลู 4. ตวั เลือกรายการ 5. ตัวเลอื กแบบจัดกลมุ 6. ตวั เลอื กรายการแบบหลายบรรทัด 7. การจัดแบงฟอรม

117 5. กิจกรรมการเรียนรู (เนนผูเรียนเปนสำคัญ ดวยวิธีการสอน เทคนิคการสอน กระบวนการสอนท่ี หลากหลายเหมาะสมกบั รายวชิ า) (จำนวน ๓ ชม.) 5.1 ขน้ั นำเขาสบู ทเรียน (จำนวน 30 นาท)ี 5.1.1 ผูสอนทบทวนเนื้อหาโดยการสอบถามถึงวิชาที่ผูเรียนเคยเรียน หรือประสบการณ ทผ่ี เู รียนรเู กี่ยวกบั การสรา งฟอรม 5.1.2 ผูเรียนยกตวั อยางเก่ยี วกบั การสรา งฟอรม 5.1.3 ผูสอนกลาวถึงการเรียนรูการใชฟอรมเพื่อประโยชน หลายดาน เชน รายละเอียดของ ผูที่มาเยี่ยมชมเว็บ หรือรวบรวมความสนใจตางๆ โดยอันดับแรกตองทำความเขาใจกับการทำงานรวมกันของ ฟอรม และ CGI กอน ในภาษา HTML มีแท็กที่ชวยในการสรางฟอรมและรูปแบบการเลือกและการกรอก ขอ มูลท่ใี ชก ันบอ ยๆ 5.2 ข้ันดำเนินการสอน (จำนวน 30 นาท)ี 5.2.1 ผสู อนอธิบายหลักการและกฎเกณฑของหลกั การสรา งฟอรม 5.2.2 ผูสอนยกตัวอยางคำศัพททเ่ี ก่ยี วของกบั หลกั การสรา งฟอรม 5.2.3 ผเู รยี นแบงกลมุ ศึกษาและรายงานเรอ่ื งการสรางฟอรม 5.2.4 ผูเ รียนศึกษาจากแหลงการเรยี นรทู ีผ่ สู อนแนะนำ เชน เอกสารประกอบการเรียน เว็บไซตท ี่ผูส อนแนะนำ 5.2.5 ผสู อนสังเกตพฤตกิ รรมการเรยี นรูของผูเรียนรายบุคคลและกระบวนการทำงานกลมุ และอำนวยความสะดวก ใหค ำแนะนำ สนบั สนุนทรพั ยากรการเรียนรู 5.2.6 ผูส อนตรวจสอบการทำกจิ กรรมตรวจสอบความเขาใจ แลวทบทวนในสวนทผ่ี ูเ รยี นทำ ผดิ มาก หรือตอบไมไ ด 5.2.7 ผเู รียนรายงานผลงานกลมุ 5.2.8 ผสู อนและผเู รียนกลมุ ที่ไมไดรายงานประเมนิ ผลการรายงานของเพือ่ น แจงผลการ ประเมนิ และใหขอเสนอแนะตา งๆ 5.3 ขั้นประกอบกจิ กรรม (จำนวน 30 นาท)ี 5.3.1 ผูเรียนทำแบบทดสอบเพ่อื ประเมนิ ผลหลงั การเรยี นรใู นเอกสารประกอบการเรยี น 5.3.2 ผเู รยี นทำกิจกรรมใบงานเพื่อประเมนิ ผลหลงั การเรยี นรู 5.4 ขน้ั สรปุ (จำนวน 30 นาท)ี 5.4.1 ตวั แทนผเู รยี นแตล ะกลุม สรุปเนอ้ื หาประจำหนว ยการเรียน 5.4.2 ผูสอนเฉลยแบบทดสอบเพื่อประเมินผลหลังการเรียนรู สรุปคะแนนของผูเรียน แตละคน 5.4.3 ผูสอนตรวจสอบความเขาใจของผูเรียนโดยวิธีตางๆ เชน สุมสอบถามรายบุคคล และ มอบหมายงานในการศกึ ษาคนควาเพิม่ เตมิ เก่ียวกับการสรา งฟอรม 6. สื่อและแหลง การเรียนรู 6.1 สื่อ E-BOOK วิชาการพฒั นาเวบ็ ดว ยภาษาเอชทเี อม็ แอล 6.๒ PowerPoint 6.๓ เวบ็ ไซตประเภท e-learning ทีเ่ สริมการเรยี นรู เชน 6.3.1 http://www.learnsquare.com

118 6.3.2 http://www.thaicyberu.go.th 6.๔ Google Classroom 6.๕ Google Site 6.๖ Youtube 6.๗ Google Froms 7. การวัดและประเมินผล ๗.๑ วธิ ีการวัดผลประเมนิ ผล ๗.๑.๑ สังเกตผูเรยี นมคี วามสนใจ เกิดความเขา ใจในสาระการเรียนรู ตลอดจนแสดงความ กระตอื รือรน ในการแสดงความคิดเห็นและสรุปสาระการเรียนรูประจำหนว ย ๗.๑.๒ สังเกตการทำรายงานกลมุ และการนำเสนอ ๗.๑.๓ กิจกรรมใบงานทายหนว ยการเรยี นรู ๗.๑.๔ แบบทดสอบเพอื่ ประเมนิ ผลหลงั การเรยี นรู ๗.๒ เครื่องมือในการวัดผลและประเมินผล 7.2.๑ แบบประเมนิ ผลการปฏบิ ัตงิ าน ใบงาน 7.2.๒ แบบทดสอบหลังเรยี น ๗.๓ เกณฑก ารวดั และประเมิน 7.3.1 แบบฝก หดั ใบงาน เกณฑผ า น ๖๐ % ขน้ึ ไป 7.3.2 แบบทดสอบหลังเรยี น เกณฑผ าน ๖๐ % ขน้ึ ไป 7.3.3 แบบประเมินการทำรายงานกลุมและการนำเสนอ เกณฑผาน ๖๐ % ข้นึ ไป 7.3.4 แบบประเมินคณุ ธรรม จริยธรรม คา นิยม และคณุ ลกั ษณะอนั พงึ ประสงค คะแนน ขน้ึ อยกู บั การประเมินตามสภาพจริง ๘. กิจกรรมเสนอแนะ /งานมอบหมาย (ถา ม)ี 8.1 กจิ กรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………. 8.2 งานมอบหมาย 8.2.๑ ใบงานทา ยหนวยการเรียนรู 8.2.๒ กิจกรรมงานกลมุ 8.2.๓ แบบทดสอบหลังเรยี น ๙. เอกสารอางอิง /บรรณานุกรมประจำหนวย (หนังสือตำราหรือเอกสารประกอบการเรียนการสอบใน หนว ยนัน้ ๆ หรือส่ือและแหลงการเรยี นรูในกรณีคนควาเพิม่ เติม) 9.1 สอ่ื E-BOOK วชิ าการพฒั นาเวบ็ ดวยภาษาเอชทีเอ็มแอล 9.๒ PowerPoint 9.๓ Google Classroom 9.๔ Google Site 9.๕ Youtube 9.๖ Google Froms