Well, let's start you off with a gaudy frame example, which has some complexities you haven't seen yet. It will be in a new window, so you will have to jump back and forth to follow the lesson and observe what happens when you click on appropriate links. COME BACK HERE BEFORE YOU DO ANYTHING ON THAT PAGE. DON'T CLOSE IT THOUGH. It is designed to explode if you don't follow orders. (Of course you can always open it again if you close it or it explodes.)
Here is a small view of that page so we can talk about it.
You see before you a window with four (count them!) frames. The bottom frame is a scrolling frame and there may be others that are AUTO scrolling, but don't show the scrollbars, because the page isn't small enough to demand scrolling. Check it out by changint the size of the window.
Ah ha! Hope you found the other one. In any case there are borders, borders everywhere, but not a color on a one of them. The top and bottom frame have links that will do amazing things for you.
Go to the page and click on the link in Frame 2. I will wait.
ZZzzz . . . (Waiting)
ZZzzzZZ
Zzzzzzzzzzzzzzz
ZZZZZZZZZZZzzzzzzzzzzzzzzz
So you are finished (finally).
That link brings up a page far, far, away (directorywise) from this set of lessons. That shows you can pull any HTML file into a frame, if you know the address of the file. When you have a link in an HTML file displayed in a frame, a straight forward link will cause the file "linked to" to appear in that same frame.
Look in Frame 1 on the left side. There is a link that says "Stick something in Frame 4." Try it and you will be amazed.
OK, so you have seen a rotating seal every time you have started to do these lessons, but this one is RED.
<A HREF="RotateSeal.html" TARGET="mainright">Stick something in Frame 4</A>
where "mainright" is the actual name of the frame in which the HTML file that says "Frame 4" will be displayed.
TARGET makes no sense for a link not in a frame. You can target another frame on the frame page, or you can have the file opened in a new window (TARGET="_BLANK) as in the original link you clicked on to get the "gaudy" file.
<A HREF="FRAMESAMPLES/FrameSample.html" TARGET="_BLANK">To the Bat Cave Robin!</A>
In Frame 1, the first link opens Page 1 in a new browser window. The second link opens Page 1 in the top window whose name is "Header." The first uses the TARGET="_BLANK" syntax, and the second doesn't need any TARGET attribute, because the file will be displayed in the same window where the link is.
It isn't just ordinary HTML files you can load in and TARGET. You can bring into a frame a file that creates new frames inside that fame. The example is the third link on the left side of Frame 1 "Do two links in Frame 3." Try it. Page 4 and Page 5 are now two new files in two new windows. The link opened the following file, NewFrames.html in the FRAMESAMPLES directory, in Frame 3 and created the two new frames.
<HTML>
<HEAD><TITLE>Making new frames example</TITLE></HEAD>
<FRAMESET cols="*,*" FRAMEBORDER="YES">
<FRAME src="Page4.html" NAME="leftleftmain" FRAMEBORDER="YES"
SCROLLING="YES">
<FRAME src="Page5.html" NAME="leftrightmain" FRAMEBORDER="YES">
</FRAMESET>
</HTML>
|
Notice the <FRAMESET> here declares two columns, then there are two <FRAME> tags defining the frames themselves. Since the link does not "target" another frame or page, it loads this file into "Frame 3" and then that file loads in the two HTML files "Page 4" and "Page 5" into their respective "new" frames.
Suppose you wanted to clear out the frames and open a single HTML file in the window where the frames currently are. Well, then the TARGET you would need is TARGET="_top". That will use the same window you already have open, rather than opening a new one.
The link at the bottom of "Page 5" says "Clear this page of FRAMES." You may have to scroll to see it. When you activate that link, a different HTML file will be brought in, and the FRAMES will seem to have vanished. Use the BACK button to return to the original page.
You could also use TARGET="_top" to bring in a whole new page with different frames on it the same way we put two frames into toe space where "Frame 3" was.
Perhaps you are wondering why "_top" is in lower case. Well this is one of those strange things in browsers. Some earlier versions of Netscape don't recognize "_TOP" in upper case. Since HTML is not supposed to be case sensitive, this is very wierd. The "lower case" seems to work in all the versions of Netscape and Explorer that support frames.
You no doubt have noticed in this example that there are both HORIZONTAL and VERTICAL frames on the page. The previous lesson only talked about one or the other on a page. Of course to help out Web Page Designers, there is a need to be able to have both on the same page. If you have noticed the home page of newton.uor.edu, you probably observed that there is a horizontal frame at the top and three vertical ones at the bottom. The three vertical ones scroll and there are no borders on the page.
Basically the secret here is to look at our sample page horizontally. There are two horizontal divisions on the page, which make three "horizontal" areas. Of course the middle one has vertical frames in it. Well, you just go about making three horizontal frames, and then you replace the <FRAME> tag for the middle one with a new <FRAMESET> and </FRAMESET> set of tags and define the two colum frames in there.
That is, originally, you might have a frame page that looks like this:
<HTML>
<HEAD><TITLE>HTML Tag List, FRAME example</TITLE></HEAD>
<FRAMESET rows="100,*,33%" >
<FRAME src="Frame1.html" NAME="Header" NORESIZE SCROLLING="NO"
FRAMEBORDER="YES" >
<FRAME src="Frame1.html" NAME="Middle">
<FRAME src="Frame2.html" NAME="Footer" NORESIZE SCROLLING="YES"
FRAMEBORDER="YES">
</FRAMESET>
</HTML>
|
The middle horizontal frame is going away, so no reason to spend a lot of time figuring out "attributes."
Now the middle frame is removed and replaced by a usual <FRAMESET> defining two vertical frames. Here the requirement is that the first of the two vertical frames be twice as wide as the second, but both be flexible.
Now That new <FRAMESET> piece might look like this:
<FRAMESET cols="2*,*">
<FRAME src="Frame3.html" NAME="MAINLEFT" SCROLLING="NO" FRAMEBORDER=YES >
<FRAME src="Frame4.html" NAME="MAINRIGHT SCROLLING="AUTO"
FRAMEBORDER="YES">
</FRAMESET>
|
Stick it into the original file in place of the middle horizontal <FRAME> tag. The result looks like this:
<HTML>
<HEAD><TITLE>HTML Tag List, FRAME example</TITLE></HEAD>
<FRAMESET rows="100,*,33%" >
<FRAME src="Frame1.html" NAME="Header" NORESIZE SCROLLING="NO"
frameborder="YES" >
<FRAMESET cols="2*,*" >
<FRAME src="Frame3.html" NAME="MAINLEFT" SCROLLING="NO"
FRAMEBORDER="YES" >
<FRAME src="Frame4.html" NAME="MAINRIGHT" SCROLLING="AUTO"
FRAMEBORDER="YES">
</FRAMESET>
<FRAME src="Frame2.html" NAME="Footer" NORESIZE SCROLLING="YES"
FRAMEBORDER="YES" >
</FRAMESET>
</HTML>
|
Well there are lots of iterations of ways to set up frames. The whole idea of frames is out of favor with some designers, but I think it offers a good alternative to having to jump to lots of different pages separately.
Play around a little with the example, and then dive on in to the exercises below.
Look at the table below.
This is the reverse of the example in the lesson. That is, there are no cross page horizontal divisions. Use the "logic" of the way the example in the lesson was done to design a FRAMES page. That is, do the "verticals" first.
Eyeball the size comparisons of the frames and use only "*" in the setups of the <FRAMESET> tags.
After reading the answers, to put things back the way they were, use the BACK button or scroll down to the link at the bottom of the "Answers" page.