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.
You must define a local site before you can view assets in the Assets panel.
Shows all of the assets in your site, including colors and URLs that are used in any document in your site.
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.)
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.
Media files such as Adobe Flash (only SWF) files, Adobe Shockwave files, QuickTime, or MPEG files.
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.
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.
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.
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.
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.
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.
The Assets panel shows the colors you’ve already applied to various elements, such as text, table borders, backgrounds, and so on.
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.
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.
The Assets panel allows you to select multiple assets at once. It also provides a quick way to begin editing assets.
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.
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.
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.
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.
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.
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.
- 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.
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.
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.