Stuart Moulthrop
& Nancy Kaplan
University of Baltimore
School of Information Arts and Technologies ·
Revised 2008
Part 5: Frames and Site Design
Since we're no longer teaching frames in our introductory course,
we haven't updated this part of the Notes since 2000.
You may catch a whiff of mold hereabouts. On the other hand, not a whole lot has
happened with frames since the turn of the century.
Caveat lector.
Frames are among Netscape Communications' most ambitious additions to conventional HTML. Frames subdivide the browser window into what are in effect other browser windows, each displaying a URL or Web page.
In part this development answers the complaint that the Web is too disorienting. With frames, part of the screen can remain static as other parts change. This stable "ledge" could contain a table of contents, context-sensitive help, or just an identifying mark. Frame pages may thus enclose and exhibit other pages. This effect adds a new dimension to hypertext linking in HTML, allowing destination points to become visible before the reader has left the original context entirely behind.
Since an entire frame page may be called up as subframe of another such page, the potential for recursion is very high. You could end up with windows within windows within windows. Frames add considerably to the sophistication--and sometimes the frightening complexity--of Web documents.
Which brings us to the cynic's view. Perhaps the motivation behind frames is simply commercial: using this technique, advertisers can keep their messages in front of Web surfers even as they cruise from site to site. It has always been possible to include banner ads on Web pages without using frames, but frames make this task a great deal easier.
We've met designers who swear by frames and others (perhaps more numerous) who hate them with a passion. Like them or not, though, frames represent an important part of Web publishing.
5.2.1 · Basic Structures
| A Generalized Frame Document |
<HTML> |
A frame document has no BODY container: this element is replaced by the <FRAMESET></FRAMESET> container. No tags useable inside a BODY container (IMG, H, HR, etc.) may appear ahead of the initial FRAMESET tag. The browser will ignore the frames information if it finds any of these first.
Frames are thus an all-or-nothing proposition: you can't mix frames with other layout styles as you can tables, applets, plug-in movies, and other enhancements to standard HTML. Though of course, frames do contain standard HTML pages, on which the familiar rules still apply.
Frames make a difference. By implication, frame layout pages constitute a new class of HTML documents, a more general and abstract level of structure that is connected to the older forms, yet distinct from them. In this respect frames were ahead of their time. Since frames were introduced in 1996, many technologies have been developed to operate as supersets of conventional HTML--most notably scripting languages like JavaScript (see Part 8) and Extensible Markup Language or XML. If nothing else, learning about frames will broaden your Web publishing horizons.
You'll remember that in HTML tables, rows are specified with <TR> while columns are created simply by layering up table cells, without an explicit container. Unlike in tables, the frame scheme allows both rows and columns to be specified, so the initial FRAMESET tag has attributes for COLS as well as ROWS. This is not particularly consistent, so notice the difference between tables and frames in this regard.
Of course, you can write frame layouts having only columns or only rows. These simpler layouts are in fact quite common on the Web.
Here is a very simple frame layout showing the basic principles of frames in action. A screenshot of the output appears at right. Click on it to see the actual page: we can't show it directly here because it's impossible to mix frames with conventional HTML.
| A Simple Frame Layout | |
<frameset rows="50%,50%"> |
|
In this example the screen is divided two ways, yielding three parts. The first division (the initial or outer frameset container) splits the screen into two horizontal strips or rows. The top row is then cut by a vertical line into two columns (this is the work of the second, embedded frameset container). The lower section of the screen remains undivided and is handled by the final frame tag.
Rows need not be specified before columns. We could have nested the elements the other way around, though this produces a different layout, as you can see.
| Another Simple Frame Layout | |
<frameset cols="50%,50%"> |
|
Here's a frameset with an uneven distribution of columns and rows (three columns and two rows). The contents of the outermost container (the FRAMESET for ROWS) are two more FRAMESET containers, each specifying three COLS. There must be one FRAME tag for each frame in the grid.
| A More Complicated Frame Layout | |
<frameset rows="100,100"> |
|
In designing a frames layout with both rows and columns, you first define one dimension of the grid (rows or columns) then work out the divisions within each of the primary units if subdivisions are needed. Every division of the page must be accounted for either by a frame tag or by an embedded frameset container.
The dimensions of frames may be set in three ways: in percentages (as in the first two of our examples), in absolute pixels, or with an asterisk (*) indicating that the frame in question will be sized in relation to the space available. Here's how the asterisk usage works:
<FRAMESET ROWS="120,*,55">
This frameset divides the screen horizontally into three sections, the topmost 120 pixels high, the lowest 55 pixels high, and the middle section whatever remains after these values are deducted from the total height of the active window. This approach might be used to place non-scrolling "ledges" at top and bottom and a scrolling window in the middle of the screen.
- NAME
- This attribute gives the frame a designation that may be used with
the TARGET attribute in the link anchor tag (see below).
- MARGINWIDTH, MARGINHEIGHT
- These attributes let you set (in pixels) the width or height of the gap between the frame border and the contents of the frame.
- SCROLLING
- By default scrollbars will appear within a frame if its contents exceed the available dimensions--for instance, if you were to access the (very long) page you are reading now in a frame only 100 pixels high. If you set SCROLLING to "NO," then scrollbars will not appear under any circumstances; likewise a "YES" value brings in scrollbars whether or not they are required. Note that scrollbars appear for both horizontal and vertical scrolling even if you only wish to scroll in one dimension; some consider this a flaw.
- NORESIZE
- This attribute is a so-called flag with no assigned value (like NOSHADE in the HR tag). If NORESIZE is included, then the frame in question will always have the same height and width--otherwise the user can "drag" the frame margins to change the relative size of the frame, decreasing the amount of screen space given to other frames. NORESIZE turns off a default "yes" condition: all frames may be resized by the reader unless you say otherwise.
Like <TD> in tables, the solitary <FRAME> tag fills in the content of the subdivisions in a frame layout. Each frame is assigned a particular URL through the SRC attribute (and note that the same URL may be assigned to more than one frame). SRC in effect creates a view of an HTML page in one section of the current screen.
<FRAME> also has optional attributes:
When a Web page is displayed in a frame all its hypertexts links remain active, allowing the reader to call up other pages; but where do these other pages appear?
By default they show up in the same frame within which the link was activated, as in this example. You may, however, create links that arrive in frames other than the one containing the departure point. This is done by adding a TARGET attribute to the departure link anchor.
The value assigned to TARGET may be the NAME value assigned in
<FRAME>. Consider this example, along with its frame
layout:
| "Table of Contents" Frame Layout | |
<frameset cols="20%,80%"> |
|
Each of the two frames in this layout has a NAME attribute (though in this case only the second, "main," is actually called by its name). The links contained in the "toc" ("Table of Contents") frame all contain TARGET attributes referring to "main." For instance:
<a href="demoA.htm" target="main">FILE A</a>
By using TARGET in link anchors, you can cause a link to change the contents of a specified frame. Note however that links cannot be targeted to more than one frame at a time. To update more than one frame with a single mouseclick you'll need to use a scripting language such as JavaScript, discussed in Part 8.
- _top
- Replaces the current frames layout with a new window in which only the destination page appears (you can use this facility to let readers break out of the frameset).
- _new
- Like _top, this values create a fresh window, but it does not close the previous window. The new window stacks over the old one. This can be a valuable technique, provided your users understand what's going on.
- _parent
- Places the destination page in the "parent" of the current frame -- which has the same effect as "_top" unless there is more than one window open, in which case only the "parent" window is updated.
- _self
- Places the destination page in the frame containing the link: this is the default case.
Though you can use almost anything you want as a corresponding value for NAME and TARGET, a number of values are reserved for special functions. Each of these special values begins with the underscore character ( _ ):
Special NAME/TARGET values must be given in lowercase letters; though HTML is usually not case-sensitive, this is a crucial exception.
5.3.1 · Drawbacks to Frames
- Navigation
- Readers have complained sharply that frames make the Back function terribly ambiguous. Before frames, Back meant "show me the page I was viewing before this one" -- which is still the case with frames pages, though with a very troublesome difference. Frustrated readers find that Back on a frames page applies to the entire page (or layout), not just to the frame most recently updated. Having asked for a previous state of the layout (all the current frames plus an earlier version of one frame in particular) they see instead whatever page they were viewing before they accessed the frames layout--usually a page showing none of the previously visible frames.
- Escaping From Frames
- Users often want to view a page presented within a frame without that frame. In the old days, you had to add a link to your page with a TARGET="_top" attribute to accomplish this. Netscape Navigator includes a feature called Open Page in New Window. Microsoft Internet Explorer does not include such a feature.
- Proliferating Markup
- Inevitably, frames add complexity to Web markup. Working on a frames project may entail making interdependent changes on the frames layout page as well as several other pages invoked by various links. It is particularly difficult to view the source of a page within a frames layout; View Source in Netscape Navigator shows only the markup for the frameset page (though at least in Windows, the equivalent command in Internet Explorer shows markup for the component page).
- Ugliness
- For those not fond of thick gray lines, the original frames implementation was notably unattactive. However, Microsoft added the ability to change or suppress the frames borders in Internet Explorer, prompting Netscape to do the same in Navigator 3.0. Both browsers now support a FRAMEBORDER attribute in both the FRAMESET container and the FRAME tag, allowing the author to set the width of frame border lines, including a 0 setting for no visible borders. There is also now a BORDERCOLOR attribute that enables border divisions in colors other than battleship gray.
- Scrolling
- Though individual frames within the layout may scroll, the layout as a whole may not. This is a substantial difference from tables, which may contain more elements than are visible on the screen at once--a frame layout is confined to the limits of the screen, like it or not.
Frames have not met with universal praise. Unhappy users point out several areas of concern, most of which software designers have tried to address, though controversies continue:
Some designers have given up on frames altogether, moving toward the more unified, multi-column structures common in so-called portal sites like Yahoo and Netscape. Meanwhile others have attempted to retain the structural power of frames--particularly the ability to construct a compound page from several separate markup files--without incurring all the mess and bother of multiple scrolling windowpanes.
One solution lies in server-side integration schemes such as Microsoft's Active Server Pages (ASP) or Allaire's ColdFusion application server. Arrangements like these intercept traffic that would normally go to the HTTP server. Paying attention to special, non-HTML tags, the intermediary program stitches together a customized markup that may include results of calculations, database queries, or fragments of HTML files.
To see a simple example of this technique, have a look at our alternative class entry page, designed for delivery via a ColdFusion server. Compare the ordinary entry page and note the major difference: in the ColdFusion version, both the table of contents and the main page scroll together. In the old-fashioned HTML version, the contents section scrolls separately.
Index · Part 1 · Part 2 · Part 3 · Part 4 · Part 6 · Part 7 · Part 8 · Part 9 · Top
Course and Materials ©1997 - 2008 by Stuart Moulthrop
and Nancy Kaplan