1 / 45

Chapter 8

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

tao
Download Presentation

Chapter 8

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  4. 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

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

  20. 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

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

  34. 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

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

  40. Verifying Internal Links with the Link Checker • 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 Chapter 8: Media Objects

  45. Chapter 8 Complete Media Objects

More Related