สัปดาห์ที่  14📝

รายละเอียดหน่วยการเรียน

หน่วยการเรียนรู้ที่ 5 การจัดการหน้าเว็บไซต์      

 แผนการจัดการเรียนรู้ที่ 14 ตกแต่ง Google Sites ด้วย Canva    เวลาเรียน 1 ชั่วโมง

1. ผลการเรียนรู้ที่คาดหวัง

1.  บอกวิธีใช้งานเครื่องมือที่ใช้ในการออกแบบเว็บไซต์ ของ Google Sites ได้อย่างถูกต้อง


2.สาระสำคัญ/ความคิดรวบยอด

         Canva คือ แพลตฟอร์มออกแบบกราฟิก ไม่ว่าจะเป็นชิ้นงานที่ใช้บน Social Media, Presentation,งานสิ่งพิมพ์ รวมไปถึงภาพเคลื่อนไหว อีกทั้ง Canva ยังสามารถช่วยในการตกแต่งเว็บไซต์ บน Google Sites ทำให้เว็บไซต์มีความน่าสนใจมากยิ่งขึ้น

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

1.       อธิบายได้ว่า Canva เกี่ยวข้องอย่างไรกับการสร้างเว็บไซต์ บน Google Sites ได้ (K)

2.       ตกแต่งกราฟิกใน Canva เพื่อนำมาใช้ บน Google Sites ได้ (P)

3.       เห็นความสำคัญของการใช้ Google Sites ในการจัดทำเว็บไซต์  (A)

4. กิจกรรมการเรียนรู้ 

1.       ผู้เรียนทำกิจกรรม ออกแบบหัวเว็บไซต์ ด้วย Canva พร้อมกับเปิด คลิป

วิดีโอ ออกแบบหัวเว็บไซต์ ด้วย Canva เพื่ออธิบายวิธีการทำกิจกรรม ทีละขั้นตอน ดังนี้

1.       ไปที่เว็บไซต์ https://www.canva.com/

2.       จะปรากฏหน้าแรกของเว็บไซต์ Canva ให้พิมพ์คำว่า “Banner Google 

Sites” ในช่องค้นหา

    3. เลือกรูปแบบ Banner ที่ต้องการ และปรับตกแต่งให้เรียบร้อย

    4. ดาวน์โหลดภาพที่ปรับแต่งเรียบร้อยแล้วเป็นไฟล์ภาพ .jpg หรือ .png

    5. ไปที่ Google Sites คลิกเปลี่ยนรูปภาพ เลือกอัปโหลด

    6. เลือกตำแหน่งที่เก็บไฟล์ภาพ และอัปโหลด

    7. ทดสอบการแสดงตัวอย่าง ของเว็บไซต์ เพื่อดูส่วนหัวเมื่อแสดงผลกับอุปกรณ์ต่าง ๆ

          กิจกรรม สร้างปุ่มที่ใช้บนเว็บไซต์ ด้วย Canva พร้อมกับเปิด คลิปวิดีโอสร้าง

ปุ่มที่ใช้บนเว็บไซต์ ด้วย Canva เพื่ออธิบายวิธีการทำกิจกรรม ทีละขั้นตอน ดังนี้

     1.  ไปที่เว็บไซต์ https://www.canva.com/

     2.  จะปรากฏหน้าแรกของเว็บไซต์ Canva ให้พิมพ์คำว่า “button” ในช่องค้นหา

     3.  เลือกรูปแบบปุ่มที่ต้องการ และปรับแต่งให้เรียบร้อย

     4.  ดาวน์โหลดภาพที่ปรับแต่งเรียบร้อยแล้วเป็นไฟล์ภาพ .jpg  .png หรือ .gif

     5.  ไปที่ Google Sites >เมนูแทรก >รูปภาพ>อัปโหลด

     6.  เลือกตำแหน่งที่เก็บไฟล์ภาพ และอัปโหลด                                                 7. ปรับขนาดภาพที่อัปโหลด และคลิกที่ภาพ เลือกแทรกลิงก์ เพื่อแทรกลิงก์ไปยังเว็บไซต์อื่น โดยการวาง URL ของเว็บไซต์นั้น ๆ หรือ เลือกลิงก์ ไปยังหน้าเพจอื่น ๆ ในเว็บไซต์                                                                            

      8. ทดสอบการแสดงตัวอย่าง ของเว็บไซต์ เพื่อดูส่วนหัวเมื่อแสดงผลกับอุปกรณ์ต่าง ๆ