Create and use a Dreamweaver template

Open Dreamweaver and define a new site. If you don't know how to see my tutorial on how to define a site here

Now you need to create a layout for your site as you would normally whether you export it from Imageready or Photoshop and edit it or create one from scratch doesn't matter. For this tutorial I am just using very simple HTML to explain the process properly.

If you do not want to make a site, you can use this one I quickly made. Download here (2kb)

Highlight the area of text that you wish to make in to an editable region. Editable regions are parts of the site that can be changed on every page that you make, but the rest of the page will be unmodifiable. For my site I have highlighted the "Text Area Title" bit.

Then go to Insert » Template Objects » Editable Region (Ctrl + Alt + V)

If you have never made a template before you will get a message like this:

Just press OK, you can tick the box if you don't want it appearing all the time.

Then you will be asked to give the region a name:

I just called mine TitleArea then press Ok.

Now do the same for your main content area using the same technique.

At this point if you look at the source code you will see some new code has been added.

<!-- TemplateBeginEditable name="TitleArea" -->Text Area Title<!-- TemplateEndEditable -->

The bold bit here is the text that was there originally and the two extra bits of code have been added either side to show that it is editable.

The rest of your code will still be normal, so now we have to save it.

When you save it you will be shown this message:

Give it a name and press Save.

Once you press Save you will be asked whether you want to update the hyperlinks.

If you have already set up all the links to your other pages then press Yes otherwise you can just click No or Yes. In my example you would have to click Yes so that it picked up the Style Sheet or you will have to manually change the link.

If you look at the top you will notice that the file extension has changed.

A .DWT file is a Dreamweaver Template file.

If you look down the files list you will also notice that there is a new folder called Templates that has been created.

This folder contains your template files, you can have multiple templates if you wish to use different templates for different sections. Such as if you were doing a site with a secure area, you could have 2 templates, and the secure area would have different links and color scheme maybe.

If you look at the source code of your .DWT file you will see that more editable regions have been added.

You have new regions for:

Document Title

Head Section - Other things for single pages, such as javascript or another bit of CSS.

But as you can see its all still editable.

Close down your .DWT file.

Delete your old "untitled.html" or whatever the file was called.

Create a new html in the root folder and name it what ever you want.

Open the new file and navigate your way to Modify » Templates » Apply Template to Page

You will then be asked to select a template. At the moment we only have 1 template so select that and press Select.

Your template will then be copied over to your new page.

In the top right you will see the name of the template that the page is using, as well as a small yellow border that goes all the way around the page.

When your cursor moves to a region of the page that is not editable you will see this cursor:

But the editable regions that we defined earlier are still avaliable for typing text in to.

Now you get to the stage where you need to edit something in a non editable region.

All you need to do is navigate your way in the files view to your templates folder and open your .DWT file.

Now add a link to the left navigation bar and press Save.

You will be greeted with this message:

This box lists all the pages that have the template applied. If you click Don't Update the pages will be left alone but your template will still be saved. If you click Update the pages in the list will be updated to use the new template but keep the data you already have put in.

If you click Update this will go through the process of updating all your files.

Close down your .DWT file and open up the untitled.html. The new link has now been inserted in to the page.

Now you can change the template as much as you like to fit your needs.