Dreamweaver CS5.5 · the Missing Manual by McFarland, David Sawyer -- Read -- Imperial Library of Trantor

Index

Dreamweaver CS5.5: The Missing Manual

A Note Regarding Supplemental Files The Missing Credits

About the Author About the Creative Team Acknowledgments The Missing Manual Series

Introduction

What Dreamweaver Is All About Why Dreamweaver? What’s New in Dreamweaver CS5.5 HTML, XHTML, CSS, and JavaScript 101 Document Types Of Tags and Properties XHTML, Too And HTML5, As Well Add Style with Cascading Style Sheets Add Interactivity with JavaScript The Very Basics About This Book About→These→Arrows Macintosh and Windows About the Outline Living Examples Online Resources

The Missing CD Registration Feedback Errata Newsletter

Safari® Books Online

One. Building a Web Page

1. Dreamweaver CS5.5 Guided Tour

The Dreamweaver CS5.5 Interface

The Document Window The Insert Panel The Files Panel The Property Inspector The Application Bar Organizing Your Workspace

Floating panels Iconic panes Workspace Layouts

Setting Up a Site Creating a Web Page The Dreamweaver Test Drive

Phase 1: Getting Dreamweaver in Shape Phase 2: Creating a Website Phase 3: Creating and Saving a Web Page Phase 4: Adding Images and Text Phase 5: Preview Your Work Phase 6: Finishing the Page

2. Adding Text to Your Web Pages

Adding Text in Dreamweaver

Adding Special Characters Line Breaks Nonbreaking Spaces Multiple Spaces Adding a Date to Your Page

Copying and Pasting Text

Simple Copy and Paste Paste Special Pasting Text from Word: The Basic Method Pasting Text with Word Formatting Pasting Excel Spreadsheet Information Importing Word and Excel Documents (Windows)

Selecting Text Spell-Checking

About Dictionaries Performing the Check

3. Text Formatting

Paragraph Formatting

Paragraphs Headlines Preformatted Text Paragraph Alignment Indented Paragraphs

Creating and Formatting Lists

Bulleted and Numbered Lists

Creating a new bulleted or numbered list Formatting existing text as a list

Reformatting Bulleted and Numbered Lists

Adding new items to a list Formatting bullets and numbers Nested lists

Definition Lists Removing and Deleting List Items

Removing list formatting Deleting list items

Text Styles

4. Introducing Cascading Style Sheets

Cascading Style Sheet Basics

Why Use CSS? Internal vs. External Style Sheets Types of Styles

Creating Styles

Phase 1: Set Up the Style Phase 2: Defining a Style Creating a Style with the Property Inspector

Using Styles

Applying a Class Style

Applying a class style to text Applying a class style to objects Other class styling options

Removing a Class Style Applying IDs to a Tag Linking to an External Style Sheet

Manipulating Styles

Editing Styles Deleting a Style Renaming a Class Style Duplicating a Style

Text Formatting with CSS

Choosing a Font

Applying font formatting Creating custom font lists

Changing the Font Size Picking a Font Color Adding Bold and Italic Aligning Text CSS Type Properties in the Rule Definition Window Block Properties List Properties

Cascading Style Sheets Tutorial

Setting Up Creating an External Style Sheet Editing a Style Adding Another Style Creating a Class Style Attaching an External Style Sheet

5. Links

Understanding Links

Absolute Links Document-Relative Links Root-Relative Links Link Types in Action

Link from the Home page (index.html) to the Contact Us page (contact.html) Link from the Horoscopes page to the Pisces page Link from the Scorpio page to the Horoscopes page

Executive Summary

Adding a Link

Browsing for a File Using the Point-to-File Tool Typing (or Pasting) the URL or Path Using the Hyperlink Object

Adding an Email Link Linking Within a Web Page

Method 1: Creating a Named Anchor Method 2: Adding an ID Linking to an Anchor or ID Viewing and Hiding Anchors

Modifying a Link

Changing a Link’s Destination Removing a Link

Styling Links

CSS and Links

Creating a Navigation Menu

Adding a Menu Adding, Editing, and Removing Links Changing the Look of the Navigation Menu

Formatting regular menu buttons Formatting rollover menu buttons Formatting submenu buttons Changing the width of menus and buttons Positioning pop-up menus Removing a Spry menu

Link Tutorial

Linking to Other Pages and Websites Formatting Links Adding a Navigation Bar Styling the Menu Bar Submenus and Rollover Buttons

6. Images

Adding Images

Adding an Image Placeholder

Inserting an Image from Photoshop

Method 1: Using the Insert Image Object

JPEG optimization options GIF and PNG8 optimization options PNG optimization options

Method 2: Copying and Pasting from Photoshop

Modifying an Image

Adding an ID to an Image Adding a Text Description to an Image Changing an Image’s Size Some Properties to Avoid

Controlling Images with CSS

Wrapping Text Around an Image Adding Borders Background Images

Background image Background repeat Background attachment Horizontal and vertical position

Editing Graphics

Dreamweaver’s Built-In Editing Tools

Cropping an image Resampling an image Brightness and contrast Sharpening images

Setting Up an External Editor Editing Smart Objects

Smart Object warnings

Editing Images Pasted from Photoshop Optimizing an Image

Image Maps

Editing a Hotspot’s Properties

Rollover Images Tutorial: Inserting and Formatting Graphics

Setting Up Adding an Image Inserting a Photoshop File Inserting a Rollover Image Using Background Images

7. Tables

Table Basics Inserting a Table Selecting Parts of a Table

Selecting a Table Selecting Rows or Columns Selecting Cells

Expanded Table Mode Formatting Tables

Aligning Tables Clearing Height and Width Values Resizing a Table

Modifying Cell and Row Properties

Alignment Properties Table Header A Property to Forget Cell Decoration Setting Cell Dimensions Tips for Surviving Table-Making

The contents take priority There’s no such thing as column width—only cell width Do the math

Adding and Removing Cells

Adding One Row or Column Adding Multiple Rows or Columns Deleting Rows and Columns

Merging and Splitting Cells Tabular Data

Importing Data into a Table Sorting Data in a Table Exporting Table Data

Tables Tutorial

Adding a Table and Data Modifying the Table Formatting the Table Final Improvements

Two. Building a Better Web Page

8. Advanced CSS

Compound Selectors

Descendent Selectors

Descendent selectors with Class and ID styles

Styling Groups of Tags

Fast Style Editing with the Properties Pane Moving and Managing Styles More About CSS

Inheritance The Cascade The Other Side of the CSS Styles Panel

Using the Code Navigator Styling for Print

Previewing Media Styles in Dreamweaver Tips for Printer Style Sheets

Using CSS3

The Properties Pane Code Hinting Common CSS3 Properties

9. Page Layout

Types of Web Page Layouts Float Layout Basics

The Mighty <div> Tag The Insert Div Tag Tool A Simple Example

Understanding the Box Model Dreamweaver’s CSS Layouts

The Structure of Dreamweaver’s CSS Layouts

Modifying Dreamweaver’s CSS Layouts

Making General Changes to a CSS Layout Modifying Fixed Layouts Modifying Liquid Layouts Other Styles to Change

Absolute Positioning

The CSS Positioning Properties

Positioning type Width and height Visibility Z-Index Overflow Placement Clip

Adding an AP Div to Your Page Drawing AP Divs The AP Elements Panel Modifying AP Element Properties

Resizing Absolutely Positioned Elements Moving AP Elements Aligning AP Elements Background Image and Color

Nesting AP Divs CSS Layout Tutorial

Adding Content Fine-Tuning the Layout Adding Styles and Navigation Fiddling with the Footer

10. Troubleshooting CSS

Analyzing CSS with Dreamweaver

Editing CSS Properties Analyzing CSS in JavaScript and Server-Side Pages

Following links in server-side pages

Checking Browser Compatibility Overcoming Common CSS Problems

Clearing and Containing Floats Avoiding Float “Drops”

Handling Internet Explorer 6 Bugs

Double-Margin Bug Other IE Problems

11. Under the Hood: HTML

Controlling How Dreamweaver Handles HTML

Auto-Fixing Your Code Web Application Server Pages Special Characters and Encoding

Code View

Coding Toolbar Code Hints

HTML5 code hints JavaScript code hints jQuery code hints PHP code hints

Code Collapse Setting Code Formats

Indents Line breaks Character case for tags and attributes The <td> tag Advanced formatting options

Related Files

Finding nested PHP files

Live Code Quick Tag Editor

Using the Quick Tag Editor

Tag Inspector Comparing Versions of a Web Page

Using WinMerge to Compare Files Using Text Wrangler to Compare Files

Reference Panel Inserting JavaScript

12. Designing Websites for Mobile Devices

Previewing at Different Resolutions

Multiscreen Preview Previewing Other Resolutions

Media Queries

Dreamweaver CS5.5’s Approach to Media Queries Using Dreamweaver’s Media Queries Tool

Using a site-wide media queries file Applying media queries to the current document

Strategies for Using Media Queries

Organizing Your Style Sheets for Media Queries Adding Styles to Media Query Style Sheets

jQuery Mobile

Creating a Basic jQuery Mobile Page Anatomy of a jQuery Mobile Page Adding Content to a jQuery Mobile Page

Adding lists Adding a layout grid Adding a collapsible block Adding form elements Adding new “pages”

Formatting a jQuery Mobile Page Launching Your jQuery Mobile Site

Three. Bringing Your Pages to Life

13. Forms

Form Basics

The Code Backstage

Creating a Form Adding Form Elements

What All Form Elements Have in Common Text Fields Checkboxes and Checkbox Groups

Checkbox Groups

Radio Buttons and Radio Groups

Radio Group

Pull-Down Menus and Lists File Field Hidden Field Buttons The <label> Tag The <fieldset> Tag

Validating Forms

Spry Validation Basics Formatting Spry Error Messages and Fields Spry Text Field

Validation types Custom validation Enforcing a pattern Supplying a hint Limiting characters and enforcing a range of values

Spry Text Area Spry Checkbox Spry Select Spry Password Spry Confirm Spry Radio Group

Forms Tutorial

Insert a Form and Add a Form Field Adding a Spry Validation Text Field Adding a Spry Form Menu Adding a Spry Radio Group Completing and Testing the Form

14. Spry: Creating Interactive Web Pages

What is Spry? Tabbed Panels

Adding a Tabbed Panel Adding and Editing Panel Content Formatting Tabbed Panels

Accordions

Adding an Accordion Adding and Editing Accordion Content Formatting a Spry Accordion

Collapsible Panels

Adding a Collapsible Panel Adding Content to a Collapsible Panel Formatting a Collapsible Panel

Spry Tooltips

Adding a Spry Tooltip Adding Content to a Tooltip Formatting a Tooltip

Spry Data Sets

Storing Data in an HTML File Storing Data in an XML File

What is XML? Rules of the road

Inserting a Spry Data Set Inserting HTML Data Inserting XML Data Choosing a Data Layout

Spry table Master/detail layout Stacked containers Stacked Containers with Spotlight Area

Creating a Spry Region The Bindings Panel Spry Repeat Region Spry Repeat Lists

Live View

15. Dreamweaver Behaviors

Understanding Behaviors

Behavior Elements More About Events

Applying Behaviors

The Behaviors Panel Applying Behaviors, Step by Step Adding Multiple Behaviors Editing Behaviors A Quick Example

Events

Mouse Events Keyboard Events Body and Frameset Events Selection and Highlighting Events Form Events

The Actions, One by One

Spry Effects

Appear/Fade Blind Grow/Shrink Highlight Shake Slide Squish

Navigation Actions

Open Browser Window Go to URL Jump Menu and Jump Menu Go Check Plugin

Image Actions

Preload Images Swap Image Swap Image Restore

Message Actions

Popup Message Set Text of Status Bar Set Text of Text Field Set Text of Container Text of Frame

Element Actions

Show-Hide Elements Draggable divs

Advanced Behaviors

Call JavaScript

Change Property

Adding More Behaviors The Widget Browser

Find and Install Widgets Configuring Widgets Adding a Widget to a Web Page

16. Add Flash and Other Multimedia

Flash: An Introduction

Insert a Flash Movie Change Movie Properties

Rename your movie Replace your movie Set the Src property Change your movie’s size Set playback options Leave margins unspecified Select a quality setting Adjust your movie’s scale Align your movie Background color Wmode

Automate the Flash Download Add Flash videos Other Video Options

Four. Building a Website

17. Introducing Site Management

The Structure of a Website

Setting Up a Site

Site name Local site folder Default images folder Site-wide Media Query file Links relative to Web URL Case-sensitive links Cache

Editing or Removing Sites Exporting and Importing Sites Organizing Site Files Modifying the Files Panel View Adding New Folders and Files

Adding files Adding folders Moving files and folders Renaming files and folders Deleting files and folders

Site Assets

Viewing the Assets Panel Inserting Assets

Adding color and link assets

Favorite Assets

Identifying your Favorites Using your Favorites Removing Favorites Organizing Favorite assets

18. Testing Your Site

Site Launch Checklist Previewing Web Pages in BrowserLab

BrowserLab Setup Testing Pages in BrowserLab

Capturing JavaScript interactivity

Find and Fix Broken Links

Finding Broken Links

Checking just one page Checking specific pages Checking an entire website

Fixing Broken Links Listing External Links Orphaned Files Changing a Link Throughout a Site

Validating Web Pages

Steps for Validating Web Pages

Cleaning Up HTML (and XHTML) Site Reporting Download Statistics

19. Moving Your Site to the Internet

Adding a Remote Server

Setting Up a Remote Server with FTP or SFTP More Remote Server Options for FTP Setting Up a Remote Server using FTP over SSL/TLS Setting Up a Remote Server over a Local Network Setting Up a Remote Server with WebDAV Setting Up a Remote Server with RDS Advanced Remote Server Settings

Transferring Files

Moving Files to the Web Server

Other ways to move files to your web server

Getting Files from Your Web Server Cloaking Files

Check In and Check Out

Checking Out Files Checking In Files

Synchronizing Site Files Communicating with Design Notes

Setting Up Design Notes Viewing Design Notes Organizing the Columns in the Files Panel Creating Custom Columns

Phase 1: Defining the new information types Phase 2: Adding the column

Five. Dreamweaver CS5.5 Power

20. Snippets and Libraries

Snippets Basics Using Snippets Creating Snippets

Organizing Snippets

Built-In Snippets Library Basics Creating and Using Library Items

Adding Library Items to a Page

Editing Library Items

Renaming Library Elements Deleting Library Elements

Snippets and Library Tutorial

Creating a Snippet Creating a Library Item

21. Templates

Template Basics Creating a Template

Turning a Web Page into a Template Building a Template from Scratch

Defining Editable Regions

Adding a Basic Editable Region Adding a Repeating Region Repeating Tables Making a Tag Attribute Editable

Adding Optional Regions

Locking Optional Regions Repeating Optional Regions Optional Editable Regions Advanced Optional Regions

Even fancier tricks Controlling regions with expressions

Editing and Removing Optional Regions

Nested Templates

Customizing Nested Templates Using Nested Templates

Building Pages Based on a Template

Working with Repeating Regions Changing Properties of Editable Tag Attributes Hiding and Showing Optional Regions Applying Templates to Existing Pages

Updating a Template

Updating Nested Templates Unlinking a Page from a Template Exporting a Template-Based Site

Template Tutorial

Creating a Template Creating a Page Based on a Template Creating Another Template-Based Page Updating a Template

22. Find and Replace

Find and Replace Basics Basic Text and HTML Searches

Phase 1: Determine the Scope of Your Search Phase 2: Specify What to Search For Phase 3: Provide the Replacement Text Phase 4: Choose the Search Settings Phase 5: Take Action

Advanced Text Searches

Limiting the Search by Tag Limiting a Search by Attribute

Advanced Tag Searches A Powerful Example: Adding Alt Text Fast

23. Customizing Dreamweaver

Keyboard Shortcuts

Make Your Own Shortcut Set Changing Keyboard Shortcuts Create a Shortcut Cheat Sheet

Dreamweaver Extensions

Browse the Exchange Find a Good Extension Other Extension Sources Download and Install Extensions Extension Manager Make Your Own Extensions

Six. Dynamic Dreamweaver

24. Getting Started with Dynamic Websites

Pieces of the Puzzle

Understanding Server Models

PHP ASP ColdFusion

Picking a Server Model

Dynamic Websites: The Setup

Setting Up a Testing Server

Windows Macs

Localhost and the Local Site Root Folder Setting Up Dreamweaver

Creating a Dynamic Page Databases: A Quick Introduction

Tables and Records Relational Databases

Loading a Database Connecting to a Database

Exploring the Databases Panel

25. Adding Dynamic Data to Your Pages

Retrieving Information

Understanding Recordsets Creating Recordsets Filtering Information Comparison Operators for Filters

Comparing text values Comparing numbers

Getting Comparison Values

Form variables URL parameters Creating a link with a URL parameter Creating the recordset for the results page

Advanced Recordsets and SQL

SQL: The very basics Using the Data Tree view Creating variables for filtering data

Reusing Recordsets Editing Recordsets Deleting Recordsets

Adding Dynamic Information

The Bindings Panel Formatting Dynamic Information

Deleting dynamic information

Displaying Multiple Records

Creating a Repeating Table Creating a Repeat Region Editing and Removing a Repeat Region

Recordset Navigation

Recordset Navigation Bar Recordset Navigation Status

Master Detail Page Set Passing Information Between Pages Viewing Live Data

HTTP Request Settings Navigating Live View

Tutorial: Displaying Database Info

Creating a Recordset Editing a Recordset and Linking to a Detail Page Creating Repeating Regions Building the Detailed Product Page Filling in the Details Operators Standing By

26. Web Pages that Manipulate Database Records

Adding Data

Dreamweaver’s Record Insertion Form Wizard Using the Insert Record Behavior

Updating Database Records

The Update Record Form Wizard The Update Record Server Behavior

Dynamic Form Fields

Dynamic Text Form Fields Dynamic Checkboxes and Radio Buttons

Dynamic radio buttons Dynamic checkboxes

Dynamic Menus and Lists

Deleting Records Tutorial: Inserting and Updating Data

Adding an Insert Product Page Finishing the Insert Form Building a Page to Edit Database Records

Linking to the update page Creating the update page

Creating and Linking to the Delete Page

Adding a link on the details page Creating the delete page

27. Advanced Dynamic Site Features

Password-Protecting Web Pages

The Users Table Creating a Registration Form Creating the Login Page The Log Out User Behavior Protecting Individual Pages

Additional Data Sources

URL Variables Form Variables Cookies Session Variables Server Variables

Advanced Server Behaviors

Recordset Paging Show Region Server Behaviors

Tutorial: Authentication

Building a Login Page Password-Protecting the Administration Pages Displaying a Portion of a Page to Logged-In Users

28. Server-Side XML and XSLT

Understanding Markup Technologies Creating Dynamic Pages with XSLT and XML Inserting and Formatting XML

Inserting a Repeat Region

Building a repeat-region filter

Inserting a Conditional Region Using Multiple Conditional Regions

Advanced XSLT Tricks

Sorting Data in a Repeat Region Using XSLT Parameters

A. Getting Help

Getting Help from Dreamweaver

Detailed Assistance

Getting Help from Adobe

Adobe’s Dreamweaver Website Paid Support The Forums

B. Dreamweaver CS5.5, Menu by Menu

File Menu Edit Menu View Menu Insert Menu Modify Menu Format Menu Commands Menu Site Menu Window Menu Help Menu

Index About the Author Colophon

← Prev
Back
Next →

← Prev
Back
Next →