Ensuring a Consistent Visual Style
After you have an understanding of HTML formatting and how to create and edit Web pages, you can apply more advanced capabilities to create pages that are easier to view, use, and maintain. You can also create pages that perform advanced functions, such as search the content of your site, automate your navigational buttons, process interactive forms, or perform database queries.
To make it easy for you to create advanced pages, FrontPage integrates several capabilities, such as cascading style sheets (CSS), themes, Shared Borders, frames, forms, and FrontPage components. Without this integrated approach, you would have to add these capabilities by hand, including the complex programming for the Web server.
Using Cascading Style Sheets
HTML uses a specification called cascading style sheets (CSS) to enable you to create and assign your own styles to paragraphs or characters, in much the same way that Word supports paragraph and character styles. The first version of the CSS specification, CSS 1, controls formatting. The second version, CSS 2, primarily relates to positioning.
Caution
Before you use style sheets, consider your Web site's audience. CSS 1 requires version 4 browsers (IE or Navigator) or later. CSS 2 requires version 5 or later. If you are sure that your users will be able to use style sheets, choose Tools, Page Options and click the Compatibility tab to enable style sheet support within FrontPage.
FrontPage enables you to assign CSS styles to any page element. The Style buttons found on nearly every property dialog box enable you to define and assign CSS styles. You can create new styles of your own, or change the default style of standard HTML tags. For example, if you want all Heading Level 1 paragraphs to use bold, sans serif text, in a light color, you can create a CSS style that overrides the default formatting of all H1 tags.
For an example of some of the CSS formatting that you can apply, consider the before and after snapshots of the Three Dog Delight About Us Web page, as shown in Figures 37.6 and 37.7. In the after view, notice the following CSS improvements:
Figure 37.6. Before: a simple page using standard HTML formatting.
Figure 37.7. After: the same simple page as Figure 37.6, with additional cascading style sheets formatting applied.
Letter Spacing— The heading at the top of the text uses CSS expanded letter spacing for a more distinct look.
All Caps— The heading style uses CSS to display in all capital letters.
Typeface and Size— CSS defines the font typeface and size for the heading; in this case, we use Comic Sans in 12 point.
Top and Bottom Rules— The heading uses CSS borders to produce horizontal rules that extend across the page.
Foreground and Background Colors— The heading uses CSS to define foreground and background (or shading) colors.
Text Spacing— The heading style sets the top and bottom spacing of 0, keeping the heading properly adjoined to its related text.
Line Spacing— The body text uses CSS to open the line spacing a bit. In this example, the spacing is set to 140%.
Text Justification— Using CSS, you can justify text to both the right and left margins.
First-Line Indentation— Indent the first line of paragraphs using CSS indention setting.
Right-Margin— The body text is padded to the right using the CSS right-indent capability.
Top and Bottom Spacing— As with the heading, use CSS to define the spacing that you want before and after paragraphs. In this example, the spacing was set to 0.
Small Caps— As in The Wall Street Journal newspaper, use CSS to format the first few words of a paragraph in small capital letters.
Tip from 
If you are a novice text formatter, here are two tips that will put you above your coworkers. First, whenever possible, always keep headings juxtaposed (with no vertical space) with the following paragraph; the proximity improves the reader's association of the heading to the text. Second, when indenting the first line of paragraphs, do not use extra vertical whitespace above the paragraph. Indenting is a tried-and-true method to make your information more readable, and additional vertical spacing can interrupt the reader's flow while scanning the page.
Cascading style sheets come in three flavors:
At the lowest level, an inline CSS is applied directly to the characters or paragraphs in question. Formatting specified by the inline CSS takes precedence over formatting from the other two types of CSS. If you select text or paragraphs and apply a style from the drop-down Style list on the Formatting Toolbar, the result is an inline CSS.
At the intermediate level, an embedded CSS is attached to one Web page and is accessible only from that Web page.
At the highest level, a page can be linked to an external CSS. An external CSS is a page in and of itself.
When a browser attempts to resolve complex formatting on a page, it follows a simple hierarchy. Manually applied formatting overrides everything else. If there's no manually applied formatting on a particular chunk of text, the inline CSS takes over. If there's no inline CSS, the browser looks for a matching style definition inside the page—the so-called embedded CSS. If there's no definition embedded in the page, the browser looks to an external CSS, if there is one. Finally, if there is no style definition in the external CSS, the browser falls back on its own style definitions.
Actually, that's a bit of an oversimplification. In fact, any given Web page can have multiple external CSSs. When the browser attempts to resolve a style reference, it looks at all the external CSSs, in reverse order.
→ For more details about the search sequence, see "Using Cascading Style Sheets".
Caution
FrontPage enables you to use spaces within your style names, but if you do, the style won't appear correctly in the Style drop-down list.
Embedding a Style Sheet in a Web Page
Once in a blue moon, you'll want to create a style sheet that affects only one Web page. For example, you might want to create a style sheet that stores styles unique to the résumé page in your personal Web Site. In that case, you'll want to embed that style sheet in the résumé page so that the styles you create don't clutter the Style drop-down list on other pages. The styles that you define on an embedded style sheet aren't accessible to any other pages in your Web—or anywhere else, for that matter.
To create an embedded style sheet, open the page in Page Normal view and choose Format, Style. The Style dialog box appears, as shown in Figure 37.8. In this dialog box, you can modify the standard HTML styles or create your own new styles.
Figure 37.8. Using the Style dialog box changes the style definitions stored in an embedded style sheet.
If you no longer need an embedded style, you can delete it from the embedded style sheet by choosing Format, Style; selecting the style from the list of styles; and clicking Delete.
Caution
When you remove an embedded style, FrontPage does not remove references to the style from your page. If you later add a style with the same name, those text elements inherit the new style's formatting. To avoid this behavior when you remove a style, use FrontPage's Find feature to search the HTML for the style reference and then remove the references manually in HTML view.
Using External Style Sheets for Multiple Pages
To share styles with several Web pages within your Web site, create an external style sheet and link the pages to the external style sheet. As with embedded style sheets, styles that you create in an external style sheet become available in the Style toolbar option list so that you can apply the same style to multiple elements on the same page. You can also apply your styles together with standard HTML styles to produce a combined effect. When you change a style in the external CSS, all your pages inherit the new settings.
Note
You can use multiple external style sheets—when linked to the same page, the styles cascade and produce a combined effect. If you have conflicting formatting associated with the same style, the formatting of the last (not the first) style sheet linked to the page takes precedence.
When the browser downloads a page that references a style sheet, the browser downloads the style sheet, too. If the browser downloads a subsequent page referencing the same style sheet, it's smart enough to know that the style sheet has already been loaded and is available in cache. By using the same external style sheet, you accomplish two important goals: a consistent look among pages, and minimal download time.
To create an external style sheet, choose File, New, Page or Web. In the New Page or Web task pane, under New from Templates, pick Page Templates
Note
You must explicitly save the style sheet before it will be available for linking.
External style sheets are saved in files with the .css extension.
With your external style sheet open in Page view, choose Format, Style to modify the standard HTML styles or to create your own.
Tip from 
Use a name that describes the style's purpose rather than its appearance. For example, type DogGalleryEntry rather than BoldDoubleBorder. This way, if you change the style's appearance later, your style name still makes sense.
Note
FrontPage does not have anything analogous to the Word Formatting and Styles task pane.
After you have saved your external style sheet, you need to link it to the pages within your Web site. In Folder view, select the Web pages to which you want to link the style sheet, and choose Format, Style Sheet Links. In the Link Style Sheet dialog box (see Figure 37.9), choose whether you want to link the style sheet to all pages within your Web site or only to the selected pages.
Figure 37.9. You must save the external style sheet before it's even available in the
Tip from 
Link Style Sheet dialog box. And you must explicitly, manually link pages to the external style sheet before styles defined in the sheet become available to your Web pages.
When you link multiple style sheets to a page, the order affects how browsers resolve conflicting style references. Use the Move Up and Move Down buttons to change the order. Contrary to what you might expect, the style sheet listed at the bottom of the list has higher precedence than those above it.
Applying Styles, Colors, and Images with a Theme
As with all Office applications, you can leverage themes to provide consistency to all the Web pages in your Web site. Office includes several themes to choose from—each theme has its own personality, assembling styles, images, colors, and fonts to provide a one-stop shop for a coordinated design for your Web pages.
To see the themes available for your Web site, choose Format, Theme. Browse the list of themes and view the samples to find one for your site. To change a theme before applying it to your presentation, click the Modify button and then change the basic colors, embedded graphics, or fonts (under the Text button—see Figure 37.10).
Figure 37.10. Make your own themes by using the Themes dialog box.
Note
FrontPage does not enable some advanced capabilities unless you apply a theme to your Web site. For instance, without a theme applied, you cannot create graphical Page Banners or graphical buttons in Navigation Bars. Instead, you must settle for the text-only version or create these elements manually for each page.]
If you prefer not to use cascading style sheets with your Web site, FrontPage can apply the theme formatting directly within the HTML. Uncheck the Apply Using CSS check box, in this case. If the check box is not available, you need to select the compatibility options for your Web site.
Each FrontPage theme includes 11 graphical elements to use for the bullets, buttons, banners, background, and horizontal rules. Also, each theme uses two sets of these graphical elements: one set for normal graphics, and the other to apply when using active graphics. You can change graphics by clicking the Graphics button, choosing the element that you want to work on in the Item list, and, for each picture listed in the Picture tab, clicking Browse to locate the image that you want to use for that purpose.
Tip from 
In Active graphics mode, you'll need three images for your navigational buttons—one when not selected, another when the user hovers the mouse pointer over the button, and yet a third when the user clicks the button.
Most of the graphical elements can have their own text style. For instance, when you use the Banner Component in graphics mode, FrontPage overlays the title of the page on the banner image using your text style. This way, you can be assured that the banner text is consistent with the other text formatting of your Web site. Change fonts by clicking the Text button.
Tip from 
You can type more than one font name, delimited by commas, for each text item. When a browser cannot find the first font listed, it looks for the second, and so on. If none is found, it displays the default font, which is usually Times New Roman.