2
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
คํานํา คูมือการจัดการเรียนรูการใชงาน Blogger ในเบื้องตนที่จัดทําขึ้นนี้ เป น เอกสารประกอบการเรี ย นรู ใ นรายวิ ช าเทคโนโลยี เ พื่ อ การออกแบบ นิเทศศิลป ARTI3319 ของนายประเสริฐ สิงหครุธ โดยใชชื่อ ตนแบบการ จัดการความรูออนไลนวา “ คูมือการเรียนรูการใชงาน Blogger ในเบื้องตน ” โดยเริ่มทําการสรางขึ้นเมื่อวันที่ 10 กรกฎาคม พ.ศ. 2556 การจั ด ทํ า คู มื อ การจั ด การเรี ย นรู อ อนไลน ฉ บั บ นี้ ผู จั ด ทํ า พยายาม เขียนใหเขาใจไดงาย สะดวกตอการปฏิบัติตาม และนําไปใชตอยอดการ เรียนรูได อยางไรก็ตามในการจัดทําคูมือการจัดการเรียนรูออนไลนฉบับนี้ หากมี ข อ บกพร อ ง ในขั้ น ตอนใด ผู จั ด ทํ า ขออภั ย มา ณ ที่ นี่ และสามารถสอบถาม ติชม หรือใหคําแนะนําตอผูจัดทําไดโดยตรงที่ เบอรโทรศัพท 089-9669261 หรืออีเมลล prasert.singkurt@gmail.com
นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
3
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
สารบัญ วิธีลงชื่อสมัครสมาชิกของ Gmail………………………………………..4 ขั้นตอนการลงชื่อสมัครเขาใชเปนสมาชิกของ Gmail…………………...4 วิธีการลงชื่อเขาใชงาน Blogger………………………………………..11 วิธีลงชื่อเขาใชงาน Blogger…………………………………………....11 การสราง Blogger………………………………………………………13 วิธีการปรับแตงขนาดและกราฟฟกพื้นของ Blogger เบื้องตน…………..16 วิธีการปรับแตงขนาดและกราฟฟกพื้นของ Blogger……………………15 วิธีการทํา Creative Commons ………………………………………..21
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
4
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
วิธีลงชื่อสมัครสมาชิกของ Gmail ขั้นตอนการลงชื่อสมัครเขาใชเปนสมาชิกของ Gmail ขั้นตอนแรกใหเขาไปที่ http://www.gmail.comเพื่อทําการสมัครสมาชิก ตามภาพที่ 1.1
1
2
ภาพที่ 1.1 แสดงหนาตางลงชื่อเขาใชงานของ Gmail ที่มา : นายประเสริฐ สิงหครุธ, 2556
หมายเลข1 คือ Create an account หรือ สมัครสมาชิกใหม หมายเลข2 คือ กรอกชื่ออีเมลลของผูใช หากลงชื่อเปนสมาชิกอยูก อนแลว ทําการเลือก Create an account ที่หมายเลข 1 เพื่อตองการสมัครสมาชิก
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
5
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
เมื่อเลือก Create an account เรียบรอยแลว จะปรากฎหนาเพจ ให Create a new Google account ตามภาพที่ 1.2 หมายเลข 3 คือ ใหกรอกชื่อและนามสกุล
3
หมายเลข 4 คือ กรอกอีเมลลของผูใชงาน
4
หมายเลข 5 คือ ตั้งรหัสผานสําหรับลงชื่อเขาใช
5
หมายเลข 6 คือ ยืนยันรหัสผานอีก 1 ครั้ง
6
หมายเลข 7คือ แจงวัน เดือน ป เกิด
7 หมายเลข 8คือ ระบุเพศ หมายเลข 9คือ ระบุหมายเลขโทรศัพท
8 9
หมายเลข 10คือใหระบุอีเมลลสํารอง
10
หมายเลข 11คือ กดยืนยันวามีชื่อผูใชอยูจริง และพิมพตัวอักษรตามภาพ หมายเลข 12 คือ เลือกภูมล ิ ําเนาของผูใช
11
หมายเลข 13 คือ กดเครื่องหมายยอมรับเงื่อน ไขการลงชื่อเขาใช และเลือกกด Next step
12 13
เพื่อดําเนินการขั้นตอไป
ภาพที่ 1.2 แสดงหนาตางกรอกรายละเอียดของผูสมัคร Gmail ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
6
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
1.3 หนาตางแสดงบัญชีของผูใชจะปรากฎขึน ้ มาตามภาพที่ 1.3
14
ภาพที่ 1.3 แสดงหนาตางบัญชีของผูใชงาน ที่มา : นายประเสริฐ สิงหครุธ, 2556
หมายเลข 14 Add profile photo ใหใสรูปภาพประจําตัวของผูใช
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
7
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
หลังจากคลิกเลือกที่ Add profile photo จะปรากฎหนาตางของภาพที่ 1.4
15
16
ภาพที่ 1.4 แสดงหนาตางใหผูใชอัพโหลดรูปภาพประจําตัว ที่มา : นายประเสริฐ สิงหครุธ, 2556
หมายเลข15 คือ อัพโหลดรูปภาพจากกลอง หมายเลข16 คือ เลือกรูปภาพจากคอมพิวเตอร
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
8
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
ในที่นี้จะทําการเลือกรูปภาพจากคอมพิวเตอรและอัพโหลด ตามภาพที่ 1.5 หมายเลข 17เมื่อจัดขนาดของภาพไดเรียบรอย ใหคลิกที่ Set as profile photo ตามหมายเลข 17
17
ภาพที่ 1.5 แสดงหนาตางอัพโหลดรูปภาพจากเครือ ่ งคอมพิวเตอร ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
9
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
18
19
ภาพที่ 1.6 แสดงหนาตางบัญชีของผูใชงานหลังจาก อัพโหลดรูปประจําตัว ที่มา : นายประเสริฐ สิงหครุธ, 2556
เมื่ออัพโหลดรูปประจําเรียบรอยจะประกฎตามภาพที่ 1.6 หมายเลข 18 หากตองการจะเปลี่ยนรูปประจําตัวอีกครั้งหนึ่ง ใหเลือกที่นี่ หมายเลข 19 คลิกเพือทําการตอไปตามภาพที่ 1.7
20
21 ภาพที่ 1.7 แสดงเพจหนาแรกของผูเริ่มใชงาน Gmail ครั้งแรก ที่มา : นายประเสริฐ สิงหครุธ, 2556
หมายเลข 20 คือ ชื่อผูใชงานและจํานวนของขอความในกลองจดหมาย หมายเลข 21 คือ ใหทําการคลิกที่นี่เพื่อเขาสู Gmail
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
10
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
วิธีการสมัครเขาใชงานเปนสมาชิกของ Gmail
ภาพที่ 1.8 แสดงกลองขอความจดหมายของผูใช Gmail ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
11
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
วิธีการลงชื่อเขาใชงาน Blogger 2. การลงชื่อเขาใช Blogger 2.1 วิธีลงชื่อเขาใชงาน Blogger
22
23
ภาพที่ 2.1 แสดงกลองขอความจดหมายของผูใช Gmail ที่มา : นายประเสริฐ สองหครุธ, 2556
ทําการคลิกที่หมายเลข 22 More จะมีหัวขอยอยเรียงลงมา ใหผใ ู ชเลือกที่ หัวขอ Blogger ตามหมายเลข 23
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
12
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
หมายเลข 24 คือ การปรับเปลีย ่ นภาษา
24
ภาพที่ 2.2 แสดงหนาแรกของบัญชีผูใช Blogger ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
13
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
2.2 การสราง Blogger
25
ภาพที่ 2.3 แสดงหนาบัญชีของผูใช Blogger ที่มา : นายประเสริฐ สิงหครุธ, 2556
คลิกที่ New Blog ตามหมายเลข 25 เพื่อเปนการสราง Blog ขึ้นมาใหม จะประกฎหนาตางตามภาพที่ 2.4
26
หมายเลข 26 ใหใสชอ ื่ ที่จะใชแสดง
27
บนหนา Blogger หมายเลข 27 ใหใสชอ ื่ เพื่อเปนการ กําหนด URL ของ Blogger
ภาพที่ 2.4แสดงหนาตาง CreateNew Blog ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
14
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
หมายเลข 28เลือก Template
28
เบื้องตน เพื่อใชใน Blogger หมายเลข 29เมื่อใสขอมูลและ เลือก Template เบื้องตนแลว
29
ภาพที่ 2.5 แสดงหนาตาง Create New Blog ที่มา : นายประเสริฐ สิงหครุธ, 2556
หลังจากทําการสราง Blogger ขึ้นมาใหมแลว หนา Home ของผูใ ช จะปรากฏชื่อ Blog ใหมที่ถูกสรางขึ้นมาดังภาพที่ 2.6
30
ภาพที่ 2.6แสดงหนา Home ของผูใช ที่มา : นายประเสริฐ สิงหครธ, 2556
หมายเลข 30 คือBlog ที่ถูกสราง และกําหนดชื่อขึ้นมาใหมใหคลิกที่นี่เพื่อ ไปสูหนา Dashboard เพื่อดําเนินการปรับแตง Blogger ตอไป
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
15
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
วิธีการลงชื่อเขาใชและการสราง Blogger
ภาพที่ 2.7แสดงหนา Dashboard ของ Blog ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
16
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
วิธีการปรับแตงขนาดและกราฟฟกพื้นของ Bloggerเบื้องตน 3.วิธีการปรับแตงขนาดและกราฟฟกพื้น
ภาพที่ 3.1แสดงหนาแผงควบคุม (Dashboard) ของผูใชงาน Blogger ที่มา : นายประเสริฐ สิงหครุธ, 2556
หมายเลข 31 คือ หัวขอยอยของคําสั่งแมแบบ หมายเลข 32 คือ การกําหนดคา เลือก (Customize)
31
32
ภาพที่ 3.2แสดงหัวขอของแมแบบในแผงควบคุม ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
17
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
หมายเลข 33 คือ เทมเพลต หมายเลข 34 คือ พื้นหลัง
34
33 35
หมายเลข 35 คือ ปรับความกวาง หมายเลข 36 คือรูปแบบ
36
37
หมายเลข 37 คือปรับแตงขั้นสูง
ภาพที่ 3.3 แสดงหนาเครื่องมือออกแบบเทมเพลตของ Blogger ที่มา : นายประเสริฐ สิงหครุธ, 2556
ใหทําการเลือกเทมเพลตตามหมายเลข 33ในที่นี้เลือกเทมเพลตแบบ Picture Window หรือกรอบหนาตาง ตอไปใหเลือกที่พื้นหลัง (Background) ตามทีไ ่ ดเลือกไว
3839
ภาพที่ 3.4แสดงหัวขอใหปรับแตงพื้นหลังของเทมเพลต ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
18
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
หมายเลข 38 ในหัวขอพื้นหลังใหเลือกอัพโหลดรูปภาพจากคอมพิวเตอร และตั้งคาการจัดเรียง (Alignment) ใหอยูที่ตําแหนงกลางดานบน และเลือก ไมจัดเรียง (Don’t Tile) และคลิกเครื่องหมายถูกทีS ่ croll with page หรือ คําสั่งเลื่อนไปพรอมกับหนาเว็บ
40 39
ภาพที่ 3.5 แสดงหัวขอใหปรับขนาดความกวางของหนาเทมเพลต ที่มา : นายประเสริฐ สิงหครุธ, 2556
หมายเลข 39 คือ แถบปรับขนาดความกวางของหนาเทมเพลต ในที่นี้จะตั้ง ความกวางทั้งหมด (Entire blog) เปน 980 pxและแถบดานขางขวา (Right Sidebar) เปน 330 px
41 40
41 42 ภาพที่ 3.6แสดงหัวขอใหปรับรูปแบบ (Layout) ของหนาเทมเพลต ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
19
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
การออกแบบรูปแบบของเทมเพลต ในที่นี้ผูใชจะเลือกใชการออกแบบ เนื้อความ (Body layout) เปนแบบ 2 แถว (Column) ตามหมายเลข 40และ เลือกใชการออกแบบสวนทาย (Footer layout) เปนแบบ 2 แถว (Column) ตามหมายเลข 41 เมื่อกําหนดคาคําสั่งทัง้ หมดเสร็จสิ้น ใหทําการคลิกที่คําสั่ง ใชกับบล็อก (Apply to blog) ตามหมายเลข 42
42
ภาพที่ 3.6 แสดงหนาเครื่องมือออกแบบเทมเพลตของ Blogger ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
20
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
ภาพที่ 3.7 แสดงหนาเว็บ Blogger หลังจากที่ทําการปรับแตงขนาดและกราฟฟกพื้น ที่มา : นายประเสริฐ สิงหครุธ, 2556
หลังจากที่ทาํ การปรับแตงเทมเพลต, พื้นหลัง, ขนาด และรูปแบบ ทั้งหมด เสร็จเรียบรอย และคลิกยืนยันคําสั่ง ใชกับบล็อก (Apply to blog) และทํา การดูบล็อก (View blog) แลวจะปรากฎหนาเว็บบล็อกตามภาพที่ 3.7 ซึ่งถา หากจะทําการแกไขหรือปรับแตงเพิ่มเติมใหทําตามหัวขอที่ 3 อีกครั้งหนึ่ง
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
21
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
4. วิธการทํ ีการทํา Creative Commons CC (เงื ่ นไขในการใหอนุญาติของครี ของครี การ (เงือ เอทีฟคอมมอนส) สัญญาอนุญาตใชงาน (เงื่อนไขในการใหอนุญาตของครีเอทีฟคอมมอนส) คือ สัญญาของครีเอทีฟคอมมอนตนี้ จะเอื้อใหมีการใชสื่อ ภาพ เสียง ขอมูล โดยแบงสัญญาอนุญาตออกในรูปแบบของการแจกจายและใชขอมูล โดย เนนที่การอางอิงเจาของลิขสิทธิ์เดิม หมายเลข 43 คือ Creative Commons CC (เงื่อนไขในการใหอนุญาติ ของครีเอทีฟคอมมอนส)
43
ภาพที่ 4.1 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
22
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
หมายเลข 44 คือ คลิกที่ Creative Commons
44
ภาพที่ 4.2 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556
หมายเลข 45 คือ คลิกเลือกใบอนุญาต
45 ภาพที่ 4.3 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
23
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
ปรับตั้งคาตามความเหมาะสมของการใชงาน
ภาพที่ 4.4 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556
1
2
3
4
ความหมายไอคอน 1. Creative Commons CC 2. แสดงที่มา ตองมีการแสดงทีม ่ าของงานดังกลาว ตามรูปแบบของผู สรางสรรค หรือผูอนุญาตกําหนด 3.ไมใชเพื่อการคา ยินยอมใหผูอื่นคัดลอก แจกจาย จัดแสดง และเผยแพร แตตองไมเปนการนําไปใชเพื่อการคาผลกําไรใดๆ 4.ไมดัดแปลง ยินยอมใหผูอื่น คัดลอก แจกจาย จัดแสดง แตหามแกไขใดๆ นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
24
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
หมายเลข 46 คือ จะเปลี่ยนไปตามตั้งคาที่เราไดเลือก
46
ภาพที่ 4.5 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556
หมายเลข 47 คือ กรอกขอมูล หมายเลข 48 คือ สุดทาย Copy Code
47
48
ภาพที่ 4.6 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
48 25
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
หมายเลข 49 คลิกรูปแบบ หมายเลข 50 มาหนาจัดการบล็อก กดเพิ่ม Gadget หมายเลข 51 เลือก จาวาสคริปต กดตรงตัว + แลวนํา Code ที่ Copy มา นําไปวาง
49
51 50
ภาพที่ 4.7 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556
หมายเลข 51 คือ ผลที่เราทําจะแสดงออกมาเปนแบบนี้
52
ภาพที่ 4.8 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556
26
เอกสารบันทึกความรูในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป
การดูบล็อก (View blog) แลวจะปรากฎหนาเว็บบล็อกตามภาพที่ 3.7 ซึ่งถา หากจะทําการแกไขหรือปรับแตงเพิ่มเติมใหทําตามหัวขอที่ 3 อีกครั้งหนึ่ง
นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556