|
|
| Home | Old Issues | Examples |
Welcome to Nathsite's weekly 'Around the Web in Eighty Kilobytes', a 20-part free guide to building a website of your own, and using the web well.
To stop getting ATWI80KB's, send an empty email to atwi80kb@homepage.com with 'NO MORE THINGIES' as the subject. To look at examples and previous ATWI80KB's, go to http://atwi80kb.homepage.com
AROUND THE WEB IN EIGHTY KILOBYTES 1.19 - 1.20
ATWI80KB 10
June 9, 2000
1) Intro to Frames
2) Frames Advanced
Example
1) INTRO TO FRAMES
When you make a page with frames, you need at least two documents. All the different frames are separate HTML files. The framed page itself is another document. The separate frames are made normally, you can make any HTML document a frame (including a document with frames in it).
The framed document has *no* <body> tag. Instead, there's a <frameset> tag.
<frameset> has a 'cols' attribute, which controls the width and number of horizontal frames. You can enter it in percentage or pixels. Here's how it works:
<framset cols="50%,30%,20%">
This means that there are three frames, one covering half the page, another covering 30% and another covering 20%.
With pixels:
<framset cols="100,300,*">
The '*' is because different computers have a different number of pixels, and '*' means 'whatever's left'. So, the first frame is 100 pixels long, the second is 300 pixels long and the third occupies whatever's left. When using pixels, make sure there's always a '*' and the sum of all the others is about 600 or less.
Another thing you can do is:
<frameset cols="100,300,*,3*>
You can figure out what '100' and '300' mean. The other two frames together occupy whatever's left from the first two frames and the last frame is thrice as wide as the first (you can use any number before the '*' instead of '3'). This doesn't always work, and isn't always a good idea.
You can use '*'s in percentages, too.
To control vertical frames, use the 'rows' attribute instead of the 'cols' attribute. It works the same, except that it controls the number and height of vertical frames.
To choose which HTML documents are which frame, put the <frame> tag between the <frameset> tags. It has a 'src' attribute, in which you just type the URL of the frame's document (you can use absolute or relative URL's, as usual).
eg. <frame src="toolbar.html">
Make one <frame> tag for every frame. Confused? The example will help.
2) FRAMES ADVANCED
Some browsers don't support frames. So, it's a good idea to use the <noframes> tag after the </frameset> tag. Frame-enabled browsers ignore anything between the <noframes> tag and the </noframes> tag, so type a frameless version of your page body here. The <noframes> tag works exactly like the <body> tag.
What if you want to make vertical and horizontal frames?
a.
b.
For this, you'll need another <frameset> tag. For example 'a.',
<html>
<head>
<title>Main Page</title>
</head>
<frameset rows="30%,60%">
<frame src="topthingy.htm">
<frameset cols="50%,50%">
<frame src="left.htm">
<frame src="right.htm">
</frameset>
</frameset>
</html>
For example 'b.', just switch 'rows' with 'cols' and 'cols' with 'rows'.
Links from frame to frame:
To make a link that, when clicked on, loads a document in a different frame, type the 'name' attribute in the <frame> tag you want the file loaded in. The name can be anything, but like all HTML names and other attributes, it can't have spaces in it. This attribute shouldn't start with an underscore, because of the special targets explained below.
eg. <frame name="main">
In the <a> tag, type the 'target' attribute, in which you type the name of the frame you want to load the page in.
eg. <a href="nextpage.htm" target="main">
There are a few values of 'target' that do special things, like '_top' which gets rid of all the frames and loads the page in the whole window.
'_blank' opens a new window and loads the page in it. '_self' loads the page in the same frame as the link, and is default. '_parent' is sort of useless.
These special targets are case sensitive.
BTW, you can use images as <frame src> instead of HTML files.
eg. <frame src="sandwich.gif">
Add the image 'width' and 'height' attributes in the <frame> tag. You'll need to control the <frame> 'width' and 'height' the old way. The image probably won't fit properly, so:
- add the 'scrolling=no' attribute to your <frame> to get rid of scrollbars. This can be done for any frame, not just ones with images as the src.
- Add 'marginwidth' and 'marginheight' attributes and set the both to '1', which is minimum. This can be done for any frame, too.
If this isn't enough, add '8' to the width and height of your frame or add this:
(half of frame border width + 1) x 2
You can adjust the thickness of the line between frames with the 'border' attribute, like this:
<frameset cols="25%,75%" border=0>
You can turn off borders for one <frameset> without affecting the others like this:
<frameset cols="50%,50,*" frameborder=0> Border color is adjusted with the 'bordercolor' attribute.
There's also a 'noresize' attribute in the <frame> tag which doesn't have any value but means the frame border can't be dragged by the page viewer.
EXAMPLE
Main Page:
<html>
<head>
<title>Frames!!!</title>
</head>
<frameset rows="30%,60%" border=5 bordercolor="#0000FF">
<frame src="up.htm">
<frameset cols="25%,75%">
<frame src="down1.htm" noresize name="left">
<frame src="down2.htm" scrolling=no name="right">
</frameset>
</frameset>
</html>
up.htm
<html>
<head>
<title>Top Thingy</title>
</head>
<body bgcolor="#FFFFFF" text="#0000CC">
TIP: Use as few frames as possible, to avoid a crowded page.
</body>
</html>
down1.htm
<html>
<head>
<title>Left Frame</title>
</head>
<body bgcolor="#FFFFFF">
<a href="up.htm" target="right">Click here!</a>
</body>
</html>
down2.htm
<html>
<head>
<title>Right Frame</title>
</head>
<body bgcolor="#FFFFFF">
<a href="down2.htm" target="left">I'll conquer the frame to the left!</a>
</body>
</html>
That was NOT fun.
See you in a week!
Aniruddh Nath
Email questions to atwi80kb@homepage.com - I'll reply if I have time. I might write stuff from your email in later ATWI80KB's.
NOTE: I'm not responsible for any damage done to your computer because of this tutorial.