1 / 17

Web Developer & Design Foundations with XHTML

Web Developer & Design Foundations with XHTML. Chapter 5 Key Concepts. Learning Outcomes. In this chapter, you will learn how to: Recognize a web page that uses a frame Identify advantages and disadvantages of using frames Be aware of web accessibility issues when using frames

hu-bowers
Download Presentation

Web Developer & Design Foundations with XHTML

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. Web Developer & Design Foundations with XHTML Chapter 5Key Concepts

  2. Learning Outcomes • In this chapter, you will learn how to: • Recognize a web page that uses a frame • Identify advantages and disadvantages of using frames • Be aware of web accessibility issues when using frames • Use the <frameset> and <frames> tags to create a frameset • Use the <noframes> tag to display content when frames are not supported • Create hyperlinks that target frames • Use the <iframes> tag to create an inline frame

  3. Overviewof Frames • Frames allow the use of multiple, independently controllable sections in a browser window. • Each section is called a "frame" and is created as a separate XHTML file. • Behind the scenes there is another file -- a "master" frameset file that controls the configuration of the entire browser window. • http://www.webgrrls.com • http://www.panynj.gov/aviation/jfkframe.HTM

  4. Advantages ofUsing Frames • Ease of Navigation • Ease of Maintenance • Degrades Gracefully • Unifies Resources

  5. Disadvantages ofUsing Frames • Not Universally Supported • Not in future W3C Recommendations • Bookmark Issues • Accessibility Issues

  6. Checkpoint 5.1 • 1. List three disadvantages of designing a web site with frames. Which disadvantage seems most important to you? Why? • 2. How would you respond to a person who claims that you should never design a web site using frames? Explain. • 3. True or False. A web site created using frames is more accessible than a web site that does not use frames.

  7. XHTMLUsing Frames • <frameset> tag • Used to divide up the browser window • Container tag • <frames> tag • Used to configure a single frame or portion of the browser window • Stand alone tag • <noframes> tag • Used to configure content that should display if the browser does not support frames • Container tag

  8. Sample FramesetDTD & header <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Sample Frameset</title> </head>

  9. Sample FramesetXHTML <frameset rows = "150, *"> <frame name="banner" title="CircleSoft Company Logo" src="banner.htm" scrolling="no" /> <frameset cols="100,*"> <frame name="navigation" title="CircleSoft Site Navigation" src="nav.htm" /> <frame name="main" title="CirclSoft Site Content" src="main.htm" /> </frameset> <noframes> <body> <h1>CircleSoft Web Design</h1> <a href="nav.htm">Site Links</a> </body> </noframes> </frameset> </html>

  10. XHTML <frameset> tag • The frameset tag • Attributes: • bordercolor • cols • frameborder • framespacing • rows • title

  11. XHTML <frame> tag • The frame tag • Attributes: • bordercolor • frameborder • id • longdesc • marginheight • marginwidth • name • noresize • scrolling • src • target • title

  12. XHTML<base> tag • The base tag <base target=“main” /> • Used to configure the default target for all the links on an entire web page • Stand alone tag • Coded in the header section

  13. InlineFrames • Also called floating frame • Can be placed in the body of a web page

  14. XHTML<iframe> tag • The iframe tag <iframe src="trillium.htm" title="Trillium Wild Flower" height="200" align="right" name="flower" width="330"> Description of the lovely Spring wild flower, the <a href="trillium.htm" target="_blank">Trillium</a></iframe> • Used to configure the default target for all the links on an entire web page • Container tag

  15. XHTML<iframe> tag • Attributes • align • frameborder • height • id • longdesc • marginheight • marginwidth • name • scrolling • src • title • width

  16. Checkpoint 5.2 • 1. Describe the uses of the area contained between the opening and closing <noframes> tags. • 2. You have created a frameset but the links in the navigation frame do not open in the frame you designed to hold the content. What might be the reason? How would you correct this? • 3. Describe how the title attribute can be used on a <frame> tag to

  17. Summary • This chapter introduced the use of frames on web pages. • You leaned about the XHTML tags needed to create a web site that uses frames and gained some experience with inline frames. • You also learned that there is a controversy surrounding the use of frames on web pages.

More Related