google sites - fis psu phuket · pdf...

32
การสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google ที่ให้บริการสร้างเว็บไซต์ฟรี สามารถสร้างเว็บไซต์ได้ง่าย ปรับแต่งรูปลักษณ์ ได้อย่างอิสระ และสามารถรวบรวมความหลากหลายของข้อมูลไว้ในที่เดียว เช่น วิดีโอ, ปฏิทิน, เอกสาร อื่นๆ ทาให้ช่วยอานวย ความสะดวกได้เป็นอย่างมาก ในการแก้ไขหน้าเว็บ จะเป็นกลุ่ม หรือ ทั ้งองค์กรก็ไดรู ้จัก Google Sites ให้บริการครั ้งแรก เดือน พฤษภาคม 2551 ให้บริการฟรี ไม่เสียค่าใช้จ่าย พื ้นที่จัดเก็บ 10GB ขนาดไฟล์ที่ใช้ในการจัดเก็บสูงสุด 10 MB * เฉพาะพื ้นที่เว็บไซต์ไม่เกิน 100MB แต่หากรวมเป็นสมาชิกบริการอื่นๆ ของ Google ตัวอื่นๆเช่น youtube calendar picasa ไม่เกิน 10 GB มี Gadget เยอะแยะมากมาย และสามารถทาในรูปแบบที่เราต้องการได้ ข้อด้อย ใช้งานร่วมกับ CSS ที่ออกแบบเองไม่ได้ เว็บไซต์อยู่ภายใต้ Google ทาให้ domain name ยาว ยังมีปัญหาเรื่องการใช้งานร ่วมกับ script อื่นๆ ทาได้เฉพาะเมื่อต่ออินเตอร์เน็ตเท่านั ้น

Upload: phungtuyen

Post on 01-Feb-2018

238 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

การสรางเวบไซตดวย Google Sites

Google Sites คอโปรแกรมของ Google ทใหบรการสรางเวบไซตฟร สามารถสรางเวบไซตไดงาย ปรบแตงรปลกษณ

ไดอยางอสระ และสามารถรวบรวมความหลากหลายของขอมลไวในทเดยว เชน วดโอ, ปฏทน, เอกสาร อนๆ ท าใหชวยอ านวย

ความสะดวกไดเปนอยางมาก ในการแกไขหนาเวบ จะเปนกลม หรอ ทงองคกรกได

รจก Google Sites

ใหบรการครงแรก เดอน พฤษภาคม 2551

ใหบรการฟร ไมเสยคาใชจาย

พนทจดเกบ 10GB

ขนาดไฟลทใชในการจดเกบสงสด 10 MB

* เฉพาะพนทเวบไซตไมเกน 100MB แตหากรวมเปนสมาชกบรการอนๆ ของ Google ตวอนๆเชน youtube calendar

picasa ไมเกน 10 GB

ม Gadget เยอะแยะมากมาย และสามารถท าในรปแบบทเราตองการได

ขอดอย

ใชงานรวมกบ CSS ทออกแบบเองไมได เวบไซตอยภายใต Google ท าให domain name ยาว ยงมปญหาเรองการใชงานรวมกบ script อนๆ ท าไดเฉพาะเมอตออนเตอรเนตเทานน

Page 2: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

“ลงชอเขาใชงาน”

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

3. เลอกเทมเพลตทจะใช หากตองการเลอกดเทมเพลตอนๆ ใหคลกท “เลอกดเพมเตมในแกลเลอร” ซงในทนจะเลอกเปนแบบ

แมแบบวางเปลา

4. ตงชอไซต (title) ของคณ ส าหรบสวนของต าแหนงไซต google sites จะท าการตงใหโดยอตโนมต

5. เลอกธมแสดงในเวบไซต ซงสามารถปรบเปลยนในภายหลงได

6. ตวเลอกเพมเตม สวนนจะใหใสค าอธบายเวบไซต และมใหเลอกวาเนอหาภายในเวบไซตเหมาะส าหรบผใหญเทานน

7. พมพรหสตามทปรากฏเพอยนยนวาเปนมนษย ไมใช Bot ของ Google หรอ Spam จากเวบตางๆ

8. คลปป ม “สราง”

2

1

Page 3: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

4

3

5

6

7

8

Page 4: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

9. เมอสรางไซตเสรจแลวจะปรากฏหนาตาเวบไซตดงภาพ จากนนเรมตกแตงเวบไซต

การใชงาน Theme

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

9

10

11

Page 5: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

11. เลอกจดการไซต

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

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

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

12

13

14

Page 6: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

การแกไขหนาเพจ

ในสวนของการจดการหนาเพจนน มดงน

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

16. เมน “แทรก” เปนเมนทควบคมเกยวกบการใชมเดย เชน การใสรปภาพ ลงก วดโอ และ gadget ตางๆ จงท าใหเมนนถกใช

งานบอยทสด

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

15

16

17

Page 7: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

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

การเพม Text Generator

20. เขาไปทเวบสราง Text generator เลอกตกแตงตามแบบทตองการแลว Get Code (เฉพาะ HTML) เสรจแลวน ามาเพมในเพจ

หนาแรก เลอกคลกปม “แกไขหนาเวบ”

18

19

Page 8: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

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

23. หากตองการดตวอยางกอนบนทก ใหเลอกแทบแสดงตวอยาง

24. เรยบรอยแลว เลอกปม “อปเดต”

25. เลอกปม “บนทก” เพอบนทกหนาเพจ

การเพมรปภาพ

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

20

21

23

24

25

22

26

Page 9: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

27. เลอกเมน “รปภาพ”

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

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

27

28

29

Page 10: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

การเพมลงก

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

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

เปลยนแปลงขอมลลาสดบนเวบไซต เสรจแลวเลอกปม “ตกลง”

30

31

Page 11: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

33. โดยใสขอความทชอง “ขอความทจะแสดง” และ ใส URL ทชอง ลงกไปท URL น

34. หากตองการใหลงกเปดในหนาตางใหม ใหตกท checkbox “เปดลงกนในหนาตางใหม”

35. เสรจแลวคลกปม “ตกลง”

การเพมหนาเพจเวบไซต

36. เรมตนสรางหนาเพจ โดยคลกทปม ดานบนขวาของหนาจอ

37. เมอเปดหนาสรางเพจใหมขนมาแลว กรอกชอ ตงชอหนาเวบของคณ

32

33

34

35

Page 12: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

38. เลอกเทมเพลตทจะใช ซงในสวนนมใหเลอกอย 4 รปแบบคอ

โดยแตกตางกน ดงน

- หนาเวบ เปนหนาหลกของเวบไซตใชในการใหขอมลและประกาศตางๆ ของเวบไซต

- ตเกบเอกสาร ใชส าหรบอพโหลดไฟลตางๆ เชน รปภาพ , เพลง และอนๆ ซงสามารถแชรใหคนอนดาวนโหลดได

- ประกาศ ใชในการประกาศขอความ หรอ แสดงบทความตางๆ

- รายการ ใชแสดงรายการตางๆ รวมถงรายละเอยดของแตละรายการดวย

37

38

39

40

Page 13: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

39. เลอกต าแหนงเมนทตองการ

40. คลกปม “สราง”

การใชงาน Gadget

การสรางเอกสาร

41. คลกปม “แกไขหนาเวบ” เลอกปม “แทรก” แลวเลอกเมน “เอกสาร” ในกรณทมเอกสารใน Google Document ให

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

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

41

42

Page 14: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

การสรางงานน าเสนอ หรอ Presentation

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

43

44

Page 15: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

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

45

46

Page 16: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

การสรางสเปรดชด

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

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

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

47

48

Page 17: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

Page 18: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

การสรางสเปรดชท

การสรางวดโอ

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

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

51

52

Page 19: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

การสรางแผนท

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

53

Page 20: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

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

54

55

Page 21: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

การสรางปฏทน

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

56

57

Page 22: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

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

58

59

Page 23: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

60

61

Page 24: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

การสรางขาวประกาศ

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

63. เลอกเทมเพลตทจะใช ซงในทนเลอก “ประกาศ”

64. เลอกต าแหนงทตองการแสดงเมน

65. คลกปม “สราง”

66. เมอปรากฏหนาเพจประกาศขาวแลว ตองการโพสประกาศขาวใหเลอก “โพสตใหม”

62

63

64

65

66

Page 25: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

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

โพสตลาสดอยบนสด

67

68

Page 26: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

การสรางตเกบเอกสาร

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

70. เลอกเทมเพลตทจะใช ซงในทนเลอก “ตเกบเอกสาร”

71. เลอกต าแหนงทตองการแสดงเมนในทนเลอก “วางหนาเวบทระดบบนสด”

72. คลกปม “สราง”

73. สามารถเกบไฟล และลงก โดยเลอกปม “เพมไฟล” หรอ “เพมลงก”

69

70

71

72

73

74

75 76

Page 27: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

74. หากตองการความเปนหมวดหม สามารถน าไฟลทตองการจดเกบ ไปไวทโฟลเดอร ซงตองท าการสรางโฟลเดอรกอน โดย

คลกทปม “ยายไปท”

75. ลบไฟลทไมตองการได โดยคลกปม “ลบ”

76. หากตองการทราบการเปลยนแปลงลาสดของสวนตเกบเอกสาร สามารถเลอกปม “สมครรบการเปลยนแปลง” ขอมลการ

เปลยนแปลงตเกบเอกสารกจะถกแจงไปทเมลของเรา

การสรางรายการ

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

78. เลอกเทมเพลตทจะใช ซงในทนเลอก “รายการ”

79. เลอกต าแหนงทตองการแสดงเมนในทนเลอก “วางหนาเวบทระดบบนสด”

80. คลกปม “สราง”

81. เลอกแมแบบรายการ ซงม 4 แมแบบ คอ

- รายการสงทตองด าเนนการ ตดตามรายการสงทตองด าเนนการจากการประชมหรอโครงการ

- รายการปญหา ตดตามปญหาทเปดอยส าหรบโครงการของคณ

- สถานะของหนวย ตดตามสถานะของแตละหนวยในโครงการของคณ

- สรางของตนเอง ก าหนดคอลมนของคณเองส าหรบรายการ

77

78

79

80

Page 28: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

ในทนเลอก “รายการสงทตองด าเนนการ”

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

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

สามารถทจะระบลงไปได

81

82 85

Page 29: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

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

85. ปรบแตงรายการได โดยเลอก “ปรบแตงรายการน”

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

86

Page 30: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

พนทเกบขอมลไซต

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

88. เมนดานซายเลอก “ทวไป”

89. สวนพนทเกบขอมลของไซต วาใชพนทไปเทาไร

87

89

88

Page 31: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google

ตกแตงส และแบบอกษรเพมเตม

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

91. เลอกสและแบบอกษร

92. สวนตางๆ ทสามารถก าหนดเองได

90

91

92

Page 32: google sites - FIS PSU PHUKET · PDF fileการสร้างเว็บไซต์ด้วย Google Sites Google Sites คือโปรแกรมของ Google