MS FrontPage

DHTML Effects

DHTML, the engine behind all the activity you're going to learn how to create in this tutorial, is a combination of two main ingredients: HTML (the building block of almost every Web page), and JavaScript (a nimble coding language that can manipulate the elements on a Web page).

You can use DHTML to do things like have text and pictures drop into place, slide on and off a page, or change the font in some text. You can animate a variety of other items, like buttons, page banners, hit counters, and even forms.

All DHTML effects consist of the following:

  • An event occurs, like the click of a mouse or a page loading in a browser. FrontPage lets you pick events from a list of keywords, all of which begin with the word "on." For example, onpageload means "when a page loads," and onmouseover means "when a mouse passes over" an element.

  • This event triggers an action, like a word flying onto the screen or a picture changing.

  • The event and action both work together to manipulate a particular HTML tag.

An example DHTML effect would be something like a mouse clicks (onclick event) on a picture (contained within the <img> tag) and the picture moves off screen (action).

DHTML Tools

Where do you start? FrontPage has two main control centers for all this activity: the DHTML Effects toolbar (for basic effects) and the Behaviors task pane (for more complex functions).

Why aren't all these controls in one location? The DHTML Effects toolbar is a relic from earlier versions of FrontPage. It used to be the only way to create interactive behaviors until Microsoft introduced the Behaviors task pane in FrontPage 2003an addition that's brought a lot more power and professionalism to FrontPage. The Behaviors task pane lets you create effects that are light years beyond the capabilities of the DHTML toolbar. But the toolbar remains maybe to show you how good you've got it nowadays (and for those who want to edit effects they created using previous versions of FrontPage).

by BrainBellupdated
Advertisement: