การพัฒนานวัตกรรมเพื่อกิจกรรมการเรียนรู้ด้วย Google Sites

¡Òþ²Ñ ¹Ò¹ÇµÑ ¡ÃÃÁà¾èÍ× ¡Ô¨¡ÃÃÁ¡ÒÃàÃÕ¹ôéÙ éÇÂ

 

´Ã.͹ÈØ Ã Ë§É¢ì ع·´

สารบญั 1
กิจกรรมท่ี 1 การเขา ใชงาน GOOGLE SITES 3
5
ใบความรูท่ี 1 หนา ตางการทำงานของ GOOGLE SITES 7
กิจกรรมที่ 2 การสรางเวบ็ ไซตใหม 9

ใบความรูที่ 2 หนาตางการทำงานของเวบ็ ไซต 9
กจิ กรรมที่ 3 การใชเ ครอ่ื งมือแทรกในการทำงาน
15
ใบความรูท่ี 3 ชองขอความ สำหรับใสขอ ความ 16
18
ใบความรทู ี่ 5 การใชเ มนฝู ง เพือ่ ฝง CODE HTML 21
ใบความรทู ่ี 6 การแทรกจากไดรฟ 22
กจิ กรรมที่ 4 การใชเครอ่ื งมือการออกแบบ 24
ใบความรูที่ 7 การแทรกสารบัญ
ใบความรทู ่ี 8 การแทรกภาพหมนุ
ใบความรูที่ 9 การแทรกปุม

1
กิจกรรมที่ 1 การเขาใชงาน Google Sites

ขั้นตอนท่ี 1 การลงชื่อเขา ใชงาน Google
ในการใชงานเครอื่ งมือตาง ๆ จาก Google ผูใชจำเปนจะตองลงทะเบยี นเพือ่ เขาใชง านโดยสาม
สามารถเขาไดจ ากเวบ็ บราวเซอร (แนะนำใหใ ช Google Chrome)

ทำการลงช่อื เขา ใชข องตนเองตามตอ งการ

กรอกรหัสผาน แลว คลก๊ิ เมาสท่ี ปุมถัดไป

การพฒั นานวตั กรรมเพอ่ื กจิ กรรมการเรยี นรูดว ย Google Sites โดย ดร.อนุศร หงษข ุนทด
www.krukob.com

สถานะของเว็บบราวเซอร Google Chrome ที่ลงชอ่ื เขาใช และสถานะพรอมใชงานแลว (สงั เกตทุ ม่ี ุม
บนดา นขวามือของหนาจอ)

ข้นั ตอนที่ 2 การเรยี กใชง าน Google Site
1. คลก๊ิ เมาสท ี่ แอป Google
2. คล๊กิ เมาสท ่ี Google Sites
เว็บบราวเซอรจะทำการแสดงหนา ตา งการทำงานของ Google Sites หากแสดงหนา ตา ง

แบบดั้งเดิม (Classic) ใหค ลิ๊กเมาสที่ Google Sites ใหม

3

ใบความรทู ี่ 1 หนา ตางการทำงานของ Google Sites

1. เมนหู ลัก ประกอบไปดวย
1.1 Sites หมายถึง แหลงรวมเว็บไซตตา ง ๆ ทผ่ี ูใชไดสรา งไวแ ลว
1.2 Sites คลาสสิก หมายถึง การกลับไปท่ีการสรา งเว็บไซตแ บบ
ดัง้ เดมิ ของ Google
1.3 เอกสาร หมายถงึ เมนูสำหรบั การสรางงานจาก Google Doc
1.4 ชตี หมายถงึ เมนูสำหรับการสรางงานจาก Google Sheet
1.5 สไลด หมายถึง เมนสู ำหรับการสรางการนำเสนองานจาก
Google Slide
1.6 ฟอรม หมายถงึ เมนสู ำหรับการสรา งการนำเสนองานจาก
Google Forms
1.7 ไดรฟ หมายถึง เมนูสำหรับการเปด เขาใชง าน Google Drive

2. แสดงเวบ็ ไซตทีส่ รา ง หรอื ทำการแกไขลาสดุ โดยจะแบงโหมดในการแสดง 3 โหมด คือ

การพัฒนานวัตกรรมเพ่ือกจิ กรรมการเรยี นรูดวย Google Sites โดย ดร.อนุศร หงษขุนทด
www.krukob.com

2.1 แสดงเว็บไซตข องทุกคน
2.2 แสดงเวบ็ ไซตข องฉัน
2.3 แสดงเว็บไซตฉ นั ไมไดเปนเจา ของ
3. มุมมองแสดงรายการ แบงออกเปน 3 แบบคือ
3.1 มุมมองรายการ เม่อื ใชป ุมน้ี เวบ็ ไซตจ ะแสดงแบบรายการเปน บลอ็ ก

3.2 มมุ มองตาราง เมือ่ ใชป ุม นี้ เวบ็ ไซตจ ะแสดงแบบรายการเปนแถวแบบตาราง

3.3 ตัวเลือกแบบจดั เรียง แบง ออกเปน 4 ประเภทคือ
1) เปด ลา สดุ โดยฉนั
2) แกไขลาสดุ โดยฉนั
3) แกไขลาสดุ
4) ชอ่ื

5

4. เปด ตวั เลือกไฟล ใชส ำหรบั เปดเพื่อคนหาเว็บไซตจาก Google Drive

5. สรางเวบ็ ไซตใหม ใชสำหรบั สรา งเวบ็ ไซต

6. กลบั ไปท่ี Sites แบบคลาสสิก ใชใ นกรณที ่ีตองการกลับไปใช แบบ
ด้ังเดิม

กจิ กรรมท่ี 2 การสรางเว็บไซตใหม

ข้นั ท่ี 1 คลกิ๊ เมาสที่ปุมสรางเวบ็ ไซตใ หม
จะปรากฏหนา ตา งการทำงานเวบ็ ไซตห นาใหมใหทำการตั้งคา ของเวบ็ ไซตดังนี้

1. ตงั้ ชอ่ื ของเว็บไซต
2. ต้งั ชอื่ หวั ขอของหนา เวบ็ ไซต
3. เลอื กธมี ตามตองการ

การพฒั นานวัตกรรมเพอ่ื กิจกรรมการเรยี นรูด ว ย Google Sites โดย ดร.อนศุ ร หงษขุนทด
www.krukob.com

ข้ันที่ 2 ต้ังคา ประเภทสวนหัว
เลื่อนเมาสม าท่สี ว นหัวของหนาเว็บไซตจะปรากฏเมนใู หเ ลือก

คล๊กิ เมาสท ่ี ประเภทสว นหัว

จะปรากฏรายการใหเ ลอื ก 4 เลอื กประเภทสวนหัวตาม
ตอ งการ

หากตองการเปลี่ยนภาพพื้นหลงั ใหเลอื กท่ี เปล่ียนรปู ภาพ
สามารถเลือกได 2 รปู แบบคือ
1. อบั โหลดรปู ภาพจากเครื่องคอมพิวเตอรของ
ตนเอง
2. เลือกรูปภาพท่ีมีอยูจ ากเว็บไซต

7
ใบความรทู ี่ 2 หนา ตางการทำงานของเว็บไซต
เม่ือคล๊ิกเมาสท ป่ี ุมสรา งเวบ็ ไซตใ หมแลวจะปรากฎหนา ตางการทำงานของเวบ็ ไซตใหมสามารถอธิบาย
ไดดังน้ี

1. ชอ่ื ของเวบ็ ไซต สามารถตง้ั ชอื่ ไดต ามตอ งการ
2. ชอ่ื ของหนา หมายถงึ การตง้ั ชื่อของหนา เว็บไซตในแตละหนา (เมื่อมีการสรา งหนาใหมกจ็ ะตองมี
การตงั้ ช่อื ในทกุ คร้งั )
3. แถบเครื่องมือในการทำงาน ประกอบดวยหลายเคร่ืองมือ ดังนี้

3.1 ยกเลิกการทำงานลา สุด
3.2 ทำงานลาสดุ ซ้ำ
3.3 แสดงตัวอยา ง ประกอบไปดว ย 3 มมุ มองคือ

1) แสดงแบบหนาจอของสมารทโฟน
2)แสดงแบบหนาจอของแท็บเลต็
3) แสดงแบบหนาจอของหนาจอคอมพวิ เตอร
3.4 แชรกับผอู น่ื สำหรบั ใชเพ่อื กำหนดสทิ ธิ์เพิ่มผูคนใหสามารถเขามารว มแกไขเวบ็ ไซตไ ด
4. พื้นทีใ่ นการทำงาน
5. เคร่ืองมือการทำงาน แบงออกเปน 3 กลมุ ใหญ คือ

การพฒั นานวัตกรรมเพื่อกิจกรรมการเรยี นรูดวย Google Sites โดย ดร.อนุศร หงษข นุ ทด
www.krukob.com

5.1 แทรก ประกอบไปดวยเครอ่ื งมือหลกั ดังน้ี
1) ชอ งขอความ สำหรับใสขอ ความ
2) รปู ภาพ สำหรับใสรปู ภาพ
3) ฝง สำหรับการฝง โคด HTML
4) จากไดรฟ สำหรบั การขอ มูลตาง ๆ จาก Google Drive
5) กลุมการออกแบบ
6) เครอื่ งมืออ่ืน ๆ

5.2 หนา เว็บ สำหรบั แสดงขอ มูลของหนา เวบ็ ไซตท่ีไดถสู รางขนึ้
ตามลำดับ

5.3 หนาธีม สำหรบั การปรบั แกร ปู แบบตาง ๆ ของเว็บไซต

9

กิจกรรมที่ 3 การใชเ ครอื่ งมือแทรกในการทำงาน

เคร่ืองมือ “แทรก” ประกอบไปดว ยเคร่อื งมือหลกั 4 เครื่องมอื คือ

5.1 แทรก ประกอบไปดว ยเคร่ืองมือหลักดังนี้
1) ชอ งขอความ สำหรบั ใสขอความ
2) รปู ภาพ สำหรับใสร ปู ภาพ

3) ฝง สำหรบั การฝงโคด HTML

4) จากไดรฟ สำหรบั การขอ มูลตาง ๆ จาก Google Drive
ใบความรูท่ี 3 ชองขอความ สำหรบั ใสขอความ
ชอ งขอความ คือ เครื่องมือสำหรบั การบนั ทึกขอ ความประเภทตัวอักษรตา ง ๆ เชน เนอ้ื หาตาง ๆ หรอื
บทความ โดยสามารถแทรกขอความไดด ังน้ี
ขนั้ ตอนที่ 1 การแทรกขอ ความ

1. คลิกเมาสท ี่ ชองขอความ
2. พมิ พขอความตามตอ งการในชองสเี่ หลี่ยมของพื้นทก่ี ารทำงาน

การพัฒนานวัตกรรมเพ่อื กจิ กรรมการเรยี นรูดวย Google Sites โดย ดร.อนศุ ร หงษขุนทด
www.krukob.com

ขน้ั ตอนที่ 2 การตั้งคา ชอ งขอความ
ในการต้งั คาของชอ งขอ ความจะประกอบไปดวยเคร่ืองมือ 9 เครอ่ื งมอื ดงั นี้

1. ขอความปกติประกอบไปดวยรปู แบบของขอความ 5 รูปแบบ ดังนี้
1.1 ขอ ความปกติ หมายถึง ขอความที่เปนปกติทว่ั ไป
1.2 ชอื่ เรอ่ื ง หมายถงึ ขอความทเี่ ปนชือ่ เร่ือง
1.3 สวนหัว หมายถึง ขอ ความที่เปนสวนหัวเรื่อง
1.4 หัวขอยอย หมายถงึ ขอความท่ีเปน หวั ขอยอย
1.5 เล็ก หมายถึง ขอความท่ีตองการใหตวั เลก็ กวา ปกติ

2. ตัวหนา หมายถึง ขอความทตี่ องการใหมคี วามหนากวาตวั อกั ษรปกติ
3 . ตวั เอียง หมายถงึ ขอความที่ตองการใหม ีความเอียงกวา ตวั อักษรปกติ
4. การจดั เรียงเอกสารประกอบดวยรปู แบบของขอความ 4 รูปแบบคอื

4.1 ขอ ความชิดขอบซาย
4.2 ขอ ความจัดอยูก่ึงกลาง
4.3 ขอ ความชิดขอบขวา
4.4 จดั การขยายขอความกระจายระยะใหเทากนั
5. รายการทีเ่ รียงลำดับเลข หมายถงึ การเพ่ิมลำดบั ขอความบรรทดั เปนตวั เลขอัตโนมตั ิ
6. รายการสญั ลักษณห ัวขอยอย หมายถึงการเพม่ิ ลำดบั ขอ ความบรรทัดเปนหัวขอยอย
7. แทรกลงิ ค หมายถงึ การแทรกลิงค ท่ีอยขู องเวบ็ ไซต (URL) กับขอ ความท่ตี องการ
8. ลบไทล หมายถงึ การลบ ชองขอความ ท้ังหมด

9. ตัวเลอื กการแกไขเพ่ิมเติม ประกอบไปดว ย 3 เครื่องมือหลัก ดงั น้ี
9.1 สำหรบั ใส Code HTML
9.2 สำหรบั ใช ขีดทบั ตัวอักษร

11

9.3 สำหรับใชล า งการจัดรปู แบบทั้งหมดของขอความ
ขั้นตอนที่ 3 เครือ่ งมือเพ่มิ เติม
ในทุกเลเยอรข องการทำงานจะมเี ครื่องมือปรากฏทางดา นขวามอื 4 เครื่องมือ ดังนี้

1. เครอ่ื งมือพื้นหลังของสวน หมายถึง การเพม่ิ พน้ื หลัง (สหี รือรูปภาพ) ใหกับชองขอความ
ประกอบไปดว ย 4 รูปแบบดังน้ี

1.1 หมายถงึ ไมมพี ้ืนหลัง (สีหรอื รปู ภาพ) ใหกับชองขอ ความ

1.2 หมายถึง การเพิม่ พ้ืนหลัง (สีหรอื รูปภาพ) ใหกับชองขอความ

1.3 หมายถึงการเพ่ิมพืน้ หลงั (สีหรือรปู ภาพ) ใหกับชอ งขอ ความ

1.4 หมายถงึ การเพ่มิ พนื้ หลงั (สีหรือรปู ภาพ) ใหกับชอ งขอความ แบง ออกเปน 2

รปู แบบ ดงั นี้

1) อัปโหลด หมายถึง การอบั โหลดภาพท่ีมีอยแู ลว จากในเคร่อื งคอมพวิ เตอร

2) เลอื กรปู ภาพ หมายถงึ การเลือกภาพจากแกลเลอร่ี หรอื จากแหลงรปู ภาพทมี่ ีอยู

บนอนิ เทอรเน็ต

การพัฒนานวตั กรรมเพ่ือกิจกรรมการเรยี นรดู วย Google Sites โดย ดร.อนุศร หงษข ุนทด
www.krukob.com

2. เครอื่ งมอื ทำสำเนาสว น หมายถึง การคดั ลอก ชองขอความ ทง้ั หมด เพ่ือทำซ้ำอีก 1 ชอ ง
ขอความ

3. เคร่อื งมือลบสวน หมายถึง การลบ ชอ งขอ ความ ท้งั หมด

ใบความรทู ่ี 4 เครื่องมือรปู ภาพ สำหรับใสรปู ภาพ
เครอ่ื งมือรูปภาพใชส ำหรับแทรกเพ่ือใสรปู ภาพตา ง ๆ ตามตองการจากแหลง ท่ีมา 2 แหลง

ดังนี้
1. คลกิ๊ เมาสที่ แทรก
2. คล๊กิ เมาสที่ รปู ภาพ
3. คลกิ๊ เมาสเพ่ือเลอื กแหลง ที่มา 2 แหลง ดังนี้

3.1 อบั โหลด หมายถงึ ทำการเลือกรปู ภาพจาก
แหลง ท่มี าในเครื่องคอมพวิ เตอร
3.2 เลอื ก หมายถึง ทำการเลือกรปู ภาพจากแหลง ท่ีมาจาก
อินเทอรเ น็ต หรอื Google Drive
วิธกี ารแทรกรปู ภาพจากเมนู เลือก
วิธกี ารแทรกรปู ภาพจากเมนู เลือก สามารถแทรกรปู ภาพไดจาก 4 แบบ ดงั นี้
แบบที่ 1 ตาม URL คือ วิธีการแทรกรูปภาพจากอินเทอรเ นต็ ทีม่ กี ารเผยแพรอยกู อนแลว โดย
สามารถคา นหาไดจาก Google.com หรอื เว็บไซตอ ่นื ๆ ไดต ามตอ งการ โดยมีข้ันตอนดังนี้
1. เปด Google.com หรอื เวบ็ ไซตอ ื่น ๆ คนหารูปภาพตามตอ งการ เม่ือคน พบรปู ภาพทต่ี องการ
แลว ใหท ำการดงั น้ี
1.1 คลกิ๊ เมาสท รี่ ูปภาพ ดวยปมุ ขวาของเมาส
1.2 ทำการคัดลอกทอ่ี ยูของรปู ภาพ (Copy image address)

13

2. เลอื กรายการ ตาม URL ทำตามขน้ั ตอนดังน้ี
2.1 วาง Link image address ลงในชอง วาง URL ของรูปภาพทีน่ ี่ :
2.2 ถา วาง Link image address สำเร็จจะเปนเคร่อื งหมายถกู
2.3 จะปรากฏภาพตวั อยา งตาม Link image address

แบบที่ 2 คนหา คอื วิธกี ารคนหารปู ภาพจาก Google ไดในทันทแี ละสามารถเลือกคนหาจาก
ไดอีกดวย โดยมีขน้ั ตอนดังน้ี

1. คลิ๊กเมาสเลอื กที่ คน หา
2. เลือกท่มี าของภาพจาก Google หรอื
LIFE
3. พมิ พช ื่อของรูปภาพที่ตองการ
4. เลือกประเภทของรปู ภาพ เชน ทกุ
ประเภท

ใบหนา ภาพถาย คลปิ อารต ลายเสน
5. คลกิ๊ เมา สท่ีปมุ คน หา
6. เลือกรปู ภาพท่ีตองการ
7. คล๊ิกเมาสทปี่ ุมเลอื ก

การพัฒนานวัตกรรมเพื่อกจิ กรรมการเรยี นรดู วย Google Sites โดย ดร.อนุศร หงษขนุ ทด
www.krukob.com

แบบที่ 3 แบบอัลบัม้ ของคณุ

แบบอลั บ้ัมของคุณ คือการเลือกรปู ภาพจาก Google Photo ท่ีได
ถกู อับโหลดขน้ึ ไปเกบ็ ไวแลว

แบบที่ 4 แบบไดรฟของฉนั

แบบไดรฟของฉัน คอื การเลือกรูปภาพจาก Google
Drive ท่ไี ดถูกอับโหลดขน้ึ ไปเก็บไวแลว

** สามารถคลิ๊กเมาสคางไวท่ีรูป เพือ่ เล่ือนตำแหนง ไปดานซา ย หรือขวา ของรูปไดตามตองการ

15

ใบความรูท่ี 5 การใชเ มนฝู ง เพอื่ ฝง Code HTML

การใชเ มนูฝง เพอ่ื ฝงสามารถทำได 2 รปู แบบ คือ ใช URL และ ฝงโคด ดงั น้ี
แบบท่ี 1 ใช URL

ขัน้ ตอนที่ 1 คดั ลอก URL

1. ทำการเปด หนา เว็บไซตทต่ี องการและ
2. คัดลอก URL ท่ีอยูของเว็บไซตท ่ีตองการ

ขั้นตอนที่ 2 วาง URLเพ่อื ฝง

1. ไปท่ีเมนู แทรก
2. เลือกเมนู ฝง

1. เลอื กเมนู ใช URL

2. วาง URL ท่ที ำการเลือก และคัดลอกไวแ ลว
3. จะมีการแสดงตัวอยางเว็บไซต ของ URL ที่ไดท ำ

การคัดลอกมา
4. คล๊กิ เมา สท ป่ี ุม แทรก

การพฒั นานวัตกรรมเพือ่ กจิ กรรมการเรยี นรูดวย Google Sites โดย ดร.อนศุ ร หงษข นุ ทด
www.krukob.com

ขนั้ ตอนท่ี 3 การปรับแตง ตำแหนง การวาง URL

1. แสดงเว็บไซตท่ีไดท ำการวาง URL
2. ทำการแกไข
3. ทำการลบทั้งหมด
4. สามารถคลก๊ิ เมาสค างไวเพื่อ ยอ และ
ขยายเว็บไซต

ตวั อยา ง การคลิก๊ เมาสค างไวเ พอ่ื ยอ และขยายเว็บไซต

ใบความรทู ี่ 6 การแทรกจากไดรฟ
การแทรกขอมูล หรอื Link ตาง ๆ จากไดรฟ คือการนำไฟลท ี่ไดทำการอับโหลดเขาไปเก็บไวใน
Google Drive ออกมาใชงานใน Google Sites เพ่ือใหสะดวกและงายข้นึ ในการเขา ถึงขอมูล

1. ไปทีเ่ มนู แทรก
2. เลือกเมนจู ากไดรฟ

ในเครอื่ งมอื ไดรฟจะประกอบไปดวยรายการตาง ๆ ดังนี้
1. ไดรฟ ของฉัน คือ แหลง ทเี่ กบ็ ขอมูลทั้งหมดของฉัน
2. แชรกบั ฉัน คือ แหลงท่เี ก็บขอ มูลท้ังหมดที่มกี ารใชง านของฉนั รว มกนั กบั ของผูอ่ืน
3. ลาสดุ คือ ไฟลท ี่ไดท ำการอับเดท หรอื แกไขลา สุด
4. ตดิ ดาว คอื ไฟลท ีไ่ ดทำการทำเคร่ืองหมาย ตดิ ดาวไวเพ่ือใหค น หาไดงา ย
5. คอมพวิ เตอร คือ ไฟลจ ากเคร่ืองคอมพิวเตอรท่ไี ดท ำการเชื่อมตอแบบอัตโนมตั ิกบั
Google Drive

17
ในท่ีนจ้ี ะแนะนำข้ันตอนการแทรกไฟลขอมลู จาก ไดรฟข องฉนั ในสว นรายการอนื่ ก็มรวธิ ีการ
แทรกที่เหมอื นกัน ดังนี้

1. คลิ๊กเมาสท่ี ไดรฟข องฉัน
2. เลอื กไฟลข อมลู ในรายการตามตองการ

จะปรากฏ Link เอกสารท่ีไดทำการ
แทรกเขามาในเวบ็ ไซต สามารถยอ ขยายการ
แสดงผลไดตามตองการ โดยการคลก๊ิ เมาสที่
ปมุ สฟี า ตามมุมตาง ๆ

การพฒั นานวตั กรรมเพือ่ กิจกรรมการเรยี นรูด วย Google Sites โดย ดร.อนุศร หงษข นุ ทด
www.krukob.com

กจิ กรรมที่ 4 การใชเ คร่อื งมือการออกแบบ
เครอ่ื งมอื การออกแบบ คือ รูปแบบอตั โนมตั ิท่ถี ูกจดั ไวใหแ ลวของ Google Sites เพ่อื การใสข อความ

ประกอบภาพ เปน ยอหนา บทความ หรอื คำอธิบายในเนอ้ื หาตา ง ๆ ของบทเรยี น โดยทีเ่ ราสามารถเลอื กใชได
ตามความตองการ

1. คลก๊ิ เมาสท่ี แทรก
2. เลอื กรูปแบบการออกแบบในรายการตามตอ งการ

เม่ือทำการแทรกรูปแบบการออกแบบตามตองการแลว ใหท ำการเพ่ิมขอมูลตามตอ งการ
1. เพ่ิมรูปภาพ หรือวตั ถุอ่นื ๆ
2. เพมิ่ หวั ขอ ของบทความ
3. ขอ ความ หรือเนื้อหา

การเพ่มิ รปู ภาพ หรือวตั ถุอื่น ๆ
ในหนาตา งนี้สามารถแทรกวัตถุไดดงั นี้
1. อบั โหลด คอื การอบั โหลดไฟลต า ง ๆ จากเคร่ือง
คอมพวิ เตอร เขาสูเวบ็ ไซต
2. เลอื กรปู ภาพ คือ การแทรกรูปภาพจากแหลง ออนไลน
ตาง ๆ ตามตองการ
3. จากไดรฟ คอื เลือกไฟลตา ง ๆ จาก Google Drive
4. YouTube คอื การแทรกคลิปวดิ ีโอจาก YouTube
5. ปฏทิ นิ คอื การแทรกปฏิทินเพอ่ื การนัดหมายกจิ กรรม
6. แผนที่ คือ การแทรกแผนทเ่ี พื่อการจดั กิจกรรม
การเพิม่ หวั ขอ ของบทความ

19
การเพ่ิมหัวขอของบทความ คือการใสชอื่ เรื่อง หรือหวั ขอ ของบทเรยี นหรือเนือ้ หาตา ง ๆ ที่
ตอ งการใหเรยี นรู เราสามารถตงั้ คาไดตามตองการ

1. พิมพหัวขอเร่ืองตามตองการ
2. ทำการตั้งคา หรือปรบั แตงหวั ขอไดต ามตองการ ดังน้ี

1) สามารถเลือกไดว า จะใหห ัวขอ เปน แบบใดเชน ขอความปกติ ช่อื
เรอ่ื ง สว นหวั หวั ขอยอ ย เลก็

2. สามารถจัดรูปแบบขอความความไดวาจะให
ชิดขอบซา ย ก่ึงกลาง ชดิ ขอบขวา หรอื ขยายเต็ม
ชอง

3. หากตองการใหห ัวขอน้ี Link ไปเวบ็ ไซตอื่น สามารถคัดลอก URL ของเวบ็ ไซตที่ตองการ
มาวางไดตามตองการ ดังนี้

1) ทำการคลุมดำที่ขอความท้ังหมด
2) คลิก๊ เมาสที่
3) วาง Link URL
4) คลก๊ิ เมาสที่ ใช

การพมิ พข อความ

การพฒั นานวตั กรรมเพื่อกิจกรรมการเรยี นรูด ว ย Google Sites โดย ดร.อนุศร หงษขนุ ทด
www.krukob.com

1. สามารถพมิ พขอความเนื้อหา ไดตามตองการ รวมถึงการคัดลอกขอความมาวาง

2. ทำการปรับแตง และแกไ ขขอความไดตามตองการ

กิจกรรมท่ี 5 เครื่องมือเพ่ิมเตมิ

เครอื่ งมือเพมิ่ เติมในแมนู แทรก ประกอบไปดวยเครอื่ งมือตาง ๆ ดงั น้ี

ภาพ เครื่องมอื ภาพ เครอ่ื งมือ

สารบญั แผนที่

ภาพหมนุ เอกสาร

ปุม สไลด

ตวั แบง ชตี

YouTube ฟอรม

ปฏทิ ิน แผนภูมิ

21

ใบความรูที่ 7 การแทรกสารบัญ การออกแบบ โดยจะ
การแทรกสารบัญ คือการเชอื่ มโยงหวั ขอ ตา ง ๆ ของ
แสดง Link ทั้งหมดตามลำดับรายการ ดงั นี้

ข้ันตอนท่ี 1 แทรกการออกแบบ ตามตองการ จากตัวอยางมกี ารออกแบบ
2 รปู แบบ

ขนั้ ตอนท่ี 2 แทรกสารบัญ

1. คล๊ิกเมา สท ี่ แทรก
2. คล๊ิกเมาสท ่ี สารบญั

ขั้นตอนท่ี 3 ปรับแตง สารบัญตามตองการ

1. รายการแสดงของสารบัญ

2. ปรับแตง สีตามตองการ
3. ปรับแตงลักษณะของสารบัญ
4. ปรับแตง ขนาดการแสดงของสารบญั
5. สามารถคลิ๊กเมาสปุมซา ยคางไวเ พื่อเลอ่ื นตำแหนงของสารบัญข้ึนบน หรือลงลางได

การพัฒนานวตั กรรมเพ่ือกิจกรรมการเรยี นรูด วย Google Sites โดย ดร.อนุศร หงษข ุนทด
www.krukob.com

ใบความรทู ่ี 8 การแทรกภาพหมนุ
ภาพหมุน คือการนำเสนอรูปภาพตาง ๆ ตามตองการทีม่ ากกวา 2 รูปขน้ึ ไปใหห มนุ วน
สลับกนั ไปเรอ่ื ย ๆ บนเวบ็ ไซต

ขนั้ ตอนที่ 1 การแทรกภาพหมนุ

1. คลกิ๊ เมาสท่ี แทรก

2. คล๊กิ เมาสท่ี

ขั้นตอนที่ 2 แทรกรูปภาพ

1. คลิก๊ เมาสที่

2. ทำการแทรกรูปภาพตามตองการใน
ท่นี ี้

เลือกรายการ เลือกรูปภาพ

ข้นั ตอนท่ี 3 เลือกรปู ภาพ
ทำการเลือกรูปภาพอยางนอย 2 รูป (ตัวอยา งจะเลือกเมนอู ัลบัม้ ของคุณ) ดังน้ี

1. คลิก๊ เมา สท่ี อัลบั้มของคุณ
2. ทำการเลือกรูปภาพอยางนอย 2 รปู
3. คล๊ิกเมา สท ่ปี มุ เลือก

23

ข้นั ตอนท่ี 4 การปรับแตง

1. หากตอ งการลบรปู ภาพที่ไมตอ งการให
นำเมาสไ ปวางไวบนรปู ภาพท่ีตองการลบ
ออก
แลวเลือก ถังขยะ

2. ทำการตง้ั คาการหมนุ ของรูปภาพ โดยทำการติ๊กเครื่องหมาย
ถูกที่ เรม่ิ ตน อตั โนมตั ิ แลวคลิ๊กเมา สท่ีปุมแทรกเลยก็ได (หากไม
ตองการต้งั คาตามขอ 2 ขา มไปทำตามขอ 3 เลยก็ได)
3. คลก๊ิ เมา สท ป่ี ุม แทรก

ข้นั ตอนที่ 5 การเลือ่ นตำแหนง และปรบั ขนาดของการแทรกภาพหมุน
คลกิ๊ เมาสป มุ ซายคางไวท จ่ี ดุ สีฟา แลวเลอื่ นหาตำแหนงตามตอ งการ

การพฒั นานวัตกรรมเพ่ือกจิ กรรมการเรยี นรดู ว ย Google Sites โดย ดร.อนุศร หงษข นุ ทด
www.krukob.com

ใบความรทู ี่ 9 การแทรกปุม
การแทรกปุม คือ การสรา งปุมเพ่ือใชส ำหรือเช่ือมโยงไปยงั หนา เว็บไซตอ ่ืน ๆ ท้ังภายใน
เว็บไซต และนอกเว็บไซตม ีขั้นตอนการแทรกดังนี้
ขั้นตอนท่ี 1 แทรกปมุ

1. คลิ๊กเมา สท ี่ แทรก
2. คลิก๊ เมาสที่ ปุม

ข้ันตอนที่ 2 ตั้งช่ือและ ใส Link URL

1. ใสชือ่ ของปุมทตี่ องการ (พิมพขอความไดไม
เกิน 120 ตวั อักษร)

2. ใส Link URL ตามตองการ

ข้ันตอนที่ 3 ปรับแตง ปุม

1. ปรบั แตง ปุม ตามตองการ
2. คลิก๊ เมา สท รี่ ูปดนิ สอเมอ่ื ตองการกลบั ไปแกไข

3. หากตองการเล่อื นเพอ่ื เปลี่ยนตำแหนง เชน เลือนเปลีย่ นตำแหนง ไปดานบนของเว็บไซต
ใหท ำการ คล๊ิกเมา สป มุ ซา ยคางไวท ี่ แลวเลอื่ นเมา สข้ึน ลง ตามตองการ

** จดุ สงั เกต คือจะปรากฏแถบสีนำ้ เงินตรงตำแหนง ทจ่ี ะเล่ือนไปแทนที่ได