HOW TO CREATE, USE, AND UPDATE A TEMPLATE

Templates allow you to create consistence pages easily that has common graphical interface elements (e.g., header, footer, or sidebar) that can be protected from editing while at the same time exposing other areas (e.g., 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.

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 a new or existing page, define a web site and ensure all links (e.g., Home > index.html, Products > products.html, etc.) are correctly pointing to the desired pages you intend to create using the template technique.

  1. Create a folder and give it a specific name (e.g., RMCS Web Site).
  2. INSIDE of this folder, create another folder named images, css, and js, if necessary.
  3. Open Dreamweaver and select Site > New Site to define a web site for the main folder in the first two fields and then click the Save button.

CONVERT PAGE TO A TEMPLATE

  1. Select File > Save as Template... (not Save As...) and in the dialog box that appears give the template a name (e.g., RMCS_Template), an optional description, and then click the Save button. 
  2. Choose Yes when Dreamweaver prompts to Update Links.
  3. CHECK POINT: If you look in the Files panel, you see that Dreamweaver AUTOMATICALLY created a folder called Templates and placed the template inside of it with an extension of .dwt (not .html).  For dynamic server-based pages, Dreamweaver will add the .dwt BEFORE the file extension (e.g., mytemplate.dwt.asp).
  4. Select File > Save to save the template.

DEFINE REGION(S) THAT CAN BE CHANGED

If you create a template and save it without defining any region to be modified and then 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.

  1. Select File > New... (CMD/CTRL+N) and in the New Document dialog box that appears, select Site Template (not New Document), and then click the Create button.

    NOTE: Dreamweaver automatically selected the last created template so you did not have to worry about selecting it.

  2. CHECK POINT: Save the file that was based on this template as DeleteThisPage.html and try to make edits to it. You will see that you get the "cannot edit icon" to let you know that you can not edit this page. The reason this page cannot be edited is because when it was created, no region of the page was "told" to be editable. This will be resolved in the next few steps.
  3. Delete the DeleteThisPage.html as it was only used to show that if a template is created without any region being told to be editable everything on the page will be locked..
  4. Return to the template file with the .dwt extension, and select the main content region of the page by clicking on it until it is highlighted.

IMPORTANT NOTE: Except for the tags between the <head> element (e.g., meta, link, title, script, and style)–which is always editable and the defined regions, all other areas of a page will be locked (e.g., 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 OTHER REGIONS, select an element or image and define one or more of the following regions in the template.

  • Editable (most common) – select any element between the <body> element  (e.g., a div element) that anyone can change on each template instance.
    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.
  • 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.

    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 cannot 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 > Editable Region
  •  I nsert Panel: Select  Templates from the drop down and then click Editable Region icon
  • C ontextual Menu: Right-click (Control Click on a Mac) and choose Template > New Editable Region
  • K eyboard: Press CMD/CTRL  + ALT/OPTION + 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:

  1. When repeating a table you create from the Insert Table menu, etc, you don't usually select the header row (<th> element)--you only need one or more table rows (<td> element) 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.
  2. Use the repeating table option in the Insert panel.

IMPORTANT CAUTION: When working with a div element, select the content of the div element and not the div element itself.  If you make the div element 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 to 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 an element (e.g., <p>Content goes here</p>) and not just plain text (e.g., Content  goes here).  Otherwise, Dreamweaver may give you problems with CSS.

CAUTION: You can rename a region in the Property Inspector by first clicking 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  (e.g., 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> element 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 TEMPLATE

Once a template is created, you can create all of the other pages BASED OFF of this template.

  1. Select File > New... (CMD/CTRL+N) and in the New Document dialog box that appears, select Site Template (not New Document), and then click the Create button.

    NOTE: 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).

  2. Save this file as index.html and make whatever changes you need to (e.g., change <title> element, page content, etc.)
  3. Repeat previous steps for all pages.

    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.

  1. Make a change to the template (e.g., add another menu item) and then save it.
  2. CHECK POINT: Dreamweaver will prompt you to Update any page that are based on that template.
  3. Click Update and then wait for the process to complete and then click the Done button. 

    NOTE: 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.

    NOTE: You can also detach a page from a template by choosing Tools > Templates > Detach form Template if you want to return the page to a regular page for editing.

PREVIEW AND UPLOAD

It is important to remember that if you change a template, ALL PAGES based on that template has to be uploaded to the server. If you only made changes to a given page, only that page and any dependent files (image, JavaScript, or CSS) that has changed only need to be uploaded to a server.

  1. Preview pages and make any necessary changes to the template or pages.
  2. Upload any pages that has changed based off of the template.

    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: APPLY A TEMPLATE TO AN EXISTING PAGE

You are not limited to creating pages FROM a template. You can APPLY a 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.

  1. Open an existing page and then choose Tools > Templates > Apply Template to Page...
  2. Select the name of the template and In the Inconsistent Region Names dialog box that appears:
  • 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 based 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 the OK button to apply the template to the existing page.

BONUS 2: CREATE NESTED TEMPLATES

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