หนั�งสื�ออ�เล็�กทรอนั�กสื�กราฟิ�กสำ�าหรบงานเว็�บไซต์�

ว็�ชาการงานอาช�พและเทคโนโลยี�กล !มสำาระการเร�ยีนร#$ การงานอาช�พและ

เทคโนโลยี�

นายีสำนต์�ชยี บ ญรกษ์�

สำ�านกงานเขต์พ)*นท�+การศึ-กษ์าสำ พรรณบ ร� เขต์ 1

โรงเร�ยีนสำงว็นหญ�ง จังหว็ดสำ พรรณบ ร�

สำาระสำ�าคญ กราฟิ�กแบ!งเป็2น 2

ป็ระเภทค)อบ�ต์แมป็และเว็กเต์อร� ภาพกราฟิ�กสำ�าหรบงานเว็�บไซต์� น�ยีมใช$ 3 ร#ป็แบบ ค)อ ไฟิล�ร#ป็แบบ JPG ไฟิล�ร#ป็แบบ GIF ไฟิล�ร#ป็แบบ PNG

ก

จั ดป็ระสำงค�การเร�ยีนร#$ 1.อธิ�บายีคว็ามหมายี ของค�าว็!า

“ ” กราฟิ�กได$ถู#กต์$อง

2.บอกร#ป็แบบภาพกราฟิ�กท�+น�ยีมใช$ในงานเว็�บไซต์�ได$ถู#กต์$อง

3.อธิ�บายีคว็ามแต์กต์!างของภาพกราฟิ�กแต์!ละร#ป็แบบได$ถู#กต์$อง

ข

สำารบญสำาระสำ�าคญ

กจั ดป็ระสำงค�การเร�ยีนร#$

ขสำารบญ

คแบบทดสำอบก!อนเร�ยีน

งคว็ามหมายีของกราฟิ�ก

1ป็ระเภทกราฟิ�ก

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

14

ร#ป็แบบ JPEG16

ร#ป็แบบ GIF19

ร#ป็แบบ PNG27

ผังคว็ามค�ด30

แบบทดสำอบหลงเร�ยีน36

หนงสำ)ออ$างอ�ง46

ป็ระว็ต์�ผั#$จัดท�า47

ค

แบบทดสำอบก!อนเร�ยีน1. ข$อใดไม!ใช!คว็ามหมายีของ กราฟิ�ก ก. การสำ)+อคว็ามหมายีด$ว็ยีการใช$ศึ�ลป็ะ การ

แสำดง แสำง สำ� เสำ�ยีง ข. ภาพว็าดท�+สำ)+อคว็ามหมายีได$ทนท�

ค. การสำ)+อคว็ามหมายีด$ว็ยีภาพเข�ยีนขาว็ - ด�า ง. สำญลกษ์ณ� ซ-+งม�ลกษ์ณะเห�นได$ชดเจัน เข$าใจั คว็ามหมายี

ง

แบบทดสำอบก!อนเร�ยีน2. ข$อใดให$คว็ามหมายีไม!ถู#กต์$องเก�+ยีว็กบกราฟิ�ก

ก. แดงว็าดภาพสำ นข ข. สำ ชาต์�ถู!ายีร#ป็ต์$นไม$ ค. พยีอมเช�ดสำ�งโต์ ง. สำ ธิ�ด#สำญลกษ์ณ�ห$องน�*าชายี

จั

แบบทดสำอบก!อนเร�ยีน3. ภาพแบบ BITMAP ม�ช)+อเร�ยีกอ�กอยี!างหน-+งว็!า

อะไรก. Vector Imageข. Raster Imageค. BMP Imageง. Photo Image

ฉ

แบบทดสำอบก!อนเร�ยีน4. ฟิอร�แมต์ภาพในข$อใดเป็2นแบบ VECTOR

ก. WMFข. Video Clipค. JPGง. GIF

ช

แบบทดสำอบก!อนเร�ยีน5. ร#ป็แบบภาพใดท�+เหมาะสำ�าหรบภาพถู!ายี

ก. JPGข. GIFค. BMPง. WMF

ซ

แบบทดสำอบก!อนเร�ยีน6. ร#ป็แบบภาพใดท�+เหมาะสำ�าหรบภาพการ�ต์#นลายี

เสำ$นท�+ม�จั�านว็นสำ�ไม!มากก. JPGข. GIFค. BMPง. PCX

ฌ

แบบทดสำอบก!อนเร�ยีน7. ร#ป็แบบภาพใด ท�+พฒนาเพ)+อแก$ป็;ญหาด$าน

ล�ขสำ�ทธิ�<ก. JPGข. GIFค. BMPง. PNG

ญ

แบบทดสำอบก!อนเร�ยีน8. ร#ป็แบบภาพในข$อใดท�+ไม!น�ยีมมาแทรกลงใน

เว็�บเพจัก. JPGข. GIFค. TIFFง. PNG

ฎ

แบบทดสำอบก!อนเร�ยีน9. โป็รแกรมในข$อใด ใช$สำ�าหรบสำร$างร#ป็แบบ

JPGก. Adobe Photoshop ข. Adobe Illustrator ค. Macromedia Freehand ง. Corel Draw

ฏ

แบบทดสำอบก!อนเร�ยีน10. ข$อใด เป็2นค ณสำมบต์�ของร#ป็แบบ GIF

ก. แสำดงสำ�ได$ 16.7 ล$านสำ�ข. แสำดงสำ�ได$ 256 สำ�ค. แสำดงผัลภาพได$ท*งระบบพ�ซ�และระบบแมคอ�นทอชง. Corel Draw

ฐ

กราฟิ�ก (Graphic)

การสำ)+อคว็ามหมายีด$ว็ยีการใช$ศึ�ลป็ะและศึาสำต์ร�ทางการใช$เสำ$น ภาพว็าด ภาพเข�ยีน แผันภาพ ต์ลอดจันสำญลกษ์ณ� ท*งสำ�และขาว็-ด�า ซ-+งม�ลกษ์ณะเห�นได$ชดเจัน เข$าใจั คว็ามหมายีได$ทนท� ต์รงต์ามท�+ผั#$สำ)+อสำารต์$องการ

คว็ามหมายี

1

2

ป็ระเภทของภาพกราฟิ�กม�อะไรบ$าง

ค�าถูามชว็นค�ด

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

3

กราฟิ�ก (Graphic)

บ�ต์แมป็ หมายีถู-งภาพท�+ป็ระกอบด$ว็ยี

จั ดสำ�เล�ก ๆ ท�+เร�ยีกว็!า Pixel มาป็ระกอบกนข-*นจันเป็2นภาพ ค�าว็!า บ�ต์แมป็ เร�ยีกอ�กอยี!างหน-+งว็!า Still Image หร)อ Raster Image

4

ป็ระเภทของกราฟิ�ก

บ�ต์แมป็

เหมาะกบภาพท�+ต์$องการระบายีสำ� สำร$างสำ� ก�าหนดสำ�ท�+ต์$องการคว็ามละเอ�ยีดได$ง!ายีจั ดสำ�ม�ขนาดเล�กเท!าใดภาพก�จัะยี�+งด#เน�ยีนและกลมกล)นเป็2นภาพเด�ยีว็กนมากข-*นเท!าน*น

5

ข$อด�

บ�ต์แมป็

หากจั ดสำ�ม�ขนาดใหญ!และเม)+อ ม�การขยีายีภาพ ภาพท�+เห�นก�จัะด#ขร ขระ ขาดคว็ามคมชด ไม!เร�ยีบกลมกล)น ภาพแต์ก มองเห�นเป็2นสำ�+เหล�+ยีมเล�กๆ

6

ข$อเสำ�ยี

บ�ต์แมป็

ร#ป็แบบของภาพป็ระเภทน�*ได$แก!JPG, GIF, PNG, TIFF, BMPPCX, JPEG2000 เป็2นต์$น

7

ร#ป็แบบของภาพ

บ�ต์แมป็

เช!น Adobe Photoshop , Fractal Design Painter ,Pain, Paint Shop Pro , L-View เป็2นต์$น

8

โป็รแกรมท�+สำร$าง

เว็กเต์อร� หมายีถู-งการก�าหนด

พ�กดและการค�านว็ณค!าบนระนาบสำองม�ต์� รว็มท*งม มและระยีะทางต์ามทฤษ์ฎ�เว็กเต์อร�ในทางคณ�ต์ศึาสำต์ร� ในการก!อให$เก�ดเป็2น เสำ$น หร)อร#ป็ภาพ

9

ป็ระเภทของกราฟิ�ก

เว็กเต์อร�

สำามารถูยี!อขยีายีได$ โดยีค ณภาพไม!เป็ล�+ยีนแป็ลง การจัดเก�บสำ�*นเป็ล)องเน)*อท�+น$อยีกว็!า bitmap มาก การหม นจัะท�าได$ด�กว็!า

10

ข$อด�

เว็กเต์อร�

ไม!สำามารถูเก�บรายีละเอ�ยีดของสำ�สำนต์!าง ๆ ได$ด�  เน)+องจัากเก�บในร#ป็สำ#ต์รแบบของเสำ$น

11

ข$อเสำ�ยี

เว็กเต์อร�ร#ป็แบบของภาพป็ระเภทน�*ได$แก!SVG,PS, EPS, WMF, CDR, AI, CGM, DRW, PLT และฟิอนต์�แบบ TrueType ต์!างๆ เป็2นต์$น

12

ร#ป็แบบของภาพ

เว็กเต์อร�

เช!น Adobe Illustrator Macromedia Freehand Corel Draw เป็2นต์$น

13

โป็รแกรมท�+สำร$าง

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

คว็ามหมายี

14

การน�าภาพกราฟิ�กร#ป็แบบต์!างๆ มาใช$เป็2นองค�ป็ระกอบในการสำร$างเว็�บไซต์�

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

ร#ป็แบบท�+ใช$ค)อ

15

.JPEG

PNG

.GIF

1. ไฟิล�ร#ป็แบบ JPEG2. ไฟิล�ร#ป็แบบ GIF 3. ไฟิล�ร#ป็แบบ PNG

JPEG

เป็2นร#ป็แบบการบ�บอดแฟิCมภาพโดยีให$เสำ�ยีคว็ามละเอ�ยีดน$อยีท�+สำ ด เหมาะสำ�าหรบภาพถู!ายีหร)อภาพท�+ม�การไล!เฉดสำ�เช!น ภาพว็�ว็ท�ว็ทศึน� ภาพถู!ายีคน สำามารถูเก�บค!าสำ�ได$มากถู-ง 16.7 ล$านสำ� ไฟิล�ภาพยีงถู#กบ�บอดให$ม�ขนาดเล�ก จั-งเหมาะสำ�าหรบการน�าไป็ใช$ในเว็�บเพจั

คว็ามหมายี

16

(Joint Photographic Experts Group )

สำนบสำน นสำ�ได$ถู-ง 24 bit สำามารถูก�าหนดค!าการบ�บไฟิล�ได$ต์ามท�+ต์$องการ ม�ระบบกรแสำดงผัลแบบหยีาบๆ และค!อยีๆขยีายีไป็สำ#!ละเอ�ยีดในระบบ progressive ม�โป็รแกรมสำนบสำน นจั�านว็นมาก เร�ยีกด#ได$กบ Graphics Browser ท กต์ว็ต์*งค!าการบ�บไฟิล�ได$ (compress files )

จั ดเด!น

17

JPEG (Joint Photographic Experts Group)

ท�าให$ร#ป็โป็ร!งใสำไม!ได$

จั ดด$อยี

18

JPEG (Joint Photographic Experts Group)

คว็ามหมายี

19

GIF (Graphic Interchange Format)

เป็2นร#ป็แบบแฟิCมภาพและแฟิCมภาพเคล)+อนไหว็ ร#ป็แบบ GIF ถู#กออกแบบโดยี Compuserve ซ-+งเป็2นระบบเคร)อข!ายีข!าว็สำารแบบออนไลน� เพ)+อให$บร�การแลกเป็ล�+ยีนกราฟิ�กในร#ป็แบบบ�ต์แมป็เหมาะสำ�าหรบจัดเก�บภาพการ�ต์#น หร)อภาพว็าดลายีเสำ$น

GIF87 พฒนาข-*นในป็D ค.ศึ. 1987 GIF89A พฒนาข-*นในป็D ค.ศึ.

1989

ไฟิล� GIF ม� 2 สำก ล

20

GIF (Graphic Interchange Format)

คว็ามหมายี

GIF87

21

เป็2นไฟิล�กราฟิ�กร !นแรกท�+สำนบสำน นบนอ�นเต์อร�เน�ต์ เป็2นไฟิล�ท�+ม�ขนาดเล�กและแสำดงผัลสำ�ได$เพ�ยีง 256 สำ� และก�าหนดให$แสำดงผัลแบบโครงร!างได$ ( Interlace )

คว็ามหมายี

GIF89A

22

เป็2นการพฒนาเพ�+มจัาก GIF87 โดยีเพ�+มคว็ามสำามารถูการแสำดงผัลในพ)*นท�+โป็ร!งใสำ (Transparent) และการสำร$างภาพเคล)+อนไหว็ (GIF Animation) โดยีน�าเอาไฟิล�ภาพหลายีๆ ไฟิล�มารว็มกนและน�าเสำนอภาพเหล!าน*น โดยีอาศึยีการหน!ว็งเว็ลา ม�การใสำ!ร#ป็แบบน�าเสำนอลกษ์ณะต์!างๆ ( Effects ) ในลกษ์ณะภาพเคล)+อนไหว็

ม�ขนาดไฟิล�ต์�+า สำามารถูท�าพ)*นภาพให$เป็2นพ)*นโป็ร!งใสำได$ ( Transparent ) ม�ระบบแสำดงผัลหยีาบและค!อยีๆขยีายีไป็สำ#!ละเอ�ยีดในระบบ Interlace ม�โป็รแกรมสำนบการสำร$างจั�านว็นมาก เร�ยีกด#ได$กบ Graphics Browser ท กต์ว็ คว็ามสำามารถูด$านการน�าเสำนอแบบภาพเคล)+อนไหว็ ( GIF Animation )

จั ดเด!น

23

GIF (Graphic Interchange Format)

แสำดงสำ�ได$ท*งหมด 256 สำ�

จั ดด$อยี

24

GIF (Graphic Interchange Format)

ค ณลกษ์ณะของภาพท�+ม�การดรอป็ ( Drop ) การแสำดงสำ�ท�+ต์$องการ มกจัะเป็2นสำ�พ)*น ( จัร�งๆเล)อกสำ�ได$มากกว็!า 1 สำ� ) เพ)+อให$สำ�ท�+เล)อกโป็ร!งใสำ และแสำดงสำ�ต์าม ( Browser )

25

TRANSPARENT FEATURE

ค ณลกษ์ณะ

ค ณลกษ์ณะ

ค ณลกษ์ณะของการแสำดงผัลแบบโครงร!าง และค!อยีๆแสำดงผัลแบบรายีละเอ�ยีด โดยีใช$หลกการแทรกสำอดของสำ� โดยีป็กต์�การแสำดงภาพบนอ�นเต์อร�เน�ต์ จัะแสำดงผัลไล!ขอบบนของภาพจันถู-งขอบล!าง ซ-+งมกจัะแสำดงผัลช$ามาก เพราะต์$องรอให$แต์!ละสำ!ว็นแสำดงผัลครบท กคว็ามละเอ�ยีด )

26

INTERLACE FEATURE

PNG

เป็2นร#ป็แบบแฟิCมภาพท�+พฒนาข-*นมาทดแทนร#ป็แบบแฟิCมแบบ GIF เพ)+อแก$ป็;ญหาด$านสำ�ทธิ�บต์ร

คว็ามหมายี

27

(Portable Network Graphic)

PNG

สำามารถูแสำดงผัลภาพได$ท*งในคอมพ�ว็เต์อร�ระบบพ�ซ�และในระบบแมคอ�นทอช จัดเก�บภาพถู!ายีได$ด�และท�าภาพเคล)+อนไหว็ ท�าภาพไม!ม�พ)*นหลง และแสำดงภาพแบบ Interlace ได$

จั ดเด!น

28

(Portable Network Graphic)

PNG

ยีงไม!เป็2นท�+น�ยีมมากนก เพราะม�ป็;ญหาด$านการแสำดงผัลในอ�นเทอร�เน�ต์เอกซ�พลอเรอร� เว็อร�ชน 6 ก�าลงพฒนา ป็รบป็ร ง

จั ดด$อยี

29

(Portable Network Graphic)

แผันผังคว็าม ค�ด

30

กราฟิ�ก

บ�ต์แมต์

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

.JPG

.GIF

.PNG

เว็กเต์อร�

ทบทว็นคว็ามเข$าใจั

1 .ให$นกเร�ยีนเข$าเว็�บไซต์� http://www.google.co.th

2. ค$นหาภาพ ร#ป็แบบ .JPG,.GIF,.PNG และท�าการบนท-กไฟิล�ร#ป็แบบละ 5 ไฟิล� พร$อมน�าเสำนอภาพหน$าช*นเร�ยีน

ก�จักรรม

31

ป็ จัฉา32

กราฟิ�กสำ�าหรบงานเว็�บไซต์�ม� 3 ร#ป็แบบอะไรบ$างครบ

คล�กท�+ร#ป็ครบ

เฉลยี

.GIF

.PNG

.JPEGกราฟิ�กสำ�าหรบงานเว็�บไซต์�ม� 3 ร#ป็แบบอะไรบ$างครบ

คล�กท�+ร#ป็ครบ

เพ)+อนๆ ร#$จักค�าว็!า“ ” เว็�บไซต์�

ไหมครบ อยีากร#$ ... คล�ก

หน$าถูดไป็ได$เลยี

นั�าร� �

33

เว็�บไซต์� (website)

หน$าเว็�บเพจัหลายีหน$า ซ-+งเช)+อมโยีงกนผั!านทางไฮเป็อร�ล�งก�

คว็ามหมายี

34

+ =

ร#$หร)อไม!

HTML หร�อXHTML

35

HTML กบXHTML

ยี!อมาจัากอะไร

ถู$าไม!ร#$ คล�ก ท�+ ข$อคว็ามได$เลยีครบ

เฉลยีHTML หร�อ

XHTML

ร� �จั�ก HTML ก�บ XHTML

ไหมคร�บ

เอชท�เอ�มแอล - เป็2นค�ายี!อจัากค�าข-*น ต์$นของ

(Hyper Text Markup Language)

เฉลยี XHTML

ร� �จั�ก HTML ก�บ XHTML

ไหมคร�บ

เอกซ�เอชท�เอ�มแอล เป็2นค�ายี!อจัากค�าข-*นต์$น ของ

(Extensible HyperText Markup Language)

แบบทดสำอบหลงเร�ยีน1. ฟิอร�แมต์ภาพในข$อใดเป็2นแบบ VECTOR

ก. WMFข. Video Clipค. JPGง. GIF

36

แบบทดสำอบหลงเร�ยีน2. ข$อใดไม!ใช!คว็ามหมายีของ กราฟิ�ก ก. การสำ)+อคว็ามหมายีด$ว็ยีการใช$ศึ�ลป็ะ การ

แสำดง แสำง สำ� เสำ�ยีง ข. ภาพว็าดท�+สำ)+อคว็ามหมายีได$ทนท�

ค. การสำ)+อคว็ามหมายีด$ว็ยีภาพเข�ยีนขาว็ - ด�า ง. สำญลกษ์ณ� ซ-+งม�ลกษ์ณะเห�นได$ชดเจัน เข$าใจั คว็ามหมายี

37

แบบทดสำอบหลงเร�ยีน3. ร#ป็แบบภาพใดท�+เหมาะสำ�าหรบภาพถู!ายี

ก. JPGข. GIFค. BMPง. WMF

38

แบบทดสำอบหลงเร�ยีน4. ข$อใดให$คว็ามหมายีไม!ถู#กต์$องเก�+ยีว็กบกราฟิ�ก

ก. แดงว็าดภาพสำ นข ข. สำ ชาต์�ถู!ายีร#ป็ต์$นไม$ ค. พยีอมเช�ดสำ�งโต์ ง. สำ ธิ�ด#สำญลกษ์ณ�ห$องน�*าชายี

39

แบบทดสำอบหลงเร�ยีน5. ร#ป็แบบภาพใดท�+เหมาะสำ�าหรบภาพการ�ต์#นลายี

เสำ$นท�+ม�จั�านว็นสำ�ไม!มากก. JPGข. GIFค. BMPง. PCX

40

แบบทดสำอบหลงเร�ยีน6. ร#ป็แบบภาพใด ท�+พฒนาเพ)+อแก$ป็;ญหาด$าน

ล�ขสำ�ทธิ�<ก. JPGข. GIFค. BMPง. PNG

41

แบบทดสำอบหลงเร�ยีน7. ร#ป็แบบภาพในข$อใดท�+ไม!น�ยีมมาแทรกลงใน

เว็�บเพจัก. JPGข. GIFค. TIFFง. PNG

42

แบบทดสำอบก!อนเร�ยีน8. ข$อใด เป็2นค ณสำมบต์�ของร#ป็แบบ GIF

ก. แสำดงสำ�ได$ 16.7 ล$านสำ�ข. แสำดงสำ�ได$ 256 สำ�ค. แสำดงผัลภาพได$ท*งระบบพ�ซ�และระบบแมคอ�นทอชง. Corel Draw

43

แบบทดสำอบหลงเร�ยีน9. ภาพแบบ BITMAP ม�ช)+อเร�ยีกอ�กอยี!างหน-+งว็!า

อะไรก. Vector Imageข. Raster Imageค. BMP Imageง. Photo Image

44

แบบทดสำอบหลงเร�ยีน10. โป็รแกรมในข$อใด ใช$สำ�าหรบสำร$างร#ป็แบบ

JPGก. Adobe Photoshop ข. Adobe Illustrator ค. Macromedia Freehand ง. Corel Draw

45

เอกสำารอ$างอ�งกรมสำามญศึ-กษ์า, กระทรว็งศึ-กษ์าธิ�การ. พระราช

บญญต์�การศึ-กษ์าแห!งชาต์� พ.ศึ. 2542 แก$ไขเพ�+มเต์�ม (ฉบบท�+ 2) พ.ศึ. 2545. กร งเทพฯ : พร�กหว็านกราฟิฟิ�ค, 2546.

พ�สำ ทธิา อาร�ราษ์ฎร�. การสำร$างหนงสำ)ออ�เล�กทรอน�กสำ�เพ)+อการเร�ยีนร#$. (เอกสำาร ป็ระกอบการบรรยีายี), คณะเทคโนโลยี�สำารสำนเทศึ. มหาว็�ทยีาลยีราชภฏ มหาสำารคาม, 8-12 ก มภาพนธิ� 2553. โรงเร�ยีนสำงว็นหญ�ง.หลกสำ#ต์รสำถูานศึ-กษ์า.สำ พรรณบ ร�.2552http://th.wikipedia.org/wiki/

46

ผั#$จัดท�าช)+อ-สำก ล นายีสำนต์�ชยี บ ญรกษ์�ต์�าแหน!ง คร# ว็�ทยีฐานะคร#ช�านาญการพ�เศึษ์โรงเร�ยีน สำงว็นหญ�ง อ�าเภอเม)องสำ พรรณบ ร� จังหว็ดสำ พรรณบ ร�สำ�านกงานเขต์พ)*นท�+การศึ-กษ์าสำ พรรณบ ร� เขต์1โทรศึพท� 089-9122166e-Mail santichai87@hotmail.com

47

รายีงานผัลการท�าแบบทดสำอบ

คะแนนเต์�ม 10 คะแนน คะแนนท�+ท�าได$ คะแนน