Create a frameset

Forms and Frames

Create your own Frameset document

You will be creating a simple frameset which includes a document in one frame and commentary on that document in another - a setup in a variety of instructional situations. The emphasis in the workshop is on the tags used to create the frame structure, not the documents that go in each frame.

Step 1: Create a frameset HTML page

Start up your text editor (this will vary depending on which computer you are using).

Open the file myframes.html. To save you some typing, I have started the page for you and given it this name.

You are to substitute appropriate information for each instance of XXX you find in the following tags in myframes.html :

TITLE tag
FRAMESET tag
FRAME tags

Examples of appropriate information are provided in the reference example below. Further information will be provided during the session.

<HTML>
<HEAD>
<TITLE>Document with commentary by me
</HEAD>

The typical things that go in any HTML document.
The title you use for the frameset document is the one the user sees no matter what TITLE tags are in the pages in each frame.

<FRAMESET ROWS="67%,33%">

The FRAMESET tag tells the browser to set up frames according to the instructions you provide.
The ROWS= property tells the browser to create vertically stacked frames. Each number specifies how much of the frameset to allocate to each frame.

<NOFRAMES>
<BODY>
<P>This page uses frames, which your browser does not support.
</BODY>
</NOFRAMES>

The NOFRAMES container tag is optional and is used only by browsers that don't support frames. I hope it's structure is self-evident to you.

<FRAME name = "righttop" src="http://web.uvic.ca/hrd/fleat3/index.html">
<FRAME name = "rightbottom" src="myreview.html">

You need one FRAME tag for each number in the FRAMESET tag - in our example, 2.
Each FRAME tag allows you to specify information about that frame.
The NAME= property specifies the frame's name (this is important if you want to send messages from one frame to another)
The SRC= property specifies the URL of the web page that is to go into that frame when the user loads the frameset page.

</FRAMESET>

This tag tells the browser that your frameset is finished.

</HTML>

This is the normal tag to end an HTML page.

Step 2: Create the pages that go in each frame

The FLEAT III home page goes in the top frame. It's URL is provided in the frameset document - you don't have to do anything more.

You will put the web page called myreview.html into the bottom frame. I have created that document. If you wish, use your text editor to add a line or two of your own text to myreview.html, then save it.

Step 3: Look at your frameset in the browser

Start up Netscape if it is not already running.

Choose Open File from the File menu, and open the file myframes.html

You should see your browser window divided in two. The top half should be about twice as high as the bottom half. The FLEAT III page should appear in the top half and the text contained in the file myreview.html should appear in the bottom half.

Step 4: Experiment

Make a copy of myframes.html and try these in any order. After each change, look at your page in the browser to see what the effect is:

in the FRAMESET tag, change the word ROWS to COLS, save the change, reload it in the browser, then change COLS back to ROWS.
in the FRAMESET tag, change 60% to * and change 40% to 40, save the change, reload it in the browser, then change * back to 60% and 40% back to 40.
in the FRAMESET tag, add a comma and another percentage (for example 20%), save the change, reload it in the browser, then remove the comma and percentage you added.
in the FRAME tag, replace src="myreview.html" with src="", save the change, reload it in the browser, then change src="" back to src="myreview.html"

Extra Activity

Remember how the "Web Pages that Suck" site had a table of contents as well as a document and commentary? In this activity you will recreate that kind of setup. You'll need to:

In your text editor, open the file empty.html (it's the skeleton of a frameset document)
Make it have two frames side by side, the first one should be about 1/4 of the screen and the other the rest of the screen.
Make the source for the first frame toc.html (I've already created that document for you)
Make the source for the second frame myframes.html (the frameset you just created)

Open your Browser with the file empty.html and see what happens.

<HTML> <HEAD> <TITLE>Document with commentary by me </HEAD>	The typical things that go in any HTML document. The title you use for the frameset document is the one the user sees no matter what TITLE tags are in the pages in each frame.
<FRAMESET ROWS="67%,33%">	The FRAMESET tag tells the browser to set up frames according to the instructions you provide. The ROWS= property tells the browser to create vertically stacked frames. Each number specifies how much of the frameset to allocate to each frame.
<NOFRAMES> <BODY> <P>This page uses frames, which your browser does not support. </BODY> </NOFRAMES>	The NOFRAMES container tag is optional and is used only by browsers that don't support frames. I hope it's structure is self-evident to you.
<FRAME name = "righttop" src="http://web.uvic.ca/hrd/fleat3/index.html"> <FRAME name = "rightbottom" src="myreview.html">	You need one FRAME tag for each number in the FRAMESET tag - in our example, 2. Each FRAME tag allows you to specify information about that frame. The NAME= property specifies the frame's name (this is important if you want to send messages from one frame to another) The SRC= property specifies the URL of the web page that is to go into that frame when the user loads the frameset page.
</FRAMESET>	This tag tells the browser that your frameset is finished.
</HTML>	This is the normal tag to end an HTML page.