Lesson 6 - Dreamweaver Templates

DW Cover

"I realized how useful Dreamweaver Templates can be when a student told me that he had updated the format of all 112 pages of a site he manages by simply changing the templates for the site -- he finished the update in under an hour, and didn't have to "cut and paste" anything! I decided right then that Templates are a tool I really need to master." Sandi Nado, a former Dreamweaver student.

Template Definition

What, exactly, are Templates? Templates are a Site Management tool provided by Dreamweaver. They allow you to create a consistent "look and feel" for a site by defining one or more master page designs, templates, for the site. These templates are used whenever you add a new document or update the content of an existing one. Templates also provide two other significant advantages: they provide a quick and easy method for updating the format of an entire site by simply updating the associated templates, and they allow a site manager to "lock" portions of each existing page so that a team of people can alter content on the project's pages without compromising the overall look of the project.

There are two parts to templates, creating them and using them. After the template has been created then it is available to be used in creating new documents. When you create a new document based on a template you click on the Page from Template button in the New Document window. In the case below I selected a template from one of my other sites.

Templates New Doc

Templates are not documents that a browser may render. Rather, they are used to create the documents that browsers render. Templates are only used within the Dreamweaver development system. Their file extension is .dwt which stands for Dreamweaver template.
Each template maintains a link to every page on the site that was either created or formatted using that template. These links are used to control updates to all the pages associated with a template.
- If you use templates in a site, you must do all your site management tasks within Dreamweaver. if you don't, critical links between the templates and the pages they control will be lost.
As with other Dreamweaver tools, there are several ways to access the commands needed to create, use and modify a template. Template commands can be found in three different locations:
1. Dreamweaver Menu bar Insert > Template Objects:
2. Insert Panel:
3. Assets panel Template Icon:

Part 1: Template Creation

Step 1: Getting Ready

There are two ways to create a template: abstracting the template from an existing HTML page and creating the template "from scratch." By far the more common method for creating a template is to make one from an existing page. Before you do this, however, it is important that the layout of the page be finalized, as this layout will be used to define all the pages generated with this template. In particular, you need to be sure which portions of your layout will be constant on all of your pages (logos, the location of the navigation bar, contact information, color palettes, etc.) and which portions will be allowed to vary (page headings, images, page text). Once you have a page formatted perfectly, you are ready to create a template.

Step 2: Creating a Template

To create a template, choose your perfect document and open it. There are a couple of ways to create a template from this document. One is to select Make Template using any of the three ways to access the Template Object discussed above. Another way is from the File menu in the Dreamweaver menu bar, File > Save as Template. Any of these ways will bring up the 'Save as Template' dialog box. Enter a name then press Save.

Create Template

Dreamweaver will then ask whether it should 'Update Links'. Click Yes. Dreamweaver will create a folder called Templates (if the folder doesn't already exist) at the top level of the site, and will store the new template as a .dwt document there. Navigation links, image links, and so on all need to be changed to be valid from the template's permanent location.

Note that Dreamweaver does not alter the HTML file it uses to create a template. It simply copies the file and uses the copy to define the template.

When you save a document as a template, most regions of a document are locked. As a template author, you specify which regions of a template-based document will be editable by inserting editable regions or editable parameters in the template.

As you create the template, you can make changes to both editable and locked regions. In a document based on the template, however, changes may only be made in the editable regions; the locked regions can’t be modified.

There are four types of template regions:

An editable region
An unlocked region in a template-based document—a section a template user can edit. A template author can specify any area of a template as editable. For a template to be effective, it should contain at least one editable region; otherwise, pages based on the template can’t be edited.
A repeating region
A section of the document layout that is set so that the template user can add or delete copies of the repeating region in a document based on the template as necessary. For example, you can set a table row to repeat. Repeating sections are editable so that the template user can edit the content in the repeating element, while the design itself is under the control of the template author.

There are two types of repeating regions you can insert in a template: repeating region and repeating table.
An optional region
A section of a template that holds content—such as text or an image—that may or may not appear in a document. In the template-based page, the template user usually controls whether the content is displayed.
An editable tag attribute
Lets you unlock a tag attribute in a template, so the attribute can be edited in a template-based page. For example, you can “lock” which image appears in the document but let the template user set the alignment to left, right, or center.

Our next step will be to define the editable regions within the template.

Step 3: Adding Editable Regions to a Template

Our task now is to specify which parts of the template we want to make editable. Headers, footer, logos, colors, and other elements that will be the same on every page will not be made editable. Typically, <meta> tags, navigation, and content are made editable. If you are using an external CSS style sheet it is not necessary to make the link editable because the contents of the external file are editable. If you are using internal styles then you will need to make that section editable so that new ones may be added.

First, open the template (the .dwt file) in the Document window. To make a region in the body of the template editable, select the region and choose: Insert > Template Objects > Editable Region from the Menu bar. You will then see the 'New Editable Region' pop-up box; name the region and click OK:

Editable Region of Template

Two changes happen when you do this. First, in Design View a tabbed box will surround the newly editable region. The tab shows the name you just assigned the region.

image of editable design region

Secondly, in Code View, you will see that a region of the template's code has been marked with Template comments. Note the green comments surrounding the text I've selected.

image of editable code region

If you don't see any tabs, choose View > Visual Aids > Invisible Elements from the main menu.
Dreamweaver will add comments to the template file as well as to all pages created with the template. DO NOT remove these comments or your template will not work properly!
Be really, really careful as you choose each editable region. You can select the contents of a tag, as in the example here, or you can use the tag selector on the Document window to select a specific tag (such as an image tag or div tag) and its contents.

Once you have defined an editable region, you can replace its current contents with text describing what its contents should be. Here I have replaced "Tutankhamun, Child Pharaoh" with "new page heading goes here".

image of new text

Before continuing to the next step, I edited my sample template further, making the navigation bar, the image, and the text regions of the template editable, but keeping the footer locked.

In general, a navigation bar should be editable, contrary to what you may first think. A good navigation bar will distinguish the current page in some way, and the link for the current page will be "dead". You will need to edit this feature by hand on all of your pages.

Once you have completed editing your template, click File > Save. Once saved, the template is ready for you to use to create new documents.

Part 2: Using the Template

Step 4: Generating a New Document using a Template

To create a new document from a template, first choose: File > New, and then click the 'Page from Templates' selection from the 'New Document' window. Click on a site (if you are managing several) and on the particular template from that site that you wish to use. Then simply click Create (on the bottom right corner) and a new document, based on the template, will appear. Give this file a title and then 'Save As...", to give the file its permanent name and location in the site.

Template New Doc

You can now go to each editable region on the new page, select the item currently there, and replace it with a new item! The curser will change to a "stop" cursor whenever it is over a non-editable region. In the example below, I have changed the page header to: "His Royal Curse". Note that the new page is surrounded by a yellow band which identifies the template in use.

image showing edited title region

When you are finished editing the new page, simply save it.

It is possible, although a little complicated, to format existing pages with a template. You will need to do this if you have a site partly defined at the time you create your templates. If you don't format existing pages with a template, you loose the ability to do complete site updates using templates. (From what I've read, though, the easiest way to do this may be simply to "cut and paste" the contents of the existing page into the editable regions of a new page created by the template...)
Once you have associated a template with a page, that page will always be controlled by the template. To update the contents of such a page, simply open it and then edit any or all of the parts of the file that are marked as editable. The template will ensure that all locked areas remain unaltered.

Changing the Template

Step 5: Modifying a Template to Update Document Formats

And now the moment we've all been waiting for, a chance to update HTML document formats by simply changing a template!

First, open the template you wish to alter and make any modification(s) you want to the body of the document. For this example, I chose to left justify the footer text, which was previously centered.

Once you have finished modifying the template, choose File > Save, and an 'Update Pages' box will appear. The box will list all of the HTML pages associated with the template. Simply click the Update button to have all of the files updated.

Update Files Based on Template

Once the updates are made, a "Report Box" will pop up, telling you the names of the files that were altered successfully. My demo file, hw4_content\temp.html, was the only file modified.

Modify Template and Update Pages

Update Pages of Template

Additional Features

Step 6: Getting Fancy with Templates

We all know that it is an unlikely thing for a site to have absolutely no variation in the format of its pages, but do we need to create a new template for every small difference in the layout of our pages? Fortunately, no! A very simple way to allow for modest variations is to specify a tag, instead of just the tag's contents, as an editable region. This allows us to replace, say, a paragraph with a list or a list with an image. For more complex situations, Dreamweaver provides Optional Regions and Repeating Regions.

Optional Regions are exactly that. Each time you create a new page or update an existing one with the template, you are given the choice whether or not to include the Optional Region. Optional Regions can contain either locked or editable elements.

Repeating Regions allow you to repeat a tag as many times as needed. They are often used within lists and tables, where the number of entries may vary from page to page or with each update of a page. To understand how this construct can be useful, think about a retail page where each item for sale is described in a row of a table. As the page is updated to reflect inventory changes, either more or fewer rows may be needed, a perfect place to insert a Repeating Region!

Resources

Creating and Managing Templates - Adobe Help

* click the link below to continue with this lesson *
Libraries

Top