"Small Business" Template

This template can be used for a small-business or personal web site. The layout is based on a fixed-width structure composed of two columns that are centered on the page, with a large clickable header image across the top and the main navigation menu on the left hand side.

Note: general features of this template which are common to all templates are described in the introduction to the template set. Make sure to read this document first if you haven't done so already.

Main features

Themes

The template comes with three distinctly different themes, called Forest, Fruits and Literature. The desired theme is set in the web.config file in the application root. Set the stylesheetTheme attribute of the pages element to the name of one of the themes and view the result in the browser.

Notice that the home page layout differs from the layout of the other sample pages and that the content pages feature varying header images.

Menu and breadcrumbs

The main menu is an instance of the ASP.NET Menu control with dynamic submenu items. Both the menu and the SiteMapPath control above it derive their content from the web.sitemap file. If you add new pages to the site make sure you also place corresponding entries in the sitemap so the pages will be displayed correctly in the menu and the breadcrumbs.

Source-ordered XHTML

If you view the XHTML output of this template, you will notice that even though the menu is rendered to the left of the main content, its code is actually placed after it in the source. This means that search engines won't have to wade through lots of menu code before they get to the actual site content, which in turn is likely to improve your content's ranking.

Accessibility

The contact form found in Contact.aspx is in compliance with Priority 1 checkpoints of the W3C Web Content Accessibility Guidelines (WCAG 1.0) as well as § 1194.22 of Section 508. Use the techniques shown there for your own forms as well, so they'll be accessible for site visitors with disabilities.

Database

The template includes a SQL Server Express version of the Northwind database for displaying dynamic product data in the GridView on the Products.aspx page. You may have to grant read and write permissions on the Northwind.mdf file located in the App_Data directory to the ASP.NET process account (ASPNET on IIS 5.x, NETWORK SERVICE on IIS 6) if you encounter errors when trying to view the Products.aspx page.

If you don't want to use the SQL Express database, simply change the connection string in the connectionStrings section of the web.config file to point to a different destination.

Designer support

The web form designer in Visual Studio 2005 and Visual Web Developer Express 2005 has been greatly improved over the one contained in Visual Studio 2003. Therefore, you can use the designer to edit the content pages of this template even though the layout is purely CSS-driven.

Custom Expression Builder

The home page of the sample application has a layout which is distinctly different from the layout used in the remaining pages. In terms of CSS this is achieved by overriding style rules defined in the global style sheet on the page level. Since this requires different styles for each theme, a method had to be found to dynamically import an external style sheet appropriate to the current theme into a specific page. ASP.NET provides no built-in facilities for this, since any .css file in a theme will always be linked to any page that has that theme assigned and there is no way to selectively load or unload a style sheet contained in a theme.

ASP.NET 2.0 introduced a new snytax for declarative expressions which are evaluated at the time the page is parsed. This is most commonly used to dynamically read connection strings from the application's configuration file, as in this example:

<asp:SqlDataSource ID="dsProducts" runat="server"
  ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
  SelectCommand="SELECT * FROM products"/>

As it turns out, there is a way to create custom expressions like this using the abstract ExpressionBuilder class. You can find a custom ThemesExpressionBuilder implementation in the App_Code directory. It's use is demonstrated in the home page (Default.aspx):

<style type="text/css">
  @import url(<asp:Literal runat="server" Text="<%$ Themes:StylesheetTheme(~/Assets/CSS/{0}_Home.css) %>" />);
  (...)
</style>

The expression reads the currently set StylesheetTheme from the pages section in the web.config file and fills the {0} placeholder with the value found. See the ThemesExpressionBuilder.cs file in the App_Code directory for more information on the possible configuration options of the class.

Template structure

As described in the introduction to the template set, the structure of each template is defined in the master page and the theme style sheet. All the page content is included in a wrapper div element named mainwrapper, which is centered on the page. It contains the header as well as the main content and menu div elements. The main content div (named copy) has a 240px left margin assigned which leaves just enough room for the menu. The menu is placed in the gap between copy and mainwrapper's left edge using absolute positioning.

The look of each theme is achieved by a combination of background colors and background images that are assigned to specific div elements of the master page. See the style sheet for further details.

The Forest theme achieves the effect of a left column running all the way down behind the menu by using a clever CSS technique called Faux Columns (see this article for a full description of how it works).

Customizing the template

Modifying a template's design to suit your needs is done almost exclusively in the CSS and .skin files of a theme. The recommended approach to customizing a theme is to make a copy of the one that most closely resembles the look you're going for in the App_Themes directory and give it a new name. The main areas of customization of this template are: company name and logo, colors, background images and, of course, the page content.

Company name and logo

The name of the site owner is set in the master page, whereas the logo image is set in the skin file (it has the SkinID logoImage). The div with the id branding contains two child elements named companyName and logoImage respectively. branding is absolutely positioned so you can modify the bottom and right property values to move the content to the desired location.

Images

The images used to create the design of each theme are stored in the Images subfolder of the theme. Some images have very specific widths or heights to make them fit into the layout. If you want to stay on the safe side when editing the supplied images in a graphics program, try not to change any image dimensions. Note that this warning only applies to images used for layout purposes, such as background-tiles. There is no restriction on modifying pictures used in the page contents, of course.

Header images

The content pages of this theme feature a number of different header images. You can replace the supplied images with your own. Defining which of the images should be displayed in the header of a page works like this:

  1. Find the SkinID of the image you want to display in the skin file. The header image entries are located at the top of the file.
  2. Open the .aspx page and add the following code:

    <asp:Content ID="Content1" ContentPlaceHolderID="mastheadPh" Runat="Server">
      <asp:ImageMap ID="masthead" runat="server" SkinID="masthead3" />
    </asp:Content>
  3. Replace the SkinID of the asp:ImageMap element (highlighted in the above code snippet) with the value you determined in step 1.

Page content

Before you start to add content to the pages of your themed application it is a good idea to study the sample pages provided with each template as well as the master page. Sections that require specific markup are commented and contain instructions on what the markup should look like so it will actually pick up the styles set in the style sheet and the skin file.