Setting up the shared borders and getting them to integrate with the navigation and banner components in all the different browsers can be the most time consuming aspect of the wrap-around theme development. The setup of you banner and navigation buttons will for the most part determine your table layout. The other thing to consider when laying out the tables is, what part of the design will track the browser width on the page.

It is assumed that you are familiar with the setting of Table and Cell properties, specifically the table / cells width percentages properties and a cell's background color and image. If not, please review the FrontPage documentation on these subjects before proceeding.

You will find this to be an iterative process, we strongly recommend that you preview the look of your page using the "File->Preview in Browser..." menu item as this will give you an accurate idea of what the page will look like in a real browser. We also recommend that you preview it in several browsers to make sure it look approximately the same.

Top Border Layout

All of the editing of the top border will be done in the top border area of the FrontPage editor window. You may find it more convenient to edit the border file directly. To do so, select the Tools->Web Settings... menu item and then the advanced tab and check the "show documents in hidden directories" check box. Then press OK. Now you can edit the Top.htm, Left.htm, Right.htm and Bottom.htm files directly from the "_borders" directory.

The tutorial top border consists of two tables; 1) table for the the company logo, the ad banner and tagline and 2) the table for the page banner image, transition to the left border and the top navigation bar.

Lets start with the first top border table. Add a table to the top shared border area. Now add two columns and two rows to the table for your logo image, banner, company logo and company tagline. Set the table width to 100% and set the logo image cell to 10% and the banner cell to 90%. Make sure each row adds to 100% to make the objects expand properly when the browser's width is resized.

First Table in Top Border

Next make another three row table for the banner image, the left border transition graphics and the horizontal navigation buttons (shown below). Also make it a 100% wide table.

Second Table in the Top Border

In this tutorial, we use the banner image in a different way than most FrontPage themes, in that the banner image is integrated into the top frame piece and it is not a dominate element of the theme design. To make the integration simple, we made the banner image a totally transparent GIF file 20 pixels high. The banner text is set to white and is then overlaid on top of the cell's background image that is tiled horizontally (shown below).

Image tile used as the background image of the cell

Now as the browser window is made wider, the 100% table expands and the tiled cell image is replicated to make it appear the graphics are growing as well. The 20 pixel high transparent banner image makes sure the cell is at least 20 pixels tall. This is an iterative process which will likely require you to return to go back to your image edit to get different slices of your layout.

Tip: To make fast loading pages, compress the images as much as possible and use repeating background images in a table cells where possible. This has the added benefit of allowing the theme user to layer something on top of the table's cell.

Next, the top borders graphics are sliced thinly to make a transition to the navigation buttons. The final row contains a 37 pixel wide image and then the navigation component. Here the cells are still set to 18% and 82% respectively.

Left Shared Border

The left shared border consists of a one column seven row table to contain the vertical navigation bar, a space area, a title graphic, a FrontLook Series 3 Scroller Applet, another space area and a user defined area. The width of this table is set to 145 pixels.

The Gray Navigation area has a gray background cell tile (shown below) that under lays the navigation component. This allows the gray area to automatically grow with the number of navigation buttons.

Left Border Gray Area Cell background graphic

The red area is tiled with a red background cell image (shown below) also, but this image is made from the background image of the shared border so that as the content grows, so does the red area.

Left Border Red Area Cell background graphic

FrontPage 2002 Border Properties

The Shared Border background image is set by right clicking on the border area and then selecting the "Border Properties..." from the popup menu. Now select the "Left" item in the "Border" combo box and then set the border color and image in the "Color" and "Picture" controls.

Left Border graphics in Table

Tutorial Home 1 | 2 | 3 | 4 | 5 | 6 | 7