• + (plus): This brings up a submenu where a new behavior can be added.
• - (minus): This removes a behavior that already exists. This button is grayed out unless a behavior is selected.
• Events for: This menu allows you to select what browser compatibility you prefer for new behaviors. It is recommended that you leave this at '3.0 and Later Browsers', which is the default.
• Arrows: The up and down arrows will change the selection of existing behaviors above or below. These are grayed out unless there are at least 2 behaviors already.
• Events: This field is where the Event Handler name is displayed.
• Actions: This is the name of the behavior that will execute.

Creating a Behavior

To create a behavior, you must first decide which HTML tag it will be applied to. This decision will depend on the type of behavior you would like to add. Once you have decided on the tag, you must select it. This can be done by placing the cursor within the element on your page, or by selecting from the Tag list at the bottom:

Once you have selected the tag, click on the + button on the Behaviors Palette. This will bring up a list of the Behaviors available to Dreamweaver. Click on the one you wish to use, and a dialog box will come up. The dialog box varies depending on the Behavior you wish to use.

Once the Behavior has been created, it will appear in the Behaviors Palette.

You can now modify the Action of the Behavior by double clicking on the text within the Action field. For the above example, that text would be 'Go To URL'. This will bring up the same dialog box with the information already filled in.

You can also change the Event that will trigger the Behavior. We will now talk about the different events that can be used and when to use them.

Behavior Events

There are several events that can trigger your Behaviors. There is a complete listing in the Dreamweaver Help section. Here are a few of the more common events:

• onBlur: This is when an element loses focus.
• onChange: When a value is changed on the page.
• onClick: When the element is clicked. onLoad: When the page or element finished loading.
• onMouseDown: When the user presses a mouse button.
• onMouseOut: When the mouse is moved away from the element.
• onMouseOver: When the mouse is moved over an element.
• onReset: When a form is reset. onSelect: When text in a text field is selected.
• onSubmit: When a form is submitted. onUnload: When the page is left.

To change the Event, highlight the existing event by clicking once, then bring down the menu that will give you a list of other available events.

Status Bar Messages

A status bar message is a custom message that appears on the lower left corner of the browser. This usually happens during an onMouseover event. These are probably the easiest Behaviors to create in Dreamweaver.

Null Link Status Bar Message

• Begin with either a new document or an existing one you'd like to apply the Status Bar Message to.
• First you will apply Status Text to a Link. Type the text you want to use as a link. I will use Nicholson's Lesson Plan Blues.
• Select the text or object you want to apply the Status Text to. I will highlight the words "Nicholson's Lesson Plan Blues."
• You first make the link a null link. In the property inspectors link text box, place a # sign. This will let the program know that the link is null.
• With the text still selected, click the <a> tag at the bottom left hand side of your document.
• Open the Behaviors Panel by clicking Window>Behaviors.
• In the Behaviors Panel, click the plus sign arrow and then select Set Text>Set Text of Status Bar.
• The Set Text of Status Bar dialog window will open. Enter any text you would like to have displayed. Click OK when you're finished. I typed "Welcome to Nicholson's Lesson Plan Blues."
• When your mouse rolls over the null link, the words "Welcome to Nicholson's Lesson Plan Blues" appears on the status bar.

Status Bar Message when a page loads.

This is basically the same principal used above, but you will apply it to the body tag in your document window.

• Begin with either a new document or an existing one you'd like to apply the Status Bar Message to.
• Click the <body> tag at the bottom left hand side of your document.
• Open the Behaviors Panel by clicking Window>Behaviors.
• In the Behaviors Panel, click the plus sign arrow and then select Set Text>Set Text of Status Bar.
• The Set Text of Status Bar dialog window will open. Enter any text you would like to have displayed. Click OK when you're finished. I typed "Welcome to Nich's Site!!!"
• When your page loads, the message will appear on the status bar.

Popup Menus

Follow these steps to create a popup window:

• Create a link. This can be a text or image link.
• Select the link (the tag).
• Open the Behaviors Palette.
• Click on the Behaviors Menu and click on 'Open Browser Window'.
• A dialog box will come up with several fields. The most important field is the 'URL to Display'. You can browse for a file if necessary. You can also specify the width and height of the window, whether it has a navigation toolbar, scrolling bars, etc. You can also give the window a name, which is useful if you plan on loading other information in there later.
• Make sure the Event is set to onClick.

This can also be used with other events, such as onMouseOver or onLoad. If you would like to have a browser window open when a page is loaded, simply select the (lower left corner) before setting your behavior and follow the same steps as above.

Swap Image

This effect has been called many things, such as Mouseovers, Rollovers, and more. Dreamweaver can accomplish this with the Swap Image behavior.

This can be done quite easily:

• Insert an image. Select the image (the <img> tag).
• Name the image in the Properties Palette.
• Open the Behaviors Palette.
• Click on the Behaviors Menu and click on 'Swap Image'.
• A dialog box will come up that lists all the images on the page. Make sure the name you gave this image is selected.
• Enter the path or browse for the image to be used when it is moused over.

There are also two checkboxes that ask if you want to Preload images and Restore onMouseout. It is recommend that you check both of these. You can also preload several images at one time by using the Preload Behavior while the tag is selected. If you are using multiple or complex mouseover effects, you can select Restore on Mouseout manually by using the original image as the source and using the onMouseout event.

Jump Menu

A jump menu is a pop-up menu in a document, visible to your site visitors, listing options that link to documents or files. With jump menus you can create links to documents in your Web site, links to documents on other Web sites, e-mail links, links to graphics, or links to any file type that can be opened in a browser. When you create a jump menu by using Insert > Form Objects > Jump Menu, Dreamweaver creates a menu object and attaches the Jump Menu (or Jump Menu Go) behavior to it. There is usually no need to attach the Jump Menu action to an object by hand.

To create a jump menu:

• In Dreamweaver, choose Insert > Form Objects > Jump Menu. The Insert Jump Menu dialog box appears.
• Type a selection prompt (for example "Choose one:") in the Text field of the dialog box

Select the Select First Item After URL Change option, then click the plus (+) button to add the selection prompt to the menu.

• In the Text field, type the text you want to appear in the menu list.
• In the When Selected, Go to URL field, select the file to open by doing either of the following:
  • Click Browse, then select the file to open.
  • Type the path of the file to open.
• In the Open URLs In pop-up menu, select a location in which the file will open by doing either of the following:
  • Select Main Window to open the file in the same window.
  • Select a frame in which the file will open.

  Note: If the frame you want to target doesn't appear on the Open URLs In pop-up menu, close the Insert Jump Menu dialog box and name the frame.

• Select the Insert Go Button After Menu option to add a Go button. For more information see "Jump Menu Go" in Chapter 18 "Using Behaviors" of the Using Dreamweaver 4 manual or in Dreamweaver Help (Help > Using Dreamweaver).
• To add additional menu items, click the plus (+) button and repeat steps 3 through 6 of this procedure.
• Click OK.

Once you've created your jump menu, you can edit it in either of two ways:

• You can edit and rearrange menu items, change the files to jump to, and change the window in which those files open, by double-clicking an existing Jump Menu action in the Behaviors panel.
• You can edit the items in the menu just as you would edit items in any menu, by selecting the menu and using the List Values button in the Property inspector.

To edit a jump menu using the Behaviors panel:

• Select the jump menu object and open the Behaviors panel.
• Double-click Jump Menu in the Actions column.
• Make changes as desired in the Jump Menu dialog box, then click OK.

Check Plugin

Use the Check Plugin action to send visitors to different pages depending on whether they have the specified plugin installed. For example, you might want visitors to go to one page if they have Shockwave and another page if they do not.

Note: You cannot detect specific plugins in Microsoft Internet Explorer using JavaScript. However, selecting Flash or Director in the Check Plugin dialog box will add the appropriate JavaScript code to your page to detect those plugins in Internet Explorer in Windows. Plugin detection is impossible in Internet Explorer on the Macintosh.

To use the Check Plugin action:

• In Dreamweaver, select an object and open the Behaviors panel.
• Click the plus (+) button and choose Check Plugin from the Actions pop-up menu.
• In the Check Plugin dialog box, choose a plugin from the Plugin pop-up menu, or click Enter and type the exact name of the plugin in the adjacent field. You must use the exact name of the plugin as specified in bold on the About Plug-ins page in Navigator. (In Windows, choose Navigator's Help > About Plug-ins command; on the Macintosh, choose About Plug-ins from the Apple menu.)
• In the If Found, Go To URL field, specify a URL for visitors who have the plugin. If you specify a remote URL, you must include the http:// prefix in the address. To make visitors with the plugin stay on the same page, leave this field blank.
• In the Otherwise, Go To URL field, specify an alternative URL for visitors who don't have the plugin. To make visitors without the plugin stay on the same page, leave this field blank.
• Plugin detection is not possible in Internet Explorer on the Macintosh, and most plugins cannot be detected in Internet Explorer in Windows. By default, when detection is impossible, the visitor is sent to the URL listed in the Otherwise, Go To URL field. To instead send the visitor to the first (If Found) URL, select the Always Go To First URL If Detection Is Not Possible option. When selected, this option effectively means "assume that the visitor has the plugin, unless the browser explicitly indicates that the plugin is not present."

In general, if the plugin content is integral to your page, select the "Always go to first URL if detection is not possible" option; visitors without the plugin will often be prompted by the browser to download the plugin. If the plugin content is not essential to your page, leave this option unselected.

• Click OK.
• Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu.

If the events you want are not listed, change the target browser in the Show Events For pop-up menu.

Show/Hide Layers

The show/hide feature presented here will be names in the form of links that when you place your cursor over the word will show the image. Example: I have the word apple on the page and when I place the cursor over the word 'apple,' the image of an apple will appear on the page.

• Type out the names of your link/links.
• Create a layer:
  • Click the Draw Layer button On the Objects Palette (shown below>and drag out a new layer.

  

Here is an example of a layer created with four named links:

Don't worry about the size of the layer or the positioning for now. We'll clean that up soon enough.

• Rename Layer 1
  • Go over to the Layers Palette:

  and you'll notice "Layer 1" has been created. That's the layer you just created.

  • Double click the "Layer1" to rename the layer. The name should represent the image that will appear when the cursor is placed over the image.
• Insert an image in the layer.
  • Go back to the layer you just created and position your cursor inside the layer and click once.
  • On the Objects Palette, click the Insert Image to insert an image into the layer.
  • Positioned the image inside the layer.
• Resize the Layer.
  • Scale the layer to fit perfectly around the apple image.
  • Move your cursor over the edges of the layer until you see the cursor change into a "hand". Once you see the "hand cursor", click once to select the layer. Once you've selected the layer, you'll notice the black selection handles. Move your cursor over the black selection handle until the cursor changes into a double-sided arrow.
  • Grab the middle one on the right side and drag inward. This will scale the layer to the width of the image. Do the same thing for the bottom resize handle, dragging towards the center of the image.

You can also resize the layer to the size of the image numerically. Click once on the image and then go up to the Properties Inspector and in the image properties, note the width/height and input the values in the W and H fields (Width and Height).

• . Turn Apple Layer's visibility off.
  • In the Layers Palette, click in the Eye-Icon Column for the Apple Layer..
  • To hide the layer, click until you see the eye closed.

• Repeat the steps for any additional links and images you want to appear on your page.
• Add the behaviors to each of the links in the menu so that when we mouse over each link, the appropriate image appears.
  • Double click inside the "image" link up top to select it. before we can add the behavior, we need to create a null link. You do this by typing the # sign in the link window.
  • Go over to the Behaviors Palette and click the plus (+) sign.
  • From the drop down menu, select Show-Hide Layers. Here you'll see the layers you created for your images.
  • Click the first layer and then click "Show" to show the layer.
  • Click OK.
  • Next, change the "OnClick" to "OnMouseOver". We need to add the "OnMouseOut" behavior to the link so that when you remove your mouse from the "image" link, the image disappears.

  

• Click the plus sign (+) again and select Show-Hide Layers again. Again select the image layer, this time selecting "hide" from the buttons on the bottom.
• Click OK.
• Next, change the action "onClick" to onMouseOut.

• Test your behaviors.
  • Let's do a quick Preview In Browser to see if it's working.
  • Repeat steps 12-20 for your remaining images.
• Aligning the Layers
  • After Previewing in a Browser, if the layers/images are kind of all over the place and not very cleanly organized, you will need to align your layers to be centered both horizontally and vertically to each other.
    • Determine where you want the images to be.
    • Use the center of the nav bar as a guide.
    • Make one of the layers visible by clicking on the layer. The layer will only be temporarily visible. You are just using it to assist you in determining where you want to align the layers.
    • Click on the Image layer and drag it into position. Once in position, notice the coordinates of the layer by going up to the Properties Inspector and making a note of the L (left) and T (top) numbers. See the example below.
    • Either remember the number for the positioning or write it down
    • Click away from the layer to deselect it.

• Repeat this if you created more layers. Make sure you position all the images in the same place by using the cooridinates in the layers properties inspector.