Frames Tutorial

By David Chang

Introduction To Frames:

The internet is a crazy place. Everywhere you look there seems to be a new site popping up, trying to look cool and draw attention to itself. So with all this growth, how can you make your site stand out? With fancy clip-art graphics? With pastels and tones that aren't found in nature? With animation that could give even the healthiest human a seizure? As good of ideas as these all are, the only true way to make yourself noticed amongst the sprawl and construction is by using the coolest invention ever created (maybe even cooler then the inhaler or the twelve sided die). And what is this creation that can make your little site turn into a mega awesome corporation? Why nothing other than FRAMES!!!!!!!

Back to reality. In all actuality frames are a little outdated but they do have their uses. Frames divide Web pages into multiple, scrollable regions. Essentially, one HTML document, loads a number of other html documents inside it and displays them. In some cases this can be useful but the trend is not to use frames unless it obviously will make your pages easier to navigate. For example if you wish to have the same navigation on the left hand side of your site you could save just the code used in the navigation to one html document and the content of your pages in other documents. You could then combine the navigation and the content by creating a third document, that creates two frames, one containing the navigation and one containing your first page of content. This will make it easier to edit the navigation used across the site. Nowadays many designers including the designers of newbie.net opt to use more advanced solutions like PHP includes and content management systems to do the same type of thing.

Getting Started with 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 have been submitted to the Internet Engineering Task Force and the World Wide Web Consortium for consideration as Internet standards.

FRAMES - SYNTAX

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>

</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

View the table.

THE ABOVE LAYOUT USING FRAMES

View the frame.

THE ABOVE LAYOUT USING NOFRAMES INFO

<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>

View the frame.

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. (see frames)

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.

For a description of the FRAMESET and FRAME tags, see frames.