skip to main content - home
- site organisation
- site folders
- text
- pages
- hyperlinks
- layers
- templates
- basic style sheets
- style sheet layout
- images
- tables
- forms
- animation
- behaviours
- ftp
- accessibility

Dreamweaver MX Tutorial

Created and designed by Vivienne Trulock for ilikecake, 2005

Behaviours

Behaviours are a way of doing complicated things without having to know how to write JavaScript, for example. There are many different behaviors in Dreamweaver, which are supported by different levels of browsers. We will have a look at a few of these.

Open Browser Window Behavior

You would normally apply this behavior to an image, so insert an image into the page. ( Click here for images. Open the Behaviours window - 'Window > Behaviours'.

Click on your image and press the '+' button in the behavior window. This gives you a list of all the behaviors that you can apply that are supported by IE 4.0. Choose the Events for 'IE 4.0' option.

link to page

Select the 'Open Browser Window' option.

Choose which page to link to with the Browse button (any page you've already made). Set the window height and width to say 400 by 400 pixels.

Turn on the 'scrollbars as needed' option and click 'OK'.

Now look in your Behaviors window. Your behavior is in a list here. To delete the behavior, just click the '-' button (not now).

set event

The default Event is set to 'onClick', but you can change that by clicking on the down arrow and choosing a different event from the list.

NOTE: onClick, onDblClick and onMouseOver are the most common events chosen, however these are device specific i.e they can only be triggered by the use of a mouse. some individuals can only use a keyboard. Therefore, events which are not device specific are preferred.

NOTE: use onfocus instead of onmouseover

NOTE: use OnBLUR instead of onmouseoU

NOTE: use ONkeydown as well as onmousedown

NOTE: use ONkeyupas well as onmouseup

NOTE: use ONkeypress as well as onclick

NOTE: there is no accessible alternative to ondblclick.

Events surrounded by brackets also trigger a cursor change. Events which are not surreunded by brackets do not.

Play Sound Behavior

You don't need to insert any images for this one, although you can if you want to. Just go to the Behaviors window and select 'Play Sound' from the list.

Use the Browse button to find a sound file (any file ending in .wav will do). Click 'OK'. As with images, all your sounds should be saved in their own sub-folder.

select event

You can again select an Event of your own choosing. The default here is onLoad, but you can choose onClick, or onDblClick if you like. In fact, you can choose multiple sounds, each corresponding to a different event.

Popup Message Behavior

Again, you don't need to insert any images for this one, although you can if you want to. If you want to apply the behavior to an image, just select it before you select the behavior. Choose the Popup Message option from the list.

Write your message into the box provided.

select event

Again, select the event you wish the Popup message to be shown on.

Show/Hide Layers Behavior

This is a little bit more complicated. We will use the tab images to create a tabbed folder effect, by using the show hide layers behaviour and image maps.

Firstly, create two layers. Name the first layer 'tab1' and inside it insert tab1.gif. Name the second layer 'tab2' and inside it insert tab2.gif.

We want to be able to select the 'behind' tab in both cases. In order to do this we need to put a hotspot on each the images. Don't worry about assigning a url for the hotspot at this point. We will do that with the show/hide behaviour.

visibility properties

Select layer 'tab1', and change its' visibility properties (in the layer properties window) to visible.

Select layer 'tab2', and change its' visibility properties to hidden.

set layer position

In order for the effect to work properly, the two layers need to be in exactly the same position on the page. Select the layers and make sure that the distance from the top and distance from the left are exactly the same on both layers.

apply behaviour

Now, it's time to apply the behaviour. First select the hotspot on tab1 that we made earlier and then select the 'Show / Hide Layers' option from the menu.

In the window, first select the tab2 line and click on the Show button. This 'shows' the hidden layer, 'tab2', in the browser when the hotspot is selected.

Then select the 'tab1' line and click on the Hide button. This will hide the currently visible layer 'tab1', in the browser when the hotspot is selected.

repeat for other tab

We now need to repeat the process for 'tab2', so that we can go back again. Select the layer 'tab2' and the hotspot.

Select the Show/Hide behaviour from the list, as before. We now want to hide tab2, and show tab1. So, select 'tab2' and click Hide. And, select 'tab1' and click Show.

Select both hotspots in turn, and change the events to 'onClick', so that the layers alternately hide when the hotspot is clicked. Repeat the procedure for 'onKeyPress'. Save the page and view it in the browser to test it.