Using Themes and Shared Borders in Microsoft FrontPageÒ 2000
What Are Microsoft Office Themes?................................................................................. 2
Improvements in Microsoft Office Themes..................................................................... 2
Themes Basics................................................................................................................ 3
Using Themes and Shared Borders on a Sample Web Site.............................................. 4
The Specifics: How We Created Our Sample Site............................................................. 5
Step One: Create a Custom Theme............................................................................. 5
Step Two: Apply the Theme........................................................................................ 5
Step Three: Set Up Site Navigation............................................................................. 6
Step Four: Set Up Shared Borders.............................................................................. 6
Step Five: Tweak It...................................................................................................... 6
Hands-On Exercises: How Do I Create a Web Site That Uses Themes?........................... 8
Create a New Web Site................................................................................................ 8
Add Shared Borders and a Navigation Bar.................................................................... 9
Apply a Theme.......................................................................................................... 11
Customize a Theme.................................................................................................. 12
Advanced Themes Customization................................................................................. 14
Copying Custom Themes from Computer to Another................................................... 15
Published: March 1999
This article provides an overview of the themes feature of Microsoft Office 2000, and complementary features in the Microsoft FrontPage 2000 Web site creation and management tool. With Microsoft Office themes, you can easily add professionally designed graphics, custom colors, and custom fonts to Office documents, web pages, and web sites.
Closely related to themes are features in FrontPage such as shared borders, page banners and navigation bars. These FrontPage features, when combined with themes, make up the look of your web site and determine how pages link to one another.
This article also provides hands-on exercises so that you can create your own FrontPage-based web site that uses themes. Lastly, you’ll learn how to copy custom themes from one computer to another.
The themes feature in Microsoft Office is a gallery of professionally designed graphics, color schemes, and formatting rules that can be applied to Word 2000 documents, Microsoft Access 2000 Data Pages, or FrontPage 2000-based web pages or web sites. With these shared themes you can create documents, web pages, or an entire web site with a consistent and polished look across all pages. Themes can be applied at anytime—even to an existing web site that was not created originally in FrontPage.
Although Microsoft Office 2000 comes with more than 60 standard themes, you can use FrontPage 2000 to customize many aspects of themes—including colors, graphics, and font styles—to come up with your own unique combination. You can even use more than one theme in the same web site on different pages. .
Using Microsoft Office themes with the shared borders and navigation tools available in FrontPage, you can add dramatic graphic designs to enhance your page or site’s page banners and navigation bars. You can also continue to use themes created in Microsoft FrontPage 98 with Office 2000 documents and web pages.
Microsoft Office themes have been improved in Office 2000 and FrontPage 2000 in several major ways:
· There are more than 60 themes available.
· The themes are more subdued and businesslike than before. This change was a direct result of customer feedback—users want to be able to produce conservative and professional-looking web sites.
· Microsoft Office themes are customizable from within FrontPage 2000. Previously, to customize a theme with FrontPage 98, you had to go to the SDK directory on your FrontPage 98 CD and find and install the Themes Designer.
· The themes in FrontPage are shared with Microsoft Office 2000. Word 2000 and Access 2000 include a subset of the themes included in FrontPage and can use any themes created from within FrontPage. In addition, the PowerPoint® 2000 presentation graphics program includes new presentation designs that match the formatting provided by shared themes.
To get a general understanding of themes, let’s start with a web page created using Microsoft FrontPage 2000 that contains no special formatting.
This document uses default headings and fonts. To change the design and apply consistent fonts and headings across all of our documents, you can apply a theme to the document. There are over 60 pre-built themes in Office 2000. You can also create a custom theme in FrontPage 2000 that will work with Word 2000 and Access 2000 documents and web pages.
To apply a theme to this document, select Format from the standard menu then click Theme. Select the theme that you want to apply, and then click OK. In the example shown, we selected a custom theme that we created in FrontPage 2000 called Adventure Works. This theme has pre-set rules for formatting headings, body text, and hyperlinks; and, specifies which banner, bullet, and button images to use.
When you apply a theme to the document, all of the headings, body text, font styles and colors, bullets, and horizontal rules are styled according to the look and feel of the theme. Themes can also include background images that appear behind your text and resemble watermarks on your pages.
Now that you have seen how you can apply a theme to an individual web page, let’s take a look at how you can use themes and other features of FrontPage, such as shared borders and navigation bars, to apply a consistent look to an entire web site.
This page shows the desired result—a web site with a consistent banner across the top of the page, horizontal navigation buttons beneath the banner that link to the high-level pages in the web site, and the same navigational items repeated on the left side of every page in the site.
You achieve these results by using shared borders, a banner, and navigation bars.
· Shared Borders are design elements that are placed along the top, left, right, and/or bottom edge of a web page and are repeated consistently across every page in the web site. In many ways, shared borders are like putting common headers, footers, and left or right borders on every page—or select pages— in your web site.
· Page Banners are graphical bars or images that display the page title at the top of each page.
· Navigation Bars are visual elements that link pages together. (In FrontPage 2000, navigational elements are implemented in one convenient View—the Navigation View—so you don’t have to set up navigation on each individual page.)
These three features can be used together to create an effective design for your web site. For example, placing a page banner within a shared border allows you to add the corresponding titles to multiple pages in your site at one time. It is common to place a page banner that you want to show on every page inside of a top shared border.
In the example, a top shared border contains a page banner (the Adventure Works logo) and horizontal navigation buttons. A left shared border contains hyperlinks and an image. When designing a site, you can place these shared borders so that they appear on every page of the web site, or just on selected pages.
If a theme has also been applied to a page, the page banner picks up the styles and graphics from the theme. In the example, the Adventure Works logo on the top of this page was specified in the custom Adventure Works theme we created.
FrontPage makes implementing a navigational system easy. When you first create a FrontPage-based web site, you may or may not have a navigation bar, although many of the web site templates that come with FrontPage 2000 automatically include navigation bars. Since you probably want the navigational elements to appear on each page, they are usually used in conjunction with shared borders. In our example, the dark rectangular buttons underneath the top banner are navigation buttons and are contained within a top shared border.
· You can designate the titles of your web pages in the Navigation View of FrontPage. Each page’s banner and the site’s navigation buttons pick up the correct page titles from the Navigation View. When a title is changed in Navigation View, the revision is automatically implemented in the page banner and on any associated navigation buttons.
In this example, the names on the horizontal navigation buttons under the page banner came directly from the second level of our site—“products,” “buy now,” “events,” “search,” and “about us.” If we renamed the page called “events” to “classes,” the horizontal navigation button would automatically be changed to “classes.” Maintaining your site navigation in Navigation View is a convenient and automatic way to keep your site structure functioning well.
Now that you know what themes, shared borders, page banners, and navigation bars are, we’ll describe how we put these elements together in our sample site.
In this case, we started with the theme called Blank and then customized the banner, the horizontal navigational buttons, and the fonts and font colors to suit us. We saved that theme as “Adventure Works.” After we saved our custom theme, it was then automatically made available to apply to Word documents, Access documents, and other FrontPage-based web sites. To learn how to make a custom theme available on other computers, see Copying Custom Themes from Computer to Another later in this document.
After we created our custom theme called Adventure Works, we applied it to all of the pages in our web site. Applying a theme changed the document fonts and font colors, but did not automatically add navigational elements to the page. Setting up site navigation is accomplished using the Navigation View and by applying shared borders.
Next, to have FrontPage automatically set up the navigational buttons on your pages, you need to tell FrontPage how your pages relate to one another. This is done in Navigation View, which you can access by either clicking the Navigation button on the Views bar, or by selecting View and then choosing Navigation from the standard menu.
In the Navigation View pane, you can design the navigational system for your site by creating a visual hierarchy that represents the relationships between the pages. Simply click and drag files from the Folder List to the area below the Home Page, and then place pages underneath those pages to set up how the pages should link to another.
For the Adventure Works site, we created five pages under the home page. These five pages are considered the “child level” under the Home page, and represent the navigational links we want available on every page in the web site.
Now that FrontPage knows how your pages should link to one another, you just need to add shared borders to your pages to tie it all together. To access the Shared Borders dialog box, select Format, and then Shared Borders from the standard menu.
For the sample web site, we selected the options for All Pages, Top, Include navigation buttons, Left, and Bottom.
Now that we’ve added the shared borders to our pages, we can see that we need to make some modifications to get them to appear exactly the way we want. You will find that each design you use will require some level of adjustment. In our example, we made the following changes:
a) The margins needed to be changed so that the banner was in the top-left corner. To fix this, we right-clicked on the page, and selected Page Properties. On the Margins tab, we specified the Top Margin and Left margin as zero, which moved the page banner and shared border to the top-left corner of the page.
b) Because of the design of our page banner, we chose to not have page titles appear on the top of each page. However, when you add a page banner to a page, the page title is displayed by default. Therefore, in our custom theme, we selected the smallest font possible (8 point) for the banner text and matched the font color to the bottom of the mountains in the page banner. Setting the text color to match the graphic color made the text invisible on the page. We were careful to use short page titles. If they got too long, they would appear on the page banner, or would be too long to fit in the space on the navigation buttons.
c) To change the appearance of the navigation bar, double-click the text that says, “Edit the properties for this Navigation Bar to display hyperlinks here.” to bring up the Navigation Bar Properties dialog box..
We selected Child pages under Home so that the five top-level pages we had indicated in the Navigation View would show on every page. We also selected Horizontal orientation, and to have Buttons instead of Text. If you chose to have text navigation, you would see simple hyperlinks instead of graphical buttons labeled with page titles. Our custom theme indicated the specific graphical design of the buttons. Once we clicked OK, the top-level page banner and horizontal navigation buttons were set.
d) When we then previewed the page in the browser (by selecting Preview In Browser from the File menu), the banner and horizontal navigation buttons were centered on the page. Since we wanted them to be left justified, we went back into Page View, clicked the banner and the buttons, and then clicked the Align Left button on the formatting toolbar. The banner and buttons were then left justified.
e) After looking at our Web page, we decided that we didn’t want to include a left-hand navigation bar. Instead, we wanted to create our own list of hyperlinks, and add a graphic to that area. To achieve this effect, we clicked the left-hand navigation area, then inserted a one-cell table, right-clicked on it, and then specified it as 95 pixels wide. (We did this so that it would be the exact same width as the horizontal navigation buttons, which were designed to be the same width as the gold part of the page banner.) We also specified that we wanted to have no border or cell padding (horizontal spacing between the cell border and the text) on the table. Then we used the color picker (under More Colors) to select the gold color from the mountains to use as the background color for the table. From there, we clicked in the table and started creating the list of hyperlinks.
f) We did the same thing for the bottom border, where we simply typed, “Adventure Works is proud to donate 2% of net profits to charities that support the environment,” and then changed it to a smaller font.
g) The Child Pages under Home option in the Navigation Bar Properties automatically adds two buttons, Home and Up, to the horizontal navigation bar. Since the rest of the buttons are in lowercase letters, we wanted to change “Home” to “home,” and “Up” to “up.” We did this by selecting Tools, then Web Settings, then the Navigation tab, and then changing the text.
Now the pages on the site have the exact look and navigation features we want.
In the following exercises we will walk you through the step of creating a sample web site. You set up your navigational system, add a page banner, a navigation bar, and then apply and experiment with themes.
Start Microsoft FrontPage 2000 and access Navigation View (click Navigation from the Views bar, or select Navigation from the View menu).
1. From the File menu select New and then Web.
2. Select One Page Web.
3. Click OK. Note: Although the home page for a web site can have any name, FrontPage uses the default file name “index.htm” if you are authoring your web from your hard disk or a network drive, and “default.htm” if you are authoring from a web server or Personal Web Server. Your web server may have yet a different file name for the default file. Check with your web administrator to find out if there are any naming conventions you should follow. In these exercises, we refer to this page as your home page.
4. From the File menu select New and then choose Page. A new page is added below the Home Page in the Navigation View. (Alternately, you can click on Home Page, and press the Insert key to insert a new page.)
5. Repeat the previous step until you have three pages under your home page.
6. Double-click on Home Page to open it in Page View. You will see a blank page. Although you have indicated in Navigation View how the four pages of your site are related, you don’t see the navigation bars because they have not been added to the pages yet.
1. From the Format menu, select Shared Borders. The Shared Borders dialog box appears.
2. Under Apply to, select the option for All pages.
3. For this sample site, select Top, Left, and Bottom. Under Left, select Include navigation buttons.
4. To view the effects of adding shared borders, double-click your home page from the Folder List. Your page will look like the example to the right:
You’ll notice that comments have been added to your pages. In later steps we will replace these comments with text and graphics using the themes feature.
To insert a page banner
1. Click the text at the top of the page that reads “Comment: This border appears in all pages in your web. Replace this comment with your own content.”
From the Insert menu, choose Page
Banner. The Page Banner Properties dialog box appears.
3. Click OK to add a Picture page banner to your page with the title “Home Page.” The banner will not appear as a picture until you apply a theme.
4. Click the text area at the bottom of your page that reads “Comment: This border appears in all pages in your web site. Replace this comment with your own content.”
Type “This page was created with Microsoft
You now have a page with a banner, a left navigation bar, and a footer. These common elements will appear on every page of your site.
1. Place the cursor over your navigation bar and double-click. The Navigation Bar Properties dialog box appears.
2. Select which hyperlinks to add to page. For this example, choose Child Level.
By default, the navigation bar uses the Child level pages and the navigation links appear as text instead of graphical buttons. When adding or editing the navigation bar properties, you can choose which pages appear on your navigation bar by selecting one of the following:
· Parent level—Pages that are one level above the current page in the hierarchy.
· Same level—Pages that are on the same level in the hierarchy.
· Back and next—The previous and next page on the same level.
· Child level—Pages that are one level below the current page in the hierarchy.
· Top level—Pages that are on the same level as the home page.
Child level under Home—Pages that are one level
below the home page.
Additionally, you may choose to add your navigation bar to these pages:
· Home page—The home page of the site.
· Parent page—Only the page immediately above the current page in the hierarchy.
The default vertical navigation bar for the home page has plain text labels, and the default horizontal navigation bar has graphical buttons. You can use buttons instead of text on the vertical navigation bar by double-clicking the navigation bar and selecting Buttons as the preferred appearance of the hyperlinks. Likewise, you can change the graphical buttons to text links by double-clicking the horizontal navigation bar and selecting Text.
If you want to change the hierarchical levels of pages in the navigation structure of your FrontPage-based web site, switch to the Navigation View, then click and drag pages to the desired positions in the Navigation pane.
3. In the lower portion of the dialog box, select Buttons.
4. Click OK. Your page will not visibly change, since your only action was to choose buttons instead of text. Buttons only appear after adding a theme, which happens in the next step.
1. From the Format menu, choose Themes. The Themes dialog box appears
2. Select All Pages and then click on an item in the list of themes to preview a theme.
For this sample web site, select the theme
called “Straight Edge” from the list.
Note: If you don’t see the long list of themes shown here, click the “Install Additional Themes” option to install more themes from the FrontPage or Office CD-ROM.
4. Click OK. Since you selected “All Pages” above, the theme is applied to all pages on your FrontPage-based web site. Your page will look like the one shown to the right.
Remember to rename your Home Page and any pages titled “New Page,” by going into Navigation View, right-clicking on the page, and selecting Rename.
You’re done applying your theme!
You can now modify colors, styles, and buttons in your theme to give it your own unique style.
1. From the Format menu, select Themes. The Themes dialog box appears.
2. Click Modify. Three new buttons appear: Colors, Graphics, and Text.
3. Click Colors. The Modify Theme dialog box appears. The Color Schemes tab is active, and displays a list of color schemes.
4. Experiment with various color schemes by clicking on scheme name. When you find one you like, click OK.
5. Before applying the modified theme, you must first save it. Click Save and type in a name. In this example, type “Straight Edge-Modified.” Click OK.
Tips for Modifying Colors
To create Custom colors, select an item from the dropdown list on the Custom tab. In this example, choose “Banner Text.” Next, select a color from the Color dropdown list. To create your own color, select More Colors located below the color choices. Here you may enter a hexadecimal value of a color or click the hexagonal color palette. For even more control, select Custom and then click and move your cursor around the square color palette until you find the desired color. Click Add to Custom Colors, and then click OK again to add the custom color to your palette. This color is now available to any page or image on your FrontPage-based web site.
To borrow a color, you may want to play with the Select button (with the eyedropper on it) located in the More Colors dialog box. When you click this button, the cursor turns into an eyedropper. You can then click any color on any screen open on your desktop and apply that color to the item selected in the Custom tab.
Colors: A single theme can have two sets of colors associated with it—one
called Vivid Colors, and called Normal Colors. This is commonly done to give
the home page a special look with bright colors and the subsequent content
pages the same colors but more subdued. To make a custom theme with Vivid
Colors, select the Vivid Colors box in the Themes dialog box,
and then make your custom selections. Clear the Vivid Colors checkbox
and select colors to save your theme with Normal Colors selected.
1. From the Format menu, select Themes.
2. Click Modify, and then click Graphics. The Modify Theme dialog box appears.
3. Select an item from the dropdown list at the top of the dialog box. In this example, “Horizontal Rule.”
4. Browse for an image you would like to use instead of the default image in the theme. Try experimenting by choosing different options from the Item dropdown list and see which aspects of your theme you can modify.
5. Click OK to save the theme with the images you selected.
Tips for Changing Graphics
Graphics that you change in a FrontPage theme can either be graphics that you create yourself (using paint or drawing software), or graphics that you acquire from other sources, such as clip-art libraries or from a graphic designer. Graphics must be in either .gif or .jpg format before you use them with your theme. Graphics used in a banner or button appear behind the text. Try replacing the default image with an image of your own to see the effect.
A single theme
can have two sets of graphics associated with it—one set of Active Graphics
and another separate set of Normal Graphics. This is commonly done when you
want your home page to have a special look with animated graphics and hover
buttons, but you want subsequent content pages to be faster to load. You
could apply the theme with Active Graphics to your home page and the theme
with Normal Graphics to the rest of your pages. To make a custom theme with
Active Graphics, make sure that the Active Graphics box is checked in the Themes
dialog box is checked, then make your custom selections. Do the same with the
Active Graphics box unchecked to save your theme with non-active graphics.
1. From the Format menu, select Themes.
2. Click Modify, and then click Text. The Modify Theme dialog box appears.
3. Select an item from the dropdown list at the top of the dialog box. In this example, type “Heading 1.”
4. Choose a font style from the Font list. You’ll see a preview in the pane to the right.
5. When you have found a font you like, click OK to apply the font style to your theme. You can experiment with choosing different aspects of your site from the Item drop-down list and applying different fonts.
Click OK to save font choices and apply
them to your theme.
Tips for Changing Font Styles
FrontPage 2000 allows you a great deal of flexibility for changing text styles. If you want to change other aspects of a text style besides the font (typeface)—such as the paragraph alignment, indentation, spacing, or numbered or bulleted lists—click More Text Styles in the Modify Theme dialog box.
Important: Modifying text styles may require
Cascading Style Sheets (CSS). You can specify that your web site uses CSS by
clicking Apply using CSS in the Themes dialog box. Not all
browsers support CSS fully. Avoid this option unless you know that all of the
users viewing your pages have completely CSS-compatible browsers.
FrontPage 2000 comes with a theme designed for you to customize called the Blank theme. If you apply the Blank theme to your web, you will see that this is a fairly plain theme. (To apply this theme, select Theme from the Format menu and then choose Blank from the list of themes.)
Here are some tips on customizing the Blank theme:
· First, save the Blank theme as a new custom theme that you will modify. Click the Format menu and select Theme. In the list of themes, select the Blank theme. Select Modify, then select Save As, and save it as “Custom Theme.” Click OK.
· To apply your new custom theme, click Apply Theme to All Pages and select Custom Theme from the list of themes. Click OK.
· When you apply a theme to a web site, FrontPage creates a directory that contains all of the elements in the theme. To view this directory, select Tools, click Web Settings, then click the Advanced tab. On the Advanced tab, click Show documents in hidden directories, and click Apply. When asked if you want to refresh the web, select Yes, and then click OK.
· You will now be able to see the _Themes directory in the folders list, with the custom-Theme directory underneath. The custom-Theme directory contains all of the images for your theme.
· Next, use your favorite image editing tool like Image Composer or Microsoft PhotoDraw™ 2000 business graphics software to customize each of the graphical elements and copy them to a directory on your web site. When you choose your graphics for your custom theme, select them from that directory. FrontPage automatically copies your graphics into the _Themes/custom-Theme/ directory, and updates your theme.
· The themes that ship with FrontPage 2000 were designed to work at a wide variety of screen resolutions. To ensure compatibility with these resolutions, we recommend that you use the same dimensions in your custom graphics as the graphical elements in the existing themes.
Once you’ve created a custom theme, you may want to share it with others or use it from another computer.
First, you should understand how themes
work. Themes are shared resources that are available to users of FrontPage 2000
and Office 2000. Therefore, themes are stored in a common directory on the
user’s hard disk so that they can be accessed by different applications. The
directory they are stored in can vary on each computer based on the user’s
operating system, and how they have installed their software. Here are the
default locations for each operating system:
Windows 95 or Windows 98
Windows NT® Workstation or Server 4.0
When you create a custom theme, a new file folder is created in the Themes directory on your hard drive with a name FrontPage 2000 generates based on the name you gave your custom theme. A user on a different computer can access your custom theme by either opening a web site that contains that theme, or by copying the custom theme directory from your hard drive to the appropriate directory on their computer’s hard drive.
For example, say a user on a system running the Windows 95 operating system has created a custom theme called Proposal. This theme resides in the c:\windows\application data\Microsoft\themes\proposal\ directory. The user copies the entire \proposal directory to a network drive to make it available to anyone with access rights to that network drive. When someone using the Windows NT operating system wanted to use the Proposal theme, it, they would copy the \proposal directory to their c:\winnt\profiles\user\application data\Microsoft\themes\ directory. The next time the user restarts FrontPage 2000 and selects Theme from the Format menu from within FrontPage, Proposal will be one of the themes listed.
The information contained in this document represents the current view of Microsoft Corporation on the issues discussed as of the date of publication. Due to the nature of ongoing development efforts and because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information presented after the date of publication.
This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT.
Ó 1999 Microsoft Corporation. All rights reserved.
Microsoft, FrontPage, the Office logo, PhotoDraw, Windows, and Windows NT are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.
Other company or product names herein may be the trademarks of their respective owners.