Site building with DW's power tools: templates

This work is licensed under a Creative Commons License.

Site building with DW's power tools: Templates

Joseph Lowery | October 07, 2005

Templates are a core tool in Dreamweaver–and one that's gaining in importance and use. Many designers employ templates at the most basic level to ramp up their production efforts; however, an equal number of designers now avoid them because incorrect setup and application left a bad taste. The benefits of templates far outweigh the time required to master them and it's definitely worth understanding how to do them right.

This is the first of a series of tutorials ping into templates. The goal in this article is to demonstrate proper template-building technique from the ground up. With the rise of the Macromedia Web Publishing System and Contribute, Dreamweaver templates are increasingly important. Old-style templates with one giant editable region are insufficient when creating designs intended for the Contribute audience. In this tutorial, you'll also see how to pinpoint your editable regions to maintain the designated styles while still allowing for complete user input.

STEP 1: Create Basic Page

Create or open a page from your site to base your template on. Target your template designs by fashioning templates to serve particular functions. In this example, we'll be working with an Intranet newsletter specifically designed for a human resources department. Choose a page with a layout that's representative of the type of template you want to make. Be sure the page you select includes most of the elements commonly found on these types of pages. For example, our newsletter includes a photo and a pull-quote, as well as the more common elements such as a logo and edition date.

STEP 2: Save as Template

To begin the process of converting a standard page into a template, choose File>Save As Template. In the Save As Template dialog, which lists all the templates in the current site, enter a meaningful name in the Save As field. This makes it possible for other content contributors working with your template designs to quickly identify the desired template. Dreamweaver then asks if you'd like to update links. Click Yes. Updating links within a template is crucial; it's far better to let Dreamweaver manage your links than to try to figure it out yourself.

STEP 3: Mark Initial Editable Regions

Select the body section of the page where content is enclosed in <p> tags-don't include any heading in your selection. From the Insert bar's Common category, click Templates: Editable Region. In the New Editable Region dialog, enter a word or phrase in the Name field that accurately describes the content expected for the area and click OK. Replace the specific text for the current page with instructions that indicate the appropriate type of text, suggested length, and any special instructions. When you wrap an editable region around content with one or more <p> tags, that region can be expanded as needed.

STEP 4: Apply Precise Editable Regions

Switch to Split view so you can see both the page display and code. Select just heading content-make sure you don't select the enclosing tags. From the Insert bar, click Templates: Editable Region, enter an appropriate title in the Name field of the dialog, and click OK to confirm your selection. By putting an editable region around just the text, you're accomplishing two goals: first, the text entered will be styled as the initial design, and second, you're ensuring that only one line of text will be used. An editable region within heading or paragraph tags can't be expanded with more tags.

STEP 5: Style Template Placeholders

Wherever necessary, apply CSS classes to style content. Be sure to include instructions in the placeholder text that tell when the style is to be applied and how. For example, to demonstrate how to create a pull-quote, we both show and tell: a portion of the placeholder text is extracted and styled as a pull-quote and the placeholder content details the required steps. CSS classes should only be used where absolutely necessary; it's better to apply an ID to a container and let the content be styled contextually.

STEP 6: Adding Images and Links to Templates

If images are used in the layout, replace them with placeholder images. Delete the image and then, from the Insert bar's Common category, click Images: Image Placeholder. Set a generic name and the optimum dimensions in the Image Placeholder dialog.

Any links to other pages within the site should be applied by using either the Point to File feature in the Property inspector or the Select File dialog; hand-coding links often leads to an unfound page. The same procedure holds true for any images found in the template: all images or other dependent fi les should be saved outside the Templates folder.

STEP 7: Store the Template

Once you've added all the editable regions required and made sure the rest of the document in the locked areas is suitable, you're ready to save your file. Choose File>Save. Because you've already established the file as a template, there's no need to select Save as Template. Dreamweaver displays an alert informing you that you've placed an editable region inside a or other block tag and that, consequently, new paragraphs can't be made in this region. Click OK to acknowledge the information. (Unfortunately, this alert appears every time you save the template.)

STEP 8: Create Child Page

To begin the process of making a page based on the just-saved template, choose Window>Assets. In the Assets panel, select the Template category from the icons on the left side-Templates is the second icon from the bottom. Control-click (or Right-click if you have a two-button mouse) on the previously stored template's name in the list area and choose New From Template in the shortcut menu. When the new child page appears, choose File>Save to store it. You can save the file anywhere in the site except in the Templates or Library folders.

STEP 9: Working with Child Pages

Make sure Invisible Elements is turned on so you can clearly see the editable regions' names and outlines. If necessary, choose View>Visual Aids>Invisible Elements. Replace any generic placeholder text with the content for the specific page. When adding images within editable regions, scale them to the proper size (if needed) by resizing them visually to the proper dimensions and then choosing Optimize in Fireworks from the Property inspector. When the Optimize dialog opens, click the File tab to verify the new width and height and then choose Update. Save and close the file when you're done.

STEP 10: Applying Template to Existing Page

Sometimes a page is already created and you just want to attach the page to a current template. This allows any updates to the template to be applied to all relevant pages. To handle this situation, open the unattached page and remove all elements except the page-specific content. From the Templates category of the Assets panel, drag-and-drop the desired template onto the page. The Inconsistent Region Names dialog opens to allow you to place existing content correctly. Select the Document body entry and choose the primary editable region from the pop-up menu; for Document head, choose Nowhere.

STEP 11: Cleaning Up Child Pages from Existing Files

Chances are you're going to need to move content from the single editable region it was stored in to various other regions. Working in Split view, cut-and-paste content as needed. If there were any meta tags used in the previous unattached document, copy them and paste them in the editable region named head. Why didn't we do that before? The Inconsistent Region Names dialog moves all the head content and not just meta tags. Save the file under the original name to replace the unattached version. Keep the file open for a later step.

STEP 12: Opening a Template for Alterations

The ease of creating new pages is only half the benefit derived from templates. The other advantage is that locked areas of any template-derived page can be modifi ed by editing a single file: the template. There are several ways you can open a template for editing. If you know the template's name, you can open it from either the Files or the Assets panel by double-clicking on its name. Another approach is to open the file from the associated child page by choosing Modify>Templates>Open Attached Template.

STEP 13: Make Change and Save

Once the template has been opened, you can make any changes you'd like in either the locked or editable areas. Changes made to the locked regions are applied to all existing and future child pages; alterations made in editable regions are only applied to newly created child pages. After you've made all the desired updates, select File>Save and click OK to dismiss the editable region in block tag alert. When the Update Template Files dialog appears, listing all the child pages, click Update. After the operation is complete, click Close in the Update Pages dialog.

STEP 14: Verify

In this exercise, one child page was intentionally left open and the other closed so you could see the effects of a template update. If you switch to the open child page, you'll notice that any changes to the template have been applied- here, a change to the newsletter tag line-but the file needs to be saved. Save the file to complete the update and then open the previously closed child page. Again, all template changes to the locked areas are now transferred to the child page. If any of your pages have been previously published, you'll need to re-put them at this point.

Joseph Lowery is author of the Dreamweaver MX Bible and the Fireworks MX Bible series as well as co-author of the Dreamweaver Killer Tips series. His books are international bestsellers, having sold more than 400,000 copies worldwide in nine different languages.

Top