Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • Tell Us What You Think!
  • Put Your HTML Page Online Today
  • I. Your First Web Page
  • Hour 1. Understanding HTML and XML
  • Hour 2. Create a Web Page Right Now
  • Hour 3. Linking to Other Web Pages
  • Hour 4. Publishing Your HTML Pages
  • II. Web Page Text
  • Hour 5. Text Alignment and Lists
  • Hour 6. Text Formatting and Font Control
  • Hour 7. Email Links and Links Within a Page
  • Hour 8. Creating HTML Forms
  • III. Web Page Graphics
  • Hour 9. Creating Your Own Web Page Graphics
  • Hour 10. Putting Graphics on a Web Page
  • Hour 11. Custom Backgrounds and Colors
  • Hour 12. Creating Animated Graphics
  • IV. Web Page Design
  • Hour 13. Page Design and Layout
  • Hour 14. Graphical Links and Imagemaps
  • Hour 15. Advanced Layout with Tables
  • Hour 16. Using Style Sheets
  • V. Dynamic Web Pages
  • Hour 17. Embedding Multimedia in Web Pages
  • Hour 18. Interactive Pages with Applets and ActiveX
  • Hour 19. Web Page Scripting for Non-Programmers
  • Hour 20. Setting Pages in Motion with Dynamic HTML
    • Learning How to Fly
    • Dividing a Web Page into Layers
    • Offering Alternate Content in Plain HTML
    • Being Compatible with Incompatible Browsers
    • Moving a Layer Around with JavaScript
    • Interactive Layer Animation
    • Summary
    • Q&A
    • Workshop
  • VI. Building a Web Site
  • Hour 21. Multipage Layout with Frames
  • Hour 22. Organizing and Managing a Web Site
  • Hour 23. Helping People Find Your Web Pages
  • Hour 24. Planning for the Future of HTML
  • VII. Appendixes
  • A. Readers' Most Frequently Asked Questions
  • B. HTML Learning Resources on the Internet
  • C. Complete HTML 4 Quick Reference
  • D. HTML Character Entities

Learning How to Fly

For the first part of this hour, your noble quest will be to make some text "fly in" from the edge of a page when that page first comes up in the browser window. Just to make the quest more worthy of pursuit, you'd better make the text slide diagonally, instead of left to right. Naturally, what you really want (and shall no doubt soon gain) is a general-purpose script that you can use to slide any text or graphics any way you want.

While you're at it, why not go wild and ask for a script that can slip things underneath the edge of other things, or slide one layer of text and graphics behind or in front of any number of other layers?

Figures 20.1 and 20.2 are snapshots of a Dynamic HTML Web page with flying text. This is the xyzfiles.htm document you were just instructed to download from the 24-Hour HTML Café, so you may want to look at it on your computer screen now. See how the text glides in from behind the file folders as soon as you pull up the page? Pretty cool, huh?

Figure 20.1 Dynamic HTML lets you animate overlapping layers of text and graphics. This text is emerging from behind some images.

Figure 20.2 The text that was moving in Figure 20.1 has settled into place and stopped.

To achieve the effect shown in Figures 20.1 and 20.2, your HTML and JavaScript code needs to do all of the following:

1. Check to make sure that the user's Web browser can handle Dynamic HTML and provide some alternative content if it can't.
2. Define and name the layer containing the text; hide it out of sight beyond the edge of the page.
3. Define and name the layers that contain the file tab images. (Each tab is actually assigned its own layer because later in this hour they are all animated separately.)
4. Animate the text layer sliding onto the page.

Figure 20.3 shows the HTML that does all these things. The following sections explain how each of these four tasks is accomplished.

Figure 20.3 This is the HTML for the page in Figures 20.1 and 20.2. The JavaScript that does the animation is in a separate file (see Figure 20.6), named slide.js.

Share This