Frames

Frames

Defining frames

Netscape Navigator 2.+ offers a new type of mark-up that provides the web author more flexibility in page design. This new HTML element is known as FRAMES because it allows the web page to be divided into separate viewing areas. To create a framed web document you replace the <BODY>...</BODY> tags with <FRAMESET>...</FRAMESET> tags. Remember, only Netscape 2.+ browsers can display frame documents, therefore you should always have an alternative non-frames home page that your readers can access. This will be explained below in the <NOFRAMES> section. Also, using FRAMES means that your Netscape 2.x browser's "Back," "Forward," and Link History functions will be turned off. Therefore, you must provide navigational buttons in your frames. If you don't, I guarantee that your users will not be happy with you. Netscape Navigator 3.x solves this problem, but it is a good idea to provide the extra navigation buttons as many people will not upgrade to 3.x for some time.

Frames are different than any other HTML element in that they require your page to be divided into layout documents and content documents. The framed web document that your viewer sees is actually a composite of multiple web pages layered together. Layout documents are web pages that tell the browser how to divide the screen and they point to content documents which contain the content that displays in each frame. A simple frame page will have either two columns or two rows and point to two content pages. More complex frame pages involve another step which layers the document. The way you accomplish this layering is by nesting your layout and content documents. You nest your frame documents in one of two ways: directly nested frames or indirectly nested frames. I will demonstrate how both directly and indirectly nested frames work below.

In a layout document you determine the size of each frame. The size of a frame is determined by COLS and ROWS attributes. COLS and ROWS can be defined using a number of different values.

Fixed Pixels: Specifies the frame size as an absolute value in pixels. A value of COL="20, 60, 90" specifies that the frame will be divided into three columns, the first 20 pixels in size, the second 60 pixels in size, and the third 90 pixels in size.
Percentage: Specifies the frame size as a percentage of the total available size of the frame. The values must add up to 100%. A value of COL="20%, 80%" specifies that the frame will be divided into two columns, the first 20% of the frame, the second 80% of the frame.
Relative Size: Specifies the size of the frame as a relative value. A relative value can be used with either a fixed or percentage value. A value of COL="90, 3*, *, 40" specifies that the frame will be divided into four columns, the first column is 90 pixels, the last column is 40 pixels, the second column is three-quarters of the remaining space, the third column is one-quarter of the remaining space.

Frame Tags

<FRAMESET>...</FRAMESET>
- Can Contain: <FRAME>, <FRAMESET>, <NOFRAMES>
- Attributes: COLS, ROWS
<FRAME>...</FRAME>
- Can Contain: Empty Tag
- Attributes: MARGINWIDTH, MARGINHEIGHT, NAME, NORESIZE, SCROLLING, SRC
 - MARGINWIDTH: Specifies the width of the left and right margins of the frame in pixels. It provides blank space between the text and frame boarder. If it is left blank the browser will automatically assign a margin width. If you use MARGINWIDTH you must assign it a minimum value of 1.
 - MARGINHEIGHT: Specifies the height of the top and bottom margins of the frame in pixels. If it is left blank the browser will automatically assign a margin height. If you use MARGINHEIGHT you must assign it a minimum value of 1.
 - NAME: Is used to assign a name to a particular frame that you wish to target. For example, most frame pages designate one frame as the display frame. This frame will display new web pages while the other frames remain static. To designate a particular frame as a display frame you use the NAME attribute to assign a value to the display such as NAME="display", then you direct your other pages to display in that frame by using the TARGET attribute in the ANCHOR tag, i.e., <A HREF="liturgy.html" TARGET="display">. Where "litugy.html" is a web page dealing with liturgy resources that will appear in the "display" frame.
 - NORESIZE: Tells the browser that the frames cannot be modified by the user.
 - SCROLLING: Values are "yes," "no," and "auto." Tells the browser weather or not scroll bars can or should be inserted in the frame. Scroll bars are used if your information displays beyond the bottom of the frame. A value of "yes" means that a scroll bar will always be inserted, "no" means that a scroll bar will never be inserted, and "auto" informs the browser to only insert a scroll bar if the data goes beyond the bottom of the frame.
 - SRC: Specifies the name of the content document's URL to be inserted into the frame.
<NOFRAMES>...</NOFRAMES>
- Can Contain: <BODY>
- Attributes: None
 - NOFRAMES should always be used. Netscape 2.+ is the only browser at this point that can display frame pages, therefore you need to inform none-frames capable browser that they cannot view the document that they have just linked to. You should always have an alternative home page that your readers can use.

An Example of a Simple Frame Page

<HTML>
<HEAD><TITLE>University of St. Thomas Libraries</TITLE></HEAD>
<FRAMESET COLS="15%,85%">
<FRAME SCROLLING="auto" SRC="table.htm" NAME="left">
<FRAME SCROLLING="auto" SRC="body.htm" NAME="right">
<NOFRAMES>
<BODY> If you are reading this messages then you do not have a frames-capable browser. Try our other home page at: <A HREF="http://www.lib.stthomas.edu/index.html">http://www.lib.stthomas.edu/index.html</A></BODY>
</NOFRAMES>
</FRAMES></HTML>

Here is an example of how the above mark-up could appear (the important thing to focus on is how the page is divided, the mark-up of the actual page is different than above). The left row is 15% of the display, the right is 85%. The left frame pulls the information in it from the HTML document "table.htm" and the right frame pulls the information from the HTML document "body.htm". The HTML documents "table.htm" and "body.htm" are marked-up just like any normal HTML document.

Directly and Indirectly Nested Frames

Directly Nested Frames

Directly Nested Frames divide the displayed web page into both rows and columns. They do this by nesting one <FRAMESET> within another <FRAMESET>. This is the most straight forward way to nest frames, however, it does have advantages. By nesting one <FRAMESET> within another you make it difficult to assign names to collections of frames.

<HTML>


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


   <FRAME SRC="top.htm">


       <FRAMESET COLS="50%,50">


          <FRAME SRC="left.htm">


          <FRAME SRC="right.htm">


       </FRAMESET>


</FRAMESET></HTML>

Indirectly Nested Frames

In the example above the Frames "left.htm" and "right.htm" are actually part of a logical unit that we could call the body of the frame. But when they are nested using the Direct Nesting procedure, they cannot be grouped together into a logical unit. Indirect Nesting solves this problem. Here is how it looks:

<HTML>


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


   <FRAME SRC="top.htm">


   <FRAME SRC="body.htm">


</FRAMESET></HTML>

<HTML>


<HEAD><TITLE>body.htm</TITLE><HEAD>


<FRAMESET COLS="50%,50%">


   <FRAME SRC="left.htm">


   <FRAME SRC="right.htm">


</FRAMESET></HTML>

You can see in this example that the two parts of the frame display are now grouped into two logical units, one logical unit divides the display into two rows and pulls information into the first row from "top.htm". The other logical unit is made up of the HTML document "body.htm" which further divides the second row into two columns and pulls information into the columns from the documents "left.htm," and "right.htm."

Now for a Real Life Example of a Indirectly Nested Frame Page

I am going to provide you with the HTML mark-up first. I have designed this to work in two ways, one linear, and one in hypertext format. In the linear document I have place the frames one below the other. If you wish to get a better feel for how the browser actually pulls the documents together simply click on the hypertext links on the home page. At the end of the HTML mark-up I have provided a link to the page as it appears on a user's browser.

FINDEX.HTM (Home Page)
<HTML>
<HEAD><TITLE>Minnesota's Electronic Literacy Resource System</TITLE></HEAD>
<FRAMESET ROWS="20%,80%">
<FRAME SCROLLING="no" SRC="banner.htm">
<FRAME SCROLLING="auto" SRC="body.htm">
<NOFRAMES><BODY><H3>Warning! This document cannot be viewed without a frames capable browser. If you see this message it means that your browser does not support frames. Go to our other <A HREF="findex.htm">home page</A>.</H3></BODY></NOFRAMES>
</FRAMESET></HTML>

This is a layout document. It tells the browser to divide the screen into two rows-- row one is 20% of the screen, row two is 80% of the screen. This document also tells the browser to display the contents of "banner.htm" in row one, and the contents of "body.htm" in row two. When you go to "body.htm" you will find that it is also a layout document with commands to further divide row two into columns. The fact that this layout frame document points to another layout frame document that further divides the screen makes this an example of an Indirectly Nested Frame.

BANNER.HTM

<HTML>
<HEAD><TITLE>banner.htm</TITLE><HEAD>
<BODY BCOLOR="#000080" TEXT="#FFFF00">
<CENTER><H3>Minnesota's Electronic Literacy Resource System</H3></CENTER>
</BODY></HTML>

BODY.HTM

TABLE.HTM

<HTML>
<HEAD><TITLE>table.htm</TITLE><HEAD>
<BODY BGCOLOR="#000080" TEXT="#FFFF00" LINK="#00FF00" VLINK="#FF0000">
TABLE OF CONTENTS
<A HREF="http://novel.nifl.gov/litdir/elandh/home.htm" TARGET="right">Literacy Directory</A> 
<A HREF="mlrc/mlrc.htm" TARGET="right">Mn. SLRC</A> 
<A HREF="ltn/ltn.htm" TARGET="right">Mn. LTN</A> 
<A HREF="state/state.htm" TARGET="right">Mn. Dept. CFL</A> 
<A HREF="http://www.prgone.com/read/mlc.html" TARGET="right">Mn. Literacy Council</A> 
Workforce Ed.</A> 
Literacy Minnesota</A> 
Community Ed.</A> 
Learning Disabilities</A> 
<CENTER><A HREF="display.htm"><IMG SRC="../images/ftparrow.jpg" ALT="Home Page">Home</A></CENTER>
</BODY>
</HTML>

TABLE.HTML is the table of contents that is placed on the left hand side of the screen. You will notice that the pages that are linked to all contain the TARGET attribute which direct the pages to display in the "right" frame (this was defined in BODY.HTM). Also, please notice the last section of code, it is a return arrow button. Remember, when you use frames, the Netscape "Back" and "Forward" buttons are disabled, therefore you need to provide that function in your pages. I have placed the "return" button in the left frame because this frame is static and does not disappear while the user is at the site. It also remains when the user links to another web site.

DISPLAY.HTM

<HTML>
<HEAD><TITLE>display.htm</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000080" LINK="#800040" VLINK="#00FF80">
<H2>This Web site provides information and links to literacy resources in Minnesota. To use this Frames enhanced page simply click on the appropriate item in the TABLE OF CONTENTS. The "Home" button brings you back to this page. If you do not like using Frames try our other <A HREF="mlrc/mlrc.htm">home page</A>.</H2>
<H2>Read the <A HREF="mission.htm">Mission</A> Statement of Minnesota's Electronic Literacy Resource System.
Like most pages on the World Wide Web, the contents are subject to change at any time and without notice. Your <A HREF="mailto:vmheinrich@stthomas.edu">comments and suggestions</A> are greatly appreciated.
<HR>
<ADDRESS>This www site was designed by Thomas Eland and edited by Virginia Heinrich at the Minnesota Literacy Resource Center. It was last updated on March 7, 1996.
 
Minnesota's Electronic Literacy resource System = http://www.mlrc.stthomas.edu
</ADDRESS>
</BODY>
</HTML>

Now that you know how the HTML mark-up looks, take a look at the actual web document.