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
- 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 to uncheck it. The Show in Navigation icon should now be disabled on 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 . 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
- 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.
