Web design demystified

DeMYSTiFieD / Web Design DeMYSTiFieD / Wendy Willard / 801-6 / Front Matter

Web Design

DeMYSTiFieD®

DeMYSTiFieD / Web Design DeMYSTiFieD / Wendy Willard / 801-6 / Front Matter

DeMYSTiFieD® Series

DeMYSTiFieD / Web Design DeMYSTiFieD / Wendy Willard / 801-6 / Front Matter

Accounting Demystified

Advanced Statistics Demystified

Algebra Demystified

Alternative Energy Demystified

Anatomy Demystified

ASP.NET 2.0 Demystified

Astronomy Demystified

Audio Demystified

Biology Demystified

Biotechnology Demystified

Business Calculus Demystified

Business Math Demystified

Business Statistics Demystified

C++ Demystified

Calculus Demystified

Chemistry Demystified

College Algebra Demystified

Corporate Finance Demystified

Data Structures Demystified

Databases Demystified

Differential Equations Demystified

Digital Electronics Demystified

Earth Science Demystified

Electricity Demystified

Electronics Demystified

Environmental Science Demystified

Everyday Math Demystified

Forensics Demystified

Genetics Demystified

Geometry Demystified

Home Networking Demystified

Investing Demystified

Java Demystified

JavaScript Demystified

Linear Algebra Demystified

Macroeconomics Demystified

Management Accounting Demystified

Math Proofs Demystified

Math Word Problems Demystified

Medical Billing and Coding Demystified

Medical Terminology Demystified

Meteorology Demystified

Microbiology Demystified

Microeconomics Demystified

Nanotechnology Demystified

Nurse Management Demystified

OOP Demystified

Options Demystified

Organic Chemistry Demystified

Personal Computing Demystified

Pharmacology Demystified

Physics Demystified

Physiology Demystified

Pre-Algebra Demystified

Precalculus Demystified

Probability Demystified

Project Management Demystified

Psychology Demystified

Quality Management Demystified

Quantum Mechanics Demystified

Relativity Demystified

Robotics Demystified

Signals and Systems Demystified

Six Sigma Demystified

SQL Demystified

Statics and Dynamics Demystified

Statistics Demystified

Technical Math Demystified

Trigonometry Demystified

UML Demystified

Visual Basic 2005 Demystified

Visual C# 2005 Demystified

XML Demystified

DeMYSTiFieD / Web Design DeMYSTiFieD / Wendy Willard / 801-6 / Front Matter DeMYSTiFieD / Web Design DeMYSTiFieD / Wendy Willard / 801-6 / Front Matter

Web Design

DeMYSTiFieD®

Wendy Willard

New York Chicago San Francisco Lisbon London Madrid Mexico City

Milan New Delhi San Juan Seoul Singapore Sydney Toronto

Copyright © 2011 by The McGraw-Hill Companies. All rights reserved. Except as permitted under the United States Copyright Act

of 1976, no part of this publication may be reproduced or distributed in any form or by any means, or stored in a database or retrieval

system, without the prior written permission of the publisher.

ISBN: 978-0-07-174802-5

MHID: 0-07-174802-4

The material in this eBook also appears in the print version of this title: ISBN: 978-0-07-174801-8,

MHID: 0-07-174801-6.

All trademarks are trademarks of their respective owners. Rather than put a trademark symbol after every occurrence of a trademarked

name, we use names in an editorial fashion only, and to the benefi t of the trademark owner, with no intention of infringement of the

trademark. Where such designations appear in this book, they have been printed with initial caps.

McGraw-Hill eBooks are available at special quantity discounts to use as premiums and sales promotions, or for use in corporate

training programs. To contact a representative please e-mail us at [email protected].

Trademarks: McGraw-Hill, the McGraw-Hill Publishing logo, DeMYSTiFieD®, and related trade dress are trademarks or registered

trademarks of The McGraw-Hill Companies and/or its affi liates in the United States and other countries and may not be used without

written permission. All other trademarks are the property of their respective owners. The McGraw-Hill Companies is not associated

with any product or vendor mentioned in this book.

Information has been obtained by McGraw-Hill from sources believed to be reliable. However, because of the possibility of human or

mechanical error by our sources, McGraw-Hill, or others, McGraw-Hill does not guarantee the accuracy, adequacy, or completeness of

any information and is not responsible for any errors or omissions or the results obtained from the use of such information.

TERMS OF USE

This is a copyrighted work and The McGraw-Hill Companies, Inc. (“McGrawHill”) and its licensors reserve all rights in and to the

work. Use of this work is subject to these terms. Except as permitted under the Copyright Act of 1976 and the right to store and retrieve

one copy of the work, you may not decompile, disassemble, reverse engineer, reproduce, modify, create derivative works based upon,

transmit, distribute, disseminate, sell, publish or sublicense the work or any part of it without McGraw-Hill’s prior consent. You may

use the work for your own noncommercial and personal use; any other use of the work is strictly prohibited. Your right to use the work

may be terminated if you fail to comply with these terms.

THE WORK IS PROVIDED “AS IS.” McGRAW-HILL AND ITS LICENSORS MAKE NO GUARANTEES OR WARRANTIES AS

TO THE ACCURACY, ADEQUACY OR COMPLETENESS OF OR RESULTS TO BE OBTAINED FROM USING THE WORK,

INCLUDING ANY INFORMATION THAT CAN BE ACCESSED THROUGH THE WORK VIA HYPERLINK OR OTHERWISE,

AND EXPRESSLY DISCLAIM ANY WARRANTY, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED

WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. McGraw-Hill and its licensors do not

warrant or guarantee that the functions contained in the work will meet your requirements or that its operation will be uninterrupted or

error free. Neither McGraw-Hill nor its licensors shall be liable to you or anyone else for any inaccuracy, error or omission, regardless

of cause, in the work or for any damages resulting therefrom. McGraw-Hill has no responsibility for the content of any information

accessed through the work. Under no circumstances shall McGraw-Hill and/or its licensors be liable for any indirect, incidental,

special, punitive, consequential or similar damages that result from the use of or inability to use the work, even if any of them has been

advised of the possibility of such damages. This limitation of liability shall apply to any claim or cause whatsoever whether such claim

or cause arises in contract, tort or otherwise.

The DeMYSTiFieD series helps students master complex and difficult subjects.

Each book is filled with chapter quizzes, final exams, and user friendly content.

Whether you want to master Spanish or get an A in Chemistry, DeMYSTiFieD will

untangle confusing subjects, and make the hard stuff understandable.

PRE-ALGEBRA DeMYSTiFied, 2e

Allan G. Bluman

ISBN-13: 978-0-07-174252-8 • $20.00

ALGEBRA DeMYSTiFied, 2e

Rhonda Huettenmueller

ISBN-13: 978-0-07-174361-7 • $20.00

CALCULUS DeMYSTiFied, 2e

Steven G. Krantz

ISBN-13: 978-0-07-174363-1 • $20.00

PHYSICS DeMYSTiFied, 2e

Stan Gibilisco

ISBN-13: 978-0-07-174450-8 • $20.00

DeMYSTiFieD / Web Design DeMYSTiFieD / Wendy Willard / 801-6 / Front Matter

I first learned web design from a fabulous instructor, Lynda Weinman, while in college. I was

privileged to be among the first students in the United States to learn how to design for

webpages, and I have been smitten ever since. This book is dedicated to students

everywhere who are finding their life’s passions in classrooms all over the globe.

About the Author

Wendy Willard is a designer, consultant, writer, and educator who has been

involved in web design for about 15 years, after obtaining a degree in illustration

from Art Center College of Design in Pasadena, California. She is the author of

the bestseller HTML: A Beginner’s Guide, now in its fourth edition, and has

written additional books and articles on the topics of Photoshop, web design,

and Mac O/S.

About the Technical Editor

Chrissy Rey-Drapeau has been working with the Web since 1995 when she

gave up animal wrangling for programming. Concentrating on Adobe Flash and

web application development, she loves to teach what she knows. As the lead

developer at Pongo Interactive, Chrissy works with such clients as the American

Association for the Advancement of Science, Marriott International, Beaconfire

Consulting, reZOLV Creative Solutions, and Swim Design.

DeMYSTiFieD / Web Design DeMYSTiFieD / Wendy Willard / 801-6 / Front Matter DeMYSTiFieD / Web Design DeMYSTiFieD / Wendy Willard / 801-6 / Front Matter

vii

Contents

Acknowledgments xiii

Introduction xv

chapter 1 Getting Started 1

What Is Web Design? 2

Design vs. Development 2

Teams and Tasks 3

Project Management 3

Information Architecture 4

Design 5

Coding/Programming 6

Animation/Multimedia 7

Copywriting/Editing 8

Testing 8

Search Engine Optimization 9

Maintenance 10

Technologies and Tools 11

HTML and CSS 11

Beyond HTML and CSS 12

Design Tools 14

Flash 14

Coding Tools 16

Planning a Site 18

Hosting 19

Target Audience 22

Information Architecture 23

Documentation 26

Chapter Summary 30

viii Web Design Demystified

DeMYSTiFieD / Web Design DeMYSTiFieD / Wendy Willard / 801-6 / Front Matter

chapter 2 Designing for Screens 33

What’s Unique About Screen Design? 34

Devices 34

Browsers 41

Bandwidth 42

Color 43

Navigation 46

Transitions 50

Layout 50

Creating Design Mockups 52

Stock Media 53

Sharing Copies of Your Mockups 54

Chapter Summary 56

chapter 3 Building the Pages 59

Web File Formats 60

Key Terms 60

GIF 62

JPEG 62

PNG 63

Slicing Designs 64

Using Guides 65

Creating Slices 65

Naming Slices 67

Exporting Designs 68

Exporting Slices 71

Exporting HTML 72

Coding the File Structure 75

Basic Page Code 76

Version Information 77

Header Content 77

Body Content 80

Basic CSS Code 81

Coding Best Practices 84

Naming Conventions 85

Chapter Summary 85

chapter 4 All About the HTML 89

Content Blocks 90

Planning the Structure 90

Other HTML Containers 93

Headings 94

Paragraphs 95

DeMYSTiFieD / Web Design DeMYSTiFieD / Wendy Willard / 801-6 / Front Matter

Contents ix

Lists 96

Links 97

Tables 100

Forms 101

Form Attributes 103

Form Structure 103

Form Processing 106

Images 107

Multimedia 107

Chapter Summary 110

chapter 5 All About the CSS 113

Selectors 114

Type Selectors 114

ID Selectors 114

Class Selectors 115

Other Selectors 115

Importance 119

Font Styles 122

Font Sizes 122

Font Families 125

Color 126

Other Popular Properties to Style Text 129

Link Styles 130

Multiple Link Styles 131

Button Links 131

List Styles 132

Navigation Lists 132

Form Field Styles 135

Chapter Summary 136

chapter 6 Integrating HTML and CSS for Layout 139

Box Properties 140

Height and Width 140

Border 142

Margin and Padding 143

Basic Alignment 144

Floats 144

CSS Positioning 146

Static and Relative Positioning 146

Fixed and Absolute Positioning 146

How to Position Elements 147

x Web Design Demystified

DeMYSTiFieD / Web Design DeMYSTiFieD / Wendy Willard / 801-6 / Front Matter

Adding Interactivity 151

Positioning Properties 152

Backgrounds 153

Use Backgrounds to Create Columns 155

Use Backgrounds to Customize Bullets 156

Use Backgrounds to Add Shadows 157

Use Backgrounds to Customize Links 158

Chapter Summary 161

chapter 7 Beyond HTML and CSS 165

JavaScript 166

Terminology and Syntax 166

Usage: Creating a Drop-Down Navigation Bar 168

Learning More 171

PHP 172

Terminology and Syntax 172

Usage: Process a Form 174

Learning More 175

XML 176

Terminology and Syntax 177

Usage: Exchange Data with RSS 179

Learning More 181

Chapter Summary 181

chapter 8 Templates and Media Types 185

Finding Stock Templates 186

Template Options 187

Template Sites 189

Blogging 190

Hosted Blogging 190

Custom Blogging 192

Templates in Dreamweaver 193

Working with Dreamweaver Templates 194

Maintaining Pages with Adobe Contribute 199

Media Types 199

Printer-Specific Style Sheets 200

Mobile-Specific Style Sheets 202

Chapter Summary 204

DeMYSTiFieD / Web Design DeMYSTiFieD / Wendy Willard / 801-6 / Front Matter

Contents xi

chapter 9 Going Live 207

Testing 208

Testing the Code 208

Testing the Display 211

Testing the Usability 211

Uploading to a Web Server 217

Desktop FTP 218

Web-based FTP 219

Documentation 221

Style Guides 221

Helping Users Find the Site 222

Search Engine Methodology 222

Submit Your Site 226

Increase Your Ranking 226

Track Your Progress 228

Chapter Summary 229

chapter 10 E-mail Design 233

E-mail Standards 234

Planning for E-mail Design 235

Pros and Cons of HTML E-mail 235

Know Your Audience 237

Know the Available Tools 239

Coding for E-mail Design 240

Recommendations 241

Testing 249

Chapter Summary 252

Final Exam 255

Answers to Quizzes and Final Exam 271

Index 273

This page intentionally left blank

xiii

Acknowledgments

I’d like to send out a special thanks to my technical editor, Chrissy. Even

though I had written a ton about web design before, Chrissy really challenged

my thought process throughout the course of writing this book. As a result, the

content is much stronger, more succinct, and more clearly explained. Chrissy—

you have truly made this a better book. Thank you!

And as always, I must thank my family for sticking by me even when I said

(for the tenth time), “I just need to finish this chapter and then we can go…”

 Psalm 100