What we have done is build a framed page where you can change two of the frames with one mouse click. Now we'll get into expanding our creation. There are two ways we can expand... We can add links, or add frames.
First we will add a link... like this.
You'll need to whip up 2 more target docs. Save this as al_frank.html...
<HTML>
<FONT SIZE=3>Al's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#33CCCC">
<FONT SIZE=4>Frank</FONT>
</HTML>
And save this as al_steve.html...
<HTML>
<FONT SIZE=3>Al's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#33CCCC">
<FONT SIZE=4>Steve</FONT>
</HTML>
Next, add to the directory frame (direct.html)...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>
<A HREF="javascript:multiLoad('al_frank.html', 'al_steve.html')">Al's friends</A><P>
</BODY>
</HTML>
VIEW IT
All this says is, if "Al's friends" are clicked on, pass al_frank.html & al_steve.html to the function (multiLoad()).
Let's do one more. Once again, we need 2 more target docs. Save the following as jake_bob.html...
<HTML>
<FONT SIZE=3>Jakes's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFCC66">
<FONT SIZE=4>Bob</FONT>
</HTML>
And save this as jake_bub.html...
<HTML>
<FONT SIZE=3>Jakes's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFCC66">
<FONT SIZE=4>Bubba</FONT>
</HTML>
Now add to direct.html...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>
<A HREF="javascript:multiLoad('al_frank.html', 'al_steve.html')">Al's friends</A><P>
<A HREF="javascript:multiLoad('jake_bob.html', 'jake_bub.html')">Jake's friends</A><P>
</BODY>
</HTML>
Not that hard, was it?? Didn't think so.
The last thing we'll learn how to do is increase the number of frames. I think the easiest way to go about that is to go back to when we only had 2 links in our directory frame. So, edit out Al's friends and Jake's friends so you're left with this.
What we'll do is divide the right side into 4 frames, like this.
First we'll need to make a few more target docs... again.
Save this as hugh_jim.html...
<HTML>
<FONT SIZE=3>Hugh's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE=4>Jim</FONT>
</HTML>
This as hugh_bil.html...
<HTML>
<FONT SIZE=3>Hugh's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE=4>Bill</FONT>
</HTML>
This as ron_paul.html...
<HTML>
<FONT SIZE=3>Ron's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFCC">
<FONT SIZE=4>Paul</FONT>
</HTML>
And this as ron_sam.html...
<HTML>
<FONT SIZE=3>Ron's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFCC">
<FONT SIZE=4>Sam</FONT>
</HTML>
You should now have in your folder (among other things)...
1) the master page (index.html)
2) the directory page (direct.html)
3) eight target docs
- hugh_ed.html
- hugh_cal.html
- hugh_jim.html
- hugh_bil.html
- ron_mike.html
- ron_pete.html
- ron_paul.html
- ron_sam.html
Next we'll redo our master page. I think it would be best if we started it from scratch. So, load index.html and erase it all. Paste in the following to get us started...
<HTML>
</HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
Divide the window vertically. In the left we will place direct.html and the right we will divide further.
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET>
</FRAMESET>
</FRAMESET>
VIEW IT (keep in mind that this is under construction)
Now divide the right side in half horizontally, putting a FRAMESET tag pair in both the top half and bottom half.
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET>
</FRAMESET>
<FRAMESET>
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
VIEW IT (no visible changes)
Now we'll specify that each of those frames is further divided in half vertically.
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
</FRAMESET>
<FRAMESET COLS="50%,50%">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
VIEW IT (no visible changes)
Plug in your FRAME tags. (We'll fill them in a minute.)
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
<FRAME>
<FRAME>
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
Specify which docs load into the frames first.
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
<FRAME SRC="hugh_ed.html">
<FRAME SRC="hugh_cal.html">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC="hugh_jim.html">
<FRAME SRC="hugh_bil.html">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
And, most importantly, name the frames. (once again, it is only necessary to name those frames which will change.)
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="50%,50%">
<FRAME SRC="hugh_ed.html" NAME="Frame_A">
<FRAME SRC="hugh_cal.html" NAME="Frame_B">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC="hugh_jim.html" NAME="Frame_C">
<FRAME SRC="hugh_bil.html" NAME="Frame_D">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
VIEW IT (no visible changes)
Next, we'll start tinkering with direct.html. This is how it should look right now...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>
</BODY>
</HTML>
First, add to the links so a total of four docs get passed to the function.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html', 'hugh_jim.html', 'hugh_bil.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html', 'ron_paul.html', 'ron_sam.html')">Ron's friends</A><P>
</BODY>
</HTML>
Next, add to the function...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers
function multiLoad(doc1,doc2,doc3,doc4) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
parent.Frame_C.location.href=doc3;
parent.Frame_D.location.href=doc4;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html', 'hugh_jim.html', 'hugh_bil.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html', 'ron_paul.html', 'ron_sam.html')">Ron's friends</A><P>
</BODY>
</HTML>
... and that's about it.
I want to say one more thing before I end this little piece. Although it's easy enough to create frames and fancy ways to navigate them, always remember that someone is going to have to find their way around your creation. Remember also that although you know your site intimately, your visitors probably don't. If your site becomes too confusing to navigate, people will just surf right on outta there.
Good luck!