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 consumer or computerized – manipulate.dreamweaver

The key gain of a template parameter based manipulate is 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 the 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 by means of 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 which, from time to time, needs to an agreement to two columns. 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 right here is to make the content material within the div tag editable, but hold the div itself locked. By setting only the content within the editable area, 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 by means of default option is checked. I selected side column for the instance editable area, which fits this code into the pinnacle area:

<!– TemplateParam name=”side-column” kind=”boolean” value=”actual” –>
Make sure you get the site of template regions 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 to 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 one of the satisfactory methods to pick out their use, I continually turn out to be renaming the automated call (i.E., EditableRegion4) to something more useful.

Five. In the embedded fashion sheet, insert a template expression to modify the principle content region’s width fee relying on the state of the sideColumn template parameter. To accomplish this in a 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 value the parameter is tested towards, real, is not in rates.template

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

After clicking OK, the displayed page in Dreamweaver is adjusted consistent with your template parameter and the column is hidden. The technique simply mentioned works well for embedded patterns, but if you’re the usage of outside style sheets, you will want to take an exclusive approach. 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 rates used within the template expression are actually single quotes instead of double; this alteration is important because the expression is contained in a quoted attribute price, href.

Related Articles

Back to top button