Assets Management with the Assets Panel

[ 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:

Figure 17.22. The Assets panel.

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.
URLs These are external URLs found linked to by documents in your site. These include HTTP, HTTPS, FTP, JavaScript, local file ( file: //), and email ( mailto: ) links.
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.
Scripts These are JavaScript and VBScript files found in your site. Only independent script files are listed. JavaScript located in your pages is ignored.
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.

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

Inserting Media Elements from the Assets Panel

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:

In the Document window, make sure Design view is active.
Open the Assets panel and click the desired icon to view the type of asset you want to insert.
From the assets list, grab the item you want to insert and drag it to the desired location in your document. Note that even though you can drag and drop an asset anywhere within your page, its final position within the document depends on the flow of content around it. Dragging an image into the middle of a paragraph of text causes the text to wrap around it. Dragging it to the right side of the page does not position it on the right if the page contents are aligned left.

To insert a media element using the Insert button, do this:

In the Document window, make sure Design view is active. Click to position the cursor where you want the asset to be inserted.
Open the Assets panel and click the desired icon to view the type of asset you want to insert.
In the Assets panel, select the asset you want to insert. Then click the Insert button.

Inserting URLs from the Assets Panel

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:

Open a document and make sure you're in Design view.
In the document, select the text or image that you want to link to the URL.
Open the Assets panel and click the URL icon to show URL assets.
Either find the URL you want to apply and drag it to the selected item in the Document window, or select the URL you want to apply and click the Apply button.

Inserting Color Assets

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):

Figure 17.23. Sampling a color from the Assets panel.

Open the Assets panel and click the color swatch icon to show color assets.
Open the document you want to work on, and either select the item that you want to colorize (layer, table, table cell , and so forth) or open the dialog box from which you'll be choosing a color (Page Properties, CSS Style Definition, or another option).
From whatever dialog box or Property Inspector you're in, find the color button and click it to activate the color picker.
Instead of choosing from the color swatches in the color picker, move the eyedropper cursor over to the Assets panel and click on the color asset swatch you want to sample. There's your color!

Your Favorite Assets

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.

Figure 17.24. The Assets panel showing Favorite assets.

Viewing and Working with Your Favorite Assets

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.

Select the asset(s) that you want to remove from your Favorites list.
Click the Remove from Favorites button. You can also right-click the asset and select Remove from Favorites from the context menu that appears. Alternately, you can select the asset in the Favorites list and press the Delete key. You can remove the entire Favorites folder as well, which removes all the folder's contents along with it.

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.

Grouping Your Favorite Assets

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:

Access your Favorites listing.
Click the New Favorites Folder button located in the lower-right corner of the panel. You might also select the New Favorites folder by right-clicking the asset.
Name the folder and drag the desired assets into the folder (see Figure 17.25).

Figure 17.25. Creating a group of favorite assets.

Customizing the Assets Panel

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.

Using Assets Throughout Your Site

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:

Select the asset(s) that you want to copy to another site. You can copy entire folders of assets in your Favorites listing.
Click the right arrow button located in the upper-right corner of the panel.
Select Copy to Site from this menu. A submenu appears with a list of the possible sites to copy the asset(s) to. Choose one of these sites listed.

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:

In the Assets panel, select the asset or assets that you want to locate.
Right-click to bring up the context menu. You can also access this menu by clicking the right arrow button located in the upper-right corner of the panel.
Choose Locate in Site from this menu. The Site panel appears, and the assets you searched for are highlighted.

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.

Editing Your Assets

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.

Creating New Assets

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.

Figure 17.26. Creating a new color asset.

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.

Exercise 17.2. Managing Assets for a Dreamweaver Site

In this exercise, you'll do some more work with the eBooks site, this time working with image, link, and color assets.

With the eBooks site as your current site, open the Assets panel. Take a look at the image assets. This site has many images. Some of these images will be used only once in the site, while others you'll want to reuse. Select the ebook_icon.gif entry and press the Add to Favorites button at the bottom of the panel. Now change the panel view to Favorites. The next time you want to insert this image, it's a lot easier to find in here!

Open about.htm . Wouldn't it look nice with a little ebook icon in the left margin? Drag ebook_icon.gif from the Assets panel to the left gutter area of the page (see Figure 17.27). That was simple! When you're done, save and close the file.

Figure 17.27. Adding an image from Assets to an eBooks page.
Now have some fun with link assets. Go to the URLs category of Assets. You don't see any entries here because the site doesn't contain any absolute URLs yet.

You're going to add a new absolute URL. Open titles.htm. At the end of the page's text, create a new paragraph and choose Insert > Email Link. When the dialog box appears, enter the following:
- In the Text field, enter Contact our sales department for more information .
- In the E-Mail field, enter sales@ebooksinternational.com .
Click the OK button to close the dialog box and insert the link. Save and close the file.
In the Assets panel, your email link doesn't show up right away. Press the Refresh button at the bottom of the panel. The new email address appears (see Figure 17.28).

Figure 17.28. URL assets for the eBooks site.
Now open about.htm . Under the Sales Department heading, the first sentence is about the sales department. Select the words sales department . In the Assets panel, grab the icon for the e-mail URL and drag it on top of the selected text. Then check the Property Inspector. The link has been added! Leave the file open when you're done.
Finally, try out the color assets. In the Assets panel, go to the Colors category. Two colors are used in the eBooks site, brown ( #ce6b00 ) and white ( #ffffff ).

You want to use that brown color for the subheadings on the About Us page. Subheading formatting is defined in a style sheet, so open the CSS Styles panel (Window > CSS Styles). Select the h2 style rule and press the Edit Style button at the bottom of the panel.
When the CSS Style Definition dialog box opens, find the color setting in the Type category. Click inside the color chip, and then move the eyedropper cursor over to the gold color chip in the Assets panel. Click again to sample this color. There's your color! Click OK to close the dialog box and check out your updated subheadings.