Web Programming at ITM

Frames

Frame-Based Pages

With the introduction of Netscape Navigator 2.0 came a whole host of new HTML tricks that really spiced things up. Perhaps the most interesting, but poorly utilized feature was the frame.

Frames allow you to work with the browser window itself. Not only can you clone other windows for your usage, but you can also divide up a single window into separate frames that can each access separate HTML pages.

Single Window Frames

Popup windows are cool, but single-window frames are what really took off with Netscape Navigator 2.0
Single-window frames allow you to divide up a single browser window into separate browsers, each able to load unique HTML documents and each named and targetable by each other.
You have already seen a frame-based page in the introduction, so we won't waste any more time, and get right into the details...
Frames are specified using the <FRAMESET>, <FRAME> and <NOFRAME> tags and various attributes for each.
The table below outlines the functions of each

TAG	ATTRIBUTES	DESCRIPTION
<FRAMESET> - </FRAMESET>		The main frame definition tag. This tag tag replaced <BODY>
	ROWS	Defines the size and number of rows using a comma-delimited list of height values either in absolute pixels or as a percentage of the total usable area.
	COLS	Defines the size and number of columns using a comma-delimited list of width values either in absolute pixels or as a percentage of the total usable area.
<FRAME>		Defines a single frame within a frameset. There is no closing tag
	SRC	Defines the HTML source document that should be loaded into a frame. It takes a URL just as the HREF attribute in the <A> tag.
	NAME	Specifies the name that will be used to identify the frame by other frames or other windows. This can be any text string, but try to make it meaningful such as "table_of_contents_frame". Several key names have been reserved. These are _blank, _self, _parent, and _top. So don't use these unless you mean to reference those particular frames
	MARGINWIDTH	Sets a horizontal margin of the given number of pixels.
	MARGINHEIGHT	Sets a vertical margin of the given number of pixels.
	SCROLLING	This attribute is used to manipulate a scroll bar within the frame. It can be set to YES, NO, or AUTO. If it is set to yes, there will always be a scrollbar. If it is set to no, there will never be a scrollbar. And if it is set to AUTO, a scrollbar will appear only when needed (ie: the user resizes the frame)
	NORESIZE	This attribute prevents the user from resizing the frame.
<NOFRAME> - </NOFRAME>		Specifies content in case the browser viewing the document does not support frames. It is a very good idea to make sure that your site navigation works with or without frames.

Column Frames

Okay, let's look at an example of creating a frames document. Specifically, let's divide a browser window into two columns.
Since this is best explained by example, consider the following code:

<HTML>
<HEAD>
<TITLE>Frame Column Example</TITLE>
<FRAMESET COLS = "100, 100">
  <FRAME SRC = "afraid_icon.gif" NAME = "afraidFrame">
  <FRAME SRC = "asterix_icon.gif" NAME = "asterixFrame">
<NOFRAME>
Well, if you do not have a frames capable browser, 
this whole section will be meaningless.  :(
</NOFRAME>
</FRAMESET>
</HEAD>
</HTML>

On the web, the previous code would like the following figure. Notice that we used two images for our frames, but we could easily insert HTML documents or anything else that can be referenced with SRC.

Suppose we did not want to hardcode the frame size. The COLS attribute also takes percentages as values to allow for a percentage- based sizing. Thus, the previous code could be rewritten as the following (notice we include one full URL as a frame and a relative link as the other):

<HTML>
<HEAD>
<TITLE>Frame Column Example</TITLE>
<FRAMESET COLS = "50%, 50%">
  <FRAME SRC = "http://www.eff.org/" NAME = "lFrame">
  <FRAME SRC = "relative_link.html" NAME = "rFrame">
<NOFRAME>
Well, if you do not have a frames capable browser, 
this whole section will be meaningless.  :(
</NOFRAME>
</FRAMESET>
</HEAD>
</HTML>

Finally, you can use an asterisk to specify the rest (of the available rows or columns) as a sizing component. Thus the following code would create three columns. One column would be 25 pixels wide, one would be 25 pixels wide, and the third would take up all the remaining space depending on how the user resized the browser window.

<HTML>
<HEAD>
<TITLE>Frame Column Example</TITLE>
<FRAMESET COLS = "25, 25, *">
  <FRAME SRC = "http://www.eff.org/" NAME = "lFrame">
  <FRAME SRC = "relative_link.html" NAME = "rFrame">
<NOFRAME>
Well, if you do not have a frames capable browser, 
this whole section will be meaningless.  :(
</NOFRAME>
</FRAMESET>
</HEAD>
</HTML>

Row Frames

Making frame rows is essentially the same as making columns. Let's look at an example of creating a row-based frames document. Specifically, let's divide a browser window into two rows.
Since this is best explained by example, consider the following code:

<HTML>
<HEAD>
<TITLE>Frame Row Example</TITLE>
<FRAMESET ROWS = "100, 100">
  <FRAME SRC = "http://www.eff.org" 
        NAME = "topFrame">
  <FRAME SRC = "http://www.extropia.com" 
        NAME = "botFrame">
<NOFRAME>
Well, if you do not have a frames capable browser, 
this whole section will be meaningless.  :(
</NOFRAME>
</FRAMESET>
</HEAD>
</HTML>

On the web, the previous code would like the following figure.

Suppose we did not want to hardcode the frame size. The ROWS attribute also takes percentages as values to allow for a percentage-based sizing. Thus, the previous code could be rewritten as the following :

<HTML>
<HEAD>
<TITLE>Frame Row Example</TITLE>
<FRAMESET ROWS = "50%, 50%">
  <FRAME SRC = "http://www.eff.org" 
        NAME = "topFrame">
  <FRAME SRC = "http://www.extropia.com" 
        NAME = "botFrame">
<NOFRAME>
Well, if you do not have a frames capable browser, 
this whole section will be meaningless.  :(
</NOFRAME>
</FRAMESET>
</HEAD>
</HTML>

Finally, you can use an asterix to specify "anything else" as a sizing component. Thus the following code would create three rows. One row would be 25 pixels wide, one would be 25 pixels wide, and the third would take up all the remaining space depending on how the user resized the browser window.

<HTML>
<HEAD>
<TITLE>Frame Row Example</TITLE>
<FRAMESET ROWS = "25, 25, *">
  <FRAME SRC = "http://www.eff.org" 
        NAME = "topFrame">
  <FRAME SRC = "http://www.extropia.com" 
        NAME = "botFrame">
<NOFRAME>
Well, if you do not have a frames capable browser, 
this whole section will be meaningless.  :(
</NOFRAME>
</FRAMESET>
</HEAD>
</HTML>

More Info about Tables

In-Depth Info about Tables

More Info about Frames