This article is from Builder.com's Design and Usability Tactics e-newsletter. Sign up instantly to begin receiving the Design and Usability Tactics e-newsletter in your inbox.
Like many other Web builders, I use Macromedia Dreamweaver for much of my Web page creation work. (In the interest of full disclosure, I must confess to writing three books about the product.) Dreamweaver's templates are a unique feature that I find myself using more and more—especially in Web sites that end users will maintain using Macromedia Contribute.
In "Build a Web site for Macromedia Contribute users," I introduced the idea of setting up the site's directory structure and CSS styles to accommodate Contribute users. In this article, I'll look at the role of Dreamweaver templates in a site designed for Contribute users.
Understanding Dreamweaver templates
For years, Web builders have been creating pages based on templates. You create a master Web page that includes the basic HTML code and common elements of your site design, such as the logo and navigation bar. Then you create new pages by making copies of that master template and adding the individual page content as needed. Dreamweaver templates start with the same concept and add several features that make the templates a powerful site maintenance tool, as well as a timesaving convenience for creating new Web pages.
Dreamweaver gives its template files a special extension (.dwt) and creates a link between the template and the Web pages based on that template. Special codes (embedded in HTML comment tags) enable you to define what parts of a template-based Web page are editable and what parts are linked to and controlled by the template. The parts of the template-based page that are linked to the template are locked to prevent accidental changes to elements that are supposed to be consistent throughout the site. When you need to change one of those common elements, you can make the change in the Dreamweaver template file, and the program automatically updates all the pages based on that template to reflect your change.
Part of the power of Dreamweaver templates is the ability to define what portions of each template-based page the template controls and what portions are separately editable. You do that by defining regions in the template. Dreamweaver supports four kinds of regions:
- Editable regions: This is the part of a template-based page that you can edit freely without affecting the template or any other template-based page. Typically, the main content div is an editable region, along with any other part of the page where the content varies from page to page.
- Optional regions: These are blocks of content that are present in the template, but you can display or hide them in template-based pages. For example, in a site that requires a login to reach the members-only area, you might place a small login form in an optional region in the sidebar so you can easily display the login box on the public pages and hide it on the pages in the members-only area. Optional regions can contain locked content or editable regions.
- Repeating regions: These are blocks of content that users can duplicate. For example, the template for a news page might include a repeating region that contains preformatted title and body text placeholders for a news item. The end user can simply click a button to add or delete individual news items.
- Locked regions: These are the rest of the template—any part of the template that isn't specifically defined as another region. You can't edit the locked regions of a template-based page in Dreamweaver or Contribute. Locked regions are for content, such as the site's main navigation bar, which should remain consistent in all the pages based on the template. To change the content in a locked region, you edit the template instead of the template-based pages. Dreamweaver automatically replicates the change in all the template-based pages.
Carefully selecting limits of editable regions in a template gives you very granular control over what parts of the page are editable. You can even go so far as to select the text within a pair of <p></p> tags as an editable region. This would allow the user to edit the text within the paragraph and little else.
Using Dreamweaver templates in Contribute
Contribute is fully compatible with Dreamweaver templates and template-based pages. When a Contribute user opens a page for editing, Contribute recognizes and respects the locked and editable regions in a page based on a Dreamweaver template. In fact, the protection afforded locked regions of a template-based page is even greater in Contribute than it is in Dreamweaver because, unlike a Dreamweaver user, the Contribute user doesn't have the option to override the prohibition against editing locked areas by disconnecting the page from the template.
Contribute also fully supports the optional and repeating regions in a Dreamweaver template-based page. Contribute users can choose Format | Template Properties to open a dialog box (Figure A) where they can show or hide the various optional regions in the template.
The control tab for repeating regions (Figure B) looks and works the same in Contribute as in Dreamweaver. The plus and minus buttons enable the Contribute user to add or delete instances of the repeating region, and the up and down arrow buttons allow the user to rearrange their order.
The Contribute site administrator can configure the site to allow Contribute users to create new pages based on the available Dreamweaver templates. The New Pages options (Figure C) even allow the administrator to control which templates a given user group will be able to see.
The templates appear among the options in the Contribute user's New Page dialog box (Figure D). Depending on the settings the administrator established for the user group, the template-based pages may be the user's only choice. Any new template-based pages created in Contribute have the same editing restrictions and automatic update capabilities as template-based pages created in Dreamweaver.
When you launch Contribute, it connects to your site and downloads updated templates and other site information. If you have multiple connections (sites) defined, this process can take awhile. To speed the launch process, try this: Choose Edit | My Connections to open the My Connections dialog box. Select each connection and click Disable. The next time you launch Contribute, it won't attempt to download updates from the disabled sites. To connect to an individual site for editing, go to the site's home page and click Retry Connection. Contribute connects to the site, and you can edit normally.