Dreamweaver CS5.5 : the missing manual · Analyzing CSS with Dreamweaver 413 EditingCSSProperties...
Transcript of Dreamweaver CS5.5 : the missing manual · Analyzing CSS with Dreamweaver 413 EditingCSSProperties...
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