Chapter 7 - Graphics and Color

The combination of graphics and text is what makes the Web so attractive and popular, but it also can be the undoing of many Web sites. Graphics used wisely produce an attractive and engaging Web site. The use of too many large or complex images or graphics forces users to endure long download times-and they may not wait. Find a good balance between images and text and use the image capabilities of HTML to suit your users' needs. Test your work in a variety of browsers and at a variety of connection speeds to make sure downloading your graphics does not discourage your readers.

The incorrect use of color in many Web sites creates unreadable text or navigation confusion for the user. Use color judiciously to communicate, to guide the reader, or to create branded areas of your site. Test your color choices carefully to make sure they appear properly across different browsers.

When you complete this chapter, you will be able to:

• Understand file format basics
• Understand computer color basics
• Choose a graphics tool
• Use the <img> element
• Work with hexadecimal colors

Image Examples

Single Pixel Rules

Use the width and height attributes in the <img> element to set the rule to any size you wish. Here are the six rules included in the ZIP file set to sample sizes (width x height):

    30 x 4

    300 x 5

    10 x 10

    5 x 60

    250 x 1

    200 x 10

Sample Images

If you prefer, you can download the graphics individually.

In Internet Explorer, right-click on the graphics and choose Save Picture As.

beach.jpg

cycle.gif

globe1.gif

sail.gif

trains.gif

windsurf.gif

Top