Overview
I'm going to teach you what frames are, how exactly to make them work, and different layouts you can use frames for.
Wait..what are they?
Frames is the code that you use to display more than one web page in your browser at once. The page you are viewing right now uses frames. The Menu on the left is its own web page, the Title at the top is another, and this main part right here is another. Most people strongly suggest not using frames, they're sometimes messy, people'e browsers can get stuck in them, and there are other ways to lay out a page without using frames. Yes I do aggree, but despite this, I still use them. Who knows why.
I'm not trying to scare you or anything, but frames are probably one of the hardest basic HTML codes. You will have to 'tinker' alot. I myself have perfected the art of tinkering. What I mean by that is, if it doesn't work, fix one thing you think it might be. You'll probably run into alot of this, and will probably have to try many different solutions beofre you find one that works. Don't worry, with time you'll get alot better at tinkering.
Getting Started
First, you have to create two web pages. I suggest calling them "main.html" and "menu.html" You don't have to design these pages yet, but I would suggest putting some text in them, for example, in "menu.html" just writing "this is where the menu is" and in "main.html" writing "this is where the main page shows up" or something like that, just so you can tell the two pages apart. You probably already have an "index.html" page. You are going to put your frames code in the index page, however, all of your other HTML is going to go in to you main and menu pages. To further help you understand this concept, look at the pictures below. The first picture is your index page, there's nothing on it, no other HTML besides the frames code. The second picture is your page called menu.html, the third main.html. The last picture is what it looks like when you get it all put together.
Index.html
So, all of this following HTML will go in your index.html page, and for now, it's the only HTML that you want on that page, besides maybe a <head> tag and all that. First I am going to show you how to do frames in coloms, just like the example, where the menu is a sidebar on the left. There are two ways to size your frames, too. Percentages and pixels. We'll start with percentages, which I reccomend using anyways. As usual, copy this HTML into your index.html page, replacing the green text with your own, and if you named your pages something besides main and menu, you're going to have to change that, too. This HTML should go after the head tag, and before the body tag. This is how you determine the size of your frames: See the red number? That's the percent of the screen that the frame on the left(menu.html) will take up. The orange number is the main part of the page. These two numbers should ass up too 100%.
<head>
<title>Ducki On-Line!!!</title>
</head>
<frameset cols=20%,80%>
<frame src="menu.html" name="menu">
<frame src="main.html" name="main">
</frameset>
<body>
</body>
If you don't want a border around your frames, just add a "no border" tag to the inside of the frameset tag, like this: (you can also change that green text if you want your frames to be spaced apart.
<frameset cols=20%,80% frameborder=0 framespacing=0>
If you would rather set your frames at a specific width using pixels, simply put in this code. The * is used for one of the number, it means that that frame will take up the remaining space. Either number can be the *.
<frameset cols=160,*>
If you want your frames horizontally, versus vertically, simply change "cols" to "rows" The red number is the frame on top, and the red one is the frame that will appear at the bottom. The following code will make a oage that has a menu at the top, taking up 20 percent of the window.
<head>
<title>Ducki On-Line!!!</title>
</head>
<frameset rows=20%,80%>
<frame src="menu.html" name="menu">
<frame src="main.html" name="main">
</frameset>
<body>
</body>
If you'd rather have the menu at the bottom, simply flip around your percentages and the order of your frame tags. Like this:
<head>
<title>Ducki On-Line!!!</title>
</head>
<frameset rows=80%,20%>
<frame src="main.html" name="main">
<frame src="menu.html" name="menu">
</frameset>
<body>
</body>