Adding the Wrap-around Graphics
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
is 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 has a tiled with a red
background cell image (shown below) also, but this image is made 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.
