การสรางเวบไซตดวย 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. ลงชอเขาใชงาAccount แล

านโดยบญชขละ Google p

อง Gmail หรpassword จา

รอ กรณครแกกมหาวทยาล

กนนาภาคเหนยนเรศวร กาห

นอ ใหลองชอเหนด ท URL:

เขาใชดวย Go: s

oogle

2.

3.

อกปม

อก Apps

เล

เล ไไซต

2

2

itemail.n

1

u.ac.th

 

3

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

5. 6.

เลอกเทมเพลตงชอไซต(title) ของคณ สสาหรบสวนขอองตาแหนงไซตgoogle sitees จะทาการตตดตงให

6 

ลตทจะใช หาก

4 

กตองการเลอกกเทมเพลตอน

5

น ๆ ใหคลกท

5

“เลอกดเพมเตม”

โดยอตโนมต

7. 8. 9. 10.

11.

เลอกธมแสดงงในเวบไซต ซซงสามารถปรบบเปลยนในภาายหลงได เลอกหมวดหมของไซต เลอกตวเลอกกเพมเตม สวนนนจะใหใสคาออธบายเวบไซต คลกปม “สราาง”

เมอสรางเสรจจแลวจะปรากกฏหนาตาเวบบไซตดงภาพ ตตวอยางนเลอกกธมชอ “สมดดฉ

การใชงาน Theme

7 

1

8 

9

10 

ก”

11 

12.

13.

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

เลอก “จดกาารไซต”

133

112 

14. 15.

16.

17.

เลอก “ธม สและแบบอกษษร” เลอก เปลยนน ธม และปรบบแตงตามส

เลอกปม “บน

เลอกคลกทช

นทก”

อไซตเพอกลบ

14 

1

ะด

บไปหนาเวบไซ

15

16 

ดวก

ซต

18.

19.

ลงหนาเวบห ก

การแกไขหการแกไขหนา

19

การเปลยนแป

นา เพจ (Paาเพจสามารถ

17 

9 

ปลงธม

age) ทาไดโดยเลอกเครองหมาย

18

ยรปดนสอ

8

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

21.

จดการหนาเววบ

เมน “แทรก”ๆ จงทาใหเมน

” เปนเมนทควนนถกใชงานบ

21 

วบคมเกยวกบบอยทสด

บการใชมเดย เชน การใสรปปภาพ ลงค ว

20 

ดโอและ gaddgetตาง

22.

23.

เมน “รปแบบ

เมน “ตาราง”

บ” เปนเมนทใ

23” เปนเมนทใช

ใชกาหนดรป

2

 ชสราง หรอจด

22 แบบของตวอ

ดการขอมลใน

กษร ซงเปนร

นรปแบบตารา

รปแบบคาสงเด

าง

ดยวกบแถบเมมน

24.

25.

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

การเพมรปภเลอกตาหนงท

ภาพ ทตองการแทรรกรปภาพในห

25 

หนาเวบ และเ

24

เลอก เมน “แ

4

แทรก” เลอก รปภาพ

26.

จะปรากฏ Diialog box เพพมรปภาพ จากนนใหอปโหหลดภาพโดยเเลอกไฟลภาพพทตองการ

2

ล

26

ลอก “อปโหลลดภาพ” แลวคลก

27.

การเพ

เมออปโหลดภภาพเสรจแลวว

ม

28.

มลงค

การเชอมโยงลลงคภายในเว

สามารถปรบ

บไซตและภา

ขนาด และตตาแหนงดวยแแถบควบคมดาานลาง

ย

28

ยนอกเวบไซตต เลอก ปม “

27

“แทรก” เลอกกเมน “ลงค”

29.

30.

จะปรากฏ Diialog box สรรางลงค เลอกกหนาเวบไซตททเวบไซต และ

การเชอมโยงจแบบ “ทอยเว

การเปลยนแป

จากภายนอก วบ”

30

32 

ปลงลาสด เสร

ใหทาตามขออ

0 

33

รจแลวเลอกป

28 แลวจะป

ตองการเชอม “ตกลง”

ปรากฏ Dialo

31

มโยง ซงสามาารถดไดจากแแ

g box สรางลลงค ซงในทนเ

2

ผนผง

เลอก

29

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

การเพ

หากตองการใใหลงคเปดในหหนาตางใหม ใหเลอกคลก ท checkboxx “เปดลงคนใในหนาตางใหหม” เสรจแลวคลกกปม “ตกลง”

ม

34.

35.

36.

มหนาเพจเว

เรมตนสรางห

เมอเปดหนาส

เลอกเทมเพล1) หนา2) ประ3) ตเกบ

อนด4) รายก5) หนา

วบไซต

หนาเพจ โดยค

สรางเพจขนม

ลตทจะใช ซงใาเว บ เปนหน

ศ ใชในกา

กา ารบเอกสาร ใชใดาวนโหลดได การ ใชแสดงราเรมตน ใชเปน

คลกทปม

าแลว กรอกช

ดานบนข

ในสวนนมใหเลาหลกของเวบไรประกาศขาวในการอปโหล รายการตาง ๆนหนาเรมตนข

34

ชอ ตงชอหนา

ของหนาจอ

เวบของคณ

ลอก 5 รปแบไซตในการใหวสารตาง ๆ ดไฟลตาง ๆ เ

ๆ รวมถงรายลของผใชงานแ

4

35

36

บบ คอ ขอมลและปรระกาศตาง ๆ ข ของเวบไซต

เชน รปภาพ, เพลงและอนๆซงสามารถแแชรใหคน

ละเอยดของแตตละรายการดดวย ตละคน

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

38.

39.

คลกปม “สรา

ไดหนาเพจตาามชอทเราตองการ

าง”

38

39

377

การแทร

รกเอกสารจจาก Googlee Drive

40.

41.

42.

การแทรกเอก

จะม Dialog

คลกปม “เลอ

กสารจาก Goo

box ของ Go

อก”

ogle Docs ใ

42

oogle ไดรฟ

41

 

หเลอกทเมน “แทรก” เลอ

2

ใหเลอกเอกสสารทตองการ

อก ไดรฟ และ

ะเอกสารตามลลาดบ

400

43. จาก Dialog boxของ แทรรก Google DDocument เลลอกปรบขนาดการแสดงเออกสารตามตองการ แลว เลอกปมม “บนทก”

44.

จะไดภาพแสดงขอบเขตขอองเอกสารทเรราแทรก และจจะเหนเอกสารขวา

43จรงเมอเลอกกปม บนทก

ดานบน

444

45. การแทรกงานนาเสนอ ตาม

นนาเสนอจากมล

ก Google งานนนาเสนอใหเลลอกทเมน “แแทรก” เลอก ไดรฟ และงาานาดบ

46.

47.

จะม Dialog

คลกปม “เลอ

box ของ Go

อก”

4

47

oogle ไดรฟ

46 

7 

ใหเลอกงานนนาเสนอ ทตองการ

45

48. จาก Dialog ตองการ แลว

box ของ แทว เลอกป

ทรก งานนาเสนนอ ของ Gooogle เลอกปรบบขนาดการแสสดงเอกสารตามม “บ

49.

จะไดภาพแสดานบนขวา

ดงขอบเขตขอองงาน

บนทก”

นาเสนอ

48

อทเราแทรก และจะเหนงาานนาเสนอจรงงเมอเลอกปม

49 

ม บนทก

50. การแทรกสเปตามลาดบ

ปรดซต จากGGoogle สเปรดดซตใหเลอกททเมน “แทรก” เลอก ไดรฟฟและสเปรดซต

51.

52.

จะม Dialog

คลกปม “เลอ

box ของ Go

อก”

5

52

oogle ไดรฟ

1 

2 

ใหเลอกสเปรรดซต ทตองการ

50

53. จาก Dialog box ของ แททรก สเปรดซตตของ Googleeเลอกปรบขนนาดการแสดงเเอกสารตามตองการ แลว เลอกปมม “บนทก”

54. จะไดภาพแสดานบนข

ดงขอบเขตขอองสเปรดซตททเราแทรก แลละจะเหนงานวา

53

สสเปรดซตจรงเมอเลอกปมบ

54

บนทก

4

55. การแทรก วดดโอ จาก You

56.

จะม Dialog box ของ แท

uTube ใหเลอ

ทรก วดโอ Yo

อกทเมน “แท

ouTube

ทรก” เลอก YYouTube ตามมลาดบ

55

56

57.

58.

า URL วน ดโบนทก”

เมอบนทกห

อ จาก YouTTube มาวางในชอง “วาง UURL วดโอ YoouTube ของงคณ”แลวคลกกปม “

น

นาเวบเพจแลวว จะปรากฏ ว วดโอ ดงภาพ

57

58 

59.

60.

การแทรก แผผนท จาก Google Maps ใใหเลอกทเมนน “แทรก” เลออก แผนท ตาา

จาก Dialog แลว เลอกปม

box แทรก แม “บนทก”

แผนทของ Gooogle กรอกขขอมลแผนทตตามตองการใน

มลาดบ

นชอง “ปอนต

599

ตาแหนง”

660

61.

62.

ะม Dialogจ

เมอบนทกแล

box แทรก G

ลวจะไดหนาแผ

Google Map

ผนท ดงภาพ

เลอกปรบขน

นาดและเลอก ปม “บนทก

62 

”

61 

64.

65.

63.

การแทรก ปฏ

ฏทน จาก Gooogle Carlenndarใหเลอกททเมน “แทรก” เลอก ปฏททน ตามลาดบ

จะม Dialog

คลกปม “เลอ

box ของ Go

อก”

65

oogle ไดรฟ

5 

ใหเลอก ปฏท

64

ทน ทเราไดสรรางไวกอนหน

าน แลว

63 

66. จาก Dialog box ของ แททรก ปฏทนขออง Google เลลอกปรบขนาาด และรายละะเอยดตามตองการ แลวเลอกปม

67. จะไดภาพแสดงปฏทน กจกรรมตามทเลลอก ดงภาพ

“บนทก”

66

67

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

68.

69. 70. 71.

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

เลอกเทมเพลเลอกปม “สรจะไดหนาใหม

ลตทจะใช ซงใราง” ม และเรมเขย

ใหเลอก “ประ

ยนขาวประกา

71

ะกาศ”

ศจากปม “โพ

6

69

70

พสตใหม”

68

72.

การสรา

73.

74.

ดลองประกท าศขาวสาร แ

างตเกบเอกส

เลอกปม

เลอกเทมเพล

สาร

สรางหนา

ลตทจะใช ซงใ

และบนทกหนา

าเวบใหม แลว

ใหเลอก “ตเก

75

าเวบ จะไดภา

วตงชอหนาเวบบ

บเอกสาร”

าพ ดงน

73

74

ของคณ

72

75. 76.

77.

เลอกปม “สรราง” สามารถเกบไ

โ78. 79.

หากตองการคโฟลเดอรใหมลบไฟลทไมตหากตองการทเปลยนแปลง

ไฟล และลงค

ความเปนหมวมกอน โดยคลกองการได โดยทราบการเปล” ขอมลการเป

โดยเลอกปม

วดหม สามารกปม “ยายไปยคลกปม “ลบลยนแปลงลาสปลยนแปลงต

“เพมไฟล” ห

7

ถนาไฟลทตอปท” บ” สดของสวนตเกตเกบเอกสารจ

หรอ

76

“เพมลง

งการจดเกบไ

กบเอกสาร สาจะถกแจงไปท

7

77

ค”

ไปไวทโฟลเดอ

ามารถเลอกปางอเมลของเร

78

779 

อร ซงจะตองสสราง

ปม “สมครรบกการรา

การสรา

80.

างรายการ

เลอก

เลอกปม

81. 82.

สรางงหนาเวบใหม

เทมเพลเลอกปม “สรราง” เลอกแมแบบรายก

1) รายก2)

การสงทตองดดาเนนการตดตามรายการสสงทตองดาเ รายก

3) สถา

ลตทจะใช ซงใ

ารซงม

การปญหา ตดนะของหนวย

แลวตงชอหนนาเวบของคณ

ใหเลอก “ราย

4 แมแบบ คอ

ดตามปญหาท ตดตามสถาน

82

ณ

ยการ”

อ

ทเปดอยสาหรนะของแตละห

81

2

นนบโครงการขอหนวยในโครงก

80

นการจากการรประชมหรอโครงการ องคณ การของคณ

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

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

844

83

84.

85.

86.

อก

กรอกรายละ

เล “เพมรายการ”

เทตองการแกไ

ปรบแตงรายก

เอยดเพอ เพมไข กสามารถร

การได โดยเล

85 

มรายการสงทระบลงไปได เ

อก “ปรบแตง

86

8

ตอ งางดาเนนเสรจแลวเลอก

งรายการน”

87

น หากรายกาก “บนทก”

ารนน ๆ เสรจจเรยบรอย หร

รอมขอมล

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

ตวอยางร

รายการทตองงทา ดงภาพ

เรยงขอมล ไดดตามใจชอบ

88

การแกไไขการออกแแ

88. เลอกปม

บบไซต

และเลออก “แกไขการรออกแบบไซตต”

89 

89. จาก Dialog box ใหเลอกรายการเมนดดานบน เพอกาารปรบแก

90.

91.

การเพมสวนหหว” เลอก “แกไข

9

หวของเวบไซต

สวนหวของไซ

91 

ต (กรณนไดม

ซต”

มการจดทาสวนนหวเปนภาพไไวแลว) โด

92

ดยการเลอกท

90

ท “สวน

0

92. ปรากฏ Dialoog box ในกรรณนเราจะอปปโหลดรปภาพพจากไฟลภาพพทไดเตรยมไววแลว โดยการรแนบไฟล จากปม “Bro

93. เลอกไฟลภาพ

owse…”

พทตองการ แแลวเลอกปม “

93

“Open”

994

94. เมอปรากฏภาาพตวอยาง เลลอกปม “ตกลลง”

95.

96.

จะไดภาพสวนนหวเวบ

การเพม/ปรบ

ตามต

บเปลยน เมน

ตวอยาง ดงภา

การนาทางใน

95 

97

าพ

นแนวนอน โด

7

ยการเลอก “การนาทางในนแนวนอน”

996

97. คลกเลอกแถบบการแกไขกา

98. เลอกเมน “เพพมหนาเวบ”

ารนาทางในแน

นวนอน

99

98

99. เลอกรายการรหนาเวบทเราาไดทาไวแลวดดานลาง

100. สามารถเพมรายกการหนาเวบได

จาก

ดอก และจดล

แผนผงไซต แ

100

าดบการแสด

และเลอกปม

0

10

งรายการไดต

1

“ตกลง”

ามตองการ

0

101

. ตวอยางรายการเมมน การนาทาางในแนวนอน ดงภาพ

102

การเผยยแพรผลงานนเวบไซต

. การ

.

102

103 ในรา

แชรและสทธ

ายการแชรแล

คลกเลอกปม

ละสทธ เลอก

ม เล

“เปลยน”

อก “การแชร

1

รและสทธ”

104

103 

. 104 กาหหนดรปแบบกาารแชร ซงมอยย 5 รปแบบ แ แตในทนใหเลลอกการแชรแบบบ “สาธารณะท

ยางเวบไซตตวอ

างเวบ”

1055