Dreamweaver CS4 Concepts and Techniques Chapter 8 Media Objects.

Dreamweaver CS4Concepts and Techniques

Chapter 8

Media Objects

http://www.scseries.com/

Chapter 8: Media Objects 2

Chapter Objectives

• Describe media objects• Insert Flash text into a Web page• Insert a Flash movie into a Web page• Add a background sound to a Web page• Embed a sound file in a Web page• Insert a video into a Web page



Chapter Objectives

• Use the Results panel group to validate a Web page and check links

• Check for plug-ins• Describe Shockwave and how to insert a

Shockwave movie into a Web page• Describe a Java applet and how to insert an

applet into a Web page• Describe the ActiveX control and how it differs

from plug-ins


Chapter 8: Media Objects

Starting Dreamweaver and Opening the Alaska Parks Web Site

• Click the Start button on the Windows taskbar• Click Adobe Dreamweaver CS4 on the Start

menu or point to All Programs on the Start menu, and then click Adobe Dreamweaver CS4 on the All Programs list

• If necessary, display the panel groups• If the Alaska Parks Web site hierarchy is not

displayed, click the Files panel button and then click Alaska Parks on the Files pop-up menu to display the Alaska Parks Web site hierarchy in the Files panel

4



Copying Data Files to the Alaska Parks Web Site• Click the Files panel button, and then click the name of

the drive containing your data files, such as Removable Disk (M:)

• If necessary, click the plus sign (+) next to the folder containing your data files to expand that folder, and then click the plus sign (+) next to the Chapter08 folder to expand it

• Expand the parks folder to display the data files• Click the media folder to select it and then copy it to the

parks folder. If necessary, expand the folder to display the files



Copying Data Files to the Alaska Parks Web Site



Adding a Table and Flash Text

• Open a new blank HTML page and then save the page as splash.htm

• Apply the parks_bkg.jpg background image to the page

• Title the page Splash Page• Click the page and then press the ENTER key• Add a table with two rows, one column, a width of 75

percent, Border thickness of 3 pixels, and Cell padding of 5. Leave the Cell spacing text box blank




• Name the table table01 in the Property inspector and then press the TAB key. If necessary, click the Common tab on the Insert bar

• Click the first cell in table01• If necessary, double-click the media folder in the Files

panel and then drag the heading01.swf file to the first cell in the table

• Type heading01 in the FlashID box in the Property inspector to name the media object, and then press the tab key

• Drag the heading02.swf file to the second cell in the table




• Type heading02 in the FlashID box in the Property inspector and then press tab

• Press CTRL+S to save the Web page• Collapse the panel groups• Select the table and then align the table to the

right• Click the heading02 object in row 2 to select the

heading




• Click the Align button in the Property inspector and align the heading to the right

• Click anywhere on the page to deselect the heading

• Save the page, and then press F12 to view the page in the browser. Allow blocked content, if necessary

• Close the browser






Turning off Looping

• Click the heading01.swf file to select the animated text object

• Click the Loop check box in the Property inspector to remove the check mark



Changing Background Colors with the Wmode Element

• Click the heading01.swf file to select the animated text object

• In the Property inspector, click the Wmode button and then select window to display a background color for the object

• Type #0033CC in the Bg text box and then press tab to display a blue background color for the heading01 Flash text object

• Click the heading02.swf object to select it




• Click the Wmode button and then select transparent

• Save the splash page and then view it in your browser

• Close the browser






Adding a Flash Movie

• If necessary, click to the right of table01 and then press Enter four times

• Display the panel groups and then click the Assets tab

• Click the SWF icon in the Assets toolbar to display SWF files

• Click the globe.swf file in the Assets panel and then drag the file to the insertion point. Scroll as necessary to display the entire SWF placeholder




• Collapse the panel groups• Click the Flash ID text box in the Property

inspector, type globe as the movie name, and then press the tab key

• Click the Play button in the Property inspector to play the movie in the document window

• Click the Stop button in the Property inspector to stop the movie. The button changes back to Play






Adding a Link to go to the Index Page

• In the document window, click below table01 and above the Flash movie

• Insert a one-row, one-column table with a width of 35 percent, a Border thickness of 3, and Cell padding of 5

• Align the table to the right• Type Skip Introduction in the table, and then

select the text• Click the Bold button, apply Heading 2, and then

center the text




• With the text still selected, display the panel groups and then click the Files tab. If necessary, scroll down in the Files panel and then drag index.htm to the Link box in the Property inspector

• Press the ENTER key to accept the link to the index.htm page, and then click anywhere in the document window

• Click the Save button on the Standard toolbar and then press the F12 key to view the page in your browser

• Click the Skip Introduction link to verify that it works• Close the browser and return to Dreamweaver

20






Adding a Background and Setting Parameters• Collapse the Property inspector and then scroll down to

the bottom of the page• Click below the globe Flash movie so that the insertion

point is blinking at the left margin below the movie object• Click the Media button arrow in the Common category on

the Insert bar to display the Media pop-up menu, and then point to Plugin

• Click Plugin to display the Select File dialog box• Navigate to and open the media folder, and then click

alaska in the list of files



Adding a Background and Setting Parameters

• Click the OK button to insert a 32 x 32 pixel placeholder for the background sound

• With the placeholder still selected, expand the Property inspector and then type alaska_wav in the Plugin text box

• Press the TAB key to name the sound object• Click the Parameters button to display the

Parameters dialog box



Adding a Background and Setting Parameters• Type hidden in the Parameter column. Press the TAB key two

times and then press the DEL key to delete the current value• Type true in the Value column to hide the plug-in controls, and

then press the TAB key two times to move the insertion point to the Parameter column

• Type autoplay and then press the TAB key two times. Type true in the Value column to have the sound start playing automatically

• Press the TAB key two times. Type loop in the Parameter column, press the TAB key two times, and then type false in the Value column so that the media does not loop (or start playing again when it reaches the end of the file). Press the TAB key to finish adding the values




• Click the OK button to apply the parameters you set to the sound file plug-in

• Save the splash.htm page• Press the F12 key to open the browser and verify

that the audio works• Close the browser and then close the splash.htm

page






Embedding an Audio File

• Open the preserves.htm page and then hide the panel groups

• Click to the right of the heading text, Alaska National Preserves, and then press the ENTER key

• If necessary, center the insertion point• Click the Media button arrow and then point to ActiveX on

the pop-up menu• Click ActiveX to insert an ActiveX placeholder on the page• Click the ActiveX name box in the Property inspector and

then type birdsound as the name of the ActiveX control




• Change the W value to 200 and the H value to 45 to increase the size of the control

• Type CLSID:22d6f312-b0f6-11d0-94ab0080c74c7e95 in the ClassID text box

• Press the ENTER key to add the ClassID number. Check the number to verify that it is correct and that alphabetic letters are lowercase

• Click the Embed check box and then click the Browse for File icon to the right of the Src text box

• If necessary, when Dreamweaver displays the Select Netscape Plug-In File dialog box, navigate to the media folder

• Click the Files of type button arrow and then click All Files




• Click the birdsound file. Verify that Document is selected in the Relative to button

• Click the OK button to create the link to the source file. When viewed in a browser, this placeholder will contain the audio controls

• Click the Parameters button in the Property inspector to set parameters for the ActiveX control you just inserted

• Type FileName as the first parameter and then press the tab key two times

• Type media/birdsound.au in the Value column to specify the path and file name of the embedded sound object




• Press the TAB key two times• Use Table 8–4 on page DW 582 to add the other

parameters and values to the Parameters dialog box

• Press TAB after the last entry• Click the OK button• Click the Save button on the Standard toolbar to

save the file




• Display the Files panel and then, if necessary, double-click the Scripts folder to view the files stored in this folder

• Press the F12 key to view the Windows Media Player audio control in the Web page in your browser. Allow blocked content, if necessary

• Click the Play button to listen to the audio. A speaker or headphones are necessary to hear the sound

• Close the browser and then close the preserves page






Adding Video to a Web Page

• Open the index.htm page• Collapse the panel groups. Scroll to the bottom of the

page and then click to the right of the links table• Press ENTER • Click Format on the Application bar, point to Align,

and then click Right to move the insertion point to the right of the page

• Click the Media button arrow, and then point to ActiveX on the pop-up menu

• Click ActiveX to insert an ActiveX control on the page




• Click the ActiveX text box in the Property inspector and then type gps as the name for the ActiveX object

• Press the TAB key and then change the W value to 320

• Press the tab key and then change the H value to 240. Press the TAB key

• Click the ClassID box arrow and then select the ClassID value you entered earlier in this chapter

• Click the Align button and then click Right

34




35

• Scroll down to view the right-aligned ActiveX control, if necessary

• Click the Embed check box in the Property inspector to embed the control on the page

• Click the Browse for File icon to the right of the Src text box

• If necessary, open the media folder, click the Files of type box arrow, and then select All Files

• Click the Tracking kids with GPS file




• Click the OK button to add the file name and path to the Src text box and make the Tracking kids with GPS file the source of the video control

• Verify that the ActiveX placeholder is selected• Click the Parameters button in the Property

inspector and then, if necessary, click the Plus (+) button in the Parameters dialog box

• Apply the steps you used on pages DW 579–580 to add the parameters and values shown in Table 8–6 to the Parameters dialog box




• Click the OK button• Save the page. Press the F12 key to display the

page in your browser. Scroll down to display the video file, and then click the Play button

• Close the browser to return to Dreamweaver






Verifying Internal Links with the Link Checker• Make sure the index.htm page is open in

Dreamweaver• Scroll to the top of the page, display the panel

groups, and then close the Property inspector• Click historical_sites.htm in the Files list to select

the name and then press the F2 key• Type historicalsites.htm to rename the file and

then press the ENTER key• Press the F5 key to refresh the panel groups and

then hide the panel groups



Verifying Internal Links with the Link Checker

40

• Click Window on the Application bar, point to Results, and then point to Link Checker

• Click Link Checker to display the Results panel group• Click the Check Links button (the green arrow) to the

left of the inspector to display Link Checker options• Click Check Links in Current Document• Display the Files panel and rename the

historicalsites.htm file to the original file name — historical_sites.htm

• Close the Results panel group



Verifying Internal Links with the Link Checker



Closing the Web Site and Quitting Dreamweaver• Click the Close button on the upper-right corner of the

Dreamweaver title bar



Chapter Summary

• Describe media objects• Insert Flash text into a Web page• Insert a Flash movie into a Web page• Add a background sound to a Web page• Embed a sound file in a Web page• Insert a video into a Web page



Chapter Summary

• Use the Results panel group to validate a Web page and check links

• Check for plug-ins• Describe Shockwave and how to insert a

Shockwave movie into a Web page• Describe a Java applet and how to insert an

applet into a Web page• Describe the ActiveX control and how it differs

from plug-ins


Dreamweaver CS4Concepts and Techniques

Chapter 8 Complete

Media Objects


Date post:	18-Dec-2015
Category:	Documents
Upload:	victoria-rich
View:	226 times
Download:	0 times

Dreamweaver CS4 Concepts and Techniques Chapter 8 Media Objects.

Documents