Add a Navigation Bar to a Web


It's easy to get lost when you're visiting the pages of a large site on the World Wide Web. One of the ways publishers make these Webs easier to use is through the use of navigation bars ”common text or graphic links that are associated with the main pages of the site.

Most commercial news and sports sites have navigation bars that lead to the main topics they cover. A sports site such as ESPN.com has links to its NFL, NBA, NHL, and Baseball pages on a navigation bar that's part of every page. If you dive down several links into ESPN's site while you're reading stories, you can get back to a starting point by using the navigation bar.

Navigation bars can be added to your own FrontPage Webs and placed in shared borders to make them appear on every page. There are four kinds of bars:

  • Vertical lists of text links

  • Horizontal lists of text links

  • Vertical lists of graphic links

  • Horizontal lists of graphic links

When you are working with a navigation bar, you don't create any of the hyperlinks that it contains. Instead, these links are determined by the navigational structure you have created for the Web in the Navigation view.

Figure 36.2 shows the Navigation view for a newly created site that used the Personal Web template.

Figure 36.2. Examining a Web's navigational structure.

graphics/36fig02.gif

Four of the five pages in the Personal Web are represented in the Navigation view. The fifth, myfav3.htm, is not present because it is not yet part of the Web's navigational structure.

The Navigation view establishes a parent-child relationship between the pages of a Web. In Figure 36.2, the page labeled Home Page is the parent of the other three pages: Interests, Photo Albums, and Favorites.

Pages are added to the Navigation view by dragging them from the Folders list. You can try this out with a new Personal Web by dragging the icon next to myfav3.htm over the Navigation view.

When you drag a page onto the Navigational view, keep hold of it by holding your mouse button down. A dotted outline indicates the relationship that would be established if you dropped the page at that location. The outline changes depending on where you have dragged the page and which page it is closest to.

Figure 36.3 shows an outline around the cursor that shows a parent-child relationship between the Favorites page and a new page that hasn't been dropped. The cursor is closest to the Favorites page.

Figure 36.3. Dragging a new page into the Navigation view.

graphics/36fig03.gif

You can pick up pages in the Navigation view and drag them to new locations. The easiest way to get a feel for this view is to drag a new page around and drop it at several different places to see what relationship is established.

In general, a page dropped above another page becomes its parent. A page dropped below a page becomes its child. A page that's dropped beside a page is its sibling and shares the same parent.

An exception: Pages dropped above a Web's home page will be orphans ”no lines will connect them to other pages. You can use this to start new parent-child groups that are completely unrelated to other pages of the Web.

In the Navigation view, a parent can have as many children as desired, but a child has only one parent.

Once you have established the Navigation view for a Web, it will be used to determine which links appear on the Web's navigation bars.

Navigation bars are added to a page with the Insert, Navigation Bar menu command. You also can edit an existing bar by double-clicking it in Page view. Both commands open the Navigation Bar Properties dialog box, shown in Figure 36.4.

Figure 36.4. Working on a navigation bar.

graphics/36fig04.gif

A navigation bar in FrontPage can display six different groups of hyperlinks:

  • Parent level ” Links to the parent of the current page and all of its siblings

  • Same level ” Links to all pages that are siblings of the current page

  • Back and next ” Links to the siblings immediately to the left (back) and right (next) of the current page

  • Child level ” Links to all pages that are children of the current page

  • Top level ” Links to all pages that have no parents

  • Child pages under Home ” Links to all pages that have the Web's home page as a parent

You also have the option of adding extra links for the Web's home page and the current page's parent, if these aren't already in the group .

The Navigation Bar Properties dialog box shown in Figure 36.4 contains a drawing of a Navigational view. As you choose the different hyperlink groups, this drawing will change to show the pages included in that group.

Two more things you can configure are a navigation bar's orientation (horizontal or vertical) and its appearance ( buttons or text).

The selection that you make will be immediately reflected in the Web. You can easily experiment with the different styles until you find one that you like.

graphics/alarmclock_icon.gif

If your Web does not have a theme applied to it, you will not see buttons on your navigation bar even if you select that option instead of text. FrontPage relies on themes to provide the buttons that are used on graphic navigation bars.


The Navigation view is used to provide the text that's associated with each hyperlink on a navigation bar. To change this text, right-click a page's icon in the Navigation view and select the Rename menu option.

This text appears on all navigation bars that link to the page, so it should be reasonably short to provide room for other links. It also is used on the page's banner ”a FrontPage component displayed in the top shared border of any Web that uses FrontPage's built-in themes.

Figure 36.5 shows the Favorites page from a Personal Web after myfav3.htm has been added to the Web's navigational structure. This page contains two navigational bars ”a horizontal one along the top and a vertical one along the left side.

Figure 36.5. A page with two navigational bars.

graphics/36fig05.gif

The horizontal bar along the top links to all pages on the same level and the Web's home page. (It also includes a button for the page itself, though FrontPage automatically removes this unnecessary link.)

The vertical bar only links to pages that are on a child level from the current page. Because myfav3.htm was established as a child to the Favorites page in the Web's Navigational view, it shows up on this bar.



Sams Teach Yourself Office Productivity All in One
Sams Teach Yourself Office Productivity All in One (Sams Teach Yourself All in One)
ISBN: 0672325349
EAN: 2147483647
Year: 2003
Pages: 474
Authors: Greg Perry

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net