Lesson 4 HTML Structural Design Techniques

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


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


Vocabulary (continued)

pixel

rows attribute

src attribute

target attribute

title bar

Le

ss

on

4


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


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


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


Adding a Navigation Bar (continued)

Two-frame Web page

9

Le

ss

on

4


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


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


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


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


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


Using Advanced HTML Options (continued)

Eliminating frame separators on a Web page

15

Le

ss

on

4


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


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.

Documents

Lesson 4 HTML Structural Design Techniques