User Guide Cancel

Add media objects

Last updated on 17 May 2021

Learn how to insert and edit media objects in Dreamweaver web pages, use Design Notes, and more.

In addition to SWF and FLV files, you can insert 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.

Place the insertion point in the Document window where you want to insert the object.
Insert the object by doing one of the following:
- In the HTML category of the Insert panel, and select the icon for the type of object you want to insert.
- Select the appropriate object from the Insert > HTML 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.
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.
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.
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.

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

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

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

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.
Select Design Notes for Page from the context menu.
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.

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.

Place the clip in your site folder.

These clips are often in the AVI or MPEG file format.
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

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.
In the dialog box that appears, select a content file for a plug‑in and click OK.
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

Insert one or more media elements using one of the methods described in the previous section.
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.

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 SWF files and plug-ins. 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

Select an object that can have parameters in the Document window.
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.)
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.

More like this

Adobe

Get help faster and easier

New user?