Lesson 2: Designing and Publishing a Web

Adding Shared Borders and Navigation Bars

For the Millennium Celebration Web, you will let FrontPage manage the hyperlinks that site visitors will click to move around the pages in your Web site. FrontPage achieves this with a combination of two powerful features: shared borders and automatic navigation bars.

Shared borders are page regions reserved for content that you want to appear consistently throughout the pages in your Web site. These borders can contain page banners and navigation bars. Page banners display the page title you gave each page when you created or saved it. Navigation bars are a row or column of hyperlinks to the other pages in the current Web site. FrontPage can automatically update shared borders and navigation bars, so the navigation structure of your Web site will always work correctly, even when you add, move, or delete pages from the Web site's structure.

In Lesson 1, you already completed the first step required for automatic navigation bars: creating the basic Web site structure in Navigation view. Because you have already done this, you'll now enable shared borders throughout your Web site.

To create shared borders across a Web site

1. Click the Navigation icon on the Views bar to switch to Navigation view.
2. Click the Folder List button to hide the Folder List in this view.
3. On the Format menu, click Shared Borders.
   In the Answer Wizard, type:
   How do I insert shared borders on pages?

   FrontPage displays the Shared Borders dialog box. Here, you can specify where on your pages FrontPage should insert shared borders. Because your Web site structure has two levels of pages -- the home page and the pages below it -- you will use two kinds of shared borders and two kinds of navigation bars.

4. In the Shared Borders dialog box, make sure the All pages option is selected.
5. For a horizontal shared border, select the Top check box and select the Include navigation buttons check box just below it.
6. For a vertical shared border, select the Left check box and select the Include navigation buttons check box below it.
7. Leave the Right and Bottom check boxes unchecked, and then click OK.

   FrontPage creates shared borders and default navigation bars for all the pages in the current Web site. You'll see what these look like when you return to Page view.

Next, you'll customize the appearance of the default navigation bars. Because they are shared across all pages in the current Web site, you can change their properties on any page and the change will be reflected across the entire Web site.

To test navigation bar hyperlinks

1. In Navigation view, double-click the Home Page.
2. Click the Folder List button to hide the Folder List in Page view.

   Note the changes FrontPage has made to the home page. It now contains a top and left shared border. The top border contains a page banner with the name of the current page, and the left border contains a list of navigational hyperlinks that look exactly like the ones you manually created at the beginning of this lesson.

   In Page view, you can easily test hyperlinks that point to pages and files in your Web site.

   In the Answer Wizard, type:
   How can I test a hyperlink?
3. Hold down CTRL and then click the first navigational hyperlink named Background on the left side of the page.

   FrontPage opens the page the hyperlink points to. On the Background page that is now open, shared borders and navigation bars have also been inserted. On this page, however, the links to the other pages are displayed in the top border, just under the page banner. This is because FrontPage uses the Web site structure you created in Navigation view to determine the level the current page is on.

   By default, the top shared border points to pages on the same level as the current one, whereas the left border points to pages below the current one. In the next section, we'll change this default to another design.

To customize navigation bars

1. On the Window menu, click index.htm.

   FrontPage brings the home page back into view.

2. In the top border of the home page, double-click the text that reads Edit the properties for this Navigation Bar to display hyperlinks here.
   In the Answer Wizard, type:
   How do I make a navigation bar?

   Double-clicking a navigation bar opens the Navigation Bar Properties dialog box. Here, you can customize the appearance of a navigation bar and the hyperlinks it creates.

   Currently, the horizontal navigation bar is set to link to pages on the same level. Since the home page is on its own level in your navigation structure of your Web site, there are no other pages on the same level. FrontPage therefore doesn't show any navigation bars in this shared border.

   For the Millennium Celebration Web, we want to have a horizontal navigation bar on the home page and vertical navigation bars on the other pages. To do this, we'll change the default setup of both navigation bars. You can make these changes on the current page and they'll be reflected throughout your Web site.

3. In the Navigation Bar Properties dialog box, click Child level, clear the check boxes for Home page and Parent page, and then click OK.

   FrontPage creates a navigation bar with hyperlinks to all the pages below the home page level.

4. Press HOME to deselect the navigation bar.

Your page should now look like this:

Note that the left navigation bar still contains the same set of hyperlinks as the top navigation bar. In the next steps, you'll remove the obvious redundancy, and format the left navigation bar so it is displayed only on the other pages that the home page points to.

5. In the left border of the home page, double-click the vertical navigation bar.
6. In the Navigation Bar Properties dialog box, click Same level, select the Home page check box, and then click OK.

   FrontPage changes the navigation bar to the placeholder text that reads "Edit the properties for this Navigation Bar to display hyperlinks here." This text is only shown in Page view while you work; it will not appear in a Web browser.

   By pointing the hyperlinks in this navigation bar to the same level as the home page, you are effectively removing the hyperlinks from the left border, because there are no pages on the same level as the home page. This also removes the redundancy between the horizontal and vertical navigation bars.

7. To save the home page, click Save on the File menu, or click the Save button on the toolbar.

Your page should now look like this:

8. On the Window menu, click background.htm.

   FrontPage brings the Background page back into view.

   Note that the changes you've made on the home page to both the horizontal and vertical navigation bars are automatically reflected here, as well as on all the other pages in your Web site.

   Excluding pages from navigation bars By default, all pages in your Web site's navigation structure are included in navigation bars. You can select pages to be excluded from your navigation bars by right-clicking the page in Navigation view and deselecting Included in Navigation Bars on the shortcut menu.