Using Dreamweaver Library Items

Home >> Software Help >> Dreamweaver >> Library Items

Library Items in Dreamweaver

By creating "library items" in Dreamweaver, you can change the code on multiple pages simultaneously just by changing the Library item. For example, at the bottom of this page there is a library item:

There are over 100 files associated with this site. Next year, I will want to change the Semester of the class from Spring 2001 to Spring 2002. To do this I would have to make this change in the code of every single HTML page. But by making the code a library item, and placing this library item on every page, I only need to open the library item and change that file, and it will update the code in all of the HTML pages for me.

How Does this Work?

A library item is a scrap of code. If we view the source of the above library item, it looks like this:


<div align="center"><a href="../../main.htm"><font face="Arial, Helvetica, sans-serif" size="2"><br>
Home</font></a><font face="Arial, Helvetica, sans-serif" size="2"> | <a href="../../StudentWork/main.htm" target="main">Student
Work</a> | <a href="mailto:megan@whirld.com">Email Ms. Sapnar</a> | <a href="../../toplinks.htm">Top
Links</a> | <b><a href="../../sitemap.htm">SITE MAP</a></b><br>
Advanced Web Publishing, Spring 2001 <a href="http://www.loyola.edu/communication" target="_top">Department
of Communication</a>, <a href="http://www.loyola.edu" target="_top">Loyola College</a></font></div>


We can see that inside the comment tags there is a file called footer.lbi located at /Library
The slash / before Library is significant. Whenever you create a library item, Dreamweaver will make a folder at the root level of your site called "Library" and all of these scraps of code will be saved as .lbi files inside this folder. You cannot move this folder from it's location.

How to make a Library Item:

1. First show your site's assets (you must define your site first). There are several ways to do this. You can:

a.) go to Window-->Assets

b.) click the assets icon at the bottom right corner of the Dreamweaver window

c.) click the assets button on the Launcher palette

2. The Assets window shows all of the information (images you have linked to in your site, colors your have used, Flash files, scripts, etc.) Click the bottom icon of the book for you Library Items.

3. Highlite the element you want to make a library item.

Important Note: You cannot make a library item from individual cells or rows in a table. You must make the entire table a library item. See the screenshot below and notice that the whole navigation table is selected.
Notice here that the navigation table is inside a larger table that holds the layout together (it wouldn't work if my navigation was just the top row of my main table, it must be it's own table.)

Since the footer of this page doesn't need a table to hold it together, I can just highlite the text.

4. Then add the highlited text (or selected table) to your Library Assets by clicking the New Library Item icon in the Assets window. It will appear inside this window as Untitled.

(Note: Another way to add an object to your library is by going to Window-->Library-->Add Object to Library.)

5. Name the Untitled Library item and hit enter. (Give it a name like "top_navigation" or "footer" or "copyright" so you can differentiate among the different library items in your site.)

Your library item will now have a highlite around it and you can no longer select individual items. When you try to click on this part of your page, the entire library item will be selected.

To insert a Library Item into a new page, highlite the library item you want to add and then click insert.

To change or edit a library item:

1. Open the library item by either:

a.) clicking the file in the Site Management Window (it's in the Library folder of course)

b.) clicking the highlited library item on your page and selecting open from the properties inspector

c.) double-clicking the highlited Library item in the Assets window

2. The library item will open. Notice this is just a scrap of code and not an HTML file. There will be no background, nothing except for the actual code of the library item.

If you look at the source code you will see exactly what code will be inserted into every file in the site where that library item has been placed. Any changes made to this code will be reflected throughout the site.

Library Items and Linking:

To link to another file from a library item, the path must go up one level out of the Library folder before looking for your file. Every relative link should begin with ../

To make sure you have the right path and your links and images work, always click the folder to browse for your file instead of typing in the path by hand. Never keep any files beside .lbi files in the Library folder.

Notice in this file structure that the scrap of code of our Library item is saved as a file called footer.lbi and is inside the Library folder. If this scrap of code, or library item, has any links in it, the path must be:

Go outside of the the folder "Library" and then look for my file search.htm.

<a href="../search.htm">Search</a>