Dreamweaver Template Parameters

Dreamweaver template parameters can do a great deal extra than the transfer between style sheets. With cautious making plans and a sprinkling of template expressions, you could set up a template to toggle between two or greater distinctive format patterns, similar to switching among display screen media and print media kinds. The primary distinction is that the transfer between layout patterns is underneath clothier – now not the consumer or computerized – manipulate.


The key gain of a template parameter-based manipulates template management. Rather than require a couple of templates for the equal web page, you could have one template with a selection of layouts. This method is a real-time-saver while you need to make modifications to the template; instead of updating numerous templates with equal amendment – and processing the modifications within the web page – you only want to alter one. Moreover, template parameter-based layouts allow grasp designers at handoff carefully crafted templates to be applied using junior designers or even people with no layout abilities in any respect, like Contribute users.

Let’s say that you have a fundamental three-column layout that needs to agree to two columns from time to time. The format makes use of a photo of the pinnacle and backside to assist form the column appearance. In this case, you would want to perform three predominant duties to deal with a two-column design:

Remove the 0.33 column from the template.

Change the photos to catch up on the layout alternate. Increase the width of the primary content material column to permit the textual content to flow into the vacated 0.33 column area. All of those adjustments – and any others necessary – can effortlessly be brought about thru a single template parameter. Here’s how you set it up:

1. Open the three-column template for modifying. This assumes that this precise layout is the maximum normally used and that the 2-column design is the exception.

2. Select the content within the third column region inside the field (generally a div tag); you can locate it simplest to work in Code or Split view for this manner.

3. Choose Templates: Editable Region from the Insert bar’s Common category and enter a significant name for the vicinity within the dialog box that looks.

The idea is to make the content material within the div tag editable but hold the div itself locked. By setting only the editable area’s content, you prevent the undesirable removal or alteration of the encompassing div.

4. Select the div tag encompassing the editable vicinity and choose Templates: Optional Region. In the New Optional Region dialog container, input a recognizable name for the place and make certain the Show utilizing default option is checked. I selected a side column, for instance, an editable area, which fits this code into the pinnacle area:

<!– TemplateParam name=”side-column” kind=”boolean” value=”actual” –>
Make sure you get the template regions’ site correct: you can not have an optionally available region within an editable one; best the other way around.

Tip: Dreamweaver does provide an Editable Optional Region item that inserts the code for each area well. I don’t endorse it. Although the device helps you name the non-compulsory area and set the state to both shown or hidden, the editable place is mechanically and generically named. Since the names of editable areas are satisfactory methods to pick out their use, I continually turn out to be renaming the automated call (i.E., EditableRegion4) to something more useful.

5. In the embedded fashion sheet, insert a template expression to modify the principle content region’s width fee relying on the state of the side column template parameter. To accomplish this in an unmarried template expression, the conditional operator is used, like this:

#content material
height: car;
width: @@(sideColumn==real?”500″:”750″)@@px;
waft: left;
margin-left: 30px;
margin-pinnacle: 15px;

Translated into English, this template expression reads, “If the template parameter side column is displayed, make the cost 500, in any other case, 750.” Be sure to apply the right wrapping syntax of double at-signs and symptoms around a parenthetical declaration; additionally, note that the value the parameter is tested towards, real, is not in rates.

Tip: As noted earlier on this record, Dreamweaver does not assign the default values to template parameters, so your show is possible to be a piece jumbled while you’re working on the template itself; in the example layout, the pattern content from the primary phase overflows into the unmarried column. This will no longer be the motive when modifying baby pages. The closing challenge is to set up the images that body the columns to exchange when the side-column assets are modified.


6. Insert template expressions in every one of the styles that define history snapshots to illustrate the column widths. For this situation, the file names are top_2col.Jpg and bottom_2col.Jpg for the two content columns variant and top_1col.Jpg and bottom_1col.Jpg for the single content column. This naming conference lets in me to goal the template expression to simply exchange the wide variety in the document names. Again, the conditional operator is used:

history-photograph: URL(/pictures/top_col.Jpg);
history-repeat: no-repeat;
margin-left: 190px;

history-photograph: url(/pics/bottom_col.Jpg);
history-repeat: no-repeat;
margin-left: 190px;

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

8. To test the template parameters, open the kid page and choose Modify > Template Properties. When the Template Properties dialog container opens, uncheck the Show side-column alternative.


After clicking OK, the displayed page in Dreamweaver is adjusted consistent with your template parameter, and the column is hidden. The technique mentioned works well for embedded patterns, but you will want to take an exclusive approach if you’re using outside style sheets. Create a separate fashion sheet, one for each layout variation, and insert a template expression inside the hyperlink code to replace sheets on call for. The following code assumes the two style sheets are within the equal folder and named main_2col.Css and main_1col.Css:

<link href=”../css/main_col.Css” rel=”stylesheet” type=”textual content/CSS” />
Note that the template expression rates are actually single quotes instead of double; this alteration is important because the expression is contained in a quoted attribute price, href.

Leah Leonard

Coffee expert. Troublemaker. Typical music guru. Friendly beer fanatic. Introvert. Web specialist. Uniquely-equipped for implementing bullwhips in Ocean City, NJ. Spent a year importing licorice in Hanford, CA. Have some experience licensing cigarettes for the government. Once had a dream of selling toy monkeys in Las Vegas, NV. Spent the 80's working on hula hoops in Minneapolis, MN. What gets me going now is working with action figures in the government sector.

Related Articles

Back to top button