Frames are an HTML solution to dividing a page into two or more sections. We used frames on Alan Morphew Dot Com because we wanted the surfer to be able to move around in several pages of content but did not want to have more than one MP3 player operating at a time. We divided that page into two sections with 30% of the page in the top section and 70% in the bottom section. This gave us enough room to put a link bar and the MP3 player all in the top 30% of the page. It worked out real nice and is very efficient. See for yourself at: Alan Morphew Dot Com .
Normally you'd probably be better off to not use frames. Frames cause some problems with search engines, for example. That is why Alan Morphew Dot Com has a portal page (opening page). You put the Meta Tags, etc., in the HTML of the portal page. Don't bother with Meta Tags on the other pages of content.
I have to admit that frames are fun to program. They are challenging because you are really creating several pages instead of one and it is fun to work the ol' brain overtime as you try to keep everything straight.
WHAT ARE FRAMES? As stated above, frames are the division of your viewing screen into two or more different windows (sections) with each window having it's own web page.
The major change is that a new tag <frameset> and it's partner </frameset> replace the tag we're used to <body> with </body> on the frames page.
The page will not have any text or images placed on it. It is just a page for establishing the layout of the frames themselves.
There are other new tags to learn but I'm not going to go into them here (at least at this time). I've provided a good set of links at the bottom of this page where you can learn them and learn some other very clever things you can do with frames.
My purpose here, at present, is to teach you enough so that you can get your first frames page uploaded and feel successful. So, I've put together a little lesson for you to work through and I promise that if you do the lesson carefully (exactly), you will get a frames page up and operating. From that point on you can make changes to that basic page until you get what you really want on the internet.
We are going to program a very simple frameset. This frameset will produce two horizontal windows on the screen (rows). The top window will consume 80% of the viewing area and the bottom window will consume 20% .
This practice assignment shouldn't take more than a half-hour of your time.
Once this assignment is complete, uploaded, and behaving properly remember to seek wisdom by following the links at the bottom of this page to learn more.
I have put together a small practice assignment for you. Work through this assignment carefully and you'll create your first frames masterpiece.
All you have to do, pretty much, is copy/paste. Be sure you put your URL's into the addresses as noted.
Create a new webpage and give it the filename: index.html (If you already have an index.html file you'll have to rename the old file because for frames to work, the new file will have to be named: index.html).
Now type (or paste) the following in your new document:
-----
<html>
-----
You are 1/3 finished with the practice assignment!
<head>
<title>
A Frames Assignment
</title>
</head>
<frameset rows="80%,20%">
<frame src="http://putyouraddresshere/info.html" name="info">
<frame src="http://putyouraddresshere/link.html" name="link">
</frameset><br>
</html>
Create a new webpage and give it the filename: info.html
-----
<html>
Type (or paste) the following into the editor:
<head>
<title>
Info
</title>
</head>
<body>
<H1>
THIS IS MY FRAMES INFO PAGE
</h1>
<p>
This is the frames "info" page of my frames practice assignment. If everything goes as expected, this page will appear on the upper window (top 80%) of my frameset.
<p>
</body>
</html>
-----
You are now 2/3 finished with the practice assignment!
Create a new webpage and give it the filename: link.html
Now, type (or paste) the following into the editor:
<html>
<head>
<title>
link
</title>
</head>
<body>
<center>
IMPORTANT LINKS
<a href="http://www.yahoo.com" target="info"> YAHOO </a>
<a href="http://www.altavista.com" target="info"> ALTA VISTA </a>
<a href="http://www.lycos.com" target="info"> LYCOS </a>
</center>
</body>
</html>
-----
You are finished with the practice assignment! Upload your new pages to your server.
To see how you did, type the URL of your frameset page into your internet browser's address window and hit "return". CLICK HERE to see how it should look.
Did it work for you? It should have. It has been tested and retested many times. Let me know.
There are dozens of variations and tons of ways to manipulate frames. Experiment...you can't hurt anything. Following is an on-line tutorial that will really help you as you start to redesign your assignment page.