Understanding Dreamweaver Templates

Although the concept of templates can seem like a broad term, thinking analogously can aid in understanding the framework behind Dreamweaver templates. Think of professions in the real world as examples. For instance, furniture makers use templates to duplicate furniture based on a master design. To add uniqueness to each furniture piece, they may use different dyes or leather colors. Clothing manufacturers create one pattern and base future clothing pieces from the master pattern. Welders create jigs as a way of precisely duplicating curves when welding medal. The list goes on and on. Templates are simply a way for individuals to create a master design or pattern and then derive future designs from that master, effectively ensuring consistency and uniformity across future versions of that design.

The profession of web development is no different. Using the Dorknozzle organization as an example, assume that our organization has numerous departments. Also assume that each department wants to create their own web presence in the Dorknozzle intranet site. Although the overall framework of the site must remain the same, each department is certainly welcome to customize the content that appears on their particular page. This is where templates become useful. As the webmaster, your task is to create one master template file. When that master template file is done, we can base other pages off of that master. For instance, we could create the main page, the help desk page, the employee store page, the company directory page, and the admin page. Even better, we could allow the web developers from each department to derive their own pages off of our template for each of their own department sites. Of course, the obvious benefit here is that this will ensure a consistent look and feel throughout the entire intranet site. The major benefit goes beyond consistency and uniformity and includes maintainability.

Now assume that we need to add a link to the navigational structure of the site. Traditional methods would have us opening every page in our site and manually adding the new link to the navigation menu. Even worse, we would have to ask all web developers in each department to also make the change in their individual websites. Because every developer works a bit differently, this could result in errors within the structure of the navigation menu. Because we've decided to use a template, however, we simply have to make the change in the master template file, update the site, and instantly all pages derived from the template file are edited appropriately. Figure 15.1 illustrates this point. You can begin to see the benefits that templates provide.

Figure 15.1. Numerous pages are based off of a master template, including main intranet pages and inter-department pages.

Dreamweaver templates give you far more flexibility than simply creating a design that acts as a master for other future designs. By default, when a new page is derived from a template file, the regions within the page become locked. Locked portions of the page cannot be edited or changed in the derived page. The idea is to create editable regions in the template file so that, when new pages are derived from the master template file, developers can make changes only to the editable regions, effectively preserving the overall design and structure of the site from accidental modifications. As it stands, Dreamweaver supports four types of regions within a template:

• Editable regions: The simplest way of allowing users to make additions to a template-derived page is to add editable regions. Editable regions allow users of a template-derived page to make changes to all parts of the region including tags and tag attributes within the region.

• Editable attributes: By default, Dreamweaver locks all tags not within editable regions. You could optionally set editable attributes as a way of allowing users to make changes to specific attributes within a locked tag. For instance, you may want to allow users to change the border size of a table while still maintaining the default cell padding and cell spacing.

• Optional regions: As a template designer, you could easily add an optional region to a template. This allows users of a template-derived page to add or not add content to that region. If content is not added to that optional region, the area doesn't consume space when viewed in the browser.

• Repeating regions: As a template designer, you may want to add a repeating region to elements such as tables. This allows users of template-derived pages to add content to tables that vary depending on length. In our case we may want to add a repeating region to the events table. This would allow the various departments in our organization to create their own repeating events tables.

Figure 15.2 shows how these regions might be applied to our Dorknozzle design to create an organization-wide template.

Figure 15.2. Editable, optional, and repeating regions can be added to a template for numerous design options.

Now that you have a visual idea as to how our template might look, let's actually build it!

Creating a New Template

Creating a new template in Dreamweaver is simple. For the most part, it's simply a matter of creating a new blank document and choosing File, Save As Template. Unfortunately, this method won't do us any good because it doesn't contain any graphics that represent the overall design of our Dorknozzle site. In fact, the best method for establishing a template is to simply create a skeleton design as you normally would when creating pages for a site. When you have the design exactly the way you want it, choose File, Save As Template. Dreamweaver converts the document into a DWT (Dreamweaver Template) file and places it in a Templates folder (created automatically for you by Dreamweaver) in your site.

To get you started, go ahead and open the template.htm file included with the files for this project.

NOTE

I'll assume that you're familiar with creating the structure of the Dorknozzle design. Because of space constraints, rather than walking you through the process of rebuilding the design, I've merely included it as a prebuilt page called template.htm. To review the process of creating the page, refer to Chapter 3, "Building a Web Page."

As you can see in Figure 15.3, the design acts as a shell for the content that will eventually appear on the page.

Figure 15.3. The complete design of the Dorknozzle site before saving it as a template.

This page will serve as the overall template for the site. Because this is the case, you don't want to add any content yet. Anything added to the page before it's converted to a template will be locked into any template-derived pages. For now, you simply want to create the structure. Later, we'll add editable regions that define areas where users (developers in other departments in our organization) can add their own content. Now choose the Save As Template option from the File menu. The Save As Template dialog appears (see Figure 15.4).

Figure 15.4. The Save As Template dialog allows you to save a template in a defined site.

The Save As Template dialog allows you to save the page as a template in any defined site. The Save As Template dialog exposes the following functionality:

• Site: Select the defined site with which you want to save the template. By default, Dreamweaver creates a new Templates folder in the defined site (if the folder doesn't already exist) and places the template file in that folder. For our example, choose the Dorknozzle site.

• Existing templates: This list displays the existing templates in the selected site. This list is merely a reference so that you don't accidentally save a template with the same name as one that already exists.

• Description: Provide a brief description about your template in this text box.

• Save as: Enter a value in this text box to uniquely identify your template. This is the name given to the DWT file. For our purposes, name the file template. Later, you'll notice the file has been saved as template.dwt.

To create the new template, click the Save button. Notice that Dreamweaver launches an Update Links dialog. Because newly created templates reside in the Templates folder, Dreamweaver must update any links in the page to coincide with the change. For instance, our navigation menu lists five links that point to index.htm, helpdesk.htm, and so on. Because our template file now resides in the Template folder, the new links should resemble ../index.htm, ../helpdesk.htm, and so on. Rather than doing this manually, Dreamweaver scans the site cache and immediately recognizes the change; it then alerts you with the Update Links dialog, allowing you to let Dreamweaver make the link changes automatically. Click Yes to update all the links in the page.

With the template now created, Notice two changes illustrated by the callouts in Figure 15.5: The new template (template.dwt) is placed directly in the new Templates folder. Furthermore, when a new template is created, Dreamweaver alerts you of its status by placing the <<template>> text directly in the title of the page.

Figure 15.5. Templates are placed in the Templates folder. Dreamweaver alerts you of the page's status by placing the <<Template>> text in the page's title.

With the new template created, you can now start adding editable regions.

Defining Editable Regions

As the template designer, your main task, aside from designing the structure of the template, is to outline areas of the page to which other developers can add content. You can do this by outlining editable regions. In our case, we'll want to add three editable regions: One for the main subheader image that appears at the top of the page, the content that appears below it, and the events subheader that department users can customize according to their departments' names. To add an editable region, follow these steps:

1.	Place your cursor in the first cell of the Content table and choose Insert, Template Objects, Editable Region or press Ctrl+Alt+V in Windows or Command+Option+V on a Mac. Alternatively, you could right-click the cell and choose the New Editable Region option from the Templates submenu of the context menu. Furthermore, you could choose the Editable Region option from the Templates submenu in the Common category of the Insert bar.
2.	Either method you choose to insert a new editable region opens the same New Editable Region dialog. Enter a somewhat descriptive name in the Name text box so that users understand what is supposed to be added in the editable region. I'll type Main Subheading and click OK. By default, Dreamweaver adds the teal visual aid that represents the editable region (see Figure 15.6). Figure 15.6. The teal visual aid represents the editable region in the template. TIP By default, editable regions appear teal in color; however, you can customize these color preferences. If you're working in a teal-colored site and you want to change the color of the editable regions, choose the Highlighting category in the Preferences window and make change as you see fit from the Editable Regions color picker.
3.	Notice that Dreamweaver automatically adds text in the editable region. For the most part, you'll want to make this text descriptive so that developers using the template know what to add in the editable region. Because this editable region is reserved for a subheader image, replace the Main Subheading text with an image placeholder to alert developers to use an image that coincides with their department name. To add the image placeholder, remove the text and choose Insert, Image Objects, Image Placeholder. The Image Placeholder dialog appears.
4.	In the dialog, enter the text Main_Subheading, give the image placeholder a width of 229 and a height of 27, and choose a default color. I'll sample the green from the header image at the top of the page. After you've made the changes, click OK. The new image placeholder is added to the editable region similar to Figure 15.7. Figure 15.7. Insert a new image placeholder in the new editable region.
5.	Now that you have a general idea how editable regions are created, try adding two more on your own. First, create an editable region for the main content that will appear two cells below the editable region you just added. Second, add one more editable region complete with a second image placeholder, two cells above the current events table that represents the department events header developers for each department will add.
6.	When you've finished, save your work. The template, complete with three editable regions, should resemble Figure 15.8. Figure 15.8. Add two more editable regions, one for the main content and another for the second subheader image that will appear for the department events.

Deriving a New Page from a Template

With the new template created and editable regions defined, users can now begin using the template by creating a new instance of the template. Playing the role of the department web developer for this section, we'll do just that. To create a new page based on a template, follow these steps:

1.	Select the New option from the File menu. The New Document dialog appears.
2.	Switch to the Templates tab in the New Document dialog and choose the Dorknozzle site. The only template the Dorknozzle site contains is listed in the Site list. Also notice a preview (see Figure 15.9) that displays an image representation of the template file. Figure 15.9. A preview of the template is displayed in the Preview pane of the New Document dialog.
3.	If you want to maintain a connection between the template-derived page and the template itself, keep the Update Page When Template Changes check box enabled.
4.	Click Create to open a new instance of the template.

The page opens in the Document window but clearly resembles the original template file. Before you assume that you've done something wrong, notice two distinct changes: First, the <<template>> text is no longer in the title bar; instead, you can see the full title of the page, just as for a normal HTML page. Second, if you hover over areas that weren't designated as editable regions, the locked region cursor appears. You'll quickly realize that only areas marked as editable regions allow users to place their cursors inside and make changes. Let's do that now.

Adding Content to Editable Regions

As a user of a template-derived page, we're at the mercy of the template designer. Dreamweaver locks the design of a template, and only the template designer can delegate which areas in the template, marked by editable regions, can be customized. In our template, we've set aside two editable regions for image subheadings (marked with image placeholders) and one editable region for plain text. These are the only areas in the template that the user of the template file can customize. For the most part, place your cursor in the editable region and begin typing. However, other options exist for adding or modifying content in editable regions:

• Select the editable region, in which case the content in the editable region is highlighted. You can then begin typing or simply edit the existing image placeholder so that it uses an image.
  
  
• Place your cursor in the editable regions and select the <mmtinstance:editable> tab in the Tag Selector.
  
  
• Choose the region name from the bottom of the Modify, Templates submenu.
  
  

Whichever method you choose allows you to make changes in the editable region. With that said, assume that we're the web developers for the Engineering department and that we're ready to customize this template-derived page accordingly. To customize the page by adding content to the existing editable regions, follow these steps:

1.	Change the source of the image placeholders in both the Main Subheading and Event Subheading editable regions to point to the header_engineering.gif image and the more generic subheader_events.gif image, located in the Images folder. You can do this by selecting the image placeholder and then dragging the point-to-file icon into the respective image (see Figure 15.10). Figure 15.10. Point the source of the image placeholders to their respective images in the Images folder by using the point-to-file icon.
2.	Remove the existing text from the Main content editable region.
3.	Drag the engineeringcontent.txt file from the Assets folder into the Main content editable region. The Insert Document dialog appears.
4.	Choose the Insert the Contents and the Text Only radio buttons and click OK. The text appears in the editable region, as shown in Figure 15.11. Figure 15.11. Add the content in the engineeringcontent.txt file to the Main content editable region.
5.	Save the page as engineering.htm.

That's all there is to it. So far, we've only added content to editable regions. But as you'll see in the coming sections, adding content to other regions such as optional and repeating regions is just as easy.

Creating an Editable Tag Attribute

Templates seem like a viable option when you want to disseminate a consistent look and feel throughout your organization. The downside to using templates, however, is that you're either locking the entire template (in which case nothing is customizable by a template-derived page), or you're outlining editable regions (in which case, everything in the editable region is customizable). What if you wanted to allow users to customize the background color of the page (the bgcolor attribute of the <body> tag)? This doesn't seem like a far-fetched request; you might want to allow the various departments to customize the background color of their respective pages. Unfortunately, because the template locks the <body> tag, there's really no access to the bgcolor attribute of the tag. Think again! Dreamweaver's second method of defining editable content in templates solves this dilemma.

By defining editable tag attributes, Dreamweaver allows the template designer to precisely control which tags and even which attributes within tags a user of a template-derived page can edit. This functionality is key, especially when you want to allow customizations of attributes such as the bgcolor attribute of the <body> tag that would otherwise be locked by the template. The various types of attributes that Dreamweaver allows you to mark as editable include text, numbers, URLs, colors, and even Boolean values such as the readonly and multiple attributes for form elements. Even better, Dreamweaver makes it easy to customize these attributes by exposing a centralized Editable Tag Attributes dialog that makes the attributes of the selected element available from a drop-down menu. Furthermore, Dreamweaver allows you to edit which attribute values you as the template designer want to expose by the editable attribute. More on this later. For now, let's make an attribute editable. To do this, follow these steps:

1.	If you still have the engineering.htm page open, close it now and open the template.dwt file.
2.	With the template page open, select the <body> tag from the Tag Selector. The entire page highlights.
3.	Choose Modify, Templates, Make Attribute Editable. The Editable Tag Attributes dialog appears, similar to Figure 15.12. Figure 15.12. The Editable Tag Attributes dialog allows you to customize which attributes of the selected tag you want to allow the user of the template-derived page to customize. NOTE By default, the Attribute menu shows the only attribute that's been added to the <body> tag when the template was first created. If an attribute doesn't exist in this menu and you want to add it now, click the Add button. A dialog appears that allows you to add a supported attribute to the <body> tag on the fly. Of course, this process works for any tag.
4.	Click the Add button. When the dialog appears, enter the text bgcolor and click OK.
5.	To ensure that the bgcolor attribute is editable, enable the Make Attribute Editable check box. The Label, Type, and Default text boxes become visible and display the default values associated within those properties.
6.	Because the bgcolor attribute of the <body> tag is a color, choose the Color option from the Type menu. Other selectable options in this menu include: Text: Select this type for attributes that require text-based values such as the <img> tag's alt attribute. URL: Select this type for attributes that require URL-based attributes such as the <a> tag's HRef attribute. Color: Select this type for attributes that require the color picker to become visible such as the bgcolor attribute for the <body> tag. True/False: Select this type for attributes that require true or false values such as the readOnly or multiple attributes for form elements. Number: Select this type for attributes that require numeric values such as the width and height attributes of the <img> tag or the cellspacing and cellpadding attributes of the <table> tag.
7.	Enter the name BgColorAttribute and also enter the #FFFFFF value in the Default text box. Click OK.
8.	Save the template. Dreamweaver recognizes that other pages in the defined site are using this template and asks you to update the template files by displaying an Update Template Files dialog.
9.	Click Update. Dreamweaver presents a log of files that were updated.
10.	Click Close.

You won't notice any changes in Design view, but switching to Code view reveals the addition of the editable attribute as follows:

 <body bgcolor="@@(bgcolor)@@"> 

In this case, Dreamweaver specifies the bgcolor attribute as editable by setting its value to a dynamic parameter (specified by the opening @@ and closing @@ symbols) named bgcolor. Inspecting the <head> tag reveals that that parameter is actually listed in a Dreamweaver comment as follows:

 <! TemplateParam name="bgcolor" type="color" value="#FFFFFF" > 

This TemplateParam tag is used by Dreamweaver to identify the editable attributes and provide their types with a default value.

Setting Editable Attributes

After you've specified which attributes users implementing template-derived pages can customize, Dreamweaver provides a straightforward interface for customizing the properties. Again, let's switch hats and play the role of the Engineering department's web developer. Assuming this role, let's work with the freedom we've just been given by the template designer and customize the background color of the page to a faint grayish color. To do this, follow these steps:

1.	Close all documents that may be open and reopen the engineering.htm page.
2.	With the page open, notice the new menu item located in the Modify menu called Template Properties. Choose it. The Template Properties dialog appears.
3.	In the bgcolor text box, enter the hex value #FAFAFA and click OK. The engineering page's background color is now customized to a faint grayish color.
4.	Save your work.