Planning How the Page Should Behave
Before starting to create your page, it's a good idea
to have a clear sense of how you want the various page
elements to respond when the viewer changes the size
of the browser window. Which elements can be flexible?
Which need to be a constant size?
A good way to plan this is to make a simple sketch
of your layout, and note how you want different parts
of the page to adjust to window size changes. This
will help you see where you need to build flexibility
into your design.
Design goals for this page:
- Banner that stretches completely across the window
at the top, with a logo at the left and a tag line at
- Main navigation bar below the banner that covers the
width of the content area
- Secondary navigation panel on the left that doesn't
change width, but grows taller as the page gets longer
- Sidebar of a fixed width on the right which grows
taller as its content expands
- Main content area that takes up most of the page
Move your mouse over the sketch to see how I plan to implement
this design with flexible tables:
- The banner will be a 100% width table with two cells.
The logo will go in the left cell and the tag line in
the right. I'll set cell alignment to force the logo
to the left of its cell and the tagline to the lower
- The main navigation bar will be a 100% width table
with a nested table. The outer table will have two cells.
The left cell will have a graphic which will set the
width of the cell and the height of the entire table.
The right cell will have a nested table which holds
the navigation button graphics.
- The content area will be a 100% width table with three
columns. In the left column will be the secondary navigation
panel. The right column will hold the side bar. The
middle column will hold all of the page content.
- The secondary navigation panel will be a fixed-width
- The sidebar will be another fixed-width table.
I may have to refine this scheme when I start to create
the page, but I already have a good sense of its structure.
Once you have the basic structure defined, you can use
the sketch as a guide for which graphic elements you need
to make the structure work. Here is my working file for
the site interface:
I'm creating the site graphics in Photoshop, but Fireworks
or another image editor would work as well. This file is
800 x 600 pixels, but that's just a convenient way to get
a sense of how the page will look in an average-sized window.
I will be using only small pieces of this graphic. Most
of the design will be implemented with small graphic elements
embedded in flexible tables. Since I have already planned
the structure of the page I know exactly what graphic pieces
I need, and what size they need to be. (Mouse over the layout
graphic to see which parts of the working file I will be
Next, we're going to build the banner area of the page.