frames

frames

Frames are an important tool for webmasters to organize their sites. Using frames, you can create complex sites with multiple panes easily. The most common use for frames is to create sidebars and site maps for easy navigation, so that's what we will focus on in this section.

compatibility
When using frames, it's important to remember that not all browsers are supportive of them. Most modern browsers (Internet Explorer 3.x+, Netscape 2.x+, etc.) support frames, but many users still use older browsers that don't support frames. For this reason, it is a good idea to give viewers the opportunity to select a non-frames version of the site.

what are frames?

Frames divide a site into several panels, each containing a web page. Frames are used in many sites, including this one. If you are using a frames-capable browser, you will see a sidebar to your left and a navbar to your right, in addition to the main frame, which contains this content. Using frames, an easy method of navigation is provided that allows you to access anywhere in the site from one page. For more information about how we set up our navigation system, check out our creating graphics area.

So, how do frames work?

The actual frameset (which contains information on location and size of the individual frames that make up the site) is located in the HTML page you go to. The frames themselves are in separate HTML files. The URLs of these files are specified in the frameset.

The key to successfully designing a site with frames is to think of how its going to work, not how its going to look. When designing the frameset, think of exactly where each frame is going to go, what's going to be in it, and how big it will be.

implementing frames
All frames are seperate HTML files. There is also another HTML file, the frameset, which tells the browser which frames go where and what HTML files they reference. Let's assume, for instance, that you're wanting to create a very simple two-frame site. The left frame is the sidebar, used for navigation, and the right is the main content section.

First, you need a frameset. Create a new page, call it "frameset.html" or "index.html", or whatever you like. Framesets should always be defined in the <head> tag to avoid browser conflicts. Your frameset definition might look something like this:

<frameset cols="25%,*"> <frame src="sidebar.html"> <frame src="main.html"> </frameset>

We'll examine each line of code one at a time. The <frameset> tag tells the browser to begin a new frameset. As a spanning tag, it requires a closing </frameset>. The attribute "cols" defines that the frameset is split into columns. The first column takes up 25% of the available space, and the other takes up whatever space remains, created using the wild '*' character. There are many other attributes for this tag, but most of them deal with minor aesthetic attributes, which aren't important right now.

There are two <frame> tags. The first is the sidebar frame, and the second is the main frame. Each references a seperate HTML file (the src attribute) that contains the content for the frame.

When defining the columns (in the cols attribute of the <frameset> tag), the browser automatically reads the <frame> from left to right. The sidebar will assume the 25% position to the left of the main page. If you reversed the order of the frame tags, so the main page went first, then the sidebar, the main page would be on the left and only take up 25% of the screen. We'll be looking at more ways to control this later.

The frameset requires that the it be located inside the <head>. Some older browsers will let you get by with it being inside the <body>, but this will do nothing but give you major headaches when trying to make your site work on different browsers.

shapes and sizes
So far, we've created a rudimentary frameset. Usually, you will want to define the sizes of your frames in exact pixels, so you can be sure that a specific image or line of text will fit. When you use percentages, the actual size of the frame is up to the user, and this can frequently cause problems if your page relies on specific frame sizes.

To use pixel sizes instead of percentages, simply modify the cols attribute in the <frameset> tag:

<frameset cols="150,*">

Usin this code, you are guaranteed that the size of the sidebar frame will be 150 pixels across. The main frame could still be anything, but there should always be a frame in your site that has a variable size. That way if the user has a big screen, it will fill the entire screen instead of leaving ugly gray spots, and if they have a small screen it will automatically compress itself so the user won't have to scroll around just to read one line of text.

Now that you know how to control the sizes of frames, how do you make them vertical instead of horizontal? For example, instead of a sidebar you want a frame on top with a title banner on it. This is very easily accomplished by modifying the above frameset code again:

<frameset rows="50,*">

By changing "cols" to "rows", you now have a vertical frameset. Notice that we've shrunk the size of the top frame, from 150 pixels to 50. This is for two reasons. The first is that computers have more horizontal pixels than vertical ones. The second is that text is drawn horitonzally, so the frame doesn't need a ton of vertical space. Of course you can always set the size to whatever you want.

nested frames
In some advanced sites, you may wish to use a number of frames to create an intuitive navigational system. Webworks, for example, uses three main frames: the area bar on the left, the navigation bar above, and the main content window. A layout like that takes a bit more work, but is still possible using nested frames:

<frameset rows="120,*"> <frame src="title.html"> <frameset cols="200,*"> <frame src="sidebar.html"> <frame src="main.html"> </frameset> </frameset>

As you can see, the title frame is created first. Then, instead of placing a regular frame for the bottom window, I inserted a second frameset which split vertically into two more frames. The frame on the left represented the side bar, and the frame on the right was the main content frame. Using nested frames there are infinite possibilities, but don't go overboard! A conservative layout is nearly always best.

borders! ugh!
By default, frames will be surrounded by ugly borders. They will also be resizable, which means that all your hard work making the frames just the right size will go down the drain when the user resizes them. To fix these two problems, I'll introduce a flood of HTML attributes we need to add to the <frameset> and <frame> tags. (Note: not all of these are actually necessary for compatibility with a single browser, but since almost every browser in existance implements this differently, to make your frameset compatible you need to use all of these.)

<frameset cols="25%,*" border=0 frameborder=0 framespacing=0 noresize> <frame src="sidebar.html" border=0 frameborder=0 framespacing=0 noresize> <frame src="main.html" border=0 frameborder=0 framespacing=0 noresize> </frameset>
Ouch! That much HTML is scary... basically, we added the following four attributes to each HTML tag: "border=0 frameborder=0 framespacing=0 noresize". Of course, if you want borders, you can also change the zeros to other numbers to control the size of your borders. You can remove the "noresize" attribute to allow the user to resize your frames.

linking to frames
OK, so now we have a working frameset, and we're ready to hook the frames together. The tool you use to do this is the good 'ole <a> link. Extending it to link to different frames is easy! First, name the frames in your frameset:

<frameset cols="25%,*"> <frame src="sidebar.html" name="Navigation"> <frame src="main.html" name="Content"> </frameset>

See the name attribute I added? That gives the browser a name to reference the frame with. Now, in the navigation frame's HTML file, we can set up a small link list:

<a href="home.html" target="Content">Home</a> <a href="products.html" target="Content">Products</a> <a href="contact.html" target="Content">Contact Us</a>

The target attribute of the <a> tag tells the browser to load the file into a different frame, referenced to by the value of the attribute. When the user click on any of the links in the navigation bar, they'll be loaded into frame "Content", which we defined in the frameset. Wasn't that easy? If I left the attribute out, the navigation frame itself would be overwritten by the new page, and the content frame wouldn't budge. There are two other special settings you can set the target to:

"_self": This option, the default, loads the linked page into the currently selected frame.
"_top": This throws all the browser's fancy frame setup out the window, cleans the page, and loads the linked file afresh instead of loading it into the currently selected frame.
"_parent": This loads the new page into the currently selected frame's parent frame. (Got that?) If you're using nested frames, the new page is loaded into the frame one step up in the frame tree. If not, '_parent' functions just like '_top'.
"_blank": This loads a new copy of the web browser, selects it, and loads the link into it. This is how Webworks' links are set up for pages that open external web sites.

Ta-daaaa! And there you have it.

down with frames!
What about users with browsers that don't support frames? You'll want to do two things: create two versions of your site (one with frames and one without), and provide antiquated users with a link to the latest version of Internet Explorer or Netscape.

You'll need a way to display special "lite" content that will be displayed only by users without frames. This is what the <noframes> tag is for. Anything contained within this tag will be invisible to browsers that support frames.

Remember that frameset page? The <frameset> tag went in the <head>, and the <noframes> content goes in the <body>. (How many HTML tags can you fit in one sentence?) Here's a sample piece of code demonstrating <noframes>::

<noframes> Sorry, but your browser appears not to support frames. You can find the no-frames version of the site <a href="noframes.html">here</a>. To fully experience our site, please download the latest version of Internet Explorer or Netscape Navigator. </noframes>

Put that in the <body> of the frameset HTML page and you're all set!

Click here to go back to the table of contents.