A template is similar to other HTML documents except that certain areas are locked. In fact, the entire template (except the page title) is locked by default; only the editable regions that you create within the template can be changed.
When designing templates, remember:
8.1.1 Starting a Template
Create a template from scratch using File New to open a blank document, or base a template on an existing file by using File Open. Any content you add appears on the pages derived from this template.
Use File Save as Template to save the template. This command opens the Save As Template dialog box, where you should specify the name for the template. You can also specify the site to which the template applies. Dreamweaver gives the template a .dwt extension and saves it in the Templates folder within the specified site's root folder (which is why you specify a filename only and not a folder). The window title bar of a template file contains the word <<Template>>. Saved templates appear in the Templates panel (Window Templates).
8.1.2 Using Images in Templates
If you own Fireworks, you can use it to lay out your template, slice it up (divide it into smaller pieces for optimization), and export it as an HTML table for use in Dreamweaver. (If you don't own Fireworks, I strongly recommend you buy a copy. You can download a trial version from Macromedia's site.) Section 184.108.40.206 explains how to create such a table in Fireworks. Refer also to the Help Lessons Creating Slices tutorial accessible from Fireworks' Help menu.
220.127.116.11 Procedure 3
Figure 8-1 shows an example Fireworks Table and the Property inspector.
Figure 8-1. Fireworks Table imported into Dreamweaver
Although this layout might look good for a single page, it won't work as well if the content on the page varies. Any information that exceeds the dimensions of the original table may distort the layout and ruin the page's composition. To make this layout usable for the addition of text and other images, you'll probably want to remove the image of the dog from the table itself and use it as a background image (using the CSS background-image property described in Table 10-4). You'll also want to merge the remaining cells and remove any white images occupying them. Leave the menu bar and the title graphic alone; they'll become permanent parts of the template. Figure 8-2 shows what the document might look like after you've made these changes. Resave the file as a template using File Save as Template when you're done.
8.1.3 Creating Links in a Template
Links can be added to images or text within templates just as they would be in a standard HTML document. Templates can also use client-side or server-side image maps. Figure 8-2 shows an image map being added to a template.
Figure 8-2. Creating an image map on a template
If you've enabled the Edit Preferences Invisible Elements Client-Side Image Maps checkbox, you'll see a small icon representing the <map> tag for any image maps you create. Move this icon somewhere unobtrusive , such as the bottom of the page, so that it doesn't distract people using the template.
8.1.4 Adding Template Fields
A template's editable regions are areas that allow pages derived from the template to be customized. To add an editable region, highlight an element and use Modify Templates New Editable Region, Ctrl+Alt+V (Windows), or Cmd+Opt+V (Macintosh). In the New Editable Region dialog box, shown in Figure 8-3, provide a Name for the editable region (i.e., template field ) and click OK. Dreamweaver won't allow two regions in a single template to have the same name. The new template field is surrounded by a light blue outline and has a blue tab displaying its name. Repeat this process for each new template field.
Figure 8-3. The New Editable Region dialog box and an editable region highlighted in a document
You can also make an image into an editable region (in which case it is displayed in dark gray). You can highlight existing text and use Modify Templates New Editable Region to make it editable (in DW3, this option was named Mark Selection as Editable). HTML formatting styles applied to a template field serve as the default style for elements inserted in its place, but styles can be modified using HTML (not CSS) during page development.
Editable regions are enclosed in comment tags as seen here:
<!-- #BeginEditable "regionName" -->editable content<!-- #EndEditable -->
Anything between the comments is editable; anything outside the comments is not. In the preceding example, only the text is editable, not the tags that surround it. Note how the following example includes the <p></p> tags within the editable region:
<!-- #BeginEditable "editableParagraph" --> <p>This is a paragraph</p> <!-- #EndEditable -->
When working with a template that uses a table for page layout, you'll probably want to make one or more cells editable regions. To do so, select a <td> tag from the Tag selector and use Modify Templates New Editable Region.
18.104.22.168 Exporting and importing XML content
Templates are similar to XML documents in that they define the structure of a document separate from its contents. A template's editable regions are analogous to XML name/value pairs (the region's name corresponds to the XML attribute's name, and the region's content corresponds to the XML attribute's value). Therefore, Dreamweaver can export data from a template to an XML file and can import data from an XML source into a template.
To export data from a file based on a template to an XML file, use the File Export Export Editable Regions As XML command. Dreamweaver creates a new HTML document that references the original template but contains the contents of the editable regions. (This command is active only when editing a file based on a template. It is not available when editing an ordinary HTML file or when editing a template itself.) You can choose to export the file using standard Dreamweaver XML tags or using the editable region names as XML tags. An example of the former style might look as follows :
<?xml version="1.0"?> <templateItems template="/Templates/Untitled-4.dwt"> <item name="doctitle"><![CDATA[ <title>Untitled Document</title> ]]></item> <item name="region1"><![CDATA[ <p>This is some text</p> ]]></item> </templateItems>
To import data from an XML source, use the File Import Import XML Into Template command. Dreamweaver creates a new HTML document based on the template specified by the XML file and fills in the editable regions with the data in the XML file. This operation is analogous to choosing File New From Template in that it creates a new HTML document based on a template (the difference being that it also fills in the editable fields). To ensure that the XML file follows the correct format, you can first export a dummy file as described in the preceding paragraph and use it as a basis for other XML files.
8.1.5 Saving a Template
Whenever you change a template, you should resave it and update all the documents that use the template. When you resave the template using File Save, Dreamweaver displays a list of pages derived from the current template and asks you whether to update them. Choosing to update the pages opens the Update Pages dialog box shown in Figure 8-4.
Figure 8-4. The Update Pages dialog box
This dialog box can be confusing. When you save a template and choose to update the pages based on it, this dialog box opens automatically and shows the results of the update. You can change the Look In pop-up menu to update an entire site. However, if you close the dialog box and reopen it via Modify Templates Update Pages (or even Modify Library Update Pages), you can choose to update files that use any template (or library item, as seen in Figure 9-4 in the next chapter). Use the dialog box's Start button to commence the update, or simply use the Close button to dismiss it.