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 background sound to a Web page

3
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

4
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

5
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

6
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

7
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

8
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 CTRLF2 to display the Insert
  bar and then select the Common category

9
Starting Dreamweaver and Opening the Colorado
Parks Web Site
10
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

11
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

12
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 CTRLS 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

13
Adding Flash Text
14
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

15
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

16
Adding a Flash Movie
17
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

18
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

19
Adding a Link to Go to the Index Page
20
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

21
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

22
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

23
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

24
Adding a Background Sound and Setting Parameters
25
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

26
Embedding an Audio File

• Change the W value to 200 and the H value to 45.
  Type CLSID22d6f312-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

27
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

28
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

29
Embedding an Audio File
30
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

31
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

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

33
Adding Video to a Web Page
34
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 Dont Update button

35
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

36
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

37
Verifying Internal Links with the Link Checker
38
Closing the Web Site and Quitting Dreamweaver

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

39
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

40
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

41
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

42
Project 9 Complete

• Media Objects