------------------------------------------------------------------------------
MC logo
Frames
[^] CSc 302 Outlines
------------------------------------------------------------------------------
<<Style Sheets Forms>>
  1. Purpose.
    1. Divide the browser area up into sub-frames.
    2. A layout tool.
    3. Provide a fixed directory or decoration.
  2. Drawbacks.
    1. Complex; requires lots of code.
    2. Consumes the scarce screen space.
    3. Difficult to bookmark.
    4. Problematic for small clients.
    5. Allows more spectacular mess ups than other HTML.
  3. Mechanics.
    1. A starting frameset page specifies the frames.
    2. Each frame is specified by dimensions and URL.
      Frame set does not provide the content of the frames, just the locations.
    3. The frameset does specify content for clients that don't understand frames.
    4. Therefore: Several files are combined to form a page.
  4. Frameset Format:
    1. Different DOCTYPE.
    2. <frameset> instead of <body>.
      <?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>
      <title>Frame Example</title>
      </head>
      <frameset cols="20%,60%,20%">
          <frame src="url1.html" id="frame1" name="frame1" />
          <frame src="url2.html" id="frame2" name="frame2" />
          <frame src="url3.html" id="frame3" name="frame3" />
          <noframes>
          <p>Frames not implemented or disabled.</p>
          </noframes>
      </frameset>
      </html>
    3. This makes vertical frames; rows makes horizontal.
    4. May use * for the last column width.
    5. The name/id is optional, but often needed.
  5. Some examples.
    1. Use cols to make vertical divisions. [ Vertical Frames ]
    2. Use cols to make vertical divisions. [ Horizontal Frames ]
    3. Use noresize="noresize" to keep the user from changing the the size of a frame. [ No Resize ]
    4. Use scrolling="yes" to force a scrollbar. Also takes no and auto. [ Forced Scrollbars ]
      My Netscape 7 appears to have no use for this option.
    5. Nesting to mix directions. [ Mixed ]
    6. Use marginwidth="whatever" and marginheight="whatever" to set margins on a frame. [ Margin ]
    7. Use frameborder="0" to turn off borders on frames. [ No Border ]
      1. Values are 0 or 1.
      2. Set in either <frame> or <frameset>.
      3. Border will appear if either bounding frame has it set on.
      4. Netscape 7, at least, doesn't seem to obey frameborder`' in <frame>.
  6. Loading content into frames.
    1. Use the target="id" attribute of a to load the the link in the frame named named id.
    2. Special target name
      1. _top removes the frames.
      2. _blank to open a new browser window.
      3. _parent replaces the parent frame-set. (Same as _top unless there are nested framesets.)
      4. _self the frame that specifies it.
    3. Used to make indexes. [ Index Frame ]
      1. The index is a single page loaded in a side frame.
      2. Links inside the frame area load pages there.
      3. Be careful with your target attributes; easy to mess up.
    4. Another Example.
  7. Internal frames.
    1. Tag <iframe> is used inside a regular HTML document.
    2. No special <frameset> starting page.
    3. Takes src, height and width attributes.
    4. Much like an image, but loads a whole page into the square.
    5. [ Iframe Demo ]
  8. [ FredCo ]
<<Style Sheets Forms>>