Bar_gold.gif 401 bytes Bar_gold.gif 401 bytes

Frames divide up a web page so that part it can change while other parts or windows remain the same. It is helpful for keeping a menu handy for the user and for keeping a title prominent in a web page. Three pages are the minimum needed to use frames. The first page sets up the frames or windows. The next two or more html pages fit into these frames. Frames are set as rows or columns. Suppose you want to put a menu of links at the left of the serene and have the selected link appear in the right frame, you would use columns. If you want a title banner across the top you use rows. You can put frames inside of frames.

First example, a virtual zoo with the animal list at the left and pictures of the animals at the right. Here you use column frames and the code follows.

<HTML><HEAD>


	<TITLE> Virtual Zoo </TITLE>


</HEAD>


<FRAMESET COLS="20%,*">


<FRAME SRC="list.html" NAME="list">


<FRAME SRC="welcome.html" NAME="display">


</FRAMESET> 


</HTML>

The key is FRAMESET COLS="20%,*" This sets up two columns: one that is 20% of the screen and the other that is the rest of the screen. Now the source of the left frame is list.html and the starting page on the right is welcome.html. Note that the frames are named: "list on the left and display on the right. Now here the left html page:



<HTML>


<BODY>


<H2> List Page</h2>


<A HREF="elephant.jpg" TARGET="display"> Elephant </A><BR>


<A HREF="gazelle.jpg" TARGET="display"> Gazelle </A><BR>


<A HREF="giraffe.jpg" TARGET="_TOP"> Giraffe </A><BR>


<A HREF="lion.jpg" TARGET="display"> Lion </A><BR>


<A HREF="polarbear.jpg" TARGET="display"> Polar Bear </A><BR>


</BODY>


</HTML>


There is a welcome page which just says welcome and click on an animal at left. See the list.html. These links have a TARGET which tells them where to be displayed. So if you click on polar bear. The polarbear.jpg goes into the right frame.



Flexibility: You can specify the size of the frames in pixels 0 to about 600 for a full screen, by percentages of the total screen, or by "*" which means fill the rest of the screen.



Here's an example of frames that make three rows:

<HTML>


<HEAD></HEAD>


<FRAMESET ROWS="20%,30%, *">


<FRAME SRC="list.html" NAME="list">


<FRAME SRC="welcome.html" NAME="display1">     


<FRAME SRC="goodbye.html" NAME="display2">


</FRAMESET> 


</HTML>

Here is an example of frames with in a frames. The beauty is that you have a stationary title, a menu on the left and zoo pictures on the right.

<HTML>


<HEAD>


<TITLE>Virtual Zoo</TITLE>


</HEAD>


<FRAMESET ROWS="20%,*">


  <FRAME SRC="title.html" >


  <FRAMESET COLS="20%,*">


  <FRAME SRC="list.html">


  <FRAME SRC="welcome.html"         
  NAME= "display">


  </FRAMESET>


</FRAMESET>


</HTML>

Remember you give a frame or window a name and then the linked site goes into that frame when you use the syntax: A HREF="gazelle.jpg" TARGET="display"

The exception is the special or reserved word _TOP, this opens a new page or window as in this syntax:
A HREF="giraffe.jpg" TARGET="_TOP"

If a graphic or page is too large for a frame scroll bar appear on the frame.

Bar_gold.gif 401 bytes

           Return to Home Page Improvement

Bar_gold.gif 401 bytes