Dynamic HTML
|
"Dynamic HTML" is typically used to describe the combination of HTML,
style sheets and scripts that allows documents to be animated.
Dynamic HTML allows a web page to change after it's loaded into the
browser --there doesn't have to be any communication with the web
server for an update.
You can think of it as 'animated' HTML.
For example, a piece of text can change from one size or color to
another, or a graphic can move from one location to another,
in response to some kind of user action, such as clicking a button.
|
Dynamic HTML gives authors creative control so they can manipulate any
page element and change styles, positioning, and content at any time.
It provides a richer, more dynamic experience on web pages, making them
more like dynamic applications and less like static content.
Dynamic HTML presents richly formatted pages and lets you interact with
the content on those pages without having to download additional
content from the server.
This means that a page can respond immediately to user actions,
such as a mouse click, without having to
retrieve an entire new page from the server.
In an Intoduction to Dynamic HTML, we explore three
main components of Dynamic HTML authoring:
- Positioning; precisely placing blocks of content on the page and, if desired,
moving these blocks around (strictly speaking, a subset of style modifications).
- Style modifications; on-the-fly altering the aesthetics of content on the page.
- Event handling; how to relate user events to changes in positioning or other
style modifications.
You will get the most from this tutorial if you have prior experience with HTML and
JavaScript.
The Big Two Browsers
Microsoft and Netscape use two different techniques for Dynamic HTML.
- Netscape bases much of its approach on the new
LAYER tag.
- Microsoft bases its approach on exposing
CSS (Cascading Style Sheets)
element attributes to scripts,
with a little help from some interesting new
built-in, lightweight, and windowless ActiveX controls.
Microsoft's DOM implementation
is consistent with the direction of the W3C,
in that all page elements and attributes are made programmable.
by Aaron Weiss.
Web pages today grow out of a coalition of technologies, including
Cascading Style Sheets
and
JavaScript (both loosely referred to as
"Dynamic HTML").
Coping with all this requires a thorough insight into the anatomy of the
Document Object Model (DOM); this article explains
what it is, how you use it, and where it might be leading us.
Layers
In general, "layer" refers to elements that can be positioned at
exact coordinates on the page.
These elements can be defined with the DIV, SPAN, LAYER, or ILAYER tags.
Layers created with DIV and SPAN are referred to as
CSS layers
because their properties are defined by the
Cascading Style Sheets
specification by the
World Wide web Consortium.
This specification defines style properties (e.g. font, color,
padding, margin, word-spacing) in addition to the positioning
properties associated with layers (top, left, z-index, visibility).
Microsoft Internet Explorer 4.0, allows you to change
style properties on the fly with a scripting language such as
JavaScript or VB Script.
Netscape Navigator 4.0 cannot change style properties after the page
has loaded, but you can change positioning properties with JavaScript.
Both Microsoft and Netscape support CSS layers in their 4.0 browsers.
Only Netscape Navigator 4.0 and later, supports layers created with the
LAYER and ILAYER tags.
Technology Components
The major components of Dynamic HTML technology are:-
- Style Sheets
(NS)
(MS)
let you specify the stylistic attributes of the typographic
elements of your web page.
They let you
change the color, size, or style of the text on a page without
waiting for the screen to refresh.
- Content Positioning
(NS)
(MS)
lets a web developer animate any element on a web page, moving pictures,
text, and objects at will.
It lets you ensure that pieces of content are
displayed on the page exactly where you want them to appear, and you can
modify their appearance and location after the page has been displayed.
- Dynamic Content
(MS)
actually changes the words, pictures, or multimedia on a page
without another trip to the web Server.
- Data Binding
(MS)
lets you get all the information you need to ask questions,
change elements, and get results without going back to the web
server.
- Downloadable Fonts
(NS)
let you use the fonts of your choice to enhance the
appearance of your text.
Then you can package the fonts with the page so that
the text is always displayed with your chosen fonts.
Scripts that are executed when a document is loaded may be able to
modify the document's contents dynamically. The ability to do
so depends on the scripting language itself (e.g., the
"document.write" statement in the HTML object model supported
by some vendors).
JavaScript
is often used to create dynamic HTML documents.
One of the more practical things that JavaScript does at this time is
increase the aesthetics and friendliness of websites by adding
author-specificed user events to static pages. For example, JavaScript
allows the page author to embed into a page statements which allow user
response to certain common events such as
when you move the mouse cursor over a link.
The following example illustrates how scripts may modify
a document dynamically. The following script:
<SCRIPT type="text/javascript">
document.write("<b>Date:<\/b> ")
document.write(Date())
</SCRIPT>
Has this effect:
The book "Dynamic HTML" from IDG Books, and written by Shelley Powers,
provides comprehensive coverage of both IE 4.x and Navigator 4.x specific
DHTML. In addition, it provides several complex cross-browser DHTML
examples, as well as exploring each of IE's and Navigator's scripting object
models. Find out how to create drag and drop effects, work with CSS, use
layers, hide and show content, alter page contents, capture events, and
provide animation effects that work with both of these popular browsers. The
Power Guide to DHTML also introduces the concept of cross-browser scripting
objects that handle browser differences, simplifying DHTML development, and
has loads of examples.
The author of "Dynamic HTML" has several articles on Dynamic HTML here at
"The Web Developer's Virtual Library".
What is DHTML? That's a great question, one that can't simply be
answered with "It's a combination of HTML and JavaScript." A better
answer would be, "DHTML is the combination and use of several built-in
features of fourth generation browsers that enable a web page to be
more dynamic." Interested in knowing more? Read on then...
by Aaron Weiss.
Never underestimate the power of underestimation -- the
easy things in life are clearly the most challenging. For
the same reasons that replacing the front door lock takes
the entire weekend and Pete Sampras can overcome bitter
rivals in five set matches but lose in straight sets to
guys who've just learned to shave, web development in the
real world is often a far cry from the 1-2-3 sing song of
tutorials. Outside the
ivory tower of the tutorial, reality becomes quite a bit
more slippery, especially when confounded by client wishes
and development environment constraints (a.k.a. "browser
bugs"). It might be useful, then, and perhaps somewhat
fun, to look at the development of a Dynamic HTML technique
-- namely, pop-up menus -- as a microcosm of the pain, woe,
and triumph of birthing an idea from "sure that sounds
easy" to actual implementation.
Go beyond the basics and learn how the pros add and use dynamic HTML features and advanced JavaScript techniques. Our two part excerpt takes a look at Chapter 3: Neat Stuff with Text and Images. From Que Publishing.
|
