Working with the Assets Panel

Similar in concept to the Assets folder defined in the root of our Dorknozzle site, the Assets panel is a central repository for website elements. Unlike the Assets folder in our Dorknozzle project (which holds items such as PSD files, Word documents, and so on), however, the Assets panel contains items that our HTML files can and will use. Items such as images, Shockwave files, QuickTime files, Flash files, JavaScript, and even colors and links are all considered assets and are all managed in the Assets panel by Dreamweaver. By having access to these items in one central location, you have quick access to any of these items. No more shuffling around, searching for the same content in the local root folder. Furthermore, the Assets panel offers a Favorites feature that allows you to filter out more commonly used assets. Often times, websites have thousands of assets; usually, you don't need immediate access to all those assets. In this situation, Favorites allow you to store in a small subsection the more items you use most often, such as a company logo, colors you've been using throughout the site regularly, and commonly used hyperlinks.

NOTE

Because the Assets panel more or less indexes all your site's content, you must have a local root folder already defined. Dreamweaver then scans the files in your defined site and makes them visible within the appropriate categories in the Assets panel.

To open the Assets panel, choose the Assets option from the Window menu (or press F12) or, if you have the Files panel already open, choose the Assets tab located just to the right of the Files tab. As you can see from Figure 14.1, the Assets panel comes into view.

Figure 14.1. The Assets panel is a central repository for usable items in your defined site.

The Assets panel is divided into separate sections including:

• Asset Category Selector: The Assets panel is a repository for different types of usable items within your site including images, links, colors, media files, library items, and so on. All these items are divided into categories represented by the vertically listed icons in this menu.

• Assets List: The lower-middle portion of the panel is a list of all the assets in the site for the particular category.

• Assets Preview: The top portion offers a preview of the selected asset in the list.

• Site/Favorite View: Choose an option from this group to either display every asset within your defined site or just those assets that you've manually added to your favorites list. This option is discussed in more detail later in the chapter.

• Assets Panel Options menu: Like every other panel in Dreamweaver, the Assets panel Options menu gives you quick access to alternative options. Options listed in this menu include the ability to copy an asset to another defined site, locate an asset in the Files list, refresh and re-create the site list, and more.

• Insert, Refresh, Edit, Add to Favorites icon group: Use the icons listed in this group to insert a new asset into your document, refresh your site list, edit an asset in the appropriate internal or external editor, and add an asset to the favorites list.

As you've probably noticed, the Asset Category Selector lists several different types of icons, each representing a different type of asset managed in the panel. These options include:

• Images: Any image that is stored in your defined site, such as JPEG, GIF, or PNG, is automatically added to the images assets list. In our scenario, the Assets panel simply reads all the images located in our Images folder because that's where all our images happen to be contained.

• Colors: This category contains all the colors used throughout your site, including background colors, link colors, text colors, and so on.

• URLs: This category lists all the external links used throughout the site, which include absolute paths such as http, https, ftp, and other URLs used by JavaScript, email (mailto), and local file links.

• Flash: This section stores all your SWF files. Any SWF file found in your defined site appears here.

• Shockwave Movies: Any Shockwave movie (SWD), typically generated from Director, found in your local root folder or defined site is available in this category.

• Movies: This category stores QuickTime and MPEG movies found in your local root folder.

• Scripts: This category contains external scripts found in your defined site. It's important to note that only external script documents appear in the Assets panel. Scripts written in the <head> tag of your HTML pages are not listed here.

• Templates: Templates can add a great deal of consistency and organization to a site design. You can access all your site templates here. Templates are covered in detail in the next chapter.

• Library: In the Library category of the Assets panel, you can create, access, and manage a site's library items. Library items are similar to templates in terms of their functionality; however, library items are single components meant to be used throughout the entire site (such as navigation bars). Library items are covered in more detail in Chapter 16, "Working with Library Items."

NOTE

For the most part, Dreamweaver automatically scans your defined site and picks out the assets it can work with. You can always use the Cloak feature to prevent Dreamweaver from scanning files located within a particular folder. The Assets folder, for instance, is an excellent candidate for cloaking. For the most part, the Assets folder in our site contains PSD, FLA, TXT, and DOC files we can't use in our site anyway. Cloaking this folder prevents Dreamweaver from scanning that folder and importing any unneeded files into the Assets panel.

How the Assets Panel Works

Now that you have a simple understanding of what the Assets panel provides, it's important to understand how the Assets panel works. The Assets panel doesn't scan the structure of your site every time Dreamweaver is opened, nor does it scan the structure of your site when you open the Assets panel. Instead, the Assets panel, like many of the other features in Dreamweaver, works off the site's cache. Chapter 4, "Dreamweaver Site Management," discussed that the site cache was Dreamweaver's way of taking a "snapshot" of the folder and file structure of your site. Many features in Dreamweavernamely the Check Links feature, the Site Map feature, and more importantly the Assets panelrely on this snapshot for quick and efficient management of files. With that said, it's important that the Site Cache feature is enabled when you're defining or editing a site in Dreamweaver. If your Assets panel isn't listing items, chances are you've disabled the Site Cache check box. To re-enable it, follow these steps:

1.	Select the Manage Sites option from the Site menu. This action launches the Manage Sites dialog.
2.	Select the Dorknozzle site and click the Edit button. The Site Definition dialog appears.
3.	Be sure that the Advanced tab is selected and that you're in the Local Info category. Click the Enable Cache check box, located towards the bottom of the Local Info screen.
4.	Click OK to close the Site Definition dialog. Dreamweaver immediately scans the files in your site and closes the Site Definition dialog.
5.	Click Done to close the Manage Sites dialog.

For the Assets panel to display your site's assets, you'll want to refresh the panel. This process is outlined next.

Refreshing the Assets Panel

At some point in the development of your website, you'll find that you have to refresh the Assets panel so that the content is being displayed correctly. The Assets panel automatically updates every time you restart the site, but if you're in the middle of a project, that's not realistic. That's why there's a Refresh button, located in the bottom portion of the panel as shown in Figure 14.1.

There are numerous instances when you'll want to update or refresh the Assets panel:

• If you exported a graphic from Fireworks or Photoshop into the local root folder while Dreamweaver was running. In this scenario, you would need to refresh to make that content viewable in the Assets panel.

• If you use the Files panel to remove an asset (which ultimately deletes that file from the defined site), you would need to refresh the Assets panel to see the change.

• If you deleted an image or asset outside of Dreamweaver, such as in Windows Explorer, you would not only have to refresh the Assets panel for it to reflect the change, you must re-create the entire site cache. To re-create the entire site cache, access the Assets panel Options menu located in the top-right corner of the Assets panel and choose Recreate Site List, or you can hold down the Ctrl key in Windows (the Option key on a Mac) while clicking the Refresh icon at the bottom of the panel. Finally, you can right-click in the Assets panel and choose the Recreate Site List option from the context menu.

• If you've deleted some files that contain the only or last instance of a color or link asset, you should refresh the Assets panel to completely remove the color references from the Assets panel.

Inserting Assets into Your Web Pages

A couple methods exist for inserting assets into your documents. What you want to insert determines which method you should use. By far the simplest method of inserting an asset is to highlight the asset in the Assets panel and click the Insert button at the bottom left of the panel. Doing this inserts the asset at the point at which your cursor was placed. Alternatively, you could simply drag an asset out of the Assets panel and drop it into a spot in your document. To demonstrate this approach, follow these steps:

1.	Create a new document by choosing the New option from the File menu. The New Document dialog appears. Select the HTML option from the Basic Page category and click Create.
2.	Make sure that the Assets panel is open. To open the Assets panel, choose the Assets option from the Window menu (or press F11) or select the Assets tab if the Files panel is open.
3.	Select the Images category in the Assets panel if it's not already selected. The Images icon is the first icon in the category group along the left side of the panel.
4.	You can browse through the images, looking at the previews in the Asset panel's preview window. When you find one you're happy with, select it.
5.	With the image selected, click and drag the graphic into the page. When you let go of the mouse button, the image is added to the page.

Another way of inserting an asset, as mentioned earlier, is to use the Insert button on the Assets panel. This technique is important, especially when applying links to images or colors to text. To apply links to an existing image, follow these steps:

1.	Select the image you just added to the document.
2.	With that image selected in the document, switch to the Link category in the Assets panel.
3.	After browsing through the different link assets, highlight the link you want to use. I'll choose the second one in the list.
4.	To attach the link to the image, simply click the Apply button (formerly the Insert button). The Link text field of the Properties Inspector now shows the link you applied to the graphic, as shown in Figure 14.2. Figure 14.2. The Properties Inspector's Link text field reflects the link assets you applied to the image.

Of course it doesn't stop there. You can also apply colors to elements on the page, apply links to text, drag media files into the page, and more. The possibilities are limited only by the types of assets in your site.

Customizing the Assets Panel

The Assets panel was incorporated into Dreamweaver to enhance workflow. Macromedia knew that for workflow to be enhanced, it was important to allow people to customize features to better suit their work habits. The Assets panel is no exception. One of the more important workflow features in the Assets panel is the Favorites list. This list can save you a tremendous amount of time shuffling through thousands of images, links, and so on. "Adding Assets to Your Favorites," later in this chapter, covers the process in greater detail.

Another option you have for customizing your experience with the Assets panel is changing the listing order of the assets. As an example, switch to the Images category in the Assets panel. Notice that the default listing order is alphabetical, from A to Z for the name or value of the asset. Click the Name column heading in the Assets panel to flip the order from ascending (A to Z) to descending (Z to A). You can click any of the column headings to sort the list by that particular category. For example, if you wanted to sort by the smallest to largest file size, click the Size heading; if you wanted to sort by the type of asset, click the Type heading, and so on.

You can further customize the appearance of the Assets panel by resizing the columns. To do this, hold your mouse pointer directly over the line dividing the columns. When the mouse pointer changes into a two-way arrow, click and drag the dividers in whichever direction you want to resize the columns. By resizing the columns, you can see additional content, such as the type and possibly the full path, as shown in Figure 14.3.

Figure 14.3. When resizing the columns in the Assets panel, you can view more information about the assets, such as the type and the path to where the asset is located.

Managing Your Assets

Now that you've been working with assets, let's look at how you can manage them in your own sites and how you can share them with other sites. Often, you'll be working in a site and wishing you could have access to another site's assets. This is not an unreasonable requestit will just take a few steps of preparation. To copy assets from one site to another, follow these steps:

1.	Select the assets you want to copy in the Assets panel. To select multiple assets, you can either hold down the Ctrl key in Windows or the Command key on a Mac while clicking the assets of your choice, or hold down the Shift key to select a range of items.
2.	Right-click in the selected area to display the context menu or access the Options menu in the top-right corner of the Assets panel. From the menu, choose Copy to Site.
3.	When you choose the Copy to Site option, a submenu appears offering all the possible sites to which you can copy the assets. Choose the site in which you want the selected assets to be available. The asset files are copied into that site's corresponding folders. If the site does not contain the same folders for the files to be copied into, the folder is automatically created to accommodate the assets.

Copying assets to other sites is that simple! Open the site into which you copied the assets to make sure that they appear in that site's Assets panel; keep in mind that you might have to refresh the panel.

Another concern you may have when working with Assets is where the actual files are located. As you know, you can always see the path on the far right side of the Assets panel. Alternatively, you can use the Locate in Site option as a quick way of forcing the cursor to the file within the Files panel. When you choose the Locate in Site command, Dreamweaver opens the Files panel and highlights the location of the selected files in the Assets panel. As the first image in Figure 14.4 shows, one image is selected in the Assets panel when I right-clicked and choose the Locate in Site command from the context menu. As the second image in Figure 14.4 shows, the Files panel appears with the selected file in the list.

Figure 14.4. Right-click a selected asset and choose the Locate in Site command; the Files panel highlights the location of the selected asset.

Editing Assets

After using an asset, you may decide that you want to edit some of its properties using an external editor. For example, if you needed to update an image, you can change or edit that image using the external editor of choice with a simple click of a button. To edit an image asset, do one of the following:

• Highlight the image in the Assets panel and click the Edit icon located near the bottom right corner of the panel. This action automatically launches the default editor for that file format.

• Double-click the asset icon. Doing this also launches the default editor for that file type.

• Right-click the asset in the Assets panel and choose Edit from the context menu.

Although this process seems simple, it's not that intuitive for un-sourced assets such as links and colors. These assets are not linked to anything; therefore, when you edit them, they'll only be updated in the Assets panel for future use. If you want colors and links to be updated in the same way that images are, you'll need to use library items, discussed in Chapter 16, "Working with Library Items."

To edit assets such as color and links, they must be contained in the Favorites section of the panel. When you click the Favorites radio button, your favorite colors and links are revealed. (To add something to your Favorites list, refer to the following section of this chapter.) When you have the color you want selected, click the Edit button; the color swatch appears below the color name, as shown in Figure 14.5.

Figure 14.5. The color swatch appears inside the Assets panel when you're editing a color. The color must be located under the Favorites portion of the panel.

If the swatch is open and you decide you no longer want a different color, press Esc to make the swatch disappear without choosing a color.

To edit a link, do the same: highlight the link and click the Edit button in the bottom-right corner of the panel. This action opens the Edit URL dialog, as displayed in Figure 14.6, which allows you to specify a new URL.

Figure 14.6. When you edit a link, the Edit URL dialog box is launched.

Adding Assets to Your Favorites

By adding assets to your Favorites, you can greatly increase productivity. When you're dealing with the Assets panel for an entire website, the content often can become unwieldy. Many times, while navigating through the Assets panel, you're looking for a specific file that you use frequently. Instead of having to search for these files again and again, you can store them in a Favorites list, offering more direct access.

There are several ways to add assets to a Favorites list. You can use any one of the following techniques:

• Highlight the asset or assets you want to add to the Favorites and, from the panel's Options menu, choose Add to Favorites.

• Select the asset or assets you would like to add to the Favorites and right-click in the Assets panel. From the context menu, choose Add to Favorites.

• Select the assets you want to add to the Favorites list and click the Add to Favorites icon, located in the bottom-right corner of the Assets panel.

• Highlight an asset already placed in a document, right-click the item, and choose Add to Favorites from the context menu.

Removing Favorites

You can easily remove an asset from your Favorites list by following these steps:

1.	Be sure to have the Favorites radio button selected in the Assets panel.
2.	Select or highlight the asset you want to remove.
3.	Click the Remove from Favorites icon (formerly the Add to Favorites icon), located in bottom-right corner of the panel. Alternatively, right-click the asset in the panel and choose Remove from Favorites from the context menu. As a third option, you can select the asset selected and press the Delete key on your keyboard.

NOTE

When deleting favorites, you're not actually deleting the file from your site; rather, you are just removing the asset from the Favorites list.

Creating Folders to Organize Favorites

Another way to manage your favorite assets is to organize them into separate folders. Doing so affords you the opportunity to organize by attributes other than the categories specified by the Assets panel. For example, in your Images category, you can create several folders for different types of images. You could create a folder called Headshots, which would contain the different headshot images for your site. You could also set up a folder called Subheaders, which would contain all the subheader images used by the overall design of the site. The possibilities are endless, yet it does offer another way for the Assets panel to increase your productivity for a more efficient workflow. To create a new folder for Favorites, follow these steps:

1.	Make sure that the Assets panel is open and that you have the Favorites radio button selected. You can add asset folders only to the Favorites category.
2.	Click the New Favorites Folder icon located at the bottom-right corner of the panel. Alternatively, create a new folder by right-clicking in the Assets panel and choosing the New Favorite Folder command from the context menu.
3.	Name the folder and drag any asset you want into that folder, as shown in Figure 14.7. Figure 14.7. Drag asset favorites into their new folder.

Creating New URL and Color Assets

You can create new color and URL assets right within the Assets panel. To create new assets for either of these categories, make sure that you're in the Favorites section. To create a new color, click the Colors category and then click the New Color button located in the bottom-right corner of the Assets panel. You can also choose the New Color option from the panel's Options menu located in the top-right corner of the panel. When you choose the New Color command, a swatch appears, allowing you to choose a color (see Figure 14.8). Finally, after choosing a color, you can highlight it in the Assets panel and give it a nickname.

Figure 14.8. You can easily create a new color asset from within the Assets panel.

Creating a new link is just as easy: Select the URL category and be sure to view the Favorites section. At the bottom of the panel, click the New URL button, which launches the Add URL dialog. Here you can define the nickname and the URL you want the asset to link to.