This article explains how to create a good Web page layout by examining page elements and arranging them in Microsoft FrontPage.

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:

Advantages of a side navigation bar:

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:

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

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.