Page 1
การสรางเวบไซตดวย 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 ผคนสำมำรถรวบรวมขอมลทหลำกหลำยไวในทเดยวได
อยำงรวดเรว ไดแก วดโอ ปฏทน งำนน ำเสนอ ไฟลแนบ และขอควำม และสำมำรถใชงำนรวมกบกลมเลกๆ ทงองคกรหรอทงโลก เพอดหรอแกไขไดอยำงงำยดำย
Page 2
เรมตนสรางไซต
1. ลงชอเขำใชงำนโดยบญชของ Gmail หรอ กรณครแกนน ำภำคเหนอ ใหลองชอเขำใชดวย Google
Account และ Google password จำกมหำวทยำลยนเรศวร ก ำหนด ท URL: sitemail.nu.ac.th
2. เลอกปม
3. เลอก Apps ไซต
1
2
3
Page 3
4. เลอกปม “สรำง”
5. เลอกเทมเพลตทจะใช หำกตองกำรเลอกเทมเพลตอน ๆ ใหคลกท “เลอกดเพมเตม”
6. ตงชอไซต (title) ของคณ ส ำหรบสวนของต ำแหนงไซต google sites จะท ำกำรตดตงใหโดย
อตโนมต
4
5
6
Page 4
7. เลอกธมแสดงในเวบไซต ซงสำมำรถปรบเปลยนในภำยหลงได
8. เลอกหมวดหมของไซต
9. เลอกตวเลอกเพมเตม สวนนจะใหใสค ำอธบำยเวบไซต
10. คลกปม “สรำง”
11. เมอสรำงเสรจแลวจะปรำกฏหนำตำเวบไซตดงภำพ ตวอยำงนเลอกธมชอ “สมดฉก”
7
8
9
10
11
Page 5
การใชงาน Theme
12. ตกแตงเวบไซตหรอเปลยน Theme เพอใหเวบไซตมรปแบบทสวยงำมโดยสำมำรถเลอกท
13. เลอก “จดกำรไซต”
12
13
Page 6
14. เลอก “ธม สและแบบอกษร”
15. เลอก เปลยน ธม และปรบแตงตำมสะดวก
16. เลอกปม “บนทก”
14
15
16
Page 7
17. เลอกคลกทชอไซต เพอกลบไปหนำเวบไซต
18. หนำเวบหลงกำรเปลยนแปลงธม
การแกไขหนา เพจ (Page)
19. กำรแกไขหนำเพจสำมำรถท ำไดโดยเลอกเครองหมำยรปดนสอ
17
18
19
Page 8
20. แถบเมนและฟงกชนทใชเพมลกเลนใหกบเวบไซต รวมไปถง gadget ตำง ๆ และเครองมอในกำร
จดกำรหนำเวบ
21. เมน “แทรก” เปนเมนทควบคมเกยวกบกำรใชมเดย เชน กำรใสรปภำพ ลงค วดโอและ gadgetตำง ๆ
จงท ำใหเมนนถกใชงำนบอยทสด
20
21
Page 9
22. เมน “รปแบบ” เปนเมนทใชก ำหนดรปแบบของตวอกษร ซงเปนรปแบบค ำสงเดยวกบแถบเมน
23. เมน “ตำรำง” เปนเมนทใชสรำง หรอจดกำรขอมลในรปแบบตำรำง
22
23
Page 10
24. เมน “กำรออกแบบ” เปนเมนทใชส ำหรบก ำหนดรปแบบกำรจดวำงคอลมนในหนำเพจ
การเพมรปภาพ
25. เลอกต ำหนงทตองกำรแทรกรปภำพในหนำเวบ และเลอก เมน “แทรก” เลอก รปภำพ
24
25
Page 11
26. จะปรำกฏ Dialog box เพมรปภำพ จำกนนใหอปโหลดภำพโดยเลอก “อปโหลดภำพ” แลวคลก
เลอกไฟลภำพทตองกำร
26
Page 12
27. เมออปโหลดภำพเสรจแลวสำมำรถปรบ ขนำด และต ำแหนงดวยแถบควบคมดำนลำง
การเพมลงค
28. กำรเชอมโยงลงคภำยในเวบไซตและภำยนอกเวบไซต เลอก ปม “แทรก” เลอกเมน “ลงค”
27
28
Page 13
29. จะปรำกฏ Dialog box สรำงลงค เลอกหนำเวบไซตทตองกำรเชอมโยง ซงสำมำรถดไดจำกแผนผง
เวบไซต และกำรเปลยนแปลงลำสด เสรจแลวเลอกปม “ตกลง”
30. กำรเชอมโยงจำกภำยนอก ใหท ำตำมขอ 28 แลวจะปรำกฏ Dialog box สรำงลงค ซงในทนเลอก
แบบ “ทอยเวบ”
29
30 31
32
33
Page 14
31. โดยใสขอควำมทชอง “ขอควำมทจะแสดง” และ ใส URL ทชอง “ลงคไปท URL น”
32. หำกตองกำรใหลงคเปดในหนำตำงใหม ใหเลอกคลก ท checkbox “เปดลงคนในหนำตำงใหม”
33. เสรจแลวคลกปม “ตกลง”
การเพมหนาเพจเวบไซต
34. เรมตนสรำงหนำเพจ โดยคลกทปม ดำนบนของหนำจอ
35. เมอเปดหนำสรำงเพจขนมำแลว กรอกชอ ตงชอหนำเวบของคณ
36. เลอกเทมเพลตทจะใช ซงในสวนนมใหเลอก 5 รปแบบ คอ
1) หนำเวบ เปนหนำหลกของเวบไซตในกำรใหขอมลและประกำศตำง ๆ ของเวบไซต
2) ประกำศ ใชในกำรประกำศขำวสำรตำง ๆ
3) ตเกบเอกสำร ใชในกำรอปโหลดไฟลตำง ๆ เชน รปภำพ, เพลงและอนๆซงสำมำรถแชรให
คนอนดำวนโหลดได
34
35
36
Page 15
4) รำยกำร ใชแสดงรำยกำรตำง ๆ รวมถงรำยละเอยดของแตละรำยกำรดวย
5) หนำเรมตน ใชเปนหนำเรมตนของผใชงำนแตละคน
37. เลอกต ำแหนงเมนทตองกำร
38. คลกปม “สรำง”
39. ไดหนำเพจตำมชอทเรำตองกำร
37
38
39
Page 16
การแทรกเอกสารจาก Google Drive
40. กำรแทรกเอกสำรจำก Google Docs ใหเลอกทเมน “แทรก” เลอก ไดรฟ และเอกสำรตำมล ำดบ
41. จะม Dialog box ของ Google ไดรฟ ใหเลอกเอกสำรทตองกำร
42. คลกปม “เลอก”
40
41
42
Page 17
43. จำก Dialog box ของ แทรก Google Document เลอกปรบขนำดกำรแสดงเอกสำรตำมตองกำร แลว
เลอกปม “บนทก”
44. จะไดภำพแสดงขอบเขตของเอกสำรทเรำแทรก และจะเหนเอกสำรจรงเมอเลอกปม บนทก
ดำนบนขวำ
43
44
Page 18
45. กำรแทรกงำนน ำเสนอจำก Google งำนน ำเสนอ ใหเลอกทเมน “แทรก” เลอก ไดรฟ และงำน
น ำเสนอ ตำมล ำดบ
46. จะม Dialog box ของ Google ไดรฟ ใหเลอกงำนน ำเสนอ ทตองกำร
47. คลกปม “เลอก”
45
46
47
Page 19
48. จำก Dialog box ของ แทรก งำนน ำเสนอ ของ Google เลอกปรบขนำดกำรแสดงเอกสำรตำม
ตองกำร แลว เลอกปม “บนทก”
49. จะไดภำพแสดงขอบเขตของงำนน ำเสนอทเรำแทรก และจะเหนงำนน ำเสนอจรงเมอเลอกปม
บนทก ดำนบนขวำ
49
48
Page 20
50. กำรแทรก สเปรดซต จำก Google สเปรดซต ใหเลอกทเมน “แทรก” เลอก ไดรฟ และสเปรดซต
ตำมล ำดบ
51. จะม Dialog box ของ Google ไดรฟ ใหเลอก สเปรดซต ทตองกำร
52. คลกปม “เลอก”
50
51
52
Page 21
53. จำก Dialog box ของ แทรก สเปรดซตของ Google เลอกปรบขนำดกำรแสดงเอกสำรตำมตองกำร
แลว เลอกปม “บนทก”
54. จะไดภำพแสดงขอบเขตของสเปรดซตทเรำแทรก และจะเหนงำนสเปรดซตจรงเมอเลอกปมบนทก
ดำนบนขวำ
54
53
Page 22
55. กำรแทรก วดโอ จำก YouTube ใหเลอกทเมน “แทรก” เลอก YouTube ตำมล ำดบ
56. จะม Dialog box ของ แทรก วดโอ YouTube
55
56
Page 23
57. น ำ URL วดโอ จำก YouTube มำวำงในชอง “วำง URL วดโอ YouTube ของคณ” แลวคลกปม
“บนทก”
58. เมอบนทกหนำเวบเพจแลว จะปรำกฏ วดโอ ดงภำพ
57
58
Page 24
59. กำรแทรก แผนท จำก Google Maps ใหเลอกทเมน “แทรก” เลอก แผนท ตำมล ำดบ
60. จำก Dialog box แทรก แผนทของ Google กรอกขอมลแผนทตำมตองกำรในชอง “ปอนต ำแหนง”
แลว เลอกปม “บนทก”
59
60
Page 25
61. จะม Dialog box แทรก Google Map เลอกปรบขนำดและเลอก ปม “บนทก”
62. เมอบนทกแลวจะไดหนำแผนท ดงภำพ
61
62
Page 26
63. กำรแทรก ปฏทน จำก Google Carlendar ใหเลอกทเมน “แทรก” เลอก ปฏทน ตำมล ำดบ
64. จะม Dialog box ของ Google ไดรฟ ใหเลอก ปฏทน ทเรำไดสรำงไวกอนหนำน แลว
65. คลกปม “เลอก”
63
64
65
Page 27
66. จำก Dialog box ของ แทรก ปฏทนของ Google เลอกปรบขนำด และรำยละเอยดตำมตองกำร แลว
เลอกปม “บนทก”
67. จะไดภำพแสดงปฏทน กจกรรมตำมทเลอก ดงภำพ
67
66
Page 28
การสรางขาวประกาศ
68. เลอกปม สรำงหนำเวบใหม แลวตงชอหนำเวบของคณ
69. เลอกเทมเพลตทจะใช ซงใหเลอก “ประกำศ”
70. เลอกปม “สรำง”
71. จะไดหนำใหม และเรมเขยนขำวประกำศจำกปม “โพสตใหม”
68
69
70
71
Page 29
72. ทดลองประกำศขำวสำร และบนทกหนำเวบ จะไดภำพ ดงน
การสรางตเกบเอกสาร
73. เลอกปม สรำงหนำเวบใหม แลวตงชอหนำเวบของคณ
72
73
74
75
Page 30
74. เลอกเทมเพลตทจะใช ซงใหเลอก “ตเกบเอกสำร”
75. เลอกปม “สรำง”
76. สำมำรถเกบไฟล และลงค โดยเลอกปม “เพมไฟล” หรอ “เพมลงค”
77. หำกตองกำรควำมเปนหมวดหม สำมำรถน ำไฟลทตองกำรจดเกบไปไวทโฟลเดอร ซงจะตองสรำง
โฟลเดอรใหมกอน โดยคลกปม “ยำยไปท”
78. ลบไฟลทไมตองกำรได โดยคลกปม “ลบ”
79. หำกตองกำรทรำบกำรเปลยนแปลงลำสดของสวนตเกบเอกสำร สำมำรถเลอกปม “สมครรบกำร
เปลยนแปลง” ขอมลกำรเปลยนแปลงตเกบเอกสำรจะถกแจงไปทำงอเมลของเรำ
76
78
77
79
Page 31
การสรางรายการ
80. เลอกปม สรำงหนำเวบใหม แลวตงชอหนำเวบของคณ
81. เลอกเทมเพลตทจะใช ซงใหเลอก “รำยกำร”
82. เลอกปม “สรำง”
83. เลอกแมแบบรำยกำรซงม 4 แมแบบ คอ
1) รำยกำรสงทตองด ำเนนกำร ตดตำมรำยกำรสงทตองด ำเนนกำรจำกกำรประชมหรอ
โครงกำร
2) รำยกำรปญหำ ตดตำมปญหำทเปดอยส ำหรบโครงกำรของคณ
3) สถำนะของหนวย ตดตำมสถำนะของแตละหนวยในโครงกำรของคณ
80
81
82
Page 32
4) สรำงของตนเอง ก ำหนดคอลมนของคณเองส ำหรบรำยกำร
84. เลอก “รำยกำรสงทตองด ำเนนกำร”
83
84
Page 33
85. เลอก “เพมรำยกำร”
86. กรอกรำยละเอยดเพอ เพมรำยกำรสงทตองด ำเนนงำน หำกรำยกำรนน ๆ เสรจเรยบรอย หรอม
ขอมลทตองกำรแกไข กสำมำรถระบลงไปได เสรจแลวเลอก “บนทก”
87. ปรบแตงรำยกำรได โดยเลอก “ปรบแตงรำยกำรน”
85
86
87
Page 34
88. สำมำรถเพมคอลมนทตองกำรบนทกขอมล รวมถงเพมรำยกำรจดเรยงขอมล ไดตำมใจชอบ
ตวอยำงรำยกำรทตองท ำ ดงภำพ
88
Page 35
การแกไขการออกแบบไซต
89. เลอกปม และเลอก “แกไขกำรออกแบบไซต”
89
Page 36
90. จำก Dialog box ใหเลอกรำยกำรเมนดำนบน เพอกำรปรบแก
91. กำรเพมสวนหวของเวบไซต (กรณนไดมกำรจดท ำสวนหวเปนภำพไวแลว) โดยกำรเลอกท
“สวนหว”
92. เลอก “แกไขสวนหวของไซต”
90
91
92
Page 37
93. ปรำกฏ Dialog box ในกรณนเรำจะอปโหลดรปภำพจำกไฟลภำพทไดเตรยมไวแลว โดยกำรแนบ
ไฟล จำกปม “Browse…”
94. เลอกไฟลภำพทตองกำร แลวเลอกปม “Open”
93
94
Page 38
95. เมอปรำกฏภำพตวอยำง เลอกปม “ตกลง”
96. จะไดภำพสวนหวเวบตำมตวอยำง ดงภำพ
97. กำรเพม/ปรบเปลยน เมน กำรน ำทำงในแนวนอน โดยกำรเลอก “กำรน ำทำงในแนวนอน”
95
96
97
Page 39
98. คลกเลอกแถบกำรแกไขกำรน ำทำงในแนวนอน
99. เลอกเมน “เพมหนำเวบ”
98
99
Page 40
100. เลอกรำยกำรหนำเวบทเรำไดท ำไวแลวดำนลำง จำก แผนผงไซต และเลอกปม “ตกลง”
101. สำมำรถเพมรำยกำรหนำเวบไดอก และจดล ำดบกำรแสดงรำยกำรไดตำมตองกำร
100
101
Page 41
102. ตวอยำงรำยกำรเมน กำรน ำทำงในแนวนอน ดงภำพ
102
Page 42
การเผยแพรผลงานเวบไซต
103. กำรแชรและสทธ คลกเลอกปม เลอก “กำรแชรและสทธ”
104. ในรำยกำรแชรและสทธ เลอก “เปลยน”
103
104
Page 43
105. ก ำหนดรปแบบกำรแชร ซงมอย 5 รปแบบ แตในทนใหเลอกกำรแชรแบบ
“สำธำรณะทำงเวบ”
ตวอยำงเวบไซต
105