1 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)แสดงแบบหนาจอของแท็บเลต็
2. แสดงแบบหนาจอของหนาจอคอมพวิ เตอร 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. หากตองการเล่อื นเพอ่ื เปลี่ยนตำแหนง เชน เลือนเปลีย่ นตำแหนง ไปดานบนของเว็บไซต ใหท ำการ คล๊ิกเมา สป มุ ซา ยคางไวท ี่ แลวเลอื่ นเมา สข้ึน ลง ตามตองการ

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