68

Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

  • Upload
    others

  • View
    28

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional
Page 2: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional
Page 3: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Adobe® Dreamweaver® CS6 on Demand

Copyright © 2012 by Perspection, Inc.

All rights reserved. No part of this book shall be reproduced, stored in aretrieval system, or transmitted by any means, electronic, mechanical, photo-copying, recording, or otherwise, without written permission from the publish-er. No patent liability is assumed with respect to the use of the informationcontained herein. Although every precaution has been taken in the prepara-tion of this book, the publisher and author assume no responsibility for errorsor omissions. Nor is any liability assumed for damages resulting from the useof the information contained herein.

Library of Congress Cataloging-in-Publication Data is on file

ISBN-13: 978-0-7897-4932-1

ISBN-10: 0-7897-4932-7

Printed and bound in the United States of AmericaFirst Printing: June 2012

15 14 13 12 4 3 2 1

Que Publishing offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales.

For information, please contact: U.S. Corporate and Government Sales

1-800-382-3419 or [email protected]

For sales outside the U.S., please contact: International Sales

1-317-428-3341 or [email protected]

TrademarksAll terms mentioned in this book that are known to be trademarks or servicemarks have been appropriately capitalized. Que cannot attest to the accuracyof this information. Use of a term in this book should not be regarded asaffecting the validity of any trademark or service mark.

Adobe, the Adobe logo, Acrobat, Bridge, Dreamweaver, Extension Manager,ExtendScript Toolkit, Flash, InDesign, Illustrator, PageMaker, Photoshop, andPhotoshop Elements are registered trademarks of Adobe System Incorporated.Apple, Mac OS, and Macintosh are trademarks of Apple Computer, Inc.Microsoft and the Microsoft Office logo are registered trademarks of MicrosoftCorporation in the United States and/or other countries.

Warning and DisclaimerEvery effort has been made to make this book as complete and as accurate aspossible, but no warranty or fitness is implied. The authors and the publishersshall have neither liability nor responsibility to any person or entity withrespect to any loss or damage arising from the information contained in thisbook.

PublisherPaul Boger

Associate PublisherGreg Wiegand

Acquisitions EditorLaura Norman

Managing EditorSteve Johnson

AuthorSteve Johnson

EditorAdrian Hyde

Page LayoutJames Teyler

Interior DesignersSteve JohnsonMarian Hartsough

PhotographsTracy Teyler

IndexerKatherine Stimson

ProofreaderBeth Teyler

Team CoordinatorCindy Teeters

Page 4: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

iii

Acknowledgments

a

aPerspection, Inc.Adobe Dreamweaver CS6 on Demand has been created by the professional trainersand writers at Perspection, Inc. to the standards you’ve come to expect from Quepublishing. Together, we are pleased to present this training book.

Perspection, Inc. is a software training company committed to providing informationand training to help people use software more effectively in order to communicate,make decisions, and solve problems. Perspection writes and produces softwaretraining books, and develops multimedia and Web-based training. Since 1991, wehave written more than 120 computer books, with several bestsellers to our credit,and sold over 5 million books.

This book incorporates Perspection’s training expertise to ensure that you’ll receivethe maximum return on your time. You’ll focus on the tasks and skills that increaseproductivity while working at your own pace and convenience.

We invite you to visit the Perspection web site at:

www.perspection.com

AcknowledgmentsThe task of creating any book requires the talents of many hard-working peoplepulling together to meet impossible deadlines and untold stresses. We’d like tothank the outstanding team responsible for making this book possible: the writer,Steve Johnson; the editor, Adrian Hyde; the production editor, James Teyler; proof-reader, Beth Teyler; and the indexer, Katherine Stimson.

At Que publishing, we’d like to thank Greg Wiegand and Laura Norman for theopportunity to undertake this project, Cindy Teeters for administrative support, andSandra Schroeder for your production expertise and support.

Perspection

Page 5: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

iv

aa

About the AuthorSteve Johnson has written more than 70 books on a variety of computer software,including Adobe Photoshop CS5, Adobe Dreamweaver CS5, Adobe InDesign CS5,Adobe Illustrator CS5, Adobe Flash Professional CS5, Microsoft Windows 7,Microsoft Office 2010 and 2007, Microsoft Office 2008 for the Macintosh, and AppleMac OS X Lion. In 1991, after working for Apple Computer and Microsoft, Stevefounded Perspection, Inc., which writes and produces software training. When he isnot staying up late writing, he enjoys coaching baseball, playing golf, gardening,and spending time with his wife, Holly, and three children, JP, Brett, and Hannah.Steve and his family live in Northern California, but can also be found visiting fam-ily all over the western United States.

Page 6: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Acknowledgments v

a

We Want to Hear from You!As the reader of this book, you are our most important critic and commentator. Wevalue your opinion and want to know what we’re doing right, what we could do bet-ter, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way.

As an associate publisher for Que, I welcome your comments. You can email orwrite me directly to let me know what you did or didn’t like about this book—as wellas what we can do to make our books better.

Please note that I cannot help you with technical problems related to the topic of this book. We do have a User Services group, however, where I will forward spe-cific technical questions related to the book.

When you write, please be sure to include this book’s title and author as well asyour name, email address, and phone number. I will carefully review your com-ments and share them with the author and editors who worked on the book.

Email: [email protected]

Mail: Greg WiegandQue Publishing800 East 96th StreetIndianapolis, IN 46240 USA

For more information about this book or another Que title, visit our Web site atwww.quepublishing.com. Type the ISBN (excluding hyphens) or the title of a book inthe Search field to find the page you’re looking for.

Page 7: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

This page intentionally left blank

Page 8: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

vii

Contents

c

cIntroduction xvii

Preparing and Planning a Web Site 1

Beginning with a Plan 2Creating a Visual Mind Map 4Generating a Timeline 6Creating a Storyboard 7Creating a Site Design 8Assembling the Site 9Creating a Site Local Root Folder 10

Getting Started with Dreamweaver CS6 11

Understanding System Requirements 12Installing Dreamweaver 13Getting Started 14Examining the Dreamweaver Window 16Creating a Web Site 18Opening a Web Site 20Creating a Blank Web Page 21 New5.5

Creating a Web Page from a Blank Template 22 New5.5

Creating a Web Page from a Fluid Grid Layout 23 New!

Creating a Web Page from a Template 24Creating a Web Page from a Sample 25 New5.5

Saving a Web Page 26Opening an Existing Web Page or File 28Working with Views 30Switching Between Pages and Views 31Previewing Pages in Live View 32 New!

Previewing Pages in Multiscreen View 34 New!

Previewing Pages in a Browser 36Getting Help While You Work 38

2

1

Page 9: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

viii

c

Getting Dreamweaver Updates on the Web 40Closing a Web Page or File 41Finishing Up 42

Working Within the Dreamweaver Environment 43

Working with Toolbars 44 New!

Resizing Panels 45Working with Panels 46Docking and Undocking Panels 48Grouping and Ungrouping Panels 49Creating a Workspace 50 New!

Using the Status Bar 52 New!

Changing the View with the Zoom Tool 54 New5.5

Working with Rulers 55Working with the Grid and Guides 56Creating Keyboard Shortcuts 58Setting General Preferences 60Setting New Document Preferences 62Working with Colors 64Setting Highlighting Color Preferences 66

Managing Web Site Files 67

Exploring Web Site Files and Folders 68Setting Up Site Folders 69Viewing the Files Panel 70Opening and Creating Files in the Files Panel 72Managing Files and Folders in the Files Panel 74Finding Files in the Files Panel 76Saving a File with Different Formats 78Identifying Dreamweaver File Formats 79Setting the Home Page 80Preparing to Set Page Properties 81Setting Appearance Page Properties 82Setting Link Page Properties 83Setting Heading Page Properties 84Changing Title and Encoding Page Properties 85Changing Page Properties for a Tracing Image 86Using Visual Aids 87 New!

Working with Invisible Elements 88Selecting Elements 90

4

3

Page 10: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Contents ix

c

Working with Web Page Text 91

Adding Text to Web Pages 92Importing Tabular Data 93Importing Content from Microsoft Documents 94Inserting Special Characters and the Date 96Selecting Text 98Copying and Pasting Text 100Setting Copy/Paste Preferences 102 New!

Formatting Paragraph Text 103Formatting Characters 104Using Web Fonts 106 New!

Modifying Font Combinations 108 New!

Setting Font Preferences 109Controlling Line Spacing 110Inserting Horizontal Rules 111Creating Ordered and Unordered Lists 112Creating Definition Lists 114Modifying Lists 115Applying Text Styles 116Creating Text Styles 118Renaming Styles 120Finding Text 121Finding and Replacing Text or Code 122Using the Results Panel 124Defining Acronyms and Abbreviations 125Checking Spelling 126Using Undo and Redo 128

Working with Web Page Images 131

Using Web Friendly Graphics 132Defining an Image Folder 134 New!

Inserting Images 136 New!

Inserting Images from Photoshop 138 New!

Updating Images from Photoshop 140Inserting Images from Fireworks 142 New!

Optimizing Images Using Fireworks 144Using an External Editor 145Setting File Types/Editors Preferences 146Optimizing Image 148 New!

6

5

Page 11: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

x

c

Modify Images 150Using Low Source Images 151Resizing Images 152 New!

Cropping Images 153Changing Image Brightness and Contrast 154Changing Image Sharpness 155Creating Rollover Images 156Inserting an Image Placeholder 158

Linking Web Pages 161

Understanding Link Types 162Understanding Paths 163Setting the Relative Path 164Adding a Link 166Adding an Email Link 168Linking within a Web Page 170Creating Image Map Hotspots 172Modifying Image Map Hotspots 174Creating a Null or Script Link 175Modifying a Link 176Removing a Link 177Updating Links 178Testing a Link 180 New5.5

Changing Links Sitewide 182

Working with Web Page Tables 183

Working with Tables 184Switching Between Table Modes 185Inserting a Table in Standard Mode 186Modifying a Table 188Adding Content into a Table 190Importing and Exporting Table Data 192Adding Columns or Rows to Tables 194Resizing Columns and Rows 195Splitting and Merging Cells 196Sorting Table Data 197Changing Table Properties 198Changing Cell, Row, or Column Properties 200Using a Tracing Image 202Creating a Nested Table 204

8

7

Page 12: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Contents xi

c

Working with Cascading Style Sheets 205

Introducing Cascading Style Sheets 206Creating a Web Page with a CSS Layout 208 New5.5

Creating CSS Styles 210Applying Internal CSS Styles 212Applying and Modifying External CSS Styles 214Applying Multiple CSS Classes 216 New!

Removing Internal Styles 218Using the CSS Styles Panel 219Editing CSS in the Properties Panel 220Setting CSS Properties 222 New5.5

Working with CSS Rules 224 New5.5

Moving CSS Rules 226Disabling or Enabling CSS Rules 228Inspecting CSS Code 229Creating CSS Transitions 230 New!

Viewing Relevant CSS Rules 232Working with ID Selectors 233Creating and Applying an ID Selector 234Checking for CSS Browser Compatibility 236Formatting CSS Code 238Setting CSS Styles Preferences 240Using Design-Time Style Sheets 241Optimizing Web Pages 242

Creating Page Layouts Using CSS�P 243

Introducing CSS Layouts and AP Elements 244Creating AP Elements 245Nesting AP Elements 246Setting AP Element Preferences 247Using CSS Positioning 248Applying a CSS-P Style 250Modifying CSS-P Properties 252Working with AP Elements 254Creating a Rollover Using AP Elements 256Converting AP Elements to Tables 258

Creating Page Layouts Using Fluid Grids 261

Creating a Fluid Grid Layout 262 New!

Viewing a Fluid Grid Layout 264 New!

11

10

9

Page 13: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

xii

c

Working with a Fluid Grid Layout 266 New!

Resizing a Fluid Grid Layout 268 New!

Modifying a Fluid Grid Layout 270 New!

Previewing a Fluid Grid Layout in a Browser 271 New!

Creating Frames 273

Creating a New Frame 274Opening a Web Page in a Frame 276Providing Information for No Frame Support 277Selecting Frames and Framesets 278Adding Frameset Information 279Saving a Frameset 280Modifying Frames 282Changing Frame Properties 284Changing Frameset Properties 286Targeting Links 288Creating Quick and Easy Frame Links 290

Working with Multimedia 291

Introducing Flash File Types 292Inserting a Flash or Shockwave Movie 293Changing Flash or Shockwave Movie Properties 294Inserting a Flash Video 296Linking or Embedding Sound 298 New5.5

Using Java Applets 300Using ActiveX Controls 302Using Plug-ins 304Checking for Plug-ins 306

Creating Forms 309

Understanding Forms 310Creating a Form 312Inserting Form Objects 314Modifying Text Fields and Text Areas 316Modifying Radio Buttons and Check Boxes 318Modifying Lists and Menus 319Modifying Buttons 320Inserting an Image Button 321Making Form Objects Dynamic 322Using Tables to Control Forms 323

14

13

12

Page 14: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Contents xiii

c

Validating Forms 324Creating and Editing a Jump Menu 326Viewing Example Code for Forms 328

Viewing the HTML Behind the Page 329

Understanding HTML 330Using the Reference Panel 332Using Code View 334Using Code Live View 336Setting Code View Options 337Entering HTML Code 338Using Code Hints 339 New5.5

Working with HTML Head Tags 340Inserting HTML Comments 341Using the Coding Toolbar 342Using Quick Tag Editor 344Using the Tag Inspector 346Using the Tag Chooser 347Opening Related Files 348Navigating to Related Code 350Setting Site Specific Code Hints 351Setting Code Hint Preferences 352Setting Code Format Preferences 353Setting Code Rewriting Preferences 354Setting Code Color Preferences 356

Working with Behaviors 357

Introducing Behaviors 358Applying Behaviors to Page Elements 360Applying Behaviors to Entire Page 362Editing Behaviors 364Working with Behaviors 366Adding Behavior Effects 368Going to Another Web Page 370Opening Another Browser Window 371Displaying Text Messages 372Preloading and Swapping Images 374Changing Element Properties 376Dragging an AP Element 378Showing and Hiding Elements 380

16

15

Page 15: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

xiv

c

Executing a JavaScript 381Working with Server Behaviors 382

Using Spry Widgets and Effects 383

Inserting Spry Widgets 384Selecting and Editing Spry Widgets 386Working with Spry Panel Widgets 388Working with Spry Validation Widgets 390Working with Spry Menu Bar Widgets 392Creating a Spry Tooltip 394Displaying Spry Data Sets 396Creating a Spry Region 400Creating a Spry Repeat List 402Customizing a Spry Widget 403Adding and Removing Spry Effects 404Checking Out Spry Samples 406

Using Code Snippets and Libraries 407

Introducing Snippets 408Inserting a Snippet 410Editing Existing Snippets 412Creating Snippets 414Introducing Assets and Libraries 416Using the Assets Panel 417Inserting an Asset 418Working with Site Assets 419Working with Color and URL Assets 420Working with Favorite Assets 422Creating and Inserting Library Items 424Editing Library Items 426Working with Library Items 428Creating an External JavaScript Library 430Inserting and Editing an External JavaScript 432Using Server-Side Includes 434

Creating Templates 435

Introducing Templates 436Creating a Template 437Opening a Template 438Defining Editable Regions 440Defining Editable Attributes 441

19

18

17

Page 16: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Contents xv

c

Creating Repeating Regions 442Creating Optional Regions 444Creating InContext Editable Editing Regions 446Creating InContext Editable Repeating Regions 448Creating Nested Templates 450Creating a Web Page from a Nested Template 452Creating a Web Page from a Custom Template 453Updating a Template 454Attaching or Detaching a Template 456Importing XML into a Template 457Exporting Template Data as XML 458

Testing a Web Site 459

Finding Broken Links 460Fixing Broken Links 462Validating Web Pages 464 New5.5

Checking for HTML Browser Compatibility 466Checking Pages in a Browser 468Checking for Balanced Code 470Cleaning Up HTML 472Cleaning UP Word HTML 474Adding Accessibility 476Running Reports to Test a Site 478Viewing and Saving Reports 480Gathering Download Statistics 482

Managing a Web Site 483

Setting Advanced Site Definitions 484 New!

Defining Local Info for a Site 486 New5.5

Defining Remote Info for a Site 488 New5.5

Defining the Testing Server 492 New5.5

Defining Version Control 493Defining Site Cloaking 494Setting File View Columns Options 495Using Design Notes 496Viewing Design Notes 498

Moving Your Site to the Internet 499

Setting Site File Preferences 500 New!

Managing Site Files with the Files Panel 502Transferring Files 504

22

21

20

Page 17: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

xvi

c

Comparing Local and Remote Files 506Checking Site Files In and Out 508Managing Site Files Versions with Subversion 510Working with Business Catalyst Site Files 512 New!

Synchronizing Site Files 514Cloaking and Uncloaking Files 516

Creating Mobile Applications 517

Using jQuery Mobile 518 New!

Creating a Mobile App 520 New!

Inserting jQuery Mobile Components 522 New!

Using jQuery Mobile Swatches 524 New!

Using Media Queries 526 New5.5

Previewing a Mobile App 528 New5.5

Changing the Orientation for a Mobile App 530 New5.5

Saving a Mobile App 531 New5.5

Packaging a Mobile App 532 New!

Automating Dreamweaver 535

Using the History Panel 536Undoing and Redoing History Steps 537Replaying History Steps 538Copying History Steps Between Documents 539Saving History Steps as Commands 540Using and Managing History Commands 542Recording Commands for Temporary Use 544Setting History Panel Preferences 545Using Advanced Find and Replace for Text 546Using Advanced Find and Replace for Tags 548Creating and Using a Search Query 550

New Features 551 New!

Adobe Certification 555Adobe Certified Expert (ACE) 555Adobe Certified Associate (ACA) 558

Index 561

24

23

Page 18: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

xvii

Introduction

Welcome to Adobe Dreamweaver CS6 on Demand, a visualquick reference book that shows you how to work efficientlywith Dreamweaver CS6. This book provides complete cover-age of basic to advanced Dreamweaver skills.

How This Book WorksYou don’t have to read this book in any particular order.We’ve designed the book so that you can jump in, get theinformation you need, and jump out. However, the book doesfollow a logical progression from simple tasks to more com-plex ones. Each task is presented on no more than two facingpages, which lets you focus on a single task without havingto turn the page. To find the information that you need, justlook up the task in the table of contents or index, and turn tothe page listed. Read the task introduction, follow the step-by-step instructions in the left column along with screen illus-trations in the right column, and you’re done.

What’s NewIf you’re searching for what’s new in Dreamweaver CS6, justlook for the icon: New!. For Dreamweaver CS5.5, look for theicon: New5.5. The new icon appears in the table of contents and throughout this book so you can quickly andeasily identify a new or improved feature in DreamweaverCS6. A complete description of each new feature appears inthe New Features guide in the back of this book.

Keyboard ShortcutsMost menu commands have a keyboard equivalent, such asCtrl+P (Win) or A+P (Mac), as a quicker alternative to usingthe mouse. A complete list of keyboard shortcuts is availableon the web at www.perspection.com.

How You’ll Learn

How This Book Works

What’s New

Keyboard Shortcuts

Step-by-Step Instructions

Real World Examples

Workshops

Adobe Certification

Get More on the Web

Page 19: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

xviii

Step-by-StepInstructionsThis book provides concise step-by-step instructions that show you“how” to accomplish a task. Eachset of instructions includes illus-trations that directly correspond tothe easy-to-read steps. Alsoincluded in the text are time-savers, tables, and sidebars tohelp you work more efficiently orto teach you more in-depth infor-mation. A “Did You Know?” pro-vides tips and techniques to helpyou work smarter, while a “SeeAlso” leads you to other parts ofthe book containing related infor-mation about the task.

Real World ExamplesThis book uses real world exam-ple files to give you a context inwhich to use the task. By usingthe example files, you won’t wastetime looking for or creating sam-ple files. You get a start file and aresult file, so you can compareyour work. Not every topic needsan example file, such as changingoptions, so we provide a completelist of the example files usedthroughout the book. The examplefiles that you need for projecttasks along with a complete filelist are available on the web atwww.perspection.com.

Real worldexamples helpyou apply whatyou’ve learnedto other tasks.

Illustrationsmatch thenumberedsteps.

Numberedsteps guideyou througheach task.

Did You Know? alertsyou to tips, techniquesand related information.

See Also points you torelated information inthe book.

Easy-to-followintroductionsfocus on asingle concept.

Page 20: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

The Workshopswalk you throughin-depth projectsto help you putDreamweaver towork.

Introduction xix

WorkshopsThis book shows you how to puttogether the individual step-by-step tasks into in-depth projectswith the Workshop. You start eachproject with a sample file, workthrough the steps, and then com-pare your results with a projectresults file at the end. The Work-shop projects and associated filesare available on the web atwww.perspection.com or atqueondemand.com.

Adobe CertificationThis book prepares you for theAdobe Certified Expert (ACE) andAdobe Certified Associate (ACA)exams for Adobe DreamweaverCS6. Each Adobe certificationexam has a set of objectives,which are organized into broaderskill sets. To prepare for a certifica-tion exam, you should review and perform each task identifiedwith an ACE or ACA objective toconfirm that you can meet therequirements for the exam. Infor-mation about the ACE and ACAprograms are available in the backof this book. The ACE and ACAobjectives and the specific pagesthat cover them are available onthe web at www.perspection.comor at queondemand.com.

Page 21: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

xx

Get More on the WebIn addition to the information inthis book, you can also get moreinformation on the web to helpyou get up to speed faster withDreamweaver CS6. Some of theinformation includes:

Transition Helpers◆ Only New Features.

Download and print the newfeature tasks as a quick andeasy guide.

Productivity Tools◆ Keyboard Shortcuts.

Download a list of keyboardshortcuts to learn faster waysto get the job done.

More Content◆ Photographs. Download

photographs and othergraphics to use in yourDreamweaver documents.

◆ More Content. Downloadnew content developed afterpublication.

You can access these additionalresources on the web atwww.perspection.com.

Additionalcontentis availableon the web.

Additionalcontentis availableon the web.

Page 22: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

14

14What You’ll Do

309

Creating Forms

Introduction

Forms are all around us… You fill out forms to get your dri-ver's license, apply for a job; even to get married. A simpledefinition of a form would be some method for extractinginformation on a particular subject. For example, to fill out ajob application form, you would have to enter your pertinentinformation on who you are (name, address), recent jobs,why you're experienced enough to apply for the job, andgovernment stuff, like your social security number. An evensimpler definition would be to say that forms collect informa-tion… it's how you collect that information that makes all thedifference.

For example, you might design your form on paper, andthe person filling out the form is required to write the infor-mation down with a pen or pencil. The information is col-lected by another person, and along with other forms,compiled (by hand) into a final readable product. Not veryefficient; however, that's the way it was done, many longyears ago.

Today forms are filled out on a computer screen; the datais validated and compiled into a readable final product, alongwith relevant statistics and averages. What I'm describing iscreating electronic forms, designed, implemented, and fin-ished, all with the help of Adobe Dreamweaver.

Adobe Dreamweaver simplifies the process of creatingand implementing forms of any size and complexity. In thischapter you learn how to create basic forms, and populatethe forms with all the goodies, such as: check boxes, radiobuttons, text input fields; even drop-down menus.

Once a form is created, it can deposit that informationinto an appended database, where other statistical applica-tions can massage the data into any structure desired by thefinal user.

What You’ll Do

Understand Forms

Create a Form

Insert Form Objects

Modify Text Fields and Text Areas

Modify Radio Buttons and Check Boxes

Modify Lists and Menus

Modify Buttons

Insert an Image Button

Make Form Objects Dynamic

Use Tables to Control Forms

Validate Forms

Create and Edit a Jump Menu

View Example Code for Forms

Page 23: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

310 Chapter 14

As mentioned in the previous section, formsare all about the collection and eventual pro-cessing of information. Considering the infor-mation-based society that we live and workin, without forms the entire world wouldprobably fall apart in a matter of days. Well,maybe that's a bit exaggerated; however,forms collect information, information drivesour lives, and Dreamweaver makes the cre-ation of those forms a virtual snap.

Beyond DreamweaverIt’s important to understand that althoughDreamweaver will make the overall creationof a form easy (buttons, check boxes, inputfields, etc), it does not include the backendtools that make the form functional. For thatyou will need to install a form handler onyour server. In many cases someone in the ITdepartment performs this function.Understand that until the form handler isinstalled, your visitors will not be able to sendyou any data; no matter how many times theyclick the Submit button.

While the scope of the book is not to teachyou how to write form handler code, there aremany sites that offer free form-handlerscripts. These sites typically provide scripts forcollecting simple and predictable form data;for more complex scripts the services of anengineer might be required.

Form ElementsForms can be populated with any number ofelements. For example, you could create asimple bio form that asks for information suchas name, address, phone number, sex, age,social security number, etc. Because of all thisinformation, it's a good idea to sketch out the

general look and feel of the form on a pieceof paper, and then use that as a visual guideto the creation of the form in Dreamweaver.When you create an interactive field,Dreamweaver inserts the code necessary todisplay the field in the browser.

Dynamic Form ElementsA dynamic form element is a form object thatgets its initial value by the web server wherethe web site is stored. When a visitor opens aform page in a browser, the dynamic formobjects get information directly from the webserver before the page appears on the screen.When form objects are dynamic, it makesupdating a snap. In order to use dynamicform objects, you need to have a data sourceset up and available on your web server.

Form ValidationOnce the various form elements are ironedout, you can look at the possibility of validat-ing some of the fields. For example, it mightbe difficult to create a validation for a namefield; however, you at least check to see thatthe field is not blank. In addition, you couldcheck to see if all zip code fields contain fivenumbers and not alphabetic characters.Options that require specific answers, such assex (male/female) could be placed as a pop-up with the correct choices, and other optionscould be designed using check boxes or radiobuttons. In most cases, using check boxesallows the user to choose more than oneoption (check all that apply), and radio buttontypically allow for a single choice from agroup (choose only one). When you chooseform validation, Dreamweaver creates a scriptthat instructs the browser how to handle theinput.

Understanding Forms

Page 24: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Chapter 14 Creating Forms 311

Forms tab with form related buttons

Form elements

Page 25: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

312 Chapter 14

Just because Dreamweaver makes the initial creation of the form easyfor you, it doesn't mean that you shouldn't think about its construction.One of the rules in creating forms is that you're designing the form forthe person who is filling it out… not for you. The form should be as sim-plistic as possible with easy to understand instructions. When theymake a mistake (not filling in a field), there should be a way to tell thatperson a mistake was made, and what to do to correct it. Studies showthat the more difficult the form, the less likely that people are going tospend the time to fill it out. There are two stages in the creation of aform: The initial insertion of the form, and then populating the form withtext and form objects.

Creating a Form

Create a Form

Create a new HTML document, oropen an existing one.

Click to place the insertion pointwhere you want to insert a form.

Insert the form using one of thefollowing options:

◆ Click the Forms tab on theInsert panel, and then click theForm button.

◆ Click the Insert menu, point toForm, and then click Form.

An empty form appears with adotted red outline.

TROUBLE? If you don't see theoutline, click the View menu, pointto Visual Aids, and then clickInvisible Elements.

Open the Properties panel.

Click the red form outline to selectthe form.

Type a name to identify the formfor reference purposes with ascripting language.

6

5

4

3

2

1

4

5

6

21

8

3

Page 26: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Chapter 14 Creating Forms 313

Enter the path to the page or scriptthat processes the form data, orclick the Browse For File button toselect a file (if you don't have thisinformation, you can add it later).

Click the Method list arrow, andthen select one of the followingoptions:

◆ Default. Uses the browser'sdefault setting to send the formdata to the server. Typically thedefault is the GET method.

◆ GET. Appends the value to theURL requesting the page.

◆ POST. Embeds the form data inthe HTTP request.

Insert the form objects you wantand specify the information in theInput Tag Accessibility Attributesdialog box. When you create formobjects, follow these guidelines:

◆ Unique Names. Use a uniquename that identifies the objectfor scripting purposes. Avoidusing spaces or specialcharacters.

◆ Layout. Use line and paragraphbreaks, formatted text, andtables to design the formlayout.

9

8

7

9

Form with text elementSee Also

See “Inserting Form Objects” on page314 for information on inserting formobjects.

Starting a Form from a Sample

Instead of creating a form from scratch, you can start a form from asample, and then make the changes you want to suit your own needs.Click the File menu, click New, click the Page From Sample category,click Starter Page (Basic), click the sample page you want, such asSurvey, Multiple Choice or Register (Basic), and then click Create.

For Your Information

Page 27: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

314 Chapter 14

Inserting Form Objects

Insert Form Objects

Open a page that contains a form,or create a new document andinsert a form.

Click to place the insertion point towhere you want to insert a formobject.

Click the Forms tab on the Insertpanel, or click the Insert menu,point to Form, and then select fromthe following commonly used formobjects:

◆ Text Field. Select to create atext field that consists of oneline or multiple lines. Inaddition, text fields are used tocreate a password field thathides the text the user enters.

◆ Text Area. Select to create alarge text area that iscommonly used by a visitor toenter large amounts of data; forexample, a comment field.

◆ Button. Select to create abutton object. Buttons are usedto submit form data to theserver or to reset the form.Standard form buttons aretypically labeled Submit, Reset,or Send. You can also assignother processing tasks thatyou've defined in a script.

3

2

1

After you create a form, you can starting inserting form objects. Formobjects are the individual elements—such as text field, text area, but-ton, check box, radio button, or menu—that make up the form and visi-tors fill out. The form objects allow you to create a form that makes iteasy for visitors to use, yet still provide you with the important informa-tion you need. Each form object is designed to gather a specific type ofinformation. For example, if you have a list of categories and you canselect more than one category, you should use the check box formobject. If you can only select one category, you should use the radiobutton form object instead.

1

2

3

Page 28: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Chapter 14 Creating Forms 315

◆ Checkbox. Select to let usersselect more than one optionfrom a set of options.

◆ Radio Button. Select to letusers select only one choicefrom a set of options. Radiobuttons are typically used ingroups.

◆ List/Menu. Select to let usersselect one or more items from a list.

In the Input Tag AccessibilityAttributes dialog box, specify thefollowing options:

◆ ID. Enter a unique ID for theform object.

◆ Label. Enter a label for the formobject.

◆ Style. Select a style for theform object.

◆ Position. Select a position forthe label in relation to the formobject.

◆ Access Key. Enter a keyboardequivalent (single letter) in theAccess Key text box. Forexample, if you entered theletter N into the field, pressingAlt+N (Win) or Control+N (Mac)in the browser automaticallyselects that field.

◆ Tab Index. Enter a numericalvalue for the tab order of theform object in the Tab Indextext box. For example, if youentered the number 3 into thefield, pressing the tab key threetimes would cause the field tobe selected.

Click OK.5

4

5

4

Form

Page 29: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

316 Chapter 14

A text field consists of one line or multiple lines used to enter small dis-tinct amounts of data or information, such as your name or address.You can also use a text field to create a password field that hides thetext the user enters. A text area is a large text field commonly used toenter large amounts of data or information, such as comments. Afteryou create a text field or text area, you can use the Properties panel toset or change options for the form objects.

Modifying Text Fieldsand Text Areas

Work with Text Field and TextArea Properties

Select a text input field or textarea within a form document.

Open the Properties panel.

Select from the following text fieldor text area options:

◆ Char Width. Enter the maximumnumber of characters that canbe displayed in the field.

◆ Max Chars. Enter the maximumnumber of characters that canbe entered in the field forsingle-line text fields.

◆ Num Lines. Enter the height ofthe field for multiple-line textfields.

◆ Wrap. Determines how theuser's input will be displayedwhen the user enters moreinformation than can bedisplayed within the definedtext area.

◆ Off. Prevents text fromwrapping to the next line.

◆ Virtual. Sets word wrap inthe text area.

◆ Physical. Sets word wrap inthe text area, as well as tothe data when it issubmitted for processing.

3

2

1

2

1

3 Text field

Page 30: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Chapter 14 Creating Forms 317

◆ Type. Designates the field as asingle-line, multiple-line, orpassword field.

◆ Single-line. Selecting tocause the Char Width andMax Chars settings to mapto a single line with definedboundaries.

◆ Password. Select to createa password field(information typed into thefield appears as asterisks ordots).

◆ Multi-line. Select to createa multi-line field.

NOTE The default for text areafields is multi-line.

◆ Init Value. Enter an initial valuethat displays when the field firstloads.

◆ Class. Click to apply CSS rulesto the object directly or througha CSS Style sheet.

3

Text area selected

Text area

Page 31: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

318 Chapter 14

Modifying RadioButtons and CheckBoxes

Work with Radio Button andCheckbox Properties

Select a radio button or checkboxwithin a form document.

Open the Properties panel.

Select from the following radiobutton options:

◆ Radio Button/Checkbox. Entera name for the Radio Button orCheckbox object.

NOTE If the name of a group ofradio buttons is the same, then theuser will only be able to select onebutton (i.e. male or female). Thename cannot contain spaces orspecial characters.

NOTE Unlike radio buttons,every checkbox must have aunique name.

◆ Checked Value. Enter in a valueto be sent to the server whenthe button is selected. Forexample, male or female.

◆ Initial State. Select whether tohave the button selected or notwhen the form first loads.

◆ Class. Click to apply CSS rulesto the object directly or througha CSS Style Sheet.

3

2

1

Radio buttons and check boxes allow you to create options for users toselect. A radio button allows a user to select only one choice from aset of options, while a check box allows a user to select more than oneoption from a set of options. Radio buttons are typically used in groups.Both form objects are very often used when you want to create a sur-vey. After you create a radio button or check box, you can use theProperties panel to set or change options for the form objects.

2

1

3 Radio button

3 Checkbox

Page 32: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Chapter 14 Creating Forms 319

Modifying Lists andMenus

Work with List/Menu Properties

Select a list/menu field within aform document.

Open the Properties panel.

Select from the following list/menuoptions:

◆ List/Menu. Enter a unique namefor the menu.

◆ Menu. Select to have the menudrop down when clicked.

◆ List. Select to display ascrollable list of items whenclicked.

◆ Height. Enter a value todetermine the number of itemsdisplayed in the menu (List typeonly).

◆ Selections. Select to allow theuser to select multiple itemsfrom the list (List type only).

◆ List Values. Click to add itemsto the menu.

◆ Class. Click to apply CSS rulesto the object directly or througha CSS Style Sheet.

◆ Initially Selected. Select fromthe available items to make theitem initially selected when thebrowser loads the form.

3

2

1

Lists and menus perform similar tasks; each allows you to select anitem from a list of related items. However, there are some differences.A list allows you to scroll through the items as well as select multipleitems, while a menu doesn’t. When you select an item from a list ormenu, you can execute an action using a script or behavior. After youcreate a list or menu, you can use the Properties panel to set orchange options for the form objects.

2

1

3

Use to add itemsto the menu

Click to add itemsto the menu

Click to selectinitial menu

selection

Page 33: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

320 Chapter 14

Modifying Buttons

Work with Button Properties

Select a button field within a formdocument.

Open the Properties panel.

Select from the following buttonoptions:

◆ Label. Use to add a label nextto a text field, check box, orradio button option. Click nextto the object, and then type thelabel.

◆ Value. Enter the name of thebutton (appears directly on thebutton).

◆ Action. Determines whathappens when the button isclicked.

◆ Submit Form. Select tosubmit the form data forprocessing when the buttonis clicked.

◆ Reset Form. Select to clearthe contents of the formwhen the button is clicked.

◆ None. Select if you want toadd a JavaScript behaviorfor the button.

◆ Class. Click to apply CSS rulesto the object directly or througha CSS Style Sheet.

3

2

1

Buttons are used to execute an action. Form buttons are generally usedto submit form data to the server or to reset the form. Standard formbuttons are typically labeled Submit, Reset, or Send. In addition to thestandard form buttons, you can assign other processing tasks thatyou've defined in a script or behavior to create a custom button. Afteryou create a button, you can use the Properties panel to set or changeoptions for the form objects.

2 3

1

Page 34: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Chapter 14 Creating Forms 321

Inserting an Image Button

Insert an Image Button

Create a new HTML document, oropen an existing page.

Click to place the insertion pointwhere you want to insert an imagebutton.

Insert the image using one of thefollowing options:

◆ Click the Forms tab on theInsert panel, and then click theImage Field button.

◆ Click the Insert menu, point toForm, and then click ImageField.

Locate and select the image youwant to use as a button.

Click OK.

In the Properties panel, selectfrom the following options:

◆ Image Field. Enter a uniquename for the image.

◆ Src. Enter the path and namefor the image or click theBrowse For File button toselect the image file.

◆ Alt. Enter a description of theimage.

◆ Align. Click to select analignment option.

◆ Edit Image. Click to edit theimage in your default editor.

◆ Class. Click to apply CSS rulesto the object directly or througha CSS Style Sheet.

6

5

4

3

2

1

Instead of using one of the built-in buttons provided by Dreamweaver,you can insert an image and use it as a button. This allows you to cre-ate a custom look for your form, yet still provide the functionality youwant. After you insert an Image button, you can use the Propertiespanel to set or change options for the form object.

6

21 3

Page 35: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

322 Chapter 14

Instead of setting static form options inDreamweaver, you can set form optionsdynamically (on the fly) from your web server,known as a dynamic form object. For exam-ple, you can dynamically set a form menu orlist menu with entries from a database, dis-play content in text fields when viewed in abrowser, or preset a radio button or check boxwhen viewed in a browser.

When a page with a dynamic form objectis displayed from a web server, the initialstate is determined by the server. Makingform objects dynamic makes updating andmaintaining a web site much easier. Insteadof manually changing a menu item, you cansimply change an entry in a database tablewhere the information is stored.

In order to use dynamic form objects, youneed to have a data source set up, such as aMySQL database, and available on your webserver. The set up and connection of a data

source is outside the scope of this book, soyou should see your ISP or web administratorfor more details.

Make Form Objects Dynamic

Select the form object you want to makedynamic within a form document.

Open the Properties panel.

Click the Dynamic button or click theLighting Bolt icon.

Select the options you want to make theform object dynamic; the options varydepending on the form object.

◆ Select an existing data source, or clickthe Plus (+) button to define a newdata source.

Click OK.5

4

3

2

1

Making Form Objects Dynamic

Page 36: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Chapter 14 Creating Forms 323

When you create a table, it's a simple matter to add form elements on aline-by-line basis. However, in many cases this simplistic method maynot suit your particular form layout. In that case, it's tables to the res-cue. A smart form designer can use a table within the form (just like instandard design), to control the look and positioning of all the form ele-ments. Once the table is inserted into the form, it's a simple matter touse the individual table cells to insert the various elements (for moreinformation on the creation of a table, turn to Chapter 8). The onlyrequirement for the table is that it must be placed within the red dottedlines defining the form.

Using Tables to Control Forms

Control the Form with Tables

Create a new document or openan existing page.

Click to place the insertion point towhere you want to insert a form.

Insert the form using one of thefollowing options:

◆ Click the Forms tab on theInsert panel, and then click theForm button.

◆ Click the Insert menu, point toForm, and then click Form.

An empty form appears with adotted red outline.

Select the form.

Click the Insert menu, click Table,select the table options that youwant, and then click OK.

Click into an individual cell.

Click the Forms tab on the Insertpanel, or click the Insert menu,point to Form, and then select fromthe available form objects.

The table cells control theplacement and design of the form.

7

6

5

4

3

2

1 5

2 Form in a table

1 4 3 7

Page 37: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

324 Chapter 14

The Validate Form action checks the contents of specified text fields toensure that the user has entered the correct type of data. You canattach this action to individual text fields using an onBlur event to vali-date the fields as the user is filling out the form, or attach it to the formwith the onClick event to evaluate several text fields at once when theuser clicks the Submit button. Attaching this action to a form preventsthe form from being submitted to the server if any of the specified textfields contains invalid data. In addition, Dreamweaver can addJavaScript code that checks the contents of specified text fields toensure that the user has entered the correct type of data.

Validating Forms

Validate HTML Form Data

Open a form document, or create anew form document.

IMPORTANT The formdocument must contain at leastone text field and a Submit button.In addition, all text fields musthave unique names.

Select the Submit button insidethe form that you want to validate.

Click the Window menu, and thenclick Behaviors to display theBehaviors panel.

Click the Add Behavior button (thePlus (+) sign), and then clickValidate Form.

Select the form input fields one ata time, and then validate the formusing the following options:

◆ Required. Select to make theform object required.

◆ Anything. Accepts any inputentered by the user.

◆ Number. Restricts input tonumeric.

◆ Email address. Looks for an e-mail address with the @ sign.

◆ Number from. Enables you toenter a minimum and maximumrange for numeric values.

5

4

3

2

1

2

1

4

3Add Behaviorbutton

Page 38: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Chapter 14 Creating Forms 325

Click OK to add the validationinformation (in script) to the HTMLform document.

Click the Action button in theBehaviors panel, and then selectone of the following options:

◆ OnClick. Select if you arevalidating multiple fields whenthe user submits the form.

◆ OnBlur. Select if you arevalidating individual fields.

Click the File menu, point toPreview In Browser, and thencheck the current validationactions.

8

7

6

7

5

6

Page 39: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

326 Chapter 14

Most web sites employ buttons to helps the visitor navigate through thevarious pages; however, it's possible to create a jump menu, using asimple form element. A jump menu utilizes a form object to create a listof menu options. When the visitor clicks on the list, a drop-down menudisplays a listing of all the available page options. Displaying a listing ofall available page options within a single drop-down menu is a creativeuse of form objects that makes navigation through a complex site mucheasier for your visitors. After you create a jump menu, you can makechanges to it as needed. You can add, delete, rename or change theorder of items in the menu. In addition, you can modify the file an itemlinks to. If you want to change the location in which a linked file opens,or to add or change a menu selection prompt, you need to apply theJump Menu behavior from the Behaviors panel.

Creating and Editing a Jump Menu

Create a Jump Menu

Create a new web page or Openthe web page where you want toinsert a jump menu.

Click to place the insertion point towhere you want to insert a jumpmenu.

NOTE Dreamweaver inserts aform at the insertion point (if youhaven't already created one).

Click the Forms tab on the Insertpanel, or click the Insert menu,point to Forms, and then clickJump Menu.

Create the jump menu using thefollowing options:

◆ Menu Items. Click the Plus (+)sign to add more "unnamed"menu items to the list. Click theMinus (-) sign to remove"unnamed” items from the list.Use the up and down arrowsbuttons to move selected itemswithin the list.

◆ Text. Select an "unnamed"menu item in the Menu Itemsbox, and then enter a name inthe text field. Continueselecting "unnamed" items untilall have been properly named.

4

3

2

11 2 Jump menu 3

Page 40: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Chapter 14 Creating Forms 327

◆ When Selected, Go To URL.Select a menu item in the MenuItems box, and then enter thepath and filename of the pageyou want opened for theselected item or click Browseto select the file.

◆ Open URLs In. If you're notworking within a frameset, youhave only one option: MainWindow.

◆ Menu ID. Enter a unique namefor the menu in the input field(optional).

◆ Insert Go Button After Menu.Select to add a button thatactivates the jump menu.

◆ Select First Item After URLChange. Select to reset themenu selection to the top itemafter each jump.

Click OK.

Edit a Jump Menu

Open the web page where youwant to edit a jump menu.

Open the Properties panel.

Select a jump menu object.

Click the List Values button.

Make the changes you want.

◆ Click the Plus (+) sign to addmore "unnamed" menu items tothe list. Click the Minus (-) signto remove "unnamed: itemsfrom the list. Use the up anddown arrows buttons to moveselected items within the list.

Click OK.6

5

4

3

2

1

5

5

4

2

4

6

5

Page 41: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

328 Chapter 14

The <form></form> TagsThe first step in the creation of a form is toplace the HTML <form></form> tags on yourpage. All items defining the form must beplaced within those tags.

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=ISO-8859-1" />

<title>Untitled Document</title>

</head>

<body>

<form id="form1" name="form1" method="post"action="">

</form>

</body>

</html>

Form ElementsThe following is an example of the HTMLcode necessary to display a text input field fora person's name, address, city, state, and zipcode.

<body>

<form id="form1" name="form1" method="post"action="">

<label>Name

<input type="text" name="textfield" />

</label>

<label>Address

<input type="text" name="textfield2" />

</label>

<label>City

<input type="text" name="textfield3" />

</label>

<label>State

<input type="text" name="textfield4" />

</label>

<label>Zip

<input type="text" name="textfield5" />

</label>

</form>

</body>

Form ValidationThe following is an example of a form valida-tion script that validates an email addressinput field:

function MM_validateForm() { //v4.0var

i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;

for (i=0; i<(args.length-2); i+=3) { test=args[i+2];val=MM_findObj(args[i]);

if (val) { nm=val.name; if ((val=val.value)!="") {if (test.indexOf('isEmail')!=-1) {

p=val.indexOf('@');if (p<1 || p==(val.length-1)) errors+='- '+nm+'

must contain an e-mail address.\n';} else if (test!='R') { num = parseFloat(val);

if (isNaN(val)) errors+='- '+nm+' must containa number.\n';

if (test.indexOf('inRange') != -1) {p=test.indexOf(':');

min=test.substring(8,p); max=test.sub-string(p+1);

if (num<min || max<num) errors+='- '+nm+'must contain a number between '+min+' and'+max+'.\n';

} } } else if (test.charAt(0) == 'R') errors += '-'+nm+' is required.\n'; }

} if (errors) alert('The following error(s)occurred:\n'+errors);

document.MM_returnValue = (errors == '');

Viewing Example Code for Forms

Page 42: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

561

Index

Aabbreviations, defining, 125absolute paths, 163absolute positioning of AP elements, 248accessibility, 9, 459

adding accessibility, 477preferences, setting, 476Section 508, accessibility issue, 9Remote Info options, 488-491

access keysfor form objects, 315for links, 167

acronyms, defining, 125actions. See behaviors; events; snippetsActionScript files, 79activating Dreamweaver, 15active link colors, 83Active Server Pages (ASP), 68, 79, 382, 492

showing/hiding tags, 89Active Server Plus Pages files, 79ActiveX controls, using, 302-303Add Behavior button, 361addpro Web site, 20Adobe. See also Fireworks, Flash;

Illustrator; Photoshopactivating Dreamweaver, 15downloading applications, 13help resources, 39manuals, 332

Adobe Bridge, 30-31Adobe BrowserLab, 36-37, 468-469Adobe ColdFusion. See CFML, ColdFusionAdobe Contribute, 485Adobe CSS Advisor Web site, 236advanced find and replace. See

finding/replacing

Advanced Site Setup Web site, 483setting site definitions, 484-485

advertising banners, 136AIF files, linking or embedding, 298Ajax framework help, 39alert dialog box, text, displaying, 372alias of application, creating, 14alignment. See also tables

for ActiveX objects, 303AP elements, 255CSS properties, setting, 222elements

anchor points, showing/hiding, 89AP elements, 255

for Flash/Shockwave movies, 295forms, image buttons in, 321with grids and guides, 56of horizontal rules, 111images, aligning, 150for Java applets, 301option for, 150of paragraph text, 103

alternate contentActiveX objects, images for, 303for Java applets, 301text, using, 477

<alt> tags, 479anchors. See named anchorsAndroid

packaging for, 518-519, 532-533SDK, 532-533

Apache server, 68, 382, 434AP elements

aligning, 255borders, showing/hiding, 246changing CSS-P positioning, 248dragging, 378-379

Page 43: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

562

AP elements (continued)for image map hotspots, 174introduction to, 244manually creating, 245moving, 255naming, 250nesting, 246outlines, 87overlapping, preventing, 254preferences, setting, 247previewing positioning, 253properties, modifying, 252-253resizing, 255rollovers with, 256-257Show/Hide Elements action, 358showing/hiding anchor points for, 89stacking order, changing, 254-255styles, creating, 249tables, converting to, 258-259working with, 254-255z-index, applying, 251

APK file format, 532-533appearance page properties, setting, 82appear/fade, 368

spry effects, adding, 404Apple iOS-based device

packaging for, 518-519, 532-533Application bar, 16, 16-17, 44application server, 68, 382Apply Source Formatting option, 353arrow keys in Code view, 541ASP file tags, inserting, 347ASP.NET file tags, inserting, 347ASPX format, 29assembling site, 9assets, 416. See also color assets; libraries;

templates; URL assetsfavorite assets, working with, 422-423Favorites folder, grouping assets in, 423inserting, 418modifying assets, 419multiple assets, selecting, 419previewing, 418sorting, 422

Assets paneldocuments from templates, creating, 24images, inserting, 136

opening templates from, 438resizing, 422working with, 417

attachments. See also templatesexternal style sheet, attaching, 214

attributes. See also CSS (Cascading StyleSheets)

legal characters in values, 355audience, 3, 8

demographic studies, 3, 8audio files, linking or embedding, 298-299autoplay. See Flashautostretch. See tablesAVD app information, 532-533AVI files, linking or embedding, 298

BBackground File Activity dialog box, 505backgrounds. See also CSS (Cascading

Style Sheets); Flash; tablesof AP elements, 247properties, setting, 82

balanced code, checking for, 470-471bandwidth, 482base tag, 340Basic Site Definition Wizard, 483behaviors, 357-358. See also events

changing event for behavior, 365deleting, 367downloading third-party behaviors, 362editing, 374-365effects, adding, 368-369entire page, applying to, 362-363introduction to, 357-359multiple behavior order, changing, 366page elements, applying to, 360-361parameters, editing, 364

Behaviors panel, 360-361Benguiat font, 91Bindings panel, 382Blackberry

packaging for, 518-519, 532-533blank Web page, creating, 21blinds, 368

spry effects, adding, 404block snippets. See snippets<body> tag, 362-363

Page 44: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 563

boldfacingcharacters in text, 104with Copy and Paste Special, 101copying/pasting, setting for, 102for headings, 84for links, 83table text, 191

BOM (Byte Order Mark), selecting, 63Box model, 253borders. See also CSS (Cascading Style

Sheets); Flash; frames and framesets;tables

AP element borders, showing/hiding, 246

Change Property behavior for, 376braces < >, 330

balance, checking for, 470-471Coding toolbar options, 342

brightness of images, 154broken links, finding and fixing, 460-462browser compatibility, 466-467

CSS browser compatibility, checking for,236-237

testing, 361Browser Compatibility Check (BCC),

236-237, 466-467Browser Navigation, 32-33

testing link, 180-181using, 33

browsersCode view

compatibility, checking for, 466-467scripts, inserting browser-safe, 355

colors, browser-safe, 64editing list of, 37events, support for, 359independence, testing for, 459no frame support, information for

browser with, 277previewing in, 36-37relative path for new links, previewing,

164-165BrowserLab, 36-37, 468-469<b> tag, 117, 330buffers for Flash video, 297Build and test phase, 8bulleted lists. See ordered/unordered listsBusiness Catalyst

download and install, 512extension, 512panel, 512-513work with, site, 513

Ccache files

for file/asset information, 487for link information, 178-179

Call JavaScript behavior, 381captions. See also Flash elements

table captions, entering, 187cascading, in terms of CSS, 205, 232cascading Document window, 41case sensitivity

of file names, 27finding/replacing with, 123, 547, 549of links, 487for tag find and replace, 549for text find and replace, 547

CDN (Content Delivery Network). SeejQuery Mobile

cells. See tablescentering

AP elements, centering tables with, 258paragraph text, 103selecting options for, 61

Certificate Authorities, 488-489CFML files, 29

help, 39tags, inserting, 347

Change Link Sitewide command, 182Change Property behavior, 376-377

with text, 371Change Property Restore behavior, 376

with text, 371characters, 355. See also case sensitivity

CSS character style, applying, 213formatting, 104-105forms, options for, 316other characters, inserting, 96-97special characters, inserting, 96

checkboxes. See formschecking in/checking out site files, 508-509Check Plug-in behavior, 306-307, 358

Web page, applying to, 363

Page 45: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

564

class ID for ActiveX objects, 303cleaning up. See HTML (Hypertext Markup

Language)click and drag for text, 98click release shift click for text, 98client-side image maps. See image mapscloaking/uncloaking, 484, 516

defining site cloaking, 494closing

panels, 46Web pages, 41

closing tags, 330extra closing tags, deleting, 354

cloud-based service, PhoneGap BuildService, 532-533

CMS, 351code. See also HTML (Hypertext Markup

Language); libraries; snippetsfor Java applets, 301for spry effects, 405

Code Coloring, preferences, settings, 356Code Hints

popup menu, 338-339preferences, 352site specific code hints, 351

Code Inspector, 335Code Navigator, 342-343, 350coder-oriented workspace (Windows), 335Code view, 30, 31. See also browsers; Tag

inspectoraccessing, 334arrow keys in, 541assets, dragging, 418attribute values, legal characters in, 355balanced tags, checking for, 340with Code Inspector, 335Code Navigator, 342-343, 350Code View Live, 32, 336Coding toolbar, 342-343color preferences, setting, 356comments

deleting, 343inserting, 341

copying/pasting in, 341entering HTML in, 338fonts, preferences, 109format preferences, setting, 353, 352

head tags, working with, 340hint preferences, setting, 352options, setting, 337Reference panel, accessing in, 333rewriting preferences, setting, 354syntax of code, 344Tag Chooser, using, 347

Code View Live, 32, 336Coding toolbar, 44, 342-343ColdFusion. See also CFML files

file formats, 79help, 39introduction, 68, 382showing/hiding tags, 89

collapsing. See expanding/collapsingcolor assets

displaying, 417new color asset, adding, 420text, applying color to, 421

Color Cubes palette, 64Color dialog box, 64color picker, 64-65colors. See also backgrounds; color assets;

Flash; highlighting; tables; textof AP elements, 247code color preference, setting, 356frame border colors, modifying, 286for headings, 84for image placeholders, 158-159images, optimizing, 148-149for links, 83palettes, selecting, 64table colors, setting, 199Web-safe colors, 64working with, 64-65

Color Sliders, 65Color Wheel button, 64columns and rows. See also CSS

(Cascading Style Sheets); tablesFile View Columns options, 495

commands, 17managing History commands, 543recording commands, 544running History commands, 542saving History panel steps as, 540-541temporary use, recording/playing com-

mands for, 544

Page 46: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 565

Commands menu, Apply Source Formattingoption, 353

comments. See also Code view; HTML(Hypertext Markup Language)

Coding toolbar, removing comments in, 343

showing/hiding, 88compatibility. See also browser

compatibilityAP element compatibility, setting, 247Contribute feature and, 485

complete storyboards, 7completion of site, 2-3Component Inspector panel, 49connection speed, setting, 53containers, displaying text in, 372Continuous Tone palette, 64contrast of images, 154Contribute feature, 485Copy File As dialog box, 137copying/pasting, 100-101

code, 341Fireworks images, 142-143History panel steps between documents,

copying, 539image map hotspots, 174Photoshop images, 138-139preferences, setting, 102snippets, 413

copyrights, 9, 133cropping images, 153CSS (Cascading Style Sheets), 29, 67, 205.

See also AP elements; formsadvanced styles, 207, 233attaching external style sheet, 214attribute style, 206

creating, 210backgrounds

setting, 222styles, changing settings for, 252

bordersproperties, setting, 223styles, changing settings for, 253

breakdown of, 206browser compatibility, checking for, 236,

466-467character (inline) style, applying, 213

classes, 207for tables, 199

code formatting preferences, 238-239Coding toolbar options, 343colors for ID selector, 234with Copy and Paste Special, 101copying/pasting, setting for, 102creating Web page with CSS layout,

208-209CSS rules, 212-213

modifying existing rule, 224moving, 226-227relevant CSS rules, viewing, 232

custom CSS layouts, 209default properties, 81deleting

CSS rule, 225design-time style sheets, 241internal style, 218

design-time style sheets, using, 241disable CSS property, 219, 228embedded CSS code, formatting, 239enable CSS property, 219, 228entire style sheet, modifying, 225external styles, 207

attaching external style sheet, 214creating, 211modifying external style sheet, 215

file formats, 79fonts

for ID selector, 234setting, 222

formatting code preferences, setting,238-239

hidden content, displaying, 89hover class, 233HTML (Hypertext Markup Language)

compared, 206ID selectors

applying, 235creating, 234working with, 233

inheritance, 232Inspect, 229manually formatting CSS code, 239Multiclass selection, 216-217paragraph style, applying, 212

Page 47: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

566

CSS (continued)preferences

code formatting preferences, setting,238-239

styles preferences, setting, 240properties, setting, 222-223Properties panel, 220-221pseudo-classes, 233relevant CSS rules, viewing, 232sample pages with, 25sample style sheet, using, 215selecting, 61selector declaration, 224

name, changing, 225shorthand preferences, setting, 240showing/hiding style sheets, 241spry widgets, editing, 386styles

creating, 210-211paragraph style, applying, 212

Styles panel, using, 219tag style method, 206-207text style, creating and applying, 118-119types of styles, 207visual aids, using, 87

CSS-P (Cascading Style Sheets-Positioning),247. See also AP elements

applying styles, 250creating styles, 249manually changing, 248properties, modifying, 252-253

CSS Rule Definition dialog box, 222CSS rules. See CSS (Cascading Style

Sheets)CSS Transitions

creating, 230-231editing, 230-231removing, 230-231

Ddata files for ActiveX objects, 303Databases panel, 382dates and times, adding, 97decorative fonts, 96Default Color button, 64default images folder, 487

Define phase, 8definition lists

creating, 114modifying, 115

deleting. See also CSS (Cascading StyleSheets); tables; templates

behaviors, 367closing tags, 354columns in site, 495commands, 543favorites, 422Flash Video component, 297font families (combinations), 108frames, 283guides, 57HTML comments, 343library items, 429links, 177menu bar items, 393properties, 377remote files, 514shortcuts/shortcut sets, 58-59site files or folders, 74snippets, 413spry effects, 404-405

demographic studies, 3description tag, 340Design document, 8Design Notes, 484

columns, associating, 495enabling, 496erasing, 496linking with files, 497viewing, 498

Design phase, 8design-time style sheets, using, 241Design view, 30, 31, 334

assets, dragging, 418comments in, 341Reference panel, accessing in, 333visual aids in, 87

Device Central. See Adobe Device Centraldictionaries, selecting, 61diff tool, 506-507digital cameras. See Adobe Bridgedisable/enable CSS, 219, 228

Page 48: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 567

disabled options, 17discovery sites, 3dither for images, 148docking/undocking panels, 48documents

History panel steps between documents,copying, 539

importing/exporting data, 94-95links to Microsoft documents, 95new document preferences,

setting, 62-63paths, document-relative, 163size, displaying, 52from templates, 24untitled documents, list of, 479viewing multiple documents, 31

Document toolbar, 44Document window

cascading and tiling, 41examining, 16-17resizing, 52

double-byte inline input, allowing, 61double-clicking on text, 98downloading. See also Flash

Adobe applications, 13behaviors, 362estimated download time, displaying, 52image download size, displaying, 53images affecting time, 151snippets, 409statistics preferences, 482templates, 436

drag-and-dropassets, 418CSS rules, 227external JavaScript library items, 431

Drag AP Element behavior, 378-379Draw AP Div tool, 245Dreamweaver API reference, 39Dreamweaver Exchange Web site, 479DTD (document type), 62

selecting, 85Drupal, 351dynamic form elements, 310dynamic images, 136dynamic pages, 69dynamic text, showing/hiding, 89

Eeditable regions. See templatesediting, 412-413. See also Flash; images

Browser list, 37external JavaScript scripts, 433Fireworks images, 143jump menus, 327library items, 426-427Photoshop images, 140-141properties, 377spry widgets, 386

Edit NoFrames Content command, 277Edit Snippet button, 412Edit Tag mode, Quick Tag Editor in, 345EDML files, 79effects

behavior effects, adding, 368-369spry effects, adding and removing,

404-4058-second rule, 151elastic CSS layout, 208elements. See also AP elements; assets;

behaviors; Flash elements; forms;frames and framesets; invisible ele-ments; Show/Hide Elements behav-ior; spry widgets

accessibility, adding, 477selecting, 90

email linksadding, 168modifying, 167-168

embeddingfor ActiveX objects, 303showing/hiding embedded styles, 88sound files, 299video files, 299

empty tags, removing, 479<em> tag

allowing, 61using, 117

enabled options, 17encoding

frame encoding, changing, 284selecting, 62specifying encoding type, 85

errors on previewing Web pages, 36errors, identifying in Code view, 343

Page 49: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

568

events. See also specific eventsassociated events, 359changing event for behavior, 365specific browser, showing events

for, 361existing Web page, opening, 28exiting Dreamweaver, 42Expanded table mode, 185expander arrow, 46expanding/collapsing

Coding toolbar options, 342Files panel, 71panels, 46-47

exporting. See importing/exportingextending Dreamweaver, help with, 39extensions. See also Adobe Extension

ManagerBusiness Catalyst, 512-513CSS styles, changing settings for, 252selecting, 62

external editors. See imagesexternal JavaScript libraries

creating Javascript files, 430-431dragging JavaScript library items, 431editing scripts, 433inserting, 432

external style. See CSS (Cascading StyleSheets)

Ffade. See appear/fadefavorite assets

adding or deleting, 422Favorites folder, grouping assets in, 423nicknames, creating, 423

file formatsdifferent formats, saving files in, 78list of, 79

files and folders, 67. See also dependentfiles; extensions; Files panel; localroot folder; remote folders; testingservers

closing, 41default images folder, 487deleting, 74Design Notes, linking, 497different formats, saving files in, 78

existing file, opening, 28Flash file types, 292HTML files, 330image folder, defining, 134-135levels of folders, displaying, 70local root folders, 486setting up site folders, 69site preferences, setting, 500-501snippet folder, creating, 414SpryAssets folder, 384-385Subversion, using, 510-511templates, storing, 23transferring files to and from remote

site, 504-505types of files

changing, 67list of, 29

updating links when moving files, 60working with, 68

Files panelcreating files in, 73customizing appearance of, 484in expanded view, 71finding files in, 76-77managing files and folders in, 74-75moving files or folders in, 75new site folder, creating, 75opening files in, 72recently modified files, finding, 77refreshing, 72Subversion, using, 510-511viewing files in, 70working with, 502-503

File Synchronization, 514-515File View Columns options, 495filters for CSS properties, 223finding/replacing, 122-123, 535. See also

tagsadvanced find and replace

for tags, 548-549for text, 546-547

Files panel, files in, 76-77last search, repeating, 547queries, creating and using, 550recently modified files, 77Results panel, using, 124templates, editable regions in, 456

Page 50: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 569

Find Next command, 121Find Selection command, 121firewalls, 489

settings for, 500-501Fireworks, 2.

copying/pasting images, 142-143editing images in, 145GIF images with, 132optimizing images with, 144PNG format, 133Script files, 79

fixed CSS layout, 208fixed fonts, preferences, 109fixing broken links, 462Flash, 2.

autoplay, 297backgrounds

for movies, 295borders

for movies, 295downloading

video, 296-297editing

files, 294Flash Video component, 297movies, 294

file types, 292height

for movies, 294for video settings, 296

inserting movies, 293names

for movies, 294PNG format, 133properties of movie, changing, 294-295URLs

for video, 296video, inserting, 296-297widths in movies/videos, 296

Flash Player code, 297Flash Video files, 292flexibility of site, 459flow chart for site, 6Fluid Grid Layouts

creating, 23, 262-263deleting elements, 267inserting elements, 267

introduction 261-262moving layouts, 270preview in a browser, 271resizing layouts and margins, 268-269selecting elements, 266showing/ hiding guides, 87, 265viewing, 264

FLV format, 296-297folders. See files and foldersfonts, 91. See also CSS (Cascading Style

Sheets); Flash; stylesChange Property behavior for, 376changing text font, 104for headings, 84link font, setting, 83modifying families, 108nested font tags, combining, 473preferences, setting, 109setting font properties, 82size, modifying, 105special characters and, 96table text, 191web, 106-107

formatting. See also tablescharacters, 104-105Coding toolbar options, 343copying/pasting, setting for, 102CSS (Cascading Style Sheets) code pref-

erences, setting, 238-239images, 148multiple changes, making, 105paragraph text, 103with Paste Special, 100-101

forms, 309aligning image buttons, 321buttons, 314

image buttons, inserting, 321objects, inserting, 314working with, 320

checkboxesinserting, 315modifying, 318

creating forms, 312-313CSS rules

for buttons, 320for image buttons, 321for lists/menus, 319

Page 51: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

570

forms, CSS rules (continued)for radio buttons/checkboxes, 318for text fields/text areas, 317

dynamic elements, 310creating, 322

elements, 310dynamic form elements, 310, 322example code for, 328

example code for, 328explanation of, 310-311GET method, 313image buttons, inserting, 321Input Tag Accessibility Attributes dialog

box options, 315inserting form objects, 314-315jump menus, 326-327labels

for buttons, 320for objects, 315

layout for, 313lists/menus

inserting, 315jump menus, 326-327working with, 319

naming, 313password files, creating, 317POST method, 313radio buttons

inserting, 315modifying, 318

showing/hidingdelimiters, 89fields, 88

tables for controlling, 323text fields/text areas

inserting, 314modifying, 316-317type designations for, 317

Validate Form action, 358validating, 310

example code for, 328HTML form data, validating, 324-325Validate Form action, 358

frames and framesets, 273accessibility values, editing, 282adding

frames, 283frameset information, 279

borders, 87, 278modifying, 285properties, changing, 286-287

click and drag, creating frameset with,275

colors of borders, modifying, 286deleting frames, 283down and dirty links, creating, 290elements

frame elements, 274frameset element, 274

information for browser with no framesupport, 277

inserting framesets, 275introduction to, 273-274names

changing, 285link names, changing, 290

new file, saving frames and framesetsas, 280-281

opening Web page in, 276properties

border properties, changing, 286-287frame properties, changing, 284-285size properties, modifying, 287

quick frame links, creating, 290resizing frames, 282saving framesets, 280-281selecting framesets and, 278sizing/resizing

frames, 282frameset size properties,

modifying, 287targeted links, creating, 288-289text, displaying, 372title for frameset page, setting, 287

free association concept, 4Freedom Scientific, JAWS for Windows, 476Freemind Web site, 5FTP (File Transfer Protocol)

connection options, setting, 500-501links, 162Remote Info categories, 488-489

FTPS (File Transfer Protocol over SSL/TLS),488-489

Page 52: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 571

Ggamma of image, adjusting, 133Garamond font, 91general fonts, 108general preferences, setting, 60-61GET method for forms, 313GIF files, 29

images, 132inserting, 136-137optimizing for, 148-149tracing images in, 86, 202transparent GIFs, 258

goals of site, 2Go To URL behavior, 358

working with, 370graphics. See imagesgrids and guides. See also rulers

frame document, laying out, 274working with, 56-57

grouping/ungrouping panels, 49grow/shrink, 368

spry effect, adding, 404guides. See grids and guidesGUI (graphic user interface), 16GW Micro, Window-Eyes, 476

HHand tool, 52headers and footers, snippets for, 408headings

frame headings, changing, 284page properties, setting, 84

head tags, working with, 340height. See also Flash; tables

for ActiveX objects, 303of AP elements, 247, 249of horizontal rules, 111image height, changing, 150, 152for Java applets, 301

help, 38-39hexadecimal codes, 105hiding. See showing/hidinghierarchical storyboards, 7highlighting, 368

library item highlight color, 66, 428preferences, setting, 66

spry effects, adding, 404History panel, 535. See also commands

clearing, 536closing, 536copying steps between documents, 539defining History steps, 545description of, 536managing commands, 543number of steps, changing, 61, 129, 545opening, 536replaying steps from, 538running History commands, 542saving steps as commands, 540-541undoing/redoing, 129

multiple History steps, 537Undo/Redo slider, 536workarounds for steps not recorded, 541

home pagesetting page as, 80

horizontal rulesinserting, 111modifying, 111

Host Directory for FTP, 488hotspots. See image mapsHSB sliders, 65HTML (Hypertext Markup Language), 29, 67,

329. See also Code view; Code ViewLive; events; forms; frames andframesets; HTML5, named anchors;Quick Tag Editor; spry widgets; Taginspector

balanced code, checking for, 470-471Browser Compatibility Check

(BCC), 466-467browser-safe scripts, inserting, 355cleaning up, 472-473

Microsoft Word HTML, 474-475comments

deleting, 343inserting, 341

with Copy and Paste Special, 101copying/pasting, setting for, 102CSS (Cascading Style Sheets)

compared, 206description of, 330-331explanation of, 330-331file formats, 79head tags, working with, 340

Page 53: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

572

HTML (continued)opening Web pages with, 28properties, changing, 81reports on attributes, 478search engines, 331selecting, 61shortcuts as HTML, exporting, 59spry HTML data set, displaying, 396-397syntax of code, 344Tag Chooser, using, 347

HTML5code hints, using, 339creating new

blank, 21, 520-521sample, jQuery mobile, 25, 520-521template, 22

embedding video or audio, 299packaging for mobile app, 532-533

HTTP address for site, 487HTTP links, 162

adding, 166-167hue, 64-65hybrid CSS layout, 208

Iicons, Design Notes, 498IDs. See also CSS (Cascading Style Sheets)

for form objects, 315Illustrator, 2, 58image buttons in forms, 321image maps

creating client-side image map, 172modifying hotspots, 174server-side image maps, 172showing/hiding, 88

Image Optimization dialog box, 143images, 131. See also Adobe Bridge; back-

grounds; Fireworks; frames andframesets; Photoshop; preloadingimages; rollover images; tables

aligning, 150assets, displaying, 417brightness, changing, 154contrast, changing, 154cropping, 153default images folder, 487download size, displaying, 53

external editors, 145file type, setting, 146-147

file type preferences, setting, 146-147Fireworks images, inserting, 142-143folder, defining, 134-135formats, 132-133inserting, 136-137low source images, 151optimizing, 151, 148-149placeholder, inserting, 158-159previewing, 148-149Properties panel

modifying with, 150resizing, 152rollover images, creating, 158-157sharpness, changing, 155Swap Image behavior, 358, 374-375Swap Image Restore

behavior, 358, 374-375tracing image, inserting, 86URL to image, applying, 421Web-friendly graphics, 132-133

<i> tag, 117<img> tag, 152importing/exporting

Microsoft document data, 94-95shortcuts as HTML, exporting, 59tabular data, importing, 93table data, 192-193templates, XML data to, 457-458

Inconsistent Region Names dialog box, 451InContext Editing

adding CSS formatting, 449creating editable region, 448-449creating repeating region, 446-447deleting, 447

indentingcode, 353CSS source code options, 238for HTML code, 337for lists, 112paragraph text, 103

InDesign. See Adobe Bridgeindex.htm, 80Info bar, 229, 349

syntax error alert, in Info bar, 337, 343information-gathering, 9

Page 54: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 573

inheritance, 232Input Tag Accessibility Attributes dialog box,

315Insert HTML mode, Quick Tag Editor in, 345Insert panel or Insert bar, 44, 46, 48

objects, prompt on inserting, 60Inspect, 229Inspiration Web site, 4installing

Dreamweaver, 13Intel-based Macintosh systems, 11Internet. See browsers; remote site; Web

pages; Web sitesInternet Explorer, 36

ActiveX controls in, 302events, support for, 359, 360Web-safe colors, 64

invalid code, Coding toolbar options, 343invisible elements, 87

selecting, 90working with, 88-89

invisible maps, 87iOS-based devices (iPhone, iPod Touch,

and iPad)packaging for, 518-519, 532-533

iPhone, iPod Touch, or iPad. See iOS-baseddevices

IPA file format, 532-533IPK file format, 532-533IPv6 transfer mode, 489ISP (Internet service provider), 500italicizing

characters in text, 104with Copy and Paste Special, 101copying/pasting, setting for, 102for headings, 84for links, 83table text, 191

JJAD file format, 532-533Jakarta Tomcat server, 68, 382Japanese characters, enabling inline input

for, 61Java applets, 291

inserting, 300preferences, modifying, 301

Java files, 79JavaScript. See also AP elements; behav-

iors; external JavaScript libraries;spry widgets

attaching behaviors to links, 175Call JavaScript behavior, 381executing, 381files, 79null/script links, creating, 175rollover image name, 156, 157showing/hiding, 88

Java Server pages, 79JAWS for Windows, 476Joomla, 351JPEG/JPG files, 29

images, 132-133inserting, 136-137optimizing for, 148-149tracing images in, 86, 202

jQuery Mobilecode hints, using, 339inserting components, 522-523introduction, 518-519Mobile App

changing orientation, 530creating, 520-521packaging for Android, Apple iOS,

Blackberry, Symbian, or WebOS,532-533

previewing, 528-529saving, 531

Mobile Starter, 25, 520-521Packaging with PhoneGap, 518-519,

532-533swatches, 524-525ThemeRoller, 524-525themes, 524-525using, 518-519

JRun custom library tags, inserting, 347JSP files tags, inserting, 347jump menus, 175, 326-327

editing, 327text in, 326

justifying paragraph text, 103

Kkeyboard shortcuts. See shortcuts

Page 55: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

574

keywords, 4tags, 340

Llabels. See formslanguages for spell-checking, 127Lasso files, 79last saved version of document, reverting

to, 27launching Dreamweaver, 14-15Launch phase, 8layers. See AP elementslayouts for Fluid Grids

creating, 23, 262-263deleting elements, 267inserting elements, 267introduction 261-262moving layouts, 270preview in a browser, 271resizing layouts and margins, 268-269selecting elements, 266showing/ hiding guides, 265viewing, 264

layouts for forms, 313Layout table mode. See tablesleft alignment of paragraph text, 103libraries. See also external JavaScript

libraries; library items; tag librariesdisconnecting library item from, 425files, 79introduction to, 407, 416

library items, 416. See also externalJavaScript libraries

creating, 424deleting, 429disconnecting item from library, 425editing, 426-427filename and location, displaying, 427highlighting color preferences, setting,

66, 428list, displaying, 417planning for, 416recreating missing or deleted items, 429renaming, 429updating on page or site, 428using, 425

linear storyboards, 7

line breaksfor code, 353controlling, 110with Copy and Paste Special, 101copying/pasting, setting for, 102showing/hiding, 88

line numbersCoding toolbar options, 342for HTML code, 337

line spacing. See spacinglinks, 161. See also email links; Flash; paths

automatically updating, 178broken links, finding and fixing, 460-462cache files, creating, 178-179case-sensitive links, checking, 487deleting, 177frame links, changing, 284for image placeholders, 158-159menu links, adding, 393to Microsoft documents, 95modifying, 176named anchor, adding, 170-171null links, creating, 175opening linked pages, 180-181orphan links, 182, 461properties, setting, 83relative path for new links,

setting, 164-165relative to documents, 487script links, creating, 175sitewide changes to, 182, 462-463to sound files, 298targeted links, creating, 288-289testing, 180-181, 460-462text links, adding, 166-167types of, 162updating, 178-179

when moving files, 60link tag, 340liquid CSS layout, 208List Properties dialog box, 115lists. See also definition lists; forms;

ordered/unordered listsCSS styles, changing settings for, 253modifying, 115

Live Code View, 336color preferences, 356

Page 56: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 575

LiveDocs data base, 39Live View, 32-33

inspect, 229Multiscreen Preview panel, 34-35,

528-529testing link, 180-181

local files, 506-507Local Info, 484

defining, 486-487Local/Network options, 489-490local root folder, 67, 486

creating, 11, 19elements of site in, 18for relative path for new links, 164setting up, 69working with, 68

Locate in Site command, 76-77locked regions, color preferences for, 66Lock Guides, clearing, 57logical styles, 116login for WebDAV server, 490logos, snippets for, 408Long Description input box, 137long descriptions, using, 477looping, Flash/Shockwave movies, 295low source images, 151luminosity, 64-65

MMacintosh systems, 11

browsers on, 36case sensitivity of file names, 27color palette, 64launching Dreamweaver in, 14-15requirements for, 12

macros. See snippetsmagnification, setting, 52mailto links, 162Manage Sites dialog box, 20managing sites. See also remote site

advanced site definitions, setting, 484-485

maps. See also image maps; site mapsmind maps, creating, 4-5

marginsframe margins, changing, 285setting page margins, 82

marketing plans, creating, 479maximizing. See minimizing/maximizingmedia quieries

creating, 526-527Multiscreen Preview panel, 34-35,

528-529setting default location, 486-487using, 526-527

menus or menu bars, 17. See also formsspry menu bar widgets, using, 392-393

merged cells. See tablesmessage for Flash video, 297meta tags, 340Microsoft Excel

importing content from, 94links to document, creating, 95

Microsoft Internet Information Server (IIS),68, 382, 434

Microsoft Wordcleaning up HTML, 474-475importing content from, 94links to document, creating, 95working with, 101

MIDI files, linking or embedding, 298MindGenius Web site, 4mind maps, creating, 4-5Mindmap Web site, 4Mind tools Web site, 4minimizing/maximizing, 17. See also

zooming; Zoom toolpanels, 45

Mobile App. See jQuery MobileMobile Starters, 25, 520-521. See also

jQuery Mobilemonitors, rulers with, 55Mouse-Over region colors, 66MOV files, linking or embedding, 298movies. See also Flash; QuickTime;

Shockwaveassets, displaying, 417

movingAP elements, 255Coding toolbar options, 343CSS rules, 226-227Files panel, files or folders in, 75

MPEG files, linking or embedding, 298MP3 files, linking or embedding, 298Multiclass selection, 216-217

Page 57: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

576

multimedia. See Flash; ShockwaveMultiscreen Preview panel, 34-35

media queries, 34-35, 526-529multiple documents, viewing, 31MySQL, 339, 382, 492

Nnamed anchors

adding, 170-171links, adding, 171showing/hiding, 88

naming/renaming. See also FlashActiveX objects, names for, 303AP elements, 250case sensitivity of file names, 27class names, 207columns in site, 495commands, 543

naming/renamingCSS selector declaration, 225favorite assets, creating nickname

for, 423forms, 313Java applets, names for, 301library items, 429Local Info, site name in, 486local root folder, 68panel sets, 50-51pasting, renaming form items when, 354rollover images, 156shortcut sets, 58snippets or snippet folders, 414styles, renaming, 120templates, 439Web pages, 26workspaces, 50-51

nesting. See also tags; templatesAP elements, 246lists, 112tables, 204

Netfirms Web site, 3Netscape Navigator. See also plug-ins

AP element compatibility, setting, 247events, support for, 359, 360Web-safe colors, 64

New Document dialog box

sample file designs in, 25selecting to show, 63template designs, selecting, 24

New Library Item button, 424news links, 162new Web site, creating, 18-19nicknames for favorites assets, 423noframe element, 277

information for browser with no framesupport, 277

Non-Breaking Space command, 96null links, creating, 175numbered lists. See ordered/unordered lists

Oobjective of site, 3OLE controls, 302onBlur event, 359onClick event, 359onDblClick event, 359onError event, 359onFocus event, 359onKeyDown event, 359onKeyPress event, 359onKeyUp event, 359onLoad event, 359onMouseDown event, 359onMouseMove event, 359onMouseOut event, 359onMouseOver event, 156, 358-359onMouseUp event, 359onUnload event, 359Open Browser behavior, 175

working with, 371Open dialog box for templates, 439opening

documents with tabs, 60Files panel, files in, 72linked pages, 180-181panels, 46predefined sites, 20Related Files toolbar, 348-349

opening tags, 330optimizing images, 148-149, 151ordered/unordered lists

creating, 112-113

Page 58: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 577

CSS properties, setting, 223modifying, 115paragraph text, converting, 103text, creating lists with, 113

O'Reilly reference manuals, 332orphan links, 182, 461outdenting Coding toolbar options, 343overlapping of AP elements, preventing,

254Override Case of option, 353

Ppackaging

for Android, Apple iOS, Blackberry,Symbian, or WebOS,532-533

page breaks, setting, 223page positions, setting, 223Page Properties dialog box, 69, 81

Appearance category, 82Headings category, 84Links category, 83Title/Encoding category, 85

panel gripper, 46Panel Options menu, 46-47panels, 43, 16. See also Files panel; History

paneldocking/undocking, 48expanding/collapsing, 46-47grouping/ungrouping, 49header bars, 17information area, expanding and

collapsing, 47opening/closing, 46showing/hiding, 51

panel sets, 50-51paragraphs. See also styles

formatting text in, 103line spacing, controlling, 110plain paragraph after reading, switching

to, 61parameters

for ActiveX objects, 303for Flash/Shockwave movies, 295for Java applets, 301

parentheses balance, checking for, 470-471

passive FTP, 489passwords

forms, creating field for, 317for FTP access, 488-489for WebDAV server, 490

Paste Special command, 100-101pasting. See copying/pastingpaths, 163

relative path for new links, setting, 164-165

Pewinternet Web site, 3PhoneGap Build Service, 518-519, 532-533PhoneGap. See jQuery MobilePhotoshop, 2. See also Adobe Bridge

copying/pasting images, 139-140editing images in, 140-141inserting images from, 138-139shortcuts, 58Smart Objects, 138-141tracing images in, 202

PHP files, 29, 79tags, inserting, 347

physical tags, 116placeholders for images, inserting, 158-159planning, 1-3

mind maps, creating, 4-5for search engine submission, 20

plug-ins. See also Check Plug-in behavior;QuickTime

checking for, 306-307inserting content, 304playing, 305troubleshooting, 305

PNG filesimages, 133inserting, 136-137optimizing for, 148-149tracing images, 86, 202

Point/Pica size, choosing, 55Point To File icon, 171Popup Message behavior, 358

working with, 372-373positioning form objects, 315POST method for forms, 313Postscript Point/Pica size, 55predefined sites, opening, 20

Page 59: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

578

preferences. See also Code view; CSS(Cascading Style Sheets)

accessibility preferences, setting, 476AP element preferences, setting, 247for copying/pasting, 102font preferences, setting, 109general preferences, setting, 60-61highlighting color preferences, setting,

66preferences (continued)

History panel preferences, setting, 545Java applet preferences, modifying, 301new document preferences,

setting, 62-63Preferences dialog box

AP Element section, 247Code Coloring section, 356Code Format section, 353Code Hint section, 352Copy/Paste section, 102File Types/Editors section, 146-147invisible elements, selecting, 88-89links, updating, 178

preloading images, 358rollover images, 157working with, 374

Preview In Browser feature, 36Fluid Grid Layouts, 271testing, 468-469

previewingassets, 418Flash movie content, 295images, 148-149pages in Live view, 32-33relative path for new links, 164-165synchronized files, 515Web pages, 36-37

Preview Using Temporary File option, 164Primary Browser, 37primary fonts, 108printing code, 337prioritysubmit Web site, 20Program window, 17Progressive Download Video, 296properties. See also frames and framesets

adding, 377AP element properties,

modifying, 252-253

Change Property behavior, 376-377CSS properties, setting, 222-223CSS properties, in Properties panel,

220-221CSS-P (Cascading Style Sheets-

Positioning) properties, modifying, 252

deleting, 377editing, 377Flash movie properties,

changing, 294-295for image placeholder, 158-159Shockwave movie properties, changing,

294-295table properties, changing, 198-199

Properties panel. See also imagesCrop button, 153format text characters, 104-105modify images, 150-152with spry validation widgets, 390-391

Property Inspector, 16-17Flash movie controls, access to, 293proportional fonts, preferences, 109proportions of images, resizing, 152pseudo-classes in CSS (Cascading Style

Sheets), 233

Qqueries

searches, creating and using, 550media, creating and using, 526-527

quick frame links, creating, 290Quick Response code, 532-533Quick Tag Editor

Code Hints with, 338-339in Edit Tag mode, 345in Insert HTML mode, 345opening, 344syntax of code, 344in Wrap Tag mode, 345

QuickTime, 291content, inserting, 304linking or embedding MOV files, 298

quitting Dreamweaver, 42

Rradio buttons. See formsRA files, linking or embedding, 298

Page 60: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 579

RDS (Remote Data Services) options, 491read-only file warnings, setting, 60RealPlayer, 298

content, inserting, 304recently modified files, finding, 77recently opened Web page, opening, 29reference help, 39Reference panel, 332-333

specific information, accessing, 333Refresh button, Files panel, 502refreshing Files panel, 72refresh tag, 340regions. See templatesregular expressions

for tag find and replace, 549for text find and replace, 547

Related Files toolbar, 348-349filtering, 215preferences, 348

relative positioning of AP elements, 248Relevant CSS rules, viewing, 232remote folders, 67

setting up, 69working with, 68

Remote Info, 484defining, 488-491

remote sitechecking in and out site files, 508-509comparing local and remote

files, 506-507file preferences, setting, 500-501Files panel, managing files with, 502-503transferring files to and from, 504-505

Remove Event button, 367renaming. See naming/renamingRendering toolbar, 44reopening documents on startup, 60repeating background, setting, 82replacing. See finding/replacingreplaying History panel steps, 538reports

accessibility reports, creating, 477saving, 480-481testing sites, running reports for, 478-479viewing, 480

Report Settings button, 478resizing. See sizing/resizing

resizing table columns and rows, 195Results panel, 124rewinding Flash video, 297RGB color mode, 64-65Rich Internet Applications, 292

help, 39right alignment of paragraph text, 103rollover images

with AP elements, 256-257creating, 156-157customizing, 157link colors, 83preloading, 157showing/hiding, 256-257

root folders, creating, 10rulers, working with, 55

SSafari, 36samples

creating Web page from, 25page sketches, 5

saturation, 64-65Save As dialog box

different formats, saving files in, 78file type, changing, 67

saving. See also templatesfinding/replacing query, 122framesets, 280-281last saved version, reverting to, 27reports, 480-481searches, 333Web pages, 26-27

scaling for Flash/Shockwave movies, 295scripts. See also external JavaScript

librariesassets, displaying, 417showing/hiding, 88snippets for, 408

scrolling display, changing, 285SDK (Software Development Kit), 532-533search engines, 20

adding HTML for, 331Yahoo, Google, Bing, 20

searching. See finding/replacingSecondary Browser, 37

Page 61: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

580

secondary fonts, 108secure FTP (SFTP), 488-489Section 508, accessibility issue, 9Select All command, 99selection, Multiclass, CSS, 216-217Selection submenu, 341selector declaration. See CSS (Cascading

Style Sheets)Select tool, 52servers. See also FTP (File Transfer

Protocol); testing serverstechnologies, 11URI for Flash video, 296

Server behaviors, 382server-side files, 79

showing/hiding, 89server-side image maps, 172Set Text behavior, 372Set Text Of Status Bar behavior, 175shading of horizontal rules, 111shakes, 368

spry effects, adding, 404sharing

columns in site, 495snippets, 413

sharpness of images, changing, 155Shockwave

assets, displaying, 417inserting movies, 293properties of movie, changing, 294-295

shortcuts, 3, 43creating shortcut set, 58deleting, 58-59guides, working with, 57HTML, exporting as, 59on Macintosh systems, 15for previewing pages, 37for snippets, 411

shorthand CSS preferences, setting, 240Show/Hide Elements behavior, 358

working with, 380showing/hiding. See also forms

AP element borders, 246columns in site, 495CSS style sheets, 241HTML code, hidden characters for, 337library item highlighting, 428

panels, 51rollovers, 256-257table column widths, 188toolbars, 44visual aids, 87

single-clicking on text, 98site definition

advanced, 484-485basic, 18-19 cloaking site, 494importing site, 20local info, 486-487remote info, 488-491opening site, 20testing server, 492-493version control, 493

Site Files View, 70site specific code hints, 351site reports. See reportssite root

option, 164relative paths, 163

sitewide link changes, making, 182, 462-463sizing/resizing. See also Flash; frames and

framesetsAP elements, 255Assets panel, 422document size, displaying, 52Flash/Shockwave movies, 294font sizes, changing, 105image map hotspots, 174images, 152Point/Pica size, choosing, 55Split view, panes in, 334Status bar, setting window size from, 53of table text, 191

sketches of sample page, 5skin for Flash video, 296slides, 369

spry effects, adding, 404Smart Objects, Photoshop, 138-141Snap to Grid/Snap to Guide, 56snippets

block snippets, 409creating, 415editing, 413

creating, 415

Page 62: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 581

deleting, 413downloading, 409editing, 412-413example of, 408folder for snippets, creating, 414inserting, 410introduction to, 407-409keyboard shortcuts for, 411recent snippet, inserting, 411renaming, 414sharing, 413wrap snippets, 409

adding, 411creating, 415editing, 413

Snippets panel, 407sorting assets, 422sorting table data, 197sounds

files, linking or embedding, 298-299spacer images. See tablesspacing

characters, spaces between, 96controlling line spacing, 110with Copy and Paste Special, 101copying/pasting, setting for, 102CSS properties, setting, 222, 238multiple consecutive spacing,

allowing, 61spam blockers, 166special characters. See charactersSpecificity, 232speed

file transfer speed, 482of site, 459

spell-checking, 126-127dictionaries for, 61languages for, 127

splash screens, 293split cells. See tablesSplit view, 30, 31, 334

Coding toolbar, 342-343resizing panes in, 334visual aids in, 87

Split Code view, 30, 31SpryAssets folder, 384

defaults, changing, 385

Spry framework help, 39spry regions

creating, 400-401repeat list, creating, 402repeat regions, creating, 400-401

spry tabbed panels, 388spry widgets

accordion panels, 388advanced site definitions for, 485appearance, changing, 387collapsible panels, 388customizing, 403data sets, HTML or XML, 406-399editing, 386effects, adding and removing, 404-405inserting, 384-385introduction to, 383menu bar widgets, 392-393regions, creating, 400-401repeating list, 402selecting, 386tables, creating, 397, 399tooltip, 394-395validation widgets, 390-391working with, 388-389XML data set, identifying, 398

squishes, 369spry effects, adding, 404

stacking order. See AP elementsStandard table mode. See tablesStandard toolbar, 44Start menu, 29startup, reopening documents on, 60static pages, 69statistics of download, gathering, 482Status bar, 17. See also text

connection speed, setting, 53Set Text Of Status Bar behavior, 175using, 52window size, setting, 53

STE (Site Definition File) file format, 20storyboards, creating, 7streaming Flash video, 296-297<strong> tag, 61, 117Structure phase, 8Style popup, 120

Page 63: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

582

styles. See also CSS (Cascading StyleSheets); CSS-P (Cascading StyleSheets-Positioning)

built-in text style, applying, 116-117for characters, 104CSS text style, creating and

applying, 118-119for form objects, 315logical styles, 116

styles (continued)renaming styles, 120size and font style, applying, 117for table text, 191turning off/on, 393

Style toolbar, 44submission of site, 20Submit Express web site, 20Subversion

enabling, 493using, 510-511

Swap Image Restore behavior, 358working with, 374-375

Swap Images behavior, 358working with, 374-375

swatches, jQuery Mobile, 524-525SWF format, 292switching

between table modes, 185between Web pages, 31

Symbianpackaging for, 518-519, 532-533

Symbols font, 96synchronizing

comparing files while, 507displaying information on, 515Local/Network options, 489-490for RDS, 491site files, 514-515for WebDAV server, 490

syntax coloring for HTML code, 337syntax error alerts in Info Bar, 343system requirements, 12

Ttab index

for form objects, 315for links, 167

tables, 183adding columns or rows, 194alignment, 199

captions, aligning, 187Layout mode, changing in, 199of nested tables, 204of text, 191of tracing images, 203

AP elements to tables, converting, 258-259

backgroundscell backgrounds, formatting, 201setting, 199

borders, 87, 199cell border colors, 201

captions, entering, 187cell padding

formatting, 198values, 187

cell spacingformatting, 198values, 187

classes, 199colors, 199

of text, 191content to table, adding, 190-191deleting

columns and rows, 194empty layout cells, 187

Expanded mode for, 185exporting table data, 192-193formatting, 198-199

cells, 200-201text, 191

forms, controlling, 323header positions, 187heights

clearing, 199modifying, 189

imagesadding, 190cells, formatting for, 201tracing images, 202-203

importing table data, 192-193merged cells, 196

formatting, 201nested table, creating, 204

Page 64: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 583

tables (continued)pixels, converting widths and heights

to, 199placement of cells, modifying, 200process for creating, 184properties of table, changing, 198-199repeating tables, creating, 443resizing columns and rows, 195showing/hiding column widths, 188sorting table data, 197split cells, 196

formatting, 201spry tables, creating, 397, 399Standard mode, 185

inserting table in, 186-187nesting table in, 204properties, changing, 198

summary, creating, 187switching between modes, 185Table ID, entering, 198text

adding, 190-191importing tabular data as, 93wrapping text options, 201

tracing images, using, 202-203widths

clearing, 199fixed width, setting column to, 188modifying, 189

working with, 184tab size for code, 353Tag Accessibility Attributes dialog

box, 390-391alternate text, using, 477

Tag Chooser, 347Tag Inspector, using, 346tag libraries, 347

descriptor files, 79tags. See also CSS (Cascading Style

Sheets); HTML (Hypertext MarkupLanguage); Quick Tag Editor; taglibraries

advanced find and replace for, 548-549balanced tags, checking for, 470combining nested font tags, 473finding/replacing

advanced find and replace, 548-549

code, tags in, 333saving tag searches, 333

nested tagscombining nested font tags, 473fixing, 354redundant nested tags, 479reports testing, 478-479

physical tags, 116selecting, 90third-party tags color preferences, 66

Tag selector, 52, 99, 342target audience. See audiencetargets, 393. See also Flash

links, targeted, 288-289TD tags, 353telnet links, 162templates. See also Assets panel

advanced site definitions for, 485all pages, updating, 454attachments

detaching templates, 456opening attached templates, 439working with attached templates, 456

blank template, creating, 22creating, 437custom templates, creating Web page

from, 453deleting, 439

editable regions, 440repeating region entries, 442

detaching templates, 456downloading, 436editable attributes, defining, 441editable regions, 436

creating, 23, 446-449defining, 440finding, 455highlighting color preferences, set-

ting, 66nested editable regions, colors for, 66optional regions, creating, 444-445

existing template, creating Web pagefrom, 24

exporting template data as XML, 457-458file formats, 79finding editable regions, 455Flash template files, 292

Page 65: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

584

templates (continued)importing XML data, 457inconsistent region names, 451InContext Editing

adding CSS formatting, 449creating editable region, 448-449creating repeating region, 446-447deleting, 447

introduction to, 435-436list of templates, displaying, 417manually updating pages based on, 455nested templates

creating, 450-451highlighting color preferences, 66Web page from, 452

non-editable optional regions, creating, 444

Open dialog box, opening with, 439opening, 438-439optional regions, creating, 444-445relocking editable regions, 440renaming, 439repeating regions, creating, 400-401,

442-443repeating tables, creating, 443saving, 437

Web pages as templates, 27storing templates, 23time-saving tips for, 455updating, 454-455XML data, importing and

exporting, 457-458testing. See also accessibility; validation

broken links, finding and fixing, 460-462browser compatibility, 361, 466checking pages in a browser, 468introduction to, 459links, 180-181, 460-462reports testing site, 478-479servers, 484technical, 463usability, 467using Adobe BrowserLabs, 468-469

testing servers, 67, 484defining, 492setting up, 69working with, 68

text, 91. See also characters; copying/past-ing; finding/replacing; Flash; fonts;styles; tables

adding text to page, 92advanced text find/replace, 546-547colors

applying, 421changing, 105

dynamic text, 89for image placeholders, 158-159in jump menus, 326links, adding, 166-167lists with existing text, creating, 113Open Browser behavior with, 371paragraph text, formatting, 103Paste Special for, 100-101for rollover images, 157selecting, 98-99selection, finding text by, 121Set Text behavior, 372setting properties, 82Status bar

displaying text wotj, 372-373selecting with, 99

URL to text, applying, 421text fields/text areas. See also forms

displaying text in, 372spry validation widgets, 390

text files, 79text messages, displaying, 372-373Thawte, 488-489themes, 4

sample pages with, 25jQuery Mobile, 524-525

ThemeRoller, 524-525third-party file comparison tool, 506-507tiling Document window, 41times, adding, 97Times New Roman font, 91titles

frameset page title, setting, 287for text links, 167Web page titles, changing, 85

toolbars, 43, 17Coding toolbar, 342-343showing/hiding, 44working with, 44

Page 66: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 585

tooltips, adding, 393spry tooltip, 394-395

tracing images, 86frame tracing image, changing, 284in tables, 202-203

Traditional Point/Pica size, 55transitions, CSS

creating, 230-231editing, 230-231removing, 230-231

transparency for images, 149transparent GIFs, 258triple-clicking on text, 98troubleshooting plug-ins, 305

Uunderline style popups, 83undoing/redoing, 128-129. See also History

panelUndo/Redo slider, History panel, 536Unicode normalization form,

selecting, 63, 85Unicode signature (BOM), selecting, 63untitled documents, list of, 479Update Current Page method, 428Update Pages command, 428updating. See also links

Fireworks images, 143library items, 428Photoshop images, 140-141templates, 454-455Web updates, obtaining, 40

URL assetsdisplaying, 417image, applying URL to, 421new URL asset, adding, 420text, applying URL to, 421

URLs (Uniform Resource Locators). Seealso Flash; Go To URL behavior; links

absolute paths and, 163in jump menus, 327opening Web page with, 28rollover images linked to, 157for WebDAV server, 490

usability testing, 467UseableNet Accessibility Reference, 332

Use Dynamic Font Mapping check box, 109

Vvalidation, 464-465. See also forms

preferences, setting, 464spry validation widgets, 390Web pages, validating, 464-465World Wide Web Consortium (W3C)

standards, 465Validator, 464-465VBScript files, 79

showing/hiding, 88VeriSign, 488-489version control

Subversion, enabling, 493views and viewing

Browser Compatibility Check (BCC)report, 237

Design Notes, 498download statistics, 482Dreamweaver window, viewing, 16Files panel, viewing files in, 70multiple documents, viewing, 31reports, 480switching between views, 31Tag Inspector views, 346working with views, 30Zoom tool, changing view with, 54

visibility of AP elements, 247visitor link colors, 83visual aids, using, 87visually impaired persons, alternate text

for, 477visual server markup tags, showing and

hiding, 89VTML files, 79

Wwarnings

read-only file warnings, 60tags, fixing or removing, 354

WAV files, linking or embedding, 298W3C Validation. See validationWeb Content Accessibility Guidelines

(WCAG), introduction, 9web site, 9

Page 67: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

586

WebDAV options, 490web fonts, 106-107

site definition, 484-485WebKit

live view, 32-33WebOS

packaging for, 518-519, 532-533web pages. See also home page;

templates; testingblank page, creating, 21closing, 41custom template, creating from, 453dynamic pages, 69existing page, opening, 28naming, 26nested templates, creating from, 452previewing, 36-37properties, setting, 81recently opened page, opening, 29sample, creating from, 25saving, 26-27static pages, 69switching between, 31validating, 465

web-safe colors, 64web server, 68, 382web sites. See also testing; Web pages

for snippets, 409for templates, 436

welcome screen, showing, 60WGZ file format, 532-533wheel storyboards, 7whitespace

for ActiveX objects, 303finding/replacing ignoring, 123Flash/Shockwave movies, setting for, 295for Java applets, 301for tag find and replace, 549for text find and replace, 547

whole word matchfor tag find and replace, 549for text find and replace, 547

widgets. See spry widgetswidths. See also tables

for ActiveX objects, 303of AP elements, 247, 249

Flash video settings, 296of horizontal rules, 111image width, changing, 150, 152for Java applets, 301

Window-Eyes, 476Windows Media Player, 298Window Sizes

Multiscreen Preview, 34-35preferences, 52-53,482

Windows systems, 11browsers on, 36case sensitivity of file names, 27color palette, 64launching Dreamweaver in, 14-15requirements for, 12

wireframes, 5WML files, 79

tags, inserting, 347Wordpress, 351word wrap

for form text, 316for HTML code, 337

workflow reports, 478workspace. See panel sets.World Wide Web Consortium (W3C), 132

introduction, 9validation standards, 464-465Web site, 9

wpromote Web site, 20wrapping code, 353wrap snippets. See snippetsWrap Tag mode, Quick Tag Editor in, 345WYSIWYG view, 30

XXHTML (Extensible Hypertext Markup

Language)cleaning up, 472-473definitions, selecting, 62

XML (Extensible Markup Language), 29file format, 79spry XML data set, displaying, 398templates, importing and exporting XML

data into, 457-458XSL format, 29

Page 68: Adobe® Dreamweaver® CS6 on Demand - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780789749321/samplepages/0… · Adobe Dreamweaver CS6 on Demandhas been created by the professional

Index 587

YYahoo submission options, 20

Zz-index to AP element, applying, 251Zoom tool, 52

changing view with, 54