Managing Assets - 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 list the colors used in documents and style sheets, including colors of text, backgrounds, and links.
- Scripts stores JavaScript or VBScript files. In HTML files (rather than in independent JavaScript or VBScript files), scripts 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 will automatically modify all pages attached to it.
- Movies stores and lists QuickTime or .mpeg files.
- URLs contain 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 Image Directory and the second being saved to the finished files directory.
Images can be sorted into several categories:
- Name of the 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 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:
- Click once on the image file's icon.
- Drag and drop the image file directly onto the page where the image is desired.
- Provide alt text or long description when prompted.
- Click OK.
- Click on the image and format it accordingly.
Favorites
To toggle between site images and favorites, use the radio buttons above the image thumbnail previewer.
Add Files to Favorites
- Select a file and right-click on it.
- 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
- Click on the file to select.
- Click the Edit button (appears like 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
- Select the file.
- Click on the Remove from Favorites button (it appears as a purple ribbon with a bold minus sign).
Additional Functions in Favorites
Dreamweaver offers optimized resources for the organization when using the Favorites function, such as giving files nicknames and adding favorite files to custom folders.
Nicknames
Nicknames are a feature within 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:
- Click on the file name once.
- Type the nickname into the dialogue box.
- 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 files' file path.
To create a folder in Favorites:
- Click on the Create Folder icon (which appears as an orange folder) in the lower right corner.
- Name the folder.
- 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 them.
Getting Started Tutorials
- What is Dreamweaver CS5?
- 1. Defining a New Site
- 2. Creating New Documents
- 3. Adding Structure to Text
- 4. Managing Assets
- 5. Placing Images on the Page
- 6. Creating Links
- 7. Understanding Style Sheets (CSS)
- 8. Controlling CSS from the Property Inspector
- 9. Using Live View and CSS Inspect
Dreamweaver is a popular program for creating websites and applications from Adobe. It supports HTML5, CSS3, PHP, FTP, jQuery, and more, and works with HostGator web hosting.
You can learn more about Dreamweaver by visiting Adobe's website or the Dreamweaver Tutorials learning portal.