Frames can be a useful addition to any web site. They allow you to display 2 or more web pages in a controlled fashion in your browser window. For example you could use frames to have a consistent menu in one frame allowing you to link to several pages in the adjacent frame
To create frames you must create the page that contains the frames (i.e. is the frameset and will control the frames that the other pages will load into. This will be the page you want to open to see your frames).
Make up a mock folder and create 2 HTML pages which are saved as page1.htm and the other page2.htm.
Now create a frame file as shown below and save as myframe.htm to the same folder
<HTML> <HEAD> <TITLE>My Frame</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC="page1.htm" NAME="LEFT"> <FRAME SRC="page2.htm" NAME="RIGHT"> </FRAMESET> <NOFRAMES> <BODY> Sorry cannot see frames <a href="noframe.htm"> click here for no frame version</a> </BODY> </NOFRAMES> </HTML>
Save this as myframe.htm. Close notebook. Go to the folder and click on myframe.htm.
page1 should open up on the left and page2 on the right like so
page1 .htm
page2 .htm
Lets break the code down
<HTML> <HEAD> <TITLE>My Frame</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> begins frame and sets the width of each of the 2 frames. This can be in % or pixels. If you want to set only the size of one frame you can use * in the other value and the browser will automatically fill the screen e.g. COLS ="120,*"
in the long run pixel values are somewhat safer as % values can dramatically alter a page's display on different screens <FRAME SRC="page1.htm" NAME="LEFT"> this sets the left frame to open with page1.htm the frame is known as LEFT <FRAME SRC="page2.htm" NAME="RIGHT"> this sets the Right frame to open with page2.htm the frame is known as RIGHT </FRAMESET> ends frame set up <NOFRAMES> <BODY> Sorry cannot see frames <a href="noframe.htm"> click here for no frame version</a> </BODY> </NOFRAMES> <NOFRAMES>sets a message to appear to browsers who don't support frames. It is good practice to put a standard link in for non frame browsers (here we link to file called noframe.htm)
Try opening myframe with Frontpage express or netscape composer to see this </HTML>
Now change the <frameset> tag to read <frameset rows ="50%,50%"> keep everything else
When you open this file in browser, page1.htm appears above the page2.htm like so
Here are a couple of useful tricks you can use with frames
border, frameborder, framespacing
Thes 3 attributes allow you to set the no of pixels between frames pixels between each frame or the whole frameset. This can give rise to a seamless frame with no border)
The reason 3 commands exist is good old browser incompatability
It gets worse as frameborder can be set as either yes/no r 0/1. The other 2 are more staight forward just enter a number or 0 (zero)
The default is "1 or yes".
To make your seamless framset bombproof we'd advise something like this
When placed within <frame> tags this either sets a permanent scroll bar ("yes") or prevents one from appearing ("no")
e.g. <frame src="left.htm" name="left" scrolling="no">
the default is "auto"
noresize
add this attribute to <frame> tags prevent people from altering your frame set up by dragging each frame bigger e.g. <frame src="right.htm" name="right" noresize>
marginwidth & marginheight
used in <frame> tags to define the margin around the side (and top and bottom respectively) of individual frames. Only works for internet explorer
bordercolor
This can be used in both <frame> & <frameset> tags. It sets the colour of the borders of your frame. Use either RGB values (e.g. #00FFFF) or allowable color names (e.g."greenyellow") (see our colour guide)
If a your using a page in a frame as a menu and all the links use the same target value then you can replace the target attributes using a command in the <head> tags
e.g.
<head> <base target="yourtargetvalue"> </head>
Don't forget older non-frame browsers
Remember to use <noframes> tags for older browsers. These browsers don't see any of our frame related tags including <noframes> (they're there for frame enabled browsers). So use them to allow a link to a no-frames page
e.g.
<body> <noframes> Sorry your browser doesn't see frames <a href ="noframespage.htm">click here </a> to go to a frames free page </noframes> </body>
HTML