Chapter 6 – Web Graphics Styling Basics
A key component of a compelling website is the use of interesting and appropriate graphics. This chapter introduces you to working with visual elements on web pages. When you include images on your website, it is important to remember that not all web users are able to view them. Some users may have vision problems and need assistive technology such as a screen reader application that reads the web page to them. In addition, search engines send out spiders and robots to walk the web and catalog pages for their indexes and databases; such programs do not access your images. Some of your visitors may be using a mobile device that may not display your images. As a web designer, strive to create pages that are enhanced by graphical elements but that are usable without them.
Free Graphics Tutorials
Often students need a logo banner or a button for their first web site project but have not taken any graphics courses yet. You can learn how to create a logo and button with the free tutorials below:
- Adobe Fireworks CS3
- Adobe Photoshop CS3
- Adobe Fireworks CS4
- Adobe Photoshop CS4
- Adobe Fireworks CS5
- Adobe Photoshop CS5
Free Image Editors
Free online image editor applications:
Free image editor applications to download:
Free Online Image Optimization Tools:
Round the corners of rectangular images:
Create an icon from your image:
A sprite is an image file that contains multiple small graphics that are configured as background images for various web page elements using the CSS background-image, background-repeat, and background-position properties. The single image saves download time because the browser only needs to make one http request for the combined image instead of many requests for the individual smaller images. Check out the following resources for more informaiton on sprites:
WebP —A New Image Format
Google Labs has developed a new image format for the Web called WebP (pronouced "weppy") that improves compression on photographic images. Currently it's supported by Google's Chrome browser.
- Page 126 - Third sentence on the page:
Remove the word "is" from the sentence.
- Page 127 - Second to the last sentence on the page:
The word "varible" should be "variable".
- Page 137, Table 6.3, background-position row, Value column:
Remove the comma in the code sample. The correct code is:
background-position: right bottom;
- Page 137, Table 6.3, background-size row, Value column:
Please note that the second value is height, not length.
- Page 141 - In #3, the value for the background-position property should be
"right bottom" instead of "bottom right".
- Pacific Trails Resort Case Study
Page 148: Remove the following phrase from the first sentence:
"and (optionally) multimedia".
Page 148: The last line in Step 1 should be:
"ch6pacific folder: coast.jpg, favion.ico, sunset.jpg, trail.jpg, and yurt.jpg."
Page 149: The fifth sentence in Step 5 should be:
"Delete the description list."
Questions or Comments
The author would like to hear from you!
Feel free to complete the contact form with your questions or comments.
Play a review game to check your understanding.
Find free to use photos on Flickr.com — select the advanced search page and check Only search within Creative Commons-licensed content. Be sure to follow the instructions for attribution when indicated.
- Free Digital Photos
- Public Domain Photos
- Free Stock Photography — stock:xchng
- Guide to using Flickr Images
- Microsoft Design Gallery
- Free Stock Photos
- Indezine Stock Photos
- The Stock Solution
- Free Images
- Big Stock Photo
- Photos To Go
- FamFamFam—free icons
- 30 Free Icons
- Default Icon