Frames

CS 14A

May 2, 1997

If you have questions regarding how to do something, call me over. Nothing needs to be handed-in.

Today, you'll create a framed web page with three ``panes.'' One pane will be just a page containing only an image and the other two will be HTML pages. A fourth HTML page will contain the frame information --- it contains the frame which hold the panes.

At some time (not now), you may need to set the HTML source editor option within Netscape. Here's how: Open the Options menu and choose Editor Preferences. Click the General tab and press the Browse button to the right of HTML Source. Choose the C: drive, choose the OS2 folder, choose the MDOS folder, choose the WINOS2 folder, and choose notepad.exe. Press Open and then press OK on the underlying window.

Here we go:

``Surf'' to the CS14 home page and look at the Frame Example. Note that the frame page contains three panes: upper left, lower left, and right. You can see that those panes are Web pages in their own right that have been inserted into the panes of the frame.
For an example of how another student incorporated frames into his Web pages, see Deean Haggerty's Daily Dose (keystone/~haggerdp/FRAMES1.HTM).
Create a frame folder on your N: drive. You'll put all your practice frame files into this folder.
The Netscape editor can't be used to create the frame page. We need an ASCII editor for that; we'll use notepad. From the Windows folder, open the Accessories folder, and open notepad.
In Notepad, type the following exactly as is, capitals and all:
```
<html>
<head>
<title>Example of Frames</title>
</head>

<frameset cols="150,*">

   <frameset rows="150,*">

      <frame name="Logo" src="logo.htm" marginwidth=0 marginheight=0
       scrolling="no">

      <frame name="Toc" src="toc.htm">

   </frameset>

   <frame name="Main" src="main.htm">

</frameset>

</html>
```
When you're finished, save the file into your frame folder with the name frame.htm. My recollection is that the Netscape editor will remove the frame information if you ever use it on a framed Web page. So, never use the Netscape editor on one of your framed pages.
In your frame folder, create a Web page named logo.htm . This page should contain only an image, no larger than pixels.
In your frame folder, create a Web page named toc.htm ( table of contents). This page should contain links to other pages. Any pages anywhere will do. One of the links should be to the ``main'' page you create next. Keep the text narrow. Remember that it has to fit into a pane only 150 pixels wide.
In your frame folder, create a Web page named main.htm . This page may be anything you like.
Open frame.htm in the browser and check to see that everything works.
It didn't, right? When you chose the links in your TOC pane, the new page displayed there, right? Let's fix that. Open your TOC page in the Netscape editor.
Move the insertion point to the beginning of the page, open the Insert menu and choose HTML tag. In the dialog box that pops up type this:
```
<base target="Main">
```
Save the page and try your framed page in the browser again. You may have to use the Reload button, but the page should work the way you'd expect now.

Thomas P. Kelliher
Thu May 1 17:18:10 EDT 1997

Tom Kelliher