Q. How can I use Dreamweaver's Templates to help manage my site?

A. Dreamweaver uses it's very own file extension .dwt to designate template files. By creating a Dreamweaver template, you may create both editable and un-editable regions. Regions which are not editable can be changed only from within the .dwt file, and then all pages using that template may be updated to reflect those changes. For more information, see the tutorial below.

Saving Time with Templates

Author: Shane Fowlkes
Author's Site: RaccoonBob.com
Reference ID: 15612

Requirements

This tutorial assumes that you already know how to define a new site in Dreamweaver 4 and that you will be performing this exercise with a web site that is already defined in Dreamweaver. For a tutorial on Defining a web site, please review the tutorial below.

The Basics of Using Dreamweaver
by Mark Reynolds
-Defining Your Site
URL: http://www.dwfaq.com/Tutorials/Basics/dw-basics.asp

Note: It is assumed you are using Dreamweaver 4 or UltraDev 4 for this tutorial. Previous versions differ in template handling and are not covered in this tutorial.

Download(s)

Download the 3 demo pages and the template file now, and follow along with the tutorial.

A Need For Templates

If you're like me, you try to maintain a consistent look and feel when designing a web site. Before I discovered the template feature in Dreamweaver, I typically would create a page as my "boilerplate" for other pages. Once I got the table layout, graphics, and other page elements the way I preferred them, I'd save the file with a name such as template.htm. I'd then use this html page as a starting point for all pages. I'd simply open that file, fill in the needed content, and then Save As a new file.

This works pretty good at first but as your web site grows, it becomes more and more difficult to manage. If you need to make a design change after you made pages built upon this "template", you would need to open each and every page and modify it.

My projects are typically large ones - my sites commonly have dozens of static html pages. If I needed to make a structure or navigation tweak to the page (to fix a Netscape 4 issue for example), I'd have to open each and every page based upon that "template" (template.htm) and make the modification. What a pain!

I don't think there has ever been a project where I didn't need to make several changes to the layout after I began creating page based upon a layout design (which meant I had to open up every page and make the modification). It was very time consuming but I always assumed that it was just something that is a part of web development. Well, I was wrong.

Welcome Dreamweaver Templates!

By using Dreamweaver Templates, you can create a true template and base your pages off of this template. You can have as many templates as you want too - you're not just limited to one. If you need to make a structure or layout tweak, you can modify your template and all of your pages based off of the template will automatically update! It's wonderful! You just edit one file, not 50 or 100. I kicked myself when I learned of how much time I could have been saving by using DW Templates.

Let's Make A Template

1. Open Dreamweaver 4 and create 3 new documents . Name the three new pages page1.htm, page2.htm, and page3.htm. They're totally blank pages at this point - that's ok. We're doing this so we'll have something to link to in Step 6. These pages will be eventually be replaced but for now, just create 3 "dummy" pages. Close them when you are done.
   
   
2. Now create a fourth page. Insert a table that is 600 pixels wide and has 1 row and 2 columns.
   
   
3. Change the width of the left cell to be 200 pixels and the right cell to be 400 pixels wide. Change the background color of the left cell to be #CCCCCC. This will be the cell that will contain our basic navigation.
   
   
4. Set the vertical alignment in both cells to be "top".
   
   
5. Type "Page 1", "Page 2", and "Page 3" in the left, gray cell and hit enter/return after each one. These will be links to other pages.
   
   
6. Link the "Page 1"text to the page1.htm file, "Page 2" to the page2.htm file and "Page 3" to the page3.htm file.
   
   
7. Type "text here" and other fake content in the right cell. Make it a couple of "paragraphs" in length.
   
   
   
8. This will serve as our crude template. Select File» Save As Template and name this file "demo". Dreamweaver should automatically create a folder called Templates in your web site and give your template file an extension of ".dwt" (demo.dwt).
   
   
9. Now we need to create our editable regions on the template. Only the areas that are defined as editable regions can be changed on the "child" pages (pages created using this template). This will help us preserve our structure for all pages based on the template - even if we need to change it at a later time. Click in the right cell then click on the <td> tag selector on the status bar. This will select the entire right cell. This will be the only region we will allow for editing on child pages.
   
   
10. With the cell still selected, go to Modify» Templates» New Editable Region and call this region "content".
    
    
11. Save and close this template.
    
    
12. Select from the menu, File» New From Template. Select the demo template and click Select.
    
    
13. In the right cell, the one we identified as being the body editable region, type "Page 1". Now save this new page and use Save As and replace "page1.htm". Close your new "page1.htm" page.
    
    
14. Go through same process of using the Template as the boiler plate of the new file and create the files "page2.htm" and "page3.htm". Type "Page 2" in page2.htm's editable region and "Page 3" in page3.htm's editable region. Important: Make sure you create each page by using File» New From Template.
    
    
15. You now have three pages based off of the template. Now view your little 3-page site in your browser to test it.