Table of Contents
Sample Chapter
Talk About It
Reviews
Buy It!
Examples
Links
Web Refs
Downloads
About The Author
Book Updates
bzzzt
 

Examples from the Book

Friday evening:
1: DHTML and how it relates to HTML
Figure 1-1: Content, but with just HTML, it is unattractive and pretty useless.
2: 30 Minute Crash Course on HTML 4.01
Figure 2-1: Simple Lists in HTML
Figure 2-2: Anchor tags and image tags both function as anchors
Figure 2-2a: an improved version
Figure 2-3: Basic table formatting.
Saturday morning:
5: The CSS Language
Figure 5-1: Simple in-line style modifications to a paragraph of text
Figure 5-2: Inline CSS example offers easy color changes
Figure 5-3: Remarkable results for CSS and plain old HTML!
6: Basic CSS Usage
Figure 6-1: Descendant Selectors enable you to apply styles in context.
7: Nifty Font Tricks
Figure 7-1: A list of named typefaces in CSS
Figure 7-2: Typeface sizes are inherited if not specified
Figure 7-3: Font size, stepping up and up by using the handy SPAN tag
Figure 7-4: Various weights and a comparison of italic with oblique type
8: Additional CSS Text Control
Figure 8-1: You get fine kerning control by using the CSS letter-spacing attribute.
Figure 8-2: Setting word and line spacing by using CSS attributes
Figure 8-3: Various text-alignment options
Figure 8-4: Text decorations add visual pizzazz!
Figure 8-5: Text transformations help build considerably improved headers.
9: CSS Lists
Figure 9-1: Default bullets that a Web browser produces, based on nesting-level.
Figure 9-2: Redefine <UL> once and all the bullet lists change.
Figure 9-3: A bullet list displaying my own custom bullet.
Figure 9-4: The list-style-position attribute enables you to fine-tune where bullets appear in a list.
Figure 9-5: A demonstration of the text-indent attribute.
10: Backgrounds and Colors
Figure 10-1: Color adds pizzazz to the presentation of information.
Figure 10-2: This time, you get colored bullets, and black text.
Figure 10-3: Now you see some strange colored boxes, showing how the container nesting works.
Figure 10-4: Paragraphs gain the background color, but in a limited way.
Figure 10-5: Background images can turn a dull page into something amazing!
Figure 10-6: A floating background graphic element (the lens flare) appears within a paragraph container.
Saturday afternoon
11: Margins and Borders
Figure 11-2: Margin spacing dramatically changes the appearance of text.
Figure 11-3: Negative margin spacing produces some, uh, interesting results.
Figure 11-4: A basic BODY border makes the page considerably more interesting visually.
Figure 11-5/6: Borders within borders in your browser.
Figure 11-6: Padding dramatically changes the feel of container borders.
12: Positioning Content with CSS
Figure 12-1: Width can profoundly affect the appearance of material on a Web page.
Figure 12-2: Do not specify a height that is too little to contain the text.
Figure 12-3: Float and container tweaks produce a delightful result.
Figure 12-4: Absolute positioning often layers containers atop each other.
Figure 12-5: Specifying a background color hides the overlapping text problem.
Figure 12-6: Relative positioning makes the container part of the regular document flow.
Figure 12-7: Relative positioning is great for setting up inline elements.
Figure 12-8: Fixed header (does your browser support this attribute?)
13: Visibility, the CSS Solution
Figure 13-1: You still must allocate space even for hidden containers.
Figure 13-2: JavaScript materializes the otherwise invisible paragraph.
Figure 13-3: JavaScript-enabled hypertext references enable you to control the visibility of a text passage.
Figure 13-4/5: The default layout with the DIV block hidden from view.
Figure 13-6/7: Default page, no hint of pop-up.
14: Layering Content: 3D Web Pages
Figure 14-3: Three colorful boxes, neatly stacked atop each other.
Figure 14-4: The same three colorful boxes, with their stacking order reversed.
Figure 14-5: Clickable layers enable you to bring the red box to the top with just a mouse click.
Figure 14-6: I clicked on blue, but it is too far behind now to pop forward.
15: Putting it all together: drop-down menus
Figure 15-1/2: A simple menu bar in DHTML
Figure 15-2a: cross-browser version of 15-1/2
Figure 15-3: Now the menu pops up in the right place, even in Netscape 6.
Figure 15-3a: A further improvement on our pop-up menu.
16: Cool CSS Tricks
Figure 16-1: Our Holmes bug floats in the bottom-right corner.
Figure 16-2: The bug floats now, even in Netscape Navigator 4.
Figure 16-3: Fancy drop caps look really nice on a Web page.
Figure 16-4/5: Pseudo-class elements are rendered differently in different browsers.
Figure 16-6: An attractive form, with the focus on the first text area.
Saturday night
17: The Document Object Model
Figure 17-1: CSS-o-matic enables you to tweak lots of style attributes in real-time.
18: Writing and Debugging JavaScript
Figure 18-1: The Navigator 4 JavaScript Console
Figure 18-2: Errors appear in the JavaScript Console, but are they the right errors?
19: Testing Browser Compatibility
Figure 19-1: The navigator object property values in Netscape 6.
Figure 19-2/3: All navigator object attributes in your browser.
Figure 19-4: Plug-ins included and installed with Internet Explorer 5.5.
Figure 19-5: JavaScript and OS testing code
20: Creating a cross-platform JavaScript Library
Figure 20-1: The portable JavaScript library test suite.
Sunda morning
21: Graphical Rollovers
Figure 21-1: Walrus on the ice.
Figure 21-2: onMouseOver adds the caption.
22: DHTML Scrolling Text
Figure 22-1: The text box glides smoothly across the screen.
Figure 22-2: Specify an incompatible end-point and slideObj complains.
Figure 22-3: Clicking the scroll-down link moves the text down just a bit.
23: Clocks and Calendars
Figure 23-1: Adding date and time values to your Web page.
Figure 23-2: JavaScript automatically fills in a field on this form after you enter information and click the button
Figure 23-2a: improved version of 23-2 code.
Figure 23-3: Your inline clock keeps track of the time!
Figure 23-4: The current month, as shown in a nice calendar view.
24: Forms and testing values
Figure 24-1: Blurring the text field produces an alert confirming the input value.
Figure 24-2: JavaScript activates the words adjacent to the check boxes so that you can click the word in addition to the box itself.
Figure 24-3: I selected a small pizza and then requested extra sauce, but . . .
Figure 24-4: Temperature and mortgage payment calculators combining on a Web site, what a pair!
Figure 24-5: Menus change values based on form selections
25: Navigation with Menus
Figure 25-1: Unexciting page, way-cool pop-up menu displayed and element highlighted.
Figure 25-2: Sliding menu, just sliding into view.
Figure 25-3: Cascading menus: two levels displayed.
Figure 25-4: Improved menus with hide-me timers.
26: Working with Windows
Figure 26-1: Resizing and repositioning the browser by using appearance methods and the self object.
Figure 26-2: Cannot quite get the image size right. How does your browser do?
Figure 26-3: A better picture presentation
Figure 26-4: A simple pop-up advertisement appears as the page loads.
Figure 26-4a: auto-cycling pop-up window.
Figure 26-5: A child window that can affect the parent.
Sunday afternoon
27: Web site memory with cookies
Figure 27-2: Notice the counter at the bottom of the page.
Figure 27-3: A slick to-do management system, all in JavaScript.
28: Poetry and Pictures
Figure 28-1: A picture puzzle in Internet Explorer.
Figure 28-2: The Netscape 6 version of the picture puzzle.
Figure 28-3: A Hawaiian slide show with controls.
29: Putting it all Together
Figure 29-1: Magic sticky notes on the page - notice the cursor location
Figure 29-2: A pop-up navigational window for any page.
Figure 29-3: The hidden message gizmo puzzle.

© 2001-2002 Dave Taylor
& HungryMinds, Inc.