The Web Wizard

1
The Web Wizards Guide To DHTML and CSS

• Chapter 1
• A Review of CSS1

2
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

3
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

4
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

5
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

6
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
• lth1 classisgreengtThis will appear green.lth1gt

7
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
• lth1 idsilverware gtThis will appear silver.lth1gt
• ID must be unique

8
Pseudo-Elements

• Typically used for drop cap effect
• p.dropcapfirst-letter font-size 300 float
  left color red

9
Placing Style Sheets

• Inline Style Sheets
• Applies to a single element
• ltp style"color silver"gtsome text goes
  here.lt/pgt
• Discouraged by the W3C

10
Placing Style Sheets

• Internal Style Sheets
• Applies to a single page
• ltstyle type"text/css"gt
• h1, h2, h3, h4, h5, h6
• font-family arial, sans-serif
• color blue text-align center
• p b color maroon
• .isgreen color green
• lt/stylegt

11
External Style Sheets

• Store style rules in an external file
• Reference the external file using link in the
  ltheadgt
• lthtmlgtltheadgtlttitlegtPage with external
  CSSlt/titlegtltlink relstylesheet
  typetext/css hrefsomestyle.cssgtlt/headgt
• Great for consistent styling on large sites

12
The Web Wizards Guide To DHTML and CSS

• Chapter 2
• A Review of CSS2 and JavaScript

13
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

14
A Review of CSS2

• The position property
• The visibility property
• The overflow property
• The clip property
• Add JavaScript to create Dynamic HTML

15
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

16
A Little History

• Invented by Eich at Netscape in 1995
• Became popular with Navigator 3
• JScript Microsofts competing language
• ECMA a standard emerges

17
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

18
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

19
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

20
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.

21
Dynamic HTML over Flash

• Works better with the browsers 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

22
The Web Wizards Guide To DHTML and CSS

• Chapter 3
• Introducing the W3C DOM

23
Chapter Objectives

• To discover the W3C DOMits nature and its
  importance
• To learn about nodes and how to reference them
• To learn how to dynamically change the content of
  nodes

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

25
What are Nodes?

• An object in DOM1 is called a node.
• Element nodes (ltpgt, lth1gt, etc.)
• Text nodes (text contained by element nodes)
• Attribute nodes (aligncenter)

26
Visualizing Nodes
27
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

28
The Web Wizards Guide To DHTML and CSS

• Chapter 4
• Building Your Dynamic HTML Code Library

29
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

30
Beginning Your Code Library

• Whats an API?
• A toolbox full of code
• Store in a simple text file

31
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') gt 0) ? true
  false
• var isWIN (UA.indexOf('win') gt 0) ? true
  false

32
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

33
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

34
The Web Wizards Guide To DHTML and CSS

• Chapter 5
• Creating Dynamic Visibility Applications

35
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

36
Hiding Content Off-ScreenA 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()

37
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

38
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

39
Dynamic Clipping

• Control visible portion of content
• Use the clip property of the style object

40
The Web Wizards Guide To DHTML and CSS

• Chapter 6
• Understanding Events

41
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

42
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

43
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

44
Propagation and Bubbling
45
Tracking Mousemove Events and Mouse Position

• ltbody onmousemove "showxy(event)gt
• function showxy(evt)
• if (window.event) evt window.event
• if (evt)
• var pos evt.clientX ", " evt.clientY
• window.statuspos

46
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

47
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

48
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

49
The Web Wizards Guide To DHTML and CSS

• Chapter 7
• Using Dynamic Techniques

50
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

51
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
• ltbutton onclick"fadeText('fadingText',255,0,0)"gt
  
• Specifies final color for div with
  idfadingText
• fadeIn() function makes small changes to size and
  color every 35 milliseconds

52
Modifying Border Style and Color Dynamically

• CSS values for border color, border style, border
  width, and background color
• document.getElementById('myText').style.borderColo
  r "red green yellow blue"
• Easily create ugly effects

53
Creating Dynamic Lists

• Replace standard bullet with custom image
• Change image on mouseover

54
Replacing Images with Dynamic HTML

• Old way - event handlers in ltagt 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

55
Using an Inline Frame to Load External Content

• ltiframegt 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

56
The Web Wizards Guide To DHTML and CSS

• Chapter 8
• Putting It All Togetherand Moving Forward

57
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

58
Designing with DHTML

• Content Organization
• Navigation Structure
• Layout
• Interactivity

59
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

60
Putting It All Together

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

61
Putting It All Together
62
Emerging Standards

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