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
- SQL Server 2012 : Query Optimization (part 2) - Understanding Statistics
- Windows 8 : Customizing the Start Screen (part 5) - Adding Shutdown and Restart Tiles to the Start Screen, Customizing the Start Screen Background
- Sharepoint 2013 : Upgrading to Sharepoint 2013 - Upgrade Considerations (part 2) - What You Can’t Upgrade
- Windows 8 : Getting Around the Windows Desktop - Using the Notification Area (part 1) - Responding to notification messages
- SQL Server 2012 : Delivering Manageability and Performance (part 8) - OTHER MICROSOFT TOOLS FOR MANAGING SQL SERVER - System Center Operations Manager
- Xbox LIVE and Windows 8 (part 3) - Xbox Companion
- Windows Server 2012 : Deploying domain controllers using Windows PowerShell (part 3) - Additional domain controller in domain
- SQL Server 2012 : Delivering A SQL Server Health Check (part 4)
- Windows 8 : Cloud Connections - SkyDrive (part 3) - To access SkyDrive from a browser
- SQL Server 2012 : The XML Data Type (part 1)
Top 10
- Windows 8 : Navigating the Windows 8 Folder Windows (part 2) - Instant Search, The Ribbon, The Navigation Pane
- Windows 8 : Navigating the Windows 8 Folder Windows (part 1) - Folder Navigation
- Windows 8 : Understanding File Types - File Types and File Extensions, File Types and the Registry
- SQL Server 2012 : Other PerfMon Log Analysis Tools - Using SQL Server to Analyze PerfMon Logs
- SQL Server 2012 : Performance Analysis of Logs - Getting Started with PAL
- SQL Server 2012 : Getting More from Performance Monitor (part 2) - Disk or Storage-Related Problems, SQL Server Performance Problems
- SQL Server 2012 : Getting More from Performance Monitor (part 1) - Investigating CPU Problems, Investigating Memory-Related Problems
- Active Directory 2008 : Publishing Active Directory Objects (part 2) - Publishing Shared Folders, Querying Active Directory
- Active Directory 2008 : Publishing Active Directory Objects (part 1) - Publishing Printers
- Windows Phone 8 : Range Controls (part 2) - Progress Indicator, Slider , ScrollBar