Using Dreamweaver 8 to Insert Server Side Includes
Server side includes, or SSI's, are a way to easily add commonly used elements to all your Web pages, without having to recreate them individually for each page. A header and/or footer common to every page, a navigation system, a contact list, or any other element shared by more than one page are all good candidates for SSI. In addition to saving you the trouble of recreating the shared element on each page, using SSI also allows you to quickly make global changes to your Website. For instance, say you need to make a change in the header of your Website. If the header is pulled into your pages using SSI, you only need to make the change once, in your header file, and all pages using that file will automatically reflect the change.
Creating the File
The first step is to create the file to be included. In this example, we'll use a simple footer consisting of text links (Figure 1). Either create the footer from scratch, or cut and paste it from an existing page into a new one.
Figure 1: the footer (footer.htm)
Once you have the footer created, give it a unique name (e.g. footer.htm). Save the file.
Including the File
Go to the spot in the Web page where you want the element to appear. Go to the Common category of the Insert panel (earlier versions of Dreamweaver have the SSI icon in the Script category of the Insert panel). Choose the Server Side Include icon (Figure 2). Alternately, you can go to the Insert menu and choose Server Side Include.
Figure 2: the Dreamweaver 8 Insert panel, with the SSI icon circled in red
Upon clicking the icon, browse to the file you'd like to include (e.g. footer.htm). Click OK. The included file will now appear in the document panel (please note that it will NOT appear when the document is previewed in Dreamweaver; but will appear when the site is uploaded to the server). Save your Web page file. Repeat this process with every page on which you'd like to use the repeated element.
Virtual vs. File SSI's
When an SSI is added in Dreamweaver, the following line of code will appear:
<!--#include file="footer.htm" -->
Depending on the type of server your Web site is housed on, you may need to change this line of code by hand. Generally, for a Microsoft Internet Information Server (IIS), this line of code is fine. If the server is an Apache Web server, you will need to go to code view in Dreamweaver, and change the word "file" to "virtual", so that the line of code will look like this:
<!--#include virtual="footer.htm" -->
If you are not sure what type of server your site is housed on, ask your system administrator, or try both lines of code, and use the one that successfully pulls in the SSI.
Htm vs. Shtm
Depending on the configuration of the server, any page using SSI's may need to have the extension .shtm or .shtml, rather than .htm or .html (e.g. index.shtm; just add an "s" before the htm or html of the existing file). Again, you can ask the system administrator, but a simpler method is to try both versions and go with the one that works.
As always, if you have any questions, phone me at 719-543-2262, or email me at Jeffrey.Wood@Colostate.edu.
