Classroom
4. Frames
Now it´s time to introduce you to frames. Frames are often used to give a page an unchanging menu bar whilst other content on the same screen changes.
For our first example (look at the graphic) we need three html documents. One for the frame-structure, one for the red, left hand side of the screen and one for the blue right hand side. The documents have to be saved in the same folder on your computer or website.
You open and close a frame with the following tag:
</frame>
Everything in between the tags belongs to the frame.
<frameset cols=”20%, 80%">
</frameset>
Now we only need to tell the computer what html documents we want to put into the columns we did set up. That works with the following tags:
<frameset cols="20%, 80%">
<frame src=”a.htm” name=”menu”>
</frameset>
The tag “<frame src=”a.htm” name=”menu”>” fills the first column of our frame-structure with the document “a.htm”.
The second column that we named “main” will be filled with the “b.htm” Instead of “a.htm” and “b.htm” you can put in whatever html document you want to be there. A good idea is to have a document with all the links (menu bar) in the 20% left frame and a start page in the right frame that we named frame.
If you click on a link in the left frame and you want to open up it in the right frame (main) you have to put into the head of the left document the following tag:
<HEAD>
<base target=”main”>
</HEAD>
This will open up every link that you click on the document in the left frame (in our example “a.htm”) in the right frame window that we named before “main”.
There are some general tags that you can include to the opening frame-tag. Look here for just two examples:
...
<frame border="0" scrolling="no">
...
“border=”1” will define a border of one pixel-size between the different frame-windows.
Go ahead and try your new piece of art out in the editor.
A frame can be understood as a structure into which you can put in different html documents.
Frames are done in html, too. Frame html-documents don´t have a body. The frame information goes into the head section of the code.
<frame>
The next step is to define frame-rows or frame-columns. In our examples we have two columns. The first one is 20%, the second one is 80% of the screen.
<frame>
</frame>
<frame>
<frame src=”b.htm” name=”main”>
</frame>
<TITLE>"Menu Bar>/TITLE>
“scrolling=”no” will let disappear the scrollbar in the frame-windows. So if the document is bigger than the framesize, there still woun´t be any scrollbar.
Messageboards, E-Forms, Chat´s and Counters.