Frames
What are Frames?
  • frames are a way of dividing a browser window into different sections or panels
  • each panel can display different content
When Should You Use Frames?
  1. when one section of the web page remains relatively constant
  2. when you want a cause and effect relationship between sections
  3. when you want to display the content of multiple files on the same page at the same time
  4. when consistency is part of your goal

Frames are best used when you want to divide the
browser window into 2 or at most 3 separate sections
HTML Coding for Frames
Note:  the <frameset> and </frameset> tags go between the </head> and <body> tags
  • <frameset> defines the frames settings
    • attributes (subcommands) include:
      • rows="# of pixels | % | * "  
        • # of pixels = sets the absolute height of the panel
        • % sets the relative height of the panel in relation to the browser window
        • * allows the browser to automatically scale the height of the panel 
      • cols="# of pixels | % | * "
        • # of pixels = sets the absolute width of the panel
        • % sets the relative width of the panel in relation to the browser window
        • * allows the browser to automatically scale the width of the panel
      • Rows and Cols Note:  separate each row or column you are defining with a comma 
        [e.g., <frameset rows=" 175, 25%, * ">  defines 3 rows, the top panel is 175 pixels high, the middle panel's height is 25% of the browser window, and the bottom panel fills in the remaining space in the browser window]
      • border="# of pixels"  sets the width of the frame's border (we often set this to 0)
    • Frameset Note:  you cannot define both rows and columns in the same frameset!  if you want both rows and columns you must nest framesets
  • <frame>  defines the content and look of a specific frame
    • Note:  you need a <frame> tag for each panel you have defined in your <frameset> tag
    • attributes for the <frame> tag include:
      1. src="HTML file | .GIF file | .PDF file | other content file"
      2. name="xyz"  where xyz assigns a name to this particular panel
      3. marginwidth="# of pixels"  lets you specify the distance between the sides of the frame and the content inside of the frame
      4. marginheight="# of pixels"  lets you specify the distance between the top and bottom of the frame and the content inside of the frame
      5. scroll="yes | no | auto"  lets you control whether or not your reader sees the scroll bar in the frame
      6. noresize  prevents the viewer from resizing the frame by grabbing the frame edge and moving it with their mouse
      7. bordercolor="hexadecimal code"  colors the frame border defined by this specific <frame> command
  • </frameset>  ends the frames settings definition
Clicking on a Hyperlink in one panel and opening the content in another panel
  • use the <base target="panel name"> command in the HTML document that contains the hyperlinks that will be clicked on
  • panel name = the xyz name you created above in the <frame> command using the name= attribute
  • Important Note:  this command needs to be placed before the <body> command in this HTML document
Dealing With Browsers That Can't Display Frames
  • use the <noframe> tag -- this starts the unframed HTML page description
  • create HTML coding for a page you would like the viewer to see instead of the framed version
  • the coding looks like this:
    • <noframe>
    • <body>
      • the HTML commands to create the non frame web page go here
    • </body>
    • </html>
Additional Resources for Frames and Inline Frames:

Fix Your Site With the Right DOCTYPE!
by Jeffrey Zeldman  (http://www.alistapart.com/articles/doctype/)

You’ve done all the right stuff, but your site doesn’t look or work as it should in the latest browsers.

You’ve written valid XHTML and CSS. You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements. Yet, in browsers designed to support these very standards, your site is failing. A faulty DOCTYPE is likely to blame.

According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax.

DOCTYPES THAT WORK

So what DOCTYPEs should we use?  The following complete DOCTYPEs are the ones we need:

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
		
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
		
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

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

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Some Additional Links About DOCTYPES:
  1. Choosing a DOCTYPE by Web Design Group
  2. Activating the Right Layout Mode Using the Doctype Declaration 

back to the  top of this page
back to the  Web Site Design Home Page
back to  Professor Fisher's Home Page
 
 
this page is maintained by Reed Fisher
last updated August 25, 2006