lab#9 graphic and color
DESCRIPTION
Graphic and Color graphic tools for designing web page,TRANSCRIPT
![Page 1: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/1.jpg)
LAB#9 Graphics and Color 322432 Web Design Technology
Department of Computer Science, Faculty of Science Khon Kean University By Yaowaluck Promdee, Sumonta Kasemvilas
![Page 2: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/2.jpg)
Image file type use on website
GIF
JPEG
PNG
Graphics Interchange Format
Joint Photographic Experts Group
Portable Network Graphics
![Page 3: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/3.jpg)
GIF
GIF (Graphics Interchange Format) was developed by CompuServe and uses the LZW (Lempel-Ziv-Welch)
![Page 4: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/4.jpg)
JPEG
JPEG was developed by the Joint Photographic Experts Group.
![Page 5: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/5.jpg)
PNG
PNG (Portable Network Graphics) was created to essentially replace, or at least improve upon the GIF format.
![Page 6: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/6.jpg)
SVG "Scalable Vector Graphics" is a format that never quite caught on as a widely used image type.
![Page 7: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/7.jpg)
Images <img>
<img src=“URL/filename.jpg” alt=“Caption image” width=“300px” height=“400px” title=“Show text when mouse over” align=“right” border=“10px”/>
![Page 8: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/8.jpg)
Images 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 logo” </a> Add a description of the image here </div>
![Page 9: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/9.jpg)
Images with CSS
Opacity is transparency img { opacity: 0.4; filter: alpha(opacity=40);} img:hover { opacity: 1.0; filter: alpha(opacity=100);}
IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent. IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.
![Page 10: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/10.jpg)
Graphic Color Principles of Color Using
![Page 11: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/11.jpg)
Principles of Color Using
![Page 12: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/12.jpg)
![Page 13: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/13.jpg)
Example Website Designs with Great Color Schemes
http://www.secretkey.it/
![Page 14: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/14.jpg)
Example Website Designs with Great Color Schemes
https://softwaremill.com/ http://nasaprospect.com/
![Page 15: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/15.jpg)
Tools for choosing a color scheme
http://mudcu.be/sphere/source/
1.
![Page 16: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/16.jpg)
Tools for choosing a color scheme
http://labs.tineye.com/multicolr/
2.
![Page 17: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/17.jpg)
Tools for choosing a color scheme
3.
http://paletton.com
![Page 18: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/18.jpg)
Color Value www.w3schools.com
![Page 19: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/19.jpg)
Link Colors
a:link { background-color: grey; } a:visited { background-color: #FFFFF; } a:hover { background-color: rgb(0,255,0); } a:active { background-color: #00F; }
![Page 20: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/20.jpg)
Background Value Description background-color Specifies the background color to be used
background-position Specifies the position of the background images
background-size Specifies the size of the background images
background-repeat Specifies how to repeat the background images
background-origin Specifies the positioning area of the background images
background-clip Specifies the painting area of the background images
background-attachment Specifies whether the background images are fixed or scrolls with the rest of the page
background-image Specifies ONE or MORE background images to be used
http://www.w3schools.com/css/css_background.asp
![Page 21: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/21.jpg)
Assignment#9 Design your Project “Faculty of Science” - Home Page Layout Design - Color Theme - Site Map
![Page 22: Lab#9 graphic and color](https://reader033.vdocument.in/reader033/viewer/2022052906/558d45a9d8b42a45318b470c/html5/thumbnails/22.jpg)
Example Assignment#9
Site Map