CSE2WD - HTML Framesets

Frames

Frames provide a mechanism for dividing a browser window into a collection of smaller windows.

Using Frames

The browser window is split into a grid of independent windows called frames.
A window that is split into frames is "glued" together by a top level frameset document. The frameset document is used to manage the layout of the frames that are displayed within the frameset.
Unless specified, individual frames can be resized by the user.

Example 1 A frameset consisting of three columns

Example 1

<html>
<head>
<title>WEB Development</title>
</head>

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

      <frame src="page1.html" />
      <frame src="page2.html" />
      <frame src="page3.html" />

</frameset>
</html >

Example 2 A frameset consisting of two rows

Example 2

<html>
<head>
<title>WEB Development</title>
</head>

<frameset rows="*,*">

      <frame src="page1.html" />
      <frame src="page2.html" />

</frameset>
</html>

Example 3 A frameset consisting of 2 rows and 2 cols

Example 3

<html>
<head>
<title>WEB Development</title>
</head>

<frameset rows="*,*" cols="*,*">

      <frame src="page1.html" />
      <frame src="page2.html" />
      <frame src="page3.html" />
      <frame src="page4.html" />

</frameset>
</html>

Specifying Rows and columns

Rows and columns are specified in the frameset tag.

The row attribute specifies the height of each row as either an absolute number of pixels, a percentage of the window height or relative size to the other rows.

Similarly,the col attribute specifies the width of each column as either an absolute number of pixels, a percentage of the window width or relative size to the other rows.

Each row or col value is separated by a comma (as in the examples above)

Example 4 A frameset consisting of 3 cols
<frameset cols="*,2*,*">
gives the middle column twice the width of the other two.

Example 5 A frameset consisting of 3 cols
<frameset cols="20%,*,*">
gives 20% of the window width to col 1 and divides the remainder equally between the other two columns.

To generate a grid of frames, both row and column must be specified:
eg. <Frameset cols="*,*,*" rows="*,*,*">

would give a 3X3 grid.

Example 6

<html>
<head>
<title>WEB Development</title>
</head>

<frameset cols="*,*,*" rows="*,*,*">

      <frame src="page1.html" />
      <frame src="page2.html" />
      <frame src="page3.html" />
      <frame src="page4.html" />
      <frame src="page5.html" />
      <frame src="page6.html" />
      <frame src="page7.html" />
      <frame src="page8.html" />
      <frame src="page9.html" />

</frameset>
</html>

Notice that frames are assigned to the grid on a row by row , left to right basis.

frameborder = "0"|"1" "off"|"on"
longdesc = url
marginwidth = number (pixels) distance between left and right edges of the frame and the frame contents.
marginheight = number (pixels) distance between top and bottom edges of the frame and the frame contents.
name = text assigns a name to the frame so that it can be used as a target for displaying content specified by a url in another frame.
reserved name tags:

_blank

target = "_blank" in a href link launches a new blank browser window to display the linked document.
warning: each time the link is clicked it launches a new window.

_self

this is the default and is assumed if target is not specified. The linked document is loaded into the same frame that you clicked.

_parent

loads the document into the parent frame. Equivalent to _self for a top level frame.

_top

the document is loaded into the top-level window replacing the frameset.
ie. target="_top" breaks out of the frameset and the document is displayed in the browser window without a frameset.
noresize prevents a user from resizing the frame.
scrolling = "yes" | "no" | "auto"

Each frame can have scrolling independent of the other frames. This is useful when it is necessary to display information that would otherwise be scrolled out of the visible part of the browser. Eg. navigational aids.
src = url location of the intial document to be loaded into the frame

nested frame example

      <html>
          <head>
             <title>Nested Frames</title>
          </head>
      
          <frameset cols="*,*,*">
            <frameset rows="*,25%">
                <frame src="page1.html" />
                <frame src="page2.html" />
            </frameset>
            <frame src="page3.html" />
            <frame src="page4.html" />
          </frameset>
      </html>

Example of nested frames

generates this:

Problems with using frames:

This has been best summarized by Jakob Nielsen ( considered by many to be the leading expert on web design and usability ).

Jakob Nielsen's famous article on reasons not to use frames

The fundamental design of the Web is based on having the page as the atomic unit of information.

When using frames, the user's view of the page is not that of a single document. Text to speech browsers have to determine how to read the frameset- the order is not obvious. Non-graphical browsers also suffer the same problem.

Using frames breaks with the fundamental idea of a web page having a single URL. A frame set consists of several pages each with a different URL and at any point in time the frameset content can change.

Bookmarking a frameset does not consistently retain information about the state of pages loaded into the frames. At times, the bookmark is to the initial frameset regardless of what is on the screen. Recent browsers seem to be addressing this issue, however.

One of the biggest misuses of frames is where designers use frames as a page layout tool. This combined with frames breaking the one URI - one web page model of the Web constitutes the biggest irritation to Web purists.

Using named target frames with hyperlinks

<a href="url" target= " name " >link description</a>

By using the target attribute, the document specified by the url will be loaded into the named frame in the current frameset.

If the target attribute is omitted then the page will be loaded into the same frame as the hyperlink.

Frameset DOCTYPE

The World Wide Web Consortium (W3C) has defined a XHTML 1.0 Frameset Document Type Definition (DTD). For an XHTML 1.0 Frameset document to pass W3C validation, it must contain the following DOCTYPE declaration.

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<noframes> </noframes>

Although a frameset will recognised as valid XHTML 1.0 Frameset without them, you should use <noframes> in conjunction with your <frameset> document.

The XHTML 1.0 Frameset DTD requires the <noframes> within the <frameset> element and a body element containing well formed XHTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB Development</title>
</head>

<frameset rows="*,*" cols="*,*">

      <frame src="page1.html" />
      <frame src="page2.html" />
      <frame src="page3.html" />
      <frame src="page4.html" />

      <noframes>
        <body>
                <p> You appear to have disabled the use of frames or your
                browser is not frames capable.  This document demonstrates a 
		two row, two column frameset.
                </p>
        </body>

      </noframes>

</frameset>
</html>

Inline Frames <iframe>

Inline frames (floating frames) are frames that can be embedded into a regular XHTML document and are treated like any other object within the browser window.

<h3>testing <iframe></h3>
<iframe src="http://google.com.au/" width="350" height="200">
    This browser does not support iframes.  The document loaded 
    here is located at <a href="http://google.com.au/">google</a>
</iframe>

testing <iframe>

src
height
width
also the regular frame attributes