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

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

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. เมื่อเสร็จแลว รายการท่ีเราเลือกจะไปปรากฏบนหนาไซตของเราดังภาพ