Rumble in the Docs: Dreamweaver’s Library Items vs. Server-Side-Includes

The Nature of the Code Debate

You may have been designing websites in Dreamweaver for a while now and, regardless of whether you have used Dreamweaver’s Library Items before, you’re hearing more and more talk about these things called Server-Side Includes (SSI) and you want to know if you should be using them. More exactly, you want to understand what SSIs are and find out whether you should use them instead of Library Items. Poll 10 people on their preference and you are likely to get answers weighing in on both sides of the debate; some people are die-hard Library Item users, while others swear by SSIs. This article will generally describe both Library Items and Server-Side Includes, as well as how to create and use them. It will also provide you with reasons for using both and suggestions for when you’d choose one over the other. There is no true victor in this debate, but rather a time and place for using both of them.

What are Library Items?

If you're familiar with Dreamweaver's Templates, but haven’t used Library Items yet, you will quickly learn that Library Items work in a similar way. Whereas Templates are the master documents from which you create new documents, Library Items are simply master page elements that can be used as many times as you want without the need for rewriting the code each time. Library Items are typically placed inside Templates or used as stand alone master elements in lieu of templates.

To understand more plainly how Library Items work, think of the master/duplicate relationship of a rubber stamp. Your rubber stamp has the master design, and when you ink it up you can make as many copies of that stamp's design as you like. Similarly with Library Items, you will create the master by writing the code you want to be contained in the Library Item, then save it and insert copies of it when and where ever you like on your web pages.

One good use for a Library Item is the copyright notice at the foot of your page. For example, it may look something like this: Copyright 2005. All rights reserved. You will use the current year now, but come January 1st, you’ll want to update the year. When you’re ready to make the date change, you’ll update the original library element and Dreamweaver will manage updating all the copies with the new code.

Follow these steps to create a Library Item:

1. Open the Library panel, found inside the File panel under the Assets tab.
   
   
2. From the code or design view of your document, select the code you want to convert into a Library Item. Library Items can contain text, graphics, links, tables, JavaScript, Flash movies, and other HTML code elements.
   
   
3. Click the new Library Item icon in the Assets panel. Dreamweaver converts your selected code into a Library Item with the .lbi file extension, then creates a Library folder and puts your newly created Library Item there. You will know your code has been converted properly into a Library Item because it will display in your page, in both the design and code views, as a block of code with a pale yellow background. See Figure 1-1 below.
   
   
4. Give your new Library Item a descriptive name, like “copyright”, and it's ready to insert.
   
   
5. To insert your Library Item on another page, select it in the Library panel, place your cursor on your page where you want to that Item to go, and click the Insert button on the Library panel.
   
   Notice that when you insert your Library Item, Dreamweaver writes opening and closing comment tags along with your Library Item contents.

Figure 1-1. Example of a Library Item

Need to edit a Library Item? Simply open the original Library Item, modify it, and save it. Because Library Items are hard coded into your pages, when you save your changes after editing, Dreamweaver prompts you to update all the pages that contain that item. Click OK to that prompt—and this is the cool part—Dreamweaver finds all the instances of the original Library Item code and updates it to match the changes you just made. If you skip this updating prompt, you can always update later by using the Modify > Library submenu command.

Library Items sound so great you may be wondering why you wouldn’t use them. The main complaint about Library Items is that, since they’re hard coded into your pages, when you edit them, every page on your site that contains the Library Item must be updated with the new code and uploaded to your server before site visitors can see those changes. If your site has a lot of pages, this uploading process is definitely something to consider.

What are Server-Side-Includes?

Now that you understand Library Items, you should quickly be able to grasp the concept behind Server-Side Includes. Like Library Items, SSIs can be composed of HTML, JavaScript, graphics, etc. But unlike Library Items, there are no opening and closing comment tags surrounding the code and the content of the SSI is NOT hard coded into your web page. Rather, a simple line of code is added to your page that points to the SSI file on your server, like this:

<!--#include file="serversideinclude.html" -->

Depending on the type of server you have, you may need to replace the word “file” with “virtual”. Apache typically uses the ‘virtual’ setting, whereas ‘file’ is standard for Microsoft Internet Information Server (IIS).

The SSI HTML file itself is composed of the content you want to include on another page, and it has the .html or .htm extension, but doesn’t have any <HTML>, <HEAD>, <TITLE>, or <BODY> tags. The reason for this is that because the SSI is included on another page that already has those HTML tags, the SSI file doesn’t need them. Figure 1-2 shows an example of a SSI file, and Figure 1-3 demonstrates how that SSI file is included inside the code of another document.

Figure 1-2. Example of a Server-Side Include File

Logically, then, they’re called Server-Side Includes because the Server adds the content of the include file to your web page when the web page is “requested” from the Server by a web browser.

To create the SSI file, open a new document window and strip it of any <HTML> tags, then paste the include code into it. Save the SSI file with the .html or .htm extension. Insert the SSI into other pages as needed, and remember to upload the SSI file onto your server along with your other documents.

If you ever need to edit the SSI, simply open it in Dreamweaver and edit it as you would any other web page. Save your changes when you’re done editing and upload the SSI to your server. While Dreamweaver’s code view shows the link to insert the include, thankfully in Design view Dreamweaver displays the include as it would appear in a browser window, so you needn’t always launch your browser window to see how it will appear on your server. Refer again to Figure 1-2 to compare the code in both Design and Code views.

To insert an SSI into another page, follow these steps:

1. Open the page you’d like to add the include file to and click your cursor inside that file where you’d like the SSI to be displayed.
   
   
2. Go to Insert > HTML > Script Objects > Server-Side Include and browse to select the SSI .html file to be inserted.
   
   
3. Click OK and Dreamweaver will write the appropriate include code for you.
   
   
4. Upload the document(s) containing the SSI and the SSI(s) to your server, and the SSI(s) should render seamlessly as part of the files they’re included on in the browser window.

Figure 1-3. Example of a Server-Side Include inside another document

One important thing to remember when using SSIs is that servers handle or parse them differently. And you should definitely test the SSI on the server before making it LIVE just in case the server isn’t configured to display them. Some servers may have software installed that allows you to upload all your files with the .html extension, while others require that the files containing the SSIs have the .shtml extension. Understand, too, that pages that contain SSIs may open a little more slowly in the browser window than pages without them.

Another thing to keep in mind with SSIs is that they may require site root relative linking rather than document relative linking. In other words, you may need to add a backslash before the include filename, like this:

<!--#include file="/serversideinclude.html" -->

Speak with your host provider to find out if and how they support SSIs before building your pages with them. If you do ultimately choose to use SSIs, test, test, test them on as many browsers as you can on both PC and MAC platforms, to ensure they’ll display properly.

Library Items vs. Server-Side Includes: How to Know Which One to Use

Use the check list below to figure out which solution works best for you:

Use Library Items if…

• Your website is small (under 30 pages)
  
  
• You manage the site yourself
  
  
• You expect to make changes periodically to the items or you anticipate the content in the items may need altering in the future
  
  
• It’s not that big of a deal to you that making edits to the Library Items requires a rewriting of all the pages on your site that use the Library Item, and therefore you must upload all the updated files to your server.

User Server-Side Includes if…

• Your website is large (over 30 pages)
  
  
• Two or more people manage the site
  
  
• You have content that needs frequent editing
  
  
• You are confident your host provider supports SSIs
  
  
• You have a client who wants to update part of the site regularly, and they understand and can write the SSI content in HTML themselves
  
  
• You love the fact that you only have to upload the SSI files to the server if their content changes, rather than uploading all the files that contain them, as you have to do for Library Items
  
  
• Your site is database driven (ASP, JSP, PHP, CFML)
  
  
• You’ve tested your server and are confident that the SSIs work

Good uses for Library Items:

• Footers
• Copyright notices
• Navigation elements
• Parts of your page/site that may require periodic updating, like tag lines, sponsorship listings, and contact information that appear on multiple pages

Good uses for SSIs:

• Footers
• Copyright notices
• Navigation elements
• Jump menus
• Parts of your page/site that may require periodic updating, like class schedules, course descriptions, news items, etc.
• Parts of your site that require regular updates, like a menu or event listing

To determine which solution is best for your projects, consider this general rule of thumb: if the site is small, use Library Items, but if the site is large and needs regular updates to certain parts of the content, use SSIs. Now that you understand the differences between Dreamweaver’s Library Items and Server-Side Includes you can confidently choose the right solution.

Sue Jenkins is a freelance web designer, graphic designer, artist, writer, and illustrator, she teaches Dreamweaver, Illustrator, and Photoshop classes at Noble Desktop in New York City, and offers private training to companies in the New York area. Her first book, Dreamweaver MX 2004 All in One Desk Reference for Dummies, is due to be published by Wiley in early 2006. If your company needs a website, website redesign, logo, or illustration, see Sue’s consulting page for more information, or go directly to her website learn more about her design services. http://www.luckychair.com.