1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner
1
Lesson 4 HTML Structural Design Techniques
HTML and JavaScript
BASICS, 4th Edition
Barksdale / Turner
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 2 2
Objectives
Create a frameset.
Add a navigation bar.
Make a welcome page.
Create a nested frameset.
Include a title bar frame and page.
Utilize frame and frameset options.
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 3 3
Vocabulary
border attribute
cols attribute
frames
frame separator
frameset tag
left-hand navigation
name attribute
navigation bar
nested frameset
noresize attribute
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 4 4
Vocabulary (continued)
pixel
rows attribute
src attribute
target attribute
title bar
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 5 5
Creating an HTML Frameset
Framesets allow you to display two or more
Web pages on the screen at the same time.
One frame can communicate with a page in a
different frame.
As its name implies, the frameset tag allows
you to define a set of rectangular areas on
your browser screen called frames.
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 6 6
Creating an HTML Frameset (continued)
The <frameset> and </frameset> tags mark
the beginning and end of frame definitions.
The rows attribute allows you to define
horizontal frames. The cols attribute allows
you to define vertical frames.
The name and src attributes allow you to
name each frame and to specify the source
Web page to be displayed in each frame.
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E
Creating an HTML Frameset (continued)
Three frames on a Web page
7
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 8 8
Adding a Navigation Bar
A common Web design is to place a Web page
in a narrow left-hand frame that contains
hyperlinks. The Web page is displayed in the
larger right-hand frame.
This is referred to as left-hand navigation, and
the Web page containing the hyperlinks is
called a navigation bar.
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E
Adding a Navigation Bar (continued)
Two-frame Web page
9
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 10 10
Adding a Navigation Bar (continued)
A pixel is an individual “dot” of light on a
computer screen.
The target attribute tells the browser which
frame it should use to display the target Web
page.
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 11 11
Creating a Web Site Welcome Page
A welcome page should give users a good first
impression of the Web site.
A welcome page with
a navigation bar
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 12 12
Creating a Nested Frameset
As you recall, a frameset can contain either
horizontal frames or vertical frames, but not
both.
A nested frameset solves this problem.
– You can use a <frameset> tag inside another
<frameset> tag to create both vertical and
horizontal frames.
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 13 13
Creating a Title Bar
A page that displays
a constant title for a
Web site is
commonly called a
title bar.
Three frames with a navigation
bar, title bar, and welcome page
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 14 14
Using Advanced HTML Options
The border attribute within the <frameset>
tag adjusts the appearance of the frame
separators.
The noresize attribute within the <frame> tag
instructs the browser that the user should not
be able to change the size of the frames.
These two attributes can be used separately
or together.
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E
Using Advanced HTML Options (continued)
Eliminating frame separators on a Web page
15
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 16 16
Summary
In this lesson, you learned:
How to create a frameset.
How to interpret frameset attributes and
values.
How to create a navigation bar in a frame.
How to make a simple welcome page in a
frame.
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E
Summary (continued)
How to insert nested tags and attributes.
How to add a title bar frame to a frameset.
How to remove the borders in a frameset.