August 01
Frames
PLEASE NOTE FRAMES DO NOT WORK ON MSN SPACES.
Introduction
 |
| Screenshot 1 |
So, what are frames? Well they allow you to put more than one HTML document in one window of your Internet Browser. See screenshot 1 for an example. This can mean you have one 'frame' for your navigation page, and one for your main page, or whatever tickles your fancy. They do NOT work on MSN Spaces at the moment unfortunately. Please do not just go in head first when using frames, learn some HTML first because a badly produced web page based on frames doesn't just look bad, it looks BAD! As well as that search engines hate them! Well, best get on with the tutorial, so here goes:
Basic Frameset
You will need to create a page (normal index.html), this will store your information about the frames, it will not display any text or images. It is also here to allow your users to view an alternative page if their browser doesn't support frames (presuming you create one). The HTML you will need is shown below:
<html>
<head>
</head>
<frameset cols=20%,80%>
<frame src="nav.html" name="nav">
<frame src="main.html" name="main">
</frameset>
<body>
</body>
<noframes>
<a href="altmainpage.html">Click Here</a>
</noframes>
</html>
Explanation of the above code:
Everything in BOLD is about explaining the frames. Inside the bold text you can see there are the code frameset cols=20%, 80%, this states that there are two columns, one will be 20% and the other will be 80%, you can obviously change these numbers to whatever you want and add as many numbers as you want (but they should add up to 100%). Next in the bold text there are the links of the documents you are using, you just change the nav.html or main.html to whatever page you want. There are also names given to the individual frames on your site, this is for things like links (see below)
Everything that is UNDERLINED states what your browser should display if your users Internet Browser does not support frames, or if the user has turned them off. If you have created a frames page I would recommend you also create a normal web page displaying all the pages in the frames in one document. If you look you can see the coding <a href="altmainpage.html>Click Here</a>, this is just a link, change altmainpage.html to whatever you want. If you want to see an example of a page with frames CLICK HERE (Your browser must support frames).
Links
When producing links on your frames page you must recognise that in some cases you will be expecting your page to display the link in another window e.g. If you have a navigation page and main page when a user clicks on a link in the navigation page you would want the user to be displayed the result of the link in the main page. This is why you gave each frame a name (in yellow above). When you produce a link just add the coding target="main" to your link e.g. <a href="downloads.html" target="main">LINK</a>, changing the main to whatever the name of the page you want to display the link in is.
Fine Tuning
- How Do I Get Rid Of Borders?
- In the above coding you will see <frameset cols=20%,80%>, just change this to <frameset cols=20%,80% border=0 frameborder=0 framespacing=0>
- How do I get rid of scroll bars in my frames?
- In the above coding you will see <frame src="nav.html" name="nav"> and <frame src="main.html" name="main">, just add scrolling=no e.g. <frame src="main.html" name="main" scrolling=no>
- How Do I Make Sure People Don't Get Stuck In My Frames?
- When you are browsing and come across a page with frames there's nothing more annoying than being 'locked' in the pages frames. A way to get out of this is to add target=_blank to you link, instead of target="main", this will open your link in a new window (useful in MSN Spaces as well)
- How To Se Exact Widths For My Frames
- Instead of putting a % sign in the sizes e.g. <frameset cols=20%,80%>, just put numbers e.g. <frameset cols=160, *> (the * means infinite, so the rest of the window is taken up by the other frame)
- How To Add 'Row' Frames
- <html>
<head>
</head>
<frameset rows=20%,80%>
<frame src="nav.html" name="nav">
<frame src="main.html" name="main">
</frameset>
<body>
</body>
<noframes>
<a href="altmainpage.html">Click Here</a>
</noframes>
</html>
- You may notice above I have changed cols to rows, stating that I am now defining how large each row is. CLICK HERE for an example.
- How To Add Both Rows And Columns To Your Frame Page
- <html>
<head>
</head>
<frameset rows=100,*>
<frame src="logo.html" name="html">
<frameset cols=160,*>
<frame src="nav.html" name="nav">
<frame src="main.html" name="main">
</frameset>
<body>
</body>
<noframes>
<a href="altmainpage.html">Click Here</a>
</noframes>
</html>
- CLICK HERE for an example.
- Another Way To Add Rows And Columns To A Web page
- <html>
<head>
</head>
<frameset cols=160,*>
<frame src="logo.html" name="html">
<frameset rows=100,*>
<frame src="nav.html" name="nav">
<frame src="main.html" name="main">
</frameset>
<body>
</body>
<noframes>
<a href="altmainpage.html">Click Here</a>
</noframes>
</html>
- CLICK HERE for an example
Well, that's your lot for frames. But, please remember, frames can be a great thing to use, but, used in the wrong way can be a disaster! Use them at your own peril!
Tools 
Help
