Framing the Web / Layout

The Layout

Framing the Web

Creating layout with frames requires two new tags: <frame> and <frameset>.

`The <FRAME> Tag`

The <frame> tag describes the content and the behavior of a single frame.

The frame tag has one required attribute - src - which specifies what file to display in the frame. A basic frame tag:

	<frame src="information.html">

This tag tells Navigator to display the file information.html in this frame.

Since the content may exceed the area of the frame, Navigator might put scrollbars within the frame. You may, however, indicate within the frame tag whether you would like the scrollbars to be present:

	<frame src="information.html" scrolling="no">

Whereby you would force the client to omit the scrollbars. The attribute scrolling may also take the values "yes" and "auto," forcing the browser to definitely include the scrollbars, or to include them as necessary. If unspecified, the scrolling attribute's default is "auto".

There is no closing frame tag.

An HTML file that appears in a frame should not have <HEAD> information, because the file represents a part of a larger document. Therefore, files that appear in a frame should only be enclosed in <BODY> tags. For example, the file information.html specified in the frame tag above might look like:

	<body bgcolor="#ffffff">
		<h2>Information on Spiders</h2>
		<hr>
		<p>Spiders have eight legs and a segmented body.
		They come in a variety of colors and are notorious for 
		scaring children and adults alike.
	</body>

`The <FRAMESET> Tag`

Frames are arranged using the <frameset> tag. A frameset consists in one or more frames and the frameset tag defines the sizes of the frames within a frame set. Within the <frameset> tag, you may specify either rows or cols attributes (but not both!). These attributes take a list of measurements as a value, which may be defined in one of three ways: absolute measurements in pixels, percentages of the window size, and relative measurements of the window sizes. The following examples demonstrate each kind of measurement.

This code defines a browser whose window is split down the middle, each frame taking 50%:

	<frameset cols="50%,50%">
	.
	.
	.
	</frameset>

Using relative measurements, this code defines the exact same layout as above:

	<frameset cols="*,*">
	.
	.
	.
	</frameset>

This code sets up three horizontal frames, defining their sizes using a combination of absolute and relative measurements. The topmost frame is 120 pixels wide, the middle frame 72 pixels wide, and the bottom frame simply takes up the remaining space:

	<frameset rows="120,72,*">
	.
	.
	.
	</frameset>

The file with the frameset information, most often the index.html file, contains header information for the entire frames document:

	<html>
	
	<head>
	<title>Frames Document</title>
	</head>
	<frameset rows="120,72,*">
	.
	.
	.
	</frameset>
	
	</html>

Notice the differences between this and a standard HTML document. When using frames, the main file does not contain <BODY> tags. The <FRAMESET> takes the place of the <BODY> tags.

`Putting Them Together`

The only elements that may appear between <frameset>...</frameset> tags are <frame> tags. The frames established within framesets correspond to the measurements in the frameset tag.

To elaborate on the previous example, this document consists in three rows of one frame each. The topmost frame, 120 pixels wide, contains a file called titlebar.html. The file navigation.html occupies the middle frame which is 72 pixels wide. The remainder of the browser window is taken up by the last frame with the file information.html:

	<frameset rows="120,72,*">
		<frame src="titlebar.html">
		<frame src="navigation.html">
		<frame src="information.html">
	</frameset>

`More Complex Layouts`

By nesting one frameset within another frameset, you can create more complex layouts.

Suppose you begin with a simple frameset of two frames:

	<frameset cols="*,2*">
		<frame src="navigation.html">
		<frame src="information.html">
	</frameset>

This frameset generates a splitscreen with the left frame one-third the width of the browser window. The left frame contains the file navigation.html and the right-hand frame contains the file information.html.

To create a more complex frame layout, you can insert this first frameset into another frameset:

	<frameset rows="20%,*">
		<frame src="title.html">
		<!-- the original frameset -->
		<frameset cols="*,2*">
			<frame src="navigation.html">
			<frame src="information.html">
		</frameset>
	</frameset>

In this case, the original frameset now sits inside a "larger" frameset, dividing the bottom row into two columns. In the end, this code divides the browser window into three frames. A single frame along the top contains the file title.html. The second row, made up of two frames, contains the files navigation.html and information.html.

When building your own complex layouts, remember to treat the frameset as a unit, and understand that it can be nested inside other framesets.

Here are some other framesets. Before clicking "Show Me" try envisioning the layout:

	<frameset cols="30%,*">
		<frame src="navigation.html">
		<frameset rows="*,*">
			<frame src="information.html">
			<frame src="image.html">
		</frameset>
	</frameset>

`Borderless Frames`

	<frameset cols="30%,*" FRAMESPACING="0" FRAMEBORDER="0" BORDER="0">
		<frame src="navigation.html">
		<frameset rows="*,*" FRAMESPACING="0" FRAMEBORDER="0" BORDER="0">
			<frame src="information.html">
			<frame src="image.html">
		</frameset>
	</frameset>

Borderless frames can be tricky. Since Internet Explorer and Netscape use different attributes, you need to include them all for borderless frames to work well on both browsers. You'd think that BORDER=0 should do the trick, but we've found that including FRAMESPACING=0 (for IE) and FRAMEBORDER=0 (again for IE) is the combination that works everywhere.

`Resizable Frames with Colored Borders`

	<frameset cols="30%,*" FRAMEBORDER="3" BORDER="3">
		<frame src="navigation.html">
		<frameset rows="*,*" FRAMEBORDER="3" BORDER="3" BORDERCOLOR="#CC0000">
			<frame src="information.html">
			<frame src="image.html">
		</frameset>
	</frameset>

	<frameset rows="*,*">
		<frameset cols="*,3*">
			<frame src="navigation.html">
			<frame src="image.html">
	
		</frameset>
		<frameset cols="3*,*">
			<frame src="information.html">
			<frame src="glossary.html">
		</frameset>
	</frameset>

Comments are welcome

URL: https://webreference.com/dev/frames/layout.html

Framing the Web / Layout

The Layout

Framing the Web

The <FRAME> Tag

The <FRAMESET> Tag

Putting Them Together

More Complex Layouts

Borderless Frames