Creating a Two-Column Frame Layout

One of the most common frame layouts is a two-column frame page, with a sidebar menu displayed in one column and the main content of the page displayed in the other column. The sidebar menu is used to control the content displayed in the main content frame.

BUZZ WORD

Because the FRAMESET element replaces the BODY element in the root page for a framed site, this kind of page is commonly referred to as a frameset page. The content of a FRAMESET element, on the other hand, is often referred to simply as a frameset.

Declaring the Frameset Document Type

According to the HTML 4 specifications, inclusion of a DocType declaration is required for an HTML document to be valid. Up until now, you've been declaring the content of your pages as conforming to the transitional definition of HTML 4.01. When creating a frameset page, you need to declare its content as conforming to the frameset definition for HTML 4.01. Open a new blank window in your text editor and type a DocType declaration for the document, followed by the starting HTML, HEAD, and TITLE elements:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
         "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Two-Column Frame Layout Example</title>
</head>
</html>

Defining a Two-Column Layout

You will notice in the previous code example that you added a HEAD element to the page, but not a BODY element. In a frameset page, the FRAMESET element replaces the BODY element and defines the orientation and dimensions of the frames being created. Add a FRAMESET element that defines a two-column layout, with widths of 20 percent and 80 percent set for the columns:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
         "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Two-Column Frame Layout Example</title>
</head>
<frameset cols="20%,80%">
</frameset>
</html>

Don't bother trying to check this out yet in your browser—the only thing that'll show up at this point is the title in your browser's title bar.

In the FRAMESET element, the COLS attribute defines the actual layout of the columns. In this case, the left column is set to take up 20 percent of the browser's window, whereas the right column is set to take up 80 percent. To create additional columns, you just need to add them to the COLS attribute list (cols="20%, 60%, 20%", for instance). Just make sure that your percentage values add up to 100.

Linking to the Framed Pages

The FRAME element links to the pages to be displayed in the framed windows and specifies a name that can be used to target the frame.

Next, you need to use the FRAME tag to define the specific frames that form the columns of your frame page:

<frameset cols="20%,80%">
   <frame src="sidebar.html" name="sidebar">
   <frame src="front.html" name="main">
</frameset>

You'll notice that, besides the SRC attribute that specifies the content of the frame, a NAME attribute is also used to name each frame. The name of a frame can be used by links (in a sidebar menu, for instance) to control the content of a frame. Don't assign the same name to more than one frame, however; frame names must be unique.

Saving Your Frameset Page

You'll find the example files for this session in a frames folder in your MyHTML folder. In order for the pages that have already been created for you to show up in your browser, you need to save any example files you create in the session in the same folder. In this session, any frameset files are saved with "fs_" at the start of the file name. Save the two-column frameset page you are working on as fs_twocols.html.in the frames folder of your MyHTML folder.

Creating the Sidebar Page

The pages that will display in the main frame have already been created for you. In this section, you will be adding a sidebar menu to the sidebar page that will control the contents of the main frame. To get started creating the sidebar menu:

Open the example file, sidebar_example.html, from the frames folder in your MyHTML folder.
Save the example file as sidebar.html in the same folder.

Add a link menu to the sidebar page that controls the content of the main frame:

<body bgcolor="#ffffcc" text="navy" link="blue" vlink="blue"
alink="maroon">
<h3><font face="Arial, Geneva, Helvetica, sans-
serif">Contents:</font></h3>
<p><a href="coleridge.html" target="main">Coleridge</a></p>
<p><a href="byron.html" target="main">Byron</a></p>
<p><a href="wordsworth.html" target="main">Wordsworth</a></p>
<p><a href="shelley.html" target="main">Shelley</a></p>
<p><a href="keats.html" target="main">Keats</a></p>
<p><a href="tennyson.html" target="main">Tennyson</a></p>
<p><a href="rbrowning.html" target="main">R. Browning</a></p>
<p><a href="ebrowning.html" target="main">E. Browning</a></p>
<p><a href="bronte.html" target="main">E. Bronte</a></p>
<p><a href="front.html" target="main">Go to Front</a></p>
</body>
</html>

The main feature that you want to notice in this example, which makes this sidebar menu work within the frame page, is the target="main" attributes in the links (the A elements). These must exactly match the name of the frame that was defined in the frameset page (where name="main" is used to name the right column frame). This attribute is case-sensitive, so if you have target="Main" in your frameset page, but target="main" in the links in your sidebar menu, the links won't work.

You might have noticed in the example file that a foreshortened "transitional" HTML 4.01 DocType declaration, lacking the URL specifying the location of the DTD (Document Type Definition), is used in this document, rather than the full DocType declaration you used previously. Internet Explorer 6 for Windows has a bug that causes both horizontal and vertical scroll bars to be displayed—rather than just vertical scroll bars—when a page uses a full "transitional" HTML 4.01 DocType declaration and extends beyond the bottom margin of a frame. You need to be aware, however, that current browsers also utilize the DocType declaration to do DocType switching, with a full DocType declaration and a foreshortened transitional DocType declaration switching a supporting browser into standards mode and quirks mode, respectively. Standards mode displays pages according to the latest HTML and CSS specifications. Quirks mode reproduces bugs, quirks, and non-standard features of earlier, less standards-compliant browser versions. Quirks mode is also referred to as bugwards compatibility mode. DocType switching primarily has an impact when styles are used, although there are a few instances, such as the current one, where it can impact HTML-only pages. You will learn more about DocType switching in the Sunday Afternoon session, "Working with Styles."

Testing the Example

The front page and other main content pages that will be displayed in the "main" frame have already been created for you. Test the example:

Run your browser and open fs_twocols.html from your MyHTML folder (see Figure 6.1).

Figure 6.1: A two-column frame page is shown in the browser.
Click on the first link ("Coleridge") in the sidebar menu. The example file, coleridge.html, is displayed in the "main" frame (see Figure 6.2).

Figure 6.2: Clicking on the "Coleridge" link in the sidebar menu causes the Coleridge page to be displayed in the "main" frame.
Click on the "Go to Front" link to redisplay the front page, front.html, in the "main" frame.

Using Pixels and Wildcard Values

Because you have no control over the width of a browser window used to view your frame page, you might not want to set all your frame columns to percentage widths. This is especially true with a frame containing a sidebar menu; you might not want the width of that frame to expand or contract relative to the width of the browser's viewport. The solution is to set the sidebar frame to a fixed pixel width, while leaving the other column free to expand or contract along with the browser window. You do this by combining an integer value with a wildcard character (*). Reopen fr_twocols.html in your text editor and specify that the first column is to be 125 pixels wide and the second column should be free to expand or contract along with the browser window (see Figure 6.3):

<frameset cols="125,*">
   <frame src="sidebar.html" name="sidebar">
   <frame src="front.html" name="main">
</frameset>

Figure 6.3: The first column is set to a width of 125 pixels, whereas the second column is free to expand or contract along with the browser window.

Controlling Other Frame Characteristics

There are a number of attributes you can use to control the appearance of the individual frames. These include the following:

The FRAMEBORDER attribute turns off the border around a frame. For example, frameborder="0" turns off the frame border, and frameborder="1" turns it on. By default, the frame border is on.
The MARGINHEIGHT and MARGINWIDTH attributes set margins within a frame. For instance, marginwidth="10" sets ten-pixel left and right margins.
The NORESIZE attribute locks in the specified frame dimensions, not allowing a visitor to resize the frames by clicking and dragging their borders. This attribute stands alone and does not require a value.
The SCROLLING attribute specifies under what conditions scroll bars are displayed in a frame. The allowable values are: yes, no, and auto (the default is auto). The first, scrolling="yes", causes scroll bars to be displayed, even when the content of the frame fits entirely within the frame dimensions. The second, scrolling="no", causes scroll bars to not be displayed, even when the content of the frame does not fit entirely within the frame dimensions. The third, scroling="auto", causes scroll bars to be displayed only when the content of the frame does not fit entirely within the frame's dimensions.

Creating Seamless Frames

One of the questions most often asked on newsgroups covering HTML and Web publishing is how to create "seamless" frames. Seamless frames are frames where the borders between and around the frames are invisible, with the two pages in the frames adjoining each other seamlessly. In HTML 4, a frame-border="0" attribute set in each FRAME element turns off display of the frame borders, but a perceptible white seam remains visible between the frames if the backgrounds of the framed pages aren't also white. The only way, using HTML alone, to remove the seam between frames is to add a non-standard attribute, border="0", to the FRAMESET element. Use the FRAMEBORDER and BORDER attributes to create seamless frames (see Figure 6.4):

<frameset cols="125, *" border="0">
   <frame src="sidebar.html" name="sidebar" frameborder="0">
   <frame src="front.html" name="main" frameborder="0">
</frameset>
</html>

Figure 6.4: A combination of standard and non-standard attributes is required to create a seamless framed layout.

This works fine in Internet Explorer 6, Netscape 6, Netscape 4, Mozilla 1, and Opera 6. Some earlier browsers may require additional attributes set in the FRAMESET element (spacing="0" and framespacing="0") to create seamless frames. If you try to validate this page, however, using the W3C Validator, you will get an error reported. To validate it, you will need to remove the non-standard BORDER attribute from the FRAMESET element.

Linking to External Pages

A regular hypertext link within a framed page will open up the target document in the same frame. In the case of pages that are internal to your site, this may be what you want. However, it is generally considered unethical to display others' Web pages within a frame on your site. Whenever you include links within a framed page that link to pages that are external to your site, you should use the TARGET attribute to cause the page to be displayed outside of any frames on your site. You have already used the TARGET attribute to specify that a link's target should be opened in a named frame (target="main"). The TARGET attribute also takes a number of additional attributes that can be used to control the display of target documents: _top, _blank, _self, and _parent. Here is a quick rundown on these attribute values:

target="_top" causes the target document to be displayed in the top-level browser window, outside of any frameset and replaces the current browser window.
target="_blank" causes the target document to be displayed in a new blank browser window, outside of any frameset, but not replacing the current browser window.
target="_self" causes the target document to be displayed in the current frame, or in the current browser window (if the document is not inside of a frame). This is the default behavior of links inside of frame windows.
target="_parent" causes the target document to be displayed in the immediate parent frameset or browser window. This works the same as target="_top" unless the parent frameset is itself nested inside of another frameset.

Some Web authors do not like to use target="_top", because they don't want visitors to exit their sites and not come back; rather, they prefer to use target="_blank", because it opens the target document in a new blank browser window, while leaving the originating document open in a window in the background. When the new window is closed, the linking originating document returns to the foreground. While some Web authors may prefer this, Web site visitors may not like having a second browser window opened.