Similar to templates, library items can be created, edited, and managed from the Library Items category in the Assets panel (see Figure 16.3). Figure 16.3. Use the Library Items category in the Assets panel to manage library items in your defined site.The Library Items category of the Assets panel is separated into the following areas:
For the most part, general management of library items can be handled using the small button bar at the bottom of the Library Item category in the Assets panel. For more advanced options, however, access the options in the panel's Options menu. Options in the Library Items panel's Options menu include:
Creating Library ItemsTwo methods exist for creating library items in your site. First, you can create a new blank library item in the Assets panel and then add your content to the newly created file. Alternatively, you can highlight an existing element on a page and click the New Library Item icon at the bottom of the Library Items category in the Assets panel to convert that existing element to a library item. For our Dorknozzle example, we'll review both methods. First, we'll examine the process of creating a new library item and then adding the footer content to it. Secondly, because all the pages in our site use or will use the navigation menu, we'll convert our existing navigation menu into a library item so that all pages in our site can use the library item. TIP You can also create a new library item directly from the New Document dialog. To use this method, choose File, New. Select the Library Item option from the Basic Page category and click Create. Creating a New Blank Library ItemOne of the methods of creating library items is to click the New Library Item icon in the Assets panel. Doing this creates a new blank library item that can be opened and edited to your liking. After you've edited the content, save the library item, close it, and then add it to any pages in your site. To create a new library item for your site using this method, follow these steps:
NOTE CSS style classes cannot be added to newly created library items. An alternative method is to create the library item on the page, apply your styles, and then save the element as a library item. This method is described in the next section. Converting Existing Elements to Library ItemsA secondand quite possibly more flexiblemethod for creating library items is to convert an existing element on a web page to a library item. This method provides two benefits: First and more importantly, it allows you to see how the library item looks in the context of the page design. Second, it allows you to apply style classes to the element before converting it to a library item. Because you can't apply styles directly to existing library items, this method is generally preferred. TIP Although the editing mode for library items doesn't support the ability to apply classes, there is a workaround: Copy the <link href="styles.css" rel="stylesheet" type="text/css" /> code out of an HTML page and paste it in the code of the library item. When you're done applying the style classes, remove the line of code and save your library item. To demonstrate the process of converting existing elements to library items, follow these steps:
That's all there is to it. In the next section, we'll explore methods for adding library items to your web pages. Inserting Library Items into Web PagesAfter you've created a library item, adding it to your web pages is as simple as drag and drop. In the previous two sections, we created two library itemsone for the footer of every page and another for the navigation menu of the website. Although the helpdesk.htm page already contains the navigation menu library item, we still must replace the navigation menus that exist on the other pages with our new nav library item. To do this, follow these steps:
Of course, you'll want to repeat these steps for the footer library item as well. When you finish, all three of the HTML pages included with the files you downloaded for the Dorknozzle project should have a navigation menu and footer similar to what's shown on the helpdesk.htm page in Figure 16.8. Figure 16.8. Add the navigation menu and footer library items to all three pages.Editing Library Items and Updating the SiteOf course, the benefit to using library items is that they can be edited centrally using a familiar interface in Dreamweaver's Design mode and then saved across the website. What this means is that, as with templates, changes can be made to one file, saved, and Dreamweaver instantly updates all files in the defined site that use that library item. To demonstrate this, assume that your supervisor has just accused you of being a wise guy for using the word illustrious in the footer to describe the Marketing department. To get back on his good side and avoid the wrath of Mike in Marketing, your supervisor asks you to change the word illustrious to the more subtle word distinguished. Had we not been using library items, we would be required to open every page to make these modifications. Because we're using library items, however, the change requires us to do little more than open the footer library item file, make the change, and save it. To do this, follow these steps:
Renaming Library ItemsLike every other file in the Site panel, library items can easily be renamed at any time. When you rename a library item, Dreamweaver performs a scan of files and displays the same Update Pages dialog presented to you in the previous section, allowing you to update all pages that use the selected library item (in this case, updating them to use the new filename). In fact, you can rename library items in the Library folder in the Site panel or directly in the library items list in the Assets panel. To demonstrate how library items can be renamed, follow these steps:
Of course, you can also rename files directly from the Files panel. To use this method, follow these steps:
Moving Library Items to a New SiteThe obvious benefit to using library items is that you can create small pieces of functionality that can easily be shared across multiple pages in your site. But the functionality doesn't have to be limited to a single site. Dreamweaver offers the benefit of copying library items from one site to another. What this means is that you only have to create a library item once; if you ever feel compelled to use that functionality in another site, you can simply copy the library item to that site directly in Dreamweaver. To copy a library item from the Dorknozzle site to another site, follow these steps:
NOTE If a Library folder doesn't exist in the site to which you're attempting to copy the library item, Dreamweaver automatically creates the folder for you. Although the method you used for copying a library item was simple enough, you can perform the same operation by choosing the Copy to Site option from the Assets panel's Options menu. Deleting Library ItemsAs is the case with files in the Files panel, library items can be deleted at will. To delete a library item, select it from the library item list in the Assets panel and click the Delete button located in the bottom-right corner of the Assets panel. Alternatively, select the LBI file in the Library folder in the Files panel and press the Delete key. When you delete a library item from the library items list, only the library item markup in the file that uses the item is removed. The tie between the library item within the page and the actual file in the library items list are said to be broken. If you do accidentally delete a library item, you can easily re-create it by right-clicking the orphaned library item and choosing the Recreate option from the context menu After you've chosen the Recreate option, refresh the site list in the Files panel (by clicking the Refresh Site List buttonthe first icon in the button bar in the bottom-right corner of the Assets panel) to see the LBI file reappear. If you decide that you do in fact want to remove references to library items from each of your HTML pages, you can right-click the library item in the page and choose the Detach from Original option from the context menu. Dreamweaver removes the reference to the library item. After you've deleted the reference to the library item from each web page (the actual itemsuch as the navigation bar or footeris still on the page until you physically delete it. You can now safely delete the library item from the Files panel or the Assets panel without worrying about creating an orphaned library item in the web page. |