Frames

1
Frames

• Recognize a web page that uses a frame
• Identify advantages and disadvantages of using
  frames
• Be aware of web accessibility issues when using
  frames
• Use the ltframesetgt and ltframesgt tags to create a
  frameset
• Use the ltnoframesgt tag to display content when
  frames are not supported
• Create hyperlinks that target frames
• Use the ltiframesgt tag to create an inline frame

2
Overviewof Frames

• Frames allow the use of multiple, independently
  controllable sections in a browser window.
• Each section is called a "frame" and is created
  as a separate XHTML file.
• Behind the scenes there is another file -- a
  "master" frameset file that controls the
  configuration of the entire browser window.
• http//www.webgrrls.com
• http//www.panynj.gov/aviation/jfkframe.HTM

3
Possible advantages ofUsing Frames

• Ease of Navigation
• Ease of Maintenance
• Degrades Gracefully
• Unifies Resources

4
Disadvantages ofUsing Frames

• Not Universally Supported
• Not in future W3C Recommendations
• Bookmark Issues
• Accessibility Issues

DONT use unless really need capabilities!
5
Questions

• 1. List three disadvantages of designing a web
  site with frames. Which disadvantage seems most
  important to you? Why?
• 2. How would you respond to a person who claims
  that you should never design a web site using
  frames? Explain.
• 3. True or False. A web site created using frames
  is more accessible than a web site that does not
  use frames.

6
XHTMLUsing Frames

• ltframesetgt tag
• Used to divide up the browser window
• Container tag
• ltframesgt tag
• Used to configure a single frame or portion of
  the browser window
• Stand alone tag
• ltnoframesgt tag
• Used to configure content that should display if
  the browser does not support frames
• Container tag

7
Sample FramesetDTD header

• lt?xml version"1.0" encoding"UTF-8"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Frameset//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.d
  td"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtSample Framesetlt/titlegt
• lt/headgt

8
Sample FramesetXHTML

• ltframeset rows "150, "gt
• ltframe name"banner" title"CircleSoft Company
  Logo" src"banner.htm" scrolling"no" /gt
• ltframeset cols"100,"gt
• ltframe name"navigation" title"CircleSoft
  Site Navigation" src"nav.htm" /gt
• ltframe name"main" title"CirclSoft Site
  Content" src"main.htm" /gt
• lt/framesetgt
• ltnoframesgt
• ltbodygt
• lth1gtCircleSoft Web Designlt/h1gt
• lta href"nav.htm"gtSite Linkslt/agt
• lt/bodygt
• lt/noframesgt
• lt/framesetgt
• lt/htmlgt

9
XHTML ltframesetgt tag

• The frameset tag
• Attributes
• bordercolor
• cols
• frameborder
• framespacing
• rows
• title

10
XHTML ltframegt tag

• The frame tag
• Attributes
• bordercolor
• frameborder
• id
• longdesc
• marginheight
• marginwidth
• name
• noresize
• scrolling
• src
• target
• title

11
XHTMLltbasegt tag

• The base tag
• ltbase targetmain /gt
• Used to configure the default target for all the
  links on an entire web page
• Stand alone tag
• Coded in the header section

12
InlineFrames

• Also called floating frame
• Can be placed in the body of a web page

13
XHTMLltiframegt tag

• The iframe tag
• ltiframe src"trillium.htm" title"Trillium Wild
  Flower" height"200" align"right" name"flower"
  width"330"gt
• Description of the lovely Spring wild flower, the
  lta href"trillium.htm" target"_blank"gtTrilliumlt/a
  gtlt/iframegt
• Used to configure the default target for all the
  links on an entire web page
• Container tag

14
XHTMLltiframegt tag

• Attributes
• align
• frameborder
• height
• id
• longdesc
• marginheight
• marginwidth
• name
• scrolling
• src
• title
• width

15
Questions

• 1. Describe the uses of the area contained
  between the opening and closing ltnoframesgt tags.
• 2. You have created a frameset but the links in
  the navigation frame do not open in the frame you
  designed to hold the content. What might be the
  reason? How would you correct this?
• 3. Describe how the title attribute can be used
  on a ltframegt tag to