Frame Basics

 

Introduction.  I'm assuming everyone has seen frames before on the web.  A page with frames is actually 
  • One page that describes how to coordinate the content in the frames
  • Other pages that provide the content, one page for each frame.

We will provide a simple example.  But, even in this very simple example you will need to create three separate HTML pages.  The first page should be called OrganizingPage.html.

 

<html>
<head>
<title>Frame Organizing Page</title>
</head>
<frameset cols="30%, *">
<frame src = "Navigation.html" name = "nav">
<frame src = "Contents.html" name = "contents">
</frameset>
</html>

 

This page states that there are two frames and they appear in columns.   It also says that the first first frame on the left should occupy 30% of the available width.  Finally, the source pages are given and named.

Now you need to develop the Navigation.html which will appear on the left.

 

<html>
<head>
<title>Navigation Page</title>
</head>

<body bgColor="000045" text="cccccc" link="aa00aa" vlink="880088">

<h2>Humor Navigation</h2>
<a href = "http://www.collegehumor.com/" target = "contents"><font size=4><b>College Humor</b></font></a><br>
<a href = "http://www.comedycentral.com/" target = "contents"><font size=4><b>ComedyCentral</b></font></a><br>
<a href = "http://www.montypython.net/" target = "contents"><font size=4><b>Monty Python</b></font></a>

</body>
</html>

 

This page provides three links to a small variety of potentially humorous web sites.  The target option in the tag tells the browser that the page should be displayed in the wider frame associated with the name "contents".

Now you want to create the initial Contents.html.

 

<html>
<head>
<title>Contents Page</title>
</head>

<body bgColor="aa00aa" text="000045">

<h1>Choose a link on the left to see some humor</h1>

</body>
</html>

 

This page gives the user some rather obvious directions about the page.

After uploading all three pages and linking to the OrganizingPage.html you should see something like the following.

 

 

If you were to link directly to either of the other two pages you would not get any frames.

As you select the different links you should see some different contents.  Though you may also notice that some times the page you link to takes control of the entire window.  This usually happens with the Monty Python link.