Skip to Content

Basics of Web Design
HTML5 & CSS3 First Edition


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:

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:

Sprites

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.

Chapter Updates

  • 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.

 

Book Cover

Share |