20204-2008__การสร้างเว็บไซต์

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

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

รหสั วิชา 20204-2008 วิชา การสรา้ งเวบ็ ไซต์
จานวนหน่วยกิต ( ท-ป-น ) 2-2-3 จานวนช่ัวโมงสอน / สปั ดาห์ 4 ช่ัวโมง

หลักสูตรประกาศนยี บตั รวิชาชพี (ปวช.) พุทธศกั ราช 2562
ประเภทวชิ า พาณิชยกรรม สาขาวชิ า คอมพวิ เตอร์ธรุ กิจ

สาขางาน คอมพิวเตอร์ธรุ กจิ
ภาคเรยี นท่ี 2 ปีการศกึ ษา 2565

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

รหสั วิชา 20204-2008 วิชา การสรา้ งเว็บไซต์
หลักสตู รประกาศนียบัตรวิชาชีพ พทุ ธศกั ราช 2562
ประเภทวิชา พาณิชยกรรม สาขาวิชา คอมพิวเตอรธ์ ุรกจิ

สาขางาน คอมพวิ เตอรธ์ ุรกิจ

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

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

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

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

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

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

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

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

ลงช่อื .....................................................
(นายพยนต์ สบื เสน)

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

คานา

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

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

นายมนต์ธร สาระบรู ณ์
ผู้จัดทา

สารบญั หน้า

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

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

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

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

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

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

หนว่ ยกติ 3 จานวนคาบรวม 72 คาบ/ทฤษฏี 2 คาบ/สัปดาห์ ปฏบิ ตั ิ 2 คาบ/สัปดาห์
ภาคเรยี นท่ี 2 ปีการศึกษา 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. รหสั และชื่อวิชา 20204-2008 วชิ า การสรา้ งเวบ็ ไซต์
2. หลักสตู รรายวิชา ประกาศนยี บัตรวชิ าชีพ (ปวช) พทุ ธศักราช 2562
3. ภาคเรยี นที่ 2/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 ทีม่ าของเว็บไซต์ 8

1.3 ประเภทของเว็บไซต์ 8
8
1.4 คาศพั ทพ์ นื ฐานทเ่ี กีย่ วข้องกับเว็บไซต์
4
2 กระบวนการและ 2.1 กระบวนการเตรียมข้อมูลในการสรา้ งเว็บไซต์ 8

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

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

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

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

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

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

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

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

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

โปรแกรมกราฟิกเสริมใน 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

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

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

2018 Dreamweaver CC 2018

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

รวม

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

หนว่ ยการเรยี นรู้รายวชิ า การสร้างเวบ็ ไซต์

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

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

7 การจดั การไฟล์ภาพกราฟิก 7.1 การจดั การไฟล์ภาพกราฟิกในเวบ็ ไซต์ 8
8
ภาพเคลื่อนไหวและข้อความ 7.2 การจัดการไฟล์ภาพเคล่ือนไหวในเว็บไซต์
8
ในเว็บไซต์ 7.3 การจดั การข้อความในเว็บไซต์ 8

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

เว็บไซต์ 8.2 การกาหนดพฤติกรรมการแสดงผลของภาพใน

เว็บไซต์

8.3 การเพมิ่ วีดีโอ YouTube ในเวบ็ ไซต์

9 การเชอื่ มโยงและการ 9.1 รู้จกั กบั การเช่ือมโยงเวบ็ ไซต์

ทดสอบการทางานของ 9.2 การเชอ่ื มโยงเวบ็ ไซต์

เวบ็ ไซต์ 9.3 การตรวจสอบการเชอื่ มโยงเว็บไซต์

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

โหลดเวบ็ ไซต์ 10.2 โปรแกรมท่ใี ชใ้ นการอัพโหลดเวบ็ ไซต์

10.3 การอัพโหลดเวบ็ ไซต์

รวม 72

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

วิชา การสรา้ งเว็บไซต์ รหสั วิชา 20204-2008
หลกั สตู รประกาศนียบัตรวิชาชีพ พทุ ธศักราช 2562 ประเภทวิชา พาณชิ ยกรรม กระทรวงศึกษาธิการ

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

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

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. เกดิ เป็นนสิ ัย

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

วชิ า การสรา้ งเวบ็ ไซต์ รหัสวิชา 20204-2008

เวลาเรียนต่อสปั ดาห์ ทฤษฎี 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

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

ชือ่ วิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนคร้งั ที่ 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. บอกโปรแกรมทน่ี ยิ มในการพัฒนาเวบ็ ไซตไ์ ด้

แผนการสอน หน่วยท่ี 1
สอนคร้งั ท่ี 1
ชือ่ วิชา การสร้างเว็บไซต์ (Website Creation) ช่ัวโมงรวม 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. ทางานอยา่ งมีความสุข

แผนการสอน หนว่ ยที่ 1
สอนคร้งั ท่ี 1
ช่อื วิชา การสร้างเว็บไซต์ (Website Creation) ชว่ั โมงรวม 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

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

ช่อื วิชา การสรา้ งเว็บไซต์ (Website Creation) สอนคร้งั ที่ 1
ช่อื หน่วย ความรูเ้ บืองต้นเกี่ยวกับเวบ็ ไซต์ ชวั่ โมงรวม 4 ช.ม.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ช่อื วิชา การสร้างเว็บไซต์ (Website Creation) สอนครง้ั ที่ 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)

แผนการสอน หนว่ ยที่ 1
สอนครัง้ ท่ี 1
ชอ่ื วิชา การสรา้ งเว็บไซต์ (Website Creation) ชว่ั โมงรวม 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) หมายถึง ชอ่ื เวบ็ ไซตซ์ ่ึงโดยปกติเป็นช่ือทีส่ ่ือถึงหน่วยงานองค์กรทีต่ ังขึน

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

ช่อื วิชา การสรา้ งเว็บไซต์ (Website Creation) สอนครงั้ ท่ี 1
ชื่อหน่วย ความรู้เบืองตน้ เกี่ยวกบั เว็บไซต์ ชัว่ โมงรวม 4 ช.ม.

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

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

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

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

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

ชื่อวิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนครง้ั ท่ี 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
........................................................................................................... .............................................

แผนการสอน หนว่ ยท่ี 1
สอนครั้งท่ี 1
ชือ่ วิชา การสร้างเว็บไซต์ (Website Creation) ชว่ั โมงรวม 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

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

ช่อื วิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนครั้งท่ี 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ช่ือวิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนครงั้ ท่ี 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 คะแนน

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

ชือ่ วิชา การสร้างเว็บไซต์ (Website Creation) สอนครงั้ ท่ี 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) การทางานต่าง ๆ ในเว็บไซต์จะต้อง มีความแน่นอน
และทาหน้าที่ได้อย่างถกู ต้อง เชน่ ลงิ ก์ตา่ ง ๆ ทีม่ ีอยูน่ ันจะตอ้ งเชือ่ มโยงไปยงั หน้าทม่ี ปี รากฏอยจู่ รงิ และถกู ต้อง

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

ช่อื วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนคร้ังที่ 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 การออกแบบโครงสร้างเวบ็ ไซต์
การออกแบบโครงสร้างเว็บไซต์ คือ การออกแบบ วางแผน การจัดหมวดหมู่ลาดับของเนือหาของเว็บไซต์ทังหมดและ
จัดทาเป็นแผนผังโครงสร้างเว็บไซต์ เพอื่ ให้ผูพ้ ฒั นาเวบ็ ไซตส์ ามารถพัฒนาเว็บไซต์ได้อย่างถูกต้องรวดเร็ว

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ชื่อวิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนครั้งท่ี 4-5

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

เว็บไซต์

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

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

3. สาระสาคญั

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ช่ือวิชา การสร้างเว็บไซต์ (Website Creation) สอนครัง้ ที่ 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 คะแนน

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

ช่ือวิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนครัง้ ที่ 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 และอน่ื ๆ

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

ช่อื วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนครัง้ ที่ 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 ผใู้ ชส้ ามารถสรา้ งเว็บเพจได้

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

ช่ือวิชา การสร้างเวบ็ ไซต์ (Website Creation) สอนคร้งั ท่ี 4-5

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

เวบ็ ไซต์

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

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

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

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

เป็นข้อ ๆ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ชือ่ วิชา การสรา้ งเว็บไซต์ (Website Creation) สอนครง้ั ที่ 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>

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

ชอื่ วิชา การสร้างเว็บไซต์ (Website Creation) สอนครง้ั ที่ 4-5

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

เวบ็ ไซต์ ม.

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

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

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 อย่างถูกต้องเสมอ

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

ชอื่ วิชา การสรา้ งเว็บไซต์ (Website Creation) สอนคร้งั ที่ 6-7

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

เวบ็ ไซต์

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

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

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

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

4. สาระสาคญั

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

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

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

นิยมใช้ในการออกแบบเว็บไซต์ การใช้โปรแกรม 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. สามารถบนั ทกึ ไฟลภ์ าพเคลือ่ นไหวสาหรบั เวบ็ ไซต์

แผนการสอน หนว่ ยที่ 4
สอนครั้งท่ี 6-7
ชอื่ วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) ชวั่ โมงรวม 28 ช.ม.

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

ชอ่ื เรอ่ื ง การออกแบบส่วนประกอบของเวบ็ ไซต์ โปรแกรมกราฟิกทนี่ ิยมใชใ้ นการออกแบบ
เว็บไซต์ การใชโ้ ปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเวบ็ ไซต์ การ
บันทกึ ไฟล์ภาพกราฟิกสาหรบั เวบ็ ไซต์ การใช้โปรแกรม Adobe Animate CC 2018 ใน
การออกแบบเว็บไซต์ การบันทกึ ไฟล์ภาพเคล่ือนไหวสาหรบั เวบ็ ไซต์

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

พอประมาณ

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

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

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

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

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

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

เสมอ
12. ปิดไฟ ปิดเครือ่ งเม่อื เลกิ ใช้งาน

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

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

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

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

แผนการสอน หน่วยท่ี 4
สอนครัง้ ที่ 6-7
ช่อื วิชา การสรา้ งเวบ็ ไซต์ (Website Creation) ช่วั โมงรวม 28 ช.ม.

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

ชอื่ เรอ่ื ง การออกแบบส่วนประกอบของเว็บไซต์ โปรแกรมกราฟิกท่ีนิยมใชใ้ นการออกแบบ
เว็บไซต์ การใช้โปรแกรม Adobe Photoshop CC 2018 ในการออกแบบเวบ็ ไซต์ การ
บันทึกไฟล์ภาพกราฟิกสาหรบั เวบ็ ไซต์ การใชโ้ ปรแกรม Adobe Animate CC 2018 ใน
การออกแบบเว็บไซต์ การบนั ทกึ ไฟล์ภาพเคลื่อนไหวสาหรับเว็บไซต์

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

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

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

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

ชื่อวิชา การสรา้ งเวบ็ ไซต์ (Website Creation) สอนครัง้ 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 คะแนน