1 / 38

FRAMES

FRAMES . Pros and Cons. Barbara Jacobs Dick Delaney Bob Rogalski. A frame is a section of the browser window capable of displaying the contents of an entire Web Page. What are Frames?. Source: Patrick Carey (2003), New Perspectives on Creating Web Pages with HTML 3 rd Edition.

uri
Download Presentation

FRAMES

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. FRAMES Pros and Cons Barbara Jacobs Dick Delaney Bob Rogalski

  2. A frame is a section of the browser window capable of displaying the contents of an entire Web Page What are Frames? Source: Patrick Carey (2003), New Perspectives on Creating Web Pages with HTML 3rd Edition

  3. The multiple views of frames offer designers a way to keep information visible, while other views are scrolled or replaced. For example: Within the same window, one frame may display a static banner, a second frame a navigation menu and a third frame the main document that can be scrolled through or replaced by navigating in the second frame What are Frames? (continued) Source: http://www.w3.org/TR/REC-html40/present/frames.html#h-16.1

  4. An Example of Frames This figure shows a common use of frames: displaying a table of contents in one frame, while showing individual pages from the site on the another. Source: Creating Web Pages with HTML, 3rd e, Tutorial 5 (C. Hueckstaedt)

  5. Plan your Frames • Frame issues to consider • What information will be displayed in each frame • How do you want the frames to be placed on the Web page • What is the size of each frame • Which frames are static (always showing the same content) • Which frames will change in response to hypertext links being clicked • What Web pages will users first see when they access the site • Should users be permitted to resize the frames Source: Patrick Carey (2003), New Perspectives on Creating Web Pages with HTML 3rd Edition

  6. Frames Document Tags Source: Deborah S & Eric J Ray, HTML 4 for Dummies

  7. <frameset> Attributes Source: Deborah S & Eric J Ray, HTML 4 for Dummies

  8. <frameset> Attributes (con’t) Source: Deborah S & Eric J Ray, HTML 4 for Dummies

  9. <frame> Attributes Source: Deborah S & Eric J Ray, HTML 4 for Dummies

  10. <frame> Attribute (con’t) Source: Deborah S & Eric J Ray, HTML 4 for Dummies

  11. <noframes> Attribute • None

  12. <iframe> Attributes Source: Deborah S & Eric J Ray, HTML 4 for Dummies

  13. <iframe> Attributes (con’t)

  14. <iframe> Attributes (con’t) Source: Deborah S & Eric J Ray, HTML 4 for Dummies

  15. Sample Frame Syntax <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"><html><head><title>This Site - Welcome</title></head> <frameset cols="40%, 30%, 30%"><frameset rows="150, *"> <frame src="keyboards.html" name="keyboards“ frameborder="1" marginwidth="2" marginheight="2"><frame src="monitors.html" name="monitors" frameborder="1" marginwidth="2" marginheight="2"></frameset><frame src="cpus.html" name="cpus" frameborder="1" marginwidth="2" marginheight="2"><frame src="mice.html" name="mice" frameborder="1" marginwidth="2" marginheight="2"> <noframes> <body><p>Content of the noframes version.<ul><li>Some information<li>More information</ul></body></noframes> </frameset></html> Source: http://www.sbrady.com/hotsource/html/frames.html

  16. Pros • Frames allow you to keep pertinent information always on the screen.For example, if you click any of the links on the Frames Links page, you will open a frameset. The top frame is always in view so that you can get back to the HTML Web site. If this were in a table and you had scrolled to the bottom of the screen, you wouldn't see those options as easily. Source: http://webdesign.about.com/cs/framesproscons/index.htm

  17. Cont. Pro’s • Some studies have shown that viewers of the web have a tendency not to scroll very much. While I believe that people will scroll if they find the page interesting, it is better to keep things you want them to see at the top of the page, or in a static frame. • Keep the user happy! Source: http://webdesign.about.com/cs/framesproscons/index.htm

  18. Cont. Pro’s • Frames provide a simple way to create a Table of Contents for your site.It's simple because you only need one page of HTML to create the table of contents. If you do a TOC in a table on every page, you have to recreate the same information over and over. Source: http://webdesign.about.com/cs/framesproscons/index.htm

  19. Cont. Pro’s • Frames create an advertisment that is always present. • Advertising may be annoying, but it is an easy way to generate revenue for a Web site. Even if your ads are simply link exchange banners, they are more likely to be hit if they are right in front of your viewers. Source: http://webdesign.about.com/cs/framesproscons/index.htm

  20. Cont. Pro’s • Frames allow you to "brand" your site. • In the same fashion that you can create an advertising space, you can create a space for your Web site logo or Company Information and keep it in a frame so that it is always in view of your readers. Branding helps your audience remember your site, especially if you have a compelling graphical element that allows them to remember you. And if it is always present in a frame, they are more likely to remember it. Source: http://webdesign.about.com/cs/framesproscons/index.htm

  21. The “cons” of Frames by Robert Rogalski

  22. Cons > Pros • The cons very greatly outweigh the pros. • Frames can be useful and tolerable if designed properly. • Frames can represent a nuisance if not designed and implemented properly.

  23. Scrollbar Mania (or not) • Frames can mean added scrollbars on the page (a bad thing). • If the browser is restored to a smaller size, scrollbars may appear on each frame. This may include horizontal scrollbars on a frame if the width of that frame is too small. • If the scrolling attribute is set to “no” within the <frame> tag, and if the browser is restored to a smaller size, clipping of content may occur, and thus the user may not be able to scroll down the frame to see additional content (if any). This is common when viewing content on a left-framed list of links. • A possible solution: Always set scrolling equal to “auto” within the <frame> tag for each and every frame. At the same time, set the frameborder attribute equal to zero to avoid the slider tray from appearing on the page.

  24. Spidering Problem Let’s take a look at this code. Notice that there is no <body> tag… <html> <head> <title>cnyrock</title> </head> <frameset cols="140,*" border="0"> <frame src="menu.html" frameborder="0" marginwidth="0“ marginheight="0" scrolling="no“ noresize="noresize" /> <frame src="message.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" name="main" /> </frameset> </html>

  25. The page just shown is the first page of the Web site which initiates the framed pages. Since this first page consists of no links and no content, the search engine will not be able to spider the rest of the pages associated with that site. • A possible solution: Place the following code between the <frameset> opening and closing tags: <noframes> <body> link(s) to the next page(s) </body> </noframes> Also, implement the <meta name=“keywords” content=“key words” /> tag between the <head> opening and closing tags so that search engines can index the frameset page.

  26. Search Retrieval Problems • When searching for a site with frames, the user might retrieve 1 frame instead of the entire site, hence not being able to view the whole site. • A possible solution: Have each frame consist of a home link, or better yet, JavaScript code that forces all frames to appear (beyond the scope of this course).

  27. (Im)proper Linking • A link to another site within a frame might load that site into that same frame, which means the other frame is remaining intact with a different site. • A possible solution: Always have links consists of the attribute target=“_blank” which will bring up a new browser window for that link.

  28. Frames Can Break • It has been experienced that frames may not load properly or not at all. Sometimes when loading a site with frames, one frame might load up while another frame is missing. • A Possible Solution: Try maximizing the browser and refreshing the page for optimal results.

  29. Bookmarking, Back, & Reload • If attempting to bookmark a frame, that frame might not get bookmarked; but rather, the frameset page will get bookmarked instead. • If you want to go back to a previous frame, the back button may or may not give you the previous frame. • If at a certain frame, reloading the page will more than likely reload the entire site.

  30. Printing Problems • One of the most major problems with frames. • Only one frame at a time can get printed. • A possible solution: Click on File and then click on Print Preview to see exactly what you are printing!

  31. I-Frames • An i-Frame loads a new browser or image on the same page you are currently at. However, the image must fit the i-frame perfectly. If the image size is larger than the i-frame size, then scrollbars within the i-frame will appear and/or there will be image cutoff. If the image size is smaller than the i-frame size, then the background of the i-frame will be noticed (if that background is of different color).

  32. Frame-Incompatible Browsers • Older browsers or browsers that don’t recognize frames will not be able to access the frames. • A possible solution: Place the <noframes> beginning and ending tags within the frameset that redirects the user to a non-framed site via a hyperlink. Also, user must update browser to the latest version!

  33. Some Good News… • For the most part, we no longer have to worry about browsers being “frame-incompatible.” • Today, about 99% of browsers are now frame-compatible. An example of a “browser” that falls into the 1% category is WebTV. • Most people today update or should update their browser to the latest version. A lot of computers today automatically update software. Using a well-known browser that supports frames such as Netscape or Internet Explorer is an optimal solution in getting the most out of the Web.

  34. Summary • Frames let you have several different HTML documents visible within a single browser window, providing at least the possibility for visually interesting or easy-to-navigate sites. • Each frame consists of an individual HTML document. • Frames lets you put multiple separate HTML documents on a single web page, each in an individual box.

  35. Questions • What are frames? • Why would you use frames in your HTML documents? • Would you use 3 or 4 frames on your web site? Why or Why not? • What other concerns are there using frame? Please Explain

  36. Questions • What types of negative experiences have you had with frames while surfing the net? • Can you think of additional “cons” with frames? • If frames are so bad, then why are they not being deprecated?

  37. Information Sources • http://www.w3.org/TR/REC-html40/present/frames.html#h-16.1 • Patrick Carey (2003), New Perspectives on Creating Web Pages with HTML 3rd Edition, Cambridge, MA, Course Technology • Creating Web Pages with HTML, 3e, PowerPoint tutorial 5 • HTML 4 for Dummies • http://www.sbrady.com/hotsource/html/frames.html • http://webdesign.about.com/cs/framesproscons/index.htm

  38. Works Cited Momp’s Web Design. “Frames Tutorial: The Pros & Cons of Frames..!” 2001-2003 Momp’s Web Design. <http://www.mompswebdesign.com/tutorials/frames2.html> Owen, Dave. “The Pros & Cons of Using Frames in Web Pages” Wavelength Media. Media College. <http://www.mediacollege.com/internet/html/frames/pros-cons.html>

More Related