Planet Tripod: Tips & Tricks

Check out the
Homepage Dilemma

Tips & Tricks Archive
Creating Legible Pages
Making a Splash With A Splash Screen
Building Image Maps with a Macintosh
Image Map Alternatives
Using Tripod's Homepage Builder with Microsoft Internet Explorer
Page Counter Trick

8/27 Making Clean Columns
Margaret Gould Stewart
Creative Director, Tripod

Here is how to create the column layout found on pages such as Tripod's Homepage Builder. These instructions assume that you are using Photoshop; some of the steps might be slightly different with other imaging software.
First, create a new graphic that is 1600 pixels wide by 32 tall. Yes, this is really wide, but that's how wide you have to make it in order for it to work on all monitors. Fill in the whole graphic with white or whatever main background color you want. Make sure that the colors you are choosing are in the Netscape safe palette, available at:

http://www.lynda.com/hex.html

This will keep the graphic from dithering, or degrading to a splotchy mess.
Second, select the left column portion of the graphic. I usually select a piece 200 pixels wide by 32 pixels tall. Fill this with your second color.
Third, index the graphic, selecting "custom palette" as your palette option; load in the "safe" palette. Also, make sure to select "none" for dithering. Name the graphic something like "background.gif"
Now, in the HTML on your page, use this as your body tag:
<BODY BACKGROUND="background.gif">
To create the column for the text which will lay over the background, you must create a table. Please note: these will only work with some browsers, so there are some users who will see your page looking a little messy...this is a trade off which may or may not be worth it to you.
Use the following template to start out:

<HTML> <HEAD> <TITLE>Test PAGE </TITLE> </HEAD>
<BODY BACKGROUND="background.gif">
< TABLE CELLSPACING ="10">
<TR>
<TD WIDTH="190">
This is where your left column text goes.
</TD>
<TD>
Here is where your right column stuff goes.
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

You will need to play around with the <TD WIDTH="X"> to make it work with the background tile.
A good resource for learning how to tweak tables, which you'll need to do to perfect your page layouts, is:
http://home.netscape.com/assist/net_sites/tables.html
Columnar layout is not an exact science. It is very difficult to keep the columns in place correctly. But when it works, it looks pretty snazzy. Good luck!

If you have a tip that you would like to share, please e-mail it to [email protected]
Back to Planet Tripod

Map | Search | Help | Send Us Comments