Using link bars with Navigation view (book excerpt)

Applies to
Microsoft Office FrontPage® 2003
Book cover This article was excerpted from Microsoft® Office FrontPage® 2003 Inside Out by Jim Buyens. Visit Microsoft Learning to buy this book. View other articles written by Jim Buyens.

This is the fourth in a sequence of five articles excerpted from Chapter 13, "Creating Web Sites with Navigation View."

ShowSee links to all articles in this sequence

In this article

Using link bars with Navigation view

Creating a Link Bar With Custom Links component

Creating a Link Bar Based On Navigation Structure component

Setting Link Bar Based On Navigation Structure properties

Frequently asked questions about link bars

Using link bars with Navigation view

Navigation view, the Link Bar component, and the Page Banner component all work together in the following way:

  • In Navigation view, you arrange your pages and give them names.
  • Link bars use the relationships and names from Navigation view to build menus that jump among your pages.
  • The Page Banner component displays a page's Navigation view name as the heading of the page that contains it.

To learn more about the Page Banner component, see the fifth article in this sequence, Using page banners.

The Link Bars component automatically creates and maintains menu bars (which some people call jump bars) that connect the pages in your Web site. There are three kinds of link bars:

  • Link Bar With Custom Links     Displays hyperlinks based on a Navigation view Custom Link Bar.
  • Link Bar With Back And Next Links     Displays hyperlinks to the two pages immediately to the left and right of the current page, and at the same level.
  • Link Bar Based On Navigation Structure     Displays hyperlinks based on the Navigation view diagram. This means it can display links to all children of the current page, to all pages at the same level as the current page's parent, and so forth.

Top of Page Top of Page

Creating a Link Bar With Custom Links component

Designers using early versions of FrontPage often admired the convenience (and especially the appearance) of link bars but disdained the task of diagramming their site in Navigation view. What they really wanted, they said, was a link bar that they could add to a page and then configure manually.

The Link Bar With Custom Links component not only meets this need but adds a bonus. The bonus is that when you create a Link Bar With Custom Links component, FrontPage saves its list of hyperlinks as a named object in Navigation view. That way, if you have other pages that need the same collection of links, their Link Bar With Custom Links components can get them from the same named object.

Unfortunately, the following object names are both long and confusing:

  • Link Bar With Custom Links     This is a Web component that occupies space in a Web page and displays a list of links.
  • Custom Link Bar     This is a Navigation view object that stores a list of links for use in one or more pages. It is not a link bar, and therein lies the confusion. A better name for this object would have been Custom Link List or Custom Link Set, for example.

It is worth noting that you can create Navigation view Custom Link Bars first, and use them later in Link Bar With Custom Links components.

Here is the procedure for adding a Link Bar With Custom Links component to a Web page:

  1. In Design view, open the page that should display the Link Bar With Custom Links component.
  2. Set the insertion point where you want the Link Bar With Custom Links component to appear.
  3. Click Navigation on the Insert menu.

This displays the Insert Web Component Wizard, shown in the following illustration.

Wizard page with component and bar types

  1. Make sure that Link Bars is selected in the Component Type list at the left.
  2. Make sure that Bar With Custom Links is selected in the Choose A Bar Type list at the right.
  3. Click Next to display the next page of the wizard, shown in the following illustration.

Wizard page with bar style

  1. Choose any of the bar styles listed in the Choose A Bar Style list.

The first entry in the list uses the same theme as the Web page that will contain the Link Bar With Custom Links component. Following this are options for using any other theme available in FrontPage. Scrolling to the end of the list reveals various text-based options.

  1. Click Next to display the page shown in the following illustration.

Wizard page with link bar orientations

  1. Choose an orientation — horizontal or vertical — and then click Finish.

FrontPage displays the Link Bar Properties dialog box, shown in the following illustration.

Link Bar Properties dialog box

The General tab of this dialog box contains the following options to configure the hyperlinks that the Link Bar With Custom Links component will display:

  • To use the links from an existing Navigation view Custom Link Bar, select its name in the Choose Existing list.
  • To create a new Navigation view Custom Link Bar, click the Create New button. This displays the Create New Link Bar dialog box, shown here. Give the new Custom Link Bar a name, and then click OK.

Create New Link Bar dialog box

FrontPage displays this dialog box automatically if the current Web contains no Navigation view Custom Link Bars.

  1. Use the following buttons to modify the links associated with the Custom Link Bar that you specified in the preceding step. These changes will affect all Link Bar With Custom Links components — regardless of page — that use the same Custom Link Bar:
    • Add Link     Displays the Add To Link Bar dialog box, shown in the following illustration. In the Text To Display box near the top, type the text that you want the hyperlink to display. In the Address box near the bottom, type the hyperlink location. Click OK.

Add to Link Bar dialog box

  • Remove Link     Deletes the selection in the Links list.
  • Modify Link     Displays a Modify Link dialog box that strongly resembles the Add To Link Bar dialog box shown in the preceding illustration. Update the Text To Display and Address boxes as required, and then click OK.
  • Move Up     Moves the selection in the Links list one position higher in the list.
  • Move Down     Moves the selection in the Links list one position lower.
  1. Use the following check boxes to add links to the current Link Bar With Custom Links component. These settings will affect only the current instance of the component:
    • Home Page     Adds a link to the current Web site's home page.
    • Parent Page     Adds a link to the parent of the page that contains the Link Bar With Custom Links component.
  2. Click OK.

Top of Page Top of Page

Creating a Link Bar Based On Navigation Structure component

This section describes how to create a Link Bar With Back And Next Links and a Link Bar Based On Navigation Structure. The section groups these topics together because the Link Bar With Back And Next variety is actually a type of Link Bar Based On Navigation Structure.

Using a Link Bar Based On Navigation Structure requires first entering structure information in Navigation view and then inserting and configuring one or more link bars on each Web page.

A Link Bar Based On Navigation Structure component that you insert in Design view reflects the current structure in Navigation view. You can insert link bars, change their appearance, and configure their options in Design view, but you can't change their hyperlinks. Instead, you diagram your site in Navigation view and then let FrontPage create the appropriate links.


ShowInside Out    Troubleshooting: Updates to the Navigation pane don't appear in Design view

After renaming or relocating pages in the Navigation pane, pages open for editing in Design view might not immediately reflect the changes. This is because the Navigation pane changes are still in a pending state.

To finalize your Navigation pane changes and update any open pages, right-click the Navigation pane background, and then click Apply Changes on the shortcut menu. Closing the Navigation pane by displaying the Folder List or another FrontPage view has the same effect.

Assuming that you have already diagrammed your Web site in Navigation view, add a Link Bar Based On Navigation Structure by doing the following:

  1. Open a page, and set the insertion point where you want the Link Bar Based On Navigation Structure to appear.
  2. Click Navigation on the Insert menu.
  3. Verify that Link Bars is selected in the Component Type list.
  4. Click Bar Based On Navigation Structure in the Choose A Bar Type list.

If you want to create a Link Bar With Back And Next Links, choose either Bar With Back And Next Links or Bar Based On Navigation Structure. If you choose Bar Based On Navigation Structure, be sure to select Back And Next later in the Link Bar Properties dialog box.

  1. Click Next to display the next wizard page. Choose a theme, and then click Next.
  2. Choose an orientation — horizontal or vertical — and then click Finish.
  3. Make your choices in the Link Bar Properties dialog box, shown in the following illustration. (The next section describes the options available in this dialog box.) Click OK.

Link Bar Properties dialog box, General tab

Top of Page Top of Page

Setting Link Bar Based On Navigation Structure properties

FrontPage provides the dialog box shown in the preceding illustration for controlling the content and appearance of a Link Bar Based On Navigation Structure component. The same dialog box applies for both creating new Link Bars Based On Navigation Structure and modifying existing ones. The following sections and controls appear on the General tab:

  • Hyperlinks To Add To Page     You can apply only one of the following six options to a single Link Bar Based On Navigation Structure. However, nothing prevents you from placing several Link Bar Based On Navigation Structure components on the same page, each configured with different options:
    • Parent Level     Specifies that the Link Bar Based On Navigation Structure should contain hyperlinks to all pages one level higher than the current page, as positioned in Navigation view.
    • Same Level     Specifies that the Link Bar Based On Navigation Structure should list all pages at the same level as itself.
    • Back And Next     Includes the two pages immediately to the left and right of the current page, and at the same level.
    • Child Level     Includes all pages that have the current page as their parent.
    • Global Level     Includes the home page and any other pages drawn at the same level.
    • Child Pages Under Home     Includes all the pages one level below the home page.
  • Additional Pages     You can include either or both of the following pages regardless of the choice you made in the Hyperlinks To Add To Page section:
    • Home Page     Adds the home page to the Link Bar Based On Navigation Structure.
    • Parent Page     Adds the parent of the current page.

To control the appearance of the Link Bar, click the Style tab of the Link Bar Properties dialog box. The following illustration shows this tab.

Link Bar Properties dialog box, Style tab

Use these settings to control the link bar's appearance:

  • Choose A Style     The first option in this list tells FrontPage to format the link bar in conformance with the same theme that controls the rest of the current page. The last few options format the link bar as plain text. The options that are in between use any other available themes to format the link bar.

 Tip   Plain-text link bars needn't be plain. You can format text link bars with all the colors, fonts, and typographical properties available for other text on your Web page.

  • Orientation And Appearance     The following options control the appearance of the Link Bar Based On Navigation Structure:
    • Horizontal     Arranges the Link Bar Based On Navigation Structure options as a single line of text.
    • Vertical     Arranges the Link Bar Based On Navigation Structure options vertically, with each option on its own line.

You can choose either Horizontal or Vertical, but not both.

  • Use Vivid Colors     If the theme you select in the Choose A Style list includes soft and vivid colors, selecting this check box selects the vivid ones.
  • Use Active Graphics     If the theme you select in the Choose A Style list includes optional buttons that change appearance when the mouse pointer passes over them, selecting this check box activates those buttons.

FrontPage labels each option in the Link Bar Based On Navigation Structure component with the title of the target page as it appears in Navigation view. This provides an incentive to keep the Navigation view names short but descriptive. To change the label appearing in a Link Bar Based On Navigation Structure component, change the title of the target page in Navigation view.

The Navigation tab of the Site Settings dialog box, shown in the following illustration, contains options for setting the Home, Parent, Previous page, and Next page labels. The default labels are, respectively, Home, Up, Back, and Next. To globally apply your own labels, choose Site Settings from the Tools menu, select the Navigation tab, and then type the text you want Web visitors to see.

Site Settings dialog box

The following illustration shows a horizontal text link bar in Navigation view. The bar appears between the two horizontal lines.

Horizontal text bar in Navigation view

The following illustration shows a vertical link bar built using picture buttons. FrontPage gets the button picture from the Web page's theme. (Graphical link bar buttons are a popular feature.)

Vertical link bar with picture buttons

Top of Page Top of Page

Frequently asked questions about link bars

  • Is there any way to generate graphical link bar buttons without applying themes to a Web page?

Yes. You can select any style you want on the Style tab of the Link Bar Properties dialog box.

  • Is there any way to set up link bars without diagramming a site in Navigation view?

Yes. Create a Link Bar With Custom Links component as described in the section Creating a Link Bar With Custom Links component in this article.

  • After diagramming a site, is there any way to add a Link Bars Based On Navigation Structure component to all of its pages automatically?

Yes. The Shared Border feature can do exactly that. However, lest happiness overcome you, you will still need to manually edit each page and take out your old, hand-coded navigation menus.

  • Why would a Link Bar component appear to be blank or missing?

If you configure a Link Bar Based On Navigation Structure with options that don't apply to the current page, the link bar will appear blank or missing when you open the page in a Web Browser. Here are some situations in which this might occur:

  • The home page contains a Link Bar Based On Navigation Structure that is configured to display links to all parent pages. By definition, of course, the home page has no parent.
  • A page contains a Link Bar Based On Navigation Structure that is configured to display links to all pages at the same level, but the current page is the only page at its particular level.
  • A page at the bottom of the navigation structure contains a Link Bar Based On Navigation Structure that is configured to display all child pages. Because the current page is at the bottom of the navigation structure, it has no children.

This behavior occurs most often when you propagate identical link bars to many pages through such means as shared borders and templates. If the link bar isn't in a shared border, either reconfigure the link bar or delete it and create a new one.

Deleting or reconfiguring a link bar in a shared border will affect other pages that use the same border, and on which the link bar is working properly. In such a case, add a new link bar outside the shared border and configure it to display pages at the correct level.

Top of Page Top of Page

Next article in this sequence

Part 5: Using page banners

About the author     Jim Buyens is a FrontPage, Web programming, and networking expert who has written several books, including Microsoft® FrontPage® Version 2002 Inside Out, Web Database Development Step by Step .NET Edition, Faster Smarter Beginning Programming, and Microsoft® Windows® SharePoint® Services Inside Out, all from Microsoft Press. Jim is a Microsoft Most Valuable Professional (MVP) who contributes extensively to the Microsoft FrontPage online communities. He currently develops Web-based business systems for the telecommunications industry.

 
 
Applies to:
FrontPage 2003