Nesting Frames
In our previous lesson, our frames only allowed us to define 2 or more panes in rows or columns. Another very useful thing we can do is to nest framesets. Nesting puts one frameset inside another frameset, very similar to the way we put columns inside a row. Nesting allows us to use a combination of rows and columns. The following example shows how a frameset can define both rows and columns.
| Example 1 |
<html>
<frameset rows="80,*">
<frame name="Header" src="head.html">
<frameset cols="25%,75%">
<frame name="Contents" src="contents.html">
<frame name="Main" src="main.html">
</frameset>
</frameset>
</html>
|
In Example 1, a frameset of two rows is first defined. The first row, with a height of 80 pixels, is named Header and references a file named head.html. The second row is a new frameset with two columns; this frameset within a frameset is shown in red. It contains two columns: Contents and Main.
Look at the following example.
| Example 2 |
<html> <frameset rows="*,*"> <frameset cols="*,*"> <frame name="Pane1" src="file1.html"> <frame name="Pane2" src="file2.html"> </frameset> <frameset cols="*,*,*"> <frame name="Pane3" src="file3.html"> <frame name="Pane4" src="file4.html"> <frame name="Pane5" src="file5.html"> </frameset> </frameset> </html> |
What structure is defined in Example 2? How many panes are there? How are they arranged?
Links in Frames
You may have been wondering why we have to give a name to each frame. These names are necessary for links. You can create a link in one frame and have the page load in another frame. This comes in really handy with navigation. For example, let’s say you wanted to have a “Navigation Bar” running down the left side of your webpage. You could create a two column frameset for it. Let’s say you named the first column NavBar and the second column MainPage. To make the links in the NavBar frame load into the MainPage frame, you will use a target in your code. A target defines where a new page will be displayed.
<a href="link.html" target="MainPage">Link</a>
The above code will load the page link.html into the MainPage frame.
Scrolling
Some frames have contents that do not require the user to scroll. For example, the heading in our previous assignment only has a name in it. To hide the scrollbar for one of your frames, add scrolling="no" to the frame tag. The other permitted values are "yes" (which forces scrollbars) and the default value, "auto" (which determines whether they are needed or not).
<frame name="Title" src="head.html" scrolling="no">
Resizing
All of our frames so far are resizeable. If you want to lock down the size to prevent the user from dragging the borders, add the attribute noresize="noresize" to the frame tag. For example:
<frame name="Nav" src="nav.html" noresize="noresize">