Dreamweaver CS5 : Using Dreamweaver Templates - Making Attributes Editable

11/27/2011 9:29:40 AM
Editable regions can encompass any portion of the page, from a single tag up to the entire <body>. But what if you want to make just a portion of a tag — an attribute — editable and keep the rest of the tag locked? I once worked on a site where the client wanted to tie the background color of a table's header row to a graphic on the page. Every couple of weeks, I would get an e-mail asking for help to fix the page — broken while the client was trying to change the one attribute, bgcolor. It was a frustrating situation for both the client and me.

Dreamweaver gives you control over your editable areas right down to the attribute level. Not only can an attribute be made editable, but you can restrict its type and even provide default values. All the editable attributes on a page are displayed within a single dialog box, centralizing updates. Each of the various types of attributes — text, number, URL, color, Boolean — has a specific interface for choosing a value. A color-type attribute, for example, uses a Dreamweaver-style color picker.

To make an attribute editable, follow these steps:

  1. With the template open for editing, select the tag or object that contains the attribute you want to make editable.


    Your selection should be outside an editable region. If you try to change the attribute of a tag within an editable region, Dreamweaver reminds you that this tag is already fully editable.

  2. Choose Modify => Templates => Make Attribute Editable to display the Editable Tag Attributes dialog box, as shown in Figure 1.

  3. Select the desired attribute from the Attribute drop-down list.

    Figure 1. With the Editable Tag Attributes dialog box, you can extend access to any attribute — even a custom one — of any tag in a locked area.

    For quicker editing, make sure your selected tag already contains the attribute you'd like to make editable. The Attribute drop-down list shows all the parameters within a selected tag, whether or not they have values.

  4. If the attribute you want is not available from the drop-down list, click Add and enter the attribute in the pop-up dialog box. After you've confirmed your entry in the pop-up dialog box by clicking OK, your attribute appears in the Attribute drop-down list. New entries are always uppercased in the list, but do not appear uppercased in the code if specified otherwise in the Tag Library Editor.

  5. Select the Make Attribute Editable option. The Make Attribute Editable option may seem redundant in this dialog box, but it enables you to make a number of attributes editable in the same tag while leaving others locked.

  6. Enter a unique name for the tag's editable attribute in the Label field. The Label is used to identify this specific editable attribute and is displayed in the Template Properties dialog box when the attribute is modified. Pick a name that identifies both the tag and the attribute, like logoTableBgColor for the bgcolor attribute of a table containing the logo.

  7. Select a Type from the drop-down list. Here are the five options:

    • Text: Select this type for attributes requiring a text-based value, such as the <img> tag's alt attribute.

    • URL: Choose this type when the attribute value points to a file or requires an Internet address, such as the href attribute of the <a> tag. Designating an attribute as a URL type enables Dreamweaver to update the link if the file is moved or renamed.

    • Color: Use the Color type for those attributes specifying a color value, such as the <tr> tag's bgcolor attribute. The major benefit of identifying color-related attributes as such is the color picker that is made available in the Template Properties dialog box.

    • True/False: Select this type if the attribute is a Boolean, meaning it accepts a value of true or false only — for example, the <embed> tag's hidden attribute.

    • Number: Choose the Number type when an attribute requires a numeric value, such as the <img> tag's height and width attribute.

    If you need to enter a percentage, like 50%, or other value that contains both numbers and other characters, select the Text type for your editable attribute. Although you might think the Number type is more logical, Dreamweaver generates errors when the template is saved with this type entered.

  8. Enter the desired initial value for the attribute in the Default field. If the attribute is already present in the selected tag, the current value is displayed in the Default field. For new attributes, the Default field is initially blank.

  9. Click OK when you're finished.

Editable attributes are noted in the code by surrounding the values with double @ signs, like this:

<img src="@@(monthlyImageSrc)@@" width="100" height="50"

In this example, the <img> tag has two editable attributes, src and align, which are set to variable values: @@(monthlyImageSrc)@@ and @@(monthlyImageAlign)@@, respectively.

You can apply the same editable attribute to different tags. For example, you might want different cells of various tables on the page to share the same bgcolor. Although you can repeat the Make Attribute Editable command for every variable, you might find it more efficient to simply copy and paste the variable value.

When you examine the template file, note two Adobe comments inserted in the <head> section:

<!-- TemplateParam name="monthlyImageSrc" type="URL" value=
<!-- TemplateParam name="monthlyImageAlign" type="text" value="left"-->

These TemplateParam tags are used by Dreamweaver to identify the editable attributes and provide their types and default values.

The default values set in editable attributes are not rendered when viewing the template in the Design view, only in the template-derived document. This is a known bug in Dreamweaver.

- Adobe Photoshop CS5 : Fixing Group Shots the Easy Way
- Adobe Photoshop CS5 : Fixing Reflections in Glasses
- Adobe After Effects CS5 : Color Matching (part 3)
- Adobe After Effects CS5 : Color Matching (part 2) - The Fundamental Technique - Dramatic Lighting & No Clear Reference
- Adobe After Effects CS5 : Color Matching (part 1) - The Fundamental Technique - Ordinary Lighting
- Adobe After Effects CS5 : Color Look Development
- Adobe Fireworks CS5 : Applying the Unsharp Mask Live Filter
- Adobe Fireworks CS5 : Adjusting brightness with the Dodge and Burn tools
- CorelDraw 10 : Adding Graphics to a Page (part 3) - Optimizing images for the Web
- CorelDraw 10 : Adding Graphics to a Page (part 2) - Exporting the rollover graphic
- CorelDraw 10 : Adding Graphics to a Page (part 1) - Creating Rollover Graphics
- CorelDraw 10 : Adding Text to a Web Page
- Adobe Flash Professional CS5 : Transforming Gradients and Bitmap Fills (part 2) - Adjusting scale with the Gradient Transform tool, Setting gradient fill overflow styles
- Adobe Flash Professional CS5 : Transforming Gradients and Bitmap Fills (part 1) - Adjusting the center point with the Gradient Transform tool, Rotating a fill with the Gradient Transform tool
- Adobe InDesign CS5 : Joining Anchor Points & Using the Smooth Tool
- Adobe InDesign CS5 : Splitting Paths
- Adobe Flash Catalyst CS5 : Using design-time data (part 2) - Add and remove elements in the repeated item
- Adobe Flash Catalyst CS5 : Using design-time data (part 1) - Replace design-time images & Edit design-time text
- Adobe Flash Catalyst CS5 : Setting data list properties
- Adobe Illustrator CS5 : Learning the Truth About Transparency (part 2)
Most View
- Windows 7 : Surfing the World Wide Web - Understanding the World Wide Web
- Business Cases for Lync Server 2013 : Why Unified Communications (part 2)
- Windows 8 : Using the Control Panel Items (part 11) - Speech Recognition
- Exchange Server 2013 : The Exchange Management Shell - Verbose PowerShell, Controlling access to Exchange
- Sharepoint 2013 : Building an Application with Access Services (part 5) - Modifying Application Views, Creating a Query
- Setting Up Windows 8 Family Safety (part 5) - Blocking and allowing Apps
- Application Lifecycle Management in SharePoint 2013 : Planning your Customization Model and Release Packaging Approach (part 2) - Release Packaging Approach
- Windows 7 : Protecting Your Files - Simple File Backups
- Windows Server 2012 : Deploying domain controllers using Server Manager (part 3) - Additional domain controller in new domain
- Microsoft Excel 2010 : Automating Repetitive Tasks by Using Macros - Running Macros When a Button Is Clicked
Top 10
- Sharepoint 2013 : Developing Integrated Apps for Office and Sharepoint Solutions - The New App Model for Office
- Overview of Oauth in Sharepoint 2013 : Application Authorization - On-Premises App Authentication with S2S
- Overview of Oauth in Sharepoint 2013 : Application Authorization - Requesting Permissions Dynamically
- Microsoft Excel 2010 : Working with Graphics - Inserting a Diagram,Inserting an Object
- Microsoft Excel 2010 : Working with Graphics - Inserting WordArt, Using Smart Art in Excel
- Microsoft Excel 2010 : Working with Graphics - Using AutoShapes
- Overview of Oauth in Sharepoint 2013 : Application Authentication (part 2) - Managing Tokens in Your Application
- Overview of Oauth in Sharepoint 2013 : Application Authentication (part 1) - Using TokenHelper
- Overview of Oauth in Sharepoint 2013 : Creating and Managing Application Identities
- Overview of Oauth in Sharepoint 2013 : Introduction to OAuth