Dreamweaver CS5

David Sawyer McFarland

TIB/UB Hannover

POGUE PRESS'

O'REILLY

Beijing• Cambridge • Farnham • Koln ' Sebastopol • Taipei • Tokyo

Table of Contents

The Missing Credits xvii

Introduction 1

Part One: Building a Web Page

Chapter 1: Dreamweaver CS5 Guided Tour 19

The Dreamweaver CS5 Interface 19

The Document Window 20

The Insert Panel 23

The Files Panel 27

The Property Inspector 28

The Application Bar 30

Organizing Your Workspace 31

Setting Up a Site 37

Creating a Web Page 40

The Dreamweaver Test Drive 45

Phase 1: Getting Dreamweaver in Shape 46

Phase 2: Creating a Website 48

Phase 3: Creating and Saving a Web Page 50

Phase 4: Adding Images and Text 55

Phase 5: Preview Your Work 62

Phase 6: Finishing the Page 66

Chapter 2: Adding Text to Your Web Pages 73

Adding Text in Dreamweaver 73

Adding Special Characters 74

Line Breaks 75

Nonbreaking Spaces 76

Multiple Spaces 77

Adding a Date to Your Page 78

Copying and Pasting Text 79

Simple Copy and Paste 79

Paste Special 80

Pasting Text from Word: The Basic Method 82

Pasting Text with Word Formatting 83

Pasting Excel Spreadsheet Information 84

Importing Word and Excel Documents (Windows) 84

Selecting Text 85

Spell Checking 86

About Dictionaries 88

Performing the Check 89

Chapter 3: Text Formatting 91

Paragraph Formatting 93

Paragraphs 93

Headlines 95

Preformatted Text 96

Paragraph Alignment 96

Indented Paragraphs 97

Creating and Formatting Lists 98

Bulleted and Numbered Lists 98

Reformatting Bulleted and Numbered Lists 100

Definition Lists 104

Removing and Deleting List Items 104

Text Styles 106

Chapter 4: Introducing Cascading Style Sheets 109

Cascading Style Sheet Basics 110

Why Use CSS? 110

Internal vs. External Style Sheets Ill

Types of Styles 112

Creating Styles 113

Phase 1: Set Up the CSS Type 113

Phase 2: Defining the Style 116

Creating a Style with the Property Inspector 117

Using Styles 119

Applying a Class Style 119

Removing a Class Style 122

Applying IDs to a Tag 123

Linking to an External Style Sheet 123

Manipulating Styles 124

Editing Styles 124

Deleting a Style 126

Renaming a Class Style 126

Duplicating a Style 128

IV TABLE OF CONTENTS

Text Formatting with CSS 128

Choosing a Font 129

Changing the Font Size 133

Picking a Font Color 136

Adding Bold and Italic 136

Aligning Text 137

CSS Type Properties in the Rule Definition Window 138

Block Properties 140

List Properties 143

Cascading Style Sheets Tutorial 144

Setting Up 144

Creating an External Style Sheet 145

Editing a Style 147

Adding Another Style 150

Creating a Class Style 152

Attaching an External Style Sheet 155

Chapter 5: Links 159

Understanding Links 159

Absolute Links 160

Document-Relative Links 160

Root-Relative Links 161

Link Types in Action 163

Executive Summary 165

Adding a Link 165

Browsing for a File 165

Using the Point-to-File Tool 169

Typing (or Pasting) the URL or Path 169

Using the Hyperlink Object 171

Adding an Email Link 174

Linking Within a Web Page 175

Method 1: Creating a Named Anchor 176

Method 2: Adding an ID 176

Linking to an Anchor or ID 178

Viewing and Hiding Anchors 178

Modifying a Link 179

Changing a Link's Destination 179

Removing a Link 179

Styling Links 180

CSS and Links 181

Creating a Navigation Menu 184

Adding a Menu 184

Adding, Editing, and Removing Links 186

Changing the Look of the Navigation Menu 188

Link Tutorial 195

Linking to Other Pages and Websites 195

TABLE OF CONTENTS

Formatting Links 197

Adding a Navigation Bar 198

Styling the Menu Bar 203

Submenus and Rollover Buttons 207

Chapter 6: Images 21!

Adding Images 211

Adding an Image Placeholder 214

Inserting an Image from Photoshop 216

Method 1: Using the Insert Image Object 216

Method 2: Copying and Pasting from Photoshop 222

Modifying an Image 223

Adding an ID to an Image 223

Adding a Text Description to an Image 224

Changing an Image's Size 224

Some Properties to Avoid 226

Controlling Images with CSS 227

Wrapping Text Around an Image 228

Adding Borders 230

Background Images 231

Editing Graphics 234

Dreamweaver's Built-in Editing Tools 235

Setting Up an External Editor 238

Editing Smart Objects 240

Editing Images Pasted from Photoshop 243

Optimizing an Image 243

Image Maps 244

Editing a Hotspot's Properties 246

Rollover Images 246

Tutorial: Inserting and Formatting Graphics 249

Setting Up 249

Adding an Image 250

Inserting a Photoshop File 251

Inserting a Rollover Image 256

Using Background Images 257

Chapter 7: Tables 261

Table Basics 262

Inserting a Table 263

Selecting Parts of a Table 266

Selecting a Table 266

Selecting Rows or Columns 266

Selecting Cells 267

Expanded Table Mode 268

Formatting Tables 268

Aligning Tables 269

TABLE OF CONTENTS

Clearing Height and Width Values 269

Resizing a Table 270

Modifying Cell and Row Properties 271

Alignment Properties 271

Table Header 272

A Property to Forget 272

Cell Decoration 273

Setting Cell Dimensions 274

Tips for Surviving Table-Making 274

Adding and Removing Cells 276

Adding One Row or Column 276

Adding Multiple Rows or Columns 277

Deleting Rows and Columns 278

Merging and Splitting Cells 279

Tabular Data 280

Importing Data into a Table 281

Sorting Data in a Table 282

Exporting Table Data 284

Tables Tutorial 285

Adding a Table and Data 285

Modifying the Table 287

Formatting the Table 288

Final Improvements 292

Part Two: Building a Better Web Page

Chapter 8: Advanced CSS 297

Compound Selectors 297

Descendent Selectors 298

Styling Groups of Tags 303

Fast Style Editing With the Properties Pane 304

Moving and Managing Styles 306

More about CSS 311

Inheritance 311

The Cascade 312

The Other Side of the CSS Styles Panel 314

Using the Code Navigator 317

Styling for Print 320

Previewing Media Styles in Dreamweaver 322

Tips for Printer Style Sheets 324

Chapter 9: Page Layout 327

Types of Web Page Layouts 329

Float Layout Basics 331

The Mighty <div>Tag 331

TABLE OF CONTENTS

The Insert Div Tag Tool 333

A Simple Example 335

Understanding the Box Model 339

Dreamweaver's CSS Layouts 344

The Structure of Dreamweaver's CSS Layouts 349

Modifying Dreamweaver's CSS Layouts 351

Making General Changes to a CSS Layout 351

Modifying Fixed Layouts 353

Modifying Liquid Layouts 354

Other Styles to Change 355

Absolute Positioning 356

The CSS Positioning Properties 357

Adding an AP Div to Your Page 365

Drawing AP Divs 368

The AP Elements Panel 368

Modifying AP Element Properties 370

Resizing Absolutely Positioned Elements 370

Moving AP Elements 371

Aligning AP Elements 372

Background Image and Color 373

Nesting AP Divs 373

CSS Layout Tutorial 374

Adding Content 377

Fine-Tuning the Layout 379

Adding Styles and Navigation 384

Fiddling with the Footer 385

Chapter 10: Troubleshooting CSS 391

Analyzing CSS with Dreamweaver 391

Editing CSS Properties 393

Analyzing CSS in JavaScript and Server-Side Pages 394

Checking Browser Compatibility 398

Overcoming Common CSS Problems 401

Clearing and Containing Floats 401

Avoiding Float "Drops" 405

Handling Internet Explorer 6 Bugs 407

Double-Margin Bug 407

Other IE Problems 408

Chapter 11: Under the Hood: HTML 411

Controlling How Dreamweaver Handles HTML 411

Auto-Fixing Your Code 412

Web Application Server Pages 413

Special Characters and Encoding 414

CodeView 415

Coding Toolbar 420

viii tabu; of contents

Code Hints 422

Code Collapse 427

Setting Code Formats 430

Related Files 433

Live Code 437

Quick Tag Editor 439

Using the Quick Tag Editor 440

Tag Inspector 441

Comparing Versions of a Web Page 441

Using WinMerge to Compare Files 445

Using Text Wrangler to Compare Files 447

Reference Panel 448

Inserting JavaScript 450

Part Three: Bringing YourPages to Life

Chapter 12: Forms 453

Form Basics 453

The Code Backstage 454

Creating a Form 456

Adding Form Elements 459

What All Form Elements Have in Common 460

Text Fields 463

Checkboxes and Checkbox Groups 466

Radio Buttons and Radio Groups 469

Pull-Down Menus and Lists 470

File Field 473

Hidden Field 474

Buttons 475

<label> Tag 477

<fieldset> Tag 478

Validating Forms 478

Spry Validation Basics 479

Formatting Spry Error Messages and Fields 484

Spry Text Field 486

Spry Text Area 493

Spry Checkbox 494

Spry Select 497

Spry Password 498

Spry Confirm 500

Spry Radio Group 501

Forms Tutorial 502

Insert a Form and Add a Form Field 503

Adding a Spry Validation Text Field 507

TABLE OF CONTENTS i»

Adding a Spry Form Menu 512

Adding a Spry Radio Group 514

Completing and Testing the Form 516

Chapter 13: Spry: Creating Interactive Web Pages 519

What is Spry? 519

Tabbed Panels 520

Adding a Tabbed Panel 521

Adding and Editing Panel Content 523

Formatting Tabbed Panels 524

Accordions 528

Adding an Accordion 528

Adding and Editing Accordion Content 530

Formatting a Spry Accordion 530

Collapsible Panels 534

Adding a Collapsible Panel 534

Adding Content to a Collapsible Panel 536

Formatting a Collapsible Panel 537

Spry Tooltips 539

Adding a Spry Tooltip 539

Adding Content to a Tooltip 543

Formatting a Tooltip 544

Spry Data Sets 544

Storing Data in an HTML File 546

Storing Data in an XML File 548

Inserting a Spry Data Set 552

Inserting HTML Data 554

Inserting XML Data 559

Choosing a Data Layout 562

Creating a Spry Region 571

The Bindings Panel 573

Spry Repeating Region 574

Spry Repeat Lists 577

Live View 578

Chapter 14: Dreamweaver Behaviors 581

Understanding Behaviors 582

Behavior Elements 582

More About Events 582

Applying Behaviors 583

The Behaviors Panel 583

Applying Behaviors, Step by Step 584

Adding Multiple Behaviors 586

Editing Behaviors 586

A Quick Example 587

TABLE OF CONTENTS

Events 587

Mouse Events 588

Keyboard Events 590

Body and Frameset Events 590

Selection and Highlighting Events 591

Form Events 592

The Actions, One by One 592

Spry Effects 592

Navigation Actions 599

Image Actions 606

Message Actions 610

Element Actions 613

Advanced Behaviors 615

Call JavaScript 616

Adding More Behaviors 618

Chapter 15: Add Flash and Other Multimedia 619

Flash: An Introduction 619

Insert a Flash Movie 621

Change Movie Properties 624

Automate the Flash Download 629

Add Flash videos 630

Part Four: Building a Website

Chapter 16: Introducing Site Management 635

The Structure of a Website 636

Setting Up a Site 640

Editing or Removing Sites 645

Exporting and Importing Sites 646

Organizing Site Files 648

Modifying the Files Panel View 650

Adding New Folders and Files 652

Site Assets 658

Viewing the Assets Panel 658

Inserting Assets 659

Favorite Assets 662

Chapter 17: Testing Your Site 665

Site Launch Checklist 665

Previewing Web Pages in BrowserLab 667

BrowserLab Setup 668

Testing Pages in BrowserLab 669

Find and Fix Broken Links 671

Finding Broken Links 672

TABLE OF CONTENTS •

Fixing Broken Links 675

Listing External Links 676

Orphaned Files 677

Changing a Link Throughout a Site 678

Cleaning Up HTML (and XHTML) 680

Site Reporting 683

Download Statistics 686

Chapter 18: Moving Your Site to the Internet 691

Adding a Remote Server 691

Setting Up a Remote Server with FTP or SFTP 693

More Remote Server Options for FTP 697

Setting Up a Remote Server over a Local Network 698

Setting Up a Remote Server with WebDAV 699

Setting Up a Remote Server with RDS 701

Advanced Remote Server Settings 701

Transferring Files 702

Moving Files to the Web Server 702

Getting Files from Your Web Server 706

Cloaking Files 708

Check In and Check Out 711

Checking Out Files 712

Checking In Files 715

Synchronizing Site Files 717

Communicating with Design Notes 721

Setting Up Design Notes 722

Viewing Design Notes 723

Organizing the Columns in the Files Panel 724

"All Info" Design Notes in Column Views 724

Part Five: Dreamweaver CSS Power

Chapter 19: Snippets and Libraries 729

Snippets Basics 729

Using Snippets 730

Creating Snippets 732

Organizing Snippets 733

Built-in Snippets 734

Library Basics 736

Creating and Using Library Items 736

Adding Library Items to a Page 738

Editing Library Items 739

Renaming Library Elements 740

Deleting Library Elements 741

xii TABLE OF CONTENTS

Snippets and Library Tutorial 741

Creating a Snippet 742

Creating a Library Item 744

Chapter 20: Templates 749

Template Basics 749

Creating a Template 752

Turning a Web Page into a Template 753

Building a Template from Scratch 755

Defining Editable Regions 755

Adding a Basic Editable Region 756

Adding a Repeating Region 758

Repeating Tables 761

Making a Tag Attribute Editable 764

Adding Optional Regions 767

Locking Optional Regions 768

Repeating Optional Regions 768

Optional Editable Regions 769

Advanced Optional Regions 769

Editing and Removing Optional Regions 773

Nested Templates 774

Customizing Nested Templates 777

Using Nested Templates 778

Building Pages Based on a Template 779

Working with Repeating Regions 779

Changing Properties of Editable Tag Attributes 780

Hiding and Showing Optional Regions 781

Applying Templates to Existing Pages 782

Updating a Template 784

Updating Nested Templates 786

Unlinking a Page from a Template 787

Exporting a Template-Based Site 787

Template Tutorial 789

Creating a Template 789

Creating a Page Based on a Template 793

Creating Another Template-Based Page 796

Updating a Template 798

Chapter 21: Automating Dreamweaver 801

Find and Replace 801

Find and Replace Basics 802

Basic Text and HTM L Searches 803

Advanced Text Searches 808

Advanced Tag Searches 812

A Powerful Example: Adding Alt Text Fast 813

TABLE OF CONTENTS

Chapter 22: Customizing Dreamweaver 817

Keyboard Shortcuts 817

Make Your Own Shortcut Set 818

Changing Keyboard Shortcuts 819

Create a Shortcut Cheat Sheet 822

Dreamweaver Extensions 822

Browse the Exchange 823

Find a Good Extension 824

Other Extension Sources 825

Download and Install Extensions 826

Extension Manager 826

Make Your Own Extensions 828

Part Six: Dynamic Dreamweaver

Chapter 23: Getting Started with Dynamic Web Sites 829

Pieces of the Puzzle 831

Understanding Server Models 832

Picking a Server Model 834

Dynamic Web Sites: The Setup 835

Setting Up a Testing Server 836

localhost and the htdocs Folder 837

Setting Up Dreamweaver 838

Creating a Dynamic Page 843

Databases: A Quick Introduction 844

Tables and Records 844

Relational Databases 846

Loading a Database 848

Connecting to a Database 852

Exploring the Databases Panel 855

Chapter 24: Adding Dynamic Data to Your Pages 857

Retrieving Information 857

Understanding Recordsets 857

Creating Recordsets 858

Filtering Information 861

Comparison Operators for Filters 863

Getting Comparison Values 864

Advanced Recordsets and SQL 870

Reusing Recordsets 876

Editing Recordsets 876

Deleting Recordsets 877

Adding Dynamic Information 877

The Bindings Panel 879

Formatting Dynamic Information 880

XIV TABLE OH CONTENTS

Displaying Multiple Records 883

Creating a Repeating Table 883

Creating a Repeat Region 885

Editing and Removing a Repeat Region 887

Recordset Navigation 887

Recordset Navigation Bar 888

Recordset Navigation Status 891

Master Detail Page Set 892

Passing Information Between Pages 895

Viewing Live Data 898

HTTP Request Settings 899

Navigating Live View 901

Tutorial: Displaying Database Info 902

Creating a Recordset 902

Live View and Creating Repeating Regions 905

Editing a Recordset and Linking to a Detail Page 907

Building the Detailed Product Page 911

Filling in the Details 914

Operators Standing By 919

Chapter 25: Web Pages that Manipulate Database Records ... 923

Adding Data 923

Dreamweaver's Record Insertion Form Wizard 925

Using the Insert Record Behavior 928

Updating Database Records 931

The Update Record Form Wizard 931

The Update Record Server Behavior 935

Dynamic Form Fields 939

DynamicText Form Fields 940

Dynamic Checkboxes and Radio Buttons 941

Dynamic Menus and Lists 944

Deleting Records 946

Tutorial: Inserting and Updating Data 949

Adding an Insert Product Page 950

Finishing the Insert Form 957

Building a Page to Edit Database Records 958

Creating and Linking to the Delete Page 964

Chapter 26: Advanced Dynamic Site Features 971

Password-Protecting Web Pages 971

The Users Table 972

Creating a Registration Form 973

Creating the Login Page 975

The Log Out User Behavior 978

Protecting Individual Pages 980

TABLE OF CONTENTS

Additional Data Sources 981

URL Variables 983

Form Variables 984

Cookies 984

Session Variables 986

Server Variables 988

Advanced Server Behaviors 989

Recordset Paging 990

Show Region Server Behaviors 991

Tutorial: Authentication 995

Building a Login Page 995

Password-Protecting the Administration Pages 999

Displaying a Portion of a Page to Logged-ln Users 1002

Chapter 27: Server-Side XML and XSLT 1005

Understanding the Technologies 1006

Creating Dynamic Pages with XSLT and XML 1007

Inserting and Formatting XML 1011

Inserting a Repeat Region 1014

Inserting a Conditional Region 1019

Using Multiple Conditional Regions 1022

Advanced XSLT Tricks 1023

Sorting Data in a Repeat Region 1023

Using XSLT Parameters 1024

Part Seven: Appendixes

Appendix A: Getting Help 1029

Index 1033

XVi TABLE 01- CONTENTS