How Dreamweaver Templates Work

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 useful 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 Dreamweaver templates 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:

* Template 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".

Sam Mela tutors math and does web design in Springfield Virginia. His web site is http://www.WeekendSuccess.com

Dreamweaver Template Parameters

Dreamweaver template parameters can do much more than switch between style sheets. With careful planning and a sprinkling of template expressions, you can set up a template to toggle between two or more different layout styles, much like switching between screen media and print media types. The primary difference is that the switch between layout styles is under designer - not user or automatic - control.

The key benefit of a template parameter based control is template management. Rather than require multiple templates for the same site, you can have one template with a variety of layouts. This technique is a real time-saver when you need to make changes to the template; instead of updating several templates with the same modification - and processing the changes in the site - you only need to alter one. Moreover, template parameter-based layouts allow master designers to hand off carefully crafted templates to be implemented by junior designers or even those with no design skills whatsoever, like Contribute users.

Let's say that you have a basic three-column layout which, occasionally, needs to contract to two columns. The layout uses a graphic across the top and bottom to help form the column appearance. In this situation, you'd need to accomplish three main tasks to accommodate a two-column design:

Remove the third column from the template.
Change the images to compensate for the layout change.
Increase the width of the main content column to allow the text to flow into the vacated third column area.

All of these changes - and any others necessary - can easily be triggered through a single template parameter. Here's how you set it up:

1. Open the three-column template for editing. This assumes that this particular layout is the most commonly used and that the two-column design is the exception.

2. Select the content in the third column area within the container (typically a div tag); you may find it easiest to work in Code or Split view for this process.

3. Choose Templates: Editable Region from the Insert bar's Common category and enter a meaningful name for the region in the dialog box that appears.

The idea here is to make the content within the div tag editable, but keep the div itself locked. By placing only the content within the editable region, you prevent the unwanted removal or alteration of the surrounding div.

4. Select the div tag encompassing the editable region and choose Templates: Optional Region. In the New Optional Region dialog box, enter a recognizable name for the area and make sure the Show by default option is checked. I chose sideColumn for the example editable region, which inserts this code into the head area:

Make sure you get the positioning of template regions correct: you can't have an optional region within an editable one, only the other way around.

Tip: Dreamweaver does offer an Editable Optional Region object that inserts the code for both areas properly, I don't recommend it. Although the tool lets you name the optional region and set the state to either shown or hidden, the editable region is automatically and generically named. Since the names of editable regions are one of the best ways to identify their use, I always end up renaming the automatic name (i.e., EditableRegion4) to something more useful.

5. In the embedded style sheet, insert a template expression to modify the main content region's width value depending on the state of the sideColumn template parameter. To accomplish this in a single template expression, the conditional operator is used, like this:

#content {
height: auto;
width: @@(sideColumn==true?"500":"750")@@px;
float: left;
margin-left: 30px;
margin-top: 15px;
}

Translated into English, this template expression reads, "If the template parameter sideColumn is displayed make the value 500, otherwise, 750." Be sure to use the proper wrapping syntax of double at-signs around a parenthetical statement; also note that value the parameter is tested against, true, is not in quotes.

Tip: As noted earlier in this document, Dreamweaver does not assign the default values to template parameters, so your display is likely to be a bit jumbled when you're working on the template itself; in the example design, the sample content from the main section overflows into the single column. This will not be the cause when editing child pages.

The last task is to set up the images that frame the columns to change when the sideColumn property is modified.

6. Insert template expressions in each of the styles that define background images to illustrate the column widths. For this example, the file names are top_2col.jpg and bottom_2col.jpg for the two content columns variation and top_1col.jpg and bottom_1col.jpg for the single content column. This naming convention allows me to target the template expression to just change the number in the file names. Again, the conditional operator is used:

#topBorder {
background-image: url(/images/top_col.jpg);
background-repeat: no-repeat;
margin-left: 190px;
}

#bottomBorder {
background-image: url(/images/bottom_col.jpg);
background-repeat: no-repeat;
margin-left: 190px;
}

7. Save the template and create a new page based on the template. The new page will initially display the side column.

8. To test the template parameters, open the child page and select Modify > Template Properties. When the Template Properties dialog box opens, uncheck the Show sideColumn option.

After clicking OK, the displayed page in Dreamweaver is adjusted according to your template parameter and the column is hidden. The technique just outlined works well for embedded styles, but if you're using external style sheets, you'll need to take a different approach. Create a separate style sheet, one for each layout variation and insert a template expression in the link code to switch sheets on demand. The following code assumes the 2 style sheets are in the same folder and named main_2col.css and main_1col.css:

Note that the quotes used inside the template expression are now single quotes rather than double; this change is necessary because the expression is contained within a quoted attribute value, href.

WebAssist helps web developers and designers build better websites faster with Dreamweaver extensions, CSS templates, as well as pre-built PHP scripts and solutions.

Dreamweaver Tip: Build Better Websites Faster with Templates

If you want to make money marketing products and services on the World Wide Web, you must have a consistent look and feel to the pages that comprise your web site. Dreamweaver templates make this easy.

Dreamweaver templates relieve you of much of the tedious job of editing individual web pages, because you create the template one time then apply it to initial pages in your site. If you want to make changes alter, you can make them to the template and they are automatically applied to all of the pages that are based on your template.

Using Templates is a two step process:

1. Create the template.

2. Instantiate the template into one or more actual web documents.

So when should you use a template? How do you create it? How do you apply it? How do you make changes to a template and update the pages it applies to? The following sections will answer these questions.

When to Use a Template

Use a template whenever you have a group of pages that share a basic common group of layout features, and well defined areas that need to be customized. For example, you might use a template to define a group of pages with a three column layout, a common background color, and common menu bar at the top of the page, possibly common links on both sides of the page, and only the center column of the page left available for customization.

How to Create a Template

Dreamweaver gives you two methods to create a template, but this article discusses only the second method. The methods are:

Create a template from an existing page.


Create a template from a new page.

Here are the steps to create a Dreamweaver template from a new page:

1. Click the File menu, then click New.

2. A "New Document" dialog box will pop up. In the left column (the Category column) of the dialog box select Template page and in the right column (the Template column) select "HTML template". Click the Create button in the lower right corner of the dialog box.

The template is created. Now save the template as follows:

1. Click the File menu, then click Save.

2. You may get a Dreamweaver message complaining that the template has no editable regions. Ignore it, and click OK.

3. Now a "Save as Template" box will pop up. Type the name you want for the template in the bottom entry field, which is labeled "Save as".

Dreamweaver will automatically create a Templates folder and save the template into it. The template will have a ".dwt" file extension.

Populate the Template

To populate a simple Dreamweaver template, follow these steps:

1. Add content

2. Mark content as editable where applicable

A detailed description of these two steps follows:

Adding content to a Dreamweaver template is the same as adding content to any other page -- except . . . you should think carefully about the fact your content will be replicated on all instance pages based on your template.

As an example, you might do a table based three column layout, where the first row of the table is just one cell containing a graphic, and the second row of the table contains three cells -- links on the left, links on the right, and an editable region in the center.

You create the table, and then add the top graphic and the links as you normally would. This leaves only the center cell of the second row of the table to be marked as editable. Do this as follows:

1. Select the center cell of the second row of the table.

2. On the "Common" Bar, click the Templates popup menu, then click the Editable Region command.

3. A "New Editable Region" dialog window should pop up. Type a name (for example "Content1") into the "name" text box, then click OK.

Now the template has an editable region. Save it.

Create a Page Based on the Template

This is where you get a return on the work you did creating your template. The following steps describe how to create a page based on a template.

1. Click the File menu, then click New.

2. A "New Document" dialog box will pop up. Select the "Templates" tab at the top of the dialog box.

3. Now there should be two columns at the top of the "Templates" tab in the dialog box. The first column is labeled "Templates for:" and the second column is labeled "Site [site name]". In the first column, select your site; then in the second column, select your template.

4. Select "Update page when template changes" in the lower right corner of the tab.

5. Now click Create in the lower right corner of the tab.

6. A new untitled page should now have been created. Save the page, giving it the name you want.

Now you can make changes in any of the editable regions of the new page.

At this point, making changes is very simple, because Dreamweaver will only allow you to edit regions of the page that were defined as editable in the original template. If you try to edit anywhere else, the editing cursor will turn into a little circle with a slash through it and you cannot edit or delete anything.

When you are done customizing the page, save it. If you make any changes to the template in the future, they will be automatically added to the page you just created.

Conclusion

If you would like to know more of the under-the-hood mechanics of how Dreamweaver implements templates, see my article "How Dreamweaver Templates Work".

Sam Mela does web design and runs a math tutoring business in Springfield Virginia. His web site is http://www.WeekendSuccess.com.