LAB#9 Graphic and Color

322432 Web Design Technology

GIF: Graphics Interlace File 

•  ภาพที่ไมตองการความคมชัดมากนัก จำนวนสีและความละเอียดของภาพไมสูงมากนัก 

•  ตองการพื้นแบบโปรงใส •  ตองการแสดงผลแบบโครงรางกอน แลวคอยแสดงผลแบบละเอียด 

•  ตองการนำเสนอภาพแบบภาพเคลื่อนไหว •  สวนขยายคือ .gif 

•  ภาพที่ตองการความคมชัดสูง มีสีมาก •  เหมาะสมกับการนำเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต 

•  สามารถกำหนดขนาดของไฟลไดตามความเหมาะสม (File Compression) 

•  สามารถกำหนดคุณสมบัติการแสดงผลแบบหยาบ แลวคอยๆ ละเอียดเมื่อเวลาผานไป ที่

เรียกวาคุณสมบัติ Progressive •  สวนขยายของไฟลรูปแบบนี้คือ .jpg

หรือ .jpeg 

JPEG: Joint Photographer's Experts Group

PNG: Portable Network Graphics 

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

•  แสดงผลแบบหยาบสูละเอียด (Interlaced) •  สวนขยายของไฟลรูปแบบนี้คือ .png 

Vector file 

Vector เปนภาพประเภท Resolution Independent มีลักษณะของการสรางใหแตละ

สวนเปนอิสระตอกัน โดยแยกชิ้นสวนของภาพทั้งหมดออกเปนเสน

ตรง รูปทรงหรือสวนโคง  

TAG Images <img> 

<img src=“url/filename.jpg" alt=”คำอธิบายรูป" width="304" height="228” title=“Show text when mouse over" align=“right” border=“3px”/> 

Image with CSS div.img { margin:2px; border:2px solid #0000FF; height:auto; width:auto; float:left; text-align:center; }

<div class="img"> <a target="_blank" href=“http://www.google.com"> <img src=“google.jpg" alt=”google image" width=”500" height=”200”></a>Add a description of the image here </div>

Opacity  

img { opacity:0.4; filter:alpha(opacity=40); ���} img:hover { opacity:1.0; filter:alpha(opacity=100); }

สำหรับ browser IE จะใช propety filter:alpha(opacity=0-100)  สวน Firefox จะใช property opacity:0.0-1.0  

ตัวเลขยิ่งนอย ยิ่งดูโปรงใส 

GRAPHIC COLOR

Principles of Color Using 

http://www.novabizz.com/CDC/Interior/Interior_Colour03.htm

1. การใชสีเอกรงค (Monochrome) หมายถึง การใชสี สีเดียว หรือการใชสีที่แสดงความเดนชัดออกมาเพียงสีเดียว แตมีการลดหลั่นกันใน

เรื่องน้ำหนักส ี

Principles of Color Using 

Principles of Color Using 2. การใชสีกลมกลืน (Harmony) หมายถึง การเคียงคูกันของสีตางๆ ซึ่งไปดวยกันโดยไมขัดแยง หรือตัดกัน ความกลมกลืนของสีทำไดหลายลักษณะคือ 

 2.1 กลมกลืนดวยคาของน้ำหนักของสีๆเดียว (Total Value Harmony) คือ

การใชสียืนเพียงสีเดียว แตมีคาหลายน้ำหนัก หรือเปนแบบเดียวกับ สีเอกรงค

อาจใชการผสมสีขาวใหน้ำหนักออนลง และผสมดำใหน้ำหนักเขมขึ้น   

 2.2 กลมกลืนโดยใชสีใกลเคียง (Sympel Harmony) เปนการใชสีขางเคียงกัน

ในวงจรสีซึ่งมีลักษณะสีใกลเคียงกัน เชน มวง - มวงน้ำเงิน - น้ำเงิน หรือ

เขียวเหลือง - เขียว - เขียวน้ำเงิน  

Color Values http://www.w3schools.com/html/html_colornames.asp

P {color: rgb(0, 100%, 100%);} or P {color: rgb(0, 255, 255);} 

Link Colors 

a:link {color: #000000;}  a:active {color:red;} /* active links are red */ a:visited {color:rgb(0,255,0);} 

body {background-color:grey; } 

Background Colors 

Background 

คำสั่ง  ปฏิบัติการที่ 9 กำหนดภาพ และเนื้อหามาให ให นักศึกษา  ฝกทักษะในการใชสี และจัดภาพ ใหสวยงาม ในหนาเว็บเพจ  

คะแนนเต็ม 10 คะแนน ความสวยงาม ทักษะที่เลือกใช ใหเขียนคอมเมน โคดดวย  

 

สง อยาลืม Zip file image ที่ใชลงใน folder เดียวกันดวย  

Exam

ple