Now we'll begin writing the code!

<<>html>
<<>frameset cols="120,*">
<<>frame src="index.html">

Note: This puts our index file into the column on the left.

Now for the second column, we'll tell the computer to put in 2 rows.

<<>frameset rows="90,*">
<<>frame src="banner.html">

Note: This put our banner file into the top row on the right.

<<>frame src="main.html">

Note: This puts our main file into the bottom row on the right.

We need to do one more thing to that last <<<>frame src> before we go on. Since we want our URLs to load into the main (or biggest part of the frames window), we need to "name" it, so we can refer back to it later. This is what it will look like:

<<>frame src="main.html" name="main">
<<>/frameset>
<<>/frameset>
<<>/html>
Put together, our code now looks like this:
<<>html>
<<>frameset cols="120,*">
<<>frame src="index.html">
<<>frameset rows="90,*">
<<>frame src="banner.html">
<<>frame src="main.html" name="main">
<<>/frameset>
<<>/frameset>
<<>/html>

View it

Note: If you don't see all three files (ONE,TWO,THREE) , hit your back key and click on view it until all three show up. You'll find as you are editing your frames pages, the reload button will be used quite a bit!

You may have noticed that I already had some files made so that I could show you how the frames page would look. You will need a banner file and a main file. These two files will be set up just like normal. The only thing that "might" be different is if you _don't_ want your frames page to scroll, as I didn't on most of my pages except this tutorial. If that's the case, then you will want to play around with how long you are making your page with the contents you put in them. You'll understand what I mean as you start to make your own pages. ~grin~

The index page is just a little bit more complicated, but not much.

Here is an example code for your index page:

<<>html>
<<>body bgcolor="#000000">
<<>center>
<<>hr>
<<>a href="main.html" target="main"><<>font size="1" color="#ffffff">Home<<>/font><<>/a><<>p>
<<>hr>
<<>a href="visit.html" target="main"><<>font size="1" color="#ffffff">Visit<<>/font><<>/a><<>p>
<<>hr>
<<>a href="here.html" target="main"><<>font size="1" color="#ffffff">Here<<>/font><<>/a><<>p>
<<>hr>
or visit
<<>hr>
<<>a href="http://members.tripod.com/gifs123/index.html" target="_top"><<>font size="1" color="#ffffff">Draac's<<>/font><<>/a><<>p>
<<>hr>
<<>a href="http://www.dogpile.com/" target="_top"><<>font size="1" color="#ffffff">Dogpile<<>/font><<>/a><<>p>
<<>hr>
<<>/center>
<<>/body>
<<>/html>

View it

Did you notice the difference in where the <<>target="main"> and
<<>target="_top"> took you? If not, go back and reread page one! ~grin~

Now I'm going to add a Banner and something more interesting to the Main page.

View it

You've just made you first Frames Page! All that's left is some adjusting of the size and adding your own special elements.

Have fun with it and don't be afraid to experiment.

If you have enjoyed this tutorial, please tell me. You can either sign my GuestBook or you can E-mail me.

Top of Page

Page two Page one Home
This page hosted by

Get your own Free HomePage