Frames

1
Frames
2
Using Frames?

• Rarely used
• Printing, bookmarking resizing problems.
• Frames can look different from browser to
  browser.
• Hard to design (need to know the size).
• Can be good for navigation.

3
Code Basics

• The lt framesetgt tag replaces the body tag.
• ltframeset cols"150, "gt
• ltframeset rows33, "gt
• ltframe src"links.html" /gt

4
Frames Layout

• You can think of it like tables.
• ltframeset cols"150, "gt or rows is similar to
  the lttrgt tag.
• ltframe src"links.html" /gt is similar to the lttdgt
• plan out how you want the frames to look and work.

5
Frame Source

• The source indicates the HTML file/page that is
  loaded in that frame.
• ltframe src"links.html" name"links" /gt
• The name attribute names the frame, to load other
  HTML pages into that specific frame.
• ltframe src"home.html" name"main" /gt

6
The Target

• Once a frame has been named you can use target
  code to force pages to load within that specific
  frame.
• lta href"products.html" targetmain"gt
• In the frames page
• ltframe src"home.html" name"main" /gt

7
Target Attributes

• lta href"products.html" target?gt
• target"main"gt Name of the frame
• target _blank (or new) Opens a new window
• target _self Loads the page in the same frame
• target _top Breaks out of frames with this
  page.

8
Target Attributes

• ltbase targetlinksgt
• This sets the default target for every link on
  the entire Web page.
• This code is placed (nested) in the ltheadgt tags.

9
Nested Frames

• ltframeset rows"110, ,25"gt ltframe
  src"header.html" name"top" /gt ltframeset
  cols"150, "gt ltframe src"links.html"
  name"links" /gt ltframe src"home.html"
  name"main" /gt lt/framesetgt ltframe
  src"bottom.html" name"bottom" /gt lt/framesetgt

10
More Frameset Attributes

• ltframeset rows"110, ,25"
• border0 IE does not need the border tag,
  however Netscape does. Controls the borders width
  in pixels.
• frameborder0 value of no or 0, or 1. It
  places this dark line between borders. I never
  use.
• framespacing"10"gt Works like Cell Spacing, Space
  in pixels between the frames.

11
More Framesource Attributes

• ltframe src"frames-sidebar.htmlgt
• scrolling? no, yes or Auto (default) If I
  insert the "scrolling" attribute and assign a
  value of "no", all scroll bars will disappear,
  and some of the content of the pages could be
  lost.
• marginheight15 In pixels. This works like
  Cell Padding but only from top to bottom.
• marginwidth"10"gt In pixels. This works like
  Cell Padding but only for the two sides.

12
Non-support of frames

• ltnoframesgt lt/noframesgt The text listed between
  these tags serves three important purposes
• It is indexed by search engines.
• Contributes to your ranking at a search engine.
• Provides visitors who are using a browser that
  does not support frames a way to access your
  pages.

13
No frames example

• ltnoframesgt Welcome to David Hansons Family home
  page.
• This site can be viewed only with a frames
  capable browser. We invite you to visit our lta
  hrefindex-no-fr.html"gtnon-frame sitelt/agt.
  lt/noframesgt

14
iframe

• iframe allows you to define a frame within a
  conventional HTML document.
• The iframe does not use the frameset code. If
  fact its usually used inside a table.

15
iframe example

• ltiframe src"soldier.html" name"main"
  width"500" height"400" align"right"
  frameborder"0"gtIf you can't see the picture,
  then your browser doesn't support iframes. You
  may want to update to the most current version of
  your browser. lt/iframegt
• The written part will not be seen if the browser
  supports Iframes.

16
Homework

• Frames
• HTML Code - 10 points
• New window (_blank)- 10 points
• Break out of frames (_top) - 10 points
• Please email me your URL

17
Questions

• If you need help, send me an email at both
  addresses!