Contents Listing

v

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xi

Part I. Getting Started

1. Where Do I Start? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
Am I Too Late? 3
Where Do I Start? 4
What Do I Need to Learn? 4
Do I Need to Learn Java? 7
What Do I Need to Buy? 10
The Moral of the Story 13
Test Yourself 14
2. How the Web Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
The Internet Versus the Web 15
Serving Up Your Information 16
Web Page Addresses (URLs) 16
The Anatomy of a Web Page 20
Browsers 22
Putting It All Together 23
Test Yourself 24
3. Getting Your Pages on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25
Putting Files Online (FTP) 25
Finding Server Space 32
www.“YOU”.com! 35
Test Yourself 36
4. Why Web Design Isn’t Like Print Design . . . . . . . . . . . . . . . . . . . . . . . . . . .37
Designing for the Unknown 37
Surviving the Unknown 46
Keep the Lowest Common Denominator in Mind 46
Know Your Audience 47
Test Yourself 48
Contents
vi Contents
5. The Web Design Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49
Conceptualize and Research 49
Create and Organize Content 51
Develop the “Look and Feel” 52
Produce Graphics and HTML Documents 54
Create a Working Prototype 54
Test, Test, Test! 54
Upload and Test Again 55
Maintain 56
Test Yourself 56
Part II. Learning HTML
6. Creating a Simple Page (HTML Overview) . . . . . . . . . . . . . . . . . . . . . . . . .59
Introducing…the HTML Tag 60
Assembling a Web Page 60
When Good Pages Go Bad 73
Test Yourself 75
HTML Review: Structural Tags 76
7. Formatting Text with HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77
“Typesetting” on the Web 77
Building Blocks 79
Lists 84
Inline Styles 90
The Tag 94
Aligning Text 102
Some Special Characters 106
Test Yourself 109
HTML Review: Text Formatting Tags 110
8. Formatting Text with Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .111
Some Good Points, Some Bad Points 112
How Style Sheets Work 113
Creating a Simple Style Sheet 116
Special Selectors 120
More Text Properties 127
External Style Sheets 132
Test Yourself 135
HTML Review: Style Sheet–Related Tags 137
Style Property Review 137
9. Adding Graphic Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139
Adding Inline Images 139
Background Tiles 153
Horizontal Rules 156
Test Yourself 160
HTML Review: Graphic Element Tags 160
vii Contents
10. Adding Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161
The Anchor Tag Dissected 162
Linking to Pages on the Web 163
Linking Within Your Own Site 164
Linking Within a Page 174
Several Links in One Graphic (Imagemaps) 177
Mail Links 181
Test Yourself 182
HTML Review: Link Tags 184
11. Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185
How Tables Are Used 186
Basic Table Structure 187
Designing Tables 191
HTML for Tables 197
Using Tables for Alignment 208
Where Tables Go Wrong 210
Test Yourself 213
HTML Review: Table Tags 214
12. Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215
How Frames Work 216
Setting Up a Frameset Document 218
Frame Appearance and Function 225
Targeting Frames 229
Content for Users Without Frames 232
Test Yourself 233
HTML Review: Frame Tags 234
13. Color on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .235
Specifying Colors by Name 235
Specifying Colors by Number 237
Elements You Can Color with HTML 242
Coloring Elements with Style Sheets 244
The Web Palette 244
Test Yourself 248

Part III. Creating Web Graphics

14. All About Web Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .251
File Formats 251
Image Resolution 254
File Size Matters 257
Tools of the Trade 259
Image Sources 260
Graphics Production Tips 262
Web Graphics Highlights 263
Test Yourself 264
viii Contents
15. Creating GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .265
All About GIFs 265
Creating a Simple GIF, Step by Step 269
Adding Transparency 273
Optimizing GIFs 280
Designing with the Web Palette 287
Some Things to Remember About GIFs 292
Test Yourself 292
16. Creating JPEGs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293
More About JPEGs 294
Making JPEGs, Step by Step 297
Optimizing JPEGs 301
Some Things to Remember About JPEGs 305
Test Yourself 305
17. Animated GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307
How They Work 307
GIF Animation Tools 308
Animation Settings 308
Creating an Animated GIF, Step by Step 311
A Cool Shortcut (Tweening) 316
Things to Remember About Animated GIFs 318
Test Yourself 318
18. Slicing and Rollovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319
Sliced Images 319
Rollovers 327
Slices and Rollovers in ImageReady 334
Test Yourself 336
Part IV. Form and Function
19. Web Design Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .339
Fancy Bulleted Lists 339
Fun with Boxes 341
Using 1-Pixel Square Graphics 347
Vertical Rules 351
Background Tile Tricks 352
Pop-up Windows 355
Adjusting Page Margins 358
A Closing Word on Web Design Techniques 358
Test Yourself 359
20. Building Usable Web Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .361
Focus on the User 361
Information Design 362
Interface Design 370
Navigation Design 377
Building the Pages 388
Building Usable Web Sites: In Review 389
Test Yourself 390
21. Web Design Dos and Don’ts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .391
General Page Design Advice 391
Text Formatting Tips 394
Graphics Advice 398
Aesthetic Suggestions 400
Jen’s Personal Pet Peeves 403
Test Yourself 404
22. How’d They Do That? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .405
Forms 405
Audio 406
Video 408
Flash 412
DHTML 415
XHTML (The New Standard) 417
Advanced Techniques in Review 420
Test Yourself 421

Appendix: Answers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .423

Glossary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .441

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .445