Working with design templates

  • Introduction to templates
  • Dynamic Web Templates (DWT)
  • ASP.NET Masterpages

Introduction to Templates

Suppose you have been given a design concept by one of the creative team within your organisation. If it is your responsibility to realise the design in XHTML you will want to make sure that each page matches the design exactly.

Classic three section page layoutThe diagram to the right show a simple page structure, commonly used in websites. It is usual for the structure to be maintained over all (or most) of the pages in the site. This means that  the website developer needs to have the same basic XHTML for every page in the site. The only differences will be in the page title and the content section. If each page was edited completely independently of the others there is a possibility that there will be minor differences between the pages.

Templates get round this problem by allowing the developer to create the basic structure of the page as a design template. All pages are then created based on the the template. The only parts of the page which can be altered will be identified as editable regions in the template. That way each page has a consistent structure. If the template is edited the changes will be applied across all the pages which are linked to it.

Simple templated version of classic layoutThe diagram on the right shows this in action. The editable region is the only part available to the developer once a page has been created from the template.

There are two main approaches to templated design. One builds the entire template into each page and the other uses a link to the template and only includes the content in the page. The choice of approach is made by the software tool you are using. Expression Web and Dreamweaver use the former approach as this is the most appropriate for static pages. Visual Web Developer (for ASP.NET pages) uses the latter approach as the pages are built dynamically when the pages are requested.

Dynamic Web Templates

Microsoft FrontPage makes use of Dynamic Web Templates (DWT) to assist the development of consistent websites. DWT's have been adopted by Expression Web and are used in the same way. Dreamweaver also uses templates and uses the same acronym and file extension (.DWT). However, Dreamweaver .DWT files are not identical to Microsoft .DWT files although they are very similar. Expression Web can make use of a Dreamweaver web template file and will convert it into the Microsoft Dynamic Web Template format automatically.

To create a DWT file you use the File|New...|Page... menu command and select Dynamic WebTemplate from the option list. The resulting code is created.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type"
      content="text/html; charset=utf-8" />
<!-- #BeginEditable "doctitle" -->
<title>Untitled 1</title>
<!-- #EndEditable -->
</head>

<body>

<!-- #BeginEditable "body" -->
<div>
</div>
<!-- #EndEditable -->

</body>

</html>

Note that there are two editable regions defined in this empty template. One corresponds to the position of the title in the the <head> section of the page and the other corresponds to the content of the page. Our first job is to construct the basic page structure around the editable regions. This will usually involve adding a style sheet link, metadata and the <div> structure for the web page. The following code shows this for our classic three section web page. Note: the style sheet is placed before the editable section for the title. This is so that when we create a web page from the template if we want we can add in a style sheet for the page which can override style in the template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 
      content="text/html; charset=utf-8" />
<link href="Stylesheet.css" rel="stylesheet" type="text/css" />
<!-- #BeginEditable "doctitle" -->
<title>Untitled 1</title>
<!-- #EndEditable -->
</head>
<body>
<!-- #BeginEditable "body" -->
     
<!-- #EndEditable -->
</body>
</html>

Page create from a templateIf we save the template and create a page based on it using the New|Create from Dynamic Web Template menu option we get the following when opened in Design View. The page is greyed out apart from the body section which can be edited.

We don't have access to the doctitle editable section in design view as it is in the <head> section of the document. If we want to change the title of our new page we can switch to Code View and type it in directly. We are also free to add and page specific metadata in this section too.

Multiple Editable Regions

If we have a page design with multiple sections it makes sense to build the sections into the structure of the page and have them in the template. That way we can control the structure of the page in one place rather than having to keep track of the section code in each page. The diagram below shows the template for a page with three columns. Note that the page will not appear in columns until the style sheet is attached and edited to create the desired layout.

    <li><a href="hobbies.htm">My Hobbies</a></li>
    </ul>
  </div>
  <div id="main">
    <div id="leftcol">
<!-- #BeginEditable "left" -->
<!-- #EndEditable -->
    </div>
    <div id="middlecol">
<!-- #BeginEditable "middle" -->
<!-- #EndEditable -->
    </div>
    <div id="rightcol">
<!-- #BeginEditable "right" -->
<!-- #EndEditable -->
    </div>
  </div>
</div>
</body>

Three column templateThe view without the style sheet is shown here.

Three column template with style sheet attachedThe view with the style sheet is shown here.

ASP.NET and MasterPages

The alternative method of providing template based design is used in ASP.NET. The term template is replaced by the composite word Master Pages. Expression web can be used to create a Master Page based ASP.NET web application, however, it is not capable of performing more than basic web editing, unlike Visual Web Developer which provides facilities for building, developing and testing ASP.NET web applications. To create a Master Page just choose New|Master Page from the menu. You will end up with the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Master Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type"
      content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>

You will see the usual XHTML code, but there are added elements, fore example, all ASP.NET web pages have a form element to contain the entire page.

As web page designers we don't need to concern ourselves too much with the function of these elements, however, we do need to know how to make use of them.  There is a similarity between the Dynamic Web Template and a Master Page in that they both have markers for replaceable content. In the case of a Master Page this is done using an <asp:ContentPlaceHolder> element. The big difference with Master Pages occurs once we create a new web page (in ASP.NET they are referred to as web forms).

Blank master page showing Smart TagThe screenshot shows the page resulting from creating a new web page from a Master Page.

Note: the editable region is greyed out. To enable this area we need to click the Smart Tag, highlighted by an arrow, and a drop down menu will appear with a Create Custom Content option. One you do this the label changes from (Master) to (Custom) and you can edit the content.

The code below shows the page code before and after the Create Custom Content option has been selected. Notice that neither version has any side of XHTML code. The page simple provides a link to the Master Page. The .NET web server merges the two together when a user requests the page from the website. You can change the title of the web page (in code view) by directly editing the title attribute in the code, however if you highlight the word Page you can edit its attributes in the Tag Properties Task Pane.

Before:

<%@ Page masterpagefile="ReferenceWebSite.master" 
         language="C#" title="Untitled 1" %>

After:

<%@ Page masterpagefile="ReferenceWebSite.master"
         language="C#" title="Untitled 1" %>
<asp:Content id="Content1" runat="server" 
             contentplaceholderid="ContentPlaceHolder1">

</asp:Content>

Note: ASP.NET web forms have the extension .aspx to distinguish them from plain static web pages. The code below shows the Master Page version of the Dynamic Web Template demonstration page above.

<%@ Master Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type"
      content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<meta name="author" content="John P Scott" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
  <div id="content">
    <div id="header">
      <h1>Demo template site</h1>
    </div>
    <div id="menu">
      <ul>
        <li><a href="default.htm">My Home page</a></li>
        <li><a href="home.htm">My Home Town</a></li>
        <li><a href="hobbies.htm">My Hobbies</a></li>
      </ul>
    </div>
    <div id="main">
      <asp:ContentPlaceHolder id="ContentPlaceHolder1"
                              runat="server">
      </asp:ContentPlaceHolder>
    </div>
  </div>
</form>
</body>
</html>
Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera