copyright © 2003 pearson education, inc. slide 5-1

Copyright © 2003 Pearson Education, Inc.

Slide 5-1


Slide 5-2

Created by, Stephanie Ludi, Rochester institute of Technology—NY

Advanced Web Page Construction

Chapter 5


Slide 5-3

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.

Learning Objectives


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.

Taking Charge


Slide 5-5

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.

Taking Charge


Slide 5-6

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.

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.



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



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



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



Slide 5-11

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



Slide 5-12

JavaScript and Mouseover Events

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.


Slide 5-13


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.


Slide 5-14

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.



Slide 5-15



Slide 5-16


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


Slide 5-17



Slide 5-18

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)



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.


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


Slide 5-21

Java Applets

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.


Slide 5-22

Java Applets

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.


Slide 5-23

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

Java Applets


Slide 5-24

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

Java Applets


Slide 5-25

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

Data-Driven Web Pages


Slide 5-26



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.


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

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



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.



Slide 5-31



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.



Slide 5-33



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.

Site Construction Kits

copyright © 2003 pearson education, inc. slide 5-1

Documents

charge slide

separate slide

pearson education

image client

creation of image maps

large image

web browser

web server