HTML Frames

Frames

Frames are a very useful tool for the layout of a web page although there are a lot of older browsers out there that are not able to handle them, so this should be taken into account when using Frames.

The basic funtion is to split the main screen into two or more windows which can each be manipulated individually as if they are a screen in their own right. The uses are many and varied but just two good examples are where a site needs to display a lot of information but also wants to keep its contents section (as with this site you are presently viewing) and/or title on permanent display and where there is an on-screen order form to complete. If someone is part way through completing an order form and then wants to check some detail or other in the main part of the site, all he has to do is click on the appropriate frame to view the data, then click on the order form frame once more to return to the order form with his perviously entered data intact.

Frames are very simple but do make sure you get them right!

In a Frame document the BODY element is replaced by the FRAMESET element. This, as it suggests, defines the layout of a set of frames within a browser window. Within the Frameset are defined the Frames themselves, each referenced to the particular document file you wish to see when the Frameset first loads. Usually one of the Frames will contain a link to other document files that, when the person browsing clicks onto, will display alternative information.

Once again, let's work by example:

We want to write the code for a page with three Frames, a thin one on the lefthand side of the screen, a similarly thin one acros the top of the remaining part of the screen and the remainder of the screen. We start with:
<FRAMESET COLS=" ? , ? "> which divides the screen into two parts, and sets the widths of these parts. The easiest way is to tell the computer the actual size of Frame required:
<FRAMESET COLS="125,500"> will open two windows, one of 125 pixels width and one of 500. But, computers have many different screen resolutions so whereas this would fit exactly a screen with a width of 600 pixels, it wouldn't be much good for any other widths. To get round this problem we use the asterisk to denote "the rest of the screen". So, staying with the measurements above we would have:
<FRAMESET COLS="125,* "> which will open two windows, the lefthand one of 125 pixels width and the righthand taking up the remainder of the screen. Next we need to set whether or not the Frame has a border by typing:
<FRAMEBORDER="YES"> or <FRAMEBORDER="NO">
We now need to give the lefthand Frame a name, and tell the browser where to find the contents for the Frame. For this example we'll call it "Left" with the data in a file called left.html. Finally we need to set whether or not the Frame is scrollable which is essential if the contents are likely to be greater than the available window!:
<FRAME NAME="Left" SRC="left.html" SCROLLING="YES".
You won't be surprised to learn that after this we have to complete the frameset command with </FRAMESET> We now have:

Now we split the righthand Frame into two further screens horizontally, the top with a height of 150 pixels and the bottom the remainder. We use the same commands as before but with "ROWS" in place of "COLS" and this time we will set the main Frame to be scrollable. You will note we now have two Frame names as we need to define each of these two. There was just one before as the second Frame was to be further divided.

We now have:

NB. Because we now have two FRAMESET commands, we need two /FRAMESETs to close the commands.

Click here to see what we have achieved. Close the new screen to return here.

Why does each Frame have a name? Simple! When you set up a link from one frame, the document linked to will replace the data in that frame unless the link is directed elsewhere. So, for example, you may have a frame titled Contents with a list of topics to select which, when selected, you wish to open a document in the main Frame, called Main. In the link's anchor (A HREF=) command insert TARGET="Main" after the link name and the document will replace whatever was previously in the Main Frame:

Click here to see what we have now achieved. Once again, close the new screen to return here.

You now have all you need to write Frames-based web pages! However, we still need to address the problem of those without Frames enabled browsers. You can either ignore them, in which case they will simply see a blank screen when logging on to your site, or you can cater for them using the <NOFRAMES> ... </NOFRAMES> command. Inside this command you need a <BODY> statement and some suitable words (with a link where appropriate) explaining that the site is written for Frames so they cannot view it (and adding where they can if you have written a non-Frames version).
For example:

<BIG>This site is intended to be viewed with a frames compatible browser. Unfortunately your browser does not seem to be so equipped. Please click <A HREF="contnf.html">here</A> to continue without frames.</BIG>
</NOFRAMES>

Click here to see how a non Frames enabled browser would interpret the above. Once again, close the new screen to return here.

To link to a document that replaces all the frames (ie. doesn't just show in one of them with the other(s) unchanged), use the TARGET="_TOP" command.

There are several other commands available but, once again, not all browsers support them, and they are not really necessary. Amongst them are:

BORDER which enables you to set the border width in pixels.
BORDERCOLOR which, surprise, surprise, enables you to set a border's colour using hexadecimal numbers.
MARGINWIDTH and MARGINHEIGHT which are the thickness in pixels of the left, right, top and bottom margins respectively.
NORESIZE which prevents a viewer re-sizing your frame by clicking on the edge and dragging it.