Among the common elements for all website pages, I have in mind those elements which are on all pages of the site, elements such as the menu, a tablet with counters, “the hat”. Often with such elements there can be BIG problems. For example, you've decided to place a new counter, you've registered and … you need to place the counter's code on all pages of your site. You will need to change the code for EVERY page, and later still upload all these pages onto your server. Or, for example, you will need to remake the navigation system or simply add a new section. And again you must adjust the code for every page.
Anyhow, let's not talk about the bad things. Let's discuss instead how it's possible to avoid them.
The most popular solution of the aforementioned problem is the use of SSI (Server Side Includes). With SSI, you can insert code from different files into any Web page. SSI is easy to use. I will give you an example:
1. We have “index.html”, in which it is necessary to constantly change the navigation menu. Let's copy the code from this menu.
2. Let's create an “.html” or “.txt” file, naming it for example "menu.txt", and let's insert the copied code into this file.
3. Let's open index.html and replace the menu code with the following line
| <!--#include virtual="menu.txt"--> |
where “menu.txt” represents a file, the code of which must be downloaded.
4. Now change the extension of the file from “index.html” to “.shtml”, in other words by default (as is correct) the server adapts SSI only in files marked with the extension “.shtml”.
That's all! Now when you need to change the menu navigation, you need only change the file “menu.txt”! Note: some hosting service providers, especially the free ones, do not support SSI. You can find out all support details from your support service.
Well, everything is simple. But there are people who have free hosting and can only dream about SSI. How can they get by? They need to use the various opportunities available to them in JavaScript. Let's say that we have a problem with the menu, as in the first case. Let's create a file named “menu.js” with such index: document.write ('text code'), where the text code is the menu code (for example). Now let's open “index.html” and replace the code with the following lines:
| <;Script language="JavaScript" src="menu.js"> </script> |
Everything's ready. Enjoy your creation . If you suddenly wish to change something in the menu, change the text in file “menu.js”.
Another way to see and use Flash. Create a navigation menu in Macromedia Flash, transforming it into an “.swf” file. In place of the old menu, place such line:
| <embed src="menu.swf" width="$" height="$"></embed> |
Where the $ sign represents the size of the “.swf” file, they need to be indicated.
It's possible to take advantage of Frames. Let's create an html-file “menu.html” and replace the menu (in “index.html”) with the following line:
| <iframe src="menu.html" width="250" height="500" scrolling="no" frameborder="0"> </iframe> |
src – a file which should be loaded
width – frame width
height – frame height
scrolling – scrollbar setting, no – hide scrollbar, yes – show scrollbar, auto – scrollbar will appear automatically
frame border – frame border setting, 0 – no border, 1 - border
But it is better not to use frames, since if you do, you will encounter all the well-known problems with search engines and old browser versions.
All of the above written material can be used not only for the navigation menu but also for the counters, “hats”, lists, and more. Good luck!
