Dreamweaver template regions: best practices

Learn about the major types of regions in a Dreamweaver template (DWT), examples of how to use regions to create flexible design elements, and common pitfalls to avoid.

Introduction

By default, regions in DWTs - defined using HTML comment tags - are uneditable and locked. In order for users to be able to update content in a flexible manner, but without breaking the template, developers must use these regions wisely in their DWTs.

There are three main types of regions in your DWT toolkit - editable, optional, and repeating - as well as an editable tag attribute.

EDITABLE Region

This first region is the most important: if a user cannot edit some part of the template, then web pages quickly become outdated.

Example: A common editable region on a page will be "content" where the main text and images for that page are located.

Tip: The editable region is often placed inside of another region type to create editable content within an optional or repeating region.

REPEATING Region

A design element that needs to appear multiple times, and so can be copied or repeated. In addition to the basic repeating region, there is also a repeating region specifically for repeating rows in a table.

Example: A designer is creating a photo gallery page and wants to allow the user to add properly-formatted and classed divs when more images are acquired. The image placeholder and the caption are the only editable regions within this, while the required design features in the code remain intact.

Tip: Dreamweaver does not support "nesting" repeating regions inside each other.

OPTIONAL Region

This type of region may or may not appear in a page. The template designer sets the default value for whether this region is visible or not, but then users can change its visibility.

Example: A designer creates a "leftColumn" region for a side navigation menu. If users don't need side navigation on a particular page, they turn off leftColumn.

Tip: When creating editable regions inside a repeating or an optional region, be sure to leave the ids and classes you need for styling in the UNeditable part of the region. Only make the region's content portions - such as the image or the text of the caption - editable by users.

EDITABLE TAG Attribute

Using this mini-editable region, a designer can allow only certain attributes of a tag to be editable by users.

Example: A designer wants users to be able to change only the background color of a table cell or row, but not alter width and height. In addition, said designer adds previous and next links at the bottom of a page, and only wants the user to change the HREF, or where the link points, but not its class or target.

Tip: Before you make a tag editable, you must first set the default value for that tag.

For More Information

For more information, see Adobe's article on template regions.