Navbars and Buttons
BuiltWithNOF

[Introduction] [Getting Started] [Using SourceSafe]

[Basic NetObjects] [Advanced NetObjects] [Links]

Overview

See that nice set of buttons to the left?  Together, they form a navigation bar, known as a navbar for short. See also the buttons above, right below the banner? Yes, the hyperlinks to the other main pages on this site.  Those also form a navbar, albeit formatted differently from the navbar to the left. Navbars contain links to other pages in your site.

Navbars allow for convenient navigation. Didn’t you just hate it the last time you had to search through a dense, text filled site to find the hyperlink you wanted?  Well, don’t let your visitors experience the same pain! Make your navbar obvious and easy-to-use!

NetObjects has done a decent job hiding all the nasty HTML involved in making navbars. All you have to do now is click and drag with the navbar tool and fiddle around a bit with the properties palette, and you can almost do anything you want with navbars.

Almost.  One of my major gripes with NetObject’s treatment of navbars is that the app doesn’t allow you to create expandable navbars (y’know, the ones where you can click a little arrow and a bunch of new buttons appear). Those nice navbars that you see on the ARDA website? Those took a lot of work to make, and unfortunately will take a fair amount to maintain.  I’ll explain more in the advanced topic devoted to maintaining ARDA navbars.

 

Working with Navbars and Buttons

  1. Change to Page View, Page Design tab selected.
     
  2. Select the navbar tool.
     
  3. Position your cursor where you want to place the upper left corner of your navbar. Click and drag a rectangle.  If the rectangle is wider than it is long, a horizontal navbar will be created. If the rectangle is longer than it is wide, a vertical navbar will be created.  This setting can be adjusted later in the properties palette.
     
  4. Select the new navbar if it is not already selected. Open the properties palette.
     
  5. There are a number of things you can do with the General tab selected.  With “Site:” selected, you can see a dropdown.  Use the dropdown to select the level of hierarchy that you want the navbar to display buttons for. You can also choose whether to include the home page and the parent page in the navbar.


  6. Alternatively, you can select “Custom:”, then click “Options...” and manually choose which pages to include.  For a discussion on Link types, see steps 3 through 6 of the hyperlinks page. To add a page to the navbar, select or enter the page to be added on the left and click the “>” button.  To delete, select the button on the right and click “Delete” at the bottom of the dialogue box.  You can also control the order in which the buttons appear by using “Move up” and “Move down”


  7. Back to the properties palette, select “Vertical” or “Horizontal” to determine in which manner the buttons will be laid out.
     
  8. Under Button Type, use the dropdown to select the appearance of the buttons.  The images used by the buttons are determined by the Style that has been selected for the site.  You can also select the “highlighted” or “rollover” options, which affect the appearance of the buttons when a page is selected and when the mouse is positioned over a button, respectively.

Next topic: Preview and Publish

 

[Introduction] [Getting Started] [Using SourceSafe]

[Basic NetObjects] [Advanced NetObjects] [Links]