How to design web pages based on Dreamweaver templates
Learn how to use Dreamweaver templates to design a “fixed” page layout and then create documents based on the template that inherit its page layout.

A template is a special type of document that you use to design a “fixed” page layout; you can then create documents based on the template that inherit its page layout. As you design a template, you specify as “editable” which content users can edit in a document based on that template. Templates enable template authors to control which page elements template users—such as writers, graphic artists, or other web developers—can edit. There are several types of template regions the template author can include in a document.


Templates enable you to control a large design area and reuse complete layouts. If you want to reuse individual design elements, such as a site’s copyright information or a logo, create library items.

Using templates enables you to update multiple pages at once. A document that is created from a template remains connected to that template (unless you detach the document later). You can modify a template and immediately update the design in all documents based on it.


Templates in Dreamweaver differ from templates in some other Adobe Creative Cloud software in that page sections of Dreamweaver templates are fixed (or uneditable) by default.

Types of template regions

When you save a document as a template, most regions of a document are locked. As a template author, you specify which regions of a template-based document will be editable by inserting editable regions or editable parameters in the template.

As you create the template, you can make changes to both editable and locked regions. In a document based on the template, however, a template user can make changes only in the editable regions; the locked regions can’t be modified.

There are four types of template regions:

An editable region: An unlocked region in a template-based document—a section a template user can edit. A template author can specify any area of a template as editable. For a template to be effective, it should contain at least one editable region; otherwise, pages based on the template can’t be edited. For detailed information in editable regions, see Create editable regions in templates.

A repeating region: A section of the document layout that is set so that the template user can add or delete copies of the repeating region in a document based on the template as necessary. For example, you can set a table row to repeat. Repeating sections are editable so that the template user can edit the content in the repeating element, while the design itself is under the control of the template author.

There are two types of repeating regions you can insert in a template: repeating region and repeating table. To know how to work with repeating regions, see Create repeating regions and tables in Dreamweaver.

An optional region: A section of a template that holds content—such as text or an image—that may or may not appear in a document. In the template-based page, the template user usually controls whether the content is displayed. See the Optional region section for more information.

An editable tag attribute: Lets you unlock a tag attribute in a template, so the attribute can be edited in a template-based page. For example, you can “lock” which image appears in the document but let the template user set the alignment to left, right, or center. See Define editable tag attributes in Dreamweaver for more information.

When you create a template file by saving an existing page as a template, the new template in the Templates folder, and any links in the file are updated so that their document-relative paths are correct. Later, when you create a document based on that template and save it, all the document-relative links are updated again to continue to point to the correct files.

When you add a new document-relative link to a template file, it’s easy to enter the wrong path name if you type the path into the link text box in the Property inspector. The correct path in a template file is the path from the Templates folder to the linked document, not the path from the template-based document’s folder to the linked document. Ensure that the correct paths for links exist by using either the folder icon or the Point-to-file icon in the Property inspector when creating links in templates.

Server scripts in templates and template-based documents

Some server scripts are inserted at the very beginning or end of the document (before the <html> tag or after the </html> tag). Such scripts require special treatment in templates and template-based documents. Normally, if you make changes to script code before the <html> tag or after the </html> tag in a template, the changes are not copied to documents based on that template. This can cause server errors if other server scripts, within the main body of the template, depended on the scripts that are not copied. An alert warns you if you change scripts before the <html> tag or after the </html> tag in a template.

To avoid this problem, you can insert the following code in the head section of the template:

<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

When this code is in a template, changes to scripts before the <html> tag or after the </html> tag are copied to documents based on that template. However, you will no longer be able to edit those scripts in documents based on the template. Thus, you can choose to either edit these scripts in the template, or in documents based on the template, but not both.

Template parameters

Template parameters indicate values for controlling content in documents based on a template. Use template parameters for optional regions or editable tag attributes, or to set values you want to pass to an attached document. For each parameter, you select a name, a data type, and a default value. Each parameter must have a unique name that is case sensitive. They must be one of five permitted data types: text, boolean, color, URL, or number.

Template parameters are passed to the document as instance parameters. In most cases, a template user can edit the parameter’s default value to customize what appears in a template-based document. In other cases, the template author might determine what appears in the document, based on the value of a template expression.

Template expressions

Template expressions are statements that compute or evaluate a value.

You can use an expression to store a value and display it in a document. For example, an expression can be as simple as the value of a parameter, such as @@(Param)@@, or complex enough to compute values which alternate the background color in a table row, such as @@((_index & 1) ? red : blue)@@.

You can also define expressions for if and multiple-if conditions. When an expression is used in a conditional statement, Dreamweaver evaluates it as true or false. If the condition is true, the optional region appears in the template-based document; if it is false, it doesn’t appear.

You can define expressions in Code view or in the Optional Region dialog box when you insert an optional region.

In Code view, there are two ways to define template expressions: use the <!-- TemplateExpr expr="your expresson"--> comment or @@(your expression)@@. When you insert the expression in the template code, an expression marker appears in Design view. When you apply the template, Dreamweaver evaluates the expression and displays the value in the template-based document.

Template expression language

The template expression language is a small subset of JavaScript, and uses JavaScript syntax and precedence rules. Use JavaScript operators to write an expression like this:


The following features and operators are supported:

  • numeric literals, string literals (double-quote syntax only), Boolean literals (true or false)

  • variable reference (see the list of defined variables later in this section)

  • field reference (the “dot” operator)

  • unary operators: +, -, ~, !

  • binary operators: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>

  • conditional operator: ?:

  • parentheses: ()

    The following data types are used: Boolean, IEEE 64‑bpc floating point, string, and object. Dreamweaver templates do not support the use of JavaScript “null” or “undefined” types. Nor do they allow scalar types to be implicitly converted into an object; thus, the expression "abc".length would trigger an error, instead of yielding the value 3.

    The only objects available are those defined by the expression object model. The following variables are defined:


    Contains the document-level template data with a field for each parameter in the template.


    Only defined for expressions which appear inside a repeating region. Provides built‑in information about the region


    The numerical index (from 0) of the current entry


    The total number of entries in this repeating region


    True if the current entry is the first entry in its repeating region


    True if the current entry is the last entry in its repeating region


    The _repeat object for the previous entry. It is an error to access this property for the first entry in the region.


    The _repeat object for the next entry. It is an error to access this property for the last entry in the region.


    In a nested repeated region, this gives the _repeat object for the enclosing (outer) repeated region. It is an error to access this property outside of a nested repeated region.

    During expression evaluation, all fields of the _document object and _repeat object are implicitly available. For example, you can enter title instead of _document.title to access the document’s title parameter.

    In cases where there is a field conflict, fields of the _repeat object take precedence over fields of the _document object. Therefore, you shouldn’t need to explicitly reference _document or _repeat except that _document might be needed inside a repeating region to reference document parameters that are hidden by repeated region parameters.

    When nested repeated regions are used, only fields of the innermost repeated regions are available implicitly. Outer regions must be explicitly referenced using _parent.

Multiple If condition in template code

You can define template expressions for if and multiple-if conditions. This example demonstrates defining a parameter named "Dept", setting an initial value, and defining a multiple-if condition which determines which logo to display.

The following is an example of the code you might enter in the head section of the template:

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

The following condition statement checks the value assigned to the Dept parameter. When the condition is true or matches, the appropriate image is displayed.

<!-- TemplateBeginMultipleIf --> 
<!-- checks value of Dept and shows appropriate image--> 
<!-- TemplateBeginIfClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif"> <!-- TemplateEndIfClause--> 
<!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateEndMultipleIf -->

When you create a template-based document, the template parameters are automatically passed to it. The template user determines which image to display.