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..