Web Hosting by Sitebilder, an Affordable, Reliable Host

Frames

Nothing on the internet has caused as much controversy as frames, except perhaps cookies. The use of frames can either make for a clean, well laid out website or they can cause users plenty of headaches; it all depends on whether they are used with good taste or abused out of ignorance or downright malice.

While writing this article I surfed onto a popular freeware graphics site and after three attempts to go to another site and finding myself still trapped in their frameset, I finally went to my own homepage in order to break free. Usually a thing like this happens because of a lack of knowledge on the part of the webmaster, but sometimes, as in the instance above, it is simply done out of avarice. Here are some of the pros and cons:

On the negative side...

Frames often confuse older browsers and don't display right at all.

Because of new search engine practices, using a frameset may cause you to be placed lower in the ranks.

Framed sites take longer to load; since each frame is a separate html document, your browser has at least two and usually three connections to make.

If the average user wants to bookmark any page other than your main one, they won't be able to.

On the other hand...

You can set up a redirect to a non-frames version of your site for users who can't access or don't like frames.

An intelligently and considerately designed frames site can be very attractive.

If your site requires a lot of links to other pages, frames will let you put a 'permanent' menu in one frame and the pages can be loaded in another.

Frames can be very useful for specialized sites, such as scientific or reference sites.

Frames can provide a fast handy way to reload images for sites that use web cams or slideshows.

With all that said, let's get on with learning how to make frames. This page is a frame, in a sense. Frames are nothing more than regular html documents, or 'pages', linked together to provide for two or more windows on a site. We'll start out with a two-frame page.

For a two-frame page we will need three regular html documents. The third one will be our Master frameset, or Master page, if you like. This master frame is the one that sets up the other two frames; this master frame is not visible to the viewer. It is used to make the other two frames visible on the screen, and the commands to control the size and placement of the two visible frames are contained in it. This master frame is the one that will be 'hit' when someone clicks on a link to your website. When the user's computer connects with the master frame, it will 'read' the html tags in the document and set up the framed page for the user to view.

Let's start by making the master frame. It's format is like any other html document, except for the fact that in a master frame the <BODY> tags are not used; in place of these tags we have to use the <FRAMESET> tags like so:

<HTML>
<HEAD>
<TITLE>Master Frame</TITLE>
</HEAD>

<FRAMESET>
</FRAMESET>

</HTML>

Fire up your browser for offline viewing, and your favorite TEXT editor (Not one of those do-it-all-for-you super dooper web page designers) and copy the code above into your editor. Now save the pasted code into your working folder as "index.html."

If you are beginning to get lost at this point, then maybe it's a good idea for you to go through the Basic HTML tutorial here if you haven't already done so, to hone up on the fundamentals.

Okay then, if you're still with us, we will go ahead and make our other two documents for the frameset, the ones that will actually show up on the user's screen. Copy and paste the code below.

<HTML>
<HEAD>
<TITLE>My Left Frame</TITLE>
</HEAD>
<BODY>
My Left Frame
</BODY>
</HTML>

Now save this document into the same folder, as "left.html". When you have it saved, then copy this code below, and save it in your folder as "main.html".

<HTML>
<HEAD>
<TITLE>My Main Frame</TITLE>
</HEAD>
<BODY>
My Main Frame
</BODY>
</HTML>

Now, if you have 'main.html' saved, reload 'index.html' into your text editor. And while we're talking about text editors, I'll recommend the one I use which was given to me by my brother Bob. It's called NoteTab, is a programmers' editor and is used by many of the pros, and you can get a free copy of it here.

Okay, then. If you have 'index.html' loaded, add the following code to it and then re-save it.

<HTML>
<HEAD>
<TITLE>Master Frame</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME src="../left.html">
<FRAME src="../main.html">
</FRAMESET>
</HTML>

Now if you've re-saved your code, fire up your browser and use it to open the document "index.html" and you should see something like this:

My Left Frame

My Main Frame

Before we go on, let's have a little rundown on how the code in the master frame, 'index.html', does the job. Here's the code again so you don't have to scroll back up, and I'm going to dispense with the extranneous tags.

Notice the percentage values in the first line; these will always correspond to the order of the FRAME SRC tags just below them. The first percentage, 20, corresponds to the first 'FRAME SRC' listed below, which is 'left.html' and sets the width of this frame to 20%. After the separating comma (which is essential) the second percentage value corresponds to the second 'FRAME SRC' definition for 'main.html'. If you have 3 or more frames, the same pattern would be followed.

I named these three documents arbitrarily and with the purpose of keeping things apparent, but you can give your documents any name you like. One more thing to note however, is that you can shorten your URL a little by knocking off the 'index.html' on the end, because in the absence of this the browser will automatically look for a document by that name. If you give the master frame any other name, this won't work.

You can give the percentages any value you want, as long as they add up to 100%. You can also set a value in pixels, which we'll go into later. However, it's a good idea to have at least one of your frames set to a horizontal percentage value to accommodate different screen sizes.

Let's try a frameset with three windows; this is probably the most common type.

....Continuing

HOSTING: