The Latest in Adventure Travel
***All Graphic can be found on the shared drive. Create a folder in your document called
“Latest in Adventure Travel”.
Copy all the files from the shared Drive into that folder.
Behaviors are used to add interactivity to your pages, enabling your users
to change or control the information they see. A behavior combines a user event
(for example, moving the pointer over a graphic button) with an action or
series of actions that take place as result of that event. Behaviors are
Dreamweaver. You can specify more than one event to trigger a behavior, and
more than one action for each event. Dreamweaver includes several predefined
behaviors. You can also download new behaviors from the Dreamweaver Exchange
Web site by choosing Help > Dreamweaver Exchange. If you have an Internet connection,
your primary browser will open and you will be taken directly to the Web site.
rollover—an image that changes when the user moves the pointer over the
image. You can create button rollovers in Dreamweaver without ever looking at
Here are a few things to remember when designing rollover buttons for your
- Create each image the same
size. If you don’t, Dreamweaver resizes the second rollover image to
the size of the first image. Resizing distorts the second image.
- Make the buttons as small as
possible. Remember, with rollovers you are displaying not one, but two
images for the same button. The file size of the button is actually
doubled, because you have two images to download.
- Define the site Latest in
- Open the latest.htm file that
you downloaded above. This page contains a table with some graphics.
Switch to Layout view to view the table structure. Place the insertion
point in the blank cell to the left of Welcome to Compass, the cell is
highlighted yellow below:
- Choose Insert > Images
Objects > Rollover Image.
- The Insert Rollover Image
dialog box appears:
- Type biking in the Image name
text box. The name you type here must be a unique name. No other image on
this page can have the same name. Don’t use any special characters
or spaces in the name.
- Click Browse next to the
Original Image text box and select biking_button.gif you downloaded
earlier to your Latest Adventure folder in your student folder on the
desktop. All the images you need for this exercise should have been
downloaded earlier. Click Select.
- Click Browse next to the
Rollover Image text box and select biking_button_f2.gif. Click Select.
- If you want the graphic to be
a link, click Browse next to the Link text box and find the file to link.
If you’re not linking, leave this text box blank. For this exercise,
select biking.htm. Click Select, and then click OK to close the dialog
- Save your page and test your
file in the browser.
- Add the remaining buttons:
climbing_button.gif, diving_button.gif, and kayaking_button.gif using the
Insert Rollover Image command. Separate each button with a new line. Place
the insertion point after each image and press Shift-Enter (Windows) or
Shift-Return (Macintosh). You don’t need to link these buttons. The
final page should look like like the picture below:
Adding Rollovers to Existing Images
Using the Insert Rollover Image command makes it very easy to insert
rollovers in your page. There may be instances where graphics are already
placed on the page and you want to add rollovers. You could delete the graphics
and use the Insert Rollover Image command to put them back on the page, but
there is a possibility of changing the page design, especially if the graphics
are in a table. In the next exercise, you will add rollovers to the buttons
across the top of the page.
Select the Adventure Gear image and type gear in the Property inspector Name
text box. Notice that you see the image that is selected and the size at the
- Choose Window > Behaviors.
The Behaviors panel opens.
- Click the plus (+) button and
choose Swap Image from the pop-up menu.
In the Swap Image dialog box, click Browse and select the Ad_gear_f2.gif
image you downloaded earlier to your student folder. Click Select (Windows) or
Open (Macintosh) and then click OK to close the Swap Image dialog box.
- Save your file and preview
in the browser.
- Repeat steps 3–5 and
add rollovers to the remaining buttons. Don’t forget to name
each image before you add the Swap Image behavior. The rollover images end
After you select an action, Dreamweaver adds that action to the Behaviors
panel list box. Dreamweaver also adds an appropriate event (or events) for that
action. The event is what causes the action to occur; for example, an event
could be the user clicking a button. The action is the result of the user
interaction. If you want to change the event, select the event in the Behaviors
panel and then pick a new one from the pop-up menu (the arrow) to the right of
the event (see Figure 5-6). The events in the pop-up menu might change
depending on the action and the browser type you choose. The Events pop-up menu
appears only after you add an action and select the event.
Adding Several Actions to an Object
After you define a user event, you can attach several actions to that event.
To add another event, select the object with the first event and use the
Behaviors panel to add another action. To change the order in which the actions
are executed, use the up arrow or down arrow in the Behaviors panel.
For the next exercise you want two images to swap when the user rolls over
the buttons on the left. You already have one of the rollovers done. Two
actions need to occur on the same onMouseOver event. Instead of adding a new
action, you edit the existing Swap Image action and add a new swap image. The
graphics should have been downloaded from the graphics zip file.
- In the latest.htm file
you’ve been using, select the “Welcome to Compass”
graphic. This is the graphic you want to change when the user rolls over
each of the buttons.
- Select the round biking
image to the left. This image has a Swap Image behavior assigned.
- Double-click the Swap Image
action in the Behaviors panel.
- The Swap Image dialog box
opens. Select “text” in the list.
- Click Browse and select
biking_text.gif from your student folder, and then click Select (Windows)
or Open (Macintosh). Before you click OK to exit the dialog box, look at
the Images list in the Swap Image dialog box as shown in above. Images
that have an asterisk at the end of the name have been assigned a swap
image. This is a quick way to verify which images will swap to other
- Repeat steps 4–6 for
all the round buttons.
- Save your file again and
test in the browser. When you roll over each button, the button should
swap and an image should swap in the Welcome area. When you roll off the
button, both the button and the Welcome text graphic should restore to their
- Close your file.