30204-2103_การพัฒนาเว็บไซต์ทางธุรกิจ

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

การจัดการเรียนรู้แบบมุง่ เน้นสมรรถนะอาชพี และบรู ณาการ
ตามหลักปรัชญาของเศรษฐกจิ พอเพยี ง

รหสั วิชา ๓0๒0๔-๒๑0๓ วิชา การพัฒนาเว็บไซตท์ างธุรกจิ
จานวนหน่วยกิต ( ท-ป-น ) ๒-๒-๓ จานวนชั่วโมงสอน / สัปดาห์ ๔ ชวั่ โมง

หลกั สูตรประกาศนยี บัตรวชิ าชีพชน้ั สูง (ปวส.) พทุ ธศักราช 25๖๓
ประเภทวชิ า บรหิ ารธุรกจิ สาขาวชิ า เทคโนโลยีธรุ กจิ ดจิ ิทลั
สาขางาน ธรุ กจิ ดจิ ิทลั
ภาคเรียนที่ ๑ ปกี ารศกึ ษา ๒๕๖5

โดย
นายมนตธ์ ร สาระบรู ณ์
ตาแหนง่ ครูจา้ งสอนประจารายเดือน

วิทยาลัยการอาชพี ขุนหาญ
อาชีวศกึ ษาจงั หวัดศรีสะเกษ

กระทรวงศึกษาธกิ าร

รายการตรวจสอบและอนุญาตให้ใช้

ควรอนญุ าตให้ใชใ้ นการสอนได้ ควรอนญุ าตให้ใช้ในการสอนได้
ควรปรับปรงุ เก่ียวกับ ควรปรับปรุงเก่ียวกับ

................................................................. .................................................................
................................................................. .................................................................
................................................................. .................................................................
................................................................. .................................................................
................................................................. .................................................................

ลงช่ือ.................................................... ลงชือ่ ....................................................
(นายณัฐพล ทองจันทร์) (นายชุตเิ ทพ มาดตี รี ะเทวาพงษ)์
หัวหน้างานหลักสตู ร
หัวหน้าแผนกวชิ าคอมพวิ เตอร์ธุรกิจ

ควรอนุญาตให้ใช้ในการสอนได้ อนญุ าตให้ใชใ้ นการสอนได้
ควรปรับปรุงดังเสนอ อืน่ ๆ
อืน่ ๆ

................................................................. .................................................................
................................................................. .................................................................
................................................................. .................................................................

ลงชอื่ ......................................... ลงชอื่ ....................................................
(นางสาวจามมัจจุลี มีศลิ ป์) (นายชาตรี สารบี ุตร)
รองผูอ้ านวยการฝ่ายวิชาการ
ผอู้ านวยการวิทยาลัยการอาชีพขุนหาญ

แผนผังความคดิ บูรณาการหลักปรัชญาเศรษฐกจิ พอเพยี ง
รายวิชา การพัฒนาเว็บไซต์ทางธรุ กิจ

เงอื นไขความรู้ เงอื นไขคณุ ธรรม

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

เศรษฐกิจ สังคม ส่ิงแวดลอ้ ม วฒั นธรรม

1,2,3,4,7 1,5,7 8 6

บนั ทกึ ขออนุมัตใิ ช้แผนการจัดการเรียนรู้
ภาคเรยี นท่ี ๑ / 2565

รหสั วิชา ๓๐๒04 – 2๑๐๓ วิชา การพัฒนาเว็บไซต์ทางธรุ กจิ
หลกั สูตรประกาศนียบตั รวชิ าชพี ชั้นสูง พุทธศักราช 25๖๓
ประเภทวิชา บรหิ ารธรุ กิจ สาขาวิชา เทคโนโลยธี รุ กจิ ดจิ ทิ ลั
สาขางาน ธรุ กจิ ดจิ ิทัล

ขออนมุ ตั กิ ารใช้แผนการจดั การเรียนรู้
ลงชอ่ื .................................................................ครผู ู้สอน
(นายมนต์ธร สาระบูรณ์)

ความเหน็ หวั หนา้ แผนกวชิ า
.............................................................................................................................................................................

ลงชื่อ.....................................................หวั หนา้ แผนกวชิ า
(นายณฐั พล ทองจนั ทร์)

ความเหน็ หวั หน้างานพัฒนาหลกั สูตรการเรียนการสอน
.............................................................................................................................................................................

ลงชอ่ื .....................................................หัวหน้างานฯ
(นายชุติเทพ มาดตี ีระเทวาพงษ์)

ความเหน็ ของรองผูอ้ านวยการฝา่ ยวิชาการ
 เหน็ ควรพจิ ารณาอนุมตั ิ ใหใ้ ชป้ ระกอบการเรยี นการสอนได้

ลงชื่อ.....................................................รองฝา่ ยวชิ าการ
(นางสาวจามมจั จลุ ี มศี ิลป์)

ความเห็นของผ้อู านวยการ
 อนุมตั ิ
 ไมอ่ นมุ ัติ เพราะ............................................................................................................. ...........................

ลงช่อื .....................................................
(นายชาตรี สารีบุตร)

ผอู้ านวยการวทิ ยาลยั การอาชีพขุนหาญ

คำนำ

แผนการจดั การเรียนรู้ วิชา วิชา การพัฒนาเว็บไซต์ทางธุรกิจ รหัสวิชา 30204-2103 จานวน 4 หนว่ ยกิต
3 ช่ัวโมง/สัปดาห์ ตามหลักสูตร ประกาศนียบัตรวิชาชีพชั้นสูง พุทธศักราช 2563 สานักงานคณะกรรมการการ
อาชีวศึกษา (สอศ.) กระทรวงศึกษาธิการ เพ่ือมุ่งเน้นฐานสมรรถนะ (Competency Based Learning) และการบูร
ณาการ (Integrated )ตรงตามจุดประสงค์รายวิชาวิชา การสร้างเว็บไซต์ (Website Creation) มาตรฐานรายวิชา
และคาอธิบายรายวิชาเป็นการพัฒนาบทบาทของนักเรียนให้รู้จักเป็นผู้ที่มีบทบาทในการแสวงหา ส่วนบทบาทของครู
อาจจะเป็นเพียงผู้ชี้แนะและเพื่อเอื้ออานวยให้กับนักเรียนได้รู้จักการทางานร่วมกัน สามารถที่นาไปทางานได้
(Competency) โดยมีเป้าหมายเพ่ือประโยชน์ในการประกอบอาชีพ และการมีคุณภาพชีวิตท่ี เป็นคนดีทั้งกาย
วาจา ใจ มคี ุณธรรมจรยิ ธรรม และจรรยาบรรณในวชิ าชีพของตน

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

(นายมนตธ์ ร สาระบูรณ์)
ครจู า้ งสอนประจารายเดือน

สำรบัญ ข

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

หัวข้อเร่ือง 3
สมรรถนะอาชีพประจาหน่วย 3
จุดประสงค์การเรียนรู้ 4
การบรู ณาการแนวปรชั ญาของเศรษฐกิจพอเพยี ง 5
กิจกรรมการเรียนการสอน 7
สอื่ การเรียนการสอน 8
การประเมนิ ผล 11
เนอื้ หาสาระการเรยี นรู้ 11
แบบฝึกหัด /ใบงาน 11
แบบทดสอบ/เฉลย 11
สอนภาคทฤษฎี/ภาคปฎิบัติหนว่ ยท่ี 2 12
หัวข้อเรื่อง 13
สมรรถนะอาชีพประจาหน่วย 13
จดุ ประสงค์การเรียนรู้ 14
การบูรณาการแนวปรชั ญาของเศรษฐกจิ พอเพยี ง
กจิ กรรมการเรยี นการสอน
สอ่ื การเรียนการสอน
การประเมนิ ผล

สำรบัญ (ต่อ) ค

เน้อื หาสาระการเรยี นรู้ หนา้
แบบฝึกหัด /ใบงาน 15
แบบทดสอบ/เฉลย 17
สอนภาคทฤษฎี/ภาคปฎบิ ัติหน่วยท่ี 3 20
หวั ขอ้ เรือ่ ง 21
สมรรถนะอาชีพประจาหน่วย 21
จดุ ประสงค์การเรียนรู้ 21
การบูรณาการแนวปรัชญาของเศรษฐกจิ พอเพียง 21
กิจกรรมการเรยี นการสอน 22
ส่อื การเรียนการสอน 23
การประเมินผล 23
เนื้อหาสาระการเรยี นรู้ 24
แบบฝกึ หัด /ใบงาน 25
แบบทดสอบ/เฉลย 27
สอนภาคทฤษฎี/ภาคปฎบิ ัติหน่วยท่ี 4 28
หวั ขอ้ เร่อื ง 31
สมรรถนะอาชีพประจาหน่วย 31
จุดประสงค์การเรยี นรู้ 31
การบรู ณาการแนวปรชั ญาของเศรษฐกจิ พอเพยี ง 31
กิจกรรมการเรยี นการสอน 32
สือ่ การเรยี นการสอน 33
การประเมินผล 33
เนื้อหาสาระการเรียนรู้ 34
แบบฝกึ หัด /ใบงาน 35
แบบทดสอบ/เฉลย 38
สอนภาคทฤษฎี/ภาคปฎบิ ตั ิหน่วยท่ี 5 39
หวั ข้อเร่อื ง 41
สมรรถนะอาชีพประจาหน่วย 41
จดุ ประสงค์การเรยี นรู้ 41
การบรู ณาการแนวปรัชญาของเศรษฐกจิ พอเพียง 41
กจิ กรรมการเรยี นการสอน 42
สื่อการเรียนการสอน 43
การประเมินผล 43
เน้ือหาสาระการเรียนรู้ 44
แบบฝกึ หดั /ใบงาน 45
47

สำรบัญ (ต่อ) ง

แบบทดสอบ/เฉลย หนา้
สอนภาคทฤษฎี/ภาคปฎิบัติหนว่ ยที่ 6 48
51
หวั ขอ้ เรอ่ื ง 51
สมรรถนะอาชีพประจาหนว่ ย 51
จุดประสงค์การเรยี นรู้ 51
การบูรณาการแนวปรัชญาของเศรษฐกจิ พอเพียง 52
กิจกรรมการเรยี นการสอน 52
สื่อการเรียนการสอน 53
การประเมินผล 54
เนอื้ หาสาระการเรียนรู้ 55
แบบฝึกหัด /ใบงาน 57
แบบทดสอบ/เฉลย 59
สอนภาคทฤษฎี/ภาคปฎิบัติหน่วยท่ี 7 61
หัวขอ้ เร่อื ง 61
สมรรถนะอาชพี ประจาหน่วย 61
จุดประสงค์การเรยี นรู้ 61
การบรู ณาการแนวปรชั ญาของเศรษฐกิจพอเพียง 62
กิจกรรมการเรยี นการสอน 63
สือ่ การเรียนการสอน 64
การประเมินผล 65
เน้ือหาสาระการเรียนรู้ 66
แบบฝกึ หัด /ใบงาน 68
แบบทดสอบ/เฉลย 69
สอนภาคทฤษฎี/ภาคปฎบิ ัติหน่วยท่ี 8 71
หัวข้อเรื่อง 71
สมรรถนะอาชีพประจาหนว่ ย 71
จดุ ประสงค์การเรียนรู้ 71
การบูรณาการแนวปรัชญาของเศรษฐกิจพอเพียง
กิจกรรมการเรียนการสอน 72
สือ่ การเรียนการสอน
การประเมินผล 73
เนือ้ หาสาระการเรยี นรู้ 73
แบบฝึกหัด /ใบงาน 74
แบบทดสอบ/เฉลย 75
77
78

สำรบัญ (ตอ่ ) จ

สอนภาคทฤษฎี/ภาคปฎบิ ตั ิหน่วยท่ี 9 หนา้
หวั ข้อเรอ่ื ง 81
สมรรถนะอาชีพประจาหน่วย 81
จุดประสงค์การเรียนรู้ 81
การบูรณาการแนวปรัชญาของเศรษฐกิจพอเพียง 81
กิจกรรมการเรียนการสอน
ส่ือการเรยี นการสอน 82
การประเมินผล
เนื้อหาสาระการเรียนรู้ 83
แบบฝกึ หัด /ใบงาน 84
แบบทดสอบ/เฉลย 85
86
สอนภาคทฤษฎี/ภาคปฎิบตั ิหน่วยที่ 10 88
หวั ข้อเร่อื ง 89
สมรรถนะอาชีพประจาหน่วย 91
จดุ ประสงค์การเรียนรู้ 91
การบูรณาการแนวปรัชญาของเศรษฐกจิ พอเพียง 91
กิจกรรมการเรยี นการสอน 91
ส่ือการเรยี นการสอน 92
การประเมินผล 92
เนือ้ หาสาระการเรยี นรู้ 93
แบบฝึกหัด /ใบงาน 94
95
97

ฉ

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

ชอ่ื รายวิชา การพัฒนาเวบ็ ไซต์ทางธุรกิจ รหสั วชิ า 30204-2103 (ช-น) (4-3)
ระดบั ชน้ั ปวส. สาขาวชิ า/กลมุ่ วิชา/แผนกวชิ า เทคโนโลยธี ุรกจิ ดิจิทัล

หน่วยกติ 3 จานวนคาบรวม 72 คาบ/ทฤษฏี 2 คาบ/สปั ดาห์ ปฏบิ ตั ิ 2 คาบ/สัปดาห์
ภาคเรียนท่ี 1 ปีการศึกษา 2565

จุดประสงค์รำยวิชำ เพือ่ ให้
1. เข้าใจเกีย่ วกับกระบวนการและโครงสรา้ งการทางานของเวบ็ ไซต์
2. เขา้ ใจโครงสร้างและไวยากรณ์ของโปรแกรมภาษาหรือกระบวนการใชเ้ คร่ืองมือการสรา้ งเว็บไซต์
3. เข้าใจหลักการออกแบบและกาหนดส่วนประกอบที่จาเปน็ ของเวบ็ เพจ
4. สามารถติดตง้ั โปรแกรมจาลอง Web Server หรอื อัพโหลด (Upload) เว็บไซต์
5. สามารถใช้โปรแกรมภาษาหรือโปรแกรมสาเร็จรปู หรือโปรแกรมระบบ CMS สาหรบั การออกแบบและ
สร้างเว็บไซต์
6. มเี จตคติและกิจนสิ ยั ท่ดี ีในการปฏบิ ตั งิ านคอมพวิ เตอรด์ ้วยความละเอยี ดรอบคอบ และถูกตอ้ ง

สมรรถนะรำยวชิ ำ
1. แสดงความรเู้ กีย่ วกับกระบวนการโครงสรา้ งการทางานและไวยากรณข์ องโปรแกรมภาษา

ในการสรา้ งเว็บไซต์
2. ประยกุ ตใ์ ชโ้ ปรแกรมภาษาหรือโปรแกรมสาเร็จรปู หรือโปรแกรมระบบ CMS สาหรบั การออกแบบและสรา้ ง

เวบ็ ไซต์
3. ติดต้งั โปรแกรมจาลอง Web Server หรอื อัพโหลด (Upload) เว็บไซต์
4. ประยกุ ตใ์ ชโ้ ปรแกรมกราฟิกเพื่อเสริมในการออกแบบและการสร้างเว็บไซต์

คำอธบิ ำยรำยวชิ ำ
ศึกษาและปฏิบัติเกี่ยวกับกระบวนการและโครงสร้างการทางานของเว็บไซต์ การออกแบบเว็บไซต์การสร้าง

เว็บไซต์ด้วยโปรแกรมภาษา โปรแกรมสาเร็จรูปหรือโปรแกรมระบบ CMS (Content Management System) การ
ใช้โปรแกรมกราฟิกเสริมในการออกแบบสร้างเว็บไซต์ และการติดตั้งโปรแกรมจาลอง Web Server หรืออัพโหลด
(Upload) เว็บไซต์

ช

ลกั ษณะรำยวชิ ำ

1. รหัสและชื่อวิชำ 30204-2103 วชิ า การพัฒนาเว็บไซต์ทางธรุ กิจ
2. หลักสตู รรำยวิชำ ประกาศนียบตั รวชิ าชีพชั้นสงู (ปวส) พุทธศักราช 2563
3. ภำคเรียนท่ี 1/2565
4. พ้นื ฐำน กลมุ่ ทักษะวชิ าชีพ
5. ระยะเวลำศึกษำ คาบรวม 72 คาบ/ทฤษฏี 2 คาบ/สัปดาห์ ปฎิบตั ิ 2 คาบ/สปั ดาห์
6. หนว่ ยกติ 3
7. จุดประสงค์ทวั่ ไป (สำหรับคร)ู

1. อธิบายเกี่ยวกบั กระบวนการและโครงสร้างการทางานของเวบ็ ไซต์

2. อธบิ ายโครงสรา้ งและไวยากรณข์ องโปรแกรมภาษาหรือกระบวนการใชเ้ ครอื่ งมอื การสร้างเวบ็ ไซต์

3. บอกหลกั การออกแบบและกาหนดสว่ นประกอบทจี่ าเป็นของเว็บเพจ

4. บอกขน้ั ตอนการติดตง้ั โปรแกรมจาลอง Web Server หรอื อัพโหลด (Upload) เวบ็ ไซต์

5. เลอื กใชโ้ ปรแกรมภาษาหรือโปรแกรมสาเร็จรูปหรือโปรแกรมระบบ CMS สาหรับการออกแบบและสรา้ ง

เวบ็ ไซต์

6. ส่งเสริมให้ผู้เรียนมีเจตคตแิ ละกิจนิสยั ท่ดี ีในการปฏิบัตงิ านคอมพวิ เตอรด์ ว้ ยความละเอียดรอบคอบ และ

ถูกต้อง

8. จุดประสงค์เชิงพฤตกิ รรม

1. เขา้ ใจเกีย่ วกบั กระบวนการและโครงสร้างการทางานของเว็บไซต์

2. เขา้ ใจโครงสร้างและไวยากรณข์ องโปรแกรมภาษาหรอื กระบวนการใชเ้ คร่ืองมือการสรา้ งเว็บไซต์

3. เขา้ ใจหลักการออกแบบและกาหนดส่วนประกอบทจ่ี าเปน็ ของเว็บเพจ

4. สามารถตดิ ตงั้ โปรแกรมจาลอง Web Server หรืออพั โหลด (Upload) เวบ็ ไซต์

5. สามารถใชโ้ ปรแกรมภาษาหรือโปรแกรมสาเรจ็ รปู หรือโปรแกรมระบบ CMS สาหรับการออกแบบและสรา้ ง

เว็บไซต์

6. มีเจตคตแิ ละกจิ นิสยั ท่ีดใี นการปฏบิ ัตงิ านคอมพิวเตอร์ด้วยความละเอียดรอบคอบ และถูกต้อง
9. คำอธบิ ำยรำยวิชำ

ศึกษาและปฏิบตั ิเกยี่ วกับกระบวนการและโครงสร้างการทางานของเว็บไซต์ การออกแบบเวบ็ ไซต์การสร้าง

เวบ็ ไซตด์ ว้ ยโปรแกรมภาษาหรอื โปรแกรมสาเร็จรูปหรือโปรแกรมระบบ CMS (Content Management System)

การทดสอบการทางานของเว็บไซต์ และการ Upload เวบ็ ไซต์

ซ

ตำรำงวิเครำะห์หน่วยกำรเรยี นรู้

หนว่ ยกำรเรียนรรู้ ำยวิชำ กำรพัฒนำเวบ็ ไซต์ทำงธรุ กิจ

สาขาวชิ า เทคโนโลยธี ุรกจิ ดจิ ิทัล สาขางาน ธุรกิจดจิ ิทัล หลกั สตู รประกาศนียบัตรวชิ าชีพชั้นสูง

จานวนหนว่ ยการเรยี นรู้ 10 หน่วย จานวน 72 ชัว่ โมง

หนว่ ยท่ี ช่ือหน่วยกำรเรียน เนอ้ื หำสำระ จำนวน
ชัว่ โมง

1 ควำมรเู้ บือ้ งต้นเกี่ยวกับ 1.1 ความหมายและความสาคญั ของเวบ็ ไซต์ 4

เวบ็ ไซต์ 1.2 ที่มาของเวบ็ ไซต์

1.3 ประเภทของเว็บไซต์

1.4 คาศพั ทพ์ ืน้ ฐานทเ่ี กีย่ วข้องกบั เวบ็ ไซต์

2 กระบวนกำรและ 2.1 กระบวนการเตรียมข้อมูลในการสร้างเวบ็ ไซต์ 8

โครงสรำ้ งกำรทำงำนของ 2.2 กระบวนการออกแบบและการเลือกใช้สใี นเวบ็ ไซต์

เว็บไซต์ 2.3 กระบวนการพัฒนาและเผยแพร่เวบ็ ไซต์

2.4 โครงสรา้ งการทางานของเวบ็ ไซต์

2.5 การออกแบบโครงสร้างการทางานของเว็บไซต์

3 โครงสร้ำงและไวยำกรณ์ 3.1 โครงสร้างและไวยากรณข์ องโปรแกรมภาษาในการสร้าง 8

ของโปรแกรมภำษำใน เวบ็ ไซต์

กำรสรำ้ งเว็บไซต์ 3.2 คาสงั่ ภาษา HTML พ้นื ฐานในการสรา้ งเว็บไซต์

3.3 โปรแกรมภาษาทน่ี ิยมใช้ในการพัฒนาเว็บไซต์

4 กำรออกแบบและใช้ 4.1 ก า ร อ อ ก แ บ บ ส่ ว น ป ร ะ ก อ บ ข อ ง เ ว็ บ ไ ซ ต์ 8

โปรแกรมกรำฟิกเสริมใน 4.2 โปรแกรมกราฟกิ ทนี่ ิยมใชใ้ นการออกแบบเว็บไซต์

กำรสรำ้ งเวบ็ ไซต์ 4.3 การใชโ้ ปรแกรม Adobe Photoshop CC 2018 ในการ

ออกแบบเว็บไซต์

4.4 การบนั ทึกไฟล์ภาพกราฟิกสาหรับเวบ็ ไซต์

4.5 การใชโ้ ปรแกรม Adobe Animate CC 2018 ในการ

ออกแบบเว็บไซต์

4.6 การบันทกึ ไฟลภ์ าพเคล่ือนไหวสาหรบั เว็บไซต์

5 กำรตดิ ตงั้ และใช้งำน 5.1 รู้จกั กับโปรแกรม Adobe Dreamweaver CC 2018 4

โปรแกรม Adobe 5.2 การตดิ ต้ังโปรแกรม Adobe Dreamweaver CC 2018

Dreamweaver CC 5.3 ส่วนประกอบตา่ ง ๆ ของโปรแกรม Adobe Dreamweaver

2018 CC 2018

6 กำรสรำ้ งเว็บไซต์ด้วย 6.1 การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 8
โปรแกรม Adobe 6.2 การสร้างไซต์ 40
Dreamweaver CC 6.3 การจดั การโครงร่างเวบ็ ไชตด์ ว้ ยตาราง
2018 6.4 การต้งั ค่าการแสดงผลเว็บไซต์
6.5 การบนั ทึกเอกสารเวบ็ ไซต์

รวม

ฌ

ตำรำงวเิ ครำะห์หน่วยกำรเรยี นรู้ (ตอ่ )

หน่วยกำรเรียนรู้รำยวชิ ำ กำรพฒั นำเวบ็ ไซต์ทำงธุรกจิ

สาขาวชิ า เทคโนโลยธี ุรกจิ ดจิ ิทลั สาขางาน ธุรกจิ ดิจิทัล หลกั สตู รประกาศนียบตั รวิชาชีพช้นั สงู
จานวนหน่วยการเรียนรู้ 10 หนว่ ย จานวน 72 ชวั่ โมง

หน่วยท่ี ชอื่ หน่วยกำรเรียน เน้อื หำสำระ จำนวนช่วั โมง
7 8
8 การจัดการไฟล์ภาพกราฟิก 7.1 การจดั การไฟล์ภาพกราฟกิ ในเวบ็ ไซต์ 8
ภาพเคล่อื นไหวและข้อความ 7.2 การจดั การไฟล์ภาพเคล่ือนไหวในเวบ็ ไซต์
9 ในเวบ็ ไซต์ 7.3 การจัดการขอ้ ความในเว็บไซต์ 8
10 การเพ่ิมเทคนิคพเิ ศษใหก้ บั 8.1 การเพิม่ เทคนิคพเิ ศษให้กับเว็บไซต์ 8
เวบ็ ไซต์ 8.2 การกาหนดพฤติกรรมการแสดงผลของภาพใน
เวบ็ ไซต์
การเชอื่ มโยงและการ 8.3 การเพ่ิมวดี โี อ YouTube ในเวบ็ ไซต์
ทดสอบการทางานของ 9.1 รจู้ ักกับการเช่ือมโยงเวบ็ ไซต์
เว็บไซต์ 9.2 การเช่ือมโยงเวบ็ ไซต์
การขอพื้นท่ีและการอัพ 9.3 การตรวจสอบการเช่อื มโยงเว็บไซต์
โหลดเวบ็ ไซต์ 10.1 การขอพืน้ ท่ีในการอพั โหลดเวบ็ ไซต์
10.2 โปรแกรมทีใ่ ชใ้ นการอัพโหลดเว็บไซต์
10.3 การอัพโหลดเวบ็ ไซต์

รวม 72

ญ

ตำรำงวเิ ครำะหห์ ลักสตู รหน่วยวชิ ำ

วิชำ กำรพัฒนำเว็บไซต์ทำงธรุ กิจ รหัสวิชำ 30204-2103
หลกั สูตรประกำศนียบัตรวิชำชีพช้นั สูง พุทธศกั รำช 2563 ประเภทวิชำ บริหำรธุรกจิ กระทรวงศกึ ษำธกิ ำร

ที่ ชื่อหน่วย *ระดับพฤติกรรมที่พึงประสงค์ สอน

พทุ ธพิ สิ ัย ทักษะพิสัย จติ พสิ ัย (ชม)

1 234561 234512 345

1 ความรู้เบื้องตน้ เก่ยี วกับเว็บไซต์    4
21 กระบวนการและโครงสรา้ งการ 8

ทางานของเวบ็ ไซต์   

3 โครงสรา้ งและไวยากรณ์ของ    8
  8
4 กโปารแอกอรกมแภบาบษแาลใะนใกชาโ้ รปสรรแ้ากงรเวม็บกไรซาตฟ์ ิก
3 เสริมในการสร้างเวบ็ ไซต์


5 การติดต้ังและใช้งานโปรแกรม 4

Adobe Dreamweaver CC 2018     

6 การสร้างเวบ็ ไซตด์ ้วยโปรแกรม 8

Adobe Dreamweaver CC 2018      

7 การจดั การไฟล์ภาพกราฟิก 8

ภาพเคลอื่ นไหวและขอ้ ความใน

เวบ็ ไซต์     

8 การเพิ่มเทคนิคพิเศษให้กับเว็บไซต์       8

9 การเชือ่ มโยงและการทดสอบการ 8

ทางานของเว็บไซต์     

10 การขอพ้นื ที่และการอัพโหลดเว็บไซต์        8

รวม 60 40 20

คะแนน(รอ้ ยละ) 100 72

* หมำยเหตุ

พทุ ธิพสิ ัย 1. ความจา 2. ความเขา้ ใจ 3. นาไปใช้

4. วิเคราะห์ 5. สังเคราะห์ 6. ประเมนิ คา่

ทักษะพิสัย 1. ทาเลยี นแบบ 2. ทาตามแบบ 3. ทาไดอ้ ย่างถูกต้อง

4. ทาไดอ้ ย่างถูกต้องต่อเนื่อง 5. ทาจนเป็นนิสยั

จิตพิสัย 1. รบั รู้ 2. ตอบสนอง 3. เหน็ คุณคา่

4. จดั ระบบการคดิ 5. เกิดเปน็ นสิ ยั

ฎ

กำหนดกำรเรยี นรู้

วิชำ กำรพฒั นำเวบ็ ไซต์ทำงธรุ กจิ รหัสวชิ ำ 30204-2103

เวลำเรียนตอ่ สปั ดำห์ ทฤษฎี 2 ช่ัวโมง ปฏบิ ตั ิ 2 ช่ัวโมง รวมเวลำเรยี นต่อภำคเรยี น 72 ช่ัวโมง

ท่ี ชอ่ื หน่วยกำรเรยี นร้/ู สมรรถนะประจำหนว่ ย/เกณฑ์ปฏบิ ตั ิงำน สัปดำห์ ชั่วโมง

รำยกำรสอน ที่ ที่

1 ความรเู้ บ้ืองต้นเกี่ยวกบั แสดงความรู้เบื้องต้นเก่ยี วกับเว็บไซต์ 41

เว็บไซต์

2 กระบวนการและ แสดงความรู้เก่ียวกับกระบวนการและโครงสร้างการ 8 2-3

โครงสร้างการทางานของ ทางานของเว็บไซต์

เวบ็ ไซต์

3 โครงสรา้ งและไวยากรณ์ แสดงความรู้เกี่ยวกับโครงสร้างและไวยากรณ์ของ 8 4-5

ของโปรแกรมภาษาใน โปรแกรมภาษาในการสรา้ งเวบ็ ไซต์

การสร้างเวบ็ ไซต์

4 การออกแบบและใช้ แสดงความรเู้ กย่ี วกับการออกแบบและใช้โปรแกรม 8 6-7

โปรแกรมกราฟกิ เสริมใน กราฟิกเสริมในการสร้างเว็บไซต์

การสรา้ งเว็บไซต์

5 การตดิ ตั้งและใช้งาน แสดงความรู้เกีย่ วกับการใการติดตั้งและใชง้ านโปรแกรม 4 8

โปรแกรม Adobe Adobe Dreamweaver CC 2018

Dreamweaver CC

2018

6 การสร้างเว็บไซตด์ ว้ ย แสดงความรู้เกยี่ วกับการสร้างเวบ็ ไซต์ด้วยโปรแกรม 8 9-10

โปรแกรม Adobe Adobe Dreamweaver CC 2018

Dreamweaver CC

2018

7 การจัดการไฟล์ แสดงความรูเ้ ก่ียวกับการสร้างตารางเพ่ือใช้งานในระบบ 8 11-12

ภาพกราฟิก เว็บไซต์ประยุกต์ใช้โปรแกรมเพื่อสร้างตารางใช้งานใน

ภาพเคลอื่ นไหวและ ระบบเวบ็ ไซต์

ข้อความในเว็บไซต์

8 การเพิ่มเทคนิคพิเศษ แสดงความรู้เก่ยี วกบั การเพ่มิ เทคนคิ พเิ ศษใหก้ บั เว็บไซต์ 8 13-14

ให้กับเวบ็ ไซต์

9 การเชือ่ มโยงและการ แสดงความรู้เก่ียวกับการเชื่อมโยงและการทดสอบการ 8 15-16

ทดสอบการทางานของ ทางานของเวบ็ ไซต์

เวบ็ ไซต์

10 การขอพนื้ ท่ีและการอัพ แสดงความรู้เก่ียวกับการขอพื้นท่ีและการอัพโหลด 8 17-18

โหลดเว็บไซต์ เวบ็ ไซต์

72 18

ฏ

เกณฑก์ ำรวัดผลประเมนิ ผล

คะแนนระหว่ำงภำค ( 60 คะแนน ) 20 คะแนน
1. จิตพสิ ยั 20 คะแนน
2. งานท่มี อบหมาย 20 คะแนน
3. สอบกลางภาค 60 คะแนน
รวม
20 คะแนน
คะแนนปลำยภำค ( 40 คะแนน ) 20 คะแนน
1. งานทมี่ อบหมาย 30 คะแนน
2. สอบปลายภาค 100 คะแนน
รวม
รวมทั้งสิน้

เกณฑ์การประเมนิ ผลตามระเบียบฯ
4.0 หมายถึง ผลการเรียนดเี ยยี่ ม ช่วงคะแนน 80 ข้นึ ไป
3.5 หมายถงึ ผลการเรยี นดมี าก ช่วงคะแนน 75-79
3.0 หมายถงึ ผลการเรียนดี ช่วงคะแนน 70-74
2.5 หมายถงึ ผลการเรยี นดพี อใช้ ช่วงคะแนน 65-69
2.0 หมายถงึ ผลการเรียนพอใช้ ช่วงคะแนน 60-64
1.5 หมายถึง ผลการเรยี นออ่ น ช่วงคะแนน 55-59
1.0 หมายถึง ผลการเรยี นออ่ นมาก ช่วงคะแนน 50-54
0 หมายถึง ผลการเรียนตก ช่วงคะแนน ตา่ กว่า 50

**หมายเหตุ ในรายวชิ าทฤษฎลี ้วนอาจเลอื กเก็บคะแนนเป็น 80 : 20 ได้

1

แผนการสอน หนว่ ยที่ 1

ช่ือวิชา การพฒั นาเวบ็ ไซต์ทางธรุ กิจ สอนครั้งท่ี 1
ชอ่ื หน่วย ความรเู้ บ้อื งตน้ เกีย่ วกับเวบ็ ไซต์ ช่วั โมงรวม 4 ช.ม.

ชื่อเร่อื ง ความหมายและความสาคัญของเว็บไซต์ ทีม่ าของเว็บไซต์ ประเภทของเวบ็ ไซต์ จานวน 4 ช.ม.
คาศัพทพ์ น้ื ฐานทเ่ี ก่ียวข้องกบั เว็บไซต์

1. สาระสาคญั

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

2. หวั เรอ่ื ง/รายการสอน/สาระการเรยี นรู้
1.1 ความหมายและความสาคัญของเวบ็ ไซต์
1.2 ที่มาของเวบ็ ไซต์
1.3 ประเภทของเวบ็ ไซต์
1.4 คาศัพท์พื้นฐานท่ีเกีย่ วข้องกับเว็บไซต์

3. สมรรถนะอาชีพประจาหน่วย
แสดงความรู้เบ้ืองต้นเกย่ี วกบั เว็บไซต์

4. จดุ ประสงค์การเรียนรู้

จดุ ประสงค์ท่ัวไป
1. สามารถอธบิ ายความหมายและความสาคัญของเว็บไซต์ได้
2. สามารถบอกที่มาของเว็บไซต์ได้
3. สามารถบอกประเภทของเวบ็ ไซต์ได้
4. สามารถบอกคาศัพท์พ้นื ฐานที่เก่ียวข้องกบั เวบ็ ไซต์ได้
5. สามารถบอกโปรแกรมทีน่ ยิ มในการพฒั นาเวบ็ ไซต์ได้
5. จุดประสงค์เชงิ พฤตกิ รรม
1. อธบิ ายความหมายและความสาคญั ของเว็บไซต์ได้
2. บอกที่มาของเว็บไซตไ์ ด้
3. บอกประเภทของเวบ็ ไซต์ได้
4. บอกคาศพั ทพ์ ้ืนฐานทเ่ี ก่ยี วข้องกบั เวบ็ ไซต์ได้
5. บอกโปรแกรมทนี่ ยิ มในการพัฒนาเว็บไซต์ได้

2

แผนการสอน หน่วยท่ี 1
สอนครัง้ ที่ 1
ชื่อวิชา การพฒั นาเวบ็ ไซต์ทางธรุ กจิ ชว่ั โมงรวม 4 ช.ม.
ชอ่ื หน่วย ความรู้เบอ้ื งตน้ เก่ียวกับเว็บไซต์
จานวน 4 ช.ม.
ชอื่ เรอ่ื ง ความหมายและความสาคญั ของเว็บไซต์ ทมี่ าของเวบ็ ไซต์ ประเภทของเวบ็ ไซต์
คาศัพท์พื้นฐานที่เก่ียวข้องกบั เว็บไซต์

6. การบรู ณาการหลกั ปรชั ญาของเศรษฐกิจพอเพยี ง เง่อื นไขคุณธรรม
1. มคี วามอดทน
เงื่อนไขความรู้ 2. มีความขยนั
3. มคี วามรบั ผดิ ชอบ
แสดงความรู้เบ้ืองต้นเกีย่ วกบั 4. มคี วามมวี นิ ยั ในการเรียน
เว็บไซต์ 5. มจี ริยธรรมในการเรยี นคอมพวิ เตอร์

พอประมาณ
1.จานวนผ้เู รยี น
2. ระยะเวลาในการเรียนการสอน
3. การใช้ทรพั ยากรร่วมกนั

มีเหตผุ ล มีภมู คุม้ กัน
1. ลดเวลาในการปฏิบตั ิงาน 1. ประหยดั คา่ ใช้จ่าย
2. ประมาณการเหตกุ ารณต์ ่าง ๆ 2. มคี วามรอบคอบในการ
3.ลดขน้ั ตอนในการทางาน ทางาน
4. เขา้ ใจงานและระบบการทางาน

สังคม วัฒนธรรม
1. สรา้ งความสมั พนั ธท์ ี่ดีในกล่มุ ผูเ้ รียน 1. มีมรรยาทในการเรยี น
2. ช่วยเหลอื กันในการทางานให้ตรงเวลา 2. มสี มั มาคาระตอ่ ครผู ู้สอนและผู้อาวโุ สกวา่
3. มีความรบั ผดิ ชอบในการใช้เคร่อื งคอมพวิ เตอร์

สงิ่ แวดล้อม สมดลุ /พร้อมรับการเปลี่ยนแปลง
1. รักษาความสะอาดในหอ้ งเรียน ใช้เครอื่ งคอมพวิ เตอรท์ มี่ ีใหค้ ุ้มค่าและเป็น
2. ดูแลรกั ษาเครือ่ งคอมพิวเตอรใ์ หส้ ะอาดเสมอ ประโยชน์สูงสุดต่อผเู้ รียน
3. ปดิ ไฟ ปิดเคร่ืองเมอ่ื เลกิ ใชง้ าน

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

3

แผนการสอน หน่วยท่ี 1
สอนครงั้ ที่ 1
ช่ือวิชา การพฒั นาเวบ็ ไซต์ทางธรุ กจิ ช่ัวโมงรวม 4 ช.ม.
ชือ่ หน่วย ความรเู้ บ้ืองตน้ เก่ียวกบั เวบ็ ไซต์
จานวน 4 ช.ม.
ชอื่ เรอื่ ง ความหมายและความสาคญั ของเวบ็ ไซต์ ที่มาของเว็บไซต์ ประเภทของเว็บไซต์
คาศัพท์พ้นื ฐานที่เกยี่ วข้องกับเวบ็ ไซต์

6. กิจกรรมการเรียนการสอน
ขน้ั ตอนการสอนหรือกิจกรรมของครู
ข้ันเตรียมการ
1. ครเู ตรยี มเอกสารการสอน Power point การสอน
2. ครเู ช็คชื่อการเข้าหอ้ งเรียน
3. นกั เรียนตรวจสอบอปุ กรณภ์ ายในห้องเรียน
ขั้นนา
1. ครูสอบถามความรู้พน้ื ฐานของผู้เรยี นเก่ยี วกบั เวบ็ ไซต์
ข้นั สอน
ทฤษฎี
ครเู ปิดสื่อการสอน PowerPoint หน่วยท่ี 1 เร่ืองความรูเ้ บอ้ื งต้นเกยี่ วกับเว็บไซต์ โดยให้ผ้เู รียน
เขียนสรปุ เนือ้ หาการสอนลงในสมดุ ครูเปิดเวบ็ ไซต์ตวั อยา่ งเว็บไซต์ ท่นี กั เรยี นรจู้ กั และยกมอื นาเสนอให้
วิเคราะห์หนา้ ชนั้ เรียน
ปฏิบตั ิ
1. ครูผู้สอนให้ผเู้ รียนเปดิ กลมุ่ Facebook เพื่อใชใ้ นการสง่ ไฟล์งาน
2. ผู้สอนใหผ้ ู้เรยี นทาแบบทดสอบก่อนเรยี น
3. ผู้สอนให้ผูเ้ รยี นทาใบงานที่ 1 ความรูเ้ บอื้ งต้นเกยี่ วกับเวบ็ ไซต์ โดยการสบื คน้ ข้อมูลจากอินเทอร์เนต็
และถา่ ยภาพหน้าจอลงในเอกสาร Word สง่ ผลงานการสบื ค้นผา่ นกลุ่มและนาเสนอหน้าช้นั เรียน
4. ผสู้ อนใหผ้ ู้เรยี นทาแบบฝกึ หัด หน่วยที่ 1
5. ผูส้ อนใหผ้ เู้ รยนทาแบบทดสอบหลงั เรียน

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

7. ส่ือและแหล่งการเรียนรู้
1. หนังสือเรยี นวิชา การสร้างเวบ็ ไซต์
2. แบบประเมินผลการเรยี นรกู้ ่อนเรียน/หลงั เรยี นพรอ้ มเฉลย
3. สื่อการสอน Power Point หนว่ ยการเรียนรทู้ ี่ 1
4. ส่ือการสอน www.kruwipawee.com

4

แผนการสอน หน่วยท่ี 1

ช่ือวิชา การพฒั นาเวบ็ ไซต์ทางธุรกิจ สอนคร้งั ท่ี 1
ช่ือหน่วย ความรเู้ บ้ืองต้นเกี่ยวกบั เวบ็ ไซต์ ชั่วโมงรวม 4 ช.ม.

ช่ือเร่ือง ความหมายและความสาคญั ของเว็บไซต์ ท่มี าของเว็บไซต์ ประเภทของเวบ็ ไซต์ จานวน 4 ช.ม.

คาศัพทพ์ นื้ ฐานท่ีเกีย่ วข้องกับเวบ็ ไซต์

8. วัดและประเมนิ ผล

8.1 เคร่ืองมอื ประเมิน

8.8.1 ตรวจแบบประเมินผลการเรยี นรกู้ อ่ นเรียน

8.1.2 สังเกตพฤตกิ รรมการปฏิบัติงานกลมุ่

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

เกณฑก์ ารประเมนิ ตามแบบทดสอบประจาหนว่ ยและแบบประเมินชนิ้ งาน

เกณฑ์การประเมิน ผลการประเมิน

ระดับคะแนน ร้อยละ 80-100 ระดับดมี าก

ระดับคะแนน รอ้ ยละ 70-79 ระดับดี

ระดับคะแนน ร้อยละ 60-69 ระดับปานกลาง

ระดับคะแนน รอ้ ยละ 50-59 ระดบั ผ่านเกณฑ์

ระดับคะแนน ต่ากว่า ร้อยละ 50 ไม่ผา่ นเกณฑ์การประเมนิ

หมายเหตุ คะแนนในการประเมนิ มคี ะแนนเต็มเทา่ กบั 5 คะแนน

5

แผนการสอน หน่วยที่ 1

ช่อื วิชา การพฒั นาเว็บไซต์ทางธรุ กิจ สอนครง้ั ที่ 1
ช่ือหน่วย ความรูเ้ บอ้ื งต้นเกีย่ วกบั เว็บไซต์ ชั่วโมงรวม 4 ช.ม.

ชอื่ เรือ่ ง ความหมายและความสาคญั ของเวบ็ ไซต์ ท่ีมาของเวบ็ ไซต์ ประเภทของเว็บไซต์ จานวน 4 ช.ม.
คาศัพทพ์ น้ื ฐานทีเ่ กี่ยวข้องกับเว็บไซต์

1.1 ความหมายและความสาคัญของเว็บไซต์

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

เซอรท์ ิโมที จอหน์ เบอร์เนริ ์ส-ลี (Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA) เกดิ เม่ือ
วนั ท่ี 8 มิถุนายน พ.ศ. 2498 เปน็ ผู้คดิ คน้ และประดิษฐ์ เวลิ ดไ์ วด์เวบ็ โดยเรม่ิ จากการจัดทาโครงการหน่ึงที่ใชแ้ นวคิด
"ข้อความหลายมิติ" หรือ hypertext มาใช้สาหรับการแลกเปลี่ยนข้อมูลระหว่างนักวิจัยด้วยกัน ขณะท่ี เซอร์ทิโมที
จอห์น เบอร์เนิร์ส-ลีทางานอยู่ท่ี "เซิร์น" เขาได้สร้างระบบต้นแบบไว้แล้วเรียกช่ือว่า ENQUIRE หลังจากออกจากเซิร์น
เม่ือ พ.ศ. 2523 เบอร์เนิร์ส-ลี ไปร่วมงานกับบริษัท "อิมเมจคอมพิวเตอร์ซิสเต็ม" ของจอห์น พุล เบอร์เนิร์ส-ลี และได้
กลบั มาทางานท่ีเซิร์นอีกครั้งหนึ่งเม่ือ พ.ศ. 2527 ในตาแหน่งสิกขบัณฑิต (Fellow) เมื่อถึง พ.ศ. 2532 เซิร์นได้กลาย
เป็นศูนย์อินเทอร์เน็ต ท่ีใหญ่ท่ีสุดในยุโรป ซ่ึงเบอร์เนิร์ส-ลี ได้เล็งเห็นโอกาสในการใช้ "ข้อความหลายมิติ" ผนวกเข้ากับ
อินเทอร์เน็ต โดยเอาความคิดเร่ืองข้อความหลายมิติน้ีเชื่อมต่อเข้ากับความคิด "ทีซีพี" และ "DNS"จึงกลายเป็น
"เวิลด์ไวด์เวบ็ "
1.3 ประเภทของเวบ็ ไซต์

1.3.1 เวบ็ ธรุ กจิ หรอื การตลาด (Business/ Marketing site)
1.3.2 เวบ็ หน่วยงานการศึกษา (Education site)
1.3.3 เวบ็ บันเทิง (Entertainment site)
1.3.4 เว็บท่า (Portal site)
1.3.5 เว็บขา่ ว (News site)
1.3.6 เวบ็ ข้อมูล (Information site)
1.3.7 เวบ็ องคก์ รท่ีไมแ่ สวงหาผลกาไร (None-profit Organization Site)
1.3.8 เวบ็ ส่วนตัว (Personal Site)
1.3.9 เวบ็ สังคมออนไลน์ (Social Network)

6

แผนการสอน หน่วยที่ 1
สอนคร้ังท่ี 1
ชือ่ วิชา การพฒั นาเว็บไซต์ทางธุรกจิ ชวั่ โมงรวม 4 ช.ม.
ชื่อหน่วย ความรเู้ บือ้ งต้นเกย่ี วกับเว็บไซต์
จานวน 4 ช.ม.
ช่อื เรอื่ ง ความหมายและความสาคัญของเวบ็ ไซต์ ท่ีมาของเว็บไซต์ ประเภทของเว็บไซต์
คาศัพทพ์ ้นื ฐานท่เี กีย่ วข้องกับเว็บไซต์

1.4 คาศพั ทพ์ ้ืนฐานท่เี กย่ี วขอ้ งกบั เว็บไซต์
1.4.1 โฮมเพจ (Home page) หมายถึง เว็บเพจหนา้ แรกท่ีปรากฏของแตล่ ะเวบ็ ไซต์
1.4.2 เว็บเพจ (Web page) หมายถึง หน้าเอกสารหนง่ึ หน้า
1.4.3 เว็บไซต์ (WebSite) หมายถึง หน้าเว็บเพจหลายหน้า ซึ่งเชือ่ มโยงกันผา่ นทางไฮเปอร์ลิงก์
1.4.4 เว็บเเบราเซอร์ (Web Browser) หมายถงึ โปรแกรมสาหรบั เรียกดูเวบ็ ไซต์
1.4.5 เวบ็ เซิรฟ์ เวอร์ (Web Server) หมายถงึ เคร่อื งคอมพวิ เตอรซ์ ง่ึ ให้บริการเวบ็ ไซต์ ซ่ึงผ้ใู ชเ้ รียกชม

หนา้ เวบ็ ไซตไ์ ดโ้ ดยใช้โปรโทคอล HTTP ผ่านทางเว็บเบราว์เซอร์
1.4.6 URL (Uniform Resource Locator) หมายถึง ข้อความท่บี อกตาแหน่งของข้อมลู

ใน Internet
1.4.7 www (World Wide Web) เป็นบริการข้อมูล โดยข้อมลู ของ www จะอยู่ในรูปเอกสารแบบ

Hypertext ซง่ึ ภายในเอกสารจะมีจุดเช่ือมโยง (link) ไปยังเอกสารอน่ื ๆ
1.4.8 อัพโหลด (Upload) และดาวนโ์ หลด (Download) หมายถึง เป็นการส่งผ่านข้อมูลทางอิเล็กทรอนิกส์

ระหว่างคอมพิวเตอร์ 2 เครื่อง
1.4.9 โดเมนเนม (Domain name) หมายถงึ ชื่อเวบ็ ไซต์ซึ่งโดยปกติเปน็ ช่ือทีส่ ่ือถึงหนว่ ยงานองค์กรทีต่ ั้งข้ึน

7

แผนการสอน หน่วยท่ี 1

ชือ่ วิชา การพฒั นาเว็บไซต์ทางธุรกจิ สอนคร้ังที่ 1
ช่อื หน่วย ความร้เู บ้อื งตน้ เกี่ยวกบั เว็บไซต์ ชั่วโมงรวม 4 ช.ม.

ชือ่ เรอ่ื ง ความหมายและความสาคญั ของเว็บไซต์ ท่ีมาของเวบ็ ไซต์ ประเภทของเวบ็ ไซต์ จานวน 4 ช.ม.
คาศัพท์พ้ืนฐานท่เี ก่ยี วข้องกบั เว็บไซต์

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

ติดรูปภาพหนา้ จอเวบ็ ไซต์

………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………

8

แผนการสอน หน่วยที่ 1

ชอ่ื วิชา การพัฒนาเวบ็ ไซต์ทางธรุ กิจ สอนครงั้ ที่ 1
ชอื่ หน่วย ความรู้เบ้อื งต้นเกยี่ วกับเว็บไซต์ ชั่วโมงรวม 4 ช.ม.

ชอ่ื เรอ่ื ง ความหมายและความสาคญั ของเวบ็ ไซต์ ทมี่ าของเวบ็ ไซต์ ประเภทของเวบ็ ไซต์ จานวน 4 ช.ม.
คาศัพท์พื้นฐานทเ่ี กย่ี วข้องกับเว็บไซต์

เฉลยแบบฝกึ หัด หน่วยท่ี 1

แบบฝึกหัดหน่วยที่ 1 ความรู้เบื้องต้นเก่ียวกับเว็บไซต์

คาสง่ั จงตอบคาถามต่อไปนี้ให้ได้ใจความสมบูรณ์

1. จงบอกความหมายและความสาคัญของเว็บไซต์
เว็บไซต์ (website) หมายถึง เอกสารหน้าเว็บเพจหลายหน้าท่ีเชื่อมโยงกัน ส่วนใหญ่จัดทาข้ึนเพ่ือนาเสนอ

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

............................................................................................................................. ...........................
2. จงบอกทีม่ าของเว็บไซต์
เซอร์ทิโมที จอหน์ เบอร์เนริ ส์ -ลี (Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA) เกิดเม่ือวนั ที่ 8
มิถนุ ายน พ.ศ. 2498 เป็นผคู้ ิดค้นและประดิษฐ์ เวลิ ด์ไวด์เว็บ โดยเริม่ จากการจัดทาโครงการหนึ่งท่ใี ช้แนวคิด
"ข้อความหลายมิต"ิ หรือ hypertext มาใช้สาหรับการแลกเปลี่ยนข้อมลู ระหว่างนักวจิ ยั ด้วยกัน
............................................................................................................................. ...........................

3. ประเภทของเว็บไซต์มีอะไรบา้ ง
ประเภทของเวบ็ ไซต์โดยท่ัวไปมี 9 ประเภทดงั นี้
1 เวบ็ ธุรกิจหรอื การตลาด (Business/ Marketing site) 2. เวบ็ หนว่ ยงานการศึกษา (Education site)

3. เวบ็ บันเทิง (Entertainment site) 4. เว็บท่า (Portal site) 5. เวบ็ ข่าว (News site) 6. เวบ็ ข้อมูล (Information
site) 7. เว็บองค์กรท่ีไมแ่ สวงหาผลกาไร (None-profit Organization Site) 8. เวบ็ ส่วนตัว (Personal Site)
9. เว็บสงั คมออนไลน์ (Social Network)

............................................................................................................................. ...........................
4. จงบอกความหมายของเวบ็ ธุรกิจหรือการตลาด (Business/Marketing site) พร้อมยกตัวอย่างเวบ็ ไซต์

ทนี่ ักศึกษารจู้ ักมา 3 เว็บไซต์
1. www.amazon.com 2. www.kaidee.com 3. www.shopee.co.th

............................................................................................................................. ...........................
5. จงบอกความหมายของเวบ็ ทา่ (Portal site) พร้อมยกตวั อย่างเวบ็ ไซตท์ ่นี ักศึกษารจู้ ักมา 3 เว็บไซต์

1.www.sanook.com 2.www.hunsa.com 3. www.kapook.com
............................................................................................................................. ...........................

9

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

จงทาเครื่องหมาย (X) ทับตวั เลือกท่ถี ูกต้อง

1. ระบบต้นแบบของเว็บไซต์มีชอ่ื เรียกว่าอย่างไร
ก. ENIAC
ข. ENQUIRE
ค. Hypertext
ง. WorldWideWeb

2. ประเภทของเว็บไซต์แบง่ ออกเป็นกปี่ ระเภท
ก. 6 ประเภท
ข. 7 ประเภท
ค. 8 ประเภท
ง. 9 ประเภท

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

4. เวบ็ เบราว์เซอรแ์ ละเอดเิ ตอรต์ วั แรกของโลกชื่อวา่ อะไร
ก. ENIAC
ข. ENQUIRE
ค. Hypertext
ง. WorldWideWeb

5. ข้อใดตอ่ ไปนี้ไม่ใชโ่ ปรแกรมเวบ็ เบราเซอร์
ก. Google Chrome
ข. Dreamweaver
ค. Netscape Navigator
ง. Safari

10

แผนการสอน หนว่ ยท่ี 1

ชื่อวิชา การพฒั นาเวบ็ ไซต์ทางธรุ กจิ สอนครั้งที่ 1
ชือ่ หน่วย ความรูเ้ บ้อื งตน้ เกยี่ วกบั เว็บไซต์ ชัว่ โมงรวม 4 ช.ม.

ชอ่ื เร่ือง ความหมายและความสาคัญของเว็บไซต์ ท่มี าของเว็บไซต์ ประเภทของเว็บไซต์ จานวน 4 ช.ม.
คาศัพทพ์ นื้ ฐานที่เก่ยี วข้องกับเวบ็ ไซต์

6. เวบ็ ท่สี รา้ งขึ้นโดยกลุ่มบุคคลหรือองค์กรต่าง ๆ ท่ีมนี โยบายในการสรา้ งสรรคท์ ช่ี ่วยเหลือสังคม
คือเว็บไซต์ประเภทใด
ก. เว็บข้อมูล (Information site)
ข. เวบ็ องค์กรที่ไม่แสวงหาผลกาไร
ค. เว็บทา่ (Portal site)
ง. เว็บบนั เทงิ (Entertainment site)

7. เว็บไซต์ www.google.co.th เปน็ เว็บไซต์ประเทศใด
ก. ประเทศไทย
ข. ประเทศจีน
ค. ประเทศองั กฤษ
ง. ประเทศออสเตรเลีย

8. เวบ็ ไซต์ www.google.co.th เปน็ เว็บไซต์เก่ียวกบั ข้อใด
ก. เว็บไซต์สถาบนั การศึกษา
ข. เวบ็ ไซตบ์ ริษทั หรอื องค์กรพาณชิ ย์
ค. เว็บไซต์องค์กรท่ีใหบ้ ริการเครือข่าย
ง. เวบ็ ไซต์องค์กรของรฐั บาล

9. เวบ็ ไซต์ https://www.alibaba.com ข้อใดต่อไปนห้ี มายถึช่ือเว็บไซต์ (domain name)
ก. www
ข. alibaba
ค. .com
ง. https

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

11

แผนการสอน หน่วยท่ี 2

ชื่อวิชา การพัฒนาเวบ็ ไซต์ทางธรุ กจิ สอนครั้งท่ี 2-3
ชื่อหน่วย กระบวนการและโครงสร้างการทางานของเวบ็ ไซต์ ชว่ั โมงรวม 12 ช.ม.

ชอื่ เรอื่ ง กระบวนการเตรยี มข้อมูลในการสรา้ งเวบ็ ไซต์ กระบวนการออกแบบและการ จานวน 8 ช.ม.
เลือกใช้สใี นเว็บไซต์ กระบวนการพัฒนาและเผยแพรเ่ ว็บไซต์ โครงสรา้ งการทางานของ
เวบ็ ไซต์ การออกแบบโครงสร้างการทางานของเว็บไซต์

1. สาระสาคญั
ในการสร้างเว็บไซต์ให้ประสบผลสาเร็จจะต้องมีกระบวนการในการจัดเตรียมข้อมูลในการสร้าง

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

2. หัวเรื่อง/รายการสอน/สาระการเรียนรู้
2.1 กระบวนการเตรยี มข้อมลู ในการสรา้ งเวบ็ ไซต์
2.2 กระบวนการออกแบบและการเลือกใชส้ ีในเว็บไซต์
2.3 กระบวนการพัฒนาและเผยแพรเ่ วบ็ ไซต์
2.4 โครงสรา้ งการทางานของเวบ็ ไซต์
2.5 การออกแบบโครงสร้างการทางานของเวบ็ ไซต์

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

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

12

แผนการสอน หน่วยที่ 2
สอนครง้ั ท่ี 2-3
ช่อื วิชา การพัฒนาเวบ็ ไซต์ทางธรุ กจิ ช่วั โมงรวม 12 ช.ม.
ช่อื หน่วย กระบวนการและโครงสร้างการทางานของเวบ็ ไซต์
จานวน 8 ช.ม.
ช่อื เรอ่ื ง กระบวนการเตรียมขอ้ มูลในการสรา้ งเวบ็ ไซต์ กระบวนการออกแบบและการ
เลอื กใชส้ ีในเว็บไซต์ กระบวนการพัฒนาและเผยแพร่เว็บไซต์ โครงสรา้ งการทางานของ
เวบ็ ไซต์ การออกแบบโครงสรา้ งการทางานของเว็บไซต์

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

พอประมาณ
1.จานวนผ้เู รียน
2. ระยะเวลาในการเรยี นการสอน
3. การใช้ทรพั ยากรรว่ มกนั

มเี หตุผล มภี ูมคุม้ กัน
1. ลดเวลาในการปฏบิ ัตงิ าน 1. ประหยดั ค่าใชจ้ า่ ย
2. ประมาณการเหตกุ ารณต์ ่าง ๆ 2. มคี วามรอบคอบในการทางาน
3.ลดขน้ั ตอนในการทางาน
4. เขา้ ใจงานและระบบการทางาน

สงั คม วฒั นธรรม
1. สร้างความสมั พนั ธท์ ดี่ ใี นกลมุ่ ผเู้ รียน 1. มมี รรยาทในการเรียน
2. ช่วยเหลอื กนั ในการทางานใหต้ รงเวลา 2. มสี มั มาคาระตอ่ ครผู ูส้ อนและผู้อาวโุ สกวา่
3. มคี วามรบั ผิดชอบในการใชเ้ ครอื่ งคอมพิวเตอร์

สงิ่ แวดลอ้ ม สมดลุ /พร้อมรับการเปลย่ี นแปลง
ใช้เครอ่ื งคอมพวิ เตอร์ที่มีให้คุ้มค่าและเป็น
1. รกั ษาความสะอาดในหอ้ งเรียน ประโยชนส์ ูงสดุ ต่อผเู้ รยี น
2. ดแู ลรักษาเคร่ืองคอมพิวเตอรใ์ หส้ ะอาดเสมอ
3. ปดิ ไฟ ปดิ เคร่ืองเมือ่ เลิกใช้งาน

ศาสตรพ์ ระราชา

หลกั การทรงงาน ศาสตร์สากล ศาสตรภ์ มู ปิ ญั ญา

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

3. ทางานอยา่ งมคี วามสขุ 3. มสี ติ

13

แผนการสอน หน่วยที่ 2
สอนคร้ังที่ 2-3
ช่ือวิชา การพัฒนาเวบ็ ไซต์ทางธรุ กจิ ชว่ั โมงรวม 12 ช.ม.
ช่อื หน่วย กระบวนการและโครงสรา้ งการทางานของเว็บไซต์
จานวน 8 ช.ม.
ชอ่ื เร่อื ง กระบวนการเตรียมข้อมลู ในการสร้างเวบ็ ไซต์ กระบวนการออกแบบและการ
เลือกใช้สีในเวบ็ ไซต์ กระบวนการพัฒนาและเผยแพร่เว็บไซต์ โครงสรา้ งการทางานของ
เว็บไซต์ การออกแบบโครงสร้างการทางานของเวบ็ ไซต์

6. กิจกรรมการเรียนการสอน
ขั้นตอนการสอนหรอื กิจกรรมของครู
ขั้นเตรยี มการ
1. ครเู ตรียมเอกสารการสอน Power point การสอน
2. ครูเชค็ ช่อื การเขา้ ห้องเรียน
3. นักเรียนตรวจสอบอุปกรณภ์ ายในหอ้ งเรยี น
ข้ันนา
1. ครสู อบถามความรู้พ้นื ฐานของผเู้ รียนเก่ยี วกบั เว็บไซต์
ขั้นสอน
ทฤษฎี
ครเู ปิดสอ่ื การสอน PowerPoint หนว่ ยที่ 2 เร่ืองกระบวนการและโครงสร้างการทางานของเว็บไซต์
โดยให้ผู้เรียนเขียนสรุปเนือ้ หาการสอนลงในสมุด ครเู ปดิ เวบ็ ไซต์ตวั อย่างเว็บไซต์ตวั อยา่ งและวิเคราะห์
เรอื่ งสี ให้ผู้เรียนฟังเป็นแนวทางในการจดั ทาผลงานตนเอง
ปฏบิ ัติ
1. ผูส้ อนใหผ้ เู้ รยี นทาแบบทดสอบกอ่ นเรียน
2. ผู้สอนใหผ้ เู้ รยี นทาใบงานท่ี 2 ใบงานที่ 2 กระบวนการและโครงสรา้ งการทางานของเวบ็ ไซต์
โดยการสืบค้นข้อมลู จากอนิ เทอรเ์ นต็ และถ่ายภาพหนา้ จอลงในเอกสาร Word ส่งผลงานการสืบค้น
ผา่ นกลุม่ พร้อมวเิ คราะหล์ ักษณะของเว็บไซต์นาเสนอหน้าชั้นเรียน
3. ผสู้ อนใหผ้ ู้เรียนทาแบบฝึกหัด หน่วยที่ 2
4. ผสู้ อนให้ผเู้ รยนทาแบบทดสอบหลังเรียน

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

7. ส่ือและแหล่งการเรียนรู้
1. หนังสอื เรยี นวิชา การสร้างเว็บไซต์
2. แบบประเมนิ ผลการเรียนรู้กอ่ นเรยี น/หลังเรียนพรอ้ มเฉลย
3. สอื่ การสอน Power Point หนว่ ยการเรยี นรทู้ ี่ 2
4. ส่ือการสอน www.kruwipawee.com

14

แผนการสอน หนว่ ยท่ี 2

ชอื่ วิชา การพัฒนาเว็บไซต์ทางธุรกจิ สอนครั้งท่ี 2-3
ชอ่ื หน่วย กระบวนการและโครงสร้างการทางานของเวบ็ ไซต์ ชว่ั โมงรวม 12 ช.ม.

ช่ือเรอื่ ง กระบวนการเตรยี มขอ้ มูลในการสร้างเวบ็ ไซต์ กระบวนการออกแบบและการ จานวน 8 ช.ม.

เลอื กใช้สใี นเวบ็ ไซต์ กระบวนการพัฒนาและเผยแพรเ่ ว็บไซต์ โครงสรา้ งการทางานของ

เว็บไซต์ การออกแบบโครงสรา้ งการทางานของเวบ็ ไซต์

8. วดั และประเมินผล

8.1 เครอื่ งมอื ประเมนิ

8.8.1 ตรวจแบบประเมินผลการเรยี นรกู้ ่อนเรยี น

8.1.2 สงั เกตพฤติกรรมการปฏิบตั ิงาน

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

เกณฑก์ ารประเมนิ ตามแบบทดสอบประจาหนว่ ยและแบบประเมนิ ชนิ้ งาน

เกณฑ์การประเมิน ผลการประเมนิ

ระดับคะแนน รอ้ ยละ 80-100 ระดับดีมาก

ระดับคะแนน รอ้ ยละ 70-79 ระดับดี

ระดับคะแนน รอ้ ยละ 60-69 ระดับปานกลาง

ระดับคะแนน รอ้ ยละ 50-59 ระดบั ผ่านเกณฑ์

ระดบั คะแนน ต่ากว่า รอ้ ยละ 50 ไม่ผา่ นเกณฑ์การประเมิน

หมายเหตุ คะแนนในการประเมนิ มีคะแนนเต็มเทา่ กับ 5 คะแนน

15

แผนการสอน หน่วยท่ี 2

ช่อื วิชา การพัฒนาเว็บไซต์ทางธรุ กจิ สอนคร้งั ท่ี 2-3
ช่อื หน่วย กระบวนการและโครงสร้างการทางานของเวบ็ ไซต์ ชว่ั โมงรวม 12 ช.ม.

ชือ่ เรอ่ื ง กระบวนการเตรียมขอ้ มลู ในการสรา้ งเวบ็ ไซต์ กระบวนการออกแบบและการ จานวน 8 ช.ม.
เลอื กใชส้ ใี นเวบ็ ไซต์ กระบวนการพัฒนาและเผยแพร่เว็บไซต์ โครงสรา้ งการทางานของ
เว็บไซต์ การออกแบบโครงสร้างการทางานของเวบ็ ไซต์
2.1 กระบวนการเตรยี มข้อมลู ในการสรา้ งเวบ็ ไซต์

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

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

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

ทั้งหมดมาแล้วต้องแยกข้อมูลและกาหนดผังงานให้กับเว็บไซต์จัดเรียงลาดับความสาคัญของข้อมูลต่าง ๆ

3. การเตรียมข้อมูลรูปภาพที่ใช้บนเว็บไซต์ การเตรียมข้อมูลรูปภาพท่ีใช้บนเว็บไซต์ถือว่ามีความสาคัญ

มากเพราะถ้ารูปภาพบนเว็บสวยงามสะดุดตาจะเป็นตัวดึงดูดให้ผู้เข้าชมมีความสนใจที่จะเย่ียมชมเว็บไซต์ ซึ่ง

นอกจากรูปสวยแล้วขนาดของรูปภ าพก็มีความส าคัญ มากเ พ ราะถ้าไฟล์ภ าพที่นามาส ร้างเว็บ ไซต์ มีขน า ด ไม่

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

2.2 กระบวนการออกแบบและการเลอื กใชส้ ีในเว็บไซต์
2.2.1 กระบวนการออกแบบเว็บไซต์
1) ความเรียบงา่ ย (Simplicity) คอื การใช้รปู แบบท่เี รียบง่าย ไมซ่ บั ซอ้ น และใช้งานไดอ้ ยา่ งสะดวกรวดเรว็
2) ความสม่าเสมอ (Consistency) คือ การสร้างความสมา่ เสมอให้กบั เวบ็ ไซตไ์ ด้โดยใชร้ ปู แบบเดยี วกนั

ตลอดทัง้ เว็บไซต์
3) ความเป็นเอกลักษณะ (Identity) คือ การออกแบบต้องคานึงถึงลักษณะขององคก์ ร
4) เนอ้ื หาท่ีมีประโยชน์ (Useful content) คือ เนื้อหาถือเป็นสง่ิ ทีส่ าคัญทีส่ ดุ ในเว็บไซต์
5) ระบบนาทางท่ีใช้งานง่าย (User Friendly Navigation) คือ การออกแบบระบบนาทางให้ผใู้ ชเ้ ข้าใจได้

งา่ ยและใช้งานสะดวก
6) มีลกั ษณะทนี่ า่ สนใจ (Visual Appeal) หน้าตาของเว็บไซตจ์ ะมีความสมั พันธก์ ับคุณภาพของ

องคป์ ระกอบตา่ ง ๆ
7) การใชง้ านอย่างไม่จากัด (Compatibility) คือ การออกแบบเวบ็ ไซตใ์ หผ้ ู้ใชส้ ่วนใหญ่เขา้ ถึงได้มากทสี่ ดุ โดย

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

8) คณุ ภาพในการออกแบบ (Design Stability) คอื การที่ต้องออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ
9) ระบบการใช้งานทีถ่ ูกต้อง (Functional Stability) การทางานต่าง ๆ ในเว็บไซตจ์ ะต้อง มคี วามแน่นอน
และทาหน้าท่ไี ด้อย่างถูกตอ้ ง เช่น ลิงกต์ ่าง ๆ ที่มอี ยนู่ นั้ จะต้องเชือ่ มโยงไปยงั หน้าท่มี ปี รากฏอยู่จรงิ และถกู ต้อง

16

แผนการสอน หน่วยท่ี 2

ช่ือวิชา การพัฒนาเวบ็ ไซต์ทางธรุ กจิ สอนครัง้ ที่ 2-3
ชอ่ื หน่วย กระบวนการและโครงสรา้ งการทางานของเวบ็ ไซต์ ชวั่ โมงรวม 12 ช.ม.

ช่อื เรอื่ ง กระบวนการเตรียมข้อมลู ในการสร้างเว็บไซต์ กระบวนการออกแบบและการ จานวน 8 ช.ม.
เลอื กใชส้ ใี นเวบ็ ไซต์ กระบวนการพัฒนาและเผยแพร่เว็บไซต์ โครงสร้างการทางานของ
เวบ็ ไซต์ การออกแบบโครงสร้างการทางานของเว็บไซต์
2.2.2 การเลือกใชส้ ใี นเวบ็ ไซต์

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

เว็บไซต์ ดังน้ันในการสรา้ งเว็บไซต์ สีเป็นสิ่งท่ีกาหนดความรู้สกึ เราสามารถใชส้ ตี กแต่งตวั อักษร รูปภาพ ลิงก์ และ

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

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

ดึงดดู ความสนใจของผู้เขา้ ชมเวบ็ ไซต์ได้น้อยลง สงิ่ ทต่ี ้องคานึงถึงเกี่ยวกับการใช้เลือกใช้สีสาหรับเวบ็ ไซต์มีดังนี้

1) การใช้สอี ยา่ งสมา่ เสมอ
2) ใชส้ อี ยา่ งเหมาะสม
3) ใชส้ ีเพื่อสอื่ ความหมาย
2.3 กระบวนการพัฒนาและเผยแพร่เวบ็ ไซต์

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

1. การจัดโครงรา่ งและตรวจสอบการทางานของไฟลภ์ ายในเวบ็ ไซต์
2. การขอพนื้ ท่ีเว็บไซต์บนเวบ็ เซริ ฟ์ เวอร์ (Webserver)
3. การจดโดเมนเนม (Domain name)
4. การอพั โหลด (Upload) ไฟล์ไปยงั เคร่อื งเวบ็ เซริ ฟ์ เวอร์ (Webserver) เพอ่ื เผยแพ่ร่ในระบบอินเทอร์เน็ต
2.4 โครงสรา้ งการทางานของเว็บไซต์

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

2.4.1. โครงสร้างของเว็บไซต์แบบเรียงตามลาดบั (Sequential Structure)
2.4.2.โครงสรา้ งของเว็บไซต์แบบลาดับขั้น (Hierarchical Structure)
2.4.3. โครงสร้างของเวบ็ ไซต์แบบตาราง (Grid Structure)
2.4.4. โครงสรา้ งเวบ็ ไซตแ์ บบใยแมงมมุ (Web Structure)
2.5 การออกแบบโครงสร้างเว็บไซต์
การออกแบบโครงสร้างเว็บไซต์ คือ การออกแบบ วางแผน การจัดหมวดหมู่ลาดับของเนื้อหาของเว็บไซต์ทั้งหมด

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

17

แผนการสอน หน่วยท่ี 2

ชอื่ วิชา การพัฒนาเวบ็ ไซต์ทางธุรกิจ สอนครง้ั ท่ี 2-3
ชอ่ื หน่วย กระบวนการและโครงสร้างการทางานของเวบ็ ไซต์ ช่ัวโมงรวม 12 ช.ม.

ช่อื เร่อื ง กระบวนการเตรยี มขอ้ มูลในการสร้างเวบ็ ไซต์ กระบวนการออกแบบและการ จานวน 8 ช.ม.
เลือกใช้สีในเวบ็ ไซต์ กระบวนการพัฒนาและเผยแพร่เว็บไซต์ โครงสรา้ งการทางานของ
เว็บไซต์ การออกแบบโครงสร้างการทางานของเวบ็ ไซต์

ใบงานที่ 2 กระบวนการและโครงสรา้ งการทางานของเว็บไซต์
คาชแ้ี จง : ให้นกั เรยี นออกแบบโครงสร้างเวบ็ ไซต์ ตามหัวข้อท่นี ักเรยี นสนใจ ต้ังเว็บไซต์พรอ้ มอธิบาย

ลักษณะเว็บไซต์ทจ่ี ะสร้างเขยี นผงั การเตรียมข้อมูลในการสรา้ งเว็บไซต์

ช่ือเว็บไซต์………………………………………………………………………………………………………………………
ลกั ษณะของเวบ็ ไซต์…………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………

18

แผนการสอน หนว่ ยที่ 2

ช่อื วิชา การพัฒนาเวบ็ ไซต์ทางธรุ กจิ สอนครง้ั ที่ 2-3
ชอ่ื หน่วย กระบวนการและโครงสรา้ งการทางานของเว็บไซต์ ชั่วโมงรวม 12 ช.ม.

ชอ่ื เร่ือง กระบวนการเตรยี มขอ้ มูลในการสร้างเวบ็ ไซต์ กระบวนการออกแบบและการ จานวน 8 ช.ม.
เลือกใชส้ ีในเวบ็ ไซต์ กระบวนการพฒั นาและเผยแพรเ่ วบ็ ไซต์ โครงสรา้ งการทางานของ
เว็บไซต์ การออกแบบโครงสรา้ งการทางานของเว็บไซต์

แบบฝกึ หดั หน่วยที่ 2 กระบวนการและโครงสร้างการทางานของเว็บไซต์
…………………………………………………………….........................................................................................

คาสง่ั จงตอบคาถามตอ่ ไปนี้ให้ได้ใจความสมบรู ณ์

1. กระบวนการในการเตรียมข้อมลู ในการสร้างเวบ็ ไซต์มีอะไรบา้ ง
ตอบ กระบวนการในการเตรียมข้อมลู ในการสรา้ งเว็บไซต์มดี ังน้ี
1. เตรยี มข้อมลู หรือเนื้อหาครา่ วๆ ทีเ่ ก่ยี วข้องกับเวบ็ ไซต์ทเ่ี กย่ี วขอ้ งกบั เว็บไซตเ์ พ่ือให้การสรา้ งเว็บไซต์

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

หมายถงึ อะไร
3. การเตรียมข้อมลู รูปภาพทใ่ี ชบ้ นเว็บไซต์

............................................................................................................................. ...........................

2. องค์ประกอบพน้ื ฐานทสี่ าคัญในการออกแบบพัฒนาเว็บไซต์ได้อยา่ งมปี ระสทิ ธิภาพมีอะไรบ้าง
ตอบ 1) ความเรียบง่าย (Simplicity) 2) ความสม่าเสมอ (Consistency)
3) ความเป็นเอกลักษณะ (Identity) 4) เน้อื หาทม่ี ีประโยชน์ (Useful content)
5) ระบบนาทางที่ใชง้ านงา่ ย (User Friendly Navigation)
6) มลี ักษณะท่ีน่าสนใจ (Visual Appeal) 7) การใชง้ านอย่างไม่จากัด (Compatibility)
8) คุณภาพในการออกแบบ (Design Stability) 9) ระบบการใช้งานทถ่ี ูกต้อง (Functional

Stability)
............................................................................................................................. ...........................

3. สง่ิ ที่ต้องคานึงถึงเกย่ี วกบั การใช้เลือกใช้สีสาหรับเว็บไซต์มีอะไรบา้ ง
ตอบ สิ่งทต่ี ้องคานงึ ถึงเกี่ยวกับการใช้เลือกใชส้ สี าหรบั เว็บไซต์มดี ังน้ี
1) การใช้สีอยา่ งสม่าเสมอ 2) ใชส้ ีอย่างเหมาะสม 3) ใช้สเี พือ่ สอื่ ความหมาย
............................................................................................................................. ...........................

4. กระบวนการพัฒนาและเผยแพรเ่ วบ็ ไซตม์ ีอะไรบ้าง
ตอบ 1. การจัดโครงร่างและตรวจสอบการทางานของไฟล์ภายในเวบ็ ไซต์
2. การขอพน้ื ทเี่ ว็บไซตบ์ นเว็บเซริ ์ฟเวอร์ (Webserver)
3. การจดโดเมนเนม (Domain name)
4. การอพั โหลด (Upload) ไฟลไ์ ปยงั เคร่ืองเว็บเซิร์ฟเวอร์ (Webserver)
............................................................................................................................. ...........................

19

แผนการสอน หน่วยที่ 2

ชอื่ วิชา การพัฒนาเว็บไซต์ทางธุรกจิ สอนครั้งท่ี 2-3
ชอื่ หน่วย กระบวนการและโครงสรา้ งการทางานของเว็บไซต์ ชั่วโมงรวม 12 ช.ม.

ชอื่ เรือ่ ง กระบวนการเตรยี มข้อมลู ในการสรา้ งเวบ็ ไซต์ กระบวนการออกแบบและการ จานวน 8 ช.ม.
เลือกใชส้ ใี นเว็บไซต์ กระบวนการพัฒนาและเผยแพรเ่ วบ็ ไซต์ โครงสร้างการทางานของ
เวบ็ ไซต์ การออกแบบโครงสร้างการทางานของเว็บไซต์

แบบทดสอบหลงั เรียน
หนว่ ยท่ี 2 กระบวนการและโครงสรา้ งการทางานของเวบ็ ไซต์

จงทาเครื่องหมาย (X) ทับตัวเลอื กท่ถี ูกต้อง
1. รูปแบบไมซ่ ับซ้อน และใช้งานไดส้ ะดวก ไม่มีกราฟกิ หรือตวั อักษรเคล่ือนไหวอยู่ตลอดเวลาชนิด

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

ก. ลกั ษณะเปน็ ท่นี ่าสนใจ
ข. ความเป็นเอกลักษณ์
ค. ความเรียบงา่ ย
ง. ความสม่าเสมอ
2. การขอพ้ืนท่เี วบ็ ไซต์บนเวบ็ เซริ ฟ์ เวอร์ (Webserver) อยูใ่ นกระบวนการตามขอ้ ใด
ก. กระบวนการเตรยี มข้อมูลในการสรา้ งเวบ็ ไซต์
ข. กระบวนการออกแบบเว็บไซต์
ค. กระบวนการพัฒนาเวบ็ ไซต์
ง. กระบวนการเผยแพร่เว็บไซต์
3. ข้อใดคือความหมายของสีน้าเงินและสีฟ้า
ก. ความรสู้ ึกสงบ สดใส สภุ าพ
ข. ความร้อน
ค. ความเศรา้ หมอง
ง. ความรกั
4. ขอ้ ใดต่อไปนี้คือคุณสมบัตโิ ครงสร้างเวบ็ ไซต์แบบใยแมงมุม
ก. เน้อื หาไม่ซบั ซ้อนใชก้ ารลิงกไ์ ปทลี ะหนา้
ข. เนื้อหาถูกแบง่ ออกเปน็ ส่วนยอ่ ย ๆ เรียงลาดบั มีจุดเริ่มต้นท่ีจุดรวมจดุ เดียว
ค. เน้นความยืดหยุ่นในการเข้าสู่เนอ้ื หาของผูใ้ ชเ้ พ่มิ การเชอื่ มโยงกันและกันในระหวา่ งเน้อื หา
ง. เนอื้ หาทกุ หนา้ ของเวบ็ สามารถเช่อื มโยงถึงกันไดห้ มด
5. ขอ้ ใดตอ่ ไปน้คี ือคุณสมบตั ิของโครงสร้างเว็บไซตแ์ บบเรียงลาดับ
ก. เน้อื หาไม่ซับซ้อนใชก้ ารลงิ กไ์ ปทีละหน้า
ข. เนอื้ หาถูกแบ่งออกเป็นสว่ นย่อย ๆ เรยี งลาดบั มีจุดเร่ิมต้นท่ีจุดรวมจดุ เดยี ว
ค. เน้นความยืดหยุน่ ในการเขา้ สเู่ น้ือหาของผใู้ ช้เพิ่มการเช่ือมโยงกนั และกันในระหว่างเน้ือหา
ง. เน้อื หาทุกหน้าของเว็บสามารถเชื่อมโยงถงึ กันไดห้ มด

20

แผนการสอน หนว่ ยท่ี 2

ชื่อวิชา การพฒั นาเวบ็ ไซต์ทางธรุ กจิ สอนคร้ังท่ี 2-3
ชื่อหน่วย กระบวนการและโครงสร้างการทางานของเว็บไซต์ ชั่วโมงรวม 12 ช.ม.

ชอื่ เร่ือง กระบวนการเตรยี มข้อมูลในการสรา้ งเว็บไซต์ กระบวนการออกแบบและการ จานวน 8 ช.ม.
เลือกใช้สใี นเวบ็ ไซต์ กระบวนการพฒั นาและเผยแพร่เวบ็ ไซต์ โครงสรา้ งการทางานของ
เว็บไซต์ การออกแบบโครงสร้างการทางานของเวบ็ ไซต์

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

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

8. ชดุ สีใดตอ่ ไปนี้ทใ่ี ห้ความรู้สกึ สดชืน่ เย็นสบายตา
ก. ชดุ สีฟา้
ข. ชุดสเี ขียว
ค. ชุดสเี หลอื ง
ง. ชุดสสี ม้

9. การเตรียมภาพโลโก้ ภาพสนิ คา้ ภาพตา่ ง ๆ ท่ีเกย่ี วข้องในการทาเว็บไซต์อยใู่ นกระบวนการตามขอ้ ใด
ก. กระบวนการเตรยี มข้อมูลในการสรา้ งเว็บไซต์
ข. กระบวนการออกแบบเวบ็ ไซต์
ค. กระบวนการพัฒนาเว็บไซต์
ง. กระบวนการเผยแพรเ่ วบ็ ไซต์

10. ขัน้ ตอนวธิ ีการถา่ ยทอดรูปแบบของเวบ็ ไซต์จากความคิดออกมาเปน็ ผลงานคอื ความหมายของกระบวนการตาม
ขอ้ ใด

ก. กระบวนการเตรียมข้อมลู ในการสร้างเว็บไซต์
ข. กระบวนการออกแบบเว็บไซต์
ค. กระบวนการพัฒนาเว็บไซต์
ง. กระบวนการเผยแพร่เว็บไซต์

21

แผนการสอน หน่วยท่ี 3

ชื่อวิชา การพฒั นาเวบ็ ไซต์ทางธุรกจิ สอนคร้งั ท่ี 4-5

ช่ือหน่วย โครงสรา้ งและไวยากรณข์ องโปรแกรมภาษาในการสรา้ ง ชัว่ โมงรวม 20 ช.ม.

เวบ็ ไซต์

ชือ่ เรอ่ื ง โครงสรา้ งและไวยากรณ์ของโปรแกรมภาษาในการสรา้ งเว็บไซต์ คาสง่ั ภาษา จานวน 8 ช.ม.

HTML พน้ื ฐานในการสรา้ งเว็บไซต์ โปรแกรมภาษาทน่ี ยิ มใช้ในการพฒั นาเว็บไซต์

1. สาระสาคัญ

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

ติดต่อสื่อสารกันได้อย่างสะดวกรวดเร็วขึ้น รวมทั้งการสร้างเว็บไซต์ในปัจจุบันสามารถทาได้ง่าย โดยที่ผู้สร้าง

เว็บไซต์เพียงแค่ออกแบบโปรแกรมก็สามารถสร้างชุดคาส่ังในการทางานใหโ้ ดยที่ผู้สร้างไม่จาเป็นต้องมีความรู้

ในเรื่องการเขียนชุดคาสั่งยาก ๆ ก็สามารถทาเว็บไซต์ออกมาอย่างสวยงามได้ แต่หากผู้สร้างเว็บไซต์รู้จัก

โครงสรา้ งภาษาและไวยากรณ์ของโปรแกรมภาษาในการสรา้ งเวบ็ ไซต์จะทาให้การสร้างเว็บไซต์มีประสิทธิภาพ

มากย่ิงข้ึนหากเกิดปัญหาใด ๆ เกิดขึ้นก็สามารถแก้ไขผ่านชุดคาสั่งได้ทันที ดังนั้นในหน่วยนี้จะกล่าวถึง

โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ คาส่ังภาษา HTML พ้ืนฐานในการสร้าง

เวบ็ ไซต์และโปรแกรมภาษาท่ีนยิ มใชใ้ นการพฒั นาเว็บไซต์เพ่อื ให้มีความรใู้ นการสรา้ งเวบ็ ไซตใ์ นหน่วยตอ่ ไป

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

3. สมรรถนะอาชีพประจาหนว่ ย
แสดงความรู้เกี่ยวโครงสร้างและไวยากรณข์ องโปรแกรมภาษาในการสรา้ งเว็บไซต์

4. จุดประสงค์การเรียนรู้
จุดประสงค์ทั่วไป
1. อธิบายเกีย่ วกับโครงสร้างและไวยากรณข์ องโปรแกรมภาษาในการสร้างเว็บไซต์
2. อธบิ ายเกยี่ วกับคาสั่งภาษา HTML พนื้ ฐานในการสรา้ งเวบ็ ไซต์
3. สามารถบอกโปรแกรมภาษาท่นี ิยมใช้ในการพฒั นาเวบ็ ไซต์ได้
จุดประสงค์เชิงพฤติกรรม
1. มีความรคู้ วามเขา้ ใจเกย่ี วกับโครงสรา้ งและไวยากรณ์ของโปรแกรมภาษาในการสรา้ งเว็บไซต์
2. มีความรเู้ ก่ยี วกับคาสัง่ ภาษา HTML พืน้ ฐานในการสรา้ งเว็บไซต์
3. บอกโปรแกรมภาษาทีน่ ิยมใชใ้ นการพัฒนาเวบ็ ไซต์ได้

22

แผนการสอน หน่วยที่ 3
สอนคร้ังที่ 4-5
ช่อื วิชา การพัฒนาเว็บไซต์ทางธุรกิจ ชว่ั โมงรวม 20 ช.ม.

ชอื่ หน่วย โครงสร้างและไวยากรณข์ องโปรแกรมภาษาในการสรา้ ง จานวน 8 ช.ม.
เว็บไซต์

ชือ่ เรอ่ื ง โครงสรา้ งและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ คาสั่งภาษา
HTML พืน้ ฐานในการสรา้ งเว็บไซต์ โปรแกรมภาษาท่ีนิยมใชใ้ นการพัฒนาเว็บไซต์

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

พอประมาณ
1.จานวนผ้เู รียน
2. ระยะเวลาในการเรียนการสอน
3. การใช้ทรัพยากรรว่ มกนั

มเี หตุผล มภี ูมคมุ้ กนั
1. ลดเวลาในการปฏบิ ตั ิงาน 1. ประหยดั ค่าใชจ้ า่ ย
2. ประมาณการเหตกุ ารณ์ตา่ ง ๆ 2. มคี วามรอบคอบในการทางาน
3.ลดขนั้ ตอนในการทางาน
4. เข้าใจงานและระบบการทางาน

สังคม วัฒนธรรม
1. สรา้ งความสมั พนั ธ์ที่ดใี นกลุ่มผูเ้ รยี น 1. มีมรรยาทในการเรยี น
2. ช่วยเหลอื กนั ในการทางานให้ตรงเวลา 2. มสี มั มาคาระต่อครูผู้สอนและผู้อาวุโสกวา่
3. มีความรับผดิ ชอบในการใช้เคร่ืองคอมพวิ เตอร์

ส่งิ แวดล้อม สมดุล/พร้อมรบั การเปลี่ยนแปลง
1. รักษาความสะอาดในหอ้ งเรียน ใชเ้ คร่อื งคอมพวิ เตอร์ท่ีมีใหค้ ุ้มค่าและเปน็
2. ดแู ลรักษาเครือ่ งคอมพวิ เตอรใ์ ห้สะอาดเสมอ ประโยชนส์ งู สดุ ต่อผเู้ รียน
3. ปิดไฟ ปิดเคร่อื งเม่อื เลิกใช้งาน

ศาสตร์พระราชา

หลกั การทรงงาน ศาสตร์สากล ศาสตร์ภูมปิ ัญญา

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

3. ทางานอยา่ งมคี วามสุข 3. มสี ติ

23

แผนการสอน หน่วยท่ี 3
สอนครั้งที่ 4-5
ชื่อวิชา การพัฒนาเวบ็ ไซต์ทางธุรกจิ ชั่วโมงรวม 20 ช.ม.

ชอื่ หน่วย โครงสร้างและไวยากรณข์ องโปรแกรมภาษาในการสรา้ ง จานวน 8 ช.ม.
เว็บไซต์

ชือ่ เรอ่ื ง โครงสรา้ งและไวยากรณ์ของโปรแกรมภาษาในการสรา้ งเวบ็ ไซต์ คาสงั่ ภาษา
HTML พ้ืนฐานในการสร้างเวบ็ ไซต์ โปรแกรมภาษาท่ีนิยมใชใ้ นการพฒั นาเวบ็ ไซต์

6. กจิ กรรมการเรยี นการสอน
ขั้นตอนการสอนหรอื กิจกรรมของครู
ขน้ั เตรยี มการ
1. ครูเตรียมเอกสารการสอน Power point การสอน
2. ครูเชค็ ชอื่ การเข้าห้องเรยี น
3. นกั เรียนตรวจสอบอปุ กรณภ์ ายในหอ้ งเรยี น
ขัน้ นา
1. ครสู อบถามและพูดถึงโครงสร้างพ้ืนฐานของโปรแกรมภาษาตา่ ง ๆ ในปัจจุบนั
2. สอบถามผ้เู รยี นถึงความรู้พนื้ ฐานเกีย่ วกับโปรแกรมภาษาในรายวิชาตา่ ง ๆ ท่นี ักเรยี นรจู้ ัก
3. ครูใหผ้ ้เู รียนจดั กล่มุ 1-2 คน คัดเลอื กเรอ่ื งท่ีจะทาเปน็ ชิน้ งาน และจดั เตรียมขอ้ มลู ไม่วา่ จะเปน็
รปู ภาพ ข้อความ เพ่ือใชใ้ นบทถัดไปและแสดงตัวอย่างช้ินงานของวชิ าใหเ้ ปน็ แนวทาง
ข้นั สอน
ทฤษฎี
ครเู ปิดสอ่ื การสอน PowerPoint หนว่ ยท่ี 3 เรอ่ื ง โครงสร้างและไวยากรณข์ องโปรแกรมภาษาในการ
สร้างเว็บไซต์ โดยใหผ้ ้เู รียนเขียนสรปุ เน้ือหาการสอนลงในสมุดครเู ปิดโปรแกรมสาธิตวิธกี ารเขียน
โปรแกรมภาษาในการสร้างเว็บไซต์
ปฏบิ ัติ
1. ผูส้ อนให้ผเู้ รียนทาแบบทดสอบก่อนเรียน
2. ผู้สอนให้ผู้เรยี นทาใบงานที่ 3 ใบงานที่ 3 โครงสรา้ งและไวยากรณ์ของโปรแกรมภาษาในการสร้าง
เวบ็ ไซต์ผ้สู อนใหผ้ ู้เรยี นทาแบบฝึกหัด หนว่ ยที่ 3
3. ผู้สอนให้ผู้เรียนทาแบบทดสอบหลงั เรยี น

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

7. สอ่ื และแหล่งการเรียนรู้
1. หนงั สือเรียนวิชา การสร้างเวบ็ ไซต์
2. แบบประเมนิ ผลการเรียนรกู้ อ่ นเรยี น/หลังเรยี นพร้อมเฉลย
3. สือ่ การสอน Power Point หนว่ ยการเรียนรูท้ ี่ 3 โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสรา้ ง
เวบ็ ไซต์
4. ส่อื การสอน www.kruwipawee.com

24

แผนการสอน หน่วยท่ี 3

ชอื่ วิชา การพัฒนาเว็บไซต์ทางธรุ กจิ สอนครั้งที่ 4-5

ช่ือหน่วย โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสรา้ ง ช่วั โมงรวม 20 ช.ม.

เว็บไซต์

ชอื่ เรอ่ื ง โครงสรา้ งและไวยากรณข์ องโปรแกรมภาษาในการสรา้ งเว็บไซต์ คาสง่ั ภาษา จานวน 8 ช.ม.

HTML พน้ื ฐานในการสร้างเว็บไซต์ โปรแกรมภาษาทน่ี ยิ มใชใ้ นการพัฒนาเวบ็ ไซต์

8. วัดและประเมนิ ผล

8.1 เครอ่ื งมอื ประเมนิ

8.8.1 ตรวจแบบประเมินผลการเรียนร้กู ่อนเรียน

8.1.2 สังเกตพฤติกรรมการปฏบิ ัตงิ าน

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

เกณฑ์การประเมนิ ตามแบบทดสอบประจาหน่วยและแบบประเมินช้ินงาน

เกณฑก์ ารประเมนิ ผลการประเมิน

ระดับคะแนน รอ้ ยละ 80-100 ระดบั ดีมาก

ระดับคะแนน รอ้ ยละ 70-79 ระดับดี

ระดับคะแนน รอ้ ยละ 60-69 ระดับปานกลาง

ระดบั คะแนน รอ้ ยละ 50-59 ระดับผ่านเกณฑ์

ระดับคะแนน ตา่ กว่า รอ้ ยละ 50 ไมผ่ ่านเกณฑ์การประเมนิ

หมายเหตุ คะแนนในการประเมนิ มคี ะแนนเต็มเทา่ กบั 5 คะแนน

25

แผนการสอน หนว่ ยที่ 3

ชือ่ วิชา การพัฒนาเว็บไซต์ทางธุรกิจ สอนครัง้ ที่ 4-5

ชอ่ื หน่วย โครงสรา้ งและไวยากรณข์ องโปรแกรมภาษาในการสร้าง ช่ัวโมงรวม 20 ช.ม.

เว็บไซต์

ชอ่ื เร่ือง โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ คาสั่งภาษา จานวน 8 ช.ม.

HTML พื้นฐานในการสรา้ งเว็บไซต์ โปรแกรมภาษาทีน่ ยิ มใชใ้ นการพัฒนาเว็บไซต์

3.1 โครงสร้างและไวยากรณข์ องโปรแกรมภาษาในการสร้างเวบ็ ไซต์

ในการสร้างเว็บไซต์สามารถสร้างได้โดยการเขียนผ่านโปรแกรมภาษาต่าง ๆ เช่นเดียวกันกับการ

เขียนโปรแกรม ก่อนที่จะนาไปเผยแพร่ให้ผู้ชมได้ชมเว็บไซต์โปรแกรมภาษาท่ีใช้ในการพัฒนาเว็บไซต์ โดยพื้นฐาน

ได้แก่

3.1.1 HTML (ย่อมาจาก Hyper Text Markup Language)

เป็นภาษาทใ่ี ช้สาหรับสรา้ งเว็บเพจ โครงสร้างของไฟล์ภาษา HTML โครงสรา้ งของหลกั ของ HTML

โครงสรา้ งหลกั ของ HTML กจ็ ะเร่มิ ดว้ ย <html> และจบด้วย </html> เสมอ ซึ่งชุดคาสงั่ ทีใ่ ชจ้ ะแยกเป็น 2

สว่ นคือ

1. head คาสั่งที่อยู่ในส่วนน้ีจะใช้บรรยายรายละเอียดเกีย่ วกบั web page ซ่งึ จะไม่แสดงผลท่ี

เว็บเพจโดยตรง

2. body คาสั่งท่อี ยู่ในส่วนนจ้ี ะใชใ้ นการจัดรปู แบบตัวอักษร จดั หน้า ใสร่ ปู ภาพ ซ่ึงตวั อกั ษรใน

สว่ นน้จี ะแสดงที่โปรแกรมเวบ็ เบราเซอร์โดยตรง

Source Code

<html>

<head>

คาส่ังในหัวข้อของ head

</head>

<body>

คาสัง่ ในหัวข้อของ body ในส่วนน้ีจะเป็นส่วนท่ใี ช้แสดงผล

</body>

</html>

3.1.2. CSS (ย่อมาจาก Cascading Style Sheets)

เป็นภาษาท่มี ีรูปแบบการเขียน Syntax ท่ีเฉพาะ ถูกกาหนดข้นึ เพื่อใช้เสรมิ ภาษา HTML ให้สามารถ

จัดรูปแบบการแสดงผลให้กับเอกสาร HTML ไดส้ มบรู ณ์แบบมากขนึ้ โครงสรา้ งรูปแบบคาส่งั อยู่ 2 สว่ น คือ

3.1.3. XHTML (ย่อมาจาก Extensible Hypertext Markup Language)
เปน็ มาตรฐานใหม่ของ HTML คาส่ังตา่ ง ๆ นัน้ กย็ งั เหมอื นกับ HTML แต่จะมีความเข้มงวดในเรื่อง

โครงสร้างภาษามากกวา่ และมกี ารตัด tag และ attribute ทีล่ ้าสมยั ออกไปจากขอ้ เสยี ของ HTML ที่เมื่อแสดงผล
ผา่ นเบราเซอ์รข์ องค่ายต่างๆ เช่น Internet Explorer, Firefox, Netscape, Opera และอ่นื ๆ

26

แผนการสอน หนว่ ยที่ 3

ช่ือวิชา การพัฒนาเวบ็ ไซต์ทางธุรกจิ สอนครง้ั ที่ 4-5

ช่ือหน่วย โครงสรา้ งและไวยากรณข์ องโปรแกรมภาษาในการสร้าง ชั่วโมงรวม 20 ช.ม.

เว็บไซต์

ชือ่ เรือ่ ง โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสรา้ งเว็บไซต์ คาสั่งภาษา จานวน 8 ช.ม.

HTML พ้นื ฐานในการสร้างเว็บไซต์ โปรแกรมภาษาท่นี ิยมใช้ในการพัฒนาเว็บไซต์

3.1.4 ภาษา Script ทีใ่ ชใ้ นการสรา้ งเว็บเพจ

ภาษา Script คือ โครงสร้างภาษาท่ีมีรูปแบบง่าย ๆ และมีความสามารถในการทางานดังน้ี

1. ใชใ้ นการสรา้ งและกาหนดคา่ ตัวแปร

2. ส่งค่าตัวแปรผา่ นไปยงั โปรแกรมเว็บเบราวเซอร์ฝั่ง Client เพื่อแสดงผลลัพธ์

3. เป็นชุดคาสั่งทีใ่ ชค้ วบคุมการทางาน เชน่ การใชเ้ งื่อนไข การทาซา้

3.2 คาสั่งภาษา HTML พนื้ ฐานในการสรา้ งเวบ็ ไซต์

ภาษา HTML (Hypertext Markup Language) เป็นภาษาคอมพิวเตอร์ท่ีแสดงท้ังข้อมูล และข้อมูล

รูปแบบเข้าด้วยกันโดยข้อมูลรปู แบบอธบิ ายถึงโครงสรา้ งหรือการแสดงผลซ่ึงส่วนนี้เรียกว่า ” Markup“ที่ใช้ในการ

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

หัวข้อ ลิงก์ ย่อหน้า รายการ รวมถึงการสร้างแบบฟอร์ม เชื่อมโยงภาพหรือวิดีโอด้วย โครงสร้างของภาษา HTML

นั้นจะอยใู่ นลักษณะภายในวงเลบ็ สามเหลย่ี ม ซึ่งเรยี กวา่ ”แทก็ ” หรือ “Tag”

3.3 โปรแกรมภาษาท่ีนยิ มใชใ้ นการพัฒนาเว็บไซต์

โปรแกรมที่ใช้ในการสร้างเว็บไซต์มีประสิทธิภาพและมีข้อดีข้อเสียที่แตกต่างกัน แล้วแต่จะเลือกใช้เคร่ืองมือใดใน
การสรา้ งเวบ็ ไซต์ เช่น โปรกรม Dreamweaver, NetObject, HomeSite , ColdFusion, FrontPage, Visual InterDev
หรืออาจสร้างได้โดยใช้ภาษาสาหรับสร้างเว็บเพจ (Web Program's Language) โดยเฉพาะ เช่น Active Server Page
(ASP) ,PHP, Java Server Pages (JSP), JavaScript, VBScript, Visual C++.Net ,Visual C# .Net

3.3.1 โปรแกรม Adobe Dreamweaver เป็นหน่ึงในชุด โปรแกรม Adobe Creative Cloud เป็นเครื่องมือ
หน่ึงในการช่วยสร้างเว็บไซต์ได้อย่างมีประสิทธิภาพ มีเครื่องมือหลากหลาย ๆ แบบท่ีช่วยให้สร้างเว็บไซต์ได้สะดวก
สะบายขึ้น

3.3.2 โปรแกรม JOOMLA คือ CMS ซึ่งย่อมาจาก "Content Management System CMS ซ่ึงย่อมาจาก
"Content Management System ตัวหน่ึงที่ได้รับความนิยมในปัจจุบัน คือ ระบบบรหิ ารจดั การเน้ือหาของเวบ็ ไซต์

3.3.3 โปรแกรม WordPress คือ โปรแกรมสาเร็จรูปท่ีใช้สาหรับสร้างบล็อก หรือ เว็บไซต์ สามารถใช้งานได้
ฟรี ถกู จัดอย่ใู นประเภท CMS (Contents Management System)

3.3.4 Web Page Maker คือโปรแกรมช่วยออกแบบเว็บ และสรา้ งเว็บไดง้ ่าย ๆ ด้วยภาษา HTML มีรปู แบบ
เวบ็ สาเรจ็ รูปท่หี ลากหลาย ใชห้ ลักการลากแลว้ วาง เลือกโคด้ สี HTML ได้

3.3.5 Google Site คือโปรแกรมท่ใี ห้บริการต่อยอดมาจาก Google ผูใ้ ชส้ ามารถสรา้ งเว็บเพจได้

27

แผนการสอน หนว่ ยที่ 3

ชอื่ วิชา การพัฒนาเวบ็ ไซต์ทางธรุ กิจ สอนครง้ั ท่ี 4-5

ชือ่ หน่วย โครงสรา้ งและไวยากรณข์ องโปรแกรมภาษาในการสร้าง ชว่ั โมงรวม 20 ช.ม.

เวบ็ ไซต์

ชือ่ เรื่อง โครงสรา้ งและไวยากรณ์ของโปรแกรมภาษาในการสร้างเวบ็ ไซต์ คาสัง่ ภาษา จานวน 8 ช.ม.

HTML พ้นื ฐานในการสรา้ งเว็บไซต์ โปรแกรมภาษาท่ีนิยมใช้ในการพฒั นาเว็บไซต์

ใบงานท่ี 3 โครงสร้างและไวยากรณข์ องโปรแกรมภาษาในการสรา้ งเวบ็ ไซต์

คาชแ้ี จง : ใหน้ ักเรียนวเิ คราะหก์ ารแสดงผลเวบ็ จากภาพว่ามชี ุดคาสั่งใดทเ่ี ก่ยี วข้องบา้ งพร้อมเขยี นบรรยายชุดคาสั่ง

เป็นขอ้ ๆ

…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………

28

แผนการสอน หนว่ ยท่ี 3
สอนคร้งั ท่ี 4-5
ชื่อวิชา การพฒั นาเว็บไซต์ทางธุรกจิ ชว่ั โมงรวม 20 ช.ม.
ชอื่ หน่วย โครงสรา้ งและไวยากรณข์ องโปรแกรมภาษาในการสร้าง
เว็บไซต์ จานวน 8 ช.ม.
ชอ่ื เรื่อง โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสรา้ งเว็บไซต์ คาสัง่ ภาษา
HTML พื้นฐานในการสร้างเว็บไซต์ โปรแกรมภาษาทีน่ ิยมใช้ในการพฒั นาเวบ็ ไซต์

แบบฝกึ หดั หน่วยที่ 3 ความรู้เบอื้ งตน้ เกี่ยวกับเว็บไซต์

คาสง่ั จงตอบคาถามตอ่ ไปนี้ใหไ้ ด้ใจความสมบรู ณ์

1. จงบอกโครงสร้างของภาษา HTML
ตอบ โครงสรา้ งของหลักของ HTML โครงสรา้ งหลักของ HTML กจ็ ะเรม่ิ ดว้ ย <html> และจบด้วย </html>

เสมอ ซึ่งชดุ คาสง่ั ท่ีใช้จะแยกเปน็ 2 สว่ นคือ
1. head คาส่ังท่ีอย่ใู นส่วนนี้จะใช้บรรยายรายละเอียดเก่ยี วกับ web page ซง่ึ จะไม่แสดงผลท่ี

เวบ็ เพจโดยตรง
2. body คาสง่ั ทอ่ี ยู่ในส่วนนีจ้ ะใช้ในการจัดรปู แบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอกั ษรใน

ส่วนนจ้ี ะแสดงทโี่ ปรแกรมเวบ็ เบราเซอร์โดยตรง
............................................................................................................................. ...........................

2. จดุ เด่นของภาษา XHTML คืออะไร
ตอบ เวบ็ เบราเซอ์รท์ กุ ค่ายจะรองรบั การใช้งาน XHTML และในอนาคตจะไม่มีปัญหาการแสดงผลที่ไม่

เหมือนกันในเว็บเบราเซอ์ร์ต่างคา่ ยกนั อกี
............................................................................................................................. ...........................

3. จงอธิบายรูปแบบของการเขียนภาษา Script
ตอบ รูปแบบของการเขยี นภาษา Script จะมีรปู แบบเขียนอยู่ 2 รูปแบบ คอื
รูปแบบท่ี 1: Client-Side Script เป็นการเขยี นโปรแกรมภาษา Script ใหท้ างานบนเวบ็ เบราวเซอร์
รปู แบบท่ี 2 : Server-Side Script เป็นการเขยี นโปรแกรมภาษา Script ใหท้ างานบน Web Server
............................................................................................................................. ...........................

4. จงบอกโครงสร้างคาสงั่ ของภาษา HTML การใส่พนื้ หลังให้กบั เว็บ
ตอบ <body background= “ชื่อของรูปภาพ หรือลงิ ก์ทีอ่ ยู่ของรูปภาพ”> เปน็ การใสร่ ูปภาพพื้นหลงั ให้กบั

เว็บ
............................................................................................................................. ...........................

5. จงยกตวั อย่างโปรแกรมทน่ี ิยมใชเ้ ปน็ เครื่องมือในการสร้างเวบ็ ไซต์ มา 3 โปรแกรม
ตอบ 1. โปรแกรม Adobe Dreamweaver 2. โปรแกรม JOOMLA 3. โปรแกรม WordPress
............................................................................................................................. ...........................

29

แผนการสอน หน่วยที่ 3

ช่ือวิชา การพฒั นาเวบ็ ไซต์ทางธรุ กิจ สอนครัง้ ท่ี 4-5

ชอ่ื หน่วย โครงสรา้ งและไวยากรณข์ องโปรแกรมภาษาในการสร้าง ช่ัวโมงรวม 20 ช.ม.

เวบ็ ไซต์

ชอ่ื เร่อื ง โครงสรา้ งและไวยากรณ์ของโปรแกรมภาษาในการสรา้ งเว็บไซต์ คาสั่งภาษา จานวน 8 ช.ม.

HTML พื้นฐานในการสร้างเว็บไซต์ โปรแกรมภาษาท่ีนิยมใช้ในการพฒั นาเว็บไซต์

แบบทดสอบหลังเรยี น

หนว่ ยที่ 3 โครงสรา้ งและไวยากรณข์ องโปรแกรมภาษาในการสรา้ งเวบ็ ไซต์

จงทาเคร่ืองหมาย (X) ทับตัวเลือกท่ีถูกต้อง

1. โปรแกรมข้อใดถกู จัดอยู่ในประเภท CMS (Contents Management System)
ก. Google Chrome
ข. Dreamweaver
ค. Joomla
ง. Microsoft word

2. หากตอ้ งการจดั รปู แบบตัวอักษร จัดหน้า ใส่รูปภาพ จะสามารถใสใ่ นสว่ นใดของภาษา HTML
ก. <head>….</html>
ข. <data>….</data>
ค. <body>….</body>
ง. <title>….</title>

3. ภาษา HTML ย่อมาจากอะไร
ก. Hyper Text Manage Language
ข. High Markup Language
ค. Hypertext website Language
ง. Hyper Text Markup Language

4. คาส่งั <META NAME="Keyword" CONTENT="ข้อความ 1, ข้อความ 2 ">หมายถงึ ข้อใด
ก. กาหนดช่ือผจู้ ดั ทาเวบ็ ไซต์ ชอ่ื ข้อความ 1, ข้อความ 2
ข. กาหนดข้อความ 1 ข้อความ 2 ให้เป็นคีย์หลักในการคน้ หา
ค. กาหนดเนื้อหาของเว็บไซต์ชื่อ ข้อความ 1, ข้อความ 2
ง. กาหนดรายละเอยี ดช่ือ ข้อความ 1, ข้อความ 2

5. ข้อใดคือ Tag เด่ียวของภาษา HTML
ก. <head>
ข. <p>
ค. <body>
ง. <title>

30

แผนการสอน หน่วยท่ี 3
สอนคร้งั ท่ี 4-5
ชอื่ วิชา การพัฒนาเวบ็ ไซต์ทางธรุ กิจ ชั่วโมงรวม 20 ช.ม.

ชือ่ หน่วย โครงสร้างและไวยากรณข์ องโปรแกรมภาษาในการสร้าง จานวน 8 ช.ม.
เวบ็ ไซต์

ชอ่ื เรอื่ ง โครงสรา้ งและไวยากรณข์ องโปรแกรมภาษาในการสรา้ งเว็บไซต์ คาส่ังภาษา
HTML พ้นื ฐานในการสร้างเวบ็ ไซต์ โปรแกรมภาษาท่ีนิยมใช้ในการพฒั นาเว็บไซต์

6. ข้อใดคือองคก์ รระหว่างประเทศทที่ างานด้านการพฒั นาเทคโนโลยีเว็บ
ก. Asp
ข. CSS
ค. Html5
ง. W3C

7. ขอ้ ใดคอื คาสั่งควบคมุ ชุดตัวอักษรแบบใดในการแสดงผลภาษา
ก. Title
ข. Keyword
ค. Charset
ง. language

8. ถ้าตอ้ งการใส่พ้ืนหลังให้กับเวบ็ ควรใชค้ าสั่งใด
ก. <body background=””>
ข. <body font face =””>
ค. <body bgcolor=””>
ง. <img src= “link” >

9. ขอ้ ใดคือขอ้ เสียของภาษา HTML
ก. การแสดงผลเวบ็ ไซต์ผ่านเบราเซอ์รข์ องคา่ ยต่าง ๆ แตกตา่ งกัน
ข. ตวั อกั ษรตัวใหญแ่ ละตวั อักษรเลก็ แสดงผลเหมือนกนั
ค. ชุดคาส่ังสามารถเขยี นย่อได้
ง. แตล่ ะ element ตอ้ งไมเ่ ปดิ ปดิ ข้ามกัน

10. ขอ้ ใดต่อไปนี้ไมใ่ ช่กฎของภาษา XHTML
ก. แต่ละ element ต้องไมเ่ ปิด ปดิ ขา้ มกัน
ข. ค่าของ attribute ตอ้ งอยูใ่ นเครือ่ งหมาย ".." เสมอ
ค. ตัวอกั ษรตัวใหญ่และตวั อักษรเล็กแสดงผลเหมือนกัน
ง. ตอ้ งประกาศ DOCTYPE อย่างถูกต้องเสมอ

31

แผนการสอน หนว่ ยท่ี 4

ชื่อวิชา การพัฒนาเว็บไซต์ทางธรุ กจิ สอนคร้ังท่ี 6-7

ชอื่ หน่วย การออกแบบและใชโ้ ปรแกรมกราฟกิ เสริมในการสรา้ ง ชวั่ โมงรวม 28 ช.ม.

เว็บไซต์

ชือ่ เรือ่ ง การออกแบบสว่ นประกอบของเวบ็ ไซต์ โปรแกรมกราฟิกท่นี ยิ มใช้ในการออกแบบ จานวน 8 ช.ม.

เวบ็ ไซต์ การใช้โปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเวบ็ ไซต์ การ

บนั ทกึ ไฟลภ์ าพกราฟิกสาหรับเวบ็ ไซต์ การใช้โปรแกรม Adobe Animate CC 2018 ใน

การออกแบบเวบ็ ไซต์ การบันทึกไฟลภ์ าพเคล่ือนไหวสาหรบั เว็บไซต์

1. สาระสาคญั

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

ติดต่อส่ือสารกันได้อย่างสะดวกรวดเร็วขึ้น การมีเว็บไซต์สวยจะช่วยในการดึงดูดความสนใจให้กับผู้เข้าชมเว็บไซต์

ไดเ้ ปน็ อยา่ งดี ดังนั้นในหน่วยนี้ จะมีเน้อื หาประกอบดว้ ย การออกแบบสว่ นประกอบของเว็บไซต์ โปรแกรมกราฟิก

ท่ีนิยมใช้ในการออกแบบเว็บไซต์ การใช้โปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเว็บไซต์ การ

บันทึกไฟล์ภาพกราฟิกสาหรับเว็บไซต์ การใช้โปรแกรม Adobe Animate CC 2018 ในการออกแบบเว็บไซต์

การบันทกึ ไฟล์ภาพเคล่ือนไหวสาหรับเว็บไซต์ เนอ้ื หาในหนว่ ยน้ีจะเป็นพื้นฐานในการออกแบบและสร้างเว็บไซต์ใน

หน่วยต่อไป

2. หัวเรือ่ ง/รายการสอน/สาระการเรียนรู้

1. การออกแบบส่วนประกอบของเว็บไซต์ 2. โปรแกรมกราฟกิ ท่ีนิยมใช้ในการออกแบบเว็บไซต์

3. การใชโ้ ปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเว็บไซต์4. การบันทึกไฟล์

ภาพกราฟกิ สาหรบั เว็บไซต์ 5. การใชโ้ ปรแกรม Adobe Animate CC 2018 ในการออกแบบเว็บไซต์

6. การบันทกึ ไฟลภ์ าพเคล่ือนไหวสาหรบั เว็บไซต์

3. สมรรถนะอาชีพประจาหนว่ ย

แสดงความรู้เกยี่ วการออกแบบและใชโ้ ปรแกรมกราฟิกเสรมิ ในการสร้างเวบ็ ไซต์

4. จุดประสงค์การเรยี นรู้

จดุ ประสงคท์ ่ัวไป

1. มีความรู้ในการออกแบบส่วนประกอบของเวบ็ ไซต์ 2. มีความรู้เกี่ยวกับโปรแกรมกราฟิกท่ีนิยมใช้ใน

การออกแบบเว็บไซต์ 3. มีความรู้เก่ียวกับการใช้โปรแกรม Adobe Photoshop CC 2018 ในการออกแบบ

เวบ็ ไซต์ 4. บนั ทึกไฟล์ภาพกราฟิกสาหรบั เวบ็ ไซต์ 5. ใ ช้ โ ป ร แ ก ร ม Adobe Animate CC 2018 ใ น ก า ร

ออกแบบเวบ็ ไซต์ 6. บนั ทึกไฟลภ์ าพเคลือ่ นไหวสาหรบั เวบ็ ไซต์

จุดประสงค์เชิงพฤติกรรม

1. สามารถออกแบบส่วนประกอบของเว็บไซต์ 2. อธิบายเก่ียวกับโปรแกรมกราฟิกที่นิยมใช้ในการ

ออกแบบเว็บไซต์ 3. สามารถใช้โปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเว็บไซต์

4. สามารถบันทึกไฟล์ภาพกราฟิกสาหรับเว็บไซต์ 5. สามารถใช้โปรแกรม Adobe Animate CC 2018 ใน

การออกแบบเว็บไซต์ 6. สามารถบันทึกไฟล์ภาพเคล่ือนไหวสาหรบั เว็บไซต์

32

แผนการสอน หนว่ ยท่ี 4

ช่ือวิชา การพัฒนาเว็บไซต์ทางธุรกิจ สอนครัง้ ที่ 6-7

ช่อื หน่วย การออกแบบและใชโ้ ปรแกรมกราฟกิ เสรมิ ในการสรา้ ง ช่ัวโมงรวม 28 ช.ม.

เวบ็ ไซต์

ช่อื เรือ่ ง การออกแบบสว่ นประกอบของเวบ็ ไซต์ โปรแกรมกราฟิกที่นยิ มใช้ในการออกแบบ จานวน 8 ช.ม.

เวบ็ ไซต์ การใช้โปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเวบ็ ไซต์ การ

บนั ทกึ ไฟล์ภาพกราฟิกสาหรบั เวบ็ ไซต์ การใชโ้ ปรแกรม Adobe Animate CC 2018 ใน

การออกแบบเวบ็ ไซต์ การบันทกึ ไฟล์ภาพเคล่ือนไหวสาหรับเว็บไซต์

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

พอประมาณ

1.จานวนผู้เรียน

2. ระยะเวลาในการเรยี นการสอน

3. การใช้ทรัพยากรรว่ มกัน
มีเหตผุ ล
มภี มู ค้มุ กนั
1. ลดเวลาในการปฏิบตั ิงาน
1. ประหยัดคา่ ใชจ้ า่ ย
2. ประมาณการเหตกุ ารณ์ตา่ ง ๆ
2. มีความรอบคอบในการทางาน
3.ลดขั้นตอนในการทางาน

4. เข้าใจงานและระบบการทางาน

สังคม วฒั นธรรม
1. สร้างความสัมพนั ธ์ทีด่ ีในกล่มุ ผู้เรียน 1. มีมรรยาทในการเรยี น
2. ช่วยเหลอื กนั ในการทางานให้ตรงเวลา 2. มีสมั มาคาระตอ่ ครผู ้สู อนและผูอ้ าวุโสกวา่
3. มคี วามรับผิดชอบในการใช้เครื่องคอมพิวเตอร์

สง่ิ แวดล้อม สมดุล/พรอ้ มรบั การเปลี่ยนแปลง
1. รกั ษาความสะอาดในหอ้ งเรียน ใช้เคร่อื งคอมพิวเตอร์ทีม่ ีใหค้ มุ้ ค่าและเป็น
2. ดแู ลรกั ษาเครือ่ งคอมพวิ เตอร์ใหส้ ะอาดเสมอ ประโยชนส์ งู สุดตอ่ ผเู้ รียน
3. ปิดไฟ ปิดเครื่องเมือ่ เลกิ ใชง้ าน

ศาสตร์พระราชา

หลกั การทรงงาน ศาสตรส์ ากล ศาสตร์ภูมิปญั ญา

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

33

แผนการสอน หน่วยที่ 4

ช่ือวิชา การพัฒนาเวบ็ ไซต์ทางธุรกจิ สอนครง้ั ที่ 6-7

ชือ่ หน่วย การออกแบบและใชโ้ ปรแกรมกราฟิกเสรมิ ในการสร้าง ช่ัวโมงรวม 28 ช.ม.

เวบ็ ไซต์

ช่อื เรอื่ ง การออกแบบสว่ นประกอบของเวบ็ ไซต์ โปรแกรมกราฟิกทนี่ ยิ มใชใ้ นการออกแบบ จานวน 8 ช.ม.

เวบ็ ไซต์ การใช้โปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเว็บไซต์ การ

บนั ทกึ ไฟลภ์ าพกราฟิกสาหรับเว็บไซต์ การใชโ้ ปรแกรม Adobe Animate CC 2018 ใน

การออกแบบเว็บไซต์ การบันทึกไฟลภ์ าพเคล่ือนไหวสาหรับเว็บไซต์

6. กิจกรรมการเรียนการสอน
ขั้นตอนการสอนหรอื กจิ กรรมของครู
ขั้นเตรียมการ
1. ครเู ตรียมเอกสารการสอน Power point การสอน
2. ครูเช็คชอื่ การเข้าหอ้ งเรียน
3. นกั เรยี นตรวจสอบอปุ กรณ์ภายในห้องเรียน
ขน้ั นา
1. ครเู ปดิ เว็บไซต์ตวั อย่างให้ผเู้ รียนชว่ ยกันวเิ คราะหส์ ว่ นประกอบต่าง ๆ ของเวบ็ ไซต์ท่ีพบเห็นในปัจจุบนั
ขัน้ สอน
ทฤษฎี
ครเู ปิดส่อื การสอน PowerPoint หนว่ ยท่ี 4 เรอื่ ง การออกแบบและใช้โปรแกรมกราฟิกเสริมในการ
สร้างเว็บไซต์ โดยครูผู้สอนสาธติ การออกแบบส่วนประกอบต่าง ๆ ของเว็บไซต์ให้ผเู้ รยี นเลยี นแบบหรือ
ปฎิบตั ติ ามแบบ
ปฏบิ ัติ
1. ผสู้ อนให้ผเู้ รยี นทาแบบทดสอบกอ่ นเรียน
2. ผู้สอนใหผ้ ู้เรยี นทาใบงานท่ี4 ใบงานที่ 4 การออกแบบและใช้โปรแกรมกราฟิกเสริมในการสร้าง
เวบ็ ไซต์ ผูส้ อนให้ผเู้ รียนทาแบบฝึกหัด หน่วยท่ี 4
3. ครูให้ผู้เรยี นจับกลุม่ 1-2 คนกาหนดหัวเรื่องทจ่ี ะทารว่ มกนั สร้างชนิ้ งาน ซึ่งประกอบด้วย ส่วนหวั
เว็บไซต์จดั ทาแมแ่ บบเอกสารเว็บไซต์ เพ่ือใชส้ ร้างเว็บไซต์ในบทถัดไปตามช้นิ งานของแต่ละกล่มุ
4. ผู้สอนใหผ้ เู้ รียนทาแบบทดสอบหลงั เรียน

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

7. สื่อและแหล่งการเรียนรู้
1. หนงั สือเรียนวิชา การสรา้ งเว็บไซต์
2. แบบประเมนิ ผลการเรียนรู้กอ่ นเรียน/หลงั เรยี นพรอ้ มเฉลย

ส่ือการสอน Power Point หน่วยการเรยี นรู้ท่ี 4 การออกแบบและใชโ้ ปรแกรมกราฟิกเสรมิ ในการสรา้ งเว็บไซต์
3. ส่อื การสอน www.kruwipawee.com

34

แผนการสอน หนว่ ยที่ 4

ช่อื วิชา การพฒั นาเวบ็ ไซต์ทางธรุ กิจ สอนครง้ั 6-7

ชอ่ื หน่วย การออกแบบและใชโ้ ปรแกรมกราฟิกเสรมิ ในการสร้าง ช่ัวโมงรวม 28 ช.ม.

เว็บไซต์

ชอื่ เรอ่ื ง การออกแบบส่วนประกอบของเว็บไซต์ โปรแกรมกราฟิกทน่ี ยิ มใชใ้ นการออกแบบ จานวน 8 ช.ม.

เว็บไซต์ การใชโ้ ปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเว็บไซต์ การ

บนั ทกึ ไฟลภ์ าพกราฟิกสาหรบั เว็บไซต์ การใชโ้ ปรแกรม Adobe Animate CC 2018 ใน

การออกแบบเว็บไซต์ การบันทึกไฟลภ์ าพเคลือ่ นไหวสาหรับเว็บไซต์

8. วดั และประเมนิ ผล

8.1 เครอ่ื งมือประเมิน

8.8.1 ตรวจแบบประเมินผลการเรียนร้กู ่อนเรยี น

8.1.2 สงั เกตพฤตกิ รรมการปฏบิ ตั งิ าน

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

เกณฑ์การประเมนิ ตามแบบทดสอบประจาหนว่ ยและแบบประเมินชิน้ งาน

เกณฑก์ ารประเมิน ผลการประเมิน

ระดบั คะแนน รอ้ ยละ 80-100 ระดบั ดีมาก

ระดับคะแนน ร้อยละ 70-79 ระดับดี

ระดบั คะแนน รอ้ ยละ 60-69 ระดับปานกลาง

ระดบั คะแนน รอ้ ยละ 50-59 ระดับผ่านเกณฑ์

ระดับคะแนน ตา่ กว่า ร้อยละ 50 ไมผ่ ่านเกณฑ์การประเมนิ

หมายเหตุ คะแนนในการประเมนิ มคี ะแนนเต็มเทา่ กับ 5 คะแนน