7. Frames

7.1 Frame Structure

Frames provide a way of dividing up the client's browser window into a separate section. Each section having its own HTML document.

The frame setup (in the file wwtime.htm that you link to above) is given by the following code:

<HTML>
<HEAD>
<TITLE>Frame Time</TITLE>
</HEAD>


<FRAMESET COLS="20%,80%">
	<FRAME SRC="wwsmall.htm" NAME="small">
	<FRAME SRC="wwbig.htm" NAME="big">
</FRAMESET>

<NOFRAMES>
	Unfortunately, your browser does not support frames.
	Click on the link below to go to a non-framed version
	of this page.
	<A HREF="wwbig.htm">You've been framed!</A>

</NOFRAMES>
</HEAD>

Notice that the <BODY> and </BODY> tags are not used in this page where the framesets are created!

The left hand frame comes from the file wwsmall.htm which contains this code:

<HTML>
<BODY>

<HR>
<CENTER>
<FONT FACE=TIMES NEW ROMAN
SIZE=+7><I>I</I></FONT>
<FONT FACE=TIMES NEW ROMAN
SIZE=+2><I>ndex</I></FONT>
</CENTER>
<HR>

<BR>

<FONT FACE=TIMES NEW ROMAN>
<I>

<OL>
<IMG SRC="images/math1.gif">
<LI><A HREF="wwbig.htm#Web3"
target="wwbig">Web3 section</A>
<LI><A HREF="wwbig.htm#Web4"
target="wwbig">Web4 section</A>
<LI><A HREF="wwbig.htm#Web5"
target="wwbig">Web5 section</A>
<LI><A HREF="wwbig.htm#Web6"
target="wwbig">Web6 section</A>
<LI><A HREF="wwbig.htm#Web7"
target="wwbig">Web7 section</A>
<LI><A HREF="wwbig.htm#Web8"
target="wwbig">Web8 section</A>
<IMG SRC="images/magglas1.gif">
<LI><A HREF="wwbig.htm#Web11"
target="wwbig">Web11 section</A>
<LI><A HREF="wwbig.htm#Web12"
target="wwbig">Web12 section</A>
<LI><A HREF="wwbig.htm#Web13"
target="wwbig">Web13 section</A>
<LI><A HREF="wwbig.htm#Web14"
target="wwbig">Web14 section</A>
<IMG SRC="images/owl2.gif">
<LI><A HREF="wwbig.htm#Web15"
target="wwbig">Web15 section</A>
<LI><A HREF="wwbig.htm#Web16"
target="wwbig">Web16 section</A>
</OL>

When you're done just click on the 'Back' arrow of your browser until
you get back to the tutorial.
</I>
</FONT>

</BODY>
</HTML>

In this case, the right hand frame is just a conglomeration of some Web files used in this tutorial, I have just stuck everything into the file wwbig.htm.

The <FRAMESET> and </FRAMESET> tag pair have a COLS command which determines the initial way in which the frames divide up the screen. In our case, the left hand frame (wwsmall.htm) takes up 20% of the screen and the right hand frame (wwbig.htm) 80%. By default, these can be adjusted within the browser as you may have discovered. You can specify column and row sizes in pixels if you wish e.g. COLS="120,*,*" ROWS="*" determines that the first column will be 120 pixels wide, whilst the remaining two columns will take up an equal amount each of the remaining space. The rows will take up as many pixels as required.

7.2 Customising Frames

By default, borders are placed between frames. In order to modify these, or remove them altogether, you use the following attributes within the <FRAMESET> and </FRAMESET> tag pair:

FRAMEBORDER="pixels" for the 3D separators.
BORDER="pixels" for the border thickness.
FRAMESPACING="pixels" to determine the space between frames. Putting a value of 0 will seamlessly join the frames.

Each frame is set up with the <FRAME> tag. The HTML file is identified by the SRC attribute, whilst the NAME attribute identifies the frame for reference. The frames provide windows to target the documents. In our case, the left hand window is targetted with the wwsmall.htm document and the right hand window with the wwbig.htm document. The window name is defined in wwtime.htm and the window targets are defined in wwsmall.htm, referencing the wwbig.htm document.

As you could see from the code earlier on, there is a NO FRAMES option for those who have browsers that do not support frames. In our example this just takes the viewer straight to the main frame (wwbig.htm), but this could be a totally separate page if you wish.

One important thing to remember is that the NAME tags are case sensitive. You may have the same word (e.g. web13) referenced when linking, but one place may have the name beginning with an uppercase letter (e.g. Web13). This is treated as a different name. This is a throwback from Unix and is a common one that could trip you up.

It is important to detail the frames in the correct order i.e. top to bottom for horizontal frames and left to right for vertical frames. If you wish for a frame not to be resized, then just insert the NORESIZE attribute. By default, scrolling is enabled for each frame, however if you are confident that all your content will fit inside each frame without scrolling, then you can switch off scrolling by typing the attribute SCROLLING="NO". You could alternatively set this to AUTO so that scroll bars are not visible unless the content extends beyond the frame window (if a lower screen resolution is used for instance), this is very useful!

If you wanted to use a number of windows for content, you would target frames (as identified by the <FRAME> tag's NAME attribute) with separate links either to separate parts of the same document as in the earlier example, and/or to separate documents.

There now follows a more complex example of the use of frames introducing some of the features above:

<HTML>
<HEAD>
<TITLE>More Frames</TITLE>
</HEAD>

<FRAMESET FRAMEBORDER="0" FRAMEBORDER="NO" BORDER="0"
BORDER="NO" FRAMESPACING="0" ROWS="90,*">
	<FRAME NAME="Top" SRC="top.htm" SCROLLING="NO" NORESIZE>

	<FRAMESET FRAMEBORDER="0" FRAMEBORDER="NO" BORDER="0"
	BORDER="NO" FRAMESPACING="0" COLS="90,*">
		<FRAME NAME="Left Side" SRC="left.htm" SCROLLING="NO"
		NORESIZE>
		<FRAME NAME="Stuff" SRC="stuff.htm" SCROLLING="YES"
		NORESIZE>
	</FRAMESET>
</FRAMESET>

<NOFRAMES>
	Unfortunately, your browser does not support frames.  Click on the
	link below to go to a non-framed version of this page.
	<A HREF="noframe.htm">No Frames Version!</A>
</NOFRAMES>

</HTML>

An example of the code for one of the frames, in this case the top bar, is as follows:

<HTML>
<HEAD>
<TITLE>Top Frame</TITLE>
</HEAD>
<BODY BGCOLOR="FFAADD">

<H1>Top Frame</H1>

</BODY>
</HTML>

The other frames are very similar. Click on More Complex Frames to the above code in action. I have put a little colour to the Top and Left-hand frames so that you can see that they are different pages which are seamlessly joined without any borders.

As you examine the code you will see that there are two Framesets created. The first one is designed to have two rows, one that is 90 pixels high and the other can be any height depending on the screen resolution. The first frame is the top bar, whilst the second frame is not a frame but is the second frameset.

The second frameset has two columns. The first column is 90 pixels wide and perhaps can be used for a menu. The second column can be any width and is more suitable to be used for content.

Notice how that the top frame and left-hand frame are fixed and no scrolling is permitted. The only frame that permits scrolling is the one that is likely to contain the content. None of the frames can be resized and the the borders between the frames are seamless. The BORDER and FRAMEBORDER attributes have been entered twice for each frameset to cater for both the Internet Explorer and Netscape parsers.

8. Forms

Home

Disclaimer