Creating the FrontPage Theme
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 FrontPage Theme Browser, 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 |
Table of Active Graphics Mode Elements
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 |
Table of Normal Graphics Mode Elements
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
You can also set the font, style and size of the text
used to label the navigation buttons and the banner. Tip: Keep the font
size small allowing larger titles to appear on the buttons.
Setting the Banner Text Font Attributes
You can also set other text and color attributes of your
new theme by using the "Colors..." and "Text..."
buttons on the bottom of the Theme Browser. Illustrated below is the
completed theme to support the navigation and banners of tutorial
web.
Supporting FrontPage Theme in Theme Browser
Saving the New Theme
Now you can save the new theme using the "Save
As..." button. Give the theme an appropriate name. It is likely that
you will need to modify the theme several times during the design process
(see note below).
Important: It is recommended that you do
not use the "Save" button to save your theme versions as some unexpected things can happen. Using the "Save
As..." button will create multiple version of the theme that can be deleted
later.
|
