Nomius

Lesson 1

Netscape Frames:Laying Out Frames

Learn more about how you can advertise on this page!

Introduction

Consider three independent HTML document, x.html, y.html, and z.html, which when viewed separately appear as shown in Fig. 1. (For now, never mind the code used to create these documents. Just assume they appear this way.)

Fig. 1 -- Three HTML documents, x.html, y.html, and z.html, as they appear on a Netscape browser.

In this discussion I will show how to create HTML code that divides a single browser window into three regions, called frames, to display the three documents simultaneously, as shown in Fig. 2.

Fig. 2 -- Three distinct HTML documents displayed in a single, frame-separated window.

Later, I will show how hyperlinks in one frame can be configured to update contents in other frames. In an example given in a later presentation, we will program the hyperlinks YZ and ZY in each frame so that document viewers can switch the positions of documents Y and Z by selecting hyperlinks in any of the frames.

Frames

Dividing a single browser window into multiple regions for separate document viewing is called framing. Netscape Communications, maker of the popular Netscape Navigators, has proposed extensions t o HTML that accommodate framing. Further, the company has implemented these extensions in their latest edition of Netscape Navigator, which is now available in Beta release.

If Netscape Communications' proposed frame syntax is widely accepted -- and it most likely will be -- then the filename extension ".html" will come to signify not only one, but two kinds of documents: layout documents and contents documents.

layout documents: Layout documents, as one might expect, will contain information regarding a documents' frame structures. Each frame declared in a layout document will contain an implicit or explicit reference to another document, the contents of which will be displayed in the frame. This so-called "child document" will be displayed independently of neighboring frames in the browser window and may be either a contents document or another, nested layout document.
contents documents: Contents documents are normal HTML documents that contain actual text, graphics, and hyperlinks intended for viewing. A contents document may be viewed unframed, as the only document in a browser window, or framed, as specified by a layout document . All documents meeting currently accepted HTML standards, including this document you are reading right now, fit this definition of a contents document.

Targets

Though the mere capability of being able to simultaneously yet independently display and navigate several HTML documents is indeed useful, users have already been able to do this for a long time (by invoking multiple instances of browsers with different URLs, as shown in Fig. 1). Therefore, this feature certainly cannot be claimed unique to frame-capable browsers. The real power of Netscape's proposed frame extensions lies in the fact that they allow hyperlinks in one frame to target other frames for up date when the hyperlinks are selected. This is accomplished by assigning names to frames and adding a target property to hyperlink definitions. Targeting will be discussed in another presentation.

An Example

The best way to understand Netscape Communications' proposed frame extensions is to actually use them in an example. First, let's look at basic frame layout.

Basic Frame Layout

Fig. 3 shows the layout we seek to implement in this example.

upper frame
lower left frame	lower right frame

Fig. 3 -- Final frame layout sought in this example.

To accomplish this we will first divide the browser window into upper and lower frames, and then further divide the lower frame into lower-left and lower-right frames. The first of these two divisions is specified in layout document a.html, given in Fig. 4.

<html> <head> <title>A</title> </head> <frameset rows=*,*> <frame src=x.htm> <frame src=yz.htm name=bottom> </frameset> </html>

Fig. 4 -- Source code from file a.html.

As you can see, this is a new kind of HTML. Several things are worth observing in this code.

Opening and closing <body> tags that usually appear in HTML documents have been replaced by <frameset> tags. This is the distinguishing feature of layout documents.
Unlike most tags, the tag <frame> is a single entity and does not occur with a closing </frame> counterpart.
a.html contains absolutely no browsing content! If a user were to view this file with a frames-incapable browser, he would see only a blank screen. However, hidden in the code are URLs to two other documents. (Information on how layout d ocuments can be configured to to accommodate frame-incapable browsers is given in another discussion.)

Frame Declaration -- the `<frameset>` Tag

As we have noted already, <frameset> tags replace <body> tags in layout documents. The opening <frameset> tag must include either a row list or a column list, taking the form "rows=row_list" or "cols=column_list" immediately after the keyword frameset, as seen in a.html. Row or column lists are comma separated lists of frame size specifications. In a.html, we have chosen to allow browser software to determine row frame heights by using the value * for each row. (The width of the row frames will, in this case, be determined by the width of the browser window.) Each member in a row or column list represents only a declaration of a frame's existence. Frame definitions, which specify the actual contents of previous declared frames, are indicated within the <frame> tag.

Frame Definition -- the `<frame>` Tag

Now that we have used <frameset> tags to divide the browser window into two row frames, we must now instruct the browser what to put in these frames. We accomplish this through the <frame> tags, which occur between <frameset> tags and define the contents of each frame declared in the row or column list of the preceding frameset tag.

In our example, because the row list ("rows=*,*") specifies the existence of two row frames, the code in a.html contains two frame specifications. Before continuing, please take a moment and look at them again.

Specifying a frame's URL

Unless you find an empty frame extremely interesting, at the very least, each frame specification should contain a URL to another document. Frame URLs are specified within the <frame> tag by adding the tag property "src=URL", as seen in a.html. At view time, after the browser has laid out the document's frames, it will then use these URLs to load documents for display within the frames.

Naming Frames

You can assign names to frames by including the tag property "name=frame_name" in the <frame> tag, as shown in the second frame definition in a.html. In this example, the upper row has no name, while the lower row has the name "bottom". Assigning names to frames makes it possible to later target them for update when hyperlinks are selected.

Nested Frames

To create the frame layout shown in Fig. 3, we must use nested frame declarations. A frame is a nested frame if it was formed by dividing another frame, called the parent frame, into multiple frames. There are two kinds of nested frames: directly nested frames and indirectly nested frames.

Directly Nested Frames

Rather than inputing a frame <frame> tag with a URL to specify the frame's contents, as shown in a.html, it is also acceptable to replace the <frame> tag with an additional, nested <frameset> declaration. For example, the <frameset> specification in Fig. 5a would do quite nicely for a framed document with the layout and contents shown in Fig. 5b, and would effectively have the same appearance as Fig. 2.

<frameset rows=*,*> <frame src=x.html> <frameset cols=*,*> <frame src=y.html> <frame src=z.html> </frameset> </frameset>

x.html
y.html	z.html

a

b

Fig. 5 -- Directly nested frames from nested <frameset> tags.

The disadvantage of directly nested frames is that they require nested <frameset> tags, which make it difficult to assign names to collections of frames, such as the row made up of y.html and z.html in Fig. 5b. (Recall t hat frame names are specified within <frame> tags, not <frameset> tags.) To get around this limitation, we will use indirect frame nesting, exploiting the fact that the second frame definition in a.html, a layout document, contains a URL to yet another layout document, yz.html!

Indirectly Nested Frames

The code for yz.html is given in Fig. 6.

<html> <head> <title>YZ</title> </head> <frameset cols=*,*> <frame src=y.htm> <frame src=z.htm> </frameset> </html>

Fig. 6 -- Source code from file yz.html

If you've understood the discussion up to this point, then you should have no problem seeing that yz.html has the exact same structure as a.html, except that it specifies a layout divided into two columns, rather than rows. We've already seen in Fig. 1 what contents documents y.html and z.html look like when viewed separately. The code in yz.html allows us to view both of these documents side by side, in a column-frame separated window, as shown in Fig. 7.

Fig. 7 -- File yz.html as it appears on a frames-capable browser.

Further, because layout document yz.html is the URL given for the second frame in a.html, we now have the layout shown in Fig. 5. The logical structure of the layout documents and contents documents involved here is illustrated in Fig. 8.

a.html (layout)

x.html (contents)

yz.html (layout)

y.html (contents)

z.html (contents)

Fig. 8 -- Logical structure of document a.html and all it's "child documents."

Fig. 2, already presented, shows how this document would appear on Netscape Navigator 2.0, a frames-capable browser. It is given again in Fig. 9.

Fig. 9 -- Document a.html as viewed on a frames-capable browser.

If you've understood everything up to this point, you are now ready to learn frame targeting, the subject of my next presentation. However, if things are still kind-of cloudy, you should read this document one more time, carefully studying the figures an d sample code, before continuing.

Netscape Frames Main Menu Questions about frames
previous lesson: next lesson: "Targeting Frames"

Please turn on your graphics.

©1996 Charlton Rose. No part of this document may be reproduced in any form without the express permission of the author.