Web Tool Bag  
Home · Articles · Downloads · Discussion Forum · Web Links · News Categories · Synonyms DatabaseJuly 18 2024 05:53:18
Discussion Forum
Web Links
News Categories
Synonyms Database
Users Online
Guests Online: 1
No Members Online

Registered Members: 856
Unactivated Members: 118
Newest Member: lakim
Forum Threads
Newest Threads
Error: Cannot find m...
Uncaught Error: _reg...
Module build failed:...
mochi script questions
Hottest Threads
Installation [12]
Any questions and... [5]
Captcha picture d... [4]
Integrate with Vi... [4]
Mods: Sucess/Than... [4]
Latest Articles
Ubuntu: the vpn conn...
Howto Install HP Pri...
ReactJS progress met...
How to Update Your Web Site Using Server Side Includes (SSI)

How to Update Your Web Site Using Server Side Includes (SSI)

Copyright 2002 Herman Drost

Recently a person asked me if I could replace 125 web pages of her web site with a new drop-down navigation system. If she had to do this manually, she would have to change each page and upload it separately to the server. This would take hundreds of hours. So, what’s the answer – use Server Side Includes (SSI)

What is Server Side Includes (SSI)? This is where you can insert one line of simple code to update any web page . This line of code “includes” any file (i.e. navigation bar, header, footer) you wish to insert in each or all of your web pages. Changing this one “include” file and uploading it to your server enables you to update your entire web site without even touching your web pages. It can now be a breeze to update page content such as headers, footers, navigation bars and changing products.

Here are the steps to take:

1. Check that your web hosting plan supports Server Side Includes (SSI)-most do.

2. Create an “includes” folder in your web site files.

3. Create the “includes” file containing your navigation bar, header, footer (or whatever file you wish to update on your site). It could be a text or html document. If it is an html file, then only copy what is between the body tags. Remove any html header, footer and body tags from your file. Name this file nav.htm.

4. Place this file in your includes folder. I also included my menu.css file (cascading style sheet) and virtualmenu.js (javascript) file in the includes folder so the file paths are clear. These are inserted between the header tags.

5. Place the following code on the particular web page where you want your navigation bar to appear.

<!--#include virtual="/includes/nav.htm" -->

I also made sure my menu.css and virtual.js files had the same file paths and placed the code for these files in the header tags of my web page (blank.shtml)

<SCRIPT language=JavaScript1.2 src="/includes/virtualmenu.js"> </SCRIPT>

<LINK REL=STYLESHEET TYPE="text/css" href="includes/menu.css">

You could create a line of SSI code for these files also. I left them as they are, because the .js and .css files are already included in the header tags of the /blank.shml page. Subscribe FREE to Marketing Tips Newsletter

6. Change the extension name (maybe it was .htm) of this web page that contains your line of code, to .shtml (in my example it’s blank.shtml).

7. Upload your includes folder and your web page (blank.shtml) to your server.

8. Refresh (right click your mouse and look for refresh) your web page to reflect your new navigation bar.

Here’s the finished page with the new drop-down navigation bar.


Now, if you wish to change the appearance of your navigation bar throughout your web site, you just need to edit one file (nav.htm file), then upload it to your server. Your changes should appear immediately on every page of your web site where you included the SSI code. Congratulations! You have just saved yourself hundreds of hours of time updating your web site.

Other resources for Server Side Includes (SSI)

Using Server Side Includes in Dreamweaver It is very easy to use Server Side Includes in Dreamweaver. Once you have made your Include file, all you need to do is click on insert > Server Side Includes, choose the file you need, make sure the path is relative to the Site Root and insert it.

Using Frontpage Includes Component http://outfront.net/tutorials_02/getting_started/includes1.htm

http://www.bignosebird.com/ssi.shtml http://www.webreference.com/programming/ssi/intro/ http://www.netmechanic.com/news/vol2/server_no8.htm# http://httpd.apache.org/docs/howto/ssi.html#configuringyourservertopermitssi

Herman Drost is a Certified Internet Webmaster (CIW) owner and author of iSiteBuild.com Affordable Web Site Redesign and Hosting  Subscribe to the “Marketing Tips” newsletter for more original articles. subscribe@isitebuild.com


Posted by admin on December 03 2006 12:27:57 7446 Reads · Print
Rating is available to Members only.

Please login or register to vote.

Awesome! Awesome! 0% [No Votes]
Very Good Very Good 100% [1 Vote]
Good Good 0% [No Votes]
Average Average 0% [No Votes]
Poor Poor 0% [No Votes]


Not a member yet?
Click here to register.

Forgotten your password?
Request a new one here.
Member Poll
Which PHP framework do you preffer?





eZ Components






You must login to vote.
You must login to post a message.

03/10/2011 18:17
Hi, How to remove Register from Login screen? I don't want them to register and have full access! if you leave register then they should not have any rights until the admin assigns them

26/09/2011 08:28
Please describe your problem with more details. Thank you.

22/11/2010 18:31
Help. There was a problem with the request; error regarding feedbackzdr form program

Custom web software development by Devzone Tech
Copyright © 2024 - www.webtoolbag.com