1 / 13

CS332A Advanced HTML Programming

Explore DHTML technology, advantages, disadvantages, Flash comparison, event handling, and practical labs for interactive web design.

roycen
Download Presentation

CS332A Advanced HTML Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS332AAdvanced 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.

  2. 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)

  3. 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

  4. 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)

  5. 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

  6. DHTML Flash vs. DHTML DHTML adds interactivity to web pages usingHTML CSS JavaScript ConsiderationsAvailable technologyWill the audience have the available technology DHTML browsers? Plug-ins? CostDHTML/HTML no cost Flash Purchase design programs Training curve MultimediaFlash is better than DHTML ContentText: DHTML/HTML are best TimeDevelopment and maintenance Audience ExpectationsFlash: very active and flashy DHTML: more straight forward

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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.gifplace.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

  12. 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>

  13. 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>

More Related