Frames and IFrames

An Introduction To Frames
With frames, you can actually put more then one web page in the same window. This can be very convenient, but also a problem.
The best usage I have found for frames is placing repetitive material all on one HTML document, and placing the changing material on separate documents, bringing them all together using frames.

For example, let's say you have a basic layout with navigational links that appear on every page. Instead of placing the same HTML for your links on every separate page, you could place the links for your page on one HTML document, and then place that document in a frame.

The biggest disadvantage of frames can be the load time. It breaks down to this, for every frame you have the browser has to download an individual web page. If you had 10 separate frames on your web page, the web browser would have to download 10 web pages at the same time. I've encountered this before, and on a slow computer it's not pretty. But, on the flip side, once things have loaded then navigating through the rest of the website should be a breeze, because all the major parts have been loaded.

So, when you work on your frames layout, try to make no more then 3 windows.

Before you can make a web page with frames, you should have the contents of each frame ready. Remember, the content of each frame is just a basic HTML document. There are no special requirements, just have an idea of what you want first.

The page that contains your frames is referred to as a frameset document, and actually has no content. All it does is tell the web browser what pages to load, and where.

Creating Your Frameset Document
The page that contains your frames (usually the index page) is the frameset document. The two main tags you will need to know is the <frameset> and the <noframes> tags.

Here is a sample frameset document:

<html>
<head><title>Frames</title></head>

<frameset cols="*,200">
<frame src="homepage.html" name="frame1">
<frame src="menu.html" name="frame2">
</frameset>

<noframes>
<body>
Sorry, this page requires frames!
</body>
</noframes>

</html>

<frameset> ... </frameset> These tags will contain the information about your windows.
cols="*,200" This attribute is telling the browser that the frame will have two columns. The column on the right will be 200 pixels wide, the column on the left (the first column) will be whatever space is left over (as indicated with the asterisk symbol). Your measurements do not have to be pixels, they can be in percentage format as well. cols="20%" means that this column will be 20% of the total browser windows width.
<frame> You need to have one of these tags for each window. It requires no close tag, but recent standards would request that you place a space and a / at the end (i.e.: <frame />). Details, details.
src="homepage.html" This attribute will tell the frame what web page it should contain. In this case, the above frameset would try to place a page located at homepage.html.
name="frame1" Each frame should have a unique name, which can be anything you want.
<noframes> Not everyone will be able to view your page. People with old browsers (below Netscape 2, and Internet Explorer 3 I believe) will be able to see the frames, so for them you need to use the <noframes> tag. It should contain a basic HTML document, explaining that the viewer is in desperate need of an upgrade. You can also include a link to a "no frames" version of your webpage.
The above code will make a web page that looks like this:

( By the way, that example is not a graphic, it's a table )

Linking Between Frames and Windows
In the above example, menu.html would logically contain a series of links that, when clicked, would popup in the left window.

That's where the name attribute in the <frame> tag comes in. When you make a link that you want to open up in a frame window, you first need to know the name of that frame, which if you will recall the red section in the above example was named "frame1". The name of the frame is what you will set the target attribute to.

For example, a link on menu.html, that we wanted to open in "frame1" (the red part), would look like this:

<a href="[URL]" target="frame1">Link Text</a>

Not a terribly difficult concept, eh?

While we're talking about targets, lets discuss the 4 other targets used with frames. If you set the target attribute in the <a> tag to one of these 4 settings you will alter where the link opens:

_blank : Loads the link in an entirely new window.
_top : Loads the link in the entire current window. Useful for when you want to get rid of all frames, or replace the entire window with a new set of frames.
_parent : Loads link over the parent frame if the current frame is nested within other frames.
_self : Loads link into current frame, replacing document currently on display. (You'll probley never use this, because clicking a link with no target set at all will do the same thing).

Margins, Borders, Frame Resizing, and Scrolling
By default, frames have scrollbars, thick gray borders, can be resized by simply clicking and dragging the dividers, and the margins within the frame can take up too much space.

To get rid of the scrollbars in a frame, set the scrolling attribute to no:

<frameset cols="*,200">
<frame src="homepage.html" name="frame1" scrolling="no">
<frame src="menu.html" name="frame2">
</frameset>

Now frame1 will have no scrollbars.

To adjust the width of the gray dividers that separate each frame, or eliminate them all together, set the border attribute in the <frameset> tag to whatever pixel value you want, like this:

<frameset cols="*,200" border="0">
<frame src="homepage.html" name="frame1" scrolling="no">
<frame src="menu.html" name="frame2">
</frameset>

In the above example the gray dividers will not show up.

This is an example of frames with default borders, and this is an example of the same frames with border="0".

By the way, the HTML for the frameset document in the first of the 2 examples I just showed you is this:

<html>
<head><title>Frames</title></head>

<frameset cols="250,*">
<frame src="kittymap.html" name="links">
<frame src="main.html" name="content">
</frameset>

<noframes>
<body>
Sorry, this page requires frames to be viewed!
</body>
</noframes>

</html>

The margins in a frame is somewhat analogues to cellpadding. When you set the marginheight or marginwidth to 0, the content of frame will squish right up to the edges. You set this attribute in the <frame> tag, like this:

<frameset cols="*,200">
<frame src="homepage.html" name="frame1" marginheight="0" marginwidth="10">
<frame src="menu.html" name="frame2" marginheight="20" marginwidth="6">
</frameset>

In the above example, the top and bottom edges of frame1 will come in 0 pixels, and the left and right sides will come in 10 pixels. The top and bottom edges of frame2 will come in 20 pixels, and the left and right sides will come in 6 pixels.

To keep visitors from resizing your frames, simply place the single word attribute noresize in the <frame> tag, like this:

<frameset cols="*,200">
<frame src="homepage.html" name="frame1" noresize>
<frame src="menu.html" name="frame2" noresize>
</frameset>

Well, technically, new standards state that no single word attributes should be used, and the proper way to type the noresize attribute is noresize="noresize". But, this is still a somewhat newer standard, so if you simply type noresize then it will work fine in all browsers. Or, if you want to be compliant with both old and new standards you can type noresize noresize="noresize"

Advanced Frame Layouts
So far you have seen the cols tag in the <frameset> tag, which will adjust the columns of the frames, but there is also a way to adjust the rows of the frames.

<frameset rows="*,200">
<frame src="homepage.html" name="frame1">
<frame src="menu.html" name="frame2">
</frameset>

The above code will make a web page that looks like this:

The red section would contain homepage.html, and the gray part would contain menu.html

But, that's not all! You can also put <frameset>'s within <frameset>!

<frameset cols="*,200">

<frame src="page1.html" name="page1">
<frameset rows="70%,*">
<frame src="page2.html" name="page2">
<frame src="page3.html" name="page3">
</frameset>

</frameset>

The above code will make a web page that looks like this:

The red = page 1, gray = page2, purple = page3

IFrames
IFrames, or inline frames, work like standard frames, except they can be anywhere within a standard HTML document. the <iframe> tag works just like the <frame> tag, and accept all the same attributes. In addition, you need to specify the width and height of the iframe.

This is what the typical iframe tag looks like:

<iframe name="fishpage" width="300" height="300" src="004.html">Sorry, this page uses floating frames </iframe>

name="fishpage" Just like frames, you need to specify the name of the iframe.
width="300" height="300" Unlike a typical frame tag, you will need to specify the size of the iframe.
src="004.html" This is where you specify the URL of what you want the iframe content to be.
Sorry, this page uses floating frames! iframes are still a bit new, and not completely compatible with all browsers. For this reason you should specify alternative text that will display for people who cannot see the iframe.

Here is an example of the iframe in use:

<html>
<head><title>My Page</title></head>
<body>
<center>
Welcome to my page!
<br>
This is my fishpage sample:
<br><br>
<iframe name="fishpage" width="300" height="300" src="004.html">Sorry, this page uses floating frames!</iframe>
<br><br>
This page has images and stuff:
<br><br>
<iframe name="imagepage" width="300" height="200" src="003.html">Sorry, this page uses floating frames!</iframe>
</center>
</body>
</html>

That above HTML will make this.

The bad news about IFrames is that they are only supported by Internet Explorer 3 +. That's why there is an alternative message in-between the <iframe> .... </iframe>.

Having a link show up in the iframe is done the same way as regular frames; just set the target to name of the frame.

Premade Frameset Documents / Examples

Example HTML
<frameset cols="*,30%">
<frame src="page1.html" name="page1">
<frame src="page2.html" name="page2">
</frameset>
<frameset cols="*,70%">
<frame src="page1.html" name="page1">
<frame src="page2.html" name="page2">
</frameset>
<frameset rows="*,70%">
<frame src="page1.html" name="page1">
<frame src="page2.html" name="page2">
</frameset>
<frameset rows="70%,*">
<frame src="page1.html" name="page1">
<frame src="page2.html" name="page2">
</frameset>
<frameset rows="30%,*">

<frameset cols="40%,*">
<frame src="page1.html" name="page1">
<frame src="page2.html" name="page2">
</frameset>
<frame src="page3.html" name="page3">

</frameset>
<frameset cols="60%,*">

<frameset rows="20%,60%,*">
<frame src="page1.html" name="page1">
<frame src="page2.html" name="page2">
<frame src="page3.html" name="page3">
</frameset>
<frame src="page4.html" name="page4">

</frameset>
<frameset cols="50%,*">

<frameset rows="60%,*">
<frame src="page1.html" name="page1">
<frame src="page2.html" name="page2">
</frameset>
<frameset rows="60%,*">
<frame src="page3.html" name="page3">
<frame src="page4.html" name="page4">
</frameset>

</frameset>
<frameset rows="20%,60%,20%">

<frame src="page1.html" name="page1">
<frameset cols="20%,60%,20%">
<frame src="page2.html" name="page2">
<frame src="page3.html" name="page3">
<frame src="page4.html" name="page4">
</frameset>
<frame src="page5.html" name="page5">

</frameset>

Main?