Frames provide a method of dividing a web page into key sections for displaying multiple HTML pages at once. If you've browsed the web for a while, you've probably seen sites that use them.

What are the advantages?

The biggest advantages of using frames is to save loading time. Things like navigational bars that allow your users to get around your site can be loaded once into a frame and never again, thus saving time.

What are the drawbacks?

The biggest drawback is the overhead in maintaining the frames. You will need to know exactly how each HTML page on your web site will be loaded. As you add and remove pages from your web site, you will begin to notice the everlasting headache of remembering just which frame files show up where and where the linked documents from a particular page should show up.

Frames also make bookmarking web pages virtually impossible. Since a framed web site uses a master file to lay out the initial web pages to form a single web page, a bookmark can only track the outter frameset. This means, the initial pages that were loaded. Some web browsers have put in a lot of work to story individual frame states, but nothing solves the problem of trying to email a friend a URL from a framed web site. If you've even clicked a single time, you've typically moved off the front page and down into the deeper content into the web site. You'll notice that the URL on your web browser will not have changed even though you've loaded new content. When you email your friend the URL at the top of your window, they will not be able to start where you left off.

How to start frames

Before starting frames you need know that in order to display multiple frames, you need to have a starting point where the original set of HTML documents are laid out. When setting up frames, the HTML browser keeps track of the HTML documents by using "names" for each of the frames. As each frame is created, it is given a name. That name is used as a "targeting" mechanism to allow the browser to know where to display future HTML pages.

How to make frames

The rules to making frames are very simple. However, it's rather like the rules to chess, they can get very complicated the more you use them. The basic approach goes something like this:

You can break your screen Vertically (up and down) or Horizontally (side to side) to display multiple HTML pages. Since HTML files are read from top to bottom, you must decide which frame to create first, and which ones to create second (if any). For instance, if you only wanted two frames, than you would only have to divide the window once, in half. If you wanted to divide the window a couple times in different directions (say, some up and down and some side to side), you would divide the window first in the direction of the largest frames and second for the smaller sub-frames. Here is an illustration to better demonstrate what we're talking about.

Unlike most HTML pages, Frames require a separate HTML page to setup the Frames. This file tells the browser how to divide the current window, and which HTML pages to load into each FRAME. When you want your site to begin frames, whether that be on the homepage or some subpage, you will link or anchor to this FRAMESET HTML page to tell the browser how to layout the Frames. WARNING: If you link a "framed" HTML page (meaning an HTML page that is already being displayed in a FRAME) to a FRAMESET HTML page, you will get a subset of frames inside the linking frame. This can cause some browsers to crash, and/or confuse your users considerably. It is vitally important that you maintain a constant knowledge about where your HTML pages are supposed to be displayed.

Okay, now that we've attempted to scare the living daylights out of you, lets move on! (by the way, we're glad you're still here, frames are cool as heck)

How to create a FRAMESET

The only part that is difficult about creating a FRAMESET is determining how you would like to divide the frames. Once you've decided this, the only challenge is to tune the size of each frame. So how do you divide frames? Easy, know the following rules:

ROWS - Mean left to right, or horizontal
COLS - Mean top to bottom, or vertical

If you wanted to divide your screen from left to right, you would use a ROWS tag to indicate the direction of division. Example:

Here is a FRAMESET that divides the screen horizontally into two equal sized frames.

<FRAMESET ROWS="50%, 50%">
<FRAME SRC="link to the HTML page to show up in the top frame" NAME="top">
<FRAME SRC="link to the HTML page to show up in the bottom frame" NAME="bottom">
</FRAMESET>

Now let's take the example of dividing the screen vertically, but add a little spin to it. One of the most common uses of Frames is to create a navigational bar on the left side of the screen to help the user get around without having to load large graphics each time the page changes. Here is a typical division for that purpose:

<FRAMESET COLS="150, *">
<FRAME SRC="URL to the HTML page containing the navigational links on the left side" NAME="left">
<FRAME SRC="URL to the HTML page to main content page on the right side" NAME="right">
</FRAMESET>

Notice the change from the ROWS tag to the COLS tag. This causes the division to go vertical instead of horizontal. Also notice that we changed the "50%, 50%" to "150, *". This means instead of dividing the screen into two equal (50%) halves, we're making the first frame exactly 150 pixels wide and use the remaining space for the second frame on the right.

Now I know what you're thinking, "thats really pretty HTML friend, but where do I put in my HTML page?" Good question! The answer might surprise you. Remember in normal HTML pages they have something called a BODY tag? Well, a frameset replaces the entire BODY section of an HTML page. The reason for this, is that there is no HTML text inside a FRAMESET page. It only tells the browser how to layout the frames and which HTML pages to put in each one of them.

A standard FRAMESET page would look like this:

<HTML>
<HEAD>

<TITLE>My First Frameset Page</TITLE>

</HEAD>

<FRAMESET ROWS="50%, 50%">

<FRAME SRC="link to the HTML page to show up in the top frame" NAME="top">
<FRAME SRC="link to the HTML page to show up in the bottom< frame" NAME="bottom">

</FRAMESET>

</HTML>

Now for most of you, these simple examples will solve several of your cases, since most sites using frames today, don't go over two. But what if you wanted to use more than two frames, and possibly mix their orientations? Like having some vertical and other horizontal? Actually it's very simple as we will demonstrate.

How to create multiple framesets

Sometimes in life, it is easier to learn by example, so here is the code first:

<FRAMESET COLS="150, *">

<FRAMESET ROWS="50%, 50%">

<FRAME SRC="link to the HTML page to show up in the top frame" NAME="top">
<FRAME SRC="link to the HTML page to show up in the bottom frame" NAME="bottom">

</FRAMESET>

<FRAME SRC="link to the HTML page to show main content page on the right side" NAME="right">

</FRAMESET>

To review: The above example will first divide the browser into two vertical halves. One 150 pixels wide and the other taking up all the remaining horizontal space to the right of the left column. Once that initial division has been made, the first column on the left will be divided into two equal sized 50% halves using the second frameset.

As you can probably tell, this process can get very detailed in a short period of time. The best method to learn frames, is to simply play with them.

How to link HTML pages to frames

So now that you've figured out frames, you still need to know how to control where an HTML page shows up. This is done using a new HTML command or tag called TARGET. It is a simple addition that you add to your existing links or to new links that you create. Its works by using the names that you gave each frame as you created them. Remember the NAME tag that is inside the FRAMESET? Well the browser uses this name tag to determine where to load the new HTML page. A standard link will look something like:

<A HREF="URL to somewhere" TARGET="left">

Notice that we've added the new TARGET tag just at the end of the anchor tag? This link is telling the browser to place the URL into the frame that is labeled "left." Its important to note that frames can be called anything. Just because we named ours to match their physical location on the screen, doesn't mean we had to. We could have named our frames "Larry," "Moe," or "Curly," the browser doesn't care, as long as they are unique! If you name two frames the same, you'll run into crashing problems with some browsers and confuse the rest.

NOTE: If you do not provide a TARGET tag, any files that you link to will be automatically loaded into the frame that the user is clicking in. This can be handy in some cases, but dangerous in others. Proceed with caution.

Special TARGET locations

If you play with frames long, you'll soon find yourself at the point where you might want to get rid of them and go back to no frames. Well when you've already divided the browser up into frames, its not obvious on how to get back to a regular browser. This is why the makes of HTML and frames, have come up with a set of TARGET tags that reset the browsers environment. Here is the table of special destination tags.

Use these TARGET tags to get the noted effects.

Things to know about frames

One thing to keep in mind when creating frames, is font size. Fonts (unfortunately) vary in size on different platforms and even in different resolutions on the same platform. Because of this difference, there are sometimes problems in determining just how large to make a frame, because you can never rely on what type of font the user has defaulted their browser to.

The best method for getting around this problem is to generate artwork with all the text you have to fit in tight places. If you don't mind if the text scrolls down, then there is no need. In case you are trying to make a navigational banner, you'll want to make sure that the text fits correctly, in that case, you can use pre-drawn artwork that fits exactly to the pixel.

Recommended Books:

 

©Copyright 1996-06, TWIN MONOLITH. All Rights reserved.