Page Skins are developed by arranging various design elements, components, content panes and special features within a template web page.

The design elements include the basic page layout, background colors and images, CSS (Cascading Style Sheet) specifications and other styling skin components. This includes basically all of the page's visual appearance except modules and their content.

Components include general features that can be inserted within a page skin, including the navigation menu, today's date, and register/login components used at the top in the examples. Other components include breadcrumbs and page title - and new components can be developed for special needs.

Content Panes are rectangular areas to inject module containers with their content. Any number of content panes may be defined for a page skin, though at least one must be defined. The size of content panes stretches to accommodate the size of the modules contained. Since these examples are designed with fixed horizontal sizes, content panes will only stretch vertically.

Special features can include almost any usual web page functionality, including Java Scripts. The PopUp menu for Dept Portals and the Help PopUp are such features in these examples.

The Page Skin Variations presented via the links on this page are variations based on the number and arrangement of content panes within the same basic page skin template.

These examples use two content pane designs: 1) a blank pane (darker background) and 2) a framed pane (lighter background).

This page uses the default skin with a blank pane for the left sidebar area and a framed pane for the main content area. Other variations are illustrated via the example links on the left.

The greatest amount of design freedom can be achieved with simply a blank, transparent module container (e.g. No Title Free Color). With this setting you can specify HTML code to fill the entire content pane (or part of it) as you wish.

In many ways, Module Skinning is similar to Page Skinning, except on a smaller and (usually) simpler scale.

A Module Container (or Skin) defines the design and features of a rectangular area (within a content pane) into which a module's content will be inserted. Similar to page skins, module containers are developed with design elements, components, module content space and special features.

The design elements are the (all optional) rectangular frame design and layout, background colors and images, CSS (Cascading Style Sheet) specifications, title design, and placement and appearance of components and special features. A container's appearance can vary from a blank, transparent background to a highly ornamented frame with a title, an icon and visual components for expanding/collapsing the modules content, printing the modules content and more.

Components include general features that can be inserted within a module container, including buttons for printing and expanding/collaping module content. New components can be developed for special needs.

The Module Content Space is a rectangular area for module content. A single module content pane must be defined in each container. The size of a module content pane stretches to accommodate the size of the content contained. Since these examples are designed with fixed horizontal sizes, module content space will only stretch vertically.

Special features can include almost any usual web page functionality, including Java Scripting.

The Module Container Variations presented via the link on the left are variations based on a small set of design elements. Some containers, such as with non-sqaure corners, must be designed with versions for each content pane background color. The greatest amount of design freedom can be achieved with simply a blank, transparent module container (e.g. No Title Free Color). With this setting you can specify HTML code to fill the entire content pane (or part of it) as you wish.