14.3 Site Assets

Web pages integrate lots of different elements: GIFs, JPEGs, links, colors, and Flash and Shockwave movies, to name just a few. In a large site with lots of files, it can be a challenge to locate a particular image or remember an exact color.

To simplify the process, Dreamweaver provides the Assets panel. For want of a better generic term, Macromedia defines the term asset to mean any element you use on a Web page, such as a GIF file, a link, or even an individual color.

14.3.1 Viewing the Assets Panel

Dreamweaver lists your site's assets on the nine category "pages" of the Assets panel (Figure 14-13). To open the panel, choose WindowAssets, or press F11.

You select an asset in the list by clicking its name; a miniature preview appears above the Assets list. To preview a movie, click the green arrow that appears in the preview window.

The assets panel highlights nine different categories of site elements. To view the assets in a particular category, click its icon at the left of the Assets panel.

• The Images category lists all of the GIF, JPEG, and PNG files in your site.

• The Colors category shows all of the colors specified in the Web pages and embedded style sheets of your site. These include link colors, background colors, and text colors. Unfortunately, it doesn't include colors you've specified in linked style sheets. (For more detail on linked style sheets, see Section 6.1.2.)

• The URLs category lists all external links—not just standard http:// links, but also email links, FTP addresses, and JavaScript links. (For an example of a JavaScript link, see the box in Section 12.1.2.)

• The multimedia categories—Flash, Shockwave, and Movies—are roughly equivalent. They each display movie files with their corresponding extensions: .swf (Flash), .dcr (Shockwave), and .mov or .mpg (QuickTime and MPEG).

• The Scripts category lists JavaScript or VBScript files. This category only includes external script files that Web pages link to. Scripts that are embedded into a Web page—like those created using Dreamweaver Behaviors—are not listed.

• The last two categories?span class="docEmphBold">Templates and Library—are advanced assets that streamline Web site production. They're discussed in Chapter 17 and 18.

You can switch between two different views for each asset category—Site and Favorites —by clicking the radio buttons near the top of the Assets panel. The Site option lists all the assets that appear in the Site for the chosen category. Favorites lets you create a select list of your most important and frequently used assets (see Section 14.3.3).

If, as you are working on a site, you add additional assets—for example, you create a new GIF image in Fireworks and import it to the site—you'll need to update the Assets panel. Click the Refresh List button () to update the list of assets.

14.3.2 Inserting Assets

The Assets panel's prime mission is to make using assets easier. From the Assets list, you can add graphics, colors, and links to your pages with a click of the mouse. Most of the categories on the panel refer to external files that you can include on a Web page: images, Flash, Shockwave, movies, and scripts.

The easiest way to insert an asset file is to drag it from the Assets panel into the document window. You can drag the asset anywhere on the page you'd normally insert an object—in a table cell, at the beginning or end of a page, or within a paragraph. Script assets can go in the head of a Web page (see Figure 14-14).

(If you're billing by the hour, you may prefer the long way: Click in the document window to plant the insertion point, click the asset's name, and then click Insert at the bottom of the Assets panel.)

14.3.2.1 Adding color and link assets

Color and link assets work a bit differently than other asset files. Instead of standing on their own, they add color or a link to images or text you've selected in the document window. (You can add colors to any text selection, or add links to images and text.) In this way, you can quickly add a frequently used link—the URL to download the Flash player or Adobe Acrobat reader, for example.

POWER USERS' CLINIC The Return of Root-Relative Paths Chapter 4 explains the different types of link paths—absolute, document-relative, and root-relative—that Dreamweaver understands (see Section 4.1). While it's best to use documentrelative paths for linking to pages within your own site, or for adding images and other media to a page, you may notice that Dreamweaver frequently displays root-relative paths in its site management tools. For instance, the list in the Assets panel includes the full rootrelative path of each asset?span class="docEmphasis">/images_home/banner.gif, for example. The initial "/" indicates the root folder of the site, and the information that follows indicates the rest of the path to that asset. In this example, the graphic asset banner.gif is in a folder called images_home, which is itself in the site's root folder. Dreamweaver needs to look no further than the root folder to find the asset in question. Root-relative paths indicate a precise location within a site and let Dreamweaver know where to find a file. This doesn't mean, however, that you should use root-relative paths in your Web sites. Use document-relative paths—and let Dreamweaver do its own thing.

To do so, start by highlighting the text (to change its color or turn it into a link) or image (to turn it into a link). In the Assets panel, click the appropriate category button—Colors or Links. Click the color or link you want, and then click Apply. Alternatively, you can drag the color or link asset from the panel to the selection.

While you'll insert most assets into the body of a Web page, you can (and usually should) place script files in the head of the page. To do this, first choose ViewShow Head Content. Then drag the script from the Assets panel into the head pane, as shown here. (Adding a script asset does not copy the JavaScript or VBScript code into the Web page. Instead, just as with external style sheets, Dreamweaver links to the script file so that when a Web browser loads the page, it looks for and then loads the file from the Web site.)

GEM IN THE ROUGH Better Use of Color Assets Although color assets are only meant for coloring text, you can use them any time Dreamweaver's eyedropper tool appears, such as when you're about to apply color to tables, table cells, links, pages, and other elements. In other words, anytime you need a frequently used color, you can hop right to the Assets panel rather than pecking around on the color palette or trying to find another occurrence of the color on your screen. Whenever you click a color box—in the Page Properties window, Property inspector, or Style Definition window, for example—a color palette appears and the cursor changes to an eyedropper. You could, of course, use this eyedropper to pick a color from the palette or to sample a color from the screen. But if you've already used the color in your site—or saved it in the Favorites list (see Section 14.3.3)—just grab it from the Assets panel. To do so, move the eyedropper to the colored swatch in the Assets list and click.

14.3.3 Favorite Assets

On a large site, you may have thousands of image files, movie files, colors, and external links. Because scrolling through long lists of assets can be a chore, Dreamweaver lets you create a compact list of your favorite, frequently used assets.

For example, you might come up with five main colors that define your site's color scheme, which you'll use much more often than the other miscellaneous colors on the Assets list. Add them to your list of favorite colors. Likewise, adding graphics files you use over and over—logos, for example—to a list of favorites makes it easy to locate and insert those files into your pages. (Don't forget that you can also use Dreamweaver's Library and Template features for this function. They're similar, but more powerful tools for keeping frequently used items at the ready. Turn to Chapter 17 for the details.)

14.3.3.1 Identifying your Favorites

If the color, graphic, or other element to be added to your Favorites list already appears on your Assets panel, highlight it in the list and then click the Add to Favorites button ().

Even quicker, you can also add Favorites as you go, snagging them right from your Web page in progress. If you're working on your site's home page and you insert a company logo, for example, that's a perfect time to make the logo a favorite asset.

Simply right-click (Control-click) the image. From the contextual menu, choose Add to Favorites; Dreamweaver instantly adds the graphic to your list of favorites. You can do the same with Flash, Shockwave, and QuickTime files, as well with links. (Unfortunately, this shortcut doesn't work for colors and script files.)

When it comes to colors and links, there's another way to turn them into Favorites. In the Assets panel, select the Color or URLs category, click the Favorites radio button, and then click the New Asset button (). Then:

• If you're adding a favorite color, the Dreamweaver color box appears. Select a color using the eyedropper (see Section 1.3.3).

• If you're adding a favorite link, the Add URL window opens. Type an absolute URL in the first field, either a Web address starting with http:// or an email link?span class="docEmphasis">mailto: subscriptions@nationalexasperater.com. Next, type a name for the link in the Nickname field—Acrobat Download or Subscription Email, for instance—and then click OK.

Your new color or link appears in the Favorites list.

14.3.3.2 Using your Favorites

You insert assets from the Favorites list into your Web pages just as you would any assets; see Section 14.3.2.

14.3.3.3 Removing Favorites

Removing assets from the Favorites list is just as straightforward as adding them: just select one in the Favorites list of your Assets panel and then press Delete. The Remove from Favorites button () on the Assets panel does the same thing. Yet another approach is to use the contextual menu (see Figure 14-13).

Don't worry; removing an asset from the Favorites list doesn't delete that asset from the Assets panel—only from the Favorites list. You can still find it listed if you click the Site radio button.

14.3.3.4 Organizing Favorite assets

On a large site with lots of important assets, even a Favorites list can get unwieldy. That's why you can set up folders within the Assets panel to organize your assets. For example, if you use lots of ads on a site, create a folder in the Image assets Favorites called Ads or, for even greater precision, create multiple folders for different types of ads: Banner Ads, Half Banner Ads, and so on.

You can then drag assets into the appropriate folders, and you can expand or contract the folder to show or hide the assets inside (see Figure 14-15). These folders simply help you organize your Assets panel; they don't actually appear anywhere within the structure of your site. Moving a Favorite asset into a folder in the Assets panel doesn't change the location of files within your site.

In addition to using folders to organize your favorites, you can also give a Favorite asset an easily identifiable nickname. Instead of listing a favorite image using its file name?48593.gif—use an easily understood name like New Product. Naming favorite colors can be particularly helpful—a nickname like Page Background is more descriptive than #FF6633. To name a Favorite asset, click to select it, pause a moment, and click again to edit its name. (These nicknames only apply in the Assets panel; they don't rename or retitle your files.)

To create a Favorites folder, click the appropriate category button at the left edge of the Assets panel (any except the bottom two, since you can't create folders for Templates and Library items). Click Favorites at the top of the Assets panel (you can't create folders in Site view). Finally, click the folder button () at the bottom of the Assets panel. When the new folder appears with its naming rectangle highlighted, type a new name for the folder and then press Enter. (Don't use the same name for more than one folder.)

To put an asset into a folder, just drag it there from the list. And if you're really obsessive, you can even create subfolders by dragging one folder onto another.