You are previewing Dreamweaver CS4 For Dummies®.
O'Reilly logo
Dreamweaver CS4 For Dummies®

Book Description

Whether you’re a seasoned pro or a Web design newbie, Dreamweaver CS4 For Dummies shows you the quickest, easiest way to get up to speed on Dreamweaver. You’ll be able to create professional, great-looking, user-friendly websites in no time at all. Take advantage of the new, more customizable interface, improved integration with Flash and Photoshop, a handy new AJAX coding feature, and Live View, which lets you see your work as you create it.

Understand Dreamweaver basics, set up your site and create new pages, and work with text, graphics, and links. You can manage, test, and publish a site, define and apply styles with CSS, coordinate your design work, add audio, video, and Flash files to your site, build a dynamic Web site, and use Dreamweaver’s database features. Know how to:

  • Design, build, and deploy professional-looking Web sites

  • Use Dreamweaver’s new, more versatile preset layouts

  • Fine-tune styles with enhanced CSS support

  • Keep your pages cutting-edge with SmartObjects

  • Take advantage of the new, more customizable interface

  • Understand browser differences, make the most of CSS, build dynamic sites

  • Create and optimize Web graphics

  • Learn to maximize Cascading Style Sheets and Dreamweaver’s Layers features for creating fluid layouts

Complete with lists of ten resources, ten timesaving tips, and ten great Web sites designed in Dreamweaver, Dreamweaver CS4 For Dummies is your one-stop guide to setting up, working with, and making the most of Dreamweaver.

Table of Contents

  1. Copyright
  2. About The Author
  3. Author's Acknowledgments
  4. Publisher's Acknowledgments
  5. Introduction
    1. About This Book
    2. What's New in Dreamweaver CS4?
    3. Using Dreamweaver on a Mac or PC
    4. Conventions Used in This Book
    5. What You're Not to Read
    6. Foolish Assumptions
    7. How This Book Is Organized
      1. Part I: Creating Great Web Sites
      2. Part II: Appreciating Web Design Options
      3. Part III: Making It Cool with Multimedia and JavaScript
      4. Part IV: Working with Dynamic Content
      5. Part V: The Part of Tens
    8. Icons Used in This Book
    9. Where to Go from Here
  6. I. Creating Great Web Sites
    1. 1. The Many Ways to Design a Web Page
      1. 1.1. Developing a New Site
        1. 1.1.1. Managing your site's structure
          1. 1.1.1.1. What the user sees
          2. 1.1.1.2. What's behind the scenes
        2. 1.1.2. Understanding the basics of XHTML
      2. 1.2. Comparing Web Designs
        1. 1.2.1. Appreciating the advantages of CSS
        2. 1.2.2. Reviewing old-school designs
        3. 1.2.3. Considering frame options
        4. 1.2.4. Creating dynamic Web sites
      3. 1.3. Understanding Browser Differences
      4. 1.4. Introducing the Workspace in Dreamweaver CS4
        1. 1.4.1. Changing workspace layouts
        2. 1.4.2. The menu bar
        3. 1.4.3. The Document toolbar
        4. 1.4.4. The Document window
        5. 1.4.5. The docking panels
        6. 1.4.6. The Insert panel
        7. 1.4.7. The Property inspector
        8. 1.4.8. The status bar
        9. 1.4.9. Changing preference settings
    2. 2. Opening and Creating Sites
      1. 2.1. Setting Up a New or Existing Site
        1. 2.1.1. Defining a Web site in Dreamweaver
        2. 2.1.2. Editing and managing multiple sites
      2. 2.2. Creating New Pages
        1. 2.2.1. Starting from the Welcome screen
        2. 2.2.2. Creating a page with the New Document window
        3. 2.2.3. Naming new page files
        4. 2.2.4. Naming the first page index.html
        5. 2.2.5. Bestowing a page title
      3. 2.3. Designing Your First Page
        1. 2.3.1. Formatting headlines with the heading tags
        2. 2.3.2. Adding paragraphs and line breaks
        3. 2.3.3. Inserting text from another program
        4. 2.3.4. Adding images
      4. 2.4. Setting Links
        1. 2.4.1. Linking pages within your Web site
        2. 2.4.2. Setting links to named anchors within a page
        3. 2.4.3. Linking to another Web site
        4. 2.4.4. Setting a link to an e-mail address
      5. 2.5. Changing Page Properties
      6. 2.6. Adding Meta Tags for Search Engines
      7. 2.7. Previewing Your Page in a Browser
    3. 3. Adding Graphics
      1. 3.1. Creating and Optimizing Web Graphics
        1. 3.1.1. Resizing graphics and photos
        2. 3.1.2. Choosing the best image format
        3. 3.1.3. Saving images for the Web: The basics
        4. 3.1.4. Optimizing JPEG images in Photoshop
        5. 3.1.5. Optimizing GIF and PNG images in Photoshop
        6. 3.1.6. How small is small enough?
      2. 3.2. Inserting Images in Dreamweaver
      3. 3.3. Aligning an Image with Text Wrapping
      4. 3.4. Image Editing in Dreamweaver
        1. 3.4.1. Cropping an image
        2. 3.4.2. Adjusting brightness and contrast
        3. 3.4.3. Sharpening an image
        4. 3.4.4. Optimizing images in Dreamweaver
        5. 3.4.5. Opening an image in Photoshop or Fireworks from Dreamweaver
      5. 3.5. Inserting a Background Image
      6. 3.6. Creating Image Maps
    4. 4. Managing, Testing, and Publishing a Site
      1. 4.1. Testing Your Site in Different Browsers
        1. 4.1.1. Designing for browser differences
        2. 4.1.2. Using Dreamweaver's Browser Compatibility feature
      2. 4.2. Testing Your Work with the Site Reporting Features
        1. 4.2.1. Finding and Fixing Broken Links
        2. 4.2.2. Checking for broken links
        3. 4.2.3. Fixing broken links
      3. 4.3. Managing Linked Files
        1. 4.3.1. Moving and renaming files
        2. 4.3.2. Making global changes to links
      4. 4.4. Publishing Your Site to a Web Server
        1. 4.4.1. Setting up Web server access for FTP
        2. 4.4.2. Putting your Web site online
        3. 4.4.3. Synchronizing local and remote sites
      5. 4.5. Setting Cloaking Options
      6. 4.6. Making the Most of Dreamweaver's Site Management Features
        1. 4.6.1. Using a testing server
        2. 4.6.2. Enabling Check In and Check Out
        3. 4.6.3. Using Design Notes
          1. 4.6.3.1. Setting up Design Notes
          2. 4.6.3.2. Adding a note with Design Notes
        4. 4.6.4. Enabling Contribute features
      7. 4.7. Remembering Your History
      8. 4.8. Using the Quick Tag Editor
  7. II. Appreciating Web Design Options
    1. 5. Cascading Style Sheets
      1. 5.1. Introducing Cascading Style Sheets
        1. 5.1.1. Understanding the basics of styles
        2. 5.1.2. Understanding style selectors
          1. 5.1.2.1. Class selectors
          2. 5.1.2.2. ID selectors
          3. 5.1.2.3. Tag selectors
          4. 5.1.2.4. Creating compound styles
        3. 5.1.3. Understanding rule definition options
        4. 5.1.4. Looking at the code behind the scenes
      2. 5.2. Comparing CSS Rule Options
        1. 5.2.1. The Type category
        2. 5.2.2. The Background category
        3. 5.2.3. The Block category
        4. 5.2.4. The Box category
        5. 5.2.5. The Border category
        6. 5.2.6. The List category
        7. 5.2.7. The Positioning category
        8. 5.2.8. The Extensions category
      3. 5.3. Using the CSS Styles Panel
        1. 5.3.1. Working with the big picture in All mode
        2. 5.3.2. Looking closer at styles in Current mode
        3. 5.3.3. Creating, attaching, and listing styles
      4. 5.4. Switching between CSS and HTML Mode in the Property Inspector
      5. 5.5. Using Class and Tag Styles in Dreamweaver
        1. 5.5.1. Creating styles with the class selector
        2. 5.5.2. Applying class styles in Dreamweaver
        3. 5.5.3. Removing class styles in Dreamweaver
        4. 5.5.4. Creating styles with the tag selector
        5. 5.5.5. Editing an existing style
        6. 5.5.6. Renaming existing styles
      6. 5.6. Using Page Properties to Create Styles for Page-Wide Settings, such as Links
      7. 5.7. Using External Style Sheets
        1. 5.7.1. Creating an external style sheet
        2. 5.7.2. Attaching an external style sheet to a Web page
        3. 5.7.3. Moving, copying, and editing styles in an external style sheet
        4. 5.7.4. Using ready-made external style sheets
    2. 6. Creating CSS Layouts
      1. 6.1. Using CSS Layouts in Dreamweaver
        1. 6.1.1. Creating a new page with a CSS layout
        2. 6.1.2. Editing the styles in a CSS layout
          1. 6.1.2.1. Getting started
          2. 6.1.2.2. Editing page-wide settings
          3. 6.1.2.3. Customizing the Header area
          4. 6.1.2.4. Customizing the content areas
      2. 6.2. Turning Styles On and Off in Firefox
      3. 6.3. Styling an Unordered List for Links
      4. 6.4. Using CSS to Create Custom Page Layouts
        1. 6.4.1. Creating designs using the box model
        2. 6.4.2. Comparing margins and padding
        3. 6.4.3. Displaying CSS in different browsers
      5. 6.5. Creating a Custom CSS Layout
        1. 6.5.1. Setting up the page and the boxes
        2. 6.5.2. Styling the container <div> tag
        3. 6.5.3. Creating columns in the design
        4. 6.5.4. Wrapping up the custom layout
      6. 6.6. Positioning Elements with AP Divs
        1. 6.6.1. Creating AP Divs
        2. 6.6.2. Stacking and changing visibility of AP Divs
      7. 6.7. Managing Conflicting Styles
      8. 6.8. Using Design Time Style Sheets
    3. 7. Coming to the HTML Table
      1. 7.1. Creating HTML Tables
      2. 7.2. Creating Tables in Standard Mode
        1. 7.2.1. Choosing your table's appearance
        2. 7.2.2. Making tables more accessibile
        3. 7.2.3. Specifying cell options
        4. 7.2.4. Formatting multiple columns in a table
        5. 7.2.5. Merging and splitting table cells
      3. 7.3. Sorting Table Data
      4. 7.4. Importing Table Data from Other Programs
      5. 7.5. Using Tables for Spacing and Alignment
      6. 7.6. Nesting Tables within Tables
    4. 8. Framing Your Pages
      1. 8.1. Introducing the Basics of HTML Frames
      2. 8.2. Understanding How Frames Work
        1. 8.2.1. Creating a frameset in Dreamweaver
          1. 8.2.1.1. Creating a frameset from a sample
          2. 8.2.1.2. Creating a frameset using the Layout Insert panel
        2. 8.2.2. Saving files in a frameset
      3. 8.3. Setting Targets and Links in Frames
        1. 8.3.1. Naming frames
        2. 8.3.2. Setting links to a target frame
        3. 8.3.3. Comparing target options
      4. 8.4. Changing Frame Properties
        1. 8.4.1. Changing frame borders
        2. 8.4.2. Changing frame sizes
        3. 8.4.3. Changing scrolling and resizing options
        4. 8.4.4. Setting margin height and width
    5. 9. Coordinating Your Design Work
      1. 9.1. Templating Your Type
      2. 9.2. Creating Templates
        1. 9.2.1. Creating editable and uneditable regions
        2. 9.2.2. Creating a new template
        3. 9.2.3. Saving any page as a template
        4. 9.2.4. Making attributes editable
        5. 9.2.5. Creating a new page from a template
      3. 9.3. Making Global Changes with Templates
        1. 9.3.1. Identifying a template
        2. 9.3.2. Attaching and detaching templates
      4. 9.4. Reusing Elements with the Library Feature
      5. 9.5. Creating and Using Library Items
        1. 9.5.1. Creating a Library item
        2. 9.5.2. Adding a Library item to a page
        3. 9.5.3. Highlighting Library items
        4. 9.5.4. Making global changes with Library items
        5. 9.5.5. Editing one instance of a Library item
      6. 9.6. Using a Tracing Image to Guide Your Layout
  8. III. Making It Cool with Multimedia and JavaScript
    1. 10. Adding Interactivity with Behaviors
      1. 10.1. Brushing Up on Behavior Basics
      2. 10.2. Creating a Rollover Image
      3. 10.3. Adding Behaviors to a Web Page
        1. 10.3.1. Creating swaps with multiple images
        2. 10.3.2. Using the Open Browser Window behavior
      4. 10.4. Attaching Multiple Behaviors
      5. 10.5. Editing a Behavior
      6. 10.6. Installing New Extensions for Behaviors
    2. 11. Showing Off with Multimedia
      1. 11.1. Understanding Multimedia Players
      2. 11.2. Working with Adobe Flash
        1. 11.2.1. Inserting Flash SWF files
        2. 11.2.2. Setting Flash properties
        3. 11.2.3. Using scripts to make Flash function better
      3. 11.3. Working with Video and Audio on the Web
        1. 11.3.1. Comparing popular video formats
          1. 11.3.1.1. Flash video
          2. 11.3.1.2. Windows Media Video
          3. 11.3.1.3. RealVideo
          4. 11.3.1.4. QuickTime
          5. 11.3.1.5. AVI
        2. 11.3.2. Comparing popular audio formats
          1. 11.3.2.1. MP3
          2. 11.3.2.2. Windows Audio
          3. 11.3.2.3. RealAudio
          4. 11.3.2.4. WAV
      4. 11.4. Adding Audio and Video Files to Web Pages
        1. 11.4.1. Linking to audio and video files
        2. 11.4.2. Inserting audio and video files
        3. 11.4.3. Setting options for audio and video files
        4. 11.4.4. Setting multimedia parameters
        5. 11.4.5. Adding Flash audio and video files
        6. 11.4.6. Converting video files into Flash format with the Flash video encoder
      5. 11.5. Working with Java
        1. 11.5.1. Inserting Java applets
        2. 11.5.2. Setting Java parameters and other options
      6. 11.6. Linking to PDFs
    3. 12. Forms Follow Function
      1. 12.1. Creating HTML Forms
        1. 12.1.1. Creating radio buttons and check boxes
          1. 12.1.1.1. Creating radio buttons
          2. 12.1.1.2. Creating check boxes
        2. 12.1.2. Adding text fields and text areas
        3. 12.1.3. Creating drop-down lists
        4. 12.1.4. Finishing your form with Submit and Reset buttons
        5. 12.1.5. Using jump menus
      2. 12.2. Understanding How CGI Scripts Work
        1. 12.2.1. Configuring your form to work with a script
        2. 12.2.2. Using hidden fields
    4. 13. Creating AJAX Features with Spry
      1. 13.1. Making Magic with AJAX
      2. 13.2. Creating Drop-Down Menus with AJAX
      3. 13.3. Creating Collapsible Panels
      4. 13.4. Creating Tabbed Panels
      5. 13.5. Using Spry Validation Widgets
  9. IV. Working with Dynamic Content
    1. 14. Building a Dynamic Web Site: Getting Started
      1. 14.1. Understanding the Dynamic Web Site
        1. 14.1.1. Checking out dynamic site advantages
        2. 14.1.2. Seeing a dynamic site in action
      2. 14.2. Creating Dynamic Sites: Key Concepts
        1. 14.2.1. Understanding databases
        2. 14.2.2. Choosing a dynamic development technology
          1. 14.2.2.1. ASP
          2. 14.2.2.2. ASP.NET
          3. 14.2.2.3. ColdFusion
          4. 14.2.2.4. JavaServer Pages (JSP)
          5. 14.2.2.5. PHP
      3. 14.3. Setting Up Your Computer to Serve Dynamic Web Pages
        1. 14.3.1. Setting up a local Web server
        2. 14.3.2. Setting up permission
      4. 14.4. Creating a Data Connection in Dreamweaver
    2. 15. Bringing Data into the Mix
      1. 15.1. Exploring the Panels
        1. 15.1.1. The Databases panel
        2. 15.1.2. The Bindings panel
        3. 15.1.3. The Server Behaviors panel
        4. 15.1.4. The Components panel
      2. 15.2. Creating a Recordset
      3. 15.3. Using a Recordset on Your Page
      4. 15.4. Repeating a Region
      5. 15.5. Adding a Dynamic Image
        1. 15.5.1. Preparing to add an image
        2. 15.5.2. Binding the image
      6. 15.6. Adding Navigation to a Dynamic Page
      7. 15.7. Creating a Master-Detail Page Set
      8. 15.8. More Ways to Use Database-Driven Sites
  10. V. The Part of Tens
    1. 16. Ten Resources You May Need
      1. 16.1. Registering a Domain Name
      2. 16.2. Protecting Your E-mail Address from Spammers
      3. 16.3. Highlighting Links with Pop-Ups
      4. 16.4. Selling Stuff on the Web
      5. 16.5. Keeping Track of Traffic
      6. 16.6. Surveying Your Visitors
      7. 16.7. Saving Time with Templates
      8. 16.8. Keeping Up with Web Standards at W3.org
      9. 16.9. Extending Dreamweaver at Adobe.com
      10. 16.10. Dressing Up the Address Bar with a Favicon
    2. 17. Ten Timesaving Tips
      1. 17.1. Design for Your Audience
      2. 17.2. Create a Consistent Design
      3. 17.3. Follow the Three Clicks Rule
      4. 17.4. Get a Head Start on Your Designs
      5. 17.5. Split the View
      6. 17.6. Design in a Flash
      7. 17.7. Find Functional Fonts
      8. 17.8. Keep Frequently Used Items Handy
      9. 17.9. Be Prepared for Fast Updates
      10. 17.10. Back It Up