|
|
Are
you confused about
web page design
and don't know
where to start?
Feel free to learn
HTML and how to
design your very
own web site by
using our FREE
Online HTML Tutorial.
HTML
Tutorial Chapter
11: Using Frames
What
Frames Are...
Frames is one of the
newer features of
HTML which is only
implemented on the
newest browsers (Netscape
2.0 and higher, and
the new Internet Explorers,
and many others) which
allows a single browser
window to be divided
into multiple sections,
each with an independent
HTML page loaded inside
it, and these HTML
pages can interact
with each other. Each
page loaded within
each section of the
frames window is a
separate HTML document.
Example of the
code to a simple frames
page...
<html>
<head><title>Hoover
Web Templates - Test
Frames Page</title></head>
<frameset
cols="13%,87%">
<frame
src="test.html"
name="indexbar">
<frame
src="main.html"
name="main">
</frameset>
<noframes>
This page requires
a frames-capable
browser... please
get one!
</noframes>
</html>
View
This Frames Page
The frames page
itself in most cases
does not actually
contain any content,
all content is placed
on the separate
HTML pages loaded
within each frame
(section). Instead,
the frames page
acts as a guide,
defining which page
to be loaded into
each frame, and
the frame attributes
themselves. As you
may have noticed,
a frames page closely
resembles a normal
HTML page, except
that the body
is replaced with
frameset,
and an additional
noframes
tag is added.
Using
The Frameset Tag...
The frameset
tags are used to
define the characteristics
of the frames, and
the noframes
tags are used to
define what a browser
that is not frames-enabled
will see. Because
the frameset
tags are igno#ffcc99
by a non-frames
browser, anything
within the noframes
tags will be conside#ffcc99
a normal HTML page.
So after the <noframes>
tag should be placed
the <body>
tag, and then any
content and tags,
then concluded with
the </body>
tag, followed by
the </noframes>
tag. The noframes
content will not
be seen by someone
using a frames-enabled
browser unless they
choose 'view source'.
The frameset
tag will be used
multiple times throughout
a single frames
page. The first
frameset tag is
used to define the
number of separate
frame columns within
the browser window,
and what width each
of those windows
will be. The next
set of frameset
tags will be used
to define how many
frame rows will
be in the browser
window, and each
one's height. The
row attribute is
set separately for
each column, for
example, your first
column may have
4 frames, and your
second column may
have 2 frames, etc.
There is no specific
limit on the number
of frames you may
have within a single
browser window,
but you must realize
that your page will
be viewed in different
resolutions, from
640 x 480 pixels
to 1024 x 768 pixels
and greater. My
advice is to limit
your page to no
more than 4 frames
within a single
browser window.
Defining
Columns...
The first frameset
tag should read
<frameset
cols="SIZE_OF_COLUMN_1,SIZE_OF_COLUMN_2,ETC">.
This first tag will
be closed with a
</frameset>
tag, but only after
the frameset rows
for each column
are also defined.
The SIZE_OF_COLUMN
can be one of three
numbers...
- x% - each column
is set by a percent
of the available
browser window.
(x is a number
from 1 to 100)
- x - each column
is set by a fixed
pixel amount.
(not recommended,
because pixel
widths vary depending
on the viewer's
resolution) (x
is any number)
- * - the * tells
the browser to
use all available
space that is
left for this
column.
So a frameset reading
<frameset cols="20%,80%">
would mean that the
first column is the
browser window will
take up 20% of the
browser window's width,
and that the second
column will take up
80% of the total browser's
width. Another example
is <frameset
cols="120,*">
in which the first
column is exactly
120 pixels wide, and
the second column
takes up all remaining
width. Only one column
is requi#ffcc99, and
there is no limit
on how many columns
can be defined.
Defining
Rows...
Within the column
defining frameset
opening and closing
tag are the row
defining frameset
tags. The number
of row defining frameset
tags is directly dependent
on the number of columns
defined in the column
defining frameset
tag. If there are
two columns defined,
there will be two
separate row defining
frameset tags, if
three columns are
defined, there will
be three row defining
frameset tags.
The row frameset tag
should read <frameset
rows="SIZE_OF_ROW_1,SIZE_OF_ROW_2,ETC">.
The SIZE_OF_ROW is
defined almost identically
to the SIZE_OF_COLUMN...
x% is the percent
of available browser
height, x is a defined
pixel value in height,
and * is all remaining
space. Rows are
defined top to bottom,
and Columns are defined
left to right.
Defining
Frames...
Within each row frameset
tag comes the frame
tag, which defines
which page is to be
loaded in that frame
and a few attributes
on that frame. The
simple frame tag reads
<frame
src="document_to_load.html">,
where document_to_load
is the name of the
web page that is to
be loaded in that
frame, and the frame
tag has no closing
tag. The frame
tag has some other
useful attributes:
- SCROLLING="yes|no|auto"
- This defines
if the frame has
a scroll bar or
not. By default
the frame sets
scrolling to auto,
which means the
browser determines
if a scroll bar
is needed. If
set to yes, the
frame will always
have a scroll
bar, and if set
to no, the frame
will never have
a scroll bar.
- NORESIZE - this
attribute states
that the user
should not be
able to resize
the frame. By
default the user
is able to resize
all frames within
the browser window.
- NAME="x"
- this attribute
defines the name
of the frame,
which is used
to target pages
to be loaded in
that frame, which
will be explained
later. (x is any
alphanumerical
combination)
If you want scrolling
to be disabled, just
use the code:
<frame
src="document_to_load.html"
SCROLLING="no">
or if you want resizing
to be disabled just
use the code:
<frame
src="document_to_load.html"
NORESIZE>
Example of a complex
frames page...
<html>
<head><title>testing
complex frames</title></head>
<frameset
cols="33%,33%,33%">
<frameset
rows="*,100">
<frame src="page1.html"
NAME="index">
<frame src="page2.html"
NORESIZE>
</frameset>
<frame
src="main.html"
NAME="main">
<frameset
rows="50%,50%">
<frame src="page3.html">
<frame src="page4.html"
SCROLLING="no">
</frameset>
</frameset>
<noframes><body>
This page requires
a frames-enabled
browser!
</body></noframes>
</html>
What this frames
page looks like...
----------------------------------------------
| page1.html | main.html | page3.html |
| | | |
| | | |
| | | |
| | | |
| | | |
| | |--------------|
| | | page4.html |
| | | |
| | | |
|--------------| | |
| page2.html | | |
| | | |
----------------------------------------------
View
this example
Using
the TARGET attribute...
What if you have a
page in one frame
with a link, but when
the user clicks the
link, you want it
to be loaded into
one of the other frames
you defined? This
is what the TARGET
attribute is for.
The TARGET attribute
is part of the <a
href> tag.
The a href
tag used with the
TARGET attribute reads:
<a
href="page_to_load.html"
TARGET="target_frame">text</a>
Where page_to_load.html
is the name of the
file which should
be loaded in the frame,
target_frame
is the defined name
you gave to the frame
that you wish the
link to load into,
and text is
the ancho#ffcc99 text
of the link. If you
link without a target,
the linked page will
load into the current
frame. There are also
a few other special
magic targets which
can be used where
target_frame
is:
- TARGET="_blank"
- link is loaded
into a new blank
browser window.
- TARGET="_self"
- link is loaded
into frame that
link was clicked
in.
- TARGET="_top"
- link is loaded
into current full
browser window,
and all frames
disappear, leaving
the new page to
have the entire
window.
Your
own HTML page...
Create a new file,
called "frames.htm",
which contains the
following:
<html>
<head><title>My
Home Page</title></head>
<!-- The page will
have one row with
two columns, one row
with one column -->
<!-- The first
frameset defines the
rows: two rows, the
second one is narrower
-->
<frameset rows="85%,15%">
<!-- The second
frameset defines the
columns in the first
row -->
<frameset cols="15%,85%">
<!-- Specify the
two files to display
in the first row -->
<!-- The first
file will contain
an index for your
home pages -->
<frame src="indexbar.htm"
name="indexbar">
<!-- The second
file is Home.htm:
the file you have
been working on so
far -->
<frame src="Home.htm"
name="mainframe">
</frameset>
<!-- Specify the
file to display in
the second row -->
<!-- This file
contains copyright
information -->
<frame src="copyright.htm"
name="copyright">
</frameset>
<!-- Define what
to display to browsers
which aren't frames-capable
-->
<noframes>
This page requires
a frames-capable browser...
please get one!
</noframes>
</html>
Create another new
file, called "indexbar.htm",
which contains the
following:
<html>
<body background="bgnd.gif">
<!-- The index
page contains links
to the main home page,
and a feedback page
-->
<!-- Those pages
will load into the
"main" target -->
<a href="Home.htm"
target="mainframe">Home</a>
<a href="feedback.htm"
target="mainframe">Feedback</a>
</body>
</html>
Create yet another
new file, called "copyright.htm",
which contains the
following:
<html>
<body background="bgnd.gif">
<!-- The copyright
page contains copyright
information for your
web pages -->
<center>Copyright
© 1997 YOURNAME's
Web Page Development</center>
</body>
</html>
View
This Frames Page
Create an essentially
blank file, called
"feedback.htm". We
will complete this
file later.
<html>
<body background="bgnd.gif">
</body>
</html>
Go
To The Next Page
|
Learn about Web Design. Check out our 
Download Sample Web Templates - Test Your Skills
Before You Buy!! 
