Creating and Using Frames

Introduction to Frames

All right, now here's a warning. Before you try to understand anything on this page, make sure that you are comfortable with everything else that is explained on Em's Quick-Build Web Guide!
I'll be honest with you...frames aren't that easy to understand. Read the entire page before you try anything. If you have trouble:

Don't feel stupid. Frames are difficult - most people have trouble!
Slow down. Read this over a few times and try to make sense of it.
If all else fails, e-mail me.

There is an easy way to avoid the trouble of frames...don't use them! You can get the same look by using tables - this other site LOOKS like it uses frames, but it's setup using a table with different width columns!

How frames work

Now that I've made you terrified to begin, let me ease your mind.
I am NOT going to explain in minute detail how to contruct complex frames for your homepage. Frames are best used in moderation, otherwise the results can look messy.
With most pages that successfully use frames the screen is only split into two frames: one on the left for the contents, and one (larger one) on the right for the main pages. This is what I will explain at this site.
For further details on complex frames, try some of the HTML help sites listed on the "what next?" page.

Now, I'm going to explain a bit about what frames actually are.
Frames allow you to divide your homepage into two sections like windows. And just like windows, you are able to see different scenes through them, depending on what you are looking-out at.
The structure for the frames is created in your "index.html" page (the first one that loads when you view your homepage) and links are made to all the other pages from here.

Note: the index.html page ONLY includes the frame tags - NO TEXT SHOULD BE WRITTEN HERE AS IT WILL NOT BE VISIBLE!!!

Text should be written in separate HTML pages and linked as explained later.

Em's Quick-Build Web Guide appears to have two frames. I'll refer to these as the left-hand frame and the right-hand frame. The left-hand frame is for the contents list, and ALWAYS stays visible. The contents page is the ONLY page that is linked to the left-hand frame.
The right-hand frame is given the general name "mainframe" (although you can name it anything you like) and you can link anything to appear in this frame.
For example, as you click on the different topics on the left of the screen, a new page is linked to the mainframe and appears here. This is because the site-builder has created links to these pages using the basic instructions given on the "links" page of this site.
Pretty cool, huh?

Creating Frames

OK. Here are the tags that you should use to set up frames. I will explain how to use the frames in the next section.
Note that I have given you two options to choose from. The only difference is that the first one has a border, whereas the second one doesn't.
I recommend you either copy the tags very carefully, or cut & paste them to your "index.html" page.

Option One - with a scroll-bar

Don't worry too much about what this actually means! Basically, it says that you want to create two frames on your page: one of them will take-up 20% of the screen (the left-hand frame) and the other will take-up 80%.
You'll notice that is says: "scrolling=yes". This allows your browser to create a scroll bar down the side of the page if it's needed.

Option Two - without a scroll-bar

Note that this does not allow a scroll-bar to be created and does not include a border.

OK. Now you have your frames set up, how do you use them?

Linking pages to frames

You'll notice in both of the options above I have coloured sections of the tags. This is to make it easier to explain. The tag requires you to specify the names of the HTML documents that you want to appear on the screen when someone first downloads your homepage.
In both cases, the name of the document that appears in the left-hand frame is in red. In this example, it is called "contents.html". This can be changed to match whatever name is relevant to your site.

The page marked in green is the one that will originally appear in the right-hand frame (here it's called "start.html"). Change this so it is relevant to your homepage.

The tag marked in blue (mainframe) is the name I gave to the right-hand frame. This can also be changed to anything you like. It is this bit that will allow you to link to other pages.

Let me explain...

When you create basic links from one page to another (as explained in "links"), you simply insert:

When you create a link in a homepage that has frames, you have to tell your browser WHERE you want the new page to appear. This is called the target point.
If you have set-up your frames as above, using the word "mainframe", you have to tell your browser that you want the new page to appear in the frame that you have called "mainframe". We do this by adding on to the original link tag as follows:

Summary of Frames

Therefore, the steps to creating and using frames are as follows:

Set-up your "index.html" page using one of the options given above. Make sure that the names marked in red, green and blue matched the names of the HTML documents in your homepage.
Create lots of great pages for your Homepage site.
Create a page called "contents.html" which contains a list of all the pages you want to link to. Create links to these pages, remembering to include the target point name as shown above.

Word of warning

Be careful when you insert links to other people's pages...unless you enter a special tag, their site won't appear properly!
To correctly link to another site, use the following tag:

Notice that the target given here is NOT the usual, "mainframe". Instead, this new tag means that this page will be linked to correctly.
This MUST be used everytime you link to something that you don't want to appear in the right-hand frame.

Good luck with your frames!

LinkExchange Member

Free Home Pages at GeoCities

This page hosted by Get your own Free Home Page