Using Library Items

---

Library items are useful whenever you have page elements that appear in many pages. It can be time-consuming task to locate, open, and edit every page with a specific element when changes are required; making a library item of the element(s) enables you to open a single, original source, make your edits, save, and update every occurrence of the item in all site pages. Any path structures, such as src paths to images or relative links to pages, are maintained and adjusted by Dreamweaver.

Library items are assets and as such are accessed via the Assets panel. Press F11 to open the Assets panel, which is found in the Site panel group. To view library assets, click the small book icon located in the stack of icons on the left side of the panel (Figure 37-1). Like all assets, library item functions can be triggered with the contextual icons found along the bottom of the Assets panel or through the panel's Options menu.

Figure 37-1: Library assets live in the Assets panel

How library items work

A library item is stored code. To build a library item, you first make a selection in a page. The code selected is copied to a new text file. The selection may contain any kind of code that exists in the body of a Web page, including graphics, text, and form objects. You are required to name each library item.

When you add a library item to a site, Dreamweaver creates a special folder named Library at the root level; Dreamweaver also creates a text file to hold the item code and stores it, using your chosen name, within the Library folder. Library item files use a .lbi extension. Special markup containing the name and path to the item file is placed around the library item code in the HTML page. The markup allows Dreamweaver to identify and update all instances of a specific library item in the site when changes are made to the original .lbi file. To push the changes to the published site, all updated pages must be uploaded to the Web server. However, all code for an item is contained in each page where the item is added; the Library folder need not be present on the server for the item to function. The code that Dreamweaver adds looks like this:

<!-- #BeginLibraryItem "/Library/bottom ads.lbi" --> elements here<!--  #EndLibraryItem -->

Library items are locked. Clicking to select an element within a library item selects the entire item, which is marked in the Tag selector as <mm:libitem>. To edit a library item, access the original .lbi file, make changes, and save. Dreamweaver asks whether you want to update any instances of the item. You are not required to update items. Options for updating later are available. If you choose to update, Dreamweaver looks through every page in the site to find markup for that item. The code between the items is replaced with the new code in the original file and Dreamweaver again adjusts and maintains proper paths. Any updated page that is not open is automatically saved. Open documents are modified but not saved; if you close an updated page, you will be asked to save it.

Building a new library item

To add a library item to the Assets panel, make a selection in your page in Design or Code view. The following exercise adds a library item to the basic page layout of the Habitat Alert site:

On the CD-ROM 

Save the Habitat Alert37 folder from the chapter37_exercise folder to your hard drive. Define a new site. Be sure you define it at the html level not in the site folder

 Habitat Alert site   Using a library item for the bottom ad banners makes sense because many pages show the same ads. To change the ads, you need to change them only in the library item .lbi file and update the entire site. To make a library item, follow these steps:

1. Open site/index.htm.

2. This page contains three ad banners along the bottom of the page, as shown in Figure 37-2. Place your cursor in front of the text "Please support our sponsors:" and make a selection by clicking to the right of the last ad placeholder while pressing Shift.

   
   Figure 37-2: The bottom ad banners are placeholders. Making a library item will allow easy updating of the element when the site is completed.

   Tip 

   When you make your selection for the library item, be sure to include any HTML tags that provide alignment for the element such as <p>, <div>, and so on using Code view. In this example the beginning <h4> tag and the ending </p> weren't selected automatically.

3. Press F11 to activate the Assets panel and click the book icon to open the Library Assets panel. Click the Add button at the bottom of the panel.

   Note 

   When saving a Library Item that uses a class style, Dreamweaver alerts you that the Item might not appear as designed when used. This is true if the destination page doesn't have the class defined as a style rule; in the example used in this chapter, the destination pages will be linked to the style sheet.

4. Always name your new library item before doing anything else. Name this item bottom ads. It is permissible to use spaces in item names.

The home page now contains an instance of the library item. If you try to select any part of the element, it is all selected. The Property inspector displays options for editing the items, as shown in Figure 37-3. You can also detach the item, which removes its link to the library item or Recreate which re-creates a missing or deleted library item.

Figure 37-3: The Property inspector also provides access to the original item.

Adding an existing library item

You can use the following methods to add an existing library item to your pages:

• Insert your cursor in your HTML page where you want the item to be located and right-click (Control+click) on the desired item in the Assets panel, then select Insert.

• Insert your cursor into your HTML page, and select the library item. Press the Insert button at the bottom of the Assets panel to add the item.

• Drag the library item's icon from the Assets panel and drop it in your HTML page where you want the item added.

Modifying a library item

Making changes are what library items are all about. Simply open the original .lbi file (double-click its name in the Library panel) and make your changes; when you save, Dreamweaver prompts you to update pages that use the item.

Updating library items

When prompted to update all pages that use a modified library item, Dreamweaver looks through the entire site to find markup that matches the specific item. The page code is replaced with the new code from the .lbi file. You are not required to update pages that use an item; you can opt to delay an update by choosing Don't Update. When you are ready to update the pages, choose Update Site from the Library Assets panel options. The Update Site dialog box offers a couple of options.

Choose to look in the Entire Site if you have open documents that may contain library items. Changes made to all library items will be updated throughout the site. To initiate the update, click the Start button.

When updating you can choose the Files that Use (the item) option. This choice looks only for pages that use a specific library item — the one shown in the menu to the left of the Start button. This option doesn't update any currently opened, unsaved pages that use the item.

You may also choose to Update Current Page from the Library Assets panel options. No matter which method you choose, a useful log of all actions taken is displayed to tell you how many pages were examined, updated, or not updated.

Detaching a library item

The ability to push modifications is not the only useful function for library items. Dreamweaver manages the path structure of any link that occurs in a library item — and sometimes this alone is what makes the library item useful. At times you will want to be able to edit a portion of a library item. Because a library item is locked, you cannot individualize an instance of the item in one or more pages. To unlock the code of an item, select it and use the Detach button to remove the library markup. This leaves only the code of the item in the page, and you lose the option to update from the original library item.

---