This is the 1997 tutorial, cleaned up and corrected over the years. Everything here works in Netscape Navigator 2 and later and Internet Explorer 3 and later. The code is shown in typewriter type; type it into Notepad or SimpleText exactly as it appears. Lessons: 1. The frameset page · 2. Splitting it again · 3. Names and targets · 4. NOFRAMES · 5. Borders · 6. Breaking out

Lesson 1: The frameset page

A framed site needs one extra page that holds all the others. Think of a window sash: the sash isn't the view, it just holds the panes of glass. The frameset page is the sash. It has a HEAD like any page, but no BODY. Where the BODY would be, it has a FRAMESET.

<html>
<head>
<title>Sam's Page</title>
</head>
<frameset cols="150,*">
 <frame src="menu.html"
  name="menu">
 <frame src="home.html"
  name="main">
</frameset>
</html>

Save that as index.html. Now make two ordinary pages, menu.html and home.html, each with its own BODY, and upload all three.

COLS splits the window left to right; ROWS splits it top to bottom. The sizes can be pixels (150), percentages (25%) or a star, which means "whatever is left over." So cols="150,*" is a menu 150 pixels wide and everything else for the main page. cols="*,2*" gives you one third and two thirds. My advice: make the menu a pixel size and the main page a star, so the menu doesn't get fat on a big monitor and skinny on a small one.

Lesson 2: Splitting it again

Want a banner across the top and a menu on the left? Put a FRAMESET inside a FRAMESET. The outside one splits the window into a top row and a bottom row, and the inside one splits the bottom row into two columns.

<frameset rows="80,*">
 <frame src="top.html"
  name="top">
 <frameset cols="150,*">
  <frame src="menu.html"
   name="menu">
  <frame src="home.html"
   name="main">
 </frameset>
</frameset>

Count the files: the frameset page, the banner, the menu and the main page. That's four pages to show your visitor one screen. Hold that thought until you read the other half of this site.

Lesson 3: Names and targets

This is the lesson everybody skips and the one that causes ninety percent of my mail. When you click a link inside a frame, the new page loads in that same frame unless you say otherwise. So if your menu says

<a href="recipes.html">Recipes</a>

your recipes will open inside the skinny menu frame, 150 pixels wide, and your menu will be gone. That's why we gave each frame a NAME in Lesson 1. Use the name in a TARGET:

<a href="recipes.html"
 target="main">Recipes</a>

If every link on the menu page goes to the main frame, save yourself the typing and put one line in the HEAD of menu.html: <base target="main">. Now every link on that page aims at the main frame unless the link says otherwise.

There are four special targets that start with an underscore:

• _top throws away all the frames and fills the whole window. Use this on every link to somebody else's site. Otherwise you've trapped their whole site inside your main frame, under your banner, beside your menu, and they will not thank you for it.
• _blank opens a brand new browser window.
• _self is the frame the link is in (that's what you get if you leave TARGET out).
• _parent is the frameset one level up. You'll only need it with nested framesets.

Lesson 4: NOFRAMES

Some browsers can't show frames at all: text browsers like Lynx, some of the little browsers on set-top boxes, and a surprising number of the robots that build search engine indexes. What they get is whatever you put between NOFRAMES tags, just before the last </frameset>:

<noframes>
<body>
<p>Welcome to Sam's page.
Start at the
<a href="home.html">main
page</a> or go straight to the
<a href="menu.html">list
of everything</a>.</p>
</body>
</noframes>

Please don't write "Your browser doesn't support frames. Get a better browser." That's rude to the person, and it's the only sentence a lot of search engines will ever list for your whole site. Put real words and real links in there.

Lesson 5: Borders, scrollbars and margins

By default you get a thick gray bar between the frames that visitors can drag around. To get rid of it you need three attributes on the FRAMESET, because Netscape listens to BORDER, Internet Explorer listens to FRAMESPACING, and both of them know FRAMEBORDER. Put all three in and everybody's happy:

<frameset cols="150,*"
 frameborder="0" border="0"
 framespacing="0">
 <frame src="menu.html"
  name="menu" scrolling="no"
  noresize marginwidth="0"
  marginheight="0">

• SCROLLING is yes, no or auto (the default: a scrollbar only when needed). Careful with no. If your visitor's screen is smaller than yours, whatever doesn't fit is simply cut off, and there's no way for them to get to it.
• NORESIZE stops people from dragging the border around.
• MARGINWIDTH and MARGINHEIGHT are the gap, in pixels, between the edge of the frame and what's inside it.

Lesson 6: Breaking out of somebody else's frames

If other webmasters link to you without _top, your page shows up inside their frames, with their banner over your head. Put this in the HEAD of your own pages and they'll pop themselves out into the full window when that happens:

<script language="JavaScript">
<!--
if (top.location != self.location) {
  top.location = self.location;
}
// -->
</script>

The <!-- and // --> hide the script from old browsers that don't do JavaScript, so they don't print it on the screen. One warning: don't put this in pages that are supposed to live inside your own frameset, or they'll break out of yours too, and you'll have written the best argument against frames on this whole site.

That's all six. If something doesn't work, check your TARGETs first, then check that every FRAMESET has its closing tag, then write me. And then, before you upload, go read the case against. Humor me.