Technology For Visual Communication Design ARTI3319

2

คํานํา บล็อก ( BLOG ) คือเวปไซตที่เจาของ หรือ Admin สามารถบันทึกเรื่องราวของตนเองลงในเวป ไดตลอดเวลาการสรางเว็บบลอก สามารทําไดงายๆดวยตนเอง ไมซับซอน และภายในระบบการ จัดการบริหารเว็บไซตพื้นฐานให เชนเครื่องมือสําหรับเขียนเรื่อง โพสรูป จัดหมวดหมู และลูกเลนอื่นๆ รายงานเลมนี้ จัดทําขึ้นเพื่อรวบรวมหลักฐาน การศึกษาและการตแตงเว็บบลอก ซึ่งไดแก Wordpress / Google Blogsport / Google Sites อันลวนเปนเนื้อหาที่ผานกระบวนการเรียนการ สอนในรายวิชา เทคโนโลยีเพื่อการออกแบบนิเทสศิลป ( ARTI 3319 ) สอนโดย ผศ.ประชิด ทิณบุตร

ผูจัดทํา นาย ภูริทัต มีสมบัติ

3

สารบัญ หนา

1. WordPress

5

- ขั้นตอนการสราง WordPress

6

- วิธีเปลี่ยนเปนภาษาไทยเพื่อสะดวกตอการใชงาน

8

- วิธีตกแตง WordPress

9

- วิธีเพิ่ม Widget

11

- วิธีการตัดหนาขอความที่โชว เพื่อไมใหขอความยาวจนเกินไป

13

- วิธีปรับขนาดรูปภาพ

14

2. Google Blogspot

17

- ขั้นตอนการสราง Blogspot

18

- วิธีการใชแมแบบใน Blogspot

19

- วิธีการเพิ่ม Gadget

20

- การใชงานหนาบทความที่แสดงผลเปน HTML

23

- Creative Commons – CC

24

- วิธีการกําหนดขนาดรูปภาพ

28

- วิธีการตัดหนาขอความที่โชว เพื่อไมใหขอความยาวจนเกินไป

29

4

หนา

3. Google Sites

31

- ขั้นตอนการสราง Google Sites

32

- วิธีเปลี่ยนภาษาที่แสดงผลของไซต

33

- วิธีการปรับแตง Google Sites

35

- วิธีเพิ่มรายการในแถบดานขาง

38

5

WordPress WordPress เปน open source web software ที่เราสามารถติดตั้งบนเว็บ server ของ เราเพื่อสรางเว็บไซต, blog หรือ community ตอนเริ่มแรก WordPress เปนเครื่องมือไวสําหรับ สราง blog แตไดรับการพัฒนามาเรื่อย ๆ จนสามารถสรางเปนเว็บไซต หรือ เว็บ community ไดแลว โดยมีระบบจัดการบทความ หรือ Content Management System (CMS) ทําใหงาย ตอการใชงาน ซึ่ง WordPress สรางขึ้นโดย Matt Mullenweg และ Mike Little ในป 2003 นับวามีการพัฒนามาถึง 9 ปแลว

WordPress

6

ขั้นตอนการสราง WordPress 1. เขาไปที่ www.wordpress.com ก็จะพบหนาตางดังภาพ ใหคลิ๊กตรง Get Started เพื่อสมัคร ใช wordpress

7

2. เมื่อคลิ๊กเขามาแลวก็จะพบกับหนาที่ตางที่จะใหเรากรอกขอมูล Email Address/Usename Password/แลวก็ชื่อ Domain ของ Blog wordpress ของเรา

3. เมื่อเรากรอกขอมูลครบถวนแลว เราก็จะได Blog word press ของเราดังภาพ

8

วิธีเปลี่ยนเปนภาษาไทยเพื่อสะดวกตอการใชงาน 1. ใหเราคลิ๊กไปที่ หนาควบคุม ดังภาพ

2. เมื่อคลิ๊กเสร็จใหเราไปที่ Setting>General ดังภาพ

9

3. ก็จะปรากฏหนาตาง ใหเราคลิ๊ก เพื่อเปลี่ยนเปนภาษาไทย ดังภาพ จากนั้นก็คลิ๊กที่ Save Changes เมื่อคลิ๊กเสร็จเมนูตางๆ ก็จะเปลี่ยนเปนภาษาไทย

วิธีตกแตง WordPress เมื่อเราไดเวปใหมที่เราตองการแลว ใหเราคลิ๊กที่ หนาควบคุม ดังภาพ

10

ก็จะปรากฏหนาตางดังภาพ ตอมาใหไปที่ รูปแบบบลอก> Themes เพื่อทําการเลือก Themes ตก แตงเวปใหมของเรา

เมื่อเลือก Themes เสร็จ ก็ไปตกแตงในสวนของ Head โดยเขาไปที่ รูปแบบบลอก>สวนหัว ก็จะ ปรากฏหนาตางในการปรับแตง Head ขึ้นมา โดยจะมีชองให Upload File รูปภาพ ขนาดภาพตอง มีขนาด 980*285 Px เพื่อนําไปเปน Head ของ Blog Word press ของเรา

11

ตอมาก็จะเปนสวนของพื้นหลังของ Blog Wordpress โดยเราจะเขาไปที่ รูปแบบบลอก>พื้นหลัง เมื่อเขาไปก็จะพบหนาตางดังภาพ โดยจะมีชองใหคลิ๊กอัพโหลด File รูปภาพ เพื่อที่จะนําไปเปนภาพ พื้นหลัง

วิธีเพิ่ม Widget คลิ๊กที่ Widget ดังภาพ

12

จากนั้นก็จะพบ Widget มากมาย เชน Widget ปฏิทิน นาฬิกา การคนหาขอมูล เปนตน ถา ตองการที่จะให Widget เหลานี้ไปปรากฏยังหนา Blog Wordpress ใหเราลาก Widget ไปวางตรง ขางๆ ดังภาพ

เมื่อเสร็จแลว Widget ก็จะไปปรากฏขางหนา Blog Wordpress ดังภาพ

13

วิธีการตัดหนาขอความที่โชว เพื่อไมใหขอความยาวจนเกินไป 1. ไปที่หนา Blog WordPress จากนั้นคลิ๊กตรงแกไขบทความดังภาพ

.

2. จากนั้นใหคลิ๊กไอคอนตรงหมายเลขที่ 1 ก็จะปรากฏเสนโชวขึ้นมา เพื่อบอกใหเรารูวา ขอความที่ จะแสดงโชววบนหนาเวปจะสิ้นสุดตรงนี้ จากนั้นกดอัพเดท

14

เมื่ออัพเดทเสร็จแลว ขอความหนาเวปเราก็จะสั้นลง และมีขอความวา อานเพิ่มเติมขึ้นมาสําหรับใคร ที่อยากที่จะดูขอความทั้งหมด

วิธีปรับขนาดรูปภาพ 1. เปดหนาเวป WordPress ขึ้นมา จากนั้นคลิ๊กที่คําวา แกไข ดังภาพ

15

2. จากนั้นใหคลิ๊กไปยังภาพที่เราตองการจะปรับขนาด แลวคลิ๊กตรงไอคอนที่ปรากฏในภาพ

3. เมื่อคลิ๊กไอคอนแลวจะปรากฏหนาตาง ที่มีการใหปรับคาขนาดตางๆ

16

เมื่อปรับขนาดตามที่ตองการแลวใหคลิ๊กที่คําวา อัพเดท เราก็จะไดขนาดภาพโชวหนาเวปตามที่เรา ตองการ

17

Google Blogspot Blogger เปนอีกหนึ่งบริการของ Google ที่จะชวยใหคุณมีพื้นที่สําหรับเขียนเรื่องราวตาง ๆ ที่คุณ ตองการในลักษณะของ Webblog บริการเหลานี้คุณสามารถใชงานไดฟรี โดยไมมีคาใชจาย สําหรับ คนที่อยากมีเว็บไซตสวนตัว แตไมอยากมีคาใชจาย blogger สามารถชวยคุณได หากคุณตองการใช blogger เพียงแคสมัคร Gmail ก็สามารถสราง blog ไดอยางมากมาย นอกจากนี้การสราง blog ดวย blogger นั้นเชื่อมโยงพื้นที่เก็บรูปภาพเขากับ picasa ซึ่งเปนบริการดานภาพถาย ทําใหคุณมีพื้นที่ เขียน blog และพื้นที่เก็บรูปภาพที่สัมพันธกัน

Blogspot

18

ขั้นตอนการสราง Blogspot 1. เขาไปที่ www.blogger.com จะปรากฏหนาตางดังภาพ จากนั้นใหคลิ๊กเขาไปตรงคําวา สมัครใชงาน

2. เมื่อคลิ๊กเขาไปแลวจะปรากฏชองที่จะใหกรอกขอมูล ชื่อ ระหัสผาน

19

3. เมื่อกรอกเสร็จแลวเราก็จะไดหนา Blog ดังภาพ

วิธีการใชแมแบบใน Blogspot 1. เปดหนาเวป Blog ขึ้นมา แลวคลิ๊กไปตรงขอความ การออกแบบ ดังภาพ

20

2. ใหคลิ๊กไปที่ แมแบบ จากนั้นจะปรากฏรูปแบบตางๆ ถาตองการใชรูปแบบใหคลิ๊กที่รูปแบบนั้น แลวกดใชงาน รูปแบบนั้นก็จะแสดงบนหนาเวป Blog ของเรา

วิธีการเพิ่ม Gadget 1. ใหเราไปที่หนาเวป Blog แลวคลิ๊กเขาไปที่ การออกแบบ

21

2. เมื่อเขามาแลวจะปรากฏหนาตางดังภาพ ใหเราไปที่ รูปแบบ>เพิ่ม Gadget

3. จากนั้นจะปรากฏหนาตางที่จะใหเลือก Gadget เมื่อเราได Gadget ที่เราตองการแลวใหกดที่ เครื่องหมายบวกดังภาพ

22

3. เมื่อคลิ๊กที่เครื่องหมายบวกก็จะปรากฎหนาตางขึ้นมาดังภาพ ใหเราคลิ๊กที่คําวา บันทึก

4. เมื่อกดบันทึกเสร็จเรียบรอย Gadget ก็จะโชวที่หนา Blog ดังภาพ

23

การใชงานหนาบทความที่แสดงผลเปน HTML 1. เขาไปยังหนาเขียนบทความ แลวคลิ๊กขอความ HTML ดังภาพ

2. เมื่อคลิ๊กเสร็จแลวก็จะปรากฏหนาตาง Code HTML ขึ้นมา ก็จะมี Code ตางๆ ใหแกไขเพิ่มเติม อยางเชน Code ปรับขนาดรูปภาพ ดังภาพ

24

3. เมื่อแกไขเพิ่มเติมเสร็จแลว ใหคลิ๊กที่คําวา อัพเดท สิ่งที่เราแกไขหรือเพิ่มเติมก็จะแสดงยังหนาเวป Blog

Creative Commons - CC ครีเอทีฟคอมมอนส (Creative Commons: CC) คือองคกรที่ไมแสวงหาผลกําไร จัดตั้งขึ้นขยาย ขอบขายของการใชสื่อตางๆ ใหกวางขึ้นโดยไมจํากัดที่สัญญาอนุญาตของสื่อนั้นๆ สัญญาอนุญาต ของครีเอทีฟคอมมอนส จะเอื้อใหมีการใชสื่อทั้งทางภาพ เสียง ขอมูล โดยการแบงแยกสัญญาอนุญาต ยอยออกสําหรับการแจกจายและการใชขอมู ล โดยการอางอิงถึงเจาของลิขสิทธิ์เดิม ครีเอทีฟคอม มอนสกอตั้งโดย ลอวเรนซ เลสสิก ซึ่งปจจุบันบริหารงานโดย โจอิจิ อิโต (จอย อิโต)

25

ขั้นตอนการขอเริ่มใช Creative Commons: CC 1. เขาไปที่ http://creativecommons.org จากนั้นคลิ๊กที่ ขอความ Creative Commons ดังภาพ

2. จากนั้นคลิ๊กที่คําวา Choose & License

26

3. ปรับแตงตามความเหมาะสม จากนั้นก็นํา Code ที่ไดไปใสไวที่ Gadget ก็จะปรากฏ Creative Commons: CC ขึ้นมาบนหนาเวป

27

วิธีการกําหนดขนาดรูปภาพ ใหไปยังหนาเขียนขอความ จากนั้นคลิ๊กที่รูปก็จะปรากฏ หนาตางขึ้นมา ในหนาตางก็จะมีใหเลือกวา จะใหรูปภาพเปนขนาด เล็ก ปานกลาง ใหญ ใหญพิเศษ ขนาดเดิม ชิดซาย จัดกลึ่งกลาง ชิดขวา ดังภาพ เมื่อตองการขนาดใดก็ใหคลิ๊กที่ขนาดนั้น แลวกด คําวา อัพเดท

วิธีปรับขนาดภาพโดยแกไขที่หนาตาง Code HTML ใหเขาไปยังหนาตาง HTML จากนั้นจะมี Code ขนาดรูปภาพ ใหใสตัวเลขขนาดภาพตามตองการ จากนั้นกด อัพเดท ภาพก็จะปรับเปลี่ยนขนาด ตามที่เราตองการ

28

วิธีการตัดหนาขอความที่โชว เพื่อไมใหขอความยาวจนเกินไป 1. เขาไปที่หนาตางเขียนขอความ จากนั้นก็คลิ๊กตรงตําแหนงที่จะใหขอความแสดงโชวบนหนาเวป Blog และคลิ๊กที่ แทรกการขาม ดังภาพ

2. เมื่อคลิ๊กเสร็จก็จะปรากฏเสนขึ้นมา เพื่อแสดงใหรูวา ขอความที่จะโชวบนหนาเวป Blog จะสิ้นสุด ตรงนี้ จากนั้นก็กดคลิ๊กที่ อัพเดท

29

3. เมื่อคลิ๊ก อัพเดท เสร็จ ขอความที่หนาเวป Blog ก็จะโชวสั้นลงตามที่เราไดกําหนดไว เมื่ออยากดู ขอความเพิ่มเติมใหคลิ๊กที่ อานเพิ่มเติม ดังภาพ

30

Google Sites google site คือเว็บบล็อกฟรี ของ google นั่นเองมีความสามารถหลากหลาย ผูใชงานสามารถ ปรับแตงไดตามใจชอบ และวัตถุประสงคของการทําเว็บ ของแตละคน หากเขาใจมันแลว ทานจะชอบ มัน และก็ไมยากที่ทานจะเขาใจมัน ขอเพียงแตทาน คียขอมูลเปน และสนใจ เทานี้ทานก็สามารถมี เว็บบล็อกดีๆตัวหนึ่งไดอยางฟรี และที่สําคัญ ทานสามารถเชิญชวนเพื่ อนของทานใหมาชวยกันสราง เว็บบล็อกตัวนี้รวมกัน จากนี้ไป ผมจะใชคําวา ไซต แทนสิ่งนี้ครับ

31

ขั้นตอนการสราง Google Sites 1. เขาไปที่ sites.google.com จากนั้น คลิ๊กที่ สมัครใชงาน

2. เมื่อคลิ๊กเขามาจะปรากฏ หนาตาง ใหกรอก Email/ระหัสผาน เมื่อกรอกเสร็จใหคลิ๊กที่ สรางบัญชีของฉัน ดังภาพ

32

จากนั้นเราก็จะได Google sites ตามที่เราตองการ

วิธีเปลี่ยนภาษาที่แสดงผลของไซต 1. ไปที่หนาไซตของเรา คลิ๊กที่ เพิ่มเติม>จัดการไซต ดังภาพ

33

2. จากนั้นไปที่ ทั่วไป > ภาษาที่แสดงผลของไซต แลวกดเลือกเปลี่ยนเปน ภาษาไทย แลวกดบันทึก

3. เมื่อกดบันทึกเสร็จ หนาไซตเราก็จะแสดงผลเปนภาไทย ดังภาพ

34

วิธีการปรับแตง Google Sites ปรับแตงสีพื้นหลัง 1. ไปที่หนาไซตของเรา คลิ๊กที่เพิ่มเติม เลือก จัดการไซต ดังภาพ

2. จากนั้นเลือกที่ สีและแบบอักษร > สีพื้นหลังของหนา จากนั้นคลิ๊ก กําหนดเองแลวเลือกสีที่เรา ตองการจากนั้นกด บันทึก

35

วิธีใสรูปพื้นหลัง 1. ไปที่หนาไซตของเรา คลิ๊กที่เพิ่มเติม เลือก จัดการไซต ดังภาพ

2. จากนั้นเลือกที่ สีและแบบอักษร > รูปภาพพื้นหลังของหนา จากนั้นคลิ๊ก กําหนดเองเพิ่มไฟร จากนั้นก็เลือกไฟรรูปภาพที่เราตองการจะนํามาเปนพื้นหลัง เสร็จแลวกด บันทึก

36

วิธีใสรูปพื้นหลังสวนหัวของไซต 1. ไปที่หนาไซตของเรา คลิ๊กที่เพิ่มเติม เลือก จัดการไซต ดังภาพ

2. จากนั้นเลือกที่ สีและแบบอักษร > รูปภาพพื้นหลังสวนหัวของไซต จากนั้นคลิ๊ก กําหนดเองเพิ่ม ไฟร จากนั้นก็เลือกไฟรรูปภาพที่เราตองการจะนํามาเปนสวนหัว เสร็จแลวกด บันทึก

37

วิธีเพิ่มรายการในแถบดานขาง 1. ไปที่หนาไซตของเรา คลิ๊กที่เพิ่มเติม เลือก จัดการไซต ดังภาพ

2. ไปที่ เคาโครงของไซต จากนั้นคลิ๊ก เพิ่มรายการในแถบดานขาง แลวเลือกรายการที่เราตองการ จากนั้นกด บันทึก

38

3. เมื่อเสร็จแลว รายการที่เราเลือกจะไปปรากฏบนหนาไซตของเราดังภาพ