Dynamic HTML: The HTML Developer's Guide

Paperback | December 15, 1998

byJeff Rule

not yet rated|write a review

Because scripting with DHTML is much more complex than with regular HTML, many web developers are hesitant to begin learning this vital technology. Dynamic HTML is a valuable resource to help you master this important new skill. Both a comprehensive reference guide and a clear tutorial, this book explains the principles behind DHTML and, using a learnbyexample approach, enables you to acquire techniques for effective DHTML scripting. Inspired by the author’s webbased DHTML Demos, this book contains solid examples of DHTML that can be taken apart and plugged into existing web pages for dynamic effects.

Among its key features, Dynamic HTML offers:

  • Complete, easy to understand coverage of Cascading Style Sheets (CSS) and Document Object Models (DOM) for both Microsoft and Netscape versions of DHTML
  • Realworld examples that can be plugged in as is, including animations, drag and drop, timelines, pulldown menus, popout menus, transitions, and filters, for creating instant dynamic effects on existing web pages
  • A unique, learnbyexample approach that explains demonstrations in detail, taking the code apart line by line to illustrate the script in action
  • Coverage of Internet Explorer 5 and Netscape 5
  • The perfect blend of conversational tone, solid technical explanations, personal insights, and valuable exercises that lighten the task of learning DHTML essentials

    The companion web site for this book, which includes sample code, demos referenced in the book, and working examples, is located at http://www.ruleweb.com/dhtml/index.html



    0201379619B04062001

Pricing and Purchase Info

$41.95

In stock online
Ships free on orders over $25

From Our Editors

The World Wide Web is fast becoming the most valuable information resource available. Dynamic HTML allows users to modify web pages in response to users’ input, allowing features such as pull-down menus, drag and drop and animation. This invaluable guide will help developers ease the learning curve with its learn-by-example approach.

From the Publisher

Because scripting with DHTML is much more complex than with regular HTML, many web developers are hesitant to begin learning this vital technology. Dynamic HTML is a valuable resource to help you master this important new skill. Both a comprehensive reference guide and a clear tutorial, this book explains the principles behind DHTML a...

From the Jacket

If you're tired of programming manuals that start with trivial details and examples and illustrate only the most basic demos, then this book is for you. In Dynamic HTML: The HTML Developer's Guide you will learn DHTML the same way you probably learned HTML--by looking at other people's source code. Because scripting with DHTML is mu...

Jeff Rule is the Senior Interactive Developer at Discovery Channel Online. He was an early pioneer with Dynamic HTML using Netscape 4 and worked as part of the Internet Explorer 4 beta team. His work at Discovery was among the first to take web content from page-based content to online storytelling. His company, RuleWeb Developmen...
Format:PaperbackDimensions:288 pages, 9.2 × 7.4 × 0.7 inPublished:December 15, 1998Publisher:Pearson EducationLanguage:English

The following ISBNs are associated with this title:

ISBN - 10:0201379619

ISBN - 13:9780201379617

Customer Reviews of Dynamic HTML: The HTML Developer's Guide

Reviews

Rated 5 out of 5 by from Rule rules This is a refreshingly short entry into a field where books tend to be bulky. Rule concentrates on the cross-browser issues which often dominate a Web Developer's day, and offers elegant, real-world solutions to common problems. An outstanding introduction to DHTML. You may want to use this book in conjunction with a good reference volume, though.
Date published: 2000-02-24

Extra Content

From the Author

For Whom Is This Book Intended? This book is written for the HTML developer who is trying to make the leap into Dynamic HTML and JavaScript. Let’s face it, you can’t do HTML forever, now that virtually every kid coming out of college has his or her own web page and knows HTML. You need to make the next step in web developmentand Dynamic HTML is it. Dynamic HTML: The HTML Developer’s Guide is designed for the people that do the grunt work of web development. These individuals take graphics from the art department and text from the editors and then work magic with tables to achieve the right appearance. They update Internet sites and intranet sites. Caffeine and stress are key ingredients in their lives. Their nontechnical bosses can’t seem to figure out why it’s so hard to put up a page, because "After all, the graphics and words are already done!" These bosses want a cool popout menu that they saw on the Discovery Channel site or the flying logo they saw when their kids were at the Disney site last night. This book is for the oppressed masses, who cry out for an example they can take apart and understand! It provides Dynamic HTML demos that are explained in clear, nononsense language. What Is Dynamic HTML? You’ve heard about Dynamic HTML. It’s the buzzword of the day all over the web. But what is it? Is it a series of new extensions to HTML? Is it JavaScript? VBScript? JScript? ECMAScript? Cascading Style Sheets (CSS)? In fact, Dynamic HTML is a catchall phrase for all of these technologies and the way that they work together. The version 4.0 browsers from Netscape and Microsoft that support Dynamic HTML incorporate some new HTML tags from HTML 4.0. They also support CSS and an upgraded version of JavaScript. All these elements work together to make up Dynamic HTML. Think of it this way: CSS gives you pixelperfect control of where your text and graphics go. If you want a graphic’s upperleft corner to be 100 pixels from the left side of the screen and 200 pixels from the top of the screen, you can use CSS to put it there. CSS replaces tables as the new way to lay out your page. JavaScript (and VBScript in Internet Explorer 4) are the scripting languages that help you move things around the screen or change graphics. JavaScript is what puts the "dynamic" in Dynamic HTML. Who Am I? My name is Jeff Rule, and I work at Discovery Channel Online (http://www.discovery.com), which is the online presence of the Discovery Channel cable network. Discovery is a top40 content web site developed at Bethesda, Maryland. I began working in CDROM development back in 1993 by doing CDROM projects and computerbased training (CBT), mainly in Macromedia’s Authorware and Director products. I’d also done some basic HTML. When Shockwave first emerged, however, I really got interested in the web. At Discovery I’m in charge of Dynamic HTML and other highend web multimedia development, such as Shockwave. I also look at "bleedingedge" technology, which is how I first encountered Dynamic HTML. But it’s not bleedingedge technology anymore, I promise! Companion Web Site The companion web site for this book is DHTML Demos, located at http://www.ruleweb.com/dhtml/index.html. I started this site back in September 1997 as a source of Internet Explorer 4.0 demos. Later, as I gained a better understanding of the differing document object models (DOM), I began creating Netscapecompatible demos. The site originated as a showcase for the Dynamic HTML work I was doing at Discovery Channel, allowing our editors to see some of the possibilities of Dynamic HTML and its possible applications for the stories we were working on. It later escaped to the web and now makes its home at RuleWeb, my development company. Since its inception, the site has grown substantially. Today, it is one of the more trafficked Dynamic HTML sites on the web. At the site you will find the demos referenced in this book as well as additional demos. Other users can also access the site, but cannot enter the membersonly area reserved for owners of this book. Look to this site for code, working examples, and for the latest information on the emerging field of DHTML. Philosophy of the Book I learned HTML and JavaScript by taking apart other people’s examples and then experimenting with the code until I figured out what it did. Not surprisingly, it was a timeconsuming process. When I started the DHTML Demos site, I wanted to offer lots of demonstrations that people could also take apart and understand. I created the demonstrations as much for myself as for the development community. The demos were components that I could plug into a story I was developing for Discovery, without having to write the code from scratch every time. If I needed a popout menu, for example, I already had one written. The site continued to grow and I received lots of questions about the demonstrations, but I didn’t have time to respond to even a fraction of the messages I received. This book is an attempt to explain those demonstrations in detail and take the code apart, line by line. This method will help you, the developer, to use this code in your own pages. At the same time, you will understand it enough that you can modify the code and create new scripts. If there is one thing I believe in on the web, it’s the VIEW SOURCE command. I hope this book goes even further in explaining the code you see in your View Source window. What You’ll Need to Use this Book You’ll need: An HTML editor (I prefer Allaire Homesite for PC or BBEdit for Macintosh) Netscape Communicator 4.0 or 5.0 Microsoft Internet Explorer 4.0 or 5.0 These browsers are currently the only ones in which Dynamic HTML works. 0201379619P04062001

Read from the Book

For Whom Is This Book Intended? This book is written for the HTML developer who is trying to make the leap into Dynamic HTML and JavaScript. Let's face it, you can't do HTML forever, now that virtually every kid coming out of college has his or her own web page and knows HTML. You need to make the next step in web development--and Dynamic HTML is it. Dynamic HTML: The HTML Developer's Guide is designed for the people that do the grunt work of web development. These individuals take graphics from the art department and text from the editors and then work magic with tables to achieve the right appearance. They update Internet sites and intranet sites. Caffeine and stress are key ingredients in their lives. Their nontechnical bosses can't seem to figure out why it's so hard to put up a page, because "After all, the graphics and words are already done!" These bosses want a cool pop-out menu that they saw on the Discovery Channel site or the flying logo they saw when their kids were at the Disney site last night. This book is for the oppressed masses, who cry out for an example they can take apart and understand! It provides Dynamic HTML demos that are explained in clear, no-nonsense language. What Is Dynamic HTML? You've heard about Dynamic HTML. It's the buzzword of the day all over the web. But what is it? Is it a series of new extensions to HTML? Is it JavaScript? VBScript? JScript? ECMAScript? Cascading Style Sheets (CSS)? In fact, Dynamic HTML is a catch-all phrase for all of these technologies and the way that they work together. The version 4.0 browsers from Netscape and Microsoft that support Dynamic HTML incorporate some new HTML tags from HTML 4.0. They also support CSS and an upgraded version of JavaScript. All these elements work together to make up Dynamic HTML. Think of it this way: CSS gives you pixel-perfect control of where your text and graphics go. If you want a graphic's upper-left corner to be 100 pixels from the left side of the screen and 200 pixels from the top of the screen, you can use CSS to put it there. CSS replaces tables as the new way to lay out your page. JavaScript (and VBScript in Internet Explorer 4) are the scripting languages that help you move things around the screen or change graphics. JavaScript is what puts the "dynamic" in Dynamic HTML. Who Am I? My name is Jeff Rule, and I work at Discovery Channel Online (http://www.discovery.com), which is the online presence of the Discovery Channel cable network. Discovery is a top-40 content web site developed at Bethesda, Maryland. I began working in CD-ROM development back in 1993 by doing CD-ROM projects and computer-based training (CBT), mainly in Macromedia's Authorware and Director products. I'd also done some basic HTML. When Shockwave first emerged, however, I really got interested in the web. At Discovery I'm in charge of Dynamic HTML and other high-end web multimedia development, such as Shockwave. I also look at "bleeding-edge" technology, which is how I first encountered Dynamic HTML. But it's not bleeding-edge technology anymore, I promise! Companion Web Site The companion web site for this book is DHTML Demos, located at http://www.ruleweb.com/dhtml/index.html. I started this site back in September 1997 as a source of Internet Explorer 4.0 demos. Later, as I gained a better understanding of the differing document object models (DOM), I began creating Netscape-compatible demos. The site originated as a showcase for the Dynamic HTML work I was doing at Discovery Channel, allowing our editors to see some of the possibilities of Dynamic HTML and its possible applications for the stories we were working on. It later escaped to the web and now makes its home at RuleWeb, my development company. Since its inception, the site has grown substantially. Today, it is one of the more trafficked Dynamic HTML sites on the web. At the site you will find the demos referenced in this book as well as additional demos. Other users can also access the site, but cannot enter the members-only area reserved for owners of this book. Look to this site for code, working examples, and for the latest information on the emerging field of DHTML. Philosophy of the Book I learned HTML and JavaScript by taking apart other people's examples and then experimenting with the code until I figured out what it did. Not surprisingly, it was a time-consuming process. When I started the DHTML Demos site, I wanted to offer lots of demonstrations that people could also take apart and understand. I created the demonstrations as much for myself as for the development community. The demos were components that I could plug into a story I was developing for Discovery, without having to write the code from scratch every time. If I needed a pop-out menu, for example, I already had one written. The site continued to grow and I received lots of questions about the demonstrations, but I didn't have time to respond to even a fraction of the messages I received. This book is an attempt to explain those demonstrations in detail and take the code apart, line by line. This method will help you, the developer, to use this code in your own pages. At the same time, you will understand it enough that you can modify the code and create new scripts. If there is one thing I believe in on the web, it's the VIEW SOURCE command. I hope this book goes even further in explaining the code you see in your View Source window. What You'll Need to Use this Book You'll need: An HTML editor (I prefer Allaire Homesite for PC or BBEdit for Macintosh) Netscape Communicator 4.0 or 5.0 Microsoft Internet Explorer 4.0 or 5.0 These browsers are currently the only ones in which Dynamic HTML works. 0201379619P04062001

Table of Contents



Preface.


Foreword.


1. Introduction.

The Future of Web Content.

Scripting Languages.

A Brief Introduction to JavaScript Syntax.

Other Scripting/Programming Languages.

Standards.

Desperately Seeking Standards.

Compatibility.

HTML Compatibility.

Style Sheets (CSS) Compatibility.

Scripting Language Compatibility.

Creating Compatibility.

Backward Compatibility.

Style Sheets.

HTML.

Script Versions.

Alternative Pages Using Browser Detection.

Alternative Scripts Using Object Detection.

Links.



2. The Document Object Model (DOM).

Netscape 4.0's DOM.

Internet Explorer 4.0's DOM.

W3C's DOM.

Summary.

Links.



3. Cascading Style Sheets: A Brief Introduction.

Cascading Style Sheet Support in Browsers.

Differences Between Internet Explorer 4 and Netscape 4.

Cursors in Internet Explorer 4.

Default Settings.

DIV and SPAN Tags.

Differences Between Layers and Style Sheets.

Linking DIV Tags and Style Sheets.

Placement of Style Sheets

Positioning of Elements on the Screen.

Font Definitions.

Spacing.

Margins, Padding, and Borders.

Width and Height.

Text Alignment.

Background Color and Image.

The Future: CSS2.

Media Type.

Paged Media.

Aural Media.

Summary.

Links.



4. Mouseovers.

Browser Compatibility with Mouseover Scripts.

Text Rollovers.

Graphic Rollovers.

Swapping the Image Object.

Multiple Images Displayed on Rollover.

Summary.

Links.



5. Transitions and Filters.

Transitions in Internet Explorer 4.

Underlying Technology.

Between-Page Transitions (Interpage Transitions).

Same-Page Transitions (Intrapage Transitions).

Other Resources.

Filters in Internet Explorer 4.

Underlying Technology.

Performance Issues.

Filter Application.

Transitions in Netscape.

Underlying Technology.

Horizontal Wipe.

Other Wipe Variations.

Summary.

Links.



6. Resizing Graphics.

Background.

Resizing Options.

Bulge.

Growing a Graphic to Fill the Screen.

Show and Collapse.

Disappear.

Moving While Resizing.

Technical Issues.

Browser Issues.

Performance Issues.

Practical Resizing.

Underlying Technology.

Examples.

Basic Resizing.

Bulge (Internet Explorer 4).

Move While Resizing (Internet Explorer 4).

Netscape Resizing.

Summary.



7. Pull-Down and Pop-Out Menus 95

Background.

Technical Limits.

Underlying Technology.

Examples.

Pull-Down Menu.

Pop-Out Menu.

Summary.

Links.



8. Drag and Drop.

Background.

Shopping.

Children's Games.

Test Taking.

Controls and Interface Design.

Technical Limits.

Underlying Technology.

Examples.

Netscape 4.

Internet Explorer 4.

Summary.

Links.



9. Animations.

Background.

Types of Animations.

Technical Limits.

Underlying Technology.

Examples.

Netscape 4 Point-to-Point Animation.

Internet Explorer 4 Point-to-Point Animation.

Cross-Platform Path Animation.

Summary.

Links.



10. Timelines and Sequencing.

Background.

Underlying Technology.

Cross-Browser JavaScript.

Active X and VBScript.

Performance Issues.

Examples.

JavaScript.

Active X and VBScript.

Summary.

Links.



11. Internet Explorer 4's Multimedia Controls.

Background.

Underlying Technology.

Examples.

The Sequencer Control.

The Sprite Control.

The Structured Graphics Control.

The Path Control.

Summary.

Links.



12. Fonts.

Background.

Underlying Technology.

Netscape.

Creating the PFR File.

Preparing the Server.

Formatting Style Sheets and the FONT Tag.

Formatting with Cascading Style Sheets.

Notes on Netscape 4's Font Handling.

Internet Explorer.

WEFT: The Encoding Tool.

Other Issues.

Compatibility Between Netscape 4 and Internet

Explorer 4.

W3C Standards.

Summary.

Links.



13. Creating Channels.

Background.

Evolution of Push Technology.

Channel-Based Push Technology.

Netscape Channels.

Netcaster.

The Webtop.

Defining Web Pages as Channels.

Creating a Channel via Netscape's Wizard.

Microsoft Channels.

Underlying Technology.

Active Channel Content.

Summary.

Links.



14. The Version 5 Browsers.

Background.

Internet Explorer 5.

Netscape Communicator 5.

Technical Limits and Underlying Technology.

Examples.

Dynamic HTML Behaviors.

Dynamic Properties.

Summary.

Links.



15. The Future.

Web Designers.

Allaire Cold Fusion (Sun and Windows NT).

Macromedia Backstage (Windows NT).

XML: Data Just the Way You Want It.

CSS2 and XSL: Giving a Backbone to the Data.

Web Users.

Web Lifestyle.

Services.

Technology.

Balkanization.

Business Will Keep Us Together.

Summary.

Links.



Appendix A. Dynamic HTML Authoring Tools.

mBed Interactor.

Players.

Publishing.

Incorporating Mbedlets into a Web Page.

Conclusion.

Macromedia Dreamweaver.

Palettes.

RoundTrip HTML Editing.



Glossary.


Index. 0201379619T04062001

From Our Editors

The World Wide Web is fast becoming the most valuable information resource available. Dynamic HTML allows users to modify web pages in response to users’ input, allowing features such as pull-down menus, drag and drop and animation. This invaluable guide will help developers ease the learning curve with its learn-by-example approach.