©2005, Martin Rinehart html-intro-08.html
I use frames in this site this way:
A frame is a named rectangle. You can fix its size or give it a percentage of the available browser real estate. A frame can display an HTML page, or it can be divided into smaller frames. Most websites today use a banner frame (possibly including its own menu) on the top and a navigation bar frame on the left of the actual content frame. It's not hard to do.
Frame Basics
The entry point to most websites (that's index.html) is a small page that defines the site's frames and loads them with initial content. Here I'll show you how to create your own. It will display virginia.html in its main frame (which is why we didn't name that file index.html in the beginning).
In my website I run the navigation frame on the left up to the top. Let's build a frame set that puts the title across the full width of the top and then has navigation and main content under the title.
We'll create this with <FRAMESET> / </FRAMESET> tags and with <FRAME> tags. (Like the <IMG> tag, the <FRAME> tag does not have a corresponding end tag.) And we'll be working in a new place, the <HEAD> area. Before we get to index.html, however, we'll need some content. Use copy/paste to put these two new files into your root directory.
|
<!banner.html - the banner in Virginia's website>
<HTML>
<HEAD></HEAD>
<BODY>
<H1 ALIGN="center"><I>Virginia</I>'s Website</H1>
</BODY>
</HTML>
<!end of banner.html>
|
|
|
<!navbar.html - the navigation bar in Virginia's website>
<HTML>
<HEAD></HEAD>
<BODY>
<UL>
<LI>link 1</LI>
<LI>link 2</LI>
<LI>link 3</LI>
</UL>
</BODY>
</HTML>
<!end of navbar.html>
|
|
With those files in your root, you're ready to create an index.html that organizes your frames. Here's one version.
|
<!index.html - entry page for Virginia's website>
<HTML>
<HEAD>
<FRAMESET ROWS="100, *">
<FRAME NAME="banner" SRC="banner.html" SCROLLING="no">
<FRAMESET COLS="150, *">
<FRAME NAME="navbar" SRC="navbar.html">
<FRAME NAME="main" SRC="virginia.html">
</FRAMESET>
</FRAMESET>
</HEAD>
<BODY></BODY>
</HTML>
<!end of index.html>
|
Now you can use your browser's "File/Open" command to open index.html and before your eyes you get a website! Congratulations. Now a few words on what we've done.
ROWS="100, *"
In a comma-separated list you can specify the number of pixels or you could add a percent sign to specify a percentage of the available space, just as you do with tables and table data. The asterisk in the last place says, "give me all that's left."
NAME="a-name"
Do you remember that you can use the <A HREF="..." TARGET="_new"> to launch an HTML page in a new browser window? Well, now we're going to use the TARGET= attribute more regularly. By default a link will load a page into the frame that holds the link. That means that when you convert "link 1" into a true link (<A HREF="..."> it will load your page into the "menu" frame, which is wrong. When the viewer clicks a link in the menu, you want the page to load into the "main" frame, leaving the menu alone. For that the link will be <A HREF="..." TARGET="main">...</A>.
Go ahead and convert one of those list items to a real link just to be sure you've got it. Try making the first link <A HREF="subdir1/subdir1-page.html" TARGET="main">Subdir 1</A>. Got it?
If you did that and clicked the link, to be sure it works, you found yourself with no link to home. Add a home link to your navbar. <A HREF="virginia.html" TARGET="main">Home</A> should work.
SRC="..."
You've probably got it figured. It's the same as the SRC="..." in the <IMG> tag except that its a link to an HTML page, not a graphic.
SCROLLING="no"
By default, scrollbars appear when a frame needs them. That could be when your site's visitor shrinks the browser window. Scrolling can also be "yes" or "auto". Since "yes" forces scrollbars to be shown even if they aren't needed, there's little point to the "yes" value. Since the "auto" value is the default, you don't need to specify that, either.
(Did you notice that the above is a <UL>? Each <LI> starts with an <H3>head text</H3> and then continues with more content, until it eventually comes to the </LI>.)
By default, you get frames that have borders. These borders are also resize bars. Go ahead and drag one or both of the interior borders to resize your website. This can be very useful. In the next section we'll use my site as an example of how to turn this behavior off when you don't want it.
My Frames
This is how the frames are done in my site's index.html.
|
<FRAMESET COLS="180, *" BORDER=0>
<FRAME NAME="menu" SRC="menu.html">
<FRAMESET ROWS="60,*" BORDER=0>
<FRAME
NAME="banner"
SRC="banner.html"
SCROLLING = "no" >
<FRAME
NAME="main"
SRC="main2.html"
FRAMEBORDER="no"
FRAMEBORDER=0>
</FRAMESET>
<NOFRAMES>
This is where you'd put a version of the main page that would be used by a browser that didn't support frames (which isn't very common these days).
</NOFRAMES>
</FRAMESET>
|
I've used spacing and indenting to help me read the HTML. The browser doesn't care, but if you need to make a change a week or a month (or a year) after you write it, you'll care.
Did you notice that FRAMEBORDER="no" FRAMEBORDER=0 nonsense? During testing I found out that MSIE wanted it one way and Netscape wanted it the other way. So I've included both. I know you're a Mac person, but you'll have to find a Windoze friend to test your site with at least MSIE, since that's what a majority of your visitors will be using.
Happy Trails, Pardner
That's your introduction, Virginia. Hope you've enjoyed it. For more detail and a good HTML reference, use Google. I learned mostly from Joe Burns' HTML Goodies site. It's cluttered with ads, but the content's solid.
If you're not Virginia but are learning this on your own, I hope it's been helpful. If you're going to write javadoc, Sun's javadoc tool automatically supplies <HTML> and <BODY> tags. Don't put them in your javadoc. And promise me you'll do a more creative job than Sun's done with its API javadoc.