| |
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>testing
frames...</title></head>
<frameset cols="25%,75%">
<frameset>
<frame src="test.html" name="indexbar">
</frameset>
<frameset>
<frame src="main.html" name="main">
</frameset>
</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 ignored by a non-frames browser, anything within the
noframes tags will be considered 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 required, 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>
<frameset>
<frame src="main.html" NAME="main">
</frameset>
<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 anchored 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>
Create an essentially blank file, called "feedback.htm". We
will complete this file later.
<html>
<body background="bgnd.gif">
</body>
</html>
Go To Chapter 12
Return to index
| 123 Hosting & Design ©2004-2009 All
Rights Reserved S. J. & Associates
|
|
|
