|< Day Day Up >|
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.
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).
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 188.8.131.52) 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梐t the very bottom of the page just before the closing </body> tag is a good place梐nd 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條ike 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.
You can create repeating regions that don't have any editable regions梖or 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 184.108.40.206.
To change the value of a template property梚n other words, to edit the property of an editable tag梥elect 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.
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:
|< Day Day Up >|