Frames are kinda different from anything done in html in that you are not making a page in the traditional sense. What you are making is a template where you can put more than one page. Here's an example using TABLE commands:
| Page_1 | Page_2 |
Above is a simple table. Read about tables in the Tables Tutorial. In fact, I would strongly urge you to read it first. This will be easier to understand if you do so.
Now imagine that the table above is the entire viewing screen of your browser. Frames are used to do just that, break up the screen. Other pages go in the frame cells. Frames allow you to display more than one page at the same time, in the same screen.
If that table above were a browser screen using FRAME commands, there would be THREE pages involved: The frames page that breaks up the page and "Page1.htm", "Page2.htm". The frame commands that would create a page like the example above would look like this:
<HTML>
<HEAD>
<TITLE>First Frame Page</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
<FRAME SRC="PAGE_1.htm">
<FRAME SRC="PAGE_2.htm">
</FRAMESET>
</HTML>
Basic Frame Commands
Neat, huh? There's two pages displayed at the same time. You simply split the screen into two parts and placed a different page in each part. Look again at the HTML frames code above; here's what's going on: FRAMESET starts any frame page. It alerts the browser that FRAMES are going here. COLS denotes that I want columns. In this case, I want two; each 50% of the screen.
Can I do other percentages? Of course you can.
Just separate the percentages by commas and get it all to add up to 99% or 100%. 99%. 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.
FRAME SRC denotes the source of the frame. Frames read the way you do, from left to right. The first source offered will be the left. I only have two frame sections so I need only 2 sources.
</FRAMESET> ends the whole thing.
Some Quick Questions:
Q: Do I have to write pages skinny enough to fit in only one-half of the page frame?
A: No. The browser will cram it all in the page, but it sometimes looks smashed.
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.
Q: Can I get rows too?
A: Yup. Here's how you do it...
| Page1.htm |
| Page2.htm |
Here's the FRAMES code I'll use to do it:
<FRAMESET ROWS="75%,25%">
<FRAME SRC="Page1.htm">
<FRAME SRC="Page2.htm">
</FRAMESET>
What is Happening Here?
Remember that frames read left to right like you. I told the browser I wanted FRAMES by using the FRAMESET command. I then broke up the page horizonally, instead of vertically, as before.
Naming Cells and Using Targets
Now we know how to break up the screen through FRAMESET percentage commands. Now, to control page changes (links) in your frames. There are 3 basic methods of changing pages within frames:
- Click on a link in a frame -- just that frame changes.
- Click on a link in a frame -- another frame on the screen opens the page.
- Click on a link in a frame -- the frames disappear and you get a regular page.
Here's how you do all three!
Click on a link in a frame -- just that frame changes pages.
This is the default. It just happens without you doing anything extra. So, if that's all you want to do, you already know what you need. Browsers are programmed to handle frame clicks this way. The other two methods require a little more coding.
Click on a link in a frame -- another frame on the screen receives the information.
Now it's time to discuss 2 new commands, "NAME" and "TARGET." Let's say I'm doing a very simple frame page with only three frames. It'll look something like this:
| Frame1 |
| Frame2 |
| Frame3 |
In order for me to ask the browser to send info to another frame, I have to make a point of naming each of the frames. Name them whatever you wish, but keep it simple. Here's what the FRAMESET command will look like, with NAMES:
<FRAMESET>
<FRAMESET ROWS="50%, 50%">
<FRAME NAME="A" SRC="cell_1.htm">
<FRAME NAME="B" SRC="cell_2.htm">
<FRAME NAME="C" SRC="cell_3.htm">
</FRAMESET>
Okay, great... you've named the cells. See the "NAME=" attributes I put in the FRAME SRC tags above? Good. Now that you have the frames named, you can make any link inside of them targeted. Basically, you're going to add a TARGET attribute to the usual <A HREF>. Let's say this example link is in cell a above:
<A HREF="http://www.cbs.com" TARGET="C">
You can guess what will happen. When you click on the link, cell a will remain the same and cell c will open the page.
Leaving a Frames Page Completely
So now you can send information from any frame to any frame. 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 the browser to do that. Remember, the default is to have the page stay in the same frame. You need to TARGET the link to open by itself. Simple enough. Just follow the format above but make the TARGET, "_top." Note the underline before the word "top." It looks like this: <A HREF="http://www.cbs.com" TARGET="_top">
Encountering Non-Frames-Ready Browsers
That's a problem. Most browsers today accept frames, but many still don't, text-only browsers for example. The "frames-challenged" will get an error code if they attempt to log on to a page with frames. Either that or they'll get a blank page. There's a few ways around it.
- Don't do frames.
- Write a page without any frames and offer a choice to go to a framed page or to a non-framed page. That means you have to write two pages.
- Use <NOFRAME> and </NOFRAME> commands.
<FRAMESET COLS="50%,50%">
<NOFRAME>
The page you are attempting to enter uses frames. Click <A HREF="page.html">Here</A> for a non-frames version of this page.
</NOFRAME>
<FRAME SRC="PAGE_A.htm">
<FRAME SRC="PAGE_B.htm">
</FRAMESET>
</HTML>
The person, whose browser can't see frames, gets the message and the person who can read frames will get the frames page. You know, you could just put the HTML code in there rather than a message. That way, the user would see the page and never know. I hope this
has helped some, Happy Web Building!
No comments:
Post a Comment