HOW TO CREATE, USE AND UPDATE A TEMPLATE

Templates allow you to create consistence pages easily that has common graphical interface elements (i.e., header, footer, or sidebar) that can be protected from editing while at the same time exposing other areas (i.e., mainContent) that can be edited by anyone, even without much web experience. Templates, like Library items are specific to a given site; whereas, snippets are global to all sites.

START WITH A NEW OR EXISTING PAGE

While you can use a new page and add text, graphics etc. to it, it is best practice to create a template from an EXISTING PAGE that matches the "look-and-feel" of your proposed web site. Whether you are using an new or existing page, define a web site and ensure all links (i.e., Home> index.html, Products > products.html, etc.) are correctly pointing to the desire pages you intend to create using the template technique.

Create a folder and give it a specific name (i.e., RMCS Web Site).
INSIDE of this folder create another folder and give it a name of "images".
Open DW and select Site>New Site to define a web site for the main folder and the image folder you just created by filling in the first three fields in the Advanced tab.

CONVERT THE PAGE TO A TEMPLATE

Select File Save as Template... (not Save As...) or select the Make Temple from the Template drop-down in the Common Tab in the Insert Bar and give the template a name and an optional description in a web site. Ensure you are on the correct site if you have more than one defined and click OK. Choose Yes when Dreamweaver prompts you to Update Links; otherwise, all of the page's images and links will be broken.
NOTE: Dreamweaver will AUTOMATICALLY create a folder called Templates and place the template inside of that folder with an extension of .dwt (not .html). For dynamic Web pages, Dreamweaver will add the .dwt BEFORE the file extension (i.e., mytemplate.dwt.asp).

DEFINE REGIONS THAT CAN BE CHANGED WITHIN THE TEMPLATE

By default, when you create a template, if you attempt to create a page from it, most of the page will be locked and can not be edited. To make a useful page, you can defined various region(s) in the template to be editable, optional or repeatable before create any other pages.

IMPORTANT NOTE: Except for the tags between the <head> tags (meta, link, title, script, style)–which is always editable and the defined regions, all other areas of a page will be locked (i.e., typically, header, footer, and sidebar) if it is created from a template. So it is advisable to let a user know NOT to edit any head tag other than the <title> tag on a page unless they know what they are doing.

To create a region, select a tag or image and define one or more of the following regions in the template.

Editable (most common) – select any tag between the <body> tag (i.e., a div tag, heading tag) that anyone can change on each template instance.
TIP: You can use the tag selector to select most tags you want to make into a region. However, note caution below.
Optional / Editable Optional (second most common) – allows you to show or hide region(s) on a page-by-page basis. A good example of Optional would be if you wanted to turn on or off a "For Sale" image on selected pages. Optional Editable is even more flexible because it allow you not only to make the region optional but also editable at the same time as the name implies. An optional region can include editable, repeating, and locked regions.
- If the region is optional but has a lock region, then the author will not be able to change the content formatting--only make it visible or invisible.
- If the region is optional but repeatable, then the author add to the region or turn it off altogether.
Repeating / Repeating Table – allows you to repeat a region or a table on a page. A good use for this would be a product catalog or photo gallery that you want someone to update with additional content. The advantage of using a repeating region over an editable region is that EVERYTHING within an editable region can be changed. In a repeating region, you can have both editable and uneditable regions to enforce your design standards. Hence, when creating a repeating region, you usually start by adding the REPEATABLE region FIRST and the ADDING at least one editable region INSIDE of it.
CAUTION: It is best to use the tag chooser or selecting the code in Code view when defining the editable region; otherwise, you may get an error stating that the Selection is already in an editable, repeatable, or optional region.
EXCEPTION:: You can have a region that is repeatable but not editable. A good example of this would be a rating review site that include a repeating region for a star graphics. You would only be repeating (not editing) a number of graphics that represent the number of stars for the rating. However, you can not readily delete the stars once they are created. To get around this problem, add an editable region to the repeating region instead so that you can remove any repeating regions.

NOTE: There are several ways to create an editable region:

M enu: Insert > Template Objects > Editable Region
I nsert Tab: Click Editable Region icon
C ontextual Menu: Right-click (Control Click on a Mac) and choose Template > New Editable Region
K eyboard: Press CTRL+ALT+V
NOTE: To remember the various options, think of the acronym MICK, short for MICKEY. Similar approach works for the other options.

NOTE: There are two ways to create a repeating table:

When repeating a table you create from the Insert Table menu, etc, you don't usually select the header row (<th> tag)--you only need one or more table rows (<td> tag) in the table to repeat. Hence, the header is STATIC and the first or other rows are DYNAMIC. After making the row repeatable, you also need to make the row editable as well. The advantage of using this over the next approach is that is will create a single repeatable row; whereas, the next approach will create repeatable cells in a single row.
Use the repeating table option in the Insert bar.

IMPORTANT CAUTION: When working with a div tag, select the content of the div tag and not the div tag itself. If you make the div tag editable, someone can inadvertently delete the div tag in a page which would wreck your design. So it is best practice to NOT use the tag selector instead go the the Code view and select the content between the <div> tags. Selecting <div> tags for repeating regions; however, is perfectly acceptable.
CAUTION: Make sure you add the editable region to a tag (i.e., <p> Content goes here</p>) and not just plain text (i.e., Content goes here). Otherwise, Dreamweaver may give you problems with CSS.
CAUTION: You can rename a region in the Property Inspector by first clicking on the blue tab but other pages that were previously built from this template will be looking for the old name. So it is best to make sure the names are what you want BEFORE you create pages from a template.

If the container has text and/or images, delete them and replace it will some instructional text (i.e., Content for main body goes here...) or an image placeholder. You will be repopulating this region when you create pages that are instances of this template. Repeat these steps for each region you create.

NOTE: To remove any region, select the region and choose Modify > Templates > Remove Template Markup.

Beside making regions editable, you can also make tag attributes editable:

Editable tag attributes – makes a tag properties editable. For example, you can allow changes to the <body> tag so that you can change the background page color or provide a "hook" for CSS in the body tag. Another good use for the editable tag attribute is that you can make just the src and alt attribute properties of the image tag editable and the height/width properties non-editable so that the rest of the page can remain intact without any formatting issue. This would not be the case if you made the whole region where the image reside editable.

To make a tag attribute editable, select the tag using the tag selector and choose Modify > Templates > Make Attribute Editable. In the dialog box:

Select an attribute from the menu or add a new attribute with the Add button.
Ensure the Make attribute editable checkbox is selected.
Give the Label a name.
Choose a Type value (Text, URL, Color, True/False, or Number).
(Optional) Give a default value, if necessary.

NOTE: When making the <img> tag attributes editable for an image, Dreamweaver will display a broken-image icon which is normal in the template.
To remove the tag attribute editability, choose Modify > Templates > make Attribute Editable and deselect the "Make attribute editable" checkbox.

CREATE ADDITIONAL PAGES BASED ON A TEMPLATE

Select File > New and choose Page from Template to create a new INSTANCE of the page that is BASED off of the template. Repeat this step for each page. Populate the region(s) of the page that is exposed for editing. Normally, all you will be doing for each page is changing the Title tag, the page content and saving each file with new names (index.html, products.html, services.html, and contact_us.html).
NOTE: You can tell a page is based on a template because it will have a small yellow tab in the top-right corner with the template name and other tabs in the editable/repeatable regions of the page.
NOTE: When working with repeating region, Dreamweaver will add control so that you can add, delete or arrange the repeating regions.
NOTE: There is no visual cues that a page has editable tag attributes or an option regions. (Unlike the editable and repeating region that have blue tabs). To "see" if a page has any editable tag attributes or optional regions associated with it, choose Modify > Template Property. To change an editable tag value, change its value column for that tag. To show or hide an optional region, first highlight it and then select or deselect the "Show <OptionName>" checkbox.

If you don't want to link a new page to a template, deselect the "Update page when template changes" checkbox which will create a regular page with no editable regions. This technique is useful if you are changing the design or creating another type of template from an existing one.
CAUTION: Remember to reselect the "Update page when template changes" checkbox; otherwise, newer pages will inherit this setting.

UPDATE TEMPLATE

The time-saver and power of a template comes into play when you have to make change(s) to the common areas that was NOT defined as a region.

Once you make change(s) to the template including adding or removing regions and then save it, if you have already created pages from the template, Dreamweaver will prompt you to Update any pages that are based on that template. Click Update and then wait for the process to complete and then click the Done button. If you are working on a large site, you may want to click Don't Update if you are not finish with your changes so that you don't have to update all of the files a second time. You can later choose Modify > Templates > Update Pages

IMPORTANT NOTE: You make changes to the common locked down regions in the template (*.dwt). You make changes to the other editable, repeating or optional region(s) in the web pages (*.html). If you attempt to make changes to an editable region of a template, like adding text, those changes will not be reflecting in the updated template instances because the template will only update locked down regions.
NOTE: If you remove an editable region, Dreamweaver will warn you when you attempt to save the template. Your can either delete the content on each page or move it to another region..0
NOTE: You can also detach a page from a template by choosing Modify > Templates > Detach form Template if you want to return the page to a regular page for editing.

PREVIEW AND UPLOAD

To verify changes, preview other pages that the template was based off of to see changes. Remember, to upload ALL of the pages that were affected by the template to the server.

NOTE: You can remove the HTML comments that identify editable, optional, and repeating regions inside pages that were created from a template by choosing Modify > Template > Export Without Markup. Select a folder OUTSIDE of your existing site to save a version of your existing site without the markup code in it. You may want to REDEFINE another site for it before you upload it to a server.

BONUS 1: APPLYING A TEMPLATE TO AN EXISTING PAGE

You are not limited to creating pages FROM a template. You can APPLY an template to an EXISTING page. Dreamweaver attempts to match the existing content to the template's regions. If it can not find a match, it will display a Inconsistent Region Names dialog box so the you can reconcile the differences.

Open an existing page and then choose Modify > Templates > Apply Template to Page and select the name of the template.

In the Inconsistent Region Names dialog box:

Choose Document Body in the Editable Regions list.
In the Resolved column match the body content to a editable region in the template by selecting an editable region in the Move Content to New Region menu. Otherwise, choose Nowhere to create a new blank page base on the template.
NOTE: You can only select one editable region. If there are more than one, Dreamweaver will merges them into a single editable region.
If the Document Head option appears, select it and choose "head" from the Move Content to New Region menu to preserve any head's tag elements (style, meta, script, etc.) except the <title> tag which will inherit the template <title> tag value. Otherwise, choose Nowhere to use the default head tag elements.
Click OK to apply the template to the existing page.

BONUS 2: CREATING ADVANCED OPTIONAL REGIONS AND NESTED TEMPLATES

You can also create nested templates which an inherit design elements from a master template. SEE PAGE 582-591 & page 595,598 of Dreamweaver MX 2004 by David McFarland.