Behaviors

Dreamweaver supports the use of small Javascripts called "Behaviors," which allow you to easily create interesting effects on your web pages without needing an understanding of creating your own Javascripts from scratch. Behaviors can be attached to almost any object on a page, including text, graphics, hyperlinks, or form objects; or, they can be attached to events, such as when a page loads or a link is clicks.

One important thing to note about behaviors is that not all behaviors perform the same way in all web browsers. Older browsers, for example, may not support many of the more interesting behaviors available; however, Dreamweaver does allow you to choose behaviors that are guaranteed to work in the most common versions of both Internet Explorer and Netscape. You can also choose to work with behaviors that are certified for certain "generations" of web browser programs, providing a more general list but ones that are guaranteed to work in most web browsers in use today.

You can use as many behaviors as you want within any given page. You may have behaviors that occur at page load, then more that occur when users click or drag over various text or graphic elements on your page.

Setting Up For Using Behaviors

1. Behaviors are found in their own window, available from the Window menu.

2. Click the plus (+) sign to see the list of available behaviors. Here, you can also tell Dreamweaver to show you behaviors for specific web browsers. To do this, drag down to "Show Events For..." then choose your target browser from the submenu.

Tip: If you are writing your page for a general audience, use the behavior list for a relatively low but common browser, like Internet Explorer 4 or 5. The behaviors found here will almost certainly work for the majority of your audience.

3. To remove an existing behavior, simply click on it in the Behaviors window and click the minus (-) sign.

Attaching Behaviors...

To the entire page:

There are some behaviors that can occur when the web page loads. Some are quite useful, and some of course are just plain fun.

The most common behaviors for page loading are:

Check Browser/Check Plugin: These behaviors will check to see whether the user has a particular browser or browser plugin installed on his/her machine. This way, if you have content that depends on the use of a certain browser or plug-in, you can inform the user that he/she needs to upgrade, and give him/her directions on how to proceed. So, for instance, if the user needs a Flash plugin in order to use your page, you can use the Check Plugin behavior to analyze the user's machine and specify a link that will help her download the correct plugin before she continues on through your web site.

Effects: New to Dreamweaver CS3, certain interesting visual effects can be added to blocks of text or to graphics to make them do things when clicked or moused over, such as:

• fade in or out,
• highlight
• or even shake!

Go to URL: Also known as a Redirect when used at page load, the Go To URL behavior specifies a new web address to automatically go to after your web page loads. This is useful for directing users to the new version of a website or the new server where your site is housed.

Play Sound: Tells the page to play a sound file when the page loads. Dreamweaver will ask you to locate a sound file for use within your page -- take note that sound files must always be copied into the site directory with the rest of your HTML and image files. You may use any web-friendly audio file, including MIDI, QuickTime, or MP3 (see Video and Multimedia for more information).

Popup Message: This will present the user with a popup message when the page loads. This can be any message you like, such as a welcome greeting. The message will be displayed in plain text in a popup window that can be closed with an OK button.

Set Text: On page load, Set Text can only put messages in the status bar at the bottom of the browser window. You specify the message, just like the Popup Message behavior.

To Text and Hyperlinks:

The same behaviors that can be set to page load can also be applied to plain text and hyperlinks (see above). The difference, however, is that behaviors attached to text or hyperlinks can be executed at the user's discretion, instead of automatically. You can apply behaviors that will happen when the user clicks, double-clicks, or mouses over or onto the text object.

For example, click on this line of text to see a behavior in action.

Or, try this hyperlink (hint: look at the bottom of your window in the status bar)

Open Browser Window: A text or graphic object can be prompted to open a new browser window with a specified address for the user. This is similar to a normal hyperlink; however, the behavior allows you to choose the characteristics of the browser window, in case you do not want the new window to contain an address bar, button bar, and so on.

To Images:

Images can also accommodate all of the behaviors available for text and on page load. However, there are a few new behaviors that apply only to images.

Set Nav Bar Image: Dreamweaver supports the use of images as navigational buttons within a page, which it refers to as a "nav bar" or "navigation bar." The site at http://education.calumet.purdue.edu/Tutorials make use of a navigation bar on the left-hand side of each page. The individual images in the nav bar essentially can work like a 4-way rollover: there is an initial image, then a different image for when the user rolls the mouse over the the image, another for when the user clicks on the image, and finally another for when the user moves the pointer over the "clicked down" image. These images can be all different, the same, or a combination thereof. This behavior is typically used to create a button that actually looks like it has been pushed in when the user clicks it. However, this use also usually requires the web designer to create his or her own up, over, down, and over while down images in a graphic editing program like Adobe Fireworks.

Show Popup Menu: The Show Popup Menu behavior is also utilized at the TechHelp website. This allows the designer to put together buttons or navigation images that offer the user choices about where they'd like to go next. You could, for example, have an image present them with a popup menu with several links where they can learn more about your topic. Another example of Show Popup Menu might be to have a compass rose or four-way arrow that provides the user with a list of choices to go back to the top of the page, somewhere in the middle, or to the end, using links to anchors within the page (see Links and Anchors for more information).

The colors and overall appearance of the popup menu can also be changed while you are setting up the Show Popup Menu behavior.

Here is an example of an image with a popup menu. Drag over it to see and select from the menu.