Sybex Dreamweaver And Fireworks MX Savvy Jun 2002 ISBN 0782141110 pdf
Dreamweaver MX/ Fireworks MX Savvy Christian Crumlish Associate Publisher: Dan Brodnitz Acquisitions and Developmental Editor: Willem Knibbe Editor: Rebecca Rider Production Editor: Liz Burke Technical Editor: Scott Onstott Production Manager: Amy Changar Cover and Interior Designer: Caryl Gorska Technical Illustrator: Caryl Gorska Icon Illustrator: Tina Healey Illustrations Compositors: Maureen Forys, Kate Kaminski, Happenstance Type-O-Rama
Proofreaders: Emily Hsuan, Dave Nash, Laurie O'Connell, Nancy Riddiough, Nelson Kim
Indexer: Ted Laux CD Coordinator: Dan Mummert CD Technician: Kevin Ly Cover Photographer: Monty Fresco, Hulton ArchiveCopyright © 2002 Christian Crumlish. World rights reserved. The author(s) created reusable code in this publication expressly for reuse by readers. Sybex grants readers limited permission to reuse the code found in this publication or its accompanying CD-ROM so long as the author(s) are attributed in any application containing the reusable code and the code itself is never distributed, posted online by electronic transmission, sold, or commercially exploited as a stand-alone product. Aside from this specific exception concerning reusable code,] No part of this publication may be stored in a retrieval system, transmitted, or reproduced in any way, including but not limited to photocopy, photograph, magnetic, or other record, without the prior agreement and written permission of the publisher. Library of Congress Card Number: 2002101986
ISBN: 0-7821-4111-0
SYBEX and the SYBEX logo are either registered trademarks or trademarks of SYBEX Inc. in the United States and/or other countries.
Screen reproductions produced with FullShot 99. FullShot 99 © 1991-1999 Inbit Incorporated. All rights reserved. FullShot is a trademark of Inbit Incorporated. The CD interface was created using Macromedia Director, COPYRIGHT 1994, 1997-1999 Macromedia Inc. For more information on Macromedia and Macromedia Director, visit http://www.macromedia.com. Internet screen shot(s) using Microsoft Internet Explorer 5.0 reprinted by permission from Microsoft Corporation. TRADEMARKS: SYBEX has attempted throughout this book to distinguish proprietary trademarks from descriptive terms by following the capitalization style used by the manufacturer. The author and publisher have made their best efforts to prepare this book, and the content is based upon final release software whenever possible. Portions of the manuscript may be based upon pre-release versions supplied by software manufacturer(s). The author and the publisher make no representation or warranties of any kind with regard to the completeness or accuracy of the contents herein and accept no liability of any kind including but not limited to performance, merchantability, fitness for any particular purpose, or any losses or damages of any kind caused or alleged to be caused directly or indirectly from this book. Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 Dear Reader, Thank you for choosing Dreamweaver MX / Fireworks MX Savvy. This book is part of a new line of Sybex web publishing and graphics books that features beautiful designs, great quality throughout, and above all, outstanding authors who really know their stuff. Christian Crumlish and a team of experts deliver one of the most comprehensive and truly useful Dreamweaver books ever published, continuing the trend for top-notch quality established with our Flash MX Savvy and Photoshop 7 Savvy books. With each book, we're working hard to set a new standard, both for the industry and for ourselves. From the quality of the contents to the paper it's printed on, from the cover to the interior design, our goal is to publish the best graphics and Web design books available. I hope you see all that reflected in this book. I'd be very interested in hearing your feedback on how we're doing. To let us know what you think about Dreamweaver MX / Fireworks MX
Savvy, please visit us at www.sybex.com. Once there, go to the book's page, click Submit a Review, and fill out the questionnaire. Your input is greatly appreciated.
Best regards, Daniel A. Brodnitz
Associate Publisher Sybex Inc.
Software License Agreement: Terms and Conditions
The media and/or any online materials accompanying this book that are available now or in the future contain programs and/or text files (the 'Software' to be used in connection with the book. SYBEX hereby grants to you a license to use the Software, subject to the terms that follow. Your purchase, acceptance, or use of the Software will constitute your acceptance of such terms. * The Software compilation is the property of SYBEX unless otherwise indicated and is protected by copyright to SYBEX or other copyright owner(s) as indicated in the media files (the 'Owner(s)'). You are hereby granted a single-user license to use the Software for your personal, noncommercial use only. You may not reproduce, sell, distribute, publish, circulate, or commercially exploit the Software, or any portion thereof, without the written consent of SYBEX and the specific copyright owner(s) of any component software included on this media. * In the event that the Software or components include specific license requirements or end-user agreements, statements of condition, disclaimers, limitations or warranties ('End- User License'), those End-User Licenses supersede the terms and conditions herein as to that particular Software component. Your purchase, acceptance, or use of the Software will constitute your acceptance of such End-User Licenses. * By purchase, use or acceptance of the Software you further agree to comply with all export laws and regulations of the United States as such laws and regulations may exist from time to time.
Software Support Components of the supplemental Software and any offers associated with
them may be supported by the specific Owner(s) of that material, but they are not supported by SYBEX. Information regarding any available support may be obtained from the Owner(s) using the information provided in the appropriate read.me files or listed elsewhere on the media. * Should the manufacturer(s) or other Owner(s) cease to offer support or decline to honor any offer, SYBEX bears no responsibility. This notice concerning support for the Software is provided for your information only. SYBEX is not the agent or principal of the Owner(s), and SYBEX is in no way responsible for providing any support for the Software, nor is it liable or responsible for any support provided, or not provided, by the Owner(s).
Warranty SYBEX warrants the enclosed media to be free of physical defects for a period of
ninety (90) days after purchase. The Software is not available from SYBEX in any other form or media than that enclosed herein or posted to www.sybex.com. If you discover a defect in the media during this warranty period, you may obtain a replacement of identical format at no charge by sending the defective media, postage prepaid, with proof of purchase to: SYBEX Inc. Product Support Department 1151 Marina Village Parkway Alameda, CA 94501 Web: http://www.sybex.com After the 90-day period, you can obtain replacement media of identical format by sending us the defective disk, proof of purchase, and a check or money order for $10, payable to SYBEX.
Disclaimer SYBEX makes no warranty or representation, either expressed or implied, with
respect to the Software or its contents, quality, performance, merchantability, or fitness for a particular purpose. In no event will SYBEX, its distributors, or dealers be liable to you or any other party for direct, indirect, special, incidental, consequential, or other damages arising out of the use of or inability to use the Software or its contents even if advised of the possibility of such damage. In the event that the Software includes an online update feature, SYBEX further disclaims any obligation to provide this feature for any specific duration other than the initial posting. * The exclusion of implied warranties is not permitted by some states. Therefore, the above exclusion may not apply to you. This warranty provides you with specific legal rights; there may be other rights that you may have that vary from state to state. The pricing of the book with the Software by SYBEX reflects the allocation of risk and limitations on liability contained in this agreement of Terms and Conditions.
Shareware Distribution This Software may contain various programs that are distributed as
shareware. Copyright laws apply to both shareware and ordinary commercial software, and the copyright Owner(s) retains all rights. If you try a shareware program and continue using it, you are expected to register it. Individual programs differ on details of trial periods, registration, and payment. Please observe the requirements stated in appropriate files.
Copy Protection The Software in whole or in part may or may not be copy-protected or
encrypted. However, in all cases, reselling or redistributing these files without authorization is expressly forbidden except as specifically provided for by the Owner(s) therein.
About the Authors
Born in a log cabin on the Missouri river… no wait, wrong bio. Born and raised on the mean
streets of New York City, Christian Crumlish matriculated at the school of hard knocks (OK, and Princeton) and has since pursued a number of exciting career options, including typist, gopher, editor, and small-business owner. Since the early '90s Christian has been writing about technology, music, popular culture, and the media. He co-founded a webzine,
Enterzone, in 1994, and a web-solutions consultancy in 1996. He has registered far too many
domain names, most of which will probably never see the light of day. Christian has packaged books and e-books, consulted on matters of information architecture and content-management strategy with Fortune 500 companies, represented other authors as a literary agent, and written nearly 20 books on technology, the Internet, and web development. He maintains the website for this book at http://dreamweaversavvy.com/ . Christian is the lead author of Dreamweaver MX/Fireworks MX Savvy and he recruited the other writers (collectively known as the 'Dream Team') to contribute their specialized expertise and help make this book as well-rounded and packed with useful information as possible.
The Dream Team
The writers who've contributed to this book all have a great deal of experience with Dreamweaver and/or Fireworks and the Web, as well as hands-on experience and thriving training or consulting practices. As the lead author, Christian tried to maintain a consistent voice throughout the book, not to smother the individual voices of the contributors, but to make the experience for you, the reader, as seamless as possible. Some of the chapters were written outright by the contributor while others contain incorporated examples, suggestions, or sections prepared by the contributors.
Joyce J. Evans Joyce J. Evans has over 10 years of experience in educational teaching,
tutorial development, and web design. For additional tutorials and updated information, visit
http://www.JoyceJEvans.com . She has received Editors Choice Awards for her Fireworks 4 f/x & Design book (Coriolis Group, 2001), and has authored numerous graphic design titles
including Dreamweaver MX Complete Course (Hungry Minds, Inc., 2002). She has also contributed to several books, such as Dreamweaver MX Magic (New Riders Publishing, 2002), Fireworks MX Magic (New Riders Publishing, 2002), and Dreamweaver 4: The
Complete Reference (Osborne McGraw-Hill, 2001). Joyce actively writes reviews and articles
for several graphic design magazines.Lucinda Dykes Lucinda Dykes has been writing code and developing websites since 1994,
and she teaches web-related classes at Santa Fe Community College in Santa Fe, New Mexico. Her students claim her most-used phrase is 'Show me the code!' She is the coauthor of XML Schemas (Sybex, 2002) and Mastering XHTML (Sybex, 2002).
Heather Williamson Heather Williamson manages a small Internet and Web Design
consulting firm in northeast Oregon, where she uses Dreamweaver and Fireworks every day in the process of completing her client's requests. She has written numerous books on Internet technology, and she was the compilation editor for XHTML Complete (Sybex, 2002).
Greg Holden Greg Holden has written about Dreamweaver and other web software in the
course of producing 16 books on computer- and Internet-related subjects. He's also the author of Literary Chicago: A Book Lover's Tour of the Windy City ( http://www.literarychicago.com ), which includes walking and driving tours of the city where he lives with his two daughters and an assortment of fish.
Guy Rish Guy Rish is an independent consultant specializing in Web technologies and
object-oriented design. He holds instructor certifications from Rational Software and Macromedia and has taught both in corporate and academic settings. Guy has recently contributed work to books from Sybex and New Riders on ColdFusion MX, Flash MX, and Dreamweaver MX.
Michele Davis Michele Davis is a technical consultant for companies implementing new
documentation for .pdf manuals, websites, marketing brochures, training, and online help. She is savvy in Oracle, Retek, as well as numerous other applications, and she has written and co- authored several trade publications and works of fiction. She can be found on the Web at http://www.krautgrrl.com .
Rita Lewis Rita helped me develop the original outline for this book and helped with some
early drafts of the chapters in Part I . Rita's website is http://lewiswrite.com/ .
Rick Tracewell Rick writes an excellent Dreamweaver column for Mac Design Magazine
and helped with the development of Chapters 13 and 18 .
Acknowledgments
Writing a book this long, this detailed, and this timely is a labor of many hands and minds. I'd
like to try to thank and acknowledge the contributions of those who helped in many different ways. If I have forgotten to mention any names, please forgive me. First, I have to thank Briggs Nisbet for her forbearance during a very difficult and challenging writing schedule. Without her love and support, none of this would have been possible. Next, I would like to acknowledge the work of Macromedia's developers, especially those involved in running the beta test, which was a model of how you'd like beta tests to work. I'm not allowed to go into much detail about that, but I think it's safe to say that they endeavored mightily to address and accommodate the assiduous suggestions made by the dedicated (sometimes to the point of being fanatic) beta testers. I'd like to thank Jacques Vigeant of Enterpulse, whose timely loan of a mostly functioning Dell enabled me to test the Windows version of Dreamweaver MX and capture the lion's share of the screenshots in this book. This book would not have been at all possible in its present form without the contributions of my 'Dream Team' of other writers who stepped in to cover some of the more specialized and tricky features of web development for me, enabling me to put together a better book than I could have done by myself, and on a shorter timeline. Please see the introduction for a full listing about each writer's contribution. I'd also like to thank contributors to the book's CD, namely Alien Skin, Rabi S. Raj, David G. Miles, and Nathan Pitman. For more information about these contributors please see the Introduction. Richard Frankel and Scot Hacker are always available to me with advice and suggestions, and I've benefited from their greater experience countless times. Thanks, guys! Since I am not myself a graphic designer, no matter how hard I try, I'd like to thank Sarah Murgel, Josh Rose, and Dan Shearer, who've taught me a lot about how to read and understand design, and how to solve problems with design. I'd recommend their work to anybody. I'd like to thank people on the Antiweb mailing list who encouraged me and who are always ready with advice when web conundra present themselves. Speaking of mailing lists, I'd also like to thank the Merry Punsters who helped keep my spirits up when the hours were ticking by faster than the pages. Similarly, I'd like to thank the members of the Web conference on the Well, whose lively debates informed a number of the insights I've passed off here in this book as my own!
For Smee
People I don't know personally but whose work and ideas have inspired me include Jeffrey Zeldman and Eric Costello. At Sybex, I'd like to thank Associate Publisher Dan Brodnitz and Acquisitions and Developmental Editor Willem Knibbe, who convinced me to do this book. Willem's developmental editing evoked a much better book from me than I had any right to produce.
Production Editor Liz Burke handled a nearly impossible schedule with aplomb, juggling like mad and still somehow keeping the trains running (mostly) on time. Copyeditor Rebecca Rider read each line with an attentive eye, posing well informed queries and bringing about a degree of consistency I find unattainable on my own. Scott Onstott, the technical editor for this book, gently corrected my wildly unsustainable assertions and added real gold from time to time where additional nuance was welcome. Caryl Gorska created the beautiful book design. Rarely does an author of technical books get to see his or her work looking this good in print. Maureen Forys and Kate Kaminski of Happenstance Type-O-Rama did the actual page makeup, which is tricky in a design as complicated and yet elegant as this book's-I appreciate their skillful work. A lot of other people at Sybex helped on this project without interacting with me directly, and I'd like to acknowledge their contributions (most are listed on the copyright page) as well. Thank you all! I'd like to thank my agent, Danielle Jatlow of Waterside Productions, Inc., for dealing with the paperwork, and Maureen Maloney, also of Waterside, for processing my checks so efficiently.
I learned a lot doing web consulting with the now defunct Groundswell. The Groundswell 'hogs went through a lot together, in the trenches of the dotcom boom-and-bust, and I know I'll be working with people I met there on and off for the rest of my life. Before Groundswell, I knew how to throw together a one-person site, but from my colleagues there, I learned how to collaborate on large-scale production-ready sites. It was quite thrilling. Thanks also to clients at Sprint, Visa USA, Executive Greetings, and All Charities, whose real-world projects gave me all kinds of work to sink my teeth into. Similarly, I'd like to thank the people I've worked with at Enterpulse (another consultancy) which has survived the worst part of the crash and will probably be around for a long time. Lastly, I'd like to thank the people at Open Publishing, for supporting all of my writing work.
Introduction
In the old days, we made websites by typing one tag at a time, uphill both ways, in the snow,
against the wind. You've heard this story before haven't you? Well, we've come a long way baby, and Macromedia's Dreamweaver MX and Fireworks MX now make the process of developing robust, production-ready websites almost easy. This is a book by and for professionals working in any of the fields now affected by the Web, which is to say, the entire global economy. You can work your way through this book from
Chapter 1 to Chapter 32 , or
you might find it more productive to jump around, especially if you are already experienced with web development, or with earlier versions of Dreamweaver or Fireworks.
Who Needs This Book
Most early users of Dreamweaver (and Fireworks) were designers. Interactive designers, perhaps, but still graphic or visual designers trained at art schools and used to working in the agency model (based on the structure of advertising agencies). Today, designers are one of many different job types and backgrounds involved in the development of sites. To get the benefits of working with Dreamweaver, you don't necessarily have to be a designer (although it helps). Other specialties that might make up a collaborative team that could use Dreamweaver and Fireworks as a common development environment include the following:
- Information architects
- Database architects
- Interface designers >Usability exp
- Developers • Coders • Producers •
Project managers
- Art
- Writers • Managers • Agencies •
Consultancies
- Website owners
- Students All should get something of value from this book.
Conventions Used in This Book
In a technical book such as this one, we try to make it as easy as possible for you to pick out the information you need. (Even our parents don't read these books from cover to cover.) To help you find your way through the book as effectively as possible, we've incorporated a number of design elements to call out material that may (or may not) be of interest to you.
New Feature New features in Dreamweaver or Fireworks MX are marked with this margin icon. Reference website http://dreamweaversavvy.com References to the book's website are singled out with this icon. We didn't use this one too often, but we hope you will visit the site ( http://dreamweaversavvy.com ). We think you'll find it a useful complement to the book and a valuable resource as you learn Dreamweaver and Fireworks. On the CD References to the accompanying CD are indicated with this margin icon. In addition, many procedures are broken down into numbered steps, and many chapters also include tutorials that enable you to try out what you've learned with a specific project.
Sidebars
Occasionally, interesting bits of information that may not be essential to your understanding of Dreamweaver or Fireworks will be boxed as standalone sidebars, like so. These are usually much longer than notes and you can feel free to skip over them if you are in a hurry to get to the next paragraph.
Because there are many different ways of working on the Web and you may not need to make use of every possible feature of Dreamweaver, you should feel free to skip around from chapter to chapter as necessary. To minimize redundancy and pack as much fresh information as possible into this book, we've liberally included cross-references throughout to suggest when you might profit from looking at another chapter.
How This Book Is Organized
This book has six parts composed of 32 chapters and one appendix. Here's a quick rundown of what you'll find inside:
Part I * Planning Your project and Setting up Dreamweaver This part is all about getting your project started and your site set up to optimize the development process. Chapter 1 covers what to do before you even take Dreamweaver out of the box, including the essentials of website planning and preparation. Chapter 2 breaks down
web pages into their component parts, based on how Dreamweaver works with HTML files and other web documents.
Chapter 3 shows you how to get the Dreamweaver workspace set up for efficiency and comfort, and how to set up a website for the first time. Chapter 4
explains how to use sitewide components-templates, assets, and library items-to save effort and maintain consistency.
Part II * Using Fireworks This part is all about helping you get your graphical design work done with Fireworks. Chapter 5 gets you started with Fireworks. Chapter 6 covers the elements of a Fireworks file
(strokes, fills, and live effects). Chapters 7 and
8 cover vector and bitmap images and tools; Fireworks enables you to use both types of effects together.
Chapter 9 shows you how to design menu bars and other navigation objects. Chapter 10 explains how to prepare images for
exporting into Dreamweaver by cutting them into slices (when necessary) and how to optimize them for rapid download. (Joyce J. Evans handled this entire part.)
Part III * Building a Web Page This part is the heart of the matter: how to assemble the essential elements needed to construct a web page. Chapter 11 covers layout with tables or layers. Chapter 12 is all about working with text. Chapter 13 shows you how to apply what you learned in Part II by adding graphics to your pages in Dreamweaver. Chapter 14 explains how to set up framesets and work with frames. Chapter 15 discusses how to use Dreamweaver's CSS 2.0 (Cascading Style Sheets) features to develop cutting-edge standards-compliant designs. Chapter 16 covers how to insert
local and external hyperlinks into your pages. (Greg Holden did the heavy lifting for Chapters
11 and 14 .)
Part IV * Inserting Dynamic Content This part takes you a step beyond flat, static web pages and shows you how to add movement and interactivity to your pages. Chapter 17 discusses adding multimedia objects to your pages.
Chapter 18 shows you how to incorporate 'rollovers,' dynamic navigation bars, and jump menus. Chapter 19 introduces Dreamweaver's behaviors-pre-made JavaScript routines you can add to your pages without learning how to code. Chapter 20 covers everything you need to know about web forms. Chapter 21 is a little bonus that walks you through developing an
e-commerce site. (Lucinda Dykes handled Chapters 17 and
19 , Michele Davis contributed to
Chapter 18 , Heather Williamson put together Chapter 20 , and Greg Holden wrote Chapter 21 .)
Part V * Developing Web Applications This part takes you into the world of dynamic, database-backed websites, also known as web
applications. At this point, you are developing software that happens to run over web protocols.
Chapter 22 gets you started setting up web applications with Dreamweaver. Chapter 23 helps you customize your coding environment. Chapter 24 is a crash course in database development for the Web. Chapter 25 shows you how to use Dreamweaver with ColdFusion sites. Chapters 26 and 27 get you up to speed with some of the most recently
emerged web standards: using XML, XHTML, .NET, and the concept of web services in general. (Michele Davis did
Chapter 24 , Guy Rish pinch-hit for
Chapter 25 , and Lucinda Dykes stepped in to handle Chapters 26 and27 .)
Part VI * Site Administration from Start to Finish This part is about wrapping up your development project and handing over a site that doesn'tjust look cool but actually works!
Chapter 28 explains how to set up administration modules for managing a new site. Chapter 29 shows how to verify browser compatibility before going live.
Chapter 30 discusses the issues involved with launching a site or turning it over to a
client. Chapter 31 covers maintaining a site long after the hoopla of opening day has passed. And Chapter 32 is a bonus, explaining how to customize and extend Dreamweaver to get themaximum use out of it as your primary web development tool. (Michele Davis put together
Chapter 28 , Lucinda Dykes handled Chapter 29 , Greg Holden composed Chapter 31 , and Heather Williamson took care of Chapter 32 .) Appendices * Web Resources The Appendix includes a set of useful Dreamweaver resources that are available on the Web. We'll update this information and add to it from time to time at the book's website (see 'Visit Our Website,' later in this introduction). Appendix B includes a comprehensive list of keyboard shortcuts for Dreamweaver MX. Note to Macintosh (and PC) Users I wish we could have done two editions of this book, one just for Windows users and one just
for Mac users. Although I work on both systems myself, out of necessity, my 'home base' computer is a titanium PowerBook G4 (a 'tiBook'), running OS X, and that should tell you where my aesthetic preferences lie. Unfortunately for me, the majority of users of Dreamweaver and Fireworks are, and the majority of readers of this book will turn out to be, Windows users, and so most of the illustrations in this book show either Windows XP or Windows NT screens.
Rest assured, though, this book is perfectly designed for use with a Mac. I've personally tested every command sequence on my PowerBook, and where necessary, I've included separate instructions or screen shots to illustrate when the Macintosh version of Dreamweaver looks or functions differently in some way from the PC version. As a nod to the cutting-edge nature of many Mac designers and developers, I've also done all the screen shots in
(' Cascading Style Sheets ') on the Mac. For PC users, this chapter again is perfectly serviceable, but the minor inconvenience of viewing the look-and-feel of another OS is on the other foot this time.
About the CD
The accompanying CD includes demos, extensions, tutorial files, and example files:
Demos We've included demo versions of the MX Studio programs, including Dreamweaver
MX, Fireworks MX, Flash MX, and ColdFusion MX, so that you can try out any of the programs you don't currently own. We've also included Alien Skin's Splat! Demo, which is referred to in
Part II . An all-new, user-requested, Photoshop filter set, Splat! delivers frames,
textures, edges, borders, mosaics, and more in Eye Candy's easy-to-use interface. Add impact to your images with Splat!
Extensions As a bonus, we've included some extensions for both Dreamweaver and Fireworks.
Chapter 32 explains how to install extensions. In most of these cases, we've also
included links to the developers' websites, so that you can find updated and additional new extensions online. Extension contributors include Rabi S. Raj ( http://www.dreamweaver-extensions.com ), David G. Miles, ( http://www.z3roadster.net ), and Nathan Pitman ( http://www.dovelop.com ). Rabi Raj says, 'I created all these extensions during my free time at home. My intention is to help creative people who do not have programming background and web designers who want to save time on routine coding.' David Miles is a web developer based in the United Kingdom. In addition to a passion for web application development and for Dreamweaver, David is often found to be helping others on the Macromedia Newsgroups. In his spare time fast cars and developing his own web site are high on the list of priorities. David has produced a number of frequently downloaded and used extensions. Four years of training in 3-dimensional design equipped Nathan Pitman for a career in new media. After diving in at the deep end with his first commercial project; the official Virgin Global Challenger web site, he's not looked back. Nathan is currently working as a Creative Developer for a UK-based agency and investing much of his spare time in developing extensions for Dreamweaver and Fireworks.
Tutorials Most of the tutorials in this book require the use of files supplied on this CD (and
on the book's website). To try out a tutorial, copy the files from the appropriate chapter to a new folder on your own computer or network and then follow the steps of the tutorial.
Visit Our Website
This book has a website that can be reached at http://dreamweaverfireworkssavvy.com/ or
http://dreamweaversavvy.com/ . (I suggested that we register both the long form and the
shortened domain name, not to leave out Fireworks users but just to save us all some typing!) The site includes copies of the tutorial and example files; news and developments about Dreamweaver, Fireworks, web design, and information architecture; corrections and updates for the book; and a way to suggest improvements for the next edition.
Join the Discussion
There's a Yahoo!Groups discussion list for this book. Any reader of the book is welcome to join in on the discussion. To visit the group's web page, go to http://groups.yahoo.com/ . (To join the list, go directly to http://groups.yahoo.com/group/dreamweaversavvy/join/ -you'll need to set up a Yahoo! ID to participate.)
Contact the Author
To contact the author directly by e-mail, you can send me mail at < comment@fireweaver.com >. I will respond when possible.
Part I: Planning Your Project and Setting Up Dreamweaver Chapter 1: Planning and Preparing for a Web Project Chapter 2: Web Pages Deconstructed Chapter 3: Setting Up Your Workspace and Your Site Chapter 4: Saving Labor with Templates and Libraries Although it might be more exhilarating to start designing web pages on the first day of your
project, experience has taught us that a successful web development project starts with some strategy. First you want to take a step back and look at the big picture. What is your site or application going to do? Who's going to use it? How does it have to work? How should it be organized? Next, to make the most of Dreamweaver, take a little time to understand how the software creates, interprets, and displays web pages. Get the software set up in a way that suits your workflow, and then finally start developing your site. Even then, before you get into the process of building actual pages, you're going to need to spend some time setting up your site in Dreamweaver, and creating the shared templates, library items, and other assets that will enable a rapid, efficient development process.
Chapter 1: Planning and Preparing for a
Overview Dreamweaver and Fireworks can help your project run more smoothly whether you are
building a website from scratch all by yourself for yourself, collaborating with a multidisciplinary team to deliver a web application for a client, or anything in between. Regardless of the scope of your project, take some time in advance to think through the
architecture of your site (fundamentally, its site map), develop a look-and-feel (graphic
design and interface); and gather the content. When this preliminary work is done, you can plunge into the development, staging, launching, and maintenance of the site. This chapter assists you in sorting through the elements of your preferred methodology before you get down to brass tacks with Dreamweaver and Fireworks. Topics addressed in this chapter include:
- When to use Dreamweaver and Fireworks •
Nailing down your process
- Gathering requirements for your web pro
- Designing the project's information architecture
When to Use Dreamweaver and Fireworks
When we're grandparents, the little kids are going to roll their eyes whenever we start reminiscing about 'the dawn of the Web' when we had to hand-code our websites. We'll say, 'That's right, kids, we typed all those little angle brackets into text processors with no validation or nothing! We didn't have these fancy-schmancy what-you-see-is-what-you-get, self-correcting, self-updating, automated whatchamacallits.' And they'll be right to roll their eyes. Who cares about how these things used to be done? It was ridiculous that we ever had to work that way. 'Why, if we moved one page, we had to find all the links referring to that page and then manually change them. Why, one time....' OK, there we go again. Anyway, the point is, Dreamweaver is a really cool way to keep an entire web project in the palm of your hand (or at least on the hard drive of your laptop), and Fireworks is a unique tool expressly designed for the development and optimization of web graphics. Dreamweaver goes beyond enabling you to design web pages visually-it helps you manage your entire site from the top down. Best of all, it enables a team of people to work together on the same project without accidentally munging each other's work.
Note Munging means over-writing or otherwise erasing or corrupting an existing file. Use this around your techy-er colleagues and they'll give you a jot more respect. If you are working with collaborators, chances are not everyone is going to do their work in Dreamweaver. That's OK. Dreamweaver produces clean code that even the most hardcore code jockey can't complain about. From the point of view of programmers and technical architects, you're working on the front end of the site, or the presentation layer (not to be confused with other kinds of layers, which we'll get to later). Sure, if you've got UltraDev, you may be delving into all kinds of database calls and scripted routines, but chances are you'll be handing off your front-end design to someone doing the back-end work somewhere along the way.
With Dreamweaver, though, you can keep your part of the project all in one place, and there's no reason not to do all of your work inside the application (at least after you're done doodling on cocktail napkins). Fireworks is where you'll develop and refine the graphical look-and-feel for the site-the site's logo, the graphical elements, the navigational hoo-ha's, and so on. The entire site won't live inside Fireworks the way it will in Dreamweaver, but because they're both Macromedia products designed to work together, any graphics you develop or import into Fireworks will flow easily into your site templates and pages over on the Dreamweaver side.
When to Use Flash and Shockwave
Other web-oriented Macromedia products that play well with Dreamweaver and Fireworks include Flash and Shockwave. Both of these products are descendents of Macromedia Director, an application used to design interactive, well, applications. Chances are, last time you stuck a CD in your drive and watched a little promo or clicked on a bulbous shiny set of interface buttons, they were developed in Director. When the Web came along, Macromedia rolled out Shockwave as a way of adapting Director-like material to the vicissitudes of the Web (bandwidth limitations, mainly, as well as the nasty habit of web users who click away when you want them to sit still-something people developing for CD-ROM never had to worry about). But Flash is every designer's favorite tool for developing interactive movies, animations, and every other kind of beast that slithers, crawls, runs, or flies across your screen. Optimized for streaming over the Web, and widely accepted as a format, Flash is the first choice when you need that level of production values, or when you want your users to be able to, say, play a video game at your website. Artists love Flash too (see http://www.snarg.net/ for a hypnotic example of what we're talking about).
And clients love Flash too, or at least they usually do when you demo the little bugger for them running on your laptop. They don't necessarily love it quite so much when users decide that the site is too slow or too Flash-y and fail to stick around to register for the great bargain or stock their shopping cart with whatever widgets your client is trying to e-commercially sell.
So, having sung the praises of Flash, let us now warn you to use it sparingly and when it is called for by the project's requirements, and not just because you finished a course on interactive design and need something 'rilly kewl' for your portfolio. Needless to say, Shockwave and Flash are sold separately, but also play well with Dreamweaver. See Chapter 20 for more on such dynamic, animatronic, interactive magic.
Getting Your Process Squared Away
Before you fire up the software and start cranking out web pages, take a step back to sort out your process (ur, methodology). Nowadays, most web design and development projects are collaborative and require a lot of coordination among team members. Yes, if you're running a one-person project or shop, you don't have to answer to anybody, you don't have to use anyone else's lingo, you don't have to adhere to anyone's deadlines, and no one is going to what part of the project depends on other parts being completed first (sometimes referred to, for short, as dependencies), and what your timeline and milestones are going to need to be...unless maybe you're building a website for your cat and there's no deadline. In most situations, you've got a 'someone' to answer to, whether it's your boss, your client, or simply your audience. That's right, web design requires you to anticipate and meet your audience's needs; that is, if you expect them to come to your site, use your interactive application, register with your enterprise, or come back again after the first visit. As the bard once said, 'You're gonna have to serve somebody.' Furthermore, in most commercial projects, you're going to have to collaborate with somebody, or with a whole team of somebodies. There might be a branding expert, a writer (perhaps called a content developer), some developers (technical architects, front-end scripters, back-end coders, middleware specialists, and so on), and possibly a project manager. Oh, yes, and a visual designer or graphic designer. But maybe that's you? You may be working with people who cut their teeth in the field of professional services, interactive or advertising agencies, publishing, and software development. You're going to discover that everyone has a different name for the same thing (is it a storyboard or a
wireframe, a site map or thumbnail series, use cases or process flows?), and most people see
the project revolving around their discipline. In any collaborative project, some time-at least an hour-should be spent up front hashing out the division of labor, the dependencies (such as, 'I can't develop the content inventory until you finish the site map'), the points of handoff or turnover, and the milestones and deliverables expected by the client (even if the client is just your boss). For more ideas and discussion about various web-development methodologies (and there are a number of equally valid approaches), check out the author-created website for this book, at
http://dreamweaversavvy.com/ .
Gathering Requirements
How are you going to know what to put into your site or application unless you spend some time and effort learning the needs of your website's or application's eventual users? (Consultants call this stage of a project discovery-not to be confused with lawyers pawing through your files.) This discovery phase should involve interviewing representatives of every audience type or anyone else with a stake in the usefulness and success of the site. This means not just your boss or client, your client's boss or team members, and other obvious stakeholders, but also, if at all possible, some potential users of the site-often customers, partners, or vendors. Find out what they want. Your client may not always know what their users want as well as they think they do. Also, it makes a killer argument when the client has gotten attached to some horrible idea to be able to say, 'But your site's users don't want that. See, here in these interview notes, they say they'd never come back if you had that as part of your site.' This leads to the first commandment of web design (perhaps the only commandment, we're not sure).
Know Thy Audience
What if they built a web site and nobody came? They did. And nobody did. It was called the dotcom bubble. Maybe you missed it? Just because you can sell your boss, or your client, or a venture capitalist (VC) on an idea doesn't mean that people are going to come and pay you to keep executing that idea. Understand your audience. Go meet them if possible. Interview them, but also watch them as they work. Study what they like and dislike. Learn as much as you can about usability. If your ultimate product isn't usable, guess what? People won't use it. If your site doesn't meet a need, then no one will need it. This sounds simple, but a lot of VC money went down the drain because people wearing the right shade of blue shirts who knew consultantspeak put together some really hep-looking Powerpoints and 10-page business plans with no revenue model.
OK, that's not really fair. When tulips are the rage, everybody buys tulips. But don't end up like the dotcommers taking their one-way U-Hauls back out of the San Francisco Bay Area even as we type this. Think about the needs and desires of your audience. Understand them. What are they reaching out for? How can you satisfy those needs? Get that straight and the rest of the project will practically take care of itself.
Getting the Information Architecture Right Information architecture is a $10 word that means how your site's information is organized.
What do people see first when they come in the front door? How many levels down is certain information buried? How many clicks does it take to get to crucial information? What is the structure of the navigation? Dreamweaver won't figure any of this out for you. (And Fireworks? Fuggedaboudit). Sure, once you've sorted it out, Dreamweaver is an awesome tool for maintaining the site map, navigation links, and so on. But you have to do the hard thinking first.
Ensuring That Your Site Is Accessible
One of the most important changes to the specifications for HTML in Version 4.0 is the inclusion of requirements that your site be accessible to people with disabilities. This means that your work can be used and appreciated by the estimated 10 percent of the world's population with some sort of physical disability that makes it difficult to access most websites. The World Wide Web Consortium (W3C) has set up a special organization and website that provides helpful checklists, guidelines, and ideas in support of the Web Accessibility Initiative (WAI). Check out http://www.w3.org/WAI/ to find out how to insert accessibility into your website relatively painlessly. Another very useful site that serves as both an example of a well designed, accessible website and as a tutorial is the Web Accessibility In Mind (WebAIM) site ( ).
http://www.webaim.org/
Fortunately, because Dreamweaver is so flexible and easy to use, you can make mistakes when you start and still correct them later on in the project. That's right, no matter how carefully you gather your requirements, know thy audience, or massage your client, guess
th