Transcript Chapter 11
Chapter 11 Creating Framed Layouts Principles of Web Design, 4th Edition Objectives • Understand the benefits and drawbacks of frames • Understand and use frame syntax • Customize frame characteristics including scroll bars, borders, and margins • Understand and use frame targeting and special targeting names • Design content to fit framesets properly • Design framesets that accommodate different screen resolutions Principles of Web Design, 4th Edition 11-2 Understanding Frames Principles of Web Design, 4th Edition 11-3 Understanding Frames • Frames allow you to divide the browser window into independent windows, each displaying a separate HTML document Principles of Web Design, 4th Edition 11-4 Principles of Web Design, 4th Edition 11-5 Frame Benefits • Frames allow users to scroll independently in one frame without affecting the contents of an adjoining frame • Frames are an ideal way to present large collections of information that are hard to navigate using traditional single-page browser display Principles of Web Design, 4th Edition 11-6 Principles of Web Design, 4th Edition 11-7 Frame Drawbacks • • • • Inaccurate bookmarking Download overhead Visual and navigation confusion Poor indexing with search engines Principles of Web Design, 4th Edition 11-8 Frame Syntax Principles of Web Design, 4th Edition 11-9 The <frameset> Element • The <frameset> element is the container for the frameset code • The cols and rows attributes let you specify the characteristics of the frameset • You can specify a frameset as either cols or rows, but not both Principles of Web Design, 4th Edition 11-10 The <frame> Element • The <frame> element is an empty element • The src attribute provides the location of the file that is displayed within the frame Principles of Web Design, 4th Edition 11-11 Rows Frameset Syntax • Two-row frameset: <frameset rows=”50%,50%”> <frame src=”top.htm”> <frame src=”bottom.htm”> </frameset> Principles of Web Design, 4th Edition 11-12 Principles of Web Design, 4th Edition 11-13 Columns Frameset Syntax • Two-column frameset: <frameset cols=”150,*”> <frame src=”left.htm”> <frame src=”right.htm”> </frameset> Principles of Web Design, 4th Edition 11-14 Principles of Web Design, 4th Edition 11-15 The <noframes> Tag • The <noframes> tag lets you provide an alternate page for users who do not have a frames-compliant browser • You can enclose the contents of a standard Web page, contained in a set of <body> tags, within the <noframes> element Principles of Web Design, 4th Edition 11-16 Nesting Frames • Nesting allows you to break the screen into both row and column frames Principles of Web Design, 4th Edition 11-17 Nested Frameset Syntax • Nested frameset: <frameset rows="40,*"> <frame src="topnav.htm"> <frameset cols="20%,80%"> <frame src="left.htm"> <frame src="right.htm"> </frameset> </frameset> Principles of Web Design, 4th Edition 11-18 Principles of Web Design, 4th Edition 11-19 Restricting Resizing • By default, the user has the option of resizing your frames by clicking and dragging the frame border • In most situations you probably want to restrict resizing, so that the user sees the frameset the way you intended • To restrict resizing, add the noresize attribute to the <src> elements in your frameset Principles of Web Design, 4th Edition 11-20 Principles of Web Design, 4th Edition 11-21 Customizing Frame Characteristics Principles of Web Design, 4th Edition 11-22 Controlling Scroll Bars • By default, scroll bars in frames are set to appear automatically when needed if the content is not accessible within the frame window • Remove the scroll bar by adding the scrolling=“no” attribute to the <src> element Principles of Web Design, 4th Edition 11-23 Principles of Web Design, 4th Edition 11-24 Principles of Web Design, 4th Edition 11-25 Controlling Frame Borders • As with tables, you can choose not to display frame borders, or to remove the default border spacing between frames entirely • This technique lets you create seamless frames with no visible dividing line (unless a scroll bar pops up) • To remove frame borders, add border=“0” to the <frameset> tag Principles of Web Design, 4th Edition 11-26 Principles of Web Design, 4th Edition 11-27 Controlling Frame Margins • Two frame attributes let you control the pixel width of both the vertical and horizontal margins in a frame • marginwidth lets you control the left and right margin, while marginheight affects the top and bottom margins • Setting these attributes to 0 lets you remove the margins entirely, allowing your content to touch the sides of the frame Principles of Web Design, 4th Edition 11-28 Principles of Web Design, 4th Edition 11-29 Targeting in Framesets Principles of Web Design, 4th Edition 11-30 Frame Targeting • By default, a link loads into the same frame from which it was selected • You can change this default behavior and target the destination of a link to another frame in the frameset Principles of Web Design, 4th Edition 11-31 Principles of Web Design, 4th Edition 11-32 Frame Targeting (continued) • To target from one frame to another, you must perform two tasks: 1. Name your frames using the name attribute in the frame element 2. Target links to display their content in the named frame Principles of Web Design, 4th Edition 11-33 Naming Frames • To name a frame, add the name attribute to the <frame> element • You do not have to name all of the frames within a frameset, only the frames you want to target <frame src="article1.htm" name=“main"> Principles of Web Design, 4th Edition 11-34 Targeting Named Frames • To target the named frame, you must edit the HTML document that contains the <a> elements and provide target attributes that tell the browser which frame displays the content • You can use the target attribute in either the <base> or <a> elements Principles of Web Design, 4th Edition 11-35 Targeting Named Frames (continued) • Adding the <base> element lets you set the default target frame for all of the links in the document <base target="main"> • You can override a default base target by using the target attribute in the <a> element <a href="article1.htm" target=”frame2”>article 1</a> Principles of Web Design, 4th Edition 11-36 Using Special Target Names • There are four special target names that you can use with the target attribute in either the <base> or <a> elements • Notice that all of these special names begin with an underscore – Any other target name that begins with an underscore will be ignored by the browser Principles of Web Design, 4th Edition 11-37 Principles of Web Design, 4th Edition 11-38 Principles of Web Design, 4th Edition 11-39 Using _blank • The _blank special target name lets you load the linked content into a new instance of the browser • Notice that the Back button is not available in the new browser window because this is the first page in the new window – Not being able to use Back can be disorienting to users who rely on it for navigation Principles of Web Design, 4th Edition 11-40 Principles of Web Design, 4th Edition 11-41 Using _top • Using _top as a special target name displays the linked content in a non-framed window using the same instance of the browser • The Back button is available if the user wants to return to the previous page – Since the browser maintains only one open window, there is no additional memory overhead or confusion for the user Principles of Web Design, 4th Edition 11-42 Principles of Web Design, 4th Edition 11-43 Designing Effective Frames Principles of Web Design, 4th Edition 11-44 Designing Effective Frames • Build your pages to fit within the frames in which they will display, and accommodate different screen resolutions that can affect the size of the frame within the frameset • Decide whether you will use fixed or relative framesets • You can also choose to mix these two measurement types within a single frameset, which can be the best way to handle multiple screen resolutions Principles of Web Design, 4th Edition 11-45 Mixing Fixed and Variable Frames • The following sample framesets demonstrate mixing a fixed frame and a variable frame to accommodate different screen resolutions Principles of Web Design, 4th Edition 11-46 Principles of Web Design, 4th Edition 11-47 Principles of Web Design, 4th Edition 11-48 Principles of Web Design, 4th Edition 11-49 Summary • Use frames judiciously • Make sure that your content demands or benefits from the use of frames • Build simple framesets with no more than two or three frames • Be aware of the limitations of frames Principles of Web Design, 4th Edition 11-50 Summary (continued) • Frames are not the best choice for the toplevel page of your Web site • Use the <noframes> element to contain alternate information about your Web site Principles of Web Design, 4th Edition 11-51 Summary (continued) • Use the special target names to solve design problems, choosing _top over _blank whenever possible • Build your framesets using a combination of fixed and variable frame widths • Test your work for compatibility across browsers Principles of Web Design, 4th Edition 11-52