ชุดการสอนรายวิชา การการพัฒนาเว็บไซต์ทางธุรกิจ

Page |1 ชดุ การสอน วชิ า การพฒั นาเวบ็ ไซตท์ างธุรกิจ (Website Development in Business) รหสั วชิ า 30204 - 2103 หลักสูตรประกาศนยี บตั รวชิ าชีพชั้นสงู (ปวส.) พทุ ธศกั ราช 2563 ชดุ การสอนท่ี 1 เร่ือง หลกั การทำงานของบริการเว็บไซต์บน ระบบอินเทอรเ์ นต็ จดั ทำโดย นายวีรธรรม เทศประสิทธิ์ ครู คศ.1 แผนก/สาขาวชิ า เทคโนโลยธี ุรกิจดจิ ทิ ัล วทิ ยาลยั เทคนคิ สกลนคร สำนักงานคณะกรรมการการอาชีวศึกษา กระทรวงศึกษาธิการ

ห น้ า | 2 ชดุ การสอน วชิ า การพฒั นาเวบ็ ไซตท์ างธุรกิจ (Website Development in Business) รหสั วชิ า 30204 - 2103 หลักสูตรประกาศนยี บตั รวชิ าชพี ชั้นสงู (ปวส.) พทุ ธศกั ราช 2563 ชดุ การสอนท่ี 1 เร่ือง หลกั การทำงานของบริการเว็บไซตบ์ น ระบบอินเทอร์เนต็ จดั ทำโดย นายวีรธรรม เทศประสิทธิ์ ครู คศ.1 แผนก/สาขาวชิ า เทคโนโลยธี ุรกิจดจิ ทิ ัล วทิ ยาลยั เทคนิคสกลนคร สำนักงานคณะกรรมการการอาชีวศึกษา กระทรวงศึกษาธกิ าร

ห น้ า | 3 คำนำ ชุดการสอนวิชาการพัฒนาเว็บไวต์ทางธุรกิจ รหัส 30204 - 2103 หลักสูตรประกาศนียบัตร วิชาชีพ (ปวส.) พุทธศักราช 2563 สำนักงานคณะกรรมการการอาชีวศึกษา กระทรวงศึกษาธิการ จัดทำ ขนึ้ เพอ่ื ใชเ้ ป็นชดุ การสอนสำหรับครผู ู้สอนและผู้เรยี น สาขาวิชาเทคโนโลยธี รุ กิจดิจิทลั ซึ่งได้มกี ารวิเคราะห์ สาระการเรียนรู้ ให้สอดคล้องกับจุดประสงค์รายวิชา สมรรถนะรายวิชา และคำอธิบายรายวิชาของ หลักสูตร มีจำนวนทั้งหมด 10 ชุด ได้แก่ หลักการทำงานของบริการเว็บไซต์บนระบบอินเทอร์เน็ต การ พัฒนาเว็บไซต์ด้วยโปรแกรม Adobe Dreamweaver CC2017 การจัดรูปแบบการแสดงผลเอกสาร เว็บไซต์ หลักการออกแบบกราฟิกสำหรับเว็บไซต์ การจัดการตารางออกแบบหน้าเว็บเพ็จ การเชื่อมโยง หน้าเพ็จด้วย Hyper Link การออกแบบหน้าเว็บเพ็จลักษณะ Responsive Web Design การออกแบบ และพัฒนาเว็บไซต์แอพลิเคชั่น ด้วย PHP กรณีศึกษาเว็บไซต์ขายสินค้าออนไลน์ การเผยแพร่เว็บไซต์บน อินเทอร์เนต็ ชุดการสอนชุดนี้เป็นชุดการสอนที่ 1 เรื่อง หลักการทำงานของบริการเว็บไซต์บนระบบ อินเทอร์เน็ตเนื้อหาสาระการเรียนรู้ ภายในชุดการสอนนี้ ประกอบด้วย คู่มือครู โครงการสอน แผนการ จัดการเรียนรู้ แบบทดสอบก่อนเรียน เอกสารประกอบการเรยี น เรื่อง หลักการทำงานของบริการเว็บไซต์ บนระบบอินเทอรเ์ นต็ ความรู้เกย่ี วกบั เวบ็ ไซต์ ความรู้หลกั การออกแบบเว็บไซต์ สว่ นประกอบของเว็บไซต์ การเลือกใช้สี รูปแบบไฟล์ที่เหมาะสมสำหรับการพัฒนาเว็บไซต์ ภาษาที่เหมาะสมในการพัฒนาเว็บไซต์ รปู แบบของเวบ็ ไซต์แบบชัก แบบฝึกหัด ใบงาน แบบประเมนิ ผลการปฏิบัตงิ าน บรรณานกุ รม แบบทดสอบ หลังเรียน คำแนะนำการใช้สื่อ ตัวอย่างสื่อ และภาคผนวก เฉลยแบบฝึกหัด เฉลยแบบทดสอบก่อนเรียน- หลังเรียน และแบบประเมินกิจกรรมรายบุคคล กิจกรรมกลุ่มและแบบประเมินคุณธรรม จริยธรรมและ คณุ ลักษณะอนั พงึ ประสงค์ หวังเป็นอย่างยงิ่ ว่าชดุ การสอนท่ี 1 หลักการทำงานของบริการเวบ็ ไซต์บนระบบอินเทอร์เน็ต การ พัฒนาเวบ็ ไซต์ทางธรุ กจิ ท่ผี ู้จดั ทำเรียบเรียงจดั ทำขึ้นนน้ั จะเป็นประโยชน์ตอ่ ครูผู้สอนและผู้เรียนในวิชานี้ และนำไปเปน็ แบบอย่างในการจัดทำชุดการสอนวชิ าอืน่ ต่อไป หากมีขอ้ เสนอแนะใดๆ ผู้เรียบเรียงน้อมรับ ดว้ ยความยนิ ดยี ิ่ง ลงชอื่ (นายวรี ธรรม เทศประสทิ ธิ์) ตำแหนง่ ครู คศ.1

ห น้ า | 4 สารบัญ เร่อื ง หน้า คำนำ............................................................................................................................. ............................. สารบญั ....................................................................................................................................................... รายละเอยี ดของหลักสูตรรายวิชา............................................................................................................... ตารางท่ี 1 วิเคราะหห์ ลักสตู รและระดับความสำคัญของหน่วยการเรียนรู้................................................. ตารางที่ 2 วิเคราะห์หนว่ ยการเรียนรู้และเวลาทใ่ี ชใ้ นการจัดการเรียนรู้.................................................... ตารางที่ 3 วเิ คราะห์ หัวข้อหลกั /หวั ขอ้ รอง/หัวข้อย่อยและเวลาจดั การเรยี นรู้......................................... ตารางท่ี 4 วเิ คราะห์ จุดประสงค์เชงิ พฤติกรรมกับหวั ขอ้ การเรียนรู้และระดบั พฤติกรรมท่ีต้องการ........... คมู่ อื ครชู ุดการสอนที่ 1 เรอ่ื ง หลกั การทำงานของบริการเว็บไซต์บนระบบอนิ เทอรเ์ น็ต.............................. โครงการสอนหนว่ ยท่ี 1 เร่ือง หลักการทำงานของบริการเว็บไซต์บนระบบอินเทอรเ์ นต็ ............................... แผนการจดั การเรยี นรู้หนว่ ยที่ 1 เรอื่ ง หลกั การทำงานของบรกิ ารเวบ็ ไซต์บนระบบอนิ เทอรเ์ น็ต.................. เอกสารประกอบการเรยี นหน่วยที่ 1 เรื่อง หลกั การทำงานของบริการเว็บไซต์บนระบบอินเทอร์เนต็ ........... บรรณานกุ รม……………………………………………………………………………………………………………………………… ขอ้ แนะนำในการเตรียมส่ือและการใช้ส่ือการสอน…………………………………………………………………………… ตวั อย่างสือ่ PowerPoint หน่วยที่ 1 เร่ือง หลกั การทำงานของบริการเวบ็ ไซต์บนระบบอินเทอรเ์ นต็ ……. ภาคผนวก………………………………………………………………………………………………………………………….. เฉลยแบบฝกึ หัดท้ายหนว่ ยท่ี 1 เรือ่ ง หลักการทำงานของบรกิ ารเวบ็ ไซตบ์ นระบบอินเทอร์เนต็ ...... แบบทดสอบกอ่ นเรียนหน่วยท่ี 1 เรอ่ื ง หลักการทำงานของบรกิ ารเวบ็ ไซตบ์ นระบบอนิ เทอรเ์ นต็ ... เฉลยแบบทดสอบก่อนเรยี นหน่วยท่ี 1 เรอื่ ง หลกั การทำงานของบริการเว็บไซต์บนระบบ อนิ เทอรเ์ น็ต................................................................................................................................................... แบบทดสอบหลังเรียนหนว่ ยท่ี 1 เรือ่ ง หลกั การทำงานของบริการเว็บไซต์บนระบบอนิ เทอรเ์ น็ต ............................................................................................................................... ........................................ เฉลยแบบทดสอบหลงั เรยี นหนว่ ยที่ 1 เรอ่ื ง หลักการทำงานของบริการเวบ็ ไซต์บนระบบ อนิ เทอรเ์ นต็ ............................................................................................................................... ................. แบบสังเกตพฤติกรรมการเรียนรู้รายบคุ คล......................................................................... แบบสงั เกตพฤติกรรมการเข้าร่วมกจิ กรรมกลุ่ม.................................................................. แบบประเมินการนำเสนอผลงานรายบคุ คล........................................................................ แบบประเมินคุณธรรม จริยธรรม คา่ นยิ ม และคุณลักษณะอันพงึ ประสงค์.........................

ห น้ า | 5 รายละเอยี ดของหลักสตู รรายวิชา หลกั สูตร ประกาศนยี บัตรวชิ าชีพชนั้ สูง พุทธศักราช 2563 ประเภทวชิ บรหิ ารธรุ กจิ รหสั วชิ า 30204-2103 ชือ่ วชิ า การพฒั นาเว็บไซตท์ างธุรกิจ ทฤษฎี 2 ชัว่ โมง/สัปดาห์ ปฏิบตั ิ 2 ช่วั โมง/สปั ดาห์ จำนวน 3 หนว่ ยกติ จุดประสงค์รายวชิ า 1. เขา้ ใจเกย่ี วกบการออกแบบ พัฒนาเว็บไซตใ์ นงานธรุ กิจ 2. สามารถประยุกต์ใช้โปรแกรมสร้างเว็บไซตใ์ นงานธุรกจิ 3. มีเจตคตแิ ละกจิ นสิ ัยทีด่ ีในการปฏบิ ตั งิ านด้วยความรับผิดชอบ ซอื่ สัตย์ ละเอยี ด รอบคอบ สมรรถนะรายวิชา 1. แสดงความรเู้ ก่ยี วกบการออกแบบเพ่ือพัฒนาเวบ็ ไซต์ 2. สามารถพฒั นาเวบ็ ไซต์ทางธุรกจิ คำอธิบายรายวิชา ศกึ ษาและปฏบิ ัติเกยี่ วกบพ้ืนฐานและการทำงานของบริการเว็บบนระบบอินเทอร์เน็ต (World Wide Web)การพัฒนาเว็บไซตแ์ บบ Dynamic ด้วยโปรแกรมพฒั นาเว็บด้านการจดั การเนอ้ื หา (CMS) โปรแกรมสำเรจ็ รูปหรือโปรแกรมพฒั นาเว็บอื่น ๆ การติดต้ัง การบำรุงรกั ษาระบบ ติดตอ่ กบฐานขอ้ มูล และจดั ทำคูม่ ือ

ห น้ า | 6 ตารางที่ 1. วเิ คราะห์หลักสตู รและระดับความสำคัญของหนว่ ยการเรียนรู้ รหสั วิชา 30204-2103ชอื่ วชิ า การพัฒนาเวบ็ ไซตท์ างธุรกิจ จำนวน 3 หน่วยกิต ทฤษฎี 2 ชว่ั โมง/สปั ดาห์ ปฏบิ ัติ 2 ชว่ั โมง/สัปดาห์ พุทธิพสิ ยั ทกั ษะพิสยั จิตพสิ ัย พฤติกรรม ความจำ ความเข้าใจ นำไปใช้ วิเคราะ ์ห ัสงเคราะ ์ห ประเมินค่า การเ ีลยนแบบ ทำตามแบบ ความ ูถก ้ตองแ ่มนยำ กระทำ ่ตอเ ื่นองผสมผสาน กระทำเคยชิน ัอตโน ัม ิต การรับรู้ การตอบสนอง การสร้างคุณค่าอัตโน ัมติ การ ัจดระเ ีบยบ การสร้าง ัลกษณะนิ ัสย รวม คิดเ ็ปนร้อยละ ลำ ัดบความสำคัญ จำนวนชั่วโมง ชอื่ หนว่ ย น้ำหนกั 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 100 - หลักการทำงานของบริการ 4 เว็บไซต์บนระบบอินเทอร์เนต็ 3 6 3 44- 5- 25 6.68 9 การพัฒนาเวบ็ ไซตด์ ว้ ยโปรแกรม 4 5 -ตารา 6- 4 566 6- Adobe Dreamweaver 556 58 556 69 CC2017 358 457 -8 31 8.29 8 การจัดรปู แบบการแสดงผล 458 -8 8 558 5- เอกสารเว็บไซต์ 465 688 6 10 38 10.16 6 558 5- หลกั การออกแบบกราฟิกสำหรบั 4 321 12 เว็บไซต์ 667 48 12.83 3 การจดั การตารางออกแบบหนา้ 4 เว็บเพจ็ 667 50 13.37 2 การเช่ือมโยงหนา้ เพ็จด้วย 4 Hyper Link 558 42 11.23 5 การออกแบบหนา้ เว็บเพ็จ 8 ลกั ษณะ Responsive Web Design 558 43 11.50 4 การออกแบบและพัฒนาเวบ็ ไซต์ 8 แอพลิเคชน่ั ดว้ ย PHP 345 35 9.36 7 กรณีศกึ ษาเว็บไซตข์ ายสนิ ค้า 24 ออนไลน์ 6 8 10 62 16.58 1 การเผยแพร่เว็บไซต์บน 4 อินเทอร์เนต็ 345 35 8.56 7 ลำดบั ความสำคัญ 321 409 100 72 ตารางท่ี 2. วเิ คราะห์หนว่ ยการเรยี นรู้และเวลาทใี่ ชใ้ นการจดั การเรยี นรู้

ห น้ า | 7 รหสั วชิ า 30204-2103ชื่อวิชา การพัฒนาเวบ็ ไซตท์ างธุรกิจ จำนวน 3 หน่วยกติ ทฤษฎี 2 ช่ัวโมง/สัปดาห์ ปฏบิ ตั ิ 2 ชวั่ โมง/สัปดาห์ หน่วยที่ ชื่อหน่วยการเรยี นรู้ สัปดาห์ ชั่วโมงที่ ท่ี 1 หลักการทำงานของบริการเว็บไซตบ์ นระบบอนิ เทอร์เน็ต 14 2 การพัฒนาเว็บไซต์ด้วยโปรแกรม Adobe Dreamweaver CC2017 24 3 การจดั รปู แบบการแสดงผลเอกสารเว็บไซต์ 4 หลกั การออกแบบกราฟิกสำหรบั เวบ็ ไซต์ 3-4 8 5 การจดั การตารางออกแบบหน้าเวบ็ เพ็จ 6 การเชือ่ มโยงหน้าเพ็จดว้ ย Hyper Link 54 7 การออกแบบหน้าเว็บเพจ็ ลักษณะ Responsive Web Design 8 การออกแบบและพฒั นาเวบ็ ไซต์แอพลิเคช่นั ดว้ ย PHP 64 9 กรณศี ึกษาเวบ็ ไซตข์ ายสินค้าออนไลน์ 10 การเผยแพรเ่ วบ็ ไซตบ์ นอินเทอรเ์ นต็ 74 8-9 8 10-11 8 12-17 24 18 4 รวม ตารางที่ 3. วเิ คราะห์ หวั ข้อหลกั /หัวขอ้ รอง/หวั ข้อย่อย และเวลาจดั การเรียนรู้

ห น้ า | 8 รหสั วิชา 30204-2103 ชอ่ื วิชา การพฒั นาเว็บไซต์ทางธรุ กจิ จำนวน 3 หนว่ ยกิต ทฤษฎี 2 ชัว่ โมง/สปั ดาห์ ปฏบิ ัติ 2 ช่ัวโมง/สัปดาห์ สัปดาห์ หนว่ ย เวลาจดั การเรยี นรู้ ที่ ท่ี ช่อื หน่วยการเรียนรู้/หวั ขอ้ การเรียนรู้ ทฤษฎี ปฏบิ ตั ิ รวม (ชม.) 1 1 หลกั การทำงานของบริการเวบ็ ไซตบ์ นระบบ 31 4 อินเทอรเ์ นต็ 1.1).ความรู้เกี่ยวกบั เว็บไซต์ 31 8 1.2).ความรู้หลักการออกแบบเวบ็ ไซตเ์ พื่อธุรกจิ 2 6 16 1.3).สว่ นประกอบของเวบ็ ไซต์ 1.4).การเลือกใชส้ ี 1.5).รูปแบบไฟล์ที่เหมาะสมสำหรบั การพฒั นาเว็บไซต์ 1.6).ภาษาทเ่ี หมาะสมในการพัฒนาเวบ็ ไซต์ 1.7).รปู แบบของเวบ็ ไซตเ์ พ่ือธุรกจิ 2 2 การพัฒนาเว็บไซตด์ ว้ ยโปรแกรม Adobe Dreamweaver CC2017 2.1).ความสามารถ Adobe Dreamweaver CC2017 2.2).Feature โปรแกรม Adobe Dreamweaver CC2017 2.3X.สว่ นประกอบโปรแกรม Adobe Dreamweaver CC2017 2.4).การสร้าง Site 2.5).การสร้างหนา้ เวบ็ เพ็จ 2.6).การบนั ทกึ ปิด เปิด ไฟล์เว็บเพจ็ 2.7).การกำหนดคุณสมบัติพื้นฐานโปรแกรม Adobe Dreamweaver CC2017 3-4 3 การจัดรปู แบบการแสดงผลเอกสารเวบ็ ไซต์ 3.1).ลักษณะข้อความบนเว็บไซต์ 3.2).ภาษาจดั รปู แบบการแสดงผลเอกสาร HTML 3.3).โครงรา่ งจัดรูปแบบการแสดงผลเอกสารเวบ็ เพ็จ

ห น้ า | 9 สัปดาห์ หนว่ ย เวลาจดั การเรยี นรู้ ท่ี ท่ี ชือ่ หน่วยการเรียนรู้/หวั ข้อการเรยี นรู้ ทฤษฎี ปฏิบัติ รวม 5 (ชม.) 6 3.4).แม่แบบเอกสารเวบ็ ไซต์ 7 3.5).การสร้างข้อความ จดั รปู แบบข้อความ 3.6).การสร้าง CSS จัดการรูปแบบการแสดงผลเว็บเพ็จ 3.7).การใช้ Bootstrap Framework จัดการรปู แบบการ แสดงผลเวบ็ เพ็จ 3.8).การแทรกรปู ภาพในเวบ็ เพจ็ 3.9).สร้างหนา้ เว็บเพจ็ จากเอกสารแมแ่ บบเว็บไซต์ 4 หลักการออกแบบกราฟกิ สำหรับเวบ็ ไซต์ 1 3 20 4.1).กราฟิกในงานเว็บไซต์ 4.2).รูปแบบกราฟกิ เพอื่ งานเว็บไซต์ 4.3).การสรา้ ง Header 4.4).การสร้าง Navgitionbar 4.5).การสร้าง Banner 4.6).การสร้างแอนิเมชัน่ เพ่ืองานเวบ็ ไซต์ 4.7).บันทกึ กราฟิกเพื่องานเว็บไซต์ 5 การจัดการตารางออกแบบหน้าเวบ็ เพ็จ 1 3 24 5.1).คณุ สมบัติของตาราง 5.2).การสรา้ งตารางและการปรับแต่งตาราง 5.3).การจดั การตาราง 5.4).การวางโครงร่างเว็บเพ็จดว้ ยตาราง 6 การเชื่อมโยงหนา้ เพจ็ ด้วย Hyper Link 1 3 28 6.1).รูปแบบการเชื่อมโยงในหน้าเว็บเพจ็ 6.2).เทคนิค Map Link 6.3).การเชอ่ื มโยงภายในเว็บเพ็จ

ห น้ า | 10 สัปดาห์ หน่วย เวลาจัดการเรียนรู้ ที่ ท่ี 8-9 ชื่อหน่วยการเรียนรู้/หัวข้อการเรียนรู้ ทฤษฎี ปฏิบตั ิ รวม (ชม.) 10-11 6.4).การเช่ือมโยงภายนอกเว็บเพ็จ 12-17 6.5).การสร้างจุดเชื่อมโยงดาว์นโหลดไฟล์ 6.6).การเช่อื มโยงด้วยเทคนคิ Map Link 6.7).การแก้ไขจดุ เช่ือมโยง 7 การออกแบบหนา้ เว็บเพจ็ ลกั ษณะ Responsive Web 2 6 36 Design 7.1).ความรู้เกี่ยวกับ Responsive Web Design 7.2).หลักการสร้าง Layout ด้วย Fluid Grid Layout 7.3).ความร้เู ก่ยี วกบั Div Tag และ Cascading Style Sheet 7.4).การออกแบบ Layout หน้าเว็บเพจ็ ลกั ษณะ Responsive Web Design ด้วย Fluid Grid Layout 7.5).การใช้ Bootstrap Frameworks 8 การออกแบบและพฒั นาเวบ็ ไซต์แอพลเิ คชัน่ ดว้ ย PHP 2 6 44 8.1).ร้จู ักภาษา PHP 8.2).รูปแบบคำสั่ง PHP 8.3).การทำงานของ PHP กับการจัดการฐานข้อมลู 8.4).การติดตง้ั PHP และโปรแกรมทจี่ ำเปน็ 8.5).การใชโ้ ปรแกรมจัดการฐานข้อมูล 8.6).การใช้ PHP ติอต่อกับฐานขอ้ มูล 8.7).การสร้างฟอรม์ เพอ่ื ส่งค่า และรับคา่ ลงในฐานขอ้ มูล 9 กรณศี กึ ษาเวบ็ ไซต์ขายสนิ ค้าออนไลน์ 6 18 68 9.1).ความรูเ้ ก่ียวกับการขายสินค้าออนไลน์ 9.2).การเตรยี มข้อมลู เพื่อสรา้ งเว็บไซต์ขายสินคา้ ออนไลน์ 9.3).การสร้าง Sitemap

ห น้ า | 11 สัปดาห์ หน่วย เวลาจดั การเรียนรู้ ที่ ท่ี ชื่อหน่วยการเรียนรู้/หวั ข้อการเรยี นรู้ ทฤษฎี ปฏิบัติ รวม (ชม.) 9.4).การออกแบบฐานข้อมลู ขายสนิ ค้าออนไลน์ 1 3 72 9.5).การสร้างระบบนับจำนวนผู้เขา้ ชม 9.6).การสรา้ งระบบสมาชกิ 9.7).ระบบคลังสินค้า 9.8).ระบบบริหารจัดการรา้ น 18 10 การเผยแพร่เวบ็ ไซตบ์ นอนิ เทอร์เนต็ 10.1).เว็บเซริ ์ฟเวอร์ 10.2).เวบ็ โฮสตงิ้ 10.3).วิธกี ารอพั โหลดเว็บไซต์ 10.4).โปรแกรม FTP สำหรบั อัพโหลดเวบ็ ไซต์ 10.5).ตรวจสอบขนาดของไฟลเ์ ว็บเพจ 10.6).อัพโหลดเว็บไซต์ไปยังโฮสต้ิง

ตารางท่ี 4. วิเคราะห์ จุดประสงคเ์ ชงิ พฤตกิ รร รหัสวิชา 30204-2103 ชอ่ื วิชา การพฒั นาเว็บไซต์ทางธุรกิจ ทฤษฎ หน่วยท่ี 1 พนื้ ฐานการออกแบบและพัฒนาเว็บไซต์ รายการความรู้ (Knowledge) จดุ ประสงคเ์ ชงิ พฤตกิ รรม 1). ความรูเ้ กย่ี วกับเวบ็ ไซต์ 1). อธบิ ายความร้เู บ้ืองตน้ พ้ืน เวบ็ ไซต์ตามมาตรฐาน W3C ไ 2). ความรหู้ ลกั การออกแบบเวบ็ ไซต์ 3). รปู แบบไฟล์ที่เหมาะสมสำหรับการพฒั นาเวบ็ ไซต์ 2). บอกสว่ นประกอบของเว็บ 4). ภาษาท่ีเหมาะสมในการพัฒนาเว็บไซต์ 3). อธิบายรปู แบบไฟลท์ ี่เหมา 5). รูปแบบของเวบ็ ไซต์เพ่ือธุรกจิ ตามาตรฐานภาพได้ 4). บอกภาษาที่เหมาะกบั การ รายการทกั ษะ (Skills) 5). อธบิ ายรูปแบบของเว็บไซต 1). การออกแบบโครงสร้างเว็บไซต์ ออกแบบออกแบบเว็บไซตไ์ ด้ 2). การเลือกใช้สี จดุ ประสงคเ์ ชงิ พฤติกรรม 1). ออกแบบโครงสร้างเว็บไซ เวบ็ ไซต์ได้ 2). เลอื กใช้ไฟล์ สี สำหรับเว็บ จำลองเฉดสีได้

P a g e | 12 รมกับหวั ข้อการเรยี นรู้และระดับพฤตกิ รรมท่ตี อ้ งการ ฎี 2 ชว่ั โมง/สัปดาห์ ปฏิบัติ 2 ช่วั โมง/สัปดาห์ จำนวน 3 หนว่ ยกิต ดา้ นพุทธิพิสัย ดา้ นทักษะพิสยั ด้านจิตพิสยั ม (Behavioral Objectives) ความรู้ ความจำ ความเ ้ขาใจ การนำไปใช้ วิเคราะ ์ห ัสงเคราะห์ ประเมินค่า การเ ีลยนแบบ การทำตามแบบ การทำถูก ้ตองแม่นยำ การทำอย่างผสมผสาน การทำอย่างอัตโนมั ิต การรับรู้ การตอบสนอง การเ ็หนคุณค่า การ ัจดกระบวนการ ิคด การ ีม ัลกษณะเฉพาะตน นฐานการออกแบบและพฒั นา ✓ ✓✓ ได้ ✓ ✓✓ ✓✓ บไซต์ได้ตามมาตรฐานเวบ็ ไซต์ได้ ✓ ✓✓ ✓✓ าะสมสำหรบั การพฒั นาเวบ็ ไซต์ รพฒั นาเวบ็ ไซต์ได้ ✓ ต์เพอื่ ธุรกิจตามมาตรฐานการ ✓ ม (Behavioral Objectives) ✓ ✓ ซต์ไดอ้ ย่างถูกตอ้ งมาตรฐาน ✓ บไซต์ดว้ ยโปรแกรมเลือกสีและ ✓

ตารางที่ 4. (ต่อ) วเิ คราะห์ จุดประสงคเ์ ชงิ พฤติก รหัสวิชา 30204-2103 ชื่อวชิ า การพฒั นาเว็บไซต์ทางธรุ กิจ ทฤษฎ หน่วยท่ี 2 การพัฒนาเวบ็ ไซตด์ ้วยโปรแกรม Adobe Dreamweaver CC2017 รายการความรู้ (Knowledge) จุดประสงค์เชงิ พฤติกรรม ( 1). ความสามารถ Adobe Dreamweaver CC2017 1). อธบิ ายเกีย่ วกบั โปรแกรม A CC2017 ได้ 2). Feature โปรแกรม Adobe Dreamweaver CC2017 2). บอก Feature โปรมแกรม 3). ส่วนประกอบโปรแกรม Adobe Dreamweaver CC2017 ได้ CC2017 3). อธบิ ายสว่ นประกอบโปรแก CC2017 ได้ รายการทักษะ (Skills) จุดประสงค์เชงิ พฤติกรรม ( 1). สรา้ ง Site จดั เก็บเวบ็ เพ็จได 1). การสรา้ ง Site 2). บันทกึ เปิด ปดิ ไฟล์เวบ็ ไซต Dreamweaver CC2017 ได้ถูก 2). การใชโ้ ปรแกรม Adobe Dreamweaver CC2017

ห น้ า | 13 กรรมกับหัวขอ้ การเรียนรแู้ ละระดับพฤติกรรมทตี่ อ้ งการ ดา้ นจติ พิสยั ฎี 2 ชั่วโมง/สปั ดาห์ ปฏบิ ตั ิ 2 ชวั่ โมง/สปั ดาห์ จำนวน 3 หนว่ ยกติ 7 ด้านพุทธิพสิ ยั ด้านทกั ษะพสิ ยั (Behavioral Objectives) ความ ู้ร ความจำ ความเ ้ขาใจ การนำไปใช้ วิเคราะ ์ห สังเคราะ ์ห ประเ ิมนค่า การเลียนแบบ การทำตามแบบ การทำ ูถก ้ตองแ ่มนยำ การทำอย่างผสมผสาน การทำอย่างอัตโน ัม ิต การรับรู้ การตอบสนอง การเ ็หนคุณค่า การ ัจดกระบวนการคิด การ ีม ัลกษณะเฉพาะตน Adobe Dreamweaver ✓ ✓✓ Adobe Dreamweaver ✓ ✓✓ ✓✓ กรม Adobe Dreamweaver ✓ (Behavioral Objectives) ✓ ✓ ดถ้ ูกต้องตามคู่มือการใชง้ าน ✓ ✓ ต์ด้วยโปรแกรม Adobe กต้องตามคมู่ ือการใชง้ าน

ตารางท่ี 4. (ตอ่ ) วิเคราะห์ จดุ ประสงค์เชงิ พฤติก รหัสวชิ า 30204-2103 ชอื่ วิชา การพัฒนาเวบ็ ไซต์ทางธรุ กิจ ทฤษฎ หนว่ ยท่ี 3 การจดั รปู แบบการแสดงผลเอกสารเว็บไซต์ รายการความรู้ (Knowledge) จุดประสงคเ์ ชงิ พฤติกรรม ( 1). ลักษณะข้อความบนเวบ็ ไซต์ 1). อธบิ ายลักษณะข้อความบน 2). ภาษาจดั รปู แบบการแสดงผลเอกสาร HTML 2). บอกภาษาจัดรปู แบบเอกสา 3). การจดั รูปแบบการแสดงผลเอกสารเว็บเพ็จ ตามมาตรฐาน W3C 4). แม่แบบเอกสารเวบ็ ไซต์ 3). อธิบายรปู แบบการจดั โครงร รายการทกั ษะ (Skills) 4). จำแนกแม่แบบเอกสารเว็บไ 1). การสรา้ งข้อความและจดั รูปแบบขอ้ ความ 2). การแทรกรปู ลงในเอกสารเว็บเพ็จได้ จดุ ประสงคเ์ ชิงพฤตกิ รรม ( 3). การใช้คำสั่ง CSS 1). สร้างขอ้ ความและจดั รูปแบ 4). การใช้ Bootstrap Framework 2). แทรกรปู ลงในเอกสารเว็บเพ 3). ใชค้ ำสง่ั CSS จดั แตง่ เอกสา มาตรฐาน W3C 4). สร้างหน้าเวบ็ ไซตด์ ้วย Boo ถูกต้องตามมาตรฐาน W3C

ห น้ า | 14 กรรมกบั หัวขอ้ การเรียนรแู้ ละระดบั พฤตกิ รรมท่ตี อ้ งการ ฎี 2 ชัว่ โมง/สปั ดาห์ ปฏบิ ัติ 2 ชั่วโมง/สัปดาห์ จำนวน 3 หนว่ ยกติ ด้านพุทธิพสิ ัย ด้านทกั ษะพสิ ยั ด้านจติ พสิ ยั (Behavioral Objectives) ความรู้ ความจำ ความเข้าใจ การนำไปใช้ วิเคราะ ์ห ัสงเคราะห์ ประเ ิมนค่า การเ ีลยนแบบ การทำตามแบบ การทำ ูถกต้องแม่นยำ การทำอย่างผสมผสาน การทำอย่างอัตโนมั ิต การรับรู้ การตอบสนอง การเ ็หนคุณค่า การจัดกระบวนการ ิคด การมีลักษณะเฉพาะตน นเวบ็ ไซต์ได้ ✓ ✓✓ ารด้วยคำส่งั HTML ไดถ้ ูกต้อง ✓✓ ✓ ✓✓ ✓✓ รา่ งแสดงผลเอกสารเวบ็ เพจ็ ได้ ✓ ✓ ✓ ไซต์รูปแบบต่างๆ ได้ ✓ ✓ ✓ (Behavioral Objectives) ✓ ✓ บบขอ้ ความถูกต้องได้ ✓ พ็จได้ ารเว็บเพ็จได้ถูกต้องตาม otstrap Framework ได้ ✓

ตารางที่ 4. (ต่อ) วิเคราะห์ จดุ ประสงค์เชงิ พฤติก รหสั วชิ า 30204-2103 ชอ่ื วชิ า การพฒั นาเวบ็ ไซต์ทางธุรกิจ ทฤษฎ หน่วยท่ี 4 หลกั การออกแบบกราฟกิ สำหรบั เว็บไซต์ รายการความรู้ (Knowledge) จุดประสงคเ์ ชิงพฤตกิ รรม ( 1). กราฟิกในงานเวบ็ ไซต์ 1). อธิบายกราฟิกในงานเว็บไซ 2). ลักษณะกราฟกิ ในงานเว็บไซต์ 2). บอกลกั ษณะกราฟกิ ในงานเ 3). รูปแบบกราฟกิ เพือ่ งานเว็บไซต์ 3). จำแนกรูปแบบกราฟิกเพื่อง รายการทักษะ (Skills) จุดประสงคเ์ ชิงพฤตกิ รรม ( 1). การสร้าง Header 1). สรา้ ง Header ได้ถูกต้องตา 2). การสร้าง Navgitionbar 2). สรา้ ง Navigation bar ได้ถ 3). การสรา้ ง Banner 3). สร้าง Banner ไดถ้ กู ต้องตา 4). การสร้างแอนิเมชั่นเพ่ืองานเวบ็ ไซต์ 4). ใช้โปรแกรมสร้าง แอนเิ มชัน่ การใช้งาน

ห น้ า | 15 กรรมกับหวั ขอ้ การเรียนรู้และระดับพฤตกิ รรมทต่ี ้องการ ฎี 2 ชว่ั โมง/สัปดาห์ ปฏบิ ตั ิ 2 ช่วั โมง/สปั ดาห์ จำนวน 3 หนว่ ยกิต ด้านพทุ ธพิ ิสยั ดา้ นทกั ษะพสิ ยั ด้านจิตพสิ ัย (Behavioral Objectives) ความรู้ ความจำ ความเ ้ขาใจ การนำไปใ ้ช วิเคราะ ์ห สังเคราะ ์ห ประเมิน ่คา การเลียนแบบ การทำตามแบบ การทำ ูถก ้ตองแ ่มนยำ การทำอ ่ยางผสมผสาน การทำอ ่ยาง ัอตโนมัติ การรับ ู้ร การตอบสนอง การเ ็หนคุณ ่คา การ ัจดกระบวนการ ิคด การมีลักษณะเฉพาะตน ซต์ไดถ้ ูกต้องตามมาตรฐาน ✓ ✓✓ เว็บไซต์ได้ ✓ ✓✓ งานเวบ็ ไซต์ได้ ✓ ✓✓ (Behavioral Objectives) ✓ ✓ ✓ ✓ ามค่มู ือการใชง้ าน ✓ ✓ ถกู ต้องตามคมู่ ือการใชง้ าน ามคูม่ ือการใชง้ าน ✓ ✓ นเพ่ืองาน ได้ถูกต้องตามคู่มือ

ตารางท่ี 4. (ต่อ) วเิ คราะห์ จุดประสงคเ์ ชงิ พฤติก รหสั วิชา 30204-2103 ช่ือวชิ า การพัฒนาเว็บไซต์ทางธุรกิจ ทฤษฎ หน่วยที่ 5 การจดั การตารางออกแบบหน้าเว็บเพจ็ รายการความรู้ (Knowledge) จดุ ประสงคเ์ ชงิ พฤตกิ รรม ( 1). คุณสมบัติของตาราง 1). อธบิ ายคณุ สมบัตขิ องตาราง 2). จดั การตารางเพื่องานเว็บไซต์ 2). บอกการจดั การตารางเพื่อง รายการทกั ษะ (Skills) จดุ ประสงคเ์ ชงิ พฤตกิ รรม ( 1). การสร้างตารางและการปรับแต่งตาราง 1). สร้างตารางและการปรบั แต ใชง้ าน 2). การออกแบบวางโครงรา่ งเว็บเพจ็ ด้วยตาราง 2). ออกแบบโครงร่างเวบ็ เพ็จด การใช้งาน

ห น้ า | 16 กรรมกบั หัวข้อการเรียนรู้และระดบั พฤตกิ รรมที่ต้องการ ฎี 2 ชั่วโมง/สัปดาห์ ปฏบิ ัติ 2 ชั่วโมง/สปั ดาห์ จำนวน 3 หนว่ ยกติ ดา้ นพทุ ธิพสิ ยั ดา้ นทกั ษะพสิ ยั ด้านจิตพิสยั (Behavioral Objectives) ความ ู้ร ความจำ ความเ ้ขาใจ การนำไปใช้ วิเคราะ ์ห สังเคราะ ์ห ประเ ิมนค่า การเลียนแบบ การทำตามแบบ การทำ ูถก ้ตองแ ่มนยำ การทำอย่างผสมผสาน การทำอย่างอัตโน ัม ิต การรับรู้ การตอบสนอง การเ ็หนคุณค่า การ ัจดกระบวนการคิด การ ีม ัลกษณะเฉพาะตน งได้ ✓ ✓✓ งานเว็บไซต์ได้ ✓ ✓✓ (Behavioral Objectives) ✓ ✓ ✓ ✓ ตง่ ตารางไดถ้ กู ต้องตามคู่มือการ ดว้ ยตารางไดถ้ ูกต้องตามคูม่ ือ

ตารางที่ 4. (ตอ่ ) วเิ คราะห์ จดุ ประสงคเ์ ชิงพฤตกิ รหสั วชิ า 30204-2103 ช่ือวชิ า การพฒั นาเว็บไซต์ทางธรุ กิจ ทฤษฎ หน่วยที่ 6 การเช่ือมโยงหน้าเพ็จด้วย Hyper Link รายการความรู้ (Knowledge) จดุ ประสงคเ์ ชิงพฤตกิ รรม ( 1). รูปแบบการเชื่อมโยงในหน้าเว็บเพ็จ 1). อธบิ ายคณุ สมบัติ และการท (Hyperlink)ได้ถกู ต้องตามคู่มือ 2). เทคนิค Map Link 2). บอกเทคนคิ Map link ได้ถ รายการทักษะ (Skills) จดุ ประสงคเ์ ชงิ พฤติกรรม ( 1).การเชอ่ื มโยงภายในเวบ็ เพ็จ 1). สรา้ งจดุ เชื่อมโยง (Hyperlin 2).การเชอ่ื มโยงภายนอกเว็บเพ็จ 3).การสร้างจดุ เชอื่ มโยงดาว์นโหลดไฟล์ 2). สร้างจดุ เชื่อมโยง (Hyperlin 4).การเชื่อมโยงด้วยเทคนิค Map Link 5).การแก้ไขจุดเช่อื มโยง 3). สรา้ งจุดเชือ่ มโยง (Hyperlin 4). สรา้ งจดุ เช่อื มโยง (Hyperlin 5).แกไ้ ขจดุ เช่อื มโยง

ห น้ า | 17 กรรมกับหวั ข้อการเรียนร้แู ละระดับพฤติกรรมทตี่ ้องการ ฎี 2 ช่ัวโมง/สัปดาห์ ปฏิบตั ิ 2 ชว่ั โมง/สัปดาห์ จำนวน 3 หนว่ ยกติ ดา้ นพทุ ธิพสิ ัย ด้านทักษะพิสัย ด้านจิตพิสยั (Behavioral Objectives) ความ ู้ร ความจำ ความเ ้ขาใจ การนำไปใช้ วิเคราะ ์ห สังเคราะ ์ห ประเ ิมนค่า การเลียนแบบ การทำตามแบบ การทำ ูถก ้ตองแ ่มนยำ การทำอย่างผสมผสาน การทำอย่างอัตโน ัม ิต การรับรู้ การตอบสนอง การเ ็หนคุณค่า การ ัจดกระบวนการคิด การ ีม ัลกษณะเฉพาะตน ทำงานของจุดเชือ่ มโยง ✓ ✓✓ อการใช้งาน ✓ ✓✓ ถกู ต้องตามคู่มือการใช้งาน (Behavioral Objectives) ✓ ✓ nk) ภายในเวบ็ เพ็จ ✓ ✓ ✓ ✓ nk) นอกเว็บเพจ็ ✓ ✓ ✓ ✓ nk) ดาวน์ โหลดไฟล์ nk) เทคนิค Map Link

ตารางท่ี 4. (ต่อ) วิเคราะห์ จดุ ประสงคเ์ ชิงพฤติก รหสั วชิ า 30204-2103 ชือ่ วิชา การพัฒนาเว็บไซต์ทางธุรกิจ ทฤษฎ หน่วยที่ 7 การออกแบบหน้าเวบ็ เพจ็ ลักษณะ Responsive Web Design รายการความรู้ (Knowledge) จุดประสงค์เชงิ พฤติกรรม ( 1). ความร้เู ก่ยี วกบั Responsive Web Design 1). อธบิ าย Responsive Web มาตรฐาน W3C 2). หลักการสร้าง Layout ดว้ ย Fluid Grid Layout 2). บอกการสร้าง Layout ด้วย 3). ความรูเ้ ก่ียวกับ Div Tag และ Cascading Style Sheet ที่ใชก้ บั Responsive Web Design 3). อธิบาย Div Tag และ Casc Responsive Web Design ได รายการทกั ษะ (Skills) จุดประสงคเ์ ชิงพฤตกิ รรม ( 1). Layout ด้วย Fluid Grid Layout 1). ออกแบบ Layout ดว้ ย Flu 2). คำสง่ั CSS Bootstrap Framework ตามคู่มือการใช้งาน 2). ใชค้ ำสั่ง CSS Bootstrap F 3). ประยุกต์ Bootstrap Framework มาใช้งานใน เพ็จได้ถูกต้องตามคมู่ ือการใช้งา เว็บเพ็จ 3). ใช้ Bootstrap Framewor Responsive Web Design ได

ห น้ า | 18 กรรมกบั หวั ขอ้ การเรียนรู้และระดบั พฤตกิ รรมทีต่ ้องการ ฎี 2 ชวั่ โมง/สัปดาห์ ปฏบิ ัติ 2 ชวั่ โมง/สัปดาห์ จำนวน 3 หนว่ ยกิต ดา้ นพุทธิพสิ ัย ดา้ นทกั ษะพสิ ยั ด้านจติ พิสยั (Behavioral Objectives) ความ ู้ร ความจำ ความเ ้ขาใจ การนำไปใช้ วิเคราะ ์ห สังเคราะ ์ห ประเมินค่า การเลียนแบบ การทำตามแบบ การทำ ูถก ้ตองแ ่มนยำ การทำอ ่ยางผสมผสาน การทำอย่างอัตโน ัม ิต การรับรู้ การตอบสนอง การเ ็หนคุณค่า การ ัจดกระบวนการคิด การ ีมลักษณะเฉพาะตน b Design ได้ถกู ต้องตาม ✓ ✓✓ ✓✓ ย Fluid Grid Layout ได้ ✓ ✓✓ cading Style Sheet ทีใ่ ช้กบั ✓ ด้ ✓ ✓ ✓ (Behavioral Objectives) ✓ uid Grid Layout ไดถ้ กู ต้อง Framework ตกแต่งหนา้ เว็บ ✓ าน ✓ rk สร้างเวบ็ ไซตล์ ักษณะ ด้ถูกต้องตามมาตรฐาน W3C

ตารางที่ 4. (ต่อ) วเิ คราะห์ จุดประสงคเ์ ชิงพฤตกิ รหสั วชิ า 30204-2103 ชื่อวิชา การพฒั นาเวบ็ ไซต์ทางธุรกิจ ทฤษฎ หน่วยท่ี 8 การออกแบบและพัฒนาเวบ็ ไซตแ์ อพลิเคช่นั ด้วย PHP รายการความรู้ (Knowledge) จุดประสงคเ์ ชงิ พฤติกรรม ( 1). รจู้ ักภาษา PHP 1). อธิบายภาษา PHP ได้ 2). รูปแบบคำสง่ั PHP 2). จำแนกรูปแบบคำส่ัง PHP ไ 3). การทำงานของ PHP กบั การจดั การฐานข้อมูล 3). บอกการทำงานของ PHP ก รายการทักษะ (Skills) จุดประสงคเ์ ชิงพฤติกรรม ( 1). การตดิ ตัง้ PHP และโปรแกรมทีจ่ ำเป็น 1). ตดิ ต้ัง PHP และโปรแกรมท การใชง้ าน 2). การใช้โปรแกรมจดั การฐานขอ้ มูล 2). ใช้โปรแกรมจดั การฐานข้อม งาน 3). การใช้ PHP ตดอตอ่ กับฐานขอ้ มลู 3). สรา้ งไฟล์ PHP ติดตอ่ กบั ฐา การใชง้ าน 4). การสรา้ งฟอร์มเพื่อส่งคา่ และรบั ค่าลงใน 4). สร้างฟอร์มเพ่ือส่งคา่ และร ฐานข้อมลู ตามคูม่ ือการใชง้ าน

P a g e | 19 กรรมกับหวั ข้อการเรียนรแู้ ละระดบั พฤติกรรมท่ีต้องการ ฎี 2 ช่วั โมง/สปั ดาห์ ปฏบิ ัติ 2 ชวั่ โมง/สัปดาห์ จำนวน 3 หนว่ ยกติ ดา้ นพุทธพิ ิสัย ด้านทักษะพสิ ยั ด้านจติ พิสัย (Behavioral Objectives) ความรู้ ความจำ ความเ ้ขาใจ การนำไปใ ้ช วิเคราะ ์ห สังเคราะ ์ห ประเมิน ่คา การเลียนแบบ การทำตามแบบ การทำ ูถก ้ตองแ ่มนยำ การทำอ ่ยางผสมผสาน การทำอ ่ยาง ัอตโนมัติ การรับ ู้ร การตอบสนอง การเ ็หนคุณ ่คา การ ัจดกระบวนการ ิคด การมีลักษณะเฉพาะตน ได้ ✓ ✓✓ กบั การจดั การฐานข้อมูล ได้ ✓ ✓✓ ✓ ✓✓ (Behavioral Objectives) ✓ ✓ ทจี่ ำเป็น ได้ถูกต้องตามคมู่ ือ ✓ ✓ ✓ ✓ มูล ได้ถกู ต้องตามคู่มือการใช้ ✓ ✓ านขอ้ มูล ไดถ้ ูกต้องตามคมู่ ือ รบั คา่ ลงในฐานข้อมลู ได้ถูกต้อง

ตารางที่ 4. (ต่อ) วิเคราะห์ จดุ ประสงคเ์ ชงิ พฤติก รหสั วิชา 30204-2103 ชื่อวชิ า การพฒั นาเว็บไซต์ทางธุรกิจ ทฤษฎ หน่วยท่ี 9 กรณศี ึกษาเวบ็ ไซต์ขายสนิ คา้ ออนไลน์ รายการความรู้ (Knowledge) จดุ ประสงคเ์ ชิงพฤตกิ รรม ( 1). ความรู้เก่ียวกบั การขายสินคา้ ออนไลน์ 1). อธิบายเกีย่ วกบั การขายสินค 2). การเตรยี มข้อมูลเพอ่ื สรา้ งเว็บไซต์ขายสนิ ค้า 2). จำแนกข้อมลู เพอื่ สรา้ งเวบ็ ไ ออนไลน์ 3).การออกแบบและพฒั นาเว็บไซตข์ ายสนิ คา้ ออนไลน์ 3). อธิบายวธิ กี ารการออกแบบ ออนไลน์ ได้ รายการทักษะ (Skills) 1). การสรา้ ง Sitemap จดุ ประสงคเ์ ชิงพฤติกรรม ( 2). การออกแบบฐานข้อมูลขายสนิ ค้าออนไลน์ 1). สร้าง Sitemap ไดถ้ กู ต้องต 2). ออกแบบฐานข้อมลู ขายสินค 3). การสร้างระบบนับจำนวนผเู้ ข้าชม การใชง้ าน 4). การสร้างระบบสมาชกิ 3). สรา้ งระบบนบั จำนวนผู้เข้าช 5). การสรา้ งระบบคลังสินค้า 4). สรา้ งระบบสมาชกิ ได้ถูกต้อ 6). การสร้างระบบบรหิ ารจดั การรา้ น 5). พฒั นาระบบคลงั สินค้า ได้ถ 6). พัฒนาระบบบริหารจัดการร งาน

P a g e | 20 กรรมกบั หวั ขอ้ การเรียนรแู้ ละระดบั พฤติกรรมทต่ี ้องการ ฎี 2 ชั่วโมง/สปั ดาห์ ปฏิบัติ 2 ชั่วโมง/สัปดาห์ จำนวน 3 หน่วยกติ ด้านพทุ ธิพสิ ัย ดา้ นทักษะพิสยั ดา้ นจติ พสิ ยั (Behavioral Objectives) ความ ู้ร ความจำ ความเ ้ขาใจ การนำไปใช้ วิเคราะ ์ห สังเคราะ ์ห ประเ ิมนค่า การเลียนแบบ การทำตามแบบ การทำ ูถก ้ตองแ ่มนยำ การทำอ ่ยางผสมผสาน การทำอย่างอัตโน ัม ิต การรับรู้ การตอบสนอง การเ ็หนคุณค่า การ ัจดกระบวนการคิด การ ีม ัลกษณะเฉพาะตน ค้าออนไลน์ ได้ ✓ ✓✓ ไซตข์ ายสินค้าออนไลน์ ได้ ✓ ✓✓ บและพัฒนาเวบ็ ไซต์ขายสินค้า ✓ ✓✓ (Behavioral Objectives) ✓ ✓ ตามค่มู ือการใช้งาน ✓ ค้าออนไลน์ ไดถ้ กู ต้องตามคู่มือ ✓ ✓ ✓ ชม ได้ถูกต้องตามคู่มือ ✓ ✓ องตามคู่มือการใชง้ าน ✓ ✓ ถูกต้องตามคมู่ ือการใชง้ าน ✓ ร้าน ไดถ้ กู ต้องตามคู่มอื การใช้ ✓

ตารางที่ 4. (ตอ่ ) วิเคราะห์ จุดประสงค์เชงิ พฤตกิ รหัสวิชา 30204-2103 ชือ่ วชิ า การพฒั นาเวบ็ ไซต์ทางธุรกิจ ทฤษฎ หน่วยท่ี 10 การ Upload เผยแพรเ่ ว็บไซต์บนอนิ เทอร์เน็ต รายการความรู้ (Knowledge) จดุ ประสงค์เชงิ พฤตกิ รรม ( 1). เวบ็ เซิร์ฟเวอร์ 1). อธิบายการทำงานเวบ็ เซิร์ฟ 2). เวบ็ โฮสติ้ง 2). จำแนกเว็บโฮสติง้ ได้ถกู ต้อง 3). วธิ ีการอพั โหลดเวบ็ ไซต์ 3). บอกวิธกี ารอพั โหลดเวบ็ ไซต รายการทักษะ (Skills) จุดประสงค์เชิงพฤติกรรม ( 1). การใช้โปรแกรม FTP สำหรบั อัพโหลดเว็บไซต์ 1). ใชโ้ ปรแกรม FTP สำหรบั อัพ คมู้ ือการใช้งาน 2). การตรวจสอบขนาดของไฟล์เว็บเพจ 2). ตรวจสอบขนาดของไฟลเ์ ว็บ 3). การอัพโหลดเว็บไซต์ไปยังโฮสต้งิ 3). ใชโ้ ปรแกรมสำเรจ็ รปู อัพโหล ถูกต้องตามคมู่ ือการใช้งาน

ห น้ า | 21 กรรมกับหัวข้อการเรียนรู้และระดับพฤตกิ รรมท่ตี อ้ งการ ฎี 2 ช่ัวโมง/สัปดาห์ ปฏิบตั ิ 2 ชัว่ โมง/สปั ดาห์ จำนวน 3 หนว่ ยกิต ด้านพทุ ธิพสิ ัย ดา้ นทกั ษะพสิ ยั ด้านจิตพสิ ัย (Behavioral Objectives) ความ ู้ร ความจำ ความเ ้ขาใจ การนำไปใช้ วิเคราะ ์ห สังเคราะ ์ห ประเ ิมนค่า การเลียนแบบ การทำตามแบบ การทำ ูถก ้ตองแ ่มนยำ การทำอย่างผสมผสาน การทำอย่างอัตโน ัม ิต การรับรู้ การตอบสนอง การเ ็หนคุณค่า การ ัจดกระบวนการคิด การ ีม ัลกษณะเฉพาะตน ฟเวอร์ได้ ✓ ✓✓ งตามมาตรฐาน ✓ ✓✓ ต์ได้ ✓✓ ✓ (Behavioral Objectives) ✓ ✓ พโหลดเวบ็ ไซต์ ไดถ้ ูกต้องตาม ✓ บเพจ็ ได้ ✓ ✓ ลดเว็บไซต์ไปยงั โฮสตง้ิ ได้ ✓

P a g e | 22 คมู่ ือครู ชดุ การสอนท่ี 1 เรือ่ ง หลกั การทำงานของบรกิ ารเว็บไซตบ์ นระบบอนิ เทอร์เน็ต คำชี้แจง ชุดการสอนเรื่องหลักการทำงานของบริการเว็บไซต์บนระบบอินเทอร์เน็ตต้องการให้ผูเ้ รียน ศึกษาเกีย่ วกับความรู้เกย่ี วกบั เวบ็ ไซต์ ความรหู้ ลักการออกแบบเวบ็ ไซต์ ส่วนประกอบของเว็บไซต์ การ เลือกใช้สี รูปแบบไฟล์ที่เหมาะสมสำหรับการพัฒนาเว็บไซต์ ภาษาที่เหมาะสมในการพัฒนาเว็บไซต์ รูปแบบของเว็บไซต์ธุรกิจ 1. จุดประสงคท์ ่ัวไป 1.1). ผ้เู รยี นมคี วามรูแ้ ละความเข้าใจ เก่ยี วกับเว็บไซต์ หลกั การออกแบบเว็บไซต์ ส่วนประกอบของเว็บไซต์.รูปแบบไฟล์ทเ่ี หมาะสมสำหรับการพฒั นาเวบ็ ไซต์ ภาษาท่เี หมาะสมในการ พฒั นาเวบ็ ไซต์ รปู แบบของเว็บไซตธ์ รุ กจิ 1.2). มีทักษะ เลือกใชไ้ ฟล์ สี สำหรับเว็บไซต์ดว้ ยโปรแกรมเลือกสแี ละจำลองเฉดสี ออกแบบ โครงสร้างเวบ็ ไซต์ไดอ้ ยา่ งถกู ต้องมาตรฐานเว็บไซต์ได้ 1.3). สนใจใฝ่รู้ รับผดิ ชอบเขา้ เรียนตรงเวลา แตง่ กายเรยี บร้อย มีน้ำใจช่วยเหลือช่วยเหลือ ผอู้ ่ืนและการปฏิบตั งิ านร่วมกับผูอ้ ืน่ 1.4). ยอมรับรปู แบบภาษาในการพัฒนาเวบ็ ไซต์ จดั ลำดับแนวทางหลักการออกแบบเวบ็ ไซต์ 1.5). มีเจตคติและกิจนิสัยที่ดีในการทำงาน ด้วยความละเอียดรอบคอบ ปลอดภัย เป็น ระเบียบ สะอาด ตรงต่อเวลา มีความซื่อสัตย์ รับผิดชอบ รักษาสภาพแวดล้อม และมีคุณธรรม จรยิ ธรรมและคุณลกั ษณะอันพงึ ประสงค์ทีต่ ้องการ 2. จดุ ประสงค์เชงิ พฤติกรรม เมอ่ื ผเู้ รียนเรียนเรือ่ งหลักการทำงานของบริการเวบ็ ไซตบ์ นระบบอนิ เทอร์เน็ตแล้วสามารถ 2.1). อธิบายความรู้เบอื้ งต้น พืน้ ฐานการออกแบบและพฒั นาเว็บไซต์ตามมาตรฐาน W3C ได้ 2.2). บอกสว่ นประกอบของเวบ็ ไซต์ไดต้ ามมาตรฐานเว็บไซต์ได้ 2.3). อธบิ ายรูปแบบไฟล์ท่เี หมาะสมสำหรับการพฒั นาเวบ็ ไซต์ตามาตรฐานภาพได้ 2.4). บอกภาษาทเ่ี หมาะกับการพฒั นาเว็บไซต์ได้ 2.5). อธบิ ายรูปแบบของเวบ็ ไซต์เพื่อธรุ กิจตามมาตรฐานการออกแบบออกแบบเวบ็ ไซต์ได้ 2.6). ออกแบบโครงสรา้ งเว็บไซตไ์ ดอ้ ย่างถกู ต้องมาตรฐานเว็บไซต์ได้ 2.7). เลือกใช้ไฟล์ สี สำหรับเว็บไซต์ด้วยโปรแกรมเลือกสแี ละจำลองเฉดสีได้

ห น้ า | 23 2.8). มีกจิ นิสัยในการปฏบิ ัตงิ านตามหลกั ของเศรษฐกิจพอเพยี ง 2.9) .มีกิจนิสัยค้นควา้ หาความรู้ด้วยตัวนำสกู่ ารลงมือปฏิบัติ โดยใช้ทกั ษะการเรยี นรแู้ ห่ง ศตวรรษที่ 21 (Active Learning) 2.10). มกี ารพฒั นาคุณธรรม จรยิ ธรรม ค่านิยม และคุณลักษณะอันพึงประสงค์ทผ่ี ู้สอน สามารถสังเกตเหน็ ได้ ในดา้ นความมมี นุษยสัมพนั ธ์ ความมีวินยั ความรบั ผดิ ชอบ ความเชือ่ มนั่ ในตนเอง ความสนใจใฝ่รู้ ความรักสามคั คี ความกตัญญูกตเวที 3. สว่ นประกอบของชดุ การสอนท่ี 1 เรอ่ื ง หลักการทำงานของบรกิ ารเว็บไซต์บนระบบ อินเทอร์เน็ต มดี งั นี้ 3.1). ค่มู ือครชู ดุ การสอนที่ 1 เรอ่ื ง หลกั การทำงานของบริการเว็บไซตบ์ นระบบอนิ เทอรเ์ น็ต 3.2). โครงการสอนท่ี 1 เรื่อง หลกั การทำงานของบริการเว็บไซตบ์ นระบบอนิ เทอร์เน็ต 3.3). แผนการจัดการเรียนรู้ เรื่อง หลักการทำงานของบริการเวบ็ ไซต์บนระบบอินเทอร์เน็ต 3.4). เอกสารประกอบการเรยี น เร่ือง หลกั การทำงานของบรกิ ารเว็บไซตบ์ นระบบ อนิ เทอร์เน็ต 3.5). แบบฝึกหดั ท้ายหนว่ ย เรอ่ื ง หลักการทำงานของบริการเว็บไซตบ์ นระบบอนิ เทอรเ์ นต็ 3.6). ใบงานที่ 1 หลักการทำงานของบรกิ ารเวบ็ ไซต์บนระบบอนิ เทอร์เน็ต 3.7). แบบประเมินผลการปฏิบัติงาน ใบงานที่ 1 หลักการทำงานของบริการเว็บไซต์บน ระบบอินเทอร์เนต็ 3.8). แบบทดสอบก่อนเรียนและหลงั เรียนพรอ้ มเฉลย ชดุ การสอนที่ 1 เรอื่ ง หลกั การทำงาน ของบรกิ ารเวบ็ ไซตบ์ นระบบอินเทอร์เน็ต 3.9). แบบสงั เกตพฤตกิ รรมระหวา่ งการเรยี นและการปฏบิ ัตงิ าน 3.10). ส่ือประกอบการสอนเรื่อง หลกั การทำงานของบริการเว็บไซต์บนระบบอนิ เทอรเ์ น็ต 4. เวลาที่ใช้ ใช้เวลาในการสอนจำนวน 4 ชั่วโมง 5. การเตรียมการลว่ งหนา้ สิ่งทีค่ รูต้องเตรียมการล่วงหนา้ มดี ังนี้ 5.1). ศกึ ษาคมู่ ือครู โครงการสอน และแผนการจัดการเรียนรู้ เร่ือง หลกั การทำงานของ บริการเว็บไซต์บนระบบอินเทอร์เน็ต 5.2). ศึกษาและเตรียมเอกสารและสอื่ การสอน เร่ืองหลักการทำงานของบรกิ ารเว็บไซต์บน ระบบอนิ เทอรเ์ น็ต ประกอบไปด้วย

ห น้ า | 24 - ค่มู อื ครชู ุดการสอนที่ 1 เร่ือง หลักการทำงานของบรกิ ารเว็บไซตบ์ นระบบอินเทอร์เนต็ - สอ่ื Google Slide เรื่อง หลกั การทำงานของบริการเวบ็ ไซต์บนระบบอินเทอร์เนต็ - ส่อื Active Learning ดว้ ยโปรแกรม Kahoot เร่ือง หลกั การทำงานของบรกิ ารเว็บไซต์ บนระบบอนิ เทอร์เน็ต 5.3). ผสู้ อนตอ้ งเตรียมเอกสารประกอบการเรยี นเรื่อง หลักการทำงานของบรกิ ารเว็บไซต์ บนระบบอนิ เทอร์เน็ต กรณที ี่ใหผ้ ู้เรยี นจัดเตรยี มเอง ต้องมีตน้ ฉบับแจ้งให้ผ้เู รียนจัดเตรียมเอกสาร ประกอบการเรียนล่วงหน้าให้พร้อมก่อนเรียน 5.4). แบบทดสอบก่อนเรยี น Pre-Test ด้วย Google Form เร่ือง หลกั การทำงานของ บรกิ ารเวบ็ ไซต์บนระบบอินเทอร์เน็ต 5.4). แบบทดสอบหลังเรียน Post-Test ด้วย Google Form เร่อื ง หลักการทำงานของ บรกิ ารเว็บไซตบ์ นระบบอินเทอร์เนต็ 5.5). จดั เตรยี มใบงานท่ี 1 จัดเตรียมเคร่อื งคอมพวิ เตอร์ และเครื่องมือท่ีจำเป็น ที่ใช้ ปฏิบตั งิ านคือ Google chrome, โปรแกรมประมวลผลคำ 5.5). จัดเตรยี มและตรวจสภาพความพรอ้ มเคร่ืองคอมพวิ เตอร์ โปรแกรมทีจ่ ำเป็น ได้แก่ Google chrome, โปรแกรมประมวลผลคำ และตัวอย่างการการออกแบบโครงสรา้ งเว็บไซต์ เลอื กใชไ้ ฟล์ สี ดว้ ยโปรแกรมเลอื กสีและจำลองเฉดสี ให้ผูเ้ รยี นดเู ป็นตัวอย่าง 6. สอ่ื การเรยี นการสอน 6.1). ชุดการสอนที่ 1 เร่ือง หลักการทำงานของบรกิ ารเว็บไซตบ์ นระบบอนิ เทอร์เนต็ 6.2). สือ่ Google Slide เรือ่ ง หลกั การทำงานของบริการเว็บไซต์บนระบบอนิ เทอร์เนต็ 6.3). ใบงานเรอื่ ง หลักการทำงานของบรกิ ารเว็บไซตบ์ นระบบอินเทอร์เน็ต 6.4). ส่อื Active Learning ด้วยโปรแกรม Kahoot เร่ือง หลกั การทำงานของบริการ เว็บไซต์บนระบบอินเทอร์เน็ต 6.5). ตัวอย่างการการออกแบบโครงสร้างเว็บไซต์ เลือกใชไ้ ฟล์ สี ดว้ ยโปรแกรมเลือกสีและ จำลองเฉดสีเสรจ็ แลว้ 7. การจดั ช้นั เรยี น การจัดชั้นเรียนตามปกติสำหรับการสอนทฤษฎี โดยจัดการเรียนการสอนแบบอภิปราย ถาม-ตอบ อธิบาย สาธิต สรุป การเรียนภาคปฏิบัติเน้นการค้นคว้าหาความรู้ด้วยตัวนำสู่การลงมือ ปฏิบัติ โดยใช้ทักษะการเรียนรู้แห่งศตวรรษที่ 21 (Active Learning) จัดกลุ่มการปฏิบัติงานโดยการ แบ่งกลุ่มๆ ละ 3-4 คน เพื่อให้ผู้เรียนได้ปฏิบัติงาน โดยครูเตรียมจัดเตรียมเครื่องคอมพิวเตอร์ และ เครื่องมือทีจ่ ำเป็น ที่ใช้ปฏบิ ัติงานคือ Google chrome, โปรแกรมประมวลผลคำ ครูสาธิตวิธีการการ

ห น้ า | 25 ออกแบบโครงสร้างเว็บไซต์ เลือกใช้ไฟล์ สี ด้วยโปรแกรมเลือกสีและจำลองเฉดและควบคุมดูแล พฤตกิ รรมการปฏบิ ตั งิ านใหค้ ำชีแ้ นะหากพบปัญหา 8. วิธีใช้ชุดการสอน 8.1 ศึกษาค่มู ือการใช้ โครงการสอน และแผนการจัดการเรยี นรู้ เนื้อหาทส่ี อน 8.2 ศกึ ษาวธิ ีการใช้สอื่ การเรียนการสอน 8.2 ศึกษาวธิ ีการวัดผลและประเมนิ ผล 9. ข้ันดำเนนิ การจัดกจิ กรรมการจัดการเรียนรู้ 9.1 ผู้สอนชแ้ี จงให้ผเู้ รยี นทราบเก่ยี วกบั บทบาทหน้าท่ีของผ้เู รียน 9.2 ผู้สอนชแี้ จงเนอ้ื หาทจี่ ะเรียนในชุดการสอนนี้ 9.3 ผสู้ อนชี้แจงวธิ กี ารวัดผลประเมินผลพรอ้ มกำหนดเวลาส่งช้นิ งาน 9.4 การจดั กจิ กรรมการเรียนการสอนในสว่ นภาคทฤษฎี แบง่ ออกเป็น 5 ข้ันตอน ดังนี้ ขั้นที่ 1 ทดสอบก่อนเรียน ครูมอบหมายแบบทดสอบก่อนเรียน Pre-Test ด้วย Google Form เรอื่ ง หลกั การทำงานของบริการเว็บไซต์บนระบบอนิ เทอรเ์ น็ต เพอ่ื วัดพ้นื ฐานความรู้ กอ่ นเรียน โดยใช้ระบบหอ้ งเรยี นออนไลน์ Google classroom ข้ันที่ 2 ข้นั นำเขา้ สบู่ ทเรียน 2.1). ครจู ัดเตรยี มเอกสาร พร้อมกบั แนะนำรายวิชา วิธกี ารให้คะแนนและวธิ กี ารเรยี น เรื่อง พื้นฐานการออกแบบและพฒั นาเวบ็ ไซต์ 2.2). ครแู จง้ จุดประสงค์การเรียนรูข้ องหนว่ ยเรียนท่ี 1 และขอให้ผเู้ รยี นร่วมกนั ทำ กิจกรรมการเรยี นการสอน 2.3). ครใู ห้ผู้เรยี นค้นคว้าหาความรู้ดว้ ยตัวนำสู่การลงมอื ปฏิบัติ โดยใช้ทักษะการ เรยี นรแู้ หง่ ศตวรรษที่ 21 (Active Learning) ยกตวั อย่างเวบ็ ไซต์ทีผ่ ู้เรียนรู้จกั และรว่ มกันอภปิ ราย ข้ันท่ี 3 ขั้นจดั กจิ กรรมการเรยี นรู้ 1). ผู้สอนแจกใบความรทู้ ่ี 1 เร่อื ง พื้นฐานการพัฒนาเวบ็ ไซตท์ างธุรกจิ และใหผ้ ู้เรียน ศกึ ษาเอกสารประกอบการสอนพืน้ ฐานการพฒั นาเว็บไซต์ทางธุรกจิ หน่วยที่ 1 ในระบบห้องเรยี น ออนไลน์ Google classroom 2). ผู้สอนอธบิ าย เน้ือหา พ้นื ฐานการพัฒนาเว็บไซต์ทางธุรกิจ ดว้ ย Google Slide อธบิ ายกระบวนการทำงานเว็บไซต์ ความรหู้ ลักการออกแบบเว็บไซต์ ขน้ั ตอนการพัฒนาเวบ็ ไซต์ ตาม เนื้อหาในเอกสารประกอบการเรยี นรายวิชา การออกแบบและพฒั นาเวบ็ ไซต์

ห น้ า | 26 ขั้นที่ 4 ขัน้ สรปุ ครูใหผ้ ู้เรยี นซักถามข้อสงสัยทบทวนเนื้อหา ขัน้ ที่ 5 ทดสอบหลังเรียน ครใู หน้ ักเรยี นทำแบบทดสอบหลงั เรียน Post-Test ดว้ ย Google Form เร่ือง หลักการทำงานของบริการเว็บไซต์บนระบบอินเทอรเ์ นต็ เพ่อื วดั ประเมนิ ผล การเรยี นรู้ - ในขณะสอนภาคทฤษฎี ให้ปฏบิ ัตดิ ังนี้ • สงั เกตพฤตกิ รรมผู้เรยี นระหวา่ งการเรียน • ขั้นสรุปบทเรียนควรเป็นกิจกรรมร่วมของผู้เรียนทุกกลุ่มหรือตัวแทนกลุ่มร่วมกัน ด้วยวิธกี ารส่มุ จากเลือกกลุม่ ดว้ ยเครือ่ งมือ https://wheelofnames.com/ • ตรวจดูผลการทดสอบกอ่ นเรียน Pre-Test หลงั เรยี นแลว้ แจง้ ผลให้ผเู้ รยี นทราบ • สอนซ่อมเสรมิ หรือมอบหมายงานเพิ่มเติมใหก้ ับผู้เรียนท่ีไมผ่ ่านเกณฑ์ 9.5 การจดั กิจกรรมการเรยี นการสอนในส่วนภาคปฏิบตั ิ แบ่งออกเปน็ 5 ขนั้ ตอนดังน้ี ขั้นที่ 1 ข้ันกำหนดจุดประสงค์ 1.1). ครแู จง้ จุดประสงคก์ ารเรียนรู้ของหน่วยเรียนที่ 1 และขอให้ผูเ้ รียนรว่ มกนั ทำ กจิ กรรมการเรยี นการสอน 1.2). ครูแจกใบงานท่ี 1 เรอ่ื ง พืน้ ฐานการออกแบบสร้างเว็บไซต์ ให้แก่ผ้เู รียน ขั้นท่ี 2 ขัน้ เตรียมการสาธติ ครจู ัดเตรียมและตรวจสภาพความพรอ้ มเครื่องคอมพิวเตอร์ โปรแกรมทจ่ี ำเปน็ ไดแ้ ก่ Google chrome, โปรแกรมประมวลผลคำ และตวั อย่างการการออกแบบโครงสรา้ งเว็บไซต์ เลือกใช้ไฟล์ สี ดว้ ยโปรแกรมเลือกสีและจำลองเฉดสี ให้ผู้เรยี นดูเป็นตวั อยา่ ขั้นที่ 3 ขั้นทำการสาธิต 3.1). ครูสาธิตปฏบิ ตั ิเกย่ี วกบั การออกแบบโครงสรา้ งเว็บไซต์และการใชเ้ ครือ่ งมอื เลือกสีดว้ ย https://coolors.co/ 3.2). ครใู ห้ผ้เู รยี นซักถามข้อสงสัยทบทวนเนอื้ หา ข้ันที่ 4 ขั้นลงมอื ปฏิบัติ 4.1). ครสู าธติ และให้นกั เรียนปฏิบัตติ าม เกีย่ วกับการออกแบบโครงสร้างเว็บไซต์ และการใช้เครอ่ื งมอื เลือกสดี ้วย https://coolors.co/ 4.2). นักเรยี นส่งช้ินงานผา่ นแบบฟอร์มด้วยระบบออนไลนร์ ะบบ Google Classroom

ห น้ า | 27 4.3). นักเรียนตรวจดูชิ้นงานตัวเองผ่านทางเว็บไซต์ https://sites.google.com/site/kruwerathamt ข้ันท่ี 5 ขั้นตรวจและประเมนิ ผลช้นิ งาน 5.1).ครูใหน้ ักเรียนทุกคนตรวจดูผลงานตัวเองทาง เว็บไซต์https://sites.google.com/site/kruwerathamt 5.2). ครูใหข้ ้อแนะนำ และประเมนิ ผลชน้ิ งาน - ในขณะสอนภาคปฏบิ ตั ิ ให้ปฏบิ ัติดงั นี้ • ขณะผู้เรียนปฏิบัติงานตามใบงาน ผู้สอนควรควบคุมดูแลการปฏบิ ัติงานของผู้เรียน อย่างใกล้ชิด เน้นเรื่องการใช้ทักษะการเรียนรู้แห่งศตวรรษที่ 21 หากผู้เรียนมีปัญหาขณะ ปฏิบัติงานจะได้ให้คำแนะนำช่วยเหลือ มีกิจนิสัยในการปฏิบัติงานตามหลักของเศรษฐกิจ พอเพียง ค้นคว้าหาความรดู้ ้วยตัวนำสู่การลงมือปฏิบตั ิ • ผสู้ อนควบคมุ และติดตามผลการปฏิบตั งิ านของผเู้ รียนให้เป็นไปตามขนั้ ตอน การปฏบิ ตั งิ าน • สงั เกตพฤติกรรมผเู้ รียนระหว่างการปฏบิ ตั ิงาน • ตรวจผลงานการปฏบิ ัตงิ านตามใบงาน แลว้ แจง้ ผลให้ผูเ้ รียนทราบ • กรณีผู้เรียนทมี่ ีผลการประเมินไม่ผ่านเกณฑ์ต้องเรียกผูเ้ รยี นมารบั ทราบและแจ้ง ขอ้ ผดิ พลาดให้ผู้เรียนทราบเพ่ือปรบั ปรุงแกไ้ ข 10. วิธกี ารใชส้ ื่อการเรียนการสอน ชุดการสอนที่ 1 เร่อื ง หลักการทำงานของบริการเว็บไซต์บน ระบบอินเทอร์เนต็ ผู้สอนต้องศึกษาวิธีการเรียนรู้จากแผนการจัดการเรียนรู้ คู่มือการใช้สื่อ และศึกษาเนื้อหา เรื่อง หลักการทำงานของบริการเว็บไซต์บนระบบอินเทอร์เน็ต จากเอกสารประกอบการเรียนและสอื่ Google Slide หน่วยที่ 1 เรื่อง หลักการทำงานของบริการเวบ็ ไซต์บนระบบอินเทอรเ์ น็ต ก่อนทำการ สอนจริง ส่วนสื่อที่ผู้เรียนใช้ได้แก่เอกสารประกอบการเรียนหน่วยที่ 1 เรื่อง หลักการทำงานของ บรกิ ารเว็บไซต์บนระบบอินเทอรเ์ น็ตผสู้ อนตอ้ งแจง้ ล่วงหน้าให้ผเู้ รยี นทราบ 11. บทบาทของผเู้ รยี น 11.1 ผเู้ รียนตอ้ งเตรยี มเอกสารประกอบการเรยี น เรื่อง หลักการทำงานของบริการเว็บไซต์ บนระบบอนิ เทอรเ์ นต็ ก่อนเรยี นโดยผสู้ อนจดั เตรยี มต้นฉบับใหล้ ่วงหนา้ ทันวนั ใช้สอนจรงิ 11.2 ผ้เู รยี นต้องปฏบิ ัติตามคำแนะนำของผ้สู อน 11.3 ผู้เรียนตอ้ งทำกิจกรรมตามทม่ี อบหมายและรว่ มกันอภปิ ราย

ห น้ า | 28 11.4 ผ้เู รียนตอ้ งปฏบิ ัติงานตามใบงาน 11.5 ผูเ้ รยี นต้องส่งชิ้นงานใหต้ รงตามเวลาท่ีกำหนด 12. การวดั และประเมนิ ผล 12.1 วิธวี ัดผล 12.1.1 สงั เกตพฤตกิ รรมระหวา่ งการเรียนและการปฏบิ ัตงิ าน 12.1.2 ตรวจผลจากแบบฝกึ หัด/การอภปิ ราย 12.1.3 ตรวจแบบทดสอบกอ่ นเรียน แบบทดสอบหลังเรียน 12.1.4 ตรวจผลการปฏบิ ัตงิ านตามใบงาน 12.3.5 ประเมินผลจากการวัดทั้งส่วนที่เป็นความรู้ ทักษะและคุณลักษณะอันพึง ประสงค์ 12.2 เครือ่ งมอื วัด 12.2.1 แบบสงั เกตพฤติกรรมระหวา่ งเรยี นและการปฏบิ ตั งิ าน 12.2.2 แบบฝึกหดั /ใบประเมินผลการอภิปราย 12.2.3 แบบทดสอบกอ่ นเรยี น แบบทดสอบหลังเรียน 12.2.4 ใบประเมนิ ผลการปฏิบตั ิงานตามใบงาน 12.2.5 แบบประเมินคณุ ลกั ษณะอันพงึ ประสงค์ 12.3 เกณฑก์ ารประเมินผล 12.3.1 ผเู้ รียนไดค้ ะแนนพฤตกิ รรมระหวา่ งการเรยี นการสอนและการปฏิบตั งิ าน ไม่ตำ่ กวา่ รอ้ ยละ 60 12.3.2 คะแนนรวมตามแบบประเมินผลงานใบงาน ไม่ตำ่ กวา่ ร้อยละ 60 12.3.3 คะแนนแบบฝึกหัดและแบบทดสอบ ไมต่ ำ่ กว่ารอ้ ยละ 60 12.3.4 คะแนนประเมินคุณลกั ษณะอันพงึ ประสงค์ ไมต่ ำ่ กวา่ ร้อยละ 60

P a g e | 29 โครงการสอน ชดุ การสอนท่ี 1 รหัสวิชา 30204-2103ช่ือวิชา การพฒั นาเว็บไซต์ทางธรุ กิจ ช่อื หน่วย พ้นื ฐานการพัฒนาเว็บไซต์ทางธรุ กจิ จำนวน 4 ช่ัวโมง หัวข้อการเรยี นรู้ 1). ความรูเ้ กย่ี วกับเว็บไซต์ 2). ความรู้หลักการออกแบบเวบ็ ไซต์ 3). ส่วนประกอบของเว็บไซต์ 4). รปู แบบไฟลท์ ี่เหมาะสมสำหรับการพัฒนาเว็บไซต์ 5). ภาษาท่เี หมาะสมในการพฒั นาเว็บไซต์ 6). รูปแบบของเวบ็ ไซต์ธรุ กิจ 7). การเลือกใช้สี 8). การออกแบบโครงสร้างเว็บไซต์ หัวข้อการเรยี นรู้ จุดประสงค์เชงิ พฤตกิ รรม 1). ความรูเ้ กี่ยวกบั เวบ็ ไซต์ 1). ผเู้ รียนมีความรู้และความเข้าใจ เกีย่ วกับเวบ็ ไซต์ 2). ความรหู้ ลกั การออกแบบเวบ็ ไซต์ หลักการออกแบบเว็บไซต์ สว่ นประกอบของเว็บไซต.์ 3). สว่ นประกอบของเวบ็ ไซต์ รปู แบบไฟล์ทเี่ หมาะสมสำหรับการพัฒนาเว็บไซต์ 4). รปู แบบไฟลท์ เ่ี หมาะสมสำหรบั การพัฒนา ภาษาท่ีเหมาะสมในการพฒั นาเวบ็ ไซต์ รูปแบบของ เว็บไซต์ เว็บไซต์ธุรกิจ 5). ภาษาท่ีเหมาะสมในการพัฒนาเวบ็ ไซต์ 2). มที ักษะ เลอื กใชไ้ ฟล์ สี สำหรับเวบ็ ไซตด์ ว้ ย 6). รูปแบบของเว็บไซตธ์ ุรกจิ โปรแกรมเลือกสแี ละจำลองเฉดสี ออกแบบโครงสร้าง 7). การเลอื กใชส้ ี เวบ็ ไซตไ์ ด้อย่างถกู ต้องมาตรฐานเว็บไซตไ์ ด้ 8). การออกแบบโครงสร้างเว็บไซต์ 3). สนใจใฝร่ ู้ รบั ผดิ ชอบเขา้ เรียนตรงเวลา แต่งกาย เรยี บรอ้ ย มีน้ำใจชว่ ยเหลอื ชว่ ยเหลอื ผูอ้ ่ืนและการ ปฏบิ ตั ิงานร่วมกบั ผูอ้ ่ืน 4). ยอมรบั รปู แบบภาษาในการพัฒนาเว็บไซต์ จัดลำดับแนวทางหลักการออกแบบเวบ็ ไซต์ 5). มีเจตคติและกจิ นิสัยทดี่ ีในการทำงาน ด้วยความ ละเอียดรอบคอบ ปลอดภยั เป็นระเบียบ สะอาด ตรงต่อ เวลา มคี วามซอื่ สัตย์ รบั ผดิ ชอบ รักษาสภาพแวดล้อม และมีคุณธรรม จรยิ ธรรมและคณุ ลักษณะอนั พงึ ประสงค์ ที่ต้องการ

ห น้ า | 30 วธิ กี ารสอน : 1). บรรยาย/อธบิ าย เรือ่ ง หลักการทำงานของบริการเวบ็ ไซตบ์ นระบบอนิ เทอร์เนต็ 2). สาธิตปฏบิ ตั ิเกีย่ วกบั การออกแบบโครงสรา้ งเว็บไซต์และการใช้เคร่อื งมือเลอื กสี สอ่ื การสอน 1). ชุดการสอนที่ 1 เรือ่ ง หลักการทำงานของบริการเว็บไซตบ์ นระบบอนิ เทอร์เนต็ 2). ส่อื Google Slide เรื่อง หลักการทำงานของบรกิ ารเว็บไซต์บนระบบอนิ เทอรเ์ น็ต 3). ใบงานเรือ่ ง หลักการทำงานของบริการเว็บไซต์บนระบบอนิ เทอร์เน็ต 4). ส่อื Active Learning ดว้ ยโปรแกรม Kahoot เรือ่ ง หลกั การทำงานของบริการเวบ็ ไซตบ์ นระบบ อนิ เทอรเ์ น็ต 5). ตวั อย่างการการออกแบบโครงสร้างเวบ็ ไซต์ เลอื กใชไ้ ฟล์ สี ด้วยโปรแกรมเลือกสแี ละจำลองเฉดสเี สรจ็ แลว้ การประเมิน : 1). สังเกตพฤตกิ รรมระหวา่ งการเรียนและการปฏบิ ตั ิงาน 2). ตรวจผลจากแบบฝกึ หัด/การอภิปราย 3). ตรวจแบบทดสอบก่อนเรียน แบบทดสอบหลงั เรียน 4). ตรวจผลการปฏบิ ัติงานตามใบงาน 5). ประเมินผลจากการวัดทั้งสว่ นที่เปน็ ความรู้ ทักษะและคุณลกั ษณะอันพึงประสงค์

ห น้ า | 31 แผนการจัดการเรยี นรู้ สอนครง้ั ท่ี 1 จำนวน 4 ชม. ชอ่ื วิชา การพัฒนาเว็บไซต์ทางธรุ กจิ รหัสวชิ า 30204-2103 หนว่ ยที่ 1 ชอ่ื หน่วย พนื้ ฐานการพัฒนาเว็บไซต์ทางธรุ กิจ 1. หัวข้อการเรยี นรู้ 1). ความรู้เกีย่ วกบั เวบ็ ไซต์ 2). ความรู้หลกั การออกแบบเว็บไซต์ 3). ส่วนประกอบของเว็บไซต์ 4). รูปแบบไฟลท์ เี่ หมาะสมสำหรบั การพัฒนาเว็บไซต์ 5). ภาษาทเี่ หมาะสมในการพัฒนาเว็บไซต์ 6). รปู แบบของเวบ็ ไซต์ธุรกิจ 7). การเลอื กใชส้ ี 8). การออกแบบโครงสร้างเว็บไซต์ 2. สาระสำคัญ การสร้างเว็บไซต์สง่ิ สำคัญอยู่ท่ีการ ออกแบบเว็บ เพราะเวบ็ ไซตท์ ่ีมรี ูปแบบสวยงาม จะสามารถดงึ ดดู ความสนใจจากผ้คู นได้ดีกวา่ ทำใหผ้ ูค้ นเกิดความรสู้ ึกประทับใจ ดังนน้ั เริม่ แรกก่อนทำเว็บไซต์ จงึ จำเป็นต้อง ทำความเข้าใจ ความรเู้ ก่ียวกับเว็บไซต์ ความรู้หลักการออกแบบเวบ็ ไซต์ ส่วนประกอบของเว็บไซต์ การ เลอื กใชส้ ี รูปแบบไฟล์ทเี่ หมาะสมสำหรับการพฒั นาเว็บไซต์ ภาษาทีเ่ หมาะสมในการพัฒนาเวบ็ ไซต์ รูปแบบ ของเว็บไซตธ์ ุรกิจ 3. สมรรถนะประจำหนว่ ย 1). แสดงความร้เู กีย่ วกับพนื้ ฐานกระบวนการทำงาน สว่ นประกอบ และการออกแบบพฒั นาเว็บไซต์ ได้ถูกต้องตามมาตรฐาน 2). ออกแบบโครงสรา้ งเว็บไซต์ไดถ้ ูกตอ้ งตามมาตรฐาน 4. จุดประสงคก์ ารเรยี นรู้ 4.1 จดุ ประสงคท์ ว่ั ไป 1). นกั เรียนมีความรู้เกย่ี วกับเว็บไซต์ได้ 2). นักเรียนเขา้ ใจความรู้หลักการออกแบบเวบ็ ไซต์ได้ 3). นักเรียนบอกรปู แบบไฟล์ที่เหมาะสมสำหรับการพฒั นาเว็บไซต์ได้ 4). นกั เรยี นภาษาทีเ่ หมาะสมในการพัฒนาเวบ็ ไซต์ได้ 5). นักเรยี นบอกรปู แบบของเว็บไซต์เพื่อธรุ กิจได้ 6). นักเรียนออกแบบโครงสร้างเว็บไซต์ได้

ห น้ า | 32 7). นักเรียนเลอื กใช้สีจากเครื่องมือสำเร็จรูปได้ 4.2 จุดประสงค์เชิงพฤติกรรม 1). อธบิ ายความรูเ้ บื้องต้น พ้ืนฐานการออกแบบและพฒั นาเว็บไซต์ได้ตามมาตรฐาน W3C 2). บอกส่วนประกอบของเว็บไซต์ได้ตามมาตรฐานเวบ็ ไซต์ 3). อธบิ ายรูปแบบไฟล์ทเ่ี หมาะสมสำหรบั การพัฒนาเว็บไซตต์ ามได้มาตรฐานภาพ 4). บอกภาษาที่เหมาะกับการพัฒนาเวบ็ ไซต์ได้อย่างเหมาะสม 5). อธิบายรปู แบบของเวบ็ ไซตเ์ พอ่ื ธุรกจิ ไดต้ ามมาตรฐานการออกแบบออกแบบเว็บไซต์ 6). ออกแบบโครงสรา้ งเวบ็ ไซตไ์ ด้อย่างได้ถูกต้องมาตรฐานเว็บไซต์ 7). เลือกใชไ้ ฟล์ สี สำหรบั เว็บไซตด์ ้วยโปรแกรมเลือกสแี ละจำลองเฉดสไี ด้อย่างถูกตอ้ ง 5. กิจกรรมการจดั การเรียนรู้ (รูปแบบ 5 ข้ันตอน ตามทฤษฏหี ลักการของ ศ.ดร. ชยั ยงค์ พรหมวงศ์ ) ในการเรียนการสอนของหน่วยท่ี 1 คร้ังท่ี 1 (จำนวน 1 ชว่ั โมง) 1). ผสู้ อนชแี้ จงให้ผู้เรยี นทราบเกยี่ วกับบทบาทหน้าทข่ี องผเู้ รียน 2). ผ้สู อนชี้แจงเนือ้ หาทีจ่ ะเรียนในชดุ การสอนนี้ 3). ผู้สอนชแ้ี จงวธิ ีการวัดผลประเมินผลพร้อมกำหนดเวลาสง่ ชิ้นงาน 4). การจัดกจิ กรรมการเรียนการสอนในส่วนภาคทฤษฎี แบง่ ออกเปน็ 5 ขัน้ ตอน ดงั นี้ ขั้นท่ี 1 ทดสอบก่อนเรียน ครูมอบหมายแบบทดสอบก่อนเรียน Pre-Test ด้วย Google Form เรอ่ื ง หลักการทำงานของบริการเวบ็ ไซต์บนระบบอินเทอรเ์ น็ต เพือ่ วดั พนื้ ฐานความรู้ก่อนเรียน โดยใช้ ระบบหอ้ งเรยี นออนไลน์ Google classroom ข้ันท่ี 2 ข้นั นำเข้าสบู่ ทเรียน 2.1). ครูจัดเตรยี มเอกสาร พร้อมกบั แนะนำรายวิชา วธิ ีการให้คะแนนและวธิ ีการเรียนเรื่อง พื้นฐานการออกแบบและพัฒนาเวบ็ ไซต์ 2.2). ครูแจ้งจุดประสงค์การเรยี นรู้ของหน่วยเรยี นที่ 1 และขอใหผ้ เู้ รยี นรว่ มกันทำกิจกรรม การเรยี นการสอน 2.3). ครูให้ผู้เรยี นค้นคว้าหาความรดู้ ้วยตัวนำสู่การลงมอื ปฏิบัติ โดยใชท้ กั ษะการเรียนรแู้ หง่ ศตวรรษที่ 21 (Active Learning) ยกตัวอยา่ งเว็บไซต์ที่ผูเ้ รยี นรู้จัก และร่วมกนั อภปิ ราย ขนั้ ท่ี 3 ขนั้ จดั กิจกรรมการเรียนรู้ 1). ผสู้ อนแจกใบความรู้ท่ี 1 เรื่อง พน้ื ฐานการพฒั นาเว็บไซต์ทางธุรกิจ และใหผ้ เู้ รียนศึกษา เอกสารประกอบการสอนพนื้ ฐานการพัฒนาเว็บไซต์ทางธรุ กจิ หนว่ ยท่ี 1 ในระบบห้องเรียนออนไลน์ Google classroom 2). ผ้สู อนอธบิ าย เนือ้ หา พ้ืนฐานการพัฒนาเวบ็ ไซตท์ างธุรกิจ ดว้ ย Google Slide อธิบาย กระบวนการทำงานเว็บไซต์ ความรูห้ ลกั การออกแบบเวบ็ ไซต์ ขั้นตอนการพฒั นาเวบ็ ไซต์ ตามเนื้อหาใน เอกสารประกอบการเรียนรายวชิ า การออกแบบและพัฒนาเวบ็ ไซต์

ห น้ า | 33 ข้ันที่ 4 ข้ันสรปุ ครใู หผ้ เู้ รยี นซักถามข้อสงสยั ทบทวนเน้อื หา ข้นั ท่ี 5 ทดสอบหลังเรียน ครูให้นกั เรียนทำแบบทดสอบหลังเรยี น Post-Test ด้วย Google Form เรอ่ื ง หลกั การทำงานของบรกิ ารเวบ็ ไซตบ์ นระบบอินเทอร์เน็ต เพื่อวัดประเมนิ ผลการเรียนรู้ - ในขณะสอนภาคทฤษฎี ใหป้ ฏิบัตดิ งั นี้ • สังเกตพฤติกรรมผเู้ รียนระหวา่ งการเรยี น • ขั้นสรุปบทเรียนควรเป็นกิจกรรมร่วมของผู้เรียนทุกกลุ่มหรือตัวแทนกลุ่มร่วมกัน ด้วย วิธกี ารส่มุ จากเลือกกลุ่มดว้ ยเครือ่ งมือ https://wheelofnames.com/ • ตรวจดูผลการทดสอบก่อนเรยี น Pre-Test หลงั เรียนแล้วแจ้งผลใหผ้ ูเ้ รียนทราบ • สอนซ่อมเสรมิ หรือมอบหมายงานเพิ่มเติมให้กับผ้เู รียนที่ไม่ผ่านเกณฑ์ 5). การจัดกจิ กรรมการเรียนการสอนในสว่ นภาคปฏบิ ตั ิ แบ่งออกเปน็ 5 ข้นั ตอนดงั น้ี ข้ันที่ 1 ข้ันกำหนดจุดประสงค์ 1.1). ครแู จ้งจุดประสงค์การเรยี นรู้ของหนว่ ยเรยี นที่ 1 และขอให้ผูเ้ รียนร่วมกันทำกิจกรรม การเรยี นการสอน 1.2). ครูแจกใบงานท่ี 1 เร่ือง พน้ื ฐานการออกแบบสร้างเว็บไซต์ ให้แกผ่ ้เู รียน ขนั้ ที่ 2 ข้นั เตรยี มการสาธิต ครูจัดเตรียมและตรวจสภาพความพร้อมเคร่ืองคอมพวิ เตอร์ โปรแกรมทจ่ี ำเป็น ได้แก่ Google chrome, โปรแกรมประมวลผลคำ และตวั อย่างการการออกแบบโครงสรา้ งเวบ็ ไซต์ เลอื กใชไ้ ฟล์ สี ด้วยโปรแกรมเลือกสีและจำลองเฉดสี ให้ผเู้ รยี นดเู ป็นตัวอยา่ ขัน้ ที่ 3 ขัน้ ทำการสาธติ 3.1). ครูสาธิตปฏบิ ตั เิ กย่ี วกับการออกแบบโครงสร้างเวบ็ ไซต์และการใชเ้ ครือ่ งมือเลอื กสีด้วย https://coolors.co/ 3.2). ครูให้ผูเ้ รียนซกั ถามข้อสงสยั ทบทวนเนือ้ หา ขัน้ ที่ 4 ขนั้ ลงมือปฏิบัติ 4.1). ครสู าธิตและให้นักเรยี นปฏบิ ตั ติ าม เก่ยี วกับการออกแบบโครงสรา้ งเว็บไซต์และการใช้ เครอื่ งมือเลือกสีด้วย https://coolors.co/ 4.2). นักเรียนสง่ ชิน้ งานผ่านแบบฟอร์มดว้ ยระบบออนไลนร์ ะบบ Google Classroom 4.3). นกั เรียนตรวจดูช้นิ งานตัวเองผา่ นทางเว็บไซต์ https://sites.google.com/site/kruwerathamt

ห น้ า | 34 ขัน้ ท่ี 5 ข้นั ตรวจและประเมินผลชิ้นงาน 5.1).ครใู ห้นกั เรยี นทุกคนตรวจดผู ลงานตัวเองทาง เวบ็ ไซต์https://sites.google.com/site/kruwerathamt 5.2). ครูใหข้ อ้ แนะนำ และประเมนิ ผลช้นิ งาน - ในขณะสอนภาคปฏบิ ตั ิ ให้ปฏบิ ตั ิดงั น้ี • ขณะผู้เรียนปฏิบัติงานตามใบงาน ผู้สอนควรควบคุมดูแลการปฏิบัติงานของผู้เรียนอย่าง ใกล้ชิด เน้นเรือ่ งการใช้ทักษะการเรียนรู้แห่งศตวรรษที่ 21 หากผู้เรียนมีปัญหาขณะปฏิบตั ิงานจะได้ ให้คำแนะนำช่วยเหลือ มีกิจนิสัยในการปฏิบัติงานตามหลักของเศรษฐกิจพอเพียง ค้นคว้าหาความรู้ ดว้ ยตวั นำสู่การลงมือปฏิบตั ิ • ผสู้ อนควบคุมและติดตามผลการปฏิบตั งิ านของผู้เรยี นใหเ้ ป็นไปตามขน้ั ตอน การปฏิบัติงาน • สังเกตพฤติกรรมผูเ้ รยี นระหว่างการปฏบิ ัตงิ าน • ตรวจผลงานการปฏบิ ตั งิ านตามใบงาน แลว้ แจง้ ผลให้ผ้เู รยี นทราบ กรณีผู้เรยี นทม่ี ผี ลการประเมินไม่ผ่านเกณฑต์ ้องเรยี กผู้เรียนมารบั ทราบและแจ้งข้อผิดพลาดใหผ้ ูเ้ รียน ทราบเพื่อปรบั ปรุงแกไ้ ข 6. สอ่ื การจดั การเรียนรู้ 1). ชดุ การสอนท่ี 1 เร่อื ง หลกั การทำงานของบริการเว็บไซต์บนระบบอนิ เทอร์เน็ต 2). สื่อ Google Slide เร่ือง หลักการทำงานของบริการเว็บไซตบ์ นระบบอนิ เทอรเ์ นต็ 3). ใบงานเร่อื ง หลักการทำงานของบริการเว็บไซต์บนระบบอนิ เทอร์เนต็ 4). สื่อ Active Learning ดว้ ยโปรแกรม Kahoot เรื่อง หลกั การทำงานของบริการเวบ็ ไซต์บนระบบ อนิ เทอรเ์ นต็ 5). ตวั อย่างการการออกแบบโครงสรา้ งเว็บไซต์ เลอื กใช้ไฟล์ สี ดว้ ยโปรแกรมเลอื กสีและจำลองเฉดสี เสรจ็ แลว้ 7. การวัดผลและประเมนิ ผล กอ่ นเรยี น วิธกี ารวดั ผล ใหน้ กั เรียนทำแบบทดสอบก่อนเรียนจำนวน 10 ขอ้ เครอ่ื งมือวดั 1) แบบทดสอบก่อนเรยี น หนว่ ยที่ 1 เรือ่ ง พืน้ ฐานการพฒั นาเว็บไซต์ทางธุรกจิ ขณะเรียน วธิ กี ารวัดผล ถาม – ตอบ และให้นกั เรียนปฏบิ ตั ติ ามใบงานท่ี 1 ออกแบบหน้าเวบ็ ไซต์ จำนวน 1 ชิน้ งาน

ห น้ า | 35 เครอื่ งมือวดั 1) ถามตอบจากบทเรียน พ้ืนฐานการออกแบบและพฒั นาเว็บไซต์ 2) ใบงานที่ 1 เร่ือง พ้นื ฐานการออกแบบและพัฒนาเวบ็ ไซต์ หลังเรยี น วธิ ีการวดั ผล ใหน้ กั เรียนทำแบบทดสอบหลังเรียนจำนวน 10 ขอ้ เครอื่ งมือวดั 1)แบบทดสอบหลงั เรียน หนว่ ยท่ี 1 เร่อื ง พน้ื ฐานการพัฒนาเวบ็ ไซตท์ างธรุ กิจ 8. แหล่งการเรียนรู้เพม่ิ เตมิ 8.1 ภายในสถานศกึ ษา 1). ห้องสมดุ วิทยาลัยเทคนิคสกลนคร 2). หอ้ งอนิ เทอร์เน็ต 3). ห้องสมุดแผนกวชิ า 8.2 ภายนอกสถานศึกษา 1). ห้องสมดุ ประชาชน 2). ศนู ย์การเรียนรู้ชุมชน 3). ศนู ยว์ ิทยบุ รกิ ารมหาวทิ ยาลยั ทีใ่ กลก้ ับสถานศึกษา 9. กิจกรรมเสนอแนะ (ถา้ ม)ี 1). บรู ณาการกับวชิ าชีวิตและวัฒนธรรมไทย ดา้ นการพดู การอ่าน การเขยี น และการฝึกปฏบิ ัติ ตนทางสงั คมดา้ นการเตรียมความพรอ้ ม ความรบั ผดิ ชอบ และความสนใจใฝร่ ู้ 2). บูรณาการกับวชิ าวิทยาศาสตร์ ด้านการมเี หตุผล และกระบวนการทำงานอย่างเปน็ ระบบ 3). บรู ณาการกับวชิ าภาษาองั กฤษท่เี ก่ยี วกับคำศัพทเ์ ฉพาะ

ห น้ า | 36 เอกสารประกอบการเรียน วิชา การพฒั นาเว็บไซต์ทางธุรกิจ หลักสตู ร ประกาศนียบัตรวชิ าชพี ชั้นสงู (ปวส.) พุทธศกั ราช 2563 หนว่ ยที่ 1 เรือ่ ง พน้ื ฐานการออกแบบและพฒั นาเว็บไซต์ โดย นายวีธรรม เทศประสทิ ธ์ิ ครู คศ.1 วทิ ยาลัยเทคนคิ สกลนคร สำนกั งานคณะกรรมการการอาชีวศกึ ษา กระทรวงศึกษาธกิ าร

ห น้ า | 37 คำแนะนำสำหรับผ้เู รียน 1. ให้ผเู้ รียนฟงั คำแนะนำจำกผู้สอน 2. ให้ผ้เู รยี นทำแบบทดสอบก่อนเรียน จำนวน 20 ข้อ เวลำ 20 นำที 3. ให้ผ้เู รยี นทำกิจกรรมกำรจดั กำรเรียนรู้ท่ีผู้สอนมอบหมำยตำมข้นั ตอนทุกข้ันตอน 4. ให้ผเู้ รยี นทำแบบทดสอบหลงั เรยี น จำนวน 20 ขอ้ เวลำ 20 นำที 5. ให้ผเู้ รยี นลงมือปฏบิ ัตงิ ำนตำมขัน้ ตอนใบงำน ฟงั ขน้ั ตอนกำรลงมือปฏิบัติงำน ตำมคำแนะนำผสู้ อน อยำ่ งเคร่งครัดเพื่ อปฏบิ ัตงิ ำนอย่ำงถกู วิธแี ละปลอดภยั สาระการเรยี นรู้

ห น้ า | 38 การสรา้ งเวบ็ ไซตส์ ิ่งสำคญั อยู่ทก่ี าร ออกแบบเว็บ เพราะเว็บไซตท์ ่ีมีรูปแบบสวยงาม จะสามารถดึงดูด ความสนใจจากผคู้ นได้ดีกว่า ทำใหผ้ ้คู นเกิดความรู้สกึ ประทับใจ ดังนน้ั เรม่ิ แรกก่อนทำเว็บไซต์ จงึ จำเป็นต้อง ทำความเข้าใจ ความรู้เกีย่ วกับเวบ็ ไซต์ ความรหู้ ลักการออกแบบเว็บไซต์ ส่วนประกอบของเว็บไซต์ การ เลือกใช้สี รปู แบบไฟล์ที่เหมาะสมสำหรับการพฒั นาเว็บไซต์ ภาษาทเี่ หมาะสมในการพัฒนาเวบ็ ไซต์ รปู แบบ ของเวบ็ ไซต์ธรุ กิจ สมรรถนะประจำหนว่ ย 1). แสดงความร้เู กยี่ วกับพนื้ ฐานกระบวนการทำงาน ส่วนประกอบ และการออกแบบพฒั นาเวบ็ ไซต์ ได้ถูกตอ้ งตามมาตรฐาน 2). ออกแบบโครงสร้างเวบ็ ไซตไ์ ดถ้ ูกตอ้ งตามมาตรฐาน จดุ ประสงคก์ ารเรียนรู้ จดุ ประสงคท์ ่ัวไป 1). นักเรียนมีความรู้เกยี่ วกับเวบ็ ไซต์ได้ 2). นักเรยี นเขา้ ใจความรหู้ ลักการออกแบบเว็บไซต์ได้ 3). นักเรยี นบอกรปู แบบไฟล์ทเี่ หมาะสมสำหรับการพฒั นาเว็บไซต์ได้ 4). นกั เรยี นภาษาที่เหมาะสมในการพฒั นาเว็บไซต์ได้ 5). นกั เรียนบอกรูปแบบของเว็บไซต์เพื่อธุรกจิ ได้ 6). นักเรยี นออกแบบโครงสร้างเว็บไซต์ได้ 7). นักเรยี นเลือกใชส้ ีจากเครื่องมือสำเรจ็ รปู ได้ จดุ ประสงค์เชิงพฤติกรรม 1). อธิบายความรเู้ บื้องตน้ พ้ืนฐานการออกแบบและพฒั นาเว็บไซตไ์ ด้ตามมาตรฐาน W3C 2). บอกสว่ นประกอบของเว็บไซตไ์ ดต้ ามมาตรฐานเว็บไซต์ 3). อธบิ ายรปู แบบไฟลท์ ่ีเหมาะสมสำหรับการพฒั นาเวบ็ ไซตต์ ามได้มาตรฐานภาพ 4). บอกภาษาทีเ่ หมาะกบั การพฒั นาเว็บไซต์ได้อย่างเหมาะสม 5). อธิบายรปู แบบของเว็บไซตเ์ พ่อื ธุรกจิ ได้ตามมาตรฐานการออกแบบออกแบบเว็บไซต์ 6). ออกแบบโครงสร้างเวบ็ ไซต์ไดอ้ ย่างได้ถูกต้องมาตรฐานเวบ็ ไซต์ 7). เลอื กใช้ไฟล์ สี สำหรับเว็บไซตด์ ว้ ยโปรแกรมเลือกสแี ละจำลองเฉดสีได้อย่างถูกต้อง

ห น้ า | 39 สาขาวิชา : เทคโนโลยีธรุ กจิ ดจิ ทิ ัล แบบทดสอบกอ่ นเรยี น จำนวน จำนวน 10 นาที 10 ข้อ ชอ่ื วชิ า : การพัฒนาเว็บไซตท์ างธรุ กิจ รหสั วชิ า : 30204-2103 ชุดการสอนที่ 1 เร่ือง พื้นฐานการพัฒนาเว็บไซตท์ างธรุ กิจ คำชีแ้ จง 1. แบบทดสอบนเี้ ปน็ แบบปรนยั ชนิดเลือกตอบ 4 ตัวเลอื กจำนวน 10 ข้อ ขอ้ ละ 1 คะแนน 2. ใหเ้ ลอื กคำตอบทถี่ กู ต้องท่ีสุดเพยี งข้อเดียวแล้วทำเครือ่ งหมาย X ลงในกระดาษคำตอบ 3. ใช้เวลาในการทำ 10 นาที 1.เว็บเพจ (Web Page) หมายถึงขอ้ ใด 5.การออกแบบเวบ็ ไซต์โดยทั่ๆไปมีสว่ นประกอบก่ีส่วน ก. เปรียบเสมือนปกหนังสือ ตามปกติจะถูกเก็บอยู่ในรปู แบบไฟล์ ก. 1 ส่วน ข. 2 สว่ น HTML ค. 3 สว่ น ง. 4 ส่วน ข. เปรียบเสมือนหนังสือ 1 เล่ม ตามปกติจะถูกเก็บอยู่ในรูปแบบ 6.วงล้อสีทฤษฎีสีแบบสามเส้า (RGB) เหมาะกับเว็บไซต์ ไฟล์ HTML แบบใด ค. เปรียบเสมือนหน้ากระดาษแต่ละหน้า จะถูกเก็บอยู่ในรูปแบบ ก.เว็บไซต์ขา่ ว ข.เวบ็ ไซต์ทท่ี นั สมยั ไฟล์ HTML ง. เปรียบเสมือนหน้ากระดาษแต่ละหน้า จะถูกเก็บอยู่ในรูปแบบ ค.เวบ็ ไซต์ขายสนิ ค้า ง.เว็บไซต์ท่โี ดดเด่นสะดดุ ตา ไฟล์ .doc 7.การจัดตัวอกั ษรในเวบ็ ไซต์ ในหนึ่งบรรทดั ใช้กตี่ ัวอกั ษร 2. เว็บไซต์ หมายถึงข้อใด ก. 10-30 ตวั อกั ษร ข. 30-50 ตัวอักษร ก. การสง่ จดหมายไปยงั ผู้รบั แบบไมเ่ ห็นหน้า ค. 50-70 ตวั อักษร ค. 70-90 ตวั อกั ษร ข. หน้าเวบ็ เพจหนา้ เดียว จะเช่อื มโยงผา่ นทางกล่องรบั ไปรษณีย์ 8.ภาพทีไ่ ด้จากกลอ้ งดิจติ อลปกตเิ ป็นภาพรปู แบบใด ค. หน้าเวบ็ เพจหลายๆ หน้า จะเชือ่ มโยงผ่านทางไฮเปอร์ลิงก์ ก. JPG ข. PNG ง. ข้อมูลที่เชื่อมโยงผ่านทางอีเมลที่สามารถเปิดอ่านข้อความได้ ค. BMP ตลอดเวลา ง. GIF 3. ขอ้ ใดกล่าวถึง โฮมเพจ (Home Page) ได้ถูกต้อง ก. เปรียบเสมอื นสารบัญในหนังสอื 9. ภาพทเ่ี หมาะสมในการนำมาพัฒนาเว็บไซตค์ อื ก. JPG ข. PNG ข. เปรียบเสมือนบรรณานุกรม ค. BMP ง. GIF ค. เปรียบเสมอื นหนา้ ปกนติ รสาร 10. เว็บไซตท์ น่ี ิยมพฒั นาเว็บแอพพลิเคช่ันคือภาษาใด ง. เปรียบเสมอื นที่คัน่ หนังสอื ก.PHP ข.HTML 4.HTML ยอ่ มาจากอะไร ค.XHTML ง.CSS ก. Hyper Text Markup Language ข. Hytext Markup Language ค. Hyda Text Markup Language ง. Hypa Text Markup Language

ห น้ า | 40 สาขาวิชา : เทคโนโลยีธรุ กิจดจิ ทิ ลั ชือ่ วชิ า : การพฒั นาเว็บไซตท์ างธรุ กจิ รหัสวิชา ใบความรู้ท่ี 1 หน้าท.ี่ .... : 30204-2103 ชุดการสอนท่ี 1 เร่ือง พื้นฐานการพฒั นาเว็บไซตท์ างธุรกิจ แผ่นท่ี : 1 2 3 สว่ นประกอบของหนา้ เว็บเพ็จ แบง่ ออกเป็น 3 สว่ นหลักๆ คือ 1. สว่ นหัวของเวบ็ เพจ็ (Page Header) เปน็ ส่วนที่อยู่ตอนบนสุดของหน้า และเป็นสว่ นทส่ี ำคญั ทส่ี ุดของหน้า เพราะเปน็ ส่วนที่ดงึ ดดู ผู้ชมให้ติดตามเนอื้ หา ภายในเวบ็ ไซต์ มักใส่ภาพกราฟฟิกเพ่ือสรา้ งความประทับใจ สว่ นใหญ่ประกอบด้วย - โลโก้ (Logo) เปน็ ส่งิ ที่เวบ็ ไซต์ควรมี เปน็ ตัวแทนของเว็บไซต์ได้เปน็ อย่างดี และยังทำให้เวบ็ นา่ เช่ือถือ - ชอื่ เวบ็ ไซต์ - เมนูหลกั หรอื ลงิ ค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเวบ็ ไซต์