Creating a Web site structure

The pages in a Web site are organized in a hierarchy. Web Site Designer uses this hierarchal structure information to generate navigation links and site maps automatically.

When the structure of a site changes, for example, when a new page is added, the navigation links are automatically regenerated to reflect the new Web site structure. This dynamic navigation is accomplished using special comment tags for the navigation bar and site map. These comment tags use the site structure information and other site-related information that Web Site Designer stores in an XML file called .website-config. When you create a Web project, Web Site Designer support is a default feature of the project. The Web project contains a placeholder for the website-config file named Web Site Navigation. Double-clicking Web Site Navigation launches Web Site Designer and opens website-config in the Navigation view.

Relationships between pages in the Web site structure

In Web Site Designer, a Web site is displayed visually in the Navigation view. Each Web page in the Web site is represented as a page icon. Lines connect the page icons to illustrate the relationships that exist between the pages. There are several relationships that the pages can have with each other, many of the relationships are modeled after family relationships. For example, pages can have a parent-child relationship or a sibling relationship.

In the example shown below, the index page has a line connected to pages product and feedback.jsp. This means that index is the parent of the child pages product and feedback.jsp. This also means that the product and feedback.jsp pages are siblings to each other.

The error page is at the same level in the hierarchy as the index page; however, it is not attached to any of the other pages with connection lines. Instead of having a family type of relationship, the error page and the index page have a peer relationship.

The page relationships are used to automatically generate the navigation links. So, if the index, product, and feedback.jsp pages all have the Show in Navigation option selected, the navigation bar for the feedback.jsp page can contain a link to its parent (the index page) and to its sibling (the product page). You can see that all three of these pages are shown in the navigation because the Show in Navigation icon

is visible. The error page, however, is not shown in the navigation. This makes sense because you might want to create 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 or in the site map. You can also include or exclude pages from the site map. In this example, all of the pages except the error page are shown as Shown in Site Map

.

Defining navigation in the Web site structure

The top page, usually the first page created in the site, is often set as the Navigation Root

, though you can change which page is the navigation root. The navigation root is important because it determines the link levels used when generating Web site navigation, such as navigation bars and site maps. In this example, the index page is the navigation root.

Web page properties

In Web Site Designer, you can also see which pages have actual files associated with them as indicated by the Code icons

and

. In this example, the index page has an associated HTML file and the feedback.jsp page has an associated JSP page. Page icons that have files associated with them also have a solid black border, whereas pages with only icons have a broken border to represent that they are only placeholders.

You can also tell from the page icon if a page template has been applied. By default, the background of the icon is blue if there is a page template associated with the page. You can see that a page template has been applied to the index page since the page icon background is blue.

Once you have a new Web site with the top page defined you can populate your site by creating page icons in Web Site Designer to map out your site. You can use Web Site Designer to plan and layout your whole site's organization, and then create each of the Web page files to fill out the site.

Web Site Designer consists of an editor and a Web Site Navigation drawer:

• Web Site Designer editor. The Web Site Designer editor is visible when editing the .website-config file or editing the Web Site Navigation file. You can view the whole site within Web Site Designer editor. You can add, delete, and rearrange the Web pages that compose the Web site using this tool. There are two views in the editor: the Navigation view and the Detail view. The Navigation view shows the structure of the Web site and the Detail view shows a list of all the Web pages used in the site structure.

• Web Site Navigation drawer. The Web Site Navigation drawer is visible when editing an HTML or JSP page. The Site drawer opens when the Web Site Designer editor is open. On the Palette view there is a Web Site Navigation drawer that contains Web site elements, such as different navigation bars and a site map. You can drag these items onto your Web pages in Page Designer.

• Site drawer. On the Palette view there is a Site drawer that contains page and project elements.

You can use these Web Site Designer tools in conjunction with other Web tools, such as free layout mode and page templates. You can alter an existing page template or create your own and then apply the page template to all of the Web pages in your Web site to ensure a consistent design. When editing the page template, you can use free layout mode to make changes to the layout of each Web page. Instead of making a change, such as altering the size of the navigation bar, on each individual Web page, you can alter the page template instead. The changes are applied to your entire Web site.

Populating Web Site Designer

To populate your Web site structure, you will do one or more of the following:

• Adding an external page to a Web site

• Adding a subsite to a Web site

• Associating a Web page with a page icon

• Adding an existing page to a Web site

• Adding an existing Faces JSP page to a Web site

• Adding frame pages to a Web site

• Showing and excluding pages from the navigation or site map

Using Web Site Navigation in Web Site Designer

Note:

• You cannot use Web Site Navigation with some document types. If after adding a Web Site Navigation, you receive the error message Cannot use this Web Site Navigation, invalid source will be generated if the selected Web Site Navigation specification file is used in the target page. For example, if a page's document type is CHTML or WML, almost all Web Site Navigation contain tags that are invalid in those markup languages.

• The navigation bar can contain invalid source because of the associated specification file. Edit the specification file to correct the errors. Refer to the topic Editing the navigation specification in the online help.

• A navigation bar in a page can contain broken characters. This occurs if a navigation label contains characters that cannot be encoded according to the specified encoding rule in the page. To avoid this, limit the types of characters used in the navigation labels to the encoding used in the page, or use a more expressive encoding rule in the page.

• All sample specification files listed on the Insert Site Map window can handle pages that are between level-1 and level-5 in the site structure. Even if you set an end level over 5 in the attribute view for the siteedit:sitemap tag, links to the pages over level-5 will not be included in the site map.

 

Related concepts

Web projects
Cascading Style Sheet (CSS) Designer

 

Related tasks

Designing Web sites
Creating a page template