Transcript Book cover slide - McGraw

10
Adding Interactivity to a Web Site
YOU WILL LEARN TO…
Section 10.1
• Define scripting
• Summarize interactivity design guidelines
• Identify scripting languages
• Compare common scripting languages
• Identify markup languages
10
Adding Interactivity to a Web Site
YOU WILL LEARN TO…
Section 10.2
• Apply DHTML effects
• Create a banner ad
• Add update information
• Remove a page from a template
• Insert layers
Section 10.3
• Create a form
• Identify different field types
• Place fields and labels into forms
• Add a jump menu
pp.
278-281
Section 10.1 Scripting and Markup Languages
Focus on Reading
Main Ideas
Key Terms
Scripting languages make
Web pages dynamic and
interactive. Examples of
scripting languages
include JavaScript, Java
applets, CGI, and
DHTML. XML and XHTML
are types of markup
languages.
script
interactivity
JavaScript
Java applet
Common Gateway Interface
(CGI)
markup languages
Extensible Markup
Language (XML)
Extensible Hypertext
Markup Language
(XHTML)
pp.
278-281
Section 10.1 Scripting and Markup Languages
Scripting and Interactivity
You can use scripts to
add interactivity to your
Web pages.
Interactivity on a Web site
allows you to solicit and
receive information from
your visitors.
script A short program that
you can insert into HTML
code using special tags;
expands the capabilities of
HTML to create dynamic
Web pages. (p. 278)
interactivity Allows
communication between the
visitor and the Web page;
the user can perform an
action that the Web page
responds to. (p. 278)
pp.
Section 10.1 Scripting and Markup Languages
Scripting Languages
Scripting languages can be used to create interactive
elements, such as:
• rollover buttons
• banners
• displays
• clocks
• forms
• games
278-281
pp.
278-281
Section 10.1 Scripting and Markup Languages
Scripting Languages
JavaScript is a scripting
language that works as
part of an HTML
document.
As the Web page loads
onto a user’s computer,
the browser reads the
JavaScript and completes
the operation.
JavaScript A scripting
language used to enhance
the capabilities of Web
programming by allowing
the creation of special
effects such as fading
backgrounds and button
rollovers. (p. 279)
pp.
278-281
Section 10.1 Scripting and Markup Languages
Scripting Languages
Java applet is a short
code program that can be
used to create interactive
elements that operate
separately from the
overall Web page.
A Java date picker applet
allows users to select
travel dates by clicking on
a pop-up calendar.
Java applet A short Java
code program that runs in a
browser. (p. 279)
pp.
278-281
Section 10.1 Scripting and Markup Languages
Scripting Languages
Common Gateway
Interface (CGI) is a type
of script that allows
information to transfer
back and forth in real-time
between two computers.
Common Gateway Interface
(CGI) A type of script that
provides a link, or interface,
between an external
application and a Web server.
This link allows the Web server
to pass a user’s request to an
application program and then
return information to the user.
(p. 279)
pp.
278-281
Section 10.1 Scripting and Markup Languages
Scripting Languages
Dynamic HTML (DHTML) is a scripting language that is an
extension of HTML. It allows you to create interactive Web
sites by combining these three elements:
• HTML
• Cascading Style Sheets
• JavaScript
pp.
278-281
Section 10.1 Scripting and Markup Languages
Markup Languages
HTML is a markup
language that defines the
appearance of data.
Extensible Markup
Language (XML) is a
markup language that
defines the meaning, and
not the appearance, of
Web elements.
markup language A text file
that contains special
sequences of characters that
function as tags, such as
HTML, XML, and XHTML.
(p. 280)
Extensible Markup
Language (XML) A markup
language whose tags impose
a specific structure and
meaning on data without
providing any information
about how the data should
be displayed. (p. 280)
pp.
278-281
Section 10.1 Scripting and Markup Languages
Markup Languages
Extensible Hypertext
Markup Language
(XHTML) uses the same
structure and tags as
HTML, but it designed to
be far more versatile.
Extensible Hypertext
Markup Language
(XHTML) A markup language
that is designed to bridge the
differences between HTML
and XML.
(p. 280)
pp.
278-281
Section 10.1 Scripting and Markup Languages
Interactivity Design Guidelines
Creating an interactive Web page that people will enjoy
visiting requires careful planning.
Follow these guidelines when adding interactive elements
to a Web page:
• Use Interactivity only when it enhances the site.
• Keep it simple so it is not distracting or annoying.
• Make sure users know how to use interactive elements.
• Check interactivity in all browsers visitors will use.
pp.
Section 10.1 Scripting and Markup Languages
Section Assessment
Identify You can use
________ to create
special effects such as
fading backgrounds
and rollover buttons.
A. DHTML
B. Cascading Style
Sheets
C. XML
D. JavaScript
D. JavaScript
278-281
pp.
Section 10.2 Adding Dynamic Effects
Guide to Reading
Main Ideas
Key Terms
Dreamweaver makes it
easy to apply dynamic
effects to your pages.
Dynamic effects include
banner ads, automatic
date insertion, and layers.
Using dynamic effects
makes your Web site
interesting.
rollover button
banner ad
layer
283-291
pp.
283-291
Section 10.2 Adding Dynamic Effects
Banner Ads
Rollover buttons are
often used to create
banner ads.
Dreamweaver uses
DHTML to create rollover
buttons.
rollover button A button
that changes appearance
when the mouse pointer
passes over it. (p. 283)
banner ads An
advertisement that, when
clicked, takes the visitor to
the sponsor’s home page.
(p. 283)
pp.
283-291
Section 10.2 Adding Dynamic Effects
Update Information
You can use Dreamweaver’s Insert Date feature to display
the current date and/or show when the site’s content was
last updated.
pp.
283-291
Section 10.2 Adding Dynamic Effects
Using DHTML Behaviors
Web designers often use
layers instead of tables
when they want to
position objects precisely
on a page.
Adding a lot of layers can
cause a page to download
very slowly.
layer A container within an
HTML page that can include
objects such as text,
images, and forms. (p. 288)
pp.
283-291
Section 10.2 Adding Dynamic Effects
• Activity
• Activity
• Activity
• Activity
10A – Insert a Banner Ad (p. 284)
10B – Add Update Information (p. 285)
10C – Remove a Page from a Template (p. 286)
10D – Insert Show-Hide Layers Behavior (p. 288)
pp.
Section 10.2 Adding Dynamic Effects
Section Assessment
Examine Which of the
following can be used
to position objects on a
Web page?
A. layers
B. rollover buttons
C. labels
D. banner ads
A. layers
283-291
pp.
Section 10.3 Adding a Form to a Web Site
Focus on Reading
Main Ideas
Key Terms
Forms make Web sites
interactive by letting users
submit data. Users enter
each data item in a field
identified by a label.
Different types of fields
fulfill different purposes.
form
field
label
jump menu
292-298
pp.
292-298
Section 10.3 Adding a Form to a Web Site
Forms and Their Components
Web programmers and
designers create forms,
made up of fields and
labels, to allow users to
enter and submit data.
Most forms also contain a
Submit and Reset button.
form A structure that
includes fields for collecting
data from visitors to a Web
site. (p. 292)
field A form component that
allows the user to enter
information into the form. A
form field often corresponds
to a field database. (p. 292)
label Text that tells the user
what type of information to
enter into a form’s field.
(p. 292)
pp.
292-298
Section 10.3 Adding a Form to a Web Site
Form Fields
A form can contain different types of fields. Each type of
limited option form field has a specific purpose:
• A text field lets users enter a line of text
• A text area lets users enter many lines of text.
• A radio button lets users select one of multiple options.
• A check box lets users select one or more options.
• A list/menu lets users select from a list of choices.
• Submit/Reset Buttons let users submit or erase a form.
pp.
292-298
Section 10.3 Adding a Form to a Web Site
Adding Dynamic Effects to a Form
A jump menu can be
used to make a form more
dynamic.
jump menu A dynamic
menu that allows the user
to access hyperlinks from
a single drop-down
menu. (p. 297)
pp.
Section 10.3 Adding a Form to a Web Site
• Activity 10E – Create a Form with Fields (p. 293)
• Activity 10F – Add a Jump Menu to a Web Page (p. 297)
292-298
pp.
292-298
Section 10.3 Adding a Form to a Web Site
Section Assessment
True/False A label tells
the user what type of
information to enter into
a form’s field.
True. A label is the
text that tells a user
what type of
information to enter
into a form.
10
Adding Interactivity to a Web Site
Chapter Review
Evaluate If you want
users to choose only
one option, what type of
form field would you
use?
A. text field
B. check box
C. radio button
D. text area
C. radio button
10
Adding Interactivity to a Web Site
Chapter Review
Analyze Why would
you want to include a
dynamic element that
shows the date when
the page was last
updated?
Including the date of
the most recent
update will assure
your target audience
that your content is
recent and that your
site does not contain
old or out-of-date
material.
10
Adding Interactivity to a Web Site
Resources
For more resources on this chapter, go to the Introduction
to Web Design Using Dreamweaver Web site at
WebDesignDW.glencoe.com.