FRAMES



Setting up a Frameset

Frames are a useful way of presenting information to the reader. They allow for you to maintain a static HTML front end, whilst other parts of the page change, and for the user to adjust the arangement of the screen to their satisfaction. You must be aware, though, that many browsers do not support frames, so we must make allowances for those users.

The way that a frame works, is that it replaces the <body> section of an ordinary HTML document, so you do not have to define your body preferences here. Instead, the frames document that you create will draw its source from other HTML files, and place them inside the windows that you create in the browser window, and those are the files in which you must define the body attributes.

So, instead of a <body> and </body> document, you have a:

<frameset> and </frameset>

document.

Just like the BODY tag, there are preferences that you can set inside these tags:

So a frameset could look something like this:

<frameset rows="100,*,100" border=0 frameborder=yes bordercolor="#000000">

...Frame Information ..

</frameset>

You will notice one thing about this, and that is that although there is a declaration for the rows, there is no declaration for the columns. This is because you cannot define rows and columns in the same frameset tag. You will need to include a separate frameset tag to work inside one of the frames defined in the first frameset tag. This is called nesting, and we will look at this in more depth in a minute.


Defining a Frame

Once you have declared your frameset, you must define the properties of the individual frames. This is done using the following tag:

<frame>

The properties of this tag are as follows:

So a potential frame set up might look something like this:

<frameset cols="20%,80%" border=0 frameborder=2>
<frame src="frame1.html" name="left" scrolling=no noresize bordercolor="#000000">
<frame src="frame2.html" name="right" scrolling=yes>
</frameset>

There are several things that you should understand about this. First, the way that a browser allocates frames means that the frame that has been named "left", as it is declared first, will indeed end up being put in the left hand frame, thus the second frame, named "right" will end up in the right hand frame. This is because it allocates the frames just like you would read a book. left to right and top to bottom. So, for example, if we were to exchange the "cols" parameter for a "rows" parameter, then the frame labelled "left" would end up in the top frame, and the frame labelled "right" would end up in the bottom frame.


Frame Structure

This leads us on to a very important structuring technique, that you will need to build frames that consist of both rows and columns of frames.

To define a frameset with both horizontal and vertically partitioned frames, you must put one frameset inside another, just like you put the FRAME tag inside a frameset. The only thing that you must remember is that once you've declared the first frameset, the browser will put all subsequent frames and framesets into the window that it's ready to work on next. That is, if you are defining a page with a vertical frame on the left hand side as an index, for example, and then want to split the larger frame on the right into a top frame and a bottom frame, you would have to allocate the FRAME information in the left hand frame before allocating the FRAMESET in the right hand frame. Then you could proceed to allocate the FRAME information for the second frameset in the same way. You can have as many sub-framesets as you want, but remember that you've only got a little bit of space to play with in a browser window.

So here's one way that you could perform the above suggested layout for a frames page:

<frameset cols="100,*" border=1 frameborder=1>
<frame src="left_index.html" name="index" scrolling=auto>
<frameset rows="*,90" border=1 frameborder=1>
<frame src="main_frame.html" name="main" scrolling=auto>
<frame src="bottom_bar.html" name="bottom" scrolling=no>
<!-- End Second Frameset --></frameset>
<!-- End First Frameset --></frameset>

[Note that you must have the right number of </frameset> tags, and remember that the last one opened is the first one closed, and so forth, as I have commented in the code]


Targetting Links

Now that you can create almost any frames page (there are other, more powerful applications of frames, which involve Dynamic HTML [dHTML], but we shan't discuss that here), the last thing that you need to know is how to link between them. We've already seen the option that you need to use. Inside the <a> tag, or the <area> tag, we can use the parameter "target". You already know that if you set:

target=display

Then a new browser window is opened. All we do is put the target parameter in as follows:

target="Frame Name"

So a link from the side frame in the above example, that changes what appears in the main frame, would appear in the HTML document that fills the side frame (here, it's left_index.html) would look like this:

<a href="main_frame2.html" target="main">Link</a>

If you don't put in a target for the link, then the HTML document that you call will be opened in the same frame as the link that you clicked on, just like it would if you click it in a non-frames window.

This is all fine, until you want to go to a page that you don't want to appear inside the frames document. In these cases, you must set the target as "_top":

<a href="http://www.otherpage.com/" target="_top">Link</a>

And that is how you use frames. Often, for most websites, you will only need to build the one frames document into which to place all the information on the page. Remember that the frames document must be the document that the browser looks at when viewing the page, so it's best to name it as your index page.


No Frames!

The last thing you need to know is that once you have finished defining your frames and framesets, you ought to put in:

<noframes> and </noframes>

To allow people who cannot see frames to have something in their browser window. For browsers that do not support frames, the HTML between these tags will be what is interpreted, instead of the framesets. So in between you may want to put in a link to a version of the page that doesn't have frames, or you might want to put in a link to somewhere where the user can download a frames capable browser, if they have a platform on which it will run.

For example:

... FrameSet ...

<noframes>

Sorry, your browser does not support frames. Either visit our non-frames version of this page <a href="noframes.html">here</a>, or download a frames capable browser from <a href="http://home.netscape.com/">Netscape</a>

</noframes>




Now have a go at the exercise for this section.

Once you have done that, move on to the next tutorial page.


[Index] [Introduction to HTML] [Building an HTML Document Template] [Basic Text Formatting] [Image Includes] [Anchor Tags] [Tables] [Advanced Text Formatting, plus Other Tags] [Lists] [Client-Side Image Maps] [Very Basic JavaScript] [Frames] [Forms] [Conclusion] [Reference List] [Glossary of Terms]

Return to Front Page