Creating a Common Navigation Panel without Frames.

question: I have started creating a personal site and I was wondering how you create a page so it is sectioned in two (just like this site) I know you can use frames, but I have heard that frames are bad due to browser compatibility and the fact that most people simply don't like them. (Any comments on this would be appreciated). Currently I am using tables so I can use the left for navigation and the right for content, but the problem is every time I make a change to the navigation, I have to go into each page individually to update them. I know there has to be a better way to do this. Kathleen.

Answer: My site used to use a table and background image to give the two section effect.

The way to avoid coding the navigation into every page is to use an external javascript to create the part of the page that contains the navigation. What you do is to place the html that handles the navigation into javascript document.write statements which you place in the external javascript. Then all you need to do is to call that javascript from the appropriate spot on each page.

I am not opposed to the use of frames but I have noticed that many people do not code their frames site properly and quite often when you move on to the next site that they link to you find that the new site displays in just one frame from the previous site. The main disadvantage of frames is that search engines will not find any of your pages except the frame definition by following links from other sites as the frame definition does not contain links for the engine to follow. The only way other pages would be found by the search engine is if they are linked to outside of frames (which defeats the purpose of the frames navigation).

Using a Javascript for navigation will also not provide links for the search engines to follow but you can get around this by creating a site map page with links to all of the pages on your site and placing a link to this page on your home page. Then when you add a new page you only have to update the navigation javascript and the site map page not every page on the site.

To implement a javascript navigation menu, each page contains the following Javascript call

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

and the nav.js Javascript contains a number of entries such as

 document.writeln('<div class="centre"><font size="-1"> <a href="software.htm"> Software</a></font></div><hr />')

The text in red is different on each entry with one entry per link to be displayed.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow