User Guide Cancel

Work with assets

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

 

 

Use the Assets panel in Dreamweaver to manage assets in the current site.

You can use Adobe Dreamweaver to keep track of and preview assets stored in your site, such as images, movies, colors, scripts, and links. You can also drag an asset directly to insert it in a page of the current document.

You obtain assets from various sources. For example, you might create assets in an application such as Adobe Photoshop, or Adobe Animate CC, or receive them from a co‑worker, or copy them from a clip-art CD or graphics website.

Dreamweaver also provides access to two special types of assets—libraries and templates. Both are linked assets: when you edit a library item or template, Dreamweaver updates all documents that use those assets. Library items generally represent small design assets, such as a site logo or copyright. To control a larger design area, use a template instead.

Use the Assets panel (Window > Assets) to manage assets in the current site. The Assets panel displays assets for the site associated with the active document in the Document window.

Note:

You must define a local site before you can view assets in the Assets panel.

Assets panel in Live view
Assets panel in Live view

Assets panel in Design and Code View

The Assets panel provides different ways to view assets:

Site list

Shows all of the assets in your site, including colors and URLs that are used in any document in your site.

Favorites list

Shows only the assets you’ve explicitly chosen.

To switch between these two views, select either the Site or Favorites radio button above the preview area. (These two views are not available for the Templates and Library categories.)

Note:

Most of the Assets panel operations work the same in both lists. There are a few tasks, however, that you can perform only in the Favorites list.

In both lists, assets fall into one of the following categories:

Images

Image files in GIF, JPEG, or PNG formats.

Colors

Colors used in documents and style sheets, including colors of text, backgrounds, and links.

URLs

External links in your current site documents, including FTP, gopher, HTTP, HTTPS, JavaScript, e‑mail (mailto), and local file (file://) links.

Media

Media files such as Adobe Flash (only SWF) files, Adobe Shockwave files, QuickTime, or MPEG files.

Scripts

JavaScript or VBScript files. Scripts in HTML files (rather than in independent JavaScript or VBScript files) do not appear in the Assets panel. This category is available only in Code and Design View.

Templates

Master page layouts used on multiple pages. Modifying a template automatically modifies all pages attached to it. This category is available only in Code and Design View.

Library items

Design elements that you use in multiple pages; when you modify a library item, all pages containing that item are updated. This category is available only in Code and Design View.

Note:

To appear in the Assets panel, a file must fall into one of these categories. Some other types of files are sometimes called assets, but they aren’t shown in the panel.

By default, assets in a category are listed alphabetically by name, but you can sort them by type and several other criteria. You can also preview assets and resize the columns and the preview area.

The Creative Cloud icon in the Type column indicates that the corresponding assets are imported from Creative Cloud Libraries. You can double-click the Creative Cloud icon for resampling the corresponding assets. For more information on reusing assets in CC Libraries, see Creative Cloud Libraries in Dreamweaver.

View an asset in the preview area

  1. Select the asset in the Assets panel.

Display assets in a category

  1. Click a category icon on the left side of the Assets panel.

Sort assets

  1. Click a column heading.

    For example, to sort the list of images by type (so that all the GIF images are together, all the JPEG images are together, and so on), click the Type column heading.

Resize a column

  1. Drag the line separating two column headings.

Resize the preview area

  1. Drag the splitter bar (between the preview area and the list of assets) up or down.

Refresh the Assets panel

It can take a few seconds to create the Site list because Dreamweaver must first read the site cache.

Certain changes don’t appear immediately in the Assets panel. For instance, when you add or remove an asset from your site, the changes don’t appear in the Assets panel until you refresh the Site list by clicking the Refresh Site List button. If you add or remove an asset outside Dreamweaver—using Windows Explorer or the Finder, for example—you must rebuild the site cache to update the Assets panel.

When you remove the only instance of a particular color or URL in your site, or when you save a new file that contains a color or URL that isn’t already used in the site, the changes don’t appear in the Assets panel until you refresh the Site list.

  • To refresh the Site list manually, click the Refresh Site List button . Dreamweaver creates the site cache or updates it as necessary.
  • To refresh the Site list and manually rebuild the site cache, right-click (Windows) or Command-click (Macintosh) in the Assets list, then select Refresh Site List.

Add an asset to a document

You can insert most assets into a document by dragging them into Live View, Code View, and Design View in the Document window, or by using the Insert button in the panel. You can drag the assets from both the list view and the preview pane of the Assets panel.

Note: Dragging from the preview pane is supported only on Mac.

You can insert colors and URLs in Design or Live View. In Design View, you can apply colors and URLs to selected elements.

 

  1. In the document, place the insertion point where you want the asset to appear.

  2. In the Assets panel, select from the asset category buttons at the left.
    Note:

    Select any category except Templates. A template is applied to an entire document; it can’t be inserted into a document.

  3. Select either Site or Favorites at the top of the panel, then select the asset.

    There are no Site or Favorites lists for library items; skip this step if you’re inserting a library item.

  4. Do one of the following:

    • Drag the asset from the panel to the document. You can drag from the list view as well as from the preview pane.

      Note: On Windows, you cannot drag assets from the preview pane.

      You can drag scripts into the head content area of the Document window; if that area isn’t visible, select View > Head Content.

    • Select the asset in the panel and click Insert.

      If the inserted asset is a color, it applies to text appearing after the insertion point.

Apply color to text using the Assets panel

The Assets panel shows the colors you’ve already applied to various elements, such as text, table borders, backgrounds, and so on.

  1. In Design View, perform the following steps:

    1. Select the text in the document.

    2. In the Assets panel, select the Colors category.

    3. Select the desired color, and click Apply.

  2. In Live View, perform the following steps:

    1. In the Assets panel, select the Colors category.

    2. Do one of the following:

      • Right-click the color in Assets panel, and click Copy Color Value. The color value is copied to your clipboard. You can now paste the color value (Ctrl+v, Cmd+v) in CSS Designer.
      • Drag the color from preview and hover the mouse on elements in Live View. When you drop the color, the New CSS Rule dialog appears and when you click OK, the color is applied to the selected element.
      • Click Apply in the Assets panel. The New CSS Rule dialog appears and when you click OK, the color is applied to the selected element.

Assign URLs to images or text 

  1. In Design View, perform the following steps:

    1. Select the text or image.

    2. In the Assets panel, select the URLs category in either the Sites or Favorites view, depending on where the URL is stored.

      Note:

      URLs for your site’s files are stored in the Sites view by default. The Favorites view holds URLs that you have added yourself.

    3. Select the URL.
    4. Do one of the following:

      • Drag the URL from the panel to the selection in Design View.

      • Select the URL, then click Insert.

  2. In Live View, perform the following steps:

    1. In the Assets panel, select the URLs category in either the Sites or Favorites view, depending on where the URL is stored.

    2. Do one of the following:

      • Drag the URL from the preview or the list view. Hover the mouse on elements in Live View. When you drop the URL, <a> wraps the element highlighted in Live View.
      • Click the required element in Live View. Choose the URL in the Assets panel and click Apply. The selected element is wrapped with the <a> tag.

Select and edit assets

The Assets panel allows you to select multiple assets at once. It also provides a quick way to begin editing assets.

Select multiple assets

  1. In the Assets panel, select an asset.
  2. Select the other assets in one of the following ways:

    • Shift-click to select a consecutive series of assets.

    • Control-click (Windows) or Command-click (Macintosh) to add an individual asset to the selection (whether or not it’s adjacent to the existing selection). Control-click or Command-click a selected asset to deselect it.

Edit an asset

When you edit an asset in the Assets panel, the behavior varies according to the asset type. For some assets, such as images, you use an external editor, which opens automatically if you have defined an editor for that asset type. You can edit colors and URLs in the Favorites list only. When you edit templates and library items, you make the changes within Dreamweaver.

  1. In the Assets panel, do one of the following:

    • Double-click the asset.

    • Select the asset, then click the Edit button.

    Note:

    If the asset must be edited in an external editor and one doesn’t open automatically, select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), select the File Types/Editors category, and make sure you have defined an external editor for that asset type.

  2. Make your changes.
  3. When you finish, do one of the following:

    • If the asset is file-based (anything other than a color or URL), save it (in the editor you used), and close it.

    • If the asset is a URL, click OK in the Edit URL dialog box.

    Note:

    If the asset is a color, the color picker closes automatically after you pick a color. To dismiss the color picker without picking a color, press Esc.

Reuse assets in another site

The Assets panel shows all the assets (of recognized types) in your current site. To use an asset from the current site in another site, you must copy it to the other site. You can copy an individual asset, a set of individual assets, or an entire Favorites folder at once.

You may need to locate the file in the Files panel that corresponds to an asset in the Assets panel before you transfer the asset to or from your remote site.

Note:

The Files panel might show a different site from the one that the Assets panel shows. This is because the Assets panel is associated with the active document.

Locate an asset file in the Files panel

  1. In the Assets panel, select the category of the asset you want to find.
  2. Right-click (Windows) or Control-click (Macintosh) the asset’s name or icon in the Assets panel, then select Locate In Site from the context menu.
    Note:

    Locate In Site is unavailable for colors and URLs, which do not correspond to files in the site.

    The Files panel opens, with the asset file selected. The Locate In Site command locates the file corresponding to the asset itself; it does not locate files that use that asset.

Copy assets from the Asset panel to another site

  1. In the Assets panel, select the category of the asset you want to copy.
  2. Right-click (Windows) or Control-click (Macintosh) one or more assets in either the Site list or Favorites list, select Copy To Site, and select the target site name from the submenu listing all the sites you’ve defined.
    Note:

    In the Favorites list, you can copy a Favorites folder as well as individual assets.

    The assets are copied to their corresponding locations in the target site. Dreamweaver creates new folders in the target site’s hierarchy as needed. The assets are also added to the target site’s Favorites list.

    Note:

    If the asset you copied is a color or a URL, it appears only in the target site’s Favorites list. Because colors and URLs don’t correspond to files, there’s no file to copy into the other site.

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

Legal Notices    |    Online Privacy Policy