คู่มือการสร้างเว็บไซต์ด้วย Google Sites

คมู ือการสรา งเว็บไซตดวย Google Sites ศูนยบรกิ ารคอมพิวเตอร คณะเศรษฐศาสตร จฬุ าลงกรณมหาวทิ ยาลยั วันทสี่ รางเอกสาร: 3 เมษายน พ.ศ. 2562 ผูเขียน: นาย ธรี พนั ธ คําขันธ

สารบญั Google Sites คอื อะไร ____________________________________________________________________________2 ขน้ั ตอนการออกแบบโครงสรางเวบ็ ไซต _________________________________________________________________3 ขน้ั ตอนการสรางเวบ็ ไซตใ หม ________________________________________________________________________4 ขน้ั ตอนการตั้งชอ่ื ไชต ______________________________________________________________________________5 ขั้นตอนการเพ่ิมหนาเพจ____________________________________________________________________________ 7 ขั้นตอนการเลือกตรีมของเวบ็ ไซต _____________________________________________________________________9 ขนั้ ตอนการสรางเนอ้ื หาในเว็บไซต____________________________________________________________________10 ขน้ั ตอนการเผยแพรเว็บไซต ________________________________________________________________________13 1

Google Sites คืออะไร กูเก้ลิ ไซต Google Sites ใหบริการครั้งแรกเมื่อเดือนพฤษภาคม 2551 Google Sites คอื โปรแกรมของ Google ที่ ใหบรกิ ารสรางเวบ็ ไซตฟรี สามารถสรางเว็บไซตไดง าย ปรับแตงรปู ลกั ษณได สามารถรวบรวมความหลากหลายของขอมูล ไวในทเ่ี ดียว เชน วดิ ีโอ, ปฏทิ ิน, เอกสาร อื่นๆ สามารถนํามาแทรกในหนา เวบ็ เพจได ใหไดใ ชง านไดงาย ทําใหชวยอํานวย ความสะดวกไดเ ปนอยางมาก จดุ เดน ของ Google Sites • ใหบ ริการฟรี ไมเ สียคา ใชจาย • พื้นที่จัดเก็บขอมูลมีพืน้ ทใ่ี หบริการ 10 GB. • มี Gadget มากมาย • สามารถเผยแพรขอ มูลทเ่ี ปน ประโยชน และเปนความรู หรอื บทเรียน อะไรอีกหลายๆอยา งไดในSITE ได • เปนระบบท่ีครอบคลมุ เอามาใชดว ยกนั ไดเลย เชน อเี มล (Gmail) ปฏทิ ิน (Calendar) เอกสาร (Documents) ยทู ูบ (YouTube) อัลบมั้ ภาพ (Picasa) แผนท่ี (Map) ฯลฯ ขอ เสียของ Google Sites • ใชเ ทมเพลตที่ออกแบบเองไมได ไมส ามารถใชเปนเว็บฐานขอมลู ได ปรับแตงไดเทา ท่ีกูเกล้ิ ไซตม ีให • เวบ็ ไซตเปนของเราแตอยภู ายใตการดแู ลของกูเกล้ิ จงึ ทาํ ใหชอ่ื ยาว • ใชง านรวมกับ CSS ทีอ่ อกแบบเองไมได ยงั มปี ญหาเรื่องการใชงานรว มกบั script อนื่ ๆ • ทาํ ไดเฉพาะเมื่อตออนิ เตอรเ น็ตเทานัน้ การออกแบบโครงสรางเว็บไซต 2

เริม่ ตน การออกแบบโครงสรางเวบ็ ไซต คือการทาํ โครงสรา งเว็บไซตทจ่ี ะพัฒนา เพือ่ ทจี่ ะไดท ราบถงึ แนวคิดในการพัฒนา ออกมาท้ังหมดวามีอะไรบาง และดําเนินการพฒั นาตามท่ีไดอ อกแบบไว o ออกแบบโครงสรา งเวบ็ ไซต www.econ.com หนาแรก เกี่ ยวกบั เรา โครงสรางองคก ร บริการของเรา ติดตอเรา ประวตั ิหนว ยงาน บุคลากร ดาวโหลด วสิ ัยทศั น o ออกแบบหนา เวบ็ เพจ การออกแบบหนาจอ คือการออกแบบหนา จอ ตามแนวคิดที่ไดเ ขยี นไวในโครงสรางเวบ็ ไซต เพือ่ แสดงเปนผลลพั ธตามท่ี ไดว างแผนไว สว นเมนูเว็บไซต ใสช่ือเวบ็ ไซต ใสร ูปภาพ ใสเนอื้ หาขอมูลในหนา เพจ ใสข อมลู 3

ขั้นตอนการสรางเวบ็ ไซตใหม • สมคั รเขาใชง าน โดยเขาไปที่ URL พิมพ https://sites.google.com/ • แลวลงช่ือเขาใช Gmail โดยกรอก Email และ Password คลิกปุม “ลงชอื่ เขาใชง าน” • ถาใชเมลจ ฬุ าฯ ก็เขาระบบ www.google.com • แลว ลงชอื่ เขา ใชโ ดยกรอก Email และ Password (ท่ีไอทีจุฬาฯออกให ) คลิกปุม “ลงชื่อเขา ใชงาน” • มาใชงานครัง้ แรก โดยเขา ไปที่ URL พิมพ https://sites.google.com/ ก็จะมไี อคอล Sites โชวขนึ้ มาพรอมใชง าน 4

• ใหเ ราเลอื กคลกิ๊ ที่ไอคอล Sites เพอ่ื ไปหนา ทีส่ รา งเวบ็ ไซต • การเลือกสรางเวบ็ ไซตมีดว ยกัน 2 แบบ 1. สรางไซตแ บบใหม 2. สรางไซตแบบคลาสสคิ แบบเกา • เลือกไซตแบบใหม เขา ไปคลก๊ิ ทป่ี มุ Sites • คล๊กิ ตามลูกศรชี้ สรา งเว็บไซตใหม 5

ขัน้ ตอนการต้งั ช่ือเวบ็ ไซต การตั้งช่อื เวบ็ ไซต (title) เราสรา งหนาเพจขนึ้ มา สาหรบั สว นของตาแหนงไซต google sites จะทาํ การตั้งใหโดยอตั โนมัติ • การสรางหนา แรกเพจของเว็บไซต 1. ใสช ือ่ ไซตของเรา ช่ือเว็บใหส อื่ ถึงขอ มูลเวบ็ ไซต เราอาจจะมกี ารสรางหลายเว็บในพน้ื ท่เี ก็บของเรา 2. ใสชื่อขอ มลู หนาเพจของเรา 1 2 ข้ันตอนการเพ่มิ หนาเพจเว็บไซต • แถบเมนูและฟงกช นั่ ทใี่ ชเพ่ิมลูกเลนใหก บั เว็บไซต รวมไปถึง Gadget ตางๆและเคร่อื งมือในการจดั การหนา เว็บ 6

• เมนแู ทรก เปนเมนทู ี่ควบคุมเก่ยี วกับการใชม ีเดยี เชน การใสร ูปภาพ ลิงก วดิ ิโอ แผนท่ี ปฏทิ นิ และ gadget ตา งๆ จงึ ทาํ ใหเ มนูนี้ ถูกใชงานบอยทส่ี ดุ • สรางเมนูหนาเพจ 1. เร่ิมตนสรา งเมนูหนาเพจ หนาเว็บ โดยคลิกทีป่ มุ ดา นบนของหนาจอเมนูมมุ ดานขวาหนาเว็บ 7

2. เลือกดา นลางคาํ วา สรางหนาเวบ็ ใหม และเมนหู นาเพจ เม่อื เปดหนา สรา งเพจใหมขึน้ มาแลว กรอกชื่อ ตั้งชื่อหนา เว็บเพจ เมนู เลอื กตําแหนงเมนูท่ีตองการ 1 2 • การใชง านธมี Theme Google Sites ใหเราเลอื กใชต ามที่มีใหเ ทานน้ั ไมสามารถเพ่ิมหรอื เองได 8

ขั้นตอนการสรา งเนื้อหาในเว็บไซต 9

• การออกแบบเอกสาร จะใสรูปหรือขอความเน้ือหา ทําไดตามรูปแบบท่ี Google Sites กาํ หนดมาใหเราเลือกและ วา งตามจุดท่ีเราตองการ ใสเนื้อขอมูลและรปู ภาพ การออกแบบ • การใสร ูปภาพ สามารถเลือกอัพโหลดทรี่ ปู ภาพท่ีตองการจะใสร ปู หรือภาพท่ี Google Sites มีใหและปรบั ขนาด ของภาพไดตามท่เี ราตอ งการ 10

• การสรา งลิงคในเว็บไซต เลือกขอ ความลากมาวางไวต ามตําแหนงท่ตี องการ ใสขอ มูลเนอ้ื หาท่ตี องการลงิ ค แลว เลอื ก URL เว็บท่ีตอ งการลิงคไปหา ชองขอ ความ ระบบจองหองออนไลน http://www.com.econ.chula.a • การเชอื่ มขอมูลจากไดรฟ เลือกแบบฟอรมการประเมิน หรอื แบบฟอรม ทเ่ี รามีในไดรฟเอามาแทรกลงในหนาเพจ ของเราไดเ ลย แบบฟอรสาํ รวจ • การสรา งวดี โี อ เลอื กวดิ ีโอจากท่ีเอาอัพโหลดเองหรือเลือก Youtube เอามาแทรกลงในหนา เพจเราไดเลย 11

youtube • การสรา งแผนที่ เลอื กแผนท่ีจาก Google Map ไดเ ขา ใชรว มกนั ไดเ ลย แผนที่ 12

• การสรา งปฏิทนิ เลือกสรางใชร ว มกบั ปฏทิ นิ จาก Google Calendar แทรกเขามาในหนาเพจปรับขนาดให เหมาะสม ปฏิทิน ขั้นตอนการเผยแพรเว็บไซต • การแชรใชง านรว มกบั ผูอน่ื การกาํ หนดสทิ ธผ์ิ ทู ี่มีสทิ ธิ์เขาถึงในการใชเวบ็ ไซต หรอื ผทู ่ีทํางานรวมกนั เราสามารถ เพ่มิ อเี มลช่อื ผทู ี่ทํางานรวมกนั 1. กาํ หนดสิทธิ์ในการการเผยแพร 2. เพม่ิ อีเมลผทู ่ีทํางานรว มกนั ี่ 13

• กําหนดสทิ ธ์ิในการการเผยแพร สามารถใหท ุกคนจะคนหาและดไู ดห รอื จํากดั เฉพาะกลุมบคุ คลท่สี ามารถดูได 1. ทกุ คนทวั่ โลกสามารถเขาดูได 2. ทุกคนท่เี ปน บุคลากรทใี่ ชอ ีเมลจ ฬุ าฯ สามารถเขาดูได 3. บุคคลทรี่ ะบุในอเี มลถงึ จะสามารถเขาดูได • ขน้ั ตอนการเผยแพรเว็บไซต คลิก๊ เลอื กเมนปู ุมเผยแพร ใสทเ่ี ราตองการเผยแพร แนะนาํ ใหใสเปนภาษาอังกฤษ เชน comecom กจ็ ะไดตอทานจาก URL Google Site เปน https://sites.google.com/chula.ac.th/comecon/ 14

• คลิ๊กท่ีหวั ขอ ดูเว็บไซตทเี่ ผยแพร เพื่อดเู วบ็ ไซตทีเ่ ราจะเผยแพร • ตวั อยางผลงานการทาํ เวบ็ ไซต ศนู ยบรกิ ารคอมพิวเตอร คณะเศรษฐศาสตร จฬุ าฯ https://sites.google.com/chula.ac.th/comecon 15