MCUIT

คูมือการใชงาน Google Site

นายนพดล เพ็ญประชุม | นักวิชาการคอมพิวเตอร์

 คูม่ ือการใช้ งาน Google Site 2

คํานํา
Google Sites คือเว็บไซตของ Google ที่ใหบริการสรางเว็บไซตฟรี ซึ่งเราสามารถสรางเว็บไซตได
อยางงายดาย โดยผูใชสามารถปรับแตงลักษณะของเว็บไซตไดตามความตองการ สามารถรวบรวมความ
หลากหลายของขอมูลไวในที่เดียวได เชน วิดีโอ ปฏิทินการนําเสนอเอกสารหรือสิ่งที่แนบ และขอความ รวมไป
ถึงความสามารถในการกําหนดความเปนสวนตัวของเว็บไซตดวย
ซึ่งทางผูจัดทําคาดหวังวา คูมือนี้จะเปนประโยชนอยางยิ่งใหแกบุคลากรและนิสิตไมมากก็นอย
หากมีขอผิดพลาดบกพรองประการใด ทางผูจัดทําตองขออภัยมา ณ ที่นี้ดวย

นพดล เพ็ญประชุม
กลุมงานเทคโนโลยีการศึกษา
สวนเทคโนโลยีสารสนเทศ

นายนพดล เพ็ญประชุม นักวิ ชาการคอมพิ วเตอร์ กลุ่มงานเทคโนโลยีการศึกษา ส่วนเทคโนโลยีสารสนเทศ มจร

 คูม่ ือการใช้ งาน Google Site  3 
 

สารบัญ
หน้า
คํานํา 2
รู้จัก Google Site 4
การเข้าใช้งาน Google Site 5
การเปลี่ยนชื่อไซต์ การเพิ่ม และแก้ไข หน้าเว็บ 8
การแทรกตาราง และ การแทรกรูป
การแทรกช่องข้อความ การแทรกคอลัมน์
การแทรกวัตถุ และสื่อต่างๆ ลงไปใน sites 20
การแทรก Google Docs, Spreadsheets Presentations, and Forms ลงใน sites 20
การ Insert ปฏิทินของ Google Calendars 22
การ Insert Google Maps 23
การ Insert gadget 24
การใช้ code html 25
การตั้งค่าหน้าเว็บ 26
สร้างเพจเอกสารดาวน์โหลด 27
สร้ างหน้ าเพจประกาศข่าวสาร 28
 
 
 
 
 
 
 
 
 
 
 
 

กลุ่มงานเทคโนโลยีการศึกษา ส่วนเทคโนโลยีสารสนเทศ สํานักหอสมุดและเทคโนโลยีสารสนเทศ มจร 

 
 คูม่ ือการใช้ งาน Google Site  4 
 

 
รู้จักกูเกิ้ลไซต์ (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ไว้ที่100 MB
o พื้นที่จัดเก็บ 10 Gb* (GB=กิกะไบต์)
o ขนาดไฟล์สูงสุด 10 MB (MB=เมกกะไบต์)
o จํานวนหน้าเว็บเพจไม่จากัดการใช้งาน Google site
 * เฉพาะพื้นที่เว็บไซต์ไม่เกิน 100 MB แต่หากรวมเป็นสมาชิกบริการอื่นๆ ของกูเกิ้ลตัวอื่นๆ เช่น ยูทูบ
( YouTube), ไดรฟ (Drive), ปฏิทิน (Calendar), อัลบั้มภาพ (Picasa) แล้วไม่เกิน 10 GB
 
กลุ่มงานเทคโนโลยีการศึกษา ส่วนเทคโนโลยีสารสนเทศ สํานักหอสมุดและเทคโนโลยีสารสนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  5
 

 
การเข้าใช้งาน gooogle site
สามารถล็อคอิอินเข้าใช้งานไได้ที่ URL mail.mcu.ac
m .th หรือ acccounts.googgle.com

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  6
 

เริ่มต้นใช้ช้โดยไปที่ แล้วเลือก “ไไซต์”

การเลือกเทมเพลต(แ
ก แม่แบบ)ของเว็บไซต์

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  7
 

เลือกเทมเพลตทีที่เราต้ องการแลละกรอก
ร
รายละเอี ยดแบบใช้ ของเราเพื่อบอก
อ
จุจดประสงค์ของงเว็บไซต์เรา

สามาารถเลือกแม่แบบของไซต์อื่น
เพื่อปรั
ป บใช้ งานของเเราได้

กลุ่มงานเทคโนโลยี
ง การศึกษา ส่วนเทคโนโลยี สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  8
 

การเปลีลี่ยนชือ่ ไซต์ การเพิ่ม แลละแก้ไข หน้น้าเว็บ

ตังชื
้ ่อไซต์
อ ของเรา โดดยชื่อ
ที่ตงจ
ั ้ จะกลายเป็ นตัวอ้ างอิง
URL ของเว็บโดนอัตโนมั
ต ติ

เลือกธีีม ที่ต้องการให้
เหมาะสมกับเรา

เครื่องมือในการแก้
อ ไข Site

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  9
 

หากต้ องการแก้ ไข้ หหน้ าให้ คลิกรูปดินสอ และ

ถ้ าต้ องการเพิ่มหน้ าาเพจให้ คลิกรูปกระดาษ
ป

การเปลี่ยนฟร้
ย อนตัวอักษรและขนาาด

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  10
0 
 

คุณสามาารถเลือกประเเภทของตัวอักษร ก Front และขนาดที่ใช้เมนู เ แบบเลื่อนลงน และ พิมพพ์ตัวหนาและตัวเอียง

ขีดเส้นใต้ต้ข้อความและะเปลี่ยนสีของข้อความหรือพื้นหลัง ดังจะะเห็นคาสั่งต่อไปนี
อ ้
B การพิมพ์
ม ตัวหนา
I ตัวเอียง
U ขีดเส้นใต้
น ขอ้ ความทีที่ U
A สีของข้ข้อความการเปปลี่ยนแปลง

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  11
1 
 

สามารถที่จะเน้ นข้ อความที่คณ

ุ ต้ องการและจะเปปลี่ยนเป็ นลิงก์กและ
ุ่ เชื่อมโยงสู ่ link ที่คณ
คลิกที่ปมเ ุ ต้ องการได้
อ  เช่น URL , Em
mail 
mark ซึง่ จะะปรากฏ หน้ าต่างขึ ้นมาพร้ร้ อมกับตัวเลือกเหล่
,Bookm อ านี ้ 
หลังจากนันัน ก็
้ คลิ ้กที่ปม OK เพื
มุ่ ่อยืนยันการทํางาน

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  12
2 
 

การแก้ไขการออกแบ
ข บ
เป็นการแก้ไขในส่
ข วนรายละะเอียด ในส่วนหั
น ว การนําทางในแนวนอ
ท นแถวด้านข้าง ส่วนท้ายทีกํก่ าหนด
เองได้ ดังต่
ง อไปนี้

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  13
3 
 

กลุ่มงานเทคโนโลยี การศึกษา ส่วนเทคโนโลยี สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 

 
 คูม่ ือกาารใช้ งาน Google Site  14
4 
 

การนําทางแนวนอน –ในส่วนนี้เป็นคํ น าสั่งที่เราสาามารถเลือกไดด้ว่า ต้องการทีที่เลือกปุ่มการรนําทางของเพพจของ

เราในบริรเวณด้านซ้าย เป็นลักษณะแนวนอนได้ และสามารถป แ ปรับแต่งแก้ไขไได้ โดยคลิกที่ ปุ่มคําสั่ง
เครื่องหมมายอักษร +
แถบด้านข้น าง – เป็นส่วนที
ว ่มคี วามสามารถคล้ายๆๆกับคาสัง่ ทั้ง 2 ข้อที่กล่าวมาสามารถเลืลือกได้ว่าต้องกการแสดง
หรือไม่กได้ ษ + และสามมารถเลือกองค์ประกอบใหม่ๆ ได้จากคําสั
ไ็ โดยคลิกที่ ปุ่มคําสั่ง เครืรื่องหมายอักษร า ่งนี้ โดย
คลิ้กที่ปุ่ม เพิ่ม ตัวอย่างการเพิ
า ่มคําสั่งในรูปแบบตต่างๆจะปรากฏขึ้นในรูป

น ายหรือขวาก็ได้ พร้อมปรัรับขนาดความมกว้างได้ตามคความเหมาะสสม โดย

และสามารถแก้ไขให้ปุปุม่ อยู่ทางด้านซ้
คลิกที่เครืรื่องหมายดินสอ
ส

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  15
5 
 

ตั้งค่า Siddebar แล้วคลลิกปุ่ม “ตกลงง”

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  16
6 
 

การแก้ไขโครงสร้
ข างหหน้าเว็บ

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
การศึ
 
 คูม่ ือการใช้ งาน Google Site  17 
 

สีและแบบอักษร
รูปแบบของสีตัวอักษร ,ขนาดตัวอักษร ,ภาพพื้นหลัง ในส่วนประกอบของเพจต่างๆ สามารถ
เปลี่ยนแปลงได้ จากคําสั่งนี้ เมื่อทําการแก้ไขเสร็จแล้วให้กดที่ปุ่มบันทึก

kllสากด

สามารถปรับเปลี่ยนแบนเนอร์และโลโก้เว็บไซต์โดยการอัพโหลดไฟล์ภาพ

กลุ่มงานเทคโนโลยีการศึกษา ส่วนเทคโนโลยีสารสนเทศ สํานักหอสมุดและเทคโนโลยีสารสนเทศ มจร 

 
 คูม่ ือกาารใช้ งาน Google Site  18
8 
 

กําหนดคค่าส่วนหัวของไไซต์ให้ตรงกับที
บ ่เราออกแบบบ

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  19
9 
 

กลุ่มงานเทคโนโลยี การศึกษา ส่วนเทคโนโลยี สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 

 
 คูม่ ือกาารใช้ งาน Google Site  20
0 
 

การแทรรกวัตถุ และะสื่อต่างๆ ลงไปใน

ล sitees
การ Insert เพพื่อเริ่มต้นการรใส่วัตถุและสืสือ่ ต่างๆ ลงไปปใน sites ของงคุณเพียงคลิก แก้ไขหน้า เลื
เ อก
Insert และเลื
แ อกวัตถุหรืห อ app ที่คุณต้องการแททรกเช่น Preseentation Gooogle Docs เเป็นต้น

การจัดรูปแบบ
ป ตารางงและการออกกแบบสามารถถทําได้โดยการรคลิกแท็บต่างๆ
ง

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือการใช้ งาน Google Site  21 
 

กลุ่มงานเทคโนโลยีการศึกษา ส่วนเทคโนโลยีสารสนเทศ สํานักหอสมุดและเทคโนโลยีสารสนเทศ มจร 

 
 คูม่ ือกาารใช้ งาน Google Site  22
2 
 

การ Inssert ปฏิทินของ

น Googgle Calenddars

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  23
3 
 

การ Inssert Googlle Maps

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนนเทคโนโลยี สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
การศึ
 
 คูม่ ือกาารใช้ งาน Google Site  24
4 
 

การ Inssert gadgeet

คลิกที่แทรกก และคลิกเลืลือกแกตเจ็คอื
ค ่นๆ

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  25
5 
 

ผลการแสสดงหน้าเว็บไซต์
ไ

การใช้ code htm

ml

เราสามารถใสส่ html (โค้ด iframe) สําหรั

ห บติดเว็บไซต์ เพื่อแสดง ราคาน้
ร ํามัน ราคาหุ้น ราคาาทอง
อัตราแลกกเปลีย่ น ราคาดัชนีหุ้น พยยากรณ์อากาศศ และอืนๆ

จากนั้น copyy code ที่อยูในคํ

ใ่ าสั่ง Coppy this HTML code ทั้งหมด
ห

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  26
6 
 

การตั้งค่คาหน้าเว็บ

คลิกที่รรูู ปฟั นเฟื่ อง แล้ล้ วคลิกการตังค

้ ค่าหน้ า

กลุ่มงานเทคโนโลยี
ง กการศึกษา ส่วนเทคโนโลยี สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  27
7 
 

สร้างเพพจเอกสารดาาวน์โหลด(ตูตู้เก็บเอกสาาร)
ตู้เก็บเอกสารร ใช้สาหรับอัพโหลดไฟล์
พ ตางๆ ภ , เพลง แลละอื่นๆ ซึ่งสาามารถแชร์ให้คนอื
า่ เช่น รูปภาพ ค ่น
ดาวน์โหลลดได้
- คลิกที่กระดาษ
ก

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร 
 
 คูม่ ือกาารใช้ งาน Google Site  28
8 
 

สร้ างหน้ าเพจประะกาศข่ าวสสาร

ประกาศ ใช้ในการประกาศ
น ศข้อความ หรืรือ แสดงบทความต่างๆ
- คลิกที่กระดดาษ

กลุ่มงานเทคโนโลยี
ง ก กษา ส่วนเทคโนโลยี
การศึ น สารรสนเทศ สํานักหอสมุดและเทคโนโลยี สารสนนเทศ มจร