Frames

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
      Frames
         About frames
         Frameset
         Frame source & name
         Nesting Frames
         Target & Noframes
         Frameset borders, etc.
         Scrolling & Resizing
         Margin width, borders
         IFrame
         Should you? Try it
      Style Sheets
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices
Frameset

As mentioned in the last lesson, the first thing you need is a master-document. That is what you'll learn to make in the next two lessons. The contents of the frames are just HTML pages.

To make a master-document for frames, you start out exactly as a regular HTML document:
<html>
<head></head>
But then it gets strange. You don't have a body! Instead you add this tag:
<frameset>
Of course, if you begin a frameset, you need to stop doing that eventually. Put that all together and you have:
<html>
<head></head>
<frameset></frameset>
</html>
From here you need to define how the frames are divided. You can choose to EITHER divide the frameset into rows or columns. You can't do both, but there is a way around this you'll learn later. Lets make a frameset with two columns. The first column should be 20% of the page, and the second should take up the remaining space. This frame would be created like this:
<html>
<head></head>
<frameset cols="20%,*">
</frameset>
</html>
If you like, you can see what that would look like. Note that it isn't necessary to define the second frame as 80%. This allows the computer to decide how big it needs to be. This is easier for you and looks better too.

Frames can also be divided horizontally into rows. (See why you had to learn tables first?) The code is very similar. This time, let's define the top frame as pixels instead of percentages. Let's make it 150 pixels high. Again, we'll let the computer decide how large to make the remaining frame.
<html>
<head></head>
<frameset rows="150,*">
</frameset>
</html>
If you like, you can see what that would look like as well.

By defining the framesets, you control what your page looks like. It shouldn't be too hard. Next we learn what goes between the <frameset> tags.
Back Home Forward