Working with
Frames
What are frames
anyway?
Frames are a
little different than anything else in
html in that ou are not writing a page
in the traditional sense. What you are
doing is creating a template where more
than one page can sit.
Frame commands are used to break up the
screen into "frames" or sections
containing different parts of your pages
sections.
In essence, Frame
commands allow you to display more than
one page at the same time, in the same
browser screen.
If you want your
page to be divided into two parts
horizontally using FRAME commands, there
would be three pages involved; The
frames page template that breaks up the
page into "Page_A.html", "Page_B.html".
The frame commands that would create a
page like the example above look like
this:
<html>
<title>First Frame Page</title>
<frameset cols="50%, 50%">
<frame src="PageA.html">
<frame src="PageB.html">
</frameset>
</html>
What the
commands are doing?
Frameset starts
any frame page. It alerts the browser
that Frames are going here.
Cols denotes that I want columns. In
this case I want two; each 50% of the
screen. You can split the percentages
into practically any format as long as
the total=100%.
Just separate the percentages by commas
and get it all to add up to 100%. Split
the screen 3 ways 33%, 33%, 34%.
Frame src denotes
the source of the frame. Frames read
like we do, left to right. The first
source offered will be hard left.
</frameset> is the obligatory end tag.
Adding rows, for
example:
LinkPage.html
PageB.html
Longpage.html
Me.html
Page_A.html
Here's the frames
program to do this:
<frameset cols="50%, 50%">
<frameset rows="75%, 25%">
<frame src="linkpage.html">
<frame src="Page_B.html">
</frameset>
<frameset rows="33%, 33%, 34%">
<frame src="longpage.html">
<frame src="me.html">
<frame src="Page_A.html">
</frameset>
</frameset>
As Frames read
left to right. The <frameset> command
says that this is a frame, then the page
is broken up vertically just as before.
To get Rows add a
new <frameset> command denoting Rows. In
this case 75%, 25%. What this does is
break up the first column into two rows.
Then by offering two sources for the two
sections of the first column. The first
frame offered a source is always the top
one. Then put in a </frameset> to
signify closure.
Note another
<frameset> command again denoting Rows
33%, 33%, 34%, denoting sources for htse
three rows in column two, then added
</frameset> to end those rows and
another /frameset still to end.....
Here's what the
item above look like. Please note:
- The scroll bar
that would appeared on the "longpage.html"
frames. It reads "down" again and
again to show the scroll bar.
- How squished
some pages look looks.
- The directions
in the top left block.
Denoting
dynamics of the frames: names and
targets
This next explanation concerns how
to control page changes (hypertext
links) in frames. There are three basic
methods of page changes:
- Click on
a link in a frame--just that frame
changes pages.
- Click on a link
in a frame--another frame on the
screen receives the information
- Click on a link
in a frame--the frames go away and you
get a full page.
Here's how we
do all three:
1. Click on a link
in a frame--just that frame changes
pages... This is the default. So, if
that's all you want to happen, do
nothing more that what you already
know--browsers are programmed to handle
frame clicks just that way..
2. Click on a link in a frame--another
frame on the screen receives the
information. This involves two new
commands "Name" and "target"
For example a very
simple frame page with only three frame
cells will look something like this:
Frame Cell One
Frame Cell Two
Frame Cell Three
In order to ask
the computer to send data to another
frame cell, the cells have to be named.
Here's what the frameset command will
look like, with Names, to create the
illustration above:
<frameset>
<frameset cols="50%, 50%">
<frame name="a" src="cell_1.html">
<frameset rows="50%, 50%">
<frame name="b" src="cell_2.html">
<frame name="c" src="cell_3.html">
</frameset>
</frameset>
Now that the cells
are named, you can make any hypertext
link inside of them targeted. Basically,
you're going to add a target command to
the usual <a href> that targets where it
goes. Let's say this example hypertext
links is in cell_a above:
<a href="http://www.khurrams.itgo.com"
target="c">
Leaving a
frames page completely
So now you can
send information from any cell to any
cell. The problem is you're still
ontheframes page--and some of the larget
pages are squooshed. You want to have
someone click on a frame and have the
link to pop up as it's own page. Well,
you have to tell it to do that.
(Remember default is to have the
information stay in the same frame, see
above).
You nned to target the hypertext link to
be it's own page. Easy enough. Just
follow the format above but make the
target, "_top". (Note the underline
before the word "top".). It look like
this:
<a href="http://khurram.allhere.com"
target="_top">
What of those
without frames ready browsers?
That's a problem.
The browser which do not support frames
will get an error code if they attempt
to log into a page with frames. Either
that or they will receive a blank page.
That's the reason there are no frames on
this main page. But there are a couple
ways around that.
- 1. Don't do
frames
- 2. Write a page
without any frames (like this one) and
offer a choice to go toa framed page
or to a non-framed page.
- 3\. Use <noframe>
and </noframe> commands
The noframe command works by writing a
basic frame page like any of the three
above - But immediately following the
frameset command you put in a <noframe>
command and write a message for people
without frame-worthy browsers.
<frameset
cols="50%, 50%">
<noframe>
Greetings Browser-challenged. The page
you are attempting to enter has frames,
and if you're reading this message--you
don't have the ability to see it.
