Return to our main pageGet an overview of the 100s of pages on this siteAn alphabetic index of our 100s of pagesSearch this siteby email, snail-mail or phoneThe people at NetKontoret

Tutorial and Inspection of your own siteTutorial and Script-archiveTutorial and Applet-archiveTutorial and FLA-archiveTutorial and Graphics-archiveFree Email, Webspace, Programs, Applets, Graphics and CGIWebdesign, Teaching and Consulting

 
 Home|WebSchool|HTML|Frames



Click To Recomend This Site To A Friend
Tell a friend about this site!!!

Bookmarks on this page

 
 Basic Example
 
 Creating a Frameset
 
 Add Default Pages
 
 Remove Borders
 
 Resizeable/Fixed
 
 Scrollbars
 
 Links In Framesets
 
 Examples

Pages in this section

 
Basic Coding
 
Text
 
Lists
 
Images
 
Links
 
BackGrounds
 
Tables
 
Frames
 
Forms
 
Metatags
 
Hexcolors
 
Inspect your own site
 
Others & Links


HTML FRAMES

pixel.gif (43 bytes) d10.gif (111 bytes)



Frames can divide the screen into seperate windows.

 
 

Each of these windows can contain a HTML-document.

A file that specifies how the screen is divided into frames is called a frameset.

This means that if you want to make a homepage that uses frames you should:
1) make a html-document with the frameset and
2) make the normal html-documents that should be loaded into each of these frames.

When a frames-page is loaded the browser automatic loads each of the pages associated with the frames.


Example of code for a frameset

A frameset is simply a HTML-document that tells the browser how to divide the screen into split windows.

 
 

Below is the code used to produce the framest shown in the above example:

//THIS IS THE STANDARD HEAD OF A HTML-DOCUMENT:
<html>
<head>
<title>My Frames Page</title>
</head>

//HERE'S THE FRAMESET DECLARATION
<frameset cols="120,*">

  <frame src="menupage.htm" name="menu">
  <frameset rows="*,50">
     <frame src="welcomepage.htm" name="main">

     <frame src="bottombanner.htm" name="bottom">
  </frameset> 
</frameset>

 //HERE'S THE USUAL END OF HTML-DOCUMENTS
</html>


Note that the frameset is only seven lines!

Lets split it all up and add the lines one by one:


Creating a frameset

If the frameset looked like this:

 

The code would be:

<frameset cols="120,*">
</frameset>

The screen is divided into two coloumns.
The left being 120 pixels and the right using the rest of the screen (indicated by the *).

The frame-windows would have no names, so the frameset really couldnt be used for any purpose.


Windownames and default pages

If we add these two lines:

<frameset cols="120,*" >
<frame src="menu.htm" name="menu" >
<frame src="frontf.htm" name="main" >

</frameset>

The entire frameset will look like this:

m
e
n
u


main

Now we still have the screen divided in two columns, the left being 120 pixels the right using the rest of the screen. (some screens are set to 640 pixels across, some to 800 and some to 1024, thats why the * is needed).

But now we also have told that the left framewindow should load a HTML-page called menu.htm and that the right window should load a HTML-document called frontf.htm.

In addition we have assigned the names menu and main to the two framewindows, so now we're even able to link to specific windows.

We called the framewindows menu and main, but you could name them whatever you pleased.

The frameset with a menu-window to the left and a main-window to the right is the most common frameset seen on the web.

If you want to be really nerdy you can add some more details to it.

For instance you might want the frameborders to be invisible.


Borders

To make borders invisible you simply need to add these parameters to the frameset cols-line:

<frameset cols="120,*" frameborder="0" border="0" framespacing="0">
  <frame src="menu.htm" name="menu" >
  <frame src="frontf.htm" name="main" >
</frameset>

The entire frameset would now look like this:

m
e
n
u


main

 

We could add a few more parameters.


Resizeable windows

If you don’t want the framewindows to be resizeable you should add the parameter "noresize" to the frame src-lines:

<frameset cols="120,*" frameborder="0" border="0" framespacing="0">
  <frame src="menu.htm" name="menu"
noresize>
  <frame src="frontf.htm" name="main"
noresize>
</frameset>

Now let's proceed with even more parameters


Scrollbars

Lets say you don’t want a scrollbar in the menu-window.

Furthermore the main-window should have a scrollbar if needed (if the html-document doesn’t fit in the window).... but if not needed.... there should be no scrollbars.

Then the code should look like this:

<frameset cols="120,*" frameborder="0" border="0" framespacing="0">
 <frame src="menu.htm" name="menu" noresize
scrolling=no>
 <frame src="frontf.htm" name="main" noresize
scrolling=auto>
</frameset>

Hyperlinks

If you have a HTML-document with a hyperlink on the text "Analysis" for instance, that links to a page called "analysis.htm" then it appears in the HTML-document as:

Jump to the <a href="analysis.htm">Analysis</a> of the project

Now if the link was in the menu-window of our example, and we wanted it to load a page in the main-window, then the HTML-code should be:

Jump to the <a href="analysis.htm" target="main">Analysis</a> of the project

We simply added the parameter target="main" to
the <a href>-part.

Now the link will be opened in the main-framewindow instead of the menu-framewindow where the link itself
was located.

Four target-names are reserved, and will be interpreted by the browser in this way:

_blank Load the page into a new browser-window
_self Load the page  into the current window.
_parent Load the page  into the frame that is superior to the frame the hyperlink was in.
_top Cancel all frames, load in full browserwindow.

Examples of different framesets

 

top

bottom

 

<frameset rows="16%,84%">
  <frame src="top.htm" name="top">
  <frame src="bottom.htm" name="bottom">
</frameset>

tl

tr

 

bottom

 

<frameset rows="16%,84%">
  <frameset cols="50%,50%">
    <frame src="tl.htm" name="tl">
    <frame src="tr.htm" name="tr">
  </frameset>
  <frame src="bottom.htm" name="bottom">
</frameset>

top


left


right


<frameset rows="16%,84%">
  <frame src="top.htm" name="top">
  <frameset cols="50%,50%">
    <frame src="left.htm" name="left">
    <frame src="right.htm" name="right">
</frameset>

topleft
topright

botleft

botright


<frameset rows="50%,50%" cols="50%,50%">
  <frame src="topleft.htm" name="topleft">
  <frame src="topright.htm" name="topright">
  <frame src="botleft.htm" name="botleft">
  <frame src="botright.htm" name="botright">
</frameset>

topleft
topright

botleft
brtl brtr

botrbot

 

<frameset rows="50%,50%" cols="50%,50%">
  <frame src="topleft.htm" name="topleft">
  <frame src="topright.htm" name="topright">
  <frame src="botleft.htm" name="botleft">
  <frameset rows="50%,50%">
  <frameset cols="50%,50%">
    <frame src="brtl.htm" name="brtl">
    <frame src="brtr.htm" name="brtr">
  </frameset>
  <frame src="botrbot.htm" name="botrbot">
</frameset>

topleft
topright

botleft

botright


<frameset rows="240,240" cols="320,320">
  <frame src="topleft.htm" name="topleft">
  <frame src="topright.htm" name="topright">
  <frame src="botleft.htm" name="botleft">
  <frame src="botright.htm" name="botright">
</frameset>

topleft
topright

botleft

botright

 

<frameset rows="50%,*" cols="320,*">
  <frame src="topleft.htm" name="topleft">
  <frame src="topright.htm" name="topright">
  <frame src="botleft.htm" name="botleft">
  <frame src="botright.htm" name="botright">
</frameset>

 

Click To Recomend This Site To A Friend
Tell a friend about this site!!!

d10.gif (111 bytes) pixel.gif (43 bytes)



     

menumidline.gif (281 bytes)



| Home | SiteMap | Index | Search | Contact Us | About Us | E-Mail Us |
| HTML | JavaScript | Applets | Flash | Graphics | Free Stuff | Products |


This page is created & maintained by NetKontoret / Henrik Petersen
All contents Copyright © 1997, 1998 - NetKontoret / Henrik Petersen - All Rights Reserved

Click To Recomend This Site To A Friend
Tell a friend about this site!!!