What is SSI
Server Side Include
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 that calls the include file. Any change in server side includes will reflect on all the pages that call them. 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 needs to make the changes, save and upload the corresponding include file and not the many files using it. In a nutshell you just can't do without them in professional web design!
Prerequisite Knowledge
This tutorial teaches you how to create server side includes or SSI files and thus assumes you are able to open and use a website editor software (e.g. Adobe Dreamweaver).
You Are Here ::: Home >> Free Tutorials >> Dreamweaver Tutorials >> Server Side Includes (SSI)
Create a SSI file
How to create a server side include
-
Create a file to contain the reusable code in the language of your choice, that is, with the extension .htm, .html, .asp, .php or .aspx
Very Important: If you are using highly confidential information like your database connection string or some business logic, in your include file then make sure the include file is named .asp, .aspx or .php so that no one can open the include file and see your code. -
Remove any <html> <head> or <body> tags created and only place your code to be called and save the file.
-
You cannot use include files directly in HTM or HTML files, you can use them only in dynamic pages like SHTML, ASP, PHP pages, ASP.net, etc. that support include files.
SSI Code
Include SSI Files
Lets look at how to directly include a SSI file into a page. Open the page
that will use include and add the following code in the appropriate
place in your code view:
ASP.net, ASP or SHTML: <!--#include virtual="/path_relative_to_site" -->
PHP: <?php include("../path_relative_to_document") ?>
jQuery Load
The latest coding method to load the content of a file directly into an element in the web page is using the jQuery library's load function. The web page calling the function can be a simple HTML page too. We recommend storing the data to be loaded inside include files (without seperate HTML tags) and then calling the file via jQuery.
JQuery: $("#divID").load("/path_relative_to_site");
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 onwards). In the pop-up window that appears select your include file, give the path as relative to Site Root and click OK. We mostly add SSI code into the website's Dreamweaver Template that stores the website's design structure so that every page using the template calls the include file. Of course individual pages too can call additional include files when required.
Alternative to Frames
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 and they are problem prone. 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. SSI files can be used as an effective alternative to frames by loading the HTML from a different include file using JQuery when you want the content in your page to change.
We hope you have found this time saving tip useful. Read our article on Using Templates in Dreamweaver (Another big Time saving tip!).
Software Required
Adobe Dreamweaver (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 4-8 | Dreamweaver CS3 | Dreamweaver CS4/CS5/CS6Note: The instructions in this tutorial are same across all Dreamweaver versions listed above; Screenshot images (if any) may differ. Recommended Version: Dreamweaver CS6