Frames

Reading Pages 129-135

Frames are a way to organize the space within the browser window. They can be very effective but can even more easily be a problem. The first step in their use is to think about what you want to do and how it can be done. You may find that you don't need them. A very common use is to put the navigational elements in one frame and the rest of the pages in another. This allows the navigational controls to always be visible. Then you should carefully figure out sizes of frames. It is vital to keep in mind that the user may change the shape of the browser at any time. This can cause the frame to become only partially visible and maybe unusable.

So lets start with a simple example. The first thing to note is that the main file for the web site will have no <body> tags. In place of them is the frameset. A frameset is a collection of frames.


<frameset rows="20%,*">
	<frame name="top" src="frametop.html">
	<frame name="bottom" src="framebot.html">
</frameset>

This creates two frames like this. In the frameset tag we used the rows attribute. This tells the browser that the two frames will be in different rows, one above the other. There is also a cols attribute when you want them side by side. You can use only one of rows or cols in a single frameset.

The rows or cols attribute takes a string of sizes. These are separated by commas and can be any combination of pixels, percentages or an asterisk (*). Using a simple number like 250 will make a frame that is 250 pixels high (if rows) or 250 pixels wide (if cols). Using a number with a percent sign (%), tells the browser to make the frame that percentage of the display space. So, if a window changes size, the proportions will stay the same even if the actual size changes. The asterisk simply means take the rest of the space that is available.

In the example above, we have a frameset that has two rows, one that takes up 20% of the available space and one that takes up the rest. Inside the frameset tags, we need one frame tag for each frame. The main attributes of the frame tag are the name and src attributes. The name attribute just gives the frame a name that we can use later. The src attribute tells the browser where to get the web page that will be the contents of the frame. Whatever web page is specified is displayed in the frame.

The scrolling attribute tells the browser what it should do about scroll bars on the frame, even if it thinks it needs them. The values are no (no scroll bars ever), yes, (scroll bars always) and auto ( scroll bars when needed). Think and measure carefully before using no as it could make information in the frames invisible if the amount of material exceeds the space. An upper frame has the kind of problem more often.

In our example, the top frame will show the frametop.html page. And the bottom frame will have the framebot.html page. Notice that in the frametop.html page we have links like


		<a target="bottom" href="../sched.html">Schedule</a>
The target attribute tells the browser that the sched.html web page, when the link is chosen, should be shown in the bottom frame.

Within a frameset, we can have framesets. So we could have one frame on top, and another frameset as the second row. This nested frameset will be inside the space for the second row. With nested framesets, it as if the frame containing the nested frameset is the entire window.

To allow for browsers that don't support frames, we can use the noframes tag. The contents of this tag will be used in place of the frameset when the browser doesn't do frames. So this should contain the body tag.