Lesson 6: Set up a Web site's dynamic navigation
This lesson illustrates how to set up the Web site's dynamic navigation.
When you designed the structure of your Web site in Lesson 2, you made some decisions about the relationships between the pages. Recall the way you laid out the page icons with lines connecting them:
There are several different ways that one page can be related to another. These relationships are referred to like the relationships in a family. In this example, View All Classifieds is the parent page and the other three pages are its child pages. Also, these three pages are sibling pages to each other.
These page relationships are used to generate navigation links like navigation bars and tabs. Each page automatically creates its navigation links based on the pages to which it is related. This process is called dynamic navigation.
Checking site structure
You want to ensure that your site structure has been set up to specify which pages should be included in navigation. You can specify in Web Site Navigation which pages should be included as links in dynamic navigation, which pages should be included in site maps, as well as some other navigation options that are based on the structure of your site and your page relationships. This is useful when you may have pages that need to be included in the site, but would not make sense as part of your navigation features. For example, you might have an error page that appears when the site encounters a problem; however, you would not want to show the error page as part of the navigation.
- In the Enterprise Explorer view, double-click
Web Site Navigation to view your site structure.
- You can see that all of your pages have the Show in Navigation option
selected by default because the Show in Navigation icon (
) is visible. This option must be selected for each page that you want to appear in a navigation bar. Now you need to disable the search results page, Filtered Listings, from the navigation because users will be sent there from the search option on the View All Classifieds page.
- Right-click the Filtered Listings page icon.
- Select
Set Navigation | Show in Navigation to uncheck it. The Show in Navigation icon should now be disabled on the Filtered Listings page icon.
- Right-click the Filtered Listings page icon.
- Set a navigation root for your site. The top page, usually the first page
created in the site, is often set as the navigation root. Right-click the View
All Classifieds page icon and click
Set Navigation | Set Navigation Root. The icon (
) at the top of the page icon is the Root icon. The navigation root is important because it determines the link levels used when generating Web site navigation, such as navigation bars.
- Press Ctrl+S to save your changes.
Adding a navigation component to your page template
- Return to your page template by double-clicking template.jtpl in the Enterprise
Explorer view.
- In the Palette view, click
Web Site Navigation to open the drawer that contains the navigation components. There are many different types of dynamic navigation components that you can add to your Web site, including a site map. The most basic component is the Horizontal Bar, which comprises of a row of links based on the site structure.
- Though you know you need a row of links at the top of each page allowing
users to access the other pages in the site, you also want to add some visual
interest to the navigation. Drag the
Horizontal Tabs component to the second row in your page template; this component creates the dynamic links in a tabbed row. The Insert Horizontal Tabs wizard opens.
- Accept the default to use a
Sample navigation component.
- Accept the default in the
Thumbnail list (horizontal-tab01.jsp) and notice that the
File name field is automatically populated. Click Next.
- Select the type of links that you want to appear in the navigation bar,
based on page relationships. To specify that the top page of your site, and
all of each page's siblings and children will appear in the navigation, ensure
that the following pages are selected:
- Top page
- Children of top page
- Sibling pages
- Current page
- Top page
- Click
Next. Accept the defaults on the Optional
Settings for Specification File page of the wizard.
- Click Finish. An icon of the horizontal tab displays on the page
template.
- Save your changes to the page template. When you save the page template,
the dynamic navigation changes are applied to all of the pages in your site.
- Double-click
Web Site Navigation in the Enterprise Explorer view to view your site structure. Because your Web pages now have a navigation component, the icon (
) indicating that the page does not have a Web site navigation does not appear on the page icon.
The navigation component adds several files to your Web project. After saving your template, notice that the Explorer view contains a new horizontal-tab01.jsp.
Previewing your navigation
If you want to see an instance of how the navigation looks on the pages rather than in the template, double-click all_records.jsp in the Project Explorer view and then click the Preview tab in Page Designer. You can see that the names that appear on the tabs are the navigation labels for the pages, rather than the file names. Also, notice that the current page is displayed as the highlighted tab; as you navigate through the site, the current page will always be the highlighted tab on top.
Tip: If you change the structure of your site in the Navigation pane, the dynamic navigation links will automatically update to reflect the new structure.
