DHTML and CSS for the World Wide Web : Visual QuickStart Guide

DHTML and CSS for the World Wide Web : Visual QuickStart Guide

by Jason Cranford Teague, Nancy Davis (Editor)

Paperback(Older Edition)



Add dynamic interactivity to your Web site with DHTML and Cascading Style Sheets!

  • Targeted to designers and content creators, not just programmers.
  • Visual, task-based format the ideal way to get up and running with DHTML.

This revised and expanded second edition is up-to-date on the current Web standards and browsers, and includes all new coverage of using DHTML to get information about the browser environment and adding multimedia to a site, as well as new basic and advanced dynamic techniques, such as making objects appear and disappear, moving objects in 3D, and adding dynamic content. This edition offers full cross-platform and cross-browser coverage. This book does not focus on the more complex aspects of DHTML, but focuses on practical examples of what really works with DHTML and CSS, making it useful for beginners just starting out with DHTML, as well as professional developers looking for a quick reference.

Product Details

ISBN-13: 9780201730845
Publisher: Peachpit Press
Publication date: 05/08/2001
Series: Visual QuickStart Guide Series
Edition description: Older Edition
Pages: 618
Product dimensions: 7.00(w) x 9.10(h) x 1.20(d)

About the Author

Jason Cranford Teague is a Senior Information Architect for Lante and has designed Web sites for Virgin, WebMD, Coca-Cola, CNN, Bell South, and DuPont. He has written for Macworld, Adobe, CNet,Tripod, and the London newspaper The Independent. He is the author of the previous edition of this book.

Read an Excerpt

Excerpt from

Chapter 20: Understanding the Dynamic Web

...A line is defined by two points; call them A and B. The direct path between these two points is a line. All you can do with a line is travel straight from point A to point B, following a linear path without deviation or interruption. Most media that communicate information are linear. You may be able to fast-forward through a video or flip through a book, but these media are best suited for presenting ideas in a linear order that is set by the author.

Human beings, however, tend to reason in far more chaotic, intricate, and cryptic ways than mere lines can ever describe. We learn by exploring, searching, and finding, by making mistakes and trying again. We often learn completely by accident. We rarely think in a straight line; we think dynamically (Figure 20.1).

The Web has already begun to change the way we look at information and how we structure knowledge. Despite the great leap forward that hypertext presents, we still have a way to go before mastering this new media. Before we can take the next step, the Web must become far more dynamic.

In this chapter, I'll introduce some of the issues you need to consider when designing a dynamic Web site. This information prepares you for Chapter 21, which shows you how to define, design, and build a dynamic Web site.

What Makes a Web Site Dynamic? Dynamic can mean many things, and the meaning varies depending on whom you ask (and maybe even on when you ask them). The term can be applied liberally to mean animation on the screen or multimedia.

The Web itself is a highly dynamic medium through the use of hypertext. With hypertext, Web designers can link information and facilitate a more natural human learning environment. But with CSS, JavaScript, and the Document Object Model (DOM), designers can make a dynamic Web site.

Most Web sites today are relatively static. Once a Web page loads, very little on it changes. DHTML lets Web designers transform their designs by creating Web pages that adapt and change to meet visitors' needs as they explore the page. A dynamic Web page should meet one or more of the following criteria (Figure 20.2):

  • Interactivity. A dynamic Web site should adapt and react to the visitor's actions as quickly as possible.
  • Synchronicity. A dynamic Web site should bring together relevant information and activities from a variety of sourceseither directly or through linking-with a minimal amount of searching on the visitor's part.
  • Flexibility. A dynamic Web site should give the visitor a variety of ways to find information or accomplish tasks so that they can choose the method that best suits their needs.
  • Adaptability. A dynamic Web site adjusts to cater to individual visitors needs. Sometimes, this adjustment is made on the server through customization of content, but much can be done by Web designers to accommodate visitors without requiring them to load a new Web page.
  • Activity. A dynamic Web site uses motion and sound to draw attention to changes on the screen.

    What Is Hypertext?

    Many people confuse the term hypertext with navigation links. This mistake is not hard to make, because on the Web, hypertext and navigation links are both created with the same HTML code: . . . . But navigation links are what you use to move from topic to topic in a linear fashion on the Web. Hypertext, on the other hand, allows you to click a word, a phrase, or an image in a Web page and receive a more detailed explanation of that thing. In theory, hypertext allows a single page to include an infinite amount of information (Figures 20.3 and 20.4).

    In practice, including infinite information is not feasible, but you can include a great deal of information for the visitor to explore. Authors (the ones who provide the content) control what is and what is not referenced through a hypertext link, and they have to consider every link they create.

    The Web designer has two goals: to help visitors find the information they are looking for as quickly and efficiently as possible, and to enable visitors to explore, define, and discuss that information through hypertext.

    Rather than being a medium for discoursesuch as a book, through which one person speaks to many people-the best Web sites use the Web as a medium for intercourse (no, I'm not talking about the porn sites). Using the Web, many people can learn from and speak to one another Otherwise, what is the point of the Web? Conversation, video, audio, and text can all be provided on the Web but can be provided better via telephone, TV, radio, and magazines.

    Through hypertext, the Web can break the mold of linear thought and work with natural learning processes. But this potential will remain only potential until the people who design for the Web use hypertext's unique features.

  • Direct, don't dictate. The point of a Web site is to allow visitors to move freely within the content. As the author and designer, you want to direct visitors to the information you want them to see but simultaneously allow them to follow their own paths. In terms of what you are communicating to your audience, the links that you do or do not include in a Web page are as important as the words and graphics you put there. Think of yourself as a guide, not a tyrant.

    Dynamic by Design

    People probably are not coming to your Web site to see cool special effects; they are coming to your site for information. Your design, dynamic or not, needs to support their information needs. But a dynamic Web site, if properly designed, is always better than a static one.

    Here are some pointers to keep in mind while designing your dynamic Web site:

  • Keep it simple. For many people, dynamic content means added complexity-more options, more functions, more to learn, and more to remember. Generally speaking, people do not want more options; they want what they want. You should use dynamic features to simplify the use of your site, not to add complexity.
  • Show only relevant information. Information becomes knowledge when its relevance is understood. But information that is not immediately relevant can be distracting, and too much information can be just as confusing as too little. Use DHTML to show and hide relevant information as necessary.
  • Make changes clear. We often do not notice changes in our environment, even when they occur right in front of our faces. Changes in the content of a Web page generally should be initiated by the visitor, should occur almost instantly, and should be easy to recognize.
  • Provide a sense of location and direction. One common complaint about the Web is that it's easy to get lost. Compared with the real world, where we can turn to see where we came from and look ahead to see what is next, most Web pages seem to be very insular. Use DHTML to let visitors know where they came from and where they are going.

    Understanding Layout on the Web

    Because of the Web's expandable windows, unpredictable screen resolutions, and variable font sizes, you have a better chance of predicting the price of Internet stocks than the final appearance of your Web design. You know that your design must fit into a rectangle (the browser window), but will that rectangle be wide and long enough?

    All Web designers must start their designs by deciding which of the four main layout styles they will use.

    All Web layouts have two basic parts. The first part is the content area, which features navigation, titles, graphics, and text-in other words, the stuff visitors are interested in. The other part is filler. Whether the filler is just empty space or a design that fills the void, it is there simply to absorb extra space in the browser window. The balance between content and filler is crucial to creating an attractive Web layout.

    Based on this balance, there are four broad categories of Web layout:

  • Unrestrained. The content is allowed to stretch horizontally from the left edge to the right edge of the window and vertically down to the bottom edge of the window (Figure 20.5). This design eliminates the need for filler. But wide columns of text, which can be a symptom of unrestrained layout, can be difficult to read. Wired (Figure 20.6) uses unrestrained layout on its news site (www. wired red. com/news), allowing the content in the center column to grow as wide as necessary to fill the empty space.
  • Fixed width. The content is given a set margin on the left side, the right side, or both, restraining the horizontal length of the content to a fixed width (Figure 20.7). Salon (www.salon.com) restrains the width of its content area, centering it in the window with a fixed width of 736 pixels (roughly the size that a 800-pixelswide monitor can display without horizontal scrolling if the window fills the entire screen) and white space filling additional areas to the left and right (Figure 20.8).
  • Fixed height. The content area is given a set margin on the top, the bottom, or both sides, restraining its vertical length to a fixed height (Figure 20.9). Therefore, the content is forced to scroll horizontally. This design is rarely used, however, because it usually is advantageous to maximize the height in which the content can appear. I used this method to set up a small site for my daughter's birthday pictures-www.webbedenvironments.com/ jocelynstory (Figure 20.10)...

  • Table of Contents



    1. Understanding CSS.

    What Is a Style? What Are Cascading Style Sheets? Versions of CCS. Types of CSS Rules. The Parts of a CSS Rule. Kinds of HTML Tags.

    2. CSS Basics.

    Adding CSS to an HTML Tag. Adding CSS to a Web Page. Adding CSS to a Website. (re)Defining an HTML Tag. Defining Classes to Create Your Own Tags. Defining Classes to Creating your Own Tags. Defining IDs to Identify an Object. Create Your Own Inline HTML Tags. Creating Your Own Block-Level HTML Tags. Defining Tags in Context. Making a Definition !important. Inheriting Properties from a Parent. Managing Existing or Inherited Property Values. Determining a the Cascade Order. Setting the CSS for Printing. Adding Comments to CSS. Style-Sheet Strategies.

    3. Font Controls.

    Understanding Typography on the Web. Using Type on the Web. Setting the Font. Downloading Fonts. Using Browser-Safe Fonts. Setting the Font Size. Making Text Italic. Setting Bold, Bolder, Boldest. Creating Minicaps. Setting Multiple Font Values.

    4. Text Controls.

    Adjusting the Kerning. Adjusting the Word Spacing. Adjusting the Leading. Setting Text Case. Aligning Text Left, Right, and Center. Aligning Text Vertically. Indenting Paragraphs. Decorating Text. Controlling White Space. Setting Page Breaks for Printing.

    5. List and Mouse Controls.

    Setting up a List. Setting the Bullet Style. Creating a Hanging Indent. Creating Your Own Bullets. Changing the Mouse Pointer's Appearance.

    6. Color and Background Controls.

    Setting a Background. Setting a Individual Background Properties. Setting Foreground Color.

    7. Border and Margin Controls.

    Understanding the Element's Box. Setting the Width and Height of an Element. Setting an Element's Margins. Setting an Element's Border. Setting an Element's Padding. Setting a Table's Boarder and Margins. Wrapping Text Around an Element. Preventing Text from Wrapping. Telling an Element How to Display (or Not).

    8. Positioning Controls.

    Understanding the Window. Setting the Positioning Type. Setting the Position from the Top and Left. Setting the Position from the Bottom and Right. Stacking Objects (3-D Positioning). Nesting an Absolute Element in a Relative Element.

    9. Visibility Controls.

    Setting the Visibility of an Element. Setting the Visible Area of an Element (Clipping). Setting Where the Overflow Goes.


    10. Understanding DHTML>

    What Is Dynamic HTML? The Flavors of DHTML. Why Should I Use DHTML? Flash vs. DHTML>

    11. The Document Object Model.

    Understanding the DOM: Road Map to Your Web Page. Creating an Object. Understanding Event Handlers. Detecting an Event. How the DOM Works. Using Feature Sensing. Detecting the DOM Type. Building a Crossbrowser DOM. Using the Cross-Browser DOM. Netscape 4 and Nested Layers.

    12. Learning about Your Environment.

    Detecting the Browser's Name and Version. Detecting the Operating System. Finding the Screen Dimensions. Finding the Number of Colors. Finding the Browser's Window Dimensions. Finding the Visible Page Dimensions. Finding the Page's Location and Title. Finding the Page's Scroll Position. Finding an Object's Dimensions. Finding an Object's Top and Left Positions. Finding an Object's Bottom and Right Positions. Finding an Object's 3-D Position. Finding an Object's Visibility State. Finding an Object's Visible Area.

    13. Dynamic Techniques: The Basics.

    Making Objects Appear and Disappear. Moving Objects from Point-to-point. Moving Objects by a Certain Moving Objects in 3-D. Scrolling a Web Page. Changing an Objects Visible Area.

    14 Dynamic Techniques: Advanced.

    Making a Function Fun Again. Passing an Event to a Function. Creating a Global Event Handler. Animating an Object. Finding Your Location on the Screen. Identifying an Object on the Screen. Dynamic Content Between Frames. Moving the Browser Window. Opening a New Browser Window. Changing a Window's Size.

    15. Dynamic Techniques: CSS.

    Changing a Definition. Changing an Object's Class. Adding a New Rule. Disabling a Style Sheet.

    16. Netscape Layers.

    What Is a Netscape Layer? Creating a Layer. Importing External Content with Netscape Layers. Accessing Layers with JavaScript. Modifying Layers with JavaScript. Providing Content for Nonlayer Browsers.

    17. Internet Exployer for Windows.

    Fading between Objects. Transitions between Pages. Making an Element Blur. Making an Object Wave.


    18 GoLive Primer.

    The GoLive Interface. Adding CSS. Adding a Layer. (floating Box) Adding DHTML Animation.

    19. Dreamweaver Primer.

    The Dreamweaver Interface. Adding CSS. Adding a Layer. Adding Animation.


    20. Understanding the Dynamic Web.

    What Makes a Web Site Dynamic? What Is Hypertext? Dynamic by Design. Understanding Layout on the Web. Navigation Do's and Don'ts.

    21. Creating a Dynamic Web Site.

    Step 1: Define. Step 2: Design. Step 3: Build.

    22. Web Page Layout.

    Netscape CSS Bug Fix. Setting the CSS for the OS. Creating Headlines. Creating a Fixed Header. Creating a Sidebar. Setting a Dynamic Header and Footer. Making Your Own Frame Borders. Opening and Closing Frames. Keeping Pages Framed. Looking Good in Print (on the Web).

    23. Importing External Content.

    Combining ilayers and iframes. Using Server-Side Includes. Using an External JavaScript File. Viewing Someone Else's External Content.

    24. Web Site Navigation.

    Setting Link Styles. Setting Multiple Link Styles. Creating Drop=Down Menus. Creating a Sliding Menu. Creating a Remote Control. Creating a Clamshell Menu. Creating a Breadcrumb Menu. Navigation for Nondynamic Browsers. Educating the Browser.

    25. Controls.

    Creating Your Own Scrollbars. Creating Your Own Back Button. Creating a Slide Show. Creating Pop-Up Hypertext. Contextual Forms.

    26. Special Effects.

    Advanced Drop Shadow. Fading HTML Text. Follow the Mouse. Animating Objects: the Bouncing Banner. Toggling Graphics. Persistent Rollovers. Transparent Graphics with the PNG format.

    27. Multimedia.

    Using Sound. Creating a Sound. Embedding Sound in a Web Page. Adding Sound to a Link. Using Video. Linking to a Video. Embedding a Video. Using Java Embedding Java Applets. Using Flash. Creating a Flash animation. Embedding a Flash File.

    28. When Things Go Wrong-Debugging Your Code.

    Troubleshooting CSS. Troubleshooting JavaScript. Crossbrowser Conundrums.

    29. The Future of Dynamic Content.

    Why Standards Matter.


    Appendix A: The Browsers.

    Netscape Navigator. Internet Explorer. Other Browsers.

    Appendix B: CSS Quick Reference.

    Appendix C: DHTML Quick Reference.

    JavaScript Reserved Words. Object Flow. DHTML Objects.

    Appendix D: Browser Safe Fonts.

    Apple Macintosh. Microsoft Windows. Microsoft Internet Explorer.

    Appendix E: Bugs and Fixes.


    Appendix F: Tools of the Trade.

    Appendix G: Further Research.

    webbedENVIRONMENTS. Building the Web. Web Monkey. VisiBone

    Customer Reviews

    Most Helpful Customer Reviews

    See All Customer Reviews