Page 1 of 2: How to create and use templates

Note: The following tutorial is for users of Macromedia Dreamweaver version 4 or Dreamweaver Ultradev.

Templates are a great way to maintain consistency across a website. Static HTML pages have for the most part been edited on a page by page basis - until the advent of Dreamweaver. This tutorial will show how to harness the power of Dreamweaver and create templates and library items which can be replicated sitewide and updated across an entire site.

Open up Dreamweaver and start a new page. Before you make any changes, modifications or write any code, save this page as a dreamweaver template. (*.DWT). Add content which you want to be consistent across the whole site, such as a page banner, navigation and anything else. Once created, you can save and close this file and begin working with new documents based upon this template.

Editable Regions
This is probably the most important aspect of a dreamweaver template. A defined editable region details parts of a page which are editable. Anything that falls outside an editable region cannot be edited within a page created using a template. (Provided editable regions are setup). A common scenario would be to place all content that will be changed across pages into editable regions. Everything that should remain consistent, such as navigation, any images, colours and positioning can be outside an editable region, meaning that changes cannot be made on a page created from the template.

The reason for these non-editable parts is that they can be updated across all pages which use the template, when changes are made to the template. This really is handy as you dont want to have to trawl through many many pages making slight amendments to content.

Creating an editable region is simple. Create a new page from your template (File->New from template), create your content areas which are specific to the page, highlight content in the wysiwyg editing panel that you want to be an editable region and select Modify->Templates->New editable region. If the new editable region is greyed out, make sure you have selected content in the wysiwyg panel, and not the code panel and then retry. Choose a name for the region and click ok. You will notice that the text you have just created is now encapsulated in a small area with the region name at the top left.

figure 1 (editable regions, code view)

As shown above, editable regions are preceeded by a comment field with #BeginEditable "region-name". Then the content of the editable region is entered and its closed by another comment field which states "#EndEditable".

The non-editable parts of the template are highlighted in yellow. These parts will update across pages which use this template, this is why they cannot be changed. In the example above, if you wanted to change the font size in the style declarations to 12pt, you would open the dwt file and change it there. When you save this file a dialog will appear prompting you to update all pages which use the template. Selecting yes will mean the changes will take effect site wide.

figure 2 (editable region wysiwyg view)

The wysiwyg view will show editable regions with a small tag, stating the name of the region. Clicking the region name will select everything within the editable region and this content can be freely overwritten and stay unique to the page. Clicking outside of editable regions on a page with a template in operation is disabled and the cursor will change to a "stop-sign"

When you have finished creating your templates and want to update all pages which use the template, you can select Modify->Templates->Update Pages, from the program menus. When pages update, only the content in non-editable regions is updated. Editable regions remain page-specific.

Go to: Next page >>> | Top | Home