Practical Web Design - Frames and Frame Usage Explained

<noframes>

Always include a section with the <noframes> tag for people without frames-compliant browsers (there are still a few out there). People with such browsers will only see the content displayed within the tags; the rest of us won't see it at all, as our frames-compliant browsers won't show it:

<noframes>Your browser won't handle frames.  <a href="noframes.html">Go here for a better view!</a></noframes>

Of course, this noframes.html file should include all the content contained in the frameset, in a design that uses – you guessed it -- no frames. Two sites in one... hmmm, here's an argument for designing without frames...

Place the <noframes> code just above the closing </frameset> tag.

Screen readers and audio browsers have a tremendous amount of difficulty with framed pages. This is reason alone to use a <noframes> page, even if everyone who visits your page is using the latest in browser technology. Some screen readers can handle simple framesets, so this caveat is slowly becoming irrelevant, but there are plenty of folks out there using older screen readers that can't handle frames at all. Maximum accessibility is a necessity, not an option to be considered casually.

Trickier Stuff

You can "nest" one frameset inside another for more complex layouts. Start off with something simple:

<frameset cols=*,2*>    
  <frame src="navigation.html">    
  <frame src="mainpage.html">    
</frameset>

Here we've got two columns, the right one twice as big as the left. By the names of the files, you can deduce that we're going to use the left side for navigation and the right, larger column for content. Now, let's get tricky with it:

<frameset rows="20%,*">    
  <frame src="title.html">    
     <frameset cols="*,2*>    
        <frame src="navigation.html">    
        <frame src="mainpage.html">    
     <frameset>    
</frameset>

This allows us to combine rows and cols together to create the classic "newspaper" site design: a horizontal "masthead" used as our title, and two columns, a narrow left-hand column for navigation and a wider right-side column for main content display. Note that the second <frameset>, the one with the columns, is completely contained within the second row of the first <frameset>.

Want a two-column display with the larger, right-hand column divided into two rows? Just switch the rows and cols attributes above:

<frameset cols="20%,*">    
  <frame src="title.html">    
     <frameset rows="*,2*>    
        <frame src="navigation.html">    
        <frame src="mainpage.html">    
     </frameset>    
</frameset>

If the left-hand column isn't wide enough, just change the value of 20% to 30% -- or whatever suits you.

Margins

HTML 4 provides two margin control commands, marginheight and marginwidth. The first specifies, in pixels, how much space is to be left between the frame's contents in its top and bottom margins. The second does the same for the left and right margins. There is no specific default.

Borderless Frames

You can add certain attributes to your <frameset> tag to eliminate the frame borders, which display by default. Different versions of Netscape and Internet Explorer use different commands, so you may need all of the attributes below for proper site design, though the following code isn't quite standard HTML 4:

<frameset cols="*,*" framespacing="0" frameborder="0" border="0">

Both Netscape and IE use the border attribute, but it isn't valid HTML 4. Its value should represent the border’s width in pixels.

framespacing is an IE-only attribute that, like Netscape's border, lets you define the border's size in pixels. It is not a valid HTML 4 tag.

frameborder works with both Netscape and IE. Before HTML 4, the tag used different values for the two browsers: Netscape's values were yes and no. IE's were 1 and 0, which correspond to the yes and no of Netscape. The defaults are yes and 1, which tells the border to draw the border. HTML 4 standardized the tag to use 1 and 0.

If you're coding in HTML 4, use the <... frameborder="0"> tag if you want to keep your frames borderless.

Colored Borders

bordercolor is a tag that lets you set your border's colors, like so:

<frameset cols="*,*" bordercolor="#F0F0F0">

Like the previous tags, bordercolor isn't official HTML 4, though it works with both Netscape and IE.

Margin Width and Margin Height

Not too many people bother to specify these attributes, which also go inside the <frameset> tag. The tags determine the margin's height and width in pixels. Try the tags to see if they work for you.