Intro & Account Setup | Getting Started With Dreamweaver MX | Program Layout | Making a Page | Page Properties
Text and Text Properties | Cascading Style Sheets | Tables | Images | Links
Publishing | Templates | Collaborating | Outside Resources

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 MX 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 MX, 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 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 folder where your site files are saved on your computer). 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_layout.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 menu bar and select “Insert,” then “Template Objects” and then “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 MX 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
The reason why Templates are so powerful is because you can create new blank pages with a template you designed already attached to them. You do this by creating a new page from a template.

First, go to the menu bar and select “File” and then “New.”

The “New Document” window will then appear. You should currently be in the “General” tab, but that’s about to change. Since we want to make a special kind of new document, not just a blank page, click on the “Templates” tab.

Under the column “Templates For:” on the left side of the screen, choose the site from which you want to use a template. The templates associated with each site are listed in the middle column called “Site ‘name’:”. A small preview of the template will appear in the right column, “Preview.” Decide which template you want to use for creating a new blank page, and click on the “Create” button.

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 MX 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 the template from which the page has been derived.

You are free to format the page as you wish. The only restriction is that you can only edit something in an editable region. If you want to make a region on your page editable, you’ll have to go back into the original template and edit it there.

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 MX documents.

Make the changes to your template as needed.

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 any other page. You will be asked again if you want to apply the changes to your other documents.

This time, be sure to click "Yes.” This will update any pages that use the template. The "Update Pages" box will be brought up, and will report to you the changes made to the appropriate documents.

Once you update a template, be sure to synchronize with the remote site so that you don’t lose the changes you made to your template later on.

Warning: If you have a page open, be sure to save it so that changes made to a template can be applied to that page.

>> next