Tutorials and Online Training Videos

Dynamic HTML (DHTML) Tutorial

Dynamic HTML (DHTML) is an umberella term for a combination of HTML, XHTML, CSS, and a client side scripting language such as Javascript, or VBScript. DHTML allows developers to create engaging web sites with content that can move, change shape, size, color, or otherwise react to user actions without requiring a trip to the web server, or browser plug-in. author, Darcey Spears, shows users step-by step how to build a web site, beginning with how to acquire client information, creating a site map, and onto planning for DXHTML elements. Work files are also provided for this tutorial. To being learning today, simply click on one of the Dynamic HTML lessons.


Welcome & Overview
The Sample Site: organicwoodworkers.com
System Requirements & Prerequisites


Dreamweaver Quick Overview
Setting Up the Site in Dreamweaver

Planning the Site

Client Requirements
Site Map
Technical Requirements
Design Requirements

Internet and the World Wide Web

The Source of HTML
Standards Evolution with the W3C
What Do You Follow?
Writing XHTML/CSS/JavaScript Pages

XHTML for default.htm

From SGML to XML
Quick Overview of XHTML Compliance
Basic Construction of default.htm
Main Elements for default.htm

Styling default.htm

Old HTML Presentation Markup
Along Came CSS
Discerning the Structure in Content
The Separation Process
Basic Style Rules
Cascading Sets of Styles & Naming Rules
Foreground & Background for default.htm
Font Family & Size for default.htm
Lists & Navigation Links for default.htm

Positioning default.htm

The Box Model
Block & Inline Elements & Their Boxes
Normal Flow & Positioning Schemes
Tags: Reference by Class
Slogan Text & Positioning
Links & Navigation Positioning
The Tree Quotes: First Positioning
The Tree Quotes: Float the Text Right
The Tree Quotes: Float the Link Left

JavaScript for default.htm

Overview of Client-side Scripting
JavaScript Properties & Methods
Tree Quote Function & Array of Quotes
Changing the Tree Quote: pt. 1
Changing the Tree Quote: pt. 2

XHTML For Artist Information

Artist Photo/Header/Quote
Artist Summary & More Information Area

Styling Artist Information

Artist Photo & H1 For Artist Name
Artist Quote :first-letter & :first-line
H3 for Artist Summary
H2 for More Information
Navigation Links & :hover/:active/& :visited

Positioning Artist Information

Main & Top Divisions
Quote & More Information Navigation Boxes
More Information Box & Overflow Options
The Look of the Scrollbars
The Center Column Boxes
Display & Visibility Choices

Unfolding Artist Information

Drop-down List Using :hover & Positioning
Onmouseover Highlighting
Adding JavaScript to Accommodate IE
Unfolding From the Same Page: pt. 1
Unfolding From the Same Page: pt. 2

Closing/Minimizing/Maximizing Artist Info

Design Limitations/Closing Artist Info
Minimizing Artist Information: pt. 1
Minimizing Artist Information: pt. 2
Minimizing Artist Information: pt. 3
Maximizing Artist Information

Work Samples

Another Page/Another Div
JavaScript Include for Artist Links
Artist Information from Another Page
General Image Considerations
XHTML Elements

Positioning Work Samples

The Thumbnail Column
Work Sample Full Image
Copyright/Photo/& Text

JavaScript for Drag & Drop

Drag & Drop Starting with the First Image
startDrag() pt. 1
startDrag() pt. 2
drop() pt. 1
drop() pt. 2
closeDetArea() & Image for Drop

The Rest of the Pages

About OWW
Contact OWW & a Total Site Review

Printing With CSS

Style Management with TopStyle Pro
Media Types
@import & @media
The Print Layout
The Print Style Sheet: XHTML Elements
Left Column Print Style pt. 1
Left Column Print Style pt. 2
Right Column Print Style

More CSS

The Document Tree
Selectors by Relationship
Horizontal Alignment
Vertical Alignment
Table Styles


Summary of Skills Learned
Thanks & More Resources


About this Author

Related Books on Dynamic HTML (DHTML)

Save $80 on the
by Motorola with Verizon Wireless service for less than from Verizon Wireless directly.
Save $80 on DROID BIONIC
More Cell Phone Discounts