Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

You can also use images in the background (see Figure 1.8). Background images are read in and tiled to fill the entire browser window. Again, the critical thing is that the background image does not intrude on the content in the foreground. Additionally, you want to design your image so that it tiles seamlessly. Being able to see the boundaries where the tiling occurs can distract users from the information you want them to see.

	You can use a background color and background image simultaneously on your pages; the color you use, however, should be the same as the dominant color in the image. The background color will be rendered immediately by the browser, and then the background image will be placed and tiled after the image is read in. This way, if a delay occurs in downloading the image, you still have a colored background that approximates the color scheme of the image. After the image has transferred, its appearance onscreen should not be too distracting because of the close match between it and the background color.

FIGURE 1.8  George Washington University’s Center for Career Education uses a page background with a “GW” monogram in the upper left.

Color Choices

HTML provides control over other page colors, too. Controlling background and body text color was mentioned in the preceding section. You can control the color of three types of hypertext links as well: unvisited, visited, and active (a link is active only for the instant that the user clicks it). Colors for all three types should be chosen so that they provide good contrast with the background color or image. Beyond that, it is a good visitor service to color visited links a different color from unvisited links because this provides a visual cue to users as to where they have been in the site.

	Hypertext link colors are a nice way to work in your company’s color scheme if you’re designing for a corporate site. Painting link colors in this way subtly promotes corporate identity throughout the site.

Iconography: Is It Intuitive?

Many designers choose to represent major sections of a site with icons, small images that are meant to convey what type of content is found in each section. Yahoo!’s main site uses icons for the navigation bar at the top of the home page (see Figure 1.9).

The critical test that icons must pass is the intuitiveness test. Because you are using a small image to communicate a possibly complicated idea, you need to make sure that users can make a quick association between the image and the idea. The best way to do this is to test the icons with potential users. Get some people together who know nothing about the site you’re designing and show them your icons. As they see each icon, ask them to write down what Web site information or functionality might be associated with it. After you have gathered their responses, share the icons with them again, this time giving the significance of each icon. Ask for their feedback on whether they think the icon truly represents what you want it to. By combining user responses from the first viewing with feedback from the second viewing, you should be able to make a good assessment of how intuitive your icons are.

FIGURE 1.9  Icons should almost immediately suggest the nature of the content they link to.

---

Using Prepackaged Graphical Themes

Just because you may not have a dedicated graphic artist to help you come up with a visual identity, you are not necessarily resigned to having a bland site. Many ready-to-use sets of images are available that you can download and use freely in your design.

Perhaps the easiest set of prepackaged themes to use comes as part of the FrontPage Editor. You can choose from one of seven themes, previewing them all in the Themes dialog box (see Figure 1.10). Each theme includes banner, background, button, bullet, horizontal rule, and navigation images, as well as specs to set up heading and body text styles.

If you do have a little graphics expertise yourself, it would be a simple matter to import any of the graphics in the theme into a capable graphics program, such as Photoshop or Paint Shop Pro, and customize them for your site. You might, for example, add your company’s name to the banner image so that it is always visible to the reader.

If you are having trouble coming up with a look and feel for your site, feel free to look at and experiment with a prepackaged theme from FrontPage or any other source. They are an easy way to put an attractive face on your site with a minimal amount of effort.

---

FIGURE 1.10  The FrontPage Editor comes with dozens of different built-in graphical themes that you can preview and use.

Desirable Site Elements

Expectation is another powerful mental process that you can harness. Anticipating and meeting users’ expectations will impress them and make it more likely that they will come back to your site.

Over time, Web users have come to rely on certain functionality being present on most Web sites. The next several sections catalog these features so that you can consider building them into the design for your site.

Tables of Contents

A site-wide table of contents lays out everything available on the site—usually as hypertext links so that users can click and go wherever they want. Depending on the size of your site, it may take some time to compile and code a comprehensive table of contents. Remember, however, that users will appreciate the quick access to all parts of your site.

	Microsoft’s FrontPage comes with a Table of Contents component that you can use to automatically generate and update a table of contents for your site (see Figure 1.11).

FIGURE 1.11  Microsoft FrontPage can automatically generate and maintain a site-wide table of contents, such as the one shown here.