กราฟิก สำหรับเว็บไซต์

1. หนังสืออิเล็กทรอนิกส์ กราฟิกสำหรับงานเว็บไซต์ วิชาการงานอาชีพและเทคโนโลยี กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยี นายสันติชัย บุญรักษ์ โรงเรียนสงวนหญิง จังหวัดสุพรรณบุรี สำนักงานเขตพื้นที่การศึกษาสุพรรณบุรี เขต 1

2. ก สาระสำคัญ กราฟิกแบ่งเป็น 2 ประเภทคือบิตแมปและเวกเตอร์ ภาพกราฟิกสำหรับงานเว็บไซต์ นิยมใช้ 3 รูปแบบ คือ ไฟล์รูปแบบ JPG ไฟล์รูปแบบ GIF ไฟล์รูปแบบ PNG

3. ข จุดประสงค์การเรียนรู้ 1.อธิบายความหมายของคำว่า “กราฟิก” ได้ถูกต้อง 2.บอกรูปแบบภาพกราฟิกที่นิยมใช้ในงานเว็บไซต์ได้ถูกต้อง 3.อธิบายความแตกต่างของภาพกราฟิกแต่ละรูปแบบได้ถูกต้อง

4. ค สารบัญ สาระสำคัญ ก จุดประสงค์การเรียนรู้ ข สารบัญ ค แบบทดสอบก่อนเรียน ง ความหมายของกราฟิก 1 ประเภทกราฟิก 3 กราฟิกสำหรับเว็บไซต์ 14 รูปแบบ JPEG 16 รูปแบบ GIF 19 รูปแบบ PNG 27 ผังความคิด 30 แบบทดสอบหลังเรียน 36 หนังสืออ้างอิง 46 ประวัติผู้จัดทำ 47

5. ง แบบทดสอบก่อนเรียน 1. ข้อใดไม่ใช่ความหมายของ กราฟิก ก. การสื่อความหมายด้วยการใช้ศิลปะ การแสดง แสง สี เสียง ข. ภาพวาดที่สื่อความหมายได้ทันที ค. การสื่อความหมายด้วยภาพเขียนขาว - ดำ ง. สัญลักษณ์ ซึ่งมีลักษณะเห็นได้ชัดเจนเข้าใจ ความหมาย

6. จ แบบทดสอบก่อนเรียน 2. ข้อใดให้ความหมายไม่ถูกต้องเกี่ยวกับกราฟิก ก. แดงวาดภาพสุนัข ข. สุชาติถ่ายรูปต้นไม้ ค. พยอมเชิดสิงโต ง. สุธีดูสัญลักษณ์ห้องน้ำชาย

7. ฉ แบบทดสอบก่อนเรียน 3. ภาพแบบ Bitmap มีชื่อเรียกอีกอย่างหนึ่งว่าอะไร ก. Vector Image ข. Raster Image ค. BMP Image ง. Photo Image

8. ช แบบทดสอบก่อนเรียน 4. ฟอร์แมตภาพในข้อใดเป็นแบบ Vector ก. WMF ข. Video Clip ค. JPG ง. GIF

9. ซ แบบทดสอบก่อนเรียน 5. รูปแบบภาพใดที่เหมาะสำหรับภาพถ่าย ก. JPG ข. GIF ค. BMP ง. WMF

10. ฌ แบบทดสอบก่อนเรียน 6. รูปแบบภาพใดที่เหมาะสำหรับภาพการ์ตูนลายเส้นที่มีจำนวนสีไม่มาก ก. JPG ข. GIF ค. BMP ง. PCX

11. ญ แบบทดสอบก่อนเรียน 7. รูปแบบภาพใด ที่พัฒนาเพื่อแก้ปัญหาด้านลิขสิทธิ์ ก. JPG ข. GIF ค. BMP ง. PNG

12. ฎ แบบทดสอบก่อนเรียน 8. รูปแบบภาพในข้อใดที่ไม่นิยมมาแทรกลงในเว็บเพจ ก. JPG ข. GIF ค. TIFF ง. PNG

13. ฏ แบบทดสอบก่อนเรียน 9. โปรแกรมในข้อใดใช้สำหรับสร้างรูปแบบ JPG ก. Adobe Photoshop ข. Adobe Illustrator ค. Macromedia Freehand ง. Corel Draw

14. ฐ แบบทดสอบก่อนเรียน 10. ข้อใดเป็นคุณสมบัติของรูปแบบ GIF ก. แสดงสีได้ 16.7 ล้านสี ข. แสดงสีได้ 256 สีค. แสดงผลภาพได้ทั้งระบบพีซีและระบบแมคอินทอช ง. Corel Draw

15. 1 กราฟิก (Graphic) ความหมาย การสื่อความหมายด้วยการใช้ศิลปะและศาสตร์ทางการใช้เส้น ภาพวาดภาพเขียนแผนภาพ ตลอดจนสัญลักษณ์ ทั้งสีและขาว-ดำซึ่งมีลักษณะเห็นได้ชัดเจนเข้าใจ ความหมายได้ทันที ตรงตามที่ผู้สื่อสารต้องการ

16. 2 คำถามชวนคิด ประเภทของภาพกราฟิกมีอะไรบ้าง

17. 3 กราฟิก (Graphic) ประเภทของกราฟิก 1.แบบบิตแมพ (bitmap) 2.แบบเวกเตอร์ (vector) หรือ สโตรก (stroke)

18. 4 ประเภทของกราฟิก บิตแมป หมายถึงภาพที่ประกอบด้วยจุดสีเล็ก ๆ ที่เรียกว่า Pixel มาประกอบกันขึ้นจนเป็นภาพ คำว่า บิตแมป เรียกอีกอย่างหนึ่งว่า Still Image หรือ Raster Image

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

20. 6 บิตแมป ข้อเสีย หากจุดสีมีขนาดใหญ่และเมื่อ มีการขยายภาพ ภาพที่เห็นก็จะดูขรุขระ ขาดความคมชัด ไม่เรียบกลมกลืนภาพแตก มองเห็นเป็นสี่เหลี่ยมเล็กๆ

21. 7 บิตแมป รูปแบบของภาพ รูปแบบของภาพประเภทนี้ได้แก่JPG, GIF, PNG, TIFF, BMPPCX, JPEG2000 เป็นต้น

22. 8 บิตแมป โปรแกรมที่สร้าง เช่น Adobe Photoshop , Fractal Design Painter ,Pain, Paint Shop Pro , L-View เป็นต้น

23. 9 ประเภทของกราฟิก เวกเตอร์ หมายถึงการกำหนดพิกัดและการคำนวณค่าบนระนาบสองมิติ รวมทั้งมุมและระยะทางตามทฤษฎีเวกเตอร์ในทางคณิตศาสตร์ ในการก่อให้เกิดเป็น เส้น หรือรูปภาพ

24. 10 เวกเตอร์ ข้อดี สามารถย่อขยายได้ โดยคุณภาพไม่เปลี่ยนแปลง การจัดเก็บสิ้นเปลืองเนื้อที่น้อยกว่า bitmap มาก การหมุนจะทำได้ดีกว่า

25. 11 เวกเตอร์ ข้อเสีย ไม่สามารถเก็บรายละเอียดของสีสันต่าง ๆ ได้ดี เนื่องจากเก็บในรูปสูตรแบบของเส้น

26. 12 เวกเตอร์ รูปแบบของภาพ รูปแบบของภาพประเภทนี้ได้แก่SVG,PS, EPS, WMF, CDR, AI, CGM, DRW, PLT และฟอนต์แบบ TrueType ต่างๆ เป็นต้น

27. 13 เวกเตอร์ โปรแกรมที่สร้าง เช่น Adobe Illustrator Macromedia Freehand Corel Draw เป็นต้น

28. 14 กราฟิกสำหรับงานเว็บไซต์ ความหมาย การนำภาพกราฟิกรูปแบบต่างๆ มาใช้เป็นองค์ประกอบในการสร้างเว็บไซต์

29. 15 กราฟิกสำหรับงานเว็บไซต์ .GIF รูปแบบที่ใช้คือ .JPEG PNG 1. ไฟล์รูปแบบ JPEG 2. ไฟล์รูปแบบ GIF 3. ไฟล์รูปแบบ PNG

30. 16 JPEG (Joint Photographic Experts Group ) ความหมาย เป็นรูปแบบการบีบอัดแฟ้มภาพโดยให้เสียความละเอียดน้อยที่สุด เหมาะสำหรับภาพถ่ายหรือภาพที่มีการไล่เฉดสีเช่น ภาพวิวทิวทัศน์ ภาพถ่ายคน สามารถเก็บค่าสีได้มากถึง 16.7 ล้านสี ไฟล์ภาพยังถูกบีบอัดให้มีขนาดเล็ก จึงเหมาะสำหรับการนำไปใช้ในเว็บเพจ

31. 17 JPEG (Joint Photographic Experts Group) จุดเด่น สนับสนุนสีได้ถึง 24 bit สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ มีระบบกรแสดงผลแบบหยาบๆ และค่อยๆขยายไปสู่ละเอียดในระบบ progressive มีโปรแกรมสนับสนุนจำนวนมาก เรียกดูได้กับ Graphics Browser ทุกตัวตั้งค่าการบีบไฟล์ได้ (compress files )

32. 18 JPEG (Joint Photographic Experts Group) จุดด้อย ทำให้รูปโปร่งใสไม่ได้

33. 19 GIF (Graphic Interchange Format) ความหมาย เป็นรูปแบบแฟ้มภาพและแฟ้มภาพเคลื่อนไหว รูปแบบ GIF ถูกออกแบบโดย Compuserveซึ่งเป็นระบบเครือข่ายข่าวสารแบบออนไลน์ เพื่อให้บริการแลกเปลี่ยนกราฟิกในรูปแบบบิตแมปเหมาะสำหรับจัดเก็บภาพการ์ตูน หรือภาพวาดลายเส้น

34. 20 GIF (Graphic Interchange Format) ไฟล์ GIF มี 2 สกุล GIF87 พัฒนาขึ้นในปี ค.ศ. 1987 GIF89A พัฒนาขึ้นในปี ค.ศ. 1989

35. 21 GIF87 ความหมาย เป็นไฟล์กราฟิกรุ่นแรกที่สนับสนุนบนอินเตอร์เน็ต เป็นไฟล์ที่มีขนาดเล็กและแสดงผลสีได้เพียง 256 สี และกำหนดให้แสดงผลแบบโครงร่างได้( Interlace )

36. 22 GIF89A ความหมาย เป็นการพัฒนาเพิ่มจาก GIF87 โดยเพิ่มความสามารถการแสดงผลในพื้นที่โปร่งใส (Transparent) และการสร้างภาพเคลื่อนไหว (GIF Animation) โดยนำเอาไฟล์ภาพหลายๆ ไฟล์มารวมกันและนำเสนอภาพเหล่านั้น โดยอาศัยการหน่วงเวลา มีการใส่รูปแบบนำเสนอลักษณะต่างๆ ( Effects ) ในลักษณะภาพเคลื่อนไหว

37. 23 GIF (Graphic Interchange Format) จุดเด่น มีขนาดไฟล์ต่ำ สามารถทำพื้นภาพให้เป็นพื้นโปร่งใสได้ ( Transparent ) มีระบบแสดงผลหยาบและค่อยๆขยายไปสู่ละเอียดในระบบ Interlaceมีโปรแกรมสนับการสร้างจำนวนมาก เรียกดูได้กับ Graphics Browser ทุกตัว ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว ( GIFAnimation )

38. 24 GIF (Graphic Interchange Format) จุดด้อย แสดงสีได้ทั้งหมด 256 สี

39. 25 คุณลักษณะ Transparent Feature คุณลักษณะของภาพที่มีการดรอป ( Drop ) การแสดงสีที่ต้องการ มักจะเป็นสีพื้น ( จริงๆเลือกสีได้มากกว่า 1 สี ) เพื่อให้สีที่เลือกโปร่งใส และแสดงสีตาม ( Browser )

40. 26 คุณลักษณะ Interlace Feature คุณลักษณะของการแสดงผลแบบโครงร่าง และค่อยๆแสดงผลแบบรายละเอียด โดยใช้หลักการแทรกสอดของสี โดยปกติการแสดงภาพบนอินเตอร์เน็ต จะแสดงผลไล่ขอบบนของภาพจนถึงขอบล่าง ซึ่งมักจะแสดงผลช้ามาก เพราะต้องรอให้แต่ละส่วนแสดงผลครบทุกความละเอียด )

41. 27 PNG (Portable Network Graphic) ความหมาย เป็นรูปแบบแฟ้มภาพที่พัฒนาขึ้นมาทดแทนรูปแบบแฟ้มแบบ GIF เพื่อแก้ปัญหาด้านสิทธิบัตร

42. 28 PNG (Portable Network Graphic) จุดเด่น สามารถแสดงผลภาพได้ทั้งในคอมพิวเตอร์ระบบพีซีและในระบบแมคอินทอช จัดเก็บภาพถ่ายได้ดีและทำภาพเคลื่อนไหว ทำภาพไม่มีพื้นหลัง และแสดงภาพแบบ Interlace ได้

43. 29 PNG (Portable Network Graphic) จุดด้อย ยังไม่เป็นที่นิยมมากนัก เพราะมีปัญหาด้านการแสดงผลในอินเทอร์เน็ตเอกซ์พลอเรอร์ เวอร์ชัน 6 กำลังพัฒนา ปรับปรุง

44. 30 แผนผังความคิด

45. 31 ทบทวนความเข้าใจ กิจกรรม ให้นักเรียนเข้าเว็บไซต์ http://www.google.co.th ค้นหาภาพ รูปแบบ .JPG,.GIF,.PNG และทำการบันทึกไฟล์รูปแบบละ 5 ไฟล์ พร้อมนำเสนอภาพหน้าชั้นเรียน

46. 32 ปุจฉา กราฟิกสำหรับงานเว็บไซต์มี 3 รูปแบบอะไรบ้างครับ คลิกที่รูปครับ

47. เฉลย .JPEG กราฟิกสำหรับงานเว็บไซต์มี 3 รูปแบบอะไรบ้างครับ .GIF .PNG คลิกที่รูปครับ

48. 33 เพื่อนๆ รู้จักคำว่า“เว็บไซต์” ไหมครับอยากรู้ ... คลิกหน้าถัดไปได้เลย น่ารู้

49. 34 เว็บไซต์ (website) ความหมาย = + หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์

50. 35 รู้หรือไม่ HTML กับ XHTML ย่อมาจากอะไร HTMLหรือ XHTML ถ้าไม่รู้ คลิก ที่ ข้อความได้เลยครับ

51. เฉลย รู้จัก HTML กับ XHTML ไหมครับ HTMLหรือ XHTML เอชทีเอ็มแอล - เป็นคำย่อจากคำขึ้นต้นของ (HyperText Markup Language)

52. เฉลย รู้จัก HTML กับ XHTML ไหมครับ XHTML เอกซ์เอชทีเอ็มแอล เป็นคำย่อจากคำขึ้นต้นของ (Extensible HyperTextMarkup Language)

53. 36 แบบทดสอบหลังเรียน 1. ฟอร์แมตภาพในข้อใดเป็นแบบ Vector ก. WMF ข. Video Clip ค. JPG ง. GIF

54. 37 แบบทดสอบหลังเรียน 2. ข้อใดไม่ใช่ความหมายของ กราฟิก ก. การสื่อความหมายด้วยการใช้ศิลปะ การแสดง แสง สี เสียง ข. ภาพวาดที่สื่อความหมายได้ทันที ค. การสื่อความหมายด้วยภาพเขียนขาว - ดำ ง. สัญลักษณ์ ซึ่งมีลักษณะเห็นได้ชัดเจนเข้าใจ ความหมาย

55. 38 แบบทดสอบหลังเรียน 3. รูปแบบภาพใดที่เหมาะสำหรับภาพถ่าย ก. JPG ข. GIF ค. BMP ง. WMF

56. 39 แบบทดสอบหลังเรียน 4. ข้อใดให้ความหมายไม่ถูกต้องเกี่ยวกับกราฟิก ก. แดงวาดภาพสุนัข ข. สุชาติถ่ายรูปต้นไม้ ค. พยอมเชิดสิงโต ง. สุธีดูสัญลักษณ์ห้องน้ำชาย

57. 40 แบบทดสอบหลังเรียน 5. รูปแบบภาพใดที่เหมาะสำหรับภาพการ์ตูนลายเส้นที่มีจำนวนสีไม่มาก ก. JPG ข. GIF ค. BMP ง. PCX

58. 41 แบบทดสอบหลังเรียน 6. รูปแบบภาพใด ที่พัฒนาเพื่อแก้ปัญหาด้านลิขสิทธิ์ ก. JPG ข. GIF ค. BMP ง. PNG

59. 42 แบบทดสอบหลังเรียน 7. รูปแบบภาพในข้อใดที่ไม่นิยมมาแทรกลงในเว็บเพจ ก. JPG ข. GIF ค. TIFF ง. PNG

60. 43 แบบทดสอบก่อนเรียน 8. ข้อใดเป็นคุณสมบัติของรูปแบบ GIF ก. แสดงสีได้ 16.7 ล้านสี ข. แสดงสีได้ 256 สีค. แสดงผลภาพได้ทั้งระบบพีซีและระบบแมคอินทอช ง. Corel Draw

61. 44 แบบทดสอบหลังเรียน 9. ภาพแบบ Bitmap มีชื่อเรียกอีกอย่างหนึ่งว่าอะไร ก. Vector Image ข. Raster Image ค. BMP Image ง. Photo Image

62. 45 แบบทดสอบหลังเรียน 10. โปรแกรมในข้อใดใช้สำหรับสร้างรูปแบบ JPG ก. Adobe Photoshop ข. Adobe Illustrator ค. Macromedia Freehand ง. Corel Draw

63. 46 เอกสารอ้างอิง กรมสามัญศึกษา, กระทรวงศึกษาธิการ. พระราชบัญญัติการศึกษาแห่งชาติ พ.ศ. 2542 แก้ไขเพิ่มเติม (ฉบับที่ 2) พ.ศ. 2545. กรุงเทพฯ : พริกหวานกราฟฟิค, 2546. พิสุทธา อารีราษฎร์. การสร้างหนังสืออิเล็กทรอนิกส์เพื่อการเรียนรู้. (เอกสาร ประกอบการบรรยาย), คณะเทคโนโลยีสารสนเทศ. มหาวิทยาลัยราชภัฏ มหาสารคาม, 8-12 กุมภาพันธ์ 2553. โรงเรียนสงวนหญิง.หลักสูตรสถานศึกษา.สุพรรณบุรี.2552 http://th.wikipedia.org/wiki/

64. 47 ผู้จัดทำ ชื่อ-สกุล นายสันติชัย บุญรักษ์ ตำแหน่ง ครู วิทยฐานะครูชำนาญการพิเศษ โรงเรียนสงวนหญิง อำเภอเมืองสุพรรณบุรี จังหวัดสุพรรณบุรี สำนักงานเขตพื้นที่การศึกษาสุพรรณบุรี เขต1 โทรศัพท์ 089-9122166 e-Mail santichai87@hotmail.com

65. รายงานผลการทำแบบทดสอบ คะแนนเต็ม 10 คะแนน คะแนนที่ทำได้ คะแนน