Web Multimedia and Interactivity - Web Development and Design Foundations with XHTML - page 464

3. Replace the fishcreeklogo.gif with a Flash animated banner called
fishcreeklogo.swf on each page. The Flash media is 400 pixels in width and 80
pixels in length.

Hands-On Practice Case

1. Modify the fishcreek.css file.
● Modify the logo id. Change the left padding to 120 pixels. This will align the
new Flash logo with the right column.
● Create a new id called movie . Configure the movie id to float to the right,
have a 20 pixel left margin, and a 50 pixel bottom margin.
2. Add a video to the Ask the Vet page (askvet.html).

Copy the sparkycaptioned.mov video file from the student files in the
Chapter11/CaseStudyStarters folder and save it to your fishcreekcss folder.

●

Launch Notepad and open the askvet.html file in the fishcreekcss folder.
Modify the questions and answers on the askvet.html page to display a video
along the right side of the page as shown in Figure 11.20. Use the <object>
and <param /> elements to configure the video for display. See Section 11.5 as
a guide. Use the attributes and values listed in Table 11.7 as you configure
your page.

●

Save your page. Test your page using several browsers.

Table 11.7 Configuration requirements for sparky captioned .mov

Attribute Value

sparkycaptioned.mov

src

sparkycaptioned.mov

data

135

height

160

width

false

autoplay

true

controller

clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B

classid

http://www.apple.com/qtactivex/qtplugin.cab

codebase

video/quicktime

type

3. Replace the logo image with a Flash animation on the Home page (index.html).

Copy the fishcreeklogo.swf file from the student files in the Chapter11/
CaseStudyStarters folder and save it to your fishcreekcss folder.

●

Launch Notepad and open the Home page (index.html) in the fishcreekcss
folder. Modify index.html to display the Flash file (fishcreeklogo.swf) instead
of the image (fishcreeklogo.gif). See Hands-On Practice 11.4 for help. Save
your page. Test your page using several browsers. You should see the logo
animate.

●

Modify the logo area on the rest of the Fish Creek Web pages to create a cohe-
sive site with a consistent design. Save and test your pages.

●