(1) (2) (3) (4) (5) (6)

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.