ออกแบบและสร้าง Google site ป6

การออกแบบสอื่ การ
Gเรยoี นoกgาleร สsอitนeโดยใช้

การสรา้ งเวบ็ ไซตด์ ว้ ย Google Site

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

ขน้ั ตอนการสรา้ งเวบ็ ไซตด์ ว้ ย Google site

กอ่ นทจี่ ะใชง้ าน Google Site จะตอ้ งมอี เี มลข์ อง
Google หรอื gmail น่ันเอง เมอื่ ไดอ้ เี มลแ์ ลว้ ก็ให ้
login หรอื ลงชอื่ เขา้ ใชใ้ หเ้ รยี บรอ้ ย

ขนั้ ตอนการสรา้ งเวบ็ ไซตด์ ว้ ย
Google site

1. เขา้ ไปที่ Google Drive
(เขา้ สู่ระบบ ดว้ ยบญั ชี Google
ใหเ้ รยี บรอ้ ยกอ่ น)

2. คลกิ ขวา (เลอื กพนื้ ทวี่ า่ งๆ)
เลอื ก “เพมิ่ เตมิ ” แลว้ เลอื ก
“Google Site”

3. เพยี งเทา่ นีก้ ไ็ ดเ้ วบ็ ไซตท์ พี่ รอ้ มใหป้ รบั แตง่ แลว้

การจดั การหวั เวบ็ (Banner)

หวั ของเวบ็ ไซต์ (Banner) เราสามารถจดั การได้ 2 สว่ น สว่ น
แรก คอื การแทรกรปู ภาพ และสว่ นทส่ี อง คอื จดั การรปู แบบของ
หวั เวบ็ ดงั ต่อไปน้ี

การจดั การหวั เวบ็ (Banner)

เมอ่ื คลกิ เปลย่ี นรปู ภาพ จะมหี น้าต่าง Gallery รปู ภาพมาใหเ้ ลอื กซง่ึ โปรแกรม กาหนดมาให้
แต่ถา้ เราตอ้ งการใชภ้ าพของเราเองทม่ี อี ยใู่ นเครอ่ื ง Computer เราจะตอ้ ง Upload ภาพขน้ึ ไป
ในระบบก่อน โดยคลกิ ทแ่ี ถบ “อปั โหลด”

เลอื กโหมดรปู ภาพตามตอ้ งการ

การจดั การหวั เวบ็ (Banner)

ถา้ คลกิ ท่ี “Header type” จะปรากฏตวั เลอื ก
ขน้ึ มาตามภาพ

1 แสดงภาพแบนเนอรข์ นาดใหญ่มาก
2 แสดงภาพแบนเนอรข์ นาดใหญ่
3 แสดงภาพแบนเนอรข์ นาดเลก็
4 แสดงแต่ขอ้ ความ

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

หรอื จะเปลย่ี นรปู แบบขอ้ ความใหเ้ ป็นแบบ ชอ่ื เรอ่ื ง สว่ นหวั สว่ นหวั ยอ่ ย เลก็

หรอื ถา้ ตอ้ งการใส่ Link ใหค้ ลกิ ไอคอน Link จากนน้ั
กรอก link website ลงไป ในชอ่ ง link



จะแสดงตวั อย่างใหเ้ ราดูซงึ่ มี 3 รูปแบบในการแสดงผล

ขน้ั ตอนการใสข่ อ้ ความลงในเวบ็ ไซต ์

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

ขนั้ ตอนการแทรกรูปภาพประกอบในเวบ็ ไซต ์

ภาพกราฟิกกเ็ ป็นอกี องคป์ ระกอบหน่งึ ทส่ี าคญั สาหรบั การสรา้ งเวบ็ เพจ เพราะจะช่วยใหเ้ วบ็ สวยงาม มสี สี นั
น่าสนใจ และสอ่ื ความหมายไดด้ ขี น้ึ ซง่ึ ภาพทน่ี ามาใชอ้ าจจะเป็นเรอ่ื งทเ่ี กย่ี วขอ้ งโดยตรงกบั เน้ือหา เช่น ภาพ
สนิ คา้ และบรกิ าร หรอื เป็นเพยี งภาพทน่ี ามาใชต้ กแตง่ เพอ่ื ใหเ้ วบ็ ของเราดดู ขี น้ึ ได้ โดยการแทรกภาพในGoogle
Site ใหค้ ลกิ ทป่ี ่มุ รปู ภาพ

ขน้ั ตอนการแทรกวดิ โี อประกอบในเวบ็ ไซต ์

การ Insert คลปิ Video มาแสดงบนเวบ็ เพจ เชน่ คลปิ วดิ โี อทน่ี ่าสนใจ จากเวบ็ ไซต์
Youtube ทาไดโ้ ดยการคลกิ ทป่ี ่ มุ ฝัง (Embedded) แลว้ วาง Link ลงไป

การเพมิ่ หน้าเพจ
เวบ็ ไซต ์ ใหม้ เี มนู หรอื
หน้าเวบ็ ไซตม์ ากขนึ้

ใหเ้ ลอื กแถบเครอื่ งมอื หนา้ เว็บ แลว้ ตงั้ ชอื่ หนา้ เพจ
แลว้ สรา้ งหนา้ ไดต้ ามตอ้ งการ

การเพมิ่ เมนู ยอ่ ย

การเพมิ่ เมนู ยอ่ ย

การเพมิ่ เมนู ยอ่ ย

ขน้ั ตอนการเผยแพรเ่ วบ็ ไซต ์

ขน้ั ตอนการเผยแพรเ่ วบ็ ไซต ์

ขนั้ ตอนการเผยแพรเ่ ว็บไซต ์

การสรา้ งเวบ็ ไซตด์ ว้ ย Google site มขี นั้ ตอนทไ่ี มย่ งุ่ ยาก ใครๆ กส็ ามารถมี
เวบ็ ไซต์ ของตนเองได้ มผี ลสรปุ วา่ มขี อ้ ดี จดุ เดน่ มากมาย ดงั น้ี

1. สามารถทาหน้าเวบ็ เพจ ของตวั เองไดง้ า่ ย ใชง้ านสะดวกโดยไมจ่ าเป็นตอ้ งมคี วามรเู้ รอ่ื ง html
2. สามารถเผยแพรข่ อ้ มลู ทเ่ี ป็นประโยชน์ และเป็นความรู้ หรอื บทเรยี นอะไรกไ็ ด้
3. มพี น้ื ทฟ่ี รถี งึ 100 เมกะไบต์ ต่อ site
4. สามารถเลอื กรปู แบบ Theme สาเรจ็ รปู ไดม้ ากมาย
5. รปู แบบไซตเ์ ป็นแบบมาตรฐานของเวบ็ ไซตท์ วั่ ไป
6. พฒั นาไดง้ า่ ย ปรบั ปรงุ รปู แบบงา่ ย ปรบั แต่งขอ้ มลู แบบออนไลน์
7. สามารถทจ่ี ะเกบ็ ไฟลภ์ าพ หรอื ไฟลช์ นิดต่างๆ ไวใ้ นไซตข์ องเราได้
8. สรา้ ง link ภายในและภายนอกของไซตไ์ ด้ 9. การตงั้ คา่ สาหรบั การเขา้ ถงึ และใชข้ อ้ มลู รว่ มกนั 10. เป็นท่ี

รวมเขา้ กบั เครอ่ื งมอื อ่นื ๆ ของ Google เพอ่ื ใหค้ ุณสามารถแบง่ ปันวดิ โี อภาพถ่ายงานนาเสนอและปฏทิ นิ

DISCUSSION DISCUSSION 01

MARS Mercury is the closest planet to
the Sun and the smallest one in
Despite being red, Mars is actually a cold place. the Solar System—it’s only a bit
It's full of iron oxide dust, which gives the larger than the Moon
planet its reddish cast. Earth is the third planet
from the Sun and the only one that harbors life DISCUSSION 02
in the Solar System. This is where we all live on:
Venus has a beautiful name and
● Ceres is located in the main asteroid belt is the second planet from the
● The Moon is Earth’s natural satellite Sun. It’s terribly hot—even
● Neptune is very far away from us hotter than Mercury
● Pluto now considered a dwarf planet
● Saturn is not the only planet with rings

CONCLUSIONS

MERCURY VENUS MARS

It’s the closest planet Venus is the second Mars is actually a very
to the Sun planet from the Sun cold place

JUPITER SATURN NEPTUNE

Jupiter is the biggest It’s composed of It’s the farthest planet
planet of them all hydrogen and helium from the Sun

AWESOME

BIBLIOGRAPHICAL
REFERENCES

Do you know what helps you make your point clear?
Lists like this one:

● They’re simple
● You can organize your ideas clearly
● You’ll never forget to buy milk!
And the most important thing: the audience won’t
miss the point of your presentation

DESKTOP
MOCKUP

You can replace the image on
the screen with your own work.
Just right-click on it and select
“Replace image”

THANKS!

Do you have any questions?
[email protected]
+91 620 421 838
yourwebsite.com

CREDITS: This presentation template was created by Slidesgo, and
includes icons by Flaticon and infographics & images by Freepik
Please keep this slide for attribution

ALTERNATIVE RESOURCES

Here’s an assortment of alternative resources whose style fits that of this template:
● Colourful isometriс infographic elements
● Isometric style cms concept

RESOURCES VECTORS

Did you like the resources on this template? ● Isometric cyber monday instagram
Get them for free at our other websites: stories collection

PHOTOS ● Isometric cyber monday instagram
posts collection
● Businessman working on laptop
● Businesswomen with tablet ● Isometric style cms concept illustrated
● Colourful isometriс infographic

elements

Instructions for use

If you have a free account, in order to use this template, you must credit Slidesgo by keeping the Thanks slide. Please
refer to the next slide to read the instructions for premium users.

As a Free user, you are allowed to:
- Modify this template.
- Use it for both personal and commercial projects.

You are not allowed to:
- Sublicense, sell or rent any of Slidesgo Content (or a modified version of Slidesgo Content).
- Distribute Slidesgo Content unless it has been expressly authorized by Slidesgo.
- Include Slidesgo Content in an online or offline database or file.
- Offer Slidesgo templates (or modified versions of Slidesgo templates) for download.
- Acquire the copyright of Slidesgo Content.

For more information about editing slides, please read our FAQs or visit Slidesgo School:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school

Instructions for use (premium users)

As a Premium user, you can use this template without attributing Slidesgo or keeping the "Thanks" slide.

You are allowed to:
● Modify this template.
● Use it for both personal and commercial purposes.
● Hide or delete the “Thanks” slide and the mention to Slidesgo in the credits.
● Share this template in an editable format with people who are not part of your team.

You are not allowed to:
● Sublicense, sell or rent this Slidesgo Template (or a modified version of this Slidesgo Template).
● Distribute this Slidesgo Template (or a modified version of this Slidesgo Template) or include it in a database or in
any other product or service that offers downloadable images, icons or presentations that may be subject to
distribution or resale.
● Use any of the elements that are part of this Slidesgo Template in an isolated and separated way from this
Template.
● Register any of the elements that are part of this template as a trademark or logo, or register it as a work in an
intellectual property registry or similar.

For more information about editing slides, please read our FAQs or visit Slidesgo School:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school

Fonts & colors used

This presentation has been made using the following fonts:

Audiowide
(https://fonts.google.com/specimen/Audiowide)

Red Hat Text
(https://fonts.google.com/specimen/Red+Hat+Text)

#ffffff #fadd5c #40a895 #d55d7a

#1e71d8 #031d41 #000000

Storyset

Create your Story with our illustrated concepts. Choose the style you like the most, edit its colors, pick
the background and layers you want to show and bring them to life with the animator panel! It will boost

your presentation. Check out how it works.

Pana Amico Bro Rafiki Cuate

Use our editable graphic resources...

You can easily resize these resources without losing quality. To change the color, just ungroup the resource
and click on the object you want to change. Then, click on the paint bucket and select the color you want.
Group the resource again when you’re done. You can also look for more infographics on Slidesgo.





JANUARY FEBRUARY MARCH APRIL MAY JUNE

PHASE 1
Task 1
Task 2

PHASE 2
Task 1
Task 2

JANUARY FEBRUARY MARCH APRIL

PHASE 1

Task 1

Task 2





...and our sets of editable icons

You can resize these icons without losing quality.
You can change the stroke and fill color; just select the icon and click on the paint bucket/pen.
In Google Slides, you can also use Flaticon’s extension, allowing you to customize and add even more icons.

Educational Icons Medical Icons

Business Icons Teamwork Icons

Help & Support Icons Avatar Icons

Creative Process Icons Performing Arts Icons

Nature Icons

SEO & Marketing Icons