HTML Frames

Frames allow you, the Web page designer, to present your Web pages in multiple windows within a single browser window. To get the idea of the effect, view Frame Example 1.


Frame Columns

Click here to see a simpler frame example with two column frame windows.

Check out the HTML Frame commands that created this example.

..............................................................................................................

<html><head><title>Frame Example 2</title></head> 
<frameset cols="150,*">
<frame name="contents" src="bla.html" target="main"  scrolling="auto">
<frame name="main" src="bla.html" target="main"  scrolling="auto" >
<noframes>
<body>
<p>This page uses frames, unfortunately your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

..............................................................................................................


An Explanation of the Code

The first and last lines should be familiar to you from standard HTML. Here is an explanation of the remainder of the code.


<frameset cols="150,*"></frameset>

These commands tell the browser to split the browser window into two side-by-side windows. "cols" lists the size of each column. Here the first is 150 pixels and the second, should use up the remainder of the window -this is indicated by the asterisc. Here are some sizing options:

Command Effect
<frameset cols="500,500"> Two columns each 500 pixels wide
<frameset cols="150,*,150"> Three columns. The first 150 pixels wide, the third 150 pixels wide, amd the center column uses whatever space is left.
<frameset cols="20%,60%,20%"> Three columns. The first and third take up 20% of the window width each. The middle column takes up 60% of the window width.

<frame name="contents" src="bla.html" target="main"  scrolling="auto">
<frame name="main" src="bla.html" target="main"   scrolling="auto" >

These two lines of code define what is to go into the two frames that were specified in <frameset>. Heres and explanation of the first <frame> command in our example.

Command Effect
name="contents" The left frame is named "contents". You can use the frame name to specify a target frame for links.
src="bla.html" This frame will display the contents of bla.html
target="main" Any links in bla.html will be diplayed in the frame named "main"
scrolling="auto" Scroll bars should be displayed if necessary  

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

This code checks to see if the browser of the person trying to view your page is able to view frames. If not, this text is displayed.


Frame Rows

Click here to see a frame example with two row frame windows.

Check out the HTML Frame commands that created this example.

..............................................................................................................

<html> <head><title>Frame Example 3</title></head>

<frameset rows="30%,20%,50%">
<frame name="top" src="bla.html">
<frame name="middle" src="bla.html">
<frame name="bottom" src="bla.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

..............................................................................................................

The code should be self-explanatory after viewing the frames.

 


Mixing Columns and Rows

Click here to see a more ambitious frame example that combines columns and rows.

Check out the HTML Frame commands that created this example.

..............................................................................................................

<html>

<head><title>Frames Example 4</title> </head>

<!-- First we set up three rows -->

<frameset rows="64,*,64">

<!-- The first row is made up of two columns -->

<frameset cols="*,49%">
<frame name="top" scrolling="no" noresize target="contents" src="bla.html">
<frame name="top1" src="bla.html" target="contents" scrolling="no">
</frameset>

<!-- The second row is made up of two columns -->

<frameset cols="150,*">
<frame name="contents" target="main" src="bla.html" scrolling="no">
<frame name="main" src="bla.html" target="contents">
</frameset>

<!-- The third row is made up of one column so  we need only specify one frame -->

<frame name="bottom" scrolling="no" noresize target="contents" src="bla.html">

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

..............................................................................................................

I've inserted comments into the code, using HTML comment symbols <!-- -->, to help you understand it. It gets a bit confusing nesting the columns in the rows. Splitting up the code into logical units with comments should help it make sense.


For more Info

For documentation on Frame commands: http://www.netscape.com/assist/net_sites/frames.html

Check out our class home page and view the HTML source code that was used to create it.

Have Fun!