การตกแต่งเว็บไซต์

~1~

คานา บล็อก Blog คือเว็บไซต์ ท่ เี จ้ าของ หรือ admin สามารถบันทึกเรื่องราวของตนเองลงในเว็บได้ ตลอดเวลา การสร้ าง เว็บบล็อก สามารถทาได้ ง่ายๆด้ วนตนเอง ไม่ ซับซ้ อน และภายระบบการจัดการบริหารเว็บไซต์ พืน้ ฐาน เช่ น เครื่ องมือการขียนรู ป โพสรู ป จัดหมวดหมู่ และลูกเล่ นอื่นๆ รายงานเล่ นนี ้ จัดทาขึน้ เพื่อรวบรวมความรู้ การศึกษาและการตกแต่ งเว็บบล็อก ซึ่งได้ แก่ Wordpress/ Google Blogspor/Google Sites ยันล้ วนเป็ นเนือ้ หาที่ผ่านกระบวกการเรียนการสอนในรายวิชา เทคโนโลยีเพื่อการ ออกแบบนิเทศศิลป์ Arti 3319 สอนโดย ผศ.ประชิด ทิณบุตร หากนือ้ หาในรายงาน มีความผิดพลาด ต้ องขออภัยมา ณ ที่นีด้ ้ วย นางสาวอัจจิมา จันทร์ อารุ ง ผู้จัดทา

~2~

สารบัญ หน้ า

1.การจัดการ และปรับแต่ง Wordpress

3

- การเปลี่ยนภาษาบนหน้ าเว็บ

3

- การตัดหน้ าข้ อความที่โชว์

5

- วิธีเปลี่ยน Header และเพิ่ม widget

5

- การจัดการภาพและเพิ่มขนาดของภาพ

7

2.การจัดการและปรับแต่ง Google Blogspot

9

- การโพสข้ อความใน Blogger

9

- การดูโค้ ดแบบ HTML

10

- Creative Commons – CC

10

- หน้ าจัดการเว็บ

13

- การใส่หน้ าเว็บส่วนหัว

15

- การเปลี่ยนรูปแบบหน้ าของเว็บ Blogger

16

3.การจัดการและปรับแต่ง Google sites

18

- การเขียน และแก้ ไขข้ อความความบนหน้ า Sites

18

- การจัดการไซต์

19

~3~

การจัดการและปรั บแต่ ง Wordpress Wordpress คือ wordpress คือ CMS (Content Management System) รูปแบบหนึ่งที่ได้ รับความนิยมมากในปั จจุบนั ที่จะ ช่วยทาให้ การเขียนบล็อกของเรานันง่ ้ ายขึ ้นอย่างคาดไม่ถึง wordpress เปรี ยบเสมือนโปรแกรมที่คอยช่วยจัดการบทความที่เรา เขียนลงให้ เป็ นระบบ และแสดงผลออกมาสวยงาม การเปลี่ยนภาษาบนหน้ าเว็บ ขันตอนที ้ ่ 1 คลิกที่รูปของเรา แล้ วเลือก Setings

ขันตอนที ้ ่ 2 จะเข้ ามาหน้ านี ้

~4~

ขันตอนที ้ ่ 3 คลิกเลือกภาษาในช่อง Language กด save เป็ นอันเสร็จสมบูรณ์

หน้ าควบคุมก็เปลี่ยนเป็ นภาษาไทย ดังรูป จะทาให้ สะดวกสบายกับการ ตกแต่งต่างๆ

การตัดหน้ าข้ อความที่โชว์ เพื่อไม่ ให้ ข้อความยาวจนเกินไปบนหน้ าบล็อก

~5~

วิธีเปลี่ยน Header และเพิ่ม widget วิธีการปลี่ยน header นันเป็ ้ นสิ่งจาเป็ นคือต้ องทราบขนาดของ header ที่เราจะใช้ บนหน้ า blog ของเราให้ มีขนาดพอดี ขันตนที ้ ่หนึง่ เข้ าหน้ าควบคุม เลือก รูปแบบของบล็อก เลือก ส่วนหัว

~6~

ขันตอนที ้ ่ 2 เลือกภาพโดยขนาดต้ อง 940 เท่า 198 pixels

ขันตอนที ้ ่ 3 กดอัปโหลดเป็ นอนเสร็จสมบูรณ์

~7~

การจัดการภาพและเพิ่มขนาดของภาพ ขันตอนที ้ ่ 1 เลือกที่รูปแล้ ว คลิก แก้ ไขรูป

ขันตอนที ้ ่ 2 เลือกขนาดรูป จัดรายละเอียดหน้ า การวางของรูป

ผลที่ได้ รับ รูปบนคือรูปที่เปลี่ยนขนาด

~8~

~9~

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

หน้ าแรกเมื่อเข้ ามาใน Blogger

~ 10 ~

การโพสข้ อความใน Blogger คลิกที่ รูปดินสอสีส้ม

จะเข้ ามาหน้ านี ้ หน้ านี ้การทางานคล้ ายกับ Microft Word

~ 11 ~

การดูโค้ ดแบบ HTML

Creative Commons – CC สัญญาอนุญาตใช้ งาน Creative Commons – CC คือสัญญาอนุญาตขิงครี เอทีฟคอมมอนต์นี ้ จะเอื ้อให้ มีการใช้ สื่อ ที่งภาพและ เสียง ข้ อมูล โดยการแบ่งแยกศัญญาอนุญาตออก ในรู ปแบบของการแจกจ่ายและใช้ ข้อมูล โดยเน้ นที่การอ้ างอิงเจ้ าของสิทธิ์เดิม

~ 12 ~

คลิกที่ รูปสี่เหลี่ยม

~ 13 ~

ตังค่ ้ าตามความหมาะสม

กรอบสีฟ้าให้ ใส่ข้อมูลลงไปแล้ ว Copy code

มาที่หน้ าจัดการเว็บ ถ้ าต้ องการใส่แถบข้ างๆให้ เข้ าการออกแบบ

~ 14 ~

เลือก รูปแบบ

คลิกเพิ่ม Gedger

~ 15 ~

การใส่ หน้ าเว็บส่ วนหัว

~ 16 ~

ใส่ URL แล้ วชื่อเช่ น หน้ าแรก เป็ นต้ น

การเปลี่ยนรู ปแบบหน้ าของเว็บ Blogger

~ 17 ~

สามารถเลือกปรับได้ ตามชอบ

~ 18 ~

การจัดการและปรั บแต่ ง Google sites Google sites คือเว็บไซต์โปรแกรมออนไลน์ที่ทาให้ การสร้ างเว็บไซต์ง่ายขึ ้นเหลือนกับการแก้ ไขเอกธรรมดาๆโดยผู้เขียนไม่ จาเป็ นต้ องมีความรู้ทางภาษา HTML

การเขียนและแก้ ไขข้ องความบนหน้ า Sites เลือก ไอคอนปากกา

~ 19 ~

สามารถคลิกแก้ ไขได้ เลย

การจัดการไซต์

~ 20 ~

สามารถเลือกเปลี่ยนตามที่ต้องการ

เสร็จแล้ วกดบันทึก

~ 21 ~

การจัดการไซต์ เลือก สีและแบบตัวอักษร

สารถเลือกเปลี่ยนสีและตัวอักษร ขนาดได้ เสร็จแล้ วกดบันทึก