dreamweaver mx 2004 bible

Dreamweaver ®MX 2004 Bible Joseph W... Dreamweaver ®MX 2004 Bible Joseph W... You’ll see this philosophy carried out in the new Browser Check system in Dreamweaver MX 2004, which automat

Dreamweaver ®

MX 2004 Bible

Joseph W Lowery

MX 2004 Bible

Dreamweaver ®

MX 2004 Bible

Joseph W Lowery

LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: WHILE THE PUBLISHER AND AUTHOR HAVE USED THEIR BEST

EFFORTS IN PREPARING THIS BOOK, THEY MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THEACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS BOOK AND SPECIFICALLY DISCLAIM ANY IMPLIED

WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE NO WARRANTY MAY BE CREATED OREXTENDED BY SALES REPRESENTATIVES OR WRITTEN SALES MATERIALS THE ADVICE AND STRATEGIES CONTAINEDHEREIN MAY NOT BE SUITABLE FOR YOUR SITUATION YOU SHOULD CONSULT WITH A PROFESSIONAL WHERE

APPROPRIATE NEITHER THE PUBLISHER NOR AUTHOR SHALL BE LIABLE FOR ANY LOSS OF PROFIT OR ANY OTHERCOMMERCIAL DAMAGES, INCLUDING BUT NOT LIMITED TO SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR OTHERDAMAGES

Copyright 2004 by Wiley Publishing, Inc., Indianapolis, Indiana

Published simultaneously in Canada

Library of Congress Control Number: 2003114747

For general information on our other products and services or to obtain technical support, please contact our CustomerCare Department within the U.S at 800-762-2974, outside the U.S at 317-572-3993 or fax 317-572-4002

Wiley also publishes its books in a variety of electronic formats Some content that appears in print may not be available inelectronic books

Trademarks: Wiley, the Wiley Publishing logo and related trade dress are trademarks or registered trademarks of John

Wiley & Sons, Inc and/or its affiliates, in the United States and other countries, and may not be used without writtenpermission Macromedia Fireworks MX 2004, Dreamweaver MX 2004, Flash MX 2004, FreeHand MX, ColdFusion MX 6.1 forProfessionals, JRun Server v4, and Macromedia Contribute 2.0 copyright 1995-2003 Macromedia, Inc., 600 TownsendStreet, San Francisco, CA 94103 USA All Rights Reserved Macromedia, Fireworks, Dreamweaver, Flash, FreeHand,ColdFusion, JRun, and Contribute are trademarks or registered trademarks of Macromedia, Inc in the United States and/orother countries All other trademarks are the property of their respective owners Wiley Publishing, Inc., is not associatedwith any product or vendor mentioned in this book

is a trademark of Wiley Publishing, Inc.

About the AuthorJoseph Lowery has been writing about computers and new technology since 1981 He is the

author of the previous editions of Dreamweaver Bible and Fireworks Bible as well as of Buying

Online For Dummies (all published by Wiley) He is also the author of Joseph Lowery’s Beyond Dreamweaver, Dreamweaver MX 2004 Killer Tips (with Angela Buraglia), and Dreamweaver MX

2004 Web Application Recipes (with Eric Ott), all published by New Riders He recently

co-wrote a book on Flash with designer Hillman Curtis and has also written books on HTML andusing the Internet for business His books are international bestsellers, having sold more than350,000 copies worldwide in ten different languages Joe is also a consultant and trainer andhas presented at Seybold in both Boston and San Francisco, Macromedia conferences

in the U.S and Europe, and at ThunderLizard’s Web Design World As a partner in DevaAssociates, Ltd., Joseph developed the Deva Tools for Dreamweaver set of navigational exten-sions and, with Edoardo Zubler, created FlashBang!, a set of Flash navigation tools Josephand his wife, dancer/choreographer Debra Wanner, have a daughter, Margot

About the ContributorDaniel Short never planned to be a Web designer; it just happened When he was serving in

the Army, he began by tearing apart computers Eventually he was putting together Websites Dan is a devoted Macromedian (and Team Macromedia volunteer) and uses almost theentire Macromedia Web Design Suite, including Fireworks and Macromedia Flash He’s beendoing the Web gig since the end of 1998 and has had great luck building his Web design busi-ness through Web Shorts Site Design Dan helps maintain several HTML and Dreamweaverreference sites including DreamweaverFAQ.com, for which he created the style changer andall ASP functionality, including the Snippets Exchange Dan has also written articles for sev-eral resource sites, including AListApart.com, run by Jeffrey Zeldman, and Spider Food.net,

run by J.K Bowman Dan is a contributing author for Dreamweaver MX Magic (published by

New Riders)

Mary Beth Wakefield

Vice President and Executive Group Publisher

Quality Control Technicians

Carl William Pierce Kathy Simpson Brian H Walls

Senior Permissions Editor

Carmen Krikorian

Media Development Specialist

Angela Denny

Proofreading and Indexing

TECHBOOKS Production Services

Cover Image

Murder By Design

For my good friend and co-worker, Derren Whiteman,

in appreciation of the over-the-top support and technical expertise he’s generously provided to me and the entire Dreamweaver

community throughout the years Beauty, eh?

Each year, the Macromedia engineering team visits a number of customers to better stand their workflow and the challenges they face In other words, what does and doesn’twork, and what could work better Several trends were apparent from our last round of visits:Cascading Style Sheets (CSS) had hit the mainstream, and working designers and developershad to be more productive in less time Moreover, new Dreamweaver users were somewhatoverwhelmed with all the choices available in the program After absorbing the feedback fromboth long-time and beginning users, the engineers returned to the lab to develop the latestversion of the world’s leading Web-authoring tool: Dreamweaver MX 2004

under-The capability to add and edit CSS styles has been a key feature in Dreamweaver since release1.0 However, designers have begun to depend increasingly on CSS, and it was time to kick it

up a notch You’ll find the CSS rendering in Dreamweaver MX 2004 to be vastly improved,enabling Web developers to create pure CSS-based layouts A new CSS related panel displaysselected styles and allows for direct in-line editing of any existing or newly applied attribute.Once your CSS is applied, you can examine any tag and see instantly what style rules areapplied; Dreamweaver also indicates which rules remain relevant and which are overruled.Better yet, Dreamweaver tells you why

The concept of combining functionality with information is not a new one in Dreamweaver;given the increasingly complex world of Web authoring, we feel it’s important that designers

be given as much contextual information as possible You’ll see this philosophy carried out in the new Browser Check system in Dreamweaver MX 2004, which automatically flagsany browser-specific conflicts when a page is opened It’s up to the designer to choose whichbrowsers — and what versions — he or she is coding for After an error is identified, you candouble-click the listing in the Results panel to go right to the problem, marked with a redsquiggly underline in Code view Hover your mouse over the error, and Dreamweaver tellsyou why the code is marked and offers a possible solution Functionality + Information =Increased Productivity

We’ve also looked toward enhancing productivity in other ways The new Start Page givesusers a quick way to launch projects or return to recent ones For new users, it helps to jump-start development with quick access to pre-built templates and tutorials Our innovativeExpanded Table mode takes the guesswork out of cell selection and cursor placement whetheryou’re working with simple or nested tables The entire interface — from menus to Insert bar —has been streamlined and re-organized for a more intuitive workflow We’ve even added thecapability to make quick edits to existing sites directly on a remote server so that you don’thave to set up a site locally Dreamweaver MX 2004 strives to be technologically agnostic:whether you’re building static Web sites or developing for any of the leading server models,Dreamweaver allows you to work the way you prefer

x Foreword

Revising world-class software as multifaceted as Dreamweaver is truly a team effort — andthe team is larger than you’d expect Although the highly skilled and dedicated engineeringstaff is responsible for the final release, they couldn’t do it without the very active and vocalDreamweaver community urging them on Included in that community are people like JosephLowery, whose book you hold in your hands Joe is a true Dreamweaver expert who knows —and knows how to explain — Dreamweaver from top to bottom, <a> tag to z-index

While each new version is a milestone for the Dreamweaver team, it’s only a stop along theway We’re always looking for ways to make Dreamweaver the best tool for you to bring yourvisions into reality We can’t wait to see what dreams you realize

Jennifer Taylor

Dreamweaver Product Manager Macromedia, Inc.

Dreamweaver MX 2004 stands at the center of a complex series of overlapping worlds Inone realm, designers of static Web pages are looking to expand their knowledge base intodata-driven sites Over there, you’ll find application developers — some savvy in Active ServerPages and ASP.NET, some in ColdFusion, and others in JavaServer Pages and PHP — anxious

to develop for the Internet The spectrum of experience in both camps runs the gamut fromeager novice to experienced professional, all of whom benefit from the advanced style capa-bilities of Cascading Style Sheets (CSS) There’s yet another group of prospective Web crafts-men and artists who want to do it all and are looking for a place to start Dreamweaver MX

2004 is the one program robust enough for them all, and the Dreamweaver MX 2004 Bible is

your guidebook to all its features and capabilities

What’s in a name? In the case of Macromedia’s Dreamweaver, you find one of the most priate product names around Web page design is a blend of art and craft; whether you’re adeadline-driven professional or a vision-filled amateur, Dreamweaver provides an intuitiveway to make your Web visions a reality Dreamweaver implies development, and it excels atproducing multifaceted Web pages that bring content locked in a data store to the surface

appro-To use this book, you need only two items: the Dreamweaver software and a desire to makecutting-edge Web pages (Actually, you don’t even need Dreamweaver to begin; the CD-ROMthat accompanies this book contains a trial version.) From quick design prototyping to ongo-ing Web site management, Dreamweaver automates and simplifies much of a Webmaster’sworkload Dreamweaver is not only the first Web authoring tool to bring the ease of visualediting to an HTML-code–oriented world, it also brings a point-and-click interface to complex

coding whether server-side or client-side The Dreamweaver MX 2004 Bible is designed to

help you master every nuance of the program Are you styling your pages with CSS? Are youbuilding multipage Web applications? Are you creating a straightforward layout with the visualeditor? Do you need to extend Dreamweaver’s capabilities by building your own customobjects? With Dreamweaver and this book, you can weave your dreams into reality for theentire world to experience

What’s New in Dreamweaver MX

Since its inception, Dreamweaver has striven to serve two masters: professional Web opers, savvy in technique and used to hand-coding, and beginning designers looking to over-come their lack of HTML and JavaScript expertise Dreamweaver MX 2004 attempts to continuethe balancing act of satisfying the two different markets — and, in large part, it succeeds.Innovations in Dreamweaver MX 2004 can be categorized into three areas: workspace andproductivity improvements, CSS capabilities, and Web-application building

devel-xii Dreamweaver MX 2004 Bible

Workspace and productivity enhancements

From your very first launch of Dreamweaver MX 2004, you’ll notice the design environmentupgrade The Start Page is not only attractive; it’s highly functional and offers one-click access

to many of Dreamweaver’s starting points As you continue your tour, you’ll find Dreamweavermore streamlined and accessible — from the restructured menus to the revamped Insert bar.One of the changes to the Insert bar is the new Favorites category, where you can makeDreamweaver even more productive by grouping the objects you use most frequently intoone convenient location

Other workspace changes are not as immediately noticeable, but just as significant Copy andpaste part of any Microsoft Word or Excel document, and Dreamweaver transparently trans-forms the content into lean HTML Transfer your page with the new Secure FTP (SFTP) proto-col, and Dreamweaver automatically protects your vital information

Some productivity enhancements are optional and available on demand Dreamweaver’s new Expanded mode takes the guesswork out of precise table manipulation by temporarilyexpanding the cell padding and spacing while forcing the border to display; press F6 to toggle

in and out of this new design-time environment Should your work stretch over multiple sions, Dreamweaver provides a new saved desktop option With this option enabled, docu-ments left open when you quit Dreamweaver are automatically re-opened the next time yourun the program

ses-Cutting-edge CSS capabilities

Perhaps the greatest feature in the new release of Dreamweaver is not a feature at all — it’s amajor shift in design focus Because its creators recognized the ever-growing role played byCascading Style Sheets in Web design, Dreamweaver MX 2004 has been re-engineered to beCSS-centric from top to bottom If you’re just starting out using CSS, Dreamweaver helps youmake the right choices by creating styles rather than adding deprecated <font> tags whenyou format your text from the Property inspector Moreoever, Dreamweaver won’t createunnecessary styles: If you’ve already got one style that applies Arial type in dark gray at

14 pixels, Dreamweaver uses that style rather than making a new one when you choose thosesame attributes

For the designer who is comfortable with CSS, Dreamweaver brings style-sheet editing rightup-front Select any tag and the Relevant CSS panel displays all the applicable CSS rules — iteven shows you which ones are applied but overridden so that you can modify your styles asneeded The Relevant CSS panel makes each exposed style attribute and value immediatelyeditable, whether the style is defined on the same page or in an external file

All this stylistic prowess is immediately apparent during design time The CSS rendering isvastly improved in Dreamweaver MX 2004 and most CSS level 1 and level 2 features are faith-fully reproduced This enhanced rendering capability means you spend more time designingand less time previewing your design — a major productivity boost

Web application advancements

Numerous improvements have been applied to the various supported server models PHPdevelopers can now take advantage of Dreamweaver’s Master Detail Page Set object to quicklycreate the foundation for one of the Web’s most common applications In addition, authenti-cation server behaviors have now been added to the PHP server model, greatly simplifyingthe task of protecting Intranet and other pages from unauthorized viewing Developers in theASP.NET environment will appreciate the added support for various form controls

Many developers — regardless of their server model of choice — are required to update orotherwise maintain sections of an existing Web site Because there is no need to create an on-going site locally, these developers just need a direct connection to the server Dreamweaver

MX 2004 now offers so-called siteless editing for FTP and, for ColdFusion developers, RDSconnections

Who Should Read This Book?

Dreamweaver attracts a wide range of Web developers Because it’s the first Web authoringtool that doesn’t rewrite original code, veteran designers are drawn to using Dreamweaver astheir first visual editor Because it also automates complicated effects, beginning Web design-

ers are interested in Dreamweaver’s power and performance Dreamweaver MX 2004 Bible

addresses the full spectrum of Web professionals, providing basic information on HTML ifyou’re just starting, as well as advanced tips and tricks for seasoned pros Moreover, thisbook is a complete reference for everyone working with Dreamweaver on a daily basis

What Hardware and Software Do You Need?

Dreamweaver MX 2004 Bible includes coverage of Dreamweaver MX 2004 If you don’t

own a copy of the program, you can use the trial version on this book’s CD-ROM Written

to be platform-independent, this book covers both Macintosh and Windows versions ofDreamweaver MX 2004

✦ 275MB of available disk space

✦ 256-color monitor capable of 800×600 resolution (OS X requires thousands of colors)

✦ CD-ROM drive

Windows

Macromedia recommends the following minimum requirements for running Dreamweaver

on a Windows system:

✦ Intel Pentium III processor, 600MHz or equivalent

✦ Windows 98 SE, 2000, XP, or Windows Server 2003

✦ 128MB of available RAM

✦ 275MB of available disk space

✦ 256-color monitor capable of 800 ×600 resolution

✦ CD-ROM drive

xiv Dreamweaver MX 2004 Bible

These are the minimum requirements As with all graphics-based design tools, more bility is definitely better for using Dreamweaver, especially in terms of memory and proces-sor speed

capa-How This Book Is Organized

Dreamweaver MX 2004 Bible can take you from raw beginner to full-fledged professional if

read cover to cover However, you’re more likely to read each section as needed, taking the

necessary information and coming back later To facilitate this approach, Dreamweaver

MX 2004 Bible is divided into seven major task-oriented parts After you’re familiar with

Dreamweaver, feel free to skip around the book, using it as a reference guide as you build upyour own knowledge base

The early chapters present the basics, and all chapters contain clearly written steps for thetasks you need to perform In later chapters, you encounter sections labeled Dreamweaver

Techniques Dreamweaver Techniques are step-by-step instructions for accomplishing specific

Web designer tasks — for example, building an image map that uses rollovers or eliminatingunderlines from hyperlinks through Cascading Style Sheets Naturally, you can also use theDreamweaver Techniques as stepping stones for your own explorations into Web page creation

If you’re running Dreamweaver while reading this book, don’t forget to use the CD-ROM Anintegral element of the book, the accompanying CD-ROM offers a vast number of additionalDreamweaver server behaviors, behaviors, objects, commands, and other extensions, in addi-tion to relevant code from the book

Part I — Dreamweaver MX Basics

Part I begins with an overview of Dreamweaver’s philosophy and design To get the most out

of the program, you need to understand the key advantages it offers over other authoringprograms and their deficiencies, which Dreamweaver addresses Part I takes you all the way

to setting up your first site In Chapter 2, you get an overview of one man’s Web developmentprocess — mine — as an introduction to working with Dreamweaver The other opening chap-ters give you a full reference to the Dreamweaver interface and all its customizable features

Part II — Web Design and Layout: Fundamentals

Although Dreamweaver is partly a visual design tool, its roots derive from the language of theWeb: HTML Part II gives you a solid foundation in the basics of HTML, even if you’ve neverseen code It also shows you how to get the most out of Dreamweaver’s code environmentwith any language Chapter 6 describes what you need to know about the overall structure of

a Web page, including the all-important <meta> tags

Reflecting the current emphasis in Web design on Cascading Style Sheets, Chapter 7 lays thefoundation to CSS In this chapter, you learn the basics of CSS, as well as how to define andapply styles in Dreamweaver Following the introduction to CSS, you learn the three funda-mentals of static Web pages: text, images, and links In Chapters 8, 9, and 10, you explore how

to completely incorporate these elements

Note

Part III — Advanced Design Tools and Techniques

After you master the basics, you’re ready to learn about some of Dreamweaver’s true powertools in Part IV First up is one of the most important constructs of HTML: <div> tags, alsoknown in Dreamweaver as layers Chapter 11 examines this brave new world of pixel-perfectpositioning, layers that fly in and then disappear as if by magic, and Web sites that can changetheir look and feel at the click of a mouse Chapter 12 offers an in-depth look at the capabili-ties of Dreamweaver behaviors These bring a great deal of interactivity to layers specificallyand to your Web page in general Each standard behavior is covered in detail with step-by-step instructions

Chapter 13 examines the various uses of tables — from a clear presentation of data to ing entire Web pages Here you learn how to use Dreamweaver’s visual table editing capabili-ties to resize and reshape your HTML tables quickly Forms are an essential element in dynamicWeb page design, and you learn all about them in Chapter 14 Chapter 15 examines anotherfundamental HTML option: lists You study the list in all its forms: numbered lists, bulletedlists, definition lists, nested lists, and more

organiz-Chapter 16 is devoted to image maps and shows you how to use Dreamweaver’s built-inImage Map tools to create client-side image maps The chapter also explains how you canbuild server-side image maps and demonstrates a revised technique for creating image maprollovers Chapter 17 investigates the somewhat complex world of frames You see howDreamweaver has greatly simplified the task of building and managing these multifile cre-ations, particularly with the Frame objects You also learn how to handle more advanceddesign tasks such as updating multiple frames with just one click

Part IV — Incorporating Dynamic Data

Chapter 18 begins an in-depth investigation of Dreamweaver’s power to create dynamic Webpages by describing how to set up your basic connections and recordsets Chapter 19 explainshow to insert text from a data source on to your Web page and how to format it after it’sincorporated You also see how to relate other Web page elements — such as images, Flashmovies, and other media files — to a data source Chapter 20 continues the exploration bydelving into Dreamweaver’s powerful Repeat Region server behavior as well as discussingtechniques for hiding and showing your data at will

One of Dreamweaver’s most useful features, the Live Data Preview, is explored extensively inChapter 21 Chapter 22 enters the world of multipage applications and explains how variablesand other data can be passed from one page to another

Part V — Adding Multimedia Elements

In recent years, the Web has moved from a relatively static display of text and simple images

to a full-blown multimedia circus with streaming video, background music, and interactiveanimations Part V contains the power tools for incorporating various media files into yourWeb site

Graphics remain the key medium on the Web today, and Macromedia’s Fireworks is a top-notchgraphics generator Chapter 23 delves into methods for incorporating Fireworks graphics —with all the requisite rollover and other code intact Special focus is given to the Dreamweaver-to-Fireworks communication link and how your Web production efforts can benefit from it

xvi Dreamweaver MX 2004 Bible

In addition to Dreamweaver, Macromedia is perhaps best known for one other contribution toWeb multimedia: Flash Chapter 24 explores the possibilities offered by incorporating Flashand Shockwave movies into Dreamweaver-designed Web pages and includes everything youneed to know about configuring MIME types You also find step-by-step instructions for build-ing Shockwave inline controls and playing Shockwave movies in frame-based Web pages, aswell as how to add Flash Buttons, Flash Text, and the new Flash elements

Chapter 25 covers digital video in its many forms: downloadable AVI files, streaming RealVideodisplays, and panoramic QuickTime movies Chapter 26 focuses on digital audio, with coverage

of standard WAV and MIDI sound files as well as the newer streaming audio formats like MP3

Part VI — Enhancing Web Site Management and Workflow

Although Web page design gets all the glory, Web site management pays the bills In Part VI,you see how Dreamweaver makes this essential part of any Webmaster’s day easier to handle.Chapter 27 starts off with a look at the use of Dreamweaver Templates and how they can speed

up production while ensuring a unified look and feel across your Web site Chapter 28 coversthe Library, which can significantly reduce any Webmaster’s workload by providing reusable —and updatable — page elements Chapter 29 describes Dreamweaver’s built-in tools for main-taining cross- and backward-browser compatibility A Dreamweaver Technique demonstrates

a browser-checking Web page that automatically directs users to appropriate links

Until now, individual Web developers have been stymied when attempting to integrateDreamweaver into a team development environment File locking was all too easily subverted,allowing team members to inadvertently overwrite revisions Site reports were limited in scopeand output only to HTML, and, worst of all, version control was nonexistent Dreamweaver

MX 2004 addresses all these concerns while laying a foundation for future connectivity InChapter 30, you see how you can tie Dreamweaver into an existing Visual SourceSafe orWebDAV version control system Other new features covered include custom file viewcolumns and enhanced Design Notes accessibility

I can’t think of any new technology on the Web that has gained widespread acceptance asquickly as XML has In a nutshell, XML (short for Extensible Markup Language) enables you

to create your own custom tags that make the most sense for your business or profession.Although XML doesn’t enjoy full browser support as of this writing, it’s only a matter of time —and little time at that Chapter 31 shows you how to apply this fast-approaching technology oftomorrow in Dreamweaver today

Part VII — Extending Dreamweaver

Dreamweaver is a program with immense capabilities for expanding its own power Chapter 32explores the brave new world of Dreamweaver extensibility, with complete coverage of usingand building commands as well as custom tags, translators, floaters, and C-level Extensions.With its own set of objects and behaviors, Dreamweaver complements HTML’s extensibility.Chapter 33 shows you how you can use the built-in objects to accomplish most of your Web page layout chores quickly and efficiently And when you’re ready for increased automa-tion, the chapter explains how to build your own custom objects If you’re JavaScript-savvy,Chapter 34 gives you the material necessary to construct your own client-side behaviors andreduce your day-to-day workload Finally, Chapter 35 examines server behaviors, describingevery standard one in detail and then exploring the use of the Server Behavior Builder,Dreamweaver’s tool for creating custom server behaviors

The appendix describes the contents of the CD-ROM that accompanies this book Throughoutthis book, whenever you encounter a reference to files or programs on the CD-ROM, pleasecheck this appendix for more information

Conventions Used in This Book

I use the following conventions throughout this book

Windows and Macintosh conventions

Because Dreamweaver MX 2004 Bible is a cross-platform book, it gives instructions for both

Windows and Macintosh users when keystrokes for a particular task differ Throughout thisbook, the Windows keystrokes are given first; the Macintosh are given second in parentheses,

as follows:

To undo an action, press Ctrl+Z (Command+Z)

The first action instructs Windows users to press the Ctrl and Z keys in combination, and thesecond action (in parentheses) instructs Macintosh users to press the Command and Z keystogether

Key combinations

When you are instructed to press two or more keys simultaneously, each key in the tion is separated by a plus sign For example:

combina-Ctrl+Alt+T (Command+Option+T)The preceding tells you to press the three listed keys for your system at the same time Youcan also hold down one or more keys and then press the final key Release all the keys at thesame time

Mouse instructions

When instructed to click an item, move the mouse pointer to the specified item and click the

mouse button once Windows users use the left mouse button unless otherwise instructed

Double-click means clicking the mouse button twice in rapid succession.

When instructed to select or choose an item, you may click it once as previously described If

you are selecting text or multiple objects, click the mouse button once, press Shift, and thenmove the mouse to a new location and click again The color of the selected item or itemsinverts to indicate the selection To clear the selection, click once anywhere on the Web page

Menu commands

When instructed to select a command from a menu, you see the menu and the command separated by an arrow symbol For example, when instructed to execute the Open commandfrom the File menu, you see the notation File ➪ Open Some menus use submenus, in whichcase you see an arrow for each submenu, as follows: Insert ➪ Form Object ➪ Text Field

xviii Dreamweaver MX 2004 Bible

Typographical conventions

I use italic type for new terms and for emphasis and boldface type for text that you need to

type directly from the computer keyboard

Navigating This Book

Various signposts and icons are located throughout Dreamweaver MX 2004 Bible for your

assistance Each chapter begins with an overview of its information and ends with a quicksummary

Icons appear in the text to indicate important or especially helpful items Here’s a list of the icons and their functions:

Tips provide you with extra knowledge that separates the novice from the pro

Notes provide additional or critical information and technical data on the current topic

Sections marked with a New Feature icon detail an innovation introduced in Dreamweaver

The Caution icon is your warning of a potential problem or pitfall.

The On the CD-ROM icon indicates that the accompanying CD-ROM contains a related file inthe given folder See the appendix for more information about where to locate specific items

jlowery@idest.com

I can’t promise instantaneous turnaround, but I answer all my mail to the best of my abilities

On the CD-ROM Caution

Dreamweaver continues to grow with each release, and only a team of Web-savvy nel can describe its capabilities with grace and precision I’m extremely happy and

person-proud to have had just such a team involved in bringing Dreamweaver MX 2004 Bible to life.

Dan Short did an excellent job handling the increasingly complex dynamic side of Dreamweaver

I really appreciate all the work he did to bring the various server models to life — not to tion all the additional screen shots he had to take

men-Looking for a technical editor par excellence? Well, keep looking, ‘cause I’m hanging onto

mine Derren Whiteman has made sure the material is on the technical straight-and-narrowwith his wide-ranging expertise and adept juggling of multiple operating systems and configu-rations Thanks for all your work, Derren; you’ve really had a significant impact on the book.Macromedia has been wonderfully supportive of my efforts to bring out the most detailed

Bible possible I can only imagine the collective groan that goes up when yet another e-mailed

question from me — with a deadline, no less — arrives Warm thanks and heartfelt tion to Sho Kuwamoto, Alain Dumesney, Lori Hylan Cho, and all the other Dreamweaver engi-neers and techs who allowed me to pick their brains I’d also like to single out the DreamweaverTechnical Support staff, whose answers to users’ queries have been tremendous sources ofinformation And who’s that in the back of the room? Macromedia management — in the form

apprecia-of David Mendels, Beth Davis, David Deming, Susan Morrow, Jennifer Taylor, and others — hasopened many, many doors to me They should all stand up and take a bow And, finally, I andthe rest of the Dreamweaver community are beholden to Kevin Lynch and Paul Madar fortheir vision and hard work in bringing this dream home

To me, there’s no higher compliment than to be told that I know my business Well, the folks Iwork with at Wiley sure know their business: Executive Editor Chris Webb, Senior ProjectEditor Jodi Jensen, and all the additional support staff And to someone whose business is toknow my business, a double thank you with a cherry on top for my agent, Laura Belt, of Adler

& Robin Books

One last note of appreciation: To all the people who took a chance with some of their earned money and bought the previous editions of this book That small sound you hear inthe background is me applauding you as thanks for your support I hope my efforts continue

hard-to be worthy

Contents at a Glance

Foreword ixPreface xiAcknowledgments xxi

Part I: Dreamweaver MX 2004 Basics 1

Chapter 1: Introducing Dreamweaver MX 2004 3Chapter 2: A Dreamweaver Workflow Example 35Chapter 3: Touring Dreamweaver 57Chapter 4: Setting Your Preferences 137Chapter 5: Setting Up Sites and Servers 177

Part II: Web Design and Layout Fundamentals 211

Chapter 6: Accessing the Code Directly 213Chapter 7: Building Style Sheet Web Pages 267Chapter 8: Working with Text 301Chapter 9: Inserting Images 357Chapter 10: Establishing Web Links 397

Part III: Advanced Design Tools and Techniques 413

Chapter 11: Working with Divs and Layers 415Chapter 12: Using Behaviors 449Chapter 13: Setting Up Tables 485Chapter 14: Interactive Forms 531Chapter 15: Creating Lists 565Chapter 16: Making Client-Side Image Maps 589Chapter 17: Using Frames and Framesets 607

Part IV: Incorporating Dynamic Data 637

Chapter 18: Establishing Connections and Recordsets 639Chapter 19: Making Data Dynamic 669Chapter 20: Managing Data 689Chapter 21: Working with Live Data 707Chapter 22: Crafting Multiple-Page Applications 723

Part V: Adding Multimedia Elements 759

Chapter 23: Fireworks Integration 761Chapter 24: Inserting Flash and Shockwave Elements 783Chapter 25: Adding Video to Your Web Page 815Chapter 26: Using Audio on Your Web Page 837

Part VI: Enhancing Web Site Management and Workflow 855

Chapter 27: Using Dreamweaver Templates 857Chapter 28: Using Repeating Elements 899Chapter 29: Maximizing Browser Targeting 913Chapter 30: Building Web Sites with a Team 933Chapter 31: Integrating with XML 971

Part VII: Extending Dreamweaver 979

Chapter 32: Customizing Dreamweaver 981Chapter 33: Creating and Using Objects 1027Chapter 34: Creating a Behavior 1051Chapter 35: Handling Server Behaviors 1087

Appendix: What’s on the CD-ROM 1123Index 1127End-User License Agreement 1181

Foreword ix Preface xi Acknowledgments xxi

Chapter 1: Introducing Dreamweaver MX 2004 3

The Dynamic World of Dreamweaver 3Connecting to the world’s data 4True data representation 5Integrated visual and text editors 5World-class code editing 6Roundtrip HTML 8Web site maintenance tools 8Team-oriented site building 8The Dreamweaver Interface 9Easy text entry 9Drag-and-drop data fields 10One-stop object modification 10Accessing and managing resources 11Complete custom environment 11Managing keyboard shortcuts 12Simple selection process 13Enhanced layout options 14Plugin media preview 14Extended Find and Replace 14Up-to-Date Code Standards 14Cutting-edge CSS support 15Addressing accessibility 16Straightforward text and graphics support 16Enhanced table capabilities 16Easy form entry 17Click-and-drag frame setup 18Multimedia enhancements 19Next-Generation Features 19Flash and Fireworks integration 19Server-side behaviors 20Roundtrip XML 203D layers 21Dynamic style updates 22JavaScript behaviors 23

xxvi Dreamweaver MX 2004 Bible

Program Extensibility 24Objects and behaviors 24Server Behavior Builder 24Commands and floating panels 25Adjustable Insert bars 25Custom tags, translators, and Property inspectors 26Automation Enhancements 26Rapid application development with Application objects 26Importing office documents 27Reference panel 28History panel 28Site Management Tools 28Object libraries 28Super-charged templates 29Browser targeting 30Converting Web pages 31Verifying links 31FTP publishing 31Site map 32File check in/check out 32Summary 33

Chapter 2: A Dreamweaver Workflow Example 35

Setting Up a Site 35Making the Data Source Connection 39Home Page Layout 41Starting with the <head> 41Specifying page styles 42Initial graphic layout 44Including Client Text 46Adding Dynamic Content 48Inserting Server Behaviors 49Activating the Page with JavaScript 50Previewing and Posting Your Pages 52Summary 54

Chapter 3: Touring Dreamweaver 57

Choosing a Workspace Layout 57Viewing the Document Window 60Switching views in the Document window 61Working with the status bar 62Accessing the Toolbars 67The Document toolbar 67The Standard toolbar 70The Live Data toolbar 71Selecting from the Insert Bar 72Common objects 73Layout objects 76Forms objects 79Text objects 80HTML 83Application objects 85

Flash elements 88Favorites 89ASP objects 90ASP.NET objects 91CFML objects 92JSP objects 95PHP objects 96Getting the Most Out of the Property Inspector 97Manipulating the Property inspector 97Property inspector elements 98Customizing Your Workspace with Dockable Panels 100Hiding and showing panels 103Customizing panel groups 104Accessing the Menus 106The File menu 107The Edit menu 109The View menu 111The Insert menu 114The Modify menu 123The Text menu 127The Commands menu 130The Site menu 131The Window menu 132The Help menu 134Summary 135

Chapter 4: Setting Your Preferences 137

Customizing Your Environment 137General Preferences 137Preferences for invisible elements 142Panels preferences 144Highlighting preferences 145Status Bar preferences 146File Types / Editors preferences 148Office Copy/Paste preferences (Windows only) 151New Document preferences 151Adjusting Advanced Features 153Accessibility preferences 154Layout Mode preferences 155Layers preferences 156CSS Styles preferences 158Making Online Connections 159Site preferences 160Preview in Browser preferences 162Customizing Your Code 164Fonts preferences 164Code Hints preferences 165Code Rewriting preferences 167Code Colors preferences 169Code Format preferences 169Validator preferences 173Summary 174

xxviii Dreamweaver MX 2004 Bible

Chapter 5: Setting Up Sites and Servers 177

Planning Your Site 177Primary considerations 178Design options 179Mapping Dynamic Pages for Web Applications 182Defining a Site 183Using the Site Definition wizard 183Using Advanced mode 187Establishing local connections 187Specifying the remote site 189Adding Testing Server details 191Cloaking Site Folders 192Managing Site Info 193Working Directly with Servers 194Establishing a siteless server connection 194Accessing server files 197Creating and Saving New Pages 198Starting Dreamweaver 199Opening existing files 199Opening a new file 200Saving your file 201Saving to remote servers 201Closing the file 202Quitting the program 202Creating New Documents 203Using the New Document dialog box 203Creating a new default document 204Previewing Your Web Pages 204Putting Your Pages Online 206Transferring with FTP 207Using the FTP Log panel 208Summary 209

Chapter 6: Accessing the Code Directly 213

The Structure of a Web Page 214Expanding into XHTML 215doctype and doctype Switching 216Defining <head> Elements 217Establishing page properties 217Choosing a page palette 222Understanding <meta> and other <head> tags 223Adding to the <body> 231Logical styles 231Physical styles 232

Working with Code View and Code Inspector 232Enabling Code view options 235Printing code 236Enhancing Code Authoring Productivity 236Code Hints and Tag Completion 236Modifying blocks of code 239Inserting code with the Tag Chooser 241Adding Code through the Snippets Panel 242Using the Reference Panel 244Modifying Code with the Tag Inspector 246Rapid Tag Modification with the Quick Tag Editor 248Insert HTML mode 248Wrap Tag mode 251Edit Tag mode 252Adding Java Applets 254Adding JavaScript and VBScript 256Inserting JavaScript and VBScript 257Editing JavaScript and VBScript 257Validating Your Page 259Inserting Symbols and Special Characters 261Named characters 261Decimal characters and UTF-8 encoding 262Using the Character objects 262Summary 264

Chapter 7: Building Style Sheet Web Pages 267

Understanding Cascading Style Sheets 268Grouping properties 268Inheritance of properties 268Cascading characteristics 269Defining new class and ID selectors for extended design control 270How styles are applied 271Creating and Applying a Style Sheet in Dreamweaver 272Automatically created styles 273Applying styles through the Property inspector 275Attaching an external style sheet 275Applying, changing, and removing a style 277Defining new styles 279Editing and managing style sheets 282Styles and Their Attributes 286Type options 286Background options 288Block options 290Box options 292Border options 293List options 294Positioning options 294Extensions options 296Design Time Style Sheets 299Summary 300

xxx Dreamweaver MX 2004 Bible

Chapter 8: Working with Text 301

Starting with Headings 301Working with Paragraphs 303Editing paragraphs 305Checking Your Spelling 309Using Find and Replace 310Finding on the visual page 311Searching the code 316Concentrating your search with regular expressions 321Controlling Whitespace 326Indenting text 327Working with preformatted text 327The <br> tag 328Working with Microsoft Office Documents 330Copying and pasting Office content 330Dragging and dropping Word and Excel files 331Importing Word HTML 331Styling Your Text 335Depicting various styles 335Using the <address> tag 338Adding abbreviations and acronyms 338Modifying Text Format 339Adjusting font size 339Absolute size 342Relative size 343Adding font color 344Assigning a specific font 346Aligning text 350Indenting entire paragraphs 351Incorporating Dates 351Commenting Your Code 353Summary 355

Chapter 9: Inserting Images 357

Web Graphic Formats 357GIF 357JPEG 359PNG 360Using Inline Images 360Inserting images 361Dragging images from the Assets panel 364Optimizing and altering images 367Modifying image attributes 375Working with alignment options 378Adding Background Images 382Dividing the Web Page with Horizontal Rules 384Applying Simple Web Animation 386Dreamweaver Technique: Including Banner Ads 387

Inserting Rollover Images 389Adding a Navigation Bar 391Summary 394

Chapter 10: Establishing Web Links 397

Understanding URLs 397Surfing the Web with Hypertext 399Dreamweaver Technique: Eliminating underlines from links 401Inserting URLs from the Assets panel 403Pointing to a file 404Checking links 406Adding an E-Mail Link 407Navigating with Anchors 408Moving within the same document 409Using named anchors in a different page 410Targeting Your Links 411Summary 412

Chapter 11: Working with Divs and Layers 415

Divs and Layers 101 415Placing <div> tags 417Defining a CSS rule for a <div> tag 418Inserting the <div> tag 418Creating Layers with Dreamweaver 421Inserting a layer object 422Using the Insert Í Layout Objects Í Layer command 423Setting default characteristics of a layer 423Choosing relative instead of absolute positioning 425Modifying a Layer 426Selecting a layer 426Resizing a layer 426Moving a layer 427Using the Layer Property inspector 428The Layers panel 434Aligning layers with the ruler and grid 436Adding elements to a layer 438Forms and layers 439Creating Your Page Design with Layers 439Using the Tracing Image 440Preventing overlaps 441Activating Layers with Behaviors 441Drag Layer 442Set Text of Layer 444Show-Hide Layers 445Dreamweaver Technique: Creating a Loading Layer 446Summary 446

xxxii Dreamweaver MX 2004 Bible

Chapter 12: Using Behaviors 449

Understanding Behaviors, Events, and Actions 449Attaching a Behavior 450Using the Behaviors panel 451Adding a behavior 452Managing events 453Standard actions 455Installing, Managing, and Modifying Behaviors 482Altering the parameters of a behavior 483Sequencing behaviors 483Deleting behaviors 484Summary 484

Chapter 13: Setting Up Tables 485

HTML Table Fundamentals 485Rows 486Cells 487Column and row headings 487Inserting Tables in Dreamweaver 488Modifying Tables 491Selecting table elements 492Editing a table’s contents 496Working with table properties 499Setting cell, column, and row properties 509Working with Table Formats 512Sorting Tables 514Importing Tabular Data 516Designing with Layout Mode 518Drawing cells and tables 519Modifying layouts 524Summary 529

Chapter 14: Interactive Forms 531

How HTML Forms Work 531Inserting a Form in Dreamweaver 533Using Text Fields 535Text fields 535Password fields 536Multiline text areas 537Providing Checkboxes and Radio Buttons 541Checkboxes 541Radio buttons 541Creating Form Lists and Menus 544Drop-down menus 544Menu values 545Scrolling lists 546Navigating with a Jump Menu 548Modifying a jump menu 551Activating Go buttons 551Activating Your Form with Buttons 552Submit, Reset, and Command buttons 552Graphical buttons 553

Using the Hidden Field and the File Field 555The hidden input type 555The file input type 555Improving Accessibility 556Styling Forms with CSS 557Encompassing the form 558Altering input fields 559Distinguishing lists and menus 560Changing labels and legends 560Highlighting focus 562Summary 563

Chapter 15: Creating Lists 565

Creating Unordered (Bulleted) Lists 565Editing unordered lists 566List tags 567Using other bullet symbols 567Styling lists with CSS 569Mastering Ordered (Numbered) Lists 570Editing ordered lists 572Using other numbering styles 572Dreamweaver Technique: Creating Navigation Buttons from Lists 573Step 1: Preparing background graphics 574Step 2: Creating the list and containing <div> 575Step 3: Building the CSS styles 577Step 4: Applying the CSS 582Making Definition Lists 583Using Nested Lists 584Accessing Special List Types 586Menu lists 587Directory lists 587Summary 587

Chapter 16: Making Client-Side Image Maps 589

Client-Side Image Maps 589Creating Image Hotspots 591Using the drawing tools 593Modifying an image map 595Converting Client-Side Maps to Server-Side Maps 596Adapting the server script 596Including the map link 597Dreamweaver Technique: Building an

Image Map Rollover 598Step 1: Create two images 598Step 2: Set up the layers 599Step 3: Make the image map 601Step 4: Attach the behaviors 602Step 5: Add the clipping 603Summary 605

xxxiv Dreamweaver MX 2004 Bible

Chapter 17: Using Frames and Framesets 607

Frames and Framesets: The Basics 608Columns and rows 608Sizing frames 608Creating a Frameset and Frames 609Creating a new frameset file 609Hand-coding framesets 611Creating a frameset visually 611Creating framesets quickly with frame objects 613Adding More Frames 616Using the menus 616Using the mouse 617Selecting, Saving, and Closing Framesets 618Selecting framesets and frames 618Saving framesets and frames 619Closing framesets 619Working with the Frameset Property Inspector 620Resizing frames in a frameset 620Manipulating frameset borders 621Modifying a Frame 622Page properties 622Working with the Frame Property inspector 623Modifying content 627Deleting frames 628Targeting Frame Content 628Targeting sections of your frameset 628Targeting specific frames in your frameset 629Updating two or more frames at once 629Handling Frameless Browsers 631Investigating iframes 632Summary 635

Chapter 18: Establishing Connections and Recordsets 639

Data Source Basics 639Understanding How Active Content Pages Work 642Opening a Connection to a Data Source 643Using Data Source Names (DSN) 645Specifying connection strings 652PHP 657Managing Connections 657Extracting Recordsets 658Building simple recordsets 659Writing advanced SQL statements 661Working with recordsets 665Summary 666

Chapter 19: Making Data Dynamic 669

Working with Dynamic Text 669Inserting dynamic text 669Viewing dynamic data 671Formatting Dynamic Data 673Data formatting 673Editing and creating new data formats 681Making Images Dynamic 682Integrating Flash and Other Dynamic Media 685Summary 687

Chapter 20: Managing Data 689

Displaying Data Conditionally 689Repeating data 689Showing and hiding page elements 692Handling Record Navigation 695Building record navigation links 695Using Application objects for record navigation 697Tracking record status 698Dreamweaver Technique: Using Flash Buttons for Recordset Navigation 699Step 1: Prepare the page 700Step 2: Add the Flash buttons 701Step 3: Include the JavaScript functions 702Step 4: Insert the hidden variables 704Summary 706

Chapter 21: Working with Live Data 707

Viewing Live Data 708How Live Data works 708Setting up for Live Data 708Entering and exiting Live Data view 712Making changes in Live Data 713Live Data Settings 714Getting the query string 714Posting responses with Live Data settings 716Previewing in the Browser 718Using the Server Debug Panel with ColdFusion MX 719Summary 722

Chapter 22: Crafting Multiple-Page Applications 723

Using the URL to Pass Parameters 723Sending parameters 724Receiving parameters 726Automating master-detail page production 729Getting Values from a Form 733Passing single values from a form 734Passing multiple values from a form 735Passing form and URL values to a related page 736

xxxvi Dreamweaver MX 2004 Bible

Dreamweaver Technique: Building a Search Engine 737Establishing Dynamic Form Elements 738Text fields 738Checkboxes 740Radio buttons 741List/Menus 742Managing Data Sources Online 743Inserting data 743Updating data 746Deleting data 749Inserting Variables 750Application and session variables 751Request and other variables 751Connecting to the Customer 752Logging in existing customers 752Restricting access 753Helping users log out 755Adding new customers 756Summary 757

Chapter 23: Fireworks Integration 761

Easy Graphics Modification 762Optimizing an image in Fireworks 762Editing an image in Fireworks 766Replacing an image placeholder using Fireworks 767Inserting Rollovers 768Using Dreamweaver’s behaviors 769Using Fireworks’ code 771Modifying sliced images 774Editing Fireworks-Created Pop-Up Menus 775Controlling Fireworks with Dreamweaver 776Creating a Web photo album 776Building Dreamweaver/Fireworks extensions 780Summary 782

Chapter 24: Inserting Flash and Shockwave Elements 783

Director and Flash: What’s the Difference? 784Including Flash and Shockwave Movies in Dreamweaver Projects 786Specifying Shockwave Properties 788Additional parameters for Shockwave 790Automatic settings for Shockwave files 790Designating Flash Attributes 791Setting the scale in Flash movies 792Additional parameters for Flash 793Integrating Flash Elements 794Working with the Image Viewer 795Adding other Flash elements 799

Creating Flash Buttons 800Working with Flash Text 802Configuring MIME Types 804Managing Links in Flash Movies with Dreamweaver 805Providing User Interaction with Flash and Shockwave Movies 806Dreamweaver Technique: Creating inline controls 807Dreamweaver Technique: Playing movies in frames 808Dreamweaver Technique: Triggering behaviors from Flash movies 810Editing Flash Movies from within Dreamweaver 812Summary 814

Chapter 25: Adding Video to Your Web Page 815

Video on the Web 815The Streaming Media Big Three 816RealMedia 816QuickTime 818Windows Media 819Working with Video Clips 820Linking to video 821Embedding video 822Playing Videos Within Dreamweaver 822Inserting QuickTime Movies 824QuickTime versions 829Playing QuickTime VR 829Streaming with RealMedia 832Creating RealMedia metafiles 832Inserting RealMedia in your Web page 833Summary 835

Chapter 26: Using Audio on Your Web Page 837

Digital Audio Fundamentals 837File formats 837Making audio files lighter 839MIDI Files 841MP3 Mini-Primer 842Player support 842Encoding MP3 843Linking to Audio Files 843Embedding Sounds and Music 844Playing background music 846Targeting Specific Plugins 847Windows Media Player audio 847Using Embed with ActiveX 849Installing Streaming Audio 850Working with floating or embedded RealAudio players 850Accessing RealAudio parameters 853Summary 854