Project 9 Media Objects

Project 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 Project 9: Media Objects

Project Objectives Embed a sound file in a Web page Insert a video into a Web page Check for plug-ins Describe Shockwave and how to insert a Shockwave movie into a Web page Project 9: Media Objects

Project Objectives 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 Use the Results panel to validate a Web page, check links, and check target browsers Project 9: Media Objects

Copying Data Files to the Colorado Parks Web Site Click the Start button on the Windows taskbar and then click My Computer Double-click Local Disk (C:) and then navigate to the location of the data files for Project 9 Double-click the DataFiles folder, double-click the Proj09 folder, and then double-click the parks folder Right-click the media folder to display the context menu and then copy the media folder to the your name\parks folder using the Copy and Paste commands on the context menu Project 9: Media Objects

Copying Data Files to the Colorado Parks Web Site Click the Back button and navigate to the DataFiles folder. Double-click the DataFiles folder, double-click the Proj09 folder, and then double-click the parks folder. Use the context menu to copy the splash.htm file Navigate to the your name/parks folder and use the context menu to paste the splash.htm file into the folder Close the My Computer window Project 9: Media Objects

Starting Dreamweaver and Opening the Colorado Parks Web Site Click the Start button on the Windows taskbar Point to All Programs on the Start menu, point to Macromedia on the All Programs submenu, and then click Macromedia Dreamweaver 8 on the Macromedia submenu If necessary, display the panel groups, and close the Property inspector Project 9: Media Objects

Starting Dreamweaver and Opening the Colorado Parks Web Site Click the Files panel box arrow on the Files pop-up menu and then click Colorado Parks Open the splash.htm page If necessary, press CTRL+F2 to display the Insert bar and then select the Common category Project 9: Media Objects

Starting Dreamweaver and Opening the Colorado Parks Web Site Project 9: Media Objects

Adding Flash Text Collapse the panel groups. Click the first cell in table01 Click the Media pop-up button on the Insert bar and then point to Flash Text Click Flash Text Click the Font box arrow, scroll down, and then click Comic Sans MS in the Font list. If the Comic Sans MS font is not available on your computer, select another font of your own choosing or as directed by your instructor If necessary, double-click the Size text box and type 30 Project 9: Media Objects

Adding Flash Text Double-click the Color hexadecimal text box, type #000000, if necessary, and then press the TAB key In the Rollover color hexadecimal text box, type #F8E4BF and then press the TAB key. Type A world of adventure – Colorado National Parks in the Text box Click the Bg color hexadecimal text box. Type #993333 and then press the TAB key Type media/heading01 in the Save as text box Click the OK button Project 9: Media Objects

Adding Flash Text Click the second cell in table01 and then click the Flash Text command on the Media pop-up menu Add the following attributes to the Insert Flash Text dialog box: Font: Comic Sans MS; Size: 20; Color: #000000; Rollover color: #F8E4BF; Text: Visit a Colorado park for a vacation of a lifetime!; Bg color: #993333; and Save as: media/heading02 Click the OK button. Press CTRL+S to save the Web page. Display the Property inspector Press F12 to view the page in the browser. Move the mouse pointer over each line of text to verify that the text changes color. Close the browser Project 9: Media Objects

Adding Flash Text Project 9: Media Objects

Adding a Flash Movie If necessary, scroll down and then click the movie layer Display the panel groups and then click the Assets tab. Click the Flash icon in the Assets panel and then drag globe.swf to the movie layer Hide the panel groups Project 9: Media Objects

Adding a Flash Movie Click the Flash text box in the Property inspector and then type globe as the movie name Click the Play button in the Property inspector Click the Stop button in the Property inspector Project 9: Media Objects

Adding a Flash Movie Project 9: Media Objects

Adding a Link to Go to the Index Page Scroll up in the Document window and then click table02 Type Skip Intro and then select the text. Click the BOLD button. Click the hexidecimal text box and type #993333. Press the TAB key 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 and then click anywhere on the page Project 9: Media Objects

Adding a Link to Go to the Index Page Click the Save button on the Standard toolbar and then press the F12 key to view the page in your browser Click the link to verify that it works Close the browser and return to Dreamweaver Project 9: Media Objects

Adding a Link to Go to the Index Page Project 9: Media Objects

Adding a Background Sound and Setting Parameters Hide the Property inspector. Click below the movie layer Click the Media pop-up button and then point to Plugin on the Media pop-up menu Click Plugin If necessary, navigate to and select the media folder and then click colorado in the list of files Project 9: Media Objects

Adding a Background Sound and Setting Parameters Click the OK button Verify that the placeholder is selected. Display the Property inspector and then type 2 in the W text box Press the TAB key and then type 2 in the H text box. Press the ENTER key Click the Parameters button Project 9: Media Objects

Adding a Background Sound and Setting Parameters Type hidden in the Parameter column. Press the TAB key two times Type true in the Value column and then press the TAB key two times Type autoplay and then press the TAB key two times. Type true in the Value column 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 Project 9: Media Objects

Adding a Background Sound and Setting Parameters Click the OK button Save the file Press the F12 key to open the browser and verify that the audio works. A speaker or headphones must be attached to the computer for you to hear the audio. Close the browser Close the splash.htm page Project 9: Media Objects

Adding a Background Sound and Setting Parameters Project 9: Media Objects

Embedding an Audio File Open the natl_parks.htm page and then hide the panel groups Click to the right of the heading text, Colorado National Parks, and then press the ENTER key Click the Media pop-up button and then point to ActiveX Click ActiveX Click the ActiveX name box in the Property inspector and then name the ActiveX control birdsound Project 9: Media Objects

Embedding an Audio File Change the W value to 200 and the H value to 45. Type CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 in the ClassID text box Press the ENTER key 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, click the Look in box arrow and then, if necessary, navigate to the media folder Click the Files of type box arrow and then click All Files. Click the birdsound file. Verify that Document is selected in the Relative to box Project 9: Media Objects

Embedding an Audio File Click the OK button Click the Parameters button in the Property inspector If necessary, click the Plus (+) button to display the insertion point in the Parameter column Type FileName and then press the TAB key two times. Type media/birdsound.au in the Value column Press the TAB key two times Project 9: Media Objects

Embedding an Audio File Use Table 9-4 on page DW 729 to add the other parameters and values to the Parameters dialog box Click the OK button Click the Save button on the Standard toolbar Press the F12 key to view the Web page in your browser. Click the Play button to listen to the audio. A speaker or headphones are necessary to hear the sound. If a Dreamweaver dialog box is displayed, read the information and then click the OK button Close the browser Project 9: Media Objects

Embedding an Audio File Project 9: Media Objects

Adding Video to a Web Page If necessary, collapse the panel groups. Scroll to the bottom of the page and then click to the right of the Home link Click the ActiveX button on the Common category Insert bar Click the ActiveX name box in the Property inspector and then type gps as the name Press the TAB key and then change the W value to 320. Press the TAB key and then change the H value to 240 Click the ClassID box arrow and then select the ClassID value you entered earlier in this project Project 9: Media Objects

Adding Video to a Web Page Click the Align box arrow and align the ActiveX control to the right Click the Embed check box in the Property inspector Click the Browse for File icon to the right of the Src text box If necessary, navigate to 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 Project 9: Media Objects

Adding Video to a Web Page Click the Parameters button in the Property inspector and then click the Plus (+) button Apply the steps you used previously to add the parameters and values shown in Table 9-6 on page DW 734 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. Click the Play button. Close the browser to return to Dreamweaver. Close the natl_parks page. Project 9: Media Objects

Adding Video to a Web Page Project 9: Media Objects

Verifying Internal Links with the Link Checker Display the panel group and then open the index.htm page Click slideshow.htm in the Files list to select the name and then press the F2 key Type slide_show.htm to rename the file and then press the ENTER key If the Update Files dialog box is displayed, click the Don’t Update button Project 9: Media Objects

Verifying Internal Links with the Link Checker Press the F5 key to refresh the panel groups and then hide the panel groups Click File on the menu bar, point to Check Page, and then point to Check Links Click Check Links Double-click index.htm in the Results panel Project 9: Media Objects

Verifying Internal Links with the Link Checker Double-click the Link box in the Property inspector and type slide_show.htm as the new link. Press the ENTER key Click the Check Links arrow and then click Check Links in Current Document Save the index file Project 9: Media Objects

Verifying Internal Links with the Link Checker Project 9: Media Objects

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

Project 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 Project 9: Media Objects

Project Summary Embed a sound file in a Web page Insert a video into a Web page Check for plug-ins Describe Shockwave and how to insert a Shockwave movie into a Web page Project 9: Media Objects

Project Summary 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 Use the Results panel to validate a Web page, check links, and check target browsers Project 9: Media Objects

Project 9 Complete Media Objects