Frames Documentation
Frames are quite possibly the most
poorly used HTML tag currently in popular use. Designing a web
site which uses frames efficiently can be complicated and
difficult. In this section of Advanced HTML Tips &
Tricks I'm going to try to explain and document what I
have learned about frames since I first put them on my site. If
you're looking to have specific questions answered, you might
want to check my
Frames FAQ.
You may have noticed that many of
the `big' professional sites have stopped offering frames as the
default configuration for their viewers. Research and surveys
tell us that the majority of web `surfers' DO NOT prefer frames
to one standard page. A single page loads a lot faster, and
allows more text to be displayed on the page at one time. By
adding lots of little boxes, you are taking away from the space
used for providing content to your site.
Before you make the choice to have
frames on your web site or pages, please keep this in mind: a
LARGE number of web users are still using monitors which display
only 640x480. This severely limits their use of your site if half
of it is taken up by navigational or other types of frames.
Now, off to the frames!
First, the Basics: (Everything up to Netscape 3.0 and Microsoft 3.0)
Perhaps the most important
difference between frames and other HTML tags is that they load
other pages. A framed page is a set of directions which tells the
browser how to load normal HTML pages into parts of the browser
window.
There are three major tags used in creating frames:
<FRAMESET>
<FRAME SRC="">
<NOFRAMES>
The <FRAMESET> and <FRAME>
tags are used together to tell the browser how to load each page.
The <FRAMESET> Tag:
The FRAMESET tag tells the
browser how to place each web document in the browser window.
Using the FRAMESET tag you tell the browser the amount of
space (in either rows or columns) you want the frame to take
up in the browser window.
The FRAMESET tag has the COLS
and the ROWS modifiers. The COLS and ROWS modifiers can be
assigned values of pixels, percentages of the browser window
and wildcards (*). Each frame in the COLS or ROWS declaration
is separated by a comma. You can (theoretically) have an
unlimited number of columns and rows on a page, however this
number is very much limited by the amount of memory of the
computer viewing the FRAMESET.
| HTML
Code |
Description |
View Example |
<FRAMESET COLS="100,200">
<FRAME SRC="a.html">
<FRAME SRC="b.html">
</FRAMESET>
|
2
columns, the first is 100 pixels, the second 200
pixels wide |
|
<FRAMESET ROWS="75%,25%">
<FRAME SRC="a.html">
<FRAME SRC="b.html">
</FRAMESET>
|
2 rows,
the first 75% of the browser window, the second 25% |
|
<FRAMESET COLS="70%,*">
<FRAME SRC="a.html">
<FRAME SRC="b.html">
</FRAMESET>
|
2
columns the first, 70% of the browser window, the
second the rest (30%) |
|
<FRAMESET ROWS="200,*">
<FRAME SRC="a.html">
<FRAME SRC="b.html">
</FRAMESET>
|
2 rows,
the first 200 pixels, the second the remainder of the
browser window |
|
<FRAMESET ROWS="3*,*">
<FRAME SRC="a.html">
<FRAME SRC="b.html">
</FRAMESET>
|
2 rows,
the first is 3/4ths of the browser window, the second
1/4th. |
|
<FRAMESET COLS="30%,70%">
<FRAME SRC="a.html">
<FRAMESET ROWS="40%,*">
<FRAME SRC="b.html">
<FRAME SRC="c.html">
</FRAMESET>
</FRAMESET>
|
This
FRAMESET creates a column 30% of the window in the
left side of the page, and two rows, the first 40% of
the window on the left side of the page. |
|
Lets say you want both rows
and columns in your FRAMESET.
I call this layering
framesets. If you view the document source of this page, you
will see a very similar design which I used to create this
page.
The <FRAME> Tag:
The frame tag tells the
browser where to find the document which it will load in that
frame, and how to access it from other programs.
<frame SRC="URL">
This is identical to the frame tags I've used above. It
loads the URL into whatever space is allocated to it by
parent frameset.
The NAME modifier gives an
identity to the frame. The main purpose of doing this is to
allow other frames to load links into DIFFERENT frames on the
same page. This is done through adding
target="name-of-frame" to the link you want to load
in a different page. Keep in mind that in some cases frame
names are CASE SENSITIVE.
The FRAMESET:
<FRAMESET ROWS="50%,50%">
<FRAME SRC="a.html" NAME="A">
<FRAME SRC="b.html" NAME="B">
</FRAMESET>
The Document Link:
<A HREF="c.html" TARGET="A">LOAD C IN ANOTHER FRAME</A>
I've got a lot more to say
about the TARGET tag and LOADING DOCUMENTS INTO OTHER WINDOWS
in the FAQ section.
The frame tag has a number of
modifiers related to how to display the page in its frame.
The first of these are the
margins. Up until Netscape 3.0 beta 5, it wasn't possible to
change the margin value of a normal page, but you could (and
still can) set these values for each frame in your FRAMESET.
There are two tags,
marginwidth and marginheight which can be assigned an integer
value which refers to the number of pixels from the border
which the text will be displayed.
<FRAME SRC="a.html" MARGINWIDTH=60 MARGINHEIGHT=60>
<FRAME SRC="b.html" MARGINWIDTH=0 MARGINHEIGHT=0>
<FRAME SRC="c.html" MARGINWIDTH=30 MARGIN HEIGHT=2>
You can also force the
scroll bar to be either on, off, or auto. The default
value for SCROLLING is AUTO.
<FRAME SRC="a.html" SCROLLING=YES>
<FRAME SRC="b.html" SCROLLING=NO>
<FRAME SRC="c.html" SCROLLING=AUTO>
It is possible to prevent
the user from dragging a frame to a different size with
the NORESIZE tag. This tag can result in user-unfriendly
pages, particularly for user running with a low
resolution.
<FRAME SRC="a.html" NORESIZE>
The <NOFRAMES> Tag:
Anything inside the NOFRAMES
tag is ignored by all browser which support frames, but is
shown to all browsers which don't support frames. You can
then either place a message to get a frames enhanced browser,
a link to one of the frames, or the text of the main page in
the FRAMESET.
<NOFRAMES>
If you can see this, GET A
<A HREF="http://home.netscape.com/">NEW BROWSER</A>!!!!
</NOFRAMES>
Changes in Frames in
Netscape 3.0 and Internet Explorer:
With Netscape 3.0 came the
possibility of hidden frame borders. Hidden frame borders
weren't a new idea, they've been around in Microsoft's
Internet Explorer for a while, but I suspect you'll start
seeing more Netscape compatible hidden frame borders in
the future. The tag FRAMEBORDER can be set to either YES
or NO. This tag works for BOTH Netscape and Internet
Explorer. In order for a frame border to be hidden ALL
adjacent frame borders must be set to NO. The default
value of FRAMEBORDER in Netscape is YES, in Internet
Explorer is NO.
HIDDEN FRAME BORDERS:
<FRAME SRC="a.html" FRAMEBORDER=NO>
<FRAME SRC="a.html" FRAMEBORDER=YES>
Netscape Specific Tags:
Netscape also provides the ability
to set the SIZE of the border between two frames. This is
accomplished with the BORDER tag which is placed in the parent
FRAMESET. The BORDER value is the number of pixels of the width
of the border. Setting BORDER to 0 will automatically hide the
frames.
<FRAMESET BORDER=4>
<FRAMESET BORDER=0>
Guess What? You can also set the
BORDERCOLOR of a frame as well. This value can be placed in
either the <FRAME> or the <FRAMESET> tag. The value
is the RGB color of the border. (Just like setting body
link/background colors and font colors)
<FRAME
BORDERCOLOR="#FF0000">
What happens when two frames have
different border colors and share an edge? Netscape
says the following:
The attribute appearing in
the outer FRAMESET has the lowest priority. This is in turn
overridden by the attribute used in a nested FRAMESET tag.
Finally, the BORDERCOLOR attribute used in a FRAME tag
overrides all previous FRAMESET tag uses. If there is a
conflict for two colors of equal priority both set on the
same edge, the behavior is undefined.
Nesting Frames
It is possible to Nest
framesets by calling the URL of a FRAMESET from a FRAMESET.
Because it is possible to NAME each document you load, this
is an easy way of loading or changing multiple frames at the
same time!
Targeting Frames (See Below)
Frames FAQ
TARGETING the SOURCE:
How do I get my link to load in a
different frame?
Use the TARGET attribute. The
target attribute can be a part of a link statement, an image
map, a form and more. For each of the four cases below, if a
frame or window with the name doesn't exist, the browser will
create a new window with that name.
<A
TARGET="framename/windowname"
HREF="URL"> Loads the link in either the frame
<AREA
TARGET="framename"> Same as above, but for image
maps
<FORM
TARGET="framename"> Loads the results of the CGI
program into a new window.
<BASE
TARGET="framename">This tag is placed in the
<HEAD> of a normal HTML page. All links in that page
which aren't given specific targets will be loaded in the
BASE location.
How do I get my link to
load in the ENTIRE page?
How do I get my link to
load in a NEW window?
Magic Target Names:
There are 4 magic target names
which can be can be used instead of a framename location.
Target="_blank"
loads the document in a new window.
Target="_parent"
loads the document in the parent FRAMESET
Target="_self" loads
the document in the current frame
Target="_top" loads
the document in the full browser window (removes all frames)
How do I turn off frames
and dynamically choose what document is loaded into the full
page?
JavaScript NOFRAME
<input type=button
name="NO FRAMES"
onclick="top.location.href=top.frames[x].location.href">
Frames are assigned
numbers based on the order which they are declared in the
frameset starting with frame 0.
In the following code:
<FRAMESET COLS="30%,70%">
<FRAME SRC="a.html">
|
frames[0]
|
<FRAMESET ROWS="40%,*">
<FRAME SRC="b.html">
|
frames[1]
|
<FRAME SRC="c.html">
</FRAMESET>
</FRAMESET>
|
frames[2] |
frames[x] refers to the
name of the frame which is declared in the <FRAMESET>.
How do I load multiple
frames with only one click? (I want a link to load two
different unrelated frames)
There are two ways to solve
this problem.
One is using Nested Frame
Documents. The other is with this nifty JavaScript code:
JavaScript MULTIFRAME
<input type="button" name="LOADTWO"
onclick="top.frames[x].location.href='URL1';
top.frames[x].location.href='URL2';">
Remember: Don't forget to put <form></form> tags around the button.
In this example, x in frames[x] refers to either the frame number, or the name of the frame you
want to change. So, x should have two different values. Netscape and Internet Explorer support named
frames in versions 3.0 and above, however Netscape 2.0 does not support of named frames.
Tip: You can use this same code as a link:
<a href="javascript:top.frames[x].location.href='URL1';
top.frames[x].location.href='URL2';">Change Frames</a>
