User Guide Cancel

Add media objects

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

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.

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

  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

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

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

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

  1. Select an object that can have parameters in the Document window.

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

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

Reorder parameters

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

More like this

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Legal Notices    |    Online Privacy Policy