Design  | SFC  |  NOS  |  Code |  Diary  | WWW |  Essay |  Cisco | [Home]

 

  

WWW pages

Tip of the week
(Plus and minus graphics for expansion and contraction)
Two of the most useful graphic items are actually two of the smallest graphics items that you are likely to use. These are:
- The plus symbol
and:
- The minus symbol
These are used to great effect in menu items which are expanded and contracted, such as:
Main Menu Item
Other Menu Item
     Item 1
     Item 2
     Item 3
Another Menu Item
     Item 1
     Item 2
     Item 3
If you're lucky enough to be using Microsoft Internet Explorer, then you'll be able to expand and contract the following menu option:
and you can see the usage of the plus and minus graphic.
[JavaScript.com]
An intensive site, which is a little too cluttered (and, the last time I looked, has a little too much blue in the page).
[JavaScript src]
A similar site to the JavaScript.com site, but provides a good way to search of JavaScript code.
[DOC JavaScript]
If you're sick, you call the doctor. Well if your sick of JavaScript, maybe you should go here, and get your medicine (more JavaScript, sic!).

Related links

 

 

 

WWW pages of the past (Aug 2001 )

There are various stages of evolution for a WWW site. Initially in the first generation of a site it is easy to create simple pages, and link them with hypertext links. In the second generation there tends to be more themes for the pages, and several pages may have the same menu options. This is normally achieved by cutting and pasting the hypertext link from one page to another. Once there becomes more than 20 pages which use these common links, it becomes difficult to update all the pages which use the options, especially if the pages also use other menu options. Thus the third generation of the site occurs when the menu options are created from a single source and then linked to all the pages which use them. This makes updated much simiplier, and also allows for small refinements to be contained to single files.

Some of the pages have now reached the phase where I've got to create single reference points for the menu options. For this I've been working on dynamic menus, which can be easily generated over many pages. For example this page has a dynamic menu on the right-hand side, which shows the dates of this the updates to these pages. Unfortunately it becomes difficult to keep this menu up-to-date when new pages are added (it can be achieved with cut-and-paste, but as the number of related pages increases it becomes more difficult to do this). Thus it is better to create a dynamic menu system, which updates all the related pages. For this I've added the JavaScript file in this, and other related pages:

<script language=JavaScript src="menu_www_past.js"></script>

and the contents of the menu_www_past.js file is:

document.write("<a href='www_pages_of_the_past.html' >Objectives</a><br>");
document.write("<a href='www_pages_of_the_past_mar1999.htm' >March 1999</a><br>");
document.write("<a href='www_pages_of_the_past_oct1999.html'>Oct 1999</a><br>");
document.write("<a href='www_pages_of_the_past_aug2000.htm' >Aug 2000</a><br>");
document.write("<a href='www_pages_of_the_past_nov2000.htm'>Nov 2000</a><br>");
document.write("<a href='www_pages_of_the_past_dec2000.htm'>Dec 2000</a><br>");
document.write("<a href='www_pages_of_the_past_jan2001.htm'>Jan 2001</a><br>");
document.write("<a href='www_pages_of_the_past_may2001.htm'>May 2001</a><br>");
document.write("<a href='www_pages_of_the_past_june2001.htm'>June 2001</a><br>");
document.write("<a href='www_pages_of_the_past_july2001.htm'>July 2001 (Pt I)</a><br>");
document.write("<a href='www_pages_of_the_past_july2001pt2.htm'>July 2001 (Pt II)</a><br>");
document.write("<a href='www_pages_of_the_past_july2001pt3.htm'>July 2001 (Pt III)</a><br>");
document.write("<a href='www_pages_of_the_past_july2001pt4.htm'>July 2001 (Pt IV)</a><br>");
document.write("<a href='www_pages_of_the_past_july2001pt5.htm'>July 2001 (Pt V)</a><br>");

The line:

document.write("<a href='www_pages_of_the_past_july2001pt5.htm'>July 2001 (Pt V)</a><br>");

simple prints July 2001 (Pt V).

It is thus easy to add a new option, as each new menu option just requires the addition of two new lines (which can be 'cut-and-pasted' from a previous version). For example, the lines added for this page are:

document.write("<a href='www_pages_of_the_past_aug2001.htm'>August 2001</a><br>");

If you want to create the JavaScript, the best way is to create the menu option. Then, in Dreamweaver, select the hypertext menu options, and then use Edit->Copy HTML. Next create a JavaScript file in Dreamweaver (with a .js file extension), and Edit->Paste HTML into this file. After this we just have to add:

document.write("

at the start of each line, and:

");

at the end of each line. Finally you need to change all the references to double quotes (") to single quotes (') within the document.write() string. Thus:

document.write("<a href="www_pages_of_the_past_nov2000.htm">Nov 2000</a><br>");

will become:

document.write("<a href='www_pages_of_the_past_nov2000.htm'>Nov 2000</a><br>");

The easy way to do this is with the Edit->Find and Replace option. With this all the options of:

.htm"

can be changed to:

.htm'