Frames

1
Frames

• COM344

2
(No Transcript)
3
Advantages of Frames

• Allow parts of the page to remain stationary,
  while other parts can be scrolled -E.G.
  Navigation Bars
• Keep title information static and on screen
• Conforms to expectations?

4
Simple Frame Structure
5
Simple Frame
This HTML file divides the browser window into 2
panes.
ltFRAMESET gt lt/FRAMESETgt
6
Frameset Code

• ltHTMLgt
• ltHEADgtltTITLEgtA FRAMElt/TITLEgt
• lt/HEADgt
• ltFRAMESET COLS,gt
• ltFRAME SRCleftpage.htmlgt
• ltFRAME SRCrightpage.htmlgt
• lt/FRAMESETgt
• lt/HTMLgt

7
Dividing the window attributes

• COLS - specifies vertical frames ltFRAMESET
  COLS30, 70gt
• ROWS - specifies horizontal frames ltFRAMESET
  ROWS30, 70gt

8
ltFrameset rows ,gt
9
Nested Frames
10
Nested Frames

• ltHTMLgt
• ltHEADgtTITLEgtlt/TITLEgtlt/HEADgt
• ltFRAMESET COLS","gt
• ltFRAME SRC"left.html"gt
• ltFRAMESET ROWS","gt
• ltFRAME SRC"right.html"gt
• ltFRAME SRC"bot.html"gt
• lt/FRAMESETgt
• lt/FRAMESETgt
• lt/HTMLgt

11
Targeting Frames

• Co-ordinating the display of linked documents.
• Achieved by
• Assigning a name to each frame region in within
  the frame src tag.
• Using the target attribute in within the link tag.

12
(No Transcript)
13
(No Transcript)
14
Changes to frameset file

• lthtmlgt
• ltheadgt
• lttitlegt frames example lt/titlegt
• lt/headgt
• ltframeset cols "20,80"gt
• ltframe src "leftbar.html" name "nav"gt
• ltframeset rows "20,80"gt
• ltframe src "topright.html" name "tright"gt
• ltframe src "loweright.html" name "lright"gt
• lt/framesetgt
• lt/framesetgt
• lt/htmlgt

15
Changes to the link file

• lthtmlgt
• ltheadgt
• lttitlegt frames example lt/titlegt
• lt/headgt
• ltbodygt
• left bar
• ltpgt
• lta href"yellow.html" target "lright" gtlink to
  the bottom rightlt/agt
• lt/bodygt
• lt/htmlgt

16
All links going to the same region?

• ltHEADgt
• ltBASE TARGET lrightgt
• lt/HEADgt

17
External Links

• Do not display external sites within your frames
  set. Make them open in a new window using
  TARGET_TOP

18
Frameset Attributes

• colsestablishes the number and size of columns
  in a frameset
• rows establishes the number and size of rows in
  a frameset
• frameborder10 - defines whether a 3d border is
  present
• bordercolorhexcode - sets a border color for
  all frames in the frameset.

19
OTHER FRAMESET ATTRIBUTES

• FRAMEBORDER - specifies border around frameset
  (they have one by default)ltFRAMESET
  FRAMEBORDERNOgt
• BORDER - speciifes border thickness in pixels,
  ltFRAMESET BORDER 2gt
• BORDERCOLOR specifies border colour ltFRAMESET
  BORDERCOLORBLUEgt

20
Frame Attributes

• noresize - Prevents users from resizing the
  frame.
• nametext - allows the frame to be referred to
  as a target in a hyperlink.
• scrollingyes/no - specifies whether scrollbars
  appear in the frame.

21
Disadvantages of Frames

• Not supported by older browsers.
• Can make site production more complicated - have
  to produce multiple files for each page.
• Some people find frames hard to navigate.
• Users cannot bookmark individual pages easily.

22
Disadvantages continued..

• A large number of frames may increase the load on
  the server - especially if they contain lots of
  graphics.
• Cause problems for Search Engines - Page
  displayed out of its frameset -affect the
  usefulness of the information.

23
Frame-proof your site

• Put this in the ltheadgt of your page
• ltSCRIPT LANGUAGEJAVASCRIPTgt
• lt! - - Hide from old browsers
• if (top !self)
• top.location.href location.href
• //Stop hiding from old browsers - - gt
• lt/SCRIPTgt