Creating & applying Dreamweaver templates

Tutorial created by Ray Borduin, WebAssist

Categories: Design Extender, Design, Dreamweaver

4 ratings | Sign in to rate this tutorial | View comments

next section

What you need to start

Dreamweaver 8 or newer

next section

Create your template

A Dreamweaver template can be generated from any HTML or PHP page. Once you have created the design of your site, whether using Design Extender's CSS tools or manually in Dreamweaver, follow these steps to create your template.

Or instead of creating a template, you can use one of our free Dreamweaver templates, create a folder in the root of your site called Templates and place it there. Then you can skip down to the next section, Define editable regions.

1. In Dreamweaver, open the file that contains your design.
   
2. If you intend to create PHP pages out of this template, but your file currently has a .htm or .html extension, you should choose File > Save As, and choose PHP to change the extension.
   If you don’t need to change the file extension, skip to the next step.
   
3. Go to File > Save As Template.
   
4. In the Save As Template window, enter a name for your new template.
   
   
   
   
   
5. Click Save.

The template file you just saved will be stored in the Templates directory of the site you have open in the Files panel.

next section

Define editable regions

Editable regions are applied to various locations of your template to specify where content can be inserted.

You should only create editable regions for areas where content will change on a per page basis. For example, the header is likely to be consistent throughout your entire site, and should not be an editable region. Whereas, the content area of your page should be different for each page, and would require an editable region.

1. Place your cursor within the area where you wish to create your editable regions.
   
2. Then, from the Template Objects option under the Insert menu, select Editable Region.
   
3. In the Name field of the New Editable Region window, enter a name for the editable region.
   
   
   
   
   
4. Click OK.

An editable region is now displayed on your page defined by a blue border.

next section

Apply your Dreamweaver template

Once you have created your template and editable regions, you can apply it to any page in your site.

1. Open the first page of your site.
   
2. From the Assets tab, choose the Templates option.
   
3. Right-click the .dwt file that you are using for your site.
   
4. Choose Apply.
   
   
   
   
   
5. Select the appropriate editable regions for each portion of your page.
   
6. Click OK.

Repeat this process for each page in your website.

Create a new file from a template

When creating a new page for your website you want based on the template, you should always create your new page from the template you are using.

1. From the Assets panel, right-click on your template and choose New from Template.
   In newer versions of Dreamweaver, use the main Dreamweaver menu to click File > New, then select Page from Template.
   
   
   
   
   
2. When the page is loaded in Dreamweaver, press Ctrl (Cmd) + S to save the page.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

4 ratings | Sign in to rate this tutorial