Web design and development: graphics: web: templates

This article describes how Dreamweaver implements templates. Technically, to use Dreamweaver templates, you don't need to know any of the information given in this article; but it is handy to know something about what's going on under the hood in case you need to troubleshoot a Dreamweaver template based document.

Templates are a tool that is used in many computer applications including Microsoft Word, AutoCAD, and other office automation and design products. Templates are u 54A seful when you have a group of documents that share many similar design features. You implement the common features one time in the template, and then just customize the template with the individual features of each document.

Templates are Used Only at Design Time

It is important to understand that are totally a design time construct. Only two things separate a Dreamweaver template from any other HTML document:

1. Dreamweaver template documents have a ".dwt" extension.

2. Dreamweaver templates contain specially defined HTML comments that define the editable and non editable area of the template.

When you create an "instance" document that is based on a Dreamweaver template and store it on a web server, the web server is completely unaware that the document was based on a template. It treats the document the same as any other HTML document, and ignores the template comments in the document the same as it would ignore any other comments in an HTML document.

Similarly, a web browser would be completely unaware that a document was based on a Dreamweaver template, and would also ignore the template comments the same as it would ignore any other comments in an HTML document.

Tag Syntax

Dreamweaver has two sets of tags:

* Templ 2FF4 ate Tags are used in template files (files that have suffix .dwt).

* Instance Tags are used in the "instance" documents you create that are based on a template file (files that typically have a suffix .htm or .html).

Dreamweaver defines about thirty different template tags, but all of them have the following syntax:

where TEMPLATE_TAG_NAME and the parameters are replaced with an actual template tag name and actual parameter names. For example:

In the above example, the template tag is a TemplateBeginEditable tag named "Region 1".

The syntax of instance tags is quite similar:

Tag Pairs

Many template tags are paired, having an opening and a closing tag. For example, the "TemplateBeginEditable" tag described above always starts an editable region that is ended with a "TemplateEndEditable". The two tags come as a pair, defined as follows:

-- HTML Code goes here --- How Dreamweaver uses Template Tags

One of the simplest and most important things that Dreamweaver does with Template/Instance tags is to define what regions of an instance document (document created based on a template document) can be edited. BUT BEWARE . . . If you use Dreamweaver to open a template based document in CODE VIEW, you can edit any part of the document in any way you please -- but this is generally not a good thing to do. In Dreamweaver document design view, Dreamweaver respects the instance tags that are included in a document; for example, it will only allow you to edit areas of the document that begin with an "InstanceBeginEditable" (or similar type) tag.

When you have finished editing your web page, the Dreamweaver Instance Tags will remain in it, but as previously stated, these tags are ignored by your Web Server and your Browser.

Finally, if you update a template in Dreamweaver, all of the documents based on the template will be updated too.

Conclusion

Dreamweaver templates work by using specially defined HTML comment tags to mark regions of Dreamweaver template documents and instance documents. You should recognize Dreamweaver template and instance tags, and understand what they do, but you should only edit them in Dreamweaver Design View, not in Code View. For more information on actually using Dreamweaver templates, see my upcoming article "Dreamweaver Tip: Build Better Websites Faster with Templates".