ข้อสอบ การสร้างเว็บไซต์ ป ว ช

86% found this document useful (7 votes)

37K views8 pages

เฉลยข้อสอบมาแล้วจ้า

Uploaded by

kanokrat boonchaiyo

Full description

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

การจัดการเรียนรู้แบบมุ่งเน้นสมรรถนะอาชีพและบูรณาการ

ตามหลักปรัชญาของเศรษฐกิจพอเพียง

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

จ านวนหน่วยกิต ( ท-ป-น ) 2-2-3 จ านวนชั่วโมงสอน / สัปดาห์ 4 ชั่วโมง

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

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

ภาคเรียนที่ 2 ปีการศึกษา 2564

โดย

นายมนต์ธร สาระบูรณ์

ต าแหน่ง ครูจ้างสอนประจ ารายเดือน

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

อาชีวศึกษาจังหวัดศรีสะเกษ

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

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

ควรอนุญาตให้ใช้ในการสอนได้ ควรอนุญาตให้ใช้ในการสอนได้

ควรปรับปรุงเกี่ยวกับ ควรปรับปรุงเกี่ยวกับ

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

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

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

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

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

ลงชื่อ......................................... ลงชื่อ....................................................
(นายธนวิน สายนาค) (นายล่าปาง พันธ์เพชร)
ปฏิบัติงานในหน้าที่ รองผู้อ่านวยการฝ่ายวิชาการ ผู้อ่านวยการ

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

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

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

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

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

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

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

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

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

ภาคเรียนที่ 2 / 2564

รหัสวิชา 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
แบบทดสอบ/เฉลย 8

สอนภาคทฤษฎี/ภาคปฎิบัติหน่วยที่ 2 11
หัวข้อเรื่อง 11
สมรรถนะอาชีพประจ่าหน่วย 11
จุดประสงค์การเรียนรู้ 11

การบูรณาการแนวปรัชญาของเศรษฐกิจพอเพียง 12
กิจกรรมการเรียนการสอน 13
สื่อการเรียนการสอน 13
การประเมินผล 14

สารบัญ (ต่อ)

หน้า
เนื อหาสาระการเรียนรู้ 15
แบบฝึกหัด /ใบงาน 17

แบบทดสอบ/เฉลย 20
สอนภาคทฤษฎี/ภาคปฎิบัติหน่วยที่ 3 21
หัวข้อเรื่อง 21
สมรรถนะอาชีพประจ่าหน่วย 21

จุดประสงค์การเรียนรู้ 21
การบูรณาการแนวปรัชญาของเศรษฐกิจพอเพียง 22
กิจกรรมการเรียนการสอน 23

สื่อการเรียนการสอน 23
การประเมินผล 24
เนื อหาสาระการเรียนรู้ 25
แบบฝึกหัด /ใบงาน 27
แบบทดสอบ/เฉลย 28

สอนภาคทฤษฎี/ภาคปฎิบัติหน่วยที่ 4 31
หัวข้อเรื่อง 31
สมรรถนะอาชีพประจ่าหน่วย 31

จุดประสงค์การเรียนรู้ 31
การบูรณาการแนวปรัชญาของเศรษฐกิจพอเพียง 32
กิจกรรมการเรียนการสอน 33
สื่อการเรียนการสอน 33

การประเมินผล 34
เนื อหาสาระการเรียนรู้ 35
แบบฝึกหัด /ใบงาน 38
แบบทดสอบ/เฉลย 39

สอนภาคทฤษฎี/ภาคปฎิบัติหน่วยที่ 5 41
หัวข้อเรื่อง 41
สมรรถนะอาชีพประจ่าหน่วย 41
จุดประสงค์การเรียนรู้ 41

การบูรณาการแนวปรัชญาของเศรษฐกิจพอเพียง 42
กิจกรรมการเรียนการสอน 43
สื่อการเรียนการสอน 43

การประเมินผล 44
เนื อหาสาระการเรียนรู้ 45
แบบฝึกหัด /ใบงาน 47

สารบัญ (ต่อ)

หน้า
แบบทดสอบ/เฉลย 48
สอนภาคทฤษฎี/ภาคปฎิบัติหน่วยที่ 6 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
แบบฝึกหัด /ใบงาน 88

แบบทดสอบ/เฉลย 89
สอนภาคทฤษฎี/ภาคปฎิบัติหน่วยที่ 10 91
หัวข้อเรื่อง 91
สมรรถนะอาชีพประจ่าหน่วย 91
จุดประสงค์การเรียนรู้ 91

การบูรณาการแนวปรัชญาของเศรษฐกิจพอเพียง 92
กิจกรรมการเรียนการสอน 92
สื่อการเรียนการสอน 93

การประเมินผล 94
เนื อหาสาระการเรียนรู้ 95
แบบฝึกหัด /ใบงาน 97

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

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

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

จุดประสงค์รายวิชา เพื่อให้
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/2564
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
2018 Dreamweaver CC 2018

6 การสร้างเว็บไซต์ด้วย 6.1 การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 8
โปรแกรม Adobe 6.2 การสร้างไซต์

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

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

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

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

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

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

ิ่
8 การเพมเทคนิคพิเศษให้กับ 8.1 การเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ 8
เว็บไซต์ 8.2 การก่าหนดพฤติกรรมการแสดงผลของภาพใน
เว็บไซต์
8.3 การเพิ่มวีดีโอ YouTube ในเว็บไซต์

9 การเชื่อมโยงและการ 9.1 รู้จักกับการเชื่อมโยงเว็บไซต์ 8
ทดสอบการท่างานของ 9.2 การเชื่อมโยงเว็บไซต์
เว็บไซต์ 9.3 การตรวจสอบการเชื่อมโยงเว็บไซต์

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

รวม 72

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

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

1 2 3 4 5 6 1 2 3 4 5 1 2 3 4 5

1 ความรู้เบื องต้นเกี่ยวกับเว็บไซต์     4
1 8
2 กระบวนการและโครงสร้างการ
ท่างานของเว็บไซต์     
3 โครงสร้างและไวยากรณ์ของ      8
โปรแกรมภาษาในการสร้างเว็บไซต์
4 การออกแบบและใช้โปรแกรมกราฟก 8
ิ
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 ความรู้เบื องต้นเกี่ยวกับ แสดงความรู้เบื องต้นเกี่ยวกับเว็บไซต์ 4 1
เว็บไซต์

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 คะแนน )

1. จิตพิสัย 20 คะแนน
2. งานที่มอบหมาย 20 คะแนน
3. สอบกลางภาค 20 คะแนน
รวม 60 คะแนน

คะแนนปลายภาค ( 40 คะแนน )
1. งานที่มอบหมาย 20 คะแนน
2. สอบปลายภาค 20 คะแนน
รวม 30 คะแนน

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

3. ท่างานอย่างมีความสุข 3. มีสติ 3. .พร้อมปรับเปลี่ยนตามสถานการณ์

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

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

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

แผนการสอน หน่วยที่ 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
ิ
ชื่อวชา การสร้างเว็บไซต์ (Website Creation) สอนครั้งที่ 2-3
ชื่อหน่วย กระบวนการและโครงสร้างการท างานของเว็บไซต์ ชั่วโมงรวม 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
ชื่อวชา การสร้างเว็บไซต์ (Website Creation) สอนครั้งที่ 2-3
ิ
ชื่อหน่วย กระบวนการและโครงสร้างการท างานของเว็บไซต์ ชั่วโมงรวม 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
ชื่อวชา การสร้างเว็บไซต์ (Website Creation) สอนครั้งที่ 4-5
ิ
ชื่อหน่วย โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้าง ชั่วโมงรวม 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
ิ
ชื่อวชา การสร้างเว็บไซต์ (Website Creation) สอนครั้งที่ 4-5
ชื่อหน่วย โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้าง ชั่วโมงรวม 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
ิ
ชื่อวชา การสร้างเว็บไซต์ (Website Creation) สอนครั้งที่ 4-5
ชื่อหน่วย โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้าง ชั่วโมงรวม 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
ิ
ชื่อวชา การสร้างเว็บไซต์ (Website Creation) สอนครั้งที่ 6-7
ชื่อหน่วย การออกแบบและใช้โปรแกรมกราฟิกเสริมในการสร้าง ชั่วโมงรวม 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
ชื่อวชา การสร้างเว็บไซต์ (Website Creation) สอนครั้งที่ 6-7
ิ
ชื่อหน่วย การออกแบบและใช้โปรแกรมกราฟิกเสริมในการสร้าง ชั่วโมงรวม 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 คะแนน