Server Side Includes and javaScript Menus

-- Server-side Includes --

Server side Includes is an interesting concept. This website uses it for the menu on the left side and the footer at the bottom. There is one copy of the menu HTML that the server "includes" in the file when it is opened. Right now, this site has 14 pages. Each of them would have to be edited if I wanted to change something. With the use of "Server side Includes", I have two files (the menu and Footer) that are loaded as each page is opened. So to make a change to the pages, all I have to do is change two files. This works well for Headings, Footers, and of course Menu's. Be aware that not all servers will do includes.

How is it done? This code is inserted where the menu will be:

Notice it is written as a remark. See the section Getting Started for explanation of "remarks"

Then, in a folder named "includes" is a simple text file named "menu.txt" that contains the HTML code for the menu.


<p><b>Menu</b></p>

<ul>

	    <li><a href="index.html">Home</a></li>

	    <li><a href="start.html">Get Started?</a></li>

	    <li><a href="graphics.html">Add Graphics?</a></li>

	    <li><a href="css.html">Use a cascading Style Sheet?</a></li>

	    <li><a href="sound.html">Add Sound?</a></li>

	    <li><a href="folders.html">Use Folders?</a></li>

	    <li><a href="includes.html">Use Server-side Includes?</a></li>

	    <li><a href="neat.html">Add Neat Extras?</a></li>

	    <li><a href="put.html">Put It All on the Web?</a></li>

	    <li><a href="def.html">Word Definitions.</a></li>

	    <li><a href="mail2.html">Contact Webmaster?</a></li>

</ul>

When someone views the pages, the text from the Menu file and the Footer file is "included" in the page file at the places designated. If I find it's necessary to add another page, One file is changed, and every page shows the change. The Footer only needs changed once a year to change the date. Neat Huh?

When you use this concept, you will find that when you view your pages locally, the include doesn't work, or maybe your server doesn't do Includes.

The solution for this is to use javaScript to insert the menu. It will allow you to view the menu both on the web and locally.

Add this to your page to bring up the menu:

<script type="text/javascript" src="includes/menu.js"></script>

menu.js will look like this:

<!--
function writeJS(){;

var str='';

str+='<p><center><b>Menu:<\/b><\/center><\/p>';

str+='<ul>';

str+='	<li><a href="index.html">Home.<\/a><\/li>';

str+='	<li><a href="start.html">Get Started?<\/a><\/li>';

str+='	<li><a href="graphics.html">Add Graphics?<\/a><\/li>';

str+='	<li><a href="css.html">Use a Cascading Style Sheet?<\/a><\/li>';

str+='	<li><a href="sound.html">Add Sound?<\/a><\/li>';

str+='	<li><a href="folders.html">Use Folders?<\/a><\/li>';

str+='	<li><a href="tables.html">Work with Tables?<\/a><\/li>';

str+='	<li><a href="includes.html">Use Server-side Includes?<\/a><\/li>';

str+='	<li><a href="neat.html">Add Neat Extras?<\/a><\/li>';

str+='	<li><a href="links.html">HyperLinks<\/a><\/li>';

str+='	<li><a href="put.html">Put It All on the Web?<\/a><\/li>';

str+='	<li><a href="soft.html">Software Reviews<\/a><\/li>';

str+='	<li><a href="backup.html">Backing It Up<\/a><\/li>';

str+='	<li><a href="def.html">Word Definitions.<\/a><\/li>';

str+='	<li><a href="templates.html">Page Templates.<\/a><\/li>';

str+='	<li><a href="mail2.html">Contact Webmaster.<\/a><\/li>';

str+='<\/ul>';

str+='<br><br>';

document.write(str);

}

writeJS();

//-->

It isn't necessary to actually write all this code, although with some study, it's not hard to see how it is formatted. However, there is a website that will do it for you. All that is necessary is to paste your HTML into a place, and out comes your ready-made error-free javaScript.

The place to go is: www.accessify.com

I've discovered that the javaScript will work online also, so I'm in the process of doing away with the includes files and just using the javaScript, both online and locally. (one less file to mess with.)

How Do I .........??

-- Server-side Includes --