Frames

A frame document is really firly simple. It opens with a <html> tag, an then has a <head> tag, just like all other HTML files. But, instead of a <body>, a frame document has a <frameset>. The other main difference is that a frameset does not contain any normal information, that a browser shows to the surfer, but information for the browser for how to show the information. It works a bit like a table, just istead of <td> contents, you show HTML files. A fairly simple frameset document looks like this:

<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>This frameset document contains:
      <UL>
         <LI><A href="contents_of_frame1.html">Some neat contents</A>
         <LI><IMG src="contents_of_frame2.gif" alt="A neat image">
         <LI><A href="contents_of_frame3.html">Some other neat contents</A>
      </UL>
  </NOFRAMES>
</FRAMESET>
</HTML>

This gives us a document structure that looks like this:

Logo

Main Frame

Hello and Welcome to this crash course on frames. This Frame shows the main content, or whichever content you click on on the left.

Contents:

One
Two
Three
Four

But now, let's take an exacter look at the tags used to create this structure.

<frameset>

This tag has two main attributes "rows" and "cols". These are fairly self explanatory, "rows" defines frames that run across the screen, and "cols" frames that split the screen lengthways. The sizes can be given in percent or pixels. You can also define flexible frames, by only setting one frame to a certain size, and letting the other fram do as it will. this is done like this:

<frameset rows="120, *">

This gives a frame across the top of the page, which stays at a constant height of 120 pixels, while the other frame changes its height to fit the screen. We could also split the screen using percentages, but this then gives us two dynamic frames, which change their height depending on which browser and what resolution the server is using.

Inserting another <frameset> tag inside the first <frameset> will further slit up the viewing window of the browser. In the above example, first the columns are set and then the first column is plit into two rows. If you wished to split the right hand column, then you first have to name the first frame and then define the second frameset. It would look like this:

<html>
<head>

<title>Another Frameset</title>

</head>



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

<frame name="leftFrame" src="left.htm">

	<frameset rows="*,85">

	<frame name="mainFrame" src="main.htm">

	<frame name="bottom" src="bottom.htm">
	</frameset>
</frameset>
</html>

This gives us a structure like this (with the names of the frames):

leftFrame
mainFrame
bottom

The frame names are very important, as that is how you identify, where a document is to be shown. The attribute "src" is just like the <img src> tag - it means "source" and tells the browser which document to put inside which frame. In this example, mainFrame is the content window, and is of variable height and width. leftFrame can be used as a contents window, and bottom as a navigator between site sections (or as an advertisment window!).

That is basically all there is to frames, but in order for documents to go in the right windows, there are a few things that have to be added to the "normal" HTML files.

That is to be found on the next page.