Creating Navigation Bars and Banners

From Documentation
Jump to: navigation, search

Creating Navigation Bars and Banners

NetObjects Fusion includes tools you can use to create banners and navigation bars that help site visitors understand and navigate the structure of your site. A new blank site includes a button navigation bar on the left, a text navigation bar at the bottom, and a banner in the top MasterBorder. You can create your own banners and navigation bars and place them in any MasterBorder or Layout area.

You save time using banners and navigation bars because NetObjects Fusion automatically places page names on the banner and navigation bar buttons and links navigation bars to pages in your site. Placing navigation bars in a MasterBorder and then assigning the MasterBorder to multiple pages is an easy way to give pages with the same navigational needs the same navigational structure.

New banners and navigation bars you create use elements of the currently selected SiteStyle. However, you can customize the banners and buttons by assigning other styles or labels or by replacing their images with your own. You can also further customize your site by importing Flash navigation bars and buttons.

Working with Banners and Navigation Bars

Typically, in each new site you create, NetObjects Fusion automatically places a banner in the top margin, a button navigation bar in the left margin, and a text navigation bar in the bottom margin. You can place banners and navigation bars anywhere on the page, including MasterBorders and Layouts, as well as inside text boxes, table cells, and Layout Regions.

Banner titles and button names are set to the page name by default. You can change the name using the Custom Names button in Site view, the Custom Names command on the Edit menu, the settings on the Navigation Button or Banner Properties panel in Page view, or the Custom Navigation Bar dialog. Buttons are linked according to your site's structure. Whenever you change the SiteStructure in Site view, NetObjects Fusion updates the buttons and banners.

When you preview or publish your site, NetObjects Fusion creates a .gif file for each button and banner (except Flash buttons and banners). It combines the assigned font style, size, and color with the image file for that SiteStyle element to ensure the font you choose appears despite differences in site visitors browsers.

Using Navigation Bars

Navigation bars are rows or columns of buttons or text that are automatically linked to other pages in your site. NetObjects Fusion provides button navigation bars and text navigation bars. You use the Button Navigation Bar tool and the Text Navigation Bar tool to add navigation bars to MasterBorders or page Layouts. You can also add Flash navigation bars when using NetObjects Fusion local SiteStyles, and you can import custom Flash navigation bars in Style view.

The style for buttons is determined by the SiteStyle you set in Style view. See Using SiteStyles. The SiteStyle button picture is automatically applied to buttons throughout your site. You can change the button style for an individual navigation bar or even an individual button without changing the overall SiteStyle. See Setting Navigation Bar Button Style and Changing a Button's Image.

You can assign an action to any navigation bar using the Actions tab of the Navigation Bar Properties panel. For example, a navigation bar could fly in from the top when the site visitor opens the page. See Building Dynamic Pages. You cannot assign an action to an individual button.

Adding a Navigation Bar

You can add a horizontal or vertical button or text navigation bar to a page.

  1. In Page view, display the page on which you want to place the navigation bar.
  2. Select the Button Navigation Bar tool or the Text Navigation Bar tool from the Navigation flyout on the Standard toolbox.
  3. Drag a box in the MasterBorder or Layout area where you want to place the navigation bar.

Drag in a horizontal direction for a horizontal navigation bar or in a vertical direction for a vertical navigation bar. A new button navigation bar appears with buttons linked to the pages indicated in the Navigation Structure and Multi level options sections of the General tab of the Navigation Bar Properties panel.

Setting Navigation Bar Orientation

  1. In Page view, select the navigation bar.

The General tab of the Navigation Bar Properties panel appears.

  1. In the Display section, select Vertical or Horizontal orientation.

Setting Navigation Structure

You set the navigation structure to specify the relationship between the current page and the pages represented by the buttons on the navigation bar. You can base navigation structure on the site structure, or you can create custom navigation bars to give site visitors access to pages on different levels of the site, pages in other sites and files.

Creating Navigation Bars Based on the SiteStructure

You can choose a navigation level and then set the multi level options to add links to other pages in the site. Go to Site view or open the Site Navigation panel if you are unsure about the site levels you want to link.

  1. In Page view, select the navigation bar.

The General tab of the Navigation Bar Properties panel appears.

  1. In the Structure section, choose a level from the drop-down list.
  • First Level links to the children of the Home page.
  • Parent Level links to all pages in the level above the current page in the SiteStructure.
  • Current Level links to the current page and all other pages that share the same parent page.
  • Child Level links to the children of the current page.
  • Breadcrumb Trail displays the current page as the last level of a navigation tree and each parent page in succession.
  • All Pages displays all pages at all levels in the SiteStructure.
  1. In the Include section, select:
  • Include home page to add a Home page link to the navigation bar.
  • Include parent page to include a link to the parent page in the navigation bar.
  • Include child pages to include links to the child pages in the navigation bar.

Creating a Custom Navigation Bar

To create a custom navigation bar, you first create a separate site structure that is used only with the navigation bar. You set up a page structure in the same way you would in Site view. In the navigation structure, however, you can have multiple pages at the same level as your Home page, plus add the same page to different trees. This is especially helpful if you are designing sites, such as intranets, in which you want to break your design into "mini" sites.

  1. In Page view, select the navigation bar.

The General tab of the Navigation Bar Properties panel appears.

  1. In the Structure section, select Custom and click Edit.
  2. The Custom Navigation Bar dialog appears.
  3. From the Target drop-down list, select:
  • None to use the default link settings.
  • Existing to target the link in an existing frame.
  • _blank loads the specified page into a new browser window.
  • _parent loads the designated content into the current frame's parent. If the current frame has no parent, the content is loaded into the same frame as the element that refers to this target.
  • _self replaces the page where the link resides with the page of that link. This is similar to how links behave on sites with no frames.
  • _top loads the designated content into the full, original window. This cancels all other frames. If the current frame has no parent the content is loaded into the same frame as the element that refers to this target.
  • Pop-up Window to display the page in a new pop-up window.
  1. From the Link type drop-down list, select:
  • Internal Link to link to another page in the site.

Select a page in the list on the left and click Add to move it into the list on the right, or drag it from the left to the right.

  • External Link to link to a page in another site. Type the path to the page you want to link to; for example, http://www.netobjects.com and click Add to move it into the list, or drag it from the left to the right.
  • File Link to link to a file. Type the path to the file you want to link to or click Browse to locate the file, click Save, and then click Add to move the file into the list, or drag it from the left to the right.

If your site has many pages and a lot of links, click Find to search for a specific link in the list of current links. Click Find Again to search for the next occurrence of the same link.

  1. To add divide your site into sections using section title buttons, click Add Title to add section title buttons to the navigation bar.

Section title buttons must be added to the current SiteStyle before being added to a navigation bar.

  1. To arrange the order of buttons and section title buttons on the navigation bar, use the Move up and Move down buttons or simply drag the buttons into position.

To remove a button, select it and click Remove. To clear the list and start over, click Remove All and click Yes to confirm.

Setting Navigation Bar Button Style

New navigation bars use the currently applied SiteStyle, but you can set individual navigation bars to use any available SiteStyle.

Primary and secondary navigation bars offer different sets of button pictures, which are defined by the current SiteStyle. Other than the pictures displayed, primary and secondary navigation bars function the same way. Because secondary button pictures are typically different in size, shape, or color, you can use a secondary navigation bar to visually distinguish links to different parts of your site. For example, to help site visitors understand the SiteStructure, you can use the secondary navigation bar for the lower levels of your site. To see the difference between primary and secondary navigation bars, go to Style view.

Text navigation bars provide navigation for visitors whose browsers cannot display picture buttons.

You can choose whether the button for the current page will be highlighted or not. Use button highlighting to show site visitors which page they are on. If you are using AutoFrames, be aware that highlighting affects the way the browser refreshes your page.

You can also enable rollover buttons on the navigation bar. If rollover is on, when a site visitor moves the pointer over the button, the SiteStyle rollover image appears.

To change the button style:

  1. In Page view, select the navigation bar.
  2. Click the Style tab of the Navigation Bar Properties panel.
  3. In the Button Style section, click Advanced:
    • Select the page level which is relative to the current page, you want to apply the button style to. The style you choose will apply only to the pages at the selected level.
    • Choose the SiteStyle from the drop-down list that contains the button style you want to display. Only active site styles will appear in the list.
    • Choose the set from the drop-down list that contains the button style you want to display.
    • Select the Fly-out submenus check box to make child pages not included in the navigation bar visible when the site visitor moves the pointer over the parent page link.
  4. Click Apply to all to apply the selected style to all buttons in the navigation bar.
  5. In the Include section, select:
    • Rollovers to use the Rollover button state for the selected page in the navigation bar.
    • Fly-out submenu to make child pages not included in the navigation bar visible when the site visitor moves the pointer over the parent page link.
    • Highlighted to use the Highlighted button state style for the selected page in the navigation bar.
    • Auto-close fly-out submenus to close the fly-out submenus when the mouse is no longer hovering over.
    • End caps to display the end caps associated with the selected button set. End caps are graphical elements that appear at both ends of a navigation bar, and they can be added to a button set in Style view.
    • Link end caps to link the end caps to the adjoining button in the navigation bar. For example, an end cap that is displayed next to the Home page button in the navigation bar will also serve as a link to the Home page.

Setting Navigation Bar Button Background

You can set a background color for a button navigation bar. A background color can visually unify a navigation bar if buttons are widely spaced; it can also help site visitors distinguish the navigation bar from the background of the page.

  1. In Page view, select the navigation bar.

The Navigation Bar Properties panel appears.

  1. Click the Style tab of the Navigation Bar Properties panel.
  2. In the Background color section, click the radio button to the left of the Color button and select a color from the Color Picker, or select None to use no background color.

Setting Border Width and Button Spacing

You can set the thickness of a button navigation bar's border, as well as the spacing between buttons. You can increase the spacing between buttons to let the background show through or to add visual breaks around buttons. The border and spacing are measured in pixels regardless of the measurement unit you select in the Application Options dialog. You cannot change the spacing or border for text navigation bars. To set button border and spacing:

  1. In Page view, select the navigation bar.

The Navigation Bar Properties panel appears.

  1. Click the Background tab.
  2. In the Display (in pixels) section:
  • To change the thickness of the navigation bar border, enter a number in the Border field or click the arrows.
  • To change the spacing between buttons, enter a number in the Spacing field or click the arrows.

Changing a Navigation Bar Button Name

By default, a button name is the same as the page name.

To change the text on a button:

  1. In Page view, navigate to the page containing the navigation button you want to change.
  2. Double-click the button to select it.

A wide border surrounds the button to show it is selected.

The General tab of the Navigation Button Properties panel appears.

  1. Clear the Use page name in button check box.
  2. In the Button field, type a new name for the button. To enter two lines of text, press Enter at the end of the first line.

To restore the default page name, select Use page name in button.

This changes the button name only in the selected navigation bar. To change the name of all instances of this button on all navigation bars, change the name in the Page name field or use the Custom Names dialog. See Using Custom Button and Banner Names and File Extensions.

  1. Clear the Use page name in AltTag check box to assign an alt tag other than the page name to the button.

In the AltTag field, type a new alt tag for the button.

Changing a Navigation Bar Button Image

You can change the picture on each individual button in a navigation bar in Page view. When you assign a new picture to a button, NetObjects Fusion does not display the page name or custom name on the button. If you want text to appear on the button, you must include the text in your button picture. You do not change the current SiteStyle when you customize a button picture.

To change the picture for one button:

  1. In Page view, navigate to the page containing the navigation button you want to change.
  2. Double-click the button to select it.

A wide border surrounds the button to show it is selected.

The General tab of the Navigation Button Properties panel appears.

  1. Click Browse to change the button image or rollover image and select an image file from your hard disk or LAN. If you want to use an image that is on a CD-ROM, copy it to your hard disk first.

Setting Text Navigation Bar Properties

  1. In Page view, select a text navigation bar.
  2. Click the Style tab.
  3. In the Image field, select:
    • Automatic to set the background to the image specified in the Text NavBar style in Style view.
    • None to eliminate the background image.
    • Browse to select an image from the Open dialog. See Choosing an Image Format . If the picture is smaller than the navigation bar, the browser tiles the image. To change the image, click the Browse button to the right of the field.
  4. In the Delimiters section, select the characters you want to use before and after each link in a text navigation bar.
    • The default characters are square [brackets]. You can choose angle brackets, or other characters, or leave this blank.
    • Select Include delimiters in link to extend the underline to include these characters.
  5. If you are working with a horizontal text navigation bar, in the Format section, you can select Right, Left, or Center alignment.

If you select Constrain to a single line, NetObjects Fusion increases the page width to accommodate the navigation bar on a single line. If you clear this option, you can reduce the width of the navigation bar so it appears on more than one line.

  1. By default all pages in a text navigation bar are linked except the current page. Select Link current page in the Options section to include a link to the current page.

Text navigation bars use the SiteStyle's linked text color and the style set for the TextNavBar object. See Formatting Text and Editing a Style Background.

Setting a Navigation Bar Target

When a site visitor clicks a navigation bar link, you can target a frame or a pop-up window to display the linked page. For example, if you select _blank as the link target, the page you link to appears in a new browser window.

  1. In Page view, select a navigation bar.
  2. Click the General tab of the Navigation Bar Properties panel.
  3. In the Navigation bar target section, select a target from the drop-down list or click New Target and add a target.

For more information on link targets, see Setting Link Targets.

Creating a Custom Navigation Bar Style

New navigation bars use the current SiteStyle, but you can apply button sets associated with any SiteStyle to a page.

In addition, you can apply advanced settings, such as how the fly-out submenus are displayed on the page, to a custom navigation bar. If you change the style of a navigation bar in a MasterBorder, it changes on every page using that MasterBorder.

To create a custom navigation bar:

  1. In Page view, select the navigation bar.
  2. Click the Style tab of the Navigation Bar Properties panel.
  3. In the Button Style section, click Advanced.

The Custom Style dialog appears.

  1. Select a page level from the site structure list on the left that you want to customize.
  2. Select the Site Style and Button set you want to use for the page level selected in Step 4.

Only active styles will appear in the Site Style drop-down list.

  1. Select Include Fly-out submenus to make child pages not included in the navigation bar visible when the site visitor moves the pointer over the parent page link.

The advanced Fly-out submenu settings will become active.

  • Orientation displays the fly-out submenu horizontally or vertically.
  • Open describes how the menu will unfold.
  • Offset defines the position of the fly-out submenu.
  1. Click Apply to save the current page level settings.
  2. Repeat steps to apply custom styles to additional page levels or click OK to close the Custom Style dialog.

Using Banners

Banners are picture title bars that display the name of the page, helping site visitors understand where they are in your site. You use the Banner tool to add new banners.

You can assign an action to any banner using the Actions tab of the Banner Properties panel. For example, you can make a banner "grow" into existence when a site visitor goes to the page by assigning the On Page Loaded do Transition action with the transition type set to Iris. See Building Dynamic Pages.

Adding a Banner

  1. InPage view, go to the page on which you want to place the banner.
  2. Choose the Banner tool from the Navigation flyout of the Standard toolbox.
  3. Drag a box in the MasterBorder or Layout area where you want to place the banner.

Drag in a horizontal direction for a horizontal banner or in a vertical direction for a vertical banner. A new horizontal or vertical banner appears in the current SiteStyle.
The style of the banner is determined by the current SiteStyle. You can create additional text, graphic, and Flash banners in Style view.

After you create additional banners in Style view, you can apply them to your pages by using the Banner tool to add a banner to your site and then selecting the banner you want to use from the Banner drop-down list on the Banner Properties panel.

Changing the Banner Text

By default, the banner text is the page name, but you can specify a custom name or no name for the banner. You can also split banner text into two lines. The style of the banner is determined by the current SiteStyle. You can create additional text, graphic, and Flash banners in Style view.

After you create additional banners in Style view, you can apply them to your pages by using the Banner tool to add a banner to your site and then selecting the banner you want to use from the Banner drop-down list on the Banner Properties panel.

To change the banner text:

  1. In Page view, select the banner.

The General tab of the Banner Properties panel appears.

  1. Clear the Use for Banner title check box.
  2. In the Banner title field, type the new text for the banner. To make the text two lines, press Enter at the end of the first line.

To restore the default page name, select Use for Banner title.

This changes the name only on the selected banner. To change the name on all banners on this page, type a new name in the Page name field or use the Custom Names dialog. See Using Custom Button and Banner Names and File Extensions.

Changing a Banner's Image

You can change the picture for a selected banner in Style view. When you assign a new picture to a banner, NetObjects Fusion does not display the page or custom banner name on the image. If you want text to appear on the banner, you must include the text in your banner graphic. If you change the image for a banner in a MasterBorder, the change does not affect the banner on all the other pages that use that MasterBorder. You do not change the SiteStyle when you customize a banner picture.

To change the picture for one banner:

  1. In Style view, display the page containing the banner you want to change.
  2. Select the banner.

The General tab of the Banner Properties panel appears.

  1. In the Banner Image area, click Browse to select an image file from your hard disk or LAN. If you want to use an image that is on a CD-ROM, copy it to your hard disk first.

The selected banner displays the new picture.

Setting Banner Style and Orientation

New banners use the current SiteStyle, but you can set a banner to any available style. If you change the style of a banner in a MasterBorder, it changes on every page using that MasterBorder.

  1. In Page view, select the banner.

The General tab of the Banner Properties panel appears.

  1. In the Site Style section, select the style that contains the banner you want to display. Only active SiteStyles will appear in the list.
  2. In the Banner field, select the banner you want to display.
  3. In the Display section, select Horizontal or Vertical orientation.

Creating a Custom Navigation Bar Style

New navigation bars use the current SiteStyle, but you can apply button sets associated with any SiteStyle to a page.

In addition, you can apply advanced settings, such as how the fly-out submenus are displayed on the page, to a custom navigation bar. If you change the style of a navigation bar in a MasterBorder, it changes on every page using that MasterBorder.

To create a custom navigation bar:

  1. In Page view, select the navigation bar.
  2. Click the Style tab of the Navigation Bar Properties panel.
  3. In the Button Style section, click Advanced.

The Custom Style dialog appears.

  1. Select a page level from the site structure list on the left that you want to customize.
  2. Select the Site Style and Button set you want to use for the page level selected in Step 4.

Only active styles will appear in the Site Style drop-down list.

  1. Select Include Fly-out submenus to make child pages not included in the navigation bar visible when the site visitor moves the pointer over the parent page link.

The advanced Fly-out submenu settings will become active.

  • Orientation displays the fly-out submenu horizontally or vertically.
  • Open describes how the menu will unfold.
  • Offset defines the position of the fly-out submenu.
  1. Click Apply to save the current page level settings.
  2. Repeat steps to apply custom styles to additional page levels or click OK to close the Custom Style dialog.

Changing a Flash Navigation Bar's Appearance

You can change the attributes of Flash navigation bars to complement your page design.

To modify a Flash navigation bar's appearance:

  1. In Page view, select the Flash navigation bar you want to modify. The Navigation Bar Properties panel appears.
  2. Click the Style tab of the Navigation Bar Properties panel.
  3. Modify the attributes of the Flash navigation bar by selecting an attribute in the left-hand column and then choosing an attribute option list in the right-hand column.

The following options are available for all Flash navigation bars native to NetObjects Fusion's local SiteStyles:

  • Background: Modify the background color of the Flash navigation bar buttons by picking a color in the Color Chooser.
  • Rollover: Modify the background color of the Flash navigation bar buttons by picking a color in the Color Chooser.
  • RollOver Font: Select a background color for the rollover button state in the Color Chooser.
  • Font: Open the Edit Font dialog to choose a font face, size, color, attribute (bold, italic, underline), and alignment position for the button text.

Preview the Flash navigation bar in Page view by right-clicking on the navigation bar and selecting Play from the shortcut menu.

Flash navigation bars native to NetObjects Fusion's SiteStyles have a wide range of editing options available. Flash navigation bars imported into NetObjects Fusion can be modified within the parameters of the Flash.

Changing a Flash Banner's Appearance

You can change the attributes of Flash banners to complement your page design.

To modify a Flash banner's appearance:

  1. In Page view, select the Flash banner you want to modify.

The Banner Properties panel appears.

  1. Click the Style tab of the Banners Properties panel.
  2. Modify the attributes of the Flash banner by selecting an attribute in the left-hand column and then choosing an attribute option from the corresponding list in the right-hand column. The following options are available for all Flash banners that are native to NetObjects Fusion local SiteStyles:
  • Effect: Choose an animation effect to control how the text will appear on the banner when the page is loaded in the browser.
  • Background: Modify the background color of the Flash banner by picking a color in the Color Chooser.
  • Fill: Select either a gradient or solid fill for the banner background color.
  • Font: Open the Edit Font dialog to choose a font face, size, color, attribute (bold, italic, underline), and alignment position for the banner text.
  • Vert Align: Set the banner text's vertical position (bottom, middle, or top) within the banner.
  • Horz Align: Set the banner text's horizontal position (right, center, or left) within the banner.
  • Corner Type: Choose a Flash banner with rounded or diagonal edges, or choose a rectangular banner by selecting "None".
  • Corner Radius: Select a value for the sharpness of banners with diagonal and rounded corners. Banners with a smaller value for the corner radius have more subtle corners, while banners with higher corner radius values have sharper corners. The maximum value is 20.
  • Border: Select a color for the banner background in the color picker.
  • Border Thickness: Enter a value for the thickness of the banner's border. Banners with higher border thickness values have thicker borders than those with lower border thickness values. The maximum value is 50.
  1. Preview the Flash navigation bar in Page view by right-clicking on the navigation bar and selecting Play from the shortcut menu.

The manner in which Flash banners are created determines which attributes can be modified. Flash banners created in Style view have a wide range of editing options available. Flash banners imported into NetObjects Fusion can be modified within the parameters of the Flash file.