FrontPage Theme Basics

FrontPage themes provide a powerful way to add consistent site graphics and navigation capabilities to your Web site. FrontPage themes are usually created to operate in the shared borders of the Web site and are made of the following elements:

• Banner
• Horizontal navigation buttons
• Vertical navigation buttons
• Back, Next, Home and Up navigation or Quick Link buttons
• Three Bullet or image list buttons
• Separator or Horizontal Rule
• Global navigation button
• Background image

There are 4 basic types of navigation buttons; Horizontal, Vertical, Quick Hyperlinks (Back/Next/Home/Up) and Global.

FrontPage Theme Modes

As you probably have noticed in the Theme Browser in FrontPage, there are several check boxes in the bottom left corner that can effect the way a theme looks and operates.

FrontPage Theme Browser Options

• "Vivid Colors" checkbox allows you to choose from a different color scheme for text and background color.
• "Active graphics" checkbox turns on the hover button capability of the theme. The Non-Active graphics mode is called Normal graphics mode.
• "Background picture" checkbox turns on and off the background image.
• The "Apply CCS" check box is not relevant to this discussion.

In the Normal mode, most buttons have only two modes, Normal and Pushed. The pushed button is sometimes called selected. The pushed button is used when the user is already on the page that that navigation button points to.

Normal, Hover and Selected Horizontal buttons

Because hover graphics are supported in the Active Graphics mode, an additional set of buttons are required for when the user hovers over the button.

The global navigation buttons do not hover or appear in a pushed or selected state. Therefore there are no pushed or hover graphics associated with the global navigation buttons.

Active Graphics Mode Elements

The following graphic elements are required in the Active Graphics Mode:

Banner Separator Horizontal Normal nav button
Horizontal Hover nav button
Horizontal Pushed nav button
Vertical Normal nav button
Vertical Hover nav button
Vertical Pushed nav button
Back Normal nav button
Back Hover nav button
Back Pushed nav button
Next Normal nav button
Next Hover nav button
Next Pushed nav button
Home Normal nav button
Home Hover nav button
Home Pushed nav button
Up Normal nav button
Up Hover nav button
Up Pushed nav button
Image List1
Image List2
Image List3

Normal Graphics Mode Elements

The following graphic elements are required in the Normal Graphics Mode:

Banner
Horizontal Normal nav button
Horizontal Pushed nav button
Vertical Normal nav button
Vertical Pushed nav button
Back Normal nav button
Back Pushed nav button
Next Normal nav button
Next Pushed nav button
Home Normal nav button
Home Pushed nav button
Up Normal nav button
Up Pushed nav button
Image List1
Image List2
Image List3
Separator

Initially, this can seem like a large list, but in practice, many theme designers will use the same graphics in both the Normal and Active graphics mode. Also you are not required to fill every element with an image.

Global Graphics

The Background image and the Global navigation button are global to the theme.

Creating and Populating the FrontPage Theme

The next step is to create a FrontPage Theme to set the text attributes and the navigation, banner and bullet images. Before beginning the process of assembling the FrontPage theme, you should have already saved the following to a know location on your hard drive:

• Button images from the image editor for the different graphics modes, orientations and button states as discussed above.
• Repeating background image tile.
• Banner image
• Bullet images
• Separator image

To create a new theme in FrontPage, bring up the Format->Theme... browser and select the "Blank" item in the theme list as a starting point for your new theme. Now press the modify button at the bottom of the dialog and select the "Graphics..." button.

FrontPage Theme Browser / Editor

Now use the "Item" menu to select each graphic item. Press the "Browse" button to select the image for that element in the theme. Do this until all the images have been added to the theme.

Setting the different buttons of the FrontPage Theme

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