 |
|
 |
 |
 |
|
 Print this Article (NS4) Netscape Navigator Internet Explorer Opera Neoplanet
|
 Forums
HTML General Programming Flash Site Dev Grafix (Art)
|
 Laboratory
Smart HTML Color Lab Generators
|
 HTML Editors
Simple Editor(Win*) EditPad(Win95) AOLPress(Win95) BBEdit(Mac) Dreamweaver CuteHTML
|
|
Related Files
Font Creator True Type Fonts WEFT Icon Creator
|
 Contents
Introduction to Ultimate Enlightenment
Body Works
Images and Eye Candy
Lists and Forms
Tables
Frames and those that Float
Meta Data
Sound of Music
Channel Surfing
|
Frames and those that Float
By Lisa Hui
Frames are one of those things that can add exquisite elegance to your site, however, if overdone, can ruin your visitor's interactive experience completely. It is a very powerful tool, and the best thing to do is to master it, not avoid it.
What Frames Can Do For You
For the uninitiated, let me start by explaining what frames are. Earlier on in our development, we've worked with single pages at a time. We've also had to concentrate on packing the design, content, and frills of each page in one measly file. With frames, you have the ability to, essentially, display more than one page at the same time. It will divide up your browser display area into separate "windows." Previously, we've worked with using only one window to display one window. With multiple windows, quite a few revelations can occur.
You can separate your site menu from the rest of your page. This will definitely save your visitors from having to load this menu again and again for each page they go to. Thus, it has the potential to both enhance navigation style and save bandwidth (especially if you have a huge menu =]). Our team talks more about menu design and placement in our Designer Diaries.
As well, it is a full length introduction to targeting and loading windows. Well, enough of the promises of the things to come, let's get on with the show!
Windows of Opportunity
I'll begin this with some quick terminology and an introduction to the <FRAMESET> tag. A frames page has a certain type of hierarchy to it. What you see is the product of all these frames (windows) glued together, but each frame loads its own page. You are free to break out your sketchpad and quickly pencil in some frame designs while we learn more and try it out on our page generator :)
The coding? It starts out just like a regular page with the <HTML> and </HTML> tags; you can add <HEAD> </HEAD> tags so as to name your page, but there are no <BODY> container tags.
Let's start with a simple example that creates a <FRAMESET> with two windows. when you create a vertical partition in your frameset, which looks a little like this in your browser:
 |
|
|
|
|
|
You are creating 2 column frames...
|
|
|
|
| column1 |
column2 |
...With the following code. Pay particular attention to the code in between the <FRAMESET> </FRAMESET> tags...
<HTML>
<Head>
<Title>Ad Infinitum Web</Title>
</Head>
<Frameset COLS="50%,50%">
<frame name="column1">
<frame name="column2">
</Frameset>
</HTML>
Notice that in the opening <FRAMESET> tag, you are telling it to create two COLS (or columns) that each take up 50% of the width of the browser's window. Since you specified two widths (left window to right window) COLS="width#1,width#2" the browser realizes that you want only two columns. Also, for the width value, you can make it dynamic, which comes in handy. If you had typed <Frameset COLS="50%,*">, the browser would have automatically determined the value of * (100% total - 50% already specified). You can specify more than one value to be dynamic (to take up whatever space is left over after all the other frames are sized) and it will calculate the remaining space and divide that up between all the "starred" columns or rows; it's nothing too funky so it shouldn't screw up your frames :)
You can also specify the width values (yes, there must be at least 2 frames specified in a frameset) in pixels instead of relative values (percentages). Here is a miniature snapshot of a sample frameset straight from my desktop:
 ...Which was generated with the
following frameset specifications: <Frameset
COLS="200,*"> This only specifies that the left window
be 200 pixels wide, while the right window is resizable depending
on the size of browser window. Click the picture to load the page for yourself
or check out the entire HTML code
(frames1.txt) that generated it. |
If you had wanted a page with 3 columns, just specify 3 columns; for example: <Frameset COLS="200,30%,*"> (just throwing in all the various width specification methods I've just mentioned =]). Note that the second and third widths are of variable size depending on the size of the browser window. And that would look something like this (in my 800x600 window):
What if you had wanted rows? Instead of COLS, feel free to use ROWS [which will render the heights/widths from the top down] =) Can you specify both a set of COLS and ROWS in the same <FRAMESET> tag? Nope. It's a methodical tag that does one task at a time.
Within the <FRAMESET> tags, you have the <FRAME> tag. If you've been faithfully viewing the code for each example frameset I've built so far, you might notice that for each subwindow (frame) you specify in the COLS or ROWS attribute, you'll have a <FRAME> tag to define what page it loads by using the SRC attribute: <FRAME SRC="thispage.html"> Each <FRAME> tag has the ability to tell the browser its "name" and the page it loads in it's window. There are some other attributes we can (optionally) set for each <FRAME> tag, but we'll get to that in a moment.
Say that we wanted to build a frameset that would achieve an effect such as:
|
|
|
|
|
|
|
|
This is where the frames hierarchy comes in; just as <TABLE>s can be nested, so can <FRAMESET>s. We will have to create a frameset inside another frameset. Let's take it one step at a time. The first (outer) frameset should be two columns. How can I tell? Because that rectangular frame window in the right top area of the browser diagram doesn't stretch across the screen (it is contained within an inner frameset). The code for the two columns:
<Frameset COLS="50%,*">
<frame>
<frame> <!-- we want to put two rows in
this second column -->
</Frameset>
This is how I imagined it: First we take the browser window and draw a line down the window, creating two columns (COLS). Then, in the second column, I draw a horizontal line across it, to create the two rows (top and bottom). The code within the second frameset would look like:
<Frameset COLS="50%,*">
<frame>
<Frameset ROWS="30,*">
<frame name="toprow">
<frame name="bottomrow">
</Frameset>
</Frameset>
From personal experience, I've noticed that older browsers tend to "break" when using deeply nested framesets. For example, when you try to specify a frameset within a frameset within a frameset or through consecutive nested framesets. A quick fix for this incompatibility is to use the <FRAME> tag instead and specify a separate page that contains another set of <FRAMESET>s. In that example we just worked on, we could've not used nested framesets and instead at this point written something like:
<Frameset COLS="50%,*">
<frame>
<frame src="secondframeset.html">
</Frameset>
...Which loads another page (secondframeset.html) which apparently contains the code:
<html>
<Frameset ROWS="30,*">
<frame name="toprow">
<frame name="bottomrow">
</Frameset>
</html>
Let's try one more... Skip it if you're impatient to get to the special attributes you can use to better control your frames, but the examples do get tougher as we continue :)
|
||||||
|
||||||
|
|
|
|
|
||
|
|
|
||||
|
||||||
If you have a sharp eye, you'll notice that there are 5 columns (two wide ones at the ends, a wide one in the middle, and two narrow ones bordering the center). So let's generate that code shall we? First, we may realize that the wide columns might be the same size. Also, the two narrow columns are very narrow (do I hear a 'duh' coming on?) and would probably be used as border lines. So the easiest thing to do would be to set the narrow columns to an absolute pixel width... perhaps 10 and let the leftover 3 columns take up the rest of (which is most of) the browser window space.
<Frameset COLS="*,10,*,10,*">
<frame>
<frame>
<frame> <!-- the rows start appearing when you
hit the middle frame -->
<frame>
<frame>
</Frameset>
|
||||
|
||||
|
|
|
|
|
Now let's work on that middle frame where the rows start appearing. I think that we could approach this by first creating three rows and then in the middle row, create 3 columns. The top and bottom rows are thin, so lets go with the good ol' size of 10. So the code with the nested three rows would look like:
<Frameset COLS="*,10,*,10,*">
<frame>
<frame>
<Frameset ROWS="10,*,10">
<frame>
<frame> <!-- the middle row where
there are 3 columns-->
<frame>
</Frameset>
<frame>
<frame>
</Frameset>
|
+ |
|
> |
|
|||||||||||||||||||||||||||||||||||
Finally, add the three columns in the middle row, smack dab in the middle of the entire browser window. The middle column here seems to be larger than the left and right ones, so let's make the smaller columns of width 10 :)
<Frameset COLS="*,10,*,10,*">
<frame>
<frame>
<Frameset ROWS="10,*,10">
<frame>
<Frameset COLS="10,*,10">
<frame>
<frame>
<frame>
</Frameset>
<frame>
</Frameset>
<frame>
<frame>
</Frameset>
|
+ |
|
> |
|
|||||||||||||||||||||||||||||||||||||||||||||||
Customize
Your Frames
Even if you've mastered the art of creating framesets, you've still got a few details you can modify to make your framesets "pretty." Thank goodness they are very simple to use :) Let's work on the <FRAMESET> attributes first.
Within the beginning <FRAMESET> tag, you can additionally specify any or all of the following:
- BORDER determines the thickness of the frame border. Valid values are 0 and 1. (MSIE Only)
- BORDERCOLOR determines the color of the frame border.
- FRAMEBORDER determines the thickness of the frame border [in pixels].
- FRAMESPACING determines the amount of space between frames Valid values are 0 and 1.
- NAME determines the "name" of the entire frame window. Any link with a target (whatever it may be) will act like a target="_top" link (loading the destination page in the entire window - exits the frameset).
The ones I've already mentioned are COLS, and ROWS.
The following is a miniature snapshot of a frameset with a red border color (<frameset cols="200,*" bordercolor=red border=0>).
View the
source (frames3.txt)!
Also, within the <FRAME> tag, you can specify any or all of the following:
- SRC - specifies the source, which is the URL or simply the name of the document you are loading (works like the image tag except it takes in web pages instead).
- NORESIZE - if you have visible frame borders, this standalone attribute (<Frame NORESIZE>) will prevent visitors from dragging the frameborder to change the size of the subwindow.
- SCROLLING - can set whether or not scrolling bars appear on the right side of the frame. Valid values are yes, no or auto. "No" will not allow a visitor to scroll down a page, whether or not the page continues down. "Yes" will put a scrolling bar on the page whether or not the page continues down. "Auto" determines whether or not the page is too long to view entirely before putting a scrolling bar in the frame. ("Auto" has the same effect as not using the SCROLLING attribute at all)
Here's a snapshot of the frameset shown with a SCROLLING=Yes attribute and NORESIZE set in the left frame. Notice the shaded out scroll bar next to the red frame border line (click the image to see the actual HTML page for yourself - just try budging that red line now!):
View
the source (frames4.txt)!
Stuck Frameless?
What happens if your visitor doesn't have a frames-enabled browser? They'd just either see links (the SRCs of your <FRAME> tags) or a blank page. Rather disappointing don't you think? Well, here's a quick fix for that: use the <NOFRAMES> </NOFRAMES> tags. Treat everything within the <NOFRAMES> container tags as a regular HTML page with a <BODY>, text, links etc. If you think it's too much work, you can politely tell them there that they should get a better browser :)
Now Float Those Frames
Say what? That's right, I said "float 'em!" Yes, I admit, this is a bit corny for an introduction to floating frames, but we all have our off days. Let's just say this: essentially, a floating frame is one that exists on a regular HTML file (not created by frameset tags) yet loads a separate page. So basically, there's a frame "floating" right on your page. The technical name for it is the inline frame (hence it's container-element type tag, the iFrame).
This works in a way similar to a <FRAME> tag. To invoke it, just say that you want an iFrame that loads a certain page. Let's say we want an iframe on this page displaying a page called contents.html. Simply put, the code would be:
<iFrame SRC="contents.html" WIDTH=200 HEIGHT=200> </iFrame>
When this tutorial was written iFrames currently work only in Microsoft Internet Explorer 4.0+ (versions of Netscape Navigator 4.61 and below do not support this yet). So what about the iFrameless people? Just stick in a warning sign or alternate text in between the <iFrame> and </iFrame> tags:
<iFrame SRC="contents.html" WIDTH=200 HEIGHT=200>
Your browser does not support iFrames!!!
</iFrame>
Some clever people can use this to load the necessary information anyway. For example, banner ads loaded in iFrames can reload right in the frame without affecting the page, however, even without an iFrames enabled browser, the author can specify an image [the banner] to be loaded in the page anyway - only without the refresh capability.
Listed below are some optional attributes you can use with the <iFrame> tag to customize its look:
- ALIGN aligns the floating frame window on the page. Valid values are left, right and center. Text may also be wrapped around the window (much like the image ALIGN attribute).
- FRAMEBORDER specifies whether or not a frame should appear around the iFrame window (much like the regular frameset attribute with the same name =]).
- HEIGHT determines the height of the iFrame window. Valid values can be expressed in either pixels or percentages.
- NAME can be used in conjunction with the link TARGET attribute so that you can use links on the HTML page (outside of the iFrame) to direct pages to load in the iFrame.
- NORESIZE disallows an iFrame to be resized (although iFrames cannot be resized by default)
- SCROLLING works in the same way this attribute works in a <FRAME> tag. It specifies whether or not a scroll bar can/will be displayed in the iFrame window.
- WIDTH determines the width of the iFrame window. Valid values can be expressed in either pixels or percentages.
Check out this example page to see an iFrame in action (using the SRC, ALIGN, NAME, HEIGHT, and WIDTH attributes) and this (iframe1.txt) to see the code for the page.
