| For your Assets panel to work, you must have a local root folder already defined. The Assets panel more or less behaves like an index of all your site's content; however, for some of the assets to appear in the panel, that particular asset must be inserted into a document within your site. Some categories are an exception. Cloaked files will appear in your Assets panel as long as they are an asset that is compliant with the Assets panel. Cloaked files will remain hidden only from a server or host. To open your Assets panel, choose Window, Assets, or use the keyboard shortcut of F11. The beauty of the Assets panel is that it manages so many types of media and content. The options include the following: Images Any image that is stored within your defined site, such as a JPEG, a GIF, or a PNG file, will automatically be added to the images assets list. Images do not have to be placed into the document first as in some of the other categories. Colors This category contains all the colors used throughout your site, including background colors, link colors, and text colors. URLs This houses all the external links used throughout your site, which include absolute addresses such as http, https, ftp, and even other URLs used by JavaScript, email, and local file links. Flash This section stores all your SWF files. Any SWF file found within your defined site will appear here; however SWT and FLA files will not appear in the Assets panel; only the exported SWF is compliant with the panel. To learn more about Flash and Dreamweaver, refer to Chapter 14, "Inserting Flash and Shockwave," and Appendix C, "Integration with Flash MX." Shockwave Movies Any Shockwave movie, typically generated from Director, that is found within your local root folder or defined site will be available in this section. To learn more about Shockwave and Dreamweaver, refer to Chapter 14. MPEG Movies This section stores QuickTime and MPEG movies found within your local root folder. See Chapter 13, "Adding Video and Audio" for more information about working with video inside Dreamweaver. Scripts This section can store scripts found within your defined site. Only separate script documents appear in the Assets panel. Scripts written within pages are not stored here; however, if you do write and use many of your own scripts, you may want to consider saving them as separate documents to take advantage of the Assets panel. Templates Templates can add a great deal of consistency and organization within a site design. You can access all your site templates here within the Assets panel. Templates are covered in great detail in the previous chapter, Chapter 8, "Dreamweaver Templates." Library In the Library section 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 they're more focused on single items, in contrast to page designs. Refer to the end of this chapter for more information on library items. How the Assets Panel Works The Assets panel is divided into separate sections. The section on the left is for selecting a category. The lower-middle portion of the panel is a list of all the assets within the site for the particular category. The top portion offers a preview of the selected asset in the list. When working with the Assets panel, be sure to have the site cache enabled. You can enable the site cache by choose Site, Edit Sites. This launches the Edit Site dialog box. Highlight the site you want to edit and click the Edit button. When you click the Edit button, the Site Definition dialog box appears. Be sure to have the Advanced tab selected and that you're in the Local Info category. In the middle of the box, click the Enable Site Cache check box, as shown in Figure 9.2. Figure 9.2. You can enable the site cache in the Site Definition dialog box. This ensures that your assets will appear in the Assets panel.
If you add a link or color to a document in your Web site, you must save that document before the color and link will appear in the Assets panel. Refreshing the Assets Panel At some point in the development of your Web site, you'll find that you need to refresh the Assets panel so that the content is being displayed correctly. The Assets panel automatically updates every time you restart the application, 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 9.3. Figure 9.3. The Assets panel has a Refresh button to ensure that the most up-to-date content is being viewed.
Okay, you're probably wondering why you would need to update or refresh the Assets panel. Here are the most common reasons: If you exported a graphic from Fireworks or Photoshop into the local root folder while Dreamweaver was running, you would need to refresh to make that content viewable in the Assets panel. If you use the Site window/panel to remove an asset by deleting it, you would need to refresh the Assets panel for the panel to represent that 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, but you will have to refresh the entire site cache. To refresh the entire site cache, you can access the submenu located in the top-right corner of the Assets panel and choose Re-create Site List, as shown in Figure 9.4, or you can hold down the Command (Mac) or Ctrl (Windows) key while clicking the Refresh button. Finally, you can contextual-click in the Assets panel and access the Re-create Site List option from the contextual menu. Figure 9.4. Use the submenu in the Assets panel either to refresh the Assets panel or re-create the site cache. 
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 see that those particular assets have been removed. Inserting Assets You can insert assets into your documents in a couple of ways. What you want to insert will determine which method you should use. To insert an asset, place a blinking cursor somewhere within the document. If you want precise placement, be sure to have a blinking cursor within a table or layer. Then move over to the Assets panel and highlight the asset you'd like to insert and click the Insert Asset button located toward the bottom of the panel, as shown in Figure 9.5. This places the selected asset in the position of your blinking cursor. Figure 9.5. Click the Insert Asset button located at the bottom of the Assets panel to place an asset into your document.
The easiest way is to simply drag and drop. To follow along with these steps, you should have a table set up within your document, and you should be working within a defined site. Within that defined site should be some graphical files to work with. To drag and drop an Asset, follow these steps: -
Make sure your Assets panel is open. To open the Assets panel, choose Window, Assets or press F11. -
In this situation, I want to place a graphic in the top cell of the document that I'm working with, as pictured in Figure 9.6. So it's important that the images category is the active category. Figure 9.6. Notice that there is no content in the cell toward the top of the page. I'm going to insert an asset from the Assets panel into that location.
-
You can browse through the images, looking at the previews the Assets panel offers. When you find one that you're happy with, select it, as shown in Figure 9.7. Figure 9.7. After browsing through the different images in the Assets panel, I clicked the one I wanted to select.
-
Click and drag the graphic to the desired location in this case, the top cell in my table. When the mouse is over the area where you want the graphic to appear, let go of the mouse, and the image will be placed properly inside the cell, as shown in Figure 9.8. Figure 9.8. After dragging and dropping the asset on top of the cell, you'll notice the image automatically appears in the appropriate location.
Another way, as I 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 graphic, follow these steps: -
Select the graphic within the document you want to apply the link to. -
With that graphic selected in the Assets panel, be sure to have the link category selected. -
After browsing through the different link assets, highlight the link you want to use. -
With the image selected on the document and the link highlighted in the Assets panel, click the Apply button toward the bottom of the panel. The link text field of the Properties Inspector now shows the link you applied to the graphic, as shown in Figure 9.9. Figure 9.9. The Properties Inspector's link text field reflects the link assets you applied to the image.
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. The first thing you can do is create a list of Favorites. This list can save you a tremendous amount of time shuffling through thousands of images, links, or whatever the asset may be. A section in this chapter titled "Adding Assets to Your Favorites" 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. The default listing order is alphabetical, from A to Z for the name or value of the asset. If you click the name title header in the Assets panel, you flip the order from Ascending (A to Z) to Descending (Z to A). On the header of the column, an arrow either points down to indicate Ascending order or points up to indicate Descending order, as shown in Figure 9.10. Figure 9.10. The arrow on the header is pointing up, indicating the list is being viewed in descending order.
You can click any one of the headers to sort the list by that particular category. For example, if you wanted to sort by the smallest to largest file size, you would click in the size header. You can further customize the appearance of the Assets panel by resizing the columns. To do this, hold your cursor directly over the dividing lines. When your cursor 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 9.11. Figure 9.11. When resizing the columns in the Assets panel, you're able to 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 a bit, 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 request it will just take a few steps of preparation. To copy assets from one site to another, follow these steps: -
Select the assets you want to copy in the Assets panel. To select multiple assets, you can either hold down the Command (Mac) key or Ctrl (Windows) key while clicking the assets of your choice, or hold down the Shift key to select a range of items. -
Contextual-click in the selected area, or you can access the submenu in the top-right corner of the panel. In the menu, choose Copy to Site, as shown in Figure 9.12. Figure 9.12. With assets highlighted, you can copy them to other sites by choosing the Copy to Site command in the context or submenus.
-
When you choose the Copy to Site command, a submenu appears, as shown in Figure 9.12, offering all the possible sites you can copy the assets into. Choose the site that you want the selected assets to be available in. These files will then be copied into the site's corresponding folders. If the site does not contain the same folders for the files to be copied into, the folder will automatically be created to accommodate the assets. Copying assets to other sites is that simple. Open the site that you copied the assets into to make sure that they appear in that site's Assets panel; keep in mind you may 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. However, a great feature is associated with the Assets panel, called Locate in Site. When you choose the Locate in Site command, Dreamweaver opens the Site window/panel and highlights the location of the selected files in the Assets panel. As Figure 9.13 illustrates, I have two images selected in the Assets panel as I contextual-click and choose the Locate in Site command from the contextual menu. Next, as Figure 9.14 shows, the Site window/panel appears with the selected files in the Assets panel highlighted within the site files, offering the location of the files within the site. Figure 9.13. By contextual clicking in the highlighted asset, I have the option to choose the Locate in Site command.
Figure 9.14. After I choose the Locate in Site command, the Site window or panel highlights the location of the selected assets.
Editing Assets After using an asset, you may want to edit some of its properties. For example, if you needed to update a graphic, you can change or edit that image, and anytime that graphic is used within your Web site, it would automatically be updated as well. The reason is that if you inserted the graphic using the same asset, all instances of the image within your site are all sourced to the same file. To edit an image asset, do one of the following: Highlight the image in the Assets panel and click the Edit button at the bottom of the panel. This automatically launches the default editor for that file format. For more about default editors, refer to Chapter 15, "Integration with Complementing Programs." The second technique is a bit quicker. Double-click the asset icon, and that automatically launches the default editor for that file type. However, this is not the case for unsourced 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 like images are, you'll need to work with a library item, discussed later in this chapter. To edit assets such as color and links, they must be contained within the Favorites section of the panel. When you click the Favorites radio button, your favorite colors and links will be revealed. Again, to add something to your Favorites list, refer to that section of this chapter. When you have the color you want selected, click the Edit button and the color swatch appears below the color name, as shown in Figure 9.15. If you decide you no longer want a different color with the swatch open, press Esc to make the swatch disappear without choosing a color. Figure 9.15. The color swatch appears inside the Assets panel when you're editing a color. The color has to be located under the Favorites portion of the panel.
To edit a link, do the same; highlight the link and click the Edit button at the bottom-right corner of the panel. This opens the Edit URL dialog box, as displayed in Figure 9.16, and you can specify a new URL. Figure 9.16. 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 Web site, 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, which offers 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 in the submenu of the Assets panel in the top-right corner, choose Add to Favorites, as shown in Figure 9.17. Figure 9.17. You can add an item to your Favorites by selecting the asset and choosing Add to Favorites from the submenu. 
Select the asset or assets that you would like to add to the Favorites and contextual click in the Assets panel. In the contextual menu, choose Add to Favorites. You can also select the assets you want to add to the Favorites and click the Add to Favorites button, located at the bottom of the panel. Finally, you can highlight an asset already placed within a document, contextual-click the item, and choose Add to Favorites within the contextual menu, as shown in Figure 9.18. You can add assets only in the document that belongs to one of the specified groups within the Assets panel. If you try to add text, the Add to Color Favorites dialog box will appear if the text does not have a link. Otherwise, Add to URL Favorites dialog box will appear. Figure 9.18. You can also add an item to the Favorites by contextual-clicking an instance within the document. 
Remove Favorites You can easily remove a favorite by following these steps: -
Be sure to have the Favorites radio button selected in the Assets panel. -
Select or highlight the asset you want to remove. -
Click the Remove from Favorites button, located at the bottom of the panel. Or you can contextual-click and choose Remove from Favorites in the contextual menu. Finally, with the asset selected, you can also press the Delete key on your keyboard. NOTE When deleting favorites, you're not actually deleting the file in any way; rather, you are just removing it from the Favorites list.
Creating Folders to Organize Your Favorites Another way to manage your favorite assets is to organize them into separate folders. This 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 the different types of images. You could create a folder called Products, which would contain different product images within your site. You could also set up a folder called Navigation, and this folder would contain all the graphics used in your site's navigation structure. 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: -
Make sure the Assets panel is open and you have the Favorites radio button selected. You can only add Asset Folders to the Favorites category. -
Click the New Favorites Folder button located at the bottom-right corner of the panel. You can also create a new folder by contextual-clicking the assets and choosing the New Favorite Folder command from the contextual menu. -
Name the folder and drag any asset that you want categorized into that folder, as shown in Figure 9.19. Figure 9.19. You can easily organize your favorite assets by creating folders.
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, it's very important to be inside your Favorites section. To create a new color, click the New Color button located toward the bottom of the panel. You can also access that option by choosing New Color from the submenu located in the top-right corner of the panel. When you choose the new color command, a swatch displays in which you can choose a color, as shown in Figure 9.20. Finally, after choosing a color, you can highlight it in the Assets panel and give it a nickname. Figure 9.20. 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. Toward the bottom of the panel, click the New URL button, which launches the Add URL dialog box. Here you can define the nickname and the URL you want the asset to link to. |
