- Dreamweaver User Guide
- Introduction
- Dreamweaver and Creative Cloud
- Dreamweaver workspaces and views
- Set up sites
- About Dreamweaver sites
- Set up a local version of your site
- Connect to a publishing server
- Set up a testing server
- Import and export Dreamweaver site settings
- Bring existing websites from a remote server to your local site root
- Accessibility features in Dreamweaver
- Advanced settings
- Set site preferences for transferring files
- Specify proxy server settings in Dreamweaver
- Synchronize Dreamweaver settings with Creative Cloud
- Using Git in Dreamweaver
- Manage files
- Create and open files
- Manage files and folders
- Getting and putting files to and from your server
- Check in and check out files
- Synchronize files
- Compare files for differences
- Cloak files and folders in your Dreamweaver site
- Enable Design Notes for Dreamweaver sites
- Preventing potential Gatekeeper exploit
- Layout and design
- CSS
- Understand Cascading Style Sheets
- Laying out pages using CSS Designer
- Using CSS preprocessors in Dreamweaver
- How to set CSS Style preferences in Dreamweaver
- Move CSS rules in Dreamweaver
- Convert inline CSS to a CSS rule in Dreamweaver
- Work with div tags
- Apply gradients to background
- Create and edit CSS3 transition effects in Dreamweaver
- Format code
- Page content and assets
- Set page properties
- Set CSS heading properties and CSS link properties
- Work with text
- Find and replace text, tags, and attributes
- DOM panel
- Edit in Live View
- Encoding documents in Dreamweaver
- Select and view elements in the Document window
- Set text properties in the Property inspector
- Spell check a web page
- Using horizontal rules in Dreamweaver
- Add and modify font combinations in Dreamweaver
- Work with assets
- Insert and update dates in Dreamweaver
- Create and manage favorite assets in Dreamweaver
- Insert and edit images in Dreamweaver
- Add media objects
- Adding videos in Dreamweaver
- Insert HTML5 video
- Insert SWF files
- Add audio effects
- Insert HTML5 audio in Dreamweaver
- Work with library items
- Using Arabic and Hebrew text in Dreamweaver
- Linking and navigation
- jQuery widgets and effects
- Coding websites
- About coding in Dreamweaver
- Coding environment in Dreamweaver
- Set coding preferences
- Customize code coloring
- Write and edit code
- Code hinting and code completion
- Collapse and expand code
- Reuse code with snippets
- Lint code
- Optimize code
- Edit code in Design view
- Work with head content for pages
- Insert server-side includes in Dreamweaver
- Using tag libraries in Dreamweaver
- Importing custom tags into Dreamweaver
- Use JavaScript behaviors (general instructions)
- Apply built-in JavaScript behaviors
- About XML and XSLT
- Perform server-side XSL transformations in Dreamweaver
- Performing client-side XSL transformations in Dreamweaver
- Add character entities for XSLT in Dreamweaver
- Format code
- Cross-product workflows
- Installing and using extensions to Dreamweaver
- In-App updates in Dreamweaver
- Insert Microsoft Office documents in Dreamweaver (Windows only)
- Working with Fireworks and Dreamweaver
- Edit content in Dreamweaver sites using Contribute
- Dreamweaver-Business Catalyst integration
- Create personalized email campaigns
- Templates
- About Dreamweaver templates
- Recognizing templates and template-based documents
- Create a Dreamweaver template
- Create editable regions in templates
- Create repeating regions and tables in Dreamweaver
- Use optional regions in templates
- Define editable tag attributes in Dreamweaver
- How to create nested templates in Dreamweaver
- Edit, update, and delete templates
- Export and import xml content in Dreamweaver
- Apply or remove a template from an existing document
- Edit content in Dreamweaver templates
- Syntax rules for template tags in Dreamweaver
- Set highlighting preferences for template regions
- Benefits of using templates in Dreamweaver
- Mobile and multiscreen
- Dynamic sites, pages and web forms
- Understand web applications
- Set up your computer for application development
- Troubleshoot database connections
- Removing connection scripts in Dreamweaver
- Design dynamic pages
- Dynamic content sources overview
- Define sources of dynamic content
- Add dynamic content to pages
- Changing dynamic content in Dreamweaver
- Display database records
- Provide and troubleshoot live data in Dreamweaver
- Add custom server behaviors in Dreamweaver
- Building forms using Dreamweaver
- Use forms to collect information from users
- Create and enable ColdFusion forms in Dreamweaver
- Create web forms
- Enhanced HTML5 support for form elements
- Develop a form using Dreamweaver
- Building applications visually
- Build master and detail pages in Dreamweaver
- Build search and results pages
- Build a record insert page
- Build an update record page in Dreamweaver
- Building record delete pages in Dreamweaver
- Use ASP commands to modify database in Dreamweaver
- Build a registration page
- Build a login page
- Build a page that only authorized users can access
- Securing folders in Coldfusion using Dreamweaver
- Using ColdFusion components in Dreamweaver
- Test, preview, and publish websites
- Troubleshooting
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.
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.
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.