Web Developer & Design Foundations with XHTML

1

Web Developer & Design Foundations with XHTML

Chapter 5Key Concepts

2© 2007 Pearson Education

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


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


Advantages ofUsing Frames

• Ease of Navigation

• Ease of Maintenance

• Degrades Gracefully

• Unifies Resources


Disadvantages ofUsing Frames

• Not Universally Supported• Not in future W3C

Recommendations• Bookmark Issues• Accessibility Issues


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.


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


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>


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

Sample FramesetXHTML


XHTML <frameset> tag

• The frameset tag• Attributes:

– bordercolor– cols– frameborder– framespacing– rows– title


XHTML <frame> tag

• The frame tag• Attributes:

– bordercolor– frameborder– id– longdesc– marginheight– marginwidth– name– noresize– scrolling– src– target– title


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


InlineFrames

• Also called floating frame

• Can be placed in the body of a web page


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


XHTML<iframe> tag

• Attributes– align– frameborder– height– id– longdesc– marginheight– marginwidth– name– scrolling– src– title– width


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


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.

Web Developer & Design Foundations with XHTML

Documents

Transcript of Web Developer & Design Foundations with XHTML