1 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
คํานํา สรุ ปการจัดการเรี ยนรู ้การใช้งาน Blogger ในเบื้องต้นที่จดั ทําขึ้นนี้เป็ นเอกสารประกอบการ เรี ยนรู ้ในรายวิชาเทคโนโลยีเพือ่ การออกแบบนิเทศศิลป์ ARTI3311 โดย นางสาว พุทธรักษา พลขันธ์ ชื่อ ต้นแบบการจัดการความรู ้ออนไลน์วา่ “ สรุ ปการเรี ยนรู ้การใช้งาน Blogger ” การจัดทําคู่มือการจัดการเรี ยนรู ้ออนไลน์ฉบับนี้ ผูจ้ ดั ทําพยายามเขียนให้เข้าใจได้ง่าย สะดวกต่อการ ปฏิบตั ิตาม และนําไปใช้ต่อยอดการเรี ยนรู ้ได้อย่างไรก็ตามในการจัดทําคู่มือการจัดการเรี ยนรู ้ ออนไลน์ฉบับนี้ หากมีขอ้ บกพร่ อง ในขั้นตอนใด ผูจ้ ดั ทําขออภัยมา ณ ที่นี่
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
2 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
สารบัญ วิธีลงชื่อสมัครสมาชิกของ Gmail………………………………………..3 ขั้นตอนการลงชื่อสมัครเข้าใช้เป็ นสมาชิกของ Gmail…………………...4 วิธีการลงชื่อเข้าใช้งาน Blogger………………………………………….4 วิธการสร้าง Blogger……………………………………………………..5 วิธีการปรับแต่งขนาดและกราฟฟิ กพื้นของ Blogger …………………....6 วิธีการใช้งานรู ปแบบ……………………………………………….…..10 วิธีการปรับแต่งหน้าเว็บ.......……………………………………….…...12 วิธีการเพิม่ บทความใหม่…………………………………………..…….14 รายละเอียด Gadget……………………………………………………...16 การลง CREATIVE COMMONS…………………………………….…17 วิธีการลง Clip video You Tube………………………………….……...20
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
3 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
วิธีลงชื่อสมัครสมาชิกของ Gmail ขั้นตอนการลงชื่อสมัครเข้าใช้เป็ นสมาชิกของ Gmail ขั้นตอนแรกให้เข้าไปที่ http://www.gmail.com เพื่อทําการสมัครสมาชิก
1
2
ภาพที่ 1 แสดงหน้าต่างลงชื่อเข้าใช้งานของ Gmail 1. Create an account หรื อ สมัครสมาชิกใหม่ 2. กรอกชื่ออีเมลล์ของผูใ้ ช้ หากลงชื่อเป็ นสมาชิกอยูก่ ่อนแล้ว ทําการเลือก Create an account ที่หมายเลข 1 เพื่อต้องการสมัครสมาชิก เมื่อเลือก Create an account เรี ยบร้อยแล้ว จะปรากฏหน้าเพจ Create a new Google account
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
4 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
3. ให้กรอกชื่อและนามสกุล 4. กรอกอีเมล์ของผูใ้ ช้งาน 5. ตั้งรหัสผ่านสําหรับลงชื่อ
6. ยืนยันรหัสผ่านอีก 1 7. แจ้งวัน เดือน ปี เกิด
9. ระบุหมายเลขโทรศัพท์
8. ระบุเพศ 10. ให้ระบุอีเมล์สาํ รอง 11. กดยืนยันว่ามีชื่อผูใ้ ช้อยู่จริ ง
และพิมพ์ตวั อักษรตาม
12. เลือกภูมิลาํ เนาของผูใ้ ช้
13. กดเครื่ องหมายยอมรับ
ภาพที่ 2 แสดงหน้าต่างกรอกรายละเอียดของผูส้ มัคร Gmail
วิธีการลงชื่อเข้ าใช้ งาน Blogger 1. การลงชื่อเข้าใช้ Blogger 1.1 วิธีลงชื่อเข้าใช้งาน Blogger ขั้นตอนแรกให้เข้าไปที่ http://www.blogger.com เพื่อทําการลงชื่อเข้าใช้งาน
1
ภาพที่ 1 แสดงหน้าต่างลงชื่อเข้าใช้งานของ Blogger ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
5 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
2.การสร้ าง Blogger
2.1 คลิกที่ New Blog ตามหมายเลข 2 เพื่อเป็ นการสร้าง Blog ขึ้นมาใหม่
2
ภาพที่ 2 แสดงหน้าบัญชีของผูใ้ ช้ Blogger จะประกฎหน้าต่างตามภาพ
3.ให้ใส่ ชื่อที่จะใช้แสดงบนหน้า Blogger
4.ให้ใส่ ชื่อเพื่อเป็ นการกําหนด URL ของ Blogger
3 4 5
6
ภาพที่ 3 แสดงหน้าต่าง CreateNew Blog
5.เลือก Templateเบื้องต้น เพื่อใช้ใน Blogger
6. เมื่อใส่ ขอ้ มูลและเลือก Template เบื้องต้นแล้ว หลังจากทําการสร้าง Blogger ขึ้นมาใหม่แล้ว หน้า Home ของผูใ้ ช้จะปรากฎชื่อ Blog ใหม่ที่ถูกสร้างขึ้นมาดังภาพ ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
6 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
7
ภาพที่ 4 แสดงหน้า Home ของผูใ้ ช้ 7.คือBlog ที่ถูกสร้าง และกําหนดชื่อขึ้นมาใหม่ให้คลิกที่นี่เพื่อไปสู่หน้า Dashboard เพื่อดําเนินการปรับแต่ง Blogger ต่อไป
วิธีการปรับแต่ งขนาดและกราฟฟิ กพืน้ ของ Blogger
ภาพที่ 5 แสดงหน้าแผงควบคุม (Dashboard) ของผูใ้ ช้งาน Blogger
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
7 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
9
8
ภาพที่ 6 แสดงหัวข้อของแม่แบบในแผงควบคุม 8.คือ หัวข้อย่อยของคําสั่งแม่แบบ 9.คือ การกําหนดค่า เลือก (Customize)
10
ภาพที่ 7 แสดงหน้าเครื่ องมือออกแบบเทมเพลตของ Blogger ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
8 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
10.คือ เทมเพลต 10.1 ให้ทาํ การเลือกเทมเพลตในที่น้ ีเลือกเทมเพลตแบบ Picture Window หรื อกรอบหน้าต่าง ต่อไปให้เลือกที่พ้นื หลัง (Background) ตามที่ได้เลือกไว้ 11.คือ พื้นหลัง 11.1 ภาพพื้นหลัง สามารถเปลี่ยนภาพพื้นหลัง ในหัวข้อพื้นหลังให้เลือกอัพโหลดรู ปภาพจากคอมพิวเตอร์และตั้ง ค่าการจัดเรี ยง (Alignment) ให้อยูท่ ี่ตาํ แหน่งกลางด้านบน และเลือกไม่จดั เรี ยง (Don’t Tile) และคลิกเครื่ องหมาย ถูกที่Scroll with page หรื อคําสั่งเลื่อนไปพร้อมกับหน้าเว็บ
11 11.1
11.2
11.3
ภาพที่ 8 แสดงหัวข้อให้ปรับแต่งพื้นหลังของเทมเพลต
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
9 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
11.2 เลือกภาพพื้นหลังหรื ออัปโหลดภาพใหม่ ในหัวข้อพื้นหลังให้เลือกอัพโหลดรู ปภาพจากคอมพิวเตอร์ และตั้งค่าการจัดเรี ยง (Alignment) ให้อยูท่ ี่ตาํ แหน่งกลางด้านบน และเลือก ไม่จดั เรี ยง (Don’t Tile) และคลิกเครื่ องหมายถูกทีS่ croll with page หรื อ คําสั่งเลื่อนไปพร้อมกับหน้าเว็บ 11.3 เลือกภาพแล้วกดที่เสร็ จสิ้ น 12.คือ ปรับความกว้าง
12
ภาพที่ 9 แสดงหัวข้อให้ปรับขนาดความกว้างของหน้าเทมเพลต
12.1
12.1 แถบปรับขนาดความกว้างของหน้าเทมเพลต ในที่น้ ีจะตั้งความกว้างทั้งหมด (Entire blog) เป็ น 980 pxและ แถบด้านข้างขวา (RightSidebar) เป็ น 330 px 13.คือ รู ปแบบ 13.2
13 13.1
ภาพที่ 10 แสดงหัวข้อให้ปรับรู ปแบบ (Layout) ของหน้าเทมเพลต
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
10 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
13.1 การออกแบบเนื้อความ ในที่น้ ีผใู้ ช้จะเลือกใช้การออกแบบเนื้อความ (Body layout) เป็ นแบบ 2 แถว (Column) และเมื่อกําหนดค่าคําสัง่ ทั้งหมดเสร็ จสิ้ น ให้ทาํ การคลิกที่คาํ สัง่ ใช้กบั บล็อก(Apply to blog) 13.2 ให้ทาํ การคลิกที่คาํ สั่ง ใช้กบั บล็อก(Apply to blog) 14.คือ การปรับแต่งขั้นสูง มีส่วนประกอบดังนี้
14
ภาพที่ 11 แสดงหัวข้อให้ปรับแต่งขั้นสูง ของหน้าเทมเพลต 15.รูปแบบ
16 17
15
ภาพที่ 12 แสดงหัวข้อของรู ปแบบในแผงควบคุม
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
11 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
16. กําหนดค่าส่ วนหัว 16.1 ชื่อบล็อกที่ใช้แสดง 16.2 คําอธิบายจะอยูต่ าํ แหน่งใต้ชื่อของบล็อก 16.2 16.3
16.3 เลือกรู ปภาพ 16.4 เลือกการจัดวาง ในที่น้ ีเลือกแบบ หลังจากนั้นกด บันทึก
16.4
ภาพที่ 13 แสดงหัวข้อ กําหนดค่าส่ วนหัวของ หน้ารู ปแบบ 17. Gadget แบ่งออกเป็ นหมดได้แก่
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
12 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
17.1 พื้นฐาน 17.2
17.1 17.3
17.2 แกดเจ็ตเพิ่มเติม 17.3 เพิ่มของคุณเอง
ภาพที่ 14 แสดงหัวข้อ Gadget ของหน้ารู ปแบบ
วิธีการปรับแต่ งหน้ าเว็บ 18. วิธีการจัดการหน้าเว็บใหม่
18
ภาพที่ 15 ตัวอย่างแสดงผลของส่ วน หน้าเว็บใหม่ในหน้าเว็บบล็อก
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
13 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
18.3 18.4 18.2
18.5
18.1
ภาพที่ 16 แสดงหัวข้อ หน้าเว็บ ของหน้าแผงควบคุม 18.1 หน้าเว็บ 18.2 หน้าเว็บใหม่ แบ่งออกเป็ น 2 ส่ วน 18.3 ส่ วนที่ 1 คือ การตั้งหัวข้อใหม่ให้หน้าเว็บบล็อก 18.4 ส่ วนที่ 2 คือ เพิม่ เว็บไชต์หน้าเว็บบล็อก 18.5 เมื่อเพิม่ ส่ วนต่างๆเรี ยบร้อยให้กด บันทึกจากจัดเรี ยง
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
14 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
การเพิ่มบทความ
19.1 19
ภาพที่ 17 แสดงหัวข้อ บทความ ของหน้าแผงควบคุม 19. การเพิม่ ของส่ วนบทความใหม่ จะแสดงบทความทั้งที่มี 19.1 เพิม่ บทความใหม่ หรื อ เขียนความเพื่อลงในหน้าเว็บบล็อก
20
20.1
20.2
20.3
ภาพที่ 18 แสดงตัวอย่างของหน้า บทความใหม่ ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
15 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
20. ตั้งชื่อเรื่ อง 20.1 ข้อความตัวอักษร 20.2 ข้อความ HTML 20.3 กดเพื่อเผยแพร่
การตั้งค่า
21 21.1
21. การตั้งค่าพื้นฐาน 21.1 สิ ทธิ์ ผูเ้ ขียนบล็อก สามารถเพิ่มผูเ้ ขียนบล็อกหรื อแก้ไขได้ โดยกดไปที่ + เพิ่มผูเ้ ขียน
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
16 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
22.2
22
22.1
ภาพที่ 19 แสดงตัวอย่างผูเ้ ขียนบล็อก 22. เพิ่มผูเ้ ขียนบล็อกโดยการใส่ อีเมล์ ของ Gmail ลงไป 22.1 เสร็ จแล้วกด เชิญผูเ้ ขียน 22.2 สามารถเลือกผูเ้ ขียน เป็ นผูด้ ูแลหรื อ ผูเ้ ขียนได้ รายละเอียดของ Gadget
23
23.1
23. การตั้งค่ารู ปภาพ 23.1 กดเลือกที่ คอมพิวเตอร์ของคุณ Choose File แล้วเลือกบันทึก ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
17 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
ภาพที่ 20 แสดงตัวอย่าง ตั้งค่ารู ปภาพ ของหน้าเว็บบล็อก วิธีการลง Creative Commons
ภาพที่ 21 แสดงตัวอย่าง Creative Commons ของหน้าเว็บบล็อก
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
18 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
24
24. เข้าไปที่ Gadget เลือก หน้าต่าง ตั้งค่า HTML/JavaScript 24.1 เข้าใช้งาน
http://creativecommons.org
24.1
ภาพที่ 22 แสดงตัวอย่าง Creative Commons ของหน้าเว็บไซต์ 24.1 เลือก Choose a License เพื่อทําการเข้าใช้งาน
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
19 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
24.2
24.2 หลังจากกรอกข้อความทั้งหมด นําโค๊ด HTML
24.3
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
20 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
24.3 มาใส่ ไว้ในช่อง เนื้อหา แล้วกด บันทึกเป็ นอันเสร็ จสิ้ น วิธีลง Clip video YouTube ลงในเว็บบล็อก
ภาพที่ 23 แสดงตัวอย่าง Clip video YouTube ของหน้าเว็บบล็อก 25. เข้าหน้าบทความใหม่ 25.1
25.2 25.3 25.5 25.4
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
21 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
25.1 เข้าเว็บไซต์ https://www.youtube.com 25.2 เลือกแบ่งปัน 25.3 กดเลือก ฝัง 25.4 ปรับขนาดให้พอกับเว็บบล็อก 25.5 Copy Code HTML
25.5
25.6
25.7
25.6 กดเลือก HTML 25.6 นํา Code ที่ได้มาใส่ 25.7 กดเพื่อเผยแพร่
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556
22 เอกสารบันทึกความรูในรายวิ ชาเทคโนโลยีเพือ ่ การออกแบบนิเทศศิ ลป์ ้
โดย นางสาวพุทธรักษา พลขันธ์ รหัสนักศึกษา 5221303794 กลุ่มเรี ยน 201 Email : puttharaksa20@gmail.com http://arti3319-puttharaksa.blogspot.com/ สาขาวิชา ศิลปกรรม แขนงวิชาออกแบบนิเทศศิลป์ คณะมนุษยศาสตร์และสังคมศาสตร์ มหาวิทยาลัยราชภัฎจันทรเกษม
ผูเ้ ขียน นางสาวพุทธรักษา พลขันธ์
, 2556