Working with Frames

The introduction of frames in Netscape 2.0 heralded a new era for web publishers. With frames, you can create web pages that look and feel entirely different from other pages. You can have tables of contents, banners, footnotes, and sidebars, just to name a few common features.

At the same time, frames change what a "page" means to the browser and to your visitors. Unlike all the preceding examples, which use a single HTML page to display a screen of information, a single screen actually consists of a number of separate HTML documents that interact with each other. Figure 14.7 shows how a minimum of five separate documents is needed to create the screen shown earlier in Figure 14.1.

Figure 14.7. You must create a separate HTML document for each frame.

The first HTML document you need to create is called the frameset document. In this document, you define the layout of your frames, and the locations of the documents to be initially loaded in each frame. The document in Figure 14.7 has three frames.

Each of the three HTML documents other than the frameset document, the ones that load in the frames, contain normal HTML tags that define the contents of each separate frame area. These documents are referenced by the frameset document.

The `<frameset>` Tag

To create a frameset document, you begin with the <frameset> tag. When used in an HTML document, the <frameset> tag replaces the <body> tag, as shown in the following code:

<html> <head> <title>Page Title</title> </head> <frameset>   .. your frameset goes here ... </frameset> </html>

It's important that you understand up front how a frameset document differs from a normal HTML document. If you include a <frameset> tag in an HTML document, you cannot include a <body> tag also. The two tags are mutually exclusive. In addition, no other formatting tags, hyperlinks, or document text should be included in a frameset document. (The exception to this is the <noframes> tag, which you'll learn about later today in the section called, appropriately enough, "The <noframes> Tag.") The <frameset> tags contain only the definitions for the frames in this documentwhat's called the page's frameset.

The HTML 4.01 specification supports the <frameset> tag along with two possible attributes: cols and rows.

The `cols` Attribute

When you define a <frameset> tag, you must include one of two attributes as part of the tag definition. The first of these attributes is the cols attribute, which takes the following form:

<frameset cols="column width, column width, ...">

The cols attribute tells the browser to split the screen into a number of vertical frames whose widths are defined by column width values separated by commas. You define the width of each frame in one of three ways: explicitly in pixels, as a percentage of the total width of the <frameset>, or with an asterisk (*). When you use the asterisk, the framescompatible browser uses as much space as possible for the specified frame.

When included in a complete frame definition, the following <frameset> tag creates a screen with three vertical frames, as shown in Figure 14.8. The fifth line in the following code example creates a left frame 100 pixels wide, a middle column that's 50% of the width of the screen, and a right column that uses all the remaining space:

Input

<html> <head> <title>Three Columns</title> </head> <frameset cols="100,50%,*">   <frame src="/books/2/631/1/html/2/leftcol.html">   <frame src="/books/2/631/1/html/2/midcol.html">   <frame src="/books/2/631/1/html/2/rightcol.html"> </frameset> </html>

Output

Figure 14.8. The `cols` attribute defines the number of vertical frames or columns in a frameset.

Note

Because you're designing web pages for users with various screen sizes, you should use absolute frame sizes sparingly. Whenever you do use an absolute size, ensure that one of the other frames is defined using an * to take up all the remaining screen space.

Tip

To define a frameset with three columns of equal width, use cols="*,*,*". This way, you won't have to mess around with percentages because frames-compatible browsers automatically assign an equal amount of space to each frame assigned a width of *.

The `rows` Attribute

The rows attribute works the same as the cols attribute, except that it splits the screen into horizontal frames rather than vertical ones. To split the screen into two frames of equal height, as shown in Figure 14.9, you would write the following:

Input

<html> <head> <title>Two Rows</title> </head> <frameset rows="50%,50%">   <frame src="/books/2/631/1/html/2/toprow.html">   <frame src="/books/2/631/1/html/2/botrow.html"> </frameset> </html>

Alternatively, you could use the following line:

<frameset rows="*,*">

Output

Figure 14.9. The `rows` attribute defines the number of horizontal frames or rows in a frameset.

Note

If you try either of the preceding examples for yourself, you'll find that the <frameset> tag doesn't appear to work. You get this result because there are no contents defined for the rows or columns in the frameset. To define the contents, you need to use the <frame> tag, which is discussed in the next section.

The `<frame>` Tag

After you have your basic frameset laid out, you need to associate an HTML document with each frame by using the <frame> tag, which takes the following form:

<frame src="document URL">

For each frame defined in the <frameset> tag, you must include a corresponding <frame> tag, as shown in the following:

Input

<html> <head> <title>The FRAME Tag</title> </head> <frameset rows="*,*,*">   <frame src="/books/2/631/1/html/2/document1.html" />   <frame src="/books/2/631/1/html/2/document2.html" />   <frame src="/books/2/631/1/html/2/document3.html" /> </frameset> </html>

This example defines a frameset with three horizontal frames of equal height (see Figure 14.10). The contents of document1.html are displayed in the first frame, the contents of document2.html in the second frame, and the contents of document3.html in the third frame.

Output

Figure 14.10. You use the `<frame>` tag to define the contents of each frame.

Tip

When you're creating frameset documents, you might find it helpful to indent the <frame> tags so that they're separated from the <frameset> tags in your HTML document. This has no effect on the appearance of the resulting web pages, but it does tend to make the HTML source easier to read.

The `<noframes>` Tag

What happens if a browser that doesn't support frames navigates to a frameset document? Nothing. You get a blank page. Fortunately, there's a way around this problem.

A special tag block called <noframes> enables you to include additional HTML code as part of the frameset document. The code you enclose within the <noframes> element isn't displayed in frames-compatible browsers, but it's displayed in browsers that don't support frames. The <noframes> tag takes the following form:

<html> <head> <title>Frameset with No Frames Content</title> </head> <frameset>  your frameset goes here. <noframes>  Include any text, hyperlinks, and tags you want to here. </noframes> </frameset> </html>

Using the frames' content and tags inside <noframes>, you can create pages that work well with both kinds of browsers. Later today, you'll add some <noframes> content to a frameset.

Note

The way the <noframes> tag works is actually kind of interesting. It works because web browsers are designed to ignore tags that they don't understand. So, browsers that don't support frames ignore the <frameset> and <frame> tags. They also ignore the <noframes> tag and just display whatever is inside it. Browsers that do support frames know to render the frames and ignore the text inside the <noframes> tag.

Figure 14.7. You must create a separate HTML document for each frame.

The <frameset> Tag

The cols Attribute

Figure 14.8. The cols attribute defines the number of vertical frames or columns in a frameset.

The rows Attribute

Figure 14.9. The rows attribute defines the number of horizontal frames or rows in a frameset.

The <frame> Tag

Figure 14.10. You use the <frame> tag to define the contents of each frame.

The <noframes> Tag

The `<frameset>` Tag

The `cols` Attribute

Figure 14.8. The `cols` attribute defines the number of vertical frames or columns in a frameset.

The `rows` Attribute

Figure 14.9. The `rows` attribute defines the number of horizontal frames or rows in a frameset.

The `<frame>` Tag

Figure 14.10. You use the `<frame>` tag to define the contents of each frame.

The `<noframes>` Tag