Frames: second tutorial:
the <FRAMESET> and <FRAME> tags

The <FRAMESET> tag:

Defines how to divide the window into a set of frames. It can divide horizontally, into rows, or vertically into columns. So it has 2 attributes, ROWS= and COLS=, only one of which can be specified for a particular frameset. Within the FRAMESET you can only have other nested FRAMESET tags, FRAME tags, or the NOFRAMES tag.

The available space can be divided into rows or columns in terms of either percentages or pixels; in addition, one or more frame sizes can be left for the browser to calculate. Examples:

<FRAMESET rows=*,*> -- divides the space into two equal rows. This is the same as writing rows=50%,50%. If you put a number 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.

<FRAMESET rows=20%,*,50> -- specifies 3 rows. The top one will be 20% of the window size, the bottom one will be 50 pixels high whatever the window size, and the middle one will take up all the remaining space.

<FRAMESET cols=140,*> -- specifies 2 columns. The left-hand one will be 140 pixels wide and the right-hand one will take up the remaining space.

If you're calculating in percentages, you must either make sure that they really do add up to 100% (!) or leave one frame undefined (*). If you specify pixels for one of the frames, you have to leave at least one other frame undefined. Since you don't know the size of the user's window or screen resolution, there is no way of adding up pixels and arriving at 100% of the window size.

To divide the space up into rows and columns together:

This is easiest to explain by example. Let's say you want this:

Here will be your logo

Here you want a vertical contents bar. Let's call it contents.html And here you want your main screen. We'll call it main.html

The browser analyses the layout, as always, from the top left. So the first division you have to define is two rows; the second row is divided into two columns. You end up with the following code:

<HTML>
<HEAD>...</HEAD>
<FRAMESET rows=20%,*>
<FRAME src="logo.html">
<FRAMESET cols=20%,*>
<FRAME src="first.html">
<FRAME src="second.html">
</FRAMESET> -- the end of the second frameset
</FRAMESET> -- the end of the first frameset
</HTML>

Other attributes of the <FRAMESET> tag:

These are mainly concerned with borders and spacing. The problem, here as elsewhere, is that Netscape and Internet Explorer don't agree on the names to give the attributes or how to implement them. So you tend to have to write multiple attributes so that both browsers will understand what you want.

FRAMEBORDER=0 or1 (Netscape ) or frameborder=no or yes (Internet Explorer):

turns off or on, respectively, the borders of all frames in that frameset, unless a frame turns its border on. In theory, at least, each browser understands the convention of the other.

FRAMESPACING=pixels (Internet Explorer only):

specifies the number of pixels you want between frames (rather like the cellspacing attribute for tables). For instance: framespacing=3. It affects all frames and framesets within the frameset you set it for; so in practice you set it in the first frameset in order to get a consistent appearance over the whole page.

BORDER=pixels (Netscape only):

specifies the width of the border. Netscape doesn't do framespacing, but it does allow you to change border width. In fact since the space between the frames is taken up by the border, both framespacing and border have a similar effect. Just put in both of them to make such both browsers understand you: each will ignore the one it doesn't support.

You can only put a border attribute in the outmost (first) frameset and it sets the border width for all frames on the page.

BORDERCOLOR=value (Netscape only):

controls the color of the frame borders. You can use a color name, e.g. bordercolor="red", or a color code, e.g. bordercolor="#FF0000"

The <FRAME> tag:

defines a single frame in a frameset. The possible attributes are: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE,: BORDERCOLOR and FRAMEBORDER.

SRC="url" we already met:

The SRC attribute takes as its value the URL of the document to be displayed in this particular frame. In Netscape, FRAMEs without SRC attributes are displayed as a blank space the size the frame would have been. Frames with src=url where the page referred to does not exist, generate an error message and then are displayed as a blank space. If the frameset has borders, they are displayed. In Internet Explorer, the frameset is not displayed unless the frames have a src attribute; if it refers to a non-existent page, Explorer reacts like Netscape. This is useful because it means you can write the layout for a frame area and check it works without having to actually write the pages that will later be loaded into it.

NAME="frame_name"

If you want a link in one frame to load a document into another, you need to give the target frame a name so that it can be addressed. The NAME attribute is optional; by default all frames are unnamed.

Names must begin with an alphanumeric character.

To target a frame from a link, you add "target=frame_name" to the URL of the link. For instance, if a frame is defined:
<FRAME name="second" src="pageone.html">
a link from a document in a different frame can load another page into it with: <A HREF="nextpage.html" target="second">
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 are ignored, unless they are one of the reserved, predefined names.

Pre-defined 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. Usually this is the default procedure; but if you have added a window target to a globally assigned BASE tag in your header, specifying target="_self" will override it..

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.

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 so large that there is no space for the document contents. The MARGINWIDTH attribute is optional; by default, all frames let the browser decide on an appropriate margin width. If the browser cannot display the document in the frame with the margins you specify, it simply ignores this attribute and uses the default.

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 indicates that the frame is not resizable by the user. Users typically resize frames by dragging 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 affect the resizability of other frames.The NORESIZE attribute is optional; by default all frames are resizable. It is useful especially if you have a fixed image, such as a logo, in a frame: you can set the frame size to exactly the logo size, and prevent users from resizing it.

BORDERCOLOR=value

In Netscape only, you can specify a color for the frame border just as you can for the whole frameset. It can be a word, e.g. bordercolor="orange" or a code: bordercolor="#EE00CC">. Again, you will have problems if you define different border colors for adjacent frames that share a border: the resulting border color is undefined. In practice it's pretty well impossible to define more than one border color in the same window.

FRAMEBORDER=value

This works the same as the frameborder attribute for a frameset, and overrides it for a single frame. So you can add or remove borders from a single frame with this attribute. Netscape and Internet Explorer differ in their interpretation of it: Netscape requires frameborder=1 or frameborder=0 to enable or disable borders for a frame, while Internet Explorer wants frameborder=yes and frameborder=no respectively. In theory at least, each understands the convention of the other.

Since frames share borders, the only way to ensure that the browser will do what you want is to explicitly include a frameborder attribute (with the same value!) for every frame, or else not to include one for any frame but include it in the outermost FRAMESET.

Here will be your logo
Here you want a vertical contents bar. Let's call it contents.html	And here you want your main screen. We'll call it main.html

Frames: second tutorial: the <FRAMESET> and <FRAME> tags

The <FRAMESET> tag:

To divide the space up into rows and columns together:

Other attributes of the <FRAMESET> tag:

The <FRAME> tag:

Frames: second tutorial:
the <FRAMESET> and <FRAME> tags