Navigational Elements: Building Bars and Menus

This section takes a more specific look at the navigational bars and menus that can be produced through FrontPage. You will see the specifics of building bars and menus based on site navigation and walk through the process of building custom bars and menus. At the end of this section, the process of editing look and feel of your navigational elements (or creating your own) will also be examined.

NOTE

Automatic navigation elements can only be created if you have assigned your site navigation through the Navigation view, discussed previously in this chapter.

Insert the cursor where you would like the navigational element to be created. Select Navigation from the Insert menu. FrontPage will open the Web Component dialog box with the Link Bar option preselected. The next part of this chapter walks you through the process of adding the navigational elements you want.

If you want link bars in your site but don't want to go through the process of putting your entire site through the Navigation view interface, see "Link Bars Without Navigation View" in the "Troubleshooting" section at the end of this chapter.

Choosing a Bar Style and Orientation

The first step of menu or bar creation requires selecting a bar style. The interface for selecting a style is shown in Figure 8.11. You get from one step to the next by clicking the Next button.

Figure 8.11. The options for choosing a bar style lets you pick button styles from any theme installed on your copy of FrontPage.

The selections offered by FrontPage come from all themes currently installed your copy of FrontPage. This includes Themes that came with the product, modified themes created by the user, and themes that were either directly purchased by a third-party directly or came as part of a FrontPage template purchase. At the end of the list are a number of text-only HTML styles that aren't associated with any themes.

The second step in the process is in selecting orientation. Your options are left to right or top to bottom.

Bars Based on Site Navigation

If you are building a bar based on site navigation, FrontPage will then ask you which pages you'd like added to the navigational element through the interface shown in Figure 8.10.

You can select each option in the interface to see which pages they effect. The options are as follows:

• Parent Level Links files one level above the existing file. This effect is good for pages that want to show where you came from.

• Same Level Links files on the same level. Used for showing all pages on certain levels without overwhelming with complete site content.

• Back and Next Links files to the right and left of the file as seen in Navigation view. If you want to specifically lead people through pages of your site, this link bar is perfect.

• Child Level Links files under the level of the existing file. Great for showing all "next step" options.

• Global Level Links all files in the Web. Perfect for making sure that the visitor knows every option.

• Child Pages Under Home Links all pages below the Home page. This approach produces the common top-level link bar approach that defines the areas of your site without getting too detailed.

Two toggle buttons also let you choose if you'd like FrontPage to include the home page and the parent page in the link bar.

NOTE

Selecting the Design tab in the Link Bar Properties dialog box will let you edit the style of the link bar if desired.

Back and Next Links

Back and Next links (the second link bar component option from Figure 8.9) only present links to the page immediately to the left and right of the page that the bar is added to. Back and Next are the only text associated with the buttons, not the specific page names.

This effect is most often used to walk a user through specific areas of a Web site. Back and Next links can also be used to effectively direct people through your site a page at a time, directing them to look at the pages you want them to in the order you specify.

Custom Bars and Menus

More often than not, developers will want to create link bars without a specific pattern (at least one that can be defined by selecting from a list). The third choice for creating custom link bars, Bar with Custom Links, allows you to create a custom bar and actually keeps these bars maintained on the system so that you can call them back and use them in different projects or pages if desired.

If you are selecting a custom bar or menu, FrontPage will prompt you to name the link bar. Then the final screen, shown in Figure 8.12, lets you create and edit custom bars at will. Note that the dialog box is the same as in the other link bars, but the options are different.

Figure 8.12. You can create as many link bars as you'd like through this interface.

NOTE

You can also make your own navigational structure without the component or use the new FrontPage Interactive Buttons to generate a custom navigation system.

If you do so, you'll have considerably more control over the look and feel of your navigation, but you'll also have to update them accordingly each time you make a site navigation change.

You can create a new link bar by selecting the Create New button or select a bar from the dropdown list. Links can be added, removed, modified, or moved by selecting the appropriate button in the interface. You can add as many links and as many custom bars as you'd like.

When you add a link, FrontPage opens the Add to Link Bar dialog box, shown in Figure 8.13. You can use the interface to quickly find and link to any file in your Web. You can also use the interface to link to a third-party site as shown in this example.

Figure 8.13. The Add to Link Bar dialog box lets you combine internal and external links to your bar. In this example, a link to FrontPage World is shown.

In addition, FrontPage gives you the opportunity to have your custom link bar link to the home page of your site or parent page from which the link is located. You can also link to an email address if desired.

Once your link bar is created, you can modify it easily by right-clicking the bar and selecting Link Bar Properties. FrontPage will also append an add link option to any custom link bar in FrontPage Design view, providing a means to quickly add a link to your bar as seen in Figure 8.14.

Figure 8.14. A custom link bar will show an add link option in Design view. Selecting this will let you quickly add another link.

Bars and Menu Look and Feel

Although FrontPage provides numerous options for menu bar look and feel, developers also have the ability to edit them to create the exact look desired. This is done by modifying a Theme file or selecting a different font choice for simple text bars.

As mentioned previously, bar elements are taken from Themes currently installed on your system. If you'd like to modify the buttons in your bar, you will need to modify the Theme accordingly. If you'd like to create a new look and feel for a bar from scratch, you will need to create a new Theme and install it on your system first.

For specific information on the use and modification of FrontPage Themes, see "Using Themes," p. 133.

TIP

A number of great free themes (and therefore Link bar buttons) can be found at http://freethemes.frontpagelinks.com.

By default, FrontPage will make a text link bar the font style and size of the page's default font. If you'd like to change either font or size, right-click the text bar and select Font from the menu options.

Modifying Link Bar Properties

To edit the properties of any link bar, double-click the link bar from within Design view. FrontPage will open the Link Bar Properties dialog box, shown previously in Figure 8.10, and will allow you to modify any element of the link bar.

By default, the General tab will open, allowing you to set the type of hyperlink to be added to the bar. If you'd like to go into the style of the bar, select the Style tab and make your changes to formatting accordingly.

If you need more link options from your link bars than what is provided through the link bar interface, see "Link Bar Options Don't Meet My Needs" in the "Troubleshooting" section at the end of this chapter.