The purpose of a frameset is to display 2 or more different pages on the same screen. Each page is held in a frame and the frames are held in the frameset. One page can control which page is displayed in the other frame and visa-versa. The most common use of frames is to have a menu in the left-hand window which controls what is displayed in the right-hand window.
A frameset must NOT have a <body> tag in the normal way that an html page does, although the <body> tag can be used in between the <noframes> tags, which will be explained later.
Click here to see an example of Frames
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Frameset Example One</title>
</head>
<frameset cols="140,*">
<frame src="menu.htm" name="menuframe">
<frame src="display.htm" name="displayframe">
</frameset>
</html>
The <frameset> tags replace the <body> tags. In the <frameset> tag are the sizes of the 2 frames. In the example above, the left-hand frame would be 140 pixels wide and the right-hand frame will take up the rest of the available screen. By using the wildcard character (*), this tells the browser to use what space is left for this frame. A percentage value can also be use. You could have one frame as 10% and the other at 90%.
Some examples of sizes
<frameset cols="180,*">
<frameset cols="20%,*">
<frameset cols="10%,90%">
If both frames are set to an exact pixel width (e.g. 120,640) it may fit the screen of your browser, but anyone using a different screen resolution may get a great deal of empty screen, or some of the right-hand frame may be clipped requiring scrolling to view the total frame.
The frame name
The frame 'Name' is very important and is used to reference which frame to put a specific html page in. If the right-hand frame was called 'displayframe', then to make a new page appear in it, you would use a link in the left-hand page with target="displayframe" in that link.
A frameset is the main page that holds everything together and has the normal file extension of .html or .htm. The html menu page in the left frame is just a list of links, but could include any code that would appear in a normal html page to enhance it. The links in the menu then control which pages are displayed in the right frame. The links correspond to as many pages that you want to display in the right frame. Note: the target="menuframe" in this example is never referenced as the menu doesn't need to alter.
The menu page would look something like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div><a href="page1.htm" target="displayframe">Page 1</a></div>
<div><a href="page2.htm" target="displayframe">Page 2</a></div>
<div><a href="page2.htm" target="displayframe">Page 3</a></div>
<div><a href="index.htm" target="_top">HOMEPAGE</a></div>
</body>
</html>
The last link 'HOMEPAGE' has it's target set to '_top' (don't forget the underscore character). This is a reserved name and is there to break out of frames and go to the top level, i.e. if you wish to return to normal html pages.
The display pages
Create as many standard html pages as you like with text, images and backgrounds etc. No links are needed in these pages as the menu page does it all. There is no limit to how many frames you can have in any one frameset, but using too many may be confusing.
Frames are supported from Netscape Navigator 2.0 and Internet Explorer 3.0. The Noframes tag is used for earlier browsers or other devices. This could be a link to a standard html page or just a message.
An example using Noframes tags
<frameset cols="130,*">
<frame src="menu.htm" name="leftframe" scrolling="yes" noresize>
<frame src="page1.htm" name="rightframe" scrolling="no">
<noframes>
<body>
<p>This section uses Frames but your browser doesn't support them.</p>
<p>Please use your 'BACK' button to return.</p>
</body>
</noframes>
</frameset>
This is the W3C (World Wide Web Consortium) recommended method and differs from some books you may read of putting the 'Noframes' tags following the 'Frameset' instead of inside the 'Frameset' tags. You'll notice that scrolling="yes" is included in this example. If set to scrolling="no" the scroll bar is hidden for that frame. This is not a good idea, as if one of your pages does stretch beyond the screen, the surfer will be unable to scroll and read it.
The optional 'noresize' has also crept in here, which stops the surfer resizing that frame (i.e. by grabbing the edge of the frame and dragging it). I tend to use it in the left-hand menu frame to stop accidental resizing when the surfer is clicking one of the links.
Note: webcrawlers or webbots (those little spiders that crawl around the web indexing sites for search engines e.g. Google etc.) find frames hard to negotiate. Therefore, it's not recommended to use a frameset for your total site, but search engines are improving how they index frames now.
