Do you like this look?

Create the back- ground

Set up the table

© Falsoft, Inc. 1997

   What we are showing you here is two different things . . . how to make backgrounds that are a little different and how to use tables to make those backgrounds appear to be something a little "more" than they are.
   We're sure everyone has seen several sites which have backgrounds of this sort. They, in effect, divide a page up into two separate areas, and then allow different kinds of text or graphics to be placed in either area. This is not a frame, although in some ways it looks like one.
   The difference is this is all one page. But before we explain how the tables work, let's talk about the background.
   In whatever application you use to create your graphics, set a new graphic (jpg or gif file) with 4-bit color depth, 964 x 13 pixels and a resolution of 75. This will give you a long, very skinny, graphic file which takes up very little space and will load quickly.
   The easiest way to do this is to use just a couple of colors with a sharp break between them. With the graphic we are using for the background to this page, we wanted a rainbow effect so the "transition" between the two areas of white – which don't have to be white, of course – is much wider than you would normally want. We'll tell you in a minute why that is so.
   For instance, here is another background. You'll see what we mean:
 

                         (We shrunk this one a little so you could see what it looks like)

   If we had used this file as the background, we would have had a blue to black to blue column on the left and a white area on the right. We could have placed text or graphics in either using the techniques we will show you later and it would have looked very interesting.
   And pretty easy to do, because the transition is sharp from one section of the screen to the other. That is not the case with the background we have here, simply because the transition is not as well defgined and you have a "dead area" where the transition is happening that you have to keep from writing over the background. Whichever type of transition you have, the setup is almost the same.
   What you do here is create two tables. The first one, which is set flush left, is for the area on the left and the second one, for the large area, goes after it. You can set there up with code like this:

           <table border=0 align=left width=70 cellpadding=0 cellspacing=0><td></td></tr>
           </table>

   And then set up a second table with code like this:

           <table border=0 width=625 cellpadding=0 cellspacing=20><td></td></tr>
           </table>

   Notice the difference between the two: Table Two has No Alignment, a Width of 625 (rather than 70) and Cell Spacing of 20 (rather than zero).
   You will have to play with the width numbers in order to get these two tables to match correctly. It is more difficult if you have a wider transition, as we do here. If the width of your two "columns" is different than those here, you will have to play with them as well to get them to come out right.
   But the sneakest thing HTML seems to do to you is that it runs out of space for a single table after a while – or, maybe what it does is run out of the amount of text which can be in a single table's cell. When whatever it is happens, the width of the second (larger cell) increases futher than the size of the screen. Boo. Hiss.
   But, as with everything else, there is a workaround. It is to increase the length of the first table and to close the second table and start a third with the same attributes as the second one immediately below. You can fill that one up.
   To increase the first table's length, just add <br> tags, one right after the other. You have to put something at the bottom of it, through, and we put our copyright notice there. You'd think we planned it that way.
   There are some interesting adaptations to this scheme, but we'll leave you to play with single-cell tables – perhaps we should call them protozoa tables since protozoa are single-cell animals – and see what you can discover for yourself. Obviously, the very ability to create interesting backgrounds like this is a good one, even if you don't want to fool with the protozoa themselves.

   Maybe we should confess. The instructions above are just what you should do if you are dealing in HTML in Hot Dog or another program in which you write directly in HTML. That is how we first did it. But since, we're working on a review of NetObjects Fusion and we've used that program to create this re-working of our web site.
   Many of the programs like Fusion and Microsoft's Front Page 97 create the HTML for you. If they do, these instructions do not necessarily apply, but the principle is the same in any event.