Dreamweaver Web Template (.DWT) Tutorial

What is a Dreamweaver Web Template?

• Dreamweaver template is a special type of document that can be used to add structure and layout to a page.
• Dreamweaver template enables you to ensure that all pages are rendered correctly in a variety of web browsers, such Microsoft Internet Explorer and Netscape Navigator.
• Web Designers and template authors now have tools to lock a page's layout, leaving unlocked areas ("editable regions") for content contributors to add their material. 

How do I use Dreamweaver Web Templates?

• By creating a Dreamweaver Web Template, you can make regions on attached pages available for other authors to add and modify content, while preventing changes to other regions on the same page. This provides you with control to preserve the layout of the pages and the template itself.
• When you update the content in a Dreamweaver Web Template, you can update the attached Web pages simultaneously.
• You can use any number of Dreamweaver Web Templates in a Web site, and you can attach a Dreamweaver Web Template to as many pages as you like.
• There are special template storage restrictions. Templates must be saved in a special Templates folder in the local root folder of the site. If the Templates folder does not already exist in the site, Dreamweaver automatically creates it when you save a new template. If you want to use some .dwt file as a web page template, you should place it into the Templates folder.

What are the key content regions of a Dreamweaver Web Template?

• Editable regions are those areas that you specify in the Dreamweaver Web Template as being okay for other writers to edit. For example, you might have a section about upcoming events that changes often. When creating the Dreamweaver Web Template, you can enable other authors to add or remove event information in the regions you specify without having to worry that they will alter the page layout.

Dreamweaver Web Template can contain the following editable regions:

1. Editable Regions
2. Optional Regions
3. Repeating Regions

Create a Dreamweaver Web Template

• You can create a template from an existing document (such as an HTML, Macromedia ColdFusion, or ASP (Microsoft Active Server Pages document) or you can create a template from a new, blank document.
• The New Document dialog box (File >New) provides several options for creating new templates, and creating template-based pages.
• Dreamweaver saves templates with the file extension .dwt. Templates are saved in a special Templates folder in the local root folder of the site. If the Templates folder does not already exist in the site, Dreamweaver automatically creates it when you save a new template.
• If you insert a template region in a document that hasn't been saved as a template, Dreamweaver advises you that the document will automatically be saved as a template.

Note: Do not move your templates out of the Templates folder, or put any non-template files in the Templates folder. Also, do not move the Templates folder out of your local root folder. Doing so causes errors in paths in the templates.

To create a Dreamweaver template:

1. Open the document you want to save as a template in the Document window, by doing one of the following:
   To open an existing document, choose File > Open and select the document.
2. To open a new blank document, choose File > New. In the dialog box that opens, choose Basic Pages or Dynamic pages. In the document list select the type of page you want to work with, then click Create.
   When the document opens, choose File > Save as Template.
   Note: Unless you selected Don't Show This Dialog Again, you'll receive a warning that says the document you're saving has no editable regions. Click OK to save the document as a template, or click Cancel to exit this dialog box without creating a template.
3. In the dialog box that appears, select a site to save the template in from the Site pop-up menu, and enter a unique name for the template in the Save As text box.
4. Click Save.
   The template file is saved in the site's Templates folder, with a .dwt filename extension.

To create a new Dreamweaver template using the Assets panel:

1. Open the Assets panel (Window > Assets or F11), if it isn't already open.
2. Select the Templates category.
3. Click the New Template button in the Assets panel. A new document is added to the Name list. The document name is highlighted.
4. Type a name for the document.
5. Click the Edit button in the Assets panel. A template document opens in the Document window

Add editable regions to a Dreamweaver Web Template

• Editable template regions control which areas of a template-based page can be edited.
• You can mark an entire table or an individual table cell as editable, but you can't mark multiple table cells as a single editable region. If <td> is selected the editable region includes the region around the cell; if not, the editable region affects content inside the cell.
• Before you insert an editable region, you should save the document you are working in as a template. If you insert an editable region in a document rather than a template file, Dreamweaver warns you that the document will automatically be saved as a template.
  
  

To define an editable template region:

1. In the Document window, do one of the following to select the region:
   • Select the text or content that you want to set as an editable region.
   • Place the insertion point where you want to insert an editable region.
2. Do one of the following to insert an editable region:
   • Choose Insert > Template Objects > New Editable Region.
   • Right-click (Windows) or Control-click (Macintosh) the selected text or object, and choose New Editable Region from the context menu.
   • In the Insert bar, select Templates, then click the Editable Region button. The Editable Region dialog box appears.
3. In the Name text box, enter a unique name for the region. (You cannot use the same name for more than one editable region in a particular template.) Note: Do not use special characters in the Name field.
4. Click OK.

The editable region is enclosed in a highlighted rectangular outline in the template, using the highlighting color that is set in preferences.
A tab at the upper-left corner of the region shows the name of the region. If you inserted an empty editable region in the document, the name of the region also appears inside the region.

Optional Regions

• Using optional regions, you can define a section of the page that will or will not be shown, depending on what the content contributor decides. Optional regions are controlled by a conditional statement; the template tab of an optional region is preceded by the word "if".

To create optional regions:

1. In the Document window select the element you want to set as an optional region.
2. Click the Templates menu and select Optional Region.
3. In the dialog box that now appears give the optional region a name.
4. Click the OK button.
5. Repeat the above steps to add more optional regions to the document.
6. In the document window, choose Modify > Template Properties. The word "true" appears in the Value column next to each of the optional regions. This means that each optional region is currently visible on the page. Changing the values of these optional regions to false prevents the document from displaying them.
7. Open the Property inspector.
8. In the Property inspector, click Edit to open the New Optional Region dialog box to set basic or advanced "if" conditions/rules to your optional regions.

Creating a nested template

• A nested template is a template whose design is based on another template. By creating nested templates, you can control content in pages that share the same layout but have a few subtle design variations.
• You can create a nested template by saving a document based on a template, then creating a new template of that document. Nested templates let you create variations of a base template. You can nest multiple templates to define increasingly specific layout.

To create a nested template:

1. Create a document from the template you want to base the nested template on by doing one of the following:
   • In the Assets panel's Templates category, right-click the template you want to create a new document from, then select New From Template.
   • Choose File > New. In the New Document dialog box, click the Templates tab and select the site that contains the template you want to use; then in the document list, double-click the template to create a new document.
     A new document appears in the Document window.
2. Choose File > Save as Template or click the Make Nested Template button in the Insert bar, to save the new document as a template
3. In the new template, add additional content and editable regions.
4. Save the template.

In documents based on the nested template, you can add or change content in editable regions passed through from the base template, as well, as editable regions created in the new template.

Applying a template to an existing document

• When you apply a template to a document which contains existing content, Dreamweaver attempts to match the existing content to a region in the template. If you are applying a revised version of one of your existing templates, the names are likely to match. Dreamweaver compares the names of the editable regions in the document to the names of the editable regions in the new template; for each region name that matches, Dreamweaver places the existing contents of that region into the new region with the same name.
• If you apply a template to a document that hasn't had a template applied to it, there are no editable regions to compare and a mismatch occurs.
• Dreamweaver tracks these mismatches and lists them in the Inconsistent Region Names dialog box. You can then select which region or regions to move the current page's content to, or you can choose to delete the mismatched content. If you want to keep the content, select the name of an editable region from the pop-up menu in the dialog box; otherwise, choose "nowhere", which discards the unresolved content.

To apply a template to an existing document:

1. Choose File > Open to open the document you want to apply the template to.
2. Perform one of the following actions:
   • Click in the Document window, then choose Modify > Templates > Apply Template to Page. Choose a template from the list and click Select.
   • Select the template in the Templates category of the Assets panel, and click the Apply button.
   • Drag the template from the Templates category of the Assets panel to the Document window's Design view.
3. If content exists in the document that can't be automatically assigned to a template region, the Inconsistent Region Names dialog box appears. It lists all the editable regions in the template being applied. Use it to choose a destination for the content. 

Detaching a document from a template

• To make changes to the locked regions of a document based on a template, you must detach the document from the template. When the document is detached, the whole document becomes editable.

To detach a document from a template:

1. Open the template-based document you want to detach.
2. Choose Modify > Templates > Detach from Template.

The document is detached from the template and all template code is removed.  

Updating template based pages

• When you make a change to a template, Dreamweaver prompts you to update the documents based on the template. You can also use the update commands to manually update the current document or the entire site. Using the update commands is the same as reapplying the template.

To open and modify an attached template:

1. With the template-based document in the Document window, select Modify > Templates > Open Attached Template.
2. Modify the content of the template as desired. To modify the template's page properties, choose Modify > Page Properties. (Documents based on a template inherit the template's page properties.)
3. Save your document. Dreamweaver prompts you to update pages based on the template.

To apply template changes to the document:

• Select Modify > Templates > Update Current Page.

To update the entire site or all documents that use the attached template:

1. Select Modify > Templates > Update Pages.
   The Update Pages dialog box appears.
2. In the Look In pop-up menu, do one of the following:
   • Select Entire Site, and then choose the site name from the adjacent pop-up menu. This updates all pages in the selected site to their corresponding templates.
   • Select Files That Use, and then choose the template name from the adjacent pop-up menu. This updates all pages in the current site that use the selected template.
3. Make sure Templates is selected in the Update option.
4. Click Start.