Templates, Re-architected | Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3: Training from the Source

When templates were first introduced in Dreamweaver 4, designers found them to be an easy way to increase productivity. Instead of making a change to a page element and then applying that same change to every page on the site, they can change just the template. When the altered template is saved, Dreamweaver updates all the child pages in a single operation. All that's left for the designer is to upload the newly modified pages.

Templates originally were solely within the Dreamweaver domain and were treated as a tool for Web-savvy designers. The typical style of developing a template was to declare a single editable region for the page's content and to lock the core elements of the pageas in logo and navigation section locking. This practice gave the Dreamweaver designer the most freedom while handling key maintenance chores. There was little concern that inappropriately styled content would be added to the editable region; after all, it was the designer's job to make sure that the content was presented correctly. Moreover, an open content area gave the designer lots of room to be creative and to use any of the available Dreamweaver power tools as needed.

How Templates Work

Any Web pagestatic or dynamiccan be saved as a template. When a page is designated as a template, Dreamweaver appends a .dwt file extension and inserts a few lines of code in the form of an HTML comment. Initially, all the content in the <body> area of the page is locked and cannot be altered on any page derived from the template. Two areas of the <head> are marked as editable regions: one surrounding the document title, and another placed to hold style sheets and JavaScript.

An editable region is a section of the page, either empty or with placeholder material, enclosing an area that can be modified when a child page is derived from the template. Part of the template development process is designating one or more editable regions in the <body>. Each editable region is uniquely named and designated in Design view with a surrounding border and a small tab displaying the region name. In the code, these regions are marked by specially formatted HTML comments.

After the template has been constructed, designers create pages based on that template. Each of these child pages maintains a connection to the master template unless purposely detached. Whenever the locked areas of the original template are altered, the same changes are applied to the corresponding section of each child page; the editable sections remain unchanged.

All the template operations in Dreamweaver are handled client-side within the local site. Consequently, any updated child pages must be published to the remote Web site.

The introduction of Contribute changed the playing field. No longer were templates and their child pages seen only by the designer and trusted members of the Web team. Now, content contributors, who were decidedly not technically savvy, were also working with template-derived pages. Such business users cannot and should not be expected to master the complexities of Web page buildingit's not in their job description, nor do they have the time to devote to it. All these users want to do is make any needed updates, publish them, and move on. The single editable region approach gives the Contribute user too much power that could easily erase important content (or change it inappropriately) when applied inadvertently. Clearly, the casual use of editable regions has to be rethought to make templates usable for this new group of Contribute users.

The key to designing Dreamweaver templates for Contribute is to be precise. Although once it was acceptable for a designer to designate an entire section of a page as an editable region, that's really giving the Contribute user too much power. A far better strategy is to use multiple discrete editable regions, targeting content areas within the overall design structure. Separate editable regions for heading and body text ensure that the designer's style choices will be followed by content contributors.

Note

For the Templates folder to be detected in Contribute, the Dreamweaver site root must match the Contribute site root in Contribute. For Contribute sites with multiple administrators, you'll need multiple matching Dreamweaver sites.

Additionally, Contribute users can be directed to add content appropriately by following helpful naming conventions and judicious use of placeholder material. When an editable region is defined, it's given a unique name; these names appear in tabs above the region in both Dreamweaver and Contribute. By specifying names that describe the content expected for that region, such as mainHeading or pictureCaption, the Dreamweaver designer clearly points the way for the content contributor. Furthermore, the editable region itself should contain text and/or image placeholders that illustrate the desired content. Consider the impact of using a clear directive like this: "The opening paragraph of the press release should include the location and date of the announcement in bold, followed by two to three sentences, written in past tense" versus a bit of standard placeholder text, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." Although the latter is fine for the designer, the former approach is definitely more suitable for the Contribute audience.