Figure 7-4: You can save any HTML page as a template in Java

Draw Quick Response Code in Java Figure 7-4: You can save any HTML page as a template

7: Saving Time with Dreamweaver Templates (And More)

6 Click OK in the Dreamweaver dialog box that appears to update links in the template Because your original file probably wasn t saved in the Templates folder, any links to other pages or images must be updated when the file is saved After you click OK, Dreamweaver corrects any links in the file as it saves the file in the Templates folder 7 Make any changes that you want and then choose File Save You edit a template just as you edit any other page in Dreamweaver 8 To create an editable region: a Select any content area, image, or text b Choose Insert Template Object Editable Region (refer to Figure 7-3) The New Editable Region dialog box opens c Give the new region a name You can name the region anything you like just don t use spaces or punctuation The region you define as editable becomes an area that can be changed in any page created from the template You can create multiple editable regions in any template d Click OK The editable region is enclosed in a highlighted area with a tab at the top left, identified by the name you gave the region 9 When you finish designing the page, choose File Save to save your completed template

In addition to making any element in a page editable, you can also make the attributes of any element editable This step is only necessary if you want to make an attribute editable when the tag itself is not editable (for example, when you want the ability to change the background image of a <div> tag, but not the <div> tag itself) Editable attributes are especially handy for making the color of a link editable When you set up a list of navigation links so that you can alter the color of any one link on any page without losing the advantage of the template, you can still update all the links throughout the site by editing the template By making only the color attribute of the link editable, you can change the color of that link when a visitor is on the corresponding page and use the color to identify the section a visitor is currently viewing

To create editable attributes in a template, follow these steps: 1 In any Dreamweaver template, select an item that you want to give an editable attribute In the example shown in Figure 7-5, I selected the navigation link About Us and am in the process of making one of the its attributes editable To make sure you ve selected a link and not just the text, click anywhere in the linked text and then use the Quick Tag Selector at the bottom of the workspace to select the <a> tag 2 Choose Modify Templates Make Attribute Editable The Editable Tag Attributes dialog box appears, as shown in Figure 7-6 3 From the Attribute drop-down list, choose the attribute you want to make editable The attribute options vary depending on whether you select an image, link, text, or other element on the page In this example, I selected HREF to be able to change the color of the link, as shown in Figure 7-6 The link tag is one of the most confusing HTML tags because it s known as the anchor tag, displayed as just an <a> in the Quick Tag Selector But the full tag is <a href>, and in the Editable Tag Attributes dialog box, it s identified as HREF

Figure 7-5: Select any link, image, or other tag and use the Modify menu to make the attributes of that tag editable

7: Saving Time with Dreamweaver Templates (And More)

If the attribute you want isn t listed, click the Add button and then enter the name of any attribute 4 Click to select the Make Attribute Editable check box The options for that attribute become active in the bottom of the dialog box 5 In the Type drop-down list, select an attribute type As shown in Figure 7-6, the link tag has several attributes I selected Color in this example 6 Click OK to make the attribute editable and close the dialog box

Figure 7-6: In the Editable Tag Attributes dialog box, identify which attributes you want to be editable

To change an editable attribute in a page created from a template, follow these steps: 1 Create a new page from the template, or open any page that was created with the template 2 Choose Modify Template properties The Template Properties dialog box opens, listing any editable attributes, as shown in Figure 7-7 3 Select the attribute you want to edit in order to see your options in the bottom of the dialog box To change the color of the link, which I set up as an editable attribute in the preceding steps, I selected href to display the options shown in Figure 7-7 I then clicked the color swatch in the bottom left of the Template Properties dialog box and selected a color