IT 280 Web Development II, Spring 2008
Frames
Frames are a structural element that display multi-part documents.
The basic structure of a framed document is shown in the example
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Framed</title>
</head>
<frameset cols="25%,*">
<frame src="ax.txt" id="linus" />
<frame src="ay.txt" id="larry" />
<noframes>
<body>
<h1>Hello World.</h1>
</body>
</noframes>
</frameset>
</html>
Note that:
- The document type is
XHTML 1.0 Frameset - Although the ids for the frame elements are optional, they are often needed for effective use of frames.
- the
bodyelement is contained within anoframeselement. It will be rendered if the user agent does not support frames.
Each individual frame element specifies a document which is displayed in the frame. Notice that the syntax is very similar to that used for images.
In this example, the document ax.txt will be loaded into frame "linus" and ay.txt will be loaded into frame "larry".
Displayed document
The <frameset> element may divide the window...
...vertically or horizontally.
| Vertical frames | Horizontal frames |
|---|---|
 |
 |
...into two or more columns or rows.
The number of columns or rows is determined by the cols or rows attribute.
The values are the widths (or heights) of the columns or rows, in order.
The values are integers (pixels, but without px), percentatges, or *. The * value will be whatever remains after the others are calculated.
For example, the frameset
<frameset rows="50, 50%, *">
divides the window into three rows. The first is 50 pixels in hieght; the second is 50% of the window height; the third is whatever is left over.
Frame scrolling
A frame has an attribute called scrolling. The possible values are auto, yes, or no.
- auto: tells the user agent to provide scrolling devices for the frame window when necessary. This is the default value.
- yes: tells the user agent to always provide scrolling devices for the frame window, even when not necessary
- no: tells the user agent not to provide scrolling devices for the frame window.
Frameborder
The presence or absence of a visible division between frames in a graphic browser is determined by the frameborder attribute.
The value is either 1 or 0.
A value of 1 tells the user agent to draw a separator between this frame and every adjoining frame. This is the default value.
A value of 0 tells the user agent not to draw a separator between this frame and every adjoining frame. Note that separators may be drawn next to this frame nonetheless, if specified by other frames.
Document illustrating scrolling and frameborder. The first frame has scrolling set to no, and the second to yes.
frameset tags may be nested.
Another frameset may be used instead of a frame. This will subdivide the parent frame.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>re-Split frames</title>
</head>-+*
<frameset cols="60%, *">
<frameset rows="60%, *">
<frame src=x.htm >
<frame src=y.htm >
</frameset>
<frameset rows="200, *">
<frame src=x2.txt >
<frame src=y2.txt >
</frameset>
<noframes>
<body>
<h1>Hello World.</h1>
</body>
</noframes>
</frameset>
</html>
Source documents can use frames.
Nesting will also be produced in the display if one of the individual frame sources is itself a framed document.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Nested Frames</title>
</head>
<frameset rows=50%,*>
<frame src=frames_split.htm>
<frameset cols=200,*>
<frame src="y2.htm">
<frame src=x2.htm>
</frameset>
</frameset>
</html>
Hyperlinks in frame documents
By default, linked documents will be opened in the same frame as the document with the link.
The (deprecated) target attribute
In XHTML Transitional, the anchor element can specify a target attribute.
Only frames or windows with ids (or names, in older usage) can be the target of links:
Suppose the root (top) document has:
<frameset cols="25%,*">
<frame src="x4.htm" id="larry">
<frame src="y4.htm" id="linus">
</frameset>
and the file x4.htm includes the lines
<a href="pics/01.jpg" target="linus">cats!</a>
When the link "cats!" is clicked, the document 01.jpg will be displayed in the frame with id "linus"
The x4.htm document must have DOCTYPE XHTML 1.0 Transitional (or an HTML version, not XHTML) to be valid.
The target attribute is deprecated and is not valid in XHTML Strict. The reason is that target describes an action or behavior.
The intent of the W3C standard is that XHTML deals with content, CSS with presentation, and JavaScript with behavior.
It is possible, but more complex, to achieve the same result as target with strict XHTML by using JavaScript.
Pre-defined targets
Several targets are pre-identified. Their names begin with an underscore.
_blank -- a new, unnamed window
_self -- the current document frame or window (default)
_top -- the window containing the initial parent document
Example
The following example uses three DOCTYPEs - XHTML 1.0 Frameset for the parent document, XHTML 1.0 Transitional for document X4 in the left frame, and XHTML 1.0 Strict for the Y4 document in the right frame.
The code for each link is shown in the document, followed by the link itself.
Design issues
Frames can be a useful way to displaying content from multiple documents. Blackboard is an example of this usage.
Frames should not be used just to cut a page up into sections.
Frames do not necessarily appear the same in all browsers and small screens can yield individual frames too small to be effective.
Be cautious about using them and provide alternative non-frame pages.
We will learn other, and better, ways to subdivide pages.
Frameless frames
Frames are necessary if the content comes from different servers. However they are often used just to divide up a page so that one part scrolls independently of the others. The same effect can be created using the CSS property
overflow.
The possible values are visible, hidden, scroll, auto, and inherit. The W3C describes them.
- visible
- Content will not be clipped. That is, it may be rendered outside the block box.
- hidden
- Content will be clipped when necessary, and no scrolling user interface should be provided to view the content that falls outside the clipping region.
- scroll
- Content will be clipped when necessary. If the user agent supports a scrolling mechanism that is visible on the screen (such as a scroll bar), that mechanism will always be displayed for a box whether or not any of its content is clipped. When this value is specified and the target medium is 'print', overflowing content may be printed.
- auto
- The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.
Example illustrating the values hidden and auto. (The CSS )
This property is not necessarily fully implemented by all browsers. In particular, it was not handled correctly by a version of IE 6 that I used for testing.
Hood College Department of Computer Science: Course materials © 1997-2006 by Elizabeth Chang.