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

Review Assignments

Practice the skills
you learned in
the tutorial.

Data Files needed for the Review Assignments: antifest.fl v, sunshine.swf, sunshine.mp3

Dan wants you to add some media elements to the antifest site to increase interest in the
fest and to get exposure for the bands that will be appearing at the fest. First, you'll add
a movie to the home page that promotes the bands playing at next year's fest. Then, you
will add a sound-only Flash movie and a link to an MP3 fi le to the lineup.html page so
users can hear a sample of a sloth child song.

1. Open the antifest 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 under the news subheading, insert a new div at
the insertion point, and then create a new style for the div from the Insert Div Tag
dialog box.
3. Create an ID style named #promo in the antistyles.css style sheet. In the Box cat-
egory, set the fl oat to right and set the margins to 5.
4. Delete the placeholder content from the promo div, and then insert the antifest.fl v
fi le located in the Tutorial.07\Review folder included with your Data Files, saving a
copy of the antifest.fl v fi le in a media folder you create in the local root folder.
5. Select Halo Skin 2 as the skin, have Dreamweaver detect the size, set the movie to
autoplay and autorewind. If a dialog box opens, asking to include additional scripts,
click the Yes button to add those scripts to the root folder.
6. Preview the page in Live View. The movie plays automatically, but looks too large in
the page and squishes the text that fl ows around it.
7. Toggle off Live View, select the movie, and then, in the Property inspector, check the
Constrain check box, if necessary, and enter 200 in the W box. The movie's width
shrinks to 200px and its height adjusts proportionally.
8. Save the page, copying dependent fi les as needed, save the style sheet, preview the
page in a browser, and then close the browser.
9. Open the lineup.html page in Design view. In the middle column, click after the
sloth child text, press the Enter key to move the insertion point to the next line, type
song samples: (including the colon), and then press the Enter key to move to the
next line.
10. Insert the sunshine.swf fi le located in the Tutorial.07\Review folder included with
your Data Files, saving a copy of the fi le in the media folder in the local root folder.
11. Preview the page in Live View, click the Flash sound button to play the song, and
then toggle off Live View.
12. Copy the sunshine.mp3 fi le located in the Tutorial.07\Review folder to the media
folder in the local root folder.
13. Move the insertion point to the line below the Flash movie, type sunshine mp3 ,
and then link the text to the sunshine.mp3 fi le and target the link to open in a
_blank page.
14. Save the page, preview the page in a browser, click the sunshine mp3 link to test
it, close the new page, click the Flash sound button to test it, and then close the
browser.
15. Add the Mark of the Web to all the pages of the site.
16. Upload all the pages and dependent fi les to your remote server, and then preview
the site over the Internet, testing the media elements.
17. Submit the fi nished fi les to your instructor.