.\,
 
Go to Index File
 
 

 


How to implement frames

      Frames are created using the <frameset> tag. 
     The "main" page is devided by the frames and this way "holds" other pages. 
     The <frameset> tag  replaces the <body> tag. 

First Example:

<html>
<head>
<title>First example</title>
</head>
<frameset cols="20%,80%">
<frame src="file1.htm">
<frame src="file2.htm">
</frameset>
</html>
file1.htm
 

 

file2.htm
 

 

file1.htm and file2.htm in this example are created separately. 

Second Example:

<html>
<frameset rows="20%,80%">
<frame src="file1.htm">
<frame src="file2.htm">
</frameset>
</html>
file1.htm
file2.htm
 

 

 
back

:

How to create complex frames

Example:

<html>
<frameset cols="50%,*">
<frameset rows="50%,*">
<frame src="file1.htm">
<frame src="file2.htm">
</frameset>
<frame src="file3.htm">
</frameset>
</html>
file1.htm
 

 

file3.htm
file2.htm
 

 

Example:

<html>
<frameset rows="50%,*">
<frameset cols="50%,*">
<frame src="file1.htm">
<frame src="file2.htm">
</frameset>
<frame src="file3.htm">
</frameset>
</html>
file1.htm

 

file2.htm

 

file3.htm
 

 

Example:

frames_example
<html>
      <head>
            <title>index-file</title>
       </head>
                <frameset rows="12%,*">
                     <frame src="file1.htm">
                                        <frameset cols="20%,*">
                                        <frame src="file2.htm">
                                                                     <frame src="file3.htm">
                                        </frameset>
                      </frameset>
</html>
Back
 
|
How to set attributes for frames

There are several attributes you can add to the individual 
tags of the index/main page:
 
Attributes: Explanation:
scrolling=yes/no/auto Controls whether frameset contains scrollbars or not.
noresize Adding this attribute will cause that particular frameset to not be resizable.
border=pixels Sets the border size of each frameset
frameborder=no border=no framespacing=no This is a combination of tags for borderless frames in both NS and IE.

These attributes are inserted into the first example this way:

Lets say we want a left bordered frame with no borders showing:

<html>
<head>
<title>First example</title>
</head>
<frameset cols="20%,80%" frameborder=no border=no framespacing=no>
<frame src="file1.htm">
<frame src="file2.htm">
</frameset>
</html>

This will create a two columned frame with no borders showing. 

You can also insert attributes in the individual frame, 
which will add attributes to only that particular frame. 

In the second example if we want to have scroll bars only in the second frame, 
the code will be changed this way: 
<html>
<frameset rows="20%,80%">
<frame src="file1.htm" scrolling=no>
<frame src="file2.htm" scrolling=yes>
</frameset>
</html>
  

Back

 
 

How to create links to another frame or window

When you have a link in one frame, the content that's loaded will be loaded in the same frame. 
|It is possible to load the linked file in the same window, but in another frame. It is possible this 
second frame to fill the whole window. It is possible the second loaded file to be opened in the 
new window. Now lets see how will be changed one of the above examples when we insert
names of the every frame.

<html>
 <head>
    <title>index-file</title>
 </head>
  <frameset rows="12%,*">
   <frame name="frame1" src="file1.htm">

     <frameset cols="20%,*">
     <frame name="frame2" src="file2.htm">

         <frame name="frame3" src="file3.htm"

     </frameset>

   </frameset>

</html>
 

  • If there is a link in the file2.htm you can show the loaded second file in the frame3 this way:
file2.htm:

<html>
<body>
<a href="loaded_file.htm" target="frame3">text_link</a>
</body>
</html>

We added "target=" attribute to the "<a href=>" tag and referring to that second frame's name.
 

  • The loaded second file will  be shown into a full page:
file2.htm:

<html>
<body>
<a href="loaded_file.htm" target="_top">text_link</a>
</body>
</html>
 

  • The loaded file will be shown in the new window after2 clicking on the button                         if we use this simple JavaScript:
file2.htm:

<html>
<body>
<form>
<input type="button" value="Click here" onclick="window.open('loaded_file.htm')">
</form>
</body>
</html>
 
back