Chapter 8 HTML Frames

1. Chapter 8HTML Frames

2. Chapter 8 Principles of Web Design Objectives • Understand the benefits and drawbacks of frames • Understand and use frames syntax • Customize frame characteristics including scroll bars, borders, and margins • Understand and use frame targeting and special targeting names • Design content to properly fit framesets

3. Chapter 8 Principles of Web Design Objectives • Design framesets that accommodate different screen resolutions • Design content to properly fit framesets • Design framesets that accommodate different screen resolutions

4. Chapter 8 Principles of Web Design Understanding Frames • Frames allow you to divide the browser window into independent windows, each displaying a separate HTML document

5. Chapter 8 Principles of Web Design

6. Chapter 8 Principles of Web Design 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

7. Chapter 8 Principles of Web Design

8. Chapter 8 Principles of Web Design Frame Drawbacks • Inaccurate bookmarking • Download overhead • Visual and navigation confusion • Poor indexing with search engines

9. Chapter 8 Principles of Web Design Frame Syntax Two-row frame set: <FRAMESET ROWS=”50%,50%”> <FRAME SRC=”top.htm”> <FRAME SRC=”bottom.htm”> </FRAMESET>

10. Chapter 8 Principles of Web Design

11. Chapter 8 Principles of Web Design Frame Syntax Two-column frame set: <FRAMESET COLS=”150,*”> <FRAME SRC=”left.htm”> <FRAME SRC=”right.htm”> </FRAMESET>

12. Chapter 8 Principles of Web Design

13. Chapter 8 Principles of Web Design Frame Syntax Nested frame set: <FRAMESET ROWS="40,*"> <FRAME SRC="topnav.htm"> <FRAMESET COLS="20%,80%"> <FRAME SRC="left.htm"> <FRAME SRC="right.htm"> </FRAMESET> </FRAMESET>

14. Chapter 8 Principles of Web Design

15. Chapter 8 Principles of Web Design 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

16. Chapter 8 Principles of Web Design

17. Chapter 8 Principles of Web Design 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

18. Chapter 8 Principles of Web Design

19. Chapter 8 Principles of Web Design

20. Chapter 8 Principles of Web Design 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 FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 to the <FRAMESET> tag

21. Chapter 8 Principles of Web Design

22. Chapter 8 Principles of Web Design Removing 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

23. Chapter 8 Principles of Web Design

24. Chapter 8 Principles of Web Design 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

25. Chapter 8 Principles of Web Design

26. Chapter 8 Principles of Web Design Frame Targeting 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

27. Chapter 8 Principles of Web Design 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="content">

28. Chapter 8 Principles of Web Design 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

29. Chapter 8 Principles of Web Design Targeting Named Frames • 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>

30. Chapter 8 Principles of Web Design

31. Chapter 8 Principles of Web Design 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

32. Chapter 8 Principles of Web Design

33. Chapter 8 Principles of Web Design

34. Chapter 8 Principles of Web Design Using _blank • The _blank special target name lets you load the linked content into a new instance of Netscape • 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

35. Chapter 8 Principles of Web Design

36. Chapter 8 Principles of Web Design 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

37. Chapter 8 Principles of Web Design

38. Chapter 8 Principles of Web Design Frames and Screen Resolution • Frame scrollbars and borders add to the screen space requirements of frames • Small differences between the way browsers display frames can greatly affect their look

39. Chapter 8 Principles of Web Design

40. Chapter 8 Principles of Web Design

41. Chapter 8 Principles of Web Design 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

42. Chapter 8 Principles of Web Design

43. Chapter 8 Principles of Web Design

44. Chapter 8 Principles of Web Design

45. Chapter 8 Principles of Web Design

46. Chapter 8 Principles of Web Design 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, including possibly increased download times and potential navigation confusion.

47. Chapter 8 Principles of Web Design Summary • Because frameset documents contain no content of their own, they are not the best choice for the top-level page of your Web site. Consider using a standard HTML page for the top-level of the site, and then link the user to your framed content. • Use the <NOFRAMES> element to contain alternate information about your Web site for users with browsers that cannot display frames.

48. Chapter 8 Principles of Web Design Summary • Use the special target names to solve unique design problems, favoring _top over _blank whenever possible. • Build your framesets using a combination of fixed and variable frame widths to accommodate different screen resolutions. • Test your work! Different browsers and screen resolutions affect the look of your framesets.