Dreamweaver: Templates

Templates

Dreamweaver offers non-programmers the ability to create dynamic web sites. This means that a standard look and feel can be created, and pages can be generated from that. If the look and feel is changed later, Dreamweaver will update all the pages that were generated from it.

The process for creating and using templates, like most everything else with Dreamweaver, is actually quite simple. First you must design the look and feel. Then you must decide which areas will be modifiable (content), then save and you're ready to create the pages. Dreamweaver uses standard HTML comments to determine which template is used and which areas are editable.

Here is an example:

You will see something like that at the beginning of the page that was generated by the template.

<!--

<html>
<head>

<title>Dreamweaver Templates</title>

<meta http-equiv~"Content-Type" content~"text/html; charset~">
</head>

-->

In this tutorial you will learn how to create the templates with editable regions, how to generate pages, and how to modify the template and update the entire site.

Creating the Template

First you must create a look and feel for your template. You can either create a new page or use one that has already been created.

To transform that page into a template, all you have to do is go to the File Menu and choose Save As Template.

Once you have settled on a look and feel, you must then define editable regions. It is a good idea to think carefully here, but you can change the regions later if you make a mistake.

Now that we have a good idea where everything will go, we can now create the Editable Regions. As you can see from the sample, only one region in this design will be modified when pages are created, that would be the center table row where the content will be plugged in later.

To make that row editable, either place the cursor inside, or highlight everything inside. You can then either use the Context menu (right click) by choosing the Editable Regions submenu, or from the Modify menu under the Templates submenu. Simply select 'Mark Selection as Editable'. You will then be prompted for the name of the section.

You can also 'unmark' the selection if you need to modify it later, or you can choose the 'New' command (without anything selected), which will create a new editable region. This region will be placed where the cursor is located.

After you have defined the Editable Regions, you are ready to save the template and generate the pages.

Generating Pages

To generate a new page, simply go to the File Menu and choose New From Template. You will be prompted for the site to use and the name of the template. We will discuss using multiple templates shortly. Choose the name of the template you created and click OK. That page will be opened, and the Dreamweaver interface will be the same as usual. The only difference is that there will be some yellow areas. Yellow means that area is not editable.

You will want to find the white spaces and add some content.

Now the document must be saved. It can be saved in any directory within the site. All links and images will be updated to the location specified in the master template. This new template generated page is now a static page. It can be opened by a web browser, linked to, or used however the Webmaster deems necessary. Continue generating pages until the entire site has been created.

To change the navigation or any other template elements, simply open the master template, make the change and save. You will be prompted on whether you wish to update pages using that template. If you choose Yes, Dreamweaver will check the site cache for all pages that use that template and they will be automatically updated. For the change to appear on the site, you will have to upload all pages to the server.

Using Multiple Template

Many Web sites are broken down into several sections or categories. This can be done with templates as well, but will take a little extra work. You will need to create a template for each section or category in the site. To do this, open the existing template. Before you make any changes, use the Save As Template command and choose a name for the template.

Now make any modifications you deem fit. For example, if you wanted to use a different header graphic, or different navigation, make the appropriate changes here. Once you are finished, just save the file from the File Menu or use the shortcut key CTRL S (Command S on the Mac). Once that template is created you can generate new pages from for that section, or change other pages that have already been generated to use the new template.

You can manage your templates by using the Templates Palette. This can be accessed from the Window Menu or by the shortcut key CTRL F11. You will see a list of all templates the current site uses. If you select one of the templates, you will see a thumbnail in the top half of the palette.

You can also use the Templates palette to manage your pages. If you select the template and right click on it, you access several options which will affect how the template is used. For example, you can apply the selected template to the page that is open. This is how you would change which template the page uses. You can also update the current page, or update the entire site. The same options can be found by clicking on the arrow in the Templates Palette.