DHTML and CSS for the World Wide Web
| Code Examples
Part 1: Cascading Style Sheets
01
02
03
04
05
06
07
08
09
Part 2: Dynamic HTML
10
11
12
13
14
15
16
17
Part 3: DHTML & CSS Tools
18
19
Part 4: Dynamic Web Sites
20
21
22
23
24
25
26
27
28
29
Chapter 2 - CSS Basics
Adding CSS to an HTML Tag
Adding CSS to a Web Page
Adding CSS to a Web Site
(re)Defining an HTML Tag
Defining Classes to Create your Own Elements
Defining IDs to Identify an Object
Creating Your Own Inline HTML Tags
Creating Your Own Block-Level HTML tags
Defining Tags with the Same Rules
Defining Tags in Context
Making a Definition !important
Inheriting Properties from a Parent
Importing Style Sheets
Managing Existing or Inherited Properties
Determining the Cascade Order
Setting the CSS for Printing
Adding Comments to CSS
Chapter 3 - Font Controls
Setting the Font
Downloading Fonts
Setting the Font Size
Making Text Italic
Setting Bold, Bolder, Boldest
Creating Minicaps
Setting Multiple Font Values
Chapter 4 - Text Controls
Adjusting the Kerning
Adjusting Word Spacing
Adjusting the Leading
Setting Text Case
Aligning Text Left, Right, and Center
Aligning Text Vertically
Indenting Paragraphs
Decorating Text
Controlling White Space
Setting Page Breaks for Printing
Chapter 5 - List and Mouse Controls
Setting Up a List
Setting the Bullet Style
Creating a Hanging Indent
Creating Your Own Bullets
Changing the Mouse Pointer's Apperance
Chapter 6 - Color and Background Controls
Setting the Background
Setting Individual Background Properites
Setting the Background Color
Setting the Foreground Color
Chapter 7 - Border and Margin Controls
Setting the Width and Height of an Element
Setting an Element's Margins
Setting an Element's Border
Decorating an Element's Border
Setting Multiple Border Colors
Setting an Element's Padding
Setting a Table's Borders and Margins
Wrapping Text Around an Elemet
Preventing Text From Wrapping
Telling an Element How To Display (or not)
Chapter 8 - Positioning Controls
Setting the Position Type
Using Fixed Positioning
Setting the Position From the Top and Left
Setting the Position From the Bottom and Right
Stacking Element's on Top of Each Other (3-D Positioning)
Nesting an Absolute Element In a Relative Element
Nesting a Relative Element In an Absolute Element
Chapter 9 - Visibility Controls
Setting the Visibility of an Element
Setting the Visible Area of an Element (Clipping)
Setting Where the Overflow Goes
Chapter 11- The Document Object Model
Creating an Object
Understanding Event Handlers
Detecting an Event
Using Feature Sensing
The Netscape Layers DOM
The IE All DOM
The W3C ID DOM
Detecting the DOM Type
Building a Cross-Browser DOM
Using the Cross-Browser DOM
Netscape 4 and Nested Layers
Chapter 12- Learning About the Environment
Detecting the Browser's Name and Version
Detecting the Operating System
Finding the Screen's Dimensions
Finding the Number of Colors
Finding the Browser Window's Dimensions (Netscape Only)
Finding the Visible Page Dimensions
Finding the Page's Location and Title
Finding the Page's Scroll Position
Finding an Object's Dimensions
Finding an Objects Top and Left Position
Finding an Object's Bottom and Right Position
Finding an Object's 3-D Position
Finding an Object's Visibility State
Finding an Object's Visible Area
Chapter 13- Dynamic Technics: The Basics
Makeing Objects Appear and Disappear
Moving Objects from Point to point
Moving Objects By a Certain Amount
Moving Objects in 3-D
Scrolling a Web Page
Changing an Objects Visible Area
Chapter 14- Dynamic Technics: Advanced
Making a Function Run Again (...and again ... and again)
Passing an Event to a Function
Creating a Global Event Handler
Animating an Object
Finding your Location in the Window
Identyfying an Object in the Window
Dynamic Content between Frames
Moving the Browsr Window
Opening a New Browser Window
Changing a Window's Size (Netscape Only)
Chapter 15- Dynamic Technics: CSS
Changing a Definition
Changing an Object's Class
Adding a New Rule
Disabling a Style Rule
Chapter 16- Netscape Layers
Creating a Layer
Importing External Content with Netscape Layers
Accessing Layers with JavaScript
Modifying Layers with JavaScript
Providing Content for Nonlayer Browsers
Chapter 17- IE's Visual Controls
Fading Between Objects
Transitions Between Pages
Making an Element Blur
Making an Object Wave
Chapter 22- Page Layout
Netscape CSS Bug Fix
Setting the CSS for the OS
Creating Headlines
Creating a Fixed Header
Creating a Sidebar
Setting a Dynamic Header anbd Footer
Making your own Frame Borders
Opening and Closeing Frames
Keeping Pages Framed
Chapter 23- Importing External content
Combining iLayers and iFrames
Using Server-Side Includes
Using an External JavaScript File
Chapter 24- Web Site Navigation
Setting Link Styles
Setting Multiple Link Styles
Creating Drop-Down Menus
Creating a Sliding Menu
Creating a Remote Control
Creating a Clamshell Menu
Creating a Breadcrumb Menu
Providing Navigation for Nondynamic Browsers
Educating the Browser
Chapter 25- Controls
Creating Your Own Scroll Bars
Creating Your Own Back Button
Creating a Slide Show
Creating Pop-Up Hypertext
Using Form Input for Dynamic Actions
Creating Contextual Form
Drag-and-Drop Objects (Not NS6)
Swapping Iamges
Creating a Smart Menu
Chapter 26- Special Effects
Creating Drop Caps
Creating a Simple Drop Shadow
Creating an Advanced Drop Shadow
Fading HTML Text
Follow The Mouse
Floating Objects
Creating Transparent Graphics in PNG Format
Creating a Clock
Chapter 27- Multimedia
Adding Sound
Adding a GIF Animation
Adding a Flash Animation
Adding Video
Adding a Java Applet