Atryeu Designs ~ A resource center for Web/Graphics Design, Computers and the Internet

Frames are still widely used across the internet, especially by people building their first sites usually. There are of course several pros and cons to using frames. The largest pro perhaps being that for a beginner, frames are fairly simple to setup and maintain. The largest con is most definitely that not all browsers support frames, so a lot of people out there will be unable to view your pages. Nonetheless, I will be explaining the basics to setting up a site to use frames, giving a few handy tips to make your frames look better, and I will provide a few examples of a site that uses frames.

Creating a site using Frames

When using frames, you will need to setup one page which your visitors will start at and that contains the base code for your frames. Depending on how many frames you then have, you will need a single page for each frame to start with as well.

<frameset>
</frameset>

The above is the base code for your frames and is put in place of the Body tags.

When you first are setting up a site to use frames, you will want to figure out which page you want the frames to be used on. That will be called the Frameset page, which is where your code for frame placement and such will be located at. So, to start off that page, your code should look something along the lines of:

<html>
<head>
<title>Site Title</title>
</head>
<frameset>
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
</html>

The above is how the very basic FrameSet page should look.

If you were to copy the above code and save it to a page and preview it, you would see that it would bring up 2 different frames and both would likely have an error in them since our pages "frame1" and "frame2" do not exist. This is all there is to setting up a frame site however. Below you will find the extra information to customize the frames more to your liking and I also will be including a section with information about running a frame site and having somebody access the site with a browser that does not support frames.

The Frameset Code

As you seen in the above example, the Frameset code should replace the Body tags within your webpage file. This code will be telling the browser how it is supposed to setup the frames for your page. Within this tag, you can set the amount of frames and their width on your page along with removing or enlarging the frame border.

Let us begin with setting how many frames you want and what sizes you want them to be. Below is an example of a site using 2 frames.

<frameset cols="150,*">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>

The above will show a page with 2 frames setup in columns.

The above code creates a page with 2 frames. The first frame is setup in a column and will be 150 pixels wide and the second frame, also in a column, is set to take up whatever extra space is left within the browser.

The "cols" code tells the browser that the frames should be columns. If you would rather have the frames setup in rows, you could change "cols" to "rows" instead.

Next, you set the size (as well as the amount of frames you wish to have). This can be done either by using a pixel size (by typing a whole number), a percentage or you can use the * symbol as sort of a wild card so the frame width will depend on how much space is left to be used within the browser. In the above example, the first column is set to 150 pixels, and the * tells the second frame to use whatever space is left. So if you have an 800x600 screen resolution, then the 2nd frame would take up roughly 650 pixels or so. This may seen a little confusing, however with a bit of practice, you will easily catch on.

If you want to have a 3rd row/column for your frames listed, you would do something like the below, by adding an extra set of numbers to the Frameset code and an extra Frame code:

<frameset cols="150,*,150">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html>
</frameset>

The above will show a page with 3 frames setup in columns.

<frameset cols="150,*" frameborder="0">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>

The above will show a page with 2 frames and no border.

The above code also will display the two frames as before, however the "frameborder" code is now telling the browser that there should not be a border around the frames shown. If you use Netscape as your browser, it may require you to put either a "yes" or "no" value instead of a pixel/number value in. This may have been changed in a newer browser version though.

You also could use "framespacing" to help control the width of your frame border but this may only work in Internet Explorer and possible a few other browsers. If you choose to use this, you set it up similar to the frameborder code by entering a number value.