Transcript Chapter 10 Adding Interactivity to a Web Site

Section 10.1
• Define scripting
• Summarize interactivity design guidelines
• Identify scripting languages
• Compare common scripting languages
• Identify markup languages
Section 10.2
• Apply DHTML effects
• Create a marquee
• Create a banner ad
• Create custom rollover buttons
• Add update information
• Create page transitions
Section 10.3
• Create a form
• Identify different field types
• Place fields and labels into forms
pp.
10.1
Scripting and Markup Languages
Guide to 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)
268-271
pp.
10.1
268-271
Scripting and Markup Languages
Scripting and Interactivity
HTML code creates static
Web pages. Inserting
scripts makes your pages
dynamic.
Two common uses for scripts
are:
• To insert changing
information into a Web page.
• To allow interactivity.
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. 268)
interactivity Allows
communication between the
visitor and the Web page;
the user can perform an
action that the Web page
responds to. (p. 268)
pp.
10.1
268-271
Scripting and Markup Languages
Interactivity Design Guidelines
Here are some design guidelines for using interactivity:
• Use interactivity only when it enhances the site.
• Maintain simplicity.
• Make certain users understand the response expected of them.
• Check interactive components in all the browsers your visitors
are likely to use.
pp.
10.1
268-271
Scripting and Markup Languages
Scripting Languages
Each scripting language is
designed for specific
types of interactivity:
JavaScript
Java Applets
Common Gateway
Interface (CGI)
DHTML
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. 269)
Java applet A short Java code
program that runs in a browser. (p.
270)
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. 270)
pp.
10.1
268-271
Scripting and Markup Languages
Scripting Languages
The JavaScript code displays the number of days until the
year 2006.
pp.
10.1
268-271
Scripting and Markup Languages
Markup Languages
HTML is a markup
language that defines the
appearance of data.
Extensible Markup
Language (XML) tags
impose a structure without
providing attributes on
how the data are to be
displayed.
XHTML is the bridge
between the HTML and
XML.
markup language A text file
that contains special
sequences of characters that
function as tags, such as
HTML, XML, and XHTML.
(p. 270)
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. 270)
pp.
10.2
Adding Dynamic Effects
Guide to Reading
Main Ideas
Key Terms
FrontPage makes it easy
to apply dynamic effects
to your pages. Dynamic
Web components include
marquees, banner ads,
rollover buttons, and
automatic date insertion.
marquee
banner ad
rollover button
page transition
273-279
pp.
10.2
273-279
Adding Dynamic Effects
Using the DHTML Effects Toolbar
FrontPage makes adding DHTML effects easy by using
the DHTML toolbar.
• The first menu (On menu) allows you to specify the event, or
action, that will trigger the effect.
• The second menu (Apply menu) allows you to choose the effect
you want to add to the page.
• The third menu allows you to further refine your request.
Menu 1
Menu 2
Menu 3
pp.
10.2
273-279
Adding Dynamic Effects
Marquees
You can create marquee
text that slides in once
and then stays put,
repeats a specified
number of times, or
continuously repeats.
marquee A string of text
that moves from one edge
of the page to the other.
(p. 274)
pp.
10.2
273-279
Adding Dynamic Effects
Banner Ads
Banner ads make it easy
for interested consumers
to go to the sponsor’s
Web site.
banner ad An
advertisement that, when
clicked, takes the visitor to
the sponsor’s home page.
(p. 275)
pp.
10.2
273-279
Adding Dynamic Effects
Rollover Buttons
FrontPage uses DHTML
to create a rollover
button. You can create a
rollover effect by inserting
interactive buttons on a
site.
rollover button A button
that changes appearance
when the mouse pointer
passes over it. (p. 276)
pp.
10.2
273-279
Adding Dynamic Effects
Update Information
Web developers often use scripting to display the current
date. News sites usually display the current date to let you
know that the site’s content has been updated.
In addition, many search engines allow you to search for
sites that have been updated within a specific time frame,
such as the last six months.
pp.
10.2
273-279
Adding Dynamic Effects
Page Transitions
FrontPage lets you create
page transitions. You
can also specify when a
transition will take effect.
page transition Special
effects that the user sees
when moving from one page
to another. (p. 278)
pp.
10.2
Adding Dynamic Effects
• Activity 10A – Creating a Marquee (p. 274)
• Activity 10B – Inserting a Banner Ad (p. 275)
• Activity 10C – Creating a Rollover Button (p. 276)
• Activity 10D – Adding Text Links and Update Information
(p. 277)
• Activity 10E – Creating a Page Transition (p. 278)
273-279
pp.
10.3
Adding a Form to a Web Site
Guide to 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
281-286
pp.
10.3
281-286
Adding a Form to a Web Site
Forms and Their Components
Web programmers and
designers use 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. 281)
field A form component that
allows the user to enter
information into the form. A
form field often corresponds
to a field database. (p. 281)
label Text that tells the user
what type of information to
enter into a form’s field.
(p. 281)
pp.
10.3
281-286
Adding a Form to a Web Site
Form Fields
A form can contain different types of fields and each field
type has a specific purpose.
Limited option fields, such as option buttons, check boxes,
and drop-down boxes, allow users to select predefined
choices.
pp.
10.3
Adding a Form to a Web Site
• Activity 10F – Creating a Form (p. 281)
• Activity 10G – Adding Fields to a Form (p. 283)
281-286
Chapter 10
Resources
For more resources on this chapter, go to the Introduction
to Web Design Web site at webdesign.glencoe.com.