1 / 55

Week 11 Creating Framed Layouts

Week 11 Creating Framed Layouts. 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

sylvester-dillard
Download Presentation

Week 11 Creating Framed Layouts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Week 11Creating Framed Layouts

  2. 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

  3. Understanding Frames

  4. Understanding Frames • Frames allow you to divide the browser window into independent windows, each displaying a separate HTML document

  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

  6. Frame Drawbacks • Inaccurate bookmarking • Download overhead • Visual and navigation confusion • Poor indexing with search engines

  7. Frame Syntax

  8. 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>

  9. The <frame> Element • The <frame> element is an empty element • The src attributeprovides the location of the file that is displayed within the frame

  10. Rows Frameset Syntax • Two-row frameset: <frameset rows=”50%,50%”> <frame src=”top.htm”> <frame src=”bottom.htm”> </frameset>

  11. Columns Frameset Syntax • Two-column frameset: <frameset cols=”150,*”> <frame src=”left.htm”> <frame src=”right.htm”> </frameset>

  12. 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

  13. 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>

  14. Nesting Frames • Nestingallows you to break the screen into both row and column frames

  15. 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>

  16. 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 />

  17. Customizing Frame Characteristics

  18. 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” />

  19. 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

  20. 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

  21. Targeting in Framesets

  22. 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

  23. 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

  24. 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">

  25. Example • <html> • <head> • <title>Frame Links</title> • <base target=“main”> • </head> • <body> • <h1>Links</h1> • <p><a href=“index.htm”>Home</a></p> • <p><a href=“article1.htm”>Article 1</a></p> • <p><a href=“article2.htm”>Article 2</a></p> • <p><a href=“article3.htm”>Article 3</a></p> • <p><a href=“article4.htm”>Article 4</a></p> • <p><a href=“contindx.htm”>Index</a></p> • <p><a href=“sitemap.htm”>Site Map</a></p> • </body> • </html>

  26. Example • <html> • <head> • <title>Frame Links</title> • </head> • <body> • <h1>Links</h1> • <p><a href=“index.htm” target=“main”>Home</a></p> • <p><a href=“article1.htm” target=“main”>Article 1</a></p> • <p><a href=“article2.htm” target=“main”>Article 2</a></p> • <p><a href=“article3.htm” target=“main”>Article 3</a></p> • <p><a href=“article4.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>

  27. 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

  28. 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>

  29. 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

  30. 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

  31. 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

  32. Designing Effective Frames

  33. 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

  34. Mixing Fixed and Variable Frames • The following sample framesets demonstrate mixing a fixed frame and a variable frame to accommodate different screen resolutions

More Related