COMMON FILE TO MANY PAGES

A common file to many pages is one file that can be easily (1) changed and (2) used on any other web pages. This concept can be use to place any HTML code in any position on any page you wish. The only restrain is that the file can not contain any Javascript code.

As an example of this is a SIDE BAR MENU. A sidebar menu is one that is on either the left or right side of the screen and the rest of the screen is taken up by the page content. This could just as easily be a menu at the top of pages, a drop down menu like the one I have at the upper left of all my pages, or a simple message in a table.

Another example of using a file that can be seen on many pages are the small table boxes on the right hand side of my main Help Page. I use this box on many of my help pages.

A excellent use of the common file approach is the FREE navigation menu, HV MENU which allows you to make just one common drop down or fold out menu that can be used on all your pages.

NOTE: Although this page will explain how to use a sidebar menu that is common to many pages, the same concept could be use to make a menu that is at the top of the page, e.g. my drop down menu above left. Or to put text messages on all pages.

There are four steps to making a common file, in this example it will be a sidebar menu.

  1. Design The Page
  2. Make The Menu
  3. Position Page Parts
  4. Putting It All Together

DESIGN THE PAGE

We will be using a sidebar menu on the left hand side of the screen. You have already seen the example of a left hand sidebar menu page and this is how it was designed.

(5,5) This is where the logo will go. The logo will be approximately 750X100 pixels.
(5,120) The menu will be here (130, 120) All page content will be in this area.

The content could extend below the bottom of the menu.

The notations, (X, Y), e.g. (130,110), indicates where, in relationship to the LEFT SIDE and the TOP, the content of each part of the page will appear. For example, the logo will be 5 pixels from the left side and down 5 pixels from the top of the screen. The menu will also be 5 pixels from the right side but down 110 pixels as the logo is 750X100 pixels. The page contents will be 130 pixels from the left side and down the same distance as the menu 110 pixels.

MAKE THE MENU

All that we do is make a normal menu and then put this menu in a special file in a special way. The sample sidebar menu uses these links:

What You Would See The Code
Buttons
Frames
IFrames

Graphics
Forms

Backgrounds

<a href="helpbuttons.htm">Buttons</a>
<br><a href="helpframes.htm">Frames</a>
<br><a href="helpiframe.htm">IFrames</a>
<p><a href="helpgraphics.htm">Graphics</a>
<br><a href="helpforms.htm">Forms</a>
<p><a href="helpbackgrounds.htm">Backgrounds</a>

The special file consists of three lines only!

<!--
document.write('.... your code here ... ')
-->

Please note that in order for this special file, and your sidebar menu to work there must be only three lines in the file! This means the unlike normal html code you must eliminate any carriage returns in the code. For example, in the above code, there are six carriage returns.

We open a new html file, remove any html code that may be there, and put the code in as described above. I am using my free html editor, HTML-KIT which has the word-wrap on. I first make the 3 lines as shown above and then copy and paste the link code in the 2nd line. The file now looks like this:

Note there are 8 lines in the file. So I have to get rid of the extra carriage returns, i.e. make the 2nd through the 7th line all one line.

I removed the carriage returns by (1) position my cursor at the end of the second line and press the DELETE KEY until the continue arrow shows just below that, i.e. I now have 7 lines with a continuation after the 2nd line, (2) continue doing this for the rest of the code until there are only 3 lines of code.

Note the red box on the left hand side that shows the line numbers and that the 2nd line has 3 continuations. This means there are no carriage returns on the 2nd line, a critical requirement of this file.

Now I save this file in the same folder as my web pages and name it mymenu.js or any file name you wish. Just be sure it has the .js file extension. The .js simply means it is now a JavaScript file.

POSITION PAGE PARTS

One last thing to learn, how to "position" things on a web page. For this we will use a bit of CSS, Cascading Style Sheets and the HTML tag, <div> ... </div>, which just mean "division", i.e. you are dividing up the screen or placing things in a certain position on the screen.

The basic positioning code is:

<div style="position:absolute;left:X;top:Y"> ... your code here ... </div>

Remember at the top of the page we talked about position, i.e. (X, Y). Now we are going to use the numbers shown above, i.e. (5,5), (5,120), (130,120).

The sample sidebar menu has a logo at the top. If your page will not have a logo then your adjust the remaining locations according, e.g. (5,120) => (5,5), (130,120) => (130,5).

The final code for the standard page is shown below.

<div style="position:absolute;left:5;top:5">
<img src="name-of-your-log.gif" border=2>
</div>
<div style="position:absolute;left:5;top:120">
<SCRIPT language="javascript" src="mymenu.js"> </SCRIPT>
</div>
<div style="position:absolute;left:130;top:120">

.. you page content here ....

</div>

Every page on your site would use the above code and you just replace .. you page content here .... with the HTML code for that page!

BUT WAIT! We are not quite done yet! We can improve on this method!

PUTTING IT ALL TOGETHER

Above you saw the code for the standard page. Wouldn't it be better to put all the code above the .. you page content here .... in the .js file? Then, we would only have to:

  1. put the call to the .js file in a new page,
  2. add a </div> at the end of the page.

Doing the above, the .js file will now look like this:

To add the .js file to your page when it loads use this code and place it within your html page where you want the menu to appear.

<script language="javascript" src="name-of-file.js"></script>

And the actual code for the sample page would now look like this:

Finally, a standard page using the above, where you only have to add the page content, would look like this:

Using this "standard page" you could make hundreds of other pages, all having the same logo at the top and a menu on the left side. Then, anytime you can change the menu in this one .js file and all the hundreds of other pages using the .js file will automatically have the correct, new, changed, menu!

This is exactly how I made all my pages EXCEPT, rather than using a sidebar menu, I used a drop down menu!!!

Any problems/questions email me using the link at the top right of this page.