Don Southwell - Delta College Faculty Web

FRAMES

Frames split web pages into several discrete areas. These areas can either perform functions either independently (if linked together) or in conjunction with one another. They allow users to access several areas of information at the same time. Not only do frames allow users to avoid having to reload entire pages when going back and forth from page to page, they allow users to perform functions side-by-side, and adds a more interesting and "interactive" look and feel to your web page to boot.

There is no one specific format that must be used in creating a web page with frames. You can split your page into as few as two frames, and technically there is no maximum. Often times, however, a "framed" web page has at least one area that does not change. This area acts as a "table of contents" for the rest of the site and always remains on the screen, giving users constant access to it. Also, while there is usually at least one frame that remains constant, there is also at least one frame that is constantly changing as the user navigates through the site; this is known as a "target." In this instance, the user will choose an area of the web site to go to from the "table of contents" frame, click on the appropriate link, and watch as the contents of that link are "launched" into the "targeted" frame. As previously stated, this method is not the only way in which frames can be utilized on a web page. It is, however, the way that this lab will introduce you to the creation of frames.

An introduction to the FRAMESET HTML syntax

A framed web page is very similar in structure to any other HTML document. There are, however, several different attributes that need to be added into the HTML syntax to make your "framed" web page look and act just like you want it to.

a. The <FRAMESET> container

The main difference between the HTML code for a regular web page and the code for a "framed" page is the use of the <BODY> container for the regular web page and the use of the <FRAMESET> container for a framed page (a "container" is a special tag that requires a corresponding closing tag (</"value">) at the end of the syntax). FRAMESET is used to acknowledge that the page will be utilizing frames. Within the <FRAMESET> container, only other <FRAMESET>, <FRAME>, and <NOFRAMES> tags can be nested (these will all be discussed further).

A comparison of the structure of a web page with and without
frames is shown here:

HTML Without Frames

HTML With Frames

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

<HTML>

<HEAD>

</HEAD>

</FRAMESET>

</HTML>

b. The <FRAMESET> container's attributes

A web page with frames also requires some extra information in the HTML syntax to define its structure. Two of the most basic attributes of a framed page is COLUMN and ROW. These attributes define how the page will be divided up. The COLUMN (COLS) and ROW (ROWS) attributes are each placed within separate <FRAMESET> tags of their own.

Generally, the <FRAMESET COLS="column_width"> tag comes before the <FRAMESET ROWS="row_height"> tag. They both have several sub-attributes that can be included to further define the layout of the page. These sub-attributes are identical for both COLUMN and ROW and include the following:

COLS="column_width" or ROWS="row_height"

The number of columns and rows is dependent on the number of elements listed. A missing ROWS or COLS attribute is interpreted as a single row or column arbitrarily sized to fit. The column width and the row height values can be specified in any of the following three ways:

Numeric value

A simple numeric value is assumed to be a fixed size in pixels. This is the most dangerous type of value to use since the size of the viewer's window can and does vary substantially. If fixed pixel values are used, it will almost certainly be necessary to mix them with one or more of the relative size values described below. Otherwise the client engine will likely override your specified pixel value to ensure that the total proportions of the frame are 100% of the width and height of the user's window.

% value

This is a simple percentage value between 1 and 100. If the total is greater than 100 all percentages are scaled down. If the total is less than 100, and relative-sized frames exist, extra space will be given to them. If there are no relative-sized frames, all percentages will be scaled up to match a total of 100%.

* value

The value on this field is optional. A single '*' character is a "relative-sized" frame and is interpreted as a request to give the frame all remaining space. If there exist multiple relative-sized frames, the remaining space is divided evenly among them. If there is a value in front of the '*', that frame gets that much more relative space. "2*,*" would give 2/3 of the space to the first frame, and 1/3 to the second.

For example, let's say we want 3 rows, the first and the last being smaller than the center row. Then we could use percentage values like this:

<FRAMESET ROWS="20%,60%,20%">

As a second example, let's say we want 3 rows, the first and the last being fixed height, with the remaining space assigned to the middle row. We could use:

<FRAMESET ROWS="100,*,100">

As stated before, <FRAMESET> tags can be nested inside other <FRAMESET> tags. The reason for doing this is to define the column and row dimensions. As shown in the example below, the first <FRAMESET> container pertains to the page's column(s) dimensions, and the second pertains to the rows.

c. The <FRAME> tag and its attributes

There are 6 possible attributes that we can use with the <FRAME> tag: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, and NORESIZE. Remember, since <FRAME> is a tag (and not a container), it requires no corresponding closing tag.

SRC="url"

The SRC attribute takes as its value the URL of the document to be displayed in this particular frame. Frames without SRC attributes are displayed as a blank space the size the frame would have been. SRC works like HREF in our usual HTML format.

NAME="window_name"

The NAME attribute is used to assign a name to a frame so it can be targeted by links in other documents. These are usually from other frames in the same document. The NAME attribute is optional -- by default all windows are unnamed. Names must begin with an alphanumeric character. Named frames can have their window contents targeted with the new TARGET attribute.

MARGINWIDTH="value"

The MARGINWIDTH attribute is used when the document author wants some control of the margins for this frame. If specified, the value for MARGINWIDTH is in pixels. Margins can not be less than one-so that frame objects will not touch frame edges-and can not be specified so that there is no space for the document contents. The MARGINWIDTH attribute is optional-- by default, all frames default to letting the browser decide on an appropriate margin width.

MARGINHEIGHT="value"

The MARGINHEIGHT attribute is just like MARGINWIDTH above, except it controls the upper an lower margins instead of the left and right margins.

SCROLLING="yes/no/auto"

The SCROLLING attribute is used to describe if the frame should have a scrollbar or not. "Yes" results in scrollbars always being visible on that frame. "No" results in scrollbars never being visible. "Auto" instructs the browser to decide whether scrollbars are needed, and place them where necessary. The SCROLLING attribute is optional-- the default value is "auto".

NORESIZE

The NORESIZE attribute has no value. It is a flag that indicates that the frame is not resizable by the user. Users typically resize frames by dragging a frame edge to a new position. Note that if any frame adjacent to an edge is not resizable, that entire edge will be restricted from moving. This will effect the resizability of other frames. The NORESIZE attribute is optional-- by default all frames are resizable.

c. The <NOFRAMES> container

Frames on a web page are a protocol that was introduced in the HTML 2.0 standard and may not be available on everyone's browser. Those using older Mosaic browsers or a version of Netscape prior to 2.0 will not be able to utilize frames. It is for this reason the <NOFRAMES> container exists. If you created a web page using only <FRAMESET> containers, those web- surfers using older browsers would see nothing but a blank page. Placing the <NOFRAMES> container within the <FRAMESET> container, whatever text or image is place there will appear on their browser. It is important that you insert some sort of <NOFRAMES> message to ensure that non-frame-capable users who visit your site are not completely left behind. If nothing else, it's good "netiquette."

The following is an example of a the HTML syntax for a web page which uses frames and contains a <NOFRAMES> section. Not only does it contain a warning for users, it directs them where to go to get a frames-capable browser:

<HTML>
<HEAD>
<TITLE>Welcome to my web page!</TITLE>
</HEAD>

<CENTER>
This document was designed to be viewed using Netscape
2.0's (or greater) frame features. If you are seeing
this message, you are using a frame challenged browser.
Although you may still access this page, it is recommended that
you upgrade your browser.

Try downloading a frames-capable browser.

You'll thank me for it!

</CENTER>

</NOFRAMES>
</FRAMESET>
</HTML>