Blue Discus Systems - DotNetNuke Portal Page Skin Features

Page Skin Designs typically consist of a Header area, Footer area, Page Components, and Content Panes.

Each page is associated with a single page skin. Multiple pages may be associated with the same page skin. Mutliple page skins may be used in the same portal site.

CLICK HERE to view and download FREE Page Skin Samples.

CLICK HERE to take the Picture Tour of Page Skin Layout Variations
in our Corporate R&D Department Portal Prototype.

A single page (Default.aspx) is actually used as the basis for all portal “virtual pages“. All specific page content - page skins, module container skins and module content - is “injected” into the Default.aspx template page upon request. All content is therefore generated on-the-fly per virtual page definitions stored in a database - i.e. it is purely data-driven.

The Header and Footer areas are typically the top and bottom “fixed design” areas that will be presented on every page that is associated with the page skin. These “fixed” areas - which can be more than just these headers and footers - can contain dynamic as well as static (graphics, text, etc.) content.

Page Components (or "skin objects") are one type of dynamic content that can be inserted within the “fixed areas” of a page skin. Some typical page components include: Navigation Menus (with flexible styling), Page Name, Register, Login, Terms of Use, Privacy Statement and Breadcrumbs.

Content Panes are designed to contain the “module content” as specified for each page. One or more content panes must be defined for each page skin. Each content pane is defined as a general rectangular region on the page. The actual heights of these panes will usually be determined by the content inserted within them. The actual widths can be fixed or variable. The generally spacing and position of each content pane is also defined. Other “fixed design“ skin content can also be designed in any of the areas between defined content panes.

The images on the right represent some common Content Pane Layout Schemes. The solid areas represent Header, Footer and other “fixed areas“ with the page skin. The numbered rectangles indicate the Content Panes. All of the main pages in this demo web portal use a page skin similar to the top example (3 content panes in columns).

Variable Width Pages can easily be designed so that the content will be stretched to fill the full width of the user's browser window. To accomplish this, header and footer areas, as well as content panes, must be appropriately designed to stretch accordingly. When more than one content pane is defined within the same horizontal space, one of these panes must be defined to stretch. All of the main pages in this demo web portal are designed with a variable width page skin with the center content pane stretching.

Collapsing Content Panes - It is easy to define a page skin that will collapse a content pane to “almost nothing” when no modules are inserted into them. All of the main pages in this demo web portal are designed with the same “3 content panes” (in columns) page skin. The leftmost pane on this page is collapsed. The rightmost pane on the “Modules” page is collapsed.

Background Images and/or Colors can be defined for all areas of a page skin - for each content pane as well as for the “fixed areas”.

CSS (Cascading Style Sheets) are used to finely control the styling of associated text and other presentation characteristics of a page skin.

Module Skins (or Containers) should be designed to coordinate well with the overall Page Skin design.

Though you can use the basic Page Skin (which you can insert your own logo into) that comes free with the DotNetNuke portal engine, you will likely sooner or later want an individualized page skin(s) that better reflects your image and presentation goals. Vitually any type of web page presentation and layout can be designed with a suitable page skin (such as any of the web page designs included in our Sample Center as well as those presented under FREE Skins).

You can see more sample page skins by visiting DotNetNuke's website and browsing to the many links provided there - where you can also access (and download) some additional page skins (including some free ones).

Blue Discus Systems provides expert services in Page Skin design. We design and develop all of the graphics, layout and special features that will give your web portal the appeal, flexibility and uniqueness that you require. We can begin with any existing web page designs as a starting point or start from scratch and explore the best presentations and approaches with you.