Please note: This tutorial
is Microsoft Explorer specific. As of 1/2001, these commands
were supported only by MSIE 3.0 and above.
Use these to jump around or read it all...
[The Basic Format]
[Multiple Frames]
[I Want A Button]
[One More Little Trick]
[A Few Other Commands]
Frames, frames, frames. Honestly, I answer twice the mail dealing with frames than any other topic. They are very popular and people want them. In that spirit, here's a tutorial dealing with what Microsoft Explorer has named "In-Line Frames".
In-Line Frames
These are frames that appear within the page. They resemble
table cells, yet what appears in the frame is not text on the page, but rather a whole other page, like regular frames.
Here's an example:
The Basic Format
I know that looks like a table cell, but it's really a frame with the text from another page displayed inside it. It's a page in a page. It's two, two, two pages in one! (I'll stop now before I begin quoting
Doublemint gum commercials.) Here's how I did it:
<IFRAME SRC="inf1.html"></IFRAME>
Here's What's Happening:
- IFRAME is the command that states an in-line frame will go here.
- SRC denotes the source for the page, just like an image command.
- /IFRAME ends the entire command. You must have this for each IFRAME you post.
How's that for easy?
Multiple Frames
If you can have one, you can probably have two. Dig this:
Here's the code that made the frames above:
<IFRAME SRC="inf2.html" NAME="left"></IFRAME>
<IFRAME SRC="inf3.html" NAME="right"></IFRAME>
Here's What's Happening
Now we get into the beauty of the in-line frames. You can start to have movement between them. First, let's look at the code.
I need for you to see that I used an </IFRAME> each time I created a frame. Now, notice the format for creating the frames stayed the same. What I did was add a new command:
NAME="--"
If you already understand the concept of frames and targeting the output of hypertext links within frames, then you already know the drill here. If not, see the Original Frame tutorial's section on targeting.
That NAME command names the frame so that you can target where a hypertext link's page appears. The default is for the information to appear in the same frame as the hypertext link. What I did here though was to name the frames. In this case, "left" and "right."
Here's the format I used in the left-hand frame to create the hypertext link:
<A HREF="inf4.html" TARGET="right">Click Here</a>
See? The right frame was named "right" thus the output of the click landed in the right frame. That's easy enough.
I Want A Button!
Calm yourself, man! (*slap sound effect*) You can have your button and click it too. Watch this.
...and here's the button's code:
<FORM ACTION="inf7.html" TARGET="right">
<INPUT TYPE="submit" VALUE="Click This">
</FORM>
|
One More Little Trick
Here's What Happened
I think that's the neatest effect these frames offer. Here's the code I used to make the frames:
<IFRAME SRC="inf8.html" FRAMEBORDER="0" NAME="left"></IFRAME>
<IFRAME SRC="inf9.html" FRAMEBORDER="0" NAME="right"></IFRAME>
See the FRAMEBORDER="--" command I added? That's what did the trick. You have two settings to choose from, 1 and 0. One is the default. That gives you the slightly indented frame look I had above. Zero loses the frame altogether. That's what I did in this case. AND... since I made the two source pages the same color as the main page -- without the borders -- it looks like the frame is simply part of the same page. I go with the blank look on the right by creating a page that was the same color as the main page, but contained no text. I think it's a great effect.
A Few Other Commands
Here are a few more commands that you can use in order to alter the frames on your page. Each is fairly self-explanatory and doesn't really require an example. I've used them all just to make sure they work. Just stick the command, with whatever setting you want, into the IFRAME command to see it work.
- HEIGHT="--": This acts just like the height command in terms of an image (see here). It defines the frame's height, in pixels or percentage.
- WIDTH="--": Ditto this one in terms of frame width.
- MARGINWIDTH="--": This sets the margin width in either pixels or percentage.
- MARGINHEIGHT="--": Ditto, but on height.
- SCROLLING="--": If the information inside the frame is too long to display, then a scroll bar will appear. You can stop it by adding this command set to "no."
- ALIGN="--": This works like the align command in terms of images (see here). It denotes where text will appear when surrounding the frame.
- NORESIZE: Add this, and the user will not be able to resize your frame.
That Should Do It
These are great, but keep in mind that these are Explorer-only deals. They will not display in Netscape browsers. In fact, they will look bad. Make a point of using these when you are sure a user will be running Explorer or use a JavaScript in order to send users to certain pages depending on their type of browser.
I happen to have a JavaScript that will do that right
here.
Enjoy!
[The Basic Format]
[Multiple Frames]
[I Want A Button]
[One More Little Trick]
[A Few Other Commands]
IE 7
Firefox 2.0
