EbookPictureFormat
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

EbookPictureFormat

  • 2,390 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,390
On Slideshare
2,336
From Embeds
54
Number of Embeds
2

Actions

Shares
Downloads
18
Comments
0
Likes
0

Embeds 54

http://santichai87.wordpress.com 53
http://www.slideshare.net 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 คะแนน
    คะแนนที่ทำได้ คะแนน