Intro to Frames
With frames - which divide Web pages into multiple,
scrollable regions - you can present information in a more
flexible and useful fashion. Each region, or frame, has
several features:
- It can be given an individual URL, so it can load
information independent of the other frames on the page;
- It can be given a NAME, allowing it to be targeted by
other URLs, and;
- It can resize dynamically if the user changes the
window's size. (Resizing can also be disabled, ensuring a
constant frame size.)
These properties offer new possibilities:
- Elements that the user should always see, such as
control bars, copyright notices, and title graphics can be
placed in a static, individual frame. As the user
navigates the site in "live" frames, the static frame's
contents remain fixed, even though adjoining frames
redraw.
- Table of contents are more functional. One frame can
contain TOC links that, when clicked, display results in
an adjoining frame.
- Frames side-by-side design allows queries to be posed
and answered on the same page, with one frame holding the
query form, and the other presenting the results.
Frames are generated by three things: FRAMESET
tags, FRAME tags, and Frame Documents.
FRAME DOCUMENT
A Frame Document has a basic structure very much like
your normal HTML document, except the BODY container
is replaced by a FRAMESET container which describes
the sub-HTML documents, or Frames, that will make up the
page.
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
FRAME SYNTAX
Frame syntax is similar in scope and complexity to that
used by tables, and has been designed to be quickly
processed by Internet client layout engines.
<FRAMESET>
- This is the main container for a Frame. It has 2
attributes ROWS and COLS. A frame document
has no BODY, and no tags that would normally be placed in
the BODY can appear before the FRAMESET tag, or the
FRAMESET will be ignored. The FRAMESET tag has a matching
end tag, and within the FRAMESET you can only have other
nested FRAMESET tags, FRAME tags, or the NOFRAMES tag.
- ROWS="row_height_value_list"
- The ROWS attribute takes as its value a comma
separated list of values. These values can be absolute
pixel values, percentage values between 1 and 100, or
relative scaling values. The number of rows is implicit
in the number of elements in the list. Since the total
height of all the rows must equal the height of the
window, row heights might be normalized to achieve this.
A missing ROWS attribute is interpreted as a single row
arbitrarily sized to fit.
-
- Syntax of value list.
- value
- A simple numeric value is assumed to be a fixed
size in pixels. This is the most dangerous type of
value to use since the size of the viewer's window can
and does vary substantially. If fixed pixel values are
used, it will almost certainly be necessary to mix
them with one or more of the relative size values
described below. Otherwise the client engine will
likely override your specified pixel value to ensure
that the total proportions of the frame are 100% of
the width and height of the user's window.
- value%
- This is a simple percentage value between 1 and
100. If the total is greater than 100 all percentages
are scaled down. If the total is less than 100, and
relative-sized frames exist, extra space will be given
to them. If there are no relative-sized frames, all
percentages will be scaled up to match a total of
100%.
- value*
- The value on this field is optional. A single '*'
character is a "relative-sized" frame and
is interpreted as a request to give the frame all
remaining space. If there exist multiple
relative-sized frames, the remaining space is divided
evenly among them. If there is a value in front of the
'*', that frame gets that much more relative space.
"2*,*" would give 2/3 of the space to the first frame,
and 1/3 to the second.
-
- Example for 3 rows, the first and the last being
smaller than the center row:
<FRAMESET ROWS="20%,60%,20%">
Example for 3 rows, the first and the last being fixed
height, with the remaining space assigned to the middle
row:
<FRAMESET ROWS="100,*,100">
- COLS="column_width_list"
- The COLS attribute takes as its value a comma
separated list of values that is of the exact same
syntax as the list described above for the ROWS
attribute.
The FRAMESET tag can be nested inside other FRAMESET tags.
In this case the complete subframe is placed in the space
that would be used for the corresponding frame if this had
been a FRAME tag instead of a nested FRAMESET. -
- <FRAME>
- This tag defines a single frame in a frameset. It has
6 possible attributes: SRC, NAME,
MARGINWIDTH, MARGINHEIGHT, SCROLLING,
and NORESIZE. The FRAME tag is not a container so
it has no matching end tag.
-
- SRC="url"
- The SRC attribute takes as its value the URL of the
document to be displayed in this particular frame.
FRAMEs without SRC attributes are displayed as a blank
space the size the frame would have been.
- NAME="window_name"
- The NAME attribute is used to assign a name to a
frame so it can be targeted by links in other documents
(These are usually from other frames in the same
document.) The NAME attribute is optional; by default
all windows are unnamed.
-
- Names must begin with an alphanumeric character.
- Named frames can have their window contents targeted
with the new TARGET attribute.
- MARGINWIDTH="value"
- The MARGINWIDTH attribute is used when the document
author wants some control of the margins for this frame.
If specified, the value for MARGINWIDTH is in
pixels. Margins can not be less than one-so that frame
objects will not touch frame edges-and can not be
specified so that there is no space for the document
contents. The MARGINWIDTH attribute is optional; by
default, all frames default to letting the browser
decide on an appropriate margin width.
- MARGINHEIGHT="value"
- The MARGINHEIGHT attribute is just like MARGINWIDTH
above, except it controls the upper an lower margins
instead of the left and right margins.
- SCROLLING="yes|no|auto"
- The SCROLLING attribute is used to describe if the
frame should have a scrollbar or not. Yes results
in scrollbars always being visible on that frame. No
results in scrollbars never being visible. Auto
instructs the browser to decide whether scrollbars are
needed, and place them where necessary. The SCROLLING
attribute is optional; the default value is auto.
- NORESIZE
- The NORESIZE attribute has no value. It is a flag
that indicates that the frame is not resizable by the
user. Users typically resize frames by draggin a frame
edge to a new position. Note that if any frame adjacent
to an edge is not resizable, that entire edge will be
restricted from moving. This will effect the
resizability of other frames.The NORESIZE attribute is
optional; by default all frames are resizable.
-
- <NOFRAMES>
- This tag is for content providers who want to create
alternative content that is viewable by non-Frame-capable
clients. A Frame-capable Internet client ignores all tags
and data between start and end NOFRAMES tags.
EXAMPLES
This example compares Frame syntax and TABLE syntax, and
will show the HTML source used to display the layout below.
+----------------------------------------------------------+
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| |-----------------------------+
| | |
| | |
| | |
| | |
+----------------------------| |
| | |
| | |
| | |
| | |
| |-----------------------------+
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
+----------------------------------------------------------+
THE ABOVE
LAYOUT USING
TABLES
<TABLE WIDTH="100%" HEIGHT="100%" BORDER>
<TR><TD ROWSPAN=2>CELL1</TD><TD>CELL2</TD></TR>
<TR><TD ROWSPAN=2>CELL3</TD></TR>
<TR><TD ROWSPAN=2>CELL4</TD></TR>
<TR><TD>CELL5</TD></TR>
</TABLE>
View the table.
THE ABOVE
LAYOUT USING
FRAMES
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
</FRAMESET>
View the frame.
THE ABOVE
LAYOUT USING
NOFRAMES INFO
<FRAMESET COLS="50%,50%">
<NOFRAMES>
<h1 align=center><blink>Frame ALERT!</blink></h1>
<p>
This document is designed to be viewed using <b>Netscape
2.0</b>'s
Frame features. If you are seeing this message, you are
using
a frame <i>challenged</i> browser.
</p>
<p>
A <b>Frame-capable</b> browser can be gotten from
<a href=/>Netscape Communications</a>.
</p>
</NOFRAMES>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
</FRAMESET>
TARGETING
WINDOWS
This feature gives the document writer a little control
over where the data appears when a user clicks on a link in
their document. It is useful as a stand alone feature with a
document space that can be best viewed with multiple top
level windows (a list of subjects window, and a window
displaying the current subject), but it is most useful in
conjunction with Netscape's new
frames feature.
How it works
Previously when a user clicked on a link, the new
document either appeared in the window the user had clicked
in, or alternately (and under the user's control) it
appeared in a new window. Targeting windows allows the
document writer to assign names to specific windows, and
target certain documents to always appear in the window
bearing the matching name.
A name is assigned to a window in one of three ways:
- A document can be sent with the optional HTTP header
Window-target: window_name
This will force the document to load in the window named
window_name, or if such a window does not exist,
one will be created, and then the document will be loaded
in it.
- A document can be accessed via a targeted link. In
this case there is actual HTML which assigns a target
window_name to a link. The document loaded from that
link will behave as if it had a Window-target set
as in method 1 above.
- A window created within a frameset can be named using
the NAME attribute to the FRAME tag.
How the HTML looks
Targeting withing HTML is accomplished by means of the
TARGET attribute. This attribute can be added to a
variety of HTML tags to target the links referred to by that
tag. The attribute is of the form:
TARGET="window_name"
- TARGET in an A tag.
- This is very straightforward. The anchor tag normally
specifies a link to be loaded when the active item is
clicked on, adding the TARGET attribute to the
anchor tag forces the load of that link into the targeted
window. Example:
<A HREF="url" TARGET="window_name">Targeted
Anchor</A>
- TARGET in the BASE tag.
- This is used when you want all (or most) of the links
in a document to be targeted to the same window. In this
case the TARGET attribute establishes a default
window_name that all links in this document will be
targeted to. This default is of course overridden by
specific instances of the TARGET attribute in
individual anchor tags. Example:
<BASE TARGET="window_name">
- TARGET in the AREA tag.
- The
IETF Internet-Draft of Client-Side Image Maps
defines an area tag. This tag describes a shaped area in a
client-side image map, and provides the link that should
be followed when the user clicks there. Adding the
TARGET attribute to the area tag forces the load of
that link into the targeted window. Example:
<AREA SHAPE="shape" COORDS="x,y,..."
HREF="url" TARGET="window_name">
- TARGET in the FORM tag.
- The form tag normally displays the results of a form
submission in the same window the form was submitted from.
By adding the TARGET attribute to the form tag,
the result of the form submission is instead loaded into
the targeted window. Example:
<FORM ACTION="url" TARGET="window_name">
Allowed TARGET names
The window name specified by a TARGET attribute
must begin with an alpha-numeric character to be valid. All
other window names will be ignored.
Exception: There are magic target names that all begin
with the underscore character.
Magic TARGET names
These names all begin with the underscore character. Any
targeted window name beginning with underscore which is
not one of these names, will be ignored.
- TARGET="_blank"
- This target will cause the link to always be loaded in
a new blank window. This window is not named.
- TARGET="_self"
- This target causes the link to always load in the same
window the anchor was clicked in. This is useful for
overriding a globally assigned BASE target.
- TARGET="_parent"
- This target makes the link load in the immediate
FRAMESET parent of this document. This defaults to
acting like "_self" if the document has no
parent.
- TARGET="_top"
- This target makes the link load in the full body of
the window. This defaults to acting like "_self"
if the document is already at the top. It is useful for
breaking out of an arbitrarily deep FRAME nesting.
-
FRAMES: IMPLEMENTATION
This document describes some of the important issues with
implementing grids, and suggests solutions for them.
CAN FRAMESETS
BE NESTED?
FRAMESET tags can certainly be nested, as per the
Frame Syntax description above. But such a structure is
basically flattened before display on the screen. A more
interesting issue is: can a FRAME contain a document which
is itself a FRAMESET? The short answer is a resounding
yes. Of course FRAMESETS must be nestable, especially
with named Frames so that a link in one frame can reload
multiple other frames.
WHAT ABOUT
INFINITE RECURSION?
It is possible to design a FRAMESET that will recurse
infinitely stacking the same FRAMESET inside itself until
the machine ran out of memory. Consider the following
example:
<FRAMESET rows="50%,50%">
< FRAME src=parents_url>
<FRAME>
</FRAMESET>
This is obviously bad, so it has been prevented. Any
frame that attempts to assign its SRC URL to be the same as
the URL of any of its ancestors will be treated as if it has
no SRC URL at all (basically a blank frame). While this
doesn't stop all malicious documents, it eliminates a whole
troublesome class of them.
I hope this came in useful!
Ask in the forum
if you have any suggestions or comments.
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
