Section 17.6. Building Pages Based on a Template

17.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 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.


Tip: 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 template-based page. In other words, future pages you create from a template will also be unlinkedunless you remember to turn the "Update page" box back on.)

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).


Note: Dreamweaver doesn't let you use the Layer tool to draw a layer in an editable region. It stops you because when 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.3) and then using the Insert Div Tag tool (Section 8.4) to place a layer inside an editable region.

17.6.1. Working with Repeating Regions

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).

Figure 17-15. Repeating regions are a great way to quickly add lists to your Web pages. In this example, there's a list of celebrities who share the same astrological sign. Clicking the + button adds another row to this table, complete with an icon (in a region locked by the template) and an editable region for adding a celebrity name.

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.


Note: You can create repeating regions that don't have any editable regionsfor example, repeating a star 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 minus sign (-) 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 up or down in the list (to alphabetize it, for example).

17.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 17-16).

Figure 17-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, the SRC property of an image tag has been made editable. You can click Dreamweaver's familiar Browse for File button to change the image tag's SRC property by selecting a new graphic file to display on the page.

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.

17.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 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.

Figure 17-17. The Template properties window displays optional regions as well as editable tag attributes. A Template property for an optional regionin this example "ForSaleBug"has a value of either true or false. True lets people see the contents of the region on the page, while false hides the region. (The "Allow nested templates to control this" option is described in the box below.)

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.


17.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. 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:

  1. Choose File Open to open the page you want to alter .

    The Web page opens.

  2. 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.


    Tip: You can also apply a template to a page by choosing Modify Templates Apply 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 17-18).

    Figure 17-18. 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. Tell it what to do by selecting one of the template's editable regions from a pop-up menu, which takes charge of all editable regions in your page.
  3. 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.

  4. 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.

  5. 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.


    Warning: If you apply a template to a page that has Dreamweaver Behaviors (Chapter 11) applied to it, be careful when you select 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 need to go into Code view (Chapter 9) and manually remove it.
  6. Click OK .

    Your new page appears.



Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

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