Framesets are not recommended if you want search engines to be able to read the content within your site, used well these can look nice but you probably won't get good search engine rankings.
The best way to understand frames would be to think of them as tables, the properties are basically the same, they both use rows and columns. You open a frameset by using the <frameset> tag, remember you must close this tag once you have finished (as with all other tags), </frameset>. Inside the frameset tag you use the attribute cols and rows. You put your frameset code inside the <head> tag. E.G.
|
<html> <head> <frameset cols="100%" rows="80 , *"> <frame name="top" src="/img_articles/9082/top.html"> <frame name="bottom" src="/img_articles/9082/bottom.html"> </frameset> </head> </html> |
Explanation
What this code is saying is, the columns of the frameset will stretch across the whole of the page, this is determined by the code cols="100%". The next part is saying that we will have 2 rows, one row being 80 pixels in height and the next filling the rest of the page, the asterix * means that the row will an unlimited amount of pixels and will fill the rest of the screen. rows="80, *", you must separate each row size with a comma. To see this code in action click here.
Creating more rows and columns is easier than you may think, in the code given above if you change the cols="100%" to something like cols="100,*,100" then this will give you three columns, the first (left) will be 100 pixels wide and the one on the right will also be 100 pixels wide leaving the middle column an unlimited amount filling the rest of the page, but in order to do this you must change rows="80,*" to rows="100%". You must change this because you cant have three columns and three rows using this code, I will show you how to do that later on. Click here to see the three column frameset in action. The code used to make this was:
|
<html> <head> <frameset cols="100,*,100" rows="100%"> <frame name="left" src="/img_articles/9082/left.html"> <frame name="middle" src="/img_articles/9082/middle.html"> <frame name="right" src="/img_articles/9082/right.html"> </frameset> </head> </html> |
To create rows inside each of the columns you have to open a new frameset after the frame tag, sounds more difficult than it actually is, but the best way to explain is to show you examples. E.G.
|
<html> <head> <frameset cols="100,*,100" rows="100%"> <frame name="left" src="/img_articles/9082/left.html"> <frameset rows="50%,50%"> <frame name="top" src="/img_articles/9082/top.html"> <frame name="bottom" src="/img_articles/9082/bottom.html"> </frameset> <frame name="right" src="/img_articles/9082/right.html"> </frameset> </head> </html> |
You can see in this code that we have three columns, we have left.html but instead of middle.html we have replaced it with two rows, top.html and bottom.html then on the end there's right.html to make up all three columns. Click here to see this code in action. As a better explanation you will see that instead of a third <frame name= we have opened up a new frameset, this frameset has two rows of 50% each (each frame will fill 50% of the page size). Where in the other example we had a middle.html as the center frame we now have these two other frames in its place, you must remember to close the frameset tag after you have stated the other two rows otherwise you will get a very ugly grey box in its place.
Opening pages inside frames
To open up new pages inside the frames you must give a target to your links, on all of your frames you will have given them a name: frame name="right". This frame is called RIGHT so all pages you want to be opened in this page must have the target name right. E.G.
| <a href="/img_articles/9082/page2.html" target="right">Open this page in the right frame</a> |
Putting this code in your left frame page would make a new page open up in the right frame, click here to see a working example of this code. When you give all your frames names you may wish to give them more meaningful names instead of left, right, top, middle ect. Those were only used as examples so you could see where the frames were, more meaningful names could be 'main' or 'navigation'.
To 'break out of' frames and open a page that you don't want to open in one of your frames use the target target="_top".
Extra frameset attributes
Below are a list of extra attributes that can be used in either the frameset tag of inside the frame tag.
noresize="noresize"
This tells the browser can be resized or not, without this code the browser can 'grab' the frame border and move it about.
scrolling=""
This can be either yes / no or auto. No turns off the scrollbars and auto means that scrollbars will only appear if the page is too large for the size of the frame.
frameborder=""
This must be a number, 0 to turn off the borders and make a borderless frameset and number 1 will give you borders on your frameset.
border=""
0 will give a border thickness of none and there will be no gaps between your frames, the higher the number you use the thicker the border will be.
More HTML and CSS: 
