Server Side Includes are files that have some commonly used code that can be reused by many pages in your site. When you use a SSI file the server takes the entire content of the file and inserts it into the page, replacing the include code. As an example, imagine you have a large portal web site with links at the top, bottom and sides common to all pages (or a section of pages). To make the site easy to maintain you can have the header, footer, right menu and/or left menu as include files. So when there is a change to be made you just need to make the changes, save and upload the corresponding include file and not the many files using it.

Software Required

Adobe Dreamwever (Macromedia Dreamweaver prior to version 8). Please check out the compatible versions listed in the box below. Since this tutorial series covers the core functions of Dreamweaver to create a server side include (SSI) file, mostly any version of these software should be fine.

Compatible Versions of Dreamweaver for this Tutorial

Dreamweaver MX/MX 2004 | Dreamweaver 8 | Dreamweaver CS3 | Dreamweaver CS4
Note: Instructions remain same across all versions listed above, though some visual interface images might differ.

Prerequisite Knowledge

This tutorial teaches you how to create a server side include (SSI) file using Dreamweaver and thus assumes you are familiar with some design software, even if you are new to Adobe Dreamweaver. However be assured that our detailed instructions can be followed by even a total novice.

You Are Here ::: Home >> Free Tutorials >> Dreamweaver Tutorials >> Server Side Includes (SSI)

How are Server Side Includes better and different from frames?

Though frames are sort of similar to Server Side Include files, we do not recommend their use as not all browsers support them. In frames each frame is a separate page with its own <html><head><body> tags (unlike SSI where they cannot have these tags) and is called in the main page where the frames are defined.

Create your own SSI file and call it by using the given code

Create a file which contains the reusable code with the extension .htm, .html, .asp or .php
Very Important: If you are using highly confidential ASP/PHP code (or any other web technology), like your database connection string or some business logic, in your include file then make sure the include file is named .asp/.php so that no one can open the include file and see your code.
You cannot use include files in HTM or HTML files, You can use them only in SHTML, ASP, PHP pages, etc. - that support include files.
Now go to the page that will use the include and add the following code in the appropriate place:
SHTML or ASP: 
PHP: <?php include("../path_relative_to_document") ?>

Calling Server Side Includes into your page using Dreamweaver

In your page, keeping your cursor in the place where the include file should come, Click on Insert > HTML > Script Objects > Server Side Includes (for MX 2004) or Insert > Server Side Includes (for Dreamweaver 4). In the pop-up window that appears select your include file, give the path as relative to Site Root (for ASP) and click OK.

We hope you have found this time saving tip useful. Read our article on Using Templates in Dreamweaver (Another big Time saving tip!).

We would love to hear your comments and any suggestions on future tutorials we can add to this section. Thanks!

Bookmark & Share

Bookmark and Share this web page.