|Atryeu Designs » Web Design » Tutorials & Guides » Frames Part 1|
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.
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:
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.
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
The above will show a page with 3 frames setup in columns.
<frameset cols="150,*" frameborder="0">|
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.