dreamweaver 8 for dummies (2005)

Setting Links ...53Linking pages within your Web site ...53 Setting links to named anchors within a page ...54 Linking to pages outside your Web site ...56 Setting a link to an e-mail ad

Dreamweaver ®

8

FOR

Published by

Wiley Publishing, Inc.

111 River Street Hoboken, NJ 07030-5774 www.wiley.com Copyright © 2006 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 ted 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.

permit-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 copyright of Macromedia, Inc 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 RESENTATIONS 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 CRE- ATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS THE ADVICE AND STRATEGIES CON- TAINED 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

REP-OR WEBSITE IS REFERRED TO IN THIS WREP-ORK AS A CITATION AND/REP-OR A POTENTIAL SOURCE OF THER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFOR- MATION 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.

FUR-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: 2005932581 ISBN-13: 978-0-7645-9649-0

ISBN-10: 0-7645-9649-7 Manufactured in the United States of America

10 9 8 7 6 5 4 3 2 1 1B/QV/RQ/QV/IN

About the Author

Janine Warner is a bestselling author, journalist, and Internet consultant.

Since 1995, she’s written and coauthored 10 books about the Internet,

includ-ing Creatinclud-ing Family Web Sites For Dummies, Dreamweaver For Dummies (now

in its sixth edition) and Teach Yourself Dreamweaver Visually.

Janine has been featured on technology news specials for ABC, NBC, andZDTV and has been interviewed on numerous radio programs in the UnitedStates and abroad Her articles and columns have been published in a variety

of publications, including The Miami Herald newspaper, Shape Magazine, and the Pulitzer-Prize-winning Point Reyes Light.

Janine is a popular speaker at conferences and events throughout the US, andher fluency in Spanish has brought her many invitations to speak in LatinAmerica and Spain She also serves as a judge for the Arroba de Oro, a series

of Internet award contests held throughout Latin America Through her ticipation as a speaker at the award’s events, she helped to create an Internetliteracy program for high school students in Central America

par-Janine has also been a part-time faculty member at the University of SouthernCalifornia Annenberg School for Communication and at the University ofMiami where she taught online journalism She now serves as the MultimediaProgram Manager for the Western Knight Center, a joint project of USC and

UC Berkeley, funded by the Knight Foundation

From 1998 to 2000, Janine worked fulltime for The Miami Herald, first as its

Online Managing Editor and later as Director of New Media, managing a team

of designers, programmers, and journalists who produced the online editions

of The Miami Herald and El Nuevo Herald, as well as Miami.com She also

served as Director of Latin American Operations for CNET Networks, an national technology media company

inter-An award-winning former reporter, she earned a degree in Journalism andSpanish from the University of Massachusetts, Amherst, and worked for sev-eral years in Northern California as a reporter and editor before becominginterested in the Internet in the mid 90s

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 thosedreams come true

Author’s Acknowledgments

Let me start by thanking my husband, David LaFontaine, whose patience andsupport have kept me fed, loved, and entertained, even while working longhours to make seemingly impossible deadlines

Thanks to my wonderful contributor, Susannah Gardner, for gracing thesepages with examples of her own beautiful Web design work (see it on the Web

at www.hopstudios.com) and for revising Chapters 8 and 9 I recommend

both of her latest books, Buzz Marketing with Blogs For Dummies and

BitTorrent For Dummies.

Thanks to Frank Vera, a skilled programmer who deserves credit for revisingthe three most complex chapters in this book, Chapters 13, 14, and 15, ondynamic database features in Dreamweaver

Thanks also to Sheila Castelli, who designed many of the Web sites featured

in the examples You can find her work online at www.digitalcottage.com.Thanks to the entire editorial team: Travis Smith for his superb tech editing;Becky Huehls and Rebecca Senninger for catching the details and improvingthe prose; and Bob Woerner for shepherding this book through the develop-ment 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 wonderfulpeople now that no publisher will give me enough pages to thank them all Solet me conclude by thanking everyone I’ve ever known, just so I can go tosleep tonight and know I haven’t forgotten anyone

Publisher’s Acknowledgments

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: Rebecca Huehls Acquisitions Editor: Bob Woerner Copy Editor: Rebecca Senninger Technical Editor: Travis Smith Editorial Manager: Leah Cameron Editorial Assistant: Amanda Foxworth Cartoons: Rich Tennant

Indexer: Joan Griffitts

Special Help: Mary Lagu

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

Contents at a Glance

Introduction 1

Part I: Fulfilling Your Dreams 9

Chapter 1: Introducing Your New Best Friend .11

Chapter 2: Setting Up a Web Site with Dreamweaver .33

Part II: Looking Like a Million (Even on a Budget) .71

Chapter 3: Planning and Maintaining a Web Site 73

Chapter 4: Coordinating Your Design Work .89

Chapter 5: Adding Graphics 127

Part III: Advancing Your Site 151

Chapter 6: Coming to the HTML Table .153

Chapter 7: Framing Your Pages .179

Chapter 8: Cascading Style Sheets .197

Part IV: Making It Cool .237

Chapter 9: Advanced HTML: CSS Layouts, DHTML, and Behaviors .239

Chapter 10: Roundtrip Integration: Fireworks and Dreamweaver .273

Chapter 11: Showing Off with Multimedia 285

Chapter 12: Forms Follow Function .311

Part V: Working with Dynamic Content .327

Chapter 13: Building a Dynamic Web Site: Getting Started 329

Chapter 14: Bringing Data into the Mix .343

Chapter 15: Using Forms to Manage Your Dynamic Web Site 363

Part VI: The Part of Tens .383

Chapter 16: Ten Great Sites Designed with Dreamweaver .385

Chapter 17: Ten Web Site Ideas You Can Use 397

Chapter 18: Ten Timesaving Dreamweaver Tips .403

Index 409

Table of Contents

Introduction 1

Why Choose Dreamweaver? .1

Foolish Assumptions .2

About This Book 3

Conventions Used in This Book .3

How This Book Is Organized 4

Part I: Fulfilling Your Dreams .4

Part II: Looking Like a Million (Even on a Budget) .4

Part III: Advancing Your Site .5

Part IV: Making It Cool .5

Part V: Working with Dynamic Content .6

Part VI: The Part of Tens .6

Icons Used in This Book 6

Where to Go from Here 7

Part I: Fulfilling Your Dreams .9

Chapter 1: Introducing Your New Best Friend 11

So What’s New in Dreamweaver 8? .12

Introducing the Many Components of Dreamweaver 13

The Workspace .13

Working on Web Pages Created in Another Web Design Program 29

Microsoft FrontPage .29

Microsoft Word .30

Adobe GoLive 30

Other HTML editors .31

Chapter 2: Setting Up a Web Site with Dreamweaver .33

Setting Up a New or Existing Site .34

Defining a site .35

Setting up Web server access for FTP .37

Creating New Pages .41

Naming Web Pages .42

Designing your first page 43

Creating a headline 44

Indenting text .45

Changing fonts and text sizes .46

Adding images .46

Setting Links 53

Linking pages within your Web site .53

Setting links to named anchors within a page 54

Linking to pages outside your Web site 56

Setting a link to an e-mail address 56

Changing Page Properties .57

Adding Meta Tags for Search Engines .61

Previewing Your Page in a Browser .63

Putting Your Web Site Online 63

Synchronizing Local and Remote Sites .65

Cloaking Options .68

Part II: Looking Like a Million (Even on a Budget) .71

Chapter 3: Planning and Maintaining a Web Site .73

Visualizing Your Site .74

Preparing for Development 74

Developing a New Site .75

Managing your site’s structure .75

Naming your site’s files 76

Organizing images .79

Handling links .80

Finding and Fixing Broken Links .82

Checking for broken links 83

Fixing broken links .83

Testing Your Work with the Site Reporting Feature 85

Chapter 4: Coordinating Your Design Work .89

Templating Your Type .89

Creating Predesigned Pages with Dreamweaver’s Design Files .90

Creating Your Own Templates .93

Creating a new custom template .94

Saving any page as a template .97

Making attributes editable .98

Using custom templates .100

Making Global Changes with Templates .101

Attaching and Detaching Templates 103

Reusing Elements with the Library Feature .104

Creating and using Library items .105

Editing one instance of a Library item .108

Using a Tracing Image to Guide Your Layout .109

Making the Most of Dreamweaver’s Site-Management Features 111

Using a Testing Server .112

Using Check In/Out .112

Staying in touch with integrated e-mail 113

Using Design Notes .114

Activating Site Map Layout .118

Using the File View Columns option .120

Enabling Contribute features .121

Remembering Your History .122

Using the Quick Tag Editor .123

Chapter 5: Adding Graphics .127

Getting Great Graphics .127

Buying royalty-free clip art and photographs .128

Creating your own images 129

Understanding the Basics of Web Graphics .131

Inserting Images on Your Pages .134

Aligning Images on a Page 136

Centering an image 136

Aligning an image with text wrapping .136

Creating complex designs with images .138

Image Editing in Dreamweaver 138

Cropping an image .139

Adjusting brightness and contrast 141

Sharpening an image 141

Using the Transparent GIF Trick .142

Creating a Background .143

Creating Image Maps .147

Part III: Advancing Your Site .151

Chapter 6: Coming to the HTML Table 153

Creating Tables in Layout Mode 154

Editing Tables in Layout Mode .159

Changing Table Options in Standard Mode .160

Merging and splitting table cells .162

Controlling cell options .163

Formatting tables with color schemes .165

Formatting multiple columns in a table .166

Sorting Table Data 169

Importing Table Data from Other Programs 170

Using Tables for Spacing and Alignment 171

Using tables to design forms 172

Aligning a navigation bar 174

Using nested tables: Tables within tables .177

Chapter 7: Framing Your Pages .179

Appreciating HTML Frames .179

Understanding How Frames Work .182

Creating a frame in Dreamweaver .182

Saving files in a frameset .186

Setting Targets and Links in Frames .188

Naming frames .188

Setting links to a target frame .190

Comparing target options .193

Changing Frame Properties .193

Changing frame borders .194

Changing frame sizes .195

Changing scrolling and resizing options .195

Setting margin height and width .196

Chapter 8: Cascading Style Sheets .197

Checking Browser Compatibility .198

Appreciating Cascading Style Sheets .198

Benefits of CSS .199

Looking at the code behind CSS .200

“So what’s all this about cascading?” .202

Advanced capabilities of CSS 202

Working with the CSS Panel .203

Creating Style Sheets in Dreamweaver 206

Choosing the right style .206

Creating a new style .207

Applying styles in Dreamweaver .210

Removing styles in Dreamweaver .212

Redefining HTML tags 213

Working with CSS selectors 214

Editing an existing style 219

Defining CSS Rules .219

The Type category .220

The Background category .222

The Block category .223

The Box category .224

The Border category 225

The List category 226

The Positioning category .226

The Extensions category .228

Using External Style Sheets 229

Creating an external style sheet .229

Linking to an external style sheet .230

Editing an external style sheet .232

Applying ready-made external style sheets .232

Using Design Time Style Sheets .234

Part IV: Making It Cool 237

Chapter 9: Advanced HTML: CSS Layouts, DHTML, and Behaviors .239

Working with Layers .239

Creating layers .240

Adding elements, resizing, and repositioning layers .241

Stacking layers and changing visibility .244

Nesting layers: One happy family 245

Setting layer options .247

Converting tables to layers: Precise positioning for older Web pages .249

Using CSS for Page Layout .249

The Box model 250

Using classes and ID selectors 251

Creating a CSS Layout 251

Starting with content .251

Creating and applying CSS rules 252

All about DHTML 257

Working with Behaviors .258

Using a behavior to open a new browser window .259

Adding a rollover image behavior .263

Choosing the best event for a behavior .265

Attaching multiple behaviors .266

Editing a behavior .267

Ensuring That Your Pages Work in Older Browsers .267

Using Extensions and the Extension Manager .269

Converting to XHTML and Beyond .270

Chapter 10: Roundtrip Integration: Fireworks and Dreamweaver 273

Dreamweaver to Fireworks: Image Editing .274

Using an Image Editor Other Than Fireworks .276

Dreamweaver to Fireworks: Optimizing an Image .278

Inserting Fireworks HTML 280

Editing Fireworks HTML 282

Chapter 11: Showing Off with Multimedia 285

Understanding Multimedia Players .286

Working with Macromedia Flash .287

Adding Flash Buttons and Text with Dreamweaver 288

Creating Flash text with Dreamweaver 288

Creating Flash buttons with Dreamweaver .290

Inserting Flash files .292

Setting options for Flash 293

Working with Video on the Web .296

Comparing popular video formats .297

Working with Audio on the Web 299

Adding Multimedia Files to Your Web Page .302

Embedding a file .302

Linking to a file .303

Setting options for multimedia files .304

Working with Java .305

Inserting Java applets .306

Setting Java parameters and other options .307

Using ActiveX Objects and Controls 308

Chapter 12: Forms Follow Function .311

Appreciating What HTML Forms Can Do for You .313

Creating HTML Forms 313

Comparing radio buttons and check boxes 315

Adding text fields and text areas 318

Creating drop-down lists .321

Finishing off your form with Submit and Reset buttons .323

Using jump menus .324

Choosing other form options in Dreamweaver .325

Making your forms look good .326

Part V: Working with Dynamic Content .327

Chapter 13: Building a Dynamic Web Site: Getting Started .329

Understanding the Dynamic Web Site .330

Talking the Talk: Key Concepts .331

Exploring a database 331

How it works on the Web 332

Database applications .333

Plugging in the data 333

Setting up the Web server .333

Server Technologies Supported by Dreamweaver .334

ASP 335

ASP.NET 335

JavaServerPages (JSP) .335

ColdFusion MX 335

PHP 336

Making the Data Connection 336

Setting up a DSN .337

Setting up Dreamweaver for Windows .339

Setting up Dreamweaver for Mac users 342

Chapter 14: Bringing Data into the Mix .343

Exploring the Panel 343

The Databases panel 344

The Bindings panel 345

The Server Behaviors panel 346

The Components panel 348

Creating a Recordset .349

Using a Recordset on Your Page .351

Repeating a Region .353

Adding a Dynamic Image 355

Binding the Image .355

Adding Navigation to a Dynamic Page .358

Creating a Master-Detail Page Set .360

Chapter 15: Using Forms to Manage Your Dynamic Web Site .363

Establishing User Authentication .363

Creating a login page 364

Restricting access to pages 367

Securing Sensitive Information on Your Web Site 368

Searching for Database Records .369

Setting up the search page .370

Setting up the results page 370

Editing a Database from a Browser 372

Adding a record to your database 373

Updating a record via a browser .375

E-Commerce Basics 378

What puts the e-commerce into an e-commerce Web site? .378

Extending Dreamweaver one feature at a time 380

Part VI: The Part of Tens .383

Chapter 16: Ten Great Sites Designed with Dreamweaver .385

The Growing Digital Family 386

The Hum of World Journalism 387

Listen to the Tracks at UnSound .387

Friends of Washoe 388

Alliance Environmental Group, Inc 389

Film Radar .390

Cartooning in Marin 391

A Quiet Retreat .392

Dreamweaver, the Professional’s Choice .393

Yours Truly 394

Chapter 17: Ten Web Site Ideas You Can Use .397

Design for Your Audience 397

Add Search Features with Google .398

Use PDFs When They’re Warranted 398

Let Visitors Enlarge Your Type .398

Accessible Designs 399

Create a Consistent Design .399

Follow the Three Clicks Rule .400

Map It Out .400

Be Prepared for Fast Updates 401

Back It Up .402

Chapter 18: Ten Timesaving Dreamweaver Tips 403

Splitting the View .403

Inserting Content with Formatting 404

Getting a Head Start on Your Designs .404

Tabling Your Designs .405

Designing in a Flash .405

Making Fireworks Work with Your Images 406

Finding Functional Fonts 406

Differentiating DHTML for All Browsers 406

Directing Your Viewers .407

Keeping Frequently Used Items Handy .408

Index 409

I’ve been writing about Macromedia Dreamweaver since the first version

came out in the mid 1990s, and I’m pleased to say that this latest (andlong-awaited) version 8 makes this program better than ever If you’ve neverused Dreamweaver before, don’t worry; this book shows you everything youneed to know about the old features, as well as the new ones If you haveused earlier versions of Dreamweaver, it’s definitely time to upgrade andmake sure you have all the tools available to create a fabulous Web site

If you’re like most of the Web designers I know, you don’t have time to wadethrough a thick book before you start working on your Web site That’s why I

wrote Dreamweaver 8 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 tocover If you’re in a hurry, just go right to the information you need most andget back to work If you’re new to Web design, or you want to really get toknow the intricacies of Dreamweaver, skim through the chapters to get anoverview and then go back and read what’s most relevant to your project ingreater detail Whether you are building a simple site for the first time orworking to redesign a complex site for the umpteenth time, you find every-thing you need in these pages

Why Choose Dreamweaver?

With each new version of Dreamweaver, this award-winning programbecomes more efficient and powerful Yet somehow, Macromedia continues

to make Dreamweaver intuitive and easy to use, even as its programmerswork long hours to keep up with the latest innovations in Web design andrelease a new version of this program nearly every year since its creation.The high-end features and ease of use of Dreamweaver make it an idealchoice for professional Web designers, as well as for those new to working onthe Internet And the new features in version 8 make Dreamweaver betterthan ever!

I’ve been reviewing Web design programs since the first ones hit the market

in 1994, and I can assure you that Dreamweaver is the best one I’ve everworked with But don’t take my word for it — Dreamweaver has already won

a slew of awards over the years, including Best of Show at Internet World, the

prestigious five-mouse rating from MacWorld, and Best Web Authoring Tool in the Readers Choice Awards by PC Magazine.

Among all the Dreamweaver features, these are some of the best:

Dreamweaver has clean HTML code and sophisticated support for thelatest HTML options (such as Dynamic HTML)

Cascading Style Sheets, better known as CSS, have become popular

among professional Web designers It’s no wonder; this powerful part ofthe HTML code can save considerable time and give you greater designcontrol than ever before As you’d expect, Dreamweaver 8 offers moresophisticated support for CSS and better rendering within the designenvironment

Dreamweaver 8 even makes adding high-end features for creating driven Web sites easier These features used to be sold separately inDreamweaver UltraDev, but since Dreamweaver MX 2004, they’ve beenintegrated into this one powerful program Now, in version 8, these fea-tures have been further refined and enhanced to work better than ever

database-
As in previous versions, you find a state-of-the-art integrated text editorthat makes switching back and forth between Dreamweaver and a texteditor easier (if you prefer to look at the code, behind your pages youfind some great enhancements to the text editor in this version)

If you’ve never written HTML before, don’t be intimidated by these fancy features The Dreamweaver graphical design environment uses carefullydesigned palettes and windows to make it easy for you to create high-endWeb sites that include such features as animations, interactive forms, and e-commerce systems, even if you don’t know HTML

Foolish Assumptions

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 tocreate a Web site is key, but that desire is all that I expect from you

If you’re an experienced Web designer, Dreamweaver 8 For Dummies is an ideal

reference for you because it gets you working quickly with this program, ing with basic Web page design features and progressing to the more advancedoptions for DHTML and database-driven sites If you’re new to Web design,this book walks you through all you need to know to create a Web site

start-About This Book

I designed Dreamweaver 8 For Dummies to help you find the answers you

need when you need them You don’t have to read this book cover to coverand memorize it (and I don’t really recommend this as beach reading) Con-sider this a quick study guide and a reference when you need it Each section

of the book stands alone, giving you easy answers to particular questions andstep-by-step instructions for specific tasks

Want to find out how to change the background color on a page, create anested table, build HTML frames, or get into the really cool stuff such as stylesheets and layers? Then jump right in and go directly to the section that mostinterests you Oh, and don’t worry about keeping all those new HTML tags inyour head You don’t have to memorize anything The next time you need to

do one of these tasks, just go back and review that section And don’t worryabout getting sand on this book if you do take it to the beach — I promise itwon’t complain!

Conventions Used in This Book

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 italicsand then define them so that you know what they mean

When I type URLs (Web addresses) or e-mail addresses within regular graph text, they look like this: www.jcwarner.com Sometimes, however, I setURLs off on their own lines, like this:

para-www.jcwarner.com

That’s so you can easily spot them on a page if you want to type them intoyour browser to visit a site I also assume that your Web browser doesn’trequire the introductory http://for Web addresses If you use an olderbrowser, remember to type this before the address (also make sure youinclude that part of the address when you’re creating links in Dreamweaver)

Even though Dreamweaver makes knowing HTML code unnecessary, you maywant to wade into HTML waters occasionally I include HTML code in thisbook when I think it can help you better understand how HTML works When

I do provide examples, such as this code which links a URL to a Web page, Iset off 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 dialogbox, I set these items apart with bullets so that you can see that they’re allrelated When I want you to follow instructions, I use numbered steps to walkyou through the process

How This Book Is Organized

To ease you through the learning curve associated with any new program,

I organized Dreamweaver 8 For Dummies to be a complete reference The

following sections provide a breakdown of the parts of the book and whatyou can find in each one Each chapter walks you through the features ofDreamweaver step by step, providing tips and helping you understand thevocabulary of Web design

Part I: Fulfilling Your Dreams

This part introduces you to Dreamweaver and covers getting started with thebasics In Chapter 1, I give you a handy reference to toolbars and menuoptions I also describe the new features in version 8 You may prefer to skimthis chapter as it’s designed to give you an overview of the program, and youdon’t have to memorize the contents of each menu and toolbar In Chapter 2,

I start you on the road to creating your first Web site, including setting upyour site, importing an existing site, creating new Web pages, applying basicformatting to text, and even placing images and setting links on your pages

To make this chapter more interesting and help you see how all these tures come together, I walk you through creating a real Web page in this chap-ter as I show you how each features works

fea-Part II: Looking Like a Million (Even on a Budget)

Planning the design of your Web site is perhaps the most important part ofWeb site development — you’ll save plenty of reorganizing time later InChapter 3, I start you out on the right foot with tips on Web site management,the principles of good design, and strategies that can save you countlesshours I also introduce you to the Dreamweaver site-management features,which can help you keep track of all the elements in your site and make sure

you don’t have any broken links In Chapter 4, I introduce you to some of myfavorite Dreamweaver features, including sophisticated template capabilities,that enable you to create more consistent designs and even lock sections of apage to protect them I also love Dreamweaver’s Library items, which can beused to place and update commonly used elements on your pages, such asnavigation bars or copyright tags If you work with a team of designers, youmay be especially interested in the check in and check out features covered

in this chapter for version control and integrated e-mail for communicatingwith other team members Chapter 4 also covers tracing images, the QuickTag Editor, Design Notes, and the History palette

Chapter 5 introduces you to the basics of creating, converting, and ing graphics for the Web and shows you how to add graphic elements to yourpages You can find tools and strategies for creating the best images for yourWeb site, as well as tips for finding free images online and buying graphicsthat are specially designed for the Web

optimiz-Part III: Advancing Your Site

In Part III, I show you how to use Dreamweaver with some of the moreadvanced HTML features In Chapter 6, you discover how to use HTML tables

to create page layouts that work in the most common Web browsers A light of this chapter is Layout mode, which makes creating complex Webdesigns easier than ever In Chapter 7, you find all you need to know aboutdesigning a site with HTML frames (This chapter helps you decide when youshould and shouldn’t use frames and gives you plenty of step-by-step instruc-tions for creating HTML frames in Dreamweaver.)

high-Chapter 8 provides an overview of how Cascading Style Sheets work and howthey can save you time CSS has become a popular way to create designs andmanage formatting on Web pages, and these features have been nicelyimproved in Dreamweaver 8 In this chapter, you find descriptions of the styledefinition options available in Dreamweaver as well as instructions for creat-ing and applying styles

Part IV: Making It Cool

The most important thing in Web design is looking cool, and this section ofthe book is designed to make sure you’re part of the “cool club.” In Chapter 9,

I take you further into CSS and include Dynamic HTML features, such aslayers and behaviors, which allow precise design control and new levels ofinteractivity Chapter 10 introduces Fireworks, the Macromedia image pro-gram for the Web, and shows you how to take advantage of Dreamweaver’sintegration with Fireworks to more easily edit images

In Chapter 11, you find out how easily you can add multimedia to your Webpages, including how to link a variety of file types — from Flash to Java toRealAudio — to your Web pages Then in Chapter 12, I cover HTML forms andhow to use Dreamweaver to add interactive elements, such as surveys, searchengines, online discussion areas, and e-commerce systems to your pages.

Part V: Working with Dynamic Content

Part V features three chapters that cover the most advanced features inDreamweaver 8 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, and display record sets And in Chapter 15, you pull

it all together and find out how to build master pages, create pages to searchdatabases, and test your work with a live connection

Part VI: The Part of Tens

In The Part of Tens, you get three quick references to help you get the mostout of Dreamweaver and avoid some of the common design mistakes on theWeb In Chapter 16, you find descriptions and images of ten Web sites createdwith Dreamweaver to give you an idea of what’s possible In Chapter 17, youfind ten great Web design ideas; and in Chapter 18, you get ten tips to saveyou time and make your sites work better

Icons Used in This Book

When I want to point you toward something you can download for your use, Iuse this icon

This icon points you toward valuable resources on the World Wide Web

This icon reminds you of an important concept or procedure that you’ll want

to store away in your memory banks for future use

This icon signals technical stuff that you may find informative and interestingbut isn’t essential for using Dreamweaver Feel free to skip over this stuff.

This icon indicates a tip or technique that can save you time and money —and a headache — later

This icon warns you of any potential pitfalls — and gives you the all-importantinformation on how to avoid them

Where to Go from Here

If you want to get familiar with what’s new in Dreamweaver 8 and get anoverview of the program, turn to Chapter 1 If you’re ready to dive in and buildyour first Web site with Dreamweaver right away, jump ahead to Chapter 2 Ifyou want to find out about a specific trick or technique, consult the Table ofContents or the Index and jump right to the section you need; you won’t miss

a beat as you work to make those impossible Web design deadlines Andmost of all have fun!

Fulfilling Your

Dreams

In this part

In Part I, you discover that you’re not dreaming and allthe wonderful advances in this powerful Web designprogram are real and at your fingertips The new features

of Dreamweaver 8 make Web design easier, more intuitive,and more powerful than ever And don’t worry, if you’renew to Dreamweaver or need a little refresher, this partincludes an introduction to this award-winning Web designprogram Chapter 1 provides an overview, with highlights

on what’s new in version 8, as well as descriptions of thetoolbars, menus, and panels that make up Dreamweaver’sinterface In Chapter 2, you dive right into setting up yourWeb site, creating your first Web page, and adding text,images, and links

Chapter 1 Introducing Your New Best Friend

In This Chapter

Introducing the new features of Dreamweaver 8

Examining your Web site objectives

Finding your way around in Dreamweaver

Welcome to the wonderful world of Dreamweaver 8 If you’re an enced Web designer, you’re going to love the power and sophistica-tion of this Web editor If you’re new to building Web sites, you’ll appreciateits simplicity and intuitive interface Either way, this chapter starts you onyour way to making the most of Dreamweaver by introducing you to themenus and panels that make this program so useful

experi-Dreamweaver can help you with every aspect of Web development, fromdesigning simple pages, to fixing links, to publishing your pages on the WorldWide Web Dreamweaver can handle the simplest HTML, as well as some ofthe most complex and advanced features possible on the Web, includingCascading Style Sheets and Dynamic HTML (see Chapters 8 and 9 for moreinformation on these features) Dreamweaver also integrates a powerfulHTML text editor into its easy-to-use graphical design environment so youcan work in the HTML code if you prefer

If you already work in another Web design program or you’re updating a sitethat was created in another program, don’t worry — you can use Dreamweaver

to modify existing Web pages and continue to develop your Web site withoutlosing all the time you’ve already invested For example, if you’ve been working

in a program such as Microsoft FrontPage or Adobe GoLive, you can change toDreamweaver to edit and develop your site further All Web design programscreate HTML pages, and those pages can be opened in any other Web designprogram At the end of this chapter, in the “Working on Web Pages Created inAnother Web Design Program” section, you find a few warnings about the chal-lenges you may encounter because the code can vary slightly from program toprogram, but once you clean up those differences, you should be fine

In this chapter, you find an introduction to the new features in Dreamweaver 8,get a tour of the desktop, and gain an overview of what makes Dreamweaversuch a powerful Web design program

So What’s New in Dreamweaver 8?

Now the good stuff All those requests you make to Macromedia, all thatwishful thinking believe it or not, they heard you and many of the little —and not so little — things we all have been wanting in this program are finallyhere, as well as a few extras you might expect!

The following list provides you a quick overview of some of the new featuresyou find in version 8:

 When you first launch Dreamweaver 8, you’ll notice a few changes to theWorkspace Although it has no dramatic changes, the programmers atMacromedia have added some clever new features, including a magnify-ing glass feature complete with a little icon in the status bar just belowthe work area Much like the magnifiers common in image-editing pro-grams, this new feature enables you to zoom in to view page elements ingreater detail or zoom out to see the full layout of a larger page

 You’ll find some of the most extensive changes in the way Dreamweaverhandles CSS — important upgrades as Cascading Style Sheets becomeincreasingly popular among professional designers Among other things,you’ll find improved CSS rendering, better support for positioning, and amore unified CSS panel that includes the Rule Tracker, Property Grid,and a new Composite view

 You can find one of my favorite new feature sets on the Edit menu PasteSpecial enables you to paste formatted text (and even tables) from otherprograms, such as Microsoft Word or Excel, with options about what for-matting is kept You can choose to paste text with structural formatting,such as tables and paragraph marks; with or without basic formatting,such as bold and italics; and you can even opt to clean up the oftenproblematic paragraph formatting from Word as you paste in the text

If you specify your choices in Dreamweaver’s Preferences, anytime you use the paste feature your text is inserted based on your favoriteoptions

 Going beyond the predesigned templates included in previous versions,Dreamweaver now includes Starter Pages, which not only include topic-based designs They actually include text Of course, you can edit thetext; but if you’re creating a calendar of events or a product catalog, forexample, the general text already in place on these pages gives you ahead start

 If you prefer working in Code view, where you can see all the HTML tags,you’ll find a few enhancements to that interface, including a new toolbarthat provides quick access to common commands and the capability toselectively expand and collapse code so you can focus on the area youare working on

 I always recommend that you design your pages for the broadest ence, and that definitely includes designing for the disabled, such as theblind who use special browsers that read Web pages aloud Macromediahas always been good about including accessibility features, and I’mpleased to see those features support the Priority 2 Web ContentAccessibility Guidelines.

audi-Introducing the Many Components

of Dreamweaver

Dreamweaver can seem a bit overwhelming at first It has so many features,and they are spread out in so many panels, toolbars, and dialog boxes thatyou can easily get lost If you prefer to learn by poking around, have at it (andfeel free to skip ahead to the next chapter where you start building your firstWeb page) If you want a tour before you get started, the next few sectionsintroduce you to the interface and provide an overview of the basics ofDreamweaver You also discover where to find common features and func-tions, which the rest of the book covers in more detail

The Workspace

When you launch Dreamweaver, the Start Screen appears in the main area ofthe program (and it reappears anytime you don’t have a file open) From theStart Screen, you can choose to create a new page from one of the manyDreamweaver pre-made templates, or you can create a new blank page byselecting HTML from the Create New options in the middle column Whenyou select HTML, Dreamweaver creates a new blank HTML page in the main

Workspace, as shown in Figure 1-1 You can type text directly into any page in

the Workspace and apply basic formatting with the many formatting optionsdescribed later in this chapter

You build HTML pages, templates, style sheets, and so on in the Workspace,which consists of a main window that shows the page you’re working on sur-rounded by a number of panels and menus that provide tools you can use todesign and develop your pages (shown in Figure 1-1) The DreamweaverWorkspace consists of the following basic components: the menu bar (at thevery top), the Insert bar (just below it), the Document window (the main area

of the screen, just below the Insert bar), the Properties inspector (at thebottom of the screen), and the Vertical Docking panels (to the right of theDocument window) that expand and collapse as needed More detaileddescriptions of each of these follows

The Document window

The big, open area in the main area of the Workspace is the Document window,which is where you work on new and existing pages If you use the Designerinterface in Design view, you see your page as it would display in a Webbrowser If you want to see the HTML code behind your page, click the Codebutton at the top of the work area Choose the Split button to see the HTMLcode and Design view simultaneously (which you can see in Figure 1-2) Pages viewed on the World Wide Web may not always look exactly the waythey do in the Document window in Dreamweaver because not all browserssupport the same HTML features or display them identically For best results,always test your work in a variety of Web browsers, and design your pages towork best in the browsers that your audience are most likely to use Fortu-nately, Dreamweaver includes features that help you target your page designs

to specific browsers, such as the Check Target Browsers feature covered inChapter 3.)

Insert bar

Tag selector

MenuDocument toolbar Document window Vertical Docking panels

Properties inspector

Figure 1-1:

TheWorkspaceincludes the mainDocumentwindow,surrounded

by the Insertbar, VerticalDockingpanels, and thePropertiesinspector

Customizing the interface

The docking panels, palettes, and bars in Dreamweaver provide easy access

to most of the program’s features The default settings put the Propertiesinspector at the bottom of the page, the Insert bar at the top, and the panels

on the right, but you can move these elements around the screen by selectingthem and use drag and drop to move them to another part of the screen Youcan also close any or all the panels on the right by clicking the tiny Optionsicon in the top right of each panel and selecting Close Panel from the drop-down list (it looks like three bullet points with lines next to them and a littlearrow underneath, and it’s really, really small) You can close them all at once

by choosing Window➪Hide Panels (or by clicking the arrow in the middle ofthe row of panels), and you can access any or all the panels through the vari-ous options on the Window menu If you want to open a particular panel —the CSS Styles panel, for example — choose Window➪CSS Styles and itexpands to become visible on your screen The Properties inspector, Insertbar, and panels are integral parts of this program, and you find a lot moreinformation about them throughout the book Check out the Cheat Sheet atthe front of this book for a handy reference to the Properties inspectoroptions In Chapter 2, you discover how to use some of the most commonfeatures, such as the icon for inserting an image on the Insert bar at the top

of the screen

Figure 1-2:

When youselect text

in Designview, thecorrespond-ing text

is maticallyhighlighted

auto-in Codeview

The Insert bar

The Insert bar, located at the top of the screen, comes with eight

subcate-gories, each with a different set of icons representing common features Click

the small arrow to the right of the name to access the drop-down list toswitch from displaying the buttons on one subcategory to showing the but-tons for another The options are

 Common bar: Displays icons for many of the most common features,

including links, tables, and images

 Layout bar: Displays layer and table options essential for creating

com-plex layouts

 Forms bar: Surprise! This one features all the most common form

ele-ments, such as radio buttons and boxes

 Text bar: Displays common text-formatting features, including

para-graphs, breaks, and lists

 HTML bar: Offers a mishmash of raw HTML, such as rules, tables,

frames and, scripts

 Application: Use these options when building dynamic Web pages

pow-ered by database material

 Flash elements: A single icon allows you to place a Flash file on your

Web page

 Favorites: Right-click (Windows) or Control+click (Mac) to customize

your most-used HTML elements

At the very end of the drop-down list, you find the Show as Tabs option,which enables you to display the names of the Insert bars as tabs across thetop of the screen, as shown in Figure 1-3

The Favorites Insert bar is blank by default, and you can customize it to holdyour own collection of options Simply right-click (Windows) or Control+click(Mac) in the bar and you can easily customize this bar

Throughout the book, I refer to these Insert bars by their full names, such asthe Forms Insert bar or the Layout Insert bar You find more information oneach of these in their relevant chapters For example, Chapter 12 covers theForms Insert bar in detail; and Chapters 13, 14, and 15 cover the ApplicationInsert bar

Figure 1-3 shows the Insert bar with the Common options visible and eachname displayed in a tab across the top of the screen

The Properties inspector

The Properties inspector is docked at the bottom of the page in Dreamweaver

If you prefer it at the top of the screen, you can drag it up there, and it locksinto place; but I rather like that it’s handy, yet out of the way, at the bottom ofthe screen

The Properties inspector displays the properties of a selected element on the

page A property is a characteristic of HTML — such as the alignment of an

image or the size of a cell in a table — that you can assign to an element on

your Web page If you know HTML, you recognize these as HTML attributes.

When you select any element on a page (such as an image), the inspectorchanges to display the relevant properties for that element, such as theheight and width of an image You can alter these properties by changing thefields in the Properties inspector You can also set links and create imagemaps using the options in the Properties inspector

Figure 1-4 shows the image options displayed in the Properties inspector,

including height and width, alignment, and the URL (Uniform Resource

Locator or, more simply, Web address) to which the image links

At the bottom-right corner of the Properties inspector, you see a small arrow

Click this arrow (or double-click in any open inspector space) to reveal tional attributes that let you control more advanced features, such as theimage map options when a graphic is selected

addi-Figure 1-3:

TheCommonInsert barprovidesaccess forforms,tables,images, and more

Figure 1-5 shows the Properties inspector when you select a table Noticethat the fields in the inspector reflect the attributes of an HTML table, such

as the number of columns and rows (See Chapter 6 to find out more aboutHTML tables.)

The Docking panels

The Docking panels, shown in Figure 1-6, are located to the right of the workarea (although you can easily move them anywhere on the screen) The Dockingpanels display a variety of important features in Dreamweaver, including all thefiles and folders in a site (in the Files panel), Cascading Style Sheets (in the CSS

Figure 1-5:

Attributes of

a selectedHTML table

or cell

Figure 1-4:

ThePropertiesinspectordisplays theattributes

of anyselectedelement,such as

an imageshown here

panel) and more You can open and close panels by clicking the small arrow tothe left of the panel’s name To display more panels, select the panel name fromthe Window menu To hide all the visible panels at once, click the tab with thesmall arrow in the middle, left of the row of panels.

The following list offers a description of some of the elements that youaccess through the Docking panels (the others are described in greater detail

in their respective sections of the book)

 Files panel: Shown in Figure 1-6, the Files panel lists all the folders and

files in a Web site and helps you manage the structure and organization

of the site You can move files in and out of folders and even create newfolders in this panel, and Dreamweaver automatically adjusts any related

links The Files panel is also where you access FTP (file transfer protocol)

capabilities to upload or download files from a server You can use theConnect button at the top of this panel to dial quickly into your serverand use the Get Files and Put Files arrows to transfer pages (SeeChapter 2 for more about the Files panel and built-in FTP features.)

Figure 1-6:

The ing panelsprovideeasy access

Dock-to CSS, tags,and all thefiles in aWeb site,such as thelist shownhere inKathrynLeMieux’scartoon site