Fire Up Your Site With Frames
Build Your Frame Page

From Linda Roeder, former About.com Guide

See More About:

Create a Basic Frame

The first thing you need to start a frame page is the frameset tag. We are going to start with a top frame so we will also need the cols tag. You will also need the frame tag to define your frame and the src tag to tell your frame which pages to show in your frame. Then we will need the noframes tag to tell people with browsers that don't read frames where to go so they can see your main page. Lastly we will need to close the frameset tag and the noframes tag.

The best way for you to learn this is to open your text editor or Web page editor and copy/paste the code into it and then open it in your browser so you can see what it looks like as you're doing it. Here is what this basic frame tag will look like:

<frameset cols="70,*">
<frame src="ntopframe.htm">
<frame src="nmainpage.htm">
<noframes>
This page is a frame. Go to the <a href="nmainpage.htm">main page</a> to see the site.
</noframes>
</frameset>

Add Fluff To Your Frame

Now that you have the basics let's add some more things to the code to make the frame look better.

These are the tags we are going to add to this code:

frameborder
scrolling
noresize

The frameborder tag will be added to the frameset tag and I am going to set the border at "1".

The scrolling tag will be added to the frame tag and I will set one of them to "yes" and the other one to "no" so you can see the difference.

The noresize tag will be added to the frame tag of both so you can see how it takes away the ability of the user to resize the page.

Here is what the new code will look like:

<frameset cols="70,*" frameborder="0">
<frame scrolling="no" noresize src="ntopframe.htm">
<frame scrolling="yes" noresize src="nmainpage.htm">
<noframes> This page is a frame. Go to the <a href="nmainpage.htm">main page</a> to see the site.
</noframes>
</frameset>

Add More Frames To Your Page

Remember in the beginning of this lesson I told you we were going to add three frames to this page? This is where we add them.

To add more than one frame to a page you need to create a frame inside your frame. We started by creating a top frame by using the cols tag. Now we are going to add a left frame and a right frame by using the rows tag inside the frame we already created.

This is done exactly the same way as the other frame except that it is inside the other frame's code. Since we will have a left frame, a right frame and a main page you will have three size numbers inside your code instead of two.

This is what the code for the new frame will look like:

Putting Together Your Frame

Now, let's put it all together. We will put this new code inside the other code. This is what the completed code will look like:

<noframes>
This page is a frame. Go to the <a href="nmainpage.htm">main page</a> to see the site.
</noframes>

</frameset>
</frameset>

Do you remember what this page looked like? Here is the link again so you can see it: Completed Frame Page

Important: The code for your frame page must be inside html tags. That means that you need <html> at the beginning of the page and </html> at the end of the page. You will also need your normal title and head tags to define your page just like any other Web page.

That's it. Have fun with your new frames.

Start Over > Learn How To Create Frames