ptg
In addition, the frameset is defined as having no borders, but the first frame is supposed
to have a border. How do you resolve this problem? You can apply three simple rules:
n
Attributes in the outermost frameset have the lowest priority.
n
Attributes are overridden by attributes in a nested <frameset> tag.
n
Any bordercolor attribute in the current frame overrides previous ones in
<frameset> tags.
Additional Attributes
Table 17.1 shows a few extra attributes for the <frame> tag. These attributes can give you
additional control over how the user interacts with your frames. Other attributes control
margins or spacing between frames and whether scrollbars appear when required.
TABLE 17.1 Control Attributes for the <frame> Tag
Attribute Value Description
frameborder 1 Displays borders around each frame
(default).
frameborder 0 Creates borderless frames.
longdesc URL Specifies a URL that provides a longer
description of the contents of the frameset.
Primarily used with nonvisual browsers.
marginheight pixels To adjust the margin that appears above
and below a document within a frame, set
marginheight to the number indicated by
pixels.
marginwidth pixels The marginwidth attribute enables you to
adjust the margin on the left and right sides
of a frame to the number indicated by pixels.
name string Assigns a name to the frame for targeting
purposes.

noresize By default, the users can move the position
of borders around each frame on the current
screen by grabbing the borders and moving
them with the mouse. To lock the borders of
a frame and prevent them from being moved,
use the
noresize attribute.
scrolling auto (Default) If the content of a frame takes up
more space than the area available, frames-
compatible browsers automatically add scroll-
bars to either the right side or the bottom of
the frame so that the users can scroll
through the document.
506
LESSON 17: Working with Frames and Linked Windows
Download from www.wowebook.com
ptg
▼
TABLE 17.1 Continued
Attribute Value Description
scrolling no Setting the value of scrolling to no dis-
ables the use of scrollbars for the current
frame. (Note that if you do this but the docu-
ment contains more text than can fit inside
the frame, users can't scroll the additional
text into view.)
scrolling yes If you set scrolling to yes, scrollbars are
included in the frame even if they aren’t
required.
src URL Specifies the URL of the initial source docu-

ment that appears in a frame when the
frameset first opens in the browser.
Creating Complex Framesets
The framesets you’ve learned about so far are the most basic types of frames that can be
displayed. In day-to-day use, however, you’ll rarely use these basic frame designs. On all
but the simplest sites, you’ll most likely want to use more complex framesets.
Therefore, to help you understand the possible combinations of frames, links, images,
and documents that can be used by a website, this section explores complex framesets.
Task: Exercise 17.2: Creating the Content Pages for Your
Frameset
Most commonly, framesets are used to keep navigational elements in view as the user
scrolls through the contents of the document. Each time the visitor clicks a link in the
left navigation frame, the content in the main frame displays the selected page. The (very
silly) frameset that you’ll create in this exercise demonstrates this technique. Although
it’s not a practical example, it’s simple, fun, and demonstrates the same techniques you
would use for a navigation bar.
When you design a web page that uses frames, you normally design the frameset before
you go through all the trouble of designing the content that goes into it. That’s because
you’ll want to know how big your frames are going to be before you start designing
graphics and other page content to put into them.
Creating Complex Framesets
507
17
,
Download from www.wowebook.com
ptg
I’m doing things a little backward here, but for good reason. It might help you to better
understand how things fit together if you see real content in the frames as you design the
frameset. For this reason, I have you design the content first.
The following content pages don’t include any of the frameset tags discussed so far.

There are eight pages in all, but I promise that I keep the code for these pages brief.
Ready?
508
LESSON 17: Working with Frames and Linked Windows
,
Sometimes you may want to work on your frame document before
you’ve finished all the pages that will be displayed in the frames.
However, your frameset won’t be displayed properly when it’s
loaded into a frames-compatible browser for testing unless you
define
<frame> tags that include valid documents. If you want to
design a frameset before you create the content, you can create a
small empty HTML document called
dummy.html and use it for all
your frame testing.
The frameset that you’ll create in Exercises 17.3 through 17.7 consists of three frames.
The layout of the frameset will be as shown in Figure 17.11. The frameset page loads
first and instructs the browser to divide the browser window into three frames. Next, it
loads the three pages that appear in the top, left, and main frames. Finally, if a user
browses to the frameset without a frames-compatible browser, an alternative page will
appear.
TIP
FIGURE 17.11
You’ll create a
frameset that con-
sists of three
frames: top, left,
and main.
The top frame always displays the same web page: away.html. The choices.html page
that appears in the frame on the left side contains a list of links to six different pages

named reason1.html through reason6.html. Each of these six pages will load into the
main frame on the bottom-right portion of the frameset.
,
Download from www.wowebook.com
ptg
Start with the page displayed in the top frame. This page will always appear in the
frameset. Here you can include any information you want to display permanently as visi-
tors browse through your site. Real-world examples for the content of this frame include
the name of your website, a site logo, a link to your email address, or other similar con-
tent. Type in the following code and save it to your hard drive as away.html:
<!DOCTYPE html>
<html>
<head>
<title>I’m Away from My Desk Because</title>
<style type=”text/css” media=”screen”>
body { background-color: #cc6600; color: #ffcc33; }
</style>
</head>
<body>
<h3>I’m Away from My Desk, because </h3>
</body>
</html>
Figure 17.12 shows this page.
Creating Complex Framesets
509
17
FIGURE 17.12
The top frame in
the frameset.
Next, you’ll create the left frame in the frameset. On real websites, this is typically the

frame used for text or image navigation links that take your visitors to several different
key pages on your site. For example, a personal site might have a navigation bar that
takes its visitors to a home page, a guest book, a links page, and other sections of inter-
est. A corporate or business site could contain links for products, customer support, fre-
quently asked questions, employment opportunities, and so on.
The contents page in the following example works exactly the same way that a real-
world navigation bar does. When the appropriate link is selected, it displays one of the
six pages in the main frame of the frameset. The contents page contains links to six
pages, reason1.html through reason6.html, which you’ll create next.
After you enter the following code into a new page, save it to your hard drive in the same
directory as the first page and name it choice.html:
, ,
Download from www.wowebook.com
ptg
Input ▼
<!DOCTYPE html>
<html>
<head>
<title>Reason I’m Out</title>
<style type=”text/css” media=”screen”>
body {
color: #ffcc66;
background-color: #006699;
}
a { color: #ffffff; }
a:visited { color: #66ccff; }
a:active { color: #ff6666; }
</style>
</head>
<body>

<p>Select a reason:</p>
<p><a href=”reason1.html”>Reason 1</a></p>
<p><a href=”reason2.html”>Reason 2</a></p>
<p><a href=”reason3.html”>Reason 3</a></p>
<p><a href=”reason4.html”>Reason 4</a></p>
<p><a href=”reason5.html”>Reason 5</a></p>
<p><a href=”reason6.html”>Reason 6</a></p>
</body>
</html>
Your page should look as shown in Figure 17.13 when you open it in a browser.
510
LESSON 17: Working with Frames and Linked Windows
,
FIGURE 17.13
The left frame in
the frameset.
Now you need to create the six pages that will appear in the main frame when the visitor
selects one of the links in the contents frame. The main frame is designed to display
pages that normally you would display in a full browser window. However, if you’re
going to display your pages in a frameset that has a left navigation bar, you’ll have to
account for the reduced size of the frame in your design.
,
Download from www.wowebook.com
ptg
To keep the page examples relatively easy, I’ve given them all the same basic appear-
ance. This means that the code for all of these pages is pretty much the same. The only
items that change from page to page are the following:
n
The title of the page
n

The description of my current mood
n
The text that describes what each image means
To create the first of the six pages that will appear in the main frame, type the following
code into a new page and save it as reason1.html:
Input ▼
<!DOCTYPE html>
<html>
<head>
<title>Reason 1 - Forgot My Lunch</title>
<style type=”text/css” media=”screen”>
body {
background-color: #ffffff;
font: 200% bold;
text-align: center;
}
</style>
</head>
<body>
<p>I forgot my lunch at home.</p>
</body>
</html>
Figure 17.14 shows what this page should look like in a browser.
Creating Complex Framesets
511
17
,
Output .
FIGURE 17.14
The first of the six

pages that appear
in the main frame.
,
Download from www.wowebook.com
ptg
You code the remaining five pages for the main frame similarly. Modify the page you
just created to build the second of the six main pages. The only differences from the pre-
vious code (reason1.html) are shown with a gray background. Save the new page as
reason2.html. The complete code appears as follows:
<!DOCTYPE html>
<html>
<head>
<title>Reason 2 - By the Water Cooler</title>
<style type=”text/css” media=”screen”>
body {
background-color: #ffffff;
font: 200% bold;
text-align: center;
}
</style>
</head>
<body>
<p>I’m flirting by the water cooler.</p>
</body>
</html>
For the third page, modify the code again and save it as reason3.html. The complete
code appears as follows:
<!DOCTYPE html>
<html>
<head>

<title>Reason 3 - Don’t Ask!</title>
<style type=”text/css” media=”screen”>
body {
background-color: #ffffff;
font: 200% bold;
text-align: center;
}
</style>
</head>
<body>
<p>None of your business!</p>
</body>
</html>
Here’s the fourth page (reason4.html):
<!DOCTYPE html>
<html>
<head>
<title>Reason 4 - Out to Lunch</title>
<style type=”text/css” media=”screen”>
512
LESSON 17: Working with Frames and Linked Windows
, ,
Download from www.wowebook.com
ptg
body {
background-color: #ffffff;
font: 200% bold;
text-align: center;
}
</style>

</head>
<body>
<p>I’m out to lunch.</p>
</body>
</html>
The fifth page (reason5.html) looks like the following:
<!DOCTYPE html>
<html>
<head>
<title>Reason 5 - Boss’s Office</title>
<style type=”text/css” media=”screen”>
body {
background-color: #ffffff;
font: 200% bold;
text-align: center;
}
</style>
</head>
<body>
<p>The boss called me in his office.<p>
</body>
</html>
The last main page (reason6.html) appears as follows:
<!DOCTYPE html>
<html>
<head>
<title>Reason 6 - I Don’t Work Here Anymore</title>
<style type=”text/css” media=”screen”>
body {
background-color: #ffffff;

font: 200% bold;
text-align: center;
}
</style>
</head>
<body>
<p>I just got fired.<p>
</body>
</html>
Creating Complex Framesets
513
17
, ,
Download from www.wowebook.com
ptg
▼
Now you have the six pages that will appear in the main frame of the frameset. You’re
finally ready to build the frameset.
Task: Exercise 17.3: Combining rows and cols
To remind you of the basic layout of the frameset that you’ll create, Figure 17.15 is
another look at the complete page. It provides a simple example of how you can combine
framesets to create complex designs.
514
LESSON 17: Working with Frames and Linked Windows
▲
Output .
FIGURE 17.15
The frameset with
three frames: top,
left, and main.

When you’re designing complex frame layouts, a storyboard is an
invaluable tool. It helps you block out the structure of a frameset,
and it can prove invaluable when you’re adding hyperlinks (as
you’ll see in Exercise 17.5, “Using Named Frames and
Hyperlinks”).
In Figure 17.15, the right section of the screen is split into two horizontal frames, and the
third frame at the left of the page spans the entire height of the screen. To create a frame-
set document that describes this layout, open your text editor and enter the following
basic HTML structural details:
<!DOCTYPE html>
<html>
<head>
<title>Why I’m Away Frameset</title>
</head>
<frameset>
</frameset>
</html>
TIP
,
Download from www.wowebook.com
ptg
Next, you must decide whether you need to use a rows or cols attribute in your base
<frameset>. Look at your storyboard—in this case Figure 17.15—and work out whether
any frame areas extend right across the screen or from the top to the bottom. If any
frames extend from the top to the bottom, as in this example, you need to start with a
cols frameset; otherwise, you need to start with a rows frameset. On the other hand, if
no frames extend completely across the screen either vertically or horizontally, you
should start with a cols frameset.
To put it more simply, here are three easy-to-remember rules:
n

Left to right, use rows
n
Top to bottom, use cols
n
Can’t decide, use cols
Creating Complex Framesets
515
17
,
The reasoning behind the use of the “left to right, use rows” rule
relates to how frames-compatible browsers create frames. Each
separate
<frameset> definition can split the screen (or a frame)
either vertically or horizontally, but not both ways. For this reason,
you need to define your framesets in a logical order to ensure that
you achieve the layout you want.
In Figure 17.15, the left frame extends across the screen from top to bottom. As a result,
you need to start with a cols frameset by using the rules mentioned previously. To define
the base frameset, enter the following:
<frameset cols=“125,*”>
<frame src=“choice.html”> <! loads the choices page into the left frame >
<frame src=“dummy.html”> <! this line is only temporary >
</frameset>
Writing this code splits the screen into two sections. The first line defines a small frame
at the left of the screen that is 125 pixels wide, and a large frame at the right of the
screen that uses the rest of the available space.
As mentioned earlier in this lesson, the frameset document itself doesn’t describe the
contents of each frame. The documents specified in the src attribute of the <frame> actu-
ally contain the text, images, and tags displayed by the frameset. You can see an example
of this tag in the second and third lines of the preceding code. The second line specifies

the URL of the web page in the left frame (the choice.html page that you created ear-
lier). The third line would display a web page named dummy.html (if you created one,
that is), but we’re just using this as a placeholder for the next exercise.
NOTE
▲
Download from www.wowebook.com