Create and use a Dreamweaver template

Dreamweaver Template

This tutorial with guide you through how to make a Dreamweaver Template and use it properly for your site so that you can easily change the layout without having to manually change every page.

1.

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

2.

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.

3.

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

4.

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.

5.

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

editable region

6.

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

template warning

 

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

7.

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

region name

 

I just called mine TitleArea then press Ok.

8.

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

9.

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.

10.

When you save it you will be shown this message:

save as template

Give it a name and press Save.

11.

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

update links

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.

12.

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

dwt file

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.

files list

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.

 

13.

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.

14.

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

15.

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

16.

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

apply template to page

17.

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

select template

18.

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

template applied to 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:

cursor

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

contentarea with text

19.

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.

templates folder

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

20.

You will be greeted with this message:

update template

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.

21.

update pages

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

22.

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

23.

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