Intro & Account Setup | Getting Started with Dreamweaver | Page Properties | Formatting Text & Style Sheets
Tables | Images | Links | Publishing | Templates | Collaborating | Outside Resources

Templates:
Websites tend to have more than one page to them. While websites are not always like books (with a specific beginning, middle, and end), they still have many different parts. As stated earlier in the Getting Started section, you'll want all pages to have a similar layout and navigation style.

What are Templates?:
A "template" is a predesigned file that allows you to edit certain regions while leaving all other parts of the page alone, to keep the overall look and feel the same throughout multiple documents. A template in Dreamweaver has two types of regions: editable and non-editable. As the name implies, an"editable" region is one that you can make changes to, type in, insert images, etc. A non-editable region is one where you cannot do any of these things.

While editing an actual template, you are free to edit both editable and non-editable regions. However, when you use the template to create a web page, you cannot edit something in a non-editable region. This can prevent you (or others!) from making mistakes in vital areas of a page (such as navigation systems).

Creating a New Template:
You can create a new template in several ways. Most of the time, you will be doing it from scratch. Open up a brand new document in Dreamweaver, and design a layout however you wish. Be sure to include your navigation, main body, etc. When you have your layout exactly as you want it, go to the "File" menu and select "Save as Template."

In the box that appears, select a site for your template (this will probably be the site assigned to your Eden or RCI space). There will most likely be no existing templates, as you have not created a new one yet. In the "Save As" box, give your template an original name that makes sense and you will remember. When you're done, click "Save."

A new folder called "Templates" will be generated for you (it will be inside the main directory for your site). The template will have the file extension of DWT (*.dwt), and will be called whatever you named it in the last box (for example, "my_template.dwt").

Uneditable & Editable Regions:
Now that you've created a template, you'll want to "define" areas of it as editable and uneditable. For example, you may have your navigation on the left side of the page, and body text on the right side of the page, in a table. The navigation for the site will be the same no matter where on the page you go, so you won't want to make this an "editable" region. It's very easy to make a section uneditable; simply don't make it editable!

Now, you'll want to make the portion of the site where body text will go an editable region, so that when you're ready to work from the template, you can insert your text into it. Highlight the area you want to be an editable region. Go to the "Modify" menu, choose "Templates," and click "New Editable Region."

In the "New Editable Region" box, give the region a name. For example, if it is indeed for the body text, you could name the editable region "body_text". Just remember as you make editable regions that you cannot give the same name to more than one.

You'll notice the area become highlighted by a color, and it will have a small tab above it that names the editable regions with whatever name you gave it.

Saving Your Template:
When you're done setting up your template, be sure to save like you would a normal page ("File" > "Save"). Dreamweaver may ask you if you want to update all documents that use the template. For now, say "No"; it doesn't matter, since we haven't made any documents from the template, yet.

Creating a New Page From a Template:
Go to the "File" menu, and select "New From Template."

In the box that appears, select the site that you have defined for yourself (probably your Eden or RCI space). The name of your template should appear in the "Templates" section. For now, also make sure that "Update Page when Template Changes" is clicked (we'll cover this in just a moment). When you're set, click "Select."

A new page should appear—one that looks similar to a normal new document. However, instead of it being completely blank, the layout from your template should appear on the page. You'll notice the entire page is outlined with a highlight-type color (probably yellow). Your editable region(s) also appear with an outline on the outside. This indicates that you can change its contents. However, if you place your cursor over a region that you have not defined as editable, your cursor should change into a circle with a line through it. This is Dreamweaver telling you that you cannot change what's there, since it hasn't been defined as editable. Finally, you will notice that in the upper-right corner of the page, there is a small tab that tells you which template the page has been created from.

You are free to format the page as you wish. The only restriction is that you can only edit something in an editable region.

Changes to a Template:
There may be a point where you want to go back into your template, and change something. It can be either a big or small change. Suppose you wanted to add a new selection to your menu navigation. You'd want this change reflected on all pages made from the template. Go back and open your template. It will be in a "Templates" folder inside where you save your Dreamweaver documents.

Make the change you want to whatever section necessary. Again, for example, if you're adding a new selection to your menu, go ahead and add the new link in.

You're now ready to apply this new menu to all documents created from this template. To do this, save the template like you normally would. You will be asked again if you want to apply the changes to your other documents.

This time, be sure to click "Yes." The "Update Pages" box will be brought up, and will report to you the changes made to the appropriate documents.

Since you may have only created one page from the template so far, only one file will be updated to reflect this change.

>> next