XP 1 Tutorial 5 Using Frames in a Web Site. XP 2 Tutorial Objectives Describe the uses of frames in...

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.

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>

XP 1 Tutorial 5 Using Frames in a Web Site. XP 2 Tutorial Objectives Describe the uses of frames in...

Documents

Transcript of XP 1 Tutorial 5 Using Frames in a Web Site. XP 2 Tutorial Objectives Describe the uses of frames in...