Article
Practical Web Design - Frames and Frame Usage Explained
Interactive Frames
It's a good idea for framed pages to be able to interact with each other; that is, direct hyperlinks to the framed pages. You'll need to use the name and target attributes to do this.
Start out by naming your framed content pages:
<frameset cols=*,2*>
<frame src="navigation.html" name="frame1">
<frame src="mainpage.html" name="frame2">
</frameset>
Once you've named them, you can use the target attribute to direct hyperlinks to them:
<a href="moreinfo.html" target="frame2">More content</a>
If you place this hyperlink into the navigation.html page, when the user clicks on it, the mainpage.html file will be replaced by the moreinfo.html file on the right side.
If you give a target that hasn't been defined with the name attribution, the page will open in a new browser window.
But what if we want twenty different pages to cycle through the main content display? We could just write twenty different links in navigation.html all targeted to "frame2", or we could use a <base> tag in the <head> section of the navigation.html page:
<base target="frame2">
This emulates having the target="frame2" attribute in every hyperlink.
Special Target Commands
There are four special target commands, and they all begin with the wonderful, magical, mystical underscore: _. Here they are:
target="_blank"- causes the URL to load into a new browser window.target="_top"- targets the URL to the entire browser window and wipes out all of the previous frames; used mostly when you're linking from your own framed content to an outside site.target="_self"- loads the URL into the same window (the default; if you want this to occur, there's no need to specify it in the code).target="_parent"- loads the URL into the frameset's parent window; unless you're using nested framesets, this command works just like the_topcommand. If you're using nested framesets, then this command loads the URL into the frame that is the "next step up" -- the parent window.
Some Other Commands
marginheight and marginwidth define the amount of space, in pixels, that falls between the margins and the content.
The name attribute is used to target the frame.
The scrolling attribute decides the condition of the scrollbars, when applicable. The values are on, off, and auto, the default. Unless you have a specific need to turn scrollbars on or off, this attribute is best left out of your code, and the display will choose whether or not scrollbars are needed. Note that the scrolling="no" and noresize commands can make it tough on users with smaller displays if the two are used in conjunction. If you use them together, test-drive your site in a 640x480 display to see how it looks.
The title attribute can contain a phrase that is used as the title of the iframe. Some browsers depict this information when the mouse hovers over the element, while others display the information in the right-click menu. If you want to include a longer description (usually for non-visual browsers), use the longdesc tag. It will provide a link to the longer description.
Advanced Features
IFrames
IFrames, originally an Internet Explorer-only feature, are now viewable in Internet Explorer 2.x and above, Netscape 7, Mozilla, Opera 3 and 6, and even the WebTV/MSN browser. IFrames are included in the HTML 4.0 specifications as well as the XHTML 1.0 specs. IFrames are "inline" or "independent frames" that reside in the body of a regular HTML page, and can be nested in a page just like a graphic, and do not require the use of a frameset. They're easy to use and quite useful for sidebar and other information of interest that isn't directly relevant to the main body of content. The more you use them, the more uses you will find for them. When you're building your page and you reach the area where you want the iframe to be, simply use the following code (modified to your own uses, naturally):
<iframe src="sidecontent.html" width="200" height="100" align="right">Inside this tag is content contained within an iframe. Your browser may not display this material. You can click <a href="sidecontent.html">here</a> to see it for yourself, and use the BACK button to return to the main page.</iframe>
This gives you a little independently framed HTML page within the body of your main Web page, filled with whatever content you like. Non-compatible browsers will see the content within the two <iframe> tags. Although the width and height attributes are considered optional, they are usually employed; you can choose pixels (as in the above example) or percentages for your sizing choices.
Note that the align attribute has been deprecated in favor of style sheets. If you choose to use it, your main choices are:
bottom: the default; the bottom of the object is aligned with the baselineleft: the object is aligned along the left margin, with following objects arrayed to the rightmiddle: center of the object aligned with the baselineright: the object is aligned along the right margin, with following objects arrayed to the lefttop: the top of the object aligned with the baseline
You can also use the frameborder and scrolling commands in an iframe.
CSS users can use the class and/or id attributes to define the contents of the tag according to the style class or the style ID. CSS users can also use absolute positioning, a floating div tag, and stylesheet declarations to have an iframe element "float" on top of your main content. Check out Webmonkey's tutorial on how to accomplish this nifty little feat.