Working with Assets

The Assets panel might not recognize every asset type, but it does recognize many of the most common ones. The left side of the Assets panel has a column of buttons that let you choose the category of assets to displayImages, Colors, URLs, Flash, Shockwave, Movies, Scripts, Templates, and Library. The right side of the panel lists the assets within the selected category. A preview version of a selected asset is displayed above the list.

Unfortunately, Dreamweaver doesn't track assets such as audio files, Adobe Acrobat PDFs, or Java applets. Also, be aware that although the Movies category might recognize and include assets such as Windows Media movies, you can't preview them in the Assets panel.

Tip

You can expand the preview area by dragging the splitter bar between the preview and list areas.

Creating a Favorites List and Favorites Folder

The Assets panel has two different views, which you can toggle between by using the two radio buttons at the top of the panel. The Site list provides a complete list of all the assets in every folder and page of the site. The Favorites list displays only the assets you choose to put there (see Figure 24.2). If you create a well-planned Favorites list for your site, you'll have the colors, URLs, and other elements that you use frequently readily available, while still having convenient access to the less-used assets from the Site list.

Figure 24.2. The Favorites list contains only assets you select, creating a specialized list of your most frequently used assets.

Adding an Asset to the Favorites List

To add an asset to the Favorites list, choose the asset from the Site list and then click the Add to Favorites icon at the bottom of the panel.

You can also add images and media files to the Favorites list by right-clicking on the object in the Site view and then choosing Add to Favorites from the context menu.

Assets added to the Favorites list remain on the list unless you manually remove them. Even if you delete the item from your computer and refresh or re-create the site cache to update the Assets panel, the Favorites list remains the same. Therefore, you need to keep a close eye on your Favorites list and periodically go through and remove assets that no longer exist. To remove an asset from this list, select it and then click the Remove from Favorites button.

Note

Removing an asset from the Favorites list doesn't delete the asset from the site. It's still accessible from the Site list.

Creating a New Favorites Folder

Even when you're using the Favorites list, it's easy to become overwhelmed with assets, particularly on a large site. An advantage the Favorites list has over the Site list is that it enables you to organize assets into groups called Favorites folders.

Favorites folders can be useful for organizing and quickly locating images you want to use together on your pages. For example, when developing the site for Retro's Cycles, you might have images of the various motorcycles for use within the site. If you group these into Favorites folders, you'll know exactly where to look to find the images you seek. If you really want to keep your favorites organized, you can even nest Favorites folders.

To create a Favorites folder, switch to the Favorites view in the Assets panel and then click the New Favorites Folder button at the bottom of the panel. Give the folder a name and you're ready to begin adding assets to the folder by either dragging and dropping them from your pages or creating them directly in the folders.

Asset Types

When adding assets to your site, you need to be aware of some of the specific purposes and limitations that go along with the various asset types that Dreamweaver tracks.

Images

The Images category lists every image file that you've placed within your local site, even if you've not yet used them on a page. Whenever you refresh or re-create the site list, Dreamweaver searches the root site folder as well as all subfolders and adds the GIF, JPEG, and PNG formatted files it finds to the list of available assets.

Colors

The Colors category lists all colors that have been used for text, backgrounds, or links on any page within the site. Again, when you rebuild the asset cache, all colors that have been used are added to the site for future reference and reuse. Dreamweaver does not include colors from images or media files, so the colors used in your Flash SWF or Fireworks PNG files are not included in the Assets list. If you have a color that you have not used in a page, but want to include as an asset in your site, you can manually add it to the panel by switching to the Favorites view, clicking the New Color button, and using the color picker to select the color from either the swatch (see Figure 24.3) or an area of the page.

Figure 24.3. The color picker enables you to select colors from the palette or type a hexadecimal number for the color.

Note

After a color is added to a page within the site, it remains in the Colors category even if the color is completely removed from every page in the site.

URLs

Just as Dreamweaver tracks the colors and images that you use in your pages, it also tracks the links you create to pages outside of your site. It scans your documents for hyperlinks and includes all references to HTTP, FTP, Gopher, HTTPS, JavaScript, and email. Keep in mind, however, that links to documents within your own site are not included in the URLs section of the Asset panel.

As with colors, you can create new URLs directly in the Favorites list by choosing the Favorites view, selecting the URLs category, and clicking the New URL button at the bottom of the panel. In the Add URL dialog box (see Figure 24.4), type the full URL, give it a nickname, and click the OK button.

Figure 24.4. Enter a URL and nickname for the new asset. The nickname can be used as the source text for the link when inserted into a document.

The URL's nickname simply provides an easy reference for where the URL points. For instance, if you create a link to http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_16563, you might create a nickname called Dreamweaver Sessions to help you remember that the URL links to a tech tip article that discusses how to create a session variable.

Flash Movies

If your site contains Macromedia Flash (SWF) files, they'll be listed in the Flash category of the Assets panel. This list also includes Flash buttons or text objects that you create in Dreamweaver. The Assets panel also enables you to preview your Flash content. When one of these assets is selected, a small Play button appears in the upper-right corner of the preview area. Most likely, you will need to resize the Assets panel to view the entire Flash movie. Another way to preview the movie is to double-click the file in the Assets list, which opens and plays the Flash Movie in a new browser window.

Tip

The preview area is useful for movies that are small enough to fit in the preview area. Large movies are not easily displayed in this area, so it's best to double-click on them in the Assets list to view them in a new browser window.

Note

The Assets panel does not list Flash source (FLA) files.

Shockwave Movies

This category shows all movies created in the Macromedia Shockwave format. As with Flash movies, Shockwave files can be previewed in the preview area or with a standalone QuickTime player.

Movies

If your site has any movies in the MPEG or QuickTime format, they are displayed in the Movies category. As with Flash and Shockwave movies, you can preview them in the Assets panel or the standalone QuickTime player. Movies created in the Windows Video (WMV) and RealMedia formats are also included in the Assets panel, but they cannot be previewed.

Scripts

JavaScript and VBScript files are listed in the Scripts categoryas long as they are named with the proper extension. The Assets panel contains only scripts in files with JS or VBS extensions. Scripts contained within HTML files aren't listed. For quick preview reference, the text of the script file is displayed in the preview pane when you select the asset.

When a script asset is inserted into a document, a <script src="/books/1/325/1/html/2/file://...> tag is created with the src attribute containing a link to the script file.

Templates

This category lists Dreamweaver template (DWT) files. A template is a document you can use to provide a standardized layout for your pages. Templates are among the few assets you can create from the Site list. The creation and use of templates is covered in more detail later in the book.

Library Items

Library assets are elements you want to use in multiple pages. A Library item is created from an object such as an image or even a full navigation bar. After it is created, you can include the Library item, rather than the original object, in your pages. The reason for doing this is evident when it comes time to update the object. Rather than having to make the update on every page that includes the object, you can simply update the Library item and the changes replicate automatically throughout every page that contains that Library reference.

Reusing Assets

Of course, the real power of the Assets panel is in its capability to streamline your development time. You can insert most types of assets directly into a document by dragging them from the Assets panel to the Design view of the Document window or by using the Insert button at the bottom of the panel. In the Colors and Templates categories, the Insert button changes to the Apply button.

Keep in mind that the asset is added to the page at the insertion point. In the case of colors, text typed after the insertion point appears in the selected color. When you insert a URL asset, the destination path of the URL appears as the source for the link; the source text can, of course, be modified if you would rather display alternate text.

For assets such as URLs and colors, you can also apply them to selected text in Design view by highlighting the appropriate text, selecting the asset in the Assets panel, and clicking the Apply button.

To apply scripts to the head of the page, select View, Head Content; then drag the script from the Assets panel into the Head Content area of the Document window.

Maintaining the Assets Panel

The Assets panel requires regular maintenance to retain its value. As the site evolves, so do the assets, but the Assets panel lacks the capability to automatically keep up with its listings. Assets themselves might need to be updated. And, finally, it might be useful to for a site to share assets already listed on another site. In addition, as mentioned previously, you need to update your Favorites lists manually because Dreamweaver does not automatically remove assets that have been relocated or deleted from your workstation.

Editing Assets in Other Programs

Because Dreamweaver integrates so easily with Fireworks and Flash, with the click of a button you can start editing objects that were initially created outside of Dreamweaver. To edit an asset, either double-click it in the Assets panel or select the asset and click the Edit button. If the asset was created within Dreamweaver (such as a script), you can edit it directly in Dreamweaver. Otherwise, the application to use is determined by the settings in the Dreamweaver Preferences tool. If you want to use a different application than the default, select Edit, Preferences and select the File Types/Editors category. Then add the application you want to use to edit that file type. Keep in mind, however, that because Fireworks and Flash are so tightly integrated with Dreamweaver, keeping them as your default editors for graphics and rich media is generally the fastest and easiest way to work.

Assets that don't reside in physical files, but are scanned from your documents insteadsuch as URLs and colorscan be edited only in the Favorites list.

Using the Assets Panel Between Sites

Often assets are useful across multiple sites. However, for an asset to be available, it must first be copied to the Favorites list of the new site. To make an asset available to another site, right-click on the asset in the Assets panel of the site that currently has the asset, choose Copy to Site, and select the name of the site to which you want to copy it.