Q. How can I use Dreamweaver's Templates to help manage
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's Site: RaccoonBob.com
Reference ID: 15612
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
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 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
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
- 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.
- Now create a fourth page. Insert a table that is
600 pixels wide and has 1 row and 2 columns.
- 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.
- Set the vertical alignment in both cells to be "top".
- 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.
- 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.
- Type "text here" and other fake content in the right
cell. Make it a couple of "paragraphs" in length.
- 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"
- 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
- With the cell still selected, go to Modify»
Templates» New Editable Region and call this region
- Save and close this template.
- Select from the menu, File» New
From Template. Select the demo
template and click Select.
- 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.
- 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
- You now have three pages based off of the template. Now view
your little 3-page site in your browser to test it.