IBM Web Content Manager - The IBM Learner Portal is currently ...

6: Adding navigational components to your website
Now that you have created the basic outline of your site, you will need to create components to add
additional features to your website, such as navigation and search.
Time required
It should take approximately 3 hours to complete these lessons.
Learning objectives
When you have completed this section of the course you should be able to:
v Create a navigator component
v Create a menu component
v Create a paging tool component
v Create a search form
Note: Component designs and styles
Current CSS practice is to apply object-oriented principles to CSS design to make CSS easier to maintain.
Object-oriented CSS is basically a set of patterns for how the page is marked up and how CSS is applied,
including:
Modularized page structure
Each module of content is wrapped in a container, and then divided into three
subcontainers representing a header, body, and footer. For example:
Lorem ipsum
Avoidance of HTML selector styles
Using HTML tags to control styles is avoided. Instead, classes are used to apply styles to different
containers. For example:
Lorem ipsum
Accompanying guide for SPVC - not for distribution
Split styles into reusable pieces
Background, border, color schemes, text styles, etc., are defined as separate classes that can be
referenced separately within a tag. For example, in this tag three different classes are used to
define the container type (mod), color scheme (featColors) and border style (allRound):
Lab 6.1: Creating a site map.
In this exercise, you will create a site map by using a navigator component.
89