2. Jozef Goetz, 2012 1 © 2011 Pearson Education Copyright (c) 2007Prentice-Hall. All rights reserved.

3. Jozef Goetz, 2012 2 Learning Outcomes  In this chapter, you will learn how to:  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 and tags to create a frameset  Use the tag to display content when frames are not supported  Create hyperlinks that target frames

4. Jozef Goetz, 2012 3 What Are Frames and Who Supports Them?  Frames divide the browser window into multiple logical sections  each section can display a different Web page  HTML 4.0 specification includes frames –older browsers don’t support frames Netscape Navigator 2.0+ started supporting frames Internet Explorer 3.0+ started supporting frames  The power of frames is that a single frame can be updated without affecting others  Usually the navigation portion of the screen remains stationary while other parts can scroll

5. Jozef Goetz, 2012 4 Overview of 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 HTML/XHTML file.  Behind the scenes there is another file -- a " master " frameset file that controls the configuration of the entire browser window.

6. Jozef Goetz, 2012 5 Working with Frames  Frames change what a “page” means  in a Web site that uses frames, a browser can contain several “pages” at the same time 31 2 4 Frame Definition (HTML File) Frame 1 Contents (HTML File) contains the navigation Frame 2 Contents (HTML File) Frame 4 Contents (HTML File) Frame 3 Contents (HTML File)

7. Jozef Goetz, 2012 6 Advantages of Using Frames  Can display multiple html pages  Some sections fixed, others scrollable  Constant navigational and menu elements  Dynamically changeable content areas

8. Jozef Goetz, 2012 7 Advantages of Using Frames 1.Ease of Navigation  the navigation portion of the screen remains stationary 2.Ease of Maintenance  The main navigation is placed on a single page only 3.Degrades Gracefully  Provide content for old browsers that don’t support frames 4.Unifies Resources  Display pages from multiple servers within a single Web site as part of a unified whole

9. Jozef Goetz, 2012 8 Disadvantages of Using Frames  Not Universally Supported by screen readers and search engine robots  Use tag to overcome it  p.178 ed3, ->slide noframes  Accessibility Issues  Some screen readers cannot use framesets and must access the content  To overcome it:  Clarify the purpose of each frame by placing titles of the frame  Place a text navigation bar at the bottom of each page or link to the home page

10. Jozef Goetz, 2012 9 Disadvantages of Using Frames  Bookmark Issues  It is bookmarked the home page, not other web pages of the frame  To overcome it:  use a right click to open another web page (frame) and then bookmark it  Not in future W3C Recommendations  Now browsers support it, but it may not support in future  XHTML 2.0 replaces frames by XFrames which utilizes XML

11. Jozef Goetz, 2012 10 Checkpoint 5.1  1. List three disadvantages of designing a web site with frames. Which disadvantage seems most important to you? Why? any of these:  The lack of universal support,  Bookmark Issues – you may overcome,  Accessibility Issues  2. How would you respond to a person who claims that you should never design a web site using frames? Explain.  easy navigation and useful if you need to unify resources from disparate Web servers  3. True or False. A Web site created using frames is more accessible than a Web site that does not use frames.  Generally considered less accessible

12. Jozef Goetz, 2012 11 Using Frames  tag  Used to divide up the browser window  Defines the structure of the frames  Container tag  tag  Used to configure a single frame or portion of the browser window  Stand alone tag  tag  Used to configure content that should display if the browser does not support frames  Container tag

13. Jozef Goetz, 2012 12 Copyright (c) 2006 Prentice-Hall. All rights reserved. The tag  Provides content to browsers that don't recognize frames  Example syntax: Thank you for visiting our Web site. We are currently working on a frameless version of this site.

14. Jozef Goetz, 2012 13  Frameset  Tells the browser how to lay out the page  Contains only the definitions of the frames  called the page’s frameset  Tells what frames to include in each section  Use to build the frameset  Replaces the tag  It references the HTML documents that will appear in each frame  Attribute rows=“*,*,*” – reserves horizontal areas (rows) of the browser window Framsets and Frames

15. Jozef Goetz, 2012 14 Working with Frames  Frame  Individual subsection of a home page  Tells the browser what content to put into page –Use to define the content of frame  The Tag  for each frame defined in a corresponding tag must be included

16. Jozef Goetz, 2012 15 Copyright (c) 2006 Prentice-Hall. All rights reserved. Nested frameset in the outer frameset The Winter and the Summer

17. Jozef Goetz, 2012 16 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effect of Frame Nesting Note that the right frame is subdivided into two subframes The Winter and the Summer

18. Jozef Goetz, 2012 17 Nested Frameset

19. Jozef Goetz, 2012 18 Copyright (c) 2006 Prentice-Hall. All rights reserved. Web Site Flowcharts Flowchart – diagram that shows the navigational flow of a Web site Useful for planning and designing a complex Web site Create the flowchart before actually creating and linking the site’s pages

20. Jozef Goetz, 2012 19 Sample Frameset DTD & header <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Sample Frameset

21. Jozef Goetz, 2012 20 CircleSoft Web Design Site Links Sample Frameset A parent of a frame is the document containing its frameset  rows  tells the browser to split the screen into a number and sizes of horizontal frames  specifies sizes of each top-or-bottom frame in the frameset  cols  tells the browser to split the screen into a number and sizes of vertical frames

22. Jozef Goetz, 2012 21 Sample Frameset Size specifications Relative (percentage) Fixed (pixel) size specifications Asterisk (*) – frame can take the remainder of the page e.g. # of values indicates number of columns Frames

23. Jozef Goetz, 2012 22 Sample Frameset HOP 15.1

24. Jozef Goetz, 2012 23 tag  Base target can be used to specify a commonly used target  Used to define a global target  Configure the default target for all the links on an entire web page  Stand alone tag  Coded in the header section  Will cause all hyperlinks in nav.htm to send content to the "main" frame nav.htm  Therefore, unnecessary to repeatedly type the same target for multiple links  Saves typing time and reduces risk of typing error

25. Jozef Goetz, 2012 24 noframes  The tag  special tag used for browsers that don’t support frames  HTML is not displayed in frames-compatible browsers  put main navigation link with a description Site Links  used by search engines, PDA’s and Web-aware phones HOP 15.1

26. Jozef Goetz, 2012 25 XHTML tag  The frameset tag p.187 ed3.  Attributes:  bordercolor  color of the frame borders in the frameset  frameborder  0 – no frame border,  1 – yes, display frame borders (default)  framespacing  specify the width of the frameborders in pixels,  0 – remove frame borders  cols  tells the browser to split the screen into a number of vertical frames  specifies sizes of each side-by-side frame in the frameset  rows  tells the browser to split the screen into a number of horizontal frames  specifies sizes of each top-or-bottom frame in the frameset  title  description of the frameset that can be used by assistive technologies (readers, search engines)

27. Jozef Goetz, 2012 26 XHTML tag  Attributes:  cols  tells the browser to split the screen into a number of vertical frames  widths are defined by column width values separated by commas –can be defined in pixels, as a percentage, or with an asterisk (*) an asterisk (*) means use as much space as possible e.g. # of values indicates number of columns

28. Jozef Goetz, 2012 27 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effects of and (with columns) Frames Left frame is 20% of page width, right frame is 80%

29. Jozef Goetz, 2012 28 XHTML tag  Attributes:  rows  tells the browser to split the screen into a number of horizontal frames

30. Jozef Goetz, 2012 29 tag  The frame tag p.188  Attributes:  bordercolor  color of this frame border  frameborder  0 – no frame border,  1 – yes, display frame borders (default)  id  unique id for the frame  longdesc  gives URL of Web page text description  may used by assistive technologies (readers, search engines)  marginheight  top and bottom margins of the frame  marginwidth  right and left margins of the frame  name  is used when the target attribute is used to configure hyperlinks  noresize  frame cannot be resized  scrolling  values: “yes”, ”no” or “auto” indicates that scrollbars appear when needed (default)  src  valid file name of a Web page  target  used to tell the browser where to display the information pointed to by a hyperlink  title  description of the frame that can be used by assistive technologies (readers, search engines) – recommended by W3C to improve accessibility

31. Jozef Goetz, 2012 30 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effect of Specifying Margins Margin in bottom of top frame, caused by changing to

32. Jozef Goetz, 2012 31 Changing Frame Borders  2 attributes to the tag are used to change frame borders:  bordercolor  used to change the color of the border  values can be any valid color name or hexadecimal value  frameborder  used to display or hide the borders of the frame  values are 0 to hide the borders or 1 to display the borders

33. Jozef Goetz, 2012 32 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effect of Specifying Border Width All frame borders removed, caused by this code:

34. Jozef Goetz, 2012 33 Changing Frame Borders  attributes:  name  assigns a name to the frame, for targeting purposes (pointing the contents of a link to the frame)  noresize  by default, the user can reposition a border -- this attribute doesn’t allow moving of borders  src  specifies the initial document that appears in the frame

35. Jozef Goetz, 2012 34 Changing Frame Borders  scrolling  allows or denies the user scrolling capability of a frame, or lets the browser decide if scrolling is used  values can be –“yes” (scrolling allowed), –“no” (scrolling denied), or –“auto” (its up to the browser)

36. Jozef Goetz, 2012 35 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effect of noresize Attribute Two-sided arrow will appear and frame can resize if the frame tag is specified as: (without the noresize attribute set) But this will not happen if the frame tag is specified as

37. Jozef Goetz, 2012 36 Sample Frameset HOP 5.2

38. Jozef Goetz, 2012 37 Sample Frameset - index.html HOP 5.2 index.html

39. Jozef Goetz, 2012 38 target attribute p.191  target attribute of the tag  used to tell the browser where to display the information pointed to by a hyperlink  value of the target attribute is a window name  How it works  if a link has a target, the browser checks to see if a window with the target name already exists  if it does, the contents of it are replaced with the link content  if it doesn’t, a new browser window opens with the content of the link and is given the window name

40. Jozef Goetz, 2012 39 Working with Linked Windows (navigation) target=“blue_page” target=“yellow_page” New window Replaces yellow page New window  target attribute of the tag  used to tell the browser where to display the information pointed to by a hyperlink  How it works  if a link has a target, the browser checks to see if a window with the target name already exists  if it does, the contents of it are replaced with the link content

41. Jozef Goetz, 2012 40 Types of Special Targets  _self target replaces the content in the same frame  _parent target sends the content to the parent document of the frame  _blank target opens a completely new browser window for the new page (old window also remains showing)  _top target replaces the main frameset (not in a frame, but in the entire window)

42. Jozef Goetz, 2012 41 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effect of the _self Target Clicking the See All Categories link causes new page to appear in same frame because of this tag: See All Categories

43. Jozef Goetz, 2012 42 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effect of the _top Target Clicking any link causes new page to appear as the whole browser window instead of in a single frame because of this:

44. Jozef Goetz, 2012 43 Lab Excercises Hands On Practice 5.1 ed3 p.180-185 5.2 ed3 p.189-191

45. Jozef Goetz, 2012 44 Summary  This chapter introduced the use of frames on web pages.  You learned about the (X)HTML tags needed to create a web site that uses frames.  You also learned that there is a controversy surrounding the use of frames on web pages.