TechNote (Archived)

Creating a nested template in Dreamweaver MX

Introduction

Macromedia Dreamweaver MX presents developers with many new template features. One of those features is nested templates. This allows you to put one template inside another, giving two layers of content control. This Technote will describe how to set up an nested template.

Why use nested templates? It allows multiple layers of control and update ability. For example, on a corporate web site, there are items that will appear on every page, things like the logo, the navigation bar and the footer information. There could be company address and contact information that is always available.

On most large business web sites, there are subsections such as Products, Support, Investor Relations, Contact Us, Downloads, etc. All of these sections will have different needs for look and layout. A main template can be used to determine the overall look and feel: the logo and footer info that appear on every page will go on this main template. The pages within these subsections will have different needs for content and layout. This is where the nested template comes in. While still controlled by the main template, an nested template can define the look and feel for the Products section.

For instance, the product pages for Dreamweaver, Fireworks and Cold Fusion all have the same layout. This layout can be set in the nested template and the individual product teams can add the product specific information. Taken even further, the Product specific teams can create yet another nested template and have a unified look for all the pages within one product section.

Nested templates (also referred to as embedded templates) work on the same principle as regular templates. There are templates (.dwt) and there are pages from templates, or 'instances' of that template. When content is updated in a template file (.dwt) and then saved, those pages that are based on the template (instances) are all updated to reflect those changes. Templates also have Editable Regions. These regions define the area on the page where content can be added to the pages from the template.

Important: When you update a .dwt file, Dreamweaver does not touch the content in the editable area on the template instances. This is the key to understanding how nested templates work.

Making the original template

Open a new file (File > New >Template Page > HTML Template. Click Create).
Insert a table onto the page. Give it 2 rows, 1 column and click Ok. Into this table, in the top cell, type "This table is in the main template and is not editable."
Click outside the table and click Enter twice to place the cursor below the table.
Insert another table like the one above. Into the top cell, type "This table contains an editable region".
Into the lower cell of the bottom table, type in "This is an editable region in the main template."
Go to the Templates tab of the Insert bar (Window > Insert).
Highlight the "This is an editable region in the main template" text in the bottommost cell.
In the Templates Insert panel, click on the Editable Region button
You will be prompted to name your editable region. Call it 'maintable' and click Ok. That text will now be editable in the pages made from the template.

Note: It is a good idea to choose clear names for your editable areas, especially if you are working with many developers.

Your page should now look something like this:
Save this file. In the Save As Template dialog, Save As: 'main' and save it in your current site ( or whatever site you wish). Click the Save button.

This is now the most basic template, equivalent to a template in Dreamweaver 4 (except for the new code format).

Watch the demonstration below for the steps to make the original template.

Now we will make a page from this template (An instance).

Making a template instance

Go to File > New >Templates tab. Notice that all your templates from all your defined sites are available as choices!

Select the site in which you saved the template from the site list on the left of the dialogue box, select 'main' from the list of templates and click Create.

A new instance of the template will be created. Save it as 'from_main.htm'. It should look identical to your .dwt file except that now, the only thing you can change on the page is the text.
You can add whatever you like to this editable region. Type in "This is new text in the editable area." Save the page.

This page will serve as just a basic test page. It will update later when we update the main template.

Watch the demonstration below for the steps to make a template instance.

Making the nested template

Make another instance of the template as outline in step 11. This time name it 'nested.htm' ( It is ok for it to have a .htm extension for now....)
In the 'maintable' editable region, put your cursor at the end of the text. Press Enter to make a new line.
Type "This text will not be editable in pages from the nested template." Press Enter to make a new line.
On this new line within the editable region, insert a table. As before, give it 2 rows and 1 column.
Into that top cell of the new table type "This table will be editable in the pages from the nested template."
If you are not already within it, click inside this new table. Use the Tag Selector to select the <table> tag. This will select the entire table.
In the Templates section of the Insert bar, click on the Editable Region button. You will be prompted that Dreamweaver will automatically convert this document to a template. Click OK.
In the New Editable Region dialog, name it nested_table and click OK. Dreamweaver MX will now surround the table with an editable region marker.
Save the page. Dreamweaver will save it as a template. Name it nested.

Your page should now look something like this:

Watch the demonstration below for the steps to make a nested template.

Making an instance of the nested template

Make an instance of this nested template. File > New > Template tab > your site > nested > Create.

You should now have a page that has the nested table as the only editable region. You can add whatever content you wish to this table.
Save this page as 'from_nested.htm'.

Notice the difference in the editable areas that have been selected in the pages so far and how they determine what is editable. In the first template, we made the cell content editable, which means that the table itself is not editable. In the nested template, the entire table was editable. Meaning that this table can be edited or deleted in the template instances. If a <td> is selected as editable, this will let those cell properties be editable. Being sure of what is contained within your editable region will give you good control over your template pages.

An explanation of what to expect when using these templates.

The main template will update all the pages that are made from it. This includes the nested template! Since this includes the nested template, every page made from the nested template will reflect the changes made in the main template. As always, templates do not touch code that is within the editable regions of the instances.

The nested template will update all the pages made from it. It will update changes made in the locked region and will not touch code in the editable region, just as we expect.

Since all the editable regions of the nested template are within the editable region of the main template, changes to the main template will not affect the nested template regions. It can be confusing, but just remember that templates only update locked regions and they leave alone code within editable regions. So what can we expect to happen?

We have a main template and a page from that template. We have an nested template (which is a page from the main template) and a page made from the nested template. The main template has four pages based on it:

from.main.htm
nested.dwt
from_nested.htm
nested.htm (the original file)

We expect that any change made to the main template will propagate through these four pages. With the nested template, we only have one page based upon it: from_nested.htm. So we expect that only this page will be updated from any changes made to the nested template. Let's see this happen:

Updating pages from templates

Open nested.dwt. Select the text in the 'maintable' editable region (but not the text in the nested table).
Go to the color selector in the Property inspector.

Select the color Red to make your text red.
Save the page. You will be prompted to update the pages made from this template. Click OK. The page will update and the result dialog should report one page updated.

Open 'from nested.htm'. You should see that the text is now red.
Open 'main.dwt' and select the bottom table. In the Property inspector, set the background color (Bg Color) to a different color. In this example, #FFCC33 is used (a yellow color).
Save the template. Again, you will be prompted to save all pages made from this template. Click Ok. The result dialog should show four files updated.

Check the four other files and you should see that the change has propagated through all of them!

Watch the demonstration below for the steps to update pages from templates.

Summary

Nested templates give developers a great deal of control over the layout and update ability of web sites. Taking advantage ofnested templates, and the other template features that Dreamweaver MX provides will make maintaining and updating web sites easier than ever.