Frames
How do I make frames?
Using frames for a website template has always been popular, since they are fairly easy to create, keep your pages well organized and seperate content efficiently on your page. If you take a look at the page you're on right now, this is a frameset. The next few pages will bring you through the steps you need to learn in order to create frames.
Creating Frames
To learn how to create a frame set, we'll start with a basic layout. Take a look at the frames layout below.
The frame above is actually 3 pages. The menu section (black) is one page, the content section (green) is one page, and the index page is what holds it all together. When someone visits the page, the actual page they are viewing is the index page, which wraps the content and menu together. Let me explain...
For the purposes of this tutorial, we'll name the secions above. Let's assume you are creating this frameset on your website. You would have 3 pages ready.
index.htm - the page that the frames code will go on, that holds everything together.
menu.htm - whatever content is added to this page will show up in the menu frame on the page.
main.htm - whatever content is added to this page will show up in the content frame on the page.
Now for the code you would place on the index page to create this frameset...
<html>
<head>
<title>YOUR PAGE TITLE</title>
</head>
<frameset cols=25%,75%>
<frame src="menu.htm" name="menu">
<frame src="main.htm" name="main">
</frameset>
<body>
</body>
</html>
Pretty simple, huh? Let's go over this code a little.
Okay, you have the basics, your page title and so on. Then you have the frameset code itself. You'll see the cols attributes are set at 25% and 75%. These are the sizes of the frames. You can edit these to change the sizes however you like, as long as the percentages add up to 100%. If this frameset was a topbar and a content section, the frameset code would say frameset rows instead of cols (columns).
Next you have the frame sources. You've ordered the index page to recognize the page menu.htm as the first frame source, and titled it "menu". You've then ordered the index page to recognize the page main.htm as the second frame source, and titled it "main". The page names are important when it comes to targetting links in your frames. Then you've ended the frameset code.
Changing Frame Attributes
When you create a frameset, several things are default, such as a border between your frames. Sometimes the border interferes with the effect you're trying to get, and you'd rather remove them. Or, maybe you would like one frame to be able to scroll, but want the other non-scrolling.
Remove Frame Border
To remove the border from your frames, you would use this code in place of your frameset code.
<frameset cols=25%,75% border=0 frameborder=0 framespacing=0>
Change Scrolling
To remove scrolling from your frame, you would add a scroll command in your frame source code, like this.
<frame src="menu.htm" name="menu" scrolling=no>
<frame src="main.htm" name="main">
Cancel Frame Resizing
If you'd like to make sure that your visitors cannot resize the frame (drag it in or out), then you would add a "noresize" command to the frame source code, like this.
<frame src="menu.htm" name="menu" scrolling=no noresize>
<frame src="main.htm" name="main">
Top Bar Frameset
So you'd rather have a frameset with a top bar, like the one below?
Easy. The only difference is in the columns and rows attributes. Where the code above had "cols" in the index page code, this one has a "rows" command instead.
<html>
<head>
<title>YOUR PAGE TITLE</title>
</head>
<frameset rows=25%,75%>
<frame src="top.htm" name="top">
<frame src="main.htm" name="main">
</frameset>
<body>
</body>
</html>
See how I've labelled the first frame source "top" this time, instead of menu?
For more advanced framesets, proceed to the advanced frames page.