There are several techniques that will help you save a lot of work when developing websites, especially when your sites' web pages reuse the same content over and over again. These techniques allow you to make an update in one place and have that change update many pages.

In this article I'll review a few of these techniques—namely Dreamweaver templates, library items, and server-side includes (SSIs). Each of these is excellent in special cases, but in other cases they can be absolutely the wrong choice. First I'll give you a short overview of each of these techniques. At the end of the article you'll find a table with many hints on when to use templates, library items, and SSIs.

Note: In this article, I won't cover which of these techniques is the best or better than the other ones. Instead, the hints I provide should just help you decide which to use in your specific situation.

Requirements

To complete this tutorial you will need to install the following software:

Dreamweaver 8 (or MX 2004)

• Try
• Buy

Using templates

Dreamweaver templates are special master files that contain editable and locked regions. Pages based on a template enable Dreamweaver and Contribute users to edit parts of a web page within the editable regions without the risk of messing up the locked regions. This is a major advantage if you are creating a site that will be maintained by Contribute users. You can specify which parts of pages Contribute users can change and which parts they can't. Templates also offer a lot of potential for advanced developers, such as when using template parameters.

How to create templates

To create a template in Dreamweaver, create a new document. In the New Document window, select the Template Page category in the General tab, and then select the type of template file you want to create (see Figure 1).

Figure 1. Creating a new template file

All template files are stored in a folder called Templates in your site that Dreamweaver automatically creates when you make your first template file. Do not move any template file outside that folder; otherwise the Dreamweaver template engine cannot create new files based on that template. It will also create problems with inserting correct paths for hyperlinks in existing files that are based on templates.

How to edit templates

Editing a template in Dreamweaver is similar to editing a normal page. The only differences are that you will see special template code in Code view and special template symbols in Design view.

Note: You need to use Dreamweaver to edit templates and update pages based on template. Do not use other editors to edit Dreamweaver template pages. Dreamweaver templates have the DWT file extension.

How to update pages based on a template

When you edit and save a template, Dreamweaver will prompt you about whether you want to update the files based on that template. However, Dreamweaver does not automatically upload those updated pages to the remote server automatically. You will have to do that yourself after the pages based on the template are updated.

For more information on working with Dreamweaver templates, visit the Dreamweaver Developer Center's Templates topic page.

Using library items

Library items are similar to Dreamweaver templates. Although they are also master files, they are the master file for only one part of a web page—not for the whole page, like templates. Library items are like special code snippets that have the ability to get updated in all Dreamweaver pages that use them when the library item is updated. In other words, when you update a library item, all pages that use that library item will also be updated.

How to create library items

There are several ways to create a library item. One way is to create a new document as a library item by selecting File > New, selecting the Basic Page category, and selecting Library Item (see Figure 2).

Figure 2. Creating a new library item

Another way to create a library item is to highlight a part of a file in Dreamweaver and select Modify > Library > Add Object to Library (see Figure 3).

Figure 3. Adding a new object to the library

When you do this, Dreamweaver opens the Library category of the Assets panel and prompts you to name the library item. Don't use spaces or special characters in a library item's name. Once you create a library item, you can drag it into your site's pages from the library category of the Assets panel.

Click the book icon on the left side of the Assets panel to open the library. If you view a library item on the page in Code view, you will see the library item code that Dreamweaver inserts. This allows Dreamweaver to identify it as a library item later on. This code helps Dreamweaver find and update pages that use the library item in case you ever change it.

Note: Dreamweaver creates a folder called Library in the root of your site to store library items. Library items have the LBI file extension.

How to edit library items

To edit a library item, double-click the item in the library category of the Assets panel to open it. Or select the library item and click the Edit button at the bottom of the Assets panel.

How to update pages that contain library items

When you edit and save a library item, Dreamweaver asks whether you want to update the pages containing that library item. Once you have updated the library item and the pages that use it, you will need to upload those updated pages to the remote server.

Using SSIs

Server-side includes (SSIs) are like library items, but they are included in web pages by the remote server when a visitor opens a web page in a browser. The web server assembles the web page on the fly and inserts the SSI code into the page when a browser requests the page.

Using SSIs is the easiest and fastest way to update parts of many web pages because you do so by editing (and uploading) a single file. There is no need to re-upload the pages that use the SSI. Another advantage of SSIs is that they are a web standard. Dreamweaver library items and templates are proprietary techniques used only by Dreamweaver.

One problem is that SSIs have to be supported by your Internet service provider (ISP) because pages containing SSIs are composed on the remote web server. Unless the web server has been specially configured to look for SSI file references in regular HTML pages, the web page containing the included file must either have an SHTML file extension, or it must be a dynamic page such as ColdFusion, PHP, ASP.NET, ASP, JSP, etc.

How to create SSIs

Because SSIs are included as part of a web page, the source code of SSI files must not contain <html>, <head>, or <body> tags. If your SSI files have these tags, the file containing them will have duplicate tags. This will cause errors in Dreamweaver and will cause rendering problems in browsers. Here is my preferred workflow for creating a new SSI:

1. Create and edit a normal page.
2. In Code view, highlight and cut out the code which will be an SSI.
3. Create a new file and highlight all of the code in Code view.
4. Paste the SSI code that you just cut. This overwrites the original code inserted by Dreamweaver.
5. Save the SSI file.

How to include SSIs in web pages

Here are the steps to use SSI files in your web pages:

1. Open the file in which you want to include a server-side include file and place your cursor where you want to include the SSI file.
2. Select Insert > Server-Side Include. (If you are using an earlier version of Dreamweaver, this might be Insert > HTML > Script Objects > Server Side Include.)
3. Browse to your SSI file, select it, and click OK. Dreamweaver will insert a reference to the selected SSI file into the HTML page.

Note: By default, Dreamweaver automatically inserts the appropriate SSI code for IIS web servers. This is a File type of SSI. If your site is hosted on an Apache web server, you will need to change the SSI type to Virtual by highlighting the SSI code in Code view and selecting the Virtual option in the Property inspector. If you are unsure which type of web server your site is hosted on, either contact your ISP or try switching the type of SSI using the method I describe above and test your page to see if the SSI file is included in your page.

The content of the SSI file will appear in the Dreamweaver Design view just as it will appear in a browser. In Code view, however, you will see only the reference to the SSI file. If you see an error or an HTML tag highlighted in yellow in Design view, check to make sure that the SSI file doesn't contain any <html>, <head>, or <body> tags.

How to edit SSIs

You need to open the included file to edit it. You can do that in an external text editor, but it's easier to use Dreamweaver: just click within the included file in Design view. Then click the Edit button in the Property inspector (see Figure 4).

Figure 4. Click Edit in the Property inspector to edit an SSI in Dreamweaver

Dreamweaver will open the included file in a new window. Edit and save the file. Design view will show the updates to the file immediately. Don't forget to upload the edited SSI to the remote server so the update appears on all pages where that file is included.

How to update pages including SSIs

To update pages that include SSI files, you have to edit, save, and upload only the included file. That's all! All pages where that SSI file is included are immediately updated. There is no need to upload all those files to the server, as you would have to do with pages using library items and templates. As you can see, SSIs make it very easy to maintain large sites that contain many pages with common content.

Overview

Table 1 lists the pros and cons for templates, library items, and server-side includes for a variety of purposes and circumstances. This table should help you decide which is best to use in many situations.

Table 1. Templates, library items, and server-side includes

Description	TEM	LIB	SSI
Special server support required
Special Dreamweaver code is used
Special Dreamweaver code is only recognized by Dreamweaver and Contribute
Dreamweaver is required to edit file/item
Content is inserted
Only reference to external file is inserted
Editing content directly in current document
Editing and uploading only included file updates automatically each page where file is included
After editing file/item and updating pages locally you must upload each updated file to remote server
Recommended when only parts/sections of pages should be the same
Recommended when all pages should look the same
Pages should be based on a master file
Suitable for small web sites (less than 15-20 pages)
Recommend for larger and large web sites (more than 15-20 pages)
Suitable when you are the only one who edits and updates pages of the web site
Recommended when 2 or more people will edit and update pages
Strongly recommended when pages will be edited by Contribute users

TEM = Templates, SSI = Server-side includes, LIB = Library items
= yes, = no, = yes and no (it depends)

Where to go from here

To learn more about library items and server-side includes, search the Dreamweaver Help system (File > Help). For more information on Dreamweaver templates, visit the Dreamweaver Developer Center's Templates topic page.

Another technique for updating many pages based on making a change to one file is the use of cascading style sheets (CSS). To learn more about CSS, visit the Dreamweaver Developer Center's CSS topic page.

About the author