The Assets panel has two different views, which you can toggle between by using the two radio buttons at the top of the panel. The Site list provides a complete list of all the assets in every folder and page of the site. The Favorites list displays only the assets you choose to put there (see Figure 24.2). If you create a well-planned Favorites list for your site, you’ll have the colors, URLs, and other elements that you use frequently readily available, while still having convenient access to the less-used assets from the Site list.

Figure 24.2. The Favorites list contains only assets you select, creating a specialized list of your most frequently used assets.

When adding assets to your site, you need to be aware of some of the specific purposes and limitations that go along with the various asset types that Dreamweaver tracks.

Colors

The Colors category lists all colors that have been used for text, backgrounds, or links on any page within the site. Again, when you rebuild the asset cache, all colors that have been used are added to the site for future reference and reuse. Dreamweaver does not include colors from images or media files, so the colors used in your Flash SWF or Fireworks PNG files are not included in the Assets list. If you have a color that you have not used in a page, but want to include as an asset in your site, you can manually add it to the panel by switching to the Favorites view, clicking the New Color button, and using the color picker to select the color from either the swatch (see Figure 24.3) or an area of the page.

Figure 24.3. The color picker enables you to select colors from the palette or type a hexadecimal number for the color.

Note

After a color is added to a page within the site, it remains in the Colors category even if the color is completely removed from every page in the site.

URLs

Just as Dreamweaver tracks the colors and images that you use in your pages, it also tracks the links you create to pages outside of your site. It scans your documents for hyperlinks and includes all references to HTTP, FTP, Gopher, HTTPS, JavaScript, and email. Keep in mind, however, that links to documents within your own site are not included in the URLs section of the Asset panel.

As with colors, you can create new URLs directly in the Favorites list by choosing the Favorites view, selecting the URLs category, and clicking the New URL button at the bottom of the panel. In the Add URL dialog box (see Figure 24.4), type the full URL, give it a nickname, and click the OK button.

Figure 24.4. Enter a URL and nickname for the new asset. The nickname can be used as the source text for the link when inserted into a document.

The URL’s nickname simply provides an easy reference for where the URL points. For instance, if you create a link to http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_16563, you might create a nickname called Dreamweaver Sessions to help you remember that the URL links to a tech tip article that discusses how to create a session variable.

Of course, the real power of the Assets panel is in its capability to streamline your development time. You can insert most types of assets directly into a document by dragging them from the Assets panel to the Design view of the Document window or by using the Insert button at the bottom of the panel. In the Colors and Templates categories, the Insert button changes to the Apply button.

Keep in mind that the asset is added to the page at the insertion point. In the case of colors, text typed after the insertion point appears in the selected color. When you insert a URL asset, the destination path of the URL appears as the source for the link; the source text can, of course, be modified if you would rather display alternate text.

For assets such as URLs and colors, you can also apply them to selected text in Design view by highlighting the appropriate text, selecting the asset in the Assets panel, and clicking the Apply button.

To apply scripts to the head of the page, select View, Head Content; then drag the script from the Assets panel into the Head Content area of the Document window.

The Assets panel requires regular maintenance to retain its value. As the site evolves, so do the assets, but the Assets panel lacks the capability to automatically keep up with its listings. Assets themselves might need to be updated. And, finally, it might be useful to for a site to share assets already listed on another site. In addition, as mentioned previously, you need to update your Favorites lists manually because Dreamweaver does not automatically remove assets that have been relocated or deleted from your workstation.

Because Dreamweaver integrates so easily with Fireworks and Flash, with the click of a button you can start editing objects that were initially created outside of Dreamweaver. To edit an asset, either double-click it in the Assets panel or select the asset and click the Edit button. If the asset was created within Dreamweaver (such as a script), you can edit it directly in Dreamweaver. Otherwise, the application to use is determined by the settings in the Dreamweaver Preferences tool. If you want to use a different application than the default, select Edit, Preferences and select the File Types/Editors category. Then add the application you want to use to edit that file type. Keep in mind, however, that because Fireworks and Flash are so tightly integrated with Dreamweaver, keeping them as your default editors for graphics and rich media is generally the fastest and easiest way to work.

Assets that don’t reside in physical files, but are scanned from your documents instead—such as URLs and colors—can be edited only in the Favorites list.

Often assets are useful across multiple sites. However, for an asset to be available, it must first be copied to the Favorites list of the new site. To make an asset available to another site, right-click on the asset in the Assets panel of the site that currently has the asset, choose Copy to Site, and select the name of the site to which you want to copy it.

Creating a snippet is a relatively easy process. However, creating a snippet the right way takes a little more effort, but is worth the extra energy in the long run. When I speak about the “right way” to create a snippet, I mean you should take into account that you might not be the only person to ever view your snippet, so the snippet should include detailed commenting that describes what the snippet is supposed to do.

For instance, suppose that you want to create a new JavaScript snippet that validates that two form fields are not left blank. Start the process by clicking the New Snippet button on the Snippets panel. In the Snippet dialog box (see Figure 24.6), type the name of the snippet and be sure the name is something that clearly defines the nature of the code and the language in which it was developed. For instance, JS-FormValidation would be a good name for this form validation code.

Figure 24.6. The Snippet dialog box enables you to store the details and description of your code.

The next step in defining the snippet is to type a description of how the code works. Remember, the more detailed you are in the description, the more easily someone else can understand what the code is intended to do. So, instead of typing a short description such as “performs form validation,” you might try typing a description such as: “This JavaScript snippet checks the values entered into form fields. If the value of the form is null, then the script pops a notice to the end user to complete the field and returns a false value to the form function that calls the snippet.”

The next step in creating the snippet is to choose how the snippet code will be inserted into your overall code. If you choose Insert Block, the entire code block that you type is inserted into your page code when you apply the snippet. If, however, you choose Wrap Selection, Dreamweaver can apply the code before the insertion point and after the insertion point if necessary. For instance, if you select an image, Dreamweaver can place <a href=“http://www.mysite.com”> before the object and </a> after the object, creating an effective hyperlink.

The third step is to actually type the code. If you have not already typed the code into a page, you can enter the code in the appropriate field or fields (in the case of a wrapped snippet). Otherwise, select the code in the Code view prior to clicking the New Snippet button and Dreamweaver automatically assumes that you want to create a snippet based on the selected code and populates this field with the selected code.

When creating your snippets, be sure to include comments that detail who created the snippet, what the snippet does, any variables that need to be assigned, and so on. This is where creating a snippet the correct way comes into play. The more documentation your snippet has, the more likely someone else will be able to understand easily what the code does, and the more portable the code becomes. This becomes important when colleagues ask you whether you have authored any code that could help them out with a project. If you properly document your snippets, you can send them the snippet and the comments will help them understand how to apply the code and how it is expected to function. For instance, using the previous example to create a snippet that adds a hyperlink to an image, the code inserted before the image would be

<a href="http://www.mysite.com">

However, the following code adds a comment to further explain how the snippet works:

<!-- The following line of code adds the preliminary
HREF tag and URL to add a hyerlink to an object. -->
<a href="http://www.mysite.com">

In addition, a comment should also be included with the code that follows the image, such as:

<!-- The following line of code closes the HREF tag -->
</a>

The final step in creating a snippet is to choose in which format the snippet will be displayed when it is previewed. Code that produces a visible object in the Design view (such as a drop-down menu or an image) can be set to Design so that the object rather than the code can be previewed. Code that performs strictly behind the scenes (such as form validation or complex calculations) should be set to Code so that the preview pane displays only the code.

As mentioned previously, Dreamweaver comes with several folders containing useful snippets. For organizational purposes, feel free to reorganize the entire snippets folder to make it easy for you to find snippets quickly and easily. You can drag and drop folders from within the Snippets folder just as you do in the Windows or Mac operating systems. You can also create new snippets folders by clicking the New Snippets Folder button at the bottom of the Snippets panel.

After you have created a snippet, reusing it is as simple as dragging it and dropping it into the design or code view. You can also place your cursor at the appropriate insertion point and click the Insert button at the bottom of the Snippets panel. Another helpful feature that is worth mentioning is that Dreamweaver stores a record of the most recent snippets that you have used. You can access this feature and insert recently used snippets by choosing Insert, Recent Snippets from the menu bar.

Creating a Library item in Dreamweaver is extremely easy. Simply add any object or element to the Design view of a page and select it. Next, choose the Library category in the Assets panel and click the New Library Item button (see Figure 24.8). Dreamweaver then creates a Library item based on the selected object and allows you to name it accordingly.

Figure 24.8. The New Library Item button allows you to create a new item.

After the Library item is created, you can apply it to any page by dragging and dropping it into the Design view or by placing your cursor at the appropriate insertion point and clicking the Insert button at the bottom of the Assets panel. When the Library item is inserted, the item is surrounded by markup code (see Figure 24.9) that indicates the path to the Library file, much like a server-side include.

Figure 24.9. When you insert a Library item, the markup for the elements is inserted and surrounded by comment tags. The item appears highlighted in Design view to distinguish it from regular, editable content.

As mentioned earlier, the main advantage of the Library is that modifications made to an item are updated site-wide. To edit an existing Library item, select the item in the Assets panel and click the Edit button at the bottom of the panel. Make the appropriate changes to the .lbi file that is opened and click the Save button. When you save the .lbi file, you are prompted to update all pages in the site that contain an instance of the item (see Figure 24.10). If you Click the Update button, Dreamweaver automatically updates the dependent pages.

Figure 24.10. When you save changes to a Library item, you’re prompted to update all instances of the item throughout the site.

If you don’t update pages at this point, later you can use Modify, Library, Update Current Page or Update Pages. If you choose to update, the Update Pages dialog box appears (see Figure 24.11). You can also use this opportunity to update the remainder of the site’s Library and template instances by choosing Update Site from the Assets panel’s menu.

Figure 24.11. The Update Pages dialog box is used to update both Library items and templates used in the site.

When a Library item is updated, all markup between the comment tags is modified to reflect the changes. In templates, certain regions can be locked so you don’t inadvertently modify pieces of the template.

Library items, however, have no such constraints. Changing the content of the inserted Library item doesn’t break the link to the Library. However, if you manually modify the content of the Library item within the document—for example, adding content to a table that was inserted as a Library item—those changes are lost if and when the Library item is updated. If you don’t want your changes to be overridden, you need to detach the inserted Library item from the source, as described in the following section.

If you have an instance of a Library item that you don’t want to be updated when the original item is updated, you can detach it from the original and preserve it in its current state. To detach an instance of a Library item from the Library, you need to break the link between the document and the item by selecting the instance of the item and clicking the Detach from Original button in the Property inspector (see Figure 24.12).

Figure 24.12. When the Library item is detached, the reference code that pointed to the Library item is removed from the page and the actual page code is inserted.

Before Dreamweaver detaches the item, a confirmation dialog box informs you that any future updates to the Library item won’t be reflected in this instance (see Figure 24.13). If you Click the OK button, the item is detached and the corresponding markup removed in the code.

Figure 24.13. This dialog box confirms that you understand that after this instance is detached, it cannot be updated when the original Library item is edited.

Deleting Library items is even easier than creating them. To delete a Library item, select the Library item to be deleted and click the Delete button at the bottom of the Assets panel. Although the item is deleted from the Library, the instances of the item in your site are not removed. Instead, they are detached from the original and remain intact in your web pages.

When you create a Library item out of content that contains Dreamweaver behaviors, the elements and event handlers are copied, but the associated JavaScript is not. Remember: The Library item can’t update content that resides in the HTML head tag.

Fortunately, though, when you insert a Library item into a document, Dreamweaver is smart enough to know to add the appropriate JavaScript functions. If those functions are already in the head, Dreamweaver knows not to duplicate them.