Web Shoppe | HTML

Frames

A frame is a webpage in which the browser screen is separated into two or more parts, with different content in each part. Frames are a little hard to understand at first, because each "part" is a whole different HTML page, brought together in the same window.

Say you want a frameset with two different sections, one for the menu and one for the content. Like this:

content

To do that you would make a different page for each section. Two pages, one for the menu, and one for the content. You don't need to worry about making them both fit into one browser window, they will wrap to fit automatically.

To put the two pages together, we make one more page, with code like this:

<html>
<head>
<title>whatever you like</title>
</head>

<frameset cols="20%,80%">
<frame src="menu.html" name="menu">
<frame src="content.html" name="content">
</frameset>

</html>

When you call this page up in your browser, it will bring together the two other pages you made into a frameset. To see an example, click here. A new window will pop up.

Notice how if you click on a link in the "menu" frame, it opens up in the "content" frame. This is called "targeting" the links, and is why we give each frame a different name. To open a link from the menu frame into the content frame, we would use this code:

<a href="aboutme.html" target="content">About Me</a>

Where it says target="content", we would change "content" to whatever the name is of the frame we want the link to open up in. Otherwise, all the links would just open up in the menu frame.

Now, what does the rest of the frame code mean? cols="20%,80%" means that we want two columns, one 20% of the screen wide, the other 80% wide. You can put whatever percentages you like. You can also use pixels, like this:

<frameset cols="100,*">

Here, the first column is 100 pixels wide, and the second column is "*" wide, which means "the rest of the screen."

Here are a few more ways to use frames. The parts in bold are the parts you would change.

<html> <head> <title>whatever you like</title> </head> <frameset rows="20%,80%"> <frame src="top.html" name="top"> <frame src="bottom.html" name="bottom"> </frameset>
</html>

top
bottom

<html> <head> <title>whatever you like</title> </head> <frameset rows="20%,80%"> <frame src="top.html" name="top"> <frameset cols="20%,80%"> <frame src="left.html" name="left"> <frame src="right.html" name="right"> </frameset> </frameset>
</html>

top
left right

<html> <frameset cols="50%,50%"> <frameset rows="80%,20%"> <frame src="big.html" name="big"> <frame src="left.html" name="left"> </frameset> <frameset rows="40%,40%,20%"> <frame src="top.html" name="top"> <frame src="middle.html" name="middle"> <frame src="bottom.html" name="bottom"> </frameset>
</frameset> </html>

big top
middle
left bottom

Tips & Tricks

To force the page to have no scroll bar, no matter what the size of the frame, add scrolling="no" to the <frame> tags.

To prevent people from resizing your frames, add noresize="yes" to the <frame> tags.

To get rid of the margins, add marginwidth="0" marginheight="0" to the <frame> tags.

To change the color of the borders around the frames, add bordercolor="red" to the <frameset> tags. Change "red" to whatever color you like.

To get rid of the borders around the frames, add frameborder="0" border="0" framespacing="0" to the <frameset> tags.

To link a page to the whole browser window, rather than to a specific frame, add target="_top" to your <a href> tags.

To learn about In-Line Frames (a frame within a normal page), click here.