by Mark R. Brown
First introduced in Netscape Navigator 2.0, HTML frames create independently changeable and (sometimes) scrollable windows that tile together to break up and organize a display so that it's not only more visually appealing, but easier to work with.
Frames are similar in many ways to HTML tables. If you understand how tables work, you'll have a jump start on how to work with frames. If you want to check out how tables work before starting with frames, see Chapter 11, "Formatting Content with Tables."
However, unlike tables, frames not only organize data, they organize your browser's display window. In fact, they break up the window into individual, independent panes or frames. Each frame holds its own HTML file as content, and the content of each frame can be scrolled or changed independently of the others. In a way, it's almost as though each frame becomes its own mini-browser.
Perhaps the best way to get a feel for what you can do with frames is to look at a few real-world examples.
As you might expect, Netscape--the inventor of frames--has some excellent examples of frames on its Web sites. Figure 12.1 is taken from Netscape's DevEdge developer's site and shows a window that is broken into four separate frames.
FIG. 12.1
Netscape's DevEdge site at http://developer.
netscape.com showcases excellent examples of using frames to separate
information from navigation.
The frames on this page show how Netscape has split information display into the two frames on the right, while reserving navigation functions for the two frames on the left.
The top-right frame--which occupies about 80 percent of the width of the screen, but only about 20 percent of its height--holds a title graphic, which serves as a landmark to help you remember where you are. This is an important function, as HTML documents created using frames can get very complex very quickly. Road signs like the header graphic in this frame can help you get your bearings.
The top-left frame--which takes up about 20 percent of the horizontal real estate and approximately 30 percent of the screen height--contains a top-level navigation menu, which stays in place wherever you go on the DevEdge site. Making a selection from this menu moves you to a new information category, such as the support area or library. This graphic menu also serves as a placeholder, because it shows the currently selected area as highlighted.
The bottom-left frame--about 20 percent of the screen width and 70 percent of its height--is a list of text-based hyperlinks that make up the information menu for the currently selected category. A new text menu is displayed in this frame whenever the user selects a new category from the graphic category menu in the frame above it.
TIP: Netscape has saved itself a great deal of time and development work by making only the category-level menus graphic, while using easier-to-create, text-only lists of links for the more numerous subcategory menus.
Finally, the bottom-right frame--which occupies the majority of the screen area, about 80 percent of its width and 70 percent of its height--contains all of the actual information displayed on this site. The information in this window is selected from the category-specific text link menu in the frame to its left.
This site can definitely serve as a template for good frames-based HTML document design for any information that is hierarchically organized by category.
Frames aren't just for business documents. Take a look at Figure 12.2, which depicts the online CyberDungeon adventure game at http://www.cyberdungeon.com.
You will probably never find 10 frames used as gracefully as those on this site. (Usually it's bad practice to use more than four to six frames at a time.) This artfully done Web site anticipates the recent mantra of both Microsoft and Netscape, who are now encouraging developers to use HTML to create graphical user interfaces for application programming.
The CyberDungeon site uses a set of frames down the left side of the screen to hold graphical icons of objects you (the resident adventurer) pick up in your explorations. The top frame of the center set of three displays the text description of your current location, while the larger frame below it shows a picture of the same scene. The bottom frame gives you choices to make along the way.
FIG. 12.2
The CyberDungeon game uses a set of 10 frames to create a familiar and friendly adventure
game interface.
Finally, the tall, right frame keeps the CyberDungeon site's navigational menu handy as you play.
This site provides a wonderful example of how a well-designed HTML document using frames can replicate applications that previously had to be written in high-level languages like C or C++.
A final example is a wonderful lampoon of the too-ambitious use of frames. The Mondrian Machine site (http://www.desires.com/2.1/Toys/Mondrian/mond-fr.html) takes the overuse of frames--normally an ugly and heinous practice--and turns it into an art form. See Figure 12.3.
Clicking a selection in the table shown in Figure 12.3 brings up one of several different Mondrian Machines. Each, in its own unique way, creates an HTML document composed of a wild collection of frames that rapidly take over the entire screen. Each frame has no content except a background color, so the end effect is that of a painting by Mondrian, who became famous for dividing his canvases into so many colored rectangles.
The effect, though humorous and somehow compelling, shows just how much trouble you can get into if you overdo the use of frames on your own pages.
That warning having been sounded, you'll now see how frames are created.
FIG. 12.3
The Mondrian Machine serves as both a fun Web toy and a graphic illustration of what
can happen if you go too crazy with frames!
Diving in head first, take a look at an entire block of HTML markup code that creates a frame document of medium complexity:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Your browser cannot display frames.
</NOFRAMES>
</HTML>
This example (Frames1.HTM) produces the frames page shown in Figure 12.4. As you can see, this HTML code produces four frames. The top frame spans the page and includes a header. There are two central frames, one for a label on the left, which takes up 25 percent of the screen width, and one for information on the right, which takes up the remaining space. Another frame fills the entire width of the bottom of the screen and contains a footer.
FIG. 12.4
This is the frame document produced by the preceding HTML code, as displayed by Netscape.
Though you won't get into the details for a couple more pages, it's important to note that this document calls four other HTML documents--header.HTM, label.HTM, info.HTM, and footer.HTM--containing the actual information displayed in each of the individual frames.
Frames are contained in a structure called a FRAMESET, which takes the place of the BODY container on a frames-formatted page. An HTML document that contains a FRAMESET definition has no BODY section in its HTML code, and a page with a BODY section cannot use the <FRAMESET> tag.
CAUTION: If you define a BODY section for a page that you compose with FRAMESET and FRAME commands, the frame structure is completely ignored by browser programs and none of the content contained in the frames is displayed. Instead, you only see the content contained in the BODY section.
Because there is no BODY container, FRAMESET pages can't have background images and background colors associated with them. (Remember, these are defined by the BACKGROUND and BGCOLOR attributes of the BODY tag, respectively.) However, the HTML files that contain the content for the individual frames can use background colors and images, since they do use the <BODY> tag.
Make sure you don't accidentally use BODY and FRAMESET within the same HTML document.
NOTE: There is a proposal before the HTML standards body to implement a new type of frame container called an IFRAME, or inline frame. (It is currently implemented only in the Microsoft Internet Explorer 4.0 browser and FrontPage 98 page composition programs.) This container defines a named box inside the BODY of a regular HTML page (not a frameset). An IFRAME would float and be positionable within a page just like a graphic or other object, but its content could be changed by clicking links, like a frame. Here's an example of how it would look:
<HTML>
<HEAD><TITLE>IFRAME Example</TITLE></HEAD>
<BODY>
Here's an inline frame <IFRAME name="iframe" width=400 height=500></IFRAME> which can display either of two text files:
<A target="iframe" href="HiThere.htm">Hi There!</A>
<A target="iframe" href="Hello.htm">Hello.</A>
</BODY>
</HTML>
Clicking the "Hi There." link would display the HiThere.HTM file in the inline frame; clicking the "Hello." link would display Hello.HTM instead, all without reloading the whole page.
The <FRAMESET></FRAMESET> container surrounds each block of frame definitions. Within the FRAMESET container you can only have FRAME tags or nested FRAMESET containers.
The <FRAMESET> tag has two major attributes: ROWS and COLS (columns). Here's a fully decked-out (but empty), generic FRAMESET container:
<FRAMESET ROWS="value_list" COLS="value_list"> </FRAMESET>
You can define any reasonable number of ROWS or COLS, or both, but you have to define something for at least one of them.
CAUTION: If you don't define more than one row or column, browser programs ignore your FRAMES completely. Your screen is left totally blank. In other words, you can't have a FRAMESET of just one row and one column--which would just be a single window, anyway. If you've defined at least two of either ROWS or COLS, however, you can safely omit the other attribute, and a value of 100 percent is assumed for it.
The value_list in your generic FRAMESET line is a comma-separated list of values that can be expressed as pixels, percentages, or relative scale values. The number of rows or columns is set by the number of values in their respective value lists. For example,
<FRAMESET ROWS="100,240,140">
defines a frameset with three rows. These values are in absolute number of pixels. In other words, the first row is 100 pixels high, the second is 240 pixels high, and the last is 140 pixels high.
Setting row and column height by absolute number of pixels is bad practice, however. It doesn't allow for the fact that browsers run on all kinds of systems on all sizes of screens. While you might want to define absolute pixel values for a few limited uses--such as displaying a small image of known dimensions--it is usually a better practice to define your rows and columns using percentage or relative values, like this:
<FRAMESET ROWS="25%,50%,25%">
This example would create three frames arranged as rows, the top row taking up 25 percent of the available screen height, the middle row 50 percent, and the bottom row 25 percent.
TIP: Don't worry about having to do the math just right--if the percentages you give for the ROWS or COLS attribute don't add up to 100 percent, they will be scaled up or down proportionally to equal 100 percent.
Proportional values look like this:
<FRAMESET COLS="*, 2*, 3*">
The asterisk (*) is used to define a proportional division of space. Each asterisk represents one piece of the overall pie. You get the denominator of the fraction by adding up all the asterisk values (if there is no number specified, 1 is assumed). In this example, with an overall pie that has six slices, the first column would get 1/6 of the total width of the window, the second column would get 2/6 (or 1/3), and the final column would get 3/6 (or 1/2).
Remember that bare numeric values assign an absolute number of pixels to a row or column, values with a percent symbol assign a percentage of the total width (for COLS) or height (for ROWS) of the display window, and values with an asterisk assign a proportional amount of the remaining space.
Here's an example using all three in a single definition:
<FRAMESET COLS="100, 25%, *, 2*">
This example assigns the first column an absolute width of 100 pixels. The second column gets 25 percent of the width of the entire display window, whatever that is. The third column gets 1/3 of what's left, and the final column gets the other 2/3.
So what are the space-allocation priorities? Absolute pixel values are always assigned space first, in order from left to right. These are followed by percentage values of the total space. Finally, proportional values are divided based upon what space is left.
CAUTION: Remember, if you do use absolute pixel values in a COLS or ROWS definition, keep them small so you are sure they'll fit in any browser window, and balance them with at least one percentage or relative definition to fill the remainder of the space gracefully.
If you use a FRAMESET with both COLS and ROWS attributes, it creates a grid of frames. Here's an example:
<FRAMESET ROWS="*, 2*, *" COLS="2*, *">
This line of HTML creates a frame grid with three rows and two columns. The first and last rows each take up 1/4 of the screen height, and the middle row takes up half. The first column is 2/3 as wide as the screen, and the second is 1/3 the width.
<FRAMESET></FRAMESET> sections can be nested inside one another, as shown in your initial example, but don't get ahead of yourself. You need to look at the <FRAME> tag first.
The <FRAME> tag defines a single frame. It must sit inside a FRAMESET container, like this:
<FRAMESET ROWS="*, 2*"> <FRAME> <FRAME> </FRAMESET>
Note that the <FRAME> tag is not a container so, unlike FRAMESET, it has no matching end tag. An entire FRAME definition takes place within a single line of HTML code.
You should have as many <FRAME> tags as there are spaces defined for them in the FRAMESET definition. In this example, the FRAMESET established two rows, so you needed two <FRAME> tags. However, this example is very, very boring, since neither of your frames has anything in it! (Frames like these are displayed as blank space.)
The <FRAME> tag has six associated attributes: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, and NORESIZE. Here's a complete generic FRAME:
<FRAME SRC="url" NAME="window_name" SCROLLING=YES|NO|AUTO MARGINWIDTH="value" MARGINHEIGHT="value" NORESIZE>
Fortunately, frames hardly ever actually use all of these options.
The most important FRAME attribute is SRC (source). You can (and quite often, do) have a complete FRAME definition using nothing but the SRC attribute, like this:
<FRAME SRC="url">
SRC defines the frame content's URL. This is usually an HTML format file on the same system (paths are relative to the page containing the FRAMESET), so it usually looks something like:
<FRAME SRC="sample.htm">
Note that any HTML file called by the SRC attribute in a FRAME definition must be a complete HTML document, not a fragment. This means it must have HTML, HEAD, and BODY containers, and so on. For example, the file called by the SRC attribute in this example, sample.HTM, might look like this:
<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> This is some Sample Text. </BODY> </HTML>
Of course, SRC can point to any valid URL. If, for example, you wanted your frame to display a GIF image that was located somewhere in Timbuktu, your FRAME might look like this:
<FRAME SRC="http://www.timbuktu.com/budda.gif">
If you specify an URL the browser can't find, space is allocated for the frame, but it won't be displayed and you get a nasty error message from your browser. Note the effect is quite different than simply specifying a FRAME with no SRC at all. <FRAME> is always created, but left blank; <FRAME SRC="unknown URL"> is not created at all--the space is allocated and left completely empty. The former fills with background color, while the latter remains the browser's border color.
CAUTION: Plain text, headers, graphics, and other elements cannot be used directly in a FRAME document. All the content must come from the URL defined by the SRC attribute of the <FRAME> tags. If any other content appears on a FRAMESET page, it is displayed and the entire set of frames is ignored.
"All of this is well and good," you say, "and I really, really want to use frames in my HTML documents. But I can't help feeling guilty about all those users who don't have frames-capable browsers. They won't be able to see my beautiful pages!"
Don't worry. Here's where you can provide for them, too.
The <NOFRAMES></NOFRAMES> container saves the day. By defining a NOFRAMES section and marking it up with normal HTML tags, you can provide alternate information for those without frames-capable browsers. This is how it works:
<NOFRAMES> All your alternate HTML goes here. </NOFRAMES>
You can safely think of this as an alternative to the BODY structure of a normal HTML page. Whatever you place between the <NOFRAMES> and </NOFRAMES> tags appears on browsers without frames capability. Browsers with frames throw away everything between these two tags.
NOTE: If you want to include background graphics or images, you can add the <BODY> tag to your alternate content like this:
<NOFRAMES>
<BODY BGCOLOR="red" BACKGROUND="bgimage.gif">
content...
</BODY>
</NOFRAMES
As long as the BODY container is kept within the bounds of the NOFRAMES container, your document works just fine. But there's no need to use the <BODY> tag within the NOFRAMES container unless you want to take advantage of its special attributes.
Frames are very flexible, which means they can become complicated quickly. Now that you understand the basics, take a look at a few frame examples so you can get your bearings.
The simplest possible frame setup is one with two frames, like this:
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="*, 2*">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
</HTML>
This HTML code (2Frames.HTM) defines a page with two frames, organized as two columns. The first column takes up 1/3 of the width of the screen and contains the HTML document label.HTM, and the second takes up the other 2/3 and contains the document info.HTM. Figure 12.5 shows how Netscape Navigator displays this page.
You could just as easily create 10 or more columns, or use the same syntax, substituting the ROWS attribute to create 2 (or 10) rows. However, 10 columns or rows is way too many for any browser to handle gracefully. Your pages should probably never have more than three or four rows or columns.
NOTE: If you want to display more information than three or four rows or columns, you should probably be using tables rather than frames. Remember, frames are most useful when you want to add an element of control in addition to formatting the display, or if you need to update displayed data dynamically. Tables are best if all you want to do is format static data into rows and columns.
Too many frames can actually crash your browser. For a real-world example (if you don't mind your browser program crashing) check out http://www.newdream.net/crash/ (see Figure 12.6).
FIG. 12.5
Netscape displays the simple two-column FRAMESET defined by the HTML
code above.
FIG. 12.6
This Web site sets out to deliberately crash your browser by creating too many frames--and
succeeds! Don't cause the same problem for your viewers.
A regular rectangular grid of rows and columns is just about as easy to implement as a rows-only or columns-only arrangement:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="*, 2*" COLS="20%, 30%, 40%">
<FRAME SRC="labela.htm">
<FRAME SRC="labelb.htm">
<FRAME SRC="labelc.htm">
<FRAME SRC="infoa.htm">
<FRAME SRC="infob.htm">
<FRAME SRC="infoc.htm">
</FRAMESET>
</HTML>
This example (2by3Grid.HTM) creates a grid with two rows and three columns (see Figure 12.7). Because you defined a set of six frames, you've provided six FRAME definitions. Note that they fill in by rows. That is, the first FRAME goes in the first defined column in the first row, the second frame follows across in the second column, and the third finishes out the last column in the first row. The last three frames then fill in the columns of the second row going across.
Also, note that the math didn't work out very well, since the percentage values in the COLS definition only add up to 90 percent. No problem, because the browser has adjusted all the columns proportionally to make up the difference.
FIG. 12.7
This two-by-three grid of frames was created by the preceding HTML example.
A bit tougher is the problem of creating a more complex grid of frames. For that, return to the example that opened this discussion (see Figure 12.4):
<HTML> <HEAD> </HEAD> <FRAMESET ROWS="25%,50%,25%"> <FRAME SRC="header.htm"> <FRAMESET COLS="25%,75%"> <FRAME SRC="label.htm"> <FRAME SRC="info.htm"> </FRAMESET> <FRAME SRC="footer.htm"> </FRAMESET> <NOFRAMES> Your browser cannot display frames. </NOFRAMES> </HTML>
This example (Frames1.HTM) makes use of nested FRAMESET containers. The outside set creates three rows, with 25 percent, 50 percent, and 25 percent of the window height, respectively:
<FRAMESET ROWS="25%,50%,25%">
Within this definition, the first and last rows are simple frames:
<FRAME SRC="header.htm"> <FRAME SRC="footer.htm">
Each of these rows runs the entire width of the screen. The first row at the top of the screen takes up 25 percent of the screen height, and the third row at the bottom of the screen also takes up 25 percent of the screen height.
In between however, is this nested FRAMESET container:
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
This FRAMESET defines two columns that split the middle row of the screen. The row these two columns reside in takes up 50 percent of the total screen height, as defined in the middle row value for the outside FRAMESET container. The left column uses 25 percent of the screen width, while the right column occupies the other 75 percent of the screen width.
The frames for the columns are defined within the set of FRAMESET tags, which include the column definitions, while the frame definitions for the first and last rows are outside the nested FRAMESET command, but within the exterior FRAMESET, in their proper order.
This is not as confusing if you think of an entire nested FRAMESET block as a single <FRAME> tag. In this example, the outside FRAMESET block sets up a situation in which you have three rows. Each must be filled. In this case, they are filled by a FRAME, then a nested FRAMESET two columns wide, then another FRAME.
By now (if you are a perverse programming-type person) you may be asking yourself, "I wonder if it is possible for a FRAME to use as its SRC a document that is, itself, a FRAMESET?" The answer is "Yes." In this case, you simply use the <FRAME> tag to point to an HTML document that is the FRAMESET you would have otherwise used in place of the FRAME.
Redefine the previous example (which used nested FRAMESETs) in terms of referenced FRAME documents instead. All you're doing is moving the nested FRAMESET to its own document. Here's the first (outside) file (Frames2.HTM):
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAME SRC="nested.htm">
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Your browser cannot display frames.
</NOFRAMES>
</HTML>
And here's the second (inside) file (Nested.HTM):
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
</HTML>
In this case, the top and bottom rows behave as before. But the second row in the "outside" file is now just a simple FRAME definition like the others. However, the "inside" file that its SRC points to is Frameset.HTM, which you created with a FRAMESET all its own. When inserted into the original FRAMESET, it behaves just as if it appeared there verbatim. The resulting screen is identical to the original example (compare Figure 12.8 to Figure 12.4).
CAUTION: Though it's possible to create nested FRAMESETs by using <FRAME> tags that call the same URL, it certainly isn't a good idea. This is called infinite recursion, which creates an infinite loop in a computer that consumes all memory and crashes the machine. Fortunately, frames-aware browsers check for this--if an SRC URL is the same as any of its ancestors it's ignored, just as if there were no SRC attribute at all.
By using nested FRAMESET containers in clever combinations, it is possible to create just about any grid of frames you can dream up. But remember that you're trying to create a friendly, useful interface, not show off how clever you can be with frames.
NOTE: In Netscape Navigator 2.0, the toolbar's Back button didn't back you out of a frame, it backed you out of the whole FRAMESET to the previous page.
With versions 3.0 and above--as well as within Internet Explorer--pressing the Back button returns you to the previous state of the currently selected frame.
To navigate forward or backward within a frame, make sure you make the frame active first by clicking in it somewhere, then use the Forward or Back buttons or menu selections to navigate within that frame.
FIG. 12.8
FRAMESET containers can be nested or can call other documents containing their
own FRAMESETs. The end result is the same.
Now that you understand how framesets are used to create various grids of frames, take a look at some of the attributes that modify how frames look and feel.
The FRAME attributes MARGINWIDTH and MARGINHEIGHT give you control over the width of the frame's interior margins. They both look like this:
MARGINWIDTH="value"
value is always a number, and always represents an absolute value in pixels. For example:
<FRAME MARGINHEIGHT="5" MARGINWIDTH="7">
would create a frame with top and bottom interior margins five pixels wide, and left and right margins seven pixels wide. Remember, you're talking interior margins here, not borders. MARGINWIDTH and MARGINHEIGHT define a space within the frame within which content will not appear. Border widths are set automatically by the browser, or by the BORDER attribute, which is discussed later in this chapter in the "Frame Borders" section.
Your frames will automatically have scrollbars if the content you've specified for them is too big to fit the frame. Sometimes this ruins your page's aesthetics, so you need a way to control them. That's what the SCROLLING attribute of the <FRAME> tag is for. Here's the format:
<FRAME SCROLLING="yes|no|auto">
There are three valid values for SCROLLING: Yes, No, and Auto. Auto is assumed if there is no SCROLLING attribute in your FRAME definition. Yes forces the appearance of a scrollbar. No keeps a scrollbar away at all costs. For example, this FRAME definition turns on scrollbars:
<FRAME SCROLLING=YES>
Frames are normally resizable by the user, but if you let the user drag your frames around, it can quickly muck the look and feel of your beautifully designed frames. Therefore, you almost always want to use the NORESIZE attribute of the <FRAME> tag to keep users from resizing your frames. Here's how:
<FRAME NORESIZE>
That's it. No values. Of course, when you set NORESIZE for one frame, none of the adjacent frames can be resized, either. Depending on your layout, using NORESIZE in a single frame will often be enough to keep users from resizing all the frames on the screen.
When you move over a resizable frame border with the mouse cursor, it changes to a double-arrow (see Figure 12.9), indicating that the frame can be resized. If you don't get the double-arrow, it means that resizing has been turned off with the NORESIZE attribute. To resize a resizable frame, grab the frame border by clicking and dragging it with your mouse to a new position.
TROUBLESHOOTING: I've created a frame using the NORESIZE attribute. What do I do about users who are using small screens on which the entire contents of the frame may not fit? Your best bet is to make sure the frame will hold all of its content at lower screen resolutions. That is, redesign the frame. Otherwise, consider reenabling, resizing, or adding scrollbars to the frame.
Figure 12.9 shows an example of a frames page in which the lower-left frame has had its MARGINHEIGHT set to 50, MARGINWIDTH set to 100, and SCROLLING set to Yes. The NORESIZE attribute has not been used, so you can see what the resizing cursor looks like.
You use the BORDER, FRAMEBORDER, and BORDERCOLOR attributes to set the look and feel of the borders for your frameset.
The BORDER attribute is used only with the <FRAMESET> tag, and sets the width of all the borders in the frameset. It is assigned a value in pixels, like this:
<FRAMESET BORDER="5">
This example would set the width of the frame borders to 5 pixels. BORDER can be assigned a value of 0, in which case all the frames in your frameset will be borderless.
FIG. 12.9
The HTML source for this FRAMESET is shown in the upper frame.
TIP: The default value of BORDER (that is, the value it assumes if there is no BORDER="n" attribute specified for a given FRAMESET) is 5.
The FRAMEBORDER attribute can be used with either the <FRAMESET> or <FRAME> tag. It has two legitimate values, YES and NO. If FRAMEBORDER="YES", then frame borders are drawn with a 3-D look. If FRAMEBORDER="NO", frame borders are invisible, which really means that they are drawn in the default background color of the browser.
The default value of FRAMEBORDER is YES, which means that browser programs generally display 3-D frame borders.
The border for a frame will be invisible (not 3-D) only if FRAMEBORDER="NO" is set for all surrounding frames.
TIP: To create a page with entirely borderless frames, set FRAMEBORDER="NO" and BORDER="0" in the top FRAMESET definition.
The BORDERCOLOR attribute can be used with the FRAMESET tag or with the FRAME tag. BORDERCOLOR can be assigned a named color value, or a hexadecimal RGB color value. Here's an example:
<FRAMESET BORDERCOLOR="red" ROWS="*,*">
<FRAME SRC="info.htm" BORDERCOLOR="#FF00FF">
<FRAME SRC="info.htm">
</FRAMESET>
In this example, the outer <FRAMESET> tag sets the BORDERCOLOR to red, one of the named colors for most browsers. But the following <FRAME> tag sets BORDERCOLOR to the hexadecimal value #FF00FF (which happens to be purple). The lowest level definition takes precedence. Though the FRAMESET BORDERCOLOR is defined as red, the border color of the first frame is instead set to the hexadecimal RGB value #FF00FF. The adjacent frame, which has no BORDERCOLOR definition, has a border of #FF00FF on the edge it shares with the other frame, but a color of red on borders it does not share with that frame.
NOTE: RGB hexadecimal color values are precise, but obscure. (Exactly what color is #FA10D7?) Named colors are easier to comprehend, but not all browsers support the same color names. In general, if you stick with the sixteen common color names listed here, you'll be safe: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
TIP: If two adjacent frames of the same priority attempt to define their own BORDERCOLOR, neither takes effect. They revert to the BORDERCOLOR defined at the next higher FRAMESET level.
Figure 12.10 shows an example of using the BORDER, FRAMEBORDER, and BORDERCOLOR attributes to control the look and feel of your frame borders. Note that the only frame to maintain the BORDERCOLOR defined in the outside FRAMESET definition is the one in the upper-right, the only frame that doesn't share a border with the leftmost center frame, which redefines the BORDERCOLOR. Actually, the rightmost center frame would have also had a red border on the left, but it has had its left border turned off by the FRAMEBORDER="NO" attribute it shares with the central frame. Note this complex interplay of attributes carefully. If you use them often, their interrelationships are sure to throw you for a loop more often than they make sense.
FIG. 12.10
The HTML source for this border-manipulating example is shown in the top frame.
CAUTION: Microsoft Internet Explorer supports one more attribute for FRAMESET, called FRAMESPACING. It is intended to define the space between frames, and can assume pixel values. However, because Netscape Navigator and other browser programs don't support the FRAMESPACING attribute, you are strongly advised against using it unless you are creating content for an audience that uses Internet Explorer exclusively, and you have a good reason for having to specify the spacing between frames.
NOTE: There are two more attributes for the <FRAME> tag: ONLOAD and ONUNLOAD. These are used with scripting languages like VBScript and JavaScript to specify a script to run when a frame is loaded or unloaded from a frameset. Scripting is covered in detail in Chapter 16, "Adding JavaScript and VBScript to HTML."
Though you've examined in-depth how to create and nest framesets, and how to control the look and feel of frames, you have yet to understand how to use frames to control navigation, which is its major application. To use frames to their full advantage, you need to know how to name and target frames.
The NAME attribute assigns a name to a frame that can be used to link to the frame, usually from other frames in the same display. This example,
<FRAME SRC="info.htm" NAME="Joe">
creates a frame named "Joe," which can be referenced via a hyperlink like this:
<A HREF="moreinfo.htm" TARGET="Joe">Click Here to Jump to Joe</A>
Note the TARGET attribute in the hypertext link that references the name of your frame. When selected, this hyperlink replaces the content of the named frame "Joe"--which was given the content file info.HTM when it was created--with the content in the file moreinfo.HTM. Note that while a hyperlink without a named TARGET replaces the content in its own window or frame with the content named in the HREF attribute, a hyperlink with a named TARGET instead replaces the content in the targeted frame or window with the content named in the HREF attribute. This is the only trick you need to know for creating killer frames-based navigational systems. Of course, there are some fine points.
If you don't create an explicit name for a frame, it simply has no name, and you won't be able to use links in one frame to open documents or images in another. You'll want to name all frames whose content will be changed by clicking a link in a different frame.
All frame names must begin with an alphanumeric character. Don't use an underscore (_) as the first character in a frame name. Other than that, you're pretty much on your own.
However, there are four reserved implicit names built into HTML, and all of them do start with an underscore. These are listed in Table 12.1. All other names starting with an underscore are ignored.
| Name | Purpose |
| _blank | Load content directed to this name into a new, unnamed window. This name is used to completely wipe out the current frameset and start with a new, blank window. |
| _self | Load content directed to this name into the calling frame. |
| _parent | Load content directed to this link to the calling frame's parent frameset window. If it has no parent frameset, this is the same as using the name _self. |
| _top | Load content directed to this link to the top level frameset related to the calling frame. If the calling frame is already the top level, this is the same as using the name _self. |
If a frame contains the following link, then clicking the link launches a new, unnamed browser display window that contains the content defined in stuff.HTM. This can be a simple HTML document, or an entirely new FRAMESET definition. Whichever, this call wipes the slate clean and starts completely over.
<A HREF="stuff.htm" TARGET="_blank">
If a frame contains the following link, then clicking the link will simply cause the frame which contains the link to clear, and its content will be replaced with whatever is in stuff.htm.
<A HREF="stuff.htm" TARGET="_self">
If a frame contains the following link, the frameset that contains the frame that contains this link will be replaced by stuff.HTM.
<A HREF="stuff.htm" TARGET="_parent">
Finally, if a frame contains the following link, clicking the link replaces the entire browser window with the contents of stuff.HTM.
<A HREF="stuff.htm" TARGET="_top">
NOTE: Hyperlinks using the <A> or anchor tag aren't the only tags that can make use of the TARGET attribute. The <AREA>, <FORM>, and <BASE> tags also use the TARGET attribute, and can be used effectively to extend and expand the utility of named frames.
Remember, too, that windows can also be named by using the TARGET attribute within the <A> tag; using named windows in conjunction with named frames adds a whole new dimension to HTML document navigation.
You've seen that you can click a link in one frame to change the content in another. First you name the target frame using the NAME attribute of the <FRAME> tag when creating the target frame. You then use the TARGET attribute of the <A> hyperlink tag when defining the link, as in this example:
<FRAME SRC="info.htm" NAME="Joe"> <A HREF="moreinfo.htm" TARGET="Joe">Click Here to Jump to Joe</A>
The first line of HTML is used in the frame definition document, and the second line is used in the document that links to the first.
You've also seen that you can use special implicit names to target some frames and framesets, depending on their relationship to the frame that contains the calling link.
But what if you want to update more than one frame by clicking a single link? This is possible if you set up your document correctly. The key is to update a frameset, not a single frame.
To do this, create a subframeset that is contained in its own file, as was done earlier in the example shown in Figure 12.8. If you recall, you began with an HTML document that included one frameset nested inside another:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
</HTML>
Then you took the nested frameset out and put it into its own file.
Here's the original file, with the nested frameset replaced by the FRAME definition pointing to the second file, nested.HTM. Note that you named this frame this time using the NAME attribute, calling it "Inner":
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAME SRC="nested.htm" NAME="Inner">
<FRAME SRC="TestLink.htm">
</FRAMESET>
</HTML>
Also note the last FRAME SRC file has been renamed TestLink.HTM--this file contains the targeted link you want to test. Call this modified file NameTest.HTM. Now here's the file (nested.HTM) that the frame named Inner calls:
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
</HTML>
The file that occupies the bottom frame contains the file TestLink.HTM, which is listed here:
<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <A HREF="NewStuff.htm" TARGET="Inner">Click me</A> to put new stuff into the upper center frameset. </BODY> </HTML>
The frameset created by these two files (and their associated content files) is shown in Figure 12.11.
FIG. 12.11
Here's your test page, all set to change two frames with one mouse click.
When the link Click me in the bottom window is clicked, it replaces the two frames in the center frameset (which was defined in the file nested.HTM) with new information from the document NewStuff.HTM. Say this is the content of NewStuff.HTM:
<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> Here is some NEW STUFF! </BODY> </HTML>
When you click the link in the bottom window, you get the result shown in Figure 12.12.
FIG. 12.12
Clicking the hyperlink in the bottom window has replaced the two-frame central
frameset with the single frame of content from a different file.
With one click, you've replaced the two frames of the central frameset with a single frame containing new content. You could just as easily have replaced the two frames with two new frames--the same size, or different sizes--or with three frames, or with a whole new frameset. All you would have to do is define the new frameset in your new content file, NewStuff.HTM.
If you're careful and think ahead when defining your framesets, you can easily create hyperlinks that can update almost any combination of frames with a single mouse click.
TROUBLESHOOTING: I have two frames that don't have the same parent frameset. Can I update both of them with one hyperlink? Yes. You have to write a JavaScript or VBScript application to handle them. In fact, this is how Netscape Communications has done multiframe updates from single hyperlinks on its own Web site.
© Copyright, Macmillan Computer Publishing. All rights reserved.