There is an element on the web that is “anti-frame.” These people have some good reasons to discourage frame use. Early implementation of frames had some odd technical quirks that made the reader’s experience awkward. In addition, there were many places where frames were poorly applied and made the page confusing and ugly.
And that’s all the more reason to think about why you are using frames and to explore, through your design process, whether frames are the best solution.
What Frames Do A set of defined frames is called, logically enough, a frameset. The frameset defines each frame’s size, name, and contents. Each frameset can define a group of vertical frames or a group of horizontal frames. Framesets can be nested within each other, which is how you create a page with both horizontal and vertical divisions. You can tell different files to display in a specific frame within the frameset. If you’ve done print design, building a frameset is a little like building a grid. It defines the underlying structure within which information will be displayed. Or, if you’ve done any gardening, it’s a little like setting up a flowerbed into which different flowers will appear in different sections throughout the year. The success of your overall website is related to your underlying presentation structure, so think about your frames carefully.
A set of defined frames is called, logically enough, a frameset. The frameset defines each frame’s size, name, and contents.
Each frameset can define a group of vertical frames or a group of horizontal frames. Framesets can be nested within each other, which is how you create a page with both horizontal and vertical divisions.
You can tell different files to display in a specific frame within the frameset.Planning for Frames
If you’ve done print design, building a frameset is a little like building a grid. It defines the underlying structure within which information will be displayed.
Or, if you’ve done any gardening, it’s a little like setting up a flowerbed into which different flowers will appear in different sections throughout the year. The success of your overall website is related to your underlying presentation structure, so think about your frames carefully.Good Uses of Frames
Often, one of the frames will contain a set of buttons or a table of contents. This frame will seldom vary. It lets readers know what is part of the site and makes it easy for them to jump from one part to another.
- You want an actual table on the page.
- Your page has many rows and columns.
- The row and column layout is unique to that page.
- You always want the entire page to refresh when someone accesses any part of it.
- A large percentage of your audience uses browsers that don’t support frames.
Use frames when:
- One section of the page remains relatively constant. With frames, that section downloads and paints once, then stays displayed.
- You want a cause-and-effect relationship between sections. With frames, you can click on one frame and have something appear in another frame.
- The same layout is repeated throughout most of your site and the items in the tables and rows are in separate files.
- There are a limited number of rows or columns on the page.
You’ll use frame tags in two places.
First, you’ll use frame tags to create the frameset file. The frameset file contains tags that define what types of rows and columns are part of the frame, gives each of those rows and columns a name, and defines which default content files fill each row and column. The frameset file doesn’t contain any actual content?it simply defines the underlying frame grid.
Then, in each of your content files, you’ll use frame tags to tell any linked data where it should display?in the current frame or in one of the other frames in the frame set.
You build a frameset with three simple tags. Click on any of the tags to learn more about it.
- announces that this site will display within frames and begins the frameset definition.
- describes each individual frame. Each frame in your frameset must have a separate frame tag.
- ends the frameset definition.
Coding the Frameset
- Open an ascii text file.
- Enter HTML document and header tags as usual:
- After the header, instead of entering a body tag, enter the frameset tag:
It’s that easy to make a frameset!Using the Noframe Tag
The noframe tag goes immediately after the /frameset tag. If a browser isn’t frame-compatible, it will use this information to display the page instead of choking up on the frame tags.
Start the non-frame description with the tag
An HTML page usually has links to other pages. In a normal, one-window layout, when you click on the link, the linked page replaces the current page in the window. The current window is the target location for the linked page.
A framed document works differently. When you put a document into a frame, you can tell the browser to display linked pages with a specific frame in the frameset.
Here’s how it works: You have a table of contents list in one frame. Whenever someone clicks on a table of content item, the browser reads the link, gets the linked page, and displays the linked page in another frame, leaving the table of contents on the screen, untouched.
You can direct the browser to do this in two ways. If all your links will be opening to the same frame, you probably want to use the
The base tag tells the browser to display all linked file in the specified frame. The base tag has one attribute: target=”frame-name”. The frame-name is the name of the frame into which the browser will display linked files. Remember that you named each frame as part of the frame tag in your frameset? Well, you’ll use these names to tell the browser where to display the files that are linked from the current file.
For example, this base tag tells the browser to display all the linked files in the frame named “content”:
The anchor tag, , creates a link in your page. One of this tag’s attributes is “target=”frame-name”. You can tell the browser to display a particular linked file in a specific frame by including the target within the anchor tag. For example, this anchor tag tells the browser to display the file “design.html” in the frame named “content”:
You can use this tag in a file even when you aren’t using frames. It’s a nice little shortcut for creating a new window on your reader’s screens.Overwriting the Frame
Don’t forget to use the underscore bar before the word self.Filling the Full Page
Again, don’t forget the underscore before the word top.Filling the Frameset
If you have only one frameset, the result will be identical to setting the value to _top.
The mechanics of nesting frames is quite simple. The complex part is designing the frames and their relationship with each other. Here’s an example:
Produces frames that look like this:
To nest frames:
- Create your first frameset. Define either rows or columns. Typically, the one you define first will be dictated by your design. In this example, we define columns first, because the full length column is the first item on the page. These three columns divide the page into vertical thirds.
As with nested tables, the tricky part of nested frames is making sure that each start tag has a corresponding end tag, and that each element in both the original and the nested items is defined.
Common Frame Design Problems
Problem #1: Tables Would Have Been Better
Another common problem is jamming lots of little frames onto the page. The idea seems to be that if two frames are good, seven are better. More than two or three frames creates a very cluttered page. There’s so much noise and so many things going on that your readers will often just give up.
Problem #3: Framed Content Fills Bandwidth
One interesting oversight that some people make is jumping to the conclusion that using frames means you can use lots and lots of graphics. It’s not clear why people make that connection (maybe they are thinking that frames don’t repaint every time?), but frames download just like any other HTML page.
Graphics in frames take just as long to download and paint on the screen as graphics without frames. In fact, if you have two frames, each containing a file with lots of graphics, the reader actually perceives the page as taking twice as long to load.
Problem #4: Frames for the Sake of Frames
One of the things that gives frames a bad rap is the far-too-many sites that use frames…because they can. These sites haven’t thought through the design issues and UI issues involved in using frames. Don’t forget the design process in the rush to show that you know how to create a frame. Unframed pages can work perfectly for many kinds of content.