Advanced Search

Dreamweaver Templates

DreamWeaver Tutorial by Björgvin Guðmundsson


This tutorial demonstrates how to make templates using Dreamweaver 4. You can use templates to create web pages that have a common structure and appearance. Templates are useful when you want to make sure that all of the pages in a site share certain characteristics.

Once you apply a template to a group of pages, you can change information on the group of pages by editing the template and then reapplying it to those pages. While elements unique to each page (such as text or graphics) remain unchanged, common template elements (such as menu bars and links) are updated on all of the pages that use the template.

Tutorial Requirements

Basic knowledge of Dreamweaver 3 or 4.

Index of steps

Step 1. Define your site.
Step 2. Create a template from an existing page.
Step 3. Modify your Template.
Step 4. Create a new page from Template.
Step 5. Editing a template-based page.

Step 1. Define your site.

When you define a local site, you tell Dreamweaver where you plan to store all the files for a particular site. To work effectively in Dreamweaver, always define a local site for each Web site you create.

a. Start up Dreamweaver and open your existing page.

b. In the top menu choose Site > New Site.

c. The Site Definition window will now open the Site Definition window.

d. Type the name of your site in the Site Name field and locate your Local Root Folder by pressing the folder icon to the right of the Local Root Folder field.
(Note: The Root Folder is the folder, which contains your existing page.)

e. (Note: This step is optional) In HTTP Address field type in the URL to your homepage located on the Internet.

f. After you have done that press the OK button.

Step 2. Create a template from an existing page.

In this section you will learn how to create a template from an existing page and use it to create a new page.

a. In the Site window's Local Folder list, double-click the icon for "your web page.html" to open the file.

b. Choose File > Save as Template.
At that point the Save As Template window will appear.

Step 3. Modify your Template.

At this point, the new template is the same as the page from which you saved the template. A template contains both locked and editable regions. Locked regions can be edited only inside the template itself. Editable regions are placeholders for content that is unique to each page the template is applied to. In your template the Title of the page is the only thing at the moment that is editable.

Your first step is to create editable regions in the template.

a. Select the table you want to make editable.
(Note: Select the area that contains the content, which is unique for each page)

b. Choose Modify > Templates > New Editable Region.
The New Editable Region dialog box (S.03) appears.

c. In the Name field, type e.g. "text area 1" as the name for this region of the template.


d. Choose OK.

A template region is created. Notice the tab that contains the template region's name. The placeholder is also surrounded by a light-blue line that identifies the boundaries of the editable area.

e. Repeat step a - d for each table you want to be editable.
(Note: Be sure to use different names for each editable region, otherwise you could end up with having problems)

f. When you are done making all your editable regions choose File > Save Template As.

Step 4. Create a new page from Template.

Now that you've set the editable regions in your template, you'll use the template to create a new page.

a. Choose File > New from Template to open a new

b. In the Select Template dialog box's Templates list, select
your template (In my case "main"), then click Select to select the template you want to apply to the new page.

The template is applied to the new document.
(Note: If you move the mouse pointer to a non editable region of this template, such as the logo or navigation button areas, the mouse pointer changes to indicate that you can't acces sthe locked region.)

c. Save your document, and name the file.

Step 5. Editing a template-based page.

Now you'll update the page you just made, updating the editable regions with images and text that refer to it.

a. Select one of the editable regions you want to edit. Type in the text, or insert the image you want to use and do the same thing with the rest of your editable regions.

b. Then save your file.

That's it!

Now you should be able to create your web site by using templates. Good luck!

You can find more Dreamweaver tutorials at