| Despite the fact that the recent trend in
web design frowns upon the use of frames and tables in large, commercial
websites, as they are a disadvantage when registering a site with
many major search engines, frames and tables remain extremely useful
for amateur webmasters. Despite their many disadvantages, frames
and tables allow beginners to put together attractive web sites
that are well-organized and viewable in most major web browsers.
In the section below, we will provide you with the basics you need
to get started on your web site with frames and tables, so that
you can get your site online as soon as possible!
In order to help you understand how to create
frames more easily, we at HostSearch will use the HTML code of this
page to show you how to build frames from scratch. Using this as
a guide, you should be able to build frames and specify a frame
target.
<html>
<head>
<title>Creating Frames For Your Web Pages.</title>
</head>
<FRAMESET COLS="100%" ROWS="60,*" border=no
frameborder=0 framespacing=0>
<FRAME NAME="upper" SRC="frameup_frame.htm"
SCROLLING="NO" NORESIZE>
<FRAMESET
COLS="160,*" border=no frameborder=0 framespacing=0>
<FRAME
NAME="left" SRC="framelf.html" SCROLLING="AUTO"
NORESIZE>
<FRAME
NAME="main" SRC="right_frame.html" SCROLLING="AUTO"
NORESIZE>
</FRAMESET>
</FRAMESET>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
<p>This web page uses frames, but your browser doesn't support
them.</p>
</body>
</noframes>
</html>
Below is the step by step description of what
each line means.
We don't need <body> tag for frame page.
If you put the <body> tag before <frameset>, some browsers
will not show the frames.
Look at my first mark [ ],
<FRAMESET COLS="100%" ROWS="60,*"
border=no frameborder=0 framespacing=0>. We create frames
with the opening tag <FRAMESET>. Within this tag, we specify
column and row attributes.
As you may notice, this page is divided into
two rows. We first specify column width = 100% (COLS="100%")
and the height of the first row = 60 pixels (ROWS="60,*").
The asterisk mark [*] is the value of whatever space that left below.
That means the second row will use the rest of the space. You also
can specify the value in % such as ROWS="60%,40%",
but specifying the value in pixels will give you greater control
over page composition.
Next, you will see that we have borderless frames
here. This is possible by specifying border=no
frameborder=0 framespacing=0. Generally, if you don't want
borderless frames, you don't need to use border=,
frameborder= and framespacing=
attributes. You can just put this <FRAMESET
COLS="100%" ROWS="60,*">, and the
browsers will create frames with border for you.
Look at my second mark [ ],
<FRAME NAME="upper" SRC="frameup_frame.htm"
SCROLLING="NO" NORESIZE>. <FRAME> is used
to specify the file inside <frameset>. I have to create a
file and put it in SRC=" ". On this page, the upper
frame is named upper. SCROLLING="NO"
means visitors don't have an ability to scroll up and down the page.
You can put "yes" or "no". If you don't specify
"auto" is the default value. Auto scrolling means the
browsers will determine whether this section fit into the screen
or need scrolling. NORESIZE means viewers of this page cannot put
their mouse between the frame and resize it. If you don't specify
this, they will be able to resize your frame.
We have specified the 60 pixels on the top.
Now, were going to work on the space below top frame ( * ). Because
we will split this section into 2 parts, we put the <FRAMESET>
tag again here. Look at the third mark [ ],
<FRAMESET COLS="160,*" border=no
frameborder=0 framespacing=0>, you 'll see that the same
rule was applied. I specified the width of the left frame to 160
pixels and left the space on the right unspecified ( * ). There
are two columns in this row. You need to specify the files for both
sections. We are using <FRAME> again here.
<FRAME NAME="left"
SRC="framelf.html" SCROLLING="AUTO" NORESIZE>
<FRAME NAME="main" SRC="right_frame.html"
SCROLLING="AUTO" NORESIZE>
This is not a new case. The left frame and the
right frame are specified using the same rule as we previously assign
a file for upper frame. Don't forget to close FRAMESET tag with
</FRAMESET>.
If you don't specify scrolling and resize value,
the defaults (scrollable and resizable) will take place.
OK, now the tag <noframes>
is an alternative for people who use browsers that don't support
frame. Browsers that support frames will not read anything inside
this tag. This tag can be inside or outside <frameset>
and </frameset>. If you want
to set BODY attribute such as a background color, you should put
<body> tag inside <noframe> tag.
| How do I specify frame targets?
Here is HTML code from my left frame.
<a HREF="begin.html"
TARGET="_top">The easiest HTML guide for beginners</a>
Look at target="_top",
this is the way you send the page to another frame. For example,
if you want a click on the left to bring a new page into the
right frame, you have to specify target="main".
(Absolutely, you first have to give the name to frame on the
right as described earlier.)
You also can use the predefined targets
as we've used ("_top"). The predefined targets are
case sensitive and begin with underscore [_]. They are:
- _top: the document will be opened in
the full browser windows. Use _top to open the linked document
in full browser windows.
- _self: the document will be opened
in the same frame. Example, if I specify "HOME"
on the left frame as "_self", the home page will
appear in the left frame. (pretty ugly, huh?)
- _parent: the document will be opened
in the current windows' parent. Example, if there is a link
in this right frame and it cause nested frame. Within the
nested frame, I specify the link as "_parent".
When you click that link it will appear back into this right
frame and nested frame will disappear. NOTE: If there is
no parent exists, it will acts like "_self"
- _blank: the document will be opened
in the new browser windows. Browser will launch a new windows
while your previous page, which is the frame page, is still
open.
|
|