The frames feature, supported by version 2 and higher of navigator and Internet Explorer, allows the programmer to create several HTML pages that can be simultaneously viewed in the browser window. With this feature, the browser window is divided into frames, or Windows, which share the space.
Without the frames feature, to view three different pages, called A.HTM, B.HTM, and C.HTM, the user would have to access these pages individually through an initial page containing a menu, or through specification of its URL.
As an example, we will create a project consisting of an initial menu that serves as an index to access the chapters of an electronic manual. Below is the source code of the four documents:
MENUNORM.HTM Files:
<html>
<head>
<title>Main menu</title>
</head>
<body bgcolor="#ffffee">
<CENTER>
<h1>Main menu</h1>
<ol>
<li><A HREF=a.htm>Introduction</a>
<li><A HREF=a.htm>Chapter 1</a>
<li><A HREF=a.htm>Chapter 2</a>
</ol>
</center>
</body>
</html>
A.HTM File :
<html>
<head>
<title>Introduction</title>
</head>
<body>
<h1>This is the A.HTM document</h1>
<h2>Introduction</h2>
</body>
</html>
B.HTM File :
<html>
<head>
<title></title>
</head>
<body>
<h1>This is the B.HTM document</h1>
<h2>Chapter 1</h2>
</body>
</html>
C.HTM File :
<html>
<head>
<title></title>
</head>
<body>
<h1>This is the C.HTM document</h1>
<h2>Chapter 2</h2>
</body>
</html>
From the main menu, to view any one of the chapters of the manual just click on the corresponding menu item. After the click, the main menu is replaced by the called page. To display the main menu again, use the Return or back browser button.
Examine the following figures (contained in the Frame1 folder of the the htlmadv directory):
This is what this manual would look like:
Place the main menu in the left frame. After you click on one of the chapters, the right frame displays the contents of the chapter.
How Frames Work
Unlike most of the HTML language features, the use of frames requires some planning. This planning consists of creating the structure of the windows where you specify the number of Windows (frames), the layout on the screen, the width and height of each window, and the content which will be displayed in each one of them. Working with frames requires to stages. In the first, you create the layout of the windows, and in the second, you define their content.
Frame Document
The use of frames requires creation of special HTML document containing All the definition of the windows. Consider it a master document. This document is different from other HTML documents, as it does not use the <BODY> </BODY> commands. In its place, the <FRAMESET> </FRAMESET> commands are used. Within this pair of commands, all the attributes of the windows that will be created are specified. <FRAMESET> defines the overall characteristics of the windows, such as their number and horizontal and vertical layout. Each specified frame will need another command called <FRAME> to define its individual characteristics and, principally, its content.
<FRAMESET> Command
The <FRAMESET> command is of the container type; that is, it must be opened and closed.
Here is the syntax of this command:
<FRAMESET
COLS=size
FRAMEBORDER=1 | 0
FRAMESPACING=value
ROWS=size>........
</FRAMESET>
The attributes of <FRAMESET> are discussed next.
COLS=size :-
The COLS attribute is used to create a document with Windows formatted in columns. The width of each columns of the document is specified here. A standard value may be specified for all the columns, or individual size may be used. The values may be specified in pixels, percentage, or relative size. Below are some examples.
Using values in Pixels:-
<FRAMESET COLS=100,300,200>
Create a document with three Windows, the first being 100 pixels wide, the second 300, and the third 200.
FCOL1.HTM File:
<html>
<head>
<title></title>
</head>
<frameset cols=100,300,200>
<frame src="a.htm">
<frame src="b.htm">
<frame src="c.htm">
</frameset>
</html>
The next figure shows the result of this code:
When a window cannot display all the content, with automatically adds scroll bars to the window.
Using Relative Values:-
To divide the windows evenly over the width of the browser window, the best option is to use the the asterisk for each column.
FCOL2.HTM File:
<html>
<head>
<title></title>
</head>
<frameset cols=*,*,*>
<frame src="a.htm">
<frame src="b.htm">
<frame src="c.htm">
</frameset>
</html>
The next figure shows the result:
To create two columns with the first occupying one-third of the screen and the second the remaining two-thirds, use the following command:
<frameset cols=*,2*>
Load the FCOL3.HTM file to see the effect of this command.
Using Percent Values:-
The third method of determining the width of a column is to specify the values in percentage form, totalling 100%.
<FRAMESET COLS=25%,50%,25%>
The different values format may be combined. For example, to create a frameset with three columns where the first occupies 25% of the screen, the third is 100 pixels wide, and the other occupies the rest, the following command may be used:
<FRAMESET COLS=25%,*,100>
To see the effect of this command, load the FCOL4.HTM file.
ROWS=size:
The ROWS attribute works the same way as the COLS attribute, except it creates the windows horizontally. The above sections that discuss COLS also apply to ROWS.
The files FROW1.HTM, FROW2.HTM, FROW3.HTM and FROW4.HTM are the equivalent of the files FCOL1.HTM to FCOL4.HTM. Below is the source code and the screen displayed by the FROW2.HTM file.
FROW2.HTM File:
<html>
<head>
<title></title>
</head>
<frameset rows=*,*,*>
<frame src="a.htm">
<frame src="b.htm">
<frame src="c.htm">
</frameset>
</html>
Here is the result:
Combining ROWS and COLS:
You can use both ROWS and COLS to create frames. You can create a Window divided into two horizontal frames, in which the first is divided into two columns. To do this, just nest sets of <FRAMESET> commands. The next example shows this application. The first occurrence of the <FRAMESET> command creates to horizontal Windows. The second occurrence divides the first window into two columns, where the A.HTM and B.HTM files are displayed. After the second occurrence of <FRAMESET> is closed, the C.HTM document is specified to occupy the second horizontal window.
FROWCOL1.HTM File:
<html>
<head>
<title></title>
</head>
<frameset rows=50%,50%>
<frameset cols=50%,50%>
<frame src="a.htm">
<frame src="b.htm">
</frameset>
<frame src=c.htm>
</frameset>
</html>
The result is shown next:
FRAMESPACING=value:
The FRAMESPACING attribute changes the spacing between the frames, creating the impression that the window border was increased. However, it only spaces the frames by the number of pixels specified. The FROWCOL2.HTM file is identical to the previous one except that the line of the first <FRAMESET> command was changed to:
<FRAMESET ROWS=50%,50% FRAMESPACING=10>
The result is shown on the next page:
The FRAMEBORDER attribute defines the border of the frame. As standard, it is 1, which displays the border. If the value 0 is specified, the borders are omitted. The omission of borders creates the illusion of a single window, where there are parts independent of each other. Another interesting effect is changing the background colour of each window, thus dividing the screen into distinct colour areas.
The FROWCOL3.HTM example shows the use of the <FRAMEBORDER=0> attribute to display the contents of the D.HTM, E.HTM, and F.HTM files, which have different background colours.
Examine the source code and notice the effect caused:
FROWCOL3.HTM File:
<html>
<head>
<title>frowcol3.htm</title>
</head>
<frameset rows=50%,50% frameborder=0>
<frameset cols=50%,50%>
<frame src=d.htm>
<frame src=e.htm>
</frameset>
<frame src=f.htm>
</frameset>
</html>
This is the result:
Note that Internet Explorer and navigator leave different spacing between the frames.
Even if the border has been omitted, the resizing of the window will automatically place the scrollbars in the frames affected by the resizing, as shown in the next figure.
👈Episode 12.4 Episode 13.2👉
Share This Post
PRINT THIS POST
No comments:
Post a Comment
If you have any doubts. Please let me know.