Moderated by Anna Collens for the Danbury Area Computer Society Members
Web design: How-to get started, current standards, software tutorials, interactive discussions and help...

DACS
Resource
Center
Ives Manor
(lower level)
198 Main Street Danbury.

For information contact:
Annette van Ommeren
(aka "Anna Collens")

Join Us!
Just show up or send an email so you can be notified of upcoming meetings.

Using DHTML to enhance the user’s
interaction with your site
What is DHTML..?

D-dynamic-HTML is HTML that can change (and/or be changed by the viewer) even after a page has been loaded into a browser.

Dynamic HTML is client-side scripting
Changing an image with mouse-over is an example of dynamic HTML.
(Roll over the links above to make the brackets around the words appear)
DHTML:
  • Is enabled by using a number of technologies, such as: JavaScript, VBScript, the Document Object Model, layers, and Cascading Style Sheets
  • It is the integration of these components into the page that can make it dynamic
  • CSS and HTML are what you change, the DOM is what makes it changeable, and client-side scripting is what actually changes it
    		•

    The DOM:
    • The Document Object Model is the core of dynamic HTML.
      It makes HTML changeable.
    • The DOM is the hierarchy of elements that are present in the browser at any given time. This includes information such as the current date/time, browser properties (version number), window properties such the page's URL, and HTML elements such as <p> tags, divs, or tables.
    • By exposing the DOM to scripting languages, browsers enable you to access these elements.

    CSS:
    • Dynamic HTML is CSS
    • Because they are part of the DOM, CSS properties are accessible to scripting languages, so it is possible to change the way a page looks.

    The good news..
    • Faster downloads - DHTML files are smaller than comparable effects created by Flash
    • Web design software can do the work for you
    • Many free scripts available online (see links)
      But one needs to be comfortable editing (if not writing) HTML code to make them work!

    The bad news..
    • Inconsistant browser support NN 6.0 can break pages with JavaScript
    • Some knowledge of HTML, CSS, and JavaScript is helpful
    Some examples of DHTML uses:
    • Background color or image changes
    • Bookmark the page
    • JavaScript roll-over buttons
    • Calculator scripts
    • Password protection scripts
    • Interactive menu scripts (drop downs etc.)
    • Message scripts - appear with a click or roll-over.
    • Cookie scripts, counting visits, keeping track of visitors actions
    • Detect / redirect scripts
    • Scripts to scroll text
    • Time and date
    Adding scripts to a page..
    • With some "canned" scripts and freeware, you may have to insert part of the code between the <head> and the </head> part of the page HTML.
    • Then, the rest of the script gets placed inside the <body> - where ever it is required.
    • The variables are personalized to your requirements as needed.
    • Some scripts use an external JavaScript file located in the site folder
      Then a small amount of code is placed into the actual pages – which calls upon the external JavaScript file.

    Read more about DHTML, and find free scripts at these recources:

    Home || Meeting Schedule || Tutorials || Links || Contact || Directions
    © AnnaGraphics - AnnaGraphics.com 2008

    Google
    www www.annagraphics.com