HTML and CSS Reference
In-Depth Information
▼
Task:
Exercise 17.5: Using Named Frames and Hyperlinks
If you were to load your
frameset.html
page into a frames-compatible browser at this
stage, you would see a screen similar to the one shown in Figure 17.15. Some of the text
sizes and spacing might differ slightly, but the general picture would be the same.
Although it looks right, it doesn't
work
right yet. If you click any of the hyperlinks in the
left frame, the frames-compatible browser will attempt to load the contents of the file
you select into the left frame. What you want it to do is to load each document into the
larger right frame.
Earlier in this lesson, you learned about the
target
attribute, which loads different pages
into a different browser window. To make the frameset work the way it should, you need
to use a slight variation on the
target
attribute. Instead of the
target
pointing to a new
window, you want it to point to one of the frames in the current frameset.
17
You can achieve this by first giving each frame in your frameset a frame name or win-
dow name. To do so, include a
name
attribute inside the
<frame>
tag, which takes the fol-
lowing form:
<frame src=“
document URL
” name=“
frame name
”>
Therefore, to assign a name to each of the frames in the
frameset.html
document, you
add the
name
attribute to each of the
<frame>
tags. Your frameset page now looks like the
following, with the additions indicated with the shaded background:
<!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” name=”left”>
<frameset rows=”60,*”>
<!-- the frame for column 2 -->
<frame src=”away.html” name=”top”>
<!-- has been replaced -->
<frame src=”reason1.html” name=”main”>
<!-- with an embedded -->
</frameset>
<!-- frameset block -->
</frameset>
</html>
This source code names the left frame
“left”
, the top-right frame
“top”
, and the bot-
tom-right frame
“main”
. Next, resave the updated
frameset.html
file, and you're just
about finished with the example.
▲
