Apostila Dreamweaver CS5 PortugueÌ‚s

8/3/2019 Apostila Dreamweaver CS5 Portugues

1/695

Uso do

ADOBE DREAMWEAVER CS5


2/695

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 acommitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appearin 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 includethe 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 Statesand/or other countries.

ActiveX, Microsoft, Windows, and Windows Vista are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or othercountries. Apple, Macintosh, and Mac OS are trademarks of Apple Inc., registered in the United States and other countries. Java, Solaris, and SunOS aretrademarks or registered trademarks of Sun Microsystems, Inc. in the United States and other countries. Linux is the registered trademark of Linus Torvalds inthe 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 MonotypeCorporation registered in the U.S. Patent and Trademark Office and certain other jurisdictions. Times New Roman is a registered trademark of The MonotypeCorporation registered in the U.S. Patent and Trademark Office and may be registered in certain other jurisdictions. All other trademarks are the property oftheir 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 ofCommercial 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 andCommercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rightsas 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 applicableequal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans ReadjustmentAssistance 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.
http://creativecommons.org/licenses/by-nc-sa/3.0/http://www.adobe.com/go/thirdpartyhttp://www.apache.org/http://www.collab.net/http://www.nellymoser.com/http://www.on2.com/http://www.on2.com/http://www.nellymoser.com/http://www.collab.net/http://www.apache.org/http://www.adobe.com/go/thirdpartyhttp://creativecommons.org/licenses/by-nc-sa/3.0/


3/695

iiiltima atualizao em 28/4/2010

Contedo

Captulo 1: O que h de novo

Captulo 2: rea de trabalho

Fluxo 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 Dreamweaver

Configurao de um site do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

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

Captulo 4: Criao e gerenciamento de arquivos

Criao 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 bibliotecas

Sobre 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 CSS

Introduo 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 HTML

Uso de auxlios visuais para layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

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

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


4/695

ivUSO DO DREAMWEAVER CS5Contedo


Captulo 8: Adio de contedo a pginas

Trabalho 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 navegao

Sobre 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 pginas

Visualizao de pginas no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

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

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

Captulo 11: Trabalho com cdigo de pgina

Informaes 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 JavaScript

Uso de comportamentos JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346

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

Captulo 13: Trabalho com outros aplicativos

Integrao 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


5/695

vUSO DO DREAMWEAVER CS5Contedo


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

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

Captulo 14: Criao e gerenciamento de modelos

Sobre os modelos do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389Reconhecimento 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 Spry

Sobre 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441Funcionamento 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 Adobe

Servios on-line da Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484

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

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

Captulo 17: Exibio de dados XML com XSLT

Sobre XML e XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493

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

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

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


6/695

viUSO DO DREAMWEAVER CS5Contedo


Captulo 18: Preparao para criao de sites dinmicos

Introduo 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 dinmicas

Otimizao 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 aplicativos

Criao 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) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636Criao 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 formulrios

Coleta de informaes dos usurios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656

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

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

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


7/695

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 BrowserLab

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

Integrao do Business Catalyst

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

Desativar/Ativar CSS

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

Inspeo do CSS

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

Layouts iniciais de CSS

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

Arquivos rel. dinamicamente

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

Navegao de vis. Dinmica

A Navegao de vis. Dinmica ativa links em Visualizao dinmica, permitindo que voc interaja com aplicativos doservidor e dados dinmicos. O recurso permite que voc digite um URL para inspecionar pginas servidas por umservidor 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.
http://www.adobe.com/go/business_catalyst_get_extension_brhttp://www.adobe.com/go/business_catalyst_get_extension_br


8/695

2USO DO DREAMWEAVER CS5O que h de novo


Dicas de cdigo de classe personalizada PHP

As 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 eclasses padro; bem como estruturas de terceiros como a da Zend.

Configurao de sites simplificada

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

Dicas de cdigo especficas do site

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

Aprimoramentos de suporte do Subversion

O Dreamweaver CS5 aumentou o suporte para o Subversion, permitindo que voc mova, copie e exclua arquivoslocalmente, e em seguida sincronize alteraes com seu repositrio remoto SVN. O novo comando Reverter permiteque voc corrija rapidamente conflitos de rvore ou reverta uma verso anterior de um arquivo. Alm disso, uma novaextenso 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 obsoletos

Os 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)


9/695

3USO DO DREAMWEAVER CS5O que h de novo


Mostrar menu pop-up, comportamento JavaScript

Linha do tempo, comportamentos JavaScript

Validar tags

Visualizao Live Data


10/695

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 site

Determine para onde os arquivos so direcionados e examine os requisitos do site, os perfis do pblico-alvo e as metasdo 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 site

No painel Arquivos, voc pode adicionar, excluir e renomear arquivos e pastas com facilidade para alterar aorganizao 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 impedira substituio dos arquivos e sincronizao dos arquivos em sites locais e remotos. No painel Ativos, voc podeorganizar com facilidade os ativos de um site; tambm possvel arrastar a maioria dos ativos diretamente do painelAtivos em um documento do Dreamweaver. Voc tambm pode usar o Dreamweaver para gerenciar aspectos dos seussites do AdobeContribute. Consulte Gerenciamento de arquivos e pastas na pgina 73 e Gerenciamento de ativose bibliotecas na pgina 110.

Layout das pginas da Web

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

Adicionar contedo a pginas

Adicione 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 avalidao de um formulrio quando um visitante clica no boto Enviar ou a abertura de uma segunda janela denavegador quando a pgina principal termina de ser carregada. Finalmente, o Dreamweaver fornece ferramentas paramaximizar o desempenho do site e testar pginas para assegurar a compatibilidade com navegadores da Webdiferentes. Consulte Adio de contedo a pginas na pgina 205.


11/695

5USO DO DREAMWEAVER CS5rea de trabalho


Criar pginas com codificao manual

A codificao manual de pginas da Web outra abordagem de criao de pginas. O Dreamweaver forneceferramentas de edio visual fceis de usar, mas tambm fornece um ambiente de codificao sofisticado; voc podeusar 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 dinmico

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

Criar pginas dinmicas

No Dreamweaver, voc pode definir vrias fontes de contedo dinmico, incluindo conjuntos de registros extradosdos 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 deregistro para ajudar os usurios a rastrearem os registros. Voc pode incluir a lgica de aplicativos ou de negciosusando tecnologias como o Adobe ColdFusion e os servios da Web. Se precisar de mais flexibilidade, voc pode criarcomportamentos de servidor personalizados e formulrios interativos. Consulte Como tornar pginas dinmicas napgina 551.

Testar e publicar

O 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 servidorna pgina 81.

Para assistir a um tutorial em vdeo sobre o que voc pode fazer no Dreamweaver, consultewww.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 trabalhotambm coloca muitas operaes comuns em barras de ferramentas para que voc possa fazer alteraes rapidamenteem seus documentos.

No Windows, o Dreamweaver fornece um layout integrado em uma janela. Na rea de trabalho integrada, todos ospainis e janelas so integrados em uma nica janela maior do aplicativo.
http://www.adobe.com/go/lrvid4040_dw_brhttp://www.adobe.com/go/lrvid4040_dw_br


12/695



A. Barra de aplicativos B. Barra de ferramentas de documento C.Janela do documento D.Alternador da rea de trabalho E. Grupos depainis 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 cadadocumento. O Dreamweaver tambm pode exibir uma rea de trabalho flutuante na qual cada documento aparece emsua prpria janela individual. Os grupos de painis esto inicialmente encaixados, mas podem ser desencaixados emsuas 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 mesmamaneira que no Windows.

A B C E FD

G H I


13/695



A. Barra de aplicativos B. Barra de ferramentas de documento C.Alternador da rea de trabalho D.Janela do documento E. CS LiveF. 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, consultewww.adobe.com/go/lrvid4042_dw_br.

Mais tpicos da Ajuda

Uso de barras de ferramentas, inspetores e menus de contexto na pgina 21Personalizao 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 asjanelas, 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 janelaDocumento (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
http://www.adobe.com/go/lrvid4042_dw_brhttp://www.adobe.com/go/lrvid_4042_brhttp://www.adobe.com/go/lrvid_4042_brhttp://www.adobe.com/go/lrvid4042_dw_br


14/695



A barra de ferramentas Padro (No exibida no layout padro da rea de trabalho.) Contm botes para operaescomuns 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 deferramentas > Padro.

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

A barra de ferramentas Processamento do estilo (Oculta por padro.) Contm botes que permitem ver qual seria aaparncia do seu projeto em tipos de mdia diferentes se voc usasse folhas de estilos dependentes de mdia. Elatambm 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. Cadaobjeto tem propriedades diferentes. O Inspetor de propriedades no expandido por padro no layout Codificador darea 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 eo 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 eelementos de mdia. Cada objeto uma parte do cdigo HTML que permite definir vrios atributos medida que soinseridos. Por exemplo, voc pode inserir uma tabela clicando no boto Tabela do painel Inserir. Se preferir, voc podeinserir 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 emum servidor remoto. O painel Arquivos tambm permite acessar todos os arquivos do disco local, assim como oWindows Explorer (Windows) ou o Finder (Macintosh).

Mais tpicos da AjudaTrabalho 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 desenvolvimentorpido do aplicativo. Nessa visualizao, o Dreamweaver exibe uma representao visual completamente editvel dodocumento, semelhante visualizao da pgina em um navegador.

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

Visualizao Dividir cdigo Uma verso dividida da Visualizao de cdigo que possibilita rolar pelo trabalho emdiferentes 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 emuma nica janela.


15/695



Visualizao dinmica De modo semelhante Visualizao de design, a Visualizao dinmica exibe umarepresentao realista de como seu documento ser exibido em um navegador, e permite que voc interaja com odocumento 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. AVisualizao dinmica de cdigo exibe o cdigo real que o navegador usa para executar a pgina, e pode alterardinamicamente a maneira como voc interage com a pgina na Visualizao dinmica. A Visualizao dinmica decdigo no editvel.

Quando uma janela Documento est maximizada (a padro), as abas aparecem na parte superior da janela, mostrandoos nomes de arquivo de todos os documentos abertos. O Dreamweaver exibir um asterisco aps o nome do arquivose 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 abaixoda 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 najanela Documento, clique no respectivo nome de arquivo na barra de ferramentas Arquivos relacionados.


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 documento

A barra de ferramentas Documento contm botes que permitem alternar rapidamente entre visualizaes diferentesdo documento. A barra de ferramentas tambm contm alguns comandos comuns e opes relacionadas visualizaodo documento e sua transferncia entre sites locais e remotos. A ilustrao abaixo mostra a barra de ferramentasDocumento expandida.

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

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 Opesde 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 podervisualizar 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


16/695



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 umnavegador no menu pop-up.

Atualizar Visualizao de design Atualiza a Visualizao de design do documento depois de serem feitas alteraes naVisualizao de cdigo. As alteraes feitas na Visualizao de cdigo no aparecem automaticamente na Visualizaode 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 apossibilidade 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.


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 botesdo mesmo modo como utilizaria os comandos de menu equivalentes.



Criao e abertura de documentos na pgina 59


17/695



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 aaparncia do seu projeto em tipos de mdia diferentes se voc usasse folhas de estilo dependentes de mdia. Ela tambmcontm 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. Porexemplo, a folha de estilo pode especificar uma regra body para uma mdia de impresso e uma regra body diferentepara 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 processadaem uma tela de computador). Voc pode visualizar os seguintes processamentos de mdia clicando nos botescorrespondentes 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 ouum 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 deoutros 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, consultewww.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 pginaque est visualizando na janela Documento. A partir do Dreamweaver CS5, a visualizao Ativa age como umnavegador 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
http://www.w3.org/TR/CSS21/media.htmlhttp://www.w3.org/TR/CSS21/media.htmlhttp://www.adobe.com/go/vid0156_brhttp://www.adobe.com/go/vid0156_brhttp://www.w3.org/TR/CSS21/media.html


18/695



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


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 decomentrios, o recuo do cdigo e a insero de snippets de cdigo usados recentemente. A barra de ferramentasCodificao aparece verticalmente no lado esquerdo da janela Documento e visvel somente quando a Visualizaode cdigo exibida.

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

Voc tambm pode editar a Barra de ferramentas de codificao para exibir mais botes (como Quebra automtica depalavra, 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, consulteExtenso do Dreamweaver.



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


19/695



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

A. Seletor de tags B. Ferramenta Selecionar C. Ferramenta Mo D. Ferramenta Zoom E. Definir ampliao F.Menu pop-up Tamanho dajanela 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 paraselecionar a tag e todo seu contedo. Clique em para selecionar o corpo inteiro do documento. Para definir osatributos class ou ID de uma tag no seletor de tags, clique com o boto direito do mouse (Windows) ou com a teclaControl 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 janelaDocumento para dimenses predefinidas ou personalizadas.

Tamanho do documento e tempo de download Mostra o tamanho aproximado do documento e o tempo de downloadestimado 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.


Definir o tamanho da janela e a velocidade da conexo na pgina 20Mais 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 pginaselecionado atualmente, como texto ou um objeto inserido. O contedo do Inspetor de propriedades varia de acordocom o elemento selecionado. Por exemplo, se voc selecionar uma imagem da pgina, o Inspetor de propriedadesmudar 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


20/695



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.


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 setransforma 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 espaode 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 tambmpode 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 devalidao 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.


21/695



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 paraRegies 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 lugarcomum.

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 decdigo 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 encaixepadro e solt-lo em uma posio horizontal na parte superior da janela Documento. Ao fazer isso, ele se altera de umpainel para uma barra de ferramentas (embora voc no possa ocult-lo e exibi-lo da mesma forma que se faz com asoutras barras de ferramentas).

Mais tpicos da AjudaUso 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 eexpandir ou reduzir o painel Arquivos. Quando est reduzido, o painel Arquivos exibe o contedo do site local, o siteremoto, o servidor de teste ou o repositrio SVN como uma lista de arquivos. Quando expandido, ele exibe o site locale 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 localou remoto) que aparece por padro no painel reduzido.


22/695




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 selecionadoatualmente (modo Atual) ou as regras e propriedades que afetam o documento inteiro (modo Tudo). Um boto dealternncia na parte superior do painel Estilos CSS permite alternar entre os dois modos. O painel Estilos CSS tambmpermite 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 CSSda seleo atual do documento, o painel Regras que exibe o local das propriedades selecionadas (ou regras em cascatapara a tag selecionada, dependendo da seleo) e o painel Propriedades que permite editar propriedades CSS para aregra que define a seleo.

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

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


Criao e gerenciamento de CSS na pgina 128


23/695



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

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

Usar uma imagem de decalque como fundo da pgina para ajudar a duplicar um projeto criado em um aplicativode 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 doselementos 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 PAse encaixam automaticamente no ponto de grade mais prximo ao serem movidos ou redimensionados. (Outrosobjetos, como imagens e pargrafos, no se encaixam na grade.) O encaixe funciona independentemente davisibilidade da grade.


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 apresentaoon-line da rea de trabalho e do fluxo de trabalho do Dreamweaver, bem como maneiras para migrar seus sites para oDreamweaver. Para obter mais informaes, consulte www.adobe.com/go/learn_dw_golive_br.


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 Visualizaodinmica. Voc tambm tem a opo de exibir a visualizao Dividir cdigo ou as visualizaes de cdigo e de designna 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.
http://www.adobe.com/go/learn_dw_golive_brhttp://www.adobe.com/go/vid0151_brhttp://www.adobe.com/go/vid0151_brhttp://www.adobe.com/go/learn_dw_golive_br


24/695



Alternar para a visualizao Dividir cdigoA visualizao Dividir cdigo divide o documento em dois, assim voc pode trabalhar nas duas sees de cdigo deuma 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, oDreamweaver 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 dajanela Documento. Para exibir a Visualizao de design na parte superior, selecione Exibir > Visualizao de design naparte superior.

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

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 umavisualizao para a outra.

Dividir verticalmente as visualizaesEsta opo est disponvel somente na visualizao Dividir cdigo e nas visualizaes de cdigo e de design (Dividirvisualizao). 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).

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


25/695




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.


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 aparnciafica 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 poderedimensionar um documento quando ele est maximizado. Para restaurar abaixo o documento, clique no botoRestaurar 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 domonitor listado entre parnteses. Por exemplo, voc usaria o tamanho 536 x 196 (640 x 480, Padro) provavelmentese os visitantes estivessem usando o Microsoft Internet Explorer ou o Netscape Navigator nas configuraes padroem um monitor de 640 x 480.

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


26/695



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 alturae 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 Macde 17 pol. prximo a uma entrada de um monitor de 832 x 624 pixels. A maioria dos monitores pode ser ajustada paradiversas 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 tamanhodo download. O tamanho do download da pgina exibido na barra de status. Quando uma imagem selecionada najanela Documento, o tamanho de download da imagem exibido no Inspetor de propriedades.


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


27/695



Relatrios do site Permite melhorar o fluxo de trabalho e testar os atributos HTML no site. Os relatrios de fluxo detrabalho incluem Design Notes verificadas e modificadas recentemente; os relatrios HTML incluem tags de fonteaninhadas que podem ser combinadas, acessibilidade, textos alternativos ausentes, tags aninhadas redundantes, tagsvazias 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.


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 decontexto

Exibir barras de ferramentasUse as barras de ferramentas Documento e Padro para realizar operaes relacionadas a documentos e de ediopadro, a barra de ferramentas de codificao para inserir o cdigo rapidamente e a barra de ferramentasProcessamento do estilo para exibir a pgina exatamente como apareceria em tipos de mdia diferentes. Voc podeexibir 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 qualqueruma 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.


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


28/695



Usar o Inspetor de propriedadesO Inspetor de propriedades permite examinar e editar as propriedades mais comuns do elemento de pginaselecionado atualmente, como texto ou um objeto inserido. O contedo do Inspetor de propriedades varia de acordocom 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 Inspetorde 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.


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 elementoselecionado.

2 Altere qualquer propriedade no Inspetor de propriedades.

Nota: Para obter informaes sobre propriedades especficas, selecione um elemento na janela Documento e clique nocone 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 paraaplic-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 objetoou janela com o qual est trabalhando. Os menus de contexto listam somente os comandos que pertencem seleoatual.

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


29/695



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 trabalhopersonalizadas pode levar a um comportamento inesperado.

Nota: os exemplos a seguir usam o Photoshop para fins demonstrativos. A rea de trabalho funciona da mesma formaem 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 nogrupo.

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


30/695



Nota: No Photoshop voc tambm pode selecionar Janela > Organizar > Flutuar na janela para flutuar uma nicajanela de documento ou Janela > Organizar > Flutuar tudo nas janelas para flutuar tudo das janelas de documentode 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 Minimizarda janela do documento para criar janelas flutuantes (Windows) ou selecione Janela > Lado a Lado Verticalmentepara criar janelas de documentos lado a lado. Pesquise "Lado a Lado Verticalmente" no Ajuda do Dreamweaver paraobter mais informaes sobre este tpico.

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

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

Nota: alguns produtos no tm suporte para essa funcionalidade. No entanto, seu produto pode conter os comandosCascata 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 algunsinstantes.

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 inferio

Documents

Apostila Dreamweaver CS5 PortugueÌ‚s