What is a Template?

A template is a common structure of the web site that most of your web pages use. Usually web sites follow a standard structure, for e.g. In all our pages you will find a search and a poll on the left, a standard menu on the right and important navigation links on the top. Our site has over 100 pages, all following the same structure. If we need to make one small change, let's say changing the table width from 90% to 95%, we need to go each of those 100 pages and change it manually. But as we are using a template we only need to change it in the template and all the pages get updated automatically.

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.

Using a Template in Dreamweaver

Once you have successfully made your Template your job is not yet over. You still need to make sure that all the pages are using the Template so that when you update the Template the pages using the Template will automatically get updated. Here are the steps to Apply a template to a page.

Step 1: Once you have created a page which will the same structure as the template all you need to do is, Go to Modify/Template/Apply Template to page

Step 2: Once you have applied the specified template to the page you will see a window 'Choose editable region for orphaned content', choose the editable region that you want the content to go into and click on OK. You will see that the template is in yellow and cannot be edited. The only region that is editable is the editable region you have specified in the template.

Note: You can apply the template before writing any content or after it. If you do it after writing content you need to choose an editable region where the content will go.

Updating a Template in Dreamweaver

Once you have made the template and applied it to all the necessary pages, the last step you need to know is how to update a template. This is the magic of using Templates.

Any changes that you need to make in the basic structure of the site, you need to do in the Template. So go ahead and make the changes and click on save. If you have applied the Template to any of your site pages you will get a window asking you if you want to 'Update Templates used in the following files'. You must click on Update. If you click on Don't Update, none of the pages using the Template will get updated.

This covers all you need to know about using Templates in Macromedia Dreamweaver. Another huge time saver you need to know about is Server Side Includes. For e.g. Though the structure of the Smart Webby site is the same in all the pages, the header and the content in some of the menus change according to sections of the site. Find how how we did it using Sever Side Includes.