~ STUDY ZONE BOOK

webdesign.indb IIwebdesign.indb II 3/17/11 1:50 PM3/17/11 1:50 PM

Web Design

with HTML and CSS

Digital

Classroom

webdesign.indb Iwebdesign.indb I 3/17/11 1:50 PM3/17/11 1:50 PM

webdesign.indb IIwebdesign.indb II 3/17/11 1:50 PM3/17/11 1:50 PM

Web Design

with HTML and CSS

Digital

Classroom

Jeremy Osborn, Jennifer Smith, and the AGI Training Team

webdesign.indb IIIwebdesign.indb III 3/17/11 1:50 PM3/17/11 1:50 PM

Web Design with HTML and CSS Digital Classroom

Published by

Wiley Publishing, Inc.

10475 Crosspoint Boulevard

Indianapolis, IN 46256

Published by Wiley Publishing, Inc., Indianapolis, Indiana

Published simultaneously in Canada

ISBN: 978-0-470-58360-9

Manufactured in the United States of America

10987654321

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form

or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as

permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior

written permission of the Publisher, or authorization through payment of the appropriate per-copy fee

to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978)

646-8600. Requests to the Publisher for permission should be addressed to the Legal Department,

Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317)

572-4355, or online at http://www.wiley.com/go/permissions.

Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or

warranties with respect to the accuracy or completeness of the contents of this work and specifically

disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No

warranty may be created or extended by sales or promotional materials. The advice and strategies

contained herein may not be suitable for every situation. This work is sold with the understanding

that the publisher is not engaged in rendering legal, accounting, or other professional services.

If professional assistance is required, the services of a competent professional person should be

sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact

that an organization or Website is referred to in this work as a citation and/or a potential source of

further information does not mean that the author or the publisher endorses the information the

organization or Website may provide or recommendations it may make. Further, readers should be

aware that Internet Websites listed in this work may have changed or disappeared between when this

work was written and when it is read.

For general information on our other products and services or to obtain technical support, please

contact our Customer Care Department within the U.S. at (800) 762-2974, outside the U.S. at (317)

572-3993 or fax (317) 572-4002.

Please report any errors by sending a message to errata@agitraining.com

Library of Congress Control Number: 2009936395

Trademarks: Wiley and related trade dress are registered trademarks of Wiley Publishing, Inc., in the

United States and other countries, and may not be used without written permission. The AGI logos are

trademarks of American Graphics Institute, LLC 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.

Wiley Publishing, Inc. is not associated with any product or vendor mentioned in this book.

Wiley also publishes its books in a variety of electronic formats. Some content that appears in print

may not be available in electronic books.

webdesign.indb IVwebdesign.indb IV 3/17/11 1:50 PM3/17/11 1:50 PM

About the Authors

Jeremy Osborn is the Content Director at American Graphics Institute. He has more than 15 years of

experience in web, graphic design, filmmaking, writing, and publication development for both print

and digital media. He is the author of the Dreamweaver CS5 Digital Classroom and has contributed to

many of the titles in the Digital Classroom book series. Jeremy holds a MS in Management from the

Marlboro College Graduate Center and a BFA in Film/TV from the Tisch School of the Arts at NYU.

Jennifer Smith is a founding member of American Graphics Institute (AGI) and serves as its Vice

President. Prior to founding AGI, she worked in advertising as an art director and served as a principal

in a Pennsylvania-based design firm. She is the author of more than 20 books on electronic publishing.

Jennifer’s 20 years of design experience bridge the gap between technical and creative, and she

frequently works with both developers and designers. A renaissance artist with technology, you’ll find

Jennifer integrating her design skills with web, interactive, and application development projects.

The AGI Creative Team is composed of web design experts and instructors from American Graphics

Institute (AGI). They work with many of the world’s most prominent companies, helping them

use creative software to communicate more effectively and creatively. They work with design,

development, creative, and marketing teams around the world, delivering consulting, private

customized training programs, and teach regularly scheduled classes at AGI’s locations. The Digital

Classroom authors are available for professional development sessions at companies, schools and

universities. More information is available at agitraining.com and digitalclassroom.com.

webdesign.indb Vwebdesign.indb V 3/17/11 1:50 PM3/17/11 1:50 PM

Acknowledgments

Thanks to Kristin Osborn for support and encouragement, and also to Isaiah and the team at AGI

for testing smoothies. Thanks to the instructors at AGI for input, assistance and reviews. Thanks to

iStockphoto.com for many of the images used in the book.

webdesign.indb VIwebdesign.indb VI 3/17/11 1:50 PM3/17/11 1:50 PM

Credits

Writing

Jeremy Osborn, Jennifer Smith

President, American Graphics Institute and

Digital Classroom Series Publisher

Christopher Smith

Executive Editor

Jody Lefevere

Acquisitions Editor

Aaron Black

Technical Editors

Haziel Olivera

Editors

Marylouise Wiack, Karla Melendez

Editorial Director

Robyn Siesky

Business Manager

Amy Knies

Senior Marketing Manager

Sandy Smith

Vice President and Executive Group

Publisher

Richard Swadley

Vice President and Executive Publisher

Barry Pruett

Senior Project Coordinator

Lynsey Stanford

Project Manager

Cheri White

Graphics and Production Specialist

Jason Miranda

Media Development Project Supervisor

Chris Leavey

Proofreading

Jay Donahue, Barnowl Publishing

Indexing

Michael Ferreira

Stock Photography

iStockPhoto.com

webdesign.indb VIIwebdesign.indb VII 3/17/11 1:50 PM3/17/11 1:50 PM

webdesign.indb VIIIwebdesign.indb VIII 3/17/11 1:50 PM3/17/11 1:50 PM

IXTable of Contents

Starting Up

About Web Design with HTML

and CSS Digital Classroom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Prerequisites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

System requirements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Understanding menus and commands . . . . . . . . . . . . . . . . . 3

Understanding how to read HTML

and CSS code changes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Loading lesson ﬁ les . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Video tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Hosting your websites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Lesson 1: Planning Your Website

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

The goals of web design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

The diﬀ erence between print design

and web design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

The web demands user interaction . . . . . . . . . . . . . . . . . . . . 10

Deﬁ ning the user experience. . . . . . . . . . . . . . . . . . . . . . . . . . 11

User-centered design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

The stages of the planning process . . . . . . . . . . . . . . . . . . . . 11

Deﬁ ning goals and strategy. . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Research. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Scenarios and characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Information architecture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Deﬁ ning the navigation design

of the SmoothieWorld site . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Rethinking site navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

The role of usability testing . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Wireframes, prototypes, and mockups. . . . . . . . . . . . . . . . . 20

The evolving ﬁ eld of interactive prototypes . . . . . . . . . . . . 22

Be creative during the planning process . . . . . . . . . . . . . . . 23

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Contents

Web Design

with HTML and CSS

t'VMMDPMPSTUFQCZTUFQ

JOTUSVDUJPOBMCPPL

t5SBJOJOHGSPN

FYQFSJFODFEFYQFSUT

A Complete Training Package!

+FSFNZ0TCPSO+FOOJGFS4NJUIBOEUIF"(*$SFBUJWF5FBN

g Pa

kage

ack

ge!

5VUPSJBMTBOEMFTTPOöMFTPO

EJHJUBMDMBTTSPPNCPPLTDPN

TDP

webdesign.indb IXwebdesign.indb IX 3/17/11 1:50 PM3/17/11 1:50 PM

Contents

Web Design with HTML and CSS Digital Classroom

Lesson 2: Fundamentals of the Web

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

How web pages work. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

The Internet and World Wide Web domain names . . . . . . 26

Domain names and hosting. . . . . . . . . . . . . . . . . . . . . . . . . . . 27

The language of the web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

The evolution of the web and web standards . . . . . . . . . . 28

Separating structure, style, and interactivity . . . . . . . . . . . 30

Designing for the web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Know your audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Know that your site’s viewers are impatient . . . . . . . . . . . . 32

Designing for the screen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Understanding how your audience

will read your web content. . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Lesson 3: Web Design Tools

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Web editors versus WYSIWYG tools . . . . . . . . . . . . . . . . . . . . 36

Plain text editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Text editors for web design . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

WYSIWYG editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Deﬁ ning sites in Dreamweaver or Expression Web . . . . . . 45

Obtaining Expression Web or Dreamweaver. . . . . . . . . . . . 45

Creating a new site in Dreamweaver . . . . . . . . . . . . . . . . . . 46

Importing an existing site into Dreamweaver CS5 . . . . . . 48

Creating a new site in Expression Web . . . . . . . . . . . . . . . . . 50

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

webdesign.indb Xwebdesign.indb X 3/17/11 1:50 PM3/17/11 1:50 PM

Contents

XITable of Contents

Lesson 4: Fundamentals of HTML, XHTML, and CSS

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Web languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Web page structure is based on HTML . . . . . . . . . . . . . . . . . 56

The details of XHTML syntax . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Doctype lets the web browser know what to expect. . . . 58

The W3C and page validation . . . . . . . . . . . . . . . . . . . . . . . . . 59

HTML structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Placing images in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

The role of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Styling a heading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Understanding class styles and <span>s. . . . . . . . . . . . . . . 70

Three ways to use styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Internal versus external style sheets . . . . . . . . . . . . . . . . . . . 72

Creating an external style sheet . . . . . . . . . . . . . . . . . . . . . . . 72

What makes styles cascading . . . . . . . . . . . . . . . . . . . . . . . . . 74

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Lesson 5: Graphics, Color, and Transparency

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Optimizing graphics for the web . . . . . . . . . . . . . . . . . . . . . . 78

Resizing the image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Adjusting the image size. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Applying the Unsharp Mask ﬁ lter to an image. . . . . . . . . . 84

Selecting the best image format . . . . . . . . . . . . . . . . . . . . . . 85

Choosing the right ﬁ le format. . . . . . . . . . . . . . . . . . . . . . . . . 86

Choosing the best ﬁ le format for your image. . . . . . . . . . . 86

Saving images as JPEGs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

Choosing the quality of a JPEG . . . . . . . . . . . . . . . . . . . . . . . . 87

Previewing your image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Creating a transparency eﬀ ect in a JPEG image. . . . . . . . . 90

Saving your settings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

Saving images as GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Optimizing the GIF image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Using the color table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

webdesign.indb XIwebdesign.indb XI 3/17/11 1:50 PM3/17/11 1:50 PM

XII

Contents

Web Design with HTML and CSS Digital Classroom

Adding a matte to a GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Animating a GIF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Saving as a PNG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Slicing an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Viewing the completed ﬁ le . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Creating slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

Changing the attributes of the slices. . . . . . . . . . . . . . . . . . 109

Saving slices out of Photoshop . . . . . . . . . . . . . . . . . . . . . . . 110

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Lesson 6: Formatting Text with CSS

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

The importance of typography on the web . . . . . . . . . . . 114

The challenges of fonts on the web. . . . . . . . . . . . . . . . . . . 114

Setting a

font-family . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Sizing text with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Pixels and points are not the best choices. . . . . . . . . . . . . 118

Using a combination of percent

and the em measurement . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Using margins to modify the

space between your text . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Setting paragraph

line-height . . . . . . . . . . . . . . . . . . 127

Transforming text with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Working with HTML lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

Styling HTML lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

webdesign.indb XIIwebdesign.indb XII 3/17/11 1:50 PM3/17/11 1:50 PM

Contents

XIIITable of Contents

Lesson 7: Introduction to CSS Layout

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Working with a CSS reset ﬁ le . . . . . . . . . . . . . . . . . . . . . . . . . 140

A brief history of layout techniques on the web . . . . . . . 142

An overview of page layout options . . . . . . . . . . . . . . . . . . 145

Understanding <div>s: creating a two-column

ﬁ xed-width CSS layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

Understanding the CSS

ﬂ oat property . . . . . . . . . . . . . . 151

Creating columns with the

ﬂ oat property . . . . . . . . . . . 153

Working with the

clear property. . . . . . . . . . . . . . . . . . . 155

Creating a list-based navigation using

ﬂ oats . . . . . . . . 155

Adding text styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

The eﬀ ect of margins and padding

on your ﬁ xed-width layout. . . . . . . . . . . . . . . . . . . . . . . . . . . 160

A review of using margins and padding for layout . . . . 167

Styling your footer with a background image . . . . . . . . . 167

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

Lesson 8: Advanced CSS Layout

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

Building your page layout . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

Removing the background color . . . . . . . . . . . . . . . . . . . . . 174

Working with CSS background images. . . . . . . . . . . . . . . . 177

Using hacks to solve layout problems. . . . . . . . . . . . . . . . . 180

Enhancing your CSS navigation bar. . . . . . . . . . . . . . . . . . . 183

Moving your internal styles to

the external style sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

Creating a style for the active page . . . . . . . . . . . . . . . . . . . 187

Adding images to your sidebar. . . . . . . . . . . . . . . . . . . . . . . 189

Working with absolute positioning . . . . . . . . . . . . . . . . . . . 190

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

Lesson

Adva

CSS

webdesign.indb XIIIwebdesign.indb XIII 3/17/11 1:50 PM3/17/11 1:50 PM

XIV

Contents

Web Design with HTML and CSS Digital Classroom

Lesson 9: Browser Compatibility

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

Why browser testing is important . . . . . . . . . . . . . . . . . . . . 196

Are web pages required to look

the same in all browsers? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Choose the level of browser support you want . . . . . . . . 197

The special case of IE6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Tools to identify browser problems . . . . . . . . . . . . . . . . . . . 200

Virtualization solutions for the Mac OS. . . . . . . . . . . . . . . . 200

Virtualization solutions for Windows. . . . . . . . . . . . . . . . . . 201

Browser compatibility applications . . . . . . . . . . . . . . . . . . . 202

Addressing browser incompatibilities with CSS ﬁ xes. . . 204

Addressing Internet Explorer 6

issues with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Browser incompatibilities in the future . . . . . . . . . . . . . . . 206

Future browser compatibility issues . . . . . . . . . . . . . . . . . . 206

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Lesson 10: Introduction to Interactivity

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

Interactivity on the web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Adobe Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

JavaScript basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

JavaScript events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

Placing your JavaScript into an external document . . . . 220

The Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . 221

JavaScript frameworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Hiding an element with jQuery. . . . . . . . . . . . . . . . . . . . . . . 223

Adding an event to trigger the show eﬀ ect . . . . . . . . . . . 225

Adobe Flash overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

Generating code to add Flash movies to a page . . . . . . . 229

Integrating Flash into a pre-existing design . . . . . . . . . . . 232

Inserting Silverlight content into a web page . . . . . . . . . 235

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

webdesign.indb XIVwebdesign.indb XIV 3/17/11 1:50 PM3/17/11 1:50 PM

Contents

XVTable of Contents

Lesson 11: Mobile Design

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

The need for mobile-optimized websites . . . . . . . . . . . . . 240

How is the mobile experience of the web

diﬀ erent than the desktop? . . . . . . . . . . . . . . . . . . . . . . . . . . 240

Deciding which type of mobile device to target . . . . . . . 241

The trouble with style sheets. . . . . . . . . . . . . . . . . . . . . . . . . 245

Using CSS3 media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254

Lesson 12: HTML5 Essentials

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

Deﬁ ning HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

The motivation behind HTML5 . . . . . . . . . . . . . . . . . . . . . . . 256

HTML5 markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

The

<video>, <audio>,

and <canvas> elements . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Embed media ﬁ les using

<video>

and <audio> elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Provide drawing and animation features

using the

<canvas> element . . . . . . . . . . . . . . . . . . . . . . 260

HTML5 markup is still evolving . . . . . . . . . . . . . . . . . . . . . . . 261

Grouping headings and images . . . . . . . . . . . . . . . . . . . . . . 261

Identifying ﬁ gures and captions. . . . . . . . . . . . . . . . . . . . . . 262

Web forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

The rest of the HTML5 family. . . . . . . . . . . . . . . . . . . . . . . . . 263

Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

Web Workers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Web Storage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

CSS3 integration with HTML5 . . . . . . . . . . . . . . . . . . . . . . . . 264

How to begin using HTML5/CSS3. . . . . . . . . . . . . . . . . . . . . 266

Starting with an HTML5 foundation . . . . . . . . . . . . . . . . . . 267

Words of encouragement. . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

webdesign.indb XVwebdesign.indb XV 3/17/11 1:50 PM3/17/11 1:50 PM

webdesign.indb XVIwebdesign.indb XVI 3/17/11 1:50 PM3/17/11 1:50 PM

1Starting Up

About Web Design with HTML and CSS Digital Classroom

Creating e ective websites requires an understanding of design principles, as well as the

underlying technology that is used to deliver and display content to your audience. The Web

Design with HTML and CSS Digital Classroom provides the information you need to design,

develop, publish, and maintain websites. Whether you are just starting out in the  eld of web

design, or are experienced with design tools like Dreamweaver or Expression Web, you’ll

 nd this book helpful at explaining the underlying concepts for organizing, creating, and

delivering web content e ectively using best practices.

The Web Design with HTML and CSS Digital Classroom helps you to get up-and-running

quickly. Although you can work through the lessons in this book in any sequence, we

recommend that you start in at the  rst lesson and progress through the book in the

sequence in which they are presented. Each lesson includes detailed, step-by-step instructions,

background information, companion video tutorials, and lesson  les.

The Web Design with HTML and CSS Digital Classroom is like having your own expert

instructor guiding you through each lesson while you work at your own pace. This book

includes 12 self-paced lessons that let you discover essential skills, explore web design, and

learn HTML, CSS and image editing techniques that will save you time and allow you to

more easily create e ective websites. You’ll become productive right away with real-world

exercises and simple explanations. Each lesson includes step-by-step instructions and lesson

 les available on the Digital Classroom website at www.digitalclassroombooks.com/webdesign. The

Web Design with HTML and CSS Digital Classroom lessons are developed by the same team

of instructors and experts who have created many of the o cial training titles for companies

such as Adobe Systems and Microsoft. Now you can bene t from the expert instructors and

clear, detailed instructions provided by the American Graphics Institute team.

Prerequisites

Before you start the Web Design with HTML and CSS Digital Classroom lessons, you should

have a working knowledge of your computer and its operating system. You should know how

to use the directory system of your computer so that you can navigate through folders. You

also need to understand how to locate, save, and open  les, and you should also know how

to use your mouse to access menus and commands. If you are just starting out with using a

computer, you should become familiar with its operation  rst, using resources such as the

Windows 7 Digital Classroom or Mac OS X Digital Classroom.

We recommend that you install a text editor to use when working with the HTML and CSS

code. The speci c editor is not important, but you should choose and install a text editor so

that you can easily open and work with the lesson  les presented in this book. If you aren’t

sure which to use, you can wait until you get to Lesson Three where we discuss working

with code and using text editors. However, if you’re comfortable installing a text editor,

we’ve listed some options below.

Starting up

webdesign.indb 1webdesign.indb 1 3/17/11 1:50 PM3/17/11 1:50 PM

Prerequisites

Web Design with HTML and CSS Digital Classroom

Some Mac OS text editors include BBedit and TextWrangler, both of which are available

at http://www.barebones.com. Or you can use TextMate which is available for download

at http://macromates.com. Another Mac OS text editor is Coda which can be found at

http://www.panic.com/coda/.

If you work on a Windows computer you may wish to use E Text Editor which is available at

http://www.e-texteditor.com or Microsoft Visual Web Developer Express which can be found at

http://www.microsoft.com/express/Web/.

If you already have a visual web design tool like Adobe Dreamweaver or Microsoft

Expression Web installed on your computer, you can use the coding tools integrated with

these software packages instead of installing a dedicated text editor. Although both Adobe

and Microsoft o er free trial versions of these software tools, if you don’t have either one

installed, we recommend skipping them for now and instead using any one of the text

editors listed above while working with this book. By using a text editor, you can focus on

the design and underlying code rather than learning the user interface and functions of a

speci c software package.

System requirements

Before starting the lessons in the Web Design with HTML and CSS Digital Classroom, make

sure that your computer is equipped for creating and managing websites. Because you will

be using a variety of software tools, there is no formal minimum requirement for your

computer, however we suggest that your computer meet or exceed the following guidelines:

Windows OS

Intel

Pentium

4, AMD Athlon

64, or Multicore Intel

processor; Microsoft

Windows

XP with Service Pack 2; Windows Vista

Home Premium, Business, Ultimate, or Enterprise

with Service Pack 1; or Windows 7

1GB recommended RAM 1GB of available hard-disk space for working with  les

1280 × 800 display with 16-bit video card

Broadband Internet connection

Macintosh OS

Multicore Intel

processor

Mac OS X v10.4 or greater

1 GB of RAM 1 GB of available hard-disk space for working with lesson  les.

1280 × 800 display with 16-bit video card

Broadband Internet connection

webdesign.indb 2webdesign.indb 2 3/17/11 1:50 PM3/17/11 1:50 PM

Understanding menus and commands

3Starting up

Understanding menus and commands

Menus and commands within the software tools discussed in this book are identi ed by using

the greater-than symbol (>). For example, the command to print a document might appear

as File > Print, representing that you click the File menu, then choose the Print command.

Understanding how to read HTML and CSS code changes

Many of the step-by-step instructions in the book involve typing one line (or more) of

HTML or CSS code to a previously existing block of code. In these cases, the new code for

you to add is highlighted in red to help you quickly identify the text to be added to your

lesson  le.

For example, this code represents a line already present in your lesson  le:

The code highlighted here in red is what you would need to add:

Loading lesson  les

The Web Design with HTML and CSS Digital Classroom uses  les for the exercises with each of

the lessons. These  les are available for download at www.DigitalClassroomBooks.com/webdesign.

You may download all the lessons at one time or you may choose to download and work

with speci c lessons.

For each lesson in the book, the  les are referenced by the  le name of each  le. The exact

location of each  le on your computer is not used, as you may have placed the  les in a

unique location on your hard drive. We suggest placing the lesson  les in the My Documents

folder or on the Desktop so you can easily access them.

Downloading and copying the lesson  les to your hard drive:

1 Using your web browser, navigate to www.DigitalClassroomBooks.com/webdesign

. Follow

the instructions on the web page to download the lesson  les to your computer.

2 On your computer, navigate to the location where you downloaded the  les and right-

click (Windo

ws) the .zip  le you downloaded, then choose Extract All or double click

on the .zip  le (Mac OS).

3 If using a Windows computer, the Extract Compressed (Zipped) Folders window

appears. In this windo

w, specify the location where you want to save the  les, and click

Show Extracted Files When Complete. Mac OS users will  nd the  les extracted to the

same location as the original .zip  le.

webdesign.indb 3webdesign.indb 3 3/17/11 1:50 PM3/17/11 1:50 PM

Video tutorials

Web Design with HTML and CSS Digital Classroom

Video tutorials

The www.DigitalClassroomBooks.com/webdesign site provides Web Design with HTML and CSS

Digital Classroom book readers with video tutorials that enhance the content of this book.

The videos use the popular Silverlight player for viewing on your desktop or notebook

computer, or use iPad-compatible video if you are using an iPad to read an electronic version

of this book. Most other ePub devices are not optimized for playing video, and you should

use a notebook, desktop, or tablet computer for viewing the video tutorials if you are using a

dedicated e-reader such as a nook, Kindle, kobo, or Sony e-reader. An Internet connection is

necessary for viewing the supplemental video  les.

The videos enhance your learning as key concepts and instructions are discussed by the

book’s authors. The video tutorials supplement the book’s contents, and do not replace the

book. They are not intended to cover every item discussed in the book, but will help you

gain a better or more clear understanding of topics discussed in many lessons of the book.

Hosting your websites

The websites you will create using this book require only your computer, but eventually you will

want to create websites to share with the world. To do this, you will need to put your website on

a computer connected to the Internet that is always accessible. This is known as a web server. If

you don’t want to get involved in creating computers that host a website, you can pay a company

to provide space on their web servers for you. A good place to look for a hosting provider is here:

http://www.microsoft.com/web/jumpstart/hosting.aspx. If you want to set up your own computer for

hosting a web server and you are using any Windows computer, you can turn it into a web server

at no cost by using the Web Platform Installer available at: http://www.microsoft.com/web. If you are a

Mac OS user, you can get Mac OS X server from Apple to use a Mac OS computer as a web server.

If you are just getting started, you don’t need to worry about web hosting just yet. But you’ll

 nd this information useful once you start creating sites.

webdesign.indb 4webdesign.indb 4 3/17/11 1:50 PM3/17/11 1:50 PM

Additional resources

5Starting up

Additional resources

The Digital Classroom series of books can be read in print or using an e-reader. You can also

continue your learning online with the training videos, or at seminars, conferences, and in-

person training events led by the authors.

DigitalClassroomBooks.com

You can contact the authors, discover any errors, omissions, or clari cations that have been

identi ed since the time of printing, and read excerpts from the other Digital Classroom

books in the Digital Classroom series at digitalclassroombooks.com.

Seminars, conferences, and training

The authors of the Digital Classroom seminar series frequently conduct in-person seminars

and speak at conferences, including the annual CRE8 Conference. Learn more about their

upcoming speaking engagements and training classes at agitraining.com.

Resources for educators

If you are an educator, contact your Wiley education representative to access resources for this

book designed just for you, including instructors’ guides for incorporating Digital Classroom

books into your curriculum. If you don’t know who your educational representative is, you

can contact the Digital Classroom books team using the form at DigitalClassroomBooks.com.

webdesign.indb 5webdesign.indb 5 3/17/11 1:50 PM3/17/11 1:50 PM

webdesign.indb 6webdesign.indb 6 3/17/11 1:50 PM3/17/11 1:50 PM

7Lesson 1, Planning Your Website

What you’ll learn

in this lesson:

• Defining the goals of

web design

• Defining the user

experience

• Understanding the

difference between

wireframes, prototypes,

and mockups

Planning Your Website

In this lesson, you’ll learn how to improve your website by clearly

de ning what you want the site to do during the planning process.

Starting up

This lesson does not use any lesson  les, so you do not need to load any  les before starting

this lesson.

See Lesson 1 in action!

Use the accompanying video to gain a better understanding of how to use some of

the features shown in this lesson. You can  nd the video tutorial for this lesson at

www.digitalclassroombooks.com using the URL provided when you registered your book.

The goals of web design

To understand how to create well designed websites, it is worth understanding the

fundamentals of design. Good design creates experiences that makes people’s lives easier, and

is also aesthetically pleasing. Here are some examples: a well-designed store makes it easy for

customers to  nd products they are looking for, or maybe even products they never knew

Lesson 1

webdesign.indb 7webdesign.indb 7 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

Web Design with HTML and CSS Digital Classroom

they wanted. Drivers can see well-designed road signs from a distance and the message of

the sign can be immediately understood, even at a high rate of speed while driving. A well-

designed chair is comfortable to sit in and also  ts in with the style of the room.

A store, a sign, and a chair are all designed with a speci c intent.

In all these cases, the designer took time to plan the outcome using their skill and experience,

as well as resources such as materials and available budget. Di erent disciplines require di erent

design tools. The web designer is often required to organize information, give it meaning, and

assemble it in a way that is visually attractive using available tools.

When designing for the web, there are some unique challenges compared to other disciplines

arising from the fact that web design is still in its infancy and is evolving rapidly. Even the

de nition of web design is evolving and di cult to de ne. Originally, web design meant

designing pages for a web browser. While this is still true, you now need to consider the

rapidly evolving nature of mobile devices, tablets, smart phones, and consumer electronics that

access the web. Some people make the distinction between mobile design and web design, but

this distinction is evaporating as mobile devices are evolving. For many web professionals, this

rapid evolution of the medium is part of what makes it such an exciting  eld.

Although the design of websites is an evolving  eld, designers do not need to reinvent

the wheel. Web design’s closest relative is print design, and although the two are distinctly

di erent it is worthwhile to compare and contrast them.

The di erence between print design and web design

Print involves seeing; the web involves doing. Books, magazines, posters, newspapers,

brochures, and advertisements all contain information, usually text and images, whose intent

is to deliver some sort of message or content to a reader. More importantly, designers often

try to build a call to action into their work that makes a customer believe there is some

action they should be taking as a result of the design.

webdesign.indb 8webdesign.indb 8 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

9Lesson 1, Planning Your Website

• A visually exciting movie poster’s call to action might be, “Go see this movie!”

• A political campaign displays signs with the call to action, “Vote for me!”

• An advertisement in a magazine o ering a free sample might ha

ve the call to action,

“Contact us to learn more!”

In this 19th century advertisement the call to action implores the customer to

see the product before going home.

Compare a print  yer for a shoe sale with its online counterpart. The call to action for the

print  yer is, “Show up at the store this Saturday to buy these shoes at a discount.” The

information regarding the sale might be enough to compel the customer to get in their car

and go shoe shopping on Saturday, but the designer helps to present the information in a

way that is well organized and gets noticed. Using color, type, and perhaps an illustration or

image, the designer helps to convince the potential customer of the value of this sale.

In some sense, you could say that the print designer’s job is done when she sends the  le

o to the printer. If the customer shows up in the store, it becomes the salesperson’s job to

complete the sale.

webdesign.indb 9webdesign.indb 9 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

Web Design with HTML and CSS Digital Classroom

Now let’s examine the web designer who is largely responsible for leading the prospective

customer through the entire process. If an interested customer comes to the shoe store’s

website, perhaps there is a button that the user clicks to see the shoes that are on sale. The

customer then needs some way to gather more data on the shoes; perhaps there is a table

listing the available shoe sizes, colors, and brands. If the customer takes the leap and puts a

shoe into the site’s shopping cart, this shopping process needs to be designed as well.

In both of these examples, the end result is hopefully the same for the shoe store’s owner:

the customer buys the shoes. In both cases information is transferred from the store to the

customer; however, in the case of the website, the designer is involved in all stages of the sale

process. This is a crucial concept to understand: the web is an active medium and the term to

describe this design process is user interaction design.

The web demands user interaction

The experience of a website is de ned by the interaction the user has with it. For example, a

user clicks on navigation or scrolls down to read a page.

Even the act of reading a book can be de ned as user interaction. In the Western world,

people read from left to right down a page, they turn pages, and scan page numbers and tables

of contents in order to  nd a certain chapter or topic.

Coming back to the web, you don’t just have readers — you have users. Think of the verbs

that describe what you do online: you search websites, watch the weather report, transfer money

between accounts, book airline  ights, and do many other things. The designer needs to think in

these terms when designing pages, anticipating the user’s motivation for coming to the site.

You not only can read an online newspaper, but search, print, email,

tweet, comment and listen.

webdesign.indb 10webdesign.indb 10 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

11Lesson 1, Planning Your Website

De ning the user experience

When it comes to user interaction, o ering too many options can be just as bad as not

o ering enough. If there are multiple pathways available to the user, it is the designer’s

responsibility to make sure the user doesn’t get lost. The entire sum of a user’s interactions

with a website can be called the user experience.

The focus on the user experience di erentiates websites from printed products more than

anything else. This job is so important that there are web professionals called information

architects. Information architecture is de ned as the structure of a website and its pages: how

the site and the site navigation are organized. In its strictest form, information architecture is

not concerned with issues such as color, type, and graphics. In larger design agencies, it is not

uncommon to have an information architect collaborating with the designers, especially at

the beginning stages of designing a website.

Designers need to think like information architects to be e ective. The designs need to

provide the best structure allowing users to get the information they want. For online stores,

they should provide the most e cient way to allow a user to put an object in a shopping cart

and make a purchase. Designers must fully comprehend the web as a medium and understand

its rules and possibilities regarding visual design and text.

User-centered design

It can be di cult to describe how a web designer works because the level of involvement in

a project can vary, from developing a project on her own, to being part of a large team in an

advertising agency. However, in all cases, the designer’s goal is to create sites that serves the

needs of the users. The following section outlines the planning process so that you clearly

understand what the client wants before you begin.

The stages of the planning process

The stages of the planning process can generally be de ned as:

• De ning goals and strategy

• Research

• Information architecture

• Sketching

• Wireframes

• Mockups

You’ll learn mor

e about each of these stages in this chapter.

webdesign.indb 11webdesign.indb 11 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

Web Design with HTML and CSS Digital Classroom

De ning goals and strategy

When designing a website, an important question to ask is, “Why does this website need to

exist?” It seems strange but a client might not be able to tell you exactly why they want a

website. The answer, “Because everyone else has one,” is not a good answer.

Imagine a carpenter who is hired by a homeowner to build a “structure” in their backyard,

with little information provided about the  nal project. The carpenter needs to know the

purpose of the structure. Do they want a shed? A bandstand? A garage? Just as structures have

di erent purposes, so do websites. As a designer you should be able to de ne, or have the

client de ne, the goal of the website in a simple sentence. For example, in this book, you will

be designing a site called SmoothieWorld, which has the following goal:

To be the  rst stop on the web for people looking for Smoothie recipes.

Although the designer may not have de ned this objective, she can certainly contribute

to the conversation. Here are some of the questions that might arise in discussing the

functionality and design of such a site:

• Will the site be free? If yes, will there be advertising and is that something the

designer needs to include in the la

yout?

• Has the client consider

ed how they want to organize the recipes on the site? For example,

could a user submit ingredients the

y have on hand and receive a recipe in return?

• What, if any, user interactions might there be on site. For example, can users submit

recipes or simply bro

wse existing ones?

In larger organizations, these conversations might also involve web developers, who would

be responsible for any database functionality, along with the marketing department, the sales

department, and other interested stakeholders. Even if these discussions take place before you,

the designer, are brought into the project, you will want to have a good understanding of the

goals of a website before you start any design work.

Research

A designer who is practicing user-centered design needs to have some background on what

visitors to a site might be expecting.

Competitive research is one way to  nd this information. In the SmoothieWorld example,

there may not be many competing smoothie sites; however, there are certainly a number of

popular recipe and cooking sites. You should understand how these sites are designed and

what makes them so attractive to users.

In some cases, research can be objective. Perhaps the SmoothieWorld site has existed for some

time and is being redesigned. This is an ideal situation because there should be some data from

the history of the site that you can access. You could request the server logs from the client. A

server log is a record of information that most servers collect by default and is often accessible

from the hosting company or Internet service provider (ISP) for the site. The raw data from

webdesign.indb 12webdesign.indb 12 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

13Lesson 1, Planning Your Website

server logs is not particularly useful until it has been organized. This organization of server

log data is done with analytic software. Analytic software takes information such as the type

of browser the visitor is using, monitor resolution, and which pages are most popular, and

then formats this data to provide a useful pro le of a site’s user base. Often analytical tools are

installed on a site and available as the site is running, so you can gather information about the

site’s e ectiveness on a regular basis.

Scenarios and characters

It can be helpful to envision some  ctitious users of your site. You can create several characters

and think about how they were introduced to your site, what they hope to achieve while using

the site, and what are their priorities. By envisioning the experience through others’ eyes, you

can gain a more user-focused experienced.

Web analytics

You can obtain analytics data in two ways: through the hosting company, and through third-

party analytic software such as Google Analytics or Omniture. Although many hosting

companies provide free analytics services, the depth of the information might be limited and the

data might not be easy to interpret.

A simple graph of how many pages were visited over a week.

More companies are using advanced analytic software to maintain and improve their website.

Third-party analytic software often requires you to add JavaScript to every page on your website,

which allows the software to begin collecting more speci c data such as how long, on average, users

might be spending on a certain page. In addition to the additional data gathered, another bene t of

third-party analytics is the way they present charts and graphs in a more user-friendly way.

(continues)

webdesign.indb 13webdesign.indb 13 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

Web Design with HTML and CSS Digital Classroom

Web analytics (continued)

Third-party analytic software often organizes visitor data in useful ways; this example displays the

visitor’s browser version.

Although Internet marketers use analytics to improve websites, it can also be useful for design

purposes. For example, if analytics data shows that a particular recipe on your SmoothieWorld

site has become extremely popular (for whatever reason), a designer might “promote” that

page by adding a link or photo to the recipe on the home page. It’s a good idea to incorporate

analtyics into your site designs so your clients can measure the e ectiveness of their sites.

Popular analytics tools

Google Analytics

Google Analytics is a popular choice due to its integration with Google’s AdWords campaign,

and because it is o ered at no cost.

Omniture

Omniture was recently purchased by Adobe, and provides enterprise-level analytics tools for

large businesses.

HaveaMint.com

This service has a simple yet powerful interface that makes working with server logs enjoyable

and interesting.

Chartbeat.com

Chartbeat combines standard charts and graphs with alert systems to help busy sites stay on top

of their server tra c.

For more information on analytics tools and services, see the book Web Analytics: An Hour a Day

by Avinash Kaushik.

webdesign.indb 14webdesign.indb 14 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

15Lesson 1, Planning Your Website

Information architecture

Design is not just about visuals. The word design comes from the Latin word designare, which

means to mark out, devise, or choose. This is a good reminder that you should choose or

plan the structure of a website before you consider the visuals. The term used to describe

the planning of a website’s structure is information architecture. Information architecture is

concerned with providing optimal navigation paths for the user and helping them get from

point A to point B. For example, the user may need to go from the home page to the best

recipe for a mango/banana smoothie.

A site map is often used in the discipline of information architecture.

In more formal terms, information architecture is the process of organizing the site’s content

and de ning the hierarchy and navigation of the site. Since most sites have a “client” of some

sort, information architecture is also where you discuss the scope of the site. Scope relates

to the number of pages in a site as well as the features and functionality the site includes.

Asingle-page website with some text and a few images would be a site with a small scope,

while a 200-page website that includes a video library, database integration, and sends alerts

to a user’s mobile phone would be a site with a large scope.

webdesign.indb 15webdesign.indb 15 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

Web Design with HTML and CSS Digital Classroom

The business of web design

There is an interlocking relationship between the budget of a site and its scope and timeline.

Achange in one element will a ect at least one of the others.

If you are freelance web designer, you may be dealing with a client directly; if you are working

in an organization, the “client” might be a manager or a di erent division or department. In

both situations the rules are similar: if the budget, scope, or deadline shifts, it will a ect at least

one of the other aspects of the project. After you complete the information architecture phase, it

is quite likely that the client will ask for new features. As the designer, you need to communicate

how this will a ect either the budget or the timeline for delivery. In a similar way, if the timeline

for delivery changes and the site needs to be delivered sooner than anticipated, then you need to

either exclude features or change the budget to re ect this.

Ideally, the client will be able to tell you which of these factors is the most important. For

example, if there is a  xed budget for a site and there is absolutely no way the client can exceed

it, then you will have to ensure that features can be completed within the budget.

Resources

Issues such as managing projects, legal contracts, and other aspects of web design require

attention. Here are some resources to get you started:

AIGA

AIGA is an association dedicated to supporting designers. Although it o ers memberships, it also

provides non-members access to free resources such as tips on how to create contracts as well as

forms you can use.

www.aiga.org/content.cfm/design-and-business

Graphic Artists Guild

The Guild has local chapters in many cities. They publish the Graphic Artists Guild’s Handbook of

Pricing & Ethical Guidelines, which can help you determine the appropriate fees for your services and

also provides sample legal forms and tips on how to market yourself.

www.graphicartistsguild.org

A List Apart

An invaluable online resource for all things related to web design, this site has articles about

business practices, client management, information architecture, and much more. Each year, the

site also conducts and releases a survey of web designers, which provides useful data about salary

ranges, job titles, and more. Type survey in the search  eld on their home page to  nd the most

recent one.

www.alistapart.com

De ning the navigation design of the SmoothieWorld site

The nature and content of your layout depend on how you de ne a site’s organizational and

navigational structure. One of the bene ts of creating wireframes, prototypes, and mockups

is to allow you to build your site more rapidly. One popular method for exploring possible

navigation in the design phase is to use a pencil, sticky notes, and a blank wall. This lets you

rapidly “reorganize” a site, and also allows for collaboration and doesn’t require any special skills.

webdesign.indb 16webdesign.indb 16 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

17Lesson 1, Planning Your Website

Let’s consider two types of site structures that will eventually translate to the navigation

menus: wide and deep. First you have a wide navigation structure in which the main pages

arelisted horizontally:

A wide site navigation has primary links always accessible.

In a wide navigation system, the main pages are all visible together and for small sites, this is

often a logical choice. With the navigation bar on every page the user can easily jump to any

of the main pages with a single click. The disadvantage of a wide navigation structure is that

there may be limits to how much information can easily be displayed if there are too many

categories. You are limited by the width of the screen and must also remember that if you

present too many options, the site may overwhelm or confuse the user.

An alternative method for organizing content is deep navigation, which simpli es the main

navigation and then groups related pages into categories.

A deep site navigation has fewer primary links and more secondary

and tertiary links.

webdesign.indb 17webdesign.indb 17 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

Web Design with HTML and CSS Digital Classroom

Deep navigation provides simpli ed entry-points for the user; however, the designer must

decide how to organize the pages inside these main links. Common solutions to this problem

include drop-down menus and secondary navigation menus.

Rethinking site navigation

The concept of the “home page” may not be as crucial as it once was due to the power of

search engines, how their use has in uenced users, along with social media such as Twitter

and Facebook which make it more likely that a user will enter your site in unique ways.

The  rst time a user experiences your site may not be through the home page, but from a

search engine result or a link to an internal page on your site from another website or from a

Twitter feed or a Facebook post. Every page on your site now becomes a home, needing to

welcome users into your site.

Although this shifts the role of the home page, it also shows the importance of understanding

why users are coming to your sites and why you need to provide them clear navigational

structure and content that helps them  nd what they need.

The role of usability testing

Usability testing is related to, but distinct from, the  eld of design. Usability testing is the

process of evaluating how users interact with a website. It often involves giving a user a task

to complete on a given site and then observing how well they complete the task, whether

they can complete it. If a user encounters di culty or is confused by the process, these

problems are noted and solutions are then tested and integrated into the site.

Software such as Camtasia Morae facilitates usability testing by recording a user’s interaction with a website,

including video of users’ reactions.

webdesign.indb 18webdesign.indb 18 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

19Lesson 1, Planning Your Website

A common problem with usability testing is that it often occurs too late in the design

process. If you have users test the site after you have built it completely, the feedback may

be useful but you may need to discard work that you have already completed. For example,

if you have completely built a site using a wide navigation, and testing shows you need to

revise it to use deep navigation, this will be more di cult if you have already built all your

pages and created the graphics.

A usability exercise relating to navigation design

Usability testing must be done correctly or you will receive invalid feedback, or feedback that

isn’t useful. For example, it’s important to conduct testing with subjects who truly represent the

target audience, not those who may already be familiar with the site.

To better understand how usability testing works, try the following exercise with another person,

putting them in the role of the user and yourself in the role of the tester. Most usability tests ask

users to speak their thoughts out loud and they are recorded in order to capture the information.

While you won’t be recording the user, you will ask them to respond out loud to some questions.

First  nd a suitable website to use as an example, and then ask the other person the following list

of questions:

• What are your  rst impressions of the layout of this page immediately upon viewing it?

• What section of the page does your eye go to  rst?

• Is that section the most important element on the page?

• What associations do the colors and images evoke? These could be emotions, feelings,

memories, places, or anything else the colors bring to your mind.

• Without clicking on anything on the site, describe the navigation choices you see on the

home page and indicate what you think they do. Feel free to move around the page by

scrolling, but do not click on anything right now.

• Without clicking on anything yet, if you were exploring, what would you click on  rst

andwhy?

These questions give you a sense of how a usability test works. The next step would be to give

the user speci c tasks, and pay attention to how they perform them. As you can see, observing

users, their reactions, the decisions they make, and any obstacles they encounter is vital to

usability testing. We’ve only scratched the surface in discussing usability testing. For a greater

understanding, review the resources below.

Usability Resources

Rocket Surgery Made Easy by Steve Krug

This book provides you with the philosophy and the techniques you can use to integrate simple

usability testing into your design process.

User Interface Engineering

Although this is a usability  rm that specializes in research, training, and consulting, their website

provides free articles that can help you understand the role of usability, as well as useful tips.

www.uie.com/articles

webdesign.indb 19webdesign.indb 19 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

Web Design with HTML and CSS Digital Classroom

Wireframes, prototypes, and mockups

After you have de ned the goals and decided on the information architecture of a website,

there are important stages in the design process you should complete before writing a single

line of HTML or CSS. If you begin designing visuals or building pages before you are prepared,

you may end up discarding your original work. By using wireframes, mockups, and prototypes.

you can quickly create to explore di erent design options and functionality for the site. Making

changes before writing code and creating graphics allows you to make changes more quickly

and is less costly and more e cient. Whether or not you use all three models generally depends

on the size of the project. Larger projects that incorporate complicated elements, such as

connection to a database, or use multiple features, will bene t from using all three models.

Wireframes

Wireframes are typically created in black and white or shades of gray, using placeholders

for images. Wireframes avoid the visual design of the site and are more concerned with the

organization of the content and features. You can create a wireframe in a program like Adobe

Illustrator, Adobe Fireworks, Microsoft Visio, or Omnigra e, or even by using a sketch on paper or

a whiteboard. A wireframe does not need to be interactive, and is a fast way to start a conversation

between designers, developers, clients, and other members who are involved in a project.

Wireframes use elements such as shapes, lines, and text to begin structuring a web page.

Mockups

Mockups are sometimes the result of wireframes, although it is possible to skip the

wireframing step for less-complex sites. You can create them in an image editor such as

Photoshop. You create mockups to begin exploring the visual elements of a site, such as the

user interface elements such as buttons and navigation bars, typography, layout, and imagery

like photographs and illustrations. Some designers prefer to create two or three di erent

webdesign.indb 20webdesign.indb 20 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

21Lesson 1, Planning Your Website

styles for clients or collaborators to review. In some cases, the  nal assets in a mockup might

be used directly in the  nished application.

Mockups are often done in a program such as Photoshop and are eventually converted to HTML.

Prototypes

Prototypes are usually built for demonstration purposes. They di er from mockups and

wireframes because they show functionality and often demonstrate how the user interacts

with elements on a page. For example, if a website will have a shopping cart, a prototype

would help de ne the way the cart will function once it is completed. Aspects of the

shopping cart that may be impossible or di cult to display as an image such as animation,

response time, or what happens when a user removes an item from the cart are ideal

candidates for a prototype. You can build a prototype using HTML, Flash animation, or a

program such as Microsoft SketchFlow or Balsamiq Mockups.

A prototype may have a “sketch” appearance and allow for user interaction

such as entering data and clicking buttons. This prototype was created using

Microsoft Sketch ow..

webdesign.indb 21webdesign.indb 21 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

Web Design with HTML and CSS Digital Classroom

The evolving  eld of interactive prototypes

Traditional wireframes, mockups, and prototypes cannot fully account for the interactive

nature of the web. For example, page mockups created in Photoshop are static so they cannot

demonstrate how text on the page re ows or how a navigation menu expands and collapses.

Wireframes have similar problems because they are not interactive.

Wireframing and prototyping software has evolved over the years, and a new breed of software

and web applications are making the interactive prototyping possible. These include elements

such as rollover buttons, working form elements, the ability to update common page elements

quickly, and simple animation.

Interactive prototyping resources

Following are some prototyping and wireframe software resources. Most of these programs are

available in trial versions, so you can compare and evaluate them based on your needs.

Microsoft SketchFlow

SketchFlow is an application designed speci cally for prototyping. In addition to a built-in

library of interactive controls, it also allows you to add animated components and data-driven

user-interface elements. SketchFlow also features a feedback system that allows team members

and clients to add comments to a prototype and then deliver that feedback to the creator.

Sketch ow is currently included with the Expression Blend software. If you are a full time

student, you can obtain a free copy of the Expression software at DreamSpark.com.

www.microsoft.com/expression/products/Sketch ow_Overview.aspx

Adobe Fireworks

Adobe Fireworks is a vector-and-bitmap image editor that also includes features for creating

wireframes and prototypes. For example, it includes a Pages feature that builds multi-page

documents and generates multi-page HTML elements that are speci cally for the web. It also

includes templates for wireframes, mobile devices, and grid systems, among others.

www.adobe.com/products/ reworks/

EightShapes Unify

For designers who have a print background and are using Adobe InDesign, EightShapes o ers

a free set of components and templates. This is a complete system that allows you to build

wireframes and prototypes using standard print layout techniques.

http://unify.eightshapes.com/

webdesign.indb 22webdesign.indb 22 3/17/11 1:50 PM3/17/11 1:50 PM

The goals of web design

23Lesson 1, Planning Your Website

Be creative during the planning process

The planning stage can be a fun part of the site creation process, because this is where you

can propose those crazy ideas that may never make it onto the  nal site. You want to avoid

limiting yourself, as there will be time for a reality check once the designing and coding

begins! Keep in mind that in the early stages of site development, collaboration is important.

Whether it involves user testing or receiving feedback from a wireframe, if you learn how to

collaborate and incorporate good ideas into your design, your  nal product will bene t.

• Early sketches should be drawn quickly

It’s OK for the early sketches of y

our web pages to be loose, lacking in detail, and

incomplete. It’s more important to capture your initial ideas in some form. Sketches

are cheap and disposable, so don’t focus on the quality of a sketch; focus on the ideas

behind it.

• Failure is an option!

You are unlik

ely to get concepts right the  rst time. In fact, you may not be trying

hard enough if you aren’t discarding some ideas for layout, imagery, or themes for

your site.

• Accept criticism

Web design can be a tough  eld, and y

our designs and ideas will at some point be

questioned or knocked-down. Try not to take it personally when this happens. That

mockup you worked on all day really may not be a good  t for the project. If you

can keep an open mind, and collaborate with others, your design will ultimately be

stronger. You may even  nd that ideas rejected from one project might be a good  t

for some future site.

webdesign.indb 23webdesign.indb 23 3/17/11 1:50 PM3/17/11 1:50 PM

Self study

Web Design with HTML and CSS Digital Classroom

Self study

1 Using a paper and pencil, come up with your own version of how the SmoothieWorld

site might be organized. Research popular recipe websites. How do they organize their

large collection of recipes?

2 Find a partner and conduct the usability test outlined earlier in this lesson. What did you

learn that you might apply to a site lik

e SmoothieWorld?

Review

Questions

1 What is the di erence between a wir

eframe, mockup, and prototype?

2 De ne information architecture.

3 What is usability testing and how does it r

elate to web design?

Answers

1 A wireframe is a diag

ram or sketch of a web page that focuses on structure and layout,

not visual elements such as color or g

raphics.

A mockup is a visual representation of

a page that includes font choices, colors, layout, and images. A prototype may contain

elements of wireframes or mockups but is primarily concerned with demonstrating the

interaction between a user and the site.

2 Information architecture is the process of organizing a website’s content and de ning the

navigation of the site.

3 Usability testing is the pr

ocedure in which a user is given a task or series of tasks relating

to a website,

such as purchasing an item, and then asked to determine where any

confusion or di culty in navigating appears. A web designer would take this feedback

and improve the site design as needed.

webdesign.indb 24webdesign.indb 24 3/17/11 1:50 PM3/17/11 1:50 PM

25Lesson 2, Fundamentals of the Web

What you’ll learn

in this lesson:

• Fundamentals of web

page technology

• The roles of HTML, CSS,

and JavaScript

• The evolution of web

standards

Fundamentals

of the Web

In this lesson, you’ll learn the fundamentals the Internet and the

World Wide Web work and how designing for web di ers from other

methods of communication.

Starting up

You will work with several  les from the web02lessons folder in this lesson. Make sure you have

loaded the weblessons folder onto your hard-drive from www.digitalclassroombooks.com/webdesign.

See “Loading lesson  les” in the Starting Up section of this book.

See Lesson 2 in action!

Use the accompanying video to gain a better understanding of how to use some of

the features shown in this lesson. You can  nd the video tutorial for this lesson at

www.digitalclassroombooks.com using the URL provided when you registered your book.

Lesson 2

webdesign.indb 25webdesign.indb 25 3/17/11 1:50 PM3/17/11 1:50 PM

How web pages work

Web Design with HTML and CSS Digital Classroom

How web pages work

You’ll bene t from understanding the structure and function of systems that deliver the

work you design across the Internet. This lesson focuses on understanding the structure and

function of the Internet and the World Wide Web. Understanding these systems will help

you deliver your web design projects more e ectively. You will now take a quick look at how

websites are hosted and how the pages you create end up on visitor’s computer screens and

mobile devices around the world.

The Internet and World Wide Web domain names

The Internet is based on the fundamental concept that all computers should be able to

reach each other using an address. Much like your home, apartment, or school has a street

address where the post o ce or Fed Ex can reach you, or you have a phone number where

someone can call you, all Internet connected computers have an address known as a TCP/IP

address. The TCP/IP stands for Transmission Control Protocol/Internet Protocol, but that’s

not critically important. What you need to know is that TCP/IP allows packets of digital

information, such as your website, to be sent across networks and then reassembled once it

reaches its destination. TCP/IP addresses are commonly referred to as IP addresses.

Somefile.jpg

Internet

small “packets” and

adds a header

IP adds a header

ETHERNET adds a header

Computer “A”

Computer “B”

Packets are re-assembled at the

second computer. The protocol

“checks” to make sure all the

information sent has been received

Sending

Receiving

A simpli ed diagram of how  les are sent over the Internet.

In the early 1990s, Sir Tim Berners-Lee took advantage of the Internet’s linked nature and

created a method for his colleagues to remotely access data that he stored on his computer.

A user anywhere in the world who had access to the Internet could connect to a server and

webdesign.indb 26webdesign.indb 26 3/17/11 1:50 PM3/17/11 1:50 PM

How web pages work

27Lesson 2, Fundamentals of the Web

request a page, which would then display on the user’s computer. Berners-Lee dubbed it the

World Wide Web, and his program was a simple version of the  rst web browser. Web browsers

and the information available have evolved greatly, but the technical concepts have not changed.

One computer with a TCP/IP address is able to request information, such as a web page, from a

computer located at another TCP/IP address.

Researchers such as Berners-Lee appreciated the instant access to documents, and the World

Wide Web was used at  rst primarily by academics for research purposes. Commercial uses

of a web browser displaying text and graphics quickly evolved. In 1994 there were a mere

handful of websites in existence, and a short  ve years later, there were over six million

websites in existence.

Although not technically the  rst web browser, the Mosaic browser released in 1993 triggered the

popularity of websites worldwide.

Domain names and hosting

Domain names help users  nd their way around the Internet. You already know domain

names because they are commonly surrounded by www on the front and .com on the end.

Domains can also include various endings such as .org, .edu, and .gov.

Domain names exist because it’s not very convenient for you to use or remember IP addresses.

Domain Name Servers (DNS) translate easy-to-understand domain names into IP addresses.

A DNS converts a familiar string of letters, the “domain name,” to the numbered IP address.

Instead of typing the IP address 72.32.147.166 into a web browser, you can type the domain

name, such as www.digitalclassroombooks.com. A DNS on the Internet converts your requested

domain into the appropriate IP address, which routes your request to the appropriate web server.

webdesign.indb 27webdesign.indb 27 3/17/11 1:50 PM3/17/11 1:50 PM

How web pages work

Web Design with HTML and CSS Digital Classroom

The web server is a computer that is much like a desktop PC. It generally runs either a version

of Microsoft Windows Web Server or UNIX, but it may have additional processing power

and redundant systems to handle tra c from thousands of users at the same time. Web servers

maintain a constant connection to the Internet, so your websites are available 24 hours a day.

Because most companies want their web servers to be available all day, every day, they are

often maintained by web hosting companies. These  rms are paid to maintain your web

server so that it is always accessible and running. If you run a small website, they may put

your site on a server that is shared with other sites. For more demanding sites, or sites with

sensitive information, a business will pay higher fees for a dedicated server. Even large

companies will often turn to hosting businesses to maintain their web servers, although some

companies may elect to place their web servers within their own company.

The language of the web

Hypertext Markup Language, or HTML, uses tags that enclose plain text. The tags describe

how the text should appear and the function of the text. The web browser looks at the tags

and displays them accordingly. A simple example of HTML text is:

<p>Do you want to have lunch?</p>

The text to be displayed, Do you want to have lunch?, is wrapped by two tags

indicating that it is a paragraph. The  rst tag is the opening tag

<p> and the second is the

closing tag

</p>. These tags are generally not displayed in the browser, which reads the text

from the web server and formats the text as a paragraph to display on the viewer’s screen.

HTML also lets designers create hyperlinks. Hyperlinks are areas of text, images, buttons, or

other parts of a page where the viewer can click to navigate to additional content. Clicking a

link can open a new web page, site, document, video, or animation.

The evolution of the web and web standards

HTML is interpreted by web browsers, such as Internet Explorer, Firefox, Safari, and Chrome.

Web designers have discovered that the same HTML code might be displayed di erently on

various web browsers. Because web browsers can interpret HTML code di erently, you will

need to consider browser testing in your design considerations, which we cover in more detail in

Lesson10.

In the early days of the web, some browser developers created proprietary HTML tags.

They created tags that were supported by only their browser, as they hoped that the unique

capabilities might draw more users.

webdesign.indb 28webdesign.indb 28 3/17/11 1:50 PM3/17/11 1:50 PM

How web pages work

29Lesson 2, Fundamentals of the Web

Soon designers discovered they could not rely on the same HTML code for all browsers.

Designers added “hacks,” extra code, to pages, making certain that layouts worked in

di erent browsers. Some designers would go so far as to create two versions of a site, and the

appropriate version would be displayed based upon the browser being used by the viewer.

Other designers would add badges to their sites, letting viewers know that the site performs

best with a particular browser. To this day you can still see some sites with notices such as

“This site is optimized for Internet Explorer” or some other browser.

Web pages that were designed to work only in a single browser were taking the web in the wrong direction.

Designers, businesses, and the companies developing browsers eventually discovered that

inconsistency and proprietary tags that worked only with their browser were hurting the

user experience and harmful to the vitality and growth of the web. The various browser

manufacturers have started to recognize the importance of consistency, and most are working

with the World Wide Web Consortium (W3C) and independent testing bodies to validate

the compliance of their browser with accepted standards. Browser developers now promote

their compliance with standards and speed at displaying standards-based pages.

Now that you understand some of the history and concepts behind the web, you’ll start to

examine some of the HTML code that powers web pages.

webdesign.indb 29webdesign.indb 29 3/17/11 1:50 PM3/17/11 1:50 PM

How web pages work

Web Design with HTML and CSS Digital Classroom

Separating structure, style, and interactivity

Modern websites often consist of pages with HTML or XHTML for the page structure and

content, Cascading Style Sheets (CSS) for the style, and JavaScript, Flash, or Silverlight for the

interactivity. In this exercise, you will look at three examples of source code. Each page has

the same content, but has a di erent appearance and functionality. If you have not done so

already, be sure to copy the lesson folders for this book onto your local system.

1 Open your web browser — it doesn’t matter if it is Internet Explorer, Firefox, Chrome,

Safari,

or another browser. Choose File > Open and browse to the web02lessons folder,

choose the  le plain.html, and then click Open. The page loads into your browser.

The page displays in your browser. The HTML de nes the structure of this page and

contains content such as the text and images.

Some browsers may not display the menu bar. In this case, you can use your operating system to

navigate to the web02lessons folder and double-click the  le to open, or use your keyboard and

press Ctrl. + O (Windows) or Command + O (Mac OS).

A local HTML page can be previewed in your web browser.

2 In your web browser, choose File > Open and browse to the document

plain_with_styles.html located in the web02lessons folder, and click Open. Your browser

displays a more highly formatted web page. It includes a two-column layout, and

background colors for the page. The content on this page is identical to the previous

document; however, the style is being provided by a number of style rules in a Cascading

Style Sheet or CSS.

webdesign.indb 30webdesign.indb 30 3/17/11 1:50 PM3/17/11 1:50 PM

Designing for the web

31Lesson 2, Fundamentals of the Web

3 In your web browser, choose File > Open and browse to the document

plain_with_styles_js.html located in the web02lessons folder, and click Open. This page

includes a collapsible panel which you can activate by clicking the title to expand the

content section. JavaScript makes this interactivity possible by registering the mouse click

which triggers the expansion or collapse of the panel.

As you can see, the same HTML content can be enhanced and modi ed using CSS and also

by adding interactivity, in this example it was through the use of JavaScript. As you work

through this book, you’ll learn di erent ways to have HTML work in concert with CSS and

interactive elements and even multimedia to create the page and message you need for the

sites you create.

Designing for the web

The best designed websites are those that meet the expectations of a user, are easy to use, and

meet the objective of the publisher — whether a business, organization, or individual. There

are several considerations that should always be a part of your decision-making process when

starting to create a design.

Know your audience

A bank site provides a sense of safety, stability, and professionalism. The kind of image you

want from someone that will hold on to your money. It also provides easy access to log-in

to your account if you are a user, and has easy-to access links to move to the parts of the site

o ering various services. The design and navigation is easy to follow, regardless of the age or

technical skill of the user.

A banking site and an entertainment site will be designed with their target audiences in mind.

An entertainment site that targets a teenage audience includes a more visual approach,

updated news, and links to social networking sites that might be used by the audience.

Information about shows and personalities is front-and-center. The site manages to be trendy

and still provides easy access to information that viewers are likely to be seeking.

webdesign.indb 31webdesign.indb 31 3/17/11 1:50 PM3/17/11 1:50 PM

Designing for the web

Web Design with HTML and CSS Digital Classroom

Know that your site’s viewers are impatient

The viewers coming to your site are impatient. A recent study of retail websites found that if

users reach a website and the page does not load within four seconds, they are likely to leave

the site, never waiting for the page to load. The same study found that more than one-third

of online shoppers would abandon a site immediately if they have a poor online experience.

The majority of those who said they would abandon a site indicated they would not return.

As a designer you can help provide a great experience on your sites by keeping the following

in mind:

• Use images only when they add value to the page.

• When using images, optimize their size for online use so they load faster. This is

covered in detail in Lesson 5.

• Use a common Cascading Style Sheet to standardize layout, navigation and colors.

• Separate long content into multiple pages so it loads faster.

• Only add multimedia such as video, audio, Flash, and Silverlight.

Designing for the screen

When designing websites, consider where they will be viewed. If your audience will

primarily be on a desktop or laptop computer, the pages should be horizontal rather than

vertical. This keeps users from needing to scroll unnecessarily. Similarly, if your audience is

primarily working on mobile devices, consider reducing the content and designing for a

smaller, vertical screen.

Displays are available in di erent sizes, and can display varying amounts of information.

The amount of information that can be displayed on screen is known as the resolution of a

display, and it is measured in pixels. The word pixel is derived from “picture element” and is

the smallest unit of measurement on the screen (when used for web graphics there are often

72 pixels per inch). Two of the most common monitor resolutions on the web are 1024

pixels wide × 768 pixels high and also 1280 pixels wide × 800 pixels high. As you can see in

the table below, the same page displayed at various resolutions provides di erent experiences

for the viewer.

The same layout on a 1024 × 768 monitor (left) and a 1280 × 800 monitor.

1 Report published by Akamai available at www.akamai.com/html/about/press/releases/2006/press_110606.html)

webdesign.indb 32webdesign.indb 32 3/17/11 1:50 PM3/17/11 1:50 PM

Designing for the web

33Lesson 2, Fundamentals of the Web

As screen sizes get larger and display resolutions increase, there are a greater number of

discrepancies that can occur, making it even more important to design for all the displays on

which your site will be viewed and we discuss how to tackle this dilemma in Lesson 7. While

it is impossible to design a site that looks the same in every browser at every resolution, you

can still create designs that work across various devices and displays.

A  xed layout designed for a 1280 × 800 monitor (left) will be cropped on a 1024 × 768 monitor.

Understanding how your audience will read your web content

Most web users gain information they are seeking through reading. But writing for a website

should di er from writing for brochures or other printed documents.

Web readers are more likely to “scan” stories rather than read them in full detail. E ective

content is organized, edited, and structured so it works well on a site; it isn’t merely copied

and pasted from printed brochures. You’ll discover that you want to create headings that

clearly mark the separation of a story from other content, or format text so it does not span

the entire width of a monitor.

You’ve discovered several key concepts about how the web works, the technical

underpinnings of websites, and some key design considerations. We wrap up this section with

some self-study ideas and review questions before jumping into the next lesson.

webdesign.indb 33webdesign.indb 33 3/17/11 1:50 PM3/17/11 1:50 PM

Self study

Web Design with HTML and CSS Digital Classroom

Self study

1 Identify three websites you use frequently and compare how well they are formatted for

the screen and note if they work equally well on your monitor. Make a list of the visual

elements that contribute to your overall experience of the site.

2 Have you had the experience where you’ve considered “abandoning” a site because of

a poor experience? If so,

try to remember the elements that led to this and how your

favorite sites might do things di erently.

Review

Questions

1 What is an IP address and what role does it play in web design?

2 What elements contain structure, style, and interactivity for a website?

3 When designing for the screen, what is one of the most important considerations for

designers?

Answers

1 An IP addr

ess is a unique series of numbers that identify the identi cation and hosting

addr

ess of a website (or sites).

IP addresses are associated with a website’s domain name

since humans have an easier time working with names (www.agitraining.com) rather than

numbers (72.32.147.166).

2 HTML provides the structure of the page. The style is provided by CSS and the

interactivity is often pro

vided by JavaScript, Flash, or Silverlight.

3 Designers need to be sensitive to the fact that there are users who have di erent size

monitors and will vie

w content at various display resolutions.

webdesign.indb 34webdesign.indb 34 3/17/11 1:50 PM3/17/11 1:50 PM

35Lesson 3, Web Design Tools

What you’ll learn

in this lesson:

• Creating and editing

HTML using a text editor

• Introduction to

using Dreamweaver

and Expression Web

for site design and

management

• Using web browsers

for testing and

troubleshooting

Web Design Tools

Web design tools range from simple utilities to complex and robust

software packages. Your choice of tools may be based upon personal

preference, the scope of the project, or the tools purchased by your

employer. This lesson provides an overview of some of the most

common web design tools.

Starting up

You will work with several  les from the web03lessons folder in this lesson. Make sure you have

loaded the weblessons folder onto your hard-drive from www.digitalclassroombooks.com/webdesign.

See “Loading lesson  les” in the Starting Up section of this book.

See Lesson 3 in action!

Use the accompanying video to gain a better understanding of how to use some of

the features shown in this lesson. You can  nd the video tutorial for this lesson at

www.digitalclassroombooks.com using the URL provided when you registered your book.

Lesson 3

webdesign.indb 35webdesign.indb 35 3/17/11 1:50 PM3/17/11 1:50 PM

Web editors versus WYSIWYG tools

Web Design with HTML and CSS Digital Classroom

This lesson provides a general overview of web design tools and also includes step-by-step

exercises. The web editors used in this lesson are available as fully functional trial versions

at no cost. If you haven’t decided which tools to use, you’ll want to download and install

the software tools used in this lesson. You’ll need a text editor, such as TextWrangler (Mac)

available at www.barebones.com/products/textwrangler or Visual Web Developer Express available

at www.microsoft.com/express/Web. You’ll also need a program with a visual design surface such

as Dreamweaver, available at www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver, or

Expression Web available at www.microsoft.com/expression/try-it.

Web editors versus WYSIWYG tools

HTML and CSS use text as their foundation. Because of this, even the most simple text

editor, such as TextEdit on the Mac or Notepad on the PC, is capable of creating web

pages. These basic text editing tools, however, lack features that help with web design and

development such as checking code syntax, organizing your site folders, and uploading  les

to web servers. In addition to text editors, there are also fully featured web editors and design

tools, such as Adobe Dreamweaver and Microsoft Expression Web. These are WYSIWYG

tools (“What You See Is What You Get”) that provide a visual layout environment, code

editing, along with website management tools. Robust text editors and coding tools that

handle web markup and programming languages such as HTML, CSS, JavaScript, and

PHP provide another set of tools for creating websites. In this overview you’ll look at the

advantages and disadvantages of each category of web design tools.

webdesign.indb 36webdesign.indb 36 3/17/11 1:50 PM3/17/11 1:50 PM

Web editors versus WYSIWYG tools

37Lesson 3, Web Design Tools

Plain text editors

Plain text editors such as Notepad and TextEdit are included with the Mac OS or Windows

operating systems, so you likely already have one installed on your computer. While they are

widely available and free, they are not optimized for web design. Working with plain text

editors requires excellent knowledge of the language you are coding, because they provide

no guidance when writing code. The basic text editors also lack functionality for previewing

your pages in a web browser, or the ability to check pages for correct syntax or broken links.

Writing HTML and CSS in a plain text editor provides little guidance.

These default text editors for the Mac OS and Windows can be used if you have no other

choice, but it is unlikely you will want to use them as your primary web design tool.

webdesign.indb 37webdesign.indb 37 3/17/11 1:50 PM3/17/11 1:50 PM

Web editors versus WYSIWYG tools

Web Design with HTML and CSS Digital Classroom

Using Notepad or TextEdit as a web editor

Windows Notepad can be found on any Windows system in the Accessories panel. You can

create an HTML document by following these steps:

1 Choose Start > Programs > Accessories > Notepad, and when the Notepad

windo

w appears,

choose File > New.

By default, the  le is saved in the text (.txt) format and so any HTML tags that

the  le contains cannot be interpreted by a web browser.

2 In Notepad, select File > Save As. Change the  le extension fr

om .txt to .html

in the  le name  eld.

3 Specify “All Files”

in the Save as type  eld.

Set the Encoding value to UTF-8

instead of

ANSI; this is the necessary encoding for HTML pages.

4 Click the Save button.

If y

ou work on a Mac OS computer

, you can use the TextEdit application to create or modify

HTML and CSS  les.

1 On your Mac, open the Applications folder and locate the TextEdit application.

By def

ault,

TextEdit is designed to open and save documents as .rtf (rich text

format)  les. In order to use it successfully for HTML, you must change the

application preferences.

2 Choose TextEdit > Preferences. The Preferences dialog box opens.

3 In the New Document tab, click to select the Plain text radio button. With this

option selected, T

extEdit creates only plain text without any formatting applied

to the text.

4 Click the Open and Save tab and select the radio buttons for both Ignore r

ich

text commands in HTML 

les and Ignore rich text commands in RTF  les. With

these options selected, TextEdit will open and create HTML  les. You also

need to deselect the Add “.txt” extension to plain text  les option as you will be

specifying the .html extension when you save.

5 In the HTML Saving Options group, set the document type to XHTML 1.0

ransitional, mak

e sure the Styling menu is set to Embedded CSS, and make

sure the Encoding menu is set to Unicode (UTF-8).

6 Close the Preferences dialog box and exit TextEdit by selecting TextEdit > Quit

TextEdit. Then restart TextEdit by double-clicking the icon in the Applications

folder. When you restart the program, the new preferences will be used.

webdesign.indb 38webdesign.indb 38 3/17/11 1:50 PM3/17/11 1:50 PM

Web editors versus WYSIWYG tools

39Lesson 3, Web Design Tools

Text editors for web design

There are several text editors with more advanced capabilities. These type of editors provide

several bene ts that make it easier to work with code. We’ll look at some of the bene ts here.

Code coloring

Whether you are writing a new HTML or CSS page from scratch or opening a pre-existing

page, code coloring visually separates your HTML and CSS syntax from the content on your

page. Tags that include attributes and values are assigned di erent colors. This code coloring

makes it easier for you to locate speci c code, and it can help you spot and correct errors.

Forgetting to add a closing bracket or a quotation mark, for example, causes content to be

colored di erently than if tags were applied correctly. After you become accustomed to using

colored syntax, you can use the colors to quickly spot errors in HTML. Most modern text

editors also allow you to customize the color of your syntax.

Code coloring visually separates the tags from the content.

Line numbers, invisible characters, and other visual aids

Most text editors provide line numbers in documents opened for editing. Line numbers help

you orient yourself within your code and also help when collaborating with other designers

or developers. These tools also make it easier to see invisible characters such as line breaks or

carriage returns.

webdesign.indb 39webdesign.indb 39 3/17/11 1:50 PM3/17/11 1:50 PM

Web editors versus WYSIWYG tools

Web Design with HTML and CSS Digital Classroom

Code completion

Most text editors can automate a number of certain tedious tasks, such as typing brackets

or common tags. Although the methods and shortcuts for each program are di erent, most

full-featured text editors have this capability. Some text editors automatically trigger code

completion as you begin to type, while others require you to trigger the code completion

and choose the code from a list of options. Code completion is useful, as it removes some of

the burden of having to remember every detail of the syntax you are using, whether HTML,

CSS, or another language.

In TextMate (Mac OS), you can trigger code completion manually by

pressing the Option + Esc keys. Similar capabilities exist in Windows

text editors such as Visual Studio from Microsoft.

Automation features

Most text editors have some capability for automating repetitive tasks. Whether they are

called macros, snippets, clips, or by some other name. These automation tools give you the

ability to add reusable pieces of code to your pages and can save you a great deal of time.

In Coda (Mac OS), the Clip feature provides a way to save and

re-use code across projects. In this example, the basic HTML

structure of a page is selected.

webdesign.indb 40webdesign.indb 40 3/17/11 1:50 PM3/17/11 1:50 PM

Web editors versus WYSIWYG tools

41Lesson 3, Web Design Tools

Finding and replacing code

Most text editors used for coding also have robust tools for searching and replacing code.

Although this can be helpful on a single page, it is indispensable on larger projects where you

need to make changes on a large number of pages across a site.

Much more!

Advanced text editors are designed to scale, and accommodate advanced users. Developers

and programmers who regularly code in more sophisticated languages such as PHP

(originally an acronym for ‘Personal Home Page’), ASP (Active Server Pages), and Ruby on

Rails (a framework for web applications) often use the advanced features of text editors to

help them build their sites. In many ways, the line between text editors and WYSIWYG

editors is beginning to blur. Some text editors have built-in functionality that allows you to

build local site folders that keep track of site elements such as hyperlinks between documents,

and media such as images and videos. They may also have an internal page preview feature or

some form of FTP client that allows users to publish their pages to the web.

An overview of text editors

The following is a brief list of popular text editors for both Mac OS and Windows computers.

These editors o er capabilities such as automatic code completion, code coloring, and code

checking.

BBedit and TextWrangler (Mac) These text editors are similar and are developed by the

same company. TextWrangler is free and has fewer features than BBedit. www.barebones.com

Coda (Mac) is a text editor that also provides site management, browser preview, and built-in

web publishing. www.panic.com/coda/

TextMate (Mac) Along with being a text editor, its functionality can be extended by bundles

that extend the capabilities of TextMate; for example, there are bundles that make adding

JavaScript to your web pages much easier. http://macromates.com

E Text Editor (Windows) E Text Editor is a Windows-based text editor that supports many of

the features of TextMate such as bundles and snippets. www.e-texteditor.com

Microsoft Visual Web Developer Express (Windows) provides a full featured text

editor for web coding that supports HTML, CSS, and functionality for .NET programming.

It also provides a basic visual layout environment for website design and development.

www.microsoft.com/express/Web/

webdesign.indb 41webdesign.indb 41 3/17/11 1:50 PM3/17/11 1:50 PM

Web editors versus WYSIWYG tools

Web Design with HTML and CSS Digital Classroom

WYSIWYG editors

The concept behind WYSIWYG web editors is that you create web pages in design view and

the program writes the HTML and CSS code behind-the-scenes. These tools claim to provide

a visual way to create web pages without needing to understand HTML or CSS code. To

e ectively use any web design tool, you still need an understanding of HTML and CSS, and

these design tools all include methods for working with code. Editing code is often required

when using WYSIWYG editors, despite their visual layout capabilities and marketing claims.

If you are just starting out as a web designer, it’s useful to know that many web professionals

perceive WYSIWYG tools as inappropriate for professional use. While this sentiment is

not universal, there is a large population of web designers and developers that dislike all

WYSIWYG editors because they do not always produce the best code for a situation.

WYSIWYG applications generally cost more than text editors, and the time required to

learn many WYSIWYG applications can be as much as learning HTML and CSS code.

Despite the higher cost and time to learn, the use of WYSIWYG editors is widespread.

Additionally, they can speed your design work with some projects.

Most popular WYSIWYG editors also include features to help you code your pages when

entering code. These include capabilities similar to text editors, such as code completion,

code coloring, and automation. Two of the most popular WYSIWYG editors are Adobe

Dreamweaver and Microsoft Expression Web. Both applications have similar capabilities.

Dreamweaver is available on both the Mac OS and Windows platforms while Expression Web

is only available for Windows computers. Expression Web is available at no cost if you are a

student, see the note about the Microsoft Dreamspark program, and has a suggested retail

price of $150 for business users. Adobe Dreamweaver is $150 if you are a student, and $300

if you are a business user. You can obtain fully functioning trial versions of these products to

evaluate them for your own use at www.microsoft.com/expression or www.adobe.com/dreamweaver.

Microsoft Dreamspark provides no-cost software from Microsoft to full-time students. If you are

enrolled as a student, you can obtain Microsoft Expression Web as part of the complete Microsoft

Expression Studio package by enrolling at www.Dreamspark.com.

webdesign.indb 42webdesign.indb 42 3/17/11 1:50 PM3/17/11 1:50 PM

Web editors versus WYSIWYG tools

43Lesson 3, Web Design Tools

Design and layout tools

Both Dreamweaver and Expression Web use icon-based menus and panels to format text,

insert images, and add media such as video  les, Flash movies, or Silverlight objects. Adding

elements such as hyperlinks, tables,

div tags, and form elements involves dragging them onto

a page.

The Dreamweaver Insert panel features objects

in several categories that let you easily add images,

web forms, and media to your page.

Expression Web makes it easy to add

page elements with the Toolbox panel.

Site management and  le transfer protocol

Both Expression Web and Dreamweaver include site management tools, including  le

transfer protocol (FTP) capabilities so you can upload  les to a web server from your local

machine. They also support reusable objects, such as page templates and library items, and

can check links to make sure they go to valid pages or objects. The site management tools

are helpful, as they make certain that links that are created while working on your computer

function correctly when the site is moved to a web server.

webdesign.indb 43webdesign.indb 43 3/17/11 1:50 PM3/17/11 1:50 PM

Web editors versus WYSIWYG tools

Web Design with HTML and CSS Digital Classroom

Coding environment and text editor

Both Dreamweaver and Expression Web o er a code-only view of web pages which can be

used for modifying HTML or CSS code, or a design view to work on pages visually, or a

split view that displays the code and the visual layout at the same time.

Both programs support popular coding and scripting languages, such as JavaScript, and several

server-side languages, including ColdFusion, PHP, and ASP. Specialized menus and code

panels help you build pages and applications in the language of your choice. Expression Web

o ers particular strong capabilities for designers working on sites that use Microsoft’s ASP

scripting language.

Code view in both Dreamweaver and Expression Web

provides features comparable to a stand-alone text editor.

Scripting languages, such as those used to build interactive web pages or e-commerce sites, fall into

two categories: client-side and server-side. Client-side languages, such as JavaScript, run in the

web browser, while server-side languages, such as ColdFusion or ASP require special software to

be installed on the web server.

webdesign.indb 44webdesign.indb 44 3/17/11 1:50 PM3/17/11 1:50 PM

Defining sites in Dreamweaver or Expression Web

45Lesson 3, Web Design Tools

Templates and reusable elements

Dreamweaver and Expression Web both provide templates which are essentially parent

master pages that link to any number of child pages. A master page controls the structure and

appearance of multiple attached pages, so any change made to a master page is automatically

applied to the child pages. This provides a consistent appearance across websites and ensures

that site changes are applied quickly and globally across a site. Templates also allow you to

make certain sections of a web page non-editable so that other users don’t manipulate certain

content or design elements. For example, the content of a News page could be designated as

being fully editable, but the navigation bar could be marked as being o -limits.

Both Dreamweaver and Expression Web support the same template  le format, which uses the

.dwt extension. Expression Web also has an alternative template system called ASP.NET Master

Pages. The ASP.NET template system is designed for .asp websites, whereas the .dwt template

can be used for any HTML-based site.

De ning sites in Dreamweaver or Expression Web

Both applications use site folder de nitions for the local and remote storage locations where

a website resides. Once you de ne a site folder, the program keeps track of the  les being

used. When you add, remove, rename, or reorganize your asset  les, both Dreamweaver

and Expression Web update any related hyperlinks.The  les on your local drive can also be

synchronized with the  les on your remote web server using integrated FTP capabilities.

In the following two exercises, you will walk through the initial steps of creating a new

site in Dreamweaver and Expression Web. These exercises are designed to get you up-and-

running in either (or both) of these popular web design applications. If you will only be

working in a text editor, you can skip to the “Using design tools in the browser” exercise, or

if you already plan to use only one visual editor or the other, you need to only complete the

section relating to that WYSIWYG editor.

Obtaining Expression Web or Dreamweaver

Remember that Expression Web is available at no cost for students at www.dreamspark.com

or for other users at www.microsoft.com/expression/try-it and you can download a trial version

of Dreamweaver from Adobe’s website at www.adobe.com/products/dreamweaver.

webdesign.indb 45webdesign.indb 45 3/17/11 1:50 PM3/17/11 1:50 PM

Defining sites in Dreamweaver or Expression Web

Web Design with HTML and CSS Digital Classroom

Creating a new site in Dreamweaver

You can create a new site from scratch without any templates or pre-existing HTML pages,

or you can import a pre-existing site, such as one you have inherited from a colleague

or a previous designer. In this  rst example, you’ll create a new site from scratch, using

Dreamweaver CS5. Later in the exercise, you’ll work with a pre-existing site.

1 Launch Dreamweaver and then choose Site > New Site. In the Site Name text  eld,

type SmoothieW

orld. Next, you need to de ne a local folder where Dreamweaver

stores the  les for the site.

2 In the Local Site Folder  eld a directory path is pr

ovided, which shows the location of

the folder on your hard drive. This path is often the Documents folder.

3 Click the Folder icon (

) to the right of the Local Site Folder  eld; you are prompted

to choose a root folder, which will be the primary folder for this site. This folder can be

an empty folder that you have previously created, or a new folder.

Navigate to your desktop and click the New Folder icon. Name this folder

SmoothieWorld and then click Choose (Mac OS) or Select (W

indows). The Local Site

Folder  eld is updated to show the path to the folder you created. Keep this window,

you’ll need it in the next part of this lesson.

The Local Site Folder  eld shows the path on your system to the root folder

where your  les are stored for a site.

Next you’ll take a quick look at some of the other options in the Site Setup window.

webdesign.indb 46webdesign.indb 46 3/17/11 1:50 PM3/17/11 1:50 PM

Defining sites in Dreamweaver or Expression Web

47Lesson 3, Web Design Tools

4 Along the left side of the Site Setup window, click the Servers tab. Use the Servers

section to de ne the details of the remote server where your website will be hosted.

You do not need to complete the web server information to begin creating a website;

it is only necessary when you are ready to upload the content you’ve created on your

computer to a web server. You will not be uploading this site, so the information can

remain blank for this exercise.

5 Continuing to work in the Servers tab, click the + button and the Basic site settings

windo

w appears.

This window contains  elds for Server Name, Connect Using, FTP

Address, Username, Password, and other options. These settings allow you to choose

both a destination and a method, such as FTP, for Dreamweaver to transfer  les to a web

server. These details will vary depending upon the web server being used. If you are using

a web hosting provider, they can provide this information to you.

6 Click Cancel to close the site settings panel. Then press Save to save the settings for the

entir

e site.

The lower-right corner of the Files panel displays the root folder information

you just entered.

7 Choose File > New and from the New Document window choose the Blank Page

option. Make sur

e that the Page Type is set to HTML and the Page Layout is set to

<none>, then click Create.

8 Choose File > Save and name this  le index.html. Because you de ned a r

oot folder,

the new document is automatically set to save in the location you speci ed when you

set-up the site. By de ning a site you reduce the risk of saving  les into an incorrect

location. Click Save and the Files panel updates to include the index.html  le.

The Files panel automatically updates to

include new pages that are created.

webdesign.indb 47webdesign.indb 47 3/17/11 1:50 PM3/17/11 1:50 PM

Defining sites in Dreamweaver or Expression Web

Web Design with HTML and CSS Digital Classroom

9 Choose Insert > Image to add an image to your site. In the Select Image Source

window, use the menu to browse to the web03lessons folder and choose the

blueberry_smoothie.jpg image, then click OK. A warning appears indicating that the

image is outside the root folder. Click Yes to copy the image into the folder with the

other content for this, then click Save.

Dreamweaver o ers to keep your site organized by placing a copy

of images that are outside your site’s folder with the other items used

in the site.

The Image Tag Accessibility Attributes window will also appear. In the Alternate Text

 eld type “Blueberry Smoothie” and then click OK. Alternate text (commonly referred

to as an “alt tag”) improves accessibility of your page for devices such as screenreaders.

The image is displayed on the page and the  le is copied to the root folder for this site.

Importing an existing site into Dreamweaver CS5

Importing pre-existing sites into Dreamweaver is similar to creating a new site. Instead of

pointing to an empty root folder, you will identify the path to the folder containing the

existing assets for the site.

1 Choose Site > New Site. In the Site Setup window, type Lesson 03 site for the site name.

2 Click the Folder icon to the f

ar right of the Local Site Folder  eld, the Choose Root

Folder windo

w appears. Navigate to the web03lessons folder, then click Choose (Mac)

or Select (Windows), then click the Save button.

A site cache is created. In the Files panel, you can see the directory of the site.

3 Double-click the index.html document to open it. Next you will rename the images

folder in the Files panel to see how Dreamw

eaver updates links.

webdesign.indb 48webdesign.indb 48 3/17/11 1:50 PM3/17/11 1:50 PM

Defining sites in Dreamweaver or Expression Web

49Lesson 3, Web Design Tools

4 In the Files panel, click to highlight the label of the images folder and click again to

make it active for editing. Then type smoothieimages and press Return (Mac) or Enter

(PC). The Update Files panel appears because the folder name has been updated, asking

if you’d like to update any links to  les in this folder. If the links aren’t updated, they will

become broken because of the new folder name.

A list of  les that will be updated appears in the window. Click Update to update the

links. Dreamweaver updates the hyperlinks to re ect the new folder name.

Modifying a folder name in your Files panel prompts

Dreamweaver to update any linked  les.

5 Choose Site > Manage Sites. The Manage Sites window appears. It provides access to any

sites you have de ned. Use this window to create new sites or edit the settings of existing

sites. You won’t be making any changes, so click Cancel to close the window without

making any changes.

You can use the Export button to save your site settings as an XML  le with the .ste extension.

These settings can be imported into Dreamweaver to easily move sites between machines, di erent

versions of Dreamweaver, or share settings with otherusers.

6 In the Files panel, click the drop-down menu. In the menu list that appears, the directory

of your computer is display

ed along with a list of your de ned sites. You can use this to

switch from site to site if you manage several sites. This feature is very useful to designers

as it allows them to quickly access assets such as images or code that may be located in

another site.

webdesign.indb 49webdesign.indb 49 3/17/11 1:50 PM3/17/11 1:50 PM

Defining sites in Dreamweaver or Expression Web

Web Design with HTML and CSS Digital Classroom

Creating a new site in Expression Web

Site folders in Expression Web are similar to Dreamweaver. As you will see, if you are familiar

with creating sites in one program, you are well prepared for doing so in the other.

1 Launch Expression Web then choose Site > New Site. In the window that appears, you

can create a one-page site,

a new site with no pages (empty), or import an existing site.

2 Select the One Page Site option. In the Name  eld at the bottom of the window, type

SmoothieWorld2. The Location  eld displays the default path for your site. This is

typically a path to a subfolder named My websites within your Documents folder. You

will de ne the location for this folder as the desktop, so keep the window open.

3 Click the Browse button and navigate to your desktop, then click the New Folder icon

to create a new folder on the desktop

. Name this folder SmoothieWorld_site then

click Open, and then click OK. The new site is created and appears in the Site View

panel the Folder List panel.

4 Choose Site > Site Settings. You can use the site settings window to modify the site name

and provide access to the settings for connecting and uploading  les to y

our web server.

5 Click the Publishing tab. You’ll look at this tab for informational purposes only, as we

are not connecting to a web ser

ver. If necessary you could input FTP information for

connecting Expression Web to your web server.

Click the Add button to examine the publishing options, then click Cancel and click

Cancel again in the Site Settings window to close it.

webdesign.indb 50webdesign.indb 50 3/17/11 1:50 PM3/17/11 1:50 PM

Defining sites in Dreamweaver or Expression Web

51Lesson 3, Web Design Tools

Web design and development tools in the browser

Modern web browsers do more than display web pages; they also include tools for developing

and troubleshooting web pages. Some browser tools for testing and debugging sites include:

Internet Explorer developer tools

Microsoft Internet Explorer includes built-in developer tools. You can access these tools by

choosing Tools > Developer Tools or by using the keyboard shortcut F12.

Safari

The Apple Safari browser includes built-in developer tools that are not enabled by default. To

enable the developer tools choose Safari > Preferences. In the Preferences menu, select the

Advanced menu and then select the check box labeled Show Developer menu in menu bar.

The Firefox Firebug extension

The Firebug extension is an option for extending the Mozilla Firefox browser. You can

download it at http://get rebug.com.

Chrome

The Google Chrome browser includes built-in developer tools. To access these tools, click the

Page menu at the top-right corner of the browser window, then choose Developer > Developer

Tools. You can also right-click on any element and select Inspect Element.

They include tools for inspecting your site’s HTML and CSS as they exist inside the browser,

instead of just viewing the original source code. This is particularly helpful with dynamic sites,

complex sites, and sites that use frameworks such as ASP or PHP.

Inspecting HTML elements

You can inspect HTML elements by clicking on them. The code for a selected element is

highlighted in a content pane. Use this to quickly identify the exact code that references an

element so you can quickly understand information such as the width and height of an object

on the page, such as an

image or div element.

Inspecting CSS properties

Quickly access CSS styles that are associated with a selected element to see the exact CSS rules

associated with your selection and examine the cascade of rules so you understand whether a

style is associated with an internal style or external style sheet. This can make it easier to debug.

(continues)

webdesign.indb 51webdesign.indb 51 3/17/11 1:50 PM3/17/11 1:50 PM

Defining sites in Dreamweaver or Expression Web

Web Design with HTML and CSS Digital Classroom

Web design and development tools in the browser (continued)

Editing source code

You can experiment with styles directly in the browser by editing HTML attributes or CSS

properties by clicking on them and typing new values. The change takes e ect immediately

so you can quickly test changes. This editing does not modify your source, rather, it allows for

testing and debugging without needing to switch back to a text editor, saving the  le, then

previewing the change.

Experiment with styles by modifying style rules.

webdesign.indb 52webdesign.indb 52 3/17/11 1:50 PM3/17/11 1:50 PM

Review

53Lesson 3, Web Design Tools

Review

Questions

1 How is the root folder useful when creating a site on your local computer, before

transferring  les to a w

eb server?

2 What are some of the features found in WYSIWYG applications such as Dreamweaver

or Expression W

eb that are not found in most text editors?

3 In what three views do both Dreamweaver and Expression Web allow you to view and

edit documents?

Answers

1 A root folder stor

es all resources for a website in a common location, ensuring that the

links y

ou create to images or other pages in the site will w

ork when the site is uploaded

to a server.

2 WYSIWYG applications provide a preview of your web page in a Design view, allowing

you to create w

eb pages or make changes to your page without accessing the HTML or

CSS code directly. Additionally, WYSIWYG applications have site management tools for

keeping  les organized and uploading content to a web server.

3 Design, Split, and Code views are accessible when working with Dreamweaver or

Expression W

eb. Design view displays the layout of the page; Code view displays the

code but not the layout; and Split view displays both the layout and the code.

webdesign.indb 53webdesign.indb 53 3/17/11 1:50 PM3/17/11 1:50 PM

webdesign.indb 54webdesign.indb 54 3/17/11 1:50 PM3/17/11 1:50 PM

55Lesson 4, Fundamentals of HTML, XHMTL, and CSS

What you’ll learn

in this lesson:

• The structure of HTML

• The difference between

HTML and XHTML

• The fundamentals of CSS

Fundamentals of HTML,

XHTML, and CSS

In this lesson, you’ll discover the fundamentals of HTML, XHTML,

and CSS.Together, these form the structure and style of your web pages.

Starting up

You will work with several  les from the web04lessons folder in this lesson. Make sure you have

loaded the weblessons folder onto your hard-drive from www.digitalclassroombooks.com/webdesign.

See “Loading lesson  les” in the Starting Up section of this book.

See Lesson 4 in action!

Use the accompanying video to gain a better understanding of how to use some of

the features shown in this lesson. You can  nd the video tutorial for this lesson at

www.digitalclassroombooks.com using the URL provided when you registered your book.

We used the text editor Coda to create the markup in this lesson, but you can use any of the text

editors covered in Lesson 3 to achieve the same results.

Lesson 4

webdesign.indb 55webdesign.indb 55 3/17/11 1:50 PM3/17/11 1:50 PM

Web languages

Web Design with HTML and CSS Digital Classroom

Web languages

In this lesson you will discover two languages: HTML and CSS. Although they have di erent

syntax and rules, they are highly dependent on each other. By the end of this lesson, you will

understand how to create simple HTML pages, add images, create hyperlinks from one page

to another, and add simple styling to pages using CSS.

This lesson covers a lot of ground, and many of the core principles introduced in this lesson

are reinforced throughout the remaining chapters.

Web page structure is based on HTML

Hypertext Markup Language (HTML) documents use the .html or .htm extension. This

extension allows a web browser or device such as a smartphone to understand that HTML

content is on the page, and the content of the page is then rendered by the browser or device

according to the rules of HTML.

Markup tags are used to de ne the content on an HTML page. Markup tags are contained

between greater than (

<) and less than (>) symbols, and they are placed at the start and end

of an object or text that is used in an HTML page. Here is an example of two heading 1 tags

for text. The tags are not seen by the viewer of the web page, but every web browser knows

that the text between the tags is a heading 1.

<h1>New Smoothie Recipe!</h1>

In this example, the <h1> is the opening tag and the </h1> is the closing tag. So this entire

line of code is an element. More speci cally, it is referred to as the heading 1 element.

HTML and XHTML are closely related. There is a list of rules de ned by the World Wide

Web Consortium, or W3C that specify the perimeters of HTML and XHTML.

webdesign.indb 56webdesign.indb 56 3/17/11 1:50 PM3/17/11 1:50 PM

Web languages

57Lesson 4, Fundamentals of HTML, XHMTL, and CSS

HTML code as rendered in the browser

To help you understand the relationship between the HTML code and what you see in your

web browser, the following illustration will show you the connection between the two.

A. Doctype. This line instructs the browser to interpret all the code that follows according to a unique set of rules.

B. HTML element. This element nests all the following elements and tells the browser to expect an HTML document.

C. Head element. This section includes information about the page, but nothing is rendered on the page itself.

D. Title element. Any content inside the title tags show up at the top of the browser. This is what is used when a user bookmarks

a page in the browser.

E. Body element. All content within the body can be rendered in the browser’s main window.

F. Heading 1 element. The  rst of six heading elements, content that is a heading 1 is rendered very large and bold.

G. Image element. Links to a graphic  le and displays it on the page.

H. Paragraph element. By default the browser adds space before and after this element which often contains multiple lines of text.

I. Strong element. Formats the enclosed content as bold by default.

J. Heading 2 element. Compare the size of second largest heading to the  rst one.

K. Ordered list element. De nes the enclosed list items as numbered.

L. List element. Multiple list items will automatically be numbered by the browser.

webdesign.indb 57webdesign.indb 57 3/17/11 1:50 PM3/17/11 1:50 PM

Web languages

Web Design with HTML and CSS Digital Classroom

The details of XHTML syntax

There is little fundamental di erence between HTML 4.0 and XHTML 1.0 — the two

standards previously released by the W3C (World Wide Web Consortium). As XHTML was

de ned, it was created so that pages written in XHTML also work in browsers that render

current HTML. The tags and attributes of XHTML and HTML remained the same, but the

syntax of XHTML code is more strict.The most signi cant di erences between XHTML

and HTML are as follows:

• In XHTML, all tags must be lowercase.

• XHTML requires all tags to be closed — meaning that there must be a tag at the start

and end of the element being tagged — such as a headline, paragraph, or image.

All tags in XHTML must close, even special tags that technically don’t require an open and close

tag. For example the <br> tag which creates a line break, uses a special self-closing syntax. A tag

that self-closes looks like this (with a space and a forward slash):

<br />

• XHTML requires proper nesting of tags. In the following example, the <em> tag to

emphasize text opens within the

<h1> headline tag. As such, it must be closed before

the

<h1> is closed.

<h1>Smoothies are <em>great!</em></h1>

We’ve used XHTML-compliant code throughout this book as we provide HTML5 examples,

which helps make your designs compatible with modern browsers and mobile devices.

Doctype lets the web browser know what to expect

The start of every web page should include a Doctype declaration, telling the Doctype

declaration tells the web browser a little bit of information about what it is going to see on

the page. Because there are di erent speci cations for XHTML and HTML the web browser

knows which language it’s about to see and render. Because a browser renders the page

starting at the top line and then moves down, placing your doctype on the  rst line makes a

lot of sense. While it’s not required, it’s good form to always use Doctype at the start of your

HTML pages. The doctype for HTML 4.0.1 looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

When a web browser sees a doctype declaration, the browser expects that everything on the

page that follows will use that language. If the page adheres to the speci cations perfectly, it is

considered valid.

webdesign.indb 58webdesign.indb 58 3/17/11 1:50 PM3/17/11 1:50 PM

Web languages

59Lesson 4, Fundamentals of HTML, XHMTL, and CSS

The W3C and page validation

You may recall from Lesson 2 that the W3C is the World Wide Web consortium — a non-

pro t group that helps guide the evolution of the web. The W3C provides guidelines and

rules for speci cations including HTML and XHTML. One way to determine the validity of

the HTML or XHTML code you generate is to use W3C’s free online validation service.

You will need access to the Internet for this exercise. If you do not have Internet access, you may

read through the exercise to understand the validation process.

1 Open your web browser and navigate to http://validator.w3.org

2 Click the Validate by File Upload tab.

The W3C validator allows you to check your HTML code for errors.

3 Click Browse (depending on your browser, this may also read “Choose File”), and navigate

to your web04lessons folder, and select the w3_noncompliant.html  le. Click the Check

button to validate the code.

4 The W3C site returns several errors. Scroll down the page and you can see in-depth

information on the err

ors. Don’t worry about the errors at this point. You will now

upload a nearly identical  le without errors.

5 Click the Browse button, navigate to your web04lessons folder, and select the

w3_compliant.html  le.

webdesign.indb 59webdesign.indb 59 3/17/11 1:50 PM3/17/11 1:50 PM

Web languages

Web Design with HTML and CSS Digital Classroom

6 Click the Revalidate button. You now see a Congratulations message that the page has

been checked and found to be compliant as XHTML 1.0 Strict.

Although the page is valid it may not look good to a viewer. This example uses a page

that has missing styles and missing images to emphasize this point. It’s important to

understand that having valid code is only one step in a series to make certain your web

pages can be viewed by the widest possible audience.

You can validate web pages that you’ve already placed online. Do this by using the Validate by

URL option. You can also paste HTML code directly into the validator by choosing the Validate

by Direct Input option.

7 In your web browser, choose File > Open, navigate to the web04lessons folder, and select

the same w3c_compliant.html document that you just con rmed w

as valid. If you are

using Internet Explorer, navigate to the web04lessons folder on your computer and drag

and drop w3c_compliant.html into it.

A “valid” page can have links to images that don’t exist and may have a poor visual design.

Because we know that the page uses valid XHTML, we know that whatever problems

there are with the page, they are not due to improper XHTML code. We know that

there are no missing tags or misspelled tags. This can be useful for troubleshooting,

allowing you to quickly identify any syntax problems.

webdesign.indb 60webdesign.indb 60 3/17/11 1:50 PM3/17/11 1:50 PM

Web languages

61Lesson 4, Fundamentals of HTML, XHMTL, and CSS

Other bene ts of standards-based design

W3C page validation is the most tangible aspect of standards-based web design, but there are

also other bene ts to creating well-structured pages, including:

Less code: Using HTML and CSS allows you to create similar pages with fewer lines of

code — less work for you and faster download times for the viewer.

Ease of maintenance: Less code means a website that is easier to maintain. This helps you, the

author of a page, as well as any members of a team working on maintaining or revising a website.

Accessibility: Web documents marked up semantically, meaning those that use the best HTML

tag for the job, can be easier to navigate by users with visual impairments and the information

they contain is more likely to be found by a visitor to the site.

Search engine optimization: Web pages with clear and logically named sections, both within

the code and also within page content, are easier for search engines to index and categorize

because content that is organized and well-labeled is easier for search engines to evaluate content

and relevance of content on the page.

Device compatibility: Websites that separate the structure from the style are more easily

repurposed for mobile devices and other browsers. CSS also allows for alternative style sheets

that optimize the appearance based on the device being used to view the page.

HTML structure

One of the most important concepts to understand when designing web content is the

nested structure of HTML documents. Elements are often nested within each other. You will

often start with the HTML structure  rst and then begin to style it with CSS.

As an example, let’s look at the basic elements that are in virtually every web page:

<html>

<body>

</body>

</html>

In this example, the <body> element is nested within the <html> element. In other words,

<body> is placed between the opening <html> tag and the closing </html> tag, so nested

tags are those that are placed between other opening and closing tags. These two elements

<body> and <html> form the structure of all web pages; when a browser opens an HTML

document, it looks for this structure.

Content within the body tag is visible on the page as it is displayed within the web browser.

<html>

<body>

Nobody knows who invented smoothies, but the world wouldn’t be

the same without them!

</body>

</html>

webdesign.indb 61webdesign.indb 61 3/17/11 1:50 PM3/17/11 1:50 PM

Web languages

Web Design with HTML and CSS Digital Classroom

In HTML documents, some of the content is displayed to the viewer in their browser, but

there is also other code on the page that is hidden from view, but useful for the browser,

search engine, or site developer. Examples of this hidden code include scripts to add

interactivity, code to help search engines categorize the document, and the styles that de ne

the appearance of the page. This code is often found inside of the

<head> element, and the

<head> element is nested within the <html> tags. An example of this is:

<html>

<head>

</head>

<body>

Nobody knows who invented smoothies, but the world wouldn’t be

the same without them!

</body>

</html>

In the above example, there is no content in the <head> element just yet. Notice that the

<head> element is nested within <html> but is not nested within <body>. The <head>

element opens and closes before the

<body> element starts.

The

<body> element contains text but it is lacking context so neither you nor a search

engine can determine if it is a heading, list, quotation, or some other type of content. To

de ne the text as a paragraph the

<p> tag is used:

<html>

<head>

</head>

<body>

<p>Nobody knows who invented smoothies, but the world wouldn’t be

the same without them!</p>

</body>

</html>

The paragraph element is now nested within the <body> element, which, in turn, is now

nested within the

<html> element. You will now open this document in a text editor and

add to the  le:

1 Choose File > Open and navigate to your web04lessons folder. Depending on which

text editor you are using,

you may need to select “All Files” instead of “Text Documents”

in order to see the  le. Choose the index.html  le and then click Open.

To get a better understanding of the structure of HTML and nesting of tags, you will add

a hyperlink to this document linking the word SmoothieWorld to an external website.

2 In the last paragraph that reads “All content on this site is the copyright of

SmoothieWorld,”

click once before the word SmoothieWorld and then type the

following code:

<a>. This <a> is the opening for the anchor element, which you use to

link to other pages in your site or elsewhere on the Internet.

webdesign.indb 62webdesign.indb 62 3/17/11 1:50 PM3/17/11 1:50 PM

Web languages

63Lesson 4, Fundamentals of HTML, XHMTL, and CSS

3 Click to the right of the word SmoothieWorld and type </a>. This is the closing tag for

the anchor tag and is required in XHTML.

If you are using Dreamweaver, it may be set to automatically complete closing tags. To change

this preset, choose Edit > Preferences (Windows), or Dreamweaver > Preferences (Mac). Under

Category, click Code Hints and select Never under Code Hints, and choose OK.

To  nish the job of creating a link, you need to add the destination of the link with the

href attribute.

4 Click between the letter

a and the closing bracket (>) in the opening tag. Press the

spacebar once to add a space and type

href="". The complete code should now read

<a href="">.

You now have an anchor tag and the href attribute. To  nish the job of creating a

hyperlink, you need to add the value of the attribute. In this case the value will be a

URL — a web address.

5 Click inside the quotation marks and type

http://www.digitalclassroombooks

.com/smoothieworld

. This completes the destination and with all the pieces in place,

you now have a complete hyperlink.

Creating a hyperlink using the <a> tag and href attribute.

6 Choose File > Save and then preview the page in your web browser by either opening

your browser and choosing File > Open and navigating to the  le you just saved, or

by Ctrl + clicking (Mac OS) or right-clicking (Windows) the  le and directing your

operating system to open the  le with a web browser. The link has the standard blue

underlined appearance of a hyperlink that you have not yet visited.

7 Close your browser and return to your text editor.

webdesign.indb 63webdesign.indb 63 3/17/11 1:50 PM3/17/11 1:50 PM

Web languages

Web Design with HTML and CSS Digital Classroom

Placing images in HTML

To add images to an HTML document, use the <img> tag. Like the anchor tag, the image tag

does nothing by itself. The image tag relies on attributes and values that specify the image to

display. Here you will insert an image into the HTML code.

1 Click once after the closing paragraph line

</p> that follows the text indicating the site

content is copyrighted. Press Return to go to the next line. Type

<img />.

The image tag is in a special category of HTML tags that are self-closing. You do not

need a pair of tags with the image tag; one tag is su cient. However, it is important that

you type this tag correctly. There is a space between the

img and the /. This satis es the

requirements of XHTML syntax, and you will specify the exact image to use in the

space between the

img and /.

Adding an image to to your page with the <img> tag.

2 Click once to the right of the text img, press the spacebar, and then type src="".

src is the source attribute, and you will specify a value, which is the location (URL) of

an image which will display on the page.

3 Click between the quotation marks that follow the

src= code and type images/

blueberry_smoothie.jpg.

Your

img code should now look like this:

This code tells a web browser to look inside the images folder and display the  le

blueberry_smoothie.jpg. In the next few steps, be sure to maintain the extra space

between the last quotation mark and the closing tag. You will be adding an

alt tag.

This

alt attribute represents the text equivalent for the image and is required if you

want your page to be valid.

Alt attributes help those who use screen readers to navigate

the web. They also appear in browsers if the image is broken or missing for some reason.

4 Click to the right of the last quotation mark that follows the blueberry_smoothie.jpg  le

name and press the spacebar.

Type

alt="".

5 Click inside the quotation marks you added in step 4 and type Blueberr

y smoothie.

Both the

src attribute and the alt attribute are required for fully valid XHTML. There

are also optional attributes that you should consider. We’ll look at two of these options

attributes:

height and width.

webdesign.indb 64webdesign.indb 64 3/17/11 1:50 PM3/17/11 1:50 PM

Web languages

65Lesson 4, Fundamentals of HTML, XHMTL, and CSS

6 Click to the right of the last quotation mark following the alt attribute, press the

spacebar, then type

width="180" height="320". These attributes tell the web browser

how large the image should be displayed on the page. The values used are pixels. Keep

this document open as you will be working with it in the next exercise of this lesson.

Adding Width and Height values to your image is not required but is a good idea.

Using Optional Attributes

Many of HTML’s optional attributes fall under the category of best practices. Best practices is an

umbrella term used to describe the accepted way of doing something in web design. There are

generally logical reasons behind best practices; for example, setting the width and height creates

a placeholder for the images even if they haven’t loaded due to a slow Internet connection.

Without the placeholder created by the width and height values, the page layout will change as

the images load.

7 Choose File > Save and then preview your page in the browser to see your image.

The result of an embedded image as displayed in the browser.

webdesign.indb 65webdesign.indb 65 3/17/11 1:50 PM3/17/11 1:50 PM

The role of CSS

Web Design with HTML and CSS Digital Classroom

The role of CSS

Cascading Style Sheets (CSS) use a separate language from HTML. CSS allows you to apply

consistent styling of elements across all pages on your site, so that all headings, lists, and

paragraphs look and act the same on every page of a site.

How we refer to CSS syntax in this book

Before you begin to work with CSS, we need to explain how we will refer to the various

parts of CSS syntax throughout this book. This is not as easy as it sounds because there is a gap

between the o cial speci cation of the CSS language and the way designers often refer to CSS

in the “real world.” Nevertheless, here are the fundamentals: all the following code is what we

refer to as a rule in CSS:

h1 {

color:blue;

margin-top:1em;

}

There are various components to this rule, as follows:

K^

FRORUEOXH

PDUJLQWRSHP¦

A. Selector. B. Declaration. C. Property. D.Value.

We will refer to each of the various components from time to time throughout the book, so if

we ask you to change the value “blue” to “red” you should know what to do. Or if we ask you

to locate and change the

h1 selector to a h2 selector, it should make sense.

On a day-to-day basis, most designers aren’t always so speci c however. For example the rule

above might be referred to as a “style,” “style rule,” “the

h1 rule,” or “the CSS rule for h1.” Also,

as you can see above, the o cial name for the pair of the property and the value is called a

declaration. Again, in everyday use, the use of the term “declaration” is not common and most

designers will use the term property or properties interchangeably.

webdesign.indb 66webdesign.indb 66 3/17/11 1:50 PM3/17/11 1:50 PM

The role of CSS

67Lesson 4, Fundamentals of HTML, XHMTL, and CSS

Styling a heading

To get a sense of how CSS works, you’ll create a simple CSS rule that changes the style of a

heading in your page. In your index.html page, you already have the content “

SmoothieWorld”

nested inside an

<h1> tag. Perhaps one of the best ways to begin thinking about how CSS

works is to consider how the default style of this heading is rendered in the browser.

1 Examine the heading of the  le you pre

viewed in the last step of the previous exercise. The

style and formatting instructions are being provided by the browser. The size, color, and font

are provided by the browser because exact formatting instructions are not speci ed. The

browser only knows that this is a headline. You will rede ne this style with a CSS rule.

2 In your code, locate the

<title> tag on line 5, click once at the end of the line,

following the closing tag, then press return to add a new line of code. Type the following:

3 Press Return three times and then type </style>, This is a style element which you will

use to place your rule for the style of the

<h1> element.

The <style> element is nested within the head section of the page, and is where the CSS rules will be placed.

The <style> element is nested within the <head> tags of your page. In HTML,

everything nested inside the

<head> section is not rendered by the browser on the page.

For example, there is also a

<title> element inside this section; this title appears at the

top of the web browser, not on the actual page.

4 In the empty line below the opening

h1 {

This is your selector. The selector is the HTML element you want to style, in this case

the Heading 1 element.

5 Press Return and then press Tab to place your cursor below the curley bracket. The tab is

optional but it helps make y

our CSS more readable. As you will soon see, the number of

lines in this rule will grow and it’s worthwhile keeping the code easy to read.

webdesign.indb 67webdesign.indb 67 3/17/11 1:50 PM3/17/11 1:50 PM

The role of CSS

Web Design with HTML and CSS Digital Classroom

6 Type the following code below the h1 {:

color:purple;

The word color is referred to as a property in CSS syntax and the word purple is a value.

The combined pair of a property and a value is called a declaration.

The combination of the property (color) and the value (purple) is often referred to as style rule.

7 Press Return again and on the next line, type } which is the right curley bracket

character.

This closes the curley bracket you added in step 4.

You now have three lines in this rule:

h1 {

color:purple;

}

8 Choose File > Save and then preview your page in the browser. The head is now a light

purple color and you have successfully created your  rst CSS rule. Close your browser

and return to your text editor.

Your H1 color is now being styled by a CSS rule.

webdesign.indb 68webdesign.indb 68 3/17/11 1:50 PM3/17/11 1:50 PM

The role of CSS

69Lesson 4, Fundamentals of HTML, XHMTL, and CSS

9 In the HTML  le, select the word purple and type the following for the color value:

#800080. This hexadecimal color is the equivalent of purple. You can use either named

colors or hexadecimal colors when de ning colors using CSS.

Save your  le and then preview it in the browser. The color remains the same.

Hexadecimal colors are a more common method for describing colors.

Hexadecimal colors

Color in both HTML and CSS color is referred to by a six-character code preceded by a pound

sign. This code is called hexadecimal code, and is the system used to identify apply color to

elements. You can reproduce almost any color using a unique hexadecimal code. For example,

the following code is dark-red:

a#CC0000.

The  rst, middle, and last pair of digits in the hexadecimal code correspond to values in the

RGB spectrum. For instance, white, which is represented in RGB as R:255 G:255 B:255, is

represented in HTML as #FFFFFF (255|255|255). A program like Photoshop will allow you to

choose a speci c RGB color in the Color Editor and give you the equivalent hexadecimal color

for use in your code.

There are also online references you can use to locate or “mix” hexadecimal colors such as:

www.w3schools.com/Html/html_colorvalues.asp

The rule you just created uses what is o cially known as a “type selector” since it targets

every instance of the

h1 element type in your document. Type selectors assign CSS properties

to an existing HTML tag. In this case the

<h1> tag. All <h1> tags on this page will be

displayed as purple. Type selectors are more commonly known as tag selectors. It is rare that

you will actually hear someone use the phrase “type selector” but that is the o cial name for

it, so we mention it here.

You will now get an introduction to another category of CSS styles known as a class. You

will also work with the

<span> element which separates and controls inline content, such as

a sentence within a paragraph, or an individual word within a sentence.

webdesign.indb 69webdesign.indb 69 3/17/11 1:50 PM3/17/11 1:50 PM

The role of CSS

Web Design with HTML and CSS Digital Classroom

Understanding class styles and <span>s

Tag selectors are frequently used, but they can only be applied to HTML elements. When

you want to style something that does not map directly to a tag, for example, change the

color of a single word within a paragraph, standard HTML tags are not a good option. In this

case, you can use a class selector, which is a CSS rule that you can apply to any number of

items on a page. Class selectors have  exible naming options, but you should choose names

that describe what they do. For example, you may wish to name class selectors as

caption,

imageborder, or redtext. In this exercise, you will create a class style that applies the color

purple to the word Smoothies in your paragraph.

1 Place your cursor on the line immediately below the closing curley bracket for the

rule, then type the following:

.purple {

color:purple;

}

Note the period at the beginning of the class selector. The text following the period is

the class name. You can use any name you wish, but the period is required at the start

to identify it as a class.The rule is the same as in the last exercise, only here the selector

is not the

h1 element. The class name can be anything you want, but it must have the

period at the beginning to identify it as a class. Next you’ll apply this class to the word

Smoothie in order to style it purple. To do this, you will use an HTML tag

<span>.

2 In the paragraph within the

<body> tag, locate the word Smoothies, click once to the

left of it, and then type:

<span>

The <span> tag allows you to de ne the portion of a paragraph you’d like to style.

3 Click to the right of the word Smoothies and add a closing span tag </span>.

Your code should look like this:

<p><span> Smoothies</span> are the ...

Save your  le. If you were to preview the page in the browser you would see no change.

The

<span> tag in HTML is an empty tag; it does nothing on its own and needs to be

paired with a style. The

<span> tag de nes the beginning and end of where the style

will be applied within the paragraph, but it does not apply the style on its own, and does

not de ne the style.

webdesign.indb 70webdesign.indb 70 3/17/11 1:50 PM3/17/11 1:50 PM

The role of CSS

71Lesson 4, Fundamentals of HTML, XHMTL, and CSS

4 Close the browser and return to your text editor. Locate the opening <span> tag you

inserted before the word Smoothies. Click once after the word span but before the

bracket, then type the following:

class="purple"

The code should now read

<span class="purple">Smoothies </span>

5 Locate the word Smoothies in the second sentence

<span class="purple"> and after the word Smoothies type: </span>.

6 Save your page and preview it in your browser. The text is now styled purple. Keep the

document open in the text editor, as y

ou will be working with it in the next exercise.

The word Smoothies is styled using an HTML span tag and a CSS class style.

Three ways to use styles

In this exercise, your styles were located within the head section of the page. This type of

style is called an internal style sheet. In addition to internal (or embedded) style sheets, there

are external style sheets and inline styles.

An external style sheet is a separate document with the  le extension .css. When using an

external style sheet, all styles reside inside the style sheet document and you link it to your

HTML pages. While internal style sheets a ect only the page on which they exist, external

styles can be applied to multiple pages.

Inline styles are used infrequently. With inline styles, the style rules are nested inside the HTML

tags. An example of an inline style that colors a heading purple would look like this:

<h1 style="color:purple">Smoothies</h1>

Inline styles are powerful because they override both internal and external styles, although

they only apply to a single tag at a time. This embedded nature of inline styles means they are

not easily re-used. In the simple example illustrated above you can see the style for the color

purple is nested inside the

<h1> tag. If you had 50 <h1> elements throughout your website

and were using inline styles, you would add this style code 50 times. If you decided to change

the color to green, you would need to locate and modify all 50 uses of the style. Inline

styles are useful for single overrides or when an internal or external style sheet may not be

available; a good example of this is HTML-based e-mail.

webdesign.indb 71webdesign.indb 71 3/17/11 1:50 PM3/17/11 1:50 PM

The role of CSS

Web Design with HTML and CSS Digital Classroom

You will not be using inline styles very often in this book, which is a re ection of the

current state of web design. Working with a combination of internal and external styles is the

most common practice of web designers today.

Internal versus external style sheets

Internal style sheets are CSS rules contained directly within a document, using the

External style sheets are CSS rules saved in a separate document with the  le extension .css.

With internal style sheets, CSS rules apply only to the HTML in the current document. For

example, if you had a 20 page website and were using internal style sheets, you would need

to create a separate style sheet in each of the pages. A change to the style would require you

to update the internal styles in each of the 20 separate pages.

External style sheets place all the CSS rules for a site in a single document. You can attach the

.css  le to an unlimited number of HTML pages. This provides more  exibility. If a style rule

is changed in the external style sheet, all paragraphs across the site are modi ed with a single

step. You will make an external style sheet and then attach it to a new HTML page.

Creating an external style sheet

An HTML page does not have to be limited to just one style sheet, and many large websites

will break-up their styles into separate pages, making them easier to organize and maintain.

You can even use style sheets for speci c functions such as printing a page or for displaying a

site on mobile devices. In Lesson 9, you will see that speci c style sheets can even be used to

make sites compatible with older web browsers when they are used to visit sites you create.

In this exercise, you will create a new external style sheet, move the style rules from your current

document to the external style sheet, and then attach the style sheet to a new HTML page.

1 Choose File > New Text Document.

The text editor you are using may have a di erent menu command. You may need to choose the

equivalent command.

2 Choose File > Save. Name the document

styles.css and save the styles.css  le into the

same folder as the HTML document you worked on in the previous exercise. Anexternal

cascading style sheet has a speci c .css  le extension but it is simply a text  le.

3 Switch to the HTML document from the last exercise, but keep the style sheet open

aswell.

webdesign.indb 72webdesign.indb 72 3/17/11 1:50 PM3/17/11 1:50 PM

The role of CSS

73Lesson 4, Fundamentals of HTML, XHMTL, and CSS

4 In the HTML document locate the rules you created within the <style> tags and then

select them. Do not select the style tags themselves, just the rules that start with

h1 and

end with the closing bracket

Select just the style rules, not the <style> tag.

5 Choose Edit > Cut, then switch to the styles.css  le and choose Edit > Paste to paste the

rules into the external style sheet document. Choose File > Save to save your style sheet.

The entire external style sheet acts as a substitute for the

document. Now that you have moved the rules to this document you need to link it to

your HTML page so that a web browser knows where to  nd the style rules that apply

to the HTML.

6 Switch back to the index.html page and choose File > Save. You will add the

<link>

tag, pointing to the styles.css document. If you do not link to the external styles, the

HTML page will have no styles.

7 Place your cursor after the closing style tag

</ style> then press return to start a new

line. Now type the following:

You have added the rel, type, and href attributes. You may recall the href attribute from

when you added the hyperlink in an earlier exercise. In order for your external style sheet to

work properly, the name of the  le, and the path to where it is located must both be accurate.

8 Choose File > Save and then preview the HTML page in your browser. The page should

not change, as the same style is being used;

it is simply being applied from outside the

document.

9 Close the browser and return to your text editor. You’ll now create a new HTML

document, and add the same link to the external CSS  le

, seeing how the rules are applied.

10 Choose File > Open and locate the  le test.html in the web04lessons folder.

This is an

empty HTML document.

11 Continuing to work in your text editor, switch back to the index.html  le and select the

entire

choose Edit > Copy.

webdesign.indb 73webdesign.indb 73 3/17/11 1:50 PM3/17/11 1:50 PM

The role of CSS

Web Design with HTML and CSS Digital Classroom

12 Switch back to the test.html document and then click below the <title> element and

Choose Edit > Paste to place the

File > Save.

Attaching an external style sheet using the <link> element.

The external style sheet is now attached to this HTML document. Any HTML tags you

add to this new document will be styled if there is a corresponding rule in the CSS  le.

For example, the

<h1> tag has a style of the color purple.

13 Click inside the

<body> element and type:

<h1>The Beneﬁ ts of Smoothies </h1>

Save the  le and preview it in your web browser.

The <h1> tag gets its style from the external CSS style sheet you created.

The heading is purple because the style rule for the <h1> element is color:purple and

because this rule is located in an external sheet and linked in two places: the index.html

and test.html pages. Because of this, you can control the style from of both HTML

documents a central location.

What makes styles cascading

You’ve seen three di erent places where CSS rules are found: inline, internally, and externally.

If there are con icting de nitions of styles between inline, internal, and external styles, the

inline style will be used because it is closer to the HTML source. The internal style sheet

takes precedence over an external style sheet, and de nitions used in an external style sheet

are used only if they don’t con ict with either inline or internal styles.

In this lesson, you’ve discovered many ways to format text. When you want to style text, it is

almost always best to use actual text rather than an image of text. Using actual text rather than a

picture of text created in programs like Photoshop or Illustrator makes your sites more accessible to

the widest audience of users, devices, and search engines.

webdesign.indb 74webdesign.indb 74 3/17/11 1:50 PM3/17/11 1:50 PM

Self study

75Lesson 4, Fundamentals of HTML, XHMTL, and CSS

Self study

1 In this lesson, you discovered three categories of styles: internal, external and inline. You

also created an element style, and a class style and then move them into an external style

sheet. Additionally, you explored how to link an external style sheet to a new HTML page.

Review

Questions

1 What is a doctype and how does it relate to page validation?

2 In the following XHTML code what is the attribute and what is the attribute value?

What other attributes w

ould you often  nd in an img element such as this?

3 De ne the purpose of an external style sheet and one of the bene ts of using an external

style sheet.

Answers

1 A doctype is a declaration at the start of your HTML document. It is used by a web

owser to deter

mine what markup language and version is used on the page. Page

validation tests the syntax of your code against the speci cations of your doctype.

Page validation is a good way to check your page for problems such as missing tags or

typographical errors in your code.

2 In this line of code

src is the attribute and the attribute value is

images/blueberry_smoothie.jpg. Nested inside the <img> tag is the src attribute

and its value. It links to an image that is then rendered on the page. Other examples

of image attributes are the

alt attribute, which provides a text version of an image to

devices such as screen readers and the

width and height attributes which de ne the

size of the image on the page.

3 An external style sheet is a text document with the extension .css. This document

contains CSS rules that de ne the appearance of HTML elements. Because exter

nal style

sheets can be linked to multiple HTML pages, they provide one central location for your

styles. One bene t to this is the ability to update the style of an entire site with a single

change to a CSS rule. Other bene ts include the ability to use multiple style sheets for

organizational purposes, and to specify speci c style sheets for printing or optimize the

display for mobile devices.

webdesign.indb 75webdesign.indb 75 3/17/11 1:50 PM3/17/11 1:50 PM

webdesign.indb 76webdesign.indb 76 3/17/11 1:50 PM3/17/11 1:50 PM

77Lesson 5, Graphics, Color, and Transparency

What you’ll learn

in this lesson:

• Locating free resources

that you can use for

image editing

• Determining the

optimum file size

• Deciding on the best

format

• Exporting optimized

images from Photoshop

• Slicing images in

Photoshop

Graphics, Color,

and Transparency

In this lesson, you’ll learn how to optimize images so they have a

small  le size and still look great in a viewer’s browser. By learning

about the di erent image formats and the features they o er, you

will be able to export  les that contain accurate colors and partial or

full transparency. You’ll learn about image slicing and how it allows

you to choose di erent formats for di erent parts of a single image so

the  nal result both looks great and downloads quickly.

Starting up

You will work with several  les from the web05lessons folder in this lesson. Make sure you have

loaded the weblessons folder onto your hard-drive from www.digitalclassroombooks.com/webdesign.

See “Loading lesson  les” in the Starting Up section of this book.

See Lesson 5 in action!

Use the accompanying video to gain a better understanding of how to use some of

the features shown in this lesson. You can  nd the video tutorial for this lesson at

www.digitalclassroombooks.com using the URL provided when you registered your book.

Lesson 5

webdesign.indb 77webdesign.indb 77 3/17/11 1:50 PM3/17/11 1:50 PM

Optimizing graphics for the web

Web Design with HTML and CSS Digital Classroom

The examples throughout this lesson use Adobe Photoshop, but there are other applications

you can use for cropping, scaling, saving, and retouching images. The following links contain

free software and resources that can help you do most tasks in this lesson:

GIMP

www.gimp.org

Adobe Photoshop (free trial version)

www.photoshop.com

Windows Live Photo Gallery

http://explore.live.com/windows-live-essentials

Picasa (photo-editing application from Google)

http://picasa.google.com/

Optimizing graphics for the web

Optimizing refers to the preparation of images for use on the web. The goal of optimization

is to reduce the  le size of the image for faster downloading, without compromising the

quality of the image. Ultimately, you may have to reduce the quality of your images so they

are small enough to be downloaded and viewed quickly; in many cases, it is more important

to have a speedy download than to make the user wait for beautiful (but large) image  les.

Before you start adjusting the  le size of your images, you should have a general idea of how

you will use them, and how big they will be.

Resizing the image

Many web designers mistakenly believe that if an image has a resolution of 72 dpi (dots per

inch), it’s ready for the web. However, the total pixel dimensions of the image is much more

important.

This example uses Adobe Photoshop, and the image is ready to be resized. In your work ow,

all retouching, adjustments, and other editing must be completed before you begin

optimizing an image for the web.

webdesign.indb 78webdesign.indb 78 3/17/11 1:50 PM3/17/11 1:50 PM

Resizing the image

79Lesson 5, Graphics, Color, and Transparency

1 In Adobe Photoshop, choose File > Open. Navigate to the web05lessons folder and open

the  le named web0501.jpg. An image of several people enjoying smoothies appears.

The designer has planned well and knows the approximate size that this image will be on

the web page. You will now open the rough comp that the designer created to plan the

size of the image within the page.

2 Keep the  le web0501.jpg open, and choose File > Open.

In the dialog box that appears,

navigate to the web05lessons folder.

3 Locate the image named web0502.jpg and click Open. The rough comp appears.

(The designer created this document using the SketchFlo

w feature in the Microsoft

Expression Blend application.)

The rough design for this web page.

The designer has decided that the  nal web page will be approximately 800 pixels wide. For

more information, see the following sidebar, “Images and Browser Window Size.” The images

you will work on are represented by the two solid squares on the right.

webdesign.indb 79webdesign.indb 79 3/17/11 1:50 PM3/17/11 1:50 PM

Resizing the image

Web Design with HTML and CSS Digital Classroom

In this case, you have a mock-up that helps to determine the size of the  nal images. Even if

you do not have a mock-up prepared, before optimizing your images, you should know the

approximate size of your  nal images based on the  nal size of the web page.

Images and Browser Window Size?

According to the website Counter.com, over 50 percent of users have monitors with a resolution

of 1024 × 768 pixels. Thirty percent have 1280 × 1024-pixel monitors. This does not mean their

browser window opens to that size; in fact, their browser window usually varies from 800 × 600

pixels to 960 × 600 pixels.

To determine how wide a web image should be, separate the total number of screen pixels into

sections, and specify the percentage of the screen you want the image to occupy. For example,

if you want the image to occupy half the screen (remember, browser windows are typically

about 900 pixels across), type 480 into the Width text  eld in the Pixel Dimensions section of

the Image Size dialog box; for one-quarter of the screen, type 240, and so on. You should also

remember that the pixel size will not change, regardless of what the ppi resolution of your image.

So, 200 pixels in a 300-ppi image occupy as much window space as 200 pixels in a 72-ppi image.

At this point, you can determine the approximate size of the optimized images. In this

example you will use the grid feature, separated into percentages, to help you determine the

size of the images.

4 With web0502.jpg open, choose View > Show > Grid. A grid appears in the image area.

You will now adjust the g

rid size.

5 Choose Edit > Preferences > Guides, Grids & Slices (Windows), or choose Photoshop >

Preferences > Guides,

Grids & Slices (Mac OS).

6 In the Grid section of the Guides, Grids & Slices dialog box, type 100 in the Gridline

Ever

y text box and choose percent from the drop-down menu.

webdesign.indb 80webdesign.indb 80 3/17/11 1:50 PM3/17/11 1:50 PM

Adjusting the image size

81Lesson 5, Graphics, Color, and Transparency

7 In the Subdivisions text box, type 8 and click OK.

Each of the eight grid subdivisions represents 100 pixels; you can use this value to

determine the size you want to optimize your image to.

Set up the grid lines to appear in eight subdivisions (top); the resulting grid (bottom).

Adjusting the image size

By looking at the grid on your mock-up, you can see the images on the right occupy

more than two grid divisions in both width and height, which means that this image is

approximately 225 pixels wide by 150 pixels high.

If you have Photoshop Extended, you can select an area in your image, choose Window >

Measurement, and then click the Record Measurements button to see the pixel dimensions of your

selection. This is a helpful feature when trying to rebuild from existing compositions.

You will now optimize this image to  t the allotted space;  rst, you’ll check the  le size of

this image.

webdesign.indb 81webdesign.indb 81 3/17/11 1:50 PM3/17/11 1:50 PM

Adjusting the image size

Web Design with HTML and CSS Digital Classroom

1 Return to the web0501.jpg  le and select Image > Image Size. The Image Size dialog

box appears, indicating that this  le is 849 by 565 pixels.

The Image Size dialog box.

Remember that the top part of this dialog box is for on-screen resizing and the bottom

part is for resizing an image for printing. On-screen images cannot accommodate more

dots per inch in the same space; they occupy space on the monitor based on their

pixel count. This particular image would use about 90 percent of a browser window as

calculated from the pixel dimensions, not from the resolution. In the following steps, you

will only consider pixel dimensions.

2 After looking at the pixel information in the Image Size dialog box, click Cancel. Since

ou must deter

mine a speci c width and height, you will use the Crop tool.

3 Click the Crop tool (

) to select it in the Tools panel.

4 In the Options bar, type 225px in the

Width text bo

x and 150px in the Height textbox.

Fixing the crop size.

webdesign.indb 82webdesign.indb 82 3/17/11 1:50 PM3/17/11 1:50 PM

Adjusting the image size

83Lesson 5, Graphics, Color, and Transparency

5 With the Crop tool still selected, click and drag the image to select the area you want to

include in the  nal image. Notice that you cannot control the proportions of your crop;

you are forced to use the same proportions as the pixel amounts you entered.

Cropping the image to a  xed pixel size.

6 Once you determine the crop area, press Return or Enter, or click the check mark icon

(

) in the upper-right corner of the Options bar.

If you want to cancel a crop, press the Esc key or click the Cancel Current Crop Operation button

( ) , also in the upper-right corner of the Control panel.

7 Choose Image > Image Size; in the Image Size dialog box, you see that the image area is

now cropped to the r

equired dimensions.

webdesign.indb 83webdesign.indb 83 3/17/11 1:50 PM3/17/11 1:50 PM

Applying the Unsharp Mask filter to an image

Web Design with HTML and CSS Digital Classroom

Applying the Unsharp Mask  lter to an image

We strongly recommend that you sharpen an image after you resize an it Photoshop because

it can become blurry. The Unsharp Mask  lter is a great tool for sharpening images. The

following  gure shows the image before and after you apply the  lter. The Unsharp Mask

feature sharpens the image based on levels of contrast, while keeping the areas that don’t have

contrasting pixels smooth.

The image before (left) and after (right) you apply unsharp masking.

Follow these steps to apply the Unsharp Mask  lter:

1 Choose View > Actual Pixels or double-click the Zoom tool ( ).

When you’re using a  lter, y

ou should view your image at its actual size to see the results

more clearly.

2 Choose Filter > Sharpen > Unsharp Mask.

The Unsharp Mask dialog box displays three options:

• Amount: The Amount value ranges from 0 to 500. The amount you choose depends

upon the subject matter.

For example, you can sharpen a car or appliance at 300

or 400, but with a portrait, every wrinkle, mole, or hair will become more de ned.

If you are unsure about the value to use, start with 150 and gradually increase the

amount until you  nd a value that looks good.

• Radius: The Unsharp Mask  lter creates a halo ar

ound the areas that have enough

contrast to be considered an edge. For print images, you can use a value between

1 and 2, but if you’re creating a billboard or poster, increase the size.

• Threshold: The Threshold v

alue is the most important one in the Unsharp Mask

dialog box because it determines the parts of the image that should be sharpened. This

value can range from 0 to 255. Apply too much, and no sharpening appears; apply too

little, and the image becomes grainy. For example, if you leave it at zero, noise appears

throughout the image, much like the grain you see in high-speed  lm. A value of 10

causes the  lter to apply when the pixels are ten shades or more away from each other.

Start with a value of 10, and gradually increase it until you  nd a value that works well.

webdesign.indb 84webdesign.indb 84 3/17/11 1:50 PM3/17/11 1:50 PM

Selecting the best image format

85Lesson 5, Graphics, Color, and Transparency

3 For this exercise, set the Amount to 250, Radius to 1, and Threshold to 10.

You can compare the original image with the resulting image in the Preview pane of the Unsharp

Mask dialog box by clicking and holding the image in the Preview pane; this shows the original

state of the image. When you release the mouse button, you preview the Unsharp Mask  lter again.

4 Click OK to apply the  lte

r. The image is sharpened.

5 Choose File > Save; keep the  le open for the next part of this lesson.

In some images, stra

y colored pixels may appear after you apply the Unsharp Mask  lter. If

this occurs in your image, choose Edit > Fade Unsharp Mask immediately after applying

the Unsharp Mask  lter. In the Fade dialog box, select the Luminosity blend mode from the

Mode drop-down list and then click OK. This step applies the Unsharp Mask  lter to the

grays in the image only, thereby eliminating sharpening of colored pixels.

You can also choose Filter > Convert for Smart Filters before you apply the Unsharp Mask  lter.

Smart  lters allow you to undo all or some of any  lter, including sharpening  lters that you

apply to a layer.

Selecting the best image format

When saving an image that you will use on the web, you need to consider two factors:

the quality and size of the image  le. When you are saving a  le, you must  nd a balance

between the quality you want and the download speed your viewers demand.

In this section, you will look at di erent  le formats and decide on a format for the picture you

just resized; the following example uses the Save for web & Devices feature in Adobe Photoshop.

webdesign.indb 85webdesign.indb 85 3/17/11 1:50 PM3/17/11 1:50 PM

Choosing the best file format for your image

Web Design with HTML and CSS Digital Classroom

Choosing the right  le format

The most popular formats for web images are JPEG, PNG, and GIF. Each one of these

formats has bene ts and drawbacks, as shown in the following table.

File Formats

FILE

FORMAT

LOSSY

SUPPORTS ANTI-ALIASING

SUPPORTS TRANSPARENCY

SUPPORTS ANIMATIONS

SUPPORTS VARYING AMOUNTS

OF TRANSPARENCY

HAS LIMITED COLORS

IS BEST FOR PHOTOS

IS BEST FOR

SOLID COLORS

JPEG

•• •

PNG-8

••••

PNG-24

••••••

GIF

••••

Choosing the best  le format for your image

Throughout this lesson, you will have the opportunity to save images in each of the major

 le formats: JPEG, PNG, and GIF. You will also see the di erences between the formats and

when to use each.

Saving images as JPEGs

The JPEG  le format helps you keep the  le size down, but some loss in image quality

occurs when you save the image  le. Since the JPEG format supports anti-aliasing, we

recommend it for photographic images and illustrations with a lot of gradients; anti-aliasing

is a technique used in computer graphics that helps smooth out the naturally jagged edges of

objects such as text or any area where a transition in tonal values is needed. When saving an

image as a JPEG, you can also choose varying levels of quality.

webdesign.indb 86webdesign.indb 86 3/17/11 1:50 PM3/17/11 1:50 PM

Choosing the best file format for your image

87Lesson 5, Graphics, Color, and Transparency

Choosing the quality of a JPEG

In the following steps, you will complete the optimization process by saving your image as

aJPEG.

1 With web0501.jpg still open, choose File > Save for Web & Devices. The Save for Web &

Devices window appear

The Save for Web & Devices window shown with the 2-Up tab selected.

The Save for Web & Devices window allows you to preview changes that you make

in the settings, such as  le type and size. The section in the upper-right corner of the

window is where you determine the  le format and  le compression settings. In this

example, JPEG is selected.

The Save for Web & Devices feature is used here to create an image for the web, but you can

also use this feature to prepare and preview  les for use on mobile devices by clicking the Device

Central button.

webdesign.indb 87webdesign.indb 87 3/17/11 1:50 PM3/17/11 1:50 PM

Choosing the best file format for your image

Web Design with HTML and CSS Digital Classroom

Above the Format drop-down menu is the Preset drop-down menu. This menu contains

pre-con gured settings for many  le formats; later in this lesson you will learn how to

store your own presets here.

In the upper-left corner is a toolbar with tools you can use to select sections (or slices) of

an image, zoom into, and sample colors from an image.

The large preview window allows you to compare di erent  le formats and compression

settings. You can compare up to four  le formats and see the approximate download

times and  le sizes.

2 Select the 2-Up tab at the top of the preview window.

3 Click to select the second image preview to assign settings.

om the Preset dr

op-down menu, select JPEG High. Note that the image preview

shows an image of the  le in that format and displays information about the JPEG

settings in the lower-left corner.

Download information appears under the preview.

In this example, the  le is reduced to 18.64K and it will take about 4 seconds to

download at the speed of about 56.6 kbps (kilobits per second).

You can change the speed and recalculate the download time by clicking the Select Download

Speed button ( ) located to the right of the download speed.

Since most viewers are not willing to wait for a download, this  le size might be too

large for the viewer

. You will lower the image quality in the following steps to reduce the

 le size.

4 Click the Compression drop-down menu located below the Format drop-down menu

and choose Medium; note that the settings change along with the download infor

mation.

The JPEG image format uses lossy compression to save a  le. Lossy means that the image

is compressed by discarding part of the data in the  le.

webdesign.indb 88webdesign.indb 88 3/17/11 1:50 PM3/17/11 1:50 PM

Choosing the best file format for your image

89Lesson 5, Graphics, Color, and Transparency

5 Click the Compression drop-down menu and choose Low. The visual quality changes

and the download time decreases.

For this example, the Low quality is too low and the download time for Medium quality

is too long. Toggle between the two settings to see that the Quality text box indicates

that Low is set to 10 and Medium is set to 30. These presets are helpful, but you can

manually adjust the settings.

6 Click Quality to display the Quality slider and drag it to the right, increasing the value to 20.

Customize the quality of your image using the

Quality slider.

Previewing your image

The Save for Web & Devices window allows you to preview an image  le in a browser

before saving it. You must  rst ensure that a browser can be recognized from this window.

1 Click the Preview the Optimized Image in a Browser button (

) and choose EditList.

To choose a web browser click on the Preview the Optimized

Image in a Browser button.

2 When the browser window appears, click Add. In the dialog box that appears, navigate to

C:\Program Files (Windows) or Macintosh HD\Applications (Mac OS) and locate the

browser in which you want to preview your images; click Open and then click OK in

the browser window.

3 Click the Preview button to view your image in the browser. If you want to change the

quality, close the br

owser window and return to the Save for Web & Devices window.

4 If you want a better image quality, change the JPEG setting to Very High. Preview the

image directly in the Sav

e for Web & Devices window.

5 Click Save in the Save for Web & Devices window. In the dialog box that appears,

navigate to the web05lessons folder

webdesign.indb 89webdesign.indb 89 3/17/11 1:50 PM3/17/11 1:50 PM

Choosing the best file format for your image

Web Design with HTML and CSS Digital Classroom

6 Name the  le web0501_optimized, and make sure that Images only is selected in the

Format drop-down menu.

7 Make sure Settings are con gured to Default Settings,

and then click Save. Remember that

when creating a website, you should save this image  le into the appropriate site folder.

You are now back to your image in Photoshop. We strongly recommend that you keep a

copy of your image in an uncompr

essed format. If you have Photoshop, save this  le as a

PSD image. If you do not have Photoshop, save as a TIFF or PNG  le. Avoid saving a  le

multiple times as a JPEG, because the quality is reduced every time you save your  le in

this lossy format.

8 Choose File > Save As and navigate to the web05lessons folder. In the File Name text

box, type

WEB0501_done. Choose the Photoshop (PSD) format, and click Save.

9 Choose File > Close to close the  le.

Creating a transparency e ect in a JPEG image

Transparency doesn’t exist in the JPEG format, but you can simulate the transparency e ect.

In following steps, you will use the Matting feature to match the background color of your

web page and then preview the image in your browser.

1 In Photoshop, choose File > Open. In the dialog box that appears, navigate to the

web05lessons folder,

select the image named web0503.psd, and click Open. An image of

a smoothie with a transparent background appears.

When you save an image for the web,  le size is a big concern. Since this is a

photo

graphic image, JPEG is the best format to use to keep the  le size small. However,

the web page has a pale yellow background, and by default, the JPEG will appear with

a white background. The solution is to use the Matte control, which becomes available

when you optimize this  le.

2 Choose File > Save for Web & Devices. In the Save for Web & Devices window, choose

JPEG Medium from the Preset dr

op-down menu.

webdesign.indb 90webdesign.indb 90 3/17/11 1:50 PM3/17/11 1:50 PM

Choosing the best file format for your image

91Lesson 5, Graphics, Color, and Transparency

3 Click the Matte drop-down menu and choose Other. The Color Picker appears.

Changing the matte color.

4 In the Hexadecimal text box (located to the right of the # sign), type FFFFCC; then

click OK. The color appears immediately in the preview window.

5 Click the Preview button to preview the image in the browser with the new matte color

applied.

Preview your image in a web browser with the

background color applied.

6 Close your browser window and return to the Save for Web & Devices window.

webdesign.indb 91webdesign.indb 91 3/17/11 1:50 PM3/17/11 1:50 PM

Choosing the best file format for your image

Web Design with HTML and CSS Digital Classroom

Saving your settings

You can store your customized settings for future use. through the Optimize Panel menu

in the upper-right corner of the Optimize section of the Save for Web & Devices window.

Follow these steps to store your settings:

1 With the Save for Web & Devices window still open, click the Optimize Panel menu

in the upper-right corner of the Optimize section,

and select Save Settings. The Save

Optimization Settings dialog box appears.

Saving your custom settings.

You are automatically directed to the Optimized Settings folder for your application.

Toshare this setting, browse to a location on a server or removable device.

2 In the Save As text box, type JPEG_  cc, and then click Sav

e. You now can select these

settings from the Preset drop-down menu at the top of the Optimize window.

Now that you have saved your settings, you will save your optimized image  le.

3 In the Save for Web & Devices window, click Save. In the dialog box that appears, navigate

to the web05lessons folder and in the File Name text box,

type web0503_optimized.

Ensure that the Format menu is set to Images Only and that the Settings menu is set to

Default Settings.

To test a  le, click Done instead of Save. This keeps your settings and does not save the  le.

webdesign.indb 92webdesign.indb 92 3/17/11 1:50 PM3/17/11 1:50 PM

Saving images as GIFs

93Lesson 5, Graphics, Color, and Transparency

Saving images as GIFs

GIF is a popular web format that has some limitations in terms of color and appearance. This

 le format is lossless, so the clarity of the image is not compromised by GIF compression.

You can compress the  le size of a GIF by reducing the image’s pixel dimensions and the

number of indexed colors that it uses, which makes GIF the best format for images with a

lot of solid colors, such as logos and illustrations. The compression algorithms for GIF  les

work best on large spans of color, thereby reducing the  le size when optimized. However,

a photographic image or an illustration with a lot of tonal values will result in a much larger

 le size than a same-sized image with solid colors.

The GIF format works best with images that have large spans of solid colors. In this example, an image with a lot of tonal

values are saved as a GIF with 32 colors.

When saving as a GIF, your image  le can contain up to 256 indexed colors, but you should

reduce the number of colors to the minimum. You can reduce an image to four colors, but it

requires testing to  nd the best-looking  le with the smallest  le size.

You can animate GIF  les and include transparent pixels to blend the image with di erent-

colored backgrounds. The pixels in a GIF image must be fully transparent or fully opaque, so

you cannot fade the transparency as with a PNG image, which is discussed later in this lesson.

In the following steps, you will open an image that contains multiple shades of solid color,

and you will save it with a transparent background. You will then animate the image.

You should use animations conservatively because many viewers do not like the distraction.

webdesign.indb 93webdesign.indb 93 3/17/11 1:50 PM3/17/11 1:50 PM

Saving images as GIFs

Web Design with HTML and CSS Digital Classroom

1 Choose File > Open. In the dialog box that appears, browse to the web05lessons folder

and open the  le named web0504.psd. A colorful logo appears.

The logo you will optimize.

This logo contains a lot of solid color, and has an image behind it. In such situations you

must determine the part of the image on which you want to focus; in this case, you will

focus on the logo type, not the image behind it.

You will now remove the background. When you have a solid background, you can

remov

e it using the Magic Eraser tool, which has a tolerance option to control the pixels

to delete to transparency.

2 Select the Magic Eraser tool (

), which is hidden under the Eraser tool ( ) in the

Tools panel.

3 In the Options bar at the top of the window, con rm that the number 32 is in the

olerance text box. Also, make sure that the Contiguous option is checked.

Tolerance determines how much of a selected pixel color is deleted when you use the

Magic Eraser tool: the higher the value, the more shades of that color are deleted. The

lower the value, the fewer shades of that color is deleted. Selecting the Contiguous

option ensures that only touching pixels are deleted to transparency.

Click the Contiguous button to select only pixels that are connected to each other.

webdesign.indb 94webdesign.indb 94 3/17/11 1:50 PM3/17/11 1:50 PM

Saving images as GIFs

95Lesson 5, Graphics, Color, and Transparency

4 Click the White background. The Background layer converts to Layer 0 and the

background becomes transparent.

5 Choose File > Save as, and in the dialog box that appears, navigate to the web05lessons

folder. Name the  le w

eb0504_work, and keep it in the Photoshop .psd format. Click

Save. Keep the  le open for the next part of this lesson.

Optimizing the GIF image

In the following steps, you will determine the best settings for optimizing your GIF image.

You will use a color table to a ect the appearance of the  nal optimized image.

1 With the web0504_work image still open, choose Image > Image Size. In the Image

Size dialog box,

change the Width to 200 pixels and click OK.

2 Your image might appear smaller on the screen than it actually is. Double-click the

Zoom tool (

) to view your image at 100 percent.

3 Choose File > Save for Web & Devices. The Save for Web & Devices window appears.

4 Choose GIF 64 No Dither from the Preset drop-down menu, and check the Transparency

check box. Notice in the GIF pr

eview that the image size is now about 10K.

Select a GIF preset.

webdesign.indb 95webdesign.indb 95 3/17/11 1:50 PM3/17/11 1:50 PM

Saving images as GIFs

Web Design with HTML and CSS Digital Classroom

Understanding Dithering

Dithering is the attempt to approximate a color from a mixture of other colors when the

required color is not available. Dithering produces a pattern or grainy appearance in images, and

should only be used to help de ne tonal values.

Original image (left), and with dithering applied (right).

5 Keep this window open for the next part of this lesson.

webdesign.indb 96webdesign.indb 96 3/17/11 1:50 PM3/17/11 1:50 PM

Using the color table

97Lesson 5, Graphics, Color, and Transparency

Using the color table

By selecting GIF 64 No Dither, you have indicated that you want to use 64 colors in your

optimized image. Note that the color table in the optimization section displays a table of

these indexed colors.

Use the color table to keep the most important

colors in your image.

You can delete, change, or lock the colors in this table to preserve the look of your image.

In this section, you will learn to lock critical colors to make sure important colors are not

deleted when you reduce the number of colors in the table.

1 With the image still open in the Save for Web & Devices window, select the Eyedropper

tool (

)and click the orange color surrounding the text in the optimized GIF preview

of the image. The Eyedropper samples the color and selects that color in the color table

to the right. This tool is useful when you need to ensure that a speci c color appears as

close as possible to the print color. For example, the logo for this exercise might be for

a company where the branding department wants to ensure the speci c orange used

appears as close as possible to the print color (PMS 173 for this example).

Using the Eyedropper tool to select a color from the optimized image.

The Pantone Color Matching System (PMS) is a standardized color reproduction system used

mostly in print, but whose colors can also be used online. By standardizing colors, corporations can

ensure their colors stay as consistent as possible regardless of where the colors are reproduced.

webdesign.indb 97webdesign.indb 97 3/17/11 1:50 PM3/17/11 1:50 PM

Using the color table

Web Design with HTML and CSS Digital Classroom

2 Locate the selected color in the color table and double-click it to open the Color Picker.

You can use the Color Picker to enter a new value for the selected color.

Double-click on the color to open the Color Picker.

In the Color Picker window, you can specify colors in any color space; for example, you

could choose an RGB or Hexadecimal value. For this lesson, you will closely match a

Pantone color a client has provided to you.

Type Hexadecimal values in the text box to the right of the # sign.

3 Click the Color Libraries button to open the Color Libraries window. The Pantone

solid coated library is selected by def

ault. Each color in this library represents a speci c

Pantone color on coated paper. The color is automatically matched with the most similar

Pantone color.

Opening the Color Libraries section of the Color Picker.

Return to the standard Color Picker by clicking the Picker button.

webdesign.indb 98webdesign.indb 98 3/17/11 1:50 PM3/17/11 1:50 PM

Using the color table

99Lesson 5, Graphics, Color, and Transparency

4 In this example, the client has speci ed that the orange should match PMS 173. Click

the color value Pantone 173 C, and then click OK. The color changes to match the value

of PMS 173 and has a white square icon in the lower-right corner with a diagonal line

through it. This indicates that the color is locked and has been mapped to a color other

than the original. You will now lock additional colors.

This color has been locked

and mapped to a speci c value.

5 Click any color in the color table, and then click the padlock icon ( ) at the bottom of

the color table. For this part of the exercise, select four additional colors you would like

to retain in this image, and lock them as instructed in the previous steps.

You will now reduce the number of color values in the optimized image even further.

6 From the Colors drop-down menu, choose 8. This is a signi cant reduction in the

number of color

s, and although your important colors are locked and the  le size has

been reduced, the image quality is poor. So you will need to increase the number of

colors used to improve the quality.

Reducing the color values in the color table.

7 Using the Colors drop-down menu, increase the number to 32. Keep this window open

for the next part of the lesson.

webdesign.indb 99webdesign.indb 99 3/17/11 1:50 PM3/17/11 1:50 PM

100

Using the color table

Web Design with HTML and CSS Digital Classroom

Adding a matte to a GIF

When placing images over a colored background, you might see a pixelated edge. You can

avoid this edge by applying matting to the image in the optimization stage. Matting lets you

to  nd pixels that are almost transparent. However, unlike pixels in PNG images, pixels in a

GIF image are either transparent or not. In the following steps, you will apply matting that

matches the background color of the web page where the image will be placed.

1 With the Save for Web & Devices window still open, click the white section in the

Matte drop-down men

u. The Color Picker appears.

Select a custom matting color.

2 In the Color Picker window, type 3366CC into the Hexadecimal text box (located to

the right of the # sign). Click OK. Notice that the graphic now has a thin, dark-blue

border around the edge. If you choose to use this image on a page with a di erent

background, remember to change the matting color to match the new background.

Matting applied to the GIF image.

webdesign.indb 100webdesign.indb 100 3/17/11 1:50 PM3/17/11 1:50 PM

Using the color table

101Lesson 5, Graphics, Color, and Transparency

3 Test your image by clicking the Preview button at the bottom of the Save for Web &

Devices window. The preview window matches the matting color you selected so you

can see the image in the same background color in the browser.

4 Once you are done previewing your  le, close the br

owser, return to the Save for Web

& Devices window, and click Save. In the Save As dialog box, browse to locate the

web05lessons folder. Name the  le web0504_optimized.gif, and then click Save.

5 Choose File > Close to close the web0504_work  le.

Animating a GIF

Where appropriate, animated GIFs add interest to a web page. In the following steps, you will

create an animated GIF.

1 In Adobe Photoshop, choose File > Open. In the Open dialog box, locate the image

named web0505.psd in the web05lessons folder

. The original image  le for the last image

you worked on is now open.

2 Choose Window > Animation to open the Animation window. If you are using

Photoshop Extended, the Animation (Timeline) panel appear

s. Click the convert to

frame icon in the lower-right corner. The Animation panel changes to Frames mode.

The Animation panel in the Timeline mode.

The Animation panel in the Frames mode.

In Photoshop, frames are like a  ip book. Each frame appears for the amount of time you

specify, creating a simple animation.

webdesign.indb 101webdesign.indb 101 3/17/11 1:50 PM3/17/11 1:50 PM

102

Using the color table

Web Design with HTML and CSS Digital Classroom

3 In the Animation panel, select the duplicates selected frames icon ( ) to duplicate your frame.

4 Select the Move tool, and then select the Pick-A-Flavor layer. Click and drag the

Pick-A-Flavor lo

go to the bottom of the image area.

Click and drag the Pick-a-Flavor layer to reposition it in the second frame.

Click the  rst frame in the Animation panel; the original position is intact in this frame.

Click the second frame; the logo appears repositioned to the bottom of the image area.

Changing the timing of an animation

The timing of the animation is important. In the following steps, you will change the speed at

which the frames are viewed, and also change the number of times they rotate through the  ip.

1 Select both frames by clicking the  rst frame and Shift + clicking the second frame in

the Animation panel.

2 Click the ar

row in the lower-right corner of either frame to open the frame delay time.

Choose 0.1 second. Y

ou will now change the number of times your animation will play.

Change the timing of the animation frames.

3 Click the Selects Looping Options button in the lower-left corner of the Animation panel

and change the value to 3 times. The animation will now play three times and then stop.

webdesign.indb 102webdesign.indb 102 3/17/11 1:50 PM3/17/11 1:50 PM

Using the color table

103Lesson 5, Graphics, Color, and Transparency

Changing additional properties in an animation

You will now change the opacity value of the Pick-A-Flavor layer. A layer which has a

value of 100% opacity is completely visible. A layer which has a value of 0% opacity is not

visible. You will now set di erent opacity values for the  rst two frames in order to create an

“o /on” visual e ect.

1 Select the  rst frame in the Animation panel,

and then select the Pick-A-Flavor layer in

the Layers panel. Click and drag the Opacity slider from 100 percent to 0 percent.

Change the opacity of the frames.

2 Click the second frame, and with the same Pick-A-Flavor layer selected, drag the

Opacity slider to the right until it reaches 100 percent.

3 Test the animation by clicking the Play button (

) at the bottom of the Animation

panel. A  ashy animation plays three times. In the following steps, you will use the Tween

feature to create a better transition between the frames.

Tweening

In the following steps, you will build a better transition between the frames. Tweening

automatically creates new frames between two existing frames. The process saves you the

time and the e ort from having to make each frame manually.

1 Select any frame, and then click the tweens animation frames icon (

) at the bottom of

the Animation panel. The Tween window appears.

2 In the Tween window, type 3 into the Frames to add text box. Lea

ve the others settings

as they are, and click OK. Three frames are added in between the existing frames.

Create a smooth transition by using the

Tween feature.

webdesign.indb 103webdesign.indb 103 3/17/11 1:50 PM3/17/11 1:50 PM

104

Saving as a PNG

Web Design with HTML and CSS Digital Classroom

3 Click the plays animation icon ( ) to test your animation.

4 Choose File > Save for Web & Devices and make sure the setting for Preset is

GIF 64No Dither.

Then press Save.

5 Choose File > Save to save this  le and then choose File > Close.

Saving as a PNG

Some characteristics, such as the ability to display variable levels of transparency, are

uniquely supported by the PNG format, but you cannot reduce the  le size such as you

can with JPEG and GIF formats. You can use the PNG format to bene t from its unique

characteristics more than for a need to reduce  le size.

In the following steps, you will create a navigation bar.

1 Choose File > Open, and in the Open dialog box, select the  le named web0506.psd.

ou will use this image at the top of a web page.

The initial artwork.

2 Choose Window > Layers. The Layers panel appears with three layers already created.

You will  rst group these layers, and then apply a mask to all three layers to allow the

image to fade from 100-percent to 0-percent opacity.

Three layers exist in the Layers panel.

3 Select the bottom layer (baseimage) and Shift + click the top layer (Get Healthy). All

three layers are now selected.

webdesign.indb 104webdesign.indb 104 3/17/11 1:50 PM3/17/11 1:50 PM

Saving as a PNG

105Lesson 5, Graphics, Color, and Transparency

4 From the Layers panel menu, choose New Group from Layers. The New Group from

Layers dialog box appears. Type banner in the Name text box, and then click OK.

Choose to group the layers.

5 Click the Add Layer Mask button at the bottom of the Layers panel. A mask is added to

the entire group of layers you created.

Add a mask to the banner group.

6 Select the Gradient tool ( ) from the Tools panel and press D. This restores the

foreground and background colors to their defaults (black and white).

7 Click the Gradient Picker in the Options bar and make sure you have the Foreground to

Background g

radient selected.

Makes sure that the Foreground to

Background gradient is selected.

webdesign.indb 105webdesign.indb 105 3/17/11 1:50 PM3/17/11 1:50 PM

106

Saving as a PNG

Web Design with HTML and CSS Digital Classroom

8 Using the Gradient tool, click and drag from the right side of the image to the left, and

release the mouse when you reach the y in the word Healthy.

Click and drag with the Gradient tool across the image area.

By creating a mask for the group and applying a gradient to it, you have created a gradient

mask that fades the banner layers to 0-percent opacity.

9 Choose File > Save for Web & Devices. When the Save for Web & Devices window

appears, choose PNG-24 fr

om the Preset drop-down menu. PNG-24 supports varying

levels of transparency in the image.

Select PNG-24 to use the fade to transparency feature.

10 Click the Preview button at the bottom of the Save for Web & Devices window to see a

preview of your PNG  le in a browser.

11 Once you have previewed your image, close the browser window and return to the Save

for Web & De

vices window.

12 Click Save. In the dialog box that appears, browse to the web05lessons folder, name the

 le web0506_banner

.png, and click Save. Choose File > Close to close the  le.

webdesign.indb 106webdesign.indb 106 3/17/11 1:50 PM3/17/11 1:50 PM

Slicing an image

107Lesson 5, Graphics, Color, and Transparency

PNG-8 versus PNG-24

Many software packages allow you to save an image in PNG-8 or PNG-24 format. The 8 and

24 represent the number of bits each  le format contains. The one you choose depends on the

type of image and how you want it to appear. The PNG-8 format uses an indexed color palette

similar to GIFs, which makes this format ideal for images with areas of solid, even colors. Use

the PNG-24 format when you want variable transparency or many gradients in your image.

Slicing an image

In this section, you will learn to slice an image in Adobe Photoshop. A slice is a part of an

image, cut from a larger image. These pieces are held together by an HTML table or Cascading

Style Sheets (CSS). In this example, you will use CSS to create the  nal navigation bar.

An example of a sliced image.

Slices are useful when your web page contains large images, because downloading several

smaller packets of information on the web is faster than downloading one large packet. Slices

are also helpful when you need to save parts of an image in di erent formats. In this exercise,

you will use existing layers to create slices. Note that you can also use guides to determine

where the slicing of your image occurs.

Viewing the completed  le

Before starting this lesson, you’ll use your browser to view the completed image with

navigational links that you will create in this section.

1 Open your web browser.

2 Choose File > Open, or the Open  le command appropriate for y

our speci c browser.

This page is created using CSS; you can export pages built from tables of CSS from the

Photoshop Save for Web & Devices window. Find out more about CSS at w3.org/Style/CSS/.

webdesign.indb 107webdesign.indb 107 3/17/11 1:50 PM3/17/11 1:50 PM

108

Slicing an image

Web Design with HTML and CSS Digital Classroom

3 In the Open dialog box, navigate to the web05lessons folder and open the sitefolder

located inside. Choose to open the index.html  le. An image created to help viewers

navigate a website appears.

The completed navigation bar in a web browser.

4 Click the ABOUT, RECIPES, BOOKS, and STORE text links; these links take you to

generic pages with related titles. As you can see, each slice can have its own independent

attributes, such as  le type and link.

You will create this web page from start to  nish, including adding the links, and expor

the page using CSS.

5 You can keep the  nished web page open in the bro

wser for reference, or choose File >

Close.

6 Return to Photoshop.

Creating slices

You will now use the existing layers in this image to create layer-based slices using Adobe

Photoshop.

You will start by saving a work  le.

1 Choose File > Open and browse to the web05lessons folder. Open the  le named

web0507.psd.

The navigational banner appears.

2 Choose File > Save as. In the dialog box that appears, browse to the web05lessons folder.

In the Name text box, type

web0507_work.psd.

3 Choose Window > Layers to open the Layers panel.

4 Select the Slice Select tool (

), which is hidden under the Crop tool.

5 Select the About Shape layer, hold down the Shift key, and click the Store Shape layer. All

four shape layer

s are now selected.

6 Choose Layer > New Layer Based Slices. The shape layers are now de ned as slices.

7 Choose File > Save; keep this  le open for the next section.

webdesign.indb 108webdesign.indb 108 3/17/11 1:50 PM3/17/11 1:50 PM

Slicing an image

109Lesson 5, Graphics, Color, and Transparency

Changing the attributes of the slices

In the following steps, you will change the individual slice attributes to add alternative text

and individual hyperlinks.

1 Using the Slice Select tool, which is hidden under the Slice tool, make sure no slices are

active b

y clicking between any two slices.

You cannot have any slices selected before

changing individual attributes of the slices.

2 Using the Slice Select tool ( ), select the About Slice, and then click the Set Options for

the Current Slice button (

), which is located in the upper-right corner of the Options

bar.The Slice Options window appears.

3 In the Name text box, type about.

4 In the URL text bo

x, type about.html.

To create a link to an existing page, you would

type the URL address here. To allow the user to navigate to an external link, you would

enter a full address. For this exercise, you are linking to a local page located inside the

same folder where you will be saving this sliced image.

5 In the Alt Tag text box, type About. The text in the

Alt Tag text box is visible to users

when they place their mouse cursor over the link, or choose to not have the graphics

on the web page visible. An accurate Alt tag also gives search engines more information

about your web page. Click OK.

Changing the  rst slice’s options.

6 With the Slice Select tool, click the Recipes slice, and then click the Set Options for the

Current Slice button (

webdesign.indb 109webdesign.indb 109 3/17/11 1:50 PM3/17/11 1:50 PM

110

Slicing an image

Web Design with HTML and CSS Digital Classroom

7 Type recipes into the Name text box, recipes.html into the URL text box, and

Recipes into the Alt Tag text box. Click OK.

8 Continue this process by double-clicking the third slice, Books. (Double-clicking a slice

is another way to open the Slice Options dialo

g box.) In the Slice Options dialog box,

type books in the name text box, books.html in the URL text box, and Books in the

Alt Tag text box; then click OK.

9 Repeat this process for the Store slice, typing store in the Name text bo

x, store.html in

the URL text box, and Store in the Alt Tag text box; then click OK.

10 Choose File > Save to save this  le. K

eep it open for the next part of this lesson.

You are now ready to optimize these images and create your HTML page.

Saving slices out of Photoshop

In this section, you will learn to optimize your sliced images and save them to an HTML  le

that contains the code needed to create the  nal navigation bar on a web page.

1 With the web0507_work.psd  le still open, choose File > Sav

e for Web & Devices.

2 In the Save for Web & Devices window, choose the Slice Select tool from the toolbar in

the upper-right corner

, and click each slice once. Note that you can choose a di erent

optimization setting for each slice. This is useful for images that have a lot of gradients in

one section and solid colors in another.

3 Click the About slice, and then Shift + click the Recipes, Books, and Store slices. All the

slices are now selected.

4 Choose PNG-8 fr

om the Optimized File Format drop-down menu, since this image

only has a few solid colors.

5 Choose P

erceptual for the Color reduction algorithm, which creates a custom color table

by gi

ving priority to colors for which the human eye has greater sensitivity.

6 Choose No Dither from the Specify the Dithering Algorithm drop-down menu.

Dithering scatters di er

ent colored pixels throughout an image to make it appear as

though there are more colors than there are, this can result in a grainy appearance in

your solid spans of color.

7 Choose 16 from the Colors drop-down menu. The image used for this exercise appears

to have tw

o colors, blue and white, but it has more. Transparency is a color, and the

transition between the white text and the blue background contains many shades of

color. If you reduce the colors too much, you will have a pixelated result.

webdesign.indb 110webdesign.indb 110 3/17/11 1:50 PM3/17/11 1:50 PM

Slicing an image

111Lesson 5, Graphics, Color, and Transparency

8 Select the Transparency check box.

A portion of the Save for Web & Devices

dialog box.

9 Click Save. In the Save Optimized As dialog box, navigate to the web05lessons folder and

double-click to select the site folder located inside.

10 In the File Name text box, type index. This page will be the initial star

t page for the test

website.

11 In the Format drop-down menu, choose HTML and Images, leave the Settings at

Default Settings, and lea

ve Slices set to All.

As a default, Photoshop exports your slice images formatted in an HTML table tag. To export

your slice images in CSS (Cascading Style Sheets) containers, choose Other from the Settings

dialog box, and then click and hold HTML to select the Slices option; you can then select the

Generate CSS radio button.

You can export your code as a table or in CSS.

12 Click Save. Open your browser and choose File > Open and navigate to index.html to

view your menu.

In Internet Explorer, you can display your File menu by pressing F10.

webdesign.indb 111webdesign.indb 111 3/17/11 1:50 PM3/17/11 1:50 PM

112

Self study

Web Design with HTML and CSS Digital Classroom

Self study

1 Now that you have experience resizing and optimizing an image for the web, go through

the steps on your own to optimize the image of the children making smoothies (image

web0508, located in your web05lessons folder). In its  nal form, the image should

maintain as much quality as possible and be 225 pixels wide and 150 pixels high.

Review

Questions

1 Which is the more important factor to pay attention to when resizing a web image: pixel

size or resolution?

2 What is the best format for an

animated graphic that contains many g

radients?

3 What format can you save in that allows you to fade an image and see through to the

objects underneath it on a web page?

Answ

ers

1 Pixel size is more important for web images (resolution is more important for printed

output).

2 The GIF format is currently the onl

y for

mat that supports animation.

3 The PNG-24 format allows you save an image with varying levels of transparency.

webdesign.indb 112webdesign.indb 112 3/17/11 1:50 PM3/17/11 1:50 PM

113Lesson 6, Formatting Text with CSS

What you’ll learn in

this lesson:

• Using the font-family

property

• Setting the size of

yourtext

• Working with the

emmeasurement

• Changing text properties

• Using HTML lists

Formatting Text with CSS

In this lesson, you’ll learn how to control the appearance of text on

your web pages using CSS styling.

Starting up

You will work with several  les from the web06lessons folder in this lesson. Make sure you have

loaded the weblessons folder onto your hard-drive from www.digitalclassroombooks.com/webdesign.

See “Loading lesson  les” in the Starting Up section of this book.

See Lesson 6 in action!

Use the accompanying video to gain a better understanding of how to use some of

the features shown in this lesson. You can  nd the video tutorial for this lesson at

www.digitalclassroombooks.com using the URL provided when you registered your book.

Although this lesson uses the TextWrangler text editor to create the markup, you can use any of

the text editors covered in Lesson 3 and get the same results.

Lesson 6

webdesign.indb 113webdesign.indb 113 3/17/11 1:50 PM3/17/11 1:50 PM

114

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

The importance of typography on the web

Typography is two-dimensional architecture, based on experience and imagination, and

guided by rules and readability. And this is the purpose of typography: The arrangement

of design elements within a given structure should allow the reader to easily focus on the

message, without slowing down the speed of his reading.

—Hermann Zapf

Typography has a starring role in graphic design, including web design. Most user interaction

on the web starts with text. Users spend a great deal of time on the web scanning, navigating,

and reading text. As a result, it is extremely important that the web designer understands how

to control the placement, appearance, and style of text.

For purposes of clarity, it is worth pointing out that the words typeface and font are mistakenly

used interchangeably. A typeface is a more abstract term for the character design of an

alphabet; it is a term that preceded the invention of computers and digital typesetting. An

example of a common typeface is Helvetica, which also includes di erent styles including

Bold, Condensed, and Light, among others. A font is the digital system  le that resides on a

computer and is used in print design to set text. In web design, web browsers use a font to

display text on the screen (as well as when printing).

The challenges of fonts on the web

When designing for the web, you can format text in a way that is similar to desktop

publishing and word processing applications, but there are important di erences to keep in

mind. When you specify that a speci c font be used, that font needs to be installed on the

user’s computer when the web page is rendered on the viewer’s computer or device. If the

user does not have this font, the browser replaces it with another font.

Because you don’t know what fonts are installed on viewers’ computers, and because the

web browser of a viewer might substitute fonts, your design intentions for text might not

be faithfully reproduced. One option is to use fonts that you are sure will be found on most

computers. Unfortunately, only a handful of fonts can reliably be found on virtually all

computers around the world.

webdesign.indb 114webdesign.indb 114 3/17/11 1:50 PM3/17/11 1:50 PM

The importance of typography on the web

115Lesson 6, Formatting Text with CSS

Web-safe fonts

Following is a list of the most reliable fonts for web use:

• Arial

• Verdana

• Georgia

• Times New Roman

• Courier

• Trebuchet

• Lucida

• Tahoma

• Impact

The list is small because it takes into account both Mac and Windows platforms and assumes

that there may still be older computer systems that are active and accessing the web. These

older systems had a more limited font selection than today’s systems, and so a designer needs to

consider this when choosing fonts.

The above list is also limited for stylistic reasons. Both Courier and Impact, for example, are

used infrequently because although they are widely available, their distinctive styles limit their

everyday use.

One of the solutions to the lack of fonts on the web is to use a font stack. In CSS, a font stack

is a list of multiple fonts that the web browser uses in an attempt to display text onscreen.

The following CSS code shows an example of a font stack:

font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;

In this example, the browser  rst looks for the Helvetica Neue font on the user’s system.

Notice the quotation marks in this example. In most cases when specifying a font, quotation

marks are unnecessary, but in some cases, the quotation marks are needed to help the user’s

computer choose the right version of the font. If the user doesn’t have Helvetica Neue,

then the browser looks for the more generic version of Helvetica. If Helvetica is absent, the

browser uses Arial, which is a font that is extremely similar to Helvetica. If for some reason

Arial is not on the system, the last choice is sans-serif, which allows the system to use any

sans-serif font it can  nd on the system. Sans-serif is the generic de nition for all fonts that

do not have small strokes (called serifs) at the end of each character. Examples of serif fonts

are Times New Roman and Georgia.

webdesign.indb 115webdesign.indb 115 3/17/11 1:50 PM3/17/11 1:50 PM

116

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

Setting a font-family

In this exercise you will set your font-family for an entire page and then set the font-

family

for your headings.

1 In your text editor, choose File > Open and navigate to the web06lessons folder. Locate

the 06_fonts.html  le and click OK. This  le has four blocks of text: a heading 1

<h1>,

a heading 2

<h2>, and two paragraphs <p>. Additionally, in the <style> section, empty

style rules are added to save you time. In this exercise, you will add the CSS properties.

You will start by adding the

font-family property for the body element.

2 In the style rule for the body, type the following line (highlighted in red):

body {

font-family:“Trebuchet MS”, Tahoma, Arial, sans-serif;

}

3 Choose File > Save and then preview your page in the browser. As noted above, your

web browser renders Trebuchet if you have it on your system; if you do not, it displays

Tahoma; and if you don’t have Tahoma, you still see a sans-serif font.

When you de ne the font family Trebuchet for the body rule, all your text is set in this font.

All of the text on your page is rendered in Trebuchet because the only style set is for the

body. Remember that the HTML body tag de nes all of the elements on the page. Now

you will set a speci c font family for the paragraph element.

4 In the style rule for the paragraph (

p ), type the following line (highlighted in red):

p {

font-family:Georgia, “Times New Roman”, Times, serif;

}

5 Save your document and preview it in your browser. Now that there is a speci c rule for

paragraphs, they are styled as Georgia. The two headings are still using Trebuchet, which

you de ned in the body style.

webdesign.indb 116webdesign.indb 116 3/17/11 1:50 PM3/17/11 1:50 PM

The importance of typography on the web

117Lesson 6, Formatting Text with CSS

6 In the style rule for heading 2 (h2), type the following line (highlighted in red):

h2 {

font-family:Zapﬁ no;

}

7 Save your document and preview it in your browser.

Styling the heading 2 as Zap no will only show up if that font is on a user’s system.

If you have the Zap no font on your system, you see a calligraphic script for your heading.

The Zap no font is installed with Adobe applications such as Photoshop, so it is very

likely that designers will have this font on their system. However as noted earlier, many

users on the web do not have this font on their system and so setting it is not a good idea.

8 Select the entire

font-family line in your h2 rule and delete it.

The promising future of web fonts

The lack of choices for using fonts on the web has been a source of frustration for web designers

for many years. The situation is improving as several companies have created solutions to enable

your pages to display on a browser with the fonts you’ve speci ed as a designer.

Some of the methods use paid services, but free options are also available. Here are some

resources to get you started:

• http://code.google.com/webfonts

• http://typekit.com/

• http://fontdeck.com/

• www.fontsquirrel.com/fontface

webdesign.indb 117webdesign.indb 117 3/17/11 1:50 PM3/17/11 1:50 PM

118

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

Sizing text with CSS

When using CSS to style text for the web, you have a few options for the unit of

measurement. The CSS property that controls the size of your text is named

font-size.

You can control the

font-size property in a few di erent ways:

• Absolute-size: A set of keywords that indicate prede ned font sizes. Named font

sizes scale according to the user’s font setting preferences. Possible values include

xx-small, x-small, small, medium, large, x-large, and xx-large.

• Length: A number, followed by an absolute units designator (

cm, mm, in, pt, or pc) or

a relative units designator (

em, ex, or px).

• Percentage: An integer, followed by a percent sign (

%). The value is a percentage of

the font size of the parent object.

• Relative-size: A set of keywords that are interpreted as relative to the font size of the

parent object. Possible values include

larger and smaller.

Choosing the unit of measurement for the font-size in a web page is an important

decision and not as easy as it is in print design. The main di culty in selecting a size has

to do with monitor resolution. Text on smaller monitors looks di erent than text on

larger monitors; however, with a bit of forethought you can correct for this. In addition to

the monitor resolution issue, you must also consider the way that di erent web browsers

interpret how text is rendered. For example, unlike print, the web allows users to resize their

text manually. Furthermore, there is a growing audience that browses the web with mobile

devices, which makes sizing your text even more important.

Pixels and points are not the best choices

Setting font size in points might come naturally to you if you have worked in print design

or if you have created web graphics you might be comfortable measuring using pixels. The

font-size property in CSS allows you use both forms of measurement. In the following

example, the  rst CSS selector shows you a paragraph rule for points, while the second one

shows you a paragraph rule for pixels:

p {

font-size:12pt;

}

Points

p {

font-size:12px;

}

Pixels

webdesign.indb 118webdesign.indb 118 3/17/11 1:50 PM3/17/11 1:50 PM

The importance of typography on the web

119Lesson 6, Formatting Text with CSS

Even though points are supported, it is bad practice to use them and not advised for web

design. Points are a system of measurement designed for print, and although available for use,

they indicate an absolute unit of measurement and they don’t translate well to the screen.

Pixels, on the other hand, are the unit of measurement often used for screen-based graphics.

Monitor resolution sizes are measured in pixel units. In an ideal world, designers could

reliably use pixel sizes for their fonts because they are relative units and are designed to scale

natively. Unfortunately web browsers such as Internet Explorer 6 and 7 do not resize pixel-

based text if the user chooses to override the default settings.

Web browsers include a text resize option. This option is often found in the View menu. In some

modern browsers, the text-resize option is located in a submenu called Zoom. Many browsers also

use the keyboard shortcut Ctrl + + (plus) and Ctrl + – (minus) to increase and decrease the text

size, respectively. On the Mac OS, these shortcuts are Command+ + [plus] (and Command+

– [minus].)

Using a combination of percent and the em measurement

Here you will create reliable font sizing using a combination of percent and ems. To get

a sense of how these work, you will apply some CSS styling to a page of text for the

SmoothieWorld site.

1 In your text editor, choose File > Open and navigate to the web06lessons folder. Locate

the 06_sizing.html  le and click OK. This  le has four b

locks of text: a heading 1

<h1>, a

heading 2

<h2>, and two paragraphs <p>. The font-family styles are included from the last

exercise as well. You will start by setting di erent properties for the body to see their e ect.

2 Before making any changes, you should know what the page looks like in its default

state. Pr

eview the page in your default browser. Browsers need to set some default size

for the text if there is no rule de ned; in most cases 16 pixels is the value used for the

body (in this case, the paragraphs are inheriting the body’s value). Close your browser

and return to your text editor.

Some browsers allow you to view the default font and font size and even to change it.

InFirefox3 and later, for example, this setting is found in the Content section of the preferences.

3 In the style rule for the body, type the following line (highlighted in red):

body {

font-family:"Trebuchet MS", Tahoma, Arial, sans-serif;

font-size:10px;

}

webdesign.indb 119webdesign.indb 119 3/17/11 1:50 PM3/17/11 1:50 PM

120

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

4 Save your  le and then preview your page in the browser. Note that all your text is

smaller. This is because the body style de nes the baseline size for text on your page.

Remember that the HTML body tag contains all the rendered content on the page, so this style is

simply targeting your entire page.

5 Return to your text editor and change the following value (highlighted in red) in your

font-size property:

font-size:small;

6 Again, save your  le and preview the page in your browser. All your text is slightly larger

than the 10-pixel value you set in step 3. As noted above, the value

small is an absolute-

size unit of measurement called a keyword. Web browsers have pre-de ned sizes assigned

to keywords, and though keywords can be useful because they avoid the whole issue of

using units, they often don’t o er the level of control that designers prefer.

7 Return to the text editor and change the following value (highlighted in red) in your

font-size property:

font-size:100%;

8 Save your  le and preview the page in your browser. You might notice that there is no

di erence between this size and the size of the text at the beginning of the exercise

(when no

font-size was de ned). This step explicitly de nes the font-size for the

body to be the same size as the browser-de ned

font-size.

You will have to take a small leap of faith here and realize that the technique you are

learning addresses some par

ticular resizing problems in two popular web browsers (IE6

and IE7). Taking care of these problems now will mean fewer problems in the future.

9 In the style rule for the paragraph, type the following line (highlighted in red):

p {

font-size:1em;

}

The unit of measurement called an em is very similar to pixels in that it is designed to

scale; the main di erence is that ems are not tied to the monitor resolution while pixels

are related to the monitor resolution. Ems may not be intuitive at  rst, but understanding

how to use them will pay o in the future.

10 Save your  le and then previe

w the  le in your browser. Depending on which browser

you are using, you will probably not see any changes in your page. This is because an em

value of 1 is tied to the

font-size of 100% that you de ned in the body.

It may help to understand this relationship in an equation form: 1 em = 100% = 16 pix

els.

Here, the paragraph size is the

1em value, the font-size for the body is 100%, and the default

font-size for the web browser is 16 pixels. Once you understand this relationship, you can

begin to change the value of the em in order to enlarge or reduce the size of your text.

webdesign.indb 120webdesign.indb 120 3/17/11 1:50 PM3/17/11 1:50 PM

The importance of typography on the web

121Lesson 6, Formatting Text with CSS

11 Close your browser and return to the text editor. In the rule for the paragraph, change

the following value (highlighted in red):

font-size:0.875em;

12 Save your  le and preview the page in your browser. Your paragraph text is now smaller.

The reason for using the precise 0.875 value is because it is the font-size equivalent to

14pixels.

If you’re starting to think that web design is all about math, don’t worry too much. It all gets easier

from here. However, if you are interested in understanding the math more deeply, you multiply the

em value (0.875) by the browser’s default pixel value (16) to arrive at the 14-pixel number.

13 You will now size your headings using ems as well. For the

h1 property, add the

following line (highlighted in red):

h1 {

font-size:1.5em;

}

This scales the top heading to 1.5 times the size of your body text; in this case, it is the

equivalent of 24 pixels. Save your  le and preview the page in your browser to see the e ect.

Your heading 1 element is set to 1.5em, the equivalent of 24 pixels.

Now the h1 is approximately the same size as the h2, which isn’t particularly logical, so

you will reduce the size of the

h2 heading as well.

14 For the

h2 property, add the following line (highlighted in red):

h2 {

font-size:1.25em;

}

This scales the top heading to 1.25 times the size of your body text, which is the

equivalent of 20 pixels.

webdesign.indb 121webdesign.indb 121 3/17/11 1:50 PM3/17/11 1:50 PM

122

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

15 Save your  le and preview it in the browser. You now have text proportioned as needed.

Remember that one of the main reasons why ems are used is to adjust for users who resize

the text in their browser. You can simulate this by going into your browser and enlarging the

text size. You can see that the text responds well to this enlarging and reducing. When you are

 nished, be sure to return the text size to the default setting. Most browsers have a command

to allow you to do this.

The issue of browsers resizing text is a bit more complicated because some browsers use a zoom

feature that increases or decreases magni cation of the entire page. Zoom-enabled browsers may

also have a text-only resize option.

There is another bene t of using ems, and this has to do with the scaling relationship

between all elements that use ems.

16 In your body property, modify the following value (highlighted in red):

font-size:85%;

17 Save your  le and preview your page. All your text is now smaller, even though you just

changed one value! This is because of the linked relationship the em has to the body

element. Some designers adjust this base size if, for example, a client wants larger or

smaller text across the entire site. Rather than modifying all the individual properties,

having one rule control multiple font-sizes makes it easy to do.

18 Return the

font-size value to the original 100% value (highlighted in red):

font-size:100%;

Save your document.

webdesign.indb 122webdesign.indb 122 3/17/11 1:50 PM3/17/11 1:50 PM

The importance of typography on the web

123Lesson 6, Formatting Text with CSS

Pixels-to-em conversion table

The following chart can help you make easy conversions from pixels to ems. Keep in mind that

this chart is based on two constants: that your default browser text size is 16 pixels and that your

body

font-size is set to 100%.

Pixel font-size Em equivalent

11 0.689

12 0.750

13 0.814

14 0.875

15 0.938

16 1.000

17 1.064

18 1.125

19 1.188

20 1.250

21 1.313

22 1.375

23 1.438

24 1.500

25 1.563

26 1.625

27 1.688

28 1.750

There are also free em-to-pixel calculators to help you with on-the- y conversions:

• http://pxtoem.com/

• http://jameswhittaker.com/projects/apps/em-calculator-air-application/

webdesign.indb 123webdesign.indb 123 3/17/11 1:50 PM3/17/11 1:50 PM

124

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

Using margins to modify the space between your text

In this exercise, you will work with the CSS margin property in order to change the amount

of space between your various text elements. Understanding how the

margin property

works and how to control it is key to understanding CSS, and in fact is the  rst step toward

CSS layout. In order to better understand all the e ects of using margins for text, you will

 rst add the

margin property to your body style.

1 In the body style, add the following line (highlighted in red):

body {

font-family:"Trebuchet MS", Tahoma, Arial, sans-serif;

font-size:100%;

margin:0 20%;

}

This margin property sets the margins of the page in shortcut form. The 0 value is for

the top and bottom margins. The 20% value is for the left and right margins.

2 Save your page and preview it in your browser. You can see that your text is centered in

your bro

wser window. Change the width of your browser window and you see the text

re ow.

The result of changing the left and right margins of the body to 20%.

Return to your text editor.

You will now work further with margins in order to begin controlling the space between

your elements. First, you will add temporary borders to your text elements in order to better

understand how margins work.

3 In the style for your paragraph element, add the following line (highlighted in red):

p {

font-family:Georgia, "Times New Roman", Times, serif;

font-size:0.875em;

border:thin red solid;

}

webdesign.indb 124webdesign.indb 124 3/17/11 1:50 PM3/17/11 1:50 PM

The importance of typography on the web

125Lesson 6, Formatting Text with CSS

This is the CSS border property, which allows you to add borders around your elements.

You will eventually use borders as decoration in your layout, but here they are being used to

help you understand how elements such as headings and paragraphs interact with each other.

You will now add this same code to your

h1 and h2 elements.

4 Select the border:thin red solid; code from your paragraph rule and press Ctrl + C

(PC) or Command+ C (Mac) to copy the code.

5 Click inside the

h1 style and press Ctrl + V (PC) or Command+ V (Mac) to paste the

code. Repeat this step for the

h2 style.

6 Save your  le and previe

w it in your browser. With the red borders applied, you can now

see the space between the elements more clearly.

Applying borders to your elements helps you see the default margins more clearly.

This space between your paragraphs and headings is a result of the default margins as de ned

by your web browser. You have learned about browser defaults before in the

font-size

exercise, and this is very similar. HTML elements have default styles associated with them

that include properties such pixel size, margins, bold styling, italic styling, and many others.

You need to set speci c rules to override the default styles for these properties. In this case,

you will adjust the space between the heading 2 and the  rst paragraph.

7 Return to your text editor and add the following line to your

h2 element (highlighted in red):

h2 {

font-size:1.25em;

border:thin red solid;

margin-bottom:0em;

}

The margin-bottom property a ects the margin spacing on the bottom of the h2 element

only. However, this is not enough to a ect the spacing between your heading and the

paragraph. You also need to set the top margin of the paragraph.

webdesign.indb 125webdesign.indb 125 3/17/11 1:50 PM3/17/11 1:50 PM

126

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

8 Add the following code to your p element:

margin-top:0em;

9 Save your  le and preview it in the browser.

With the bottom margin of the heading and the top margin of the paragraph set to 0,

the space between them has collapsed.

You can now see that the space between your heading 2 and the  rst paragraph has collapsed.

To increase space between elements, you can increase margin values. For example, you will

now increase the space between your paragraphs.

10 Add the following code to your paragraph (

p) element:

margin-bottom:1.5em;

Remember that 1 em in this style sheet is equal to 16 pixels, so setting a value of 1.5 ems is the

same as adding 24 pixels.

11 Save your  le and previe

w it in the browser.

You can now see the space between your paragraphs increase. At this point, the borders

around the elements have served their purpose; however, you don’t want to lose them

completely so you will comment them out. Commenting is a process that deactivates a

style without removing the code.

12 Add the following code (highlighted in red) to the

border rule in your paragraph

element:

/*border:thin red solid;*/

The forward slash and the asterisk at the beginning and end of the code will disable

this rule. However, the original code is always available in case you want to enable these

borders again.

webdesign.indb 126webdesign.indb 126 3/17/11 1:50 PM3/17/11 1:50 PM

The importance of typography on the web

127Lesson 6, Formatting Text with CSS

13 Repeat step 12 by adding the commenting code to the two other border properties in

your

h1 and h2 styles.

14 Save your  le and view the page in your br

owser to see your page without any borders.

The  nal result of modifying your margins by deactivating the borders.

Setting paragraph line-height

To improve readability of your text, you can change line-height, which is the amount of

space between lines. In the world of print design this is called leading, but the concept here is

the same: changing the amount of space between sentences can a ect the readability of your

text. A

line-height that is too small results in cramped text, while a line-height that is

too high risks losing the reader’s focus. However, you can’t just set a universal

line-height

value and be done with it;

line-height is connected to a number of factors including the

amount of text and the width of the text block, as well as the color, size, and choice of font.

In this exercise you will set the

line-height of your current paragraphs.

1 Add the following code (highlighted in red) to your p element:

p {

font-family:Georgia, "Times New Roman", Times, serif;

font-size:0.875em;

/*border:thin red solid;*/

margin-top:0em;

margin-bottom:1.5em;

line-height:1.75em;

}

webdesign.indb 127webdesign.indb 127 3/17/11 1:50 PM3/17/11 1:50 PM

128

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

2 Save your  le and preview it in your browser. You now have extra space between the

lines in your paragraph.

Increasing the line-height values will increase the amount of space between paragraph lines.

Line-height works on any multiple-line body of text. For example, if your heading 1

SmoothieCentral is your #1 destination for smoothie recipes is broken over multiple

lines, you can set the

line-height.

3 Add the following code to your h1 element:

line-height:1.5em;

4 Save your  le and preview it in your browser.

Depending on your monitor resolution, you may need to narrow the width of your browser

in order to force the heading to break. The type in the heading is much larger than the

paragraph, so it wouldn’t do as well with the same

line-height value.

You can feel free to override the browser defaults in order to control the look of your page.

Transforming text with CSS

As discussed earlier, the lack of choices when it comes type on the web is a bit constraining;

however, you have other options. There are a number of CSS properties that allow you to

control the appearance of your text in visually interesting ways. In this exercise you will

work with several styling techniques to create unique headings for your page, including

font-weight, text-transform, and letter-spacing.

The  rst setting you will modify is the

font-weight for your main heading in order to

decrease the thickness of the characters.

webdesign.indb 128webdesign.indb 128 3/17/11 1:50 PM3/17/11 1:50 PM

The importance of typography on the web

129Lesson 6, Formatting Text with CSS

1 Add the following code (highlighted in red) to your h1 element:

h1 {

/*border:thin red solid;*/

line-height:1.5em;

font-size:1.5em;

font-weight:normal;

}

2 Save your  le and preview the page in your browser.

By setting the font-weight to normal, you have decreased the thickness of the heading.

The default browser styling for a heading 1 is actually bold, so you are essentially resetting

this bold style to normal. The default browser styling for all headings is bold, and you can see

this by comparing the styles of your heading 1 to your heading 2. The heading 2 has thicker

letterforms and even though it is smaller in size, it appears more dominant on the screen.

There are additional values for the

font-weight property. Here you’ll lighten the value for

the heading 2 and then add a new

text-transform property.

3 Add the following code to your h2 element:

font-weight:lighter;

text-transform:uppercase;

The value lighter for the font-weight reduces the thickness of the letterforms further,

and the value for

text-transform converts your text to uppercase.

4 Save your  le and previe

w the page in your browser.

Your heading is now in uppercase. This is a good example of how CSS controls style.

The HTML code shows that the source text is still lo

wercase; however, the display of the

characters is controlled by the CSS.

5 Return to your text editor and add the following code to the same

h2 style:

letter-spacing:0.2em;

Letter-spacing

controls the amount of space between characters. In print design this

is called kerning and tracking. Save your page and preview the page in your browser. By

increasing letter-spacing, you can add a bit more space around the letters in condensed

headlines. However, you should be careful about adding too much

letter-spacing, as it

can make headlines harder to read.

It is even possible to set negative values for most of these CSS properties (letter-spacing:

–0.4em, for example), although you will not be doing this as often. Experiment with di erent

combinations of fonts and styles, and you might be surprised with what you can come up with.

webdesign.indb 129webdesign.indb 129 3/17/11 1:50 PM3/17/11 1:50 PM

130

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

Often times, experimenting with styles such as text-transform and letter-spacing will

require you to return to your initial

font-size. In your heading 2, for example, using all

capital letters makes the heading look bigger, so you will reduce the size a bit.

6 Modify the

font-size value (highlighted in red) of your h2 style as follows:

font-size:1.125em;

7 Save and close your  le.

Working with HTML lists

Lists are found on many web pages and it is important that you learn how to control

their appearance. Examples of where you might  nd lists include recipes, frequently asked

questions, and navigation menus. In this exercise you will learn the three categories of

lists and how to control their styles. The three categories are unordered lists, ordered lists, and

de nition lists.

Unordered lists are also called bulleted lists because the default style adds a bullet to the left

of each item in the list. Ordered lists are also called numbered lists because the default style

adds a number to the left of each item in the list. De nition lists have two default styles:

abold style for a de nition term and an indented style for the de nition description.

1 In your text editor, choose File > Open and navigate to the web06lessons folder. Locate

the 06lists.html  le and click OK. This  le has the styled text fr

om the previous exercise,

as well as three new paragraphs that you will be converting to lists.

Before starting on the exercise, note a few changes that are made to the new

<h3> style.

In this example, you want all the attributes of the

h2 without having to write them

again, so a comma and the code

h3 are added to the h2 selector. However, because the

h3 element needs to be smaller, a new font-size property of 0.875em is set. To adjust

the

letter-spacing, this property is set to 0.1em. Because these are the only two

properties for

h3, they override the properties for h2.

webdesign.indb 130webdesign.indb 130 3/17/11 1:50 PM3/17/11 1:50 PM

The importance of typography on the web

131Lesson 6, Formatting Text with CSS

2 Preview the page in your browser to see the default paragraph styling. Keep this

formatting in mind as you begin converting the paragraphs to lists. Close your browser

and return to your text editor.

You will convert the last three paragraphs to lists.

3 In the  rst paragraph in the list of ingredients, change the opening <p> and closing </p>

paragraph tags to an opening

<ul> and closing </ul> to change this element to an

unordered list.

You now need to separate the ingredients into list items. The

<ul> tag is rarely used by

itself as the whole purpose of lists is to have separate items.

4 Add an opening

<li> tag at the beginning of the  rst line and a closing </li> tag (both

highlighted in red) at the end:

<ul>

<li>3 cups Honeydew Melon (seeded & chopped) </li>

2 tsp Lime Juice

1 cup Vanilla Yogurt

1 cup Ice Cubes

<em>Optional:</em> 1 tbl Honey or Sugar

</ul>

Preview this page in your browser and note the bullet point on the  rst line. Close your

browser.

webdesign.indb 131webdesign.indb 131 3/17/11 1:50 PM3/17/11 1:50 PM

132

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

5 Repeat step 4, and add the list tags to the next three ingredients. Each list item will have

its own bullet point.

Now you’ll convert the next paragraph, which describes the steps for making the smoothie,

into an ordered list.

6 In the next paragraph, change the opening

<p> and closing </p> paragraph tags to an

opening

<ol> and closing </ol> to change this element to an ordered list. Then, as in

steps 4 and 5, add

<li> tags (highlighted in red) to create three list items:

<ol>

<li>Add honeydew melon cubes to blender; blend until smooth.</li>

<li>Add yogurt, ice and lime juice and blend it again.</li>

<li>Transfer into tall glasses and garnish with melon slice.</li>

</ol>

7 Save your  le and then preview it in the browser. The ordered list now displays numbers

for each list item.

The second paragraph has been converted to an ordered (or numbered) list.

Close the browser and return to your text editor.

One of the advantages of ordered lists is that the numbers are rendered in the browser. This

allows you to add or remove list items in your HTML and not have to worry about keeping

track of the numbers.

8 Add the following line between list items 2 and 3:

<li> Sample your smoothie and add honey or sugar if needed. Blend

again.</li>

Save the  le and preview it in your browser. Note that the steps have automatically been

renumbered. Close your browser and return to your text editor. Now you’ll convert the

last paragraph into a de nition list.

webdesign.indb 132webdesign.indb 132 3/17/11 1:50 PM3/17/11 1:50 PM

The importance of typography on the web

133Lesson 6, Formatting Text with CSS

9 In the last paragraph, change the opening <p> and closing </p> paragraph tags to an

opening

<dl> and closing </dl> to change this element to a de nition list.

De nition lists are used less often than ordered and unordered lists. One way to think of

them is to visualize a listing in a dictionary. A dictionary is just a big list of words; however,

for any given word there may be a number of di erent de nitions. A de nition list has two

types of list items: the de nition term

<dt> and the de nition description <dd>.

10 Add the following code (highlighted in red) to separate this list into terms and

descriptions:

<dl>

<dt>Preparation time</dt>

<dd>10 Minutes</dd>

<dt>Number of servings (12 oz)</dt>

<dt>Calories per serving</dt>

<dd>295 if 1 tbs sugar added</dd>

<dd>315 if 1 tbs honey added</dd>

</dl>

Save the  le and preview it in your browser. The de nition terms act as a type of

a heading with the de nition description indented below. Note that you may have

multiple descriptions, as you can see in the last de nition term for Calories.

Styling HTML lists

You can easily modify the styling for lists with CSS. The indentation and spacing of a list

(as well as the list items) are controlled by margins and padding. There are also a few CSS

properties that are unique to lists; for example, later in this exercise, you will learn how

to customize the bullet appearance in the unordered list. First, however, it’s important to

understand the default styles of both the parent list and the list items. A speci c goal of this

exercise is to make you aware of the di erences between margins and padding; these two

properties are often confused by beginners and your future as a web designer will be much

happier if you avoid this confusion!

One thing you may have noticed is that all your lists are bigger than your paragraphs and

they also have a di erent font family. This is because you have not set any rules for them yet,

so they are inheriting their style from the body. As you go through styling each list, you will

add

font-size and other properties as needed.

webdesign.indb 133webdesign.indb 133 3/17/11 1:50 PM3/17/11 1:50 PM

134

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

1 Type the following code to add a font-size as well as a new background color to the

unordered list style:

ul {

font-size:0.875em;

background-color:#E5DAB3;

}

2 Save the  le and preview it in your browser. You can see that the background color

de nes the area of the unordered list. Although you can use background colors to make

your lists more attractive, here you are using a background color to illustrate how lists

work. Close your browser. You will now style the list items.

Using a background-color helps you see the boundaries of the ul element.

3 Add this code to the empty list item style:

li {

background-color:#AA6C7E;

}

Save the  le and preview it in your browser.

You can see that the background color of the list items overrides the color of the unordered

list, but it’s not a complete overlap; the list item

background-color stops at the bullet

points (and at the numbers in the ordered list). Equally important is the fact that both the

unordered list and the ordered list use

<li> tags so they are all styled equally. If you want to

speci cally change the color of the list items in the unordered list, you must target them with

a more speci c rule.

4 Add this entire section of code to create a speci c rule for list items in an unorder

listonly:

ul li {

background-color:#ABC8A5;

}

This rule is known as a descendant selector because the list item is a descendant of the

unordered list in your HTML. Because this rule is more speci c, the rules of CSS state that it

will override the more general rule for the

<li> element.

webdesign.indb 134webdesign.indb 134 3/17/11 1:50 PM3/17/11 1:50 PM

The importance of typography on the web

135Lesson 6, Formatting Text with CSS

5 Save the  le and preview it in your browser. The background color for the list items in

the unordered list is green because of that

ul li rule, while the background color for

the ordered list is purple based on the

li rule.

Only the list items in your unordered list are colored green.

6 Close your browser and return to your text editor. You’ll now focus on controlling the

spacing of your lists. However,  rst you’ll correct the fact that your ordered list is bigger

than your unordered list by adding a

font-size property.

7 Add the following code to make the ordered list the same size:

ol {

font-size:0.875em;

}

In order to add space between the unordered list and the ordered list, you can add a

bottom margin (highlighted below in red) to the unordered list:

ul {

font-size:0.875em;

background-color:#E5DAB3;

margin-bottom:2em;

}

This works much like the earlier exercises where you controlled the space between your

headings and paragraph. However, it is also important that you understand the role of

padding when it comes to lists.

webdesign.indb 135webdesign.indb 135 3/17/11 1:50 PM3/17/11 1:50 PM

136

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

8 Add the following code to your ul style:

padding-left:0em;

Save the  le and preview the page in your browser.

The unordered list with a left padding of 0 places the bullet points outside the box by default.

By zeroing-out the left padding, you collapse the default padding, all the list items shift to the

left, and the bullet points are now hanging outside the unordered list! Close the browser and

return to your text editor. Using a CSS rule, you can force the bullet points to be inside the

unordered list.

9 Add the following code to your ul style:

list-style-position:inside;

This causes the bullets to be nested within the unordered list.

10 The spacing of lists is also determined by the margins and padding of the individual list

items. Here y

ou will modify both properties of the unordered list in order to see the

di erence. First you will add a top margin value (highlighted in red):

ul li {

background-color:#ABC8A5;

margin-top:1em;

}

Save the  le and preview it in your browser. Margin-top adds 1 em of space to the top

of each list item. Because the margin value adds space on the outside of an element, you

see the

background-color of the unordered list.

Now you’ll add padding to the ordered list.

12 Add the following code:

ol li {

padding-top:10px;

}

webdesign.indb 136webdesign.indb 136 3/17/11 1:50 PM3/17/11 1:50 PM

The importance of typography on the web

137Lesson 6, Formatting Text with CSS

13 Save the  le and preview it in your browser.

The list items in the  rst list are spaced using margins, while the list items in the second list are spaced using padding.

Padding-top adds 1 em of space to the top of each list item, but because padding adds space

to the inside of an element, you do not see the background color.

14 Return to your text editor and comment out all three of your background color

properties.

For a reminder of how to do this, you can revisit step 12 of the margins

exercise on page 126.

15 Save the  le and previe

w it in your browser.

Notice that without the background colors it would be impossible to know that the spacing

of the  rst list used margins and the spacing of the second list used padding. Using margins

and padding indiscriminately can lead to problems, especially as your lists become more

complicated.

In this lesson you learned the di erent ways you can set the

font-size of your text with

an emphasis on using the em unit of measurement. You also learned how to control the

appearance of your text with CSS properties including

margins, padding, line-height,

text-transform, letter-spacing, and font-weight. Finally, you learned the three types

of HTML lists and how to style them.

This lesson involved the most coding you have done up to this point. If you would like to

compare your work with a  nished version, open the  nal page, named 06_ nal.html, which is

located in your web06lessons folder.

webdesign.indb 137webdesign.indb 137 3/17/11 1:50 PM3/17/11 1:50 PM

138

Self study

Web Design with HTML and CSS Digital Classroom

Self study

To practice styling lists, create new style rules for the de nition list. Here are some ideas to

help you get started:

1 Make the entire de nition list smaller than the other two lists and create an italic style

for the de nition de nitions

<dd>.

2 Experiment with some of the other properties you learned in this lesson, such as

text-transform, letter-spacing, and so on.

3 Remember that with de nition lists you hav

e an extra item to work with

(the

<dt> element).

Review

Questions

1 What is the em measurement when referring to

font-size? What are its advantages?

2 Jennifer has de ned the paragraph rule in her CSS the follo

wing way:

p {

font-family:Baskerville;

}

Is this the best way for her to de ne her paragraph style? Explain your answer.

3 What is the best way to increase or decrease space between two text blocks (for example,

the space between a heading and a paragraph)?

Answ

ers

1 The em as it applies to

font-size in CSS is a relative unit of measurement. A unit of

1em is equivalent to the default

font-size of the web browser (traditionally 16 pixels).

Because em units are relative, they scale well when resized in a browser. They also allow

the designer to link elements such as paragraphs and headings to a speci c value in the

body. This allows for easy resizing of text if needed.

2 This is not the best way for Jennifer to de ne her paragraph style.

Because fonts de ned

in a style sheet only appear on the user’s page if they have the font installed on their

system, it is best to use a font-stack. A font-stack lists two or more fonts in the preferred

order of display (based on their availability on the user’s system). Furthermore, this font-

stack should include fonts that are generally accepted as being on most systems.

3 The best way to increase or decrease space between two text blocks is to use

margins,

padding, or some combination of the two. All CSS elements are based on a box model,

and the space outside of the element is controlled by an invisible margin on all four sides.

The space inside the element is controlled by invisible padding. In the case of a paragraph

that is below a heading, you would only need to set the top or bottom values, not the

right or left values.

webdesign.indb 138webdesign.indb 138 3/17/11 1:50 PM3/17/11 1:50 PM

139Lesson 7, Introduction to CSS Layout

What you’ll learn in

this lesson:

• Understanding CSS reset

files

• An overview of CSS

layout options

• How to use margins and

padding to add space to

your page

• Working with the float

and clear properties

Introduction to CSS Layout

In this lesson, you will learn to control the appearance of text on

your web pages using CSS style.

Starting up

You will work with several  les from the web07lessons folder in this lesson. Make sure you have

loaded the weblessons folder onto your hard-drive from www.digitalclassroombooks.com/webdesign.

See “Loading lesson  les” in the Starting Up section of this book.

See Lesson 7 in action!

Use the accompanying video to gain a better understanding of how to use some of

the features shown in this lesson. You can  nd the video tutorial for this lesson at

www.digitalclassroombooks.com using the URL provided when you registered your book.

The examples in this lesson use the TextWrangler text editor to create the HTML markup, but

you can use any of the text editors covered in Lesson 3.

Lesson 7

webdesign.indb 139webdesign.indb 139 3/17/11 1:50 PM3/17/11 1:50 PM

140

Working with a CSS reset file

Web Design with HTML and CSS Digital Classroom

Working with a CSS reset  le

Before you start building your page layout, you will learn to use a CSS reset  le. In Lesson 4,

you learned that virtually all HTML elements (such as paragraphs and headings) have default

styles rendered by the browser. For example, the heading 1 default style has top and bottom

margins of 10 pixels. If you want to style a heading so there is no margin, you must explicitly

set the style rules to zero.

On the left is a heading 1 with default margins of 10 pixels. On the right is a heading 1 with the margins set to zero.

The CSS rule for setting the margins to zero is as follows:

h1{

margin-top:0px;

margin-bottom:0px;

}

All HTML elements have default margins; unfortunately, web browsers use their own rules

for rendering content, and interpret the appearance of these margins di erently. For example,

the 10-pixel margin in browser A might be rendered as 15 pixels in browser B. These

di erences can introduce inconsistencies in your page layouts. Fortunately, you can use the

CSS reset  le to remove the default styles from the most commonly used HTML elements.

With the CSS styles reset, you have a reliable and consistent foundation on which to base

your new styles. To get a better sense of how styles work, open a page that contains a number

of default styles and link the CSS reset style sheet to this page.

1 In your text editor, choose File > Open. In the dialog box that appears, navigate to the

eb07lessons folder,

choose the 07_reset.html  le, and click Open.

This  le has a number of generic HTML elements,

such as headings, paragraphs, lists, and

forms; it has no CSS styles.

2 Preview the page in your web browser and notice the space between the headings as well

as the appearance of the lists and the form.

Add a link to your CSS reset style sheet to see

how this a ects the appearance of these elements. Close your web browser and return to

your text editor.

webdesign.indb 140webdesign.indb 140 3/17/11 1:50 PM3/17/11 1:50 PM

Working with a CSS reset file

141Lesson 7, Introduction to CSS Layout

3 Add the following line of code (highlighted in red) to attach the reset.css style sheet

located in the web07lessons folder:

<head>

<title>Digital Classroom Lesson 07 CSS Reset</title>

</head>

Save the  le and preview it in your browser.

A page of common HTML elements that have been reset.

Many of the elements on your page have had the margins and padding set to zero. As a

result, all the space between them has collapsed. There are a number of other reset styles;

for example, your list-styles are set to “none,” which removes the default bullet points

from unordered lists and the numbers from ordered lists. Close your browser and return

to your text editor.

4 Choose File > Open. In the dialog box that appears, select the reset.css  le and click

Open. T

ake a few moments to look through the  le.

This group of rules removes the default margins, padding, and borders from most of your

HTML elements.

webdesign.indb 141webdesign.indb 141 3/17/11 1:50 PM3/17/11 1:50 PM

142

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

You will not change this style sheet, but will attach it to your pages. Remember that reset

style sheets are optional. They help standardize your layout across browsers, and some

designers also add their most frequently used styles to their reset style sheets.

Extending the reset style sheet

Eric Meyer was the  rst designer to develop reset style sheets, which he then released into the

public domain. You will use his style rules in this exercise. For more information on the reset

technique, visit http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/.

Many designers customize this reset style sheet to  t their needs. For example, if the most

common font-family you use is Verdana, you can add this rule to your body style. If you like

more space between the lines in your paragraphs, you can set a standard line-height value that

best works for you. The point is to have a consistent set of rules that you can use to quickly start

up a project.

Using CSS reset style sheets has some potential disadvantages, especially for beginners: you

must constantly remember that the reset style sheet is there and be aware of how it a ects the

appearance of di erent elements in your site. If you are using the reset style sheet across the

entire site, you might be surprised by some of its e ects, especially when using elements you are

not familiar with. For example, a CSS reset  le strips out the margins and padding for most form

elements, and when you start working with forms for the  rst time, you might be confused as to

why your buttons, form  elds, and other elements appear the way they do.

A brief history of layout techniques on the web

Although you will be learning how to build your page layout using CSS styles, you should

note that this was not always a standard practice. As web design developed in the mid-1990s,

the only method available for sophisticated page layout, such as adding multiple columns

to a page, was to use the HTML

<table> tag. The HTML table was originally designed to

present data in a logical format, using rows, columns, and cells.

Designers adopted this table element and used it as the foundation for their page structure. At

the time, this technique made perfect sense: tables were the only tool available to create the

sort of designs required at the time.

Designers often used techniques such as nesting tables. For example, the code for a standard

two-column page might start with a table consisting of three rows and two columns.

A three-row and two-column table.

webdesign.indb 142webdesign.indb 142 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

143Lesson 7, Introduction to CSS Layout

However, because the  rst row would become a header section, the column being de ned

would be in the way. The HTML

<colspan> tag allowed the designer to merge the two cells.

A table with two merged cells in the  rst row.

In this merged  rst row, a designer might want an independent three-column section for a

logo and other elements, such as navigation or a user login. To add this section, the designer

would add a new table (with three columns) into the top row.

Nesting a new three-column table into the top row of the original table.

To give this table structure, the designer might set the original table to a  xed width and

height. Assume the designer also wanted a thin, black border around the entire layout.

However, the border property for HTML tables is very basic and does not allow the addition

of colors. One common solution was to insert the existing table into another table, which

would consist of a single cell with a background color of black. By modifying the padding

and background color and merging additional cells, the designer was able to create a table-

based layout with some basic styling.

A typical empty “template” for a table-based layout as rendered in a browser.

webdesign.indb 143webdesign.indb 143 3/17/11 1:50 PM3/17/11 1:50 PM

144

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

This review of web layout is relevant today because a vast number of websites were built and

continue to be built using the table method. CSS has been replacing the use of tables for

page layout, but the process is a slow, gradual one. Table layouts have an advantage of being

reverse-compatible with older browsers; however, this advantage has decreased as people

update to newer browsers.

CSS layouts were also not well supported (if at all) in early web browsers, and so for web

designers, there was no real incentive to discard table layout techniques for CSS layout.

However, one of the disadvantages of table-based layouts was the amount and type of

code required to build a page. The layout described in the previous paragraphs would have

required code similar to the following:

<tr>

<tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

This is a relatively simple layout with no content or navigation. However, de ning the

relationship between all the various elements is very confusing, and it requires multiple lines

of code.

If you want to look at this code in your text editor, you can  nd it in the 07_table.html  le

within the web07lessons folder.

webdesign.indb 144webdesign.indb 144 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

145Lesson 7, Introduction to CSS Layout

Remember that one of the main goals of CSS was to separate the style from the structure

of HTML. In the table code above, note that values for width and height, as well as the

background color and a few other values, are embedded within the HTML. Although this

practice was unavoidable before CSS, you can now set these values using CSS.

The HTML table element is slowly returning to its original function of presenting data, and

not being used for layout. You might still  nd examples of these layouts on the web, but you

will not learn to build them in this book. Instead, you will learn the basics of layout using CSS.

An overview of page layout options

Before building a page layout, there are a few decisions you should make. The  rst is the

width of the layout. There are two main categories of layout widths:  xed-width layouts and

 exible layouts. Fixed-width layouts are much more common: in a  xed-width layout, all page

elements are nested within a container that has an explicit width (in this example, you will

use 960 pixels, but the unit of measurement is often in ems as well). A  xed-width layout is

useful for the designer because it o ers a way to reliably position the various layout elements

(such as headers, sidebars, and footers). It also provides a reliable structure for elements, such

as the width of a paragraph on a page or the placement of images.

Fixed-width layouts have explicit widths and have a de ned space on a web page.

webdesign.indb 145webdesign.indb 145 3/17/11 1:50 PM3/17/11 1:50 PM

146

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

Flexible layouts are so named because they are designed to adapt to the width of the browser

window. This style of layout is useful when users have di erent monitor resolutions, making

it impossible to build a  xed-width layout that looks the same on every screen. A properly

designed  exible layout can automatically adjust to  t the user’s browser window.

Flexible layouts readjust as the browser window changes size.

You could argue that  exible layouts are more appropriate for the web. It is, after all, not

print: both text and images on a web page can re ow. Now that mobile devices make up a

substantial proportion of web browsers, a  exible layout might be better suited to these new

interfaces than a  xed-width layout.

Flexible-width layouts are much more di cult to build. There are more decisions for the

designer to make and more options to consider. For this reason, you will learn how to create

a  xed-width layout in this lesson.

webdesign.indb 146webdesign.indb 146 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

147Lesson 7, Introduction to CSS Layout

Understanding <div>s: creating a two-column  xed-width CSS layout

In this exercise, you will build a  xed-width two-column layout. To begin, you will work

with a basic page that has been set up for you. This page uses a series of HTML

div elements

as the basic structure. Think of the

<div> element as a container into which you’ll place

logically related elements on a page. Opening and closing

<div> tags are often placed

around other elements on a page, thereby nesting the related items inside the container. You

may have multiple

<div> elements on a page and they are often used to create the layout

structure of a page. A

<div> element often has either a CSS class or ID attribute, which are

used to style the container. By using

<div> elements you can make it easier for others to

identify the sections of your pages, and it can make it easier to control and style a section of a

page. Here you will combine the

div element with CSS IDs.

1 In your text editor, choose File > Open. In the dialog box that appears, navigate to the

web07lessons folder. Select the 07_layoutstart.html  le and click OK.

2 Choose File > Save As and name this  le 07_layoutw

ork.html. This preserves the original

structure of the page for you. This page has a series of HTML

div elements with some

placeholder content. Analyze and style this page to understand how it was set up. The

HTML page contains several comments to guide you through the  le.

The structure of the page was established for you; however, you will go through each

section to get an understanding of how it w

orks. The  rst step is to understand the

function of the HTML

<div> tag and its central role in CSS layout.

3 In your HTML, locate the line

<div id="wrap">. This is the beginning of a section

of your page that will nest all your other page elements. By itself, the HTML

<div> tag

does nothing, which makes the tag unique, since all the other HTML elements, such as

paragraphs (

<p>) and lists (<ul>, <li>, <dl>), have some e ect on their content.

The

<div> tag as well as paragraphs and lists, among others is a block-level element.

Block-level elements usually start new lines of text when they are used. The

div tag is

often paired with either a CSS class or a CSS ID. Once you pair the CSS class or ID

with a

div tag, you can begin to add rules to control its appearance. Before doing this,

you should take a look at the page before you style it.

4 Preview the page in your browser. The reset.css  le you examined earlier is causing the

elements on your page to be collapsed.

This page has a number of pre-built div sections and the HTML elements have been reset.

webdesign.indb 147webdesign.indb 147 3/17/11 1:50 PM3/17/11 1:50 PM

148

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

To understand div tags, you will style the wrap div to begin your  xed-width layout.

Close your browser and return to your text editor.

5 Locate the

in read) for the ID named wrap. The following code shows how

#wrap {

background-color:#E0B3B9;

}

</style>

Save the  le and then preview it in your browser. The wrap div encompasses all the

other content on the page, as shown by the background color you added. Currently, this

div stretches from one side of the browser to the other. This is a very basic  exible-width

layout. Resize your browser window and notice how the text re ows. You will now

de ne the width of the

wrap div.

6 Return to your text editor and add the following two lines of code (highlighted in red)

to your

#wrap style.

#wrap {

background-color:#E0B3B9;

width:960px;

border:thin solid black;

}

Save the page and preview it in your browser. The wrap div now occupies 960 pixels of

space on your page.

Your wrap div is now 960 pixels wide and has a thin, black border.

The border is there to help illustrate the boundaries of the wrap div. Resize your

browser window again. The text no longer re ows, and if your browser window is

narrower than 960 pixels, your content is cropped. When the browser window is wider

than 960 pixels, the box de ned by the

wrap div is aligned to the left. There is a simple

way to position this div so it will always be centered in the browser window.

webdesign.indb 148webdesign.indb 148 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

149Lesson 7, Introduction to CSS Layout

7 Return to your text editor and add the following line of code (highlighted in red).

#wrap {

background-color:#E0B3B9;

width:960px;

border:thin solid black;

margin:0 auto;

}

This is a margin shorthand rule; the value ‘0’ de nes the top and bottom margins of

the

wrap div, and the value auto de nes the left and right margins. The auto value

automatically calculates equal amounts of margin on both sides of the

wrap div. As a

result, the box is always centered.

Save the  le and then previe

w it in your browser to see how the margin shorthand rule

works. Close your browser and return to your text editor. You will work with the other

div elements, but you must  rst apply a basic style to the header.

8 In your HTML, insert an image into the

masthead div — in this case, the site’s logo.

Tobegin, allow the height of the image to set the height of the

header div by adding

the following code (highlighted in red) to link to the logo image located in the

web07lessons folder.

<img src="images/smoothieworld_logo.png" width="200" height="150"

alt="smoothieworld_logo" />

</div>

The div tag has no style, even though the height of the header div is controlled by the

image. This is why you can see the color of the wrapper, for example. However, if you set

the background color of the header, it will be visible.

9 Below your rules for

#wrap, add the following rule for the masthead div:

#masthead {

background-color:#FFF;

}

webdesign.indb 149webdesign.indb 149 3/17/11 1:50 PM3/17/11 1:50 PM

150

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

Save the  le and preview it in your browser. The entire masthead div now has a white

background color, and this overrides the background color of the

wrap div.

Your masthead section now has a logo and a background color.

10 The navigation section will require some more advanced work later in this lesson. For

now, you will set a few basic style rules in order to de ne this section on the page. Add

the following rules below your rules for

#masthead:

#mainnav {

background-color:#C2C895;

height:40px;

}

Save your page and preview it in the browser.

Your mainnav section with a background color and de ned height.

webdesign.indb 150webdesign.indb 150 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

151Lesson 7, Introduction to CSS Layout

You have now reached the inner wrap section, which contains the sidebar and the main

content sections. You will learn to create columns by positioning them with divs. The

current CSS speci cation does not have a column element; “columns” are styled divs that

are often taller than they are wide. To understand how columns are made, you need to

understand the concept of the CSS

ﬂ oat property.

Understanding the CSS ﬂ oat property

The ﬂ oat property in CSS allows text to wrap around an image. This style was borrowed

from print design, where the e ect is called text wrap or runaround. CSS achieves this e ect

by allowing elements following a  oated element in the HTML markup to surround the

element, e ectively changing their position. This behavior also makes it possible to create

columns on a page.

In the left image below, there is an inline graphic nested inside a paragraph. This is the default

behavior of the graphic, as there is no ﬂ oat property. In the right image, nothing changes

except that the rule

ﬂ oat:right has been applied to the graphic. The graphic shifts as far to

the right as posssible and the text wraps around the left side automatically.

An image in the default  ow of HTML (left). The same image  oated to the right (right).

You can also have a  oat value of left. In the above example, this would place the graphic at

the left-most margin and wrap the text on the right.

The only values possible for a  oat are left, right, or none. You cannot center an object using

the ﬂ oat property.

webdesign.indb 151webdesign.indb 151 3/17/11 1:50 PM3/17/11 1:50 PM

152

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

If you have multiple  oated elements within the same element, they align beside each other.

This behavior is often used for common web page features such as horizontal menus or

image galleries.

Understanding how multiple  oated elements interact with each other is crucial to using

them e ectively. Consider the following example: there are six images inside a div that is

360pixels wide. Each image is 50 pixels wide, and also has 10 pixels of margin space (5 on

the left and 5 on the right). By adding the values, you can see that 6 × 50 is 300 pixels for the

images and 6 × 10 is 60 pixels of margin. Consequently, the images plus the margin  t inside

the div, with a total width of 360 pixels.

If you have de ned an explicit width for the container, adding another image causes the new

image to break to the next row.

This behavior might work well for a thumbnail image gallery, but not for navigation.

You will learn more about using  oats in the next exercise when you build a two-column layout.

webdesign.indb 152webdesign.indb 152 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

153Lesson 7, Introduction to CSS Layout

Creating columns with the ﬂ oat property

You will apply the ﬂ oat property to the sidebar and main content divs to see how they are

a ected.

1 Add the following selector and style rules (highlighted in red) below the

#mainnav rule:

#sidebar {

ﬂ oat:left;

width:300px;

background-color:#CCC;

}

Save the page and preview it in your browser. The page has become “broken”; however,

you must learn to recognize the reasons behind a “broken” page such as this one, because

this behavior teaches you how  oats work.

When you  oat an element (in this case,

the sidebar div), it is removed from the

normal  ow of the HTML. This is why the sidebar extends over the entire container.The

two divs that have content are contained within boundaries of the sidebar.

The sidebar is  oated, but is also overlapping the boundaries of other page elements.

However, this containment can be deceptive because it is a ected by the amount of

content in each div. To illustrate, you will add more content into the

main div by

duplicating the current paragraph.

2 In your HTML, select the entire paragraph element and press Ctrl + C (Windows) or

Command + C (Mac OS) to copy it. Click once after the element and pr

ess Ctrl + V

(Windows) or Command + V (Mac OS) to paste it.

3 Save the  le and then previe

w it in your browser. When additional content is added to

the

main div, it expands and pushes the footer div downwards. Now the footer div

appears below the sidebar because there is space for the div above it. Close your browser

and return to your text editor.

webdesign.indb 153webdesign.indb 153 3/17/11 1:50 PM3/17/11 1:50 PM

154

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

4 These three divs (sidebar, main, and footer) currently appear to be interdependent.

Removing (or adding) content from the sidebar also has an e ect. In your HTML, select

the last paragraph within the sidebar and delete it. Save the page and preview it in your

browser. Now that the height of the

sidebar is shorter than both the footer and the

main divs, they “ ow” beneath it. This can lead to some layout problems; you will learn

strategies for solving these problems in a later section, but now, you will  oat the main

container as well.

5 Close your browser and return to your text editor. Press Ctrl + Z (Windows) or

Command+ Z (Mac) to undo the deletion of the paragraph in the sidebar.

Additionally,

select the paragraph in the

main div that you duplicated in step 2 and delete that as well.

6 Add the following selector and style rules (highlighted in red) below the

#sidebar rule:

#main {

width:600px;

ﬂ oat:right;

background-color:#ADA446;

}

Save the  le and preview it in your browser.

The main div  oats to the right, but the footer has moved upwards in the  ow of the page.

Floating this div to the right solves the problem of the content appearing below the

sidebar; however, the amount of content in the main div forces it to extend outside the

entire container. This is a problem when you consider the

footer element: footers should

appear at the bottom of the page, and this one is not.

To force the

footer div to the bottom of the page, you will assign a new property called

clear to this div.

webdesign.indb 154webdesign.indb 154 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

155Lesson 7, Introduction to CSS Layout

Working with the clear property

When you add the CSS clear property to an object, you add a rule that says, “No  oated

elements are allowed to my sides.” You can specify whether you want to clear  oated elements

on the left side, the right side, or both. In the case of the footer, you will choose both.

1 Add a new selector and style rules (highlighted in red) below your

#main div:

#footer {

clear:right;

background-color:#BA2B22;

}

2 Save the  le and preview it in your browser. Your footer is now placed at the bottom of

the

main div. This is because the clear:right rule does not allow any  oated elements

to the right of the footer. The

main div was  oated, and so the footer moves to the next

available spot on the page. Close your browser and return to your editor.

As in the earlier examples, the amount of content in your divs can a ect your  oated and

clear

ed elements. For example, if the amount of text in the sidebar expands to the point

of reaching the footer, you have a problem again as the sidebar extends outside. For this

reason, elements are often set to clear on both sides.

3 Change the value of your

clear property as follows (highlighted in red):

clear:both;

This code ensures that no  oated elements are allowed on either side of the footer.

Creating a list-based navigation using ﬂ oats

Now that you have learned the basics of  oating and clearing, you will return to your navigation

section and add a simple navigation bar based on an unordered list. The list items inside your

navigation should be  oated to override the default vertical appearance of a list. CSS navigation

menus are used frequently in standards-based design because they can easily be updated and

modi ed, and because they are text-based (not images), which improves accessibility in devices

such as screen readers and can even help a website’s search engine rankings.

1 In your HTML, select the placeholder content inside your

mainnav div and replace it

with the following unordered list and list items (highlighted in red):

<ul>

<li><a href="about.html">About

Us</a></li>

<li><a href="recipes.html">Recipes</a></li>

<li><a href="submitrecipe.html">Submit a Recipe</a></li>

<li><a href="forum.html">Forum</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

</div>

webdesign.indb 155webdesign.indb 155 3/17/11 1:50 PM3/17/11 1:50 PM

156

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

The list items are linking to pages that do not exist yet. Nevertheless, you are linking the

items because they need to be hyperlinked to be styled correctly.

2 Preview the page in your browser.

Your list is in the default vertical position and is overlapping your sidebar.

Notice that your page appears “broken” again. This is because your list is overlapping

your  oated sidebar. Also, the list has no bullet points. Remember that your CSS

reset style sheet is attached to this page and one of the rules has a property of

list-

style:none

, which removes the bullet points. For this example, the lack of bullet points

is acceptable because you are using this list for navigation.

3 Return to your text editor and locate your

#mainnav rule. Add a new rule between this

one and the sidebar by pressing Return a few times to add some space and then adding

the following code:

#mainnav li {

ﬂ oat:left;

}

This is a new type of CSS rule called a contextual selector; it targets only list items that are

inside the

mainnav div. If you were to de ne a new rule just for list items, all the list

items on the page would be a ected, which would not work for this example.

webdesign.indb 156webdesign.indb 156 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

157Lesson 7, Introduction to CSS Layout

4 Save the page and preview it in your browser. All the list items are now stacked side

by side. Notice that the list inside the main content has not been a ected. Add space

between the list items and add other styles as indicated in the following step.

Floating the list items causes them to be stacked side by side.

5 Add the following code (highlighted in red) to your mainnav li rule:

#mainnav li {

ﬂ oat:left;

width:120px;

height:25px;

background-color:#CCC;

text-align:center;

border-left:1px black solid;

border-right:1px black solid;

}

In this code, you have done the following: de ned the box around each list item as

120pixels wide by 25 pixels high; added a background color; aligned each list item to

the center; and added a border to both sides of the item. Save the  le and preview it in

your browser.

When you de ne the width and height of the box, the text naturally sits at the top

Unfortunately, while there is a

text-align:center property that centers the text

horizontally, there is no simple way to vertically center objects in CSS. In this case, you

will use the

line-height property to move the nav text downwards.

webdesign.indb 157webdesign.indb 157 3/17/11 1:50 PM3/17/11 1:50 PM

158

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

6 Add the following line of code below your border-right declaration:

line-height:25px;

Save the  le and preview it in your browser. Your text is now centered within the box.

Remember that the line-height number is based on the font size; it will likely change if

you change the font size.

Adding line-height to the list items positions them vertically within the navbar.

Adding text styles

Before continuing with your layout, you will import the text styles you worked on in

Lesson6. Until now, you have added your styles to an internal style sheet instead of an

external one. When building a layout, using an internal style sheet is a matter of convenience:

creating and modifying style rules is easier to do by scrolling up the page than by accessing

an external style sheet. Eventually, you will move the layout rules you have created to an

external style sheet. For now, you will attach a style sheet that sets the base rules for elements

such as your headings, lists, and paragraphs.

1 At the top of your HTML, locate the

another external style sheet, select this line and then press Ctrl + C (Windows) or

Command+ C (Mac OS) to copy it. On the next line, press Ctrl + V (Windows) or

Command+ V (Mac OS) to paste the line. Now replace the value “reset.css” with the

following value (highlighted in red):

webdesign.indb 158webdesign.indb 158 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

159Lesson 7, Introduction to CSS Layout

2 Save the  le and then preview it in your browser to see the e ect of the new values.

Your page now uses an external style sheet for the text elements.

3 Return to your text editor and choose File > Open. In the dialog box that appears,

navigate to your web07lessons folder, select the base.css  le, and click Open. Review

the styles in this CSS  le. They should be familiar to you from Lesson 6, but the margin

and padding styles were removed because these styles made sense in the context of that

lesson, but not in the new layout. You can add a style to these elements.

webdesign.indb 159webdesign.indb 159 3/17/11 1:50 PM3/17/11 1:50 PM

160

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

The e ect of margins and padding on your  xed-width layout

In this section, you will add space between the sections of text on your page (which have

margins of zero from the reset style sheet). You will learn some strategies for controlling the

layout; however, the goal of this exercise is not to show you a single method of CSS layout,

but to help you understand the di erent options, which should help you in your future

projects to decide which method to use.

In this  rst exercise, you will add padding to the

sidebar element.

1 Preview the page in your browser and notice the lack of space between your text and the

edge of your sidebar. Also, notice the width of this sidebar: if you measure it based on the

navigation bar above, the sidebar ends approximately one-third of the way through the

“Recipe” list item.

A guide is added in this screenshot to show where the sidebar ends in relation to the navigation bar.

The width of this sidebar is set to 300 pixels; increase the padding of the sidebar by

following the instructions in the next step.

webdesign.indb 160webdesign.indb 160 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

161Lesson 7, Introduction to CSS Layout

2 Return to your text editor, locate the rule in your CSS for the sidebar, and add the

following code (highlighted in red):

#sidebar {

ﬂ oat:left;

width:300px;

background-color:#CCC;

padding:0px 20px 0px 20px;

}

Remember that this is a CSS shortcut and you should read the values in a clockwise

manner. The  rst value (

0px) is the top padding, the second value (20px) is the right

padding, the third value (

0px) is the bottom padding, and the last value (20px) is the left

padding. Save the page and preview it in your browser.

Using the guide as a reference you can see the width of the sidebar has expanded by 40 pixels

webdesign.indb 161webdesign.indb 161 3/17/11 1:50 PM3/17/11 1:50 PM

162

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

By adding 20 pixels of left padding and right padding to the sidebar div, you can

increase the amount of space inside the column. However, notice the end of the sidebar

now lines up at the end of the Recipe item. This is because increasing the padding has

increased the width of the sidebar by 40 pixels. This means the absolute width of the

sidebar is 340pixels, where 300 pixels comes from the width property in the

sidebar

rule and 40pixels comes from the padding that you add.

3 Return to your text editor. Add an equivalent amount of padding to the

main div

because it also needs space for the text.

Locate your

#main rule and add the following padding (highlighted in red):

#main {

width:600px;

ﬂ oat:right;

background-color:#ADA446;

padding:0px 20px 0px 20px;

}

Save the  le and preview it in your browser. A new problem arose: the total width of

your two columns when you include the padding is wider than the container they are

nested in. If you scroll down the page in your browser, you see the

main div has slid into

the only space it is allowed, underneath the

sidebar.

You can  x this problem in se

veral ways: you could expand the overall width of the wrap

div, you could reduce the width value of the

sidebar or the main div (or both), or you

could reduce the padding values. However, all these methods are based on using padding,

and there is an alternative method of adding space to columns that does not rely on

padding at all. You will use this method.

4 Return to your text editor and locate the padding rules you added in steps 2 and 3.

Select and delete these rules.

You can achieve a similar e ect by adding margin rules to

the text elements inside the columns, as described in the following step.

5 Below the

#footer rule in your CSS, add the following rule (highlighted in red):

p, h1, h2, h3 {

margin-left:20px;

margin-right:20px;

}

webdesign.indb 162webdesign.indb 162 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

163Lesson 7, Introduction to CSS Layout

This rule places 20 pixels of margin on the left and right of all paragraph and heading

elements on the page. Save the  le and preview it in your browser.

Adding margins to the elements within the sidebar

increases the amount of space but does not increase

the width of the sidebar.

As in the earlier padding example, the result is extra space between the text and the

columns. However, a crucial di erence is that when you add margins to the text

elements, the width of the columns is not a ected. This can be advantageous, as you no

longer have to add width to the padding. You only need to consider the width property

for the column.

This technique has its own disadvantages, because the rules you set currently apply to

all paragraphs and headings 1, 2,

and 3 elements on the page. For example, notice that

the footer was pushed 20 pixels to the right because the content is a paragraph. In cases

where you only want to specify the elements within the sidebar and main, the contextual

selector you used earlier for the navigation is useful.

6 Return to your text editor and delete the

margin-left and margin-right properties

you added in step 5 (but leave the rule intact). Add the following group of rules

(highlighted in red):

p, h1, h2, h3 {

}

#sidebar p, #sidebar h2, #sidebar h3, #main p, #main h1, #main h2,

#main h3 {

margin-left:20px;

margin-right:20px;

}

This is a CSS shorthand to select any paragraph, heading 1, heading 2, or heading 3

element child of the sidebar ID or the main ID and ap ply left and right margins of

20pixels.

webdesign.indb 163webdesign.indb 163 3/17/11 1:50 PM3/17/11 1:50 PM

164

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

7 Save the  le and preview it in your browser. Scroll to the footer paragraph and notice

that it no longer has margins. Close your browser and return to your text editor.

This method of styling requires a bit more attention to detail than the padding method.

For example,

when new elements are added inside a div, they do not use the same

margins. The next step shows an example of this problem and then the solution, which

involves adding a heading 4 element to the sidebar.

8 In the HTML of your

sidebar div after the last paragraph, add the following code:

<h4>Submit a Recipe</h4>

Save the page and preview it in your browser. This heading 4 uses its zero margins

(inherited from the reset.css style sheet) so it is  ush against the column. Close your

browser and return to your text editor.

9 In your group of rules for the sidebar and main columns, add a new rule (highlighted in

red) in the sidebar for heading 4 (

h4):

#sidebar p, #sidebar h2, #sidebar h3, #sidebar h4, #main p, #main h2 {

margin-left:20px;

margin-right:20px;

}

Save the page and preview it in your browser. The heading 4 element now has the same

margins as the others.

The heading 4 element now has the same margins as the other elements in the sidebar.

webdesign.indb 164webdesign.indb 164 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

165Lesson 7, Introduction to CSS Layout

You can add a di erent margin to one of the elements. For example, you might want to

move the paragraphs inside the sidebar to the right so they are indented. In this case, add

another rule speci cally for the

p elements in the sidebar, as indicated in the next step.

Close your browser and return to your text editor.

10 Add a new rule immediately below your previous rule set for the sidebar paragraph,

#sidebar p, #sidebar h2, #sidebar h3, #sidebar h4 #main p, #main h1,

#main h2, #main h3{

margin-left:20px;

margin-right:20px;

}

#sidebar p {

margin-left:30px;

}

This rule overrides the rule you set in step 9. Save the page and preview it in your

browser. The paragraphs in the sidebar now have a left margin of 30 pixels, and in

contrast to the other elements, are now indented.

The paragraphs in the sidebar have speci c rules for a left margin of 30 pixels.

With the exceptions of the changes you made in this exercise, all the margins and

padding for the elements on your page are set to zero based on the reset style sheet. Add

new values to the top and bottom margin values for most of your elements as indicated

in the next step.

11 Locate the empty

p, h1, h2, and h3 rules in your style sheet. Add also the h4 selector to

cover the elements on your page, and modify this rule set as follows (highlighted in red):

webdesign.indb 165webdesign.indb 165 3/17/11 1:50 PM3/17/11 1:50 PM

166

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

p, h1, h2, h3,h4 {

margin-bottom:20px;

}

Save the page and preview it in your browser. Most of your elements now have some

added space from these margins. To add a top margin to the heading 2 in your sidebar

you could add another rule as shown in the next step.

12 In your text editor, add the following rule set:

#sidebar h2 {

margin-top:15px;

}

Save the page and preview it in your browser. Your heading 2 in the sidebar has been

pushed down by the top margin.

Your sidebar with a top margin of 15 pixels applied.

webdesign.indb 166webdesign.indb 166 3/17/11 1:50 PM3/17/11 1:50 PM

A brief history of layout techniques on the web

167Lesson 7, Introduction to CSS Layout

A review of using margins and padding for layout

In this lesson, you have learned two methods for adding space between the elements in

a page. The  rst method is to add padding to a

div element. The advantage with this

method is that all the elements inside the div are a ected simultaneously, making it quick

and e cient. A disadvantage to using padding for a div container is that increasing padding

changes the width; to compensate, you must take into account the extra width.

The second method is to add margins to the elements inside the divs. The disadvantage to

this method is that it requires more code and attention to detail because you must notice

how individual elements are positioned. The advantage is that column behavior is more

predictable, since there is only one width property to consider.

There is another, less obvious advantage to the second method that has not been discussed.

For reasons that will be covered in more depth in Lesson 9, this method is more reliable for

achieving similar layouts across browsers and it solves a bug found in Internet Explorer 6.

Finally, you should note that a combination of methods (using margins and padding) might

be necessary for some situations. Consequently, you should understand the cause and e ect of

each method you use.

Styling your footer with a background image

So far, the structure of your page has been de ned by the background colors of your

divelements. In this section, you will learn to add images. To do this, you will add a

CSSbackground image to your footer.

1 Locate the

#footer div and replace the placeholder content inside the div with the

following code (highlighted in red):

<p>Registration on or use of this site constitutes acceptance of

our <a href="useragreement.html"> user agreement </a> and

<a href="privacy.html">Privacy Policy.</a></p>

</div>

2 Save the page and preview it in your browser. Each paragraph is styled based on the

current rules for paragraphs. You will adjust the rules for the footer, but you must know

the size of the footer, which will be based on the dimensions of the background images

you will add.

webdesign.indb 167webdesign.indb 167 3/17/11 1:50 PM3/17/11 1:50 PM