Frames

Frames and Framesets:
  • let you divide screen into different regions (frames)
  • require 1 html file for each frame contents plus 1 html file to set up frames

Pick here for an example of using frames:

  1. index.htm sets up frames
  2. left and right frame pages are standard pages
  3. New tags are in frame set up file (index.htm in our example)
  4. toc.html is displayed in left frame
  5. splash.html is displayed in right frame

Here's that example, linked differently... More Frames

Tags for Frames

<frameset>
<frame>
<frame>
<noframes>
      Information to user about not being able to view frames
</noframes>
</frameset>

Attributes for Frameset

cols
sets the number of columns in the frameset
(can't be used with rows attribute)

rows
sets the number of rows in the frameset
(can't be used with column attribute)

border="0"
For Netscape - turns off frame borders - (see additional notes)

<frameset cols="25%,75%">     </frameset>
<frameset cols="25%,50%,25%">     </frameset>
<frameset row="100,*">     </frameset>

Attributes for Frame

src=" "
specifies the html file to display in the frame

name=" "
assigns a name to the frame - can be used later with a target attribute
Example:
<frame src="./toc.htm" name="left">
Name is used by the target attribute to load a file into frame
<a href="./page2.htm" target="frame_name">
<a href="url" target="left">

frameborder=" " (1/0 or yes/no)
sets width of border with number for IE or borders on/off for Netscape (see additional notes)

framespacing=" "
IE only - sets extra space around frames (see additional notes)

marginwidth=" "
indents from the left and right side of the frame by the value specified (pixels) - basically a left and right margin for the frame

marginheight=" "
top and bottom margin for the frame - specified in pixels

noresize
locks a frames size - can't be resized by the user
by default, a frame is sizable.

scrolling=" " (yes, no, auto)
controls the use of scroll bars on a frame. "auto" add scroll bars to frame only when needed.

Examples

1. Simple frameset - 2 Columns

<frameset cols="25%,75%">

<frame src="./toc.htm" name="left">

<frame src="./info.htm" name="right">

</frameset>

2. frameset - 2 Columns

<frameset cols="25%,75%">

<frame src="./toc.htm" name="left" scrolling="auto" marginheight="5" marginwidth="5" >

<frame src="./info.htm" name="right" scrolling="auto" marginheight="5" marginwidth="5" >

</frameset>

Frame Borders

Control the width of frame border differently based on browser

Microsoft IE

<Frame frameborder="0" framespacing="0">
Need both attributes to remove borders with IE
frameborder=" " frameborder="1" or more to set width
0 to remove border
framespacing=" " 1 or more to set blank space width around frame
0 to remove border

Netscape

<Frame frameborder="Yes">
or
<Frameset border="0">
frameborder=" " frameborder="yes" to have a border
frameborder="no" to remove border
doesn't seem to work
border="0" removes borders for Netscape

---------

Hands-on

  1. Download the files used in the frame sample to your local computer.
    1. index.htm - sets up frames definition with frameset and frame tags
    2. toc.html - html file to display in left-hand table of contents
    3. The four pages that appear on the right-hand frame:
      • splash.html
      • prod.html
      • serv.html
      • resblank.html
  2. Modify the toc and the contents pages to give them your personal touch. This may mean adding graphics, changing the theme, etc.
  3. When you are done, put all the files back on the server in a new directory under your public_html directory. (With ftp, use the mkdir command.)
to Syllabus