|
Frames
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.
|
|
