By Mary Burk

Applies to
Microsoft FrontPage® 2002

Ever wanted to take complete control over your templates? Really do things your own way? Use this article to break down the design elements of a FrontPage theme and re-create it in your own style

Introduction

The Microsoft FrontPage 2002 Web site creation and management tool provides numerous ways to customize and enhance Web designs. One powerful reusable layout in FrontPage, called a theme, makes it easy for small businesses to create and maintain a company brand at the page or site level. Themes are a collection of professionally designed Web images and page layout elements that provide style consistency. They represent a great way to apply the complete look and feel of a Web site and to control changes to the design in one place (the Themes dialog box, which you access from the Format menu).

This article discusses how to customize an existing theme. At the end of the article, look for links to other helpful information about themes and advanced design.

Know What You Want

Design is a big concept to absorb, and producing a Web design means taking into consideration the many underlying factors that make up design choices. Navigation structure, content, and audience expectations all are embedded in the choices that make up a complete and useful design.

Every good company considers structure, content, and expectations before designing takes place. An understanding of the mission of the company and the products and services offered is critical to developing the aesthetics of a company Web site. Also, examining whether or not the company's culture sets it apart from similar businesses helps set the tone and writing style for Web content. Is the company offbeat, traditional, cutting edge, formal?

Study the target audience. Who are they, what do they expect, what limitations do they face when browsing the Web? Are they using older browsers or slower modems? Is accessibility an issue? What is the strongest message or product appealing to the end user? Will visitors understand what they have to gain from their initial impression of the Web site? As you explore these questions, design themes will emerge to define the visual look that you want.

Look for a Place to Begin

Once you have a good understanding of your content and audience, and you know what navigation you need, you can look for a FrontPage theme that closely matches a visual representation of your company's brand, content, and goals.

To browse existing themes in FrontPage

1. With a page open, on the Format menu, click Theme. The Theme dialog box provides a preview of each theme.
2. Scroll through the themes and select one that fits your needs.
3. Click OK to apply the theme to the current page.

Modifying Your Theme

You can modify any theme in FrontPage.

To modify a theme

1. On the Format menu, click Theme.
2. Select the theme that you want to modify, and click the Modify button.
3. Click a button to make design changes to your theme: Colors, Graphics, or Text.

Colors

Modifying a theme color scheme is relatively simple. You can choose an entirely different color scheme, tweak an existing color scheme with the Color Wheel, or customize colors for specific HTML tags and page elements. When you click the Colors button, these choices are available in the Modify Theme dialog box, on three tabs:

• Color Schemes  When you modify a color scheme on the Color Schemes tab, you can choose to use and/or modify any of the color schemes created for other FrontPage themes.
• Color Wheel  On the Color Wheel tab, you can modify the entire color scheme of your selected theme. When you click any point of color in the Color Wheel, FrontPage provides you with a complete color scheme based on your selected color.
• Custom  When you click the Custom tab, you can modify individual page elements by name. Choose the page element that you want to modify, and make your color selection in the Color list box. You can use the standard or custom color choices available in the list box or set your own colors by choosing More Colors. In the More Colors dialog box, you can insert your own hexadecimal values for color. Alternatively, you can use the color palette and the eyedropper tool, or choose Custom again to choose a more specific color from the RGB color palette.

Graphics

When you click the Graphics button, you can modify theme graphics in the Modify Theme dialog box. Select the item that you want to modify and make changes on the two tabs:

• Picture  On the Picture tab, a text box displays the name of the graphics file associated with the item that you selected for modification. (You can also browse to the location of graphic files that you have created to use with your theme.) Each theme has two graphics sets associated with it: Normal and Active. Active graphic themes include hover effects for buttons. Active graphics associated with a theme represent common hyperlink states: normal, active, and hover. In FrontPage, these hyperlink states are associated with the following image labels: Picture, Selected Picture, and Hovered Picture.
• Font  The Font tab allows you to change font values for button and navigation text, including font size and horizontal and vertical alignment.

Note  If a browser does not find your chosen fonts on the client computer, a default font will be selected for viewing your Web page.

Although modifying theme graphics can be relatively simple, keep these tips in mind:

• Do not add text to your navigation graphics. FrontPage will automatically apply wording to theme button and navigation images.
• Make sure the size of your new graphic is the same as the graphic that you are replacing; this will prevent you from having to change any layout code in your FrontPage theme.
• Graphics must be in .gif or .jpg format before you can use them in a FrontPage theme.
• Graphics used for banners or buttons appear behind the banner or button text.

Text

When you click the Text button, you can change the font, size, and color of the body and heading text in your theme. In the Modify Theme dialog box, select the text item that you want to modify. You will see a choice of fonts in the Font list. To the right of this list is a preview display of the theme. When you select a font name, the page element that you are modifying will change in the preview.

If you want to modify elements that are not displayed in the Item list, click the More Text Styles button below the Font list. In the Style dialog box, you can modify user-defined styles and HTML tags.

For example, if you want all of your unordered lists (ul) displayed in Arial, select HTML tags and then select the ul style. Click the Modify button and then the Format button to change the default style of your ul tag, including the Font, Paragraph, Border, Numbering, and Position values, on any Web page. Modifying user-defined styles will modify your theme, affecting the tag across the entire Web site.

Page Banners

The most prominent element displayed in the theme preview window is the banner, also known as the page banner. Page banners differ from other theme elements in that they are not modifiable from the Themes dialog box. To modify a page banner, make sure that:

• The page that you are working on is already part of the navigation structure of your FrontPage Web. If it is not, then you will not be able to add a page banner to your Web page.
• If you want to use a page banner with a theme graphic or background picture, the page that you are working on is already associated with a theme.

To insert a page banner in your Web page

1. In Page view, place your cursor in the page where you want your banner to appear.
2. On the Insert menu, click Page Banner.
3. Select Picture or Text. Both options allow you to type the text that you want displayed as your page banner text.

Note   If you change the title of your Web page (the text that appears between <title> and </title>), your page banner text also will change. Because page banners are associated with navigation structures, FrontPage assumes that you want the title of your page to match the text in the page banners.

To change the text of a page banner, right-click the banner in Page view and choose Page Banner Properties.

Shared Borders

Shared borders are regions on a Web page that are common to one or more pages in a Web site. A shared border may be at the top or bottom of the page (similar to a header or footer), or to the left or right.

Shared borders can be used along with your theme. Shared borders pick up the style elements of the theme that you use on a Web page.

You can use shared borders across multiple pages to provide consistency for repeated content such as site navigation. Design the navigation once, put it inside a shared border, and then place the shared border on every page that should display this navigation. For every page already associated with your theme, the shared border content will be displayed.

Conclusion

By using themes to manage an entire Web site or by combining themes with shared borders to control specific regions of a Web site design, anyone can quickly create an elegant, uniform layout for the presentation of business sales and marketing materials. With FrontPage, you can take control of your Web pages and reuse your best material.

For more information, see:

• About FrontPage Themes
• Theme Basics
• Tips and tricks for FrontPage: How to Create Custom Templates
• Flexible Formatting of Hyperlinks Using Cascading Style Sheets
• Accessing Shared Borders

---

Mary Burk, senior consultant, Mess Enterprises

---