10: Frames
Frames can be really useful for some applications - like if you have a long table of contents and you want people to be able to move around easily between items in it. Then you'd put a skinny frame along one side with the table of contents in it, and a big frame in the rest of the window for displaying the documents that you select from the table of contents. Some people put a skinny frame along the top to put an ad banner in, so that you're forced to look at it no matter how far down the page you scroll.
To have a 'framed' window like I described above, you'll need at least three .html documents. The first one defines the frames and frames layout, and the others are used as the contents of those frames. You need at least one page for content for each frame, because you have to fill them. The page that fills them might change, but you have to load one up as a default, otherwise that frame will stay empty.
The contents of the frames are normal HTML files, and are created normally.
The file that defines the frame has a totally different structure than a regular HTML file, however.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Frameset Title</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAME name="toc" src="toc.html">
<FRAMESET rows="50,*">
<FRAME name="banner" src="banner.gif">
<FRAME name="content" src="startcontent.html">
</FRAMESET>
<NOFRAMES>
<P>Either links to the content pages or a copy of the first content page goes here, for people without frames-capable browsers.</P>
</NOFRAMES>
</FRAMESET>
</HTML>Now, you may have noticed that the DOCTYPE declaration right at the top of this page is different from the normal one - because a frameset is a different type of document entirely from a normal HTML page.
The HEAD and TITLE parts are still the same, because they don't deal with the display. You can put meta-data in the head of the document for search engines and so on. However, there is no BODY tag, because there is no document body.
The FRAMESET tag replaces the BODY tag in a frameset page, and defines how the page is to be split up. There are several ways of doing this, only one of which is displayed above. The first frameset defines two columns, the first 20% of the page width, the second 80%. You can also define column widths using a *, where cols="*,4*" would get you the same as 20%, 80%. All * portions are the same size, so the *,4* split would get you two columns, one of width * and one four times that width. The * width is chosen so that all frames fill the window completely. A *,* split would get you two columns of equal size, a *,4*,* split would get you two columns of equal size on either side and one column four times wider in the middle. On the other hand, if you want your table of contents to be a specific width, you can specify a number, which is the number of pixels. However, if you use this method, remember that someone is going to use a screen size different than you and put a * in there somewhere. Frex, you can put cols="200,*", which would give you a 200-pixel wide column and then a second column that takes up all the remaining space. A FRAMESET can also be split into horizontal splits, using the rows="x,x" element in the FRAMESET tag. It works just like the cols element, except it splits the screen into horizontal fragments instead of vertical ones.
FRAMESET tags can be nested: You can split off a 50-pixel wide strip off the top using rows="50,x" in the first tag, then after defining what goes into that top strip, you can put another FRAMESET tag defining cols="200,x" to put a 200-pixel wide strip along the left side. If you want to nest FRAMESET tags, you simply put another FRAMESET opening tag where the FRAME tag would go if you weren't nesting them, as I did in the example.
FRAME tags define what goes into the frame, and are placed between the FRAMESET start and end tags. They fill the frames from left to right or top to bottom, depending on how you split your screen up. You should name them, so that you can refer to them when making links go to a specific frame.
Normally, when you click a link, the browser replaces the document containing the link with the new document, but if you've got a toc/content frameset, you want to click on a link in the toc and have the content frame change. This is done with the 'target' element in the A tag. If you type <A href="somefile.html" target="content"> to define a link, when you click on it the file somefile.html will be opened in the window named 'content'. Now, if you named one of your frames 'content', then that's where somefile.html will be displayed. If there is no existing frame or window named 'content', the browser will create a new browser window, name it 'content', and open somefile.html there. If you have a table of contents with lots of links, you probably don't want to type target="content" in every one. Instead, you can use the BASE tag at the beginning of your toc document. If you type <BASE target="content"> at the beginning of your toc document body, then all hyperlinks will have their target element set to 'content' by default. Much easier.
The NOFRAMES tag contains information that is only displayed if the browser reading the page doesn't support frames. If the browser supports frames, it knows to ignore everything between the NOFRAMES start and end tags. If the browser doesn't support frames, it doesn't recognise the FRAMESET and FRAME tags, so ignores them like a well-behaved browser is supposed to do, and then it suddenly sees stuff it recognises, so it displays that. Please at least put a link to your main content page in the NOFRAMES section for people who don't have a frames-capable browser, and make sure that your content pages are navigable without the table of contents in a frame right beside them.
While frames can make it a lot easier to jump from place to place in a large document, they also make it difficult to bookmark a specific page so the reader can come back to it later. This is because the browser sees the frameset page, and when you make a bookmark, it bookmarks the frameset page. Then when a user revisits that bookmark, the page that loads is not the page they bookmarked, but the page that loads by default as defined in the frameset. It also makes the 'back' and 'forward' buttons on the browser behave oddly. Some browsers will let you press the back button and will back up one step in the most recently changed frame, and some will back up one step in the browser window, which would be whichever page you were visiting before you went to the frame page. Just something to keep in mind; this is one of the reasons I don't use frames on my site.
