Date post: | 27-Dec-2015 |
Category: |
Documents |
Upload: | melinda-joseph |
View: | 219 times |
Download: | 0 times |
1
XP
Tutorial 5
Using Frames in a Web Site
2
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
3
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.
4
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.
5
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?
<html><head><title>title</html></head><frameset>
frames</frameset></html>
Creating a Frameset
The frameset element describeshow the frames are organizedwithin the browser window.
The frame element defineswhich document is displayedwithin a frame.
The <frameset> code does not include anopening and closing <body> tag.
8
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
9
XP
Frames of Different Sizes
160 pixels wide 25% of the width
of the display
area
whatever space is left
<frameset cols=“160,25%,*>
10
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.
<frameset rows="85,*">
</frameset>
<frame src= “head.htm" scrolling= "no” />
<frameset cols=“140,*">
</frameset>
<frame src= “links.htm” />
<frame src= “home.htm” />
<frame src= “head.htm" scrolling= "no” marginheight= “0” />
<frame src= “home.htm” marginheight= “0” marginwidth= “0” />
13
XPControlling the Appearanceof Scroll Bars 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”
14
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.
15
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”>
16
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
17
XP
Files and Links in a Web Sitehome.htm
philosph.htm
lessons.htm
tours.htm
staff.htm
18
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" />
19
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 />
20
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
21
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
22
XP
Using Reserved Target Names <a href=“tours.htm” target=“
_self”>Tours</a>
<a href=“staff.htm” target=“ _top”>Staff</a>
Loads the staff.htm into the full display area,replacing the current frame layout
Loads the tours.htm into the same frame
23
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>
24
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
25
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
26
XPSetting 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
27
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>
28
XP
Viewing a Floating Frame
floating frame
<iframe src="bios.htm“width="400" height="250“
style="float: right; margin: 0 0 0 5"> </iframe>