In this hour, you learn how to display more than one page at a time by splitting the Web browser window into frames. You learn to use a frameset document to define the size and arrangement of the frames, as well as which Web page or image will be loaded into each frame. You see how to create links that change the contents of any frame you choose, while leaving the other frames unchanged. You also discover several optional settings that control the appearance of resizable borders and scrollbars in frames. Finally, you see how to nest framesets to create complex frame layouts.
(View HTML tags covered in Hour 20.)
The Entropy Almanac(Figures 20.1 - 20.4)
A frame is a rectangular region within the browser window that displays a Web page, alongside other pages in other frames. First, create the contents of each frame as an ordinary HTML page. Then to put them all together, you use a special kind of page called a frameset document.
| NOTE: When viewing a set of frames, you can look at the HTML source code for the frameset document by selecting View | Source (in Microsoft Internet Explorer) or View | Page Source (in Netscape Navigator). To see the HTML for an individual frame, right-click in that frame and select View | Frame Source from the pop-up menu. (Mac users, hold down your mouse button to get the pop-up menu.) |
The Entropy Almanac II(Figures 20.5 - 20.7)
This example contains nine frames, some of which are nothing more than blank pages with custom background tiles. Three horizontal <FRAMESET> tags are nested within a vertical <FRAMESET>.
The Entropy Almanac III(Figures 20.7 - 20.11)
Like the previous example, this is actually nine separate Web pages being displayed in nine frames. Some attributes were added to the FRAME tags, to hide the divider lines and scroll bars. This makes the frames look much nicer.
The official HTML 4.0 standard includes a tag, <IFRAME>, for embedding a frame into an HTML page. Unfortunately, the only browser that currently understands the <IFRAME> tag is Microsoft Internet Explorer. The tag will be ignored by Netscape Navigator and all other current Web browsers.
As in the Entropy Almanac examples, one frame of this syrup site includes an index of links that remains visible all the time. Because of the TARGET="maple" attribute in each <A> link tag, the pages pop up in the middle frame (which has <FRAME NAME="maple"> in the frameset document).
Borderless, nested frames enhance the homespun look of the site, at the expense of some screen real estate.
"When you include the TARGET attribute in a link, you can use a few special frame names in additional to the names you have defined with FRAME NAME.
Note that all other names beginning with an underscore (_) will be ignored."
Embedded Frames
Pure Vermont Maple Syrup
Pure Vermont Maple Syrup II