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
