|  A
key element in any content design is to try and allow new
content to be easily integrated into the existing structure.
If possible the pages should be structured into sub-WWW
domains. For example on my site I have sub-WWW domains for
CNDS,
NOS,
Code
Snippets, and so on. These are described as parent
pages, and a new page becomes a child of the parent. The
overall index page is the Master, and integrates with the
parents.
Each child page has a template which is borrowed
from the parent, and often contains navigation elements
which either lead back to the parent or have an integrated
child menu structure, so that it is possible to move to
any one of the children. This page, itself, is like this
structure, as it is possible to navigate to any one of the
children from this page.
So how is it possible to create a dynamic
menu structure? One of the best ways is to use JavaScript
which creates the basic elements of the navigation, and
then put it in a file. All the documents can then refer
to this, so that any new additions will be automatically
updated in all of the pages which reference the JavaScript
file. For example in the pull down menu at the top of this
page I have created a JavaScript file with:
|
document.write("<form>");
document.write("<select name='menu1' onChange=MM_jumpMenu('parent',this,0)>");
document.write("<option value='design_tips.html'
selected>Home</option>");
document.write("<option value='design_tips01.html'>Paint
Strokes</option>");
document.write("<option value='design_tips02.html'>Focal
point graphics</option>");
document.write("<option value='design_tips03.html'>Xmas</option>");
document.write("<option value='design_tips04.html'>Sharp
graphics</option>");
document.write("<option value='design_tips05.html'>Distorting
graphics</option>");
document.write("<option value='design_tips06.html'>Mouse-over
events</option>");
document.write("<option value='design_tips07.html'>Enhancing
metafiles</option>");
document.write("<option value='design_tips08.html'>Bullets</option>");
document.write("<option value='design_tips09.html'>Graphic
file formats</option>");
document.write("<option value='design_tips10.html'>Opacity</option>");
document.write("<option value='design_tips11.html'>Column
corners</option>");
document.write("<option value='design_tips12.html'>Transparancy</option>");
document.write("<option value='design_tips13.html'>Lines
in tables</option>");
document.write("<option value='design_tips14.html'>Cut-out
graphics</option>");
document.write("<option value='design_tips15.html'>Dynamic
HTML</option>");
document.write("<option value='design_tips16.html'>Message
boxes</option>");
document.write("<option value='design_tips17.html'>Lines
in diagrams</option>");
document.write("<option value='design_tips18.html'>Scaling
graphics for text</option>");
document.write("</select>");
document.write("</form>");
|
I then refer to it in the page with:
| <script
language=JavaScript src="design_tips.js"></script> |
This produces the following:
To add this page I simply add the following
line to the JavaScript file:
| document.write("<option
value='design_tips19.html'>Designing for easy configuration</option>"); |
To add this page I simply add the following
line to the JavaScript file:
| document.write("<option
value='design_tips19.html'>Designing for easy configuration</option>"); |
|