Download chapter05

Slide
5-1
Copyright © 2003 Pearson Education, Inc.
Slide
5-2
Chapter 5
Advanced Web Page Construction
Created by, Stephanie Ludi, Rochester institute of Technology—NY
Copyright © 2003 Pearson Education, Inc.
Learning Objectives






Explore how to use image maps and JavaScript
to create livelier Web pages.
Learn how to find JavaScript programs on the
Web and install them on your Web pages.
Find out what Java applets can do and how to
add them to your Web pages.
Discover how you can customize JavaScript
programs and Java applets to meet your needs.
Learn how data-driven Java applets make it
easier to manage frequent Web page updates.
Find out what Web site maintenance tools and
site construction kits can do for you.
Copyright © 2003 Pearson Education, Inc.
Slide
5-3
Taking Charge




Slide
5-4
It’s very easy to add dynamic elements to
your Web pages.
Ready-made JavaScripts and Java applets
are available on the web for you to add to
your Web page.
A JavaScript is a bit of code written to
enhance a Web page.
A Java Applet is a small Java program that
is attached to a web page.
Copyright © 2003 Pearson Education, Inc.
Taking Charge


A Script is a small computer program
written in a scripting language.
A scripting language is usually more
limited and simpler than a full-fledged
programming language.
Copyright © 2003 Pearson Education, Inc.
Slide
5-5
Client-Side Image Maps




An image map is an easy way to create
hyperlinks inside graphical elements.
A hotzone is an arbitrary region on a Web
page that contains a hyperlink.
Server-side image maps run on the Web
server.
Client-side image maps are run from the
user’s browser.
Copyright © 2003 Pearson Education, Inc.
Slide
5-6
Client-Side Image Maps



Slide
5-7
Image maps can be created manually or
with an image-mapping tool.
If you create them manually, use ISMAP to
find the x and y coordinates of the
rectangular hotzone.
Details of the use of the nifty ISMAP trick
are outlined on p. 260.
Copyright © 2003 Pearson Education, Inc.
Client-Side Image Maps



Slide
5-8
Tools allow you to create image maps that
have shapes other than rectangles.
Image-mapping tools can be found on the
Web
Some Web page construction tools
support the creation of image maps too
Copyright © 2003 Pearson Education, Inc.
Client-Side Image Maps


Slide
5-9
Client-side image maps can also be made
to respond to JavaScript events such as
 mouseovers
 mouseclicks
These image maps are used to create
things like:
 Graphical buttons
 Menus containing a set of these buttons
 Links to a large image from a thumbnail
version of the image
Copyright © 2003 Pearson Education, Inc.
Client-Side Image Maps

Slide
5-10
One way to make your own image maps
 Find the image that you want to map
 View the image with your Web browser
using the ISMAP trick
 Record the coordinate pairs for each
rectangular hotzone you want to define.
 Create an AREA element for each
hotzone, and put each inside an MAP
element
Copyright © 2003 Pearson Education, Inc.
Client-Side Image Maps

One way to make your own image maps
 Add the MAP element to the BODY
element of the Web page
 Add a USEMAP attribute to the IMG
element for the image just mapped
Copyright © 2003 Pearson Education, Inc.
Slide
5-11
JavaScript and Mouseover
Events




Slide
5-12
JavaScript is a scripting language
designed to enhance Web pages: it can be
used to create client-side image maps.
Each script is attached to an HTML file
and must be executed by the Web browser
rendering the page.
Different browsers support slightly
different versions of JavaScript.
There are many examples of JavaScripts
on the Web.
Copyright © 2003 Pearson Education, Inc.
JavaScript and Mouseover
Events


It is often necessary to have two different
versions of a JavaScript on a page to
support both Navigator and Explorer.
Test your script with both browsers.
Copyright © 2003 Pearson Education, Inc.
Slide
5-13
JavaScript and Mouseover
Events


Mouseover: The action of sweeping the
mouse over a region on a Web page that
has been programmed to respond to the
mouse’s presence.
Often a mouseover causes a graphic on
the Web page to be swapped for another
giving the illusion that the graphic is
highlighted.
Copyright © 2003 Pearson Education, Inc.
Slide
5-14
JavaScript and Mouseover
Events
Copyright © 2003 Pearson Education, Inc.
Slide
5-15
JavaScript and Mouseover
Events


When you want to create a menu with a
set of buttons, several versions of each
button need to be created.
 The button can be pressed
 The button can be released
 The button may change when the
mouse pointer is over it
The images are usually swapped so fast
that you would not know that the files
were separate
Copyright © 2003 Pearson Education, Inc.
Slide
5-16
JavaScript and Mouseover
Events
Copyright © 2003 Pearson Education, Inc.
Slide
5-17
JavaScript and Mouseover
Events







JavaScript events include:
onClick ( mousedown immediately
followed by mouseup)
onDbClick (a fast double-click)
onMouseMove (the mouse moves in the
hotzone)
onKeyDown (a key is pressed on the
keyboard)
onKeyUp (a key is released)
onKeyPress (a key is hit and immediately
released)
Copyright © 2003 Pearson Education, Inc.
Slide
5-18
JavaScript and Mouseover
Events



Slide
5-19
There are safeguards in JavaScript to
prevent it from spreading viruses.
It is possible to write a malicious
JavaScript though.
JavaScript can be disabled in the browser.
Copyright © 2003 Pearson Education, Inc.
JavaScript and Mouseover
Events

Slide
5-20
If you are interested in using JavaScripts,
you can
 Follow some of the steps in this text to
get started
 Use some commercial Web page
construction tools that can assist you
 Follow an online tutorial
 Use pre-made scripts found in online
script libraries
Copyright © 2003 Pearson Education, Inc.
Java Applets



Slide
5-21
A Java applet is a small executable
program attached to a Web page.
Applets require that a JVM be installed on
the client computer.
A JVM (Java Virtual Machine) is a
platform-specific browser add-on that
makes it possible for Web browsers to
execute Java applets.
Copyright © 2003 Pearson Education, Inc.
Java Applets



Slide
5-22
Java is a full-fledged programming
language.
Applets pose less of a risk than scripts do.
Applets can’t carry viruses since they
can’t write to the local machine.
Copyright © 2003 Pearson Education, Inc.
Java Applets



Programming Java Applets will require
programming skill
You can find freely available applets
online at applet sites
As an applet is software, it will have a
license too
Copyright © 2003 Pearson Education, Inc.
Slide
5-23
Java Applets

To install an applet:
 Download and unpack the applet (see
Ch. 8 for more info)
 Read all available documentation
 Insert the required HTML snippet into
your Web page
 Modify the PARAM values as needed
 Upload your Web page to the server
 Upload the required .class file
 Upload any required support files
Copyright © 2003 Pearson Education, Inc.
Slide
5-24
Data-Driven Web Pages




Data-driven Web page displays are used
to minimize the amount of effort needed
for ongoing Web page maintenance.
A Java applet reads and displays the
information contained in a text file.
Only that text file needs to be updated.
These applets are often highly
customizable
Copyright © 2003 Pearson Education, Inc.
Slide
5-25
Data-Driven Web Pages
Copyright © 2003 Pearson Education, Inc.
Slide
5-26
Data-Driven Web Pages



Slide
5-27
Data-driven displays are not limited to
text.
They can accept data from the user.
Applets that do this are freely available on
the Web.
Copyright © 2003 Pearson Education, Inc.
Web Site Maintenance Tools



Slide
5-28
As Web sites become larger and more
complex, they become harder to maintain.
There are utilities that can help you with
your Web site maintenance tasks.
These utilities include
 Link checkers
 Site mappers
Copyright © 2003 Pearson Education, Inc.
Web Site Maintenance Tools




Slide
5-29
Pages come and go on the Web
Your site likely has several links to pages
all over the Web
Making sure that the links on your site are
not obsolete can take a lot of time
You should check that the links are valid
on a regular basis as part of you site’s
maintenance
Copyright © 2003 Pearson Education, Inc.
Web Site Maintenance Tools




Slide
5-30
An automated link checker, quickly checks
that whether all of the links on your site
exist.
Other link problems can also be detected.
It can either be
 a service you subscribe to
 a utility you purchase
A link checker provides a report that lists
all the links that may need to be fixed.
Copyright © 2003 Pearson Education, Inc.
Web Site Maintenance Tools
Copyright © 2003 Pearson Education, Inc.
Slide
5-31
Web Site Maintenance Tools





Slide
5-32
A site map is helpful to first-time visitors
to your site.
A site mapper is a utility that will help you
keep your site map up-to-date.
Every time you reorganize your site’s
structure, you can run a site mapper
The newly generated site map presents
the updated structure to visitors
Freeware and commercial programs exist
to assist you.
Copyright © 2003 Pearson Education, Inc.
Web Site Maintenance Tools
Copyright © 2003 Pearson Education, Inc.
Slide
5-33
Site Construction Kits



Slide
5-34
Web site construction kits are packages
designed to help you customize
sophisticated sites including:
 E-stores
 Informational sites that are updated
regularly
There are many options at all price levels.
Some service providers will help you set
up an e-store that they will host.
Copyright © 2003 Pearson Education, Inc.