Frames allow the placement of multiple web pages in a single window. This is often used for navigation bars and other static content you want to be in view while the user is at your site.
When working with frames, you reference the HTML document with the Frames command, and that document then references the rest. The only visible information from the page with the frameset command is the title, which remains until you leave the frames.
For example, this page is made up of two frames, the one on the left which stays the same while you are on this frames page selection, and the one this text is in, which changes when you click on a link on the left.
Example one shows a simple frames arrangement using two frames:
<html>
<head>
<title>Frames Example One</title>
</head>
<!-- HTML Frames Example One -->
<frameset cols="50%,50%">
<frame src="Border.html">
<frame src="Content.html">
</frameset>
</html>
The Blue text in the HTML code on the left is the frame definition code. The <frameset> Tag defines that there are to be frames on this page. The cols="50%,50%" after the <frameset> tag tells the browser that we want the window to be split into two columns, each of which is 50% of the available width.
The next tag, <frame src="Border.html"> tells the browser that the left frame of the <frameset> contains the document "Border.html". The next <frame> tag tells the browser that the right frame is to be "Content.html".
The final Blue line of text tells the browser that all of the frames are defined.
*NOTE* There are NO <body> tags in the frames HTML document.
Example two expands upon example one:
<html>
<head>
<title>Frames Example Two</title>
</head>
<!-- HTML Frames Example One -->
<frameset rows="50%,50%">
<frame src="Border.html">
<frameset cols="*,250">
<frame src="Content.html">
<frame src="Content.html"
noresize scrolling="no">
</frameset>
</frameset>
</html>
The Blue text is the nested frames code.
In the Blue <frameset> tag, you will notice that the cols="50%,50%" parameter was changed to cols="*,250". Changing the "50%,50%" changed the columns from each occupying 50% of the available space, to the right one takeing up 250 pixels, and the left one taking up the rest of the available space.
The Second <frame> tag has the additions of noresize and scrolling="no" to it. The noresize parameter forces the frame to stay at the same size as it was origionally, and the scrolling="no" disables scrollbars on that frame. Even if the Content is larger than the space in the frame, the user will not be able to scroll that window.
<frameset
cols="columnWidthList"
rows="rowHeightList"
border="pixWidth"
bgcolor="color"
frameborder="yes"|"no"
>
...
</frameset>
<frame
bgcolor="color"
frameborder="yes"|"no"
marginheight="marginHeight"
marginwidth="marginWidth"
name="frameName"
noresize
scrolling="yes"|"no"|"auto"
src="URL"
>