A Complete Guide to Web Design

442 Chapter 24 – Introduction to DHTML

DHTML Tools

Web Design in a Nutshell, eMatter Edition

It is beyond the scope of this book to provide working details of WYSIWIG

DHTML tools. Each of these tools have their own pros and cons. Commercial tools

with full DHTML support are likely to provide a more robust implementation and

better support to users. However, these software packages require a larger invest-

ment. If you only want simple animations or style changes, a shareware tool may

be the best way for you to go.

Luckily, most web authoring tools are available for free download over the

Internet on a trial basis so you can experiment and choose the one that suits your

needs. Please remember to register and pay for any shareware you continue using

after your trial period. The fee is usually nominal and goes a long way toward

improving the next version of the software and supporting you, the user.

WYSIWYG DHTML tools differ greatly in their operation. They have to allow the

user to view and manipulate an animation or style change in a graphical way. You

can create animations by dragging objects in the editor, thus eliminating the need

to program Javascript that counts pixels, tracks X/Y coordinates, counts, and

loops. Dreamweaver, for instance allows you attach a timeline, behavior, or both

to a dynamic object or layer.

Figure 24-1 is a screenshot of Dreamweaver’s timeline interface. The numbers on

the top of the window represent frames or time. The numbers going down the

left-hand side represent layers. According to this timeline, Layer 1 appears as the

page loads. Layer 2 appears on frame 10, less than a second after the animation

starts. This animation is set to run at 15 fps (frames per second) as indicated by

the fps box at the top of the screen. The red line going down through the center

of both layers and the number 14 at the top of the timeline indicates that frame 14

is being viewed within the editor.

Advantages of WYSIWYG DHTML Tools

• There is a shorter learning curve for WYSIWYG editors compared to hand cod-
  ing DHTML.Because DHTML is a combination of HTML, JavaScript, Cascad-
  ing Style Sheets, and DOM, it has a steep learning curve. An editor hides the
  complexities of DHTML and allows you to manipulate objects through a time-
  line or other graphic interface.

Figure 24-1: Dreamweaver’s timeline WYSIWYG interface