Chapter
17
Hour 17
Interactive Layout with Frames
One major limitation of HTML in the old days was
that you could see only one page at a time. Frames overcome this limitation by dividing
the browser window into multiple HTML documents. Like tables, frames allow you to arrange
text and graphics into rows and columns of text and graphics.
However, unlike a table cell, any frame can contain
links that change the contents of other frames (or itself). For example, one frame could
display an unchanging table of contents while the other frames change based on which links
the reader follows.
Just A Minute: Frames are only supported by
Netscape Navigator version 2.0 or higher and Microsoft Internet Explorer version 3.0 or
higher. You'll see how to provide alternative content for other browsers in the
"Supporting Frameless Browsers" section near the end of this chapter.
To Do: Frames are basically a way of arranging and
presenting several Web pages at once. You'll be able to learn the material in this chapter
faster if you have a few interrelated Web pages all ready before you continue.
- If you have an index page or table of contents for
your Web site, copy it to a separate directory folder so you can experiment with it
without changing the original. Copy a few of the pages that the index links to as well.
- As you read this chapter, try modifying the sample
frames I present to incorporate your own Web pages.
What Are
Frames?
At first glance, Figure 17.1 may look like an
ordinary Web page, but it is actually three separate Web pages all displayed in the same
Netscape Navigator window. Each of these pages is displayed in its own frame, separated by
horizontal bars.
New Tem: A frame is a rectangular region
within the browser window that displays a Web page, alongside other pages in other frames.
The main advantage of using frames becomes apparent
when a reader clicks on one of the links in the bottom frame of Figure 17.1. The top and
bottom frames will not change at all, but a new page will be loaded and displayed in the
middle frame, as in Figure 17.2.
Figure 17.1. Frames
allow more than one Web page to be displayed at once.
Figure 17.2. Clicking
on "See Us Make It" in Figure 17.1 brings up a new middle page, but leaves the
top and bottom frames the same.
Creating a
Frameset Document
How did I make the site in Figures 17.1 and 17.2?
First, I created the contents of each frame as an ordinary HTML page. These pages (listed
in Figures 17.4 through 17.7) don't contain any tags that you haven't already seen in
other chapters.
To put them all together, I used a special kind of
page called a frameset document.
A frameset document actually has no content. It only
tells the browser which pages to load, and how to arrange them in the browser window.
Figure 17.3 shows the frameset document for the Sandiwood Farm site in Figures 17.1 and
17.2.
Figure 17.3. If
you load this frameset document in Netscape Navigator, you'll see the site in Figure 17.1.
In Figure 17.3, instead of a <BODY>
tag, there is a <FRAMESET> tag. No tags that would normally be contained in
a <BODY> tag can be within the <FRAMESET> tag. The <FRAMESET>
tag in Figure 17.3 includes a ROWS attribute, meaning that the frames should be
arranged on top of each other like the horizontal rows of a table. If you want your frames
to be side-by-side, use a COLS attribute instead of ROWS.
You must specify the sizes of the ROWS or COLS,
either as precise pixel values or as percentages of the total size of the browser window.
You can also use an asterisk (*) to indicate that a frame should fill whatever
space is available in the window. If more than one frame has an * value, the
remaining space will be allotted equally between them.
In Figure 17.3, <FRAMESET
ROWS="80,*,80"> means to split the window vertically into three frames.
The top and bottom frames will be exactly 80 pixels tall, and the middle frame will take
up all the remaining space in the window. The top frame contains the document banner.asp,
and the bottom frame contains bottom.asp.
Time Saver: Because you can't predict the
size of the window that someone will view your Web page in, it is usually safest to use
percentages rather than exact pixel values to dictate the size of the rows and columns.
For example, to make a left frame 20 percent of the width of the browser window with a
right frame taking up the remaining 80 percent, you would type
<FRAMESET COLS="20%,80%">
An exception to this rule would be when you want a
frame to contain a single image of a certain size; then you would specify that size in
pixels and add a few pixels for the frame borders. This is the case in Figure 17.3, where
the background images for the "boards" are exactly 80 pixels thick. In any case,
if you specify any frame size in pixels, there must also be at least one frame in the same
frameset with a variable (*) width so that the document can be displayed in a
window of any size.
The
<FRAME> Tag
Within the <FRAMESET> and </FRAMESET>
tags, you should have a <FRAME> tag indicating which HTML document to
display in each frame. (If you have fewer <FRAME> tags than the number of
frames defined in the <FRAMESET> tag, any remaining frames will be left
blank.) You don't need to specify a closing </FRAME> tag.
Include a SRC attribute in each <FRAME>
tag, with the address of the Web page to load in that frame. (You can insert the address
of an image file instead of a Web page if you just want a frame with a single image in
it.)
You can include any HTML page you want in a frame.
For example, the middle frame of Figure 17.1 is listed in Figure 17.5. For smaller frames,
however, it's a good idea to create documents specifically for the frames with the reduced
display area for each frame in mind. The top frame in Figure 17.1, for instance, is listed
in Figure 17.4. It is much shorter than most Web pages, because it was designed
specifically to fit in a frame 80 pixels tall.
Figure 17.4. This
page was designed specifically to fit in the top frame of Figures 17.1 and 17.2.
Figure 17.5. This
ordinary Web page appears in the middle frame in Figure 17.1.
Linking
Between Frames and Windows
The real fun begins when you give a frame a name
with the <FRAME NAME> attribute. You can then make any link on the page
change the contents of that frame using the <A TARGET> attribute. For
example, Figure 17.3 includes the following tag:
| <FRAME SRC="main.asp"
NAME="main"> |
This displays the main.asp page in that
frame when the page loads, and names the frame "main." (The frame name doesn't
have to match the name of its contents. It just happens to in this example.)
In the bottom frame, listed in Figure 17.6, you will
see the following link:
| <A HREF="makeit.asp"
TARGET="main">See us make it.</A> |
When the user clicks this link, the makeit.asp
is displayed in the frame named main (the middle frame). To accomplish this sort
of interactivity before the invention of frames, you would have had to use complex
programming or scripting languages. Now you can do it with a simple link!
If the TARGET="main" attribute
hadn't been included, the makeit.asp page would be displayed in the current
(bottom) frame instead.
Figure 17.6. This
is the bottom frame in Figure 17.1.
Time Saver: When you include the TARGET
attribute in a link, you can use a few special frame names in addition to the names you
have defined with FRAME NAME: n _blank loads the link into a
new, unnamed window. n _self loads the link into the current frame,
replacing the document now being displayed in this frame. n _top loads
the link into the entire browser window. n _parent loads the link over
the parent frame if the current frame is nested within other frames (This name is the same
as _top unless the frames are nested more than one level deep). Note that all
other names beginning with an underscore (_) will be ignored.
Margins,
Borders, and Scrolling
In addition to the NAME attribute, the <FRAME>
tag can take the following special frame-related attributes:
- MARGINWIDTH: Left and right margins of the
frame (in pixels)
- MARGINHEIGHT: Top and bottom margins of the
frame (in pixels)
- SCROLLING: Display scrollbar for the frame?
("yes" or "no")
- NORESIZE: Don't allow this frame to be
resized by the user
MARGINWIDTH and MARGINHEIGHT are
pretty self-explanatory, but each of the other attributes is discussed in detail in the
next few paragraphs.
Normally, any frame that isn't big enough to hold
all of its contents will have its own scrollbar(s). The middle frames in Figures 17.1 and
17.2 are examples. If you don't want a particular frame to ever display scrollbars, you
can put SCROLLING=NO in the frame tag. Conversely, SCROLLING=YES forces
both horizontal and vertical scrollbars to appear, whether or not they are needed.
You might wonder why I included SCROLLING=NO for the top and bottom <FRAME>
tags in Figure 17.3. I did so because the images in those frames don't quite fit within
the 80 pixels I allowed, when you count the margin of the page, too. So Netscape Navigator
displays scrollbars that only scroll down a few pixels, and have no real purpose. Rather
than make the frame bigger (and take up valuable window real estate with empty margin
space), I just turned off the scrollbars. The only situation I can think of where you
might want to use SCROLLING=YES is if some graphics won't line up right unless
you can count on the scrollbars always being there. Chances are, you'll probably never
need SCROLLING=YES.
People viewing your frames can ordinarily resize them by grabbing the frame border with
the mouse and dragging it around. If you don't want anyone messing with the size of a
frame, put NORESIZE in the <FRAME> tag.
Both Microsoft Internet Explorer and Netscape Navigator allow you to control the size of
the frame borders, or eliminate the borders altogether. Unfortunately, Microsoft and
Netscape do not yet agree on how frame borders should be controlled, so you need to use
two different sets of non-standard HTML tags. For Microsoft Internet Explorer, you can
make the borders disappear by including FRAMEBORDERS=NO in the <FRAMESET>
tag. This makes a frame document look just like a regular Web page, with no ugly lines
breaking it up. The FRAMESPACING attribute also lets you specify the number of
pixels between frames in a frameset. For Netscape Navigator, use BORDER=0 in the <FRAMESET>
tag to eliminate borders, or BORDER= followed by a number of pixels to change the
size of the frame borders. If you want borderless frames to show up in both Netscape
Navigator and Microsoft Internet Explorer, type FRAMEBORDERS=NO BORDER=0 in your <FRAMESET>
tag (see Figures 17.7 and 17.8).
Nested
Frames
By nesting one <FRAMESET> within
another, you can create rather complex frame layouts. For example, the document shown in
Figure 17.7 and listed in Figure 17.8 has a total of five frames. A COLS frameset
is used to split the middle frame of the ROWS frameset into three pieces.
Figure 17.7. Five
frame layout
Figure 17.8. Listing
of Figure 17.7
The two side pieces contain the simple page in
Figure 17.9, which is nothing but a background tile. The net effect is to surround the
changing middle frame with a static wooden "picture frame."
Figure 17.9. Header
listing
Supporting
Frameless Browsers
After the framesets in Figure 17.8, I included a
complete Web page between the <BODY> and </BODY> tags.
Notice that this doesn't appear at all in Figure 17.7. All Web browsers that support
frames will ignore anything between the <NOFRAME> and </NOFRAME>
tags.
To users of older Web browsers that don't support
frames, the page listed in Figure 17.8 looks like Figure 17.10.
Figure 17.10. Web
browser unable to support frames
Because some browsers still do not support frames,
it is probably wise to include alternative content with the <NOFRAME> tag.
If nothing else, just include a note recommending that people get either Microsoft's or
Netscape's browser to see the frames.
Some Web page publishers actually produce two versions of their site--one with frames, and
one without. You can save yourself that hassle by simply including links between all the
pages that will appear in your primary frame. For example, all the pages that appear in
the middle frame in this chapter's sample site are linked together with ordinary links
(that don't use TARGET). You can get all the information from the site by
starting at the main.asp page instead of the syrup.asp frameset
document.
Summary
In this chapter, you learned how to display more
than one page at a time by splitting the Web browser window into frames. You learned to
use a frameset document to define the size and arrangement of the frames, as well as which
Web page or image will be loaded into each frame. You saw how to create links that change
the contents of any frame you choose, while leaving the other frames unchanged. You also
discovered several optional settings that control the appearance of resizable borders and
scrollbars in frames. Finally, you saw how to nest framesets to create complex frame
layouts.
Table 17.1 summarizes the tags and attributes
covered in this chapter.
Table 17.1. HTML tags and attributes
covered in Chapter 17.
| Tag |
Attribute |
Function |
| <FRAMESET>...</FRAMESET>
|
|
Divides the
main window into a set of frames that can each display a separate document. |
| |
ROWS="..."
|
Splits the
window or frameset vertically into a number of rows specified by a number (such as 7), a
percentage of the total window width (such as 25%), or as an asterisk (*) indicating that
a frame should take up all the remaining space, or divide the space evenly between frames
(if multiple * frames are specified). |
| |
COLS="..."
|
Works similar
to ROWS, except that the window, or frameset, is split horizontally into columns.
|
| |
FRAMESPACING="..."
|
Space between
frames, in pixels. (Microsoft Internet Explorer 3.0 only.) |
| |
FRAMEBORDER="..."
|
Specifies whether or not
to display a border for the frames. Options are YES and NO. (Microsoft
Internet Explorer 3.0 only.) |
| |
BORDER="..."
|
Size of the frame borders
in pixels. (Netscape Navigator only.) |
| <FRAME> |
|
Defines a single frame
within a <FRAMESET>. |
| |
SRC="..."
|
The URL of the document to
be displayed in this frame. |
| |
NAME="..."
|
A name to be used for
targeting this frame with the TARGET attribute in <A HREF> links. |
| |
MARGINWIDTH="..."
|
The amount of space (in
pixels) to leave to the left and right side of a document within a frame. |
| |
MARGINHEIGHT="..."
|
The amount of space (in
pixels) to leave above and below a document within a frame. |
| |
SCROLLING="..."
|
Determines whether or not
a frame has scrollbars. Possible values are YES, NO, and AUTO. |
| |
NORESIZE |
Prevents the user from
resizing this frame (and possibly adjacent frames) with the mouse. |
| <NOFRAME>...</NOFRAME>
|
|
Provides an
alternative document body in <FRAMESET> documents for browsers that do not
support frames (usually encloses <BODY>...</BODY>). |
Q&A
- Q Once I have some frames, how do I get rid of
them and go back to a single page again?
A Link to the page you want to display, and include TARGET="_top"
in the <A> tag. This page will take up the entire browser window and
eliminate all frames (unless the page you load is a frameset document, too).
Q Can I display other people's Web pages from the Internet in one frame, and my own pages
in another frame at the same time? What if those sites use frames, too?
A You can load any document from anywhere on the Internet (or an intranet) into a
frame. If the document is a frameset, its frames will be sized to fit within the existing
frame you load it into.
For example, you could put a hotlist of your favorite links in one frame, and have the
pages that those links refer to appear in a separate frame. This makes it easy to provide
links to other sites without risking that someone will get "lost" and never come
back to your own site. Note, however, that if any link within that site has TARGET="_top",
it will replace all your frames.
Q Can I make my pages appear in two separate browser windows instead of two frames within
the same window?
A Yes. Just put TARGET="_blank" in any <A> link tag
to open a new browser window for the page the link leads to. The contents of the current
browser window won't change, though they probably will be hidden behind the new window
when it appears.
Q Do I need to put a <TITLE> in all my frames? If I do, which title will be
displayed at the top of the window?
A The title of the frameset document is the only one that will be displayed. But it's
a good idea to give all your pages titles just in case somebody opens one by itself,
outside any frame.
Quiz
Questions
- 1. Write the HTML to list the names Mickey,
Minnie, Donald, Goofy, and Pluto in a frame taking up the left 25 percent of the browser
window. Make it so that clicking on each name brings up a corresponding Web page in the
right 75 percent of the browser window.
2. Write a frameset document to make the frame layout pictured below.
Answers
1. You need seven separate HTML
documents. The first document is the frameset:
<HTML><HEAD><TITLE>Our Friends</TITLE></HEAD> <FRAMESET
COLS="25%,75%"> <FRAME SRC="index.asp"> <FRAME
SRC="mickey.asp" NAME="mainframe"> </FRAMESET> </HTML>
Next, you need the index.asp document for the left frame:<HTML><HEAD><TITLE>Our Friends
Index</TITLE></HEAD> <BODY> Pick a friend:<P> <A
HREF="mickey.asp" TARGET="mainframe">Mickey</A><P>
<A HREF="minnie.asp"
TARGET="mainframe">Minnie</A><P> <A
HREF="donald.asp" TARGET="mainframe">Donald</A><P>
<A HREF="goofy.asp" TARGET="mainframe">Goofy</A><P>
<A HREF="pluto.asp" TARGET="mainframe">Pluto</A><P>
</BODY></HTML>
Finally, you need the five HTML pages named mickey.asp, minnie.asp, donald.asp, goofy.asp,
and pluto.asp. These will contain the information about each friend.
2. <HTML><HEAD><TITLE>Nested Frames</TITLE></HEAD>
<FRAMESET ROWS="*,*"> <FRAMESET COLS="*,*,*"> <FRAME
SRC="top1.asp"> <FRAME SRC="top2.asp"> <FRAME
SRC="top3.asp"> </FRAMESET> <FRAMESET COLS="*,*">
<FRAME SRC="bottom1.asp"> <FRAME SRC="bottom2.asp">
</FRAMESET> </FRAMESET> </HTML> |
Activities
- In Chapter 22, "HTML Tags for Site
Management," you'll find out how to make a page that loads another page automatically
after a specified time interval. When you combine this trick with frames, you can create
all sorts of interesting animated layout effects.
|
MS Access
1109
C++
1222
HTML
584
JavaScript
616
Vbscript
873
Oracle
473
VC++
875
SQL
2959
XML
514
Java
814
Perl
455
Linux
451
