Using Frames

Frames

You can create an HTML document with several different frames by using the <FRAMES> and <FRAMESET> tags.

Here is a quick tutorial on how to create frames on your web page.

The way you specify that your web page be displayed in frames is by changing your default.htm document.
Normally the default.htm document is the first page displayed when you go to a website.
By specifying frames on your default.htm document, you can create a web page that displays in frames.
This way you can have a "main" frame, a "information" frame, and a "title" frame.
You can actually have as many frames as you like, but remember, that the more frames you specify, the more cluttered your website will be.
No more than three frames is the recommended amount.
I'll show you how to create a page using a two frame layout and a three frame layout.

First you'll need to save your default.htm document as main.html or something other than default.htm.
Then you'll need to create a new document called default.htm.
In this document, you will specify the number of frames, as well as the frame attributes.
Here's how the document should look for a standard two frame layout.

<html>
<head>
<title>CyberCityUSA</title>
</head>

</noframes>
</html>

Ok, now let's break it down and explain what each item means.

<html>
<head>
<title>CyberCity USA</title>
</head>
This is the standard HTML document heading.
Next is where the frames begin.

<frameset cols=20%,80% border=0 framespacing=0 frameborder=0>
This line specifies that your web page will be displayed with 2 frames. The width of the left frame will be 20% of the page width, and the width of the right frame will be 80% of the page width.
border= sets the width of the inside border in pixels.
framspacing= sets the amount of spacing between frames.
frameborder= sets the width of the frame border in pixels.

<frame src=side.html name="sidebar" border=0>
<frame src=netscapedefault.html name="main">
These two lines specify the documents that will be displayed in each frame.
The left frame will display a document called side.html and the right frame will display a document called main.html. name= specifies the name of the frame. In this case the left frame is called sidebar and the right frame is called main.
This will be useful later when you begin targeting hyperlinks.
For example, if you have link on your page that you want to open in the main frame, you would simply add target="main" to the hyperlink code.

</frameset>
This tag closes the frameset for your document.

<noframes>
<h1 align=center>Frame Alert</h1>
<p>
Are you seriously telling me that you don't have a frames capable browser yet? Come on!!!! It's the '90s, get with the program. Go get <a href="http://www.microsoft.com">Microsoft Internet Explorer</a>.<p> Any other problems, <a href="[email protected]">email us </a>and we'll see if we can't help you out.<p> If you're too lazy to go get <b>Internet Explorer</b> or you just don't like frames, you can click <a href="main.html">here </a> to use the generic version of our page.<p> </noframes>
</html>
The text between the noframes tags will only be viewed by browsers that do not support frames.
You can change the text to whatever you like and when a viewer with an older non-frames browser visits your website, that text will be displayed to them.
In my example, the viewer is given the option of downloading Internet Explorer, or simply clicking a hyperlink to my main page.
By clicking the hyperlink to my main page, the viewer would be able to view the content of my "main" frame, but not the "sidebar" frame.
This is a good idea, as it allows users with older browsers to still visit your web page.

Choose another tutorial by clicking one of the links below.

Contact Help Desk CityScape News Home