Adobe Dreamweaver CS3 Unleashed

This book is the most comprehensive and independent resource for experienced web developers who want to plan, architect, develop, and deploy state-of-the-art websites, applications, and services.

 

Expert web developer and trainer Zak Ruvalcaba brings together real-world insights and advanced techniques for every facet of contemporary web development, from site management to data-driven applications and multimedia content to security. Ruvalcaba systematically illuminates the major improvements Adobe has brought to Dreamweaver CS3, including its powerful new Spry framework for Ajax development, its innovative CSS browser compatibility checking, and more.

 

You’ll learn how to smoothly integrate Dreamweaver CS3 with other key web design and development tools, ranging from Photoshop to Flash to databases. You’ll also discover how to use Dreamweaver CS3 to improve team collaboration, automate workflow, streamline content management, and reuse assets more efficiently.

 

Detailed information on how to…

• Get productive with Dreamweaver CS3 development fast, whether you’re new to Dreamweaver or upgrading from previous versions
• Create more effective, compatible CSS sites–and leverage Dreamweaver CS3’s powerful new CSS templates
• Streamline and automate workflow across your development and content teams
• Incorporate animation, video, and audio, including Adobe Flash content
• Make the most of databases and SQL queries in your sites and applications
• Build dynamic pages and sites that integrate everything from search functionality to user authentication
• Implement high-performance web services with Adobe Dreamweaver CS3
• Use Adobe’s new Spry framework, widgets, and effects to quickly build rich XML-based applications

 

Zak Ruvalcaba has been researching, designing, and developing for the Web since 1995. He’s built websites and applications for such companies as Gateway, HP, Toshiba, IBM, Intuit, Peachtree, Dell, Qualcomm, Microsoft, and many others. Aside from teaching and holding design lectures on various technologies and tools, including Dreamweaver, ASP.NET, and Flash, for the San Diego Community College District and Palomar Community College, he is the author of the 10 Minute Guide to Dreamweaver 4 from Que Publishing, Build Your Own ASP.NET 2.0 Website Using C# and VB.NET from SitePoint Press, and Beginning Expression Web from Wrox.

 

Register your book at www.samspublishing.com/register for convenient access to updates and example source code from this book.

Table of Contents

Part I: Getting Up to Speed with Dreamweaver CS3

 

1 The Dreamweaver CS3 Interface................................................3

New Dreamweaver CS3 Features ....................................................................3

The Welcome Screen.......................................................................................5

The Document Window .................................................................................6

    The Tabbed File Chooser .......................................................................7

    The Document Toolbar..........................................................................8

    The Standard Toolbar ..........................................................................20

    The Style Rendering Toolbar ...............................................................21

    The Status Bar ......................................................................................21

Context Menus .............................................................................................25

The Insert Bar................................................................................................26

    Common Objects.................................................................................27

    Layout Objects .....................................................................................29

    Form Objects........................................................................................30

    Data Objects.........................................................................................30

    Spry Objects .........................................................................................32

    Text Objects .........................................................................................32

    Favorites ...............................................................................................33

The Property Inspector .................................................................................34

Panels ............................................................................................................36

    Interacting with Panels........................................................................36

    The CSS Styles Panel............................................................................39

    The AP Elements Panel........................................................................39

    The Application Panel Group..............................................................39

    The Files Panel .....................................................................................39

    The Assets Panel ..................................................................................39

    The Snippets Panel ..............................................................................40

    The Tag Inspector Panel Group...........................................................43

    The Behaviors Panel ............................................................................44

    The Results Panel.................................................................................44

    The Reference Panel.............................................................................44

    The History Panel ................................................................................44

    The Frames Panel.................................................................................45

    The Code Inspector .............................................................................45

    The Timelines Panel ............................................................................45

    Workspace Layouts ..............................................................................46

The Menu Bar................................................................................................46

Summary .......................................................................................................47

 

2 Building a Web Page................................................49

Creating a New Document ...........................................................................50

Working with a New Document in Design View.........................................54

    Modifying the Page Properties ............................................................55

    Working with Text...............................................................................59

Inserting the Time and Date.........................................................................83

Inserting a Horizontal Rule...........................................................................84

Working with Images....................................................................................86

    Inserting Images into a Dreamweaver Document ..............................87

    Formatting Images Within a Document.............................................89

    Image Placeholders ..............................................................................92

    Rollover Images ...................................................................................93

Working with Hyperlinks .............................................................................95

    Linking Text.........................................................................................97

    Email Links ..........................................................................................99

    Linking Images ..................................................................................100

    Image Maps........................................................................................101

    Named Anchors .................................................................................103

    Creating a Navigation Bar .................................................................106

Working with a Web Page in Code View ...................................................109

    Code Hints.........................................................................................109

    The Code View Toolbar .....................................................................111

    Code Collapse ....................................................................................113

    The Tag Inspector ..............................................................................114

    Using the Tag Chooser ......................................................................115

    Working with Snippets ......................................................................117

Summary .....................................................................................................119

 

3 Dreamweaver Site Management.....................121

The Importance of Defining Sites in Dreamweaver...................................122

Defining a New Site in Dreamweaver ........................................................124

    The Site Definition Window .............................................................126

Managing a Website in Dreamweaver ........................................................145

    Uploading Your Files to a Remote Server..........................................149

    Building a Site Map ...........................................................................156

    Checking Links Sitewide ...................................................................160

    Changing Links Sitewide...................................................................164

    Creating Site Reports .........................................................................164

Using Advanced Site Management Options...............................................167

Summary .....................................................................................................168

 

4 Defining Preferences.....................169

Using the Preferences Dialog......................................................................170

    The General Category........................................................................172

    The Accessibility Category ................................................................174

    The AP Elements Category ................................................................175

    The Code Coloring Category ............................................................176

    The Code Format Category ...............................................................178

    The Code Hints Category..................................................................181

    The Code Rewriting Category ...........................................................182

    The Copy/Paste Category ..................................................................184

    The CSS Styles Category ....................................................................185

    The File Compare Category...............................................................186

    The File Types/Editors Category........................................................188

    The Fonts Category............................................................................190

    The Highlighting Category................................................................192

    The Invisible Elements Category.......................................................193

    The Layout Mode Category...............................................................194

    The New Document Category...........................................................195

    The Preview in Browser Category .....................................................196

    The Site Category...............................................................................199

    The Status Bar Category ....................................................................201

    The Validator Category......................................................................203

Setting Keyboard Shortcuts.........................................................................204

Working with Tag Libraries.........................................................................207

Summary .....................................................................................................213

Part II Static Web Page Development

5 Web Page Structuring Using Tables.....................217

Inserting and Working with Tables ............................................................218

Selecting Table Elements.............................................................................222

Modifying Table Properties Using the Property Inspector.........................224

    The Table ID.......................................................................................226

    Adding and Removing Rows and Columns......................................227

    Changing Table Sizes .........................................................................228

    Setting a Background Color or Background Image...........................230

    Modifying Cell Padding and Cell Spacing ........................................232

    Table Alignment ................................................................................235

    Working with Table Borders ..............................................................237

    Converting Table Widths to a Percentage or Pixels..........................237

Modifying Cell Properties Using the Property Inspector...........................238

    Changing Cell Widths and Heights ..................................................239

    Splitting and Merging Cells...............................................................242

    Setting Horizontal and Vertical Alignments .....................................244

    Setting the Background Color, Image, Border Color, and Cell Wrapping .......245

    Converting a Cell to a Header...........................................................249

    Nesting Tables....................................................................................250

Working with Tables in Expanded Tables Mode ........................................251

Inserting and Working with Tables in Layout Mode .................................253

Drawing Tables............................................................................................254

Drawing Cells..............................................................................................259

    Adding Content to Layout Cells .......................................................262

    Working with Autostretch Tables......................................................264

Importing Tabular Data ..............................................................................266

    Sorting Tables.....................................................................................269

    Tracing Images ...................................................................................271

Summary .....................................................................................................273

 

6 Page Formatting Using Cascading Style Sheets.....................275

An Introduction to CSS ..............................................................................276

CSS Versus HTML........................................................................................280

Browser Support for CSS .............................................................................283

Designing CSS Using Dreamweaver and the CSS Styles Panel ..................285

    Creating a Style Class Within an External Style Sheet .....................292

    Applying Style Classes to Elements on Your Page ............................304

Designing Styles by Redefining HTML Tags...............................................307

Working with Pseudoclasses .......................................................................308

Designing CSS Styles by Using IDs.............................................................310

Attaching a Style Sheet ...............................................................................313

Tips and Tricks for Using CSS.....................................................................316

    Editing CSS Files in Dreamweaver’s Code View................................316

    Validating Your CSS ...........................................................................317

    Using Design-Time Style Sheets ........................................................318

    Using CSS Advisor .............................................................................320

Summary .....................................................................................................322

 

7 Page Structuring Using Cascading Style Sheets.....................323

Introduction to AP Elements ......................................................................324

Working with AP Elements.........................................................................326

    Inserting an AP Element....................................................................327

    Drawing an AP Element ....................................................................328

    Inserting Content into AP Elements .................................................328

    Modifying AP Element Properties with the Property Inspector .......330

    Modifying AP Element Properties with the AP Elements Panel.......333

    Deleting an AP Element ....................................................................337

Designing Tableless Web Pages Using AP Elements ...................................337

    Designing AP Elements Using a Style Sheet .....................................337

    Inserting DIV Tags .............................................................................341

    Converting AP Elements to Tables for Backward Compatibility......344

Built-In CSS Page Layouts...........................................................................348

Summary .....................................................................................................350

 

8 Working with Frames and Framesets.....................351

Understanding Framed Websites ................................................................351

    The Advantages of Frames.................................................................353

    The Disadvantages of Frames ............................................................354

Working with Frames and Framesets..........................................................355

    Creating a New Website Using Prebuilt Framesets ...........................355

    Alternate Methods of Creating Framesets.........................................357

Adjusting Frame Attributes.........................................................................358

    Changing Page Properties..................................................................359

    Setting Frame Names.........................................................................361

    Setting Scroll Properties.....................................................................362

    Frame Resize.......................................................................................362

    Adjusting Borders and Border Color .................................................363

    Margin Width and Height.................................................................363

Adjusting Frameset Attributes ....................................................................363

    Borders, Border Width, and Border Color.........................................365

    Row Height and Column Width .......................................................365

Adding Content to Frames .........................................................................366

Saving Frames and Framesets .....................................................................369

Targeting Frames .........................................................................................371

IFrames ........................................................................................................373

Targeting Browsers That Don’t Support Frames.........................................374

Summary .....................................................................................................375

 

9 Working with HTML Forms.....................377

An Introduction to HTML Forms ...............................................................377

Working with Forms and Form Objects .....................................................380

    Text Fields, Password Fields, and Textarea ........................................383

    Check Boxes.......................................................................................386

    Radio Buttons and Radio Groups......................................................388

    Lists and Menus.................................................................................391

    Buttons...............................................................................................394

    Test the Form .....................................................................................395

    Image Field.........................................................................................396

    File Field.............................................................................................398

    Hidden Field ......................................................................................398

    Jump Menu........................................................................................399

    Fieldsets..............................................................................................402

    Labels .................................................................................................403

Summary .....................................................................................................404

 

10 Using Dreamweaver Behaviors.....................405

An Introduction to Behaviors.....................................................................406

Using the Behaviors Panel ..........................................................................408

Dreamweaver Behaviors..............................................................................411

    Call JavaScript....................................................................................413

    Change Property................................................................................414

    Check Plugin......................................................................................416

    Drag AP Element................................................................................418

    Effects Behaviors ................................................................................419

    Go to URL ..........................................................................................429

    Jump Menu and Jump Menu Go ......................................................430

    Open Browser Window .....................................................................432

    Preload Images...................................................................................435

    Set Nav Bar Image..............................................................................435

    Set Text...............................................................................................438

    Show-Hide Elements..........................................................................439

    Swap Image and Swap Image Restore ...............................................439

    Timeline .............................................................................................441

    Validate Form.....................................................................................441

    Deprecated Behaviors ........................................................................443

Summary .....................................................................................................454

 

Part III Team Collaboration and Task Automation

 

11 Building Dreamweaver Websites Within Teams.....................457

Using File Check In and Check Out...........................................................458

    Enabling Check In and Check Out ...................................................460

    Checking Files In and Out ................................................................462

Maintaining Design Notes..........................................................................464

    Enabling Design Notes ......................................................................464

    Setting the Status of Files with Design Notes ...................................465

    Creating Customized Design Notes ..................................................466

    Viewing Design Notes........................................................................468

File View Column Sharing..........................................................................470

Generating Workflow Site Reports .............................................................471

    Checked Out By Reports....................................................................472

    Design Notes Reports.........................................................................473

    Recently Modified Reports ................................................................474

Implementing Source Control with Visual SourceSafe ..............................476

Using WebDAV............................................................................................481

Summary .....................................................................................................484

 

12 Managing Website Content Using Contribute.....................485

Content Management Using Contribute ...................................................486

    Installing Contribute .........................................................................487

Administrating Contribute-Enabled Sites in Dreamweaver.......................488

    Defining Users and Roles...................................................................492

    Administration...................................................................................498

    Publishing Server ...............................................................................499

    Web Server .........................................................................................501

    Rollbacks ............................................................................................502

    New Pages ..........................................................................................503

    Compatibility.....................................................................................503

    Enable PDF Embedding .....................................................................504

Sending Connection Keys to Contribute Users .........................................504

Using Contribute to Make Basic Edits........................................................507

Rolling Back Pages in Dreamweaver...........................................................510

Summary .....................................................................................................512

 

13 Enhancing Workflow.....................513

Working with the Assets Panel ...................................................................513

    How the Assets Panel Works .............................................................516

    Refreshing the Assets Panel ...............................................................517

    Inserting Assets into Your Web Pages................................................519

    Customizing the Assets Panel ...........................................................520

    Managing Your Assets........................................................................521

    Editing Assets.....................................................................................523

    Adding Assets to Your Favorites ........................................................525

Using Find and Replace ..............................................................................529

Using the History Panel..............................................................................533

Working with Commands ..........................................................................534

    Recording New Commands...............................................................534

    Apply Source Formatting...................................................................537

    Clean Up (X)HTML and Clean Up Word HTML ..............................539

Summary .....................................................................................................541

 

14 Working with Templates.....................543

Understanding Dreamweaver Templates....................................................544

    Creating a New Template ..................................................................546

    Defining Editable Regions .................................................................549

    Deriving a New Page from a Template..............................................551

    Creating an Editable Tag Attribute....................................................554

Working with Repeating Regions ...............................................................557

    Adding Content to Repeating Regions..............................................559

Defining Optional Regions .........................................................................560

    Combining Editable and Optional Regions......................................562

    Setting Optional Region Properties...................................................563

Nested Templates ........................................................................................564

Templates and the Assets Panel ..................................................................566

    Managing Templates Using the Assets Panel ....................................567

    Applying Templates to Existing Pages...............................................569

Removing Template Markup ......................................................................571

Changing the Default Document...............................................................572

Summary .....................................................................................................572

 

15 Working with Library Items.....................573

Understanding Library Items......................................................................574

Using the Assets Panel to Manage Library Items .......................................575

    Creating Library Items.......................................................................577

    Inserting Library Items into Web Pages ............................................581

    Editing Library Items and Updating the Site ....................................582

    Renaming Library Items ....................................................................583

    Moving Library Items to a New Site .................................................584

    Deleting Library Items.......................................................................584

Working with Server-Side Includes.............................................................585

Summary .....................................................................................................588

Part IV Incorporating Multimedia and Animation

16 Working with the Timeline.....................591

Animation with the Timeline.....................................................................592

    How the Timeline Works...................................................................593

    Recording the Path of an AP Element...............................................603

    Managing Multiple Timelines ...........................................................604

Behaviors and the Timeline........................................................................606

    Controlling the Timeline with Behaviors .........................................606

    Creating an Animated Pop-Up Menu ...............................................607

    Creating an Image Slideshow............................................................611

Summary .....................................................................................................612

 

17 Incorporating Video and Audio.....................613

Video on the Web .......................................................................................614

    Download, Progressive Download, and Streaming...........................614

Media Players ..............................................................................................616

    RealMedia...........................................................................................616

    QuickTime..........................................................................................617

    Windows Media.................................................................................618

    Flash Video ........................................................................................618

Working with Video Clips ..........................................................................619

    Linking Video ....................................................................................620

    Embedding Video ..............................................................................620

    Passing Parameters into Video Files ..................................................623

    Encoding Flash Video ........................................................................626

    Embedding Flash Video.....................................................................630

Audio on the Web.......................................................................................632

    Audio File Formats.............................................................................632

    Linking to Audio Files .......................................................................633

    Embedding Audio Files......................................................................634

    Playing Background Music ................................................................636

Summary .....................................................................................................637

 

18 Integrating with Fireworks and Photoshop.....................639

Specifying External Editors .........................................................................640

Editing Images in Dreamweaver with Fireworks or Photoshop ................642

Browsing Images in Adobe Bridge ..............................................................646

Replacing Image Placeholders ....................................................................648

Optimizing Images......................................................................................649

    The Options Tab ................................................................................650

    The File Tab........................................................................................652

    The Animation Tab............................................................................652

    Additional Options in the Image Preview Dialog.............................653

Creating Rollover Buttons in Fireworks .....................................................656

Inserting Fireworks HTML ..........................................................................659

Creating a Web Photo Album.....................................................................659

Summary .....................................................................................................663

 

19 Integrating with Flash.....................665

Inserting Flash Movies into Dreamweaver Documents .............................666

    Additional Flash Parameters..............................................................669

Working with Flash Elements in Dreamweaver .........................................670

    Using the Image Viewer ....................................................................671

    Creating Flash Buttons ......................................................................674