Understand Appealing Use of Color

Have you ever driven down the road and seen a house painted bright yellow with hot pink trim? Do you shudder when you think about it? Good color combinations can enhance your Web site. At best, poor use of color makes your page difficult to read and hard on the eyes. At worst, it’s like the screech of fingernails on a blackboard. It will send people away from your site in droves.

When you begin to plan your Web site, choose your colors carefully. Don’t just grab them at random as if you were taking a handful of crayons out of a box. Put some thought into your colors, keeping in mind that you should

  • Put at least as much thought into your color scheme as you do your site’s layout.

  • Compare colors side by side before you construct your page.

  • Choose soft colors rather than deep, bright, or garish shades.

  • Make your color scheme consistent throughout your site.

  • Keep in mind the possible equipment limitations of visitors to your site.

  • Never forget that visitors can set their browsers to override your designs and styles. (What will your page look like if your styles are not used?)

  • Remember that some of your visitors might suffer from color blindness. Take steps to ensure your color choices do not make your pages less accessible to them.


    A great site for information on Web color in general—and color blindness in particular—is www.visibone.com. It’s worth checking out.

Project 6: Create a Color Chart

Using color in Web pages is fun and tricky at the same time. If you will take the time to experiment with different color combinations, you can develop a way to reinforce some of the things you have learned about color and how to use it. For a challenging exercise, try creating a file named 16colors.htm and then type this code. It will create a chart of the basic color palette you began this chapter with. You’ll be using HTML to create a table to structure the color chart. If you want to learn about tables before you try this, read Chapter 8 first. Otherwise, just be careful to type the code in exactly as written in the following code listing. After you’ve finished, save your page and display it in your browser. It should resemble the following illustration:

click to expand

<html>    <head>      <title>The 16 Basic Colors</title>      <style> td {font-family: arial; font-weight:                    bold; font-size: 18pt}      </style>    </head>    <body>      <h1>The 16 Basic Colors</h1>        <!-- Table starts -->      <table border="1" width="50%" cellpadding="50">         <tr>  <!-- Row 1 --> <td bgcolor="white">White</td> <!-- TD tags define table cells --> <td bgcolor="black" style="color: white;">Black</td> <td bgcolor="gray">Gray</td> <td bgcolor="silver">Silver</td>        </tr> <!-- End of row 1 -->        <tr> <!-- Row 2 --> <td bgcolor="navy" style="color: white;">Navy</td> <td bgcolor="blue" style="color: white;">Blue</td> <td bgcolor="teal">Teal</td> <td bgcolor="aqua">Aqua</td>        </tr> <!-- End of row 2 -->        <tr> <!-- Row 3 --> <td bgcolor="lime">Lime</td> <td bgcolor="green">Green</td> <td bgcolor="olive">Olive</td> <td bgcolor="yellow">Yellow</td>        </tr> <!-- End of row 3 -->        <tr> <!-- Row 4 --> <td bgcolor="fuchsia">Fuchsia</td> <td bgcolor="red">Red</td> <td bgcolor="maroon" style"color: white;">Maroon</td> <td bgcolor="purple" style"color: white;">Purple</td>        </tr>  <!-- End of row 4 -->     </table> <!-- End of table -->    </body> </html> 

In this chapter, you have learned only a small sample of what you can do with color in your Web pages. You are limited only by your imagination and your visitors’ equipment. Keep the equipment limitation in mind, as it is one of the unfortunate (and continual) frustrations of a Web designer. Designing Web pages will bring out the artist in you, but don’t stray too far from the scientist. Test your pages to make sure they work for everyone, not just for you.

How to Do Everything with HTML & XHTML
How to Do Everything with HTML & XHTML
ISBN: 0072231297
EAN: 2147483647
Year: 2003
Pages: 126

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net