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 File New to open the "New from Template window (see Figure 17-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 then click Create.
A new Web page document opens, based on the template, bearing a tab in the upper-right corner that identifies the underlying template name. Dreamweaver outlines any editable regions in blue; a small blue tab displays each region's name (Figure 17-5).
Dreamweaver makes it painfully obvious which areas you aren't allowed to edit; your cursor changes to a "forbidden" symbol (a circle with a line through it) 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 11), Cascading Style Sheets (see Chapter 6), and meta tag information (items that go in the <head> of an HTML document).
Repeating regions work a bit differently than editable regions. In most cases, a repeating region includes 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 17-15).
These regions are intended to let a page author add repeated page elementslike 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 - sign button.
To rearrange entries in the list, click inside an entry's editable region. Click the up or down arrows to move the entry up or down in the list (to alphabetize it, for example).
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 17-16).
All editable tag attributes for this page appear in this window. In addition, all parameters defined for this page, including optional regions, appear here, as discussed in the box on Section 17.4.5.
To change the value of a template propertyin other words, to edit the property of an editable tagselect 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), click the "select a file" 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.
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 Modify Template Properties to open this dialog box (see Figure 17-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, turn off this box.
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 can 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 is orange, while a page for the products section has a blue background. However, to let your site's color palette go really wild, you may 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. |
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. You can even swap one template for another by applying a template to a page that's already based on a different template
To apply a template to a page you've already created:
Choose File Open to open the page you want to alter .
The Web page opens.
Choose Window Assets. Click the Asset panels Templates button (see Figure 17-4) .
The Assets panel appears and reveals a list of the site's templates.
Click a template in the list on the Assets panel, and then click Apply .
The Inconsistent Region Names dialog box opens (Figure 17-18).
In the list under "Editable regions," choose "Document body."
To the right, in the Resolved column, you 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 in which to place it from the list; otherwise , choose Nowhere, which, in effect, creates a new blank page based on the template.
Unfortunately, you can only select a single editable region. If there're several content regions in the original, Dreamweaver merges them all into a single editable region.
If "Document head" also appears in the window, select it and choose "head" from the "Move content to new region" menu .
This step preserves 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 have to reenter the title (see Section 1.2.1) after you apply the template.
Click OK .
Your new page appears.