 |
Reuse
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)
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:
<head>
<title>MyArticle</title>
</head>
<body>
<!--#include virtual="header.html"-->
<!--#include virtual="rightmenu.html"-->
<p> Welcome. This is some text after the header and menu </p>
</body>
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"/>
<ul>
<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>
</ul>
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.
References
http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS
http://en.wikibooks.org/wiki/Active_Server_Pages/Server-Side_Includes
Tags: ssi, server-side includes, iis, header, footer, menu, website, css, frames, webpage