• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 9. Using Templates > Creating Nested Templates

Creating Nested Templates

A nested template is one that inherits a master layout from a base template. You can create a base template with the main content that should appear on all pages, and then use a nested template to create specific content or a layout style for a certain section in your site. If you have an additional section in which you want to use a different layout while keeping the main site components such as main navigation, footer, and header, you can create another nested template that is also based on your main template. Nested templates are most useful for creating a series of page styles with variations in their layout and design that derive their common content from a main template. You will need to make some modifications to the profile template in the following steps before you can create the nested template.

Open the profiles template, profile.dwt, from the Assets panel. Select the first table that contains the header, photo, and description regions. Click the Optional Region on the Templates tab of the Insert bar. Title the region mainTable and click OK.

You've left the Show by Default option checked because most documents that you would want to create based on the profile template will need that table.

You have made this table an optional region so you will be able to discard it when you create a nested template.

Place the insertion point to the right of the main table you just made an optional region. Select the <mmtemplate:if> tag in the Tag Selector and press the right arrow key once. Press Return (Macintosh) or Enter (Windows) to create a second paragraph below the optional main table. Click the Optional Region on the Templates tab of the Insert bar. Title the region nestedArea, uncheck the Show by Default check box, and click OK. Double-click inside the nestedArea region and click the Editable Region on the Templates tab of the Insert bar. Title the region photoTable and click OK.

This empty, editable optional region will allow you to place content in this space in your nested template without affecting the layout of the pages that are based on the original profile template.

Save the profile.dwt document and click Update to update all pages which use the profile template. Close the Update Pages dialog box and the profile.dwt document.

Now that you have modified the original profile template, you are ready to create the nested template in the remaining steps.

Choose File > New. From the Templates tab, locate the profile template and click Create.

A new page using the profile template is created. You are going to use the profile template as your base template in this exercise.

Choose File > Save As Template and name the nested template you are creating profile_photos.

By saving the document you created from the original template as a template itself, you are creating a nested template. Now that you have created the nested template, you will edit it. Dreamweaver will automatically add the extension.

Choose Modify > Template Properties. Select nestedArea from the list and check the Show nestedArea check box below the list. Select mainTable from the list and uncheck the Show mainTable check box below the list. Click OK to close the dialog box.

The mainTable region is hidden and the nestedArea now appears on the page. Most of the page is locked, as it was defined in the original template. You now need to create editable regions in the nested template.

Open images_table.html. Select and copy the table on the page. Replace the text nestedArea in the photoTable region on the profile_photos.dwt document by selecting it and pasting the copied table. Close the images_table.html document.

In this example, you are creating a page with photographs of the Point Reyes Lighthouse. This page needs to have many of the same elements as the other documents in the Lighthouse Profiles section, yet it also needs to have a substantially different layout due to the type of materials that will be contained on the page.

Select each of the placeholder images and make them individual editable regions.

The table on this page uses a layout specifically designed to display additional photographs of the lighthouses. You can use region names of photo1, photo2, and so on.

Save and close the profile_photos.dwt template document. Choose File > New and select the Templates tab. Choose profile_photos.dwt and click OK. Save the new document as pt_reyes_photos.html.

You have now created a document based on a nested template that is controlled by the base profile template you created at the beginning of this lesson.

Place the following photos in the pt_reyes_photos.html document: pt_reyes1.jpg, pt_reyes2.jpg, pt_reyes3.jpg, pt_reyes4.jpg, pt_reyes5.jpg, and pt_reyes6.jpg. Give each image a 1-pixel border.

You can save and close the pt_reyes_photos.html document.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint