THE BOOK S STRUCTURE
THE BOOK'S STRUCTURE
Each chapter of the book describes a certain
bulletproof guideline
. We'll start by looking at an existing design from the Web, and we'll note why it isn't bulletproof. We'll then rebuild the example using XHTML and CSS, with the goal of improving its flexibility and
Many of these examples are specific
The step-by-step nature of each chapter's examples should make it easy to follow alongeven if you are new to using XHTML and CSS in your daily work. Along the way, I'll explain why these Web standards are beneficial, and
|
THE CONTEXT OF THE BOOK'S EXAMPLES
All of the examples assume a basic page structure that
For instance, the basic framework for the book's examples could be set up like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
... example CSS goes here ...
</style>
</head>
<body>
... example markup goes here ...
</body>
</html>
note
While the CSS is placed in the
<head>
of the page for convenience, it should eventually be hidden from old,
Hiding CSS from older browsers is commonly done by using the @import method for referencing external style sheets. For example, if we placed all of our styles into a file named screen.css, we could use the @import method to reference that external style sheet by its URL. Because older browsers (like Netscape 4.x) don't understand @import , the styles contained within screen.css will be hidden to them.
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import url("screen.css");
</style>
</head>
|
COMMON TERMS USED THROUGHOUT THE BOOKThere are times throughout the book that I'll refer to various browser versions by their abbreviations. For instance, it's much easier to say IE5/Win than "Internet Explorer version 5 for Windows." That said, here's a little list of the shorthand browser version/platform conventions:
When describing the common approaches found in the examples used for each chapter, I often refer to
nested tables
and
spacer GIF shims
. This describes the traditional techniques often used to build Web sites, in which tables are used to create
The
But there are better ways of accomplishing the same visual goal using lean, meaningful markup and CSS. By embracing these Web standards, we can still create compelling designs that at the same time are flexible and ready for whatever situation is thrown at them. This is Bulletproof Web Design . |