I think what we'll do now is make a Framed Page from scratch. Nothing fancy, just something like this.

Before we start, let me stress... keep it simple! A site with a bunch of frames and links pointing all over the place is going to be confusing to build and even more confusing to navigate. That said, let's go to it!

First we must think about what we want the end result to be. I think a good simple design would be a banner across the top, a directory window on the left, and the main window on the right. Let's make the Master Page first.

    <HTML>
    <HEAD>
    <TITLE>A Practice Page</TITLE>
    </HEAD>

    <FRAMESET>
    </FRAMESET>

    </HTML>

Make another new folder and save this as `index.html`. Also the image we will be using for the banner is the "MY FRAMZ PAGE" image. Grab it from below and save it as `framz1.gif` in your working folder.

Divide the screen horizontally.

    <HTML>
    <HEAD>
    <TITLE>A Practice Page</TITLE>
    </HEAD>

    <FRAMESET ROWS="83,*">
    </FRAMESET>

    </HTML>

Note we get 83 by adding 8 to the height of the image (75+8=83). Also note that since we are using an absolute dimension we are including an elastic frame.

Next specify `banner.html` to go in the top frame (we will make that document in a couple minutes). Also throw in a `<FRAMESET>` tag pair because we are going to divide that bottom portion further.

    <HTML>
    <HEAD>
    <TITLE>A Practice Page</TITLE>
    </HEAD>

    <FRAMESET ROWS="83,*">
      <FRAME SRC="banner.html">
      <FRAMESET>
      </FRAMESET>
    </FRAMESET>

    </HTML>

VIEW IT
You can run this now but you'll get error messages because it's incomplete.

We will divide the bottom window into two sections. We will also specify that the left window contain `directory.html` and the right window contain `home.html`. Once again, we have not made these documents so you will still get an error message (or two) (or three).

    <HTML>
    <HEAD>
    <TITLE>A Practice Page</TITLE>
    </HEAD>

    <FRAMESET ROWS="83,*">
      <FRAME SRC="banner.html">
      <FRAMESET COLS="20%,80%">
        <FRAME SRC="directory.html">
        <FRAME SRC="home.html">
      </FRAMESET>
    </FRAMESET>

    </HTML>

VIEW IT

Since we will have our directory on the left and pages will load into the righthand frame, we should name that frame. Its the only one that will have stuff loaded into it so its the only one we really need to name.

    <HTML>
    <HEAD>
    <TITLE>A Practice Page</TITLE>
    </HEAD>

    <FRAMESET ROWS="83,*">
      <FRAME SRC="banner.html">
      <FRAMESET COLS="20%,80%">
        <FRAME SRC="directory.html">
        <FRAME SRC="home.html" NAME="MAIN-WINDOW">
      </FRAMESET>
    </FRAMESET>

    </HTML>

VIEW IT

OK. We are done with this one... for now.

<< BACK NEXT >>