General Info   Cool Tools     Getting Started   Troubleshooting     Design & Promotion   Feedback

Search this site: view site map

Creating and Applying Templates in Dreamweaver

• Introduction
• Creating a Template
• Creating a New Page Based on a Template
• Applying a Template to an Existing Page
• Help

Dreamweaver templates assist web designers in creating and applying a consistent page design and layout across a web site. Using templates also cuts down on site maintenance as changes to these items may be used to globally update the pages in your site.

A Dreamweaver template is a document that you can use as the foundation for other web pages in your site. A template allows you to define overall site page layout and typically contains elements that will consistently appear on all web pages in your site, such as logos, navigation bars, placeholders for page title, regions defined for content, etc.

There are two key definitions in any given template:

• Editable regions or selections
• Uneditable regions

Certain elements in the template will be defined as editable, which means you will be able to change this element on individual web pages. Examples of elements that would typically change from page to page are content and the title of the page. You will need to define at least one region as editable in order to add or change that main content area on individual web pages created from a template.

Non-editable items in your template are those that will remain the same on all the web pages in your site. These are the elements that, when modified in the original template, will be globally updated on the other pages in your site created from that template.

In the following example, I started with a new Untitled document in Dreamweaver and inserted a table with 3 columns and 5 rows (some of which are merged cells) and set up the page layout as shown:

To define selections (objects) as editable, you need to:

1. Select the object (i.e. text, image, etc.).
2. From the Modify menu, choose Templates | Mark Selection as Editable. Name the new editable region appropriately and click OK.

To define regions (i.e. a table cell) as editable, you need to:

1. Select the region.
2. From the Modify menu, choose Templates | New Editable Region. Name the new editable region appropriately and click OK.

Other elements and regions not specifically defined by you as editable will remain non-editable.

When you are finished laying out your template, you need to save it as a template:

1. Select File | Save as Template.
2. You will be prompted to name the template. Give the template a name and click OK.

In Dreamweaver, templates are assigned the .dwt file extension and are stored in the Templates folder within your local site. This folder is created automatically when you save a file as a template. The Templates folder and any templates it contains will be automatically uploaded to the web server when you a upload a web page created from a template or one that has had a template applied to it.

1. Go to the File menu and choose New from Template...
2. The Select Template dialog box appears. Choose the template of your choice from the list and click Select.

3. A new Untitled document opens with all the elements and layout from the template. Uneditable regions are specified by color (in this case, yellow) and cannot be selected or changed except in the template itself. Only the regions/selections marked as editable may be changed in the new document.





4. In this example, you would select and ...

• edit the region for Page Title,
• add content in the Main Content region designated for this, and
• insert the Library item, bottomnavbar, into the region so designated.

5. Save the page as an .html or .htm file and Preview in a browser.
6. Upload the page to your web server using Dreamweaver's FTP utility.

You can create a template at any point in the development of your site and apply it to existing pages.

1. Open an existing web page in Dreamweaver.
2. Select Modify | Templates | Apply Template to Page. The Select Template dialog box opens.
3. Choose the template you wish to apply to the existing page from the list and click Select.
4. A second dialog box will appear asking you to Choose Editable Region for Orphaned Content with a list of editable regions in the window and "(none)" selected by default.

5. You need to choose one of the other editable regions listed, usually the region you have designated for the "body" or "main content" of a page, as the area to place the existing (orphaned) web page content. Do not use (none) as your selection.
6. Make any necessary modifications to the page, save your work, and preview in a browser.
7. Upload the page(s) to the web server using Dreamweaver's FTP utility.

Dreamweaver's Help feature offers a tutorial and in-depth information on how to create and apply templates. The Help feature may be accessed in Dreamweaver from Help | Using Dreamweaver.

ITC Training Services offers 2 Dreamweaver workshops, Fundamentals and Advanced, as part of the Web Certification program. For more information on the program and workshop schedules, visit the Web Certification web page:

http://www.itc.virginia.edu/training/webcert

Macromedia Technotes on incorporating Templates in your web site:

• "How to use the Dreamweaver Site window and Template features in creating a site"
  http://www.macromedia.com/support/dreamweaver/ts/documents/site_planning3.htm
• "Important information to consider when using templates"
  http://www.macromedia.com/support/dreamweaver/ts/documents/template_considerations.htm