New template features in Dreamweaver MX

Macromedia Dreamweaver MX introduced many new features for templates. With these new features, you can create templates that allow a great deal of control over page editing. With the advent of optional regions, repeat regions and nested templates, you can create complex, almost dynamic pages.

This TechNote will review the template features introduced in Dreamweaver MX.

Nested templates are essentially templates within templates. This feature allows different levels of control on pages created from these templates.

Nested templates can help developers in a number of ways, but the common thread among all uses is to provide two differing levels of control and editability. A common scenario in which nested templates is useful is for a website that has a single overall appearance (the company logo and contact information, for example). But the website also has sections that use a distinct appearance. For the separate sections of your web site, you can make nested templates that will have common elements and layout features for that section.

This helps you as a developer because if you need to change your address or logo, you need to merely change it in the parent template file and it will automatically update all the pages. If your Products section develops a new look, however, you simply have to update the nested template (otherwise known as the child template), and those changes will only propagate through the Products pages.

Note: This topic is described in greater detail in Creating a nested template in Dreamweaver MX (TechNote 16282). This section just provides an overview of the method used for creating nested templates.

To see the differences between the two templates, make a page based on this nested template. As expected, you will only be able to edit the content defined as editable regions in the nested template. When you make a change to the nested template, only pages based on the nested template will update. When you make a change to the original template, any pages based on the parent template;including the nested template itself;will update. Since the nested template is updated by changes in the parent template, all pages based on the nested template will update, too.

Note: An example of the template attributes discussed below can be found in the example code provided at the bottom of this page. All code examples in this TechNote are taken from this sample file.

The template repeat regions feature allows developers to create a template without knowing how many instances of a certain element will be needed. This allows developers to control the appearance of a specific element, yet the template users can freely repeat that specific element, changing the content in the element as appropriate.

Developers are most likely to use repeating regions in conjunction with tables. If your template contains a table, you can set a row or group of rows to be a repeating region. You might then define an editable region within the repeating region (so in the example of a table, at least one table cell will contain an editable region). When a user makes a page based on that template, the user will be able to add a new row or group of rows, adding distinct content into the editable table cells. The template itself will have only one row (or group of rows), yet pages based on the template can have as many rows as is needed to display the information. The template user can add and subtract rows and move the rows up and down within the repeating rows. This is a good way to give developers flexibility for expanding pages as the site grows without disturbing the underlying templates.

This is such a popular way of using a repeat region that Dreamweaver has a template object called Repeating Table. This object allows you to set up the table and repeat region within the same dialog box.

Note: This topic is described in greater detail in the help documentation. This section just provides an overview of the method used for creating repeating regions.

Remember that depending on how you define the repeating regions, you may not really need the repeating region. An example of a situation in which a repeating region is uniquely suited is if you insert an image, and make it a repeat region but not editable. In a document based on this template, the image object can be repeated as necessary simply with a click of the plus icon.

Note: This topic is described in greater detail in the help documentation. This section just provides an overview of the method used for creating repeating tables. It is also important to note that the repeating table is merely a specialized use of a repeating region.

Optional regions are just that: optional. Optional regions define content or editable regions that can be turned on or off (be visible or not).

The usage of optional regions can range from simple to complex, and more complex usages will require forethought and scripting capabilities.

A simple use of an optional region is to allow content to either be visible or not in a page based on the template. The content defined as an optional region is added in the template. A template user who makes a template with an optional region can then decide whether or not to retain the optional region. If the user turns the optional region off, the content defined as the optional region will no longer appear on the page. This may be useful in a situation where the template developer wants to control the placement and appearance of a bit of content, yet the developer also wants template users to choose whether or not to use that bit of content.

More complex usages of optional regions allow parameters to determine whether or not the optional region will appear. So, instead of the template user choosing to toggle the optional region, the optional region will toggle on or off in reaction to a parameter.

Creating alternate table row colors is an example of a more complex usage of optional regions. If you have a repeating table (such as the one discussed and displayed above), the developer is unable to change the appearance of the table rows since they are locked down by the template. Dreamweaver can keep track of the number of rows in a table, however. You can therefore set up an parameter within the template that tracks the number of rows. The optional region can be defined to toggle on or off in response to the row number.

Note: This topic is described in greater detail in the help documentation. This section just provides an overview of the method used for creating and implementing optional regions. This section will also give some general information about creating and using template parameters, but it is beyond the scope of this TechNote to give precise instructions for creating template parameters.

Create the optional region in the template file:

Toggle the optional region in a file based on the template file:

You can create template parameters manually in the code of the template file, but template parameters are also created automatically when you create an optional region as described above. In any case, all template parameters must be written in the head of the document and must follow the syntax shown below (replace <custom> with customized values).

<!-- TemplateParam name="<custom>" type="<custom>" value="<custom>" -->

When you create an optional region using the method described above, the template parameter is written specifically as follows:

<!-- TemplateParam name="<custom>" type="boolean" value="true" -->

While in the template file, you can create an optional region that uses a template parameter by using the Advanced tab of the New Optional Region dialog box:

• Use Parameter: You can create an optional region that uses a pre-existing template parameter IF the template parameter is a boolean type with a value of either true or false. Any parameters that meet that specification will be available in this pop-up menu.
• Enter Expression: Essentially, once you have created a template parameter, the parameter can be used as would any other parameter in JavaScript. In fact, template expressions are based on JavaScript coding rules, so the syntax is identical to JavaScript coding. You can use mathematical functions to add, subtract, multiply or divide parameters to added complexity.

You can also create an optional region that uses a template parameter directly within the code. How you code these regions depends on where in the code you are using them.

• A region that uses a template parameter can be expressed as a variable. This is the more flexible choice since it can be used to replace a value of a tag's attribute, and it can also be used as a placeholder for the content. You use the syntax below if expressing the parameter as a variable (replace <parameter> with the name of a defined template parameter):

  @@("<parameter>")@@

• A region that uses a template parameter can be expressed as a tag. The Template Expression tag is set off as an HTML comment, but it otherwise acts as a tag in that it has a single attribute and a value. This method can not be used to replace a value of a tag's attribute, since it is a tag itself. The Template Expression tag is coded as below (replace <parameter> with the name of a defined template parameter):

  <!-- TemplateExpr expr="<parameter>" -->

In both cases, Dreamweaver recognizes the code and will replace the code with the value of the parameter in any page based on this template. To get a sense of how they differ, though, the following examples highlight how to use them.

Example 1: In this example, either method of hand coding an optional region (highlighted in red) will work, because the code is not used to replace the value of a tag's attribute. In both cases, Dreamweaver will see this code in any page based on this template, and will replace the code with the actual defined value (the value will be editable for template users by modifying template properties):

• Works:<title>@@("title")@@</title>
• Works:<title><!-- TemplateExpr expr="title" --></title>

Example 2: In this example, the method of hand coding that uses a Template Expression tag is incorrect, because the code IS used to replace the value of tag's attribute. For the first method, though, Dreamweaver will see this code in any page based on this template, and will replace the code with the actual defined value (the value will be editable for template users by modifying template properties). For both methods, the code that attempts to describe the parameter is highlighted in red:

• Works:<table border=@@("border")@@ cellpadding=3 cellspacing=0>
• Does not work:<table border=<!-- TemplateExpr expr="border" --> cellpadding=3 cellspacing=0>

Sometimes you want to allow your template users to adjust some specific aspects of the page, but not have access to all of the code for the element. Editable attributes can be the answer for this. Editable attributes allow the template users to change specific attributes of a tag, without having access to the tag itself.

Note: Editable attributes are a specialized use of an optional region. Essentially, adding an editable attribute is the same as defining that tag's attribute as an optional region. This feature creates a template parameter, for which the template creator can define a default value, and the template users can modify the parameter value as they would modify any other optional region's parameter value.

In HTML, attributes are details assigned to tags. For example, a table tag may have a bgcolor attribute, which defines the background color of the table. Typically, if a template developer wanted template users to be able to modify things like the background color of a table, the developer would have to allow the entire table to be editable (so in the case of a table, the table would actually have to be added into an editable region). By using an editable attribute, however, the developer can add the table, set only table cells to be editable regions, and define the background color;the bgcolor attribute;to be an editable attribute. In a page based on such a template, the user will not be able to modify the table itself, but can change the bgcolor attribute and add or edit any content in editable regions within the cells of the table.

Editable attributes are defined by the template developer.

To remove an editable area or other template region, highlight the region in question and choose Modify > Templates > Remove Template Markup.

Another feature in Dreamweaver is the ability to verify that your template code is correct. With the added complexity and hand coding needed for some template expressions and parameters, there is a bigger opportunity for coding errors. Using the Check Template Syntax Command will help you debug your code.

This feature can only be used in the actual template file. Choose Modify > Templates > Check Template Syntax.

This example code contains editable regions within a repeat region. To use the example code, follow these instructions:

The template contains:

• an editable attribute.
• expressions
• editable regions
• repeat region
• Template parameters

<html>

<head>

<title><!-- TemplateExpr expr="title" --></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="" content="This example is based an a template created by Wanda Huang.">

<!-- TemplateParam name="title" type="text" value="Using Repeat Region Variables in Expressions" -->

<!-- TemplateParam name="border" type="number" value="1" -->

<!-- TemplateParam name="evenColor" type="color" value="FFFFFF" -->

<!-- TemplateParam name="oddColor" type="color" value="#CCCCCC" -->

</head>

<body text="#000000">

<table border=@@("border")@@ cellpadding=3 cellspacing=0>

<tr>

<th >Name</th>

<th>email address</th>

<th>phone</th>

</tr>

<!-- TemplateBeginRepeat name="Parent" -->

<tr >

<TD><!-- TemplateExpr expr="_index+1" --></TD>

<TD><!-- TemplateBeginEditable name="email" -->email<!-- TemplateEndEditable --><br>

</TD>

<TD><!-- TemplateBeginEditable name="phone" -->phone<!-- TemplateEndEditable --></TD>

</tr>

<!-- TemplateEndRepeat -->

</table>

</body>

</html>

Additional information

For more information about the new Dreamweaver MX template features, check the Using Templates section of the Dreamweaver Support Center.

For more information about creating nested templates, seeCreating a nested template in Dreamweaver MX (TechNote 16282).