Adding Behaviors and Rich Media - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 434

Add a Flash
animation to
promote a
skateboard
team and add
a custom script
that randomly
displays quotes
from skaters.

Case Problem 1

Data Files needed for this Case Problem: mobius_team.swf, nu_randomSk8.js

Moebius Skateboards Corey created a short Flash animation to promote the members
of the Moebius skateboard team. In addition, a member of the design team created a
custom script that randomly displays quotations from various skaters. Corey wants you to
add both of these elements to the home page of the site to add more interest to the page.

1. Open the Moebius Skateboards site you modifi ed in Tutorial 6, and then open the
index.html page in Design view.
2. Click to the left of the fi rst line of content after the Check Out Team Moebius head-
ing, insert a div at the insertion point, and then create a new style for the div.
3. Create an ID style named team in the moebius_styles.css style sheet. In the Box cat-
egory, set the fl oat to right and set the margins to 5.
4. Delete the placeholder text from the team div, and then insert the mobius_team.swf
fi le located in the Tutorial.07\Case1 folder included with your Data Files, saving a
copy of the animation in a media folder that you create in the local root folder of the
Moebius Skateboards site and adding Promotional animation featuring members of
the Moebius Skate Team as the animation's title.
5. Select the movie in the Document window, if necessary, and then uncheck the Loop
check box in the Property inspector.
6. If necessary, move the insertion point after the last content in the page, and then
press the Enter key until the content background is displayed behind the entire
animation.
7. Preview the animation in Live View, and then toggle off Live View.
8. At the top of the index.html page, delete the quotation, and then insert the
nu_randomSk8.js script located in the Tutorial.07\Case1 folder, adding a copy of the
script to the Scripts folder in the local root folder. ( Hint : Dreamweaver created the
Scripts folder when you added the fl ash animation to the site.)
9. Save the page and the style sheet, preview the page in a browser, view the animation
you added to the page and reload the page several times to ensure that different quo-
tations appear at the top of the page, and then close the browser and the page.
10. Upload the site to your remote server, and then preview the site over the Internet,
testing the new elements.
11. Submit the fi nished fi les to your instructor.

Case Problem 2

Add an
animation and a
behavior so that
a user mouses
over a painting
in the animation
to display a
description of
that painting.

Data File needed for this Case Problem: cr_art.swf

Cowboy Art Society Moni wants you to insert an animation that displays some of
Charles Russell's artwork into the home page of the Cowboy Charlie site. In addition,
you will add a prewritten behavior to the artwork.html page that displays the text from
the second column of the table in a div when a user mouses over a painting image in the
fi rst column. Moving the text from the second column to the div frees up more space for
the third column.

1. Open the Cowboy Charlie site you modifi ed in Tutorial 6, and then open the
artwork.html page in Design view.
2. Click the fi rst painting (Cowpunching Sometimes Spells Trouble), press the Right
arrow key, and then insert a new div at the insertion point.