CSS - WordPress.com
Download
Report
Transcript CSS - WordPress.com
+
1106 211 Web Design and
Implementation
Week 5 : CSS
+
CSS
CSS ยอมาจาก
Cascading Style
่
Sheets เป็ นภาษาทีม
่ รี ป
ู แบบการเขียน
Syntax ทีเ่ ฉพาะ และถูกกาหนดมาตรฐาน
โดย W3C (World Wide Web
Consortium) เช่นเดียวกับ HTML และ
XHTML ใช้สาหรับตกแตงเอกสาร
่
HTML/ XHTML ให้มีหน้าตา สี สัน
ตัวอักษร เส้นขอบ พืน
้ หลัง ระยะหาง
่
ฯลฯ อยางที
เ่ ราตองการ
ดวยการก
าหนด
่
้
้
คุณสมบัตใิ หกับ Element ตางๆ ของ
+
ประโยชน์ ของ CSS
1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML
ในการตกแตงเอกสารเว็
บเพจ ทาให้ code ภายในเอกสาร HTML เหลือเพียง
่
ส่วนเนื้อหา ทาให้เขาใจง
ายขึ
น
้ การแกไขเอกสารท
าไดง้ ายและรวดเร็
ว
้
่
้
่
2. เมือ
่ code ภายในเอกสาร HTML ลดลง ทาให้ขนาดไฟลเล็
์ กลง จึงดาวน์
โหลดไดเร็
้ ว
3. สามารถกาหนดรูปแบบการแสดงผลจากคาสั่ ง style sheet ชุดเดียวกัน ให้มี
ผลกับเอกสาร HTML ทัง้ หน้า หรือทุกหน้าได้ ทาให้เวลาแกไขหรื
อปรับปรุงทา
้
ไดง้ าย
ไมต
ตามแก
ที
ทัว่ ทัง้ เอกสาร
่
่ องไล
้
่
้ ่ HTML tag ตางๆ
่
4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกลเคี
้ ยงกัน ไดในหลาย
้
Web Browser
5. สามารถกาหนดการแสดงผลในรูปแบบทีเ่ หมาะกับสื่ อชนิดตางๆ
ไมว่ าจะเป็
นการ
่
่
แสดงผลบนหน้าจอ, บนกระดาษเมือ
่ สั่ งพิมพ,์ บนมือถือ หรือบน PDA โดยทีเ่ ป็ น
เนื้อหาเดียวกัน
6. ทาให้เป็ นเว็บไซตที
่ ม
ี าตรฐาน ปัจจุบน
ั การใช้ attribute ของ HTML ตกแตง่
์ ม
เอกสารเว็บเพจ นั้นลาสมั
ยแลว
้
้ W3C แนะนาให้เราใช้ CSS แทน ดังนั้นหาก
เราใช้ CSS กับเอกสาร HTML ของเรา ก็จะทาให้เขากั
้ บเว็บเบราเซอรใน
์
อนาคตไดดี
้
+
ตัวอย่างการใช้งาน CSS
+
ตัวอย่างการใช้งาน CSS
+
โครงสร้าง CSS
คาสั่ งของ
CSS ประกอบดวย
selector,
้
property และ value
selector สามารถเป็ น HTML Tag ตางๆ
่
เช่น <body>, <p> หรือเป็ น Class name
หรือ ID ทีเ่ ราตัง้ ชือ
่ ให้ก็ได้
- property คือ คุณสมบัตใิ นการจัดรูปแบบ
การแสดงผล เช่น color สาหรับกาหนดสี ,
font-size สาหรับกาหนดขนาดตัวอักษร
- value เป็ น คา่ ทีเ่ รากาหนดให้กับ
-
+
ตัวอย่างคาสัง่ CSS
กาหนดให้ขอความที
อ
่ ยูใน
้
่
Tag <p>
เป็ นสี ดา และวางอยูกึ
่ ง่ กลาง
selector ทีเ่ ป็ น HTML Tag */
p{
color:#000000;
text-align:center;
}
/*
+
หน่วยที่ใช้ใน CSS
หน่ วยแบบ Relative Length (กาหนดแบบ
อัตราส่วน)
(pixels, สั มพันธกั
ยดของ
่
์ บคาความละเอี
หน้าจอ) เช่น 1px, 4px
em (emphasize, ความสูงของตัวอักษร) เป็ น
ขนาดจานวนเทาของขนาด
font ทีก
่ าหนดให้
่
body
ถา้ font ที่ body กาหนดเป็ น 10px
h1{fon-size:1.5em} h1 จะมีขนาดเป็ น 1.5 เทา่
ของ 10px = 15px
h2{fon-size:1.4em} h2 จะมีขนาดเป็ น 1.4 เทา่
ของ 10px = 14px
และถาเรากาหนดเป็ น 1em ก็จะมีขนาดเทากับ
px
+
หน่วยที่ใช้ใน CSS
หน่ วยแบบ Absolute Length
(กาหนดตายตัว)
(inches; 1in=2.54cm =72pt =6pc)
เช่น 2in, 1.5in
cm (centimeters; 1cm=10mm) เช่น
2cm, 1.11cm
mm (millimeters) เช่น 50mm, 0.8mm
pt (points; 1pt=1/72in, 10pt มีขนาดพอๆ
in
+
การกาหนดสี Color CSS
การกาหนดสี ให้ตัวอักษร
พืน
้ หลัง เส้นขอบ หรือส่วน
อืน
่ ๆ ของวัตถุ สามารถกาหนดไดหลายแบบ
้
1. กาหนดโดยใช้ชือ
่ สี แตการระบุ
ชอ
ื่ สี แบบนี้ใช้สี ได้
่
จานวนจากัด ไดแก
้ ่ aqua, black, blue, fuchsia
(แดงอมมวง),
gray, green, lime, maroon (น้าตาล
่
แดง), navy, olive, purple, red, silver, teal (เขียวขน
เป็ ด), white, และ yellow
2. กาหนดเป็ นคาสี
่ แบบ RGB
#rrggbb เช่น #eecc00, #42e15e
#rgb เช่น #ec0 หมายถึง #eecc00
rgb(x,x,x) โดยที่
่ ่ x คือจานวนเต็มตัง้ แต่ 0-255 เช่น
rgb(0,204,0)
rgb(y%,y%,y%) โดยที่
่ ี่่ y คือเปอรเซ็นตตัง้ แต 0%-100%
+
การกาหนดสี Color CSS
+
CSS Box Model
-
-
เราสามารถใช้ CSS ในการ ควบคุม style
ของ content boxes ได้
Box ใน html แบงเป็
่ น สองประเภท
-
-
-
Block : box ทีอ
่ ยูใน
่ level นี้ ยกตัวอยางเช
่
่น
paragraph สามารถบรรจุ box ทีเ่ ป็ น block หรือ
inline ก็ได้
Inline : เป็ น box ทีม
่ เี นื้อหา อยูภายใน
block ไม่
่
สามารถสราง
้ block ใหมได
่ ้
<body> เป็ น containing box และมี box ยอยๆภายใน
่
ภายใน box ยอยนั
้นสามารถมี box อีกได้
่
+
CSS Box Model
ทดสอบ Block and Inline box
<h1>heading text</h1>
<p>
<p>line of text within the paragraph</p>
<p>line of text within the paragraph</p>
<p>line of text within the paragraph</p>
</p>
+
CSS Box Model
-
เราสามารถใส่รูปแบบการแสดงของ box ทัง้ แบบ block และ inline โดยใช้ attribute ‘display’
-
Display property ส่วนใหญจะใช
่
้กับ การทาเมนูในแนวนอน โดยใช้คาสั่ ง list
ทดสอบ
li { display: inline;
list-style-type:none;
}
<ul>
<li><a href=“url”>Home</a></li>
…
<li><a href=“url”>Contact</a></li>
</ul>
+
CSS Box Model
-
-
Box model คือการจัดรูปแบบกลองสี
เหลีย
่ มทีม
่ ี
่
เนื้อหาอยูภายใน
เช่น box paragraph
่
แตละbox
จะประกอบดวย
3 ส่วน
่
้
-
-
Border กรอบของ box
Margin พืน
้ ทีว่ างระหว
าง
่
่ box และ containing
box จะเป็ น transparent เสมอ
Padding พืน
้ ทีว่ างระหว
าง
border และ content
่
่
+
CSS Box Model
+
Box border
กรอบของ box หรือ element สามารถกาหนดได้
ดวย
property
้
-
-
-
border
border-left
border-right
border-top
border-bottom
border-width
border-color
-
-
border-style
Border(left/right/top/botto
m)-style
border(left/right/top/botto
m)-width
+
Box border
Style ตางๆของ
border
่
+
Box border
ทดลอง
p { border: 2em;
border-style: solid;
border-color: black
}
+
Box Margins
+
Box border
ทดลอง
p { border: 2px;
border-style: solid;
border-color: black
margin-left: 10px;
margin-top: 10px;
}
+
Box Padding
+
Box border
ทดลอง
p { border: 2px;
border-style: solid;
border-color: black
margin-left: 10px;
margin-top: 10px;
padding-top: 10px; / padding-left: 10px;
/padding: 10px;
}
+
Box border
ทดลอง
p { border: 2px;
border-style: solid;
border-color: black
margin-left: 10px;
margin-top: 10px;
padding-top: 10px; / padding-left: 10px;
/padding: 10px;
}
+
Margin and Padding
browser อาจตัง้ คา่ default ของ margin และ
padding ไว้ ถาเราไม
ต
สามารถ
้
่ องการ
้
กาหนดคา่ margin ไวเป็
้ น ‘0’ เลย
body { margin:0; padding:0; }
+
CSS name and id
การกาหนด ชือ
่ ให้กับ สไตล ์ ของ CSS เรา
สามารถกาหนดได้ 2 รูปแบบ
Class - เป็ นการกาหนดชือ
่ รูปแบบ CSS ทีแ
่ ท็ก
สามารถเรียกใช้ซา้ ได้
Id - เป็ นการกาหนดรูปแบบ CSS ทีส
่ ามารถ
กาหนดให้ไดเพี
้ ยง element เดียวเทานั
่ ้น
ทดลอง
การกาหนด classs
.ax {…}
การกาหนด id
#ax {…}
+
วิธใี ช้งาน CSS
Inline Styles - วิธก
ี ารนี้ควรใช้ในกรณีท ี่
ตองการก
าหนด style ให้กับ element ของ
้
HTML เีีพย
ี งอันเดียวเป็ นการเฉพาะ โดย
การแทรกคาสั่ ง style sheet ใน HTML
Tag อยูในค
าสั่ ง style="" ดังนี้
่
1.
<Tag
style="property:value;">
<html>
<body>
<h1 style="color:red; font-family:Arial">วิธด
ี แ
ู ล
รักษาสุขภาพ</h1>
<p style="color:black; font-family:Arial; fontweight:bold">รับประทานอาหารทีม
่ ป
ี ระโยชน์
หมัน
่ ออกกาลังกาย และพักผอนให
่
้เพียงพอ</p>
+
วิธใี ช้งาน CSS
Internal Style Sheet - วิธก
ี ารนี้ควรใช้
ในกรณีทม
ี่ เี พียง HTML ไฟลเดี
์ ยวทีใ่ ช้
style นี้ เมือ
่ ประกาศคาสั่ ง Style Sheet
เพือ
่ กาหนดคุณสมบัต ิ ให้กับ HTML Tag
ใดๆ แลว
้ จะมีผลกับเอกสาร HTML ทัง้
หน้า นิยมใส่ส่วนของคาสั่ ง Style Sheet
ไวระหว
าง
<head>...</head>
้
่
2.
<style
type="text/css">
<!-selector {property1: value1; property2:
value2}
....
-->
+
วิธใี ช้งาน CSS
<html>
<head>
<style type="text/css">
<!–
h1{color:red; font-family:Arial }
p{color:black; font-family:Arial; font-weight:bold }
-->
</style>
</head>
<body>
<h1>วิธใี ช้งาน CSS </h1>
<p>CSS ช่วยให้งานดีไซนของคุ
ณดีขน</p>
ีื
์
</body>
</html>
+
วิธใี ช้งาน CSS
External Style Sheet - วิธก
ี ารนี้เหมาะ
กับกรณีทม
ี่ เี พียง 1 style แลวต
้ องการ
้
นาไปใช้กับเอกสาร HTML หลายๆ ไฟล ์
โดยนาเอาคาสั่ ง Style Sheet ทีอ
่ ยูใน
่
<style type="text/css"> ... </style> มา
บันทึกเป็ นไฟลใหม
่ นามสกุล .css จากนั้น
์
จึงทาการผนวกไฟลของ
Style Sheet นี้ลง
์
ไปในเอกสาร HTML ทุกไฟลที
่ องการใช
้
้
์ ต
งาน Style Sheet ชุดนี้ ไวในส
้
่ วน
<head>...</head> โดยใช้คาสั่ ง
3.
<link
rel="stylesheet" type="text/css"
href="URL ไฟล.css”>
์
Typographic
+
element
ส่วนประกอบดาน
้
Typography
+
Typography
Typography principles หลักการใช้รูปแบบ
อักษรสาหรับเว็บดีไซน์
1.
Choose fewer fonts and sizes.
2.
Use available fonts’
3.
Design for legibility
4.
Avoid using text as graphics.
+
Choose fewer fonts and
size
เพือ
่ ใหเพจดูสะอาดไมรก หรือไมขัดตา
้
่
่
ออกแบบขนาดของตัวอักษรโดยไลความส
าคัญ เช่น
่
page heading, section heading, and body text
สื่ อสารโดยการจัดระดับขัน
้ ของขอมู
้ ล
โดยการเปลีย
่ น
ขนาด สี น้าหนัก หรือ รูปแบบตัวอักษร เช่น
Page heading should have a larger, bolder type,
แต่ section heading would appear in the same
typeface, only lighter or smaller
เลือกใช้ขนาด
และรูปแบบตัวอักษรให้้น้อย อยากใช้
มากเกินไป เช่น ขนาดตัวอักษรเลือกไว้ 3 ขนาด
a large one for heading, a smaller size for
subheading, and a size for text body.
+
Choose fewer fonts and
size
+
Use common web font
-
Web Safe Fonts หรือฟอนต์ที่ปลอดภัย
สาหรับเว็บ
หรือบางคนอาจจะเรียกฟอนต ์
มาตรฐาน เหลานี
ั คือ ฟอนตที
่ ่ วนใหญแล
่ ้มน
์ ส
่ ว
้
จะมีอยูในคอมพิ
วเตอรทุ
่ ง และเมือ
่
่
์ กเครือ
กาหนดฟอนตนั
์ ้นแลว
้ ผูเรี
้ ยกดูเว็บก็จะเห็นแบบ
ตัวอักษรทีถ
่ ก
ู ตอง.
หากไมได
้
่ ใช
้ ้ฟอนตที
์ ่
ปลอดภัย หรือฟอนตที
่ ใี นทุกเครือ
่ งแลวนั
์ ม
้ ้น
ผลก็คอ
ื จะทาให้ผูเรี
นฟอนตที
์ ่
้ ยกดูไมสามารถเห็
่
ถูกตองตามผู
ออกแบบเว็
บตอง
การได้ อาจ
้
้
้
+
Use common web font
ตัวอยาง
web safe font
่
Font-family : arial, helvetica, sans-serif;
Font-family : ‘Bookman Old Style’, serif;
Font-family : Vernada, Geneva, sans-serif;
สามารถเขาเช็
้ คดูไดที
้ ่
http://demo.okvee.net/web-safe-font.php
+
Design for legibility
ลักษณะการอานออกง
ายบน
web site
่
่
-
-
-
Size and typeface ขนาดและรูปแบบตัวอักษรทีใ่ ช้
มีผลตอการอ
านของคนอ
าน
หน้าจอคอมพิวเตอรมี
่
่
่
์
ความละเอียดตาี่กวาเอกสารพิ
มพ ์ การออกแบบ
่
เอกสารให้อานง
ายในเอกสารพิ
มพแต
ใน
่
่
์ มาดู
่
computer screen กลายเป็ นสูญเสี ยความงายในการ
่
อาน
ควรใช้ตัวอักษรทีใ่ หญพอให
าย
และ
่
่
้อานง
่
่
หลีกเลีย
่ งการใช้รูปแบบอักษรแปลกๆทีอ
่ านท
าให้ลด
่
ระดับการอานง
ายเมื
อ
่ ดูผาน
มอนิเตอร ์
่
่
่
Adding space around the block and between line
ควรแบงพื
้ ทีเ่ ปลารอบเนื
้อหาเพือ
่ ให้อานได
สบายขึ
น
้
่ น
่
่
้
รวมไปถึงพืน
้ ทีว่ างระหว
าง
่
่ line
สี ทใี่ ชสาหรับตัวอักษร และสี พน
ื้ ตองใหตัดกันเพือ
่
+
Design for legibility
+
Design for legibility
+
Avoid Creating text as
Web safe font มีให้เลือกน้อย คนจึงนิยมออกแบบที่
Graphic
มี font ลูกเลนเยอะๆผ
านทาง
Photoshop หรือ
่
่
ออกแบบ website โดยใช้ Flash ผลทีไ่ ดคื
้ อจะไดเป็
้ น
ภาพ graphic เช่น logo, title, banner หรือ
งาน mulitimedia (flash) จะนิยมทาในรูปแบบนี้มาก
ในช่วงแรกๆของการออกแบบ หรือช่วงทีเ่ ว็บไซตมี
์
ขอจ
่ งของ fonts
้ ากัดในเรือ
ปัญหาทีพ
่ บเจอ
- ไมสามารถที
จ
่ ะ search ขอความบนเว็
บไซตได
่
้
์ ้
- การแกไข
่ งยุงยาก
้ ข
้ อมู
้ ลเป็ นเรือ
่
- ไมสามารถดู
ใน screen reader
่
+
CSS typography
Font property สาหรับ CSS กาหนดลักษณะการ
แสดงผลของตัวอักษร
Font-family : กอนออกแบบเว็
บไซต ์ ควรเริม
่ คิดกอน
่
่
วาจะใช
่
้ font รูปแบบไหน serif/san-serif หรือจะ
เป็ นชือ
่ ของชุดอักษร เช่น Helvetica ควรใช้ font ที่
computerน่าจะมี
ตัวอยาง
่
p { font-family: sans-serif;}
p {font-family: helvetica, “lucida console”, arial; }
+
CSS typography
font-face : สามารถระบุ font ให้ดาวโหลด และแสดง
บน browser แกปั
่ แ
ี ตใน
้ ญหาขอจ
้ ากัดการใช้ font ทีม
่
คอมพิวเตอรเท
์ านั
่ ้น Font ทีร่ ะบุปกติจะเป็ นไฟล ์
truetype format (TTF) วิธเี รียกใช้ ตองเรี
ยกผาน
font้
่
family ดวย
้
ตัวอยาง
่
@font-face { font-family: generica;
src:
url(http://www.generic.com/fonts/generica.ttf)}
h1 { font-family : generica, serif; }
บทความเกีย
่ วกับ Font-face/ Font-face generater
http://www.wecraftweb.com/2011/04/css3-font-face%E0%B8%9F%E0%B8%AD%E0%B8%99%E0%B8
%95%E0%B9%8C%E0%B9%84%E0%B8%97%E0
%B8%A2%E0%B9%83%E0%B8%99%E0%B9%80
+
CSS typography
font-size : เป็ นการกาหนด ขนาดของ font ทีเ่ ราจะ
ใช้ในการออกแบบ เว็บไซต ์
โดยกาหนดให้ใช้หน่วย 2 ประเภท absolute unit (
cm, in, pt) และ relative unit ( em, px, %)
Absolute
- fixed value, ไมเหมาะกั
บ web design เพราะไม่
่
สามารถปรับขนาดตามขนาดของ browser
- absolute จะเหมาะกับงานทีท
่ ราบแน่นอนวา่
destination medium มีขนาดเทาไร
เมือ
่ ทราบขนาด
่
จึงสามารถคานวณวาจะต
องใช
ง
่
้
้ตัวอักษรขนาดเทาไรถึ
่
จะเหมาะ จึงเหมาะกับสื่ อพิมพมากกว
า่
์
+
CSS typography
Relative Unit
- ออกแบบมาเพือ
่ ให้ใช้กับเว็บไซตที
่ องมี
ปรับขนาด
้
์ ต
- ตัวอักษรทีใ
่ ช้หน่วยนี้จะถูกปรับตาม containing
element
- เหมาะกับงานดานเว็
บไซต ์ ทีอ
่ าจตองมี
การแสดง
้
้
ผาน
ขนาดจอ size ตางๆ
เช่น แสดงทาง
่
่
โทรศั พท ์ tablet มอนิเตอร ์
ตัวอยาง
่
Body { font-family: arial, sans-serif;
font-size: 14px;
}
+
CSS typography
Property ต่างๆ
font-style : italic;
font-weight : bold; เพิม
่ น้าหนังตัวอักษณให้หนาขึน
้
อาจใส่คาเป็
่ นตัวเลข 100-900
+
CSS typography
Text spacing Properties กาหนดลักษณะของ space
ใน paragraph
Text-indent เยือ
้ งเขาให
้
้บรรทัดแรกของยอหน
่
้า
คุณสมบัตน
ิ ี้กาหนดคาได
สองแบบค
ะ่ คือเป็ น px (pixel)
่
้
กับเป็ น % (เปอรเซนต
)์
์
p {text-indent:50px;}
Line-height ระยะหางระหว
างบรรทั
ด
่
่
คามาตรฐานคื
อ normal ถาจะเปลี
ย
่ นเป็ นคาอื
่ ๆ ก็
่
้
่ น
สามารถกาหนดเป็ น ตัวเลข (number), ความยาว
(length), หรือ เปอรเซนต
์
์ (%) ก็ไดค
้ ะ่
p.small {line-height:90%;}
+
CSS typography
Text spacing Properties กาหนดลักษณะของ
space ใน paragraph
Text-decoration ลักษณะรูปแบบตัวอักษร
คามาตรฐานคื
อNone และมีคาต
่
่ างๆ
่
underline/overline/line-through/blink
h1 { text-decoration: underline;}
Letter Spacing ระยะหางระหว
างตั
วอักษร
่
่
คามาตรฐานคื
อ normal ส่วนคาอื
่ ๆ จะเป็ นหน่วย
่
่ น
ความยาว
h1 {letter-spacing:11px;}
+
CSS typography
Text spacing Properties กาหนดลักษณะของ space
ใน paragraph
Vertical Align ตาแหน่งในแนวแกน y (แนวตัง้ )
คุณสมบัตน
ิ ี้นิยมให้จัดขอความคู
กั
้
่ บภาพ
.top {vertical-align:text-top;}
.bottom {vertical-align:text-bottom;}
Word Spacing ระยะหางระหว
างค
า คุณสมบัตน
ิ ี้เหมาะกับ
่
่
ภาษาอังกฤษ ถาเป็
้ นภาษาไทยน่าจะเรียกวาจะระยะ
่
ระหวางประโยคมากกว
า่ เอาเป็ นวามั
่
่ นเป็ นการกาหนด
ความกวางของการเว
นวรรค
้
้
คามาตรฐานคื
อ normal ส่วนคาอื
่ ๆ จะเป็ นหน่วยความ
่
่ น
ยาว เช่นเดียวกับ letter-spacing
Garaphic
+
Element
ส่วนประกอบดาน
้
Graphic
+
Graphic
กราฟฟิ กหรือรูปภาพ มีความจาเป็ นมากใน
่
บไซต ์ ถือเป็ นองคประกอบที
การสรางเว็
้
์
สาคัญทีน
่ ก
ั ออกแบบใช้ในการนาเสนอ
เว็บไซต ์ เพราะเราสามารถนารูปมาแทนคา
บรรยายไดเป็
้ นอยางดี
่
ในการประยุกตใช
์ ้ภาพในเว็บไซตโดยมาก
์
จะใชสาหรับ เป็ นภาพพืน
้ หลัง ปุม
+
ประเภทของรูป
มีการแบงประเภทของรู
ปภาพทีม
่ ี
่
หลากหลาย ดังตอไปนี
้
่
ลักณะของเส้นและสี แบงออกเป็
น 2
่
ชนิด
ภาพลายเส้น
(line art) เป็ นลักษณะของ
ภาพวาด (drawing) ประกอบดวยลายเส
้
้น
เรียบๆ ไมมี
างของ
่ การสรางความแตกต
้
่
ระดับสี จะเรียกวาภาพขาวด
าก็ได้
่
ภาพระดับสี ตอเนื
่ ่อง ( continuous-tone
image) เป็ นรูปภาพทีม
่ ส
ี ี สันระดับตางๆกั
น
่
+
ประเภทของรูป
มีการแบงประเภทของรู
ปภาพทีม
่ ี
่
หลากหลาย ดังตอไปนี
้
่
มิตข
ิ องภาพ แบงออกเป็
น 2 ชนิด
่
ภาพ
2 มิต ิ (2 dimensions image) เป็ น
ภาพทีส
่ รางด
วยโปรแกรมประยุ
กตใน
้
้
์
คอมพิวเตอรโดยสร
างจากรู
ปทรงเรขาคณิต
้
์
เช่น เส้นวงกลม วงรี และรูปหลายเหลีย
่ ม
แลวก
่ รางขึ
น
้
้ าหนดสี ลงไปในรูปทีส
้
ภาพ 3 มิต ิ (3 dimensions image) เป็ น
ภาพทีเ่ กิดจากการสรางด
วยโปรแกรมประยุ
กต ์
้
้
+
ประเภทของรูป
มีการแบงประเภทของรู
ปภาพทีม
่ ี
่
หลากหลาย ดังตอไปนี
้
่
แบงประเภทตามลั
กษณะวิธก
ี ารสราง
่
้
ภาพเวคเตอร ์
Vector graphic เป็ นภาพที่
สรางจากโครงสร
างทางเรขาคณิ
ต ทีเ่ ห็ น
้
้
ทัว่ ไปไดแก
้ ่ clip art ทีใ่ ช้กับ MS Office
หรือภาพทีส
่ รางด
วยโปรแกรม
Illustrator
้
้
ขอดี
ื สามารถแกไข
ยอ
้ ของภาพชนิดนี้คอ
้
่
หรือขยายภาพไดโดยไม
เสี
้
่ ยคุณภาพ ไฟลมี
์
ขนาดเล็ก
+
ประเภทของรูป
มีการแบงประเภทของรู
ปภาพทีม
่ ี
่
หลากหลาย ดังตอไปนี
้
่
แบงประเภทตามลั
กษณะวิธก
ี ารสราง
่
้
ภาพ
bimapped หรือภาพราสเตอร ์
Raster image เป็ นภาพทีเ่ กิดจาการ
ประกอบกันของจุดสี หรือเรียกอีกอยางว
่ า่
pixel เป็ นจุดเล็กทีส
่ ุดสาหรับการแสดงบน
จอภาพหรือพิมพ ์ ภาพ bitmap แตละภาพ
่
ประกอบดวยหลายๆจุ
ดรวมกัน แตละจุ
ดจะ
้
่
แสดงสี ออกมาแตกตางกั
น ทาให้เห็ นเป็ น
่
+
Understand graphic file
format
ภาพทีเ่ ก็บในคอมพิวเตอรมี
์ หลายรูปแบบ
สาหรับ
รูปแบบทีใ่ ช้ในพัฒนาเว็บหรืองานมัลติมเี ดีย มี
ดังตอไปนี
้
่
GIF ยอมาจาก
Graphic interchange format
่
ขนาด 8 bit สามารถมีสีไดไม
้ เกิ
่ น 256 colors
ใช้ในการบีบอัดขอมู
้ ลทาให้ไฟลมี
์ ขนาดเล็ก
ปัจจุบน
ั ใช้เพือ
่ เป็ น animation graphic โดย
การสรางรู
่ ค
ี วามตอเนื
่ นภาพ
้ ปทีม
่ ่องและให้เปลีย
ในระยะเวลาทีก
่ าหนด การสราง
gif แอนนิ
้
เมชัน
่ จะไดไฟล
ที
่ ข
ี นาดเล็ก ไมท
้
่ าให้โหลด
์ ม
นาน นิยมใช้เป็ นไอคอน หรือแบนเนอรต
่
์ างๆ
+
Understand graphic file
format
ภาพทีเ่ ก็บในคอมพิวเตอรมี
์ หลายรูปแบบ
สาหรับ
รูปแบบทีใ่ ช้ในพัฒนาเว็บหรืองานมัลติมเี ดีย มี
ดังตอไปนี
้
่
JPG ยอมาจาก
joint photographic experts
่
Group รูปแบบไฟลที
ปมี
่
์ เ่ หมาะกับรูปถายและรู
ระดับสี ตอเนื
่ ่อง นิยมใช้ในเว็บ ขนาด 24 bit
จึงรองรับสี ไดเยอะ
เมือ
่ มีการบีบอัดไฟลเพื
่ ใช้
้
์ อ
งานบนเว็บอาจทาให้สี บางส่วนไมได
่ น
้ ามาใช้
จึงทาให้เสี ยความละเอียดของรูป แตมอนิ
เตอร ์
่
หรือเครือ
่ งมือทีเ่ ปิ ดดูรป
ู ไฟล ์ jpg อาจไมสั
่ งเกต
ถึงสี ทข
ี่ าดไปเพราะความละเอียดจอภาพตาี่กวา่
+
Understand graphic file
format
ภาพทีเ่ ก็บในคอมพิวเตอรมี
์ หลายรูปแบบ
สาหรับรูปแบบทีใ่ ช้ในพัฒนาเว็บหรืองาน
มัลติมเี ดีย มีดงั ตอไปนี
้
่
PNG ยอมาจาก
Portable network
่
Graphic เป็ นเป็ นไฟลรู์ ปแบบของภาพบีบ
อัดทีไ่ ดรั
่ Graphics
้ บการคาดวาจะแทนที
่
Interchange Format (GIF) ทีม
่ ก
ี ารใช้
อยางกว
างขวางบนอิ
นเตอรเน็
่
้
์ ต ไฟล ์
PNG เหมือนกับ GIF คือบีบอัดโดย
+
Understand graphic file
format
ภาพทีเ่ ก็บในคอมพิวเตอรมี
์ หลายรูปแบบ
สาหรับรูปแบบทีใ่ ช้ในพัฒนาเว็บหรืองาน
มัลติมเี ดีย มีดงั ตอไปนี
้
่
SVG ยอมาจาก
Scalable Vector
่
Graphics (SVG) เป็ นภาษาทีป
่ ระมวลผล
ออกมาให้อยูในรู
ปของgraphic 2
่
dimensions สามารถยอขยายโดยที
ร่ ป
ู
่
ไมเสี
่ ยความละเอียด เป็ นกราฟฟิ กใน
รูปแบบ vector สรางโดยภาษา
xhtml
้
+
Understand graphic file
<html>
format
<body>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
</body>
</html>
นี่เป็ นตัวอยางไฟล
ซึง่ จะแสดงผลออกมา
่
่
์ SVG แบบงายๆ
เป็ นวงกลม โดยมีรายละเอียดตางๆ
ตาม XML data ทีเ่ รา
่
ใส่เขาไปดั
งนี้ครับ
้
1.cx, cy คือ พิกด
ั x, y ของจุดศูนยกลางของวงกลม
หาก
์
+
Choosing the right
format
ใชรูปแบบกราฟฟิ กใหถูกกับงาน
้
้
Gif - ใช้ไดกั
่ องการงานใช
้ บงานเกือบทุกแบบทีต
้
้สี
ไมเยอะมาก
และงานทีเ่ ป็ นแบบลายเส้นเรียบๆ
่
transparency เป็ นขอดี
ี่ ่ วยให้แตงเว็
ี น
ึ้
้ ทช
่ บคุณดูดข
JPG - รูปภาพทีต
่ องใช
้
้สี มากๆ เช่นภาพถาย
่
หรือรูปทีต
่ องมี
การไลสี่ หรือใช้งานสี ทซ
ี่ บ
ั ซ้อน
้
PNG - ใช้ png แทน gif ในการบีบอัดไฟลจะ
์
ให้ความละเอียดกวา่ gifแตไม
บรูปทีเ่ ป็ น
่ เหมาะกั
่
ภาพถาย
่
SVG - มีขอดี
การสนับสนุ นจาก
้ มากมายแตไม
่ ค
่ อยมี
่
+
Attribute and property
<img>
Src เป็ นattribute ทีจ
่ าเป็ นตองมี
เพือ
่ บอกทีอ
่ ยูของ
้
่
รูปซึง่ อาจเป็ น URL หรือ path file
Width ระบุความกวางของ
image in pixel
้
Height ระบุความยาวของ image in pixel
Alt โชวข
อความที
ใ่ ช้เป็ นตัวอธิบายรูปภาพ ถาผู
ใช้
้
้
้
์
ใช้งานบราวเซอรที
์ เ่ ปิ ดเป็ น text only
CSS ( style=“border:none; aligh=center”)
Border กาหนดขอบของรูป และขอบรูปทีม
่ ี
hyperlink สามารถแกให
ขอบได
้ ้ไมโชว
่
้
์
Align image การจัดวางของรูปสามารถจัดวางให้
ขอความอยู
รอบๆ
รูป
้
่
+
Aspect Ratio
ในทุกๆ tag <img> ควรกาหนด ความกวาง
้
ความยาวของรูปไวเพื
่ ให้บราวเซอรได
พน
ื้ ทีใ่ น
้ อ
้
์ ระบุ
การจองไวให
ื เป็ นขอส
้ ้กับรูปภาพ นี้ถอ
้ าคัญไมว่ ารู
่ ป
จะโหลดไดไม
่ ให้การ
้ ได
่ ้ ควรกาหนดขนาดไว้ เพือ
จัดวางของขอความ
ไมเปลี
่ นแปลงจากทีเ่ รา
้
่ ย
ออกแบบไว้ การใช้งาน Width and Height
ควรระวังในการเปลีย
่ นแปลงขนาดของรูป ไมควร
่
เปลีย
่ นขนาดของรูปโดยการกาหนด คา่ width and
height ควรใช้โปรแกรมปรับแตงรู
่ ป ิ ผลทีไ่ ดจาก
้
การเปลีย
่ นขนาดเองจะทาให้รูปบิดเบือนจากความ
เป็ นจริง
Size ทัว่ ไปนิยมใช้ในเว็บ
800 x 100 / 90 x 90 / 400 x 150 / 230 x 200 /
+
Aspect Ratio
<img> ขยายรูปกราฟฟิ ก ควรคานึกของ
ขนาดของรูป
แกไขขนาด
width หรือ height อยาง
้
่
ใดอยางหนึ
่ง หรือปรับขนาด image
่
กอน
่