Download Frames - People Search

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL redirection wikipedia , lookup

Transcript
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