This lesson introduces the concept of frames as a means of organizing and displaying information within HTML documents.
Frames allow a browser window to be divided into multiple sections, each with an independent HTML page loaded inside it, capable of interacting with one another. Think of a browser window divided into frames (or "frameset") as a window divided into panes.
Perhaps the most common use of frames is to divide a browser window into two or more frames with specific content: one containing some form of static navigational element (text list, image map, navigation bar, etc.); another containing variable information or data which changes depending upon what is chosen in the navigation frame; and perhaps another frame containing static information relevant to the entire site such as a company logo or header.
Information about how a browser is to display frames is contained in a separate HTML document called a "frames page," a simple example of which might appear as follows:
HTML Code Browser Display <HTML> <HEAD><TITLE>Frame Test...</TITLE></HEAD>
<FRAMESET COLS="30%, 70%">
<FRAMESET ROWS="75%, 25%">
<FRAME SRC="menubar1.html" NAME="menu">
<FRAME SRC="logo.html" NAME="logo">
</FRAMESET><FRAMESET ROWS="*">
<FRAME SRC="main.html" NAME="main">
</FRAMESET></FRAMESET>
<NOFRAMES>This site requires a frames-capable browser...please get one!</NOFRAMES>
</HTML>
As the above example shows, the frames page itself in most cases does not contain any actual content, serving instead only as a description to the browser as to how the window is to be divided and where to obtain the actual pages designated to fill the frames. The addition of the <NOFRAMES> tag and accompanying message serves as a warning to users with older non-frame-supporting browsers who would otherwise have nothing displayed but a blank window.
Frameset tags are used to define characteristics of individual frames.
Frameset tags (<FRAMESET> and </FRAMESET>) are used multiple times throughout a single frames page. The first frameset tags are used to define the number of separate frame columns within the browser window, and what width they will be. The next set are used to define the number of frame rows and their height.
Row attributes are set separately for each column: for example, one column may contain two frames while another only one. While technically there is no limit to the number of frames that can appear in a single browser window, realistically anything above four frames tends to appear overly crowded on most computers.
A column frameset tag follows this format:
<FRAMESET COLS="size of column 1, size of column 2, etc."> This tag will eventually be closed with a </FRAMESET> tag, but only after frameset rows are defined for each column. The "size of column" values can be expressed in one of three ways:
"x"% - whereby "x" is set to a percentage of the available browser window space
"x" - whereby "x" is set to a fixed pixel amount (generally not recommended as pixel widths vary depending upon the resolution of viewers' monitors)
"*" - whereby the column uses all remaining available space within the windowFollowing the above guidelines, a frameset reading <FRAMESET COLS="20%, 80%"> would be interpreted as meaning that the first column in the browser window will take up 20% of the total window's width while the second column will occupy 80%. Similarly, <FRAMESET COLS="120, *"> would mean to set the first column exactly 120 pixels wide with the second column occupying whatever space is left over.
Within the column-defining frameset tags are the row-defining frameset tags. The number of row-defining frameset tags is directly dependant on the number of columns defined in the column-defining frameset tags. If two columns are defined, there will be two separate row-defining frameset tags; if there columns are defined, there will be three row-defining frameset tags, and so forth.
A row frameset tag follows this format:
<FRAMESET ROWS="size of row 1, size of row 2, etc."> The "size of row" values can are expressed in exactly the same fashion as are "size of column" values; that is, as a percentage ("x"%), a fixed pixel width ("x"), or whatever remaining space is available ("*").
Columns are always defined left to right.
Within each row-defining frameset tag is a frame tag <FRAME SRC="x"> (where "x" is the name of an HTML document) which tells the browser which document to load in that frame. The frame tag has the following variable attributes:
SCROLLING="YES, NO, or AUTO" - Defines whether or not a frame has a scroll bar. The default setting "AUTO" lets the browser determine whether a scroll bar is needed, depending upon the size of the browser's window on a viewer's monitor. "YES" means a scroll bar will always appear, "NO" never.
NORESIZE - The absence or presence of this tag determines whether a user can resize frames as they appear on their monitor. By default (ie., whenever this tag is not included) viewers are able to resize frames. Adding this tag allows designers some control over how their pages appear.
NAME="x" - Defines the name of a frame, which is useful for keeping track of frames, as well as for targeting links between pages.
Lesson 6
Lesson 8
