Week 11 Creating Framed Layouts Objectives Understand the
Week 11 Creating Framed Layouts
Objectives • Understand the benefits and drawbacks of frames • Understand use frame syntax • Customize frame characteristics including scroll bars, borders, and margins • Understand use frame targeting and special targeting names • Design content to fit framesets properly • Design framesets that accommodate different screen resolutions 11 -2
Understanding Frames 11 -3
Understanding Frames • Frames allow you to divide the browser window into independent windows, each displaying a separate HTML document 11 -4
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 11 -6
11 -7
Frame Drawbacks • • Inaccurate bookmarking Download overhead Visual and navigation confusion Poor indexing with search engines 11 -8
Frame Syntax 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 • Example: <html> <head> <title>Frame Rows</title> </head> <frameset rows=“ 20%, 80%”> <frame scr=“top. htm” /> <frame scr=“bottom. htm” /> </frameset> </html> 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 11 -11
Rows Frameset Syntax • Two-row frameset: <frameset rows=” 50%, 50%”> <frame src=”top. htm”> <frame src=”bottom. htm”> </frameset> 11 -12
11 -13
Columns Frameset Syntax • Two-column frameset: <frameset cols=” 150, *”> <frame src=”left. htm”> <frame src=”right. htm”> </frameset> 11 -14
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 11 -16
The <noframes> Tag Example <html> <head> <title>Frames</title> </head> <frameset cols=“ 75%, 25%”> <frame name=“index” scr=“index. htm” /> <frame name=“title” scr=“title. htm” /> <noframes> <body> (alternate page html code) </body> </noframes> </frameset> </html>
Nesting Frames • Nesting allows you to break the screen into both row and column frames 11 -18
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> 11 -19
11 -20
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 – i. e. <frame scr=“contents. htm” noresize /> 11 -21
11 -22
Customizing Frame Characteristics 11 -23
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 – i. e. <frame scr=“search. htm” scrolling=“no” /> 11 -24
11 -25
11 -26
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 11 -27
11 -28
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 11 -29
11 -30
Targeting in Framesets 11 -31
Frame Targeting • By default, a link loads into the same from which it was selected • You can change this default behavior and target the destination of a link to another frame in the frameset 11 -32
11 -33
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 11 -34
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="article 1. htm" name=“main"> 11 -35
Example • • • • <html> <head> <title>Frame Links</title> <base target=“main”> </head> <body> <h 1>Links</h 1> <p><a href=“index. htm”>Home</a></p> <p><a href=“article 1. htm”>Article 1</a></p> <p><a href=“article 2. htm”>Article 2</a></p> <p><a href=“article 3. htm”>Article 3</a></p> <p><a href=“article 4. htm”>Article 4</a></p> <p><a href=“contindx. htm”>Index</a></p> <p><a href=“sitemap. htm”>Site Map</a></p> </body> </html>
Example • • • • <html> <head> <title>Frame Links</title> </head> <body> <h 1>Links</h 1> <p><a href=“index. htm” target=“main”>Home</a></p> <p><a href=“article 1. htm” target=“main”>Article 1</a></p> <p><a href=“article 2. htm” target=“main”>Article 2</a></p> <p><a href=“article 3. htm” target=“main”>Article 3</a></p> <p><a href=“article 4. htm” target=“main”>Article 4</a></p> <p><a href=“contindx. htm” target=“main”>Index</a></p> <p><a href=“sitemap. htm” target=“main”>Site Map</a></p> </body> </html>
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 11 -38
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="article 1. htm" target=”frame 2”>article 1</a> 11 -39
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 11 -40
11 -41
11 -42
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 11 -43
11 -44
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 11 -45
11 -46
Designing Effective Frames 11 -47
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 11 -48
Mixing Fixed and Variable Frames • The following sample framesets demonstrate mixing a fixed frame and a variable frame to accommodate different screen resolutions 11 -49
11 -50
11 -51
11 -52
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 11 -53
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 11 -54
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 11 -55
- Slides: 55
