CPSC 120 Lab 8:
Frames

A "frame" is a section of a browser window that shows a Web page. Ordinarily, there is only one frame that fills the entire display area of the browser window. However, it is possible to break the browser window into a number of frames, with a different page in each. As a Web site designer, you do this with a special HTML file that specifies how the window is be divided into frames and which Web pages are to appear in each of the frames. The Web pages themselves should be provided on your site as separate, normal HTML pages. This worksheet for lab 8 is an example of using frames. The main HTML file, "http://math.hws.edu/eck/cs120/lab8/index.html", sets up a window structure with three frames. One is the blue menu strip along the left end of the window. Another is the title, "Towards a better Web page", at the top of the screen. The third frame occupies the rest of the window and is used to show the actual content of the Web site. Note that the Web page that is displayed in any of the frames can be changed at any time.

To create a framed Web site, use an HTML file in which the BODY tag has been replaced by a FRAMESET tag. The format for the file is:

       <HTML>
       <HEAD>
       <TITLE>page-title</TITLE>
       </HEAD>
       
       <FRAMESET rows-or-cols>
       
          frames-and-framesets
          
          <NOFRAMES>
             text-for-browsers-that-don't-do-frames
          </NOFRAMES>
       
       </FRAMESET>

(The NOFRAMES section is for Web browsers that don't do frames. They will ignore the frames and instead will show the text that is provided in the NOFRAMES section.) The frames-and-framesets section is where the frames and their contents are specified.

A frameset divides a region into several frames. The region can be divided either vertically into columns or horizontally into rows. You have to specify the width of the columns or the height of the rows. You can specify width or height as a number of pixels or as a percentage of the available space or as the special value *, which represents space left over after space has been allocated to the other columns or rows. All this information is expressed in a modifier in the FRAMESET tag. Here are some examples:

Inside a FRAMESET tag, you have to specify the content of each row or column. The content can be a nested FRAMESET. This allows you to further subdivide the window. Alternatively, it can be a FRAME tag, which specifies a Web page that is to be displayed in the space.

A FRAME tag specifies the URL of a Web page to be loaded into a frame. Often, a FRAME tag also specifies a name for the frame. (We'll see later how these names are used.) For example:

<FRAME SRC="main.html" NAME="content">

specifies that the document with URL "main.html" is loaded into the frame, and that the name of the frame is "content".

There are several other modifiers that are useful in FRAMESET and FRAME tags. If you are interested, consult an HTML reference book, or look at some sample source code. Here, for example, is the complete HTML source code for this Lab 8 Web site:

      <HTML>
      <HEAD>
      <TITLE>CPSC 120, Spring 2001, Lab 8</TITLE>
      </HEAD>

      <frameset cols="150,*">

         <frame src="menu.html">

         <frameset rows="75,*" framespacing=0 frameborder="no" border=0>
            <frame src="title.html"  scrolling="no">
            <frame src="main.html" name="mainframe">
         </frameset>

         <noframes>

            <p>This set is designed to use frames.<br>
            However, you can also access all the pages</br>
            on this site through our <a href="menu.html">main menu</a>.</p>

         </noframes>

      </frameset>

      </HTML>

It sets up two columns. The first column displays the file menu.html. The second column is divided into two rows. You could copy and paste this into your own file, and modify it to make your own framed Web site.

Targeting Frames in Links

Suppose that a frame is displaying a Web page that contains a link to another page. What happens when the user clicks on that link? That is, where is the new page displayed. By default, it is displayed in the same frame, replacing the page that contains the link. Sometimes, however, you want to display the page in a different frame. This is the case for the links in the menu that is displayed in the frame to the left. If the user clicks on one of the links in the menu, the new page is displayed in this frame. It doesn't replace the menu.

This is very easy to do, and it's where we make use of the name that is provided for the frame in the FRAME tag. The name of the frame that contains this page is mainframe. To make a link in another frame open a new page in this mainframe frame, it's only necessary to add the modifier TARGET="mainframe" to the link. For example, the source code for the menu contains the link

<a href="tables.html" target="mainframe">Tables</a>

When the user clicks this link, the Web page at URL "tables.html" is loaded into the frame named "mainframe". That is, it will replace the page that you are now reading.

There is a special TARGET that can be used to specify the entire Web browser window. If you specify TARGET="_top" in a link, then when the user clicks the link, the new page will replace all the frames that the browser is currently displaying. This makes it possible to break out of the frames altogether. For example, this is done in the menu for the link "CS 120 Home". This is coded in the source as

<a href="../index.html" target="_top">CS 120 Home</a>

Try clicking on the link to see what happens.

[ Previous | Next ]