2. DREAMWEAVER MX 2004 Chapter 9 Adding Media Elements
Copyright 2005, Paradigm Publishing Inc.

3. Performance Objectives
Understand multimedia and how it can be used.
Play movies and animations within the Dreamweaver MX 2004 environment.
Insert Flash content.
Create and insert Flash buttons.
Create and insert Flash text.
Copyright 2005, Paradigm Publishing Inc.

4. Performance Objectives…/2
Insert Shockwave content.
Insert Java applets.
Create and modify multimedia parameters and values.
Insert ActiveX controls.
Insert plugins.
Add sound to a Web page.
Copyright 2005, Paradigm Publishing Inc.

5. Understanding Media Elements
Web browsers interpret and display the HTML code contained in Web pages.
Browsers are limited to displaying text and images.
For any type of media beyond this, browsers must look for assistance to display the material.
This assistance can take the form of programs that work within the browser, the use of helper applications, or the use of ActiveX controls and Netscape-style plugins.
Copyright 2005, Paradigm Publishing Inc.

6. JavaScript
JavaScript is a scripting programming language that resides within an HTML document.
The use of JavaScript enables a browser to change page content dynamically in response to viewer input.
JavaScript has been combined with HTML and CSS-P (Cascading Style Sheets-Positioning) to create dynamic HTML (DHTML).
Copyright 2005, Paradigm Publishing Inc.

7. JavaScript…/2
JavaScript is located between script tags and is placed in the head region (and sometimes body section) of a document.
swapImgRestore
(rollover effect)
Copyright 2005, Paradigm Publishing Inc.

8. Java Applets
Java applets are small applications that can run inside a browser window.
They can be used to provide an interactive experience, including audio and video.
Java applet
code
Copyright 2005, Paradigm Publishing Inc.

9. Helper Applications
Helper applications are stand-alone programs that browsers can call on to display different media content.
Whenever a browser encounters a file, it looks at its file extension to determine its MIME (Multipurpose Internet Mail Extension) type.
Browsers use the MIME type to determine how a file will be displayed.
If a file is a MIME type that the browser cannot display on its own, it must look for a helper application.
Copyright 2005, Paradigm Publishing Inc.

10. Common Media MIME Types and File Name Extensions
File Extension
MIME Type
.avi
Microsoft Audio Video
.dcr
Shockwave
.mid, .midi
Musical Instrument Digital Interface
.mov
Quicktime
.mp2, .mp3
Audio MPEG (Moving Pictures Experts Group)
.ra, .ram, .rm
Real Audio
.swf
Flash
.wav
Waveform Sound
.mpe, .mpg, .mpeg
Video MPEG (Moving Pictures Experts Group)
Copyright 2005, Paradigm Publishing Inc.

11. Adobe Acrobat Files
Whenever a browser encounters a file with a .pdf extension, it looks for a copy of Adobe Acrobat Reader and opens the program to display the file.
Copyright 2005, Paradigm Publishing Inc.

12. Plugins and ActiveX Controls
Plugins are small programs that extend the capability of browsers in dealing with different types of media.
They are not stand-alone programs.
Instead, the sole purpose of a plugin is to enable a browser to deal with specific types of Web page content that the plugin is designed to handle.
Copyright 2005, Paradigm Publishing Inc.

13. Plugins and ActiveX Controls…/2
Plugins reside in a browser’s Plugins folder, located inside the browser’s application folder.
Browsers come with some plugins already installed, and new plugins can be downloaded.
Plugins folder
plugins
Copyright 2005, Paradigm Publishing Inc.

14. Plugins and ActiveX Controls…/3
The two most common browser plugin types are Netscape-style plugins and ActiveX controls.
Netscape-style plugins use the embed tag to insert media and JavaScript communication.
ActiveX controls use the object tag and VBScript for communication.
Internet Explorer no longer supports Netscape-style plugins.
Copyright 2005, Paradigm Publishing Inc.

15. Plugins and ActiveX Controls…/4
The use of plugins can cause problems if viewers do not have a required plugin installed in the browser they are using.
One way to avoid that possibility is to specify a URL where a copy of the needed plugin can be found.
Copyright 2005, Paradigm Publishing Inc.

16. Plugins and ActiveX Controls…/5
Some types of media have both ActiveX controls and plugins.
When that is the case, Dreamweaver MX 2004 inserts the media using both Netscape plugin tags (embed tags) and ActiveX tags (object tags).
object tag
embed tag
Copyright 2005, Paradigm Publishing Inc.

17. Plugins and ActiveX Controls…/6
To ensure that the content you are adding will be accessible to your viewers, you should preview the pages in as many browser versions as you can.
It is also a good idea to offer alternatives, such as a link to similar material in a different format or an explanation of what the plugin content contains.
Copyright 2005, Paradigm Publishing Inc.

18. Playing Media within Dreamweaver MX 2004
When movies and animations are inserted within documents, the Property inspector displays a Play button.
The button can be clicked to play the media so that it can be previewed within the Dreamweaver MX 2004 environment.
The Play button transforms into a Stop button after the media begins playing.
Play button
Copyright 2005, Paradigm Publishing Inc.

19. Playing Media within Dreamweaver MX 2004…/2
Dreamweaver MX 2004 uses Netscape-style plugins for previewing.
When the Play button is selected, it first looks for the appropriate Netscape-style plugin in its Plugins folder.
If the appropriate plugin cannot be found, it then searches the Plugins folders of all of the browsers installed on the computer.
If a movie or animation relies exclusively on an ActiveX control, it will not be previewable within Dreamweaver MX 2004.
Copyright 2005, Paradigm Publishing Inc.

20. Playing Media within Dreamweaver MX 2004…/3
If Internet Explorer is the only browser installed on your computer, you will not be able to preview movies and animations because Internet Explorer uses ActiveX controls.
There are two solutions to this problem:
Install a copy of the latest Netscape browser on your computer so that Dreamweaver MX 2004 can search for and use the Netscape-style plugins that come with that program.
Download a needed plugin and copy its class file to the Dreamweaver MX 2004 Plugins folder.
Copyright 2005, Paradigm Publishing Inc.

21. Using the Insert Bar Media Button
The Insert bar (Common menu item or tab) Media button is used for inserting some of the most popular media types.
The Media button always displays the icon of the last media command selected.
Media button down-pointing arrow
Copyright 2005, Paradigm Publishing Inc.

22. Flash Media
The Flash command can be used to insert Flash movies and animations into Web pages.
Flash MX 2004 is the latest version of the Flash program, and it is part of the Macromedia suite of programs.
Flash MX 2004 can be used to create videos, interactive animations, and other types of rich Internet applications.
Copyright 2005, Paradigm Publishing Inc.

23. Flash Media…/2
Clicking the Flash command opens the Select File dialog box.
The dialog box can be used to locate a desired Flash file, which has an .swf file extension.
Copyright 2005, Paradigm Publishing Inc.

24. Flash Media…/3
After a file has been selected, an Object Tag Accessibility Attributes dialog box appears if the Media check box has been enabled using the Preferences dialog box Accessibility page.
Copyright 2005, Paradigm Publishing Inc.

25. Flash Media…/4
After the Flash movie has been inserted, it appears as a placeholder.
Copyright 2005, Paradigm Publishing Inc.

26. Flash Property Inspector
Selecting the placeholder displays the Flash Property inspector.
Copyright 2005, Paradigm Publishing Inc.

27. Flash Property Inspector – Align
Click the Align list box down-pointing arrow to see a list of different alignment properties for the movie.
Copyright 2005, Paradigm Publishing Inc.

28. Flash Property Inspector – W and H
When a Flash movie is inserted, Dreamweaver MX 2004 determines the dimensions of the movie and enters them in the W (width) and H (height) text boxes.
Changing these dimensions affects the quality of the movie’s appearance.
Copyright 2005, Paradigm Publishing Inc.

29. Flash Property Inspector – Src
If Flash MX 2004 is installed on your computer, the Src text box displays a link to the Flash source document if it is available.
Flash files cannot be edited in their .swf format, but clicking the Edit button opens the Flash file source document in Flash MX 2004 so you can edit it.
If the Flash source document is not available, the Src text box will not appear and the Edit button will be visible but inactive.
Copyright 2005, Paradigm Publishing Inc.

30. Flash Property Inspector – Quality
The Quality text box lets you choose a quality setting for the Flash movie.
High emphasizes appearance over speed.
Low emphasizes speed over appearance.
Auto Low emphasizes speed at first but will improve appearance if possible.
Auto High starts out emphasizing both speed and appearance, with speed being sacrificed if necessary.
Copyright 2005, Paradigm Publishing Inc.

31. Flash Property Inspector – Scale
The Scale list box lets you choose how the Flash movie will be displayed within the specified width and height parameters.
Default (Show all) displays the entire movie.
No border fits the movie without borders and maintains the original aspect ratio.
Exact fit scales the movie to the dimensions that have been set, regardless of the aspect ratio.
Copyright 2005, Paradigm Publishing Inc.

32. Flash Property Inspector – Loop
The Loop check box should be enabled if you want the Flash movie to play continuously by repeating whenever it reaches the end.
Copyright 2005, Paradigm Publishing Inc.

33. Flash Property Inspector – Autoplay
The Autoplay check box should be enabled if you want the Flash movie to start playing automatically as soon as the page loads.
Copyright 2005, Paradigm Publishing Inc.

34. Flash Property Inspector – Parameters
The Parameters button can be used to specify parameters and values for the Flash movie by using the Parameters dialog box.
The parameters that can be specified are determined by the designer of the Flash movie.
Copyright 2005, Paradigm Publishing Inc.

35. Flash button on mouse rollover
Flash Buttons
Flash buttons function somewhat like rollover images in that they have two states.
They differ from rollover images in that they can display animation when clicked.
They also can be linked to another URL so that they can function as hyperlinks.
Flash button
Flash button on mouse rollover
Copyright 2005, Paradigm Publishing Inc.

36. Flash Buttons…/2
If the current document already has been saved, the Insert Flash Button dialog box opens.
Copyright 2005, Paradigm Publishing Inc.

37. Insert Flash Button Dialog Box – Style and Sample
Clicking a button style listing displays a sample of the button.
Copyright 2005, Paradigm Publishing Inc.

38. Insert Flash Button Dialog Box – Button text
The Button text text box is used to enter the text that will appear in the button.
Copyright 2005, Paradigm Publishing Inc.

39. Insert Flash Button Dialog Box – Font and Size
The Font and Size text boxes can be used to specify the font style and size of the button text.
Copyright 2005, Paradigm Publishing Inc.

40. Insert Flash Button Dialog Box – Link
The Link text box can be used to type a URL, or the adjacent Browse button can be clicked to open the Select File dialog box.
Copyright 2005, Paradigm Publishing Inc.

41. Insert Flash Button Dialog Box – Target
The Target text box displays a list of target windows for the linked file to open in.
Copyright 2005, Paradigm Publishing Inc.

42. Insert Flash Button Dialog Box – Bg color
When you click the Bg color color box, you can use the Eyedropper to select a background color for the button.
You also can type in a desired color in the text box.
Copyright 2005, Paradigm Publishing Inc.

43. Insert Flash Button Dialog Box – Bg color…/2
Some Flash buttons have a white border that is visible when the button is inserted in a Web page with a nonwhite background color.
Select a background color of the page that the Flash button is being inserted in.
default background
color
page background
color
Copyright 2005, Paradigm Publishing Inc.

44. Insert Flash Button Dialog Box – Save as
Use the Save as text box to provide a new name for the button if you do not want to use the default name.
Flash buttons with document-relative links must be saved to the same directory as the current document.
Copyright 2005, Paradigm Publishing Inc.

45. Inserting Flash Buttons
Click the Apply button to see how the button will look on the page.
If you are satisfied, click the OK button.
If the Media check box has been enabled using the Preferences dialog box Accessibility page, a Flash Accessibility Attributes dialog box appears.
Copyright 2005, Paradigm Publishing Inc.

46. Editing Flash Buttons
To edit a Flash button, select the button and then click the Edit button in the Flash Button Property inspector.
This opens the Insert Flash dialog box so you can make the necessary changes.
Edit button
Copyright 2005, Paradigm Publishing Inc.

47. Flash Text
The Flash Text command lets you insert a text-only Flash movie.
Although the Flash text is created using a movie format, it does not move.
It can display a rollover effect by choosing a rollover color.
Copyright 2005, Paradigm Publishing Inc.

48. Flash Text…/2
Another advantage of Flash text is that it can be used to insert text in font sizes that could not be displayed using the font sizes normally available to a browser.
Copyright 2005, Paradigm Publishing Inc.

49. Flash Text…/3
If the document has already been saved, the Insert Flash Text dialog box appears.
Copyright 2005, Paradigm Publishing Inc.

50. Insert Flash Text Dialog Box – Font and Size
Use the Font list box and the Size text box to choose a style and size for the text.
Clicking the Font list box down-pointing arrow displays a list of the fonts available.
Copyright 2005, Paradigm Publishing Inc.

51. Insert Flash Text Dialog Box – Color and Rollover color
Use the Color text box to enter a hexadecimal color code for the Flash text.
Use the Rollover color text box to enter a hexadecimal color code for the Flash text when the mouse rolls over it in the browser window.
Copyright 2005, Paradigm Publishing Inc.

52. Insert Flash Text Dialog Box – Text and Show font
Type text for the Flash text movie in the Text text box.
If the Show font check box is enabled, the text you enter appears in the font style you selected.
Copyright 2005, Paradigm Publishing Inc.

53. Insert Flash Text Dialog Box – Link, Target, Bg color, Save as
The Link, Target, Bg color, and Save as boxes all function in the same way as they do in the Insert Flash Button dialog box.
Copyright 2005, Paradigm Publishing Inc.

54. Editing Flash Text
Flash text cannot be edited like normal HTML text because it is actually a Flash movie inserted using object tags.
Flash text can be edited by double-clicking the text, which causes the Insert Flash Text dialog box to open.
You then can change the text or any of the formatting that was specified.
Copyright 2005, Paradigm Publishing Inc.

55. Flash Text Alignment
Text and objects inserted next to Flash text will be affected as they would when inserted next to an image.
Text or objects appear with baseline alignment by default.
Copyright 2005, Paradigm Publishing Inc.

56. Flash Text Alignment…/2
To change the Flash text alignment, select the Flash text to open the Flash Text Property inspector.
The Flash Text Property inspector is almost identical to the Flash Button Property inspector, lacking only the Loop and Autoplay check boxes.
The Align list box contains a list of different alignment values.
Copyright 2005, Paradigm Publishing Inc.

57. Shockwave Shockwave is a Macromedia movie file format.
Shockwave plugins exist in both Netscape-style plugins and ActiveX control forms.
Dreamweaver MX 2004 inserts Shockwave movies using both embed tags and object tags.
Copyright 2005, Paradigm Publishing Inc.

58. Shockwave…/2
Clicking the Shockwave command opens the Select File dialog box which can be used to locate the Shockwave file.
Copyright 2005, Paradigm Publishing Inc.

59. Shockwave…/3
If the Media check box has been enabled on the Preferences dialog box Accessibility page, an Object Tag Accessibility Attributes dialog box will appear.
Copyright 2005, Paradigm Publishing Inc.

60. Shockwave…/4
Selecting the placeholder displays the Shockwave Property inspector.
Copyright 2005, Paradigm Publishing Inc.

61. Shockwave Property Inspector – W and H
Dreamweaver MX 2004 cannot determine the correct dimensions of the Shockwave movie automatically.
If the correct dimensions are known, they can be entered in the W and H text boxes.
If they are not known, you can experiment until you find the correct dimensions.
Copyright 2005, Paradigm Publishing Inc.

62. Shockwave Property Inspector – File
The Browse for File button can be used to browse and locate a file that can be linked to the Shockwave movie.
When a movie is linked in this manner, it functions like a hyperlink.
Copyright 2005, Paradigm Publishing Inc.

63. Shockwave Property Inspector – V space, H space, Align, Bg
The V space, H space, Align, and Bg boxes function in the same manner as in the other media Property inspectors.
Copyright 2005, Paradigm Publishing Inc.

64. Shockwave Property Inspector – Parameters
Clicking the Parameters button opens the Parameters dialog box.
Copyright 2005, Paradigm Publishing Inc.

65. Shockwave Property Inspector – Parameters…/2
Clicking the Plus (+) button opens the Select Parameter Value dialog box.
The Name text box displays a list of all of the parameters associated with the movie.
The Value text box displays the possible values for the parameter.
Copyright 2005, Paradigm Publishing Inc.

66. Applets
Applets are self-contained mini-programs written using the Java programming language.
Applets can be composed of a number of different files, but all applets contain at least one class file.
Applet code is placed within the body tags of an HTML document and contains information calling for the applet class file or files and defining the applet parameters.
Java-enabled browsers then can read the applet and execute the applet.
Copyright 2005, Paradigm Publishing Inc.

67. Applets…/2
Some applets do not contain any parameters, while others contain quite a few.
starting applet tag
class file
parameter
value
Copyright 2005, Paradigm Publishing Inc.

68. Applets…/3
Programming Java applets is a complex task, but many applets are available on the Internet.
Applets typically come with directions describing how the applet is to be installed.
Copyright 2005, Paradigm Publishing Inc.

69. Applets…/4
The Applet command can be used to insert an applet class file.
Any parameters then can be inserted or modified using the Applet Property inspector.
Copyright 2005, Paradigm Publishing Inc.

70. Applets…/5
In most circumstances, it is much easier to follow the directions that come with the applet and copy and paste the supplied applet code into the body section of an HTML document.
After the instructions are inserted, a placeholder the size of the applet appears in the Document window.
Copyright 2005, Paradigm Publishing Inc.

71. Parameters
The Parameters (Param) command can be used to insert parameters and values one at a time into the code for media content located between embed tags or object tags.
The command should be used in Code view or Code and Design view because you need to position the insertion point in the correct location within the code.
Copyright 2005, Paradigm Publishing Inc.

72. Parameters…/2
When you click the Parameter (Param) command, the Tag Editor – Param dialog box appears.
Copyright 2005, Paradigm Publishing Inc.

73. Parameters…/3
With General selected in the list box, the dialog box displays Name and Value text boxes.
If you are comfortable entering code directly, you will probably find it much more convenient to type parameters and values directly in Code view or Code and Design view.
Multiple parameters and values can be entered using the Parameters dialog box which is accessed through the Property inspector Parameters button.
Copyright 2005, Paradigm Publishing Inc.

74. Plugins
The Insert bar Media button drop-down menu contains commands for inserting ActiveX controls and Netscape-style plugins.
Copyright 2005, Paradigm Publishing Inc.

75. Plugins…/2
When ActiveX controls are inserted, there is an option to insert embed tags in addition to the object tags.
Clicking the ActiveX command causes the Object Tag Accessibility Attributes dialog box to open.
Copyright 2005, Paradigm Publishing Inc.

76. Plugins…/3
After the dialog box is closed, an ActiveX placeholder with dimensions of 32 by 32 pixels appears.
Copyright 2005, Paradigm Publishing Inc.

77. Plugins…/4
The ActiveX Property inspector is displayed when you select the placeholder.
Copyright 2005, Paradigm Publishing Inc.

78. ActiveX Property Inspector – ClassID
The ClassID text box is used to select or type the name of the ActiveX control that will handle the media object being inserted.
Copyright 2005, Paradigm Publishing Inc.

79. ActiveX Property Inspector – W and H
A width and height can be entered in the W and H text boxes.
If the correct width and height are not known, you must experiment to find the correct dimensions.
Copyright 2005, Paradigm Publishing Inc.

80. ActiveX Property Inspector – Align, V space, H space
The Align, V space, and H space boxes perform the same functions as they do in the other media Property inspectors.
Copyright 2005, Paradigm Publishing Inc.

81. ActiveX Property Inspector – Base
The Base text box can be used to type or paste in a URL for downloading the specified ActiveX control in the event the control is not already installed in the user’s browser.
Copyright 2005, Paradigm Publishing Inc.

82. ActiveX Property Inspector – ID and Data
The ID text box is used for scripting purposes and is optional.
The Data text box is for the URL of the source file for the media object, but is not required by many ActiveX controls.
Copyright 2005, Paradigm Publishing Inc.

83. ActiveX Property Inspector – Embed and Src
Placing a check mark in the Embed check box automatically enters embed tags within the object tags.
The file path to the content specified by the ActiveX control automatically appears in the Src text box.
Copyright 2005, Paradigm Publishing Inc.

84. ActiveX Property Inspector – Embed and Src…/2
Any parameters and values that were specified for the ActiveX control are repeated between the embed tags.
embed tag
src file path
Plugin code inside
ActiveX control
Copyright 2005, Paradigm Publishing Inc.

85. ActiveX Property Inspector – Alt img
The Alt img text box Browse for File button can be used to browse and select an image that will be displayed in the event the viewer’s browser does not support the ActiveX control.
Copyright 2005, Paradigm Publishing Inc.

86. ActiveX Property Inspector – Parameters
The Parameters button is used to add parameters and values.
The parameters and values that can be added depend on the type of ActiveX control being inserted.
Copyright 2005, Paradigm Publishing Inc.

87. Windows Media Player Parameters and Values
autoRewind
True or False
autoStart
balance
clickToPlay
fileName
Name of file and extension
loop
mute
Copyright 2005, Paradigm Publishing Inc.

88. Windows Media Player Parameters and Values…/2
playCount
Number
showControls
True or False
transparentAtStart
uimode
Full, Mini, or None
url
URL
volume
0-100
Copyright 2005, Paradigm Publishing Inc.

89. Parameters Dialog Box
The Parameters dialog box should be used to create a fileName parameter and value so that the ActiveX control knows which file to play.
Other parameters can be entered as desired.
Copyright 2005, Paradigm Publishing Inc.

90. Adding Audio (Sound) to Web Pages
A number of different audio file formats are available for Internet use.
The ability of a user’s browser to handle audio varies greatly.
The huge number of variables means that it is highly likely that some viewers will not be able to enjoy audio on your Web pages.
A drawback to embedding audio in Web pages is that many people find background audio intrusive, so it should be used only in the appropriate circumstances.
Copyright 2005, Paradigm Publishing Inc.

91. Adding Audio (Sound) to Web Pages…/2
There are many different ways to embed sound files on Web pages.
Using a plugin is one of the simpler and more effective ways.
When a plugin is selected, the Plugins Property inspector is displayed.
Copyright 2005, Paradigm Publishing Inc.

92. COMMANDS REVIEW    How do you insert media? click Insert
point to Media 
select an option
Copyright 2005, Paradigm Publishing Inc.

93. COMMANDS SUMMARY Insert media Insert, Media, select media type
Copyright 2005, Paradigm Publishing Inc.