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

การสร้างแฟม้ สะสมผลงานยคุ ดิจทิ ัล ด้วย Google Site 0|Page

สารบัญ

หนา้

1. ความสำคญั ของ Google site............................................................................................. 3
2. การวางโครงสรา้ งเวบ็ ไซต์ (Site structure) ....................................................................... 3
3. สว่ นประกอบของ Google Site .......................................................................................... 4
4. ตวั อยา่ งแฟม้ สะสมผลงานดิจิทลั .......................................................................................... 4
5. การจดั การหนา้ เว็บไซต์ (เพิ่ม ลบ ย้าย) หน้าไซต์................................................................. 5
6. การแทรกเนื้อหาตา่ ง ๆ บนเวบ็ ไซต์...................................................................................... 6

6.1. การแทรกข้อความในหน้าเวบ็ ไซต์........................................................................................ 6
6.2. การแทรกรปู ภาพในหนา้ เว็บไซต์ ......................................................................................... 7
6.3. การแทรกวดิ ีโอ (YouTube) ในหนา้ เวบ็ ไซต์ ....................................................................... 8
7. การแชรแ์ ละการเผยแพรเ่ ว็บไซต์ ......................................................................................... 9
7.1. การแชรเ์ พือ่ แกไ้ ขฉบบั รา่ งรว่ มกัน........................................................................................ 9
7.2. การแชรเ์ พ่อื เผยแพร่ใหอ้ า่ น ................................................................................................. 9

การสรา้ งแฟ้มสะสมผลงานยุคดิจิทัล ด้วย Google Site 1|Page

สารบัญภาพ

หน้า

ภาพท่ี 1 ตัวอยา่ งโครงสร้างเวบ็ ไซต์ .................................................................................................. 3
ภาพที่ 2 สว่ นประกอบของ Google Site......................................................................................... 4
ภาพท่ี 3 ตวั อยา่ งแฟ้มสะสมผลงานดิจิทัล......................................................................................... 4
ภาพท่ี 4 การจดั การหน้าเว็บไซต์....................................................................................................... 5
ภาพที่ 5 การซ่อนเวบ็ ไซต์จากการนำทาง.......................................................................................... 5
ภาพท่ี 6 การแทรกเนื้อหา................................................................................................................. 6
ภาพที่ 7 การแทรกขอ้ ความในหน้าเว็บไซต์ ...................................................................................... 6
ภาพท่ี 8 การแทรกรูปภาพในหน้าเวบ็ ไซต์ ........................................................................................ 7
ภาพท่ี 9 การแทรกวดิ โี อ (YouTube) ในหน้าเว็บไซต์ ...................................................................... 8
ภาพที่ 10 การแชรเ์ พอ่ื แกไ้ ขรว่ มกัน.................................................................................................. 9
ภาพที่ 11 การแชร์เพอ่ื เผยแพรส่ าธารณะ....................................................................................... 10

การสรา้ งแฟม้ สะสมผลงานยุคดิจทิ ัล ดว้ ย Google Site 2|Page

1. ความสำคญั ของ Google site

Google Sites คอื โปรแกรมของ Google ที่ให้บริการสร้างเว็บไซตฟ์ รี สามารถสร้างเว็บไซต์
ได้ง่าย ปรบั แตง่ รปู ลกั ษณ์ได้อยา่ งอสิ ระ และสามารถรวบรวมความหลากหลายของข้อมูลไว้ในท่ีเดียว
เช่น วิดีโอ, ปฏิทิน, เอกสาร อื่นๆ สามารถนำมาแทรกในหน้าเว็บเพจได้ เป็นการเพิ่มลูกเล่น ใช้งาน
ได้ง่าย ทำใหช้ ่วยอำนวยความสะดวกได้เป็นอย่างมาก

2. การวางโครงสรา้ งเวบ็ ไซต์ (Site structure)

การวางโครงสร้างของเว็บไซต์ก่อนลงมือสร้างเว็บไซต์จริงเปรียบเสมือนการวางแผนว่า
เว็บไซต์ของเราจะประกอบไปด้วยเมนูอะไรบ้าง แต่ละเมนูประกอบด้วยหน้าย่อยหรือหัวข้อย่อย
อะไรบา้ ง ดงั ตัวอยา่ งต่อไปน้ี

Digital profolio

หนา้ แรก

ดา้ นที่ 1 ด้านท่ี 2 ด้านที่ 3 ผลการปฏิบตั ิงาน คลิปวดิ ีโอการสนอ

สรา้ งและหรอื พฒั นา จดั ทาขอ้ มลู สารสนเทศ พฒั นาตนเองอยา่ งเป็น
หลกั สตู ร ของผเู้ รยี นและรายวชิ า ระบบและต่อเนอ่ื ง

ออกแบบการจดั การเรยี นรู้ ดาเนินการตามระบบดแู ล มสี ว่ นรว่ มในการ
จดั กจิ กรรมการเรยี นรู้ ชว่ ยเหลอื ผเู้ รยี น แลกเปลยี่ นเรยี นรู้

สรา้ งและหรอื พฒั นาสอ่ื ปฏิบตั ิงานวชิ าการและ
งานอืน่ ๆ ของสถานศึกษา นาความรู้ พฒั นาคณุ ภาพ

ผเู้ รยี น

วดั และประเมินผลการ ประสานความรว่ มมือกบั
เรยี นรู้ ผปู้ กครอง ภาคเี ครอื ข่าย

และหรอื สถาน
ประกอบการ

ภาพที่ 1 ตวั อย่างโครงสร้างเวบ็ ไซต์

จากตัวอยา่ งเป็นโครงสร้างเวบ็ ไซต์ของแฟม้ สะสมผลงานของครยู ุคดิจิทัล ซึ่งมีการแบ่งเมนู
ตามตัวชี้วัดในการประเมินการเป็นครู ซึ่งประกอบด้วย ด้านที่ 1-3 ผลงานการปฏิบัติงาน คลิปการ
เรียนการสอน และอน่ื ๆ

การสรา้ งแฟม้ สะสมผลงานยุคดิจิทัล ด้วย Google Site 3|Page

3. สว่ นประกอบของ Google Site

เม่อื สร้าง Google site ขน้ึ มาใหม่จะพบกบั หน้าตา่ งท่ีมสี ว่ นประกอบ ดังนี้

ภาพท่ี 2 ส่วนประกอบของ Google Site

4. ตวั อย่างแฟม้ สะสมผลงานดจิ ทิ ัล

หากท่านใดต้องการดูแฟ้มสะสมผลงานดิจิทัลสามารถเข้าเยี่ยมชมได้ที่ URL:
https://sites.google.com/view/siwapornlin หรือ สามารถสแกน QR code เพื่อเปิดดูได้ ดัง
ภาพต่อไปน้ี

ภาพท่ี 3 ตัวอย่างแฟ้มสะสมผลงานดิจิทัล 4|Page
การสรา้ งแฟ้มสะสมผลงานยุคดิจิทัล ด้วย Google Site

5. การจดั การหน้าเว็บไซต์ (เพ่ิม ลบ ยา้ ย) หน้าไซต์

หากเปรียบเทียบเว็บไซต์เหมือนหนงั สือ หน้าเว็บไซตห์ รือเพจ ก็เปรียบเสมือนหน้าแต่
ละหนา้ ของหนังสอื ในหนงั สอื 1 เล่ม อาจจะมีหนา้ หลายหนา้ ในหนงึ่ เว็บกอ็ าจจะมหี ลายเพจ เช่นกัน
ซง่ึ สามารถแทรกเพจไดจ้ ากเมนู “หนา้ เวบ็ ” แลว้ กดเครื่องหมายบวก ดงั รปู ตอ่ ไปน้ี

ภาพที่ 4 การจดั การหนา้ เว็บไซต์
เราสามารถสรา้ งหน้าเว็บไซต์เป็นฉบบั ร่างโดยที่ยังไมแ่ สดงบนเว็บไซต์ได้ โดยเพิ่มหนา้
เว็บไซต์แล้วใส่เนือ้ หาปกติ เพียงแต่ไปทีก่ ารตัง้ ค่าแล้วกดเลือกเมนู “ซ่อนจากการนำทาง” ดังภาพที่
แสดงต่อไปน้ี

ภาพท่ี 5 การซอ่ นเวบ็ ไซตจ์ ากการนำทาง 5|Page
การสรา้ งแฟ้มสะสมผลงานยคุ ดิจทิ ัล ดว้ ย Google Site

6. การแทรกเนอื้ หาตา่ ง ๆ บนเวบ็ ไซต์

กอ่ นท่ีจะเริ่มแทรกวัตถใุ ดๆ ตอ้ งทำการเลอื กหน้าเวบ็ ไซตท์ ีต่ อ้ งการจดั การเนือ้ หาในหน้านั้น
ๆ ก่อนเสมอ จากนั้นไปที่เมนู “แทรก” แล้วเริ่มแทรกวัตถุ โดยที่พื้นที่การรแทรกวัตถุต่างๆ เช่น
ขอ้ ความ รปู ภาพ ไดรฟ์ ฟอรม์ ยทู ปู ปฏทิ ิน ฯลฯ

ภาพท่ี 6 การแทรกเนอ้ื หา
6.1. การแทรกข้อความในหน้าเว็บไซต์

ภาพท่ี 7 การแทรกข้อความในหนา้ เว็บไซต์

การสรา้ งแฟ้มสะสมผลงานยคุ ดิจทิ ัล ดว้ ย Google Site 6|Page

เมื่อแทรกข้อความมาแล้วก็สามารถพิมพ์ตัวอักษรได้ หากต้องการปรับแต่งเพียงแค่คลิก
เลือกกลอ่ งข้อความก็สามารถ

-ปรบั รปู แบบตัวอกั ษร
-ปรบั ขนาดตัวอกั ษร
-ทำตัวหนา ตัวเอียง และขดี เส้นใต้
-ปรบั สีตัวอกั ษร
-จดั ชิดซา้ ย ขวา ก่ึงกลาง
-ปรับระยะบรรทัดได้

6.2. การแทรกรูปภาพในหน้าเว็บไซต์
สามารถแทรกรูปภาพโดยไปที่เมนูแทรก แล้วเลอื กเมนู “รปู ภาพ” หรือเลือกบล็อกเนื้อหา

แลว้ เลอื กรปู แบบท่เี ราตอ้ งการ ดงั หมายเลข 1 และ 2

ภาพที่ 8 การแทรกรูปภาพในหนา้ เวบ็ ไซต์

ซง่ึ สามารถแทรกภาพทอี่ ยบู่ น Google Drive หรือภาพท่อี ยบู่ นคอมพิวเตอรส์ ่วนบคุ คลของ
เราก็ไดเ้ ชน่ กัน

การสร้างแฟม้ สะสมผลงานยคุ ดิจิทัล ด้วย Google Site 7|Page

6.3. การแทรกวดิ ีโอ (YouTube) ในหนา้ เว็บไซต์
การแทรกวิดีโอทำไดโ้ ดยการไปที่ “แทรก” จากนั้นเลือก “YouTube” เพื่อดึงวิดีโอจากยู

ทปู มาแสดงบนหนา้ เวบ็ ไซต์

ภาพที่ 9 การแทรกวิดโี อ (YouTube) ในหน้าเว็บไซต์
เมื่อเลือก YouTube แล้วจากน้ันระบบจะขึ้นหน้าต่างให้ทำการคน้ หาวิดโี อ เราสามารถใช้
คำค้นในการค้นหา หรือใช้ URL ของคลิปมาวางได้ จากนั้นคลิกเลือกวิดโี อ แล้วกด “เลือก” เป็นอัน
เสรจ็ สิน้ ดังภาพ

การสรา้ งแฟ้มสะสมผลงานยุคดิจทิ ัล ดว้ ย Google Site 8|Page

7. การแชร์และการเผยแพร่เวบ็ ไซต์

7.1. การแชร์เพื่อแกไ้ ขฉบับรา่ งร่วมกัน
การแชร์เพอ่ื แก้ไขฉบบั ร่างขอนำแนะใหต้ งั้ คา่ แบบ “จำกัด” แลว้ ระบุอีเมลเพ่ือเขา้ มาทำงาน

ร่วมกนั เพอื่ ป้องกนั การแก้ไขจากผู้อ่ืนท่ีไมไ่ ดร้ บั อนญุ าต

ภาพที่ 10 การแชร์เพอ่ื แกไ้ ขร่วมกัน

7.2. การแชรเ์ พ่ือเผยแพร่ให้อา่ น
การเผยแพร่ในครั้งแรก ระบบจะให้เราทำการตั้งชื่อโดเมน หรือกำหนดลิ้งค์ที่จะเข้าถึง

เว็บไซต์ของเรา สามารถระบุได้ในช่อง “ที่อยู่เว็บ” หากชื่อนี้ไม่ซ้ำกับโดเมนอื่น ระบบจะแสดง
เครือ่ งหมายถกู หลงั ชอ่ งเพอ่ื บอกวา่ เราสามารถใช้ชือ่ เว็บไซตน์ ไี้ ด้ จากนน้ั กด “เผยแพร”่ ดงั ภาพ

หากมีการแก้ไขเนื้อหาหรือเพิ่มเติมเนื้อหามาใหม่ ท่านจะต้องกดปุ่ม “เผยแพร่” ใหม่ทุก
ครั้งเพื่อเปน็ การอัพเดทตอ่ ผชู้ มเว็บไซต์

การสร้างแฟม้ สะสมผลงานยคุ ดิจทิ ัล ดว้ ย Google Site 9|Page

ภาพท่ี 11 การแชรเ์ พื่อเผยแพรส่ าธารณะ

การสร้างแฟ้มสะสมผลงานยคุ ดิจทิ ัล ดว้ ย Google Site 10 | P a g e