Note:

The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

Insert and edit media objects

In addition to SWF and FLV files, you can insert QuickTime or Shockwave movies, Java applets, ActiveX controls, or other audio or video objects in a Dreamweaver document. If you inserted accessibility attributes with a media object, you can set the accessibility attributes and edit those values in the HTML code.

  1. Place the insertion point in the Document window where you want to insert the object.
  2. Insert the object by doing one of the following:
    • In the Common category of the Insert panel, click the Media button and select the icon for the type of object you want to insert.

    • Select the appropriate object from the Insert > Media submenu.

    • If the object you want to insert is not a Shockwave, Applet, or ActiveX object, select Plugin from the Insert > Media submenu.

      A dialog box appears letting you select a source file and specify certain parameters for the media object.

    Note:

    To prevent such dialog boxes from appearing, select Edit > Preferences > General (Windows) or Dreamweaver > Preferences > General (Macintosh) and deselect the Show Dialog When Inserting Objects option. To override whatever preference is set for showing dialog boxes, hold down the Control (Windows) or Option (Macintosh) key while inserting the object. (For example, to insert a placeholder for a Shockwave movie without specifying the file, hold down Control or Option, and either click the Shockwave button in Media pop‑up menu of the Common Insert panel, or select Insert > Media > Shockwave.)  

  3. Complete the Select File dialog box, and click OK.

    Note:

    The Accessibility Attributes dialog box appears if you have chosen to show attributes when inserting media in the Edit > Preferences dialog box.

  4. Set the accessibility attributes.

    Note:

    You can also edit media object attributes by selecting the object and editing the HTML code in Code view, or right-clicking (Windows) or Control-clicking (Macintosh), and selecting Edit Tag Code.

    Title

    Enter a title for the media object.

    Access Key

    Enter a keyboard equivalent (one letter) in the text box to select the form object in the browser. This lets a visitor to the site use the Control key (Windows) with the Access Key to access the object. For example, if you enter B as the Access Key, use Control+B to select the object in the browser.

    Tab Index

    Enter a number for the tab order of the form object. Setting a tab order is useful when you have other links and form objects on the page and need the user to tab through them in a specific order. If you set tab order for one object, be sure to set the tab order for all of them.

  5. Click OK to insert the media object.

    Note:

    If you click Cancel, a media object placeholder appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

    To specify a source file, or to set dimensions and other parameters and attributes, use the Property inspector for each object. You can edit accessibility attributes for an object.

Start an external editor for media files

You can start an external editor from Dreamweaver to edit most media files. You can also specify the editor you want Dreamweaver to start to edit the file.

  1. Make sure the media file type is associated to an editor on your system.

    To find out what editor is associated with the file type, select Edit > Preferences in Dreamweaver and select File Types/Editors from the Category list. Click the file’s extension in the Extensions column to view the associated editor or editors in the Editors column. You can change the editor associated to a file type.

  2. Double-click the media file in the Files panel to open it in the external editor.

    The editor that starts when you double-click the file in the Files panel is called the primary editor. If you double-click an image file, for example, Dreamweaver opens the file in the primary external image editor such as Adobe Fireworks.

  3. If you don’t want to use the primary external editor to edit the file, you can use another editor on your system to edit the file by doing one of the following:
    • In the Files panel, right-click (Windows) or Control‑click (Macintosh) the filename and select Open With from the context menu.

    • In Design view, right-click (Windows) or Control‑click (Macintosh) the media element within the current page, and select Edit With from the context menu.

Specify the editor to start from Dreamweaver

You can specify the editor you want Dreamweaver to use for editing a file type, and add or delete file types that Dreamweaver recognizes.

Explicitly specify which external editors should be started for a given file type

  1. Select Edit > Preferences and select File Types/Editors from the Category list.

    Filename extensions, such as .gif, .wav, and .mpg, are listed on the left under Extensions. Associated editors for a selected extension are listed on the right under Editors.

  2. Select the file type extension in the Extensions list and do one of the following:
    • To associate a new editor with the file type, click the Plus (+) button above the Editors list and complete the dialog box that appears.

      For example, select the application icon for Acrobat to associate it with the file type.

    • To make an editor the primary editor for a file type (that is, the editor that opens when you double-click the file type in the Files panel), select the editor in the Editors list and click Make Primary.

    • To dissociate an editor from a file type, select the editor in the Editors list and click the Minus (-) button above the Editors list.

Add a new file type and associated editor

  1. Click the Plus (+) button above the Extensions list and enter a file type extension (including the period at the beginning of the extension) or several related extensions separated by spaces.

    For example, you might enter .xml .xsl if you wanted to associate them with an XML editor installed on your system.

  2. Select an editor for the file type by clicking the Plus (+) button above the Editors list and completing the dialog box that appears.

Remove a file type

  • Select the file type in the Extensions list and click the Minus (-) button above the Extensions list.

    Note:

    You can’t undo after removing a file type, so be sure that you want to remove it.

Use Design Notes with media objects

As with other objects in Dreamweaver, you can add Design Notes to a media object. Design Notes are notes associated with a particular file, that are stored in a separate file. You can use Design Notes to keep track of extra file information associated with your documents, such as image source filenames and comments on file status.

  1. Right-click (Windows) or Control‑click (Macintosh) the object in the Document window.

    Note:

    You must define your site before adding Design Notes to any object.

  2. Select Design Notes for Page from the context menu.
  3. Enter the information you want in the Design Note.

    Note:

    You can also add a Design Note to a media object from the Files panel by selecting the file, revealing the context menu, and choosing Design Notes from the context menu.

Insert Shockwave movies

You can use Dreamweaver to insert Shockwave movies into your documents. Adobe® Shockwave®, a standard for interactive multimedia on the web, is a compressed format that allows media files created in Adobe® Director® to be downloaded quickly and played by most popular browsers.

  1. In the Document window, place the insertion point where you want to insert a Shockwave movie and do one of the following:
    • In the Common category of the Insert panel, click the Media button and select the Shockwave icon  from the popup menu.

    • Select Insert > Media > Shockwave.

  2. In the dialog box that appears, select a movie file.
  3. In the Property inspector, enter the width and height of the movie in the W and H text boxes.

Add video (non-FLV)

You can add video to your web page in different ways and using different formats. Video can be downloaded to the user or it can be streamed so that it plays while it is downloading.

  1. Place the clip in your site folder.

    These clips are often in the AVI or MPEG file format.

  2. Link to the clip or embed it in your page.

    To link to the clip, enter text for the link such as “Download Clip”, select the text, and click the folder icon in the Property inspector. Browse to the video file and select it.

    Note:

    The user must download a helper application (a plug‑in) to view common streaming formats like Real Media, QuickTime, and Windows Media.

Insert plug‑in content

You can create content such as a QuickTime movie for a browser plug‑in, and then use Dreamweaver to insert that content into an HTML document. Typical plug‑ins include RealPlayer and QuickTime, while some content files include mp3s and QuickTime movies.

You can preview movies and animations that rely on browser plug‑ins directly in the Design view of the Document window. You can play all plug‑in elements at one time to see how the page will look to the user, or you can play each one individually to ensure that you have embedded the correct media element.

Note:

You cannot preview movies or animations that rely on ActiveX controls.

After inserting content for a plug‑in, use the Property inspector to set parameters for that content. To view the following properties in the Property inspector, select a plug‑in object.

The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower-right corner to see all properties.

Insert plug‑in content and set its properties

  1. In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following:
    • In the Common category of the Insert panel, click the Media button and select the Plugin icon  from the menu.

    • Select Insert > Media > Plugin.

  2. In the dialog box that appears, select a content file for a plug‑in and click OK.
  3. Set the plug‑in options in the Property inspector.

    Name

    Specifies a name to identify the plug‑in for scripting. Enter a name in the unlabeled text box on the far left side of the Property inspector.

    W and H

    Specify, in pixels, the width and height allocated to the object on the page.

    Src

    Specifies the source data file. Click the folder icon to browse to a file, or enter a filename.

    Plg Url

    Specifies the URL of the pluginspace attribute. Enter the complete URL of the site where users can download the plug‑in. If the user viewing your page does not have the plug‑in, the browser tries to download it from this URL.

    Align

    Determines how the object is aligned on the page.

    V Space and H Space

    Specify the amount of white space in pixels above, below, and on both sides of the plug‑in.

    Border

    Specifies the width of the border around the plug‑in.

    Parameters

    Opens a dialog box for entering additional parameters to pass to the plug‑in. Many plug‑ins respond to special parameters.

    You can also view the attributes assigned to the selected plug‑in by clicking the Attribute button. You can edit, add, and delete attributes such as width and height in this dialog box.

Play plug‑in content in the Document window

  1. Insert one or more media elements using one of the methods described in the previous section.
  2. Do one of the following:
    • Select one of the media elements you have inserted, and select View > Plugins > Play or click the Play button in the Property inspector.

    • Select View > Plugins > Play All to play all of the media elements on the selected page that rely on plug‑ins.

    Note:

    Play All only applies to the current document; it does not apply to other documents in a frameset, for example.

Stop playing plug‑in content

  • Select a media element and select View > Plugins >Stop, or click the Stop button in the Property inspector.

    You can also select View > Plugins > Stop All to stop all plug‑in content from playing.

Troubleshoot plug‑ins

If you have followed the steps to play plug‑in content in the Document window, but some of the plug‑in content does not play, try the following:

  • Make sure the associated plug‑in is installed on your computer, and that the content is compatible with the version of the plug‑in you have.

  • Open the file Configuration/Plugins/UnsupportedPlugins.txt in a text editor and look to see if the problematic plug‑in is listed. This file keeps track of plug‑ins that cause problems in Dreamweaver and are therefore unsupported. (If you experience problems with a particular plug‑in, consider adding it to this file.)

  • Check that you have enough memory. Some plug‑ins require an additional 2 to 5 MB of memory to run.

Insert an ActiveX control

You can insert an ActiveX control in your page. ActiveX controls (formerly known as OLE controls) are reusable components, somewhat like miniature applications, that can act like browser plug‑ins. They run in Internet Explorer with Windows, but they don’t run on the Macintosh browsers. The ActiveX object in Dreamweaver lets you supply attributes and parameters for an ActiveX control in your visitor’s browser.

After inserting an ActiveX object, use the Property inspector to set attributes of the object tag and parameters for the ActiveX control. Click Parameters in the Property inspector to enter names and values for properties that don’t appear in the Property inspector. There is no widely accepted standard format for parameters for ActiveX controls; to find out which parameters to use, consult the documentation for the ActiveX control you’re using.

  • In the Document window, place the insertion point where you want to insert the content and do one of the following:
    • In the Common category of the Insert panel, click the Media button and select the ActiveX icon .

    • In the Common category of the Insert panel, click the Media button and select the ActiveX icon. With the ActiveX icon displayed in the Insert panel, you can drag the icon to the Document window.

    • Select Insert > Media > ActiveX. An icon marks where the ActiveX control will appear on the page in Internet Explorer.

ActiveX properties

The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower‑right corner to see all properties.

Name

Specifies a name to identify the ActiveX object for scripting. Enter a name in the unlabeled text box on the far left side of the Property inspector.

W and H

Specify the width and height of the object, in pixels.

Class ID

Identifies the ActiveX control to the browser. Enter a value or select one from the pop‑up menu. When the page is loaded, the browser uses the class ID to locate the ActiveX control required for the ActiveX object associated with the page. If the browser doesn’t locate the specified ActiveX control, it attempts to download it from the location specified in Base.

Embed

Adds an embed tag within the object tag for the ActiveX control. If the ActiveX control has another plug‑in equivalent, the embed tag activates the plug‑in. Dreamweaver assigns the values you entered as ActiveX properties to their plug‑in equivalents.

Align

Determines how the object is aligned on the page.

Parameters

Opens a dialog box for entering additional parameters to pass to the ActiveX object. Many ActiveX controls respond to special parameters.

Src

Defines the data file to be used for a plug‑in if the Embed option is turned on. If you don’t enter a value, Dreamweaver attempts to determine the value from the ActiveX properties entered already.

V Space and H Space

Specify the amount of white space, in pixels, above, below, and on both sides of the object.

Base

Specifies the URL containing the ActiveX control. Internet Explorer downloads the ActiveX control from this location if it has not been installed in the visitor’s system. If you don’t specify a Base parameter and if your visitor doesn’t already have the relevant ActiveX control installed, the browser can’t display the ActiveX object.

Alt Img

Specifies an image to be displayed if the browser doesn’t support the object tag. This option is available only when the Embed option is deselected.

Data

Specifies a data file for the ActiveX control to load. Many ActiveX controls, such as Shockwave and RealPlayer, do not use this parameter.

Insert a Java applet

You can insert a Java applet into an HTML document using Dreamweaver. Java is a programming language that allows the development of lightweight applications (applets) that can be embedded in web pages.

After inserting a Java applet, use the Property inspector to set parameters. To view the following properties in the Property inspector, select a Java applet.

  1. In the Document window, place the insertion point where you want to insert the applet, and then do one of the following:
    • In the Common category of the Insert panel, click the Media button and select the Applet icon .

    • Select Insert > Media > Applet.

  2. Select a file containing a Java applet.

Java applet properties

The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower‑right corner to see all properties.

Name

Specifies a name to identify the applet for scripting. Enter a name in the unlabeled text box on the far left side of the Property inspector.

W and H

Specify the width and height of the applet, in pixels.

Code

Specifies the file containing the applet’s Java code. Click the folder icon to browse to a file, or enter a filename.

Base

Identifies the folder containing the selected applet. When you select an applet, this text box is filled automatically.

Align

Determines how the object is aligned on the page.

Alt

Specifies alternative content (usually an image) to be displayed if the user’s browser doesn’t support Java applets or has Java disabled. If you enter text, Dreamweaver inserts the text as the value of the applet’s alt attribute. If you select an image, Dreamweaver inserts an img tag between the opening and closing applet tags.

V Space and H Space

Specify the amount of white space in pixels above, below, and on both sides of the applet.

Parameters

Opens a dialog box for entering additional parameters to pass to the applet. Many applets respond to special parameters.

Use behaviors to control media

You can add behaviors to your page to start and stop various media objects.

Control Shockwave Or Flash

Play, stop, rewind, or go to a frame in a Shockwave movie or SWF file.

Play Sound

Lets you play a sound; for example, you can play a sound effect whenever the user moves the mouse pointer over a link.

Check Plugin

Lets you check to see if visitors to your site have the required plug‑in installed, then route them to different URLs, depending on whether they have the right plug‑in. This only applies to plug‑ins, as the Check Plugin behavior does not check for ActiveX controls.

Use parameters to control media objects

Define special parameters to control Shockwave and SWF files, ActiveX controls, plug‑ins, and Java applets. Parameters are used with the object, embed, and applet tags. Parameters set attributes specific to different types of objects. For example, a SWF file can use a quality parameter <paramname="quality"value="best"> for the object tag. The Parameter dialog box is available from the Property inspector. See the documentation for the object you’re using for information on the parameters it requires.

Note:

There is no widely accepted standard for identifying data files for ActiveX controls. Consult the documentation for the ActiveX control you’re using to find out which parameters to use.

Enter a name and value for a parameter

  1. Select an object that can have parameters (such as a Shockwave movie, an ActiveX control, a plug‑in, or a Java applet) in the Document window.
  2. Open the dialog box using one of the following methods:
    • Right-click (Windows) or Control‑click (Macintosh) the object, and select Parameters from the context menu.

    • Open the Property inspector if it isn’t already open, and click the Parameters button found in the lower half of the Property inspector. (Make sure the Property inspector is expanded.)

  3. Click the Plus (+) button and enter the parameter name and value in the appropriate columns.

Remove a parameter

  • Select a parameter and press the minus (–) button.

Reorder parameters

  • Select a parameter, and use the up and down arrow buttons.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy