Dreamweaver

CS5.5

the missing manual*The book that should have been In the box*

David Sawyer McFarland

O'REILLY*Beijing | Cambridge | Farnham | Koln [ Sebastopol | Tokyo

Table of Contents

The Missing Credits xxi

Introduction l

Part One: Building a Web Page

Chapter 1: Dreamweaver CS5.5 Guided Tour 21

The Dreamweaver CS5.5 Interface 21

The Document Window 22

The Insert Panel 25

The Files Panel 29

The Property Inspector 30

The Application Bar 31

Organizing Your Workspace 33

Setting Up a Site 39

Creating a Web Page 43

The Dreamweaver Test Drive 47

Phase 1: Getting Dreamweaver in Shape 47

Phase 2: Creating a Website 51

Phase 3: Creating and Saving a Web Page 52

Phase 4: Adding Images and Text 57

Phase 5: Preview Your Work 63

Phase 6: Finishingthe Page 67

Chapter 2: Adding Text to Your Web Pages 75

Adding Text in Dreamweaver 75

Adding Special Characters 76

Line Breaks 77

Nonbreaking Spaces 79

Multiple Spaces 80

Adding a Date to Your Page 81

Copying and Pasting Text 82

Simple Copy and Paste 82

Paste Special 83

Pasting Text from Word: The Basic Method 85

Pasting Text with Word Formatting 87

Pasting Excel Spreadsheet Information 88

Importing Word and Excel Documents (Windows) 88

Selecting Text 88

Spell-Checking 91

About Dictionaries 91

Performing the Check 91

Chapter 3: Text Formatting 95

Paragraph Formatting 97

Paragraphs 98

Headlines 99

Preformatted Text 100

Paragraph Alignment 101

Indented Paragraphs 101

Creating and Formatting Lists 102

Bulleted and Numbered Lists 103

Reformatting Bulleted and Numbered Lists 105

Definition Lists 107

Removing and Deleting List Items 109

Text Styles 110

Chapter 4: Introducing Cascading Style Sheets 113

Cascading Style Sheet Basics 114

Why Use CSS? 114

Internal vs. External Style Sheets 115

Types of Styles 116

Creating Styles 117

Phase 1: Set Up the Style 117

Phase 2: Defining a Style 121

Creating a Style with the Property Inspector 121

Using Styles 123

Applying a Class Style 124

Removing a Class Style 126

Applying IDs to a Tag 127

Linking to an External Style Sheet 128

Manipulating Styles 129

Editing Styles 129

Deleting a Style 130

Renaming a Class Style 131

Duplicating a Style 133

vi TABLE OP CONTENTS

Text Formatting with CSS 134

Choosing a Font 134

Changing the Font Size 139

Picking a Font Color 142

Adding Bold and Italic 144

Aligning Text 145

CSS Type Properties in the Rule Definition Window 146

Block Properties 148

List Properties 151

Cascading Style Sheets Tutorial 152

Setting Up 153

Creating an External Style Sheet 153

Editing a Style 155

Adding Another Style 158

Creating a Class Style 160

Attaching an External Style Sheet 163

Chapter 5: Links 167

Understanding Links 167

Absolute Links 168

Document-Relative Links 168

Root-Relative Links 169

Link Types in Action 172

Executive Summary 173

Adding a Link 174

Browsing for a File 174

Using the Point-to-File Tool 177

Typing (or Pasting) the URL or Path -. 178

Using the Hyperlink Object 179

Adding an Email Link 183

Linking Within a Web Page 184

Method 1: Creating a Named Anchor 184

Method 2: Adding an ID 186

Linking to an Anchor or ID 186

Viewing and Hiding Anchors 187

Modifying a Link 188

Changing a Link's Destination 188

Removing a Link 188

Styling Links 188

CSS and Links 190

Creating a Navigation Menu 192

Adding a Menu 193

Adding, Editing, and Removing Links 195

Changing the Look of the Navigation Menu 197

TABLE OF CONTENTS

Link Tutorial

Linking to Other Pages and Websites

Formatting Links

Adding a Navigation Bar

Styling the Menu Bar

Submenus and Rollover Buttons

Chapter 6: ImagesAdding Images

Adding an Image Placeholder

Inserting an Image from PhotoshopMethod 1: Using the Insert Image Object ....

Method 2: Copying and Pasting from Photoshop

Modifying an Image

Adding an ID to an Image

Adding a Text Description to an Image

Changing an Image's Size

Some Properties to Avoid

Controlling Images with CSS

Wrapping Text Around an Image

Adding Borders

Background ImagesEditing Graphics

Dreamweaver's Built-in Editing Tools

Setting Up an External Editor

Editing Smart Objects

Editing Images Pasted from Photoshop

Optimizing an Image

Image MapsEditing a Hotspot's Properties

Rollover Images

Tutorial: Inserting and Formatting GraphicsSetting Up

Adding an Image

Inserting a Photoshop File

Inserting a Rollover Image

Using Background Images

Chapter 7: TablesTable Basics

Inserting a Table

Selecting Parts of a Table

Selecting a Table

Selecting Rows or Columns

Selecting Cells

Expanded Table Mode

TABLE OF CONTENTS

Formatting Tables 280

Aligning Tables 281

Clearing Height and Width Values 282

Resizing a Table 283

Modifying Cell and Row Properties 284

Alignment Properties 284

Table Header 285

A Property to Forget 285

Cell Decoration 285

Setting Cell Dimensions 286

Tips for Surviving Table-Making 287

Adding and Removing Cells 289

Adding One Row or Column 289

Adding Multiple Rows or Columns 290

Deleting Rows and Columns 291

Merging and Splitting Cells 292

Tabular Data 294

Importing Data into a Table 294

Sorting Data in a Table 296

Exporting Table Data 298

Tables Tutorial 298

Adding a Table and Data 299

Modifying the Table 301

Formatting the Table 302

Final Improvements 306

Part Two: Building a Better Wet Page

Chapter 8: Advanced CSS 313

Compound Selectors 313

Descendent Selectors 315

Styling Groups of Tags 318

Fast Style Editing with the Properties Pane 319

Moving and Managing Styles 323

More About CSS 326

Inheritance 326

The Cascade 329

The Other Side of the CSS Styles Pane! 330

Using the Code Navigator 335

Styling for Print 337

Previewing Media Styles in Dreamweaver 339

Tips for Printer Style Sheets 340

Using CSS3 342

The Properties Pane 344

Code Hinting 345

Common CSS3 Properties 345

TABLE OF CONTENTS

Chapter 9: Page Layout 347

Types of Web Page Layouts 349

Float Layout Basics 351

The Mighty <div> Tag 352

The Insert Div Tag Tool 353

A Simple Example 356

Understanding the Box Model 360

Dreamweaver's CSS Layouts 365

The Structure of Dreamweaver's CSS Layouts 369

Modifying Dreamweaver's CSS Layouts 371

Making General Changes to a CSS Layout 371

Modifying Fixed Layouts 374

Modifying Liquid Layouts 375

Other Styles to Change 376

Absolute Positioning 378

The CSS Positioning Properties 379

Adding an AP Div to Your Page 386

Drawing AP Divs 389

The AP Elements Panel 389

Modifying AP Element Properties 391

Resizing Absolutely Positioned Elements 391

Moving AP Elements 392

Aligning AP Elements 393

Background Image and Color 394

Nesting AP Divs 394

CSS Layout Tutorial 395

Adding Content 399

Fine-Tuningthe Layout 400

Adding Styles and Navigation 405

Fiddling with the Footer 407

Chapter 10: Troubleshooting CSS 413

Analyzing CSS with Dreamweaver 413

Editing CSS Properties 415

Analyzing CSS in JavaScript and Server-Side Pages 416

Checking Browser Compatibility 420

Overcoming Common CSS Problems 424

Clearing and Containing Floats 424

Avoiding Float "Drops" 427

Handling Internet Explorer 6 Bugs 429

Double-Margin Bug 429

Other IE Problems 431

TABLE OF CONTENTS

Chapter 11: Under the Hood: HTML 433

Controlling How Dreamweaver Handles HTML 433

Auto-Fixing Your Code 434

Web Application Server Pages 436

Special Characters and Encoding 436

CodeView 437

Coding Toolbar 443

Code Hints 445

Code Collapse 450

Setting Code Formats 452

Related Files 455

Live Code 460

Quick Tag Editor 462

Using the Quick Tag Editor 463

Tag Inspector 464

Comparing Versions of a Web Page 465

Using WinMerge to Compare Files 469

Using Text Wrangler to Compare Files 471

Reference Panel 472

Inserting JavaScript 472

Chapter 12: Designing Websites for Mobile Devices 475

Previewing at Different Resolutions 477

Multiscreen Preview 477

Previewing Other Resolutions 478

Media Queries 480

Dreamweaver CS5.5's Approach to Media Queries 482

Using Dreamweaver's Media Queries Tool 483

Strategies for Using Media Queries 488

Organizing Your Style Sheets for Media Queries 489

Adding Styles to Media Query Style Sheets 490

jQuery Mobile 491

Creating a Basic jQuery Mobile Page 492

Anatomy of a jQuery Mobile Page 494

Adding Content to a jQuery Mobile Page 497

Formatting a jQuery Mobile Page 510

Launching Your jQuery Mobile Site 511

TABLE OF CONTENTS

Part Three: Bringing Your Pages to Life

Chapter 13: Forms 515

Form Basics 515

The Code Backstage 516

Creating a Form 517

Adding Form Elements 521

What All Form Elements Have in Common 522

Text Fields 526

Checkboxes and Checkbox Groups 528

Radio Buttons and Radio Croups 531

Pull-Down Menus and Lists 533

File Field 535

Hidden Field 536

Buttons 537

The <label> Tag 539

The <fieldset>Tag 540

Validating Forms 540

Spry Validation Basics 541

Formatting Spry Error Messages and Fields 546

Spry Text Field 548

Spry TextArea 555

Spry Checkbox 557

Spry Select 560

Spry Password 561

Spry Confirm 563

Spry Radio Group 564

Forms Tutorial 565

Insert a Form and Add a Form Field 565

Adding a Spry Validation Text Field 571

Adding a Spry Form Menu 575

Adding a Spry Radio Group 577

Completing and Testing the Form 579

Chapter 14: Spry: Creating Interactive Web Pages 581

What is Spry? 581

Tabbed Panels 582

Adding a Tabbed Panel 583

Adding and Editing Panel Content 585

Formatting Tabbed Panels 586

Accordions 590

Adding an Accordion 590

Adding and Editing Accordion Content 592

Formatting a Spry Accordion 593

xii TABLE OF CONTENTS

Collapsible Panels 596

Adding a Collapsible Panel 596

Adding Content to a Collapsible Panel 599

Formatting a Collapsible Panel 599

Spry Tooltips 601

Adding a Spry Tooltip 601

Adding Content to a Tooltip 605

Formatting a Tooltip 606

Spry Data Sets 607

Storing Data in an HTML File 608

Storing Data in an XML File 611

Inserting a Spry Data Set 615

Inserting HTML Data 617

Inserting XML Data 622

Choosing a Data Layout 625

Creating a Spry Region 634

The Bindings Panel 636

Spry Repeat Region 638

Spry Repeat Lists 640

Live View 642

Chapter 15: Dreamweaver Behaviors 645

Understanding Behaviors 646

Behavior Elements 646

More About Events 646

Applying Behaviors 647

The Behaviors Panel 647

Applying Behaviors, Step by Step 649

Adding Multiple Behaviors 650

Editing Behaviors 651

A Quick Example 651

Events 652

Mouse Events 652

Keyboard Events 654

Body and Frameset Events 655

Selection and Highlighting Events 655

Form Events 656

The Actions, One by One 656

Spry Effects 657

Navigation Actions 663

Image Actions 671

Message Actions 674

Element Actions 677

Advanced Behaviors 680

Call JavaScript 680

Adding More Behaviors 682

TABLE OF CONTENTS

The Widget Browser 683

Find and Install Widgets 684

Configuring Widgets 686

Adding a Widget to a Web Page 690

Chapter 16: Add Flash and Other Multimedia 693

Flash: An Introduction 693

Insert a Flash Movie 695

Change Movie Properties 697

Automate the Flash Download 702

Add Flash videos 704

Other Video Options 707

Part Four: Building a Website

Chapter 17: Introducing Site Management 713

The Structure of a Website 714

Setting Up a Site 719

Editing or Removing Sites 724

Exporting and Importing Sites 726

Organizing Site Files 728

Modifying the Files Panel View 729

Adding New Folders and Files 731

Site Assets 737

Viewing the Assets Panel 737

Inserting Assets 739

Favorite Assets 741

Chapter 18: Testing Your Site 745

Site Launch Checklist 745

Previewing Web Pages in BrowserLab 748

BrowserLab Setup 748

Testing Pages in BrowserLab 749

Find and Fix Broken Links 752

Finding Broken Links 753

Fixing Broken Links 756

Listing External Links 757

Orphaned Files 758

Changing a Link Throughout a Site 759

Validating Web Pages 761

Steps for Validating Web Pages 762

Cleaning Up HTML (and XHTML) 764

Site Reporting 767

Download Statistics 770

TABLE OF CONTENTS

Chapter 19: Moving Your Site to the internet 775

Adding a Remote Server 775

Setting Up a Remote Server with FTP or SFTP 777

More Remote Server Options for FTP 781

Setting Up a Remote Server using FTP over SSL/TLS 783

Setting Up a Remote Server over a Local Network 784

Setting Up a Remote Server with WebDAV 785

Setting Up a Remote Server with RDS 786

Advanced Remote Server Settings 786

Transferring Files 788

Moving Files to the Web Server 788

Getting Files from Your Web Server 792

Cloaking Files 794

Check In and Check Out 797

Checking Out Files 798

Checking In Files 802

Synchronizing Site Files 804

Communicating with Design Notes 807

Setting Up Design Notes 808

Viewing Design Notes 810

Organizing the Columns in the Files Panel 810

Creating Custom Columns 812

Part Five: Dreamweaver CS5.5 Power

Chapter 20: Snippets and Libraries 819

Snippets Basics 819

Using Snippets 821

Creating Snippets 822

Organizing Snippets 824

Built-in Snippets 825

Library Basics 825

Creating and Using Library Items 827

Adding Library Items to a Page 829

Editing Library Items 830

Renaming Library Elements 831

Deleting Library Elements 832

Snippets and Library Tutorial 832

Creating a Snippet 833

Creating a Library Item 835

TABLE OF CONTENTS

Chapter 21: Templates 839

Template Basics 839

Creating a Template 842

Turning a Web Page into a Template 843

Building a Template from Scratch 845

Defining Editable Regions 845

Adding a Basic Editable Region 846

Adding a Repeating Region 848

Repeating Tables 851

Making a Tag Attribute Editable 854

Adding Optional Regions 857

Locking Optional Regions 858

Repeating Optional Regions 858

Optional Editable Regions 859

Advanced Optional Regions 859

Editing and Removing Optional Regions 863

Nested Templates 864

Customizing Nested Templates 867

Using Nested Templates 868

Building Pages Based on a Template 869

Working with Repeating Regions 869

Changing Properties of Editable Tag Attributes 870

Hiding and Showing Optional Regions 871

Applying Templates to Existing Pages 872

Updating a Template 874

Updating Nested Templates 876

Unlinking a Page from a Template 877

Exporting a Template-Based Site 877

Template Tutorial 879

Creating a Template 879

Creating a Page Based on a Template 883

Creating Another Template-Based Page 886

Updating a Template 888

Chapter 22: Find and Replace 891

Find and Replace Basics 892

Basic Text and HTML Searches 892

Phase 1: Determine the Scope of Your Search 893

Phase 2: Specify What to Search For 894

Phase 3: Provide the Replacement Text 895

Phase 4: Choose the Search Settings 895

Phase 5: Take Action 896

Advanced Text Searches 898

Limiting the Search by Tag 898

Limiting a Search by Attribute 899

Advanced Tag Searches 902

A Powerful Example: Adding Alt Text Fast 904

TABLE OF CONTENTS

Chapter 23: Customizing Dreamweaver 907

Keyboard Shortcuts 907

Make Your Own Shortcut Set 908

Changing Keyboard Shortcuts 909

Create a Shortcut Cheat Sheet 912

Dreamweaver Extensions 912

Browse the Exchange 913

Find a Good Extension 915

Other Extension Sources 916

Download and Install Extensions 916

Extension Manager 917

Make Your Own Extensions 918

Part Six: DynamicDreamweaver

Chapter 24: Getting Started with Dynamic Websites 923

Pieces of the Puzzle 925

Understanding Server Models 926

Picking a Server Model 928

Dynamic Websites: The Setup 929

Setting Up a Testing Server 930

Localhost and the Local Site Root Folder 931

Setting Up Dreamweaver 932

Creating a Dynamic Page 937

Databases: A Quick Introduction 939

Tables and Records 939

Relational Databases 941

Loading a Database 942

Connecting to a Database 946

Exploring the Databases Panel 949

Chapter 25: Adding Dynamic Data to Your Pages 953

Retrieving Information 953

Understanding Recordsets 953

Creating Recordsets 954

Filtering Information 957

Comparison Operators for Filters 959

Getting Comparison Values 960

Advanced Recordsets and SQL 966

Reusing Recordsets 972

Editing Recordsets 973

Deleting Recordsets 973

Adding Dynamic Information 974

The Bindings Panel 975

Formatting Dynamic Information 977

TABLE OF CONTENTS

Displaying Multiple Records 979

Creating a Repeating Table 979

Creating a Repeat Region 981

Editing and Removing a Repeat Region 983

Recordset Navigation 984

Recordset Navigation Bar 984

Recordset Navigation Status 986

Master Detail Page Set 988

Passing Information Between Pages 991

Viewing Live Data 994

HTTP Request Settings 995

Navigating Live View 997

Tutorial: Displaying Database Info 998

Creating a Recordset 998

Editing a Recordset and Linking to a Detail Page 1002

Creating Repeating Regions 1005

Building the Detailed Product Page 1007

Filling in the Details 1010

Operators Standing By 1015

Chapter 26: Web Pages that Manipulate Database Records. .

1019

Adding Data 1019

Dreamweaver's Record Insertion Form Wizard 1020

Using the Insert Record Behavior 1024

Updating Database Records 1026

The Update Record Form Wizard 1027

The Update Record Server Behavior 1030

Dynamic Form Fields 1034

Dynamic Text Form Fields 1035

Dynamic Checkboxes and Radio Buttons 1036

Dynamic Menus and Lists 1039

Deleting Records 1042

Tutorial: Inserting and Updating Data 1045

Adding an Insert Product Page 1045

Finishing the Insert Form 1052

Building a Page to Edit Database Records 1054

Creating and Linking to the Delete Page 1061

Chapter 27: Advanced Dynamic Site Features 1067

Password-Protecting Web Pages 1067

The Users Table 1068

Creating a Registration Form 1069

Creating the Login Page 1071

The Log Out User Behavior 1074

Protecting Individual Pages 1076

TABLE OF CONTENTS

Additional Data Sources 1077

URL Variables 1079

Form Variables 1080

Cookies 1080

Session Variables 1082

Server Variables 1084

Advanced Server Behaviors 1085

Recordset Paging 1086

Show Region Server Behaviors 1087

Tutorial: Authentication 1091

Building a Login Page 1091

Password-Protecting the Administration Pages 1095

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

Chapter 28: Server-Side XML and XSLT 1101

Understanding Markup Technologies 1102

Creating Dynamic Pages with XSLT and XML 1103

Inserting and Formatting XML 1107

Inserting a Repeat Region 1110

Inserting a Conditional Region 1115

Using Multiple Conditional Regions 1118

Advanced XSLT Tricks 1119

Sorting Data in a Repeat Region 1119

Using XSLT Parameters 1120

Appendix A: Getting Help 1125

Appendix B: Dreamweaver CS5.5, Menu by Menu 1129

Index 1153

TABLE OF CONTENTS