| As convenient as assets are, sometimes you need something a little more powerful. To remain consistent within your Web site design, it often helps to have elements link back to one central or master element. This is exactly what library items offer. Library items can go far beyond simple graphics; in fact, a library item can be a navigation bar or even a JavaScript-based drop-down menu complete with hyperlinks. The great thing about a library item is that it not only will increase productivity by eliminating repetitive tasks, but it also greatly reduces the chance for human error. Suppose, for example, at the bottom of each page within your Web site you placed a footer that noted the copyright date. What if the copyright changes and you have this footer placed on 50 or more documents? That could turn out to be a monumental task for any designer; however, if the footer was saved and used throughout the site as a library item, the designer could update only the item in the library, and the footer on all the 50 or more pages would automatically update. The library inside of Dreamweaver offers some wonderful benefits and can play a crucial role in increasing your productivity. NOTE A library item can be any object that is inserted within the <body> tags of the HTML document. These objects can contain behaviors and JavaScript code.
The key about the library, and probably the most difficult part of the library equation, is having prior knowledge of what elements you want to use in the library. This will make or break your library efforts. Having a plan as to how your site will be structured is key, not only in Web development as a whole, but also in how you set up elements within Dreamweaver to take full advantage of its features. Creating a Library Item Before any updating can happen with a library item, you must first define something to be in the library. This is a pretty easy task. Remember, anything that can be placed within the <body> tag can be added to the library. CAUTION If you place text that has been styled by CSS into the library, you have to include the style sheet in the library as well.
To add an item to the library, follow these steps: -
Highlight the object in the document that you want to add to the library. -
Be sure to have the Assets panel open by choosing Window, Assets, and then select the library category. Click the New Library button located at the bottom of the Library panel, as shown in Figure 9.21. Figure 9.21. You can easily create a new library item by clicking the New Library button.
-
A new library item appears in the library. Name the item by typing in the highlighted text of the icon. Now the item is a library item. You can also create a library item by highlighting the content you want to add to the library in the document and choosing Modify, Library, Add Item to Library. Finally, you can also drag the item from the document into the library section of the Assets panel. This creates an untitled library item. To title it, highlight the library item in the Assets panel and in the submenu, located in the top-right corner of the panel, choose Rename. This highlights the icon and allows you to type. Press Return (Mac) or Enter (Windows) to apply the new title. Inserting a Library Item into a Document One of the great things libraries can do is promote consistency through your Web site. Every site has core elements, such as a navigation system. It makes perfect sense to make these core elements library items, to enhance design consistency and improve productivity when you're updating these elements. One of the easiest things about library items is how you insert them into pages. This technique resembles many of the techniques discussed earlier when adding Assets to pages. In fact, that's why the library is part of the Assets panel. After you've set up a site and you've set up some library items, to insert any one of those library items follow, these steps: -
Place a blinking cursor in the area in which you want to insert the library item. This can be in a layer, a table cell, or just in the document. -
In the Assets panel, under the library category, highlight the library item you want to insert. -
Click the Insert button toward the bottom of the Assets panel and the library item will be placed in the document in the same location as the blinking cursor. You can also drag the library item out of the Assets panel and drop it into the desired location of the document. After you have the library item inserted into the document, when you select the item, you'll get a speckled mesh pattern around the object. Also note that the Properties Inspector indicates that it is in fact a library item, as shown in Figure 9.22. Figure 9.22. When the library item is selected in the document, the Properties Inspector indicates that it is in fact a library item, and a meshed selection appears around the object.
Editing Library Items and Updating the Site The great thing about editing a library item is that all occurrences of that library item throughout the Web site will also be updated. There's several ways to edit a library item. With a library instance in the document selected, click the Open button in the Properties Inspector. You can also double-click the library item in the Assets panel. This will launch a new document window. This window is not a publishable document for the Web; rather, it acts as the editing environment for the library item. The title bar specifies that it's the library editing mode by labeling it <<Library>> instead of a document name, and the background color is gray, as shown in Figure 9.23. Figure 9.23. The title bar of the document indicates that you're in the library editing window, not in a traditional document window.
To finish the edit, follow these steps: -
Inside the editing window, make any changes necessary. Launch an external editor such as Fireworks or Photoshop, if necessary. To learn more about working with other applications, refer to Chapter 15. -
Make any text changes normally through the Properties Inspector or the Text menu. -
When you're happy with your changes, choose File, Save. This opens the Update Library Items dialog box shown in Figure 9.24. Figure 9.24. The Properties Inspector offers an option to detach the item from the library.
-
If you want all the files listed in the dialog box to be updated, click the Update button; otherwise, you will have to go into the individual files and detach the library instances from the actual library item. The next section covers detaching library items. -
After you click the Update button, Dreamweaver shows you a log of all the updated areas inside the Update Library Items dialog box. -
Close the library editing document and return to the site. Open any page containing the library item and notice that any library occurrence has been updated. Detaching Library Items In the previous exercise, you were able to edit your library item and update all instances of that library item with a click of a button. There may be situations in which you may not want to update all instances. Dreamweaver offers a workaround you can detach the link that the instance has from its library counterpart. You can go about detaching an item from the library in a couple of ways. The first is to highlight the occurrence in your document that you want to detach. In the Properties Inspector, click the Detach button, as shown in Figure 9.24. After you click the button, the link between the instance and the library item is broken. If you want to update this instance, you'll have to do it by hand. It can no longer be done automatically. If you want to reconnect the item to the library item, you must delete it from your document and re-insert it through the library in the Assets panel. You can also detach content by Crtl+Clicking (Mac) or right-clicking (Windows) the instance and choosing the Detach from Original command in the contextual menu. Finally, if you know that you want to use the library item, but you don't want the link to be preserved from the new occurrence to the library item, hold down the Command (Mac) key or Ctrl (Windows) key while dragging the library item out of the library. Deleting Library Items You may find that you no longer want or need a particular element to be part of the library. You can easily remove items from the library without affecting library instances. To delete a library item, highlight it within the library portion of the Assets panel and click the Trash Can button toward the bottom-right corner of the panel. By deleting it from the library, you are not deleting all instances of the library item. All the instances remain in the document. However, if you want to edit or manipulate any one of the instances, you will still have to choose the Detach from Original command. By deleting the library item, the automatic update feature is gone. Re-create This option may seem a bit odd, but here's what it offers. If the instance of the library in a document looks at all altered or is missing, click the Re-create button and Dreamweaver will access and refresh the instance to equal the appearance of the library information. Moving Libraries If you find that you would like to use a library item in another site, Dreamweaver offers you that capability. If it's just one or two items in the library that you want to copy to another site, highlight the item(s) and Command+Click (Mac) or right-click (Windows) and choose Copy to Site in the contextual menu. After you select Copy to Site, a submenu appears with all the defined sites on your hard drive; then select the site of your choice. NOTE After the library item has been moved to another site, no relationship exists between the library items from one site to another.
| 
