Frames have been around since the early years of browser technology, and started really taking off around version 3.0 of the browser wars. Frames allow your page to be divided up into multiple, scrollable regions which can contain there own content. One advantage of frames is that they will allow you to create static sections of pages. For example by creating a framed page, it will allow you to place a static menu on the left side. So instead of making a menu change to hundreds of HTML documents, you can simply make a change to 1, the static menu frame itself. Frames have disadvantages as well. Some search engines simply don’t like them, and won’t index your site correctly.
Don’t understand? Read on.
OK now that you have read that frames are individual, scrollable sections of pages, lets look at a few more things you can do with frames.
Frames can be given an individual URL, so it can load information independent of the other frames on the page.
Frames can be given a NAME, allowing it to be targeted by other URLs.
Frames can resize dynamically if the user changes the window’s size. (Resizing can also be disabled, ensuring a constant frame size.)
As far as compatibility goes, as I said before frames have been around for a while now. As long as the user has Netscape 2.0 or higher, or Internet Explorer 3.0 or higher, they will see your frames just fine.
Now that you understand what frames can do and what they are used for. Lets take a look at how to make one, and some examples.
A Frame Document has a basic structure very much like your normal HTML document, except the BODY container is replaced by a FRAMESET container which describes the sub-HTML documents, or Frames, that will make up the page. Lets look at a piece of the HTML code.
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
That is the basic shell of frame code. Lets take a look at another piece of code a bit more complex.
<HTML>
<HEAD>
<TITLE>Frames Tutorials</TITLE>
</HEAD>
<frameset cols=”35,65″>
<frame src=”framemenu.html”>
<frame src=”news.html”>
</frameset>
</html>
Lets break the above code down a bit.
<FRAMESET COLS=”35,65″>
This is specifying that the page will call 2 framed columns, one taking up 35% of the page, the other taking up 65%.
<FRAME SRC=”framemenu.html”>
This calls a page named framemenu.html, that will be used for the first column, 35%.
<FRAME SRC=”news.html”>
This calls a page named news.html, that will be used for the second column, 65%.
You can break it down in any percentages you wish, however any totals over 100% and your users will have to scroll to view the rest of the content.
Lets look at what this page looks like so far.
If you noticed the page you called up was titled frametest.html. That contained the code that called the individual pages, framemenu.html and news.html.
What about rows instead of columns you ask? Simple! You would replace the FRAMSET COLS with FRAMESET ROWS, so instead of the frames being left and right, it would be top and bottom instead.
Notice that the user can change the size of the frames with the mouse, to prevent this you can add this tag:
<frame src=”filename.html” NORESIZE>
So how do you remove those borders you ask? Simple! Include frameborder=”0″ framespacing=”0″ border=”0″ within the opening frameset tag. Quote marks (” “), optional.
There you have it! I hope you understand frames a bit better now. If you have any comments of this tutorial on how to improve it, click here. Thanks.