HTML and CSS Reference
In-Depth Information
▼
Task:
Exercise 17.4: Nesting Framesets
The next step in the process is to split the right frame area into two horizontal frames.
You achieve this effect by placing a second
<frameset>
block inside the base
<frame-
set>
block. When one
<frameset>
block is nested inside another, the nested block must
replace one of the
<frame>
tags in the outside frameset. In this case, you'll replace the
line that loads the temporary
dummy.html
page (which doesn't really exist).
To split the right frame into two frame areas, you replace the dummy
<frame>
tag with
an embedded
<frameset>
block. This embeds the new frameset inside the area defined
for the
<frame>
tag it replaces. Inside the
<frameset>
tag for this new block, you need to
define a
rows
attribute, as shown in the complete code:
<!DOCTYPE html>
<html>
<head>
<title>
Why I'm Away
</title>
</head>
<frameset cols=”125,*”>
<!-- this loads the choices page into the left frame -->
<frame src=”choice.html”>
<frameset rows=”60,*”>
<!-- the frame for column 2 -->
<frame src=”away.html”>
<!-- has been replaced -->
<frame src=”reason1.html”>
<!-- with an embedded -->
</frameset>
<!-- frameset block -->
</frameset>
</html>
The embedded
rows
frameset defines two rows, the first being 60% of the height of the
embedded frame area and the second taking up all the remaining space in the embedded
frame area. In addition, two
<frame>
tags are embedded inside the
<frameset>
block to
define the contents of each column. The top frame loads
away.html
, and the bottom
frame loads
reason1.html
.
NOTE
When used inside an embedded frameset, any percentage sizes
are based on a percentage of the total area of the embedded
frame, not on a percentage of the total screen.
Save the finished HTML document to your hard drive as frameset.html. Test it in your
browser.
▲
