Project 9

1
Project 9

• Media Objects

2
Project Objectives

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

3
Project Objectives

• Insert a video into a Web page
• 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

4
Starting Dreamweaver and Closing Open Panels

• Start Dreamweaver. If necessary, maximize the
  Document window. Press the F4 key to close all
  open panels
• Press the F8 key to display the Site panel.
  Select the Florida Parks Web site
• If necessary, use the View menu to display the
  Standard toolbar. If necessary, turn off the
  rulers
• Use the Window menu to display the Property
  inspector and the Insert bar

5
Starting Dreamweaver and Closing Open Panels
6
Copying Data Files to the Florida Parks Web Site

• Click the plus sign () to the left of the
  Desktop icon in the Site panel. Click the plus
  sign to the left of the My Computer icon and then
  navigate through the file hierarchy to the Data
  Files folder as you did in Project 2
• Click the plus sign to the left of the Proj09
  folder and then click the plus sign to the left
  of the parks folder
• Right-click the Media folder and then copy the
  Media folder to the jonesw/parks folder using the
  Copy and Paste commands on the context menus
• Copy the data file to the jonesw/parks/ folder
  using the Copy and Paste commands on the context
  menus
• Click the minus sign to the left of the Desktop
  icon to collapse the file list

7
Buttons on the Media Tab
8
Adding Flash Text

• Close the Untitled-1 page that opened when you
  started Dreamweaver and then open the splash.htm
  file. Click the Media tab on the Insert bar
• Click the first cell in table01 and then point to
  the Flash Text button on the Media tab
• Click the Flash Text button. Point to the Font
  box arrow
• Click the Font box arrow, scroll down, and then
  click Comic Sans MS from the Font list. If the
  Comic Sans MS font is not available on your
  computer, select another one of your own choosing
  or as directed by your instructor. Point to the
  Color hexadecimal text box

9
Adding Flash Text

• Double-click the Color hexadecimal text box, type
  00FFFF and then press the TAB key. In the
  Rollover Color text box, type 0000CC and then
  press the TAB key. Type Florida welcomes the
  world! in the Text text box. Click the Bg Color
  hexadecimal text box. Type 009999 and then press
  the TAB key. Type Media/heading01.swf in the Save
  As text box and then point to the OK button
• Click the OK button. Click cell 2 in table01 and
  then click the Flash Text button on the Media tab

10
Adding Flash Text

• Add the following attributes to the Insert Flash
  Text dialog box. Font Comic Sans MS, Size 20,
  Color 00FFFF, Rollover Color 0000CC, Text
  Visit a Florida park for a vacation of a
  lifetime!, Bg Color 009999, and Media/
  heading02.swf in the Save As text box. Point to
  the OK button
• Click the OK button

11
Adding Flash Text
12
Adding a Flash Movie

• If necessary, scroll down and then click in
  table02
• Click the plus sign to the left of the Media
  folder and then drag globe.swf to table02
• Click the Flash text box in the Property
  inspector and then type globe as the movie name.
  Point to the Play button
• Click the Play button in the Property inspector
• Click the Stop button in the Property inspector

13
Adding a Flash Movie
14
Adding a Link to Go to the Index Page

• Scroll up in the Document window and then click
  in table03
• Type Skip Intro and then select the text
• If necessary, scroll down in the Site panel and
  then drag index.htm to the Link box in the
  Property inspector. Press the ENTER key
• Click the Save button on the Standard toolbar and
  then press the F12 key to view the page in your
  browser. Move the mouse pointer over the text in
  table01 to view the text color change. Click the
  link to verify that it works. Close the browser
  and return to Dreamweaver

15
Adding a Link to Go to the Index Page
16
Linking to a Sound File

• Click below table01 and then type Visit a Florida
  State Park today. and then select the text you
  just typed
• Drag the florida.wav file from the Site panel
  Media folder to the Link box in the Property
  inspector. Press the ENTER key
• Press the F12 key to open the browser and then
  click the link to verify that the audio works. A
  speaker or headphones must be attached to the
  computer to hear the audio. Close the browser.
  Click the Save button on the Standard toolbar and
  then close the splash.htm page

17
Linking to a Sound File
18
ActiveX Parameters
19
Embedding an Audio File

• Open the state_parks.htm page, click to the right
  of the heading text, Northwest Region, and then
  press the ENTER key. Point to the ActiveX button
  on the Media tab
• Click the ActiveX button
• Click the ActiveX name box in the Property
  inspector and name the ActiveX control birdsound.
  Change the W value to 200 and the H value to 45.
  Type CLSID22d6f312- b0f6-11d0-94ab-0080c74c7e95
  in the ClassID text box

20
Embedding an Audio File

• Click the Embed check box and then click the
  Browse for File icon to the right of the Src box.
  If necessary, when Dreamweaver displays the
  Select Netscape Plug-In File dialog box,
  double-click the Media folder. Point to the Files
  of type box arrow
• Click the Files of type box arrow and then click
  All Files. Click the birdsound.au file. Point to
  the OK button
• Click the OK button
• Click the Files of type box arrow and then click
  All Files. Click the birdsound.au file. Point to
  the OK button

21
Embedding an Audio File

• Click the OK button
• Click the Parameters button in the Property
  inspector. If necessary, when Dreamweaver
  displays the Parameters dialog box, click the
  plus () button to display the Parameter text box
• Type FileName and then click the parameters
  Value column. Type Media/birdsound.au and then
  point to the plus () button
• Click the plus () button. Use Table 9-4 on page
  DW 9.27 to add the other parameters and values to
  the Parameters dialog box. After adding the last
  value, point to the OK button

22
Embedding an Audio File

• Click the OK button. Click the Files panel group
  expander arrow to collapse the panel group. Point
  to the Show Code View button on the Document
  toolbar
• Click the Show Code View button. Scroll the Code
  view window and review the code. Point to the
  Show Design View button
• Click the Show Design View button on the Document
  toolbar and then click the Save button on the
  Standard toolbar. Click the Play button in the
  Property inspector and then click the Play button
  on the control. Listen to the sound and then
  click the Stop button. A speaker and/or
  headphones are necessary to hear the sound. If a
  Dreamweaver dialog box is displayed, read the
  information and then click the OK button

23
Embedding an Audio File

• Press the F12 key to view the Web page in your
  browser. Click the Play button to listen to the
  audio
• Close the browser

24
Video File Formats
25
Adding Video to a Web Page

• Click the Site panel expander arrow. Scroll to
  the bottom of the Web page and then click to the
  right of the Home link. Point to the ActiveX
  button on the Media tab in the Insert bar
• Click the ActiveX button
• Click the ActiveX name box in the Property
  inspector and then type techno for the name.
  Press the TAB key and change the W value to 320
  and the H value to 240. Click the ClassID box
  arrow and select the ClassID value you entered
  earlier in this project. Click the Align box
  arrow and align to the right

26
Adding Video to a Web Page

• Click the Embed check box in the Property
  inspector. Click the Browse for File icon. If
  necessary, click the Media folder, click the
  Files of type box arrow, and then select All
  Files. Click the technosaurus.wmv file and then
  point to the OK button
• Click the OK button. Point to the Parameters
  button in the Property inspector
• Click the Parameters button

27
Adding Video to a Web Page

• Use Table 9-6 on page DW 9.33 and the steps you
  learned previously to add the parameters and
  values to the parameters dialog box and then
  point to the OK button
• Click the OK button. Press the F12 key to display
  the browser. Scroll down to display the video
  file. Click the Play button
• Close the browser to return to Dreamweaver. Click
  the Save button on the Standard toolbar and then
  close the file

28
Adding Video to a Web Page
29
Project Summary

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

30
Project Summary

• Insert a video into a Web page
• 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

31
Project 9 Complete