O'Reilly    
 Published on O'Reilly (http://oreilly.com/)
 See this if you're having trouble printing code examples


Dreamweaver Behaviors - Dreamweaver CS5: The Missing Manual

by David Sawyer McFarland

Chapter 14. Dreamweaver Behaviors

Chapter 6, Images makes clear how easy it is to add mouse rollover effects by using Dreamweaver's Rollover Image object. That and other interactive features rely on scripts (small programs) written in the JavaScript programming language. You've already seen some JavaScript-powered tools like the Spry menu, Spry form validation, and all the cool Spry tricks discussed in the previous chapter.

You could create the same effects without Dreamweaver, but you'd need to take a few extra steps: buy a book on JavaScript; read it from cover to cover; learn concepts like arrays, functions, and the Document Object Model; and spend weeks discovering the eccentric rules governing how different browsers interpret JavaScript code differently.

But Dreamweaver's behaviors let you add dynamic JavaScript programs to your Web pages without doing a lick of programming. Most Dreamweaver behaviors have been around for a long while, but Dreamweaver CS3 added a new set of behaviors called Spry Effects that let you add dazzling visual touches like fading a photo in or out, highlighting a portion of a page with a flash of color, and making a <div> tag appear to shake to catch a visitor's attention.

Dreamweaver CS5: The Missing Manual book cover

This excerpt is from Dreamweaver CS5: The Missing Manual.

This Missing Manual helps you quickly and painlessly master the latest version of this industry-standard web design and management program. Perfect for beginners who need step-by-step guidance and for longtime Dreamweaver masters who need a handy reference, the 7th edition of this bestselling Missing Manual offers jargon-free language and clear descriptions for designing, organizing, building, and deploying websites. It's the ultimate atlas for Dreamweaver CS5.

buy button

Tip

What's that you say? You'd like to read a book on JavaScript? Happy to oblige: JavaScript: The Missing Manual, written by yours truly.

Understanding Behaviors

Dreamweaver behaviors are prepackaged JavaScript programs that let you add interactivity to your Web pages with ease, even if you don't know the first thing about JavaScript. By adding behaviors, you can make your Web pages do things like:

Behavior Elements

To use a behavior, you bring together three elements: an HTML tag, an action, and an event:

  • First, you select an HTML tag to apply the behavior to.

  • Next, pick an action. The action is whatever the behavior is supposed to do—such as open a new browser window or hide an element on the page.

  • Finally, you assign an event to the behavior. The event triggers the action, which usually involves a visitor interacting with your site, like clicking a Submit button on a form, moving the mouse over a link, or even simply loading the web page into the browser.

For instance, say that, when a visitor clicks a link, instead of just sending them to another page, you want a new browser window to pop up and load that linked page. In this case, the HTML tag is the link itself—an <a> tag; the action is opening another browser window and loading a Web page in it; and the event brings the two together so that, when your visitor clicks the link, his browser opens a new window and loads the new page. Voilà—interactivity!

More About Events

When people visit a Web page, they do more than just read it—they interact with it, in all sorts of ways. You already know that when someone clicks a link, the browser reacts by loading a new Web page or jumping to a named anchor.

But visitors can interact with a Web page in a variety of other ways. They may resize the browser window, move the mouse around the screen, make a selection from a pop-up menu, click an image, type inside a form field, or click a form's Reset button. Web browsers "listen to" and react to these triggering events with actions.

In JavaScript and Dreamweaver, events always begin with the word "on," which essentially means "when." For example, the onLoad event refers to the moment when an object fully loads into a browser—that is, when a web page, its images, and other linked files have downloaded. Events also include the various ways someone can interact with a particular HTML tag (element). For instance, when someone moves a mouse over a link or clicks a link, the corresponding events are called onMouseOver and onClick events.

Applying Behaviors

Dreamweaver makes adding behaviors as easy as selecting a tag and choosing an action from a drop-down menu in the Behaviors panel.

The Behaviors Panel

The Behaviors panel is your control center for Dreamweaver's behaviors (Figure 14.1, “Dreamweaver's Behaviors panel lists all the behaviors you applied to the currently selected HTML tag. Because the same event can trigger multiple actions, Dreamweaver groups the actions by event. In this example, the onClick event for an <a> tag (a hyperlink) triggers two actions. When a visitor clicks this hyperlink, a page element appears or fades away (the Appear/Fade effect), and a new browser window opens. The order in which the behaviors occur is determined by their order in this panel. For instance, when a visitor clicks the link in this example, she sees the Appear/Fade effect first, and then a browser window opens. To change the order of these events, use the up- and down-pointing arrows. To change the type of event, click the event name and select a different event from the pull-down menu. If different events trigger all the actions, the order in which they appear in this panel is irrelevant, since the event itself determines when the action takes place, not the order of the event in this panel.”). On it, you can see behaviors that are applied to a tag, add more behaviors, and edit behaviors that you've already applied.

You can open the Behaviors panel three ways:

  • Choose Window→Tag Inspector and click the Behaviors button.

  • Press Shift+F4 to open the Tag Inspector and click the Behaviors button.

  • If the Tag inspector is open, click the Behaviors button.

Note

Dreamweaver includes two types of behaviors, and it's important not to confuse them. This chapter describes JavaScript programs (that is, behaviors) that run in your visitors' web browsers—for that reason, they're called "client-side" programs. Another type of behavior, called server behaviors (they're listed in the Application panel group), run on your website's server and let you access information you store in a database on the server. You'll learn about server-side behaviors in Part Six, “Dynamic Dreamweaver” of this book.

Figure 14.1. Dreamweaver's Behaviors panel lists all the behaviors you applied to the currently selected HTML tag. Because the same event can trigger multiple actions, Dreamweaver groups the actions by event. In this example, the onClick event for an <a> tag (a hyperlink) triggers two actions. When a visitor clicks this hyperlink, a page element appears or fades away (the Appear/Fade effect), and a new browser window opens. The order in which the behaviors occur is determined by their order in this panel. For instance, when a visitor clicks the link in this example, she sees the Appear/Fade effect first, and then a browser window opens. To change the order of these events, use the up- and down-pointing arrows. To change the type of event, click the event name and select a different event from the pull-down menu. If different events trigger all the actions, the order in which they appear in this panel is irrelevant, since the event itself determines when the action takes place, not the order of the event in this panel.

Dreamweaver's Behaviors panel lists all the behaviors you applied to the currently selected HTML tag. Because the same event can trigger multiple actions, Dreamweaver groups the actions by event. In this example, the onClick event for an <a> tag (a hyperlink) triggers two actions. When a visitor clicks this hyperlink, a page element appears or fades away (the Appear/Fade effect), and a new browser window opens. The order in which the behaviors occur is determined by their order in this panel. For instance, when a visitor clicks the link in this example, she sees the Appear/Fade effect first, and then a browser window opens. To change the order of these events, use the up- and down-pointing arrows. To change the type of event, click the event name and select a different event from the pull-down menu. If different events trigger all the actions, the order in which they appear in this panel is irrelevant, since the event itself determines when the action takes place, not the order of the event in this panel.

The currently selected tag is indicated at the top of the Behaviors panel; a list of the behaviors applied to that tag, if any, appears below. Each behavior is listed in two parts: Events and Actions, as described earlier.

The Behaviors panel offers two different views. Switch between them, using the buttons at the upper-left of the panel:

  • "Show set events" (pictured in Figure 14.1, “Dreamweaver's Behaviors panel lists all the behaviors you applied to the currently selected HTML tag. Because the same event can trigger multiple actions, Dreamweaver groups the actions by event. In this example, the onClick event for an <a> tag (a hyperlink) triggers two actions. When a visitor clicks this hyperlink, a page element appears or fades away (the Appear/Fade effect), and a new browser window opens. The order in which the behaviors occur is determined by their order in this panel. For instance, when a visitor clicks the link in this example, she sees the Appear/Fade effect first, and then a browser window opens. To change the order of these events, use the up- and down-pointing arrows. To change the type of event, click the event name and select a different event from the pull-down menu. If different events trigger all the actions, the order in which they appear in this panel is irrelevant, since the event itself determines when the action takes place, not the order of the event in this panel.”) gets down to the specifics: which behaviors you've applied to a tag and which events trigger them. When you work on a web page, this view moves extraneous information out of your way.

  • "Show all events" lists all the events available to a particular tag. This view isn't that useful, since you see a complete list of events for that tag when you select the tag and add an action (see the left side of Figure 14.1, “Dreamweaver's Behaviors panel lists all the behaviors you applied to the currently selected HTML tag. Because the same event can trigger multiple actions, Dreamweaver groups the actions by event. In this example, the onClick event for an <a> tag (a hyperlink) triggers two actions. When a visitor clicks this hyperlink, a page element appears or fades away (the Appear/Fade effect), and a new browser window opens. The order in which the behaviors occur is determined by their order in this panel. For instance, when a visitor clicks the link in this example, she sees the Appear/Fade effect first, and then a browser window opens. To change the order of these events, use the up- and down-pointing arrows. To change the type of event, click the event name and select a different event from the pull-down menu. If different events trigger all the actions, the order in which they appear in this panel is irrelevant, since the event itself determines when the action takes place, not the order of the event in this panel.”).

Applying Behaviors, Step by Step

Open the Behaviors panel, and then proceed as follows:

  1. Select the object or tag you want to assign a behavior.

    You have to attach a behavior to an HTML tag, such as a link (indicated by the <a> tag) or the page's body (<body> tag). Take care, however: It's easy to accidentally apply a behavior to the wrong tag. Form elements, like checkboxes and text fields, are easy to target—just click one to select it. For other kinds of tags, consider using the Tag selector, as described on the section called “The Insert Panel”, for more precision.

    Tip

    You can be sure which tag you've applied a behavior to by looking at the Tag inspector's header (beside the Behaviors button). For example in Figure 14.1, “Dreamweaver's Behaviors panel lists all the behaviors you applied to the currently selected HTML tag. Because the same event can trigger multiple actions, Dreamweaver groups the actions by event. In this example, the onClick event for an <a> tag (a hyperlink) triggers two actions. When a visitor clicks this hyperlink, a page element appears or fades away (the Appear/Fade effect), and a new browser window opens. The order in which the behaviors occur is determined by their order in this panel. For instance, when a visitor clicks the link in this example, she sees the Appear/Fade effect first, and then a browser window opens. To change the order of these events, use the up- and down-pointing arrows. To change the type of event, click the event name and select a different event from the pull-down menu. If different events trigger all the actions, the order in which they appear in this panel is irrelevant, since the event itself determines when the action takes place, not the order of the event in this panel.”, "Tag <a>" indicates that you applied the behaviors listed to an <a>, or link, tag.

  2. In the Behaviors panel, add an action.

    Click the + button in the Behaviors panel and, from the Add Action menu, select the action you wish to add (see Figure 14.2, “Dreamweaver grays out behaviors you can't apply to a currently selected tag. The reason? Your page is either missing a necessary object, or you've selected an object that can't exhibit that behavior. For example, you can't apply the Show-Hide Elements behavior if your page doesn't have at least one tag with an ID applied to it.”). You'll find a list of these behaviors and what they do beginning on the section called “Form Events”.

    Some actions are dimmed in the menu because your web page doesn't include an element that the action can affect. If your page lacks a form, for instance, you won't be able to select the Validate Form behavior. Other behaviors are grayed out because you have to apply them to a particular page element. For example, Jump Menu is off limits until you add a list/menu field to the page and select it.

    Figure 14.2. Dreamweaver grays out behaviors you can't apply to a currently selected tag. The reason? Your page is either missing a necessary object, or you've selected an object that can't exhibit that behavior. For example, you can't apply the Show-Hide Elements behavior if your page doesn't have at least one tag with an ID applied to it.

    Dreamweaver grays out behaviors you can't apply to a currently selected tag. The reason? Your page is either missing a necessary object, or you've selected an object that can't exhibit that behavior. For example, you can't apply the Show-Hide Elements behavior if your page doesn't have at least one tag with an ID applied to it.

  3. In the dialog box that opens, set options for the action.

    Each action has properties specific to that action, and you set them to your liking in the dialog box that now appears. For instance, when you choose the Go To URL action, Dreamweaver asks what Web page you want to load. (Once again, the following pages describe each of these actions.)

  4. Click OK to apply the action.

    At this point, Dreamweaver adds the HTML and JavaScript required to invoke the behavior to your page's underlying code. The behavior's action appears in the Behaviors panel.

    Unlike HTML objects, behaviors usually add code to two different places in a document. For behaviors, Dreamweaver usually adds JavaScript code to the head of the document and to the HTML tag of the target behavior to the body of the page.

  5. Change the event, if desired.

    When your newly created action shows up in the Behaviors panel, Dreamweaver displays—in the Events column of the panel—a default event (trigger) for the selected tag and action. For example, if you add an Open Browser Window behavior to a link, Dreamweaver suggests the onClick event.

    However, this default event may not be the only one available. Links, for instance, can handle many events. An action could begin when your visitor's cursor moves over the link (the onMouseOver event), clicks the link (the onClick event), and so on.

    To change the event for a particular behavior, click the event's name, and the Events pop-up menu appears (see Figure 14.2, “Dreamweaver grays out behaviors you can't apply to a currently selected tag. The reason? Your page is either missing a necessary object, or you've selected an object that can't exhibit that behavior. For example, you can't apply the Show-Hide Elements behavior if your page doesn't have at least one tag with an ID applied to it.”). Select the event you want from the list of available events for that particular tag. (See the section called “A Quick Example” for a list of all available events in current versions of the most popular browsers.)

When you're done, you can leave the Behaviors panel open to add more behaviors to the tag, or to other tags. Select another tag, using the document window or Tag selector, and repeat steps 2 through 5.

Adding Multiple Behaviors

You can have more than one behavior per HTML tag. In fact, you can, and often will, apply several behaviors to the same tag. For instance, when a page loads—the onLoad event of the <body> tag—it can preload images to be used in rollover effects, open a small browser window displaying a (shudder) pop-up advertisement, and highlight a message on a page with a flash of color.

Nor are you limited to a single event per tag—you can add any number of actions to a link triggered by different events, such as onMouseOver, onMouseOut, and onClick. For example, if you set things up for a link as shown in Figure 13.1, “Organize your page's content into easily accessible panels with the Spry Tabbed Panels widget. Clicking a tab opens a new panel's worth of information without the browser having to load a new web page.”, when you click the selected link in the browser window, some element on the page fades into view, and then a new browser window opens, and finally a custom JavaScript program runs. The link also responds to other events, like moving the mouse over it—in this example, making an invisible element appear on the page.

Editing Behaviors

Once you apply a behavior, you can edit it any time. Double-click the behavior in the Behaviors panel to reopen the Settings dialog box, as described in step 3 of the previous instructions. Make any changes you like, and then click OK.

To remove a behavior from your Web page, select it in the Behaviors panel and click the minus sign (–) button or press Delete. (If you accidentally delete a behavior, just choose Edit→Undo Remove Behavior.)

A Quick Example

The brief example below shows you the behavior-creation process. In it, you'll use a behavior that makes an important message appear automatically when a web page opens.

  1. Choose File→New to create a new untitled document.

    You'll start with a new page.

  2. Choose File→Save and save the file to your computer.

    It doesn't matter where you save the page, since you won't be including any graphics or linking to any pages.

    You start the process of adding a behavior by selecting a specific tag—in this case, the page's <body> tag.

  3. In the Tag selector in the lower-left corner of the document window, click <body>.

    Once you select a tag, you can apply one or more behaviors to it. But first, make sure you have the Behaviors panel open. If you don't see it, choose Window→Tag Inspector or press Shift+F4, and then click the Behaviors button.

  4. Click the + button on the Behaviors panel. From the Add Action menu, choose Popup Message (see Figure 14.2, “Dreamweaver grays out behaviors you can't apply to a currently selected tag. The reason? Your page is either missing a necessary object, or you've selected an object that can't exhibit that behavior. For example, you can't apply the Show-Hide Elements behavior if your page doesn't have at least one tag with an ID applied to it.”).

    The Popup Message dialog box appears.

  5. In the message box, type "Visit our store for great gifts!" Then click OK.

    Dreamweaver adds the required JavaScript code to the page. Notice that the Behaviors panel lists the action called Popup Message next to the event called onLoad. The onLoad event triggers an action after a page and everything on it—graphics and so on—have loaded.

    To see the page in action, preview it in a web browser by pressing the F12 (Option-F12) key. (You can also use the Live View feature, described on the section called “Live View”, to see this behavior without leaving Dreamweaver.)

Note

Dreamweaver behaviors rely on little JavaScript programs that run inside a web browser. For security reasons, Internet Explorer doesn't always like running JavaScript programs from your own computer. If the JavaScript you add to a page doesn't work when you preview it in IE, look for a narrow yellow bar just above the page. Click it and follow the instructions to allow the JavaScript on the page to run.

Events

Events are at the heart of interactive web pages. They trigger behaviors based on your visitors' actions, like clicking a link, mousing over an image, or simply loading the page. But not all events work with all tags. For example, the onLoad event only works with Web pages and images, not paragraphs, divs, or any other page element. The Event menu in the Behaviors panel can help: It lists only those events available for the tag you're targeting.

Current browsers—Firefox, Safari, Google Chrome, and Internet Explorer 8—support a wide range of events for many HTML tags. In most cases, you'll find that many of the events listed in the following pages work with all of the tags pictured in Figure 14.3, “This sample web page illustrates HTML tags to which you can attach events. Not shown is the body of the page (the page in its entirety, in other words), whose tag is <body>, and the form portion of the page (see Chapter 12), whose tag is <form>. Whenever you set up a behavior, you should attach it to one of the tags shown here. Today's browsers add events to every tag, so you could add a behavior to a page's level 1 heading or to a paragraph of text, but since those tags usually aren't associated with user interactions (like clicking on a link or mousing over an image), visitors to your site probably won't interact with them.”. Many events work with other tags as well, such as headline, paragraph, and div tags. However, don't go crazy. Making an alert message appear when someone double-clicks a paragraph is more likely to win your site the Hard-To-Use Website of the Month award than a loyal group of visitors.

To help you select a good combination of event and HTML tags, the following pages list and explain the most common and useful HTML tags and events.

Each section shows you the name of the event as you'll see it listed in the Behaviors panel, a plain-English description of what that event really means, and the list of tags to which this event is most commonly applied. See Figure 14.3, “This sample web page illustrates HTML tags to which you can attach events. Not shown is the body of the page (the page in its entirety, in other words), whose tag is <body>, and the form portion of the page (see Chapter 12), whose tag is <form>. Whenever you set up a behavior, you should attach it to one of the tags shown here. Today's browsers add events to every tag, so you could add a behavior to a page's level 1 heading or to a paragraph of text, but since those tags usually aren't associated with user interactions (like clicking on a link or mousing over an image), visitors to your site probably won't interact with them.” for the visual representations of those HTML tags. For example, you'll see that the <select> tag represents a pull-down menu.

Mouse Events

Web designers most often use mouse movement events to trigger actions (like the familiar rollover image). But mouse clicks—on checkboxes, radio buttons, and other clickable form elements—also qualify as mouse events. All current web browsers respond to many of these events when you apply them to most tags—for example, you can trigger a behavior when a visitor moves her mouse over a paragraph of text. Of course, just because you can trigger a behavior doesn't mean you should. Most web surfers aren't accustomed to having things happen when they click on a paragraph or mouse over a headline, for example (but if you want to add an onclick event to a paragraph, check out the tip on the section called “Mouse Events”).

Note

In the following list, you'll see the many different types of input form elements listed like this: <input type="button | checkbox | radio | reset | submit">. This notation simply means that any of these form elements—button, checkbox, radio button, reset button, or submit button—react to the listed event. Also, when you see an <area> tag, it refers to the hotspots on an image map (see the section called “Image Maps”).

onMouseOver

Gets triggered: When the cursor moves over the tag.

Commonly used with these tags: <a>, <area>, <img>

onMouseout

Gets triggered: When the cursor moves off of the tag.

Commonly used with these tags: <a>, <area>, <img>

onMouseMove

Gets triggered: When the cursor moves anywhere inside the tag. Works similarly to onMouseOver, but onMouseOver is triggered only once—when the mouse first moves over the tag. onMouseMove is triggered continually, whenever the mouse moves over the tag. The possibilities for an annoying Web page are endless.

Commonly used with this tag: <body>

onClick

Gets triggered: When a visitor clicks the tag and releases the mouse button.

Commonly used with these tags: <a>, <area>, <input type="button | checkbox | radio | reset | submitonDblClick">

Gets triggered: When a visitor double-clicks the tag.

Commonly used with these tags: <a>, <area>, <input type="button | checkbox | radio | reset | submit">

onMouseDown

Gets triggered: When a visitor clicks the tag. Visitors don't need to release the mouse button for this event to occur (note the contrast with onClick).

Commonly used with these tags: <a>, <img>, <input type="button | checkbox | radio | reset | submit">

onMouseUp

Gets triggered: When a visitor releases the mouse button while the cursor is over the tag. The effect is the same as the onClick event.

Commonly used with these tags: <a>, <img>, <input type="button | checkbox | radio | reset | submit">

Figure 14.3. This sample web page illustrates HTML tags to which you can attach events. Not shown is the body of the page (the page in its entirety, in other words), whose tag is <body>, and the form portion of the page (see Chapter 12), whose tag is <form>. Whenever you set up a behavior, you should attach it to one of the tags shown here. Today's browsers add events to every tag, so you could add a behavior to a page's level 1 heading or to a paragraph of text, but since those tags usually aren't associated with user interactions (like clicking on a link or mousing over an image), visitors to your site probably won't interact with them.

This sample web page illustrates HTML tags to which you can attach events. Not shown is the body of the page (the page in its entirety, in other words), whose tag is <body>, and the form portion of the page (see Chapter 12), whose tag is <form>. Whenever you set up a behavior, you should attach it to one of the tags shown here. Today's browsers add events to every tag, so you could add a behavior to a page's level 1 heading or to a paragraph of text, but since those tags usually aren't associated with user interactions (like clicking on a link or mousing over an image), visitors to your site probably won't interact with them.

Tip

If you do want to add an onmouseover, onclick, or any other mouse event to a tag that people aren't used to clicking on (for example a heading, paragraph, or div) you can create a CSS style for the element and set its cursor property to "pointer" in the Extensions category of the CSS Rule Definition window. This turns the mouse turn into a pointing finger when it's over the element (it's the same icon you see when you mouse over a link).

Keyboard Events

Keyboard events respond to key presses and releases. Most Web designers use them in association with form elements that accept text, such as password or text fields. (See Chapter 12, Forms for more on forms.)

onKeyPress

Gets triggered: When a visitor presses and releases a key while the tag is highlighted.

Commonly used with these tags: <textarea>, <input type="file | password | text">, <a>

onKeyDown

Gets triggered: When a visitor presses a key while the tag is highlighted. The key doesn't need to be released for this event to occur.

Commonly used with these tags: <textarea>, <input type="file | password | text">, <a>

onKeyUp

Gets triggered: When a visitor releases a key while the tag is highlighted.

Commonly used with these tags: <textarea>, <input type="file | password | text">, <a>

Body and Frameset Events

Several events relate to actions involving an entire Web page or frameset.

onLoad

Gets triggered: When a web page and any embedded elements—like images and Flash and QuickTime movies—load. Frequently used to trigger actions when a visitor first loads a page; you can also use it with an image tag to signal when that image has finished loading.

Commonly used with these tags:<body>, <frameset>, <image>

onUnload

Gets triggered: When a web page is about to be replaced by a new page—for instance, just before a browser loads a new page after a visitor clicks a link.

Commonly used with these tags: <body>, <frameset>

onResize

Gets triggered: When a visitor resizes the browser window.

Commonly used with these tags: <body>, <frameset>

onError

Gets triggered: When an error occurs while a browser tries to load a web page or image.

Commonly used with these tags: <body>, <img>

Note

The onFocus and onBlur events described in the following section also apply to the <body> and <frameset> tags.

Selection and Highlighting Events

Some events occur when the visitor focuses on different parts of a Web page, selects text, or chooses from a menu.

onChange

Gets triggered: When a visitor changes the text in a form field.

Commonly used with these tags: <textarea>, <input type="file | password | text">, <select>

onFocus

Gets triggered: When an element becomes the focus of the visitor's attention. For instance, clicking in a form text field or tabbing to it gives the text field focus. Also applies to a link when a visitor presses the tab key to reach the link (see the Note on Note).

Commonly used with these tags: <a>, <body>, <frameset>, <textarea>, <input type="button | checkbox | file | password | radio | reset | submit | text">, <select>

onBlur

Gets triggered: When an element loses focus. For instance, if a visitor types into a form text field and then clicks outside of that field, the onBlur event occurs. The Spry Validation tools (see the section called “Validating Forms”) can use this event to validate text fields. The onBlur event is also triggered when a visitor sends a window to the background. Suppose your visitor is reading your Website in one window and has another one open in the background. If he clicks the background window, the current page loses focus and an onBlur event occurs.

Commonly used with these tags: <body>, <frameset>, <textarea>, <input type="button | checkbox | file | password | radio | reset | submit | text">, <select>

Form Events

While each element of a form (radio button, text field, checkbox) can respond to a variety of events, the whole form—the entire collection of elements—can respond to only two events:

onSubmit

Gets triggered: When a visitor clicks the Submit button on a form.

Commonly used with this tag: <form>

onReset

Gets triggered: When a visitor clicks the Reset button on a form.

Commonly used with this tag: <form>

The Actions, One by One

While events get the ball rolling, actions are, yes, where the action is. Whether it's opening a 200 x 200 pixel browser window or slowly fading in a photograph, you'll find an action for almost every interactivity need.

In some cases, alas, the actions aren't very good. Dreamweaver CS5 is still saddled with behaviors that were created for (and haven't been updated since) Dreamweaver 4. Although Spry Effects—part of the much newer Spry Framework discussed in the last chapter—offer a fresh set of behaviors to play with, Adobe has only weeded out a few behaviors that aren't very useful or that don't work well. This book makes clear which are the rotten eggs you want to steer clear of.

After you complete the steps required to set up an action as described on the section called “Applying Behaviors, Step by Step”, the new action appears in the Behaviors panel, and your Web page is ready to test. At that point, you can click the behavior's name in the Behaviors panel, where—by clicking the Events pop-up menu, as shown in Figure 14.1, “Dreamweaver's Behaviors panel lists all the behaviors you applied to the currently selected HTML tag. Because the same event can trigger multiple actions, Dreamweaver groups the actions by event. In this example, the onClick event for an <a> tag (a hyperlink) triggers two actions. When a visitor clicks this hyperlink, a page element appears or fades away (the Appear/Fade effect), and a new browser window opens. The order in which the behaviors occur is determined by their order in this panel. For instance, when a visitor clicks the link in this example, she sees the Appear/Fade effect first, and then a browser window opens. To change the order of these events, use the up- and down-pointing arrows. To change the type of event, click the event name and select a different event from the pull-down menu. If different events trigger all the actions, the order in which they appear in this panel is irrelevant, since the event itself determines when the action takes place, not the order of the event in this panel.”—you can change the event that triggers it.

Spry Effects

Spry Effects are a relatively new addition to Dreamweaver's arsenal of behaviors. They first appeared in Dreamweaver CS3 and are sophisticated visual effects that can do things like highlight elements on a page, make a photo fade in, or shake an entire sidebar of information like an earthquake. They're mostly eye candy and work well when you want to draw attention to an element on a page, or create a dramatic introduction. It's easy to abuse these fun effects, however: If every part of your page blinks, shrinks, shakes, and flashes, most visitors will quickly grow tired of your page's nonstop action.

Spry Effects are part of Adobe's Spry Framework, which you read about in-depth in the previous chapter and have encountered when learning about the Spry menu bar and Spry Validation widgets. To use a Spry Effect, you first have to apply an ID to the "target" element—the part of the page you wish to affect. Every effect, except Slide, can target any element (an <img> tag, for instance, for an image). (The Slide effect can target only a <div> tag.)

You're probably thinking of IDs as something you'd use when creating the kinds of CSS layouts discussed in Chapter 9, Page Layout. True, IDs are often associated with Cascading Style Sheets as a way of formatting a unique element on a page. However, IDs are also handy when you want to use JavaScript to add interactivity to a page. In fact, you can add IDs to HTML without ever creating any associated ID styles using CSS.

Recall that the HTML ID attribute marks a tag with a unique name. You can apply CSS to that tag using an ID style, but you can also control that tag using JavaScript. How you apply an ID to a tag differs depending on the tag, but here are the most common techniques:

  • Div tags. Assign an ID to a div using the Property inspector. Just select the <div> tag and then use the ID field in the Property inspector to give it a unique name. In addition, you can wrap any collection of HTML tags (or even a single element, like an image) inside a <div> tag and apply an ID at the same time using the Insert Div Tag tool (see the section called “The Insert Div Tag Tool”).

  • Images. When you select an image in the document window, you can type an ID for that image in the Property inspector's ID box (see Figure 6.7, “The Property inspector shows the selected graphic's dimensions, source, alignment, border, and margins. To the left of the file size (33K), you see either Image (meaning a regular GIF, PNG, or JPEG file) or PS Image (meaning the image is coming from a Photoshop document).”).

  • Forms. Select the form and type an ID in the ID field on the left edge of the Property inspector (see Figure 12.3, “Unless you're creating a search form, you'll generally want to use the POST method of sending data to the server. See step 7 for more details.”).

  • Form fields. When you insert a form field, you can set the field's ID in the Input Tag Accessibility Options window (see Figure 12.5, “This window appears when you're inserting a form element. If you don't see it, you or someone else has turned off Dreamweaver's factory setting to automatically launch this window. To summon it, choose Edit Preferences (Dreamweaver→Preferences), click the Accessibility category, and then turn on the Form Objects checkbox.”). You can later set or change a field's ID by selecting it and then using the ID field on the left edge of the Property inspector.

  • Other elements. To add an ID to paragraphs, headlines, bulleted lists, and other tags, select the tag and then type a name in the ID field (see Figure 4.5, “The easiest way to apply a class style is through the Property inspector. For non-text elements like images or tables, a Class menu appears in the top right of the Property inspector. For text, you apply class styles by using either the Class menu if the Property inspector is in HTML mode (top) or the Targeted Rule Menu when it's in CSS mode (bottom). Dreamweaver uses only the bottom section of the Targeted Rule Menu (the stuff below "Apply Class") to add (or remove) a class from a text selection. The other items listed let you create new styles, or view the styles that apply to the selection.”).

After you apply an ID to the target, you then add a Spry Effect behavior to a tag (usually some tag other than the target) which then triggers the effect. For example, you may want the site's banner image to emerge on the page after the Web page loads. The target is the banner image, but you apply the Spry Effect behavior to the <body> tag using the onLoad event (the section called “Keyboard Events”). Any of the tag/event combinations discussed inthe section called “Events” on page 587 will work.

Appear/Fade

To make an element fade in or out, use the Appear/Fade effect. To add a dramatic introduction to your site, you can fade in a large photograph on your site's home page after the page loads. Or you can have an "Important Announcement" box disappear when a visitor clicks it.

To use this effect:

  1. Select the tag that you want to trigger the fade in or out.

    For example, you could pick a link that triggers the effect, or you could use the <body> tag coupled with the onLoad event (the section called “Keyboard Events”).

  2. From the Actions list on the Behavior panel, choose Effects→Appear/Fade.

    The Appear/Fade window appears (see Figure 14.4, “Use the Appear/Fade effect to make an element fade from a page, or have a photograph fade into view on your site's home page.”).

  3. Select a target element from the first menu.

    Here's where you specify which page element should appear or fade away. The menu lists every tag on the page that has an ID applied to it. In addition, you may see <Current Selection> listed, which refers to the tag you selected in step 1. Choose this option if you want to apply the behavior to any that contains some kind of message—like "We'll be closed February 2nd to celebrate Groundhog's Day!" When a visitor clicks this <div> tag, it fades away.

    Figure 14.4. Use the Appear/Fade effect to make an element fade from a page, or have a photograph fade into view on your site's home page.

    Use the Appear/Fade effect to make an element fade from a page, or have a photograph fade into view on your site's home page.

  4. Type an amount in the "Effect duration" field.

    This setting controls how long the fade in or out lasts. The duration is measured in milliseconds, so entering 1000 gets you 1 second. If you want the target element to appear or disappear immediately, enter 0.

    Tip

    If you're just after a simple hide/show type of effect without the fancy animation (and large file size) of the Spry Effects, see the instructions for the Show/Hide behavior on the section called “Text of Frame”.

  5. Choose the type of effect—Fade or Appear—from the Effect menu.

    If you want the target element to fade into view, it must be hidden to begin with. Otherwise the fade in effect looks really weird: first you see the photo, then you don't, and then it fades in. To make the element invisible, add (or edit) a style for the target element, and then use the CSS display property (the section called “Block Properties”). Set the display property to none.

  6. Type a percentage amount in the "from" and "to" fields.

    Depending on which type of effect (Appear or Fade) you selected, you'll see either "Appear from" or "Fade from" and "Appear to" or "Fade to" in the Appear/Fade window. These two fields let you define the opacity of the target element. You'll commonly type 100 in the "Fade from" field and 0 in the "Fade to" field. Doing so makes the image fade completely out of view. However, if you like ghostly apparitions, you can fade from 100 percent to 25 percent, which makes a solid element become transparent.

  7. Optionally, turn on the "Toggle effect" checkbox.

    This option turns the trigger tag into a kind of light switch that lets you fade the element in and out. Say you added an absolutely positioned div to a page that contains helpful hints on getting the most out of your website. You could then add a link that said "Show/hide hints." Add the Appear/Fade effect, target the AP div, and turn on the "Toggle effect" checkbox. Now, when a visitor clicks that link, the div fades into view (if it were hidden) or fades out of view (if it were visible).

  8. Click OK to apply the behavior.

    Once you add the effect to a tag, you can edit or delete it just as you can any other behavior; see the section called “Adding Multiple Behaviors” for details.

Blind

Don't worry: The Blind effect won't hurt your eyes. It's actually just a way of simulating a window blind—either being drawn closed over an element to hide it or opened to reveal an element. The basic concept and functionality is the same as the Appear/Fade effect: It lets you hide or reveal an element on a page. Follow the basic steps described in the previous section for Appear/Fade.

Once you select Blind from the Effects menu in the Behaviors panel, you can control all the basic elements of this effect from the Blind dialog box (Figure 14.5, “The "from" and "to" fields can also hide or reveal just a portion of a div. If you set "Blind down from" to 0 percent and "Blind down to" to 50 percent, the effect will begin to reveal the contents of the div starting at the top and then it stops at the halfway mark—in other words, the bottom half of the div will still be invisible.”).

Use the Effect pull-down menu to choose in which direction the blind moves. If you want to display a hidden element on the page, choose "Blind down". To make an element disappear, choose "Blind up". This behavior is totally counterintuitive—you'd think raising a blind upward would actually reveal something. Fortunately, you can choose either direction for both revealing or hiding an element; the key is entering the correct percentage values in the "from" and "to" fields (Figure 14.5, “The "from" and "to" fields can also hide or reveal just a portion of a div. If you set "Blind down from" to 0 percent and "Blind down to" to 50 percent, the effect will begin to reveal the contents of the div starting at the top and then it stops at the halfway mark—in other words, the bottom half of the div will still be invisible.”). If you wish to hide an already visible element, then type 100 in the "from" field and 0 in the "to" field.

To make an element appear, you first need to set its display property (the section called “Block Properties”) to none by creating a CSS style for the target element. Next, apply the Blind effect to a tag (for example, a link or the <body> tag), and then select the direction you wish the blind to move (up or down) from the Effect menu. Finally, type 0 in the "from" field and 100 in the "to" field. The "Toggle effect" checkbox reverses the effect when a guest triggers the event again. For example, a link clicked for the first time might reveal a photo on the page; when clicked again, the photo disappears.

Figure 14.5. The "from" and "to" fields can also hide or reveal just a portion of a div. If you set "Blind down from" to 0 percent and "Blind down to" to 50 percent, the effect will begin to reveal the contents of the div starting at the top and then it stops at the halfway mark—in other words, the bottom half of the div will still be invisible.

The "from" and "to" fields can also hide or reveal just a portion of a div. If you set "Blind down from" to 0 percent and "Blind down to" to 50 percent, the effect will begin to reveal the contents of the div starting at the top and then it stops at the halfway mark—in other words, the bottom half of the div will still be invisible.

Grow/Shrink

The Grow/Shrink effect is another "now you see it, now you don't" type of effect. With it, you can make a photo, a paragraph, or a div full of content grow from a tiny speck on the screen to its full size, or you can make an element disappear by shrinking it into nothingness. The basic setup is the same as with the Appear/Fade effect described on the section called “Appear/Fade”. The Grow/Shrink window (Figure 14.6, “The "Grow from" menu ("Shrink from" if you selected the Shrink effect) determines the point on the page from which the element begins its growth on its way to achieving its full size. You can either make the element grow from its center or from its top-left corner. The "center" option makes the element appear to come straight at you (or recede straight from you when you select Shrink).”) lets you target any element with an ID, set a duration for the effect, and then select whether to make the element appear (grow) or disappear (shrink). You can also have an element grow or shrink to a percentage of its full size. However, unless you target an image, displaying an element at less than its full size is usually unattractive and unreadable.

Tip

You can combine multiple types of effects for a single target element. For example, you could make a photo fade into view when a page loads, shake when a visitor moves his mouse over it, and even slide out of view when your visitor clicks a link. However, be careful when you assign multiple effects to the same event on the same element. If you add a Grow/Shrink effect and a Shake effect, both targeting the same element and using the same event, you won't see the element grow and then shake—you'll see it shake as it grows. In other words, the effects happen simultaneously (and usually bizarrely) instead of one after the other.

Highlight

Adding a background color to a paragraph, headline, or div is one way to create visual contrast and make an important piece of information stand out. A red box with white type will draw the eye quicker than a sea of black type on a white page. But if you really want to draw someone's attention, use the Highlight effect. Highlighting an element lets you add a flash of bright background color to it. For instance, on a form, you may have an important instruction for a particular form field ("Your password must be 10 characters long and not have !, #, or $ in it"). You could add the Highlight effect to the form field so that when a visitor clicks in the field, the instruction's background color quickly flashes, ensuring that the visitor sees the important information.

Figure 14.6. The "Grow from" menu ("Shrink from" if you selected the Shrink effect) determines the point on the page from which the element begins its growth on its way to achieving its full size. You can either make the element grow from its center or from its top-left corner. The "center" option makes the element appear to come straight at you (or recede straight from you when you select Shrink).

The "Grow from" menu ("Shrink from" if you selected the Shrink effect) determines the point on the page from which the element begins its growth on its way to achieving its full size. You can either make the element grow from its center or from its top-left corner. The "center" option makes the element appear to come straight at you (or recede straight from you when you select Shrink).

As with other Spry Effects, you use the Behaviors panel to apply the Highlight effect to some triggering element (like a form field you click in, or a link you mouse over). Then set options in the Highlight window (see Figure 14.7, “The "Toggle effect" checkbox lets you fade in a background color with a single action (for example, the click of a link) and then fade the background color out when the same event occurs again (when a guest clicks the same link a second time, for instance). But for it to look good, make sure the Color After Effect is the same as the End Color. Otherwise, the second time your visitor triggers the highlight (when he toggles the effect, in other words) the background won't fade smoothly back to the start color.”): a target element (any tag with an ID), the duration of the effect, and background colors.

Colors work like this: The Start Color is the background color of the target element when the effect begins. The background subsequently fades from the Start Color to the End Color (time the duration of the fade using the "Effect duration" setting). Finally, the End Color abruptly disappears and the Color After Effect replaces it. The general settings suggested by Dreamweaver when you apply the effect aren't so good: white, red, white. Assuming the background color of your page is white, you don't get so much of a flash effect as a "fade-to-a-color-that-immediately-disappears" effect. The effect looks a lot better if you set the Start Color to some bright, attention-grabbing, highlight color, and the End Color to match the background of the target element. Then the effect looks like a bright flash that gradually fades away.

However, instead of a flash, you may want an element's background to slowly fade to a different color and stay that color. In that case, set the Start Color to match the target element's current background, and use the same color for both End Color and Color After Effect.

Shake

The Shake effect is like adding an earthquake to a web page. The target element shakes violently left to right for a second or so. And that's all there is to it. When you apply this behavior, you have just one option: which element on the page to shake. You can shake any element with an ID—a div or even just a paragraph. It's kind of a fun effect…once…and maybe just for kids.

Figure 14.7. The "Toggle effect" checkbox lets you fade in a background color with a single action (for example, the click of a link) and then fade the background color out when the same event occurs again (when a guest clicks the same link a second time, for instance). But for it to look good, make sure the Color After Effect is the same as the End Color. Otherwise, the second time your visitor triggers the highlight (when he toggles the effect, in other words) the background won't fade smoothly back to the start color.

The "Toggle effect" checkbox lets you fade in a background color with a single action (for example, the click of a link) and then fade the background color out when the same event occurs again (when a guest clicks the same link a second time, for instance). But for it to look good, make sure the Color After Effect is the same as the End Color. Otherwise, the second time your visitor triggers the highlight (when he toggles the effect, in other words) the background won't fade smoothly back to the start color.

Slide

The Slide effect is just like the Blind effect. But instead of a "blind" moving over an element to hide it, or moving off an element to reveal it, the element itself moves. Say you have a <div> tag that contains a gallery of photos. If you target that div with a "slide up" effect, the images all move upwards and disappear at the top edge of the div. Think of the <div> as a kind of window looking out onto the photos. When the photos move up past the "window", you can't see them any longer.

Note

You can only use the slide effect on div tags that have IDs. You can't use it on, for example, just an image with an ID.

You can make an element slide up or slide down using the Effect menu in the Slide window (Figure 14.8, “The Slide effect works just like the Blind effect described on page 595. The only difference is that the element itself moves and disappears (as opposed to a blind being drawn over the element).”). And, as with the Blind effect, to make an element disappear, type 100 in the "from" field and 0 in the "to" field. To make an element slide either up or down and appear on the page, first create a style for the element's ID, and then apply the Slide behavior to some other element (a link or the body tag, for instance). Finally, type 0 in the "from" field and 100 in the "to" field.

Squish

The Squish effect offers no options other than selecting a target element. The effect hides an element by shrinking it down until it disappears. It behaves exactly like the Grow/Shrink effect (the section called “Grow/Shrink”) with the Shrink effect selected (see Figure 14.6, “The "Grow from" menu ("Shrink from" if you selected the Shrink effect) determines the point on the page from which the element begins its growth on its way to achieving its full size. You can either make the element grow from its center or from its top-left corner. The "center" option makes the element appear to come straight at you (or recede straight from you when you select Shrink).”). Since it doesn't provide any timing controls, you're better off sticking with the more versatile Grow/Shrink effect.

Figure 14.8. The Slide effect works just like the Blind effect described on page 595. The only difference is that the element itself moves and disappears (as opposed to a blind being drawn over the element).

The Slide effect works just like the Blind effect described on page 595. The only difference is that the element itself moves and disappears (as opposed to a blind being drawn over the element).

Navigation Actions

Dreamweaver offers a host of navigational aids you can add to your pages to give visitors customized alternatives to the simple click-and-load approach of getting around a basic site.

Open Browser Window

Sometimes, when a visitor action opens a new browser window, you want to dictate the size of that window. If you have a link to a "Sign up for our newsletter form", for example, you may want to open the sign-up page in a window that matches the exact width and height of the form. Or, when a visitor clicks on a thumbnail image, you may want to open a new window with the exact dimensions of the full-size photo—and skip all the distracting browser "chrome," like the location bar, status bar, toolbar, and so on.

Enter Dreamweaver's Open Browser Window action (Figure 14.9, “You, too, can annoy your friends, neighbors, and website customers with these unruly pop-up windows. Just add the Open Browser Window action to the <body> tag of your document. Now, when that page loads, a new browser window opens with the ad, announcement, or picture you specify. To be even more annoying, use the onUnload event of the <body> tag to open a new browser window—with the same web page—when your visitors try to exit the page. They won't be able to get to a different page, and may even encounter system crashes. Now that's annoying! Fortunately, most current web browsers prevent these kinds of automatic window-opening tricks, and will only open a new browser window when your visitor clicks a link.”). Use this behavior to tell your visitor's browser to open a new window to a height and width you desire. In fact, you can even dictate what elements the browser window includes. Don't want the toolbar, location bar, or status bar? No problem; this action lets you include or exclude the frills.

To open a new browser window, you start, as always, by selecting the tag to which you want to attach the behavior. You can attach it to any of the tags discussed on the section called “A Quick Example”, but you usually want to add it to a link with an onClick event, or to the <body> tag with the onLoad event.

Note

Most browsers have pop-up blockers. This nifty feature prevents a browser from opening a new browser window unless the visitor initiates the request. In other words, you probably won't be able to open a new browser window when a page loads in the current window, but you can open a new browser window based on a visitor's action—like clicking a link.

Once you select this action from the + menu in the Behaviors panel, you see the dialog box shown in Figure 14.10, “Here, you can define the properties of the new window, including what Web page loads into it, its dimensions, and so on. If you leave the "Window width" and "Window height" properties blank, you'll get different results in different browsers. In Firefox, Opera, and Google Chrome, you won't get a new window; the page will open up a new tab. In Safari and Internet Explorer, you'll get a new window that is the same size as the window it opens from.”. Specify the following options:

  • URL to display. In this box, type in the URL or path of the page you want to load, or click Browse and find the page on your computer (the latter option is a near-foolproof way to ensure functional links). If you're loading a web page on somebody else's site, don't forget to type in an absolute URL, one beginning with http:// (see the section called “Absolute Links”).

    Figure 14.9. You, too, can annoy your friends, neighbors, and website customers with these unruly pop-up windows. Just add the Open Browser Window action to the <body> tag of your document. Now, when that page loads, a new browser window opens with the ad, announcement, or picture you specify. To be even more annoying, use the onUnload event of the <body> tag to open a new browser window—with the same web page—when your visitors try to exit the page. They won't be able to get to a different page, and may even encounter system crashes. Now that's annoying! Fortunately, most current web browsers prevent these kinds of automatic window-opening tricks, and will only open a new browser window when your visitor clicks a link.

    You, too, can annoy your friends, neighbors, and website customers with these unruly pop-up windows. Just add the Open Browser Window action to the <body> tag of your document. Now, when that page loads, a new browser window opens with the ad, announcement, or picture you specify. To be even more annoying, use the onUnload event of the <body> tag to open a new browser window—with the same web page—when your visitors try to exit the page. They won't be able to get to a different page, and may even encounter system crashes. Now that's annoying! Fortunately, most current web browsers prevent these kinds of automatic window-opening tricks, and will only open a new browser window when your visitor clicks a link.

  • Window width, Window height. Next, define the width and height of the new window. Specify these values in pixels; most browsers require a minimum window size of 100 x 100 pixels. Also, if the width and height you specify are larger than the available space on the visitor's monitor, the window fills the monitor (but won't ever generate a wider or taller window).

  • Attributes. Turn on the checkboxes for the elements you want the new window to include. Figure 14.11, “The parts of a browser window. Note: The menu bar only appears as part of the browser window on Windows machines. On Macs, the menu bar appears at the top of the screen and can't be hidden; in addition, the Safari browser won't hide the resize handle or the scroll bars (if they're needed).” shows the different pieces of a standard browser window. Note that in most browsers, you can't really get rid of the resize handle, so even if you leave that option unchecked it still appears and a visitor will still be able to resize the window.

    Figure 14.10. Here, you can define the properties of the new window, including what Web page loads into it, its dimensions, and so on. If you leave the "Window width" and "Window height" properties blank, you'll get different results in different browsers. In Firefox, Opera, and Google Chrome, you won't get a new window; the page will open up a new tab. In Safari and Internet Explorer, you'll get a new window that is the same size as the window it opens from.

    Here, you can define the properties of the new window, including what Web page loads into it, its dimensions, and so on. If you leave the "Window width" and "Window height" properties blank, you'll get different results in different browsers. In Firefox, Opera, and Google Chrome, you won't get a new window; the page will open up a new tab. In Safari and Internet Explorer, you'll get a new window that is the same size as the window it opens from.

  • Window name. Give the new window a name (using letters and numbers only). If you include spaces or other symbols, Dreamweaver displays an error message and lets you correct the mistake. The name won't actually appear on your web page, but it's useful for targeting links or actions from the original window.

Once you set up the Open Browser Window action, you can load web pages into the new window from the original page; simply use the name of the new window as the link's target. For example, you could add the Open Browser Window behavior to a link labeled "Open photo gallery" that, when clicked, opens a small new window showcasing a photo. You could include additional links on the main page that load additional photos into the small window.

If you use more than one Open Browser Window behavior on a single page, make sure you give each new window a unique name. If you use the same name, your page might retain the first new window's settings and you might not get the width, height, or other settings you want in the new window.

When you click OK, your newly created behavior appears in the Actions list in the Behaviors panel.

Go to URL

The Go to URL action works just like a link does—it loads a new web page. However, while links work only when you click them, Go to URL can load a page based on an event other than clicking. For instance, you may want to load a page when your visitor's cursor merely moves over an image, or when she turns on a particular radio button.

Once you select a tag and choose this action's name from the + menu in the Behaviors panel, set these options in the resulting dialog box:

  • Open in. If you aren't using frames, Dreamweaver lists only "Main Window" here. But if you're working in a frameset file and have named each of your frames, they're listed in the "Open in" list box. Click the name of the target frame.

    Figure 14.11. The parts of a browser window. Note: The menu bar only appears as part of the browser window on Windows machines. On Macs, the menu bar appears at the top of the screen and can't be hidden; in addition, the Safari browser won't hide the resize handle or the scroll bars (if they're needed).

    The parts of a browser window. Note: The menu bar only appears as part of the browser window on Windows machines. On Macs, the menu bar appears at the top of the screen and can't be hidden; in addition, the Safari browser won't hide the resize handle or the scroll bars (if they're needed).

  • URL. Fill in the URL of the page you wish to load. You can use any of the link-specifying tricks described in the section called “Adding a Link” on page 165: type in a path or an absolute URL starting with http://, or click the Browse button and select a page from your site.

Tip

You can use the Go to URL behavior as a way to redirect users from one page to another. For example, say the marketing department sent out a flyer saying "Sign up for free goodies" and used an incorrect web address—for instance, http://mysite.com/sinup.html, instead of signup.html. Rather than rename the signup.html page to sinup.html, just create a new page—sinup.html—and add the Go To URL behavior to that page's <body> tag. That way, when someone visits sinup.html, they'll be instantly carried away to the correct page, signup.html. (Also make sure the marketing department always checks with you BEFORE advertising a web address on your site.)

Jump Menu and Jump Menu Go

Conserving precious visual space on a web page is a constant challenge for designers. Put too many buttons, icons, and navigation controls on a page, and you clutter your presentation and muddle a page's meaning. As sites get larger, so do navigation bars, which can engulf a page in a long column of buttons.

The Spry menu bar is one solution to this problem, but you may not want to go through the lengthy process of creating and styling a Spry menu as described on the section called “Creating a Navigation Menu”. A simpler way to add detailed navigation to a site without wasting pixels is to use Dreamweaver's Jump Menu behavior. A jump menu is a form pop-up that lets visitors navigate by choosing from a list of links.

Dreamweaver lists the Jump Menu behavior in the Behaviors panel, but for a simpler, happier life, don't insert it into your page that way. Instead, use the Insert panel or Insert menu command, like this:

  1. Click where you want the jump menu to appear on your Web page.

    It could be in a table cell at the top of the page, or along the left edge, for example.

  2. Under the Forms category on the Insert panel, click the Jump Menu icon (see Figure 12.2, “The Insert panel's Forms category gives you one-click access to all the different form elements—buttons, text fields, checkboxes, and more. Since the Forms category has so many buttons, you might want to turn off the labels that appear next to each icon as described on page 34. This step lets you see all the form buttons without taking up your monitor's entire height. Another option is to choose the "Classic" view from the Workspace switcher as described in the note on page 35. This moves the insert panel into a toolbar that runs along the top of the application (see Figure 12-28). (You can also just drag the Insert panel up to the top of the screen to turn it into a toolbar.)”). Or choose Insert→Form→Jump Menu.

    If you had used the Behaviors panel instead, you'd first have to add a form and insert a menu into it. The Insert Jump Menu object saves you those steps.

    Note

    Even though the Jump Menu behavior uses a pop-up menu, which is a component of a form, you don't have to create a form first, as described in Chapter 12, Forms. Dreamweaver automatically creates one when you insert a jump menu.

    The Insert Jump Menu dialog box opens, as shown in Figure 14.12, “Top: The Insert Jump Menu dialog box is set up so that the onChange event of the <select> tag triggers the Jump Menu action. That is, the Jump Menu behavior works when your visitor selects an item other than the one currently listed.Bottom: Unless you turn on the "Insert go button after menu" checkbox, you should never use the first item of a jump menu as a link. Instead, use some descriptive text—such as "Select a Page to Visit"—to let visitors know what the menu does. Then leave the URL blank in the Insert Jump Menu dialog box. When placed on a page, the resulting menu is very compact, but it can offer a long list of pages.”.

  3. Type an instructive label, like "Select a Destination", in the Text box.

    What you enter in the Text box sets the menu's default choice—the first item listed in the menu when the page loads. Dreamweaver gives you two ways to trigger the Jump Menu behavior: when a visitor makes a selection from the list—which is an onChange event, since the visitor changes the menu by selecting a new option—or when the visitor clicks an added "Go" menu button after making his selection. The second method requires extra effort on the visitor's part—he has to make a selection and click a button. The first method, therefore, offers a better visitor experience. But it means that you can't include an actual link in the first menu item in the menu; after all, that item is selected by default and a visitor only triggers the jump behavior when he selects an item other than the one currently listed.

    If you intend to add a Go button, skip to Step 6.

  4. Leave the "When selected, go to URL" box empty.

    Since the first item in the list is just an instruction, you don't want to link it to a page.

  5. To add a link, click the + button.

    This adds another item to the menu.

    Figure 14.12. Top: The Insert Jump Menu dialog box is set up so that the onChange event of the <select> tag triggers the Jump Menu action. That is, the Jump Menu behavior works when your visitor selects an item other than the one currently listed.Bottom: Unless you turn on the "Insert go button after menu" checkbox, you should never use the first item of a jump menu as a link. Instead, use some descriptive text—such as "Select a Page to Visit"—to let visitors know what the menu does. Then leave the URL blank in the Insert Jump Menu dialog box. When placed on a page, the resulting menu is very compact, but it can offer a long list of pages.

    Top: The Insert Jump Menu dialog box is set up so that the onChange event of the <select> tag triggers the Jump Menu action. That is, the Jump Menu behavior works when your visitor selects an item other than the one currently listed.Bottom: Unless you turn on the "Insert go button after menu" checkbox, you should never use the first item of a jump menu as a link. Instead, use some descriptive text—such as "Select a Page to Visit"—to let visitors know what the menu does. Then leave the URL blank in the Insert Jump Menu dialog box. When placed on a page, the resulting menu is very compact, but it can offer a long list of pages.

  6. Type the name of the link in the Text field.

    Specify the first link in your pop-up menu. The name doesn't have to match the page title or the anchor name; you can make it descriptive. For instance, you can call a menu choice Home even if the title of your home page is "Welcome to XYZ Corp."

  7. Enter a URL for this link in the "When selected, go to URL" field.

    As mentioned earlier, the most error-free way to select a target file is to use the Browse button. However, if you're linking to another site, you have to type in an absolute URL, starting with http://.

  8. To add the next link in your pop-up menu, click the + button and repeat Steps 6 and 7. Continue until you add all the links.

    To remove a link, select it from the "Menu items" list and then click the minus sign (–) button. To reorder your list, click a link name and then click the up and down arrow buttons.

  9. If you're using frames (which you really shouldn't be, for the reasons described on the section called “About the Outline”), use the "Open URLs in" pop-up menu to specify a target frame for the web page.

    Otherwise, the "Main window" option loads links into the entire browser window.

  10. In the "Menu name" box, give the menu a name.

    This step is optional; you can also accept the name Dreamweaver proposes. Since Dreamweaver uses this name just for the JavaScript that drives the behavior, it doesn't appear anywhere on your page.

  11. If you want a Go button to appear beside your jump menu, turn on the "Insert go button after menu" checkbox.

    Use this option only when you want to make the first item in your jump menu a link instead of an instruction, or when the jump menu is in one frame and loads pages into another.

    When you include a Go button, Dreamweaver adds a small standardized button next to the menu, which your visitor can click to jump to a selected link. But most of the time, your visitors won't get a chance to click the button; the browser loads the new page as soon as our visitor selects a link.

    The Go button's handy, however, when there's no selection to make. For example, if the first item in the menu is a link, your visitors won't be able to select it; it's already selected when the menu page loads. In this case, a Go button is the only way to trigger the "jump."

  12. If you want to reset the menu after each jump (so that it once again shows the first menu command), turn on "Select first item after URL change."

    You're best off skipping this option. It's only useful if you use the really outdated HTML frames technology (the section called “About the Outline”).

  13. Click OK to apply the action and close the Jump Menu dialog box.

    Your new pop-up menu appears on your web page, and the new behavior appears in the Actions list in the Behaviors panel.

Note

To edit a jump menu, click the menu in your document and then, in the Behaviors panel, double-click the Jump Menu action in the Actions list. The settings dialog box reappears. At this point, you can change any of the options described in the previous steps, though you can't add a Go button to a jump menu that didn't have one to begin with. Click OK when you're finished.

The Jump Menu Go action (available on the Behaviors panel) is useful only if you didn't add a Go button in Step 11. In this case, if there's a jump menu on the page and you want to add a Go button to it, click next to the menu, add a form button, and then attach this behavior to it. (For more on working with forms, see Chapter 12, Forms.)

Check Plugin

You wouldn't be reading a Missing Manual if you didn't appreciate our candid advice. This behavior is useless, so skip it! It just doesn't work on all browsers, and if all you want to do is see if your visitor has a Flash plug-in, Dreamweaver has a better tool for that. Best of all, you don't need to do anything to take advantage of this tool. When you insert a Flash movie, Dreamweaver automatically adds code that not only checks whether your visitor has the Flash plug-in, it even verifies that he has the correct version of the plug-in (see the section called “Automate the Flash Download” for details). If either is missing, your page displays a message to that effect and provides a quick and easy way to download and install the plug-in.

Image Actions

Images make web pages stand out, but using Dreamweaver behaviors with images can make them come to life.

Preload Images

It takes time for images to load over the Internet. A 64 KB image, for instance, takes about 1 second to download over a DSL modem. Add 10 images of this size to a page, and it can take a while to actually load the page. However, once a browser loads an image, it stores that image in its cache, as described on the section called “Download Statistics”, so that if the page requires that same graphic again, it loads extremely quickly. The Preload Images action takes advantage of this concept by downloading images and storing them in the browser's cache even before they're actually needed.

Preloading is especially important when you use mouse rollover effects on a page. When a visitor moves her mouse over a button, it may, for example, appear to light up. If the rollover image weren't preloaded, the light-up graphic wouldn't appear when your visitor rolled over the button; in fact, it wouldn't even begin to download until she rolled her cursor over the button. The resulting delay would make your button feel less like a rollover and more like a layover.

If you use the Insert Rollover Image command (see the section called “Editing a Hotspot's Properties”), you don't need to apply the Preload Images action by hand because Dreamweaver adds it automatically. But there are exceptions. For example, when you use the CSS background property (the section called “Background Images”) to add an image to the hover state of a link (see the section called “Styling Links”), a new background image appears when a visitor mouses over a link. But the browser loads that image only when a visitor triggers the hover state, not before. In a case like this, you want to add the Preload Images action to the event.

To do so, select the <body> tag. You can apply the Preload Images behavior to any tag, but it really only makes sense to attach it to the <body> tag using an onLoad event, so that when the page loads, the browser begins downloading the images.

If you add rollover images to your page, this behavior may already be in the <body>. If that's the case, just select the body tag (click <body> in the Tag selector) and then double-click the Preload Images action that should already be listed in the Behaviors panel. If it isn't, just choose Preload Images from the + menu in the Behaviors panel. Either way, Dreamweaver displays the Preload Images dialog box.

Click the Browse button and navigate to the graphics file you want to preload, or type in the path or (if the graphic is already on the web) the absolute URL. Dreamweaver adds the image to the Preload Images list. To preload another image, click the + button and repeat the process. Continue until you add all the images you want to preload.

You can remove an image from the list by selecting it and then clicking the minus sign (–) button. (Be careful not to delete any images required for a rollover effect you've already created—the Undo command doesn't work here.)

When you click OK, you return to your document and your new action appears in the Behaviors panel. You can edit it, if you like, by changing the event that triggers it. But unless you're trying to achieve some special effect, you usually use the onLoad event of the <body> That's all there is to it. When your page loads in a browser, the browser continues to load and store the graphics you specified quietly in the background. They'll appear almost instantly when they're called by a rollover action or even by a shift to another page that incorporates the graphics.

Swap Image

The Swap Image action exchanges one image on your page for another. (See the end of this section for detail on Swap Image's sibling behavior, Swap Image Restore.)

Simple as that process may sound, swapping images is one of the most visually exciting things you can do on a web page. Swapping images works something like rollover images, except that you don't have to trigger them with a mouse click or mouse pass. You can use any tag-and-event combination. For instance, you can create a mini slideshow by listing the names of pictures down the left side of a web page and inserting an image in the middle of the page. Add a Swap Image action to each slide name, and the appropriate picture replaces the center image when a visitor clicks on a new name.

To make this behavior work, your page has to include a starter image, and the images you want to swap in have to match the width and height of that starter graphic. If they don't, the browser resizes and distorts the swapped pictures to fit the "frame" dictated by the original image.

To add the Swap Image behavior, first identify the starter image (choose Insert→Image, or use any of the other techniques described in Chapter 6, Images.) Give your image an ID in the Property inspector, so that JavaScript knows which image to swap out. (JavaScript doesn't really care about the original graphic image itself, but rather about the space that it occupies on the page.)

Tip

You can swap more than one image using a single Swap Image behavior (Figure 14.13, “You can use the Swap Image behavior to simultaneously change multiple graphics with a single mouseover. A humble web page (top) comes to life when a visitor moves her mouse over the Horoscopes button (bottom). Not only does the graphic for the Horoscopes button change, but so does the ad on the left sidebar; it's replaced with a tantalizing look at the "Sign of the Month." The Swap Image action lets you easily get this type of effect, sometimes called a disjoint rollover.”). Using this trick, not only can a button change to another graphic when you mouse over it, but any number of other graphics on the page can also change at the same time. An asterisk (*) next to the name of an image in the Swap Image dialog box (see Figure 14.14, “Some actions, like the Swap Image action, can automatically add behaviors to a web page. In this case, the "Preload images" and "Restore images onMouseOut" options actually add a Swap Image Restore action to the onMouseOut event of the currently selected tag, and a Preload Images action to the onLoad event of the <body> tag.”) indicates that the behavior will swap in a new image for that particular graphic. In the example in Figure 14.14, “Some actions, like the Swap Image action, can automatically add behaviors to a web page. In this case, the "Preload images" and "Restore images onMouseOut" options actually add a Swap Image Restore action to the onMouseOut event of the currently selected tag, and a Preload Images action to the onLoad event of the <body> tag.”, you can see that two images—horoscope and ad, both marked by asterisks—swap as a result of a single action.

Now select the tag you want to associate with the Swap Image behavior—you can choose a link, a paragraph, another image, or even the starter image itself. When you choose this action's name from the Behaviors panel, the Swap Image dialog box appears, as shown in Figure 14.14, “Some actions, like the Swap Image action, can automatically add behaviors to a web page. In this case, the "Preload images" and "Restore images onMouseOut" options actually add a Swap Image Restore action to the onMouseOut event of the currently selected tag, and a Preload Images action to the onLoad event of the <body> tag.”.

  • Images. From the list, click the name of the starter image.

  • Set source to. Here's where you specify the image file you want to swap in. If it's a graphics file in your site folder, click Browse to find and open it. You can also specify a path or an absolute URL to another website, as described in the section called “Absolute Links” (page 160).

  • Preload images. Preloading ensures that image downloads don't slow down the swap-in.

  • Restore images onMouseOut. You get this option only when you apply the Swap Image behavior to a link. When you turn this checkbox on, the previous image reappears when a visitor moves off the link.

Swap Image Restore

The Swap Image Restore action returns the last set of swapped images to its original state. Most designers use it in conjunction with a rollover button so that the button returns to its original appearance when the visitor moves his cursor off a button.

You'll probably never find a need to add this behavior yourself; Dreamweaver automatically adds it when you insert a rollover image and choose the "Restore images onMouseOut" option when you set up a regular Swap Image behavior (see Figure 14.14, “Some actions, like the Swap Image action, can automatically add behaviors to a web page. In this case, the "Preload images" and "Restore images onMouseOut" options actually add a Swap Image Restore action to the onMouseOut event of the currently selected tag, and a Preload Images action to the onLoad event of the <body> tag.”). But, if you prefer, you can add the Swap Restore Image behavior to other tag-and-event combinations, using the routine described on the section called “Applying Behaviors, Step by Step”. (The Swap Image Restore dialog box offers no options to set.)

Figure 14.13. You can use the Swap Image behavior to simultaneously change multiple graphics with a single mouseover. A humble web page (top) comes to life when a visitor moves her mouse over the Horoscopes button (bottom). Not only does the graphic for the Horoscopes button change, but so does the ad on the left sidebar; it's replaced with a tantalizing look at the "Sign of the Month." The Swap Image action lets you easily get this type of effect, sometimes called a disjoint rollover.

You can use the Swap Image behavior to simultaneously change multiple graphics with a single mouseover. A humble web page (top) comes to life when a visitor moves her mouse over the Horoscopes button (bottom). Not only does the graphic for the Horoscopes button change, but so does the ad on the left sidebar; it's replaced with a tantalizing look at the "Sign of the Month." The Swap Image action lets you easily get this type of effect, sometimes called a disjoint rollover.

Figure 14.14. Some actions, like the Swap Image action, can automatically add behaviors to a web page. In this case, the "Preload images" and "Restore images onMouseOut" options actually add a Swap Image Restore action to the onMouseOut event of the currently selected tag, and a Preload Images action to the onLoad event of the <body> tag.

Some actions, like the Swap Image action, can automatically add behaviors to a web page. In this case, the "Preload images" and "Restore images onMouseOut" options actually add a Swap Image Restore action to the onMouseOut event of the currently selected tag, and a Preload Images action to the onLoad event of the <body> tag.

Message Actions

Communication is why we build websites: to tell a story, sell a product, or provide information that entertains and informs. Dreamweaver can enhance this communication with actions that provide dynamic feedback. From subtle messages in a browser's status bar to dialog boxes that command a visitor's attention, Dreamweaver offers numerous ways to respond, in words, to the things your visitors do on your pages.

Popup Message

Use the Popup Message behavior to send important messages to your visitors, as shown in Figure 14.15, “Here, a pop-up message indicates a sale going on at Chia-Vet.com. While the Popup Message behavior is easy to use, you can't customize the look of the dialog box. That's controlled by the browser, and it looks different from browser to browser. For a better look, you could create an absolutely positioned <div> (see page 356) containing a nicely styled message, and then add one of the Spry Effects (like Fade, Blind, or Shrink) to a "close" button inside the div, so that when a visitor clicks the button, the div disappears.”. Your visitor must click OK to close the dialog box. But because a pop-up message demands immediate attention, reserve this behavior for important announcements.

To create a pop-up message, select the tag that you want to trigger the behavior. For example, adding this action to the <body> tag with an onLoad event makes a message appear when a visitor first loads the page; adding the same behavior to a link with an onClick event makes the message appear when the visitor clicks the link.

From the Add Action menu (+ button) in the Behaviors panel, choose Popup Message. In the Popup Message dialog box, type the message that you want to appear. (Check the spelling and punctuation carefully; nothing says "amateur" like poorly written error messages, and Dreamweaver's spell-checker isn't smart enough to examine these messages.) Then click OK.

Note

JavaScript programmers, your message can also include any valid JavaScript expression. To embed JavaScript code in a message, place it inside braces ({ }). If you want to include the current time and date in a message, for example, add this: {new Date()}. If you just want to display a brace in the message, add a backslash, like this: \{. The backslash lets Dreamweaver know that you really do want a { character—and not just a bunch of JavaScript—to appear in the dialog box.

Figure 14.15. Here, a pop-up message indicates a sale going on at Chia-Vet.com. While the Popup Message behavior is easy to use, you can't customize the look of the dialog box. That's controlled by the browser, and it looks different from browser to browser. For a better look, you could create an absolutely positioned <div> (see page 356) containing a nicely styled message, and then add one of the Spry Effects (like Fade, Blind, or Shrink) to a "close" button inside the div, so that when a visitor clicks the button, the div disappears.

Here, a pop-up message indicates a sale going on at Chia-Vet.com. While the Popup Message behavior is easy to use, you can't customize the look of the dialog box. That's controlled by the browser, and it looks different from browser to browser. For a better look, you could create an absolutely positioned <div> (see page 356) containing a nicely styled message, and then add one of the Spry Effects (like Fade, Blind, or Shrink) to a "close" button inside the div, so that when a visitor clicks the button, the div disappears.

Set Text of Status Bar

Skip this action—it's intended to display a message in the status bar at the bottom of a browser window. Few people look for messages there, and many browsers don't display the status bar unless a visitor actually turns that option on. And many browsers, including Opera, Safari, Firefox, and Chrome, won't let you change the text in the status bar anyway.

Set Text of Text Field

Normally, a text field in a form (see the section called “Text Fields”) is blank. It sits on a page and waits for a guest to type in it. The Set Text of Text Field behavior, by contrast, can save your visitors time by automatically filling in form fields with obvious answers.

For instance, if you create a visitor survey page, the first question might require a yes or no answer, along the lines of "Do you own a computer?" You provide radio buttons labeled "Yes" and "No". The second question might be "What brand is it?" followed by a text field, where your visitors type in the answer.

But if someone answers "No" to question 1, there's no point in answering the second question. To keep things moving along, you can have the question's text field display "Please skip to Question 3." To do so, simply add the Set Text of Text Field action to the onClick event of the "No" radio button.

To apply the Set Text of Text Field action, make sure your page includes a form and at least one text field; since this behavior changes the text in a form text field, you won't get very far without the proper HTML on the page.

Select the tag to which you want the behavior attached. In the example above, you attach the behavior to the form's No radio button with an onClick event. However, you aren't limited to form elements. Any of the tags discussed on pages the section called “A Quick Example”–the section called “Form Events” work.

When you choose Set Text of Text Field from the + menu in the Behaviors panel, its dialog box opens. Make the following changes:

  • Text field. The menu lists the names of every text field in your form; choose the name of the text field whose default text you want to change. (See Chapter 12, Forms for the full story on building online forms in Dreamweaver.)

  • New text. Type in the text you want that field to display. Make sure you don't make the message longer than the available space. If you leave the New text field blank, the contents of the field will be erased. Once again, your message can include a JavaScript expression, as described in the note on the section called “Popup Message”.

Set Text of Container

Another way to get your message across is to change the text that appears inside any element that has an ID. For example, you might change the text in a <div> tag, an absolutely positioned element (see the section called “Absolute Positioning”), or just a paragraph with its ID property set. This action also lets you use HTML code to format the message. (Actually, the "Set Text" part of this action's name is a bit misleading, since the action lets you include HTML code, images, forms, and other objects in the tag, not just text.)

As always, start by selecting a tag. For example, you could select a link so that moving a mouse over the link changes the text inside a <div> to read, "Click here to see our exclusive photos of collectable Chia Pets."

When you choose this action's name from the + menu in the Behaviors panel, you get these controls in a dialog box:

  • Container. The menu lists the names of every element on the web page that has an assigned ID (see the section called “Types of Styles” for more on IDs); choose the name of the container whose text you want to set.

  • New HTML. In this field, type in the text you wish to add to the layer. You can type in a plain-text message or use HTML code to control the content's formatting.

    For instance, if you want a word to appear bold, place the word inside a pair of strong tags like this: <strong>important</strong>. If you'd rather not mess around with HTML, you can design the content using Dreamweaver's Design view—that is, right out there in your document window. Copy the HTML source from the Code view (Chapter 11, Under the Hood: HTML), and then paste it into this action's New HTML field.

Tip

You can use the Set Text of Container to both set and erase the text in a container. For example, say you wanted text to appear inside a div when you mouse over a photo, but disappear when you move the mouse off of the photo. Select the photo and apply the Set Text of Container behavior twice: the first time, add your message and set the event to onMouseOver; the second time, leave the HTML box empty (in other words, without a message) and set the event to onMouseOut.

Text of Frame

Here's another holdover from the dark ages of website design. Like the Set Text of Container action, the Set Text of Frame action replaces the content of a specified frame with HTML you specify. As mentioned on the section called “About the Outline”, frames just aren't used professionally (and haven't been for years), so skip them and this behavior.

Element Actions

Dreamweaver includes several tools that let you manipulate the appearance and placement of any element on a page.

Show-Hide Elements

Do you ever stare in awe when a magician makes a handkerchief disappear into thin air? Now you, too, can perform sleight of hand on your own web pages, making HTML disappear and reappear with ease. Dreamweaver's Show-Hide Elements behavior is a piece of JavaScript programming that lets you create your own magic. It works a lot like the Spry Effects (the section called “Form Events”), but there's no fancy animation or fading out of view—the element just pops out of view or pops into view. (And it does so with a lot less code, so if you want a simple appear/disappear effect, this is the behavior to use.)

Show-Hide Elements takes advantage of the CSS Visibility property (the section called “Visibility”). You can use it for things like adding pop-up tooltips to your Web page, so that when a visitor mouses over a link, a paragraph appears offering a detailed explanation of where the link goes (see Figure 14.16, “Using Dreamweaver's Show-Hide Elements behavior, you can make page elements appear and disappear. In this example, several elements lay hidden on a page. When a visitor moves his mouse over different parts of the tree cross-section, informative graphics (each placed in a hidden element) suddenly appear. Moving the mouse away returns the element to its hidden state. Notice how the information bubble overlaps the tree image and the text above it—a dead giveaway that this page uses absolutely positioned divs.”).

The following steps show how to create this effect:

  1. Add absolutely positioned divs to your web page using the techniques described on the section called “Absolute Positioning”. Use the Visibility setting (the section called “Visibility”) to specify how you want each div to look when the page loads.

    If you want a tag to be visible at first and then to disappear when a visitor performs an action, set the layer to Visible. If you want the layer to appear only after a specific event, set it to Hidden.

    Note

    You don't have to use an absolutely positioned div to take advantage of the Show-Hide behavior. Any element with an ID applied to it can be hidden or shown, but AP divs work best because they don't take up any room on a page and they float above other content on the page. If you make a regular element disappear, there's a large empty spot on the page where it once was.

  2. In the Tag selector, click the tag to which you want the behavior attached.

    Web designers often attach behaviors to link (<a>) tags, but you can also attach them to paragraphs, headlines, div tags, images or, as in Figure 14.16, “Using Dreamweaver's Show-Hide Elements behavior, you can make page elements appear and disappear. In this example, several elements lay hidden on a page. When a visitor moves his mouse over different parts of the tree cross-section, informative graphics (each placed in a hidden element) suddenly appear. Moving the mouse away returns the element to its hidden state. Notice how the information bubble overlaps the tree image and the text above it—a dead giveaway that this page uses absolutely positioned divs.”, to an image map, which defines hotspots on a single graphic.

    To create this effect, attach two behaviors to each hotspot in the document window (that is, to each <area> tag in HTML): one to show the div, using the onMouseOver event, and one to hide the div, using the onMouseOut event.

    Note

    If this is all Greek to you, see the section called “Image Maps” for more on image maps and hotspots.

  3. If it isn't already open, choose Window→Tag Inspector. Then click the Behaviors button in the Tag Inspector window to open the Behaviors panel.

    The Behaviors panel (pictured in Figure 14.1, “Dreamweaver's Behaviors panel lists all the behaviors you applied to the currently selected HTML tag. Because the same event can trigger multiple actions, Dreamweaver groups the actions by event. In this example, the onClick event for an <a> tag (a hyperlink) triggers two actions. When a visitor clicks this hyperlink, a page element appears or fades away (the Appear/Fade effect), and a new browser window opens. The order in which the behaviors occur is determined by their order in this panel. For instance, when a visitor clicks the link in this example, she sees the Appear/Fade effect first, and then a browser window opens. To change the order of these events, use the up- and down-pointing arrows. To change the type of event, click the event name and select a different event from the pull-down menu. If different events trigger all the actions, the order in which they appear in this panel is irrelevant, since the event itself determines when the action takes place, not the order of the event in this panel.”) appears. It lets you add, remove, and modify behaviors.

  4. Click the + button on the panel. Select Show-Hide Elements from the menu.

    The Show-Hide Elements window appears (see Figure 14.17, “This box lets you hide or show any element on a page. In fact, you can control multiple elements at once. Here, the "toolTip1" div appears, while the div "toolTip2" disappears, when a visitor triggers the behavior. Other elements—like an HTML form and a form field (both have IDs so they appear here)—are unaffected by this particular action.”). You'll use this window to tell Dreamweaver what div you intend to work with first.

  5. Click an element from the list.

    It's useful to give your elements descriptive ID names so you can easily distinguish them in lists like this.

  6. Choose a Visibility setting for the elements by clicking one of three buttons: Show, Hide, or Default.

    You're determining what happens to the element when someone interacts with the tag you selected in Step 2. "Show" makes the element visible, "Hide" hides it, and "Default" sets the element's Visibility property to the browser's default value (usually the same as the Inherit value described on the section called “Visibility”).

    Your choice appears in parentheses next to the element's name, as shown in Figure 14.17, “This box lets you hide or show any element on a page. In fact, you can control multiple elements at once. Here, the "toolTip1" div appears, while the div "toolTip2" disappears, when a visitor triggers the behavior. Other elements—like an HTML form and a form field (both have IDs so they appear here)—are unaffected by this particular action.”.

  7. If you like, select another element and apply another visibility option.

    A single Show-Hide Elements action can affect several elements at once. It can even make some elements visible and others invisible simultaneously. (If you apply an action to an element by mistake, select the same option again to remove it from that element.)

  8. Click OK to apply the behavior.

    The Show-Hide Elements action now appears in the Behaviors panel, as does the event that triggers it.

Figure 14.16. Using Dreamweaver's Show-Hide Elements behavior, you can make page elements appear and disappear. In this example, several elements lay hidden on a page. When a visitor moves his mouse over different parts of the tree cross-section, informative graphics (each placed in a hidden element) suddenly appear. Moving the mouse away returns the element to its hidden state. Notice how the information bubble overlaps the tree image and the text above it—a dead giveaway that this page uses absolutely positioned divs.

Using Dreamweaver's Show-Hide Elements behavior, you can make page elements appear and disappear. In this example, several elements lay hidden on a page. When a visitor moves his mouse over different parts of the tree cross-section, informative graphics (each placed in a hidden element) suddenly appear. Moving the mouse away returns the element to its hidden state. Notice how the information bubble overlaps the tree image and the text above it—a dead giveaway that this page uses absolutely positioned divs.

Once you add Show-Hide Elements, you can preview the behavior in a browser or click the Live View button in the Document toolbar (see the section called “Live View” for more on Live View). Like other Dreamweaver behaviors, you can edit or delete this action as described on the section called “Adding Multiple Behaviors”.

Draggable Divs

The Drag AP Div behavior lets you create pages with absolutely positioned divs (the section called “Absolute Positioning”) that a visitor can freely position on the page (think interactive jigsaw puzzle). This was kind of a cool behavior in its day, but it hasn't been updated in years. It adds lots of JavaScript code that really weighs down your page, and because it's based on really old code, it isn't guaranteed to work in new browsers.

Advanced Behaviors

Dreamweaver has two advanced behaviors that let you call (invoke) custom Java-Script functions and change the properties of various HTML elements on a page. Both of them require familiarity with JavaScript and HTML. Unlike the other Dreamweaver behaviors, these two can easily generate browser errors if you use them incorrectly.

Figure 14.17. This box lets you hide or show any element on a page. In fact, you can control multiple elements at once. Here, the "toolTip1" div appears, while the div "toolTip2" disappears, when a visitor triggers the behavior. Other elements—like an HTML form and a form field (both have IDs so they appear here)—are unaffected by this particular action.

This box lets you hide or show any element on a page. In fact, you can control multiple elements at once. Here, the "toolTip1" div appears, while the div "toolTip2" disappears, when a visitor triggers the behavior. Other elements—like an HTML form and a form field (both have IDs so they appear here)—are unaffected by this particular action.

Call JavaScript

You can use the Call JavaScript behavior to execute a single line of JavaScript code or to call a JavaScript function that you add to the <head> section of your web page.

When you select a tag and choose this behavior's name from the Behaviors panel, the Call JavaScript dialog box opens. If you want to execute a single line of Java-Script code, simply type it in. For instance, if you want to make the browser window close, type window.close(). If you want to call a JavaScript function, type the function name, like this: myFunction().

Change Property

The Change Property behavior can dynamically alter the value of a property or change the style of any of the following HTML tags: <div>, <span>, <p>, <tr>, <td>, <img>, <form>, <textarea>, or <select>. It can also change properties for radio buttons, checkboxes, text fields, and password fields on forms (see Chapter 12, Forms). As with the previous behavior, this one requires a working knowledge of HTML, CSS, and JavaScript.

Select a tag, choose this behavior's name from the + menu in the Behaviors panel, and then fill in the following parts of the Change Property dialog box (see Figure 14.18, “Caution: The Change Property behavior requires some knowledge of HTML, JavaScript, and CSS. All the options in the menu refer to various CSS properties.”):

  • Type of element. This pop-up menu lists the 13 HTML tags that this behavior can control. Choose the type of element whose property you wish to change.

  • Element ID. From this pop-up menu, choose the ID of the object you want to modify. You'll only see elements of the type you selected from the first menu (for example, <div> or <p> tags). Dreamweaver will list any tag of the selected type that doesn't have an ID applied to it, but it will have the label "unidentified" next to it. Dreamweaver only lets you choose an element that has an ID.

  • Property. Choose the property you want to change (or, if you know enough about JavaScript and CSS, just type the property's name into the Enter field). All the options in the menu refer to various CSS properties. For example, "color" refers to the color property, which sets text color, as discussed on the section called “Duplicating a Style”.

    Figure 14.18. Caution: The Change Property behavior requires some knowledge of HTML, JavaScript, and CSS. All the options in the menu refer to various CSS properties.

    Caution: The Change Property behavior requires some knowledge of HTML, JavaScript, and CSS. All the options in the menu refer to various CSS properties.

  • New value. Type the new value for this property. It should be appropriate to the type of property you're changing. For example, if you're changing a background color, the value should be a color, like #FF0066. The options in the Property menu refer to CSS properties, so you'll find that the values listed for the different CSS properties in Chapters Chapter 4, Introducing Cascading Style Sheets, Chapter 5, Links and Chapter 6, Images should work. For example, the fontWeight property is the CSS Font Weight property (the section called “Duplicating a Style”), so you could enter a value of bold to change text in an object (inside a <div> tag, for instance) to bold.

Tip

As with the Set Text of Container behavior (see the tip on Tip), the Change Property behavior works well in pairs. You can add the behavior once to an element by using the onMouseOver event to change the property, and then add the behavior a second time to the same element with the onMouseOut event to change the property back to its original setting.

Adding More Behaviors

Dreamweaver's behaviors can open a whole new world of interactivity. Even if you don't understand the complexities of JavaScript and cross-browser programming, you can easily add powerful and interesting effects that add spice to your pages.

While Dreamweaver comes with the preprogrammed behaviors described in this chapter, you can download many additional behaviors from Adobe's Exchange Website (www.adobe.com/exchange) or any of the sites mentioned on the section called “Other Extension Sources”. Once you download them, you can easily add them to Dreamweaver, as described in Chapter 22, Customizing Dreamweaver.

If you enjoyed this excerpt, buy a copy of Dreamweaver CS5: The Missing Manual.

Copyright © 2009 O'Reilly Media, Inc.