การสร้างแบนเนอร์ สวยๆ bykruwi

2เลม่ ที่ เอกสารประกอบการเรยี น เร่อื ง “Web design and Development ”

1. ช่อง E-mail ระบุอเี มลแ์ อดเดรสสาหรับแสดงบนเวบ็ เพจ 51

2. ช่อง Extention ให้เลือกนามสกุลของไฟล์เป็น .htm หรือ .html หมายถึงเว็บ

เพจเหมือนกนั แตเ่ ซฟิ เวอร์ระบบอาจจัดการกับไฟล์ 2 นามสกุลน้ีต่างกัน

3. ทอี่ อปชั่น Forders

- ปุ่ม Browse ระบุโฟลเดอร์ท่ีจัดเก็บไฟล์รูปต้นฉบับ เม่ือเลือกแล้วช่ือ

โฟลเดอร์ท่เี ลอื กมาจะปรากฏทางด้านขวาของปมุ่

- ปุ่ม Destination… ระบุโฟลเดอร์ทีจ่ ัดเกบ็ ไฟลร์ ปู ภาพผลลพั ธ์

4. ในส่วนของ Options สามารถเลือกหมวดออปช่ันตา่ งๆ ซึ่งกไ็ ด้แก่

- หมวด Banner ใช้กาหนดข้อความท่ีแสดงบนเว็บเพจ โดยเลือกใส่ค่าต่างๆ ใน
ชอ่ งทกี่ าหนดให้ดา้ นลา่ ง

- หมวด Large Image ใช้กาหนดขนาดและคุณภาพของรูปภาพใหญ่รวมทั้ง
ขอ้ มลู ที่เกีย่ วขอ้ งท่จี ะแสดงบนเวบ็ เพจ

- หมวด Thumbnails ใช้กาหนดขนาดและคุณภาพของภาพตัวอย่าง ขนาดเล็ก
รวมท้ังข้อมูลทเ่ี ก่ยี วข้อง ก็เลอื กใสค่ ่าต่างๆ ตามความตอ้ งการ

- หมวด Custom Colors ใช้กาหนดสีขององค์ประกอบต่างๆ บนเว็บเพจ ไม่ว่า
จะเปน็ สีพื้นของเวบ็ สพี น้ื ของข้อความส่วนหวั ทเี่ ป็นช่อื เว็บเปน็ ต้น

- หมวด Security ใช้กาหนดข้อความที่จะพิมพ์ซ้อนบนภาพขนาดใหญ่เพื่อ
ป้องกันผอู้ ื่นกอ๊ ปปีไ้ ปใช้

ภาพที่ 11 ขัน้ ตอนการสรา้ ง Photo Gallery จากโปรแกรม Photoshop (ตอ่ )
ที่มา : วิลาวลั ย์ นาคภพ, 2559.

รหัสวชิ า ง30241 ชื่อวิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เรือ่ ง “Web design and Development ”

สร้าง Web Photo Gallery ดว้ ย Ncesoft Flash Gallery Creator 52

1. เกบ็ ภาพทต่ี ้องการทา Web Photo Gallery ไว้ในโฟล์เดอรเ์ ดียวกัน
2. เขา้ โปรแกรม Flash Gallery Creator เลอื ก Add Gallery

Name ให้ต้งั ชื่อ Gallery

2

3. Add File ภาพท่ีเราต้องการทา Gallery สามารถเพมิ่ และลบรปู ภาพได้

3

4. เปิดโฟลเดอรท์ ่เี ก็บภาพ นาภาพเข้ามา

รหัสวชิ า ง30241 ชื่อวิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรยี น เรอ่ื ง “Web design and Development ”

5. เลือก รูปแบบของ Gallery แบบต่างๆ ด้วย Templates สมารถใส่เสียงและเปลี่ยนสี ของ 53

Background ได้

6. การบนั ทกึ เพ่อื นาไปใช้ สามารถ Publish ได้ หลายนามสกลุ รวมถึง Html

สรุป
การสร้างเวบ็ Photo Gallery ปจั จุบนั สามารถสร้างและออกแบบได้ในหลาย

โปรแกรมในทีน่ ีจ้ ะแนะนาการสร้างจาก 2 โปรแกรม ท่ีสรา้ งงา่ ยๆ คือ Photoshop และ
Ncesoft Flash Gallery Creator เวบ็ ทีม่ เี วบ็ Photo Gallery เป็นสว่ นหน่ึงที่ทาให้เว็บของเรา
ดูนา่ สนใจ สงิ่ สาคัญก่อนนักเรียนสรา้ ง เวบ็ Photo Gallery คอื่ รปู ภาพ ขนาดรูปภาพต้องขนาด
เทา่ กันหรอื รูปแบบคล้ายกนั จะทาให้ เวบ็ Photo Gallery ของเราสวยข้ึน รวมถึง นามสกลุ ของ
รปู ภาพด้วยทน่ี ักเรียนต้องรู้จัก ความแตกต่าง .jpg .Gif .png มีความตา่ งกนั อยา่ งไร

รหัสวชิ า ง30241 ชอ่ื วชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรยี น เร่อื ง “Web design and Development ”

54

ใบงานท่ี 1

เรอ่ื ง ประเภทของกราฟกิ

ใช้เวลา.......10...........นาที คะแนนเตม็ ..........8..........คะแนน

ให้นกั เรียนบอกความหมายของกราฟกิ ตามทีก่ าหนดใหไ้ ด้

1. ไฟลภ์ าพประเภท .JPG เปน็ อย่างไรมีลกั ษณะอย่างไร
2. ไฟล์ภาพประเภท .PNG เป็นอยา่ งไรมีลกั ษณะอย่างไร
3. ไฟลภ์ าพประเภท .GIF เปน็ อย่างไรมีลกั ษณะอย่างไร
4. ไฟล์ประเภทมูวี .SWF เปน็ อย่างไรมลี กั ษณะอย่างไร

รหสั วชิ า ง30241 ชอ่ื วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรยี น เร่ือง “Web design and Development ”

55

ใบงานที่ 2

เรื่อง การสร้าง แบนเนอร์ และปุ่มเมนู

ใช้เวลา..........40..........นาที คะแนนเต็ม.........9...........คะแนน

ใหน้ กั เรยี นสร้าง แบนเนอร์ และปุ่มเมนูตามขนาดและจานวนที่กาหนดให้

1. ใหน้ กั เรยี นสร้างแบนเนอร์ ขนาดกว้าง 960 สงู 200 pixels ความละเอยี ด 72 pixels
โหมด RGB Color ชือ่ และรูปภาพแบนเนอร์ของตัวนกั เรยี นเอง แลว้ บันทกึ ไฟลเ์ ป็นนามสกลุ
.JPG (ออกแบบสีตามใจชอบ)

2. ให้นักเรยี นสรา้ งปมุ่ เมนู ขนาดกวา้ ง 220 สงู 50 pixels ความละเอยี ด 72 pixels
โหมด RGB Color จานวน 4 ปุม่ ดังนี้ (การออกแบบสแี ละรูปแบบตามทนี่ กั เรยี นชอบ)
1. ปุ่ม home
2. ปุ่ม Asean
3. ปมุ่ เศรษฐกิจพอเพียง
4. ปมุ่ อาหาร

รหัสวชิ า ง30241 ช่อื วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มท่ี เอกสารประกอบการเรียน เรื่อง “Web design and Development ”

56

ใบงานท่ี 3

เรอ่ื ง การสร้าง Web Photo Gallery

ใช้เวลา.........20..........นาที คะแนนเต็ม.........10..........คะแนน

ใหน้ กั เรียนสร้าง web photo Gallery พร้อมทงั้ อธบิ ายข้ันตอน

1. ให้นักเรยี นสร้าง web photo Gallery หัวขอ้ “อาเซยี น” โดยจะตอ้ งมีรปู ภาพไมต่ ่ากวา่
10 ภาพ รปู แบบ Gallery แลว้ แต่ความชอบ สร้างด้วยโปรแกรม Photoshop พร้อมอธิบาย
ข้นั ตอนการสร้าง

รหสั วชิ า ง30241 ชื่อวิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เล่มท่ี เอกสารประกอบการเรยี น เรือ่ ง “Web design and Development ”

แบบทดสอบหลงั เรยี น เรอื่ ง Banner และ Button สวยดว้ ย Photoshop(ทฤษฎ)ี 57

คาชี้แจง แบบทดสอบฉบบั นี้เป็นแบบปรนยั เลอื กตอบ 4 ตวั เลือก จานวน 10 ข้อ
ข้อละ 1 คะแนน รวม 10 คะแนน(ข้อสอบคู่ขนาน)

คาสง่ั ให้นักเรยี นเลอื กคาตอบที่ถูกต้องทีส่ ดุ แลว้ ทาเครอ่ื งหมายกากบาท (X) ลงในกระดาษคาตอบ

จุดประสงคก์ ารเรียนรู้ ข้อที่ 1 นักเรยี นสามารถบอกความหมายประเภทของกราฟิกได้
1. ภาพท่ีนามาใส่ในเว็บเพจแล้วสามารถเคล่ือนไหวได้ จะอยูใ่ นนามสกุลใด

ก. Cat.gif
ข. Cat.jpg
ค. dog.bmp
ง. dog.png

2. ไฟล์ฟอร์แมตแบบใดทไี่ ม่สนบั สนุนการทางานภาพแบบโปร่งแสง

ก. .JPEG ข. .PNG

ค. .GIF ง. ไมม่ ขี ้อถูก

3. ขอ้ ใดไมใ่ ช่วธิ ใี นการแก้ปญั หาไฟลภ์ าพขนาดใหญ่บนเวบ็ เพจ
ก.แบง่ ภาพเปน็ ไฟลเ์ ล็กๆ นามาเรียง
ข.ลดขนาดภาพโดยลดจานวนสที ีใ่ ช้
ค.กาหนดโครงสรา้ งของเว็บให้แสดงผลเปน็ ภาพ
ง. พยายามใช้ภาพเดมิ ในหนา้ เวบ็ ไซต์อื่นๆ

จดุ ประสงคก์ ารเรียนรู้ ขอ้ ที่ 2 นักเรียนสามารถสรา้ ง Banner ไดอ้ ยา่ งต้ังใจ
4. สร้าง banner ดว้ ย Photoshop ไฟลต์ ้นฉบับทแ่ี ก้ไขได้นามสกลุ ใด

ก. . gif
ข. . bmp
ค. . psd
ง. . swf

5. ขนั้ ตอนแรกของการสร้างปุ่มบนหนา้ เว็บในโปรแกรม Dreamweaver คือขอ้ ใด
ก. เลือกตาแหน่งทีจ่ ะวางปุ่ม
ข. ปรับขนาดของปมุ่
ค. เลอื กสปี มุ่
ง. กาหนดรูปแบบของปุ่ม

รหสั วชิ า ง30241 ชอื่ วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เร่อื ง “Web design and Development ”

6. Spry Menu Bar ใชส้ าหรบั กรณใี ด 58
ก. ตอ้ งการสรา้ งปุ่มทส่ี วยงาม
ข. กรณที ีเ่ นื้อหาในหนา้ เว็บมีจานวนมาก
ค. กรณีทาป่มุ เรง่ ด่วน
ง. ตอ้ งการความรวดเร็ว

จุดประสงค์การเรียนรู้ ขอ้ ท่ี 3 นกั เรยี นสามารถสรา้ ง ปมุ่ Menu ได้
7. ภาพท่ีใช้งานบนเวบ็ กาหนดจดุ สีไว้ท่ี pixels/inch

ก. 72 pixels/inch
ข. 150 pixels/inch
ค. 175 pixels/inch
ง. 300 pixels/inch

8. การแทรก Menu ไฟล์มัลติมีเดียรปู แบบตา่ งๆ บนเวบ็ สามารถเรยี กใชง้ านได้จากกลุ่มใด
ก. From
ข. Common
ค. Layout
ง. Script

จดุ ประสงคก์ ารเรียนรู้ ขอ้ ที่ 4 นักเรยี นสามารถสร้างและอธบิ ายขัน้ ตอนการสร้าง Web Photo Gallery
9. การทา Web Photo Gallery มปี ระโยชนอ์ ย่างไร
ก. สามารถนาภาพข้นึ Web เปน็ ภาพชุดกิจกรรมได้
ข. ทาใหม้ ภี าพมากมาย
ค. ทาอัลบัม้ ส่วนตวั
ง. รวมภาพใหค้ นอน่ื นาภาพไปใช้

10. การเลอื กภาพชุดต้นทางเพอื่ ทา Web ทีป่ ุ่มใด
ก. Make New Folder
ข. Destination
ค. Browse
ง. Folders

รหสั วชิ า ง30241 ชือ่ วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรยี น เรือ่ ง “Web design and Development ”

กระดาษคาตอบแบบทดสอบหลังเรียน เลม่ ที่ 2 59

เรือ่ ง Banner และ Button สวยด้วย Photoshop

ชื่อ-นามสกุล................................................................................ช้ัน/หอ้ ง................เลขที.่ ...........

ขอ้ ก ข ค ง
1
2
3
4
5
6
7
8
9
10

คะแนนสอบกอ่ นเรยี นเตม็ 10 คะแนน คะแนนที่ได้ คอื ..................คะแนน

รหสั วชิ า ง30241 ชื่อวชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เร่อื ง “Web design and Development ”

60

แบบทดสอบกจิ กรรมหลงั เรยี น เรื่อง Banner และ Button สวยด้วย Photoshop (ปฎบิ ตั ิ)

คาช้ีแจง คะแนนรวม 10 คะแนน ........10.........นาที คะแนนเต็ม.........10.........

คะแนน1. ให้นกั เรยี นสร้าง web photo Gallery พร้อมทงั้ อธิบายขัน้ ตอน

คาสง่ั ให้นักเรียนออกแบบสรา้ งในเครื่องคอมพิวเตอร์และตอบคาถาม ลงในกระดาษคาตอบ

ให้นกั เรียนสรา้ ง web photo Gallery หัวข้อ “ของดีในท้องถิน่ ” โดยจะต้องมีรปู ภาพไมต่ า่ กวา่
10 ภาพ รูปแบบ Gallery แลว้ แตค่ วามชอบ สรา้ งด้วยโปรแกรม Photoshop พร้อมอธิบาย
ข้ันตอนการสรา้ ง

รหัสวชิ า ง30241 ช่ือวชิ า Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เล่มท่ี เอกสารประกอบการเรยี น เรือ่ ง “Web design and Development ”

แบบทดสอบหลงั เรยี น เรอื่ ง Banner และ Button สวยดว้ ย Photoshop(ทฤษฎ)ี 61

คาชี้แจง แบบทดสอบฉบบั นี้เป็นแบบปรนยั เลอื กตอบ 4 ตวั เลือก จานวน 10 ข้อ
ข้อละ 1 คะแนน รวม 10 คะแนน(ข้อสอบคู่ขนาน)

คาสง่ั ให้นักเรยี นเลอื กคาตอบที่ถูกต้องทีส่ ดุ แลว้ ทาเครอ่ื งหมายกากบาท (X) ลงในกระดาษคาตอบ

จุดประสงคก์ ารเรยี นรู้ ข้อที่ 1 นักเรยี นสามารถบอกความหมายประเภทของกราฟิกได้
1. ภาพท่ีนามาใส่ในเวบ็ เพจแล้วสามารถเคล่ือนไหวได้ จะอยูใ่ นนามสกุลใด

ก. Cat.gif
ข. Cat.jpg
ค. dog.bmp
ง. dog.png

2. ไฟลฟ์ อร์แมตแบบใดทไี่ ม่สนบั สนุนการทางานภาพแบบโปร่งแสง

ก. .JPEG ข. .PNG

ค. .GIF ง. ไมม่ ขี ้อถูก

3. ขอ้ ใดไมใ่ ช่วธิ ใี นการแก้ปญั หาไฟลภ์ าพขนาดใหญ่บนเวบ็ เพจ
ก.แบง่ ภาพเปน็ ไฟลเ์ ล็กๆ นามาเรียง
ข.ลดขนาดภาพโดยลดจานวนสที ีใ่ ช้
ค.กาหนดโครงสร้างของเว็บให้แสดงผลเปน็ ภาพ
ง. พยายามใช้ภาพเดมิ ในหนา้ เวบ็ ไซต์อื่นๆ

จดุ ประสงคก์ ารเรียนรู้ ขอ้ ที่ 2 นักเรียนสามารถสรา้ ง Banner ไดอ้ ยา่ งต้ังใจ
4. สร้าง banner ดว้ ย Photoshop ไฟลต์ ้นฉบับทแ่ี ก้ไขได้นามสกลุ ใด

ก. . gif
ข. . bmp
ค. . psd
ง. . swf

5. ขนั้ ตอนแรกของการสร้างปุ่มบนหนา้ เว็บในโปรแกรม Dreamweaver คือขอ้ ใด
ก. เลือกตาแหน่งท่จี ะวางปุ่ม
ข. ปรับขนาดของปมุ่
ค. เลอื กสปี มุ่
ง. กาหนดรูปแบบของปุ่ม

รหสั วชิ า ง30241 ชอื่ วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เร่อื ง “Web design and Development ”

6. Spry Menu Bar ใชส้ าหรบั กรณใี ด 62
ก. ตอ้ งการสรา้ งปุ่มทส่ี วยงาม
ข. กรณที ีเ่ นื้อหาในหนา้ เว็บมีจานวนมาก
ค. กรณีทาป่มุ เรง่ ด่วน
ง. ตอ้ งการความรวดเร็ว

จุดประสงค์การเรยี นรู้ ขอ้ ท่ี 3 นกั เรยี นสามารถสรา้ ง ปมุ่ Menu ได้
7. ภาพท่ีใช้งานบนเว็บกาหนดจดุ สีไว้ท่ี pixels/inch

ก. 72 pixels/inch
ข. 150 pixels/inch
ค. 175 pixels/inch
ง. 300 pixels/inch

8. การแทรก Menu ไฟล์มัลติมีเดียรปู แบบตา่ งๆ บนเวบ็ สามารถเรยี กใชง้ านได้จากกลุ่มใด
ก. From
ข. Common
ค. Layout
ง. Script

จดุ ประสงคก์ ารเรียนรู้ ขอ้ ที่ 4 นักเรยี นสามารถสร้างและอธบิ ายขัน้ ตอนการสร้าง Web Photo Gallery
9. การทา Web Photo Gallery มปี ระโยชนอ์ ย่างไร
ก. สามารถนาภาพข้นึ Web เปน็ ภาพชุดกิจกรรมได้
ข. ทาใหม้ ภี าพมากมาย
ค. ทาอัลบมั้ สว่ นตวั
ง. รวมภาพใหค้ นอ่นื นาภาพไปใช้

10. การเลอื กภาพชุดตน้ ทางเพอื่ ทา Web ทีป่ ุ่มใด
ก. Make New Folder
ข. Destination
ค. Browse
ง. Folders

รหสั วชิ า ง30241 ชือ่ วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรยี น เรื่อง “Web design and Development ”

เฉลยกระดาษคาตอบแบบทดสอบ เล่มท่ี 2 63

เร่ือง Banner และ Button สวยด้วย Photoshop

ชอ่ื -นามสกุล................................................................................ชน้ั /ห้อง................เลขท.ี่ ...........

แบบทดสอบก่อนเรียน แบบทดสอบหลงั เรียน

ขอ้ ก ข ค ง ข้อ ก ข ค ง
1× 1×
2× 2×
3× 3×
4× 4×
5× 5×
6× 6×
7× 7×
8× 8×
9× 9×
10 × 10 ×

รหัสวชิ า ง30241 ชอื่ วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เรอื่ ง “Web design and Development ”

64

แบบทดสอบกิจกรรมหลงั เรยี น เร่อื ง Banner และ Button สวยดว้ ย Photoshop (ปฎิบัต)ิ

คาชี้แจง คะแนนรวม 10 คะแนน ........10.........นาที คะแนนเต็ม.........10.........

คะแนน1. ให้นกั เรียนสรา้ ง web photo Gallery พร้อมท้ังอธบิ ายข้นั ตอน

คาสง่ั ให้นกั เรยี นออกแบบสรา้ งในเคร่ืองคอมพิวเตอร์และตอบคาถาม ลงในกระดาษคาตอบ

ให้นักเรยี นสร้าง web photo Gallery หัวขอ้ “ของดีในท้องถ่ิน” โดยจะตอ้ งมรี ูปภาพไมต่ า่ กว่า
10 ภาพ รูปแบบ Gallery แลว้ แตค่ วามชอบ สร้างดว้ ยโปรแกรม Photoshop พร้อมอธิบาย
ขั้นตอนการสรา้ ง

ตอบ
1. เกบ็ ภาพที่ต้องการทา Web Photo Gallery ไวใ้ นโฟล์เดอร์เดยี วกนั
2. เข้าโปรแกรม Photoshop เวอร์ช่ัน 7- Photoshop CS3 เวอร์ช้ันสูงกว่านี้ ของ

Photoshop ส่วนนี้ถูกตัดออกไปแล้ว เลือกคาส่ัง File เลือก Automate เลือก Web
Photo Gallery…
3. เลือกลกั ษณะของเวบ็ เพจท่ีจะสร้างในช่อง Style
4. กดปุม่ ok

รหสั วชิ า ง30241 ชอื่ วิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรียน เรอื่ ง “Web design and Development ”

65

กระดาษคาตอบแบบทดสอบหลังเรยี น เลม่ ที่ 2

เรอื่ ง Banner และ Button สวยดว้ ย Photoshop

ช่ือ-นามสกุล................................................................................ช้นั /หอ้ ง................เลขท.ี่ ...........

ข้อ ก ข ค ง
1
2
3
4
5
6
7
8
9
10

คะแนนสอบหลังเรยี นเต็ม 10 คะแนน คะแนนท่ีได้ คือ ..................คะแนน
สรปุ ผล ผา่ น ไมผ่ า่ น

ลงชื่อ........................................................ผบู้ ันทึกผล วนั ท่ี..............................................

รหัสวชิ า ง30241 ชอ่ื วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรยี น เร่อื ง “Web design and Development ”

แบบบันทกึ คะแนน เอกสารประกอบการเรยี น 66

เล่มท่ี 2 เรอ่ื ง Banner และ Button สวยด้วย Photoshop

ชื่อ-นามสกุล....................................................................ช้ัน/หอ้ ง..........................เลขท.ี่ ................

แบบทดสอบ คะแนนเตม็ คะแนนทฤษฎ(ี 10) คะแนนปฎิบตั ิ(10)

แบบทดสอบกอ่ นเรียน 20

แบบทดสอบหลงั เรยี น 20

คะแนนความกา้ วหน้า

แบบฝึกหดั /ใบงาน คะแนนเต็ม คะแนนทีไ่ ด้ รอ้ ยละ

ใบงานท่ี 1 8
ใบงานที่ 2 9
ใบงานที่ 3 10
รวมคะแนน 27

ร้อยละของคะแนนรวม = (คะแนนรวมท่ไี ด้ x 100) / 27 = …………………………..……

เกณฑก์ ารให้คะแนนจากการทาแบบฝึกหัด และใบงาน

(4) ระดบั ดีมาก หมายถึง ไดค้ ะแนนคดิ เปน็ ร้อยละ 80 ขึน้ ไป

(3) ระดบั ดี หมายถึง ไดค้ ะแนนคดิ เป็นรอ้ ยละ 60 – 79

(2) ระดับพอใช้ หมายถึง ไดค้ ะแนนคดิ เปน็ ร้อยละ 40 – 59

(1) ระดบั ต้องปรับปรุง หมายถึง ได้คะแนนคิดเปน็ ร้อยละต่ากวา่ 40 เกณฑ์

การผ่าน นักเรียนบันทกึ ผลได้คะแนนอยา่ งน้อยระดบั คุณภาพ 2 (พอใช้) ขน้ึ ไป

สรุปผล ผา่ น ไม่ผา่ น

ลงชือ่ ........................................................ผู้บันทกึ ผล วนั ที่..............................................

รหสั วชิ า ง30241 ช่ือวิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เรือ่ ง “Web design and Development ”

67

แนวคาตอบ ใบงานท่ี 1

เร่ือง ประเภทของกราฟกิ

ใชเ้ วลา.........10..........นาที คะแนนเต็ม..........8............คะแนน

ให้นักเรยี นบอกความหมายของกราฟิกตามท่ีกาหนดให้ได้

8. ไฟล์ภาพประเภท .JPG เป็นอย่างไรมีลกั ษณะอย่างไร
ตอบ รปู ภาพท่วั ไป สว่ นใหญ่จะไดจ้ ากภาพที่ถ่ายมาจากกล้องดจิ ติ อล กลอ้ งมอื ถือ มีขนาด
ใหญแ่ ละความละเอยี ดสงู มาก การนามาใช้ในเว็บเพจเราจะตอ้ งนามาลดขนาด

9. ไฟล์ภาพประเภท .PNG เป็นอยา่ งไรมลี กั ษณะอย่างไร
ตอบ สามารถแสดงผลไดใ้ นระบบสเี ต็มพิกัด (True Color) มขี นาดไฟลเ์ ล็ก และควบคุม
คณุ ภาพได้ตามท่ีต้องการ จะเปน็ ได้ทัง้ ภาพถา่ ยหรือภาพกราฟิกที่วาดข้นึ กาหนดใหพ้ นื้ ที่
ภาพโปรง่ ใสได้ (Transparent)

10. ไฟล์ภาพประเภท .GIF เปน็ อยา่ งไรมีลกั ษณะอย่างไร
ตอบ จะเป็นไฟลภ์ าพกราฟกิ ท่ี สร้างหรอื วาดข้นึ มาใหม่นิยมนามาทาปุ่มกด, แถบเมน,ู ป้าย
แบนเนอร์ หรือปา้ ยโฆษณา และทาเปน็ ภาพเคลื่อนไหว (Animation) เพอ่ื สลับการแสดงผล
ภาพหรือข้อความให้สวยงาม ไฟล์ก็มีขนาดเล็กแสดงผลได้รวดเรว็ กาหนดความโปรง่ ใสใน
ภาพได้(Transparent)

11. ไฟล์ประเภทมวู ี .SWF เป็นอย่างไรมลี ักษณะอย่างไร
ตอบ เป็นไฟล์แอนิเมชั่น (Animation) ทส่ี ร้างด้วยโปรแกรม Flash สร้างเป็นหนา้ เปดิ
เว็บไซตส์ วยๆ หรือใช้เปิดไฟล์วดิ ีโอนิยมมากในการทาเวบ็ ไซต์ท่ีผา่ นมา เพราะทาใหเ้ วบ็ ไซต์มี
ชีวติ ชวี า

รหัสวชิ า ง30241 ช่อื วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เลม่ ที่ เอกสารประกอบการเรียน เรื่อง “Web design and Development ”

แนวคาตอบ ใบงานที่ 2 68

เร่ือง การสรา้ ง แบนเนอร์ และป่มุ เมนู

ใช้เวลา.........40..........นาที คะแนนเต็ม..........9............คะแนน

ใหน้ กั เรียนสรา้ ง แบนเนอร์ และปมุ่ เมนตู ามขนาดและจานวนทก่ี าหนดให้

1. ให้นักเรียนสรา้ งแบนเนอร์ ขนาดกวา้ ง 960 สูง 200 pixels ความละเอยี ด 72 pixels
โหมด RGB Color ช่ือและรปู ภาพแบนเนอร์ของตวั นักเรียนเอง แล้วบนั ทึกไฟลเ์ ป็นนามสกลุ
.JPG (ออกแบบสตี ามใจชอบ)

ตอบ

2. ให้นกั เรยี นสรา้ งปมุ่ เมนู ขนาดกวา้ ง 220 สูง 50 pixels ความละเอยี ด 72 pixels
โหมด RGB Color จานวน 4 ป่มุ ดงั น้ี (การออกแบบสีและรูปแบบตามท่นี กั เรียนชอบ)
1. ปุ่ม home
2. ปมุ่ Asean
3. ปมุ่ เศรษฐกจิ พอเพียง
4. ป่มุ อาหาร

ตอบ

รหัสวชิ า ง30241 ชอ่ื วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มที่ เอกสารประกอบการเรยี น เร่อื ง “Web design and Development ”

69

แนวคาตอบ ใบงานท่ี 3

เรอื่ ง การสร้าง Web Photo Gallery

ใชเ้ วลา..........20.........นาที คะแนนเตม็ .........10.............คะแนน

ให้นักเรียนสรา้ ง web photo Gallery พร้อมทงั้ อธิบายขัน้ ตอน

ให้นกั เรยี นสร้าง web photo Gallery หวั ขอ้ “อาเซียน” โดยจะต้องมรี ปู ภาพไม่ต่ากว่า
10 ภาพ รูปแบบ Gallery แลว้ แต่ความชอบ สร้างดว้ ยโปรแกรม Photoshop พรอ้ มอธิบาย
ขนั้ ตอนการสรา้ ง

ตอบ
1. เก็บภาพทีต่ ้องการทา Web Photo Gallery ไวใ้ นโฟลเ์ ดอร์เดยี วกัน
2. เข้าโปรแกรม Photoshop เวอร์ช่ัน 7- Photoshop CS3 เวอร์ช้ันสูงกว่าน้ี ของ

Photoshop ส่วนนี้ถูกตัดออกไปแล้ว เลือกคาส่ัง File เลือก Automate เลือก Web
Photo Gallery…
3. เลอื กลกั ษณะของเวบ็ เพจที่จะสร้างในช่อง Style
4. กดป่มุ ok

รหสั วชิ า ง30241 ชอ่ื วิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เลม่ ท่ี เอกสารประกอบการเรียน เรื่อง “Web design and Development ”

บรรณำนกุ รม 70

กองบรรณาธกิ ารดจิ ิอาร์ต. ออกแบบสร้างเวบ็ สวยด้วยตนเองกับ Shop+Dream CS3. (พมิ พ์ครงั้ ที่ 1).
กรุงเทพฯ:ไอดซี อี นิ โฟดิสทริบิวเตอร์เซน็ เตอร,์ 2551.

เกยี รตพิ งษ์ บุญจติ ร. (2557). คู่มอื Dreamweaver CS6 Professional Guide ฉบับสมบูรณ์.
กรุงเทพฯ : ไอดซี ี พรเี มยี ร์.

ดวงพร เกยี๋ งคา. (2555). คู่มือสรา้ งเวบ็ ไซต์ ฉบบั สมบูรณ์. กรุงเทพฯ : โปรวชิ ั่น.
ธรี ะสทิ ธ์ิ องึ้ รตั นวงศ์. (2554). สร้าง Web ง่ายๆ แคค่ ลกิ Dreamweaver CS5. กรุงเทพ :

บรษิ ทั สวสั ดี ไอที จากดั .
ประภาพร ช่างไม.้ (2553). มอื ใหม่สรา้ งเว็บไซต์ Photoshop + Dreamweaver. นนทบรุ ี : ไอดีซ.ี
ปิยะ นากสงค์และมณนี ุช สมานหมู่. (2556). มือใหม่ Photoshop Dreamweaver CS6

ออกแบบและ สร้างเว็บไซต์. กรงุ เทพฯ : ซิมพลิฟาย.
พันจนั ทร์ ธนวฒั นเสถียร. (2554). หนังสือเรียนรายวิชาเพิ่มเตมิ การสรา้ งเว็บเพจด้วย

Dreamweaver. กรุงเทพฯ : ซคั เซส มีเดีย. 2557). หนงั สือเรียนรายวิชาเพม่ิ เติม การ
สร้างเวบ็ เพจด้วย Dreamweaver เวอรช์ ัน่ CS6. กรุงเทพฯ : ซคั เซส มีเดีย.
วงคป์ ระชา จนั ทรส์ มวงศ์. (2554). Insight Dreamweaver CS5 ฉบบั สมบรู ณ์. กรงุ เทพฯ : โปรวิชัน่ .
สถาบนั สง่ เสริมการสอนวทิ ยาศาสตรแ์ ละเทคโนโลยี กระทรวงศกึ ษาธิการ. (2553). หนังสอื เรียน
รายวิชา เพิ่มเตมิ เทคโนโลยีสารสนเทศและการสื่อสาร กราฟิกและเทคโนโลยสี อื่ ประสม.
กรงุ เทพฯ : องค์การคา้ สกสค.
สธุ ีร์ นวกลุ . (2556). ออกแบบและสร้างเว็บไซตด์ ว้ ย Dreamweaver CS6. กรงุ เทพฯ : ซีเอด็ ยเู คชั่น.

รหัสวชิ า ง30241 ช่ือวิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยด้วย Photoshop”

2เล่มที่ เอกสารประกอบการเรียน เร่อื ง “Web design and Development ”

ก

คำนำ

เอกสารประกอบการเรียน เร่ือง “Web design and Development” ชดุ น้ี ไดจ้ ดั ทาขึ้น
สาหรับ นกั เรียนชน้ั มธั ยมศึกษาปีท่ี 4 โดยยดึ กรอบตามตวั ชีว้ ัดและสาระการเรยี นรู้ กลุม่ สาระการเรียนรู้
การงานอาชีพและเทคโนโลยี ตามหลักสูตรแกนกลางการศึกษาข้ันพ้ืนฐาน พุทธศักราช 2551
มีวัตถปุ ระสงค์เพื่อใชเ้ ป็นส่ือประกอบการเรียนการสอนให้นักเรยี นได้ศึกษาค้นควา้ และเรียนรดู้ ้วยตนเอง
ในรายวิชาเพิ่มเติม รหัสวิชา ง30241 ช่ือวิชา Web design and Development ก่อให้เกิดความรู้ ทักษะ
ในการสร้างเว็บไซต์ข้ึนมาเพ่ือใช้งานและเผยแพร่ได้อย่างถูกต้อง ตลอดจนมีคุณลักษณะอันพึงประสงค์
เหมาะสมกับวัยของผู้เรยี น โดยจดั ทาเป็นเอกสารประกอบการเรยี น จานวน 5 เลม่ ประกอบด้วย

เลม่ ท่ี 1 รูจ้ ักการทางานของเวบ็ ไซตเ์ บ้อื งต้น
เล่มท่ี 2 Banner และ Botton สวยด้วย Photoshop
เล่มท่ี 3 เรมิ่ ต้นสร้างเว็บกบั Dreamweaver
เลม่ ที่ 4 สรา้ งเว็บงา่ ยๆ สไตล์ Dreamweaver
เล่มท่ี 5 การอัพโหลดและจรรยาบรรณในการใช้อนิ เทอร์เนต็

เอกสารประกอบการเรียน เล่มท่ี 2 Banner และ Button สวยด้วย Photoshop เล่มน้ี
มีเน้ือหาเก่ียวกับการสร้างแบนเนอร์ การสร้างปุ่มเมนู และการสร้าง Web Photo Gallery ซึ่งผู้จัดทา
หวังเป็นอย่างยิ่งว่าเอกสารประกอบการเรียนเล่มน้ีจะเป็นเอกสารประกอบการเรียนที่เป็นประโยชน์ต่อ
การสอนของครูและการเรียนรู้ของนักเรียนอย่างสูงสุดหากมีข้อเสนอแนะใดที่จะทาให้เอกสาร
ประกอบการเรยี นเลม่ นสี้ มบรู ณ์ยง่ิ ขึน้ ผ้จู ดั ทาน้อมรับฟังทุกข้อเสนอแนะและขอขอบคณุ มา ณ โอกาสนี้

วลิ าวลั ย์ นาคภพ

รหัสวชิ า ง30241 ช่อื วิชา Web design and Development “เล่มที่ 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มท่ี เอกสารประกอบการเรยี น เร่อื ง “Web design and Development ”

สำรบญั ข

หนา้
คานา ..........................................................................................................................................................ก
สารบญั ........................................................................................................................................................ข
สารบัญภาพ.................................................................................................................................................ค
แผนการเรียนประจาหนว่ ย ..........................................................................................................................2
เนื้อหาและกิจกรรมการเรียน ....................................................................................................................... 3
คาช้แี จงสาหรับครู .....................................................................................................................................12
คาชแ้ี จงสาหรบั นกั เรยี น.............................................................................................................................13
แบบทดสอบกอ่ นเรยี น...............................................................................................................................14
กระดาษคาตอบแบบทดสอบก่อนเรียน......................................................................................................16
Banner และ Button สวยด้วย Photoshop............................................................................................22
การสรา้ ง Banner......................................................................................................................................23
รู้จักกับโปรแกรมออกแบบภาพกราฟกิ ......................................................................................................25
สร้างปา้ ยแบนเนอรง์ ่าย ๆ..........................................................................................................................40
การสรา้ ง MENU .......................................................................................................................................47
การสร้างเวบ็ Photo Gallery ...................................................................................................................49
ใบงานที่ 1 ................................................................................................................................................54
ใบงานท่ี 2 ................................................................................................................................................55
ใบงานท่ี 3 ................................................................................................................................................56
แบบทดสอบหลงั เรยี น(ทฤษฎ)ี ...................................................................................................................57
กระดาษคาตอบแบบทดสอบหลงั เรยี น ......................................................................................................59
แบบทดสอบหลังเรียน(ปฏิบตั ิ)...................................................................................................................64
แบบบันทึกคะแนนเอกสารประกอบการเรียน ............................................................................................ 66
แนวคาตอบ ใบงานท่ี 1 ............................................................................................................................67
แนวคาตอบ ใบงานท่ี 2 ............................................................................................................................68
แนวคาตอบ ใบงานที่ 3 ............................................................................................................................69
บรรณานุกรม.............................................................................................................................................70

รหสั วชิ า ง30241 ช่อื วชิ า Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”

2เล่มท่ี เอกสารประกอบการเรยี น เรือ่ ง “Web design and Development ”

– ค

สำรบัญภำพ

หนา้
ภาพท่ี 1 ตัวอยา่ งขนาดตา่ งๆ ของพนื้ ทีใ่ นเวบ็ เพ่ือนาไปออกแบบส่วนต่างๆ...............................................40
ภาพที่ 2 สร้างชิน้ งานใหม่ เพือ่ สร้าง แบนเนอร์........................................................................................41
ภาพที่ 3 ขั้นตอนการออกแบบแบนเนอร์ ดว้ ยโปรแกรม Photoshop .....................................................42
ภาพที่ 4 ขนั้ ตอนการออกแบบแบนเนอร์ ดว้ ยโปรแกรม Aleo Flash Intro Banner Maker ..................44
ภาพท่ี 5 ข้นั ตอนการออกแบบแบนเนอร์ ด้วยโปรแกรม Aleo Flash Intro Banner Maker ..................45
ภาพที่ 6 ข้ันตอนการออกแบบแบนเนอร์ ด้วยโปรแกรม Aleo Flash Intro Banner Maker ..................46
ภาพท่ี 7 สรา้ งช้ินงานใหม่ เพือ่ สร้าง menu.............................................................................................47
ภาพที่ 8 ขนั้ ตอนการออกแบบ menu ด้วยโปรแกรม Photoshop.........................................................48
ภาพท่ี 9 ตัวอย่าง เว็บ Photo Gallery จากโปรแกรม Photoshop และ Ncesoft

Flash Gallery Creator ............................................................................................................49
ภาพท่ี 10 ขน้ั ตอนการสร้าง Photo Gallery จากโปรแกรม Photoshop..............................................50
ภาพท่ี 11 ขัน้ ตอนการสรา้ ง Photo Gallery จากโปรแกรม Photoshop (ต่อ) ....................................51

รหสั วชิ า ง30241 ช่อื วิชา Web design and Development “เล่มท่ี 2 Banner และ Button สวยดว้ ย Photoshop”