Section 17.5. Nested Templates | Dreamweaver 8[c] The Missing Manual

17.5. Nested Templates

Large sites may have many different sections or types of pages. Each section of the site or type of page may have its own unique look. A Frequently Asked Questions page may have distinct areas for a question, an answer, and links to further resources, while a product page may have a picture, a product description, and ordering information. You could create different templates for each type of page, but even that may be more work than necessary.

While many pages in a site may have subtle differences, they usually share very basic design features. The overall structure of every page, for example, may be the same: same logo, banner, and navigation bar. Even the basic layout may be the same. And there lies the problem with creating individual templates for each section: if you need to make a very basic site-wide change, like adding a new button to the site's overall navigation system or altering the banner, you need to edit each template individually, adding extra time, effort, and risk of making a mistake.

Fortunately, Dreamweaver offers a tool to solve just this problem: nested templates. A nested template is a template you make from another template, which then becomes the master template (see Figure 17-13).

Figure 17-13. Nested Templates (middle row) let you build templates that share common site-wide design elements while providing precise control for particular types of pages or sections of a Web site. A page built from a nested template (bottom row) contains both elements from a master template (top row)like a banner and a site-wide navigation barin addition to elements specific to its nested templatelike a section-specific secondary navigation bar. Changes you make to the master template are passed on to all pages of the site, including nested templates. Changes to a nested template, by contrast, pass on only to pages based on the nested template.

Imagine a basic software company Web site with three sections: Support, Our Products, and Downloads. Each section has its own brand of information and specific layout needs. However, all three sections share the same banner and navigation.

To create a template system for this site, you must first create a very basic template that includes elements (including editable regions) shared by all pagesthe master template. You can then create a nested template based on the master. On the nested template, you can add further design refinements and additional editable regions for the areas that can be changed on pages created from the nested template.

Yes, this process sounds complexand yes, it is. But when the alternative is hours or days of manual template updating, you can see why serious Web designers are willing to spend the time to master any shortcut they can get.

To create a nested template:

Build a template as described on Section 17.2 .

This page acts as the master template and controls all nested templates. It should include the basic elements shared by all nested template pages, like your logo and email links. Now is also the time to add editable regions in the areas the nested templates can change, like table cells to hold blocks of text and images.
Name and save this template (File Save as Template), and then close it .

Your template is safe on the hard drive.
Choose File New .

The window for creating new documents and template-based pages opens (see Figure 17-14).
Click the Templates tab. In the "Templates for" list, select the Web site on which you're working .

You can open templates from any site you've defined in Dreamweaver.
From the list of templates, select the name of the master template file you created in step 1 .

Make sure the "Update page when template changes" box is turned on. Otherwise, the nested template doesn't update when you edit the master template.
Click OK .

Dreamweaver creates a new template-based page. At this point, it's simply a basic Web page based on the original template. Next , you'll turn it into a nested template .
Choose File Save as Template. Or, on the Common tab of the Insert bar (Figure 17-2), select Make Nested Template from the Templates menu .

The Save As Template window appears (see Figure 17-3).
Type a name for the template and click the Save button .

Voil ! A nested template.

Figure 17-14. You can use the "Templates for" list to choose another site you've defined and reveal the list of templates it uses. However, choosing a template stored in a different site isn't a good idea. Dreamweaver doesn't copy any images on the template to the current site and can't translate relative links correctly. The result is broken links aplenty.

17.5.1. Customizing Nested Templates

When you first create a nested template, there's no difference between it and the master template. They share the same design, content, and template regions.

The next step is adding the design elements that are specific to pages built from that template. For example, you can add a special type of table for displaying a product photo, description, price, and other information. This table appears only in pages built from this nested template, not from the master template or any other nested template.

There are a few things you should keep in mind when planning your template development strategy:

When creating pages from templates, you can add content only to an editable region. That's true not only for template-based pages, but for nested templates, too. If the master template has no editable regions, you won't be able to change anything on the nested template created from it.
When working on a nested template, you can insert an editable region only into an editable region supplied by the master template. For example, say you've created a master template to provide a consistent banner and navigation bar to the site, all in a locked region of the master template. Then you add a large empty area at the bottom of the page and turn it into an editable region that you can customize to make specific layouts for each nested template. After creating a nested template from the master template, you can then add new editable regions to this open area. In fact, you can add any template regionrepeating, optional, or editableto this area.
If, when working on a nested template, you insert a template region (editable, optional, or repeating) into an editable region supplied by the master template, pages based on the nested template can modify only those new regions. The rest of the editable region supplied by the master template isn't editable on the pages based on the nested template.

Using the example in the previous paragraph, let's say you next add a repeating table to your nested template (see Section 17.3.3 for more detail about repeating tables). When you create a page based on this nested template, you can change only the editable areas marked out in the repeating table. Of course, the other side of the coin is that if you add an editable region to the master template and then refrain from adding any particular template regions, all of the HTML inside that region is editable in the nested template and in all pages based on the nested template.

17.5.2. Using Nested Templates

Here's an example of how you can use nested templates. Suppose you want to create a uniform design for your site where every page of the site has a logo as well as a site-wide navigation bar. Each page within one section of the site also has a sidebar containing a secondary navigation bar with navigation buttons for just that section. Finally, every page has a large content area to hold the information specific to that page.

Using nested templates, creating a Web site like this couldn't be easier. Create a master template containing the site banner and navigation bar. This template also includes editable regions for the sidebar and main content area.

Next, create a nested template for one section of the site, leaving the content area as it is. Since each page has its own content in this area, you don't need to do anything to this region. Then add the secondary navigation bar to the sidebar area. To lock this region so no one can tinker with the sidebar (in pages built from the nested template), add an empty editable region, or see the Tip on the next page. If you want, you can build similar nested templates for the other sections of the site.

Now you're ready to start building the pages of your site. Create a new page based on one of the section templates. Add text or graphics to the editable content area of the page. Should you need to change the site logo or add a button to the site-wide navigation bar, open the master template, make the changes, save the file, and let Dreamweaver update all the pages of your site with the new look. If you simply need to change the secondary navigation for one section of the site, then open the appropriate nested template, change the sidebar, save the template, and let Dreamweaver update all the section pages.

Tip: You can lock an editable region passed from a master template to a nested template, so that pages based on the nested template can't be changed in this region. In the nested template, go into Code view, and then locate the beginning of the editable region, which looks something like, . Then insert the text @@("")@@ directly after the -->.If you find yourself typing this code often, think about creating a snippet (see Section 16.3) containing the text @@("")@@.