Section 16.7. Editing Library Items

16.7. Editing Library Items

You'll appreciate the real power of Library items when it's time to make a change. When you update the file in the Library, all pages that you've graced with that item update themselves , too.

Start by opening the Library, as described on Section 16.6. Then:

1. Open the Library item that you want to edit .

   You can do this by double-clicking the Library item in the Assets panel, by highlighting it and then clicking the Edit button (Figure 16-4), or by highlighting a Library item on a Web page and then clicking the Open button on the Property inspector (Figure 16-5). (You can also open the Library item filean .lbi filein the Library folder of your site's root directly from the Files panel.)

   Dreamweaver opens what looks like a miniature Web page document, containing nothing but the text, graphics, or other elements of the Library file.

   Figure 16-5. The selected Library item (a .lbi file) is in the site's Library folder. (The path appears after the word "Src.")

   

2. Edit away .

   A Library item is only a selection of HTML; it's not a complete Web page. That means you can't edit page properties like the title or background color . Also, you can insert Library items only in the body of a Web page, so stick with objects that would normally appear in the document window, such as links, images, tables, and text. Don't add any code that appears in the head of a Web page, such as Cascading Style Sheets, meta tags, behaviors, or timelines .

   And since a Library item can't contain a style sheet, if the HTML in your Library item relies on a CSS, you'll have trouble previewing it correctly. Dreamweaver's Design Time Style Sheet tool comes in handy here. It lets you temporarily "add" a style sheet while designing a page, without actually adding the CSS code to the page. For more on this cool feature, turn to Section 6.4.

   ---

   Tip: Even though you can't add a Dreamweaver behavior to a Library item, you can include HTML code that uses Dreamweaver behaviors in a Library item.For example, suppose you create a navigation bar with rollover graphics. You could select the navigation bar and turn it into a Library item. Even though Dreamweaver doesn't actually put the JavaScript programming into the Library item, whenever you add the Library item to a page, Dreamweaver's smart enough to add the necessary JavaScript code to the Head of the Web page.

   ---

3. Choose File Save .

   Dreamweaver checks to see if there are any pages that use the Library item, and, if there are, it opens the Update Library Items window. A list of pages in the site that use that Library item appears.

4. Click Update .

   Dreamweaver opens the Update Pages window, updates the HTML in all the pages that use the Library item, and then lists all of the files that it changed.

   On the other hand, you don't necessarily have to click Update. Perhaps you have a lot of changes to make to the Library item, and you just want to save the work you've done so far. You're not done editing it yet, so you don't want to waste time updating pages you'll just have to update again. You can always update later (see the box on Section 17.7.2); in that case, click Don't Update. (Once you're finished with the changes and save the file for the final time, then update the site.)

5. Click Done .

   As you can see, the Library is an incredible time-saver that greatly simplifies the process of changing common page elements.

16.7.1. Renaming Library Elements

To rename something in your Library, click its name on the Assets panel (Figure 16-4). Pause briefly , then click again, and the name highlights, ready to be edited. Type the new name and press Enter (Return).

If you've already added the item to your Web pages, Dreamweaver prompts you to update those pages. Click Update. Otherwise, the link between those pages and the Library breaks.

---

Tip: If you accidentally click Don't Update, don't panic. Simply change the Library item back to its original name and then re -rename it. Don't forget to click Update this time!

---

POWER USERS' CLINIC
Under the Hood of Library Items

Behind the scenes, Dreamweaver stores the HTML for Library items in basic text files. Those files' names end with the extension .lbi, and they stay in the Library folder inside your local site folder (see Section 13.1.1.7).

When you insert a Library item into a Web page, Dreamweaver inserts the item's HTML and adds a set of comment tags. These tags refer to the original Library file and help Dreamweaver remember where the Library item begins and ends. For instance, if you turned the text "Copyright 2004" into a Library item called copyright and inserted it into a Web page, Dreamweaver would add the following HTML to the page:

 <!-- #BeginLibraryItem "/Library/ copyright. lbi" -->Copyright 2003<!-- #EndLibraryItem--> 

It's important to avoid the use of hyphens when naming Library items. Why? Since HTML comments use hyphens, <!-- -->, some browsers, most notably Firefox, get tripped up by additional hyphens and respond by hiding the contents of a Library item, or displaying raw HTML code instead.

In addition, although you can't edit a Library item on a page in Design view, you can muck around with the code in Code view. In the example above, you could change 2003 to 2005 in Code view. Don't do it! Dreamweaver obliterates any changes you make the next time you update the original Library item. If you want to make a change to a Library item, edit the original Library item, or detach the item from the Library (as described in the Tip on Section 16.7) and then edit it.

16.7.2. Deleting Library Elements

You can delete unnecessary elements from your Library at any time, but do so with caution. When you delete something from the Library, Dreamweaver leaves behind every copy of it that you've already placed onto your Web pagescomplete with links to the now-deleted Library item.

In other words, you won't be able to edit the copies on your Web pages until you break those links. If you do indeed want to edit them, you have to break the links manually on each page where the Library item appears by selecting the item and then clicking the "Detach from original" button (see Figure 16-5).

Now that you've been warned , here are the instructions. To get rid of a Library item, click it in the Assets panel and then do one of the following:

• Click the Trash can icon in the Assets panel.

• Press Delete.

• Right-click (Control-click) the item's name, and then choose Delete from the shortcut menu.

---

Tip: If you ever accidentally delete an item from the Library, you can recreate it, provided you've used it somewhere on one of the Web pages in the site.Open the page containing the Library item, and then click the Library item to select it. Click Recreate on the Property inspector (Figure 16-5) to make it anew. A new Library item appears in the Library, using the name and HTML from the item you selected.

---