Section 13.3. Site Assets
13.3. Site AssetsWeb 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's 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. 13.3.1. Viewing the Assets Panel Dreamweaver lists your site's assets on the nine category "pages" of the Assets panel (Figure 13-13). To open the panel, choose Window 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:
Figure 13-13. Most of the commands in the contextual menu are duplicated in the panel itself, but three options appear only on this menu. Recreate Site List comes in handy if you've added or deleted files outside Dreamweaver. It rebuilds the site cache and updates the list of assets. Copy to Site copies the selected asset to another site. Locate in Site opens the Files panel and highlights the file of the asset you selected in the Assets panel. You can also open a contextual menu by right-clicking (Control-clicking) any asset in the list. You can switch between two different views for each asset categorySite and Favoritesby 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 13.3.2.1). Note: Dreamweaver's cloaking feature lets you hide files from many site-wide tasks , including the Assets panel. So, if you have a folder with thousands of image files that you'd rather not display on the Assets panel, you can hide that folder and its files. See Section 15.2.3 for more on this feature. If, as you're working on a site, you add additional assetsfor example, you create a new GIF image in Fireworks and import it to the siteyou'll need to update the Assets panel. Click the Refresh Site List button (see Figure 13-13) to update the list of assets. 13.3.2. Inserting AssetsThe 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 objectin 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 13-14). Figure 13-14. 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 View |
Assets, or press F11. 
The 
The 
The 
The 
The 
The last two categories 
| POWER USERS' CLINIC The Return of Root-Relative Paths |
| Chapter 4 explains the different types of link pathsabsolute, document-relative, and root-relativethat Dreamweaver understands (see Section 4.1.2). While it's best to use document-relative 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 root-relative path of each asset /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 when you use the Assets panel to insert an image or other file, that Dreamweaver uses site-root-relative links. Dreamweaver uses the type of link you specified for the site as described on Section 13.1.1.3. |
13.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 linkthe URL to download the Flash player or Adobe Reader, for example.
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 buttonColors 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.
Note: Applying color to text using the Assets panel either creates a new CSS style or wraps the selected text in a <font> tag. The actual result depends on the Preferences setting described on Section 1.3.1.
13.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 is 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 overlogos, for exampleto 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 16 for the details.)
13.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 (see Figure 13-13).
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 shortcut menu, choose Add Image 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 as 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 (see Figure 13-15). Then:
-
If you're adding a favorite color, the Dreamweaver color box appears. Select a color using the eyedropper (see Section 1.3.3).
GEM IN THE ROUGH
Better Use of Color AssetsAlthough color assets are meant only for coloring text, you can use them any time Dreamweaver's eyedropper tool appears, such as when you're creating a CSS style and wish to add text color, background color, or border color. In other words, any time 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 boxin the Page Properties window, Property inspector, or Style Definition window, for examplea 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 siteor saved it in the Favorites listjust grab it from the Assets panel. To do so, move the eyedropper to the colored swatch in the Assets list and click.
-
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 (for instance, mailto :subscriptions@nationalexasperator.com). Next, type a name for the link in the Nickname field Acrobat Download or Subscription Email , for instanceand then click OK.
Your new color or link appears in the Favorites list.
13.3.3.2. Using your Favorites
You insert assets from the Favorites list into your Web pages just as you would any other assets; see Section 13.3.2.
13.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 (see Figure 13-15) on the Assets panel does the same thing. Yet another approach is to use the contextual menu (Figure 13-13).
Don't worry; removing an asset from the Favorites list doesn't delete that asset from the Assets panel (or your site)only from the Favorites list. You can still find it listed if you click the Site radio button.
Figure 13-15. In addition to using folders to organize your favorites, you can give a Favorite asset an easily identifiable nickname. Instead of listing a favorite image using its file name148593.gifuse an easily understood name like New Product. Naming favorite colors is 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 apply only in the Assets panel; they don't rename or retitle your files.)
13.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 13-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.
To create a Favorites folder, click the appropriate category button at the left edge of the Assets panel (any except the bottom two, since, alas, 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 New Favorites Folder button (see Figure 13-15) 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.
![Dreamweaver 8[c] The Missing Manual](/icons/blank_book.jpg "Dreamweaver 8[c] The Missing Manual"){kind=icon}