Dynamic HTML (DHTML) combines 3 technologies: Cascading Style Sheets (CSS) refines HTML formatting and provides better control over positioning and layering content JavaScript (not Java), a scripting language for web browsers SCRIPT tag in HTML indicates language: <SCRIPT LANGUAGE=“JavaScript”> Document Object Model (DOM) exposes all the attributes of HTML and Style Sheets to JavaScript control DOM lets JavaScript programmers view and modify the properties of web pages, dynamically.
Transcript
Dynamic HTML (DHTML) combines 3 technologies: Cascading Style Sheets (CSS) refines HTML
formatting and provides better control over positioning and layering content
JavaScript (not Java), a scripting language for web browsers SCRIPT tag in HTML indicates language: <SCRIPT
LANGUAGE=“JavaScript”> Document Object Model (DOM) exposes all
the attributes of HTML and Style Sheets to JavaScript control DOM lets JavaScript programmers view and modify
the properties of web pages, dynamically.
Cascading Style Sheets (CSS) World Wide Web Consortium (W3C), 1996
First supported in Netscape 4 and IE 4 Style sheets are groups of rules, defining how an
HTML element appears in a browser Following sets color of all FONT tags to blue:
<STYLE TYPE="text/css">FONT { color : blue; }
</STYLE> Every HTML tag that fit a sector’s specifications gets its
declarations: <FONT>Cookie Monster</FONT> FONT is known as the sector and color : blue {within
braces} is a declaration
Classes control scope It can get a little tricky to distinguish
between all the FONT tags you might want to declare
Following snippet uses dot notation to define a class BIGBIRD within as a subclass of H3:
<STYLE TYPE="text/css"> H3.BIGBIRD { color : yellow; } /* CLASS */</STYLE>
<H3 class="BIGBIRD">Big Bird</H3> See cssFormatting.htm
Declaring a font-family A font-family declaration specifies a specific
Places <H1> text at absolute coordinates (pixels from top left corner) and size (width and height)
Inline styles, <DIV>, <SPAN>
Of course, you probably don't want all your <H1> elements to appear in the same spot
Instead, this code positions only the contents of a particular <DIV> element:<DIV style="position:absolute; top:300px; left:100px; width:200px; height:200px; background-color:red">A red 200-by-200-pixel box, 300 pixels from top and 100 from left edges of window.</DIV>
See cssPositioning.htm
Relative positioning Relative positioning places elements into
flow of the document--offsetting them from previous element in the HTML code:<STYLE type="text/css"><!--#offset { position:relative; top:50px; left: 25px }--></STYLE>This text will flow normally across the page, while the next line of text will be offset from the end of this line.
<SPAN id="offset">This text is offset from the above line--50 pixels on top and 25 pixels on the left.</SPAN></BODY></HTML>
Z-layering of objects Layering lets object overlap each other In addition to x- and y-coodinates, add z-
<SPAN class="over">This text is positioned 20 pixels from the left and 165 pixels from the top of the window.</SPAN>
<SPAN class="under">This text is positioned just below the above text, and would usually be placed on top because of its order on the page.</SPAN>
Analyzing a document<HTML><HEAD><TITLE> Simple DOM Demo </TITLE></HEAD><BODY ID="bodyNode">This is the document body<P ID = "p1Node">This is paragraph 1.</P><P ID = "p2Node">Paragraph 2</P></BODY></HTML> From the root <BODY> you can go to one of its four
children Reach first child using bodyNode.firstChild or
bodyNode.childNodes[0] Access third (and last) child by bodyNode.childNodes[2] or
bodyNode.lastChild Or use <P> tags with a unique ID: p1Node.nextSibling
accesses p2Node
Dynamic HTML Supports animations & rollover effects No plug-ins: it’s part of HTML 4.0
Different browsers provide different support for HTML 4.0
JavaScript programs dynamic behaviors JavaScript functions manipulate DOM objects Dreamweaver provides high level interface
generating JavaScript code for a few common dynamic behaviors
Rollover effect in DHTML Preview in comingDone.html
Effect achieved by swapping images from files into memory In Dreamweaver, open coming.htm:
choose Insert > Image & select redlite.gif In Property Inspector, enter: “redlight” Set Border to 0 (no border around image) Select image, then windows > Behaviors Hold down + button and select the Swap image Select grnlite.gif as swap image Leave Preload Images and Restore Images onMouseOut on
Why is pre-storing in array crucial to rollover effect? Dreamweaver makes it even easier:
Insert>Image Objects>Rollover Image
Rollover effect in Javascript Look at source code view in DW function MM_preloadImages():
sets local variable d to document: why? creates new Array called d.MM_p MM_preloadImages.arguments reads
onLoad="MM_preloadImages('grnlite.gif')" function MM_swapImage():
stores MM_swapImage.arguments findObj locates the other image
More DHTML examples Jeff Lutz’s example (note animated
