Chapter 11. Creating Templates

Getting Ready

Saving Your Page as a Template

Defining Editable Regions

Applying the Template to an Existing Page

Creating New Pages from the Template

If you look at the layout that you created in Chapter 9 or Chapter 10 and think ahead to what these areas will actually contain, you'll realize that many if not most of them will show exactly the same content on every page of your site. For example, your logo or banner isn't likely to change from page to page. Your main navigation probably also falls into this category, as do portions of your main content area, like the space at the bottom for the secondary navigation or a place at the top for second-level or third-level navigation choices. In fact, it's highly likely that the only information that will change from page to page is the stuff in the middle of the main content area and the items in the sidebar, if you have one. Instead of adding the very same content to each page of your site over and over again, wouldn't it be nice to add this repeated stuff once and then have Dreamweaver automatically place it in the document window whenever you open a new page for your site?

Wish granted! A Dreamweaver template does exactly this. A Dreameaver template is a special document that contains all the permanent elements of your site, like the layout, the logo, the banner, the main navigation, and whatever else fits into this category for your particular project. You add these elements to the template, and Dreamweaver locks them in. Open a new document window from this template, and Dreamweaver places all the permanent content exactly where you want it.

What about the sections that change from page to page, like the middle part of the main content area? You can easily make room for these in your template by defining them as editable regions: variable areas with no fixed content. Inside an editable region, you're free to add whatever content best suits the page in question.

It gets better. Assume that you're halfway through production, and you realize that you need to increase the width of your main content area. This change is easy enough to make in Dreamweaver, but it's still a hassle to go through every page of your site and adjust the same values in the Property Inspector. Or maybe you want to change the image in the banner area. Again, this is a simple Dreamweaver procedure, but to change the same image 70 times on 70 different pages? Who has the time for that? But when you build your site from a template, you can make these kinds of changes once, in the template document itself, and with a click of the mouse, Dreamweaver updates all the pages of your sitewithout affecting any of the variable content in the editable regions.

TECHTALK

A Dreamweaver template is a document that locks down all the permanent elements of your site while providing editable regions for content that changes from page to page.

Dreamweaver templates are so helpful and so conducive to lightning-fast A Dreamweaver template is a production that one wonders why anyone would build a Dreamweaver site document that locks down all without them. This chapter shows you how to convert your index.html the permanent elements of your document into a template, which you will then use to produce new pages.

TIP

This chapter concentrates on the main design template, or the one that controls the look and feel for the majority of your pages. However, some sites, particularly larger ones, use different layouts for different content areas or different levels of pages. If this describes your site, you can easily create a separate template document for every one of your layouts.