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