วิชาการสร้างเว็บเบื้องต้น

แผนการจดั การเรียนรู้มงุ่ เนน้ สมรรถนะ บรู ณาการคุณธรรม จรยิ ธรรม คา่ นยิ ม และคุณลักษณะอนั พึงประสงค์ และปรัชญาของเศรษฐกจิ พอเพยี ง รหสั วิชา 30900-0012 การสร้างเว็บเบ้อื งตน้ 1-2-2 โดย นางปวันรัตน์ ขันแก้ว ครู ภาคเรยี นท่ี 1 ปกี ารศกึ ษา 2563 สาขางานเทคโนโลยีสารสนเทศ สาขาวิชาเทคโนโลยสี ารสนเทศ วทิ ยาลัยการอาชีพนวมนิ ทราชินีมกุ ดาหาร สถาบนั การอาชวี ศึกษาภาคตะวนั ออกเฉียงเหนือ 2 สานกั งานคณะกรรมการการอาชวี ศึกษา กระทรวงศกึ ษาธิการ

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

3 กาหนดการจัดการเรียนรู้ รหสั วิชา 30900-0012 ชื่อวิชา การสร้างเวบ็ เบอ้ื งต้น 1-2-2 ระดบั ช้นั /กลุ่ม ปวส. สาขาวิชาคอมพวิ เตอรโ์ ปรแกรมเมอร์ จานวนชัว่ โมงการเรยี นรู้ 3 ชวั่ โมง / สัปดาห์ แผนจดั การเรียนรู้ 18 สัปดาห์ต่อภาคเรียน รวมจานวน 54 ชว่ั โมง 2 หนว่ ยกิต จดุ ประสงค์รายวิชา เพ่ือให้ 1. เข้าใจเก่ยี วกบั หลักการและกระบวนการสร้างเวบ็ ไซต์ 2. สามารถใชโ้ ปรแกรมสาเรจ็ รูปในการสรา้ งเวบ็ ไซต์ 3. มีคุณธรรม จรยิ ธรรม และคา่ นยิ มทดี่ ีในการสรา้ งเว็บไซต์ สมรรถนะรายวิชา 1. แสดงความรูเกี่ยวกบั หลกั การและกระบวนการสร้างเวบ็ ไซต์ 2. สร้างและทดสอบเวบ็ ไซต์ คาอธิบายรายวชิ า ศึกษาและปฏิบตั เิ กย่ี วกบั กระบวนการและโครงสร้างการทางานของเวบ็ ไซต์ การออกแบบเวบ็ ไซต์ หน่วยการจัดการเรยี นร้ฐู านสมรรถนะของรายวชิ า หน่วยท่ี ชือ่ หน่วย 1 ความรูเ้ บื้องตน้ เกย่ี วกบั เว็บไซต์ 2 การวเิ คราะห์และการออกแบบโครงสรา้ งเวบ็ ไซต์ 3 การสร้างกราฟิกและภาพเคล่ือนไหว 4 การใช้งานโปรแกรม Adobe Dreamweaver CS6 เบอ้ื งต้น 5 การจดั รปู แบบเอกสารเว็บเพจ 6 การใส่มัลติมเี ดยี บนเวบ็ เพจ 7 การสรา้ งตารางบนเว็บเพจ 8 การออกแบบเว็บเพจดว้ ยเทคนคิ Fluid Grid Layout 9 การเชอื่ มโยงข้อมูลบนเวบ็ เพจ 10 การเผยแพรเ่ ว็บไซตบ์ นอนิ เทอรเ์ นต็ 11 กรณตี ัวอยา่ งการสรา้ งเวบ็ ไซต์

4 การวเิ คราะห์หลักสตู รมุ่งเน้นสมรรถนะรายวชิ า ตารางท่ี 1 แสดงการกาหนดกรอบเน้ือหาจากจุดประสงค์ สมรรถนะ และคาอธิบายรายวิชา รหสั วชิ า 30900-0012 ชื่อวิชา การสรา้ งเว็บเบอ้ื งต้น จานวน 2 หน่วยกติ เวลาเรยี น 3 ชวั่ โมง/สปั ดาห์ สมรรถนะวิชาชพี .... จุดประสงค์รายวิชา สมรรถนะรายวิชา งาน / เน้ือหาการเรยี นรู้ของวชิ า กิจกรรม 1. เข้าใจเกยี่ วกบั 1. แสดงความรู ความรเู้ บ้อื งตน้ เกยี่ วกบั เวบ็ ไซต์ 1. ผู้จัดการ หลักการและ เกย่ี วกับหลักการและ การวิเคราะห์และการออกแบบ เรยี นรู้ อธิบาย กระบวนการสร้าง กระบวนการสร้าง โครงสรา้ งเวบ็ ไซต์ สาธิต สงั เกต เว็บไซต์ เว็บไซต์ การสรา้ งกราฟกิ และภาพเคลื่อนไหว สัมภาษณ์ 2. สามารถใช้ 2. สร้างและทดสอบ การใช้งานโปรแกรม Adobe ทดสอบ โปรแกรมสาเรจ็ รูป เวบ็ ไซต์ Dreamweaver CS6 เบื้องต้น ประเมนิ ผล ในการสรา้ งเว็บไซต์ การจัดรปู แบบเอกสารเว็บเพจ 2. ผู้เรียนรู้ ทา 3. มีคุณธรรม การใสม่ ัลติมีเดียบนเวบ็ เพจ แบบทดสอบ จริยธรรม และ การสรา้ งตารางบนเว็บเพจ ฝึกทกั ษะปฏบิ ตั ิ คา่ นยิ มทดี่ ีในการ จดบันทึก สรา้ งเวบ็ ไซต์ การออกแบบเว็บเพจดว้ ยเทคนิค สรุปวิจารณ์ Fluid Grid Layout ประเมินผล การเชื่อมโยงข้อมลู บนเว็บเพจ การเผยแพรเ่ วบ็ ไซตบ์ นอนิ เทอร์เนต็ กรณีตวั อยา่ งการสรา้ งเว็บไซต์

5 ตารางท่ี 2 แสดงการวเิ คราะห์แหลง่ ข้อมูลของหวั ขอ้ งาน/หวั ข้อเรือ่ ง จากคาอธิบายรายวชิ า รหสั วชิ า 30900-0012 ชื่อวิชา การสรา้ งเวบ็ เบื้องต้น จานวน 2 หน่วยกติ เวลาเรียน 3 ชั่วโมง/สัปดาห์ หนว่ ยที่ ช่ือหน่วย แหลง่ ข้อมลู ABCDE 1 ความรู้เบ้ืองตน้ เกยี่ วกับเว็บไซต์  2 การวิเคราะห์และการออกแบบโครงสร้างเวบ็ ไซต์  3 การสรา้ งกราฟกิ และภาพเคลื่อนไหว  4 การใช้งานโปรแกรม Adobe Dreamweaver CS6 เบื้องต้น      5 การจัดรูปแบบเอกสารเวบ็ เพจ  6 การใส่มัลติมเี ดยี บนเว็บเพจ  7 การสรา้ งตารางบนเวบ็ เพจ  8 การออกแบบเวบ็ เพจด้วยเทคนคิ Fluid Grid Layout  9 การเชือ่ มโยงข้อมลู บนเว็บเพจ  10 การเผยแพรเ่ วบ็ ไซต์บนอินเทอร์เนต็  11 กรณตี วั อยา่ งการสรา้ งเว็บไซต์  A = หลกั สูตรรายวชิ า B = เอกสาร และตารา แหลง่ ข้อมลู C = ประสบการณ์ตนเอง D = ผู้เชยี่ วชาญ E = อน่ื ๆ เชน่ Internet

6 ตารางที่ 3 แสดงการกาหนดกรอบคุณธรรม จริยธรรม ค่านิยม และคุณลักษณะอันพึงประสงค์จาก จุดประสงค์รายวชิ า รหัสวิชา 30900-0012 ชื่อวิชา การสร้างเว็บเบ้อื งต้น จานวน 2 หน่วยกิต เวลาเรียน 3 ช่วั โมง/สปั ดาห์ คุณธรรม จรยิ ธรรม คา่ นยิ ม และ พฤตกิ รรมบ่งชข้ี องวชิ า คุณลกั ษณะอันพึงประสงค์ มคี ณุ ธรรม จรยิ ธรรม และค่านยิ มทีด่ ี 1. มีการเตรียมความพร้อมในการเรียนและปฏบิ ตั งิ าน ในเขียนโปรแกรมเกม 2. ปฏบิ ัตงิ านด้วยความประณีต รอบคอบ และถูกต้อง 3. ปฏบิ ตั ติ ามกฎระเบียบข้อบงั คับ ข้อตกลงต่างๆ 4. ไมน่ าผลงานของคนอ่ืนมาแอบอ้าง 5. มีสมั มาคารวะ 6. ร่วมมอื กนั ในการทางาน 7. ยอมรบั ความคิดเหน็ ของผู้อ่ืน 8. เปน็ ผูน้ าและผตู้ ามที่ดี 9. ซักถามปัญหาข้อสงสัย 10. สามารถแก้ไขปญั หาได้ด้วยตนเอง วธิ กี ารประเมนิ พฤตกิ รรมบ่งชี้ 1. ทกุ ครง้ั ที่เข้าเรียน จะประเมนิ พฤติกรรม 5 ข้อ มีคะแนนพฤติกรรม 5 คะแนน 2. ผเู้ รยี น – ผ้สู อน รว่ มกันประเมนิ 3. จะไม่มคี ะแนนให้ในพฤติกรรมทบี่ กพร่อง 4. ขาดเรยี นไมม่ คี ะแนนพฤติกรรมบ่งช้ีให้ (เป็นศูนย)์ 5. รวมคะแนนทสี่ ะสมได้ แลว้ เฉลย่ี เป็นคะแนน 20 คะแนนนาไปวัดผล

7 ตารางท่ี 4 แสดงการวเิ คราะหร์ ะดับ พทุ ธิพิสัย ทกั ษะพิสยั จิตพสิ ัย และจานวนชั่วโมงของรายวิชา รหสั วิชา 30900-0012 ช่อื วิชา การสรา้ งเวบ็ เบ้ืองตน้ จานวน 2 หน่วยกติ เวลาเรยี น 3 ชัว่ โมง/สัปดาห์ ระดบั พฤติกรรมทพี่ ึงประสงค์ จา หน่วย ชือ่ หน่วยการเรยี นรู้ พุทธพิ ิสัย ทกั ษะพสิ ัย จติ พสิ ัย รวม ลา นวน ที่ ดับ ชวั่ 1234561234512345 โมง 1 ความรเู้ บือ้ งต้นเกย่ี วกบั เวบ็ ไซต์     933 2 การวเิ คราะหแ์ ละการออก แบบ    12 2 3 โครงสร้างเว็บไซต์ 3 การสร้างกราฟิกและ    12 2 3 ภาพเคล่อื นไหว 4 การใชง้ านโปรแกรม Adobe      12 2 6 Dreamweaver CS6 เบอ้ื งต้น 5 การจดั รูปแบบเอกสารเว็บเพจ      12 2 6 6 การใสม่ ลั ตมิ เี ดียบนเวบ็ เพจ    12 2 3 7 การสรา้ งตารางบนเว็บเพจ    12 2 6 8 การออกแบบเว็บเพจด้วย    12 2 3 เทคนิค Fluid Grid Layout 9 การเช่ือมโยงขอ้ มลู บนเว็บเพจ      12 2 6 10 การเผยแพร่เวบ็ ไซตบ์ น    14 1 6 อนิ เทอรเ์ น็ต 11 กรณีตัวอยา่ งการสร้างเวบ็ ไซต์      14 1 9 รวมทั้งหมด 11 22 33 30 27 10 133 54 ลาดบั ความสาคญั 5 4 1 2 36 รวมชวั่ โมงจัดการเรียนรู้ 54 พทุ ธิพิสัย ทักษะพิสัย จติ พสิ ยั 1 = ความรู้ 1 = เลยี นแบบ 1 = รับรู้ 2 = ความเข้าใจ 2 = ทาได้ตามแบบ 2 = ตอบสนอง 3 = การนาไปใช้ 3 = ทาไดถ้ ูกต้อง 3 = เหน็ คุณคา่ 4 = การวเิ คราะห์ แมน่ ยา 4 = จดั ระบบคุณค่า 5 = การสังเคราะห์ 4 = ทาไดต้ ่อเน่ือง 5 = พัฒนาเป็นลักษณะ 6 = การประเมิน ประสานกัน นสิ ัย ค่า 5 = ทาได้อยา่ งเป็น ธรรมชาติ

8 ตารางท่ี 5 แสดงการกาหนดหวั ขอ้ งาน/หัวข้อเร่ือง และจุดประสงค์เชิงพฤติกรรมการเรียนร้ขู องรายวิชา รหสั วิชา 30900-0012 ชือ่ วิชา การสรา้ งเวบ็ เบ้อื งต้น จานวน 2 หน่วยกิต เวลาเรยี น 3 ช่ัวโมง/สปั ดาห์ หน่วยท่ี หวั ข้องาน/หัวขอ้ เร่ือง จุดประสงค์เชงิ พฤติกรรมการเรยี นรู้ ปฐมนิเทศการเรยี นรู้ 1 ความรู้เบ้ืองต้นเก่ียวกับเว็บไซต์ สมรรถนะประจาหน่วยการเรียนรู้ 1. แสดงความรูเ้ กยี่ วกับความรู้เบ้อื งตน้ เก่ยี วกับเว็บไซต์ 1.1 ความหมายของอนิ เทอร์เนต็ 1. อธิบายความหมายของอินเทอร์เนต็ ไดถ้ ูกตอ้ ง 1.2 ประวตั คิ วามเปน็ มาของ 2. อธิบายประวตั ิความเป็นมาของอินเทอรเ์ นต็ ไดถ้ ูกตอ้ ง อนิ เทอร์เน็ต เวลา 1.3 ความหมายของเวบ็ ไซต์ 3. อธิบายความหมายของเว็บไซตไ์ ด้ถูกตอ้ ง 3 1.4 ความสาคญั ของเว็บไซต์ 4. อธบิ ายความสาคญั ของเวบ็ ไซตไ์ ดถ้ กู ต้อง ชัว่ โมง 1.5 ประเภทของเว็บไซต์ 5. บอกประเภทของเว็บไซต์ไดถ้ ูกต้อง 1.6 ระบบช่อื โดเมนเนมของเวบ็ ไซต์ 6. อธบิ ายระบบช่อื โดเมนเนมของเวบ็ ไซตไ์ ด้ถูกต้อง 1.7 อินเทอร์เน็ตกับการพัฒนา 7. อธิบายอินเทอร์เน็ตกับการพัฒนาเว็บไซต์ไดถ้ ูกต้อง เวบ็ ไซต์ 1.8 คาศพั ทเ์ ก่ียวกบั เว็บไซต์ 8. บอกคาศพั ท์เกย่ี วกบั เว็บไซต์ไดถ้ ูกต้อง 2 การวเิ คราะห์และออกแบบโครงสรา้ งเว็บไซต์ สมรรถนะประจาหน่วยการเรยี นรู้ 1. ปฏบิ ตั ิการวเิ คราะห์และออกแบบโครงสร้างเวบ็ ไซต์ 2.1 ความสาคัญของการวิเคราะห์ 1. อธบิ ายความสาคญั ของการวิเคราะห์และออกแบบ และออกแบบโครงสร้างเวบ็ ไซต์ โครงสร้างเวบ็ ไซต์ 2.2 ลกั ษณะโครงสร้างของเว็บไซต์ 2. บอกลักษณะโครงสร้างของเว็บไซต์ 2.3 ขัน้ ตอนการออกแบบเวบ็ ไซต์ 3. บอกข้ันตอนการออกแบบเว็บไซต์ เวลา 2.4หลักการจดั เตรียมขอ้ มลู และ 4. อธบิ ายหลักการจดั เตรยี มข้อมลู และจดั เก็บไฟล์ 3 จัดเก็บไฟล์ ชวั่ โมง 2.5. หลักการเลอื กสที ่ีเหมาะสม 5. อธบิ ายหลักการเลือกสที เ่ี หมาะสมกบั งานพัฒนา กบั งานพัฒนาเว็บไซต์ เวบ็ ไซต์ 6. บอกประเภทของไฟล์รปู ภาพท่เี หมาะสมกับงาน พัฒนาเว็บไซต์ 7. การวเิ คราะหแ์ ละออกแบบโครงสรา้ งเว็บไซต์ 3 การสร้างกราฟิกและภาพเคล่ือนไหว สมรรถนะประจาหนว่ ยการเรียนรู้ 1. ปฏบิ ัติการสร้างกราฟิกและภาพเคล่ือนไหว เวลา 3.1 การใชส้ ี 1. อธิบายการใช้สไี ด้ถูกต้อง 3 3.2 การออกแบบกราฟกิ 2. อธบิ ายการออกแบบกราฟิกได้ถกู ต้อง

9 หน่วยที่ หวั ข้องาน/หัวขอ้ เร่ือง จุดประสงค์เชิงพฤติกรรมการเรยี นรู้ ชว่ั โมง 3.3 ไฟล์รปู ภาพ 3. อธิบายไฟลร์ ปู ภาพได้ถกู ต้อง 3.4 การสร้าง Navigation Bar 4. สร้าง Navigation Bar ได้ 4 การใช้งานโปรแกรม Adobe Dreamweaver CS6 เบอ้ื งต้น สมรรถนะประจาหน่วยการเรยี นรู้ 1. เรียนรู้โปรแกรม Adobe Dreamweaver CS6 2. ปฏิบตั ิการใช้งานโปรแกรม Adobe Dreamweaver CS6 เบอ้ื งตน้ 4.1 ความสาคัญของโปรแกรม 1. อธิบายการใช้งานโปรแกรม Adobe Dreamweaver Adobe Dreamweaver CS6 CS6 ได้ถกู ต้อง 4.2 ส่วนประกอบของโปรแกรม 2. บอกส่วนประกอบของโปรแกรม Adobe Adobe Dreamweaver CS6 Dreamweaver CS6 ไดถ้ กู ต้อง เวลา 4.3 การจัดการไฟล์ของโปรแกรม 3. บอกการจัดการไฟล์ของโปรแกรม Adobe 6 Adobe Dreamweaver CS6 Dreamweaver CS6 ได้ถูกต้อง ชว่ั โมง 4.4 การสร้างเวบ็ ไซต์ 4. สรา้ งเวบ็ ไซต์ได้ถูกต้อง 4.5 การปรบั คณุ สมบัติของเว็บเพจ 5. ปรับคุณสมบัติของเวบ็ เพจไดถ้ ูกตอ้ ง 4.6 การใชร้ ปู แบบตวั อักษร 6. ใชร้ ูปแบบตวั อักษรภาษาไทยในโปรแกรม Adobe ภาษาไทยในโปรแกรม Adobe Dreamweaver CS6 ไดถ้ กู ต้อง Dreamweaver CS6 5 การจดั รปู แบบบนเอกสารเว็บเพจ สมรรถนะประจาหน่วยการเรยี นรู้ 1. เรียนรู้รูปแบบบนเอกสารเว็บเพจ 2. ปฏบิ ัติการจดั รูปแบบบนเอกสารเวบ็ เพจ 5.1 การจัดการข้อความบนเว็บเพจ 1. จดั การข้อความบนเวบ็ เพจได้ 5.2 การกาหนดรปู แบบข้อความ 2. กาหนดรปู แบบข้อความดว้ ยคาสง่ั CSS ได้ เวลา ดว้ ยคาสง่ั CSS 6 5.3 การกาหนดรูปแบบข้อความ 3. กาหนดรูปแบบข้อความด้วยคาส่ัง HTML ได้ ชั่วโมง ด้วยคาส่ัง HTML 5.4 การจัดการรปู ภาพบนเว็บเพจ 4. จัดการรูปภาพบนเว็บเพจได้ 5.5 แมแ่ บบเอกสารเว็บไซต์ 5. ใช้แมแ่ บบเอกสารเว็บไซต์ได้ 6 การใสม่ ลั ตมิ ีเดียบนเว็บเพจ สมรรถนะประจาหนว่ ยการเรยี นรู้ 1. เรยี นรู้การใสม่ ลั ติมีเดยี บนเวบ็ เพจ 2. ปฏบิ ัติการใสม่ ัลตมิ ีเดียบนเวบ็ เพจ เวลา 6.1 ความหมายของมลั ติมเี ดีย 1. อธิบายความหมายของมัลตมิ เี ดียไดถ้ กู ตอ้ ง 3 6.2 องคป์ ระกอบของมัลติมีเดยี 2. บอกองคป์ ระกอบของมัลตมิ ีเดียได้ถูกต้อง ช่ัวโมง 6.3 ประเภทของไฟล์มลั ตมิ ีเดีย 3. อธบิ ายประเภทของไฟลม์ ัลตมิ เี ดยี ได้ถูกต้อง 6.4 การแสดงไฟลม์ ัลติมีเดยี 4. แสดงไฟลม์ ลั ติมีเดียได้ถกู ต้อง

10 หน่วยท่ี หวั ข้องาน/หัวขอ้ เรื่อง จดุ ประสงคเ์ ชงิ พฤติกรรมการเรยี นรู้ 7 การสร้างตารางบนเว็บเพจ สมรรถนะประจาหน่วยการเรยี นรู้ 1. เรยี นรกู้ ารสรา้ งตารางบนเว็บเพจ 2. ปฏบิ ัตกิ ารสรา้ งตารางบนเวบ็ เพจ 7.1 คณุ ลกั ษณะของตาราง 1. อธิบายคุณลกั ษณะของตารางได้ 7.2 การจดั การตารางดว้ ย 2. จดั การตารางด้วยโปรแกรม Adobe Dreamweaver เวลา โปรแกรม Adobe Dreamweaver CS6 ได้ 6 CS6 3. ปรบั รายละเอียดของตารางได้ ชว่ั โมง 7.3 การปรับรายละเอียดของ ตาราง 7.4 การใส่ข้อความและรูปภาพลง 4. ใสข่ อ้ ความและรปู ภาพลงในตารางได้ ในตาราง 8 การออกแบบเวบ็ เพจด้วยเทคนิค Fluid Grid Layout สมรรถนะประจาหนว่ ยการเรยี นรู้ 1. เรียนรูก้ ารออกแบบเวบ็ เพจดว้ ยเทคนคิ Fluid Grid Layout 2. ปฏิบัตกิ ารออกแบบเวบ็ เพจด้วยเทคนิค Fluid Grid Layout 8.1 ความรู้เกีย่ วกับ Responsive 1. บอกลักษณะการทางานของ Responsive Web Web Design Design ได้ 8.2 ความรู้เกย่ี วกับ Layout 2. อธบิ ายเกี่ยวกับ Layout ได้ 8.3 หลักการสรา้ ง Layout ดว้ ย 3. อธบิ ายเกยี่ วกบั เครื่องมือ Fluid Grid Layout ได้ เวลา Fluid Grid Layout 3 8.4 การสรา้ ง Layout ด้วย Fluid 4. บอกข้ันตอนการใช้เคร่ืองมือ Fluid Grid Layout ได้ ช่วั โมง Grid Layout 8.5 ความรูเ้ กี่ยวกับ Div Tag และ 5. อธบิ ายเก่ยี วกับ Div Tag และ Cascading Style Cascading Style Sheet Sheet ได้ 8.6 การจดั การ Div Tag บน Fluid 6. ออกแบบหนา้ เว็บด้วยเทคนคิ Fluid Grid Layout ได้ Grid Layout 9 การเชื่อมโยงข้อมลู บนเว็บเพจ สมรรถนะประจาหนว่ ยการเรยี นรู้ 1. เรยี นร้กู ารเชื่อมโยงข้อมลู บนเวบ็ เพจ 2. ปฏิบตั กิ ารเช่อื มโยงข้อมูลบนเว็บเพจ เวลา 9.1 รูปแบบและวิธีการสร้างการ 1. อธิบายรปู แบบการเช่ือมโยงข้อมลู บนเว็บเพจได้ 6 เช่ือมโยงข้อมูลบนเวบ็ เพจ ชว่ั โมง 9.2 ประเภทของการเชื่อมโยง 2. สร้างการเชอ่ื มโยงข้อมูลบนเว็บเพจประเภทตา่ งๆ ได้ ขอ้ มูล

11 หนว่ ยที่ หวั ข้องาน/หัวข้อเรื่อง จุดประสงค์เชิงพฤติกรรมการเรียนรู้ 9.3 การสร้าง Image Map 3. สร้าง Image Map ได้ 10 การเผยแพรเ่ ว็บไซต์บนอินเทอรเ์ น็ต สมรรถนะประจาหนว่ ยการเรียนรู้ 1. เรยี นรูก้ ารเผยแพรเ่ วบ็ ไซต์บนอนิ เทอรเ์ น็ต 2. ปฏิบตั กิ ารเผยแพร่เว็บไซต์บนอนิ เทอรเ์ นต็ เวลา 10.1 เวบ็ เซริ ์ฟเวอร์ 1. อธิบายเกย่ี วกบั เวบ็ เซริ ฟ์ เวอร์ได้ 6 10.2 เวบ็ โฮสติง้ 2. อธิบายเก่ยี วกบั เวบ็ โฮสติง้ ได้ ชวั่ โมง 10.3 การเผยแพร่เว็บไซต์ด้วยฟรี 3. เผยแพรเ่ ว็บไซตด์ ้วยฟรีโฮสติ้งได้ โฮสต้งิ 11 กรณีศกึ ษาตัวอย่างเวบ็ ไซต์ สมรรถนะประจาหน่วยการเรยี นรู้ 1. ปฏบิ ัติการกรณศี ึกษาตวั อย่างเว็บไซต์ เวลา 11.1 การเตรียมข้อมลู 1. กาหนดไซตไ์ ด้ 9 11.2 การสรา้ งไซต์ใหม่ 2. จดั การ Layout ได้ ช่ัวโมง 3. สรา้ งเวบ็ ไซต์ได้

12 แผนผงั การบรู ณาการปรชั ญาของเศรษฐกิจพอเพยี ง คุณธรรม จรยิ ธรรม ค่านยิ ม และคุณลกั ษณะอันพงึ ประสงค์ รหัสวชิ า 30900-0012 ช่ือวิชา การสร้างเวบ็ เบือ้ งต้น 1-2-2 ระดบั ชน้ั /กล่มุ ปวส. สาขาวิชาคอมพวิ เตอร์โปรแกรมเมอร์ จานวนช่ัวโมงการเรยี นรู้ 3 ชว่ั โมง / สัปดาห์ แผนจดั การเรียนรู้ 18 สัปดาห์ต่อภาคเรยี น รวมจานวน 54 ช่วั โมง 2 หน่วยกติ พอประมาณ 1. ความรู้เบ้ืองต้นเกยี่ วกบั เว็บไซต์ 2. การวเิ คราะหแ์ ละการออกแบบโครงสรา้ งเวบ็ ไซต์ 3. การสรา้ งกราฟิกและภาพเคลอื่ นไหว มีเหตผุ ล มีภูมิคมุ้ กัน 4. การใชง้ านโปรแกรม Adobe รหัสวชิ า 30900-0012 8. การออกแบบเวบ็ เพจดว้ ยเทคนคิ Dreamweaver CS6 การสร้างเว็บเบอ้ื งตน้ Fluid Grid Layout เบอื้ งต้น 9. การเช่ือมโยงข้อมูลบนเวบ็ เพจ 5. การจัดรูปแบบเอกสาร 10. การเผยแพรเ่ ว็บไซตบ์ น เวบ็ เพจ อินเทอร์เน็ต 6. การใสม่ ัลตมิ ีเดียบนเวบ็ เพจ 11. กรณีตัวอยา่ งการสรา้ งเว็บไซต์ 7. การสรา้ งตารางบนเว็บเพจ คุณธรรม 12. ความรบั ผดิ ชอบ 17. ความมมี นุษยสัมพันธ์ 13. ความมวี นิ ยั 18. ความสนใจใฝร่ ู้ 14. ความซอ่ื สตั ยส์ ุจรติ 15. ความกตัญญูกตเวที 19. การพ่งึ ตนเอง 16. ความรักสามคั คี ความรู้ + ทักษะ ผลกระทบสงั คม ผลกระทบเศรษฐกจิ ผลกระทบวัฒนธรรม ผลกระทบส่ิงแวดล้อม 4, 9,10, 14, 15, 6, 7, 8 1, 5 และ 12-19 2, 3 13

13 ปฐมนเิ ทศการเรียนรู้ กาหนดการเรยี นรู้ รหัสวิชา 30900-0012 ช่ือวิชา การสร้างเว็บเบื้องต้น ท-ป-น 1-2-2 ระดับชั้น/กลุ่ม ปวส. 1 สาขาวิชาคอมพิวเตอร์โปรแกรมเมอร์ จานวนชั่วโมงการเรยี นรู้ 3 ช่วั โมงตอ่ สัปดาห์ แผนจดั การเรียนรู้ 18 สัปดาห์ต่อภาคเรียน รวมเวลาเรียนรู้ 54 ช่ัวโมง จานวน 2 หน่วยกิต มีหน่วยการเรียนรู้ 11 หน่วยการ เรียนรู้ เอกสารท่ใี ชป้ ระกอบการเรยี นรู้ ใช้คู่มือปฏิบัติงานของผู้เรียนรู้รหัสวิชา 30900-0012 ชื่อวิชา การสร้างเว็บเบื้องต้น เป็น เอกสารประกอบการเรียนรู้ฝึกทักษะด้วยตนเอง โดยมีเอกสารอ้างอิงท่ีผู้เรียนรู้สามารถค้นคว้าเพิ่มเติมได้ จากเอกสารตามรายการทร่ี ะบุในบรรณานกุ รมของคมู่ ือปฏิบตั ิงานของผู้เรยี นรเู้ ลม่ นี้ วิธีการเรยี นรู้ 1. ผู้จัดการเรยี นรจู้ ะอธิบาย สาธิต สงั เกต สัมภาษณ์ ทดสอบ และประเมนิ ผลผเู้ รียนรู้ 2. ผ้เู รยี นรตู้ ้องทาแบบประเมินตนเองก่อนเรียนรู้ ศึกษาสาระการเรียนรู้ ฝึกทักษะปฏิบัติ บันทึก สมดุ สนาม สรุปผลและวจิ ารณ์ ประเมนิ ผลการเรยี นรู้ และประเมนิ พฤตกิ รรมของตนเอง 3. ผู้เรยี นรูต้ ้องมีเวลาการเรียนร้ไู ม่ต่ากว่าร้อยละ 80 ของเวลาเรยี นรทู้ ง้ั หมด คือไม่น้อยกว่า 14 สัปดาห์ต่อภาคเรยี น รวมเวลาเรยี นไมน่ ้อยกว่า 43 ช่วั โมง วธิ กี ารวดั ผลประเมนิ ผล วัดผลประเมินผลการเรียนรู้ และพฤติกรรมการเรียนรู้ทุกครั้งท่ีเข้าเรียน โดยผู้เรียนรู้และ ผจู้ ดั การเรียนรู้รว่ มกนั วัดผลประเมินผล เครื่องมือวัดผลประเมินผล 1. แบบประเมินตนเองก่อนเรยี นรู้ แบบทดสอบหลังเรียนรู้ แบบฝึกหัด ใช้สาหรับวัดผลประเมินผล สาระการเรยี นรู้ 2. ใบสังเกต สัมภาษณ์ และประเมินผลการปฏบิ ัติงาน ใช้สาหรับการวัดผลประเมินผล การปฏิบัติงาน การฝึกทกั ษะ 3. ใบประเมนิ พฤตกิ รรมบ่งช้ี ที่ตอ้ งการเน้น กลุ่มที่.... ใช้สาหรับวัดผลประเมินผลพฤติกรรม การเรยี นรใู้ นแตล่ ะคร้งั เกณฑ์การตัดสิน 1. รวมคะแนนพัฒนาการเรียนรู้จากการวัดผลประเมนิ ผลสาระการเรยี นร้ใู นแตล่ ะหนว่ ย 2. รวมคะแนนจากการวดั ผลประเมินผลการปฏบิ ตั ิงาน 3. รวมคะแนนจากการวัดผลประเมนิ ผลพฤตกิ รรมบ่งช้ี 4. รวมคะแนนทัง้ หมดของทุกหน่วยงานนาไปตัดสินผลการเรียนรู้ของวิชา โดยเทียบกับเกณฑ์ การตดั สินผลการเรียนร้ทู ก่ี าหนด การแบง่ กลุม่ เรยี นการเรยี นรู้ กลุ่มเรยี นรู้ฝึกทักษะปฏิบัติ มีสมาชิก 2 คน โดยให้แต่ละกลุ่มคละกันระหว่างเพศและผลการเรียน ใหม้ ี 1 คนเป็นหัวหน้ากล่มุ หมนุ เวยี นผลัดเปลย่ี นกันเปน็ หวั หนา้ กลุม่ จนครบทกุ คนตลอดทั้งภาคเรียน