Dreamweaver in a Nutshell-Dreamweaver in a Nutshell

9.1 Creating a Library Item

The Assets panel can hold many types of assets, such as images, colors, and URLs. But the Library category of the Assets panel can hold complex HTML that the other categories cannot. For convenience, we'll refer to the Library category of the Assets panel as the Library panel, even though it isn't a separate panel. To open the Library panel, use Window Library or click on the Library icon in the Assets panel. To create a library entry, simply drag and drop an item from the Document window into the Library panel. You can add graphics, text, and even email addresses to the Library. Provide a name for the new library item when you add it to the Library. The Library panel shows a small preview of the item, as seen in Figure 9-1.

Figure 9-1. The Library category of the Assets panel (Library panel)

You can also add selected items to the Library using Modify Library Add Object to Library, Ctrl+Shift+B (Windows), or Cmd+Shift+B (Macintosh). You can also use the New Item button in lower-right corner of the Library panel to add an item to the Library (the Insert button inserts items from the Library into the current document, not vice versa). You can also choose New Library Item from the pop-up arrow menu in the upper-right corner of the Library panel. This menu also contains other options, described in Table 9-1.

A library item must include matching opening and closing tags, so be sure to select the entire tag before adding it to the Library.

Library items cannot contain head content; they can contain only items allowed within the <body> tag. Behaviors, stylesheets, and timelines can't be placed in a library item.

9.1.1 Using a Library Item

To insert a library item into your document, select the item in the Library panel and click the Insert button at the bottom of the Library panel. You can also simply drag and drop an item from the Library panel to the Document window to insert it. Insert any library item as many times in as many documents as you wish.

When you insert a library item, it creates an instance of the original library item. Dreamweaver inserts the HTML code of the original item, plus comments that allow it to reference the original. Dreamweaver updates the library item instance if the original library item changes. The inserted code is similar to Example 9-1. Note that a comment identifies the beginning of the library item and the name of the file containing it.

Example 9-1. HTML code for a library item instance

<!-- #BeginLibraryItem "/Library/heather email.lbi" -->
<b>
  <font size="2"><a href="mailto:heather@planetswissy.com">
  heather@planetswissy.com
  </a></font>
</b>
<!-- #EndLibraryItem -->

Instances of library items are not editable and do not have editable regions the way that documents based on templates do. If you need to edit an instance of a library item, detach it from the original first using the Detach from Original button in the Property inspector (see Figure 9-3).

Library items are saved as .lbi files in the Library folder within the site's root folder (Figure 9-2 shows this folder in the Site window). Renaming a library item in the Library panel also changes the name of its .lbi file.

Figure 9-2. Library items stored in the Library folder

You can copy library items between sites using the Copy To Site option in the pop-up menu shown in Figure 9-1. To copy library items between computers copy the .lbi files manually and place them in the appropriate folder.

9.1.2 Creating a Library Item Using a Behavior

In earlier chapters, we covered some Dreamweaver objects, such as navigation bars, rollover images, and jump menus, that use behaviors. (If you are not familiar with JavaScript behaviors you should revisit this section after reading Part III, which describes them.) The JavaScript code for a behavior is stored in the <head> portion of an HTML document and therefore a behavior cannot be stored in a library item. To work around the limitation, save a function call to the behavior in the library item instead. Dreamweaver inserts the appropriate JavaScript function into the <head> section of your document.

To edit a library item that includes a behavior:

Detach the library item instance from the original library entry using the Detach from Original button in the Property inspector, as shown in Figure 9-3.
Adjust the behavior parameters as you would for any other behavior.
Select all the elements and objects for this particular library item and then choose Modify Library Add Object to Library.
Give the new library item the same name as the original item, using exactly the same spelling and capitalization (if you want the change to be reflected in other documents that use the original library item).
Select Modify Library Update Pages in the Update Pages dialog box shown in Figure 9-4 to update the documents that use the library item.
Use the Look In field to select files that use the updated library item.
Click the Start button. Dreamweaver creates a log of the matches found.

See "Editing a behavior in a library item" under Help Using Dreamweaver (F1) for more information.

Figure 9-3. The Property inspector for a library item