Frames - People Search
Download
Report
Transcript Frames - People Search
XP
Tutorial 5
Using Frames in a Web Site
1
XP
Tutorial Objectives
Describe the uses of frames in a Web site
Lay out frames within a browser window
Display a document within a frame
Format the appearance of frames
Direct a link target to a specific frame
Direct a link target outside of a frame
layout
Format the color and size of frame borders
Incorporate an inline frame in a page
2
XP
Frames for a Web Site
To display information
from several pages at
the same time
contributed to the
creation of frames.
A frame is a section
of the browser
window capable of
displaying the
contents of an entire
Web page.
3
XP
Disadvantages to Using Frames
The browser has to load multiple HTML files
increasing the waiting time for potential
customers.
It is difficult to bookmark pages that uses
frames
Internet search engines can have problems
adding framed pages to their listings
There is concern that frames can use up
valuable screen space.
4
XP
Planning Your Frames
What information will be displayed in each
frame?
How do you want the frames placed on the
Web page? What is the size of each frame?
Which frames will be static, that is, always
showing the same content?
Which frames will change in response to
hyperlinks being clicked?
Should users be permitted to resize the frames
to suit the needs?
5
Creating a Frameset
<html>
<head>
<title>title</html>
</head>
<frameset>
frames
</frameset>
</html>
The frameset element describes
how the frames are organized
within the browser window.
The frame element defines
which document is displayed
within a frame.
The <frameset> code does not include an
opening and closing <body> tag.
XP
The Frame Syntax
<frameset rows=“row1, row2, . . .”>
row1, row2, etc. are the heights of the frame
rows
<frameset cols=“col1, col2, . . .”>
col1, col2, etc. are the widths of the frame
columns
Row and column sizes can be specified:
in pixels
as a percentage of the total size of the frameset
by an asterisk (*) to allocate any unclaimed
space
8
XP
Frames of Different Sizes
160 pixels wide
25% of
the width
of the
display
area
whatever space is left
<frameset cols=“160,25%,*>
9
XP
Specifying a Frame Source
To specify a source for a frame, use the
<frame> tag with the syntax: <frame
src=“url”>
The url is the filename and location of the page
that you want to load.
You must insert the <frame> tag
between the opening and closing
<frameset> tags.
10
<frameset
rows="85,*">
<frame src=
“head.htm"
scrolling=
"no” />
<frameset
cols=“140,*">
<frame src=
“links.htm”
/>
<frame src=
“home.htm”
/>
</frameset>
</frameset>
<frame src=
“head.htm"
scrolling=
"no”
marginheight=
“0” />
<frame src=
“home.htm”
marginheight=
“0”
marginwidth=
“0”
/>
Controlling the Appearance
of Scroll Bars
XP
By default, scroll bars are displayed when the
content of the source page cannot fit within the
frame.
You can override the default setting using the
scrolling attribute.
<frame src=“url” scrolling=“scrolling”>
scrolling is “yes” or “no”
13
XP
Specifying Margins Syntax
<frame src=“URL” marginheight=“value”
marginwidth=“value”>
marginheight is the amount of space above
and below the content of the page in the
frame
marginwidth is the amount of space to the
left and right of the page
Setting margin values is a process of trial and
error as you determine what combination of
margin sizes looks best.
14
XP
Controlling Frame Resizing
By default, users can resize frame borders in
the browser by simply dragging a frame border.
Some Web designers prefer to freeze, or lock,
frames, so that users cannot resize them.
this ensures that the Web site displays as
the designer intended
<frame src=“url” noresize=“noresize”>
15
XP
Working with Frames & Links
By default, clicking a link within a frame opens
the linked file inside the same frame.
Display links in:
a different frame
a new window
the entire window
Controlling the behavior of links in a framed
page, requires two steps:
give each frame on the page a name, and then
point each link to one of the named frames
16
XP
Files and Links in a Web Site
home.htm
tours.htm
philosph.htm
staff.htm
lessons.htm
17
XP
Assigning a Name to a Frame
To assign a name to a frame, add the
name attribute to the frame tag.
<frame src=“url” name=“name” />
name is of the frame
<frame src="head.htm" marginheight="0"
name="logo" />
<frame src="links.htm"
name="links" />
<frame src="home.htm" marginheight="0"
marginwidth="10" name="pages" />
18
XP
Specifying a Link Target
Use the target attribute to open a linked
target page in a specific frame.
The syntax is:
<a href=“url” target=“name”>
name is the name you’ve assigned to a frame
<a href="home.htm" target="pages">
Home Page</a><br />
<a href="philosph.htm" target="pages">
Our Philosophy</a><br />
<a href="lessons.htm" target="pages">
Climbing Lessons</a><br />
19
XP
Specifying a Link Target
When a page contains many links that should
all open in the same frame, specify the target
frame in the base element within the head.
<head>
<base target=“pages” />
</head>
.
<a href=“links.htm” target=“_self”>
tours</a><br />
The target in the <a> tag overrides any target
specified in the <base> tag
20
XP
Using Reserved Target Names
Reserved target names may be used in place of
a frame name as the target in situations:
when you want the page to appear in a new
window
when you want the page to replace the
current browser window
_blank Loads the target into a new window
_self
_top
21
XP
Using Reserved Target Names
<a href=“tours.htm” target=“
_self”>Tours</a>
Loads the tours.htm into the same frame
<a href=“staff.htm” target=“ _top”>Staff</a>
Loads the staff.htm into the full display area,
replacing the current frame layout
22
XP
Using the <noframes> Tag
Use the <noframes> tag to allow your Web
site to be viewable using browsers that do not
support frames.
When you use the <noframes> tag, you must
include <body> tags.
<html><head><title>Page
Title</title></head>
<frameset>
frames
</frameset>
<noframes>
<body>
Page content
</body></noframes></html>
23
XP
Working with Frame Borders
There are additional attributes you can apply to
the <frame> tag that allow you to change
border size and appearance. For example:
you can remove borders from your frames
to free up more space for text and images
you can change the color of the frame
border so that it matches or complements
the color scheme for your Web site
24
XP
Setting the Frame Border Color
To change the color of a frame’s border, use
the bordercolor attribute.
The attribute can be applied either to an entire
set of frames, using the <frameset> tag, or
to individual frames, using the <frame> tag.
The syntax for this attribute is:
<frameset bordercolor=“color”>
<frame bordercolor=“color”>
color is either a color name or a
hexadecimal color value
25
XP
Setting the Frame Border Width
Another way of modifying frame borders is to
change their widths using the border attribute.
The border attribute can be used only in the
<frameset> tag, and not in individual <frame>
tags. The syntax is:
<frameset border=“value” />
value is the size of the border in pixels.
You can also remove the frame borders entirely
using: <frame frameborder=“value” />
value is “0” to hide the border and “1” to
display it
26
XP
Creating Inline (Floating) Frames
A floating frame is displayed as a separate
box or window within a Web page. The frame
can be placed within a Web page in much the
same way as an inline image.
<iframe src=“url” other-attributes>
</iframe>
url is the name and location of the file you
want to display in the floating frame
<iframe src="bios.htm“
width="400" height="250“
style="float: right; margin: 0 0 0 5">
</iframe>
27
XP
Viewing a Floating Frame
<iframe src="bios.htm“
width="400" height="250“
style="float: right; margin: 0 0 0 5">
</iframe>
floating
frame
28