Section 16.6. Creating and Using Library Items | Dreamweaver 8[c] The Missing Manual

16.6. Creating and Using Library Items

To create a Library item, start by opening the Library window. Choose Window Assets, and click the Library Items button (it looks like an open book, circled in Figure 16-4) to reveal the Library category.

Now select the part of your document that you wish to save as a Library item: a blob of text, a graphic, or whatever.

Note, however, that Library items can contain only page elements that appear in the document windowin other words, only HTML from the <body> of a Web page. You can't include anything that appears in the <head> of a page, like Cascading Style Sheets, Dreamweaver Behaviors (Chapter 11), or meta tags. Furthermore, Library items must include a complete set of HTML tagsboth an opening and closing tagas well as all tags necessary to complete the original object. For example, Dreamweaver doesn't let you turn just a single cell , row, or column of a table into a Library item. If you try, Dreamweaver adds the entire table to the Library.

Tip: Use the tag selector (see Section 1.2.1) to make sure you select the precise tag information you want. To select all of the contents of a cell, click at the beginning of the content and drag until you've selected everything in the cell.

Next , add the selection to the Library. As you may expect, Dreamweaver provides several ways to do this:

Drag the highlighted selection into the list of Library items.
Click the New Item button (Figure 16-4).
Choose Modify Library Add Object to Library.

The new item appears in the Assets panel, bearing the jaunty name "Untitled." Just type to replace that with a more useful name , such as Copyright notice or Logo . (Avoid hyphens in your Library item's name. These tend to trip up the Firefox Web browser, as described in the box on Section 16.7.1.) Your new Library element is ready to use.

Note: Even though you can't turn a CSS style into a Library item, you can turn HTML that has been styled with CSS into a Library item. For example, you can add to the Library a paragraph that has a custom CSS style applied to it. When you attempt to add this paragraph to the Library, Dreamweaver warns you that the item may not look the same when you place it in other documentsbecause the style sheet information doesn't come along for the ride. To make sure the Library item appears correctly, make sure that you attach the same style sheet to any page where you use that item. External style sheets (see Section 6.1.2) make this easy.

Figure 16-4. The Assets panel's Library category lists the name, file size , and location of each Library item in the currently opened site. When you select a Library item from the list, you see a small preview. In this example, the Library item "copyright" is a copyright notice.

16.6.1. Adding Library Items to a Page

To add a Library item to a Web page, drag it directly out of the Assets panel's Library items listing onto your page. (The long way: Click to plant your insertion point in the Web page, click the Library item you want in the Assets panel, and then click the Insert button on the Assets panel, shown in Figure 16-4.)

Note: Library items ( .lbi files) also appear in the Files panel in a site's Library folder. Dragging a Library item from the Files panel to a page, however, doesn't insert it into the page. It merely opens the Library item for editing.

When you insert a Library item into a Web page (or turn a selected item into a Library item), it sprouts a light-yellow background color . The highlighting indicates that Dreamweaver intends to treat the Library item as a single object, even though it may be made of many different HTML elements. You can select it or drag it around, but you can't change it. (Unfortunately, if you turn a nontransparent graphic into a Library itemlike a logo, for exampleDreamweaver doesn't give you this helpful visual cue.)

Remember, too, that the placed Library item is linked to the original copy in the Library. The copy in your document automatically changes to reflect any changes you make to the copy in the Library, using the technique described next.

Tip: Sometimes you may want to sever the connection between the Library and a Library item you've already placed onto a Web pageto modify a copyright notice on a particular page, for example. Select the item on the page and then click "Detach from original" in the Property inspector (Figure 16-5). Dreamweaver removes the comment tags (see the box on Section 16.7.1), thus breaking the link to the Library.You can also insert the HTML of a Library item without maintaining a link to the Library by pressing the Ctrl (

) key when you add it to your document. Now Dreamweaver doesn't update the HTML on this page when you change the original Library file.Don't use this method if the Library item contains images or document-relative links, however. Dreamweaver doesn't update the links with paths appropriate to the document's location when you insert the Library item in this way. In this case, first insert the Library item normally and then unlink it using the method described in this tip's first paragraph.