[Prev Lesson (no frames)] [Prev Lesson] [Next Lesson] [Next Lesson (no frames)] [Course Outline]
[Frames] [frameset] [index doc] [main doc] [another frameset] [no frames] [Review] [Top] [image]

Lesson 5
Frames

Frames

Frames can be used to divide the screen into smaller sections. It is a very useful feature but can be tricky to control. I do all my computer work on a labtop computer with a small screen. I don't use frames extensively because it divides the screen into too small of areas and excessive scrolling is necessary. It might be great on a large screen but it's not that practical for me. Consequentially I believe it is nice to provide the web page visitor with a "no frames" version the web page. Of course there are some situations when the frame environment is an essential element of the design. The frame environment allows you to set a navigation bar in one frame that contains links to different sections of a document showing in another (usually larger) frame. This creates an online table of contents that is alway available regardless of where you scroll in the document shown in the large frame. There are other uses for frames but we will focus on the index functionality in two different frame layouts.

frameset

The frameset document defines the frame layout. If doesn't show up in the browser window but instead contains the addresses of the documents that do show up in the browser window. The frameset document is a HTML document that doesn't have a BODY tag but instead contains the FRAMESET tag. Attributes for the FRAMESET tag include "cols" and "rows". These attributes determine how the window is divided into frames. In this simple example the window is divided vertically into two frames (left and right) using the "cols" attribute.

The FRAME tag is used to assign a document to the frames. Using the "name"attribute the frames are named "Index" and "Text" and a HTML document is assigned to each frame. The functional design of this frame environment is for the frame on the left to work as an link index for the material that is displayed in the right frame.

Here is the framesetter document for the first frame example in this lesson: 

<HTML>
<HEAD>
<TITLE>Frames 'R Us</TITLE>
</HEAD>
<FRAMESET COLS="26%, *">
<FRAME SRC="Frame_index.html" name="Index">
<FRAME SRC="Frame_text.html#top" name="Text">
<NOFRAME>
<FRAME SRC="Frame_text.html">
</NOFRAME>
</FRAMESET>
</HTML>

Notice the cols attribute contains the value "26%, *". This will create two frames, the first frame is 26% of the window's width (26%), the second frame's width is whatever is left over (*), in this case 74%. The name of each frame is defined within the FRAME tag. These names are used later to specify a target for links. The NOFRAME tag allows you to assign a web address to use in case someone is using a browser that can't display frames.

We'll examine all of the documents needed in this frame environment before taking a look at the example.

Index document

The document loaded into the left frame (the frame is named "Index") will be used as the index for this frame enviroment. Notice that the links have a new attribute called "target". This allow you to create a link in one frame that will control a document in another frame. The links contain some JavaScript code that is irrelevant to the frame environment. For now you can ignore the part containing - onMouseOver="window.status='Link'; return true". The important href attribute is "target". Notice that all of the link targets are the frame named "Text". This frame (named "Index") can control the document in the frame named "Text".

Here is the index document: 

<HTML>
<HEAD>
<TITLE>Frame index</TITLE>
</HEAD>
<BODY>
<H1>Index</H1>
In this example the links below take you to different sections of the page
that is loaded in the frame on the right.  It could just as easily be set 
up so that each link loads a different page.
<UL>
<LI><A HREF="Frame_text.html#1" target="Text"
onMouseOver="window.status='Link'; return true">Section 1</A>
<LI><A HREF="Frame_text.html#2" target="Text" 
onMouseOver="window.status='Link'; return true">Section 2</A>
<LI><A HREF="Frame_text.html#3" target="Text" 
onMouseOver="window.status='Link'; return true">Section 3</A>
<LI><A HREF="Frame_text.html#4" target="Text" 
onMouseOver="window.status='Link'; return true">Section 4</A>
<LI><A HREF="Frame_text.html#5" target="Text" 
onMouseOver="window.status='Link'; return true">Section 5</A>
<LI><A HREF="Frame_text.html#6" target="Text" 
onMouseOver="window.status='Link'; return true">Section 6</A>
<p>
<LI><A HREF="../HorizontalFrame/Frame2.html" target="_top" 
onMouseOver="window.status='Link'; return true">A different frame example</A>
</UL>
<HR>
check out the source code.
</BODY>
</HTML>

Main document

This main document contains anchor names through out the document so that you can jump to different sections. The content is silly but the principles are serious and useful. 

<HTML>
<HEAD>
<TITLE>Frame Text Page</TITLE>
</HEAD>

<BODY>
<a name="top"></a>
<H1>This is a Fake Text Page

<H3><A NAME="1">Section 1</A></H3>
<P>Section 1 is here: yada, yada, yada.
<P>More yada yada yada...

<H3><A NAME="2">Section 2</A></H3>
<P>Section 2 is here: wiggy, wiggy woo.
<P>The wiggiest of woo.

<H3><A NAME="3">Section 3</A></H3>
<P>Section 3 is here: mopity dopity bop.
<P>The mob is a slob.

<H3><A NAME="4">Section 4</A></H3>
<P>Section 4 is here: my god, I am...
<P>I program, therefore I am.

<H3><A NAME="5">Section 5</A></H3>
<P>Section 5 is here: An excellent destination for linking.
<P>I've always wanted to visit this spot.

<H3>Section 6</A></H3>
<P>Section 6 is here: An equally excellent destination for linking.
<P>I'm glad I finally visited this spot.
<HR>
<BR>
<IMG SRC="Images/ReplaceMe.GIF" ALIGN=CENTER><BR>
<HR>
<BR>
check out the source code.
<HR>
<</BODY>
</HTML>

Here's a link to example 1:

Frame example 1

There is no link from this frame example back to this page. You will need to use the back button (several times probably) to return to this page.

Another Frameset

Here is a different frameset document that divides the the window horizontally. This time the top frame is set to a specific numerical size not a percentage. This second example is the basis for the functional design of this course web site. There is no link from this frame example back to this page. You will need to use the back button (several times probably) to return to this page. 

<HTML>
<HEAD>
<TITLE>Frames 'R Us</TITLE>
</HEAD>
<FRAMESET ROWS="80, *" frameborder=no>

<FRAME SRC="Frame_index2.html" name="Index">
<FRAME SRC="PageTemplate2.html#top" name="Text">

<NOFRAME>
<<FRAME SRC="PageTemplate2.html">
</NOFRAME>
</FRAMESET>

</HTML>

The index and main document are too long to display here but the principle is the same.

Here's a link to example 2:

Frame example 2

No Frames version

For the benefit of those who are using a small computer screen and those who do not have a browser capable of dealing with frames it is nice to provide a no frames version of the information. Many times you can simply provide the main document that is shown in the large frame. Setting the target for such a link is a little tricky.

Review

Section7Text