18.3 Define Editable Regions

Your next project is to specify which parts of your template are locked, and which are editable. By default, everything on a page is locked. After all, the main reason to use templates is to maintain a consistent, unchanging design and structure between pages. To make a template usable, you must define the area or areas you can change.

FREQUENTLY ASKED QUESTION
The Broken-Link Blues

Why aren't the links in my templates working?

When you created the link, you probably typed a path into the Property inspector's Link fielda recipe for heartbreak. Instead, always select the target Web page for a link by clicking the folder icon in the Property inspector, or by pressing Ctrl+L (-L). In other words, when adding links to a template, always link to pages within the site by browsing to the desired file.

Dreamweaver saves templates in the Templates folder inside the local root folder; all relative links need to be relative to this location. (Absolute links, like those to other Web sites, aren't a problem; see Section 4.1 to learn the difference.) The reason you should browse to, rather than type in, your links is so that Dreamweaver can create a proper relative link.

figs/18_sb1.jpg

Imagine this situation: You create a template for your classi fied ads. You store all classified ads for April 2001 inside a series of folders like this: classifieds2001april, as shown in the site diagram here.

A link from a page in the april folder to the home page would follow the path marked 1 here. So when you create a link in your template, you might create a link to the home page by typing the path ../../../index.html.

That's a logical choice if you're thinking about the page (in the april folder) you'll create from the template—but it won't work. Dreamweaver stores templates in the Templates folder, so the correct path would be path 2, or ../index.html. When you create a new page based on the template and save it in the april folder, Dreamweaver, in its wisdom, automatically rewrites all paths in the page so that the links function correctly.

The beauty of Dreamweaver is that you don't have to understand how all this works. Just remember to use relative links in your templates and create them by clicking the folder icon in the Property inspector.

The Templates category of the Assets panel lists the name, file size, and location of each template in the current local site. The Apply button applies a template to the current open Web page. The Refresh Site List button updates the list of templates. (In general, Dreamweaver does a very good job of keeping the list up to date, so you'll rarely need this button.) The New Template button creates a new blank template in the Templates folder. Select a template from the list and click the Edit Template button to open the template for editing.

This page is based on a template called Horoscope, as you can tell from the little tab in the document window's upper-right corner. You can modify editable regions, which are labeled with small tabs. In this example, the editable regions are called horoscope and signImage. An additional editable region appears within a repeating region—labeled repeatCelebrity? which lets you duplicate editable regions to form a list of items. The title of any page created from a template is also editable. All other parts of the page are locked; you can only make changes to the original template file.

18.3.1 Adding a Basic Editable Region

To add an editable region to a template, start by selecting the part of the page you want to make changeable. You can incorporate anything in the document window (any HTML between the <body> tags).

NOTE

The <head> of a page is always editable. You can add Custom Style Sheets, JavaScript and meta tag information freely to any page created from a template. In fact, there's no way to prevent anyone from messing around with the page's head.

Drag across your page to select the elements you wish to make editable, or, for greater precision, use the tag selector (Section 1.2.2) to make sure you select the exact HTML you want.

Now tell Dreamweaver that the selected elements are to be editable. You can use any of these techniques:

In the Common tab of the Insert bar ( Figure 18-2), select Editable Region from the Template menu.
Choose InsertTemplate ObjectsEditable Region.
Press Ctrl+Alt+V (Option--V).
Right-click (Control-click) the selection and choose TemplatesNew Editable Region from the contextual menu.

POWER USERS' CLINIC
Under the Hood of Templates

Dreamweaver saves templates as HTML files in the Templates folder inside your current local site folder (see Chapter 14 for information on local sites). Each template bears the file name extension .dwt to distinguish it from regular Web pages.

The program treats files in the Templates folder differently than normal Web pages, so don't save anything but .dwt files there. In addition, since Dreamweaver expects the Templates folder to be in the local root folder of your site, don't move the Templates folder, or change its name in any way (don't even change the capital T in Templates, even if you're a low-key type of person). If you do, your templates won't work.

As with Library items, Dreamweaver uses HTML comment tags to indicate the name of the template. If you inspect a template-based document's HTML code (see Chapter 10), you'll see that, immediately following the opening <html> tag, Dreamweaver inserts a comment tag with the text InstanceBegin template followed by the location and name of the template. Additional comment tags indicate areas of the page that you can modify, plus special template features like template parameters used for optional regions. For instance, the title of a page based on a template is always editable; its comment tag might look like this:

<!-- InstanceBeginEditable name="doctitle" - <title>My New Page</title> <!-- InstanceEndEditable -?gt;

The first comment indicates the editable region's beginning and also includes the editable region's name. When editing pages based on the template, you can change only the HTML between these comment tags. Everything else on the page is locked, even when you're working in Code view.

When the New Editable Region dialog box appears, type a name for the region (you can't use the same name twice) and click OK. You return to your template, where the name you gave the region appears in a small blue tab above the editable region (see Figure 18-5).

If you use tables to lay out your pages (see Chapter 7), you'll often assign one table cell as the main area to hold the primary content of the page. For example, in the pages shown in Figure 18-1, the Frequently Asked Question and its answer appear in a single cell on the page. This cell makes a perfect editable region for a template. In the tag selector, just click the <td> tag associated with that cell and use any of the techniques discussed here to convert the contents of that cell into an editable region.

If you use CSS, on the other hand, you might create a separate <div> tag (Section 8.3.1.6) for the main content area. In this case, select just the contents of the <div>, not the tag itself. If you turn the <div> tag into an editable region, it's possible for someone modifying the page later to delete the tag entirely, which could wreak untold havoc on your CSS-based layout.

Unfortunately, selecting all of the text inside a <div> frequently selects the <div> tag, too. You may need to go into Code view (Section 10.2) and make sure that you've selected only the content inside the tag.

FREQUENTLY ASKED QUESTION
Hindered by Highlighting

I'm distracted by the tabs and background colors that Dreamweaver uses to indicate Library items and Templates. How do I get rid of them?

When you use Library items or Templates, you'll see blue tabs and yellow backgrounds to indicate editable regions and Library items. Although these visual cues don't appear in a Web browser, they can still make your page harder to read while working in Dreamweaver. Fortunately, you can alter the background color of these items and even turn highlighting off altogether.

figs/18_sb2.jpg

Choose EditPreferences or press Ctrl+U (-U). In the Preferences Category list, click Highlighting. To change the background color for editable regions, locked regions, and Library items, use the color box (see Section 1.3.3) or type in a hexadecimal color value. To remove the highlighting, turn off the Show box next to the appropriate item.

Oftentimes, it's useful to keep highlighting on to help you keep track of Library items and editable regions. If you want to turn off highlighting temporarily, simply choose View Visual AidsInvisible Elements, or use the keyboard shortcut Ctrl+Shift+I (Shift-- I) to toggle these visual cues off and on. This technique has the added benefit of hiding table borders, layer borders, and image maps, as well as other invisible elements.

You may find that a single editable region is all you need—for example, a single table cell containing the text for a product review. However, if you need to edit multiple areas of a Web page, just add more editable regions to the template. For instance, when you create a template for an employee page, you might create editable regions for the employee's name, telephone number, and photo.

If you change your mind and want to lock a region again, select the editable region and choose ModifyTemplatesRemove Template Markup. Dreamweaver removes the code that makes the region editable. You can do the same thing with other types of template regions, like repeating and optional regions.

A repeating region lets page authors add multiple selections of repeating information. Top: In this example, the template has one repeating region, labeled repeatCelebrity (circled).

Bottom: A complete page based on this template includes three repeated editable regions (circled in the lower right of the page). If another page requires more celebrity listings, you could easily add additional rows to each list. However, the template still controls the basic design. Changing the star graphic of the repeating region (an uneditable part of the region) in the template page automatically changes the same elements in all pages created from the template. From a design perspective, this strategy also means that page authors can't tamper with the design of a repeating regionjust the content marked as editable.

You can rename an editable region by clicking the blue tab on the template page and typing a new name into the Property inspector. However, if you've already built pages based on this template, it's not a good idea. Because template-based pages use the name to identify editable regions, Dreamweaver can lose track of where content should go when you rename a region. See Figure 18-18 for a workaround.

18.3.2 Adding a Repeating Region

Some Web pages contain lists of items. A catalog page might display row after row of product information—picture, name, price, and description. An index of Frequently Asked Questions might provide a list of questions and the dates they were posted.

If you were to make a template for either of these pages, you would add an editable region to the area of the page where these lists appear. Just creating an editable region, however, wouldn't give you any ability to enforce (or easily update) the design of these lists, because everything within an editable region can be changed.

Fortunately, Dreamweaver provides a pair of template tools to overcome this problem: repeating regions and repeating tables. Both let you create areas of a page that include editable (and uneditable) regions that can be repeated any number of times (see Figure 18-6).

Adding a repeating region is similar to adding an editable region. Select the area of the template page you wish to make repeatable, which usually contains at least one editable region. Most often, this area will be a table row, so you could select the row (<tr> tag) with the information to be repeated. You could just as easily select a paragraph or a list item (<li> tag).

You can make a repeating region that doesn't include an editable region. For example, a template for a movie review Web page could include a repeating region that's simply a graphic of a star. A page author adding a new movie review could repeat the star graphic to match the movie's rating? stars, for example. (There's just one caveat—see the Warning in Section 18.6.2.)

Now tell Dreamweaver that the selected elements are part of repeating region. You can use any of these techniques:

On the Common tab of the Insert bar (Figure 18-2), select the Repeating Region option from the Templates menu.
Choose InsertTemplate ObjectsRepeating Region.
Right-click (Control-click) the selection and choose TemplatesNew Repeating Region from the contextual menu.

When the New Repeating Region dialog box appears, type a name for the region and click OK. You return to your template, where the name you gave the region appears in a small blue tab above the editable region (see Figure 18-6). (See Section 18.6.1 for a discussion of using a repeating region when building a new template-based page.)

Dreamweaver MX lets you name a repeating region with a name already in use by an editable region. But don't—multiple template areas with the same name will cause Dreamweaver to act unpredictably.

18.3.2.1 Repeating tables

The new repeating table tool is essentially a shortcut to creating a table with one or more repeating rows in it. If you had a lot of time on your hands, you could achieve the same effect by adding a table to a page, selecting one or more rows, and applying a repeating region to the selection. To use the repeat table tool:

Click on the template page where you wish to insert the table.
You can't insert a repeating table into an already defined editable, repeating, or optional region, as explained in the box below. You must be in an empty, locked area of the template.
On the Common tab of the Insert bar (Figure 18-2) , select the Repeating Table option from the Templates menu.
Alternatively, you can choose InsertTemplate ObjectsRepeating Table. Either way, the Insert Repeating Table window appears (Figure 18-7).

Fill out the basic properties of the table.

The top part of the window lets you set up the basic structure of the table: rows, columns, cell padding, cell spacing, width, and border. Basically, it's the same information you'd provide when creating any table, as described in Section 7.2.7 . You usually start a repeating table with two rows—one for a heading, and another to contain the information you wish to repeat.

FREQUENTLY ASKED QUESTION
Editable Regions, Repeating Regions, and Errors

When I try to insert an editable region inside a repeating region, I get the following error: "The selection is already in an editable, repeating, or optional region." What's that about?

This error message essentially means you're trying to add a template region where it doesn't belong. It most commonly appears when you attempt to put a repeating or optional region inside an editable tag. That kind of nesting is a nono; anything inside an editable region can be changed on template-based pages, and as such Dreamweaver can't touch it.

However, you may get this error message seemingly in error. For instance, it's perfectly OK to add an editable region inside a repeating region, and even to add a repeating region inside of an optional region, and vice versa. But one day you select text inside a repeating region and try to turn it into an editable region, and boom—error message. What probably happened was, when you selected the text, Dreamweaver actually selected part of the hidden code used to define a template region (see "Under the Hood of Templates" in Section 18.3.1) and thought you were trying to put an editable region inside of it. To avoid confusion, use the tag selector to select the tag you wish to turn into an editable region. For example, click <p> in the tag selector to select the paragraph inside the repeating region. Alternatively, go into Code view (Section 10.2) and select whatever part of the code inside the repeating region you wish to make editable.

In the Starting Row box, type the number of the row where the repeating region should begin.
Often you'll just have one repeating row: one row of product information, for example. You might want to use the top row for labels indicating the information contained in the rows below. If that's the case, enter 2 at this step, leaving the first row as an uneditable part of the template.
It's conceivable, however, that you might want each entry to take up two rows. The first would list Name and Description; the second would contain a cell for a photo and a cell for the price. You set up this effect in this step and the next.

The Insert Repeating Table dialog box lets you kill three birds with one stone: It adds a table to a page, turns one or more rows into a repeating region and adds editable regions into each table cell inside the repeating region.
In the Ending Row box, type the number of the last repeating row.
If you only wish to repeat a single row, enter the same number you provided for step 4. If you're creating a double repeating row, add 1 to the number you provided in step 4. If you need three rows for each repeating entry, add 2 to the number from step 4.
Type a name for this repeating region.
Don't use the same name as another template region. You'll run the risk of unpredictable results on template-based pages.
Click OK.
Dreamweaver inserts a table into the page. A blue tab with the name of the repeating region appears (see Figure 18-6), as do blue tabs in each cell of each repeated row. These tabs indicate new editable regions—one per cell.
Since these new editable regions have uninformative names like EditRegion4, you might want to rename them. Click the blue tab and type a new name in the Property inspector. (But do so before you create any pages based on the template—see the Warning in Section 18.3.2.)

To remove a repeating region, select it by clicking the blue Repeat tab and choose ModifyTemplatesRemove Template Markup. A more accurate way to select a repeating region is to click anywhere inside the region and then click "<mmtemplate: repeat>" in the tag selector. (See Section 1.2.2 for more on using the tag selector.) If you want to rename a repeating region, heed the Warning in Section 18.3.2.1.

18.3.3 Making a Tag Attribute Editable

An editable region lets you change areas of HTML—like a paragraph, image, or entire table—on new pages you create from a template. However, when you're creating a template for others to make pages from down the line, you may want to limit these page authors' editing abilities. You may want to allow budding Web designers to change the color of a table cell without changing other properties like cell width or paragraph alignment. You can use Dreamweaver's Editable Tag Attribute to specify which tag properties your successors can change.

Before making a tag attribute editable, first set that property to a default value in the template. Doing so inserts a default value and makes the attribute appear in the Editable Tag Attribute window (see steps 3 and 7 below).

To make a tag attribute editable:

Select the tag whose property you wish to make editable.
Using the tag selector (Section 1.2.2) is the most accurate way.
Choose ModifyTemplatesMake Attribute Editable.
The Editable Tag Attributes window opens (Figure 18-8).

Dreamweaver provides detailed control for template pages. To make just a single property of a single tag editable when pages are later based on your template, turn on the "Make attribute editable" checkbox. In this case, the "class" attribute of the body tag will be editable, allowing page designers the freedom to apply different CSS styles to the body of each template-based page.

Select an attribute from the menu or add a new attribute with the Add button.

Only properties you've already set for the selected tag appear in the Attribute menu. In other words, if you've selected an image, you'll probably see the Src, Width, and Height properties listed. But unless you've set the image's border, the Border property won't appear.

To add a property, click the Add button. In the window that appears, type the appropriate property name. For example, to make the path to a graphics file editable, you'd set the <img> tag's Src attribute by typing src here. (If you're not sure of the property's name, check out Dreamweaver's built-in HTML reference, described in Section 10.5.)

If you want page editors to be able to change a CSS class applied to the <body> tag on template-based pages—to apply different fonts, background colors, or any of the many CSS formatting options to each template- based page—you have to make the Class attribute editable. (See Section 6.1.3 for more on CSS classes.)

Make sure the "Make attribute editable" box is turned on.
If you decide that you no longer want to allow editing of this property, you can return to this dialog box and turn off editing, as described in Section 18.4 .
Type a name in the Label field.
What you type here should be a simple description of the editable tag and property, which will help page authors correctly identify editable properties. For example, you could use Product Image if you're making a particular image's source (Src) property editable.
Choose a value type from the menu.
Your choices are:
Text. Use this option when a property's value is a word. For example, the image tag's Align property can be top, middle, baseline, and so on. Or, when using Cascading Style Sheets, you could make a tag's Class property editable to allow page authors to apply a particular custom style to the tag?span class="docEmphasis">content, footer, and so on.
URL. Use this option when the editable property is a path to a file, like an image's Src property or a link's Href property. Using its site management tools, Dreamweaver will keep track of these paths and update them when you move your pages around your site.
Color. If the property requires a Web color, like a page's background color, select this option. It will make Dreamweaver's color box available to people who build pages from the template.
True/False. You shouldn't use this option. It's intended for Dreamweaver's Optional Regions feature (discussed in Section 18.4 ), and it doesn't apply to HTML properties.
Number. Use this choice for properties that require a numeric value, like an image's Height and Width properties.
Type a default value into the Default field.
This step is optional. The default value defines the initial value for this property, when people first create a page based on the template. They can then modify this value for that particular page. If you've already set this property in the template, its value will appear automatically in this box.
Click OK to close the window.
Dreamweaver adds code to the template page that allows page authors control of the attribute. Setting this attribute on pages created from the template is described in Section 18.6.2.

If you later decide that you don't want a particular tag's property to be editable, Dreamweaver can help. Open the template file, select the tag with the editable attribute, and choose ModifyTemplatesMake Attribute Editable. In the window that appears, turn off the "Make attribute editable" checkbox (Figure 18-8). Unfortunately, doing so doesn't remove all of the template code Dreamweaver added. Even after you turn off editing for an attribute, Dreamweaver leaves behind the parameter used to control the tag's property. To eliminate this extra code, see the box in Section 18.7.2.

< Day Day Up >