Register your product to gain access to bonus material or receive a coupon.
Dynamic HTML: The HTML Developer's Guide
- By Jeff Rule
- Published Dec 2, 1998 by Addison-Wesley Professional.
Book
- Sorry, this book is no longer in print.
Description
- Copyright 1999
- Dimensions: 7-3/8" x 9-1/4"
- Edition: 1st
- Book
- ISBN-10: 0-201-37961-9
- ISBN-13: 978-0-201-37961-7
If you're tired of programming manuals that start with trivial details and examples and illustrate only the most basic demos, then this book is for you. In Dynamic HTML: The HTML Developer's Guide you will learn DHTML the same way you probably learned HTML--by looking at other people's source code.
Because scripting with DHTML is much more complex than with regular HTML, many web developers are hesitant to begin learning this vital technology. Dynamic HTML is a valuable resource to help you master this important new skill. Both a comprehensive reference guide and a clear tutorial, this book explains the principles behind DHTML and, using a learn-by-example approach, enables you to acquire techniques for effective DHTML scripting. Inspired by the author's web-based DHTML Demos, this book contains solid examples of DHTML that can be taken apart and plugged into existing web pages for dynamic effects.
Among its key features, Dynamic HTML offers:
- Complete, easy to understand coverage of Cascading Style Sheets (CSS) and Document Object Models (DOM) for both Microsoft and Netscape versions of DHTML
- Real-world examples that can be plugged in as is, including animations, drag and drop, timelines, pull-down menus, pop-out menus, transitions, and filters, for creating instant dynamic effects on existing web pages
- A unique, learn-by-example approach that explains demonstrations in detail, taking the code apart line by line to illustrate the script in action
- Coverage of Internet Explorer 5 and Netscape 5
- The perfect blend of conversational tone, solid technical explanations, personal insights, and valuable exercises that lighten the task of learning DHTML essentials
The companion web site for this book, which includes sample code, demos referenced in the book, and working examples, is located at http://www.ruleweb.com/dhtml/index.html
0201379619B04062001
Sample Content
Downloadable Sample Chapter
Chapter 7: Pull-Down and Pop-Out Menus
What we'll cover
- Technical Limits of pull-down and pop-out menus
- Underlying technology
- Pull-down menu examples
- Pop-out menu examples
Background
Web designers and developers have been waiting for pull-down and pop-out menus to appear on the web for years. Traditionally, they have had to deal with pull-down menus that existed as part of forms. These text menus have a number of design problems. First, they are rendered as text, so they size differently in different browsers and on different operating system. Nothing drives designers crazy like inconsistent layout. Second, the text menus look terrible from a designer's point of view. These problems have limited their use as navigational structures on the web.
Designers and web developers have really been looking for pull-down menus that are customizable and can be constructed from graphic elements. Users are very familiar with pull-down menus. Ever since the Macintosh computer came onto the scene in 1984, the pull-down menu has defined how hierarchical information is presented to the user. Until now, this familiarity has not extended to the web. Instead, navigational structure has been handled in many different ways. The most popular method was the left-side navigation bar that was first used by C|Net back when Netscape 1.2 initially came out. While this navigation structure has proved very popular, it provides no way to present deeper levels of information without loading a new page. Pull-down menus add an extra level of depth to sites and make this information available to the user without having to present it on a new page.
Users who have used pull-down menus on Macintosh, Windows 3.1, or Windows 95 systems feel comfortable with this navigation structure. This familiarity can be used to help novice users better navigate your site. In addition to providing the same functionality, the designer can use JavaScript to check the user's operating system and present a graphical design that is also familiar to the user. Having a Macintosh interface or a Windows 95 interface will make your site all the more familiar and accessible to the visitor.
Many sites make use of pop-out menus on their main pages. IBM (http://www.ibm.com), for example, uses a hierarchical menu to give a broad overview of its offerings. At Discovery, we use pop-out menus on the home page for Internet Explorer 4. One problem that we have at Discovery, and that all large web sites share, is exposing the depth of content found on the first page. Home pages for sites try to be both "magazine cover" and "table of contents" all on the same page. At Discovery, we use the pop-out menus to show many of our big stories from the last several weeks. This setup "drives" users down into the site and immerses them in our environment. Holding the user's attention and getting him or her to look at the full range of your product offerings represents one of the greatest challenges to today's web designers. Pop-out and pull-down menus are part of the solution.
Pop-Out MenusThese menus pop out from the side of the screen, almost always the left side. They are often represented by a tab that remains the only part showing until it is clicked on. The full menu is then revealed. Pop-out menus can be activated by several events, such as mouseovers, mousedowns, or onclicks. They can animate from the side of the screen or simply appear in their new locations. The pop-out menus illustrated in this chapter simply appear.
I'm not convinced that animation adds to the functionality. If you would like to add animation, however, you can use the cross-platform scripts in Chapter 9.
Pull-Down MenusPull-down menus are found in virtually all modern graphical operating systems. They are typically aligned across the top of the screen. When clicked on, they drop down to reveal more options.
Technical Limits
Menus work equally well in both Netscape and Internet Explorer browsers. You should not experience any technical problems.
The most important problem you will encounter derives from the visibility property of Cascading Style Sheet Positioning (CSS-P). Netscape uses the nonstandard Hide and Show parameters to determine visibility. Internet Explorer uses the W3C standard Visible and Hidden parameters. The scripts provided in this chapter work around this issue by using alternative scripts for the two browsers.
Underlying Technology
Pull-down and pop-out menus are built around positioning and the event model. When one graphic is clicked on, then another appears. When the graphic is clicked on a second time, it disappears. A variable is set to 1 or 0 each time the image is clicked. This tactic keeps track of whether the menu should be hidden or shown.
Examples
The two examples in the remainder of this chapter are very similar; their only real difference is in direction.
This example simulates a pull-down menu from the Discovery Channel Online site (Figure 7-1). When you click on the menu bar, a selection of choices from the Discovery site is revealed. Listing 7-1 gives the code for this simulation (located at http://www.ruleweb.com/dhtml/Pull_Down_Menu/xplatform.html).
Listing 7-1. Pull-Down Menu Simulation
1. <html>
2. <head>
3. <title>Pulldown Menu</title>
4. <script language="JavaScript1.2">
5. if (document.layers) {n=1;ie=0}
6. if (document.all) {n=0;ie=1}
7. function init() {
8. if (n) tab = document.tabDiv
9. if (n) poptext = document.poptextDiv
10. if (ie) tab = tabDiv.style
11. if (ie) poptext = poptextDiv.style
12. }
13. var tabShow=1;
14. //Hide-Show Layer
15. function hidepoptext() {
16. if (tabShow == 0) {
17. if (n) {
18. tab.visibility = "show";
19. poptext.visibility = "hide";
20. tabShow = 1;
21. return;
22. }
23.
24. if (ie) {
25. tab.visibility = "visible";
26. poptext.visibility = "hidden";
27. tabShow = 1;
28. return;
29. }
30. }
31. if (tabShow == 1) {
32. if (n) {
33. tab.visibility = "show";
34. poptext.visibility = "show";
35. tabShow = 0;
36. }
37. if (ie) {
38. tab.visibility = "visible";
39. poptext.visibility = "visible";
40. tabShow = 0;
41. }
42. }
43. }
44. </script>
45. <style>
46. <!--
47. #tabdiv {
48. position:absolute;
49. top:0px;
50. left:0px;
51. z-index:2;
52. visibility:show;
53. }
54. #poptextdiv {
55. visibility:hide;
56. visibility:hidden;
57. position:absolute;
58. width:200px;
59. top:15px;
60. left:0px;
61. z-index:0;
62. color:white;
63. border-color:black;
64. border-width:2px;
65. background-color:black;
66. color:black;
67. padding:10 5 10 5;
68. z-index:1;
69. }
70. #maintext {
71. position:absolute;
72. top:10px;
73. left:240px;
74. width:470px;
75. z-index:0;
76. }-->
77. </style>
78. </head>
79. <body onLoad="init()" bgcolor="White">
80. <div ID=tabDiv>
81. <a href="javascript:hidepoptext();"><img
src="disnavbar.gif" width=200 height=25
alt="" border="0"></a></div>
82. <div ID=poptextDiv>
83.
Table of Contents
Preface.
Foreword.
1. Introduction.
The Future of Web Content.
Scripting Languages.
A Brief Introduction to JavaScript Syntax.
Other Scripting/Programming Languages.
Standards.
Desperately Seeking Standards.
Compatibility.
HTML Compatibility.
Style Sheets (CSS) Compatibility.
Scripting Language Compatibility.
Creating Compatibility.
Backward Compatibility.
Style Sheets.
HTML.
Script Versions.
Alternative Pages Using Browser Detection.
Alternative Scripts Using Object Detection.
Links.
2. The Document Object Model (DOM).
Netscape 4.0's DOM.
Internet Explorer 4.0's DOM.
W3C's DOM.
Summary.
Links.
3. Cascading Style Sheets: A Brief Introduction.
Cascading Style Sheet Support in Browsers.
Differences Between Internet Explorer 4 and Netscape 4.
Cursors in Internet Explorer 4.
Default Settings.
DIV and SPAN Tags.
Differences Between Layers and Style Sheets.
Linking DIV Tags and Style Sheets.
Placement of Style Sheets
Positioning of Elements on the Screen.
Font Definitions.
Spacing.
Margins, Padding, and Borders.
Width and Height.
Text Alignment.
Background Color and Image.
The Future: CSS2.
Media Type.
Paged Media.
Aural Media.
Summary.
Links.
4. Mouseovers.
Browser Compatibility with Mouseover Scripts.
Text Rollovers.
Graphic Rollovers.
Swapping the Image Object.
Multiple Images Displayed on Rollover.
Summary.
Links.
5. Transitions and Filters.
Transitions in Internet Explorer 4.
Underlying Technology.
Between-Page Transitions (Interpage Transitions).
Same-Page Transitions (Intrapage Transitions).
Other Resources.
Filters in Internet Explorer 4.
Underlying Technology.
Performance Issues.
Filter Application.
Transitions in Netscape.
Underlying Technology.
Horizontal Wipe.
Other Wipe Variations.
Summary.
Links.
6. Resizing Graphics.
Background.
Resizing Options.
Bulge.
Growing a Graphic to Fill the Screen.
Show and Collapse.
Disappear.
Moving While Resizing.
Technical Issues.
Browser Issues.
Performance Issues.
Practical Resizing.
Underlying Technology.
Examples.
Basic Resizing.
Bulge (Internet Explorer 4).
Move While Resizing (Internet Explorer 4).
Netscape Resizing.
Summary.
7. Pull-Down and Pop-Out Menus 95
Background.
Technical Limits.
Underlying Technology.
Examples.
Pull-Down Menu.
Pop-Out Menu.
Summary.
Links.
8. Drag and Drop.
Background.
Shopping.
Children's Games.
Test Taking.
Controls and Interface Design.
Technical Limits.
Underlying Technology.
Examples.
Netscape 4.
Internet Explorer 4.
Summary.
Links.
9. Animations.
Background.
Types of Animations.
Technical Limits.
Underlying Technology.
Examples.
Netscape 4 Point-to-Point Animation.
Internet Explorer 4 Point-to-Point Animation.
Cross-Platform Path Animation.
Summary.
Links.
10. Timelines and Sequencing.
Background.
Underlying Technology.
Cross-Browser JavaScript.
Active X and VBScript.
Performance Issues.
Examples.
JavaScript.
Active X and VBScript.
Summary.
Links.
11. Internet Explorer 4's Multimedia Controls.
Background.
Underlying Technology.
Examples.
The Sequencer Control.
The Sprite Control.
The Structured Graphics Control.
The Path Control.
Summary.
Links.
12. Fonts.
Background.
Underlying Technology.
Netscape.
Creating the PFR File.
Preparing the Server.
Formatting Style Sheets and the FONT Tag.
Formatting with Cascading Style Sheets.
Notes on Netscape 4's Font Handling.
Internet Explorer.
WEFT: The Encoding Tool.
Other Issues.
Compatibility Between Netscape 4 and Internet
Explorer 4.
W3C Standards.
Summary.
Links.
13. Creating Channels.
Background.
Evolution of Push Technology.
Channel-Based Push Technology.
Netscape Channels.
Netcaster.
The Webtop.
Defining Web Pages as Channels.
Creating a Channel via Netscape's Wizard.
Microsoft Channels.
Underlying Technology.
Active Channel Content.
Summary.
Links.
14. The Version 5 Browsers.
Background.
Internet Explorer 5.
Netscape Communicator 5.
Technical Limits and Underlying Technology.
Examples.
Dynamic HTML Behaviors.
Dynamic Properties.
Summary.
Links.
15. The Future.
Web Designers.
Allaire Cold Fusion (Sun and Windows NT).
Macromedia Backstage (Windows NT).
XML: Data Just the Way You Want It.
CSS2 and XSL: Giving a Backbone to the Data.
Web Users.
Web Lifestyle.
Services.
Technology.
Balkanization.
Business Will Keep Us Together.
Summary.
Links.
Appendix A. Dynamic HTML Authoring Tools.
mBed Interactor.
Players.
Publishing.
Incorporating Mbedlets into a Web Page.
Conclusion.
Macromedia Dreamweaver.
Palettes.
RoundTrip HTML Editing.
Glossary.
Index. 0201379619T04062001
Preface
For Whom Is This Book Intended?
This book is written for the HTML developer who is trying to make the leap into Dynamic HTML and JavaScript. Let's face it, you can't do HTML forever, now that virtually every kid coming out of college has his or her own web page and knows HTML. You need to make the next step in web development--and Dynamic HTML is it.
Dynamic HTML: The HTML Developer's Guide is designed for the people that do the grunt work of web development. These individuals take graphics from the art department and text from the editors and then work magic with tables to achieve the right appearance. They update Internet sites and intranet sites. Caffeine and stress are key ingredients in their lives. Their nontechnical bosses can't seem to figure out why it's so hard to put up a page, because "After all, the graphics and words are already done!" These bosses want a cool pop-out menu that they saw on the Discovery Channel site or the flying logo they saw when their kids were at the Disney site last night.
This book is for the oppressed masses, who cry out for an example they can take apart and understand! It provides Dynamic HTML demos that are explained in clear, no-nonsense language.
What Is Dynamic HTML?
You've heard about Dynamic HTML. It's the buzzword of the day all over the web. But what is it? Is it a series of new extensions to HTML? Is it JavaScript? VBScript? JScript? ECMAScript? Cascading Style Sheets (CSS)? In fact, Dynamic HTML is a catch-all phrase for all of these technologies and the way that they work together.
The version 4.0 browsers from Netscape and Microsoft that support Dynamic HTML incorporate some new HTML tags from HTML 4.0. They also support CSS and an upgraded version of JavaScript. All these elements work together to make up Dynamic HTML. Think of it this way: CSS gives you pixel-perfect control of where your text and graphics go. If you want a graphic's upper-left corner to be 100 pixels from the left side of the screen and 200 pixels from the top of the screen, you can use CSS to put it there. CSS replaces tables as the new way to lay out your page. JavaScript (and VBScript in Internet Explorer 4) are the scripting languages that help you move things around the screen or change graphics. JavaScript is what puts the "dynamic" in Dynamic HTML.
Who Am I?
My name is Jeff Rule, and I work at Discovery Channel Online (http://www.discovery.com), which is the online presence of the Discovery Channel cable network. Discovery is a top-40 content web site developed at Bethesda, Maryland. I began working in CD-ROM development back in 1993 by doing CD-ROM projects and computer-based training (CBT), mainly in Macromedia's Authorware and Director products. I'd also done some basic HTML. When Shockwave first emerged, however, I really got interested in the web.
At Discovery I'm in charge of Dynamic HTML and other high-end web multimedia development, such as Shockwave. I also look at "bleeding-edge" technology, which is how I first encountered Dynamic HTML. But it's not bleeding-edge technology anymore, I promise!
Companion Web Site
The companion web site for this book is DHTML Demos, located at http://www.ruleweb.com/dhtml/index.html. I started this site back in September 1997 as a source of Internet Explorer 4.0 demos. Later, as I gained a better understanding of the differing document object models (DOM), I began creating Netscape-compatible demos. The site originated as a showcase for the Dynamic HTML work I was doing at Discovery Channel, allowing our editors to see some of the possibilities of Dynamic HTML and its possible applications for the stories we were working on. It later escaped to the web and now makes its home at RuleWeb, my development company.
Since its inception, the site has grown substantially. Today, it is one of the more trafficked Dynamic HTML sites on the web. At the site you will find the demos referenced in this book as well as additional demos. Other users can also access the site, but cannot enter the members-only area reserved for owners of this book. Look to this site for code, working examples, and for the latest information on the emerging field of DHTML.
Philosophy of the Book
I learned HTML and JavaScript by taking apart other people's examples and then experimenting with the code until I figured out what it did. Not surprisingly, it was a time-consuming process. When I started the DHTML Demos site, I wanted to offer lots of demonstrations that people could also take apart and understand. I created the demonstrations as much for myself as for the development community. The demos were components that I could plug into a story I was developing for Discovery, without having to write the code from scratch every time. If I needed a pop-out menu, for example, I already had one written.
The site continued to grow and I received lots of questions about the demonstrations, but I didn't have time to respond to even a fraction of the messages I received. This book is an attempt to explain those demonstrations in detail and take the code apart, line by line. This method will help you, the developer, to use this code in your own pages. At the same time, you will understand it enough that you can modify the code and create new scripts.
If there is one thing I believe in on the web, it's the VIEW SOURCE command. I hope this book goes even further in explaining the code you see in your View Source window.
What You'll Need to Use this Book
You'll need:
- An HTML editor (I prefer Allaire Homesite for PC or BBEdit for Macintosh)
- Netscape Communicator 4.0 or 5.0
- Microsoft Internet Explorer 4.0 or 5.0
These browsers are currently the only ones in which Dynamic HTML works.
0201379619P04062001
More Information
Other Things You Might Like
- eBook $30.39