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...
- 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 | | |
| | | |
----------------------------------------------
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
Golden Way Media