Learn...

FrontPage Intro

FrontPage Editing Basics

Make a FrontPage Template

FrontPage FAQ

Dynamic Web Templates (FP)

Swish Basics

Articles

Product-Specific

2. Theme Graphics

One of the first things you will be doing is to create graphics for the buttons, banners, etc. for your theme. While you are doing this, you may want to design a page layout as well for your page template. You will need to create these graphics in a graphics program (Photoshop, PhotoDraw, etc.).

Here are the graphics that you will need to make. We are using BabyBlue as our example (pictures are not all to size). You don't need to follow the dimension recommendations (we didn't!), but they are what Microsoft uses in their themes. *For some of the graphics, there is a "Normal" graphic set and an "Active" graphic set. While you could choose to use different graphics for these, we usually don't.

Graphic Needed	Types	Recommended Dimensions
Background Picture We used a 1x1 pixel white square, but enlarged it here so that you could see it.
Banner Our graphic was a 400x50 white rectangle.	Normal and Active*	600w x 60h pixels
Bullets (1, 2, 3) Bullet 1 Bullet 2 Bullet 3	Normal and Active*	Bullet 1: 20w x 20h pixels Bullet 2 & 3: 12w x 12h pixels
Global Navigation Button		140w x 60h pixels
Horizontal Navigation Button This is the normal graphic. We used the same graphic for the selected button and the hovered button. The selected button shows when you are on a page. The hovered button shows when you mouse-over the buttons (when active graphics are enabled).	Normal and Active* Regular, Selected, Hovered	140w x 60h pixels
Horizontal Rule We used a light blue 400x3 pixel rectangle for the horizontal rule.	Normal and Active*	300w x 10h pixels
Quick Back Button We chose to use the same graphic for the regular, selected, and hovered states.	Normal and Active* Regular, Selected, Hovered	100w x 20h pixels
Home Button We chose to use the same graphic for the regular, selected, and hovered states.	Normal and Active* Regular, Selected, Hovered	100w x 20h pixels
Next Button We chose to use the same graphic for the regular, selected, and hovered states.	Normal and Active* Regular, Selected, Hovered	100w x 20h pixels
Up Button We chose to use the same graphic for the regular, selected, and hovered states.	Normal and Active* Regular, Selected, Hovered	100w x 20h pixels
Vertical Navigation Button This is the normal graphic. We used the same graphic for both the selected and the hovered button.	Normal and Active* Regular, Selected, Hovered	140w x 60h pixels

Now, modify your theme with the graphics that you've made. In FrontPage, right-click in Page View and choose Theme, pick any theme from the list on the left, then click Modify.

Click Save As and name your theme. Then, click the Graphics button and begin replacing the graphics. Don't forget to replace the graphics for both the Normal and Active theme sets. You may also choose the fonts, font size, font styles and positions by clicking the "Font" tab. When you're done, click OK. Don't forget to save your theme.

Next: Theme Colors
Back: Creating a Theme- Intro