หนังสือคอมพิวเตอร์-การใช้ google sites

พิมพ พพ์ครรั้งทที่ 1 : 1 มกราคม 2020

การใชชง้ าน Google Sites โดย วสัสนต์ต คณคุ ดิลด กเศวต [email protected] Line ID : wasankds 08-1459-8343 www.poeclub.org

สารบบญั สารบัญบ ...............................................................................4 บททที่ 1 การตตับ้งคคา่ กอ่ค นใชงช้ าน Google Sites...................................7 1.1. การตง้ตั คา่ค ภาษาให้หกตบ Google Apps ........................................................................8 บทท่ีท 2 การสรช้าง Site............................................................13 2.1. Google Site คืคออะไร ? ......................................................................................... 14 2.2. การสราห้ งเอกสาร Google Site ............................................................................... 14 2.2.ก.) การสรรา้ งเอกสาร Google Site (14) 2.2.ข.) การตตง้ั ชอืช่ Site (15) บทท่ีท 3 การตกแตง่ค Site.........................................................17 3.1. การเลือค ก Theme .................................................................................................. 18 3.2. การตตั้งชื่ชคอเวบ็ว ไซต์ต .................................................................................................... 18 3.3. การตกแตงค่ ปก ......................................................................................................... 19 บทท่ีท 4 การเผยแพรค่เวว็บไซตต....................................................23 4.1. การดดพู รีวร วิว เวว็บไซต์ต ................................................................................................. 24 4.2. การเผยแพร่คเว็บว ไซต์ต ................................................................................................ 25 4.2.ก.) กก๊อปปลป้ี งิล คค์สาส หรบต เผยแพรรเ่ ว็วบ (25) 4.2.ข.) การเปลชื่ลยนลิลงคคเ์ วบ็ว ไซตค์ (26) 4.2.ค.) การดดูเวบ็ว ไซตเค์ ผยแพร่ร (26) 4.2.ง.) การยกเลิลกการเผยแพรเร่ วว็บไซตค์ (26) 4.2.จ.) เมอ่ืช อพต เดทเวว็บ (26) 4.3. การจจากดต ผเ้หูด ข้าห ถถึงเวบ็ว (การแชร์ต) ............................................................................... 26 4.3.ก.) การจาส กดต ผดูร้เขาร้ ถึงถ เวว็บเผยแพรร่ (27) 4.3.ข.) การจสากดต ผ้รูดเขาร้ ถถึงเว็บว แบบเจาะจง(28) 4.4. การใส่ค Favicon ใหหก้ บต เวบ็ว ไซตต์ ...............................................................................30 บทที่ท 5 การจบัดการหนาช้ เวว็บ......................................................31 5.1. การตตั้งช่ืชคอใหห้หนา้ห เวว็บ ............................................................................................... 32 5.2. การเพชิวม่ื หน้หาเวบ็ว ..................................................................................................... 33 5.3. การจดต การหนห้าเววบ็ ................................................................................................. 34 5.4. การเพืมชิว่ ลิงว คต์ลงในเมนดู ............................................................................................. 35 5.5. การยา้ห ยลจาดตบของหน้หาเวว็บ ...................................................................................... 36 5.6. การยา้ห ยตจาแหนง่ค เมนูด ............................................................................................... 36

5.7. Subpage (หน้หายค่อย) ............................................................................................. 37 5.7.ก.) การสรรา้ ง Subpage (37) 5.7.ข.) การยร้ายหน้าร เว็วบไปเปน็ป Subpage (38) 5.8. การใสค่ Footer ....................................................................................................... 39 บททท่ี 6 Section และ องคปต ระกอบ...........................................41 6.1. เคร่ืคชองมือค แทรกองคตป์ ระกอบลงในหนหา้ เวบว็ ...............................................................42 6.2. การจดต การ Section ............................................................................................... 42 6.3. การจดต การองค์ปต ระกอบใน Section .......................................................................43 6.3.ก.) การปรบต ขนาดองคป์ค ระกอบ (43) 6.3.ข.) การย้าร ยองคป์ค ระกอบ (43) 6.3.ค.) การเพ่ืมิชล องคปค์ ระกอบลงใน Section (เมนดูวงกลม) (44) 6.3.ง.) การยร้ายองค์คประกอบไปใสใ่ร น Section (44) บทท่ที 7 องคปต ระกอบชนดิน ต่าค งๆ.................................................47 7.1. แทรกองคต์ประกอบต่าค งๆ ......................................................................................... 48 7.2. Textbox (ช่คองข้หอความ) ........................................................................................ 48 7.3. คีรย์ตลตดทจางานกบต ขห้อความ ........................................................................................ 49 7.4. Image(รดปู ภาพ) ..................................................................................................... 49 7.5. Embed(ฝฝัง) ........................................................................................................... 50 7.6. From Drive (จากไดรฟฟ) ....................................................................................... 51 7.7. Layouts (การออกแบบ) ........................................................................................ 52 7.8. Collapsible text(ขอห้ ความแบบบยุยบได้ห) ...............................................................53 7.9. Table of contents (สารบญต ) .............................................................................. 54 7.10. Image carousel (ภาพหมยนุ ) .............................................................................. 55 7.11. Button (ปุ่มยป ) ....................................................................................................... 57 7.12. Devider(ตวต แบ่งค ) ................................................................................................ 58 7.13. Youtube ............................................................................................................. 58 7.14. Calendar (ปฏิทว วิน) .............................................................................................. 59 7.15. Map (แผนทชื่รี) ....................................................................................................... 62 7.16. Docs .................................................................................................................... 63 7.17. Slides .................................................................................................................. 64 7.18. Sheets ................................................................................................................ 65 7.19. Forms ................................................................................................................. 66 7.20. Charts (แผนภมดู ิว) ................................................................................................. 68



บททีท่ 1 การตัง้บต ค่คากอ่ค นใชง้ช าน Google Sites

1.1. การตตง้ั คา่ค ภาษาให้กห บต Google Apps การตตัง้ ครา่ ภาษาในหตวขอ้ร นล้ัต มผล ลตอ่ร ภาษาของเมนดตู ร่างๆในการใชรง้ าน Goolge Apps ทกทุ ตวต ขตั้นตอนการตตงั้ คา่ค ภาษา 1. ขณะใช้งร าน Goolge Apps ใดๆกต็ว าม คลกิล ทชื่ล ภาพโปรไฟล์พ → Manage your Google Account หรอช ไปท่ลลชื งิล ค์ค https://myaccount.google.com กไว็ ด้ร จะเขา้ร สูดห่ร นา้ร My Account ตามภาพทชลื่ 1 2. (ตามภาพทลชื่ 1) ท่ลหืช นาร้ เวว็บ My Account คลกิล ท่ืลช เมนนู Data & personalization จะได้ผร ลลตพธ์ตค ามภาพทืช่ล 2 ภาพทชีรื่ 1 3. เลอ่ืช นหน้าร เวว็บไปทลช่หื ตวขอร้ General preferences for the web 3.1 คลกิล ท่ลชื Language ตามภาพท่ืชล 2 ภาพท่รีชื 2 8 การใช้งช าน Google Sites

4. ทหล่ืช นา้ร Language ตามภาพทืชล่ 3 4.1 คลกลิ ทชล่ื ADD ANOTHER LANGUAGE จะปรากฎหนา้ร ต่าร ง Languages ตามภาพทลชื่ 4 ภาพท่ชรีื 3 4.2 (ทืลชห่ นร้าตร่าง Languages) เลชอกภาษา ตามภาพทลชื่ 4 ก.) คน้ร หาภาษาทตชืล่ ร้องการ ข.) คลกลิ Select – ภาษาจะถดูกเพลิม่ืช ลงในบญต ชลของเรา ไดผ้ร ลลตพธค์ตามภาพท่ืลช 5 ภาพทีชื่ร 4 โดย วสนัส ตต์ คุคณดดลิ กเศวต ([email protected]) 9

5. (ทชลื่หน้ราตา่ร งตามภาพท่ืลช 5) ย้าร ยลาส ดบต ของภาษา 5.1 คลกิล ท่ืลช ลกูด ศร ( ) เพอ่ืช ยรา้ ยลาส ดบต ของภาษาทชจลื่ ะใชร้ โดยภาษาทลชือ่ ยดดรู่ ้าร นบนสทุด จะถดูกใช้ร ภาพทรี่ชื 5 ภาพทื่ชล 6 เปป็นผลลพต ธ์ค เม่ืชอยาร้ ยภาษาไทยขน้ัถตึ ดาร้ นบน ภาพท่ืชีร 6 10 การใชชง้ าน Google Sites

เม่อืช ทดสอบเปดิป แอพ Google Sites จะได้ผร ลลตพธต์ค ามภาพทลชื่ 7 ( แต่ตอย่าต งไรก็ดก ีด หนันงสือส เลมต่ นนด้ี เขีดยนโดยใชเ้ช มนนภู าษาอันงกฤษ ) ภาพทรื่ชี 7 โดย วสสันตต์ คณคุ ดลิด กเศวต ([email protected]) 11

12 การใช้งช าน Google Sites

บทท่ที 2 การสร้ชาง Site

2.1. Google Site คือค อะไร ? เราสามารถทสาเวว็บไดงร้ า่ร ยๆ โดยใชร้ร ะบบของ Google Site Google Site เปนป็ แอพๆหนงึ่ชถื ในชุดท ของ Google Apps โดยไฟล์ขค อง Google Site มลลตกษณะเปป็นหนรา้ เว็บว ซืชึง่ถ เราสามารถตัต้งชืช่อ URL ได้ใร นระดบต หนงถช่ึื เขน่ร https://sites.google.com/(โดเมน)/mysite เปน็ป ตน้ร การทสาเวบ็ว ไซต์ค เราตร้องมลโฮสตวงัิต้ หรคือเซวิรตฟ์ เวอรต์ทใล่ืช ชสร้ าส หรตบเกบ็ว ไฟลต์ค าร่ งๆของเวว็บไซต์ค และตอร้ งมลช่ือคช โดเมนของเว็วบไซตด์ค ้รวย เป็นป 2 สชงื่ิล หลตกๆทต่ืชล อร้ งมล กรณลเวว็บของผดูร้เขลยนกว็คชอ www.poeclub.org เสลยคร่าเช่ราโฮสตัต้ลิงปปละประมาณ 1,200 บาท และค่ราเช่ราชืช่อ โดเมนอกล ปลป ะ 450 บาท แต่รถร้าเปนป็ เวว็บทลท่ืช าส ด้วร ย Google Site เราไม่รต้รองเสลยคร่าใชจ้ร ร่ายข้าร งต้รน อย่รางไรก็วดล สาส หรตบผูร้ดเขลยนแลร้ว เว็วบท่ลืชทาส ดร้วย Google Sites ไม่รเหมาะนสามาใช้รเป็ปนเวว็บแบบเปป็นทางการ แต่คมรีประโยชนต์มาก สาจ หรบต ใช้เห ป็ปนศดนู ยร์ต วมขอห้ มลูด ข่าค วสาร หรคือใช้ปห ระสานงานกตนภายในทีรมงาน หรคือภายใน องคต์กร 2.2. การสร้าห งเอกสาร Google Site 2.2.ก.) การสรช้างเอกสาร Google Site ทหลชื่ นรา้ แรก Google Drive คลกิล ทืลช่ปมุ่ป New → More → Google Sites ตามภาพทชื่ล 8 จากนตน้ั หนาร้ เวว็บ ซงชึ่ืถ เปปน็ เอกสารใหม่ขร องไฟล์ค Site จะถดูกเปิดป ข้ัตึถนมา ตามภาพทชืล่ 9 ภาพทีืช่ร 8 14 การใชช้งาน Google Sites

2.2.ข.) การตงัร้ ช่อชที Site เมอ่ชื สราร้ ง Site ระบบจะต้งตั ชช่อื ใหร้ก่อร น เช่รน Untitled Site เราสามารถเปล่ยลชื นชอ่ืช ไดโ้ร ดย คลิกว ท่ชรีืชอค่ ง สจาหรตบพิมว พตช์ คชือ่ จากนันต้ พมิล พ์คชือช่ ลงไป ตวต อยร่างตามภาพทื่ลช 9 ชช่อื ไฟลค์ก็คว ชอ MySite ภาพทชีรื่ 9 หลงต จากสรา้ร งไฟลค์เอกสาร Google Site แลร้ว ไฟล์คจะถูดกสรร้างไวทร้ ืชล่ Drive ซึถง่ืช จากน้นัต เราสามารถ ยา้ย ย, เปลลี่ยนชีอลช่ หรอช เปิดป ขึข้นมาแกยไ้ ข ได้รเหมอช นกบต ไฟลคใ์ น Drive ทวชื่ต ไป ภาพทลืช่ 10 เป็นป ไฟล์ค Google Site ทืชล่อยใ่รูด น Drive ภาพท่ชีรื 10 โดย วสสันตต์ คคุณดิลด กเศวต ([email protected]) 15

16 การใช้งช าน Google Sites

บททท่ี 3 การตกแตค่ง Site

3.1. การเลคือก Theme ทลื่ช Sidebar คลกิล ทืชล่ Themes จากนตนั้ เลทอกธมล ทตืชล่ ้รอกงาร ตวต อยา่ร งตามภาพทลชื่ 11 ภาพท่ืชรี 11 3.2. การตตงั้ ชื่ชคอเวบ็ว ไซตต คลกิล ทช่ืชล รอ่ งพมิล พช์ค ่ชือเว็วบ จากนน้ตั พมิล พช์ค ืชอ่ ลงไป ตวต อยร่างตามภาพท่ืชล 12 ชชื่อเวบ็ว ก็วคอช My Website ภาพทช่ีรื 12 18 การใชชง้ าน Google Sites

3.3. การตกแตค่งปก การใสค่โลโก้ห ชลัต้เมร้าส์คทชืชล่ ่ืชอเว็วบไซต์ค จะปรากฎปปุ่ม Add logo (ตามภาพทืชล่ 13) ใหร้คลกลิ ท่ลชืปปทุม่ จะปรากฎหนร้าตรา่ งมาใหร้เลชอก ภาพ ภาพทรีชื่ 13 การเปลยลชื่ นภาพปก ชลตั้เมร้าสคท์ ภชื่ล าพปก จะปรากฎ ปปุม่ Change image (ตามภาพท่ชลื 13) คลลกิ ทลชื่ปุป่มท Change image → Upload เพ่ชืออปต โหลดไฟล์คจากเครอ่ชื งไปใส่รเป็นป ภาพปก คลลิกทลชื่ป่มทปุ Change image → Select image เพอชื่ อปต โหลดเลชอกภาพจาก Drive หรอช คนร้ หาภาพมาใช้ร การเปลรีืย่ช นขอ้ห ความบนปก คลกิล ทขลชื่ ้รอความบนภาพปก ตามภาพทื่ชล 14 จากน้ตันพลมิ พขค์ ้รอความใหมร่ลงไป ภาพทชีรื่ 14 โดย วสสนั ตต์ คณุค ดลิด กเศวต ([email protected]) 19

การเปลีรืช่ยนชนวิดของปก (Header type) ช้ัตลเมร้าส์คทื่ลชภาพปก จะปรากฎปปุ่ม Header type (ตามภาพทื่ลช 13) คลลิกทชื่ลปุ่ทปม Header type จะปรากฎปปทุ่ม เลชอกชนลิดของปกให้รเลอช ก ตามภาพทล่ืช 15 ภาพทีชืร่ 15 การลบภาพปก ชัตล้เม้าร ส์ทค ภืชล่ าพปก จะปรากฎปม่ปทุ (Delete header) ตามภาพทืชล่ 13 คลลกิ ทืลชป่ ม่ทุป เพอ่ืช ลบภาพปก การแทรกภาพปก (Add header) หากลบภาพปกไปแล้รว จากนตั้นต้รองการแทรกกลตบมาใหม่ร สามารถทาส ได้รโดยชลต้ัเมร้าส์คท่ืลชช่ชือเวว็บไซต์ค จะ ปรากฎปุ่ปม Add header ตามภาพทลช่ื 16 คลลกิ ทปื่ลช ปุ่มท ภาพปกจะถดกู แทรก ภาพท่รืชี 16 ภาพทช่ลื 17 เป็ปนตวต อยาร่ งการตกแตรง่ ปกของเวบว็ ไซต์ค ภาพท่ีชืร 17 20 การใชชง้ าน Google Sites

โดย วสสันต์ต คุณค ดดิลกเศวต ([email protected]) 21

22 การใช้งช าน Google Sites

บททที่ 4 การเผยแพรค่เว็บว ไซตต

4.1. การดดพู รีวร วิว เวว็บไซตต (Preview) ขณะทสาเวว็บ เราสามารถดดตู วต อย่ราง หรชอดพูด รวล ลิวเว็วบไซต์ไค ด้โร ดย ทืลช่หนา้ร แรก Site คลกิล ทืลช่ปปมุ่ ตามภาพทลชื่ 18 ภาพทื่รีช 18 ภาพท่ลืช 19 เป็ปนตตวอยร่างหน้ราพรลวลิวเว็วบไซตค์ ทืชล่มุทมมองน้ัตล เราสามารถดดูพรลวลิวเว็วบไซต์คตามอทุปกรณ์คต่รางๆ ไดร้ โดยแถบเคร่อืช งมชอ หากตร้องการออกจากมมทุ มองพรลววิล ใหรค้ ลิลกทชลื่ปปุ่ทม ภาพทช่รีื 19 24 การใชชง้ าน Google Sites

4.2. การเผยแพรเ่ค ว็บว ไซตต เว็วบทลชื่เราจะสร้ราง จะยตงไมร่สามารถเขร้าดดูจากภายนอกไดร้ ตร้องเผยแพรร่กร่อน ซถึื่ชงเราจะได้รลลิงค์ค(หรชอ URL) สสาหรตบเขร้าดูดเวบว็ การเผยแพรเ่ร วบ็ว ไซตส์ค ามารถทาส ไดร้ดงต นต้ัล การเผยแพร่คเว็บว ไซตต์ 1. ท่ืชลหนา้ร แรก Site คลิกล ทื่ลชปทปุม่ (ตามภาพท่ลืช 20) จะปรากฎหน้าช ตต่าง Publish your site ตามภาพทชลื่ 21 ภาพทีชรื่ 20 2. ทชห่ืล นา้ร ตา่ร ง Publish your site 2.1 ชร่อง Web address ตง้ตั ชชื่อเวว็บ เช่นร mysite 2.2 คลกิล ปุ่มทป Publish ภาพทรีืช่ 21 ลงลิ คค์ในหน้าร ตาร่ ง Publish your site เชร่น https://sites.google.com/domain.com/mysite จะเป็ปนลิงล คค์ ทลชใ่ื ชร้เขาร้ ดูดหนา้ร เวว็บ 4.2.ก.) ก๊อก ปปป้ลี พิงคพ์สสาหรบร เผยแพร่เต วบ็ว หลงต จากเผยแพร่เร ว็บว ตามทอืชล่ ธิบล ายไวใ้ร นขอ้ร 4.2 แลร้ว เราสามารถทาส สสาเนาลลงิ คค์หน้ราเวว็บ ไดร้โดย ท่ชลหื นาร้ แรก Site คลิกล ทปลชื่ มุ่ป (Copy published site link) ตามภาพทชื่ล 22 ภาพทช่ืรี 22 25 โดย วสนัส ตต์ คณคุ ดดิลกเศวต ([email protected])

4.2.ข.) การเปลยีท่ นลงพิ คเ์พ วว็บไซต์พ → Publish settings จะ ลงิล คท์ค ลเ่ืช ราสราร้ ง ทืใล่ช ช้เร ผยแพร่รเว็บว ไซตค์ เราสามารถแก้รไขได้รโดย ทช่ืลหนร้าแรก Site คลกลิ ทชื่ลปุมย่ป (Publish Option) ข้รางๆป่ปมุท ปรากฎหน้าช ตต่าง Publish settings มาให้รแกช้ร อ่ืช ลลิงค์ค ตวต อยรา่ งตามภาพท่ืชล 23 ภาพทชีร่ื 23 4.2.ค.) การดูนเวบ็ว ไซตเ์พ ผยแพรต่ ทลชื่หนร้าแรก Site คลกิล ท่ลืชปปุยม่ (Publish Option) ขา้ร งๆปุ่ปมท → View published site จะ ปรากฎหนรา้ เว็วบ 4.2.ง.) การยกเลิพกการเผยแพร่ตเวบ็ว ไซตพ์ ทหชืล่ นาร้ แรก Site คลกิล ทช่ืลปม่ยุป (Publish Option) ขาร้ งๆปุ่มทป → Unpublish 4.2.จ.) เมทชอี่ อพร เดทเววบ็ เมช่ือแก้รไขหรชออตพเดทเวว็บ ส่รวนทล่ืชแกร้ไขจะไมร่ถูดกเผยแพร่ร ให้รคลิลกทชล่ืปุ่ทปม เพช่ือเผยแพรร่ส่รวนทล่ชื อพต เดทด้วร ย 4.3. การจาจ กดต ผหเดู้ ขห้าถถงึ เวบ็ว (การแชรต) เราสามารถจาส กดต ผร้ดูเข้ราถงถึ หรอช ใช้งร านเวว็บไซตไค์ ด้ร เช่รน เฉพาะผู้ดรใช้รในองค์คกรเทา่ร นตน้ั , สาธารณะ ใครก็ว สามารถเขร้าดูได ดร้ หรชอ เฉพาะผู้ดใร ชแร้ บบเจาะจงเทร่านตัน้ ทสล่ืช ามาระเข้ราดูได ด้ร เปป็นตร้น การจสากดต ผด้เูร ขรา้ ถงึถ เวบ็ว สามารถทสาได้โร ดยการต้ัตงคา่ร การแชรค์ ดตงนัต้ล ทชลื่หนรา้ แรก Site คลลิกทปืชล่ ุ่ปม (Share with others) ตามภาพทชื่ล 24 จะปรากฎหนช้าตตา่ ง Share with others ตามภาพทื่ลช 25 ใชส้ร สาหรตบตัต้งคาร่ การแชรค์ ภาพท่ชรืี 24 26 การใช้ชงาน Google Sites

ภาพท่ชีรื 25 4.3.ก.) การจสากดร ผู้เนช ขา้ช ถึงถ เวบ็ว เผยแพรต่ ขัต้นตอนการจาจ กดต ผเ้ดูห ขหา้ ถถงึ เว็บว เผยแพรค่ 1. ทืช่ล หนาช้ ตตา่ ง Share with others ตามภาพทลช่ื 26 คลกลิ ท่ชืล Change (หวต ข้รอ Published - … ) จะปรากฎ หนช้าต่ตาง Publishing settings ตามภาพทลชื่ 27 ภาพทรื่ชี 26 โดย วสสันตต์ คุณค ดดิลกเศวต ([email protected]) 27

2. ทื่ลช หนาช้ ตา่ต ง Publishing settings เลชอกตวต เลอช กทืตชล่ ร้องการ 2.1 Anyone can find and view the published version (ทกุท คนจะค้นร หาและดดเู วอรชค์ ชนตื่ ท่เชลื ผยแพร่ไร ด้ร) 2.2 Anyone at (โดเมน) can find and view the published version (ทคทุ นใน (โดเมน) จะคน้ร หาและดูดเวอรค์ชช่นืต ทเ่ืชล ผยแพรไ่ร ดร้) 2.3 Specfic people can view when published (บทุคคลทรืชล่ ะบุทจะดดไู ดร้เมชอ่ื เผยแพร่รแลวร้ ) ภาพทืรช่ี 27 4.3.ข.) การจาส กรดผช้เูน ข้าช ถถึงเวบว็ แบบเจาะจง ข้นตั ตอนการจจากตดผดูเ้ห ขห้าถงถึ เวบ็ว แบบเจาะจง 1. ท่ลชื หนา้ช ต่าต ง Share with others ตามภาพทล่ชื 28 2. ช่อร ง Invite people 2.1 ระบุทบตญชขล องผทูดร้ ่ลชืเราตรอ้ งการอนุทญาตใหร้เข้าร ถงึถ เวว็บ 2.2 ทลชื่ Dropdown ( ) เลชอกสลิทธทิล เช่ืล ราอนุทญาต ก.) Can edit - แกร้ไขเว็บว ไดร้ ข.) Can view published - ดูดเว็วบทเ่ืลช ผยแพรไร่ ด้ร 3. (ขรา้ มได)้ร ตก๊ิลต ทลชื่ กลตอ่ งตวร เลอช ก Notify people เพช่ือแจ้งร บทุคคลทชืเ่ล ราอนุญท าตให้รเขร้าถถึงเวบ็ว 4. (ขาร้ มได)ร้ ตกพิต๊ ทท่ี Prevent editors from publishing, changing access and adding new people เพอชื่ ปอ้ป งกนต ไม่ใร หผร้ ูรดท้ ลไชื่ ดร้ร ตบสลทิ ธิแล กไ้ร ข เปล่ยชืล นสทิล ธิลธ์การเขาร้ ถงึถ และเพม่ลิชื คนใหม่ร 5. คลกลิ ปุ่ปม OK เพชื่อยนช ยนต 28 การใช้งช าน Google Sites

ภาพทรีื่ช 28 ผ้ดูรทชื่ลไดตรตบสิลทธิลการเข้ราถถึงเวว็บ สามารถดดูไฟล์ค Google Site ทล่ืชได้รรตบแชรค์ทชืล่ Drive เมนดู Shared with me ตวต อยา่ร งตามภาพทชลื่ 29 ภาพทีรชื่ 29 โดย วสนสั ต์ต คคุณดิลด กเศวต ([email protected]) 29

4.4. การใสค่ Favicon ให้หกตบเว็บว ไซตต Favicon คอช อะไรคอ่ร นของเวว็บ ทลชื่ปรากฎบนแทบ็ว ของบราวเซอรค์ ตวต อย่รางตามภาพทลช่ื 30 การใสร่ Favicon สามารถทสาได้รโดย ทล่ชืหนร้าแรก Site คลิลกทชื่ล ปยปุ่ม → Add favicon จะปรากฎหน้ราตร่าง มาใหเร้ ลอช กภาพ ใหร้เราเราภาพทลช่จื ะนสามาทสาเป็ปนภาพ Favicon โดยใช้ภร าพทชลเ่ื ปป็นสเล หลชยลื่ มจตสตุทรสต เมชื่อเผยแพร่รเว็วบไซต์ค จะปรากฎ Favicon ของเว็วบตตวอยร่างตามภาพทืล่ช 30 (ดเูด พชลม่ิื เตลิมข้รอ บททลืช่ 4 การเผย แพรเ่ร วบว็ ไซตค์ หน้าร 23) ภาพทชีร่ื 30 30 การใชช้งาน Google Sites

บทที่ท 5 การจบัดการหน้าช เว็บว

5.1. การต้ตังชคื่อช ใหห้หนาห้ เววบ็ เริืชม่ล ตนร้ ทางเวว็บไซตค์ จะมล หน้หาแรก, เพจแรก หรอช หน้หา Home มาให้เร พยล งหน้าร เดยล วกรอ่ น เราสามารถต้ตัง ชชื่อใหมร่ได้ร หรชอหากแทรกหนาร้ เวว็ยใหม่เร พืช่ลมิ เข้าร มา กส็ว ามารถเปลืล่ยช นชืชอ่ ใหมไ่ร ดร้ ซืงชถึ่ สามารถทาส ไดโ้ร ดย ทท่ี Sidebar ของ Site → แทบว็ Page → คลลกิ ทชืล่ ปปมุ่ (หลงร หนา้ช เวว็บ) → Properties ตามภาพทล่ืช 31 จะปรากฎ หนชา้ ตตา่ ง Properties ตามภาพทื่ชล 32 ภาพทืรีช่ 31 ภาพท่ืชรี 32 ชอต่ ง Name : เป็ปนชชอื่ ของเพจ ชอต่ ง custom path : เป็ปนพาธไปยตงหน้ราเพจ ทเชืล่ ราสามารถกาส หนดไดรเ้ อง ซชึถื่งปกติจล ะใช้ชร อืช่ ของเพจ เช่รน https://sites.google.com/(โดเมน)/mysite/home เราสามารถเปลยล่ืช นเปน็ป https://sites.google.com/(โดเมน)/mysite/projectx ไดร้ หากกสาหนดพาธเอง ใหรค้ ลกิล ทช่ลื ปุป่ม เพชือ่ อพต เดทพาธอกล ครง้ัต 32 การใชง้ช าน Google Sites

5.2. การเพชมื่ิว หนา้ห เว็บว (New page) การเพชลมื่ิ หน้าห เวบ็ว หรชอหนห้าเพจ สามารถทาส ไดรโ้ ดย ทท่ี Sidebar ของ Site คลิลกทปชล่ื ปมุ่ ตามภาพทชลื่ 33 จะปรากฎ หน้ชาตตา่ ง New page ตามภาพทชืล่ 34 ภาพทืีร่ช 33 ภาพทชร่ีื 34 ช่ตอง Name : เปป็นช่ืชอของเพจ ช่ตอง custom path : เปน็ป พาธไปยตงหนา้ร เพจ ทเ่ืลช ราสามารถกาส หนดไดเร้ อง ซถึืชง่ ปกติลจะใชร้ชื่อช ของเพจ เช่นร https://sites.google.com/(โดเมน)/mysite/january เราสามารถเปลยลื่ช นเปน็ป https://sites.google.com/(โดเมน)/mysite/01 ได้ร หากกาส หนดพาธเอง ใหรค้ ลกลิ ท่ืชล ปป่มุ เพอช่ื อพต เดทพาธอกล ครต้งั โดย วสันส ตต์ คุณค ดิลด กเศวต ([email protected]) 33

ภาพท่ชลื 35 เป็ปนผลหลงต จากสรา้ร งหนา้ร เวว็บแล้วร ภาพทื่รีช 35 5.3. การจตดการหนห้าเว็วบ ที่ท Sidebar ของ Site → แทว็บ Page → คลิลกท่ชลื ปปุ่ม (หลรงหน้าช เวบ็ว ) → Properties ตามภาพทชื่ล 36 Make homepage : ทาส เป็นป เพจหน้าร แรก Duplicate page : ทสาซตสา้ั หน้ราเว็วบ Properties : ตง้ตั คทุณสมบตตขิล องหนร้าเวว็บ (ชชื่อเวบว็ และ พาธ แบบกสาหนดเอง) ดเดู พืล่ชิมเตมิล ข้รอ 5.1 การตัต้งชอ่ชื ใหห้ร นร้าเวบว็ หนรา้ 32 Add subpage : แทรกหน้าร ย่รอย Hide form navigation : ซ่อร นจากการเผยแพรร่ Delete : ลบหนร้าเวบว็ ภาพทีร่ชื 36 34 การใชง้ช าน Google Sites

5.4. การเพ่วชิมื ลวิงคตลงในเมนูด หากมลหนา้ร เว็วบมากกว่รา 1 จะปรากฎลลงิ คส์ค าส หรบต ไปยงต หนร้าเว็วบตาร่ งๆอยาร่ งอตต โนมตต ิล ทืชล่สว่ร นหตว ตวต อยรา่ งตาม ภาพทื่ชล 37 ภาพทืีช่ร 37 เราสามารถสราร้ งลงิล ค์ค ไว้ทร ชื่เล มนูดสวร่ นหวต ได้รเอง ซึถงื่ช สามารถทาส ได้รโดย ที่ท Sidebar ของ Site คลกิล ทปลืช่ มุ่ป (New link) ตามภาพทลชื่ 38 จะปรากฎ หน้าช ต่ตาง New link ตวต อยา่ร งตามภาพทช่ืล 39 ภาพทรชื่ี 38 ภาพทร่ืชี 39 ช่ตอง PoE : ระบชุท ่ชอื เมนูด ชต่อง Link : ระบทุลงลิ คค์ปลายทาง โดย วสนัส ต์ต คุคณดลิด กเศวต ([email protected]) 35

ภาพท่ชืล 40 เป็ปนตวต อย่รางเมนดู ทช่มืล ลล ิลงคคท์ ลสช่ื ราร้ งเพื่มชิล ขนั้ึถต มาเอง ภาพท่ืชรี 40 5.5. การย้าห ยลาจ ดบต ของหน้าห เวบว็ การย้รายลสาดตบของหน้ราเวว็บ สามารถทสาไดร้โดย ทีท่ Sidebar ของ Site แทว็บ Page ลากหน้ชาเวว็บไปวางยรง ตาส แหน่ตงใหมต่ ตวต อยา่ร งภาพทช่ืล 41 → ภาพท่ืชีร 41 5.6. การยาห้ ยตจาแหนง่ค เมนดู เมนทูด ่ืชลสวร่ นหวร้ มตล าส แหน่งร ใหร้เลชอก 2 ตาส แหนร่ง ตจาแหน่งค แรกอยด่คูมมยุ ขวาบน เป็ปนคาร่ เร่ืชิลมต้รน ตวต อยร่างตาม ภาพทล่ืช 42 ภาพทชรื่ี 42 36 การใช้ชงาน Google Sites

เราสามารถเปลล่ยืช นตาส แหน่รงของเมนดทู ืลชส่ วร่ นหตว ไปไวรด้ าร้ นข้รางไดร้ โดยซอ่ร นไวใ้ร น Sidebar(ดา้ร นซร้าย) การยา้ห ยเมนดไู ปไวทห้ รีื่ช Sidebar (ดา้ห นซหา้ ย) ช้ัีรตเมห้าสต์ทืร่ชีสค่วนหตวของเวว็บ จากนัต้นคลลิกทืล่ชปป่ทุม (Navigation settings) → Side จะได้รผลลตพธค์ตามภาพ ทช่ลื 43 ปปมุท่ (Show sidebar) ใชเร้ ปดปิ ดเูด มนใดู น Sidebar ภาพทีื่รช 43 5.7. Subpage (หน้าห ย่อค ย) Subpage ก็คว อช หนร้าเว็บว ปกติล เพยล งแตเร่ มนดูเพช่อื เขร้าถึงถ หนา้ร เวบ็ว จะเป็ปนเมนยดู ร่อยของอลกหน้ราเวว็บหนงถชึ่ื 5.7.ก.) การสรชา้ ง Subpage ท่ีท Sidebar ของ Site → แทบ็ว Page → คลกิล ทืลช่ ปปุ่ม (หลงร หนา้ช เว็บว ) → Add subpage ตามภาพทื่ชล 44(ซร้าย) จะปราฎหน้าร ตร่าง New subpage ตามภาพทลชื่ 44(ขวา) → ภาพทืชรี่ 44 ชอต่ ง Name : ตต้งั ชชือ่ ของ Subpage ชต่อง custom path : เปนป็ พาธไปยงต หน้าร เพจ ทชลืเ่ ราสามารถกาส หนดไดรเ้ อง ซื่งชถึ ปกติลจะใชรช้ ืชอ่ ของเพจ เช่รน https://sites.google.com/(โดเมน)/mysite/march เราสามารถเปลยลช่ื นเปน็ป https://sites.google.com/(โดเมน)/mysite/03 ไดร้ หากกาส หนดพาธเอง ใหคร้ ลกิล ทลืช่ ปุปม่ เพอ่ืช อพต เดทพาธอกล ครตั้ง โดย วสสนั ต์ต คคุณดิลด กเศวต ([email protected]) 37

ภาพทชื่ล 45 - เมนดู March เปปน็ เมนดูยร่อยของเมนูด 2020 ภาพทีชื่ร 45 5.7.ข.) การยช้ายหน้ชาเว็วบไปเปป็น Subpage กรณมล ลหนาร้ เวว็บอยแ่ดูร ลวร้ สามารถยาร้ ยไปเปน็ป Subpage ได้ร สามารถทสาไดด้ร งต นลตั้ ทที่ Sidebar ของ Site แท็วบ Pages ลากหน้ชาเวว็บไปวางทรบชีทช่อของอทกหน้ชาเวว็บหนถ่ีทึง หรชอ ลากไปวาง แทรกยรงหนา้ช Subpage อนทช่ี ๆ ตวต อย่าร งภาพทลชื่ 46 → ภาพทีชืร่ 46 ภาพทลื่ช 47 เมนไูด ปยตงหน้าร Subpage กลายเปป็นเมนูดยรอ่ ยของอกล หนาร้ หนชถืง่ึ ภาพท่ืชรี 47 38 การใชงช้ าน Google Sites

5.8. การใส่ค Footer Footer หรชอ สวร่ นทา้ร ย จะปรากฎอยูดใ่ร นอยรใดู่ นเววบ็ ทกทุ หนร้า เราสามารถแทรก Footer ไดโ้ร ดย ชลตั้เม้ราสค์ทชื่ลส่รวนล่รางของหนร้าเวว็บ จากนตั้นคลิลกทช่ืลปุ่ปม ตามภาพท่ืลช 48 ใหร้คลิลกท่ลชืปปุท่ม จะปรากฎ พนช้ัต ทืลส่ช าส หรบต ใสร่เนัตชอ้ หาลงใน Footer ภาพทลื่ช 49 ภาพทร่ืชี 48 ภาพทืร่ชี 49 โดย วสสนั ต์ต คุณค ดดิลกเศวต ([email protected]) 39

40 การใช้งช าน Google Sites

บททท่ี 6 Section และ องคตประกอบ

6.1. เคร่อชคื งมืคอแทรกองคปต ระกอบลงในหนหา้ เวบ็ว เราสามารถแทรกองคป์ค ระกอบได้หร ลากหลายชนิลดลงในหนาร้ เวว็บ โดยใชเ้ร คร่อชื งมอช ตร่างๆทลช่ื แทบ็ว Insert ใน Sidebar หน้ชาแรกของ Site ตามภาพท่ืชล 50 ภาพท่ชืรี 50 6.2. การจตดการ Section เมชือ่ เราแทรกองคคป์ ระกอบลงในหน้ราเวว็บ องคตป์ ระกอบจะอยดคู่ภายใน Section (สค่วน) ท่ลชืเราสามารถ จตดการอะไรไดหร้ ลายประการ ตวต อยรา่ งตามภาพท่ลชื 51 ภาพท่ีืรช 51 ปุม่ปย ท่ดืรีช า้ห นหนห้าของ Section ตามภาพท่ืชล 51 ปมุ่ทป (Section background) : ใช้รเลชอกพชตั้นหลตงให้กร ตบส่รวน ซื่ึถชงสามารถใส่รเปน็ป ภาพกวไ็ ด้ร ปทป่มุ (Duplicate section) : ใชทร้ าส สาส เนา Section ปทุป่ม (Delete section) : ใช้รลบ Section ปทุป่ม : ใชย้ร ้าร ยลสาดบต ของ Section ในแนวด่ืงชลิ 42 การใชง้ช าน Google Sites

6.3. การจตดการองคปต ระกอบใน Section 6.3.ก.) การปรรบขนาดองค์ปพ ระกอบ ใช้รเม้ราส์คจตบทืล่ช เลช่ือน โดยระหวร่างปรตบขนาด จะปรากฎเสร้นกริลดเพืช่อเป็ปนแนวการปรตบขนาด ตตวอยร่าง ตามภาพทลชื่ 52 ภาพทื่ชีร 52 ภาพทื่ลช 53 เปน็ป ผลลตพธค์หลตงปรตบขนาด ภาพทรีช่ื 53 คียร ต์ลดต Alt + ⭢ / Alt + ⭠ = ขยาย/ยร่อขนาดขององค์ปค ระกอบในแนวราบ Alt + ⭡ / Alt + ⭣ = ขยาย/ยอร่ ขนาดขององค์คประกอบในแนวด่ืชลงิ 6.3.ข.) การยช้ายองคปพ์ ระกอบ ใช้รเม้ราส์คจตบทลชื่ เลช่ือน ( อยู่รดด้รานบนของกรอบองคค์ประกอบ) เพชื่อยร้ายองค์คประกอบ ตตวอยร่างตาม ภาพทลชื่ 54 ภาพทรีชื่ 54 ภาพทลชื่ 55 เปป็นผลลตพธคห์ ลงต ยาร้ ยองคป์ค ระกอบ ภาพท่ีรชื 55 43 โดย วสสันตต์ คณุค ดิลด กเศวต ([email protected])

คีรย์ตลตด = ยรา้ ยองค์ปค ระกอบไปด้รานทาร้ งขวา/ซา้ร ย ตามลาส ดตบ ⭢/⭠ = ยาร้ ยองค์คประกอบ(และ Section) ไปดาร้ นบน/ลาร่ ง ตามลสาดบต ⭡/⭣ 6.3.ค.) การเพ่พทีิมองคปพ์ ระกอบลงใน Section (เมนวูน งกลม) ดบต เบัลติ้ลคลกิล ทลื่อช งค์ปค ระกอบใน Section จะปรากฎเมนูวด งกลมตามภาพทล่ืช 56 จากนน้ัต เลอช กองคค์ประกอบทืชล่ ตอ้ร งการแทรก กค็ว ชอ (Image) , (Uoload) , (From Drive) , (Embeded) ภาพทีร่ชื 56 ภาพทืชล่ 57 เป็ปนผลลพต ธค์หลตงเพื่ิชมล องค์คประกอบลงใน Section ภาพท่ืชีร 57 6.3.ง.) การย้ชายองค์พประกอบไปใสตใ่ น Section หากมลองคค์ประกอบอยด่รูแล้รว เราสามารถยร้ายองค์คประกอบข้ราม Section ไดร้ โดยใช้รเม้ราสค์ จรบทีท่ (อยนู่ต ดาช้ นบนของกรอบองค์พประกอบ) หรชอ จรบทตที่ วร องคพป์ ระกอบ แลวร้ ลากไปวาง ยงต Section อชื่น ตามภาพท่ืลช 58 ภาพทชีร่ื 58 44 การใช้ชงาน Google Sites

ภาพทลชื่ 59 เปป็นผลลพต ธค์หลงต ยร้ายองคค์ประกอบข้าร ม Section ภาพทีรื่ช 59 โดย วสนัส ต์ต คุคณดดิลกเศวต ([email protected]) 45

46 การใช้งช าน Google Sites

บททท่ี 7 องคปต ระกอบ ชนิดน ต่คางๆ

7.1. แทรกองคปต ระกอบตคา่ งๆ เราสามารถแทรกองค์คประกอบไดร้หลากหลายชนิลดลงในหน้ราเวว็บ โดยใช้ร ปปุ่มต่ตางๆ ทชื่ล แท็วบ Insert ใน Sidebar หนา้ช แรกของ Site ตามภาพทืชล่ 60 ภาพทื่รีช 60 7.2. Textbox (ชค่องข้หอความ) ปมุ่ปท (Textbox) ใช้แร ทรกกรอบพมิล พค์ขอ้ร ความ ลงในหนร้าเว็วบ เมืช่อคลิกล ทปื่ลช ทุป่ม จะปรากฎ Textbox ในหน้าร เวว็บทนต ทล ตวต อยา่ร งตามภาพทชื่ล 61 ภาพทีืรช่ 61 48 การใชชง้ าน Google Sites

7.3. คีรยลต ตดทาจ งานกบต ขอ้ห ความ คยล คล์ ดต ตรอ่ ไปนลต้ั ใชทร้ าส งานกตบองค์คประกอบทล่ชืเปป็นข้อร ความ Ctrl + Alt + 0 = Normal text – ใสสส่ ไตลต์ Normal text ใหหก้ บัส ข้หอความททัส้งย่สอหน้าห Ctrl + Alt + 1 = Title – ใส่สสไตลต์ Title ให้หกบัส ข้อห ความทัสทง้ ยส่อหนหา้ Ctrl + Alt + 2 = Heading – ใสส่ส ไตลต์ Heading ใหหก้ ัสบขอห้ ความททัง้ส ยอ่ส หนา้ห Ctrl + Alt + 3 = Subheading – ใส่สส ไตลต์ Subheading ให้หกับส ขหอ้ ความท้ัสงท ยอส่ หนา้ห Ctrl + B = Bold Ctrl + I = Italic Ctrl + Alt + 7 = Code font – จัสดรปูร แบบขอห้ ความเป็นป แบบการเขยขี นโคดห้ Alt + Shift + 5 = Strikethrough - จดสั รรูปแบบตัสวอักส ษรเปนป็ แบบขดขี ฆ่าส Ctrl + Shift + L = Left align - จดัส ยอ่ส หนา้ห ชดิดซห้าย Ctrl + Shift + E = Center align - จสัดยอ่ส หนาห้ เขาห้ กลาง Ctrl + Shift + R = Right align - จดสั ย่อส หนา้ห ชิดดขวา Ctrl + Shift + 7 = Numbered list – ใส่ลส ิดสตต์แบบ Number Ctrl + Shift + 8 = Bulleted list – ใส่สลสิด ต์แต บบ Bulleted Ctrl + K = Insert link – สรา้ห งลิงด คต์ใหกห้ บัส ขห้อความ Ctrl + \\ = Clear format - ลาห้ งรูปร แบบตัวส อกัส ษร 7.4. Image(รปดู ภาพ) ปุทมป่ (Image) ใช้รแทรกภาพลงในหนรา้ เวบ็ว คลกลิ ทชลป่ื ปุ่มท (Image) → Upload เพชื่ออตปโหลดภาพจากคอมพวลิ เตอร์ขค องเราลงในหน้ราเวบ็ว คลลิกทืช่ลปทุป่ม (Image) → Select เพช่ือนาส ภาพจาก URL/จากการค้รนหา/จากอตลบ้ตัม/จาก Drive แทรก ลงในหน้ราเวว็บ ภาพท่ลชื 62 เปป็นตตวอยร่างของภาพทืช่อล ยรใดู่ นหนร้าเวว็บ ภาพทีชื่ร 62 โดย วสนสั ตต์ คุณค ดดลิ กเศวต ([email protected]) 49

7.5. Embed(ฝงฝั ) ปปุท่ม (Embeded) ใชฝ้ร ฝงั เน้ชตัอหาจากเวบว็ อ่ชืนๆลงในเวว็บ โดยจะระบุทเป็ปน URL หรชอ Embed code อยา่ร ง แทวก็ iframe ก็ไว ดร้ เม่ืชอคลลิกปุท่ปม (Embeded) จะปรากฎหนร้าต่ราง Embed from the web ตามภาพทลชื่ 63 ตตวอยร่างใน ภาพทืลช่ 63 เป็นป การฝฝังแท็กว iframe ทลม่ืช ลเนอตชั้ หาเปปน็ วลิดโล อจาก Youtube ภาพทืชีร่ 63 ภาพทชืล่ 64 เปป็นผลลตพธค์หลงต ฝงัฝ โคด้ร แล้วร ภาพทร่ืชี 64 50 การใชชง้ าน Google Sites