Frames Tutor
How to load 2 (or more) frames with one mouse click
part 2

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>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#33CCCC">`

<FONT SIZE=3>Al's friend</FONT><BR>
<FONT SIZE=4>Frank</FONT>

</BODY>
</HTML>

VIEW IT

And save this as `al_steve.html`...

`<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#33CCCC">`

<FONT SIZE=3>Al's friend</FONT><BR>
<FONT SIZE=4>Steve</FONT>

</BODY>
</HTML>

VIEW IT

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>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFCC66">`

<FONT SIZE=3>Jakes's friend</FONT><BR>
<FONT SIZE=4>Bob</FONT>

</BODY>
</HTML>

VIEW IT

And save this as `jake_bub.html`...

`<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFCC66">`

<FONT SIZE=3>Jakes's friend</FONT><BR>
<FONT SIZE=4>Bubba</FONT>

</BODY>
</HTML>

VIEW IT

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>

VIEW IT

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>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">`

<FONT SIZE=3>Hugh's friend</FONT><BR>
<FONT SIZE=4>Jim</FONT>

</BODY>
</HTML>

VIEW IT

This as `hugh_bil.html`...

`<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">`

<FONT SIZE=3>Hugh's friend</FONT><BR>
<FONT SIZE=4>Bill</FONT>

</BODY>
</HTML>

VIEW IT

This as `ron_paul.html`...

`<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFCC">`

<FONT SIZE=3>Ron's friend</FONT><BR>
<FONT SIZE=4>Paul</FONT>

</BODY>
</HTML>

VIEW IT

And this as `ron_sam.html`...

`<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFCC">`

<FONT SIZE=3>Ron's friend</FONT><BR>
<FONT SIZE=4>Sam</FONT>

</BODY>
</HTML>

VIEW IT

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>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>`

</HTML>

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>

</HTML>

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>

VIEW IT

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>

VIEW IT

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>

VIEW IT

... 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!

Back to the tutorial.

PROFESSIONAL WEB DESIGN