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:
- Understand graphics file formats
- Choose a graphics tool
- Use the image element
- Control image properties with CSS
- Create web site color schemes
- Control color properties with CSS
- Control background images with CSS
Graphics and Color Examples
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
Activity Files
Download the Chapter Eight activity files.