The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1

Chapter Objectives To learn the history of HTML and CSS To learn to create style rules using CSS selectors and declarations To learn where to place style sheets and create basic styles in CSS1

History of HTML and CSS Tim Berners-Lee at CERN Mosaic and graphical browsing The advent of non-standard tags HTML 4 and CSS Proper Containment Block level versus Inline elements

Creating Your Own Style Rules A CSS rule; Selector and Declaration Properties and values h1 {font-family : arial, sans-serif} p { font-family : "times new roman", serif; color : red; text-align: left }

HTML Element Selectors Designate style for one or more HTML tags h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center } Contextual Selectors p b {color : maroon}

Class Selectors Applies rules to HTML content by class Create a rule in the style sheet.isgreen {color : green} Reference the class name in the HTML This will appear green.

ID Selectors Applies rules to HTML content by ID Create a rule in the style sheet #silverware {color : silver;} Reference the ID in the HTML This will appear silver. ID must be unique

Pseudo-Elements Typically used for drop cap effect p.dropcap:first-letter { font-size: 300%; float: left; color: red; }

Placing Style Sheets Inline Style Sheets Applies to a single element some text goes here. Discouraged by the W3C

Placing Style Sheets Internal Style Sheets Applies to a single page h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center; } p b {color : maroon;}.isgreen {color : green;}

External Style Sheets Store style rules in an external file Reference the external file using link in the Page with external CSS Great for consistent styling on large sites

The Web Wizard’s Guide To DHTML and CSS Chapter 2 A Review of CSS2 and JavaScript

Chapter Objectives To review how to position, hide, and show content, using CSS2 To understand how CSS works with a scripting language to create Dynamic HTML To review the fundamentals of JavaScript To learn about the Document Object Model To create a three-dimensional animation To examine the pros and cons of animation with DHTML versus Flash

A Review of CSS2 The position property The visibility property The overflow property The clip property Add JavaScript to create Dynamic HTML

Why Learn JavaScript? Broad support among web browsers Vast libraries of scripts available online Applicable to other host environments Allows use of reusable code libraries Similar syntax to C, C++, and Java Encourages creative problem solving

A Little History Invented by Eich at Netscape in 1995 Became popular with Navigator 3 JScript: Microsoft’s competing language ECMA: a standard emerges

Fundamental Concepts Objects: The nouns of the language Instances: incarnations of objects Properties: attributes of objects Values: content for properties Events and Events Handlers Variables: containers for data Arrays: ordered collections of data Methods: The verbs of the language Operators: Assignment versus Comparison Functions: groups of statements

The Document Object Model Internal road map of objects on a web page Hierarchical model of web browser objects Old DOMs for Netscape, Microsoft New browsers use the standard DOM by W3C

Animating with DHTML Create the HTML Absolute position your objects Be aware of z-index stacking Call an init() function in the onload handler Store generic functions in an external library

Flash over Dynamic HTML Flash gives more control over animations. Flash animations look the same on all browsers and platforms. Flash files embed any fonts needed for display of highly stylized text. Flash works better with sound and video. Flash is a little easier to learn than DHTML There are versions of the Flash plug-in for obsolete browsers.

Dynamic HTML over Flash Works better with the browser’s back button. DHTML text can be searched and selected. DHTML requires only a text editor. Flash files require a plug-in. DHTML integrates well with HTML. DHTML is often better for navigation. DHTML works anywhere on the page

The Web Wizard’s Guide To DHTML and CSS Chapter 3 Introducing the W3C DOM

Chapter Objectives To discover the W3C DOM—its nature and its importance To learn about nodes and how to reference them To learn how to dynamically change the content of nodes

What is the DOM? DOM is Document Object Model A standard way to refer to objects on a Web page The W3C DOM1 replaces proprietary DOMs from Netscape and Microsoft document.getElementById() document.getElementsByTagName()

What are Nodes? An object in DOM1 is called a node. Element nodes (,, etc.) Text nodes (text contained by element nodes) Attribute nodes (align=“center”)

Visualizing Nodes

Things to do with nodes Change the text of nodes Add and remove text nodes Create element nodes to dynamically style content Change the value of attribute nodes

The Web Wizard’s Guide To DHTML and CSS Chapter 4 Building Your Dynamic HTML Code Library

Chapter Objectives To start creating a library of reusable code To include browser detection in a library To create library functions for 3-D positioning To learn about library functions used for window size manipulation

Beginning Your Code Library What’s an API? A toolbox full of code Store in a simple text file

Browser Detection Code Tool number 1 in your code library. Detect browsers by feature support var theDOM1 = (document.getElementById) ? true : false; Detect browsers by name var UA = navigator.userAgent.toLowerCase(); Detect the platform in use var isMAC = (UA.indexOf('mac') >= 0) ? true : false; var isWIN = (UA.indexOf('win') >= 0) ? true : false;

Using Object-Positioning Library Code Create a getObj() function Create a shiftTo() function Create functions to find x, y, and z Create a function to empty a node

Library Code to Change Window Size A function to get the available width A function to get the available height A function to set the window size A function to maximize the window

The Web Wizard’s Guide To DHTML and CSS Chapter 5 Creating Dynamic Visibility Applications

Chapter Objectives To use off-window locations to control visibility To create dropdowndrop-down menus with the visibility property To create collapsible menus with the display property To control how much of an image is visible

Hiding Content Off-Screen: A Sliding Menu Create two side-by-side divs The left div contains links The right div opens and closes the menu Absolute position both divs to hide left div off-screen Add scripting to move right div on screen Enhance with setCursor() and setBackground()

Drop-Down Menus Simulate GUI Menus Absolute position limits placement to top Use relative position for topmost div Drop-down menu in an invisible nested div Enhance with color and cursor changes

Collapsible Menus Simulate hierachical file trees Set display to none to hide menu Set display to block to show menu Enhance with text node substitution Enhance with cursor and color changes

Dynamic Clipping Control visible portion of content Use the clip property of the style object

The Web Wizard’s Guide To DHTML and CSS Chapter 6 Understanding Events

Chapter Objectives Learn the history of Web browser event models Discover the nature of events on the Web Explore event propagation and bubbling Discover mouse events and position Use visibility techniques to create hypertext Create drag-and-drop applications Use keyboard events in Web page development

History of Web Browser Events Limited support for events in early browsers Expanded events in version 4.0 browsers Disparate event models (NN4 vs. IE4) New W3C event model

Events on the Web Browser creates events in response to user action. Event object begins life when user acts Event object ends life when scripts stop processing it One event at a time Netscape and W3C static Event object IE4+ window.event Every event has a target

Propagation and Bubbling

Tracking Mousemove Events and Mouse Position function showxy(evt){ if (window.event){ evt = window.event; } if (evt){ var pos = evt.clientX + ", " + evt.clientY; window.status=pos; } }

Hypertext with Mouse Events Title tag for single line tool tips Hypertext for multi-line content Add event handlers to links onmouseover="doHT(event,'vitry','visible');” onmouseout="doHT(event,'vitry',’hidden');” First parameter passes event Second parameter passes ID Third parameter passes visibility

Drag-and-Drop Applications Place drag-and-drop code in library Place utility functions in library Add event handlers to div onmousedown="setDrag(event,this);" onmouseup="checkdroploc('1','0');” Drag begins on mousedown Drag ends on mouseup Script checks new position of div

Keyboard Events Keyboard is fasted input device onload="init();” document.onkeyup = getKeyEvent; Obtains keyCode Check for letters, numbers, or space bar Swap text node value to show key typed

The Web Wizard’s Guide To DHTML and CSS Chapter 7 Using Dynamic Techniques

Chapter Objectives Modify font size and color dynamically Modify text border style and color dynamically Improve appearance and responsiveness of lists Work dynamically with images Load external content in an inline frame

Modifying Font Size and Color Dynamically Complex text effects without Flash Any CSS font property can be changed Style sheet sets initial color of text to white Specifies final color for div with id=“fadingText” fadeIn() function makes small changes to size and color every 35 milliseconds

Modifying Border Style and Color Dynamically CSS values for border color, border style, border width, and background color document.getElementById('myText').style.borderColor = "red green yellow blue"; Easily create ugly effects

Creating Dynamic Lists Replace standard bullet with custom image Change image on mouseover

Replacing Images with Dynamic HTML Old way - event handlers in tag New way - event handlers in any tag Load all images in stacked divs Change stacking order to show desired image Combine with Dynamic List effect

Using an Inline Frame to Load External Content tag creates inline frame Can be positioned anywhere on the page Works in newer browsers only Change src attribute of iframe to load new content Simple link with target attribute also works

The Web Wizard’s Guide To DHTML and CSS Chapter 8 Putting It All Together and Moving Forward

Chapter Objectives Confront design questions in navigating a large site Generate large amounts of content with a small amount of code Combine collapsible menus with hypertext to display text and html HTML files in both inline frames and new windows Learn about XML, SMIL, SVG, and other developing technologies

Designing with DHTML Content Organization Navigation Structure Layout Interactivity

Scripting for Efficiency When presented with tedious copy paste, create scripts to do the work. Use loops and document.write() to create repetitive HTML Use variables to change content as needed Escape nested quotes and forward slashes

Putting It All Together Create collapsible menu using loops and document.write() Include event handlers for hypertext Insert and to display HTML pages Swap text node values to display captions Give the visitor the option to open a new window

Putting It All Together

Emerging Standards XML - Extensible Markup Language XHTML - Extensible HyperText Markup Language SMIL - Synchronized Multimedia Integration Language SVG - Scalable Vector Graphics