Setting an Editable Attribute


Editable attributes are similar to editable regions, but with a more granular level of control. Although an editable region is used to mark one or more page elements (orat the leasta selection of text), an editable attribute is defined to unlock a single attribute in an otherwise locked HTML tag. All the five types of template parameters (Boolean, color, number, URL, and text) are available through the Editable Tag Attributes dialog box. As you'll see in this exercise, you can either make an existing attribute editable or add a new attribute to the tag.

Tip

A selection of text is the smallest element that an editable region can surround.


After an attribute is made editable in the Dreamweaver template, it's altered through the Template Properties dialog box on any child page available to the Dreamweaver or Contribute user. In the exercise, you'll add an editable ID attribute to a heading tag in an optional region of a press release template. The goal is to create a special CSS ID that can be applied to a subheading. This subheading will be used, in some cases, to clearly announce when the information contained in the press release can be made public. Press information that is held in confidence is said to be "under embargo."

1.

From Dreamweaver's Files panel, expand the Templates folder in the site root. Double-click press_release.dwt to open it for editing.

You'll be working with the tag within the optional region called Optional_Subheading. However, before you add the editable attribute, first add a new style to the existing CSS style sheet.

2.

In the CSS Styles panel, expand the bg_ct.css entry to see the available styles, and click New CSS Style. If Dreamweaver asks whether you want to check out the file, click Yes. In the New CSS Style dialog box, choose the Advanced option and enter #embargo in the Selector field; when you're done, click OK. When the CSS Style Definition dialog box opens, click the color swatch next to Color and choose red (#FF0000) from the pop-up color picker. When you're done, click OK to create the style.

Note

Why don't you need to update the CSS filter file, as you did in previous lessons? Because Contribute displays only CSS classes in the Styles list, and IDs such as #embargo are exempt.

Editable attributes can be created only in a locked region; in other words, you can't put an editable attribute in an editable region. The Optional_Subheading region consists of an <h2> tag enclosing an editable region that contains some placeholder text. The editable attribute will be applied to the <h2> tag outside the editable region.

3.

Place your cursor anywhere in the optional region text and select <h2> in the Tag Selector. Choose Modify > Templates > Make Attribute Editable.

When the Editable Tag Attributes dialog box appears, notice that the Attribute drop-down list is empty. The Attribute list displays only those attributes currently found in the selected tag; because <h2> has no attributes at the moment, none are listed. Luckily, the Dreamweaver engineers have provided a way for you to insert new attributes on-the-fly, accessible through the Add button.

4.

In the Editable Tag Attributes dialog box, click Add. When the dialog box opens, enter id in the available field and click OK; Dreamweaver automatically uppercases the attribute for display. Make sure that the Make Attribute Editable option is enabled, and enter embargoID in the Label field. Select Text from the Type list and leave the Default field empty. Click OK when you're done.

In this situation, no default value for the ID attribute is necessary; when Dreamweaver inserts the newly added attribute, it will write it like thiswith an empty string in pages derived from a template: id="".

Although Contribute will note the presence of the editable attribute and include the usual message about template properties, it's always a good idea to provide as much helpful information for your Contribute users as possible. Here, you can easily modify the placeholder text to give clear directions.

You don't even have to go to Code view to see a change in the <h2> tag. If you look at the Tag Selector, you'll see <h2#@@(embargoID)@@>. This same syntax is also used in the code: <h2 >. The double @@ enclosing the term in parentheses denotes a template expression. When Dreamweaver writes the code for the child page, the template expression will be evaluated, and the result will be substituted for the expression. In this particular instance, when the child page is first opened, this template expression evaluates to an empty string, the default value. When a user changes the template parameter value for embargoID to embargo, the tag will read <h2 >, and the CSS will render the style appropriately.

5.

Select the current placeholder text within the subHeading editable region and replace it with the following text: Optional subheading; if necessary, change template properties embargoID to"embargo" .

Your page modifications are now complete, and it's time to transfer the files to the remote site.

6.

Choose File > Save to store the current template file; when Dreamweaver alerts you to the editable region placed inside of a block element, click OK. If Dreamweaver asks whether you want to update pages derived from the template, click Don't Update. From the Document toolbar, choose File Management > Put; if asked whether you want to upload dependent files, click Yes.

As with previous template pages, the best way to test your modifications is to create a temporary child page in Contribute.

7.

In Contribute, click New Page. If you've had Contribute open while working in Dreamweaver, click Refresh Templates when the New Page dialog box opens. Expand the Templates folder under the Design_Deploy site and select press_release. In the Page Title field, enter Test Page and click OK.

You won't initially see the optional region because the subheading is hidden by default; the Template Properties dialog box is your gateway to revealing the optional region and setting the editable attribute to the desired value.

8.

Click the Template Properties link in the message bar at the top of the document window. When the Template Properties dialog box opens, select the Optional_Subheading entry and enable the Show Optional_Subheading option. Click Apply to view the optional region with its default id attribute on the page. Choose the embargoID entry and enter embargo in the selected text field. Click OK when you're done.

The subheading is now displayed with its bright red color, as specified by the CSS style for #embargo. You'll further note that this style option is not available from the drop-down list, providing another degree of control for the designer.

9.

When you're done testing, click Cancel. Confirm that you want to delete the new page by clicking Yes when prompted by Contribute.

Aside from changing the id attribute, you can use editable attributes to modify background colors, change image sources, and modify alternative textamong many other uses.



Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3(c) Training from the Source
Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3: Training from the Source
ISBN: 032128884X
EAN: 2147483647
Year: 2006
Pages: 130
Authors: Joseph Lowery

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net