For instance, assume your homepage had five files: index.html(the file that loads first), images.html(a
photographs page), resume.html(resume page), hobby.html(stuff about your hobby), friends.html(short takes on
your friends). Normally, you would link to these four other pages from your index.html. When someone clicks
on the link, the browser loads that page and displays it. Now, the only way you can get back to your
index.html is by either hitting the "back" button on your browser or by providing a link back to your
index.html in the new page. For instance, if someone was really impressed with your animal skull collection
and had to see your pictures, they'd have to go to index.html, search for your pictures link and then click
on it[hobby.html to index.html to pictures.html]. Not too bad considering it's only two clicks away. But if
you were to have any luck with presenting a significant amount of information on the net, it's imperative
that you don't bury your stuff six or seven clicks away. Frames help you provide an intuitive navigational
interface. They also help in achieving some design and information presentation objectives.
- Divide the window into frames(blocks). In above example, the window was divided into 2 frames.
- Give each frame a name.
- Specify which page will be loaded into which frame initially.
<frameset cols="20%,80%">
The above statement divides the page into two columns. The first column occupies 20% of the screen width
and the second column occupies the other 80%. This statement divides the page into three columns. The first column occupies 100 pixels of screen width,
the second occupies another 100 pixels and the third occupies whatever is left over. Pay attention to the
three units used: the "%", the "px"(pixel) which is the default unit, and the "*" which means whatever is
left over. Each of these columns can now load a different HTML document.
Splitting the page into columns is the first step. The second step involves having to
decide if you want to further divide any particular column by rows. Take a look at the code
below:
<frameset cols="20%, 80%"> The first column is further divided into two rows by another frameset tag. The first row occupies 80% of
the height and the second row occupies 20%. The <frame src> tag is used to identify the source of the
HTML document for these frames. The name attribute used in each of these tags will be explained in
just a
while.
The second column is left as is, with the only row defined occupying all the space. Here are a few options for loading a new page.
<html>
<frameset cols="100,100,*">
<frameset rows="80%, *">
<frame src="examples/e12menu.html" name="menu">
<frame src=examples/e12logo.gif name="logo">
</frameset>
<frame src="examples/e12main.html" name="main">
</frameset>
.
.
The target attribute
If you had a link on one of your frames(let the name of the frame be "J") and you wanted the page to load on
another frame(called "K"), here's how you'd do it. Insert the following link in the HTML document loaded in frame J: <a
href=pagename.html target=framename>. pagename.html is the page your link is supposed to load. For achieving our objective, the
framename would be "K" because we want the page to load in frame K.
.
.
Other Attributes
There are a few other attributes that can help you make your frames
what you want them to be. Unfortunately, this is also when the differences between Netscape
and IE
come up again.
First we will discuss the attributes for the <frameset> tag. For instace, the attribute
frameborder=0 for the tag frameset causes the bars between frames to dissapear in Netscape
(leaving a space between the frames where the bar used to be, by bar I mean the thin gray bar
between frames, not the part that scrolls a frame). This has the side affect of not allowing
the viewer to resize the frames. However, in IE things are different. The gray bars on gone
and there is a space between the frames, but it is a smaller space than the bar was. Also,
you can still resize the frames. If you set framespacing=0 (on the frameset tag) it does
nothing in Netscape but in IE pushes the frames together very slightly and no longer allows
the resizing of the frames. The attribute border for the tag frameset kinda ends up doing
both at once. If you set border=0 you take out the gray bar and make the frames go right next
to each other (no space inbetween). Also, the viewer can't resize the frames. Luckily, this
is the same in Netscape and IE (assuming you put the border=0 on all your frameset tags,
otherwise the two canbehave differently). Something that is weird is if you have both border=0
and framespacing=0 in IE you get the thing gray separating bars, but the viewer can't resize
the frames. In Netscape, the border=0 attribute causes the framespacing attribute to be
ignored. Combining border and frameborder is the same as just border in both Netscape and IE.
Setting both frameborder and framespacing to 0 in IE is the same as border=0 in IE (Netscape
ignores framespacing).
Now, for the attributes on <frame> tag. Border=0 takes the border away but leaves the
spacing in Netscape while doing nothing in IE. frameborder=0 does the same as border=0 in
Netscape while in IE it now looks like it does in Netscape. Framespacing does nothing by
itself in either browser. Combining frameborder and border is the same as just having
frameborder. The other combinations pretty much don't change things from those listed (feel
free to try them out)
Confusing huh? Best way is to try it in both and see what happens. Try numbers other
than 0. There are other attributes (like marginheight and marginwidth for the frame tag) that
are not very important. Feel free to search the web for other examples about frames. There
are also differences between versions. These notes are based on Netscape 4.76 and IE 5.5
which are the current versions.
The half truth!
Be careful not to go to far into the frames idea. Having more than 4 frames is usually a
bad idea. A lot of times 2 or 3 is all that is needed. A common thing to do is have a
small (say 20%) frame on the left with a menu with links to the different things on your web
page. If you have too many they get pretty small. The secret is to try it and see.
.
.
Get behind the wheel!
Type out the following stuff. Try some of your own
settings and frame options. Notice that the closing </frameset> tag for the
first column's row definition is missing! Try the same code with the closing tag in
place. Does it still work? Also try it using the attribute border=0 in the
outer frameset tag (and don't worry about the actual location of the
columnbar, menu, logo and main files).
<head><title>The great frame!</title></head>
<frameset cols="4%, 20%, *">
<frame src="examples/e12columnbar.html" name="columnbar">
<frameset rows="75%, *">
<frame src="examples/e12menu.html" name="menu">
<frame src="examples/e12logo.gif" name="logo">
</frameset>
<frame src="examples/e12main.html" name="main">
</frameset>
</html>
.