Ajax Hacks

Giving elements a unique identity

An id attribute is like an ID in real life: to provide a positive method of identification, an id attribute must be unique in the same way as a Social Security number. Once you have assigned an id, you must not reuse it within the same page. You can reuse it elsewhere in the same site, but only once in each page.

Many web designers blithely ignore this rule, because CSS usually works perfectly well even if the same id is used several times on a page. Moreover, in spite of its commitment to generating standards-compliant code, Dreamweaver won't actually stop you from reusing an ID. Behaviors, Spry, and any JavaScript that relies on manipulating the DOM are different: they need to identify the target element accurately. Even if duplicate use of an id attribute works in one browser, you cannot guarantee it will work in others.

r \ When building PHP pages later in the book, you need to remain alert to the problems caused by duplicate IDs. If you put an ID in a loop (Dreamweaver calls it a repeat region), you end up with multiple instances of the same ID and—most likely— JavaScript that no longer works. \_J

The reason for Dreamweaver's inconsistent approach lies in the fact that the id attribute has acquired significance only in recent years through widespread use in JavaScript and CSS. The most logical place to assign the id attribute is the Property inspector, but it's already crammed so full of other attributes, there's not always room to fit a text field for it. However, when there is room, Dreamweaver consistently places the id field at the top left of the Property inspector. You can assign an id through the Property inspector for <img>, <div>, <table>, <form>, and most <input> elements (see Chapter 9 for details about how Dreamweaver treats name and id attributes in forms).

Assigning an id attribute through the Property inspector

The following instructions show you how to assign an id attribute to the image in effects.html from the previous exercise.

1. Select the image of the Golden Pavilion by clicking it in Design view. The Property inspector should look like Figure 2-8. As the figure shows, the field where you set the id attribute is not labeled.

Set id attribute here

Set id attribute here

Figure 2-8. The field for an element's id attribute is not always labeled in the Property inspector.

2. Type pavilion into the field indicated, and press Tab or Enter/Return. The <img> tag in the Tag selector changes to <img#pavilion> to show that the id attribute of the selected image has now been set.

Using the Quick Tag Editor to set an id attribute

If you can't find the field to enter an id in the Property inspector, the simplest way is to use the Quick Tag Editor (this works for all tags). Let's use the page's <hl> element to see how it's done.

1. Continue working with effects.html from the preceding exercise, and position your cursor anywhere inside the <hl> heading that reads Testing Dreamweaver Effects.

2. Right-click the <hl> tag in the Tag selector to open the context menu as shown in the following image:

3. Contrary to what you might expect, do not select Set ID (I'll explain what it does shortly). Click Quick Tag Editor. This opens the <hl> tag in a small Edit tag window, with the cursor immediately to the left of the closing angle bracket, as shown here:

4. Press the spacebar, and Dreamweaver opens a code hint menu with all valid attributes for the tag. As soon as you type i, the menu selects id. Press Enter/Return, and Dreamweaver automatically completes the attribute followed by an equal sign and a pair of quotes, with the cursor between the quotes ready for you to type the attribute's value: pageTitle.

5. Press Enter/Return to close the Edit tag window. The id attribute is now set.

6. Select <h1#pageTitle> in the Tag selector, right-click to access the context menu, and select Set ID. As the following screenshot shows, only two options are shown: None and the current id value, which has a check mark alongside it but is grayed out.

<bodv> [<hl#paqe ii ▼ Properties	Quick Tag Editor... Set Class ►	p , 1-
Format [Heading		111 lit) Ml ill s B
Font Default F	E	Set ID K ►		None
		Convert Inline CSS to Rule?		pageTitle
		Collapse Full Tag Collapse Outside Full Tag	1
			h	-1

Why is this? After all, you have set three id attributes: pavilion, container, and pageTitle. It's because Set ID (and Set Class on the same context menu) are part of Dreamweaver's CSS features. The submenu is intended to work only with ID (or class) selectors that have already been defined in your style rules. We'll take an in-depth look at CSS management in Dreamweaver in Chapter 5.

0 0