Creating an Expression Web Dynamic Web Templates - DWT's

What is a Dynamic Web Template?

A Dynamic Web Template - DWT - is an HTML/XHTML based master copy of a web page that you create to contain formatting and page elements such as text, graphics, page layout, styles, and regions of a web page that can be modified. You can attach a Dynamic Web Template to the pages that are part of a web site, and that template defines the layout for those pages. A website can contain more than one DWT.

Why it’s a good idea to use a DWT?

One of the most important concepts of website design is to maintain a consistent look and feel for your site. Using a DWT makes this possible. As a webmaster you should attempt to provide:

Consistent navigation throughout your site
Consistent look throughout the site
Provide basic pages such as a Sitemap, Contact, About and Search pages. Your visitor should be able to reach your home page from any page on the site.
Provide copyright information and a disclaimer or terms of use page as well as a Privacy Policy. These are quite often found in the footer of a page.

Creating a Dynamic Web Template - DWT

Step 1: Before you can create a Dynamic Web Template you have to have a template to work with. Create your template as a HTML or XHTML document with all of the elements of the page that will be part of every page on your site - masthead, site navigation, footer. Make sure it also includes any meta tags you want to use. Save the template and make sure it validates BEFORE you create your DWT.

Step 2: With your page open in EW > File > Save As > Save as type - dropdown button > Select Dynamic Web Template from the dropdown > Give the file a name file-name.dwt > Click Save

Click the thumbnail for a larger image.

Step 3: The DWT won't do you much good without editable regions - regions that can be changed on the pages the DWT is attached to. Once you save the page as a DWT, one editable region is created for the doctitle. You will need to create additional editable regions, for the content area, your keywords and description meta tags.

Screenshot editable region for doctitle.

Step 4: To create an editable region for your keyword and description meta tags, Copy and Paste the  just before your description meta tag. Copy and Paste the  tag right after the keywords meta tag. Double click the 2nd occurrence of the doctitle tag and change it to headsection.

Click the thumbnail for a larger image.

Step 5: Select all the text in the main text area of your DWT page > Right click with your mouse > Select manage editable regions from the drop down > In the region name box type maincontent > Click the add button > maincontent is added to your editable regions > Click the close button.

Click thumbnail for larger image

You can now see that the text on your DWT page is surrounded by a yellow border and titled maincontent

Click thumbnail for larger image

Step 6: If your navigation is going to change from section to section, you will need to create an editable region for that area too. Once finished, save your page.

Step 7: Now that you have created your DWT, you need to check and make sure it works correctly. Click on the new page icon > A new blank page is created for you > Click on Format from the top menu bar > Select Dynamic Web Template > attach dynamic web template

Click the thumbnail for a larger image.

Click on file-name.dwt from the file list

Click the thumbnail for a larger image.

Expression Web will tell you that 1 file has been updated. Expression Web has attached the DWT to your blank page.

To attach the dwt to a page that already contains content -
Click on Format from the top menu bar > Select Dynamic Web Template > attach dynamic web template
You will receive a warning dialogue box that any content outside of the <html> tag will be erased
NOTE: This means if you have any styles or scripts in your head section, they will be erased

Click the thumbnail for a larger image.

If you have no styles or scripts, Click OK >
The next screen will ask you to match editable regions > Choose maincontent > OK

Click the thumbnail for a larger image.
Expression Web will tell you that 1 file has been updated. Expression Web has attached the DWT to your page.

Step 8: Save your new page and give it a name. Make sure you also make any changes you need in the meta tags