FRAMES

1
FRAMES

• Adapted from materials
• developed by Dr. Soe
• (updated October, 2005)

2
Frames

• Frames format HTML like tables
• Frames use 2 types of documents
• Content Documents
• text, pictures, hyperlinks, photos, etc.
• Frames Document
• Defines layout in columns or rows
• or columns within rows or rows within columns
• Provides scroll bars
• Link in one frame can load HTML doc in another
  frame

3
ltFramesetgt Tag

• Required for Frames-style pages
• Replaces ltBODYgt tag completely
• ltFRAMESETgt Tag has 2 possible attributes--numerica
  l values size in pixels and/or
• ROWS
• COLS
• ltFRAMESET ROWS"50,50" or COLS"25, 75"gt

4
3 Column Frame
ltHTMLgt ltHEADgt ltTITLEgt3 column frameslt/TITLEgt lt/HEA
Dgt lt!- note Don't use BODY tag -gt ltFRAMESET
COLS "50, 25, 25"gt ltFRAME SRC
"doc1a.htm" name"left"gt ltFRAME SRC
"doc2.htm" name"middle"gt ltFRAME SRC
"doc3.htm" name"right"gt lt/FRAMESETgtlt/HTMLgt
5
2 Row Frame
ltHTMLgt ltHEADgt ltTITLEgt2 Rowslt/TITLEgt lt/HEADgt ltFRAM
ESET ROWS "50, 50"gt ltFRAME SRC
"doc1a.htm" name"top"gt ltFRAME SRC
"doc1b.htm" name"lower"gt lt/FRAMESETgt lt/HTMLgt
6
Nested Frames
ltHTMLgt ltHEADgtltTITLEgtNested lt/TITLEgtlt/HEADgt ltFRAMES
ET COLS "40, 60, 100"gtlt!- total !100 -gt
ltFRAMESET rows ", " BORDER1
MARGINWIDTH 10gt ltFRAME SRC
"doc1a.htm"gt ltFRAME SRC
"doc1b.htm"gt lt/FRAMESETgt ltFRAME
SRC "doc2.htm"gt ltFRAME SRC "doc3.htm"
SCROLLINGYESgt lt/FRAMESETgt lt/HTMLgt
7
Frame Interaction

• Hyperlink in 1 frame changes contents of another
  named (target) frame
• Assign meaningful names to frames (NAME "menu",
  "right")
• Click ltA HREF "contents.htm" TARGET
  "right"gtherelt/Agt to see the Table of Contents.

8
TARGET Attribute

• Tells browser frame into which requested document
  is displayed
• Name of target frame (e.g., "menu") OR
• Special ("magic") targets
• "_top" Whole window
• "_blank" New (unnamed) window
• "_self" Frame containing hyperlink clicked
• (if no target, defaults to _self)

9
Lots of People Hate Frames

• http//users.ipa.net/djhill/frmain.html
• http//www.useit.com/alertbox/9612.html
• http//victorian.fortunecity.com/brambles/4/frames
  /

10
Frames Exercise

• click hotlink in IE , then View Source
• save file on Desktop or floppy
• click in left frame , then View Source
• save file on Desktop or floppy
• change links to Internet web pages
• use full address so href"http// etc."