Table of contents | Next | Previous

Key Lotus Web Content Management definitions - Design and Development Components

In this section, we now we look at the Design and development components. All examples are are based on the River Bend Tea and Coffee Company Web site. If you want to build the Web site, see Section 3.2.

Design and development components

Having discussed all content related and main architectural elements, we now discuss the design and development components. Design and development components define the Web site's appearance and assure corporate identity.

Presentation templates

In the presentation template, everything that we have discussed thus far and all the components come together to form the Web pages that are viewed by site visitors. The presentation template combines all layout and design elements needed for the Web site appearance, as shown in Figure 16

Figure 16 Site area for River Bend Coffee and its referenced components and items (31_16)

The River Bend General presentation template displays a stylesheet and several images to create the overall layout which is consistent for all pages. Lotus Web Content Management references components in the component library by its name, as shown in the following example:

	<Component name="riverbend/html-logo"/>
	<Component name="riverbend/search_form"/>
	<Component name="riverbend/nav-left"/>

As shown, the image component, the search form html component as well as the navigator are referenced the same way.

The component library components state clearly that content does not play a role in the layout of a page.

The content is referenced in the presentation template. In the center area, content items fields are referenced. Content items are stored in the content library that is sorted by several different criteria. The General presentation template references the Display Title, Body, Content Image, Menu Component Reference fields using the field names as identifiers or keys.

All fields are referenced in a current context. The current content is the content item to which the user has navigate using the navigator on the left side of the page. The type content states that a content item is referenced, as shown in the following example:

	<Element context="current" type="content" 
key="Summary"/>
	<Element context="current" type="content" 
key="Image"/> 
	<Element context="current" type="content" 
key="Body"/> 
	<Element context="current" type="content" 
key="Link"/> 
	<Element context="current" type="content" 
key="Menu"/>

The menu field - last part in the presentation - does not display a simple text value such as the Display Title field but displays a component. For the coffee content page, the component reference MENU-Site Area is entered in the Menu field, as shown in Figure 17

Figure 17 Coffee Menu Component (31_17)

The menu displays all content items that are found in the site area for the current content (Coffee) and also the authoring template (Products). As shown in Figure 16 , there are two content items displayed in the current page for that menu.

Alternatively, a component from a site or site area could be referenced.

For the River Bend Web site, the effect on the page is identical to the use of a menu in the Menu field. However, the reference in the site area is created by a site administrator who is familiar with the existing components and their usage, where content authors are not trained using components but are familiar with how to create content.

Thus, referencing components from within a site or site area can reduce training needs for users and can increase design flexibility.

While creating the presentation template, the user may want to add a certain image that is not in the image components and also not in the content. There is an Insert Image button that could be used to add the image instantly in the html.

A link could be added using the Insert Link button, in order to create links to

• Content items, files or images
• Existing link components
• External url links

Component library

The component library is the home of all components. Each of them can be referenced with the component library tag throughout the other items and also in the components themselves.

Navigator component

The navigator provides a mechanism that allows users to move around the site. A navigator uses the site framework to create links to different site areas or documents in the site automatically. Because it is based on the site framework, the navigator displays the hierarchy of the information architecture. Thus, when a site framework or a site area changes, the navigator is updated dynamically, eliminating the need for re-coding and preventing the possibility of broken URL links.

For example, the River Bend Web site displays a navigator on the left side, called NAV -Left, which offers the main navigation through the entire site framework, making all site areas available for browsing. This navigator displays site areas beyond the root, which is the site named River Bend. Browsing through the navigator and clicking a navigator section or site area displays one (or more) children site area levels (if children are available). The sections that a user selects or activates for browsing are highlighted in bold, could be indented, and separated by a small brown line. For each level (that is, each site area), the default content for the site area is shown in the middle of the page, as shown in Figure 18 . You will find the Beverages site area in bold, which is then expanded to Tea and Coffee.

Figure 18 NAV-Left on page (31_18)

When building the navigation, you have to define the navigator start site area. For the NAV-Left, the start area is selected and the River Bend site is chosen. Thus, navigation starts from the root of the site framework. The navigator does not include the node start, because the root node for the River Bend site is not displayed in the navigator.

Because the River Bend Web site does not have ancestors, the ancestor level is none. The navigator displays one descendant level when a site area in the navigator is activated. Also, note that the preceding sibling's level and next sibling's level are not relevant because the navigator starts already at the root level without including a start node, which is a requirement for the sibling values. If we start the navigator at a lower level, we would have a reason to include siblings for navigation. In the case of the River Bend site, however, sibling values do not exist.

See Figure 19 explain the ancestor, sibling, and descendant level concept. In Figure 19 , Beverages is the selected site area. A preceding siblings are Home, Company, News and Food , and the next sibling is Search . No ancestor is shown. The first level descendants for Beveragess are Tea and Coffee . 

Figure 19 Descendants and siblings in the River Bend navigator (31_19) 

By clicking on Coffee, it will be turned to bold, like in Figure 16 , where Beverages would be the Ancestor. No descendants are shown on the Navigator anymore.

The definitions and values for NAV -Left are as follows (illustrated in Figure 20 )

• Show Site displays the River Bend site in the navigator, which is not intended. Remember, Include Start is not selected for the selected start area, so Show Site reverses that choice.
• Show Content is not selected, so no content names are seen in the navigator.
• Selecting Expand Current expands the site area and shows one descendant level.
• Selecting Expand Navigator expands the current site area when clicked

Figure 20 Definitions and values for NAV-Left (31_20)

The remaining design details for that navigator are explained in section 3.2.7. explaining the detailed steps for how to create the River Bend web site and its navigator component.

This is one example of how a navigator can display site navigation. You can create other navigators for other purposes. For example you can create a breadcrumb navigator, or a site map navigator.