Chapter 4 - XHTML Color & Visual Elements

A key component of a compelling web site is the use of interesting and appropriate graphics. This chapter will introduce you to working with color and graphical elements on web pages.

Topics discussed include: using color on web pages, creating horizontal lines, the different types of graphics, sources of graphics, and guidelines for using graphics on web pages.

Textbook Links

• Jakob Nielsen on Usability & Web Design
• Use Visicheck to simulate colorblind vision
• Web Standards Project
• CoffeeCup Image Mapper
• Map Designer Pro

Free Graphics Tutorial

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:

• Adobe Macromedia Fireworks MX 2004
• Adobe Macromedia Fireworks 8
• Adobe Fireworks CS3 (New!)
• Adobe Photoshop CS3 (New!)

Selecting Colors for Your Web Sites

If you are new to design, it can be a tough decision to select colors for your website. Here are some sites that can help you with the process:

• The Color Wizard offers a variety of ways to choose and compare a variety of color schemes related to a chosen starting color.
• Eric Meyer's Color Blender is very useful when you want to create site with a monochromatic color scheme.
  
• Sometimes designers choose colors based on a photograph. Visit colr.org to select a image from the Web and choose colors from from the image for use in your site.
  
• WellStyled.com offers a handy color scheme generator that will create a variety of color schemes including monochromatic, contratsing, triad, tetrad, and analogic.
  
• If you need some logo-building inspiration, Graphic Design Journal offers this look at trendy logo designs of 2005 and a report on logo trends of 2006.
• Hypergurl.com offers a color scheme generator that shows a quick preview of text and background colors.
• The color selector at Colors4WebMasters offers point and click color choosing options, immediately shows you the results, and generates CSS to configure the colors.
• Use the RGB sliders to choose a color and Lee Street Management's QuickColor Flash animation will display a selection of coordinating colors.
• Color Wheel Pro - a program that allows you to see color theory in action: you can create harmonious color schemes and preview them on real-world examples.
• Bruce Clay offers an overview of using color in web design focusing on the the hidden meanings of color, branding, and the power of color.

Instant Buttons and Logo Banners

Graphic Resources

Free Image Editors

You may enjoy experimentingt with a free image editor -- try Picnik.com or Google's Picasa.

Image Map Example

Image Slicing

• Basics of Image Slicing
• Benefits of Image Slicing
• An alternative to Image Slicing -- CSS Sprites

Chapter Updates

Chapter Materials:
Page 135 -- The title of Table 4.3 should be "Attributes of the <img /> Tag".

Page 135 -- The align attribute value of "center" is not valid according to the W3C XHTML DTD and will not pass vaildation. If you need to center an image and are not yet using CSS, consider wrapping the image in a centered div or paragraph. (Note: errata also applies to page 628.)

JavaJam Case Study:
Page 162 -- last bullet point for #4. The table should have a width of "90%" instead of "9090".

Fish Creek Case Study:
Page 163 -- The caption for Figure 4.35 should be "Fish Creek askvet.htm".

Pete the Painter Case Study:
Page 168 -- In #3 the ending ">" is missing from the closing table tag. The closing table tag should be configured: </table>

Prime Properties Case Study:
Page 173 -- A ")" should be added after ("Schaumburg Colonial" and "Libertyville Condo".

Questions or Comments?

The author would like to hear from you!
Send an e-mail to webdevfoundations@hotmail.com