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. VTC author, lt;a href='http://www.vtc.com/files/productlist.php?author=Darcey%20Spears' target='_blank'gt;Darcey Spearslt;/agt;, 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.
IntroductionWelcome && OverviewThe Sample Site: organicwoodworkers.comSystem Requirements && PrerequisitesToolsHTML/XHTML EditorsWYSIWYG EditorsDreamweaver Quick OverviewSetting Up the Site in DreamweaverPlanning the SiteClient RequirementsSite MapTechnical RequirementsDesign RequirementsInternet and the World Wide WebThe Source of HTML
Standards Evolution with the W3C
What Do You Follow?
Writing XHTML/CSS/JavaScript Pages
XHTML for default.htmFrom SGML to XML
Quick Overview of XHTML Compliance
Basic Construction of default.htm
Main Elements for default.htm
Styling default.htmOld 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.htmThe Box Model
Block && Inline Elements && Their Boxes
Normal Flow && Positioning Schemes
<div> 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.htmOverview 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 InformationArtist Photo/Header/Quote
Artist Summary && More Information Area
Styling Artist InformationArtist 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 InformationMain && 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 InformationDrop-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 InfoDesign Limitations/Closing Artist Info
Minimizing Artist Information: pt. 1
Minimizing Artist Information: pt. 2
Minimizing Artist Information: pt. 3
Maximizing Artist Information
Work SamplesAnother Page/Another Div
JavaScript Include for Artist Links
Artist Information from Another Page
General Image Considerations
XHTML Elements
Positioning Work SamplesThe Thumbnail Column
Work Sample Full Image
Copyright/Photo/&& Text
JavaScript for Drag && DropDrag && Drop Starting with the First Image
startDrag() pt. 1
startDrag() pt. 2
endDrag()/enterDragTarget()/overDragTarget()
drop() pt. 1
drop() pt. 2
closeDetArea() && Image for Drop
The Rest of the PagesAbout OWW
Contact OWW && a Total Site Review
Printing With CSSStyle 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 CSSThe Document Tree
Selectors by Relationship
Horizontal Alignment
Vertical Alignment
Opacity
Table Styles
ConclusionSummary of Skills Learned
Thanks && More Resources
CreditsAbout this Author
Click here to find out more about the Dynamic HTML (DHTML) Training CD