Adobe Dreamweaver Creative Cloud

547 Pages·2014·91.69 MB·English

by  Corinne Hoisington and Jessica Minnick

Adobe®
DREAMWEAVER®
CREAtiVE ClouD™
COMPREHENSIVE
Copyright 2015 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
Copyright 2015 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
Adobe®
DREAMWEAVER®
CREAtiVE ClouD™
COMPREHENSIVE
CORINNE L. HOISINgtON
JESSICa L. MINNICk
Australia • Brazil • Mexico • Singapore • United Kingdom • United States
Copyright 2015 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
This is an electronic version of the print textbook. Due to electronic rights restrictions, some third party content may be suppressed. Editorial review has deemed that
any suppressed content does not materially affect the overall learning experience. The publisher reserves the right to remove content from this title at any time if
subsequent rights restrictions require it. For valuable information on pricing, previous editions, changes to current editions, and alternate formats,
please visit www.cengage.com/highered to search by ISBN#, author, title, or keyword for materials in your areas of interest.
Copyright 2015 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
Adobe® Dreamweaver® Creative Cloud™: © 2015 Cengage Learning
Comprehensive
WCN: 02-200-203
Corinne L. Hoisington, Jessica L. Minnick
ALL RIGHTS RESERVED. No part of this work covered by the copyright herein
Product Director: Kathleen McMahon
may be reproduced, transmitted, stored, or used in any form or by any means
Senior Product Manager: Jim Gish graphic, electronic, or mechanical, including but not limited to photocopying,
Managing Content Developer: recording, scanning, digitizing, taping, Web distribution, information networks,
Emma F. Newsom or information storage and retrieval systems, except as permitted under
Section 107 or 108 of the 1976 United States Copyright Act, without the prior
Associate Content Developer:
written permission of the publisher.
Crystal Parenteau
Marketing Director: Michele McTighe
For product information and technology assistance, contact us at
Senior Marketing Manager: Eric La Scola
Cengage Learning Customer & Sales Support, 1-800-354-9706
Print Buyer: Julio Esperas
For permission to use material from this text or product,
Director of Production: Patty Stephan submit all requests online at cengage.com/permissions
Further permissions questions can be emailed to
Senior Content Project Manager:
[email protected]
Jennifer Feltri-George
Development Editor: Lisa Ruffolo
Adobe, the Adobe logos, and Dreamweaver are either registered trademarks or
Proofreader, Indexer and Compositor: Lumina
trademarks of Adobe Systems Incorporated in the United States and/or other
Datamatics Inc.
countries. THIS PRODUCT IS NOT ENDORSED OR SPONSORED BY ADOBE
QA Manuscript Reviewers: Jeffrey Schwartz, SYSTEMS INCORPORATED, PUBLISHER OF DREAMWEAVER.
Serge Palladino, Danielle Shaw,
Susan Whalen Library of Congress Control Number: 2014949547
Art Director: GEX Publishing Services Student Edition:
Cover Designer: Lisa Kuhn, Curio Press, LLC ISBN: 978-1-305-26722-0
Cover Photo: ©istockphoto.com/svetikd Cengage Learning
Text Design: Joel Sadagursky 20 Channel Center Street
Boston, MA 02210
USA
Cengage Learning is a leading provider of customized learning solutions with
office locations around the globe, including Singapore, the United Kingdom,
Australia, Mexico, Brazil, and Japan. Locate your local office at:
www.cengage.com/global.
Cengage Learning products are represented in Canada by Nelson Education, Ltd.
For your course and learning solutions, visit www.cengage.com
To learn more about Course Technology,
visit www.cengage.com/coursetechnology
Purchase any of our products at your local college bookstore or at our preferred
online store www.cengagebrain.com
Copyright 2015 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
Adobe®
DREAMWEAVER®
CREAtiVE ClouD™
COMPREHENSIVE
Contents
Preface ix
Dreamweaver Creative Cloud To Start Dreamweaver DW 30
Adobe
Touring the Dreamweaver Window DW 31
Displaying Document Views DW 33
IntroDuCtIon
Using the Status Bar DW 35
Website Development and Adobe Showing and Hiding Panels DW 35
Appendices
Dreamweaver Creative Cloud Opening and Closing Panels DW 37
Objectives DW 1 To Show, Hide, and Move Panels DW 37
Website Planning and Design Basics DW 2 To Reset the Workspace Layout DW 39
Types of Websites DW 2 Displaying Toolbars DW 39
Browser Considerations DW 4 To Display the Standard Toolbar DW 40
Website Navigation DW 6 Accessing Dreamweaver Preferences DW 41
Mobile Site Access DW 7 To Access Preferences DW 41
Planning a Website DW 8 Understanding HTML5 DW 42
Planning Basics DW 8 Understanding CSS3 DW 42
Design DW 10 Creating a Site DW 43
Accessibility Guidelines DW 13 Defining a Local Site DW 43
Role of Social Networking DW 13 Creating the Local Root Folder and Subfolders DW 44
Website Hosting DW 14 Using Site Setup to Create a Local Site DW 45
Project Management DW 16 To Quit and Restart Dreamweaver DW 45
Testing the Site DW 16 To Use Site Setup to Create a Local Site DW 45
Maintaining the Site DW 17 Opening a Website File DW 48
Web Programming Languages DW 17 To Open a Webpage DW 48
HTML and XHTML DW 17 Naming and Saving the Home Page DW 50
HTML5 DW 18 Modifying Placeholder Text DW 50
DHTML DW 18 To Edit Navigation Link Text DW 50
XML DW 18 To Format Text Using Heading Styles DW 51
PHP DW 18 To Create a Link DW 53
ASP DW 18 To Save the Home Page DW 54
jQuery DW 19 Adding Pages DW 55
Webpage Authoring Programs DW 19 To Add a Second Page DW 55
About Adobe Dreamweaver CC DW 20 Creating Lists DW 56
Understanding the Creative Cloud DW 21 To Create an Unordered List DW 56
Chapter Summary DW 21 To Add Links to the Second Page DW 58
Apply Your Knowledge DW 21 Providing a Webpage Title DW 58
Extend Your Knowledge DW 22 To Change the Webpage Title DW 59
Make It Right DW 22 Inspecting the Element Quick View DW 59
In the Labs DW 23 To Inspect the Element Quick View DW 60
Cases and Places DW 24 Checking Spelling DW 60
To Check Spelling DW 61
CHAPtEr onE Previewing a Webpage in a Browser DW 61
To Choose a Browser and Preview the Website DW 62
Creating a Website with Dreamweaver
Dreamweaver Help DW 63
Objectives DW 25
To Access Dreamweaver Help DW 63
What Is Dreamweaver Creative Cloud? DW 26
To Quit Dreamweaver DW 63
Project — Small Business Incubator Website DW 26
Chapter Summary DW 64
Overview DW 27
Apply Your Knowledge DW 64
Downloading and Installing Dreamweaver CC DW 28
Extend Your Knowledge DW 65
Starting Dreamweaver DW 30
Make It Right DW 66
v
Copyright 2015 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
vi Contents Adobe Dreamweaver Creative Cloud Comprehensive
In the Labs DW 67 Project — Responsive Design Templates
Cases and Places DW 72 for Tablet and Desktop Viewports DW 138
Overview DW 140
CHAPtEr tWo Modifying a Template DW 141
To Open a Template DW 141
Creating a template for a Mobile Website
Designing Webpages for a Tablet DW 142
using responsive Design
To Switch to Tablet Size and Hide/Show Fluid
Objectives DW 73
Grid Layout Guides DW 143
Introduction DW 74
Formatting Navigation Links for a Tablet DW 145
Project — Template for a Mobile Website DW 74
To Resize and Move the Tablet List Items DW 146
Overview DW 76
Setting the CSS Styles for a Tablet DW 147
Designing Webpages with CSS DW 77
To Change the Tablet List Item Styles DW 148
Anatomy of a Style Sheet DW 78
To Change the Margins of the Tablet
Understanding the Structure of a Style DW 79
Navigation Element DW 150
Identifying Types of Style Sheets DW 80
To Add Margins and Borders to the Content
Creating a Dreamweaver Website
Section Element DW 151
Using Responsive Design DW 81
To Change the Border Styles of the Content
Organizing the Site Structure DW 82
Section Element DW 153
Creating a Page Using a Fluid Grid Layout DW 84
To View the Tablet Site in Live View DW 155
To Create a Page with a Fluid Grid Layout DW 85
Designing Webpages for a Desktop Display DW 156
To Create a Folder for the CSS Files DW 87
To Switch to Desktop Size DW 156
Creating a Template DW 88
Formatting the Header Element
To Save a Page as a Template DW 88
for a Desktop Display DW 157
Organizing Website Files DW 90
To Modify the Desktop Header Element DW 157
To Organize the Files and Folders for a Website DW 90
Setting the CSS Styles for a Desktop Display DW 159
Adding HTML5 Structural Elements to the Grid DW 92
To Change the Desktop List Item Styles DW 160
To Add a Structural Element to the Grid DW 94
To Create a Transparent Background for the
To Add More Structural Elements to the Grid DW 96
List Items DW 161
Adding CSS Styles DW 98
To Apply a Zero Margin to the List Items DW 163
To Format a Structural Element with CSS Styles DW 98
To Resize the Desktop Navigation Element DW 163
Managing Fonts with Adobe Edge Web Fonts DW 100
Using the Float and Clear Properties DW 164
To Define Text Properties Using Adobe Edge
To Set Float and Clear Properties for the
Web Fonts DW 100
Desktop Navigation Element DW 164
Adding Unordered Lists DW 103
To View the Desktop Site in Live View DW 166
To Add an Unordered List to the Navigation
Creating a New Page from a Template DW 167
Element DW 103
To Create a Page from a Template DW 167
To Add List Items to an Unordered List DW 105
Chapter Summary DW 170
Adding CSS Styles to Navigation List Items DW 107
Apply Your Knowledge DW 170
Using Hexadecimal Colors DW 107
Extend Your Knowledge DW 173
Designing Navigation List Items DW 108
Make It Right DW 174
To Define Margin, Padding, and Font
In the Labs DW 175
Properties of Navigation List Items DW 108
Cases and Places DW 182
Adding Rounded Borders to Elements DW 110
To Define the Border-Radius Properties
CHAPtEr Four
of Navigation List Items DW 111
Using Background Color Properties DW 112 Adding Graphics and Links
To Define the Background Color of Navigation Objectives DW 185
List Items DW 113 Introduction DW 186
Creating an Editable Region of a Template DW 114 Project — Promotional Images and Links DW 186
To Create an Editable Region DW 114 Overview DW 187
To Create a Second Editable Region DW 116 Adding Graphics to a Website DW 188
To Add CSS Styles to the Content Element DW 117 Understanding Image File Formats DW 189
To Insert the Footer Contents DW 120 Adding Alt Text to Provide Accessibility DW 190
To Add CSS Styles to the Footer Element DW 121 To Copy Files into the Images Folder DW 191
To View the Mobile Site in Live View DW 123 Creating Additional Pages for a Site DW 193
To View the Mobile Site in the Browser DW 123 To Create the Services Webpage DW 193
Chapter Summary DW 124 To Create the Portfolio Webpage DW 196
Apply Your Knowledge DW 125 To Create the Pricing Webpage DW 198
Extend Your Knowledge DW 127 To Create the Session Webpage DW 200
Make It Right DW 127 To Create the Contact Webpage DW 201
In the Labs DW 128 To Add an Image to the Home Page DW 203
Cases and Places DW 135 To Add and Format Images on the Portfolio Page DW 204
Modifying a Template DW 208
CHAPtEr tHrEE To Insert a Logo Image in the Template DW 208
To Modify the Header for Desktop Display DW 210
Modifying a responsive Design template
Marketing a Site with Facebook and Twitter DW 212
for tablet and Desktop Displays
To Insert Social Networking Icons in the
Objectives DW 137 Template DW 213
Introduction DW 138 Adding Links DW 216
Copyright 2015 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
Adobe Dreamweaver Creative Cloud Comprehensive Contents vii
To Add Absolute Links in the Gallery Template DW 216 To Remove an HTML5 Audio Control and
To Add an Email Link on the Contact Page DW 218 Preload the Music DW 311
To Add Relative Links in the Gallery Template DW 220 Adding Video DW 313
Using Media Queries to Target Devices DW 223 Understanding Video Formats DW 313
To Modify Mobile and Tablet Link Styles DW 224 Adding a Video File with HTML5 DW 314
To Modify Desktop Link Styles DW 227 To Add a Video File Using HTML5 DW 314
Chapter Summary DW 231 To Set the Properties of a Video Element DW 317
Apply Your Knowledge DW 231 To Test a Media Element in Live View DW 318
Extend Your Knowledge DW 232 Chapter Summary DW 320
Make It Right DW 233 Apply Your Knowledge DW 320
In the Labs DW 234 Extend Your Knowledge DW 321
Cases and Places DW 240 Make It Right DW 322
In the Labs DW 323
CHAPtEr FIVE Cases and Places DW 327
Exploring tables and Forms
Objectives DW 241 CHAPtEr SEVEn
Introduction DW 242 Interacting with jQuery user
Project — Formatted Table and Form DW 242
Interface Widgets
Overview DW 243
Objectives DW 329
Using Tables on Webpages DW 244
Introduction DW 330
Understanding the HTML Structure of a Table DW 245
Project — jQuery UI Widgets and Figure Elements DW 330
Designing Responsive Tables DW 245
Overview DW 331
To Insert a Table in a Webpage DW 247
Understanding jQuery UI Widgets DW 332
To Add Text to a Table DW 250
Selecting jQuery Widgets DW 332
Formatting Tables DW 251
Adding jQuery UI Widgets to Webpages DW 333
To Format the Table Caption DW 251
To Add a jQuery UI Datepicker Widget
To Apply Cell Padding to Table Cells DW 253
to the Contact Page DW 334
Merging and Splitting Cells in a Table DW 257
To Add a jQuery UI Accordion Widget
Understanding How Forms Work DW 257
to the Portfolio Page DW 338
Creating a Form DW 258
Adding the Figure Element to a Webpage DW 339
Processing a Form DW 258
To Add Figure and Figcaption Elements and
To Insert a Form on a Webpage DW 259
Pictures to an Accordion Widget DW 340
Using the Form Property Inspector DW 261
To Update the Figcaption Text in the
Adding Form Objects DW 261
Portrait Photography Panel DW 344
Adding Text Fields DW 263
To Add Content to the Family Photography
To Add Text Fields to a Form DW 263
Panel of the Accordion Widget DW 345
To Add an Email Field to a Form DW 266
To Update the Figcaption Text in the Family
To Add a Telephone Field to a Form DW 267
Photography Panel DW 351
To Add a Date Field to a Form DW 269
To Add Content to the Newborn Photography
Adding Menus DW 270
Panel of the Accordion Widget DW 351
To Add a Pop-up Menu to a Form DW 270
To Update the Figcaption Text in the Newborn
To Add a List Box to a Form DW 273
Photography Panel DW 357
To Add Submit and Reset Buttons to a Form DW 276
To Add CSS Styles to the Figure and Figcaption
Setting Styles for Responsive Design DW 277
Elements DW 357
To Style a Form with CSS DW 277
To Display the Completed Portfolio Page
Chapter Summary DW 283
in a Browser DW 362
Apply Your Knowledge DW 283
Adding a jQuery UI Tabs Widget to a Webpage DW 364
Extend Your Knowledge DW 285
To Add a jQuery UI Tabs Widget to the
Make It Right DW 286
Pricing Page DW 364
In the Labs DW 287
To Change Tab Titles and Add Content to
Cases and Places DW 295
the Tabs Widget DW 367
To Display the Completed Pricing Page
CHAPtEr SIX
in a Browser DW 369
Enhancing Webpages with
Chapter Summary DW 373
Audio and Video Apply Your Knowledge DW 373
Objectives DW 297 Extend Your Knowledge DW 374
Introduction DW 298 Make It Right DW 375
Project — Webpages with Multimedia DW 298 In the Labs DW 377
Overview DW 299 Cases and Places DW 383
Adding Multimedia with HTML5 or a Plug-in DW 300
Adding Sound DW 301
CHAPtEr EIGHt
Understanding Audio Codecs DW 301
Publishing a Website
To Copy the Audio and Video Folders DW 302
Adding an Audio File with HTML5 DW 303 Objectives DW 385
To Add an Audio File Using HTML5 DW 304 Introduction DW 386
Setting the Properties of an Audio Element DW 306 Project — Testing and Publishing the Gallery Site DW 386
To Set the Properties of an Audio Element DW 307 Overview DW 387
To Display HTML5 Audio Controls in Performing Website Maintenance DW 388
Different Browsers DW 308 Using Copyrighted Material DW 388
Copyright 2015 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
viii Contents Adobe Dreamweaver Creative Cloud Comprehensive
Testing a Website DW 389 To Create the Home Page for the jQuery
Testing Using the Link Checker DW 390 Mobile Web Application DW 433
To Verify Internal Links with the Link Checker DW 390 To Create the Services Page Using
Understanding Meta Tags DW 393 jQuery Mobile DW 435
Head Content Elements DW 393 To Create the Portfolio Page Using
To Add Keywords and a Description Meta Tag DW 394 jQuery Mobile DW 436
Proofreading a Website DW 397 To Create the Pricing Page Using jQuery Mobile DW 438
To Check Spelling DW 397 To Create the Session and Contact Pages
Validating a Website Using W3C Services DW 399 Using jQuery Mobile DW 439
To Validate a Website Using W3C Services DW 400 Adding Content to a jQuery Mobile Webpage DW 441
Syncing Files to the Creative Cloud DW 401 To Add Content and a jQuery Mobile
To Upload Files to the Creative Cloud DW 402 List View Widget to the Home Page DW 441
To Sync Settings to the Creative Cloud DW 405 To Add Page Links to the jQuery Mobile
Publishing a Website DW 407 List View Widget DW 443
Web Hosting DW 407 To Display the Mobile Web Application
Publishing a Site to a Web Server DW 407 in Live View DW 446
Defining a Remote Site DW 408 Using Graphics on a Mobile Page DW 447
To Define a Remote Site DW 408 To Add a Graphic to the Home Page DW 447
Connecting to a Remote Site DW 413 Setting Styles for jQuery Mobile Webpages DW 449
To Connect to a Remote Site DW 413 To Modify jQuery Mobile CSS Rules DW 449
To Upload Files to a Remote Server DW 414 To Add Graphics to the Portfolio Page DW 451
Website Project Management DW 415 Adding jQuery Mobile Widgets to
Updating the Site DW 416 Mobile Pages DW 453
Chapter Summary DW 417 To Add jQuery Mobile Collapsible
Apply Your Knowledge DW 417 Blocks to the Services Page DW 453
Extend Your Knowledge DW 418 To Add a jQuery Mobile Layout Grid
Make It Right DW 419 to the Pricing Page DW 456
In the Labs DW 420 To Add a Form and jQuery Mobile
Cases and Places DW 423 Text and Password Widgets DW 458
To Add jQuery Mobile Home Buttons DW 462
To Add and Link jQuery Mobile Buttons to
CHAPtEr nInE
an Email Address and Phone Number DW 465
Building a Mobile Web Application To Add a Title, Meta Viewport Tag, and View
Objectives DW 425 the Mobile Application in a Browser DW 468
Introduction DW 426 Completing a Mobile Application DW 469
Project — Mobile Web Application DW 427 To Use the jQuery Mobile Swatches Panel DW 470
Overview DW 428 Publishing a Mobile Website DW 472
Designing Mobile Web Applications DW 429 Creating PhoneGap Applications DW 473
Using jQuery Mobile Tools DW 429 Chapter Summary DW 474
Preparing the Mobile Web Application Apply Your Knowledge DW 474
Structure DW 431 Extend Your Knowledge DW 475
To Create and Save a Page for the Mobile Make It Right DW 477
Web Application DW 431 In the Labs DW 479
Creating jQuery Mobile Pages DW 432 Cases and Places DW 486
To Start Adobe Dreamweaver CC APP 12
Appendices To Create a New HTML File APP 12
Save a File in Dreamweaver APP 14
Close a File in Dreamweaver APP 15
APPEnDIX A
Quit Dreamweaver APP 16
Adobe Dreamweaver CC Help
Getting Help with Adobe Dreamweaver CC APP 1 APPEnDIX C
Dreamweaver Help Menu APP 1
Project Planning Guidelines
Exploring the Dreamweaver Online Help System APP 2
Using Project Planning Guidelines APP 17
Searching for Help Using Words and Phrases APP 3
Determine the Purpose of the Website APP 17
To Obtain Help Using the Search Text Box APP 3
Analyze Your Audience APP 17
Using the Topics List APP 5
Gather Possible Content APP 18
To Use the Topics List APP 5
Determine What Content to Present to
Using Context-Sensitive Help APP 6
Your Audience APP 18
To Display Insert Panel Help Using the APP 6
Summary APP 18
Options Menu
To Use the New Feature Videos in Help APP 8 Index IND 1
Apply Your Knowledge APP 9
Quick Reference Summary QR 1
APPEnDIX B
For Mac users
For the Mac User of this Book APP 11
Keyboard Differences APP 11
Copyright 2015 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.