
Instructions for webmasters..

This site uses consoles, frames and javascript for 
navigation.  Don't worry, it's really not that difficult.  A 
console is basically just a little browser that we've 
removed the menus, toolbars, and location lines from.  

In the directory you uncompressed this archive in you 
should see four items.

Top (directory) -- This directory holds all the menus 
and reviewes
Start.html  -- sample code to start the archive.
Webmaster.txt -- this document
Read.me -- instructions for personal use.

Start.html contains the code to start the browser.  
We'll go over how to drop it into your pages later.  
Right now we're just going to go over the basic format 
of the archive.

Start.html opens a console that loads the webpage 
top/frame.html.  See the (top) directory?  Well there's 
a file in there called frame.html, and all frame.html 
does is create a frame in the console.  The top frame 
loads navbar.html (in the Top directory) and the 
bottom frame loads intro.html (basically a title page 
with copyrights.).

Navbar.html is what does all the dirty work.  It 
contains two drop-down menus that link to all the top 
20 lists in the archive.  The first drop-down menu 
points to the month, the second drop-down menu 
points to the year.  Here is the code you'll see if you 
edit it.

<form name="dummy">
<select name="month" 
onChange="jumper(this.options[this.selectedIndex].va
lue+document.dummy.year.options[document.dummy
.year.selectedIndex].value);">
<option value="12-">December
<option value="11-">November
   <option value="10-">October
   <option value="09-">September
   <option value="08-">August
   <option value="07-">July
   <option value="06-">June
   <option value="05-">May
   <option value="04-">April
   <option value="03-">March
   <option value="02-">February
   <option value="01-">January
   <option value="intro-" SELECTED>Credits
</SELECT>
<select name="year" 
onChange="jumper(document.dummy.month.options[
document.dummy.month.selectedIndex].value+this.op
tions[this.selectedIndex].value);">
<option value="97.html">1997
<option value="96.html" SELECTED>1996
</SELECT>
</FORM>

It looks horribly confusing until you realize the only 
thing that really counts is what is contained in the 
VALUE fields.  For instance if the user select 
"December" and 1996 is in the other box then the 
script will join together the value of "December" (12-) 
to the value of 1996 (96.html) to form a file name 
called 12-96.html.  Navbar.html will then load 12-
96.html and place it in the bottom frame automatically.  

It really doesn't matter what you call December.  If 
you want to get cute you can change it to read..

<option value="12-">Santa's Month

it doesn't matter because the value is still 12- and that 
means that the script is still going to be able to come 
up with 12-96.html.

You've probably figured out by now that the top 15/20 
lists are labeled (month)-(year).html!  Congratulation's 
you're right.  04-97.html is the top 20 list for April 
1997.  03-96.html is the top 15 list for March 1996.  All 
these lists are stored in the "Top" subdirectory", the 
same place that navbar, frame, and intro is stored.

The purists are probably groaning that it's not year 
2,000 compliant!  Relax!  The archive will still work on 
January 1 2000.  The solution is to change the names 
of the year 2000 lists.  Working with a hypothetical top 
20 for January 2000 we'd create a file called.

01-2000.html

Then in the "YEAR" drop down menu we'd add.

<option value="2000.html">2000

So selecting January (01-) and 2000 (2000.html) will 
give us a file name of 01-2000.html which 
coincidentally is the name of the top 20 list we just 
created!

BUT this approach has drawbacks.  It's January 2000, 
or January 1999, or even November 1998 (as of this 
writing), what happens if the user selects December 
1998, or December 1999 or December 2000?  

Well for starters don't create options for years that 
haven't started yet.  For the years that have started 
create 12 files (01-99.html,  02-99.html, 03-99.html, 
etc) Just make them basic HTML pages with a note 
that says something like "No top 20 list has been 
generated for this month yet".  You can get cute and 
chide your visitor for expecting psychic abilities, 
whatever turns you on.

Ok, now on to the top 20 files.  Let's work with 01-
96.html the first top 20 in the archive.

Ok, the #1 story for the month is (in html)

1. "<A 
HREF="http://search.dejanews.com/getdoc.xp?AN=2
32193492" target="newbrowser">Lawyers in 
Love</A>" by A. Van Peebles  <A 
HREF="javascript:startRemote('rtop/01-96-
01.html')">(Review)</A><BR>


The first <A HREF> link leads to the story (assuming 
we can find a copy in the archives).  But notice the 
"target=newbrowser" tag.  This is very important.  
Remember, the list is in an itty-bitty-tiny winodw so we 
want to give the user more space to load the story.  
the "target=newbrowser" tag will open a new window 
and load the story.  When the user is done, the user 
closes the new browser and the top 20 list is right 
there for him/her to find another great story (stamina 
willing of course).

The second <A HREF> link leads to the review of the 
story.  This is a javascript command which opens a 
new console and displays the review.  The reviews 
are stored in the rtop directory (rtop stands for 
reviews-top, yea I know, I wasn't being very creative 
at the time).  So when the user clicks on this item's 
review link it will open a new console window (the 
current top 20 list goes to background) and the new 
console will load rtop/01-96-01.html.  

You've already figured out the naming conventions of 
the reviews are (month)-(year)-(rank).html so 01-96-
01.html would be january-96-#1 story that month 
review.html in plain English.    A year 2000 review 
might read 01-2000-01.html.

But what happens if Celeste ties two stories?  It's 
been known to happen where two stories occupy the 
same numerical rating.  Here you have two choices, 
either keep numbering sequentially, that is if there are 
two #20's then label one 01-2000-20.html and label 
the other 01-2000-21.html.  You're not bound to 
numbers though so you can do things liks 01-2000-
20-1.html and 01-2000-20-2.html or 01-2000-20a.html 
or 01-2000-20b.html.  Whatever you're most 
comfortable with.

The review window also has a script that will 
automatically close the review window after the user 
is done with it.  Let's say the user opens the review, 
then opens the story.  The review window 
automatically closes.  The reason for this is if we 
leave the window open then it kinda gets pushed to 
the background behind a bunch of other windows.  
User goes to open a new review and the review 
window gets the new review but it's still hidden behind 
all the other windows the user has open.  By forcing 
the window to close we're ensuring that when the user 
wants to see a review a new window will pop up and 
will be on top of all the other windows.  The code for 
this is in the review's <body> tag with the onBlur 
javascript command (onBlur basically means when 
the user is using another window do this.).

And finally we come to the style sheets which are on 
all the pages of this site.  (yes I know I should have 
made them external style sheets, if you want to go 
through the 500+ files and change them you're more 
than welcome too but remember to send me a copy :-
)

<STYLE TYPE="text/css">
   <!--
         a {
                color: #0000ff;
                Font-Size: 11pt;
                font-family: Ariel;
                text-decoration: none;
            }

         Body {
                Margin-Left: 20pt;
                Margin-Top: 5pt;
                Margin-Right: 20pt;
                Margin-Bottom: 5pt;
                Font-Size: 12pt;
                Font-Family: Times;
            }
   -->
   </STYLE>

The first style (a) sets the style for the <A HREF> 
links.  Basically we say we want the color to be blue, 
the font to be Ariel and 11 points and the text 
decoration to be none.  Text decoration: none is how 
we get away with having links without the cliche 
underlines.

The second style (Body) sets the style for the entire 
page.  Basically it defines top/bottom/left/right margins 
and a Times font that's 12 points large.  

The values are pretty easy to figure out and modify.  
Again, this would have been better in an external style 
sheet, but an internal style sheet also offers flexibility 
to differentiate the individual pages.


And finally, now that you know how to change 
everything (break everything?)  it's time to show you 
how to link into the archive.  

Here's the directory structure.

<your directory>
	+ <top>
		+<rtop>

In <your directory> find the page you want to start the 
archive from and insert this code before the </HEAD> 
tag.

<SCRIPT LANGUAGE="JavaScript">

// Code to open small client window on request

         var remote = null;
function startRemote(url) {
            remote = window.open('', 'top20', 
'width=450,height=450,resizable=0,scrollbars=1,statu
s=0');
            if (remote != null) {
               if (remote.opener == null) {
                  remote.opener = self;
               }
               remote.location.href = url;
            }
         }
      // -->
</SCRIPT>

This is the javascript to start the console..

Next, somewhere in your html code create this link.

<A HREF="javascript:startRemote('top/frame.html')">
   Change this to whatever you want.
</A>

As long as the "top" directory is in the same directory 
as the page that's starting the archive this will work 
out just fine.  

That's basically it.  Other people may have modified 
your copy of the archive (hopefully they modified or 
added to this document as well) so you'll have to put 
your HTML skills to good use to really get the feel for 
it.  But on the whole it's a fairly easy system to learn 
and master.  

Have fun and good reading.

BitBard (bitbard@newsguy.com, sandman@bitsmart.com --
http://www.bitsmart.com/~sandman or 
http://extra.newsguy.com/~bitbard or 
http://www.asstr.ml.org/~BitBard) 



