| The Assets panel provides you with the ability to organize the components of your site from within Dreamweaver. You can use it to view and catalog a wide variety of media and page elements. For example, it might be difficult to manage all your images, especially if you are working on a large site. The Assets panel gives you a way to keep track of those images. 1. | Select the Assets panel from the Files panel group. Click the Images button located at the top of the column of buttons on the left side of the Assets panel.
Tip If the Assets panel or Files panel group is not visible, you can choose Window > Assets to open the Assets panel within the Files panel group. The other buttons along the left side of the Assets panel represent different types of assets that can be available to your site, including colors.
You can work with the Assets panel in two ways: You can view it with the Site list, which gives you a complete list of the images in your site, or view it with the Favorites list, which shows only the images that you marked as Favorites. Both views allow you to add a selected image to your page.
 | | | 2. | Click the Images: Site button (to the right of the Images button) at the top of the Assets panel if it is not already selected (as it should be by default).
Note In the Yoga Sangha project site you will see multiple copies of most images listed in the Images portion of the Assets panel because there are several copies of each image in the site as a result of the fact that the files are duplicated in each lesson folder as well as the respective completed folder. In your own sites, you will not have this situation unless you have multiple image folders that contain several of the same images. Spacer GIFs and navigation images are sometimes contained in several image folders. Usually it is not necessary to have multiple copies of an image because you can use images from any location in your site. In fact, multiple images might not be desirableif you update an image, you might need to make changes on a number of files if you have multiple copies of the same image. All images within the site are shown in the Site Assets window. The images appear in this window automatically, whether or not they are used in any document. It might take a few seconds for the panel to create a catalog of the image assets available for your site.
Note If you didn't enable cache for your site when it was created, Dreamweaver will prompt you to click the refresh button in the Assets panel to enable and create the cache. Cache is enabled by default and is automatically created unless you uncheck the Enable Cache box in the Site Definition dialog box for your site. If you add a new asset to your site, it might not appear in the Assets panel immediately. To update the panel to match all the images in your site, you need to refresh the site catalog. To do so, click the Refresh Site List button in the lower-right corner of the Assets panel.
| | | 3. | Place the insertion point at the beginning of the paragraph beginning with Yoga Sangha was founded by Katchie Ananda and Jayne Hillman. Find the teaching.jpg graphic in the Assets panel that is located in the Lesson_05_Graphics/Images folder and click the Insert button.
Tip You can also select the image in the Assets panel and drag it to the desired location. You can find out where a graphic file is located by selecting the file in the assets panel, Cmd + clicking for the context menu, and choosing Locate In Site.
Expanding the Assets panel horizontally will allow you to see the Full Path column, which you can use to determine where the images are located. On the Macintosh you can expand the panel by clicking and dragging the lower-right corner to the rightyou might need to move the panel or panel groups to the left first so that you have room to expand the panel. On Windows you can click the vertical bar separating the panels from the rest of the interface and drag it to the left.
 The image appears in the Document window.
As you select images in the Assets panel, you'll see a thumbnail preview at the top of the panel. You can enlarge the thumbnail by increasing the available preview area (place the cursor over the lower border of the viewing area and drag to resize) and/or enlarging the whole Assets panel. You can easily select an image from the Assets panel and click the Edit icon to open the image in your default image-editing program.
Clicking the column headers will reorder the list of images. For example, clicking the Name column header will reorder the images alphabetically in ascending (indicated by an upward-facing arrow) or descending order (indicated by a downward-facing arrow). You can use the other column headers to sort by Size, Type, and Full Path. You might need to scroll to the right to see the other columns. If you see an ellipse (…) in a column or column header, you will have to expand the panel to view the contents of that column. After the Assets panel is in focus (click an image in the list to bring it into focus), you can enter the first letter (or the first several letters in quick succession) of the file that you are looking for to select it.
Note This photographic image was saved as a JPEG. The same image would appear posterized (rough gradations, with jagged edges to colors causing noticeable pixelation) if saved as a GIF image because all the different shades would be mapped to only a few colors. In this case, JPEG was the best option. | 4. | In the Alternate Text text field in the Image Tag Accessibility Attributes dialog box, enter A Yoga Sangha Teacher and click OK. In the Document window, select the image you just inserted and enter teacher into the image-name text field in the Property inspector. Apply the studioPhoto CSS class to the image.
|
 Giving names and alt text to your images as you insert them saves you time and make it easier to work with them in Code view later, if necessary.  At this point, your document should look similar to the preceding example. |
