XHTML Frames - Academic Web Pages

Download Report

Transcript XHTML Frames - Academic Web Pages 

Web Developer Foundations:
Using XHTML
Chapter 5
Key Concepts
1
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
2
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.linmore.com
3
Advantages of
Using Frames
Ease of Navigation
 Ease of Maintenance
 Degrades Gracefully
 Unifies Resources

4
Disadvantages of
Using Frames
Frames are deprecated
 Not Universally Supported
 Bookmark Issues
 Accessibility Issues

5
XHTML
Using Frames

<frameset> tag



<frames> tag



Used to divide up the browser window
Container 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
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.
15