Dreamweaver Template Parameters

Dreamweaver template parameters can do much more than switch between style sheets. With careful planning and a sprinkling of template expressions, you can set up a template to toggle between two or more different layout styles, much like switching between screen media and print media types. The primary difference is that the switch between layout styles is under designer - not user or automatic - control.

The key benefit of a template parameter based control is template management. Rather than require multiple templates for the same site, you can have one template with a variety of layouts. This technique is a real time-saver when you need to make changes to the template; instead of updating several templates with the same modification - and processing the changes in the site - you only need to alter one. Moreover, template parameter-based layouts allow master designers to hand off carefully crafted templates to be implemented by junior designers or even those with no design skills whatsoever, like Contribute users.

Let's say that you have a basic three-column layout which, occasionally, needs to contract to two columns. The layout uses a graphic across the top and bottom to help form the column appearance. In this situation, you'd need to accomplish three main tasks to accommodate a two-column design:

Remove the third column from the template.
Change the images to compensate for the layout change.
Increase the width of the main content column to allow the text to flow into the vacated third column area.

All of these changes - and any others necessary - can easily be triggered through a single template parameter. Here's how you set it up:

1. Open the three-column template for editing. This assumes that this particular layout is the most commonly used and that the two-column design is the exception.

2. Select the content in the third column area within the container (typically a div tag); you may find it easiest to work in Code or Split view for this process.

3. Choose Templates: Editable Region from the Insert bar's Common category and enter a meaningful name for the region in the dialog box that appears.

The idea here is to make the content within the div tag editable, but keep the div itself locked. By placing only the content within the editable region, you prevent the unwanted removal or alteration of the surrounding div.

4. Select the div tag encompassing the editable region and choose Templates: Optional Region. In the New Optional Region dialog box, enter a recognizable name for the area and make sure the Show by default option is checked. I chose sideColumn for the example editable region, which inserts this code into the head area:

Make sure you get the positioning of template regions correct: you can't have an optional region within an editable one, only the other way around.

Tip: Dreamweaver does offer an Editable Optional Region object that inserts the code for both areas properly, I don't recommend it. Although the tool lets you name the optional region and set the state to either shown or hidden, the editable region is automatically and generically named. Since the names of editable regions are one of the best ways to identify their use, I always end up renaming the automatic name (i.e., EditableRegion4) to something more useful.

5. In the embedded style sheet, insert a template expression to modify the main content region's width value depending on the state of the sideColumn template parameter. To accomplish this in a single template expression, the conditional operator is used, like this:

#content {
height: auto;
width: @@(sideColumn==true?"500":"750")@@px;
float: left;
margin-left: 30px;
margin-top: 15px;
}

Translated into English, this template expression reads, "If the template parameter sideColumn is displayed make the value 500, otherwise, 750." Be sure to use the proper wrapping syntax of double at-signs around a parenthetical statement; also note that value the parameter is tested against, true, is not in quotes.

Tip: As noted earlier in this document, Dreamweaver does not assign the default values to template parameters, so your display is likely to be a bit jumbled when you're working on the template itself; in the example design, the sample content from the main section overflows into the single column. This will not be the cause when editing child pages.

The last task is to set up the images that frame the columns to change when the sideColumn property is modified.

6. Insert template expressions in each of the styles that define background images to illustrate the column widths. For this example, the file names are top_2col.jpg and bottom_2col.jpg for the two content columns variation and top_1col.jpg and bottom_1col.jpg for the single content column. This naming convention allows me to target the template expression to just change the number in the file names. Again, the conditional operator is used:

#topBorder {
background-image: url(/images/top_col.jpg);
background-repeat: no-repeat;
margin-left: 190px;
}

#bottomBorder {
background-image: url(/images/bottom_col.jpg);
background-repeat: no-repeat;
margin-left: 190px;
}

7. Save the template and create a new page based on the template. The new page will initially display the side column.

8. To test the template parameters, open the child page and select Modify > Template Properties. When the Template Properties dialog box opens, uncheck the Show sideColumn option.

After clicking OK, the displayed page in Dreamweaver is adjusted according to your template parameter and the column is hidden. The technique just outlined works well for embedded styles, but if you're using external style sheets, you'll need to take a different approach. Create a separate style sheet, one for each layout variation and insert a template expression in the link code to switch sheets on demand. The following code assumes the 2 style sheets are in the same folder and named main_2col.css and main_1col.css:

Note that the quotes used inside the template expression are now single quotes rather than double; this change is necessary because the expression is contained within a quoted attribute value, href.

WebAssist helps web developers and designers build better websites faster with Dreamweaver extensions, CSS templates, as well as pre-built PHP scripts and solutions.