|
I
guess the best way to learn frames is to simply
do them. We'll discuss the various
elements of a Frame Controller and setting up
frames. In addition, we have provided
four of the most commonly used types of framesets
with an example of what the finished web page
would look like. - So, let's get started.
The
primary tag for creating frames is the <frameset>
tag. Several elements within the frameset
tag
The
following is a frameset tag which is used to define
a simple frame as shown in Example
one:
<frameset
cols="150,*">
</frameset> |
The previous example indicates the browser window
should be divided into two frames, the first column
is 150 pixels wide, and the second column will
receive the balance of available browser window
space (identified by an Asterisk (i.e. *) as the
second parameter to the "cols" attribute.
- You can also define the column and row Width
in Percentage values by simply adding a percent
sign (i.e. %) after the number 150
Within
the <frameset> tag we need to communicate
to the browser what the source HTML Files will
be for the left frame and the right frame. This
is accomplished by including the <frame>
tag:
<frameset
cols="150,*">
<frame
name="left-frame" src="left-frame.html">
<frame
name="right-frame" src="right-frame.html">
</frameset> |
Each Frame is provided a name attribute.
This is important for referencing the target when
a link is created in one of the two frames.
In the above example, the name of the frames are
"left-frame" and "right-frame"
and the HTML "src" is the URL (relative
or absolute) to the HTML file to be displayed
in the frame.
The
above example is the HTML definitions (tags) that
reside in what we will be calling the "Controller
Frame" which is basically the main web page
that will be linked to. When a web site
visitor goes to the "Controlling Frame"
the web page will be loaded by dividing the browser
window (as specified by the "cols" attribute
of the <frameset> tag) and loading two HTML
web pages that are defined in the <frame>
tag.
One
last attribute can be added to support those who
may visit your web site with browsers that do
not support frames. This is the <noframes>
and </noframes> tags. Between these
two tags you will place the HTML code that should
be displayed to the Web Site visitor if the do
not have frames capable browser:
<frameset
cols="150,*">
<frame name="left-frame"
src="left-frame.html">
<frame name="right-frame"
src="right-frame.html">
<noframes>
<body>
<p>This page uses frames, but your
browser doesn't support them.</p>
</body>
</noframes>
</frameset> |
We have used an example for the <noframes>
of displaying the text "This page uses frames,
but your browser doesn't support them" -
We would never do this in a live web site we plan
to design. It's the lazy way out.
Simply create a web page for those that do not
have frame capable browsers and place the code
between the <noframes> and </noframes>
tags (be sure to include the <body> tags).
By doing this, you will be supporting all users
the visit your web site, not just a select group.
Now,
let's define some further attributes to the <frame>
tag to identify some more behaviors such as removing
the capability to resize the frame.
To accomplish this, simply add the attribute "noresize"
as shown in the following example:
<frameset
cols="150,*">
<frame name="left-frame"
src="left-frame.html" noresize>
<frame name="right-frame"
src="right-frame.html" noresize>
<noframes>
<body>
<p>This page uses frames, but your
browser doesn't support them.</p>
</body>
</noframes>
</frameset> |
Let's get a little more wild and define the target
frame. The target is used in conjunction
with links that may be placed in the frame. In
our example, the target frame for the left frame
will be the right frame. This means that
links placed in the left frame will actually load
the right frame with the linked web page. - see
the following example:
<frameset
cols="150,*">
<frame name="left-frame"
src="left-frame.html" noresize
target="right-frame">
<frame name="right-frame"
src="right-frame.html" noresize>
<noframes>
<body>
<p>This page uses frames, but your
browser doesn't support them.</p>
</body>
</noframes>
</frameset> |
Notice that we are targeting the <frame>
"name" property for the right frame.
- now if a link is placed in the left frame, when
a web site visitor clicks on that link, the "linked
to" page will be loaded in the right frame.
There
will be times when you want to create a frame
and remove the "Scroll bar" from the
frame. This is accomplished by adding the
attribute to the <frame> tag as shown in
the following example:
<frameset
cols="150,*">
<frame name="left-frame"
src="left-frame.html" noresize
target="right-frame">
<frame name="right-frame"
src="right-frame.html" noresize
scrolling="no">
<noframes>
<body>
<p>This page uses frames, but your
browser doesn't support them.</p>
</body>
</noframes>
</frameset> |
The easiest way to learn frames is to simply delve
into the code. The following are specific example
of frames:
Left/Right
Frames
Top/Left/Right
Frames
Top/Left/Right/Bottom
Frames
Top/Middle/Bottom
frames
|
