Nested Dynamic Web Templates

Our look at DWT's in Session 3 focused on the ability to recreate the basic page layout for a site. However, a large site may have many pages with a similar internal structure. One approach would be to have a separate DWT for each type of layout, however, the drawback of this approach is that it becomes difficult to keep the templates synchronised. Expression Web comes to our aid by allow the developer to nest templates.

Nesting basics

Suppose we have a website where all pages have a common layout for the header, main menu and footer areas, but there a some pages which require a two column layout and some which require a three column layout. The developer will first create a DWT for the main page layout, leaving out any consideration of content:

<!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>Master layout</title>
<!-- #EndEditable -->
</head>
<body>
<div id="content">
  <div id="header">Heading content</div>
  <div id="menu">Menu content</div>
  <div id="main">
    <!-- #BeginEditable "body" -->
    Page content goes here
    <!-- #EndEditable -->
  </div>
</div>
</body>
</html>

Next the developer will create two new templates one with just the two column layout in it and two editable regions and the other with just the three column layout in it and three editable regions.

<!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>
<div id="leftcol">
  <!-- #BeginEditable "leftcol" -->
  Left content goes here
  <!-- #EndEditable -->
</div>
<div id="rightcol">
  <!-- #BeginEditable "rightcol" -->
  Right content goes here
  <!-- #EndEditable -->
</div>
</body>
</html>

You can remove the doctitle editable section if you want, but the example below keeps it to show the effect. All that remains is to now use the Attach Dynamic Web Template … command on the two new templates to base them on the page layout template. Expression Web deals with the issues of stripping out the extra redundant XHTML code and matches the content to the editable region in the main page layout. The code example below shows the two column template with the master page layout attached.

<!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">
<!-- #BeginTemplate "master.dwt" -->
<head>
<meta http-equiv="Content-Type"
      content="text/html; charset=utf-8" />
<!-- #ParentBeginEditable "doctitle" -->
<!-- #BeginEditable "doctitle" -->
<title>Two column template</title>
<!-- #EndEditable -->
<!-- #ParentEndEditable -->
</head>
<body>
<div id="content">
  <div id="header">Heading content</div>
  <div id="menu">Menu content</div>
  <div id="main">
    <!-- #ParentBeginEditable "body" -->
<div id="leftcol">
  <!-- #BeginEditable "leftcol" -->
  Left content goes here
  <!-- #EndEditable -->
</div>
<div id="rightcol">
  <!-- #BeginEditable "rightcol" -->
  Right content goes here
  <!-- #EndEditable -->
</div>
<!-- #ParentEndEditable -->
  </div>
</div>
</body>
<!-- #EndTemplate -->
</html>

Now you can create new web pages based on either the two column layout or the three column layout. The code below shows a new page created using the two column template. Notice how all evidence of the mater page template is removed in this, but your two editable regions are available.

<!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">
<!-- #BeginTemplate "file:///D:/Websites/NestDemo/twocol.dwt" -->
<head>
<meta http-equiv="Content-Type"
      content="text/html; charset=utf-8" />
<!-- #BeginEditable "doctitle" -->
<title>Untitled 1</title>
<!-- #EndEditable -->
</head>
<body>
<div id="content">
  <div id="header">Heading content</div>
  <div id="menu">Menu content</div>
  <div id="main">
<div id="leftcol">
  <!-- #BeginEditable "leftcol" -->
  Left content goes here
  <!-- #EndEditable -->
</div>
<div id="rightcol">
  <!-- #BeginEditable "rightcol" -->
  Right content goes here
  <!-- #EndEditable -->
</div>
  </div>
</div>
</body>
<!-- #EndTemplate -->
</html>

Changes to either of the templates will be echoed in all the pages based on the templates. The examples from this session are in the ZIP file accompanying this page.

Other scenarios

A range of possibilities are opened up once you have nested templates available. These are:

Submenus

If you have a set of pages which need to be navigated using a submenu you can build a template with the submenu built in followed by an editable region. If you attach the master page layout to this template you can create pages which share the common submenu.

Sub-sites

Some websites have subsections which may have slight layout differences. This can be achieved using a template for each sub-section. The template does not necessarily have to have different content layout, as the difference may be achieved by having a different style sheet attached. When using style sheets in this way you must make sure that the <link> element occurs before the docTitle editable region in each template to ensure correct cascading of styles.

Breaking up long pages

To avoid excessive vertical scrolling on long pages you can break the page up into several sections, based on the internal heading structure. You would have each page with a common introduction section and a submenu with links to the section content. The common introduction section and submenu can be placed in a template with the master page layout attached..

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera