Frames

1
Frames

• WWW 131

2
What are frames?

• Frames allow the user to view information from
  two or more HTML files simultaneously.
• The browsers display area is divided into
  several windows with the contents of a different
  HTML file visible in each window.

3
Advantages

• Ease of navigation
• Main site navigation appears in a stationary
  frame so users do not have to scroll to locate
  links.
• Ease of maintenance
• Main navigation is on a single page rather than
  on each page in site, so only that file must be
  updated.

4
Disadvantages

• Frames are deprecated
• Sites with frames may not be supported by
  browsers in the future.
• Accessibility issues
• Screen readers and some search engine robots do
  not support frames.
• Bookmark issues
• Only the home page of a frames site is bookmarked
  by older browsers.

5
Learning Frames

• Frames is a powerful technique that is still
  used.
• Since, you will encounter web sites developed
  with frames in your role as a web developer, you
  will need to understand the code.
• Therefore, this course will give you an
  introduction to the use of frames.

6
Planning Frames

• Before you start creating your frames, you should
  first plan their appearance and use.
• What information will be displayed in each of the
  frames?
• How do you want the frames placed on the Web
  page? What is the size of each frame?

7
Then, decide...

• Which frames will be staticthat is, always
  showing the same content?
• Which frames will change in response to
  hyperlinks being clicked?
• Do you want to allow users to resize the frames
  and change the layout of the page?

8
Procedure

• Create the frameset file
• Decide which HTML documents are to be displayed
  in which frames

9
The frameset tag

• The frameset tag is what allows us to display
  frames. It creates panes (each displaying its
  own HTML document) in our browser view
• Why?
• To allow visitors to view more than 1 page at a
  time
• To make navigation more unified across Web pages
• To frame another Web site
• Display banners or other centralized information

10
Using the frameset tag to define Frames

• The tag is paired ltframesetgt....lt/framesetgt
• The rows attribute determines how many rows (or
  panes) the browser screen is to be divided
  into.
• ltframeset rows 25, 75gt

11
Using the frameset tag to define Frames

• We can specify the size of each row with pixels,
  , or a wild card character
• ltframeset rows 50, 550gt
• Top row 50 pixels 2nd row 550 pixels
• ltframeset rows 15, 85gt
• aTop row 15 of area in browser view 2nd row
  85
• NOTE If the user resizes the entire browser
  window, the frames resize too!
• ltframeset rows 15, gt
• aTop row 15, 2nd row occupies rest of browser
  view
• ltframeset rows , gt
• Top row 50, 2nd row occupies rest of browser
  view

12
Using the frameset tag to define Frames

• The frameset tag may take the cols attribute
  instead. This attribute divides the browser view
  into vertical columns
• ltframeset cols 140, gt
• The cols attribute may take pixel, or the wild
  card character just like the rows attribute

13
Using the frameset tag to define Frames

• The opening and closing frameset tags replace the
  opening and closing body tags.
• In other words, when we write a page with the
  frameset tag, such a page never contains the body
  tag.

14
How we display HTML in frames

• The frameset tag allows us to set up the
  structure for our frames in the page, but cannot
  allow HTML web pages to be displayed in each
  frame.
• Q So, how do we cause HTML pages to be displayed
  in each frame?
• A With the frame tag!

15
The frame tag

• The frame tag is not paired.
• The tags src attribute operates very much like
  the src attribute of the img tag
• The src attribute identifies the filename of
  (and, if necessary the filepath to) the HTML
  document to be displayed in a specific frame.

16
The frame tag

• One very important thing to keep in mind is this
  
• The sequence of frame tags is what determines
  what frames goes where
• If we have divided the page into two rows with
  our frameset tag, then the first frame will go
  into the top row, and the second tag will go into
  the bottom row!

17
The frame tag

• ltframeset rows 10, gt
• ltframe src top.htm /gt
• ltframe src main.htm /gt
• lt/framesetgt
• In this code, the 10 row will contain top.htm,
  while the rest of the page will display main.htm

18
The frame tag

• ltframeset cols 10, gt
• ltframe src side.htm /gt
• ltframe src main.htm /gt
• lt/framesetgt
• The same is true when the page is divided into
  columns. In this code, the 10 column will
  contain side.htm, while the rest of the page
  will display main.htm

19
The name attribute of the frame tag

• We also use a name attribute in each frame tag.
• As we will see below, this helps determine in
  which frames the hyperlinks in our HTML documents
  will open

20
HTML Tags - Frame Contents
ltframe src logo.htm name Main /gt

• Include a frame tag with at least src and name
  attributes for each frame area on the page.

21
Sample 2 Rows
22
Code for a 2 Row Frame
23
Sample 2 Cols (Contents)
24
Code for a 2 Cols Frame
25
The frameborder attribute of the frameset tag

• Once we display the desired HTML documents in our
  frames, we see that a dividing frameborder is
  displayed between each frame. (See next slide)
• We can turn this border off, making it disappear,
  by setting the frameborder attribute of the
  frameset tag to 0

26
The frameborder
27
The resize attribute of the frame tag

• Also, once we have our frames displayed, we
  notice that users can drag the frameborders to
  enlarge or shrink the frames
• Usually, we do not want users to be able to
  modify the page in this way. If a page is well
  designed, the user will not have any need to do
  this.

28
The resize attribute of the frame tag

• To prevent users from resizing frames, we can set
  the resize attribute of the frame tag to no.
• Then the users mouse arrow will not change to
  the double headed arrow when the mouse is
  placed on the frameborder.

29
The noframes tag

• In past years, certain old browsers incapable of
  displaying frames were still in use
• Writers of pages using frames were unable to
  display their frames to these browsers
• But it was considered good practice to inform
  such users that they could see the frames if the
  upgraded their browsers.
• This was done with the noframes tag. Contents of
  this tag are only displayed in older browsers
  which do not support tags. Very few such
  browsers are in use today.

30
The noframes tag

• lthtmlgt
• ltheadgt
• lttitlegtFrames Pagelt/titlegt
• lt/headgt
• ltframeset rows 20, gt
• ltframe src top.htm name top /gt
• ltframe src main.htm name main /gt
• lt/framesetgt
• ltnoframesgtYour browser cannot display this page.
  If you wish to see this page, please upgrade to a
  newer browser.lt/noframesgt
• lt/htmlgt

31
Frameset Definition Tags
32
3 frame pages?

• How do we create 3-frame pages such as this one?

33
3-frame pages

• The way we do it is
• First, divide the page into rows with the
  frameset tag
• lt frameset rows 60,gt
• Then divide the second row into columns with a
  nested frameset
• ltframeset cols 140,gt

34
Banner and Contents - Design
35
Nested Frame Sample

• Frameset has 2 rows
• Logo
• Second Frame

36
Sample Nested Frame

• Nested frameset has 2 columns
• Doc. frame
• TOC frame src

37
Coding

• ltframeset rows 60,gt
• ltframe src Logo.htm nameLogogt
• ltframeset cols140,gt
• ltframe src.. name..gt
• ltframe src.. name..gt
• lt/framesetgt
• lt/framesetgt

38
Where links open when frames are used

• As we can see, when we click on a hyperlink in a
  frame, the new page opens in a new tab (Firefox)
  or a new page (Internet Explorer)
• This is very inconvenient if the link simply
  leads to another page within our site and its
  frames
• We need to know how to prevent this.

39
Where links open when frames are used

• The way we control were hyperlinks open is with
  the name attribute.
• We include in each frame tag a name attribute
• Each name attribute in the frameset has a unique
  value

40
Where links open when frames are used

• ltframeset rows 60,gt
• ltframe src Logo.htm nameLogogt
• ltframeset cols140,gt
• ltframe srcmenu.htm namemenugt
• ltframe srcmain.htm namemaingt
• lt/framesetgt
• lt/framesetgt

41
Where links open when frames are used

• Note though that merely using the name attribute
  is not enough to control where links open!
• We also must use either the base tag or the
  target attribute.

42
The base tag

• The base tag is used to identify the frame where
  links should open
• This tag sets a target frame for all the
  hyperlinks in a page
• Thus, by setting the base tag for a page, all
  hyperlinks in that frame will open in the
  target
• Note The base tag is only placed into HTML
  documents that are placed in frames, never into
  the frameset document

43
The base tag

• lthtmlgt
• ltheadgt
• lttitlegtNavigation Pagelt/titlegt
• ltbase target main /gt
• lt/headgt
• ltbodygt
• lta hrefinfo.htmgtInformationlt/agtltbr /gt
• lta hrefenroll.htmgtEnrollmentlt/agtltbr /gt
• lta hrefclasses.htmgtClasseslt/agtltbr /gt
• lt/bodygt
• lt/htmlgt
• All links in this page will open in the main
  frame due to the base tag setting

44
The target attribute

• Another way to specify in which frames should
  open is by use of the target attribute
• This is an attribute of the anchor tag, and will
  control only where that tags hyperlink will
  open
• lta hrefinfo.htmgtInformationlt/agtltbr /gt
• lta hrefenroll.htmgtEnrollmentlt/agtltbr /gt
• lta hrefclasses.htmgtClasseslt/agtltbr /gt

45
The target attribute

• lta hrefinfo.htm
• target maingtInformationlt/agt
• ltbr /gt
• lta hrefenroll.htm
• target maingtEnrollmentlt/agt
• ltbr /gt
• lta hrefclasses.htm
• target maingtClasseslt/agtltbr /gt

46
Special values for the target attribute

• There are four special values which we can give
  the target attribute
• _blank open link in a new browser window
• _self open link in same frame
• _parent open link in parent frameset
• _top load new document into same browser window,
  replacing the entire frameset

47
The iframe tag

• This tag is really unrelated to HTML frames. But
  because it allows us to display one HTML document
  within another, it is considered related to them
• One can use the iframe tag in
• an HTML page that is in a frame
• An HTML page that is not in a frame

48
The iframe tag

• lthtmlgt
• ltheadgt
• lttitlegtHTML Frameslt/titlegt
• lt/headgt
• ltbodygt
• lth1gtHTML Frameslt/h1gt ltpgtFrames are for
  lt/pgt
• ltpgtOne excellent discussion of frames is found
  in the OReilly book HTML The Definitive Guide
• ltiframe src http//www.oreilly.com/html4/ch11
  width 25 gtlt/iframegt
• lt/pgt
• lt/bodygt
• lt/htmlgt

49
The iframe tag

• While this frame allows one great convenience in
  displaying others web pages, care must be taken
  not to represent the content of other peoples
  pages as your own!