An Introduction to Dreamweaver Templates

This work is licensed under a Creative Commons License.

An Introduction to Dreamweaver Templates

Want to build and update your sites more quickly and efficiently? Read on.
Dave Sawyer McFarland
Friday, January 4, 2008

Many designers love the process of creating a new Web site. The excitement of picking a color palette, designing a logo, and crafting a beautiful layout provide the thrill that prompted many of us to take up this profession. Once your design is completed and you've sliced up your graphics and built the first Web page, however, you realize you've got to a lot of work ahead.

The repetitive nature of Web site production is certainly not as fun as the initial creative design process. This is especially true on large sites, where most pages share the same look -- navigation bar, copyright, sidebars, and many other page elements remain identical across all of the pages of your site -- so much of the creative process is over. Fortunately, if you use Dreamweaver, a lot of the pain of building and maintaining a Web site can be eliminated by using Dreamweaver's timesaving Template tools.

Template Overview
A Dreamweaver template is a model for Web pages on your site. You create a template, then create the actual pages on your site based on that template. In this way, you use a master design (the template) to build a consistent-looking set of pages. This may sound a lot like the good old Save As command, but Dreamweaver templates offer a lot more than that.

A basic template is composed of editable and non-editable regions. A non-editable region is the part of the template that should remain consistent across every page -- the copyright notice, basic page layout, logo, and so on. When you create a page from a template, the non-editable regions can't be changed, moved, or deleted. This means you can't accidentally delete the navigation bar from a page; better yet, it means someone else you work with can't mess up the parts of the site design that should remain the same.

An editable region is the part of the template-based page that can be changed: It's the part of the page that holds unique content, so the editable region is where you put new content when you create a page from a template.

The basic process of using templates is to create a template, add editable regions, then create new Web pages for your site, putting content into editable regions. A template can have any number of editable regions, so you can make one area of the page editable to display the main content for the page, and make, say, the left sidebar editable so that each page can have its own unique sidebar content.

Dreamweaver templates offer more than just a way to enforce design consistency. Every page built from a template remains connected to the template. When you update a non-editable region on the template -- for example, add another button to the nav bar, change the page layout, or edit the copyright notice -- every page built from the template is updated. On a site with even a dozen or so pages, this kind of nearly instant design update is a huge help.

Creating a Template
To get started with Dreamweaver templates, you can follow along with this tutorial. Download the folder below:

template_site

After you unzip it, you'll have a folder named template_site, containing the files for this tutorial. Open Dreamweaver if you haven't already and take the following steps.

Choose Site > New Site. Click the Advanced tab in the Site Definition window, type "Dreamweaver Templates" for the site's name, click the folder icon to the right of the Local Root Folder field, and select the folder you downloaded: template_site. Click OK to finish defining the new site.

In the Files panel, double-click the file page.html (or choose File > Open and open the file page.html in the template_site folder.) A template is really only a Web page, so to get started you usually create a regular Web page, then save it as a special Dreamweaver template file.

Choose File > Save as Template. The Save As Template window appears (Figure 1). Type "Main" in the Save as field and click the Save button. When the Update links? window appears, click Yes. (If you don't, Dreamweaver won't correctly save the template, and images, CSS and links won't work.)

Figure 1. When you save a template, you only need to provide a name (Main, in this example). The description box is optional and isn't really useful.

You've created your first template, and while it may not look like anything has happened, Dreamweaver has done a few things behind the scenes. First, it created a new folder named Templates, and then it saved your template file using the name Main.dwt. The file extension .dwt stands for Dreamweaver Template. All template files you create for a site use that extension and are stored in the Templates folder. Don't rename or move this folder, and don't move the template files inside the folder; if you do, Dreamweaver won't know where to find the templates, and Dreamweaver's template tools won't work correctly.

Adding an Editable Region
You can't use a template until you've added at least one editable region to it. For this page, we'll start off by adding one editable region for the main area of the page.

In the middle of the page, select the headline Page Title and the paragraph directly below it.

Choose Insert > Template Objects > Editable Region to create an editable region. (You can also use the Template menu on the Common Tab of the Insert Bar, as pictured in Figure 2.)

Figure 2. The Templates menu under the Common Tab of the Insert Bar lets you access most of Dreamweaver's Template tools. Click on the image for a larger version.

In the New Editable Region window, type Main for the region's name and click the OK button. A blue tab with the word "Main" appears above the text, and a blue outline appears around the text. This marks the new editable region on the template, but it won't appear on a finished page in the Web browser. All of the other parts of the page are considered non-editable regions and, although you can change them on this template page, they will be locked on every page you create from this template.

Save this file and close it.

Creating a Template-Based Page

Choose File > New. The New Document window opens (Figure 3).

Figure 3. Dreamweaver lets you open a template from another site by clicking one of the sites under the Site column. Don't do it. Dreamweaver doesn't copy over any files from the other site, so images, links, and style sheets won't work. Click on the image for a larger version.

In the left column on the New Document window, choose Page from Template. Make sure the Dreamweaver templates site and Main template are selected and click the Create button. Dreamweaver creates a new page.

Choose File > Save and save the file as page1.html into the site's root folder. Try selecting the banner or text in either sidebar. Notice that you can't select, edit, or delete anything in those areas. Since you didn't define those as editable regions in the template, they're off limits on the template-based page.

Open the file content1.html in the content folder. This page contains some dummy text that you'll use to build your Web page.

Choose Edit > Select All and Edit > Copy to copy the text from the content1.html page.

Return to the template-based page by clicking the page1.html tab near the top of the document window.

Click anywhere inside the main column of text and choose Edit > Select All, and Edit > Paste. This deletes the old text from the template and replaces it with the text you just copied and pasted. Save and close this file.

Voila, a new template-based page. Repeat steps 1 through 7 above to create two more template-based pages named page2.html and page3.html. Use the content from the files content2.html and content3.html in the content folder.

The editable region on a template-based page works just like any area of a Web page; that is, you can add text, graphics, links, tables, Flash movies, and so on in an editable region to create the page you want.

Editing the Template
Now that you've created a few pages, it's time to see how Dreamweaver Templates can make the task of updating a Web site go faster.

Open the template file, Main.dwt, which is in the Templates folder. You're going to modify the copyright notice and the news on the right-hand sidebar.

In the footer, change the date from 2007 to 2008.

In the right-hand sidebar, change News Headlines to News and delete the first news item (the headline and paragraph). Of course, you could just as easily add news as well.

Choose File > Save. Dreamweaver opens the Update Template Files window. Because you've changed content in non-editable regions, Dreamweaver is about to update those changes in every page based on the template.

Click the Update button, and in a matter of seconds, Dreamweaver updates every page. If you don't believe me, open page1.html and take a peek. Now imagine that this was a 100-page Web site that you just edited.

Adding Another Editable Region
A template can have more than one editable region. In the template for this tutorial, you'll notice that there's a section in the right-hand sidebar for listing related pages. This area is intended to list other pages on the site that have similar content, so that visitors are encouraged to jump to and read other pages on the site. Because each page will have its own set of related pages, this list should be editable, so that when you add a new page to the site, you can add a customized list of related pages.

Open the template file, Main.dwt, located in the Templates folder.

Click inside the Lorem Ipsum Dolor Sat link in the right sidebar (under the Related Pages headline). You need to pay attention to what tag you're selecting when creating an editable region. In this case, there's a link (the <a> tag) inside a list item (an <li> tag), which is part of an unordered list (the <ul> tag). Dreamweaver's tag selector (circled in Figure 4) gives you a clearer picture of the order of the HTML tags for the current selection. If you select just the <a> tag and turn it into an editable region, then the <li> and <ul> tags can't change. This means you can't add new list items or new links. And, unfortunately, Dreamweaver gets a little wonky when you set an individual <li> tag as an editable region. So your best bet is to make the entire <ul> tag editable.

Figure 4. Dreamweaver's Tag Selector (circled) is one of the program's hidden gems. It provides a quick and accurate way to select an HTML tag. Click on the image for a larger version.

Click the <ul> tag in the tag selector (see Figure 4 above) to select the entire unordered list.

Choose Insert > Template Objects > Editable Region to create an editable region. (You can also use the Template menu on the Common Tab of the Insert Bar as pictured in Figure 2 above.) The New Editable Region window appears.

Type "related" and click OK. You've just inserted another editable region.

Save the file -- Dreamweaver lets you know that you've updated the template file, and it prompts you to update the other pages on the site. Go ahead and Click update.

Adding More Content to a Template-Based Page
Now that you've added an editable region to the template, you can add content to that region on the template-based pages.

Open the file page1.html. Triple-click on the Lorem Ipsum Dolor Sat link in the right sidebar, and type "Et quasi architecto." Link that text to page2.html. Save and close this file.

Open the file page2.html. Triple-click on the Lorem Ipsum Dolor Sat link and type "An Investment Program" and link that text to page1.html. Save and close this file.

Open the file page3.html. Delete the unordered list containing Lorem Ipsum Dolor Sat. This page doesn't have any related pages to link to. Save and close this file.

Using Optional Regions
That last step must have seemed a little weird. The page3.html page still has a big Related Pages headline, but no links. One technique would be to include the headline Related Pages in the editable region you created earlier. That way you could just delete it on a page that didn't have any related pages links. But that's extra work, and leaving that headline editable opens the door for mistakenly deleting or changing it. Fortunately, Dreamweaver offers a better tool: optional regions.

An optional region is a template region that you can hide or show on a page-by-page basis. In other words, it's an area of a Web page that you indicate as optional. It can include editable regions or it could be a non-editable region of a page. For example, if you created a template to showcase products your company sells, you might want to display a little On Sale graphic on some of the product pages (but not all.) You could insert the graphic on your template file, then mark that graphic as an optional region; then, when you create a new product page you could either show or hide the On Sale graphic.

Here's how to use optional regions:

Open the template file, Main.dwt, located in the Templates folder.

Click just before the letter R in the headline Related Pages and drag down until you've selected both the headline and the unordered list with the link. You've selected both a non-editable region (the headline) and an editable region (the unordered list of links).

Choose Insert > Template Objects > Optional Region to create a new optional region. (You can also use the Template menu on the Common Tab of the Insert Bar as pictured in Figure 2 above.) The New Optional Region window appears (Figure 5).

Figure 5. The New Optional Region window lets you specify the name of an optional region. Make sure to use a single word -- no spaces -- and don't include punctuation marks, such as !, $, or % in the name, or the optional region may not work.

Type "optionalRelated" for the name. Make sure the Show by default box is checked and click the OK button. A new light blue tab labeled If optionalRelated appears above the headline. This marks the beginning of the optional region -- the "If" part of the label lets you know that this is an optional region.

Save the file and click Update when Dreamweaver prompts you to update the template-based files. Now, it's time to use the optional region.

Open the file page3.html. This is the Web page that has no related page links.

Choose Modify > Template Properties to open the Template Properties window. Uncheck the Show optionalRelated box and click the OK button. Notice that the headline and the Lorem Ipsum Dolor Sat link are gone! (For fun, reverse the process: Choose Modify > Template Properties; check the show box, and click OK -- the headline is back. All right, enough fun, hide the region again.)

Optional regions are very powerful. They make your template-based pages more flexible, since each template-based page can display different elements yet still share a single, easily updated template file.

Tips for Using Templates
Once you've used them a few times, Dreamweaver Templates are easy (and fun) to use. However, here are a few things to keep in mind:

Close template-based pages before updating a template. Dreamweaver usually does a perfectly fine job of updating pages even if they're open, but I've seen Dreamweaver fail to correctly update a template-based page when it's open.

Optional regions are useful, but be careful if you plan on hiding an optional region that includes an editable region. Whenever you hide an optional region, Dreamweaver removes all HTML within that region. If you had added some custom content (like the list of links to related pages in the tutorial), then hid the optional region, the custom content is gone forever. If you make the optional region visible again, Dreamweaver just copies the HTML from the template file, but it doesn't retrieve the custom content.

When using CSS for layout, it's common to add <div> tags to organize areas of a Web page. One <div> holds the left sidebar, another <div> holds the main content, and so on. When adding editable regions to a template, don't select the <div> tag itself -- if you do, you'll be able to delete the <div> tag (and ruin the page's layout) on template-based pages. If you want to make everything inside the <div> tag editable, just click inside the <div> tag on your template page, then press Ctrl-A (Cmd-A on a Mac) and add an editable region. This selects only the contents of the <div>, not the <div> tag itself.

We've just scratched the surface of Dreamweaver templates in this article. In a future View Source column, I'll take these techniques further and show you more of optional regions' power. However, even using these basic techniques, you'll be able to more quickly create and update your Web sites.

Dave Sawyer McFarland is the author of Dreamweaver CS3: The Missing Manual and CSS: The Missing Manual. You can learn more about his books and work at www.sawmac.com.

Top