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:
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:
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
|
