new project 9 - las positas collegelpc1.laspositascollege.edu/lpc/cdasilva/dw2-proj9.pdf · 2007....

Dreamweaver 8

Project 9

Media Objects

Project 9: Media Objects 2

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


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


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


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


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


Adding Flash Text


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


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


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



• 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


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



• 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



• 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




• 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


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



• Change the W value to 200 and the H value to 45. Type CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95in 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




• 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



• Use Table 9-4 on page DW 729 to add the other parameters and values to the Parameters dialog box


• 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


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



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


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



• 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



• 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


Closing the Web Site and Quitting Dreamweaver

• Click the Close button on the upper-right corner of the Dreamweaver title bar

new project 9 - las positas collegelpc1.laspositascollege.edu/lpc/cdasilva/dw2-proj9.pdf · 2007....

Documents