Dreamweaver CS4: The Missing Manual

Table of contents

1. Dreamweaver CS4: The Missing Manual
2. A Note Regarding Supplemental Files
3. The Missing Credits
   1. About the Author
   2. About the Creative Team
   3. Acknowledgements
   4. The Missing Manual Series
4. Introduction
   1. What Dreamweaver Is All About
      1. Why Dreamweaver?
      2. What’s New in Dreamweaver CS4
   2. HTML, XHTML, CSS, and JavaScript 101
      1. Of Tags and Properties
      2. XHTML, Too
      3. Adding Style with Cascading Style Sheets
      4. Adding Interactivity with JavaScript
      5. The Very Basics
      6. About This Book
      7. About → These → Arrows
      8. Macintosh and Windows
      9. About the Outline
      10. Living Examples
      11. About MissingManuals.com
      12. Safari® Books Online
5. I. Building a Web Page
   1. 1. Dreamweaver CS4 Guided Tour
      1. The Dreamweaver CS4 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
         1. The Site Definition Wizard
         2. Defining a Site the Fast Way
      3. Creating a Web Page
      4. The Dreamweaver Test Drive
         1. Phase 1: Getting Dreamweaver in Shape
         2. Phase 2: Creating a Web Site
         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
   2. 2. Adding Text to Your Web Pages
      1. Adding Text in Dreamweaver
         1. Adding Special Characters
         2. Line Breaks
         3. Nonbreaking Spaces
         4. Multiple Spaces
         5. Adding a Date to Your Page
      2. Copying and Pasting Text
         1. Simple Copy and Paste
         2. Paste Special
         3. Pasting Text from Word: The Basic Method
         4. Pasting Text with Word Formatting
         5. Pasting Excel Spreadsheet Information
         6. Importing Word and Excel Documents (Windows)
      3. Selecting Text
      4. Spell Checking
         1. About Dictionaries
         2. Performing the Check
      5. Undo, Redo, and the History Panel
         1. Undo
         2. History Panel
   3. 3. Text Formatting
      1. Paragraph Formatting
         1. Paragraphs
         2. Headlines
         3. Preformatted Text
         4. Paragraph Alignment
         5. Indented Paragraphs
      2. 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 items
            2. Deleting list items
      3. Text Styles
   4. 4. 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 CSS Type
         2. Phase 2: Defining the 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. Removing a Class Style
         3. Applying IDs to a Tag
         4. 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. Checking Browser Compatibility
      6. Text Formatting with CSS
         1. Choosing a Font
            1. Applying font formatting
            2. Creating custom font lists
         2. Changing the Font Size
         3. Picking a Font Color
         4. Adding Bold and Italics
         5. Aligning Text
         6. CSS Type Properties in the Rule Definition Window
         7. Block Properties
         8. List Properties
      7. Cascading Style Sheets Tutorial
         1. Setting Up
         2. Creating an External Style Sheet
         3. Editing a Style
         4. Adding Another Style
         5. Creating a Class Style
         6. Attaching an External Style Sheet
   5. 5. 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 Links
         3. Changing the Look of the 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 pop-up menus
            6. Removing a Spry menu
      8. Link Tutorial
         1. Linking to Other Pages and Web Sites
         2. Formatting Links
         3. Adding a Navigation Bar
         4. Styling the Menu Bar
         5. Submenus and Rollover Buttons
   6. 6. Images
      1. Adding Images
         1. Adding an Image Placeholder
      2. Inserting an Image from Photoshop
         1. Method 1: Using the Insert Image Object
            1. JPEG optimization options
            2. GIF and PNG8 optimization options
            3. PNG optimization options
         2. Method 2: Copying and Pasting from Photoshop
      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. Some Properties to Avoid
      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. The 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. Editing Images Pasted from Photoshop
         5. 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. Inserting a Rollover Image
         5. Using Background Images
   7. 7. 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 and Data
          2. Modifying the Table
          3. Formatting the Table
          4. Final Improvements
6. II. 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
   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
         2. Modifying Fixed Layouts
         3. Modifying Liquid Layouts
         4. Modifying Elastic Layouts
      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 Div to Your Page
      8. Drawing AP Divs
      9. The AP Elements Panel
      10. Modifying AP Element Properties
          1. Resizing Absolutely Positioned Elements
          2. Moving AP Elements
          3. Aligning AP Elements
          4. Background Image and Color
      11. Nesting AP Divs
      12. CSS Layout Tutorial
          1. Adding Content
          2. Fine-Tuning the Layout
          3. Adding Styles and Navigation
          4. Fiddling with the Footer
   3. 10. Under the Hood: HTML
      1. Roundtrip HTML
         1. Auto-Fixing Your Code
         2. Web Application Server Pages
         3. Special Characters and Encoding
      2. Code View
         1. Coding Toolbar
         2. Code Hints
         3. Code Collapse
         4. Setting Code Formatting
            1. Indents
            2. Text wrapping
            3. Line breaks
            4. Case for tags and attributes
            5. TD tag
            6. Advanced formatting options
         5. Related Files
      3. Live Code
      4. Quick Tag Editor
         1. Using the Quick Tag Editor
      5. 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
7. III. Bringing Your Pages to Life
   1. 11. 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. <label> Tag
         10. <fieldset> Tag
      4. Validating Forms
         1. Spry Validation Basics
         2. Formatting Spry Error Messages and Fields
         3. Spry Text Field
            1. Validation types
            2. Custom validation
            3. Enforcing a pattern
            4. Supplying 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. Inserting a Form and Adding a Form Field
         2. Adding a Spry Validation Text Field
         3. Adding a Spry Form Menu
         4. Adding a Spry Radio Group
         5. Completing and Testing the Form
   2. 12. Spry: Creating Interactive Web Pages
      1. What is Spry?
      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. Storing Data in an XML File
            1. What is XML?
            2. Rules of the road
         3. Inserting a Spry Data Set
         4. Inserting HTML Data
         5. Inserting XML Data
         6. Choosing a Data Layout
            1. Spry Table
            2. Master/Detail Layout
            3. Stacked Containers
            4. Stacked Containers with Spotlight Area
         7. Creating a Spry Region
         8. The Bindings Panel
         9. Spry Repeating Region
         10. Spry Repeat Lists
      7. Live View
   3. 13. Dreamweaver Behaviors
      1. Understanding Behaviors
         1. Behavior Elements
         2. More about Events
      2. Applying Behaviors
         1. The Behaviors Panel
         2. Applying Behaviors, Step by Step
         3. Adding Multiple Behaviors
         4. Editing Behaviors
         5. A Quick Example
      3. Events
         1. Mouse Events
         2. Keyboard Events
         3. Body and Frameset Events
         4. Selection and Highlighting Events
         5. Form Events
      4. 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. Navigation Actions
            1. Open Browser Window
            2. Go to URL
            3. Jump Menu and Jump Menu Go
            4. Check Plugin
         3. Image Actions
            1. Preload Images
            2. Swap Image
            3. Swap Image Restore
            4. Set Navigation Bar Image
         4. Message Actions
            1. Popup Message
            2. Set Text of Status Bar
            3. Set Text of Text Field
            4. Set Text of Container
            5. Text of Frame
         5. Element Actions
            1. Show-Hide Elements
            2. Draggable and Animated Divs
      5. Advanced Behaviors
         1. Call JavaScript
         2. Change Property
      6. Adding More Behaviors
   4. 14. Flash and Other Multimedia
      1. Flash: An Introduction
         1. Inserting a Flash Movie
         2. Flash Movie Properties
            1. Naming a Flash movie
            2. The movie file
            3. Src property
            4. Movie size
            5. Play options
            6. Margins
            7. Quality settings
            8. Scaling
            9. Alignment
            10. Background color
            11. Wmode
      2. Making It Easier to Download the Flash Plug-in
      3. Adding Flash Videos
      4. The Land of Obsolete Web Technology
8. IV. Building a Web Site
   1. 15. Introducing Site Management
      1. Structuring a Web Site
         1. Defining a Site
            1. Site name
            2. Local root folder
            3. Default images folder
            4. Links relative to
            5. HTTP address
            6. Case-sensitive links
            7. Cache
         2. Editing or Removing Defined Sites
         3. Exporting and Importing Sites
         4. Organizing Site Files
         5. Modifying the Files Panel View
         6. Adding New Folders and Files
            1. Adding files
            2. Adding folders
            3. Moving files and folders
            4. Renaming files and folders
            5. Deleting files and folders
      2. 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. Find and Fix Broken Links
         1. Finding Broken Links
            1. Checking just one page
            2. Checking specific pages
            3. Checking the entire Web site
         2. Fixing Broken Links
         3. Listing External Links
         4. Orphaned Files
         5. Changing a Link Throughout a Site
      3. Validating Web Pages
         1. Steps for Validating Web Pages
      4. Cleaning Up HTML (and XHTML)
      5. Site Reporting
      6. Accessibility
         1. Accessibility Priorities
         2. Accessibility Options
      7. Download Statistics
   3. 17. Moving Your Site to the Internet
      1. Defining a Remote Site
         1. Setting Up a Remote Site with FTP
         2. Setting Up a Remote Site over a Local Network
         3. Setting Up a Remote Site with RDS
         4. Setting Up a Remote Site with WebDAV
         5. Setting Up a Remote Site with SourceSafe
      2. Transferring Files
         1. Moving Files to the Web Server
            1. Other ways to move files to the Web server
         2. Getting Files from the 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. Adding Design Notes to a File
         3. Viewing Design Notes
         4. Organizing the Columns in the Files Panel
         5. “All Info” Design Notes in Column Views
            1. Phase 1: Defining the new information types
            2. Phase 2: Adding the column
9. V. Dreamweaver CS4 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
         1. Adding a Basic Editable Region
         2. Adding a Repeating Region
         3. Repeating Tables
         4. Making a Tag Attribute Editable
      4. Adding Optional Regions
         1. Locking Optional Regions
         2. Repeating Optional Regions
         3. Optional Editable Regions
         4. Advanced Optional Regions
            1. Even fancier tricks
            2. Controlling regions with expressions
         5. Editing and Removing Optional Regions
      5. Nested Templates
         1. Customizing Nested Templates
         2. Using Nested Templates
      6. Building Pages Based on a Template
         1. Working with Repeating Regions
         2. Changing Properties of Editable Tag Attributes
         3. Hiding and Showing Optional Regions
         4. Applying Templates to Existing Pages
      7. Updating a Template
         1. Updating Nested Templates
         2. Unlinking a Page from a Template
         3. Exporting a Template-Based Site
      8. Template Tutorial
         1. Creating a Template
         2. Creating a Page Based on a Template
         3. Creating Another Template-Based Page
         4. Updating a Template
   3. 20. Automating Dreamweaver
      1. The History Panel Revisited
         1. Replay Your Steps
         2. Exceptions and Errors
         3. Copying and Pasting Actions
         4. Save Steps as Commands
         5. Recording Commands
      2. 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 the 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
10. VI. Dynamic Dreamweaver
    1. 22. Getting Started with Dynamic Web Sites
       1. Pieces of the Puzzle
          1. Understanding Server Models
             1. PHP
             2. ASP
             3. ColdFusion
          2. Picking a Server Model
       2. Dynamic Web Sites: The Setup
          1. Setting Up a Testing Server
             1. Windows
             2. Mac
          2. Localhost and the htdocs Folder
          3. Setting Up Dreamweaver
       3. Creating a Dynamic Page
       4. Databases: A Quick Introduction
          1. Tables and Records
          2. Relational Databases
       5. Loading a Database
       6. Connecting to a Database
          1. Exploring the Databases Panel
    2. 23. Adding Dynamic Data to Your Pages
       1. Retrieving Information
          1. Understanding Recordsets
          2. Creating Recordsets
          3. Filtering Information
          4. Comparison Operators for Filters
             1. Comparing text values
             2. Comparing numbers
          5. Getting Comparison Values
             1. Form variables
             2. URL parameters
             3. Creating a link with a URL parameter
             4. Creating the recordset for the results page
          6. Advanced Recordsets and SQL
             1. SQL: the very basics
             2. Using the Data Tree view
             3. Creating variables for filtering data
          7. Reusing Recordsets
          8. Editing Recordsets
          9. Deleting Recordsets
       2. Adding Dynamic Information
          1. The Bindings Panel
          2. Formatting Dynamic Information
          3. Deleting Dynamic Information
       3. Displaying Multiple Records
          1. Creating a Repeating Table
          2. Creating a Repeat Region
          3. Editing and Removing a Repeat Region
       4. Recordset Navigation
          1. Recordset Navigation Bar
          2. Recordset Navigation Status
       5. Viewing Live Data
          1. Live Data View Settings
       6. Master Detail Page Set
       7. Passing Information Between Pages
       8. Tutorial: Displaying Database Info
          1. Creating a Recordset
          2. Live Data View and Creating Repeating Regions
          3. Editing a Recordset and Linking to a Detail Page
          4. Building the Detailed Product Page
          5. Filling in the Details
          6. Operators Standing By
    3. 24. Web Pages that Manipulate Database Records
       1. Adding Data
          1. Dreamweaver’s Record Insertion Form Wizard
          2. Using the Insert Record Behavior
       2. Updating Database Records
          1. The Update Record Form Wizard
          2. The Update Record Server Behavior
       3. Dynamic Form Fields
          1. Dynamic Text Form Fields
          2. Dynamic Checkboxes and Radio Buttons
             1. Dynamic radio buttons
             2. Dynamic checkboxes
          3. Dynamic Menus and Lists
       4. Deleting Records
          1. Deleting Records for ASP
          2. Deleting Records for PHP and ColdFusion
       5. Tutorial: Inserting and Updating Data
          1. Adding an Insert Product Page
          2. Finishing the Insert Form
          3. Building a Page for Editing Database Records
             1. Linking to the update page
             2. Creating the update page
          4. Creating and Linking to the Delete Page
             1. Adding a link on the details page
             2. Creating the delete page
    4. 25. Advanced Dynamic Site Features
       1. Password-Protecting Web Pages
          1. The Users Table
          2. Creating a Registration Form
          3. Creating the Login Page
          4. The Log Out User Behavior
          5. Protecting Individual Pages
       2. Additional Data Sources
          1. For PHP and ColdFusion
          2. For ASP
          3. URL Variables
          4. Form Variables
          5. Cookies
          6. Session Variables
          7. Server Variables
       3. Advanced Server Behaviors
          1. Recordset Paging
          2. Show Region Server Behaviors
       4. Tutorial: Authentication
          1. Building a Login Page
          2. Password-Protecting the Administration Pages
          3. Displaying a Portion of a Page to Logged-In Users
    5. 26. Server-Side XML and XSLT
       1. Understanding the Technologies
       2. Creating Dynamic Pages with XSLT and XML
       3. Inserting and Formatting XML
          1. Inserting a Repeat Region
             1. Building a repeat-region filter
          2. Inserting a Conditional Region
          3. Using Multiple Conditional Regions
       4. Advanced XSLT Tricks
          1. Sorting Data in a Repeat Region
          2. Using XSLT Parameters
11. VII. Appendixes
    1. A. Getting Help
       1. Getting Help from Dreamweaver
          1. Detailed Assistance
       2. Getting Help from Adobe
          1. Adobe Web Site
          2. Paid Support
          3. The Forums
       3. Help from the Real World
          1. DMX Zone
          2. Community MX
    2. B. Dreamweaver CS4, 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
12. Index
13. About the Author
14. Colophon
15. Copyright