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

3. Jozef Goetz, 2015 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, 2015 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, 2015 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, 2015 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, 2015 Creating Complex Framesets  Most commonly, framesets provide navigation bars  the content of the “navigation” frame link is sent to the “content” frame “navigation” frame link “content” frame

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

9. Jozef Goetz, 2015 8 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

10. Jozef Goetz, 2015 9 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

11. Jozef Goetz, 2015 10 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

12. Jozef Goetz, 2015 11 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 in the future,  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

13. Jozef Goetz, 2015 12 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

14. Jozef Goetz, 2015 13 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.

15. Jozef Goetz, 2015 14  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 page that will appear in each frame  A major point here is that each frame (and the frameset itself) represents a separate Web page. Framsets and Frames  Attribute rows=“*,*,*” – reserves horizontal areas (rows) of the browser window

16. Jozef Goetz, 2015 15 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

17. Jozef Goetz, 2015 16 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%

18. Jozef Goetz, 2015 17 Nested 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

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

20. Jozef Goetz, 2015 19 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

21. Jozef Goetz, 2015 20 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

22. Jozef Goetz, 2015 21 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

23. Jozef Goetz, 2015 22 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

24. Jozef Goetz, 2015 23 Frameset - index.html HOP 5.1 - Use Dreamweaver frames

25. Jozef Goetz, 2015 24 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

26. Jozef Goetz, 2015 HOP 5.1 25

27. Jozef Goetz, 2015 26 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 5.1

28. Jozef Goetz, 2015 27 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)

29. Jozef Goetz, 2015 28 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%  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

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

31. Jozef Goetz, 2015 30 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

32. Jozef Goetz, 2015 31 Effect of Specifying Margins Margin in bottom of top frame, caused by changing to

33. Jozef Goetz, 2015 32 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

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

35. Jozef Goetz, 2015 34 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

36. Jozef Goetz, 2015 35 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)

37. Jozef Goetz, 2015 36 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

38. Jozef Goetz, 2015 37 Sample Frameset HOP 5.2 HOP 5.2

39. Jozef Goetz, 2015 38 HOP 5.2 index.html – no borders, no spacing HOP 5.2 index.html

40. Jozef Goetz, 2015 HOP 5.2 about.html 39

41. Jozef Goetz, 2015 40 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

42. Jozef Goetz, 2015 41 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

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

44. Jozef Goetz, 2015 43 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

45. Jozef Goetz, 2015 44 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:

46. Jozef Goetz, 2015 45 Lab Excercises Hands On Practice 5.1 ed3 p.180-185 5.2 ed3 p.189-191

47. Jozef Goetz, 2015 46 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.