The ability to freely combine graphics, text, and color into page-type layouts
is one feature that makes the Web so 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 force 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.The new support for CSS
background images lets you enhance your page layouts and brand your site.
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.Also test at a variety of connection speeds to
make sure downloading your graphics does not discourage your readers.
When you complete this chapter, you will be able to:
- Choose a graphics tool
- Use the <img> element
- Control image properties with CSS
- Understand computer color basics
- Control color properties with CSS
- Work with images and color
- Control background images with CSS
Image Examples
Figure 8-1: GIF Transparency
Figure 8-10: Manipulating Image Size with width and height attributes
Figure 8-11: Graphics Size
Figure 8-12: Hypertext Border Off
Figure 8-13: Alignment Values
Figure 8-14: Floating Images
Figure 8-18: The element border defaults to the element color
Figure 8-19: Background color and padding
Figure 8-20: An inline element with a background color
Figure 8-21: Setting the page background color
Figure 8-22: Reverse text in a heading
Figure 8-30: Background image applied to an element
Figure 8-31: Vertical repeating background image
Figure 8-33: Nonrepeating background image
Figure 8-35: A centered nonrepeating background image
Figure 8-36: Positioning a vertical repeating background image
Figure 8-37: Positioning a horizontal repeating background image
Exercise Files
- Download this zip file, which contains all of the source file for the exercise files for this chapter.
Resource Links
Top
Home
