1

Lesson 4HTML Structural Design Techniques

HTML and JavaScript BASICS, 4th Edition

Barksdale / Turner

Le

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E22

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

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E33

Vocabulary

border attribute cols attribute frames frame separator frameset tag

left-hand navigation name attribute navigation bar nested frameset noresize attribute

Le

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E44

Vocabulary (continued)

pixel rows attribute src attribute target attribute title bar

Le

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E55

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

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E66

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

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E

Creating an HTML Frameset (continued)

Three frames on a Web page

7

Le

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E88

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

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E

Adding a Navigation Bar (continued)

Two-frame Web page

9

Le

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E1010

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

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E1111

Creating a Web Site Welcome Page

A welcome page should give users a good first impression of the Web site.

A welcome page witha navigation bar

Le

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E1212

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

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E1313

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

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E1414

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

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E

Using Advanced HTML Options (continued)

Eliminating frame separators on a Web page

15

Le

sso

n 4

Barksdale / Turner HTML and JavaScript BASICS 4E1616

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

sso

n 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.