Chapter 8 - Graphics and Color

The ability to freely combine graphics, text, and color into page-type layouts is one feature that makes the web attractive and popular, but it also can be the undoing of many web sites. When you combine these elements wisely, you can produce an attractive and engaging site. Conversely, the use of too many large or complex images, poor color choices, or complicated backgrounds forces users to endure long download times and wade through unreadable text and confusing navigation choices.

Find a good balance between images and text. Use CSS to control image characteristics, such as spacing and text alignment. CSS background images let you enhance page layouts and brand your site.

Use color carefully to communicate, to guide the reader, or to create branding for your site. Test your color choices carefully to make sure they appear properly across different browsers. Also, test at a variety of connection speeds, especially on mobile devices to make sure the time needed to download your graphics does not discourage your readers.

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

Graphics and Color Examples

Figure 8-1: GIF Transparency

Figure 8-8: Manipulating Image Size with Width and Height Attributes

Figure 8-9: Sample Image Sizes

Figure 8-10: Removing the Hypertext Border from an Image

Figure 8-11: Text Alignment Values

Figure 8-12: Floating Images with Text

Figure 8-22: Element Layers

Figure 8-23: Element Opacity

Activity Files

Download the Chapter Eight activity files.