Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 7: Working with Frames Kelly L. Valqui Essentials for Design XHTML

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Why Use Frames?  Purpose of a frame – subdivide a Web page into logical sections  Many advantages:  Some sections fixed, others scrollable  Constant navigational and menu elements  Dynamically changeable content areas

Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Framesets and Frames  Frameset  Similar to the layout of a printed document  Tells the browser how to lay out the page  Tells what frames to include in each section   Frame  Individual subsection of a page  Tells the browser what content to put into page 

Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 and Attributes  Frameset  cols – specifies sizes of each side-by-side frame in the frameset  rows – specifies sizes of each top-or-bottom frame in the frameset  Size specifications  Relative (percentage)  Fixed (pixel) size specifications  Asterisk (*) – frame can take the remainder of the page  Frame  src – indicates the html file that will occupy a frame

Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Effects of and (with columns) Frames Left frame is 20% of page width, right frame is 80%

Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Effects of and (with rows) The Winter and the Summer Top frame is 100 pixels high, bottom frame takes up remainder of page

Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Nesting Framesets inside other Framesets  Direct approach  Code the nested frameset in the same HTML file as the outer frameset  Alternative approach  Code the nested frameset in a separate page, and make the separate page one of the frames of the outer frameset

Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Direct Approach The Winter and the Summer

Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Alternative Approach The Winter and the Summer The Warm Months of the Year

Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Effect of Frame Nesting Both approaches have the same effect Note that the right frame is subdivided into two subframes

Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 CSS vs. Frames  Frames and tables can be used for horizontal and vertical placement  But these have limitations  CSS allows finer control over page layout than tables or frames  With XHTML 2.0, CSS will become more predominant

Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Attributes  noresize – no value needed. If it is included, the frame's size is fixed, and the grey border bar cannot be moved  NOTE: if noresize is not set, the mouse cursor changes a double-sided arrow when hovered over the frame border, allowing resize  scrolling – three possible values  yes – scroll bars always visible  no – scroll bars never visible  auto – scroll bars visible only when needed

Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Effect of noresize Attribute Two-sided arrow will appear and frame can resize if the frame tag is specified as: (without the norseize attribute set) But this will not happen if the frame tag is specified as

Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Effect of scrolling Attribute Scrollbars will not appear if the frame tag is specified as:

Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Using Frame Margins and Borders  Setting height and width margins  marginheight attribute – sets the margin spacing at top and bottom of a frame  marginwidth attribute – sets the margin spacing at left and right of a frame  Specifying border width of a frame  frameborder attribute of tag – sets the width of a frame's border  border attribute of tag – sets the width of a frameset's border

Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Effect of Specifying Margins Margin in bottom of top frame, caused by changing to

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

Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Targeting Named Frames  The tag's name attribute  Specifies an identifying name for a frame  Name cannot begin with underscore character  Underscore _ character used for special cases  Once named, a frame can be targeted  Anchor tag's target attribute tells browser which frame to use for displaying new content

Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Using the name and target Attributes winter !

Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Effect of Clicking on the Link Because hyperlink reference specified a target frame, the new page went to the target winter !

Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Using a Base Target  Concepts  Advantage of base targets  Refreshing frames  Hands-on Exercise  Add a Base Target

Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Advantages of Using a Base Target  Base target can be used to specify a commonly used target  Therefore, unnecessary to repeatedly type the same target for multiple links  Saves typing time and reduces risk of typing error  Accomplished using the tag  Example syntax:  Will cause all hyperlinks to send content to the "main" frame

Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Refreshing Pages with Frames  Refreshing the overall page doesn’t always refresh individual frames  To refresh individual frames:  In Windows – right-click the frame then choose the Refresh Frame option from the pop-up menu  In Macintosh – hold down the mouse button in the frame then choose Refresh Page (or Refresh Frame)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 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)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Effect of the _self Target Clicking the Select All Categories link causes new page to appear in same frame because of this tag: See All Categories

Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 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:

Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 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

Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 What is a Parent?  A parent of a frame is the document containing its frameset  It is not the frameset itself  Therefore, if you want to use nested framesets, use the indirect method (nested frameset in a separate.htm file)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Problem with Frames  Non-frame browsers will not recognize frames  But now, almost all browsers support frames  Still, search engines sometimes index only one frame of a frameset, causing display problems  XHTML 2.0 is eliminating frames  Replaced with XFrames

Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Button Tags

Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Form Script Options  Form submissions go to Web server scripts to be processed  Server script is identified in the form tag's action attribute  Common types of server-side scripts  Common Gateway Interface (CGI)  ColdFusion  Active Server Pages (ASP)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 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. 