Dreamweaver CC · the Missing Manual · Covers 2014 Release (Missing Manuals) by McFarland, David Sawyer -- Read -- Imperial Library of Trantor

Index

Dreamweaver CC: The Missing Manual The Missing Credits

About the Authors About the Creative Team Acknowledgements The Missing Manual Series

Preface

What Dreamweaver Is All About Why Dreamweaver? What’s New in Dreamweaver CC 2014 Life in the Cloud What’s Gone in Dreamweaver CC 2014 HTML Basics Document Types Of Tags and Properties XHTML in Dreamweaver HTML5, the New Markup Standard Add Style with Cascading Style Sheets Add Interactivity with JavaScript Mobile Web Design How This Book Is Organized About This Book Windows and Macintosh Commands The Very Basics of Reading This Book About→These→Arrows Online Resources

The Missing CD Registering Your Book Reporting Errata

Using Code Examples Safari® Books Online

I. Building a Web Page

1. Dreamweaver CC Guided Tour

Setting Up Creative Cloud Downloading Dreamweaver CC Getting Around the Dreamweaver Window

Choosing a Dreamweaver Workspace The Document Window The Insert Panel The Files Panel The Properties Panel 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

Tutorial: 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. Working with Text

Adding Text to Pages in Design View

Simple Copy and Paste Paste Special Changing the Paste Command’s Standard Behavior Pasting Text from Microsoft Word: The Basic Method Pasting Text with Word Formatting Pasting Excel Spreadsheet Information Importing Word and Excel Documents from Windows

Adding Special Characters to Pages

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

Selecting Text Applying HTML Tags to Text Structuring Paragraphs with HTML

Paragraphs Headlines Preformatted Text Indented Paragraphs

Formatting Lists

Bulleted and Numbered Lists

Creating a 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

Using HTML Text Styles Editing in Live View

Adding Text in Live View Moving and Removing Text in Live view Editing Pages with Element Quick View

Checking Spelling

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

Creating New Styles with CSS Designer Choose a Style Source Choose a Selector

Tag hints

Set Properties for the Selector Creating Styles Using the Properties Panel

Creating styles for non-text elements

Applying Styles

Applying a Class Style to Text

Applying a class style in Live view 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

Working with Styles

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

Formatting Text with CSS

Choosing a Font

Specifying fonts

Using Adobe Edge Web Fonts

Managing Adobe Edge web fonts Creating a custom font stack Using Adobe Edge web fonts

Changing the Font Size Picking a Font Color Adding Bold and Italic Formatting Aligning Text Text Properties in CSS Designer List Properties

Tutorial: Creating Cascading Style Sheets

Setting Up a Site 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

Linking from the home page to the Contact Us page (contact.html) Linking from the Horoscopes page to the Pisces page Linking from the Scorpio page to the Horoscopes page

Adding Links to a Page

Browsing for a File Using the “Point to File” Tool Typing or Pasting a Web Address Using the Hyperlink Object

Adding Email Links Linking Within a Web Page

Adding an ID to a Target Page Linking to an ID

Modifying Links

Changing a Link’s Destination Removing a Link

Styling Links

CSS and Links

Creating a Navigation Menu

Getting a CSS Menu System from Adobe Add-Ons Adding a Menu with Submenus Adding, Editing, and Removing Menu Links Changing the Look of the Navigation Menu

Formatting Top Menu items Size & Position Colors Images Text Formatting rollover menu buttons Formatting submenu buttons

Tutorial: Adding Links to Pages

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

5. Working with Images

Adding Images

Adding a Placeholder Image

Inserting Images from Photoshop

Adding 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 Positioning a background image

Editing Images

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

Using Image Maps

Editing a Hotspot’s Properties

Creating Rollover Images Tutorial: Inserting and Formatting Graphics

Setting Up Adding an Image Inserting a Photoshop File Using Background Images and Custom Bullets for Lists

6. Working with Tables

Table Basics Inserting a Table Editing a Table

Selecting a Table Selecting Rows or Columns Selecting Cells Expanded Tables Mode

Modifying Table Properties

Aligning Tables Clearing Width and Height Values Resizing a Table

Modifying Cell and Row Properties

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

The contents take priority Setting column widths 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 Working with Tabular Data

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

Tutorial: Creating Tables

Adding a Table Importing Tabular Data Formatting the Table Final Improvements

7. Working with HTML

Controlling How Dreamweaver Handles HTML

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

Viewing HTML Markup in Code View

The Coding Toolbar 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

Designing Pages in Live View

Inserting HTML Structural Elements in Live View

Editing Pages in Live View

Changing Tag Attributes, Classes, and IDs in Live View

Examining Page Elements Troubleshooting Interactive Pages Adding Tags with the Quick Tag Editor

Using the Quick Tag Editor

Comparing Versions of a Web Page

Downloading and Setting Up Diff Tools Comparing Files from the Files Panel Comparing Files with WinMerge Comparing Files with TextWrangler

Finding References on Site-Building Tutorial: Building Pages in Live View

Editing Pages in Live View Inserting Images in Live View Applying CSS to Your Web Page Applying Classes to Page Elements in Live View

8. Finding and Replacing Text, Tags, and Code

“Find and Replace” Basics Searching Text and HTML Markup

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

Creating Advanced Text Searches

Limiting a Search by Tag Limiting a Search by Attribute

Creating Advanced Tag Searches Tutorial: Adding Alt Text Fast

II. Building a Better Web Page

9. Learning Advanced CSS Techniques

Fine-Tuning Page Design with Advanced Selectors

Descendent Selectors

Descendent selectors with class and ID styles

Styling Groups of Elements

Editing Styles with the Properties Pane Moving and Managing Styles Resolving CSS Conflicts

Inheritance The Cascade CSS Sleuthing with Computed Properties CSS Sleuthing with Inspect View Analyzing the Cascade

Using the Code Navigator to Identify Styles Styling Pages for Print

Previewing Media Styles in Dreamweaver Tips for Printer Style Sheets

Animating Style Transitions

Understanding the CSS Transitions Panel Deleting a Transition

Using CSS3

Code-Hinting Common CSS3 Properties

Tutorial: Using Advanced Styles

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

10. Choosing a Page Layout

Types of Web Page Layouts Float Layout Basics

The Mighty <div> Tag The Insert→Div Command A Simple Example

Understanding the Box Model Dreamweaver’s HTML Templates

The Structure of Dreamweaver’s HTML Layouts

Modifying Dreamweaver’s HTML Layouts

Editing HTML Layouts Modifying Fixed Layouts Creating and Modifying Liquid Layouts Other Styles to Change

Using Absolute Positioning

The CSS Positioning Properties

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

Adding an AP Element to Your Page Modifying AP Elements

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

Tutorial: Building a CSS-Based Layout

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

11. Troubleshooting CSS

Analyzing CSS with Dreamweaver

Using the Computed View to Identify Styles 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

III. Building Websites for Mobile Devices

12. Designing Websites for Mobile Devices

Previewing Pages at Different Resolutions

Previewing Different Screen Sizes in Dreamweaver Previewing Your Layout with Edge Inspect Third-Party Help for Window Size Dilemmas

Media Queries

Two Approaches to Media Queries Creating Media Queries with CSS Designer

Media queries for desktop and tablet browsers

Using a Site-Wide Media Queries File Using @media to Add Queries to Internal Style Sheets Using Media Queries and Global CSS Styles

Strategies for Using Media Queries

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

13. Building Fluid Grid Websites

Understanding Fluid Grid Layouts Getting Started with Fluid Grid Layouts

Building Fluid Grid Layout Pages Laying Out Fluid Grid Pages Styling Fluid Grid Layout Pages

Using Responsive Starter Templates Tutorial: Building a Fluid Grid Layout

Adding New Elements to a Fluid Grid Layout Adding Text to Fluid Grid Layout Pages Laying Out Tablet and Desktop Views Adding Images to Fluid Grid Layouts Nesting HTML Elements Styling Your Fluid Grid Web Page Adjusting the Layout for Different Views

14. Creating Pages for jQuery Mobile Sites

jQuery Mobile

Creating Mobile Pages Touring a Mobile Page Adding Content to a jQuery Mobile Page

Adding lists Adding a layout grid Adding a collapsible block Adding buttons Adding new “pages”

Formatting a jQuery Mobile Page Launching Your jQuery Mobile Site

IV. Bringing Your Pages to Life

15. Building Interactive Pages

The Roles of JavaScript, jQuery, and jQuery UI Adding Collapsible Content

Adding Content to an Accordion Changing an Accordion’s Properties Changing the Look of an Accordion

Choosing a theme Download jQuery UI themes Swapping themes

Custom-Formatting Widgets with CSS Designer

More formatting inside jQuery UI widgets

Adding Tabbed Content

Setting Properties for Tabs

Adding a Date Picker Adding Pop-Up Messages jQuery UI Widgets for Programmers

Progressbar Autocomplete Slider jQuery Buttons and More Buttons

Working with Dreamweaver Behaviors

Behavior Basics

Applying Behaviors

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

Specifying Behaviors A Sampler of Behaviors, One by One

Effects

Fade Blind Highlight Shake Slide

Open Browser Window Image Actions

Preload Images Swap Image Swap Image Restore

Popup Message

16. Adding Forms to Pages

Form Basics

Processing Form Information

Creating a Form Adding Form Elements

Setting Form Element Properties The Datalist Form Element The Text Form Element The Label Form Element The Password Form Element The Text Area Form Element The Email, Number, Date, and Other Special Form Elements The Checkboxes and Checkbox Group Form Elements

Checkbox groups

The Radio Buttons and Radio Group Form Elements

Radio Group

The Select Menus and List Form Elements The File Form Element The Hidden Form Element The Button Element

The Reset button The Button button

The Fieldset Form Element

Tutorial: Adding Forms to Pages

Insert a Form Add a Text and Email Form Element Adding (and Removing) a Number Form Element Adding a Select Menu Form Element Adding Date and Time Form Elements Adding Radio Button Form Elements Adding Text Area and Submit Button Form Elements Styling Labels

17. Adding Sound, Video, and Animation

Adding Sound to a Page

Producing Audio Files in Browser-Friendly Formats Adding Audio to Web Pages

Using HTML5 Video

Converting Video Files to Browser-Friendly Formats Adding Video to Your Page

Embedding YouTube Videos Adding Adobe Edge Animate Animations Flash: An Introduction

Inserting a Flash Animation Change Animation Properties

Play Your Animation Rename Your Animation Replace Your Animation Set the Src property Change your animation’s size Set Playback Options Leave Margins Unspecified Select a Quality Setting Adjust Your Animation’s Scale Align Your Animation Background Color Wmode

Automating the Flash Download Adding Flash Videos Tutorial: Embedding Sound, Video, and Animation in Pages

Adding a Sound Clip to a Page Adding Video to a Page Adding Adobe Edge Animate Compositions to a Page

V. Managing a Website

18. Introducing Site Management

Structuring a Website Setting Up a Site

Site Name Local Site Folder Default Images Folder 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

Editing Page Elements from the Assets Panel

Viewing the Assets Panel Inserting Assets

Adding color and link assets

Favorite Assets

Identifying favorites Using favorites Removing favorites Organizing favorite assets

19. Testing Your Site

Site Launch Checklist Testing Web Pages with BrowserStack

Previewing Pages with BrowserStack Changing Settings in BrowserStack

Finding and Fixing Broken Links

Finding Broken Links

Checking an open page Checking specific pages Checking an entire website

Fixing Broken Links Listing External Links Orphaned Files Changing a Link Site-Wide

Validating Web Pages

Steps for Validating Web Pages

Cleaning Up HTML (and XHTML) Fixing Page Problems with Site Reports

20. 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 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 new columns Phase 2: Adding the column to the Files panel

VI. Dreamweaver Power

21. Creating Reusable Page Elements

Snippets Basics Using Snippets Creating Snippets

Organizing Snippets

Using Built-In Snippets Library Basics Creating and Using Library Items

Adding Library Items to a Page

Editing Library Items

Renaming Library Items Deleting Library Items

Tutorial: Using Snippets and Library Items

Creating a Snippet Creating a Library Item

22. 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 Tutorial: Building Templates

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

23. Customizing Dreamweaver

Keyboard Shortcuts

Dreamweaver’s Stock Shortcuts Make Your Own Set of Shortcuts Changing Keyboard Shortcuts Create a Shortcut Cheat Sheet

Dreamweaver Add-Ons

Browsing for and Installing Add-Ons Building and Selling Your Own Add-Ons

Downloading and Installing Extensions

Extension Sources The Extension Manager

24. Working with Server-Side Programming

Dynamic Website Basics Setting Up a Dynamic Website

Setting Up a Testing Server

Windows Macs

Localhost and the Local Site Root Folder Setting Up a Dynamic Site in 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

VII. Appendixes

A. Getting Help

Getting Online Help

Dreamweaver Online Help Dreamweaver Support Center Adobe TV

Getting Help from Other Dreamweaver Fans

B. Dreamweaver CC 2014, Menu by Menu

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

C. Dreamweaver CC D. Answers found here! Index About the Authors Copyright

← Prev
Back
Next →

← Prev
Back
Next →