These days, Web designers are getting a bit more conservative with their backgrounds; the novelty has worn off, and reason and readability are beginning to prevail. So what types of backgrounds make sense?
Let's create an example of the first type, a background that will visually distinguish two different sections of information. Open Photoshop (or some other image-editing program; the directions shouldn't be very different) and create a new document 900 pixels wide by 32 pixels high. The background of the image should be white.
Now let's flip back to Netscape for a moment and grab the Netscape color table. Click on the image and hold the mouse button down (use the right button if you have a two- button PC mouse), then choose "Save this image as" from the pop-up menu. Go to Photoshop and open the image (colortable.gif). You should have both your 900x32-pixel image and the color table image open at the same time.
Next, use the eyedropper tool to pick a color from the colortable.gif file. Any color will do, but keep in mind that whatever text, link, and vlink colors you plan on using in your HTML document must be readable on both a white background and the color you are choosing now.
Fig. 1: Selecting a foreground color with the eyedropper tool
Now move to your 900x32-pixel image and double-click on the marquee tool. The options palette will appear. Choose "Fixed size" from the pull-down menu and enter 150 wide by 32 high. Now use the marquee tool to select an area 150x32 pixels by clicking in the leftmost corner of the 900x32 document's canvas. From the Edit menu, select Fill... and make sure that the options are Fill with foreground color and 100% opacity. The results should be as below (with the color you selected filling in the 150x32 area).
Fig. 2: A 150-pixel-wide area selected and filled with the foreground color
The last thing we need to do in Photoshop is index the colors of our 900x32-pixel image. Go to the Mode menu and change from RGB to Indexed Color. Photoshop should suggest 3 Exact colors. Click OK, then save your image as strip.gif.
The last step for this week is to open your text editor and start an HTML document. Title it Toolbar Example and set your <BODY BACKGROUND="strip.gif" ... > (using, of course, the correct path to wherever your image is relative to your HTML document). Set your TEXT, LINK, and VLINK colors to ones that will be readable on both a white background and the color used in your strip.gif file.
Next week I'll finish up this example by showing you how to create a toolbar that runs alongside of your regular text by using the <TABLE> construct.
