Forward Back

Frames

Home

Advanced HTML
Javascript
The Tools
Promoting the page
Making Money
Contact Me 		Frames are used to divide a page into sections that scroll on their own. A simple frames page that divides the screen into two sections would look like this:
<Frameset Cols="10%,*">
<Frame src="menu.html" frameborder="no" framespacing="0" 
border="0" marginheight=0 marginwidth=0 >
<Frame src="main.html" Name="main" marginheight=0 
marginwidth=0 frameborder="no" framespacing="0" border="0" >

</Frameset>

<noframes>
<body>
<P>Get a better browser, have you been in a cave?

</body>
</noframes>

Plus the <HEAD> and <BODY> tags.

Ok, lets look at what this all means.

The <Frameset> lets the page know that this is a frames page. The Cols attribute defines the columns of the page. The page above has two columns, one of which takes up 10% of the screen, and the other takes up the remaining 90%. That's what the * means, anything left over goes to this column. You can define the size of a column by percent of the screen, or by pixels, like this: Cols="150,*"> which means that the left column is 150 pixels. The first number is the leftmost column, and then they move to the right.

<Frame> tag defines how a frame is made. The src attribute is what .html page loads into the frame. The name is used to load a link from one frame to another frame, which I'll describe later. Everything else, marginheight=0 marginwidth=0 frameborder="no" framespacing="0" border="0" is needed to make a frame without borders in IE and Netscape. You can also have a scrolling attribute set to yes/no/auto, which tells the frame whether or not to have scroll bars.

Now, if you put a link in the left frame, you'll notice that the link loads into the small frame. To make it load in the main frame, you need to make your links like this: 

<A href="http://www.yahoo.com" target="main 
(the name you gave the frame in the frameset tag)">Yahoo</A>

Their are other targets you can use to do different things:

The <noframes> tag starts a regular HTML page. Make sure you have the <Body> tag inside it. Then you can add any HTML you want.

A more complex frames page looks like this:

<frameset cols="33%,33%,33%">

     <frameset rows="*,100">
     <frame src="page1.html" NAME="index">
     <frame src="page2.html" NORESIZE>
     </frameset>

     <frameset>
     <frame src="main.html" NAME="main">
     </frameset>

     <frameset rows="50%,50%>
     <frame src="page3.html">
     <frame src="page4.html" SCROLLING="no">
     </frameset>

     </frameset>

     <noframes><body>
     This page requires a frames-enabled browser!
     </body></noframes>

Notice that their are now <frameset row=> tags. They works the same way as <frameset col=> but these frames go horizontally instead of vertically. You need to do it like that whenever you have more than two frames.

Thats all their is to frames, if you have questions, mail me at tkeer@cvn.net.

1