Chapter 4. Frames
 | CONTENTS |  |
|
Topics in This Chapter
-
The basic structure of framed documents
-
Specifying how the main browser window is divided
-
Supplying the content of each of the frame cells
-
Specifying that certain hypertext links be displayed in particular frames
-
Using the preassigned frame names
-
Solving common frame problems
-
Using inline (floating) frames
With frames, you can divide the current window into various rectangular cells, each associated with a separate HTML document. Frames were first developed by Netscape Corporation for use in Navigator 2.0 and were later adopted by Microsoft Corporation in Internet Explorer 3.0. Although not part of the earlier HTML 3.2 standard, frames, due to their significant capability and popularity in modern Web pages, became an integral part of HTML 4.0. Even though frames provide capabilities not obtainable with other HTML constructs, frames still remain slightly controversial because of some minor drawbacks. A few advantages of frames include the following:
-
The author can guarantee that certain parts of the interface (e.g., a table of contents) are always on the screen.
-
The author can avoid retyping common sections of multiple Web pages. Instead, the same document can be included in a frame in each of the Web pages.
-
Users can navigate large Web sites more easily.
-
Frames are a convenient way to mix text-oriented HTML with Java applets.
-
Image maps are more convenient if the map image remains on screen and only the results section changes.
As a result, some users love frames and prefer pages that use them. However, frames have a few disadvantages as well:
-
The meaning of the Back and Forward buttons can be confusing to users.
-
Poorly designed frames can get the user lost.
-
Because the address bar at the top of the document shows the URL of the top-level document, finding the URL of a particular frame cell when the user wants to remember or bookmark it may be difficult.
-
Because a bookmark (favorite) can only specify a particular URL, users cannot save a particular frame configuration (i.e., the way the document looks after several selections).
-
When you select Print, many browsers print the active frame cell, which, in most cases, is the Table of Contents cell that you just clicked in, not the new content cell.
As a result, some users hate frames and strongly prefer pages that do not use them. Although this chapter will help you avoid many of the disadvantages of frames, a good rule of thumb is to reserve frames for situations where the advantages are significant enough that you are willing to risk losing the readers that dislike frames.
In the HTML 4.0 specification, the TITLE attribute, covered in Chapter 1 (Designing Web Pages with HTML 4.0), is allowed for all elements in this chapter and is not covered individually for each element. Furthermore, the cascading style sheet specification also adds CLASS, ID, and STYLE attributes to all elements in this chapter. These three style sheet attributes are covered in Chapter 5 (Cascading Style Sheets) and are not covered separately here.
4.1 Frame Document Template
In a normal HTML document, the BODY section immediately follows the HEAD and contains the body of the Web page that the user sees. In a frame document, the BODY is omitted or relegated to a NOFRAMES section only seen by browsers that do not support frames. In lieu of BODY, a FRAMESET elements defines the basic row and column structure of the document. Listing 4.1 gives a basic template illustrating this structure. A FRAMESET can contain nested FRAMESETs that further subdivide the window, or it can contain FRAME elements that reference the URLs of the actual documents that will be displayed in the frame cells. A frame document should include the Frameset DOCTYPE,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> to be validated as legal HTML 4.0.
Listing 4.1 Template for frame documents
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Document Title</TITLE> </HEAD> <FRAMESET ...> <!- FRAME and Nested FRAMESET Entries -> <NOFRAMES> <BODY> <!- Stuff for non-frames browsers -> </BODY> </NOFRAMES> </FRAMESET> </HTML>
4.2 Specifying Frame Layout
The FRAMESET element defines the number and size of frame cells in a page.
| HTML Element: | <FRAMESET ...> ... </FRAMESET> |
|---|---|
| Attributes: | ROWS, COLS, FRAMEBORDER(nonstandard), BORDER (nonstandard), FRAMESPACING(nonstandard), BORDERCOLOR (nonstandard), ONFOCUS(nonstandard), ONBLUR (nonstandard), ONLOAD, ONUNLOAD |
FRAMESET divides the current window or frame cell into rows or columns. Entries can be nested, so you can divide the window into complex rectangular regions. ROWS and COLS are basic to frames. FRAMEBORDER, BORDER, BORDERCOLOR, ONFOCUS, and ONBLUR are nonstandard attributes supported by both Netscape and Internet Explorer in versions 4.0 and later. FRAMESPACING is also a nonstandard attribute, supported only by Internet Explorer. ONLOAD and ONUNLOAD specify JavaScript code to execute when the frameset is loaded and unloaded, respectively.
ROWS The ROWS attribute divides the browser window (or current cell, in the case of nested frames) horizontally, as used below.
<FRAMESET ROWS="Row1-Size, ... , RowN-Size"> ... </FRAMESET>This code divides the current window or frame cell into N rows. Each size entry can be an integer (representing absolute pixels), an integer followed by % (indicating percentage of total available space), or an entry containing *. The * indicates "whatever space is left" and can be weighted by an integer placed in front if there is more than one such entry. For instance:
<FRAMESET ROWS="50,10%,*,2*"> ... </FRAMESET>This code specifies four rows. The first will be 50 pixels high, the second will be 10 percent of the total height, and the remaining space will be allocated to the last two rows, with the third row getting one-third of that remaining space and the fourth getting two-thirds (see Figure 4-1).
Figure 4-1. A frame document with a row specification of "50,10%,*,2*".
As can be seen in Figure 4-1, small frame cells can result in sections that are hard or impossible to read, and you should keep in mind the possibility that the reader might use different-sized windows or fonts different from the ones you normally use. One of either ROWS or COLS is required. Finally, note that the ROWS values should always have at least two entries or the rows will not display properly in Netscape. For example,
<FRAMESET ROWS="*"> <FRAME SRC="CoreWebProgramming.html"> </FRAMESET>results in an empty frame cell (Netscape only).
Core Alert
 | FRAMESET entries should always specify at least two rows or columns. |
COLS The COLS attribute divides the current window or frame cell vertically; the syntax is the same as for the ROWS attribute. Like the ROWS attribute, COLS can appear at the top level or within another cell that was specified by FRAMESET. The COL values should always have at least two entries; wrapping FRAMESET around a single FRAME entry is unnecessary, and, in fact, doing so can cause incorrect results in Netscape. One of either ROWS or COLS is required.
FRAMEBORDER The FRAMEBORDER attribute indicates whether borders will be drawn between frame cells. The default is to use borders. FRAMEBORDER=0 is often used in conjunction with BORDER=0 and FRAMESPACING=0 to produce a frame completely without inner and outer borders. The FRAMEBORDER setting for the overall FRAMESET can be overridden by FRAMEBORDER settings in individual FRAME entries or in nested FRAMESETs. Netscape 3.0 and later and Internet Explorer 4.0 and later accept YES or 1 to specify that borders should be shown and NO or 0 to specify that no borders should be used. As an example, Listings 4.2 and 4.3 show the source for two framed documents that are identical except for the FRAMEBORDER value. Figures 4-2 and 4-3 show the results.
Figure 4-2. By default, 3D borders are drawn between frame cells.
Figure 4-3. The 3D border between frame cells can be suppressed by the FRAMEBORDER attribute.
Listing 4.2 Frame-Borders.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Frames with Borders</TITLE> </HEAD> <FRAMESET ROWS="40%,60%"> <FRAME SRC="Frame-Cell.html"> <FRAMESET COLS="*,*"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HREF="Frame-Cell.html">nonframes version</A>. </BODY> </NOFRAMES> </FRAMESET> </HTML>Listing 4.3 Frame-Borderless.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Borderless Frames</TITLE> </HEAD> <FRAMESET ROWS="40%,60%" FRAMEBORDER=0 BORDER=0 FRAMESPACING=0> <FRAME SRC="Frame-Cell.html"> <FRAMESET COLS="*,*"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HREF="Frame-Cell.html">nonframes version</A>. </BODY> </NOFRAMES> </FRAMESET> </HTML>BORDER and FRAMESPACING (Internet Explorer) These Internet Explorer-specific attributes specify the thickness of the border between cells and apply to the outermost FRAMESET only. The default is 5.
BORDERCOLOR This nonstandard attribute, supported by both Netscape and Internet Explorer, sets the color of the border between cells, using either a hex RGB value or color name. The default is to use a 3D shadowed version of the background color. The border color can be overridden by BORDERCOLOR in FRAME entries or in a nested FRAMESET.
ONFOCUS and ONBLUR These attributes designate JavaScript code to be executed when the frame gains/loses the input focus. Although attribute names are always case insensitive in HTML, traditional JavaScript calls them onFocus and onBlur rather than ONFOCUS and ONBLUR.
ONLOAD and ONUNLOAD These attributes specify JavaScript code to be executed when the frameset is loaded and unloaded (i.e., when the user enters and exits the page). These attributes are usually called onLoad and onUnload in JavaScript.
4.3 Specifying the Content of Frame Cells
| HTML Element: | <FRAME SRC="..." ...> (No End Tag) |
|---|---|
| Attributes: | SRC, NAME, FRAMEBORDER, BORDERCOLOR (nonstandard), MARGINWIDTH, MARGINHEIGHT, CROLLING, NORESIZE, LONGDESC |
The FRAME element designates the HTML document that will be placed in a particular frame cell. FRAME entries are legal only inside FRAMESET containers. BORDERCOLOR is a nonstandard attribute supported by both Netscape and Internet Explorer.
SRC SRC specifies the URL of the document to be placed in the current cell. SRC is not strictly required because the HTML 4.0 specification permits empty frames. However, to avoid unexpected results, treat SRC as required in Netscape. See Section 4.5 (Solving Common Frame Problems) for more details.
Core Alert
| | FRAME entries with NAME but no SRC give unexpected results in Netscape. |
NAME The NAME attribute gives a name to the current cell. The TARGET attribute of A, AREA, BASE, and FORM can then be used to display new documents in the cell. See Section 4.4 (Targeting Frame Cells) for details. Similarly, a showDocument call in Java can supply a second argument with the cell name. The name must be begin with an alphanumeric character, but four predefined cell names that begin with an underscore are available. See Table 4.1 for more details on these predefined names.
FRAMEBORDER FRAMEBORDER specifies whether or not the 3D border between cells is drawn. A FRAMEBORDER entry in an individual FRAME overrides that of the enclosing FRAMESET, with the proviso that a border is omitted only if adjacent cells also have FRAMEBORDER turned off. Netscape 3.0 and later and Internet Explorer 4.0 and later accepts YES or 1 to specify that borders should be shown and NO or 0 to specify that no borders should be used.
BORDERCOLOR The BORDERCOLOR attribute determines the color of the frame's borders and can be a color name or a hex RGB value (see Table 1.1 in Section 1.6). When colors conflict at shared borders, the innermost definition wins, with Netscape resolving ties in an unspecified fashion.
MARGINWIDTH MARGINWIDTH specifies the left and right cell margins.
MARGINHEIGHT MARGINHEIGHT specifies the top and bottom cell margins.
SCROLLING SCROLLING specifies whether cells should have scrollbars. In Netscape, YES results in a cell always having scrollbars, and AUTO (the default) means that a cell should have scrollbars only if the associated HTML document doesn't fit in the allocated space. In Internet Explorer, YES (the default) means the same as AUTO in Netscape. NO disables scrollbars in both cases.
NORESIZE By default, the user can resize frame cells by dragging the border between cells. NORESIZE disables this capability.
LONGDESC LONGDESC specifies a URI that provides a detailed description of the frame and is most suitable for nonvisual browsers.
| HTML Element: | <NOFRAMES> ... </NOFRAMES> |
|---|---|
| Attributes: | None |
A browser that supports frames ignores text inside the NOFRAMES container. However, the text will be shown by other browsers, which simply ignore the <NOFRAMES> and </NOFRAMES> tags, just like all other unrecognized tags. The text and markup inside a NOFRAMES element can be used to give a nonframe version of the page or to supply links to a separate nonframe version or the "main" cell of the document. Inflammatory alternate text like
<NOFRAMES> Your browser doesn't support frames. Get a <B>real</B> browser. </NOFRAMES>
may be amusing (we hackers are easily amused), but not particularly helpful.
The HTML 4.0 specification adds event handling attributes (ONCLICK, ONDBLCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONMOUSEOVER, ONMOUSEUP) to the NOFRAMES element. See Chapter 24 (JavaScript: Adding Dynamic Content to Web Pages) for complete details on event handling in JavaScript. Furthermore, the HTML 4.0 specification also adds DIR and LANG attributes to the NOFRAMES element. These two attributes are covered in Section 1.6 (BODY-Creating the Main Document).
Examples
Listing 4.4 divides the top-level window into two rows, the first with three columns, and the second with two columns. The result is shown in Figure 4-4.
Figure 4-4. A document divided into two rows: the first with three columns, the second with two.
Listing 4.4 Frame-Example1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Frame Example 1</TITLE> </HEAD> <FRAMESET ROWS="55%,45%"> <FRAMESET COLS="*,*,*"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <FRAMESET COLS="*,*"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HREF="Frame-Cell.html">nonframes version</A>. </BODY> </NOFRAMES> </FRAMESET> </HTML>
Listing 4.5 divides the top-level window into two columns, the first with three rows, and the second with two rows. The result is shown in Figure 4-5.
Figure 4-5. A document divided into two columns: the first with three rows, the second with two.
Listing 4.5 Frame-Example2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Frame Example 2</TITLE> </HEAD> <FRAMESET COLS="55%,45%"> <FRAMESET ROWS="*,*,*"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <FRAMESET ROWS="*,*"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HREF="Frame-Cell.html">nonframes version</A>. </BODY> </NOFRAMES> </FRAMESET> </HTML>
4.4 Targeting Frame Cells
A document can specify that pages referenced by hypertext links be placed in certain frames when selected. To target a particular frame, name the frame cell with the NAME attribute of FRAME; then, the hypertext reference gives a TARGET using that name. Be aware that user-defined names (see Table 4.1 in Section 4.4, "Targeting Frame Cells") that begin with an underscore are illegal. In the absence of a TARGET attribute, the new document will appear in whatever cell the selected cross-reference is located. If you supply a TARGET that does not yet exist, the designated document is placed in a new browser window and assigned the given name for future reference. Elements that allow a TARGET attribute include A, AREA, BASE (for giving a default target), and FORM. Java applets can target named frame cells by supplying a second argument to getAppletContext().showDocument.
Core Approach
| | Avoid beginning underscores when specifying user-defined frame names. |
One common use of frames is to supply a small toolbar or table of contents frame at the top or left of the document, with a larger region reserved for the main document. Clicking on entries in the table of contents displays the designated link in the main document area. For instance, consider the example layout shown in Figure 4-6.
Figure 4-6. A document containing two frames: a table of contents frame and a second frame displaying one of the content sections.
The overall page is laid out to give the table of contents a fixed amount of space, with the remaining space devoted to the main document (named Main). Listing 4.6 gives the HTML used for the top-level layout.
Listing 4.6 Cold-Fusion.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Investing in Cold Fusion</TITLE> </HEAD> <FRAMESET ROWS="75,*"> <FRAME SRC="TOC.html" id="TOC"> <FRAME SRC="Introduction.html" id="Main"> <NOFRAMES> <BODY> This page requires Frames. For a non-Frames version, <A HREF="Introduction.html">the introduction</A>. </BODY> </NOFRAMES> </FRAMESET> </HTML>
Next, links in the TOC.html document supply a TARGET attribute of Main, so that links selected in the upper frame are displayed in the lower frame. The table of contents document would have targeted anchor links, as shown in Listing 4.7.
Listing 4.7 TOC.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Table of Contents</TITLE> </HEAD> <BODY> <TABLE WIDTH="100%"> <TR><TH><A HREF="Introduction.html" TARGET="Main"> Introduction</A></TH> <TH><A HREF="Potential.html" TARGET="Main"> Potential</A></TH> <TH><A HREF="Investing.html" TARGET="Main"> Investing</A></TH> <TH><A HREF="References.html" TARGET="Main"> References</A></TH></TR> </TABLE> </BODY> </HTML>
The idea is that if one of the entries in the table of contents is selected, the designated page gets shown in the lower frame, with the table of contents remaining unchanged. Note: you could have achieved the same effect by omitting the TARGET attributes in the links and supplying <BASE TARGET="Main"> in the HEAD. Figure 4-7 shows the result after the "Investing" link was selected. Any document with a TARGET attribute is not strict HTML 4.0 and requires a Transitional DOCTYPE at the beginning of the document. Of course, the four documents referenced by TOC.html can be standard HTML 4.0 with no TARGET attributes because untargeted links automatically display in the current frame cell.
Figure 4-7. Framed document before hypertext link is selected.
Core Approach
| | If all links in the document target the same frame cell, then use <BASE TARGET="..."> in the HEAD section to set the target for all the links. |
Predefined Frame Names
Four built-in frame names can be used when you specify TARGET attributes: _blank, _top, _parent, and _self. Since user-defined frame names cannot begin with an underscore, these names have the same interpretation in all framed documents. Table 4.1 summarizes the hyperlink action associated with the four reserved target names.
| Target | Redirection Action |
|---|---|
| _blank | Using a link target of _blank causes the linked document to be loaded into a new unnamed window. |
| _top | Using _top as a link target causes the linked document to take up the whole browser window. That is, the document referenced by the link will not be contained in a frame cell, although the document can still contain frames. |
| _parent | Using a target of _parent causes the linked document to be placed in the cell occupied by the immediate FRAMESET parent of the document. This use gives the same result as _top if there are no nested frames. |
| _self | Using a target of _self causes the linked document to be placed in the current cell. Explicitly specifying _self is only necessary to override a BASE entry. In the absence of <BASE TARGET="frameName">, the default behavior is to place the linked document in the cell containing the link. |
4.5 Solving Common Frame Problems
Frames can cause difficulties for users and developers. Some of these problems are due to misconceptions that people have about the "page" stemming from a single HTML document. This section describes the most common difficulties and provides suggestions for avoiding them or minimizing their impact.
Bookmarking Frames
Suppose you are visiting a page that uses frames. Call this page Url1. You browse around for a while and find a document that is of particular interest to you. Call this Url2. So, you try to save a reference to Url2 by adding it to your bookmarks list (also called "favorites" or "hotlist," depending on the browser). Later, you select that bookmark, but the browser brings you to the original frames-based page (Url1), not the second page you found (Url2). What's going on? The problem is that selecting Add from the Bookmarks or Favorites menu saves the URL of the top-level document (as shown on the address/location field at the top of the browser), not the one displayed in the frame cell you were interested in saving. This problem can be particularly unexpected when you visit a page that has frame borders turned off, because if you are not watching the address bar, you might not even realize that frames are being used.
In Netscape and Internet Explorer on Windows, clicking with the secondary (right) mouse button in a frame cell brings up a menu that allows you to save a bookmark to the URL of that particular cell. Now, selecting that entry later doesn't return you to the original frameset page, but rather to the individual frame cell.
Knowing how to save bookmarks to individual frame cells is important to Web users, but a realization that many users have trouble with this is also important to developers of frame-based sites. First of all, you should provide navigation aids so that users who bookmark your top-level page can quickly find the subpage of interest. Second, pages that are likely to be commonly referenced should contain their URL in plain-text in the body of the document. Third, you should consider maintaining a nonframes version of the site that contains links to all the documents in your main site. Although a full nonframes version can be difficult to maintain for sites that change frequently, a simple option that also satisfies the goal of putting the URL in the document is to make the reference to the current URL be part of a link that places the document in an unframed window, as below.
The original of this page can be found at <A HREF="http://some-site.com/some-page.html TARGET="_top"> http://some-site.com/some-page.html</A>.
Printing Frames
Because each part of a frame is a separate HTML document, some browsers cannot print an entire framed document formatted in the same general layout as on-screen. Instead, they print a single frame cell. The question is: Which cell do they print? Many users assume that the answer is the cell that was most recently updated, but in fact the one printed is the cell with the current input focus. Selecting a hypertext link that displays a document in a particular frame cell does not change the input focus to the new frame. It can be extremely annoying to click on a link in the table of contents frame, get the result you want, select Print, and get a printout of the table of contents instead of the newly displayed frame! The solution is to explicitly click on the frame cell of interest before printing.
Core Tip
| | Before attempting to print part of a framed document, always click on the frame cell you want printed. |
In Internet Explorer 5.x, frame printing is significantly easier. After selecting Print from the main File menu, you have three frame printing options:
-
As laid out on the screen
-
Only the selected frame
-
All frames individually
These three options enable you to print the frame page exactly as desired. In addition, Internet Explorer 5.x supports a couple of additional printing options when an individual frame cell has focus: Print all linked documents (use with caution) and Print table of links.
As a developer, you can minimize the difficulties users will have in printing your pages. First, you can attach JavaScript code to the OnClick attribute of targeted hypertext links, specifying that the designated frame automatically gets the input focus whenever the link is selected. For details, see Chapter 24 (JavaScript: Adding Dynamic Content to Web Pages). Second, you can provide the users with a composite document to use for printing. This option is particularly convenient when you are making a reference page that is broken down into many separate documents, which would otherwise be tedious for users to print.
Updating Multiple Frame Cells Simultaneously
HTML does not have a method that allows a single hypertext link to update the contents of more than one frame cell. However, there are two potential solutions:
-
Combine the cells into a single FRAME
-
Use JavaScript
Each of these solutions is detailed in the following sections.
Combine the Cells into a Single Frame
Suppose that the initial FRAMESET looked like this:
<FRAMESET ROWS="*,*,*"> <FRAME SRC="Top.html"> <FRAME SRC="Middle.html" id="MIDDLE"> <FRAME SRC="Bottom.html" id="BOTTOM"> </FRAMESET>
In such a case, no purely HTML method for a link in the Top.html document to replace the contents of both Middle.html and Bottom.html is available. However, the initial design could be replaced by:
<FRAMESET ROWS="*,2*"> <FRAME SRC="Top.html"> <FRAME SRC="Middle+Bottom.html" id="LOWER"> </FRAMESET>
Then, Middle+Bottom.html can itself contain a FRAMESET entry:
<FRAMESET ROWS="*,*"> <FRAME SRC="Middle.html" id="MIDDLE"> <FRAME SRC="Bottom.html" id="BOTTOM"> </FRAMESET>
Now, links can target the frame named LOWER, supplying the URL of a file that also contains two FRAME entries. This solution is not completely satisfactory, because it requires that the cells of interest be next to each other, and that all of the HTML documents in question be under the control of the author of the main layout and be modifiable to fit the new design. On the other hand, this approach works even for users who have disabled JavaScript or whose browsers do not support it, unlike the JavaScript alternative described next.
Using JavaScript
With JavaScript, authors can to attach code to the OnClick attribute of a hypertext link. This code can call any number of JavaScript statements, including top.frameName.location = someURL, which assigns new documents to particular frame cells. Any number of cells can be updated, and there is no requirement that the top-level framed document change structure nor that the updated cells be next to each other. Of course, this solution only works for browsers that support JavaScript. JavaScript is described in more detail in Chapter 24 (JavaScript: Adding Dynamic Content to Web Pages), but we'll look at a quick example here. Consider Listing 4.8, which creates one cell in the top row and three named cells in the bottom row.
Listing 4.8 Multiple-Updates.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Updating Multiple Frames Simultaneously</TITLE> </HEAD> <FRAMESET ROWS="75,*"> <FRAME SRC="Top-Frame.html"> <FRAMESET COLS="*,*,*"> <FRAME SRC="Bottom1.html" id="Bottom1"> <FRAME SRC="Bottom2.html" id="Bottom2"> <FRAME SRC="Bottom3.html" id="Bottom3"> </FRAMESET> </FRAMESET> </HTML>
Now, to have a link in the top frame send results to bottom cell 1 and 3, the top frame can contain JavaScript code that references the names Bottom1 and Bottom3. This approach is shown in Listing 4.9, which defines the updateCells function and then attaches the function to the hypertext link's OnClick attribute. Figures 4-7 and 4-8 show the results before and after the link is selected.
Figure 4-8. Framed document showing two updated cells after hypertext link is selected.
Listing 4.9 Top-Frame.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Table of Contents</TITLE> <SCRIPT TYPE="text/javascript"> <!-- function updateCells() { top.Bottom1.location = "Result1.html"; top.Bottom3.location = "Result3.html"; } // --> </SCRIPT> </HEAD> <BODY BGCOLOR="WHITE" TEXT="BLACK"> When selected on JavaScript-capable browsers, <A HREF="Result1.html" TARGET="Bottom1" OnClick="updateCells()"> this link</A> will update cell one and three below. </BODY> </HTML> Preventing Your Documents from Being Framed
Some authors don't want their pages to appear in frame cells in other people's documents. One solution is to specify <BASE TARGET="_top"> in the HEAD of the document. Although this doesn't prevent the initial appearance of your page, it prevents the page from remaining part of a frame after a link has been selected. JavaScript can also be used to prevent a page from appearing in a frame at all. Simply insert the following in the HEAD of the document:
<SCRIPT TYPE="text/javascript"> <!- if (top.frames.length > 0) top.location = document.location; // -> </SCRIPT>
See Chapter 24 (JavaScript: Adding Dynamic Content to Web Pages) for more details on JavaScript. Since some users may have JavaScript disabled, you might want to use both techniques if you really want to prevent framing.
Creating Empty Frame Cells
In Internet Explorer version 3.0 and later, a FRAME can have a NAME but no SRC. In such a case, space is allocated for that cell as specified in the enclosing FRAMESET. Hypertext links that have a TARGET that designates the empty cell will behave as expected, with the associated file appearing in that cell. In Netscape, space is also allocated for frame cells, based on the enclosing FRAMESET. However, hypertext links that have a TARGET designating the initially empty cell behave as though no such frame exists. That is, the linked page appears in an entirely new browser window. This behavior is a bit inconvenient, because it is quite reasonable to want to populate certain frame cells in advance but fill in others only when the user makes a selection. The solution is to treat SRC as a required attribute, supplying the URL of an HTML document that has an empty BODY in situations where you want an "empty" cell.
Core Warning
| | In Netscape, a selected hyperlink that targets an initially empty frame cell is loaded in a new browser window, instead of in the targeted frame cell. |
4.6 Inline Frames
Internet Explorer and Netscape 6 have a nice feature whereby a frame can be defined in a manner similar to the definition of an image. You specify a width, height, source URL, and alignment, and the inline frame occupies a fixed position in the HTML document. This behavior is in contrast to normal frames, which occupy a fixed position in the browser window. Inline frames are very convenient for sidebars, contact information, and other things that you want to include in multiple documents. Unfortunately, however, although floating frames are part of the HTML 4.0 specification, they are supported only by Internet Explorer and Netscape 6. Earlier versions of Netscape do not support inline frames but do support layers, which provide a more general mechanism for this type of application. See Section 5.12 (Layers) for a complete discussion on layers. However, be aware that to be compliant with the HTML 4.0 specification, Netscape 6 no longer supports layers. The Web site, http://sites.netscape.net/ekrock/standards.html, provides information on how to support inline frames and layers for cross-browser support and backward compatibility.
To illustrate floating frames: Suppose that Professor Ithim teaches a variety of Computer Science courses. Being at a modern university, he naturally publishes the syllabus and other class information on Web pages. He wants to put his name, campus mailing address, and e-mail address on every page, but like all good programmers, hates to repeat himself and risk inconsistent versions. To avoid this, he can create a simple contact information file first, as in Listing 4.10.
Listing 4.10 Contact-Info.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Prof. Al Gore Ithim</TITLE> </HEAD> <BODY> Prof. Al Gore Ithim<BR> Computer Science Department<BR> Podunk University<BR> <A HREF="mailto:algy@podunk.edu"> algy@podunk.edu</A> </BODY> </HTML>
Once Ithim has the contact file, he can use an IFRAME element to include the file at the bottom of each Web page that he creates. For instance, Listing 4.11 shows a simplified version of a page for Computer Science 401.
Listing 4.11 CS-401.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Design and Analysis of Algorithms</TITLE> </HEAD> <BODY> <H1>Design and Analysis of Algorithms</H1> This course covers the techniques required to design and analyze computer algorithms. The textbook is <I>Introduction to Algorithms</I> by Cormen, Leiserson, and Rivest (McGraw Hill, 1990, ISBN 0-07-013143-0). <P> Blah, blah, blah, algorithms. Yada, yada, yada, time. Blah, blah, blah, space. Yada, yada, yada, iterative. Blah, blah, blah, recurrences. Yada, yada, yard, data structures. Blah, blah, blah, sorting. Yada, yada, yada, dynamic programming. Blah, blah, blah, graph algorithms. Yada, yada, yada, NP-Completeness. <P> <IFRAME SRC="Contact-Info.html" FRAMEBORDER=0></IFRAME> </BODY> </HTML> Now, when this page is displayed in Internet Explorer, the contact information is placed at the bottom of the Web page, as illustrated in Figures 4-9 and 4-10.
Figure 4-9. Top part of CS-401.html: floating frame does not appear.
Figure 4-10. Bottom part of CS-401.html: floating frame scrolls into view.
As can be seen, floating frames, unlike normal frames, do not occupy a fixed part of the Web browser window, but rather scroll with the rest of the document.
| HTML Element: | <IFRAME SRC="..." ...> ... </IFRAME> |
|---|---|
| Attributes: | SRC, WIDTH, HEIGHT, ALIGN, NAME, FRAMEBORDER, MARGINWIDTH, MARGINHEIGHT, SCROLLING, LONGDESC |
IFRAME specifies a floating or inline frame. It is available only in Internet Explorer in version 3.0 and later. Text for incompatible browsers can be placed between the start and end tags and will be ignored by compatible browsers.
SRC SRC specifies the URL of the document to be displayed in the floating frame.
WIDTH and HEIGHT These attributes give the size of the floating frame in pixels. A percentage value is not permitted. An author can omit these values and let the browser size the frame appropriately.
ALIGN ALIGN specifies the alignment of the frame with respect to the surrounding text, in a manner similar to alignment of embedded images. Legal values are LEFT, RIGHT, CENTER, TOP, BOTTOM, and MIDDLE.
NAME Floating frames can be the end points of targeted links, just like normal frames. The NAME attribute gives the name for this purpose.
FRAMEBORDER The FRAMEBORDER attribute determines whether (FRAMEBORDER=1) or not (FRAMEBORDER=0) borders should be drawn around the floating frame. The default is to use borders.
MARGINWIDTH MARGINWIDTH gives the width of the left and right margins, in pixels.
MARGINHEIGHT MARGINHEIGHT gives height of the top and bottom margins, in pixels.
SCROLLING The SCROLLING attribute determines whether scrollbars should be used (SCROLLING="YES") or not (SCROLLING="NO").
LONGDESC LONGDESC specifies a URI that provides a detailed description of the frame and is most suitable for nonvisual browsers.
4.7 Summary
Frames are an important addition to HTML 4.0 and are widely supported by current browsers. The FRAMESET element divides window or current cell into rectangular regions, and HTML documents are associated with the regions by the FRAME element. Hypertext links, forms, and Java applets can target user-defined or standard frame names, specifying that certain documents be displayed in particular frames. The most common frame problems can be avoided by careful design or use of JavaScript. Finally, floating frames provide a logical next step from fixed frames.
Cascading style sheets are another important addition to HTML 4.0. They enable you to customize the appearance and layout of standard and custom HTML elements, providing you with much more control over the final layout and look of Web pages you create. An extension to cascading style sheets lets you define "layers," which allow Web pages to define separate markup for various absolute or relative regions of the page. Layers go two steps beyond frames, since these regions can be overlapping and since their size and position can be dynamically changed through the use of JavaScript functions. Style sheets are discussed in the next chapter.
| CONTENTS | |
EAN: 2147483647
Pages: 31