Freelance 3D Animator, Designer, Artist

Home > 3D Tutorials > Dreamweaver Templates

Dreamweaver Templates


First of all let’s consider why you would want to use templates.

website layout

Imagine we were about to create a video website that was made up of the basic title, links and contents sections.


If we spent some time adding a title, links and colour scheme so it looked something like this:

dreamweaver template layout

The only area of the site we would want to change to create the individual pages would be the content area.

To maintain consistency the title and links would remain the same throughout.

To create our individual pages we could use three different methods.

  1. create the layout from scratch each time we make a new page
  2. copy and paste the html code into a new page
  3. use templates

1: Creating the layout from scratch each time we make a new page has obvious drawbacks in that it is prone to errors. It would be difficult to create the layout exactly the same as you had done previously and what’s more it would be very time consuming.

2: Copying and pasting the html code from our example page into every new page is a much better way of doing it. It saves a huge amount of time and it ensures that every page looks identical. However, we could still accidentally make changes to the layout. Or even if we did want to make changes to the layout, let’s say we needed to add another link, we would have to update each of the pages individually.

3: By using templates we overcome all of these problems.


Using templates in Dreamweaver is a easy but can become confusing. If you stick to the instructions I am about to give you then you should be O.K.

Define your site

First all, to use templates, you need to define a site. This will be covered in another tutorial. For now simply go to Site > New Site…

Give your website a name i.e. ‘Website Video’, or ‘Website Zoo’.
You do not need a http address.
Click Next >.

Click on ‘No, I do not want to use server technology’.
Click Next >.

Click on ‘Edit local copies on my machine’.
Click on the yellow folder icon and specify were you want your website to be saved.
Ideally this should be in a folder called ‘Website Video’ or ‘Website Zoo’ respectively.
Click Next >.

For the option ‘How do you connect to your remote server’ click ‘None’.
Click Next >.
Click Done >.

Create a template

With your new site defined you can begin making your template.

Go to Insert > Template Objects > Make Template

A dialogue box will open, it should already have your site chosen if not select your website name in the Site drop down box.

At the bottom of the dialogue box, where it says ‘Save As:” give your template a name such as ‘Layout template’.

Now begin building your site.

In our example we would have created something like this:

template design

Once you are happy click on save.

Editable Region

Once you have created the template you need to tell Dreamweaver which part of the template will be editable. In this example we only want the content area to change.

To achieve this you would highlight or select the content table or cell. Then go to Insert > Template Objects > Editable Region

Give your editable regions a name such as ‘Editable Content’.

Click on Save.

Using the template

Now that the template is finished we can use it to create our other pages.

Create a new blank HTML page.

To the template to this page you need to press F11 or click on Window > Assets.

In the Assets panel, click on the templates icon:


You will be shown a preview of the template in the Assets Panel, simply drag the preview onto your page.

This will apply the design to your new page.

You will notice that the only area of the page that you can change is the editable content

Easy as that

For some free templates type ‘Dreamweaver Templates’ into Google.

Site Map Terms and Conditions Privacy Policy

Glyn Davidson - Freelance 3D Designer, 3D Animator, 3D Illustrator, CG Artist, Graphic Designer, Motion Graphics and VFX

Copyright © Glyn Davidson, 2007-2013, ALL RIGHTS RESERVED

Modify Freelance Animator Site Design Modify Freelance CG Designer Site Design Black 3D Design Portfolio Dark Grey 3D Design Portfolio Default 3D Design Portfolio Grey 3D Design Portfolio Light Grey 3D Design Portfolio Lighter Grey 3D Design Portfolio