Adobe® - download.e-bookshelf.de · Adobe® Dreamweaver® CS6 Digital Classroom Jeremy Osborn and the AGI Creative Team DWCS6_06Pass.indb iii 5/3/12 12:46 PM

Adobe® Dreamweaver® CS6Digital Classroom

DWCS6_06Pass.indb iDWCS6_06Pass.indb i 5/3/12 12:46 PM5/3/12 12:46 PM

DWCS6_06Pass.indb iiDWCS6_06Pass.indb ii 5/3/12 12:46 PM5/3/12 12:46 PM

Adobe® Dreamweaver® CS6Digital Classroom

Jeremy Osborn and the AGI Creative Team

DWCS6_06Pass.indb iiiDWCS6_06Pass.indb iii 5/3/12 12:46 PM5/3/12 12:46 PM

Adobe® Dreamweaver® CS6 Digital ClassroomPublished byJohn Wiley & Sons, Inc.10475 Crosspoint Blvd.Indianapolis, IN 46256

Copyright © 2012 by John Wiley & Sons, Inc., Indianapolis, IndianaPublished simultaneously in CanadaISBN: 978-1-118-12409-3Manufactured in the United States of America10987654321

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Depart-ment, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6088, or online at http://www.wiley.com/go/permissions.

Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifi cally disclaim all warranties, including without limitation warranties of fi tness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or website is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organiza-tion or website may provide or recommendations it may make. Further, readers should be aware that Internet websites listed in this work may have changed or disappeared between when this work was written and when it is read.

For general information on our other products and services or to obtain technical support, please contact our Customer Care Department within the U.S. at (877) 762-2974, outside the U.S. at (317) 572-3993 or fax (317) 572-4002.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material after registering your book at www.digitalclassroombooks.com/CS6/Dreamweaver. For more information about Wiley products, visit www.wiley.com.

Please report any errors by sending a message to [email protected]

Library of Congress Control Number: 2012933617

Trademarks: Wiley and the John Wiley & Sons logos are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affi liates in the United States and/or other countries, and may not be used without written perm ission. The AGI logo is a trademark of American Graphics Institute, LLC in the United States and other countries, and may not be used without written permission. All other trade-marks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.

DWCS6_00FM.indd ivDWCS6_00FM.indd iv 5/3/12 1:20 PM5/3/12 1:20 PM

About the AuthorsJeremy Osborn is the Content Director at American Graphics Institute (agitraining.com). He has more than 15 years of experience in web and graphic design, fi lmmaking, writing, and publication develop-ment for both print and digital media. He has contributed to several of the Digital Classroom book series. Jeremy holds a MS in Management from the Marlboro College Graduate Center and a BFA in Film/TV from the Tisch School of the Arts at NYU.

Greg Heald has 20 years of design and production experience in both web and print environments. He has served as a contributing author or editor on a number of books on Dreamweaver, Flash, InDesign, and Acrobat. Greg has contributed to the development of Adobe’s certifi cation exams, and as Training Manager for American Graphics Institute, he oversees the delivery of professional develop-ment training programs for individuals and organizations. Greg holds a degree in Advertising Design from the acclaimed College of Visual and Performing Arts at Syracuse University.

The AGI Creative Team is composed of Adobe Certifi ed Experts and Adobe Certifi ed Instructors from American Graphics Institute (AGI). The AGI Creative Team has authored more than 10 Digital Classroom books, and previously created many of Adobe’s offi cial training guides. They work with many of the world’s most prominent companies, helping them to use creative software to communicate more eff ectively and creatively. They work with marketing, creative, and communications teams around the world, delivering private customized training programs, and teach regularly scheduled classes at AGI’s locations. They are available for professional development sessions at schools and universities. More information is available at agitraining.com.

DWCS6_06Pass.indb vDWCS6_06Pass.indb v 5/3/12 12:46 PM5/3/12 12:46 PM

AcknowledgmentsA special thanks to our many friends at Adobe Systems, Inc. who made this book possible and assisted with questions and feedback during the writing process. To the many clients of AGI who have helped us better understand how they use Dreamweaver and provided us with many of the tips and suggestions found in this book. And thanks to the instructional team at AGI for their input and assistance in the review process and for making this book such a team eff ort.

Thanks to Lesa and the team at iStockPhoto for the use of their exclusive iStockPhoto.com photographers’ images.

DWCS6_06Pass.indb viDWCS6_06Pass.indb vi 5/3/12 12:46 PM5/3/12 12:46 PM

Credits

Additional WritingGreg Heald

President, American Graphics Institute and Digital Classroom Series PublisherChristopher Smith

Executive EditorJody Lefevere

Technical EditorsKate Erickson, Cheri White

EditorKarla E. Melendez

Editorial DirectorRobyn Siesky

Business ManagerAmy Knies

Senior Marketing ManagerSandy Smith

Vice President and Executive Group PublisherRichard Swadley

Vice President and Executive PublisherBarry Pruett

Senior Project CoordinatorKatherine Crocker

Project ManagerCheri White

Graphics and Production SpecialistJason Miranda, Spoke & Wheel

Media Development Project SupervisorChris Leavey

ProofreadingJay Donahue, Barn Owl Publishing

IndexingMichael Ferreira

Stock PhotographyiStockPhoto.com

DWCS6_06Pass.indb viiDWCS6_06Pass.indb vii 5/3/12 12:46 PM5/3/12 12:46 PM

DWCS6_06Pass.indb viiiDWCS6_06Pass.indb viii 5/3/12 12:46 PM5/3/12 12:46 PM

Register your Digital Classroom book for exclusive benefi ts

The most current lesson fi les

Technical resources and customer support

Notifi cations of updates

On-line access to video tutorials

Downloadable lesson fi les

Samples from other Digital Classroom books

Register your book today atDigitalClassroomBooks.com/CS6/Dreamweaver

Registered owners receive access to:

Register at DigitalClassroomBooks.com/CS6/Dreamweaver

DigitalClassroom

DWCS6_06Pass.indb ixDWCS6_06Pass.indb ix 5/3/12 12:46 PM5/3/12 12:46 PM

http://www.DigitalClassroomBooks.com/CS6/Photoshop

http://www.DigitalClassroomBooks.com/CS6/Photoshop

DWCS6_06Pass.indb xDWCS6_06Pass.indb x 5/3/12 12:46 PM5/3/12 12:46 PM

xiContents

Starting Up

About Dreamweaver Digital Classroom . . . . . . . . . . . . . . . . . . . . . . . . 1

Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

System requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Starting Adobe Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Resetting the Dreamweaver workspace. . . . . . . . . . . . . . . . . . . . . . . . 3

Loading lesson files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Working with the video tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Setting up for viewing the video tutorials . . . . . . . . . . . . . . . . . . . . . 5

Viewing the video tutorials with the Adobe Flash Player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Hosting your websites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Lesson 1: Dreamweaver CS6 Jumpstart

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

What is Dreamweaver? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

Design and layout tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

Site management and File Transfer Protocol . . . . . . . . . . . . . . . .11

Coding environment and text editor. . . . . . . . . . . . . . . . . . . . . . . . . . .11

Mobile design and development features . . . . . . . . . . . . . . . . . . . .12

Who uses Dreamweaver? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

Dreamweaver’s workspace features . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

Live View and Live Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16

CSS Inspection and the Enable/Disable Feature. . . . . . . . . . . . .17

Related files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18

Code Navigator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19

Photoshop smart objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

Support for Content Management Systems . . . . . . . . . . . . . . . . .20

HTML5, CSS3, and PHP code hinting . . . . . . . . . . . . . . . . . . . . . . . . . . .21

HTML and CSS Starter Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21

Subversion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22

Business Catalyst integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22

How websites work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22

A simple flow chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22

Contents

DWCS6_06Pass.indb xiDWCS6_06Pass.indb xi 5/3/12 12:46 PM5/3/12 12:46 PM

Contents

Dreamweaver CS6 Digital Classroomxii

Domain names and IP addresses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23

Servers and web hosts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23

The role of web browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23

An introduction to HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24

Tag structure and attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24

The structure of an HTML document. . . . . . . . . . . . . . . . . . . . . . . . . . .27

Placing images in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28

Colors in HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30

Case sensitivity and whitespace rules. . . . . . . . . . . . . . . . . . . . . . . . . .31

Element hierarchy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33

XHTML 1.0 Transitional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33

What’s the difference? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33

Explorations in code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34

A look at the Welcome Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35

Creating, opening, and saving documents . . . . . . . . . . . . . . . . . . .36

Creating new documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38

Lesson 2: Setting Up a New Site

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39

Creating a new site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40

Advanced site-creation options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43

Adding pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45

Saving a page to your site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48

Defining page properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49

Work views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55

A deeper look into the Files panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58

Viewing local files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59

Selecting and editing files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61

DWCS6_06Pass.indb xiiDWCS6_06Pass.indb xii 5/3/12 12:46 PM5/3/12 12:46 PM

xiiiContents

Contents

Lesson 3: Adding Text and Images

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63

Typography and images on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . .64

Adding text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64

An introduction to styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69

Previewing pages in a web browser. . . . . . . . . . . . . . . . . . . . . . . . . . . .73

Understanding hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74

Creating hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75

Relative versus absolute hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . .77

Linking to an e-mail address . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79

Creating lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80

Using the Text Insert panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82

Inserting images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83

Image resolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83

Image formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83

Creating a simple gallery page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .84

Linking images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87

Using image placeholders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88

Editing images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89

Adjusting brightness and contrast. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89

Optimizing images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90

Updating images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92

Lesson 4: Styling Your Pages with CSS

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .93

What are Cascading Style Sheets? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .94

CSS replaces inefficient HTML styling . . . . . . . . . . . . . . . . . . . . . . . . . .95

The benefits of CSS styling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96

How do you create CSS rules in Dreamweaver? . . . . . . . . . . . . .98

Understanding Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Understanding why they’re called Cascading . . . . . . . . . . . . . 105

Creating and modifying styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Creating a class style with the Property Inspector . . . . . . . . 108

DWCS6_06Pass.indb xiiiDWCS6_06Pass.indb xiii 5/3/12 12:46 PM5/3/12 12:46 PM

Contents

Dreamweaver CS6 Digital Classroomxiv

Creating and modifying styles in the CSS Styles panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Advanced text formatting with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Fine-tuning page appearance with contextual and pseudo-class selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Div tags and CSS IDs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Internal versus external style sheets . . . . . . . . . . . . . . . . . . . . . . . . . 120

Attaching an external style sheet to your page . . . . . . . . . . . 122

Modifying attached style sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Creating a new .css file (external style sheet) . . . . . . . . . . . . . . 124

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

Lesson 5: Creating Page Layouts with CSS

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

The CSS Box model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

The basics of CSS margins, padding, and borders . . . . . . . . 128

Reviewing the <div> element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Reviewing the ID selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Creating a centered container for your page. . . . . . . . . . . . . . . 132

Making layouts cross-browser compatible . . . . . . . . . . . . . . . . . 135

Absolute versus relative positioning . . . . . . . . . . . . . . . . . . . . . . . . . 136

Positioning content with AP Divs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

Creating a header section with the Draw AP Div . . . . . . . . . . 139

Adding an introduction section to your page . . . . . . . . . . . . . 142

Adding images to your layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

Photoshop integration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Adding Main and Sidebar content areas . . . . . . . . . . . . . . . . . . . . 146

Adding additional content and styles. . . . . . . . . . . . . . . . . . . . . . . . 148

Setting margins and borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

Overriding default margins in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Adding borders to elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Future proofing your layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

The pros and cons of Absolutely Positioned CSS layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

DWCS6_06Pass.indb xivDWCS6_06Pass.indb xiv 5/3/12 12:46 PM5/3/12 12:46 PM

xvContents

Contents

Lesson 6: Advanced Page Layout

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Layout with AP divs versus layout with floats. . . . . . . . . . . . . . 158

Creating a floated image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

Creating columns with HTML and CSS. . . . . . . . . . . . . . . . . . . . . . . 161

Creating the HTML Structure with div elements . . . . . . . . . . 161

Setting the width and floating the columns . . . . . . . . . . . . . . . 163

Using the clear property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

Creating a list-based navigation bar . . . . . . . . . . . . . . . . . . . . . . . . . 166

Changing column layout and size . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

Creating the appearance of equal height columns . . . . . . . 175

Browser compatibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

Adding code for IE 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

Applying finishing touches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Creating more sophisticated layouts . . . . . . . . . . . . . . . . . . . . . . . . . 180

Dreamweaver Fluid Grid Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

Lesson 7: CSS3 Transitions and Web Fonts

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Understanding the role of CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

Adding a CSS Transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

Modifying a CSS Transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

Adding CSS Transitions to a navigation menu . . . . . . . . . . . . . 196

The basics of web fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Adding web fonts to your site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Styling your heading with a web font . . . . . . . . . . . . . . . . . . . . . . . 205

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

DWCS6_06Pass.indb xvDWCS6_06Pass.indb xv 5/3/12 12:46 PM5/3/12 12:46 PM

Contents

Dreamweaver CS6 Digital Classroomxvi

Lesson 8: Working with Tables

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Using tables in web design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Importing table data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Selecting table elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

Modifying table size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Modifying table structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

Creating a table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

Formatting and styling tables in HTML . . . . . . . . . . . . . . . . . . . . . . 221

Formatting and styling tables with CSS . . . . . . . . . . . . . . . . . . . . . 226

Advanced CSS styling of tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

Controlling cell alignment, padding, and borders with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232

Creating alternate row styling with CSS . . . . . . . . . . . . . . . . . . . . . 234

Reusing CSS for other tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236

Data sorting tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

Lesson 9: Fine-Tuning Your Workflow

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Customizing panels and panel groups . . . . . . . . . . . . . . . . . . . . . . 242

Using the Favorites tab on the Insert bar . . . . . . . . . . . . . . . . . . . 245

Resizing the document window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Changing the Zoom level . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Using guides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

Using grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

The tag selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

Tiling documents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

DWCS6_06Pass.indb xviDWCS6_06Pass.indb xvi 5/3/12 12:46 PM5/3/12 12:46 PM

xviiContents

Contents

Lesson 10: Adding Flash, Video, and Sound Content

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

Making web content interesting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

Inserting Flash movies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

Adding video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

Flash Video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

QuickTime video and Windows Media . . . . . . . . . . . . . . . . . . . . . . . 266

Inserting sound . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

Lesson 11: Maximizing Site Design

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

Creating modular page elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

Introducing snippets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

The Snippets panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

Creating new snippets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Introducing library items. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Modifying and updating library items . . . . . . . . . . . . . . . . . . . . . . . 282

Introducing templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Creating a new template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Working with editable regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

Creating new pages from templates . . . . . . . . . . . . . . . . . . . . . . . . . 287

Modifying templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289

Repeating regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

Putting repeating regions into action . . . . . . . . . . . . . . . . . . . . . . . 291

Detach from Template command . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

DWCS6_06Pass.indb xviiDWCS6_06Pass.indb xvii 5/3/12 12:46 PM5/3/12 12:46 PM

Contents

Dreamweaver CS6 Digital Classroomxviii

Lesson 12: Working with Code-editing Features

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

Working with code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

Accessing code with the Quick Tag editor . . . . . . . . . . . . . . . . . . 296

Inserting tags with the Tag Chooser. . . . . . . . . . . . . . . . . . . . . . . . . . 298

Inserting and editing comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

Using HTML5 Code-hinting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

Working in the Code view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302

Modifying the Code view workspace . . . . . . . . . . . . . . . . . . . . . . . . 303

The Coding toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

Collapsing and expanding tags and code blocks . . . . . . . . . 307

Validating your code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308

Highlighting and correcting invalid code . . . . . . . . . . . . . . . . . . . 308

Running a Report . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Formatting code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

Indenting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314

Lesson 13: Building Web Forms

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

The basics of HTML forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

How forms work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

Building a contact form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317

Inserting the <form> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317

Setting form properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320

Adding form elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322

Adding text fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323

Adding checkboxes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

Adding radio buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

Adding radio groups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

Adding lists and menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

Adding a text area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330

Adding a File Upload field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

DWCS6_06Pass.indb xviiiDWCS6_06Pass.indb xviii 5/3/12 12:46 PM5/3/12 12:46 PM

xixContents

Contents

Creating Submit and Reset buttons . . . . . . . . . . . . . . . . . . . . . . . . . . 332

Styling forms with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

Attaching external styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

Setting a background color. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

Styling form elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

Form processing and validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338

Adding form validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

A look at the Behaviors panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

Setting an event or trigger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

Validating form fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342

Changing a form field’s behavior order . . . . . . . . . . . . . . . . . . . . . . 343

Verifying field contents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

Lesson 14: Adding Interactivity with the Spry Framework

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347

Introducing the Spry Widgets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

The Spry framework for AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

What is AJAX? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

A look at the project. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

The Spry Menu bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350

Customizing Spry Widgets with CSS . . . . . . . . . . . . . . . . . . . . . . . . . 353

The Spry Tabbed panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

The Spry Accordion panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360

The Spry Collapsible panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364

Working with Spry Data Widgets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

What is XML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366

Creating a Spry XML data set. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366

Adding a Spry Data Widget: The Spry Repeat List . . . . . . . . 368

Styling and fine-tuning data widgets . . . . . . . . . . . . . . . . . . . . . . . . 370

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373

DWCS6_06Pass.indb xixDWCS6_06Pass.indb xix 5/3/12 12:46 PM5/3/12 12:46 PM

Contents

Dreamweaver CS6 Digital Classroomxx

Lesson 15: Mobile Design and Layout

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

The rise of the mobile web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376

Dreamweaver tools for mobile layout . . . . . . . . . . . . . . . . . . . . . . . 376

Mobile website features in Dreamweaver . . . . . . . . . . . . . . . . . . 378

Viewing your web page with the Multiscreen feature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378

Media Queries defined. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381

Creating a site-wide media query file . . . . . . . . . . . . . . . . . . . . . . . . 383

Organizing your style sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386

Creating a layout optimized for mobile . . . . . . . . . . . . . . . . . . . . . 388

Creating styles for navigation and a single-column layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391

The basics of Fluid Grid Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394

Creating your mobile layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398

Creating a tablet layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

Creating a three-column fluid layout for the desktop . . . 403

Styling elements in your fluid grid layout. . . . . . . . . . . . . . . . . . . 407

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410

Lesson 16: Managing your Website: Reports, Optimization, and Maintenance

Starting up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411

Working with the Files panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

Creating a remote connection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

Viewing files on a remote web server . . . . . . . . . . . . . . . . . . . . . . . . 416

Transferring files to and from a remote server with Get and Put . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Using Check In/Check Out and Design Notes . . . . . . . . . . . . . . 419

Check In and Check Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419

Checking files in and out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421

Using Design Notes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422

Sharing Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423

Displaying Design Notes in the Files panel . . . . . . . . . . . . . . . . . 424

Testing site integrity. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425

DWCS6_06Pass.indb xxDWCS6_06Pass.indb xx 5/3/12 12:46 PM5/3/12 12:46 PM

xxiContents

Contents

Using Check Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425

Checking links sitewide. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426

Generating site reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

Understanding report results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430

Addressing a listed item . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430

The Browser Compatibility Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432

Optimizing pages for launch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432

Search engine visibility and Search Engine Optimization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432

Titling your documents with the <title> tag . . . . . . . . . . . . . . . 432

Adding meta keywords and descriptions . . . . . . . . . . . . . . . . . . . 435

Launching your site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436

Site Launch Checklist. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436

Uploading your site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437

Getting help and using the reference guides . . . . . . . . . . . . . . 438

The Reference panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439

Suggested next steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439

Website design resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440

Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441

Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441

Lesson 17: Dreamweaver CS6 New Features

What’s new in Dreamweaver CS6? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443

Fluid Grid Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

CSS transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446

Web fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447

jQuery Mobile Swatches. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448

PhoneGap Build Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448

New Features in Dreamweaver CS5.5 . . . . . . . . . . . . . . . . . . . . . . . . 449

CSS3 and HTML5 authoring support . . . . . . . . . . . . . . . . . . . . . . . . 449

jQuery Mobile integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450

Support for building native mobile apps for iOS and Android with PhoneGap . . . . . . . . . . . . . . . . . . . . . . . . 451

W3C Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451

DWCS6_06Pass.indb xxiDWCS6_06Pass.indb xxi 5/3/12 12:46 PM5/3/12 12:46 PM

DWCS6_06Pass.indb xxiiDWCS6_06Pass.indb xxii 5/3/12 12:46 PM5/3/12 12:46 PM

1Starting up

About Dreamweaver Digital ClassroomAdobe® Dreamweaver® lets you design, develop, and maintain web pages and websites. Designers and developers both use Dreamweaver, which lets you create and edit content using either a visual layout or a coding environment. Dreamweaver CS6 also provides tight integration with other Adobe products such as Photoshop® CS6 and Flash® CS6 Professional.

The Adobe Dreamweaver CS6 Digital Classroom helps you to understand these capabilities, and how to get the most out of your software, so that you can get up-and-running right away with the CS6 version of the software. You can work through all the lessons in this book, or complete only specifi c lessons. Each lesson includes detailed, step-by-step instructions, along with lesson fi les, useful background information, and video tutorials.

Adobe Dreamweaver CS6 Digital Classroom is like having your own expert instructor guiding you through each lesson while you work at your own pace. This book includes 17 self-paced lessons that let you discover essential skills, explore new features, and understand capabilities that will save you time. You’ll be productive right away with real-world exercises and simple explanations. Each lesson includes step-by-step instructions and lesson fi les available on the included DVD. The Adobe Dreamweaver CS6 Digital Classroom lessons are developed by the same team of Adobe Certifi ed Instructors and Dreamweaver experts who have created many offi cial training titles for Adobe Systems.

PrerequisitesBefore you start the Adobe Dreamweaver CS6 Digital Classroom lessons, you should have a working knowledge of your computer and its operating system. You should know how to use the directory system of your computer so that you can navigate through folders. You also need to understand how to locate, save, and open fi les, and you should also know how to use your mouse to access menus and commands.

Before starting the lesson fi les in the Adobe Dreamweaver CS6 Digital Classroom, make sure that you have installed Adobe Dreamweaver CS6. The software is sold separately, and not included with this book. You may use the free 30-day trial version of Adobe Dreamweaver CS6 available at the Adobe.com website, subject to the terms of its license agreement.

System requirementsBefore starting the lessons in the Adobe Dreamweaver CS6 Digital Classroom, make sure that your computer is equipped for running Adobe Dreamweaver CS6. The minimum system requirements for your computer to eff ectively use the software are listed on the following page and you can fi nd the most current system requirements at http://www.adobe.com/products/dreamweaver/tech-specs.html.

Starting up

DWCS6_06Pass.indb 1DWCS6_06Pass.indb 1 5/3/12 12:46 PM5/3/12 12:46 PM

Prerequisites

Dreamweaver CS6 Digital Classroom2

Windows

• Intel® Pentium® 4 or AMD Athlon® 64 processor

• Microsoft® Windows® XP with Service Pack 2 (Service Pack 3 recommended); Windows Vista® Home Premium, Business, Ultimate, or Enterprise with Service Pack 1; or Windows 7

• 512 MB of RAM (1 GB recommended)

• 1 GB of available hard-disk space for installation; additional free space required during installation (cannot install on removable fl ash-based storage devices)

• 1280×800 display with 16-bit video card

• Java™ Runtime Environment 1.6 (included)

• DVD-ROM drive

• QuickTime 7.6.6 software required for HTML5 media playback

• Broadband Internet connection required for software activation and access to online services.

Mac OS

• Multicore Intel processor

• Mac OS X v10.6 or v10.7

• 512 MB of RAM (1 GB recommended)

• 1.8 GB of available hard-disk space for installation; additional free space required during installation (cannot install on a volume that uses a case-sensitive fi le system or on removable fl ash-based storage devices)

• 1280×800 display with 16-bit video card

• Java™ Runtime Environment 1.6

• DVD-ROM drive

• QuickTime 7.6.6 software required for HTML5 media playback

• Broadband Internet connection required for software activation and access to online services.


3Starting up

Resetting the Dreamweaver workspace

Starting Adobe DreamweaverAs with most software, Adobe Dreamweaver is launched by locating the application in your Programs folder (Windows) or Applications folder (Mac OS). If you are not familiar with starting the program, follow these steps to start the Adobe Dreamweaver CS6 application:

Windows1 Choose Start > All Programs > Adobe Dreamweaver.

2 Close the Welcome Screen when it appears. You are now ready to use Adobe Dreamweaver CS6.

Mac OS1 Open the Applications folder, and then open the Adobe Dreamweaver CS6 folder.

2 Double-click on the Adobe Dreamweaver application icon.

3 Close the Welcome Screen when it appears. You are now ready to use Adobe Dreamweaver CS6.

Menus and commands are identifi ed throughout the book by using the greater-than symbol (>). For example, the command to print a document appears as File > Print.

Access lesson files & videos any timeRegister your book at www.digitalclassroombooks.com/CS6/Dreamweaver to download the lesson fi les onto any computer you own, or watch the videos on your Internet connected tablet, smartphone, or computer. You’ll be able to watch the Digital Classroom videos anywhere you have an Internet connection. Registering your book also provides you access to lesson fi les and videos even if you misplace your DVD.

Checking for updated lesson filesMake sure you have the most up-to-date lesson fi les and learn about any updates to your Dreamweaver CS6 Digital Classroom book by registering your book at www.digitalclassroombooks.com/CS6/Dreamweaver.

Resetting the Dreamweaver workspaceTo make certain that your panels and working environment are consistent, you should reset your workspace at the start of each lesson. To reset your workspace, choose Window > Workspace Layout > Designer.


Loading lesson fi les


Loading lesson filesThe Dreamweaver CS6 Digital Classroom DVD includes fi les that accompany the exercises for each of the lessons. You may copy the entire lessons folder from the supplied DVD to your hard drive, or copy only the lesson folders for the individual lessons you wish to complete.

For each lesson in the book, the fi les are referenced by the name of each fi le. The exact location of each fi le on your computer is not used, as you may have placed the fi les in a unique location on your hard drive. We suggest placing the lesson fi les in the My Documents folder (Windows) or at the top level of your hard drive (Mac OS).

Copying the lesson files to your hard drive:1 Insert the Dreamweaver CS6 Digital Classroom DVD supplied with this book.

2 On your computer desktop, navigate to the DVD and locate the folder named dwlessons.

3 You can install all the fi les, or just specifi c lesson fi les. Do one of the following:

• Install all lesson fi les by dragging the dwlessons folder to your hard drive.

• Install only some of the fi les by creating a new folder on your hard drive named dwlessons. Open the dwlessons folder on the supplied DVD, select the lesson(s) you wish to complete, and drag the folder(s) to the dwlessons folder you created on your hard drive.

Unlocking Mac OS files

Mac users may need to unlock the files after they are copied from the accompanying disc. This applies only to Mac OS computers, and is because the Mac OS may view files that are copied from a DVD or CD as being locked for writing.

If you are a Mac OS user and have difficulty saving over the existing files in this book, you can use these instructions so that you can update the lesson files as you work on them, and also add new files to the lessons folder

Note that you only need to follow these instructions if you are unable to save over the existing lesson files, or if you are unable to save files into the lesson folder.

1 After copying the fi les to your computer, click once to select the pslessons folder, then choose File > Get Info from within the Finder (not Dreamweaver).

2 In the dwlessons info window, click the triangle to the left of Sharing and Permissions to reveal the details of this section.

3 In the Sharing and Permissions section, click the lock icon, if necessary, in the lower-right corner so that you can make changes to the permissions.

4 Click to select a specifi c user or select everyone, then change the Privileges section to Read & Write.

5 Click the lock icon to prevent further changes, and then close the window.


5Starting up

Working with the video tutorials

Working with the video tutorialsYour Dreamweaver CS6 Digital Classroom DVD comes with video tutorials developed by the authors to help you understand the concepts explored in each lesson. Each tutorial is approximately fi ve minutes long and demonstrates and explains the concepts and features covered in the lesson.

The videos are designed to supplement your understanding of the material in the chapter. We have selected exercises and examples that we feel will be most useful to you. You may want to view the entire video for each lesson before you begin that lesson. Additionally, at certain points in a lesson, you will encounter the DVD icon. The icon, with appropriate lesson number, indicates that an overview of the exercise being described can be found in the accompanying video.

0DVD video icon.

Setting up for viewing the video tutorialsThe DVD included with this book includes video tutorials for each lesson. Although you can view the lessons on your computer directly from the DVD, we recommend copying the folder labeled videos from the Dreamweaver CS6 Digital Classroom DVD to your hard drive for best performance.

Copying the video tutorials to your hard drive:

1 Insert the Dreamweaver CS6 Digital Classroom DVD supplied with this book.

2 On your computer desktop, navigate to the DVD and locate the folder named videos.

3 Drag the videos folder to a location onto your hard drive.


Working with the video tutorials


Viewing the video tutorials with the Adobe Flash PlayerThe videos on the Dreamweaver CS6 Digital Classroom DVD are saved in the Flash projector format. A Flash projector fi le wraps the Digital Classroom video player and the Adobe Flash Player in an executable fi le (.exe for Windows or .app for Mac OS). The fi le extension may not always be visible. Projector fi les allow the Flash content to be deployed on your system without the need for a browser or prior stand-alone player installation.

Playing the video tutorials:

1 On your computer, navigate to the videos folder you copied to your hard drive from the DVD. Playing the videos directly from the DVD may result in poor quality playback.

2 Open the videos folder and double-click the Flash fi le named PLAY_DWCS6videos to view the video tutorials.

3 After the Flash player launches, press the Play button to view the videos.

The Flash Player has a simple user interface that allows you to control the viewing experience, including stopping, pausing, playing, and restarting the video. You can also rewind or fast-forward, and adjust the playback volume.

A B D E FC

A. Go to beginning. B. Play/Pause. C. Fast-forward/rewind. D. Stop. E. Volume Off /On. F. Volume control.

Playback volume is also aff ected by the settings in your operating system. Be certain to adjust the sound volume for your computer, in addition to the sound controls in the Player window.
