Dreamweaver Library Items

By CRAIG KUNCE

So, the story goes… a web designer maintains a 150 page site for a good client. The client is granted a trademark and wants to change the legal line (in the footer) on every page. What's the fastest way to do it? You could use find-and-replace. But what if you type an incorrect character? Or forget a <? Or the legal line is used elsewhere in the site—and for now, you only want to change the text in the footer? What now?

Ahhh… the wonderfully fast and efficient workflow tool that is the… Dreamweaver Library Item. Library items helped me to greatly increase my web workflow efficiency. I currently manage five web sites that total well over 250 pages. Simply stated, I couldn't do this without library items. Unless I quadrupled my time spent—which I don't have. With a little planning and preparation, library items are a real time-saver.

Now on to Dreamweaver Library items.

Creating a Library Item in Dreamweaver

  1. Open the Assets window: Window > Assets
  2. Click on the bottom icon (a little image of a book) in the Assets window's left column
  3. Click the New Library Item icon (a plus-on-a-page icon in the lower right corner)
  4. In the new window, type your information
  5. Save and name your Library Item
  6. Go to your web page and set your cursor in the location you want to insert the Library Item
  7. Select the Library Item file in the Assets window
  8. Click Insert in the Assets window (bottom left)
  9. That's it!
  10. Whenever you want to change the Library Item, simply double-click it, make your changes, Save, and click Update.
  11. Once all your pages containing the Library Item are updated, be sure to Synchronize your site to the server.
  12. Each .html file has to be updated before the changes will be noticed

Here's how they work:

Before I switched to PHP includes, the top nav, left nav and bottom legal were all Dreamweaver Library items. Here's how they worked:

  1. I set up my legal line (below) as simple text in a library item in Dreamweaver (under Assets).
    (I also applied the "legal notice…" link in the library element)
  2. Tip: Only style the text in your library item with common headline or paragraph styles
  3. Then, I insert that library item into the footer div of every page in my web site
  4. Tip: Inserting them when you start designing your first web page saves a lot of time! Otherwise you have to go back and insert them individually into every page. Or, you can cleverly use site-wide find and replace to insert the library item into an existing div. Find and replace is much, much faster.
  5. That's it! Now any time you want to change my legal line, or the link in it, all I have to do is open the library item, edit it, and save. Dreamweaver automatically prompts me to update every instance of that item on every web page. What a time-saver!

Here's what the library element looks like in my html code

<div id="footer"><!-- #BeginLibraryItem "/Library/copyright.lbi" -->

          <p> TM &amp; &copy; Copyright Craig Kunce LLC. <a href="../hmpg_legal.html">Legal

          notice…</a></p>

          <!-- #EndLibraryItem -->

</div>

A Side Note: Includes

For my coder-friends: from what I've read, there is no raw html equivalent to Dreamweaver's Library items. Programmers/coders instead use "Includes". This allows web site designers to include certain chunks of html code inside of another chunk of html code Or an html page inside of another html page. They can use a variety of methods including Javascript, PHP, SSI, CMS, or ASP. (more about Includes here…)

I used DW Library items on this site for some time, before converting to php includes. I found php includes demonstrated several advantages over library items including:

  1. Cleaner—Once you design web sites in WYSIWYG web design software (like Dreamweaver) for a year or so (maybe shorter, or longer, depanding on how much work you do) you will begin to realize that working with raw html code is cleaner and faster for some tasks. Once you get to this point, you may want to dump Library items and switch to Includes.
  2. Faster—When DW inserts a library item into a page, it writes all of the html code for the item into your page's html code. When you change a library item, in order to update your site, DW basically performs a site-wide find-and-replace based on the newer library item's chunk of code. While this doesn't take hours, it can take several minutes—a life time in today's measure, right?! And it doesn't always work seamlessly.
  3. Simple and fast—When you update the PHP include file, all you have to do is upload that single file and you're done. (the PHP script loads the html include file onlywhen the page is loaded). There is no site-wide find-and-replace.
  4. Works in html text editors—I like to update my web sites on the go from my iPad, using an html text editor. This means no Dreamweaver, only raw html text. So I definately had to switch to PHP includes because, currently, there is no Dreamweaver for iPad. And, currently, there is no site-wide find-and-replace in my html text editor. Maybe
  5. Coolness—I like learning and growing, so what could be cooler than casually telling your web designer friends, "Oh, it was no big deal, I just wrote a little html code to create my include, wrote a script to load that include into my page's html, wrote an .htaccess file to instruct the server's Apache software to read the .html files as PHP, and I was done before lunch! (at least I think that's what I did).