jqjacobs.net/web/frames
Creating Frames -- The Basics
Layout | Nesting Framesets | Attributes | Targeting | No Frames | Inline Frames | Links
Frames allow creation of subwindows, each of which can display a separate HTML file. Multiple pages offer a way to keep certain information visible while other pages are scrolled or replaced. Not all browsers support frames, so you may want to offer a non-frames version of your frames pages.
Unlike a standard Web page, a frames page is created using an HTML document without a body. An HTML frames document has a <head> and, in place of the body, a <frameset>. The <frameset> tag requires an end </frameset> tag. The <frameset> section specifies the layout of views in the window in terms of rectangular subspaces using the <frameset> element's <rows> or <cols> attributes.
Frame Layout -- Rows and columns.
rows= This attribute specifies the layout of horizontal frames. Its properties are a comma-separated list of either absolute values in pixels, percentages, and relative lengths. The default value is 100%, meaning one row.
cols= This attribute specifies the layout of vertical frames. Its properties are the same as those of rows.
This example divides the screen horizontally in two equal rows (frames) using percentages.
<HTML> <HEAD> </HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="frame_h.html"> <FRAME SRC="frame_h.html"> </FRAMESET> </HTML>Setting the <rows> attribute defines the number of horizontal subspaces in a frameset. Frames are created top-to-bottom for rows. If the <rows> attribute is not set in a nested frameset column, each column extends the entire length of the page. Setting the <cols> attribute defines the number of vertical subspaces. Frames are created left-to-right for columns. If the <cols> attribute is not set in a nested frameset row, each row extends the entire width of the page. If neither the rows or cols attribute is specified, the frame takes up exactly the size of the page.
This example creates three columns. The second column has a fixed width of 250 pixels. The relative lengths are specified with an asterisk and are variable.
<FRAMESET cols="1*,250,3*"> .... </FRAMESET>
The first column receives 25% of the remaining space and the third 75% of the remaining space. The middle column remains at 250 pixels while the other columns are altered by changing the size of the browser window, as they retain their 1:3 width ratio. Absolute lengths that do not sum to 100% of the space will be adjusted by the browser. When underspecified, remaining space should be allotted proportionally to each view. When overspecified, each view should be reduced according to its specified proportion of the total space.
Nesting frame sets.
Framesets can be nested, in which case one frameset might be divided vertically using columns and the other divided horizontally using rows. The code below is an example of the HTML for a page creating three frames, using a nested frameset in the first column to create two rows. The pages displaying in the frames are specified in this example using the <frame> element and the source <src> attribute. The <frame> element defines the contents and appearance of a single frame. The frame's <src> attribute specifies the initial document the frame will contain.<HTML> <HEAD> <TITLE>Frames</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="one.html"> <FRAME src="two.html"> </FRAMESET> <FRAME src="three.html"> </FRAMESET> </HTML>Framesets may be nested to any level. In the following example, the outer <frameset> divides the available space into three equal columns. The inner <frameset> then divides the second column into two rows of unequal height. Notice that the first <frame> attribute precedes the nested <frameset>. The nested <frameset> precedes the <frame> that is divides.
<FRAMESET cols="33%, 33%, 34%">
<FRAME src="one.html">
<FRAMESET rows="40%, 60%">
<FRAME src="two.html">
<FRAME src="three.html">
</FRAMESET>
<FRAME src="four.html">
</FRAMESET>
Frameset border color and border width can be controlled. Inside the first <frameset> tag place the <bordercolor> attribute. To change the color of specific rows, columns or frames place the attribute tag in the appropriate element tag. The <bordercolor> tag in an individual frame overrides the frameset attribute or a row or column color. Bordercolor is not a standard tag, but is supporterd by the two main browsers.
Borders are drawn by default between frames. The default is 5 pixels. The <border> tag controls this feature. Place the <border> tag in the first <frameset. tag. Border width of individual frames in a frameset cannot be specified. Border is well supported, though it is not standard HTML.
To hide borders set the <frameborder> attribute to zero pixels. To eliminate the space between frames set both attributes, <frameborder> and <border> to zero. The <frameborder> tag can be used in individual frames.
Frame Attributes
name = "..."> assigns a name to the current frame. This name may be used as the target of subsequent links.
src = "..."> specifies the location of the initial contents to be contained in the frame. This can be a relative or an absolute path.
noresize> tells the browser that the frame window must not be resizeable.
scrolling = auto|yes|no> specifies scroll information for the frame window.Auto tells the browser to provide scrolling devices for the frame window when necessary. This is the default value.
Yes tells the browser to always provide scrolling devices for the frame window.
No tells the browser not to provide scrolling devices for the frame window.frameborder = 1|0> provides the browser with information about the frame border.
1 tells the browser to draw a separator between this frame and every adjoining frame. This is the default value.
0 tells the browser not to draw a separators.marginwidth = pixels> specifies the amount of space to be left between the frame's contents in its left and right margins. The value must be a positive value.
marginheight = pixels> specifies the amount of space to be left between the frame's contents in its top and bottom margins.
Usage of Frame attributes.
This is an example of coding <frame> attributes.
<HTML> <HEAD> <TITLE>Four Frames</TITLE> </HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="200,*">
<FRAME src="one.html" scrolling="yes">
<FRAME src="two.html" marginwidth="10" marginheight="15"
noresize scrolling="no">
</FRAMESET>
<FRAME src="three.html" frameborder="0" scrolling="no">
<FRAME src="four.html" frameborder="1" scrolling="auto">
</FRAMESET> </HTML>
Specifying Target Frame Information.
If a frame contains a link the link will open in the same frame unless it is targeted elsewhere. By assigning a name to a frame via the <name> attribute, authors can refer to it as the "target" of links located in other frames. First we define a frameset with names for each frame, "top" and "bottom."
<FRAMESET rows="50%,50%">
<FRAME name="top" src="one.html">
<FRAME name="bottom" src="two.html">
</FRAMESET></HTML>Activating links in the top frame can open a new document in the frame named bottom while top maintains its initial contents if the link is targeted to bottom. This example illustrates targets allowing the dynamic modification of a frame's contents. Here is the tag in one.html, the upper half of the frameset, that changes the contents of the bottom frame to three.html:
<A HREF="three.html" TARGET="bottom">PAGE THREE</A>
The following target names are reserved and have special meanings. Note their distinct syntax; they are preceded by an underscore. To link to a window without frames you must target the frameset page. This is accomplished with the anchor attribute code TARGET="_top".
_blank Loads the linked document in a new window.
_self Loads the linked document in the same frame.
_parent Loads the linked document into the immediate frameset parent of the current frame.
_top Loads the linked document into the original window canceling all frames.You can set the default trget for all the links in an HTML page by using the <base> tag in the <head> section of the page. Here follows an example of the code. You can override the <base> target with a target in the link itself.
<HTML>
<HEAD>
<TITLE>Navigation Frame</TITLE>
<BASE target="main">
</HEAD>
Alternate Content: the NOFRAMES element.
The <frameset> section can contain a <noframes> element to provide alternate content.
If the browser can't display frames or is configured not to, it will render the contents of the <noframes> element. Because search engines may not find the pages displayed in frames you might want to create an alternate page that contains the meta tage you want the search engines to locate.
The <noframes> element should be included in all framesets, at least identifying the fact that a frameset has been accessed. You can also provide a link to an alternate page. Here follows an example.<NOFRAMES>
You need frames to view this page. You can go to the <A href="alternate.html">non-frames version</A>
of this document.
</NOFRAMES>
Inline Frames: the IFRAME element.
The <iframe> element allows authors to insert a frame within a block of text. Inserting an inline frame within a section of text is much like inserting an object via the object element: They both allow you to insert an HTML document in the middle of another, they may both be aligned with surrounding text, etc. The information or page to be inserted inline is designated by the source <src> attribute of the <iframe> element, and needs to include size attributes. The <iframe> attributes include:
name="..." Assigns a name to the current frame. This name may be used as a target..
width= The width of the inline frame in pixels.
height= The height of the inline frame in pixels.Other <iframe> attributes are frameborder, marginwidth, marginheight, scrolling and align. Inline frames cannot be resized and thus do not take the noresize attribute. Here is a sample <iframe> code.
<IFRAME src="one.html" width="200" height="100"
scrolling="auto" frameborder="1"> </IFRAME>
A table of FRAME tags and a table of FRAME attributes is provided on a separate, easy-to-print page.
This page is based on the more complete information available at:
HTML 4.01 Specification for Frames
|
|
|||||
|
|
|
|
|
|
|