1
คำนำ บล็อก คือ เว็บไซต์สร้ำงโดย admin ที่เป็นเจ้ำของในกำรเขียนตกแต่งเว็บไซต์เรื่องรำวต่ำงๆของ ตนเองหรือผู้อื่นได้ตลอดเวลำ มีที่สร้ำงเว็บไซต์ทำได้ฟรีหรือไม่ฟรีก็มีถ้ำศึกษำก็ไม่ยำกหรือซับซ้อน เกินไป จะมีตัวช่วยเสริมให้เรำสะดวกในกำรใช้สร้ำงเว็บไซต์ให้หลำกหลำยมำกขึ้น รำยงำนเล่มนี้ จัดทำขึ้นเพื่อกำรศึกษำกำรทำเว็บตกแต่งภำยในเว็บบล็อกมีที่ศึกษำ ได้แก่ Google Sites / Google Blogspor / Wordpress เป็นกำรเรียนกำรสอนของรำยวิชำ เทคโนโลยี เพื่อกำรออกแบบนิเทศศิลป์ ARTI3319 ผู้สอน ผศ.ประชิด ทิณบุต ร หำกผิดพลำดประกำรใดใน รำยงำนเล่มนี้ ต้องขออภัยมำ ณ ที่นี้ด้วย ผู้จัดทำ นำงสำวสุพัตรำ จักอำโน
2
สำรบัญ เรื่อง 1. กำรจัดกำร แต่งเว็บ Google Sites - กำรเขียน แก้ไขข้อควำม - วิธีกำรจัดหน้ำไซต์ - วิธีสร้ำงรูปแล้วลิ้งไปยังหน้ำเว็บไซต์อื่น
2. กำรจัดกำร แต่งเว็บ Google Blogspot - วิธีปรับแต่งเว็บ Google Blogspot - วิธีใช้โค้ด html ในหน้ำบทควำม - วิธีทำ Creative Commons CC (เงื่อนไขในกำรให้อนุญำตของครีเอทีฟคอมมอนส์) - วิธีทำ Gadget ลงในเว็บ Google Blogspot (ปฎิทิน) - วิธีดูขนำดภำพ และกำหนดภำพด้วยตัวเอง - วิธีกำรตัดข้อควำม เพื่อจัดเนื้อหำหน้ำบล็อคให้สั้นลง - วิธีใส่ แถบเมนู บนส่วนหัวเว็บ Google Blogspot
3. กำรจัดกำร แต่งเว็บ Wordpress - วิธีเปลี่ยนภำษำ - วิธีตัดเนื้อหำยำวเป็นสั้นลงเพียงกด “อ่ำนเพื่มเติม” - วิธีเปลี่ยน Header เพื่ม Widget [เปลี่ยนรูปแบบบล็อค เพื่ม พื้นหลัง] - วิธีจัดรูปหรือเพื่มขนำดภำพ - วิธีทำภำพเคลื่อนไหวตกแต่งเว็บไซต์
หน้ำ 3 3 4 5
7 7 8 9 14 17 18 19 21 21 22 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