lab#9 graphic color
DESCRIPTION
TRANSCRIPT
![Page 1: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/1.jpg)
LAB#9 Graphic and Color
322432 Web Design Technology
![Page 2: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/2.jpg)
![Page 3: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/3.jpg)
GIF: Graphics Interlace File
• ภาพที่ไมตองการความคมชัดมากนัก จำนวนสีและความละเอียดของภาพไมสูงมากนัก
• ตองการพื้นแบบโปรงใส • ตองการแสดงผลแบบโครงรางกอน แลวคอยแสดงผลแบบละเอียด
• ตองการนำเสนอภาพแบบภาพเคลื่อนไหว • สวนขยายคือ .gif
![Page 4: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/4.jpg)
• ภาพที่ตองการความคมชัดสูง มีสีมาก • เหมาะสมกับการนำเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต
• สามารถกำหนดขนาดของไฟลไดตามความเหมาะสม (File Compression)
• สามารถกำหนดคุณสมบัติการแสดงผลแบบหยาบ แลวคอยๆ ละเอียดเมื่อเวลาผานไป ที่
เรียกวาคุณสมบัติ Progressive • สวนขยายของไฟลรูปแบบนี้คือ .jpg
หรือ .jpeg
JPEG: Joint Photographer's Experts Group
![Page 5: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/5.jpg)
PNG: Portable Network Graphics
• ภาพที่ตองการความคมชัดสูง • รูปแบบลาสุดในการนำเสนอภาพผานเครือขายอินเทอรเน็ต • สามารถแสดงผลไดในระบบสีเต็มพิกัด (True Color) • มีขนาดไฟลเล็ก และควบคุมคุณภาพไดตามที่ตองการ • มีการกำหนดใหพื้นภาพเปนพื้นโปรงใสได (Transparent)
• แสดงผลแบบหยาบสูละเอียด (Interlaced) • สวนขยายของไฟลรูปแบบนี้คือ .png
![Page 6: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/6.jpg)
Vector file
Vector เปนภาพประเภท Resolution Independent มีลักษณะของการสรางใหแตละ
สวนเปนอิสระตอกัน โดยแยกชิ้นสวนของภาพทั้งหมดออกเปนเสน
ตรง รูปทรงหรือสวนโคง
![Page 7: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/7.jpg)
TAG Images <img>
<img src=“url/filename.jpg" alt=”คำอธิบายรูป" width="304" height="228” title=“Show text when mouse over" align=“right” border=“3px”/>
![Page 8: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/8.jpg)
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>
![Page 9: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/9.jpg)
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
ตัวเลขยิ่งนอย ยิ่งดูโปรงใส
![Page 10: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/10.jpg)
GRAPHIC COLOR
![Page 11: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/11.jpg)
Principles of Color Using
http://www.novabizz.com/CDC/Interior/Interior_Colour03.htm
![Page 12: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/12.jpg)
1. การใชสีเอกรงค (Monochrome) หมายถึง การใชสี สีเดียว หรือการใชสีที่แสดงความเดนชัดออกมาเพียงสีเดียว แตมีการลดหลั่นกันใน
เรื่องน้ำหนักส ี
Principles of Color Using
![Page 13: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/13.jpg)
Principles of Color Using 2. การใชสีกลมกลืน (Harmony) หมายถึง การเคียงคูกันของสีตางๆ ซึ่งไปดวยกันโดยไมขัดแยง หรือตัดกัน ความกลมกลืนของสีทำไดหลายลักษณะคือ
2.1 กลมกลืนดวยคาของน้ำหนักของสีๆเดียว (Total Value Harmony) คือ
การใชสียืนเพียงสีเดียว แตมีคาหลายน้ำหนัก หรือเปนแบบเดียวกับ สีเอกรงค
อาจใชการผสมสีขาวใหน้ำหนักออนลง และผสมดำใหน้ำหนักเขมขึ้น
2.2 กลมกลืนโดยใชสีใกลเคียง (Sympel Harmony) เปนการใชสีขางเคียงกัน
ในวงจรสีซึ่งมีลักษณะสีใกลเคียงกัน เชน มวง - มวงน้ำเงิน - น้ำเงิน หรือ
เขียวเหลือง - เขียว - เขียวน้ำเงิน
![Page 14: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/14.jpg)
![Page 15: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/15.jpg)
Color Values http://www.w3schools.com/html/html_colornames.asp
P {color: rgb(0, 100%, 100%);} or P {color: rgb(0, 255, 255);}
![Page 16: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/16.jpg)
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
![Page 17: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/17.jpg)
Background
![Page 18: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/18.jpg)
คำสั่ง ปฏิบัติการที่ 9 กำหนดภาพ และเนื้อหามาให ให นักศึกษา ฝกทักษะในการใชสี และจัดภาพ ใหสวยงาม ในหนาเว็บเพจ
คะแนนเต็ม 10 คะแนน ความสวยงาม ทักษะที่เลือกใช ใหเขียนคอมเมน โคดดวย
สง อยาลืม Zip file image ที่ใชลงใน folder เดียวกันดวย
![Page 19: Lab#9 graphic color](https://reader030.vdocuments.mx/reader030/viewer/2022020105/54699a50af795909568b7532/html5/thumbnails/19.jpg)
Exam
ple