After a couple of false starts, I began to approach the building of my site in a systematic fashion.

Page Types

The first thing is to understand what kind of pages you want to present. To me, that means deciding what types of content you want to publish. In my case, I want to present are indexes (table of contents), blog-type articles, stand-alone articles, photo galleries, and articles with photos. The non-profit I'm working with wants to also publish press releases, class schedules and a directions map.

After looking over the list, I concluded that everything but the photo galleries would fit into one structure.

Page Layout

The layout of web pages is a matter of arranging a group of rectangular boxes. In its simplest form, a web page is one big text box. Using tables is the way to break a simple page into definable boxes, or cells.

My basic structure is a modified 3-column layout.

At the top are two banner cells that span across the top of three columns. The first one of these is for the site masthead or logo. The second one can be  for a horizontal menu bar,  a sub-section header, or, in my case, as a spacer between the site logo and the rest of the page.

The center column is for the body of the content of the page. The left column is for the site navigation menu, and the right column is for page- or section-specific links or for sidebar comments.

At the bottom is one more spanning cell for copyright information and, possibly, another site navigation menu.

The center column is further segmented into cells. The top cell is for the page headline. The next is for author and date. The third cell down is for preface notes, and the fourth cell is for the content.

The right column follows the layout of the center. Links or sidebar content goes in the fourth cell.

The left column is one long cell so that the layout of the menu is not constrained by the content of the center column.

The page sturcture looks like this:

I'm a fan of both stylesheets and self-documenting naming conventions. The labels in the cells above are what I use in my stylesheet for specifying the style definitions for the <td> cells in the table. The actual tagging I use is here.

(December 12, 2002: A different approach is to replace the <td> cells with <div> tags. See the Photo Journal article for a little more. Here's the tagging.)

Masthead

If you use text for your masthead, the above will work well. If you want to use a graphic for the masthead, I have found that things work better if you put the masthead graphic in a separate table above the content table. The basic tagging is here.