apostila dreamweaver cs4

725
Uso do ADOBE ® DREAMWEAVER ® CS4

Upload: felipe

Post on 11-Jun-2015

19.567 views

Category:

Documents


0 download

DESCRIPTION

Manual completo do DreamWeaver CS4, material oficial Adobe.

TRANSCRIPT

Uso do

ADOBE DREAMWEAVER CS4

2008 Adobe Systems Incorporated. Todos os direitos reservados.Copyright

Uso do Adobe Dreamweaver CS4 para sistemas operacionais Windows e Mac Se distribudo com o software que inclui um acordo de usurio final, este guia, juntamente com o software nele descrito, ficar sujeito licena, podendo ser usado ou copiado apenas de acordo com os termos dessa licena. Exceto conforme permitido por esta licena, nenhuma parte deste guia pode ser reproduzida, armazenada em um sistema de recuperao ou transmitida, em nenhuma forma ou meio eletrnico, mecnico, de gravao, ou semelhante, sem a permisso prvia por escrito da Adobe Systems Incorporated. Observe que o contedo deste guia est protegido por leis de direitos autorais, mesmo no sendo distribudo com o software que inclui um contrato de licena de usurio final. O contedo deste guia foi desenvolvido apenas para fins informativos, est sujeito a alteraes sem aviso prvio e no deve ser considerado um compromisso firmado pela Adobe Systems Incorporated. A Adobe Systems Incorporated no se responsabiliza por erros ou imprecises que possam aparecer no contedo informativo deste guia. Lembre-se de que os desenhos ou imagens existentes e cogitados para incluso em projetos podem estar protegidos por leis de direitos autorais.. A incorporao no autorizada desse material em um novo trabalho pode ser considerada uma violao dos direitos autorais do respectivo detentor. Certifique-se de obter a permisso necessria do detentor em questo. Todas as referncias a nomes de empresas em modelos de amostra so apenas para fins demonstrativos e no tm o objetivo de fazer aluses a nenhuma organizao real. 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 US 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. This product includes software developed by the Apache Software Foundation (http://www.apache.org/). The Graphics Interchange Format is the Copyright property of CompuServe Incorporated. GIF(sm) is a Service Mark property of CompuServe Incorporated. MPEG Layer-3 audio compression technology licensed by Fraunhofer IIS and Thomson Multimedia (http://www.mp3licensing.com). You cannot use the MP3 compressed audio within the Software for real time or live broadcasts. If you require an MP3 decoder for real time or live broadcasts, you are responsible for obtaining this MP3 technology license. 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 includes software developed by the OpenSymphony Group (http://www.opensymphony.com/) Sorenson Spark video compression and decompression technology licensed from Sorenson Media, Inc.

The Proximity/Merriam-Webster Inc./Franklin Electronic Publishers Inc. Database 1990/1994 Merriam-Webster Inc./Franklin Electronic Publishers Inc., 1994. All Rights Reserved. Proximity Technology Inc. The Proximity/Merriam-Webster Inc./Franklin Electronic Publishers Inc. 1990 Williams Collins Sons & Co. Ltd. 1997 - All rights reserved Proximity Technology Inc. 1990 Williams Collins Sons & Co. Ltd. 1990 - All rights reserved Proximity Technology Inc. Oxford University Press 2000. All rights reserved Proximity Technology Inc. 1990 IDE a.s. 1990 - All rights reserved Proximity Technology Inc. This product includes software developed by Fourthought, Inc. (http://www.fourthought.com). This product includes software developed by CollabNet (http://www.Collab.Net/) Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA. 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. Unpublishedrights 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.

iii

ContedoCaptulo 1: Recursos Ativao e registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Ajuda e suporte O que h de novo ....................................................................................................... 2 ........................................................................................... 2 ..................................................................................................... 4 Servios, downloads e extras

Captulo 2: rea de trabalho Fluxo e rea de trabalho do Dreamweaver Trabalho na janela Documento

............................................................................. 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Uso de barras de ferramentas, inspetores e menus de contexto Personalizao da rea de trabalho do CS4 Atalhos do teclado Extenses

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Captulo 3: Trabalho com sites do Dreamweaver Configurao de um site do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Gerenciamento de sites do Contribute com o Dreamweaver Trabalho em arquivos sem definir um site Opes da aba Bsica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

Captulo 4: Criao e gerenciamento de arquivos Criao e abertura de documentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Gerenciamento de arquivos e pastas Devoluo e retirada de arquivos Sincronizao de arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Obteno e colocao de arquivos no servidor

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Criao de arquivos InContext Editing

Comparao de arquivos em busca de diferenas Reverso de arquivos (usurios do Contribute) Encobrimento de pastas e arquivos no site Teste do site

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Armazenamento de informaes de arquivo em Design Notes

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Captulo 5: Gerenciamento de ativos e bibliotecas Sobre os ativos e as bibliotecas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Trabalho com ativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Criao e gerenciamento de uma lista dos ativos favoritos Trabalho com itens de biblioteca

Captulo 6: Criao de pginas com CSS Introduo s folhas de estilos em cascata Criao e gerenciamento de CSS Layout das pginas com CSS Trabalho com tags div

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

UTILIZAO DO DREAMWEAVER CS4 ivContedo

Captulo 7: Layout de pginas com HTML Uso de auxlios visuais para layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Apresentao do contedo em tabelas Uso de quadros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

Captulo 8: Adio de contedo a pginas Trabalho com pginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Adio e formatao do texto Insero de arquivos SWF Insero de arquivos FLV Adio de som . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Adio e modificao de imagens

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Adio de outros objetos de mdia Automao de tarefas

Captulo 9: Vinculao e navegao Sobre vinculao e navegao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 Vinculao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Menus de salto

Barras de navegao Mapas de imagem

Soluo de problemas de links

Captulo 10: Visualizao de pginas Visualizao de pginas no Dreamweaver Visualizao de pginas em navegadores

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

Visualizao de pginas em dispositivos mveis

Captulo 11: Trabalho com cdigo de pgina Informaes gerais sobre a codificao no Dreamweaver Configurao do ambiente de codificao Gravao e edio do cdigo Recolhimento de cdigo Configuraes das preferncias de codificao

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

Otimizao e depurao do cdigo

Edio do cdigo na Visualizao de design Trabalho com as incluses de servidor Gerenciamento de bibliotecas de tags

Trabalho com o contedo de cabealho das pginas

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

Importao de tags personalizadas para o Dreamweaver

Captulo 12: Adio de comportamentos JavaScript Uso de comportamentos JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 Aplicao de comportamentos internos do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

Captulo 13: Trabalho com outros aplicativos Integrao com vrios aplicativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379 Trabalho com o Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380

UTILIZAO DO DREAMWEAVER CS4 vContedo

Trabalho com o Photoshop Trabalho com o Flash Trabalho com o Bridge

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

Trabalho com o Device Central Trabalho com o ConnectNow

Gerenciar conexes para servios da Web

Captulo 14: Criao e gerenciamento de modelos Sobre os modelos do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 Reconhecimento de modelos e documentos baseados em modelo Criao de um modelo do Dreamweaver Criao de regies editveis Criao de regies repetitivas Utilizao de regies opcionais Criao de um modelo aninhado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421

Definio de atributos de tag editveis

Edio, atualizao e excluso de modelos

Exportao e importao de contedo de modelo

Aplicao ou remoo de um modelo em um documento Sintaxe do modelo

Edio de contedo em um documento baseado em modelo Configurao de preferncias de criao para os modelos

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435

Captulo 15: Criao visual de pginas do Spry Sobre a estrutura do Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437 Trabalho com widgets do Spry (instrues gerais) Funcionamento do widget Acordeo Funcionamento do widget Barra de menus Funcionamento do widget Painel flexvel Funcionamento do widget Painis com aba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457

Funcionamento do widget Dica de ferramenta

Trabalho com o widget Grupo de botes de opo de validao Funcionamento do widget Campo de texto de validao Funcionamento do widget rea de texto de validao Funcionamento do widget Seleo de validao Funcionamento do widget Senha de validao Exibio de dados com o Spry Incluso de efeitos do Spry

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475

Funcionamento do widget Caixa de seleo de validao Trabalho com o widget Confirmao de validao

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492

Captulo 16: Exibio de dados XML com XSLT Sobre XML e XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497 Execuo de transformaes XSL no servidor Execuo de transformaes XSL no cliente Entidades de caractere ausentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523

UTILIZAO DO DREAMWEAVER CS4 viContedo

Captulo 17: Preparao para criao de sites dinmicos Introduo aos aplicativos da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526 Configurar o computador para o desenvolvimento de aplicativo Conexes de banco de dados para desenvolvedores do ASP Conexes de banco de dados para desenvolvedores do PHP Soluo de problemas das conexes de banco de dados Remoo de scripts de conexo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 Conexes de banco de dados para desenvolvedores do ColdFusion

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555

Captulo 18: Como tornar pginas dinmicas Otimizao do espao de trabalho para desenvolvimento visual Criao de pginas dinmicas Painis de contedo dinmico Viso geral das fontes de contedo dinmico Definio de origens de contedo dinmico Adio de contedo dinmico a pginas Alterao do contedo dinmico Visualizao de dados dinmicos Exibio de registros de banco de dados

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 598

Adio de comportamentos de servidor personalizados

Captulo 19: Criao visual de aplicativos Criao de pginas mestre e detalhadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615 Criao de pginas de pesquisa e de resultados Criao de pginas para insero de registro Criao de pginas para atualizar um registro Criao de pginas para excluir um registro Criao de uma pgina de registro Criao de uma pgina de logon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658

Criao de uma pgina que apenas usurios autorizados podem acessar Proteo de uma pasta no aplicativo (ColdFusion) Uso de componentes do ColdFusion

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659

Captulo 20: Criao de formulrios Coleta de informaes dos usurios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666 Criao de formulrios da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 669 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 683 Criao dos formulrios do ColdFusion Captulo 21: Acessibilidade Dreamweaver e acessibilidade ndice

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 697

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701

1

Captulo 1: RecursosAntes de comear a trabalhar com o software, dedique algum tempo leitura de uma viso geral sobre a ativao e os diversos recursos disponveis a voc. Voc tem acesso a vdeos de instruo, plug-ins, modelos, comunidades de usurio, seminrios, tutoriais, RSS feeds e muito mais.

Ativao e registroAjuda na instalaoPara obter ajuda na instalao, consulte a Central de suporte de instalao em www.adobe.com/go/cs4install_br.

Ativao de licenaDurante o processo de instalao, o software da Adobe contata a Adobe para concluir o processo de ativao de licena. Nenhum dado pessoal transmitido. Para obter mais informaes sobre a ativao do produto, visite o site da Adobe em www.adobe.com/go/activation_br. A ativao da licena comercial de um usurio suporta dois computadores. Por exemplo, possvel instalar o produto em um computador desktop no trabalho e em um computador laptop em casa. Se desejar instalar o software em um terceiro computador, primeiro desative-o em um dos dois computadores. Escolha Ajuda > Desativar.

RegistroRegistre o produto para receber suporte gratuito para instalao, notificaes de atualizaes e outros sevios. Para registrar o produto, siga as instrues na tela da caixa de dilogo Registro, que exibida aps a instalao do

software. Se voc adiar o registro, poder registrar o produto a qualquer momento escolhendo Ajuda > Registro.

Programa de aperfeioamento de produtos da AdobeDepois que voc usar o software da Adobe um certo nmero de vezes, uma caixa de dilogo aparece, perguntando se deseja participar do Programa de Melhoria dos Produtos Adobe. Se optar por participar, os dados sobre o uso do software da Adobe sero enviados Adobe. Nenhuma informao pessoal ser gravada ou enviada. O Programa de Aprimoramento do Produto Adobe somente coleta as informaes sobre os recursos e as ferramentas usados e com que freqncia so usados. Voc pode entrar ou sair do programa a qualquer momento:

Para participar, escolha Ajuda > Programa de Melhoria dos Produtos Adobe e clique em Sim, participar. Para deixar de participar, escolha Ajuda > Programa de Melhoria dos Produtos Adobe e clique em No, obrigado.

UTILIZAO DO DREAMWEAVER CS4 2Recursos

Leia-meUm arquivo Leia-me do software est disponvel on-line e no disco de instalao. Abra o arquivo para ler informaes importantes sobre tpicos como os seguintes:

Requisitos do sistema Instalao (incluindo a desinstalao do software) Ativao e registro Instalao de fontes Soluo de problemas Suporte ao cliente Avisos legais

Ajuda e suporteAjuda da comunidadeA ajuda da comunidade um ambiente integrado no site adobe.com que fornece acesso a contedo gerado pela comunidade, moderado por especialistas da Adobe e do setor. Comentrios fornecidos pelos usurios ajudam a orient-lo para obter respostas. Pesquise a Ajuda da comunidade para encontrar o melhor contedo na Web sobre produtos e tecnologias Adobe, incluindo estes recursos:

Vdeos, tutoriais, dicas e tcnicas, blogs, artigos e exemplos para designers e desenvolvedores. A Ajuda online completa atualizada regularmente e mais completa que a Ajuda fornecida com o produto. Seestiver conectado Internet quando acessar a Ajuda, voc ver automaticamente a Ajuda on-line completa em vez de um subconjunto fornecido com o produto.

Os demais contedos no site Adobe.com, inclusive artigos do banco de dados de suporte, downloads e atualizaes,Developer Connection e muito mais. Use o campo de busca da ajuda na interface do usurio do produto para acessar a Ajuda da comunidade. Para obter um vdeo da Ajuda da comunidade, consulte www.adobe.com/go/lrvid4117_xp_br.

Outros recursosEdies impressas da Ajuda on-line completa esto disponveis pelo custo de remessa e manipulao em www.adobe.com/go/store_br. A Ajuda on-line tambm inclui um link da verso em PDF da Ajuda completa e atualizada. Visite o site de suporte da Adobe, em www.adobe.com/br/support, para obter informaes sobre opes de suporte tcnico pago e gratuito.

Servios, downloads e extras possvel aprimorar seu produto ao integrar uma variedade de servios, plug-ins e extenses. Tambm possvel fazer o download e amostras e outros recursos para ajud-lo a terminar seu trabalho.

UTILIZAO DO DREAMWEAVER CS4 3Recursos

Servio on-line do Adobe CreativeO Adobe Creative Suite 4 inclui novos recursos online que trazem o poder da Web para o seu computador. Use esses recursos para se conectar comunidade, colaborar e aproveitar mais suas ferramentas Adobe. Poderosos servios online Creative permitem que voc conclua tarefas, que variam entre a correspondncia de cor e a conferncia de dados. Os servios integram-se diretamente aos aplicativos de desktop, para que voc possa aprimorar rapidamente os fluxos de trabalho existentes. Alguns servios oferecem funcionalidade completa ou parcial quando voc est off-line tambm. Visite o site Adobe.com para saber mais sobre os servios disponveis. Alguns aplicativos Creative Suite 4 incluem estas ofertas iniciais:Painel Kuler Crie, compartilhe e explore rapidamente temas de cor online. Adobe ConnectNow Colabore com equipes de trabalho dispersas pela Web, compartilhando voz, dados e multimdia. Centro de recursos Acesse imediatamente os tutoriais, os arquivos de amostra e as extenses dos aplicativos de vdeo

digital da Adobe. Para obter mais informaes, consulte o site da Adobe em www.adobe.com/go/learn_creativeservices_br.

Adobe ExchangeVisite o Adobe Exchange em http://www.adobe.com/go/exchange_br para fazer o download de amostras, assim como milhares de plug-ins e extenses dos desenvolvedores da Adobe e de terceiros. Os plug-ins e as extenses podem ajudar a automatizar tarefas, personalizar fluxos de trabalho, criar efeitos profissionais especializados e mais.

Downloads da AdobeVisite www.adobe.com/go/downloads_br para encontrar atualizaes, testes e outros softwares teis gratuitos.

Adobe LabsO Adobe Labs em http://www.adobe.com/go/labs_br fornece a oportunidade para experimentar e avaliar as novas tecnologias e produtos emergentes da Adobe. No Adobe Labs, voc pode acessar recursos, como:

Pr-lanamentos de softwares e tecnologias Amostras de cdigo e prticas recomendadas para acelerar seu aprendizado Verses anteriores do produto e documentao tcnica Os fruns, contedos baseados em wiki e outros recursos colaborativos ajudam voc a interagir com usurios damesma opinio O Adobe Labs promove um processo de desenvolvimento de software colaborativo. Nesse ambiente, os clientes tornam-se rapidamente produtivos com os novos produtos e tecnologias. O Adobe Labs tambm um frum para feedback inicial. As equipes de desenvolvimento da Adobe usam esse feedback para criar softwares que atendem s necessidades e s expectativas da comunidade.

Adobe TVVisite Adobe TV em http://tv.adobe.com para ver vdeos de instruo e inspirativos.

UTILIZAO DO DREAMWEAVER CS4 4Recursos

ExtrasO disco de instalao contm vrios extras para ajud-lo a aproveitar ao mximo o software da Adobe. Alguns extras so instalados no seu computador durante o processo de configurao, outros esto localizados no disco. Para visualizar os extras instalados durante o processo de configurao, navegue at a pasta de aplicativos no seu computador.

Windows: [unidade de inicializao]\Arquivos de Programas\Adobe\[aplicativo Adobe] Mac OS: [unidade de inicializao]/Applications/[aplicativo Adobe]Para visualizar os extras do disco, navegue at a pasta Utilitrios na pasta do seu idioma no disco. Exemplo:

/Portugus/Utilitrios

O que h de novoA seguir apresentamos uma lista dos novos recursos principais do Adobe Dreamweaver CS4. Visualizao dinmica O Dreamweaver CS4 permite que voc desenvolva suas pginas da Web sob condies reais do navegador com a nova Visualizao dinmica, ainda mantendo acesso direto ao cdigo. As alteraes feitas no cdigo so imediatamente refletidas na exibio processada. Consulte Visualizao de pginas no Dreamweaver na pgina 301. Dicas de cdigo para estruturas Ajax e JavaScript Agora voc pode escrever JavaScript de forma mais rpida e mais precisa com suporte aperfeioado para objetos centrais JavaScript e tipos de dados primitivos. Voc tambm pode colocar a funcionalidade de codificao estendida do Dreamweaver para funcionar, incorporando estruturas JavaScript populares que incluem jQuery, Prototype e Adobe Spry. Consulte Uso de dicas de cdigo na pgina 318. Arquivos relacionados e Navegador de cdigo O Dreamweaver CS4 permite gerenciar de maneira eficiente os diversos arquivos que constituem as atuais pginas da Web. Clique em qualquer arquivo relacionado para visualizar a respectiva fonte na Visualizao de cdigo e a pginapai na Visualizao de design. O novo recurso Navegador de cdigo exibe todos os cdigos-fonte que afetam sua seleo atual, como regras CSS, incluses de servidor, funes JavaScript externas, modelos do Dreamweaver, arquivos de cdigo-fonte iFrame e muito mais. Consulte Abrir arquivos relacionados na pgina 76 e Navegao no cdigo relacionado na pgina 327. InContext Editing Voc pode permitir que usurios finais faam edies simples em pginas da Web sem a sua ajuda ou a de um software adicional. Como designer do Dreamweaver, voc pode limitar alteraes a pginas especficas, regies distintas e at opes de formatao personalizadas, de maneira rpida e fcil. Consulte Criao de arquivos InContext Editing na pgina 103. Prticas CSS recomendadas O Inspetor de propriedades do Dreamweaver CS4 permite criar novas regras CSS e oferece explicaes claras e simples sobre onde cada propriedade se encaixa na cascata de estilos. Consulte Definir propriedades de texto no Inspetor de propriedades na pgina 240.

UTILIZAO DO DREAMWEAVER CS4 5Recursos

Conjuntos de dados HTML Voc pode integrar a eficincia dos dados dinmicos em suas pginas da Web sem a curva de aprendizagem dos bancos de dados mestre ou da codificao XML. Os conjuntos de dados do Spry reconhecem contedo em uma tabela HTML simples como fonte de dados interativa. Consulte Criar um conjunto de dados HTML do Spry na pgina 479. Objetos inteligentes do Adobe Photoshop Insira qualquer documento PSD (Photoshop Data File) do Adobe Photoshop no Dreamweaver para criar um objeto inteligente de imagem. Os objetos inteligentes so perfeitamente vinculados ao arquivo de origem. Faa alteraes na imagem de origem e atualize-a no Dreamweaver sem abrir o Photoshop. Consulte Trabalho com o Photoshop na pgina 387. Integrao do Subversion O Dreamweaver CS4 integra o software Subversion, um sistema de controle de verso de fonte aberta, para oferecer uma experincia de devoluo/retirada mais robusta. Atualize seu site e devolva modificaes diretamente de dentro do Dreamweaver. Consulte Usar o SVN (Subversion) para obter e devolver arquivos na pgina 96. Nova interface do usurio Trabalhe de maneira mais rpida e inteligente em componentes do Adobe Creative Suite 4 com um design de interface de usurio compartilhada. Alterne rapidamente de um ambiente de trabalho para o seguinte com o alternador de espao de trabalho. Consulte rea de trabalho na pgina 6. Recursos obsoletos Os seguintes recursos se tornaram obsoletos no Dreamweaver CS4:

Linhas de tempo Servios da Web Modo de layout Visualizao Mapa do site Suporte Java Bean Elementos do Adobe Flash (Visualizador de imagens) Texto do Adobe Flash e botes do Adobe Flash Conjuntos de registros e comportamentos de servidor ASP.NET e JSP

6

Captulo 2: rea de trabalhoA rea de trabalho do Adobe Dreamweaver CS4 contm as barras de ferramentas, os inspetores e os painis usados para criar pginas da Web. Voc pode personalizar a aparncia geral e o comportamento da rea de trabalho.

Fluxo e rea de trabalho do DreamweaverViso 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 metas do site. Alm disso, avalie os requisitos tcnicos, como acesso do usurio, bem como as restries de navegador, plugin 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 39. Organizar e gerenciar arquivos do seu site No 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 79 e Gerenciamento de ativos e bibliotecas na pgina 122. Layout das pginas da Web Escolha 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 AP, 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 135 e Layout de pginas com HTML na pgina 183.

UTILIZAO DO DREAMWEAVER CS4 7rea de trabalho

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 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 217. Criar pginas com codificao manual A 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 306. Configurar um aplicativo da Web para contedo dinmico Muitos 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 526. Criar pginas dinmicas No 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 556. 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 servidor na pgina 87. 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.

UTILIZAO DO DREAMWEAVER CS4 8rea de trabalho

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 B C D E

F

G

H

A. Barra de aplicativos B. Barra de ferramentas de documento C. Janela do documento D. Grupos de painis E. Alternador da rea de trabalho F. Seletor de tags G. Inspetor de propriedades H. 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.

UTILIZAO DO DREAMWEAVER CS4 9rea de trabalho

A

B

C

D

E

F

G

H

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. Seletor de tags G. Inspetor de propriedades H. Painel Arquivos

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

Consulte tambmUso de barras de ferramentas, inspetores e menus de contexto Personalizao da rea de trabalho do CS4 Exibir documentos com abas (Dreamweaver Macintosh) 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 Design e Cdigo), vrias opes de visualizao e algumas operaes comuns, como a visualizao em um navegador.

UTILIZAO DO DREAMWEAVER CS4 10rea de trabalho

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

Consulte tambmTrabalho na janela Documento na pgina 19 Uso de barras de ferramentas, inspetores e menus de contexto na pgina 23 Gerenciamento de janelas e painis na pgina 25

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 ColdFusion (CFML)) e qualquer outro tipo de cdigo.Visualizao Dividir cdigo Uma verso dividida da visualizao Cdigo que possibilita rolar pelo trabalho em

diferentes sees do documento ao mesmo tempo.Visualizaes Cdigo e Design Permite ver as visualizaes Cdigo e Design para o mesmo documento em uma nica

janela.

UTILIZAO DO DREAMWEAVER CS4 11rea de trabalho

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

Consulte tambmTrabalho na janela Documento na pgina 19 Sobre a visualizao dinmica na pgina 301 Abrir arquivos relacionados na pgina 76 Exibir dados dinmicos na Visualizao de design na pgina 598 Informaes gerais sobre a codificao no Dreamweaver na pgina 306

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 B C D E F G H I J K L M

A. Mostrar visualizao de cdigo B. Mostrar visualizaes de cdigo e do projeto C. Mostrar visualizao do projeto D. Visualizao dinmica E. Visualizao dinmica de cdigo F. Ttulo do documento G. Gerenciamento de arquivos H. Visualizar/depurar no navegador I. Atualizar visualizao de design J. Opes de visualizao K. Auxlios visuais L. Validar markup M. Verificao de compatibilidade do navegador

As seguintes opes aparecem na barra de ferramentas Documento:Mostrar visualizao de cdigo Exibe somente a visualizao Cdigo na janela Documento. Mostrar visualizaes de cdigo e do projeto Divide a janela Documento entre as visualizaes Cdigo e Design. Quando voc seleciona essa visualizao combinada, a opo Visualizao de design visvel ativada no menu Opes de visualizao. Mostrar visualizao do projeto Exibe somente a Visualizao de design na janela Documento.

UTILIZAO DO DREAMWEAVER CS4 12rea de trabalho

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.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: Design, 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.

Consulte tambmExibir barras de ferramentas na pgina 23 Visualizao de pginas na Visualizao dinmica na pgina 301 Configuraes das preferncias de codificao na pgina 313 Visualizar e editar o contedo de cabealho na pgina 347 Uso de auxlios visuais para layout na pgina 183

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.

Consulte tambmExibir barras de ferramentas na pgina 23 Criao e abertura de documentos na pgina 67

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.

UTILIZAO DO DREAMWEAVER CS4 13rea de trabalho

A

B

C

D

E

F

G

H

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.

Consulte tambmDefinir o tamanho da janela e a velocidade da conexo na pgina 22 Mais zoom e Menos zoom na pgina 228 Redimensionar a janela Documento na pgina 21 Definir o tempo de download e as preferncias de tamanho na pgina 229

UTILIZAO DO DREAMWEAVER CS4 14rea de trabalho

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.

Consulte tambmExibir barras de ferramentas na pgina 23 Inserir cdigo com a Barra de ferramentas de codificao na pgina 321

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.

UTILIZAO DO DREAMWEAVER CS4 15rea de trabalho

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.

Consulte tambmExibir barras de ferramentas na pgina 23

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

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

Consulte tambmEncaixe e desencaixe de painis na pgina 26 Usar o Inspetor de propriedades na pgina 23

UTILIZAO DO DREAMWEAVER CS4 16rea de trabalho

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

UTILIZAO DO DREAMWEAVER CS4 17rea de trabalho

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

Consulte tambmUso do painel Inserir na pgina 217 Criao visual de pginas do Spry na pgina 437

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.

Consulte tambmTrabalhar com arquivos no painel Arquivos na pgina 82

UTILIZAO DO DREAMWEAVER CS4 18rea de trabalho

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.

Consulte tambmCriao e gerenciamento de CSS na pgina 140

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 seajustam na pgina.

UTILIZAO DO DREAMWEAVER CS4 19rea de trabalho

Usar uma imagem de rastreamento como fundo da pgina para ajudar a duplicar um projeto criado em umaplicativo 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 doselementos de pgina.

Usar a grade para posicionar com preciso e redimensionar os elementos absolutamente posicionados (elementos AP).As marcas de grade na pgina ajudam a alinhar os elementos AP e, quando o encaixe est ativado, os elementos AP 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.

Consulte tambmUso de auxlios visuais para layout na pgina 183

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.

Consulte tambmTutorial do Dreamweaver para usurios do GoLive

Trabalho na janela DocumentoAlternar 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 Cdigo e design na horizontal ou na vertical. (A exibio horizontal o padro.)

Passar para a visualizao 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.

UTILIZAO DO DREAMWEAVER CS4 20rea de trabalho

Passar para a Visualizao de design Siga um destes procedimentos:

Selecione Visualizar > Design. Na barra de ferramentas Documento, clique no boto Mostrar visualizao do projeto

Mostrar visualizaes de cdigo e do projeto Siga um destes procedimentos:

Selecione Exibir > Cdigo e design. Na barra de ferramentas Documento, clique no boto Mostrar visualizaes de cdigo e designPor 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. 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.

Alternar entre as visualizaes de cdigo e do projeto 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 Cdigo e 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 Cdigo e

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, o Dreamweaver manter a taxa de diviso, assim as duas visualizaes sempre estaro visveis.

Consulte tambmViso geral da janela Documento na pgina 10 Visualizao de pginas na Visualizao dinmica na pgina 301

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.

Consulte tambmGerenciamento de janelas e painis na pgina 25 Exibir documentos com abas (Dreamweaver Macintosh) na pgina 31

UTILIZAO DO DREAMWEAVER CS4 21rea de trabalho

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.

UTILIZAO DO DREAMWEAVER CS4 22rea de trabalho

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.

Consulte tambmViso geral da barra de status na pgina 12 Redimensionar a janela Documento na pgina 21

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.

Consulte tambmProcura tags, atributos ou texto no cdigo na pgina 331 Uso do material de referncia a linguagem na pgina 332 Teste do site na pgina 118

UTILIZAO DO DREAMWEAVER CS4 23rea de trabalho

Validar tags na pgina 338 Verificar compatibilidade de navegador na pgina 337 Encontrar links rompidos, externos e rfos na pgina 298 Colocar arquivos em um servidor remoto na pgina 90 Obter arquivos de um servidor remoto na pgina 89 Usar o depurador do ColdFusion (somente Windows) na pgina 339

Uso de barras de ferramentas, inspetores e menus de contextoExibir 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 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.

Consulte tambmViso geral da barra de ferramentas de documento na pgina 11 Viso geral da barra de ferramentas Padro na pgina 12 Viso geral da barra de ferramentas de codificao na pgina 14 Viso geral da barra de ferramentas Processamento do estilo na pgina 14

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.

Consulte tambmViso geral do Inspetor de propriedades na pgina 15 Definir propriedades de texto no Inspetor de propriedades na pgina 240

UTILIZAO DO DREAMWEAVER CS4 24rea de trabalho

Encaixe e desencaixe de painis na pgina 26 Alterar atributos com o Inspetor de tags na pgina 341

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.

UTILIZAO DO DREAMWEAVER CS4 25rea de trabalho

2 Selecione um comando no menu de contexto.

Personalizao da rea de trabalho do CS4Gerenciamento 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. Nota: os exemplos a seguir usam o Photoshop para fins demonstrativos. A rea de trabalho funciona da mesma forma em todos os produtos.A B

C

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

UTILIZAO DO DREAMWEAVER CS4 26rea de trabalho

No Photoshop, possvel alterar o tamanho da fonte do texto do Painel de controle, painis e dicas de ferramentas. Escolha um tamanho no menu Tamanho da fonte da UI nas Preferncias da interface.

Gerenciar janelas de documentoQuando 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 uma janela Documento