	Welcome
	Overview
	Structure
	Text
	Images & Links
	Lists
	Tables
	Frames
	Style Sheets
	More Help
	Credits

Using frames to
split your pages into
multiple scrollable sections

Frames used to be quite common in web pages, after Netscape invented them and eventually got them standardised. However, most designers now do NOT favour them, as they produce all sorts of complications. What they allow you to do is to divide the browser window into separate, scrolling or non-scrolling section. You can create a page, for example, with a fixed logo banner at the top, a fixed navigation panel to the left, and the rest of the window for the main scrolling page content.

Please use frames with caution and restraint, because it's very easy to create nightmarishly complex, messy pages which can really put off your viewers. But if you're keen to find out more, here's how to start creating frames in your pages:

<frameset> . . . </frameset>

This pair of tags defines a special block which will create the frame layout. You include these within a file which contains no body block, just a head block and this new frameset block. Within the frameset block, you place an appropriate number of <frame> tags, as described below, to specify individual frames and their layout.

<frame src="filename">

This tag creates a frame, whose properties you go on to specify, using a number of attributes. This tag must always occur inside a frameset block, but you can have as many as you like. Each frame tag must at least contain a src="xxxx" attribute, which defines the HTML file you want to use as the frame's contents. Thus a single frames page will consist of several separate HTML files: the `root' file containing the <frameset> block, and then one file for each frame you have defined. These frame files are just standard HTML files with <head> and <body> blocks.

<html>
<head>
<title> . . . </title>
</head>

<frameset>
    <frame src="file1.html" . . .>
    <frame src="file2.html" . . .>
</frameset>
</html>

The code presented on the left shows you what the skeleton of a frames `root' file should look like. This code would create two frames within the window, and then fill them respectively with file1.html and file2.html. There are many other important attributes used with the <frameset> and <frame> tags, and these are described underneath. With a little practice, you will soon be producing frames-filled pages exactly as you want them.

The following attributes can be used with the <frameset> tag only, and thus are associated with defining the broad layout of your frames within the browser's window:

frameborder="no"	turns off the border between adjacent frames
framespacing="x" border="x"	Microsoft and Netscape's respective attributes for defining the thickness of the border in pixels (if borders aren't turned off by the above attribute)
cols="x,x"	creates a two column layout with frames of the specified width - you may have as many columns as you like, and widths may be specified as absolute numbers of pixels, as percentages of the browser window width, or as relative sizes using the * character: for example, use `cols="1,3,6*"` for three columns whose widths are in the ratio 1:3:6 in pixels
rows="x,x"	creates a two row layout with frames of the specified height - the same rules apply as to the `cols` attribute above

This next groups of attributes are used only with the <frame> tag, and define the specific properties of each frame, the overall layout having been defined as explained above:

frameborder="no"	turns off the border between adjacent frames
marginheight="x" marginwidth="x"	specifies the amount of clear space between the frame's contents and its border, respectively in the vertical or horizontal directions
name="xxxx"	defines a name for the frame which is then used in targetting, as described below
scrolling="no"	removes the frame's scrollbar so that it cannot be moved
noresize	specifies that the frame cannot be resized by dragging its border

The way to create complex frames layouts is to use nesting. You can actually nest <frameset> blocks, and this is the only way to create panelled arrangements. The principle is very simple: you work top-down, creating, for example, the rows you want first, then the columns you want within each row, and so on. To create the common top-banner plus side-navigation-bar layout, you would first split the window into two rows, one of which is the top banner. Then another <frameset> block would be included, which split the large bottom "row" into two columns, one of which is the navigation bar. As always, the best way to how the code is structured is to view the source of a page which includes frames.

So far we have covered most of what you will need to know to get your frames layout as you want it. The final, and most important item to consider, is targetting. This is how you define where hyperlinked pages will appear within a framed window. If you don't set up your targetting correctly, you will annoy your viewers, because they'll be left with redundant frames hanging around their browser windows even after they've left your site, for example!

You must add the target="xxxx" attribute to your <a href . . > link tags, where the value is either the name of a frame or one of three common special values described below. For example, if you have a link in a left hand frame, and you want it to load the requested page into a right hand frame, you put a target="right-frame-name" attribute in the link tag, and you ensure that in your main frameset `root' file, the right hand frame is given this name via the name="xxxx" attribute. The special target values are the following, and their necessity will soon be appreciated:

_blank	this will cause the linked page to be opened in a new unnamed window
_self	use this to load the linked page in the current frame
_top	this value is vital to clear your window of frames when linking to an external site: use this to specify that the linked page is loaded into the full browser window, removing all existing frames in the process

Note that the default target for all links is _self, meaning that any links in a right hand frame will, for example, load their linked pages into that same right hand frame, replacing the original document. But as you can imagine, if you had a page with lots of external links, you would have to add a target="_top" attribute to every link tag. Usefully, you can alter the default target like this:

<base target="xxxx">

This tag must be placed in the <head> block of the document, and will automatically cause all links to be targetted to whatever you specify within it, which could be an assigned name or one of the above special targets. So for a page with many links to other sites, you would probably want to put <base target="_top"> in that page. If you want any links in the page to be targetted elsewhere, you can override this global assignment by inserting a local target attribute in the link, as usual.

<noframes> . . . </noframes>

Finally, in order to cater for browsers which cannot view frames, you can include this pair of tags within a <frameset> block in the `root' file, and everything you place between them will be displayed by non-frames browsers, but ignored otherwise. Most commonly, you would include a <body> block and a full alternative version of your page here, so that simple browsers wouldn't be left out; but a lot of people only use the <noframes> facility to put up a message telling users of simple browsers that they won't be able to view the page. It's up to you.

	Welcome
	Overview
	Structure
	Text
	Images & Links
	Lists
	Tables
	Frames
	Style Sheets
	More Help
	Credits

Using frames to split your pages into multiple scrollable sections

Using frames to
split your pages into
multiple scrollable sections