Talking Templates in Dreamweaver - dummies

Talking Templates in Dreamweaver

By Janine Warner, Ivonne Berkowitz

Many Web design programs boast about their HTML templates. What they really mean is that they include some ready-made page designs with the program. Dreamweaver takes this concept a few leaps further by providing template design features that enable you to create the basic design of a page and then control which sections can and can’t be altered. This is a valuable feature if you are working with a team of developers of varying skill levels. For example, if you’re building a site for a real estate company and you want to let the employees update the sales listings without being able to mess up the page design, a template can be the perfect solution.

Templates are best used when you are creating a number of pages that share certain characteristics, such as background color or navigation elements. Rather than setting the correct properties for every new page or making the same changes on page after page, you can use a template to make changes to several pages at once.

Staying true to your template

One of the great advantages in using the Dreamweaver template feature is that you can specify which areas of the template can be changed. This is especially useful if you’re working with people who have various skill levels in HTML and you want a more advanced designer to create a page that a less experienced person can’t mess up later. With that goal in mind, a template has editable regions and locked (noneditable) regions. Use editable regions for content that changes, such as a product description. Use locked regions for static, unchanging content, such as a logo or site-navigation elements.

You can modify a template even after you’ve used it to create documents. Then when you update documents that use the template, the non-editable sections of those documents are updated to match the changes you made in the template.

While you’re editing the template itself, you can make changes to any part of the file, be it the editable or locked regions. While editing a document made from a template, however, you can make changes only to the editable regions of the document. If you go back and change a template after it is created, Dreamweaver gives you the option of having those changes reflected in all the pages you’ve created with that template or only the page you are currently editing.

Creating templates

Creating a template is as easy as creating any other file in Dreamweaver, as you can see in the following steps. You can start with an existing HTML document and modify it to suit your needs, or you can create a completely new document. When you save a file as a template, the file is stored automatically in the Templates folder of the main folder for the Web site. Templates must be saved in this common folder for the automated features in Dreamweaver to work properly. If you don’t already have a Templates folder in your Web site, Dreamweaver automatically creates one when you store your first template.

The Template features work only if you have defined your Web site in Dreamweaver

All elements in a template are locked by default, except the document title section, which is indicated by the <TITLE></TITLE> tags. (The document title section not being locked is an improvement in Dreamweaver 4 — in Dreamweaver 3, you couldn’t make the title area editable.). For the template to be of any use for building new pages, you must make other areas of the page editable, as well. Remember that you can always return to the template and make more areas editable or remove the capability to edit certain areas later.

To create a template with editable regions, follow these steps:

1. Choose Window –> Templates.

2. In the Templates panel, click the arrow in the top-right corner and choose New Template from the drop-down menu that opens.

A new, untitled template is added to the list of templates in the panel.

3. With the template still selected, type a name for the template just as you would name any file in the Finder on a Mac or the Explorer on a PC.

The new template is added to the Templates for Site list.

4. After you name the new template, double-click the name to open it.

The template page opens in Dreamweaver as any other HTML page would, except that the filename ends with the extension .dwt.

You can now edit this page as you would any other HTML page, inserting images, text, tables, and so on.

5. Choose Modify –> Page Properties to specify background, text, and link colors.

Next, you place some text or images on the page as placeholders for information that you may want to change in the future.

6. To make an image or text area editable, select the image or text and then choose Modify –> Templates –> New Editable Region. (The image or text that you select as editable becomes an area that can be changed in any page created with the template. Areas that you don’t mark as editable will become fixed and can be changed only if you modify the template itself.)

The New Editable Region dialog box opens.

7. In the Name text box, type a name for the editable region.

The text or image is highlighted in the template, indicating that it is editable. You can name the region anything you want, but choosing something that corresponds to the type of information you’re going to put in the area makes it easier for you to remember.

8. To make other images or text areas editable, repeat Steps 6 and 7.

9. Save your template and close the file when you’re finished.

You can make an entire table or an individual table cell editable, but you can’t make multiple cells editable all at once, unless you have merged them first. You have to select each cell one at a time if you want to make some of the cells in a table editable, but not others. Layers and layer content are also treated as separate elements, but either can be marked as editable. Making a layer editable enables you to change the position of that layer. Making layer content editable means that you can change the content of the layer, such as the text or image in the layer.