Chapter 20

Backgrounds, Image Maps, and Creative Layouts

by Dick Oliver

CONTENTS

This chapter demonstrates how creative use of backgrounds, image maps, and layouts can ensure that Web surfers don't need to reach for the coffee while exploring your site. It helps you pull together all the tools and techniques covered in this book to create a cohesive and attractive Web site.

Making Seamless Background Tiles

If eye-catching is what you're after, what better way to start than by catching an eye? Figure 20.1 is my two-year-old daughter's left eye, scanned with a cheap hand-scanner from a snapshot and color-corrected a bit in Paint Shop Pro. (See Chapter 17, "Working with JPEG and gif Images," for help with doing that.)

Figure 20.1 : The edges of this scanned photo don't fit together very well when tiled as a background.

Seamless Backgrounds by Hand

The eye is pretty effective as an attention-getting background-but wouldn't it be slick if the tiles all fit together seamlessly? Since you might not know how to turn this image into a seamless background tile, I'll explain it step-by-step. You can follow these steps to turn almost any interesting pattern or image into a repeating tile.

Note
The following 11 steps do essentially the same thing as Paint Shop Pro's one-click Image | Special Effects | Create Seamless Pattern command. After I show you how to do it "the hard way," I'll show you the easy way. I'll also explain why this particular image (and many others) comes out much better if you don't use the Create Seamless Pattern command.

The following instructions are specifically for Paint Shop Pro, but you can do the same thing in any good graphics-editing program.

  1. Open graphics file you want to start with, and resize or crop it to suit the layout you have in mind. In this case, I chose a size that would tile nicely in a 640 x 480, 800 x 600, or 1024 x 768 window without the eye being cut in half on the right edge. (The image is 255 x 161 pixels.)
  2. Select Image | Enlarge Canvas and double both the vertical and horizontal size of the canvas to leave room for arranging four copies of the image next to one another.
  3. Using the rectangle selection tool, select the original image (in this case, the rectangle from 0,0 to 254,160). Paint Shop Pro displays the current location of the cursor at the bottom of the screen to help you get exactly the region you want.
  4. Using the move selection tool (the one with two people in dotted boxes on the toolbar), move a copy of the selection down, as shown in Figure 20.2.
  5. Using the smudge brush and/or the copy brush, smooth the edge between the two copies of the image.
    Figure 20.2 : To make a seamless tile, start by copying the image and smoothing the top and bottom edges together.
  6. Select the top part of the bottom image (here, the rectangle from 162,0 to about 350,255), and move it up to replace the top part of the top image. Now the top image will tile seamlessly in the vertical direction.
  7. Repeat steps 3 through 6 for the horizontal direction: Move a copy of the top image to the right, smooth the edge between them, and copy the leftmost half back onto the original image. (See Figure 20.3.)
    Figure 20.3 : Smooth the left and right edges together, being careful not to change the corners too much.
  8. There may still be some abrupt color changes at the image's corners. To check for and correct these, copy the upper-left image down into the empty region at the lower right. Use the smudge or copy brushes to smooth the corner at the center of the four images, then copy that corner carefully back up into the upper left.
  9. Copy the upper-left image into the clipboard, paste it into a new image file, and save it in the JPEG or gif format.
  10. Create a quick test document like this:
    <HTML><BODY BACKGROUND="myimage.jpg"></BODY></HTML>
    Then open it in your Web browser, as shown in Figure 20.4.Note that most JPEG files show barely visible seams between tiles-even if you followed these steps perfectly-because the exact color information is distorted slightly during compression. Most people won't even notice this subtle effect once the tile is on your page, but if it bothers you, use a gif image for tiling instead.
    Figure 20.4 : JPEG images usually have barely visible "cracks" between tiles due to the lossy compression algorithm.
  11. Once you see the tile in your browser, you might see a few spots that need touching up in Paint Shop Pro before you pronounce your work a success.

You can use essentially the same process of copying and shuffling pieces of an image to draw your own seamless tiles from scratch or add artwork to existing tiles. Figure 20.5 is a simple example, created by painting a colored stripe onto the image and its copies, then tweaking it as described here. Figure 20.6 shows the result in Netscape.

Figure 20.5 : When you get the hang of tiling, you can add any number of artistic effects to your backgrounds.

Figure 20.6 : The modified tile in Figure 20.5, as seen in Netscape Navigator.

Dramatic accents like this can make the subtle seams between JPEG tiles less noticeable, too.

Seamless Backgrounds Automatically

If you made it through all the preceding steps for creating a background tile by hand, you're probably eager for the "easier way" I promised to explain. Paint Shop Pro actually has a special command for creating seamless background tiles; you can simply select a rectangular region of any full-color image and Image | Special Effects | Create Seamless Pattern does all the hard work for you.

The left image in Figure 20.7 is a modified photo of a taro plant, and the two smaller images to its right are tiles taken from the same rectangular region of the taro leaf. They may look the same in Figure 20.7, but Figures 20.8 and 20.9 reveal the difference. One was simply cropped out of the larger image (Figure 20.8) and doesn't make a very good background tile, but the other was done with the Create Seamless Pattern command (Figure 20.9) and tiles much more smoothly. With some color adjustment, it would make a lovely background for a Web page.

Figure 20.7 : The upper-right image was cut out of the larger image on the left. The lower-right image was created with Paint Shop Pro's Create Seamless Pattern command.

Figure 20.8 : The upper-right image from Figure 20.7 doesn't make a very effective background tile because the edges are too abrupt.

Figure 20.9 : The lower-right image from Figure 20.7 makes a better tile because its edges match up more smoothly.

Tip
Watch for ugly "banding" that can show up in the background if the tile pattern is too distinctive (such as the same light patch repeating over and over so that it paints a light stripe down the side of the page). Unless the background is theme-related, subtlety should be the key.

Unfortunately, the range of background images that Create Seamless Pattern works well with is fairly limited. For it to work at all, you must have an image at least twice as large as the background tile you want to create, and the area to make into a tile must be far enough from the edges of the original image so that Paint Shop Pro can use the area around the selection to do its magic.

For the background tile to actually look good, the requirements of your original image are much more stringent. It must be a photo or full-color artwork with gradual changes in color and fairly low contrast. A scanned image of gravel or grass would work well, for example. The image of the eye presented earlier in this chapter, however, would get a bit mangled when the surrounding face was "faded" into it by the Create Seamless Pattern command. When the background you have in mind has a high-contrast, recognizable image or pattern, you almost always have more success with the labor-intensive manual techniques discussed previously.

Hand-drawn Backgrounds

Figures 20.10 and 20.11 show two seamless backgrounds that the Create Seamless Pattern command wouldn't have been any help in creating. However, these were still quite easy to construct with Paint Shop Pro's other tools.

Figure 20.10: You don't have to be van Gogh to draw an interesting and effective background tile.

To make the chain-link fence in Figure 20.10, I used the line and fill tools to make two crossed bars, then touched up the elbow with the paintbrush tool. I then cut and pasted four copies of the link around the original and carefully cropped the image so that all four corners fell exactly on the center of the elbow. All this took a few minutes and some concentrated squinting at the screen, but a bachelor's in fine arts certainly wasn't required (good thing, too-I majored in engineering).

Despite the artsy theme of Figure 20.11, it took almost no artistic skill to draw the canvas background (and not much more skill to draw the other elements on the page, for that matter). I simply picked an ivory color and painted a square with Paint Shop Pro's Paper Texture setting on the brush tool stylebar set to Canvas. And voila! Canvas!

Figure 20.11: Paint Shop Pro offers several canvas paper textures built into the brush tool, so making a classy page like this is amazingly easy.

You can quickly make any of the other paper textures listed in the brush tool stylebar the same way. You can also make some attractive papers with the Image | Special Filters | Add Noise command, especially when combined with the Blur or Erode filters and Colorize command. Play around with the powerful tools Paint Shop Pro offers, and you'll be surprised how easy it is to get some delightful results.

Note
As you might have guessed, the pages shown in Figures 20.10 and 20.11 are from the CD-ROMs accompanying two of my recent books, Netscape 3 Unleashed from Sams.net Publishing and Creating Your Own Web Graphics from Que Publishing. Both of these books are (in my humble opinion) excellent resources for anyone who wants more in-depth coverage of Netscape Navigator and/or Web page graphics than this book provides.

Translucent Images

When you're using not-so-subtle background tiles, it would be rather counterproductive to cover them up with a big foreground image. Of course, it would be even more counterproductive not to have big foreground images announcing the content of your eye-popping site. An interesting compromise that has many applications is to create translucent foreground images and allow the background to show through to varying degrees. You can get this uncommon effect quite neatly by dithering a color or grayscale image down to two colors, as shown in Figure 20.12.

Figure 20.12: Ordered dither gives a regular pattern, but error diffusion adds a degree of randomness.

Paint Shop Pro (like most other graphics programs) gives you several dithering options. Ordered dither places pixels in a regular pattern, and three types of error diffusion offer subtle differences in how they randomly place pixels. Try them all, and you'll see the difference much more clearly than I could ever explain.

Figure 20.13 shows the two variations on the image in Figure 20.12, each dithered with the Floyd-Steinberg error diffusion method down to two colors and saved as transparent gifs. The difference between the left and right images is that the left one was lighter shades of gray before being dithered, so the pattern is more sparse and allows more of the background to show through.

Figure 20.13: Translucent, colored images show up clearly but also let the background show through.

If the figure was in color, you'd also see that, after I dithered each image down to two colors, I increased the color depth up to 16 colors and edited the palette entry of the black color to be light blue (in the left image) or red (in the right image). The net effect is a colored, translucent image that clearly shows both the LOOK logo and the background beneath it. You could also use the color replacement tool in Paint Shop Pro's Paint palette to make multicolored translucent images easily.

As mentioned in Chapter 16, "Bigger, Faster, Better Graphics," the complexity of error diffusion dithering can significantly increase file sizes. However, reducing the color depth tends to decrease file sizes, so all in all, translucent images don't usually get too big. The examples in Figure 20.13 are only about 5 K each, even though they're quite large (320¥200 pixels).

Do-It-Yourself Image Mapping

If you've ever put a page up on the Web, you know how to make an image link to another document, but if you haven't, it looks like this:

<A HREF="whatever.htm"><IMG SRC="myimage.gif"></A>.)
You can also subdivide an image into regions and link to different documents, depending on which region the user clicks. This is called an image map, and any image can be made into an image map.

Netscape Navigator and Microsoft Explorer both allow you to choose between two different methods for creating image maps: server-side image maps and client-side image maps. Nowadays, all your image maps should be client-side because you can easily make them automatically work the old server-side way for users of older browser programs. I'll explain both kinds in the following sections, but first a tip that will help you with either of them…

Tip
To make any type of image map, you need to figure out the numeric pixel coordinates of the regions you want to become "hot spots" in an image. An easy way to do this is to open the image with Paint Shop Pro and watch the coordinates at the bottom of the screen as you use the rectangle selection tool to select a rectangular region of the image. (See Figure 20.14.) When the mouse button is down, the coordinates at the bottom of the screen show both the upper-left and lower-right corners of the rectangle, instead of just a single X,Y position, as shown here.
There are also some fancy freeware programs that let you highlight a rectangle with your mouse and automatically spew out image map coordinates into a file, but I personally find them much more cumbersome to use.

Figure 20.14: Paint Shop Pro can easily tell you the coordinates for image map regions without mucking around with special image-mapping utilities.

Server-Side Image Maps

The old-fashioned way to do an image map is to let the server computer where the Web page resides do all the work. When the user clicks an image that has been mapped this way, the browser program just sends the X,Y coordinates of the mouse pointer's location to a special script on the server. Usually, this script is called image map and is located in the cgi-bin directory on the server; the HTML to create the image map is just a normal anchor link:

<A HREF="/cgi-bin/imagemap/thisthat"><IMG SRC="thisthat.gif"></A>
Simple-but when you install a Web page including such a link, you need to tell the image map script which parts of the image should be associated with which link addresses. This is normally done in a map file. Each line in the map file is simply the word rect followed by a URL address and two sets of X,Y coordinates representing the upper-left and lower-right corners of a region of the image. The first line in a map file begins with the word default, followed by the URL address that should be used if the user happens to click outside any rectangular region defined by a rect line. A map file named thisthat.map might look like this: 

default /top/this.htm

rect /top/this.htm 0,0,102,99
rect /top/that.htm 103,0,205,99
The final step in setting up a server-side image map is telling the image map script which map file to use for which image by adding a line to a system file named imagemap.conf. This file will already exist and includes entries for every image map defined on the server. You simply add a line with the name used in the HREF attribute of the <A> tag, a colon, and then the actual location and name of the associated map file. For example, the previous reference is HREF="/cgi-bin/imagemap/thisthat", and the preceding map file is named thisthat.map. If this map file was in a directory named /mapfiles, then the line in imagemap.conf would look like this:
thisthat : /mapfiles/thisthat.map
All this isn't nearly as difficult as it might sound if you've never set up an image map before, but it can be a hassle-especially if your pages reside on somebody else's server, and you don't have the rights to modify system files like imagemap.conf yourself. What's worse, server-side image maps don't work at all on Web pages located on your hard drive, a CD-ROM, or most local networks.

There are also some variations in the exact syntax for image map implementation, depending on the software installed on your server. If you move your pages to a different server, the image maps may not work anymore. Yuck. Fortunately, there's now an easier and more reliable way to set up image maps.

Client-Side Image Maps

The latest versions of all the major browsers support client-side image maps, where associating links with specific regions in an image is handled by the browser itself instead of a server script. This means you can include image maps in your HTML files without imposing an additional burden on your Internet Service Provider's server, and you can be more certain they will be processed correctly and dependably. The HTML to create a client-side image map looks like Listing 20.1.

Listing 20.1. HTML for a client-side image map.
 

<MAP NAME="thisthat">

<AREA SHAPE="RECT" COORDS="0,0,102,99" HREF="this.htm">

<AREA SHAPE="RECT" COORDS="103,0,205,99" HREF="that.htm">

</MAP>



<-- any amount of HTML could go here -->



<IMG SRC="thisthat.gif" USEMAP="#thisthat">

Tip
Remember that links don't necessarily have to lead to HTML documents. You could make an image map link to sound files, video clips, or any other media that you know the user has a plug-in or helper application to handle.

You'll find several sample client-side image maps in the look.htm document on the Web Publishing Unleashed CD-ROM. In that document (and the preceding example), the <MAP> and <AREA> tags were located in the same file as the <IMG> tag. It's also possible to put the map definition in a separate file by including that file's name in the USEMAP attribute, like this:

<IMG SRC="/thisthat.gif" USEMAP="maps.htm#thisthat">

Combined Client/Server Image Maps

You can also supply client-side image maps that automatically switch to server-side image maps if the user's browser doesn't support client-side maps. With a single line of code, you can allow an image map to be interpreted either by the end user's software or by the server by including the ISMAP attribute in the <IMG> tag, and then including both a USEMAP= attribute and cgi-bin/imagemap reference: 


<A HREF="/cgi-bin/imagemap/thisthat">

<IMG SRC="thisthat.gif" USEMAP="#thisthat" ISMAP>
</A>
Here, as with any unrecognized tag, browsers that don't support client-side image maps simply ignore the <USEMAP> and <ISMAP> tags and treat the preceding code like an old-fashioned server-side image map.

Tip
You might want to include an HREF anchor link with client-side image maps, even if you don't implement server-side image maps at all. For example, the following would bring up the document nomaps.htm when clicked from a browser that didn't support client-side image maps:
<A HREF="nomaps.htm"><IMG SRC="thisthat.gif" USEMAP="#thisthat"></A>
The nomaps.htm document might include a text list of choices equivalent to the various regions in the image or simply an error message telling users that their browser doesn't support client-side image maps.

Using Tables to Lay Out Graphics

Tables are your most powerful tool for creative Web page layouts. The boring, conventional way to use tables is for tabular arrangements of text and numbers. However, the real fun begins when you make your table borders invisible and use them as guides for arranging graphics and columns of text any which way you please.

Tip
Tables were once visible only to users of Netscape Navigator, but now that the current version of Microsoft Internet Explorer (and the next version of every other major browser) supports tables, you can use tables without fearing they will turn into a mish-mash of text before the eyes of non-Netscapers.

Laying It Out on the Table

In Figure 20.15, I've arranged some scanned handwriting with type of different sizes and colors into a table. I left the borders visible so I could make sure everything was placed the way I wanted; however, before putting this on a Web page, I would use the TABLE BORDER=0 command to make the lines invisible. Listing 20.2 shows the HTML to make the table in Figure 20.15.

Figure 20.15: Tables can include text, graphics, or a combination of both.

Listing 20.2. Making a table for text and graphics.
 

<TABLE BORDER=2>

<TR VALIGN="middle" COLSPAN=2>

  <TD ALIGN="center" WIDTH=200 COLSPAN=2>

     <FONT SIZE=6 COLOR="blue">Ain't</FONT></TD>

  <TD ALIGN="center" WIDTH=200 COLSPAN=2>

     <IMG SRC="space100.gif"></TD>

</TR>

<TR VALIGN="middle">

  <TD ALIGN="left" WIDTH=200 COLSPAN=2>

     <IMG SRC="thisthat.gif" USEMAP="#thisthat" BORDER=0></TD>

  <TD ALIGN="center" WIDTH=200 COLSPAN=2>

     <FONT SIZE=6 COLOR="yellow"><I><B>nobody</B></I></FONT></TD>

</TR>

<TR VALIGN="middle">

  <TD ALIGN="center" WIDTH=100>

     <FONT SIZE=6 COLOR="fuchsia">gonna</FONT></TD>

  <TD ALIGN="center" WIDTH=100>

     <FONT SIZE=5 COLOR="green"><B>TELL</B></FONT></TD>

  <TD ALIGN="center" WIDTH=100>

     <IMG SRC="inout.gif" USEMAP="#inout" BORDER=0></TD>

  <TD ALIGN="center" WIDTH=100>

     <FONT SIZE=7 COLOR="teal"><B>YOU</B></FONT></TD>

</TR>

<TR VALIGN="middle">

  <TD ALIGN="center" WIDTH=100>

     <IMG SRC="updown.gif" USEMAP="#updown" BORDER=0></TD>

  <TD ALIGN="center" WIDTH=100>

     <FONT SIZE=6 COLOR="purple">where</FONT></TD>

  <TD ALIGN="center" WIDTH=100>

     <FONT SIZE=7 COLOR="gray">to</FONT></TD>

  <TD ALIGN="center" WIDTH=100>

     <IMG SRC="look2.gif"></TD>

</TR>

</TABLE>

In case you're not familiar with the HTML syntax for tables, here's a quick run-down of how all the code works. The <TABLE> and </TABLE> tags always start and end a table, and the BORDER attribute sets the border width.

A <TR> and </TR> tag enclose each row in a table and accept the VALIGN attribute, which controls whether the contents of the row are vertically aligned to the center, top, or bottom. You could also use HEIGHT to set an exact height for the row in pixels, but in this example, I just let the browser automatically figure out the right height based on the tallest item in the row.

Each cell in the table starts with <TD> and ends with </TD>. The ALIGN attribute sets the horizontal alignment within the cell to either center, left, or right. I used WIDTH to set the cell widths to exactly 200 or 100 pixels, and COLSPAN to indicate that each cell in the top two rows should span two columns.

That's all there is to it! I did use a few sneaky tricks: a totally transparent 100¥100-pixel image called space100.gif to fill an empty cell and an image too big to fit in its cell (more on that shortly).

Nested Tables

Now suppose you wanted to add a column of text to the page, placed to the right of the table in Figure 20.15. No current extension to HTML allows you to wrap text to the right (or left) of a table-but that doesn't mean there isn't a way to do it! You can create another table, like the one shown in Figure 20.16 and insert the table in Figure 20.15 into a cell in that new table.

Figure 20.16: To wrap text to the right or left of a table, create another table and insert the first one inside it.

The code to create a nested table with the arrangement shown in Figure 20.17 would look like Listing 20.3.

Figure 20.17: Putting a table where it won't quite fit within another table can create an overlapping postmodern effect in Netscape Navigator.

Listing 20.3. Creating nested tables.
 

<TABLE BORDER=4>

<TR VALIGN="middle">

<TD WIDTH=400>

(the table in Figure 20.15 goes here)

</TD>

<TD WIDTH=160>

<IMG SRC="look1.gif" ALIGN="bottom">

<FONT SIZE=5><TT><B>is the site of the '90s.

It's the site of today, and tomorrow, and maybe even the next day.

It's <I>your</I> site.<P>

<IMG SRC="look1.gif">.<BR> You gotta<BR> <I>like</I> it.</B></TT><P>

</TD>

</TR>

</TABLE>

Figure 20.17 shows the two tables from Figures 20.15 and 20.16 put together. It also demonstrates a useful "bug" that you can use on purpose to create a sort of "grunge" layout effect. By putting a table in a space that's just a little too small to hold it, you can make text or images from one cell overlap into another. (Although both the table and the space to put it in are 400 pixels wide, the borders make it just a tad too big to fit.) Unfortunately (or fortunately, depending on whether you did it on purpose or by accident), this trick fools only Netscape Navigator. Microsoft Internet Explorer will automatically resize all cells to fit properly, as shown in Figure 20.18.

Figure 20.18: Microsoft Internet Explorer is a little more fussy than Netscape Navigator and adjusts the size of all cell to hold any oversized content.

As an added touch, notice that I inserted yet another graphic to the right of the nested table in Figures 20.17 and 20.18 by placing the following tag before the table code:

<IMG SRC="other.gif" ALIGN="right" BORDER=0>
The image appears on the far righthand margin and all graphics, text, or tables that follow are automatically placed to the left of it.

The finished LOOK page, complete with borderless table layouts, is shown in Figure 20.19. However, if you look at this page on the CD-ROM (it's examples/look/look.htm), you'll see more than a figure in a book could show! The logo at the top of the page is animated in flashing colors, and each of the handwritten images is a clickable image map.

Figure 20.19: When the borders of the tables are hidden and a wild background is added, the result is an unquestionably unique look!

Note
Chapter 19, "Animating Graphical Images," reveals how the animated gif images were produced. Creating and using clickable image maps was explained earlier in this chapter in the section "Do-It-Yourself Image Maps."

Tip
Note that Microsoft Internet Explorer 3.0 and Netscape Navigator 3.0 now allow you to specify a separate background for each cell in a table by placing the BGCOLOR= or BACKGROUND= attributes in a <TR> or <TD> tag, just as you would use these attributes in the <BODY> tag. Refer to Chapter 6 "Effective Use of Tables," for more details and examples.

Microsoft Internet Explorer 3.0 and Netscape Navigator 2.0 (or later) support frames, which are similar to tables except that each frame contains a separate HTML page and can be updated independently of the others. Refer to Chapter 7 "Creating and Enhancing Web Pages with Frames," for more information.

Tips and Tricks for Creative Design

This chapter-and the previous four chapters-have given you a wide range of techniques for creating Web page graphics and examples of Web pages specifically created as examples. Your task is to adapt those techniques to make your pages unique in a totally different direction. To help you take that leap, here are a few final pointers for designing and laying out your pages:

Summary

Seamless backgrounds give your pages that extra professional touch. Image maps allow you creative freedom in helping users navigate through your site. When these and other creative design techniques are combined, your pages become both more attractive and more intuitive for visitors to explore.

In this chapter and the previous four chapters, you've seen how to design, create, and arrange highly expressive graphics. Part V, "Extending Your Site with Multimedia," takes you beyond graphics into the world of sound, video, and interactive media.