การสรางเวบไซตดวย Google Sites
Google Sites คออะไรกคอเวบไซตของ Google เปนโปรแกรมออนไลนททาใหการสรางเวบไซตใหงายขนเหมอนกบการแกไขเอกสารธรรมดาๆ ดวย Google เวบไซตคณสามารถรวบรวมความหลากหลายของขอมลในทเดยว เชน รวมวดโอ ปฏทนการนาเสนอ เอกสารหรอสงทแนบ และขอความ อานวยความสะดวกใหคณรวมกนด หรอแกไขหนาเวบ จะเปนกลมเลกๆ หรอทงองคกรของคณ หรอจะทงโลกเลยกได
รจกกเกลไซต (Google Sites)
· กเกลไซต ใหบรการครงแรกเมอเดอนพฤษภาคม 2551 · สรางเวบไซตไดสดแสนจะงายดาย ใชเวลากนาทกโชวผลงาน · ไมจาเปนตองรภาษาเขยนเวบ (HTML) ใหปวดหว แคใชเวรดพมพงานเปนกเรมไดเลย แถมเมน
เปนภาษาไทยอกตางหาก · มแบบเทมเพลตสาเรจรปใหเลอกมากมาย คลายๆ กบแบบสาเรจเพาเวอรพอยต · สามารถแชรเวบใหเพอนๆ รวมสรางสรรคได · เปนระบบทครอบคลม เอามาใชดวยกนไดเลย เชน อเมล (Gmail) ปฏทน (Calendar) · เอกสาร (Documents) ยทบ (YouTube) อลบมภาพ (Picasa) แผนท (Map) ฯลฯ
นคอสงทคณสามารถดาาเนนการไดกบ Google Sites:
· กาหนดรปลกษณของเวบไซตของคณ · สรางเพจยอยเพอใหเนอหาของคณจด · เลอกประเภทเพจ: เวบเพจประกาศ, ตเกบเอกสาร · ใหเนอหาในเวบของคณ (เชนวดโอเอกสารออนไลน Picasa แสดงสไลดภาพถาย, gadgets
iGoogle) และไฟลแบบออฟไลนในตาแหนงกลางหนง · ใหเวบไซตของคณเปนสวนตวหรอสาธารณะตามทคณตองการ · คนหาใน Google เนอหาของเวบไซตทมเทคโนโลยการคนหา Google · เรยนรพนฐานของ Google เวบไซตและเรมตนสรางเวบไซตของคณเองการใชงาน Google
site · Google Sites เปนแอปพลเคชนออนไลนททาใหการสรางเวบไซตของทมกลายเปนเรองงาย · แกไขเอกสาร เมอใช Google Sites ผคนสามารถรวบรวมขอมลทหลากหลายไวในทเดยวได
อยางรวดเรว ไดแก วดโอ ปฏทน งานนาเสนอ ไฟลแนบ และขอความ และสามารถใชงานรวมกบกลมเลกๆ ทงองคกรหรอทงโลก เพอดหรอแกไขไดอยางงายดาย
เรมตนสสรางไซต
1. ลงชอเขาใชงาAccount แล
านโดยบญชขละ Google p
อง Gmail หรpassword จา
รอ กรณครแกกมหาวทยาล
กนนาภาคเหนยนเรศวร กาห
นอ ใหลองชอเหนด ท URL:
เขาใชดวย Go: s
oogle
2.
3.
อกปม
อก Apps
เล
เล ไไซต
2
2
itemail.n
1
u.ac.th
3
4. เลอกปม “สรราง”
5. 6.
เลอกเทมเพลตงชอไซต(title) ของคณ สสาหรบสวนขอองตาแหนงไซตgoogle sitees จะทาการตตดตงให
6
ลตทจะใช หาก
4
กตองการเลอกกเทมเพลตอน
5
น ๆ ใหคลกท
5
“เลอกดเพมเตม”
โดยอตโนมต
7. 8. 9. 10.
11.
เลอกธมแสดงงในเวบไซต ซซงสามารถปรบบเปลยนในภาายหลงได เลอกหมวดหมของไซต เลอกตวเลอกกเพมเตม สวนนนจะใหใสคาออธบายเวบไซต คลกปม “สราาง”
เมอสรางเสรจจแลวจะปรากกฏหนาตาเวบบไซตดงภาพ ตตวอยางนเลอกกธมชอ “สมดดฉ
การใชงาน Theme
7
1
8
9
10
ก”
11
12.
13.
ตกแตงเวบไซซตหรอเปลยนน Theme เพออใหเวบไซตมรปแบบทสวยยงามโดยสามาารถเลอกท
เลอก “จดกาารไซต”
133
112
14. 15.
16.
17.
เลอก “ธม สและแบบอกษษร” เลอก เปลยนน ธม และปรบบแตงตามส
เลอกปม “บน
เลอกคลกทช
นทก”
อไซตเพอกลบ
14
1
ะด
บไปหนาเวบไซ
15
16
ดวก
ซต
18.
19.
ลงหนาเวบห ก
การแกไขหการแกไขหนา
19
การเปลยนแป
นา เพจ (Paาเพจสามารถ
17
9
ปลงธม
age) ทาไดโดยเลอกเครองหมาย
18
ยรปดนสอ
8
20. แถบเมนและฟงกชนทใชเพพมลกเลนใหกกบเวบไซต รวมไปถง gadget ตาง ๆ แลละเครองมอในนการ
21.
จดการหนาเววบ
เมน “แทรก”ๆ จงทาใหเมน
” เปนเมนทควนนถกใชงานบ
21
วบคมเกยวกบบอยทสด
บการใชมเดย เชน การใสรปปภาพ ลงค ว
20
ดโอและ gaddgetตาง
22.
23.
เมน “รปแบบ
เมน “ตาราง”
บ” เปนเมนทใ
23” เปนเมนทใช
ใชกาหนดรป
2
ชสราง หรอจด
22 แบบของตวอ
ดการขอมลใน
กษร ซงเปนร
นรปแบบตารา
รปแบบคาสงเด
าง
ดยวกบแถบเมมน
24.
25.
เมน “การอออกแบบ” เปนเมนทใชสาหรรบกาหนดรปแแบบการจดวาางคอลมนในหหนาเพจ
การเพมรปภเลอกตาหนงท
ภาพ ทตองการแทรรกรปภาพในห
25
หนาเวบ และเ
24
เลอก เมน “แ
4
แทรก” เลอก รปภาพ
26.
จะปรากฏ Diialog box เพพมรปภาพ จากนนใหอปโหหลดภาพโดยเเลอกไฟลภาพพทตองการ
2
ล
26
ลอก “อปโหลลดภาพ” แลวคลก
27.
การเพ
เมออปโหลดภภาพเสรจแลวว
ม
28.
มลงค
การเชอมโยงลลงคภายในเว
สามารถปรบ
บไซตและภา
ขนาด และตตาแหนงดวยแแถบควบคมดาานลาง
ย
28
ยนอกเวบไซตต เลอก ปม “
27
“แทรก” เลอกกเมน “ลงค”
29.
30.
จะปรากฏ Diialog box สรรางลงค เลอกกหนาเวบไซตททเวบไซต และ
การเชอมโยงจแบบ “ทอยเว
การเปลยนแป
จากภายนอก วบ”
30
32
ปลงลาสด เสร
ใหทาตามขออ
0
33
รจแลวเลอกป
28 แลวจะป
ตองการเชอม “ตกลง”
ปรากฏ Dialo
31
มโยง ซงสามาารถดไดจากแแ
g box สรางลลงค ซงในทนเ
2
ผนผง
เลอก
29
31. โโดยใสขอควาามทชอง “ขอความทจะแสดง” และ ใส URL ทชอง ““ลงคไปท URRL น” 32. 33.
การเพ
หากตองการใใหลงคเปดในหหนาตางใหม ใหเลอกคลก ท checkboxx “เปดลงคนใในหนาตางใหหม” เสรจแลวคลกกปม “ตกลง”
ม
34.
35.
36.
มหนาเพจเว
เรมตนสรางห
เมอเปดหนาส
เลอกเทมเพล1) หนา2) ประ3) ตเกบ
อนด4) รายก5) หนา
วบไซต
หนาเพจ โดยค
สรางเพจขนม
ลตทจะใช ซงใาเว บ เปนหน
ศ ใชในกา
กา ารบเอกสาร ใชใดาวนโหลดได การ ใชแสดงราเรมตน ใชเปน
คลกทปม
าแลว กรอกช
ดานบนข
ในสวนนมใหเลาหลกของเวบไรประกาศขาวในการอปโหล รายการตาง ๆนหนาเรมตนข
34
ชอ ตงชอหนา
ของหนาจอ
เวบของคณ
ลอก 5 รปแบไซตในการใหวสารตาง ๆ ดไฟลตาง ๆ เ
ๆ รวมถงรายลของผใชงานแ
4
35
36
บบ คอ ขอมลและปรระกาศตาง ๆ ข ของเวบไซต
เชน รปภาพ, เพลงและอนๆซงสามารถแแชรใหคน
ละเอยดของแตตละรายการดดวย ตละคน
37. เลอกตาแหนงงเมนทตองกาาร
38.
39.
คลกปม “สรา
ไดหนาเพจตาามชอทเราตองการ
าง”
38
39
377
การแทร
รกเอกสารจจาก Googlee Drive
40.
41.
42.
การแทรกเอก
จะม Dialog
คลกปม “เลอ
กสารจาก Goo
box ของ Go
อก”
ogle Docs ใ
42
oogle ไดรฟ
41
หเลอกทเมน “แทรก” เลอ
2
ใหเลอกเอกสสารทตองการ
อก ไดรฟ และ
ะเอกสารตามลลาดบ
400
43. จาก Dialog boxของ แทรรก Google DDocument เลลอกปรบขนาดการแสดงเออกสารตามตองการ แลว เลอกปมม “บนทก”
44.
จะไดภาพแสดงขอบเขตขอองเอกสารทเรราแทรก และจจะเหนเอกสารขวา
43จรงเมอเลอกกปม บนทก
ดานบน
444
45. การแทรกงานนาเสนอ ตาม
นนาเสนอจากมล
ก Google งานนนาเสนอใหเลลอกทเมน “แแทรก” เลอก ไดรฟ และงาานาดบ
46.
47.
จะม Dialog
คลกปม “เลอ
box ของ Go
อก”
4
47
oogle ไดรฟ
46
7
ใหเลอกงานนนาเสนอ ทตองการ
45
48. จาก Dialog ตองการ แลว
box ของ แทว เลอกป
ทรก งานนาเสนนอ ของ Gooogle เลอกปรบบขนาดการแสสดงเอกสารตามม “บ
49.
จะไดภาพแสดานบนขวา
ดงขอบเขตขอองงาน
บนทก”
นาเสนอ
48
อทเราแทรก และจะเหนงาานนาเสนอจรงงเมอเลอกปม
49
ม บนทก
50. การแทรกสเปตามลาดบ
ปรดซต จากGGoogle สเปรดดซตใหเลอกททเมน “แทรก” เลอก ไดรฟฟและสเปรดซต
51.
52.
จะม Dialog
คลกปม “เลอ
box ของ Go
อก”
5
52
oogle ไดรฟ
1
2
ใหเลอกสเปรรดซต ทตองการ
50
53. จาก Dialog box ของ แททรก สเปรดซตตของ Googleeเลอกปรบขนนาดการแสดงเเอกสารตามตองการ แลว เลอกปมม “บนทก”
54. จะไดภาพแสดานบนข
ดงขอบเขตขอองสเปรดซตททเราแทรก แลละจะเหนงานวา
53
สสเปรดซตจรงเมอเลอกปมบ
54
บนทก
4
55. การแทรก วดดโอ จาก You
56.
จะม Dialog box ของ แท
uTube ใหเลอ
ทรก วดโอ Yo
อกทเมน “แท
ouTube
ทรก” เลอก YYouTube ตามมลาดบ
55
56
57.
58.
า URL วน ดโบนทก”
เมอบนทกห
อ จาก YouTTube มาวางในชอง “วาง UURL วดโอ YoouTube ของงคณ”แลวคลกกปม “
น
นาเวบเพจแลวว จะปรากฏ ว วดโอ ดงภาพ
57
58
59.
60.
การแทรก แผผนท จาก Google Maps ใใหเลอกทเมนน “แทรก” เลออก แผนท ตาา
จาก Dialog แลว เลอกปม
box แทรก แม “บนทก”
แผนทของ Gooogle กรอกขขอมลแผนทตตามตองการใน
มลาดบ
นชอง “ปอนต
599
ตาแหนง”
660
61.
62.
ะม Dialogจ
เมอบนทกแล
box แทรก G
ลวจะไดหนาแผ
Google Map
ผนท ดงภาพ
เลอกปรบขน
นาดและเลอก ปม “บนทก
62
”
61
64.
65.
63.
การแทรก ปฏ
ฏทน จาก Gooogle Carlenndarใหเลอกททเมน “แทรก” เลอก ปฏททน ตามลาดบ
จะม Dialog
คลกปม “เลอ
box ของ Go
อก”
65
oogle ไดรฟ
5
ใหเลอก ปฏท
64
ทน ทเราไดสรรางไวกอนหน
าน แลว
63
66. จาก Dialog box ของ แททรก ปฏทนขออง Google เลลอกปรบขนาาด และรายละะเอยดตามตองการ แลวเลอกปม
67. จะไดภาพแสดงปฏทน กจกรรมตามทเลลอก ดงภาพ
“บนทก”
66
67
การสรางขาาวประกาศ
68.
69. 70. 71.
เลอกปม สรางหนาาเวบใหม แลววตงชอหนาเวบบของคณ
เลอกเทมเพลเลอกปม “สรจะไดหนาใหม
ลตทจะใช ซงใราง” ม และเรมเขย
ใหเลอก “ประ
ยนขาวประกา
71
ะกาศ”
ศจากปม “โพ
6
69
70
พสตใหม”
68
72.
การสรา
73.
74.
ดลองประกท าศขาวสาร แ
างตเกบเอกส
เลอกปม
เลอกเทมเพล
สาร
สรางหนา
ลตทจะใช ซงใ
และบนทกหนา
าเวบใหม แลว
ใหเลอก “ตเก
75
าเวบ จะไดภา
วตงชอหนาเวบบ
บเอกสาร”
าพ ดงน
73
74
ของคณ
72
75. 76.
77.
เลอกปม “สรราง” สามารถเกบไ
โ78. 79.
หากตองการคโฟลเดอรใหมลบไฟลทไมตหากตองการทเปลยนแปลง
ไฟล และลงค
ความเปนหมวมกอน โดยคลกองการได โดยทราบการเปล” ขอมลการเป
โดยเลอกปม
วดหม สามารกปม “ยายไปยคลกปม “ลบลยนแปลงลาสปลยนแปลงต
“เพมไฟล” ห
7
ถนาไฟลทตอปท” บ” สดของสวนตเกตเกบเอกสารจ
หรอ
76
“เพมลง
งการจดเกบไ
กบเอกสาร สาจะถกแจงไปท
7
77
ค”
ไปไวทโฟลเดอ
ามารถเลอกปางอเมลของเร
78
779
อร ซงจะตองสสราง
ปม “สมครรบกการรา
การสรา
80.
างรายการ
เลอก
เลอกปม
81. 82.
สรางงหนาเวบใหม
เทมเพลเลอกปม “สรราง” เลอกแมแบบรายก
1) รายก2)
การสงทตองดดาเนนการตดตามรายการสสงทตองดาเ รายก
3) สถา
ลตทจะใช ซงใ
ารซงม
การปญหา ตดนะของหนวย
แลวตงชอหนนาเวบของคณ
ใหเลอก “ราย
4 แมแบบ คอ
ดตามปญหาท ตดตามสถาน
82
ณ
ยการ”
อ
ทเปดอยสาหรนะของแตละห
81
2
นนบโครงการขอหนวยในโครงก
80
นการจากการรประชมหรอโครงการ องคณ การของคณ
4) สรางงของตนเอง ก กาหนดคอลมนของคณเองสสาหรบรายกาาร
83. เลอก “รายการสงทตองดาาเนนการ”
844
83
84.
85.
86.
อก
กรอกรายละ
เล “เพมรายการ”
เทตองการแกไ
ปรบแตงรายก
เอยดเพอ เพมไข กสามารถร
การได โดยเล
85
มรายการสงทระบลงไปได เ
อก “ปรบแตง
86
8
ตอ งางดาเนนเสรจแลวเลอก
งรายการน”
87
น หากรายกาก “บนทก”
ารนน ๆ เสรจจเรยบรอย หร
รอมขอมล
87. สามารถเพมคคอลมนทตองกการบนทกขอมล รวมถงเพพมรายการจดเ
ตวอยางร
รายการทตองงทา ดงภาพ
เรยงขอมล ไดดตามใจชอบ
88
การแกไไขการออกแแ
88. เลอกปม
บบไซต
และเลออก “แกไขการรออกแบบไซตต”
89
89. จาก Dialog box ใหเลอกรายการเมนดดานบน เพอกาารปรบแก
90.
91.
การเพมสวนหหว” เลอก “แกไข
9
หวของเวบไซต
สวนหวของไซ
91
ต (กรณนไดม
ซต”
มการจดทาสวนนหวเปนภาพไไวแลว) โด
92
ดยการเลอกท
90
ท “สวน
0
92. ปรากฏ Dialoog box ในกรรณนเราจะอปปโหลดรปภาพพจากไฟลภาพพทไดเตรยมไววแลว โดยการรแนบไฟล จากปม “Bro
93. เลอกไฟลภาพ
owse…”
พทตองการ แแลวเลอกปม “
93
“Open”
994
94. เมอปรากฏภาาพตวอยาง เลลอกปม “ตกลลง”
95.
96.
จะไดภาพสวนนหวเวบ
การเพม/ปรบ
ตามต
บเปลยน เมน
ตวอยาง ดงภา
การนาทางใน
95
97
าพ
นแนวนอน โด
7
ยการเลอก “การนาทางในนแนวนอน”
996
97. คลกเลอกแถบบการแกไขกา
98. เลอกเมน “เพพมหนาเวบ”
ารนาทางในแน
นวนอน
99
98
99. เลอกรายการรหนาเวบทเราาไดทาไวแลวดดานลาง
100. สามารถเพมรายกการหนาเวบได
จาก
ดอก และจดล
แผนผงไซต แ
100
าดบการแสด
และเลอกปม
0
10
งรายการไดต
1
“ตกลง”
ามตองการ
0
101
. ตวอยางรายการเมมน การนาทาางในแนวนอน ดงภาพ
102
การเผยยแพรผลงานนเวบไซต
. การ
.
102
103 ในรา
แชรและสทธ
ายการแชรแล
คลกเลอกปม
ละสทธ เลอก
ม เล
“เปลยน”
อก “การแชร
1
รและสทธ”
104
103
. 104 กาหหนดรปแบบกาารแชร ซงมอยย 5 รปแบบ แ แตในทนใหเลลอกการแชรแบบบ “สาธารณะท
ยางเวบไซตตวอ
างเวบ”
1055