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

โรงเรียนชัยเกษมวิทยา ต.ชัยเกษม อ.บางสะพาน

จ.ประจวบคีรีขันธ์ สพม.ปข.
กลุ่มสาระการเรียนรู้วิทยาศาสตร์และเทคโนโลยี
รหัสวิชา ว 23205 รายวิชา การออกแบบเว็บไซต์ด้วย Google Sites
ชัน
้ มัธยมศึกษาปี ที่ 3
หน่วยการเรียนรู้ที่ 2 เรื่อง หลักการออกแบบเว็บไซต์
เวลา 6 ชั่วโมง
แผนการจัดการเรียนรู้ที่ 3 เรื่อง องค์ประกอบในการออกแบบเว็บไซต์
เวลาเรียน 2 ชั่วโมง
ใช้สอนวันที่ 29 เดือนพฤษภาคม พ.ศ. 2566

1 สาระสำคัญ/ความคิดรวบยอด
การออกแบบโครงสร้างเว็บไซต์ คือ การวางแผนการจัดลำดับ เนื้อหา
สาระของเว็บไซต์ ออกเป็ นหมวดหมู่ เพื่อจัดทำเป็ นโครงสร้างในการจัดวาง
หน้าเว็บเพจทัง้ หมด
รูปแบบโครงสร้างเว็บไซต์ ประกอบด้วย
1. โครงสร้างเว็บแบบเส้นตรง (Linear Structure)
2. โครงสร้างเว็บแบบต้นไม้ (Hierarchical Structure)
3. โครงสร้างเว็บแบบเชื่อมโยงอิสระ (Web Linked Structure)
4. โครงสร้างเว็บแบบผสม (Hybrid Structure)

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

3. จุดประสงค์การเรียนรู้
1. อธิบายรูปแบบโครงสร้างเว็บไซต์แต่ละแบบ ได้ (K)
2. ออกแบบโครงสร้างเว็บไซต์ที่เหมาะสมกับการใช้งานของกลุ่มเป้ า
หมาย ได้ (P)
3. เห็นความสำคัญของการออกแบบโครงสร้างเว็บไซต์ (A)

4. สาระการเรียนรู้
1. การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)
2. รูปแบบโครงสร้างของเว็บไซต์
3. ขัน
้ ตอนการออกแบบโครงสร้างเว็บไซต์
4. SEO (Search Engine Optimization)

5. ทักษะจำเป็ นในศตวรรษที่ 21
 ทักษะการคิดอย่างมีวิจารณญาณ และทักษะในการแก้ปัญหา
 ทักษะด้านการสร้างสรรค์ และนวัตกรรม
 ทักษะด้านความร่วมมือ การทำงานเป็ นทีม และภาวะผู้นำ
 ทักษะด้านการสื่อสารสนเทศ และรู้เท่าทันสื่อ

6. คุณลักษณะอันพึงประสงค์
1. มีวินัย
2. ใฝ่ เรียนรู้
3. มุ่งมั่นในการทำงาน
7. ภาระงาน
1. ใบงานที่ 4 รูปแบบโครงของสร้างเว็บไซต์
2. กิจกรรม ออกแบบโครงสร้างเว็บไซต์

8. การจัดกิจกรรมการเรียนรู้
1. วิธีการสอนแบบสร้างสรรค์เป็ นฐาน (Creativity-Based Learning :
CBL)
2. วิธีการสอนแบบแลกเปลี่ยนความคิด (Think – Pair – Share)

ชั่วโมงที่ 1

ขัน
้ นำเข้าสู่บท

1. ผู้สอนเปิ ดคลิปวิดีโอ เรื่อง รู้จักกับ SEO ภายใน 5 นาที !!

จากลิงค์ https://www.youtube.com/watch?v=U7O6fxLB9pY
เพื่อกระตุ้นความสนใจของผู้เรียน
2. ผู้สอนผู้สอนอธิบายว่า SEO หรือ Search Engine Optimization คือ
กระบวนทางการตลาดดิจิทัลที่ทำให้เว็บไซต์ของเราติดหน้าแรกในการ
ค้นหาบนหน้า Google ยิ่งเว็บไซต์อยู่สูงเท่าไหร่ ยิ่งมีโอกาสให้คนมอง
เห็น ถูกคลิก และอาจจะได้ยอดขาย และ กำไรในท้ายที่สุด
 ขัน
้ สอน

3. ผู้สอนอธิบายว่า การออกแบบโครงสร้างเว็บไซต์ คือ การวางแผน

การจัดลำดับ เนื้อหาสาระของเว็บไซต์ ออกเป็ นหมวดหมู่ เพื่อจัดทำ
เป็ นโครงสร้างในการจัดวางหน้าเว็บเพจทัง้ หมด เปรียบเสมือนแผนที่
ที่ทำให้เห็นโครงสร้างทัง้ หมดของเว็บไซต์ การจัดโครงสร้างของ
เว็บไซต์ มีจุดมุ่งหมายสำคัญ คือ การที่จะทำให้
ผู้เข้าเยี่ยมชม สามารถค้นหาข้อมูลในเว็บเพจได้อย่างเป็ นระบบ โดย
โครงสร้างเว็บไซต์ จะแสดงข้อมูล
2 เรื่อง ดังนี ้
1. เรื่องอะไร บอกว่า แต่ละเว็บเพจ เสนอ เนื้อหา หัวข้อ หรือ
ประเด็นอะไร
2. เชื่อมโยงอย่างไร แสดงว่า แต่ละเว็บเพจมีการเชื่อมโยง (Link)
อย่างไร เพื่อให้เห็นภาพว่า เมื่อผู้ชมเว็บไซต์ดูข้อมูลอยู่ที่เว็บเพจ
หนึ่ง แล้วจะเดินทางไปดูเว็บเพจอื่นอะไรได้บ้าง
4. ผู้สอนแจกใบความรู้ที่ 2 เรื่อง รูปแบบโครงสร้างเว็บไซต์ พร้อมกับ
เปิ ด Slide สื่อการสอน เรื่อง รูปแบบโครงสร้างเว็บไซต์ พร้อม
อธิบายว่า รูปแบบโครงสร้างเว็บไซต์ แบ่งออกเป็ น 4 รูปแบบ ดังนี ้
1. โครงสร้างเว็บแบบเส้นตรง (Linear Structure)
2. โครงสร้างเว็บแบบต้นไม้ (Hierarchical Structure)

3. โครงสร้างเว็บแบบเชื่อมโยงอิสระ (Web Linked

Structure)

4. โครงสร้างเว็บแบบผสม (Hybrid Structure)

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

ขัน
้ สอน

1. ผู้สอนแจกใบความรู้ที่ 3 เรื่อง ขัน

้ ตอนการออกแบบโครงสร้าง
เว็บไซต์ พร้อมอธิบายว่า ขัน
้ ตอนออกแบบโครงสร้างเว็บไซต์เบื้องต้น
ประกอบด้วย 3 ขัน
้ ตอนหลัก ดังนี ้
1. ระบุเป้ าหมาย อะไรคือสิ่งที่ต้องการจากการทำเว็บไซต์ เช่น การ
ขายสินค้า/บริการ การสื่อสาร “บางสิ่ง” แก่กลุ่มเป้ าหมาย การเล่า
เรื่องราว/ประสบการณ์ (blog) เป้ าหมายจะช่วยให้ระบุ “หัวข้อ/ประเ
ด็น” เนื้อหาเว็บไซต์ได้ถก
ู ต้อง รู้ “ขอบเขตข้อมูลที่ต้องค้นหา” เช่น
สินค้าอะไร จุดเด่นจุดด้อยอย่างไร เรื่องราวแบบไหนที่ต้องการเล่า
โดยไม่หลงทางไปกับสิ่งซึ่งไม่สอดคล้องกับเป้ าหมายที่ตงั ้ ไว้
2. รู้จักผู้เข้าเว็บไซต์ โดยข้อมูลพื้นฐานที่เราต้องทราบ คือ
 ผู้เข้าชมหรือกลุ่มเป้ าหมายคือใคร
 ปั ญหาหรือความต้องการของพวกเขาคืออะไร
 ทำไมเขาถึงต้องการสินค้าหรือข้อมูลบางอย่างจากเว็บไซต์เรา
  สินค้าหรือบริการอื่นที่พวกเขาใช้อยู่ มีอะไรบ้าง
ข้อมูลทัง้ หมดข้างต้น จะทำให้เรากำหนด “รายละเอียดเนื้อหา”
ของแต่ละเว็บเพจได้อย่างเหมาะสม
และสอดคล้องกับกลุ่มเป้ าหมาย
3. เชื่อมโยงเว็บเพจ การร่างแผนผังการเชื่อมโยงแต่ละเว็บเพจ หรือที่
เรียกว่า Internal link
แผนผังการเชื่อมโยง จะทำให้เห็นภาพว่า ผู้เข้าชมเว็บไซต์จะเดินทาง
ไปดูข้อมูลภายในเว็บไซต์ได้อย่างไร เข้าถึงข้อมูลที่ต้องการได้รวดเร็ว
หรือไม่ โดยหลักการออกแบบ Internal link เบื้องต้น มีดังนี ้
 เข้าถึงง่าย จากหน้าแรกของเว็บไซต์ (Homepage) ให้เชื่อมโยง
ตรงไปยังเว็บเพจสำคัญ
โดยผ่านเว็บเพจอื่นๆให้น้อยที่สุด เพราะจากสถิติ Homepage
มักเป็ นหนึ่งในหน้าที่มีปริมาณ
คนเข้าชมมากที่สุด การเชื่อมโยงตรงจาก Homepage จึงทำให้
ผู้ชมเว็บไซต์ส่วนใหญ่เข้าถึง
เพจสำคัญได้อย่างรวดเร็ว

 จัดกลุ่มเนื้อหา ควรแบ่งกลุ่มเนื้อหาเป็ นหมวดหมู่ แล้วเชื่อมโยง

เนื้อหาในหมวดหมู่เดียวกัน
 เข้าด้วยกัน หรือที่เรียกว่า การจัดทำ “Category” ซึง่ จะช่วยให้
ผู้เข้าเว็บไซต์ทราบว่า เว็บไซต์
มีเนื้อหาอะไรและเข้าถึงข้อมูลในหมวดหมู่นน
ั ้ ได้ง่าย
2. ผู้สอนให้ผู้เรียนแบ่งกลุ่ม กลุ่มละ 3 คน เพื่อทำกิจกรรม ออกแบบ
โครงสร้างเว็บไซต์ พร้อมอธิบายวิธีการทำกิจกรรม คือ ให้เวลาผู้เรียน
ออกแบบโครงสร้างเว็บไซต์ เกี่ยวกับเรื่องที่นักเรียนสนใจ
3. เมื่อครบกำหนดเวลา ผู้สอนให้ผู้เรียนแต่ละกลุ่มออกมานำเสนอผลงาน
โดยให้ผู้เรียนกลุ่มอื่น ๆ รวมทัง้ ผู้สอน ร่วมกันเสนอแนะ แสดงความ
คิดเห็น
4. ผู้สอนอธิบายเพิ่มเติมว่า โครงสร้างเว็บไซต์ที่ดี จะทำให้ผู้เข้าเว็บไซต์
หาข้อมูลที่ต้องการได้อย่างครบถ้วน สะดวกรวดเร็ว ช่วยให้เห็นภาพว่า
ผู้ชมเว็บไซต์จะเดินทางไปเว็บเพจต่าง ๆ อย่างไร จึงจินตนาการได้ว่า
ผู้เข้าชมเว็บไซต์จะได้ข้อมูลที่ต้องการอย่างสะดวกหรือไม่ และยังทำให้
ทราบว่าแต่ละเว็บเพจมีหัวข้อหลัก หัวข้อย่อยอะไร จึงจัดกลุ่มเนื้อหา
ได้อย่างถูกต้อง
นอกจากนี ้ โครงสร้างเว็บไซต์ คือ สิง่ ที่ผลต่อผลลัพธ์การทำ
SEO เพราะ กระบวนการทำงาน
ของ Search Engine ขัน
้ ตอนแรก คือ การที่ Bot หรือ โปรแกรม
เก็บข้อมูล จะเข้ามา Crawl เว็บไซต์
เพื่อสำรวจว่าเว็บไซต์เกี่ยวกับอะไร มีอะไรบ้าง โดยโครงสร้างเว็บไซต์
ก็ทำหน้าที่เหมือนไกด์นำทาง
ให้ Bot เข้าไปชมสิ่งต่างๆ ภายในเว็บไซต์ หากมีโครงสร้างเว็บไซต์ที่ดี
Bot เดินสำรวจได้สะดวก
 เก็บข้อมูลง่าย ก็มีแนวโน้มที่จะได้รับอับดับดี ๆ เพราะ Search
Engine จะเข้าใจง่ายว่า เว็บไซต์เกี่ยวข้องกับเรื่องอะไร

ขัน
้ สรุป

5. ผู้สอนและผูเ้ รียนร่วมกันสรุปว่า การออกแบบโครงสร้างเว็บไซต์ที่มี

ประสิทธิภาพ จะช่วยส่งผลต่อการทำ SEO ช่วยให้ เว็บไซต์ของเราติด
หน้าแรกในการค้นหาบนหน้า Google ซึ่ง รูปแบบโครงสร้างเว็บไซต์
แบ่งออกเป็ น 4 รูปแบบ ประกอบด้วย
1. โครงสร้างเว็บแบบเส้นตรง (Linear Structure)
2. โครงสร้างเว็บแบบต้นไม้ (Hierarchical Structure)
3. โครงสร้างเว็บแบบเชื่อมโยงอิสระ (Web Linked Structure)
4. โครงสร้างเว็บแบบผสม (Hybrid Structure)
6. ผู้สอนเปิ ดโอกาสให้ผู้เรียนสอบถามเพิ่มเติม

9. สื่อการเรียนรู้
1. คลิปวิดีโอ เรื่อง รู้จักกับ SEO ภายใน 5 นาที !!
2. ใบความรู้ที่ 2 เรื่อง รูปแบบโครงสร้างเว็บไซต์
3. Slide สื่อการสอน เรื่อง รูปแบบโครงสร้างเว็บไซต์
4. ใบงานที่ 4 รูปแบบโครงสร้างของเว็บไซต์
5. ใบความรู้ที่ 3 เรื่อง ขัน
้ ตอนการออกแบบโครงสร้างเว็บไซต์
 6. กิจกรรม ออกแบบโครงสร้างเว็บไซต์

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

วิธีการ เครื่องมือ เกณฑ์

ตรวจใบงานที่ 4 รูป คุณภาพอยู่ใน

แบบโครงสร้างของ แบบประเมินผลงาน ระดับ ดี
เว็บไซต์ ผ่านเกณฑ์

ตรวจผลงานจาก
คุณภาพอยู่ใน
การทำกิจกรรม
แบบประเมินผลงาน ระดับ ดี
ออกแบบโครงสร้าง
ผ่านเกณฑ์
เว็บไซต์

ประเมินพฤติกรรม
กลุ่ม คุณภาพอยู่ใน
แบบประเมิน
จากการทำกิจกรรม ระดับ ดี
พฤติกรรมกลุ่ม
ออกแบบโครงสร้าง ผ่านเกณฑ์
เว็บไซต์

แบบบันทึกหลังแผนการสอน

คอมพิวเตอร์เพิ่มเติม การออกแบบเว็บไซต์ให้น่าสนใจด้วย Google

Sites ชัน
้ มัธยมศึกษาปี ที่ 1
หน่วยการเรียนรู้ที่ 2 หลักการออกแบบเว็บไซต์
จำนวน 6 ชั่วโมง
แผนการจัดการเรียนรู้ที่ 4 รูปแบบโครงสร้างของเว็บไซต์
เวลาเรียน 2 ชั่วโมง

ผลการเรียนรู้
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
…………………………………………………………
ปั ญหาอุปสรรค
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
…………………………………………………………
ข้อเสนอแนะแนวทางแก้ไข
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
…………………………………………………………

ลงชื่อ…………………….…………….ผู้สอน
(…………………………………)

ตำแหน่ง………………………………………

………………/…………....../……………
ความคิดเห็นของผู้บริหารสถานศึกษา
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……

ลงชื่อ…………………………….ผู้บริหารสถานศึกษา
(…………………..
…………………………)

ตำแหน่ง………………………………………

………………/…………....../……………