Second Edition

Chapter 4 - XHTML Color and 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. Chapter Links Free Graphics Tutorial Web Standards Project Museum of Science and Industry Microsoft Sun Microsystems Learn how to create a logo and button with: Macromedia Fireworks 4 Macromedia Fireworks MX Macromedia Fireworks MX 2004 Macromedia Fireworks 8 (New!) Selecting Colors For Your Website If you are new to design, it can be s tough decision to select colors for your website. Here are some sites that can help you with the process: 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. Instant Buttons and Logo Banners Glassy Buttons CoolText Buttons ButtonGenerator ButtonMaker TomaWeb 3D TextMaker Animation Online CoolTextLogo CoolArchive ABC Banners Graphic Resources Graphic Resources Shareware Download Tucows Microsoft Design Gallery Big Nose Bird Free Stock Photos Indezine Stock Photos Free Images Big Stock Photo Photos To Go The Stock Solution SuperStock Photo Disc Fotosearch Image Map Example Image Map Code: <map name="fishing">    <area href="http://nature.org/" target="_blank"     shape="rect" coords="0,51,416,170" alt="The Nature     Conservancy" />    <area href="http://www.doorcountyvacations.com/"     target="_blank" shape="rect" coords="24, 188, 339, 283"     alt="Door County Vacations" /> </map> <p><img src="fishingboat.jpg" usemap="#fishing" border="0" alt="Door County" width="416" height="350" /></p> Image Map Software Image Slicing CoffeeCup Image Mapper Map Designer Pro Basics of Image Slicing Benefits of Image Slicing

Chapter Updates

Please make a note of the following corrections:

1. Page 124
   The first image tag in the code block has an the tag's "/>" incorreclty placed. The image tag should be:
   <img src="home.gif" alt="Home" width="200" height="50" border="0" />
2. Page 152 #2
   Save the Listings page as "listings.htm".
3. Page 152 #3
   The file name "primelistingbtn.gif" should be "primelistingsbtn.gif".
   The file name "schaumburgthumb.gif" should "schaumburgthumb.jpg".
   The file name "schaumburg.gif" should be "schaumburg.jpg".
   The file name "libertyvillethumb.gif" should be "libertyvillethumb.jpg".
   The file name "libertyville.gif" should be "libertyville.jpg".

Questions or Comments?

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