www.it-ebooks.info www.it-ebooks.info Dreamweaver CS6 The book that should have been in the box® David Sawyer McFarland Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo www.it-ebooks.info Dreamweaver CS6: The Missing Manual by David Sawyer McFarland Copyright © 2012 Sawyer McFarland Media, Inc. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]. July 2012: First Edition. Revision History for the 1st Edition: 2012-07-02 First release See http://shop.oreilly.com/product/0636920022732.do for release details. The Missing Manual is a registered trademark of O’Reilly Media, Inc. The Missing Manual logo, and “The book that should have been in the box” are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media is aware of a trademark claim, the designations are capitalized. While every precaution has been taken in the preparation of this book, the publisher assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained in it. ISBN-13: 978-1-449-31617-4 [M] www.it-ebooks.info Contents The Missing Credits ........................................ ix Preface ..................................................... 1 Part One: Building a Web Page CHAPTER 1: Dreamweaver CS6 Guided Tour. ........................... 21 The Dreamweaver CS6 Interface .....................................21 Setting Up a Site .................................................. 40 Creating a Web Page ...............................................44 Managing Files and Folders with the Files Panel .......................49 The Dreamweaver Test Drive ........................................53 CHAPTER 2: Adding and Formatting Text. ............................. 85 Adding Text in Dreamweaver ........................................85 Adding Special Characters ..........................................92 Selecting Text .....................................................98 HTML Formatting ................................................. 101 Paragraph Formatting .............................................102 Creating and Formatting Lists ......................................106 Text Styles ....................................................... 114 Spell Checking .................................................... 116 CHAPTER 3: Introducing Cascading Style Sheets ...................... 121 Cascading Style Sheet Basics ......................................122 Creating Styles ...................................................125 Using Styles ......................................................132 Manipulating Styles ...............................................139 Text Formatting with CSS ..........................................144 Cascading Style Sheets Tutorial ....................................168 CHAPTER 4: Links ..................................................... 185 Understanding Links ..............................................185 Adding a Link .................................................... 191 Adding an Email Link ............................................. 200 Linking Within a Web Page ........................................202 iii www.it-ebooks.info Modifying a Link ..................................................205 Styling Links .................................................... 206 Creating a Navigation Menu ........................................210 Link Tutorial ......................................................223 CHAPTER 5: Images. .................................................. 241 Adding Images ...................................................242 Inserting an Image from Photoshop .................................247 Modifying an Image ...............................................253 Controlling Images with CSS .......................................257 Editing Graphics ................................................. 264 Image Maps ......................................................273 Rollover Images ..................................................276 Tutorial: Inserting and Formatting Graphics ..........................278 CHAPTER 6: Tables. ................................................... 289 Table Basics ..................................................... 290 Inserting a Table ..................................................291 Selecting Parts of a Table ......................................... 294 Expanded Table Mode ............................................ 296 Formatting Tables ................................................297 Modifying Cell and Row Properties ................................. 300 Adding and Removing Cells ....................................... 305 Merging and Splitting Cells ........................................ 308 Tabular Data .....................................................310 Tables Tutorial ....................................................314 CHAPTER 7: HTML: Under the Hood. .................................. 331 Controlling How Dreamweaver Handles HTML ........................331 Code View .......................................................335 Live Code ........................................................358 Quick Tag Editor ..................................................361 The Tag Inspector .................................................362 Comparing Versions of a Web Page .................................363 Reference Panel ..................................................370 Inserting JavaScript ...............................................370 Part two: Building a Better Web Page CHAPTER 8: Advanced CSS ........................................... 375 Compound Selectors ..............................................375 Fast Style Editing with the Properties Pane ..........................382 Moving and Managing Styles .......................................385 More About CSS ................................................. 390 iv COntents www.it-ebooks.info Using the Code Navigator ..........................................397 Styling for Print ...................................................399 CSS Transitions .................................................. 405 Using CSS3 .......................................................418 Advanced CSS Tutorial ............................................422 CHAPTER 9: Page Layout ............................................. 433 Types of Web Page Layouts ........................................435 Float Layout Basics ...............................................438 Understanding the Box Model ......................................447 Dreamweaver’s CSS Layouts .......................................452 Modifying Dreamweaver’s CSS Layouts ..............................459 Absolute Positioning ............................................. 465 Adding an AP Element to Your Page ................................472 Modifying AP Element Properties ...................................475 CSS Layout Tutorial ...............................................479 CHAPTER 10: Troubleshooting CSS .................................... 491 Analyzing CSS with Dreamweaver ..................................491 Overcoming Common CSS Problems ............................... 498 CHAPTER 11: Designing Websites for Mobile Devices. ................. 505 Previewing Pages at Different Resolutions ...........................507 Media Queries ....................................................510 Strategies for Using Media Queries ..................................518 Fluid Grid Layouts ................................................521 jQuery Mobile ....................................................537 Part three: Bringing Your Pages to Life CHAPTER 12: Forms. ................................................... 563 Form Basics ......................................................563 Creating a Form ................................................. 566 Adding Form Elements ............................................569 Validating Forms ..................................................588 Forms Tutorial ....................................................612 CHAPTER 13: Adding Interactivity with JavaScript. .................... 637 Introducing Adobe’s Spry Framework ...............................638 Tabbed Panels ....................................................639 Accordions ...................................................... 645 Collapsible Panels .................................................651 Spry Tooltips .....................................................656 Spry Data Sets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .661 COntents v www.it-ebooks.info Dreamweaver Behaviors ...........................................679 Applying Dreamweaver Behaviors ................................. 680 Events .......................................................... 684 (Some of) the Actions, One by One ................................ 684 The Widget Browser ............................................. 699 CHAPTER 14: Add Flash and Other Multimedia. ........................ 709 Flash: An Introduction ............................................ 709 Automate the Flash Download. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .718 Add Flash Videos .................................................720 Other Video Options ..............................................724 Part Four: Managing a Website CHAPTER 15: Introducing Site Management ........................... 729 The Structure of a Website .........................................730 Setting Up a Site (in Depth) ........................................735 Managing Dreamweaver Sites ......................................740 Site Assets .......................................................749 CHAPTER 16: Testing Your Site. ........................................ 757 Site Launch Checklist ..............................................757 Previewing Web Pages in BrowserLab .............................. 760 Find and Fix Broken Links ..........................................765 Validating Web Pages .............................................773 Cleaning Up HTML (and XHTML) ....................................776 Site Reporting ....................................................779 Download Statistics ...............................................783 CHAPTER 17: Moving Your Site to the Internet ......................... 785 Adding a Remote Server ...........................................785 Transferring Files .................................................798 Check In and Check Out ...........................................807 Synchronizing Site Files ............................................813 Communicating with Design Notes ..................................817 Part Five: Dreamweaver CS6 Power CHAPTER 18: Snippets and Libraries. .................................. 829 Snippets Basics ...................................................829 Using Snippets ...................................................831 Creating Snippets .................................................832 Built-In Snippets ..................................................835 Library Basics ....................................................835 vi COntents www.it-ebooks.info Creating and Using Library Items ...................................838 Editing Library Items ............................................. 840 Snippets and Library Tutorial .......................................842 CHAPTER 19: Templates. ............................................... 851 Template Basics ..................................................851 Creating a Template .............................................. 854 Defining Editable Regions ..........................................857 Building Pages Based on a Template ................................859 Updating a Template ............................................. 864 Using Repeating Regions ......................................... 866 Using Editable Tag Attributes ......................................872 Using Optional Regions ............................................876 Exporting a Template-Based Site ...................................882 Template Tutorial .................................................883 CHAPTER 20: Find and Replace ........................................ 895 Find and Replace Basics .......................................... 896 Basic Text and HTML Searches .................................... 896 Advanced Text Searches .......................................... 902 Advanced Tag Searches .......................................... 906 A Powerful Example: Adding Alt Text Fast .......................... 908 CHAPTER 21: Customizing Dreamweaver ............................... 911 Keyboard Shortcuts ............................................... 911 Dreamweaver Extensions ..........................................916 CHAPTER 22: Working with Server-Side Programming. ................ 925 Pieces of the Puzzle ...............................................927 Dynamic Websites: The Setup ......................................929 Creating a Dynamic Page ..........................................936 Using Server-Side Includes .........................................937 Working with Related PHP Files ....................................939 PHP Code Hints ...................................................942 APPENDIX A: Getting Help. ............................................ 945 Getting Help from Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 945 Getting Help from Adobe ......................................... 946 APPENDIX B: Dreamweaver CS6, Menu by Menu ....................... 949 File Menu ....................................................... 949 Edit Menu ........................................................952 View Menu .......................................................955 Insert Menu ......................................................959 Modify Menu .....................................................961 COntents vii www.it-ebooks.info Format Menu .................................................... 963 Commands Menu ................................................ 964 Site Menu ....................................................... 966 Window Menu ................................................... 968 Help Menu .......................................................971 Index..................................................... 973 viii COntents www.it-ebooks.info