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

Index

Dreamweaver CS6: The Missing Manual A Note Regarding Supplemental Files The Missing Credits

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

Preface

What Dreamweaver Is All About Why Dreamweaver? What’s New in Dreamweaver CS6 What’s Old in Dreamweaver CS6 HTML, XHTML, CSS, and JavaScript 101 Document Types Of Tags and Properties XHTML HTML5 Add Style with Cascading Style Sheets Add Interactivity with JavaScript Mobile Web Design The Very Basics of Reading This Book About This Book About→These→Arrows Macintosh and Windows About the Outline Living Examples Online Resources

The Missing CD Registration Feedback Errata

Using Code Examples Safari® Books Online

1. Building a Web Page

1. Dreamweaver CS6 Guided Tour

The Dreamweaver CS6 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 Managing Files and Folders with the Files Panel

Adding Files Adding Folders Moving Files and Folders Renaming Files and Folders Deleting Files and Folders

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 Phase 7: Organizing Your Files

2. Adding and Formatting Text

Adding Text in Dreamweaver

Simple Copy and Paste Paste Special

Changing Paste Special’s Default Behavior

Pasting Text from Microsoft Word: The Basic Method Pasting Text with Word Formatting Pasting Excel Spreadsheet Information Importing Word and Excel Documents (Windows)

Adding Special Characters

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

Selecting Text HTML Formatting Paragraph Formatting

Paragraphs Headlines Preformatted Text 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 Spell Checking

About Dictionaries Performing a Spell Check

3. 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

Applying Multiple Classes 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

Using Web Fonts

Managing web Fonts Using a web Font

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 Adding Web Fonts Creating an External Style Sheet Editing a Style Adding Another Style Creating a Class Style Attaching an External Style Sheet

4. 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 Spry Menu 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 Drop-Down Menus Removing a Spry Menu Reusing a Spry Menu

Link Tutorial

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

5. Images

Adding Images

Adding an Image Placeholder

Inserting an Image from Photoshop

Method 1: Using the Insert Photoshop Images

JPEG Optimization Options GIF and PNG8 Optimization Options PNG Optimization Options

Modifying an Image

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

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

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 Using Background Images

6. 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 Importing Tabular Data Formatting the Table Final Improvements

7. HTML: Under the Hood

Controlling How Dreamweaver Handles HTML

Auto-Fixing Your Code Server-Side Web 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

The Tag Inspector Comparing Versions of a Web Page

Using WinMerge to Compare Files Using Text Wrangler to Compare Files

Reference Panel Inserting JavaScript

2. 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

CSS Transitions

Understanding the CSS Transitions Panel Deleting a CSS Transition Another Way to Create CSS Transitions

Using CSS3

The Properties Pane Code Hinting Common CSS3 Properties

Advanced CSS Tutorial

Creating a Descendent Selector Adding a CSS Transition Adding CSS3 Properties Adding One Last Transition

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 Element to Your Page Modifying AP Element Properties

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

CSS Layout Tutorial

Adding CSS3 Properties Creating a Fixed-Width Design Adding Styles and Using Absolute Positioning

10. Troubleshooting CSS

Analyzing CSS with Dreamweaver

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

Following Links in Server-Side Pages

Overcoming Common CSS Problems

Clearing and Containing Floats Avoiding “Float Drops”

11. Designing Websites for Mobile Devices

Previewing Pages at Different Resolutions

Multiscreen Preview Previewing Other Resolutions

Media Queries

Dreamweaver CS6’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

Fluid Grid Layouts

Understanding Fluid Grid Layouts Creating a Fluid Grid Layout Page Inserting Fluid Grid Layout Divs Formatting Fluid Grid Layout Divs Adding Content to Fluid Grid Layout Pages Styling Fluid Grid Layout Pages

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

3. Bringing Your Pages to Life

12. 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 Fields

Validation Types Custom Validation Enforcing a Pattern Suplying 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 Spry Validation to Already Existing Fields Adding a Spry Validation Widget Adding a Group of Radio Buttons Adding a Multiline Text Box Styling the Labels Styling Spry Error Messages

13. Adding Interactivity with JavaScript

Introducing Adobe’s Spry Framework 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 Inserting a Spry Data Set Choosing a Data Layout

Spry Table Master/Detail Layout Stacked Containers Stacked Containers with Spotlight Area

Dreamweaver Behaviors

Behavior Basics

Applying Dreamweaver Behaviors

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

Events (Some of) the Actions, One by One

Spry Effects

Appear/Fade Blind Grow/Shrink Highlight Shake Slide Squish

Open Browser Window Image Actions

Preload Images Swap Image Swap Image Restore

Popup Message

The Widget Browser

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

14. 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

4. Managing a Website

15. Introducing Site Management

The Structure of a Website Setting Up a Site (in Depth)

Site Name

Site Name Local Site Folder Default Images Folder Site-wide Media Query File Links Relative To Web URL Case-Sensitive Links Cache

Managing Dreamweaver Sites

Editing or Removing Sites Exporting and Importing Sites Viewing Files in the Files Panel Modifying the Files Panel View

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

16. 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

17. 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 Your 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

5. Dreamweaver CS6 Power

18. 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

19. Templates

Template Basics Creating a Template

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

Defining Editable Regions Building Pages Based on a Template

Applying Templates to Existing Pages

Updating a Template

Unlinking a Page from a Template

Using Repeating Regions

Adding a Repeating Region Adding a Repeating Table Working with Repeating Regions

Using Editable Tag Attributes

Making an Attribute Editable Changing Properties of Editable Tag Attributes

Using Optional Regions

Adding an Optional Region Locking Optional Regions Repeating Optional Regions Optional Editable Regions Advanced Optional Regions Editing and Removing Optional Regions Hiding and Showing Optional Regions

Exporting a Template-Based Site Template Tutorial

Creating a Template Creating a Page Based on a Template Creating and Using Optional Regions Updating a Template

20. 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

21. 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

22. Working with Server-Side Programming

Pieces of the Puzzle 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 Using Server-Side Includes

Creating a Server-Side Include Adding a Server-Side Include to a Web Page

Working with Related PHP Files PHP Code Hints

A. Getting Help

Getting Help from Dreamweaver

Detailed Assistance

Getting Help from Adobe

Adobe’s Dreamweaver Website Paid Support The Forums

B. Dreamweaver CS6, 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 Copyright

← Prev
Back
Next →

← Prev
Back
Next →