DHTML Animation in
Dreamweaver 3.0
Home > Build
> Software > Dreamweaver
by
Don Herion
(1) (2)
(3) (4)
(5) (6)
(7)
Do
I have to buy Flash to animate a web page? No, not exactly. The good news is Dreamweaver
3.0 incorporates DHTML (Dynamic Hyper Text Markup Language), the key word being
Dynamic. Introduced several years ago DHTML is a merging of HTML, JavaScript,
Style Sheets, absolute positioning, various plug-ins and DOM technologies.
Now
for the bad news. DHTML content only works on browsers 4.0 and above. But fortunately
that is probably a majority of browsers today. My advice, do not use DHTML on
your main page. Place any DHTML content deeper inside your Web site.
One
more point, DHTML in Dreamweaver is not Flash or Live Motion. It is somewhat limited
to non-JavaScript programmers.
Tic Tac Toe
For
this tutorial I have created a simple game of tic-tac-toe. It will involve simple
keyframe based animation and the ability to reposition images on the screen. In
this case, Xs and Os. When the page first appears the board, a X and a O are visible.
The words 'tic-tac-toe' slide into view. You then play the game dragging Xs and
Os into place until the game is resolved. After a game is complete you press the
reset button and the Xs and Os clear the board.
Creating
the Game Pieces
The first step is to design the board, the X and O pieces,
a white matte image and these words, 'tic-', tac-', and 'toe.' I created them
in Photoshop and saved them as .gif files. Of course you can use any graphic program
to create the images.
 |
| My game board - approx. 300 x 300 pixels |
There is also a white graphic about 68 x 36.
