Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions
 Discussion Forums
 HTML, XML, JavaScript...
 Software Reviews
 Editors,Others...
 Top100
 JavaScript Tutorials, ...
 Tutorials
 ASP, CSS, Databases...
 Discussion List
 FAQ, Roundup, Configure ...
 Authoring
 HTML, JavaScript, CSS...
 Design
 Layout, Navigation,...
 Graphics
 Tools, Colors, Images...
 Software
 Browsers, Editors, XML...
 Internet
 Domains, E-Commerce, ...
 WDVL Resources
  Intermdiate, Tutorials,...
 WDVL
 Discussion Lists, Top 100,...
 Technology Jobs

PDAs
PC Notebooks
Printers
Monitors


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us
Memory
Web Design
Dental Insurance
Laptops
Compare Prices
Online Shopping
Online Universities
Data Center Solutions
Cell Phones
Computer Deals
Home Improvement
Promotional Gifts
Shop Online
Disney World Tickets

Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology
International

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


 
Interview with C++ Guru Herb Sutter
Multi- and many-core chips are entering the mainstreamand one of the first software development authorities to take note was C++ expert Herb Sutter. He took time recently to speak with Go Parallel about the multi-core chip revolution and how it's affecting software developers. Read More>>>
 
Scalable Parallelism with Intel® Threading Building Blocks
This paper discusses the approach to parallelize the Data Encryption Standard (DES) algorithm with Intel. Threading Building Blocks and how it can scale for future processors. Read More>>>

 
Visit ThreadingBuildingBlocks.org
Threading Building Blocks (TBB) is now open sourced and supported by some very impressive veteran parallelism experts. Come check it out! Read More>>>
 
Intel Threading for Multi-Core Community
The Intel® Threading for Multi-Core Community provides technical information, tools, conversation and support for the development of parallel programs and multi-threaded applications on multi-core and multi-processor platforms. Read More>>>
 
Download a Sample Chapter of the Book: Threading Building Blocks
Intel Threading Building Blocks: Outfitting C++ for Multi-core Processor Parallelism, by James Reinders. Get your copy now!>>>
Top 10 Articles
  1. Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions
  2. JavaScript Tutorial for Programmers
  3. Design
  4. JavaScript Tutorial for Programmers - Objects
  5. JavaScript Tutorial for Programmers - JavaScript Grammar
  6. JavaScript Tutorial for Programmers - Versions of JavaScript
  7. Cascading Style Sheets
  8. JavaScript Tutorial for Programmers - Embedding JavaScript
  9. JavaScript Tutorial for Programmers - Functions
  10. Authoring JavaScript
Domain Name Lookup
Search to find the availability of a domain name. Just enter the complete domain name with extension (.com, .net, .edu)

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:

  1. Positioning; precisely placing blocks of content on the page and, if desired, moving these blocks around (strictly speaking, a subset of style modifications).
  2. Style modifications; on-the-fly altering the aesthetics of content on the page.
  3. 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.

The DOM Dissected

   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.

Scripting Languages

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

Tools and Resources

Cross Browser DHTML

An Introduction to Dynamic HTML

Beginner's Guide to DHTML

Quadzilla Archive.

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

DHTML Pop-Up Menus: A Parable of Triumph and Loss (Based on a True Story)

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.

Beyond HTML Goodies

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.



Up to => Home / Authoring




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers