1

ค ำน ำ

บลอก คอ เวบไซตสรำงโดย admin ทเปนเจำของในกำรเขยนตกแตงเวบไซตเรองรำวตำงๆของตนเองหรอผอนไดตลอดเวลำ มทสรำงเวบไซตท ำไดฟรหรอไมฟรกมถำศกษำกไมยำกหรอซบซอนเกนไป จะมตวชวยเสรมใหเรำสะดวกในกำรใชสรำงเวบไซตใหหลำกหลำยมำกขน รำยงำนเลมน จดท ำขนเพอกำรศกษำกำรท ำเวบตกแตงภำยในเวบบลอกมทศกษำ ไดแก Google Sites / Google Blogspor / Wordpress เปนกำรเรยนกำรสอนของรำยวชำ เทคโนโลยเพอกำรออกแบบนเทศศลป ARTI3319 ผสอน ผศ.ประชด ทณบตร หำกผดพลำดประกำรใดในรำยงำนเลมน ตองขออภยมำ ณ ทนดวย

ผจดท ำ นำงสำวสพตรำ จกอำโน

2

สำรบญ เรอง หนำ 1. กำรจดกำร แตงเวบ Google Sites 3

- กำรเขยน แกไขขอควำม 3 - วธกำรจดหนำไซต 4 - วธสรำงรปแลวลงไปยงหนำเวบไซตอน 5

2. กำรจดกำร แตงเวบ Google Blogspot 7

- วธปรบแตงเวบ Google Blogspot 7 - วธใชโคด html ในหนำบทควำม 8 - วธท ำ Creative Commons CC (เงอนไขในกำรใหอนญำตของครเอทฟคอมมอนส) 9 - วธท ำ Gadget ลงในเวบ Google Blogspot (ปฎทน) 14 - วธดขนำดภำพ และก ำหนดภำพดวยตวเอง 17 - วธกำรตดขอควำม เพอจดเนอหำหนำบลอคใหสนลง 18 - วธใส แถบเมน บนสวนหวเวบ Google Blogspot 19

3. กำรจดกำร แตงเวบ Wordpress 21 - วธเปลยนภำษำ 21 - วธตดเนอหำยำวเปนสนลงเพยงกด “อำนเพมเตม” 22 - วธเปลยน Header เพม Widget 24 [เปลยนรปแบบบลอค เพม พนหลง] - วธจดรปหรอเพมขนำดภำพ 26 - วธท ำภำพเคลอนไหวตกแตงเวบไซต 29

3

การจดการแตงเวบ Google Sites Google sites คอ เวบไซตโปรแกรมออนไลนทท ำใหกำรสรำงเวบไซตงำยขนโดยไมตองรภำษำ html

การเขยน แกไขขอความ 1. เลอกไอคอนรปปากกาทอยบนหว Sites

2. จะปรากฏแถบเครองมอดานบน สามารถคลกพมพแกไขขอความได

4

วธการจดหนาไซต 1. เลอก 1.เพมเตม>2.จดการไซต

2. กดท สและแบบอกษร [การจดการนสามารถเลอกแตง Font / headder]

5

วธสรางรปแลวลงไปยงหนาเวบไซตอน 1. คลกเพมเตม เลอกแกไขการออกแบบไซต

2. คลกเลอกแกไขเกตเจตแถบดานขาง

6

3. 1.แทรกภาพทเราเตรยไวกอน>2.ครอบรป>3.กดคลกทลงค

4. 1.กดเลอกทอยเวบ>2.ใสลงค[URLของเพจ]ลงไปในชองน>3.กดตกลงในการท า

7

การจดการ แตงเวบ Google Blogspot Google Blogspot คอ ฟรเวบไซต ทสำมำรถสรำงบลอคขนมำอยำงงำย ไมซบซอน แตขอพเศษ คอ ลกเลนของ HTML มำเพมเตมใหแปลกใหม วธปรบแตงเวบ Google Blogspot ควำมรทวไปในหนำแกไขบทควำม

8

วธใชโคด html ในหนาบทความ โคดกบไฟลภำพ

9

วธท า Creative Commons CC (เงอนไขในการใหอนญาตของครเอทฟคอมมอนส) สญญำอนญำตใชงำน (เงอนไขในการใหอนญาตของครเอทฟคอมมอนส) คอ สญญำของครเอทฟคอมมอนตน จะเออใหมกำรใชสอ ภำพ เสยง ขอมล โดยแบงสญญำอนญำตออก ในรปแบบของกำรแจกจำยและใชขอมล โดยเนนทกำรอำงองเจำของลขสทธเดม ขนตอนการขอการใชงาน

Creative Commons CC

10

11

ความหมายไอคอน

1. Creative Commons CC 2. แสดงทมา ตองมการแสดงทมาของงานดงกลาว ตามรปแบบของผสรางสรรค หรอผ

อนญาตก าหนด 3. ไมใชเพอการคา ยนยอมใหผอนคดลอก แจกจาย จดแสดง และเผยแพร แตตองไมเปนการ

น าไปใชเพอการคาผลก าไรใดๆ 4. ไมดดแปลง ยนยอมใหผอน คดลอก แจกจาย จดแสดง แตหามแกไขใดๆ

12

13

14

วธท า Gadget ลงในเวบ Google Blogspot (ปฎทน) Wedsite ทแจก Gedget ฟร มมำกมำยจงยกตวอยำง ท ำปฎทน ของเวบ

Mycalendar.org ทเวบ http://mycalendar.org/widget/getwidget/

สำมำรถปรบขนำดใหเขำกบเฟรม บลอค ของเรำได

15

***แลวกดบนทก ถำไมมรปอะไรอยำเพงตกใจใหลองดหนำเวบบลอค ปฏทนกขนมำเหมอนกน***

16

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

17

วธดขนาดภาพ และก าหนดภาพดวยตวเอง

ใหสงเกตโคด <img คอ โคดรปภำพนนเอง ปรบควำมสงและควำมกวำงของภำพสำมำรถปรบขนำดไดในโคด HTML

18

วธการตดขอความ เพอจดเนอหาหนาบลอคใหสนลง น ำ Cursor เมำสไปคลกจดทตองกำรตดขอควำม

ผลทไดจะมลงค อำนเพมเตมใหกด เพมขนมำ

19

วธใส แถบเมน บนสวนหวเวบ Google Blogspot

เขำทหนำจดกำรเวบบลอค เลอกกดท “หนำเวบ”

20

คลกท หนำเวบใหม จะม

1. หนาเวบเปลา ไวสามารถเขยนเนอหาขอความได คอ เปนกำรอพบลอคสรำงหนำใหมขนมำ 2. ทอยเวบ คอ เพมหนำเวบอนมำ โดยจะลงคไปหนำเวบอนเวบไหนกไดทเรำใส URL ไว

แสดงหนาเวบเปน คอ ใหหนำเวบลงนอยตรงสวนไหนของหนำเวบบลอคของเรำ

21

การจดการ แตงเวบ Wordpress Wordpress คอ Open source web software เปนโปรแกรมเครองมอ ไวสรำง บลอค พฒนำเรอยมำจนสำมำรถสรำงเปนเวบไซต วธเปลยนภาษา เลอกไอคอน W หนำควบคมของ admin Wordpress

เปลยนภำษำไทยไดเลย แลวกดบนทกในกำรเปลยนแปลง

22

วธตดเนอหายาวเปนสนลงเพยงกด “อานเพมเตม” กดหนำควบคม

เขำเนอหำขอควำมทตองกำรยอ

23

ผลทได

24

วธเปลยน Header เพม Widget [เปลยนรปแบบบลอค เพม พนหลง] กำรเปลยนรปแบบบลอคนนจ ำเปนตองทรำบขนำดทใชกบบลอคใหมขนำดพอด จงจะดสวยงำมมวธดงน

เลอกรปแบบบลอค>พนหลง

25

26

วธจดรปหรอเพมขนาดภาพคลกทรปภำพ แลวเลอกไอคอนแกไขรปภำพบนมมซำย

เลอกปรบกำรจดหนำของรปภำพ

27

เลอกกำรตงคำขนสง สำมำรถปรบขนำดไดตำมควำมเหมำะสมไดมำกทสด

ผลทแสดงออกมำ

28

วธเพม Widgets ลง Sidebar

29

วธท าภาพเคลอนไหวตกแตงเวบไซต ใหสรำงภำพไวส ำหรบท ำภำพเคลอนไหวเตรยมไวหลำยๆเลเยอร เปนภำพ Inbetween ทเปลยนทศทำงของภำพทละซอตตำมตองกำร

กดท Window > Animation

30

จะมแถบขนมำดงภำพ 1.คอเวลำของภำพ Tineline สำมำรถ ยด หด ไดตำมตองกำรของเวลำในกำรเคลอนไหวแสดงผลออกมำเปนวนำท 2.คอแถบจ ำกดเวลำในกำรเคลอนไหวใหลำกมำหำเลเยอรสดทำย

วธกำรเซพไฟล ใหกด File เลอก Save for web & devices

31

***ส ำคญ เลอกไฟลนำมสกล .gif จำกนนใหปรบคำ Looping options ใหเปน Forever เพอใหภำพเคลอนไหวตอเนองตลอด

32