Dreamweaver Templates

Dreamweaver Templates are a tool that you can use to help with web site creation. Most sites have sections on the site that don’t change from page to page. Three common examples are the header, navigation and footer. What Dreamweaver Templates allow you to do is to save a web page as a template with editable and non-editable regions. The non-editable regions are the regions that stay the same from page to page and the editable ones are the content that changes.

For those of you who like to just jump in and ask questions later here is a step-by-step tutorial for making a basic template (step one is for Dreamweaver CS3, in CS4 and CS5 you will have slightly different steps to create a Dreamweaver Site):


And here are some example files of templates that have already been created:


Before you get started two basic, important points to remember is that before you start creating templates you should first get the basic design of your site down (including choosing grid structure and basic design) and second make a Dreamweaver Site for your web site.

The rest of this page explains in general what templates are and why you might use them.

Here is an example of a document with editable regions

A page created from a template will show that is is from a template in the upper right corner in design view:

In code view you will see this comment at the beginning of the document:

Basically Dreamweaver templates are just specially formatted HTML comments. The good part about that is if you open the file in another program then you can still edit it (although you can also accidentally erase the comment and mess up the template when shown in Dreamweaver).

Creating a template begins with creating a regular HTML file and then saving it as a template. When you do that Dreamweaver will automatically create a Templates folder and save your file with a .dwt extension instead of .html. After you save the template then when you make a new page you select page from template in the options. (see the PDF and examples files above for more details).

When you open a page created from a template in code view you will only be able to write HTML in the editable regions.

While it is possible to create multiple templates for a site and create templates from templates, when you are first starting out it is often easiest to create a template similar to the diagram below. In it the header, navigation and footer are all non-editable parts of the template. Then there is a big editable content area in the middle. If you’re using the Simple Grid System outlined on this site then you would create the page with all of the HTML and CSS to implement the grid and add in the header, navigation and footer but leave the content in the middle of the HTML as an editable region.

Once this Template is created you can then create all of your pages for the site based on the template and just have to fill in the HTML for the content area for each page. See example outlines below. The editable content on each page is in blue.

One of the main advantages of using a template system is that if you decide to change your navigation or footer or even the name of your main .css file then you can make the change once to your template and when you save the changes it will make the change in all of the pages created from the template.

One thing to remember is that changes made to the .dwt tempate file will only effect the pages if you make a change to the non-editable section of the page. The editable area is different for each page and so you have to go to each page to change an editable area.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>