Designing Dreamweaver Sites for Contribute Users
Talk about a 'win-win' situation. With Dreamweaver and Adobe Contribute 4, you can now spend more time developing and designing great website experiences while safely delegating content updates to non-technical content contributors.
However, to achieve maximum Dreamweaver and Contribute compatibility, planning is key. Not only should you map out the navigational flow of the site, but also you must plan the architecture of the pages from the ground up. In this article, I'll discuss an overall approach to site creation that allows for optimal Dreamweaver and Contribute integration.
Targeting the Site
Before we can start honing our site pages for Contribute use, let's be clear on what Contribute can and can't do. Contribute is designed to work with static HTML websites, or more specifically, the static portion of web pages. With Contribute, you cannot modify data-driven content.
With this restriction in mind, we can quickly identify areas where the tool is extremely beneficial. For example, a company's public website may be 100% data-driven (and therefore not a good candidate for Contribute), but its intranet may be 100% static HTML. Put Contribute in the hands of the human resources department or the folks responsible for maintaining intranet content, and everyone is happier. The HR people can update the site on their own (without waiting for the web developer), and the web developer is free to focus on what he or she does best—web design.
Overall Site Controls
First things first. When planning a site map, structure the site with access in mind. Start exercising control over a website by restricting access to specific site areas for separate groups.
Through the administrative options (accessible via the Contribute category of Dreamweaver's Site Definition dialog), you can create any number of groups: administrators, human_resources, public_relations, and so on. Each group can be limited to one or more folders. It's important to realize that the folder limitation also includes any subfolders; so create the site structure accordingly. For example, you wouldn't want to put the press release folder in the human resources folder—unless you want the HR group to be able to modify press releases.
You should also decide exactly what you want Contribute users to be able to change. The administrative options offer control over HTML and CSS styling, new page creation, and template use. In addition, you can—and should—set the size for images. While digital cameras are a tremendous boon for getting photographs on the web, they can be a download nightmare if file sizes are left unrestricted. Set the desired limit (in kilobytes) in the New Images category of the Permission Group dialog.
Using SSIs to Lock Page Areas
When designing sites in Dreamweaver for Contribute users, a shift in perception is required. No longer are you designing sites that you or someone in your inner circle can easily modify—knowing what not to change. Your sites must be usable from the contributor's viewpoint as well as the visitor's. This means separating editable from locked areas to achieve the proper balance of flexibility and control. There are two key methods in Dreamweaver to delineate user-modifiable content from areas you don't want the user to be able to change: server-side includes and templates.
A server-side include (SSI) is a terrific way to maintain consistent page elements such as navigation, headers, and footers. In most cases, the content contained in an SSI is not intended to be edited by a content provider, and Contribute will not allow SSI material to be modified inline. The determined user can, however, locate the server-side include file from the Choose File on Website dialog, if they know its name and path. But, if you avoid naming your SSI with an .inc extension, the file cannot be edited in Contribute. By default, Contribute can open the files with the following extensions: .htm, .html, .shtm, .shtml, .asp, .aspx, .ascx, .cfm, .cfml, .php, .php3, .php4, .phtml, .jsp, and .inc.
Files with common system extensions, like .txt or .doc, can be opened with their associated editor. If you choose an extension for your include file that does not fall into either of these categories, such as .ssi, the file is effectively locked from editing in Contribute.
To be effective in Contribute, server-side includes must hew to a particular format. Contribute requires that SSIs not contain any of an HTML page's structural tags, including the HTML, HEAD, and BODY tags. An SSI used in Contribute must consist only of the material found within either the HEAD or BODY tags.
Specifying Template Structures
The other alternative for separating editable from non-editable content in Contribute is to base your pages on Dreamweaver templates. With the release of Dreamweaver MX, templates offer a wide range of designer control. Not only can you make one area editable while locking others, but also you can allow the user to change a single attribute of a tag within an otherwise protected area. Additional abilities include optional content and repeating regions.
The key to designing with Dreamweaver templates for Contribute is to be precise. Where 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. Let's look at an example contrasting the two different techniques.
Figure 1 shows a page with a single editable region. While this page still locks the navigation and other consistent areas, the single editable region provides much more latitude than is needed or desired. In Figure 2, you can see the same page with numerous editable regions applied. Notice that there are separate editable regions for both headings and body text; moreover, when a specific format is needed—as in the 'Selected Headlines: March 1, 2003' heading—only the part that is to be changed is in an editable region.
Figure 1. A page with a single editable region.
Figure 2. The same page with numerous editable regions applied.
When marking a body text area as an editable region, it's important to include at least one tag in the marked region. An included tag allows the contributor to add more paragraphs as needed. When defining an editable area for a headline, it's equally important to select only the contents of the heading, rather than the entire tag. If the entire tag were selected, the user could change an tag to a with no difficulty whatsoever. When you save your template, Dreamweaver warns you that you have an editable region without a tag, but in this case, that's what you want.
Looking closer at Figure 2, you might also notice an optional region that defines a second heading on the bottom of the page. By using this Dreamweaver MX feature, the designer can leave the door open for additional content while maintaining a structured design. The bulleted items on the right side of the page use another advanced template feature: repeating regions. Note that the repeating region is applied to only the final row of the bulleted list. Some designers make the mistake of applying it to the first row, which makes it possible for the content contributor to accidentally remove all the headings by selecting the Remove symbol one too many times.
Although it may take more planning and work to carry out a Contribute-oriented design, the benefits are definitely worth the effort. The designer is no longer hassled to make relatively minor updates; the contributors are able to more completely take control of their own material, and the design itself maintains its integrity—a winning scenario for all concerned.
