CSci 220 - Lecture 16

Web Page Design

© Morris Firebaugh

I. Conclude Web Graphics Formats & Introduce JavaScript


II. PNG Graphics Format


Example 1 - Photographic Image

Original 1 Mb PICT file, compressed to JPEG file [Size = 117 Kb]

(Note compression artifacts near peak)

GIF Version [Size = 284 Kb]

(Note dithering in the sky)

PNG Adaptive Format [Size = 634 Kb]

PNG Adaptive Format with Transparency [Size = 649 Kb]

Example 2 - Flat Color Logo

Original 161K PICT file, compressed to 14.6 Kb JPEG, Compression 23:1


GIF Image, 37.5 Kb, Compression 2:1

PNG Image, 39.3 Kb, Compression 8:1


III. Interactivity on the Web

Recall the basic problem with classic stateless HTML Web pages - they are static, one-way documents


The primary players in this game are


III. JavaScript and Java

Two leading approaches to providing interactivity on the Web include JavaScript and Java. How do they differ?


As example of what JavaScript can do, let's go to the

UNICO Advanced Web Design Seminars

OOP Attributes


Example 1: Button Links

Let's build a JavaScript that links us to another Web page when we click a button:

<input type="button"  value="Go to Insturctor's HomePage"

This code results in the action:


IV. JavaScript Syntax

The syntax ("rules of the language") closely resembles that of C++.

1. JavaScript is case sensitive

2. JavaScript ignores white space

3. JavaScript recognizes (and gets confused by) hard returns

4. Be sure that all punctuation symbols ( { [ " ' close properly ' " ] } )

5. The backslash, "\" serves as the Escape Key to ignore characters following

6. JavaScript data types include


7. JavaScript supports variables, with names starting with letters or the (_)


8. JavaScript support standard programming operators and expressions, e.g. the "verbs" of the language

fred = 0
fred  <  100
fred =  fred  +  2
if  (fred  >  80  &&  fred  <  90)  then window.alert  ("You have a B average.")


9. JavaScript objects are the "nouns" of the language, e.g.


10. Object have attributes, e.g. in  ("controlWindow")


11. Objects also have methods, e.g. in

document.write  ("Come on in.  The water is fine!")


12. JavaScript scripts are a series of statements of the form:

command  (attributes);


window.alert ("You are entering the strange JavaScript World.");


13. Comments are of two forms:

//This is a comment up to the end-of-line


/*Comments may also be enclosed between "/*. . . .*/" compound symbols.  */


14. Command Blocks are enclosed in "{ . . . }", e.g.

{   document writeln  ("Greetings  &{userName};!");   document writeln  ("Select a manu option:");}


15. Functions may be defined as a series of statements, e.g.

function Greeting  (userName,dayPart) {   document.writeln("Greetings "+ userName + "!<br>");   document.writeln( "Have a good " + dayPart + ".<br>")}


16. JavaScript recognized a number of built-in events:


17. JavaScript provides a number of methods for handling events

18. JavaScript supports standard C++ arithmetic and logical operators


19. A wealth of JavaScript Objects, their properties, methods, and event handlers are listed in ProjectCool.


V. JavaScript Examples

Example 1: JavaScript to change background color

<title>Function Backgound Color Change
<script  language=javascript>
function changecolor(newcolor){   window.document.bgColor = newcolor;}//-->
<body bgcolor=white link=#888888 vlink=#888888><h2>
<a  href="javascript:changecolor('black');"> Change Background to Black</a></h2>
<h2><a  href="javascript:changecolor('white');"> Change Background to White</a></h2>


Example 2: onMouseover Slideshow

Air show

Plane 1

Plane 2

Plane 3

Plane 4

Plane 5

This example was borrowed from Website Abstraction, a great source of free JavaScripts



Example 3: UNICO, Inc. Home Page Active Button Control



Updated March 3, 2001