Coding
Let us have a look at the coding involved in producing a
set of frames.
As I said at the beginning of this section, you first
need to construct a page which is itself just a container.
There is nothing in it besides the structure of the frames.
The first thing to decide is how many frames you are going
to need: the less the better. Then you need to decide
whether to have borders and scroll bars. Finally you need to
decide which pages will be loaded into the frames by
default. (We will deal with the links, and page refreshes,
later on in this section.)
You will start your coding of the page in the normal way:
<HTML>
<HEAD>
<TITLE>Runway to the
Web</TITLE>
</HEAD>
The page has the usual HEAD section, which can
contain the title and the various meta tags. Below that,
however, we have a slight difference. Note that we do not
immediately go into the BODY section. Instead we go
into the FRAMESET.
The frameset gives the browser the information necessary
to divide up the screen in such as way as to be able to
accept more than one file. In the tag below is the
information needed to set up two frames, one of which is set
to a width of 129 pixels, which is approximately one and a
half inches wide. The other frame takes up the remaining
width of the screen, whatever that may be.
<FRAMESET
cols="129,1*">
There are various ways of describing how much space the
frames take up. One way is to define them absolutely, by
giving each frame a definite size in pixels:
<FRAMESET
cols-"200,400">
The above code will give a total page size of 600 pixels,
which will be divided into two frames, one 200 pixels wide,
and the other 400 pixels wide.
You can also set your frames to a percentage of the
browser window. This is a dangerous things to do, because it
will probably lead to some serious foul-ups in the way your
designs are displayed on the myriad computers across the
world which have variously sized screens.
The final option is to use the * (star). This is the
asterisk key, but is called the star. When you use it the
browser displaying your page will interpret it as indicating
that you want to take up whatever is left over of the
computer's screen to display the contents of that frame.
Thus the original code for my page showed the left frame
taking up 129 pixels, and the second frame taking up the
rest of the browser window, whatever that space may be.
The next piece of code needs to be put in for ancient
browsers that are still in use and which do not understand
frames. For this we use the NOFRAMES tag. This is
followed by the BODY tag, which contains a short
piece of text which is displayed by the said ancient
browsers:
<NOFRAMES><BODY>
<P>This page is designed to
be viewed by a browser which supports Netscape's Frames
extension. This text will be shown by browsers which do not
support the Frames extension.</P>
</BODY>
</NOFRAMES>
That is all that goes in the body section. In fact that
is all that would be displayed on screen in an old browser.
In a new browser, nothing is displayed on screen from this
page. All that is displayed are the files that are loaded
into the frames. For that we need to produce the following
code:
<FRAME
SRC="../site-index.html" name="indexbar" NORESIZE>
<FRAME SRC="../Resources2.html"
name="content" frameborder="no" padding=0 spacing=0
framespacing=0 border="no">
</FRAMESET>
In short we are telling the browser where the source of
the content for the frame is to be found. In the first
instance it is the "site-index" file. This is to be found
(in this instance) in a higher directory, hence the unix
directory listing "../"
You will notice that each frame has been given a name.
The first one is called "indexbar", the second
"content". The reason for this is that later we will
want to direct pages into these frames and we need to know
which frame to direct them into. If a frame doesn't have a
name the browser is going to have a hard time putting a page
into it. This name is called the TARGET.
Just like in tables, you can set values for the border of
a frame, or for the padding, which will mean that the higher
the value the further the contents will be set away from the
edge of the frame; and for the spacing, where the higher the
value the larger the gap between frames.
We have also set the first frame to NO RESIZE.
This means we will have no scrolling facilities. If you want
to have a scroll bar, you can add the code
scroll=yes, or if you want the browser to decide,
don't bother to add any code at all.
Finally, we close the HTML tag.
</HTML>
The above code will produce a page which will then go and
look for the two files, and load them into the correct
frame, so to view this page we have had to create three
files.
In order to change the content of the right hand frame we
need to use some linking code which is slightly different
from the coding we have done before. Just putting in the
usual A HREF code will not suffice. We need to specify more
parameters: which target frame the page is to be loaded
into, or whether the page is to be loaded into a different
page altogether; and what relation that new page has to the
first page.
Targets
There are four target tags: _self; _parent;
_top; _blank. Note that all start with an
underscore. You need to put this into the code.
By default a link will cause the new page to display in
the current frame. Using the _self tag will merely
confirm this.
To create a new browser window for the new linked page
use _blank. There is a downside to this; the frames
begin to stack up as you keep following new links. The old
ones don't go away.
To get round this problem you need to use _top.
This will cause the linked page to be loaded into the full
browser window and all the old frames disappear.
_parent will cause your linked page to load into
the previous frame. This would be useful if you had used
some javascript to create a pop-up window. You might then
want to go back to the window that took you to this pop-up
window. Any link placed in this new window could be directed
back to the previous frame by targeting to the parent frame.
What all this means is that if you set up a link from one
frame, and want your new page to load into the second frame
you must say so in your link code. If you have a page which
contains two frames, one named Index, the other named
Content, and you want to put links in the Index page
which will load the new pages into the frame called Content
you must specify that target frame.
An example of such code would be:
<A HREF="page1.html"
TARGET="Content">
However, suppose you want to create a link from the page
now in the Content frame. What would you do?
This is where we would start to use the code preceded by
the underscore. If you had a link within page1.html,
and you wanted that new page to load into the Content frame
(the same frame) you would use the following code:
<A
HREF="newpage.html" TARGET=_self>
Your existing page in that frame would now be replaced by
the new page. If, however, you wanted that new page to load
into a new browser window, you would have to change the
coding slightly:
<A
HREF="newpage.html" TARGET=_blank>
Nested Framesets
If you want to produce a more
complex page, you can nest framesets within other framesets.
The following code will give you two vertical frames, with
the right hand frame subdivided into two horizontal
frames:
<FRAMESET
cols="25%,75%">
<NOFRAMES><BODY>
<P>This page is designed to
be viewed by a browser which supports Netscape's Frames
extension. This text will be shown by browsers which do not
support the Frames extension.</P>
</BODY>
</NOFRAMES>
<FRAME SRC="">
<FRAMESET
rows="16%,84%">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
</FRAMESET>
Putting the frames round the other
way (one across the top, and two vertical frames below)
would produce the following code:
<FRAMESET
cols="75%">
<NOFRAMES><BODY>
<P>This page is designed to
be viewed by a browser which supports Netscape's Frames
extension. This text will be shown by browsers which do not
support the Frames extension.</P>
</BODY>
</NOFRAMES>
<FRAMESET
rows="13%,87%">
<FRAME SRC="">
<FRAMESET
cols="29%,71%">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
</FRAMESET>
</FRAMESET>
