Dynamic HTML (DHTML):
Dynamic HTML (DHTML) Training
Dynamic HTML (DHTML) is an umbrella 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, 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.
| Dynamic HTML (DHTML) | ||
 |
Format:CD |
|
Dynamic HTML (DHTML)
Introduction
Welcome & OverviewThe Sample Site: organicwoodworkers.com
System Requirements & Prerequisites
Tools
HTML/XHTML EditorsWYSIWYG Editors
Dreamweaver Quick Overview
Setting Up the Site in Dreamweaver
Planning the Site
Client RequirementsSite Map
Technical Requirements
Design Requirements
Internet and the World Wide Web
The Source of HTMLStandards Evolution with the W3C
What Do You Follow?
Writing XHTML/CSS/JavaScript Pages
XHTML for default.htm
From SGML to XMLQuick Overview of XHTML Compliance
Basic Construction of default.htm
Main Elements for default.htm
Styling default.htm
Old HTML Presentation MarkupAlong 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 ModelBlock & 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 Properties & Methods
Tree Quote Function & Array of Quotes
Changing the Tree Quote: pt. 1
Changing the Tree Quote: pt. 2
Artist Summary & More Information Area
Artist Quote :first-letter & :first-line
H3 for Artist Summary
H2 for More Information
Navigation Links & :hover/:active/& :visited
Quote & More Information Navigation Boxes
More Information Box & Overflow Options
The Look of the Scrollbars
The Center Column Boxes
Display & Visibility Choices
Onmouseover Highlighting
Adding JavaScript to Accommodate IE
Unfolding From the Same Page: pt. 1
Unfolding From the Same Page: pt. 2
Minimizing Artist Information: pt. 1
Minimizing Artist Information: pt. 2
Minimizing Artist Information: pt. 3
Maximizing Artist Information
JavaScript Include for Artist Links
Artist Information from Another Page
General Image Considerations
XHTML Elements
Work Sample Full Image
Copyright/Photo/& Text
startDrag() pt. 1
startDrag() pt. 2
endDrag()/enterDragTarget()/overDragTarget()
drop() pt. 1
drop() pt. 2
closeDetArea() & Image for Drop
Contact OWW & a Total Site Review
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
Selectors by Relationship
Horizontal Alignment
Vertical Alignment
Opacity
Table Styles
Thanks & More Resources
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 ScriptingJavaScript 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/QuoteArtist Summary & More Information Area
Styling Artist Information
Artist Photo & H1 For Artist NameArtist Quote :first-letter & :first-line
H3 for Artist Summary
H2 for More Information
Navigation Links & :hover/:active/& :visited
Positioning Artist Information
Main & Top DivisionsQuote & 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 & PositioningOnmouseover 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 InfoMinimizing Artist Information: pt. 1
Minimizing Artist Information: pt. 2
Minimizing Artist Information: pt. 3
Maximizing Artist Information
Work Samples
Another Page/Another DivJavaScript Include for Artist Links
Artist Information from Another Page
General Image Considerations
XHTML Elements
Positioning Work Samples
The Thumbnail ColumnWork Sample Full Image
Copyright/Photo/& Text
JavaScript for Drag & Drop
Drag & Drop Starting with the First ImagestartDrag() pt. 1
startDrag() pt. 2
endDrag()/enterDragTarget()/overDragTarget()
drop() pt. 1
drop() pt. 2
closeDetArea() & Image for Drop
The Rest of the Pages
About OWWContact OWW & a Total Site Review
Printing With CSS
Style Management with TopStyle ProMedia 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 TreeSelectors by Relationship
Horizontal Alignment
Vertical Alignment
Opacity
Table Styles
Conclusion
Summary of Skills LearnedThanks & More Resources