This chapter is from the book
This chapter is from the book
This chapter is from the book
A theme is a set of design elements and colors that you can apply to give your Web pages a professional look. Applying themes helps keep your pages visually consistent, as well as visually appealing.
When you apply a theme, all your headings, body text, colors, bullets, and so on will be automatically styled according to the theme. Themes also can include background images. You have the option of applying a theme to one page, to many pages, or to your entire Web site.
Themes do not define things like the location of navigation bars or the layout of your page. Instead, themes simply alter the appearance of color, fonts, and certain images on your pages, as shown in Figure 3.4.
)
Figure
3.4 When you select a new theme, the new colors, graphics, and fonts are
applied to your Web page in an instant.
Applying Themes to Pages and Sites
To apply a theme to a page, choose Format, Theme. The Theme task pane opens, as shown in Figure 3.5. From the Select a Theme section, choose the desired theme. The theme you select will automatically be applied to the Web page on which you are currently working.
When you're applying a theme to only one page of a site at a time, remember to be consistent. If you use the Compass theme for one page and the Canyon theme for another, your site will lose its flow from page to page and could disorient your visitors.
)
Figure
3.5 The Theme task pane displays thumbnails of each available theme.
A better choice is generally to apply themes to an entire site. This ensures consistency throughout. Even better, you can change the theme on a sitewide basis when you're ready for a new look.
To apply a theme to an entire site:
Choose Format, Theme. The Theme task pane opens.
From the Select a Theme section, choose the desired theme. The theme you select will automatically be applied to the Web page on which you are currently working.
To apply this theme to your entire Web site, click the selected theme's down arrow. A file menu is displayed.
Choose Apply As Default Theme. A FrontPage message box opens, warning that applying the desired theme to the Web site will replace existing formatting.
To continue, choose Yes.
When you apply a theme to an entire site, any pages to which you'd previously applied a different theme will remain unchanged. Themes you apply locally—that is, to a page itself—take precedence over themes applied to the entire site. This same mindset applies when you start using cascading style sheets (CSS), so it's a good lesson to learn early. Cascading style sheets are the preferred method for controlling fonts, text and link colors, and even positioning on a page. To learn more about CSS, see Chapter 13, "Using Styles and Cascading Style Sheets."
Setting Theme Options
At the bottom of the Theme task pane are options to enhance or modify a theme. Although these changes are generally subtle, they can make your site stand out at least a bit from others using the same theme. Another good use of these options is if you want to give a slightly different look to one section of your site while still having it appear related to the whole. These options are as follows:
Vivid Colors—Choosing this option makes some of the text and graphic elements on your Web page appear even brighter. This varies by theme, so examine the differences in the thumbnails before applying this option.
Active Graphics—Choosing this option animates certain theme components, such as rollovers on navigational elements.
Textured Background—Choosing this option applies a textured background to the page.
Modifying a Theme
You can modify a theme to meet your needs. Modifications can be made to a theme's colors, graphics, and/or text. In doing so, you can create a unique theme based upon elements of other themes.
Changing Colors
You can choose to use a different color palette, change the color scheme, or modify a color using FrontPage's color wheel. To modify the colors of a theme, do the following:
Choose Format, Theme. The Theme task pane opens.
From the Select a Theme section, choose the desired theme.
-
To modify the theme, click the selected theme's down arrow, then choose Customize. The Customize Theme dialog box opens, as shown in Figure 3.6.
-
Click the Colors button in the What Would You Like to Modify? section. A new dialog box opens to enable you to adjust the theme's colors, as shown in Figure 3.7.
Make the desired changes in the Color Schemes, Color Wheel, and/or Custom tabs.
-
Click OK twice.
)
Figure
3.6 The Customize Theme dialog box enables you to modify a theme's
colors, graphics, and text.
)
Figure
3.7 FrontPage offers several methods for adjusting colors in a theme, either
using the predetermined color schemes, generating a scheme based on a selection
on a color wheel, or by customizing individual elements.
Changing Graphics
With FrontPage, you have the option of changing a theme's background picture, bullet icons, navigation buttons and bars, and banners. To modify the graphics of a theme, do the following:
-
Choose Format, Theme. The Theme task pane opens.
-
From the Select a Theme section, choose the desired theme.
-
Click the selected theme's down arrow and choose Customize. The Customize Theme dialog box opens.
-
Click the Graphics button in the What Would You Like to Modify? section. A new dialog box opens to enable you to change graphics, as shown in Figure 3.8
-
Make the desired changes to the graphic items. In the case of navigation elements and banners, you also can customize the font used for the element's text.
-
Click OK twice.
)
Figure
3.8 If the Active Graphics option button is selected, you can change the
normal, selected, and hovered states of navigational elements.
Changing Text Styles
Changing the font in a theme can give it a new look with very little effort. You can change the font for the body and headings of your pages. To modify the font used by a theme, do the following:
-
Choose Format, Theme. The Theme task pane opens.
-
From the Select a Theme section, choose the desired theme.
-
To modify the theme, click the selected theme's down arrow, then choose Customize. The Customize Theme dialog box opens.
-
Click the Text button in the What Would You Like to Modify? section. A new dialog box opens to enable you to change the fonts used by the theme, as shown in Figure 3.9.
-
Make the desired changes to the text settings. When you select a font name, the font will be displayed in the preview window.
-
Click OK twice.
)
Figure
3.9 You can change the font for the theme's major text elements in
the Customize Theme dialog box.
If you want to dig deeper into this feature, you can edit the CSS styles for other page elements and change the size, color, and decoration of the text, as well as the font. To do this, click the More Text Styles button, then edit the style as you would in any other style sheet. To learn more about editing cascading style sheets, see the section "Modifying Styles" in Chapter 13.
NOTE
The font list displayed in the Customize Theme dialog box lists all the fonts installed on your computer. This doesn't guarantee that those fonts are installed on the computers of your site's visitors, however. If you're changing fonts for text elements, stick with the most common fonts, such as Arial, Times New Roman, Verdana, Helvetica, and Courier. You can list multiple fonts separated by commas. You also can add a generic font type, such as sans-serif or serif.