Apostila Dreamweaver Cs5

Uso doADOBE DREAMWEAVER CS5

ltima atualizao em 28/4/2010

Copyright 2010 Adobe Systems Incorporated and its licensors. All rights reserved.Uso do Adobe Dreamweaver CS5 para sistemas operacionais Windows e MacThis user guide is protected under copyright law, furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.This user guide is licensed for use under the terms of the Creative Commons Attribution Non-Commercial 3.0 License. This License allows users to copy, distribute, and transmit the user guide for noncommercial purposes only so long as (1) proper attribution to Adobe is given as the owner of the user guide; and (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. The best way to provide notice is to include the following link. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/Adobe, the Adobe logo, ActionScript, ColdFusion, Contribute, Creative Suite, Director, Dreamweaver, Fireworks, Flash, FlashPaper, FreeHand, HomeSite, Illustrator, InDesign, JRun, Shockwave, and Version Cue are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.ActiveX, Microsoft, Windows, and Windows Vista are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Apple, Macintosh, and Mac OS are trademarks of Apple Inc., registered in the United States and other countries. Java, Solaris, and SunOS are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States and other countries. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. UNIX is a registered trademark of The Open Group in the U.S. and other countries. Arial is a trademark of The Monotype Corporation registered in the U.S. Patent and Trademark Office and certain other jurisdictions. Times New Roman is a registered trademark of The Monotype Corporation registered in the U.S. Patent and Trademark Office and may be registered in certain other jurisdictions. All other trademarks are the property of their respective owners.Updated Information/Additional Third Party Code Information available at http://www.adobe.com/go/thirdparty.This product includes software developed by the Apache Software Foundation (http://www.apache.org/).This product includes software developed by CollabNet (http://www.Collab.Net/)This product includes software developed by Fourthought, Inc. MPEG Layer-3 audio coding technology licensed by Fraunhofer IIS and Thomson. This software is based in part on the work of the Independent JPEG Group.Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com)Video in Flash Player is powered by On2 TrueMotion video technology. 1992-2005 On2 Technologies, Inc. All Rights Reserved. http://www.on2.com.This product contains either BSAFE and/or TIPEM software by RSA Security, Inc.Sorenson Spark video compression and decompression technology licensed from Sorenson Media, Inc.

Notice to U.S. Government End Users. The Software and Documentation are Commercial Items, as that term is defined at 48 C.F.R. 2.101, consisting of Commercial Computer Software and Commercial Computer Software Documentation, as such terms are used in 48 C.F.R. 12.212 or 48 C.F.R. 227.7202, as applicable. Consistent with 48 C.F.R. 12.212 or 48 C.F.R. 227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.

iiiltima atualizao em 28/4/2010

Contedo

Captulo 1: O que h de novo

Captulo 2: rea de trabalhoFluxo e rea de trabalho do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Trabalho na janela Documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Uso de barras de ferramentas, inspetores e menus de contexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Personalizao da rea de trabalho do CS4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Atalhos do teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Extenses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Captulo 3: Trabalho com sites do DreamweaverConfigurao de um site do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Gerenciamento de sites do Contribute com o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Captulo 4: Criao e gerenciamento de arquivosCriao e abertura de documentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Gerenciamento de arquivos e pastas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Obteno e colocao de arquivos no servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Devoluo e retirada de arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

Sincronizao de arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Comparao de arquivos em busca de diferenas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Reverso de arquivos (usurios do Contribute) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Encobrimento de pastas e arquivos no site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Armazenamento de informaes de arquivo em Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Teste do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Captulo 5: Gerenciamento de ativos e bibliotecasSobre os ativos e as bibliotecas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Trabalho com ativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Criao e gerenciamento de uma lista dos ativos favoritos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Trabalho com itens de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Captulo 6: Criao de pginas com CSSIntroduo s folhas de estilos em cascata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Criao e gerenciamento de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Layout das pginas com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Trabalho com tags div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

Captulo 7: Layout de pginas com HTMLUso de auxlios visuais para layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

Apresentao do contedo em tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

Uso de quadros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

ivUSO DO DREAMWEAVER CS5Contedo


Captulo 8: Adio de contedo a pginasTrabalho com pginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Adio e formatao do texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

Adio e modificao de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

Insero de arquivos SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Insero de arquivos FLV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Adio de Widgets da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

Adio de som . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

Adio de outros objetos de mdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Automao de tarefas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

Captulo 9: Vinculao e navegaoSobre vinculao e navegao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271

Vinculao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

Menus de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Barras de navegao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

Mapas de imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

Soluo de problemas de links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

Captulo 10: Visualizao de pginasVisualizao de pginas no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

Visualizao de pginas em navegadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

Visualizao de pginas em dispositivos mveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

Captulo 11: Trabalho com cdigo de pginaInformaes gerais sobre a codificao no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

Configurao do ambiente de codificao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

Configuraes das preferncias de codificao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

Gravao e edio do cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

Recolhimento de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

Otimizao e depurao do cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323

Edio do cdigo na Visualizao de design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

Trabalho com o contedo de cabealho das pginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

Trabalho com as incluses de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

Gerenciamento de bibliotecas de tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

Importao de tags personalizadas para o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Captulo 12: Adio de comportamentos JavaScriptUso de comportamentos JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346

Aplicao de comportamentos internos do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

Captulo 13: Trabalho com outros aplicativosIntegrao com vrios aplicativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361

Trabalho com o Fireworks e Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

Trabalho com o Photoshop e Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368

Trabalho com o Flash e Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378

Trabalho com o Adobe Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379

Trabalho com o Device Central . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381

vUSO DO DREAMWEAVER CS5Contedo


Trabalho com o ConnectNow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

AIR Extension para Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383

Captulo 14: Criao e gerenciamento de modelosSobre os modelos do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

Reconhecimento de modelos e documentos baseados em modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394

Criao de um modelo do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

Criao de regies editveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400

Criao de regies repetitivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

Utilizao de regies opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

Definio de atributos de tag editveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406

Criao de um modelo aninhado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407

Edio, atualizao e excluso de modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410

Exportao e importao de contedo de modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414

Aplicao ou remoo de um modelo em um documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415

Edio de contedo em um documento baseado em modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Sintaxe do modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419

Configurao de preferncias de criao para os modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421

Captulo 15: Criao visual de pginas do SprySobre a estrutura do Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423

Funcionamento dos widgets do Spry (instrues gerais) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423

Funcionamento do widget Acordeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425

Funcionamento do widget Barra de menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

Funcionamento do widget Painel flexvel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433

Funcionamento do widget Painis com aba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436

Funcionamento do widget Dica de ferramenta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439

Funcionamento do widget Grupo de botes de opo de validao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441

Funcionamento do widget Campo de texto de validao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

Funcionamento do widget rea de texto de validao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449

Funcionamento do widget Seleo de validao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453

Funcionamento do widget Caixa de seleo de validao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456

Funcionamento do widget Senha de validao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458

Funcionamento do widget Confirmao de validao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462

Exibio de dados com o Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465

Incluso de efeitos do Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479

Captulo 16: Uso dos servios on-line da AdobeServios on-line da Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484

BrowserLab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484

Business Catalyst InContext Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486

Captulo 17: Exibio de dados XML com XSLTSobre XML e XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493

Execuo de transformaes XSL no servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500

Execuo de transformaes XSL no cliente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517

Entidades de caracteres ausentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519

viUSO DO DREAMWEAVER CS5Contedo


Captulo 18: Preparao para criao de sites dinmicosIntroduo aos aplicativos da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521

Configurao do computador para o desenvolvimento de aplicativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529

Conexes de banco de dados para desenvolvedores do ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534

Conexes de banco de dados para desenvolvedores do ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536

Conexes de banco de dados para desenvolvedores do PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543

Soluo de problemas das conexes de banco de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545

Remoo de scripts de conexo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550

Captulo 19: Como tornar pginas dinmicasOtimizao da rea de trabalho para desenvolvimento visual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551

Criao de pginas dinmicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554

Viso geral das fontes de contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556

Painis de contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561

Definio de origens de contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563

Adio de contedo dinmico a pginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577

Alterao do contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581

Exibio de registros de banco de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583

Visualizao de live data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 592

Adio de comportamentos de servidor personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594

Captulo 20: Criao visual de aplicativosCriao de pginas mestre e detalhadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606

Criao de pginas de pesquisa e de resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613

Criao de pginas para insero de registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620

Criao de pginas para atualizar um registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623

Criao de pginas para excluir um registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629

Criao de pginas com objetos de manipulao de dados avanados (ColdFusion, ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636

Criao de uma pgina de registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641

Criao de uma pgina de logon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643

Criao de uma pgina que apenas usurios autorizados podem acessar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645

Proteo de uma pasta no aplicativo (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648

Uso de componentes do ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649

Captulo 21: Criao de formulriosColeta de informaes dos usurios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656

Criao de formulrios da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659

Criao dos formulrios do ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674

Captulo 22: AcessibilidadeDreamweaver e acessibilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688

1ltima atualizao em 28/4/2010

Captulo 1: O que h de novo

A seguir apresentamos uma lista dos novos recursos principais do Adobe Dreamweaver CS5.

Adobe BrowserLabO Dreamweaver CS5 integra com o Adobe BrowserLab, um dos novos servios on-line, o CS Live, que oferece uma soluo rpida e precisa para teste de compatibilidade de vrios navegadores. Com o BrowserLab possvel visualizar pginas da Web e contedo local usando mltiplas visualizaes e ferramentas para comparao. Consulte BrowserLab na pgina 484.

Integrao do Business CatalystO Adobe Business Catalyst um aplicativo de hospedagem que substitui ferramentas tradicionais da rea de trabalho por uma plataforma central para designers da Web. O aplicativo funciona em conjunto com o Dreamweaver e permite que voc construa tudo, desde sites bsicos controlados por dados at poderosas lojas on-line. Consulte http://www.adobe.com/go/business_catalyst_get_extension_br.

Desativar/Ativar CSSO recurso Ativar/desativar CSS permite que voc desative ou reative as propriedades do CSS diretamente no painel Estilos CSS. A desativao de uma propriedade CSS faz com que simplesmente no haja comentrios sobre a propriedade especfica sem ter que exclu-la. Consulte Desativar/Ativar CSS na pgina 145.

Inspeo do CSSO modo Inspeo permite que voc exiba visualmente as propriedades de modelo de caixa do CSSincluindo preenchimento, borda e margemcom detalhes, sem leitura de cdigo ou necessidade um utilitrio separado de outros fabricantes como o Firebug. Consulte Inspecionar CSS na visualizao ativa na pgina 145.

Layouts iniciais de CSSO Dreamweaver CS5 inclui layouts iniciais de CSS simplificados e atuais. Os complexos seletores descendentes dos layouts do CS4 foram retirados e substitudos por outros mais simples e fceis de entender. Consulte Criar uma pgina com um layout CSS na pgina 154

Arquivos rel. dinamicamenteO recurso Arquivos rel. dinamicamente permite que voc identifique tudo nos arquivos e scripts externos necessrios para montar pginas de Sistema de gerenciamento de contedo (CMS) com base em PHP alm de exibir os nomes dos arquivos na barra de ferramentas Arquivos relacionados. Por padro, o Dreamweaver oferece suporte para identificao de arquivos em estruturas CMS do WordPress, Drupal e Joomla! Estruturas CMS. Consulte Abrir Arquivos rel. dinamicamente na pgina 70.

Navegao de vis. DinmicaA Navegao de vis. Dinmica ativa links em Visualizao dinmica, permitindo que voc interaja com aplicativos do servidor e dados dinmicos. O recurso permite que voc digite um URL para inspecionar pginas servidas por um servidor dinmico da Web e editar pginas navegadas para verificar se elas existem em um dos sites locais definidos. Consulte Visualizao de pginas no Dreamweaver na pgina 287.

2USO DO DREAMWEAVER CS5O que h de novo


Dicas de cdigo de classe personalizada PHPAs dicas de cdigo de classe personalizada PHP exibe a sintaxe apropriada para funes objetos e constantes de PHP, ajudando-o a digitar um cdigo mais preciso. As dicas de cdigo tambm funcionam com suas prprias funes e classes padro; bem como estruturas de terceiros como a da Zend.

Configurao de sites simplificadaA nova caixa de dilogo redesenhada Definio de sites (que agora a caixa de dilogo Configurao de sites) torna mais fcil configurar um site local do Dreamweaver para que voc possa iniciar a construo de pginas da Web imediatamente. A categoria de servidor remoto permite que voc especifique seus servidores remoto e de teste em uma s visualizao. Consulte Configurar um novo site na pgina 38.

Dicas de cdigo especficas do siteO recurso Dicas de cdigo especficas do site permite a personalizao do seu ambiente de cdigo quando voc estiver trabalhando com bibliotecas PHP e estruturas CMS de terceiros, tais como WordPress, Drupal,Joomla! ou outras estruturas. Os arquivos de tema para blogs e outros arquivos padro PHP e diretrios podem ser includos ou excludos como fontes para dicas de cdigo. Consulte Dicas de cdigo especficas do site na pgina 307.

Aprimoramentos de suporte do SubversionO Dreamweaver CS5 aumentou o suporte para o Subversion, permitindo que voc mova, copie e exclua arquivos localmente, e em seguida sincronize alteraes com seu repositrio remoto SVN. O novo comando Reverter permite que voc corrija rapidamente conflitos de rvore ou reverta uma verso anterior de um arquivo. Alm disso, uma nova extenso permite especificar a verso do Subversion com a qual voc deseja trabalhar em um determinado projeto. Consulte Usar o SVN (Subversion) para obter e devolver arquivos na pgina 89.

Recursos obsoletosOs seguintes recursos se tornaram obsoletos no Dreamweaver CS5:

Relatrio de validao de acessibilidade

Comportamentos de servidor ASP/JavaScript

Verificar navegador, comportamento JavaScript

Conectar-se a um servidor FTP/RDS sem definir um site

Controlar Shockwave ou SWF, comportamento JavaScript

Criar lbum de fotografias na Web

Ocultar menu pop-up, comportamento JavaScript

O InContext Editing gerencia classes de CSS disponveis

Inserir FlashPaper

Inserir/Remover marca da Web

Integrao do Microsoft Visual Sourcesafe

Barras de navegao

Tocar som, comportamento JavaScript

Menu Mostrar eventos (painel Comportamentos)

3USO DO DREAMWEAVER CS5O que h de novo


Mostrar menu pop-up, comportamento JavaScript

Linha do tempo, comportamentos JavaScript

Validar tags

Visualizao Live Data

4ltima atualizao em 28/4/2010

Captulo 2: rea de trabalho

Fluxo e rea de trabalho do Dreamweaver

Viso geral do fluxo de trabalho do DreamweaverVoc pode usar vrias abordagens para criar um site. Esta uma delas:

Planejar e configurar seu siteDetermine para onde os arquivos so direcionados e examine os requisitos do site, os perfis do pblico-alvo e as metas do site. Alm disso, avalie os requisitos tcnicos, como acesso do usurio, bem como as restries de navegador, plug-in e download. Depois de organizar suas informaes e determinar uma estrutura, voc pode comear a criar seu site. Consulte Trabalho com sites do Dreamweaver na pgina 37.

Organizar e gerenciar arquivos do seu siteNo painel Arquivos, voc pode adicionar, excluir e renomear arquivos e pastas com facilidade para alterar a organizao conforme necessrio. O painel Arquivos tambm tem muitas ferramentas de gerenciamento do site, transferncia de arquivos de e para um servidor remoto, configurao de um processo Devolver/retirar para impedir a substituio dos arquivos e sincronizao dos arquivos em sites locais e remotos. No painel Ativos, voc pode organizar com facilidade os ativos de um site; tambm possvel arrastar a maioria dos ativos diretamente do painel Ativos em um documento do Dreamweaver. Voc tambm pode usar o Dreamweaver para gerenciar aspectos dos seus sites do AdobeContribute. Consulte Gerenciamento de arquivos e pastas na pgina 73 e Gerenciamento de ativos e bibliotecas na pgina 110.

Layout das pginas da WebEscolha a tcnica de layout mais adequada para voc ou use as opes de layout do Dreamweaver junto com outras para criar a aparncia do seu site. Voc pode usar os elementos PA, os estilos de posicionamento CSS ou layouts CSS pr-projetados do Dreamweaver para criar seu layout. As ferramentas de tabela permitem projetar pginas rapidamente, desenhando e reorganizando a estrutura da pgina. Se desejar exibir vrios elementos ao mesmo tempo em um navegador, voc pode usar quadros para criar o layout de documentos. Finalmente, voc pode criar novas pginas com base em um modelo do Dreamweaver e atualizar o layout dessas pginas automaticamente quando o modelo for alterado. Consulte Criao de pginas com CSS na pgina 123 e Layout de pginas com HTML na pgina 172.

Adicionar contedo a pginasAdicione ativos e elementos de design como texto, imagens, imagens de sobreposio, mapas de imagem, cores, filmes, som, links HTML, menus de salto e muito mais. Voc pode usar recursos internos de criao de pgina para esses elementos como ttulos e planos de fundo, digitar diretamente na pgina ou importar contedo de outros documentos. O Dreamweaver tambm fornece comportamentos para executar tarefas em resposta a eventos especficos, como a validao de um formulrio quando um visitante clica no boto Enviar ou a abertura de uma segunda janela de navegador quando a pgina principal termina de ser carregada. Finalmente, o Dreamweaver fornece ferramentas para maximizar o desempenho do site e testar pginas para assegurar a compatibilidade com navegadores da Web diferentes. Consulte Adio de contedo a pginas na pgina 205.

5USO DO DREAMWEAVER CS5rea de trabalho


Criar pginas com codificao manualA codificao manual de pginas da Web outra abordagem de criao de pginas. O Dreamweaver fornece ferramentas de edio visual fceis de usar, mas tambm fornece um ambiente de codificao sofisticado; voc pode usar qualquer abordagem, ou ambas, para criar e editar as pginas. Consulte Trabalho com cdigo de pgina na pgina 292.

Configurar um aplicativo da Web para contedo dinmicoMuitos sites contm pginas dinmicas que permitem aos visitantes visualizar as informaes armazenadas nos bancos de dados e normalmente permitem que alguns visitantes adicionem novas informaes e editem as informaes nos bancos de dados. Para criar essas pginas, configure um servidor da Web e um servidor de aplicativo, crie ou modifique um site do Dreamweaver e conecte-se a um banco de dados. Consulte Preparao para criao de sites dinmicos na pgina 521.

Criar pginas dinmicasNo Dreamweaver, voc pode definir vrias fontes de contedo dinmico, incluindo conjuntos de registros extrados dos bancos de dados, parmetros de formulrio e componentes JavaBeans. Para adicionar o contedo dinmico a uma pgina, basta arrast-lo at a pgina.

Voc pode definir a pgina para exibir um ou vrios registros de uma vez, exibir mais de uma pgina de registros, adicionar links especiais para passar de uma pgina de registros para a prxima (e vice-versa) e criar contadores de registro para ajudar os usurios a rastrearem os registros. Voc pode incluir a lgica de aplicativos ou de negcios usando tecnologias como o Adobe ColdFusion e os servios da Web. Se precisar de mais flexibilidade, voc pode criar comportamentos de servidor personalizados e formulrios interativos. Consulte Como tornar pginas dinmicas na pgina 551.

Testar e publicarO teste das pginas um processo contnuo que acontece durante todo o ciclo de desenvolvimento. No final do ciclo, o site publicado em um servidor. Muitos desenvolvedores tambm incluem uma manuteno peridica para assegurar que os sites permaneam atualizados e funcionais. Consulte Obteno e colocao de arquivos no servidor na pgina 81.

Para assistir a um tutorial em vdeo sobre o que voc pode fazer no Dreamweaver, consulte www.adobe.com/go/lrvid4040_dw_br.

Viso geral do layout da rea de trabalhoA rea de trabalho do Dreamweaver permite visualizar documentos e propriedades de objeto. A rea de trabalho tambm coloca muitas operaes comuns em barras de ferramentas para que voc possa fazer alteraes rapidamente em seus documentos.

No Windows, o Dreamweaver fornece um layout integrado em uma janela. Na rea de trabalho integrada, todos os painis e janelas so integrados em uma nica janela maior do aplicativo.



A. Barra de aplicativos B. Barra de ferramentas de documento C. Janela do documento D. Alternador da rea de trabalho E. Grupos de painis F. CS Live G. Seletor de tags H. Inspetor de propriedades I. Painel Arquivos

No Mac OS, o Dreamweaver pode exibir vrios documentos em uma nica janela com abas que identificam cada documento. O Dreamweaver tambm pode exibir uma rea de trabalho flutuante na qual cada documento aparece em sua prpria janela individual. Os grupos de painis esto inicialmente encaixados, mas podem ser desencaixados em suas prprias janelas. Quando os grupos de painis estiverem encaixados e a rea do documento estiver maximizada, redimensionar ou mostrar e ocultar painis redimensiona automaticamente o documento principal, da mesma maneira que no Windows.

A B C E FD

G H I



A. Barra de aplicativos B. Barra de ferramentas de documento C. Alternador da rea de trabalho D. Janela do documento E. CS Live F. Grupos de painis G. Seletor de tags H. Inspetor de propriedades I. Painel Arquivos

Para assistir a um tutorial sobre como trabalhar com diferentes reas de trabalho do Dreamweaver, consulte www.adobe.com/go/lrvid4042_dw_br.

Mais tpicos da Ajuda Uso de barras de ferramentas, inspetores e menus de contexto na pgina 21

Personalizao da rea de trabalho do CS4 na pgina 23

Exibir documentos com abas (Dreamweaver Macintosh) na pgina 29

Tutorial da rea de trabalho do Dreamweaver

Viso geral dos elementos da rea de trabalhoA rea de trabalho inclui os seguintes elementos.

Nota: O Dreamweaver fornece muitos outros painis, inspetores e janelas. Para abrir os painis, os inspetores e as janelas, use o menu Janela.

A tela de boas-vindas Permite abrir um documento recente ou criar um novo documento. Na tela de boas-vindas, voc tambm pode saber mais sobre o Dreamweaver, fazendo um tour pelo produto ou assistindo a um tutorial.

A barra de aplicativos A parte superior da janela do aplicativo contm o alternador da rea de trabalho, os menus (apenas no Windows) e outros controles do aplicativo.

A barra de ferramentas de documento Contm botes que fornecem opes para diferentes visualizaes da janela Documento (como as visualizaes de design e de cdigo), vrias opes de visualizao e algumas operaes comuns, como a visualizao em um navegador.

A B DC E F

G H I



A barra de ferramentas Padro (No exibida no layout padro da rea de trabalho.) Contm botes para operaes comuns nos menus Arquivo e Editar: Novo, Abrir, Navegar no Bridge, Salvar, Salvar tudo, Imprimir cdigo, Recortar, Copiar, Colar, Desfazer e Refazer. Para exibir a barra de ferramentas Padro, selecione Exibir > Barras de ferramentas > Padro.

A barra de ferramentas de codificao (Exibida somente na Visualizao de cdigo.) Contm botes que permitem executar muitas operaes padro de codificao.

A barra de ferramentas Processamento do estilo (Oculta por padro.) Contm botes que permitem ver qual seria a aparncia do seu projeto em tipos de mdia diferentes se voc usasse folhas de estilos dependentes de mdia. Ela tambm contm um boto que permite ativar ou desativar a Folha de estilos em cascata (CSS).

A janela do documento Exibe o documento atual medida que criado e editado.

O Inspetor de propriedades Permite visualizar e alterar diversas propriedades do objeto ou texto selecionado. Cada objeto tem propriedades diferentes. O Inspetor de propriedades no expandido por padro no layout Codificador da rea de trabalho.

O seletor de tags Localizado na barra de status, na parte inferior da janela Documento. Mostra a hierarquia de tags em torno da seleo atual. Clique em qualquer tag da hierarquia para selecionar a tag e todo seu contedo.

Painis Ajudar a monitorar e modificar seu trabalho. Os exemplos incluem o painel Inserir, o painel Estilos de CSS e o painel Arquivos. Para expandir um painel, clique duas vezes na aba correspondente.

O painel Inserir Contm botes para inserir vrios tipos de objetos em um documento, como imagens, tabelas e elementos de mdia. Cada objeto uma parte do cdigo HTML que permite definir vrios atributos medida que so inseridos. Por exemplo, voc pode inserir uma tabela clicando no boto Tabela do painel Inserir. Se preferir, voc pode inserir objetos usando o menu Inserir em vez do painel Inserir.

O painel Arquivos Permite gerenciar arquivos e pastas, que podem fazer parte de um site do Dreamweaver ou estar em um servidor remoto. O painel Arquivos tambm permite acessar todos os arquivos do disco local, assim como o Windows Explorer (Windows) ou o Finder (Macintosh).

Mais tpicos da Ajuda Trabalho na janela Documento na pgina 17

Uso de barras de ferramentas, inspetores e menus de contexto na pgina 21

Gerenciamento de janelas e painis na pgina 23

Viso geral da janela DocumentoA janela Documento mostra o documento atual. possvel selecionar qualquer uma das seguintes visualizaes:

Visualizao de design Um ambiente de design para o layout visual da pgina, a edio visual e o desenvolvimento rpido do aplicativo. Nessa visualizao, o Dreamweaver exibe uma representao visual completamente editvel do documento, semelhante visualizao da pgina em um navegador.

Visualizao de cdigo Um ambiente de codificao manual para gravao e edio de cdigo HTML, JavaScript, de linguagem de servidor (como linguagem PHP ou linguagem de markup do ColdFusion (CFML)) e qualquer outro tipo de cdigo.

Visualizao Dividir cdigo Uma verso dividida da Visualizao de cdigo que possibilita rolar pelo trabalho em diferentes sees do documento ao mesmo tempo.

Visualizao de cdigo e de design Permite ver as visualizaes de cdigo e de design para o mesmo documento em uma nica janela.



Visualizao dinmica De modo semelhante Visualizao de design, a Visualizao dinmica exibe uma representao realista de como seu documento ser exibido em um navegador, e permite que voc interaja com o documento exatamente da maneira como faria em um navegador. A Visualizao dinmica no editvel. No entanto, voc pode editar na Visualizao de cdigo e atualizar a Visualizao dinmica para exibir suas alteraes.

Visualizao dinmica de cdigo Disponvel apenas durante a exibio de documento na Visualizao dinmica. A Visualizao dinmica de cdigo exibe o cdigo real que o navegador usa para executar a pgina, e pode alterar dinamicamente a maneira como voc interage com a pgina na Visualizao dinmica. A Visualizao dinmica de cdigo no editvel.

Quando uma janela Documento est maximizada (a padro), as abas aparecem na parte superior da janela, mostrando os nomes de arquivo de todos os documentos abertos. O Dreamweaver exibir um asterisco aps o nome do arquivo se voc tiver feito alteraes que ainda no foram salvas.

Para acessar um documento, clique na aba correspondente.

O Dreamweaver tambm exibe a barra de ferramentas Arquivos relacionados abaixo da aba do documento (ou abaixo da barra de ttulo do documento, se voc estiver exibindo documentos em janelas distintas). Documentos relacionados so associados ao arquivo atual, como arquivos CSS ou JavaScript. Para abrir um desses arquivos relacionados na janela Documento, clique no respectivo nome de arquivo na barra de ferramentas Arquivos relacionados.

Mais tpicos da Ajuda Trabalho na janela Documento na pgina 17

Sobre a visualizao dinmica na pgina 287

Abrir Arquivos relacionados na pgina 68

Informaes gerais sobre a codificao no Dreamweaver na pgina 292

Viso geral da barra de ferramentas de documentoA barra de ferramentas Documento contm botes que permitem alternar rapidamente entre visualizaes diferentes do documento. A barra de ferramentas tambm contm alguns comandos comuns e opes relacionadas visualizao do documento e sua transferncia entre sites locais e remotos. A ilustrao abaixo mostra a barra de ferramentas Documento expandida.

A. Mostrar Visualizao de cdigo B. Mostrar Visualizao de cdigo e de design C. Mostrar Visualizao de design D. Visualizao dinmica de cdigo E. Verificao de compatibilidade do navegador F. Visualizao dinmica G. Modo de Inspeo do CSS H. Visualizar/depurar no navegador I. Auxlios visuais J. Atualizar Visualizao de design K. Ttulo do documento L. Gerenciamento de arquivos

As seguintes opes aparecem na barra de ferramentas Documento:

Mostrar visualizao de cdigo Exibe somente a Visualizao de cdigo na janela Documento.

Mostrar visualizaes de cdigo e de design Divide a janela Documento entre as visualizaes de cdigo e de design. Quando voc seleciona essa visualizao combinada, a opo Visualizao de design visvel ativada no menu Opes de visualizao.

Mostrar Visualizao de design Exibe somente a Visualizao de design na janela Documento.

Nota: Se voc estiver trabalhando com XML, JavaScript, CSS ou outros tipos de arquivo baseados em cdigo, no poder visualizar os arquivos na Visualizao de design e os botes Design e Dividir sero desativados.

A B C D E G H I J K LF



Visualizao dinmica Exibe uma visualizao do documento baseada no navegador, interativa e no editvel.

Visualizao dinmica de cdigo Exibe o cdigo real usado pelo navegador para executar a pgina.

Ttulo do documento Permite inserir um ttulo para o documento, a ser exibido na barra de ttulo do navegador. Se o documento j tiver um ttulo, esse ttulo ser exibido nesse campo.

Gerenciamento de arquivos Exibe o menu pop-up Gerenciamento de arquivos.

Visualizar/depurar no navegador Permite visualizar ou depurar o documento em um navegador. Selecione um navegador no menu pop-up.

Atualizar Visualizao de design Atualiza a Visualizao de design do documento depois de serem feitas alteraes na Visualizao de cdigo. As alteraes feitas na Visualizao de cdigo no aparecem automaticamente na Visualizao de design at que voc realize determinadas aes, como salvar o arquivo ou clicar nesse boto.

Nota: Tambm so atualizados recursos de cdigo que dependem de DOM (Modelo de objeto de documento), como a possibilidade de selecionar tags de abertura e fechamento de um bloco de cdigo.

Opes de visualizao Permite definir opes para as visualizaes de cdigo e de design, incluindo a definio de que visualizao voc deseja que aparea por cima da outra. As opes do menu so vlidas para a visualizao atual: de design, de cdigo ou ambas.

Auxlios visuais Permite usar diferentes auxlios visuais para projetar as pginas.

Validar markup Permite validar o documento atual ou uma tag selecionada.

Verificao de compatibilidade do navegador Permite verificar se o CSS compatvel com navegadores diferentes.

Mais tpicos da Ajuda Exibir barras de ferramentas na pgina 21

Visualizao de pginas na Visualizao dinmica na pgina 287

Configuraes das preferncias de codificao na pgina 299

Visualizar e editar o contedo do cabealho na pgina 335

Uso de auxlios visuais para layout na pgina 172

Viso geral da barra de ferramentas PadroA barra de ferramentas Padro contm botes para operaes comuns nos menus Arquivo e Editar: Novo, Abrir, Navegar no Bridge, Salvar, Salvar tudo, Imprimir cdigo, Recortar, Copiar, Colar, Desfazer e Refazer. Use esses botes do mesmo modo como utilizaria os comandos de menu equivalentes.


Criao e abertura de documentos na pgina 59



Viso geral da barra de ferramentas Processamento do estiloA barra de ferramentas Processamento do estilo (oculta por padro) contm botes que permitem ver qual seria a aparncia do seu projeto em tipos de mdia diferentes se voc usasse folhas de estilo dependentes de mdia. Ela tambm contm um boto que permite ativar ou desativar estilos CSS. Para exibir a barra de ferramentas, selecione Exibir > Barras de ferramentas > Processamento do estilo.

Essa barra de ferramentas funciona somente se os documentos usam folhas de estilo dependentes de mdia. Por exemplo, a folha de estilo pode especificar uma regra body para uma mdia de impresso e uma regra body diferente para dispositivos handheld. Para obter mais informaes sobre como criar folhas de estilo dependentes de mdia, acesse o site do World Wide Web Consortium em www.w3.org/TR/CSS21/media.html.

Por padro, o Dreamweaver exibe o projeto para o tipo de mdia de tela (que mostra como uma pgina processada em uma tela de computador). Voc pode visualizar os seguintes processamentos de mdia clicando nos botes correspondentes da barra de ferramentas Processamento do estilo.

Processar tipo de mdia de tela Mostra como a pgina aparece em uma tela de computador.

Processar tipo de mdia print Mostra como a pgina aparece em um pedao de papel impresso.

Processar tipo de mdia handheld Mostra como a pgina aparece em um dispositivo handheld, como um celular ou um dispositivo BlackBerry.

Processar tipo de mdia projection Mostra como a pgina aparece em um dispositivo de projeo.

Processar tipo de mdia TTY Mostra como a pgina aparece em um dispositivo de teletipo.

Processar tipo de mdia TV Mostra como a pgina aparece em uma tela de televiso.

Alternar exibio de estilos CSS Permite ativar ou desativar estilos CSS. Esse boto funciona independentemente de outros botes de mdia.

Folhas de estilos em tempo de design Permite que voc especifique uma folha de estilos em tempo de design

Para assistir a um tutorial sobre como projetar folhas de estilo para dispositivos handheld e de impresso, consulte www.adobe.com/go/vid0156_br.


Viso geral da barra de ferramentas de navegao do navegadorA barra de ferramentas de navegao no navegador se torna ativa na visualizao Ativa e mostra o endereo da pgina que est visualizando na janela Documento. A partir do Dreamweaver CS5, a visualizao Ativa age como um navegador regular, portanto, mesmo se voc navegar para um site fora do site local (por exemplo, http://www.adobe.com), o Dreamweaver carregar a pgina na janela Documento.

A. Controles do navegador B. Caixa de endereo C. Opes de visualizao dinmica BA C



Por padro, os links no so ativos na Visualizao ativa. Ter links no ativos permite selecionar ou clicar no texto do link na janela Documento sem ser levado para outra pgina. Para testar links na visualizao Ativa, possvel ativar o clique de uma nica vez ou o clique contnuo selecionando Seguir links ou Seguir links continuamente no menu de opes da visualizao, direita da caixa de endereo.

Mais tpicos da Ajuda Visualizao de pginas no Dreamweaver na pgina 287

Viso geral da barra de ferramentas de codificaoA Barra de ferramentas de codificao contm botes que permitem realizar muitas operaes padro de codificao, como a reduo e a expanso de selees de cdigo, o realce do cdigo invlido, a aplicao e a remoo de comentrios, o recuo do cdigo e a insero de snippets de cdigo usados recentemente. A barra de ferramentas Codificao aparece verticalmente no lado esquerdo da janela Documento e visvel somente quando a Visualizao de cdigo exibida.

Voc no pode desencaixar ou mover a barra de ferramentas Codificao, mas possvel ocult-la (Exibir > Barras de ferramentas > Codificao).

Voc tambm pode editar a Barra de ferramentas de codificao para exibir mais botes (como Quebra automtica de palavra, Mostrar caracteres ocultos e Recuar automaticamente) ou ocultar botes que no deseja usar. No entanto, para fazer isso, voc deve evitar o arquivo XML que gera a barra de ferramentas. Para obter mais informaes, consulte Extenso do Dreamweaver.


Inserir cdigo com a Barra de ferramentas de codificao na pgina 309



Viso geral da barra de statusA barra de status, na parte inferior da janela Documento, fornece informaes adicionais sobre o documento que est sendo criado.

A. Seletor de tags B. Ferramenta Selecionar C. Ferramenta Mo D. Ferramenta Zoom E. Definir ampliao F. Menu pop-up Tamanho da janela G. Tamanho do documento e tempo de download estimado H. Indicador de codificao

Seletor de tags Mostra a hierarquia de tags em torno da seleo atual. Clique em qualquer tag da hierarquia para selecionar a tag e todo seu contedo. Clique em para selecionar o corpo inteiro do documento. Para definir os atributos class ou ID de uma tag no seletor de tags, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na tag e selecione uma classe ou ID no menu de contexto.

Ferramenta Selecionar Ativa e desativa a ferramenta Mo.

Ferramenta Mo Permite clicar no documento e arrast-lo na janela Documento.

Ferramenta Zoom e menu pop-up Definir ampliao Permite definir um nvel de ampliao para o documento.

Menu pop-up Tamanho da janela (No disponvel na Visualizao de cdigo.) Permite redimensionar a janela Documento para dimenses predefinidas ou personalizadas.

Tamanho do documento e tempo de download Mostra o tamanho aproximado do documento e o tempo de download estimado da pgina, incluindo todos os arquivos dependentes, como imagens e outros arquivos de mdia.

Indicador de codificao Mostra a codificao de texto do documento atual.

Mais tpicos da Ajuda Definir o tamanho da janela e a velocidade da conexo na pgina 20

Mais zoom e Menos zoom na pgina 215

Redimensionar a janela Documento na pgina 19

Definir o tempo de download e as preferncias de tamanho na pgina 217

Viso geral do Inspetor de propriedadesO Inspetor de propriedades permite examinar e editar as propriedades mais comuns do elemento de pgina selecionado atualmente, como texto ou um objeto inserido. O contedo do Inspetor de propriedades varia de acordo com o elemento selecionado. Por exemplo, se voc selecionar uma imagem da pgina, o Inspetor de propriedades mudar para mostrar as propriedades da imagem (como o caminho do arquivo at a imagem, a largura e a altura da imagem, a borda em torno da imagem, se houver, e assim por diante).

A B C D E F G H



Por padro, o Inspetor de propriedades fica na borda inferior da rea de trabalho, mas voc pode desencaixar e torn-lo um painel flutuante nessa rea.

Mais tpicos da Ajuda Encaixe e desencaixe de painis na pgina 24

Usar o Inspetor de propriedades na pgina 22

Viso geral do painel InserirO painel Inserir contm botes para criar e inserir objetos, como tabelas, imagens e links. Os botes so organizados em vrias categorias, que podem ser alternadas pela seleo da categoria desejada no menu pop-up Categoria. Categorias adicionais aparecem quando o documento atual contm o cdigo do servidor, como documentos ASP ou CFML.

Algumas categorias tm botes com menus pop-up. Ao selecionar uma opo em um menu pop-up, essa opo se transforma na ao padro do boto. Por exemplo, se voc selecionar Alocador de espao de imagem no menu pop-up do boto Imagem, na prxima vez que clicar no boto Imagem, o Dreamweaver vai inserir um alocador de espao de imagem. Sempre que voc seleciona uma nova opo no menu pop-up, a ao padro do boto muda.

O painel Inserir est organizado nas seguintes categorias:

Categoria Comum Permite criar e inserir os objetos usados com mais freqncia, como imagens e tabelas.

Categoria Layout Permite inserir tabelas, elementos de tabelas, tags div, quadros e widgets do Spry. Voc tambm pode escolher duas visualizaes para tabelas: Padro (opo padro) e Tabelas expandidas.

Categoria Formulrios Contm botes para criar formulrios e inserir elementos de formulrios, incluindo widgets de validao do Spry.

Categoria Dados Permite inserir objetos de dados do Spry e outros elementos dinmicos como conjuntos de registros, regies repetitivas e formulrios de insero e atualizao de registros.



Categoria Spry Contm botes para criar pginas do Spry, incluindo objetos de dados e widgets do Spry.

A categoria do InContext Editing Contm botes para criar pginas do InContext Editing, incluindo botes para Regies editveis, Regies repetitivas e gerenciamento CSS.

Categoria Texto Permite inserir uma variedade de tags de formatao de texto e de lista, como b, em, p, h1 e ul.

Categoria Favoritos Permite agrupar e organizar os botes do painel Inserir usados com mais freqncia em um lugar comum.

Categorias do cdigo do servidor Disponvel somente para pginas que usam uma linguagem de servidor especfica, incluindo ASP, CFML bsico, fluxo de CFML, CFML avanado e PHP. Cada uma dessas categorias fornece objetos de cdigo do servidor que podem ser inseridos na Visualizao de cdigo.

Diferente dos outros painis do Dreamweaver, voc pode arrastar o painel Inserir para fora de sua posio de encaixe padro e solt-lo em uma posio horizontal na parte superior da janela Documento. Ao fazer isso, ele se altera de um painel para uma barra de ferramentas (embora voc no possa ocult-lo e exibi-lo da mesma forma que se faz com as outras barras de ferramentas).

Mais tpicos da Ajuda Uso do painel Inserir na pgina 205

Criao visual de pginas do Spry na pgina 423

Viso geral do painel ArquivosUse o painel Arquivos para visualizar e gerenciar os arquivos no site do Dreamweaver.

Ao visualizar sites, arquivos ou pastas no painel Arquivos, voc pode alterar o tamanho da rea de visualizao e expandir ou reduzir o painel Arquivos. Quando est reduzido, o painel Arquivos exibe o contedo do site local, o site remoto, o servidor de teste ou o repositrio SVN como uma lista de arquivos. Quando expandido, ele exibe o site local e o site remoto, o servidor de teste ou o repositrio SVN.

Para os sites do Dreamweaver, voc tambm pode personalizar o painel Arquivos alterando a visualizao (site local ou remoto) que aparece por padro no painel reduzido.



Mais tpicos da Ajuda Trabalhar com arquivos no painel Arquivos na pgina 76

Viso geral do painel Estilos CSSO painel Estilos CSS permite rastrear as regras e propriedades CSS que afetam o elemento de pgina selecionado atualmente (modo Atual) ou as regras e propriedades que afetam o documento inteiro (modo Tudo). Um boto de alternncia na parte superior do painel Estilos CSS permite alternar entre os dois modos. O painel Estilos CSS tambm permite modificar propriedades CSS no modo Tudo e no modo Atual.

Para redimensionar qualquer painel, arraste as bordas entre os painis.

No modo Atual, o painel Estilos CSS exibe trs painis: o painel Resumo para seleo que exibe as propriedades CSS da seleo atual do documento, o painel Regras que exibe o local das propriedades selecionadas (ou regras em cascata para a tag selecionada, dependendo da seleo) e o painel Propriedades que permite editar propriedades CSS para a regra que define a seleo.

No modo Tudo, o painel Estilos CSS exibe dois painis: o painel Todas as regras (na parte superior) e o painel Propriedades (na parte inferior). O painel Todas as regras exibe uma lista de regras definidas no documento atual, bem como as regras definidas nas folhas de estilo anexadas ao documento atual. O painel Propriedades permite editar propriedades CSS para todas as regras selecionadas no painel Todas as regras.

Qualquer alterao efetuada no painel Propriedades aplicada imediatamente, permitindo que voc a visualize enquanto trabalha.

Mais tpicos da Ajuda Criao e gerenciamento de CSS na pgina 128



Viso geral das guias visuaisO Dreamweaver fornece vrios tipos de guias visuais para ajudar voc a projetar documentos e a prever sua aparncia nos navegadores. Voc pode executar qualquer um dos seguintes procedimentos:

Encaixar instantaneamente a janela Documento no tamanho de janela desejado para ver como os elementos se ajustam na pgina.

Usar uma imagem de decalque como fundo da pgina para ajudar a duplicar um projeto criado em um aplicativo de ilustrao ou edio de imagens, como o Adobe Photoshop ou Adobe Fireworks.

Usar rguas e guias para fornecer uma pista visual do posicionamento preciso e do redimensionamento dos elementos de pgina.

Usar a grade para posicionar com preciso e redimensionar os elementos absolutamente posicionados (elementos PA).

As marcas de grade na pgina ajudam a alinhar os elementos PA e, quando o encaixe est ativado, os elementos PA se encaixam automaticamente no ponto de grade mais prximo ao serem movidos ou redimensionados. (Outros objetos, como imagens e pargrafos, no se encaixam na grade.) O encaixe funciona independentemente da visibilidade da grade.

Mais tpicos da Ajuda Uso de auxlios visuais para layout na pgina 172

Usurios do GoLiveSe estiver usando o GoLive e desejar voltar a trabalhar com o Dreamweaver, voc pode encontrar uma apresentao on-line da rea de trabalho e do fluxo de trabalho do Dreamweaver, bem como maneiras para migrar seus sites para o Dreamweaver. Para obter mais informaes, consulte www.adobe.com/go/learn_dw_golive_br.

Mais tpicos da Ajuda Tutorial do Dreamweaver para usurios do GoLive

Trabalho na janela Documento

Alternar entre visualizaes na janela DocumentoVoc pode visualizar um documento na janela Documento da Visualizao de cdigo, da Visualizao Dividir cdigo, da Visualizao de design, das Visualizaes de cdigo e de design (visualizao dividida) ou na Visualizao dinmica. Voc tambm tem a opo de exibir a visualizao Dividir cdigo ou as visualizaes de cdigo e de design na horizontal ou na vertical. (A exibio horizontal o padro.)

Passar para a Visualizao de cdigo Siga um destes procedimentos:

Selecione Exibir > Cdigo.

Na barra de ferramentas Documento, clique no boto Mostrar visualizao de cdigo.



Alternar para a visualizao Dividir cdigoA visualizao Dividir cdigo divide o documento em dois, assim voc pode trabalhar nas duas sees de cdigo de uma vez s.

Selecione Exibir > Dividir cdigo.

Nota: Se voc redimensionar a janela Documento, a janela do aplicativo ou alterar o layout da rea de trabalho, o Dreamweaver manter a taxa de diviso, assim as duas visualizaes sempre estaro visveis.

Passar para a Visualizao de design Siga um destes procedimentos:

Selecione Visualizar > Design.

Na barra de ferramentas Documento, clique no boto Mostrar visualizao de design.

Mostrar visualizaes de cdigo e de design Siga um destes procedimentos:

Selecione Exibir > Cdigo e design.

Na barra de ferramentas Documento, clique no boto Mostrar visualizaes de cdigo e design.

Por padro, a Visualizao de cdigo aparece na parte superior e a Visualizao de design aparece na parte inferior da janela Documento. Para exibir a Visualizao de design na parte superior, selecione Exibir > Visualizao de design na parte superior.


Alternar entre as visualizaes de cdigo e de design Pressione Control + crase (`).

Se as duas visualizaes forem exibidas na janela Documento, esse atalho de teclado mudar o foco do teclado de uma visualizao para a outra.

Dividir verticalmente as visualizaesEsta opo est disponvel somente na visualizao Dividir cdigo e nas visualizaes de cdigo e de design (Dividir visualizao). Est desabilitado para a Visualizao de cdigo e para a Visualizao de design.

1 Certifique-se de estar na visualizao Dividir cdigo (Visualizao > Dividir cdigo) ou nas visualizaes de cdigo e de design (Visualizao > Cdigo e design).

2 Selecione Exibir > Dividir verticalmente.

Se voc estiver nas visualizaes de cdigo e design, tem a opo de exibir a Visualizao de design esquerda (Visualizao > Visualizao de design esquerda).




Mais tpicos da Ajuda Viso geral da janela Documento na pgina 8

Visualizao de pginas na Visualizao dinmica na pgina 287

Janelas de documento em cascata ou lado a ladoSe houver muitos documentos abertos ao mesmo tempo, voc pode organiz-los em cascata ou lado a lado.

Mais tpicos da Ajuda Gerenciamento de janelas e painis na pgina 23

Exibir documentos com abas (Dreamweaver Macintosh) na pgina 29

Janelas de documento em cascata Selecione Janela > Em cascata.

Janelas de documento lado a lado (Windows) Selecione Janela > Lado a lado horizontalmente ou Janela > Lado a lado verticalmente.

(Macintosh) Selecione Janela > Lado a lado.

Redimensionar a janela DocumentoA barra de status exibe as dimenses atuais da janela Documento (em pixels). Para projetar uma pgina cuja aparncia fica melhor em um tamanho especfico, voc pode ajustar a janela Documento para qualquer tamanho predefinido, editar esses tamanhos predefinidos ou criar novos tamanhos.

Redimensionar a janela Documento para um tamanho predefinido Selecione um dos tamanhos do menu pop-up Tamanho da janela, na parte inferior da janela Documento.

Nota: (Apenas Windows) Documentos na janela Documento so, por padro, maximizados, e voc no pode redimensionar um documento quando ele est maximizado. Para restaurar abaixo o documento, clique no boto Restaurar abaixo no canto superior direito do documento.

O tamanho da janela mostrado reflete as dimenses internas da janela do navegador, sem as bordas; o tamanho do monitor listado entre parnteses. Por exemplo, voc usaria o tamanho 536 x 196 (640 x 480, Padro) provavelmente se os visitantes estivessem usando o Microsoft Internet Explorer ou o Netscape Navigator nas configuraes padro em um monitor de 640 x 480.

Para um redimensionamento menos preciso, use os mtodos padro de redimensionamento de janelas do seu sistema operacional, como arrastar o canto inferior direito de uma janela.



Alterar os valores listados no menu pop-up Tamanho da janela1 Selecione Editar tamanhos no menu pop-up Tamanho da janela.

2 Clique em qualquer valor de largura ou altura na lista Tamanhos de janela e digite um novo valor.

Para ajustar a janela Documento somente a uma largura especfica (sem alterar a altura), selecione um valor de altura e exclua-o.

3 Clique na caixa Descrio para inserir um texto descritivo sobre um tamanho especfico.

Adicionar um novo tamanho ao menu pop-up Tamanho da janela1 Selecione Editar tamanhos no menu pop-up Tamanho da janela.

2 Clique no espao em branco abaixo do ltimo valor da coluna Largura.

3 Insira valores para Largura e Altura.

Para definir somente a Largura ou a Altura, deixe um campo em branco.

4 Clique no campo Descrio para inserir um texto descritivo sobre o tamanho adicionado.

Por exemplo, voc pode digitar SVGA ou PC mdio prximo a uma entrada de um monitor de 800 x 600 pixels e Mac de 17 pol. prximo a uma entrada de um monitor de 832 x 624 pixels. A maioria dos monitores pode ser ajustada para diversas dimenses de pixel.

Definir o tamanho da janela e a velocidade da conexo1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).

2 Selecione Barra de status na lista Categoria esquerda.

3 Defina uma das seguintes opes:

Tamanhos de janela Permite personalizar os tamanhos de janela que aparecem no menu pop-up da barra de status.

Velocidade de conexo Determina a velocidade de conexo (em quilobits por segundo) usada para calcular o tamanho do download. O tamanho do download da pgina exibido na barra de status. Quando uma imagem selecionada na janela Documento, o tamanho de download da imagem exibido no Inspetor de propriedades.

Mais tpicos da Ajuda Viso geral da barra de status na pgina 13

Redimensionar a janela Documento na pgina 19

Relatrios no DreamweaverVoc pode executar relatrios no Dreamweaver para localizar contedos, solucionar problemas ou testar contedos. Voc pode gerar os seguintes tipos de relatrios:

Pesquisa Permite procurar tags, atributos e textos especficos em tags.

Referncia Permite que voc procure informaes de referncia teis.

Validao Permite verificar erros de cdigo ou de sintaxe.

Compatibilidade de navegador Permite testar o HTML dos documentos para verificar se alguma tag ou atributo no suportado pelos navegadores de destino.

Verificador de links Permite encontrar e corrigir links rompidos, externos e rfos



Relatrios do site Permite melhorar o fluxo de trabalho e testar os atributos HTML no site. Os relatrios de fluxo de trabalho incluem Design Notes verificadas e modificadas recentemente; os relatrios HTML incluem tags de fonte aninhadas que podem ser combinadas, acessibilidade, textos alternativos ausentes, tags aninhadas redundantes, tags vazias removveis e documentos sem ttulo.

Registro de FTP Permite visualizar toda a atividade de transferncia de arquivos via FTP.

Depurao de servidor Permite visualizar informaes para depurar um aplicativo Adobe ColdFusion.

Mais tpicos da Ajuda Procurar tags, atributos ou texto no cdigo na pgina 319

Uso do material de referncia a linguagem na pgina 320

Teste do site na pgina 106

Validar tags na pgina 325

Verificar compatibilidade de navegador na pgina 325

Encontrar links rompidos, externos e rfos na pgina 284

Colocar arquivos em um servidor remoto na pgina 84

Obter arquivos de um servidor remoto na pgina 82

Usar o depurador do ColdFusion (somente Windows) na pgina 327

Uso de barras de ferramentas, inspetores e menus de contexto

Exibir barras de ferramentasUse as barras de ferramentas Documento e Padro para realizar operaes relacionadas a documentos e de edio padro, a barra de ferramentas de codificao para inserir o cdigo rapidamente e a barra de ferramentas Processamento do estilo para exibir a pgina exatamente como apareceria em tipos de mdia diferentes. Voc pode exibir ou ocultar as barras de ferramentas conforme necessrio.

Selecione Exibir > Barras de ferramentas e, em seguida, selecione a barra de ferramentas.

Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer uma das barras de ferramentas e selecione-a no menu de contexto.

Nota: Para exibir ou ocultar a barra de ferramentas de codificao no Inspetor de cdigo (Janela > Inspetor de cdigo), selecione Barra de ferramentas de codificao no menu pop-up Opes de visualizao, na parte superior do inspetor.

Mais tpicos da Ajuda Viso geral da barra de ferramentas de documento na pgina 9

Viso geral da barra de ferramentas Padro na pgina 10

Viso geral da barra de ferramentas de codificao na pgina 12

Viso geral da barra de ferramentas Processamento do estilo na pgina 11



Usar o Inspetor de propriedadesO Inspetor de propriedades permite examinar e editar as propriedades mais comuns do elemento de pgina selecionado atualmente, como texto ou um objeto inserido. O contedo do Inspetor de propriedades varia de acordo com o(s) elemento(s) selecionado(s).

Para acessar a Ajuda de um Inspetor de propriedades, clique no boto da Ajuda no canto superior direito do Inspetor de propriedades ou selecione Ajuda no menu Opes de um Inspetor de propriedades.

Nota: Use o Inspetor de tags para visualizar e editar todos os atributos associados s propriedades de uma determinada tag.

Mais tpicos da Ajuda Viso geral do Inspetor de propriedades na pgina 13

Definir propriedades de texto no Inspetor de propriedades na pgina 227

Encaixe e desencaixe de painis na pgina 24

Alterar atributos com o Inspetor de tags na pgina 329

Mostrar ou ocultar o Inspetor de propriedades Selecione Janela > Propriedades.

Expandir ou reduzir o Inspetor de propriedades Clique na seta de expanso no canto inferior direito do Inspetor de propriedades.

Visualizar e alterar propriedades para um elemento de pgina1 Selecione o elemento de pgina na janela Documento.

Talvez seja necessrio expandir o Inspetor de propriedades para visualizar todas as propriedades do elemento selecionado.

2 Altere qualquer propriedade no Inspetor de propriedades.

Nota: Para obter informaes sobre propriedades especficas, selecione um elemento na janela Documento e clique no cone de Ajuda no canto superior direito do Inspetor de propriedades.

3 Se as alteraes no forem aplicadas imediatamente na janela Documento, siga um destes procedimentos para aplic-las:

Clique fora dos campos de texto de edio de propriedade.

Pressione Enter (Windows) ou Return (Macintosh).

Pressione Tab para passar para outra propriedade.

Usar menus de contextoOs menus de contexto fornecem acesso fcil maioria dos comandos teis e das propriedades relacionadas ao objeto ou janela com o qual est trabalhando. Os menus de contexto listam somente os comandos que pertencem seleo atual.

1 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no objeto ou janela.



2 Selecione um comando no menu de contexto.

Personalizao da rea de trabalho do CS4

Gerenciamento de janelas e painis possvel criar um espao de trabalho personalizado movendo e manipulando janelas de Documento e painis. Tambm possvel salvar espaos de trabalho e alternar entre eles. No Fireworks, renomear reas de trabalho personalizadas pode levar a um comportamento inesperado.

Nota: os exemplos a seguir usam o Photoshop para fins demonstrativos. A rea de trabalho funciona da mesma forma em todos os produtos.

Reorganizar, encaixar e flutuar as janelas de documentosQuando voc abre mais que um arquivo, as janelas de Documento so tabuladas.

Para reorganizar a ordem das janelas de Documento tabuladas, arraste uma guia de janela para o novo local no grupo.

Para desencaixar (flutuar ou separar a guia) uma janela de documento de um grupo de janelas, arraste a guia da janela para fora do grupo.



Nota: No Photoshop voc tambm pode selecionar Janela > Organizar > Flutuar na janela para flutuar uma nica janela de documento ou Janela > Organizar > Flutuar tudo nas janelas para flutuar tudo das janelas de documento de uma vez. Consulte as notas tcnicas kb405298 para obter mais informaes.

Nota: o Dreamweaver no oferece suporte a encaixe e desencaixe de janelas de Documento. Use o boto Minimizar da janela do documento para criar janelas flutuantes (Windows) ou selecione Janela > Lado a Lado Verticalmente para criar janelas de documentos lado a lado. Pesquise "Lado a Lado Verticalmente" no Ajuda do Dreamweaver para obter mais informaes sobre este tpico.

Para encaixar uma janela de Documento em um grupo separado de janelas de Documento, arraste a janela para o grupo.

Para criar grupos de documentos empilhados ou lado a lado, arraste a janela para uma das zonas de destino nas partes superior, inferior ou laterais de qualquer janela. Voc tambm pode selecionar um layout para o grupo usando o boto Layout na barra de aplicativos.

Nota: alguns produtos no tm suporte para essa funcionalidade. No entanto, seu produto pode conter os comandos Cascata ou Lado a lado no menu Janela para ajud-lo na exibio de documentos.

Para alternar para outro documento em um grupo tabulado, arraste a seleo sobre a guia do documento por alguns instantes.

Nota: alguns produtos no tm suporte para essa funcionalidade.

Encaixe e desencaixe de painisUm encaixe um conjunto de painis ou grupos de painis exibidos juntos, geralmente em uma orientao vertical. Encaixe e desencaixe painis movendo-os para dentro e para fora de um encaixe.

Para encaixar um painel, arraste-o pela guia para dentro do encaixe, na parte superior, na parte inferior ou entre outros painis.

Para encaixar um grupo de painis, arraste-o pela barra de ttulo (a barra slida vazia acima das guias) para dentro do encaixe.

Para remover um painel ou grupo de painis, arraste-o para fora do encaixe pela guia ou barra de ttulo. possvel arrast-lo para dentro de outro encaixe ou deix-lo flutuando livremente.

Painel de navegao arrastado para um novo encaixe, indicado pelo realce vertical azul



Painel de navegao no encaixe

possvel evitar que os painis preencham todo o espao no encaixe. Arraste a borda inferior do encaixe para cima de modo que ele no corresponda mais borda do espao de trabalho.

Movimentao de painisAo mover painis, voc visualizar zonas para soltar realadas em azul, que so reas nas quais possvel mover o painel. Por exemplo, possvel mover um painel para cima ou para baixo em um encaixe arrastando-o para a zona para soltar azul estreita, acima ou abaixo de outro painel. Se for arrastado para uma rea que no uma zona para soltar, o painel flutuar livremente na rea de trabalho.

Nota: A posio do mouse (ao invs da posio do painel), ativa a rea de destino. Se no puder visualizar a rea de destino, tente arrastar o mouse para o lugar onde ela deveria estar.

Para mover um painel, arraste-o pela guia.

Para mover um grupo de painis , arraste a barra de ttulo (a rea acima das guias).

A zona para soltar azul estreita indica que o painel Cor ser encaixado acima do grupo de painis Camadas.A. Barra de ttulo B. Guia C. Zona para soltar

Pressione Ctrl (Windows) ou Command (Mac OS) enquanto estiver movendo um painel para no encaix-lo. Pressione Esc enquanto estiver movendo o painel para cancelar a operao.

Adio e remoo de painisSe todos os painis forem removidos de um encaixe, ele desaparecer. possvel criar um encaixe movendo os painis para a borda direita do espao de trabalho at uma zona de destino aparecer.

Para remover um painel, clique com o boto direito e selecione Fechar (Windows) ou, com a tecla Control pressionada, selecione Fechar (Mac), ou desmarque-o do menu de Janela.

Para adicionar um painel, selecione-o no menu Janela e encaixe-o no local que desejado.

AB

C



Manipulao de grupos de painis Para mover um painel em um grupo, arraste a guia do painel para a zona para soltar realada no grupo.

Adio de um painel a um grupo de painis

Para reorganizar painis em um grupo, arraste a guia do painel para um novo local no grupo.

Para remover um painel de um grupo para que ele flutue livremente, arraste o painel pela guia para fora do grupo.

Para mover um grupo, arraste a barra de ttulo (a rea acima das guias).

Empilhamento de painis flutuantesSe for arrastado para um painel fora de seu en

Apostila Dreamweaver Cs5

Documents

Transcript of Apostila Dreamweaver Cs5