Dreamweaver: Using Templates

One of the benefits of Dreamweaver is that is has the ability to use templates so that you can control the layout of your pages with from one file. Their not the most efficient thing in the world, but they are very handy and can save you hours in development work.

This tutorial assumes that you are fairly new to using Dreamweaver, but have sufficient knowledge in how to use it, and that you are familiar with the way in which Dreamweaver works with Sites. If you are not familiar with Dreamweaver sites, please refer to the Dreamweaver: Setting up a new Site tutorial before continuing any further.

What is a Dreamweaver Template?

A Dreamweaver template is nothing more than an HTML file in which you develop your main web page layout that you you would like common to one or more pages in your web site. The template file has a DWT extension and it uses HTML comments that Dreamweaver interprets as commands when performing functions on a page that uses a template.

The benefit of Templates is that you can create as many pages as you like from one template, and when you change the template - it will automatically change EVERY file in your web site that uses that template to match. The changed files will need to be uploaded to your web server again after any changes are made to the template but that's a small price to pay for such great functionality.

It should be noted that due to the way templates work, you will not be able to edit any of the template code on any pages that are built from the template. Instead you must define editable regions in the template that can be edited on any generated pages.

Creating Your First Dreamweaver Template

Creating a new template in Dreamweaver is Easy. Follow the simple steps below:

Click on the File->New... option in Dreamweaver's main menu.
Select the 'Template Page' Category Pane
Select a Template Style from the Style Pane. Usually this will be HTML.
Click ok.

You should now be presented with what looks like a blank web page. This is in essence exactly what you have. You can now develop your page layout. When you are done with laying out your template, proceed to the next section.

Creating Editable Regions

When you build a page from a template, you initially cannot edit ANYTHING on that page as it is locked by the template. The way around this is that you need to create what's known as 'Regions' in the template file. Regions in Dreamweaver appear outlined by a teal border and a tab that shows the name of each region.

There are a number of different regions you can setup in a Dreamweaver template, a few are listed below:

Editable Region
Optional Region
Repeating Region

This tutorial only covers the Editable Regions. Please search online for more information regarding the other types of Dreamweaver Template Regions.

To Create a Region in your template that will be editable in any page built from the new template, first locate the area in which you would like to add the new region and click there to move the cursor. Alternatively, find the location in Dreamweaver's code view and place the cursor that way. I would recommend using the Code View as it will give you a chance to see how Dreamweaver uses HTML Comments as Template Markup Instructions.

Now, Select the 'Template Objects' option from the Insert Menu, and select 'Editable region' from the list. A window will then popup asking you to name the new region. You should name the new region with an easily identifiable name, such as 'toolbar', 'menu', or 'main content'.

You will then see the following code added in code view:

 

As you can see, this is no more than an HTML style Comment that Dreamweaver will interpret as Template instructions. Anything in between these two comment tags will be ignored by Dreamweaver's template functions and not effect any pages built from the template.

If you now switch back to design view, you will see a teal coloured box around the region and its name in a tab. Your template is now ready!

Creating Pages from Templates

Now that you have a nice new template to work with on your site, you can create pages from this template. To do this, click on the 'File->New...' menu option in Dreamweaver, and select the 'Templates' Tab from the popup window. This pane lists all the templates that are present in your Dreamweaver web site.

Select your new template from the list and click the ok button. You will now see a copy of your template on screen. Notice that there is a big light yellow border around the page frame and a big tab that tells you the page is using a template.

Also notice how you cannot edit anything on the page with the exception of the editable regions you created in your template.

You can use this method to create as many pages as you like.

Changing your Templates

If at any time you need to make changes to your template, locate the template file in your Sites file list and open it. Make any changes you have and then save the template. A window will pop up informing you that you have changed a template, and would you like to update all pages that use that template to match the new version.

Click yes and you will see Dreamweaver's progress as it goes through your site and updates all the pages that use the edited template. Don't worry, you won't (normally) lose any data. Anything that is in an editable region will remain intact on the updated web pages.

If you rename or move a region from a template, you will be told that the documents being updated contain a region that the edited template does not, and it asks you what you would like to do with the data found in the file being checked. You can either erase it, or move it to another region in the template.

Once you have updated the files in your site this way, you will need to upload them all to your server again.