Web Standards Solutions

Note: Supplemental materials are not guaranteed with Rental or Used book purchases.

ISBN: 9781590593813 | 1590593812
Cover: Paperback
Copyright: 6/30/2004

Buy New

Print on Demand: 2-4 Weeks. This item cannot be cancelled or returned.

$33.60

Web standards are the standard technology specifications enforced by the World Wide Web Consortium (W3C) to make sure that web designers and browser manufacturers are using the same technology syntax. This book is contains questions and answers on markup and style topics for Web Standards. It will explore the multiple ways you can handle a situation when building with Web Standards - and the advantages and disadvantages of those methods. Additionally, each chapter goes a step further, with "extra credit" sections to give the reader extra tips and trick based on the topic. The reader is empowered to make better decisions based on well-rounded information.

Foreword

About the Author

xvi

About the Technical Reviewer

xvii

Acknowledgments

xix

Introduction

xxi

PART ONE: GET DOWN WITH MARKUP

Chapter 1: Lists

(14)

Let's go shopping

(1)

Quiz time

(5)

Method A: The [br /] breakdown 2

It's a wrap

(1)

Method B: The bullet that bites

(1)

Validation, please

(1)

Method C: Getting closer

(1)

Method D: Wrapper's delight

(1)

Summary

(1)

Extra credit

(8)

Bite the bullet

(1)

Getting fancier with custom bullets

(1)

Lists that navigate

(2)

Mini-tab shapes

(3)

Chapter 2: Headings

(14)

What is the best way to mark up the title of a document?

(4)

Method A: Meaningful?

(1)

Method B: The p and b combo

(1)

Difficult to style

(1)

Method C: Style and substance

(3)

Easily styled

(1)

Default distaste

(1)

Search engine friendly

(1)

An aside on heading; order

(1)

Summary

(1)

Extra credit

(6)

Simple styling

(2)

Adding backgrounds

(1)

Backgrounds and borders

(1)

Tiled backgrounds

(1)

Swappable icons

(1)

Easy updates

(1)

The chameleon effect

(15)

Aligning the [img] tag 25

Wrapping up

(3)

Chapter 3: Tables Are Evil?

(22)

Totally tabular

(1)

A table that everyone can sit at

(3)

Adding a summary

(1)

The head(s) of the table

(2)

Header and data relationships

(1)

Using the abbr attribute

(3)

[thead], [tfoot], and [tbody] 37

Are tables evil?

(1)

Extra credit

(9)

Creating a grid

(1)

Collapse the gaps

(2)

IE/Mac-less version

(1)

Spaced out

(1)

Customize those headers

(1)

Headers with background images

(2)

Tiny tile

(1)

The CSS

(1)

Assigning icons to IDs

(8)

The icons

(1)

The CSS

(2)

Combining rules for simpler bits

(1)

Wrapping up

(3)

Chapter 4: Quotations

(12)

Method A: Lacks meaning

(1)

Method B: A class act?

(1)

Method C: [blockquote] is best 53

Using a screwdriver to hammer a nail

(1)

Summary

(1)

Extra credit

(2)

A cite for curious eyes

(1)

Inline quotations

(1)

No need for marks

(1)

Nesting inline quotations

(1)

Styling [blockquote] .. . 56

Background quote mar ks

(1)

Three images . . .

(1)

Tagging the elements

(1)

Three elements, three backgrounds

(2)

The results

(1)

Calling out special words

(1)

How does it degrade?

(1)

Wrapping up

(2)

Chapter 5: Forms

(19)

What are our options when marking up a form?

(6)

Method A: Using a table

(1)

Method B: Tableless, but cramped

(1)

Method C: Simple and more accessible

(4)

The [label] element 67

Why [label]? 67

Method D: Defining a form 6tt

Defining style 6 )

Summary

(1)

Extra credit

(8)

The fabulous tabindex

(1)

Why tabindex?

(1)

accesskey for frequented forms

(1)

Easily accessed search

(1)

Styling forms

(9)

Setting the width of text inputs

(3)

Using [label] to customize fonts 74

No need to be redundant

(3)

Use [fieldset] to group form sections 76

Adding style to [fieldset] and [legend] 77

Three-dimensional [legend] 78

Wrapping up

(3)

Chapter 6: [strong], [em], and Other Phrase Elements 81

Presentational vs. structural

(4)

Why are [strong] and [em] better than [b] and [i]? 82

Check in with the experts

(1)

Method A

(1)

Method B

(1)

Bold and beautiful

(1)

What about [em]? 83

Method A

(1)

Method B

(1)

Emphasis mine

(1)

Just bold or italic, please

(1)

Worth its (font-)weight in bold

(1)

That's italic!

(1)

Both bold and italic

(2)

Generic [span] 86

Emphasis with class

(1)

Summary

(1)

Extra credit

(6)

The phrase elements

(1)

[cite] design 87

The specification

(1)

A change in [cite] style 88

Leveraging the structure

(1)

[abbr] and [acronym] 90

Define once

(1)

The presentation

(1)

Compatibility issues

(2)

[code] 92

[samp] 92

[var] 92

[kbd] 93

Final phrase

(2)

Chapter 7: Anchors

(14)

When pointing to a specific portion of a page, what is the best way to mark up an anchor?

(4)

Method A: An empty name

(1)

Method B: It's all in a name

(1)

Beware of global [a] styling 97

Richer name attribute

(1)

Method C: Lose the name

(2)

Two birds with one stone

(1)

Older browsers and the id attribute

(1)

Method D: The all-in-one

100

(1)

Sharing names

100

(1)

Summary

100

(1)

Extra credit

101

(6)

The title attribute

101

(2)

Title in action

102

(1)

Tooltip titles

102

(1)

Titles are spoken

103

(1)

Styling links

103

(7)

Backgrounds

104

(1)

Dotted borders

104

(1)

Where you been?

105

(1)

Hovering

105

(1)

Active state

106

(1)

LoVe/HAte your links

106

(1)

Anchors aweigh

107

(2)

Chapter 8: More Lists

109

(14)

What is the best way to mark up a numbered list of items?

110

(3)

Method A: Unordered order

110

(1)

The numbers game

110

(1)

Rendered bullets

111

(1)

Method B: An ordered list

111

(2)

Automatic numbering

111

(1)

Wrapper's delight II

112

(1)

List types

112

(1)

What is the best way to mark up a set of terms and descriptions?

113

(3)

Method A

113

(1)

Method B

114

(3)

Structure leads to style

115

(1)

Adding icons

115

(1)

Other applications

116

(1)

Summary

116

(1)

Extra credit

117

(3)

Identify the parts

117

(1)

Custom numbers

118

(1)

Adding the numbers to the CSS

118

(1)

The results

119

(1)

Wrapping up

120

(3)

Chapter 9: Minimizing Markup

123

(14)

How can we minimize markup when building sites with web standards?

124

(6)

Descendant selectors

124

(1)

Method A: Class happy

124

(1)

Classified CSS

125

(1)

Method B: Natural selection

125

(4)

Contextual CSS

126

(1)

Not just for sidebars

126

(1)

Less class means easier maintenance

127

(2)

The unnecessary [div] 128

Method A: [div] happy 128

Method B: Lose the [div] 129

Other examples

129

(1)

Summary

130

(1)

Extra credit

130

(5)

The raw markup

130

(1)

Adding style

131

(1)

Custom bullets

132

(1)

Adding a border

133

(2)

Conclusion

135

(2)

PART TWO: SIMPLEBITS OF STYLE

Chapter 10: Applying CSS

137

(16)

How do I apply CSS to a document?

138

(8)

Method A: The [style] element 138

Partial understanding

139

(1)

Uncached

139

(1)

Multiple changes

139

(1)

Good for development

139

(1)

Method B: External style sheets

139

(1)

Separate file = easy maintenance

140

(1)

Download once

140

(1)

Still not completely hidden

140

(1)

Method C: @import

140

(2)

Hide and seek

141

(1)

Styles on, styles off

141

(1)

Combining B and C for multiple style sheets

142

(1)

The chameleon effect

142

(1)

How it's done

142

(1)

Lo-fi and hi-fi styles

143

(1)

Order is important

144

(1)

Embrace the cascade

144

(1)

Method D: Inline styles

145

(2)

Style tied to markup

145

(1)

Use with caution

146

(1)

Summary

146

(1)

Extra credit

147

(4)

Alternate styles

147

(7)

Three font sizes

148

(1)

Still cascading

148

(1)

Getting alternate styles to work

149

(1)

More than just font sizing

150

(1)

Courtesy of DOM

150

(1)

Conclusion

151

(2)

Chapter 11: Print Styles

153

(12)

How can we specify styles for print?

154

(8)

Media types

154

(1)

Two ways to target

155

(1)

Method A: The media attribute

155

(1)

Partial support

155

(1)

Method B: @media or @import

155

(1)

In the head or externally

156

(1)

Multiple values allowed

156

(1)

Separating screen and print styles

157

(1)

Building a print style sheet

157

(9)

Make a point

158

(1)

Save ink by hiding unnecessary elements

158

(1)

Expose links

159

(1)

Link text

160

(1)

Save ink with print preview

160

(1)

How it looks

160

(2)

Summary

162

(3)

Chapter 12: CSS Layouts

165

(26)

How can I use CSS to build a two-column layout?

166

(17)

Method A: Floating the sidebar

167

(5)

Styling the header and footer

168

(1)

Floating the sidebar

169

(1)

True columns

169

(3)

Method B: The double float

172

Clear both

173

Method C: Floating the content

171

(5)

The CSS

173

(1)

Background woes

174

(1)

Plain and simple

175

(1)

Method D: Positioning

176

(7)

Predictable height

177

(1)

Space for the column

177

(1)

Drop in the sidebar

178

(1)

The footer issue

178

(2)

Three's company

180

(3)

Summary

183

(1)

Extra credit

183

(6)

The box model problem

183

(4)

Seeing is believing

184

(1)

Wavering widths

185

(1)

The Box Model Hack

185

(1)

Code by example

185

(1)

Be nice to Opera

186

(1)

Not just for widths

186

(1)

Faux columns

187

(5)

Vertical stretch

187

(1)

The cheat

188

(1)

The CSS

188

(1)

Positioned columns

188

(1)

Whatever floats your boat

189

(1)

Wrapping up

189

(2)

Chapter 13: Styling Text

191

(12)

How can I make hypertext look cool?

192

(9)

Times they are a-changing

192

(1)

Changing line height

193

(1)

All in the family

194

(1)

Font names with spaces

194

(1)

Kerning (a.k.a. letter-spacing)

195

(1)

Drop caps

196

(1)

Text alignment

197

(2)

Transforming text

199

(1)

Small caps

199

(1)

Paragraph indentation

200

(1)

Summary

201

(2)

Chapter 14: Image Replacement

203

(21)

How can I use CSS to replace text with images?

204

(1)

No perfect solution

204

(1)

Use, but with caution

204

(1)

Method A: Fahrner Image Replacement (FIR)

204

(4)

The markup

205

(1)

The extra tag

205

(1)

The CSS

205

(1)

Hide the text

206

(1)

Assign a background

206

(1)

Advantages

207

(1)

Drawbacks

207

(1)

Weigh the pros and cons

208

(1)

Method B: Leahy/Langridge Image Replacement (LIR)

208

(1)

The markup and CSS

208

(1)

Box model woes

209

(1)

Drawbacks

209

(1)

Method C: The Phark Method

209

(2)

The markup and CSS

210

(1)

Still not perfect

210

(1)

Summary

211

(1)

Extra credit

212

(3)

Logo swapping

212

(1)

Hi-fi and lo-fi

212

(1)

The example

212

(1)

A pair of logos

213

(1)

The CSS

213

(1)

Regain the hyperlink

214

(1)

The results

214

(1)

Accessible image-tab rollovers

215

(5)

The problem

215

(1)

The solution

216

(1)

The markup: One list to rule them all

216

(1)

One image, three states

217

(1)

The CSS: This is where the magic happens

217

(1)

The results

218

(1)

Why use it?

219

(1)

But wait, the text doesn't scale!

219

(1)

Compatibility

220

(1)

Wrapping up

220

(4)

Chapter 15: Styling [body] 223

Two and sometimes three columns

224

(4)

Markup and style structure

225

(2)

Article page

226

(1)

Index page

226

(1)

This [body] has class 227

Not just for columns

227

(1)

"You are here"

228

(3)

The navigation list

228

(1)

Identify the parts

229

(1)

The magic CSS

230

(1)

Summary

231

(2)

Chapter 16: Next Steps

233

(8)

Where do you go from here?

234

(4)

Organizations and publications

234

(2)

W3C

234

(1)

Web Standards Project

234

(1)

A List Apart

234

(1)

CSS Zen Garden

235

(1)

Dive Into Accessibility

235

(1)

css-discuss

235

(1)

Web-Graphics

235

(1)

Digital Web Magazine

235

(1)

The Weekly Standards

236

(1)

Influential and inspirational weblogs

236

(2)

Jeffrey Zeldman Presents: The Daily Report

236

(1)

Stopdesign

236

(1)

mezzoblue

236

(1)

meyerweb.com

236

(1)

Tantek 4elik

237

(1)

What Do I Know?

237

(1)

Asterisk*

237

(1)

superfluousbanter

237

(1)

Simon Willison's Weblog

237

(1)

Brainstorms and Raves

237

(1)

Living Can Kill You

237

(1)

Books

238

(1)

Designing With Web Standards

238

(1)

Cascading Style Sheets: The Definitive Guide

238

(1)

Speed Up Your Site: Web Site Optimization

238

(1)

Parting words

238

(3)

Index

241

Please wait while the item is added to your bag...

FREE SHIPPING

Amazon no longer offers textbook rentals. We do!

Web Standards Solutions

Summary

Table of Contents

Supplemental Materials