Class: Dreamweaver Libraries

Working with Dreamweaver Libraries is one of the fastest ways to maintain a website and Fireworks gives you the ability to create them directly from it. Something that goes unnoticed, is the fact that you can use Dreamweaver Libraries even if you don't want to use Dreamweaver but you can use Server Side Includes (SSI) on the server that your pages reside. But before we go any further, let see what a Dreamweaver Library really is.

What is a Dreamweaver Library file?
In a nutshell, Dreamweaver Libraries are chunks of HTML code that go by the extension "lbi". If you open one of them in your favorite text editor, you will see that that's all it contains -- a chunk of HTML code.

How does it work?
When importing a library item to a page, Dreamweaver copies the HTML code the Library item contains, in the page it's being imported (and changes the relative paths of the images the Library item may contain). It also adds two HTML comments at the beginning and end of the imported HTML code, so it knows that the code between them belongs to a Library item and which one. Almost the same thing could be done with any editor that allows you to save snippets of code. The difference is that when you modify the contents of a Library item, in a normal editor you'd have to edit by hand the pages. Dreamweaver does the dirt work for you. And if it is 5-10 pages who minds doing them by hand? But if it is 500, then at least I, do.

What should be in your Library?
Theoretically, any valid HTML code can become a Library item (actually invalid code can too). But since Libraries are there to make our life easier, it makes sense to convert to Library items anything that appears on more than one page. The most common are: header, footer, navigation. Project Fireworks as it is the moment that this class was written, uses at least 3 Library items on each page.

What Fireworks has to do with all that?
When exporting from Fireworks, you have the ability to export directly as a Library item. That can save alot of time especially for things like navigation bars or with anything that needs to be updated/modified frequently.

To export as a Library item, select Export as usual, and provide information about the images that are about to be exported (such as location, basename) as you would normally. At the lower part of the panel where you can specify your HTML settings, select "Dreamweaver 3 Library".

You might be prompted to locate a directory called "Library" which is the location that Library items have to be saved (Dreamweaver requires them there, so Fireworks saves them there). If you don't have that directory in your site's structure, create it (and make sure that you name it "Library"), and finish the Export procedure.

We can see now that Fireworks placed the images in the directory we specified, and the Library item in the "Library" directory. Open the Library item in a text editor, or view the source from Dreamweaver. You can see that the path to the images that the library item contains, is relative to the position of the images in the site structure. When you import the Library item in any page using Dreamweaver, the relative path to the images change but Dreamweaver takes care of that so you don't have to worry about it. All you need to do is to place the Library item where it's needed.

Now if you need to make any changes in the images your Library item contains, make them in Fireworks and export as the same Dreamweaver Library again. That updates the chunk of HTML code the Library item contains. If you work with SSI, that would be enough. If you work with Dreamweaver, you have to update the pages the library item appears. That is done in a snap, like so:

  1. In Dreamweaver, go to: Modify > Library > Update Pages...
  2. A dialog that comes up allows you to update different things on your site, like the Entire site, templates and pages that use a specific Library item. In the illustration below, I am about to ask Dreamweaver to update all the pages that include the foot.lbi in the site I am working on.
    Click "OK" and Dreamweaver will replace the HTML code in all the pages the specified Library item appears if it is in 1, or 1000. Simple as that.

Use Library items, they can be timesavers in managing large sites and/or chunks of code that change frequently.

List all