Categories:

Learning how to create frames

Frames have been around for a long time now, supported by every known browser. While some consider them annoying, nicely designed, frames could be very helpful when navigating a site. In this tutorial, we will talk about how to implement frames, and finish up with how to create borderless frames, and how to create links that load content into another frame.

Everything you need to know to create frames

All frames are created using the <frameset> tag. This essentially makes up the "master" page, which will "contain" the pages that users actually see. The "master" page, with the <frameset> tag, replaces the <body> tag, meaning you DO NOT use the <body> tag anywhere inside this master page. This master page is than fitted with the individual pages that are "put" inside it. Ok, lets have a look at how exactly this is done: The following example creates a page with two frames:

//master page
<html>
<head>
<title>My example</title>
</head>
<frameset cols="30%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
</html>
page1




 page2

Page1.htm and Page2.htm are created separately as "normal" html pages, and are contained within this master page. We used the keyword "cols" to indicate that we want to define column frames. To create rows instead, simply use the keyword "rows":

<html>
<frameset rows="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
</html>
page1
page2

In both of these examples, we used percentage as the width measurement. You could also use pixels, with some caution, however:

<html>
<frameset cols="100,200,340">
<frame src="page1.htm">
<frame src="page2.htm">
<frame src="page3.htm">
</frameset>
</html>
page1




 page2 page3

If you add up the total width (100+200+340=640), this will equal the width of a screen at resolution 640*480. Most 14' screens are set as such, but how about people using screen resolutions of (800*600)? If they come along, how will your frame page be displayed? Well, the browser will have no choice but to stretch the width to exceed 640, in order to accommodate this larger screen. (All frames defined using percentage will be stretched, (or shrunk) depending on the user's screen resolution). This could lead to headaches for developers, since you never know how you frames will be displayed. Does that mean that you should never use pixels than? Absolutely not. Lets see how we can get over this:

<html>
<frameset cols="100,200,*">
<frame src="page1.htm">
<frame src="page2.htm">
<frame src="page3.htm">
</frameset>
</html>
page1




 page2 page3

We used a special keyword "*", which means undefined. By using this, only this part will be stretched, if necessary. The other two, 100, and 200, will not be inadvertently stretched. That way, you can keep all pages with layout that do not want to be stretched on the left two frames, and the one that's ok with it, on the right frame.

Creating complex frames:

So far, we've only created simple, either all columns, or all rows, frames. Now lets march on to ones with both, shall we?

The key to defining frames with both columns and rows is to place multiple pairs of <frameset></frameset> tags in your master page, each pair enclosing a "cols" or "rows" declaration. This can get a little tricky, so I'll try to explain using multiple examples. Let's start slicing

<html>
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
<frame src="page3.htm">
</frameset>
</html>
page1

 page3
page2

Ok, what the heck is going on? First, in blue, we defined two columns. Then, for the first column, we sliced that even more-into two rows. As you can see, the rows and columns "chunk" all end with a </frameset> tag, two to be exact. Like I said, we started out the "framing" by defining cols="50%,50%". Lets see what happens if we defined the rows first, instead of the other way round:

//master page
<html>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
<frame src="page3.htm">
</frameset>
</html>
page1

 		page2
page3

As you may see, totally different outcomes! Confused? Here's a good rule to remember: Whenever you slice a frame, either into columns or rows, your slice will keep slicing until it hits a "wall".

Complex frames step-by-step example:

Lets put the above rule into good use. Remembering this rule will save you a lot of trouble. Ok, assuming we want to create a frame like this:

 


 
 
   

This may look overwhelming, but if you keep that sushi rule firmly in your head, you'll be fine. How shall we go about doing it? Start with rows? Columns? Well, first take out our knives, and remember, this knife will keep slicing until it hits a "wall". If we started with rows, we would have something like this:

This sushi knife keeps cutting until it hits an obstacle, in this case, the edge of the page. As you can see, starting off using rows would make it impossible to achieve our desired goal.

Ok, lets begin with columns then:

<html>
<frameset
cols="33%,17%,17%,17%,17%">
</frameset>
</html>





     

So far, so good. Now we need to split the first column into two rows. Remember, this swiss knife isn't really sharp, so it wont cut through the walls of the first column.

<html>
<frameset
cols="33%,17%,17%,17%,17%">
<frameset rows="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
</frameset>
</html>
page1


     
page2

As you can see, the "rows" part is nested within the "cols" part, since the rows are a "subpart" of the columns declaration.

Lets continue our sushi chopping, shall we?

<html>
<frameset
cols="33%,17%,17%,17%,17%">
<frameset rows="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
<frame src="page3.htm">
<frame src="page4.htm">
</frameset>
</html>
page1
 3



 4    
page2

And finally:

<html>
<frameset
cols="33%,17%,17%,17%,17%">
<frameset rows="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
<frame src="page3.htm">
<frame src="page4.htm">
<frameset rows="50%,50%">
<frame src="5.htm">
<frame src="6.htm">
</frameset>
<frame src="7.htm">
</frameset>
</html>
page1
 3



 4 5 7
page2 6

I know this may be VERY confusing, but the best way to learn it by playing around with it yourself...so open your editor, and try something out! Ok, we've learned the overall structure of frames-lets move on to look at some attributes we can add to frames, plus master the art of linking and loading contents from one frame to another.