Dreamweaver CS3 For Dummies®
Published by
Wiley Publishing, Inc.
111 River St.
Hoboken, NJ 07030-5774
www.wiley.com
www.wiley.com
Copyright © 2007 by Wiley Publishing, Inc., Indianapolis, Indiana
Published by Wiley Publishing, Inc., Indianapolis, Indiana
Published simultaneously in Canada
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.
Trademarks: Wiley, the Wiley Publishing logo, For Dummies, the Dummies Man logo, A Reference for the Rest of Us!, The Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com, 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. Dreamweaver is a registered trademark 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.
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, 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.
For technical support, please visit www.wiley.com/techsupport.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.
Library of Congress Control Number: 2007924226
ISBN: 978-0-470-11490-2
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
Janine Warner is a bestselling author, journalist, and Internet consultant.
Since 1995, she’s written and coauthored more than a dozen books about the Internet, including Creating Family Web Sites For Dummies and Teach Yourself Dreamweaver Visually.
She’s also the host of a series of training videos on Web design for Total Training, a pioneer in innovative video-based training. Her first video on Dreamweaver has won two industry awards, and excerpts of her videos are features at both Microsoft.com and Adobe.com.
An award-winning journalist, her articles and columns have appeared in a variety of publications, including The Miami Herald, Shape Magazine, and the Pulitzer Prize-winning Point Reyes Light newspaper. She also writes a regular column about Dreamweaver for Layers Magazine.
Janine is a popular speaker at conferences and events throughout the United States and abroad, and she’s taught online journalism courses at the University of Southern California Annenberg School for Communication and the University of Miami.
Warner is a special guest reporter for the consumer technology show Into Tomorrow (a syndicated program that reaches more than one million weekly listeners), and she has been a featured guest on television news and technology programs on ABC, NBC, and TechTV.
Warner has extensive Internet experience working on large and small Web sites. From 1994 to 1998, she ran Visiontec Communications, a Web design business in Northern California, where she worked for a diverse group of clients including Levi Strauss & Co., AirTouch International, Beth’s Desserts, and many other small and medium-size businesses.
In 1998, she joined The Miami Herald as their Online Managing Editor. A year later, she was promoted to Director of New Media and managed a team of designers, programmers, journalists, and sales staff. She left that position to serve as Director of Latin American Operations for CNET Networks, an international technology media company.
Warner earned a degree in journalism and Spanish from the University of Massachusetts, Amherst, and spent the first several years of her career in Northern California as a reporter and editor.
To learn more, visit www.JCWarner.com.
To all those who dare to dream about the possibilities of the Web: May this book make your work easier so you can make those dreams come true.
I love teaching Web design because it’s so much fun to see what everyone creates on the Internet. Most of all, I want to thank all the people who have read my books or watched my videos over the years and gone on to create Web sites. You are my greatest inspiration. Thank you, thank you, thank you.
Thanks to my love, David LaFontaine, whose patience and support have kept me fed, loved, and entertained. Thanks also to Duce, Yuki, and Faust.
Thanks to Frank Vera, a skilled programmer who deserves credit for revising the three most complex chapters in this book, Chapters 13, 14, and 15, and helping me test the dynamic database features in Dreamweaver.
Thanks to Web designers Mariana Davi Cheng (DaviDesign.com), Susie Gardner (HopStudios.com), Sheila Castelli (DigitalCottage.com), and Anissa Thompson (Anissat.com), who designed many of the Web sites featured in the examples in this book.
Thanks to the entire editorial team: Travis Smith for his superb tech editing; Susan Pink for catching the details and improving the prose; and Bob Woerner for shepherding this book through the development and publishing process.
Over the years, I’ve thanked many people in my books — family, friends, teachers, and mentors — but I have been graced by so many wonderful people now that no publisher will give me enough pages to thank them all. So let me conclude by thanking everyone who has ever helped me with a Web site, a book, or any other aspect of writing and Internet research, just so I can go to sleep tonight and know I haven’t forgotten anyone.
We’re proud of this book; please send us your comments through our online registration form located at www.dummies.com/register/.
Some of the people who helped bring this book to market include the following:
Acquisitions, Editorial, and Media Development
Project Editor: Susan Pink
(Previous Edition: Rebecca Huehls)
Acquisitions Editor: Bob Woerner
Technical Editor: Travis Smith
Editorial Manager: Jodi Jensen
Media Development Specialists: Angela Denny, Kate Jenkins, Steven Kudirka, Kit Malone
Media Development Coordinator: Laura Atkinson
Media Project Supervisor: Laura Moss
Media Development Manager: Laura VanWinkle
Media Development Associate Producer: Richard Graves
Editorial Assistant: Amanda Foxworth
Sr. Editorial Assistant: Cherie Case
Cartoons: Rich Tennant (www.the5thwave.com)
Composition Services
Project Coordinator: Heather Kolter
Layout and Graphics: Claudia Bell, Carl Byers, Joyce Haughey, Barbara Moore, Laura Pence, Rashell Smith, Ronald Terry
Proofreaders: John Greenough
Indexer: Aptara
Anniversary Logo Design: Richard Pacifico
Publishing and Editorial for Technology Dummies
Richard Swadley, Vice President and Executive Group Publisher
Andy Cummings, Vice President and Publisher
Mary Bednarek, Executive Acquisitions Director
Mary C. Corder, Editorial Director
Publishing for Consumer Dummies
Diane Graves Steele, Vice President and Publisher
Joyce Pepple, Acquisitions Director
Composition Services
Gerry Fahey, Vice President of Production Services
Debbie Stailey, Director of Composition Services
Title
Introduction
About This Book
What’s New in Dreamweaver CS3?
Using Dreamweaver on a Mac or PC
Conventions Used in This Book
What You’re Not to Read
Foolish Assumptions
How This Book Is Organized
Icons Used in This Book
Where to Go from Here
Part I : Creating Great Web Sites
Chapter 1: The Many Ways to Design a Web Page
Comparing Web Designs
Understanding Browser Differences
Developing a New Site
Customizing the Workspace in Dreamweaver CS3
Chapter 2: Opening and Creating Sites in Dreamweaver
Setting Up a New or Existing Site
Creating New Pages
Naming Web Pages
Setting Links
Changing Page Properties
Adding Meta Tags for Search Engines
Previewing Your Page in a Browser
Chapter 3: Adding Graphics
Creating and Optimizing Web Graphics
Inserting Images in Dreamweaver
Aligning Images on a Page
Image Editing in Dreamweaver
Inserting a Background Image
Creating Image Maps
Chapter 4: Managing, Testing, and Publishing a Site
Testing Your Site in Different Browsers
Testing Your Work with the Site Reporting Features
Finding and Fixing Broken Links
Publishing Your Site to a Web Server
Synchronizing Local and Remote Sites
Setting Cloaking Options
Making the Most of Dreamweaver’s Site Management Features
Remembering Your History
Using the Quick Tag Editor
Part II : Appreciating Web Design Options
Chapter 5: Cascading Style Sheets
Introducing Cascading Style Sheets
Creating Styles in Dreamweaver
Comparing CSS Rule Options
Using External Style Sheets
Using Design Time Style Sheets
Chapter 6: Creating CSS Layouts
Using CSS for Page Layout
Creating a CSS Layout
Creating Styles to Align Images
Styling an Unordered List for Links
Working with AP Divs
Using Dreamweaver’s CSS Layouts
Chapter 7: Coming to the HTML Table
Creating HTML Tables
Creating Tables in Standard Mode
Sorting Table Data
Importing Table Data from Other Programs
Using Tables for Spacing and Alignment
Chapter 8: Framing Your Pages
Appreciating HTML Frames
Understanding How Frames Work
Setting Targets and Links in Frames
Changing Frame Properties
Chapter 9: Coordinating Your Design Work
Templating Your Type
Creating Templates
Making Global Changes with Templates
Reusing Elements with the Library Feature
Creating Predesigned Pages with Dreamweaver’s Design Files
Using a Tracing Image to Guide Your Layout
Part III : Making It Cool with Multimedia and JavaScript
Chapter 10: Adding Interactivity with Behaviors
Creating a Rollover Image
Creating Swaps with Multiple Images
Using the Open Browser Window Behavior
Installing New Extensions for Behaviors
Chapter 11: Showing Off with Multimedia
Understanding Multimedia Players
Working with Adobe Flash
Working with Video and Audio on the Web
Adding Audio and Video Files to Web Pages
Working with Java
Use PDFs When They’re Warranted
Chapter 12: Forms Follow Function
Creating HTML Forms
Understanding How CGI Scripts Work
Part IV : Working with Dynamic Content
Chapter 13: Building a Dynamic Web Site: Getting Started
Understanding the Dynamic Web Site
Talking the Talk: Key Concepts
Dynamic Content Technologies Supported by Dreamweaver
Serving Dynamic Web Pages
Chapter 14: Bringing Data into the Mix
Exploring the Panels
Creating a Recordset
Using a Recordset on Your Page
Repeating a Region
Adding a Dynamic Image
Binding the Image
Adding Navigation to a Dynamic Page
Creating a Master-Detail Page Set
Chapter 15: Using Forms to Manage Your Dynamic Web Site
Establishing User Authentication
Securing Sensitive Information on Your Web Site
Searching for Database Records
Editing a Database from a Browser
E-Commerce Basics
Part V : The Part of Tens
Chapter 16: Ten Resources You May Need
Registering a Domain Name
Choosing a Web Hosting Service
Selling Stuff on the Web
Keeping Track of Traffic
Survey Your Visitors
What Font Is That?
Save Time with Templates
Keep Up with Web Standards at W3.org
Extend Dreamweaver at Adobe.com
Dress Up the Address Bar with a Favicon
Find Out More from Other Web Designers
Chapter 17: Ten Timesaving Tips
Design for Your Audience
Create a Consistent Design
Follow the Three Clicks Rule
Get a Head Start on Your Designs
Split the View
Design in a Flash
Find Functional Fonts
Keep Frequently Used Items Handy
Be Prepared for Fast Updates
Back It Up
Chapter 18: Ten Great Web Sites Designed in Dreamweaver
An Artist Showcase
A Powerful Yoga Site
Sage Words on the Web
The Memory Keeper’s Daughter
Lights, Camera, Multimedia
A Sure Shot of Entertainment
A Delicious Blog Edited in Dreamweaver
Showcasing a Portfolio
My Growing Digital Family
Yours Truly
: Further Reading
In the ten-plus years that I’ve been writing about Web design, I’ve seen many changes — from the early days (before Dreamweaver even existed) when you could create only simple pages with HTML 1.0, to the elaborate designs you can create with Dreamweaver today using XHTML, CSS, JavaScript, multimedia, and more.
If you’re not sure what those acronyms mean yet, don’t worry. I remember what it was like to learn all this stuff, too, so I designed this book to intro-duce you to the basic concepts. But I also want to prepare you for the ever-changing world of Web design, so I show you how to use Dreamweaver to create Web sites that take advantage of the latest advances in Web technologies, such as CSS and XHMTL.
One of the challenges of Web design today is that Web pages are not only displayed on different kinds of computers but are also being downloaded to computers with monitors that are as big as wide-screen televisions and as small as cell phones. As a result, creating Web sites that look good to all visitors is a lot more complex than it used to be, and standards have become a lot more important. That’s why you find out not only how to use all the great features in Dreamweaver but also how to determine which of those features will best serve your goals and your audience.
I designed Dreamweaver CS3 For Dummies to help you find the answers you need when you need them. You don’t have to read this book cover to cover, and you certainly don’t have to memorize it. Consider this a quick study guide and a reference you can return to. Each section stands alone, giving you easy answers to specific questions and step-by-step instructions for common tasks.
Want to find out how to change the background color in Page Properties, design styles to align images, or add an interactive photo gallery with the Swap Image behavior? Jump right in and go directly to the section that most interests you. And don’t worry about getting sand on this book if you do take it to the beach or coffee spilled on the pages if you bring it with you to breakfast — I promise it won’t complain!
Dreamweaver’s high-end features make it the preferred choice for professional Web designers, and its easy-to-use graphical interface makes it popular among novices and hobbyists as well. With each new version, Dreamweaver has become more powerful and feature rich, but this upgrade is arguably the most dramatic, with the following new features:
Better integration with Photoshop, Flash, and other design programs. Some of the coolest improvements to Dreamweaver CS3 are due to the fact that Macromedia (the company that created all previous versions of Dreamweaver) was acquired by Adobe (a company well-known for creating other popular programs, including Photoshop, Illustrator, and InDesign). As a result, programs that used to belong to Macromedia, including Fireworks and Flash, are now fully integrated with programs created by Adobe, such as Photoshop and Acrobat. And that means you can now work much more efficiently with this popular collection of tools, creating graphics in Photoshop and moving them into Dreamweaver with cut-and-paste ease. If you’re an experienced Photoshop user, you may already be familiar with Adobe’s Bridge program, which makes it easy to share images and other files among programs. With CS3, the Bridge now supports files from a wide collection of programs, including Dreamweaver.
Enhanced CSS support. Other enhancements to Dreamweaver CS3 include better CSS support and new CSS features and templates. Creating Web sites with Cascading Style Sheets is by far the best option today. That’s why so many of the improvements to Dreamweaver are related to CSS and why I’ve dedicated more of this book than ever to the best strategies for creating styles and CSS layouts.
A built-in device emulator. When it comes to testing your Web designs, one of the most exciting additions to Dreamweaver CS3 is the new device emulator (shown at the end of in Chapter 2). Adobe Device Central comes with a collection of emulators that let you see how your pages will look when displayed in a variety of cell phone brands and models, and you can add more emulators as they become available.
Advances in dynamic site development. The most advanced features in Dreamweaver CS3 are designed to help you create database-driven Web sites using a broad range of technologies. Whether you prefer PHP, ColdFusion, ASP, or any of several other options, you can use Dreamweaver to create these kinds of advanced site technologies. If you’re still not sure how dynamic sites work or their advantages, you’ll find an introduction to database development in Chapter 13 and instructions for defining data sources, displaying data in Web pages, and building master pages in Chapters 13 and 15.
Dreamweaver works almost identically on Macintosh or Windows computers. In these two figures, you see the same Web page opened in design view on a Mac and a PC. To keep screenshots consistent throughout this book, I’ve used a computer running Windows XP. However, I’ve tested the program on both platforms, and whenever there is a difference in how a feature works, I indicate that difference in the instructions.
|
Figure 1: The front page of my JCWarner.com Web site open in Dreamweaver CS3 on a Macintosh. |
|
|
Figure 2: The front page of my JCWarner.com Web site open in Dreamweaver CS3 on a computer running Windows XP. |
|
Keeping things consistent makes them easier to understand. In this book, those consistent elements are conventions. Notice how the word conventions is in italics? That’s a convention I use frequently. I put new terms in italics and then define them so that you know what they mean.
When I type URLs (Web addresses) or e-mail addresses within regular paragraph text, they look like this: www.jcwarner.com. Sometimes, however, I set URLs off on their own line, like this:
www.jcwarner.com
That’s so you can easily spot them on a page if you want to type them into your browser to visit a site. I also assume that your Web browser doesn’t require the introductory http:// for Web addresses. If you use an older browser, remember to type this before the address (also make sure you include that part of the address when you’re creating links in Dreamweaver).
Even though Dreamweaver makes knowing HTML code unnecessary, you may want to wade into HTML waters occasionally. I include HTML code in this book when I think it can help you better understand how things work in design view. Sometimes it’s easier to remove or edit a tag in code view than design view. When I do provide examples, such as the following code which links a URL to a Web page, I set off the HTML in the same monospaced type as URLs:
<A HREF=”http://www.jcwarner.com”>Janine’s Web Site</A>
When I introduce you to a new set of features, such as options in a dialog box, I set these items apart with bullets so that you can see that they’re all related. When I want you to follow instructions, I use numbered steps to walk you through the process.
If you’re like most of the Web designers I know, you don’t have time to wade through a thick book before you start working on your Web site. That’s why I wrote Dreamweaver CS3 For Dummies in a way that makes it easy for you to find the answers you need quickly. You don’t have to read this book cover to cover. If you’re in a hurry, go right to the information you need most and then get back to work. If you’re new to Web design, or you want to know the intricacies of Dreamweaver, skim through the chapters to get an overview and then go back and read what’s most relevant to your project in greater detail. Whether you are building a simple site for the first time or working to redesign a complex site for the umpteenth time, you’ll find everything you need in these pages.
Although Dreamweaver is designed for professional developers, I don’t assume you’re a pro — at least not yet. In keeping with the philosophy behind the For Dummies series, this book is an easy-to-use guide designed for readers with a wide range of experience. Being interested in Web design and wanting to create a Web site is key, but that desire is all that I expect from you.
If you’re an experienced Web designer, Dreamweaver CS3 For Dummies is an ideal reference for you because it gets you working quickly with this program, starting with basic Web page design features and progressing to more advanced options. If you’re new to Web design, this book walks you through all you need to know to create a Web site, from creating a new page to publishing your finished project on the Web.
To ease you through the learning curve associated with any new program, I organized Dreamweaver CS3 For Dummies to be a complete reference. This section provides a breakdown of the five parts of the book and what you can find in each one. Each chapter walks you through the features of Dreamweaver step by step, providing tips and helping you understand the vocabulary of Web design as you go along.
Part I introduces you to the basic concepts of Web design as well as the main features of Dreamweaver. In Chapter 1, I give you an overview of the many approaches to Web design, so you can best determine how you want to build your Web site before you get into the details of which features in Dreamweaver are best suited to any particular design approach. In Chapter 2, I start you on the road to your first Web site, including creating a new site, importing an existing site, creating new Web pages, applying basic formatting, and setting links. To make this chapter more interesting and help you see how all these features come together, I walk you through creating a real Web page as I show you how the features work.
In Chapter 3, we move onto graphics, with an introduction to creating graphics for the Web, an overview of the differences in formats (GIFs, JPEGs, and PNG files), and detailed instructions for adding and positioning graphics in your pages. In Chapter 4, you discover Dreamweaver’s testing and publishing features, so you can start uploading pages to the Internet as soon as you’re ready. If you work with a team of designers, you may be especially interested in the Check In/Out feature, which makes it easier to manage a site when several people are working together. You’ll also find instructions for using integrated e-mail for communicating with other team members.
Chapter 5 provides an overview of how Cascading Style Sheets work and how they can save you time. CSS has become the way to create page designs and manage formatting on Web pages, and these features have been nicely improved in Dreamweaver CS3. In this chapter, you find descriptions of the style definition options available in Dreamweaver as well as instructions for creating and applying styles. In Chapter 6, I take you further into CSS, introducing you to the power of <div> tags and how to create CSS layouts. Here you’ll find instructions for working with Dreamweaver’s Layers features, as well as how to create centered CSS designs and fluid layouts.
In Chapter 7, you discover how to use HTML table features. In Chapter 8, you find all you need to know about designing a site with frames and iframes. (This chapter also includes tips about when frames are useful and why they should sometimes be avoided.)
In Chapter 9, I introduce you to some of my favorite Dreamweaver features, including sophisticated template capabilities, that enable you to create more consistent designs and make global updates across many pages at once. I also cover Dreamweaver’s Library items, which can be used to place and update commonly used elements, such as navigation bars or copyright tags.
In Part III you discover how cool your site can look when you add interactive image features, audio, video, and Flash. In Chapter 10, you find instructions for creating an interactive photo gallery with the Swap Image behavior, as well as how to use other features in Dreamweaver’s Behaviors panel, including the Open New Browser behavior. In Chapter 11, you find out what it takes to add multimedia to your Web pages, including how to insert as well as create links to a variety of file types — from Flash to video and audio files. In Chapter 12, I cover Dreamweaver’s HTML form options, which you can use to add feedback forms, surveys, and much more.
Part IV features three chapters that cover the most advanced features in Dreamweaver CS3. Chapter 13 is designed to help you understand how database-driven Web sites work and why they have become so important on the Web. In Chapter 14, you discover how to add dynamic content to your pages, define data sources, display recordsets, and take advantage of Dreamweaver CS3’s new Spry features. And in Chapter 15, you pull it all together and find out how to build master pages, create pages to search databases, and test your work with a live connection.
Part V features three quick references to help you develop the best Web sites possible. Chapter 16 provides a collection of online resources where you can register domain names and find hosting services, as well as a few services that can help you take care of more advanced challenges, such as setting up an e-commerce system. In Chapter 17, you find ten design tips to help you get the most out of Dreamweaver, and Chapter 18 showcases ten Web sites created with Dreamweaver to give you an idea of what’s possible and inspire you in your own Web projects.
.jpg)
If you want to get familiar with the latest in Web design strategies and options, don’t skip Chapter 1, which is designed to help guide you through the many ways to create Web sites today. If you’re ready to dive in and build a basic Web site right away, jump ahead to Chapter 2. If you want to find out about a specific trick or technique, consult the Table of Contents or the index; you won’t miss a beat as you work to make those impossible Web design deadlines. Most of all, I wish you great success in all your Web projects!
In this part . . .
In Part I, you find an introduction to Web design and an overview of the many ways you can create a Web site in Dreamweaver. Chapter 1 compares different layout techniques and provides an introduction to the toolbars, menus, and panels that make up Dreamweaver’s interface.
In Chapter 2, you dive right into setting up a Web site, creating a Web page and adding text, images, and links. In Chapter 3, you find an introduction to Web graphics and tips for using Photoshop to optimize images in GIF, PNG, and JPEG formats. And Chapter 4 covers testing and publishing features, so you can make sure that everything works before you put your site online.