XP
New Perspectives on Creating Web Pages
with HTML
Using Frames in a Web Site
Tima-ade University Instructor: Abdalle B. 1
Muhumed Gelle
XP
Considerations for a Web Site
• A Web site grows in size and complexity, each page is
dedicated to a particular topic or group of topics.
– one page might contain a list of hypertext links
– one page might display contact information for the company
or organization
– one page might describe the business philosophy
• As more pages are added to a Web site, a designer may
what to display information from several pages at the same
time.
• Such considerations contributed to the creation of frames.
Tima-ade University Instructor: Abdalle B. 2
Muhumed Gelle
XP
Advantages to Using Frames
• Frames can give more flexibility in designing your Web
presentation.
• You can place information in different Web pages, removing
redundancy.
• Frames can make your site easier to manage.
• Frames allows you to update only a few files rather than the
whole.
• Web designers advocate creating both framed and non-framed
versions for a Web site and giving users the option of which one
to use.
Tima-ade University Instructor: Abdalle B. 3
Muhumed Gelle
XP
Disadvantages to Using Frames
• The browser has to load multiple HTML files before a user can
view the contents of the site increasing the waiting time for
potential customers.
• Some older browsers cannot display frames.
• Some users simply do not like using frames.
• Some web authors feel that frames are too constricting, limiting
flexibility in designing the layout of a Web page.
• There is concern that frames can use up valuable screen space.
• The source code is removed from the user.
Tima-ade University Instructor: Abdalle B. 4
Muhumed Gelle
XP
Introducing Frames
• A frame is a section of the browser window
capable of displaying the contents of an entire
Web page. For example:
– the frame on the left may display the contents of a Web
page containing a list of hyperlinks
– the frame on the right may display a Web page with
product information
Tima-ade University Instructor: Abdalle B. 5
Muhumed Gelle
XP
An Example of Frames
This figure shows a
common use of
frames: displaying
a table of contents
in one frame, while
showing individual
pages from the site
on the another.
Tima-ade University Instructor: Abdalle B. 6
Muhumed Gelle
XP
Planning Your Frames
• Before you start creating your frames, it is a good
idea to plan their appearance and how they are to
be used. There are several issues to consider:
– What information will be displayed in each of the
frames?
– 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?
Tima-ade University Instructor: Abdalle B. 7
Muhumed Gelle
XP
Planning Your Frames Continued
– Which frames will change in response to hyperlinks
being clicked?
– What Web pages will users first see when they access
the site?
– Should users be permitted to resize the frames to suit
the needs?
Tima-ade University Instructor: Abdalle B. 8
Muhumed Gelle
XP
An Example of a Frame Layout
This figure shows an
example of a frame
layout.
It is recommended to
draw an example of
what you would like
your Web page to look
like before you get
started.
Tima-ade University Instructor: Abdalle B. 9
Muhumed Gelle
XP
Creating a Frame Layout
• The <frameset> tag is used to store the definitions of the
various frames in the file. These definitions will typically:
– include the size and location of the frame
– include the Web pages the frames display
• The <frameset> code does not include an opening and
closing <body> tag.
– the reason for this is that this HTML file displays the
contents of other Web pages; technically, it is not a Web
page
Tima-ade University Instructor: Abdalle B. 10
Muhumed Gelle
XP
Specifying Frame Size and
Orientation
• To create a frame layout, you will use the rows
and cols attributes of the <frameset> tag.
– the rows attribute creates a row of frames
– the cols attribute creates a column of frames
• A frameset is defined by rows or columns, but not
both.
• You must choose to layout your frames in either
rows or columns.
Tima-ade University Instructor: Abdalle B. 11
Muhumed Gelle
XP
Frame Tags
Tags
<frameset>…</frameset>
· Defines the frame structure on a web page.
<frame />
· Sets up characteristics for a frame
<noframes>…</noframes>
· Allows you to include text for older browsers that do not support
Frames.
· Must be placed just before the last closing </frameset> tag
Tima-ade University Instructor: Abdalle B. 12
Muhumed Gelle
XP
Attributes
•
rows
· Establishes the size for a horizontal frame.
· You can use absolute pixels (exact), percentages (%) of
the window or a relative scale which uses the asterisk
variable ( * ) to take up the rest.
cols
· Establishes the size for a vertical frame.
· You can use absolute pixels (exact), percentages (%) of
the window or a relative scale which uses the asterisk
variable ( * ) to take up the rest.
Tima-ade University Instructor: Abdalle B. 13
Muhumed Gelle
XP
Attributes continued
•
name
· Gives a name to a frame (Remember that this is case sensitive. If
you name a frame "first" then you must refer to it as "first" NOT
"FIRST" and NOT "First" Best to stick to lower case to avoid
confusion.)
src
· Defines name of an HTML file that can be used to appear in a
frame. This is generally the method to define the source html file to
load in a frame when that frameset initially loads.
noresize
· Prevents users from resizing frames.
Tima-ade University Instructor: Abdalle B. 14
Muhumed Gelle
XP
Attributes continued
marginwidth
· Controls the amount of space between the left and right
sides of the page
• marginheight
· Controls the amount of space between the top and
bottom of the page content
scrolling
· Controls the placement of scroll bars
· Values of “auto”, “yes” or “no” (“auto” is the default)
Tima-ade University Instructor: Abdalle B. 15
Muhumed Gelle
XP
Attributes continued
border
· Setting border="0" eliminates all frame borders. This attribute is not
defined in the HTML specification but is widely supported
frameborder
· Turns the border on or off
· Value of “1” or “yes” for “on” or “0” or “no” for “off”
target
· Names another frame in which to load a web page. This is generally used
when we will be loading another web page, via a hyperlink into a specific
frame.
Tima-ade University Instructor: Abdalle B. 16
Muhumed Gelle
XP
Frames Defined in
either Rows or Columns
This figure shows
frame layouts in either
rows or columns.
Tima-ade University Instructor: Abdalle B. 17
Muhumed Gelle
XP
The Frame Syntax
• The syntax for creating a row or column frame
layout is:
– <frameset rows=“row height 1, row height
2, row height 3, . . .”>
• row height is the height of each row
or
– <frameset cols=“column width 1, column
width 2, column width 3, . . .”>
• column width is the width of each column
Tima-ade University Instructor: Abdalle B. 18
Muhumed Gelle
XP
Row and Column Sizes
• Row and column sizes can be specified in three
ways:
– in pixels
– as a percentage of the total size of the frameset
– by an asterisk (*)
Tima-ade University Instructor: Abdalle B. 19
Muhumed Gelle
XP
Defining Rows and Columns
Using an Asterisk (*)
• The asterisk instructs the browser to allocate any unclaimed space
in the frameset to the particular row or column.
– for example, the tag <frameset rows=“160,*”> creates two
rows of frames.
• Specify at least one of the rows or columns of your <frameset>
tag with an asterisk to ensure that the frames fill up the screen.
• You can use multiple asterisks.
• The browser divides the remaining display space equally among
the frames with the asterisks.
– for example, the tag <frameset rows=“*,*,*”> creates three
rows of frames with equal heights.
Tima-ade University Instructor: Abdalle B. 20
Muhumed Gelle
XP
Frames of Different Sizes
This figure shows frames of different sizes.
160 pixels wide 25% of the whatever space is left
width of
the display
area
Tima-ade University Instructor: Abdalle B. 21
Muhumed Gelle
XP
Creating Two Rows of Frames
In this code, the top
row is used for the
company logo, and
the second row is
used for the
remaining content of
the Web page.
A frame that is 85
pixels high should
provide enough tag creates two rows of
space to display the frames: the first 85
logo. The rest of the pixels high and the
display area is second occupying the
occupied by the remaining display area
second row.
Tima-ade University Instructor: Abdalle B. 22
Muhumed Gelle
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.
Tima-ade University Instructor: Abdalle B. 23
Muhumed Gelle
XP
Logo and Placement
This figure shows a
preview of the YCS
logo and its placement.
logo frame
rest of the
frames
Tima-ade University Instructor: Abdalle B. 24
Muhumed Gelle
XP
Inserting a Frame for
the Head.htm File
Because this is the
first <frame> tag,
the browser displays
head.htm in the first
frame row.
Note that using the
comment tag and
indenting the
<frame> tag a few
spaces helps make
your HTML code source for the
easier to follow and first frame
interpret.
Tima-ade University Instructor: Abdalle B. 25
Muhumed Gelle
XP
Nesting <frameset> Tag
• Remember that a frameset is defined by rows or
columns, but not both.
• To create frames using both rows and columns,
one frameset must be nested inside another.
• The interpretation of the rows and cols attributes
changes slightly.
– for example, a row height of 25% does not mean 25%
of the display area, but rather 25% of the height of the
frame into which that row has been inserted (or nested)
Tima-ade University Instructor: Abdalle B. 26
Muhumed Gelle
Creating a Nested Set of Frames XP
in the Second Frame Row
This specifies a width of
140 pixels for the first
column, and whatever
remains in the display
area will be allotted to
the second column.
two columns of
frames nested in the
second frame row
Tima-ade University Instructor: Abdalle B. 27
Muhumed Gelle
XP
Nested Frames
links.htm home.htm
This figure shows table of pages frame
the content of two content
pages and their s frame
placement on the
Web page.
Tima-ade University Instructor: Abdalle B. 28
Muhumed Gelle
XP
Sources for the Two Frames
in the Second Row
This figure shows the
code for two new
frames. It is not
necessary to indent
the code, however, it
can make the code
easier to read and
interpret.
the YCS home
page will appear
in the fourth
frame the table of
contents will
appear in the
third frame
Tima-ade University Instructor: Abdalle B. 29
Muhumed Gelle
XP
Result of Web Site
with Nested Frames
Tima-ade University Instructor: Abdalle B. 30
Muhumed Gelle
XP
Web Site with Frames
heading extends beyond the frame
The design of the border, causing a vertical scroll
frame layout could bar to be displayed
use some
refinement.
The appearance of
scroll bars may or
may not be
appropriate for the
web pages.
table of home page
contents frame frame
Tima-ade University Instructor: Abdalle B. 31
Muhumed Gelle
XP
Controlling the Appearance
of Your Frames
• You can control three attributes of a frame:
– scroll bars
– the size of the margin between the source document
and the frame border
– whether or not the user is allowed to change the size of
the frame
Tima-ade University Instructor: Abdalle B. 32
Muhumed Gelle
XP
Controlling the Appearance
of 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: <frame src=“URL”
scrolling=“scrolling”>
– scrolling can either be “yes” (to always display scroll bars)
or “no” (to never display scroll bars)
• If you don’t specify a setting for the scrolling attribute, the
browser displays scroll bars when necessary.
Tima-ade University Instructor: Abdalle B. 33
Muhumed Gelle
XP
Removing the Scroll Bars
from the Logo Frame
If the complete text
cannot be displayed set the scrolling
after removing the attribute to “no” to
scroll bars from a remove the scroll
frame, you will need to bars
modify the frame
margin.
Tima-ade University Instructor: Abdalle B. 34
Muhumed Gelle
