Applying Nested Templates


Nested templates are a real boon to organizations whose Web sites are compartmentalized along internal departments or divisions. A nested template is literally a template within a template. Typically, a nested template is used when the entire Web site has a pervasive design, and various sections of the Web site have their own common page elements. For example, suppose that every page on the site has the same header, footer, and main navigation; these elements would be included in the master template. In this example site, there are also several departments, each of which has its own logo and navigation bar; these elements would be placed in a template within the master template, thus creating a nested template.

The process for creating a nested template involves both templates and child pages:

  1. The master template is first created and saved with one or more general editable regions.

  2. A child page is derived from the master template.

  3. The child page is saved as a template.

  4. More specific editable regions are added within the general editable regions of the master template.

  5. After this nested template is saved, a child page is generated; only the last series of editable regions inserted are available for usethe editable regions originally established in the master template are locked.

Note

Although a template nested more than two deep (a template within a template within a template) is not often used, there's no real limit to the levels of template nesting.


To keep this lesson real-world basedand to save you a great deal of unnecessary typingwe'll start with an existing static page. The first steps show you how to convert a current page initially to a master template and then to a nested template. Then you'll see how to take that master template and generate a second nested template to help you understand the power and application of this process.

1.

From Dreamweaver's Files panel, expand first the depts folder at the site root and then the maternity subfolder. Double-click the index.htm file to open it. After the file is opened, choose File > Save as Template. When the dialog box appears, enter master_dept in the Save As field and click Save.

This page is composed of a mix of general site elements, department-specific elements, and page-specific content. The first task is to protect the general site elements: the overall Bounty General logo along the top of the page, the primary navigation bar on the side, and the text links and copyright line along the bottom in the footer. These regions will remain locked as you carve out a single editable region to hold the balance of the page.

2.

Place your cursor anywhere in the body copy of the page. From the Tag Selector, select <div#content>. From the Insert bar's Common category, choose Templates: Editable Region. When the New Editable Region dialog box opens, enter mainContent in the name field and click OK. After the editable region has been applied, choose File > Save.

Note

An optional step at this point would be to generalize the master template content, replacing the Maternity heading with Department and the specific navigation links with more generic terms such as Link 1, Link 2, and so on.

You may be surprised that the new template is saved after only one editable region is created, especially after multiple editable regions were strongly advocated earlier. Why the change in approach? The difference is that the master template just stored is intended only for Dreamweaver developers, not Contribute users. In fact, the master template is not even put on the remote site; it's purely a client-side, design-time-only tool.

Now that the master template is ready, you're ready to convert it into a nested template.

3.

Choose File > New to open the New Document dialog box. If necessary, select the Templates tab. Choose the current site, Design_Deploy, in the left column; and from the right column, select master_dept as the template. Use the preview area to verify that the selected template is the desired one; when you're ready, click Create. After the child page is created, choose File > Save as Template. In the Save As Template dialog box, enter maternity_dept as the new template name and click Save.

Tip

The Assets panel provides an alternative way to create a new page based on a template. In that panel's Templates category, right-click (Control-click) the desired template and choose New from Template.

When the child page is first saved as a template, you won't notice any differences. The key action that converts a template into a nested template is to create one or more editable regions within the existing editable region. When this is done, you'll see a very clear visual signal that this template is now different.

4.

Select the headline text and choose Templates: Editable Region. Enter firstHeading in the Name field of the New Editable Region dialog box and click OK. Place your cursor in the body text of the page and select the rightmost <p> tag from the Tag Selector. Choose Templates: Editable Region; when the New Editable Region dialog box opens, enter firstParagraph in the Name field.

When the first editable region is inserted on the page, the original outer editable region changes color from blue to orange; these color indicators carry over when child pages are created, clearly marking what is currently editable and what is locked in another template.

Locking Master Editable Regions: Another Technique

The standard method of locking most of a master template's editable region is to embed an editable region inside when creating the nested template. But what happens if you have multiple editable regions in the master template and don't lock them? The area remains editable in both the master and nested template. Quite often, this is not the desired arrangement. Is your only alternative to insert an editable region in the nested template and hope for the best? Luckily, there's another technique that can be used to lock editable regions in the master template.

In Lesson 9, you'll be introduced to an advanced template option called a template expression, which is a calculated formula that sets the value for a template variable. Inserting an empty template expressionone that has no value or nameeffectively locks the editable region from editing.

To lock an editable region, follow these steps:

1.

Place your cursor anywhere in the master template editable region you want to lock against editing in child pages of the nested template.

At this stage, the border surrounding the editable region is blue, indicating that it's available for editing in the nested template.

2.

Switch to Code view and enter the following code: @@(" ")@@. When you're done, switch back to Design view.

Dreamweaver displays the expression icon (a small symbol with two at-signs: @@) to indicate the presence of the code. This icon is not visible outside of Dreamweaver; its visibility is controlled by the state of the Invisible Elements. The blue border has now changed color to orange to indicate that the region is editable only in child pages derived from the master template and not the nested template.

The template expression code can be placed anywhere within the editable region. You may find it helpful to place it consistently either at the beginning or end of a region.


The maternity department's home page has a basic departmental heading and its own navigation bar. These elements should be consistent from one maternity page to another and so are locked by being expressly omitted from an editable region. Only two sample editable regions are left for Contribute to use: one for the first headline, and another for the first paragraph. Because you have no way of telling how much editable content is on a child page, marking a single heading and paragraph is sufficient. Noting that each is the first of its kind implies that other optional ones can follow.

Next, you'll save the first departmental template and do a little cleanup work to ensure that the original page is now attached to a template.

5.

Choose File > Save to store the nested template. Acknowledge the warning about placingeditable regions inside a block element, by clicking OK. From the Files group panel, select Assets and click the Templates category. Right-click (Ctrl-click) the just-stored template, maternity_dept, and then select New from Template in the pop-up menu. When the child page is created, save it in the maternity folder as index.htm; click OK to confirm that youwant to replace the existing nontemplate page. Choose File > Close to exit the child page.

You have now created and applied your first nested template. To get a better grasp of the way nested templates are used and why they're beneficial, you'll now create a second departmental template.

6.

If necessary, switch to the open maternity_dept.dwt file. Choose File > Save as Template; in the Save As field of the dialog box that opens, enter pediatrics_dept. Click Save to continue.

When you save one template as another template, it's just like saving one page as another: You're essentially making a copy of the template. It's only when you save a child page as a template that you create nested templates. Now you're ready to modify the content of the maternity template to fit the pediatrics department.

7.

Select the CSS-styled text logo MATERNITY, delete it, and enter PEDIATRICS in its place. Select the navigation text Pre-Natal Care and replace it with Clinical Services. Highlight the third link, Birthing, and replace it with the phrase Parent Education. Modify the heading in the editable region to read First Headline Goes Here. Select the body text paragraph and delete it; enter the following placeholder text:

Type body text here. Use several short paragraphs of an appropriate length.

Notice that you can still change those portions of the master template, such as the department logo and subnavigation bar, while in template editing mode. These regions will not be editable when this page is made available for Contribute users in the next step.

Note

Dummy links are used in these sample pages; in a real-world application, the pages that the navigation elements link to would also have to be changed.

8.

Choose File > Save to store the pediatrics department template. When it appears, click OK to clear Dreamweaver's alert on editable regions in block elements. In the Files panel, expand the Templates folder. Select master_dept, maternity_dept, and pediatrics_dept, and choose Put to transfer them to the remote site. If prompted to transfer dependent files, click Yes.

Why did we need to put the master as well as the nested templates onto the site? Although you can (and should) use the role settings to limit Contribute users to modifying only pertinent nested templates, Contribute needs access to the master template to properly create the child pages from the nested templates.

Note

You'll learn how to limit which templates are available for a given Contribute role in Lesson 11 .

Deploying New and Updated Template Files

Any modifications made to the master_dept template file are propagated to any related nested templates and any pages based on those nested templates. Because Dreamweaver's updating process is handled on the client side, all updated files would need to be published to the Contribute site.

Prior to making these updates, it's important to notify your Contribute users that they should check in their files and not make any additional updates until given the go-ahead. After the pages are modified, they need to be checked in to the site before Contribute editing can continue.

If new templates have been created and posted during a standard workday, it would be helpful to display a reminder to Contribute users to click Refresh Templates in the New Page dialog box before creating pages based on those templates.


The final step of this exercise is to make sure that all your hard work pays off in Contribute.

9.

In Contribute, click New Page. When the New Page dialog box opens, click Refresh Templates to make sure that you have the latest versions. Expand the Templates folder under the Design_Deploy site and select pediatrics_dept. In the Page Title field, enter Test Page and click OK. When the new page appears, note that all content is locked (except in the first Heading and first Paragraph editable regions). Delete the content in the first Heading editable region and enter the following text: New Pediatrics Chief Announced. After you finish testing the page, click Cancel; choose Yes when asked to confirm its removal.

Not all users need to have access to all templates in a site. As you'll see in Lesson 11, as Contribute administrator, you can decide which role sees which templates. In this example, separate roles for those in the maternity and those in the pediatrics departments would see only their own templates.



Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3(c) Training from the Source
Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3: Training from the Source
ISBN: 032128884X
EAN: 2147483647
Year: 2006
Pages: 130
Authors: Joseph Lowery

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net