Appearance Tab (PageNavbar Properties Dialog Box)

See Also      Tasks

Use this tab to set the navigation bar link appearance and layout as well as to set custom HTML to generate navigation bar links.

For more information, see Designing Site Navigation.

Options

Appearance

Buttons

Select to display the navigation bar links as buttons.

Text

Select to display the navigation bar links as text. The text that appears is the page label assigned to the page in the site diagram.

HTML

Select to display the navigation bar links using custom HTML you specify in the Link template and Current page template text boxes.

Orientation

Horizontal

Select to align the navigation bar horizontally on the page.

Note   If you have added PageNavbar controls to a page using layouts, any changes you make to PageNavbar controls located within the layout header and layout footer will be lost when you reapply layouts or apply new layouts.

Vertical

Select to align the navigation bar vertically on the page.

Use table for layout

Select to display the navigation bar within a table. The appropriate <TABLE> tags will be applied around the navigation bar.

If selected, the navigation bar will not wrap based on size of the browser window. If not selected, the navigation bar will wrap based on the size of the browser window.

Use theme

Select to use the navigation bar styles defined by the theme currently applied to the page.

Link template

Select to specify custom HTML to be used to generate navigation bar links for the page. You must select HTML in the Appearance area to enable this option. Use the following tokens as substitutes for each page:

Token Description
#URL# Inserts the URL for each link in your custom HTML at run time
#LABEL# Inserts the page label for each link
#CLASS# Inserts the CSS class for each page
#THEME# Inserts the current theme settings for the link

The PageNavbar control provides several examples of custom HTML in the Link template drop-down list.

Example Description
<a href=#URL#>#LABEL#</a> Creates a standard text link to a URL
[<a href=#URL#>#LABEL#</a>] Places brackets around a standard text link
[ <a href=#URL#>#LABEL#</a> ] Places brackets with a space around a standard text link
|<a href=#URL#>#LABEL#</a>| Places bars around a standard text link
<a href=#URL# onmouseover="window.status='#LABEL#'; return true;" onmouseout="window.status="">#LABEL#</a> Uses JavaScript to create a text link that displays the label for the URL in the status bar when the user moves the mouse over the link
<a href=#URL#><span style="color: black;" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">#LABEL#</span></a> Uses DHTML to create a text link that changes the text color from black to red when the user moves the mouse over the link

For more information and examples, see the white paper "Site Designer Tips and Tricks" on the Microsoft® Visual InterDev™ Web site: http://www.microsoft.com/vinterdev/techmat/default.htm.

Current page template

Select to specify custom HTML to be used to generate only the navigation bar link for the current page. You must select HTML in the Appearance area to enable this option.

Note   To have the current page use the same custom HTML specified in the Link template option above, you must enter the same custom HTML in the Current page template box.

The PageNavbar control provides several examples of custom HTML in the Current page template drop down list.

Example Description
#LABEL# Displays the page label
[#LABEL#] Places brackets around the page label
[ #LABEL# ] Places brackets with a space around the page label
|#LABEL#| Places bars around the page label