18.6 Building Pages Based on a Template

Building a template is only a prelude to the actual work of building your site. Once you finish your template, it's time to produce pages.

To create a new document based on a template, choose FileNew to open the New from Template window (see Figure 18-14). Click the Templates tab and select the current site you're working on from the "Templates for" list. All templates for the selected site appear in the right column. Select the template you wish to use and click Create.

If you don't want your new Web page linked to the template (so that changes to the template also affect the Web page), turn off the "Update page when template changes" checkbox. The result is a new page that looks just like the template, but has no locked regions; you can edit the entire page. This method is useful, for example, when you want to start with the general design and structure of a certain template when creating a brand-new design for another template. (Be aware that Dreamweaver remembers this choice the next time you create a new page. In other words, future pages you try to create from a template will also be unlinked—unless you remember to turn back on the Update Page box.)

A new Web page document opens, based on the template, bearing a tab in the upperright corner that identifies the underlying template name. Dreamweaver outlines any editable regions in blue; a small blue tab displays each region's name (Figure 18-5).

Dreamweaver makes it painfully obvious which areas you aren't allowed to edit; your cursor changes to a "forbidden" symbol () when it ventures into a locked area.

To add content to an editable region, click anywhere inside the editable region. You can type inside it, add graphics, or add any other objects or HTML you can normally add to a document. You can also change the document's title and add Behaviors (see Chapter 12), Cascading Style Sheets (see Chapter 8), and meta tag information (items that go in the <head> of an HTML document).

NOTE

Dreamweaver doesn't let you use the Layer tool to draw a layer in an editable region. That's because using this method, Dreamweaver tries to add the code for the layer at the very beginning of the page, which is usually a non-editable region. Instead, you're better off creating a CSS style using absolute positioning (Section 8.1) and use the Insert Div Tag tool ( Section 8.3.1.6) to place a layer inside an editable region.

If you're designing sites to work with Netscape Navigator 4, don't insert Layer code into a table cell, since Navigator 4 has trouble with that arrangement. The best solution is to add a single paragraph to the template file—at the very bottom of the page just before the closing </body> tag is a good place—and mark it as editable. Then insert layers into this region of your template-based pages.

18.6.1 Working with Repeating Regions

Repeating regions work a bit differently than editable regions. In most cases, a repeating region will include one or more editable regions (which you can edit using the instructions above). However, Dreamweaver provides special controls to let you add, remove, and rearrange repeating entries (see Figure 18-15).

Repeating regions are a great way to quickly use lists in your Web pages. In this example, a list of links to related stories, you can add as many stories to the page as you'd like. Clicking the + button adds another row to this table complete with an icon (in a region locked by the template) and an editable story region.

These regions are intended to let a page author add repeated page elements—like rows of product information in a list of products. To add a repeating entry, click the + button that appears to the right of the Repeat region's blue tab. You can then edit any editable regions within the entry. Click inside an editable region inside a repeating entry and click + again to add a new entry after it.

Deleting a repeating entry is just as easy. Click inside an editable region within the entry you wish to delete and click the - button.

NOTE

You can create repeating regions that don't have any editable regions—for example, a star that can be repeated several times to indicate the rating for a product. Although you can use the + button to repeat such regions, you can't delete those regions with the - button. In other words, you're stuck with any extras you've added. The only workaround is to add an editable region to the repeating region. Then Dreamweaver lets you remove any repeating regions you wish.

To rearrange entries in the list, click inside an entry's editable region. Click the up or down arrows to move the entry in the list (to alphabetize it, for example).

18.6.2 Changing Properties of Editable Tag Attributes

Unlike editable or repeating regions, an editable tag attribute isn't immediately apparent on template-based pages. There's no blue tab to represent it, as there are for editable regions; in fact, nothing appears in Design view to indicate that there are any editable tag properties on the page. The only way to find out is to choose Modify Template Properties to open the Template Properties dialog box (see Figure 18-16).

The Template Properties window lets you control editable tag attributes and other parameters for optional regions. Depending on which parameter you select, the options at the bottom of the window change. In this case, since this page's Bgcolor property is editable, the PageBackground parameter lets you use Dreamweaver's color box to select a new color for the background of the page.

All editable tag attributes for this page appear in this window. All parameters defined for this page, including optional regions, appear here, as discussed in the box in Section 18.4.4.2.

To change the value of a template property—in other words, to edit the property of an editable tag—select its name from the list and fill out the option that appears at the bottom of the window. For example, in the case of color properties, use the color box to pick a Web-compatible color. If the property is a path (like a link or an image's source property indicating the graphic file's location in the site), use the common folder icon to browse to select the file.

Once you've finished setting the editable properties for the page, click OK to close the window.

18.6.3 Hiding and Showing Optional Regions

As with Editable Tag Attributes, you use the Template Properties window to control the display of optional regions. On template-based pages, you can show or hide an optional region by choosing ModifyTemplate Properties to open this dialog box (see Figure 18-17). Next, select the name of the optional region. To make all page elements in the region appear, turn on the "Show" checkbox at the bottom of the window. To hide the optional region, deselect this box.

A Template property for an optional region has either a value of true or false. True means the contents of the region will be visible on the page, while false hides the region. (The "Allow Nested Templates to Control This" option is described in the box on the facing page.)

18.6.4 Applying a Template to a Page You Already Made

What happens if you create a Web page and then decide you want it to share the look of a template? No problem. Dreamweaver lets you apply a template to any Web page in your site, as long as that page isn't already based on a template.

To apply a template to a page you've already created:

Choose FileOpen to open the page you want to alter.
The Web page opens.
Choose WindowAssets. Click the Asset panel's Templates button (see Figure 18-4).
The Assets panel appears and reveals a list of the site's templates.

You can also apply a template to a page by choosing ModifyTemplatesApply Template to Page. Select the name of the template from the window that appears and skip to step 5.
Click a template in the list on the Assets panel, and then click Apply.
The Inconsistent Region Names dialog box opens (Figure 18-18).
In the list under Editable Regions, choose Document Body.
To the right, in the Resolved column, you'll see <Not Resolved>. This is Dreamweaver's way of saying it doesn't know what to do with the contents of the current page. You need to pick one of the template's editable regions.

From the Move Content to New Region menu, select an editable region.

If you want to keep the material, select the name of an editable region from the list; otherwise, choose Nowhere, which, in effect, creates a new blank page based on the template.

FREQUENTLY ASKED QUESTION
Controlling the Nest

The Template Properties dialog box includes a checkbox labeled "Allow Nested Templates to Control This." What does it do?

Imagine that you create a template and add several optional regions and editable tag attributes to it. You then use this template as a basic design for more refined templates for each section of your site. When you create one of these nested templates based on the master template, it has access to the Template Properties window, where page authors can modify any of the template properties created by the original, master template.

For example, to better identify each section of a site, you might add a different background color to each section's pages: blue for the products section, orange for the support section, and so on. In the master template, you make the <body> tag's Bgcolor property editable. Now, when you create a nested template for the products section, you simply open the Template Properties dialog box and set the property to the blue color you desire. For the support section's nested template, set the property to orange. Now when you create a template-based page for the support section, its background will be orange, while a page for the products section will have a blue background.

However, to let your site's color palette go really wild, you might want every page in the site to have its own unique background color. (Disclaimer: Don't try this at home.) In this case, you'd want to let every page based on a nested template have an editable Bgcolor property.

To do so, open the nested template, open the Template Properties window, select the property that should be editable in pages built from this template (color in this case), and turn on the "Allow Nested Templates to Control This," checkbox. Now this property is uneditable in the nested template, but editable in all pages created from it.

You've probably realized by now that the phrase "Allow Nested Templates to Control This" doesn't make much sense. Turning it on actually prevents the nested template from controlling the property. A better way to think of it is "Allow pages created from this template to control this property."

The bottom line: Turning on this box makes the attribute uneditable on that page. If it's a nested template, it lets the Template property "pass through" to all pages based on this template. In other words, you can't set the background color in the template, but page authors can change it in pages created from the template.

Unfortunately, you can only select a single editable region. If several content regions are in the original, Dreamweaver merges them all into a single editable region.

When you apply a template to a page you've already created, you must tell Dreamweaver what to do with the material that's already on the page. Do so by selecting one of the template's editable regions from a pop-up menu, which will take charge of all editable regions in your page.

If Document Head also appears in the window, select it and choose "head" from the Move Content to New Region menu.
Doing so will preserve any special information you added to the head of your page, like Cascading Style Sheets, meta tags, custom JavaScript programs, and other information that goes in the <head> of the document. Unfortunately, the title of your original page is always replaced with the default title of the template. You'll have to reenter the title (see Section 1.1.2) after you apply the template.

If you apply a template to a page that has Dreamweaver Behaviors ( Chapter 12) applied to it, be careful when selecting this option. If the same behaviors already exist in the template code, Dreamweaver actually makes a duplicate copy of the JavaScript code in the <head> of the page. To get rid of the extra code, you'll need to go into Code view ( Chapter 10) and manually remove it.
Click OK.
Your new page appears.

< Day Day Up >