Excerpt
So you want to learn how to make your Web pages more exciting... more interesting... more dynamic-but you don't have all day. Creating Web pages used to be simple. You learned a few tags, created a few graphics, and presto: Web page. Now with streaming video, CGI, Shockwave, Flash, and Java, Web pages and their design may seem overwhelming to anyone not wanting to become a computer programmer.
Enter Dynamic HTML, a suite of technologies that give you-the Web designer-the ability to add pizzazz to your Web pages as quickly and easily as HTML does. With Dynamic HTML you don't have to rely on plug-ins that the visitor might not have, or complicated programming languages (except maybe a little JavaScript). For the most part, Dynamic HTML is created the same way as HTML and requires no special software to produce.
Who is this book for?
If the title of this book caught your eye, you're probably already well acquainted with the ins and outs of the Internet's most popular off shoot, the World Wide Web-or perhaps just a severely confused arachnophile. In order to understand this book, you will need to be familiar with the HyperText Mark-up Language. You don't have to be an expert, but you should at least know the difference between a
tag and a
tag. In addition, several of the chapters call for more than a passing knowledge of JavaScript.
That said, the more knowledge about HTML and JavaScript you can bring to this book, the more you will be able to get out of it.
What is Dynamic HTML?
I'll let you in on a little secret: There really isn't a DHTML. At least, not in the way that there is an HTML or a JavaScript. HTML and JavaScript are specific, easily identified technologies for the Web. Dynamic HTML, on the other hand, is a marketing term coined by both Netscape and Microsoft to describe a series of technologies introduced in the 4.0 versions of their Web browsers, to enhance the "dynamic" capabilities of those browsers.
So the real question is, what makes a Web page dynamic? There is, of course, substantial debate on this topic, but we can agree on a few things.
1. Dynamic documents allow the designer to control how the HTML displays the Web pages' content.
2. Dynamic documents react and change with the actions of the visitor (the person using the Web site).
3. Dynamic documents can exactly position any element in the window, and change that position after the document has loaded.
4. Dynamic documents can hide and show content as needed.
The flavors of DHTML
Unfortunately, Netscape and Microsoft have differing ideas about exactly what technologies should be used to make HTML more dynamic. Fortunately for us, the specifications of these two companies do overlap, as shown in Figure I.1. And this area of overlap is what this book is primarily about. Why? Because the World Wide Web was founded on a very simple premise: the display of Web documents should be indifferent to the software being used.
Evolution and progress mean newer browsers have had to add technologies not supported by legacy (older) browsers. Still, there is an important tenet supporting the idea of being able to use the Web regardless of whose binary code you happen to be running. Cross-browser capability is what the Web is all about, and for good reason.
Cross-Browser DHTML
The following technologies will run pretty much identically, regardless of the DHTML browser being used. (Exceptions are noted throughout this book.)
1. Cascading Style Sheets (CSS), Level 1
CSS allows you to define how HTML tags should display their content.
2. Cascading Style Sheets-Positioning (CSS-P)
With CSS-P you can exactly position HTML elements anywhere in the window, as well as control the visibility of those elements.
3. JavaScript 1.2
JavaScript allows you to create simple code to control the behavior of Web page elements.
Netscape-Specific DHTML
Netscape has brought several new technologies to the table hoping to create more dynamic Web pages. Unfortunately, these technologies will never become standards because CSS does most of the same things and is endorsed by the W3C.
1. JavaScript Style Sheets
Like CSS, JSS allows you to define how HTML tags display their content; but JSS uses a JavaScript syntax.
2. Layers
Like CSS-P, layers allow you to control the position of elements on the screen and their visibility.
Microsoft-Specific DHTML
Much of the Microsoft-specific DHTML is based on proprietary Microsoft software, such as ActiveX technology. Since ActiveX is owned by Microsoft, it is unlikely that it will ever be a cross-browser technology.
1. Visual Filters
Visual filters let you perform visual effects on graphics and text in your document. If you have ever worked with Photoshop filters, you'll understand the similar ways of visual filters.
2. Dynamic CSS
With Internet Explorer you can not only change the positions of elements on the screen, you can change their visual appearance as well.
CSS and DHTML
By the beginning of the next millennium, a scant two years away, the Web will probably bear no more resemblance to its current incarnation than a telephone does to an aldus lamp. The technologies used to create Web pages will continue to evolve, especially in the visual range.
One thing Web design has always lacked however, especially for anyone used to the controls available in desktop layout programs such as PageMaker and Quark, is exact control over the position and appearance of the HTML elements on the screen.
Cascading Style Sheets,-the key component of cross-browser DHTML technology and a central topic of this book-allow for just such control over our Web pages. Although the concept of control may not seem as jazzy and dynamic as the ability to make graphics move around on the page, CSS has the potential to do for Web layout what word processors did for print publication. In addition, the dynamic capabilities of cross browser DHTML are all predicated on the use of Cascading Style Sheet-Positioning.
TABLE OF CONTENTS:
DHTML: Visual QuickStart Guide
Table of Contents
Introduction
Who is this book for?
What is Dynamic HTML?
The flavors of DHTML
CSS and DHTML
JavaScript and DHTML
Tools you need to create DHTML
The code used in this book
Values and units in this book
Chapter:1 CSS Basics
What is a style?
What are Cascading Style Sheets?
Understanding CSS rules
Understanding selectors
Kinds of tags
The definition: properties and values
Creating a CSS rule with an HTML selector
Defining a class selector
Defining an ID selector
Giving several HTML selectors the same definition
Putting selectors into context
Adding CSS to individual HTML tags
Adding CSS to an HTML document
Setting up an external CSS file
Linking to external CSS files
Importing external CSS files
Adding comments to CSS
Making your own tags with and
Inheriting properties from parents
Managing preexisting or inherited property values
Determining the cascade order
Troubleshooting CSS
Chapter 2: CSS Fonts
Setting the font
Setting the font size
Making text italic
Bold, bolder, boldest
Creating minicaps
Setting multiple font values
Chapter 3: CSS Text Control
Adjusting the kerning (letter spacing)
Adjusting word spacing
Adjusting leading (line height)
Justifying the text (left, right, and center)
Aligning text vertically
Indenting paragraphs
Controlling text case
Decorating the text
Controlling white spaces
Chapter 4: Using the List Style Properties
Setting the bullet style
Creating a hanging indent
Creating your own bullets
Setting multiple values for the list-style property
Chapter 5: Using the Color and Background Properties
Setting colors
Setting background colors
Setting a background image
Setting a background image's repetition
Positioning a background on the screen
Fixing backgrounds on the screen
Setting multiple background values
Chapter 6: CSS Margins and Borders
Understanding the element's box
Setting element margins
Setting individual margins
Setting padding around an element
Setting padding on a side
Setting the border width
Setting the border width on a side
Setting the border color
Decorating the border
Setting multiple border values
Setting multiple border values on a side
Setting the width and height of an element
Wrapping text around text (aka "floating")
Preventing floating text
Telling the element how to display (or not)
Chapter 7: CSS Positioning
Setting the position type
Visibility (or not)
Using absolute positioning
Using relative positioning
Adding absolute elements to a relative element
Using static positioning
Making floating elements with positions
Setting the left and top margins
Clipping the element
Defining the stacking order
Chapter 8: Real-World CSS
Creating headlines with graphic backgrounds
Creating a side bar
Creating drop caps
Creating a title bar
Creating a drop shadow
Creating distinctive titles
Setting the appearance of an anchor link
Creating columns
Chapter 9: The Document Object Model
What is a Document Object Model?
How a DOM works
New event handlers
The Netscape Navigator DOM
The Internet Explorer DOM
Sensing the browser type and version
Creating a cross-browser DOM
Feature Sensing
Chapter 10: Dynamic Techniques
Showing and hiding elements
Toggling graphics
Changing the stacking order
Moving elements from point to point
Finding your location
Sensing events anywhere on the screen
Placing external content
Selecting an element
Dynamic content between frames
Chapter 11: Dynamic Solutions
Creating pop-up elements
Creating a pop-up menu
Animating elements: The Sliding Banner
Dragging elements: The Magnetic Poetry Kit
Chapter 12: JavaScript in Netscape's DHTML
What are JavaScript Style Sheets?
Understanding JSS properties
Using JSS Rules
Setting Up JSS
Defining an HTML selector with JSS
Defining a class with JSS
Defining IDs with JSS
Defining contextual selectors with JSS
Defining an individual element with JSS
Finding the screen's size and number of colors
Controlling a window's size and position
Chapter 13: Netscape Layers
What is a layer?
Creating layers
Using layers
Accessing layers with JavaScript
Modifying layers with JavaScript
Providing content for non-layer browsers
Chapter 14: Visual Controls in Internet Explorer
Fading between elements
Transitions between pages
Making an element blur
Making an element wave
Chapter 15: Dynamic CSS in Internet Explorer
Changing a style property
Changing an element's class
Creating collapsing and expanding menus
Disabling CSS
Adding a new rule dynamically
Defining CSS for print
A. CSS Quick Reference
Quick Reference
Font Properties
Text Properties
List Properties
Color and Background Properties
Margin and Border Properties
Positioning Properties
B. Layers Quick Reference
Layer Tags
Layer Tag Attributes
Layer Object Properties
Layer Object Methods
C. Resources, Resources, Resources
Dynamic HTML Zone
Web Reference
Web Monkey
Netscape: DevEdge Online
Microsoft: SBN Authoring
The World Wide Web Consortium
The Web Design Group: HTML Help
The Visual Quickstart Guide to Dynamic HTML
Index