|
Beginning:
Introduction to Frames
So,
you want to add a table of contents to your site? Or perhaps
you want to add a logo to your page that will always be
visible? You can do both of these things and more with frames.
Few techniques are as easy or effective as frames. This
issue's Build Your Site introduces you to the basics of
frames and how to use them on your Freeservers Web site.
Getting
Started:
What
are frames?
How do I create a frames page?
How do I link between frames pages?
What
are frames?
When
you use frames on your page, you are essentially splitting
your Web browser window into two or more parts. Each part
of your browser window contains a separate Web page. The
interaction between these Web pages is unique, since what
you do in one frame may affect the content of the other
frame.
For
example, many Webmasters use frames to separate their Web
site links from their site's content. In other words, the
left side of the browser window contains a frame with a
Web page full of links, kind of like table of contents,
while the
right side of the browser window contains the actual content
of the Web site. When a link is clicked in the left frame,
a new page loads in the right frame, keeping the table of
contents constantly visible in the browser.
Frames
are not used only for a table of contents, however. Whenever
you want to display two or more separate Web pages, your
simplest option is frames.
How
do I create a frames page?
Creating
a frames page requires that you create the two or more pages
that you would like to show in your frames, as well as an
invisible page called a "frameset." The pages
that will show in the frames are created just as you would
create any other HTML page, with a few minor changes to
your links, which we will discuss shortly. The frameset
page, however, affects how your Web pages interact and how
they are displayed in your browser.
The
frameset page begins as any other HTML page, with the normal
<HEAD> tag and
its contents defined. However, there is no <BODY>
tag in a frameset page. Instead of <BODY>,
use the <FRAMESET>
tag. Here is an example of how this tag is used:
<FRAMESET
COLS="20%,*" FRAMEBORDER="YES" BORDER="5"
FRAMESPACING="5">
This
frameset tag tells Web browsers to separate the browser
window into two columns (this is done with the COLS="20%,
*" part of the tag), with the column
on the left side taking up 20% of the browser window, and
the right section using the remaining 80% of the browser
window(the * tells the
browser to use the remainder of the space). You can also
split the Web page into rows using the ROWS="20%,
*", which will make your browser window
split 20% of the way down from the top of the window. FRAMEBORDER="YES"
tells the browser to show a border between the two columns,
or frames, in the browser. FRAMEBORDER="NO"
would tell the browser not to display a border. BORDER="5"
tells the browser to make the displayed border 5 pixels
thick, and FRAMESPACING="5"
tells the browser to keep the frames 5 pixels away from
each other. If you don't want your visitors to know that
you have split your page into a frameset, simply set the
FRAMEBORDER to "NO," and both the BORDER and the
FRAMESPACING to 0. All signs of your frames will disappear.
Once
you have the frameset tag configured, you need to configure
your frames. You will need to create a <FRAME>
tag for each section of your frames page. For example, using
the two columns specified above, you would use frame tags
similar to these:
<FRAME
NAME="left" SRC="leftpage.html" SCROLLING="no"
NORESIZE>
<FRAME NAME="right" SRC="rightpage.html"
SCROLLING="default" NORESIZE>
Notice
that, since we specified two columns for our frameset, we
need to create two frame tags. The first tag pertains to
the page that will load into the left of the Web browser,
and the second tag pertains to the page that will load into
the right side of the browser. After entering FRAME
we specify a NAME. Naming
your frames is very important when using links within your
frame pages, which we will discuss shortly. You can name
your frames whatever you would like, as long as the names
contain alpha-numeric characters and no spaces. Next we
specify what page should initially load into the frames
using SRC="filename",
where filename is the
file name of the Web page that you want to load into the
frame. SCROLLING="no"
makes it impossible for a visitor to your Web site to scroll
up or down on your page, whether the text of the Web page
is bigger than the frame window or not. SCROLLING="default"
allows the visitor to scroll only if the page is larger
than the frame window, and SCROLLING="yes"
places a scroll bar on the page, regardless of whether the
page is too big for the browser window or not. Finally,
if you specify NORESIZE,
visitors to your site will not be able to resize the frames
in their browser window. If you ommit NORESIZE,
then the frames will be resizable.
Once
you have defined your frames, close the frameset tag with
</FRAMESET> and
your HTML page with </HTML>.
Save your frameset file with a valid Internet filename (without
spaces or non-alpha-numeric characters). If you want your
frames page to load automatically when someone accesses
your site, name the page index.html. Then, when the frameset
page loads, it will automatically load the pages specified
in the <FRAME>
tags.
How
do I link between frames pages?
The
only real change you will need to make to the Web pages
that load inside of your frames deals with your links. Since
two or more windows are active within your Web browser,
you will need to specify which window should load a linked
page. This is done by specifying a "target" within
your link. For example, here is a link on a frames page
that will open a new page into the right side of the browser
window:
<A
HREF="somepage.html" TARGET="right">Click
Here</A>
This
tag is telling the browser that when the link is clicked,
the page somepage.html should load into the frame named
"right" in the frameset file. In other words,
since we told the frameset that the right-hand column's
name is "right," any links with TARGET="right"
will load into the right-hand column.
If you
want the page to load into the entire browser window, without
any frames, make the TARGET
equal to "parent." TARGET="_self"
will load the page into the frame where the link was clicked,
and TARGET="_blank"
will open a new Web browser window and keep the existing
browser window open as well.
These
fundamentals should start you on the road to creating frames
pages. The best way to learn the ins and outs of frames
is to experiment and practice. Also, when you are ready
to try something more advanced, read other material on frames,
since this is only a basic introduction. Several other options
are available when using frames pages.
|
