แผนการจัดการเรียนรู การออกแบบและพัฒนาเว็บไซต์ (รหัสวชิ า 3901-2006) หลกั สตู รประกาศนียบัตรวชิ าชพี ช้ันสูง พทุ ธศกั ราช 2557 นายกติ ติก์ าญจน์ ปฏพิ ันธ์ วิทยฐานะ ครูชานาญการพิเศษ สาขาวชิ าเทคโนโลยีสารสนเทศ วิทยาลยั อาชีวศึกษาขอนแก่น สานกั งานคณะกรรมการการอาชวี ศึกษา กระทรวงศึกษาธิการ
ก คำนำ แผนการจัดการเรียนรู้ในรายวิชา กำรออกแบบและพัฒนำเว็บไซต์ ตามหลักสูตร ประกาศนียบัตรวิชาชีพชั้นสูง พุทธศักราช 2557 คณะวิชาเทคโนโลยีสารสนเทศและการส่ือสาร สาขาวิชาเทคโนโลยีสารสนเทศ สานักงานคณะกรรมการการอาชีวศึกษา เป็นแผนการจัดการเรียนรู้ ที่ยึดหลักที่สาคัญคือ หลักการอาชีวศึกษา หลักสูตร และหลักการจัดการเรียนรู้ เพื่อเป็นแนวทางให้ อาจารย์ผู้สอน จัดกระบวนการเรียนรู้ การประเมินผลตามสภาพจริง (Authentic Assessment) การ เรียบเรียงเน้อื หา ตรงตามจดุ ประสงค์รายวิชา มาตรฐานรายวชิ า และคาอธิบายรายวชิ า มุ่งให้ผู้เรียน แสวงหาความรู้จากแหล่งความรู้ท่ีหลากหลาย สร้างองค์ความรใู้ หม่ ๆ มีความคิดเชิงสร้างสรรค์ เป็น คนดีท้งั กาย วาจา ใจ มคี ณุ ธรรม จริยธรรม และจรรยาบรรณวิชาชีพ เพอื่ ใหเ้ ป็นกาลังคนด้านดิจิทัลท่ี มีคุณภาพของประเทศไทย ขอขอบคุณ..... คณะผู้บริหาร และบุคลากรในวิทยาอาชีวศึกษาขอนแก่น ท่ีมองเห็นคุณค่าและความสาคัญ ของแผนการจัดการเรียนรู้ในรายวิชาการออกแบบและพฒั นาเว็บไซต์ ผู้เรียนและ ผู้สนใจทุกท่าน ท่ีเป็นผู้เก็บเก่ียวและเรียนรู้หลักการจาก แผนฯเล่มน้ี คณาจารย์ทุกท่าน ท่ีเป็นต้นแบบทางความคิดดี ๆ และประพฤติตนเป็นแบบอย่างท่ีดี พ่ี ๆ เพ่ือน ๆ น้อง ๆ รวมทั้ง ภรรยา ลูก ๆ และทุกคนท่มี ีส่วนร่วมให้แผนการจัดการเรียนรู้ เล่มนี้สาเร็จลงได้ด้วยดี ท่ีสาคัญที่สุดในชีวิตคือ คุณพ่อเหรียญ-คุณแม่แดง ปฏิพันธ์ ที่เป็นต้นแบบ แหง่ พลงั ความคิดดี ๆ เปน็ แบบอย่างที่ดี รวมทั้งคาสอนดี ๆ หลอ่ หลอมให้ผมมีคุณภาพชีวติ ท่ีดี ทาให้ ไดม้ ีโอกาสเรียนรแู้ ละสรา้ งสรรค์สิ่งดี ๆ ให้กับเยาวชน สงั คม และประเทศชาติ ผู้เขียนหวังเป็นอย่างย่ิงว่าแผนการจัดการเรียนรู้รายวิชาการออกแบบและพัฒนาเว็บไซต์ เลม่ นี้จะเปน็ ประโยชน์ต่อผู้เรียนและผสู้ นใจศึกษาค้นควา้ ดว้ ยตนเองเปน็ อยา่ งย่งิ กิตติ์กาญจน์ ปฏิพนั ธ์ วทิ ยฐานะ ครชู านาญการพิเศษ
ข สำรบญั หนา้ คานา ก สารบญั ข ลกั ษณะรายวิชา (จดุ ประสงคร์ ายวชิ า มาตรฐานรายวิชา คาอธบิ ายรายวชิ า) ค ตารางวเิ คราะห์หลักสูตร ฆ โครงการสอนตลอดภาคเรยี น ง เกณฑ์การวดั และประเมนิ ผลการเรียนรู้ จ แผนการจัดการเรยี นรู้ หนว่ ยท่ี 1 ความรพู้ น้ื ฐานเก่ียวกบั เวบ็ ไซต์และอนิ เทอร์เน็ต 1 หน่วยที่ 2 หลกั การออกแบบและพฒั นาเว็บไซต์ 6 หน่วยท่ี 3 การออกแบบและการสร้างเวบ็ ไซต์ 11 หน่วยท่ี 4 การออกแบบกราฟิกในงานเว็บไซต์ 16 หน่วยที่ 5 การติดตั้งและการใช้งาน Dreamweaver 21 หนว่ ยที่ 6 การสร้างตาราง ฟอร์ม เฟรม และการกาหนดลิงค์ 26 หน่วยท่ี 7 การจัดการเลเยอร์และตารางใช้งาน 31 หนว่ ยที่ 8 มัลติมเี ดียและเวบ็ ไดนามคิ 36 หน่วยท่ี 9 การอับ-โหลดและโปรโมทเว็บไซต์ 41 บรรณานกุ รม 45 ภาคผนวก - บันทกึ ข้อความการพฒั นาหลักสูตรรว่ มกับสถานประกอบการ - ผลการระดมความคดิ พฒั นาหลกั สูตรรว่ มกบั สถานประกอบการ - บนั ทึกข้อความรายงานผลการพัฒนาหลักสูตรรว่ มกับสถานประกอบการ - หนังสือแตง่ ตงั้ ผเู้ ชีย่ วชาญพิจาณาความสอดคล้อง ความตรง และความถกู ต้องของเนื้อหา - บันทึกขอ้ ความขออนญุ าตใช้แผนการจัดการเรยี นรู้ - บนั ทึกขอ้ ความรายงานผลการใช้แผนการจดั การเรียนรู้ - แบบประเมนิ ผลแผนการจัดการเรยี นรู้ฯ
ค หลักสูตรประกำศนียบัตรวชิ ำชีพชนั้ สงู พุทธศกั รำช 2557 ประเภทวชิ ำเทคโนโลยสี ำรสนเทศและกำรสอื่ สำร สำขำวชิ ำเทคโนโลยีสำรสนเทศ วิชำกำรออกแบบและพัฒนำเวบ็ ไซต์ (Web Design and Development) รหัสวิชำ 3901-2006 ทฤษฏี 1 ปฏบิ ัติ 4 หนว่ ยกิต 3 จุดประสงค์รำยวิชำ 1. มีความเข้าใจหลักการออกแบบและพัฒนาเว็บ 2. สามารถออกแบบและพัฒนาเว็บ 3. มีกิจนิสัยในการทางานด้วยความประณีต รอบคอบและปลอดภัย ตระหนักถึงคุณภาพ ของงานและมีจริยธรรมในงานอาชีพ สมรรถนะรำยวิชำ 1. ออกแบบและพัฒนาเว็บด้วยโปรแกรมสาเร็จรูปเบื้องต้น 2. สร้างเว็บเพจ 3. ทดสอบการใช้และการทางานของเว็บเพจ คำอธิบำยรำยวิชำ ศึกษาและปฏิบัติหลักการออกแบบและพัฒนาเว็บไซต์ แนวคิดและรูปแบบของเว็บไซต์ แบบต่าง ๆ การวิเคราะห์และการออกแบบเว็บไซต์ การกาหนดความต้องการ การรวบรวมข้อมูล ท่ีเก่ียวข้อง การเลือกใช้สื่อในรูปแบบต่าง ๆ ที่เหมาะสม การกาหนดการเชื่อมโยง ข้ันตอนการ สร้างเว็บไซต์ การเลือกและติดตั้งโปรแกรมที่เก่ียวข้อง การสร้าง Table , Form และ Frame, การกาหนด Link , การใช้งานภาพกราฟิก การจัดการ Layers และ Table , การใช้งานสื่อ รูปแบบต่าง ๆ การสร้าง Dynamic web page
ง ตำรำงวเิ ครำะหห์ ลกั สตู ร หลกั สูตรประกำศนียบตั รวิชำชีพชนั้ สงู พทุ ธศกั รำช 2557 ประเภทวชิ ำเทคโนโลยสี ำรสนเทศและกำรสือ่ สำร สำขำวชิ ำเทคโนโลยสี ำรสนเทศ วชิ ำกำรออกแบบและพฒั นำเวบ็ ไซต์ รหสั 3901-2006 พุทธพสิ ยั (30%) เกณฑ์การวัดด้านพฤติกรรม ช่ือหนว่ ยการเรียนรู้ ความรู้ (5%) ความเ ้ขาใจ (5%) การนาไปใช้ (5%) การ ิวเคราะ ์ห (5%) การสังเคราะ ์ห (5%) การประเมินค่า (5%) ัทกษะพิสัย (50%) ิจตพิสัย (20%) รวม (100 %) ลำ ัดบควำมสำ ัคญ จานวน ั่ชวโมง หน่วยท่ี 1 ความรพู้ ืน้ ฐานเกี่ยวกับเวบ็ ไซตแ์ ละ 1 0 0 0 0 0 3 1 5 7 4 อินเทอร์เน็ต หนว่ ยท่ี 2 หลักการออกแบบและพัฒนาเว็บไซต์ 1 1 1 1 0 1 6 3 14 3 12 หนว่ ยท่ี 3 การออกแบบและสร้างเวบ็ ไซต์ 1 1 1 2 0 1 6 2 14 3 4 หน่วยที่ 4 การออกแบบกราฟิกเพ่อื งานเวบ็ ไซต์ 1 0 0 0 0 0 3 1 5 7 10 หน่วยท่ี 5 การตดิ ตง้ั และการใชง้ าน 1 1 0 0 0 0 8 3 13 4 10 Dreamweaver หน่วยท่ี 6 การสร้างตาราง ฟอรม์ เฟรม และการ 1 1 1 0 0 2 8 3 16 1 16 กาหนดลงิ ค์ หนว่ ยท่ี 7 การจัดการเลเยอรแ์ ละตารางใชง้ าน 1 1 1 0 0 1 8 3 15 2 12 หน่วยที่ 8 ส่ือมลั ตมิ เี ดีย และเวบ็ ไดนามิค 1 0 1 1 0 1 5 3 12 5 12 หนว่ ยท่ี 9 การอบั โหลด และโปรโมทเวบ็ ไซต์ 0 1 0 0 0 1 3 1 6 6 5 สอบปลายภาค 5 รวม 8 6 5 4 0 7 50 20 100 90 ลำดบั ควำมสำคัญ 356784 1 2 อ้างอิง : ทฤษฎกี ารเรียนรู้ เบนจามิน บลมู และคณะ ได้กาหนดการวดั การจดั การเรียนร้อู อกเป็น 3 ดา้ น คือ 1. ดา้ นพุทธพิ สิ ัย (Cognitive Domain) 2. ดา้ นทักษะพสิ ัย (Psychomotor Domain) 3. ดา้ นเจตพิสัย (Affective Domain) หน่วยกำรเรยี นรู้
จ วิชำกำรออกแบบและพฒั นำเวบ็ ไซต์ (Web Design and Development) รหัสวชิ า 3901-2006 ทฤษฏี 1 ปฏิบตั ิ 4 หนว่ ยกิต 3 หน่วยกิต หนว่ ยที่ ชื่อหนว่ ยกำรเรยี นรู้ จำนวน สปั ดำหท์ ่ี ชวั่ โมง 1 ความรพู้ ้ืนฐานเก่ยี วกับเวบ็ ไซตแ์ ละอินเทอร์เนต็ 41 2 หลกั การออกแบบและพฒั นาเว็บไซต์ 3 การออกแบบและสร้างเวบ็ ไซต์ 12 2-3 4 การออกแบบกราฟิกในงานเว็บไซต์ 5 การตดิ ตั้งและการไช้งาน Dreamweaver 44 6 การสรา้ งตาราง ฟอร์ม เฟรม และการกาหนดลิงค์ 7 การจดั การเลเยอรแ์ ละตารางใชง้ าน 10 5-6 8 ส่อื มลั ติมเี ดีย และเวบ็ ไดนามคิ 9 การอบั โหลด และโปรโมทเว็บไซต์ 10 7-8 สอบปลายภาค (ประมวล/บูรณาการความรู)้ 16 9-11 12 12-14 12 15-16 5 17 5 18 รวมทัง้ ส้นิ 90
ฉ โครงกำรสอน หลักสตู รประกำศนียบตั รวิชำชีพช้ันสูง พุทธศักรำช 2557 ประเภทวชิ ำเทคโนโลยสี ำรสนเทศและกำรสอื่ สำร สำขำวิชำเทคโนโลยสี ำรสนเทศ วชิ ำกำรออกแบบและพฒั นำเวบ็ ไซต์ รหัส 3901-2006 จานวนหน่วยการจัดการเรยี นรู้ 9 หนว่ ย จานวน 90 ช่ัวโมง หน่วยที่ สปั ดาห์ เน้อื หา สาระการเรยี นรู้ จานวน ชว่ั โมง ช่วั โมงที่ 1 1 ควำมรพู้ น้ื ฐำนเกย่ี วกับเวบ็ ไซตแ์ ละอนิ เทอรเ์ นต็ - ประวัติ ความเปน็ มา และขอ้ ดีของอินเทอรเ์ น็ต 4 1-4 - คาศพั ท์ใช้ในระบบอินเทอรเ์ นต็ - การเลือกใช้บราวเซอร์เพ่อื ใชง้ านอินเทอรเ์ นต็ 12 5-16 - ผใู้ ห้บริการอเี มลฟ์ รี และ โดเมนเนม - ทกั ษะในศตวรรษที่ 21 ท่ีควรรู้ 4 17-20 - คณุ ธรรม จริยธรรม ในการใช้คอมพวิ เตอร์ 2 2-3 หลกั กำรออกแบบและพฒั นำเว็บไซต์ - ความหมาย ประเภท องค์ประกอบของเว็บไซต์ - การแบง่ พ้ืนที่ให้กับเวบ็ เพจ - หลักการออกแบบและพฒั นาเว็บไซต์ - มาตรฐานในการออกแบบเวบ็ ไซต์ - รปู แบบของเวบ็ ไซต์ - การวิเคราะห์และการออกแบบเว็บไซต์ - แนวคดิ การออกแบบเว็บไซตเ์ ชงิ สร้างสรรค์ 3 3-4 กำรออกแบบและกำรสร้ำงเวบ็ ไซต์ - การกาหนดความต้องการ - การรวบรวมข้อมูล - การเลือกใช้สื่อในรูปแบบต่าง ๆ ท่ีเหมาะสม - การกาหนดการเชื่อมโยงภายในและภายนอก - ขั้นตอนการออกแบบและสร้างเว็บไซต์
ช หน่วยท่ี สัปดาห์ เนือ้ หา สาระการเรียนรู้ จานวน ชัว่ โมงที่ 4 5-6 ชัว่ โมง 21-30 กำรออกแบบกรำฟกิ ในงำนเว็บไซต์ 10 5 9-10 - ทฤษฏสี ีและความหมายของวรรณะสี 31-40 - อารมณ์และความหมายของสี 10 6 11-13 - การออกแบบฟอนต์เพ่ืองานเวบ็ 41-56 - การจดั องคป์ ระกอบภาพสาหรบั งานออกแบบเว็บ 16 - การติดต้งั และการใช้งาน Photoshop - การบูรณาการใช้ Photoshop สาหรับงาน ออกแบบเว็บไซต์ - การออกแบบส่วนหัวของเวบ็ - การสรา้ งตวั อักษรและภาพเคลอ่ื นไหวภาพ - แนวคดิ ในการออกแบบกราฟกิ เพ่ืองานพัฒนา เวบ็ ไซตเ์ ชงิ สร้างสรรค์ กำรติดต้งั และใชง้ ำน Dreamweaver - ความสามารถของโปรแกรม Dreamweaver - การติดตง้ั เขา้ สู่โปรแกรม Dreamweaver - พืน้ ท่ใี ช้งาน Work Area - การจดั การโฟลเดอร์สาหรับเวบ็ (Site map) - การสร้างหนา้ เว็บและโฟลเดอรอ์ ย่างงา่ ย - การกาหนดรายละเอยี ดหน้าเว็บเพ่ือใชง้ าน - การใส่ภาพและข้อความให้กบั เว็บเพ็จ - การออกแบบเลย์เอาท์ กำรสร้ำงตำรำง ฟอร์ม เฟรม และกำรกำหนดลิงค์ - การสรา้ งตารางลงบนเวบ็ เพจ - การแก้ไขและปรับคุณสมบัตขิ องตาราง - การสรา้ งฟอรม์ - การแก้ไขและปรบั คุณสมบัติของฟอร์ม - การสรา้ ง การแก้ไข และปรับคณุ สมบตั ิของเฟรม - การกาหนดลิงค์ใหก้ บั เวบ็ เพจ
ซ หน่วยท่ี สัปดาห์ เนือ้ หา สาระการเรียนรู้ จานวน 7 14 ช่วั โมง ช่ัวโมงท่ี กำรจัดกำรเลเยอรแ์ ละตำรำงกำรใช้งำน 12 57-68 - การสรา้ งเลเยอร์ - การวางองค์ประกอบให้กบั เลเยอร์ - การเลือกและเปลี่ยนคุณสมบตั ิของเลเยอร์ - การจัดการตารางการใชง้ าน 8 15-16 สอื่ มลั ตมิ ีเดียและกำรสร้ำงไดนำมคิ เว็บเพจ 12 69-80 81-85 - ความหมายและการเลือกใช้งานส่ือมลั ตมิ ีเดีย 86-90 - องคป์ ระกอบมลั ติมีเดยี - การแทรกไฟล์วดิ โี อ (MP4) - การแทรกไฟล์เพลง (MP3) - ความหมายและประเภทเว็บไดนามิค - ความรู้เก่ยี วกบั โปรแกรมพีเอชพ(ี PHP) - การบูรณาการพัฒนางานดว้ ยโปรแกรม PH 9 17-18 กำรอบั โหลด และโปรโมทเวบ็ 5 - พน้ื ท่ี Server ให้บรกิ ารฟรี - การขอพืน้ ที่ Server ให้บริการฟรี - การอบั โหลด ขอ้ มูล - การโปรโมทเว็บไซต์ - เว็บไซตท์ ผ่ี ู้แต่งเป็น Web Master - เว็บไซต์ที่ประสบความสาเรจ็ และสร้างสรรค์ 18 สอบประมวลควำมรู้ (ปลำยภำค) 5 รวมจานวนชัว่ โมง 90
ฌ เกณฑก์ ำรวัดและประเมนิ ผลกำรจดั กำรเรยี นรู้ หลกั สูตรประกำศนียบตั รวชิ ำชพี ช้นั สงู พุทธศักรำช 2557 ประเภทวิชำเทคโนโลยสี ำรสนเทศและกำรสื่อสำร สำขำวิชำเทคโนโลยสี ำรสนเทศ วชิ ำกำรออกแบบและพฒั นำเวบ็ ไซต์ รหสั 3901-2006 คะแนน 100 คะแนน จำแนกได้ดังนี้ - คะแนนคณุ ธรรม จรยิ ธรรม 20 คะแนน 10 คะแนน) (ความตรงต่อเวลาเข้าเรียน,ส่งแบบฝกึ หัด,การแตง่ กาย 10 คะแนน) 45 คะแนน (ความม่งุ มัน่ ตัง้ ใจเรยี น, การชว่ ยเหลือเพอื่ น คะแนน - คะแนนใบงานประจาหนว่ ยการเรียนรู้ (จานวน 9 หน่วย ๆ ละ 10 คะแนน เปน็ 90 แล้วหาร 2) - คะแนนสอบประมวลความรอบรู้ 35 (สอบปลายภาค) กำรตดั สนิ ผลกำรเรยี น 80-100 เกรด 4 คะแนน 75-79 เกรด 3.5 คะแนน 70-74 เกรด 3 คะแนน 65-69 เกรด 2.5 คะแนน 60-64 เกรด 2 คะแนน 55-59 เกรด 1.5 คะแนน 50-54 เกรด 1 คะแนน 0-49 เกรด 0 คะแนน
แผนการจดั การเรียนรู้ 1 ช่อื วิชา การออกแบบและพัฒนาเว็บ รหสั 3901-2005 ท-ป-น (1:4:3) ชอ่ื หน่วย ความรู้พ้ืนฐานเก่ยี วกับอนิ เทอร์เนต็ และเว็บไซต์ จานวน 4 ช่ัวโมง 1. สาระสาคัญ ความรู้พ้ืนฐานเกี่ยวกับอินเทอร์เน็ตเป็นสิ่งท่ีสาคัญในการเรียนรู้รวมท้ังศึกษาประวัติและความ เป็นมาของอินเทอร์เน็ต ข้อดีของอินเทอร์เน็ต คาศัพท์ใช้ในระบบอินเทอร์เน็ต ผู้ให้บริการอีเมล์ฟรี โดเมนเนม การเลือกใช้งานโปรแกรมบราวเซอร์ ทักษะในศตวรรษท่ี 21 คุณธรรม และจริยธรรมใน การใชค้ อมพิวเตอร์ 2. จดุ ประสงคก์ ารเรยี นรู้ จดุ ประสงค์ทั่วไป 1. เพือ่ ศึกษาประวตั ิและความเปน็ มาและขอ้ ดขี องระบบอินเทอร์เน็ต 2. เพือ่ ศึกษาความหมายของคาศพั ทท์ ่ีใช้ในระบบอินเทอร์เน็ต 3. เพอื่ ศกึ ษาและเลอื กใช้งานโปรแกรมบราวเซอร์ 4. เพือ่ ศกึ ษาทักษะในศตวรรษที่ 21 และคุณธรรม จรยิ ธรรมในการใชค้ อมพวิ เตอร์ จดุ ประสงคเ์ ชิงพฤติกรรม 1. อธิบายประวัติ ความเป็นมาและข้อดขี องระบบอินเทอร์เนต็ ได้ 2. อธิบายความหมายของคาศัพท์ทีใ่ ชใ้ นระบบอนิ เทอรเ์ น็ตได้ 3. สามารถเลอื กใช้งานโปรแกรมบราวเซอร์ ได้ 4. อธบิ ายทักษะในศตวรรษท่ี 21 และคณุ ธรรม จริยธรรมในการใช้คอมพวิ เตอรไ์ ด้ 3. สาระการเรยี นรู้ 1. ประวัติ ความเปน็ มา และข้อดขี องอนิ เทอรเ์ น็ต 2. คาศพั ทใ์ ช้ในระบบอนิ เทอร์เนต็ 3. การเลอื กใช้บราวเซอร์เพ่ือใชง้ านอนิ เทอรเ์ นต็ 4. ผใู้ หบ้ รกิ ารอีเมล์ฟรี และ โดเมนเนม 5. ทกั ษะในศตวรรษท่ี 21 ทค่ี วรรู้ 6. คุณธรรม จริยธรรม ในการใชค้ อมพิวเตอร์ * เนอื้ หาสาระท้ังหมดในเอกสารประกอบการจัดการเรยี นรู้ วชิ าการออกแบบและพัฒนาเวบ็ ไซต์ นายกิตตก์ิ าญจน์ ปฏพิ ันธ์ : วิทยาลยั อาชีวศกึ ษาขอนแก่น สานักงานคณะกรรมการการอาชวี ศกึ ษา
แผนการจดั การเรยี นรู้ 2 ชอ่ื วิชา การออกแบบและพฒั นาเว็บ รหสั 3901-2005 ท-ป-น (1:4:3) ช่อื หนว่ ย ความรพู้ ้ืนฐานเกยี่ วกับอนิ เทอร์เนต็ และเวบ็ ไซต์ จานวน 4 ช่ัวโมง 4. กระบวนการจัดการเรยี นรู้ นาเข้าสบู่ ทเรยี น 1. ผู้สอนจดั เตรยี มเอกสาร สอื่ การเรยี นการสอน 2. ผสู้ อนเช็คชอ่ื ผู้เรียน สังเกตพฤติกรรมความมีวินัย ตรงต่อเวลา และการแตง่ กาย 3. ผสู้ อนแนะนาตวั เองให้ผเู้ รียนรจู้ ัก 4. ผู้สอนช้แี จงจดุ ประสงค์รายวิชา สมรรถนะรายวชิ า และคาอธบิ ายรายวชิ า เกณฑก์ ารวัดผล และประเมินผลตลอดทงั้ ภาคเรียน 5. ผู้สอนสอดแทรกทกั ษะศตวรรษท่ี 21 เกี่ยวกับความคิดสรา้ งสรรค์/การมองโลกในแง่ดี ขณะกาลังเรียน 1. ผู้สอนอธิบายความรูเ้ กี่ยวกบั อนิ เทอร์เน็ตเบื้องต้น ประวัติและความเป็นมาของอินเทอร์เนต็ ขอ้ ดีของอินเทอรเ์ นต็ คาศัพทใ์ ช้ในระบบอนิ เทอร์เน็ต พรอ้ มใหผ้ ู้เรยี นดูเนื้อหาประกอบจากสอ่ื 2. ผู้สอนอธบิ ายการเลอื กใช้งานโปรแกรมบราวเซอร์ และโดเมนเนม ทกั ษะในศตวรรษท่ี 21 และสอดแทรก คุณธรรม จรยิ ธรรมในการใช้คอมพิวเตอร์ หลงั เรยี น 1. ใหผ้ ู้เรยี นทากิจกรรมจากใบงาน โดยการตอบคาถามจากผสู้ อน 2. ผสู้ อนสังเกตพฤติกรรมผู้เรียนดา้ นความสนใจใฝ่รู้ ความรับผิดชอบ ความมรี ะเบยี บ ละเอียด รอบคอบ ซ่อื สตั ย์ ความขยนั อดทน และความคดิ สร้างสรรค์ 5. สือ่ และแหล่งการเรยี นรู้ สอื่ สงิ่ พิมพ์ : พรพรรณ โสภาพล. (2558). การออกแบบและพัฒนาเวบ็ ไซต์. หนังสอื เมอื งไทย จากดั . หนังสอื อเิ ลก็ ทรอนิกส์ (E-Book) : เว็บไซตแ์ ละอนิ เทอรเ์ นต็ จาก www.issuu/konsangsan/internet วดิ โี อ (Youtube) : ความหมายอินเทอร์เนต็ จาก https://www.youtube.com/watch?v=Sx6hT9Ek7zI พาวเวอรพ์ อยท์ (PPT): ความหมายอินเทอรเ์ นต็ จาก www.konsangsan.com/webdesign/internet 6. การวดั และประเมนิ ผล 1. ใบงาน 2. กจิ กรรมถาม-ตอบ เพือ่ ตรวจสอบความรู้ ความเข้าใจ นายกติ ต์กิ าญจน์ ปฏิพันธ์ : วิทยาลัยอาชีวศกึ ษาขอนแก่น สานกั งานคณะกรรมการการอาชีวศกึ ษา
แผนการจัดการเรยี นรู้ 3 ชอื่ วิชา การออกแบบและพัฒนาเว็บ รหสั 3901-2005 ท-ป-น (1:4:3) ชอ่ื หนว่ ย ความรู้พน้ื ฐานเก่ยี วกบั อนิ เทอร์เน็ตและเวบ็ ไซต์ จานวน 4 ชวั่ โมง ใบงาน หน่วยการเรยี นรู้ท่ี 1 เร่ือง ความรพู้ ื้นฐานเก่ยี วกบั อนิ เทอรเ์ น็ตและเว็บไซต์ 1.ให้จับคู่ด้านซ้ายและขวาท่ีมีความสัมพันธ์กันโดยนาพยัญชนะที่อยู่ด้านหน้า (ด้านขวามือ) มาไว้ดา้ นหนา้ ของตวั เลขแตล่ ะหวั ขอ้ (ด้านซา้ ยมือ) ….… 1.Webpage ก. ทวีปท่ใี ช้อินเทอร์เน็ตมากท่ีสดุ …… 2. Mozila Firefox ข. ปรับแต่งภาษาไทยใน Explorer …… 3. Home page ค. แต่ละหน้าของเว็บไซต์ …… 4. Internet ง. ผ้ใู หบ้ รกิ ารอินเทอรเ์ นต็ รายแรกของไทย …… 5. Chrome จ. ความละเอียดของการแสดงผล …… 6. Internet Thailand ฉ. ปรบั แต่งภาษาไทยใน Fire fox ........ 7. 800 * 600 pixels ช. ใช้ติดตอ่ ส่อื สาร คน้ หาขอ้ มูล ……. 8. Content ซ. โปรแกรมใชเ้ ปดิ อนิ เทอร์เน็ต (Browser) …… 9. View ---> Encoding ฌ. โปรแกรมประเภท Open Source …… 10. Asia ญ. หน้าแรกของเวบ็ ไซต์ 2. ให้สืบค้นคานิยามของคาว่า เว็บ และ เว็บเซอร์วิส จากแหล่งความรู้บนอินเทอร์เน็ตมา อย่างน้อย 3 แหลง่ (พร้อมอ้างองิ ) จากนนั้ ใหส้ รปุ เป็นความคดิ ของนักศึกษา 3. ให้สืบค้นหาคุณธรรมจรยิ ธรรมในการใช้คอมพิวเตอรจ์ ากแหล่งความรู้บนอินเทอร์เน็ตมา อย่างน้อย 5 ข้อ (พร้อมอ้างองิ แหล่งความรู้) นายกิตติก์ าญจน์ ปฏพิ ันธ์ : วทิ ยาลัยอาชวี ศกึ ษาขอนแกน่ สานกั งานคณะกรรมการการอาชวี ศกึ ษา
แผนการจัดการเรียนรู้ 4 ชือ่ วชิ า การออกแบบและพัฒนาเวบ็ รหสั 3901-2005 ท-ป-น (1:4:3) ชอ่ื หน่วย ความรู้พื้นฐานเกย่ี วกบั อินเทอรเ์ น็ตและเวบ็ ไซต์ จานวน 4 ชว่ั โมง 7. บันทึกผลการใช้แผนการจัดการเรียนรู้ ผลการจัดการเรียนรู้ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. ปัญหาและอุปสรรค …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. แนวทางแก้ปญั หาและขอ้ เสนอแนะ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (นายกติ ตกิ์ าญจน์ ปฏิพันธ์) นายกิตติ์กาญจน์ ปฏิพันธ์ : วิทยาลัยอาชวี ศกึ ษาขอนแก่น สานกั งานคณะกรรมการการอาชวี ศึกษา
แผนการจัดการเรียนรู้ 5 ชอื่ วชิ า การออกแบบและพัฒนาเว็บ รหัส 3901-2005 ท-ป-น (1:4:3) ช่อื หนว่ ย หลักการออกแบบและพฒั นาเวบ็ ไซต์ จานวน 12 ช่ัวโมง 1. สาระสาคญั ศึกษาความหมาย ประเภท และองค์ประกอบของเว็บไซต์เพื่อเป็นองค์ความรู้พ้ืนฐาน การแบ่ง พื้นท่ีในการออกแบบให้กับเวบ็ เพจ หลักการออกแบบและพัฒนาเว็บไซต์ มาตรฐานในการออกแบบ เว็บไซต์ในแต่ละประเท แนวคิดและรูปแบบของเว็บไซต์ การวิเคราะห์และการออกแบบเว็บไซต์ แนวคดิ การออกแบบเว็บไซตเ์ ชงิ สรา้ งสรรค์ 2. จุดประสงคก์ ารเรยี นรู้ จุดประสงค์ทั่วไป 1. เพื่อศึกษาความหมาย ประเภทและองค์ประกอบทั่วไปของเวบ็ ไซต์ 2. เพอื่ ศึกษาหลักการออกแบบเวบ็ ไซต์ 3. เพอ่ื ศกึ ษามาตรฐานในการออกแบบเวบ็ ไซต์ 4. เพื่อศึกษารูปแบบ การวิเคราะห์และออกแบบเวบ็ ไซต์ 5. เพ่ือศกึ ษาแนวคิดการออกแบบเว็บไซตเ์ ชงิ สร้างสรรค์ จดุ ประสงคเ์ ชิงพฤตกิ รรม 1. อธบิ ายความหมาย ประเภทและองค์ประกอบท่วั ไปของเวบ็ ได้ 2. อธบิ ายหลักการออกแบบเว็บไซตไ์ ด้ 3. อธบิ ายมาตรฐานในการออกแบบเว็บไซต์ได้ 4. อธิบายรูปแบบ การวิเคราะห์และออกแบบเว็บไซต์ได้ 5. อธบิ ายแนวคดิ การออกแบบเวบ็ ไซต์เชิงสรา้ งสรรค์ 3. สาระการเรียนรู้ 1. ความหมาย ประเภท องค์ประกอบของเวบ็ ไซต์ 2. การแบง่ พนื้ ท่ใี ห้กับเวบ็ เพจ 3. หลักการออกแบบและพฒั นาเว็บไซต์ 4. มาตรฐานในการออกแบบเวบ็ ไซต์ 5. รปู แบบของเว็บไซต์ 6. การวเิ คราะหแ์ ละการออกแบบเว็บไซต์ 7. แนวคดิ การออกแบบเวบ็ ไซตเ์ ชงิ สรา้ งสรรค์ นายกิตตก์ิ าญจน์ ปฏิพันธ์ : วิทยาลัยอาชวี ศกึ ษาขอนแก่น สานักงานคณะกรรมการการอาชวี ศึกษา
แผนการจดั การเรยี นรู้ 6 ชอื่ วชิ า การออกแบบและพัฒนาเวบ็ รหัส 3901-2005 ท-ป-น (1:4:3) ชื่อหน่วย หลกั การออกแบบและพฒั นาเว็บไซต์ จานวน 12 ช่วั โมง * เน้อื หาสาระทั้งหมดในเอกสารประกอบการจัดการเรียนรู้ วิชาการออกแบบและพฒั นาเว็บไซต์ 4. กระบวนการจัดการเรียนรู้ นาเขา้ สบู่ ทเรยี น 1. ผ้สู อนจดั เตรยี มเอกสาร สอื่ การเรยี นการสอน 2. ผู้สอนเช็คช่ือผูเ้ รียน สังเกตพฤติกรรมความรับผิดชอบ และบุคลกิ ภาพท่ีดี 3. ผู้สอนสอดแทรกทักษะชีวิต เกย่ี วกบั การมองโลกในแง่ดี การคดิ ดี คดิ บวก ขณะกาลังเรยี น 1. ผู้สอนอธิบายความหมาย ประเภท องคป์ ระกอบของเวบ็ ไซต์ การแบง่ พืน้ ท่ีเวบ็ เพจ หลกั การออกแบบและพฒั นาเว็บไซต์ มาตรฐานในการออกแบบเว็บไซต์ พรอ้ มให้ผู้เรียนดู ภาพประกอบจากสอ่ื การสอน 2. ผู้สอนอธบิ ายรปู แบบของเว็บไซต์ การวเิ คราะห์และการออกแบบเวบ็ ไซต์ แนวคดิ การออกแบบเวบ็ ไซตเ์ ชงิ สรา้ งสรรค์ พร้อมให้ผเู้ รยี นดภู าพประกอบจากสอ่ื การสอน หลังเรยี น 1. ให้ผู้เรยี นทากิจกรรม โดยการตอบคาถามจากผู้สอน 2. ผูส้ อนสงั เกตพฤตกิ รรมผู้เรยี นดา้ นความสนใจใฝร่ ู้ ความรบั ผดิ ชอบ ความมีระเบยี บ ละเอียด รอบคอบ ซอ่ื สัตย์ ความขยนั อดทน และการมองโลกในแง่ดี 5. สือ่ และแหลง่ การเรยี นรู้ สื่อสง่ิ พมิ พ์ : พรพรรณ โสภาพล. (2558). การออกแบบและพฒั นาเว็บไซต์. หนังสอื เมอื งไทย จากัด. หนังสืออเิ ล็กทรอนิกส์ (E-Book) : หลักการออกแบบเวบ็ ไซต์ จาก www.issuu/konsangsan/webdesign วิดีโอ (Youtube) : ออกแบบเวบ็ ไซต์มอื อาชพี https://www.youtube.com/watch?v=V338XopJtjQ วิดีโอ (Youtube) : หลกั ออกแบบเว็บไซต์ท่ดี ี https://www.youtube.com/watch?v=wl7vvn5y6OQ วิดโี อ (Youtube) : หลักออกแบบเวบ็ เบอ้ื งต้น https://www.youtube.com/watch?v=D2Dlesv2K7M พาวเวอรพ์ อยท์ (PPT) : หลักการออกแบบเวบ็ ไซต์ : www.konsangsan.com/webdesign/webdesign 6. การวดั และประเมนิ ผล 1. ใบงาน 2. กจิ กรรมถาม-ตอบ เพอ่ื ตรวจสอบความรู้ ความเขา้ ใจ นายกิตตก์ิ าญจน์ ปฏพิ ันธ์ : วิทยาลยั อาชวี ศึกษาขอนแกน่ สานักงานคณะกรรมการการอาชีวศกึ ษา
แผนการจัดการเรียนรู้ 7 ชอื่ วชิ า การออกแบบและพฒั นาเว็บ รหัส 3901-2005 ท-ป-น (1:4:3) ชือ่ หน่วย หลกั การออกแบบและพฒั นาเว็บไซต์ จานวน 12 ชว่ั โมง ใบงานที่ 2 คาชี้แจง ใหน้ ักศึกษาตอบคาถามให้สมบรู ณ์ท่สี ุด 1. ใหน้ ักศึกษาบอกช่อื และประเภทของเวบ็ ไซต์มา 5 เวบ็ ไซต์ .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................... 2. ให้นกั ศกึ ษาบอกหลกั การออกแบบเว็บไซตพ์ ร้อมอธิบาย .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ................................................... 3. ให้นกั ศกึ ษาบอกแนวคดิ ในการออกแบบเว็บไซต์เชิงสรา้ งสรรค์ .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................................................................ นายกิตต์กิ าญจน์ ปฏิพันธ์ : วทิ ยาลยั อาชวี ศึกษาขอนแก่น สานักงานคณะกรรมการการอาชวี ศึกษา
แผนการจัดการเรียนรู้ 8 ชอ่ื วชิ า การออกแบบและพัฒนาเวบ็ รหัส 3901-2005 ท-ป-น (1:4:3) ชอื่ หนว่ ย หลักการออกแบบและพฒั นาเว็บไซต์ จานวน 12 ชัว่ โมง 7. บนั ทึกผลการใชแ้ ผนการจัดการเรยี นรู้ ผลการจัดการเรยี นรู้ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. ปัญหาและอุปสรรค …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. แนวทางแก้ปัญหาและข้อเสนอแนะ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (นายกติ ต์ิกาญจน์ ปฏิพันธ์) นายกิตต์ิกาญจน์ ปฏพิ นั ธ์ : วิทยาลัยอาชวี ศึกษาขอนแก่น สานักงานคณะกรรมการการอาชวี ศกึ ษา
แผนการจัดการเรยี นรู้ 9 ชอื่ วชิ า การออกแบบและพฒั นาเวบ็ รหัส 3901-2005 ท-ป-น (1:4:3) ช่อื หน่วย การออกแบบและสร้างเว็บไซต์ จานวน 4 ชว่ั โมง 1. สาระสาคัญ การออกแบบและพัฒนาเว็บไซต์ท่ีตอบโจทย์ ตรงกลุ่มเป้าหมายสาคัญท่ีสุดคือการมีขั้นตอนที่ ชัดเจน เริ่มต้นจากการเก็บความต้องการ การรวบรวมข้อมูล การออกแบบเว็บไซต์โดยเลือกใช้สื่อที่ เหมาะสม เป็นสัดส่วน และการเช่ือมโยงข้อมูลท้ังภายในและภายนอกอย่างสมบูรณ์ ถูกต้อง นาไปสู่ การเป็นเว็บไซตท์ ีด่ ี มคี ุณภาพได้ 2. จุดประสงค์การเรยี นรู้ จุดประสงคท์ ่ัวไป 1. เพื่อศึกษาการกาหนดความต้องการ การรวบรวมข้อมูล 2. เพื่อศึกษาการเลือกใช้ส่ือในรูปแบบต่าง ๆ ที่เหมาะสม 3. เพอ่ื ศึกษาการกาหนดการเชื่อมโยงภายในและภายนอก 4. เพอื่ ศึกษาขั้นตอนการออกแบบและสร้างเว็บไซต์ จุดประสงคเ์ ชิงพฤติกรรม 1. อธิบายวธิ ีการกาหนดความต้องการ การรวบรวมข้อมูล 2. อธบิ ายวิธีการเลือกใช้ส่ือในรูปแบบต่าง ๆ ที่เหมาะสมได้ 3. อธบิ ายวธิ ีการกาหนดการเชื่อมโยงภายในและภายนอก 4. อธบิ ายขั้นตอนการออกแบบและสร้างเว็บไซต์ได้ 3. สาระการเรียนรู้ 1. การกาหนดความต้องการ การรวบรวมข้อมูล 2. การเลือกใช้สื่อในรูปแบบต่าง ๆ ที่เหมาะสม 3. การกาหนดการเชื่อมโยงภายในและภายนอก 4. ขั้นตอนการออกแบบและสร้างเว็บไซต์ * เนื้อหาสาระทั้งหมดในเอกสารประกอบการจดั การเรียนรู้ วิชาการออกแบบและพัฒนาเว็บไซต์ นายกิตต์ิกาญจน์ ปฏิพันธ์ : วิทยาลยั อาชวี ศึกษาขอนแกน่ สานกั งานคณะกรรมการการอาชีวศกึ ษา
แผนการจัดการเรยี นรู้ 10 ชอื่ วชิ า การออกแบบและพฒั นาเวบ็ รหสั 3901-2005 ท-ป-น (1:4:3) ชอื่ หนว่ ย การออกแบบและสรา้ งเว็บไซต์ จานวน 4 ช่วั โมง 4. กระบวนการจัดการเรียนรู้ นาเข้าสู่บทเรียน 1. ผู้สอนจดั เตรยี มเอกสาร สื่อการเรยี นการสอน 2. ผสู้ อนเช็คชอื่ ผู้เรยี น สังเกตพฤตกิ รรมความรบั ผดิ ชอบ และบุคลกิ ภาพ 3. ผ้สู อนสอดแทรกทกั ษะชวี ติ เก่ยี วกบั การคิดไตร่ตรอง การคดิ อยา่ งเปน็ ระบบ ขณะกาลังเรยี น 1. ผู้สอนอธิบายการกาหนดความต้องการ การรวบรวมข้อมูล การเลือกใช้สื่อใน รูปแบบต่าง ๆ ที่เหมาะสม 2. ผ้สู อนอธบิ ายการกาหนดการเชื่อมโยงข้อมูลทั้งภายในและภายนอก ขั้นตอนการ ออกแบบและสร้างเว็บไซต์พรอ้ มให้ผเู้ รียนศึกษาจากส่อื ประกอบการเรยี นรู้ทง้ั สือ่ สิ่งพมิ พ์ และสอ่ื ดจิ ทิ ัล หลังเรยี น 1. ใหผ้ ้เู รียนทากิจกรรมใบงาน 2. ผูส้ อนสังเกตพฤติกรรมผู้เรยี นด้านความสนใจใฝร่ ู้ ความรับผิดชอบ ความมีระเบยี บ ละเอยี ด รอบคอบ การคิดไตรต่ รองและคดิ อย่างเป็นระบบ 5. สื่อและแหลง่ การเรียนรู้ ส่ือสิง่ พิมพ์ : พรพรรณ โสภาพล. (2558). การออกแบบและพัฒนาเวบ็ ไซต์. หนังสอื เมอื งไทย จากัด. หนงั สอื อิเลก็ ทรอนิกส์ (E-Book) : หลกั การออกแบบเวบ็ ไซต์ www.issuu/konsangsan/stepwebdesign วดิ โี อ (Youtube) : ขน้ั ตอนการสรา้ งเว็บไซต์ https://www.youtube.com/watch?v=qtx6BhVNPho วดิ ีโอ (Youtube) : เริม่ ตน้ สรา้ งเวบ็ ไซต์ https://www.youtube.com/watch?v=E9ql87GVpRA พาวเวอร์พอยท์ (PPT) : การออกแบบเวบ็ ไซต์ : www.konsangsan.com/webdesign/stepwebdesign 6. การวัดและประเมินผล 1. ใบงาน 2. กิจกรรมถาม-ตอบ เพอื่ ตรวจสอบความรู้ ความเข้าใจ นายกิตติก์ าญจน์ ปฏิพนั ธ์ : วิทยาลยั อาชวี ศึกษาขอนแกน่ สานกั งานคณะกรรมการการอาชีวศึกษา
แผนการจัดการเรียนรู้ 11 ชอ่ื วิชา การออกแบบและพัฒนาเวบ็ รหสั 3901-2005 ท-ป-น (1:4:3) ชือ่ หนว่ ย การออกแบบและสร้างเวบ็ ไซต์ จานวน 4 ช่วั โมง ใบงานท่ี 2 คาชี้แจง ใหน้ ักศกึ ษาตอบคาถามให้สมบูรณ์ทสี่ ุด 1. ให้นักศกึ ษาบอกข้ันตอนการเชอื่ มโยงเวบ็ ขอ้ มลู ภายในและภายนอก พรอ้ มอธิบาย .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................... 2. ให้นกั ศกึ ษาบอกขนั้ ตอนการออกแบบเว็บไซตพ์ ร้อมอธิบาย .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ................................................... 3. ใหน้ ักศกึ ษาบอกหลกั ในการคดิ ไตรต่ รองและคิดอย่างเปน็ ระบบ .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................................................................ นายกิตต์ิกาญจน์ ปฏิพันธ์ : วิทยาลัยอาชวี ศกึ ษาขอนแก่น สานักงานคณะกรรมการการอาชีวศึกษา
แผนการจัดการเรียนรู้ 12 ชอื่ วิชา การออกแบบและพฒั นาเว็บ รหสั 3901-2005 ท-ป-น (1:4:3) ช่ือหนว่ ย การออกแบบและสรา้ งเว็บไซต์ จานวน 4 ชวั่ โมง 7. บันทกึ ผลการใช้แผนการจดั การเรียนรู้ ผลการจัดการเรยี นรู้ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. ปญั หาและอปุ สรรค …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. แนวทางแก้ปญั หาและขอ้ เสนอแนะ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (นายกิตตก์ิ าญจน์ ปฏิพันธ์) นายกิตต์กิ าญจน์ ปฏิพนั ธ์ : วทิ ยาลยั อาชวี ศกึ ษาขอนแก่น สานกั งานคณะกรรมการการอาชีวศกึ ษา
แผนการจัดการเรยี นรู้ 13 ชอ่ื วิชา การออกแบบและพัฒนาเวบ็ รหสั 3901-2005 ท-ป-น (1:4:3) ช่ือหน่วย การออกแบบกราฟิกในงานเวบ็ ไซต์ จานวน 10 ช่ัวโมง 1. สาระสาคญั การออกแบบงานกราฟิกเพ่ือนามาใช้ในการพัฒนาเว็บไซต์นั้น นับว่าเป็นสิ่งที่สาคัญอย่างย่ิง เพราะจะส่งเสรมิ ให้เวบ็ ไซต์ดูสวยงามและน่าสนใจ อีกทั้งยงั ดงึ ดูดความสนใจของผู้ชมเว็บไซต์ทมี่ คี วาม โดดเด่น มีสไตล์ มีดีไซน์ เนื้อหาในหน่วยการเรียนรู้น้ีเป็นหลักการด้านคอมพิวเตอร์กราฟิก การ ออกแบบฟอนต์เพ่ืองานเว็บไซต์ การจัดองค์ประกอบภาพสาหรับเว็บไซต์ การออกแบบส่วนหัวเว็บ เพจ การสร้างตัวอกั ษร และแนวคดิ ในการออกแบบกราฟิกเพื่องานพฒั นาเว็บไซต์เชงิ สรา้ งสรรค์ 2. จุดประสงคก์ ารเรียนรู้ จดุ ประสงค์ทั่วไป 1. เพือ่ ศกึ ษาทฤษฏีสแี ละวรรณะสี 2. เพื่อศกึ ษาอารมณแ์ ละความหมายของสี 3. เพอื่ ศึกษาการออกแบบฟอนต์เพือ่ งานเว็บ 4. เพื่อศกึ ษาการจัดองค์ประกอบของภาพสาหรบั งานออกแบบเว็บไซต์ 5. เพอื่ ศึกษาการตดิ ตัง้ และการใช้งาน Photoshop 6. เพื่อศึกษาการบูรณาการใช้ Photoshop สาหรับงานออกแบบเว็บไซต์ จุดประสงคเ์ ชิงพฤติกรรม 1. อธบิ ายทฤษฏีสี อารมณ์และความหมายของวรรณะสี 2. อธบิ ายการออกแบบฟอนต์เพ่ืองานเวบ็ 3. อธบิ ายการจัดองคป์ ระกอบของภาพสาหรบั งานออกแบบเว็บได้ 4. สามารถติดตง้ั และใชง้ าน Photoshop เพื่อการออกแบบเวบ็ ไซตไ์ ด้ 5. สามารถบูรณาการใช้ Photoshop สาหรบั งานออกแบบเว็บไซต์ได้ 3. สาระการเรียนรู้ 1. ทฤษฏสี ีและความหมายของวรรณะสี 2. อารมณ์และความหมายของสี 3. การออกแบบฟอนต์เพ่ืองานเวบ็ 4. การจัดองค์ประกอบของภาพสาหรบั งานออกแบบเว็บ 5. การติดตั้งและการใช้งาน Photoshop 6. การบูรณาการใช้ Photoshop สาหรบั งานออกแบบเว็บไซต์ นายกิตติ์กาญจน์ ปฏพิ นั ธ์ : วิทยาลัยอาชวี ศกึ ษาขอนแกน่ สานักงานคณะกรรมการการอาชวี ศึกษา
แผนการจัดการเรยี นรู้ 14 ชอื่ วิชา การออกแบบและพฒั นาเวบ็ รหัส 3901-2005 ท-ป-น (1:4:3) ชอื่ หนว่ ย การออกแบบกราฟิกในงานเวบ็ ไซต์ จานวน 10 ชั่วโมง 7. การออกแบบส่วนหัวของเวบ็ 8. การสร้างตวั อกั ษรและภาพเคล่ือนไหวภาพ 9. แนวคิดในการออกแบบกราฟกิ เพอื่ งานพฒั นาเวบ็ ไซต์เชงิ สรา้ งสรรค์ * เน้ือหาสาระท้ังหมดในเอกสารประกอบการจัดการเรยี นรู้ วชิ าการออกแบบและพฒั นาเวบ็ ไซต์ 4. กระบวนการจัดการเรียนรู้ นาเขา้ สบู่ ทเรยี น 1. ผสู้ อนจดั เตรยี มเอกสาร สอื่ การเรยี นการสอน 2. ผูส้ อนเช็คช่อื ผูเ้ รยี น สังเกตพฤติกรรมความรับผิดชอบ และบุคลิกภาพ 3. ผสู้ อนสอดแทรกทกั ษะชีวติ เกยี่ วกบั การมองโลกในแง่ดี การคดิ ดี คดิ บวก 4. ผสู้ อนสอดแทรกทกั ษะในศตวรรษท่ี 21 ดา้ นความคดิ สรา้ งสรรค์ และ เสรมิ เน้อื หา ด้านการคดิ นอกกรอบ การคิดแตกต่าง ขณะกาลงั เรยี น 1. ผู้สอนอธบิ ายคาศพั ท์ที่เกีย่ วขอ้ งกับหลักการด้านงานกราฟิก หลักการออกแบบ กราฟิก หลกั การดา้ นความคิดสร้างสรรค์ และการนาความคดิ สร้างสรรค์มาใช้ในการออกแบบเวบ็ ไซน์ พร้อมใหผ้ เู้ รยี นดภู าพ วดิ ีโอ จากสือ่ การสอน 2. ผู้สอนอธบิ ายการบูรณาการด้านความคิดสร้างสรรค์ การคดิ นอกกรอบ การคิด แตกต่างมาบรู ณาการเพอ่ื ออกแบบเวบ็ ไซต์ พรอ้ มให้ผู้เรยี นดูภาพประกอบจากสือ่ การสอน หลงั เรียน 1. ใหผ้ ูเ้ รียนทากิจกรรม โดยการตอบคาถามจากผู้สอน และให้ทาใบงาน 2. ผสู้ อนสังเกตพฤตกิ รรมผู้เรยี นดา้ นความสนใจใฝร่ ู้ การแบง่ ปัน การกล้าคิดนอกกรอบ 5. ส่อื และแหล่งการเรียนรู้ ส่อื สง่ิ พมิ พ์ : พรพรรณ โสภาพล. (2558). การออกแบบและพัฒนาเวบ็ ไซต์. หนังสือเมืองไทย จากดั . หนงั สอื อเิ ลก็ ทรอนกิ ส์ (E-Book) : หลักการออกแบบเวบ็ ไซต์ จาก www.issuu/konsangsan/webdesign วิดโี อ (Youtube) : ออกแบบเวบ็ ไซต์มอื อาชีพ https://www.youtube.com/watch?v=V338XopJtjQ 6. การวัดและประเมนิ ผล 1. ใบงาน และ กิจกรรมถาม-ตอบ เพอ่ื ตรวจสอบความรู้ ความเขา้ ใจ นายกิตต์ิกาญจน์ ปฏิพนั ธ์ : วิทยาลัยอาชวี ศกึ ษาขอนแก่น สานักงานคณะกรรมการการอาชีวศกึ ษา
แผนการจัดการเรยี นรู้ 15 ชอื่ วชิ า การออกแบบและพัฒนาเว็บ รหัส 3901-2005 ท-ป-น (1:4:3) ชือ่ หน่วย การออกแบบกราฟิกในงานเว็บไซต์ จานวน 10 ช่ัวโมง ใบงานท่ี 4 คาช้ีแจง ใหน้ ักศกึ ษาตอบคาถามให้สมบูรณ์ทส่ี ุด 1. ใหน้ ักศึกษาบอกชอ่ื และประเภทของเวบ็ ไซต์ท่ีออกแบบสรา้ งสรรค์มา 5 เวบ็ ไซต์ .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................... 2. ใหน้ กั ศึกษาบอกหลกั การออกแบบเวบ็ ไซต์เชิงสร้างสรรค์ พรอ้ มอธบิ าย .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ................................................... 3. ให้นกั ศึกษาออกแบบหน้าเวบ็ ไซตเ์ ชงิ สรา้ งสรรค์มา 1 หนา้ เวบ็ เพจ (โดยเขียนเหตุผลในการ ออกแบบแตล่ ะจุดดว้ ย)............. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................................................... นายกติ ตก์ิ าญจน์ ปฏพิ นั ธ์ : วิทยาลยั อาชวี ศึกษาขอนแกน่ สานักงานคณะกรรมการการอาชีวศึกษา
แผนการจดั การเรยี นรู้ 16 ชอื่ วชิ า การออกแบบและพัฒนาเว็บ รหสั 3901-2005 ท-ป-น (1:4:3) ชอ่ื หน่วย การออกแบบกราฟกิ ในงานเว็บไซต์ จานวน 10 ชว่ั โมง ตัวอย่างผลงานผูเ้ รียน …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. เหตุผลในการออกแบบ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (…………………………………….) นกั ศกึ ษา นายกิตตกิ์ าญจน์ ปฏิพันธ์ : วทิ ยาลัยอาชวี ศกึ ษาขอนแก่น สานักงานคณะกรรมการการอาชีวศกึ ษา
แผนการจัดการเรียนรู้ 17 ชอ่ื วชิ า การออกแบบและพฒั นาเวบ็ รหัส 3901-2005 ท-ป-น (1:4:3) ช่ือหน่วย การออกแบบกราฟกิ ในงานเว็บไซต์ จานวน 10 ช่วั โมง ตวั อย่างผลงานผูเ้ รยี น …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. เหตุผลในการออกแบบ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (…………………………………….) นกั ศกึ ษา นายกติ ติก์ าญจน์ ปฏิพันธ์ : วิทยาลยั อาชวี ศึกษาขอนแกน่ สานกั งานคณะกรรมการการอาชีวศึกษา
แผนการจดั การเรยี นรู้ 18 ชอ่ื วิชา การออกแบบและพัฒนาเวบ็ รหสั 3901-2005 ท-ป-น (1:4:3) ชอื่ หน่วย การออกแบบกราฟิกในงานเวบ็ ไซต์ จานวน 10 ช่วั โมง 7. บนั ทึกผลการใชแ้ ผนการจัดการเรยี นรู้ ผลการจัดการเรียนรู้ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. ปัญหาและอปุ สรรค …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. แนวทางแก้ปญั หาและขอ้ เสนอแนะ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (นายกิตติก์ าญจน์ ปฏิพนั ธ์) นายกิตตก์ิ าญจน์ ปฏพิ ันธ์ : วทิ ยาลัยอาชวี ศกึ ษาขอนแกน่ สานักงานคณะกรรมการการอาชีวศกึ ษา
แผนการจดั การเรยี นรู้ 19 ชอ่ื วิชา การออกแบบและพฒั นาเว็บ รหัส 3901-2005 ท-ป-น (1:4:3) ช่อื หน่วย การตดิ ตั้ง และการใชง้ าน Dreamweaver จานวน 10 ช่ัวโมง 1. สาระสาคัญ ความรู้เก่ียวกับศักยภาพและสามารถของโปรแกรม Dreamweaver รวมทั้งการติดต้ัง การเข้าสู่โปรแกรม Dreamweaver อย่างง่าย รู้จักพื้นท่ี และการแบ่งพ้ืนที่การใช้งาน(Work Area) การจัดการโฟลเดอร์สาหรับเว็บ (Site map) การสร้างหน้าเว็บและโฟลเดอร์อย่างง่าย การกาหนด รายละเอียดหน้าเว็บเพ่ือใช้งาน การแทรกรูภาพและข้อความให้กับเว็บเพ็จ รวมท้ังการออกแบบ เลย์เอาท์อย่างยืดหยนุ่ และสะดวกในการใชง้ าน 2. จดุ ประสงคก์ ารเรยี นรู้ จุดประสงคท์ ่ัวไป 1. เพ่ือศึกษาความสามารถของโปรแกรม Dreamweaver 2. เพ่ือศกึ ษาการตดิ ตัง้ การเขา้ สู่โปรแกรม Dreamweaver 3. เพ่ือศกึ ษาพน้ื ทใ่ี ช้งาน Work Area และการจัดการโฟลเดอร์สาหรบั เว็บ (Site map) 4. เพ่อื ศึกษาการสรา้ งหน้าเว็บและโฟลเดอรอ์ ย่างงา่ ย 5. เพ่ือศึกษาการกาหนดรายละเอยี ดหนา้ เวบ็ เพอ่ื ใช้งาน การใสภ่ าพ ขอ้ ความ และเลย์เอาท์ จดุ ประสงคเ์ ชิงพฤตกิ รรม 1. อธบิ ายความสามารถของโปรแกรม Dreamweaver 2. สามารถตดิ ตงั้ และเข้าสโู่ ปรแกรม Dreamweaver 3. สามารถจดั การพน้ื ทใ่ี ช้งาน Work Area และจดั การโฟลเดอรส์ าหรับเว็บ (Site map) 4. สามารถสรา้ งหน้าเว็บและโฟลเดอร์อยา่ งง่าย 5. สามารถกาหนดรายละเอยี ดหนา้ เวบ็ เพือ่ ใชง้ าน การใสภ่ าพ ขอ้ ความ และเลย์เอาท์ได้ 3. สาระการเรยี นรู้ 1. ความสามารถของโปรแกรม Dreamweaver 2. การตดิ ตง้ั การเขา้ สู่โปรแกรม Dreamweaver พนื้ ที่ใช้งาน Work Area 3. การจัดการโฟลเดอรส์ าหรับเวบ็ (Site map) 4. การสร้างหน้าเวบ็ และโฟลเดอรแ์ ละการกาหนดรายละเอยี ดหนา้ เว็บเพอื่ ใช้งาน 5. การใสภ่ าพและขอ้ ความใหก้ ับเว็บเพ็จ 6. การออกแบบเลย์เอาท์ * เนื้อหาสาระทั้งหมดในเอกสารประกอบการจดั การเรยี นรู้ วิชาการออกแบบและพฒั นาเวบ็ ไซต์ นายกิตตกิ์ าญจน์ ปฏพิ นั ธ์ : วิทยาลัยอาชวี ศึกษาขอนแก่น สานักงานคณะกรรมการการอาชีวศึกษา
แผนการจัดการเรียนรู้ 20 ชอื่ วชิ า การออกแบบและพัฒนาเว็บ รหสั 3901-2005 ท-ป-น (1:4:3) ชอื่ หนว่ ย การตดิ ต้งั และการใชง้ าน Dreamweaver จานวน 10 ช่วั โมง 4. กระบวนการจัดการเรยี นรู้ นาเข้าสู่บทเรียน 1. ผู้สอนจดั เตรียมเอกสาร สอื่ การเรียนการสอน 2. ผู้สอนเช็คช่ือผเู้ รยี น สงั เกตพฤตกิ รรมความตง้ั ใจและมงุ่ มั่นในการทางาน 3. ผสู้ อนสอดแทรกทกั ษะชวี ติ เกีย่ วกบั ความอดทนและการคิดเปน็ ระบบ ขณะกาลังเรียน 1. ผสู้ อนอธิบายความสามารถของโปรแกรม Dreamweaver การตดิ ตงั้ เข้าส่โู ปรแกรม Dreamweaver และพาผู้เรยี นปฏบิ ัตกิ ารแบง่ พน้ื ทใ่ี ช้งาน Work Area การจัดการโฟลเดอร์สาหรบั เวบ็ (Site map) การสรา้ งหนา้ เว็บและโฟลเดอรอ์ ย่างงา่ ย 2. ผู้สอนอธบิ ายการกาหนดรายละเอียดหนา้ เว็บเพอ่ื ใชง้ าน และพาผู้เรยี นปฏบิ ัติการใส่ ภาพและข้อความให้กับเว็บเพ็จ การออกแบบเลยเ์ อาท์พรอ้ มให้ผูเ้ รียนดภู าพประกอบจากสอื่ การสอน หลงั เรียน 1. ให้ผเู้ รยี นทากิจกรรม โดยการตอบคาถามจากผู้สอน และให้ทาใบงาน 2. ผสู้ อนสังเกตพฤติกรรมผู้เรียนดา้ นความสนใจใฝ่รู้ ความอดทนและการคิดอย่างเป็นระบบ 5. สื่อและแหล่งการเรียนรู้ สือ่ สิ่งพิมพ์ : พรพรรณ โสภาพล. (2558). การออกแบบและพฒั นาเว็บไซต์. หนังสือเมอื งไทย จากดั . หนังสอื อิเลก็ ทรอนกิ ส์ (E-Book) : หลักการออกแบบเว็บไซต์ จาก www.issuu/konsangsan/setupweb วิดีโอ (Youtube) : การติดตัง้ Dreamweaver: https://www.youtube.com/watch?v=3w6RAyCQiFo วิดโี อ (Youtube) : การใช้งาน Dreamweaver : https://www.youtube.com/watch?v=dyxrQehQm7k วิดีโอ (Youtube) : การใชง้ าน Dreamweaver : https://www.youtube.com/watch?v=XTIYBiwx5zQ พาว์เวอร์พอยท์ (Powerpoint) www.konsangsan.com/webdesign/UseDreamweaver.ppt 6. การวดั และประเมนิ ผล 1. ใบงาน 2. กจิ กรรมถาม-ตอบ เพื่อตรวจสอบความรู้ ความเขา้ ใจ และดูทักษะในการออกแบบเว็บไซต์ นายกติ ตกิ์ าญจน์ ปฏพิ นั ธ์ : วิทยาลยั อาชวี ศกึ ษาขอนแกน่ สานกั งานคณะกรรมการการอาชีวศึกษา
แผนการจัดการเรยี นรู้ 21 ชอ่ื วชิ า การออกแบบและพัฒนาเว็บ รหสั 3901-2005 ท-ป-น (1:4:3) ช่อื หนว่ ย การตดิ ต้งั และการใชง้ าน Dreamweaver จานวน 10 ชว่ั โมง ใบงานท่ี 5 คาชแี้ จง ใหน้ กั ศึกษาตอบคาถามให้สมบรู ณ์ท่สี ุดและสง่ งานตามกาหนด 1. ให้นกั ศกึ ษาบอกความสามารถของโปรแกรม Dreamweaver .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ................................................................................................................................... 2. ให้นักศกึ ษาอธบิ ายขัน้ ตอนการติดตงั้ โปรแกรม Dreamweaver มาโดยสงั เขป .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................................................................................ 3. ใหน้ ักศกึ ษาอธบิ ายวิธกี ารจดั การโฟลเดอร์ใน Dreamweaver มาโดยสงั เขป .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................................................................................ 4. ให้นักศกึ ษาสร้างเว็บเพจเกีย่ วกับขอ้ มลู นกั ศกึ ษา โดยมภี าพ ข้อความ โดยออกแบบหนา้ เวบ็ เพจไดอ้ ยา่ งครบถ้วนสมบรู ณ์ และเก็บบันทกึ ข้อมลู ในโฟลเดอร์ web5 .................................................................................................................................................. ............................................................................................................................ นายกติ ติก์ าญจน์ ปฏิพันธ์ : วิทยาลัยอาชวี ศกึ ษาขอนแก่น สานกั งานคณะกรรมการการอาชวี ศึกษา
แผนการจัดการเรยี นรู้ 22 ชอ่ื วิชา การออกแบบและพัฒนาเว็บ รหสั 3901-2005 ท-ป-น (1:4:3) ชือ่ หน่วย การตดิ ตั้ง และการใชง้ าน Dreamweaver จานวน 10 ช่ัวโมง ตวั อยา่ งผลงานผู้เรยี น …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. เหตผุ ลในการออกแบบ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (…………………………………….) นกั ศึกษา นายกติ ต์กิ าญจน์ ปฏพิ ันธ์ : วทิ ยาลยั อาชวี ศึกษาขอนแกน่ สานกั งานคณะกรรมการการอาชวี ศึกษา
แผนการจัดการเรยี นรู้ 23 ชอ่ื วชิ า การออกแบบและพฒั นาเว็บ รหสั 3901-2005 ท-ป-น (1:4:3) ช่อื หน่วย การตดิ ต้ัง และการใชง้ าน Dreamweaver จานวน 10 ชว่ั โมง ตัวอย่างผลงานผเู้ รยี น …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. เหตุผลในการออกแบบ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (…………………………………….) นักศึกษา นายกติ ตก์ิ าญจน์ ปฏิพันธ์ : วทิ ยาลยั อาชวี ศึกษาขอนแก่น สานกั งานคณะกรรมการการอาชีวศึกษา
แผนการจดั การเรียนรู้ 24 ชอ่ื วิชา การออกแบบและพฒั นาเวบ็ รหัส 3901-2005 ท-ป-น (1:4:3) ชือ่ หน่วย การตดิ ตั้ง และการใชง้ าน Dreamweaver จานวน 10 ชว่ั โมง 7. บนั ทกึ ผลการใช้แผนการจัดการเรยี นรู้ ผลการจัดการเรยี นรู้ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. ปญั หาและอุปสรรค …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. แนวทางแกป้ ัญหาและขอ้ เสนอแนะ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (นายกติ ตกิ์ าญจน์ ปฏพิ นั ธ)์ นายกิตติก์ าญจน์ ปฏพิ ันธ์ : วิทยาลัยอาชวี ศึกษาขอนแกน่ สานักงานคณะกรรมการการอาชวี ศกึ ษา
แผนการจัดการเรยี นรู้ 25 ชอ่ื วิชา การออกแบบและพฒั นาเว็บ รหัส 3901-2005 ท-ป-น (1:4:3) ชอื่ หนว่ ย การสร้างตาราง ฟอรม์ เฟรม และการกาหนดลิงค์ จานวน 16 ช่ัวโมง 1. สาระสาคญั การมีความรู้ เทคนคิ วธิ ีการในการสรา้ ง แทรกตารางลงบนเว็บเพจ รวมทั้งสามารถแกไ้ ขและ กาหนดคุณสมบัติของตารางได้ จะทาให้การออกแบบเว็บไซต์มีสีสัน การมีเทคนิคและวิธีการในการ สร้างฟอรม์ สร้างเฟรม รวมทงั้ การกาหนดคุณสมบัติ แกไ้ ข และ ลบฟอรม์ และเฟรมได้ตามที่ต้องการ สามารถกาหนดลงิ ค์ทั้งภายในและภายนอกได้เปน็ อย่างดี 2. จดุ ประสงค์การเรียนรู้ จดุ ประสงคท์ ่ัวไป 1. เพื่อศกึ ษาการสรา้ งตารางลงบนเวบ็ เพจ 2. เพ่อื ศึกษาการแก้ไขและปรับคุณสมบัตขิ องตาราง 3. เพอ่ื ศกึ ษาการสร้างฟอร์มแก้ไขและปรบั คณุ สมบตั ิของฟอร์ม 4. เพือ่ ศึกษาการสร้าง การแก้ไข และปรบั คณุ สมบตั ิของเฟรม 5. เพอ่ื ศึกษาการกาหนดลงิ ค์ใหก้ ับเวบ็ เพจ จุดประสงคเ์ ชิงพฤติกรรม 1. สามารถสรา้ งตารางลงบนเวบ็ เพจ 2. สามารถแก้ไขและปรบั คุณสมบัติของตาราง 3. สามารถสร้างฟอร์มแกไ้ ขและปรบั เปลี่ยนคณุ สมบัตขิ องฟอรม์ ได้ 4. สามารถสร้าง การแก้ไข และปรับเปลยี่ นคุณสมบตั ิของเฟรม 5. สามารถการกาหนดลิงค์ใหก้ ับเวบ็ เพจได้ 3. สาระการเรยี นรู้ 1. การสร้างตารางลงบนเวบ็ เพจ 2. การแกไ้ ขและปรบั คุณสมบตั ขิ องตาราง 3. การสรา้ งฟอร์ม 4. การแกไ้ ขและปรับเปล่ียนคุณสมบัตขิ องฟอรม์ 5. การสรา้ ง การแก้ไข และปรับเปล่ียนคุณสมบัติของเฟรม 6. การกาหนดลงิ ค์ให้กับเว็บเพจ * เนอ้ื หาสาระทั้งหมดในเอกสารประกอบการจัดการเรียนรู้ วชิ าการออกแบบและพัฒนาเว็บไซต์ นายกิตต์กิ าญจน์ ปฏพิ ันธ์ : วิทยาลยั อาชวี ศกึ ษาขอนแก่น สานักงานคณะกรรมการการอาชีวศึกษา
แผนการจัดการเรียนรู้ 26 ชอ่ื วิชา การออกแบบและพฒั นาเวบ็ รหสั 3901-2005 ท-ป-น (1:4:3) ช่อื หน่วย การสร้างตาราง ฟอร์ม เฟรม และการกาหนดลิงค์ จานวน 16 ชัว่ โมง 4. กระบวนการจัดการเรียนรู้ นาเข้าสบู่ ทเรียน 1. ผู้สอนจัดเตรียมเอกสาร สอ่ื การเรยี นการสอน 2. ผู้สอนเช็คชอื่ ผเู้ รียน สังเกตพฤติกรรมความตั้งใจและมุง่ มั่นในการทางาน 3. ผสู้ อนสอดแทรกทักษะชวี ิต เกย่ี วกบั ภาวะผู้นาและมีเป้าหมายชดั เจน ขณะกาลงั เรยี น 1. ผ้สู อนอธิบาย และพาผเู้ รียนฝกึ ปฏิบัตเิ กย่ี วกบั วิธกี ารในการสรา้ ง แทรกตารางลงบน เวบ็ เพจ รวมทัง้ สามารถปฏิบัติการแก้ไขและกาหนดคุณสมบัตขิ องตารางได้ 2. ผ้สู อนอธิบาย และพาผเู้ รียนฝึกปฏบิ ัติเก่ยี วกบั วิธีการในการสรา้ งฟอร์ม สรา้ งเฟรม รวมท้งั การกาหนดคุณสมบัติ แก้ไข และ ลบฟอรม์ และเฟรมไดต้ ามทต่ี อ้ งการ สามารถกาหนดลงิ ค์ทั้ง ภายในและภายนอกได้เปน็ อย่างดี หลังเรยี น 1. ให้ผเู้ รียนทากิจกรรม โดยการตอบคาถามจากผู้สอน และให้ทาใบงาน 2. ผสู้ อนสงั เกตพฤติกรรมผู้เรยี นดา้ นความสนใจใฝร่ ู้ ภาวะผู้นาและมเี ป้าหมายชัดเจน 5. สื่อและแหลง่ การเรียนรู้ สือ่ สงิ่ พมิ พ์ : พรพรรณ โสภาพล. (2558). การออกแบบและพัฒนาเว็บไซต์. หนงั สอื เมอื งไทย จากัด. หนังสืออเิ ลก็ ทรอนิกส์ (E-Book) : หลกั การออกแบบเวบ็ ไซต์ จาก www.issuu/konsangsan/formframe วดิ ีโอ (Youtube) : การสรา้ งตาราง https://www.youtube.com/watch?v=9dO3jq3TigI วิดโี อ (Youtube) : การสรา้ งฟอร์ม https://www.youtube.com/watch?v=GCgFPnRWxYc วิดีโอ (Youtube) : การปรบั แต่งเฟรม https://www.youtube.com/watch?v=t_HXOilGi58 พาวเ์ วอร์พอยท์ (Powerpoint) www.konsangsan.com/webdesign/FormAndFrame.ppt 6. การวัดและประเมินผล 1. ใบงาน 2. กิจกรรมถาม-ตอบ เพอื่ ตรวจสอบความรู้ ความเข้าใจ การสร้างตาราง การสร้างฟอร์ม การสรา้ งเฟรม นายกิตติก์ าญจน์ ปฏพิ ันธ์ : วทิ ยาลยั อาชวี ศกึ ษาขอนแก่น สานกั งานคณะกรรมการการอาชวี ศกึ ษา
แผนการจัดการเรียนรู้ 27 ชอ่ื วิชา การออกแบบและพฒั นาเวบ็ รหัส 3901-2005 ท-ป-น (1:4:3) ชอ่ื หน่วย การสรา้ งตาราง ฟอรม์ เฟรม และการกาหนดลงิ ค์ จานวน 16 ชั่วโมง ใบงานที่ 6 คาชแี้ จง ใหน้ กั ศกึ ษาตอบคาถามให้สมบรู ณ์ทส่ี ุดและสง่ งานตามกาหนด 1. ให้นักศึกษาออกแบบและพัฒนาเว็บไซต์เก่ียวกับจังหวัดขอนแก่น โดยมีเมนูสามารถลิงค์ได้ อย่างสมบรู ณ์ ประกอบไปดว้ ย ตาราง ฟอรม์ เฟรม และเก็บบันทึกขอ้ มูลในโฟลเดอร์ web6 .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................................................................................ หลกั การในการออกแบบเว็บเพจ .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................................................................................ นายกติ ติก์ าญจน์ ปฏิพันธ์ : วิทยาลัยอาชวี ศกึ ษาขอนแก่น สานักงานคณะกรรมการการอาชีวศกึ ษา
แผนการจดั การเรยี นรู้ 28 ชอ่ื วิชา การออกแบบและพัฒนาเวบ็ รหสั 3901-2005 ท-ป-น (1:4:3) ช่ือหน่วย การสรา้ งตาราง ฟอร์ม เฟรม และการกาหนดลงิ ค์ จานวน 16 ชวั่ โมง ตวั อยา่ งผลงานผู้เรยี น …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. เหตุผลในการออกแบบ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (…………………………………….) นกั ศึกษา นายกติ ติ์กาญจน์ ปฏพิ ันธ์ : วิทยาลยั อาชวี ศึกษาขอนแก่น สานกั งานคณะกรรมการการอาชีวศกึ ษา
แผนการจัดการเรียนรู้ 29 ชอื่ วิชา การออกแบบและพัฒนาเว็บ รหัส 3901-2005 ท-ป-น (1:4:3) ช่อื หนว่ ย การสรา้ งตาราง ฟอรม์ เฟรม และการกาหนดลิงค์ จานวน 16 ชั่วโมง ตัวอย่างผลงานผู้เรียน …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. เหตผุ ลในการออกแบบ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (…………………………………….) นักศึกษา นายกิตติ์กาญจน์ ปฏิพนั ธ์ : วทิ ยาลัยอาชวี ศกึ ษาขอนแกน่ สานกั งานคณะกรรมการการอาชวี ศกึ ษา
แผนการจัดการเรียนรู้ 30 ชอื่ วชิ า การออกแบบและพัฒนาเวบ็ รหัส 3901-2005 ท-ป-น (1:4:3) ชือ่ หน่วย การสรา้ งตาราง ฟอรม์ เฟรม และการกาหนดลงิ ค์ จานวน 16 ชัว่ โมง 7. บันทกึ ผลการใชแ้ ผนการจดั การเรียนรู้ ผลการจัดการเรยี นรู้ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. ปญั หาและอุปสรรค …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. แนวทางแก้ปัญหาและขอ้ เสนอแนะ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (นายกติ ตกิ์ าญจน์ ปฏิพนั ธ์) นายกติ ตกิ์ าญจน์ ปฏพิ ันธ์ : วทิ ยาลยั อาชวี ศึกษาขอนแกน่ สานักงานคณะกรรมการการอาชวี ศึกษา
แผนการจดั การเรียนรู้ 31 ชอื่ วิชา การออกแบบและพัฒนาเวบ็ รหสั 3901-2005 ท-ป-น (1:4:3) ชอ่ื หนว่ ย การจัดการเลเยอร์ และตารางการใชง้ าน จานวน 12 ชวั่ โมง 1. สาระสาคญั การออกแบบเว็บไซต์ที่ดี จะมีความยืดหยุ่น จาเป็นต้องมีความรู้เทคนิค วิธีการในการสร้าง เลเยอร์ รวมท้ังสามารถวางองค์ประกอบให้กับเลเยอร์ เลอื กและปรับเปล่ียนคุณสมบัติของเลเยอร์ได้ มีเทคนิคและวธิ กี ารในการจัดการ แก้ไข ลบ กาหนดคุณสมบัติตารางการใช้งานไดเ้ ปน็ อยา่ งดี 2. จดุ ประสงค์การเรยี นรู้ จุดประสงคท์ ั่วไป 1. เพอ่ื ศกึ ษาการสร้างเลเยอร์ 2. เพื่อศกึ ษาการวางองคป์ ระกอบให้กบั เลเยอร์ 3. เพื่อศึกษาการเลือกและเปลย่ี นคุณสมบตั ขิ องเลเยอร์ 4. เพ่ือศึกษาการจดั การตารางการใชง้ าน จดุ ประสงคเ์ ชิงพฤติกรรม 1. สามารถสร้างเลเยอร์ 2. สามารถวางองค์ประกอบให้กบั เลเยอร์ให้กบั เวบ็ เพจไดส้ วยงาม 3. สามารถเลอื กและปรบั เปล่ียนคุณสมบัตขิ องเลเยอร์ได้ตามความเหมาะสม 4. สามารถจดั การตารางการใชง้ านได้เปน็ อยา่ งดี 3. สาระการเรยี นรู้ 1. การสรา้ งเลเยอร์ 2. การวางองคป์ ระกอบใหก้ บั เลเยอร์ 3. การเลือกประเภทของเลเยอร์ 4. การปรับเปลยี่ นคุณสมบัตขิ องเลเยอร์ 5. การจัดการตารางการใช้งาน * เน้อื หาสาระท้ังหมดในเอกสารประกอบการจัดการเรยี นรู้ วชิ าการออกแบบและพัฒนาเว็บไซต์ นายกิตตก์ิ าญจน์ ปฏิพันธ์ : วิทยาลัยอาชวี ศึกษาขอนแก่น สานกั งานคณะกรรมการการอาชีวศกึ ษา
แผนการจดั การเรยี นรู้ 32 ชอ่ื วชิ า การออกแบบและพัฒนาเวบ็ รหัส 3901-2005 ท-ป-น (1:4:3) ชอ่ื หนว่ ย การจดั การเลเยอร์ และตารางการใชง้ าน จานวน 12 ชว่ั โมง 4. กระบวนการจัดการเรียนรู้ นาเข้าสู่บทเรียน 1. ผสู้ อนจัดเตรยี มเอกสาร สอ่ื การเรียนการสอน 2. ผูส้ อนเช็คช่ือผู้เรียน สงั เกตพฤติกรรมความตง้ั ใจและการทางานเป็นทมี 3. ผู้สอนสอดแทรกทักษะศตวรรษที่ 21 เก่ยี วกบั ทกั ษะด้านความยดื หยนุ่ การปรับตัว ขณะกาลังเรยี น 1. ผู้สอนอธบิ าย และพาผู้เรียนฝึกปฏบิ ัติเกย่ี วกับ การสรา้ งเลเยอร์ การวาง องคป์ ระกอบใหก้ บั เลเยอร์ การเลือกและเปลี่ยนคุณสมบตั ิของเลเยอร์ 2. ผู้สอนอธิบาย และพาผูเ้ รียนฝึกปฏิบัตเิ กี่ยวกบั วิธกี ารในการจัดการตารางการใช้งาน รวมทัง้ การกาหนดคุณสมบตั ิ แกไ้ ข และ ลบตารางได้ตามทตี่ อ้ งการ หลังเรยี น 1. ใหผ้ ้เู รียนทากิจกรรม โดยการตอบคาถามจากผู้สอน และใหท้ าใบงาน 2. ผสู้ อนสังเกตพฤตกิ รรมผู้เรยี นด้านความยดื หยุ่น และการทางานเป็นทีม 5. สื่อและแหลง่ การเรยี นรู้ สอื่ ส่ิงพิมพ์ : พรพรรณ โสภาพล. (2558). การออกแบบและพฒั นาเว็บไซต์. หนงั สอื เมอื งไทย จากดั . หนงั สืออเิ ล็กทรอนิกส์ (E-Book) : หลกั การออกแบบเว็บไซต์ จาก www.issuu/konsangsan/layertable วดิ โี อ (Youtube) : การสร้างเลเยอร์ https://www.youtube.com/watch?v=HSWEUn_gc8M วิดีโอ (Youtube) : การแทรกเลเยอร์ https://www.youtube.com/watch?v=pQjto1WLsDU วิดโี อ (Youtube) : การจดั การตาราง https://www.youtube.com/watch?v=gUg84sU6xm4 พาว์เวอรพ์ อยท์ (Powerpoint) www.konsangsan.com/webdesign/layertable.ppt 6. การวดั และประเมนิ ผล 1. ใบงาน 2. กิจกรรมถาม-ตอบ เพอ่ื ตรวจสอบความรู้ ความเข้าใจ และดูทักษะการจัดการเลเยอร์ นายกติ ตก์ิ าญจน์ ปฏพิ นั ธ์ : วิทยาลัยอาชวี ศกึ ษาขอนแก่น สานกั งานคณะกรรมการการอาชีวศกึ ษา
แผนการจดั การเรยี นรู้ 33 ชอื่ วิชา การออกแบบและพฒั นาเว็บ รหัส 3901-2005 ท-ป-น (1:4:3) ชอื่ หนว่ ย การจัดการเลเยอร์ และตารางการใชง้ าน จานวน 12 ช่ัวโมง ใบงานท่ี 7 คาชแี้ จง ให้นกั ศึกษาพัฒนางานให้สมบรู ณท์ ี่สดุ และสง่ งานตามกาหนด 1. ให้นักศึกษาออกแบบและพัฒนาเว็บไซต์เกี่ยวกับสาขาเทคโนโลยีสารสนเทศ (IT) วิทยาลัย อาชีวศกึ ษาขอนแก่น โดยประกอบไปด้วย ตาราง และเลเยอร์ เก็บบันทึกข้อมูลในโฟลเดอร์ web7 .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................................................................................ หลักการในการออกแบบเวบ็ เพจ .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................................................................................ นายกิตต์กิ าญจน์ ปฏิพนั ธ์ : วิทยาลยั อาชวี ศึกษาขอนแกน่ สานกั งานคณะกรรมการการอาชีวศึกษา
แผนการจดั การเรยี นรู้ 34 ชอื่ วิชา การออกแบบและพฒั นาเว็บ รหัส 3901-2005 ท-ป-น (1:4:3) ชอื่ หนว่ ย การจดั การเลเยอร์ และตารางการใช้งาน จานวน 12 ชวั่ โมง ตัวอยา่ งผลงานผู้เรียน …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. เหตผุ ลในการออกแบบ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (…………………………………….) นักศึกษา นายกติ ติ์กาญจน์ ปฏพิ ันธ์ : วิทยาลยั อาชวี ศกึ ษาขอนแกน่ สานักงานคณะกรรมการการอาชวี ศกึ ษา
แผนการจัดการเรยี นรู้ 35 ชอ่ื วิชา การออกแบบและพัฒนาเวบ็ รหัส 3901-2005 ท-ป-น (1:4:3) ชอ่ื หนว่ ย การจดั การเลเยอร์ และตารางการใช้งาน จานวน 12 ชวั่ โมง 7. บนั ทึกผลการใชแ้ ผนการจดั การเรียนรู้ ผลการจัดการเรียนรู้ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. ปญั หาและอุปสรรค …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. แนวทางแก้ปญั หาและข้อเสนอแนะ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (นายกติ ตกิ์ าญจน์ ปฏพิ นั ธ์) นายกิตตกิ์ าญจน์ ปฏพิ นั ธ์ : วทิ ยาลยั อาชวี ศึกษาขอนแกน่ สานักงานคณะกรรมการการอาชีวศึกษา
แผนการจดั การเรยี นรู้ 36 ชอ่ื วชิ า การออกแบบและพัฒนาเว็บ รหสั 3901-2005 ท-ป-น (1:4:3) ชอ่ื หน่วย สือ่ มลั ตมิ ีเดีย และการสร้างเว็บไดนามิค จานวน 12 ช่วั โมง 1. สาระสาคญั ศึกษาความหมายและการเลือกใช้งานส่ือมัลติมีเดียได้อย่างเหมาะสม องค์ประกอบส่ือ มัลติมีเดียประเภทต่าง ๆการแทรกไฟล์วิดีโอ (MP4) การแทรกไฟล์เพลง (MP3) และการกาหนด คุณสมบัติให้สื่อมัลติมีเดีย ศึกษาความหมายและประเภทเว็บไดนามิค ความรู้เกี่ยวกับ โปรแกรมพีเอชพี(PHP) และการบูรณาการพฒั นางานดว้ ยโปรแกรม PHP 2. จุดประสงค์การเรยี นรู้ จุดประสงคท์ ่ัวไป 1. เพื่อศกึ ษาความหมายและการเลอื กใชง้ านสอื่ มัลตมิ เี ดีย 2. เพอ่ื ศึกษาองคป์ ระกอบมลั ติมีเดยี 3. เพ่ือศกึ ษาการแทรกไฟล์วดิ ีโอ (MP4) และการแทรกไฟล์เพลง (MP3) 4. เพื่อศึกษาความหมายและประเภทเว็บไดนามิค 5. เพอ่ื ศึกษาความรู้และการบรู ณาการพัฒนางานด้วยโปรแกรมพเี อชพี(PHP) จดุ ประสงคเ์ ชิงพฤตกิ รรม 1. อธิบายความหมายและการเลอื กใชง้ านสอ่ื มัลติมีเดีย 2. อธิบายองคป์ ระกอบมลั ติมีเดีย 3. สามารถแทรกไฟลว์ ิดีโอ (MP4) และ แทรกไฟลเ์ พลง (MP3) 4. อธิบายความหมายและประเภทเวบ็ ไดนามคิ 5. สามารถบูรณาการพัฒนางานด้วยโปรแกรมพีเอชพี(PHP) 3. สาระการเรยี นรู้ 1. ความหมายและการเลอื กใชง้ านสอื่ มัลติมีเดีย 2. องค์ประกอบมลั ติมีเดยี 3. การแทรกไฟลว์ ดิ ีโอ (MP4) 4. การแทรกไฟล์เพลง (MP3) 5. ความหมายและประเภทเว็บไดนามคิ 6. ความรู้เก่ยี วกับโปรแกรมพเี อชพ(ี PHP) 7. การบรู ณาการพฒั นางานด้วยโปรแกรม PHP * เนอ้ื หาสาระทั้งหมดในเอกสารประกอบการจัดการเรียนรู้ วชิ าการออกแบบและพัฒนาเว็บไซต์ นายกติ ตกิ์ าญจน์ ปฏพิ ันธ์ : วทิ ยาลัยอาชวี ศกึ ษาขอนแก่น สานกั งานคณะกรรมการการอาชวี ศึกษา
แผนการจดั การเรียนรู้ 37 ชอื่ วิชา การออกแบบและพัฒนาเวบ็ รหสั 3901-2005 ท-ป-น (1:4:3) ชื่อหน่วย ส่อื มลั ติมเี ดีย และการสร้างเวบ็ ไดนามคิ จานวน 12 ชั่วโมง 4. กระบวนการจัดการเรยี นรู้ นาเข้าสบู่ ทเรียน 1. ผสู้ อนจดั เตรยี มเอกสาร ส่อื การเรียนการสอน 2. ผูส้ อนเช็คชื่อผู้เรียน สงั เกตพฤตกิ รรมความเป็นผู้นาและการทางานเป็นทีม 3. ผูส้ อนสอดแทรกทักษะศตวรรษที่ 21 เกย่ี วกบั ทักษะดา้ นภาวะผนู้ า ขณะกาลงั เรยี น 1. ผู้สอนอธิบาย ความหมายและการเลือกใช้งานสื่อมัลติมีเดีย องค์ประกอบส่ือ มัลติมีเดียการแทรกไฟล์วิดีโอ (MP4) การแทรกไฟล์เพลง (MP3) และการกาหนดคุณสมบัติให้สื่อ ประเภทต่าง ๆและพาผู้เรียนฝกึ ปฏบิ ัติเก่ียวกับการแทรกไฟล์วิดีโอ (MP4) การแทรกไฟล์เพลง (MP3) และการกาหนดคุณสมบตั ใิ ห้ส่ือประเภทต่าง ๆ 2. ผู้สอนอธิบาย ความหมายและประเภทเว็บไดนามคิ ความรู้เก่ียวกับโปรแกรมพเี อชพี (PHP) และพาผู้เรียนฝกึ ปฏิบตั เิ กย่ี วกบั วิธีการบรู ณาการพฒั นางานด้วยโปรแกรม PHP หลงั เรยี น 1. ให้ผเู้ รยี นทากิจกรรม โดยการตอบคาถามจากผู้สอน และให้ทาใบงาน 2. ผสู้ อนสังเกตพฤติกรรมผู้เรยี นด้านความเป็นผนู้ า และการทางานเปน็ ทมี 5. สื่อและแหลง่ การเรียนรู้ สื่อสงิ่ พิมพ์ : พรพรรณ โสภาพล. (2558). การออกแบบและพฒั นาเว็บไซต์. หนงั สอื เมืองไทย จากดั . หนงั สืออเิ ลก็ ทรอนิกส์ (E-Book) : หลกั การออกแบบเว็บไซต์ จาก www.issuu/konsangsan/webdynamic วดิ ีโอ (Youtube) : webDynamic : https://www.youtube.com/watch?v=PGaFqFTEhvE วิดโี อ (Youtube) : PHP Dynamic web : https://www.youtube.com/watch?v=7i8izYE5tr4 วิดีโอ (Youtube) : การสร้าง webdynamic https://www.youtube.com/watch?v=0bDYK058XY8 พาว์เวอรพ์ อยท์ (Powerpoint) www.konsangsan.com/webdesign/webdynamic.ppt 6. การวัดและประเมินผล 1. ใบงาน 2. กจิ กรรมถาม-ตอบ เพอ่ื ตรวจสอบความรู้ ความเขา้ ใจ เกย่ี วกบั เวบ็ ไดนามิค นายกติ ต์กิ าญจน์ ปฏพิ ันธ์ : วิทยาลยั อาชวี ศึกษาขอนแก่น สานักงานคณะกรรมการการอาชีวศกึ ษา
แผนการจดั การเรียนรู้ 38 ชอ่ื วิชา การออกแบบและพัฒนาเวบ็ รหสั 3901-2005 ท-ป-น (1:4:3) ช่ือหนว่ ย สือ่ มลั ตมิ ีเดยี และการสร้างเวบ็ ไดนามิค จานวน 12 ช่ัวโมง ใบงานท่ี 8 คาช้แี จง ใหน้ ักศกึ ษาพัฒนางานใหส้ มบรู ณท์ ี่สุดและสง่ งานตามกาหนด 1. ให้นกั ศกึ ษาบอกความหมายและการเลือกใชง้ านสอ่ื มลั ตมิ ีเดยี ประเภทตา่ ง ๆ .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................................................................................ 2. ใหน้ ักศกึ ษาบอกความหมายและความแตกตา่ งของเวบ็ สเตติกและเวบ็ ไดนามิค .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................................................................................ 3. ใหน้ กั ศึกษาบอกศกั ยภาพและความสามารถของโปรแกรม PHP .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. .................................................................................................................................................. ............................................................................................................................ นายกติ ติ์กาญจน์ ปฏิพนั ธ์ : วทิ ยาลยั อาชวี ศกึ ษาขอนแก่น สานกั งานคณะกรรมการการอาชีวศกึ ษา
แผนการจัดการเรยี นรู้ 39 ชอื่ วิชา การออกแบบและพัฒนาเว็บ รหัส 3901-2005 ท-ป-น (1:4:3) ชอ่ื หน่วย สือ่ มัลติมเี ดีย และการสร้างเวบ็ ไดนามิค จานวน 12 ชัว่ โมง 7. บันทกึ ผลการใชแ้ ผนการจดั การเรียนรู้ ผลการจัดการเรยี นรู้ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. ปญั หาและอปุ สรรค …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. แนวทางแก้ปัญหาและข้อเสนอแนะ …………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………….. …………………………. (นายกติ ติ์กาญจน์ ปฏิพนั ธ)์ นายกิตติ์กาญจน์ ปฏิพนั ธ์ : วิทยาลยั อาชวี ศึกษาขอนแก่น สานกั งานคณะกรรมการการอาชวี ศกึ ษา
แผนการจดั การเรยี นรู้ 40 ชอ่ื วิชา การออกแบบและพฒั นาเวบ็ รหัส 3901-2005 ท-ป-น (1:4:3) ชอ่ื หนว่ ย การอบั โหลด และโปรโมทเว็บไซต์ จานวน 5 ชว่ั โมง 1. สาระสาคญั การออกแบบและพัฒนาเว็บไซต์ให้ประสบความสาเร็จสูง ควรลองศึกษาพื้นท่ี Server ท่ีให้บริการฟรี การขอพื้นท่ี Server ที่ให้บริการฟรี และการอับ-โหลด ข้อมูลขึ้นบนโฮสติ้งฟรี นอกจากการออกแบบและพัฒนาเว็บแลว้ สิ่งท่ีจะส่งเสริมและสนับสนุนให้ประสบความสาเร็จสูงคือ การโปรโมทเว็บไซตเ์ ว็บไซต์ดว้ ยเทคนิคและวิธกี ารตา่ ง ๆ รวมทั้งยกตวั อย่างเวบ็ ไซตท์ ี่ผู้แต่งเปน็ Web Master และเวบ็ ไซต์ทป่ี ระสบความสาเร็จและสร้างสรรค์ 2. จุดประสงคก์ ารเรยี นรู้ จดุ ประสงค์ทั่วไป 1. เพอ่ื ศึกษาความรู้เก่ยี วกบั พ้นื ที่ Server ให้บรกิ ารฟรี 2. เพอื่ ศกึ ษาการขอพืน้ ท่ี Server ใหบ้ ริการฟรี 3. เพ่อื ศกึ ษาการอับ-โหลด ข้อมลู ขนึ้ บนโฮสตงิ้ ได้ 4. เพอ่ื ศึกษาวิธีการโปรโมทเวบ็ ไซต์ 5. เพื่อศึกษาเวบ็ ไซตท์ ี่ประสบความสาเรจ็ และสรา้ งสรรค์ จุดประสงคเ์ ชิงพฤตกิ รรม 1. อธิบายความรู้เก่ียวกับพน้ื ท่ี Server ใหบ้ ริการฟรี 2. อธิบายการขอพื้นที่ Server ให้บรกิ ารฟรี 3. สามารถอับ-โหลด ขอ้ มูล ข้ึนบนโฮสตงิ้ ได้ 4. อธิบายวิธีการโปรโมทเวบ็ ไซต์ 5. อธบิ ายเว็บไซตท์ ีป่ ระสบความสาเร็จและสร้างสรรค์ 3. สาระการเรยี นรู้ 1. พ้นื ท่ี Server ให้บรกิ ารฟรี 2. การขอพน้ื ท่ี Server ให้บรกิ ารฟรี 3. การอับ-โหลด ข้อมูล 4. การโปรโมทเวบ็ ไซต์ 5. เวบ็ ไซต์ที่ผแู้ ต่งเปน็ Web Master และ เวบ็ ไซตท์ ี่ประสบความสาเร็จและสร้างสรรค์ * เนือ้ หาสาระท้ังหมดในเอกสารประกอบการจดั การเรยี นรู้ วิชาการออกแบบและพัฒนาเว็บไซต์ นายกิตต์ิกาญจน์ ปฏพิ นั ธ์ : วิทยาลยั อาชวี ศึกษาขอนแกน่ สานกั งานคณะกรรมการการอาชวี ศกึ ษา
Search
