Chapter17.Understanding DHTML and the Timeline
Chapter 17. Understanding DHTML and the TimelineIN THIS CHAPTER
As you know, HTML presents data within a browser window in a multitude of shapes, sizes, and colors, and provides extra features such as forms, hyperlinks, and the ability to work with images. But most computer programming languages have more functionality than HTML does. They have a powerful range of commands and can produce far more spectacular effects than HTML can alone. One such language is JavaScript. JavaScript was developed with the Internet in mind. As you saw in Chapter 10, "Using Dreamweaver Behaviors," JavaScript affords us the ability to create pop-up messages, calculate values based on user input, create images that change color when the user's cursor rolls over them, and more. Beyond these simple features however, web developers want a way to animate HTML elements on the screen, show or hide elements from view, and even change the physical style characteristics of HTML elements dynamically. But these more advanced features can't be accomplished with JavaScript alone. Instead, we must use a combination of technologies to achieve this goal. This is where DHTML comes in. DHTML, or Dynamic HTML, is the harmonious union of HTML, CSS, and JavaScript. With DHTML, we can alter the physical style characteristics of elements in an HTML page while it is being displayed. We can create animated objects, and we can show or hide objects. Take a text box and a button on an HTML page as an example; the text box and button alone, represented by the <input type="text"> and <input type="button"> tags are just plain old HTML. But suppose that you wanted to change the physical characteristics of the text box when the user clicks the button. Perhaps you want to change the background color. To do this, we'd simply attach a JavaScript onClick event to the button that calls a function residing in the <head> tag of our HTML page. The JavaScript function would be responsible for changing the background color of the text box using CSS on the fly. That's DHTML: JavaScript using CSS to change the physical characteristics of an HTML element (in this case, the background color of the text box). But it doesn't have to be that simple. For instance, you might decide to animate textmaybe a marquee at the top of the page that displays sports scores to users when they visit your page. This is another great example of DHTML. In this case, when the page loads, the onLoad event is fired, a function is called, and code gets executed, written in such a way that text within a layer is animated from the left side of the screen to the right. Although this example is much more complex than the first example, it's just another example of what's possible with DHTML. Of course, Dreamweaver provides numerous features for working with animations such as these. Throughout this chapter, we'll focus on the tools used for working with DHTML and, more specifically, animation in Dreamweaver. As you'll learn, the timeline, like timelines in other Macromedia programs, is intuitive, flexible, and can provide a rich user experience for your users. As you've found in the other chapters in this book, you can work with the examples in this chapter by downloading the files from www.dreamweaverunleashed.com. You'll want to save the files for Chapter 17 in an easy-to-find location. I'll place mine in C:\Dorknozzle\Chapter17. |
EAN: 2147483647
Pages: 237