Lipstick Monkey Design
home - resources - help center - faqs - contact

Inserting Navigation/Link Bars

What are Navigation or Link Bars?

You probably already know what this is! In most web sites, there is some way to navigate the site. Usually there are buttons or text links that are in the same place on every page that you can click on to go from page to page. These are often called "navigation bars."

When you see navigation bars made up of images that change when you mouse over them, you're seeing a "mouseover effect," typically created with a bunch of different images and some JavaScript programming code. But what if you're not a JavaScript expert? FrontPage makes it easy with what it calls "navigation bars" or "link bars" -- you define a few parameters, and it generates the pictures, text, and code for you! These navigation bars are typically built based on your navigation structure, but FP 2002 also allows you to build custom bars with your own links or "back/next" bars based on your own custom sequence of pages (instead of being limited to the navigation structure). Furthermore, in FP 2002, you may choose your style of button from any other theme, or you may use one of the seven styles of text links.

Inserting a Custom Link Bar

  1. Go to Insert / Navigation. A dialog box will pop up. Choose the top option: "Bar with custom links." Click Next.

  2. Now you may choose the style of your bar (don't worry, you can change the style later, also). If you want to use buttons from the page's theme, make sure you've selected the right one and click Next. You may also scroll down and choose buttons from other themes, or scroll all the way down to the bottom of the list to view the text link bar styles.

  3. Now choose the orientation of your navigation bar -- horizontal or vertical. Then, click "Finish."

  4. If this is the first link bar you are creating, the dialog box below will appear. Otherwise, click "Create New..." You may name your link bar if you wish. This will help you reference it later.

    [If you want to insert a link bar that you've already created on a different page, simply select the link bar and click OK. You're done!]

  5. Now you may begin to add the links that you want on your custom link bar. Click on the "Add Link" button.

  6. A dialog box will pop up (see below). You may browse through the pages in your existing web to choose the page your want to link to. You may also link to an outside web page by clicking on the Browse the Web icon or create email links.

    Linking to an Existing File or Web Page: Link to another page within your web or a different url. You may browse the web, or type in the URL in the "Address" field.

    • Text to display: This is the text that will show up on your link bar (please see below for more detail). We will change it to "Contact Us."
    • Address: The URL of the page that you want to link to.

    Place in This Document: Allows you to link to a "bookmark" in your page.

    Linking to an E-mail Address: Create an "e-mail" link (see diagram below).

    • Text to display: This is the text that will show up on your link bar.
    • E-mail address: Start typing your email address -- the "mailto:" text will automatically appear.
    • Subject: Some email programs will allow the link to place a subject. For example, if your email link is about "Requesting Brochures," you may wish to set the Subject Line as "Brochure Request."

  7. Continue to add more links to your link bar, then click OK. In Normal View, your link bar will look like this. Click on "add link" to add another link to your link bar.

    To change the style of the link bar, right-click on the link bar in Normal View and choose Link Bar Properties. Click on the Style tab to change the style of the link bar.

Back to Top

Inserting a Back/Next Link Bar

"Back and Next" Link Bars allow you to create a navigation bar for a sequence of pages without being limited to your navigation structure. When you create a Back and Next Link Bar, you must define a sequence of pages. You may then insert the link bar on the corresponding pages. Only "Back" and "Next" buttons are displayed, but they link to the next and previous page in the sequence.

  1. Open one of the pages that will be part of your Back/Next sequence. Go to Insert / Navigation. A dialog box will pop up. Choose the top option: "Bar with back and next links." Click Next.

  2. Now you may choose the style of your bar (don't worry, you can change the style later, also). If you want to use buttons from the page's theme, make sure you've selected the right one and click Next. You may also scroll down and choose buttons from other themes, or scroll all the way down to the bottom of the list to view the text link bar styles.

  3. Now choose the orientation of your navigation bar -- horizontal or vertical. Then, click "Finish."

  4. If this is the first link bar you are creating, the dialog box below will appear. Otherwise, click "Create New..." You may name your link bar if you wish. This will help you reference it later.

    [If you want to insert a link bar that you've already created on a different page, simply select the link bar and click OK. You're done!]

  5. Now you may begin to add the links that you want on your custom link bar. Click on the "Add Link" button.

  6. A dialog box will pop up (see below). You may browse through the pages in your existing web to choose the first page in your sequence. You may also link to an outside web page by clicking on the Browse the Web icon , but note that the outside web page will not "back" or "next" buttons on it.

    Existing File or Web Page: Link to another page within your web or a different url. You may browse the web, or type in the URL in the "Address" field.

    • Text to display: This is the text that will show up on your link bar (please see below for more detail). We will change it to "Contact Us."
    • Address: The URL of the page that you want to link to.
  7. Continue to add more links to your custom link bar. Be sure to include the page that you are currently on. When you are done, click OK.

    Here, you can see that we have specified four pages in our back/next sequence: Contact Us, Home, FAQ, and Feedback. 

    You may move a page up or down in the sequence by clicking "Move Up" or "Move Down."

  8. This is what the link bar looks like on our page, in Normal View:

  9. To change the style of the link bar, right-click on the link bar in Normal View and choose Link Bar Properties. Click on the Style tab to change the style of the link bar.

Back to Top

Inserting a Link Bar based on your nav structure

  1. Go to Insert / Navigation. A dialog box will pop up. Choose the top option: "Bar based on navigation structure." Click Next.

  2. Now you may choose the style of your bar (don't worry, you can change the style later, also). If you want to use buttons from the page's theme, make sure you've selected the right one and click Next. You may also scroll down and choose buttons from other themes, or scroll all the way down to the bottom of the list to view the text link bar styles.

  3. Now choose the orientation of your navigation bar -- horizontal or vertical. Then, click "Finish."

  4. Another dialog box will appear. You will now choose what kind of buttons will appear on your page. (See detail below.) Click OK when you are done.
    • Parent level will create buttons for the level directly above the level of your page when you are in Navigation View.
    • Same level will create buttons for the level that your page is in. 
    • Back and Next will create the special "quick back" and "quick next" buttons. These buttons navigate through the level your page is in.
    • Child level will create buttons for the level directly below your page's level.
    • Top level will create the special "global" buttons for the very top level of your web.
    • Child pages under home will create buttons for the child pages of your main home page.

  5. A navigation bar will be created. If you wish to change the style of the link bar, right-click in Normal View and choose Link Bar Properties, then click on the Style tab.

    If you want to change the text on the buttons, you will need to go into Navigation View and change the page titles.

Next: Editing Navigation/Link Bars

home - contact - policies