Creating Framed Sites
What Frames are Good For:
Frames divide Web pages into several different regions, or windows, each of which can contain a different Web page. This enables you to present information in a more flexible and useful way. Each region, or frame, has several features:
- It can be given a NAME, allowing it to be targeted by other URLs, i.e. a link from a page displayed in one frame can load into a different frame.
- It can resize dynamically if the user changes the window's size. (Resizing can also be disabled, ensuring a constant frame size.)
Frames enable you to do things that you couldn't do before. For instance:
- Elements that the user should always see, such as control bars, copyright notices, and title graphics can be placed in a static, individual frame. As the user navigates the site, the information in the other frames changes while that in the static frame does not.
- Table of contents are more functional. One frame can contain TOC links that, when clicked, display results in an adjoining frame.
- Frames side-by-side design allows queries to be posed and answered on the same page, with one frame holding the query form, and the other presenting the results.
- You can mix 'n' match: some areas of the site can be use frames, while others don't. Some links from a frame can be loaded in a different frame, while others load in the whole window or in a different window.
Problems Using Frames:
- Older browsers can't display them, nor can non-graphical browsers. It's recommended to always give an alternative way of browsing a framed site. The simplest is to write an alternative non-frames entry page and link to it from the main, framed entry page.
- Different browsers handle them differently: in particular, you have to be careful to include variant forms of the tags so as to accommodate both Netscape and MS Internet Explorer.
- The page downloads more slowly since you are actually downloading several different pages: one per frame.
- It's more complicated to write a framed site.
- It's easy to spoil your user interface by putting too many frames on a page. Not everything doable is worth doing! There has to be a really good reason for using more than two frames, and I haven't yet heard one for using more than three.
- If you load a framed site into one frame of another framed site, the window quickly becomes very user-unfriendly and the user loses some options, e.g. the ability to bookmark the whole site: s/he can only bookmark or print one frame of it.
Nonetheless, frames have become very common, because when used properly they can aid navigation through a site.
Frame Layout
A framed site or area uses two types of Web pages:
- A layout document which describes how to divide up the window display area into frames
- Normal Web documents which are displayed in the different frames.
The pages displayed in each frame are normal HTML pages just like any other. Any page written for a regular site can be displayed in a frame of a framed site (though of course it probably won't fit and you would have to do a lot of sideways scrolling).
The layout document has a basic structure very much like a normal HTML document, except that the BODY container tag is replaced by a FRAMESET container tag which describes the frames that will make up the page. A frame document has no BODY, and no tags that would normally be placed in the BODY can appear before the FRAMESET tag, or the FRAMESET will be ignored. Each FRAMESET must contain a <FRAME> tag for each frame defined.
A <FRAME> tag is not a container so it has no ending </FRAME> tag. the one attribute it must have is: src=the URL of the document to be loaded into it.
So the basic syntax of a layout document is:
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
<FRAME src="onepage.html">
<FRAME src="anotherpage.html"> (as many as you need to
define)
</FRAMESET>
</HTML>
The <FRAMESET> tag:
Defines how to divide the window into a set of frames. It can divide horizontally, into rows, or vertically into columns. So it has 2 attributes, ROWS= and COLS=, only one of which can be specified for a particular frameset. Within the FRAMESET you can only have other nested FRAMESET tags, FRAME tags, or the NOFRAMES tag.
The available space can be divided into rows or columns in terms of either percentages or pixels; in addition, one or more frame sizes can be left for the browser to calculate. Examples:
<FRAMESET rows=*,*> -- divides the space into two equal rows. This is the same as writing rows=50%,50%. If you put a number in front of the '*', that frame gets that much more relative space. "2*,*" would give 2/3 of the space to the first frame, and 1/3 to the second.
<FRAMESET rows=20%,*,50> -- specifies 3 rows. The top one will be 20% of the window size, the bottom one will be 50 pixels high whatever the window size, and the middle one will take up all the remaining space.
<FRAMESET cols=140,*> -- specifies 2 columns. The left-hand one will be 140 pixels wide and the right-hand one will take up the remaining space.
If you're calculating in percentages, you must either make sure that they really do add up to 100% (!) or leave one frame undefined (*). If you specify pixels for one of the frames, you have to leave at least one other frame undefined. Since you don't know the size of the user's window or screen resolution, there is no way of adding up pixels and arriving at 100% of the window size.
To divide the space up into rows and columns together:
This is easiest to explain by example. Let's say you want this:
Here will be your logo |
|
| Here you want a vertical contents bar. Let's call it contents.html | And here you want your main screen. We'll call it main.html |
The browser analyses the layout, as always, from the top left. So the first division you have to define is two rows; the second row is divided into two columns. You end up with the following code:
<HTML>
<HEAD>...</HEAD>
<FRAMESET rows=20%,*>
<FRAME src="logo.html">
<FRAMESET cols=20%,*>
<FRAME src="first.html">
<FRAME src="second.html">
</FRAMESET> -- the end of the second frameset
</FRAMESET> -- the end of the first frameset
</HTML>
The <NOFRAMES> tag
- Is a container: between <NOFRAMES> and </NOFRAMES>
you place alternative content for browsers that
cannot handle frames. A frames-capable browser
ignores all tags and data between <NOFRAMES>
and </NOFRAMES>. A non-frames-capable browser
ignores the <FRAMESET> and <FRAME> tags,
which it does not understand, also ignores the <NOFRAMES>
tags but displays the ensuing text. You can put a
whole alternate page in the <NOFRAMES> area; or
you can put a message such as:
<NOFRAMES> If you see this message, your browser does not support frames. Download Netscape or go to our unframed site.</NOFRAMES>
That's enough to write a layout document for a framed site or area. If you want more control over the look and behaviour of the frames, go on to the Next Frames tutorial.
|
 |
 |
 |
 |
