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: - Continually display components without refreshing them. This makes frames an ideal application for a navigational bar that appears throughout your site.
- 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: - Open an ascii text file.
- Enter HTML document and header tags as usual:
Creating Framesets
- 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
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:
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. 
