This tutorial will take you through the steps to create a Web page with two frames: a narrow left margin "navigation" frame, and a wider right "main" frame. You can then take what you learned to build the frameset you want for your site.
Step 1 to Build Your First Frameset
Open your favorite text editor, or text-based HTML editor to a blank page. Save this page as index.html.
Step 2 to Build Your First Frameset
HTML frames use a different DOCTYPE from standard HTML pages. Framesets also don't use the body tag, but you should still have a head with a title, so type in the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>My First Framed Page</title>
</head>
Step 3 to Build Your First Frameset
The first thing to do when creating a framed Web page is to decide how many frames you want, where they will be located, and their size. As I said above, this page will have two frames in two columns. The left frame will be narrow, around 200 pixels, and the right frame will take up the rest of the page.
To do this, you will need a frameset with two columns. Frames are defined from left to right and top to bottom. So two columns would be defined as:
<frameset cols="200,*">
The cols attribute indicates that you want your frames in columns. The first column will be 200 pixels wide and the second will be * pixels wide. The * quality tells the browser to use the rest of the space for that pane.
Step 4 to Build Your First Frameset
Once you've decided on your frames, you need to tell the browser where to find them. It's a good idea to name the pages in relation to how they fit in the frameset. Here are your two frames:
<frame src="navigation.html" />
<frame src="main.html" />
Step 5 to Build Your First Frameset
Finally, you should have a noframes section so that your site is accessible. I like to link to the primary page of the site in my noframes area:
<noframes>
<p>Thank you for visiting my First Framed Page. Since your browser doesn't support frames, you will need to go <a href="main.html">directly to my main page</a>.</p>
</noframes>
Step 6 to Build Your First Frameset
All you need now is to close the frameset and the HTML page:
</frameset>
</html>
Then you are done with the first part of building a framed Web page.
