The Web Wizard’s Guide To DHTML and CSS Chapter 2 A Review of CSS2 and JavaScript

Chapter Objectives To review how to position, hide, and show content, using CSS2 To understand how CSS works with a scripting language to create Dynamic HTML To review the fundamentals of JavaScript To learn about the Document Object Model To create a three-dimensional animation To examine the pros and cons of animation with DHTML versus Flash

A Review of CSS2 Expands on CSS1 by adding (among others) The position property –Can position HTML elements at an absolute location on the screen, relative to other elements, or both.absoluterelativeboth The visibility property –Can be used to hide elements from view

A Review of CSS2 (cont.) The overflow property –Allows you to specify the width and height of the bounding box surrounding any block-level element. Can be set to hidden (crops the text), scroll (always display scroll-bars), or auto (display scroll-bars only if needed) The clip property –Allows you to crop an image or other element using code to specify how much is visible. Can be applied only to absolutely positioned elements.crop an image

HTML 4 + CSS + JavaScript = DHTML If DHTML were a dramatic play: –The Document Object Model (DOM) would represent the theater including playhouses, stages, and curtains and would contain basic assumptions about how the directors and actors work with these elements. –HTML would represent the script of the play (e.g. its content) –CSS would represent the appearance details of the play including costuming, sets, and position of the actors on the stage –JavaScript would represent the blocking and choreography –Web browsers would represent the different interpretations of the play by different acting companies

Animating with DHTML Create the HTMLHTML Absolute position your objects Be aware of z-index stacking Call an init() function in the onload handler Store generic functions in an external library

DHTML vs. Flash Flash Advantages Flash gives more control over animations. Flash animations look the same on all browsers and platforms. Flash files embed any fonts needed for display of highly stylized text. Flash works better with sound and video. Flash is a little easier to learn than DHTML There are versions of the Flash plug-in for obsolete browsers.

DHTML vs. Flash DHTML Advantages Works better with the browser’s back button. DHTML text can be searched and selected. DHTML requires only a text editor. Flash files require a plug-in. DHTML integrates well with HTML. DHTML is often better for navigation. DHTML works anywhere on the page