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.
Step 4: To create an editable region for your keyword and description meta tags, Copy and Paste the <!-- #BeginEditable "doctitle" --> just before your description meta tag. Copy and Paste the <!-- #EndEditable --> 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
Copyright © 2008 Pat Geary of Genealogy Web Creations All Rights Reserved