Frames & Iframes
Frames
What can we say? We love frames. We even like iframes, even though they don't work nearly as well as frames.
Frames let you put more of the web on one screen; you can have pages from different locations, there's almost no end to what a creative person can come up with when it comes to these things. Which is probably what bugged the standards bodies so much.
Because frames are not super easy to talk about, we'll put a simplified code sample here for you to check out (normally, there would be linked stylesheets and javascript libraries and meta tags and so on):
<html> <head> <title>Sample</title> </head> <frameset cols="140,*" frameborder="0" border="0"> <frame src="sample_index.html" scrolling="auto" frameborder="0"> <frame src="sample_content1.html" name="main" id="main" scrolling="auto"> </frameset> <noframes> <body> <div align="center"> <a href="/index.htm">Your Site</a><br /> <h2>Sample</h2> <p> If you can read this it means that your browser doesn't support frames, or you have frame support switched off for some reason. </p> <p> You can still see the pages of this section if you click <a href="sample_index.htm">here</a>. </p> </div> </body> </noframes> </frameset> </html>
Note: <frameset cols="140,*" frameborder="0" border="0"> shows you how you can relatively size either the cols or rows (we don't have rows="whatever, whatever" in this example, but they work the same way). The number '140' sets the first column, in this case, to be 140 pixels wide. The ' * ' is a wildcard character, that tells the browser to allocate whatever is left after the 14f0 pixels is used up to the other part of the frameset, the content area in this case.
Framesets can be nested, but frames can't be. So you could make one frameset that is two rows, fill the top with a frame, and the bottom with another frameset. Only framesets can be sized, and only frames can have HTML content and names and ids.
Note that frames are not standard html. A frame page is not an html page, but is a container for html pages. Where the body tags would normally be on an HTML page, there is the frameset tag. The frameset tag is the container for the frame tags, which is where you actually call the html pages. The title of a frame page is like a normal html page however. The browser is alerted that it is a frame page because there is no body tag.
If you don't explicitly state ' frameborder="0" ' and ' border="0" ' the frames will have annoyingly ugly grey borders. There is no way to use CSS to get rid of those, unfortunately, so you have to declare it manually.
If one of the frame is going to hold the index page, there is one important piece of code you need to put in the head tag of the index.html page, that contains just the index. That's <base target="main">. This points all links in that page to the target page, which corresponds to the id/name page you have assigned above to be your content page. That is usually called 'main', although you can call it whatever you want, as long as you target the same name as you have called the frame that contains the content. If you use an id as well you can use document.getElementById() to do things like change the frame content. This is useful if you want to send visitors to another page than the default page the frameset loads, for example if they are coming in from a search engine.
Second to note is that there is an almost complete web page in the noframes part of the code. This page in this case points to the index page of the frame page, which in turn will point to all the content pages. This is what search engines use to browse your site and index all its content. If you don't put this in, they can't follow it in all cases. Needless to say, there is no need to make this part ugly or generic looking. We usually construct this no frames page to work with the site's stylesheets, and make a little page that will appear if people don't have browsers that support frames, or if their frame support is turne off.
The scrolling attribute can be set to off, no, or auto. But auto is safest, since you never know the size of the browser's window that is visiting your site (we have seen sites where the navigation page of the frameset had scrolling set to no, with the result that the bottom part of the nav bar was inaccessible unless you resized the window, if you even could (a visitor with a monitor that only supported 640x480 pixels, for example, would have no way of browsing the site. And we still see people come into our sites with browsers this small.
Frames and CSS
Frames and CSS basically do not cross paths, since the W3C decided to deprecate frames in favor of iframes several years ago, so the standards makers basically didn't bother making CSS do much for frames. And even iframes are slated for eventual demise, since the w3c has not included them in the new XHTML 1.0 strict doc type.
We have to admit that sometimes the utter lack of vision of the standards people really depresses us. But that's life, especially in the computer world, where it's all about making businesses flow more efficiently (can you make a better adding machine? Then they want you.)
Conclusion
So that's frames, more or less. They are very easy to work with, they size very reliably relative to your browser screen, and the W3C hates them. Go figure.
Of course, one day, in the far future, we will be able to do everything that a frame page does with a normal html page. That day, unfortunately, is not yet upon us, and won't be for a minimum of 5 years, which is about how long it will take the current crop of browsers to more or less be off the market, if the internet keeps developing at more or less the same speed it is now.