The "Real" View of Frames
Lesson #1 gave you all the basic commands except for one. Because of that, you were limited to having links show up in the same frame the link was called from. Also, lesson #1 only showed you how to create a frame of all rows or all columns. This lesson will show you how to combine frames using both rows and columns. Some different types of common layouts are shown below.
Telling a link which frame to appear in by naming frames:
To tell the browser which frame to show a link in, we add a name to each of our different frames. This is done by typing in NAME="myname" in the <FRAME> tag. It can be any combination of letters/numbers you want, and does not have a minimum/maximum number of characters. Many times a frameset will have some sort of menu/navigation frame, perhaps a banner/site header frame, and a display/instruction frame.
Let's call our frames the following:
frame with A.html will be menu
frame with B.html will be header
frame with C.html will be instruction
Thus, our html with frames named will look like this:
<HTML>
<HEAD>
<TITLE>FRAMES1
</TITLE>
</HEAD>
<FRAMESET COLS="30%,*,72">
<FRAME SRC="A.HTML" NAME=menu>
<FRAME SRC="B.HTML" NAME=header>
<FRAME SRC="C.HTML" NAME=instruction>
</FRAMESET>
</HTML>
Suppose we want a link in the file A.HTML to show up in the frame we've named instruction.
All that would be needed is to put the name of the frame into our <A HREF> tag using the command TARGET="frame_name_used_to_show_link". That's all there is to it!
For example, to show a link I've called "Overview of frames" in my instruction frame, the html would be:
<P><IMG SRC="sm_opensquare_aqua.gif">
<A HREF="overview.html" TARGET="instruction"> Overview of frames</A>
</P>
In this case, there happens to be a .gif which precedes the link.
Creating framesets with a combination of rows and columns:
Browsers read from left to right, then from top to bottom. So, if we want to create a page layout with a column full height on the left, and the remaining portion of the browser split into two horizontal rows to the right of the column, could do it one of two ways:
1. create a file for the right column which has the following html to create two horizontal rows:
<HTML>
<HEAD>
<TITLE>FRAMES2
</TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
<FRAME SRC="A.HTML" NAME=left>
<FRAME SRC="B2.HTML" NAME=right>
</FRAMESET>
</HTML>
The html for the B2.HTML file would then be:
<HTML>
<HEAD>
<TITLE>B2.HTML
</TITLE>
</HEAD>
<FRAMESET ROWS="30%,*">
<FRAME SRC="C.HTML" NAME=top>
<FRAME SRC="D.HTML" NAME=bottom>
</FRAMESET>
</HTML>
In this case, the top frame would load the contents of a file named C.HTML, and the bottom frame would load a file named D.HTML.
However...the preferred way to do this combines rows and columns all in the same file.
The html to do this is:
<!-- FRAMES3.HTML. This file creates frame divisions of both vertical and horizontal direction. This is the preferred way to do this because it does not require calling other files with frameset directions in them.-->
<HTML>
<HEAD>
<TITLE>FRAMES3
</TITLE>
</HEAD>
<!-- Cols for vertical divisions; this will create 2 columns, the left which is 30% of the width browser screen, the right which is the remainder and which will ultimately be split horizontally into 2 rows. -->
<FRAMESET COLS="30%,*">
<!-- Left frame -->
<FRAME SRC="A.HTML">
<!-- right frame is another frameset. This is the one which will be split into 2 rows, the top one 20% of the frame height, the bottom one the remainder of the frame height.-->
<!-- rows for horizontal divisions-->
<FRAMESET ROWS="20%,*">
<!-- top frame (ie. 20% of the vertical height loading web page file B.HTML)-->
<FRAME SRC="B.HTML">
<!-- bottom frame (ie. * = remainder of the vertical height loading web page file C.HTML)-->
<FRAME SRC="C.HTML">
<!-- We must now stop this frameset; this frameset is nested within our left frameset-->
</FRAMESET>
<!-- we must now stop the frameset which contains the left frame-->
</FRAMESET>
</HTML>
If not, your page won't load.
