small business website

Document Sample
small business website Powered By Docstoc
					"Small Business" Design 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

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


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.


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

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

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

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.

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"
           <asp:ImageMap ID="masthead" runat="server" SkinID="masthead3"
   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.