Using the Assets Panel to Manage Library Items


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:

  • Library Item list: Displays a list of LBI files or library items in a defined site. The list provides the name of the library item, its size in kilobytes, and the path (usually within the Library folder of the defined site).

  • Library item preview: Displays a preview image of the library item.

  • Insert: Inserts the selected library item into the page.

  • Refresh Site List: Refreshes the library item category to reflect changes made within the Files panel.

  • New Library Item: Creates a new LBI file in the Library folder of your defined site. When this button is clicked, a new library item instance also appears in the library item list.

  • Edit: Click this button to launch a selected library item from the library item list in a new Document window for editing.

  • Delete: Deletes a selected library item.

  • Options menu: Displays advanced options for working with and managing library items. These options are outlined with more detail next.

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:

  • Refresh Site List: Refreshes all library items in the library item list.

  • Recreate Site List: Reloads Dreamweaver's site cache.

  • New Library item: Creates a new, blank library item.

  • Edit: Opens the selected library item in editing mode. When the library item has been opened, you can make necessary changes, save the document, and then update the site.

  • Insert: Inserts a library item into an existing page.

  • Rename: Renames the selected library item.

  • Delete: Deletes a selected library item.

  • Update Current Page: Applies any changes made to a library item within its editing mode to the current open page that uses the library item.

  • Update Site: Applies any changes made to a library item to all pages that use the library item in the current open site.

  • Copy to Site: Copies the selected library item to another defined site.

  • Locate in Site: Opens the File panel and highlights the library item in the list.

Creating Library Items

Two 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 Item

One 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:

1.

Switch to the Library Items category in the Assets panel and click the New Library Item icon. Alternatively, choose the New Library Item option from the Assets panel's Options menu. Either method you choose creates a new Untitled Library item, similar to Figure 16.4.

Figure 16.4. A new, untitled, blank library item is created in the Library Item list.


2.

Enter a name for your new library item (I'll call mine footer) and press Enter to apply it to the item.

3.

With the new library item selected in the list, click the Edit icon (located second from the right in the button bar). You can also select the library item and press Enter to open the library item in Edit mode.

4.

Switch to the Files panel and drag the footer.txt file into the new library item. When the Insert Document dialog appears, select the Insert the Contents and the Text Only radio buttons and click OK. The content is inserted into the page.

5.

Format the content to your liking. I'll center the content on the page and add an email hyperlink to the Questions or Comments? text.

6.

Save your work, close the library item, and switch back the Library Items category in the Assets panel. The Library Item preview window shows what the new library item looks like (see Figure 16.5).

Figure 16.5. The new library item appears in the Library Item list. A preview of the library item is also shown.


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 Items

A 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:

1.

Open any of the existing HTML pages. I'll open helpdesk.htm.

2.

Select the table that encompasses the navigation bar. You can do this by either selecting the table directly or by choosing the <table> tag in the Tag Selector.

3.

Switch to the Library Items category in the Assets panel and click the New Library Item option. Dreamweaver displays a dialog alerting you that CSS styles won't appear in the library item's edit mode because the CSS style link isn't copied along with the library item.

4.

Click OK to accept the notification.

5.

As you can see in Figure 16.6, the navigation bar highlights yellow (as a visual aid) and an untitled library item appears in the library items list.

Figure 16.6. The new library item appears in the library items list.


6.

Name your new library item nav and press Enter to apply the change.

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 Pages

After 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:

1.

Open a page that doesn't already have the navigation menu library item applied. I'll open index.htm.

2.

Select the existing table that contains the navigation menu and press Delete.

3.

Switch to the Library Item category in the Assets panel and select the nav library item.

4.

Drag the nav library item into the spot where the navigation menu previously resided. The navigation menu appears on the page, similar to Figure 16.7.

Figure 16.7. The navigation menu library item appears near the left of the screen.


5.

Repeat the process for the third and final page of our sample website (companydirectory.htm).

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 Site

Of 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:

1.

If you haven't already done so, switch to the Library Items category in the Assets panel.

2.

Select the footer library item and click the Edit icon located second from the right in the button bar. The footer opens.

3.

Change the text illustrious to distinguished and choose the Save option from the File menu. The Update Library Items dialog appears, similar to Figure 16.9.

Figure 16.9. The Update Library Items dialog displays a list of files that use the library item being edited.


4.

The Update Library Items dialog displays a list of files in the defined site that use the library item you just edited. Click the Update button. Dreamweaver scans and updates all the footer library items in your site accordingly.

5.

Close the footer.lbi file and try opening one of your HTML pages. Notice that the footer on the pages of your defined site now reflect the change made to the library item.

Renaming Library Items

Like 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:

1.

Close all open HTML pages and switch to the Library Items category in the Assets panel.

2.

Right-click the nav library item and choose the Rename option from the context menu. Alternatively, select the Rename option from the panel's Options menu. Either method you choose allows you to rename the file.

3.

Change the item's name to navigation and press Enter to apply the change.

4.

The Update Files dialog appears. Click Update. Dreamweaver scans the HTML files and updates all library items within the site accordingly.

Of course, you can also rename files directly from the Files panel. To use this method, follow these steps:

1.

If you're still in the Assets panel, switch to the Files panel.

2.

Expand the Library folder.

3.

Right-click the footer.lbi file and select the Rename option from the Edit submenu of the context menu. Alternatively, select the file and press the F2 key to rename the file.

4.

Change the name back to nav and press Enter to apply the change.

5.

The Update Files dialog appears; click Update. Dreamweaver scans the HTML files and updates all library items in the site accordingly.

Moving Library Items to a New Site

The 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:

1.

With the Dorknozzle site as the current site, switch to the Library Items category in the Assets panel.

2.

Right-click the library item you want to copy; from the Copy to Site submenu of the context menu, choose the site name to which you want to copy the library item.

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 Items

As 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.




Macromedia Dreamweaver 8 Unleashed
Macromedia Dreamweaver 8 Unleashed
ISBN: 0672327600
EAN: 2147483647
Year: 2005
Pages: 237
Authors: Zak Ruvalcaba

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net