After a brief period of popularity, the use of frames have long ago fallen out of favor with most web developers - and rightly so. But iFrames are easy to work with and can come in handy for a number of things. So I'm sharing this modest article. This may be nothing new or special to many of you, but I think there an underutilization of iFrames. Perhaps that's because there is a shortage of good documentation about how to use them, or perhaps because they are not supported intuitively by Dreamweaver's Properties inspector. If you don't do much hand coding (which, by the way, I don't), then it's not apparent how to put them to good use.
In this example, I've used iFrames to create a simple picture gallery. You could use the more common Swap Image behavior, which in this case would be essentially a "remote rollover". But in this case I wanted to include easily editable captions to accompany the pictures. Using an iFrame allows you to swap entire html pages which means swapping images, text, Flash or anything else that you would normally put in an html page.
Use View Source to see the code of this very simple page. Here is the essential code that comprises this particular example:
In this instance, the page consists of a 2 column table with an iFrame named "mainframe" in the first column and a second iFrame named "thumbframe" in the second column. "Mainframe" is a container that displays a series of pages with large pictures and caption text. Here is one of those pages. "Thumbframe" displays a page of thumbnails that are linked to those pages with the large images and captions. The link target must be set to "mainframe".
Since iFrames are poorly documented, the truly helpful part of this code is in the iFrame parameters. Notice that "mainframe" has scrolling turned off while "thumbframe" has scrolling turned on by default. Both are set to have no border. In order to work properly, the target iFrame, in this case "mainframe" must be assigned a name.
Here is a simpler version, using only one iFrame. And just to illustrate another possibility, the thumbnail links are set for mouse over.
In addition to viewing the source code of these pages, you might wish to use File/Save As -> Webpage Complete to see all files that go into the making of this simple gallery.
A real world application of this technique is in use here. I'm sure you will come across places and situations where this technique would be suitable.
Update: DWUser has published an excellent iframes tutorial here.
