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

27
1 เริ่มต้นใช้งาน Google Site การสร้างเว็บไซต์ด้วย Google Sites Google Sites คือ โปรแกรมของ Google ที่ให้บริการสร้างเว็บไซต์ฟรี สามารถสร้างเว็บไซต์ ได้ง่าย ปรับแต่งรูปลักษณ์ได้อย่างอิสระ และรวบรวมความสามารถของข้อมูลไว้ในที่เดียว เช่น วีดีโอ, ปฏิทิน, เอกสารอื่นๆ ทาให้ช่วยอานวยความสะดวกได้เป็นอย่างมาก ในการแก้ไขหน้าเว็บ จะเป็นกลุ่ม หรือทั้งองค์กรก็ไดรู้จัก Google Sites 1. ให้บริการครั้งแรก เดือน พฤษภาคม 2551 2. ให้บริการฟรีไม่เสียค่าใช้จ่าย 3. พื้นที่จัดเก็บ 10 GB 4. ขนาดไฟล์ที่ใช้ในการจัดเก็บสูงสุด 10 MB 5. เฉพาะพื้นที่เว็บไซต์ไม่เกิน 100 MB แต่หากรวมเป็นสมาชิกบริการอื่นๆของ Google เช่น youtube, calendar, picasa ไม่เกิน 10 GB 6. มี Gadget เยอะแยะมากมาย และสามารถทาในรูปแบที่เราต้องการได้

Upload: wannipa-boonruan

Post on 17-Feb-2017

645 views

Category:

Education


0 download

TRANSCRIPT

Page 1: การสร้างเว็บไซต์ด้วย Google sites

1 เรมตนใชงาน Google Site

การสรางเวบไซตดวย Google Sites Google Sites คอ โปรแกรมของ Google ทใหบรการสรางเวบไซตฟร สามารถสรางเวบไซต ไดงาย ปรบแตงรปลกษณไดอยางอสระ และรวบรวมความสามารถของขอมลไวในทเดยว เชน วดโอ, ปฏทน, เอกสารอนๆ ท าใหชวยอ านวยความสะดวกไดเปนอยางมาก ในการแกไขหนาเวบ จะเปนกลม หรอทงองคกรกได รจก Google Sites 1. ใหบรการครงแรก เดอน พฤษภาคม 2551 2. ใหบรการฟรไมเสยคาใชจาย 3. พนทจดเกบ 10 GB 4. ขนาดไฟลทใชในการจดเกบสงสด 10 MB 5. เฉพาะพนทเวบไซตไมเกน 100 MB แตหากรวมเปนสมาชกบรการอนๆของ Google เชน youtube, calendar, picasa ไมเกน 10 GB 6. ม Gadget เยอะแยะมากมาย และสามารถท าในรปแบทเราตองการได

Page 2: การสร้างเว็บไซต์ด้วย Google sites

2 เรมตนใชงาน Google Site

เรมตนสราง Site 1. สมครเขาใชงาน โดยเขาไปท URL: www.google.com/sites แลวลงชอเขาใช Gmail โดยกรอก Email และ Password คลกปม “ลงชอเขาใช”

2. เลอกปม “สราง”

Page 3: การสร้างเว็บไซต์ด้วย Google sites

3 เรมตนใชงาน Google Site

3. เลอกเทมแพลตทจะใช หากตองการเลอกดเทมแพลตอนๆใหคลกท “เลอกดเพมเตม ในแกลลอร” ซงในทนจะเลอกแบบ แมแบบวางเปลา 4. ตงชอไซต (title) ของคณ ส าหรบสวนของต าแหนงไซต google sites จะท าการตงใหโดยอตโนมต 5. เลอกธมแสดงในเวบไซต ซงสามารถปรบเปลยนในภายหลงได 6. ตวเลอกทเพมเตม สวนนจะใหใสอธบายเวบไซตและมใหเลอกวาเนอหาภายในเวบไซตเหมาะส าหรบผใหญเทานน

Page 4: การสร้างเว็บไซต์ด้วย Google sites

4 เรมตนใชงาน Google Site

7. พมพรหสตามทปรากฏเพอยนยนวาเปนมนษยไมใช Bot ของ Google หรอ Spam จากเวบตางๆ 8. คลกปม สราง 9. เมอสรางไซตแลวจะปรากฏหนาตาเวบไซตดงภาพ จากนนเรมตกแตงเวบไซต

การใชงาน Theme 10. ตกแตงเวบไซต โดยการเปลยน Theme เพอใหเวบไซตมรปแบบแสดงทสวยงาม โดยคลกเลอก “เพมเตม”

Page 5: การสร้างเว็บไซต์ด้วย Google sites

5 เรมตนใชงาน Google Site

11. เลอกจดการไซต 12. สงเกตเมนดานซาย เลอก “ธม”

13. เลอกรปแบบธมไดตามทตองการ วธการโดยคลก “ดตวอยาง” แลวคลกเลอก “บนทก”

14. คลกทชอไซต กลบไปยงหนาเวบ

Page 6: การสร้างเว็บไซต์ด้วย Google sites

6 เรมตนใชงาน Google Site

การแกไขหนาเพจ 15. แถบเมน ฟงกชนทใชเพมลกเลนกบเวบไซต รวมไปถง Gadget ตางๆและเครองมอใน การจดการหนาเวบ

16. เมน “แทรก” เปนเมนควบคมการใชมเดย เชน รปภาพ วดโอ ตางๆ

17. เมน “รปแบบ” เปนเมนทใชก าหนดรปแบบของตวอกษร ซงเปนรปแบบค าสงเดยวกนกบแถบเมน

Page 7: การสร้างเว็บไซต์ด้วย Google sites

7 เรมตนใชงาน Google Site

18. เมนตาราง ใชสรางหรอจดการขอมลในรปแบตาราง

19. เมนการจดวาง เปนเมนใชส าหรบก าหนดรปแบบการจดวางคอลมภในหนาเพจ

Page 8: การสร้างเว็บไซต์ด้วย Google sites

8 เรมตนใชงาน Google Site

การเพม Text Generator 20. เขาไปทเวบสราง Text Generator เลอกตกแตงตามแบบทตองการแลว Get Code เสรจแลวน ามาเพมในเพจหนาแรก เลอกคลกปม “แกไขหนาเวบ”

21. หนาเพจทใหแกไขรายละเอยดจะม Toolbar ในการจดรปแบบขอความตางๆ ใหเลอก tag “<HTML>

22. วาง Code HTML ท Get มาจากเวบ Text Generator ในชอง Text box

23. หากตองการดตวอยางกอนบนทก ใหเลอกแทบแสดงตวอยาง 24. เรยบรอยแลว เลอกปม “อปเดต” 25. เลอกปม “บนทก” เพอบนทกหนาเพจ

Page 9: การสร้างเว็บไซต์ด้วย Google sites

9 เรมตนใชงาน Google Site

การเพมรปภาพ 26. คลกปม “แกไขหนาเวบ” แลวคลกปม “แทรก” 27. เลอกเมน “รปภาพ”

28. ไดปรากฏ Dialog box เพมภาพ จากนนใหอพโหลดภาพ “เลอกไฟล” แลวคลกทไฟลภาพทตองการ

Page 10: การสร้างเว็บไซต์ด้วย Google sites

10 เรมตนใชงาน Google Site

29. สามารถจดรปแบบของภาพ โดยเลอกรปแบบทตองการจาก popup ทขนภายใตรปภาพ

การเพมลงก 30. การเชอมโยงลงกภายในเวบไซตใหคลกปม “แกไขหนาเวบ” เลอกปม “แทรก” แลวเลอกเมน “ลงก”

31.จะปรากฎ Dialog box สรางลงก เลอกหนาเวบไซตทตองการเชอมโยง ซงสามารถดไดจาก แผนผงไซต และการเปลยนแปลงขอมลครงลาสดบนเวบ แลวเลอกปม “ตกลง”

Page 11: การสร้างเว็บไซต์ด้วย Google sites

11 เรมตนใชงาน Google Site

32. การเชอมโยงลงกจากภายนอก ท าตามรปแบขอ 30 จะปรากฏ Dialog box สรางลงกซงในทนจะเลอกใชแบบ “ทอยเวบ” 33. ใสขอความทชอง “ขอความทจะแสดง” และใส URL ทชอง ลงกไปท URL ทก าหนด 34. หากตองการใหลงกเปดหนาตางใหม คลกเลอกท “เปดลงกนในหนาตางใหม” 35. เสรจแลวคลกปม “ตกลง”

การเพมหนาเพจเวบไซต 36. เรมตนสรางหนาเพจ โดยคลกปม “เพมหนาเพจ” ดานบนขวาของหนาจอ 37. เมอเปดหนาสรางเพจใหมขนมาแลว กรอกชอ ตงชอหนาเวบของคณ

Page 12: การสร้างเว็บไซต์ด้วย Google sites

12 เรมตนใชงาน Google Site

38. เลอกเทมเพลตทจะใช ซงในสวนนมเลอกอย 4 รปแบบคอ - หนาเวบ - ประกาศ - ตเกบเอกสาร - รายการ 39. เลอกต าแหนงเมนทตองการ 40. คลกปม “สราง” การใชงาน Gadget การสรางเอกสาร 41. คลกเลอก “แกไขหนาเวบ” เลอกปม “แทรก” เลอกเมน “เอกสาร” ในกรณทมเอกสารใน Google Document ใหเลอกเอกสารทตองการน ามาแสดงแลวกดปม “เลอก”

42. จากนนตงคาการแสดงผลของเอกสาร แลวคลกปม “บนทก”

Page 13: การสร้างเว็บไซต์ด้วย Google sites

13 เรมตนใชงาน Google Site

43. คลกปม “บนทก” ตรงมมบนขวาของหนาจอ เพอบนทกหนาเพจทไดสรางขน

การสรางงานน าเสนอ 44. คลกปม “แกไขหนาเวบ” เลอกปม “แทรก” แลวเลอกเมน “การน าเสนอ”

Page 14: การสร้างเว็บไซต์ด้วย Google sites

14 เรมตนใชงาน Google Site

45. กรณทม งานน าเสนอ ใน Google Document ใหเลอกงานน าเสนอทตองการ แลวคลกปม “เลอก”

46. จากนนใหตงคาการแสดงผลของเอกสาร แลวคลกปม “บนทก”

Page 15: การสร้างเว็บไซต์ด้วย Google sites

15 เรมตนใชงาน Google Site

การสรางสเปรดชต 47. คลกปม “แกไขหนาเวบ” เลอกปม “แทรก” แลวเลอกเมน “สเปรดชต”

48. เลอก สเปรดชตทตองการน ามาแสดงแลวคลกปม “เลอก”

Page 16: การสร้างเว็บไซต์ด้วย Google sites

16 เรมตนใชงาน Google Site

49. จากนนใหตงคาการแสดงผลของสเปรดชต ซงในทน จะเลอก ดเปน : แบบรายการ เสรจแลวคลกปม “บนทก”

50. เมอบนทกหนาเพจ จะไดดงน

Page 17: การสร้างเว็บไซต์ด้วย Google sites

17 เรมตนใชงาน Google Site

การสรางวดโอ 51. คลกปม “แกไขหนาเวบ” เลอกปม “แทรก” แลวเลอกเมน “วดโอ”

52. น า URL วดโอจาก youtube มาวางในชอง “วาง URL วดโอ youtube ของคณ แลว คลกปม “บนทก”

53. เมอบนทกหนาเพจแลว กจะปรากฏวดโอ ดงภาพ

Page 18: การสร้างเว็บไซต์ด้วย Google sites

18 เรมตนใชงาน Google Site

การสรางแผนท 54. คลกปม “แกไขหนาเวบ” เลอกปม “แทรก” แลวเลอกเมน “แผนท”

55. ระบสถานท เพอคนหาปลายทางและวางเครองหมายบอกต าแหนงเสรจแลวคลก “เลอก”

56. ตงคาการแสดงผลของแผนท

Page 19: การสร้างเว็บไซต์ด้วย Google sites

19 เรมตนใชงาน Google Site

57. เมอบนทกหนาเพจ กจะปรากฏดงภาพ

การสรางปฏทน 58. คลกปม “แกไขหนาเวบ” เลอกปม “แทรก” แลวเลอกเมน “ปฏทน”

59. เลอกปฏทนทตองการแสดง เสรจแลวคลกปม “เลอก”

Page 20: การสร้างเว็บไซต์ด้วย Google sites

20 เรมตนใชงาน Google Site

60. การตงคาแสดงผลของปฏทน

61. เมอบนทกหนาเพจเรยบรอย จะปรากฏดงน

Page 21: การสร้างเว็บไซต์ด้วย Google sites

21 เรมตนใชงาน Google Site

การสรางขาวประกาศ 62. เลอกปม “สรางหนาเวบใหม” แลวตงชอหนาเวบของคณ

63. เลอกเทมเพลตทใช กดเลอก “ประกาศ” 64. เลอกต าแหนงทตองการแสดงเมน 65. คลกปม “สราง” 66. เมอปรากฏหนาเพจขาว ถาตองการโพสประกาศขาวคลกเลอก “โพสใหม”

67. น าขอมลขาวหรอบทความทตองการประกาศ มาจดวางในหนาเพจ และบนทกหนาเพจ

Page 22: การสร้างเว็บไซต์ด้วย Google sites

22 เรมตนใชงาน Google Site

68. คลกทเมนขาวประกาศ พบวาขาวหรอบทความทโพสใหม จะแสดงอยหนาเพจนเชนเดยวกน โดยเรยงล าดบจากโพสลาสดอยบนสด

การสรางตเกบเอกสาร 69. เลอกปม “สรางหนาเวบใหม” แลวตงชอหนาเวบ

70. เลอกเทมเพลตทใช ซงในทนเลอก “ตเกบเอกสาร” 71. เลอกต าแหนงทตองการแสดงเมนในทนเลอก “วางหนาเวบทระดบบนสด” 72. คลกปม “สราง” 73. สามารถเกบไฟลและลงก โดยเลอกปม “เพมไฟล” หรอ “เพมลงก”

Page 23: การสร้างเว็บไซต์ด้วย Google sites

23 เรมตนใชงาน Google Site

74. หากตองการความเปนหมวดหม สามารน าไฟลทตองการเกบไวทโฟลเดอร ซงตองการสรางโพลเดอรกอน โดยคลกทปม “ยายไปท” 75. ลบไฟลทไมตองการ โดยคลกปม “ลบ” 76. หากตองการทราบการเปลยนแปลงลาสดในสวนตเกบเอกสาร สามารถเลอกปม “สมครรบการเปลยนแปลง” ขอมลการเปลยนแปลงตเกบเอกสารกจะถกแจงไปทอเมลของเรา การสรางรายการ 77. เลอกปม “สรางหนาเวบใหม” แลวตงชอหนาเวบของคณ 78. เลอกเทมเพลตทจะใช ซงในทนเลอก “รายการ” 79. เลอกต าแหนงทตองการแสดงเมนในทนเลอก “วางหนาเวบทระดบบนสด” 80. คลกปม “สราง”

Page 24: การสร้างเว็บไซต์ด้วย Google sites

24 เรมตนใชงาน Google Site

81. เลอกแมแบบรายการ ซงม 4 แมแบบ คอ - รายการสงทตองด าเนนการ ตดตามรายการสงทตองด าเนนการจากประชมหรอโครงการ - รายการปญหา ตดตามปญหาทเปดอยส าหรบโครงการของคณ - สถานะของหนวย ตดตามสถานะของแตละหนวยในโครงการของคณ - สรางของตนเองก าหนดคอลมภของคณเองส าหรบรายการในทนเลอก “รายการสงทตองการ”

82. เลอก “เพมรายการ”

83. กรอกรายละเอยดเพอเพมรายการในสงทตองด าเนนงาน เมอเสรจเรยบรอยหรอมขอมลทตองแกไข สามารถระบลงในชองขอความได

Page 25: การสร้างเว็บไซต์ด้วย Google sites

25 เรมตนใชงาน Google Site

84. แกไขรายการไดโดยคลกทแถวรายการนน จะปรากฏ Dialog Box ใหแกไขรายการไดตามตองการ เสรจแลวคลก “บนทก”

85. ปรบแตงรายการ โดยเลอก “ปรบแตงรายการน” 86. สามารถเพมคอลมนทตองการบนทกขอมลรวมถงเพมการจดเรยงขอมลตามความตองการ

Page 26: การสร้างเว็บไซต์ด้วย Google sites

26 เรมตนใชงาน Google Site

พนทเกบขอมลไซต 87. เลอกเมน “เพมเตม” แลวเลอก “จดการไซต”

88. เมนดานซายมอเลอก “ทวไป” 89. สวนพนทเกบขอมลของไซตวาใชพนทไปแลวเทาไร

Page 27: การสร้างเว็บไซต์ด้วย Google sites

27 เรมตนใชงาน Google Site

ตกแตงสและแบบอกษรเพมเตม 90. เลอกเมน “เพมเตม” แลวเลอก “จดการไซต”

91. เลอกสและแบอกษร 92. สวนตางๆทสามารถก าหนดเองได