jozef goetz, 2012 1 © 2011 pearson education copyright (c) 2007prentice-hall. all rights reserved

Jozef Goetz, 2012

1

© 2011 Pearson Education

Copyright (c) 2007Prentice-Hall. All rights reserved.

Jozef Goetz, 2012

2Learning Outcomes

In this chapter, you will learn how to: Recognize a web page that uses a frame Identify advantages and disadvantages of using

frames Be aware of web accessibility issues when using

frames Use the <frameset> and <frames> tags to create a

frameset Use the <noframes> tag to display content when

frames are not supported Create hyperlinks that target frames

Jozef Goetz, 2012

3What Are Frames and Who Supports Them?

Frames divide the browser window into multiple logical sections each section can display a different Web page

HTML 4.0 specification includes frames– older browsers don’t support frames

• Netscape Navigator 2.0+ started supporting frames• Internet Explorer 3.0+ started supporting frames

The power of frames is that a single frame can be updated without affecting others Usually the navigation portion of the screen

remains stationary while other parts can scroll

Jozef Goetz, 2012

4Overview of Frames

Frames allow the use of multiple, independently controllable sections

in a browser window.

Each section is called a "frame" and is created as a separate HTML/XHTML file.

Behind the scenes there is another file -- a "master" frameset file that controls the configuration of the entire browser window.

Jozef Goetz, 2012

5Working with Frames

Frames change what a “page” means in a Web site that uses frames, a browser can

contain several “pages” at the same time

31

2

4

Frame Definition(HTML File)

Frame 1 Contents(HTML File)contains the navigation

Frame 2 Contents(HTML File)



Jozef Goetz, 2012

6Advantages of Using Frames

Can display multiple html pages

Some sections fixed, others scrollable

Constant navigational and menu elements

Dynamically changeable content areas

Jozef Goetz, 2012

7Advantages of Using Frames

1. Ease of Navigation the navigation portion of the screen

remains stationary

2. Ease of Maintenance The main navigation is placed on a single

page only

3. Degrades Gracefully Provide content for old browsers that don’t

support frames

4. Unifies Resources Display pages from multiple servers within

a single Web site as part of a unified whole

Jozef Goetz, 2012

8Disadvantages of Using Frames

Not Universally Supported by screen readers and search engine robots Use <noframes> tag to overcome it p.178 ed3, ->slide noframes

Accessibility Issues Some screen readers cannot use framesets and must

access the <noframes> content To overcome it:

Clarify the purpose of each frame by placing titles of the frame

Place a text navigation bar at the bottom of each page or link to the home page

Jozef Goetz, 2012

9Disadvantages of Using Frames

Bookmark Issues It is bookmarked the home page, not other web

pages of the frame To overcome it:

use a right click to open another web page (frame) and then bookmark it

Not in future W3C Recommendations Now browsers support it, but it may not

support in future XHTML 2.0 replaces frames by XFrames

which utilizes XML

Jozef Goetz, 2012

10Checkpoint 5.1 1. List three disadvantages of designing a

web site with frames. Which disadvantage seems most important to you? Why?any of these: The lack of universal support, Bookmark Issues – you may overcome, Accessibility Issues

2. How would you respond to a person who claims that you should never design a web site using frames? Explain. easy navigation and useful if you need to unify

resources from disparate Web servers

3. True or False. A Web site created using frames is more accessible than a Web site that does not use frames. Generally considered less accessible

Jozef Goetz, 2012

11Using Frames

<frameset> tag Used to divide up the browser window Defines the structure of the frames Container tag

<frame> tag Used to configure a single frame or portion of the

browser window Stand alone tag

<noframes> tag Used to configure content that should display if

the browser does not support frames Container tag

Jozef Goetz, 2012

12

Copyright (c) 2006 Prentice-Hall. All rights reserved.

The <noframes> tag

Provides content to browsers that don't recognize frames

Example syntax:<noframes> <body> Thank you for visiting our Web site. We are

currently working on a frameless version of this site. </body></noframes>

Jozef Goetz, 2012

13

13

Frameset Tells the browser how to lay out the page

Contains only the definitions of the frames called the page’s frameset

Tells what frames to include in each section Use <frameset> </frameset> to build the frameset Replaces the <body> tag

It references the HTML documents that will appear in each frame Attribute rows=“*,*,*” – reserves horizontal areas (rows)

of the browser window

Framsets and Frames

Jozef Goetz, 2012

14Working with Frames Frame

Individual subsection of a home page Tells the browser what content to put into page

– Use <frame> </frame> to define the content of frame

The <frame> Tag for each frame defined in <frameset> a corresponding

<frame> tag must be included

Jozef Goetz, 2012

15

15Copyright (c) 2006 Prentice-Hall. All rights reserved.

Nested frameset in the outer frameset

<html><head><title>The Winter and the Summer</title></head><frameset cols="50%, 50%">

<frame src="winter.htm" /><frameset rows="25%, *">

<frame src="summer.htm" /><frame src="spring.htm" />

</frameset></frameset></html>

Jozef Goetz, 2012

16


Effect of Frame Nesting

Note that the right frame is subdivided into two subframes

<html><head><title>The Winter and the Summer</title></head><frameset cols="50%, 50%"> 

<frame src="winter.htm" /><frameset rows="25%, *">

<frame src="summer.htm" /><frame src="spring.htm" />

</frameset></frameset></html>

Jozef Goetz, 2012

17Nested Frameset

Jozef Goetz, 2012

18

Copyright (c) 2006 Prentice-Hall. All rights reserved.

Web Site Flowcharts

• Flowchart – diagram that shows the navigational flow of a Web site

• Useful for planning and designing a complex Web site

• Create the flowchart before actually creating and linking the site’s pages

Jozef Goetz, 2012

19Sample Frameset DTD & header

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Sample Frameset</title></head>

Jozef Goetz, 2012

20

<frameset rows = "150, *"> <frame name="banner" title="CircleSoft Company Logo" src="banner.htm"

scrolling="no" /> <frameset cols="100,*"> <frame name="navigation" title="CircleSoft Site Navigation" src="nav.htm" /> <frame name="main" title="CirclSoft Site Content" src="main.htm" /> </frameset> <noframes> <body> <h1>CircleSoft Web Design</h1> <a href="nav.htm">Site Links</a> </body> </noframes>

</frameset></html>

Sample Frameset

•A parent of a frame is the document containing its frameset

rows tells the browser to split the screen into a number and sizes of horizontal frames

specifies sizes of each top-or-bottom frame in the frameset cols

tells the browser to split the screen into a number and sizes of vertical frames

Jozef Goetz, 2012

21Sample Frameset

Size specifications• Relative (percentage)• Fixed (pixel) size specifications• Asterisk (*) – frame can take the

remainder of the page

e.g. <frameset cols=“160, 80, *"> # of values indicates number of columns

<html> <head><title>Frames</title></head><frameset cols="20%, 80%">

<frame src="left.htm" /><frame src="righ.htm" />

</frameset></html>

Jozef Goetz, 2012

22Sample Frameset

HOP 15.1

Jozef Goetz, 2012

23<base> tag Base target can be used to specify a commonly used target

<base target=“main” /> Used to define a global target Configure the default target for all the links on an entire web page

Stand alone tag Coded in the header section

Will cause all hyperlinks in nav.htm to send content to the "main" frame

nav.htm

Therefore, unnecessary to repeatedly type the same target for multiple links

Saves typing time and reduces risk of typing error

Jozef Goetz, 2012

24noframes

The <noframes> tag special tag used for browsers that don’t support

frames HTML is not displayed in frames-compatible

browsers put main navigation link with a description

<a href="nav.htm">Site Links</a>

used by search engines, PDA’s and Web-aware phones

HOP 15.1

Jozef Goetz, 2012

25XHTML <frameset> tag

The frameset tag p.187 ed3.

Attributes: bordercolor

color of the frame borders in the frameset frameborder

0 – no frame border, 1 – yes, display frame borders (default)

framespacing specify the width of the frameborders in pixels, 0 – remove frame borders

cols tells the browser to split the screen into a number of vertical frames specifies sizes of each side-by-side frame in the frameset

rows tells the browser to split the screen into a number of horizontal frames specifies sizes of each top-or-bottom frame in the frameset

title description of the frameset that can be used by assistive

technologies (readers, search engines)

Jozef Goetz, 2012


Attributes:cols

tells the browser to split the screen into a number of vertical frames

widths are defined by column width values separated by commas

– can be defined in pixels, as a percentage, or with an asterisk (*)

• an asterisk (*) means use as much space as possible

• e.g. <frameset cols=“160, 80, *">

# of values indicates number of columns

Jozef Goetz, 2012

27


Effects of <frameset> and <frame> (with columns)

<html> <head><title>Frames</title></head><frameset cols="20%, 80%">

<frame src="left.htm" /><frame src="righ.htm" />

</frameset></html>

Left frame is 20% of page width, right frame is 80%

Jozef Goetz, 2012


Attributes: rows

tells the browser to split the screen into a number of horizontal frames

Jozef Goetz, 2012

29<frame> tag The frame tag p.188 Attributes:

bordercolor color of this frame border

frameborder 0 – no frame border, 1 – yes, display frame borders (default)

id unique id for the frame

longdesc gives URL of Web page text description may used by assistive technologies (readers, search engines)

marginheight top and bottom margins of the frame

marginwidth right and left margins of the frame

name is used when the target attribute is used to configure hyperlinks

noresize frame cannot be resized

scrolling values: “yes”, ”no” or “auto” indicates that scrollbars appear when needed (default)

src valid file name of a Web page

target used to tell the browser where to display the information pointed to by a hyperlink

title description of the frame that can be used by assistive technologies (readers,

search engines) – recommended by W3C to improve accessibility

Jozef Goetz, 2012

30


Effect of Specifying Margins

Margin in bottom of top frame, caused by changing<frame src="menu.htm" noresize="noresize" scrolling="no" /> to <frame src="menu.htm" noresize="noresize" scrolling="no" marginheight="4" />

Jozef Goetz, 2012

31Changing Frame Borders

2 attributes to the <frame> tag are used to change frame borders: bordercolor

used to change the color of the border values can be any valid color name or hexadecimal value

frameborder used to display or hide the borders of the frame values are 0 to hide the borders or 1 to display the borders

Jozef Goetz, 2012

32


Effect of Specifying Border Width

All frame borders removed, caused by this code:<frameset rows="125, *" border="0"> <frame src="menu.htm" noresize="noresize" scrolling="no" marginheight="4" frameborder="0" />

Jozef Goetz, 2012


<frame> attributes: name

assigns a name to the frame, for targeting purposes (pointing the contents of a link to the frame)

noresize by default, the user can reposition a border -- this

attribute doesn’t allow moving of borders

src specifies the initial document that appears in the

frame

Jozef Goetz, 2012


scrollingallows or denies the user scrolling

capability of a frame, or lets the browser decide if scrolling is used

values can be

–“yes” (scrolling allowed),

–“no” (scrolling denied), or

–“auto” (its up to the browser)

Jozef Goetz, 2012

35


Effect of noresize Attribute

Two-sided arrow will appear and frame can resize if the frame tag is specified as:

<frame src="menu.htm" /> (without the noresize attribute set)

But this will not happen if the frame tag is specified as <frame src="menu.htm" noresize="noresize"/>

Jozef Goetz, 2012

36Sample Frameset

HOP 5.2

Jozef Goetz, 2012

37Sample Frameset - index.html

HOP 5.2

index.html

Jozef Goetz, 2012

38target attribute p.191

target attribute of the <a> tag used to tell the browser where to display the

information pointed to by a hyperlink value of the target attribute is a window name

How it works if a link has a target, the browser checks to see if a

window with the target name already exists if it does, the contents of it are replaced with the link

content

if it doesn’t, a new browser window opens with the content of the link and is given the window name

Jozef Goetz, 2012

39Working with Linked Windows

(navigation)

target=“blue_page”target=“yellow_page”

New window

Replacesyellowpage

New window

target attribute of the <a> tag used to tell the browser where to display the information pointed to by a hyperlink

How it works if a link has a target, the browser checks to see if a window with the target name already exists

if it does, the contents of it are replaced with the link content

Jozef Goetz, 2012

40Types of Special Targets

_self target replaces the content in the same frame

_parent target sends the content to the parent

document of the frame

_blank target opens a completely new browser window for the new page (old window also remains showing)

_top target replaces the main frameset (not in a frame, but in the entire window)

Jozef Goetz, 2012

41


Effect of the _self Target

Clicking the See All Categories link causes new page to appear in same frame because of this tag:

<a href="allcat.htm" target="_self">See All Categories</a>

Jozef Goetz, 2012

42


Effect of the _top Target

Clicking any link causes new page to appear as the whole browser window instead of in a single frame because of this:

<base target="_blank" />

Jozef Goetz, 2012

43Lab Excercises

HandsOn

Practice 5.1 ed3 p.180-185 5.2 ed3 p.189-191

Jozef Goetz, 2012

44Summary

This chapter introduced the use of frames on web pages.

You learned about the (X)HTML tags needed to create a web site that uses frames.

You also learned that there is a controversy surrounding the use of frames on web pages.

jozef goetz, 2012 1 © 2011 pearson education copyright (c) 2007prentice-hall. all rights reserved

Documents