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

3. Create an ID style for the div named #paint1 defi ned in the cowboy_styles.css style
sheet. The style should provide a 5 pixel margin and a 160 px width for the div.
4. Delete the placeholder text from the div, and then open the Behaviors panel in the
Tag Inspector.
5. Select the text in the second cell of the fi rst row of the table, switch to Code view,
copy all the code in the cell, and then return to Design view. ( Hint : Copy all the
code between the opening and closing td tags.)
6. Select the cowpunching.jpg graphic.
7. Add the Set Text of Container behavior. ( Hint : Click the Add behavior button, point to
Set Text, and then click Set Text of Container.)
8. In the Set Text of Container dialog box, click the Container button, click div “paint1”,
and then, in the New HTML box, paste the code you copied.
9. In the left column of the Behaviors panel, select <A> onMouseOver so that when the
user mouses over the cowpunching.jpg image, the text is displayed in the new div.
10. Delete the text in the second column of the fi rst row and remove any formatting from
the cell, then merge the second and third cells in the row.
11. Save the page and the style sheet, preview the page in a browser, mouse over the
image to display the text in the div, and then close the browser.
12. Repeat Steps 2 through 11 for the utica.jpg, grubpile.jpg, and bucker.jpg images,
using #paint2 and the content from the second cell in the second row of the table,
for the second div, #paint3 and the content from the second cell in the third row for
the third div, and so on.
13. Open the index.html page in Design view, and then, at the end of the last line
of content between the paragraph tags, insert the cr_art.swf fi le located in the
Tutorial.07\Case2 folder included with your Data Files, saving a copy of the fi le in a
media folder you create in the local root folder. Use Charles M Russell paintings as
the title.
14. Top-align the Flash movie in the page.
15. Save the page, preview the page in a browser, view the animation, and then close
the browser and the page.
16. Upload the site to your remote server, and then preview the site over the Internet.
17. Submit the fi nished fi les to your instructor.

Case Problem 3

Insert an
interactive
success game
and add a
custom script
that randomly
generates
motivational
statements into
a Web site for a
life coach.

Data Files needed for this Case Problem: successbox.dcr, nu_randomSuccess.js

Success With Tess Tess wants to add some interactive elements to the Success With Tess
site. Another team member has created an interactive success game that will increase
user involvement in the site. A third team member has created a custom script that ran-
domly generates motivational sayings. Tess wants you to add the Shockwave game and
script to the site.

1. Open the Success With Tess site you modifi ed in Tutorial 6, and then open the index.
html page in Design view.
2. To the left of the fi rst line of content after the TESS-timonials subheading, insert
the successbox.dcr Shockwave movie fi le located in the Tutorial.07\Case3 folder
included with your Data Files, copying the fi le to a media folder that you create
in the local root directory of the site, and typing An interactive success game as
the title.
3. Select the movie, if necessary, and then, in the Property inspector, change the width
and height of the movie to 500 and set the alignment to right, then, in the page, add
extra spaces to extend the page background below the movie.