cs332a_chapt10.ppt CS332A Advanced HTML Programming 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. 78 Chapter 10

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 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) DHTML

cs332a_chapt10.ppt 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 DHTML

cs332a_chapt10.ppt 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 DHTML

cs332a_chapt10.ppt 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 Layers: objects using an ID attribute DHTML

cs332a_chapt10.ppt Script to Object message What the object should be displaying (image src) What CSS styles should be used Identification/communication 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 DHTML

cs332a_chapt10.ppt 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 DHTML

cs332a_chapt10.ppt LAB 1: Go to the following web site Page 181, Figure 11.4 Demonstrations of various Event Handlers DHTML

cs332a_chapt10.ppt 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 DHTML Sample 1: onMouseOver File: dhtml01.htm 4. Load the html file into the browser DHTML

cs332a_chapt10.ppt LAB 3: mouseover with no link Add the following code to the html file: DHTML

cs332a_chapt10.ppt 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'"> DHTML