Essential CSS and DHTML for Web Professionals [Paperback]

Dan Livingston (Author), Micah Brown (Author)

Book Description

Publication Date: June 24, 1999 | ISBN-10: 0130127604 | ISBN-13: 978-0130127600 | Edition: 1

With Cascading Style Sheets and Dynamic HTML, you can supercharge your Web site, both visually and functionally. Now, learn CSS and DHTML fast! This no-nonsense guide teaches CSS and DHTML in the context of building two Web sites that reflect the most common scenarios Web professionals encounter: a company selling products and educating visitors; and a content site selling ads and subscriptions. The finished sites are on the Web, so you can reuse the code, and see how your pages should look -- and work! Coverage includes: defining styles with the STYLE tag, blocking off content with the DIV tag, stacking, interactivity, pop-ups, cross-browser coding, animating layers, creating E-commerce shopping carts, and much more. Essential CSS and DHTML for Web Programmers is one in a new series of books that share the same dynamic Web site, and can teach all the Web development skills you need, from PERL to Photoshop -- fast!

Editorial Reviews

From the Inside Flap

Introduction

When we first started learning DHTML, there were two kinds of books on the market: overly simplified, cutesy books that were appropriate for technophobic junior high schoolers; and huge reference tomes that could be used to prop up a house. But nothing actually taught us to build pages for real clients using stylesheets and DHTML.

This book will guide you through stylesheets and DHTML using examples taken straight from our experience as Web designers and programmers. We'll start off with basic concepts and simple examples and work up to some pretty sophisticated effects and functionality.

Now let's look at how this book is laid out and what DHTML can and can't do. How This Book Is Laid Out

Most of us learn how to create content for the Web when we're forced to. Your boss was maybe impressed by something fancy another CEO showed her, and since you helped her with her e-mail once, you're the resident expert in all things Web. She wants you to implement some "DHTML stuff" on your company's Web site. You say, "No problem." You think, "OK, I have something to learn now." In our everyday lives this is often the way in which we expand our skills: We are given a job and if we don't know exactly how to do it, then we quickly learn how. In writing this book we decided to parallel the real world: This book is split into two main projects, and for each main project we will be responsible for the creation and/or upgrading of Web sites for two fictitious companies.

In the first three chapters of the book we will be using DHTML to create the homepage for Shelley Biotechnologies, a fast-growing biotech startup. In each chapter we will have at least one subproject that will consist of commonly used DHTML. We'll keep the difficulty down and focus on the DHTML you'll need to know first. At the end of each chapter, there will be more advanced exercises that you can complete on your own to expand your skills.

In the second half of the book we'll be creating an interactive storefront for Stitch Magazine's first foray into e-commerce. These tasks are more advanced than those found in the first project and will show you some of the powerful things you can do using DHTML.

The exercises in the chapters are designed to give you a solid foundation in DHTML, as well as many advanced skills and techniques that will carry you through the vast majority of DHTML projects you'll encounter. You will find that more often than not there is more than one way to do things in DHTML. There really aren't right and wrong ways to accomplish tasks.

For all of the examples in the book you will be able to go to the companion Web site located at phptr /essential and download the HTML and images needed to follow along with the exercises. An Introduction to DHTML

Before jumping straight into the code, let's look at DHTML and get an idea of what it is, how it's implemented by different browsers, and what it can and can't do. Then we'll jump into the code. What Is DHTML?

DHTML stands for "Dynamic HTML," but in reality it's just using JavaScript and stylesheets together. That's it. It's easy to get a grander idea from the name: People often use the phrase "dynamically generated Web pages" to refer to Web pages that are created on the fly. The "Dynamic" in DHTML just means, "Wow, it moves around."

DHTML is still very powerful. It allows you to create effects that were impossible with plain HTML and JavaScript. The stylesheets (the official name is Cascading Style Sheets, or CSS) also let you position elements on the screen exactly where you want them without having to wrangle tables in HTML. For those of you who are new to the world of Web development and are maybe learning JavaScript in conjunction with HTML, a quick rundown of what JavaScript is may be in order. JavaScript is Netscape's built-in scripting language, which is cross-platform so it will work on all platforms just like HTML. JavaScript allows you to enhance the functionality of your Web pages by embedding applications into your HTML. You can use JavaScript to build applications that range from adding interactivity to your pages to applications that interact with databases. Although Netscape created JavaScript, it will work on most modern browsers, including Microsoft's Internet Explorer. JavaScript isn't directly supported in Microsoft's Internet Explorer; IE does, however, have its own scripting language called JScript that supports most of the features found in JavaScript. The few instances in which the languages differ will be pointed out and a work-around will be presented.

There are two methods that you can use to include JavaScript in your Web pages — client-side and server-side. Both methods share the same basic language sets. This core language defines a base set of objects and features that will work in both client-side and server-side applications. Both methods also have extended object and feature sets that apply only to them.

Browsers and Versions

DHTML can only be viewed on version 4.0 and later of Microsoft's Internet Explorer and Netscape's Navigator. If you try to view a page written in DHTML with a 3.x browser, more likely than not you'll see a page with all of the images lined up in a straight vertical line down the page. And since, by the latest counts, 20%-40% of surfers are still using older browsers, you'll probably have to create two different Web pages: a standard HTML version and a DHTML version. For this reason, DHTML has not exploded onto the Web development scene.

Predictably, the two browsers differ somewhat in their implementation of DHTML. This isn't entirely their fault, though: They were released before the DHTML standards were set. Netscape Navigator 4.0 was released long before Microsoft's IE4, and thus had less of a firm direction as far as which standards would be included and which ones would be trashed. Doing the same thing in both browsers often requires separate code (we'll cover this in Chapter 3). Both browsers also include a host of proprietary tags and functions that only work on that browser. We'll tell you what they are and we'll also tell you to ignore these tags completely.

The upshot of all this is that you have to write your DHTML carefully and make sure you test your Web pages thoroughly. That means on both Mac and PC, MSIE and Netscape. It's a pain, but if you want to create something solid and professional, it's what you do.

A word about JavaScript: Netscape created JavaScript a while ago and, technically, MSIE doesn't support it. However, Microsoft does have its own language called JScript, which has many, many similarities to JavaScript. And, of course, neither language has anything at all to do with Java. What DHTML Can and Can't Do

While the applications that you can create using DHTML are really only limited by your imagination, there are several things you cannot do, such as accessing or controlling the user's machine. For security reasons, writing to a user's computer is severely limited. You can store data on the user's machine only through the use of a cookie, and even then you are limited to a simple text file. This protects users from scripts that might do their computers harm or allow unscrupulous programmers from accessing personal information.

And, of course, you're still limited by bandwidth and how fast the browser operates. In a perfect world, you could create massive, gorgeous images that flow and swoop smoothly across the computer screen. We're not there yet, but we're getting there. (Future hint: Learn the Web because it's great technology that's only going to get bigger, but start looking at video closely. The next few generations of computers and software will create a desktop video production revolution similar to the desktop publishing revolution the Mac ushered in 15 years ago.)

With all that in mind, let's start looking at DHTML. There's some juicy stuff here, so have fun!

From the Back Cover

With Cascading Style Sheets and Dynamic HTML, you can build sites that load faster, look hotter, and work better than ever before! Now you can learn CSS and DHTML right now, by example, from two leading Fortune 500 Web developers! Master all you need to get results, as you build real-world practice sites that sell products, educate visitors, offer subscriptions, and display ads. Best of all, the finished sites are on the Web—so you can reuse the code, and see exactly how your pages should look and work!

You'll learn all this, and much more!

• Defining styles with
• Blocking off content with
• Stacking
• Interactivity
• Pop-ups
• Cross-browser coding
• Animating layers
• Creating e-commerce shopping carts

Rely on Essential Guides for ALL the Web Skills You Need!

All these books share the same great format, and the same dynamic Web site. . .

so once you've used one, they're all a piece of cake!

• Essential CSS & DHTML for Web Professionals
• Essential PERL 5 for Web Professionals
• Essential Photoshop 5 for Web Professionals
• Essential JavaScript for Web Professionals
• With more to come!

See all Editorial Reviews

Product Details

• Paperback: 208 pages
• Publisher: Prentice Hall Ptr; 1 edition (June 24, 1999)
• Language: English
• ISBN-10: 0130127604
• ISBN-13: 978-0130127600
• Product Dimensions: 9 x 5.8 x 0.5 inches
• Shipping Weight: 15.5 ounces
• Average Customer Review: 1.5 out of 5 stars  See all reviews (18 customer reviews)
• Amazon Best Sellers Rank: #4,708,335 in Books (See Top 100 in Books)

Customer Reviews

Most Helpful Customer Reviews

10 of 11 people found the following review helpful:

1.0 out of 5 stars A COMPLETE Waste of Time, October 28, 1999

By A Customer

This review is from: Essential CSS and DHTML for Web Professionals (Paperback)

I was seduced by the description of this book. Yet all it does is waste your time. I depended upon this book to help me learn the skills needed to build a piece of functionality that was due in two days. To no avail. The book only served to confuse further. The companion website is a mere mirror of the error-ridden code provided by the book.

10 of 11 people found the following review helpful:

1.0 out of 5 stars Code does not work, September 17, 1999

By 

Enrique Pineda (Athens, GA United States) - See all my reviews
(REAL NAME)   

This review is from: Essential CSS and DHTML for Web Professionals (Paperback)

I don't know what browsers the authors actually tested their code against, but the first three chapters' examples do not work. I am using IE 4.72 and Netscape 4.61. No cigar. Unlike some of the other readers, I do not have the expertise to correct the authors' mistakes on my own. Worse, there is no contact information for the authors. The book is organized well, but the authors really goofed on the cross-browser issues. I've read perhaps the first four chapters so far, and the most glaring error is with regard to the visibility attribute. The 'hidden' and 'visible' settings do not work in Netscape Navigator (it's 'show' and 'hide', guys). This is disturbing as the authors suggest that one of the most common uses for DHTML is making layers appear and disappear!

7 of 7 people found the following review helpful:

1.0 out of 5 stars Riddled With Errors, August 28, 1999

By 

GF "gf1701" (Novato, CA USA) - See all my reviews

This review is from: Essential CSS and DHTML for Web Professionals (Paperback)

This is a follow-up to the review I posted before the publisher posted the files required for the exercises in the book.

It doesn't get any better once the files are there. I went through two chapters, and as other reviewers have noted, they were full of typos and errors, so that few of the examples work. I knew enough about CSS to fix those errors on my own, but I did not know enough about DHTML to get those examples to work (and I shouldn't have to). And why didn't the author's supply the code for the complete web pages? At least then, readers could work from that and see what the code should look like. There was clearly no quality review or code verification done on this book: it's a disgrace.