DHTML

Dynamic HTML (DHTML)
Overview
Cascading Style Sheets
Document Object Model
Event Model
Filters and Transitions
Data Binding
Cross-Browser Compatibility
Links
What is DHTML
Generally, DHTML refers to applications that
allow a Web page to change dynamically without
requiring information to be passed to/from a web
server.

More specifically, DHTML refers to the
interaction of HTML, CSS and Scripting
language (JavaScript).

Crucial component of DHTML is DOM
(Document Object Model)

DHTML = HTML + CSS + JavaScript + DOM
Why comes DHTML
To make Web pages interactive.
HTML pages have static nature.
DHTML provides us with enhanced creative
control so we can manipulate any page element
at any time.
It is the easiest way to make Web pages
interactive.
It doesnt increase server workload and require
special software to support.
Cascading Style Sheets (CSS)
The purpose of CSS is to define styles for a
document's content.

To specify font sizes and faces, margin heights
and widths, borders and padding, even text
decoration.

To create absolutely and relatively positioned
content.

CSS
CSS brings powerful layout and design
capabilities to DHTML.

CSS provides an efficient way to define
universal style.

Separation the structure of document from
content allows greater manageability and
makes changing the style easier.

CSS evolution
CSS1 (W3C Recommendation in Dec. 1996)
It describes the CSS language as well as a
simple visual formatting model.

CSS2 (May. 1998)
It builds on CSS1 and adds support for
media-specific style sheets (e.g. printers and
aural devices), downloadable fonts, element
positioning and tables.

CSS3 (under development)
Concentrate on modularization.
Adding Style to A Document
Use an outside style sheet, either by importing
it or by linking it.

Embed a document-wide style in the <head>
element of the document.

Provide an inline style exactly where the style
needs to be applied.
Examples
Definition Rule

H1 { font-size: 24pt;
color: green }
.dark { font-weight: bold }

Create Style and Grouping Styles (css1.html)

Linking external style sheets (imported.html)
Other Methods to Define Styles
Using Document Object Model to Define Styles
Example: document.tags.H1.color = "red";

Using JavaScript to Define Styles (NS 4.0+)

<STYLE TYPE = "text/javascript">
tags.P.fontSize = "18pt"; with (tags.P) { fontSize = "18pt";
tags.P.color ="green"; color ="green";
tags.P.marginLeft = "20pt"; marginLeft = "20pt"; }
tags.H1.color = "blue";
</STYLE>

Document Object Mode (DOM)
DOM is a platform- and language-neutral
interface that allow programs and scripts to
dynamically access and manipulate the content,
structure and style of documents.

DOM chooses OMG IDL to provide language-
independent specification of the DOM interfaces
and provides language bindings for Java and
ECMAScript.

DOM evolution
Level 0 (Netscape Navigator 3.0 and MS IE
3.0)

Level 1 (Oct. 1998)
Contains functionality for document navigation
and manipulation of the content and structure of
HTML and XML documents.

Level 2 (Nov. 2000)
It is made of a set of core interfaces to create and
manipulate the structure and contents of a
document and a set of optional modules. These
modules contain specialized interfaces dedicated
to XML, HTML, an abstract view, generic style
sheets, CSS, Events, traversing the document
structure, and a Range object. It builds on the
Level 1.

Level 3 (Draft, under development)
Expands Level 2 to define some DOMUtility
interfaces.

Objects and Collections
supported by IE 5.0
Some Objects
window
document
body
history
location
navigator
event
screen

Some Collections
all
anchors
applets
forms
frames
images
links

Examples
Combination of Dynamic Positioning ,
Content and Styles
(dynamicposition.html)

Using the frames Collection
(index.html, top.html)
Event Model
DHTML provides full support for keyboard
and mouse events on all page elements.
Some popular events
ONLOAD
ONCLICK
ONMOUSEMOVE
ONMOUSEOVER
ONMOUSEOUT
ONFOCUS and ONBLUR
ONERROR (for error handling)

Example (onmouseoverout.html)

Filters and Transitions
Use and combine filters to achieve special
effects.

Create animated visual transitions between
Web pages.

Modify filters dynamically using DHTML.
Examples
Flip filters: flipv and fliph (flip.html)

Transparency with chroma Filter
(chroma.html)

Add shadows to text (shadow.html)

Filter blendTrans (blendtrans2.html)

Filter revealTrans (revealtrans.html)

Data Binding
TDC Tabular Data Control
Bind a TABLE and other HTML elements to
Data Source Objects (DSOs).
Sort and filter data directly on the client
without involving the server.
Filter data to select only records appropriate
for a particular application.
Navigate backwards and forwards through a
database with the Move methods.
Example (advancesort.html)

Cross-browser Compatibility
(Cross-platform)
Most popular browsers are Microsofts
Internet Explorer (IE) and Netscapes
Navigator (NS).

Many features of them are common.
Both support HTML, CSS, DOM and
JavaScript.

Most of their features are incompatible.
Cross-browser Compatibility
Features specific to
IE 4.0+

VBScript, JScript
ActiveX Control
Data Binding
Filter and Transition
OpenType font

Features specific to NS
4.0+

JavaScript Style Sheets
BitStream font
<LAYLER> tag

Even when NS and IE expose similar objects for
scripting, the syntax is not always the same.

Format of references to elements properties
and methods differs between IE 4.0 and NS 4.0.

Example:
Position an object (obj) at a specific pixel
coordinate(x,y).
IE 4.0 NS 4.0
obj.pixelLeft(x); obj.moveTo(x, y)
obj.pixelTop(y);
Cross-browser Strategies
Include the contents of the style sheet inside a
comment () so that browsers that do not
recognize the <STYLE> element will ignore it.

Create and redirect browser to specific pages using
browser detection.

Design for common denominator.

Custom APIs.
Create some JavaScript library for different
browsers loading.

Building DHTML standard is on the way!
Browser Detection


<SCRIPT LANGUAGE = "JavaScript">
function start()
{
if ( navigator.appName == "Microsoft Internet Explorer" ) {
if ( navigator.appVersion.substring( 1, 0 ) >= "4" )
document.location = "newIEversion.html";
else
document.location = "oldIEversion.html";
}
else
document.location = "NSversion.html";
}
</SCRIPT>
Links
Microsoft DHTML Document
http://msdn.microsoft.com/workshop/author/default.asp

Netscape DHTML Document
http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm

DOM & CSS
www.w3.org/DOM/
www.w3.org/Style/CSS

Library (Great Site! Demo and Code available)
www.dynamicdrive.com

Examples shown in the presentation
www.albany.edu/~sl9006

Thanks!

DHTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

DHTML

Transféré par

Droits d'auteur :

Formats disponibles

Dynamic HTML (DHTML)

Vous aimerez peut-être aussi