CMPS 235 Web Publishing Chapter 8 -- Frames



A broswer window normally contains only one web page (one XHTML document).  Frames allow a single browser window to contain multiple, independent frames, each frame containing a different XHTML document.  Much like a table, a frame page is divided into a set of frames by rows and columns.  Frames are considerably more powerful than tables.  Frames are great for the following: The use of frames, however, is controversial.  Many Web designers recommend against using frames,  because poorly designed frames make navigation confusing.  In addition, frames present indexing problems for most of the search engines.


The <frameset> Tag and Attributes

A frameset is a set of frames.  When working with frames, we first use a <frameset> tag to create a frame page, called frame definition document.   The frame definition document specifies the layout of frames on the frame page and the names of the Web documents that will fill the frames.  The most important difference between a regular Web page and a frame definition page is that the <body> ... </body> container tag is replaced by the <frameset> ... </frameset> container tag.  The <frameset> tag must include either the rows attribute and/or cols attribute to divide the frame page into row frames or column frames.   Using the rows and cols attributes together inside the same <frameset> tag creates a grid-like frame pattern.  The frameset tag can have following attributes:
Examples of the cols and rows attributes:
a.  To divide a page or any frame of a page horizontally into row frames b.  To divide a page or any frame on a page vertically into column frames c.  To divide the frame page into both row and column frames
Structure of Frame Definition Document

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


The <frame /> Tag and Attributes

The <frame /> tag is used to determine what actually appears in a particular frame.  For each frame in the frame set, there is a corresponding <frame /> tag.  The <frame /> tag is a stand-alone and it does not have a closing tag.  The <frame /> tags are enclosed within the frameset>...</frameset> tag.  The <frame /> tag can have the the following attributes:
Web Page Examples

Row Frames   (rows="25%,*") Column Frames   (cols="33%,*,*")
Row and Column Frames   (rows="25%,50%,*" cols="50%,*")
Checkboard Frames

Identifying frames in a frameset
Example 1
Example 2
Example 3


Nested Frame Sets

A frame set is a collection of frames and it is created by a <frameset>...</frameset> container tag.  Each frame is a rectangle.  Any frame can become a frame set by replacing the frame tag for that frame with another <frameset>...</frameset> container tag.  There is no limit on the depth of frame nesting.

The following frame page is an example of good frame page design that facilitates smooth navigation.  This frame page uses nested frame sets.

Header frame (static)
Menu
frame
(static)		 Display frame (dynamic)

The top frame is the header for the page and it remains static.  The frame on the left contains a menu of clickable items.  The frame on the right is a contents frame, displaying the page associated with the link from the menu.  For example, when a viewer clicks on a menu item on the left-hand frame, the page pointed to by the link will appear in the right-hand frame.  To create the above frame configuration, a nesting of <frameset> tags is used as shown below:

<frameset rows="24%,*">
     <frame name="header" src="header.html" noresize="noresize" />
     <frameset cols="20%,*">
         <frame name="menu" src="menu.html" />
         <frame name="display" src="display.html" />
    </frameset>
</frameset>

More examples of nested framesets: [Example 1]  [Example 2]

The <noframes> Tag
The <noframes> tag provides a markup alternative within a frameset document for frame-incapable browsers.  The <noframes> element contains a <body> elememnt and takes the following form.  The text inside the <noframes> block will be displayed only by the browsers that do not support frames.

<frameset>
      : (frame definition goes here)
     <noframes>
         <body>
           : (regular body content)
           : (will not be displayed by browsers that support frames)
         </body>
     </noframes>
</frameset>
     </html>


Targeting Data to Named Frames

Frames are only useful if their contents can be updated or replaced by other documents or data.  Normally, when we click on a link, a new page is loaded into the same window, replacing the page from which we linked.  With framed document, we have a choice of which of the frames the new page loads.  To identify an individual frame, the name attribute is used in the <frame /> tag.  Individual frames can then be targeted by the <a> tag taking a target attribute.  If multiple links on a page are to use the same target frame, the <base> tag can be used to eliminate repetition in the specifying of the target attributes in the links.

The <base> Tag

The initial content of a given frame is specified in the <frame> tag using the src attribute.  However, you can have other pages appear in the same frame using a target attribute in an <a href="URL" target="FrameName"> tag.  A link, by default, opens a page in the same frame that contains the link.  The target attribute can redirect the linked page to any specified frame.

The <base> tag with the target attribute allows you to specify a default targeted frame for all links within a document.  You can override the target specified in the BASE tag by choosing other target in the link itself.  The <base> tag is a stand-alone tag and it must be placed in the <head> section as shown below:


Magic Target Names (Predefined target Names)

   _top        forces the linked document to load into the
                   full browser window.
   _blank    opens a new blank window to display the
                   specified document.
   _self       overrides the <base> tag and forces a link to load
                   in the same window from which it is clicked in.

Specifying An Empty Frame
A frame can be emptied using the special about:blank url.
Ecample:   <frame name="frame5" src="about:blank" />