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

Jozef Goetz, 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

Jozef Goetz, 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

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

Jozef Goetz, 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 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)

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

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

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, 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

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

Jozef Goetz,  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

Jozef Goetz, 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

Jozef Goetz, 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%

Jozef Goetz, 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

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

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, Sample Frameset DTD & header <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " Sample Frameset

Jozef Goetz, 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

Jozef Goetz, Frameset - index.html HOP Use Dreamweaver frames

Jozef Goetz, 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

Jozef Goetz, 2015 HOP

Jozef Goetz, 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

Jozef Goetz, 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)

Jozef Goetz, 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

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

Jozef Goetz, 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

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

Jozef Goetz, 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

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

Jozef Goetz, 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

Jozef Goetz, 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)

Jozef Goetz, 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

Jozef Goetz, Sample Frameset HOP 5.2 HOP 5.2

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

Jozef Goetz, 2015 HOP 5.2 about.html 39

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, 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)

Jozef Goetz, 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

Jozef Goetz, 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:

Jozef Goetz, Lab Excercises Hands On Practice 5.1 ed3 p ed3 p

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