Frames

1
Frames
2
What is a frame?

• Frames break up the document area of the browser
  into one or more areas
• Each frame can display a separate HTML document
• Each window can act independently of the other

3
Frames and Windows
Multiple HTML documents can be inserted into the
defined frame in the window.
The frame is static and never moves. You
define the frame with HTML.
4
What a frame may look like
Site Menu
Home Product Services Contact
Our Lovely Widgets Widget 1 Widget 2 Widget 3
Widget 1 This is a description of our
first widget. Notice the lovely contours.
Simple yet affordable and stylish!
Local Menu
Local Page
5
Why use a frame?

• Allows easier navigation of a site
• Allows related information from two or more pages
  to be displayed simultaneously
• From the perspective of a site designer, it
  simplifies the maintenance of the site

6
Why to avoid frames

• Lots of people hate frames and consequently may
  avoid your site
• It can be difficult to bookmark a site when you
  have a frame -- what page will be displayed in
  each window?
• Each window use up precious real estate on the
  screen
• Frames can be simulated using good design and
  seem less intrusive
• But links to a frameless environment can be
  tedious to test

7
Frame History

• Introduced in Navigator 3.0
• Replicated in Internet Explorer 2.0
• Essentially a de-facto standard
• Eventually adopted in the HTML 4.0 specification
  in 1998

8
Frame Concepts
Frame
Inner Frame Set
Inner Frame
Inner Frame
Outer Frame Set
9
Terminology

• Frameset - one or more frames that are logically
  interrelated
• Frame - a window into which an HTML page is
  displayed
• Must be inside a frameset
• Nested Frameset - a frameset defined inside a
  frame
• Nested Frame - a frame that is part of a nested
  frameset

10
Static and Dynamic Frames

• Frames can be static
• Content doesnt change
• Frames can be dynamic
• Reloaded with different pages often

11
Frame Syntax

• lthtmlgt
• ltheadgt
• lttitlegtpage titlelt/titlegt
• lt/headgt
• ltframesetgt
• Frame and Inner Frameset Definitions
• lt/framesetgt
• lt/htmlgt
• Note No ltbodygt tag!
• Often Stored as Index.html or Default.htm

12
ltframesetgt Syntax

• ltframeset rowsrow height, row height, row
  height gt
• OR
• ltframeset colscol width, col width, col
  widthgt
• Height and width can be in pixels, or percent
• Height and width apply to the size of the frame,
  not the frameset
• An attribute value can be , to use up remaining
  space

13
Frameset Examples

• ltframeset rows55, gtlt/framesetgt
• ltframeset cols 60, 45, gtltframesetgt
• ltframeset cols , , gtltframesetgt
• lt!-- Nested frame example --gt
• ltframeset rows60,gt
• ltframeset cols140,gt
• ltframegt lt/framegt
• ltframegt lt/framegt
• lt/framesetgt
• ltframegt lt/framegt
• ltframesetgt

14
ltframegt Tag

• Always placed inside the ltframesetgt tag
• Should be one ltframegt or ltframesetgt tag for each
  row or column defined in the parent ltframesetgt
• No closing tag needed for ltframegt tag, under HTML
  4.0. XHTML syntaxes shown
• ltframeset rows40,gt
• ltframe srcdocument1.htmgtlt/framegt
• ltframe srcdocument2.htm /gt
• lt/framesetgt

So there are two tags inside the frameset
15
Frame Attributes

• ltframe srcsource.htm
• scrollingyesnoauto
• marginwidthvalue
• marginheightvalue
• noresizenoresizegt
• Scrolling - determines if a scrollbar should
  appear. Yes usually is the default. Auto will not
  show a scroll bar if the page can fit in the
  frame.
• Marginwidth - space to the left and right of the
  frame source, in pixels
• Marginheight - space above and below the frame
  source, in pixels
• Noresize - keeps the users from resizing the
  frame with the mouse

16
HTML Pages and Frames

• When you use frames you generally need to create
  more than one HTML page
• You need at least
• 1 page for the frame page
• 1 page for each window in the frame (provided the
  window points to content on your web site)

17
HTML Pages and Frames
Need frame page HTML
Need page with HTML for each window (if local
content)
In this example, you need to create at least 4
HTML Pages, assuming all content comes from your
web site
18
Frame Syntax Example

• lt!-- Nested frame example--gt
• ltframeset rows60,gt
• ltframeset cols140,gt
• ltframe marginheight5 marginwidth 5
  scrollingno srcnested1.htm /gt
• ltframe srcnested2.htm /gt
• lt/framesetgt
• ltframe src frame1src.htm /gt
• ltframesetgt

19
ltnoframesgt tag

• Every frame should include a ltnoframesgt tag so
  the equivalent information can be displayed in a
  noframes environment.
• ltnoframesgt tag is itself ignored by legacy
  browsers, but serves to make the code easy to read

20
ltnoframesgt usage

• lthtmlgt
• ltheadgt
• lttitlegtPage Titlelt/titlegt
• lt/headgt
• ltframesetgt
• Frame Definitions
• lt/framesetgt
• ltnoframesgt
• ltbodygt
• Page Layout
• lt/bodygt
• lt/noframesgt
• lt/htmlgt

This HTML is usually executed because
most browsers can understand frames
This HTML is used if browser does not support
frames
21
Frame Extensions

• Frame and frameset border colors can be set
• ltframeset bordercolorcolorgt
• ltframe bordercolorcolorgt
• Framesets can have borders of x pixels
• ltframeset bordervaluegt

22
Naming Frames

• It can be easier to manipulate frames if they are
  named
• Use the frame name to direct a link in one frame
  window to be displayed in another frame window
• This is a critical design requirement
• Caution frame names are case sensitive

23
Naming and Directing Frames

• First give the frame a name in the frame
  definition
• ltframe srcsource.htm nameDisplayFramegt
• Second, redirect a URL to the proper frame by
  using the TARGET attribute of the ltagt tag in the
  HTML file contained inside the frame
• lta hrefcourses.htm targetDisplayFramegt

24
Frame Navigation
Frame Name Display
Page Name Menu.htm
Classes Faculty Facilities
Here is a list of current classes at NVCC ECON
101 ECON 201 SCI 401 IST 129 Next Page
Page Name Classes.htm
lta srcClasses.htm targetDisplaygt Classeslt/agt
Frame Name Menu
25
ltbasegt Tag

• If most of your links are redirected to one
  frame, it can be simpler to use the ltbasegt tag
  with the target attribute
• The ltbasegt tag redirects all src attributes to
  the named frame
• Can be overridden by specifying a target
  attribute
• Not used in frame pages
• Used in pages displayed inside a frame window

26
ltbasegt tag example
Redirect to frame named Menu by default

• lthtmlgt
• ltheadgtlttitlegtExample of Base Taglt/titlegtlt/headgt
• ltbodygt
• lth1gtMenult/h1gt
• lt!-- All links redirect to the Menu frame by
  default--gt
• ltbase targetMenugt
• ltpgtlta hrefclasses.htmgtClasseslt/agtlt/pgt
• ltpgtlta hreffaculty.htmgtFacultylt/agtlt/pgt
• ltpgtlta hreffacilities.htm targetleftwindowgtFac
  ilitieslt/agtlt/pgt
• lt/bodygt
• lt/htmlgt

Target frame overridden
27
Magic Target Names

• Predefined frame names, all begin with an
  underscore
• _blank Loads document into a new browser window
• _self Places the document into the same window
  containing the hyperlink tag
• _top Loads document into full display area,
  removing all frames
• _parent Used in nested frames where the frames
  for another frameset is in another HTML file.
  When used all frames in the nested frameset are
  replaced with the contents specified.

28
ltnoframesgt tag

• Used to support legacy browsers
• This is frameless HTML that will display if the
  browser cannot display frames
• If the browser cannot support frames it will not
  interpret the ltframegt and ltframesetgt tags and the
  information in them

29
ltnoframesgt tag

• Every page that uses frames should include a
  ltnoframesgt tag so the equivalent information can
  be displayed in a non-frames environment.
• ltnoframesgt tag is itself ignored by legacy
  browsers, but serves to make the code easy to read

30
ltnoframesgt usage

• lthtmlgt
• ltheadgt
• lttitlegtPage Titlelt/titlegt
• lt/headgt
• ltframesetgt
• Frame Definitions
• lt/framesetgt
• ltnoframesgt
• ltbodygt
• Page Layout
• lt/bodygt
• lt/noframesgt
• lt/htmlgt

This HTML is usually executed because
most browsers can understand frames
This HTML is used if browser does not support
frames
31
Internal Frames

• Creates an inline window
• Window does not float
• Not really a frame, and does not require a frame
  page
• Requires HTML 4.0 compatible browser
• Wont work with Netscape 4.x

32
Internal Frames

• Syntax
• ltiframe widthvalue heightvalue srcURL
  alignabsbottom absmiddle baseline justify
  left middle right texttopgtltiframegt
• widthwidth of window in pixels
• heightheight of window in pixels
• Note Its important to close the tag!