tutorial - flexible page

Page 1.

This tutorial shows how to build my original home page using tables for layout. My homepage has since changed to using CSS-P for layout which is covered in a separate tutorial.

This page is rather bare, a bit like the Emperor in the story The Emperor's New Clothes. We will add to the page as we go.

This tutorial assumes a reasonable knowledge of using Dreamweaver and Fireworks although the principles can be applied using any editor. There is a separate tutorial on how to create the graphics in Paint Shop Pro 7.

A flexible page is one which adjusts its width to fit in varying browser window widths. The minimum width is determined by the largest graphic on the page (or sum of graphic widths across the page), while the maximum width is only limited by the window width.

The first step is to set up the page structure. We are using 3 tables, one for the top banner, a second for the main content, and a third table for the footer, with a 4th nested table in the middle for the content. The first few pages have the table borders visible so you can see where they are.

All 3 layout tables are set to 100% width. This is the secret that allows them to expand or contract to the browser window width. The top table has 2 columns. The middle table has 3 columns, and the bottom table also has 3 columns. When you first create the tables they won't take up the nicely spaced look of this page, I have set them up with shim (transparent) gifs to hold them open. As we go, some will have graphics and others will need the shim gifs. The nested content table is also set to 100% width, but with some cellpadding to keep some white space around the content.

Now we are ready to add the graphics... but first, we must make them.

We'll start with this photo:

Original image - Mt Ruapehu.

Open in Fireworks - I'm using Fireworks 4 for this tutorial.

Increase the canvas size to 600 x 500, with the photo in the top left corner. Draw out another square with a white solid fill over the top. Using the Info panel, position at x=75, y=100, w=500, h=400. Using the Object panel, set roundness to 15.

Add a 2 px black stroke to this rectangle, Basic Soft Rounded. This is what you should have:

Example 1 showing step 1 of creating page graphics.

Next ---->

Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | PSP 1 | PSP 2
No tables 1 | No tables 2 | No tables 3 | No tables 4 | No tables 5