Understanding Frames

To understand frames, you need to go back in time to the beginning of Windows itself. A window is an area of memory that contains a bitmap—a rectangular area of pixels. Each program "owns" one or more windows, and each window is either a top-level window or a child window. All windows are children of the desktop window—which you can think of as the screen itself.

For example, open up any program in Windows and look at the screen. You'll see a title bar, a window frame, and a client area. You may see additional items, such as a toolbar with buttons and other controls, and a status bar. Each of these items is a separate window. Each has specific properties, such as a height and width, and a background color. Now think about your screen if you open up multiple windows. If you think of the programs you open as items in a stack, one window is always on top. The z-order value controls the position of each window in that stack. The window on top (the active window) has a z-order of 0. All other windows appear behind the active window and have higher z-order values. Unless you maximize all the windows, each window probably appears in a slightly different position onscreen, meaning that each window has its own rectangle.

The programs' main windows are top-level windows. Each item, such as a toolbar button, is a child window. The child windows, although they are complete windows in their own right, appear and disappear with their parent window. If you minimize the program window, all the child windows disappear from the screen as well.

In the browser, you define child windows using a concept called frames. Frames are a sub-area of the main window, but you treat each frame as if it were a completely separate browser. Each frame can navigate independently to a page. To the computer, each frame is a child window with most of the capabilities of a stand-alone browser except that each frame is subservient to the top-level browser window. Frames must plot in the top-level browser window's screen area, and they minimize when you minimize the top-level window. You can think of frames as an easy way to divide the browser window into separate windows of varying sizes.

Frames can't exist by themselves—you must define them using a concept called a frameset. A frameset must be defined in its own page—you can't define a frameset and put content (other than a <noframes> tag) within a single HTML file; however, you may define more than one frameset in a single page. A frameset isn't visible—it's a containing tag for frames. A frameset contains one or more frames or framesets. The frames themselves are usually visible, although there are some good uses for invisible frames. For example, you can use invisible frames containing client-side script to control other frames on the page. You use the <frameset> tag to define a frameset and the <frame> tag to define a frame. For example, to create a frameset that divides the browser client area into two equal-sized frames, you would write a <frameset> tag as follows:

frame name="topFrame" src="top 1.htm"> frame name="bottomFrame" src="bottom 1.htm"> </frameset>

For browsers that don't support frames (rare these days), you can add a <noframes> tag.

frame name="topFrame" src="top 1.htm"> frame name="bottomFrame" src="bottom 1.htm"> <NOFRAMES>You need a frames-enabled browser to view this site!</NOFRAMES> </frameset>

Browsers that support frames ignore the <noframes> tag. Other browsers will display the text of the <noframes> tag, because it's the only HTML content in the file that does not appear between tags— remember that browsers ignore tags they don't support.

You define the sizes of the frames in pixels or in percentages. Note that you can use an asterisk in place of a value to define the last frame as "all the rest of the available area." In other words, I could have defined the frames as rows="50%, 50%", and the results would be identical. The asterisk notation is particularly useful when you are defining frames in pixels. Often, you don't know the width of the browser screen, so it's difficult to define the last frame exactly. For example, suppose I want to divide the screen vertically into two frames. The left frame will contain a list of links, and I want it to be 200 pixels wide. I want to display content in the right frame—but I don't know whether the remaining available area is 440 pixels wide (VGA), 600 pixels wide (Super VGA), or 1,080 pixels wide (XGA). Therefore, I could define the frameset using the asterisk, as follows:

<frame name="leftFrame" src="left 1.htm"> <frame name="rightFrame" src="right 1.htm"> </frameset>

You can't use both the rows and the cols attributes within the same frameset, but you can nest framesets to accomplish the same result. For example, the following code defines a frameset with the screen divided vertically into two equal-sized frames. The frameset contains a second frameset that further divides the right frame horizontally into two equal-sized frames (see Listing 2.8).

Listing 2.8: Nested Framesets (ch2-l8a.htm-ch2-l8d.htm)


* This file (ch2-18b) contains the frameset definitions * **********************************************************

<head><title>Nested Framesets</title></head> frameset cols = "50%, *">

frame name="leftFrame" src="ch2-18b.htm"> frameset rows = "50%, *">

frame name="rightTopFrame" src="ch2-18c.htm"> <frame name="rightBottomFrame" src="ch2-18d.htm"> </frameset>

<noframes>You need a frames-enabled browser to view this page.</noframes>


* This file (ch2-18b.htm) shows up in the left-hand *

* frame. The other files (ch2-18c and ch2-18d.htm) are *

* identical except for the title and text * **********************************************************

<head><title>ch2-18b.htm</title></head> <body>

In the browser, Listing 2.8 looks like Figure 2.18.

Figure 2.18: Nested framesets (ch2-18a.htm-ch2-18d.htm)

Was this article helpful?

0 0

Post a comment