Dreamweaver CS4 Concepts and Techniques Chapter 8 Media Objects

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 8: Media Objects 3 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

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 Chapter 8: Media Objects 4

5 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

Chapter 8: Media Objects 6 Copying Data Files to the Alaska Parks Web Site

Chapter 8: Media Objects 7 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

Chapter 8: Media Objects 8 Adding a Table and Flash Text 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

Chapter 8: Media Objects 9 Adding a Table and Flash Text 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

Chapter 8: Media Objects 10 Adding a Table and Flash Text 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

Chapter 8: Media Objects 11 Adding a Table and Flash Text

Chapter 8: Media Objects 12 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

Chapter 8: Media Objects 13 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

Chapter 8: Media Objects 14 Changing Background Colors with the Wmode Element Click the Wmode button and then select transparent Save the splash page and then view it in your browser Close the browser

Chapter 8: Media Objects 15 Changing Background Colors with the Wmode Element

Chapter 8: Media Objects 16 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

Chapter 8: Media Objects 17 Adding a Flash Movie 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

Chapter 8: Media Objects 18 Adding a Flash Movie

Chapter 8: Media Objects 19 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

Adding a Link to go to the Index Page 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 Chapter 8: Media Objects 20

Chapter 8: Media Objects 21 Adding a Link to go to the Index Page

Chapter 8: Media Objects 22 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

Chapter 8: Media Objects 23 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

Chapter 8: Media Objects 24 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

Chapter 8: Media Objects 25 Adding a Background and Setting Parameters 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

Chapter 8: Media Objects 26 Adding a Background and Setting Parameters

Chapter 8: Media Objects 27 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

Chapter 8: Media Objects 28 Embedding an Audio File 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

Chapter 8: Media Objects 29 Embedding an Audio File 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

Chapter 8: Media Objects 30 Embedding an Audio File 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

Chapter 8: Media Objects 31 Embedding an Audio 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

Chapter 8: Media Objects 32 Embedding an Audio File

Chapter 8: Media Objects 33 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

Adding Video to a Web 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 Chapter 8: Media Objects 34

Adding Video to a Web Page Chapter 8: Media Objects 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

Chapter 8: Media Objects 36 Adding Video to a Web Page 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

Chapter 8: Media Objects 37 Adding Video to a Web Page 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

Chapter 8: Media Objects 38 Adding Video to a Web Page

Chapter 8: Media Objects 39 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 Chapter 8: Media Objects 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

Chapter 8: Media Objects 41 Verifying Internal Links with the Link Checker

Chapter 8: Media Objects 42 Closing the Web Site and Quitting Dreamweaver Click the Close button on the upper-right corner of the Dreamweaver title bar

Chapter 8: Media Objects 43 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 8: Media Objects 44 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 CS4 Concepts and Techniques Chapter 8 Complete Media Objects