GS-04: Managing Assets in Dreamweaver CS5

The Assets Panel provides users with a central location to control and manage all images, movies, scripts and other files related to a website. In addition, the Assets Panel allows users to preview, filter, locate and organize assets by using folders and favorites. The following video article will focus on using these features with images.

Assets Panel Categories

  • Images stores image files in .gif, .jpeg, or .png format.
  • Colors lists the colors used in documents and style sheets, including colors of text, backgrounds and links.
  • Scripts stores JavaScript or VBScript files. Scripts in HTML files (rather than in independent JavaScript or VBScript files) do not appear in the Assets Panel.
  • ShockWave lists files in any version of Adobe Shockwave.
  • Flash stores files in any version of Adobe Flash. The Assets Panel displays .swf files (compressed files created with Flash), but not .fla (Flash source) files.
  • Library lists the design elements used in multiple pages. When you modify a library item, all pages containing that item are updated.
  • Templates stores all master page layouts used on multiple pages. Modifying a template automatically modifies all pages attached to it.
  • Movies stores and lists QuickTime or .mpeg files.
  • URLs contains the external links in your current site documents, including FTP, gopher, HTTP, HTTPS, JavaScript, email (mailto) and local file (file://) links.

Managing Images

The Assets Panel displays double copies of images, having one image saved to the iImages directory and the second being saved to the finished files directory.

Images can be sorted by several categories:

  • Name of image
  • Dimensions of image
  • File size
  • Type of file
  • File path

Another method of sorting images is to utilize the favorites function. Adding a file or image to Favorites does not move the physical file, but rather makes the file easier to access and locate for the user.


Inserting Images from the Assets Panel

To insert an Image from the Assets Panel:

  1. Click once on the image file's icon.
  2. Drag and drop the image file directly onto the page where the image is desired.
  3. Provide alt text and/or long description when prompted..
  4. Click OK.
  5. Click on the image and format accordingly.

Favorites

To toggle between site images and favorites, use the radio buttons above the image thumbnail previewer.

Add Files to Favorites

  1. Select a file and right-click on it.
  2. In the pop-up menu, select Add to Favorites.

Another method of adding files to Favorites is to select a file and click the Favorites icon in the lower right corner. The icon appears as a purple ribbon with a bold plus sign.

 Edit an Image

  1. Click on the file to select.
  2. Click the Edit button (appears as a pen with a piece of paper) in the lower right corner.

The image editor program of your choice will open.

Editing a file can also be accomplished by double clicking on the icon of a file. A single click on the icon will allow the user to view a thumbnail of the file's image.

Remove Files from Favorites

  1. Select the file.
  2. Click on the Remove from Favorites button (appears as a purple ribbon with a bold minus sign).

Additional Functions in Favorites

Dreamweaver offers optimized resources for organization when using the Favorites function, such as giving files nicknames and adding favorite files to custom folders. 

Nicknames

Nicknames is a feature with in the favorites function that allows users to superficially change the name of a file without manipulating any of the file information.

To create a file nickname:

  1. Click on the file name once.
  2. Type the nickname into the dialogue box.
  3. Press the Enter key or click elsewhere in the panel to confirm the change.

Custom Organizational Folders

Users can also create custom folders to better organize their files listed in Favorites. The folders created in favorites are strictly for organizational purposes and will not affect the file path to the files.

To create a folder in Favorites:

  1. Click on the Create Folder icon (appears as an orange folder) in the lower right corner.
  2. Name the folder.
  3. Press the Enter key or click elsewhere in the panel to confirm the change.

Once the new folder is created, the user can select the images and files desired and organize them by dragging and dropping the items onto the folder.


Getting Started Videos


Dreamweaver is a popular Adobe program for creating websites and applications.  It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV.  The video in this article is courtesy of Adobe TV.