เอกสารคู่มือการใช้งาน Google Sites2

หน้า |ก การประยุกต์และพฒั นาเว็บไซตด์ ้วย Google Sites

หน้า |ก คำนำ การประยุกต์และพัฒนาเวบ็ ไซต์ด้วย Google Sites เล่มน้ี ได้แบง่ เน้ือหาออกเป็น 6 เร่ือง เพ่ือให้บุคลากรหรือผู้ที่ สนใจได้ศึกษาและได้ใช้ประกอบการสร้างเวบ็ ไซต์เพื่อเพิม่ ศักยภาพดา้ นเทคโนโลยี ซง่ึ ผู้สร้างเวบ็ ไซตน์ ้นั ต้องรวบรวมข้อมูล ตา่ งๆ จัดเป็นหมวดหมู่ ให้สอดคล้อง เพื่อความสะดวกต่อผู้เขา้ ชมหรอื ใชง้ าน งานสง่ เสริมและพัฒนาส่ือนวัตกรรม กลุ่มนเิ ทศติดตามและประเมินผลการจัดการศึกษา ไดต้ ระหนักถึงความสำคญั ตลอดจนเห็นคุณประโยชนข์ องการประยุกตแ์ ละพฒั นาเว็บไซต์ด้วย Google Sites เพื่อชว่ ยบอกขา่ วสารหรือประชาสัมพนั ธ์ ให้กบั องคก์ ร ขอขอบคุณผู้ท่ีมีส่วนเก่ยี วข้องทไ่ี ด้ช่วยใหเ้ อกสารเล่มนี้ เสร็จสมบรู ณ์ด้วยดี ซ่ึงเป็นกระบวนการทสี่ ่งผลตอ่ การพฒั นา คณุ ภาพขององค์กรที่เปน็ ทรัพยากรของชาติต่อไป นางสาวสมบรู ณ์ ลาภถาวร งานสง่ เสริมและพัฒนาสอื่ นวตั กรรม กลุม่ นเิ ทศ ตดิ ตามและประเมนิ ผลการจัดการศกึ ษา สำนกั งานเขตพ้นื ทกี่ ารศึกษาประถมศึกษาตาก เขต 2 การประยุกต์และพฒั นาเว็บไซตด์ ว้ ย Google Sites

สารบัญ หน้า |ข เร่อื ง หนา้ คำนำ ก สารบญั ข หนว่ ยท่ี 1 รูจ้ ัก Google Sites 1 1.1 แนะนำ Google Sites 3 1.2 การเข้าใช้งาน Google Sites 7 1.3 ส่วนประกอบของ Google Sites 8 1.4 แนะนำเมนูการทำงานใน Google Sites หน่วยท่ี 2 การออกแบบโครงสร้างเว็บไซต์และการสร้างเวบ็ ไซต์ 9 2.1 การออกแบบโครงสร้างเว็บ 10 2.2 การเลอื กรปู แบบการแสดงผล 12 2.3 การปรับแต่งหนา้ ตาเว็บไซต์ หน่วยที่ 3 การจัดการหนา้ เว็บไซต์และเมนูเว็บไซต์ 13 3.1 การเพมิ่ หน้าเว็บไซต์ 16 3.2 การทำสำเนาหน้าเว็บไซต์ 17 3.3 การแก้ไขชือ่ หน้าเวบ็ ไซต์และลงิ ก์เมนู 18 3.4 การดกู ารแสดงผลของเว็บไซต์ 20 3.5 การซอ่ นหน้าเวบ็ ไซตจ์ ากเมนู 21 3.6 การกำหนดหน้าเวบ็ ไซต์ให้เป็นหน้าแรก หน่วยที่ 4 การแทรกเนื้อหาในหนา้ เว็บไซต์ 22 4.1 การแทรกข้อความ 24 4.2 การแทรกรปู ภาพ 27 4.3 การฝงั โคด้ HTML ลงในหนา้ เว็บ 29 4.4 การใส่เนอ้ื หาดว้ ยการอัปโหลด หน่วยท่ี 5 การแทรกเนื้อหาจากแอปพลิเคชนั ของ Google 30 5.1 การแทรกเนื้อหาจาก Google Drive 32 5.2 การแทรก YouTube 34 5.3 การแทรกปฏทิ ิน การประยุกตแ์ ละพัฒนาเว็บไซตด์ ว้ ย Google Sites

เร่ือง หน้า |ค 5.4 การแทรกแผนที่ หน้า 5.5 การแทรก Google เอกสาร หนว่ ยท่ี 6 การเผยแพร่เวบ็ ไซต์ 36 6.1 การตั้งช่อื URL เว็บไซตส์ ำหรบั เผยแพร่ 37 6.2 การปรับแตง่ แก้ไข URL แหล่งอา้ งอิง 39 40 41 การประยุกต์และพัฒนาเว็บไซต์ด้วย Google Sites

หน้า |1 หน่วยที่ 1 ร้จู ัก Google Sites 1.1 แนะนำ Google Sites Google Sites คอื โปรแกรมออนไลนท์ ีท่ ำให้การสรา้ งเว็บไซตใ์ ห้ง่ายข้ึนเหมอื นกบั การแก้ไขเอกสารธรรมดาๆดว้ ย Google Sites สามารถรวบรวมความหลากหลายของข้อมูลในที่เดียว เช่น รวมวิดโี อ ปฏทิ ินการนำเสนอ เอกสารหรือส่งิ ท่แี นบ และข้อความ อำนวยความสะดวกให้คุณร่วมกันดู หรอื แก้ไขหน้าเวบ็ จะเปน็ กลุ่มเล็กๆ หรือทง้ั องค์กรของคุณ หรือจะทงั้ โลก เลยกไ็ ด้ รจู้ กั กูเกล้ิ ไซต์ (Google Sites) ➢ Google Sites ให้บริการครั้งแรกเมื่อเดอื นพฤษภาคม 2551 ➢ สร้างเว็บไซต์ได้สุดแสนจะง่ายดาย ใชเ้ วลาก่ีนาทีก็โชว์ผลงาน ➢ ไมจ่ ำเป็นต้องร้ภู าษาเขียนเวบ็ (HTML) ให้ปวดหวั แค่ใช้เวิร์ดพิมพง์ านเปน็ กเ็ รมิ่ ไดเ้ ลย แถมเมนูเป็น ภาษาไทยอกี ต่างหาก ➢ มีแบบเทมเพลตสำเร็จรปู ใหเ้ ลอื กมากมาย คล้ายๆ กับแบบสำเรจ็ เพาเวอร์พอยต์ ➢ สามารถแชรเ์ วบ็ ใหเ้ พื่อนๆ รว่ มสร้างสรรคไ์ ด้ ➢ เป็นระบบที่ครอบคลุม เอามาใช้ด้วยกันไดเ้ ลย เช่น อเี มล์ (Gmail) ปฏทิ นิ (Calendar) เอกสาร (Documents) ยูทูบ (YouTube) อัลบัม้ ภาพ (Picasa) แผนท่ี (Map) ฯลฯ ประโยชนข์ อง Google Sites ➢ กำหนดรปู ลักษณ์ของเว็บไซต์ของคณุ ➢ สร้างเพจย่อยเพื่อให้เนื้อหาของคุณนา่ สนใจ ➢ เลอื กประเภทเพจ, เวบ็ เพจประกาศ, ต้เู ก็บเอกสาร ➢ ใหเ้ นื้อหาในเวบ็ ของคุณ เชน่ วดิ โี อ, เอกสารออนไลน์, Picasa แสดงสไลด์ภาพถ่าย, gadgets iGoogle และไฟล์แบบออฟไลน์ในตาแหนง่ กลางหน่ึง ➢ ให้เว็บไซตข์ องคุณเปน็ สว่ นตัวหรือสาธารณะตามท่ีคณุ ต้องการ ➢ ค้นหาใน Google เนอื้ หาของเว็บไซตท์ ่ีมเี ทคโนโลยีการคน้ หา Google ➢ เรยี นรพู้ ื้นฐานของ Google เวบ็ ไซตแ์ ละเร่ิมต้นสรา้ งเวบ็ ไซต์ของคุณเองการใชง้ าน Google site ➢ Google Sites เปน็ แอปพลเิ คชันออนไลน์ที่ทาให้การสร้างเว็บไซต์ของทีมกลายเป็นเรื่องงา่ ย ➢ แกไ้ ขเอกสาร เมื่อใช้ Google Sites ผคู้ นสามารถรวบรวมขอ้ มูลท่หี ลากหลายไวใ้ นทเ่ี ดียวไดอ้ ยา่ ง รวดเร็ว ได้แก่ วดิ ีโอ ปฏทิ นิ งานนาเสนอ ไฟล์แนบ และข้อความ และสามารถใชง้ านร่วมกบั กลุม่ เลก็ ๆ ทงั้ องค์กรหรอื ท้ังโลก เพ่อื ดูหรือแกไ้ ขได้อยา่ งง่ายดาย ➢ Free Accountไวท้ 1ี่ 00 MB ➢ จำนวนหนา้ เวบ็ เพจไม่จำกดั การใชง้ าน Google site การประยุกต์และพฒั นาเว็บไซต์ด้วย Google Sites

หน้า |2 ขอ้ จำกัด ของ Google Sites ➢ พ้นื ทีจ่ ัดเกบ็ 10 Gb* (GB=กิกะไบต)์ ➢ ยังมีปัญหาเรอ่ื งการใช้งานรว่ มกบั script อ่นื ๆ ➢ เวบ็ ไซต์อยูภ่ ายใต้ Google ทำให้ domain name ยาว ➢ ทำไดเ้ ฉพาะเมื่อต่ออนิ เตอรเ์ น็ตเทา่ นั้น ➢ ขนาดไฟล์สูงสุด 10 MB (MB=เมกกะไบต์) *** เฉพาะพืน้ ท่เี วบ็ ไซต์ไม่เกิน 100 MB แตห่ ากรวมเป็นสมาชิกบรกิ ารอ่นื ๆ ของกูเกล้ิ ตัวอนื่ ๆ เช่น ยูทูบ(YouTube), ไดรฟ์ (Drive), ปฏทิ นิ (Calendar), อลั บ้ัมภาพ (Picasa) แลว้ ไมเ่ กิน 10 GB การประยุกตแ์ ละพฒั นาเว็บไซตด์ ว้ ย Google Sites

หน้า |3 1.2 การเข้าใช้งาน Google Sites 1.คลกิ เข้าสเู่ วบ็ ไซต์ https://www.google.com 2. คลกิ ที่ ลงช่ือเขา้ สู่ระบบ การประยุกตแ์ ละพฒั นาเว็บไซต์ดว้ ย Google Sites

หน้า |4 3..ใส่อีเมล์และพาสเวริ ด์ ของ Gmail 4. คลิกที่ปุม่ 9 จดุ 5. คลกิ เลือก ไดรฟ์ การประยุกต์และพัฒนาเว็บไซตด์ ว้ ย Google Sites

หน้า |5 5. คลกิ ท่ี ใหม่ 6. เลือกเพมิ่ เตมิ และคลิกเลือก Google Sites การประยุกต์และพฒั นาเว็บไซต์ด้วย Google Sites

หน้า |6 หนา้ ต่างของ Google Sites การประยุกตแ์ ละพฒั นาเว็บไซตด์ ว้ ย Google Sites

หน้า |7 1.3 ส่วนประกอบของ Google Sites หมายเลข 1 ส่วนของชอื่ เวบ็ ไซต์ หมายเลข 2 ส่วนแสดงปมุ่ คำส่งั ในการทำงาน หมายเลข 3 สว่ นแสดงเมนูในการเพ่ิมข้อมูล การสร้างหน้าเวบ็ ใหม่ และ การปรับเปลย่ี นรปู แบบเวบ็ ไซต์ หมายเลข 4 ส่วนพ้นื ทกี่ ารทำงานและการแสดงผลของเว็บไซต์ การประยุกต์และพัฒนาเว็บไซตด์ ้วย Google Sites

หน้า |8 1.4 แนะนำเมนูการทำงานใน Google Sites ส่วนของการใชง้ านในหนา้ จอ Google Sites ส่วนของการใช้งานในหนา้ จอการทำงานของการสรา้ งเว็บไซต์ การประยุกต์และพัฒนาเว็บไซต์ดว้ ย Google Sites

หน้า |9 หนว่ ยท่ี 2 การออกแบบโครงสรา้ งเว็บไซตแ์ ละการสร้างเวบ็ ไซต์ 2.1 การออกแบบโครงสรา้ งเว็บ ในการออกแบบโครงสร้างเว็บไซต์ สำหรบั นำไปใช้ในการจดั ทำเวบ็ ไซตด์ ้วย Google Sites ผู้ใช้งานตอ้ งยดึ หลกั ในการ ออกแบบโครงสรา้ งดังน้ี • หวั ข้อหลัก (ลำดับท่ี 1) ที่สรา้ งจะถูกนำไปใช้สำหรับเปน็ เมนใู นการแสดงผลในหน้าเวบ็ ไซต์ • ในสว่ นของหวั ข้อย่อยหรือเนอื้ หาย่อยในลำดบั ถดั ไปจะแสดงผลเป็นลำดับย่อยลงไปในแต่ละระดบั • สามารถสร้างหวั ข้อย่อยหรือเนือ้ หาย่อยได้ ไมเ่ กนิ 4 ระดบั ตัวอย่างการออกแบบโครงสร้างสำหรับจดั ทำเป็นเวบ็ ไซต์แฟม้ สะสมผลงานหรือเว็บไซตส์ ว่ นบคุ คล การประยุกตแ์ ละพฒั นาเว็บไซต์ด้วย Google Sites

ห น ้ า | 10 2.2 การเลือกรูปแบบการแสดงผล คณุ สมบัตใิ นการเลือกรูปแบบการแสดงผลเว็บไซต์ (Themes) ทส่ี รา้ งด้วย Google sites ➢ เลอื กรูปแบบเว็บไซต์ได้ 6 รูปแบบ ➢ สามารถปรบั แต่งสีในแตล่ ะรูปแบบได้ตามตอ้ งการ ➢ สามารถเปลยี่ นรปู แบบของตัวอกั ษรในแตล่ ะรูปแบบได้ การประยุกต์และพฒั นาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 11 การประยุกตแ์ ละพฒั นาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 12 2.3 การปรบั แตง่ หน้าตาเว็บไซต์ ➢ สามารถเพิ่มโลโก้ให้กบั เว็บไซต์ได้ ➢ สามารถปรบั แต่งเวบ็ ไซต์ได้ 2 ส่วนคือสว่ นหัวและสว่ นทา้ ยเวบ็ ไซต์ ➢ สว่ นหวั ของเว็บไซต์สามารถเปล่ยี นประเภทของการแสดงผลได้ ดังนี้ o แสดงแบบหน้าปก o แสดงแบบแบนเนอร์ขนาดใหญ่ o แสดงแบบแบนเนอร์ o แสดงเฉพาะชอื่ ➢ หนา้ เวบ็ ไซตแ์ ต่ละหน้าสามารถปรับแต่งส่วนหัวได้อย่างอสิ ระ ➢ การปรับแต่งเวบ็ ไซต์ในส่วนท้ายจะมีผลกบั เว็บไซตใ์ นทุก ๆ หน้า ➢ สว่ นทา้ ยเว็บไซต์สามารถปิดเพ่ือไมใ่ ห้แสดงผลในหน้าเว็บท่ีตอ้ งการได้ การประยุกต์และพัฒนาเว็บไซต์ด้วย Google Sites

ห น ้ า | 13 หนว่ ยที่ 3 การจดั การหนา้ เว็บไซตแ์ ละเมนูเว็บไซต์ 3.1 การเพิ่มหน้าเว็บไซต์ การเพิม่ หนา้ เว็บวธิ ที ี่ 1 ในการเพิ่มหน้าวิธีนจี้ ะเป็นการเพ่ิมหนา้ เว็บไซตใ์ หม่ โดยหน้าเวบ็ ทเ่ี พิม่ จะเปน็ เวบ็ ไซตห์ ลักและถูกนำไปสรา้ งเป็นเมนู ในหนา้ เว็บไซต์ โดยมขี ัน้ ตอนดังนี้ 1. ใหค้ ลกิ เลือกแทบเมนู หน้าเวบ็ ด้านบนขวา 2. คลิกเมนูใหมร่ ปู เคร่อื งหมาย + มมุ ลา่ งขวา 3. คลิกเลือก หน้าเว็บใหม่ 4. ในกรณที ตี่ ้องการสรา้ งเมนูเพอื่ เชื่อมโยงไปยังหนา้ เวบ็ ไซต์ทีต่ ้องการให้คลกิ เลอื ก ลิงก์ใหม่ จากนนั้ ใหร้ ะบุ URL เวบ็ ไซต์ทตี่ ้องการจัดทำเป็นเมนู ข้ันตอนที่ 5 ป้อนชื่อหน้าเว็บไซตใ์ หม่ ข้นั ตอนที่ 6 คลกิ เสร็จส้นิ การประยุกต์และพฒั นาเว็บไซตด์ ้วย Google Sites

ห น ้ า | 14 การเพม่ิ หน้าเว็บวธิ ที ี่2 สำหรับการเพ่ิมหน้าเว็บในวิธนี ี้ จะเป็นวธิ กี ารในการเพมิ่ หนา้ เว็บไซต์ย่อยของเน้อื หาในหน้าหลกั โดยการเพ่ิมหนา้ เว็บ วธิ นี ้จี ะเป็นการสร้างในส่วนของหนา้ เว็บยอ่ ยลงไปเรื่อยๆ โดยสามารถสร้างย่อยได้ 4 ลำดบั โดยมวี ิธีการดังน้ี 1. คลิกปุ่ม สามจดุ ดา้ นหลังหน้าเวบ็ ไซต์หลกั ท่ีต้องการสร้างหนา้ เวบ็ ย่อย 2. คลกิ เลอื กเมนู เพิม่ หนา้ ย่อย 3. ปอ้ นชอื่ หน้าเว็บยอ่ ย 4. คลิก เสร็จส้นิ การประยุกตแ์ ละพฒั นาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 15 หลกั จากเพิ่มหนา้ เวบ็ เรยี บร้อยแล้วในสว่ นของเมนูหนา้ เว็บและการแสดงผลของเว็บไซต์จะแสดงผลดงั รูป การประยุกต์และพัฒนาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 16 3.2 การทำสำเนาหน้าเว็บไซต์ การสำเนาหนา้ เว็บ จะเปน็ วิธกี ารในการคดั ลอกหนา้ เว็บไซต์ทต่ี ้องการ เช่น การทำสำเนาหนา้ เวบ็ ท่มี ีการจัดโครงสร้าง การแสดงผลเรยี บร้อยแลว้ โดยหน้าเวบ็ ท่ไี ด้เราเพียงเข้าไปแก้ไขในสว่ นของเน้ือหากจ็ ะชว่ ยใหเ้ ราสามารถสร้างเว็บไซตไ์ ด้ รวดเร็วขึ้น โดยมวี ิธีการดงั น้ี 1. คลิกป่มุ สามจุด ดา้ นหลังหน้าเวบ็ ไซต์ทีต่ ้องการทำสำเนา 2. คลิกเลือกเมนู ทำสำเนาหนา้ 3. ป้อนชื่อเวบ็ ไซต์ใหมท่ ตี่ ้องการ 4. คลิก เสรจ็ สิ้น การประยุกตแ์ ละพัฒนาเว็บไซตด์ ว้ ย Google Sites

ห น ้ า | 17 3.3 การแกไ้ ขช่ือหน้าเวบ็ ไซตแ์ ละลิงกเ์ มนู ข้นั ตอนการแก้ไขช่ือหน้าเว็บไซตแ์ ละลงิ ก์เมนู ในกรณที ี่ตอ้ งการแกไ้ ขช่อื หน้าเวบ็ ไซต์หรือเปลี่ยนทีอ่ ยู่ของลิงก์เมนู สามารถดำเนนิ การไดด้ งั นี้ 1. คลิกปมุ่ สามจดุ ด้านหลงั หนา้ เว็บไซต์ท่ีต้องการทำสำเนา 2. คลกิ เลอื กเมนู คุณสมบัติ 3. ป้อนชื่อเว็บไซต์ใหมท่ ่ีต้องการ 4. ปอ้ นเส้นทาง link ทีต่ อ้ งการนำไปใช้ในการเข้าถึง ดงั ตวั อย่าง ป้อน Pretest จะได้ URL หนา้ เวบ็ คือ https://sites.google.com/ชอ่ื เวบ็ ไซต์/Pretest 5. คลกิ เสร็จส้ิน การประยุกต์และพฒั นาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 18 3.4 การดูการแสดงผลของเวบ็ ไซต์ ขั้นตอนการดกู ารแสดงผลของเว็บไซต์ เริ่มต้นใหค้ ลิกเลือกเมนู แสดงตวั อยา่ ง โดยเว็บไซต์ท่สี ร้างสามารถแสดงผลได้ในอุปกรณ์ต่าง ๆ ได้ ดงั น้ี ➢ โทรศพั ท์มือถอื การประยุกตแ์ ละพฒั นาเว็บไซต์ด้วย Google Sites

ห น ้ า | 19 ➢ แท็บเลต็ ➢ หนา้ จอขนาดใหญ่ การประยุกตแ์ ละพฒั นาเว็บไซตด์ ว้ ย Google Sites

ห น ้ า | 20 3.5 การซ่อนหนา้ เวบ็ ไซต์จากเมนู ขน้ั ตอนการซ่อนหน้าเวบ็ ไซตจ์ ากเมนู การซ่อนหนา้ เว็บจากการนำทาง ใชก้ รณีที่ไมต่ ้องการให้หน้าเวบ็ ไปแสดงเปน็ เมนูในหนา้ เวบ็ ไซต์ โดยมีวธิ กี ารดงั นี้ 1. คลิกปุ่ม สามจุด ด้านหลังเว็บไซตท์ ีต่ ้องการซอ่ นจากเมนู 2. คลกิ เลือกเมนู ซ่อนจากการนำทาง ผลท่ไี ด้จากการซ่อนหน้าเว็บไซต์ การประยุกต์และพฒั นาเว็บไซตด์ ว้ ย Google Sites

ห น ้ า | 21 3.6 การกำหนดหน้าเว็บไซต์ใหเ้ ป็นหนา้ แรก ขนั้ ตอนการกำหนดหน้าเว็บไซตใ์ ห้เป็นหนา้ แรก 1. คลกิ ปมุ่ สามจุด ดา้ นหลงั หนา้ เวบ็ ไซต์ทีต่ ้องการทำสำเนา 2. คลิกเลอื กเมนู ทำใหเ้ ป็นหน้าแรก การประยุกต์และพฒั นาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 22 หน่วยท่ี 4 การแทรกเน้อื หาในหนา้ เวบ็ ไซต์ 4.1 การแทรกข้อความ ขน้ั ตอนการแทรกข้อความ วธิ ีท่ี 1 แทรกข้อความผ่าน เมนูแทรก โดยการคลิกเลือกแทบ็ เมนูแทรก จากนั้นเลือกเมนู ชอ่ งขอ้ ความ วิธีที่ 2 ดับเบลิ คลิกตรงตำแหนง่ พื้นท่ีการทำงานเพื่อเรียกใชง้ านเมนู จากนัน้ เลือก เมนูข้อความ การประยุกต์และพัฒนาเว็บไซตด์ ้วย Google Sites

ห น ้ า | 23 เครื่องมือสำหรับแทรกข้อความในรปู แบบต่างๆ • ข้อความปกติ • ขอ้ ความประเภทช่ือเรือ่ ง • ข้อความประเภทสว่ นหัว • ขอ้ ความประเภทหวั ข้อย่อย • ข้อความขนาดเล็ก การประยุกตแ์ ละพัฒนาเว็บไซตด์ ว้ ย Google Sites

ห น ้ า | 24 4.2 การแทรกรปู ภาพ ข้ันตอนการแทรกรปู ภาพ วิธที ่ี 1 แทรกรปู ภาพผา่ น เมนแู ทรก โดยการคลกิ เลือกแท็บเมนูแทรก จากนน้ั เลือก เมนูรปู ภาพ => คลิกเลอื ก วธิ ที ่ี 2 ดับเบลิ คลิกตรงตำแหนง่ พ้นื ที่การทำงาน เพ่ือเรยี กใช้งานเมนู จากนั้นเลอื ก เมนูรูปภาพ การประยุกต์และพัฒนาเว็บไซตด์ ว้ ย Google Sites

ห น ้ า | 25 หน้าจอสำหรับแทรกรูปภาพในแบบตา่ งๆ • แทรกรปู ภาพตาม URL การประยุกตแ์ ละพัฒนาเว็บไซตด์ ้วย Google Sites

ห น ้ า | 26 • แทรกรูปภาพโดยการคน้ หาจาก Google • แทรกรปู ภาพจากอัลบ้ัมของตัวเอง การประยุกต์และพัฒนาเว็บไซตด์ ว้ ย Google Sites

ห น ้ า | 27 • แทรกรปู ภาพจาก Google Drive 4.3 การฝงั โค้ด HTML ลงในหนา้ เว็บ วิธที ี่ 1 ฝงั โคด้ HTML ลงในหน้าเวบ็ ผา่ นเมนแู ทรก โดยการคลกิ เลือกแทบ็ เมนูแทรก จากน้ันเลอื กเมนูฝัง การประยุกต์และพฒั นาเว็บไซตด์ ว้ ย Google Sites

ห น ้ า | 28 วธิ ที ่ี 2 ดับเบลิ คลกิ ตรงตำแหน่งพน้ื ท่ีการทำงาน เพื่อเรียกใช้งานเมนู จากนัน้ เลือกเมนูฝัง หนา้ จอสำหรบั ฝังโค้ด HTML ในแบบต่าง ๆ • การฝังโคด้ ผา่ น URL การประยุกตแ์ ละพฒั นาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 29 • การฝังโค้ดผา่ นโค้ด HTML 4.4 การใส่เน้อื หาด้วยการอัปโหลด ข้นั ตอนการใส่เนือ้ หาด้วยการอัปโหลด วธิ ีที่ 1 แทรกรูปภาพผา่ น เมนแู ทรก โดยการคลิกเลือกแท็บเมนแู ทรก จากนัน้ เลือก เมนรู ปู ภาพ => คลกิ อัปโหลด การประยุกตแ์ ละพฒั นาเว็บไซต์ด้วย Google Sites

ห น ้ า | 30 วิธที ่ี 2 ดับเบิลคลิกตรงตำแหนง่ พน้ื ที่การทำงานเพ่ือเรยี กใชง้ านเมนู จากน้นั เลอื ก เมนูอัปโหลด หนว่ ยท่ี 5 การแทรกเนื้อหาจากแอปพลเิ คชนั ของ Google 5.1 การแทรกเนื้อหาจาก Google Drive ข้ันตอนการแทรกเนือ้ หาจาก Google Drive 1. ที่เมนูแทรก คลกิ เลอื ก จาก Drive หรือ ดับเบิลคลิกตรงตำแหน่งพนื้ ท่กี ารทำงาน เพื่อเรยี กใช้งานเมนู จากน้ัน เลือก จาก Drive การประยุกต์และพฒั นาเว็บไซต์ด้วย Google Sites

ห น ้ า | 31 2. เลือกตำแหน่งการแสดงผลขอ้ มูใน Drive 3. คลกิ เลอื กโฟลเดอร์ที่ต้องการแทรกในหนา้ เวบ็ 4. คลกิ ปุ่ม แทรก ทง้ั นีส้ ามารถกำหนดรปู แบบการแสดงผลได้ 2 รปู แบบ คือ • แสดงแบบมุมมองรายการ การประยุกต์และพฒั นาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 32 • แสดงแบบมมุ มองตาราง 5.2 การแทรก YouTube ขน้ั ตอนการแทรก YouTube 1. ท่ีเมนแู ทรก คลกิ เลือก YouTube การประยุกต์และพฒั นาเว็บไซตด์ ว้ ย Google Sites

ห น ้ า | 33 2. เลอื กไฟลว์ ดิ โี อจาก YouTube โดยสามารถเลือกได้จากการคน้ หาวิดีโอใน YouTube หรือ ไฟลว์ ดิ โี อท่ไี ด้อัปโหลดไว้ ทง้ั นส้ี ามารถกำหนดรูปแบบการแสดงผลได้ ดังนี้ • ตง้ั คา่ การซ่อนปุ่มควบคุมการเล่น • เลอื กรูปแบบสีของแถบแสดงความคบื หน้า • ต้ังคา่ การอนุญาตให้เปดิ วดิ ีโอขยายเต็มหนา้ จอ การประยุกต์และพฒั นาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 34 5.3 การแทรกปฏิทิน ขั้นตอนการแทรกปฏิทิน 1. ทเี่ มนแู ทรก คลิกเลือก ปฏิทิน 2. คลกิ เลอื กปฏิทินท่ตี อ้ งการแทรกลงในหน้าเวบ็ ไซต์ 3. คลกิ ปุ่มแทรก การประยุกตแ์ ละพัฒนาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 35 ท้ังนีส้ ามารถกำหนดรูปแบบการแสดงผลได้ ดงั นี้ • ตง้ั ค่าการแสดงชื่อเรื่อง (ช่อื ปฏิทิน) • ตงั้ ค่าการแสดงวนั ที่ • ต้ังค่าการแสดงปมุ่ นำทาง • ตง้ั คา่ การแสดงเขตเวลาของปฏทิ ินท่ีตั้งคา่ ไว้ • ต้ังค่าเพอื่ ให้แสดงเขตเวลาของผทู้ เี่ ข้ามาดปู ฏทิ ินในหน้าเวบ็ ไซต์ • ตั้งคา่ การแสดงการดตู วั เลือก • เลอื กโหมดมุมมองในการแสดงผลของปฏิทิน โดยสามารถเลือกได้ 3แบบ คือ ▪ แสดงมมุ มองแบบเดือน ▪ แสดงมมุ มองแบบสัปดาห์ หรือ ▪ แสดงเฉพาะกำหนดการ การประยุกตแ์ ละพัฒนาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 36 5.4 การแทรกแผนที่ ขนั้ ตอนการแทรกแผนที่ 1. ทีเ่ มนแู ทรก คลิกเลอื ก แผนที่ 2. คลิกเลอื กแผนทีท่ ี่ต้องการแทรกลงในหน้าเว็บไซต์ o เลือกแทรกจาก Google Maps โดยตรง หรือ o เลือกจากแผนที่ท่ีเคยทำไว้ใน Google Maps 3. คลิกปมุ่ แทรก 4. คลิกเมนูเลอื ก การประยุกตแ์ ละพฒั นาเว็บไซตด์ ้วย Google Sites

ห น ้ า | 37 5.5 การแทรก Google เอกสาร ขั้นตอนการแทรก Google เอกสาร ในการแทรกไฟลเ์ อกสารของ Google ไม่วา่ จะเป็น เอกสาร สไลด์ ชีต ฟอร์ม หรือแผนภูมิ จะมลี ักษณะการทำงาน เช่นเดียวกันดงั น้ี 1. ที่เมนูแทรก คลกิ เลอื กเอกสารท่ตี ้องการแทรกลงในหนา้ เว็บไซต์ 2. คลิกเลือกเอกสารที่ตอ้ งการแทรกลงในหนา้ เว็บไซต์ 3. คลกิ ปุ่มแทรก การประยุกตแ์ ละพัฒนาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 38 สำหรบั เอกสารทีส่ ามารถตง้ั ค่าเพม่ิ เติมได้มี 2 รูปแบบคือ • เอกสารท่ีแทรกดว้ ย Google สไลด์ สามารถตง้ั ค่าได้ ดังนี้ ▪ กำหนดใหม้ ีการแสดงผลของสไลด์ โดยใหเ้ รม่ิ ตน้ การนำเสนอแบบอตั โนมัติ ▪ กำหนดใหส้ ไลดม์ ีการเล่นวนซ้ำ ▪ กำหนดระยะเวลาเพ่ือหนว่ งเวลาใหก้ ับสไลด์ ▪ กำหนดหนา้ สไลด์เริ่มต้น • เอกสารท่ีแทรกดว้ ย Google ชตี สามารถต้งั ค่าเพอื่ เลือกการแสดงผลของ แผ่นงานท่ีอยู่ในไฟลเ์ อกสารทีแ่ ทรกได้ การประยุกต์และพฒั นาเว็บไซต์ดว้ ย Google Sites

ห น ้ า | 39 หน่วยท่ี 6 การเผยแพรเ่ ว็บไซต์ 6.1 การตัง้ ชื่อ URL เว็บไซต์สำหรับเผยแพร่ ขัน้ ตอนการต้งั ช่อื URL เว็บไซต์สำหรบั เผยแพร่ ในการแทรกไฟล์เอกสารของ Google ไมว่ ่าจะเป็น เอกสาร สไลด์ ชตี ฟอร์ม หรอื แผนภมู ิ จะมลี กั ษณะการทำงานเชน่ เดยี วกัน ดังนี้ 1. คลิกเลอื กเมนู เผยแพร่ 2. ปอ้ นชือ่ ที่อยูเ่ วบ็ ไซต์ (URL) โดยชอื่ ท่ใี ชง้ านไดจ้ ะมีเครื่องหมายถกู อยูด่ ้านหลัง 3. คลกิ ป่มุ เผยแพร่ ขอ้ กำหนดในการต้งั ช่ือเว็บไซต์ • ชือ่ URL เว็บไซตห์ า้ มซ้ำกับชือ่ เว็บท่มี ีอยู่ • ชือ่ ทก่ี ำหนดต้องเปน็ ภาษาอังกฤษ • ชื่อต้องมคี วามยาวอยา่ งน้อย 3 ตัวอักษร • ชอื่ ทีต่ ้งั สามารถใช้ไดเ้ ฉพาะตัวอักษรพิมพเ์ ลก็ ตัวเลข และเครื่องหมายขดี กลาง การประยุกตแ์ ละพัฒนาเว็บไซตด์ ้วย Google Sites

ห น ้ า | 40 6.2 การปรับแตง่ แกไ้ ข URL ขั้นตอนการกำหนดสทิ ธิ์ในการเข้าชมเวบ็ ไซต์ 1. คลิกเลอื กเมนู แชร์กบั ผู้อื่น 2. ป้อนชอ่ื หรือที่อยู่อเี มลของบคุ คลทต่ี ้องการแชรเ์ ว็บไซต์ พร้อมระบุสิทธใ์ิ นการเขา้ ถึงเว็บไซต์ โดยสามารถกำหนดได้ ดังนี้ ▪ แก้ไขได้ ▪ ดูรายการทีเ่ ผยแพรไ่ ด้ 3. กรณีทต่ี ้องการตั้งคา่ การเผยแพร่ของเวบ็ ไซต์ สามารถคลิกทล่ี ิงก์ เปลี่ยน เพ่ือเข้าไปแก้ไขการต้ังคา่ เผยแพร่เว็บ โดยสามารถกำหนดได้ดังน้ี ▪ ทกุ คนจะค้นหาและดเู วอรช์ ันทเ่ี ผยแพร่ได้ ▪ ทุกคนใน หน่วยงาน/องค์กร จะคน้ หาและดูเวอรช์ ันที่เผยแพรไ่ ด้ (กำหนดได้เฉพาะบัญชีของ หนว่ ยงาน) ▪ บคุ คลท่ีระบจุ ะดูไดเ้ ม่ือเผยแพร่แลว้ 4. หลงั จากตัง้ ค่าเรยี บร้อยแล้ว คลกิ ปุ่ม เสรจ็ ส้นิ การประยุกต์และพฒั นาเว็บไซตด์ ว้ ย Google Sites

ห น ้ า | 41 แหล่งอา้ งอิง https://docs.google.com/document/preview?hgd=1&id=172X_T9- ylDNjMcClTHWU0SblatcvJz2tDzUXA4XcIuQ# การประยุกตแ์ ละพัฒนาเว็บไซตด์ ว้ ย Google Sites

ห น ้ า | 42 การประยุกตแ์ ละพฒั นาเว็บไซต์ดว้ ย Google Sites