Adobe CS3 Web Workflows

BUILDING WEB SITES WITH ADOBE CREATIVE SUITE 3

JOSEPH W. LOWERY

Wiley Publishing, Inc.

For Margot, the hardest-working daughter in school biz

Adobe CS3 Web Workflows

BUILDING WEB SITES WITH ADOBE CREATIVE SUITE 3

JOSEPH W. LOWERY

Wiley Publishing, Inc.

ADOBE CS3 WEB WORKFLOWS: BUILDING WEB SITES WITH ADOBE CREATIVE SUITE 3

Published by
Wiley Publishing, Inc.
10475 Crosspoint Boulevard
Indianapolis, IN 46256
www.wiley.com
Copyright 2008 by Wiley Publishing, Inc., Indianapolis, Indiana
Published simultaneously in Canada
ISBN: 978-0-470-26127-9
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
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.
Library of Congress Cataloging-in-Publication Data
Lowery, Joseph (Joseph W.)
Adobe CS3 web workflows : building web sites with Adobe Creative Suite 3 / Joseph W. Lowery.
p. cm.
Includes index.
ISBN 978-0-470-26127-9 (paper/website)
1. Computer graphics. 2. Desktop publishing. 3. Web sitesDesign. I. Title.
T385.L694 2008
006.6--dc22
2008008487
Trademarks: Wiley, the Wiley logo, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in
the United States and other countries, and may not be used without written permission. Adobe and Creative Suite are registered trademarks of Adobe
Systems Incorporated in the United States and/or other countries. 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.

For Margot, the hardest-working daughter in school biz

About the Author

Joseph W. Lowery has been writing about computers and new technology since 1981. He is the author of
the previous editions of the Dreamweaver Bible and Fireworks Bible as well as CSS Hacks and Filters (all published
by Wiley). He is also the author of Dreamweaver 8: Beyond the Basics (Lynda.com), Joseph Lowerys Beyond
Dreamweaver, Dreamweaver MX 2004 Killer Tips (with Angela C. Buraglia), and Dreamweaver CS3 Recipes (with
Eric Ott), all published by New Riders. He has also written books on HTML and using the Internet for business. His
books are international bestsellers, having sold more than 400,000 copies worldwide in eleven different languages.
Joe is also a consultant and trainer and has presented at Adobe conferences in the United States and Europe, and
at ThunderLizards Web Design World. He is currently the vice president of marketing for WebAssist, the leading
provider of Adobe extensions.

iv

PART

01
Photoshop to Dreamweaver

PART

02
Fireworks to Dreamweaver

PART

03
Flash to Dreamweaver

PART

04
Photoshop to Bridge to
Fireworks to Dreamweaver

APPENDIX
Additional Workflows

Credits
Executive Editor

Vice President and Executive Group Publisher

Chris Webb

Richard Swadley

Senior Development Editor

Vice President and Executive Publisher

Kevin Kent

Joseph B. Wikert

Technical Editor

Project Coordinator, Cover

Jim Babbage

Lynsey Stanford

Production Editor

Compositor

Liz Britten

Patrick Cunningham

Copy Editor

Proofreader

Mildred Sanchez

C.M. Jones

Editorial Manager

Indexer

Mary Beth Wakefield

Jack Lewis

Production Manager

Cover Image

Tim Tate

Jupiter Images

CONTENTS AT A GLANCE
PART 1: PHOTOSHOP TO DREAMWEAVER

CHAPTER 01: CREATING THE COMP

CHAPTER 02: COMPLETING THE COMP
CHAPTER 03: FROM COMP TO LAYOUT

6
32
54

PART 2: FIREWORKS TO DREAMWEAVER

98

CHAPTER 04: COMPOSING WITH VECTORS

CHAPTER 05: COMPING MULTIPAGE SITES
CHAPTER 06: COMBINING NAVIGATION AND LAYOUTS

102
128
158

PART 3: FLASH TO DREAMWEAVER

182

CHAPTER 07: BUILDING FLASH INTROS

CHAPTER 08: SETTING UP FLASH VIDEO

186
214

PART 4: PHOTOSHOP TO BRIDGE TO FIREWORKS TO DREAMWEAVER

238

CHAPTER 09: ASSET CREATION AND COMPING

CHAPTER 10: ADDING INTERACTIVE FORMS IN DREAMWEAVER

242
276

APPENDIX A: ADDITIONAL WORKFLOWS

306

INDEX

316

vi

PART

01
Photoshop to Dreamweaver

PART

02
Fireworks to Dreamweaver

PART

03
Flash to Dreamweaver

PART

04
Photoshop to Bridge to
Fireworks to Dreamweaver

APPENDIX
Additional Workflows

TABLE OF CONTENTS
PART 1: PHOTOSHOP TO DREAMWEAVER

CHAPTER 01: CREATING THE COMP

Initializing the Comp

Setting Preferences
Working with Layers
Making Selections
Adding Gradients
Inserting Images

7
9
10
12
15
20

CHAPTER 02: COMPLETING THE COMP

32

Aligning Graphic Elements

Positioning with the Layers Palette
Working with Text

33
36
41

Applying Simple Text Labels

Adding Headings and Blocks of Text
Inserting Decorative Text

41
43
47

Applying Effects

48

vii

CHAPTER 03: FROM COMP TO LAYOUT

54

Setting Up a Dreamweaver Site

Establishing Basic Preferences
Creating CSS Layout Styles
Inserting <div> Tags
Incorporating Background Images
Adding a Background Image to the <body>

55
56
57
64
67
67

Layering Background Images

72

Bringing in Foreground Images

Inserting and Styling Text
Including Navigation

81
86
92

PART 2: FIREWORKS TO DREAMWEAVER

98

CHAPTER 04: COMPOSING WITH VECTORS

102

Getting Started in Fireworks

Working with Vector-Based Graphics

103
105

Adding Rounded Rectangles

Inserting Navigation Tabs
Drawing with the Pen Tool

106
108
111

Integrating Gradients
Integrating Bitmapped Images

115
120

viii

PART

01
Photoshop to Dreamweaver

PART

02
Fireworks to Dreamweaver

PART

03
Flash to Dreamweaver

PART

04
Photoshop to Bridge to
Fireworks to Dreamweaver

APPENDIX
Additional Workflows

CHAPTER 05: COMPING MULTIPAGE SITES

128

Working with Text

129

Creating Logos and Display Text

Adding Navigation Labels
Including Sidebar Placeholder Content
Comping Main Content Text

129
132
135
138

Applying Live Filters

Adding Pages

142
145

Creating a Master Page

Building New Pages

145
147

Linking Pages
Exporting Comp Pages

152
155

CHAPTER 06: COMBINING NAVIGATION AND LAYOUTS

158

Incorporating Background Images

159

Creating Background Slices

Crafting CSS Backgrounds

159
162

Integrating Foreground Images

166

Slicing Foreground Graphics

Placing Fireworks Images in Dreamweaver

166
168

Implementing CSS Navigation

172

Exporting the Navigation States

Creating Web Standard CSS Navigation

172
176

ix

PART 3: FLASH TO DREAMWEAVER

182

CHAPTER 07: BUILDING FLASH INTROS

186

Setting the Stage

Importing Images
Working with the Timeline
Inserting Text
Creating Navigation Buttons

187
189
192
199
202

Making the Button Symbol

Adding ActionScript Code

203
207

Displaying in Dreamweaver

209

CHAPTER 08: SETTING UP FLASH VIDEO

214

Integrating Video in Flash Animations

Encoding Video
Working with Playback Components
Adding Captions to Flash Video
Inserting Video into Dreamweaver
Editing Flash from Dreamweaver

PART

01
Photoshop to Dreamweaver

PART

02
Fireworks to Dreamweaver

215
220
222
225
230
233

PART

03
Flash to Dreamweaver

PART

04
Photoshop to Bridge to
Fireworks to Dreamweaver

APPENDIX
Additional Workflows

PART 4: PHOTOSHOP TO BRIDGE TO FIREWORKS TO DREAMWEAVER

238

CHAPTER 09: ASSET CREATION AND COMPING

242

Straightening Photos

243

Aligning Crooked Shots

Removing Perspective
Healing Images
Automatic Spot Healing
Targeted Sampling for Healing

243
246
251
251
254

Increasing Productivity with Commands

Comping Forms with Rich Symbols

260
265

CHAPTER 10: ADDING INTERACTIVE FORMS IN DREAMWEAVER

276

Applying Spry and Standard Form Elements

277

Inserting Spry Text Fields

Adding Standard Radio Buttons
Including Spry Checkboxes
Setting Up Spry Lists
Completing the Form

277
283
285
289
293

Defining Validations
Styling Spry Widgets

294
298

xi

APPENDIX A: ADDITIONAL WORKFLOWS

306

IllustratorPhotoshop FlashDreamweaver

307

The Flow : Illustrator to Flash and Photoshop and Flash to Dreamweaver

308

DreamweaverContribute

309

The Flow : Dreamweaver to Contribute

310

FireworksFlashDreamweaver

312

The Flow : Fireworks to Flash to Dreamweaver

313

INDEX

xii

316

PART

01
Photoshop to Dreamweaver

PART

02
Fireworks to Dreamweaver

PART

03
Flash to Dreamweaver

PART

04
Photoshop to Bridge to
Fireworks to Dreamweaver

APPENDIX
Additional Workflows