Work with assets

Search
Adobe Dreamweaver User Guide

On this page

Applies to: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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