devxlogo

HTML Advanced: Frames

HTML Advanced: Frames

rames let you divide an HTML page into different areas, each displaying different content. If you are using a frames-compatible browser (Netscape Navigator 2.X or IE 3.X or later) you are seeing this section in frames. The table of contents to your left is in one frame. The words you are reading right now, are in another frame.





Designing with Frames
Frames can make your site easier to navigate, cleaner, faster, and more attractive. They can also be overused and ugly. The code you write to create frames is very simple; the real challenge lies in designing with frames.

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
With frames, you can create a user interface to your Web sites. Frames let you:

  1. Continually display components without refreshing them. This makes frames an ideal application for a navigational bar that appears throughout your site.

  2. Define a relationship between pieces of the web page. For example, clicking on a button in one frame can make content appear in another frame. This lets the table of contents control what appears in the content window.

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
Before you start typing frame commands and building a framed page, take a few moments to really look at the components of your site. Some people find it helpful to make an outline or a list. As you review the contents of your site ask yourself:
  • How is the information organized?

  • How will people navigate through the information?

  • Will there be repeated elements?a table of contents? A set of buttons? A graphic?

  • How are the elements related to each other? Do you want certain elements to always appear together?

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
The best uses of frames are relatively simple designs. Typically they have no more than two horizontal and two vertical divisions. Some of the best uses of frames divide the screen into only two parts.

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.

Frames vs. Tables
You can use either frames or tables to create the effect of rows and columns on a page. Use tables when:

  • 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.

Frame Tags





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.

Building Frames
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.

Preparation
You need to build a frameset file in order to use frames. Before you build the file you need to know:
  • How many columns or rows you want
  • What you want to name each row or column
  • What width or depth each will be
  • What content will first appear in each column or row.

Sample Frameset
In the frameset file, the frameset tags take the place of the body tag. There is no body tag in a frameset file. This is the frameset file we use for the page you are looking at right now:



Building Framesets


     
     

Coding the Frameset
To create the frameset:
  1. Open an ascii text file.
  2. Enter HTML document and header tags as usual:



    Creating Framesets

  3. After the header, instead of entering a body tag, enter the frameset tag:

  4. Complete the frameset tag, defining how many frames are on the page and what their sizes are. In this example, we have created two columns, the first is 100 pixels wide and the second is as wide as the remainder of the browser window:


  5. Enter a frame tag for each row or column. In the frame tag you will define how this frame acts, what default content appears in it, and what it is named. It is a good idea to indent the frame tags in your ascii text file, just to help them stand out and make your file easier to read:



  6. After all the frame tags are entered, enter the end frameset tag:

  7. cols="100,*">

It’s that easy to make a frameset!

Using the Noframe Tag
Because not all browsers support frames, you have the option of creating an alternative set of instructions for displaying your site in a non-framed layout. You do this with 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 . Enter the page layout information using normal HTML tags. End the no frame section with the tag .

Targeting Content
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 tag to set a default target for all links in the file. If it is a one time direction of content, you’ll want to use the “target=” attribute of the anchor tag.

Base Tag


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”:


Anchor Tag


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”:


Other Target Options
Most of the time, your target frame will be the name of one of the frames in your frameset. However, there are a few other values you can use for the target attribute. These values work in both the base and the anchor tags.

Making a New Window
If you want the browser to open a new window, make the target be the name of a frame that doesn’t exist. To remember what you’ve done, you might want to make the name something like “new” or “anotherwindow.” For example, when you click on links in a file that contains this base tag, the browser opens a new window for the linked page and leaves the current page on the screen:


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
Every now and then, you may want the framed file to be replaced with another file. For example, you might have an site map you want to display. When people click on Site Map in the Table of Contents, you’d like the Table of Contents to disappear and be replaced with the Site Map graphic. To do this, set your target value to equal _self, like this:


Don’t forget to use the underscore bar before the word self.

Filling the Full Page
You can have the linked page fill the entire browser window, overwriting all frames. To do this, you set the target value to _top, like this:


Again, don’t forget the underscore before the word top.

Filling the Frameset
If you are using a nested frame, you might want to use this setting from time to time. It places the linked page into the current frameset, overwriting all frames within the set. To do this, set the target value to _parent, like this:


If you have only one frameset, the result will be identical to setting the value to _top.

Nesting Frames
Remember, each frameset can specify only columns or rows. So when you want both vertical and horizontal frames on your page, you must nest framesets within framesets.

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:

nested frames

To nest frames:

  1. 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.


  2. Now, define the first frame in the frame set. In this example, this frame is the first vertical column. It will contain the file “chapter1.html” and is named “colA.”


  3. Next, define the second frame in the frame set. The second frame is the second vertical column. But wait, this column is really three rows. Instead of defining it with a frame tag, we’ll define it with a nested frameset that defines the three rows:


    When you are nesting frames, it is a good idea to set them off with extra space and an indent. The space doesn’t make any difference in how the browser displays the page, but it makes it easier to debug and edit your HTML frameset file.
  4. Then, we’ll define each of the rows that are part of this nested frameset.





  5. We end the nested frameset by typing the end frameset tag:

  6. ">
  7. Now we’re back to the columns again, and we define the third and final column:

  8. Finally, we end the first frameset with its matching end frameset tag:











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
One of the most common misuses of frames is using frames just to create the effect of rows and columns. Tables do this better and cleaner. Make sure you’re using frames for something besides page layout. If page layout is all you want, tables are likely to be a better solution.

Problem #2: Too Many Frames
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.

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist