You are previewing Master Visually®: Dreamweaver® CS4 and Flash® CS4 Professional.
O'Reilly logo
Master Visually®: Dreamweaver® CS4 and Flash® CS4 Professional

Book Description

Updated tips and step-by-step guidance on the integration between the latest releases of Dreamweaver and Flash

  • Covering all the new features of Dreamweaver CS4 and Flash CS4 Professional, this two-color visual guide presents practical, straight-forward advice on intermediate-to-advanced level topics

  • Offering you the next step on how to maximize the latest releases of this Web site software, the book begins with a review of Dreamweaver and Flash basics and then progresses to managing a finished site, adding dynamic elements and interactivity, and adding movie elements and animation with advanced Flash techniques

  • Clear, numbered instructions walk you through the steps for performing more than 300 unique and eye-catching Dreamweaver and Flash tasks with the expectation that you will integrate the techniques to create a robust and interactive Web site

  • The companion Web site includes all the author files used in the book as well as customizable Web site templates to help you create robust Web sites with minimal time and effort

Table of Contents

  1. Copyright
  2. Praise for Visual Books...
  3. Credits
  4. About the Author
  5. Author's Acknowledgments
  6. HOW TO USE THIS BOOK
    1. How to Use This Master VISUALLY Book
      1. Who Needs This Book
      2. Book Organization
      3. Chapter Organization
      4. What You Need to Use This Book
      5. Using the Mouse
      6. The Conventions in This Book
      7. Operating System Difference
  7. I. DREAMWEAVER BASICS
    1. 1. Explore the Dreamweaver Workspace
      1. 1.1. Introduction to the Dreamweaver Interface
      2. 1.2. Open a Blank Web Page
      3. 1.3. Add Text in Design View
      4. 1.4. Enter Code in Code View
      5. 1.5. Explore Split View
      6. 1.6. Explore the Panels
      7. 1.7. View Workspaces
    2. 2. Set Up a Dreamweaver Site
      1. 2.1. Create a Site in Basic Mode
      2. 2.2. Create a Site in Advanced Mode
      3. 2.3. Create a Web Page
      4. 2.4. Save a New Web Page
      5. 2.5. Create a New Page from a Starter Layout
      6. 2.6. Preview a Web Page in a Browser
      7. 2.7. Add Additional Browsers for Previewing Pages
  8. II. ADD DESIGN ELEMENTS
    1. 3. Add Text
      1. 3.1. Add Paragraphs
      2. 3.2. Add Headings
      3. 3.3. Insert Objects Using the Insert Panel
      4. 3.4. Apply (X)HTML Formatting with the Property Inspector
      5. 3.5. Create Lists
      6. 3.6. Insert a Line Break
      7. 3.7. Insert a Horizontal Rule
    2. 4. Work with Images
      1. 4.1. Understanding Image File Formats
      2. 4.2. Understand Image Optimization
      3. 4.3. Insert an Image from the Insert Panel
      4. 4.4. Insert an Image from the Assets Panel
      5. 4.5. Insert a Photoshop Image as a Smart Object
      6. 4.6. Update a Photoshop Smart Object
      7. 4.7. Insert an Image Placeholder
    3. 5. Create Hyperlinks
      1. 5.1. Insert a Hyperlink with the Insert Panel
      2. 5.2. Add a Hyperlink to Existing Text
      3. 5.3. Add a Hyperlink to an Image
      4. 5.4. Link to a Place in a Document
      5. 5.5. Link to an External Web Site
      6. 5.6. Create a Hyperlink to an E-mail Address
      7. 5.7. Create an Image Map
    4. 6. Create Data Tables
      1. 6.1. Insert a Table with the Insert Panel
      2. 6.2. Insert Content into a Table
      3. 6.3. Select Tables and Table Parts
      4. 6.4. Insert Rows or Columns
      5. 6.5. Delete Rows or Columns
      6. 6.6. Merge Table Cells
      7. 6.7. Split Cells
      8. 6.8. Sort a Table
      9. 6.9. Import a Table from Microsoft Excel
    5. 7. Format with Style Sheets
      1. 7.1. Introducing Cascading Style Sheets
      2. 7.2. Set Styles for a Page
      3. 7.3. Create a Style for an (X)HTML Tag
      4. 7.4. Create a Class Style
      5. 7.5. Create a Style Based on an ID
      6. 7.6. Edit a Style in the CSS Panel
      7. 7.7. Move Styles to an External Style Sheet
      8. 7.8. Attach an External Style Sheet to a Page
      9. 7.9. View Related Files
      10. 7.10. Format Hyperlinks
      11. 7.11. Format Lists
      12. 7.12. Insert Background Images
      13. 7.13. Create an HTML E-mail Message with Inline CSS
    6. 8. Lay Out Pages
      1. 8.1. Insert div Elements
      2. 8.2. Add Borders to Elements
      3. 8.3. Control Padding
      4. 8.4. Control Margins
      5. 8.5. Set Element Widths
      6. 8.6. Float Elements
      7. 8.7. Clear Floats
      8. 8.8. Apply Absolute Positioning
      9. 8.9. Draw an Absolutely Positioned Element
      10. 8.10. Apply Relative Positioning
      11. 8.11. Find CSS Rules Using the Code Navigator
  9. III. ADVANCED DREAMWEAVER FEATURES
    1. 9. Reuse Web Page Components
      1. 9.1. Create a Template
      2. 9.2. Add Editable Regions to a Template
      3. 9.3. Create a Web Page Based on a Template
      4. 9.4. Update a Template
      5. 9.5. Add a Repeating Region to a Template
      6. 9.6. Add an Optional Region to a Template
      7. 9.7. Make Attributes Editable
      8. 9.8. Create a Library Item
      9. 9.9. Insert a Library Item onto a Page
      10. 9.10. Update a Library Item
      11. 9.11. Use Snippets
    2. 10. Attach Behaviors to Web Page Elements
      1. 10.1. Add a Behavior
      2. 10.2. Modify a Behavior
      3. 10.3. Change an Event
      4. 10.4. Open a New Browser Window
      5. 10.5. Preview a Page Using Live View
    3. 11. Add Web Page Elements and Effects with the Spry Framework
      1. 11.1. Understanding the Spry Framework
      2. 11.2. Add a Menu Bar Widget
      3. 11.3. Insert a Tabbed Panels Widget
      4. 11.4. Add an Accordion Widget
      5. 11.5. Insert a Collapsible Panel Widget
      6. 11.6. Add a Spry Tooltip
      7. 11.7. Add a Spry Data Set
      8. 11.8. Change Styles for Spry Widgets
      9. 11.9. Use the JavaScript Extractor
    4. 12. Work with (X)HTML Code
      1. 12.1. Edit Source Code
      2. 12.2. Use the Code View Toolbar
      3. 12.3. Edit a Tag in Design View
      4. 12.4. Find and Replace Text
      5. 12.5. Look Up Information in the Reference Panel
      6. 12.6. Insert a Special Character
    5. 13. Manage a Web Site
      1. 13.1. Manage Files in the Files Panel
      2. 13.2. Buy a Domain Name
      3. 13.3. Sign Up for a Web-Hosting Account
      4. 13.4. Set Up a Connection to a Web Host
      5. 13.5. Upload Files
      6. 13.6. Synchronize Local and Remote Files
      7. 13.7. Cloak Files
      8. 13.8. Back Up a Dreamweaver Site
      9. 13.9. Validate Your Code
      10. 13.10. Check Browser Compatibility
    6. 14. Work in a Team
      1. 14.1. Lock Files with a Check-Out System
      2. 14.2. Add and Use Design Notes
      3. 14.3. Set Up an Adobe Contribute CS4 Site
      4. 14.4. Set Up a Page for InContext Editing
      5. 14.5. Modify a Page in InContext Editing
      6. 14.6. Create a Subversion Account
      7. 14.7. Integrate Subversion with Dreamweaver
    7. 15. Customize Dreamweaver
      1. 15.1. Edit Preferences
      2. 15.2. Edit Keyboard Shortcuts
      3. 15.3. Install a Dreamweaver Extension
      4. 15.4. Use a Dreamweaver Extension
  10. IV. CREATE A DYNAMIC SITE
    1. 16. Set Up a Dynamic Site
      1. 16.1. Introducing Dynamic Sites
      2. 16.2. Web Servers
      3. 16.3. Download the Apache Web Server
      4. 16.4. Install the Apache Server
      5. 16.5. Install Internet Information Services
      6. 16.6. Download PHP
      7. 16.7. Install PHP
      8. 16.8. Test Your PHP Installation
      9. 16.9. Download ColdFusion
      10. 16.10. Install ColdFusion
      11. 16.11. Install the ColdFusion Extension for Dreamweaver
      12. 16.12. Set Up a Dynamic Site
    2. 17. Create Forms
      1. 17.1. Add a Form to a Page
      2. 17.2. Add a Fieldset and Legend
      3. 17.3. Add a Text Field
      4. 17.4. Insert a Text Area
      5. 17.5. Add Check Boxes and Radio Buttons
      6. 17.6. Build a Drop-Down List or Menu
      7. 17.7. Add a Password Field
      8. 17.8. Add a Hidden Field
      9. 17.9. Add a Submit Button
      10. 17.10. Make an Image into a Button
    3. 18. Validate Data with Spry
      1. 18.1. Add a Validation Text Field
      2. 18.2. Format Spry Validation Messages
      3. 18.3. Add a Validation TextArea Field
      4. 18.4. Insert a Spry Validation Checkbox and Radio Group
      5. 18.5. Add a Validation Drop-down Menu
      6. 18.6. Include a Validation Password Field
      7. 18.7. Add a Validation Confirm Field
    4. 19. Integrate a Database with a Web Site
      1. 19.1. Introducing Databases
      2. 19.2. Download MySQL
      3. 19.3. Install MySQL
      4. 19.4. Configure MySQL
      5. 19.5. Download the MySQL GUI Tools
      6. 19.6. Install the MySQL GUI Tools
      7. 19.7. Create a Database
      8. 19.8. Create a Table
      9. 19.9. Understanding the Structured Query Language
      10. 19.10. Add Data to a Table
      11. 19.11. Create a ColdFusion Data Source for MySQL
      12. 19.12. View Database Information in Dreamweaver
      13. 19.13. Create a Recordset with the Bindings Panel
      14. 19.14. Display Data on a Page
      15. 19.15. Insert a Repeat Region
      16. 19.16. Display the Number of Records in a Recordset on a Page
    5. 20. Work with Data-Driven Pages
      1. 20.1. Create a Search Interface
      2. 20.2. Create a Master Detail Page Set
      3. 20.3. Manually Create a Data Drill-Down Interface
      4. 20.4. Display Results Across Multiple Pages
      5. 20.5. Show and Hide Content Based on a Recordset
    6. 21. Modify Database Information from Your Site
      1. 21.1. Insert Records
      2. 21.2. Update Existing Records
      3. 21.3. Delete Records
    7. 22. Advanced Dynamic Topics
      1. 22.1. Include External Files
      2. 22.2. Use a Design-time Style Sheet
      3. 22.3. Dynamically Display Images
      4. 22.4. Store Information in a Cookie
      5. 22.5. Use Cookie Data on a Page
      6. 22.6. Create an Application Component
      7. 22.7. Start a Session
      8. 22.8. Use Session Variables
      9. 22.9. Add a File Upload Field
      10. 22.10. E-mail Form Results
  11. V. MASTERING FLASH BASICS
    1. 23. Flash Fundamentals
      1. 23.1. Introducing Flash
      2. 23.2. Navigating the Flash Window
      3. 23.3. Create a New Flash Movie
      4. 23.4. Save a Flash Movie
      5. 23.5. Set the Stage Size
      6. 23.6. Work with Panels
      7. 23.7. Switch Workspaces
      8. 23.8. View Rulers and Grids
      9. 23.9. Add Guides
    2. 24. Add Art to Your Movie
      1. 24.1. Introducing Flash Objects
      2. 24.2. Using the Tools Panel
      3. 24.3. Draw Line Segments
      4. 24.4. Draw with the Pen Tool
      5. 24.5. Draw Shapes
      6. 24.6. Draw Objects with the Brush Tool
      7. 24.7. Change Colors with the Paint Bucket and Ink Bottle Tools
      8. 24.8. Using the Object Drawing Model
      9. 24.9. Import Graphics
      10. 24.10. Convert Bitmaps into Vector Graphics
    3. 25. Enhance and Edit Objects
      1. 25.1. Select Objects with the Selection Tool
      2. 25.2. Select Objects with the Lasso Tool
      3. 25.3. Format Strokes
      4. 25.4. Edit Fills
      5. 25.5. Use Kuler
      6. 25.6. Turn Bitmaps into Fills
      7. 25.7. Edit Objects with the Free Transform Tool
      8. 25.8. Use the Eraser Tool
      9. 25.9. Work with Gradients
      10. 25.10. Transform a Gradient Fill
      11. 25.11. Move and Copy Objects
      12. 25.12. Copy Attributes
      13. 25.13. Group Objects
      14. 25.14. Stack Objects
      15. 25.15. Align Objects
      16. 25.16. Undo with the History Panel
    4. 26. Work with Text
      1. 26.1. Add Text with the Text Tool
      2. 26.2. Format Text
      3. 26.3. Align and Kern Text
      4. 26.4. Set Text Box Margins and Indents
      5. 26.5. Move and Resize Text Boxes
      6. 26.6. Break Apart Text
      7. 26.7. Distort Text
  12. VI. ADDING MOVIE ELEMENTS
    1. 27. Work with Layers
      1. 27.1. Add and Delete Layers
      2. 27.2. Work with Layers on the Timeline
      3. 27.3. Stack Layers
      4. 27.4. Organize Layers into Folders
      5. 27.5. Add and Create a Mask Layer
      6. 27.6. Distribute Objects to Layers
    2. 28. Work with Symbols and Instances
      1. 28.1. An Introduction to Symbols
      2. 28.2. Using the Flash Library
      3. 28.3. Create a Symbol
      4. 28.4. Insert an Instance
      5. 28.5. Modify an Instance
      6. 28.6. Edit a Symbol
      7. 28.7. Introduction to Flash Buttons
      8. 28.8. Create a Button
      9. 28.9. Draw Instances with the Deco Tool
  13. VII. ANIMATE IN FLASH
    1. 29. Create Basic Animation with Flash
      1. 29.1. Introduction to Animation
      2. 29.2. Introduction to Frames
      3. 29.3. Set Movie Dimensions and Frame Rate
      4. 29.4. Add Frames
      5. 29.5. Select Frames
      6. 29.6. Add Frame Labels
      7. 29.7. Delete Frames or Change Keyframe Status
      8. 29.8. Create Frame-by-Frame Animation
      9. 29.9. Preview Flash Animations
      10. 29.10. View Multiple Frames with Onion Skinning
      11. 29.11. Create Animation with a Motion Tween
      12. 29.12. Change the Path of an Animation
      13. 29.13. Create a Shape Tween
      14. 29.14. Modify Animation with the Motion Editor
      15. 29.15. Move and Copy Frames
      16. 29.16. Create an Animated Movie Clip
      17. 29.17. Create Animated Buttons
      18. 29.18. Create Realistic Motion with the Bone Tool
      19. 29.19. Rotate Movie Clips in 3D
      20. 29.20. Move Movie Clips in 3D
    2. 30. Modify Tweens
      1. 30.1. Rotate Objects in a Motion Tween
      2. 30.2. Animate Symbols Along a Path
      3. 30.3. Use Roving Keyframes
      4. 30.4. Ease Animation
      5. 30.5. Motion Tween Opacity, Color, and Brightness
      6. 30.6. Reverse Frames
      7. 30.7. Copy Motion Tween Information
      8. 30.8. Save Motion as a Preset
      9. 30.9. Apply a Filter
  14. VIII. ADD SOUND AND VIDEO
    1. 31. Add Sound
      1. 31.1. Introduction to Flash Sounds
      2. 31.2. Import a Sound File
      3. 31.3. Assign a Sound to a Frame
      4. 31.4. Assign a Sound to a Button
      5. 31.5. Create Event Sounds
      6. 31.6. Assign Start Sounds
      7. 31.7. Assign Stop Sounds
      8. 31.8. Assign Streaming Sounds
      9. 31.9. Loop Sounds
      10. 31.10. Add Sound Effects
    2. 32. Add Video
      1. 32.1. Convert Video to Flash Video
      2. 32.2. Use the FLV Component
      3. 32.3. Embed Video in Your Flash File
  15. IX. IMPLEMENT ACTIONSCRIPT IN YOUR MOVIE
    1. 33. ActionScript Basics
      1. 33.1. Introduction to Flash ActionScript
      2. 33.2. Using the Actions Panel
      3. 33.3. Assign ActionScript to a Frame
      4. 33.4. Name an Instance on the Stage
      5. 33.5. Create Variables
      6. 33.6. Trace Variables
      7. 33.7. Add Comments to Your Code
      8. 33.8. Create a Function
      9. 33.9. Call a Function
      10. 33.10. Pass Arguments to a Function
      11. 33.11. Return a Value from a Function
      12. 33.12. Make Decisions in Code
    2. 34. Use ActionScript in Your Movie
      1. 34.1. Create Event Handlers and Listeners
      2. 34.2. Stop a Movie
      3. 34.3. Go to a Specific Frame
      4. 34.4. Drag-and-Drop Movie Clips
      5. 34.5. Animate with ActionScript
    3. 35. Work with Text in ActionScript
      1. 35.1. Create Input Text Boxes
      2. 35.2. Create Dynamic Text Boxes
      3. 35.3. Read and Write Text with ActionScript
  16. X. FINALIZING YOUR PROJECT
    1. 36. Publish Your Project
      1. 36.1. Understanding Flash Formats
      2. 36.2. Publish Your Movie to a SWF
      3. 36.3. Change Flash Publishing Options
      4. 36.4. Publish the Movie to a Stand-Alone Projector
    2. 37. Integrate Flash and Dreamweaver
      1. 37.1. Test Movie Bandwidth
      2. 37.2. Create an (X)HTML Page in Flash
      3. 37.3. Insert a Flash Movie into Dreamweaver