WPx - Writing Program ExtensionWriting ProgramEnglish Department | All Sites... 

Search Business & Technical Writing...  
Web Design for Students  
Menu
Web Design Home
Students Main Page
Dreamweaver Tutorial
Design Resources
Plagiarism / Copyright
Other Resources
 
Business & Technical Writing
Home
About Our Program
Certificate Programs
  Technical
  Professional
Teacher Resources
 
 

| Tutorial Introduction | Getting Started | Page Properties | Text | Tables |
| Images | Links | Publishing | Templates | Collaborating | Dreamweaver Resources |

Dreamweaver Tutorial: Templates

| What are Templates? | Creating a New Template | Uneditable & Editable Regions |
| Saving Your Template | Creating a New Page From a Template | Changes to a Template |

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 to them. 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 of itself, 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, it is when you use the template to create a web page that 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).

Return to Top >>

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 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").

Return to Top >>

Uneditable & Editable Regions

Now that you've created a template, you'll want to "define" areas of it as editable and un-editable. 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.

Return to Top >>

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.

Return to Top >>

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 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, that looks somewhat similar to when you would normally start a 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 is inside it, as it has not 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.

Return to Top >>

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, and you'd want this change to reflect 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.

Return to Top >>

Next Step --> Collaborating



Copyright © 2000
Rutgers University Business & Technical Writing
All Rights Reserved
Site Feedback: William Magrino
wmagrino@rci.rutgers.edu