Creating Frames Pages

Simple Frame Example Page, and files used to create the page.

Three Files are used to produce this page.

Frame Layout Page:

<html>
<head>
<title>Frame Example #1</title>
</head>

<frameset cols="118,*">

<frame name="contents" target="main" src="L12FrEx1Lft.htm">

<frame name="main" target="main" src="L12FrEx1Main.htm" >

<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>

</frameset>
</html>

Note the frameset tag specifies two columns, the first 118 pixels, and the second column will take up the remaining width. <frameset cols="118,*">

You can express values in one of three ways:

absolute pixels specify an absolute number of pixels for each column or row.
<frameset cols="118,*"> here the firs column is specified as 118 absolute pixels
Percentages specify a certain percentage of the page's width or height for each column or row.
<frameset cols="25%,*">
Relative scales specify a proportional amount of the available space.
<frameset cols="1*,4*,2*"> In this Relative Scale example, column one would receive on seventh of the page, column two would receive four-sevenths, and column three would receive two-sevenths. You can also use all three specifications together.

It's safe to specify either only rows or only columns; the attribute you omit automatically receives a value of 100%.

The next element that you need to define is the FRAME element. One FRAME tag is required for each row or column you defined with the FRAMESET tag. The FRAME tag is not a container so a closing tag is not required in HTML 3.2 and below.

Within the FRAME tag, the SRC defines the URL of the HTML page, which provides the content for the corresponding frame. If you define only one Frame tag, the the other frame will be displayed empty.

The order in which the source URL was placed in the HTML code determines the side of the frame the HTML file will be located in.

You can use the NAME attribute to assign a name to a frame. In most cases, you would assign a name in order to link to the frame from other frames that you're displaying at the same time. Remember that the NAME attribute is CASE SENSITIVE.

Because it's common to keep HTML attributes in lower case, it's best to keep the frame name in lower case. Names must begin with an alphanumeric character.

Main Contents Page, file named: L12FrEx1Main.htm

Left Navagation Page, in file named: L12FrEx1Lft.htm

<html>
<head>
<title>Links to</title>
<base target="main">
</head>

<p><strong>Links:</p>

<p><a href="../SyllabusWebIntro.htm">Syllabus</a></strong></p>

</body>
</html>

For the NAME attribute to be useful, you must define a link to the name in another html document. You define that link with a TARGET attribute and a name value that matches the frame source name. In this example when the Syllabus hyperlink is referenced, the browser displays the URL in the frame with the name main.

Certain target names have special attributes that will cause a particular outcome in a frame. These target names must have an underscore followed by the name in lower case for the browsers to identify them. If any of the target names are in upper case, the browser will misinterpret them as "_blank"

Target names and their functions are listed here.