in a Web Site Chapter 6 Using Frames in a Web Site 2 Chapter Objectives Define terms related to frames Describe the steps used to design a frame structure Plan and lay out ID: 751902
Download Presentation The PPT/PDF document "Chapter 6 Using Frames" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
![Chapter 9 Question 2 [Anisha Patel]](https://thumbs.docslides.com/215587/chapter-9-question-2-anisha-patel.jpg)
Slide1
Chapter 6
Using Frames
in a Web SiteSlide2
Chapter 6: Using Frames in a Web Site
2
Chapter Objectives
Define
terms
related to
frames
Describe
the
steps
used to
design
a
frame
structure
Plan
and
lay out
a
frameset
Create
a
frame
definition
file
that defines
three
frames
Use
the
<frameset>
tagSlide3
Chapter 6: Using Frames in a Web Site
3
Chapter Objectives
Use
the
<frame> tag
Change
frame
scrolling
options
Name
a
frame
content
target
Identify
Web
pages
to
display
at
startup
Set
frame
rows
and
columnsSlide4
Chapter 6: Using Frames in a Web Site
4
Chapter Objectives
Create
a
navigation
menu
page
with
text
links
Create
a
home
pageSlide5
Introduction
Frame
–
rectangular area
of a Web pageEssentially a window in which a
separate Web page
can be
displayed
Frames
allow
several
Web pages
at one time
in a
single
browser window
Each frame
displays
a
different
,
individual
Web page
Each is capable of
interacting
with
other Web pagesSlide6
Using Frames
Frames can be used
:
Allow user to
view more than on page at a timeCreate a navigation
menu
, as a
replacement
for
menu
lists
and
menu
bar
objects
To display
headers
,
navigation
menus
, or other information that
need to remain on the screen
as
other
parts
of the web page
changeSlide7
Using Frames
To use frames you must
:
Create
a frame definition file to
define
the
layout
of frames
Add
frameset
tags
to
define
the
columns
and
rows
of frames
Define
other frame
attributes
, such as
borders
,
margins
, and
scrollingSlide8
Chapter 6: Using Frames in a Web Site
8
Creating a Frame Definition File
A
frame definition file
defines
the
layout
of the frames in a Web site and
specifies
the Web page
contents
of
each
frame
A
frameset
is used to
define
the
layout
of the
frames
that are
displayedSlide9
Chapter 6: Using Frames in a Web Site
9
Creating a Frame Definition FileSlide10
Chapter 6: Using Frames in a Web Site
10
Frame Tag AttributesSlide11
Defining Columns and Rows in a Frameset
<frameset cols=”22%,78%”>
<frame src=”menu.html” title=”menu” name=”menu” frameborder=”0” />
<frame src=”home.html” title=”win-main” name=”win-main” frameborder=”0” />
</frameset>
Creates
frameset
with
two columns
<frameset rows=”30%,70%”>
<frame src=”menu2.html”/>
<frame src=”home2.html” name=”win-main”/>
</frameset>
Creates
frameset
with
two rowsSlide12
Defining Frame Attributes
frameborder attribute
–
defines
the border that separates
frames
1 – turns attribute
on
0 – turns attribute
off
Browser
automatically
inserts
five
pixels
of
space
to
separate
the
frames
(can be changed)
marginwidth attribute
– lets you
change
the
margin
on the
left
and/or
right
of a frame
marginheight attribute
– lets you
change
the
margin
above
and
below
a document within a frame
Specify size
of margin in number of
pixelsSlide13
Defining Frame Attributes
scrolling attribute
–
instructs
the browser that scroll bars should not
be
displayed
turning
off
scrolling
prevents
user from being able to
scroll
the
page
Note:
To turn off scroll bars, the <frame /> tag must include the
scrolling=“no”
attribute and value
noresize attribute
–
instructs
the browser that user can
not resize
the
frames
window size by
dragging
its
borders
“noresize”
setting prevents user from being able to resize the frame
Note:
To turn off resizing, the <frame /> tag must include the
noresize=“noresize”
attribute and valueSlide14
Planning and Laying Out Frames
The
most important step
in creating an effective frame structure is
planning and laying
out
a good frame
design
.
Sketching
frame
structure
on
paper
before
writing
HTML
code
Saves time
when determining which HTML <frameset> and <frame/> tags and attributes to use
Once the structure is on paper, the
number
of
rows
and
columns
required, as well as whether
scrolling
is
needed
, is more
apparentSlide15
Creating a Frame Definition File
First step
in creating the Web page is to
code
the frame definition file using HTML
tags.
Noframes tag
– used to create
alternative
text that appears in lieu of frames for
browsers
that do
not support frames
Use <noframes> tag after the last </frameset> tag
End this section of HTML code with </noframes> tagSlide16
Noframes Example
noframes
HTML tag
noframes
closing tagSlide17
Entering Initial HTML Tags to Define the Web Page Structure
Chapter 6: Using Frames in a Web Site
17
Note difference – use
of frameset type rather
than transitional type
No <body> or
</body> tags
with framesetsSlide18
Defining the Frameset Columns and Rows
Define
the
frame structure
– number of columns and
rows
of the
display area
Frame definition file
(
framedef.html
) used in this chapter’s web site
Site includes
two columns
that divide screen
vertically
When framedef.html file
opened
in
browser
navigation menu (
menu.html
) appears in
left frame
Content of
left frame
remains
constant
Content of
right frame
changesSlide19
Chapter 6: Using Frames in a Web Site
19
Defining Columns and Rows
in the Frameset
Start frameset tag with
two columns set at 22%
and 78% respectivelySlide20
Specifying Attributes of the Menu and Main Frame
Add specific attributes of each frame
<frame /> tag used to define each frame in a frame definition file
Src attribute of <frame /> tag used to identify the Web page that will appear in this frame
left column
right column
menu.html
home.htmlSlide21
Chapter 6: Using Frames in a Web Site
21
Specifying Attributes of the Menu Frame
Title and name
of frame set to
“menu”
No frameborder
on this frame
First frame (first column) will
display menu.html file: this frame
will always display menu.html file
for navigationSlide22
Chapter 6: Using Frames in a Web Site
22
Specifying Attributes of the Main Frame
No frameborder
on this frame
Second frame (second column)
will display home.html file at
startup; this frame will change
when links are clicked
Title and name of frame set
to “win-main” – this is main
frame in which all other
content will displaySlide23
Chapter 6: Using Frames in a Web Site
23
Frames General Code
Type
<frameset cols=”22%,78%”>
to define the two columns
Type
<frame src=”menu.html” title=”menu” name=”menu” frameborder=”0” />
Type
<frame src=”home.html” title=”win-main” name=”win-main” frameborder=”0” />
Type
</frameset>Slide24
Chapter 6: Using Frames in a Web Site
24
Ending the Framesets
Two columns
created
Turn
frameborders
off with 0
Start and end
frameset
menu.html will be
displayed in first
frame in left column;
home.html will be
displayed in second
frame in right column
target called
win-main where
each Web page
is displayedSlide25
Saving, Validating, and Printing the HTML File
Click
the
Save button
in the Save As dialog box to save the file on the USB flash drive with the file name framedef.htmlValidate
the
Web page
Click
framedef.html
–
Notepad
on the taskbar and print the HTML file
Chapter 6: Using Frames in a Web Site
25Slide26
Chapter 6: Using Frames in a Web Site
26
Saving, Validating, and Printing the HTML FileSlide27
Chapter 6: Using Frames in a Web Site
27
Creating the Navigation Menu Page
The
menu frame
will always
display
the
menu
Web
page
(
menu.html
) in the
left
frameset
.
Page contains the
logo
together with
graphic
and
text
links
that are used as a
navigation
menu
.
Page includes
links
to
display
various
pages
in the
main
frame
(
rightmost
frameset
)Slide28
Chapter 6: Using Frames in a Web Site
28
Adding Links with Targets to the Menu PageSlide29
Adding Links with Targets to the Menu Page
Chapter 6: Using Frames in a Web Site
29
When Necklaces link is clicked
(either text or image), browser
will display necklace.html Web
page in win-main target frame
Text link for
necklace.html
Web page
This table data cell contains
jewelslogo.gif image that will
display home.html file in target
win-main when image link is clicked
When Orders link is clicked either
text or image), browser will display
orderform.html Web page in win-main
target frame same for Bracelets and
Watches text and image links (will
display bracelet.html and watch.html)
Image link for
necklace.html
Web page
after break line
Image link for
orderform.html
Web page
after break lineSlide30
Adding an E-mail Link
Type
<p><em><font size=”-1”>
E-mail questions and comments to
as the code
Type
<a href=”mailto: janasjewels@isp.com”>janasjewels @isp.com</a>.</font></em></p>
to complete the e-mail link
Chapter 6: Using Frames in a Web Site
30Slide31
Adding an E-mail Link
Chapter 6: Using Frames in a Web Site
31
Email linkSlide32
Saving, Validating, and Printing the HTML File
Chapter 6: Using Frames in a Web Site
32Slide33
Creating the Home Page
Copying and Pasting the HTML Code to a New File
Chapter 6: Using Frames in a Web Site
33
New title is
Home Page
Copy/pasted HTML
code from
menu.html fileSlide34
Chapter 6: Using Frames in a Web Site
34
Creating the Home Page
Image of jewelry
collage to be displayed
on home page
Two paragraphs
of text with
larger font (+1)
Horizontal space
(10 pixels) added
to separate
image from textSlide35
Chapter 6: Using Frames in a Web Site
35
Saving, Validating, and Printing the HTML FileSlide36
Viewing and Printing the Frame Definition File Using a Browser
Chapter 6: Using Frames in a Web Site
36Slide37
Chapter 6: Using Frames in a Web Site
37
Testing and Printing the Links
Click
the
Necklaces link
on the
navigation
menu
and
ensure
that the
Necklaces
page
shows
in the
main
frame
Click
the
drop-down
arrow
on the
Print
icon
on the
Command
bar
and
click
Print
.
Click
the
Options
tab
in the Print dialog box,
click
As
laid
out
on screen, and then
click
the
Print
button to print a copy of the necklace.html Web page as laid out in the browserClick the
Bracelets
link
on the
navigation
menu
and
ensure
that the
Bracelets
page
shows
in the
main
frame
. If you want a copy of the Web page as shown in the browser,
print
the Web page
using
the
As laid out
on screen optionSlide38
Chapter 6: Using Frames in a Web Site
38
Testing and Printing the Links
Click
the
Watches link
on the
navigation
menu
and
ensure
that the
Watches
p
a
ge
shows
in the
main
frame
. If you want a copy of the Web page as shown in the browser,
print
the Web page using the
As laid out
on screen option
Click
the
Orders link
on the
navigation
menu to
ensure
that the
order
form
appears
in the
main
frame
. If you want a copy of the Web page as shown in the browser,
print
the Web page using the
As laid out
on screen option
Click
the
Home link
on the
navigation
menu
by
clicking
the Jana’s
Jewels
logo
Click
the
e-mail link
and
verify
that the
New Message window
shows janasjewels@isp.com as the
address
.
Click
the
Close
button
to
close
the New Message window and
quit
the
e-mail programSlide39
Testing and Printing the Links
Chapter 6: Using Frames in a Web Site
39Slide40
Chapter 6: Using Frames in a Web Site
40
Chapter Summary
Define
terms
related to
frames
Describe
the
steps
used to
design
a
frame
structure
Plan
and
lay
out
a
frameset
Create
a
frame
definition
file that defines three frames
Use
the <
frameset
> tagSlide41
Chapter 6: Using Frames in a Web Site
41
Chapter Summary
Use
the <
frame
> tag
Change
frame
scrolling
options
Name
a frame content
target
Identify
Web pages to
display
at
startup
Set
frame
rows
and
columnsSlide42
Chapter 6: Using Frames in a Web Site
42
Chapter Summary
Create
a
navigation
menu
page with
text
links
Create
a
home
pageSlide43
Project 4: Creating Tables in a Web Site
43
Homework # 11
In the Lab 2 page
HTML
295-296
Bright Idea, LLC Web Site
See
INF 186 Computer Assignment 11 Web page
for
details
,
hints
, and
requirements
for the
assignmentSlide44
Chapter 6 Complete
Using Frames
in a Web Site