การสร้างเว็บไซต์ด้วย Google Sites · Google Sites...
43
การสร้างเว็บไซต์ด้วย 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 ผู้คนสำมำรถรวบรวมข้อมูลที่หลำกหลำยไว้ในที่เดียวได้ อย่ำงรวดเร็ว ได้แก่ วิดีโอ ปฏิทิน งำนน ำเสนอ ไฟล์แนบ และข้อควำม และสำมำรถใช้งำน ร่วมกับกลุ่มเล็กๆ ทั้งองค์กรหรือทั้งโลก เพื่อดูหรือแก้ไขได้อย่ำงง่ำยดำย
Transcript of การสร้างเว็บไซต์ด้วย Google Sites · Google Sites...
การสรางเวบไซตดวย 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
