KEMBAR78
HTML Frames | PDF | Html | Hyperlink
Scribd
Upload
16 views20 pages

HTML Frames

This document discusses the use of frames in web design, highlighting their decline in popularity due to navigational issues and challenges with bookmarking and search engine indexing. It provides a technical overview of how frames work, including how to set up frameset documents and the advantages and disadvantages of using frames. The article emphasizes that while frames can be useful in certain contexts, they are generally discouraged for modern web design.

Uploaded by

Drexla Ree
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views20 pages

HTML Frames

This document discusses the use of frames in web design, highlighting their decline in popularity due to navigational issues and challenges with bookmarking and search engine indexing. It provides a technical overview of how frames work, including how to set up frameset documents and the advantages and disadvantages of using frames. The article emphasizes that while frames can be useful in certain contexts, they are generally discouraged for modern web design.

Uploaded by

Drexla Ree
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

2007 NOTES

This article was originally published in


2003 as Chapter 12 of Learning Web
Design, 2nd edition.
Since the time of its publication, frames

Frames have become all but extinct, particularly


for professiona web sites. Although this
article provides a good background on
how frames work, it should not be taken
an endorsement of this antiquated
approach to web design. In general,
frames should be avoided, although
exceptions do exist.

Have you ever seen a web page with content that scrolls while the navigation
In this chapter
toolbar or an ad stays in the same place? Pages like these are created using a
web design feature called frames. Frames divide the browser window into How frameset documents are
mini-windows, each displaying a different HTML document (Figure 1). different from other web
documents
The primary advantage of frames is the ability to have one portion of the
window always visible while others scroll through longer content. Frames Setting up a frameset document
open up navigational possibilities, and they can be used to unify information Controlling frame appearance
from several sites onto one page. and functionality
However, frames have been controversial since their introduction in Netscape Targeting frames
Navigator 2.0. They cause as many navigational problems as they solve,
Providing content for users
because some users find it difficult to click through them. It is also difficult without frames
for content in frames to be bookmarked or found by search engines. And
because each framed page is comprised of several HTML documents, this
means more work for developers and a heavier load for the server.

Figure 1. Frames divide the browser into separate windows, each displaying its own web page. The windows can
scroll independently.

1
How Frames Work

As a result of their numerous disadvantages, frames have become an unspo-


ken “no-no” for big commercial sites. Don’t be surprised if your client declares
“no frames” at the very first meeting. But like most things, frames
As a result of their
are neither all good nor all bad, so feel free to play around with them and
numerous disadvantages,
decide for yourself. If you do use frames, make sure that you think the navi-
frames have become an gation and site structure through and don’t let the frame structure get too
unspoken “no-no” for complicated.
big commercial sites.

How Frames Work


When you view a framed page in a browser, you are actually looking at sev-
eral HTML documents at once (Figure 2). The key to making the page dis-
play in frames is the frameset document, which is an HTML document
containing instructions for how each frame is drawn and which HTML
document is displayed in each frame.

faq.html

doclist.html

index.html

Figure 2. This framed document is actually displaying two separate external documents at the same time.

2
How Frames Work

The primary function of the frameset document is to set up a structure for


the page. Let’s take a peek at the HTML source for our example framed page
(Figure 3).

<html>
<head>
<title>Littlechair Index</title>
</head>
1 <frameset cols="175,*">

2 <frame src="doc_list.html">
<frame src="faq.html">
</frameset>
3 <noframes>
You need a frames-enabled browser to view this page.
</noframes>
</html>

Figure 3. This is the HTML source for the frameset document index.html in our example.

1 <frameset>
NOTE (2007)
We’ll talk about creating frameset documents in more detail in the next
section, but for now I want to highlight a few points of interest. First, There is actually a separate Frameset DTD
for the frameset document that should be
notice that the frameset document uses the <head> structural element,
listed in the DOCYTPE declaration. See
but it does not have a <body>. It uses the <frameset> structural element
Chapter 10 of Learning Web Design, 3e for
instead. This sets framesets apart from all other web pages. more information on DTDs and DOCTYPE
The cols attribute in the frameset tag divides the window into two declarations.
frame columns, one 175 pixels wide and the second filling whatever
space is remaining (indicated by the asterisk).
2 <frame>
Within the <frameset> container element, we see a <frame> element for
each frame on the page. The primary job of the <frame> element is to
specify which HTML document to display; however, you can control
other features of a frame, as we’ll see later in this chapter.
3 <noframes>
Finally, there’s some minimal content within the <noframes> element.
This is what will display if the frames do not work (for instance, if the
user is using an ancient browser). It is similar to the alternative text pro-
vided in image elements. We’ll talk more about “noframes” content at
the end of this chapter.
When the browser sees that this is a frameset document, it draws out the
frames as instructed in the document and then pulls the separate HTML
documents into the page.

3
Setting Up a Frameset Document

Setting Up a Frameset Document


I’m going to create a framed interface for a recipe site. In this section, I’ll walk
you step by step through the process of writing the HTML for framed docu-
ments.
As with any HTML document, the first step is to create the document struc-
ture. Let’s do that for our new framed document; remember that it will use
the <frameset> element instead of <body> (Figure 4).

<html>
<head>
The Finished Product <title>From Jen's Cookbook</title>
The frame demonstration in this </head>
section walks you through the Frameset documents
<frameset>
creation of this three-framed “Jen’s use a <frameset>
Kitchen” page, shown here. tag instead of <body>.
</frameset>

</html>

Figure 4. I begin by adding basic structural tags to a new document using the <frameset> element.

Now we can decide how many rows and/or columns we want the page to
have and what size each should be. These settings are all made within the
<frameset> element.

TRY IT

Exercise 1: Setting Up a Framed Page


All of the HTML and graphics files that appear in the figures throughout this
chapter are pro­­vided on the CD and online at www.learningwebdesign.com/
materials. Copy the directory chap12 to your hard drive to begin.
The step-by-step nature of the chapter will make it easy to follow along. Look
for the “Try It” sidebars at critical points in the frameset development.
STEP 1: Open a new document in an HTML editor or Notepad. Type the
structure of the frameset as shown in Figure 4. Name the document frameset.
html and make sure that you save it in the chap12 directory with the other
files to ensure the pathnames are correct.

4
Setting Up a Frameset Document

If you want to divide the page into vertical frames (columns), use the cols
attribute and specify the width measurement for each column, separated by
commas (Figure 5, left). The number of measurements you provide specifies
the number of vertical frames you’ll create. Similarly, if you want to create The number of measurements
horizontal frames (rows), use the rows attribute, followed by the height mea- you provide specifies the
surement for each row (Figure 5, right). number of frames you’ll
When it comes to specifying the measurements, you have some options, as create.
the next section explains.

<frameset cols="25%,50%,25%"> <frameset rows="*,*">

The cols attribute creates vertical frames. The rows attribute creates horizontal
There are three frames because I provided frames. Two measurement values after the
three measurements after the attribute. attribute create two rows.

Figure 5. Creating framesets using the rows and cols attributes.

HTML TIP

Gridlock
You can combine rows and columns to
make a grid of frames. The frames will
be filled from left to right, top to
bottom. This method gives you less
flexibility than others described in this
chapter.
<frameset rows="*,*"
cols="25%,50%,25%">
<frame src="1.html">
<frame src="2.html">
<frame src="3.html">
<frame src="4.html">
<frame src="5.html">
<frame src="6.html">
</frameset>

5
Setting Up a Frameset Document

Frame measurements
There are three ways to specify sizes for frames:
Absolute pixel values. To make a frame a specific pixel size, enter the num-
Frame measurements
ber of pixels after the rows or cols attribute. The frameset <frameset
can be specified in pixels,
rows="100,400"> creates two horizontal frames, one exactly 100 pixels
percentages, or relative
high, the other exactly 400 pixels high. If the browser window is larger
values. than the combined 500 pixels high, it will enlarge each frame propor-
tionally to fill the window.
Percentages. You can also specify sizes as percentages of the browser win-
dow. The frameset <frameset cols="25%,50%,25%"> creates three col-
umns: the left and right columns always take up 25% of the browser
width, and the middle column takes up 50%, regardless of how the win-
dow is resized.
Relative values. There’s another system that uses asterisks to specify relative
values. The best way to explain this is with an example. The frameset
<frameset cols="100,*"> creates two columns: the left column is exact-
ly 100 pixels wide, and the right column fills whatever portion of the
window is left. This combination of fixed width and flexible width is
one of my personal favorites.
You can also specify relative values in multiples, as in <frameset
cols="100,2*,*">, which creates a 100-pixel-wide column on the left of
the page, then the remainder of the page is divided into two frames; the
middle column is always twice the width of the right column.
That said, let’s start designing the frames for our new page. I’m going to start
Figure 6. I’m designing my cookbook page to with two frames, a narrow one at the top for a banner and the remainder of
have two rows, a narrow one at the top (50 pixels the page for my content (Figure 6).
high) for top-level navigation, and a frame that
fills the remainder of the window for content.

<html>
<head>
<title>From Jen's Cookbook</title>
</head>
<frameset rows="50,*">

50 pixels
</frameset>
</html> The top
frame stays
50 pixels high
regardless of
how the
window is
resized.

6
Setting Up a Frameset Document

Adding and nesting frames


Now I need to enter the frame information for each row. Frames are added
by inserting <frame> elements within the <frameset> (Figure 7). Within each
<frame> element, the src attribute specifies the URL of the document to load
into that frame.
TRY IT

<html>
<head>
Exercise 1 (continued)
<title>From Jen's Cookbook</title> STEP 2: Add two rows to
</head> the frameset as shown in
<frameset rows="50,*"> Figure 7. Save the file and
<frame src="header.html"> take a look in a browser. If
<frame src="tapenade.html"> pages aren’t showing up,
</frameset> make sure that the frameset
</html> document is saved in the same
directory as the other files.

Figure 7. For each frame, I’ve added a <frame> tag that tells the browser which HTML document to display in
that frame.

Wait, I just had an idea. I’d like to take that large bottom frame and divide it
into two vertical frames. I can do this by nesting a second frameset inside my
current frameset. Nesting is done by replacing a <frame> element with a
complete frameset (a <frameset> element with its <frame> elements).
In Figure 8, I’ve swapped out my bottom <frame> for a <frameset> containing
two vertical frames.

TRY IT
<html>
<head>
<title>From Jen's Cookbook</title>
Exercise 1 (continued)
</head> STEP 3: Replace the bottom
<frameset rows="50,*"> frame with a two-column
<frame src="header.html"> frameset as shown in Figure 8.
<frameset cols="150,*"> Save and view the frameset in
Frameset Nested <frame src="links.html"> a browser.
Frameset <frame src="tapenade.html">
</frameset>
</frameset>
</html>

Figure 8. To nest frames (fill one frame with another frameset), simply replace a <frame> with a complete
<frameset>. You can do this as many levels deep as you like. Just make sure you close your <frameset> tags
properly.

7
Setting Up a Frameset Document

I’ve already created the HTML documents (header.html, links.html, and


tapenade.html) that will be displayed in each frame. Let’s take a look at the
framed cookbook page in a browser, as it stands so far (Figure 9).

jenscookbook.html

header.html

links.html

tapenade.html

Figure 9. My framed cookbook page as it looks in the browser. Below you can see the separate HTML documents
that are held together by the frameset.

This is a good start, but I can make some adjustments to make the page less
clunky.

8 Part II: Learning HTML


Setting Up a Frameset Document

Borders
The last decision I can make at the frameset level (i.e, within the <frameset>
element) is whether I want borders to appear around my frames. If you don’t
specify otherwise, frames will be divided by thick 3-D bars (as shown in You can choose whether to
Figure 9). To control borders for the entire frameset, use the frameborder and have 3-D borders display
border attributes in the <frameset> element.* around your frames.
To turn off the borders completely, making a smooth transition between
frames, simply set the border attribute to 0. This works for Netscape
Navigator and Microsoft Internet Explorer, Versions 4 and higher.
You might want to control just the thickness of the borders. If this is the case,
set frameborder to 1 (“on”) and use the border attribute to specify a pixel
thickness.
I definitely don’t want borders around my frames, so I’m turning them off at
the frameset level (Figure 10).
We’ve done everything we can do with the whole frameset. Now let’s see the
kinds of things we can tweak within each frame.

<frameset rows="50,*">
<frame src="header.html">
<frameset cols="150,*">
<frame src="links.html">
<frame src="tapenade.html">
</frameset> TRY IT
</frameset>

By default, frames are


Exercise 1 (continued)
divided by 3-D borders. STEP 4: Turn off the borders
for the frameset using the
<frameset rows="50,*" border="0"> border attribute. Save and
<frame src="header.html"> view.
<frameset cols="150,*">
<frame src="links.html">
<frame src="tapenade.html">
</frameset>
</frameset>

Setting the border to 0


turns off the borders.

Figure 10. Adjusting borders at the frameset level.

* The border attribute is not part of the standard HTML specification, but it works fine in the
current versions of the major browsers.

Chapter 12, Frames 9


NOTE (2007)
The software demonstrated in this Tool Tip is not the most current.
Dreamweaver is now offered by Adobe as part of Creative Suite 3. Adobe
TOOL TIP GoLive is now in version 9. Microsoft no longer offers FrontPage, in favor of
its much improved Microsoft Expression Web.

Creating a Frameset
Here’s how you create a new frameset in three of the more popular authoring programs.

Dreamweaver MX 1
One way to create a
frameset document
is to add a frame 2 Alternatively, you can click on a predefined frame icon from
to the current the Frames panel of the Object window.
document with the
Modify Frameset
3 The Frames window (accessed from the Windows menu) is
menu.
used to manage the frameset and its settings.

4 When you select the whole frameset in the Frames window, you
can make frame-level settings in the Properties window.

GoLive 6
Frames tab
1
First, select the
Frame Editor tab at
the top of the
document window
to switch to the 2 From the Frames tab of the Palette,
Frames Editor view. drag a frame configuration into
This view is used to Frames Editor tab your document window.
set up and organize
the framed 3 Select the frameset by clicking on any
document. border (you can drag the border to resize
the frame) and make your frameset
settings in the Inspector palette.

FrontPage 2002
1
Create a new document and
select the Frames Pages tab.
There are a variety of frame
templates, each with a short
description of suggested use.
Choose the frameset closest to
the layout you want.
2
Pages can then be set or
created for each frame. The
frames can be modified by
moving the frame borders.

10
Frame Appearance and Function

Frame Appearance and Function


At the frame level (that is, within each <frame> element), you can specify
three attributes for the frame: whether it has a scrollbar, the margin width,
and whether users can resize the frame.
This doesn’t seem like much, but remember, everything you see in the
frame—the background color or text alignment, for example—is part of the
HTML document that is filling the frame.The frameset document itself only
has instructions for the frame layout and functionality. DESIGN TIP

Scrolling Space for Scrollbars


When scrollbars are visible,
You control whether the frame has a scrollbar with the scrolling attribute in they take up some of the
the <frame> element. There are three options: width of the frame. So be sure
to figure in the width of a
• The default value is auto, which means that scrollbars will appear only scrollbar when calculating
if the content of the frame is too big to entirely fit in the window. frame sizes in precise pixel
• If you want to make sure that a scrollbar is always available, regardless measurements. On a
Macintosh, scrollbars are 15
of the content, set the scrolling value to yes.
pixels wide; on a PC, they’re
• If you want to make sure that scrollbars never appear to clutter up your 12 pixels wide.
frameset, set the value to no. Be careful with this one, particularly if your
frame contains text. If the fonts are set too large on a viewer’s browser,
there will be no way for her to access content that runs out of the frame
without a scrollbar.
On my frameset, I’d like the top frame to never scroll, because I’m just using
it for a banner (Figure 11). My other frames contain content that could poten-
tially run out of the user’s available browser space, so I’ll allow them to have
scrollbars on an as-needed basis. Because scrolling is set to auto by default, I
don’t need to add any markup to achieve this effect.

<frame src="header.html" scrolling="no">


TRY IT

Exercise 1 (continued)
STEP 5: Turn off scrolling in
the top frame as shown in
Figure 11. Save and view.

Figure 11. I’ve removed the scrollbar from my top frame by setting the scrolling attribute to no in the
<frame> element.

11
Frame Appearance and Function

Setting margins
Browsers automatically add a little space between the edge of the frame and
its contents, just as they do for a web page in the browser. You can control the
BUG ALERT margin amount inside each frame by adding extra space or setting the con-
tents flush to the frame’s edge.
Margins Bug in The marginheight attribute controls the pixel width of the margin at the top
Navigator and bottom edges of the frame. The marginwidth attribute controls the space
There’s a weird bug in on the left and right edges. Figure 12 shows examples of these attributes.
Netscape Navigator Versions
4.0 and earlier that leaves a
1-pixel margin even if the <frameset cols="*,*">
marginheight and marginwidth <frame src="sweetpea.html" marginheight="24" marginwidth="12">
attributes are set to 0. There’s <frame src="sweetpea.html" marginheight="0" marginwidth="0">
not much you can do except </frameset>
camouflage it with a matching
background color or image.
Netscape 6.0 seems to have
corrected the problem. 0px
24px

12px 0px

Figure 12. The marginheight attribute controls the amount of space between the top and bottom edges of the
frame and its contents. marginwidth controls the space on the left and right edges.

I’m going to set both margins to 0 in my top frame, to nestle my banner


graphic as close as possible into the top-left corner (Figure 13).

TRY IT <frame src="header.html" scrolling="no" marginheight="0" marginwidth="0">

Exercise 1 (continued)
STEP 6: Set the margins to 0 in
the top frame as shown in
Figure 13. Save and view.

Figure 13. With marginwidth and marginheight set to 0, my graphic is positioned flush to the top-left
corner of the frame, with no extra space.

12
Frame Appearance and Function

Frame resizing
By default, users can resize your frames, overriding your careful size settings,
simply by clicking on and dragging the border between frames. You can pre-
vent them from doing this by plopping the noresize attribute in the <frame>
element. I’d like to make that top frame stay put, so I will add the noresize
attribute there (Figure 14). (I had to temporarily turn on my frame borders to
demonstrate the noresize trick; I’ll turn them off again for the final prod-
uct.)

By default, when the frame


borders are visible, users can
drag the borders and resize
the frames.

TRY IT

<frameset rows="50,*"> Exercise 1 (continued)


<frame src="header.html" noresize scrolling="no" marginheight="0" STEP 7: Add the noresize
marginwidth="0"> attribute to the top frame as
<frameset cols="150,*"> shown in Figure 14. Save and
<frame src="links.html"> view.
<frame src="tapenade.html">
</frameset>
</frameset>

To keep this from happening,


add noresize to the
<frame> tag of every frame
you want to preserve.

Figure 14. Frames are resizable by default. The noresize attribute prevents this behavior.

Before you go setting all your frames to noresize, consider whether there
might be a good reason to allow resizing (such as to view more text in the
screen). In my example, users aren’t gaining anything by resizing that top
frame, so I restricted the ability to change it.

13
TOOL TIP

Formatting Frames
Here’s how you format individual frames in three of the more popular authoring programs.

Dreamweaver MX

To select a frame, Alt-Click (Windows) or Shift-Option-Click


(Mac).When the frame is selected, the Properties palette will
display all the frame-level options.

GoLive 6

1
While in Frames Editor view,
place the cursor in a frame.

2
You can then control all the frame-level
settings in the Frame Inspector. You can
also preview your HTML document
within the frame by clicking on the
Preview button.

FrontPage 2002 2 Place the cursor in the frame to be


modified and right-click to bring up a
shortcut menu. Go to Frame Properties 3 To set the border, click the Frames Page
and specify the settings to control the button (this window can also be accessed
look of the frame. from File Properties Frames tab).

1 Open the frames page you want to


modify, and click the Normal tab.

14
Targeting Frames

Targeting Frames
Now that you’ve gotten the hang of setting up framed documents, it’s time to
tackle one last aspect of frames: making sure linked documents load into the
correct frame.
When you click on a link in an ordinary browser window, the new page
replaces the current one in the browser window. The same thing happens by
default within a frame. When you click on a link in a frame, the linked
document will load in that same frame (after all, a frame is just a mini–
browser window).
In many cases, however, you want the linked document to load in a different
frame, such as when you have a list of links in one frame and your content
Setting the Target
in another. In these instances, you need to tell the link which frame to use— for a Whole Document
in other words, you need to target a specific frame. If you want all the links on a page to
point to the same window, you can
specify the target in the header of
Naming the frame the document using the <base>
element, as follows:
Before you can target a frame, you need to give it a name using the name
<head>
attribute in the <frame> element 1 (Figure 15, following page). I’d like to load <base target="main">
my content documents into the main frame on the page, so I’ve given that </head>
frame the name “main”. With this specification in the head of
<frame src="salmon.html" name="main"> the document, all the links on that
page will automatically load in the
“main” frame (unless specified
Targeting the frame otherwise in the link). This technique
saves extra typing and keeps the file
Now I can point to that frame from any link 2. My left frame contains a
size down.
document (links.html) with a list of links. Within links.html, I add the
target attribute to each of my links and set the value to “main”. When some-
one clicks on that link, the browser will load the new document in the frame
called “main”:
<a href="risotto.html" target="main">wild mushroom risotto</a><br>

Reserved target names


There are four standardized target names for specific targeting actions. Note
that they all begin with an underscore ( _ ). You should avoid giving frames
names that begin with an underscore because they will be ignored by the
browser. The reserved target names are:
_top
When you set the target to _top, the new document is loaded in the top
level of the browser window, replacing all the frames with a single win-
dow. A document that is linked using target="_top" breaks out of its
frameset and is displayed in the full browser window.

15
Targeting Frames

<frameset rows="50,*" border="0">


<frame src="header.html" scrolling="no" marginheight="0" marginwidth="0">
<frameset cols="150,*">
<frame src="links.html" name="links" >
<frame src="salmon.html" name="main" > 1 First, give the frame a name
</frameset> so you can refer to it later.
</frameset>

jenscookbook.html

<p>
<img src="graphics/maindishes.gif" alt="Main Dishes"><br>
<a href="salmon.html" target="main">garlic salmon</a><br>
<a href="risotto.html" target="main">wild mushroom risotto</a><br>
<a href="blackbean.html" target="main">fish in black bean sauce</a><br>
<a href="clamsauce.html" target="main">linguini with clam sauce</a><br>
</p>

links.html

2 Then, in the html document that


contains the link, use the target
attribute in the anchor tag (<a>)
to call the frame by name.

Loads salmon.html in “main” frame

salmon.html

Now, when a user clicks on that link,


the linked document will open in
the specified frame.

Figure 15. Naming a frame allows you to target


your links to a specific frame.

16
Targeting Frames

_parent
This target name causes the linked document to load into the parent
frame (the frameset that is one step up in the nested frame hierarchy). TIP
This causes some breaking out as well, but only to the next frame Linking between frames can be
level. tricky. Pay attention to what
you’re doing and test all of your
_self links in a browser to make sure
This causes the document to load in the same frame. Since this action is they’re behaving the way you
the default for all frames, you generally don’t need to specify it. However, intend.
it might be useful if you need to override a target set with the <base>
element introduced earlier.
_blank
A link with target="_blank" opens a new browser window to display the TRY IT
linked document. This is not necessarily a frame-related value—you can
use it from any web page. Bear in mind, however, that each time a link Exercise 1 (continued)
that targets _blank is clicked, the browser launches a new window, poten- STEP 8: Name each of
tially leaving the user with a mess of open browser windows. By contrast, the frames as shown in
Figure 15.
when a target window is given a specific name (such as sample or new), it
will be reused by all links that specify that name. STEP 9: Set the appropriate
targets for the links so the
I’m going to need to take advantage of the _top value in my documents. The frameset functions properly:
top frame contains a graphic link to the home page. If I leave it as it is, the • In header.html, make sure
home page will load in that little sliver of a frame. To break out of the frames that the home graphic
and get back to a normal browser window, I’ll target the top level in that link links to the top level of
(Figure 16). the browser window
(Figure 16).
• In links.html, use the
<a href="index.html" target="_top"><img src="graphics/jk-home.gif"
border="0" alt="HOME"></a> <base> element in the
<head> of the document to
make all of the links on the
header.html page link to the main
window.
Save and view the frameset in
the browser. Test the links to
Lo a

be sure that they load in the


ds i

proper frames (a few recipe


nd
ex

tm files have been provided for


.h

l in
“_t o testing). Be sure the links back
p”
to the home page on each
recipe page load in the top
frame.
Note that this is only an
exercise and not a fully
designed and functioning site.
In the files provided there is
no way to get back to the
frameset from the sample
home page document.
Figure 16. The _top target value makes the home page break out of the frames and load in the top level of the
browser window.
17
Content for Users Without Frames

Content for Users Without Frames


The last thing you should add to your frameset document is some content
noframes content prevents
that will display for users without frames-enabled browsers. This benefits
your framed document from users who have older browsers (or text-only browsers) that don’t support
becoming a dead end to frames, as well as users who have turned off frames support in their browser
search engines and users preferences. You place your alternative content between <noframes> tags.
without frames-enabled
Many people simply use a message such as “You need a frames-enabled
browsers.
browser to view this page.” While this is acceptable, it is preferable to put a
full page of content, including links to deeper pages of your site, within the
TRY IT <noframes> tags. For one thing, this provides actual content and navigation
to users who are using non-frames-enabled browsers (they may be using
Exercise 1 (continued) them for a good reason). In addition, it gives major search engines something
STEP 10: Add minimal to index on your page as well as access to content linked to that page. If there
<noframes> content to the are only frameset and frame tags on the page, the page will be ignored.
frameset document. Make
sure that it is useful for users Between the <noframes> tags, add everything you would put in an ordinary
who don’t have frames. non-framed document. This includes the <body> tag with its attributes for
setting background tiles and colors. Figure 17 shows the <noframes> content
I’ve provided for my “From Jen’s Cookbook” frameset.

<html>
<head>
<title>From Jen's Cookbook</title>
</head>
<frameset rows="50,*" border="0" frameborder="0" frameborder="no">
<frame src="header.html" marginwidth="0" marginheight="0" scrolling="no">
<frameset cols="150,*">
<frame src="links.html">
<frame src="tapenade.html" name="main">
</frameset>
</frameset>

<noframes>
<body background="graphics/bkgd-grid.gif">
<center>
<img src="graphics/jensbook.gif">
<p>[NOTE: This page is best viewed with a frames-enabled browser.]</p>
<p>
<img src="graphics/appetizers.gif" alt="Appetizers"><br>
<a href="tapenade.html" target="main">tapenade (olive spread)</a><br>
<a href="purses.html" target="main">black bean phyllo purses</a><br>
<a href="mangosalsa.html" target="main">mango chipotle salsa</a><br>
<a href="springroll.html" target="main">fresh spring rolls</a>
</p>

Figure 17. The content I’ve provided within


<noframes> tags will appear in any browser that
does not support frames. My "noframes" content
provides similar functionality and a similar look to
the framed document.

18
Test Yourself

Test Yourself
Answers to these frames questions can be found in the Appendix.
1. What makes frameset documents different from all other HTML
documents?

2. What are the disadvantages of frames that have made them unpopular
in the the industry?

3. In the space on the right, sketch the frameset that results from the
following code:
a. <frameset cols="*,*,*">

b. <frameset rows="*,3*">

c. <frameset rows="*,*" cols="50%,50%">

4. How do you make a linked document appear in the top level of the
browser, instead of within the frame?

5. Write the code for the frameset shown in Figure 18. Place a document called
empty.html in each frame. Your column and row measurements can be
approximate.

Figure 18. A simple frameset.

19
HTML Review: Frame Tags

HTML Review: Frame Elements


The following is a summary of the elements and attributes we covered in this
chapter:
Tag and attributes Function
<frameset> Indicates the body of a framed document
border="number" Border thickness in pixels when border is on
cols="measurements" Number of columns (vertical frames)
frameborder="1|0" Specifies whether borders appear between the
frames (1 is yes; 0 is no)
rows="measurements" Number of rows (horizontal frames)
<frame> Adds a frame to a framed document
marginwidth="number" Pixel space held on the left edge of the frame
marginheight="number" Pixel space held on the top edge of the frame
name="text" Name of the frame (for targeting)
scrolling="yes|no|auto" Specifies whether scrollbars appear in the frame
src="url" Name of the file to load in the frame
<noframes> Content that will display in a non-frames browser

20

You might also like