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