Dreamweaver CC: The Missing Manual

Book description

Dreamweaver CC is a powerful tool for designing all kinds of websites, from those with simple, static pages to interactive, media-driven sites for desktop, laptop, and mobile devices. But the program still doesn’t include a printed guide to all its amazing capabilities. That’s where this Missing Manual comes in. With hands-on tutorials and thorough coverage of every feature, you’ll learn how to build, deploy, and manage sites whether you’re an experienced designer or just getting started.

The important stuff you need to know:

  • Dive into page design. Quickly learn the basics of working with text, images, links, and tables.
  • Edit pages in Live view. Dynamically add elements to live pages and immediately see the results.
  • Design once, and for all. Build fluid-grid sites that reformat themselves for desktop, tablet, and mobile browsers.
  • Examine page structure. Troubleshoot problems using the new Element Quick View to see the hierarchy of HTML elements.
  • Style with ease. Use the enhanced CSS Designer to copy and paste styles, set margins and padding, and add or delete selectors.
  • Enhance Dreamweaver. Add new program features with Add-Ons that integrate directly with Dreamweaver.
  • Bring your pages to life. Use jQuery UI to add interactive page elements like tabbed panels, collapsible content sections, and dialog boxes.
  • Create universal pages. Avoid browser incompatibility issues by using surefire workarounds.

Publisher resources

View/Submit Errata

Table of contents

  1. Dreamweaver CC: The Missing Manual
  2. A Note Regarding Supplemental Files
  3. The Missing Credits
    1. About the Authors
    2. About the Creative Team
    3. Acknowledgments
    4. The Missing Manual Series
  4. Preface
    1. What Dreamweaver Is All About
    2. Why Dreamweaver?
    3. What’s New in Dreamweaver CC
    4. Life in the Cloud
    5. What’s Gone in Dreamweaver CC
    6. HTML Basics
    7. Document Types
    8. Of Tags and Properties
    9. XHTML in Dreamweaver
    10. HTML5, The New Markup Standard
    11. Add Style with Cascading Style Sheets
    12. Add Interactivity with JavaScript
    13. Mobile Web Design
    14. How This Book Is Organized
    15. About This Book
    16. Windows and Macintosh Commands
    17. The Very Basics of Reading This Book
    18. About→These→Arrows
    19. Online Resources
      1. The Missing CD
      2. Registering Your Book
      3. Reporting Errata
    20. Using Code Examples
    21. Safari® Books Online
  5. 1. Building a Web Page
    1. 1. Dreamweaver CC Guided Tour
      1. Download Dreamweaver CC
      2. The Dreamweaver CC Interface
        1. The Document Window
        2. The Insert Panel
        3. The Files Panel
        4. The Properties Panel
        5. The Application Bar
        6. Organizing Your Workspace
          1. Floating Panels
          2. Iconic Panes
          3. Workspace layouts
      3. Setting Up a Site
      4. Creating a Web Page
      5. Managing Files and Folders with the Files Panel
        1. Adding Files
        2. Adding Folders
        3. Moving Files and Folders
        4. Renaming Files and Folders
        5. Deleting Files and Folders
      6. The Dreamweaver Test Drive
        1. Phase 1: Getting Dreamweaver in Shape
        2. Phase 2: Creating a Website
        3. Phase 3: Creating and Saving a Web Page
        4. Phase 4: Adding Images and Text
        5. Phase 5: Preview Your Work
        6. Phase 6: Finishing the Page
        7. Phase 7: Organizing Your Files
    2. 2. Working with Text
      1. Adding Text in Dreamweaver
        1. Simple Copy and Paste
        2. Paste Special
          1. Changing Paste Special’s Default Behavior
        3. Pasting Text from Microsoft Word: The Basic Method
        4. Pasting Text with Word Formatting
        5. Pasting Excel Spreadsheet Information
        6. Importing Word and Excel Documents (Windows)
      2. Adding Special Characters
        1. Line Breaks
        2. Nonbreaking Spaces
        3. Multiple Spaces
        4. Adding a Date to Your Page
      3. Selecting Text
      4. HTML Formatting
      5. Paragraph Formatting
        1. Paragraphs
        2. Headlines
        3. Preformatted Text
        4. Indented Paragraphs
      6. Creating and Formatting Lists
        1. Bulleted and Numbered Lists
          1. Creating a Bulleted or Numbered List
          2. Formatting Existing Text as a List
        2. Reformatting Bulleted and Numbered Lists
          1. Adding New Items to a List
          2. Formatting Bullets and Numbers
          3. Nested Lists
        3. Definition Lists
        4. Removing and Deleting List Items
          1. Removing List Formatting
          2. Deleting List Items
      7. Text Styles
      8. Spell-Checking
        1. About Dictionaries
        2. Performing a Spell-Check
    3. 3. Introducing Cascading Style Sheets
      1. Cascading Style Sheet Basics
        1. Why Use CSS?
        2. Internal vs. External Style Sheets
        3. Types of Styles
      2. Creating Styles
        1. Creating New Styles with CSS Designer
        2. Choose a Style Source
        3. Choose a Selector
          1. Tag Hints
        4. Set Properties for the Selector
        5. Creating Styles with the Properties Panel
          1. Creating Styles for Non-Text Elements
      3. Using Styles
        1. Applying a Class Style to Text
          1. Applying a Class Style to Text
          2. Applying a Class Style to Objects
          3. Other Class Styling Options
        2. Applying Multiple Classes
        3. Removing a Class Style
        4. Applying IDs to a Tag
        5. Linking to an External Style Sheet
      4. Manipulating Styles
        1. Editing Styles
        2. Deleting a Style
        3. Renaming a Class Style
        4. Duplicating a Style
      5. Formatting Text with CSS
        1. Choosing a Font
          1. Formatting Fonts
        2. Using Adobe Edge Web Fonts
          1. Managing Adobe Edge Web Fonts
          2. Creating a Custom Font Stack
          3. Using Adobe Edge Web Fonts
        3. Changing the Font Size
        4. Picking a Font Color
        5. Adding Bold and Italic
        6. Aligning Text
        7. Text Properties in CSS Designer
        8. Other Properties
      6. Cascading Style Sheets Tutorial
        1. Setting Up a Site
        2. Adding Web Fonts
        3. Creating an External Style Sheet
        4. Editing a Style
        5. Adding Another Style
        6. Creating a Class Style
        7. Attaching an External Style Sheet
    4. 4. Links
      1. Understanding Links
        1. Absolute Links
        2. Document-Relative Links
        3. Root-Relative Links
        4. Link Types in Action
          1. Link from the Home Page to the Contact us Page (contact.html)
          2. Link from the Horoscopes Page to the Pisces Page
          3. Link from the Scorpio Page to the Horoscopes Page
      2. Adding a Link
        1. Browsing for a File
        2. Using the Point-to-File Tool
        3. Typing (or Pasting) a URL or Path
        4. Using the Hyperlink Object
      3. Adding an Email Link
      4. Linking Within a Web Page
        1. Adding an ID to a Target Page
        2. Linking to an ID
      5. Modifying a Link
        1. Changing a Link’s Destination
        2. Removing a Link
      6. Styling Links
        1. CSS and Links
      7. Creating a Navigation Menu Tutorial
        1. Getting a CSS Menu System from Adobe Exchange
        2. Adding a Menu with Submenus
        3. Adding, Editing, and Removing Menu Links
        4. Changing the Look of the Navigation Menu
          1. Formatting Top Menu Items
          2. Size & Position
          3. Colors
          4. Images
          5. Text
          6. Formatting Rollover Menu Buttons
          7. Formatting Submenu Buttons
      8. Link Tutorial
        1. Linking to Other Pages and Websites
        2. Formatting Links
        3. Adding an Email Link
        4. Adding a Navigation Bar
        5. Styling the Menu Bar
        6. Adding the CSS Menu to Other Pages
    5. 5. Images
      1. Adding Images
        1. Adding an Image Placeholder
      2. Inserting an Image from Photoshop
        1. Method 1: Adding Photoshop Images
          1. JPEG Optimization Options
          2. GIF and PNG8 Optimization Options
          3. PNG Optimization Options
      3. Modifying an Image
        1. Adding an ID to an Image
        2. Adding a Text Description to an Image
        3. Changing an Image’s Size
      4. Controlling Images with CSS
        1. Wrapping Text Around an Image
        2. Adding Borders
        3. Background Images
          1. Background-Image
          2. Background-Repeat
          3. Background-Attachment
          4. Positioning the Background Image
      5. Editing Graphics
        1. Dreamweaver’s Built-In Editing Tools
          1. Cropping an Image
          2. Resampling an Image
          3. Brightness and Contrast
          4. Sharpening Images
        2. Setting Up an External Editor
        3. Editing Smart Objects
          1. Smart Object Warnings
        4. Optimizing an Image
      6. Image Maps
        1. Editing a Hotspot’s Properties
      7. Rollover Images
      8. Tutorial: Inserting and Formatting Graphics
        1. Setting Up
        2. Adding an Image
        3. Inserting a Photoshop File
        4. Using Background Images
    6. 6. Tables
      1. Table Basics
      2. Inserting a Table
      3. Selecting Parts of a Table
        1. Selecting a Table
        2. Selecting Rows or Columns
        3. Selecting Cells
      4. Expanded Tables Mode
      5. Formatting Tables
        1. Aligning Tables
        2. Clearing Width and Height Values
        3. Resizing a Table
      6. Modifying Cell and Row Properties
        1. Alignment Properties
        2. Table Header
        3. A Property to Forget
        4. Cell Decoration
        5. Setting Cell Dimensions
        6. Tips for Surviving Table-Making
          1. The Contents Take Priority
          2. Setting Column Widths
          3. Do the Math
      7. Adding and Removing Cells
        1. Adding One Row or Column
        2. Adding Multiple Rows or Columns
        3. Deleting Rows and Columns
      8. Merging and Splitting Cells
      9. Tabular Data
        1. Importing Data into a Table
        2. Sorting Data in a Table
        3. Exporting Table Data
      10. Tables Tutorial
        1. Adding a Table
        2. Importing Tabular Data
        3. Formatting the Table
        4. Final Improvements
    7. 7. HTML Under the Hood
      1. Controlling How Dreamweaver Handles HTML
        1. Auto-Fixing Your Code
        2. Server-Side Web Pages
        3. Special Characters and Encoding
      2. Code View
        1. Coding Toolbar
        2. Code Hints
          1. HTML5 Code Hints
          2. JavaScript Code Hints
          3. Jquery Code Hints
          4. PHP Code Hints
        3. Code Collapse
        4. Setting Code Formats
          1. Indents
          2. Line Breaks
          3. Character Case for Tags and Attributes
          4. The <TD> Tag
          5. Advanced Formatting Options
        5. Related Files
          1. Finding Nested PHP Files
      3. Live Code
      4. Quick Tag Editor
        1. Using the Quick Tag Editor
      5. Comparing Versions of a Web Page
        1. Downloading and Setting Up “Diff” Tools
        2. Comparing Files from the Files Panel
        3. Comparing Files with WinMerge
        4. Comparing Files with TextWrangler
      6. Finding References
    8. 8. Find and Replace
      1. Find and Replace Basics
      2. Basic Text and HTML Searches
        1. Phase 1: Determine the Scope of Your Search
        2. Phase 2: Specify What to Search For
        3. Phase 3: Provide the Replacement Text
        4. Phase 4: Choose the Search Settings
        5. Phase 5: Take Action
      3. Advanced Text Searches
        1. Limiting a Search by Tag
        2. Limiting a Search by Attribute
      4. Advanced Tag Searches
      5. A Powerful Example: Adding Alt Text Fast
  6. 2. Building a Better Web Page
    1. 9. Advanced CSS
      1. Compound Selectors
        1. Descendent Selectors
          1. Descendent Selectors with Class and ID Styles
        2. Styling Groups of Tags
      2. Fast Style Editing with CSS Designer
      3. Moving and Managing Styles
      4. Resolving CSS Conflicts
        1. Inheritance
        2. The Cascade
        3. CSS Sleuthing with Computed Properties
        4. CSS Sleuthing with Inspect View
        5. Analyzing the Cascade
      5. Using the Code Navigator
      6. Styling for Print
        1. Previewing Media Styles in Dreamweaver
        2. Tips for Printer Style Sheets
      7. CSS Transitions
        1. Understanding the CSS Transitions Panel
        2. Deleting a CSS Transition
        3. Another Way to Create CSS Transitions
      8. Using CSS3
        1. Code Hinting
        2. Common CSS3 Properties
      9. Advanced CSS Tutorial
        1. Creating a Descendent Selector
        2. Adding a CSS Transition
        3. Adding CSS3 Properties
        4. Adding One Last Transition
    2. 10. Page Layout
      1. Types of Web Page Layouts
      2. Float Layout Basics
        1. The Mighty <div> Tag
        2. The Insert Div Command
        3. A Simple Example
      3. Understanding the Box Model
      4. Dreamweaver’s CSS Layouts
        1. The Structure of Dreamweaver’s CSS Layouts
      5. Modifying Dreamweaver’s CSS Layouts
        1. Making General Changes to a CSS Layout
        2. Modifying Fixed Layouts
        3. Creating and Modifying Liquid Layouts
        4. Other Styles to Change
      6. Absolute Positioning
        1. The CSS Positioning Properties
          1. Positioning Type
          2. Width and Height
          3. Visibility
          4. Z-Index
          5. Overflow
          6. Placement
          7. Clip
      7. Adding an AP Element to Your Page
      8. Modifying AP Element Properties
        1. Resizing Absolutely Positioned Elements
        2. Moving AP Elements
        3. Placing AP Elements
        4. Aligning AP Elements
        5. Background Image and Color
      9. CSS Layout Tutorial
        1. Adding CSS3 Properties
        2. Creating a Fixed-Width Design
        3. Adding Styles and Using Absolute Positioning
    3. 11. Troubleshooting CSS
      1. Analyzing CSS with Dreamweaver
        1. Editing CSS Properties
        2. Analyzing CSS in JavaScript and Server-Side Pages
          1. Following Links in Server-Side Pages
      2. Overcoming Common CSS Problems
        1. Clearing and Containing Floats
        2. Avoiding Float Drops
    4. 12. Designing Websites for Mobile Devices
      1. Previewing Pages at Different Resolutions
        1. Previewing Different Screen Sizes in Dreamweaver
        2. Previewing Your Layout with Edge Inspect
        3. Third-Party Help for Window Size Dilemmas
      2. Media Queries
        1. Two Approaches to Media Queries
        2. Creating Media Queries with CSS Designer
          1. Media Queries for Desktop and Tablet Browsers
        3. Using a Site-Wide Media Queries File
        4. Using @Media to Add Queries to Internal Style Sheets
        5. Using Media Queries and Global CSS Styles
      3. Strategies for Using Media Queries
        1. Organizing Your Style Sheets for Media Queries
        2. Adding Styles to Media Query Style Sheets
      4. jQuery Mobile
        1. Creating a Basic jQuery Mobile Page
        2. Anatomy of a jQuery Mobile Page
        3. Adding Content to a jQuery Mobile Page
          1. Adding Lists
          2. Adding a Layout Grid
          3. Adding a Collapsible Block
          4. Adding Form Elements
          5. Adding New “Pages”
        4. Formatting a jQuery Mobile Page
        5. Launching Your jQuery Mobile Site
      5. Fluid Grid Layouts
        1. Understanding Fluid Grid Layouts
      6. Fluid Grid Layout Tutorial
        1. Inserting Fluid Grid Layout Divs
        2. Formatting Fluid Grid Layout Divs
          1. Adding More Divs to Your Layout
        3. Adding Content to Fluid Grid Layout Pages
        4. Styling Fluid Grid Layout Pages
        5. Nesting Fluid Grid DIVs
  7. 3. Bringing Your Pages to Life
    1. 13. Adding Interactivity with jQuery
      1. JavaScript, jQuery, and jQuery UI
      2. Adding an Accordion
        1. Adding Content to an Accordion
        2. Saving Your Widget Web Page
        3. Changing an Accordion’s Properties
        4. Changing the Look of the Accordion Widgets
          1. Choose a Theme
          2. Download All Jquery UI Gallery Themes
          3. Swapping Jquery UI Themes
        5. Formatting Widgets with CSS Designer
      3. Tabs
        1. Setting Properties for Tabs
      4. Datepicker
      5. Dialog
      6. jQuery UI Widgets for Programmers
        1. Progressbar
        2. Autocomplete
        3. Slider
        4. jQuery Buttons and More Buttons
      7. Dreamweaver Behaviors
        1. Behavior Basics
      8. Applying Dreamweaver Behaviors
        1. The Behaviors Panel
        2. Applying Behaviors, Step by Step
        3. Editing Behaviors
        4. A Quick Example
      9. Events
      10. A Sampler of Actions, One by One
        1. Effects
          1. Fade
          2. Blind
          3. Highlight
          4. Shake
          5. Slide
        2. Open Browser Window
        3. Image Actions
          1. Preload Images
          2. Swap Image
          3. Swap Image Restore
        4. Popup Message
    2. 14. Forms
      1. Form Basics
        1. The Code Backstage
      2. Creating a Form
      3. Adding Form Elements
        1. What All Form Input Elements Have in Common
        2. Providing Options with a “Datalist”
        3. Text Fields
        4. Label
        5. Password
        6. Text Area
        7. Email, Number, Date, and Other Special Input Types
        8. Checkboxes and Checkbox Groups
          1. Checkbox Groups
        9. Radio Buttons and Radio Groups
          1. Radio Group
        10. Select Menus and Lists
        11. File Field
        12. Hidden Field
        13. Buttons
          1. The Reset Button
          2. The Generic Button
        14. The <fieldset> Tag
      4. Forms Tutorial
        1. Insert a Form
        2. Add a Text and Email Field
        3. Adding (and Removing) a Number Field
        4. Adding a Select Menu
        5. Adding Date and Time Fields
        6. Adding Radio Buttons
        7. Adding a Multiline Text Box and Submit Button
        8. Styling Labels
    3. 15. Adding Sound, Video, and Animation
      1. Adding Sound to Your Page
        1. Producing Audio Files in Browser-Friendly Formats
        2. Adding Audio to Web Pages
      2. Using HTML5 Video
        1. Converting Video Files to Browser-Friendly Formats
        2. Adding Video to Your Page
      3. Adding Video Through YouTube
      4. Flash: An Introduction
        1. Insert a Flash Animation
        2. Change Animation Properties
          1. Play Your Animation
          2. Rename Your Animation
          3. Replace Your Animation
          4. Set the Src Property
          5. Change Your Animation’s Size
          6. Set Playback Options
          7. Leave Margins Unspecified
          8. Select a Quality Setting
          9. Adjust Your Animation’s Scale
          10. Align Your Animation
          11. Background Color
          12. Wmode
      5. Automate the Flash Download
      6. Add Flash Videos
      7. Adding Adobe Edge Animate Animations
  8. 4. Managing a Website
    1. 16. Introducing Site Management
      1. The Structure of a Website
      2. Setting Up a Site (in Depth)
        1. Site Name
        2. Local Site Folder
        3. Default Images Folder
        4. Links Relative To
        5. Web URL
        6. Case-Sensitive Links
          1. Cache
      3. Managing Dreamweaver Sites
        1. Editing or Removing Sites
        2. Exporting and Importing Sites
        3. Viewing Files in the Files Panel
        4. Modifying the Files Panel View
      4. Site Assets
        1. Viewing the Assets Panel
        2. Inserting Assets
          1. Adding Color and Link Assets
        3. Favorite Assets
          1. Identifying Your Favorites
          2. Using Favorites
          3. Removing Favorites
          4. Organizing Favorite Assets
    2. 17. Testing Your Site
      1. Site Launch Checklist
      2. Testing Web Pages with BrowserStack
        1. Previewing Pages with BrowserStack
        2. Changing Settings in BrowserStack
      3. Find and Fix Broken Links
        1. Finding Broken Links
          1. Checking Just One Page
          2. Checking Specific Pages
          3. Checking an Entire Website
        2. Fixing Broken Links
        3. Listing External Links
        4. Orphaned Files
        5. Changing a Link Site-Wide
      4. Validating Web Pages
        1. Steps for Validating Web Pages
      5. Cleaning Up HTML (and XHTML)
      6. Site Reporting
    3. 18. Moving Your Site to the Internet
      1. Adding a Remote Server
        1. Setting Up a Remote Server with FTP or SFTP
        2. More Remote Server Options for FTP
        3. Setting Up a Remote Server Using FTP over SSL/TLS
        4. Setting Up a Remote Server over a Local Network
        5. Setting Up a Remote Server with WebDAV
        6. Setting Up a Remote Server with RDS
        7. Advanced Remote Server Settings
      2. Transferring Files
        1. Moving Files to Your Web Server
          1. Other Ways to Move Files to Your Web Server
        2. Getting Files from Your Web Server
        3. Cloaking Files
      3. Check In and Check Out
        1. Checking Out Files
        2. Checking In Files
      4. Synchronizing Site Files
      5. Communicating with Design Notes
        1. Setting Up Design Notes
        2. Viewing Design Notes
        3. Organizing the Columns in the Files Panel
        4. Creating Custom Columns
          1. Phase 1: Defining the New Information Types
          2. Phase 2: Adding the Column to the Files Panel
  9. 5. Dreamweaver CC Power
    1. 19. Snippets and Libraries
      1. Snippets Basics
      2. Using Snippets
      3. Creating Snippets
        1. Organizing Snippets
      4. Built-In Snippets
      5. Library Basics
      6. Creating and Using Library Items
        1. Adding Library Items to a Page
      7. Editing Library Items
        1. Renaming Library Elements
        2. Deleting Library Elements
      8. Snippets and Library Tutorial
        1. Creating a Snippet
        2. Creating a Library Item
    2. 20. Templates
      1. Template Basics
      2. Creating a Template
        1. Turning a Web Page into a Template
        2. Building a Template from Scratch
      3. Defining Editable Regions
      4. Building Pages Based on a Template
        1. Applying Templates to Existing Pages
      5. Updating a Template
        1. Unlinking a Page from a Template
      6. Using Repeating Regions
        1. Adding a Repeating Region
        2. Adding a Repeating Table
        3. Working with Repeating Regions
      7. Using Editable Tag Attributes
        1. Making an Attribute Editable
        2. Changing Properties of Editable Tag Attributes
      8. Using Optional Regions
        1. Adding an Optional Region
        2. Locking Optional Regions
        3. Repeating Optional Regions
        4. Optional Editable Regions
        5. Advanced Optional Regions
        6. Editing and Removing Optional Regions
        7. Hiding and Showing Optional Regions
      9. Exporting a Template-Based Site
      10. Template Tutorial
        1. Creating a Template
        2. Creating a Page Based on a Template
        3. Creating and Using Optional Regions
        4. Updating a Template
    3. 21. Customizing Dreamweaver
      1. Keyboard Shortcuts
        1. Dreamweaver’s Stock Shortcuts
        2. Make Your Own Shortcut Set
        3. Changing Keyboard Shortcuts
        4. Create a Shortcut Cheat Sheet
      2. Dreamweaver Extensions
        1. Browse the Exchange
        2. Other Extension Sources
        3. Download and Install Extensions
        4. The Extension Manager
        5. Make Your Own Extensions
    4. 22. Working with Server-Side Programming
      1. Pieces of the Puzzle
      2. Dynamic Websites: The Setup
        1. Setting Up a Testing Server
          1. Windows
          2. Macs
        2. Localhost and the Local Site Root Folder
        3. Setting Up Dreamweaver
      3. Creating a Dynamic Page
      4. Using Server-Side Includes
        1. Creating a Server-Side Include
        2. Adding a Server-Side Include to a Web Page
      5. Working with Related PHP Files
      6. PHP Code Hints
  10. 6. Appendixes
    1. A. Getting Help
      1. Getting Online Help
        1. Dreamweaver Help
          1. Learning
          2. Community Questions
          3. Page Tools
          4. Contact Support
        2. Dreamweaver Help and Tutorials (Online Manual)
        3. Beginner’s Cookbook
        4. Adobe TV
      2. Getting Help from Other Dreamweaver Fans
    2. B. Dreamweaver CC, Menu by Menu
      1. File Menu
      2. Edit Menu
      3. View Menu
      4. Insert Menu
      5. Modify Menu
      6. Format Menu
      7. Commands Menu
      8. Site Menu
      9. Window Menu
      10. Help Menu
  11. Index
  12. About the Authors
  13. Copyright

Product information

  • Title: Dreamweaver CC: The Missing Manual
  • Author(s): Chris Grover, David Sawyer McFarland
  • Release date: December 2013
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449341701