Dreamweaver CS6: The Missing Manual

Dreamweaver CS6: The Missing Manual

by David Sawyer McFarland
Released July 2012
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449316174

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

Dreamweaver CS6 is the most capable website design and management program yet, but there’s no printed guide to its amazing features. That’s where Dreamweaver CS6: The Missing Manual comes in. You’ll learn to use every facet of this versatile program, through jargon-free explanations and 13 hands-on tutorials.

The important stuff you need to know:

  • Get A to Z guidance. Go from building simple web pages to creating rich, interactive websites.
  • Learn state-of-the-art design. Create dynamic, visually appealing sites using JavaScript and CSS, and see how HTML5 and CSS3 fit in.
  • Add instant interactivity. Use Dreamweaver’s unique Spry technology to easily add complex layout options, like drop-down menus.
  • Use timesaving features. Take advantage of Dreamweaver’s libraries, templates, and hundreds of extensions.
  • Go mobile. Design sites for smartphones, tablets, and desktop PCs, using the same HTML.
  • Simplify site management. Check for broken links, streamline site-wide changes, and reorganize your site in a snap.

Publisher resources

View/Submit Errata

Table of contents

  1. Dreamweaver CS6: The Missing Manual
  2. A Note Regarding Supplemental Files
  3. The Missing Credits
    1. About the Author
    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 CS6
    4. What’s Old in Dreamweaver CS6
    5. HTML, XHTML, CSS, and JavaScript 101
    6. Document Types
    7. Of Tags and Properties
    8. XHTML
    9. HTML5
    10. Add Style with Cascading Style Sheets
    11. Add Interactivity with JavaScript
    12. Mobile Web Design
    13. The Very Basics of Reading This Book
    14. About This Book
    15. About→These→Arrows
    16. Macintosh and Windows
    17. About the Outline
    18. Living Examples
    19. Online Resources
      1. The Missing CD
      2. Registration
      3. Feedback
      4. Errata
    20. Using Code Examples
    21. Safari® Books Online
  5. 1. Building a Web Page
    1. 1. Dreamweaver CS6 Guided Tour
      1. The Dreamweaver CS6 Interface
        1. The Document Window
        2. The Insert Panel
        3. The Files Panel
        4. The Property Inspector
        5. The Application Bar
        6. Organizing Your Workspace
          1. Floating Panels
          2. Iconic Panes
          3. Workspace Layouts
      2. Setting Up a Site
      3. Creating a Web Page
      4. 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
      5. 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. Adding and Formatting 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 New 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. Phase 1: Set Up the Style
        2. Phase 2: Defining a Style
        3. Creating a Style with the Property Inspector
      3. Using Styles
        1. Applying a Class Style
          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. Text Formatting with CSS
        1. Choosing a Font
          1. Applying Font Formatting
        2. Using Web Fonts
          1. Managing web Fonts
          2. Using a web Font
        3. Creating Custom Font Lists
        4. Changing the Font Size
        5. Picking a Font Color
        6. Adding Bold and Italic
        7. Aligning Text
        8. CSS Type Properties in the Rule Definition Window
        9. Block Properties
        10. List Properties
      6. Cascading Style Sheets Tutorial
        1. Setting Up
        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 (Index.html) 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
        5. Executive Summary
      2. Adding a Link
        1. Browsing for a File
        2. Using the Point-to-File Tool
        3. Typing (or Pasting) the URL or Path
        4. Using the Hyperlink Object
      3. Adding an Email Link
      4. Linking Within a Web Page
        1. Method 1: Creating a Named Anchor
        2. Method 2: Adding an ID
        3. Linking to an Anchor or ID
        4. Viewing and Hiding Anchors
      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
        1. Adding a Menu
        2. Adding, Editing, and Removing Spry Menu Links
        3. Changing the Look of the Navigation Menu
          1. Formatting Regular Menu Buttons
          2. Formatting Rollover Menu Buttons
          3. Formatting Submenu Buttons
          4. Changing the Width of Menus and Buttons
          5. Positioning Drop-Down Menus
          6. Removing a Spry Menu
          7. Reusing a Spry Menu
      8. Link Tutorial
        1. Linking to Other Pages and Websites
        2. Formatting Links
        3. Adding an Email Link
        4. Adding a Navigation Bar
        5. Adding the Menu to Other Pages
        6. Styling the Menu Bar
        7. Rollover Buttons
    5. 5. Images
      1. Adding Images
        1. Adding an Image Placeholder
      2. Inserting an Image from Photoshop
        1. Method 1: Using the Insert 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. Horizontal and Vertical Position
      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 Table Mode
      5. Formatting Tables
        1. Aligning Tables
        2. Clearing Height and Width 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. There’s no such Thing as Column Width—Only Cell Width
          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. The Tag Inspector
      6. Comparing Versions of a Web Page
        1. Using WinMerge to Compare Files
        2. Using Text Wrangler to Compare Files
      7. Reference Panel
      8. Inserting JavaScript
  6. 2. Building a Better Web Page
    1. 8. 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 the Properties Pane
      3. Moving and Managing Styles
      4. More About CSS
        1. Inheritance
        2. The Cascade
        3. The Other Side of the CSS Styles Panel
      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. The Properties Pane
        2. Code Hinting
        3. 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. 9. Page Layout
      1. Types of Web Page Layouts
      2. Float Layout Basics
        1. The Mighty <div> Tag
        2. The Insert Div Tag Tool
        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. 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. Aligning AP Elements
        4. 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. 10. 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. 11. Designing Websites for Mobile Devices
      1. Previewing Pages at Different Resolutions
        1. Multiscreen Preview
        2. Previewing Other Resolutions
      2. Media Queries
        1. Dreamweaver CS6’s Approach to Media Queries
        2. Using Dreamweaver’s Media Queries Tool
          1. Using a Site-Wide Media Queries File
          2. Applying Media Queries to the Current Document
      3. Strategies for Using Media Queries
        1. Organizing Your Style Sheets for Media Queries
        2. Adding Styles to Media Query Style Sheets
      4. Fluid Grid Layouts
        1. Understanding Fluid Grid Layouts
        2. Creating a Fluid Grid Layout Page
        3. Inserting Fluid Grid Layout Divs
        4. Formatting Fluid Grid Layout Divs
        5. Adding Content to Fluid Grid Layout Pages
        6. Styling Fluid Grid Layout Pages
      5. 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
  7. 3. Bringing Your Pages to Life
    1. 12. Forms
      1. Form Basics
        1. The Code Backstage
      2. Creating a Form
      3. Adding Form Elements
        1. What All Form Elements Have in Common
        2. Text Fields
        3. Checkboxes and Checkbox Groups
          1. Checkbox Groups
        4. Radio Buttons and Radio Groups
          1. Radio Group
        5. Pull-Down Menus and Lists
        6. File Field
        7. Hidden Field
        8. Buttons
        9. The <label> Tag
        10. The <fieldset> Tag
      4. Validating Forms
        1. Spry Validation Basics
        2. Formatting Spry Error Messages and Fields
        3. Spry Text Fields
          1. Validation Types
          2. Custom Validation
          3. Enforcing a Pattern
          4. Suplying a Hint
          5. Limiting Characters and Enforcing a Range of Values
        4. Spry Text Area
        5. Spry Checkbox
        6. Spry Select
        7. Spry Password
        8. Spry Confirm
        9. Spry Radio Group
      5. Forms Tutorial
        1. Insert a Form and Add a Form Field
        2. Adding Spry Validation to Already Existing Fields
        3. Adding a Spry Validation Widget
        4. Adding a Group of Radio Buttons
        5. Adding a Multiline Text Box
        6. Styling the Labels
        7. Styling Spry Error Messages
    2. 13. Adding Interactivity with JavaScript
      1. Introducing Adobe’s Spry Framework
      2. Tabbed Panels
        1. Adding a Tabbed Panel
        2. Adding and Editing Panel Content
        3. Formatting Tabbed Panels
      3. Accordions
        1. Adding an Accordion
        2. Adding and Editing Accordion Content
        3. Formatting a Spry Accordion
      4. Collapsible Panels
        1. Adding a Collapsible Panel
        2. Adding Content to a Collapsible Panel
        3. Formatting a Collapsible Panel
      5. Spry Tooltips
        1. Adding a Spry Tooltip
        2. Adding Content to a Tooltip
        3. Formatting a Tooltip
      6. Spry Data Sets
        1. Storing Data in an HTML File
        2. Inserting a Spry Data Set
        3. Choosing a Data Layout
          1. Spry Table
          2. Master/Detail Layout
          3. Stacked Containers
          4. Stacked Containers with Spotlight Area
      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. (Some of) the Actions, One by One
        1. Spry Effects
          1. Appear/Fade
          2. Blind
          3. Grow/Shrink
          4. Highlight
          5. Shake
          6. Slide
          7. Squish
        2. Open Browser Window
        3. Image Actions
          1. Preload Images
          2. Swap Image
          3. Swap Image Restore
        4. Popup Message
      11. The Widget Browser
        1. Find and Install Widgets
        2. Configuring Widgets
        3. Adding a Widget to a Web Page
    3. 14. Add Flash and Other Multimedia
      1. Flash: An Introduction
        1. Insert a Flash Movie
        2. Change Movie Properties
          1. Rename Your Movie
          2. Replace Your Movie
          3. Set the Src Property
          4. Change Your Movie’s Size
          5. Set Playback Options
          6. Leave Margins Unspecified
          7. Select a Quality Setting
          8. Adjust Your Movie’s Scale
          9. Align Your Movie
          10. Background Color
          11. Wmode
      2. Automate the Flash Download
      3. Add Flash Videos
      4. Other Video Options
  8. 4. Managing a Website
    1. 15. Introducing Site Management
      1. The Structure of a Website
      2. Setting Up a Site (in Depth)
        1. Site Name
          1. Site Name
          2. Local Site Folder
          3. Default Images Folder
          4. Site-wide Media Query File
          5. Links Relative To
          6. Web URL
          7. Case-Sensitive Links
          8. 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 Your Favorites
          3. Removing Favorites
          4. Organizing Favorite Assets
    2. 16. Testing Your Site
      1. Site Launch Checklist
      2. Previewing Web Pages in BrowserLab
        1. BrowserLab Setup
        2. Testing Pages in BrowserLab
          1. Capturing Javascript Interactivity
      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 Throughout a Site
      4. Validating Web Pages
        1. Steps for Validating Web Pages
      5. Cleaning Up HTML (and XHTML)
      6. Site Reporting
      7. Download Statistics
    3. 17. 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
  9. 5. Dreamweaver CS6 Power
    1. 18. 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. 19. 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. 20. 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 the Search by Tag
        2. Limiting a Search by Attribute
      4. Advanced Tag Searches
      5. A Powerful Example: Adding Alt Text Fast
    4. 21. Customizing Dreamweaver
      1. Keyboard Shortcuts
        1. Make Your Own Shortcut Set
        2. Changing Keyboard Shortcuts
        3. Create a Shortcut Cheat Sheet
      2. Dreamweaver Extensions
        1. Browse the Exchange
        2. Find a Good Extension
        3. Other Extension Sources
        4. Download and Install Extensions
        5. Extension Manager
        6. Make Your Own Extensions
    5. 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
    6. A. Getting Help
      1. Getting Help from Dreamweaver
        1. Detailed Assistance
      2. Getting Help from Adobe
        1. Adobe’s Dreamweaver Website
        2. Paid Support
        3. The Forums
    7. B. Dreamweaver CS6, 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
  10. Index
  11. About the Author
  12. Copyright

Product information

  • Title: Dreamweaver CS6: The Missing Manual
  • Author(s): David Sawyer McFarland
  • Release date: July 2012
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449316174