Using Dreamweaver Template Expressions

Discover how Dreamweaver MX's new template expressions feature offers a great deal of flexibility and power. Dreamweaver MX introduces several extremely powerful template features, including optional regions, repeating regions, and nested templates. You can even use template expressions as the base for a linear navigation system, as you'll see in this article.

From the author of

From the author of

Using Template Expressions

Dreamweaver MX introduced several extremely powerful template features,
including optional regions, repeating regions, and nested templates. Although
more obscure than these high-profile options, the new template expressions
feature offers a great deal of flexibility and power. You can even use template
expressions as the base for a linear navigation system, as you'll see in
this section.

In essence, a template expression is a variable or parameter
established in the template that can be set independently in each
template-derived document or instance. There are several types of
template parameters: boolean (true/false), text, number,
color, or URL. When entered into the template, the TemplateParam tag is
used:

If entered by hand, TemplateParam code should be placed in the
<head> section. The user interface for creating template
parameters is somewhat hidden. This type of code is also generated whenever an
editable attribute is created.

After the template parameter is set up, we can place references to the
parameter, known as template expressions,anywhere in the page.
Template expressions are written in two ways:

As a comment:

<!-- TemplateExpr: expr = "onsale"-->

As a parenthetical:

@@(onsale)@@

The two formats are interchangeable; I typically use the parenthetical format
for two reasons. First, it's shorter and quicker to write. Second, it has
the advantage of displaying in the Design view with its own symbol, as seen in
Figure 1. This symbol can be seen only when Invisible
Elements is turned on.

Figure 1 Template expressions should be hand-coded or entered through the
Property inspector; use the parenthetical syntax to display a special template
expressions symbol.

When Dreamweaver makes an instance of a template that contains a template
expression, the code syntax changes. The TemplateParam tag becomes an
InstanceParam tag:

Any template expressions that are embedded in the template are displayed with
their current values in the code. For example, a link using the saleURL
parameter would look like this:

<a href="sale/special.htm">On Sale Now!</a>

To change the parameter's value, choose Modify > Template Properties.
The Template Properties dialog box (see Figure 2)
contains a list of all the template parameters in the current page. Select any
entry and alter the fields that follow as needed. Most of the template parameter
types (text, number, and URL) use text fields. Boolean type parameters use a
check box to show or not show the parameter; color type parameters offer a color
picker.

Figure 2 We must make all modifications to template parameters through the
Template Properties dialog box. Changes we make by hand are not recognized until
the Template Properties dialog box is opened.

Preparing the Template

The strategy described in this section for creating navigation links using
template parameters and expressions relies on files with sequentially numbered
names, such as tutorial1.htm, tutorial2.htm, and so on. After the basic naming
scheme has been established, the template is ready to be prepared. Here's
how the process works:

A template parameter is inserted into the template <head>
section either by hand or by creating an editable attribute. This parameter
holds the number in the filename sequence of the current page.

Evaluated template expressions, based on the template parameter, are
entered as href values in the Previous and Next links.

In the template-derived document, the template parameter is updated to
reflect the instance's filename number. For example, the parameter for
tutorial5.htm would be 5.

Although steps 1 and 2 only need to be performed one per template, step 3 is
performed for each instance of the template that is created. However, because
each instance needs custom attention anyway to add individual content, changing
the template parameter value is not really an onerous burden.

The following procedure assumes that you are familiar with templates in
general and have, for the sake of discussion, created a template with both
Previous and Next links (either text or graphics). Best practice dictates that
the navigation links in this technique would be placed in a locked, noneditable
region. That's because you want to keep the navigation constant after all,
although it's possible to insert them into an editable region.

Entering the Template Parameter

As mentioned earlier, template parameters are either entered by hand or by
using Dreamweaver's editable attribute user interface. If the template
parameter is entered manually, place this code in the <head>
section:

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

This code creates a template parameter named baseLink with a default
value of 1. To create the same code via Dreamweaver's point-and-click
interface, follow these steps:

From the Tag Selector, choose the <a> tag surrounding the
Previous text or button.

Select Modify > Templates > Make Attribute Editable.

In the Editable Tag Attributes dialog box (see
Figure 3), select Add (+) and then enter an attribute name, such as thefilenum.

The attribute name is used for setup purposes. Naturally, you want to select
an attribute name that browsers will ignore rather than a real attribute.

Figure 3 All modifications to template parameters must be made through the
Template Properties dialog box. Changes made by hand are not recognized until
the Template Properties dialog box opens.

Make sure that Make Attribute Editable is selected.

In the Label field, enter the name that you want the template parameter
being established to have.

In this example, I'm using currentFile as the template
parameter name.

From the drop-down list, choose Number as the attribute type.

In the Default field, enter a number. This number should be an integer
for easy calculation; in this example, I entered the number 1.

After you click OK, Dreamweaver writes the template parameter code seen
previously:

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

Dreamweaver also includes the dummy attribute created in the
<a> tag:

thefilenum="@@(currentFile)@@"

You're free at this point to delete the false attribute and its value;
the important codethe template parameterremains in the document
regardless of whether the attribute is removed.

Automating the Link Creation

In this next step, the previously established template parameter is added to
each of the navigation links in slightly different formulas. One of the most
powerful aspects of template expressions is that they are evaluated at design
time. Numerous types of operations, including mathematical, string, and binary,
are available for use. This example combines both math and string concatenation
to create links to both the previous and next pages in the sequence.

Here are the steps necessary for inserting a template expression as a
navigation link:

On the template page, select the Next button or text link.

In the Property inspector, enter code similar to the following in the
Link field:

@@('template' + (currentFile + 1) + '.htm')@@

In this example, the sequential files are all within the same folder and
named template1.htm, template2.htm, and so on. My template parameter, defined in
the previous section, is called currentFile. Note that single rather
than double quotes are used; this is done because the entire template expression
is enclosed in quotes in the <a> tag:

<a href="@@('template' + (currentFile + 1) + '.htm')@@">NEXT</a>

Select the Previous button to perform a similar operation.

In the Link field, enter code like this:

@@('template' + (currentFile - 1) + '.htm')@@

For the Previous link, instead of adding a number to the base value, as was
done for the Next link, one is subtracted.

TIP

Want to make your navigation really slick? Use Dreamweaver MX's optional
region feature to hide the Previous link if the template parameter was set to 1;
in that circumstance, there is no previous page. Likewise, if you know the
number of the final page in the series, wrap an optional region around the Next
link to hide it when the template parameter is equal to the last value.

Setting the Instance Parameter

Now that the template work is done, all that is left is to set the parameter
for each instance. Although it might sound burdensome, it's a fairly
straightforward operation that you can accomplish right after the file is
created from the template.

NOTE

Be sure to save your template before proceeding to the next series of steps.
If you have already created one or more instances, update the files as requested
by Dreamweaver after the save.

Select Modify > Template Properties.

In the Template Properties dialog box, choose the parameter set up in the
template.

In our example, the parameter would be currentFile.

In the text field, insert the number that matches the value in the
filename of the current page.

For example, if the file is template23.htm, enter 23.

After you close the Template Properties dialog box, check the code. Where the
template expressions were inserted in the Next and Previous links, the fully
resolved filenames appear. With a value of 23 for the parameter, the code will
be similar to this: