Types of Frames

The frameset document determines the layout of the frame and links to the documents that fill each division of the frame.

Horizontal ~ Vertical ~ Targeted Vertical ~ Nested

<frameset> for Horizontally Divided Frames

Here is the HTML tagging for a horizontal layout. The page is divided into two frames with 80% of the area in the top frame and 20% of the area in the bottom frame.

<html>

<head>
<title>My frames page</title>
</head>

<frameset rows="80%, 20%">

<frame src="top.html" />
<frame src="bottom.html" />
</frameset>

</html>


Go to HORIZONTAL FRAMES example | (Click on the BACK button to return to this page)

<frameset> for Vertically Divided Frames

Here is the HTML tagging for a vertical layout. This frameset document divides the page into two frames with with 20% of the area in the left frame and 80% of the area in the right frame.

<html>

<head>
<title>My frames page</title>
</head>

<frameset cols="20%, 80%">

<frame src="left.html" />
<frame src="right.html" />
</frameset>

</html>


Go to VERTICAL FRAMES example | (Click on the BACK button to return to this page)

<frameset>for Targeted Vertically Divided Frames

Naming in the frameset document and targeting in the index document allows you to control which individual frame a third document will display in. The name attribute is added in the frameset document:

<html>

<head>
<title>My frames page</title>
</head>

<frameset cols="20%, 80%">

<frame src="lefttargetted.html" />
<frame src="right.html" name="main" />
</frameset>

</html>


The target attribute is added to the document in the left frame to direct the link to the named frame on the frameset page:

<hr />

<strong>Examples:</strong>

<hr />

<br /><br />

<p><a href="right2.html" target="main">Right Page #2</a></p><br />

<p><a href="right3.html" target="main">Right Page #3</a></p><br />

<hr />

Go to the TARGETED VERTICAL FRAMES example | (Click on the BACK button to return to this page)

<frameset>for Nested Frames

<html>

<head>
<title>My frames page</title>
</head>

<frameset cols="20%, 80%">

<frame src="left.html" />

<frameset rows="80%, 20%">

<frame src="topright.html" />
<frame src="bottomright.html" />
</frameset>
</frameset>

</html>


Go to NESTED FRAMES example | (Click on the BACK button to return to this page)

Help ---> Ken Werbach's Guide to Frames Tags

More Help ---> Sharkey's Netscape Frames Tutorial

WebMonkey's Frame Tutorial

Return to the Introduction

Updated May 9, 2007 (fm)
URL: http://www.library.cornell.edu/olinuris/ref/ws/html/frames/framesinfo.html