|[ LiB ]|
The Assets panel keeps track of and enables you to easily update or insert certain elements used in the site, such as images, colors, rich media files (Flash, Shockwave, and so on), and scripts. This is particularly helpful if you plan to reuse one of these items on many pages throughout your site.
To open the Assets panel, click Window > Assets, or expand the Files panel group in your panel dock and bring the Assets tab to the front (see Figure 17.22). The panel consists of two main sections: the assets list (the lower half of the panel) and the display area (the upper half). Selecting an asset in the assets list displays it in the display area. Because assets are organized by type rather than by the hierarchical directory structure used in the Site panel, you'll only ever be looking at one type of asset at a time. To switch between different asset types, click the buttons along the left side of the panel. The types of assets are listed here:
Images These are image files such as GIF, JPEG, or PNG contained in your site. These are image files that are in your site folder, regardless of whether they are currently linked to a document.
Colors These are all the colors used in your site, including background colors as well as text and link colors.
Flash movies These are Flash movies found in your local root folder. Only the SWF files are listed here, not FLA source files or the SWT template files.
Shockwave movies These are Shockwave movies created with Director or Authorware found in your site.
QuickTime and MPEG movies These are movies in either Apple QuickTime (.mov or .qt files) or MPEG format.
Templates When used correctly, templates provide an easy way to build and edit similar pages quickly and easily. Before relying too heavily on template-based design, be sure to spend time learning them inside and out.
Library Libraries are similar to templates, in that you change only one instance to update many. These are typically small content elements that are used on many pages throughout a site, such as a company logo or a default navigation panel.
To learn more about using Flash assets, see Chapter 16, "Building Web Pages with Flash." To learn about using templates and Library items in the Assets panel, see Chapter 20, "Site-Wide Content with Templates and Libraries."
The site cache determines the contents of the Assets panel. If you have recently added a media element, color , URL, or other asset to your site, yet it doesn't show up in the Assets panel, click the Refresh button at the bottom of the panel to get an updated list of assets.
Why are assets so wonderful? For one thing, the Assets panel makes it easy to find and insert images and other assets quickly into your documents as you work.
Images and other media elements (Flash movies, Shockwave movies, and more) are the simplest to insert from the Assets panel. It's all a matter of dragging and dropping, or selecting and clicking. To insert a media element into a document using drag-and-drop, do this:
To insert a media element using the Insert button, do this:
Inserting URL assets is slightly trickier than inserting media elements because the URL must be inserted as the href for a link. To insert a URL asset, follow these steps:
In one way, color assets aren't quite as useful as you might think because they can't be inserted or applied to very many document elements. The only kind of page element that will accept application of a color asset is textand when text is colored using this method, the color is added as part of a font tag (which has been deprecated in favor of CSS formatting). But used in conjunction with the Dreamweaver color picker and its sampling tool, color assets can be very handy indeed.
To use a color asset to colorize any page element in a Dreamweaver document, do this (see Figure 17.23):
Your site's assets list contains every single asset in the site, including colors, images, and URLs that you might use only once in the entire site. Typically, as your site becomes larger, the number of assets in your site increases as well. When you begin handling a 30-page site, you can easily have 50 or 60 different images, if not more! As you can imagine, this makes the assets list rather cumbersome and slow to navigate through.
To solve this problem, Dreamweaver has favorite assets. From all the assets in your site's assets list, you can choose only those that you know you'll be using repeatedly and declare them to be Favorites. Favorite assets show in the Assets panel when you switch to Favorites view (see Figure 17.24). Not only is it easier to navigate a list of 10 favorites than a list of 100 site assets, but the Favorites view can even be organized into folders for easier and more logical access. This section shows you how to organize and use Favorites-specific features.
All of the functionality of the Assets panel can be applied to favorite assets just as it is to site assets. To see and work only with your favorite assets, click the Favorites radio button at the top of the Assets panel.
The Favorites section begins completely empty. You must build it as you go. This can be a slow and tedious process, but it can result in large payoffs in the end, depending on the structure of your site.
You can add a site asset to your favorite assets by doing one of the following:
In the Assets window, select the asset(s) that you want to add to the Favorites list. Then click the Add to Favorites button at the bottom right of the window. This button looks like a plus (+) symbol and a purple ribbon.
Select the asset(s) that you want to add to the Favorites list in the Assets window. Access the context menu by clicking the right arrow button on the upper-right corner of the panel. You can also bring up this menu by right-clicking on the asset(s).
In Design view of the Document window, select the asset(s) (or object) that you want to add. Right-click the object(s) to access the context menu. Select Add to [Asset Type] Favorites.
The Favorites list wouldn't be worth much if you couldn't change your mind and delete an item from the list. To remove an asset from your Favorites list, follow these steps:
Note that when adding text to your Favorites, Add to Color Favorites appears if the text does not contain a link; otherwise , Add to URL Favorites appears.
Assets that you remove from the Favorites list are not actually deleted from your site in any way; they're simply removed from your Favorite Assets list.
To reduce clutter even further, you can group your assets in folders. This enables you to keep images that are part of your main navigation in their own folder, while keeping other commonly accessed images in another.
Creating Favorites folders and placing assets inside them does not change the location of the actual file in the directory structure of your site. It simply offers an easy way to further organize your assets.
To create a Favorites folder and place assets inside it, simply do the following:
Like most things in Dreamweaver, you can customize the Assets panel in many ways. In addition to defining favorite assets (covered earlier), you can change the listing order of the assets. By default, the assets are listed in ascending alphabetical order (from A to Z) by name or value. You can change the order of the listing by clicking the column heading with which you want to sort . This sorts the assets ascending alphabetically by that column's attribute. Clicking a column header a second time sorts the listing alphabetically still, only in descending order (from Z to A). If you sort a column of numbers , such as file size, the ordering is sorted numerically rather than alphabetically, from smallest to largest (ascending) initially.
You can also change the width of the columns in the Assets panel. To do this, simply hold your cursor directly over the divider line that separates two columns . You will notice that the pointer changes to a double-headed arrow column. You can now click and drag the column to any width that you want. This typically holds true for most windows that use columns.
Dreamweaver enables you to use assets in many ways. It even enables you to copy assets and share them among various sites.
To copy an asset from one site to another, follow these steps:
Selected assets are copied into the specified site and placed in folders that correspond to their locations in the current site. Any folders that don't already exist are created automatically. It's also important to note that assets copied in this fashion are automatically added to the other sites' Favorite Assets listings.
After the site on which you are working becomes rather large, you might forget where certain assets have been used. Dreamweaver will help you find them. If you would just like to find where a certain asset (or group of assets) is being used in the local site, follow these steps:
The Locate in Site option is not available with colors and URLs. This is because these two asset types do not have files associated with them; they are simply strings of text inside files.
The Assets panel provides an easy way to edit assets as well. This can come in handy when you want to edit multiple pictures but don't want to wade through the complex directory structure of the Site panel.
To edit an asset through the Assets panel, do one of the following:
Double-click the asset name. This launches the default editor (as specified in your preferences).
Select the asset and then click the Edit button found in the lower-right corner of the panel.
The type of asset that you want to edit dictates what happens next . With assets such as images and Flash movies, an external application is launched with the file in question open inside that program. In this case, simply edit the asset and then export it again to your local site folder, overwriting the older version.
Colors and URLs will not launch a separate application. In fact, you can edit these types of assets only if they are in your Favorites section. Editing a color brings up a swatch box, where you can choose a new color. Editing URLs brings up an Edit URL box, where you can change the URL as well as the nickname that the Assets panel uses to describe the URL. Library items and templates are opened for editing directly in the Document window.
If you are editing a color, you can get out of the color swatch box without choosing a new color by pressing the Esc key.
If nothing happens after you double-click an asset to edit it or use the Edit button, be sure to check the File Types/Editors section of your preferences to see if there's an application associated with that type of file.
Although you cannot create every type of asset from the Asset panel, you can create new color, URL, template, and library assets. (Image, Flash, and Shockwave assets are created outside of Dreamweaver.) You must be viewing your Favorites to create new colors and URLs.
To create a new color, make sure that the Favorites listing is currently being viewed , and select the Colors section. Click the New Color button in the lower-right corner of the panel. You can also use the context menu, either by right-clicking (Windows) or Ctrl-clicking (Mac) in the list, or by selecting the right arrow button in the upper-right corner of the panel and selecting New Color. This brings up a color swatch, where you can pick out your new color (see Figure 17.26). After you have selected a color, you can give it a nickname.
To create a new URL, make sure that the Favorites listing is currently being viewed, and select the URLs section. Click the New URL button in the lower-right corner of the panel. You can also use the context menu, either by right-clicking (Windows) or Ctrl-clicking (Mac) in the list, or by selecting the right arrow button in the upper-right corner of the panel and selecting New URL. This brings up the Add URL dialog box, where you can define both the nickname and the URL path for this new asset.
Notice that any colors or URLs that you create in the Favorite Assets listing won't appear in the site listing until they've actually been used in the site.
In this exercise, you'll do some more work with the eBooks site, this time working with image, link, and color assets.
In the Text field, enter Contact our sales department for more information .
In the E-Mail field, enter email@example.com .
|[ LiB ]|