Back to Top
The nuts and bolts for
Creative web development

A tutorial on using Templates in Dreamweaver

How do you create Templates. Here is a step by step approach that will walk you through the process.

What is a Template?

A template is a common structure of a web site that most of your web pages use. Usually web sites follow a standard structure, for e.g. you would have a header, a navigation bar and a footer that is common to all your pages. Imagine that your site has 25 pages. If you need to make one small change, let's say adding a new link, you would need to go to each of those 25 pages and change it manually. But using a template you only need to change it in the template and all the pages get updated automatically.  Here you will learn how to use templates in Dreamweaver.

Making a Template in Dreamweaver

Step 1: Make your web page as usual with the basic structure of the site. This should be common to most of the pages in your site. Note: Don't put unique content in this page.

Step 2: Once you have created the structure go to File and click on Save As Template, give a name to the template and click on Save.

Step 3: Notice the blue bar on top says <<Template>>. You now are in the Template. The template is automatically saved under a folder called templates. Note: You can create as many templates as you like. If you are using different layouts for different sections of your site you can use different templates for each of the sections.

Step 4: Now you need to make parts of the template editable so that you can put in content and add information that is unique to parts of the site. As the main content of the pages will keep changing let's make that region editable. E.g. The white space in the middle of the Smart Webby site is obviously an editable region, as this content is unique to each page.

To make an area editable you need your cursor to be in that location, then go to Modify/Template/New Editable Region, give an appropriate name and if you are successful you will notice a light blue with the name of the editable region in your cursor's location.

You can continue to make changes, try different layouts, add new stuff etc. in the Template.

Read the full article

Share this Article

Comments

Published document in a template looks nothing like the template you were working on

Please tell me why the templated pages in the Editor are never laid out neatly, yet when you publish to the web they turn out perfectly.  In the editor, they are helter skelter and overlap.  I find the templates so difficult to work with. I just can't seem to get the hang of them no matter how I try.