Assignment #13
Behaviors
behaviors.html

 

 

  Objective: You will be able to create more interactive web pages by including behaviors, such as pop-up messages, status bar text, viewing and hiding layers, and draggable layers.
 

The Steps

Using the "behaviors" window, you can make your page more dynamic. You can use events (Mouseover, Mousedown, etc) to make stuff happen.

1. Using Fireworks create a button and insert it into a new dreamweaver document called behaviors.html.

2. Select the image, and get the behaviors window. (Choose Window->Behaviors).

3. Click on the plus button. Choose Popup Message. Type in the text you want to appear in the popup message box when the the selected item.

4. When you click on the image in Dreamweaver you should see the event listed in your Design, Behaviors panel.

5. To test out your behavior. Save your page and preview it in Safari. Did the message popup?

6. MouseOver on the image below to see another type of behavior

Behaviors Browser List
Up image for rollover

 

7. You may want to show more Events. This should open up more choices for you.


Add 2 new behaviors to your behaviors.html page. Use DIFFERENT BEHAVIORS AND DIFFERENT ACTIONS to initiate the behaviors (e.g. does the behavior occur when an image is rolled over, double-clicked, or when the page is loaded?). On this page, explain in words:

  • each behavior you have chosen,
  • how it works (the action that initiates it), and
  • the results after testing each of them in Firefox and Safari.

Save your project and create a link from your assignment page.


The Assignment

1. Create behaviors.html, so that:

  • Behaviors.html includes 3 different behaviors that occur when different actions (onClick, onMouseOver, etc.) are taken, including at least one that creates a pop-up message.
  • Behaviors.html has information about what the behaviors are, how they were created, and how they work in two browsers.

back to the top