Frames - what are they ? A frame is a way of dividing an HTML page up into various 'bits' so that one or more can remain on the screen while the contents of the others change at will, well, at the user's will !
Thierry Godefrey's web site (check it out here) is a good example of this. Along the top there is a button bar to allow you to choose which part of his web site you wish to see, and underneath it, there is the main content. Regardless of which button you click, you always see the buttons.
Although many people use frames and the HTML 4 standards defines them, the W3C (WWW Commission) think that frames are a bad thing. Not only that, many implementations of frames are not done very well. (This is according to 'those in the know' and not by me. I have seen some really bad websites whether in frames or not - check out mine for example !) As frames became part of the standards for HTML only at release 4. Some older browsers don't support them.
Having given the warning, lets do some frames. There are two new tags to learn here, the first is <FRAMESET> and the second is <FRAME> lets create a frame page one step at a time.
The first stage is to prepare a default HTML page to appear in each frame. Well, after you have decided what your framed page is to look like that is ! We shall design a page which looks like the page on the end of this link. Click here to see it in all its glory ! (Press the back button to return here)
So we have decided to have two frames, in a vertical side by side sort of orientation - COLUMN oriented. The narrow frame will be called 'SideBar' and the other frame is called 'BigScreen'.
Create a new file called frames.html and put the following into it :
<HTML>
<HEAD>
<TITLE>Frames example</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Spotted anything yet ? There are no <BODY> tags ! When you are creating a frameset the top level document (which is the one the people will link to or read on your web site etc) has no BODY to speak of. All it does is define the frameset, the frame names and which other HTML files to display in each of the defined frames.
Time to define our frame names. Add the following code (in red) to the file we are editing :
<FRAMESET>
<FRAME NAME="SideBar" SRC="sidebar.html">
<FRAME NAME="BigScreen" SRC="bigscreen.html">
</FRAMESET>
So we have added a <FRAME> tag and specified both a NAME and SRC attribute. The NAME attribute is easy and simply defines a name for this particular frame. The SRC attribute is the one which defines the name of the HTML file to appear in this frame, when the initial framed page is displayed.
So in our example, we have a frame called 'SideBar' and a frame called 'BigScreen' (capitals are allowed as these are not filenames) but remember, the frame names are case sensitive. In each frame, we have an HTML document to display, initially, each document has the same name as the frame.
You don't have to specify a SRC attribute but the frame will be displayed empty if you don't.
Ok, so far we can't actually display this file because we have not defined how the frameset is to appear in the browser.
We need to tell the browser how wide (or high) the various frames are in our frameset. Add the following code (in red) :
<FRAMESET COLS="20%,*">
<FRAME NAME="SideBar" SRC="sidebar.html">
<FRAME NAME="BigScreen" SRC="bigscreen.html">
</FRAMESET>
So we are now adding a COLS attribute to the FRAMESET tag. This says that we have a number of columns, the first is defined as being 20% of the browser width, and the second is defined as being the remainder. The asterisk defines 'whatever is left', so in this case, our second frame is 80% of the browser width.
The order you define the FRAME tags in and the order of the COLS attribute for FRAMESET are connected, so beware. They are defined in the order you state. This means, in our example, the first frame is called SideBar and is 20% of the browser width. The second frame is the remainder of the browser width and is called BigScreen.
Save that file and create something for sidebar.html and bigscreen.html. Stick anything you like between the <BODY> tags just so that you can see it when each frame is displayed. Save these two files in the same place as frames.html, load up the browser and open frames.html in it. Nice or what ?
If you have problems making something up for sidebar.html and bigscreen.html, try the following :
<BODY>
Hello, I'm a frame !
</BODY>
That's about it for simple framing for a frameset which has two columns. What about one like Thierry's where he has two 'rows' of frames.
Load frames.html back into your editor, and change the COLS attribute to ROWS, save it and hit refresh in the browser, isn't life great - we now have rows instead of columns. (Depending upon what you entered in the two html files, you might need to adjust the 20% figure !)
We have started simple and created two rows (or columns) of frames. What if we want another ? Change frames.html as follows, as usual, you do the red bits ! I've changed back to COLS for this example too.
<FRAMESET COLS="20%,20%,*">
<FRAME NAME="SideBar" SRC="sidebar.html">
<FRAME NAME="BlankFrame">
<FRAME NAME="BigScreen" SRC="bigscreen.html">
</FRAMESET>
Notice that each 20% frame is the same size ? This is because when you specify the widths as a percentage, you get a percentage of the browser window width and not a percentage of the browser window width remaining after the other frames have been created. This is quite obvious or it would be difficult for the HTML coder to work out the requirements. So the first two frames are both 20% of the browser window and the third is the remaining 60%. So far so good.
What if you wish to specify the frame widths in pixels ? Easy, just do it. Change the code as follows :
<FRAMESET COLS="150,100,*">
<FRAME NAME="SideBar" SRC="sidebar.html">
<FRAME NAME="BlankFrame">
<FRAME NAME="BigScreen" SRC="bigscreen.html">
</FRAMESET>
Or even, mix and match percentages and absolute values !
<FRAMESET COLS="150,50%,*">
<FRAME NAME="SideBar" SRC="sidebar.html">
<FRAME NAME="BlankFrame">
<FRAME NAME="BigScreen" SRC="bigscreen.html">
</FRAMESET>
So in this case we have a frame which is 150 pixels wide, another which is 50% of the browser width, not the width minus 150 - beware, and the rest for the third frame.
What do we do to make one frame twice as wide as the other ? Try this :
<FRAMESET COLS="150,2*,*">
<FRAME NAME="SideBar" SRC="sidebar.html">
<FRAME NAME="BlankFrame">
<FRAME NAME="BigScreen" SRC="bigscreen.html">
</FRAMESET>
When there are more than one asterisks, the remaining space is divided equally between them. If one of the asterisks has a number in front, this is a multiplier, and that particular frame will be than much bigger than the remainder. In the above example, we have one frame 150 pixels, the next frame is twice as wide as the third and between the two, they share the remainder of the browser window width.
For browsers without frames, or those who have turned them off, the HTML language provides some help. Add the following code to your HTML and see what happens :
<FRAMESET COLS="150,2*,*">
<FRAME NAME="SideBar" SRC="sidebar.html">
<FRAME NAME="BlankFrame">
<FRAME NAME="BigScreen" SRC="bigscreen.html">
<NOFRAMES>
<H3>SORRY</H3>
<P>Your browser is either unable, or configured not, to show frames.</P>
</NOFRAMES>
</FRAMESET>
Then try it out in your browser. Doesn't look any different, but if you turn off frames and refresh, you will see the message instead of the frames. A nice touch.
Scary stuff coming up. So far we have kept things simple and stuck with a couple of frames and both are the same orientation ROWS or COLS. Lets return to the original frameset which looks like this :
<FRAMESET COLS="20%,*">
<FRAME NAME="SideBar" SRC="sidebar.html">
<FRAME NAME="BigScreen" SRC="bigscreen.html">
</FRAMESET>
Lets split the second frame in two, but this time, vertically, like this. This is the code for how it is done :
<FRAMESET COLS="20%,*">
<FRAME NAME="SideBar" SRC="sidebar.html">
<FRAMESET ROWS="*,2*">
<FRAME NAME="BigScreen" SRC="bigscreen.html">
<FRAME NAME="BottomScreen">
</FRAMESET>
<NOFRAMES>
<H3>SORRY</H3>
<P>Your browser is either unable, or configured not, to show frames.</P>
</NOFRAMES>
</FRAMESET>
Because we want to split the original 'BigScreen' frame in two, we need to define it as a separate frameset because it is being split 'the other way' (ie, as ROWS and not as COLS). So we have the embedded <FRAMESET ROWS="*,2*"> line. This says that there will be two frames and that the first will be half as tall as the second. You have to create a new frameset each time you want to change the 'direction' of the splitting of the frames - from ROWS to COLS or vice versa.
Next up, we name the two frames, the first is left as the original 'BigScreen' and the second is called 'BottomScreen'. There is a source file specified for BigScreen (as before) but nothing for BottomScreen.
Finally, we finish off the embedded frameset with </FRAMESET> and this is inserted before the <NOFRAMES> tag for the main frameset.
OK, we have a number of frames dotted around our browser, each can display a single HTML document, what happens when the user clicks on a link ? Well, the use of frames means we have to tell the browser which frame is to be used as the target for the link. This means, when the user clicks on a link, it is displayed in that specific frame. Now you know why each frame must have a name !
Here is how it is done :
<A HREF="lesson_one.html" TARGET="BigScreen">Tags & Attributes</A>
As before, there is the HREF attribute to define the file to be linked to, but now we have added the TARGET attribute to specify the frame name that gets the file to display. And that is how simple it is.
Sometime in a previous lession, I mentioned that in most browsers, you can select VIEW then SOURCE to see the HTML source that makes up a page. If you do this while looking at a framed page, all you will get is the source for the top level document. To see the source in each frame, you need to right click in the appropriate frame, then select VIEW SOURCE or VIEW FRAME SOURCE to see it. Just a point to beware of.
There you are surfing the information cul-de-sac that is the WWW. You come across a frames based web site and browse around for a bit. Then you type a new URL (or click a link to another site) and what happens ? The site you want is not frames based, but it appears in one of the frames from the previous site. What a major pain. If I hit this problem, I tend to hit the HOME button on my browser - which I have configured as a blank page - and then try again. This gets rid of the frames and stops the problem.
If you do hit the above problem, but persevere anyway, don't try adding it to your bookmarks ! This bookmarks the frame page and not the one you really want.
By default Netscape & IE display each frame with a margin of 8 pixels around the contents of the frame. You can change this with the MARGINWIDTH attribute for the FRAME tag, which changes the space on the left and right margins. Both will be the same - you cannot set a different left and right margin. The MARGINHEIGHT attribute sets the spacing for the top and bottom margins. These can be different from the MARGINWIDTH settings, but again, top must be equal to bottom. Both MARGINWIDTH and MARGINHEIGHT take a single parameter which is the required size in PIXELS, you cannot specify a percentage here. Any specified or default margins are 'transparent' and will always appear the same colour as the document's background colour. Each frame in your page can have a different setting from all the others - if that is what is required.
When a frame is too small to show an entire document, you get scrollbars on the bottom and/or right side of the frame. If you decide that this is not a good thing, use the SCROLLING="NO" attribute for the individual FRAME tags. This means that the user will not be able to scroll around if your document doesn't fit the frame. Of course, you might really like scrollbars, and by specifying SCROLLING="YES" you get them on all the time regardless of the size of the document & frame.
The default border width between frames is 5 pixels. This is the nice 'bar' type thing that appears between each frame. Did you know that you can drag this with the mouse and make each frame bigger or smaller to your own heart's desires ? The BORDER attribute for the FRAMESET tag can adjust the width of these borders. Beware, Internet Exploder doesn't show a border if the number is less than 5. If you specify the BORDER attribute on the FRAMESET tag, all borders in that frameset get sized appropriately. For example :
<FRAMESET BORDER="10" COLS="25%, *">
<FRAME NAME="Frame1">
<FRAME NAME="Frame2">
<FRAME NAME="Frame3">
</FRAMESET>
causes frames 1, 2 & 3 to have a 10 pixel wide border. You cannot set border sizes on individual frames. The following WILL NOT work :
<FRAMESET COLS="25%, *">
<FRAME NAME="Frame1" BORDER="10" >
<FRAME NAME="Frame2">
<FRAME NAME="Frame3">
</FRAMESET>
Having a border causes most browsers to draw a sort of 3d border between frames. As mentioned above, this can be used to adjust the frame sizes to suit your requirements. If you specify a FRAMEBORDER="0" attribute, then this 3d effect is not drawn. The figure supplied, if less than the BORDER width means no border to be drawn, and if bigger appears to cause the border to show (when they are equal) but acts like a zero setting if too big ! For simplicity specify FRAMEBORDER=0 if you don't want the 3d border and leave it out if you do !
If you do decide to remove the border in this way, the user can still drag the frames around as if the border was drawn.
Still with borders, you can change the colour of the borders by using the BORDERCOLOR attribute. As with all colour type attributes, you can specify a predefined colour name (BORDERCOLOUR="red" for example) or a hex value (BORDERCOLOR="#FF8020" for example). If you use this attribute on the FRAMESET tag, all borders in the frameset will be changed. If you use it on the FRAME tag, only that frame will be affected. Beware of this, because the browser may draw other frame borders over the top of your one, and you can end up with a single border in the requested colour.
Remember I mentioned that borders, whether showing or not, allow the user to resize the frames ? Well, you can stop this by adding a NORESIZE tag to the FRAME tag. This will stop those nasty users from fiddling with your special designs ! The NORESIZE attribute has no parameters, it just looks like this :
<FRAMESET BORDER="10" COLS="25%, *">
<FRAME NAME="Frame1">
<FRAME NAME="Frame2" NORESIZE>
<FRAME NAME="Frame3">
</FRAMESET>
Who said frames were difficult ?
| Previous Lesson | Home Page | Next Lesson |