frames lecture
Download
Report
Transcript frames lecture
Frames
• 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
1
Overview
of 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.H
TM
2
Possible advantages of
Using Frames
Ease of Navigation
Ease of Maintenance
Degrades Gracefully
Unifies Resources
3
Disadvantages of
Using Frames
Not Universally Supported
Not in future W3C
Recommendations
Bookmark Issues
Accessibility Issues
DON’T use unless really need
capabilities!
4
Questions
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.
5
XHTML
Using 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
6
Sample Frameset
DTD & 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/xhtml1frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Frameset</title>
</head>
7
Sample Frameset
<frameset rows = "150, *">
XHTML
<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>
8
XHTML
<frameset> tag
The frameset tag
Attributes:
• bordercolor
• cols
• frameborder
• framespacing
• rows
• title
9
XHTML
<frame> tag
The frame tag
Attributes:
•
•
•
•
•
•
•
•
•
•
•
•
bordercolor
frameborder
id
longdesc
marginheight
marginwidth
name
noresize
scrolling
src
target
title
10
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
11
Inline
Frames
Also called floating frame
Can be placed in the body of a
web page
12
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
13
XHTML
<iframe> tag
Attributes
•
•
•
•
•
•
•
•
•
•
•
•
align
frameborder
height
id
longdesc
marginheight
marginwidth
name
scrolling
src
title
width
14
Questions
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
15