AN INTRODUCTION TO FRAMES

Frames profide a useful way to design a webpage without using lots of tables. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or replaced. For example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled through or replaced by navigating in the second frame.

Below is an example of how a webpage may be divided up into frames.

 

 --------------------------------------- 
 |         |                             | 
 |         |                             | 
 | Frame 1 |                             | 
 |         |                             | 
 |         |                             | 
 |---------|                             | 
 |         |          Frame 3            | 
 |         |                             | 
 |         |                             | 
 |         |                             | 
 | Frame 2 |                             | 
 |         |                             | 
 |         |                             | 
 |         |                             | 
 |         |                             | 
  ---------------------------------------  

<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
<P>I am sorry, your browser does not support frames.
</NOFRAMES>
</FRAMESET>
</HTML>

 

Above is an exampel of of coding to create frames, you can use this as a template to create yoru own frames. By adjusting the values highlighted in green, you will change the layout of the frames.

By changing the URLS highlighted in red, you can change the content of the frames.

When creating a page with frames on, the frameset tag must be used, any content on the webpage must be placed after the frameset tag. Else the frames will not function properly. Each of the windows that will appear on the screen, displays another webpage or image from another source. To display these, you need to insert the URL (Uniform resource locator - fancy word for a link). As told above, the areas highlighted red can link to whatever it is you wanted, so you must make the content of these places.

For the case of your homework, create pages with differant coloured backgrounds with nothing else on them, this will alow me to see clearly your framed layout.

What if I want more than 2 columns?

Thats easy, in the coding above you can see that the cols= attribute is two numbers, equalling 100%, you may have as many colums as you like so long as you total 100. For example 20%, 20%,20%,20%, 20% would give you five coloums, each of equal width. The same process can be repeated with the rows= attribute however you can see that this time the numbers do not add upto 100, when the numbers are not followed by a % symbol, the browser reads the height of the rows in pixels.

What happens when frames are not supported?

Frames are not supported by every browser version, particularly older version. Because of this, the noframes tag provides the browser with an alternative set of instructions. This may contain either plain text or more complicated HTML.

After your noframe tag closes, it is important that you close your frameset tag to let the browser know that you have finished with frames.

 

To practice frames, i would recomend changing the script above and seeing what happens. you could try changing the number of columns and rows, the heights of them, and the noframes instructions.