Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Dreamweaver Templates PrimerPVII is the leader in creative extensions for Dreamweaver

Dreamweaver templating features allow you to manage repeating sections of your web pages, such as navigation, in a central file. Also see: Library Items and Includes. The techniques you will learn are applicable to any PVII menu system or widget.

Back to Main Template Tutorial

Dreamweaver Templates Primer

Dreamweaver Templates are a popular way to manage small and medium-sized web sites. A template carries your complete page layout and gives you the ability to update multiple pages at once. Dreamweaver Templates use a master file to manage your site design from a single local file. Dreamweaver places master template files inside a folder named Templates, which it creates in the root of your defined Dreamweaver Web site. Once you save your design as a Template you can use it to generate new pages or even attach the Template to existing pages.

In order for Templates to function, you must work inside a properly defined Dreamweaver site.

Defining a Site in Dreamweaver

To define a Dreamweaver site, follow these simple steps:

Choose Site > New Site

Specify local site location

The Site category of the Site Setup dialog box is the only one you need to fill out to begin working on your Dreamweaver site. This category lets you specify the local folder where you’ll store all of your site files. When you’re ready, you can fill out the other categories in the Site Setup dialog box, including the Servers category, where you can specify a remote folder on your remote server and enter FTP information (if you want) so that you can connect to your remote site through Dreamweaver to upload your files. You can also use dedicated FTP software to upload your files. For information on remote server connections, see this Adobe technical article.

Site Name

The name that appears in the Files panel and in the Manage Sites dialog box; it does not appear in the browser.

Local Site Folder

The name of the folder on your local disk where you store site files, templates, and library items. Create a folder on your hard disk or click the folder icon to browse to the folder. When Dreamweaver resolves site root-relative links, it does so relative to this folder.

When your website has a lot of pages and you want them to share certain design features, you can create and apply a template to them. If you have a group of pages with an applied template to it, you can change the information of the group by editing the template and then reapplying it to those pages. You can do that while keeping the unique elements of each page unchanged.

Define your site and create a page which will be used to create your template.

Saving a Page as a Dreamweaver Template

You can create a new page, design it, and then save it as a Template—or you can save an existing page as a Template. To do so, open your page and choose File > Save as template.

The Save As Template dialog will open.

Choose a site (one of your defined sites), enter a description and a file name (in the Save as box).

Click Save.

To work in your Template make sure that the site you saved it in is the currently active site in Dreamweaver's Files panel.

Editable Regions

To use your Template you need to create one or more Editable Regions. These regions are placeholders for content that is unique for each page that is connected to the template. The parts of your Template that are not Editable Regions are considered Locked. When you make a change to content inside a locked region of your master Template page Dreamweaver will ask if you would like to update pages that are based on (or connected to) the Template. If you have a menu in a Locked Region and make a change to it, Dreamweaver will apply the change to every page connected to the Template. To create an Editable Region, choose:

Insert > Template Objects > Editable Region:

Name the region name in the New Editable Region dialog:

Now you have a template with an editable region in it.

Create a New Page Based on your Template

To create a new page based on your Template, choose:

File > New

The New Document window will open. Pictured below is the window in CS6. Your window design may be different if you are using a different Dreamweaver version.

Select Page from Template in the first column.

Select a defined site from the Site list in the second column.

Select a Template from the third column.

DocType will be grayed out if you've defined a default type in Dreamweaver Preferences.

Leave Update page when template changes checked.

Click Create.

Your new page will be created. Before editing the page save it within your defined site.

Applying a Template to an Existing Page

Dreamweaver allows you to apply a Template to an existing page. We recommend doing this if your existing page is very simply laid out.

Tip: It is often easier to make a backup of your existing page, create a new page from your Template and then copy the content from the existing page's backup to the new page.

Open an existing page and choose:

For Dreamweaver CS6 and Earlier:
Modify > Templates > Apply Template to Page

In Creative Cloud versions, this command can be found on Tools menu

For Dreamweaver Creative Cloud
Tools > Templates > Apply Template to Page...

Choose the template to apply to your page

Click Select

The Inconsistent Region Names window will open.

Choose the editable region in which to add your unresolved content. Head content should usually be resolved to Nowhere. Document body content should resolve to the main content editable region you set up in your master Template. Once your page is attached to the Template, you can clean up any content you do not want.

 Click OK

When you apply a template to a document which contains existing content, Dreamweaver attempts to resolve 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.

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 so you can select which region or regions to move the current page’s content to, or you can delete the mismatched content.

If you are unsure what to do, click the Help button in the interface to access Adobe's documentation.

You can undo a template application if necessary (Edit > Undo).