Table Of Content

2nd Edition “The Missing Manual series is simply the most intelligent and usable series of guidebooks…” Answers found here! —KEVIN KELLY, CO-FOUNDER OF WIRED Dreamweaver CC is a powerful tool for designing all kinds of Dreamweaver websites, from those with simple, static pages to interactive, media-driven sites for desktop, laptop, and mobile devices. David Sawyer McFarland, But the program still doesn’t include a printed guide to its president of Sawyer D amazing capabilities. That’s where this Missing Manual comes McFarland Media, has CC been using Dreamweaver in. With hands-on tutorials and coverage of every feature, r since 1998. He is also you’ll learn to build, deploy, and manage sites whether you’re e a Dreamweaver writer an experienced designer or just getting started. and trainer, and he a teaches at Treehouse The important stuff you need to know (teamtreehouse.com), m an online school for web n Dive into page design. Quickly learn the basics of design and programming. working with text, images, links, and tables. w n Edit pages in Live view. Dynamically add elements to live pages and immediately see the results. e n Design once, and for all. Build fluid-grid sites that adapt themselves to desktop, tablet, and mobile devices. a n Troubleshoot your HTML. Use the new Element Quick Chris Grover is the owner v 2nd View to reveal the hierarchy of page elements. of Bolinas Road Creative, an ad and design agency e Edition n Style with ease. Tap Dreamweaver’s enhanced CSS that helps businesses Designer to copy and paste styles. promote their products r Covers 2014 n Enhance Dreamweaver. Get new program features with and services. Chris has Release add-ons that integrate directly with Dreamweaver. C written several books in n Bring your pages to life. Use jQuery UI to add the Missing Manual series. C interactive page elements like tabbed content panels. n Create universal pages. Avoid browser incompatibility with workarounds. McFarland & Grover Website Design/Dreamweaver US $49.99 CAN $52.99 ISBN: 978-1-491-94720-3 missingmanuals.com twitter: @missingmanuals David Sawyer McFarland & Chris Grover facebook.com/MissingManuals 2nd Edition “The Missing Manual series is simply the most intelligent and usable series of guidebooks…” Answers found here! —KEVIN KELLY, CO-FOUNDER OF WIRED Dreamweaver CC is a powerful tool for designing all kinds of Dreamweaver websites, from those with simple, static pages to interactive, media-driven sites for desktop, laptop, and mobile devices. David Sawyer McFarland, But the program still doesn’t include a printed guide to its president of Sawyer D amazing capabilities. That’s where this Missing Manual comes McFarland Media, has CC been using Dreamweaver in. With hands-on tutorials and coverage of every feature, r since 1998. He is also you’ll learn to build, deploy, and manage sites whether you’re e a Dreamweaver writer an experienced designer or just getting started. and trainer, and he a teaches at Treehouse The important stuff you need to know (teamtreehouse.com), m an online school for web n Dive into page design. Quickly learn the basics of design and programming. working with text, images, links, and tables. w n Edit pages in Live view. Dynamically add elements to live pages and immediately see the results. e n Design once, and for all. Build fluid-grid sites that adapt themselves to desktop, tablet, and mobile devices. a n Troubleshoot your HTML. Use the new Element Quick Chris Grover is the owner v 2nd View to reveal the hierarchy of page elements. of Bolinas Road Creative, an ad and design agency e Edition n Style with ease. Tap Dreamweaver’s enhanced CSS that helps businesses Designer to copy and paste styles. promote their products r Covers 2014 n Enhance Dreamweaver. Get new program features with and services. Chris has Release add-ons that integrate directly with Dreamweaver. C written several books in n Bring your pages to life. Use jQuery UI to add the Missing Manual series. C interactive page elements like tabbed content panels. n Create universal pages. Avoid browser incompatibility with workarounds. McFarland & Grover Website Design/Dreamweaver US $49.99 CAN $52.99 ISBN: 978-1-491-94720-3 missingmanuals.com twitter: @missingmanuals David Sawyer McFarland & Chris Grover facebook.com/MissingManuals Dreamweaver CC Second Edition The book that should have been in the box® David Sawyer McFarland and Chris Grover Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo Dreamweaver CC: The Missing Manual, Second Edition by David Sawyer McFarland and Chris Grover Copyright © 2015 David Sawyer McFarland and Chris Grover. 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 (https://www.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]. November 2014: First Edition. Revision History for the First Edition: 2014-11-07 First release See http://www.oreilly.com/catalog/errata.csp?isbn=0636920032779 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-4919-4720-3 [QG] Contents The Missing Credits ........................................ ix Preface ................................................... xiii What Dreamweaver Is All About .................................... xiv Why Dreamweaver? ............................................... xiv What’s New in Dreamweaver CC 2014 ...............................xvii Life in the Cloud ................................................. xviii What’s Gone in Dreamweaver CC 2014 .............................. xix HTML Basics ......................................................xx Document Types .................................................. xxi Of Tags and Properties ............................................ xxi XHTML in Dreamweaver .......................................... xxiii HTML5, the New Markup Standard ................................. xxiii Add Style with Cascading Style Sheets ............................. xxiv Add Interactivity with JavaScript ...................................xxv Mobile Web Design .............................................. xxvi How This Book Is Organized. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvi About This Book .................................................xxvii Windows and Macintosh Commands .............................. xxviii The Very Basics of Reading This Book ............................. xxviii About→These→Arrows .......................................... xxix Online Resources ................................................ xxix Using Code Examples ............................................ xxxi Safari® Books Online ............................................. xxxi Part One: Building a Web Page CHAPTER 1: Dreamweaver CC Guided Tour ............................. 3 Setting Up Creative Cloud ...........................................3 Downloading Dreamweaver CC .......................................4 Getting Around the Dreamweaver Window ............................4 Setting Up a Site ...................................................23 Creating a Web Page ...............................................28 Managing Files and Folders with the Files Panel .......................32 The Dreamweaver Test Drive ........................................37 iii CHAPTER 2: Working with Text ........................................ 69 Adding Text to Pages in Design View .................................70 Adding Special Characters to Pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77 Selecting Text .....................................................83 Applying HTML Tags to Text ........................................85 Structuring Paragraphs with HTML ...................................87 Formatting Lists ...................................................91 Using HTML Text Styles ............................................100 Editing in Live View ............................................... 101 Checking Spelling .................................................107 CHAPTER 3: Introducing Cascading Style Sheets ...................... 111 Cascading Style Sheet Basics .......................................112 Creating Styles ................................................... 116 Applying Styles ...................................................127 Working with Styles ...............................................135 Formatting Text with CSS ..........................................139 Tutorial: Creating Cascading Style Sheets ............................160 CHAPTER 4: Links ..................................................... 177 Understanding Links ..............................................177 Adding Links to a Page ............................................183 Adding Email Links ................................................192 Linking Within a Web Page ........................................194 Modifying Links ...................................................196 Styling Links .....................................................197 Creating a Navigation Menu ........................................201 Tutorial: Adding Links to Pages .....................................216 CHAPTER 5: Working with Images .................................... 231 Adding Images ...................................................231 Inserting Images from Photoshop ...................................236 Modifying an Image .............................................. 244 Controlling Images with CSS .......................................246 Editing Images ...................................................255 Using Image Maps ............................................... 264 Creating Rollover Images ..........................................268 Tutorial: Inserting and Formatting Graphics ..........................270 CHAPTER 6: Working with Tables. .................................... 279 Table Basics ..................................................... 280 Inserting a Table ..................................................281 Editing a Table ....................................................284 Modifying Table Properties .........................................286 Modifying Cell and Row Properties ................................. 290 iv COntents Adding and Removing Cells ........................................297 Merging and Splitting Cells .........................................299 Working with Tabular Data .........................................301 Tutorial: Creating Tables .......................................... 305 CHAPTER 7: Working with HTML. ..................................... 321 Controlling How Dreamweaver Handles HTML ........................321 Viewing HTML Markup in Code View ................................325 Designing Pages in Live View ..................................... 348 Editing Pages in Live View .........................................351 Examining Page Elements .........................................353 Troubleshooting Interactive Pages ..................................354 Adding Tags with the Quick Tag Editor ..............................356 Comparing Versions of a Web Page .................................358 Finding References on Site-Building ................................365 Tutorial: Building Pages in Live View ................................365 CHAPTER 8: Finding and Replacing Text, Tags, and Code. ............ 375 “Find and Replace” Basics .........................................375 Searching Text and HTML Markup ...................................376 Creating Advanced Text Searches ..................................382 Creating Advanced Tag Searches ...................................385 Tutorial: Adding Alt Text Fast .......................................388 Part two: Building a Better Web Page CHAPTER 9: Learning Advanced CSS Techniques ..................... 395 Fine-Tuning Page Design with Advanced Selectors ...................395 Editing Styles with the Properties Pane ............................. 402 Moving and Managing Styles ...................................... 405 Resolving CSS Conflicts ...........................................410 Using the Code Navigator to Identify Styles ..........................418 Styling Pages for Print ............................................ 420 Animating Style Transitions ........................................425 Using CSS3 .......................................................436 Tutorial: Using Advanced Styles ....................................439 CHAPTER 10: Choosing a Page Layout ................................ 449 Types of Web Page Layouts ........................................451 Float Layout Basics ...............................................452 Understanding the Box Model ..................................... 463 Dreamweaver’s HTML Templates ...................................467 Modifying Dreamweaver’s HTML Layouts ............................475 Using Absolute Positioning ........................................ 483 COntents v Adding an AP Element to Your Page ............................... 490 Modifying AP Elements ........................................... 494 Tutorial: Building a CSS-Based Layout .............................. 496 CHAPTER 11: Troubleshooting CSS .................................... 509 Analyzing CSS with Dreamweaver ................................. 509 Overcoming Common CSS Problems ................................516 Part three: Building Websites for Mobile Devices CHAPTER 12: Designing Websites for Mobile Devices. ................. 525 Previewing Pages at Different Resolutions ...........................527 Media Queries ....................................................533 Strategies for Using Media Queries ..................................545 CHAPTER 13: Building Fluid Grid Websites. ............................ 549 Getting Started with Fluid Grid Layouts .............................553 Using Responsive Starter Templates ................................557 Tutorial: Building a Fluid Grid Layout ................................559 CHAPTER 14: Creating Pages for jQuery Mobile Sites .................. 581 jQuery Mobile ....................................................581 Part Four: Bringing Your Pages to Life CHAPTER 15: Building Interactive Pages. .............................. 607 The Roles of JavaScript, jQuery, and jQuery UI ...................... 607 Adding Collapsible Content ....................................... 609 Adding Tabbed Content ...........................................623 Adding a Date Picker ..............................................625 Adding Pop-Up Messages .........................................627 jQuery UI Widgets for Programmers ................................629 Working with Dreamweaver Behaviors ..............................631 Applying Behaviors ...............................................632 Specifying Behaviors ..............................................636 A Sampler of Behaviors, One by One ................................636 CHAPTER 16: Adding Forms to Pages .................................. 649 Form Basics ..................................................... 649 Creating a Form ..................................................651 Adding Form Elements ............................................655 Tutorial: Adding Forms to Pages ....................................682 vi COntents CHAPTER 17: Adding Sound, Video, and Animation. ................... 701 Adding Sound to a Page ...........................................702 Using HTML5 Video ...............................................708 Embedding YouTube Videos .......................................716 Adding Adobe Edge Animate Animations ............................718 Flash: An Introduction .............................................721 Automating the Flash Download ....................................730 Adding Flash Videos ..............................................731 Tutorial: Embedding Sound, Video, and Animation in Pages ...........734 Part Five: Managing a Website CHAPTER 18: Introducing Site Management ........................... 745 Structuring a Website .............................................746 Setting Up a Site ..................................................750 Managing Dreamweaver Sites ......................................756 Editing Page Elements from the Assets Panel ........................762 CHAPTER 19: Testing Your Site. ........................................ 771 Site Launch Checklist ..............................................771 Testing Web Pages with BrowserStack ..............................775 Finding and Fixing Broken Links ....................................781 Validating Web Pages .............................................788 Cleaning Up HTML (and XHTML) ....................................791 Fixing Page Problems with Site Reports .............................794 CHAPTER 20: Moving Your Site to the Internet ......................... 799 Adding a Remote Server ...........................................799 Transferring Files .................................................812 Check In and Check Out ...........................................821 Synchronizing Site Files ............................................827 Communicating with Design Notes ..................................831 Part six: Dreamweaver Power CHAPTER 21: Creating Reusable Page Elements ....................... 841 Snippets Basics ...................................................841 Using Snippets ...................................................843 Creating Snippets ................................................ 844 Using Built-In Snippets ........................................... 846 Library Basics ....................................................847 Creating and Using Library Items .................................. 849 Editing Library Items ..............................................851 Tutorial: Using Snippets and Library Items .......................... 854 COntents vii CHAPTER 22: Templates. ............................................... 861 Template Basics ..................................................861 Creating a Template .............................................. 864 Defining Editable Regions ..........................................867 Building Pages Based on a Template ............................... 868 Updating a Template ..............................................874 Using Repeating Regions ..........................................876 Using Editable Tag Attributes ......................................881 Using Optional Regions ........................................... 886 Exporting a Template-Based Site ...................................891 Tutorial: Building Templates ........................................893 CHAPTER 23: Customizing Dreamweaver .............................. 903 Keyboard Shortcuts .............................................. 903 Dreamweaver Add-Ons ........................................... 908 Downloading and Installing Extensions ..............................913 CHAPTER 24: Working with Server-Side Programming. ................ 917 Dynamic Website Basics ...........................................919 Setting Up a Dynamic Website .....................................921 Creating a Dynamic Page ..........................................927 Using Server-Side Includes .........................................928 Working with Related PHP Files ....................................931 PHP Code Hints ...................................................933 Part seven: Appendixes APPENDIX A: Getting Help. ............................................ 939 Getting Online Help ...............................................939 Getting Help from Other Dreamweaver Fans ........................ 943 APPENDIX B: Dreamweaver CC 2014, Menu by Menu ................... 947 File Menu ........................................................947 Edit Menu ....................................................... 950 View Menu .......................................................952 Insert Menu ......................................................955 Modify Menu .....................................................957 Format Menu .....................................................959 Commands Menu .................................................959 Site Menu ........................................................961 Window Menu ....................................................962 Help Menu ...................................................... 965 Index..................................................... 967 viii COntents