วิจัยการพัฒนากิจกรรมการเรียนรู้

46

บันทึกผลหลังการจัดกจิ กรรมการเรียนรู้

ช้นั มธั ยมศกึ ษาปที ี่ 3 กลมุ่ เรยี น A

สอนเมือ่ วันท่.ี .......................................คาบที่...............เวลา...........................................น.

1. ผลการจดั การเรยี นรู้

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

2. ปญั หา/อุปสรรค

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

47

แผนการจดั การเรียนรู้ที่ 3 ช้ันมธั ยมศกึ ษาปีที่ 3
จำนวน 2 ช่วั โมง
รหัสวชิ า ว20285 ช่ือวชิ า การสร้างเวบ็ ไซตด์ ้วย web editor
หน่วยการเรยี นรูท้ ี่ 1 เรือ่ ง ทำความรู้จกั เวบ็ ไซต์

กลุ่มสาระการเรียนรูว้ ิทยาศาสตร์และเทคโนโลยี ผจู้ ดั ทำ นายวฒุ ิพงศ์ วงศท์ อง

1. มาตรฐานการเรียนรู้

มาตรฐาน ว 4.2 เข้าใจและใช้แนวคิดเชิงคำนวณในการแก้ปัญหาที่พบในชีวิตจริงอย่างเป็นขั้นตอนและ

เ ป ็ น ร ะ บ บ ใ ช ้ เ ท ค โ น โ ล ย ี ส า ร ส น เ ท ศ แ ล ะ ก า ร ส ื ่ อ ส า ร ใ น ก า ร เ ร ี ย น ร ู ้ ก า ร ท ำ ง า น แ ล ะ ก า ร แ ก ้ ป ั ญ ห า ไ ด้

อย่างมปี ระสทิ ธภิ าพ รู้เทา่ ทนั และมจี รยิ ธรรม

2. สาระสำคัญ/แนวคิด

ศึกษาความรู้พื้นฐานเกี่ยวกับการออกแบบเว็บไซต์ กระบวนการออกแบบเว็บไซต์ หลักการออกแบบ

เวบ็ ไซต์ หลักการการออกแบบหน้าเว็บ หลกั การการออกแบบส่วนข้อมูล ระบบนำทาง ตลอดจนศกึ ษาเกยี่ วกับ

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

และออกแบบหน้าเวบ็ เบือ้ งต้น

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

ทักษะกระบวนการคิด กระบวนการจัดการ การแก้ปัญหาในการทำงานเพือ่ สร้างช้ินงานตามความตอ้ งการได้

อยา่ งสวยงามและเหมาะสม

เพอ่ื ให้มคี วามรคู้ วามเข้าใจศพั ท์พนื้ ฐานก่อนการออกแบบเวบ็ ไซต์ กระบวนการออกแบบเว็บไซต์หลักการ

ออกแบบเว็บไซต์ หลักการออกแบบหน้าเว็บ หลกั การการออกแบบสว่ นข้อมลู ระบบนำทาง ตลอดจนสามารถ

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

อย่างสรา้ งสรรค์ มงุ่ มั่น ต้ังใจ และรอบคอบ

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

3.1 อธบิ ายกระบวนการสร้างเว็บไซตไ์ ด้

3.2 เขา้ ใจทีม่ าและความสำคญั ของเวบ็ ไซต์

3.3 เขา้ ใจกระบวนการและโครงสร้างการทำงานของเวบ็ เบอื้ งตน้

4. สาระการเรยี นรู้

4.1 ทีม่ าและความสำคัญของเว็บไซต์

4.2 การสรา้ งเว็บไซต์ด้วย Google Site

5. ตัวชว้ี ัด/ผลการเรยี นรู้

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

สรา้ งเว็บไซตด์ ว้ ย Google Site

6. คุณลกั ษณะอนั พึงประสงค์ : นักเรยี น

 1. รักชาติ ศาสน์ กษตั ริย์  2. ซื่อสตั ย์สุจรติ

 3. มวี ินยั  4. ใฝ่เรียนรู้

48

 5. อยู่อย่างพอเพียง  6. มุง่ มนั่ ในการทำงาน

 7. รกั ความเปน็ ไทย  8. มีจติ สาธารณะ

7. สมรรถนะสำคญั ของผู้เรียน

 1. ความสามารถในการสือ่ สาร  2. ความสามารถในการคดิ

 3. ความสามารถในการแกป้ ัญหา  4. ความสามารถในการใชท้ ักษะชวี ิต

 5. ความสามารถในการใช้เทคโนโลยี

8. สมรรถนะทาง ICT

8.1 ICT1 การเขา้ ถึงประเมนิ จัดการขอ้ มลู และสารสนเทศ

ให้กบั นกั เรยี นทีม่ อี ันดบั สูงสุด และเมือ่ เสรจ็ สน้ิ ครูผผู้สอนสรุปจากข้อคำตอบในบางขอ้ ที่นักเรียนตอบผิดให้กับ

นกั เรียนอีกคร้ัง

9. กระบวนการจัดการเรียน/กจิ กรรมการเรียนรู้

9.1 ข้นั นำ

ผู้สอนกล่าวทักทายนักเรียนสร้างบรรยากาศในชั้นเรียน และเช็ครายชื่อการเข้าเรียน ต่อมาผู้สอน

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

ของรางวัลเช่นเดิม โดยผู้สอนนำแอพพลิเคชั่นมาช่วยในการจัดการชั้นเรียน Vonder Go และแจ้งกฎกติกา

การเรียนโดยการนำเเนวคิดเกมมิฟิเคชั่นเข้ามาประยุกต์ใช้ ถ้าภายในชั้นเรียนมีการโต้ตอบกันกับครู และมี

คะแนนโดยรวมในการตอบถูกทง้ั ห้องเกนิ 50% จะสามารถชนะศัตรูฝงั่ ตรงข้าม และผทู้ ่ไี ดค้ ะแนนอันดับ 1-5

จะไดเ้ ป็นผสู้ ังหารศตั รฝู ั่งตรงข้าม และครกู ็มรี างวัลใหก้ ับผู้กล้าทั้ง 5 คน

9.2 ข้ันสอน

แตก่ อ่ นจะทำกจิ กรรม ผสู้ อนอธบิ ายโครงสรา้ งของเว้บไซตข์ อง Google Site ว่ามีลกั ษณะใดบา้ ง เพ่ือ

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

มาคนละ 1 เว็บไซต์ และผสู้ อบเดินตรวจสอบนกั เรียนแตล่ ะคนต่อเครือ่ งคอมพิวเตอรเ์ พื่อดูวา่ นกั เรยี น มปี ัญหา

หรอื ไม่เขา้ ใจขนั้ ตอนใด

9.3 ข้ันสรปุ

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

ต้นคาบ โดยเข้าสู่ Vonder Go แต่ละคนลงชื่อเขา้ ใช้ และเรม่ิ ทำแบบทดสอบในแต่ละข้อโดยมีครูผู้สอนรับหน้า

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

ชนะศัตรูฝั่งตรงข้ามไดห้ รือไม่ หากได้ให้ทำการให้รางวัลแก่ 5 คน ผู้กล้าที่มีอันดบั คะแนนสูงสุดในกิจกรรมน้ี

และหากไมส่ ามารถชนะศตั รูได้ ใหท้ ำการทบทวนบทเรียนอกี ครงั้ และกล่าวกับนกั เรียนว่าจะมกี ารทบทวนเพื่อ

ล้างแค้นต่อุศัตรูอีกครั้ง ดังนี้จะทำอย่างไรให้สามารถชนะฝั่งตรงข้ามได้ (แนวคำตอบ ทบทวนความรู้ ตั้งใจ

เรยี น ให้ครูอธบิ ายใหมอ่ ีกครงั้ ) จากน้นั สรปุ โดยสุ่ สรปุ ผลท่ไี ด้จากกิจกรรมน้ี และนดั แนะแนวทางในคาบถัดไป

10. สือ่ /แหลง่ เรียนรู้

9.1 Power Point เรือ่ ง Chapter มาทำความร้เู ว็บไซต์ Google Site

9.2 เว็บไซต์ https://sites.google.com/pkru.ac.th/portfoliowtp

49

9.3 ใบงานที่ 1 เรอ่ื ง แบบสำรวจขอ้ มูลนกั เรียน ผ่าน Google Form

9.4 แบบทดสอบก่อนเรยี น เรอื่ ง ทำความรู้จกั เว็บไซต์ โดยใช้ Vonder Go

11. การวัดและประเมนิ ผล

11.1 เกณฑก์ ารวัด

สง่ิ ทต่ี อ้ งการวดั /ประเมนิ ผล วธิ ีการวดั เคร่อื งมือวัด เกณฑก์ ารวดั และประเมินผล
1. การถาม – ตอบ 1. แบบสังเกตพฤตกิ รรม
ดา้ นความรู้ (Knowledge) 2. สงั เกตพฤตกิ รรม 2. ทดสอบก่อนเรยี น เรือ่ ง ทำ - ผา่ นเกณฑร์ ะดบั คุณภาพ 2 ขน้ึ ไป
1. เขา้ ใจหลกั การเขา้ ใช้ Google ความรจู้ ักเว็บไซต์ โดยใช้
Site คะแนน 4-5 หมายถึง ดี
Vonder Go คะแนน 2-3 หมายถงึ พอใช้
คะแนน 1-0 หมายถึง ปรบั ปรงุ
ด้านทักษะ/ ผ้เู รียนไดร้ ะดับคุณภาพ พอใช้
ถือวา่ ผา่ น
กระบวนการ (Process) - สงั เกตพฤตกิ รรมของนกั เรยี น 1. แบบสังเกตพฤติกรรม - ผ่านเกณฑ์ระดับคุณภาพ 2 ข้ึนไป

1. สามารถสร้างและเข้าใช้ google -
Site ได้

ด้านคณุ ลักษณะ (Attitude) - แบบประเมนิ คุณลักษณะอันพงึ ประสงค์ แบบประเมินคณุ ลกั ษณะอันพึง
1. มวี ินยั ประสงค์
2. ใฝเ่ รียนรู้
3. มงุ่ มัน่ ในการทำงาน

50

บันทึกผลหลังการจัดกจิ กรรมการเรียนรู้

ช้นั มธั ยมศกึ ษาปที ี่ 3 กลมุ่ เรยี น A

สอนเมือ่ วันท่.ี .......................................คาบที่...............เวลา...........................................น.

1. ผลการจดั การเรยี นรู้

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

2. ปญั หา/อุปสรรค

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

51

โรงเรยี นเฉลมิ พระเกียรติสมเดจ็ พระศรนี ครินทร์ ภเู ก็ต

ในพระราชูปถัมภส์ มเดจ็ พระเทพรตั นราชสุดาฯ สยามบรมราชกุมารี

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

กาหนดการสอน

ภาคเรียนที่ 2 ปีการศึกษา 2564 ระดับช้ันมัธยมศึกษาปีท่ี 3

ผสู้ อน วฒุ พิ งศ์ วงศท์ อง รายวชิ า การสร้างเว็บไซตด์ ว้ ย web editor รหัสวชิ า ว20285

จานวนคาบเรยี น 2 คาบ ( 1.40 ช่ัวโมง ) อัตราส่วนคะแนน K = 30% P = 50% A = 20%

คาบ ตวั ช้วี ดั / สาระการเรียนรู้ ส่ือ/ คะแนน ภาระงาน/ หมาย
ที่ ผลการเรียนรู้ นวตั กรรม/ KPA ชนิ้ งาน เหตุ
- แนะนาครูผูส้ อน/ เอกสารประกอบ
1-2 ปฐมนิเทศ รายละเอียดวชิ า การสอน 111 - แบบทดสอบกอ่ นเรียน
- ขอ้ ตกลงในชน้ั 1. Power Point Word wall
เรียน แนะนารายวิชาการสร้าง
- การใชง้ าน เวบ็ ไซต์
หอ้ งเรียน Google 2. Mentimeter นาเขา้
Classroom สู่บทเรยี นรายวชิ าการ
- แบบทดสอบก่อน สรา้ งเวบ็ ไซต์
เรียน ดว้ ยเวบ็ ไซต์ 2. แบบทดสอบกอ่ น
Word wall เรียน Word wall

3-4 1. เขา้ ใจกระบวนการ - ทม่ี าของเว็บไซต์ 1. ใบกจิ กรรมท่ี 1 live 3 1 1 ใบกจิ กรรมท่ี 1 เว็บไซตใ์ น
และโครงสรา้ งการ - ความหมายของ
ทางานของเว็บเบ้อื งตน้ เว็บไซต์ work Sheet วเิ คราะห์ ชีวิตประจาวัน
- ประโยชนแ์ ละ
ความความสาคัญ เว็บไซต์ทฉ่ี ันร้จู ัก
ของเวบ็ ไซต์
2. Power Point

Ep.1 ทาความรู้จัก

เกยี่ วกับเวบ็ ไซต์

3. สือ่ วิดที ัศน์ YouTube

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

5-6 1. เข้าใจกระบวนการ - ทาความรู้จกั 1. Power Point 3 1 1 ใบงานกิจกรรมท่ี 2
และโครงสร้างการ Google Site Ep.2 ทาความรจู้ ัก Google Site
ทางานของเวบ็ เบอ้ื งตน้ - ลักษณะของ
โปรแกรม Google Google Site
Site

7-8 1. เข้าใจกระบวนการ - การเขา้ ใชง้ าน 1. เวบ็ ไซต์ Google Site 1 3 1 - เวบ็ ไซต์จากGoogle Site
และโครงสร้างการ Google Site ของนกั เรียนแต่ละคนตาม
ทางานของเว็บเบอ้ื งต้น หวั ขอ้ ทน่ี ักเรยี นสนใจ

- ข้นั ตอนการสราง 52
เว็บไซตใหม่
- ขัน้ ตอนการตง้ั ช่ือ รวม 8 6 4
เว็บไซต์
(โดยกำหนดหวั ขอ้ ลงชอ่ื .................................................หัวหนา้ กลุ่มสาระ
เว็บไซตท์ ส่ี ่งิ ท่ี ลงชอื่ .................................................ผอู้ านวยการ
นกั เรยี นสนใจ)

ลงชือ่ .................................................ผูส้ อน
ลงชื่อ.................................................ฝ่ายวชิ าการ

53

โรงเรยี นเฉลิมพระเกียรติสมเด็จพระศรนี ครินทร์ ภเู ก็ต

ในพระราชปู ถัมภส์ มเด็จพระเทพรตั นราชสุดาฯ สยามบรมราชกมุ ารี

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

กาหนดการสอน

ภาคเรียนท่ี 2 ปกี ารศกึ ษา 2564 ระดับชน้ั มัธยมศกึ ษาปีท่ี 3

ผู้สอน วฒุ พิ งศ์ วงศท์ อง รายวชิ า การสรา้ งเวบ็ ไซต์ดว้ ย web editor รหสั วิชา ว20285

จานวนคาบเรียน 2 คาบ ( 1.40 ช่วั โมง ) อตั ราส่วนคะแนน K = 30% P = 50% A = 20%

คาบ ตัวชี้วัด / สาระการเรียนรู้ สอ่ื / คะแนน ภาระงาน/ หมาย
ที่ ผลการเรียนรู้ นวัตกรรม/ KPA ชนิ้ งาน เหตุ
- สว่ นประกอบ เอกสารประกอบ
9- 2. เขา้ ใจโครงสร้างและ ต่างๆ ของเว็บไซต์ การสอน 1 3 1 - ใบกิจกรรมที่ 3
10 ไวยากรณ์ของโปรแกรม Google Site สว่ นประกอบในหนา้ ตา่ ง
1. Power Point ของเว็บไซต์ Google Site
ภาษาหรือกระบวนการ - หนา้ เว็บ Ep.3 ส่วนประกอบ
การใชเ้ ครื่องมือการสร้าง - สว่ นหวั ต่างๆ Google Site
เวบ็ เพจ - สว่ นเน้ือหา 2. เว็บไซต์ Google
- ส่วนท้าย Site
- เมนู 3. ใบกจิ กรรมท่ี 3
ส่วนประกอบใน
หนา้ ต่างของเว็บไซต์
Google Site

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

- สร้างเวบ็ ไซต์จาก
หวั ขอ้ ทน่ี ักเรียน
สนใจ

13- 2. เข้าใจโครงสร้างและ - การแทรก 1. เวบ็ ไซต์ Google 1 3 1 - เว็บไซต์จากGoogle
14 ไวยากรณ์ของโปรแกรม ส่วนประกอบ Site Site ของนกั เรียนแตล่ ะ
เพ่ิมเตมิ คนตามหัวขอ้ ท่ีนักเรียน
ภาษาหรอื กระบวนการ สนใจ
การใช้เครือ่ งมือการสรา้ ง - แทรกปมุ่ (ท่มี ีการแทรก
เว็บเพจ - เลยเ์ อาต์ ส่วนประกอบ)
- สอ่ื เพ่มิ เตมิ

54

- เพ่มิ เตมิ
สว่ นประกอบ
เวบ็ ไซตจ์ ากหวั ข้อที่
นกั เรยี นสนใจ

15- 2. เข้าใจโครงสรา้ งและ - การเพิ่มหนา้ เวบ็ 1. Power Point 1 3 1 - ใบกิจกรรมท่ี 4
16 ไวยากรณ์ของโปรแกรม - โครงสร้างการ Ep.4 Flowchart โครงสร้างเว็บไซต์
ออกแบบเวบ็ ไซต์ เวบ็ ไซต์ - เว็บไซตจ์ ากGoogle
ภาษาหรอื กระบวนการ (Flowchart) 1. เวบ็ ไซต์ Google Site ของนักเรียนแต่ละ
การใชเ้ คร่ืองมือการสรา้ ง Site คนตามหัวข้อที่นกั เรียน
เว็บเพจ 2. ใบกิจกรรมที่ 4 สนใจ
โครงสรา้ งเวบ็ ไซต์ (ทีม่ ีการเพ่ิมหนา้ เวบ็ )

17- 2. เขา้ ใจโครงสรา้ งและ - การตงั้ คา่ เว็บไซต์ 1. เว็บไซต์ Google 1 3 1 - เวบ็ ไซตจ์ ากGoogle
18 ไวยากรณ์ของโปรแกรม - การเผยแพร่ Site Site ของนักเรยี นแต่ละ
- การแชรเ์ วบ็ ไซต์ คนตามหัวข้อทนี่ ักเรียน
ภาษาหรือกระบวนการ - การตง้ั ชื่อท่อี ยู่ สนใจ (เสร็จสมบรู ณ)์
การใชเ้ ครอ่ื งมอื การสรา้ ง เว็บไซต์
เว็บเพจ

19- 3. ออกแบบและกาหนด - เขียนโครงสร้าง 1. Power Point 2 2 1 ใบกิจกรรมที่ 5 โครงสรา้ ง
20 สว่ นประกอบทีจ่ าเปน็ ของ เว็บไซต์ e-
Portfolio ของ Ep.5 การออกแบบ เว็บไซต์ e-Portfolio
เวบ็ เพ็จไดถ้ กู ตอ้ งและ ตัวเอง
เหมาะสม โครงรา่ งเว็บไซต์

2 .ใบกจิ กรรมที่ 5

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

e-Portfolio

รวม 17 6

7

ลงชื่อ.................................................ผสู้ อน ลงช่อื .................................................หัวหน้ากลุ่มสาระ
ลงชื่อ.................................................ฝ่ายวชิ าการ ลงชือ่ .................................................ผู้อานวยการ

55

โรงเรยี นเฉลมิ พระเกียรติสมเดจ็ พระศรีนครนิ ทร์ ภูเกต็

ในพระราชปู ถมั ภ์สมเดจ็ พระเทพรตั นราชสุดาฯ สยามบรมราชกุมารี

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

กาหนดการสอน

ภาคเรียนท่ี 2 ปกี ารศึกษา 2564 ระดับชน้ั มัธยมศึกษาปีที่ 3

ผูส้ อน วุฒิพงศ์ วงศท์ อง รายวิชา การสรา้ งเว็บไซต์ดว้ ย web editor รหัสวิชา ว20285

จานวนคาบเรียน 2 คาบ ( 1.40 ชว่ั โมง ) อัตราสว่ นคะแนน K = 30% P = 50% A = 20%

คาบ ตัวช้วี ัด / สาระการเรยี นรู้ สอ่ื / คะแนน ภาระงาน/ หมาย
ท่ี ผลการเรยี นรู้ นวัตกรรม/ K PA ชน้ิ งาน เหตุ
เอกสารประกอบ
21- ผลการเรยี นร้ทู ่ี 1-3 สอบกลางภาค การสอน 10 - - ตรวจคาตอบ

22 1. เว็บไซต์ Google
Site
23- 3. ออกแบบและ - เรม่ิ ต้นการสร้างเว็บไซตจ์ าก 2. เวบ็ ไซต์ Google 1 3 1 - เว็บไซต์
Drive e-Portfolio
24 กาหนดสว่ นประกอบท่ี โครงสรา้ งเวบ็ ไซต์ e-portfolio ของนักเรียน
(ครงั้ ที่ 1)
จาเป็นของเวบ็ เพจ็ ได้ - การเตรยี มเนอื้ หา, รูปภาพ

ถูกตอ้ งและเหมาะสม - การอนุญาตใหเ้ ข้าถึงขอ้ มลู

25- 3. ออกแบบและ - กาหนดธมี ของเวบ็ ไซต์ e- 1. เวบ็ ไซต์ Google 1 3 1 - แผนผงั

26 กาหนดส่วนประกอบท่ี portfolio Site Storyboard

จาเปน็ ของเวบ็ เพ็จได้ - การใชส้ ใี นเวบ็ ไซต์ 2. Microsoft Word การออกแบบ

ถกู ต้องและเหมาะสม - การเลือกใช้รูปแบบ 3. Power point ส/ี การจัด

ตวั อักษร Ep.6 เรือ่ งการ องค์ประกอบ

เลือกใชส้ ยี ังใงให้

เหมาะสม

27- 4. มที ักษะในการใช้ - เริม่ ตน้ การใช้งาน Canva 1. เวบ็ ไซต์ Canva 1 3 1 - ชน้ิ งานจาก

28 โปรแกรมสาเร็จรูป - กาหนดขนาดของรูปภาพ เวบ็ ไซต์

สาหรับสร้างเว็บเพ็จ - เครอ่ื งมือในการทางาน Canva

- การสรา้ งชน้ิ งานจาก

Canva

29- 4. มีทกั ษะในการใช้ - การตกแตง่ เว็บไซต์ด้วย Canva 1. เว็บไซต์ Canva 1 3 1 - ชิ้นงาน Page

30 โปรแกรมสาเรจ็ รูป - สรา้ ง Page Header e- Header

สาหรบั สร้างเวบ็ เพจ็ portfolio สาหรบั e-

Portfolio

31- 4. มีทกั ษะในการใช้ - การตกแตง่ เว็บไซต์ด้วย Canva 1. เว็บไซต์ Canva 1 3 1 - ชิน้ งาน ปุม่

32 โปรแกรมสาเร็จรปู - สรา้ งปุ่มตา่ ง ๆ ตา่ ง ๆ

สาหรับสรา้ งเว็บเพ็จ สาหรับ

e-Portfolio

56

33- 4. มที ักษะในการใช้ - การออกแบบ Logo e- 1. เวบ็ ไซต์ Canva 1 3 1 - ชิน้ งาน Logo
34 โปรแกรมสาเร็จรูป portfolio สาหรับ
ดว้ ย Canva e-Portfolio
สาหรับสร้างเว็บเพ็จ
รวม 15 18 7

ลงชื่อ.................................................ผู้สอน ลงชื่อ.................................................หัวหนา้ กล่มุ สาระ
ลงชอื่ .................................................ฝ่ายวิชาการ ลงชือ่ .................................................ผูอ้ านวยการ

57

โรงเรียนเฉลมิ พระเกียรตสิ มเด็จพระศรนี ครนิ ทร์ ภเู ก็ต
ในพระราชปู ถัมภส์ มเด็จพระเทพรตั นราชสุดาฯ สยามบรมราชกุมารี

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

กาหนดการสอน
ภาคเรยี นท่ี 2 ปีการศึกษา 2564 ระดบั ช้นั มัธยมศึกษาปที ี่ 3
ผู้สอน วฒุ พิ งศ์ วงศ์ทอง รายวชิ า การสรา้ งเวบ็ ไซตด์ ว้ ย web editor รหสั วิชา ว20285
จานวนคาบเรียน 2 คาบ ( 1.40 ชัว่ โมง ) อัตราส่วนคะแนน K = 30% P = 50% A = 20%

คาบ ตัวชีว้ ัด / สื่อ/ คะแนน ภาระงาน/ หมาย
ท่ี ผลการเรยี นรู้ นวตั กรรม/ K PA ช้ินงาน เหตุ
เอกสาร
35- 4. มที กั ษะในการใชโ้ ปรแกรม สาระการเรยี นรู้ ประกอบ 1 3 1 - เว็บไซต์
36 สาเรจ็ รูป สาหรับสร้างเวบ็ เพ็จ การสอน e-Portfolio ของ
- ตกแตง่ ส่วนขยายเพ่มิ เตมิ ของ 1. เว็บไซต์ นักเรียน (ครั้งที่
37- 5. ปฏบิ ตั งิ านอย่างมคี ณุ ธรรม เวบ็ ไซต์ Google Site ใน Google Site 2)
38 จริยธรรม มคี า่ นิยมท่ีพงึ เวบ็ ไซต์ e-Portfolio 2. เว็บไซต์
Canva 1 3 3 - เว็บไซต์
ประสงค์ - นาเสนอผลงานเว็บไซต์ e- e-Portfolio ของ
นาหลักปรชั ญาเศรษฐกจิ Portfolio นกั เรียน (Final)
พอเพียงและสินค้าตาม
มาตรฐานอตุ สาหกรรม สอบปลายภาค 20 - -
และนามาประยกุ ต์ใชใ้ นการ รวม 22 6 4
พัฒนาโครงสรา้ งได้
39- ผลการเรยี นรทู้ ่ี 1-5
40

ลงช่อื .................................................ผ้สู อน ลงชอ่ื .................................................หวั หนา้ กลมุ่ สาระ
ลงช่ือ.................................................ฝา่ ยวชิ าการ ลงช่ือ.................................................ผ้อู านวยการ

58

โรงเรยี นเฉลมิ พระเกียรตสิ มเด็จพระศรนี ครนิ ทร์ ภเู ก็ต

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

เวลา 20 นาที คะแนนเต็ม 10 คะแนน
คำชีแ้ จง ขอ้ สอบเป็นแบบปรนัย จำนวน 10 ข้อ มีทั้งหมด 2 หนา้
คำสง่ั ใหน้ ักเรียนกากบาท X ข้อที่ถกู ต้องท่สี ุดลงในกระดาษคำตอบเพยี งข้อเดยี ว

1. ถ้าเวบ็ ไซต์เปรียบเสมือนกบั สมุด แลว้ home page จะเปรียบเสมอื นอะไร
ก. หนา้ ปก
ข. คำนำ
ค. สารบัญ
ง. เนอ้ื หา

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

3. บริการของ Google ทน่ี กั เรยี นสามารถใช้สรา้ งเวบ็ ไซต์ได้งา่ ยและฟรี คือเวบ็ ไซต์ใด
ก. Google Doc
ข. Google Form
ค. Google Site
ง. Google Drive

4. เวบ็ ไซต์สามารถเรียกเปิดผ่านโปรแกรมใดได้บ้าง
ก. adobe Photoshop
ข. Google Chrome
ค. Google Sketchup
ง. IDM (Internet Download Manager)

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

6. ภาษาใดท่ีนิยมใช้ในการเขยี นเวบ็
ก. C++

59

ข. html
ค. Java
ง. Python
7. เว็บเบราวเ์ ซอร์ (Web browser) คืออะไร
ก. โปรแกรมคอมพวิ เตอร์ท่ใี ชใ้ นการท่องเว็บ และมีการจดั เกบ็ ขอ้ มูลสารสนเทศตา่ งๆ
ข. โปรแกรมท่จี ดั การข้อมลู ในเครือ่ งคอมพิวเตอร์กับอินเทอรเ์ น็ต
ค. โปรแกรมคอมพิวเตอร์ทใี่ ชใ้ นการสร้างเวบ็ ไซต์ และแก้ไขเวบ็ ไซต์
ง. ท่อี ยูข่ องเวบ็ ไชตต์ ่างๆ
8. ข้อใดถกู ต้องที่สุด
ก. หนา้ บ้าน คือหนา้ ของ Admin เข้าลงทะเบยี น และ หลังบ้าน คอื พืน้ ที่การทำงานของ Admin
ข. หนา้ บ้าน คอื หน้าสำหรบั ไวแ้ กไ้ ข หรอื เพม่ิ เตมิ โดย User กำหนดไว้ และ หลงั บ้าน ไว้สำหรับเผยแพร่

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

Admin
9. เว็บไซต์ประกอบไปดว้ ยก่สี ่วน

ก. 3+1 ส่วนหัว สว่ นเน้อื หา สว่ นท้าย และเมนู
ข. 3+1 ส่วนหน้า สว่ นเน้ือหา ส่วนท้าย และส่วนป่มุ
ค. 2+1 สว่ นบน สว่ นล่าง และส่วนเมนู
ง. 2 +1 ส่วนใน สว่ นนอก และส่วนปุ่ม
10. ข้อใดคอื ขอ้ ดขี อง Google Site
ก. สามารถทำหน้าเว็บเพจได้ฟรี โดยตอ้ งมีบัญชอี ีเมลของ Google
ข. สามารถเผยแพรข่ อ้ มลู ทเี่ ป็นประโยชน์ และเปน็ ความรู้ หรอื บทเรยี นได้
ค. แกไ้ ข เพ่มิ เติม ปรับแตง่ ข้อมูลแบบออนไลน์ได้
ง. ถูกทุกข้อ

60

แบบแสดงผลคาตอบ

แบบทดสอบกอ่ นเรยี น รายวิชาการสรา้ งเว็บไซต์ ดว้ ย Google Site
เรอ่ื ง ทาความรู้จกั เว็บไซต์ นักเรยี นชน้ั มธั ยมศกึ ษาปที ่ี 3 กลมุ่ A

เลขท่ี ชอ่ื - สกุล คะแนนท่ี
ขอ้ ท่ี ข้อที่ ข้อท่ี ขอ้ ท่ี ขอ้ ท่ี ขอ้ ที่ ข้อท่ี ข้อที่ ขอ้ ท่ี ขอ้ ที่ ได้
1 ด.ช. โกวทิ พรดอน 1 2 3 4 5 6 7 8 9 10 (10
2 ด.ช. โกษม มวลวงศ์
3 ด.ช. เตชิต เอยี ดคลองชี คะแนน)
4 ด.ช. ธชั นนท์ บรุ พชนก
5 ด.ช. พงศ์พาณชิ รกั ษาคาม คขคขกกคงกง 6
6 ด.ช. พิรวชิ ญ์ ววิ ัฒนเ์ สรีกุล กขคขขคกงขข 6
7 ด.ช. ภวู ิศ แซว่ อ่ ง คขคขกกกงกข 6
8 ด.ช. สรวิชญ์ วนิ จิ ไพโรจน์ คคคกกขกงขง 5
9 ด.ช. สิทธชิ ัย นาคยตุ ิ คขคขขกกคง ง 5
10 ด.ช. สวุ ิจกั ขณ์ ศรสี ุวรรณ งขคคคกคกกง 4
11 ด.ช. ณฐพล แซ่หลมิ กคคคคกกขกข 4
12 ด.ช. ปุณณเมธ ธรรมมาศยั กขคขงกคงกข 7
13 ด.ช. พลภมู ิ โพธิกุล กขคคคขกขกข 6
14 ด.ช. พัสกร หาญชนะ กขคขขคคขขง 5
15 ด.ช.วัชรากร ฉววี งศ์ประทีป กขคคคงคกกข 4
16 ด.ช.สิรภพ ขีตตะสงั คะ กขคขขคคกขง 5
17 ด.ช. โสภณ มีพอเหน็ คคคคกคคขกข 2
18 ด.ญ. บณั ฑติ า แสงมณี กขคคกขกขกค 6
19 ด.ช. กรณ์ดนัย เศรษฐสระ กกคคคงคขกง 4
20 ด.ช. คณศิ ร เกตแกว้ กขคคกขคขขง 5
21 ด.ช. จีฮาน หวันหมาดเกบ กงงคกงคกกง 3
22 ด.ช. ทรงพล ศรีลิพอนเขต คขคขขขคคกข 5
23 ด.ช. ธนายตุ เอ่ียมสอาด กงคขขคกคงข 4
24 ด.ช. ธวชั ชัย นอ้ ยคำ กคคขขกคขกง 4
25 ด.ช. ธีธชั บรรจงการ ขขคคคงคขกข 2
26 ด.ช. ปวรศิ โกกนทุ าภรณ์ กกคขงงคกกข 5
ขขคคคกคกกง 4
กขคคงขกงกข 7
กงคขขงคงกง 6
คคคขขงกกกข 4

61

27 ด.ช. มนวรรธน์ อดุ มลาภ คขคคคขคกก ง 5
28 ด.ช. ศุภโชค ไชยะ กขคขขขคคกข 6
29 ด.ช. อนวชั ฟักทองผล กขคข ง ง คง คข 6
30 ด.ช. ธรี ภัทร งามลอ่ ง กงคคคขกง ง ง 7

62

แบบแสดงผลคาตอบ

แบบทดสอบหลงั เรยี น รายวชิ าการสรา้ งเว็บไซต์ ดว้ ย Google Site

เรอ่ื ง ทาความรจู้ กั เว็บไซต์ นักเรียนช้ันมธั ยมศกึ ษาปที ่ี 3 กลมุ่ A

เลขท่ี ชอ่ื - สกลุ คะแนนท่ี
ข้อที่ ข้อท่ี ข้อที่ ข้อที่ ขอ้ ท่ี ข้อที่ ขอ้ ที่ ข้อที่ ข้อที่ ข้อท่ี ได้
1 ด.ช. โกวิท พรดอน 1 2 3 4 5 6 7 8 9 10 (10

คะแนน)

กขคขคขกง ง ง 8

2 ด.ช. โกษม มวลวงศ์ กขคขงขกง งค 8

3 ด.ช. เตชติ เอียดคลองชี กขคขงขกงกค 9

4 ด.ช. ธัชนนท์ บรุ พชนก กขคง งขกงกง 9

5 ด.ช. พงศพ์ าณิช รักษาคาม กขคขขขกงกง 9

6 ด.ช. พิรวิชญ์ วิวัฒนเ์ สรกี ลุ ขขคขงขคกกง 8

7 ด.ช. ภวู ิศ แซ่วอ่ ง กขคขงขกงกข 9

8 ด.ช. สรวชิ ญ์ วนิ จิ ไพโรจน์ ก ข ค ข ง ข ก ง ก ง 10

9 ด.ช. สิทธิชยั นาคยตุ ิ กขคขคขกงกค 8

10 ด.ช. สวุ ิจกั ขณ์ ศรสี ุวรรณ ก ข ค ข ง ข ก ง ก ง 10

11 ด.ช. ณฐพล แซห่ ลมิ กขคขงขกงกข 9

12 ด.ช. ปุณณเมธ ธรรมมาศัย กขคขงขกกขง 8

13 ด.ช. พลภูมิ โพธิกุล คขคขกขกงกข 7

14 ด.ช. พัสกร หาญชนะ กขคคงขกงกค 8

15 ด.ช.วชั รากร ฉวีวงศป์ ระทีป กขคขงขคงกง 9

16 ด.ช.สริ ภพ ขตี ตะสังคะ กขคขกขกง ง ง 8

17 ด.ช. โสภณ มพี อเห็น กคคขกขกกกง 7

18 ด.ญ. บณั ฑติ า แสงมณี งขคขงขคงกข 7

19 ด.ช. กรณ์ดนยั เศรษฐสระ กขคขงขกงกข 9

20 ด.ช. คณิศร เกตแก้ว กคคขงขกงกง 9

21 ด.ช. จฮี าน หวันหมาดเกบ งขงขคขกงกค 8

22 ด.ช. ทรงพล ศรีลพิ อนเขต กขคขงขกงกข 9

23 ด.ช. ธนายุต เอีย่ มสอาด ขขคขงขกกกง 8

24 ด.ช. ธวัชชยั น้อยคำ กขคขงขกงกข 9

25 ด.ช. ธธี ชั บรรจงการ กขคขงขคงกง 9

26 ด.ช. ปวริศ โกกนุทาภรณ์ กคคขงขกงกข 8

27 ด.ช. มนวรรธน์ อุดมลาภ กขคกงขคง ง ง 7

63

28 ด.ช. ศภุ โชค ไชยะ กขคขงขกงกข 9
29 ด.ช. อนวชั ฟักทองผล กขคข ง ขก ง ก ง 10
30 ด.ช. ธรี ภัทร งามลอ่ ง กขคข ง ขก ง ก ง 10

64

แบบประเมนิ ความพึงพอใจในการเรียนการสอนโดยใช้บทเรียนผา่ น Google Sites

คำชแ้ี จง

1. แบบประเมนิ ความคิดเหน็ นี้ใหผ้ ูเ้ รยี นประเมินการจัดการเรียนการสอนการเรียนการสอนโดยใช้
บทเรียนผ่าน Google Sites เร่ือง การสัง่ งานแบบวนซำ้

2. กรณุ าทำเครอื่ งหมาย ในแบบประเมนิ และตอบทกุ ข้อ

ขอ้ รายการประเมนิ ระดบั ความพงึ พอใจ
1 ด้านเนอ้ื หา มากที่สดุ มาก ปานกลาง น้อย นอ้ ยที่สุด

1.1เนอ้ื หามีความถูกตอ้ งชัดเจน
1.2เนอ้ื หามีลำดบั ขัน้ ตอน
1.3เนอ้ื หามคี วามทันสมยั
1.4เนื้อหาเหมาะกบั วยั ของผเู้ รียน
1.5เนอ้ื หาพอเหมาะกับเวลาสอน
2 ดา้ นสื่อ
2.1สื่อมคี วามชัดเจนในการนำเสนอเนือ้ หา
2.2ส่ือมีความดงึ ดดู น่าสนใจ
2.3ภาพเสียงและเน้ือหามีความสัมพนั ธก์ ัน
2.4การนำเสนอเนื้อหา มกี ารใชภ้ าพและเสยี งกระตุ้นให้เกดิ การ
เรยี นรู้
2.5สามารถนำไปปรบั ใชใ้ นชีวิตประจำวันได้

ขอ้ เสนอแนะ
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................

65

ผล T-Test จากโปรแกรม SPSS

Notes

Output Created 06-MAR-2022 19:50:47
Comments
Input Active Dataset DataSet1
Filter <none>
Missing Value Handling Weight <none>
Split File <none>
Syntax N of Rows in Working Data
Resources File 30
Definition of Missing
Cases Used User defined missing values
are treated as missing.
Processor Time Statistics for each analysis
Elapsed Time are based on the cases with
no missing or out-of-range
data for any variable in the
analysis.
T-TEST PAIRS=Pretest
WITH Posttest (PAIRED)

/CRITERIA=CI(.9500)
/MISSING=ANALYSIS.

00:00:00.02
00:00:00.01

Paired Samples Statistics

Mean N Std. Deviation Std. Error Mean

Pair 1 Pretest 4.93 30 1.311 .239
Posttest
8.53 30 .900 .164

Paired Samples Correlations

N Correlation Sig.
.009
Pair 1 Pretest & Posttest 30 .470

Paired Samples Test

Paired Differences

95% Confidence Interval

Std. Std. Error of the Difference

Mean Deviation Mean Lower Upper

Pair Pretest - -3.600 1.192 .218 -4.045 -3.155
1 Posttest

66

แบบวดั คณุ ภาพเครือ่ งมอื (IOC)
ผลสมั ฤทธท์ิ างการเรยี น เรอื่ ง ทำความร้จู ักเว็บไซต์

ช้ันมธั ยมศึกษาปีท่ี 3

คำช้แี จง โปรดแสดงความคิดเห็นเก่ยี วกับความสอดคล้อง ทำเคร่อื งหมาย ✓ ลงในชอ่ งระดบั คะแนนประเมิน

โดยใช้เกณฑป์ ระเมนิ ต่อไปนี้

เกณฑ์การให้คะแนนการทำแบบวดั ผลสัมฤทธ์ิ เรอ่ื ง การออกแบบเชงิ วศิ วกรรม

+ 1 คือ แน่ใจว่า ข้อคำถามวดั ได้ตรงตามวัตถุประสงคห์ รือเน้อื หา
0 คือ ไมแ่ น่ใจวา่ ขอ้ ความวัดได้ตามวตั ถุประสงคห์ รือเน้ือหา
- 1 คือ ขอ้ ความวดั ไดไ้ ม่ตรงตามวตั ถุประสงค์หรอื เนือ้ หา

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

และสนิ ค้าตามมาตรฐานอตุ สาหกรรมและนำมาประยุกตใ์ ชใ้ นการพฒั นาโครงสรา้ งได้
คำอธบิ ายรายวชิ า

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

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

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

จึงขอความอนเุ คราะหใ์ นการตรวจและให้ขอ้ เสนอแนะเครอ่ื งมือวิจยั
นายวุฒพิ งศ์ วงศท์ อง (ผู้วจิ ัย)

67

แบบตรวจสอบคุณภาพเครื่องมอื (IOC)
แบบทดสอบก่อน - หลงั เรยี น เรอื่ ง การออกแบบเชิงวิศวกรรม

ชน้ั มธั ยมศกึ ษาปที ่ี 2

คำชี้แจง : ขอให้ผู้เชี่ยวชาญพิจารณาข้อคำถามและคำตอบ เรื่อง การออกแบบเชิงวิศวกรรม โดยทำ

เคร่อื งหมาย ✓ลงในชอ่ งทต่ี รงกับความคิดเห็นของท่านท่าน

ระดับความ ข้อเสนอแนะ

ข้อ คำถาม เฉลย คดิ เหน็

-1 0 1

1 ถา้ เวบ็ ไซต์เปรียบเสมือนกับสมุด แล้ว ตอบ ก. หนา้ ปก

home page จะเปรียบเสมอื นอะไร

ก. หนา้ ปก

ข. คำนำ

ค. สารบญั

ง. เนื้อหา

2 home page หมายถงึ ขอ้ ใด ตอบ ข. เว็บเพจที่เป็น

ก. ทเ่ี กบ็ เว็บเพจ หน้าแรก

ข. เว็บเพจที่เปน็ หนา้ แรก

ค. เอกสารข้อมลู ในแตล่ ะหน้า

ง. โปรแกรมทใี่ ชเ้ รยี กเวบ็ ไซต์

3 บริการของ Google ที่นกั เรยี นสามารถ ตอบ ค. Google Site

ใช้สร้างเว็บไซต์ไดง้ า่ ยและฟรี คือ

เว็บไซต์ใด

ก. Google Doc

ข. Google Form

ค. Google Site

ง. Google Drive ตอบ ข.Google

4 เว็บไซตส์ ามารถเรยี กเปิดผ่านโปรแกรม Chrome

ใดไดบ้ ้าง

ก. adobe Photoshop

ข. Google Chrome

ค. Google Sketchup

68

ระดับความ ข้อเสนอแนะ
เฉลย คิดเหน็
ขอ้ คำถาม
-1 0 1
ง. IDM (Internet Download
Manager) ตอบ ง. หน้าเว็บเพจที่
จัดทำขึ้น เพื่อนำเสนอ
5 ความหมายของเว็บไซต์ คอื อะไรที่ ข้อมูลต่างๆ ผ่านทาง
ถูกต้องทีส่ ุด คอมพิวเตอร์และ
ก. พืน้ ท่บี ริการชนดิ หน่ึงท่ีจัดทำ อินเทอร์เนต็
เน้อื หาข้นึ มา ให้สามารถเขา้ ถงึ
ข้อมูลผ่านอินเตอรเ์ นต็ ตอบ ข. html
ข. สว่ นประกอบที่มอี ย่ใู น
อินเทอร์เนต็ ในการไว้สืบคน้ ตอบ ก. โ ป ร แ ก ร ม
ขอ้ มูล คอมพิวเตอร์ที่ใช้ในการ
ค. พ้นื ทส่ี ำหรับการแชรเ์ รือ่ งราว ท่องเว็บ และมีการ
ตา่ งๆ ผ่านอนิ เทอรเ์ นต็ จดั เก็บข้อมูลสารสนเทศ
ง. หน้าเว็บเพจทจี่ ัดทำข้ึน เพื่อ ต่างๆ
นำเสนอขอ้ มูลตา่ งๆ ผ่านทาง
คอมพวิ เตอร์และอินเทอร์เน็ต

6 ภาษาใดทน่ี ิยมใช้ในการเขยี นเวบ็
ก. C++
ข. html
ค. Java
ง. Python

7 เวบ็ เบราว์เซอร์ (Web browser)
คอื อะไร
ก. โปรแกรมคอมพิวเตอรท์ ใี่ ช้ใน
การทอ่ งเวบ็ และมกี ารจัดเก็บ
ข้อมูลสารสนเทศต่างๆ
ข. โปรแกรมท่ีจัดการข้อมูลใน
เครือ่ งคอมพวิ เตอรก์ ับ
อินเทอรเ์ น็ต

69

ระดบั ความ ข้อเสนอแนะ

ขอ้ คำถาม เฉลย คดิ เห็น

-1 0 1

ค. โปรแกรมคอมพิวเตอรท์ ่ีใช้ใน

การสร้างเวบ็ ไซต์ และแกไ้ ข

เวบ็ ไซต์

ง. ที่อยู่ของเวบ็ ไชต์ตา่ งๆ

8 ข้อใดถูกต้องที่สดุ ตอบ ง.หน้าบ้าน คือ

ก. หน้าบ้าน คือหน้าของ Admin เว็บไซต์ที่ User ทั่วไป

เขา้ ลงทะเบยี น และ หลังบ้าน สามารถเข้ามามองเห็น

คือพนื้ ทก่ี ารทำงานของ Admin ได้ และหลังบ้าน คือ

ข. หน้าบา้ น คอื หนา้ สำหรบั ไว้ พื้นที่การทำงานของ

แกไ้ ข หรือเพ่ิมเตมิ โดย User Admin

กำหนดไว้ และ หลังบ้าน ไว้

สำหรบั เผยแพรเ่ ทา่ นั้น

ค. หนา้ บา้ น คอื พ้นื ท่ีตวั อยา่ งที

Admin ไวด้ ู และหลงั บา้ น คอื

ส่วนแสดงให้ User เขา้ มาใช้

งาน

ง. หนา้ บา้ น คอื เว็บไซตท์ ี่ User

ทั่วไปสามารถเข้ามามองเห็นได้

และหลงั บ้าน คือพนื้ ที่การ

ทำงานของ Admin

9 เวบ็ ไซต์ประกอบไปด้วยก่สี ว่ น ตอบ ก. 3+1 ส่วนหัว

จ. 3+1 ส่วนหวั ส่วนเนอื้ หา ส่วนเนื้อหา ส่วนท้าย

สว่ นท้าย และเมนู และเมนู

ฉ. 3+1 ส่วนหนา้ สว่ นเนอ้ื หา

ส่วนทา้ ย และสว่ นปุม่

ช. 2+1 สว่ นบน ส่วนลา่ ง และ

ส่วนเมนู

ซ. 2 +1 สว่ นใน ส่วนนอก และ

ส่วนปุ่ม

ขอ้ คำถาม เฉลย 70

ระดับความ ขอ้ เสนอแนะ
คดิ เห็น

-1 0 1

10 ขอ้ ใดคอื ขอ้ ดีของ Google Site ตอบ ง. ถกู ทกุ ข้อ

ก. สามารถทำหนา้ เวบ็ เพจได้ฟรี

โดยตอ้ งมบี ัญชอี เี มลของ

Google

ข. สามารถเผยแพรข่ ้อมูลทเ่ี ป็น

ประโยชน์ และเปน็ ความรู้ หรอื

บทเรียนได้

ค. แกไ้ ข เพิม่ เติม ปรบั แตง่ ข้อมูล

แบบออนไลนไ์ ด้

ง. ถูกทกุ ข้อ

ลงช่อื .....................................................
(................................................................)

ผเู้ ชี่ยวชาญ

71

แบบประเมนิ สำหรบั ผเู้ ช่ยี วชาญตรวจสอบคณุ ภาพแบบประเมนิ ความพึงพอใจ

สำหรบั นกั เรยี นชนั้ มธั ยมศึกษาปีท่ี 3
รหสั วิชา ว20285 รายวชิ าการสร้างเวบ็ ไซต์ดว้ ย web editor

****************
คำช้แี จง - แบบประเมนิ ฉบับนใี้ ช้สำหรบั ผเู้ ชี่ยวชาญตรวจสอบวา่ ข้อสอบแต่ละขอ้ มคี วามสอดคลอ้ งกับ

จุดประสงค์เชิงพฤตกิ รรมหรอื ไมโ่ ดยมเี กณฑ์การประเมิน ดังนี้
ให้คะแนน +1 หมายถงึ แนใ่ จวา่ แบบประเมินวัดจุดประสงค์/เนอ้ื หานนั้
ใหค้ ะแนน 0 หมายถึง ไม่แน่ใจว่าแบบประเมนิ ขอ้ สอบวัดจุดประสงค์/เนอ้ื หานน้ั
ให้คะแนน -1 หมายถงึ แนใ่ จวา่ แบบประเมนิ ไม่วดั จุดประสงค/์ เนือ้ หานนั้

- ให้ท่านใส่เคร่อื งหมาย ✓ ในช่องคะแนนประเมิน

รายการประเมิน ความคิดเหน็ ขอ้ เสนอแนะ
+1 0 -1

ดา้ นสือ่

1. สอ่ื มีความดึงดดู นา่ สนใจ ........ …….. ……..

2. การทำกจิ กรรม มกี ารใช้ภาพและเสยี งกระตุ้นใหเ้ กดิ ........ …….. ……..

การเรยี นรู้

3. เกมสามารถใช้งานได้ง่าย ไม่ซับซ้อน …….. …….. ……..

4. สอ่ื ที่ใชใ้ นการจัดการเรียนรโู้ ดยใชเ้ ทคนิคเกมมิฟเิ คชนั่ …….. …….. ……..

มคี วามทนั สมัย

5. สอ่ื มคี วามถูกต้อง และแมน่ ยำในการประมวลผล …….. …….. ……..

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

6. การเรียนรู้โดยใชเ้ ทคนคิ เกมมฟิ เิ คช่ัน เป็นกจิ กรรมการ …….. ……. ……..

เรยี นรูท้ มี่ ีความแปลกใหม่

7. การเรียนรู้โดยใช้เทคนคิ เกมมฟิ ิเคชั่น เหมาะสมกบั …….. …….. ……..

เนื้อหาทเี่ รยี น

8. การเรยี นรู้โดยใช้เทคนคิ เกมมฟิ เิ คชน่ั สร้างความท้า …….. …….. ……..

ทายใหก้ ับนักเรยี น

9. ระยะเวลาที่ใช้ในการจดั การเรยี นรูโ้ ดยให้เทคนิคเกม …….. …….. ……..

มิฟิเคชัน่ มคี วามเหมาะสม

…….. …….. ……..

72

รายการประเมิน ความคดิ เห็น ขอ้ เสนอแนะ
+1 0 -1
10. การเรยี นรโู้ ดยใช้เทคนคิ เกมมฟิ ิเคช่ันทำใหน้ ักเรียนมี
สว่ นร่วมในชน้ั เรียนมากข้ึน …….. …….. ……..
ด้านความรูส้ กึ ตอ่ การเรียนรูโ้ ดยใช้เทคนิคเกมมิฟเิ คช่ัน
11. นกั เรยี นมีความสขุ ทุกครัง้ เมือ่ ไดเ้ รียนวิชาการ …….. …….. ……..
ออกแบบและเทคโนโลยีใช้เทคนิคเกมมฟิ ิเคชัน่
12. นักเรียนสนุกกบั การทำกิจกรรมการเรียนรู้โดยใช้ …….. …….. ……..
…….. …….. ……..
เทคนคิ เกมมิฟิเคชน่ั
13. นักเรยี นชอบการเรียนรู้โดยใชเ้ ทคนิคเกมมฟิ เิ คช่นั …….. …….. ……...
14. นกั เรยี นใหค้ วามสนใจกบั กิจกรรมการเรียนรโู้ ดยใช้
เทคนิคเกมมฟิ ิเคช่ัน
15. นกั เรียนมีความต้องการทจี่ ะเรียนรู้โดยใชเ้ ทคนคิ เกม
มิฟเิ คชน่ั ต่อ

ขอ้ เสนอแนะ
.............................................................................................................................................................
.............................................................................................................................................................
............................................................................................................................................................

……………………………………….
ผู้ประเมิน

73

ประวัตผิ ู้วิจัย

74

ประวตั ิผวู้ จิ ยั

ชอ่ื -สกุล นายวฒุ ิพงศ์ วงศท์ อง
วนั เกิด 25 เมษายน 2541
ภูมลิ ำเนา บ้านเลขท่ี 63/1 หมทู่ ี่ 5 ตำบลนาคา อำเภอสุขสำราญ จงั หวดั ระนอง
รหสั ไปรษณีย์ 85120
ท่ีอยู่ปัจจุบนั บา้ นเลขที่ 11/63 ถนนเจา้ ฟา้ 48 ตำบลฉลอง อำเภอเมอื ง จังหวดั ภูเก็ต
รหัสไปรษณยี ์ 83000
ประวัตกิ ารศึกษา
พ.ศ. 2558 สำเรจ็ การศึกษาระดับมธั ยมศึกษาตอนปลาย
โรงเรยี นสตรรี ะนอง จังหวดั ระนอง
พ.ศ. 2560 ศึกษาอยู่สาขาวิชาคอมพวิ เตอร์ศึกษา คณะครุศาสตร์
มหาวทิ ยาลัยราชภัฏภูเกต็