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.
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>
<title> Why I'm Away </title>
<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 -->
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.
Search WWH ::

Custom Search