Getting Started with Frames

The most significant change that has been introduced with frames is a second kind of HTML document, namely layout pages. Whereas a normal pages contain the HTML tags and content that we are used to, layout pages just store information about the size and placement of normal pages. Hence, in layout pages the <body> Content </body> part has been replaced by the layout tags <frameset> ... </frameset>. We will call those "normal pages" content pages from now on.

To start with a simple example, let's say we have two standard pages:
(Standard in this case means ``Netscape extended HTML.'')

red.html: 

<html>
<head>
<title>Red</title>
</head>

<body bgcolor="#ff0000" text="#000000" link="#ffffff">
<h3>This page intentionally left red.</h3>
</body>
</html>

and blue.html: 

<html>
<head>
<title>Blue</title>
</head>

<body bgcolor="#0000ff" text="#000000" link="#ffffff">
<h3>This page intentionally left blue.</h3>
</body>
</html>

Now, let's display those two documents in one browser window. In order to do this, we need to create a layout page, that tells the browser how the window should be split between the frames, and which document should be displayed within these frames. Let's call this document split.html. 

<html>
<head>
<title>Split</title>
</head>

<frameset cols="50%,50%">
	<frame src="red.html">
	<frame src="blue.html">
</frameset>

</html>
This splits the window into two columns. To place the red frame on the right hand side instead of the left hand side, just change the sequence of the <frame> tags. To split the windows horizontically, change <frameset cols="50%,50%"> to <frameset rows="50%,50%">. As you might have guessed, the percentage numbers tell the browser the space is split between the frames.

Of course we can have more than two frames. Try to create the flag of France. In case you don't know, it's blue, white, red, equally split vertically:

Blue White Red

Obviously you need to write white page similar to red and blue ones. Your HTML source should look something like this: 

<html>
<head>
<title>France</title>
</head>

<frameset cols="33%,33%,33%">
	<frame src="blue.html">
	<frame src="white.html">
	<frame src="red.html">
</frameset>

</html>
The percentages don't add up to 100%. But that's no problem since the browser adjusts these values to fit. We might just as well have said <frameset cols="50%,50%,50%">. If we want to give the white frame double the amount of space as the other frames, we can either calculate it ourselves (<frameset cols="25%,50%,25%">) or leave it up the browser (<frameset cols="50%,100%,50%">). Alternatively, we can use the star syntax instead of the percentage syntax: <frameset cols="*,2*,*">.

There is yet another way to define frame sizes, namely specifying a the width (or height) in pixels. This is useful for frames that only contain a GIF or JPEG image. Unlike text fonts, the size of image is known to the page designer. However, since the total size of the window is not known beforehand (and can always be changed by resizing), it is recommended to mix absolute pixel numbers with relative sizes. Let's say, we want the blue frame to be always 80 pixels wide, while the white frame should still be double as wide as the red frame. Here's one way to do it: 

<html>
<head>
<title>France 80</title>
</head>

<frameset cols="80,2*,*">
	<frame src="blue.html">
	<frame src="white.html">
	<frame src="red.html">
</frameset>

</html>
Try to resize that window (not the frames themselves). As you can see, the blue frames' width remains constant, while the other frames adjust themselves to the total window width.

INDEPENDANT PRACTICE
Try to create a page that looks like this

Red
White
Red
White

where the lower two stripes are fixed in size, and top red frame is four times the size of the upper white frame.

NEXT Extra Frames

Hosted by www.Geocities.ws

1