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 the right
• 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 right.
• 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 table.
• 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 using.)

Next, we're going to build the banner area of the page.