HTML Frames

Download Report

Transcript HTML Frames 

HTML Frames
http://jjcweb.jjay.cuny.edu/ssengupta/
10/23/2009
1
Objectives

Explore the uses of frames in a Web site

Display a document within a frame

Format the appearance of a frame
10/23/2009
2
What is a frame?

A frame is a section of the browser window capable
of displaying the contents of an entire Web page
10/23/2009
3
Remember!

The browser has to load multiple HTML files
when working with frames
10/23/2009
4
Planning Your Frames first

Before you start creating your frames, plan their
appearance and how they are to be used:
o What information will be displayed in each frame?
o How do you want the frames placed on the Web page?
o What is the size of each frame?
o What Web pages will users first see when they access the
site?
o Should users be permitted to resize the frames to suit their
needs?
10/23/2009
5
Planning Your Frames
10/23/2009
6
Frameset


A frameset describes the frame layout
The <frameset> element is used to store the
definitions of the various frames in the file.
These definitions will typically include:
o Size and location of the frame
o Web pages the frames display
10/23/2009
7
Frameset



What is the tag used for frameset?
<frameset>…</frameset>
example
<html>
<head>
<title>Learning Frames</title>
</head>
<frameset>
define frames here
</frameset>
</html>
10/23/2009
8
Frames Defined in Either Rows
or Columns
10/23/2009
9
Frames in rows or columns


You must choose to layout your frames in
either rows or columns
To create a frame layout, you will use the
rows and cols attributes of the <frameset>
element
o The rows attribute creates a row of frames
o The cols attribute creates a column of frames
10/23/2009
10
rows, cols attribute for <frameset>

Creating a row frame layout
o attribute name: rows
o attribute value: number of pixels | percentage | *
<frameset rows=“row height1, row height2, row
height3, …”>

Creating a column frame layout
o attribute name: cols
o attribute value: number of pixels | percentage | *
<frameset cols=“column width1, column width2,
column width3”>
10/23/2009
11
Content of frames

So, now I have created the frame layout!!

But, what goes inside the frames?
HTML files!!!
10/23/2009
12
Looking back at the first example
10/23/2009
13
Define frame source

use <frame> tag within
o <frameset> & </frameset> tags
<frameset rows=“100,*”>
<frame src=“heading-part.html”>
<frame src=“main-body.html”>
</frameset>
10/23/2009
14
Creating a Nested Set of Frames
in the Second Frame Row
10/23/2009
15
Nesting framesets

nesting one pair of <frameset> tags in
another
<frameset rows=“100,*”>
<frame src=“heading.html”>
<frameset col=“140,*”>
<frame src=“body_left.html”>
<frame src=“body_right.html”>
</frameset>
</frameset>
10/23/2009
16
Formatting a Frame

You can control three attributes of a frame:
o Scroll bars
o The size of the margin between the source
document and the frame border
o Whether or not the user is allowed to change the
size of the frame
10/23/2009
17
Hiding and Displaying 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


The scrolling syntax is: scrolling=“type”
o scrolling can either be “yes” (to always display
scroll bars) or “no” (to never display scroll bars)
10/23/2009
18
Example: Removing the Scroll Bars
10/23/2009
19
Specifying Margins Syntax

The syntax for specifying margins for a frame:
marginheight=“value” marginwidth=“value”
o marginheight is the amount of space, in pixels, above and
below the content of the page in the frame
o marginwidth is the amount of space to the left and right of
the page


If you specify only one, the browser assumes that you
want to use the same value for both
Setting margin values is a process of trial and error as
you determine what combination of margin sizes looks
best
10/23/2009
20
Resizing of frames

restrict resizing of a frame
o attribute name, noresize
10/23/2009
21
Name of a frame

Also, very important: assign name to frames
o attribute name, name
o attribute value, “frame_name”
o Note, you can provide any unique name for a
frame. We will see shortly why frame name is
important.
10/23/2009
22
Example
10/23/2009
23
More attributes for <frameset> tag

change width of frame border
o attribute name: border
o attribute value: “number of pixels”

change color of frame border
o attribute name: bordercolor
o attribute value: “a color”

example
<frameset border=“5” bordercolor=“brown”>
……
10/23/2009
24
Working with Frames and Links
By default, clicking a link within a frame
opens the linked file inside the same frame
 You can display hyperlinks in many ways:

o In a different frame
o In a new window
o In the entire window

When you want to control the behavior of
links in a framed page, there are two
required steps:
o Give each frame on the page a name
o Point each hyperlink to one of the named frames
10/23/2009
25
Specifying a Link Target


You can use the target attribute to open a
page in a specific frame
The syntax for this is: target=“name”
10/23/2009
26
Using Reserved Target Names


Reserved target names are special names that can be
used in place of a frame name as the target
They are useful in situations:
o Where the name of the frame is unavailable
o When you want the page to appear in a new window
o When you want the page to replace the current browser window


All reserved target names begin with the underscore
character ( _ ) to distinguish them from other target
names
Reserved target names are case-sensitive, they must be
entered in lowercase
10/23/2009
27
Using Reserved Target Names
10/23/2009
28
Using the _self Target
10/23/2009
29
Using the <noframes> Element




Use the <noframes> element to allow your Web site to be
viewable using browsers that do or do not support frames
When a browser that supports frames processes this code, it
ignores everything within the <noframes> elements and
concentrates solely on the code within the <frameset>
elements
When a browser that doesn’t support frames processes this
code, it doesn’t know what to do with the <frameset> and
<noframes> elements, so it ignores them
When you use the <noframes> element, you must include
<body> elements, this way, both types of browsers are
supported within a single HTML file
10/23/2009
30
The <noframes> Syntax

The syntax for the <noframes> element is:
<html>
<head>
<title>title</title>
</head>
<frameset>
frames
<noframes>
<body>
page content
</body>
</noframes>
</frameset>
</html>
10/23/2009
31
Frameless Version of a Web Site
10/23/2009
32