Let's say you have a puzzle to put together, but it is unlike any jigsaw that you have done before. You decide how big the pieces are, how they fit together, and even how the finished picture looks. A Web page is just such a puzzle.

While there are several ways to approach the challenge of Web page layout, some arrangements work better than others. The Microsoft FrontPage Web site creation and management tool can help you design your school site, your intranet pages, or any Web-based tool.

Your puzzle pieces

Most pages on your site will fit in a single layout template, except perhaps the home page and specialized content pages. The layout puzzle usually includes five main pieces. These components are so common that FrontPage has features for working with the pieces (shared borders, included pages, and link bars) and tools for putting the pieces together (tables and frames).

Below is an example of a common layout that works well for many sites. You may be tempted to be more creative and unique, but remember that your site is usually only part of a visitor's session. Unless you have an overriding reason to create a very unusual layout, your visitors will thank you for conforming. (Hint: Make your graphics creative and unique rather than your layout!)

Figure 1: The elements of a common Web site layout

1. Site identifier

Every page must let visitors know that they are at your site. The home page is particularly important in this capacity, so you may decide to feature your school logo, name, or other graphic more prominently there. Often, the site identifier fits well as a banner at the top. Pay attention to the height of this area; if it is too tall, your content will be too low on the screen.

2. Navigation bar

The navigation bar exists to help visitors find content. So your navigation structure should be determined roughly by the information hierarchy of the site. Hopefully, you have organized your information logically before trying to lay it out visually.

Once you know what your navigation structure is, you can find the best place for it. The choice is basically between top and side navigation bars—or possibly both.

Advantages of a top navigation bar:

• Can be easily seen
• Leaves the full screen width for content
• Can tie in with the site identifier

Advantages of a side navigation bar:

• Supports as many navigation items as needed
• Allows for longer item descriptions
• Can integrate several layers of navigation as visitors delve deeper into the site

Larger sites may need to use both the top and side for navigation. For example, your school district site may have each school's site linked in a top navigation bar, with district-wide information located on the side.

3. Main content

The main content area — the page title, headings, text, and images—is what your visitors actually come to see. Be sure to give this area the thought that it deserves, rather than assembling the other areas and giving the leftover space to your content.

Two content concerns are readability and flexibility. Readability is best when any given content column is between 100 and 600 pixels wide. Basically, visitors are uncomfortable reading extremely short or extremely long line lengths. So, a main content area of 350 to 600 pixels total allows for flexible template options such as one-, two-, or even three-column layouts.

4. Secondary content

On commercial sites, a secondary content area is often used for advertising. School sites often use an area like this for announcements, news, or related links. If your site is information rich, it makes sense to designate some layout space to make more content available. If your site doesn't need it, however, leave the space for your main content.

5. Content about content

Information about the page content includes copyright, last updated date, security/privacy links, and person responsible for the content. This information, while necessary, will not be important to most of your visitors. A small footer is usually the best place for it. Use a smaller font size to set it apart.

Tying it together with tables

So you have decided on the perfect layout for your site. Now it is time to make it a reality. The most common way to implement a Web page layout is by using tables.

Web page tables consist of rows, columns, and individual cells — exactly like a spreadsheet. However, Web page tables often stray from a strictly tabular layout by having cells span multiple rows or multiple columns. For instance, the top row of Figure 1 spans two columns, and the left column spans two rows. This can seem complicated, but experimenting with tables in FrontPage will help you visualize it.

FrontPage has several tools for creating and working with tables. Start by using the drawing toolbar to create a whole-page layout as shown in Figure 1. You'll want to omit the number 4 box, which would be best as a separate table.

To create a new whole-page layout using the drawing toolbar

1. On the Table menu, click Draw Table. The Tables toolbar opens with Draw Table selected.
2. On your page, draw the outside border of the table by dragging from the upper-left corner to the lower-right corner of the table.
3. To make the cells, draw vertical and horizontal lines within the table.

To adjust the properties of your table

1. Right-click inside your table, and click Table Properties.
2. Specify the width of your table, either as a fixed number of pixels or as a percentage of the browser window.
3. Set cell padding and spacing pixels to create buffers around your table cells.
4. For a whole-page layout table, set the borders to 0.

Here are some tips for using tables:

• Stack tables.   When a Web page loads, the tables load in the order that they appear in the code. One long, complex table may take a long time to show its contents. It is often better to break up a whole-page table into top, middle, and bottom tables. Then your visitor will see your school name and logo while the content is loading (rather than just a blank page).
• Nest tables.   Tables can be "nested" inside one another, although you don't want to do this too many times or it will slow down the loading of your page. A good example of a nested table is the number 4 box in Figure 1.
• Leave white space around columns of text.   Often, it is best to set cell spacing and padding properties of the main layout table to 0 so that there are not gaps between puzzle pieces. However, you usually want some space around your text so it doesn't flow directly against other elements. This is accomplished using columns of blank space (see Figure 2), which you can draw as cells in your table just as you did above.

Figure 2: White space (indicated in red) around text improves readability.

• Fine-tune alignment.   Play with the alignment of each table cell to get the desired vertical spacing. Generally you'll want to choose top alignment in the properties of each individual cell. If the content is too close to the top, you can add a little space manually. Pressing ENTER for a new paragraph often does the trick.

Framing your puzzle

Frames are another way to accomplish Web page layout. They have a rather bad reputation. Frames are not easily bookmarked or indexed by search engines, and they can be confusing for site visitors. For these reasons, frames are probably not appropriate for your school Web site.

However, frames can make navigation easier for some intranet sites and Web-based tools. For example, say you are creating a Web-based tool to administer a staff contact information database. You might want one frame of database actions—Add, Edit, and Delete a staff member—and another frame where the staff member's information is displayed. The database actions frame would only have to load once, while the information frame would update with every action. A table, on the other hand, would have to reload both sections with every click.

Conclusion

A Web page may seem like a puzzle, but keeping the layout simple and standard will help site visitors find what they need.