Transcript Document

Tutorial 9
Creating Frames
INTRODUCTORY
Objectives
•
•
•
•
•
XP
Decide when to use frames for a Web site
Learn the components of framesets
Create a frameset document
Size frameset windows
Target individual frame windows
New Perspectives on Blended HTML, XHTML, and CSS
2
Objectives
•
•
•
•
XP
Identify the purpose of inline frames
Create an inline frame
Target an inline frame window
Use the meta tag to create a slide show
New Perspectives on Blended HTML, XHTML, and CSS
3
Using Frames on a Web Page
XP
• Frames divide a Web page into several windows
called frames
– Each frame allows you to see a different Web page in
the same browser window
• To create frames, you first need to create a
frameset document
• Frames are similar to tables in that frames
establish rows and columns
• The frameset document uses the <frameset>
</frameset> tags
New Perspectives on Blended HTML, XHTML, and CSS
4
Creating a Row Frameset
XP
• To create a rows frameset, enter the following
code:
<frameset rows="value1, value2,
..."></frameset>
where value1 is the height of the first row,
value2 is the height of the second row, and so
forth. The values should be expressed as a
percentage
• Optionally, use the (*) wildcard character as the
last value or if the rows will be of equal height
New Perspectives on Blended HTML, XHTML, and CSS
5
Creating Frames
XP
• To create frames, enter the following code:
<frame src="filename.htm"
name="framename" />
where filename is the name of the file that will
be displayed in the frame and framename is the
name of the frame
New Perspectives on Blended HTML, XHTML, and CSS
6
Creating Frames
New Perspectives on Blended HTML, XHTML, and CSS
XP
7
Creating a Column Frameset
XP
• To create a columns frameset, enter the following code:
<frameset cols="value1, value2,
etc."></frameset>
where value1 is the width of the first column, and
value2 is the width of the second column, and so forth.
The values should be expressed as a percentage
• Optionally, use the (*) wildcard character as the last
value or if the columns will be of equal width
New Perspectives on Blended HTML, XHTML, and CSS
8
Creating a Column Frameset
New Perspectives on Blended HTML, XHTML, and CSS
XP
9
Opening a Document in a Specific
Frame
XP
• By default, a link in a frameset document will
open in the same frame
• Use the target attribute in the <a> tag
– The target attribute should be set to the name of the
frame in which you wish to open the Web page
New Perspectives on Blended HTML, XHTML, and CSS
10
Using Magic Targets
XP
• Magic targets have special meanings in HTML
– _top
– _blank
– _self
• The base tag automates the process of targeting
links
New Perspectives on Blended HTML, XHTML, and CSS
11
Controlling Scrollbars and the
Frame Size
XP
• To control the appearance of scrollbars and the
size of a frame, enter the following code:
<frame src="filename.htm"
scrolling="scroll_value"
noresize="noresize" />
where scroll_value is either auto, yes, or no, and
noresize has a value of noresize to disable screen
resizing.
New Perspectives on Blended HTML, XHTML, and CSS
12
Controlling Scrollbars and the
Frame Size
New Perspectives on Blended HTML, XHTML, and CSS
XP
13
The border Attribute
XP
• Eliminating borders creates a less cluttered look
to the screen
– Seamless frames
New Perspectives on Blended HTML, XHTML, and CSS
14
Controlling the Frame Height
and Width
XP
• To control the height and width of a frame, enter
the following code:
<frame src="filename"
marginheight="value"
marginwidth="value2" />
where value is the height of the frame in pixels
and value2 is the width of the frame in pixels
New Perspectives on Blended HTML, XHTML, and CSS
15
Controlling the Frame Height
and Width
New Perspectives on Blended HTML, XHTML, and CSS
XP
16
Frameset Attributes and Values
New Perspectives on Blended HTML, XHTML, and CSS
XP
17
Frameset Attributes and Values
New Perspectives on Blended HTML, XHTML, and CSS
XP
18
Frameset Attributes and Values
New Perspectives on Blended HTML, XHTML, and CSS
XP
19
Creating Inline Frames
XP
• Inline frames create a frame window within a document
without your having to create a frameset
• To create an inline frame, enter the following code:
<iframe src="filename"
name="target_name">
</iframe>
where filename is the name of the file that will initially
be displayed in the inline frames window and
target_name is the name of the inline frames window
New Perspectives on Blended HTML, XHTML, and CSS
20
Creating Inline Frames
New Perspectives on Blended HTML, XHTML, and CSS
XP
21
Document Type Definitions
New Perspectives on Blended HTML, XHTML, and CSS
XP
22
Using the meta Tag to Create a
Slide Show
XP
• To create a slide show, enter the following code:
<meta http-equiv="refresh"
content="number_seconds;
url=filename">
where number_seconds is the number of
seconds you want as the interval until the next
file is displayed and filename is the name of the
next file to be displayed in the slide show
New Perspectives on Blended HTML, XHTML, and CSS
23
The Future of Frames
New Perspectives on Blended HTML, XHTML, and CSS
XP
24
The iframe Attributes
New Perspectives on Blended HTML, XHTML, and CSS
XP
25