Exit tutorial


HTML Tutorial
Dreamweaver Tutorials
Using Templates in Dreamweaver

As an alternative to creating each page on your Web site separately, you can create the basic layout and navigation system once and use it as a template for each of your pages. Macromedia Dreamweaver templates can be modified at any time, and will update changes to the rest of your Web site. Dreamweaver templates can be a valuable way to save time and guarantee a consistent design.

1. Creating and Defining a New Site
Create and name a folder for your new Web site, saving it in an appropriate place on your computer or network (such as My Documents).

From the Site menu in Dreamweaver, select New Site. The Site Definition for Unnamed Site 1 dialog box appears.

Site Definition for Unnamed Site 1

For Site Name, enter the name of the site. This name is for your reference only. After Local Root Folder, choose the folder created for the site. Make sure the Refresh Local File List Automatically and Enable Cache boxes are selected. Click OK.

2. Making a Template Page with Editable Regions
From the File menu in Dreamweaver, select New File. The highlighted text is your new file. Type in a name for the file (such as template1.htm). Your site should look something like the picture below.

Local Folder...

To open up the file, double click on the file name and a new untitled document will appear. From the File menu, select Save as Template.

Save As Template

In the Save As field, enter in the name of your template. Click Save.

Use tables to lay out a header, scan column, body column, and footer with all the navigation links and graphics in place. Right-click inside of the body column. Select New Editable Region.

New Editable Region: body column

Enter in a name and click OK. The editable region should look similar to the one pictured below.

body column

Add an editable region for each section of the layout that will differ from page to page. Without editable regions, you won't be able to edit pages created from the template. Save and Close the template page. Click Yes when you are asked if you want to update the pages.

Return to the Dreamweaver window with the view of your Web site. There will be a new Templates folder containing your template page as a .dwt file, as shown below (click on the + to see the files inside of a folder).

Local Folder...

Delete the original template.htm file (not the template.dwt file) by clicking on the file name and pressing Delete. Click OK.

3. Adding Pages Based on the Template.
Click on the top most folder (shown above as C:\My Documents\New Folder). From the File menu, select New from Template. The Select Template dialog box appears:

Select Template

Click on the name of your template and press Select. Make sure Update Page when Template Changes is checked. A new page based on the template will open up. Save the page in the folder you created for your Web site and give it a meaningful name (for example, index.htm). Use Save As to make a new page for each section of your site. You can make changes to the template at any time, and the changes will be updated on each template-based page.

[Back to the Stage 4 Index]