How-To on Frames

Most people like using WYSIWYG editors to make a web page because of their simplicity, intuitive interface, and basically because they just can't be bothered learning a new language -- HTML. However, it has been shown that most WYSIWYG editors, including

and many others, do not include the capability of creating frames in a straightforward manner. Therefore, to effectively create frames, one must use a conventional text editor and use raw HTML codes. In other words, it is strongly advised that one learn at least the basics of HTML (such as tagging, common tags, etc.), before trying out frames.

With that in mind, frames are just a breeze once you grasp the hang of it.There's more to the understanding of the concept of a multi-pane window (or, as the notion goes, "windows within a window") than the actual coding of it. So, what's in a frame?

Frames are actually separate HTML files put together into one browser window, with each frame of the window read from one complete HTML file, and then an extra HTML file to define the frames themselves. Here's a graphical representation:

Frame Arrangement


The outermost rectangle, supposedly the browser window, contains two frames, Frame1 and Frame2. Frame1 is a separate HTML document from Frame2, while the actual file the frames use is defined by the parent HTML document, Document1, which actually places the frames into the browser window. For example, Frame1 could be from "contents.html", while Frame2 could be a file called "main.html". These documents are designed separately, and then placed into frames on a common window by a third file, for instance "index.html".

The contents of the frames, just as the contents of a normal HTML file, could be anything you like, from a table of contents, to a navigation bar, to a lot of 'hate applets' (check here for an example)! However, the main document which define these frames must follow specific HTML coding. In fact, here's a general layout of the code:

<HTML>
<HEAD>
<TITLE>Title of Document</TITLE>
</HEAD>

<FRAMESET ROWS|COLS=size,size>
<FRAME NAME="name" SRC="file of document">
<FRAME NAME="name" SRC="file of document">

<NOFRAMES>
Text to be displayed if browser does not support frames.
</NOFRAMES>
</FRAMESET>

</HTML>

Notice that the BODY tag is no longer needed.
Start defining frames by using the tag FRAMESET. The attribute ROWS or COLS will define whether the frames will be left-right, or top-bottom, respectively. The 'size' parameters define how much of the browser window a frame will occupy. These are expressed in percentages of the whole window, but an asterisk (*) can be used to represent the remainder of the screen. For example, <FRAMESET ROWS="20%,*"> will define a set of top-bottom frames, with the first (top) frame occupying 20% of the screen and the second (bottom) frame occupying the rest.

Then we come to the FRAME tags. While the FRAMESET tag defines the dimensions of the frameset, the FRAME tags actually define what is to be displayed in the frame. Very simply, the FRAME tags are arranged in order of the appearance of the frames themselves, and the SRC attribute simply tells the browser to put the HTML file specified into the frame. You can name a frame anything you like, but this name is very important, as you will see when you try to link from a frame to another.

That's about all there is to creating frames. However, there are issues after the creation of frames which will affect the performance of various elements. Read on now.



Navigation (when frames didn't exist):