ssi-includesReuse website headers and menus using IIS Server-side include(SSI) files.

Many web sites need to use the same header, footer and menu for every page in the site. To avoid having to maintain duplicate elements for every page you can use a feature called Server-side includes. Server-side includes (SSI) is a feature that runs on a web server and allows you to execute commands from within your html code to dynamically alter the output of the page simliar to javascript or asp. SSI has a specific command called "include" which allows you to read html code from one page and then include it in another. In essence the server reads the html from one page and inserts it into another before serving it to the users browser. This means that you can create one page for your header, one page for your menu, and then just include them in all other content pages by using the SSI "include" command.

To use SSI on IIS 6 you need to do very little. By default, IIS is setup to process SSI commands in files ending with ".stm", ".shtm", or ".shtml". To enable SSI open IIS Manager, select Web Service Extensions, select  Server Side includes and click Allow. (see screenshot below)

 iis-ssi server side includes

Once SSI is enabled, the server will process SSI commands found in ".stm", ".shtm" and ".shtml" files. To make use of these commands you need to save your webpage using one of these extensions.  As an example you could create a file called “myarticle.shtml” and include the following html code:

<!--#include virtual="header.html"-->
<!--#include virtual="rightmenu.html"-->

<p> Welcome. This is some text after the header and menu </p>

The include commands are shown in bold. The effect of the first command listed is to insert the html code found in header.html directly into the original page before sending it on to the users browser. In the “header.html” file you might have the following code:

<img src="mysiteheader.png"/>
<li><a href="home.shtm">Home</a></li>
<li><a href="about.shtm">About</a></li>
<li><a href="forum.shtm">Forum</a></li>
<li><a href="contact.shtm">Contact</a></li>

This html text will be inserted exactly, as is, into the original page. This means that you only need to use a few include commands in each of your web pages to append your headers, footers and menus. It also means that you only need to modify the “header.html” file to affect the header on all pages of your site. Using Server-side includes in conjunction with Cascading Style Sheets (CSS) makes maintaining the content and style of your site much easier because you only need to modify a few key files to transform your entire site.


Tags:  ssi, server-side includes, iis, header, footer, menu, website, css, frames, webpage