Conceptual and functional divisions of a website

When building a website using Web Content Manager, we break up the website into the following conceptual and functional divisions.

Content	Layout
Content items Site areas Components	Presentation templates Component designs Page layout and portlets Themes

Context	Style
Site framework Page hierarchy Profiling Current user Personalization	CSS Themes

When we are developing a website using Web Content Manager and WebSphere Portal, we are splitting the elements of the website between content, context, layout, and style.

Content:

There are two types of content:

Dynamic

Dynamic content is generated dynamically based on has a set of preconfigured parameters, such as navigator or menu.

Static

Static content is content where you store markup or files directly in a component, content item, or site area. Where you store the static content depends on how the content is used:

• Page-specific content is stored in content items.
• Content related to a section of the site can be stored in a site area.
• Content that is reused in multiple sections of the site is stored in components.

Layout:

The overall structure of each page is determined by the theme we are using, the page layout you choose, and the web content viewer portlets we add to the page layout. The layout of the content displayed within each web content viewer is determined by markup used by the current presentation template, and by the markup stored within the elements and components referenced within the presentation template.

Context:

The layout and design of the page where a content item is displayed is different depending on:

• The current portal page

  Different pages can use different themes, layouts, web content viewer portlets, and even different presentation templates.

• The current site area

  Content linked to different site areas can use different template maps that map to different site areas.

• The current user

  Different users can have different access to various page elements, including individual pages, portlets, and web content items.

Each of these contextual variables allows us to display content or components in different ways, depending on the current context. Additionally, the profile of the current portlet, content item, or current user can determine what is displayed on a page, as do any personalization features used by the website.

Style:

While we can place stylistic elements directly within the HTML, it is becoming increasingly more common to use CSS to store and manage all the stylistic elements of a website. In a WCM site, the CSS can be:

• Stored server-side and referenced within a WebSphere Portal theme
• Stored directly within a WCM content item or component

One good practice is to store the CSS markup within an HTML field stored in a content item. This allows you quick access to the CSS if you need to make a change. In addition, we can use advanced features such as workflows and inline editing to help you maintain the CSS. By storing all the stylistic elements in CSS, we can quickly make stylistic changes to the website simply by editing a CSS file instead of editing multiple WCM items.

When a web page is rendered, Web Content Manager takes all these individual item types and combines them to build a complete web page.

Parent: Overview