DHTML Training

Introduction

Welcome & Overview

· The Sample Site: organicwoodworkers.com

· System Requirements & Prerequisites

Tools

HTML/XHTML Editors

WYSIWYG Editors

· 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

· 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

· Closing/Minimizing/Maximizing Artist Info

· Design Limitations/Closing Artist Info

· Minimizing Artist Information

· 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()

· endDrag()/enterDragTarget()/overDragTarget()

· drop()

· 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

· Right Column Print Style