[Tutorial] Frames
| Author |
Message |
JSBN
|
 Posted: Tue May 27, 2003 4:31 pm Post subject: [Tutorial] Frames |
|
|
<H1>So, You Want Some Frames, Huh?</H1>
by Joe Burns, Ph.D.<P>
Use these to jump around or read it all...<P>
<P>
<HR WIDTH=80%>
<H2>What Are Frames Anyway?</H2>
Frames are a little different than anything you've done in html in that you are not writing a page in the traditional sense. What you are creating is a template where more than one page can sit. Here's an example using TABLE commands:<P>
<P>
Above is a simple table. Read all about tables in So, You Want A Table, Huh?. In fact, I would strongly suggest you read it first. This will be much easier to understand if you do. That table is obviously sitting on the page you are looking at right now (frame1.html). I put up a few commands and, poof! up came the table.<P>
Now imagine that little framed item above as being the entire
viewing screen of your browser, the screen you're looking right now. Frame commands are used to do just that, break up the screen.<P>
So, what goes in the frame cells? I'm glad you asked. Other pages go in the frame cells. Frame commands allow you to display more than one page at the same time, in the same browser screen. Let's do that illustration above as if it were your browser screen using frames:<P>
PAGE_A.html<P>
|
PAGE_B.html<P>
|
<P>
If that table above were a browser screen using FRAME commands, there would be THREE pages involved: The frames page template that breaks up the page and "Page_A.htm", "Page_B.htm". The frame commands that would create a page like the example above would look like this:<P>
<HTML>
<TITLE>First Frame Page</TITLE>
<FRAMESET COLS="50%,50%">
<FRAME SRC="PAGE_A.htm">
<FRAME SRC="PAGE_B.htm">
</FRAMESET>
</HTML>
Look over the small program and then click here to see what it looks like on the browser. You'll be able to click back from the next page to continue the tutorial. So, go look and come back and I'll tell you what the commands are doing. See you in a moment...<P>
<H2>Basic Frame Commands</H2>
Neat, huh? There were two pages displayed at the same time. I
simply split the screen into two parts and placed a different
page in each part. Look again at the small HTML frames program above; here's what the commands are doing:
<LI>FRAMESET starts any frame page. It alerts the browser that FRAMES are going here.
<LI>COLS denotes that I want columns. In this case, I
want two; each 50% of the screen.<P>
Can I do other percentages? Of course you can. Go nuts if you want, just separate the percentages by commas and get it all to add up to 99% or 100%. 99%?! Yes. You see, 33%, 33%, 33% adds to 99 and splits the screen three ways. The browser just distributes the final 1% over the three spaces. Dig?<P>
<LI>FRAME SRC denotes the source of the frame. Frames
read like you do, left to right. The first source offered will be hard left. I only have two frame sections so I need only 2 sources.<P>
<LI>/FRAMESET ends the whole deal.
<H2>Some Quick Questions:</H2>
Q: Do I have to write pages skinny enough to fit in
only one-half of the page frame?
A: Nope. The browser will cram it all in there, but it
tends to look smooshy. (How about that word?) I'll offer examples in a moment.<P>
Q: What if my page is taller than the screen? How do I put in a vertical scroll bar?
A: The browser will do it for you. Don't concern yourself with it. Write for content, not for frame.<P>
Q: Columns are nice, but can I get rows too?
A: Yes. Here's how you do it...<P>
<H2>Adding Rows To Columns</H2>
Okay, now it starts to get a little goofy. Here's the browser
screen configuration I'm going to make. The table below is a pretty good representation, but not quite exact to scale. It's just for demonstration purposes.<P>
Hey.htm
| down.htm |
me.htm |
PAGE_B.html
| PAGE_A.htm
|
<P>
Here's the FRAMES program I'll use to do it:<P>
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="75%,25%">
<FRAME SRC="LINKPAGE.htm">
<FRAME SRC="PAGE_B.htm">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="LONGPAGE.htm">
<FRAME SRC="ME.html">
<FRAME SRC="PAGE_A.htm">
</FRAMESET>
</FRAMESET>
<H2>What is Happening Here?</H2>
Remember that frames read left to right like you do. I told the computer I wanted FRAMES by using the FRAMESET command. I then broke up the page vertically just as before.<P>
Here's where the rows come in. I added a new FRAMESET command
denoting ROWS. I asked for 75%, 25%. See above what I mean? What that did was break up the first column into two rows. I
then offered two SOURCES for the two sections of the first
column. The first frame to offer a source is always the top one. I then put in a /FRAMESET to denote that I was done with breaking up the first column. Still with me? Good... let's go on.<P>
Note I did another FRAMESET command again denoting ROWS, but this time I set the rows at 33%, 33%, 33%. Then I denoted SOURCES for those three rows in column two. I then added a /FRAMESET to end those rows and another /FRAMESET still to end the whole deal. Please note that I am going to show 5 different pages on the same browser screen. Still with me? Good.<P>
Here's what the item above looks like. Please note:<P>
<OL><OL>
<LI> ...the scroll bar that appears on the "LONGPAGE.htm"
frame cell. It reads "DOWN" again and again to show the scroll bar.
<LI> ...how squished some pages look.
<LI> ...the directions in the TOP LEFT block.
--It has to do with the next section of this tutorial.
<LI>Click here to see the frames in action.<P>
</OL></OL>
<H2>Naming Cells and Using Targets</H2>
Okay, so now we know how to break up the screen through FRAMESET percentage commands. Now the question is how to control page changes (hypertext links) in your frames. There are three basic methods of changing data within cells:
<P>
1. Click on a link in a frame -- just that frame changes pages (you just saw that).
2. Click on a link in a frame -- another frame on the screen
receives the information (you haven't seen that yet).
3. Click on a link in a frame -- the frames go away and you get a full page (you saw that first).
<H3>Here's how you do all three!</H3>
1. Click on a link in a frame -- just that frame changes
pages.<P>
This is the default. It just happens without you doing a darn
thing. So, if that's all you want to happen, do nothing more
than what you already know. Browsers are programmed to handle
frame clicks just that way. The other two methods require a little more work.<P>
2. Click on a link in a frame -- another frame on the screen receives the information.
<P>
Now it's time to talk about two new commands, "NAME" and "TARGET."<P>.
Let's say I'm doing a very simple frame page with only three
frame cells. It'll look something like this:<P>
Frame Cell One
| Frame Cell Two |
Frame Cell Three
|
<P>
In order for me to ask the computer to send data to another frame cell, I have to make a point of naming each of the cells. "Ah Ha! That's the NAME deal above," you say. Bingo. Name them whatever you want, but it's my suggestion to keep it simple -- like capital letters. Here's what the FRAMESET command will look like, with NAMES, to create the illustration above:<P>
<FRAMESET>
<FRAMESET COLS="50%, 50%">
<FRAME NAME="A" SRC="cell_1.htm">
<FRAMESET ROWS="50%, 50%">
<FRAME NAME="B" SRC="cell_2.htm">
<FRAME NAME="C" SRC="cell_3.htm">
</FRAMESET>
</FRAMESET>
<P>
Okay, great... you've named the cells. See the "NAME=" commands I snuck in the FRAME SRC commands above? Good. Now that you have the cells named, you can make any hypertext link inside of them targeted. Basically, you're going to add a TARGET command to the usual <A HREF>. Let's say this example hypertext link is in cell_a above:<P>
<A HREF="http://www.cbs.com" TARGET="C"><P>
You can guess what will happen. When you click on the link,
cell_a will remain the same and cell_c will receive the
information.<P>
<H3>Leaving a Frames Page Completely</H3>
So now you can send information from any cell to any cell. The problem is you're still on the frames page -- and some of the larger pages are squished. Say you want to have someone click on a frame and have the link to pop up as its own page, in a full browser window. Well, you have to tell it to do that. Remember! Default is to have the information stay in the same frame.<P>
You need to TARGET the hypertext link to be its own page. Easy enough. Just follow the format above but make the TARGET, "_top." Note the underline before the word "top." It looks like this:<P>
<A HREF="http://www.cbs.com" TARGET="_top"><P>
Ok, enough explanation. Click Here for examples of the NAME and TARGET commands above.<P>
<H2>Encountering Non-Frame-Ready Browsers</H2>
That's a problem. Most browser today accept frames, but many still don't, text-only browsers for example. The "browserly-challenged" will get an error
code if they attempt to log into a page with frames. Either that or they will receive a blank page. That's the reason there are no frames on this main page. There are a couple of ways around it.
<P>
1. Don't do frames. (Oh, I could have guessed that one, Joe.)
2. Write a page without any frames (like this one) and offer a choice to go to a framed page or to a non-framed page. But that means you have to write two pages--bummer.
3. Use <NOFRAME> and </NOFRAME> commands.<P>
<FRAMESET COLS="50%,50%">
<NOFRAME>
Greetings "Browserly Challenged". The page you are attempting to enter has frames and if you're reading this message, you don't have the ability to see it. I suggest you go Here for a non-frame version of this page.
</NOFRAME>
<FRAME SRC="PAGE_A.htm">
<FRAME SRC="PAGE_B.htm">
</FRAMESET>
</HTML>
<H3>Get What's Happening?</H3>
The person who can't see frames gets the message and the person who can read frames will get the frame page. Isn't technology wonderful? You know, you could just put the text page code in there rather than a message. That way, the user would see the page and be none the wiser.<P>
Well I guess that about wraps up the tutorial on frames. There are other commands you can use when creating frames. These will create different margin sizes and such... but this tutorial was becoming a monolith. If you use Explorer as your browser, go here for commands that alter the frames of Explorer only. The commands are not supported by Netscape just yet.<P>
If you'd like to gather more about frames, head to my Advanced Frames tutorial. It contains a few more little tricks and tidbits of knowledge. Plus it's sugar free and low in fat.<P>
Until then, help yourself to any of my other tutorials. I wrote them just for you... and everyone else.<P> |
|
|
|
|
 |
Sponsor
Sponsor
|
|
|
JSBN
|
| Posted: Tue May 27, 2003 4:37 pm Post subject: (No subject) |
|
|
Uh.... right..... this is a littel screwy eh?
I'll try and fix this glowing text thing l8r....  |
|
|
|
|
|
JSBN
|
| Posted: Tue May 27, 2003 4:42 pm Post subject: (No subject) |
|
|
Ok, i fixed most of the glowing text, but left some just for fun  |
|
|
|
|
|
Homer_simpson
|
| Posted: Tue May 27, 2003 5:01 pm Post subject: (No subject) |
|
|
| dont forget to tell us about iframe!!! that's what i alwasy use in my websites... |
|
|
|
|
|
|
|
Register
Wiki
Blog
Search
Turing
Chat Room
Members
