Frames
Simple Examples
Simple Examples |
No Frames |
Borders and Borderless Frames |
Nested Framesets |
Frame Margins |
Naming Frames & Targeting Links |
Frames Exercise
Let's begin learning how pages that use frames are constructed
by first looking at a few very simple schematic examples.
In each case we will show the HTML code that is used to
create the frame set and load files into the various frames.
Most of this code is shown in a blue
font to set off the code from the surrounding discussion.
In some cases, portions of the HTML are shown in a red
font to emphasize important differences in two sections
of HTML that we are comparing. We will also illustrate the
frame set that this code creates by showing the frames in
a new broswer window that we open with Javascript.
Don't be confused by our use of new windows to illustrate
the frame sets. You don't need to use a new browser
window to use frames. We only open the example frame sets
in new windows here:
1)
|
so you can simultaneously view the frame set code
and the frames that the code creates, and
|
2)
|
to avoid the possibility of confusion that might
result if we were to open one or more new frame
sets inside the frames we're already using for webTeacher.
|
Also note that we open the new windows with Javascript
here rather than with HTML simply because we want the new
windows to have minimum browser adornments (no point having
extra buttons and menus getting in the way) and because
we want to be able to control the size of the new windows.
A little later we'll discuss how the size of a frame set
relates to the size of window that contains the frame set.
Very Simple Frame Sets
- Two Rows or Two Columns
Two Rows - Let's begin our consideration
of frames with Example
1. This is a frame set with two rows: the top frame
takes up 20% of the available vertical space and the bottom
frame takes up 80% of the available vertical space.
The HTML code used to create this first frame set is:
<frameset rows="20%,80%">
<frame src="file1.html">
<frame src="file2.html">
</frameset>
|
Two Columns - As our second example, here
is a frame set with two columns: Example
2. The left frame takes up 20% of the available horizontal
space, and the right frame takes up 80% of the available
horizontal space.
The HTML code used to create this second frame set is:
<frameset cols="20%,80%">
<frame src="file1.html">
<frame src="file2.html">
</frameset>
|
The red text, as we mentioned
earlier, is used here to indicate the only difference in
the HTML code for the two examples.
The most important things to notice in these examples
are:
- The code to create a frame set is enclosed
by the frameset tag. <frameset>
marks the beginning of the set and </frameset>
marks the end.
- There must be at least one attribute of
this tag to specify the "geometry" of the frame set. In
Example 1, the HTML indicates that the frame set will
consist of two "row" frames, i.e., two frames with one
on top of the other. In Example 2, the HTML indicates
that the frame set will consist of two "column" frames,
i.e., two frames with one beside the other. The number
of rows or columns is indicated by the number of
values that appear in the comma-delimited list after
either the rows or cols
attribute of the frameset tag.
- Inside the frameset tag there is one frame
tag for each frame in the frame set. Each frame tag has
a src attribute that specifies
the file that is to be loaded into that frame. The first
frame tag goes with the first (topmost or leftmost) frame
in the set. The next frame tag goes with the next (below
or to the right) frame in the set, etc.
The frameset and frame tags may have additional attributes
that will allow further customization of a frame set and/or
endow the frame set with additional functionality. We begin
our discussions by considering only the minimum attributes
that these tags must have; we'll take a look at some
of the other features later.
In these examples file1.html and file2.html are very simple
files; each just has a short piece of text on a solid color
background:
file1.html
|
|
<html>
<head>
<title>File 1</title>
</head>
<body bgcolor="#ff0000">
File 1
</body>
</html>
|
|
file2.html
|
|
<html>
<head>
<title>File 2</title>
</head>
<body bgcolor="#0000ff">
File 2
</body>
</html>
|
|
Here is file1.html
displayed in a window by itself, and here is file2.html
displayed by itself. We chose these simple files to load
into the frame set because we wanted to emphasize the structure
of the frame set and how to create it, not obscure matters
with particular material in the files that are loaded into
the two frames.
In fact, however, you can load into any frame any HTML
file (even a full frame set), any image file, or any other
type of file that can be displayed inline on a web page.
The files can, of course, be either local files or files
anywhere on the web, as long they are specified with the
correct local path or URL.
Example 1 Reversed
You've probably guessed by now that if you want to interchange
the frames in our first example, all you need to do is switch
the values in the list assigned to rows:
<frameset rows="80%,20%">
<frame src="file1.html">
<frame src="file2.html">
</frameset>
|
Here's the new frame set this modified code creates:
Example 3.
But now file1.html is in the large frame while file2.html
is in the small frame. If we also want to switch the files
as well as the two frames to get
Example
3a, it should be clear what we need to do:
<frameset rows="80%,20%">
<frame src="file2.html">
<frame src="file1.html">
</frameset>
|
|