Download Slide 1

CS332A
Advanced HTML Programming
Chapter 10
78
DHTML
DHTML
Dynamic Hypertext Markup Language
A term describing a series of technologies
Not a stand-a-lone technology (such as HTML, Java)
Browser pages react without server assistance
Server Side scripting:
CGI Program is executed on the server and the results
returned in a web page
Client Side scripting:
Program is executed in the computer of the web page visitor.
The server is not accessed.
cs332a_chapt10.ppt
DHTML
Browser Specific Technologies
Netscape
JavaScript Style Sheets
Netscape layers
(CSS prototypes)
Microsoft
ActiveX (GUI objects)
Visual Filters (visual effects on graphics and text)
Cross Browser Technologies
Cascading style sheets (CSS)
JavaScript
Document Object Model (DOM)
(connect window objects to scripts)
cs332a_chapt10.ppt
DHTML
DHTML Advantages
Supported by most browsers
Small file sizes (text files)
No plug-ins required
Easy to learn
HTML
JavaScript
Fast Development
HTML
JavaScript
Faster Web Experience
Manipulate browser objects on the client side
Java not required
cs332a_chapt10.ppt
DHTML
DHTML Disadvantages
Browser and OS incompatibilities
Variations in browser vendors (Netscape vs IE)
Variations in browser versions (same vendor)
Variations of OS
Variations of OS Versions
Syntax
CSS and JavaScript are sensitive
Browser issues (bugs)
cs332a_chapt10.ppt
DHTML
Flash
Vector animation creation program
File type .swf
Advantages
Consistent display across software and hardware
Ubiquitous across the Internet (95%)
Attractive designs can be created
Small files
Disadvantages
Difficult to learn and create
Plug-ins required
Usability abuses
User confusion when visiting
Too much inconsistency
Too much screen activity
Slower download time
Large files
cs332a_chapt10.ppt
DHTML
Flash vs. DHTML
DHTML adds interactivity to web pages using
HTML
CSS
JavaScript
Considerations
Available technology
Will the audience have the available technology
DHTML browsers?
Plug-ins?
Cost
DHTML/HTML no cost
Flash
Purchase design programs
Training curve
Multimedia
Flash is better than DHTML
Content
Text: DHTML/HTML are best
Time
Development and maintenance
Audience Expectations
Flash: very active and flashy
DHTML: more straight forward
cs332a_chapt10.ppt
DHTML
Document Object Model (DOM)
Connects an object
Element defined with an ID or name attribute (CSS)
to a JavaScript function
Allows any property to be changed
Connects the object with a JavaScript function
Identifying and object
Netscape
Name to identify an image
ID to identify elements that are NOT images
ID to identify an image
MS IE
Name to identify an image
ID to identify elements that are NOT images
<img name=“button1” src=“button_off.png”>
<div id=“layer1”></div>
Layers: objects using an ID attribute
cs332a_chapt10.ppt
DHTML
Script to Object message
What the object should be displaying (image src)
What CSS styles should be used
Identification/communication
<img name=“button1” src=“button_off.png”>
window.document.images.button1
The current window and current document image named button1
PNG file format
an extensible file format
for raster images
the set of horizontal lines composed of pixels, used to form an
image on a CRT screen
replacement for GIF
cs332a_chapt10.ppt
DHTML
Events
Occur when something happens in the browser window
Action samples
Loading of a new document
Leaving a web page
Mouse movement
Key is pressed
Browser window is moved
Event Handlers
Programs built into the browser
An internal program in the browser (Event Handler) is
activated upon an occurrence of an event.
Specific program agents handle specific events
Connects and action in the window to a JavaScript
function which causes some reaction.
Table 11.2, Page 181: Event Handlers
cs332a_chapt10.ppt
DHTML
LAB 1:
Go to the following web site
Http://www.webbedenvironments.com/dhtml/eventhandlers/
Page 181, Figure 11.4
Demonstrations of various Event Handlers
cs332a_chapt10.ppt
DHTML
LAB 2: mouseover with a link
1. Create an html file named dhtml01.htm
2. Download the following images from:
F:\Assign\Fulcher\cs332a
no_pict.gif
place.gif
3. Insert the following code into dhtml01.htm
<HTML>
<HEAD>
<TITLE>DHTML Sample 1: onMouseOver</TITLE>
</HEAD>
<BODY>
File: dhtml01.htm<br><br>
<a href="text01.htm" onMouseOver=
"document.images.button1.src='no_pict.gif'">
<img src="place.gif" id="button1" name="button1">
</a>
</BODY>
</HTML>
4. Load the html file into the browser
cs332a_chapt10.ppt
DHTML
LAB 3: mouseover with no link
Add the following code to the html file:
<a href="#" onMouseOver=
"document.images.button2.src='no_pict.gif'">
<img src="place.gif" id="button2" name="button2">
</a>
cs332a_chapt10.ppt
DHTML
LAB 4: mouseover and mouseout
Add the following code to the html file for button2:
<a href="#" onMouseOver=
"document.images.button3.src='no_pict.gif'";
onMouseOut=
"document.images.button3.src='place.gif'">
<img src="place.gif" id="button3" name="button3">
</a>
cs332a_chapt10.ppt