We have examined two new ASP.NET 2.0 features that simplify
designing the look and feel of a site: master pages and themes. This week
we examine how they work together by combining the elements. Also, we take a
closer look at what is available with Visual Studio 2005.

Putting it all together

We begin by using all elements to control a site’s layout
and style. This very basic site contains home, feedback, and privacy policy
pages. We use Web user controls for the pages’ header and footer areas. A
master template controls overall site layout. Skins, as well as a CSS stylesheet, maintain the site’s look and feel. The skin and
stylesheet files are both named Default and placed in
the theme’s folder (which is within the main App_Themes
folder). Listing A
features the master page.

Weekly .NET tips in your inbox

TechRepublic’s free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET.

Automatically sign up today!

A few points on the master template file:

  • The
    header and footer Web user controls are registered at the top of the page
    via the register directives.
  • A
    table is used to control page layout. (For all CSS and Web standards
    enthusiasts, we could have also used CSS positioning.)
  • The
    header and footer controls are placed at the top and bottom of the page in
    table rows with the columns merged.
  • The
    middle table row is the page’s data area. It contains the lone ContentPlaceHolder element with the name mainArea.

The two controls are very simple; here’s the source for each
control, with the header first:

<%@ Control Language="C#" %>

<div style="width: 365px; height: 23px" id="header" class="header">

TechRepublic.com</div>

And, here’s the footer control:

<%@ Control Language="C#" %>

<div style="width: 439px; height: 42px" id="footer" class="footer">

@2006 - Techrepublic.com<br />

<a href="PrivacyPolicy.htm">PrivacyPolicy.htm</a></div>

The master page controls layout with all custom content
being placed in the middle of the page (for all pages that take advantage of
the master page).

The next step is defining a theme to determine the site’s
appearance. Both a CSS stylesheet and a skin file are
used in our theme. The stylesheet controls the basic
HTML elements like the body, link, table, and the div tags used in the header and footer controls.
Listing B contains the contents of the stylesheet. A skin file controls the appearance of the controls used on the feedback page, as you can see in
Listing C.

Now that we have all the design elements in place, we can
use them. In Listing D, the feedback
is listed first; it utilizes the controls defined in the skin file (via the skinid attribute).

Notice that the feedback uses the theme via its Theme
attribute and uses the master page via the MasterPageFile
attribute. The same is true for the home page, which is in Listing E.

The home page’s contents are basic. It utilizes the content
element to define what is placed in the content area of the master page. In
this case, it is some text and a link to the feedback page.

Design element precedence

Master pages bring visual inheritance to ASP.NET, which is a
feature developers have been clamoring for since the introduction of the
technology. When an end user invokes a subpage like
the feedback page in our example, they are actually viewing a single page
compiled from both the subpage and the master page
that the particular subpage inherited from. This also
means that the server and client code from both pages are enabled on the new
single page.

You may be wary of themes since it takes over a site when
applied at the site level via a config file, but you
can easily disable a theme at the page level via the page’s EnableTheming
attribute. Simply set the attribute to false and the theme is not applied to
that page. See Listing F.

This works at the control level as well, so you can easily
disable a theme for specific controls on a page by utilizing the EnableTheming attribute of that control.
See Listing G.

It does not matter if a SkinID is
included for the control—the EnableTheming attribute
takes precedence. This is true for the page directive as well; when a Theme
attribute is included, the EnableTheming setting has
control.

StyleSheetTheme caveat

In addition to the Theme attribute, a theme may be applied
via the StyleSheetTheme attribute, which is meant to
be applied during application development. It allows you to test your work
without affecting the overall site design. Basically, it allows work in
progress to be maintained separately from what is already in place. However, you
may still want to apply Themes to an application with a StyleSheetTheme
applied. If both a Theme and StyleSheetTheme are
applied to an application, the StyleSheetTheme
attribute is applied first. This is followed by page controls being rendered
with their style overriding the StyleSheetTheme.
Finally, theme properties are applied, and they override both the StyleSheetTheme setting and control properties. You may use
it to apply a cascading effect.

Ready-to-go designs

While master templates and themes greatly simplify site maintenance
and design, it does take time and energy to get what you want. Microsoft
provides sample or starter designs to get you up and running, which include
designs for personal, commerce, corporate, and small business sites. In
addition, they provide standards-based templates that take advantage of
existing Web standards to control site design. Visit the ASP.NET
Developer Center for more information.

More options

Combining the new layout and design features of ASP.NET 2.0
allows you to centrally control the look and feel of a site, but there are
options that provide granular control of a site so a setting may be overridden.
Also, Microsoft provides sample site designs to be used to learn the ins and
outs of these new features, or use them to format your site.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Miss a column?

Check out the .NET Archive, and catch up on the most recent editions of Tony Patton’s column.