You are on page 1of 697

Uso do

ADOBE DREAMWEAVER CS5

ltima atualizao em 28/4/2010

2010 Adobe Systems Incorporated and its licensors. All rights reserved.
Copyright

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

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

ltima atualizao em 28/4/2010

iii

Contedo
Captulo 1: O que h de novo Captulo 2: rea de trabalho Fluxo e rea de trabalho do Dreamweaver Trabalho na janela Documento

............................................................................. 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Devoluo e retirada de arquivos Sincronizao de arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Obteno e colocao de arquivos no servidor

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Armazenamento de informaes de arquivo em Design Notes

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Captulo 5: Gerenciamento de ativos e bibliotecas Sobre os ativos e as bibliotecas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Trabalho com ativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

Captulo 7: Layout de pginas com HTML Uso de auxlios visuais para layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Apresentao do contedo em tabelas Uso de quadros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 iv


Contedo

Captulo 8: Adio de contedo a pginas Trabalho com pginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Adio e formatao do texto Insero de arquivos SWF Insero de arquivos FLV Adio de Widgets da Web Adio de som . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Adio e modificao de imagens

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

Adio de outros objetos de mdia Automao de tarefas

Captulo 9: Vinculao e navegao Sobre vinculao e navegao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Vinculao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Importao de tags personalizadas para o Dreamweaver

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 Trabalho com o Photoshop e Dreamweaver Trabalho com o Flash e Dreamweaver Trabalho com o Adobe Bridge Trabalho com o Device Central . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 v


Contedo

Trabalho com o ConnectNow

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383

AIR Extension para Dreamweaver

Captulo 14: Criao e gerenciamento de modelos Sobre os modelos do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421

Captulo 15: Criao visual de pginas do Spry Sobre a estrutura do Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423 Funcionamento dos 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

Funcionamento do widget Dica de ferramenta

Funcionamento do 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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462

Funcionamento do widget Caixa de seleo de validao Funcionamento do widget Confirmao de validao

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479

Captulo 16: Uso dos servios on-line da Adobe Servios on-line da Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484 BrowserLab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486 Business Catalyst InContext Editing

Captulo 17: Exibio de dados XML com XSLT Sobre XML e XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493 Execuo de transformaes XSL no servidor Execuo de transformaes XSL no cliente Entidades de caracteres ausentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 vi


Contedo

Captulo 18: Preparao para criao de sites dinmicos Introduo aos aplicativos da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 Configurao do computador para o desenvolvimento de aplicativo Conexes de banco de dados para desenvolvedores do ColdFusion 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545

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

Captulo 19: Como tornar pginas dinmicas Otimizao da rea 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 live data Exibio de registros de banco de dados

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 592

Adio de comportamentos de servidor personalizados

Captulo 20: Criao visual de aplicativos Criao de pginas mestre e detalhadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 648

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649

Captulo 21: Criao de formulrios Coleta de informaes dos usurios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656 Criao de formulrios da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674 Criao dos formulrios do ColdFusion Captulo 22: Acessibilidade Dreamweaver e acessibilidade

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688

ltima 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 uma soluo rpida e precisa para teste de compatibilidade de vrios navegadores. Com o BrowserLab possvel visualizar pginas da Web e contedo local usando mltiplas visualizaes e ferramentas para comparao. Consulte BrowserLab na pgina 484. Integrao do Business Catalyst O Adobe Business Catalyst um aplicativo de hospedagem que substitui ferramentas tradicionais da rea de trabalho por uma plataforma central para designers da Web. O aplicativo funciona em conjunto com o Dreamweaver e permite que voc construa tudo, desde sites bsicos controlados por dados at poderosas lojas on-line. Consulte http://www.adobe.com/go/business_catalyst_get_extension_br. Desativar/Ativar CSS O recurso Ativar/desativar CSS permite que voc desative ou reative as propriedades do CSS diretamente no painel Estilos CSS. A desativao de uma propriedade CSS faz com que simplesmente no haja comentrios sobre a propriedade especfica sem ter que exclu-la. Consulte Desativar/Ativar CSS na pgina 145. Inspeo do CSS O modo Inspeo permite que voc exiba visualmente as propriedades de modelo de caixa do CSSincluindo preenchimento, borda e margemcom detalhes, sem leitura de cdigo ou necessidade um utilitrio separado de outros fabricantes como o Firebug. Consulte Inspecionar CSS na visualizao ativa na pgina 145. Layouts iniciais de CSS O Dreamweaver CS5 inclui layouts iniciais de CSS simplificados e atuais. Os complexos seletores descendentes dos layouts do CS4 foram retirados e substitudos por outros mais simples e fceis de entender. Consulte Criar uma pgina com um layout CSS na pgina 154 Arquivos rel. dinamicamente O recurso Arquivos rel. dinamicamente permite que voc identifique tudo nos arquivos e scripts externos necessrios para montar pginas de Sistema de gerenciamento de contedo (CMS) com base em PHP alm de exibir os nomes dos arquivos na barra de ferramentas Arquivos relacionados. Por padro, o Dreamweaver oferece suporte para identificao de arquivos em estruturas CMS do WordPress, Drupal e Joomla! Estruturas CMS. Consulte Abrir Arquivos rel. dinamicamente na pgina 70. Navegao de vis. Dinmica A Navegao de vis. Dinmica ativa links em Visualizao dinmica, permitindo que voc interaja com aplicativos do servidor e dados dinmicos. O recurso permite que voc digite um URL para inspecionar pginas servidas por um servidor dinmico da Web e editar pginas navegadas para verificar se elas existem em um dos sites locais definidos. Consulte Visualizao de pginas no Dreamweaver na pgina 287.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 2


O 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 e classes 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) torna mais fcil configurar um site local do Dreamweaver para que voc possa iniciar a construo de pginas da Web imediatamente. A categoria de servidor remoto permite que voc especifique seus servidores remoto e de teste em uma s visualizao. Consulte Configurar um novo site na pgina 38. Dicas de cdigo especficas do site O recurso Dicas de cdigo especficas do site permite a personalizao do seu ambiente de cdigo quando voc estiver trabalhando com bibliotecas PHP e estruturas CMS de terceiros, tais como WordPress, Drupal,Joomla! ou outras estruturas. Os arquivos de tema para blogs e outros arquivos padro PHP e diretrios podem ser includos ou excludos como fontes para dicas de cdigo. Consulte Dicas de cdigo especficas do site na pgina 307. Aprimoramentos de suporte do Subversion O Dreamweaver CS5 aumentou o suporte para o Subversion, permitindo que voc mova, copie e exclua arquivos localmente, e em seguida sincronize alteraes com seu repositrio remoto SVN. O novo comando Reverter permite que voc corrija rapidamente conflitos de rvore ou reverta uma verso anterior de um arquivo. Alm disso, uma nova extenso permite especificar a verso do Subversion com a qual voc deseja trabalhar em um determinado projeto. Consulte Usar o SVN (Subversion) para obter e devolver arquivos na pgina 89. Recursos 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)

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 3


O que h de novo

Mostrar menu pop-up, comportamento JavaScript Linha do tempo, comportamentos JavaScript Validar tags Visualizao Live Data

ltima atualizao em 28/4/2010

Captulo 2: rea de trabalho


Fluxo e rea de trabalho do Dreamweaver
Viso geral do fluxo de trabalho do Dreamweaver
Voc 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 37. 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 73 e Gerenciamento de ativos e 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 outras para criar a aparncia do seu site. Voc pode usar os elementos PA, os estilos de posicionamento CSS ou layouts CSS pr-projetados do Dreamweaver para criar seu layout. As ferramentas de tabela permitem projetar pginas rapidamente, desenhando e reorganizando a estrutura da pgina. Se desejar exibir vrios elementos ao mesmo tempo em um navegador, voc pode usar quadros para criar o layout de documentos. Finalmente, voc pode criar novas pginas com base em um modelo do Dreamweaver e atualizar o layout dessas pginas automaticamente quando o modelo for alterado. Consulte Criao de pginas com CSS na pgina 123 e Layout de pginas com HTML na pgina 172. Adicionar contedo a 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 205.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 5


rea de trabalho

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 292. 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 521. 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 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 servidor na pgina 81. Para assistir a um tutorial em vdeo sobre o que voc pode fazer no Dreamweaver, consulte www.adobe.com/go/lrvid4040_dw_br.

Viso geral do layout da rea de trabalho


A rea de trabalho do Dreamweaver permite visualizar documentos e propriedades de objeto. A rea de trabalho tambm coloca muitas operaes comuns em barras de ferramentas para que voc possa fazer alteraes rapidamente em seus documentos. No Windows, o Dreamweaver fornece um layout integrado em uma janela. Na rea de trabalho integrada, todos os painis e janelas so integrados em uma nica janela maior do aplicativo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 6


rea de trabalho

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

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

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 7


rea de trabalho

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

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

Mais tpicos da Ajuda


Uso de barras de ferramentas, inspetores e menus de contexto na pgina 21 Personalizao da rea de trabalho do CS4 na pgina 23 Exibir documentos com abas (Dreamweaver Macintosh) na pgina 29 Tutorial da rea de trabalho do Dreamweaver

Viso geral dos elementos da rea de trabalho


A rea de trabalho inclui os seguintes elementos. Nota: O Dreamweaver fornece muitos outros painis, inspetores e janelas. Para abrir os painis, os inspetores e as janelas, use o menu Janela.
A tela de boas-vindas Permite abrir um documento recente ou criar um novo documento. Na tela de boas-vindas,

voc tambm pode saber mais sobre o Dreamweaver, fazendo um tour pelo produto ou assistindo a um tutorial.
A barra de aplicativos A parte superior da janela do aplicativo contm o alternador da rea de trabalho, os menus

(apenas no Windows) e outros controles do aplicativo.


A barra de ferramentas de documento Contm botes que fornecem opes para diferentes visualizaes da janela

Documento (como as visualizaes de design e de cdigo), vrias opes de visualizao e algumas operaes comuns, como a visualizao em um navegador.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 8


rea 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 de cdigo.) Contm botes que permitem

executar muitas operaes padro de codificao.


A barra de ferramentas Processamento do estilo (Oculta por padro.) Contm botes que permitem ver qual seria a

aparncia do seu projeto em tipos de mdia diferentes se voc usasse folhas de estilos dependentes de mdia. Ela tambm contm um boto que permite ativar ou desativar a Folha de estilos em cascata (CSS).
A janela do documento Exibe o documento atual medida que criado e editado. O Inspetor de propriedades Permite visualizar e alterar diversas propriedades do objeto ou texto selecionado. Cada

objeto tem propriedades diferentes. O Inspetor de propriedades no expandido por padro no layout Codificador da rea de trabalho.
O seletor de tags Localizado na barra de status, na parte inferior da janela Documento. Mostra a hierarquia de tags em

torno da seleo atual. Clique em qualquer tag da hierarquia para selecionar a tag e todo seu contedo.
Painis Ajudar a monitorar e modificar seu trabalho. Os exemplos incluem o painel Inserir, o painel Estilos de CSS e

o painel Arquivos. Para expandir um painel, clique duas vezes na aba correspondente.
O painel Inserir Contm botes para inserir vrios tipos de objetos em um documento, como imagens, tabelas e

elementos de mdia. Cada objeto uma parte do cdigo HTML que permite definir vrios atributos medida que so inseridos. Por exemplo, voc pode inserir uma tabela clicando no boto Tabela do painel Inserir. Se preferir, voc pode inserir objetos usando o menu Inserir em vez do painel Inserir.
O painel Arquivos Permite gerenciar arquivos e pastas, que podem fazer parte de um site do Dreamweaver ou estar em

um servidor remoto. O painel Arquivos tambm permite acessar todos os arquivos do disco local, assim como o Windows Explorer (Windows) ou o Finder (Macintosh).

Mais tpicos da Ajuda


Trabalho na janela Documento na pgina 17 Uso de barras de ferramentas, inspetores e menus de contexto na pgina 21 Gerenciamento de janelas e painis na pgina 23

Viso geral da janela Documento


A janela Documento mostra o documento atual. possvel selecionar qualquer uma das seguintes visualizaes:
Visualizao de design Um ambiente de design para o layout visual da pgina, a edio visual e o desenvolvimento

rpido do aplicativo. Nessa visualizao, o Dreamweaver exibe uma representao visual completamente editvel do documento, semelhante visualizao da pgina em um navegador.
Visualizao de cdigo Um ambiente de codificao manual para gravao e edio de cdigo HTML, JavaScript, de

linguagem de servidor (como linguagem PHP ou linguagem de markup do ColdFusion (CFML)) e qualquer outro tipo de cdigo.
Visualizao Dividir cdigo Uma verso dividida da Visualizao de cdigo que possibilita rolar pelo trabalho em

diferentes sees do documento ao mesmo tempo.


Visualizao de cdigo e de design Permite ver as visualizaes de cdigo e de design para o mesmo documento em

uma nica janela.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 9


rea 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 exibir um asterisco aps o nome do arquivo se voc tiver feito alteraes que ainda no foram salvas. Para acessar um documento, clique na aba correspondente. O Dreamweaver tambm exibe a barra de ferramentas Arquivos relacionados abaixo da aba do documento (ou abaixo da barra de ttulo do documento, se voc estiver exibindo documentos em janelas distintas). Documentos relacionados so associados ao arquivo atual, como arquivos CSS ou JavaScript. Para abrir um desses arquivos relacionados na janela Documento, clique no respectivo nome de arquivo na barra de ferramentas Arquivos relacionados.

Mais tpicos da Ajuda


Trabalho na janela Documento na pgina 17 Sobre a visualizao dinmica na pgina 287 Abrir Arquivos relacionados na pgina 68 Informaes gerais sobre a codificao no Dreamweaver na pgina 292

Viso geral da barra de ferramentas de documento


A 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

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

As seguintes opes aparecem na barra de ferramentas Documento:


Mostrar visualizao de cdigo Exibe somente a Visualizao de cdigo na janela Documento. Mostrar visualizaes de cdigo e de design Divide a janela Documento entre as visualizaes de cdigo e de design.

Quando voc seleciona essa visualizao combinada, a opo Visualizao de design visvel ativada no menu Opes de visualizao.
Mostrar Visualizao de design Exibe somente a Visualizao de design na janela Documento.

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

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 10


rea de trabalho

Visualizao dinmica Exibe uma visualizao do documento baseada no navegador, interativa e no editvel. Visualizao dinmica de cdigo Exibe o cdigo real usado pelo navegador para executar a pgina. Ttulo do documento Permite inserir um ttulo para o documento, a ser exibido na barra de ttulo do navegador. Se o documento j tiver um ttulo, esse ttulo ser exibido nesse campo. Gerenciamento de arquivos Exibe o menu pop-up Gerenciamento de arquivos. Visualizar/depurar no navegador Permite visualizar ou depurar o documento em um navegador. Selecione um

navegador no menu pop-up.


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

Nota: Tambm so atualizados recursos de cdigo que dependem de DOM (Modelo de objeto de documento), como a possibilidade de selecionar tags de abertura e fechamento de um bloco de cdigo.
Opes de visualizao Permite definir opes para as visualizaes de cdigo e de design, incluindo a definio de

que visualizao voc deseja que aparea por cima da outra. As opes do menu so vlidas para a visualizao atual: de design, de cdigo ou ambas.
Auxlios visuais Permite usar diferentes auxlios visuais para projetar as pginas. Validar markup Permite validar o documento atual ou uma tag selecionada. Verificao de compatibilidade do navegador Permite verificar se o CSS compatvel com navegadores diferentes.

Mais tpicos da Ajuda


Exibir barras de ferramentas na pgina 21 Visualizao de pginas na Visualizao dinmica na pgina 287 Configuraes das preferncias de codificao na pgina 299 Visualizar e editar o contedo do cabealho na pgina 335 Uso de auxlios visuais para layout na pgina 172

Viso geral da barra de ferramentas Padro


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

Mais tpicos da Ajuda


Exibir barras de ferramentas na pgina 21 Criao e abertura de documentos na pgina 59

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 11


rea de trabalho

Viso geral da barra de ferramentas Processamento do estilo


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 estilo dependentes de mdia. Ela tambm contm um boto que permite ativar ou desativar estilos CSS. Para exibir a barra de ferramentas, selecione Exibir > Barras de ferramentas > Processamento do estilo.

Essa barra de ferramentas funciona somente se os documentos usam folhas de estilo dependentes de mdia. Por exemplo, a folha de estilo pode especificar uma regra body para uma mdia de impresso e uma regra body diferente para dispositivos handheld. Para obter mais informaes sobre como criar folhas de estilo dependentes de mdia, acesse o site do World Wide Web Consortium em www.w3.org/TR/CSS21/media.html. Por padro, o Dreamweaver exibe o projeto para o tipo de mdia de tela (que mostra como uma pgina processada em uma tela de computador). Voc pode visualizar os seguintes processamentos de mdia clicando nos botes correspondentes da barra de ferramentas Processamento do estilo.
Processar tipo de mdia de tela Mostra como a pgina aparece em uma tela de computador. Processar tipo de mdia print Mostra como a pgina aparece em um pedao de papel impresso. Processar tipo de mdia handheld Mostra como a pgina aparece em um dispositivo handheld, como um celular ou

um dispositivo BlackBerry.
Processar tipo de mdia projection Mostra como a pgina aparece em um dispositivo de projeo. Processar tipo de mdia TTY Mostra como a pgina aparece em um dispositivo de teletipo. Processar tipo de mdia TV Mostra como a pgina aparece em uma tela de televiso. Alternar exibio de estilos CSS Permite ativar ou desativar estilos CSS. Esse boto funciona independentemente de

outros botes de mdia.


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

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

Mais tpicos da Ajuda


Exibir barras de ferramentas na pgina 21

Viso geral da barra de ferramentas de navegao do navegador


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

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

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 12


rea de trabalho

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

Mais tpicos da Ajuda


Visualizao de pginas no Dreamweaver na pgina 287

Viso geral da barra de ferramentas de codificao


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

Mais tpicos da Ajuda


Exibir barras de ferramentas na pgina 21 Inserir cdigo com a Barra de ferramentas de codificao na pgina 309

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 13


rea de trabalho

Viso geral da barra de status


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

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

Seletor de tags Mostra a hierarquia de tags em torno da seleo atual. Clique em qualquer tag da hierarquia para selecionar a tag e todo seu contedo. Clique em <body> para selecionar o corpo inteiro do documento. Para definir os atributos class ou ID de uma tag no seletor de tags, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na tag e selecione uma classe ou ID no menu de contexto. Ferramenta Selecionar Ativa e desativa a ferramenta Mo. Ferramenta Mo Permite clicar no documento e arrast-lo na janela Documento. Ferramenta Zoom e menu pop-up Definir ampliao Permite definir um nvel de ampliao para o documento. Menu pop-up Tamanho da janela (No disponvel na Visualizao de cdigo.) Permite redimensionar a janela

Documento para dimenses predefinidas ou personalizadas.


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

Mais tpicos da Ajuda


Definir o tamanho da janela e a velocidade da conexo na pgina 20 Mais zoom e Menos zoom na pgina 215 Redimensionar a janela Documento na pgina 19 Definir o tempo de download e as preferncias de tamanho na pgina 217

Viso geral do Inspetor de propriedades


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

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 14


rea de trabalho

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

Mais tpicos da Ajuda


Encaixe e desencaixe de painis na pgina 24 Usar o Inspetor de propriedades na pgina 22

Viso geral do painel Inserir


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

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 15


rea de trabalho

Categoria Spry Contm botes para criar pginas do Spry, incluindo objetos de dados e widgets do Spry. A categoria do InContext Editing Contm botes para criar pginas do InContext Editing, incluindo botes para Regies editveis, Regies repetitivas e gerenciamento CSS. Categoria Texto Permite inserir uma variedade de tags de formatao de texto e de lista, como b, em, p, h1 e ul. Categoria Favoritos Permite agrupar e organizar os botes do painel Inserir usados com mais freqncia em um lugar

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

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

Mais tpicos da Ajuda


Uso do painel Inserir na pgina 205 Criao visual de pginas do Spry na pgina 423

Viso geral do painel Arquivos


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

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 16


rea de trabalho

Mais tpicos da Ajuda


Trabalhar com arquivos no painel Arquivos na pgina 76

Viso geral do painel Estilos CSS


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

Para redimensionar qualquer painel, arraste as bordas entre os painis. No modo Atual, o painel Estilos CSS exibe trs painis: o painel Resumo para seleo que exibe as propriedades CSS da seleo atual do documento, o painel Regras que exibe o local das propriedades selecionadas (ou regras em cascata para a tag selecionada, dependendo da seleo) e o painel Propriedades que permite editar propriedades CSS para a regra que define a seleo. No modo Tudo, o painel Estilos CSS exibe dois painis: o painel Todas as regras (na parte superior) e o painel Propriedades (na parte inferior). O painel Todas as regras exibe uma lista de regras definidas no documento atual, bem como as regras definidas nas folhas de estilo anexadas ao documento atual. O painel Propriedades permite editar propriedades CSS para todas as regras selecionadas no painel Todas as regras. Qualquer alterao efetuada no painel Propriedades aplicada imediatamente, permitindo que voc a visualize enquanto trabalha.

Mais tpicos da Ajuda


Criao e gerenciamento de CSS na pgina 128

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 17


rea de trabalho

Viso geral das guias visuais


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

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

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

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

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

Mais tpicos da Ajuda


Uso de auxlios visuais para layout na pgina 172

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

Mais tpicos da Ajuda


Tutorial do Dreamweaver para usurios do GoLive

Trabalho na janela Documento


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

Passar para a Visualizao de cdigo


Siga um destes procedimentos:

Selecione Exibir > Cdigo. Na barra de ferramentas Documento, clique no boto Mostrar visualizao de cdigo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 18


rea de trabalho

Alternar para a visualizao Dividir cdigo


A visualizao Dividir cdigo divide o documento em dois, assim voc pode trabalhar nas duas sees de cdigo de uma vez s.
Selecione Exibir > Dividir cdigo.

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

Passar para a Visualizao de design


Siga um destes procedimentos:

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

Mostrar visualizaes de cdigo e de design


Siga um destes procedimentos:

Selecione Exibir > Cdigo e design. Na barra de ferramentas Documento, clique no boto Mostrar visualizaes de cdigo e design.

Por padro, a Visualizao de cdigo aparece na parte superior e a Visualizao de design aparece na parte inferior da janela Documento. Para exibir a Visualizao de design na parte superior, selecione Exibir > Visualizao de design na parte superior. 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 de design


Pressione Control + crase (`).

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

Dividir verticalmente as visualizaes


Esta opo est disponvel somente na visualizao Dividir cdigo e nas visualizaes de cdigo e de design (Dividir visualizao). Est desabilitado para a Visualizao de cdigo e para a Visualizao de design.
1 Certifique-se de estar na visualizao Dividir cdigo (Visualizao > Dividir cdigo) ou nas visualizaes de cdigo

e de design (Visualizao > Cdigo e design).


2 Selecione Exibir > Dividir verticalmente.

Se voc estiver nas visualizaes de cdigo e design, tem a opo de exibir a Visualizao de design esquerda (Visualizao > Visualizao de design esquerda). 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.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 19


rea de trabalho

Mais tpicos da Ajuda


Viso geral da janela Documento na pgina 8 Visualizao de pginas na Visualizao dinmica na pgina 287

Janelas de documento em cascata ou lado a lado


Se houver muitos documentos abertos ao mesmo tempo, voc pode organiz-los em cascata ou lado a lado.

Mais tpicos da Ajuda


Gerenciamento de janelas e painis na pgina 23 Exibir documentos com abas (Dreamweaver Macintosh) na pgina 29

Janelas de documento em cascata


Selecione Janela > Em cascata.

Janelas de documento lado a lado


(Windows) Selecione Janela > Lado a lado horizontalmente ou Janela > Lado a lado verticalmente. (Macintosh) Selecione Janela > Lado a lado.

Redimensionar a janela Documento


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

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 20


rea de trabalho

Alterar os valores listados no menu pop-up Tamanho da janela


1 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 janela


1 Selecione Editar tamanhos no menu pop-up Tamanho da janela. 2 Clique no espao em branco abaixo do ltimo valor da coluna Largura. 3 Insira valores para Largura e Altura.

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


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

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

Definir o tamanho da janela e a velocidade da conexo


1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione Barra de status na lista Categoria esquerda. 3 Defina uma das seguintes opes:
Tamanhos de janela Permite personalizar os tamanhos de janela que aparecem no menu pop-up da barra de status. Velocidade de conexo Determina a velocidade de conexo (em quilobits por segundo) usada para calcular o tamanho

do download. O tamanho do download da pgina exibido na barra de status. Quando uma imagem selecionada na janela Documento, o tamanho de download da imagem exibido no Inspetor de propriedades.

Mais tpicos da Ajuda


Viso geral da barra de status na pgina 13 Redimensionar a janela Documento na pgina 19

Relatrios no Dreamweaver
Voc 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

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 21


rea de trabalho

Relatrios do site Permite melhorar o fluxo de trabalho e testar os atributos HTML no site. Os relatrios de fluxo de

trabalho incluem Design Notes verificadas e modificadas recentemente; os relatrios HTML incluem tags de fonte aninhadas que podem ser combinadas, acessibilidade, textos alternativos ausentes, tags aninhadas redundantes, tags vazias removveis e documentos sem ttulo.
Registro de FTP Permite visualizar toda a atividade de transferncia de arquivos via FTP. Depurao de servidor Permite visualizar informaes para depurar um aplicativo Adobe ColdFusion.

Mais tpicos da Ajuda


Procurar tags, atributos ou texto no cdigo na pgina 319 Uso do material de referncia a linguagem na pgina 320 Teste do site na pgina 106 Validar tags na pgina 325 Verificar compatibilidade de navegador na pgina 325 Encontrar links rompidos, externos e rfos na pgina 284 Colocar arquivos em um servidor remoto na pgina 84 Obter arquivos de um servidor remoto na pgina 82 Usar o depurador do ColdFusion (somente Windows) na pgina 327

Uso de barras de ferramentas, inspetores e menus de contexto


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

Selecione Exibir > Barras de ferramentas e, em seguida, selecione a barra de ferramentas. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer
uma das barras de ferramentas e selecione-a no menu de contexto. Nota: Para exibir ou ocultar a barra de ferramentas de codificao no Inspetor de cdigo (Janela > Inspetor de cdigo), selecione Barra de ferramentas de codificao no menu pop-up Opes de visualizao, na parte superior do inspetor.

Mais tpicos da Ajuda


Viso geral da barra de ferramentas de documento na pgina 9 Viso geral da barra de ferramentas Padro na pgina 10 Viso geral da barra de ferramentas de codificao na pgina 12 Viso geral da barra de ferramentas Processamento do estilo na pgina 11

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 22


rea de trabalho

Usar o Inspetor de propriedades


O Inspetor de propriedades permite examinar e editar as propriedades mais comuns do elemento de pgina selecionado atualmente, como texto ou um objeto inserido. O contedo do Inspetor de propriedades varia de acordo com o(s) elemento(s) selecionado(s). Para acessar a Ajuda de um Inspetor de propriedades, clique no boto da Ajuda no canto superior direito do Inspetor de propriedades ou selecione Ajuda no menu Opes de um Inspetor de propriedades. Nota: Use o Inspetor de tags para visualizar e editar todos os atributos associados s propriedades de uma determinada tag.

Mais tpicos da Ajuda


Viso geral do Inspetor de propriedades na pgina 13 Definir propriedades de texto no Inspetor de propriedades na pgina 227 Encaixe e desencaixe de painis na pgina 24 Alterar atributos com o Inspetor de tags na pgina 329

Mostrar ou ocultar o Inspetor de propriedades


Selecione Janela > Propriedades.

Expandir ou reduzir o Inspetor de propriedades


Clique na seta de expanso no canto inferior direito do Inspetor de propriedades.

Visualizar e alterar propriedades para um elemento de pgina


1 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 contexto


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

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 23


rea de trabalho

2 Selecione um comando no menu de contexto.

Personalizao da rea de trabalho do CS4


Gerenciamento de janelas e painis
possvel criar um espao de trabalho personalizado movendo e manipulando janelas de Documento e painis. Tambm possvel salvar espaos de trabalho e alternar entre eles. No Fireworks, renomear reas de trabalho personalizadas pode levar a um comportamento inesperado. Nota: os exemplos a seguir usam o Photoshop para fins demonstrativos. A rea de trabalho funciona da mesma forma em todos os produtos.

Reorganizar, encaixar e flutuar as janelas de documentos


Quando voc abre mais que um arquivo, as janelas de Documento so tabuladas.

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

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

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 24


rea de trabalho

Nota: No Photoshop voc tambm pode selecionar Janela > Organizar > Flutuar na janela para flutuar uma nica janela de documento ou Janela > Organizar > Flutuar tudo nas janelas para flutuar tudo das janelas de documento de uma vez. Consulte as notas tcnicas kb405298 para obter mais informaes. Nota: o Dreamweaver no oferece suporte a encaixe e desencaixe de janelas de Documento. Use o boto Minimizar da janela do documento para criar janelas flutuantes (Windows) ou selecione Janela > Lado a Lado Verticalmente para criar janelas de documentos lado a lado. Pesquise "Lado a Lado Verticalmente" no Ajuda do Dreamweaver para obter mais informaes sobre este tpico.

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

Para criar grupos de documentos empilhados ou lado a lado, arraste a janela para uma das zonas de destino nas
partes superior, inferior ou laterais de qualquer janela. Voc tambm pode selecionar um layout para o grupo usando o boto Layout na barra de aplicativos. Nota: alguns produtos no tm suporte para essa funcionalidade. No entanto, seu produto pode conter os comandos Cascata ou Lado a lado no menu Janela para ajud-lo na exibio de documentos.

Para alternar para outro documento em um grupo tabulado, arraste a seleo sobre a guia do documento por alguns
instantes. Nota: alguns produtos no tm suporte para essa funcionalidade.

Encaixe e desencaixe de painis


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

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

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

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

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

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 25


rea de trabalho

Painel de navegao no encaixe

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

Movimentao de painis
Ao mover painis, voc visualizar zonas para soltar realadas em azul, que so reas nas quais possvel mover o painel. Por exemplo, possvel mover um painel para cima ou para baixo em um encaixe arrastando-o para a zona para soltar azul estreita, acima ou abaixo de outro painel. Se for arrastado para uma rea que no uma zona para soltar, o painel flutuar livremente na rea de trabalho. Nota: A posio do mouse (ao invs da posio do painel), ativa a rea de destino. Se no puder visualizar a rea de destino, tente arrastar o mouse para o lugar onde ela deveria estar.

Para mover um painel, arraste-o pela guia. Para mover um grupo de painis , arraste a barra de ttulo (a rea acima das guias).
A B

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

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

Adio e remoo de painis


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

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

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

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 26


rea de trabalho

Manipulao de grupos de painis


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

Adio de um painel a um grupo de painis

Para reorganizar painis em um grupo, arraste a guia do painel para um novo local no grupo. Para remover um painel de um grupo para que ele flutue livremente, arraste o painel pela guia para fora do grupo. Para mover um grupo, arraste a barra de ttulo (a rea acima das guias).

Empilhamento de painis flutuantes


Se for arrastado para um painel fora de seu encaixe mas no em uma zona para soltar, o painel flutuar livremente. O painel flutuante permite posicion-lo em qualquer lugar no espao de trabalho. possvel empilhar painis flutuantes ou grupos de painis para que eles sejam movidos como uma unidade quando a barra de ttulo superior for arrastada.

Painis empilhados de livre flutuao

Para empilhar painis flutuantes, arraste um painel pela guia para a zona para soltar na parte inferior de outro
painel.

Para alterar a ordem de empilhamento, arraste um painel para cima ou para baixo pela guia.
Nota: solte a guia sobre a zona para soltar azul estreita entre os painis, em vez de sobre a zona para soltar abrangente em uma barra de ttulo.

Para remover um painel ou grupo de painis da pilha para que ele flutue sozinho, arraste-o para fora pela guia ou
pela barra de ttulo.

Redimensionamento de painis
Para minimizar ou maximizar um painel, grupo de painis ou pilha de painis, clique duas vezes na guia. Voc
tambm pode clicar duas vezes na rea da guia (no espao vazio prximo s guias).

Para redimensionar um painel, arraste qualquer lado do painel. Alguns painis, como o painel Cor no Photoshop,
no podem ser redimensionados arrastando-os.

Contrair e expandir cones do painel


possvel contrair painis em cones para reduzir a desordem no espao de trabalho. Em alguns casos, os painis so contrados em cones no espao de trabalho padro.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 27


rea de trabalho

Painis recolhidos em cones

Painis expandidos de cones

Para contrair ou expandir todos os cones de painis numa coluna, clique na seta dupla na parte superior do
encaixe.

Para expandir um nico cone do painel, clique nesse cone. Se quiser redimensionar cones de painis para que voc s veja os cones (e no os rtulos), ajuste a largura do
encaixe at o texto desaparecer. Para exibir um texto de cone novamente, alargue o encaixe.

Para contrair um painel estendido de volta ao cone, clique na guia, no cone ou na seta dupla na barra de ttulo do
painel. Em alguns produtos, se voc selecionar Contrair painis de cone automaticamente nas preferncias de Interface ou Opes de interface do usurio, um cone de painel expandido ser contrado automaticamente quando voc clicar fora dele.

Para adicionar um painel flutuante ou grupo de painis em um encaixe de cones, arraste-o por sua guia ou barra
de ttulo. (Os painis so contrados automaticamente em cones ao serem adicionados a um encaixe de cones.)

Para mover um cone de painel (ou grupo de cones de painis), arraste o cone. Voc pode arrastar cones do painel
para cima e para baixo no encaixe para outros encaixes (onde aparecem no estilo de painel desse encaixe), ou para fora do encaixe (onde aparecem como cones flutuantes).

Salvamento e alternncia de espaos de trabalho


Salvando o tamanho e a posio atuais dos painis como uma rea de trabalho nomeado, possvel restaurar essa rea de trabalho, caso voc mova ou feche um painel. Os nomes dos espaos de trabalho salvos aparecem no alternador de espaos de trabalho na Barra de aplicativos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 28


rea de trabalho

Salvamento de uma rea de trabalho personalizada


1 Com a rea de trabalho na configurao que voc deseja salvar, siga um destes procedimentos:

(Illustrator) Escolha Janela > rea de Trabalho > Salvar rea de Trabalho. (Photoshop, InDesign, InCopy) Escolha Janela > rea de Trabalho > Nova rea de Trabalho. (Dreamweaver) Escolha Janela > Layout da rea de Trabalho > Nova rea de Trabalho. (Flash) Escolha Nova rea de Trabalho no alternador de reas de trabalho na Barra de aplicativos. (Fireworks) Escolha Salvar atual no alternador de reas de trabalho na Barra de aplicativos.
2 Digite um nome para a rea de trabalho. 3 (Photoshop, InDesign) Em Capturar, selecione uma ou mais opes:
Localizaes do painel Salva as localizaes atuais do painel. (somente no InDesign) Atalhos do teclado Salva o conjunto atual de atalhos do teclado (somente para Photoshop). Menus ou Personalizao do menu Salva o conjunto atual de menus.

Exibio ou alternncia entre espaos de trabalho


Selecione um espao de trabalho no alternador de espaos de trabalho na Barra de aplicativos.

No Photoshop, possvel atribuir atalhos de teclado para cada rea de trabalho para navegar entre elas rapidamente.

Excluso de uma rea de trabalho personalizada


Selecione Gerenciar reas de trabalho no alternador de reas de trabalho na Barra de aplicativos, selecione a rea
de trabalho e, em seguida, clique em Excluir. (A opo no est disponvel no Fireworks.)

(Photoshop, InDesign, InCopy) Selecione Excluir rea de trabalho no alternador de reas de trabalho. (Illustrator) Escolha Janela > rea de Trabalho > Gerenciar reas de Trabalho, selecione a rea de trabalho e, em
seguida, clique no cone Excluir.

(Photoshp, InDesign) Escolha Janela > rea de Trabalho > Excluir rea de Trabalho, selecione a rea de trabalho
e, em seguida, clique em Excluir.

Restaurao do espao de trabalho padro


1 Selecione a rea de trabalho Padro ou Fundamentos no alternador de rea de trabalho na barra de aplicativos.

Nota: No Dreamweaver, Designer a rea de trabalho padro.


2 (Photoshop, InDesign, InCopy) Selecione Janela > Espao de trabalho > Redefinir [Nome do espao de trabalho].

(Photoshop) Restaurao de uma organizao de rea de trabalho salva


No Photoshop, as reas de trabalho aparecem automaticamente conforme voc as organizou da ltima vez, mas possvel restaurar a organizao de painis original e salva.

Para restaurar uma rea de trabalho individual, selecione Janela > rea de Trabalho > Redefinir Nome da rea de
trabalho.

Para restaurar todas as reas de trabalho instaladas com o Photoshop, clique em Restaurar reas de trabalho padro
nas preferncias da interface. Para reorganizar a ordem das reas de trabalho na barra de aplicativos, arraste-as.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 29


rea de trabalho

Exibir documentos com abas (Dreamweaver Macintosh)


Voc pode visualizar vrios documentos em uma nica janela usando abas para identificar cada um. Voc tambm pode exibi-los como parte de uma rea de trabalho flutuante, na qual cada documento aparece em sua prpria janela.

Abrir um documento com abas em uma janela separada


Clique com a tecla Control pressionada na aba e selecione Mover para a nova janela, no menu de contexto.

Combinar documentos separados em janelas com abas


Selecione Janela > Combinar como abas.

Alterar a configurao padro do documento com abas


1 Selecione Dreamweaver > Preferncias e, em seguida, selecione a categoria Geral. 2 Marque ou desmarque Abrir documentos em abas e clique em OK.

O Dreamweaver no muda a exibio dos documentos que esto atualmente abertos quando as preferncias so alteradas. No entanto, os documentos abertos depois da seleo de uma nova preferncia so exibidos de acordo com a preferncia selecionada.

Ativao de cones coloridos


Por padro, o Dreamweaver CS4 e posterior usa cones em preto e branco que se tornam coloridos quando voc passa o mouse sobre eles. Voc pode deixar os cones coloridos ativados de modo permanente, para que no seja necessrio passar o mouse sobre eles.
Siga um destes procedimentos:

Selecione Exibir > cones coloridos. Alterne para a rea de trabalho Clssico ou Codificador.
Para desativar novamente os cones coloridos, desmarque cones coloridos no menu Exibir ou alterne para uma rea de trabalho diferente.

Mais tpicos da Ajuda


Exibio ou alternncia entre espaos de trabalho na pgina 28

Ocultar e exibir a tela de boas-vindas do Dreamweaver


A tela de boas-vindas aparece quando voc inicia o Dreamweaver e a qualquer momento quando no h nenhum documento aberto. Voc pode optar por ocultar a tela de boas-vindas e exibi-la novamente mais tarde. Quando a tela de boas-vindas est oculta e nenhum documento est aberto, a janela Documento fica em branco.

Ocultar a tela de boas-vindas


Na tela de boas-vindas, selecione a opo No mostrar novamente.

Exibir a tela de boas-vindas


1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Na categoria Geral, selecione a opo Mostrar tela de boas-vindas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 30


rea de trabalho

Sobre a personalizao do Dreamweaver em sistemas de vrios usurios


Voc pode personalizar o Dreamweaver de acordo com suas necessidades, mesmo em um sistema operacional de vrios usurios como o Windows XP ou o Mac OS X. O Dreamweaver impede que a configurao personalizada de um usurio afete a configurao personalizada de outro usurio. Para fazer isso, na primeira vez em que executado em um dos sistemas operacionais de vrios usurios compatveis, o Dreamweaver cria cpias de diversos arquivos de configurao. Esses arquivos de configurao de usurio so armazenados em uma pasta que pertence a voc. Por exemplo, no Windows XP, eles so armazenados em C:\Documents and Settings\nome de usurio\Dados de aplicativo\Adobe\Dreamweaver\pt_BR\Configuration, que est oculta por padro. Para exibir arquivos e pastas ocultos, selecione Ferramentas > Opes de pasta no Windows Explorer, clique na aba Exibir e selecione a opo Mostrar arquivos e pastas ocultos. No Windows Vista, eles so armazenados em C:\Users\nome de usurio\AppData\Roaming\Adobe\Dreamweaver \pt_BR\Configuration, pasta que fica oculta por padro. Para exibir arquivos e pastas ocultos, selecione Ferramentas > Opes de pasta no Windows Explorer, clique na aba Exibir e selecione a opo Mostrar arquivos e pastas ocultos. No Mac OS X, eles so armazenados na pasta Home; especificamente, em Users/nome de usurio/Library/Application Support/Adobe/Dreamweaver 9/Configuration. Se o Dreamweaver for reinstalado ou atualizado, o Dreamweaver far cpias de backup automaticamente dos arquivos de configurao de usurio existente, de modo que se esses arquivos tiverem sido personalizados manualmente, voc ainda ter acesso s alteraes feitas.

Definir preferncias gerais do Dreamweaver


1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Defina uma das seguintes opes:
Abrir documentos em abas Abre todos os documentos em uma nica janela com abas que permitem alternar entre os

documentos (somente Macintosh).


Mostrar tela de boas-vindas Exibe a tela de boas-vindas do Dreamweaver quando voc inicia o Dreamweaver ou

quando no h nenhum documento aberto.


Reabrir documentos ao inicializar Abre todos os documentos que estavam abertos quando o Dreamweaver foi

fechado. Se essa opo no for selecionada, o Dreamweaver exibir a tela de boas-vindas ou uma tela em branco ao inicializar (dependendo da configurao de Mostrar tela de boas-vindas).
Avisar ao abrir arquivos somente leitura Avisa quando um arquivo somente leitura (bloqueado) aberto. Escolha

para desbloquear/retirar, visualizar ou cancelar o arquivo.


Ativar arquivos relacionados Permite ver quais arquivos esto conectados ao documento atual (por exemplo, arquivos CSS ou JavaScript). O Dreamweaver exibe um boto para cada arquivo relacionado na parte superior do documento e abre o arquivo quando se clica no boto. Identificar Arquivos rel. dinamicamente Permite que voc selecione se os Arquivos rel. dinamicamente sero exibidos

automaticamente na barra de ferramentas de Arquivos relacionados ou aps interao manual. Tambm possvel desabilitar a identificao de Arquivos rel. dinamicamente.
Atualizar links ao mover arquivos Determina o que acontece ao mover, renomear ou excluir um documento do seu

site. Defina essa preferncia para atualizar sempre os links automaticamente, para nunca atualizar os links ou para perguntar antes de atualizar. Consulte Atualizar links automaticamente na pgina 278.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 31


rea de trabalho

Mostrar caixa de dilogo ao inserir objetos Determina se o Dreamweaver deve perguntar para incluir informaes adicionais ao inserir imagens, tabelas, filmes do Shockwave e alguns outros objetos usando o painel ou o menu Inserir. Se essa opo estiver desativada, a caixa de dilogo no aparecer e voc dever usar o Inspetor de propriedades para especificar o arquivo de origem de imagens, o nmero de linhas de uma tabela, etc. Para imagens de sobreposio e HTML do Fireworks, uma caixa de dilogo sempre aparece quando voc insere o objeto, independentemente da configurao dessa opo. Para substituir temporariamente essa configurao, clique com a tecla Control (Windows) ou a tecla Command (Macintosh) pressionada ao criar e inserir objetos. Ativar entrada inline de bytes duplos Permite inserir textos de bytes duplos diretamente na janela Documento se estiver usando um ambiente de desenvolvimento ou um kit de idioma que facilita os textos de bytes duplos (como os caracteres japoneses). Quando essa opo no est selecionada, uma janela de entrada de texto aparece para a insero e a converso de textos de bytes duplos; o texto exibido na janela Documento depois de ser aceito. Alternar para pargrafo simples aps cabealho Especifica que pressionar Enter (Windows) ou Return (Macintosh) no final de um pargrafo de cabealho na Visualizao de design cria um novo pargrafo com uma tag p no incio e no final. Um pargrafo de cabealho tem uma tag de cabealho, como h1 ou h2, no incio e no final do pargrafo. Quando essa opo est desativada, pressionar Enter ou Return no final de um pargrafo de cabealho cria um novo pargrafo com a mesma tag de cabealho (permitindo que voc digite vrios cabealhos em uma linha e, em seguida, volte para preencher os detalhes). Permitir vrios espaos consecutivos Especifica que digitar dois ou mais espaos na Visualizao de design cria

espaos consecutivos que aparecem como vrios espaos no navegador. Por exemplo, voc pode digitar dois espaos entre sentenas, como faria em uma mquina de escrever. Essa opo foi desenvolvida principalmente para pessoas que esto acostumadas a digitar em editores de texto. Quando essa opo est desativada, vrios espaos so tratados como um nico espao (porque os navegadores tratam vrios espaos como espaos nicos).
Usar <strong> e <em> em vez de <b> e <i> Especifica que o Dreamweaver aplica a tag strong sempre que voc

executa uma ao que normalmente aplicaria a tag b e aplica a tag em sempre que voc executa uma ao que normalmente aplicaria a tag i. Essas aes incluem o clique nos botes Negrito ou Itlico no Inspetor de propriedades de texto, no modo HTML, e a seleo de Formatar > Estilo > Negrito ou Formatar > Estilo > Itlico. Para usar as tags b e i nos documentos, desmarque essa opo. Nota: O World Wide Web Consortium no recomenda o uso das tags b e i; as tags strong e em fornecem informaes mais semnticas do que as tags b e i.
Avisar ao incluir regies editveis entre tags <p> ou <h1> - <h6> Especifica se uma mensagem de aviso deve ser exibida sempre que um modelo do Dreamweaver com uma regio editvel em uma tag de pargrafo ou de cabealho for salvo. A mensagem informa que os usurios no podero criar mais pargrafos na regio. A opo est ativada por padro. Centralizao Especifica se voc deseja centralizar elementos usando a tag divalign="center" ou center ao clicar

no boto Alinhar ao centro, no Inspetor de propriedades. Nota: Esses dois mtodos de centralizao foram oficialmente reprovados na especificao do HTML 4.01; voc deve usar estilos CSS para centralizar textos. Os dois mtodos ainda so tecnicamente vlidos de acordo com a especificao do XHTML 1.0 Transitional, mas no so mais vlidos na especificao do XHTML 1.0 Strict.
Nmero mximo de etapas do histrico Determina o nmero de etapas que o painel Histrico preserva e mostra. (O

valor padro deve ser suficiente para a maioria dos usurios.) Se voc ultrapassar o nmero definido de etapas no painel Histrico, as etapas mais antigas sero descartadas. Para obter mais informaes, consulte Automao de tarefa na pgina 265.
Dicionrio de ortografia Lista os dicionrios de ortografia disponveis. Se um dicionrio tiver vrios dialetos ou convenes de ortografia (como ingls americano e ingls britnico), os dialetos sero listados separadamente no menu pop-up Dicionrio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 32


rea de trabalho

Mais tpicos da Ajuda


Viso geral do layout da rea de trabalho na pgina 5 Atualizar links automaticamente na pgina 278

Definir as preferncias de Fontes do Dreamweaver


A codificao de um documento determina sua aparncia no navegador. As preferncias de fonte do Dreamweaver permitem visualizar uma determinada codificao na fonte e no tamanho que voc preferir. Entretanto, as fontes que voc selecionar na caixa de dilogo Preferncias de fontes afetam somente a forma que as fontes aparecem no Dreamweaver; elas no afetam a forma que o documento aparece no navegador de um visitante. Para alterar a forma que as fontes aparecem em um navegador, voc precisa alterar o texto usando o Inspetor de propriedades ou aplicando uma regra de CSS. Para obter informaes sobre como definir uma codificao padro para novos documentos, consulte Criao e abertura de documentos na pgina 59.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Na lista Categoria esquerda, selecione Fontes. 3 Selecione um tipo de codificao (como Europeu Ocidental ou Japons) na lista Configuraes de fontes.

Nota: Para exibir um idioma asitico, voc deve usar um sistema operacional que suporte fontes de bytes duplos.
4 Selecione uma fonte e o tamanho a serem usados para cada categoria da codificao selecionada.

Nota: Para aparecer nos menus pop-up, a fonte deve estar instalada no computador. Por exemplo, para ver um texto em japons, voc deve ter uma fonte japonesa instalada.
Fonte proporcional A fonte usada pelo Dreamweaver para exibir textos normais (por exemplo, textos de pargrafos,

cabealhos e tabelas). O padro depende das fontes instaladas no seu sistema. Na maioria dos sistemas dos EUA, o padro a fonte Times New Roman tamanho 12. (Mdio) no Windows e Times 12 pt. no Mac OS.
Fonte fixa A fonte usada pelo Dreamweaver para exibir textos entre as tags pre, code e tt. O padro depende das

fontes instaladas no seu sistema. Na maioria dos sistemas dos EUA, o padro a fonte Courier New 10 pt. (Pequeno) no Windows e Monaco 12 pt. no Mac OS.
Visualizao de cdigo A fonte usada para todos os textos que aparecem na Visualizao de cdigo e no Inspetor de

cdigo. O padro depende das fontes instaladas no seu sistema.

Mais tpicos da Ajuda


Introduo codificao de documento na pgina 211

Personalizar cores de realce do Dreamweaver


Use as preferncias de realce para personalizar as cores que identificam regies de modelo, itens de biblioteca, tags de terceiros, elementos de layout e cdigos no Dreamweaver.

Mais tpicos da Ajuda


Usar o seletor de cores na pgina 215 Alterar a cor de realce das tags div na pgina 158

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 33


rea de trabalho

Alterar uma cor de realce


1 Selecione Editar > Preferncias e selecione a categoria Realce. 2 Ao lado do objeto do qual deseja alterar a cor de realce, clique na caixa Cor e use o seletor de cores para selecionar

uma nova cor ou inserir um valor hexadecimal.

Ativar ou desativar o realce de um objeto


1 Selecione Editar > Preferncias e selecione a categoria Realce. 2 Ao lado do objeto para o qual deseja ativar ou desativar a cor de realce, marque ou desmarque a opo Mostrar.

Atalhos do teclado
Criar uma folha de referncia para o conjunto de atalhos atual
Uma folha de referncia um registro do conjunto de atalhos atual. As informaes so armazenadas em uma tabela HTML. Voc pode visualizar a folha de referncia em um navegador da Web ou imprimi-la.
1 Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh). 2 Clique no boto Exportar conjunto como HTML, que o terceiro boto na parte superior da caixa de dilogo. 3 Na caixa de dilogo Salvar exibida, insira o nome da folha de referncia e selecione o local adequado para salvar o

arquivo.

Personalizar atalhos de teclado


Use o Editor de atalho de teclado para criar suas prprias teclas de atalho, incluindo atalhos para snippets de cdigo. Voc tambm pode remover atalhos, editar atalhos existentes e selecionar um conjunto predefinido de atalhos no Editor de atalho de teclado.

Mais tpicos da Ajuda


Trabalho com snippets de cdigo na pgina 318

Criar um atalho de teclado


Crie suas prprias teclas de atalho, edite os atalhos existentes ou selecione um conjunto predefinido de atalhos.
1 Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh). 2 Selecione uma das opes a seguir e clique em OK:
Conjunto atual Permite escolher um conjunto de atalhos predefinidos includo no Dreamweaver ou qualquer

conjunto personalizado que voc tenha definido. Os conjuntos predefinidos esto listados na parte superior do menu. Por exemplo, se voc estiver familiarizado com os atalhos encontrados no HomeSite ou BBEdit, poder usar esses atalhos escolhendo o conjunto predefinido correspondente.
Comandos Permite selecionar uma categoria de comandos para edio. Por exemplo, voc pode editar comandos de

menu, como o comando Abrir, ou comandos de edio de cdigo, como Ajustar chaves. Para adicionar ou editar um atalho do teclado para um snippet de cdigo, selecione Snippet no menu pop-up Comandos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 34


rea de trabalho

Lista de comandos Exibe os comandos associados categoria selecionada no menu pop-up Comandos, junto com os atalhos designados. A categoria Comandos de menu exibe essa lista como uma exibio em rvore que mostra a estrutura dos menus. As outras categorias listam os comandos por nome (como Sair do aplicativo), em uma lista simples. Atalhos Exibe todos os atalhos atribudos ao comando selecionado. Adicionar item (+) Adiciona um novo atalho ao comando atual. Clique nesse boto para adicionar uma nova linha em

branco a Atalhos. Insira uma nova combinao de teclas e clique em Alterar para adicionar um novo atalho do teclado para esse comando. Voc pode atribuir dois atalhos diferentes para cada comando; se j houver dois atalhos atribudos a um comando, o boto Adicionar item no ter nenhum efeito.
Remover item (-) Remove o atalho selecionado da lista de atalhos. Pressionar tecla Exibe a combinao de teclas inserida ao adicionar ou alterar um atalho. Alterar Adiciona a combinao de teclas mostrada em Pressionar tecla lista de atalhos ou altera o atalho selecionado para a combinao de teclas especificada. Conjunto duplicado Duplica o conjunto atual. D um nome ao novo conjunto; o nome padro o nome do conjunto

atual com a palavra copy anexada.


Renomear conjunto Renomeia o conjunto atual. Exportar como arquivo HTML Salva o conjunto atual em uma tabela HTML para facilitar a visualizao e a impresso.

Voc pode abrir o arquivo HTML no seu navegador e imprimir os atalhos para facilitar a referncia.
Excluir conjunto Exclui um conjunto. Voc no pode excluir o conjunto ativo.

Remover um atalho de um comando


1 Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh). 2 No menu pop-up Comandos, selecione uma categoria de comando. 3 Na lista Comandos, selecione um comando e, em seguida, selecione um atalho. 4 Clique no boto Remover item (-).

Adicionar um atalho a um comando


1 Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh). 2 No menu pop-up Comandos, selecione uma categoria de comando. 3 Na lista Comandos, selecione um comando.

Para adicionar um atalho do teclado para um snippet de cdigo, selecione Snippet no menu pop-up Comandos. Os atalhos atribudos ao comando aparecem em Atalhos.
4 Prepare-se para adicionar um atalho seguindo um destes procedimentos:

Se houver menos de dois atalhos j atribudos ao comando, clique no boto Adicionar item (+). Uma nova linha
em branco exibida em Atalhos e o ponto de insero movido at Pressionar tecla.

Se j houver dois atalhos atribudos ao comando, selecione um deles (que ser substitudo pelo novo atalho). Em
seguida, clique em Pressionar tecla.
5 Pressione uma combinao de teclas. A combinao de teclas exibida em Pressionar tecla.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 35


rea de trabalho

Nota: Se houver um problema com a combinao de teclas (por exemplo, se a combinao de teclas j tiver sido atribuda a outro comando), uma mensagem explicativa ser exibida abaixo de Atalhos e voc talvez no consiga adicionar ou editar o atalho.
6 Clique em Alterar. A nova combinao de teclas atribuda ao comando.

Editar um atalho existente


1 Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh). 2 No menu pop-up Comandos, selecione uma categoria de comando. 3 Na lista Comandos, selecione um comando e, em seguida, selecione um atalho a ser alterado. 4 Clique em Pressionar tecla e insira uma nova combinao de teclas. 5 Clique no boto Alterar para alterar o atalho.

Nota: Se houver um problema com a combinao de teclas (por exemplo, se a combinao de teclas j tiver sido atribuda a outro comando), uma mensagem explicativa ser exibida abaixo do campo Atalhos e voc talvez no consiga adicionar ou editar o atalho.

Sobre atalhos de teclado e teclados que no so do alfabeto ingls (EUA)


Os atalhos de teclado padro do Dreamweaver funcionam principalmente em teclados padro do alfabeto ingls (EUA). Os teclados de outros pases (incluindo os produzidos no Reino Unido) talvez no forneam a funcionalidade necessria para utilizar esses atalhos. Se seu teclado no der suporte a alguns atalhos ativados pelo Dreamweaver, sua funcionalidade ser desativada. Para personalizar atalhos do teclado que funcionam com teclados que no so padro do alfabeto ingls (EUA), consulte Alterao dos mapeamentos de atalho de teclado em Extenso do Dreamweaver.

Extenses
Adicionar e gerenciar extenses no Dreamweaver
As extenses so novos recursos que podem ser adicionados facilmente ao Dreamweaver. Voc pode usar muitos tipos de extenses; por exemplo, existem extenses que permitem reformatar tabelas, conectar-se com bancos de dados back-end ou ajudar a gravar scripts para navegadores. Nota: Para instalar extenses s quais todos os usurios tenham acesso em um sistema operacional de vrios usurios, voc deve estar conectado como Administrador (Windows) ou root (Mac OS X). Para encontrar as extenses mais recentes para o Dreamweaver, acesse o site do Adobe Exchange em www.adobe.com/go/dreamweaver_exchange_br. No site, voc poder acessar e baixar extenses (muitas so gratuitas), participar de grupos de discusso, visualizar classificaes e comentrios de usurios e instalar e usar o Gerente de extenso. necessrio instalar o Gerente de extenso antes de instalar as extenses. O Gerente de extenso um aplicativo separado que permite instalar e gerenciar extenses nos aplicativos da Adobe. Inicie o Gerente de extenso a partir do Dreamweaver escolhendo Comandos > Gerenciar extenses.
1 No site do Adobe Exchange, clique no link de download de uma extenso.

O navegador talvez pergunte se voc deseja abrir e instalar o aplicativo diretamente do site ou salv-lo no disco.

Se voc optar por abrir a extenso diretamente do site, o Gerente de extenso far a instalao automaticamente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 36


rea de trabalho

Se voc optar por salvar a extenso no disco, um bom local para salvar o arquivo do pacote de extenso (.mxp) a
pasta Downloaded Extensions na pasta do aplicativo Dreamweaver no seu computador.
2 Clique duas vezes no arquivo do pacote de extenso ou abra o Gerente de extenso e selecione Arquivo > Instalar

extenso. Algumas extenses s podero ser acessadas quando o aplicativo for reiniciado. Nota: Use o Gerente de extenso para remover extenses ou obter mais informaes sobre uma extenso.

Mais tpicos da Ajuda


Sobre a personalizao do Dreamweaver em sistemas de vrios usurios na pgina 30

ltima atualizao em 28/4/2010

37

Captulo 3: Trabalho com sites do Dreamweaver


Um site do Adobe Dreamweaver CS5 um conjunto de todos os arquivos e ativos existentes no site. Voc pode criar pginas da Web no computador, carreg-las em um servidor Web e manter o site transferindo arquivos atualizados sempre que os salvar. Voc tambm pode editar e manter sites criados sem o Dreamweaver.

Configurao de um site do Dreamweaver


Sobre sites do Dreamweaver
No Dreamweaver, o termo site refere-se a um armazenamento local ou remoto para os documentos que pertencem a um site. Um site do Dreamweaver facilita a organizao e o gerenciamento de todos os documentos da Web, o carregamento do seu site em um servidor Web, o rastreamento e a manuteno de links, alm do gerenciamento e o compartilhamento de arquivos. Voc deve definir um site para aproveitar todos os recursos do Dreamweaver. Nota: Para definir um site do Dreamweaver, voc s precisa configurar uma pasta local. Para transferir arquivos para um servidor Web ou desenvolver aplicativos da Web, voc tambm precisa adicionar informaes para um site remoto e um servidor de teste. Um site do Dreamweaver consiste em at trs partes, ou pastas, dependendo do seu ambiente de desenvolvimento e do tipo de site em desenvolvimento:
Pasta raiz local Armazena os arquivos nos quais voc est trabalhando. O Dreamweaver refere-se a essa pasta como seu

site local. Essa pasta geralmente se localiza no seu computador local, mas tambm pode estar em um servidor de rede.
Pasta remota Armazena seus arquivos para teste, produo, colaborao e assim por diante. O Dreamweaver refere-

se a essa pasta como seu site remoto no painel Arquivos. Normalmente, a sua pasta remota est no computador em que o servidor Web executado. A pasta remota contm os arquivos que os usurios acessam na Internet. Juntas, as pastas local e remota permitem que voc transfira arquivos entre o disco rgido local e o servidor Web, facilitando o gerenciamento de arquivos em sites do Dreamweaver. Voc trabalha nos arquivos na pasta local e depois os publica na pasta remota, quando deseja que outras pessoas os vejam.
Pasta do servidor de teste A pasta em que o Dreamweaver processa as pginas dinmicas.

Para obter um tutorial sobre como definir um site Dreamweaver, consulte www.adobe.com/go/learn_dw_comm08_br.

Noes bsicas sobre a estrutura de pastas locais e remotas


Ao usar o Dreamweaver para conectar-se a uma pasta remota, voc especifica a pasta remota na categoria Informaes remotas da caixa de dilogo Definio de sites. A pasta remota especificada (tambm conhecida como diretrio do host) deve corresponder pasta raiz local do site do Dreamweaver. (A pasta raiz local a pasta de nvel superior do site do Dreamweaver.) Pastas remotas, como as pastas locais, podem ter qualquer ttulo, mas normalmente, os provedores de servio da Internet nomeiam as pastas remotas de nvel superior das contas de usurios individuais como public_html, pub_html ou algo parecido. Se voc responsvel pelo seu prprio servidor remoto e pode nomear a pasta remota como desejar, aconselhvel que a pasta raiz local e a pasta remota tenham o mesmo nome.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 38


Trabalho com sites do Dreamweaver

O exemplo a seguir mostra uma pasta raiz local esquerda e uma pasta remota direita. A pasta raiz local na mquina local mapeia diretamente para a pasta remota no servidor Web, e no para as subpastas da pasta remota nem para as pastas localizadas acima da pasta remota na estrutura de diretrios.
no Diretrio de logon
(No deve ser pasta remota neste caso)

Pasta local
(pasta raiz)

sim

pblico_html
(Deve ser pasta remota)

Ativos

no

Ativos
(No deve ser pasta remota)

HTML

HTML

Nota: O exemplo acima ilustra uma pasta raiz local na mquina local e uma pasta remota de nvel superior no servidor Web remoto. Se, entretanto, voc mantm diversos sites do Dreamweaver em sua mquina local, ser necessrio um nmero igual de pastas remotas no servidor remoto. Nesse caso, o exemplo acima no aplicvel, e voc deveria criar, ento, diversas pastas remotas dentro da pasta public_html e, em seguida, mape-las para as pastas raiz locais correspondentes em sua mquina local. Quando voc estabelece uma conexo remota pela primeira vez, a pasta remota no servidor Web em geral est vazia. Ento, quando voc usa o Dreamweaver para carregar todos os arquivos na pasta raiz local, a pasta remota a preenche com todos os arquivos da Web. A estrutura de diretrios da pasta remota e da pasta raiz local devem ser sempre iguais. (Ou seja, sempre deve haver uma correspondncia de um para um entre os arquivos e as pastas da pasta raiz local e os arquivos e as pastas da pasta remota.) Se a estrutura da pasta remota no corresponder estrutura da pasta raiz local, o Dreamweaver carregar os arquivos no local incorreto, onde podem no ficar visveis aos visitantes do site. Alm disso, os caminhos de imagens e links podem ser facilmente rompidos se as estruturas de pastas e arquivos no estiverem sincronizadas. A pasta remota j deve existir para que o Dreamweaver possa conectar-se a ela. Se voc no tem uma pasta designada que atue como sua pasta remota no servidor Web, crie uma ou pea ao administrador do servidor que crie uma para voc.

Configurar um novo site


A configurao de um site do Dreamweaver uma maneira de organizar todos os documentos associados a um site. A caixa de dilogo Configurao de site o local em que voc especifica as configuraes para o site do Dreamweaver Para abrir a caixa de dilogo Configurao de site, escolha Site > Novo site Para assistir a um tutorial em vdeo sobre como configurar um novo site Dreamweaver, consulte www.adobe.com/go/learn_dw_comm08_br.

Categoria Site
A categoria Site da caixa de dilogo Configurao de site a nica categoria que voc precisa preencher para iniciar o trabalho no site do Dreamweaver. Essa categoria permite que voc especifique a pasta local em que os arquivos do site sero armazenados. A pasta local pode estar em seu computador local ou em um servidor de rede Quando estiver pronto, voc pode preencher as outras categorias na caixa de dilogo Configurao de site, incluindo a categoria Servidores em que possvel especificar uma pasta remota no seu servidor remoto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 39


Trabalho com sites do Dreamweaver

Nota: No preciso especificar uma pasta remota se a pasta raiz local est no sistema que executa o servidor Web. Isso sugere que o servidor Web est em execuo no computador local.
Nome do site O nome que aparece no painel Arquivos e na caixa de dilogo Gerenciar sites; ele no aparece no

navegador.
Pasta do site local O nome da pasta no disco local onde voc armazena arquivos de site, modelos e itens de biblioteca.

Crie uma pasta no disco rgido ou clique no cone de pasta para ir at a pasta. Quando o Dreamweaver resolve links relativos raiz do site, ele faz isso com relao a essa pasta.

Categoria Servidores
A categoria Servidores permite que voc especifique servidores remoto e de teste. O servidor remoto o local em que voc especifica a pasta remota que ir armazenar arquivos para produo, colaborao, implementao ou diversas outras situaes. Normalmente, a pasta remota est no computador em que o servidor Web est em execuo. No painel Arquivos do Dreamweaver, a pasta remota conhecida como site remoto. Ao configurar uma pasta remota, voc deve selecionar um mtodo de conexo para que o Dreamweaver carregue e baixe arquivos no servidor Web. Nota: O Dreamweaver aceita conexes com servidores ativados por IPv6. Os tipos de conexo permitidos incluem FTP, SFTP, WebDav e RDS. Para obter mais informaes, consulte www.ipv6.org/ Definir opes para conexes FTP Use esta configurao se voc se conectar ao servidor Web usando FTP.
1 Selecione Site > Gerenciar sites. 2 Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver existente e clique em Editar. 3 Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes

procedimentos:

Para adicionar um servidor, clique no boto Adicionar novo servidor Selecione um servidor existente e clique no boto Editar servidor existente
A ilustrao a seguir mostra a tela Bsico da categoria Servidor com os campos de texto j preenchidos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 40


Trabalho com sites do Dreamweaver

Tela Bsico da categoria Servidor, caixa de dilogo Configurao de site.

4 Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de

sua escolha.
5 No menu pop-up Uso da Conexo, selecione FTP. 6 Na caixa de texto Endereo FTP, digite o endereo do servidor de FTP no qual voc carrega os arquivos do seu site.

O endereo FTP o nome completo na Internet de um sistema de computador, como ftp.mindspring.com. Insira o endereo completo sem qualquer texto adicional. Em particular, no adicione um nome de protocolo frente do endereo. Se no souber o seu endereo FTP, voc dever entrar em contato com a empresa responsvel pela hospedagem na Web. Nota: A porta 21 a porta padro para receber conexes de FTP. possvel trocar o nmero da porta padro editando a caixa de texto direita. O resultado quando voc salva as configuraes um caractere de dois pontos e o novo nmero de porta anexado ao endereo FTP (por exemplo, ftp.mindspring.com:29).
7 Nas caixas de texto Nome do usurio e Senha, digite o nome do usurio e a senha que voc usa para conectar-se ao

servidor de FTP.
8 Clique em Testar para testar o endereo FTP, nome do usurio e senha.

Nota: Voc deve obter as informaes de endereo FTP, nome do usurio e senha com o administrador do sistema da empresa que hospeda seu site. Ningum mais tem acesso a essas informaes. Digite as informaes exatamente como forem fornecidas pelo administrador do sistema.
9 O Dreamweaver salva sua senha por padro. Desmarque a opo Salvar se voc preferir que o Dreamweaver solicite

uma senha toda vez que voc se conectar ao servidor remoto.


10 Na caixa de texto Diretrio raiz, digite o diretrio (pasta) no servidor remoto onde voc armazena documentos

visveis ao pblico. Caso voc no tenha certeza sobre o que inserir como o diretrio raiz, entre em contato com o administrador do servidor ou deixe a caixa de texto em branco. Em alguns servidores, o diretrio raiz igual ao diretrio ao qual voc primeiro se conectou com FTP. Para saber, conecte-se ao servidor. Se uma pasta chamada public_html, ou www, ou seu nome de usurio, aparecer na Visualizao arquivo remoto do painel Arquivos, provvel que este seja o diretrio a ser especificado na caixa de texto Diretrio raiz.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 41


Trabalho com sites do Dreamweaver

11 Na caixa de texto URL da Web, digite o URL do site (por exemplo, http://www.mysite.com). O Dreamweaver utiliza

o URL da Web para criar links relativos raiz do site e verificar links quando voc usa o verificador de links. Para obter explicaes mais detalhadas dessa opo, consulte a categoria Configuraes avanadas de Categoria Configuraes avanadas na pgina 45.
12 Expandir a seo Mais opes se ainda for necessrio definir mais opes. 13 Selecione Usar FTP passivo se a configurao de proxy exibir o uso de FTP passivo.

O FTP passivo permite que o software local configure a conexo por FTP, em vez de solicitar que o servidor remoto configure. Se no tiver certeza quanto ao uso de FTP passivo, verifique com o administrador do sistema ou tente marcar e desmarcar a opo Usar FTP passivo. Para obter mais informaes, consulte o TechNote 15220 no site da Adobe em www.adobe.com/go/tn_15220_br.
14 Selecione Usar modo de transferncia IPv6 caso voc esteja usando um servidor de FTP ativado para IPv6.

Com a implementao da verso 6 do protocolo IP (IPv6), EPRT e EPSV substituram os comandos de FTP PORT e PASV, respectivamente. Portanto, se voc est tentando conectar-se a um servidor FTP ativado por IPv6, use os comandos passivo estendido (EPSV) e ativo estendido (EPRT) para a conexo dos dados. Para obter mais informaes, consulte www.ipv6.org/.
15 Selecione Usar proxy se voc quiser especificar um host ou uma porta do proxy.

Para obter mais informaes, clique no link para ir para a caixa de dilogo Preferncias e, em seguida, clique no boto Ajuda na categoria Site da caixa de dilogo Preferncias.
16 Clique em Salvar para fechar a tela Bsico. Em seguida, na categoria Servidores, especifique se o servidor que voc

adicionou ou editou um servidor remoto, de teste ou os dois. Para obter ajuda com a soluo de problemas de conectividade do FTP, consulte TechNote kb405912 no site da Adobe em www.adobe.com/go/kb405912_br. Definir opes para conexes SFTP Use FTP seguro (SFTP) se a configurao de firewall exigir o uso de um FTP seguro. O SFTP usa criptografia e chaves pblicas para proteger uma conexo com o servidor de teste. Nota: preciso que seu servidor esteja executando um servio SFTP para que voc selecione essa opo. Se voc no souber se o servidor est executando SFTP, consulte o administrador do sistema.
1 Selecione Site > Gerenciar sites. 2 Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver existente e clique em Editar. 3 Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes

procedimentos:

Para adicionar um servidor, clique no boto Adicionar novo servidor Selecione um servidor existente e clique no boto Editar servidor existente
4 Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de

sua escolha.
5 No menu pop-up Uso da conexo, selecione SFTP.

O restante das opes so as mesmas que as opes para conexes de FTP. Para obter mais informaes, consulte a seo acima. Nota: A porta 22 a porta padro para receber conexes de SFTP.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 42


Trabalho com sites do Dreamweaver

Definir opes para conexes de rede ou local Use esta configurao para conectar-se a uma pasta de rede ou se estiver armazenando arquivos ou executando o servidor de teste no computador local.
1 Selecione Site > Gerenciar sites. 2 Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver existente e clique em Editar. 3 Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes

procedimentos:

Para adicionar um servidor, clique no boto Adicionar novo servidor Selecione um servidor existente e clique no boto Editar servidor existente
4 Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de

sua escolha.
5 No menu pop-up Uso da conexo, selecione Local/Rede. 6 Clique no cone de pasta ao lado da caixa de texto Pasta do servidor para procurar e selecionar a pasta onde os

arquivos do site sero armazenados.


7 Na caixa de texto URL da Web, digite o URL do site (por exemplo, http://www.mysite.com). O Dreamweaver utiliza

o URL da Web para criar links relativos raiz do site e verificar links quando voc usa o verificador de links. Para obter explicaes mais detalhadas dessa opo, consulte a categoria Configuraes avanadas de Categoria Configuraes avanadas na pgina 45.
8 Clique em Salvar para fechar a tela Bsico. Em seguida, na categoria Servidores, especifique se o servidor que voc

adicionou ou editou um servidor remoto, de teste ou os dois. Definir opes para conexes WebDAV Use esta configurao se voc se conectar ao servidor Web usando o protocolo Web-based Distributed Authoring and Versioning (WebDav). Para este mtodo de conexo, voc deve ter um servidor que aceite esse protocolo, como o Microsoft Internet Information Server (IIS) 5.0 ou uma instalao corretamente configurada do servidor Web Apache. Nota: Se voc selecionar WebDAV como o mtodo de acesso e estiver usando o Dreamweaver em um ambiente multiusurio, certifique-se de que todos os usurios selecionem o mtodo de acesso WebDAV. Se alguns usurios selecionarem WebDAV e outros optarem por mtodos diferentes de acesso (por exemplo, FTP), o recurso de devoluo/retirada do Dreamweaver no funcionar como o esperado, pois o WebDAV usa seu prprio sistema de bloqueio.
1 Selecione Site > Gerenciar sites. 2 Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver existente e clique em Editar. 3 Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes

procedimentos:

Para adicionar um servidor, clique no boto Adicionar novo servidor Selecione um servidor existente e clique no boto Editar servidor existente
4 Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de

sua escolha.
5 No menu pop-up Uso da conexo, selecione WebDAV. 6 Para o URL, insira o URL completo at o diretrio no servidor WebDAV com o qual voc deseja se conectar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 43


Trabalho com sites do Dreamweaver

Esse URL inclui o protocolo, a porta e o diretrio (se no for o diretrio raiz). Por exemplo, http://webdav.meudomnio.net/meusite.
7 Digite o nome do usurio e a senha.

Essas informaes destinam-se autenticao do servidor e no esto relacionadas ao Dreamweaver. Se voc no souber ao certo o nome de usurio e a senha, consulte o administrador do sistema ou o webmaster.
8 Clique em Testar para testar as configuraes da conexo. 9 Selecione a opo Salvar se voc quiser que o Dreamweaver memorize a senha toda vez que voc iniciar uma nova

sesso.
10 Na caixa de texto URL da Web, digite o URL do site (por exemplo, http://www.mysite.com). O Dreamweaver utiliza

o URL da Web para criar links relativos raiz do site e verificar links quando voc usa o verificador de links. Para obter explicaes mais detalhadas dessa opo, consulte a categoria Configuraes avanadas de Categoria Configuraes avanadas na pgina 45.
11 Clique em Salvar para fechar a tela Bsico. Em seguida, na categoria Servidores, especifique se o servidor que voc

adicionou ou editou um servidor remoto, de teste ou os dois. Definir opes para conexes RDS Voc dever usar esta configurao quando se conectar ao servidor Web usando RDS (Remote Development Services). Neste mtodo de conexo, o servidor remoto deve estar em um computador que execute o Adobe ColdFusion.
1 Selecione Site > Gerenciar sites. 2 Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver existente e clique em Editar. 3 Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes

procedimentos:

Para adicionar um servidor, clique no boto Adicionar novo servidor Selecione um servidor existente e clique no boto Editar servidor existente
4 Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de

sua escolha.
5 No menu pop-up Uso da conexo, selecione RDS. 6 Clique no boto Configuraes e fornea as seguintes informaes na caixa de dilogo Configurar servidor RDS:

Informe o nome do computador host no qual o servidor Web est instalado.


O nome do host provavelmente um endereo IP ou um URL. Caso no tenha certeza, pergunte ao administrador.

Insira o nmero da porta qual voc se conecta. Insira a pasta raiz remota como o diretrio do host.
Por exemplo, c:\inetpub\wwwroot\myHostDir\.

Insira o nome de usurio e a senha do RDS.


Nota: Essas opes talvez no apaream se voc definir seu nome de usurio e sua senha nas configuraes de segurana do administrador de ColdFusion.

Selecione a opo Salvar se quiser que o Dreamweaver memorize suas configuraes.


7 Clique em OK para fechar a caixa de dilogo Configurar servidor RDS. 8 Na caixa de texto URL da Web, digite o URL do site (por exemplo, http://www.mysite.com). O Dreamweaver utiliza

o URL da Web para criar links relativos raiz do site e verificar links quando voc usa o verificador de links.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 44


Trabalho com sites do Dreamweaver

Para obter explicaes mais detalhadas dessa opo, consulte a categoria Configuraes avanadas de Categoria Configuraes avanadas na pgina 45.
9 Clique em Salvar para fechar a tela Bsico. Em seguida, na categoria Servidores, especifique se o servidor que voc

adicionou ou editou um servidor remoto, de teste ou os dois. Configurar as opes para conexes do Microsoft Visual SourceSafe O suporte para o Microsoft Visual SourceSafe est obsoleto no Dreamweaver CS5. Configurar Opes avanadas 1 Selecione Site > Gerenciar sites.
2 Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver existente e clique em Editar. 3 Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes

procedimentos:

Para adicionar um servidor, clique no boto Adicionar novo servidor Selecione um servidor existente e clique no boto Editar servidor existente
4 Especifique as Opes bsicas conforme necessrio e clique no boto Avanado. 5 Selecione Manter informaes sobre sincronizao se quiser sincronizar automaticamente os arquivos locais e

remotos. (Essa opo selecionada por padro.)


6 Selecione Carregar automaticamente os arquivos no servidor ao salvar se voc quiser que o Dreamweaver carregue

o arquivo no site remoto ao salv-lo.


7 Selecione Ativar retirada de arquivos se voc deseja ativar o sistema de devoluo/retirada. 8 Se estiver usando um Servidor de teste, voc dever selecionar um modelo de servidor no menu pop-up Modelo de

servidor. Para obter mais informaes, consulte Configurar um servidor de teste na pgina 46. Solucionar problemas da configurao de pastas remotas Esta lista contm informaes sobre problemas comuns encontrados durante a configurao de pastas remotas e sobre como solucion-los. Tambm h uma nota tcnica extensa que fornece especificamente informaes sobre soluo de problemas de FTP no site da Adobe em www.adobe.com/go/kb405912_br.

A implementao por FTP do Dreamweaver pode no funcionar corretamente com certos servidores proxy,
firewalls de vrios nveis e outras formas de acesso indireto ao servidor. Se ocorrerem problemas com o acesso ao FTP, solicite ajuda ao administrador de sistema local.

Para uma implementao por FTP do Dreamweaver, conecte-se pasta raiz do sistema remoto. Certifique-se de
indicar a pasta raiz do sistema remoto como o diretrio do host. Se voc especificou o diretrio do host usando uma barra nica (/), talvez seja necessrio especificar um caminho relativo do diretrio ao qual voc est se conectando e a pasta raiz remota. Por exemplo, se a pasta raiz remota for um diretrio de nvel superior, pode ser necessrio especificar um ../../ para o diretrio do host.

Use sublinhados em vez de espaos e evite caracteres especiais nos nomes de arquivo e de pasta sempre que possvel.
Dois-pontos, barras, pontos e apstrofos nos nomes de arquivos ou pastas podem causar problemas.

Se ocorrerem problemas com nomes de arquivo longos, use nomes menores. No Mac OS, os nomes de arquivo no
podem ter mais de 31 caracteres.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 45


Trabalho com sites do Dreamweaver

Muitos servidores usam links simblicos (UNIX), atalhos (Windows) ou alias (Macintosh) para conectar uma pasta
em uma parte do disco do servidor a outra pasta em outro local. Esses alias em geral no afetam a capacidade de conexo com a pasta ou o diretrio apropriado, porm, se voc puder se conectar a uma parte do servidor e no a outra, pode ser que haja uma discrepncia do alias.

Se for exibida uma mensagem de erro do tipo "no possvel colocar o arquivo", pode ser que no haja espao na
pasta remota. Para obter informaes mais detalhadas, verifique o registro de FTP. Nota: Em geral, quando ocorrer algum problema com uma transferncia por FTP, selecione Janela > Resultados (Windows) ou Site > FTP Log (Macintosh) e clique na tag de registro de FTP para examinar esse registro.

Categoria Controle de verso


Voc pode retirar e devolver arquivos usando o Subversion. Para obter mais informaes , consulte Usar o SVN (Subversion) para obter e devolver arquivos na pgina 89.

Categoria Configuraes avanadas


Informaes locais
Pasta padro de imagens A pasta em que voc deseja armazenar imagens para o seu site. Digite o caminho para a pasta ou clique no cone de pasta para ir at ela. O Dreamweaver usa o caminho para a pasta quando voc adiciona imagens nos documentos. Links relativos a Especifique o tipo de links que o Dreamweaver cria quando voc criar links para outros recursos ou

pginas no site. O Dreamweaver pode criar dois tipos de links: relativo a documento e relativo a raiz do site. Para obter mais informaes sobre as diferenas entre os dois tipos, consulte Caminhos absolutos, relativos a documentos e relativos raiz do site na pgina 271. Por padro, o Dreamweaver cria links relativos a documentos. Se alterar a configurao padro e selecionar a opo Raiz do site, voc dever certificar-se de que o URL da Web para o site foi digitada na caixa de texto URL da Web (consulte abaixo). A alterao dessa configurao no converte o caminho de links existentes, a configurao ser aplicada somente aos novos links que voc criar visualmente com o Dreamweaver. Nota: O contedo vinculado a links relativos raiz do site no aparece quando voc visualiza documentos em um navegador local, a menos que voc especifique um servidor de teste ou selecione a opo Visualizar utilizando o arquivo temporrio em Editar > Preferncias > Visualizar no navegador. Isso ocorre porque os navegadores no reconhecem razes de site, diferente dos servidores.
URL da Web O URL do site. O Dreamweaver utiliza o URL da Web para criar links relativos raiz do site e verificar links quando voc usa o verificador de links.

Links relativos raiz do site sero teis se voc no tiver certeza do local final na estrutura do diretrio da pgina em que est trabalhando ou se voc achar que mais tarde precisar deslocar ou reorganizar os arquivos que contm links. Links relativos raiz do site so links cujos caminhos para outros recursos de site so relativos raiz do site, no ao documento, portanto se voc mover o documento para outro local, o caminho para os recursos permanecero corretos. Por exemplo, vamos dizer que voc especificou http://www.mysite.com/mycoolsite (o diretrio raiz do site do servidor remoto) como o URL da Web e que tambm voc tem uma pasta de imagens no diretrio mycoolsite no servidor remoto (http://www.mysite.com/mycoolsite/images). Vamos tambm dizer que seu arquivo index.html est no diretrio mycoolsite. Quando voc criar um link relativo raiz do site no arquivo index.html para uma imagem no diretrio de imagens, o link ter a seguinte aparncia:
<img src="/mycoolsite/images/image1.jpg" />

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 46


Trabalho com sites do Dreamweaver

diferente de um link relativo a documento, que seria simplesmente:


<img src="images/image1.jpg" />

O suplemento de /mycoolsite/ para a origem de imagem liga a imagem relativa raiz do site, no ao documento. Supondo-se que a imagem permanea no diretrio de imagem, o caminho do arquivo para a imagem (/mycoolsite/images/image1.jpg) estar sempre correta, mesmo que voc mova o arquivo index.html para outro diretrio. Para obter mais informaes, consulte Caminhos absolutos, relativos a documentos e relativos raiz do site na pgina 271. Considerando-se a verificao de link, o URL da Web ser necessrio para determinar se um link interno ou externo ao site. Por exemplo, se o URL da Web http://www.mysite.com/mycoolsite e o verificador de link encontra um link com o URL http://www.yoursite.com na sua pgina, o verificador determina que o ltimo link externo e o registra como tal. Similarmente, o verificador de link usa o URL da Web para determinar se os links so internos para o site e em seguida verifica se eles esto interrompidos.
Verificao de links com distino de maisc./minsc. Verifica se as letras maisculas e minsculas dos links

correspondem s dos nomes de arquivo quando o Dreamweaver verifica os links. Essa opo til em sistemas UNIX em que os nomes de arquivo diferenciam maisculas e minsculas.
Ativar o cache Indica se deve ser criado um cache local para agilizar as tarefas de gerenciamento de sites e links. Se

voc no selecionar esta opo, o Dreamweaver perguntar se voc deseja criar um cache novamente antes que ele crie o site. recomendvel selecionar esta opo porque o painel Ativos (no grupo de painis Arquivos) funciona somente se um cache for criado. Encobrimento e outras categorias Para obter mais informaes sobre Encobrimento, Design Notes, Colunas de visualizao de arquivos, Contribute, Modelos ou categorias de Spry, clique no boto Ajuda na caixa de dilogo.

Conectar-se a uma pasta remota com acesso por FTP ou desconectar-se


No painel Arquivos:

Para conectar-se, clique em Estabelece conexo com host remoto na barra de ferramentas. Para desconectar-se, clique em Desconectar na barra de ferramentas.

Conectar-se a uma pasta remota com acesso por rede ou desconectar-se


Voc no precisa se conectar pasta remota, voc est sempre conectado. Clique no boto Atualizar para ver os

arquivos remotos.

Configurar um servidor de teste


Se voc pretende desenvolver pginas dinmicas, o Dreamweaver precisa que os servios de um servidor de teste gerem e exibam contedo dinmico enquanto voc trabalha. O servidor de teste pode ser o computador local, um servidor de desenvolvimento, um servidor de teste ou um servidor de produo.
1 Selecione Site > Gerenciar sites. 2 Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver existente e clique em Editar. 3 Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes

procedimentos:

Para adicionar um servidor, clique no boto Adicionar novo servidor

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 47


Trabalho com sites do Dreamweaver

Selecione um servidor existente e clique no boto Editar servidor existente


4 Especifique as Opes bsicas conforme necessrio e clique no boto Avanado.

Nota: Voc deve especificar um URL da Web na tela Bsico quando determinar um servidor de teste. Para obter mais informaes, consulte a prxima seo.
5 No Servidor de Teste, selecione o modelo do servidor que voc deseja usar para seu aplicativo da Web.

Nota: A partir do Dreamweaver CS5, o Dreamweaver no instala mais comportamentos de servidor ASP.NET, ASP JavaScript ou JSP. Entretanto, se voc est trabalhando em pginas ASP.NET, ASP JavaScript ou JSP, o Dreamweaver ainda compatvel com a Visualizao dinmica, a colorao de cdigos e as dicas de cdigos dessas pginas. No necessrio selecionar ASP.NET, ASP JavaScript ou JSP na caixa de dilogo Definio de sites para que esses recursos funcionem.
6 Clique em Salvar para fechar a tela Avanado. Em seguida, na categoria Servidores, especifique o servidor que voc

acabou de adicionar ou editar como um servidor de teste.

Mais tpicos da Ajuda


Escolha do servidor de aplicativo na pgina 531 Preparao para criao de sites dinmicos na pgina 521

Sobre o URL da Web do servidor de teste


Voc precisa especificar um URL da Web para que o Dreamweaver possa usar os servios de um servidor de teste para exibir dados e conectar-se a bancos de dados enquanto voc trabalha. O Dreamweaver usa a conexo em tempo de design para fornecer informaes teis sobre o banco de dados, como os nomes das tabelas no banco de dados e os nomes das colunas nas tabelas. O URL da Web para um servidor de teste compreende o nome de domnio e os diretrios virtuais ou subdiretrios do diretrio inicial do site. Nota: A terminologia usada no Microsoft IIS pode variar de servidor para servidor, mas os mesmos conceitos se aplicam maioria dos servidores Web.
O diretrio inicial A pasta no servidor mapeada para o nome de domnio do site. Suponha que a pasta que voc deseja

usar para processar pginas dinmicas esteja em c:\sites\company\, e que essa pasta seja seu diretrio inicial (ou seja, essa pasta mapeada para o nome de domnio do seu site; por exemplo, www.mystartup.com). Nesse caso, o prefixo de URL http://www.mystartup.com/. Se a pasta que voc deseja usar para processar pginas dinmicas uma subpasta do seu diretrio inicial, basta adicionar a subpasta ao URL. Se seu diretrio inicial c:\sites\company\, o nome de domnio do seu site www.mystartup.com, e a pasta usada para processar pginas dinmicas c:\sites\company\inventory. Insira o seguinte URL da Web: http://www.mystartup.com/inventory/ Se a pasta que voc deseja usar para processar pginas dinmicas no seu diretrio inicial ou qualquer um de seus subdiretrios, crie um diretrio virtual.
Um diretrio virtual Uma pasta que est contida fisicamente no diretrio inicial do servidor, ainda que ela parea estar no URL. Para criar um diretrio virtual, especifique um alias para o caminho da pasta no URL. Suponha que seu diretrio inicial c:\sites\company, sua pasta de processamento d:\apps\inventory e voc define um alias para essa pasta chamado warehouse. Insira o seguinte URL da Web:

http://www.mystartup.com/warehouse/

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 48


Trabalho com sites do Dreamweaver

Host local Refere-se ao diretrio inicial nos seus URLs quando o cliente (em geral um navegador, mas neste caso

Dreamweaver) executado no mesmo sistema do servidor Web. Suponha que o Dreamweaver est em execuo no mesmo sistema Windows do servidor Web, seu diretrio inicial c:\sites\company, e voc definiu um diretrio virtual chamado warehouse para referir-se pasta a ser usada para processar pginas dinmicas. Estes so os URLs da Web que devem ser inseridos para os servidores Web selecionados:
Servidor Web ColdFusion MX 7 IIS Apache (Windows) Jakarta Tomcat (Windows) URL da Web http://localhost:8500/warehouse/ http://localhost/warehouse/ http://localhost:80/warehouse/ http://localhost:8080/warehouse/

Nota: Por padro, o servidor Web ColdFusion MX 7 executado na porta 8500, o servidor Web Apache executado na porta 80 e o servidor Web Jakarta Tomcat executado na porta 8080. Para os usurios de Macintosh que executam o servidor Web Apache, o diretrio inicial pessoal Users/MeuNomeDeUsurio/Sites, em que MeuNomeDeUsurio o nome de usurio do Macintosh. Um alias chamado ~MeuNomeDeUsurio automaticamente definido para essa pasta quando voc instala o Mac OS 10.1 ou superior. Portanto, o URL da Web padro Dreamweaver, como: http://localhost/~MeuNomeDeUsurio/ Se a pasta que voc deseja usar para processar pginas dinmicas Users:MeuNomeDeUsurio:Sites:inventory, o URL da Web o seguinte: http://localhost/~MeuNomeDeUsurio/inventory/

Gerenciar e editar sites


Use a caixa de dilogo Gerenciar sites para criar um novo site e editar, duplicar, remover sites e importar ou exportar as configuraes de um site.
1 Selecione Site > Gerenciar sites e escolha um site na lista esquerda. 2 Clique em um boto para selecionar uma das opes e clique em Concludo.
Novo Permite a criao de um novo site. Editar Permite a edio de um site existente. Duplicar Cria uma cpia do site selecionado. A cpia aparece na janela da lista de sites. Remover Exclui o site selecionado. Esta ao no pode ser desfeita. Exportar Permite a exportao das configuraes de um site como um arquivo XML (*.ste). Importar Permite a seleo de um arquivo de configuraes do site (*.ste) para importao.

Mais tpicos da Ajuda


Importar e exportar configuraes de site na pgina 49

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 49


Trabalho com sites do Dreamweaver

Editar um site remoto no Dreamweaver


Voc pode usar o Dreamweaver para copiar um site remoto (ou uma ramificao de um site remoto) para o disco local e edit-lo nesse disco, mesmo que voc no tenha utilizado o Dreamweaver para criar o site original.
1 Crie uma pasta local para o site existente e configure a pasta como a pasta local do site.

Nota: preciso duplicar localmente a estrutura inteira da ramificao relevante do site remoto.
2 Configure uma pasta remota usando as informaes de acesso remoto sobre o site. Conecte-se ao site remoto para

baixar os arquivos para seu computador antes de edit-los. Escolha a pasta raiz correta para o site remoto.
3 No painel Arquivos (Janela > Arquivos), clique no boto Estabelece conexo com host remoto (para acesso por

FTP) ou o boto Atualizar para acesso por rede) na barra de ferramentas para visualizar o site remoto.
4 Edite o site:

Para trabalhar com o site inteiro, selecione a pasta raiz do site remoto no painel Arquivos e clique em Obter
arquivo(s) na barra de ferramentas para baixar o site inteiro para o disco local.

Para trabalhar apenas com um dos arquivos ou pastas do site, localize o arquivo ou a pasta na Visualizao remota
do painel Arquivos e clique em Obter arquivo(s) na barra de ferramentas para baixar esse arquivo para o disco local. O Dreamweaver automaticamente duplica quanto da estrutura do site remoto for necessrio para colocar o arquivo baixado na parte correta da hierarquia de sites. Ao editar somente uma parte do site, voc deve em geral incluir arquivos dependentes, como os arquivos de imagem.

Remover um site do Dreamweaver da lista de sites


A remoo de um site do Dreamweaver e todas as respectivas informaes de configurao da lista de sites no remove os arquivos do site do computador.
1 Selecione Site > Gerenciar sites. 2 Selecione o nome de um site. 3 Clique em Remover, clique em Sim para remover o site da lista ou em No para manter o nome do site e clique em

Concludo.

Importar e exportar configuraes de site


Voc pode exportar as configuraes do site como um arquivo XML que pode ser importado depois para o Dreamweaver. Esse procedimento permite que voc mova os sites de um computador para outro e as verses do produto ou que voc compartilhe as configuraes com outros usurios. Exporte as configuraes do site regularmente para ter uma cpia de backup caso algo ocorra com o site.

Exportar sites
1 Selecione Site > Gerenciar sites. 2 Selecione um ou mais sites cujas configuraes sero exportadas e clique em Exportar:

Para selecionar mais de um site, use Control-clique (Windows) ou Command-clique (Macintosh) em cada site. Para selecionar uma faixa de sites, Shift-clique no primeiro e ltimo sites da faixa.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 50


Trabalho com sites do Dreamweaver

3 Para fazer backup das configuraes do site, selecione a primeira opo na caixa de dilogo Exportando site e clique

em OK. O Dreamweaver salva as informaes de login do servidor remoto, como o nome de usurio e a senha, e tambm as informaes de caminho local.
4 Para compartilhar configuraes com outros usurios, selecione a segunda opo na caixa de dilogo Exportando

site e clique em OK. (O Dreamweaver no salva informaes que no funcionam para outros usurios, como suas informaes de login do servidor remoto e os caminhos locais.)
5 Para cada site cujas configuraes voc deseja exportar, v at um local para salvar o site e clique em Salvar. (O

Dreamweaver salva as configuraes de cada site como um arquivo XML, com uma extenso .ste.)
6 Clique em Concludo.

Nota: Salve o arquivo *.ste na pasta raiz local ou na rea de trabalho para facilitar a localizao. Caso voc no se lembre de onde o colocou, procure os arquivos com extenso *.ste para localiz-lo.

Importar sites
1 Selecione Site > Gerenciar sites. 2 Clique em Importar. 3 Selecione um ou mais sites (definidos em arquivos com extenso .ste) cujas configuraes sero importadas.

Para selecionar mais de um site, use Control-clique (Windows) ou Command-clique (Macintosh) em cada arquivo .ste. Para selecionar uma faixa de sites, Shift-clique no primeiro e ltimo arquivo da faixa.
4 Clique em Abrir e, em seguida, clique em Concludo.

Depois que o Dreamweaver importa as configuraes, os nomes de site aparecem na caixa de dilogo Gerenciar sites.

Definir preferncias de site para transferncia de arquivos


Selecione as preferncias para controlar os recursos de transferncia de arquivos exibidos no painel Arquivos.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Na caixa de dilogo Preferncias, selecione Site na lista de categorias esquerda. 3 Defina as opes e clique em OK.
Mostrar sempre Especifica qual site (remoto ou local) mostrado sempre e em qual painel Arquivos (esquerda ou direita) os arquivos locais e remotos so exibidos.

Por padro, o site local sempre exibido direita. O painel no escolhido ( esquerda por padro) o painel que pode ser alterado: esse painel pode exibir os arquivos no outro site (o site remoto por padro).
Arquivos dependentes Exibe um prompt para transferncia de arquivos dependentes (como, por exemplo, imagens, folhas de estilos externas e outros arquivos referenciados no arquivo em HTML) que o navegador carrega ao carregar o arquivo em HTML. Por padro, Avisar na obteno/retirada e Avisar na colocao/devoluo so selecionados.

Normalmente, uma boa idia baixar arquivos dependentes ao retirar um novo arquivo, mas caso as verses mais recentes dos arquivos dependentes j estejam no disco local, no h necessidade de baix-los novamente. Isso tambm acontece no carregamento e na devoluo dos arquivos: no h necessidade caso cpias atualizadas j estejam no destino. Caso voc desmarque essas opes, os arquivos dependentes no so transferidos. Por isso, para forar a exibio da caixa de dilogo Arquivos dependentes mesmo quando essas opes esto desmarcadas, mantenha a tecla Alt (Windows) ou Option (Macintosh) pressionada enquanto escolhe os comandos Obter, Colocar, Devolver ou Retirar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 51


Trabalho com sites do Dreamweaver

Conexo de FTP Determina se a conexo com o site remoto encerrada aps o nmero especificado de minutos sem nenhuma atividade. Tempo limite do FTP Especifica o nmero de segundos em que o Dreamweaver tenta estabelecer uma conexo com o

servidor remoto. Caso no haja nenhuma resposta aps o tempo especificado, o Dreamweaver exibe uma caixa de dilogo de aviso alertando voc para esse fato.
Opes de transferncia por FTP Determina se o Dreamweaver seleciona a opo padro, depois de um nmero

especificado de segundos, quando uma caixa de dilogo exibida durante uma transferncia de arquivos e sem nenhuma resposta do usurio.
Host do proxy Especifica o endereo do servidor de proxy pelo qual voc se conecta a servidores externos caso esteja

atrs de um firewall. Caso voc no esteja atrs de um firewall, deixe esse espao em branco. Caso voc esteja atrs de um firewall, selecione a opo Usar proxy na caixa de dilogo Definio de sites (Servidores > Editar servidor existente (cone do lpis) > Mais opes).
Porta do proxy Especifica a porta do proxy ou do firewall pela qual voc passa para se conectar ao servidor remoto.

Caso voc se conecte por uma porta que no seja a 21 (a padro para FTP), digite o nmero aqui.
Opes de colocao: Salvar os arquivos antes de coloc-los Indica que os arquivos no salvos so salvos

automaticamente antes de serem colocados no site remoto.


Opes de transferncia: Avisar antes de mover arquivos no servidor Envia alertas quando voc tenta mover arquivos

no site remoto.
Gerenciar sites Abre a caixa de dilogo Gerenciar sites, onde voc pode editar um site existente ou criar um novo.

Voc pode definir se os tipos de arquivo que transfere so transferidos como ASCII (texto) ou binrio, personalizando o arquivo FTPExtensionMap.txt na pasta Dreamweaver/Configurao (no Macintosh, FTPExtensionMapMac.txt). Para obter mais informaes, consulte, Extenso do Dreamweaver.

Gerenciamento de sites do Contribute com o Dreamweaver


Gerenciamento de sites do Contribute
O Adobe Contribute CS4 combina um navegador da Web e um editor de pginas da Web. Ele permite que seus colegas de trabalho ou clientes naveguem at uma pgina em um site que voc tenha criado para edit-la ou atualizla, caso eles tenham permisso para faz-lo. Os usurios do Contribute podem adicionar e atualizar contedo bsico da Web, inclusive texto formatado, imagens, tabelas e links. Os administradores do site do Contribute podem limitar as aes que os usurios comuns (no administradores) podem executar em um site. Nota: Este tpico pressupe que voc seja um administrador do Contribute. Como administrador do site, voc permite que os no administradores editem pginas criando uma chave de conexo e enviando-a a esses usurios (para informar-se sobre como fazer isso, consulte a Ajuda do Contribute). Voc tambm pode configurar uma conexo com um site do Contribute usando o Dreamweaver, o que permite que voc ou o criador do site se conecte ao site do Contribute e use todos os recursos de edio disponveis no Dreamweaver.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 52


Trabalho com sites do Dreamweaver

O Contribute confere funcionalidade ao site com o CPS (Contribute Publishing Server), um pacote de aplicativos de publicao e ferramentas de gerenciamento de usurios que permite a integrao do Contribute com o servio de diretrios de usurios da empresa; por exemplo, protocolo LDAP (Lightweight Directory Access Protocol) ou Active Directory. Quando voc ativa o site do Dreamweaver como um site do Contribute, o Dreamweaver l as configuraes de administrao do Contribute sempre que voc se conecta ao site remoto. Se o Dreamweaver detecta que o CPS est ativado, ele herda algumas funes do CPS, como a reverso de arquivos e o registro de eventos. Voc pode usar o Dreamweaver para conectar-se a um arquivo no site do Contribute e modific-lo. A maioria dos recursos do Dreamweaver funcionam com um site do Contribute da mesma forma que funcionam com qualquer outro site. Contudo, quando voc usa o Dreamweaver com um site do Contribute, o Dreamweaver automaticamente realiza certas operaes de gerenciamento de arquivos, como salvar vrias revises de um documento e registrar certos eventos no console do CPS. Para obter mais informaes, consulte a Ajuda do Contribute.

Design da pgina e estrutura do site do Contribute


Para que os usurios do Contribute possam editar seu site, lembre-se do seguinte ao estrutur-lo:

Simplifique a estrutura do site. No aninhe pastas em muitos nveis. Agrupe itens relacionados em uma pasta. Configure as permisses apropriadas de leitura e gravao para pastas no servidor. Adicione pginas de ndice ao criar pastas de forma a estimular os usurios do Contribute a inserir novas pginas
nas pastas corretas. Por exemplo, se os usurios do Contribute fornecem pginas que contm atas de reunio, crie uma pasta na pasta raiz do site denominada atas_reunio, e crie uma pgina de ndice nessa pasta. Em seguida, crie um link da pgina principal do site para a pgina de ndice das atas de reunio. O usurio do Contribute poder ento navegar at essa pgina de ndice e criar uma nova pgina de atas para determinada reunio, com um link a partir dessa pgina.

Na pgina de ndice de cada pasta, coloque uma lista de links para as pginas de contedo e os documentos dessa
pasta.

Mantenha os designs de pgina o mais simples possvel, sem formataes rebuscadas. Use CSS em vez de tags HTML e nomeie seus estilos CSS com clareza. Se os usurios do Contribute usam um
conjunto padro de estilos no Microsoft Word, use os mesmos nomes para os estilos CSS para que o Contribute possa mapear os estilos quando o usurio copiar informaes de um documento do Word e as colar em uma pgina do Contribute.

Para evitar que um estilo CSS fique disposio dos usurios do Contribute, altere o nome do estilo para que ele
comece com mmhide_. Por exemplo, se voc usa um estilo denominado RightJustified em uma pgina, mas no quer que os usurios do Contribute usem esse estilo, renomeie o estilo como mmhide_RightJustified. Nota: Voc tem que adicionar mmhide_ ao nome do estilo na Visualizao de cdigo; no pode faz-lo no painel CSS.

Use poucos estilos CSS para manter a aparncia simples e organizada. Se voc usar incluses do servidor para elementos de pgina HTML, como cabealhos e rodaps, crie uma pgina
HTML desvinculada que contenha links para os arquivos de incluso. Os usurios do Contribute podero marcar essa pgina e us-la para navegar at os arquivos de incluso e edit-los.

Mais tpicos da Ajuda


Criao de um modelo do Dreamweaver na pgina 397 Criao e gerenciamento de CSS na pgina 128 Trabalho com as incluses de servidor na pgina 339

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 53


Trabalho com sites do Dreamweaver

Transferir arquivos para dentro e fora de um site do Contribute


O Contribute usa um sistema bem parecido com o sistema de devoluo e retirada do Dreamweaver para que somente um usurio por vez possa editar determinada pgina da Web. Quando voc ativa a compatibilidade do Contribute no Dreamweaver, o sistema de devoluo e retirada do Dreamweaver automaticamente ativado. Para transferir arquivos para dentro e fora de um site do Contribute usando o Dreamweaver, sempre use os comandos Retirar e Devolver. Se voc usar os comandos COLOCAR e OBTER para transferir arquivos, correr o risco de sobregravar as modificaes que algum usurio do Contribute tenha feito recentemente em um arquivo. Quando voc retira um arquivo em um site do Contribute, o Dreamweaver faz uma cpia de backup da verso anterior retirada do arquivo na pasta _baks e adiciona seu nome de usurio e uma data a um arquivo de Design Notes.

Mais tpicos da Ajuda


Devoluo e retirada de arquivos na pgina 86

Permisses de arquivos e pastas do Contribute no servidor


O Contribute proporciona um meio de gerenciar permisses de arquivos e pastas para cada funo de usurio que voc definir; contudo, o Contribute no proporciona uma maneira de gerenciar permisses subjacentes de leitura e gravao atribudas a arquivos e pastas pelo servidor. No Dreamweaver, possvel gerenciar essas permisses diretamente no servidor. Se o usurio do Contribute no tiver acesso de leitura a um arquivo dependente no servidor, como uma imagem exibida em uma pgina, o contedo do arquivo dependente no aparecer na janela do Contribute. Por exemplo, se o usurio no tem acesso de leitura a uma pasta de imagens, as imagens dessa pgina aparecero como cones de imagem partida no Contribute. Da mesma forma, os modelos do Dreamweaver so armazenados em uma subpasta da pasta raiz do site para que o usurio do Contribute no tenha acesso de leitura pasta raiz; ele no poder usar os modelos, a no ser que voc os copie para uma pasta apropriada. Quando voc configura um site do Dreamweaver, deve conceder aos usurios acesso de leitura pasta /_mm (a subpasta _mm da pasta raiz), pasta /Templates e a todas as pastas do servidor que contm ativos que eles precisaro usar. Ainda que, por motivos de segurana, voc no possa conceder acesso de leitura pasta /Templates, poder permitir que os usurios do Contribute acessem os modelos. Consulte Permitir que usurios do Contribute acessem modelos sem acesso pasta raiz na pgina 57. Para obter mais informaes sobre permisses do Contribute, consulte Administrao do Contribute na Ajuda do Contribute.

Arquivos especiais do Contribute


O Contribute usa uma variedade de arquivos especiais que no devem ser visualizados pelos visitantes do site:

O arquivo de configuraes compartilhadas, que tem um nome de arquivo ofuscado com uma extenso CSI,
aparece em uma pasta chamada _mm na pasta raiz do site, e contm informaes que o Contribute utiliza para gerenciar o site.

Verses antigas de arquivos, em pastas denominadas _baks Verses temporrias de pginas para que os usurios possam visualizar as alteraes Arquivos de bloqueio temporrios que indicam que determinada pgina est sendo editada ou visualizada Arquivos de Design Notes que contm metadados sobre pginas do site

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 54


Trabalho com sites do Dreamweaver

Em geral, no recomendvel editar os arquivos especiais do Contribute usando o Dreamweaver; o Dreamweaver os gerencia automaticamente. Se voc no quiser que esses arquivos especiais do Contribute apaream no seu servidor acessvel publicamente, configure um servidor de teste onde os usurios do Contribute trabalhem em pginas. Depois copie periodicamente essas pginas da Web do servidor de teste para um servidor de produo que esteja na Web. Se voc adotar essa abordagem do servidor de teste, copie somente as pginas da Web para o servidor de produo, e no os arquivos especiais do Contribute indicados acima. Em especial, no copie as pastas _mm e _baks para o servidor de produo. Nota: Para obter informaes sobre como configurar um servidor para que os visitantes no vejam os arquivos nas pastas que comeam com um sublinhado, consulte "Segurana no site" na Ajuda do Contribute. Ocasionalmente, convm excluir manualmente arquivos especiais do Contribute. Por exemplo, pode haver circunstncias em que o Contribute no consegue excluir as pginas de visualizao temporrias depois que o usurio as visualiza. Nesse caso, preciso excluir essas pginas temporrias manualmente. As pginas de visualizao temporrias tm nomes de arquivo que comeam com TMP. Da mesma forma, em algumas circunstncias, um arquivo de bloqueio desatualizado pode permanecer acidentalmente no servidor. Se isso acontecer, voc ter que excluir o arquivo de bloqueio manualmente para que outros usurios possam editar a pgina.

Preparar um site para usar com o Contribute


Se voc est preparando um site do Dreamweaver para usurios do Contribute, precisa ativar explicitamente a compatibilidade com o Contribute para usar recursos a ele relacionados; o Dreamweaver no solicita que voc faa isso; contudo, quando voc se conecta a um site que tenha sido configurado como um site do Contribute (que tem um administrador), o Dreamweaver solicita que voc ative a compatibilidade do Contribute. Nem todos os tipos de conexo aceitam a compatibilidade do Contribute. Estas restries aplicam-se aos tipos de conexo:

Se sua conexo com o site remoto usar WebDAV, a compatibilidade do Contribute no poder ser ativada porque
os sistemas de controle de origem no so compatveis com Design Notes e sistemas de retirada e devoluo que o Dreamweaver utiliza para sites do Contribute.

Se voc usa RDS para se conectar ao site remoto, pode ativar a compatibilidade do Contribute mas precisa
personalizar a conexo para compartilh-la com usurios do Contribute.

Se voc no est usando o computador local como servidor Web, configure o site usando uma conexo por FTP ou
rede com o computador (em vez de um caminho de pasta local) para poder compartilhar a conexo com usurios do Contribute. Quando voc ativa a compatibilidade do Contribute, o Dreamweaver automaticamente ativa o Design Notes (incluindo a opo Carregar Design Notes para compartilhamento) e o sistema de retirada/devoluo. Se o servidor CPS (Contribute Publishing Server) estiver ativado no site remoto ao qual voc est se conectando, o Dreamweaver notifica o CPS toda vez que voc aciona uma operao de rede como retirada, reverso ou publicao de um arquivo. O CPS registrar esses eventos e voc poder verificar o registro no console de administrao do CPS. (Se voc desativar o CPS, esses eventos no sero registrados.) voc ative o CPS usando o Contribute. Para obter mais informaes, consulte a Ajuda do Adobe Contribute.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 55


Trabalho com sites do Dreamweaver

Nota: Voc pode tornar um site do Contribute compatvel sem ter o Contribute em seu computador, mas se quiser iniciar o Contribute Administrator do Dreamweaver, o Contribute dever estar instalado no mesmo computador que o Dreamweaver e voc dever estar conectado ao site remoto antes de ativar a compatibilidade do Contribute. Caso contrrio, o Dreamweaver no poder ler as configuraes administrativas do Contribute para determinar se os recursos CPS e de reverso esto ativados. Importante: Voc deve certificar-se de que o arquivo de configuraes compartilhado (arquivo CSI) que o Contribute usa para administrar o site esteja no servidor remoto e no esteja corrompido. O Contribute cria automaticamente esse arquivo (e sobrescreve as verses antigas dele) sempre que voc administra o Contribute Administrator. Se o arquivo de configuraes compartilhadas no estiver no servidor ou estiver corrompido, o Dreamweaver retornar o erro "O arquivo necessrio para compatibilidade do Contribute no existe no servidor" sempre que voc tentar uma operao de rede (como uma insero). Para garantir que o arquivo correto esteja no servidor, desative a conexo com o servidor no Dreamweaver, inicie o Contribute Administrator, faa uma alterao de administrao e, em seguida, reconecte o servidor no Dreamweaver. Para obter mais informaes, consulte a Ajuda do Adobe Contribute.
1 Selecione Site > Gerenciar sites. 2 Selecione um site e, em seguida, clique em Editar. 3 Na caixa de dilogo Configurao de site, expanda Configuraes avanadas, selecione a categoria Contribute e, em

seguida, selecione Ativar compatibilidade do Contribute.


4 Se aparecer uma caixa de dilogo informando que voc precisa ativar o Design Notes e retirada/devoluo, clique

em OK.
5 Se voc ainda no forneceu as informaes de contato de retirada/devoluo, digite seu nome e endereo de email

na caixa de dilogo e clique em OK. O status de reverso, o status de CPS, a caixa de texto URL raiz do site e o boto Administrar site do Contribute aparecem na caixa de dilogo Definio de sites. Se Reverso estiver ativado no Contribute, voc poder voltar s verses anteriores de arquivos que voc alterou no Dreamweaver.
6 Marque o URL na caixa de texto URL raiz do site e corrija-a se necessrio. O Dreamweaver constri um URL raiz

do site com base em outras informaes de definio de site fornecidas, mas s vezes o URL construdo no est totalmente correto.
7 Clique no boto Testar para verificar se voc inseriu o URL correto.

Nota: Se voc est pronto para enviar uma chave de conexo ou realizar tarefas de administrao do site do Contribute, ignore as demais etapas.
8 Clique no Site do administrador no Contribute se quiser fazer alteraes de administrao. Lembre-se, o

Contribute deve estar instalado na mesma mquina em que deseja abrir o Contribute Administrator a partir do Dreamweaver.
9 Clique em Salvar e, em seguida, clique em Concludo.

Mais tpicos da Ajuda


Reverso de arquivos (usurios do Contribute) na pgina 100

Administrar um site do Contribute usando o Dreamweaver


Depois de ativar a compatibilidade do Contribute, voc pode usar o Dreamweaver para iniciar o Contribute e realizar tarefas de administrao do site. Nota: O Contribute deve estar instalado no mesmo computador do Dreamweaver.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 56


Trabalho com sites do Dreamweaver

Como administrador de um site do Contribute, voc pode:

Alterar as configuraes administrativas do site.


As configuraes administrativas do Contribute so um conjunto de configuraes aplicveis a todos os usurios do seu site. Essas configuraes permitem ajustar o Contribute para melhorar a experincia de uso.

Alterar as permisses concedidas s funes de usurio no Contribute. Configurar os usurios do Contribute.


Os usurios do Contribute precisam de certas informaes sobre o site para se conectarem a ele. Voc pode reunir todas essas informaes em um arquivo conhecido como chave de conexo e envi-lo aos usurios do Contribute. Nota: Uma chave de conexo no igual a um arquivo de site exportado do Dreamweaver. Antes de oferecer aos usurios do Contribute as informaes de conexo de que eles precisam para editar pginas, use o Dreamweaver para criar a hierarquia de pastas bsicas do seu site e para criar os modelos e as folhas de estilo CSS necessrias ao site.
1 Selecione Site > Gerenciar sites. 2 Selecione um site e clique em Editar. 3 Na caixa de dilogo Configurao de site, expanda as Configuraes avanadas e selecione a categoria Contribute. 4 Clique no boto Administrar site do Contribute.

Nota: Esse boto s aparece se voc ativar a compatibilidade do Contribute.


5 Se solicitado, insira a senha de administrador e clique em OK.

A caixa de dilogo Administrar site exibida.

Para alterar as configuraes administrativas, selecione uma categoria na lista esquerda e altere as configuraes
conforme o necessrio.

Para alterar as configuraes de funo, na categoria Usurios e funes, clique em Editar configuraes de funo
e faa as alteraes necessrias.

Para enviar uma chave de conexo para configurar usurios, na categoria Usurios e funes, clique em Enviar
chave de conexo e conclua o Assistente de conexo.
6 Clique em Fechar, clique em OK e, em seguida, clique em Concludo.

Para obter mais informaes sobre configuraes administrativas, gerenciamento de funes de usurio ou criao de uma chave de conexo, consulte a Ajuda do Contribute.

Mais tpicos da Ajuda


Importar e exportar configuraes de site na pgina 49

Excluir, mover ou renomear um arquivo remoto em um site do Contribute


A excluso de um arquivo do servidor remoto que hospeda um site do Contribute funciona como a excluso de um arquivo do servidor de qualquer site do Dreamweaver. Entretanto, quando voc exclui um arquivo de um site do Contribute, o Dreamweaver pergunta se voc deseja excluir todas as verses anteriores do arquivo. Se voc optar por manter as verses anteriores, o Dreamweaver salva uma cpia da verso atual na pasta _baks para possibilitar sua posterior restaurao.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 57


Trabalho com sites do Dreamweaver

Renomear um arquivo remoto ou mov-lo de uma pasta para outra em um site do Contribute funciona como em qualquer site do Dreamweaver. Em um site do Contribute, o Dreamweaver tambm renomeia ou move as verses anteriores associadas do arquivo que esto salvas na pasta _baks.
1 Selecione o arquivo no painel Remoto do painel Arquivos (Janela > Arquivos) e pressione Backspace (Windows)

ou Delete (Macintosh). Ser exibida uma caixa de dilogo pedindo que voc confirme se deseja excluir o arquivo.
2 Na caixa de dilogo de confirmao:

Para excluir todas as verses anteriores do arquivo e tambm a verso atual, marque a opo Excluir verses
anteriores.

Para manter as verses anteriores no servidor, desmarque a opo Excluir verses anteriores.
3 Clique em Sim para excluir o arquivo.

Permitir que usurios do Contribute acessem modelos sem acesso pasta raiz
Em um site do Contribute, voc gerencia as permisses de arquivos e pastas subjacentes no servidor. Ainda que, por motivos de segurana, voc no possa conceder acesso de leitura pasta /Templates, poder colocar os modelos disposio dos usurios.
1 Configure o site do Contribute para que sua pasta raiz seja a pasta que os usurios vero como a raiz. 2 Copie manualmente a pasta de modelos da pasta raiz do site principal para a pasta raiz do site do Contribute usando

o painel Arquivos.
3 Depois de atualizar os modelos do site principal, recopie os modelos alterados para as subpastas apropriadas

conforme o necessrio. Se voc no optar por esse mtodo, no use links relativos raiz do site nas subpastas. Os links relativos raiz do site referem-se principal pasta raiz no servidor, e no pasta raiz definida no Dreamweaver. Os usurios do Contribute no podem criar links relativos raiz do site. Se os links em uma pgina do Contribute parecerem rompidos, possvel que haja algum problema com as permisses de pasta, principalmente se os links vinculam a pginas fora da pasta raiz do usurio do Contribute. Verifique as permisses de leitura e gravao para pastas no servidor.

Mais tpicos da Ajuda


Caminhos absolutos, relativos a documentos e relativos raiz do site na pgina 271

Solucionar problemas em site do Contribute


Se um arquivo remoto em um site do Contribute parecer retirado mas estiver na verdade bloqueado no computador do usurio, voc poder desbloquear o arquivo para que os usurios possam edit-lo. Quando voc clica em qualquer boto relacionado administrao do site do Contribute, o Dreamweaver verifica se ele pode se conectar ao site remoto e se o URL raiz do site fornecido vlido. Se o Dreamweaver no puder se conectar ou se o URL no for vlido, ser exibida uma mensagem de erro. Se as ferramentas de administrao no esto funcionando corretamente, pode haver algum problema com a pasta _mm.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 58


Trabalho com sites do Dreamweaver

Desbloquear um arquivo em site do Contribute


Nota: Antes de seguir este procedimento, verifique se o arquivo no foi retirado. Se voc desbloquear um arquivo enquanto um usurio do Contribute o edita, vrios usurios podero editar o arquivo simultaneamente.
1 Siga um destes procedimentos:

Abra o arquivo na janela Documento e selecione Site > Desfazer retirada. No painel Arquivos (Janela > Arquivos), clique com o boto direito do mouse (Windows) ou Control-clique
(Macintosh) e selecione Desfazer retirada. Ser exibida uma caixa de dilogo indicando quem retirou o arquivo e pedindo que voc confirme se deseja desbloque-lo.
2 Se a caixa de dilogo for exibida, clique em Sim para confirmar.

O arquivo desbloqueado no servidor.

Solucionar problemas de conexo de um site do Contribute


1 Marque a opo URL raiz do site na categoria Contribute da caixa de dilogo Definio de sites abrindo o URL que

est no navegador para certificar-se de que a pgina correta aberta.


2 Use o boto Testar na categoria Informaes remotas da caixa de dilogo Definio de sites para verificar se

possvel conectar-se ao site.


3 Se o URL estiver correto mas o boto Testar apresentar uma mensagem de erro, solicite a ajuda do administrador

do sistema.

Solucionar problemas das ferramentas de administrao do Contribute


1 No servidor, verifique se voc tem permisses de leitura e gravao e as permisses executveis, se necessrias, para

a pasta _mm.
2 Certifique-se de que a pasta _mm contenha um arquivo de configuraes compartilhadas com uma extenso CSI. 3 Se no tiver, use o Assistente de conexo (Windows) ou o Connection Assistant (Macintosh) para criar uma

conexo com o site e tornar-se um administrador do site. O arquivo de configuraes compartilhadas criado automaticamente quando voc se torna um administrador. Para obter mais informaes sobre como tornar-se um administrador de um site do Contribute, consulte Administrao do Contribute na Ajuda do Contribute.

ltima atualizao em 28/4/2010

59

Captulo 4: Criao e gerenciamento de arquivos


Criao e abertura de documentos
Sobre a criao de documentos do Dreamweaver
O Dreamweaver oferece um ambiente flexvel para o trabalho com vrios documentos da Web. Alm dos documentos em HTML, voc pode criar e abrir vrios documentos baseados em texto, inclusive CFML (Linguagem de markup do ColdFusion), ASP, JavaScript, e CSS (folhas de estilos em cascata). Tambm h suporte para arquivos-fonte como, por exemplo, Visual Basic, .NET, C# e Java. O Dreamweaver oferece vrias opes para a criao de um novo documento. Voc pode criar qualquer um dos seguintes:

Um novo documento em branco ou modelo Um documento baseado em um dos layouts de pgina previamente criados que acompanham o Dreamweaver,
inclusive mais de 30 layouts de pgina baseados em CSS

Um documento baseado em um dos modelos existentes


Voc tambm pode definir as preferncias do documento. Por exemplo, caso normalmente trabalhe com um tipo de documento, voc pode defini-lo como sendo o tipo de documento padro para novas pginas criadas. Voc pode definir facilmente propriedades de documento como, por exemplo, tags meta, ttulos de documento e cores de fundo, alm de vrias outras propriedades de pgina na Visualizao de design ou na Visualizao de cdigo.

Tipos de arquivo do Dreamweaver


Voc pode trabalhar com vrios tipos de arquivo no Dreamweaver. O tipo de arquivo primrio com o qual voc trabalhar o arquivo HTML. Os arquivos HTML ou Linguagem de markup de hipertexto contm a linguagem baseada na tag responsvel pela exibio de uma pgina da Web em um navegador. Voc pode salvar arquivos HTML usando a extenso .html ou .htm. Por padro, o Dreamweaver salva arquivos usando a extenso .html. A seguir esto alguns dos demais tipos de arquivo comuns que voc pode usar ao trabalhar no Dreamweaver:
CSS Os arquivos em folha de estilos em cascata tm uma extenso .css. Eles so usados para formatar contedo em

HTML e controlar o posicionamento de vrios elementos de pgina.


GIF Os arquivos Graphics Interchange Format tm uma extenso .gif. GIF um formato grfico para Web conhecido

para desenhos, logotipos, grficos com reas transparentes e animaes. Os GIFs contm 256 cores no mximo.
JPEG Os arquivos Joint Photographic Experts Group (nomeados aps a criao do formato pela organizao) tm uma extenso .jpg e costumam ser fotografias ou imagens coloridas de alta resoluo. O formato JPEG mais conhecido por conta de fotografias digitais ou digitalizadas, imagens que usam texturas, imagens com transies de gradientes de cores e todas as imagens que exijam mais de 256 cores. XML Os arquivos em Linguagem de markup extensvel tm uma extenso .xml. Eles contm dados em uma forma no

processada que pode ser formatada usando a XSL (Linguagem de folha de estilos extensvel).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 60


Criao e gerenciamento de arquivos

XSL Os arquivos em Linguagem de folha de estilos extensvel tm uma extenso .xsl ou .xslt. Eles so usados para aplicar estilo a dados em XML que voc deseja exibir em uma pgina da Web. CFML Os arquivos em Linguagem de markup do ColdFusion tm uma extenso .cfm. Eles so usados para processar

pginas dinmicas.
PHP Os arquivos do Pr-processador de hipertexto tm uma extenso .php e so usados para processar pginas dinmicas.

Mais tpicos da Ajuda


Exibio de dados XML com XSLT na pgina 493 Criao visual de aplicativos na pgina 606 Introduo s folhas de estilos em cascata na pgina 123

Criar uma pgina em branco


Voc pode criar uma pgina que contenha um layout de CSS previamente elaborado ou criar uma pgina totalmente em branco e, em seguida, criar um layout prprio.
1 Selecione Arquivo > Novo. 2 Na categoria Pgina em branco da caixa de dilogo Novo documento, selecione o tipo de pgina que voc deseja

criar na coluna Tipo de pgina. Por exemplo, selecione HTML para criar uma pgina em HTML simples, selecione ColdFusion para criar uma pgina do ColdFusion etc.
3 Caso voc queira que a nova pgina contenha um layout de CSS, selecione um layout de CSS previamente criado

na coluna Layout; do contrrio, selecione Nenhum. Com base na seleo, uma visualizao e a descrio do layout selecionado so exibidas no lado direito da caixa de dilogo. Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna:
Fixa A largura da coluna especificada em pixels. A coluna no redimensionada com base no tamanho do navegador ou nas configuraes de texto do visitante do site. Lquida A largura da coluna especificada como uma porcentagem da largura do navegador do visitante. O design se

adapta caso o visitante do site torne o navegador mais largo ou mais estreito, mas no se altera com base nas configuraes de texto do visitante do site.
4 Selecione um tipo de documento no menu pop-up TipoDoc. Na maior parte dos casos, voc pode usar a seleo

padro, XHTML 1.0 Transitional. A seleo de uma das definies do tipo de documento em XHTML no menu TipoDoc (DTD) torna a pgina compatvel com XHTML. Por exemplo, voc pode criar um documento HTML compatvel com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu. A XHTML (Linguagem de markup de hipertexto extensvel) uma reformulao do HTML como um aplicativo XML. Em geral, o uso de XHTML oferece a voc os benefcios de XML, ao mesmo tempo em que garante a compatibilidade reversa e futura dos documentos da Web. Nota: Para obter mais informaes sobre a XHTML, consulte o site do World Wide Web Consortium (W3C), que contm a especificao de XHTML 1.1 - XHTML baseada em mdulo (www.w3.org/TR/xhtml11/) e de XHTML 1.0 (www.w3c.org/TR/xhtml1/), bem como sites validadores de XHTML para arquivos baseados na Web (http://validator.w3.org/) e arquivos locais (http://validator.w3.org/file-upload.html).
5 Caso voc tenha selecionado um layout de CSS na coluna Layout, selecione um local para a CSS de layout no menu

pop-up CSS de layout.


Adicionar a cabealho Adiciona CSS do layout ao cabealho da pgina que voc est criando.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 61


Criao e gerenciamento de arquivos

Criar novo arquivo Adiciona CSS do layout a um novo arquivo CSS externo e anexa a nova folha de estilos pgina que voc est criando. Vincular a arquivo existente Permite a voc especificar um arquivo CSS existente que j contm as regras de CSS

necessrias ao layout. Para isso, clique no cone Anexar folha de estilos acima do painel Anexar arquivo CSS e selecione uma folha de estilos CSS existente. Essa opo especialmente til quando voc deseja usar o mesmo layout de CSS (as regras de CSS contidas em um nico arquivo) em vrios documentos.
6 (Opcional) Voc tambm pode anexar as folhas de estilos CSS nova pgina (no relacionada ao layout CSS) ao

criar a pgina. Para fazer isso, clique no cone Anexar folha de estilos selecione uma folha de estilos CSS.

acima do painel Anexar arquivo CSS e

Para obter uma descrio detalhada desse processo, consulte o artigo de Anexar automaticamente uma folha de estilos a novos documentos de David Powers.
7 Selecione Ativar edio InContext se quiser criar uma pgina que se tornar ativada para edio InContext assim

que salv-la. Uma pgina ativada para edio InContext dever ter pelo menos uma tag div que pode ser especificada como regio editvel. Por exemplo, se tiver selecionado o tipo de pgina HTML, voc dever selecionar um dos layouts de CSS para sua nova pgina, j que esses layouts j contm tags div pr-definidas. A regio editvel pela edio InContext automaticamente colocada na tag div com a ID contedo. Voc poder, posteriormente, adicionar mais regies editveis pgina, se desejar.
8 Clique em Preferncias caso voc queira definir as preferncias de documento padro como, por exemplo, um tipo

de documento, codificao e extenso de arquivo.


9 Clique em Obter mais contedo caso queira abrir o Dreamweaver Exchange onde voc pode baixar mais contedo

para design de pgina.


10 Clique no boto Criar. 11 Salve o novo documento (Arquivo > Salvar). 12 Na caixa de dilogo exibida, v at a pasta em que deseja salvar o arquivo.

uma boa idia salvar o arquivo em um site do Dreamweaver.


13 Na caixa Nome do arquivo, digite um nome para o arquivo.

Evite o uso de espaos e de caracteres especiais em nomes de arquivo e pasta e no comece um nome de arquivo com um numeral. Em particular, no use caracteres especiais (como, por exemplo, , , ou ) ou pontuaes (como, por exemplo, dois-pontos, barras ou pontos) nos nomes de arquivo que voc pretende colocar em um servidor remoto. Muitos servidores alteram esses caracteres durante o carregamento, o que far com que todos os links para o arquivo sejam desfeitos.

Mais tpicos da Ajuda


Cdigo XHTML na pgina 293 Layout das pginas com CSS na pgina 150 Definir o tipo e a codificao de documento padro na pgina 66 Business Catalyst InContext Editing na pgina 486

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 62


Criao e gerenciamento de arquivos

Criar um modelo em branco


Voc pode usar a caixa de dilogo Novo documento para criar modelos do Dreamweaver. Por padro, os modelos so salvos na pasta Modelos do site.
1 Selecione Arquivo > Novo. 2 Na caixa de dilogo Novo documento, selecione a categoria Modelo em branco. 3 Selecione o tipo de pgina que voc deseja criar na coluna Tipo de modelo. Por exemplo, selecione o modelo HTML

para criar um modelo HTML simples, selecione o modelo ColdFusion para criar um modelo do ColdFusion etc.
4 Caso voc queira que a nova pgina contenha um layout de CSS, selecione um layout de CSS previamente criado

na coluna Layout; do contrrio, selecione Nenhum. Com base na seleo, uma visualizao e a descrio do layout selecionado so exibidas no lado direito da caixa de dilogo. Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna:
Fixa A largura da coluna especificada em pixels. A coluna no redimensionada com base no tamanho do navegador ou nas configuraes de texto do visitante do site. Lquida A largura da coluna especificada como uma porcentagem da largura do navegador do visitante. O design se

adapta caso o visitante do site torne o navegador mais largo ou mais estreito, mas no se altera com base nas configuraes de texto do visitante do site.
5 Selecione um tipo de documento no menu pop-up TipoDoc. Na maior parte dos casos, voc desejar deixar a

seleo padro, XHTML 1.0 Transitional. A seleo de uma das definies do tipo de documento em XHTML no menu TipoDoc (DTD) torna a pgina compatvel com XHTML. Por exemplo, voc pode criar um documento HTML compatvel com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu. A XHTML (Linguagem de markup de hipertexto extensvel) uma reformulao do HTML como um aplicativo XML. Em geral, o uso de XHTML oferece a voc os benefcios de XML, ao mesmo tempo em que garante a compatibilidade reversa e futura dos documentos da Web. Nota: Para obter mais informaes sobre a XHTML, consulte o site do World Wide Web Consortium (W3C), que contm a especificao de XHTML 1.1 - XHTML baseada em mdulo (www.w3.org/TR/xhtml11/) e de XHTML 1.0 (www.w3c.org/TR/xhtml1/), bem como sites validadores de XHTML para arquivos baseados na Web (http://validator.w3.org/) e arquivos locais (http://validator.w3.org/file-upload.html).
6 Caso voc tenha selecionado um layout de CSS na coluna Layout, selecione um local para a CSS de layout no menu

pop-up CSS de layout.


Adicionar a cabealho Adiciona CSS do layout ao cabealho da pgina que voc est criando. Criar novo arquivo Adiciona CSS do layout a uma nova folha de estilos CSS externa e anexa a nova folha de estilos pgina que voc est criando. Vincular a arquivo existente Permite a voc especificar um arquivo CSS existente que j contm as regras de CSS necessrias ao layout. Para isso, clique no cone Anexar folha de estilos acima do painel Anexar arquivo CSS e selecione uma folha de estilos CSS existente. Essa opo especialmente til quando voc deseja usar o mesmo layout de CSS (as regras de CSS contidas em um nico arquivo) em vrios documentos.

7 (Opcional) Voc tambm pode anexar as folhas de estilos CSS nova pgina (no relacionada ao layout CSS) ao

criar a pgina. Para fazer isso, clique no cone Anexar folha de estilos selecione uma folha de estilos CSS. que salv-la.

acima do painel Anexar arquivo CSS e

8 Selecione Ativar edio InContext se quiser criar uma pgina que se tornar ativada para edio InContext assim

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 63


Criao e gerenciamento de arquivos

Uma pgina ativada para edio InContext dever ter pelo menos uma tag div que pode ser especificada como regio editvel. Por exemplo, se tiver selecionado o tipo de pgina HTML, voc dever selecionar um dos layouts de CSS para sua nova pgina, j que esses layouts j contm tags div pr-definidas. A regio editvel pela edio InContext automaticamente colocada na tag div com a ID contedo. Voc poder, posteriormente, adicionar mais regies editveis pgina, se desejar.
9 Clique em Preferncias caso voc queira definir as preferncias de documento padro como, por exemplo, um tipo

de documento, codificao e extenso de arquivo.


10 Clique em Obter mais contedo caso queira abrir o Dreamweaver onde voc pode baixar mais contedo para

design de pgina.
11 Clique no boto Criar. 12 Salve o novo documento (Arquivo > Salvar). Caso voc ainda no tenha adicionado regies editveis ao modelo,

uma caixa de dilogo exibida informando voc de que no h regies editveis no documento. Clique em OK para fechar a caixa de dilogo.
13 Na caixa de dilogo Salvar como, selecione um local para salvar o modelo. 14 Na caixa Nome do arquivo, digite um nome para o novo modelo. Voc no precisa acrescentar uma extenso de

arquivo ao nome do modelo. Quando voc clica em Salvar, a extenso .dwt acrescentada ao novo modelo, salvo na pasta Modelos do site. Evite o uso de espaos e de caracteres especiais em nomes de arquivo e pasta e no comece um nome de arquivo com um numeral. Em particular, no use caracteres especiais (como, por exemplo, , , ou ) ou pontuaes (como, por exemplo, dois-pontos, barras ou pontos) nos nomes de arquivo que voc pretende colocar em um servidor remoto. Muitos servidores alteram esses caracteres durante o carregamento, o que far com que todos os links para o arquivo sejam desfeitos.

Mais tpicos da Ajuda


Cdigo XHTML na pgina 293 Layout das pginas com CSS na pgina 150 Criao e gerenciamento de modelos na pgina 389 Configurao de um site do Dreamweaver na pgina 37 Definir o tipo e a codificao de documento padro na pgina 66 Business Catalyst InContext Editing na pgina 486

Criar uma pgina baseada em um modelo


Voc pode selecionar, visualizar e criar um novo documento usando um modelo existente. Voc pode usar a caixa de dilogo Novo documento para selecionar um modelo em qualquer um dos sites definidos pelo Dreamweaver ou usar o painel Ativos para criar um novo documento em um modelo existente.

Mais tpicos da Ajuda


Criao e gerenciamento de modelos na pgina 389 Configurao de um site do Dreamweaver na pgina 37 Definir o tipo e a codificao de documento padro na pgina 66

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 64


Criao e gerenciamento de arquivos

Criar um documento com base em um modelo


1 Selecione Arquivo > Novo. 2 Na caixa de dilogo Novo documento, selecione a categoria Pgina com modelo. 3 Na coluna Site, selecione o site do Dreamweaver que contm o modelo que voc deseja usar e, depois, selecione um

modelo na lista direita.


4 Desmarque Atualizar a pgina quando o modelo for alterado caso voc queira atualizar a pgina sempre que fizer

alteraes no modelo no qual a pgina se baseie.


5 Clique em Preferncias caso voc queira definir as preferncias de documento padro como, por exemplo, um tipo

de documento, codificao e extenso de arquivo.


6 Clique em Obter mais contedo caso queira abrir o Dreamweaver onde voc pode baixar mais contedo para

design de pgina.
7 Clique em Criar e salvar o documento (Arquivo > Salvar).

Criar um documento em um modelo no painel Ativos


1 Abra o painel Ativos (Janela > Ativos), caso ele ainda no esteja aberto. 2 No painel Ativos, clique no cone Modelos

esquerda para exibir a lista dos modelos no site atual.

Caso tenha acabado de criar o modelo que deseja aplicar, voc talvez precise clicar no boto Atualizar para v-lo.
3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no modelo que

voc deseja aplicar e, em seguida, selecione Novo a partir de modelo. O documento aberto na janela Documento.
4 Salve o documento.

Criar uma pgina baseada em um arquivo de amostra do Dreamweaver


O Dreamweaver j vem com vrios arquivos de layout de pgina de quadro e design CSS desenvolvidos profissionalmente. Voc pode usar esses arquivos de amostra como ponto de partida para o design de pginas nos sites. Quando voc cria um documento com base em um arquivo de amostra, o Dreamweaver cria uma cpia do arquivo. Voc pode visualizar um arquivo de amostra e ler uma breve descrio dos elementos de design de um documento na caixa de dilogo Novo documento. No caso das folhas de estilos CSS, voc pode copiar uma folha de estilos previamente criada e aplic-la aos documentos. Nota: Caso voc crie um documento com base em um conjunto de molduras predefinido, apenas a estrutura do conjunto copiada, e no o contedo da moldura. Alm disso, voc deve salvar cada arquivo de moldura separadamente.
1 Selecione Arquivo > Novo. 2 Na caixa de dilogo Novo documento, selecione a categoria Pgina da amostra. 3 Na coluna Pasta de amostra, selecione Folha de Estilo CSS ou Conjunto de molduras; depois selecione um arquivo

de amostra na lista direita.


4 Clique no boto Criar.

O novo documento aberto na janela Documento (Visualizao de cdigo e Visualizao de design). Caso voc tenha selecionado Folha de Estilo CSS, a folha de estilos CSS aberta na Visualizao de cdigo.
5 Salve o documento (Arquivo > Salvar).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 65


Criao e gerenciamento de arquivos

6 Caso a caixa de dilogo Copiar arquivos dependentes seja exibida, defina as opes e, em seguida, clique em Copiar

para copiar os ativos para a pasta selecionada. Voc pode escolher o local prprio dos arquivos dependentes ou usar o local da pasta padro que o Dreamweaver gera (com base no nome de fonte do arquivo de amostra).

Mais tpicos da Ajuda


Introduo s folhas de estilos em cascata na pgina 123 Salvar arquivos de quadro e conjunto de quadros na pgina 198

Criar outros tipos de pgina


A categoria Outros da caixa de dilogo Novo documento permite a voc criar vrios tipos de pgina que voc talvez queira usar no Dreamweaver, inclusive pginas do C#, VBScript e somente texto.
1 Selecione Arquivo > Novo. 2 Na caixa de dilogo Novo documento, selecione a categoria Outros. 3 Selecione o tipo de documento que voc deseja criar na coluna Tipo de pgina e clique no boto Criar. 4 Salve o documento (Arquivo > Salvar).

Salvar e reverter documentos


Voc pode salvar um documento usando seu nome e local atual, ou salvar uma cpia de um documento usando outro nome e local. Ao nomear arquivos, evite usar espaos e caracteres especiais nos nomes de arquivo e pasta. Em particular, no use caracteres especiais (, , ou ) ou pontuao (como dois-pontos, barras ou pontos) nos nomes de arquivos que voc pretende colocar em um servidor remoto. Muitos servidores alteram esses caracteres durante o carregamento, o que far com que quaisquer links para o arquivo sejam quebrados. Alm disso, no comece um nome de arquivo com nmeros.

Mais tpicos da Ajuda


Criar uma pgina em branco na pgina 60

Salvar um documento
1 Siga um destes procedimentos:

Para sobregravar a verso atual no disco e salvar quaisquer alteraes efetuadas, selecione Arquivo > Salvar. Para salvar o arquivo em uma pasta diferente ou com outro nome, selecione Arquivo > Salvar como.
2 Na caixa de dilogo Salvar como, v at a pasta em que deseja salvar o arquivo. 3 Na caixa de texto Nome do arquivo, digite um nome para o arquivo. 4 Clique em Salvar para salvar o arquivo.

Salvar todos os documentos abertos


1 Selecione Arquivo > Salvar tudo. 2 Se houver documentos no salvos abertos, a caixa de dilogo Salvar como exibida para cada documento no salvo.

Na caixa de dilogo exibida, v at a pasta em que deseja salvar o arquivo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 66


Criao e gerenciamento de arquivos

3 Na caixa Nome do arquivo, digite um nome para o arquivo e clique em Salvar.

Reverso para a ltima verso salva de um documento


1 Selecione Arquivo > Reverter.

Uma caixa de dilogo pergunta se voc deseja descartar as alteraes e reverter para a verso salva anteriormente.
2 Clique em Sim para reverter para a verso anterior. Clique em No para manter as alteraes.

Nota: Se voc salvar um documento e sair do Dreamweaver, no poder reverter para a verso anterior do documento quando reiniciar o Dreamweaver.

Definir o tipo e a codificao de documento padro


Voc pode definir o tipo de documento usado como documento padro de um site. Por exemplo, caso a maioria das pginas do site seja de um tipo de arquivo especfico (como, por exemplo, documentos do ColdFusion, HTML ou ASP), voc pode definir as preferncias de documento que criam automaticamente novos documentos do tipo de arquivo especificado.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).

Voc tambm pode clicar no boto Preferncias da caixa de dilogo Novo documento para definir as preferncias de novo documento quando voc cria um novo documento.
2 Clique em Novo documento na lista de categorias esquerda. 3 Defina ou altere as preferncias conforme necessrio e clique em OK para salv-las.
Documento padro Selecione um tipo de documento a ser usado nas pginas que voc criar. Extenso padro Especifique a extenso de arquivo que voc prefere (.htm ou .html) para novas pginas em HTML

criadas. Nota: Essa opo est desativada para os demais tipos de arquivo.
Tipo padro de documento (DDT) Selecione uma das definies do tipo padro de documento (DTD) em XHTML para tornar novas pginas compatveis com XHTML. Por exemplo, voc pode criar um documento HTML compatvel com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu. Codificao padro Especifique a codificao a ser usada quando uma nova pgina criada, bem como quando um documento aberto sem especificar nenhuma codificao.

Se voc selecionar Unicode (UTF-8) como codificao de documento, a codificao de entidade no ser necessria, pois a codificao UTF-8 poder representar com segurana todos os caracteres. Se voc selecionar outra codificao de documento, a codificao de entidade provavelmente ser necessria para representar determinados caracteres. Para obter mais informaes sobre as entidades de caractere, consulte www.w3.org/TR/REChtml40/sgml/entities.html. Caso selecione Unicode (UTF-8) como codificao padro, voc pode incluir uma BOM (marca de ordem de bytes) no documento selecionando a opo Incluir assinatura Unicode (BOM). Uma BOM consiste em 2 a 4 bytes no incio de um arquivo de texto que identifica um arquivo como Unicode, bem como a ordem dos bytes a seguir. Como a codificao UTF-8 no tem ordem de bytes, a adio de um BOM UTF-8 opcional. Na UTF-16 e UTF-32, ela obrigatria.
Formulrio de normalizao unicode Selecione uma destas opes caso voc escolha Unicode (UTF-8) como

codificao padro.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 67


Criao e gerenciamento de arquivos

H quatro formulrios de normalizao unicode. O mais importante deles o formulrio de normalizao C, pois o formulrio mais comum utilizado no modelo de caractere da World Wide Web. A Adobe fornece os outros trs para ser mais completa.
Mostrar caixa de dilogo Novo documento ao pressionar Control+N Desmarque essa opo (on Command+N para Macintosh) a fim de criar automaticamente um documento do tipo padro quando voc usa o comando principal.

No Unicode, h caracteres que so visualmente semelhantes, mas que podem ser armazenados no documento de diferentes maneiras. Por exemplo, (e-umlaut) pode ser representado como um caractere nico, e com trema, ou como dois caracteres, e latino regular + trema. O caractere de combinao Unicode aquele utilizado com o caractere anterior; sendo assim, o trema apareceria acima do e latino. Os dois formulrios tm como resultado a mesma tipografia visual, mas o que salvo no arquivo diferente em cada formulrio. A normalizao o processo que garante que todos os caracteres que podem ser salvos de formas diferentes sero salvos de uma mesma forma. Ou seja, todos os caracteres de um documento sero salvos como um nico e com trema ou como e + trema , e no de duas formas em um documento. Para obter mais informaes sobre a normalizao unicode e as formas especficas que podem ser usadas, consulte o site da Unicode em www.unicode.org/reports/tr15.

Mais tpicos da Ajuda


Cdigo XHTML na pgina 293 Introduo codificao de documento na pgina 211

Definir a extenso de arquivo padro de novos documentos em HTML


Voc pode definir a extenso de arquivo padro dos documentos em HTML criados no Dreamweaver. Por exemplo, voc pode usar uma extenso .htm ou .html para todos os novos documentos em HTML.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh).

Voc tambm pode clicar no boto Preferncias da caixa de dilogo Novo documento para definir as preferncias de novo documento quando voc cria um novo documento.
2 Clique em Novo documento na lista de categorias esquerda. 3 Verifique se HTML est selecionado no menu pop-up Documento padro. 4 Na caixa Extenso padro, especifique a extenso de arquivo que voc deseja para novos documentos em HTML

criados no Dreamweaver. No Windows, voc pode especificar as seguintes extenses: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml. No Macintosh, voc pode especificar as seguintes extenses: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.

Abrir e editar documentos existentes


Voc pode abrir uma pgina da Web existente ou um documento baseado em texto, independentemente de ser criado ou no no Dreamweaver e edit-lo na Visualizao de design ou de cdigo. Caso o documento que voc abriu seja um arquivo do Microsoft Word salvo como um documento em HTML, voc pode usar o comando Limpar HTML em Word para remover as tags de markup estranhas que o Word insere nos arquivos em HTML. Para limpar HTML ou XHTML que no foi gerado pelo Microsoft Word, use o comando Limpar HTML.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 68


Criao e gerenciamento de arquivos

Voc tambm pode abrir arquivos de texto que no so em HTML como, por exemplo, arquivos do JavaScript, arquivos em XML, folhas de estilos CSS ou arquivos de texto salvos por processadores ou editores de texto.
1 Selecione Arquivo > Abrir.

Voc tambm pode usar o painel Arquivos para abrir arquivos.


2 Navegue at e selecione o arquivo que voc deseja abrir.

Nota: Caso voc ainda no tenha feito isso, uma boa idia organizar os arquivos que voc pretende abrir e editar em um site do Dreamweaver, em vez de abri-los em outro local.
3 Clique em Abrir.

O documento aberto na janela Documento. Por padro, JavaScript, texto e folha de estilos CSS so abertos na Visualizao de cdigo. Voc pode atualizar o documento enquanto trabalha no Dreamweaver e salvar as alteraes no arquivo.

Mais tpicos da Ajuda


Limpar cdigo na pgina 323 Iniciar um editor externo para arquivos de mdia na pgina 258 Trabalhar com arquivos no painel Arquivos na pgina 76

Abrir Arquivos relacionados


O Dreamweaver permite exibir arquivos relacionados ao documento principal, sem perder o foco do documento principal. Por exemplo, se voc tem arquivos CSS e JavaScript anexados a um documento principal, o Dreamweaver permite exibir e editar esses arquivos relacionados na janela Documento, ao mesmo tempo que mantm o documento principal visvel. Nota: Arquivos rel. dinamicamente (tais como arquivos PHP em Sistemas de gerenciamento de contedo) so abordados na prxima seo de Ajuda. Por padro, o Dreamweaver exibe os nomes de todos os arquivos relacionados em um documento principal na barra de ferramentas Arquivos relacionados, abaixo do ttulo do documento principal. A ordem dos botes na barra de ferramentas segue a ordem dos links de arquivos relacionados existentes no documento principal. Nota: Se estiver faltando um arquivo relacionado, o Dreamweaver ainda exibir o boto correspondente na barra de ferramentas Arquivos relacionados. Se voc clicar no boto, no entanto, o Dreamweaver no exibe nada. O Dreamweaver oferece suporte aos seguintes tipos de arquivos relacionados:

Arquivos de script do cliente Incluses do servidor Fontes de conjuntos de dados do Spry (XML e HTML) Folhas de estilos CSS externas (incluindo folhas de estilos aninhadas)
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre como trabalhar com arquivos relacionados, consulte www.adobe.com/go/dw10relatedfiles_br. Para assistir a um tutorial em vdeo sobre como trabalhar com Visualizao dinmica, arquivos relacionados e o Navegador de cdigo, consulte www.adobe.com/go/lrvid4044_dw_br.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 69


Criao e gerenciamento de arquivos

Abrir um arquivo relacionado na barra de ferramentas Arquivos relacionados


Siga um destes procedimentos:

Na barra de ferramentas Arquivos relacionados, na parte superior do documento, clique no nome do arquivo
relacionado que deseja abrir.

Na barra de ferramentas Arquivos relacionados, clique com o boto direito do mouse no nome do arquivo
relacionado que deseja abrir e selecione Abrir como arquivo separado, no menu de contexto. Ao abrir um arquivo relacionado por este mtodo, o documento principal no permanecer visvel simultaneamente.

Abrir um arquivo relacionado no Navegador de cdigo


1 Coloque o ponto de insero em uma linha ou uma rea que voc sabe ser afetada por um arquivo relacionado. 2 Espere at que o indicador do Navegador de cdigo seja exibido e, em seguida, clique nele para abrir o Navegador

de cdigo.
3 Focalize os itens no Navegador de cdigo para exibir mais informaes sobre eles. Por exemplo, se voc deseja

alterar uma propriedade de cor CSS especfica mas no sabe em que regra ela est, possvel localizar a propriedade focalizando as regras disponveis no Navegador de cdigo.
4 Clique no item desejado para abrir o arquivo relacionado correspondente.

Retornar ao cdigo-fonte do documento principal


Clique no boto Cdigo-fonte, na barra de ferramentas Arquivos relacionados.

Alterar a exibio de arquivos relacionados


Voc pode exibir os arquivos relacionados de diversas maneiras:

Ao abrir um arquivo relacionado na Visualizao de design ou nas visualizaes de cdigo e de design (visualizao
dividida), os arquivos relacionados so exibidos em uma visualizao dividida acima da visualizao de design do documento principal. Em vez disso, voc pode selecionar Exibir > Visualizao de design na parte superior, se desejar exibir o arquivo relacionado na parte inferior da janela Documento.

Ao abrir um arquivo relacionado nas visualizaes de cdigo e de design divididas verticalmente (Exibir > Dividir
verticalmente), o arquivo relacionado ser exibido em uma visualizao dividida ao lado da Visualizao de design do documento principal. Voc pode selecionar ou desmarcar Visualizao de design esquerda (Exibir > Visualizao de design esquerda), dependendo de onde deseja a Visualizao de design.

Ao abrir um arquivo relacionado na visualizao Dividir cdigo ou Dividir cdigo na vertical (Exibir > Visualizao
Dividir cdigo e Exibir > Dividir verticalmente), o arquivo relacionado exibido em uma visualizao dividida abaixo, acima ou ao lado do cdigo-fonte do documento principal, dependendo das opes selecionadas. A "visualizao de cdigo" na opo de exibio se refere ao cdigo-fonte do documento principal. Por exemplo, se voc seleciona Exibir > Visualizao de cdigo na parte superior, o Dreamweaver exibe o cdigo-fonte do documento principal na metade superior da janela Documento. Se voc seleciona Exibir > Visualizao de cdigo esquerda, o Dreamweaver exibe o cdigo-fonte do documento principal no lado esquerdo da janela Documento.

A Visualizao de cdigo padro no permite exibir Documentos relacionados ao mesmo tempo que o cdigofonte do documento principal.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 70


Criao e gerenciamento de arquivos

Desativar arquivos relacionados


1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Na categoria Geral, desmarque a seleo Ativar arquivos relacionados.

Mais tpicos da Ajuda


Alternar entre visualizaes na janela Documento na pgina 17 Navegao no cdigo relacionado na pgina 315 Visualizao de pginas no Dreamweaver na pgina 287 Tutorial de arquivos relacionados

Abrir Arquivos rel. dinamicamente


O recurso Arquivos rel. dinamicamente aumenta a funcionalidade do recurso Arquivos relacionados permitindo que voc visualize os arquivos relacionados de pginas dinmicas na barra de ferramentas Arquivos relacionados. Especificamente, o recurso Arquivos rel. dinamicamente permite a visualizao das numerosas incluses dinmicas necessrias para gerar o cdigo de tempo de execuo para as conhecidas estruturas de fonte aberta do Sistema de gerenciamento de contedo PHP, tais como WordPress, Drupal e Joomla!. Para usar o recurso Arquivos rel. dinamicamente, necessrio que voc tenha acesso a um servidor de aplicativo PHP remoto ou local que execute WordPress, Drupal ou Joomla!. Uma abordagem comum para pginas de teste definir um servidor de aplicativo PHP de host local e testar as pginas localmente. Antes de testar as pginas, necessrio que voc execute as seguintes etapas:

Defina um site Dreamweaver e certifique-se de ter preenchido a caixa de texto URL da Web na caixa de dilogo
Configurao de site.

Configure um servidor de aplicativo PHP


Para obter instrues de como fazer isso localmente, consulte www.adobe.com/go/learn_dw_phpsetup_br. Importante: O servidor deve estar em execuo antes de voc tentar trabalhar com Arquivos rel. dinamicamente no Dreamweaver.

Instale WordPress, Drupal ou Joomla! no servidor de aplicativo.


Para obter mais informaes, consulte os seguintes links:

instalao do WordPress instalao do Drupal Instalao doJoomla! No Dreamweaver, defina uma pasta local em que voc ir fazer o download e editar os arquivos CMS. Defina o local de instalao dos arquivos WordPress, Drupal ou Joomla! como sua pasta de teste remota. Faa o download dos arquivos CMS da pasta remota.
Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre como trabalhar com arquivos dinamicamente relacionados, consulte www.adobe.com/go/dwcs5drf_br.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 71


Criao e gerenciamento de arquivos

Definir as preferncias de Arquivos rel. dinamicamente


Quando voc abrir uma pgina associada aos Arquivos rel. dinamicamente, o Dreamweaver pode identificar os arquivos automaticamente ou permitir a identificao dos arquivos manualmente (o que possvel clicando em um link na barra Informaes acima da pgina). A configurao padro identificao manual.
1 Escolha Editar> Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh OS). 2 Na categoria Geral, verifique se a opo Ativar arquivos relacionados est selecionada. 3 No menu pop-up Arquivos rel. dinamicamente, selecione Manualmente ou Automaticamente. Tambm possvel

desativar a identificao inteiramente selecionando Desativado.

Identificar Arquivos rel. dinamicamente


1 Abra uma pgina que tenha Arquivos rel. dinamicamente associados a elapor exemplo, pgina raiz do site

index.php de um site WordPress, Drupal ou Joomla!.


2 Se a identificao de Arquivos rel. dinamicamente estiver definida como manual (o padro), voc dever clicar no

link Identificar na barra de Informaes que aparece acima na pgina, na janela Documento. Se a identificao de Arquivos rel. dinamicamente estiver ativada automaticamente, uma lista de Arquivos rel. dinamicamente ser exibida na barra de ferramentas Arquivos relacionados. A ordem dos Arquivos rel. dinamicamente na barra de ferramentas Arquivos relacionados a seguinte:

Arquivos relacionados estticos (ou seja, arquivos relacionados que no exigem qualquer tipo de processamento
dinmico)

Arquivos relacionados externos (ou seja, arquivos .css e .js) que esto anexados ao servidor de caminho dinmico
que inclui arquivos

O servidor de caminho dinmico inclui arquivos (ou seja, arquivos .php, .inc e .module)

Filtrar arquivos relacionados


Como Arquivos relacionados e Arquivos rel.dinamicamente podem ser com freqncia numerosos, o Dreamweaver permite o filtro de Arquivos relacionados para que seja possvel localizar os arquivos com os quais voc deseja trabalhar.
1 Abra uma pgina que tenha Arquivos relacionados a ela. 2 Identifique os Arquivos rel. dinamicamente caso seja necessrio. 3 Clique no cone de Filtrar arquivos relacionados no lado direito da barra de ferramentas Arquivos relacionados. 4 Selecione os tipos de arquivos que voc deseja visualizar na barra de ferramentas Arquivos relacionados. Por

padro, o Dreamweaver seleciona todos os Arquivos relacionados.


5 Para criar um filtro personalizado, clique no cone Filtrar arquivos relacionados e escolha Filtro personalizado.

A caixa de dilogo Filtro personalizado permite somente o filtro de nomes exatos de arquivo (style.css), extenses de arquivos (.php) e expresses curingas que usam asteriscos (*menu*). possvel filtrar expresses curingas mltiplas pela separao de cada expresso com um ponto-e-vrgula (por exemplo, style.css; *.js; *tpl.php). Nota: As configuraes de filtro no se mantm aps o fechamento do arquivo.

Limpar arquivos em HTML do Microsoft Word


Voc pode abrir documentos salvos pelo Microsoft Word como arquivos em HTML e, em seguida, usar o comando Limpar HTML do Word para remover o cdigo HTML estranho gerado pelo Word. O comando Limpar HTML do Word est disponvel para documentos salvos como arquivos em HTML pelo Word 97 ou posterior.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 72


Criao e gerenciamento de arquivos

O cdigo que o Dreamweaver remove essencialmente usado pelo Word para formatar e exibir documentos no Word, no sendo necessrio exibio do arquivo em HTML. Mantenha uma cpia do arquivo do Word (.doc) original como backup porque voc talvez no consiga reabrir o documento em HTML no Word por ter aplicado o recurso Limpar HTML do Word. Para limpar HTML ou XHTML que no foi gerado pelo Microsoft Word, use o comando Limpar HTML.
1 Salve o documento do Microsoft Word como um arquivo em HTML.

Nota: No Windows, feche o arquivo do Word para evitar uma violao no compartilhamento.
2 Abra o arquivo em HTML no Dreamweaver.

Para exibir o cdigo HTML gerado pelo Word, alterne para Visualizao de cdigo (Exibir > Cdigo).
3 Selecione Comandos > Limpar HTML do Word.

Nota: Caso o Dreamweaver no consiga determinar qual foi a verso do Word usada para salvar o arquivo, selecione a verso correta no menu pop-up.
4 Marque (ou desmarque) as opes de limpeza. As preferncias que voc digita so salvas como configuraes de

limpeza padro. O Dreamweaver aplica as configuraes de limpeza ao documento em HTML, e um registro das alteraes exibido (a menos que voc tenha desmarcado essa opo na caixa de dilogo).
Remover todos os markups especficos do Word Remove todo o HTML especfico do Microsoft Word, incluindo

XML das tags HTML, metadados personalizados do Word e tags link do cabealho do documento, markups XML do Word, tags condicionais e seu contedo, alm de pargrafos vazios e margens de estilos. Voc pode selecionar cada uma dessas opes individualmente usando a aba Detalhado.
Limpar CSS Remove todas as CSS especficas do Word, inclusive estilos de CSS inline quando possvel (onde o estilo

pai tem as mesmas propriedades de estilo), atributos de estilo que comeam com mso, declaraes de estilo no-CSS, atributos de estilo de CSS de tabelas e todas as definies de estilo no usadas do cabealho. Voc pode personalizar ainda mais essa opo usando a aba Detalhado.
Limpar tags <font> Remove tags HTML, convertendo o texto do corpo padro em texto HTML tamanho 2. Corrigir tags aninhadas de forma invlida Remove as tags de markup de fonte inseridas pelo Word fora das tags de

pargrafo e cabealho (nvel do bloco).


Aplicar formatao de origem Aplica as opes de formatao de origem que voc especifica nas preferncias de formato HTML e SourceFormat.txt ao documento. Mostrar concluso do logon Exibe uma caixa de alerta com detalhes sobre as alteraes feitas no documento assim que

a limpeza concluda.
5 Clique em OK ou clique na aba Detalhado caso voc queira personalizar ainda mais as opes Remover todos os

markups especficos do Word e Limpar CSS e, depois, clique em OK.

Mais tpicos da Ajuda


Limpar cdigo na pgina 323 Importao de documentos do Microsoft Office (somente Windows) na pgina 225

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 73


Criao e gerenciamento de arquivos

Gerenciamento de arquivos e pastas


Sobre o gerenciamento de arquivos e pastas
O Dreamweaver inclui um painel Arquivos que ajuda a gerenciar e transferir arquivos para e de um servidor remoto. Quando voc transfere arquivos entre sites locais e remotos, as estruturas de arquivo e pasta em paralelo entre os sites so mantidas. Durante a transferncia de arquivos entre sites, o Dreamweaver cria pastas correspondentes caso elas ainda no existam em um site. Voc tambm pode sincronizar os arquivos entre os sites local e remoto; o Dreamweaver copia arquivos em ambas as direes conforme o necessrio e remove arquivos indesejados quando apropriado.

Uso do painel Arquivos


O painel Arquivos permite exibir arquivos e pastas, independentemente de estarem associados ou no a um site do Dreamweaver e realizar operaes de manuteno de arquivo padro como, por exemplo, abrir e mover arquivos. Nota: Nas verses anteriores do Dreamweaver, o painel Arquivos era chamado de painel Site. Voc pode mover o painel Arquivos conforme o necessrio e definir suas preferncias. Use esse painel para realizar as seguintes tarefas:

Acessar sites, um servidor e unidades locais Exibir arquivos e pastas Gerenciar arquivos e pastas no painel Arquivos
Em sites do Dreamweaver, use as seguintes opes para exibir ou transferir arquivos:

Opes do painel Arquivos expandido. A. Menu pop-up de site B. Conectar/desconectar C. Atualizar D. Exibir registro de FTP do site E. Visualizao Arquivos do site F. Servidor de teste G. Visualizao Repositrio H. Obter arquivos I. Colocar arquivos J. Retirar arquivos K. Devolver arquivos L. Sincronizar M. Expandir/reduzir

Nota: As visualizaes Arquivos do site, Servidor de teste e os botes Sincronizar so exibidos somente no painel Arquivos expandido.
O menu pop-up Site Permite a voc selecionar um site do Dreamweaver e exibir os arquivos deste site. Voc tambm

pode usar o menu Site para acessar todos os arquivos no disco local, assim como o Windows Explorer (Windows) ou o Finder (Macintosh).
Conectar/desconectar (protocolo FTP, RDS eWebDav) Conecta-se ou desconecta-se do site remoto. Por padro, o

Dreamweaver se desconecta do site remoto caso ele permanea inativo por mais de 30 minutos (somente FTP). Para alterar o tempo-limite, selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e, depois, selecione Site na lista de categorias esquerda.
Atualizar Atualiza as listas de diretrios locais e remotos. Use o boto para atualizar manualmente as listas de

diretrios caso voc tenha desmarcado Atualizar automaticamente a lista de arquivos locais ou Atualizar automaticamente a lista de arquivos remotos na caixa de dilogo Definio do site.
Visualizao Arquivos do site Exibe a estrutura de arquivo dos sites remoto e local nos painis do painel Arquivos. (Uma configurao de preferncia determina o site exibido no painel esquerda e qual site exibido no painel direita). Arquivos do site a visualizao padro do painel Arquivos. Visualizao servidor de teste Exibe a estrutura de diretrio do servidor de teste e o site local.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 74


Criao e gerenciamento de arquivos

Visualizao Repositrio Exibe o repositrio SVN (Subversion). Obter arquivos Copia os arquivos selecionados do site remoto para o site local (substituindo a cpia local existente do arquivo, caso haja alguma). Caso Ativar devoluo e retirada de arquivos esteja ativado, as cpias locais so somente leitura; os arquivos permanecem disponveis no site remoto para a retirada por parte de outros membros da equipe. Se Ativar devoluo e retirada de arquivos estiver desativado, as cpias dos arquivos tero privilgios de leitura e gravao.

Nota: Os arquivos que o Dreamweaver copia so os arquivos que voc seleciona no painel ativo do painel Arquivos. Caso o painel Remoto esteja ativo, os arquivos do servidor de teste ou remotos selecionados so copiados para o site local; caso o painel Local esteja ativo, o Dreamweaver copia a verso de teste ou remota dos arquivos locais selecionados para o site local.
Colocar arquivos Copia os arquivos selecionados do site local para o site remoto.

Nota: Os arquivos que o Dreamweaver copia so os arquivos que voc seleciona no painel ativo do painel Arquivos. Caso o painel Local esteja ativo, os arquivos locais selecionados so copiados para o site remoto ou para o servidor de teste; caso o painel Remoto esteja ativo, o Dreamweaver copia as verses locais dos arquivos de servidor remoto selecionados para o site remoto. Caso voc esteja colocando um arquivo que ainda no existe no site remoto e Ativar devoluo e retirada de arquivos esteja selecionado, o arquivo adicionado ao site remoto como retirado. Clique no boto devolver arquivos caso voc queira adicionar um arquivo sem o status retirado.
Retirar arquivos Transfere uma cpia do arquivo do servidor remoto para o site local (substituindo a cpia local existente do arquivo, caso haja alguma) e marca o arquivo como retirado do servidor. Essa opo no est disponvel caso Ativar devoluo e retirada de arquivos na caixa de dilogo Definies de sites esteja desativado para o site atual. Devolver arquivos Transfere uma cpia do arquivo local para o servidor remoto e disponibiliza o arquivo para edio. O arquivo local se torna somente leitura. Essa opo no est disponvel caso a opo Ativar devoluo e retirada de arquivos na caixa de dilogo Definies de sites esteja desativada para o site atual. Sincronizar Sincroniza os arquivos entre as pastas local e remota. O boto Expandir/reduzir Expande ou reduz o painel Arquivos para exibir um ou mais painis.

Mais tpicos da Ajuda


Viso geral do painel Arquivos na pgina 15 Configurar um novo site na pgina 38 Devolver e retirar arquivos em uma pasta remota na pgina 87 Colocar arquivos em um servidor remoto na pgina 84 Obter arquivos de um servidor remoto na pgina 82 Sincronizao de arquivos na pgina 95

Exibir arquivos e pastas


Voc pode exibir arquivos e pastas no painel Arquivos, independentemente de estarem associados ou no a um site do Dreamweaver. Ao exibir sites, arquivos ou pastas no painel Arquivos, voc pode alterar o tamanho da rea de exibio e, para os sites do Dreamweaver, voc pode expandir ou reduzir o painel Arquivos. Nos sites do Dreamweaver, voc tambm pode personalizar o painel Arquivos alterando a visualizao do site local ou remoto exibida por padro no painel reduzido. Ou voc pode alternar as visualizaes de contedo no painel Arquivos expandido usando a opo Mostrar sempre.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 75


Criao e gerenciamento de arquivos

Abrir ou fechar o painel Arquivos


Selecione Janela > Arquivos.

Expandir ou reduzir o painel Arquivos (apenas sites do Dreamweaver)


No painel Arquivos (Janela > Arquivos), clique no boto Expandir/reduzir

da barra de ferramentas.

Nota: Caso voc clique no boto Expandir/reduzir para expandir o painel enquanto ele est encaixado, o painel maximizado de forma que voc no consiga trabalhar na janela Documento. Para retornar janela Documento, clique no boto Expandir/reduzir novamente para reduzir o painel. Caso clique no boto Expandir/reduzir para expandir o painel enquanto ele no est encaixado, voc ainda pode trabalhar na janela Documento. Para encaixar o painel novamente, voc deve inicialmente reduzi-lo. Quando o painel Arquivos reduzido, ele exibe o contedo do site local, do site remoto ou o servidor de teste como uma lista de arquivos. Quando expandido, ele exibe o site local e o site remoto ou o servidor de teste.

Alterar o tamanho da rea de visualizao no painel Arquivos expandido


No painel Arquivos (Janela > Arquivos), com o painel expandido, siga um destes procedimentos:

Arraste a barra que separa as duas visualizaes para aumentar ou diminuir a rea de visualizao do painel direita
ou esquerda.

Use as barras de rolagem na parte inferior do painel Arquivos para percorrer o contedo das visualizaes.

Alterar a visualizao do site no painel Arquivos (apenas sites do Dreamweaver)


Siga um destes procedimentos:

No painel Arquivos reduzido (Janela > Arquivos), selecione Visualizao local, Visualizao remota, Servidor de
teste ou Visualizao Repositrio no menu pop-up Exibio do site. Nota: Por padro, Visualizao local exibido no menu Exibio do site.

No painel Arquivos expandido (Janela > Arquivos), clique no boto Arquivos do site (para o site remoto), Servidor
de teste ou Arquivos do repositrio.
A B C

A. Arquivos do site B. Servidor de teste C. Arquivos do repositrio

Nota: Antes de exibir um site remoto, servidor de teste ou repositrio, voc deve configurar um site remoto, servidor de teste ou repositrio SVN.

Exibir arquivos fora de um site do Dreamweaver


Navegue no computador usando o menu pop-up Site da mesma forma como voc faria se estivesse usando o

Windows Explorer (Windows) ou o Finder (Macintosh).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 76


Criao e gerenciamento de arquivos

Trabalhar com arquivos no painel Arquivos


Voc pode abrir ou renomear arquivos; adicione, mova ou exclua arquivos; ou atualize o painel Arquivos depois de fazer as alteraes. Nos sites do Dreamweaver, voc tambm determina quais arquivos (no site local ou remoto) foram atualizados desde a ltima vez em que foram transferidos.

Mais tpicos da Ajuda


Sincronizao de arquivos na pgina 95 Acessar sites, um servidor e unidades locais na pgina 79

Abrir um arquivo
1 No painel Arquivos (Janela > Arquivos), selecione site, servidor ou unidade no menu pop-up (em que o site, o

servidor ou a unidade exibida).


2 Navegue at o arquivo que voc deseja abrir. 3 Siga um destes procedimentos:

Clique duas vezes no cone do arquivo. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no cone do
arquivo e selecione Abrir. O Dreamweaver abre o arquivo na janela Documento.

Criar um arquivo ou uma pasta


1 No painel Arquivos (Janela > Arquivos), selecione um arquivo ou uma pasta.

O Dreamweaver criar o novo arquivo ou pasta dentro da pasta selecionada atualmente ou na mesma pasta do arquivo selecionado no momento.
2 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida,

selecione Novo arquivo ou Nova pasta.


3 Digite um nome para o novo arquivo ou pasta. 4 Pressione Enter (Windows) ou Return (Macintosh).

Excluir um arquivo ou uma pasta


1 No painel Arquivos (Janela > Arquivos), selecione o arquivo ou a pasta que voc deseja excluir. 2 Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica

(Macintosh) e, em seguida, selecione Editar > Excluir.

Renomear um arquivo ou uma pasta


1 No painel Arquivos (Janela > Arquivos), selecione o arquivo ou a pasta que voc deseja renomear. 2 Siga um dos seguintes procedimentos para ativar o nome do arquivo ou da pasta:

Clique no nome de arquivo, pause e, depois, clique nele novamente. Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla (Macintosh) no cone do
arquivo e selecione Editar > Renomear.
3 Digite o novo nome sobre o nome existente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 77


Criao e gerenciamento de arquivos

4 Pressione Enter (Windows) ou Return (Macintosh).

Mover um arquivo ou uma pasta


1 No painel Arquivos (Janela > Arquivos), selecione o arquivo ou a pasta que voc deseja mover. 2 Siga um destes procedimentos:

Copie o arquivo ou a pasta e, em seguida, cole-o em um novo local. Arraste o arquivo ou a pasta para um novo local.
3 Atualize o painel Arquivos para ver o arquivo ou a pasta no novo local.

Atualizar o painel Arquivos


Siga um destes procedimentos:

Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer
arquivo ou pasta e, em seguida, selecione Atualizar.

(Apenas sites do Dreamweaver) Clique no boto Atualizar da barra de ferramentas no painel Arquivos (essa opo
atualiza ambos os painis). Nota: O Dreamweaver atualiza o painel Arquivos quando voc faz alteraes em outro aplicativo e, em seguida, retorna ao Dreamweaver.

Localizar arquivos no site do Dreamweaver


O Dreamweaver simplifica a localizao de arquivos selecionados, abertos, retirados ou modificados recentemente no site. Voc tambm pode localizar arquivos mais novos no site local ou remoto.

Mais tpicos da Ajuda


Usar relatrios para testar o site na pgina 107

Localizar um arquivo aberto no site


1 Abra o arquivo na janela Documento. 2 Selecione Site > Localizar no site.

O Dreamweaver seleciona o arquivo no painel Arquivos. Nota: Caso o arquivo aberto na janela Documento no faa parte do site atual no painel Arquivos, oDreamweaver tenta determinar a qual dos sites do Dreamweaver o arquivo pertence; caso o arquivo atual pertena a apenas um site local, oDreamweaver abre esse arquivo no painel Arquivos e, em seguida, o reala.

Localizar e selecionar arquivos retirados em um site do Dreamweaver


No painel Arquivos reduzido (Janela > Arquivos), clique no menu Opes no canto superior direito do painel

Arquivos e, em seguida, selecione Editar > Selecionar arquivos retirados.

O Dreamweaver seleciona os arquivos no painel Arquivos.

Localizar um arquivo selecionado no site local ou remoto


1 Selecione o arquivo na Visualizao local ou remota do painel Arquivos (Janela > Arquivos).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 78


Criao e gerenciamento de arquivos

2 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida,

selecione Localizar no site local ou Localizar no site local (dependendo de onde voc selecionou o arquivo). O Dreamweaver seleciona o arquivo no painel Arquivos.

Localizar e selecionar arquivos que sejam mais novos no site local do que no site remoto
No painel Arquivos reduzido (Janela > Arquivos), clique no menu Opes no canto superior direito do painel

Arquivos e, em seguida, selecione Editar > Selecionar um local mais novo. O Dreamweaver seleciona os arquivos no painel Arquivos.

Localizar e selecionar arquivos que sejam mais novos no site remoto do que no site local
No painel Arquivos reduzido (Janela > Arquivos), clique no menu Opes no canto superior direito do painel

Arquivos e, em seguida, selecione Editar > Selecionar um remoto mais novo. O Dreamweaver seleciona os arquivos no painel Arquivos.

Localizar arquivos recentemente modificados no site


1 No painel Arquivos reduzido (Janela > Arquivos), clique no menu Opes no canto superior direito do painel

Arquivos e, em seguida, selecione Editar > Selecionar modificados recentemente.


2 Siga um dos seguintes procedimentos para indicar datas de pesquisa para o relatrio:

Para gerar relatrio sobre todos os arquivos modificados nos ltimos dias, selecione Arquivos criados ou
modificados por ltimo e digite o nmero na caixa.

Para gerar relatrio sobre todos os arquivos modificados dentro de um tempo especfico, clique no boto Arquivos
criados ou modificados entre e, em seguida, especifique um intervalo de datas.
3 (Opcional) Digite um nome de usurio na caixa Modificado por para limitar a pesquisa a arquivos modificados por

um usurio especfico entre as datas que voc indicou. Nota: Essa opo s est disponvel para relatrios sobre sites do Contribute.
4 Selecione um boto de opo para indicar onde voc deseja exibir arquivos listados no relatrio, se necessrio:
Mquina local caso o site contenha pginas estticas. Servidor de teste caso o site contenha pginas dinmicas.

Nota: Essa opo pressupe que voc tenha definido um Servidor de teste na caixa de dilogo Definio de sites (XREF). Caso voc no tenha definido um Servidor de teste e digitado um prefixo de URL para o servidor ou caso voc esteja executando o relatrio para mais de um site, a opo no est disponvel.
Outro local caso voc queira digitar um caminho na caixa de texto.

5 Clique em OK para salvar as configuraes.

O Dreamweaver seleciona os arquivos modificados dentro do tempo selecionado no painel Arquivos.

Identificar e excluir arquivos no utilizados


Voc pode identificar e excluir arquivos que no sejam mais usados por outros arquivos do seu site.
1 Selecione Site > Verificar os links no site inteiro.

O Dreamweaver verifica todos os links do site e exibe os desfeitos no painel Resultados.


2 Selecione Arquivos rfos no menu do painel Verificador de links.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 79


Criao e gerenciamento de arquivos

O Dreamweaver exibe todos os arquivos sem links externos. Isso significa que nenhum arquivo do site tem link com esses arquivos.
3 Selecione os arquivos que voc deseja excluir e pressione Delete (Windows) ou Command+Delete (Macintosh).

Importante: Embora nenhum outro arquivo do site tenha link com esses arquivos, alguns dos arquivos listados podem ter links com outros arquivos. Tome cuidado ao excluir os arquivos.

Mais tpicos da Ajuda


Ativar e desativar encobrimento do site na pgina 101

Acessar sites, um servidor e unidades locais


Voc pode acessar, modificar e salvar arquivos e pastas dos sites do Dreamweaver, bem como arquivos e pastas que no fazem parte de um site do Dreamweaver. Alm dos sites do Dreamweaver, voc pode acessar um servidor, uma unidade local ou a rea de trabalho. Para acessar um servidor remoto, voc deve configurar o Dreamweaver para trabalhar com esse servidor. Nota: A melhor forma de gerenciar os arquivos criando um site do Dreamweaver.

Abrir um site do Dreamweaver j existente


No painel Arquivos (Janela > Arquivos), selecione um site no menu (em que o site atual, o servidor ou a unidade

exibida).

Abrir uma pasta em um servidor FTP ou RDS remoto


1 No painel Arquivos (Janela > Arquivos), selecione um nome de servidor no menu (em que o site atual, o servidor

ou a unidade exibida).

Nota: Os nomes so exibidos para servidores para os quais voc configurou o Dreamweaver.
2 Navegue at e edite os arquivos como voc faria normalmente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 80


Criao e gerenciamento de arquivos

Acessar uma unidade local ou a rea de trabalho


1 No painel Arquivos (Janela > Arquivos), selecione rea de trabalho, Disco local ou Unidade de CD no menu (em

que o site atual, o servidor ou a unidade exibida).


2 Navegue at um arquivo e, em seguida, siga um dos seguintes procedimentos:

Abrir arquivos no Dreamweaver ou outro aplicativo Renomear arquivos Copiar arquivos Excluir arquivos Arrastar arquivos
Quando voc arrasta um arquivo de um site do Dreamweaver para outro ou para uma pasta que no faa parte de um site do Dreamweaver, o Dreamweaver copia o arquivo para o local onde voc o soltou. Caso voc arraste um arquivo dentro do mesmo site do Dreamweaver, o Dreamweavermove o arquivo para o local onde voc o soltou. Caso voc arraste um arquivo que no faa parte de um site do Dreamweaver para uma pasta que no faa parte de um site do Dreamweaver, o Dreamweaver move o arquivo para o local onde voc o soltou. Nota: Para mover um arquivo que o Dreamweaver copia por padro, mantenha a tecla Shift (Windows) ou a tecla Command (Macintosh) pressionada enquanto voc arrasta. Para copiar um arquivo que o Dreamweaver move por padro, mantenha a tecla Control (Windows) ou a tecla Option (Macintosh) pressionada enquanto voc arrasta.

Personalizar os detalhes de arquivo e pasta exibidos no painel Arquivos expandido


Quando voc exibe um site do Dreamweaver no painel Arquivos expandido, as informaes sobre arquivos e pastas so exibidas em colunas. Por exemplo, voc pode ver o tipo de arquivo ou a data em que ele foi modificado. Voc pode personalizar as colunas seguindo um dos seguintes procedimentos (algumas operaes s esto disponveis para colunas que voc adiciona, e no para colunas padro):

Reorganizar ou realinhar colunas Adicionar novas colunas (mximo de 10 colunas) Ocultar colunas (exceto a coluna do nome de arquivo) Designar colunas para serem compartilhadas com todos os usurios conectados a um site Excluir colunas (apenas colunas personalizadas) Renomear colunas (apenas colunas personalizadas) Associar colunas a uma Design Note (apenas colunas personalizadas)

Alterar a ordem das colunas


Selecione um nome de coluna e, em seguida, clique no boto de seta para cima ou para baixo a fim de alterar a

posio da coluna selecionada. Nota: Voc pode alterar a ordem de qualquer coluna exceto Nome, que sempre a primeira coluna.

Adicionar, excluir ou alterar coluna de detalhes


1 Selecione Site > Gerenciar sites. 2 Selecione um site e, em seguida, clique em Editar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 81


Criao e gerenciamento de arquivos

3 Expanda Configuraes avanadas e selecione a categoria Colunas de visualizao de arquivo. 4 Selecione uma coluna e clique no boto de adio (+) para adicionar uma coluna ou de subtrao (-) para excluir

uma coluna. Nota: Como a coluna excluda imediatamente e sem confirmao, tenha certeza de que voc deseja excluir a coluna antes de clicar no boto de subtrao (-).
5 Na caixa Nome da coluna, digite um nome para a coluna. 6 Selecione um valor no menu Associar Design Notes ou digite seu prprio.

Nota: Voc deve associar uma nova coluna a uma Design Note para que haja dados a serem exibidos no painel Arquivos.
7 Selecione um alinhamento para determinar como o texto se alinha dentro da coluna. 8 Marque ou desmarque Mostrar para revelar ou ocultar a coluna. 9 Selecione Compartilhar com todos os usurios deste site para compartilhar a coluna com todos os usurios

conectados ao site remoto.

Classificar por qualquer coluna detalhada no painel Arquivos


Clique no cabealho da coluna que voc deseja classificar.

Clique no cabealho novamente para inverter a ordem (crescente ou decrescente) com a qual o Dreamweaver classifica a coluna.

Obteno e colocao de arquivos no servidor


Transferncia de arquivo e arquivos dependentes
Caso voc esteja trabalhando em um ambiente colaborativo, use o sistema de devoluo/retirada para transferir arquivos entre sites locais e remotos. No entanto, caso voc seja a nica pessoa trabalhando no site remoto, voc pode usar os comandos Obter e Colocar para transferir arquivos sem devolver ou retir-los. Ao transferir um documento entre uma pasta local e remota usando o painel Arquivos, voc tem a opo da transferncia dos arquivos dependentes do documento. Arquivos dependentes so imagens, folhas de estilos externas e outros arquivos referenciados no documento que um navegador l ao carregar o documento. Nota: Normalmente, uma boa idia baixar arquivos dependentes ao retirar um novo arquivo, mas caso as verses mais recentes dos arquivos dependentes j estejam no disco local, no h necessidade de baix-los novamente. Isso tambm acontece no carregamento e na devoluo dos arquivos: no h necessidade caso cpias atualizadas j estejam no site remoto. Os itens de biblioteca so tratados como arquivos dependentes. Alguns servidores informam erros quando colocam itens de biblioteca. No entanto, voc pode encobrir esses arquivos para impedir sua transferncia.

Mais tpicos da Ajuda


Devoluo e retirada de arquivos na pgina 86 Ativar e desativar encobrimento do site na pgina 101

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 82


Criao e gerenciamento de arquivos

Sobre as transferncias de arquivo em segundo plano


Voc pode realizar outras atividades, no relacionadas a servidor, enquanto obtm ou coloca arquivos. A transferncia de arquivo em segundo plano funciona com todos os protocolos de transferncia para os quais o Dreamweaver d suporte: FTP, SFTP, LAN, WebDAV, Subversion e RDS. Entre as atividades no relacionadas a servidor esto operaes comuns como digitar, editar folhas de estilos externas, gerar relatrios de todo o site e criar novos sites. Entre as atividades relacionadas a servidor que o Dreamweaver no pode realizar durante transferncias de arquivo esto as seguintes:

Colocar/obter/devolver/retirar arquivos Desfazer retirada Criar uma conexo de banco de dados Ligar dados dinmicos Visualizar dados na Visualizao dinmica Inserir um servio da Web Excluir arquivos remotos ou pastas Visualizar em um navegador em um servidor de teste Salvar um arquivo em um servidor remoto Inserir uma imagem de um servidor remoto Abrir um arquivo em um servidor remoto Colocar automaticamente arquivos ao salvar Arrastar arquivos para o site remoto Recortar, copiar ou colar arquivos no site remoto Atualizar Visualizao remota
Por padro, a caixa de dilogo Atividade de arquivo em segundo plano aberta durante transferncias de arquivos. Voc pode minimizar a caixa de dilogo clicando no boto Minimizar do canto superior direito. Fechar a caixa de dilogo durante transferncias de arquivos resulta no cancelamento da operao.

Obter arquivos de um servidor remoto


Use o comando Obter para copiar arquivos do site remoto para o site local. Voc pode usar o painel Arquivos ou a janela Documento para obter arquivos. O Dreamweaver cria um registro da atividade de arquivo durante a transferncia que voc pode exibir e salvar. Nota: Voc no pode desativar a transferncia de arquivos em segundo plano. Caso o registro detalhado esteja aberto na janela Atividade de arquivo em segundo plano, voc pode fech-lo para melhorar o desempenho. O Dreamweaver tambm registra toda a atividade de transferncia de arquivos FTP. Caso ocorra um erro quando voc estiver transferindo um arquivo usando o FTP, o registro de FTP do site pode ajud-lo a determinar o problema.

Mais tpicos da Ajuda


Devoluo e retirada de arquivos na pgina 86 Sincronizao de arquivos na pgina 95

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 83


Criao e gerenciamento de arquivos

Obter arquivos de um servidor remoto usando o painel Arquivos


1 No painel Arquivos (Janela > Arquivos), selecione os arquivos desejados para download.

Normalmente voc seleciona esses arquivos na Visualizao remota, mas pode selecionar os arquivos correspondentes na Visualizao local se preferir. Caso a Visualizao remota esteja ativa, o Dreamweaver copia os arquivos selecionados para o site local; caso a Visualizao local esteja ativa, o Dreamweaver copia as verses remotas dos arquivos locais selecionados para o site local. Nota: Para obter apenas os arquivos cuja verso remota mais recente do que a verso local, use o comando Sincronizar.
2 Siga um dos seguintes procedimentos para obter o arquivo:

Clique no boto Obter na barra de ferramentas do painel Arquivos. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo do
painel Arquivos e escolha Obter no menu de contexto.
3 Clique em Sim na caixa de dilogo Arquivos dependentes para baixar arquivos dependentes; caso voc j tenha

cpias locais dos arquivos dependentes, clique em No. O padro no baixar arquivos dependentes. Voc pode editar essa opo em Editar > Preferncias > Site. O Dreamweaver baixa os arquivos selecionados da seguinte forma:

Caso voc esteja usando o sistema de devoluo/retirada, a obteno de um arquivo resulta em uma cpia local
somente leitura do arquivo; o arquivo permanece disponvel no site remoto ou no servidor de teste para que os demais membros da equipe retirem.

Caso voc no esteja usando o sistema de devoluo/retirada, a obteno de um arquivo resultar em uma cpia
com os privilgios de leitura e gravao. Nota: Caso esteja trabalhando em um ambiente colaborativo ou seja, caso outros estejam trabalhando nos mesmos arquivos , voc no deve desativar Ativar devoluo e retirada de arquivos. Caso outras pessoas estejam usando o sistema de devoluo/retirada com o site, voc tambm deve us-lo. Para parar a transferncia de arquivos a qualquer momento, clique no boto Cancelar da caixa de dilogo Atividade de arquivo em segundo plano.

Obter arquivos de um servidor remoto usando a janela Documento


1 Verifique se o documento est ativo na janela Documento. 2 Siga um dos seguintes procedimentos para obter o arquivo:

Selecione Site > Obter. Clique no cone Gerenciamento de arquivos na barra de ferramentas da janela Documento e, em seguida, selecione
Obter no menu. Nota: Caso o arquivo atual no faa parte do site atual no painel Arquivos, o Dreamweaver tenta determinar a qual site definido localmente o arquivo atual pertence. Caso o arquivo atual pertena a apenas um site local, o Dreamweaver abre o site e, em seguida, realiza a operao Obter.

Exibir o registro de FTP


1 Clique no menu Opes no canto superior direito do painel Arquivos. 2 Selecione Exibir > Registro de FTP do site.

Nota: No painel Arquivos expandido, voc pode clicar no boto Registro de FTP para exibir o registro.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 84


Criao e gerenciamento de arquivos

Colocar arquivos em um servidor remoto


Voc pode colocar arquivos do site local no site remoto, normalmente sem alterar o status de retirada do arquivo. H duas situaes comuns em que voc pode usar o comando Colocar em lugar de Devolver:

Voc no est em um ambiente colaborativo e no est usando o sistema de devoluo/retirada. Convm colocar a verso atual do arquivo no servidor, mas voc continuar o editando.
Nota: Caso voc coloque um arquivo que no existia anteriormente no site remoto e esteja usando o sistema de devoluo/retirada, o arquivo copiado para o site remoto e, em seguida, retirado para que voc possa continuar a edio. Voc pode usar o painel Arquivos ou a janela Documento para colocar arquivos. O Dreamweaver cria um registro da atividade de arquivo durante a transferncia que voc pode exibir e salvar. Nota: Voc no pode desativar a transferncia de arquivos em segundo plano. Caso o registro detalhado esteja aberto na janela Atividade de arquivo em segundo plano, voc pode fech-lo para melhorar o desempenho. O Dreamweaver tambm registra toda a atividade de transferncia de arquivos FTP. Caso ocorra um erro quando voc estiver transferindo um arquivo usando o FTP, o registro de FTP do site pode ajud-lo a determinar o problema. Para assistir a um tutorial sobre a colocao de arquivos em um servidor remoto, consulte www.adobe.com/go/vid0163_br. Para assistir a um tutorial sobre a soluo de problemas de envio, consulte www.adobe.com/go/vid0164_br.

Mais tpicos da Ajuda


Sincronizao de arquivos na pgina 95 Sobre o sistema de devoluo/retirada na pgina 86 Tutorial sobre a colocao de arquivos Tutorial sobre a soluo de problemas de publicao

Colocar arquivos em um servidor remoto ou de teste usando o painel Arquivos


1 No painel Arquivos (Janela > Arquivos), selecione os arquivos a serem carregados.

Normalmente voc seleciona esses arquivos na Visualizao local, mas pode selecionar os arquivos correspondentes na Visualizao remota se preferir. Nota: Voc s pode colocar esses arquivos cuja verso local mais recente do que a verso remota.
2 Siga um dos seguintes procedimentos para colocar o arquivo no servidor remoto:

Clique no boto Colocar na barra de ferramentas do painel Arquivos. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo do
painel Arquivos e escolha Colocar no menu de contexto.
3 Caso o arquivo no tenha sido salvo, uma caixa de dilogo exibida (caso voc defina essa preferncia na categoria

Site da caixa de dilogo Preferncias) permitindo a voc salvar o arquivo antes de coloc-lo no servidor remoto. Clique em Sim para salvar o arquivo ou em No para colocar a verso salva anteriormente no servidor remoto. Nota: Se voc no salvar o arquivo, todas as alteraes que voc fez desde a ltima gravao sero colocadas no servidor remoto. No entanto, como o arquivo permanece aberto, voc pode continuar salvando as alteraes depois de colocar o arquivo no servidor caso desejado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 85


Criao e gerenciamento de arquivos

4 Clique em Sim para atualizar os arquivos dependentes com os arquivos selecionados ou clique em No para evitar

o carregamento de arquivos dependentes. O padro no carregar arquivos dependentes. Voc pode editar essa opo em Editar > Preferncias > Site. Nota: Normalmente, uma boa idia carregar arquivos dependentes ao devolver um novo arquivo, mas caso as verses mais recentes dos arquivos dependentes j estejam no servidor remoto, no h necessidade de carreg-los novamente. Para parar a transferncia de arquivos a qualquer momento, clique no boto Cancelar da caixa de dilogo Atividade de arquivo em segundo plano.

Colocar arquivos em um servidor remoto usando a janela Documento


1 Verifique se o documento est ativo na janela Documento. 2 Siga um dos seguintes procedimentos para colocar o arquivo:

Selecione Site > Colocar. Clique no cone Gerenciamento de arquivos na barra de ferramentas da janela Documento e, em seguida, selecione
Colocar no menu. Nota: Caso o arquivo atual no faa parte do site atual no painel Arquivos, o Dreamweaver tenta determinar a qual site definido localmente o arquivo atual pertence. Caso o arquivo atual pertena a apenas um site local, o Dreamweaver abre o site e, em seguida, realiza a operao Colocar.

Exibir o registro de FTP


1 Clique no menu Opes no canto superior direito do painel Arquivos. 2 Selecione Exibir > Registro de FTP do site.

Nota: No painel Arquivos expandido, voc pode clicar no boto Registro de FTP para exibir o registro.

Gerenciar transferncias de arquivo


Voc pode exibir o status das operaes de transferncia de arquivo, bem como uma lista de arquivos transferidos e seus resultados (xito na transferncia, ignorado ou falha). Voc tambm pode salvar um registro da atividade do arquivo. Nota: O Dreamweaver permite a voc realizar outras atividades no relacionadas a servidor enquanto transfere arquivos para ou de um servidor.

Cancelar uma transferncia de arquivo


Clique no boto Cancelar da caixa de dilogo Atividade de arquivo em segundo plano. Se a caixa de dilogo no

estiver em exibio, clique no boto Atividade de arquivo na parte inferior do painel Arquivos.

Mostrar a caixa de dilogo Atividade de arquivo em segundo plano durante transferncias


Clique no boto Atividade de arquivo ou Registro na parte inferior do painel Arquivos.

Nota: Voc no pode ocultar ou remover o boto Registro. Trata-se de uma parte permanente do painel.

Exibir detalhes da ltima transferncia de arquivo


1 Clique no boto Registro na parte inferior do painel Arquivos para abrir a caixa de dilogo Atividade de arquivo

em segundo plano.
2 Clique na seta de expanso Detalhes.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 86


Criao e gerenciamento de arquivos

Salvar um registro da ltima transferncia de arquivo


1 Clique no boto Registro na parte inferior do painel Arquivos para abrir a caixa de dilogo Atividade de arquivo

em segundo plano.
2 Clique no boto Salvar registro e salve as informaes como um arquivo de texto.

Voc pode examinar a atividade de arquivo abrindo o arquivo de log no Dreamweaver ou em qualquer editor de textos.

Devoluo e retirada de arquivos


Sobre o sistema de devoluo/retirada
Caso esteja trabalhando em um ambiente colaborativo, voc pode devolver e retirar arquivos em servidores locais e remotos. Caso seja a nica pessoa trabalhando no site remoto, voc pode usar os comandos Colocar e Obter sem devolver ou retir-los. Nota: Voc pode usar a funcionalidade Obter e Colocar com um servidor de teste, embora no possa usar o sistema de devoluo/retirada sem um servidor de teste. A retirada de um arquivo o equivalente a declarar Estou trabalhando neste arquivo agora no toque nele! Quando um arquivo retirado, o nome da pessoa que o retirou exibido no painel Arquivos com uma marca de seleo em vermelho (caso um membro da equipe tenha retirado o arquivo) ou em verde (caso voc tenha retirado o arquivo) prximo ao cone do arquivo. A devoluo disponibiliza o arquivo para outros membros da equipe retirar e editar. Quando voc devolve um arquivo aps a edio, a verso local se torna somente leitura e um smbolo de bloqueio exibido ao lado da arquivo no painel Arquivos para impedir que voc faa alteraes no arquivo. O Dreamweaver no torna arquivos retirados somente leitura no servidor remoto. Caso transfira arquivos com um aplicativo que no seja o Dreamweaver, voc pode substituir arquivos retirados. No entanto, em aplicativos que no sejam o Dreamweaver, o arquivo LCK permanece visvel prximo ao arquivo retirado na hierarquia para ajudar a evitar esses acidentes. Para obter mais informaes sobre arquivos LCK e como o sistema de devoluo/retirada funciona, consulte a TechNote 15447 no site da Adobe em www.adobe.com/go/15447_br.

Mais tpicos da Ajuda


Obteno e colocao de arquivos no servidor na pgina 81

Configurar o sistema de devoluo/retirada


Para usar o sistema de devoluo/retirada, voc deve associar o site local a um servidor remoto.
1 Selecione Site > Gerenciar sites. 2 Selecione um site e clique em Editar. 3 Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes

procedimentos:

Para adicionar um servidor, clique no boto Adicionar novo servidor Selecione um servidor existente e clique no boto Editar servidor existente
4 Especifique as Opes bsicas conforme necessrio e clique no boto Avanado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 87


Criao e gerenciamento de arquivos

5 Selecione Ativar retirada de arquivos caso voc esteja trabalhando em um ambiente em equipe (ou trabalhando

sozinho, mas em vrias mquinas diferentes). Desmarque a opo caso voc queira desativar a devoluo e a retirada de arquivo no site. Essa opo til para permitir aos demais saber que voc retirou um arquivo para edio ou alert-lo de que voc talvez tenha deixado uma verso mais recente do arquivo em outra mquina. Caso voc no veja as opes de devoluo/retirada, isso significa que voc no configurou um servidor remoto.
6 Selecione a opo Retirar os arquivos na abertura caso voc queira retirar automaticamente os arquivos quando

clicar duas vezes para abri-los no painel Arquivos. O uso de Arquivo > Abrir para abrir um arquivo no o retira mesmo quando a opo est selecionada.
7 Defina as opes restantes:
Nome de retirada O nome da retirada exibido no painel Arquivos com todos os arquivos retirados; isso permite aos membros da equipe se comunicar com a pessoa certa caso um arquivo de que eles precisam seja retirado.

Nota: Caso voc trabalhe sozinho em vrias mquinas diferentes, use um nome de retirada diferente em cada uma delas (por exemplo, AmyR-HomeMac e AmyR-OfficePC) para que voc saiba onde a verso mais recente do arquivo est caso se esquea de devolv-la.
Endereo de email Caso voc digite um endereo de email, quando retira um arquivo, o nome exibido no painel

Arquivos como um link (em azul e sublinhado) prximo ao arquivo. Caso um membro da equipe clique no link, o programa de email padro abre uma nova mensagem com o endereo de email do usurio e um assunto correspondente ao arquivo e ao nome do site.

Devolver e retirar arquivos em uma pasta remota


Depois de configurar o sistema de devoluo/retirada, voc pode devolver e retirar arquivos em um servidor remoto usando o painel Arquivos ou na janela Documento.

Retirar arquivos usando o painel Arquivos


1 No painel Arquivos (Janela > Arquivos), selecione os arquivos a serem retirados do servidor remoto.

Nota: Voc pode selecionar arquivos na Visualizao local ou remota, mas no na Visualizao servidor de teste. Uma marca de seleo vermelha indica que outro membro da equipe retirou o arquivo e um smbolo de bloqueio indica que o arquivo somente leitura (Windows) ou que est bloqueado (Macintosh).
2 Siga um dos seguintes procedimentos para retirar o(s) arquivo(s):

Clique no boto Retirar na barra de ferramentas do painel Arquivos. Clique com o boto direito do mouse (Windows) ou clique mantendo a tecla Control pressionada (Macintosh), e
selecione Retirar no menu de contexto.
3 Na caixa de dilogo Arquivos dependentes, clique em Sim para baixar arquivos dependentes com os arquivos

selecionados ou em no para evitar o download desses arquivos. O padro no baixar arquivos dependentes. Voc pode editar essa opo em Editar > Preferncias > Site. Nota: Normalmente, uma boa idia baixar arquivos dependentes ao retirar um novo arquivo, mas caso as verses mais recentes dos arquivos dependentes j estejam no disco local, no h necessidade de baix-los novamente. Uma marca de seleo verde exibida ao lado do cone de arquivo local indicando sua retirada. Importante: Caso voc tenha retirado o arquivo ativo no momento, a verso aberta atual do arquivo substituda pela nova verso retirada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 88


Criao e gerenciamento de arquivos

Devolver arquivos usando o painel Arquivos


1 No painel Arquivos (Janela > Arquivos), selecione arquivo(s) retirado(s) ou novo(s).

Nota: Voc pode selecionar arquivos na Visualizao local ou remota, mas no na Visualizao servidor de teste.
2 Siga um dos seguintes procedimentos para devolver o(s) arquivo(s):

Clique no boto Devolver na barra de ferramentas do painel Arquivos. Clique com o boto direito do mouse (Windows) ou clique mantendo a tecla Control pressionada (Macintosh), e
selecione Devolver no menu de contexto.
3 Clique em Sim para atualizar os arquivos dependentes com os arquivos selecionados ou clique em No para evitar

o carregamento de arquivos dependentes. O padro no carregar arquivos dependentes. Voc pode editar essa opo em Editar > Preferncias > Site. Nota: Normalmente, uma boa idia carregar arquivos dependentes ao devolver um novo arquivo, mas caso as verses mais recentes dos arquivos dependentes j estejam no servidor remoto, no h necessidade de carreg-los novamente. Um smbolo de bloqueio exibido ao lado do cone de arquivo local indicando que o arquivo agora somente leitura. Importante: Caso voc devolva o site ativo atualmente, o arquivo pode ser salvo automaticamente antes de ser devolvido, dependendo das opes de preferncia que voc definiu.

Devolver um arquivo aberto na janela Documento


1 Verifique se o arquivo que voc deseja devolver est aberto na janela Documento.

Nota: Voc pode devolver apenas um arquivo por vez.


2 Siga um destes procedimentos:

Selecione Site > Devolver. Clique no cone Gerenciamento de arquivos na barra de ferramentas da janela Documento e, em seguida, selecione
Devolver no menu. Caso o arquivo atual no faa parte do site ativo no painel Arquivos, o Dreamweaver tenta determinar a qual site definido localmente o arquivo atual pertence. Caso o arquivo atual pertena a um site que no seja o ativo no painel Arquivos, o Dreamweaver abre o site e, em seguida, realiza a operao de devoluo. Importante: Caso voc devolva o site ativo atualmente, o arquivo pode ser salvo automaticamente antes de ser devolvido, dependendo das opes de preferncia que voc definiu.

Desfazer uma retirada de arquivo


Caso retire um arquivo e, depois, opte por no edit-lo (ou por descartar as alteraes feitas), voc pode desfazer a operao de retirada, e o arquivo retorna ao estado original. Para desfazer a retirada de um arquivo, siga um destes procedimentos:

Abra o arquivo na janela Documento e, em seguida, selecione Site > Desfazer retirada. No painel Arquivos (Janela > Arquivos), clique com o boto direito do mouse (Windows) ou com a tecla Control
pressionada (Macintosh) e, em seguida, selecione Desfazer retirada. A cpia local do arquivo se torna somente leitura, e todas as alteraes que voc fez nele so perdidas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 89


Criao e gerenciamento de arquivos

Usar WebDAV para devolver e retirar arquivos


O Dreamweaver pode se conectar a um servidor que usa WebDAV (Web-based Distributed Authoring and Versioning), um conjunto de extenses para o protocolo HTTP que permite aos usurios editar e gerenciar arquivos de maneira colaborativa em servidores da Web remotos. Para obter mais informaes, consulte www.webdav.org.
1 Caso voc ainda no tenha feito isso, defina um site do Dreamweaver que especifica a pasta local usada para

armazenar e proteger arquivos.


2 Selecione Site > Gerenciar sites e, em seguida, clique duas vezes no seu site na lista. 3 Na caixa de dilogo Configurao de site, selecione a categoria Servidores e execute um dos seguintes

procedimentos:

Para adicionar um servidor, clique no boto Adicionar novo servidor Selecione um servidor existente e clique no boto Editar servidor existente
4 Na tela Bsico, no menu pop-up Uso da conexo, selecione WebDav e complete o restante das opes da tela,

conforme necessrio.
5 Clique no boto Avanado. 6 Selecione a opo Ativar retirada de arquivos e insira as seguintes informaes:

Na caixa Nome de retirada, digite um nome que o identifique aos demais membros da equipe. Na caixa Endereo de email, digite o seu endereo.
O nome e os endereos de email so usados para identificar a propriedade no servidor WebDAV, sendo exibidos no painel Arquivos para fins de contato.
7 Clique em Salvar.

O Dreamweaver configura o site para acesso WebDAV. Quando voc usa o comando Devolver ou Retirar em qualquer arquivo do site, o arquivo transferido usando o WebDAV. Nota: O WebDAV talvez no consiga retirar corretamente nenhum arquivo com contedo dinmico como tags PHP ou SSIs porque o HTTP GET os processa como retirados.

Usar o SVN (Subversion) para obter e devolver arquivos


O Dreamweaver pode se conectar a um servidor que use o SVN (Subversion), um sistema de controle de verso que permite que usurios editem e gerenciem de maneira colaborativa os arquivos em servidores remotos da Web. O Dreamweaver no um cliente SVN completo, porm, ele permite que o usurio obtenha as verses mais recentes de arquivos, faa alteraes e confirme arquivos. Importante: O Dreamweaver CS5 usa a biblioteca cliente Subversion 1.6.6. As verses posteriores da biblioteca cliente Subversion no so compatveis com verses anteriores. Lembre-se de que, se voc atualizar um aplicativo cliente de terceiros (por exemplo, o TortoiseSVN) para funcionar com uma verso posterior do Subversion, o aplicativo Subversion atualizado atualizar os metadados locais do Subversion, e o Dreamweaver no poder mais comunicar-se com o Subversion. Essa questo no afetada pelas atualizaes do servidor Subversion, pois essas atualizaes so compatveis com verses anteriores. Se fizer a atualizao para o aplicativo cliente de terceiros que funciona com o Subversion 1.7 ou posterior, voc ter que consultar a Adobe se h atualizaes antes de usar novamente o Subversion com o DreamWeaver. Para obter mais informaes sobre essa questo, consulte www.adobe.com/go/dw_svn_br.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 90


Criao e gerenciamento de arquivos

A Adobe recomenda que voc use uma outra ferramenta de comparao de arquivos quando estiver trabalhando com arquivos controlados por verso SVN. Ao comparar arquivos para obter as diferenas, voc pode saber exatamente que tipo de alteraes outros usurios fizeram nos arquivos. Para obter mais informaes sobre ferramentas de comparao, use um mecanismo de busca na Web como o Google para procurar comparao de arquivos ou ferramentas para diferenciar. O Dreamweaver trabalha com a maioria das ferramentas de outros fabricantes. Para obter uma viso em geral em vdeo sobre como trabalhar com SVN e Dreamweaver, consulte www.adobe.com/go/lrvid4049_dw_br.

Configurar uma conexo do SVN


Antes de usar o SVN (Subversion) como um sistema de controle de verso com o Dreamweaver, voc precisa configurar uma conexo com um servidor SVN. Voc pode configurar uma conexo com um servidor SVN na categoria Controle de verso da caixa de dilogo Definio de sites. O servidor SVN um repositrio de arquivos onde voc e outros usurios podem obter e confirmar arquivos. diferente do servidor remoto geralmente usado com o Dreamweaver. Quando o SVN utilizado, o servidor remoto continua sendo o servidor "ao vivo" para suas pginas da Web, e o servidor SVN existe para conter o repositrio de arquivos sobre o qual voc deseja manter controle de verso. O fluxo de trabalho tpico consiste em obter e confirmar arquivos no servidor SVN, e depois public-los em seu servidor remoto a partir do Dreamweaver. As configuraes do servidor remoto e do SVN so totalmente separadas. Voc precisa ter acesso a um servidor SVN e a um repositrio SVN para dar incio a essa configurao. Para obter mais informaes sobre o SVN, consulte o site do Subversion, em http://subversion.tigris.org/. Para configurar a conexo do SVN, siga estas etapas:
1 Escolha Sites > Gerenciar sites, selecione o site para o qual deseja configurar o controle de verso e clique no boto

Editar. Nota: Se ainda no tiver configurado as pastas locais e remotas para um site do Dreamweaver, voc precisar configurar pelo menos um site local antes de prosseguir. (O site remoto no obrigatrio nesta etapa, mas voc precisar configur-lo em algum momento, antes de publicar seus arquivos na Web.) Para obter mais informaes, consulte Configurao de um site do Dreamweaver na pgina 37.
2 Na caixa de dilogo Configurao de site, selecione a categoria Controle de verso. 3 Selecione Subversion no menu pop-up Acesso. 4 Defina as opes de acesso da seguinte forma:

Selecione um protocolo no menu pop-up Protocolo. Os protocolos disponveis so HTTP, HTTPS, SVN e
SVN+SSH. Nota: O uso do protocolo SVN+SSH requer uma configurao especial. Para obter mais informaes, consulte www.adobe.com/go/learn_dw_svn_ssh_br.

Digite o endereo do servidor SVN na caixa de texto Endereo do servidor (normalmente no formato
servername.domain.com).

Digite o caminho para o seu repositrio no servidor SVN na caixa de texto Caminho do repositrio
(normalmente algo como /svn/your_root_directory. atribuio do administrador do servidor nomear a pasta raiz para o repositrio de SVN.)

(Opcional) Se quiser usar uma porta do servidor diferente do padro, selecione No-padro e digite o nmero
da porta na caixa de texto.

Digite o nome do usurio e a senha do servidor SVN.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 91


Criao e gerenciamento de arquivos

5 Clique em Testar para testar sua conexo, ou ento clique em OK para fechar a caixa de dilogo. Depois, clique em

Concludo para fechar a caixa de dilogo Gerenciar sites. Uma vez estabelecida a conexo com o servidor, seu repositrio SVN estar disponvel para exibio no painel Arquivos. Para exibi-lo, voc pode selecionar Visualizao do repositrio no menu pop-up Exibir, ou ento clicar no boto Arquivos do repositrio no painel Arquivos expandido.

Mais tpicos da Ajuda


Configurar um novo site na pgina 38 Uso do painel Arquivos na pgina 73

Montar pastas a partir do repositrio SVN


O processo de montagem de pastas a partir do repositrio SVN no seu computador local cria um mapeamento exato da estrutura de pastas no repositrio SVN. Quando voc monta uma pasta a partir do repositrio SVN, o Dreamweaver obtm todos os arquivos nessa pasta e tambm em todas as subpastas. Nota: Ao pegar os arquivos do repositrio pela primeira vez, voc deve trabalhar em um diretrio local vazio ou em um diretrio local que no contenha arquivos com os mesmos nomes dos arquivos no repositrio. O Dreamweaver no montar arquivos de repositrio na unidade local na primeira tentativa, se a unidade local contiver arquivos cujos nomes correspondem a arquivos no repositrio remoto.
1 Verifique se voc configurou corretamente uma conexo do SVN. 2 Exiba os arquivos do repositrio SVN selecionando Visualizao do repositrio no menu pop-up Exibir, no painel

Arquivos, ou ento clicando no boto Arquivos do repositrio, no painel Arquivos expandido.


3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na pasta do

repositrio SVN que deseja montar e selecione Montar pastas.

Obter as verses mais recentes de arquivos


Quando voc obtm a verso mais recente de um arquivo no repositrio SVN, o Dreamweaver mescla o contedo desse arquivo com o contedo da cpia local correspondente. (Em outras palavras, se outra pessoa tiver atualizado o arquivo desde que voc o confirmou pela ltima vez, essas atualizaes sero mescladas com a verso local do arquivo no seu computador.) Se o arquivo ainda no existir no disco rgido local, o Dreamweaver ir simplesmente obt-lo. Nota: Ao pegar os arquivos do repositrio pela primeira vez, voc deve trabalhar em um diretrio local vazio ou em um diretrio local que no contenha arquivos com os mesmos nomes dos arquivos no repositrio. O Dreamweaver no montar arquivos de repositrio na unidade local na primeira tentativa, se a unidade local contiver arquivos cujos nomes correspondem a arquivos no repositrio remoto.
1 Verifique se voc configurou corretamente uma conexo do SVN. 2 Siga um destes procedimentos:

Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu popup Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida automaticamente.) Depois, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo ou na pasta relevante e selecione Controle de verso > Obter verses mais recentes.

Exiba os arquivos do repositrio SVN selecionando Visualizao do repositrio no menu pop-up Exibir, no
painel Arquivos, ou ento clicando no boto Arquivos do repositrio, no painel Arquivos expandido. Depois, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo ou na pasta relevante e selecione Obter verses mais recentes.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 92


Criao e gerenciamento de arquivos

Nota: Voc tambm pode clicar com o boto direito do mouse em um arquivo e escolher Retirar no menu de contexto ou selecionar o arquivo e clicar no boto Retirar para obter a verso mais recente. No entanto, como o SVN no oferece suporte a um fluxo de trabalho de retirada, essa ao no retira efetivamente o arquivo no sentido tradicional.

Confirmar arquivos
1 Verifique se voc configurou corretamente uma conexo do SVN. 2 Siga um destes procedimentos:

Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu popup Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida automaticamente.) Depois, selecione o arquivo que deseja confirmar e clique no boto Devolver.

Exiba os arquivos do repositrio SVN selecionando Visualizao do repositrio no menu pop-up Exibir, no
painel Arquivos, ou ento clicando no boto Arquivos do repositrio, no painel Arquivos expandido. Depois, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo que deseja confirmar e selecione Devolver.
3 Revise as aes na caixa de dilogo Confirmar, faa as alteraes necessrias e clique em OK.

Voc pode alterar aes selecionando o arquivo cuja ao deseja alterar e clicando nos botes na parte inferior da caixa de dilogo Confirmar. H duas opes disponveis: confirmar e ignorar. Nota: Uma marca de seleo verde em um arquivo no painel Arquivos representa um arquivo alterado que ainda no foi confirmado no repositrio.

Atualizar status de arquivos ou pastas no repositrio


Voc pode atualizar o status SVN de um nico arquivo ou pasta. A atualizao no feita na exibio inteira.
1 Verifique se voc configurou corretamente uma conexo do SVN. 2 Exiba os arquivos do repositrio SVN selecionando Visualizao do repositrio no menu pop-up Exibir, no painel

Arquivos, ou ento clicando no boto Arquivos do repositrio, no painel Arquivos expandido.


3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer

pasta ou arquivo no repositrio e selecione Atualizar status.

Atualizar status de arquivo ou pastas locais


Voc pode atualizar o status SVN de um nico arquivo ou pasta. A atualizao no feita na exibio inteira.
1 Verifique se voc configurou corretamente uma conexo do SVN. 2 Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu pop-up

Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida automaticamente.)
3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer

pasta ou arquivo no painel Arquivos e selecione Atualizar status.

Exibir revises de um arquivo


1 Verifique se voc configurou corretamente uma conexo do SVN.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 93


Criao e gerenciamento de arquivos

2 Siga um destes procedimentos:

Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu popup Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida automaticamente.) Depois, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo do qual deseja exibir as revises e selecione Controle de verso > Mostrar revises.

Exiba os arquivos do repositrio SVN selecionando Visualizao do repositrio no menu pop-up Exibir, no
painel Arquivos, ou ento clicando no boto Arquivos do repositrio, no painel Arquivos expandido. Depois, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo do qual deseja exibir as revises e selecione Mostrar revises.
3 Na caixa de dilogo Histrico de reviso, selecione a reviso ou as revises relevantes e siga um destes

procedimentos:

Clique em Comparar com local para comparar a reviso selecionada com a verso local do arquivo.
Nota: Voc deve instalar uma ferramenta para comparao de arquivos de outro fabricante antes de comparar arquivos. Para obter mais informaes sobre ferramentas de comparao, use um mecanismo de busca na Web como o Google para procurar comparao de arquivos ou ferramentas para diferenciar. O Dreamweaver trabalha com a maioria das ferramentas de outros fabricantes.

Clique em Comparar para comparar duas revises selecionadas. Clique com a tecla Control pressionada para
selecionar duas revises simultaneamente.

Clique em Exibir para exibir a reviso selecionada. Essa ao no substitui a cpia local atual do mesmo arquivo.
Voc pode salvar a reviso selecionada no seu disco rgido, assim como faria com qualquer outro arquivo.

Clique em Elevar para tornar a reviso selecionada a mais atual no repositrio.

Bloquear e desbloquear arquivos


Bloquear um arquivo no repositrio SVN permite que outros usurios saibam que voc est trabalhando em um arquivo. Outros usurios podem ainda editar o arquivo localmente, mas no podero confirm-lo enquanto voc no o desbloquear. Quando voc bloqueia um arquivo no repositrio, um cone de cadeado aberto exibido no arquivo. Outros usurios vem um cone de cadeado totalmente fechado.
1 Verifique se voc configurou corretamente uma conexo do SVN. 2 Siga um destes procedimentos:

Exiba os arquivos do repositrio SVN selecionando Visualizao do repositrio no menu pop-up Exibir, no
painel Arquivos, ou ento clicando no boto Arquivos do repositrio, no painel Arquivos expandido. Depois, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo relevante e selecione Bloquear ou Desbloquear.

Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu popup Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida automaticamente.) Depois, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo relevante e selecione Bloquear ou Desbloquear.

Adicionar um novo arquivo ao repositrio


Um sinal de adio azul em um arquivo no painel Arquivos indica que o arquivo ainda no existe no repositrio SVN.
1 Verifique se voc configurou corretamente uma conexo do SVN. 2 No painel Arquivos, selecione o arquivo que deseja adicionar ao repositrio e clique no boto Devolver. 3 Verifique se o arquivo est selecionado para Confirmar, na caixa de dilogo Confirmar, e clique em OK.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 94


Criao e gerenciamento de arquivos

Mover, copiar, excluir ou reverter arquivos


Para mover um arquivo, arraste o arquivo para a pasta de destino no site local.
Quando voc move um arquivo, o Dreamweaver marca o arquivo no novo local com um sinal Adicionar com histrico e marca o arquivo no local antigo com um sinal de excluso. Quando voc confirma esses arquivos, o arquivo no local antigo desaparece.

Para copiar um arquivo, selecione-o, copie-o (Editar > Copiar) e cole (Editar > Colar) o arquivo no novo local.
Quando voc copia e cola um arquivo, o Dreamweaver marca o arquivo no novo local com um sinal Adicionar com histrico.

Para excluir um arquivo, selecione-o e pressione Excluir.


O Dreamweaver fornece a opo de apenas a verso local do arquivo ou a verso local e a verso no servidor SVN. Se selecionar excluir apenas a verso local, o arquivo no servidor SVN no ser afetado. Se selecionar excluir a verso no servidor SVN tambm, a verso local ser marcada com um sinal Excluir e voc confirmar a excluso do arquivo para que a excluso ocorra.

Para reverter um arquivo copiado ou movido para seu local original, clique com o boto direito do mouse no
arquivo e selecione Controle de verso > Reverter.

Resolver conflito de arquivos


Se o seu arquivo conflitar com outro arquivo no servidor, voc poder edit-lo e marc-lo como resolvido. Por exemplo, se voc tentar devolver um arquivo que est em conflito com as alteraes de outro usurio, o SVN no permitir que voc confirme o arquivo. Voc pode obter a verso mais recente do arquivo no repositrio, fazer alteraes manualmente na sua cpia de trabalho e marcar o arquivo como resolvido para que possa confirm-lo.
1 Verifique se voc configurou corretamente uma conexo do SVN. 2 Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu pop-up

Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida automaticamente.)
3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo cujo

conflito deseja resolver e selecione Controle de verso > Marcar como resolvido.

Acessar offline
Talvez seja til para voc evitar o acesso ao repositrio durante outras atividades de transferncia de arquivos usando o acesso offline. O Dreamweaver se reconectar ao repositrio SVN assim que voc invocar uma atividade que exija uma conexo (Obter verses mais recentes, Confirmar etc).
1 Verifique se voc configurou corretamente uma conexo do SVN. 2 Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu pop-up

Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida automaticamente.)
3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer

arquivo ou pasta no painel Arquivos e selecione Controle de verso > Acessar offline.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 95


Criao e gerenciamento de arquivos

Limpar um site local do SVN


Esse comando permite remover bloqueios nos arquivos para que voc possa retomar as operaes no concludas. Voc deve usar esse comando para remover bloqueios antigos se voc receber erros como "cpia de trabalho bloqueada".
1 Verifique se voc configurou corretamente uma conexo do SVN. 2 Exiba a verso local dos seus arquivos SVN no painel Arquivos selecionando Visualizao local no menu pop-up

Exibir. (Se voc estiver trabalhando no painel Arquivos expandido, a Visualizao local ser exibida automaticamente.)
3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo que

deseja limpar e selecione Controle de verso > Limpar.

Sobre a movimentao de arquivos e pastas em sites controlados pelo Subversion


Quando voc move as verses locais de arquivos ou pastas em um site controlado pelo Subversion, corre o risco de criar problemas para outros usurios que faam sincronizaes com o repositrio SVN. Por exemplo, se voc mover um arquivo localmente e no confirmar esse arquivo no repositrio durante algumas horas, outro usurio poder tentar obter a verso mais recente do arquivo em sua localizao antiga. Por isso, voc deve sempre confirmar os arquivos no servidor SVN imediatamente aps mov-los localmente. Arquivos e pastas permanecem no servidor SVN at que voc os exclua manualmente. Ento, mesmo que voc mova um arquivo para outra pasta local e o confirme, a verso antiga permanecer na localizao anterior no servidor. Para evitar confuso, exclua as cpias antigas de arquivos e pastas movidos. Quando voc mover um arquivo localmente e confirm-lo no servidor SVN, o histrico de verses do arquivo ser perdido.

Sincronizao de arquivos
Sincronizar os arquivos nos sites local e remoto
Depois de criar arquivos nos sites locais e remotos, voc pode sincronizar os arquivos entre os dois sites. Nota: Caso o site remoto seja um servidor FTP (e no um servidor em rede), a sincronizao dos arquivos usa FTP. Antes de sincronizar os sites, voc pode verificar quais arquivos voc deseja colocar, obter, excluir ou ignorar. O Dreamweaver tambm confirma quais arquivos foram atualizados depois que voc completa a sincronizao.

Mais tpicos da Ajuda


Gerenciar transferncias de arquivo na pgina 85 Devolver e retirar arquivos em uma pasta remota na pgina 87 Obter arquivos de um servidor remoto na pgina 82 Colocar arquivos em um servidor remoto na pgina 84 Comparao de arquivos em busca de diferenas na pgina 97

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 96


Criao e gerenciamento de arquivos

Verifique quais arquivos so mais novos no site local ou remoto sem sincronizao
No painel Arquivos, siga um destes procedimentos:

Clique no menu Opes no canto superior direito e, em seguida, selecione Editar > Selecionar um local mais novo
ou Editar > Selecionar um remoto mais novo.

No painel Arquivos, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada
(Macintosh) e, em seguida, selecione Selecionar > Local mais novo ou Selecionar > Remoto mais novo.

Exibir informaes de sincronizao detalhadas de um determinado arquivo


No painel Arquivos, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada

(Macintosh) no arquivo sobre o qual voc deseja obter informaes e, em seguida, selecione Exibir informaes de sincronizao. Nota: Para que esse recurso esteja disponvel, a opo Manter informaes sobre sincronizao deve estar selecionada na categoria Remoto da caixa de dilogo Definio de sites.

Sincronizar os arquivos
1 No painel Arquivos (Janela > Arquivos), selecione um site no menu em que o site atual, o servidor ou a unidade

exibida.
2 (Opcional) Selecione arquivos ou pastas especficas ou avance prxima etapa para sincronizar todo o site. 3 Clique no menu Opes no canto superior direito do painel Arquivos e selecione Site > Sincronizar.

Voc tambm pode clicar no boto Sincronizar na parte superior do painel Arquivos para sincronizar arquivos.
4 No menu Sincronizar, realize um dos seguintes procedimentos:

Para sincronizar todo o site, selecione Nome do site inteiro. Para sincronizar apenas os arquivos selecionados, selecione Apenas arquivos locais selecionados (ou Apenas
arquivos remotos selecionados caso a Visualizao remota do painel Arquivos esteja onde voc fez a seleo mais recente).
5 Selecione a direo na qual voc deseja copiar os arquivos:
Colocar arquivos mais recentes no remoto Carrega todos os arquivos locais que no existem no servidor remoto ou que foram alterados aps o ltimo carregamento. Obter arquivos mais recentes do remoto Baixa todos os arquivos remotos que no existem localmente ou que foram

alterados desde o ltimo download.


Obter e colocar os arquivos mais novos Coloca as verses mais recentes de todos os arquivos nos sites local e remoto.

6 Selecione se voc deseja excluir os arquivos no site de destino sem equivalentes no site de origem. (Isso no est

disponvel caso voc selecione Obter e Colocar no menu Direo.) Caso voc selecione Colocar arquivos mais recentes no remoto e a opo Excluir, todos os arquivos no site remoto para os quais no h nenhum arquivo local correspondente so excludos. Caso voc selecione Obter arquivos mais recentes do remoto, todos os arquivos no site local para os quais no h arquivos remotos correspondentes so excludos.
7 Clique em Visualizar.

Nota: Para poder sincronizar os arquivos, voc deve visualizar as aes que o Dreamweaver realiza para cumprir essa tarefa.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 97


Criao e gerenciamento de arquivos

Caso a verso mais recente de cada arquivo escolhido j esteja em ambos os locais e mais nada precise ser excludo, um alerta exibido informando que nenhuma sincronizao necessria. Do contrrio, a caixa de dilogo Sincronizar exibida para permitir alterar as aes (colocar, obter, excluir e ignorar) desses arquivos antes da execuo da sincronizao.
8 Verifique a ao a ser realizada em cada arquivo. 9 Para alterar a ao de um determinado arquivo, selecione-o e, em seguida, clique em um dos cones de ao na parte

inferior da janela de visualizao.


Comparar A ao Comparar s funciona caso voc tenha instalado e especificado uma ferramenta para comparao

de arquivo no Dreamweaver. Caso o cone de ao esteja esmaecido, a ao no pode ser realizada.


Marcar arquivos selecionados como j sincronizados Essa opo permite especificar que o(s) arquivo(s)

selecionado(s) j est(o) sincronizado(s).


10 Clique em OK para sincronizar os arquivos. Voc pode exibir ou salvar os detalhes da sincronizao em um arquivo

local.

Comparao de arquivos em busca de diferenas


Comparar arquivos locais e remotos em busca de diferenas
O Dreamweaver pode funcionar com ferramentas para comparao de arquivos (tambm conhecidas como ferramentas para diferenciar) a fim de comparar o cdigo das verses local e remota do mesmo arquivo, dois arquivos remotos diferentes ou dois arquivos locais diferentes. A comparao das verses local e remota muito til caso voc esteja trabalhando em um arquivo localmente e suspeite de que a cpia do arquivo no servidor foi modificada por algum. Sem deixar o Dreamweaver, voc pode exibir e mesclar as alteraes remotas verso local antes de colocar o arquivo no servidor. A comparao de dois arquivos locais ou de dois arquivos remotos tambm til caso voc mantenha verses anteriores, renomeadas, dos arquivos. Se voc tiver esquecido as alteraes feitas em um arquivo em relao a uma verso anterior, uma rpida comparao o lembrar delas. Antes de comear, voc deve instalar uma ferramenta para comparao de arquivos de outro fabricante no sistema. Para obter mais informaes sobre ferramentas de comparao, use um mecanismo de busca na Web como o Google para procurar comparao de arquivos ou ferramentas para diferenciar. O Dreamweaver funciona com a maioria das ferramentas de outros fabricantes.

Especificar uma ferramenta comparativa no Dreamweaver


1 Instale a ferramenta comparativa no mesmo sistema do Dreamweaver. 2 No Dreamweaver, abra a caixa de dilogo Preferncias selecionando Editar > Preferncias (Windows) ou

Dreamweaver > Preferncias (Macintosh) e, em seguida, selecione a categoria Comparar arquivos.


3 Siga um destes procedimentos:

No Windows, clique no boto Procurar e selecione o aplicativo que compara arquivos. No Macintosh, clique no boto Browse e selecione a ferramenta ou o script que inicia a ferramenta comparativa de
arquivos na linha de comando, e no a ferramenta propriamente dita. No Macintosh, ferramentas ou scripts de inicializao costumam estar localizados na pasta usr/bin. Por exemplo, caso voc use o FileMerge, navegue at usr/bin e selecione opendiff, a ferramenta que inicia FileMerge.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 98


Criao e gerenciamento de arquivos

A seguinte tabela lista as ferramentas para comparao de arquivos mais comuns para Macintosh e o local das ferramentas e dos script de inicializao no disco rgido:
Caso voc use FileMerge BBEdit TextWrangler Selecione o seguinte arquivo usr/bin/opendiff usr/bin/bbdiff usr/bin/twdiff

Nota: A pasta usr costuma permanecer oculta no Finder. No entanto, voc pode acess-la usando o boto Browse do Dreamweaver. Nota: Os resultados reais exibidos dependem da ferramenta para diferenciar que voc est usando. Verifique o manual do usurio da ferramenta para compreender como interpretar os resultados.

Comparar dois arquivos locais


Voc pode comparar dois arquivos localizados em qualquer lugar do computador.
1 No painel Arquivos, clique com a tecla Control pressionada (Windows) ou Command (Macintosh) nos dois

arquivos para selecion-los. Para selecionar arquivos fora do site definido, selecione o disco local no menu pop-up esquerda do painel Arquivos e, em seguida, selecione os arquivos.
2 Clique com o boto direito do mouse em um dos arquivos selecionados e selecione Comparar arquivos locais no

menu de contexto. Nota: Caso voc tenha um mouse de um boto, clique com a tecla Control pressionada em um dos arquivos selecionados. A ferramenta para comparao de arquivos iniciada e compara os dois arquivos.

Comparar dois arquivos remotos


Voc pode comparar dois arquivos localizados no servidor remoto. Voc deve definir um site do Dreamweaver com as configuraes remotas para realizar esta tarefa.
1 No painel Arquivos, veja os arquivos no servidor remoto selecionando Visualizao remota no menu pop-up

direita.
2 Clique com a tecla Control pressionada (Windows) ou Command (Macintosh) nos dois arquivos para selecion-los. 3 Clique com o boto direito do mouse em um dos arquivos selecionados e selecione Comparar arquivos remotos no

menu de contexto. Nota: Caso voc tenha um mouse de um boto, clique com a tecla Control pressionada em um dos arquivos selecionados. A ferramenta para comparao de arquivos iniciada e compara os dois arquivos.

Comparar um arquivo local com um arquivo remoto


Voc pode comparar um arquivo local com um arquivo localizado no servidor remoto. Para isso, voc deve definir primeiro um site do Dreamweaver com configuraes remotas.
No painel Arquivos, clique com o boto direito do mouse em um arquivo local e selecione Comparar com remoto

no menu de contexto. Nota: Caso voc tenha um mouse de um boto, clique com a tecla Control pressionada no arquivo local. A ferramenta para comparao de arquivos iniciada e compara os dois arquivos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 99


Criao e gerenciamento de arquivos

Comparar um arquivo remoto com um arquivo local


Voc pode comparar um arquivo remoto com um arquivo local. Voc deve definir um site do Dreamweaver com as configuraes remotas para realizar esta tarefa.
1 No painel Arquivos, veja os arquivos no servidor remoto selecionando Visualizao remota no menu pop-up

direita.
2 Clique com o boto direito do mouse em um arquivo no painel e selecione Comparar com local no menu de

contexto. Nota: Caso voc tenha um mouse de um boto, clique com a tecla Control pressionada no arquivo.

Comparar um arquivo aberto com um arquivo remoto


Voc pode comparar um arquivo aberto no Dreamweaver com seu correspondente no servidor remoto.
Na janela Documento, selecione Arquivo > Comparar com remoto.

A ferramenta para comparao de arquivos iniciada e compara os dois arquivos. Voc tambm pode clicar com o boto direito do mouse na aba do documento na parte superior da janela Documento e selecionar Comparar com remoto no menu de contexto.

Comparar antes da colocao dos arquivos


Se voc editar um arquivo localmente e, em seguida, tentar carreg-lo no servidor remoto, o Dreamweaver notificar voc de que o arquivo foi alterado. Voc tem a opo de comparao dos dois arquivos antes de carregar o arquivo e substituir a verso remota. Antes de comear, voc deve instalar uma ferramenta para comparar arquivos no sistema e especific-la no Dreamweaver.
1 Depois de editar um arquivo em um site do Dreamweaver, coloque o arquivo (Site > Colocar) no site remoto.

Se a verso remota do arquivo tiver sido modificada, voc receber uma notificao com a opo de visualizao das diferenas.
2 Para exibir as diferenas, clique no boto Comparar.

A ferramenta para comparao de arquivos iniciada e compara os dois arquivos. Caso no tenha especificado uma ferramenta para comparar arquivos, voc solicitado a especificar uma.
3 Depois de examinar ou mesclar as alteraes na ferramenta, voc pode continuar a operao Colocar ou cancel-la.

Comparar arquivos durante a sincronizao


Voc pode comparar as verses locais dos arquivos com as verses remotas ao sincronizar os arquivos do site com o Dreamweaver. Antes de comear, voc deve instalar uma ferramenta para comparar arquivos no sistema e especific-la no Dreamweaver.
1 Clique com o boto direito do mouse em qualquer lugar do painel Arquivos e selecione Sincronizar no menu de

contexto.
2 Complete a caixa de dilogo Sincronizar arquivos e clique em Visualizar.

Depois que voc clicar em Visualizar, os arquivos selecionados e as aes a serem realizadas durante a sincronizao sero listados.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 100


Criao e gerenciamento de arquivos

3 Na lista, selecione todos os arquivos que voc deseja comparar e clique no boto Comparar (o cone com duas

pginas pequenas). Nota: O arquivo deve ser baseado em texto como, por exemplo, arquivos em HTML ou do ColdFusion. O Dreamweaver inicia a ferramenta comparativa, que compara as verses local e remota de todos os arquivos que voc selecionou.

Mais tpicos da Ajuda


Sincronizao de arquivos na pgina 95

Reverso de arquivos (usurios do Contribute)


Reverter arquivos (usurios do Contribute)
O Dreamweaver salva automaticamente vrias verses de um documento quando a compatibilidade com o Adobe Contribute est ativada. Nota: Voc deve ter o Contribute instalado na mesma mquina que o Dreamweaver. A reverso de arquivo tambm deve estar ativada nas configuraes administrativas do Contribute. Para obter mais informaes, consulte Administrao do Contribute.
1 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em um arquivo

do painel Arquivos.
2 Selecione Reverter pgina.

Caso haja alguma verso anterior da pgina a ser revertida, a caixa de dilogo Reverter exibida.
3 Selecione a verso da pgina para a qual voc deseja reverter e clique em Reverter.

Mais tpicos da Ajuda


Preparar um site para usar com o Contribute na pgina 54 Excluir, mover ou renomear um arquivo remoto em um site do Contribute na pgina 56

Encobrimento de pastas e arquivos no site


Sobre o encobrimento de site
O encobrimento de site permite excluir pastas e arquivos de operaes como Obter ou Colocar. Voc tambm pode encobrir todos os arquivos de um determinado tipo (JPEG, FLV, XML e assim por diante) das operaes do site. O Dreamweaver lembra as configuraes de cada site para que voc no precise fazer selees sempre que trabalhar nesse site. Por exemplo, caso esteja trabalhando em um site grande e no queira carregar os arquivos de multimdia diariamente, voc pode usar o encobrimento de site para encobrir a pasta de multimdia. Assim, o Dreamweaver excluir os arquivos dessa pasta das operaes de site que voc realizar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 101


Criao e gerenciamento de arquivos

Voc pode encobrir pastas e tipos de arquivo no site remoto ou local. O encobrimento exclui pastas e arquivos encobertos das seguintes operaes:

Realizao das operaes Colocar, Obter, Devolver e Retirar Gerao de relatrios Localizao de arquivos locais e remotos mais novos Realizao de operaes em todo o site como, por exemplo, verificao e alterao de links Sincronizao Trabalho com contedo do painel Ativo Atualizao de modelos e bibliotecas
Nota: Voc ainda pode realizar uma operao em uma pasta ou arquivo encobertos especficos selecionando o item no painel Arquivos e realizando uma operao nele. A realizao de uma operao diretamente em um arquivo ou pasta substitui o encobrimento. Nota: O Dreamweaver exclui modelos encobertos e itens de biblioteca apenas das operaes Obter e Colocar. O Dreamweaver no exclui esses itens das operaes em lote porque isso pode fazer com que elas percam a sincronia com suas ocorrncias.

Ativar e desativar encobrimento do site


O encobrimento de site permite excluir pastas, arquivos e tipos de arquivo de todas as operaes do site como, por exemplo, Obter ou Colocar, sendo ativado por padro. Voc pode desativar o encobrimento permanentemente ou apenas temporariamente para realizar uma operao em todos os arquivos, inclusive em arquivos encobertos. Quando voc desativa o encobrimento de site, todos os sites encobertos so desencobertos. Quando voc ativa o encobrimento de site novamente, todos os arquivos encobertos anteriormente so novamente encobertos. Nota: Voc tambm pode usar a opo Desencobrir tudo para desencobrir todos os arquivos, mas isso no desativa o encobrimento; alm disso, no h como encobrir novamente todas as pastas e arquivos encobertos anteriormente, exceto para definir o encobrimento novamente para todas as pastas, arquivos e tipos de arquivos.
1 No painel Arquivos (Janela > Arquivos), selecione um arquivo ou uma pasta. 2 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e siga um dos

seguintes procedimentos:

Selecione Encobrimento > (cancele a seleo para desativar). Selecione Encobrimento > Configuraes para abrir a categoria Encobrimento da caixa de dilogo Configurao
de site. Marque ou desmarque e selecione ou cancele a seleo Encobrir arquivos terminados com para ativar ou desativar o encobrimento de tipos de arquivo especficos. Voc pode inserir ou excluir sufixos de arquivo na caixa de texto que voc deseja encobrir ou desencobrir.

Encobrir e desencobrir arquivos e pastas de site


Voc pode encobrir pastas e arquivos especficos, mas no todos os arquivos e pastas ou um site inteiro. Ao encobrir arquivos e pastas especficos, voc pode encobrir vrios arquivos e pastas simultaneamente.
1 No painel Arquivos (Janela > Arquivos), selecione um site que tenha o encobrimento de site ativado. 2 Selecione a(s) pasta(s) ou o(s) arquivo(s) que voc deseja encobrir ou desencobrir. 3 Clique com o boto direito do mouse (Windows) ou clique mantendo a tecla Control pressionada (Macintosh) e

selecione Encobrindo > Encobrir ou Encobrimento > Desencobrir no menu de contexto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 102


Criao e gerenciamento de arquivos

Uma linha vermelha no cone da pasta ou do arquivo aparece ou desaparece, indicando que a pasta est encoberta ou desencoberta. Nota: Voc ainda pode realizar uma operao em uma pasta ou arquivo encobertos especficos selecionando o item no painel Arquivos e realizando uma operao nele. A realizao de uma operao diretamente em um arquivo ou pasta substitui o encobrimento.

Encobrir e desencobrir tipos de arquivo especficos


Voc pode indicar tipos de arquivo especficos a serem encobertos para que o Dreamweaver encubra todos os arquivos com um padro especificado. Por exemplo, voc pode encobrir todos os arquivos que terminem com a extenso .txt. Os tipos de arquivo que voc insere no precisam ser extenses de arquivo; eles podem ter qualquer padro ao final do nome de documento.

Encobrir tipos de arquivo especficos dentro de um site


1 No painel Arquivos (Janela > Arquivos), selecione um site que tenha o encobrimento de site ativado. 2 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida,

selecione Encobrindo > Configuraes.


3 Selecione a opo Encobrir os arquivos terminados com, digite os tipos de arquivo a serem encobertos na caixa e

clique em OK. Por exemplo, voc pode digitar .jpg para encobrir todos os arquivos com nomes que terminem com .jpg no site. Separe vrios tipos de arquivo com um espao; no use uma vrgula ou ponto-e-vrgula. No painel Arquivos, uma linha vermelha exibida em todos os arquivos afetados indicando que eles esto encobertos. Alguns softwares criam arquivos de backup que terminam com um determinado sufixo como, por exemplo, .bak. Voc pode encobrir esses arquivos. Nota: Voc ainda pode realizar uma operao em uma pasta ou arquivo encobertos especficos selecionando o item no painel Arquivos e realizando uma operao nele. A realizao de uma operao diretamente em um arquivo ou pasta substitui o encobrimento.

Desencobrir tipos de arquivo especficos dentro de um site


1 No painel Arquivos (Janela > Arquivos), selecione um site que tenha o encobrimento de site ativado. 2 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida,

selecione Encobrindo > Configuraes.


3 Na caixa de dilogo Definio avanada de sites, siga um destes procedimentos:

Desmarque a opo Encobrir os arquivos terminados com para desencobrir todos os tipos de arquivo listados na
caixa.

Exclua tipos de arquivo especficos da caixa para desencobri-los.


4 Clique em OK.

As linhas vermelhas desaparecem de todos os arquivos afetados indicando que eles esto desencobertos.

Desencobrir todas as pastas e arquivos


Voc pode desencobrir todas as pastas e arquivos de um site simultaneamente. Essa ao no pode ser desfeita; no h como reencobrir todos os itens que j foram encobertos. Voc tem que reencobrir os itens individualmente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 103


Criao e gerenciamento de arquivos

Caso voc queira desencobrir temporariamente todas as pastas e arquivos, encubra novamente esses itens e desative o encobrimento de site.
1 No painel Arquivos (Janela > Arquivos), selecione um site que tenha o encobrimento de site ativado. 2 Selecione todos os arquivos ou pastas do site. 3 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida,

selecione Encobrindo > Desencobrir tudo. Nota: Essa etapa tambm desmarca a opo Encobrir os arquivos terminados com na categoria Encobrimento da caixa de dilogo Definio do site. As linhas vermelhas em todos os cones de pasta e arquivo desaparecem indicando que todos os arquivos e pastas do site esto desencobertos.

Armazenamento de informaes de arquivo em Design Notes


Sobre as Design Notes
As Design Notes so notas que voc cria para um arquivo. As Design Notes so associadas ao arquivo que descrevem, embora sejam armazenadas em um arquivo separado. Voc pode ver quais arquivos tm Design Notes anexadas no painel expandido Arquivos: um cone de Design Notes exibido na coluna Notas. Voc pode usar as Design Notes para controlar as informaes de arquivo adicionais associadas aos documentos como, por exemplo, nomes de arquivo da fonte de imagem e comentrios sobre o status do arquivo. Por exemplo, caso copie um documento de um site para outro, voc pode adicionar Design Notes a esse documento com o comentrio de que o documento original est na outra pasta de site. Voc tambm pode usar as Design Notes para controlar as informaes importantes que no pode colocar em um documento por motivos de segurana como, por exemplo, notas sobre como um determinado preo ou configurao foi escolhido ou quais fatores de marketing influenciaram uma deciso de design. Caso um arquivo esteja aberto no Adobe Fireworks ou em Flash e seja exportado para outro formato, o Fireworks e o Flash salvam automaticamente o nome do arquivo fonte original em um arquivo de Design Notes. Por exemplo, caso voc abra myhouse.png no Fireworks e o exporte para myhouse.gif, o Fireworks cria um arquivo de Design Notes chamado myhouse.gif.mno. Esse arquivo de Design Notes contm o nome do arquivo original, como um arquivo absoluto: URL. Dessa forma, as Design Notes de myhouse.gif podem conter a seguinte linha:
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"

Uma Design Note Flash semelhante pode conter a seguinte linha:


fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"

Nota: Para compartilhar as Design Notes, os usurios devem definir o mesmo caminho de raiz do site, sites/assets/orig). Quando voc importa o grfico para o Dreamweaver, o arquivo de Design Notes copiado automaticamente para o site com o grfico. Quando voc seleciona a imagem no Dreamweaver e opta por edit-la usando o Fireworks, este abre o arquivo original para edio.

Mais tpicos da Ajuda


Iniciar um editor externo para arquivos de mdia na pgina 258

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 104


Criao e gerenciamento de arquivos

Ativar e desativar as Design Notes para um site


Design Notes so notas associadas a um arquivo, embora sejam armazenadas em um arquivo separado. Use as Design Notes para controlar as informaes de arquivo adicionais associadas aos documentos como, por exemplo, nomes de arquivo da fonte de imagem e comentrios sobre o status do arquivo. Voc ativa e desativa as Design Notes para um site na categoria Design Notes da caixa de dilogo Definio de sites. Ao ativar Design Notes, voc pode optar por us-las apenas localmente, se quiser.
1 Selecione Site > Gerenciar sites. 2 Na caixa de dilogo Gerenciar sites, selecione um site e, em seguida, clique em Editar. 3 Na caixa de dilogo Configurao de site, expanda as Configuraes avanadas e selecione a categoria Design

Notes.
4 Marque Manter Design Notes para ativar Design Notes (desmarque para desabilit-las). 5 Caso voc queira excluir todos os arquivos de Design Notes do site, clique em Limpar e, depois, clique em Sim. (Se

voc desejar excluir os arquivos remotos de Design Notes, precisar exclu-los manualmente). Nota: O comando Limpar do Design Note exclui somente arquivos MNO (Design Notes). Ele no exclui a pasta _notes ou o arquivo dwsync.xml dentro da pasta _notes. O Dreamweaver usa o arquivo dwsync.xml para manter informaes sobre a sincronizao do site.
6 Selecione Ativar carregamento de Design Notes para compartilhamento para carregar Design Notes associadas ao

site com os demais documentos e clique em OK.

Caso selecione essa opo, voc pode compartilhar as Design Notes com o restante da equipe. Quando voc coloca
ou obtm um arquivo, o Dreamweaver coloca ou obtm automaticamente o arquivo de Design Notes associado.

Caso voc no selecione essa opo, o Dreamweaver mantm as Design Notes localmente, mas no as carrega com
os arquivos. Caso voc trabalhe sozinho no site, desmarcar essa opo melhor a o desempenho. As Design Notes no sero transferidas para o site remoto quando voc devolver ou colocar os arquivos, e voc pode continuar adicionando e modificando as Design Notes do site localmente.

Associar Design Notes a arquivos


Voc pode criar um arquivo de Design Notes para cada documento ou modelo no site. Voc tambm pode criar Design Notes para applets, controles ActiveX, imagens, contedo Flash, objetos Shockwave e campos de imagem nos documentos. Nota: Caso voc adicione Design Notes a um arquivo de modelo, os documentos que voc cria com o modelo no herdam as Design Notes.
1 Siga um destes procedimentos:

Abra o arquivo na janela Documento e selecione Arquivo > Design Notes. No painel Arquivos, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada
(Macintosh) no arquivo e selecione Design Notes. Nota: Caso o arquivo resida em um site remoto, voc deve primeiramente retirar ou obt-lo e, em seguida, selecion-lo na pasta local.
2 Na aba Informaes bsicas, selecione um status para o documento no menu Status. 3 Clique no cone de data (acima da caixa Notas) para inserir a data local atual das notas. 4 Digite os comentrios na caixa Notas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 105


Criao e gerenciamento de arquivos

5 Selecione Mostrar quando o arquivo for aberto para que o arquivo de Design Notes seja exibido sempre que o

arquivo for aberto.


6 Na aba Todas as informaes, clique no boto de adio (+) para adicionar um novo par chave/valor; selecione um

par e clique no boto de subtrao (-) para remov-lo. Por exemplo, voc pode nomear uma chave como Autor (na caixa Nome) e definir o valor como Heidi (na caixa Valor).
7 Clique em OK para salvar as notas.

O Dreamweaver salva as anotaes em uma pasta chamada _notes, no mesmo local do arquivo atual. O nome de arquivo o nome de arquivo do documento mais a extenso .mno. Por exemplo, caso o nome de arquivo seja index.html, o arquivo de Design Notes associado se chama index.html.mno.

Mais tpicos da Ajuda


Obteno e colocao de arquivos no servidor na pgina 81 Devolver e retirar arquivos em uma pasta remota na pgina 87

Trabalhar com Design Notes


Depois de associar uma Design Note a um arquivo, voc pode abri-la, alterar seu status ou exclu-la.

Abrir Design Notes associadas a um arquivo


Realize um dos seguintes procedimentos para abrir as Design Notes:

Abra o arquivo na janela Documento e, em seguida, selecione Arquivo > Design Notes. No painel Arquivos, clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada
(Macintosh) no arquivo e, em seguida, selecione Design Notes.

Na coluna Notas do painel Arquivos, clique duas vezes no cone amarelo Design Notes.
Nota: Para mostrar os cones amarelos Design Notes, selecione Site > Gerenciar sites > [nome do site] > Editar > Configuraes avanadas > Colunas de visualizao de arquivos. Selecione Notas no painel da lista e escolha a opo Mostrar. Quando voc clica no boto Expandir na barra de ferramentas Arquivos para mostrar o site local e o site remoto, uma coluna Notas no site local mostra um cone de nota amarelo para arquivos que tenham uma Design Note.

Atribuir um status de Design Notes personalizado


1 Abra Design Notes para um arquivo ou objeto (consulte o procedimento anterior). 2 Clique na aba Todas as informaes. 3 Clique no boto de adio (+). 4 No campo Nome, digite a palavra status. 5 No campo Valor, digite o status.

Caso o valor de status j exista, ele substitudo pelo novo.


6 Clique na aba Informaes bsicas e observe se o novo valor de status exibido no menu pop-up Status.

Nota: Voc s pode ter um valor personalizado no menu de status por vez. Caso voc realize esse procedimento novamente, o Dreamweaver substitui o valor de status que voc digitou inicialmente pelo novo valor de status que voc digitou.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 106


Criao e gerenciamento de arquivos

Excluir Design Notes no associadas do site


1 Selecione Site > Gerenciar sites. 2 Selecione o site e clique em Editar. 3 Na caixa de dilogo Definio de sites, selecione Design Notes na lista de categorias esquerda. 4 Clique no boto Limpar.

O Dreamweaver solicita a voc verificar se ele deve excluir todas as Design Notes que no esto mais associadas a um arquivo no site. Caso voc use o Dreamweaver para excluir um arquivo que tenha um arquivo de Design Notes associado, o Dreamweaver tambm exclui o arquivo de Design Notes. Dessa forma, normalmente s h arquivos de Design Notes rfos caso voc exclua ou renomeie um arquivo fora do Dreamweaver. Nota: Caso voc desmarque a opo Manter Design Notes antes de clicar em Limpar, o Dreamweaver exclui todos os arquivos de Design Notes do site .

Teste do site
Diretrizes de teste do site
Antes de carregar o site em um servidor e declar-lo pronto para visualizao, uma boa idia test-lo localmente. (Na verdade, uma boa idia testar e solucionar os problemas do site sempre em toda sua criao voc pode identificar problemas logo e evitar repeti-los.) Voc deve verificar se as pginas so exibidas e funcionam conforme esperado nos navegadores que voc deseja, se no h links desfeitos e se elas no demoram muito para serem baixadas. Voc tambm pode testar e solucionar problemas de todo o site executando um relatrio de site. As seguintes diretrizes ajudaro voc a criar uma boa experincia para os visitantes do site:
1. Verifique se as pginas funcionam nos navegadores que voc deseja.

As pginas devem ser legveis e funcionais em navegadores que no do suporte a estilos, camadas, plug-ins ou JavaScript. Em pginas que apresentam falhas em navegadores mais antigos, considere o uso do comportamento Verificar navegador para redirecionar automaticamente os visitantes para outra pgina.
2. Visualize as pginas em navegadores e plataformas diferentes.

Isso d a voc a oportunidade de ver as diferenas de layout, cor, tamanhos de fonte e tamanho da janela do navegador padro que no podem ser previstas em uma verificao do navegador de destino.
3. Verifique o site em busca de links desfeitos e os corrija.

Outros sites tambm passam por novos projetos e reorganizaes, e a pgina de link pode ter sido movida ou excluda. Voc pode executar um relatrio de verificao de link para testar os links.
4. Monitore o tamanho do arquivo das pginas e o tempo de download.

No se esquea de que se uma pgina consistir em uma tabela grande, em alguns navegadores, os visitantes no vero nada at a concluso do carregamento de toda a tabela. Considere dividir tabelas grandes; caso isso no seja possvel, considere colocar pouco contedo como uma mensagem de boas-vindas ou um banner publicitrio fora da tabela na parte superior da pgina para que os usurios possam ver esse material durante o download da tabela.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 107


Criao e gerenciamento de arquivos

5. Execute alguns relatrios de site para testar e solucionar problemas de todo o site.

Voc pode verificar todo o site em busca de problemas como, por exemplo, documentos sem ttulo, tags vazias e tags aninhadas redundantes.
6. Valide o cdigo para localizar erros de tag ou de sintaxe. 7. Atualize e mantenha o site aps a publicao.

A publicao do site ou seja, torn-lo dinmico pode ser realizada de vrias formas, sendo um processo contnuo. Uma parte importante do processo a definio e a implementao de um sistema de controle de verso, com as ferramentas do Dreamweaver ou por meio de um aplicativo de controle de verso externo.
8. Use os fruns de discusso.

Os fruns de discusso do Dreamweaver podem ser encontrados no site da Adobe em www.adobe.com/go/dreamweaver_newsgroup_br. Os fruns so um grande recurso para a obteno de informaes sobre diferentes navegadores, plataformas etc. Voc tambm aborda problemas tcnicos e compartilha dicas teis com outros usurios do Dreamweaver. Para assistir a um tutorial sobre a soluo de problemas de envio, consulte www.adobe.com/go/vid0164_br.

Mais tpicos da Ajuda


Corrigir links rompidos na pgina 285 Testar links no Dreamweaver na pgina 280 Aplicar o comportamento Verificar navegador na pgina 350 Validar tags na pgina 325 Verificar compatibilidade de navegador na pgina 325 Tutorial sobre a soluo de problemas de publicao

Usar relatrios para testar o site


Voc pode executar relatrios do site em atributos de HTML ou fluxo de trabalho. Voc tambm pode usar o comando Relatrios para verificar os links no site. Os relatrios de fluxo de trabalho podem melhorar a colaborao com membros de uma equipe da Web. Voc pode executar relatrios de fluxo de trabalho que exibem quem retirou um arquivo, quais arquivos esto associados a Design Notes e quais arquivos foram modificados recentemente. Voc pode refinar ainda mais os relatrios de Design Note especificando parmetros de nome/valor. Nota: Voc deve ter uma conexo de site remota definida para executar os relatrios de fluxo de trabalho. Os relatrios em HTML permitem que voc compile e gere relatrios para vrios atributos HTML. Voc pode verificar tags de fonte aninhadas combinveis, texto alternativo ausente, tags aninhadas redundantes, tags vazias removveis e documentos sem ttulo. Depois de executar um relatrio, voc pode salv-lo como um arquivo em XML e, em seguida, import-lo para uma ocorrncia de modelo ou banco de dados e planilha e imprimi-lo, ou exibi-lo em um site. Nota: Voc tambm pode adicionar tipos de relatrio diferentes ao Dreamweaver usando o site do Adobe Dreamweaver Exchange.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 108


Criao e gerenciamento de arquivos

Mais tpicos da Ajuda


Relatrios no Dreamweaver na pgina 20 Testar links no Dreamweaver na pgina 280 Adicionar e gerenciar extenses no Dreamweaver na pgina 35

Executar relatrios para testar um site


1 Selecione Site > Relatrios. 2 Selecione o que relatar no menu pop-up Relatrio sobre e defina todos os tipos de relatrio a serem executados

(fluxo de trabalho ou HTML). Voc no pode executar um relatrio Arquivos selecionados no site, a menos que voc tenha selecionado arquivos no painel Arquivos.
3 Caso voc tenha selecionado um relatrio de fluxo de trabalho, clique em Configuraes de relatrio. Do contrrio,

ignore a etapa. Nota: Caso tenha selecionado mais de um relatrio de fluxo de trabalho, voc precisa clicar no boto Configuraes de relatrio de cada relatrio. Selecione um relatrio, clique em Configuraes de relatrio e insira as configuraes; em seguida, repita o processo para todos os demais relatrios de fluxo de trabalho.
Retirado por Cria um relatrio listando todos os documentos retirados por um membro de equipe especfico. Digite o nome do membro de uma equipe e, em seguida, clique em OK para retornar caixa de dilogo Relatrios. Design Notes Cria um relatrio listando todas as Design Notes dos documentos selecionados ou do site. Digite um ou mais pares nome/valor e, em seguida, selecione os valores de comparao nos menus pop-up correspondentes. Clique em OK para retornar caixa de dilogo Relatrios. Modificado recentemente Cria um relatrio listando arquivos que foram alterados durante um tempo especfico. Insira faixas de datas e locais para os arquivos que voc deseja exibir.

4 Caso voc tenha selecionado um relatrio em HTML, selecione os seguintes relatrios:


Tags de fonte aninhadas combinveis Cria um relatrio que lista todas as tags de fonte aninhadas que podem ser

combinadas para limpar o cdigo. Por exemplo, <font color="#FF0000"><font size="4">STOP!</font></font> informado.
Texto alternativo ausente Cria um relatrio listando todas as tags img que no tm texto alternativo.

O texto alternativo aparece no lugar das imagens nos navegadores somente de texto ou nos navegadores que fazem download manual de imagens. Os leitores de tela indicam texto alternativo, e alguns navegadores exibem texto alternativo quando o usurio massa o mouse pela imagem.
Retirado por Cria um relatrio listando todos os documentos retirados por um membro de equipe especfico. Tags aninhadas redundantes Cria um relatrio detalhando tags aninhadas que devem ser limpas.

Por exemplo, <i> The rain <i> in</i> Spain stays mainly in the plain</i> relatado.
Tags vazias removveis Cria um relatrio detalhando todas as tags vazias que podem ser removidas para limpar o

cdigo HTML. Por exemplo, voc pode ter excludo um item ou imagem na Visualizao de cdigo, mas deixado as tags aplicadas ao item.
Documentos sem ttulo Cria um relatrio listando todos os documentos sem ttulo encontrados dentro dos

parmetros selecionados. O Dreamweaver informa todos os documentos com ttulos padro, ttulos duplicados ou tags de ttulo no encontradas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 109


Criao e gerenciamento de arquivos

5 Clique em Executar para criar o relatrio.

Dependendo do tipo de relatrio executado, voc pode ser solicitado a salvar o arquivo, definir o site ou selecionar uma pasta (caso voc ainda no tenha feito isso). Uma lista de resultados exibida no painel Relatrios do site (no grupo de painis Resultados).

Usar e salvar um relatrio


1 Execute um relatrio (consulte o procedimento anterior). 2 No painel Relatrios do site, realize um dos seguintes procedimentos para exibir o relatrio:

Clique no cabealho da coluna pelo qual voc classificar os resultados.


Voc pode classificar por nome de arquivo, nmero de linha ou descrio. Voc tambm pode executar vrios relatrios diferentes e mant-los abertos.

Selecione uma linha do relatrio e, em seguida, clique no boto Mais informaes esquerda do painel Relatrios
do site para obter uma descrio do problema. As informaes so exibidas no painel Referncia.

Clique duas vezes em uma linha no relatrio para exibir o cdigo correspondente na janela Documento.
Nota: Caso voc esteja na Visualizao de design, o Dreamweaver altera a exibio para dividi-la e mostrar o problema informado no cdigo.
3 Clique em Salvar relatrio para salvar o relatrio.

Ao salvar um relatrio, voc pode import-lo para um arquivo de modelo existente. Em seguida, voc pode importar o arquivo para um banco de dados ou planilha e imprimi-lo, ou use o arquivo para exibir o relatrio em um site. Depois de executar relatrios em HTML, use o comando Limpar HTML para corrigir todos os erros de HTML listados pelos relatrios.

ltima atualizao em 28/4/2010

110

Captulo 5: Gerenciamento de ativos e bibliotecas


Sobre os ativos e as bibliotecas
Sobre os ativos
possvel usar o Adobe Dreamweaver CS5 para controlar e visualizar os ativos do armazenados no site como, por exemplo, imagens, filmes, cores, scripts e links. Voc tambm pode arrastar diretamente um ativo para inseri-lo em uma pgina do documento atual. Voc obtm os ativos de vrias origens. Voc pode, por exemplo, criar ativos em um aplicativo como o Adobe Fireworks ou o Adobe Flash, receb-los de um colaborador ou copi-los de um CD com clip-arts ou de um site de grficos. O Dreamweaver tambm oferece acesso a dois tipos especiais de ativos: bibliotecas e ativos. Ambos so ativos vinculados: quando voc edita um item de biblioteca ou modelo, o Dreamweaver atualiza todos os documentos que usam esses ativos. Os itens de biblioteca geralmente representam pequenos ativos de design como, por exemplo, o logotipo de um site ou os direitos autorais. Para controlar uma rea de design maior, use um modelo.

Mais tpicos da Ajuda


Sobre os modelos do Dreamweaver na pgina 389

Sobre os itens de biblioteca


Uma biblioteca um arquivo especial do Dreamweaver que contm um conjunto de ativos individuais ou cpias de ativos que voc pode colocar nas pginas da Web. Os ativos de uma biblioteca so chamados de itens de biblioteca. Entre os itens que voc pode armazenar em uma biblioteca esto imagens, tabelas, sons e arquivos criados com o Adobe Flash. Voc pode atualizar automaticamente todas as pginas que usam um item de biblioteca sempre que voc edit-lo. Por exemplo, suponhamos que voc esteja criando um grande site para uma empresa que deseja que um slogan aparea em todas as pginas. Voc pode criar um item de biblioteca de forma que ele contenha o slogan e usar esse item em todas as pginas. Caso o slogan mude, voc pode alterar o item de biblioteca e atualizar, automaticamente, todas as pginas em que ele usado. O Dreamweaver armazena os itens de biblioteca em uma pasta Biblioteca dentro da pasta raiz local de cada site. Cada site tem sua prpria biblioteca. possvel criar um item de biblioteca usando qualquer elemento da seo body de um documento, inclusive textos, tabelas, formulrios, applets Java, plug-ins, elementos ActiveX, barras de navegao e imagens. No caso de itens vinculados como, por exemplo, imagens, a biblioteca armazena apenas uma referncia ao item. Para que o item de biblioteca funcione corretamente, o arquivo original deve permanecer no local especificado. Porm, ainda assim, talvez seja til armazenar uma imagem em um item de biblioteca. Por exemplo, voc poderia armazenar uma tag img completa em um item de biblioteca, o que permitiria alterar facilmente o texto alt da imagem, ou at mesmo seu atributo src, em todo o site. (Entretanto, no use essa tcnica para alterar os atributos width e height de uma imagem, a menos que voc use um editor de imagens para alterar o tamanho real da imagem.)

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 111


Gerenciamento de ativos e bibliotecas

Nota: Caso o item de biblioteca contenha links, eles podem no funcionar no novo site. Alm disso, as imagens em uma biblioteca no so copiadas para o novo site. Quando voc usa um item de biblioteca, o Dreamweaver insere um link para ele, e no o prprio item, na pgina da Web. Ou seja, o Dreamweaver insere uma cpia do cdigo-fonte HTML do item no documento e adiciona um comentrio em HTML contendo uma referncia para o item original, externo. essa referncia externa que possibilita a atualizao automtica. Quando voc cria um item de biblioteca que inclui um elemento com um comportamento do Dreamweaver relacionado, o Dreamweaver copia o elemento e seu identificador de evento (o atributo que especifica o evento que dispara a ao como, por exemplo, onClick, onLoad ou onMouseOver e a ao a ser chamada quando o evento ocorre) para o arquivo do item de biblioteca. O Dreamweaver no copia as funes JavaScript associadas para o item de biblioteca. Na verdade, quando voc insere o item de biblioteca em um documento, o Dreamweaver insere automaticamente as funes JavaScript apropriadas na seo head do documento (caso elas ainda no estejam l). Nota: Caso codifique manualmente o JavaScript (ou seja, o crie usando os comportamentos do Dreamweaver), voc pode fazer dele parte de um item de biblioteca se estiver usando o comportamento Chamar JavaScript para executar o cdigo. Caso voc no use um comportamento do Dreamweaver para executar o cdigo, este no mantido como parte do item de biblioteca. H requisitos especiais para a edio dos comportamentos em itens de biblioteca. Os itens de biblioteca no podem conter folhas de estilos porque o cdigo desses elementos faz parte da seo head.

Mais tpicos da Ajuda


Editar um comportamento em um item de biblioteca na pgina 121

Trabalho com ativos


Viso geral do painel Ativos
Use o painel Ativos (Janela > Ativos) para gerenciar ativos do site atual. O painel Ativos exibe os ativos do site associado ao documento ativo na janela Documento. Nota: Para poder exibir os ativos no painel Ativos, voc deve definir um site local.

Painel Ativos com a lista de sites sendo exibida. Os cones de categoria esto esquerda, e a rea de visualizao est acima da lista.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 112


Gerenciamento de ativos e bibliotecas

O painel Ativos oferece duas formas de exibir ativos:


Lista de sites Mostra todos os ativos do site, inclusive as cores e os URLs usados em qualquer documento do site. Lista Favoritos Mostra apenas os ativos que voc escolheu explicitamente.

Para alternar essas duas exibies, selecione um dos botes de opo Site ou Favoritos acima da rea de visualizao. (Essas duas exibies no esto disponveis para as categorias Modelos e Biblioteca.) Nota: Grande parte das operaes do painel Ativos funciona da mesma forma em ambas as listas. No entanto, h algumas tarefas que voc s consegue executar na lista Favoritos. Nas duas listas, os ativos so classificados de acordo com uma das seguintes categorias:
Imagens Cores URLs

Arquivos de imagem nos formatos GIF, JPEG ou PNG. Cores usadas em documentos e folhas de estilos, inclusive cores de textos, fundos e links.

Links externos nos documentos do site atual, inclusive links para FTP, gopher, HTTP, HTTPS, JavaScript, email (mailto) e arquivo local (file://). Arquivos em qualquer verso do Adobe Flash. O painel Ativos exibe somente arquivos SWF (arquivos compactados criados com Flash) e no arquivos FLA (origem Flash). Arquivos em qualquer verso do Adobe Shockwave. Arquivos QuickTime ou MPEG.

Flash

Shockwave Filmes Scripts

Arquivos JavaScript ou VBScript. Scripts em arquivos HTML (ao contrrio de arquivos JavaScript ou VBScript independentes) no so exibidos no painel Ativos.

Modelos Layouts de pgina mestre usados em vrias pginas. Modificar um modelo modifica automaticamente todas as pginas vinculadas a ele. Itens de biblioteca

Elementos de design que voc usa em vrias pginas; quando voc modifica um item de biblioteca, todas as pginas que contm esse item so atualizadas. Nota: Para que seja exibido no painel Ativos, um arquivo deve estar classificado de acordo com uma dessas categorias. s vezes, alguns outros tipos de arquivo so chamados de ativos, embora no sejam mostrados no painel. Por padro, os ativos em uma categoria so listados em ordem alfabtica pelo nome, embora seja possvel orden-los por tipo e vrios outros critrios. Voc tambm pode visualizar os ativos e redimensionar as colunas e a rea de visualizao.

Mais tpicos da Ajuda


Criao e gerenciamento de uma lista dos ativos favoritos na pgina 116 Trabalho com itens de biblioteca na pgina 118

Exibir um ativo na rea de visualizao


Selecione o ativo no painel Ativos.

Por exemplo, quando voc seleciona um ativo de filme, a rea de visualizao mostra um cone. Para exibir o filme, clique no boto Executar (o tringulo verde) no canto superior direito da rea de visualizao.

Exibir ativos de uma categoria


Clique no cone de uma categoria no lado esquerdo do painel Ativos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 113


Gerenciamento de ativos e bibliotecas

Ordenar ativos
Clique no cabealho de uma coluna.

Por exemplo, para ordenar a lista de imagens por tipo (de forma que todas as imagens GIF permaneam juntas, assim como todas as imagens JPEG e assim por diante), clique no cabealho de coluna Tipo.

Redimensionar uma coluna


Arraste a linha que separa os dois cabealhos da coluna.

Redimensionar a rea de visualizao


Arraste a barra separadora (entre a rea de visualizao e a lista de ativos) para cima ou para baixo.

Atualizar o painel Ativos


A criao da lista de sites pode demorar alguns segundos porque o Dreamweaver precisa ler o cache do site primeiro. Determinadas alteraes no so exibidas imediatamente no painel Ativos. Por exemplo, quando voc adicionar ou remover um ativo do site, as alteraes no sero exibidas no painel Ativos at que voc atualize a lista de sites clicando no boto Atualizar lista de sites. Caso adicione ou remova um ativo fora do Dreamweaver usando o Windows Explorer ou o Localizador, por exemplo, voc deve recriar o cache do site para atualizar o painel Ativos. Quando voc remove a nica ocorrncia de uma determinada cor ou URL do site, ou salva um novo arquivo contendo uma cor ou um URL que ainda no foi usado no site, as alteraes no so exibidas no painel Ativos at que voc atualize a lista de sites.

Para atualizar manualmente a lista de sites, clique no boto Atualizar lista de sites
do site ou o atualiza conforme o necessrio.

. O Dreamweaver cria o cache

Para atualizar a lista de sites e recriar manualmente o cache do site, clique com o boto direito do mouse (Windows)
ou clique mantendo a tecla command pressionada (Macintosh) na lista Ativos e selecione Atualizar lista de sites.

Adicionar um ativo a um documento


Voc pode inserir grande parte dos ativos em um documento arrastando-os para a Visualizao de cdigo ou de design na janela Documento ou usando o boto Inserir no painel. Voc pode inserir cores e URLs ou aplic-los ao texto selecionado na Visualizao de design. (Os URLs tambm podem ser aplicados a outros elementos na Visualizao de design como, por exemplo, imagens.)
1 Na Visualizao de design, coloque o ponto de insero onde voc deseja que o ativo seja exibido. 2 No painel Ativos, selecione um dos botes da categoria do ativo esquerda.

Nota: Selecione qualquer categoria exceto Modelos. Um modelo aplicado a um documento inteiro, no podendo ser inserido em um documento.
3 Selecione Site ou Favoritos na parte superior do painel e, em seguida, o ativo.

No h nenhuma lista de sites ou Favoritos para itens de biblioteca. Ignore esta etapa caso voc esteja inserindo um item de biblioteca.
4 Siga um destes procedimentos:

Arraste o ativo do painel para o documento.


Voc pode arrastar scripts para a rea de contedo do cabealho na janela Documento. Caso essa rea no esteja visvel, selecione Exibir > Contedo do cabealho.

Selecione o ativo no painel e clique em Inserir.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 114


Gerenciamento de ativos e bibliotecas

Caso o ativo inserido seja uma cor, ela se aplica ao texto exibido do ponto de insero em diante.

Aplicar uma cor ao texto usando o painel Ativos


O painel Ativos mostra as cores que voc j aplicou a vrios elementos como, por exemplo, textos, bordas de tabela, fundos etc.
1 Selecione o texto no documento. 2 No painel Ativos, selecione a categoria Cores 3 Selecione a cor desejada e clique em Aplicar.

Mais tpicos da Ajuda


Adicionar ou remover ativos favoritos na pgina 116

Aplicar um URL a uma imagem ou a um texto usando o painel Ativos


1 Selecione o texto ou a imagem. 2 No painel Ativos, selecione a categoria URLs

na visualizao Sites ou Favoritos, dependendo de onde o URL

est armazenado. Nota: Por padro, os URLs dos arquivos do site so armazenadas na visualizao Sites. A visualizao Favoritos mantm os URLs que voc mesmo adicionou.
3 Selecione o URL. 4 Siga um destes procedimentos:

Arraste o URL do painel para a seleo na Visualizao de design. Selecione o URL e clique em Inserir.

Selecionar e editar ativos


O painel Ativos permite selecionar vrios ativos simultaneamente. Ele tambm oferece uma maneira rpida de comear a edio dos ativos.

Mais tpicos da Ajuda


Iniciar um editor externo para arquivos de mdia na pgina 258

Selecionar vrios ativos


1 No painel Ativos, selecione um ativo. 2 Selecione os demais ativos de uma das seguintes formas:

Clique com a tecla Shift pressionada para selecionar uma srie de ativos consecutivos. Clique mantendo a tecla control (Windows) ou a tecla command pressionada (Macintosh) para adicionar um ativo
individual seleo (independentemente de sua proximidade em relao seleo existente). Clique mantendo a tecla control ou a tecla command pressionada em um ativo selecionado para desfazer a seleo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 115


Gerenciamento de ativos e bibliotecas

Editar um ativo
Quando voc edita um ativo no painel Ativos, o comportamento varia de acordo com o tipo de ativo. Para alguns ativos como, por exemplo, as imagens voc usa um editor externo, aberto automaticamente caso voc tenha definido um para esse tipo de ativo. Voc pode editar cores e URLs somente na lista Favoritos. Ao editar modelos e itens de biblioteca, voc faz as alteraes dentro do Dreamweaver.
1 No painel Ativos, siga um destes procedimentos:

Clique duas vezes no ativo. Selecione o ativo e clique no boto Editar


. Nota: Caso o ativo deva ser editado em um editor externo e nenhum seja aberto automaticamente, selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh), escolha a categoria Tipos de arquivos/editores e verifique se voc definiu um editor externo para esse tipo de ativo.
2 Faa as alteraes. 3 Ao terminar, execute um destes procedimentos:

Caso o ativo esteja baseado em arquivo (outro que no seja uma cor ou URL), salve-o (no editor) e feche-o. Caso o ativo seja um URL, na caixa de dilogo Editar URL clique em OK.
Nota: Caso o ativo seja uma cor, o seletor de cores fechado automaticamente depois que voc seleciona uma cor. Para ignorar o seletor de cores sem escolher uma cor, pressione Esc.

Reutilizar ativos em outro site


O painel Ativos mostra todos os ativos (de tipos reconhecidos) do site atual. Para usar um ativo do site atual em outro, voc deve copi-lo para o outro site. Voc pode copiar um ativo individual, um conjunto de ativos individuais ou uma pasta Favoritos inteira de uma s vez. Talvez voc precise localizar o arquivo no painel Arquivos que corresponde a um ativo no painel Ativos antes de transferir o ativo de ou para o site remoto. Nota: O painel Arquivos pode mostrar um site diferente do mostrado no painel Ativos. Isso porque o painel Ativos est associado ao documento ativo.

Localizar um arquivo de ativo no painel Arquivos


1 No painel Ativos, selecione a categoria do ativo que voc deseja localizar. 2 Clique com o boto direito do mouse (Windows) ou clique mantendo a tecla control pressionada (Macintosh) no

nome ou no cone do ativo no painel Ativos e selecione Localizar no site no menu de contexto. Nota: Localizar no site est indisponvel para cores e URLs, que no correspondem aos arquivos do site. O painel Arquivos aberto com o arquivo de ativo selecionado. O comando Localizar no site localiza o arquivo correspondente ao prprio ativo, e no arquivos que usam esse ativo.

Copiar ativos do painel Ativo para outro site


1 No painel Ativos, selecione a categoria do ativo que voc deseja copiar. 2 Clique com o boto direito do mouse (Windows) ou clique mantendo a tecla control pressionada (Macintosh) em

um ou mais ativos na lista de sites ou Favoritos, selecione Copiar para site e escolha o nome do site de destino no submenu que lista todos os sites definidos por voc. Nota: Na lista Favoritos, possvel copiar uma pasta Favoritos, bem como ativos individuais.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 116


Gerenciamento de ativos e bibliotecas

Os ativos so copiados para os locais correspondentes no site de destino. O Dreamweaver cria novas pastas na hierarquia do site de destino conforme necessrio. Os ativos tambm so adicionados lista Favoritos do site de destino. Nota: Caso o ativo que voc copiou seja uma cor ou um URL, ele exibido apenas na lista Favoritos do site de destino. Como as cores e os URLs no correspondem aos arquivos, no h nenhum arquivo a ser copiado para o outro site.

Criao e gerenciamento de uma lista dos ativos favoritos


Gerenciamento dos ativos favoritos
A lista completa de todos os ativos reconhecidos pode se tornar um problema em alguns sites grandes. Voc pode adicionar os ativos mais usados a uma lista Favoritos, agrupar ativos relacionados, dar a eles apelidos que o lembrem de suas funes e localiz-los facilmente no painel Ativos. Nota: Os ativos favoritos no so armazenados como arquivos separados no disco. Eles so referncias para os ativos da lista de sites. O Dreamweaver controla quais ativos da lista de sites devem ser exibidos na lista Favoritos. A maioria das operaes do painel Ativos a mesma na lista Favoritos e na lista de sites. No entanto, h vrias tarefas que voc s consegue executar na lista Favoritos.

Adicionar ou remover ativos favoritos


H vrias formas de adicionar ativos lista Favoritos do site no painel Ativos. A adio de uma cor ou um URL lista Favoritos exige uma etapa extra. Voc no pode adicionar novas cores ou URLs lista de sites; a lista de sites contm apenas os ativos que j esto em uso no site. Nota: No h nenhuma lista Favoritos para modelos e itens de biblioteca.

Mais tpicos da Ajuda


Viso geral do painel Ativos na pgina 111 Usar o seletor de cores na pgina 215

Adicionar ativos lista Favoritos


Siga um destes procedimentos:

Selecione um ou mais ativos na lista de sites do painel Ativos e clique no boto Adicionar a favoritos
clique mantendo a tecla control pressionada (Macintosh) e selecione Adicionar a favoritos.

Selecione um ou mais ativos na lista de sites do painel Ativos, clique com o boto direito do mouse (Windows) ou Selecione um ou mais arquivos no painel Arquivos, clique com o boto direito do mouse (Windows) ou clique
mantendo a tecla control pressionada (Macintosh) e selecione Adicionar a favoritos. O Dreamweaver ignora os arquivos que no correspondam a uma categoria do painel Ativos.

Clique com o boto direito do mouse (Windows) ou clique mantendo a tecla control pressionada (Macintosh) em
um elemento na Visualizao de design da janela Documento e selecione o comando do menu de contexto para adicionar o elemento a uma categoria Favoritos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 117


Gerenciamento de ativos e bibliotecas

O menu de contexto do texto contm Adicionar a cores favoritas ou Adicionar aos URLs favoritos, dependendo da existncia de um link anexado ao texto. Voc pode adicionar somente elementos que correspondam a uma das categorias no painel Ativos.

Adicionar uma nova cor ou URL lista Favoritos


1 No painel Ativos, selecione a categoria Cores ou URLs. 2 Selecione a opo Favoritos na parte superior do painel. 3 Clique no boto Nova cor ou Novo URL 4 Siga um destes procedimentos:

Selecione uma cor usando o seletor de cores e, se desejado, d a ela um apelido.


Para fechar o seletor de cores sem escolher uma cor, pressione Esc ou clique na barra cinza na parte superior do seletor.

Digite um URL e um apelido na caixa de dilogo Adicionar novo URL e clique em OK.

Remover ativos da lista Favoritos


1 No painel Ativos, selecione a opo Favoritos na parte superior do painel. 2 Selecione um ou mais ativos (ou uma pasta) na lista Favoritos. 3 Clique no boto Remover de Favoritos

Os ativos so removidos da lista Favoritos, e no da lista de sites. Caso voc remova uma pasta Favoritos, ela e todo seu contedo so removidos.

Criar um apelido para um ativo favorito


Voc pode dar apelidos (por exemplo, PageBackgroundColor, e no #999900) somente a ativos na lista Favoritos. A lista de sites mantm os nomes de arquivo reais (ou valores, no caso de cores e URLs).
1 No painel Ativos (Janela > Ativos), selecione a categoria que contm o ativo. 2 Selecione a opo Favoritos na parte superior do painel. 3 Siga um destes procedimentos:

Clique com o boto direito do mouse (Windows) ou clique mantendo a tecla control pressionada (Macintosh) no
nome ou no cone do ativo no painel Ativos e selecione Editar apelido.

Clique no nome do ativo uma vez, faa uma pausa e clique nele novamente. (No clique duas vezes. Isso abre o item
para edio.)
4 Digite o apelido do ativo e pressione Enter (Windows) ou Return (Macintosh).

Mais tpicos da Ajuda


Viso geral do painel Ativos na pgina 111

Agrupar ativos em uma pasta Favoritos


Colocar um ativo na pasta Favoritos no altera o local do arquivo do ativo no disco.
1 No painel Ativos, selecione a opo Favoritos na parte superior do painel. 2 Clique no boto Nova pasta Favoritos

3 Digite um nome para a pasta e pressione Enter (Windows) ou Return (Macintosh).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 118


Gerenciamento de ativos e bibliotecas

4 Arraste ativos para a pasta.

Trabalho com itens de biblioteca


Criar um item de biblioteca
Itens de biblioteca so elementos que voc deseja reutilizar ou atualizar freqentemente em todo o site.

Mais tpicos da Ajuda


Sobre os itens de biblioteca na pgina 110

Criar um item de biblioteca com base em uma seleo


1 Na janela Documento, selecione uma parte de um documento a ser salva como um item de biblioteca. 2 Siga um destes procedimentos:

Arraste a seleo para a categoria Biblioteca Clique no boto Novo item de biblioteca

. na parte inferior da categoria Biblioteca.

Selecione Modificar > Biblioteca > Adicionar objeto biblioteca.


3 Digite um nome para o novo item de biblioteca e pressione Enter (Windows) ou Return (Macintosh).

O Dreamweaver salva cada um dos itens de biblioteca como um arquivo separado (com a extenso .lbi) na pasta Biblioteca da pasta raiz local do site.

Criar um item de biblioteca vazia


1 Verifique se no h nada selecionado na janela Documento.

Se algo estiver selecionado, ele ser colocado no novo item de biblioteca.


2 No painel Ativos, selecione a categoria Biblioteca 3 Clique no boto Novo item de biblioteca

na parte inferior do painel.

4 Ainda com o item selecionado, digite um nome para ele e pressione Enter (Windows) ou Return (Macintosh).

Inserir um item de biblioteca em um documento


Quando voc adiciona um item de biblioteca a uma pgina, o contedo real inserido no documento com uma referncia para o item de biblioteca.
1 Coloque o ponto de insero na janela Documento. 2 No painel Ativos, selecione a categoria Biblioteca 3 Siga um destes procedimentos:

Arraste um item de biblioteca do painel Ativos para a janela Documento.


Para inserir o contedo de um item de biblioteca sem incluir uma referncia para ele no documento, pressione Control (Windows) ou Option (Macintosh) enquanto estiver arrastando um item para fora do painel Ativos. Se inserir um item dessa forma, voc poder editar o item no documento, mas ele no ser atualizado quando voc atualizar as pginas que usam esse item de biblioteca.

Selecione um item de biblioteca e clique em Inserir.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 119


Gerenciamento de ativos e bibliotecas

Editar itens de biblioteca e atualizar documentos


Ao editar um item de biblioteca, voc pode atualizar todos os documentos que usam esse item. Caso voc opte por no atualizar, os documentos permanecem associados ao item de biblioteca; possvel atualiz-los posteriormente. Voc pode renomear os itens para quebrar a conexo com documentos ou modelos, excluir itens da biblioteca do site e recriar um item de biblioteca ausente. Nota: O painel Estilos CSS permanece indisponvel enquanto voc edita um item de biblioteca porque os itens de biblioteca s podem conter elementos body, e o cdigo da folha de estilos em cascata (CSS) inserido na seo head de um documento. A caixa de dilogo Propriedades da pgina tambm est indisponvel porque um item de biblioteca no pode incluir uma tag body ou seus atributos.

Editar um item de biblioteca


1 No painel Ativos, selecione a categoria Biblioteca 2 Selecione um item de biblioteca. 3 Clique no boto Editar

ou clique duas vezes no item de biblioteca.

O Dreamweaver abre uma nova janela, semelhante janela Documento, para edio do item de biblioteca. O fundo cinza indica que voc est editando um item de biblioteca, e no um documento.
4 Faa e salve as alteraes. 5 Especifique se voc deseja atualizar os documentos no site local que usam o item de biblioteca. Selecione Atualizar

para atualizar imediatamente. Se voc selecionar No atualizar, os documentos no sero atualizados at que voc escolha Modificar > Biblioteca > Atualizar esta pgina ou Atualizar pginas.

Atualizar o documento atual para usar a verso atual de todos os itens de biblioteca
Selecione Modificar > Biblioteca > Atualizar esta pgina.

Atualizar todo o site ou todos os documentos que usam um determinado item de biblioteca
1 Selecione Modificar > Biblioteca > Atualizar pginas. 2 No menu pop-up Pesquisar, especifique o que voc deseja atualizar:

Para atualizar todas as pginas no site selecionado de forma a usar a verso atual de todos os itens de biblioteca,
selecione Site inteiro e, em seguida, o nome do site no menu pop-up adjacente.

Para atualizar todas as pginas do site atual que usam o item de biblioteca, selecione Arquivos que usam e, em
seguida, o nome de um item de biblioteca no menu pop-up adjacente.
3 Verifique se Itens de biblioteca est selecionado na opo Atualizar.

Para atualizar os modelos simultaneamente, tambm selecione Modelos.


4 Clique em Iniciar.

O Dreamweaver atualiza os arquivos conforme indicado. Caso voc tenha selecionado a opo Mostrar registro, o Dreamweaver gera um relatrio mostrando se os arquivos foram atualizados com xito, alm das demais informaes.

Renomear um item de biblioteca


1 No painel Ativos, selecione a categoria Biblioteca

2 Selecione o item de biblioteca, faa uma pausa e clique nele novamente. (No clique duas vezes. Isso abre o item

para edio.)

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 120


Gerenciamento de ativos e bibliotecas

3 Digite um novo nome. 4 Clique em qualquer outro lugar ou pressione Enter (Windows) ou Return (Macintosh). 5 Especifique se voc deseja atualizar documentos que usam o item escolhendo Atualizar ou No atualizar.

Excluir um item de uma biblioteca


Quando voc exclui um item de biblioteca, o Dreamweaver o remove da biblioteca, embora no altere o contedo de nenhum documento que usa o item.
1 No painel Ativos, selecione a categoria Biblioteca 2 Selecione o item de biblioteca. 3 Clique no boto Excluir ou pressione a tecla Delete e confirme se voc deseja excluir o item.

Importante: Caso exclua um item de biblioteca, voc no pode usar Desfazer para recuper-lo. No entanto, talvez voc consiga recri-lo.

Recriar um item de biblioteca ausente ou excludo


1 Selecione uma ocorrncia do item em um dos documentos. 2 Clique no boto Recriar no Inspetor de propriedades (Janela > Propriedades).

Personalizar o realce dos itens de biblioteca


Voc pode personalizar a cor de realce dos itens de biblioteca e mostrar ou ocultar o realce configurando as preferncias de realce.

Mais tpicos da Ajuda


Usar o seletor de cores na pgina 215

Alterar a cor de realce dos itens de biblioteca


1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione a categoria Realce na lista esquerda da caixa de dilogo Preferncias. 3 Clique na caixa de cores Itens de biblioteca e selecione uma cor de realce usando o seletor de cores (ou digite o valor

da cor hexadecimal na caixa de texto).


4 Selecione Mostrar para exibir a cor de realce na janela Documento. 5 Clique em OK.

Mostrar ou ocultar o realce na janela Documento


Para mostrar o realce, selecione Exibir > Auxlios visuais > Elementos invisveis. Para ocultar o realce, desmarque

a seleo de Elementos invisveis.

Editar as propriedades de um item de biblioteca


possvel usar o Inspetor de propriedades para abrir um item de biblioteca para edio, desanexar um item de biblioteca selecionado do arquivo de origem ou sobregravar um item com o item de biblioteca selecionado atualmente.
1 Selecione um item de biblioteca em um documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 121


Gerenciamento de ativos e bibliotecas

2 Selecione uma destas opes no Inspetor de propriedades (Janela > Propriedades):


Origem Exibe o nome de arquivo e o local do arquivo de origem do item de biblioteca. Voc no pode editar essas

informaes.
Aberto Abre o arquivo de origem do item de biblioteca para edio. Isso o equivalente seleo do item no painel

Ativos e ao clique no boto Editar.


Separar do original Rompe o link entre o item de biblioteca selecionado e seu arquivo de origem. Voc pode editar o

item desanexado no documento, embora ele no seja mais um item de biblioteca e no seja atualizado quando voc altera o original.
Recriar Sobregrava o item de biblioteca original com a seleo atual. Use essa opo para recriar itens de biblioteca caso o item original esteja ausente ou tenha sido excludo acidentalmente.

Tornar itens de biblioteca editveis em um documento


Caso tenha adicionado um item de biblioteca ao documento e queira edit-lo especificamente para a pgina, voc deve romper o link dentre o item no documento e a biblioteca. Assim que voc tornar uma ocorrncia de um item de biblioteca editvel, essa ocorrncia no ser atualizada quando o item for alterado.
1 Selecione um item de biblioteca no documento atual. 2 Clique em Separar do original no Inspetor de propriedades (Janela > Propriedades).

Editar um comportamento em um item de biblioteca


Para editar um comportamento em um item de biblioteca, voc deve inicialmente inserir o item em um documento e torn-lo editvel nesse documento. Depois de fazer as alteraes, voc pode recriar o item de biblioteca, substituindo o item da biblioteca pelo item editado no documento.
1 Abra um documento que contenha o item de biblioteca.

Observe o nome do item de biblioteca, bem como as tags exatas que ele contm. Voc precisar dessas informaes mais tarde.
2 Selecione o item de biblioteca e clique em Separar do original no Inspetor de propriedades (Janela > Propriedades). 3 Selecione o elemento que apresenta o comportamento anexado a ele. 4 No painel Comportamentos (Janela > Comportamentos), clique duas vezes na ao que voc deseja alterar. 5 Na caixa de dilogo exibida, faa as alteraes e clique em OK. 6 No painel Ativos, selecione a categoria Biblioteca

7 Anote o nome exato e o uso de maisculas e minsculas do item de biblioteca original, selecione-o e clique no boto

Excluir.
8 Na janela Documento, selecione todos os elementos que formam o item de biblioteca.

Tome cuidado para selecionar exatamente os mesmos elementos que estavam no item de biblioteca original.
9 No painel Ativos, clique no boto Novo item de biblioteca

e d ao novo item o mesmo nome do item excludo com a mesma grafia, respeitando o uso de maisculas e minsculas. Atualizar pginas.

10 Para atualizar o item de biblioteca nos demais documentos do site, selecione Modificar > Biblioteca > 11 No menu pop-up Pesquisar, selecione Arquivos que usam. 12 No menu pop-up prximo, selecione o nome do item de biblioteca que voc criou h pouco.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 122


Gerenciamento de ativos e bibliotecas

13 Na opo Atualizar, verifique se Itens de biblioteca est selecionado e clique em Iniciar. 14 Quando as atualizaes estiverem concludas, clique em Fechar.

Mais tpicos da Ajuda


Uso de comportamentos JavaScript na pgina 334

ltima atualizao em 28/4/2010

123

Captulo 6: Criao de pginas com CSS


Introduo s folhas de estilos em cascata
Sobre as folhas de estilos em cascata
As folhas de estilos em cascata (CSS) so um conjunto de regras de formatao que controlam a aparncia do contedo em uma pgina da Web. O uso de estilos CSS para formatar uma pgina separa o contedo da apresentao. O contedo da pgina o cdigo HTML reside no arquivo HTML, e as regras CSS que definem a apresentao do cdigo residem em outro arquivo (uma folha de estilos externa) ou em outra parte do documento HTML (geralmente a seo de cabealho). A separao do contedo da apresentao torna mais fcil a manuteno da aparncia do site em um local central, pois voc no precisa atualizar cada propriedade em cada pgina sempre que necessrio fazer uma alterao. Isso tambm torna o cdigo HTML mais simples e limpo, diminuindo o tempo de carregamento do navegador e simplificando a navegao para as pessoas com problemas de acesso (por exemplo, aquelas que usam leitores de tela). A CSS oferece excelente flexibilidade e controle sobre a aparncia exata da pgina. Com a CSS, voc pode controlar vrias propriedades de texto, como fontes e tamanhos de fonte especficos; negrito, itlico, sublinhado e sombras de texto; cor de texto e cor de fundo; cor e sublinhado de link; e muito mais. Usando a CSS para controlar as fontes, voc tambm pode garantir um tratamento mais consistente do layout e da aparncia da pgina em vrios navegadores. Alm da formatao do texto, voc pode usar a CSS para controlar o formato e o posicionamento dos elementos em nvel de bloco em uma pgina da Web. Um elemento em nvel de bloco uma parte independente do contedo, geralmente separado por uma nova linha no cdigo HTML e formatado visualmente como um bloco. Por exemplo, as tags h1, p e div produzem elementos em nvel de bloco em uma pgina da Web. Voc pode definir as margens e bordas de elementos em nvel de bloco, posicion-los em um local especfico, adicionar uma cor de fundo a eles, flutuar texto em volta deles etc. A manipulao dos elementos em nvel de bloco basicamente a maneira como voc cria o layout das pginas com a CSS. Para assistir a um tutorial de introduo s folhas de estilos em cascata, consulte www.adobe.com/go/vid0152_br.

Mais tpicos da Ajuda


Trabalho com tags div na pgina 156 Layout das pginas com CSS na pgina 150 Tutorial de introduo CSS

Sobre as regras CSS


A regra de formatao CSS consiste em duas partes: o seletor e a declarao (ou, na maioria dos casos, em um bloco de declaraes). O seletor um termo (como p, h1,um nome de classe ou uma ID) que identifica o elemento formatado e o bloco de declaraes define o que so as propriedades de estilo. No exemplo a seguir, h1 o seletor e tudo o que estiver entre chaves ({}) o bloco de declaraes:
h1 { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; }

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 124


Criao de pginas com CSS

Uma declarao individual consiste em duas partes: a propriedade (como font-family) e o valor (como Helvetica). Na regra CSS anterior, um determinado estilo foi criado para as tags h1: o texto de todas as tags h1 vinculadas a esse estilo ter 16 pixels de tamanho, a fonte Helvetica e ser negrito. O estilo (que proveniente de uma regra ou de um conjunto de regras) reside em um lugar separado do texto real que ele est formatando, geralmente em uma folha de estilos externa ou na parte de cabealho de um documento HTML. Desse modo, uma regra para as tags h1 pode se aplicar a vrias tags simultaneamente (e, no caso das folhas de estilos externas, a regra pode se aplicar a vrias tags simultaneamente em vrias pginas diferentes). Assim, a CSS oferece recursos de atualizao extremamente fceis. Quando voc atualizar uma regra CSS em um lugar, a formatao de todos os elementos que usam o estilo definido sero automaticamente atualizados para o novo estilo.

Voc pode definir os seguintes tipos de estilos no Dreamweaver:

Os estilos de classe permitem que voc aplique as propriedades de estilo a qualquer elemento na pgina. Os estilos de tag HTML redefine a formatao de uma tag especfica, como h1. Quando voc criar ou alterar um
estilo CSS para a tag h1, todo o texto formatado com a tag h1 imediatamente atualizado.

Os estilos avanados redefinem a formatao de uma determinada combinao de elementos ou de outras formas
de seletor conforme permitido pela CSS (por exemplo, o seletor td h2 se aplica sempre que um cabealho h2 aparece em uma clula de tabela.) Os estilos avanados tambm podem redefinir a formatao das tags que contm um atributo id especfico (por exemplo, os estilos definidos por #myStyle se aplicam a todas as tags que contm o par atributo/valor id="myStyle"). As regras CSS podem residir nos seguintes locais:
Folhas de estilos CSS externas Conjuntos de regras CSS armazenadas em um arquivo CSS (.css) externo separado (e no em um arquivo HTML). Esse arquivo vinculado a uma ou mais pginas de um site usando um link ou uma regra @import na seo de cabealho de um documento. Folhas de estilos CSS internas (ou incorporadas) Conjuntos de regras CSS includas em uma tag style na parte de

cabealho de um documento HTML.


Estilos inline Definidas em ocorrncias especficas de tags em um documento HTML. (No recomendvel o uso de

Estilos inline.)

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 125


Criao de pginas com CSS

O Dreamweaver reconhece os estilos definidos nos documentos existentes, contanto que eles estejam em conformidade com as diretrizes do estilo CSS. O Dreamweaver tambm processa a maioria dos estilos aplicados diretamente na Visualizao de design. (A visualizao do documento em uma janela de navegador, no entanto, proporciona a voc o processamento de pgina ao vivo mais preciso.) Alguns estilos CSS so processados de forma diferente no Microsoft Internet Explorer, Netscape, Opera, Apple Safari ou outros navegadores, enquanto outros estilos no so compatveis com nenhum navegador. Para exibir o guia de referncia de CSS da OReilly includo com o Dreamweaver, selecione Ajuda > Referncia e selecione Referncia de CSS da OReilly no menu pop-up no painel Referncia.

Mais tpicos da Ajuda


Aplicao, remoo ou renomeao de estilos de classe na pgina 140

Sobre os estilos em cascata


O termo em cascata se refere maneira como um navegador exibe os estilos de elementos especficos em uma pgina da Web. Trs fontes diferentes so responsveis pelos estilos que voc v em uma pgina da Web: a folha de estilos criada pelo autor da pgina, as selees de estilo personalizadas do usurio (se houver alguma) e os estilos padro do prprio navegador. Os tpicos anteriores descrevem como criar estilos para uma pgina da Web como o autor da pgina da Web e da folha de estilos anexada a essa pgina. Mas os navegadores tambm tm suas prprias folhas de estilos padro que regem o processamento das pginas da Web e, alm disso, os usurios podem personalizar seus navegadores fazendo selees que ajustam a exibio das pginas. A aparncia final de uma pgina da Web o resultado das regras de todas essas fontes juntas (ou em cascata) para processar a pgina da Web de uma maneira ideal. Uma tag comum a tag de pargrafo ou a tag <p> ilustra o conceito. Por padro, os navegadores vm com folhas de estilos que definem a fonte e o tamanho de fonte do texto do pargrafo (ou seja, o texto que aparece entre as tags <p> no cdigo HTML). No Internet Explorer, por exemplo, todo o texto do corpo, incluindo o texto do pargrafo, exibido na fonte Times New Roman mdia, por padro. Como autor de uma pgina da Web, no entanto, voc pode criar uma folha de estilos que substitua o estilo padro de fonte de pargrafo e tamanho de fonte do navegador. Por exemplo, voc pode criar a seguinte regra na folha de estilos:
p { font-family: Arial; font-size: small; }

Quando um usurio carrega a pgina, as configuraes de fonte de pargrafo e tamanho de fonte definidas por voc como autor substituem as configuraes padro de texto de pargrafo do navegador. Os usurios podem fazer selees para personalizar a exibio do navegador de uma forma ideal para seu prprio uso. No Internet Explorer, por exemplo, o usurio pode selecionar Exibir > Tamanho do texto > O maior para expandir a fonte da pgina para um tamanho mais legvel, caso ele ache que a fonte est muito pequena. Por fim (pelo menos neste caso), a seleo do usurio substitui os estilos padro de tamanho de fonte do navegador e os estilos de pargrafo criados pelo autor da pgina da Web. A herana outra parte importante da cascata. As propriedades da maioria dos elementos de uma pgina da Web so herdadas; por exemplo, as tags de pargrafo herdam determinadas propriedades das tags de corpo, as tags de lista de marcadores herdam determinadas propriedades das tags de pargrafo e assim por diante. Desse modo, se voc criar a seguinte regra na folha de estilos:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 126


Criao de pginas com CSS

body { font-family: Arial; font-style: italic; }

Todo o texto de pargrafo na pgina da Web (bem como o texto que herda propriedades da tag de pargrafo) ser Arial e itlico, pois a tag de pargrafo herda essas propriedades da tag de corpo. Voc pode, no entanto, ser mais especfico nas suas regras e criar estilos que substituem a frmula padro para herana. Por exemplo, se voc criar as seguintes regras na folha de estilos:
body { font-family: Arial; font-style: italic; } p { font-family: Courier; font-style: normal; }

Todo o texto do corpo ser Arial e itlico, exceto o texto do pargrafo (e seu texto herdado), que ser exibido como Courier normal (no-itlico). Tecnicamente, a tag de pargrafo herda primeiro as propriedades definidas para a tag de corpo, mas depois ela as ignora porque tem as suas prprias propriedades. Em outras palavras, enquanto os elementos de pgina geralmente herdam as propriedades acima, a aplicao direta de uma propriedade a uma tag sempre resulta em uma substituio da frmula padro para herana. A combinao de todos os fatores abordados anteriormente, alm de outros fatores como a especificidade CSS (um sistema que atribui pesos diferentes a determinados tipos de regras CSS) e a ordem das regras CSS, acaba criando uma cascata complexa na qual os itens com prioridades mais altas substituem as propriedades com prioridades mais baixas. Para obter mais informaes sobre as regras que regem a cascata, a herana e a especificidade, acesse www.w3.org/TR/CSS2/cascade.html.

Sobre a formatao de texto e a CSS


Por padro, o Dreamweaver usa as CSS para formatar texto. Os estilos que voc aplica ao texto usando o Inspetor de propriedades ou os comandos de menu criam regras CSS que esto incorporadas no cabealho do documento atual. Tambm possvel usar o painel Estilos CSS para criar e editar propriedades e regras CSS. O painel Estilos CSS um editor muito mais robusto do que o Inspetor de propriedade e exibe todas as regras CSS definidas para o documento atual, quer essas regras estejam incorporadas no cabealho do documento ou em uma folha de estilos externa. A Adobe recomenda que voc use o painel Estilos CSS (em vez do Inspetor de propriedades) como a ferramenta principal para a criao e edio da CSS. Como resultado, o cdigo ser mais limpo e fcil de manter. Alm dos estilos e folhas de estilos criados, voc tambm pode usar a folhas de estilos fornecidas junto com o Dreamweaver para aplicar estilos aos documentos. Para obter um tutorial sobre a formatao de texto com a CSS, consulte www.adobe.com/go/vid0153_br.

Mais tpicos da Ajuda


Adio e formatao do texto na pgina 217 painel Estilos CSS na pgina 128 Criao de uma nova regra CSS na pgina 132 Tutorial sobre formatao do texto com a CSS

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 127


Criao de pginas com CSS

Sobre as propriedades CSS abreviadas


A especificao CSS permite a criao de estilos atravs de uma sintaxe abreviada conhecida como CSS abreviada. A CSS abreviada permite que voc especifique os valores de vrias propriedades usando uma nica declarao. Por exemplo, a propriedade font permite que voc defina as propriedades font-style, font-variant, font-weight, font-size, line-height e font-family em uma nica linha. Um ponto-chave a ser observado quando se usa a CSS abreviada que os valores omitidos em uma propriedade CSS abreviada so definidos para seus valores padro. Isso pode fazer com que as pginas sejam exibidas incorretamente quando duas ou mais regras CSS so atribudas mesma tag. Por exemplo, a regra h1 mostrada a seguir usa a sintaxe CSS longa. Observe que as propriedades font-variant, fontstretch, font-size-adjust e font-style foram definidas para seus valores padro. h1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none }

Reescrita como uma nica propriedade abreviada, a mesma regra poder ter a seguinte aparncia:
h1 { font: bold 16pt/18pt Arial }

Quando a propriedade escrita atravs da notao abreviada, os valores omitidos so definidos automaticamente para seus valores padro. Desse modo, o exemplo abreviado anterior omite as tags font-variant, font-style, fontstretch e font-size-adjust. Se voc tiver estilos definidos em mais de um local (por exemplo, incorporado em uma pgina HTML e importado de uma folha de estilos externa) nos formatos abreviado e longo, saiba que as propriedades omitidas em uma regra abreviada podem substituir (ou cascata) as propriedades que esto explicitamente definidas em outra regra. Por esse motivo, o Dreamweaver usa o formato longo da notao CSS, por padro. Isso impede os possveis problemas ocasionados pela substituio de uma regra longa por uma abreviada. Se voc abrir uma pgina da Web codificada com a notao CSS abreviada no Dreamweaver, saiba que o Dreamweaver criar novas regras CSS usando o formato longo. Voc pode especificar como o Dreamweaver criar e editar as regras CSS alterando as preferncias de edio CSS na categoria Estilos CSS da caixa de dilogo Preferncias (Editar > Preferncias no Windows; Dreamweaver > Preferncias no Macintosh). Nota: O painel Estilos CSS cria regras usando somente a notao longa. Se voc criar uma pgina ou folha de estilos CSS usando o painel Estilos CSS, saiba que a codificao das regras CSS abreviadas pode fazer com que as propriedades abreviadas sobreponham as criadas em formato longo. Por isso, use a notao CSS longa ao criar seus estilos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 128


Criao de pginas com CSS

Criao e gerenciamento de CSS


painel Estilos CSS
O painel Estilos CSS permite que voc rastreie as propriedades e regras CSS afetando um elemento de pgina atualmente selecionado (modo Atual) ou todas as propriedades e regras disponibilizadas para o documento (modo Tudo). Um boto de alternncia na parte superior do painel permite que voc alterne entre os dois modos. O painel Estilos CSS tambm permite modificar propriedades CSS no modo Tudo e no modo Atual.

Painel Estilos CSS no modo Atual


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

Voc pode redimensionar qualquer um desses painis arrastando as bordas entre os painis ou pode redimensionar as colunas arrastando os divisores. O painel Resumo para seleo exibe um resumo das propriedades CSS e seus respectivos valores referentes ao item atualmente selecionado no documento ativo. O resumo mostra as propriedades de todas as regras que se aplicam diretamente seleo. Somente as propriedades definidas so mostradas. Por exemplo, as regras a seguir criam um estilo de classe um e um estilo de tag (neste caso, de pargrafo):

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 129


Criao de pginas com CSS

.foo{ color: green; font-family: 'Arial'; } p{ font-family: 'serif'; font-size: 12px; }

Quando voc seleciona um texto de pargrafo com o estilo de classe .foo na janela Documento, o painel Resumo para seleo exibe as propriedades das duas regras, pois ambas se aplicam seleo. Nesse caso, o painel Resumo para seleo listar as seguintes propriedades:
font-size: 12px font-family: 'Arial' color: green

O painel Resumo para seleo organiza as propriedades em ordem crescente de especificidade. No exemplo acima, o estilo de tag define o tamanho de fonte, e o estilo de classe define a famlia de fontes e a cor. (A famlia de fontes definida pelo estilo de classe substitui a famlia de fontes definida pelo estilo de tag porque os seletores de classe tm uma especificidade maior do que os seletores de tag. Para obter mais informaes sobre a especificidade CSS, consulte www.w3.org/TR/CSS2/cascade.html.) O painel Regras exibe duas visualizaes diferentes visualizao Sobre ou visualizao Regras dependendo da seleo. Na visualizao Sobre (a visualizao padro), o painel exibe o nome da regra que define a propriedade CSS selecionada e o nome do arquivo que contm a regra. Na visualizao Regras, o painel exibe uma cascata ou hierarquia de todas as regras que se aplicam direta ou indiretamente seleo atual. (A tag qual a regra se aplica diretamente aparece na coluna da direita.) Voc pode alternar entre duas visualizaes clicando nos botes Mostrar informaes ou Mostrar cascata no canto superior direito do painel Regras. Quando voc seleciona uma propriedade no painel Resumo para seleo, todas as propriedades da regra de definio aparece no painel Propriedades. (A regra de definio tambm estar selecionada no painel Regras, caso a visualizao Regras esteja selecionada.) Por exemplo, se voc tiver uma regra chamada .maintext que define uma famlia de fontes, um tamanho de fonte e a cor, a seleo de qualquer uma dessas propriedades no painel Resumo para seleo exibir todas as propriedades definidas pela regra .maintext no painel Propriedades, bem como a regra .maintext selecionada no painel Regras. (Alm disso, a seleo de qualquer regra no painel Regras exibir as propriedades dessa regra no painel Propriedades.) Em seguida, voc poder usar o painel Propriedades para modificar rapidamente a CSS, quer ela esteja incorporada no documento atual ou vinculada atravs de uma folha de estilos anexada. Por padro, o painel Propriedades mostra apenas as propriedades que j foram definidas e as organiza em ordem alfabtica. Voc pode optar por exibir o painel Propriedades em duas outras visualizaes. A visualizao de categoria exibe as propriedades agrupadas em categorias, como Fonte, Fundo, Bloco, Borda etc. com as propriedades definidas na parte superior de cada categoria, exibidas em texto azul. A visualizao de lista exibe uma lista alfabtica de todas as propriedades disponveis e, da mesma forma, ordena as propriedades definidas na parte superior, exibindo-as em texto azul. Para alternar entre as visualizaes, clique no boto Mostrar visualizao de categoria, Mostrar visualizao de lista ou Mostrar somente propriedades definidas, localizadas no canto inferior esquerdo do painel Propriedades. Em todas as visualizaes, as propriedades definidas so exibidas em azul. As propriedades irrelevantes para uma seleo so exibidas com uma linha tachada vermelha. Ao manter o cursor do mouse sobre uma regra irrelevante, voc far com que seja exibida uma mensagem explicando por que a propriedade irrelevante. Geralmente, uma propriedade irrelevante porque ela sobreposta ou no uma propriedade herdada. Qualquer alterao efetuada no painel Propriedades aplicada imediatamente, permitindo que voc a visualize enquanto trabalha.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 130


Criao de pginas com CSS

Mais tpicos da Ajuda


Abertura do painel Estilos CSS na pgina 131

Painel Estilos CSS no modo Tudo


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.

Voc pode redimensionar o painel arrastando a borda entre os painis e pode redimensionar as colunas Propriedades arrastando seus respectivos divisores. Quando voc seleciona uma regra no painel Todas as regras, todas as propriedades definidas nessa regra aparecem no painel Propriedades. Em seguida, use o painel Propriedades para modificar rapidamente a CSS, quer ela esteja incorporada no documento atual ou vinculada em uma folha de estilos anexada. Por padro, o painel Propriedades mostra apenas as propriedades que j foram definidas e as organiza em ordem alfabtica. Voc pode optar por exibir as propriedades em duas outras visualizaes. A visualizao de categoria exibe as propriedades agrupadas em categorias, como Fonte, Fundo, Bloco, Borda etc. com as propriedades definidas na parte superior de cada categoria. A visualizao de lista exibe uma lista alfabtica de todas as propriedades disponveis e, da mesma forma, ordena as propriedades definidas na parte superior. Para alternar entre as visualizaes, clique no boto Mostrar visualizao de categoria, Mostrar visualizao de lista ou Mostrar somente propriedades definidas, localizadas no canto inferior esquerdo do painel Propriedades. Em todas as visualizaes, a propriedades definidas so exibidas em azul. Qualquer alterao efetuada no painel Propriedades aplicada imediatamente, permitindo que voc a visualize enquanto trabalha.

Mais tpicos da Ajuda


Abertura do painel Estilos CSS na pgina 131

Botes e visualizaes do painel Estilos CSS


Nos modos Tudo e Atual, o painel Estilos CSS contm trs botes que permitem alterar a visualizao no painel Propriedades (o painel inferior):

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 131


Criao de pginas com CSS

A. Visualizao de categoria B. Visualizao de lista C. Visualizao de propriedades definidas

Visualizao de categoria Divide as propriedades CSS compatveis com o Dreamweaver em oito categorias: fonte,

fundo, bloco, borda, caixa, lista, posicionamento e extenses. As propriedades de cada categoria esto contidas em uma lista que voc expande ou reduz clicando no boto de adio (+) ao lado do nome de categoria. As propriedades definidas aparecem (em azul) no topo da lista.
Visualizao de lista Exibe todas as propriedades CSS compatveis com o Dreamweaver em ordem alfabtica. As

propriedades definidas aparecem (em azul) no topo da lista.


Visualizao de propriedades definidas Exibe apenas as propriedades definidas. A visualizao de propriedades

definidas a visualizao padro. Nos modos Tudo e Atual, o painel Estilos CSS tambm contm os seguintes botes:

A. Anexar folha de estilos B. Nova regra CSS C. Editar estilo D. Desativar/ativar propriedade CSS E. Excluir regra CSS

Anexar folha de estilos Abre a caixa de dilogo Vincular a folha de estilos externa. Selecione uma folha de estilos

externa para vincular ou importe-a para o documento atual.


Nova regra CSS Abre uma caixa de dilogo na qual voc pode selecionar o tipo de estilo que est criando; por exemplo, para criar um estilo de classe, redefinir uma tag HTML ou definir um seletor CSS. Editar estilo Abre uma caixa de dilogo na qual voc pode editar os estilos no documento atual ou em uma folha de estilos externa. Excluir regra CSS Remove a regra ou propriedade selecionada do painel Estilos CSS e remove a formatao de qualquer elemento ao qual ela foi aplicada. (No entanto, este recurso no remove as propriedades de classe e ID referenciadas por esse estilo.) O boto Excluir regra CSS tambm pode desanexar (ou desvincular) uma folha de estilos CSS anexada.

Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control (Macintosh) enquanto clica no painel Estilos CSS a fim de abrir o menu de contexto de opes para trabalhar com os comandos de folha de estilos CSS.

Abertura do painel Estilos CSS


Use o painel Estilos CSS para visualizar, criar, editar e remover estilos CSS, bem como para anexar folhas de estilos externas aos documentos.
Siga um destes procedimentos:

Selecione Janela > Estilos CSS. Pressione Shift+F11. Clique no boto CSS no Inspetor de propriedades.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 132


Criao de pginas com CSS

Definio das preferncias de estilos CSS


As preferncias de estilo CSS determinam como o Dreamweaver gravar o cdigo que define os estilos CSS. Os estilos CSS podem ser escritos em uma forma abreviada mais fcil para algumas pessoas trabalharem. No entanto, algumas verses mais antigas de navegadores no interpretam corretamente esse formato abreviado.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e, na lista Categoria,

selecione Estilos CSS.


2 Defina as opes de estilo CSS que deseja aplicar:
Ao criar regras CSS, use o formato abreviado para Permite que voc selecione quais propriedades de estilo CSS o

Dreamweaver escrever no formato abreviado.


Ao editar regras CSS, use o formato abreviado Determina se o Dreamweaver reescrever os estilos existentes em

formato abreviado. Selecione Se original usou formato abreviado para deixar todos os estilos como esto. Selecione De acordo com as configuraes acima para reescrever os estilos em formato abreviado para as propriedades selecionadas em Usar formato abreviado para.
Ao clicar duas vezes em painel CSS Permite que voc selecione uma ferramenta para edio das regras CSS.

3 Clique em OK.

Criao de uma nova regra CSS


Voc pode criar uma regra CSS para automatizar a formatao de tags HTML ou uma faixa de texto identificada pelos atributos class ou ID .
1 Coloque o ponto de insero no documento e siga um destes procedimentos para abrir a caixa de dilogo Nova

regra CSS:

Selecione Formatar > Estilos CSS > Novo. No painel Estilos CSS (Janela > Estilos CSS), clique no boto Nova regra CSS (+) localizado no lado inferior direito
do painel.

Selecione o texto na janela Documento, selecione Nova regra CSS no menu pop-up Regra-alvo do Inspetor de
propriedades CSS (Janela > Propriedades) e clique no boto Editar regra ou selecione uma opo no Inspetor de propriedades (por exemplo, clique no boto Negrito) para iniciar uma nova regra.
2 Na caixa de dilogo Nova regra CSS, especifique o tipo de seletor da regra CSS que deseja criar:

Para criar um estilo personalizado que pode ser aplicado como um atributo class a um elemento HTML, selecione
a opo Classe no menu pop-up Tipo de seletor e digite um nome para o estilo na caixa de texto Nome de seletor. Nota: Os nomes de classe devem comear com um ponto e podem conter qualquer combinao de letras e nmeros (por exemplo, .myhead1). Se voc no digitar um ponto inicial, o Dreamweaver o inserir automaticamente para voc.

Para definir a formatao de uma tag que contenha um atributo ID especfico, selecione a opo ID no menu popup Tipo de seletor e, em seguida, digite a ID exclusiva (por exemplo, containerDIV) na caixa de texto Nome de seletor. Nota: As IDs devem comear com um sinal numrico (#) e conter qualquer combinao de letras e nmeros (por exemplo, #minhaID1). Se voc no digitar um sinal numrico inicial, o Dreamweaver o inserir automaticamente para voc.

Para redefinir a formatao padro de uma tag HTML especfica, selecione a opo Tag no menu pop-up Tipo de
seletor e, em seguida, insira uma tag HTML na caixa de texto Nome de seletor ou selecione uma no menu pop-up.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 133


Criao de pginas com CSS

Para definir uma regra de composio que afete simultaneamente duas ou mais tags, classes ou IDs, selecione a
opo Composio e insira os seletores da regra de composio. Por exemplo, se voc digitar div p, todos os elementos p nas tags div sero afetados pela regra. Uma rea de texto de descrio explica exatamente que elementos a regra afetar medida que voc adicionar ou excluir seletores.
3 Selecione o local em que deseja definir a regra e clique em OK:

Para colocar a regra em uma folha de estilos que j esteja anexada ao documento, selecione a folha de estilos. Para criar uma folha de estilos externa, selecione Novo arquivo de folha de estilos. Para incorporar o estilo no documento atual, selecione Apenas este documento.
4 Na caixa de dilogo Definio de regra CSS, selecione as opes de estilo que voc deseja definir para a nova regra

CSS. Para obter mais informaes, consulte a prxima seo.


5 Quando terminar de definir as propriedades de estilo, clique em OK.

Nota: Se voc clicar em OK sem definir as opes de estilo, uma nova regra vazia ser criada.

Definio de propriedades CSS


Voc pode definir as propriedades das regras CSS como fonte do texto, imagem e cor do fundo, propriedades de espaamento e layout, e a aparncia dos elementos de lista. Primeiro crie uma nova regra e defina qualquer uma das propriedades a seguir.

Definio das propriedades de tipo CSS


Use a categoria Tipo na caixa de dilogo Definio de regra CSS para definir as configuraes bsicas de fonte e tipo para um estilo CSS.
1 Abra o painel Estilos CSS (Shift + F11) caso ele ainda no esteja aberto. 2 Clique duas vezes em uma regra ou propriedade existente no painel superior do painel Estilos CSS. 3 Na caixa de dilogo Definio de regra CSS, selecione Tipo e defina as propriedades de estilo.

Deixe qualquer uma das seguintes propriedades vazias caso elas no sejam importantes para o estilo:
Font-family Define a famlia de fontes (ou srie de famlias) para o estilo. Os navegadores exibem o texto na primeira

fonte da srie instalada no sistema do usurio. Para fins de compatibilidade com o Internet Explorer 3.0, liste a fonte do Windows primeiro. O atributo de fonte compatvel com ambos os navegadores.
Font-size Define o tamanho do texto. Voc pode escolher um tamanho especfico selecionando o nmero e a unidade de medida, ou voc pode escolher um tamanho relativo. Pixels impede que os navegadores distoram o texto. O atributo de tamanho compatvel com ambos os navegadores. Font-style Especifica Normal, Italic ou Oblique como estilo de fonte. A configurao padro Normal. O atributo de

estilo compatvel com ambos os navegadores.


Line-height Define a altura da linha em que o texto colocado. Esta configurao tradicionalmente chamada de

leading. Selecione Normal para que a altura da linha do tamanho da fonte seja calculada automaticamente ou digite um valor exato e selecione uma unidade de medida. O atributo de altura da linha compatvel com ambos os navegadores.
Text-decoration Adiciona uma sublinha, sobrelinha ou tachado ao texto ou torna o texto intermitente. A configurao padro None. A configurao padro para links Underline. Quando voc define a configurao de link para none, pode remover a sublinha dos links definindo uma classe especial. O atributo de decorao compatvel com ambos os navegadores.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 134


Criao de pginas com CSS

Font-weight Aplica um valor especfico ou relativo de negrito fonte. Normal equivale a 400; Bold equivale a 700. O

atributo de espessura compatvel com ambos os navegadores.


Font-variant Define a variante de versalete no texto. O Dreamweaver no exibe este atributo na janela Documento. O

atributo de variante compatvel com o Internet Explorer, mas no com o Navigator.


Text-transform Coloca a primeira letra de cada palavra da seleo em maiscula ou define o texto para todas maisculas ou todas minsculas. O atributo de maisculas ou minsculas compatvel com ambos os navegadores. Cor Define a cor do texto. O atributo de cor compatvel com ambos os navegadores.

4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para

definir outras propriedades de estilo ou clique em OK.

Definio das propriedades de fundo do estilo CSS


Use a categoria Fundo da caixa de dilogo Definio de regra CSS para definir as configuraes de fundo de um estilo CSS. Voc pode aplicar as propriedades de fundo a qualquer elemento em uma pgina da Web. Por exemplo, crie um estilo que adicione uma cor ou imagem do fundo a qualquer elemento de pgina, ou seja, atrs do texto, de uma tabela, da pgina etc. Voc tambm pode definir o posicionamento de uma imagem de fundo.
1 Abra o painel Estilos CSS (Shift+F11) caso ele ainda no esteja aberto. 2 Clique duas vezes em uma regra ou propriedade existente no painel superior do painel Estilos CSS. 3 Na caixa de dilogo Definio de regra CSS, selecione Fundo e defina as propriedades de estilo.

Deixe qualquer uma das seguintes propriedades vazias caso elas no sejam importantes para o estilo:
Cor de fundo Define a cor de fundo do elemento. O atributo de cor de fundo compatvel com ambos os navegadores. Imagem de fundo Define a imagem de fundo do elemento. O atributo de imagem de fundo compatvel com ambos

os navegadores.
Background Repeat Determina se e como a imagem de fundo ser repetida. O atributo de repetio compatvel com

ambos os navegadores.

No Repeat exibe uma imagem uma vez, no incio do elemento. Repeat coloca a imagem lado a lado, horizontalmente ou verticalmente atrs do elemento. Repeat-x e Repeat-y exibem uma faixa horizontal e vertical de imagens, respectivamente. As imagens so recortadas
para que no ultrapassem os limites do elemento. Nota: Use a propriedade Repeat para redefinir a tag body e definir a imagem de fundo que no disposta lado a lado ou repetida.
Background Attachment Determina se a imagem de fundo se manter fixa na sua posio original ou rolar

juntamente com o contedo. Observe que alguns navegadores podem tratar a opo Fixa como Rolar. H suporte para esse atributo no Internet Explorer, mas no no Netscape Navigator.
Background Position (X) e Background Position (Y) Especifica a posio inicial da imagem de fundo em relao ao elemento. Este recurso pode ser usado para alinhar uma imagem de fundo ao centro da pgina, verticalmente (Y) e horizontalmente (X). Se a propriedade de anexo for Fixa, a posio ser relativa janela Documento, e no ao elemento.

4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para

definir outras propriedades de estilo ou clique em OK.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 135


Criao de pginas com CSS

Definio das propriedades de bloco do estilo CSS


Use a categoria Bloco da caixa de dilogo Definio de regra CSS para definir as configuraes de espaamento e alinhamento das tags e propriedades.
1 Abra o painel Estilos CSS (Shift+F11) caso ele ainda no esteja aberto. 2 Clique duas vezes em uma regra ou propriedade existente no painel superior do painel Estilos CSS. 3 Na caixa de dilogo Definio de regra CSS, selecione Bloco e defina qualquer uma das propriedades de estilo a

seguir. (Deixe a propriedade em branco caso ela no seja importante para o estilo.)
Word Spacing Define o espaamento entre palavras. Para definir um valor especfico no menu pop-up, selecione Value e digite um valor numrico. No segundo menu pop-up, selecione uma unidade de medida (por exemplo, pixel, points etc.).

Nota: Voc pode especificar valores negativos, mas a exibio depender do navegador. O Dreamweaver no exibe este atributo na janela Documento.
Letter Spacing Aumenta ou diminui o espao entre as letras ou caracteres. Para diminuir o espao entre os caracteres, especifique um valor negativo, por exemplo (-4). As configuraes de espaamento entre letras substitui as configuraes de texto justificado. H suporte para o atributo de espaamento entre letras no Internet Explorer 4 e posterior, e no Netscape Navigator 6. Vertical Align Especifica o alinhamento vertical do elemento ao qual ele aplicado. O Dreamweaver exibe este atributo

na janela Documento apenas quando ele aplicado tag <img>.


Text Align Define como o texto alinhado no elemento. O atributo de alinhamento de texto compatvel com ambos

os navegadores.
Recuo do texto Especifica a distncia em que a primeira linha de texto ser recuada. Um valor negativo pode ser usado

para diminuir o recuo, mas a exibio depender do navegador. O Dreamweaver exibe este atributo na janela Documento apenas quando a tag aplicada aos elementos em nvel de bloco. O atributo de recuo de texto compatvel com ambos os navegadores.
Whitespace Determina como o espao em branco ser tratado no elemento. Selecione entre trs opes: Normal

diminui o espao em branco; Pre trata o espao em branco como se o texto estivesse delimitado por tags pre (ou seja, todo o espao em branco respeitado, incluindo espaos, tabulaes e retornos); Nowrap especifica que s ocorre uma quebra de linha automtica no texto quando uma tag br encontrada. O Dreamweaver no exibe este atributo na janela Documento. H suporte para o atributo de espao em branco no Netscape Navigator e no Internet Explorer 5.5.
Display Especifica se um elemento ser exibido e, em caso afirmativo, como ele ser exibido. None desativa a exibio

de um elemento ao qual ele atribudo.


4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para

definir outras propriedades de estilo ou clique em OK.

Definio das propriedades de caixa do estilo CSS


Use a categoria Caixa da caixa de dilogo Definio de regra CSS para definir as configuraes das tags e propriedades que controlam o posicionamento dos elementos na pgina. Voc pode aplicar as configuraes a cada lado de um elemento separadamente quando aplica as configuraes de preenchimento e margem, ou usar a configurao Igual para tudo a fim de aplicar a mesma configurao a todos os lados de um elemento.
1 Abra o painel Estilos CSS (Shift + F11) caso ele ainda no esteja aberto. 2 Clique duas vezes em uma regra ou propriedade existente no painel superior do painel Estilos CSS.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 136


Criao de pginas com CSS

3 Na caixa de dilogo Definio de regra CSS, selecione Caixa e defina qualquer uma das propriedades de estilo a

seguir. (Deixe a propriedade em branco caso ela no seja importante para o estilo.)
Largura e Altura Define a largura e altura do elemento. Float Define qual lado de outros elementos, como texto, Divs PA, tabelas etc. flutuar em torno de um elemento Os

outros elementos so dispostos em torno do elemento flutuante, como de costume. O atributo de flutuao compatvel com ambos os navegadores.
Clear Define os lados que no permitem elementos PA. Se um elemento PA aparecer no lado limpo, o elemento com

a configurao Clear se mover abaixo dele. O atributo de limpeza compatvel com ambos os navegadores.
Padding Especifica a quantidade de espao entre o contedo de um elemento e sua borda (ou margem, caso no haja

borda). Desmarque a opo Igual para tudo a fim de definir o preenchimento de cada lado do elemento separadamente.
Igual para tudo Define as mesmas propriedades de preenchimento para os lados superior, direito, inferior e esquerdo

do elemento ao qual elas so aplicadas.


Margin Especifica a quantidade de espao entre a borda de um elemento (ou o preenchimento, caso no haja borda) e outro elemento. O Dreamweaver exibe este atributo na janela Documento apenas quando ele aplicado aos elementos em nvel de bloco (pargrafos, cabealhos, listas etc.). Desmarque a opo Igual para tudo a fim de definir a margem de cada lado do elemento separadamente. Igual para tudo Define as mesmas propriedades de margem para os lados superior, direito, inferior e esquerdo do

elemento ao qual elas so aplicadas.


4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para

definir outras propriedades de estilo ou clique em OK.

Definio das propriedades de borda do estilo CSS


Use a categoria Borda da caixa de dilogo Definio de regra CSS a fim de definir configuraes, como largura, cor e estilo, para as bordas em torno dos elementos.
1 Abra o painel Estilos CSS (Shift+F11) caso ele ainda no esteja aberto. 2 Clique duas vezes em uma regra ou propriedade existente no painel superior do painel Estilos CSS. 3 Na caixa de dilogo Definio de regra CSS, selecione Borda e defina qualquer uma das propriedades de estilo a

seguir. (Deixe a propriedade em branco caso ela no seja importante para o estilo.)
Tipo Define a aparncia do estilo da borda. A maneira como o estilo aparecer depende do navegador. Desmarque a opo Igual para tudo a fim de definir o estilo de borda de cada lado do elemento separadamente. Igual para tudo Define as mesmas propriedades de estilo de borda para os lados superior, direito, inferior e esquerdo

do elemento ao qual elas so aplicadas.


Largura Define a espessura da borda do elemento. O atributo de largura compatvel com ambos os navegadores.

Desmarque a opo Igual para tudo a fim de definir a largura de borda de cada lado do elemento separadamente.
Igual para tudo Define a mesma largura de borda para os lados superior, direito, inferior e esquerdo do elemento ao

qual ela aplicada.


Cor Define a cor da borda. Voc pode definir a cor de cada lado de modo independente, mas a exibio depender do navegador. Desmarque a opo Igual para tudo a fim de definir a cor de borda de cada lado do elemento separadamente. Igual para tudo Define a mesma cor de borda para os lados superior, direito, inferior e esquerdo do elemento ao qual

ela aplicada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 137


Criao de pginas com CSS

4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para

definir outras propriedades de estilo ou clique em OK.

Definio das propriedades de lista do estilo CSS


A categoria Lista da caixa de dilogo Definio de regra CSS define as configuraes de lista, como tamanho e tipo de marcador, para as tags de lista.
1 Abra o painel Estilos CSS (Shift+F11) caso ele ainda no esteja aberto. 2 Clique duas vezes em uma regra ou propriedade existente no painel superior do painel Estilos CSS. 3 Na caixa de dilogo Definio de regra CSS, selecione Lista e defina qualquer uma das propriedades de estilo a

seguir. (Deixe a propriedade em branco caso ela no seja importante para o estilo.)
List style type Define a aparncia dos marcadores ou nmeros. O tipo compatvel em ambos os navegadores. List style image Permite que voc especifique uma imagem personalizada para os marcadores. Clique em Procurar

(Windows) ou Escolher (Macintosh) para navegar at uma imagem ou digite o caminho da imagem.
List style position Define se haver quebra de linha automtica e recuo do texto do item de linha (externo) ou se o

texto ser deslocado para a margem esquerda (interno).


4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para

definir outras propriedades de estilo ou clique em OK.

Definio das propriedades de posicionamento do estilo CSS


As propriedades de estilo de posicionamento determinam como o contedo relacionado ao estilo CSS selecionado est posicionado na pgina.
1 Abra o painel Estilos CSS (Shift+F11) caso ele ainda no esteja aberto. 2 Clique duas vezes em uma regra ou propriedade existente no painel superior do painel Estilos CSS. 3 Na caixa de dilogo Definio de regra CSS, selecione Posicionamento e defina as propriedades de estilo desejadas.

Deixe qualquer uma das seguintes propriedades vazias caso elas no sejam importantes para o estilo:
Position Determina como o navegador deve posicionar o elemento selecionado:

Absolute coloca o contedo usando as coordenadas digitadas nas caixas Placement, relativo ao predecessor com
posio relativa ou absoluta, ou, se no houver nenhum predecessor com posio relativa ou absoluta, relativo ao canto superior esquerdo da pgina.

Relative coloca o bloco de contedo usando as coordenadas digitadas nas caixas Placement relativas posio do
bloco no fluxo de texto do documento. Por exemplo, atribuir a um elemento uma posio relativa, e as coordenadas superior e esquerda de 20px deslocar o elemento 20px para a direita e 20px para baixo de sua posio normal no fluxo. Os elementos tambm podem ser posicionados de forma relativa, com ou sem as coordenadas superior, esquerda, direita ou inferior, a fim de estabelecer um contexto para os filhos com posio absoluta.

Fixed coloca o contedo usando as coordenadas digitadas nas caixas Placement, relativo ao canto superior esquerdo
do navegador. O contedo permanecer fixo nesta posio quando o usurio rolar a pgina.

Static coloca o contedo em seu local no fluxo de texto. Esta a posio padro de todos os elementos HTML
posicionveis.
Visibilidade Determina a condio de exibio inicial do contedo. Se voc no especificar uma propriedade de visibilidade, o contedo herdar o valor da tag-me, por padro. A visibilidade padro da tag body est visvel. Selecione uma das seguintes opes de visibilidade:

Inherit herda a propriedade de visibilidade do pai do contedo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 138


Criao de pginas com CSS

Visible exibe o contedo, independentemente do valor do pai. Hidden oculta o contedo, independentemente do valor do pai.
ndice Z Determina a ordem de empilhamento do contedo. Os elementos com um ndice z superior aparecem acima dos elementos com um ndice z inferior (ou com nenhum ndice). Os valores podem ser positivos ou negativos. (Se o contedo tiver uma posio absoluta, ser mais fcil alterar a ordem de empilhamento usando o painel Elementos PA.) Overflow Determina o que acontecer se o contedo de um continer (por exemplo, DIV ou P) ultrapassar seu

tamanho. Essas propriedades controlam a expanso da seguinte maneira:

Visible aumenta o tamanho do continer a fim de que todo o seu contedo fique visvel. O continer se expande
para baixo e para a direita.

Hidden mantm o tamanho do continer e recorta qualquer contedo de modo a ajust-lo dentro do continer.
Nenhuma barra de rolagem fornecida.

Scroll adiciona barras de rolagem ao continer, no importando se o contedo ultrapassa ou no o tamanho do


continer. O fornecimento de barras de rolagem evita a confuso ocasionada pelo aparecimento e desaparecimento das barras de rolagem em um ambiente dinmico. Esta opo no exibida na janela Documento.

Auto faz com que as barras de rolagem apaream somente quando o contedo do continer exceder seus limites.
Esta opo no exibida na janela Documento.
Placement Especifica o local e o tamanho do bloco de contedo. A maneira como o navegador interpretar o local depende da configurao de tipo. Os valores de tamanho sero substitudos se o contedo do bloco de contedo exceder o tamanho especificado.

As unidades padro de local e tamanho so pixels. Voc tambm pode especificar as seguintes unidades: pc (paicas), pt (pontos), in (polegadas), mm (milmetros), cm (centmetros), (ems), (exs) ou % (porcentagem do valor do pai). As abreviaes devem seguir o valor, sem espaos: por exemplo, 3mm.
Clip Define a parte do contedo que est visvel. Se voc especificar uma regio de corte, poder acess-la com uma

linguagem de script, como JavaScript, e manipular as propriedades para criar efeitos especiais como borrachas. Essas borrachas podem ser configuradas usando o comportamento Alterar propriedade.
4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para

definir outras propriedades de estilo ou clique em OK.

Definio das propriedades de extenso do estilo CSS


As propriedades de estilo Extenses incluem filtros, quebra de pgina e opes de ponteiro. Nota: H diversas outras propriedades de extenso disponveis no Dreamweaver, mas, para acess-las, voc precisa percorrer o painel Estilos CSS. Para ver uma lista das propriedades de extenso disponveis, basta abrir o painel Estilos CSS (Janelas > Estilos CSS), clicando no boto Mostrar visualizao de categoria, na parte inferior do painel, e expandindo a categoria Extenses.
1 Abra o painel Estilos CSS (Shift + F11) caso ele ainda no esteja aberto. 2 Clique duas vezes em uma regra ou propriedade existente no painel superior do painel Estilos CSS. 3 Na caixa de dilogo Definio de regra CSS, selecione Extenses e defina qualquer uma das propriedades de estilo

a seguir. (Deixe a propriedade em branco caso ela no seja importante para o estilo.)
Page break before Fora uma quebra de pgina durante a impresso, antes ou aps o objeto controlado pelo estilo.

Selecione a opo desejada no menu pop-up. No h suporte para esta opo em nenhum navegador 4.0, mas os navegadores posteriores podem oferecer suporte a ela.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 139


Criao de pginas com CSS

Cursor Altera a imagem de ponteiro quando o ponteiro est sobre o objeto controlado pelo estilo. Selecione a opo desejada no menu pop-up. O Internet Explorer 4.0 e posterior, e o Netscape Navigator 6 oferecem suporte a este atributo. Filter Aplica efeitos especiais ao objeto controlado pelo estilo, incluindo desfoque e inverso. Selecione um efeito no

menu pop-up.
4 Quando voc terminar de definir essas opes, selecione outra categoria CSS no lado esquerdo do painel para

definir outras propriedades de estilo ou clique em OK.

Edio de uma regra CSS


Voc pode editar facilmente regras internas e externas que voc aplicou a um documento. Ao editar um folha de estilos CSS que controla o texto no documento, voc reformatar instantaneamente todo o texto controlado por essa folha de estilos. As edies em uma folha de estilos externa afetam todos os documentos vinculados a ela. Voc pode definir um editor externo a ser usado para edio das folhas de estilos.

Edio de uma regra no painel Estilos CSS (modo Atual)


1 Abra o painel Estilos CSS selecionando Janela > Estilos CSS. 2 Clique no boto Atual na parte superior do painel Estilos CSS. 3 Selecione um elemento de texto na pgina atual para exibir suas propriedades. 4 Siga um destes procedimentos:

Clique duas vezes em uma propriedade no painel Resumo para seleo a fim de exibir a caixa de dilogo Definio
de regra CSS e faa suas alteraes.

Selecione uma propriedade no painel Resumo para seleo e edite a propriedade no painel Propriedades abaixo. Selecione uma regra no painel Regras e edite as propriedades da regra no painel Propriedades abaixo.
Nota: Voc pode alterar o comportamento de duplo clique para edio da CSS, bem como outros comportamentos, alterando as preferncias do Dreamweaver.

Edio de uma regra no painel Estilos CSS (modo Tudo)


1 Abra o painel Estilos CSS selecionando Janela > Estilos CSS. 2 Clique no boto Tudo na parte superior do painel Estilos CSS. 3 Siga um destes procedimentos:

Clique duas vezes em uma regra no painel Todas as regras a fim de exibir a caixa de dilogo Definio de regra CSS
e faa suas alteraes.

Selecione uma regra no painel Todas as regras e edite as propriedades da regra no painel Propriedades abaixo. Selecione uma regra no painel Todas as regras e clique no boto Editar estilo no canto inferior direito do painel
Estilos CSS. Nota: Voc pode alterar o comportamento de duplo clique para edio da CSS, bem como outros comportamentos, alterando as preferncias do Dreamweaver.

Alterao do nome de um seletor CSS


1 No painel Estilos CSS (modo Tudo), escolha o seletor que voc deseja alterar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 140


Criao de pginas com CSS

2 Clique no seletor novamente para tornar o nome editvel. 3 Faa suas alteraes e pressione Enter (Windows) ou Return (Macintosh).

Mais tpicos da Ajuda


Definir propriedades de texto no Inspetor de propriedades na pgina 227

Adio de uma propriedade a uma regra


Voc pode usar o painel Estilos CSS para adicionar propriedades a regras.
1 No painel Estilos CSS (Janela > CSS), selecione uma regra no painel Todas as regras (modo Tudo) ou selecione uma

propriedade no painel Resumo para seleo (modo Atual).


2 Siga um destes procedimentos:

Se a visualizao Mostrar somente propriedades definidas estiver selecionada no painel Propriedades, clique no
link Adicionar propriedades e adicione uma propriedade.

Se a visualizao de categoria ou a visualizao de lista estiver selecionada no painel Propriedades, preencha um


valor para propriedade a ser adicionada.

Aplicao, remoo ou renomeao de estilos de classe


Os estilos de classe so o nico de tipo de estilo CSS que pode ser aplicado a qualquer texto em um documento, independentemente de quais tags controlam o texto. Todos os estilos de classe associados ao documento atual so exibidos no painel Estilos CSS (com um ponto [.] precedendo o nome) e no menu pop-up Estilo do Inspetor de propriedades de texto. Voc ver imediatamente a maioria dos estilos atualizados; no entanto, deve visualizar a pgina em um navegador para verificar se um estilo foi aplicado conforme o esperado. Quando voc aplicar dois ou mais estilos ao mesmo texto, eles podero conflitar e produzir resultados inesperados. Ao visualizar os estilos definidos em uma folha de estilos CSS externa, verifique se salvou a folha de estilos para garantir que suas alteraes sero refletidas quando a pgina for visualizada em um navegador.

Mais tpicos da Ajuda


Sobre as folhas de estilos em cascata na pgina 123 Sobre os estilos em cascata na pgina 125 painel Estilos CSS na pgina 128

Aplicao de um estilo de classe CSS


1 No documento, selecione o texto ao qual voc deseja aplicar um estilo CSS.

Coloque o ponto de insero em um pargrafo para aplicar o estilo ao pargrafo inteiro. Se voc selecionar uma faixa de texto em um nico pargrafo, o estilo CSS afetar apenas a faixa selecionada. Para especificar a tag exata ao qual o estilo CSS deve ser aplicado, selecione a tag no seletor de tags localizado no canto inferior esquerdo da janela Documento.
2 Para aplicar um estilo de classe, siga um destes procedimentos:

No painel Estilos CSS (Janela > Estilos CSS), selecione o modo Tudo, clique com o boto direito do mouse no nome
do estilo a ser aplicado e selecione Aplicar no menu de contexto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 141


Criao de pginas com CSS

No Inspetor de propriedades HTML, selecione o estilo de classe a ser aplicado no menu pop-up Classe. Na janela Documento, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control
enquanto clica (Macintosh) no texto selecionado e, no menu de contexto, selecione Estilos CSS e, em seguida, selecione o estilo a ser aplicado.

Selecione Formatar > Estilos CSS e, no submenu, selecione o estilo a ser aplicado.

Remoo de um estilo de classe em uma seleo


1 Selecione o objeto ou texto do qual deseja remover o estilo. 2 No Inspetor de propriedades HTML (Janela > Propriedades), selecione Nenhum no menu pop-up Classe.

Renomeao de um estilo de classe


1 No painel Estilos CSS, clique com o boto direito no estilo de classe CSS que deseja renomear e selecione Renomear

classe. Voc tambm pode renomear uma classe selecionando Renomear classe no menu de opes do painel Estilos CSS.
2 Na caixa de dilogo Renomear classe, verifique se a classe a ser renomeada est selecionada no menu pop-up

Renomear classe.
3 Na caixa de texto Novo nome, digite o novo nome da nova classe e clique em OK.

Se a classe que voc est renomeando for interna ao cabealho do documento atual, o Dreamweaver alterar o nome da classe, assim como todas as ocorrncias do nome de classe do documento atual. Se a classe que voc est renomeando estiver em um arquivo CSS externo, o Dreamweaver abrir e alterar o nome de classe do arquivo. O Dreamweaver tambm inicia uma caixa de dilogo Localizar e substituir no nvel do site, a fim de que voc possa procurar todas as ocorrncias do nome de classe antigo no site.

Movimentao/exportao de regras CSS


Os recursos de gerenciamento de CSS do Dreamweaver facilita a movimentao ou a exportao de regras CSS para diferentes locais. Voc pode mover regras de um documento para outro, do cabealho de um documento para uma folha de estilos externa, entre arquivos CSS externos e muito mais. Nota: Se a regra que voc est tentando mover estiver em conflito com uma regra na folha de estilos de destino, o Dreamweaver exibir a caixa de dilogo J existe regra com nome igual. Se voc optar por mover a regra conflitante, o Dreamweaver colocar a regra movida imediatamente ao lado da regra conflitante na folha de estilos de destino.

Mais tpicos da Ajuda


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

Movimentao/exportao de regras CSS para uma nova folha de estilos


1 Siga um destes procedimentos:

No painel Estilos CSS, selecione a(s) regra(s) que deseja mover. Em seguida, clique com o boto direito do mouse
na seleo e selecione Mover regras CSS no menu de contexto. Para selecionar vrias regras, mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto clica nas regras a serem selecionadas.

Na Visualizao de cdigo, selecione a(s) regra(s) que voc deseja mover. Em seguida, clique com o boto direito
do mouse na seleo e selecione Estilos CSS > Mover regras CSS no menu de contexto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 142


Criao de pginas com CSS

Nota: A seleo parcial de uma regra resultar na realocao de toda a regra.


2 Na caixa de dilogo Mover para folha de estilos externa, selecione a opo de nova folha de estilos e clique em OK. 3 Na caixa de dilogo Salvar arquivo de folha de estilos como, digite um nome para a nova folha de estilos e clique

em Salvar. Quando voc clica em Salvar, o Dreamweaver salva uma nova folha de estilos com as regras selecionadas e a anexa ao documento atual. Tambm possvel mover as regras usando a barra de ferramentas Codificao. A barra de ferramentas Codificao est disponvel somente na Visualizao de cdigo.

Movimentao/exportao de regras CSS para uma folha de estilos existente


1 Siga um destes procedimentos:

No painel Estilos CSS, selecione a(s) regra(s) que deseja mover. Em seguida, clique com o boto direito do mouse
na seleo e selecione Mover regras CSS no menu de contexto. Para selecionar vrias regras, mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto clica nas regras a serem selecionadas.

Na Visualizao de cdigo, selecione a(s) regra(s) que voc deseja mover. Em seguida, clique com o boto direito
do mouse na seleo e selecione Estilos CSS > Mover regras CSS no menu de contexto. Nota: A seleo parcial de uma regra resultar na realocao de toda a regra.
2 Na caixa de dilogo Mover para folha de estilos externa, selecione uma folha de estilos existente no menu pop-up

ou v at uma folha de estilos existente e clique em OK. Nota: O menu pop-up exibe todas as folhas de estilos vinculadas ao documento atual. Tambm possvel mover as regras usando a barra de ferramentas Codificao. A barra de ferramentas Codificao est disponvel somente na Visualizao de cdigo.

Reorganizao ou movimentao das regras CSS arrastando-as


No painel Estilos CSS (modo Tudo), selecione uma regra e arraste-a para o local desejado. Voc pode selecionar e

arrastar para reordenar as regras em uma folha de estilos ou mover uma regra para outra folha de estilos ou cabealho de documento. possvel mover mais de uma regra por vez, mantendo pressionada a tecla Control (Windows) ou mantendo pressionada a tecla Command (Macintosh) enquanto clica em vrias regras para selecion-las.

Seleo de vrias regras antes de mov-las


No painel Estilos CSS, mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla

Command (Macintosh) enquanto clica nas regras a serem selecionadas.

Converso da CSS inline em uma regra CSS


Os estilos inline no so prticas recomendadas. Para tornar a CSS mais limpa e organizada, converta os estilos inline em regras CSS que residem no cabealho do documento ou em uma folha de estilos externa.
1 Na Visualizao de cdigo (Exibir > Cdigo), selecione a tag <style> inteira que contenha a CSS inline a ser

convertida.
2 Clique com o boto direito do mouse e selecione Estilos CSS > Converter CSS inline em regra.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 143


Criao de pginas com CSS

3 Na caixa de dilogo Converter CSS inline, digite um nome de classe para a nova regra e siga um destes

procedimentos:

Especifique uma folha de estilos na qual a nova regra CSS deve aparecer e clique em OK. Selecione o cabealho do documento como o local onde a nova regra CSS deve aparecer e clique em OK.
Tambm possvel converter as regras usando a barra de ferramentas Codificao. A barra de ferramentas Codificao est disponvel somente na Visualizao de cdigo.

Mais tpicos da Ajuda


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

Vinculao a uma folha de estilos CSS externa


Quando voc edita uma folha de estilos CSS externa, todos os documentos vinculados a essa folha de estilos CSS so atualizados para refletir essas edies. possvel exportar os estilos CSS localizados em um documento para criar uma nova folha de estilos CSS, e anexar ou vincular-se a uma folha de estilos externa para aplicar os estilos encontrados nesse local. Voc pode anexar s pginas qualquer folha de estilos criada ou copiada no site. Alm disso, o Dreamweaver fornecido com folhas de estilos predefinidas que podem ser movidas automaticamente para o site e anexadas s pginas.
1 Abra o painel Estilos CSS seguindo um destes procedimentos:

Selecione Janela > Estilos CSS. Pressione Shift + F11.


2 No painel Estilos CSS, clique no boto Anexar folha de estilos. (Ele est localizado no canto inferior direito do

painel.)
3 Siga um destes procedimentos:

Clique em Procurar para ir at uma folha de estilos CSS externa. Digite o caminho para a folha de estilos na caixa Arquivo/URL.
4 Em Adicionar como, selecione uma das opes:

Para criar um link entre o documento atual e uma folha de estilos externa, selecione Link. Esse procedimento criar
uma tag de link href no cdigo HTML e referencia o URL no local em que a folha de estilos publicada est localizada. O Microsoft Internet Explorer e o Netscape Navigator oferecem suporte a esse mtodo.

Voc no pode usar uma tag de link para adicionar uma referncia de uma folha de estilos externa a outra. Para
aninhar folhas de estilos, use uma diretiva de importao. A maioria dos navegadores tambm reconhece a diretiva de importao em um pgina (e no apenas nas folhas de estilos). H diferenas sutis na maneira como as propriedades conflitantes so resolvidas quando existem regras sobrepostas em folhas de estilos externas vinculadas a uma pgina ou importadas para uma pgina. Para importar uma folha de estilos externa, em vez de vincular-se a ela, selecione Importar.
5 No menu pop-up Mdia, especifique a mdia de destino da folha de estilos.

Para obter mais informaes sobre as folhas de estilos dependentes de mdia, consulte o site da World Wide Web Consortium em www.w3.org/TR/CSS21/media.html.
6 Clique no boto Visualizar para verificar se a folha de estilos aplica os estilos desejados pgina atual.

Se os estilos aplicados no forem o que voc espera, clique em Cancelar para remover a folha de estilos. A aparncia da pgina ser revertida para o estado anterior.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 144


Criao de pginas com CSS

7 Clique em OK.

Mais tpicos da Ajuda


Criar uma pgina baseada em um arquivo de amostra do Dreamweaver na pgina 64

Edio de uma folha de estilos CSS


Uma folha de estilos CSS geralmente inclui uma ou mais regras. Voc pode editar uma regra individual em uma folha de estilos CSS usando o painel Estilos CSS ou, se preferir, pode trabalhar diretamente na folha de estilos CSS.
1 No painel Estilos CSS (Janela > Estilos CSS), selecione o modo Tudo. 2 No painel Todas as regras, clique duas vezes no nome da folha de estilos a ser editada. 3 Na janela Documento, modifique a folha de estilos conforme desejado e salve-a.

Formatao do cdigo CSS


Voc pode definir preferncias que controlam o formato do cdigo CSS sempre que cria ou edita uma regra CSS usando a interface do Dreamweaver. Por exemplo, possvel definir preferncias que colocaro todas as propriedades CSS em linhas separadas, inserir uma linha em branco entre as regras CSS etc. Quando voc define preferncias de formatao de cdigo CSS, as preferncias selecionadas so automaticamente aplicadas a todas as novas regras CSS criadas. No entanto, voc tambm pode aplicar essas preferncias manualmente a documentos individuais. Isso poder ser til ser voc tiver um documento HTML ou CSS mais antigo que precise de formatao. Nota: As preferncias de formatao de cdigo CSS se aplicam s regras CSS apenas nas folhas de estilos externas ou incorporadas (e no aos estilos inline).

Mais tpicos da Ajuda


Alterao do formato de cdigo na pgina 300

Definio das preferncias de formatao de cdigo CSS


1 Selecione Editar > Preferncias. 2 Na caixa de dilogo Preferncias, selecione a categoria Formato do cdigo. 3 Ao lado de Formatao avanada, clique no boto CSS. 4 Na caixa de dilogo Opes de formato de origem CSS, selecione as opes a serem aplicadas ao cdigo-fonte CSS.

Uma visualizao da CSS de acordo com as opes selecionadas exibida na janela Visualizar abaixo.
Recuar propriedades com Define o valor de recuo das propriedades em uma regra. Voc pode especificar tabulaes

ou espaos.
Cada propriedade em uma linha separada Coloca cada propriedade de uma regra em uma linha separada. Colchete de abertura em linha separada Coloca o colchete de abertura de uma regra em uma linha separada do

seletor.
Somente se houver mais de 1 propriedade Coloca as regras de propriedade nica na mesma linha do seletor. Todos os seletores de uma regra na mesma linha Coloca todos os seletores da regra na mesma linha. Linha em branco entre regras Insere uma linha em branco entre cada regra.

5 Clique em OK.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 145


Criao de pginas com CSS

Nota: A formatao de cdigo CSS tambm herda a preferncia Tipo de quebra de linha definida na categoria Formato do cdigo da caixa de dilogo Preferncias.

Formatao manual do cdigo CSS em uma folha de estilos CSS


1 Abra uma folha de estilos CSS. 2 Selecione Comandos > Aplicar formatao de origem.

As opes de formatao definidas nas preferncias de formatao de cdigo de origem so aplicadas ao documento inteiro. Voc no pode formatar selees individuais.

Formatao manual do cdigo CSS incorporado


1 Abra uma pgina HTML que contm CSS incorporada no cabealho do documento. 2 Selecione qualquer parte do cdigo CSS. 3 Selecione Comandos > Aplicar formatao de origem seleo.

As opes de formatao definidas nas preferncias de formatao do cdigo CSS so aplicadas a todas as regras CSS apenas no cabealho do documento. Nota: Voc pode selecionar Comandos > Aplicar formatao de origem para formatar o documento inteiro de acordo com as preferncias de formatao de cdigo especificadas.

Desativar/Ativar CSS
O recurso Desativar/Ativar propriedade de CSS permite comentar partes do CSS do painel Estilos CSS, sem ter que fazer alteraes diretamente no cdigo. Quando voc comenta partes do CSS, pode ver que tipos de efeitos as propriedades e os valores especficos tm na sua pgina. Quando voc desativa uma propriedade do CSS, o Dreamweaver adiciona tags de comentrios de CSS e um rtulo [desativado] propriedade do CSS que voc desativou. Voc pode, em seguida, reativar ou excluir a propriedade do CSS desativada, de acordo com sua preferncia. Para obter uma viso geral, em vdeo, da equipe de engenharia do Dreamweaver, sobre como trabalhar com Ativar/desativar CSS, consulte www.adobe.com/go/dwcs5css_br.
1 No painel Propriedades do painel Estilos CSS (Janela > Estilos CSS), selecione a propriedade que deseja desativar. 2 Clique no cone Desativar/Ativar propriedade de CSS no canto direito inferior do painel Propriedades. O cone

tambm aparece se voc mover o mouse para a esquerda da prpria propriedade. Depois de clicar no cone Desativar/Ativar propriedade de CSS, um cone Desativado aparecer esquerda da propriedade. Para reativar a propriedade, clique no cone Desativado ou clique com o boto direito do mouse (Windows) ou Control-clique (SO Macintosh) na propriedade e selecione Ativar.
3 (Opcional) Para ativar ou excluir todas as propriedades desativadas de uma regra selecionada, clique com o boto

direito do mouse (Windows) ou Control-clique (SO Macintosh) em qualquer regra ou propriedade na qual propriedades estejam desativadas e selecione Ativar todas as desativadas em Regra selecionada ou Excluir todas as desativadas na regra selecionada.

Inspecionar CSS na visualizao ativa


O modo de inspeo funciona junto com a visualizao ativa para ajud-lo a identificar rapidamente os elementos HTML e seus estilos CSS associados. Com o modo Inspeo acionado, voc pode passar com o mouse sobre elementos da pgina para ver os atributos do modelo da caixa CSS para qualquer elemento de nvel de bloqueio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 146


Criao de pginas com CSS

Nota: Para obter mais informaes sobre o modelo de caixa de CSS, consulte a especificao CSS 2.1. Alm de ver uma representao visual do modelo de caixa no modo Inspeo, voc tambm pode usar o painel Estilos CSS, conforme passar o mouse sobre os elementos na janela Documento. Quando voc tem o painel Estilos CSS aberto no modo Atual e passa com o mouse sobre um elemento da pgina, as regras e as propriedades do painel Estilos CSS so atualizadas automaticamente para mostrar as regras e propriedades desse elemento. Alm disso, qualquer visualizao ou painel relacionado ao elemento sobre o qual voc passa o mouse atualizado tambm (por exemplo, Visualizao de cdigo, o Seletor de tags, o Inspetor de propriedades e assim por diante). Para obter uma viso geral, em vdeo, da equipe de engenharia do Dreamweaver, sobre como trabalhar com o modo de inspeo, consulte www.adobe.com/go/dwcs5inspect_br.
1 Com o documento aberto na janela Documento, clique no boto Inspecionar (ao lado do boto Visualizao ativa

na barra de ferramentas do documento) Nota: Se ainda no estiver na visualizao Ativa, o modo Inspeo a ativar automaticamente.
2 Passe o mouse sobre elementos da pgina para ver o modelo de caixa de CSS. O modo Inspeo destaca diferentes

cores para a borda, a margem, o preenchimento e o contedo.


3 (Opcional) Pressione a seta para a esquerda no teclado do computador para destacar o pai do elemento atualmente

destacado. Pressione a seta para a direita para retornar o destaque para o elemento filho.
4 (Opcional) Clique em um elemento para bloquear uma seo destacada.

Nota: Clicar em um elemento para bloquear uma seleo destacada desativa o modo Inspeo.

Mais tpicos da Ajuda


Visualizao de pginas no Dreamweaver na pgina 287 painel Estilos CSS na pgina 128

Verificao de problemas de processamento de CSS em vrios navegadores


O recurso Verificao de compatibilidade do navegador (VCN) ajuda a localizar combinaes de HTML e CSS que apresentam problemas em determinados navegadores. Quando voc executa uma VCN em um arquivo aberto, o Dreamweaver rastreia o arquivo e reporta quaisquer problemas de processamento de CSS no painel Resultados. Uma classificao de confiana, indicada por um quarto de crculo, meio crculo, trs quarto de crculo ou um crculo completamente preenchido, informa a probabilidade da ocorrncia do bug (um quarto de crculo preenchido indicando uma possvel ocorrncia e um crculo completamente preenchido indicando uma ocorrncia muito provvel). Para cada bug potencial localizado, o Dreamweaver tambm fornece um link direto para a documentao sobre o bug no Adobe CSS Advisor, um site que informa detalhadamente os bugs de processamento de navegador comumente conhecidos, e oferece solues para corrigi-los. Por padro, o recurso VCN executa a verificao nos seguintes navegadores: Firefox 1.5; Internet Explorer (Windows) 6.0 e 7.0; Internet Explorer (Macintosh) 5.2; Netscape Navigator 8.0; Opera 8.0 e 9.0; Safari 2.0. Esse recurso substitui a antiga Verificao do navegador de destino, mas retm a funcionalidade CSS. Ou seja, o novo recurso VCN ainda testa o cdigo nos documentos para verificar se h suporte para algum valor ou propriedade CSS nos navegadores de destino. Trs nveis de possveis problemas de suporte a navegador podem surgir:

Um erro indica o cdigo CSS que possivelmente ocasionar um srio problema visvel em um determinado
navegador, como o desaparecimento de partes de uma pgina. (O erro uma designao padro dos problemas de suporte a navegador; portanto, em alguns casos, o cdigo com um efeito desconhecido tambm marcado como erro.)

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 147


Criao de pginas com CSS

Um aviso indica uma parte do cdigo CSS qual um determinado navegador no oferece suporte, mas no
ocasionar nenhum problema grave de exibio.

Uma mensagem informativa indica o cdigo ao qual um determinado navegador no oferece suporte, mas que no
tem nenhum efeito visvel. As verificaes de compatibilidade de navegador no alteram o documento de forma alguma.

Mais tpicos da Ajuda


Validar tags na pgina 325 CSS Advisor

Verificao de compatibilidade do navegador


Selecione Arquivo > Verificar pgina > Compatibilidade do navegador.

Seleo do elemento afetado por um problema encontrado


Clique duas vezes no problema no painel Resultados.

Saltar para o problema anterior ou seguinte no cdigo


Selecione Prximo problema ou Problema anterior no menu Verificao de compatibilidade do navegador na barra

de ferramentas Documento.

Seleo dos navegadores para verificao do Dreamweaver


1 No painel Resultados (Janela > Resultados), selecione a aba Verificao de compatibilidade do navegador. 2 Clique na seta verde no canto superior esquerdo do painel Resultados e selecione Configuraes. 3 Marque a caixa de seleo ao lado de cada navegador a ser verificado. 4 Para cada navegador selecionado, escolha uma verso mnima a ser verificada no menu pop-up correspondente.

Por exemplo, para saber se os bugs de processamento de CSS podem aparecer no Internet Explorer 5.0 e posterior, e Netscape Navigator 7.0 e posterior, marque as caixas de seleo ao lado desses nomes de navegador, e selecione 5.0 no menu pop-up do Internet Explorer e 7.0 no menu pop-up do Netscape.

Excluso de um problema na verificao de compatibilidade de navegador


1 Execute a verificao de compatibilidade do navegador. 2 No painel Resultados, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control

enquanto clica (Macintosh) no problema a ser excludo na verificao futura.


3 Selecione Ignorar questo no menu de contexto.

Edio da lista de problemas ignorados


1 No painel Resultados (Janela > Resultados), selecione a aba Verificao de compatibilidade do navegador. 2 Clique na seta verde no canto superior esquerdo do painel Resultados e selecione Editar lista de questes ignoradas. 3 No arquivo Exceptions.xml, localize o problema a ser excludo da lista de problemas ignorados e exclua-o. 4 Salve e feche o arquivo Exceptions.xml.

Salvar um relatrio de verificao de compatibilidade de navegador


1 Execute a verificao de compatibilidade do navegador.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 148


Criao de pginas com CSS

2 Clique no boto Salvar relatrio no lado esquerdo do painel Resultados.

Focalize os botes no painel Resultados para ver as dicas de ferramentas do boto. Nota: Os relatrios no so salvos automaticamente; se voc deseja manter uma cpia de um relatrio, siga o procedimento acima para salv-la.

Visualizao de um relatrio de verificao de compatibilidade de navegador


1 Execute a verificao de compatibilidade do navegador. 2 Clique no boto Procurar relatrio no lado esquerdo do painel Resultados.

Focalize os botes no painel Resultados para ver as dicas de ferramentas do boto.

Abertura do site Adobe CSS Advisor


1 No painel Resultados (Janela > Resultados), selecione a aba Verificao de compatibilidade do navegador. 2 Clique no texto de link no canto inferior direito do painel.

Usar Folhas de estilo em tempo de design


As folhas de estilos em tempo de design permitem mostrar ou ocultar o design aplicado por uma folha de estilos CSS enquanto voc trabalha em um documento do Dreamweaver. Por exemplo, voc pode usar esta opo para incluir ou excluir o efeito de uma folha de estilos apenas Macintosh ou apenas Windows enquanto voc cria uma pgina. As folhas de estilos em tempo de design se aplicam somente enquanto voc est trabalhando no documento; quando a pgina exibida em uma janela de navegador, apenas os estilos que esto anexados ou incorporados ao documento aparecem no navegador. Nota: Voc tambm pode ativar ou desativar os estilos de uma pgina inteira usando a barra de ferramentas Processamento do estilo. Para exibir a barra de ferramentas, selecione Exibir > Barras de ferramentas > Processamento do estilo. O boto Alternar exibio de estilos CSS (o boto da extrema direita) funciona independentemente dos outros botes de mdia da barra de ferramentas. Para usar uma folha de estilos em tempo de design, siga estas etapas.
1 Abra a caixa de dilogo Folhas de estilo em tempo de design seguindo um destes procedimentos:

Clique com o boto direito do mouse no painel Estilos CSS e, no menu de contexto, selecione Em tempo de design. Selecione Formatar > Estilos CSS > Em tempo de design.
2 Na caixa de dilogo, defina as opes para mostrar ou ocultar uma folha de estilos selecionada:

Para exibir uma folha de estilos CSS em tempo de design, clique no boto de adio (+) acima de Mostrar somente
em tempo de design e, na caixa de dilogo Selecionar folha de estilos, procure a folha de estilos CSS que voc deseja mostrar.

Para ocultar uma folha de estilos CSS, clique no boto de adio (+) acima de Ocultar em tempo de design e, na
caixa de dilogo Selecionar folha de estilos, procure a folha de estilos CSS que voc deseja ocultar.

Para remover uma folha de estilos na lista, clique na folha de estilos a ser removida e clique no boto de subtrao
() apropriado.
3 Clique em OK para fechar a caixa de dilogo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 149


Criao de pginas com CSS

O painel Estilos CSS atualizado com o nome da folha de estilos selecionada, juntamente com o indicador oculto ou design, para refletir o status da folha de estilos.

Mais tpicos da Ajuda


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

Uso de exemplos de folhas de estilos do Dreamweaver


O Dreamweaver fornece exemplos de folhas de estilos que voc pode aplicar s pginas ou usar como pontos de partida para desenvolver seus prprios estilos.
1 Abra o painel Estilos CSS seguindo um destes procedimentos:

Selecione Janela > Estilos CSS. Pressione Shift+F11.


2 No painel Estilos CSS, clique no boto Anexar folha de estilos externa. (Ele est localizado no canto inferior direito

do painel.)
3 Na caixa de dilogo Anexar folha de estilos externa, clique em Exemplo de folhas de estilo. 4 Na caixa de dilogo Exemplo de folhas de estilo, selecione uma folha de estilos na caixa de listagem.

Quando voc selecionar as folhas de estilos na caixa de listagem, o painel Visualizar exibir a formatao de texto e cor da folha de estilos selecionada.
5 Clique no boto Visualizar para aplicar a folha de estilos e verifique se ele aplica os estilos desejados pgina atual.

Se os estilos aplicados no estiverem como voc espera, selecione outra folha de estilos na lista e clique em Visualizar ver esses estilos.
6 Por padro, o Dreamweaver salva a folha de estilos em uma pasta chamada CSS imediatamente abaixo da raiz do

site definido para a pgina. Se essa pasta no existir, o Dreamweaver a criar. Voc pode salvar o arquivo em outro local clicando em Procurar e mudando de pasta.
7 Quando voc localizar uma folha de estilos cujas regras de formatao atendem aos critrios de design, clique em OK.

Atualizao das folhas de estilos CSS em um site do Contribute


Os usurios do Adobe Contribute no podem fazer alteraes em uma folha de estilos CSS. Para alterar uma folha de estilos em um site do Contribute, use o Dreamweaver.
1 Edite a folha de estilos usando as ferramentas de edio de folhas de estilos do Dreamweaver. 2 Instrua os usurios do Contribute que esto trabalhando no site a publicar pginas que usam essa folha de estilos e

edite novamente essas pginas para visualizar a nova folha de estilos. Veja a seguir os fatores importantes que voc deve ter em mente ao atualizar as folhas de estilos para um site do Contribute:

Se voc fizer alteraes em uma folha de estilos enquanto o usurio do Contribute estiver editando uma pgina que
a utilize, o usurio s ver as alteraes efetuadas na folha de estilos depois que publicar a pgina.

Se voc excluir um estilo de uma folha de estilos, o nome do estilo no ser excludo das pginas que a utilizam.
Como o estilo no existe mais, ele no ser exibido da maneira esperada pelo usurio do Contribute. Desse modo, se um usurio informar a voc que nada acontece quando ele aplica um determinado estilo, talvez o estilo tenha sido excludo da folha de estilos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 150


Criao de pginas com CSS

Layout das pginas com CSS


Sobre o layout da pgina CSS
Um layout de pgina CSS usa o formato de folhas de estilos em cascata, em vez dos quadros e tabelas HTML tradicionais, para organizar o contedo em uma pgina da Web. O bloco de criao bsico do layout CSS a tag div, uma tag HTML que, na maioria dos casos, atua como um continer de texto, imagens e outros elementos de pgina. Quando voc cria um layout CSS, coloque tags div na pgina, adicione contedo a elas e posicione-as em vrios lugares. Diferente das clulas de tabela, que so restritas a algum lugar dentro das linhas e colunas de uma tabela, as tags div podem aparecer em qualquer lugar de uma pgina da Web. Voc pode posicionar as tags div de forma absoluta (especificando as coordenadas x e y) ou de modo relativo (especificando a distncia entre elas e outros elementos da pgina). Voc tambm pode posicionar as tags div especificando flutuaes, preenchimentos e margens, o mtodo preferido pelos padres da Web de hoje. A criao de layouts CSS do zero pode ser difcil porque h muitas formas de fazer isso. Voc pode criar um layout CSS simples de duas colunas definindo flutuaes, margens, preenchimentos e outras propriedades CSS em uma quantidade quase infinita de combinaes. Alm isso, o problema de processamento entre navegadores pode fazer com que determinados layouts CSS sejam exibidos corretamente em alguns navegadores e incorretamente em outros. O Dreamweaver facilita a criao de pginas com layouts CSS fornecendo mais de 16 layouts predefinidos que funcionam em diferentes navegadores. O uso dos layouts CSS predefinidos fornecidos com o Dreamweaver a maneira mais fcil de criar uma pgina com um layout CSS, mas voc tambm pode criar esses layouts usando os elementos com posio absoluta (elementos PA) do Dreamweaver. Um elemento PA do Dreamweaver um elemento de pgina HTML, especificamente uma tag div ou qualquer outra tag, que tem uma posio absoluta. No entanto, os elementos PA do Dreamweaver tm uma limitao: como eles so posicionados de forma absoluta, suas posies nunca se ajustam pgina de acordo com o tamanho da janela do navegador. Se voc um usurio avanado, tambm pode inserir tags div manualmente e aplicar os estilos de posicionamento CSS a elas para criar layouts de pgina. Para obter mais informaes sobre os diferentes tipos de layouts CSS, consulte o artigo de Gary White Layout 101. Para obter um tutorial sobre como criar layouts de pginas de CSS e trabalhar com outros aperfeioamentos de CSS, consulte www.adobe.com/go/learn_dw_comm05_br.

Sobre a estrutura do layout de pgina CSS


Antes de passar para esta seo, voc deve estar familiarizado com os conceitos bsicos da CSS. O bloco de criao bsico do layout CSS a tag div, uma tag HTML que, na maioria dos casos, atua como um continer de texto, imagens e outros elementos de pgina. O exemplo a seguir mostra uma pgina HTML que contm trs tags div separadas: uma tag de continer grande e duas outras tags uma tag de barra lateral e uma tag de contedo principal dentro da tag de continer.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 151


Criao de pginas com CSS

A. Div de continer B. Div de barra lateral C. Div de contedo principal

Este o cdigo das trs tags div do HTML:


<!--container div tag--> <div id="container"> <!--sidebar div tag--> <div id="sidebar"> <h3>Sidebar Content</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div> <!--mainContent div tag--> <div id="mainContent"> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>H2 level heading </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div>

No exemplo acima, no h nenhum estilo anexado a nenhuma das tags div. Sem as regras CSS definidas, cada tag div e seu respectivo contedo ficam em uma local padro da pgina. No entanto, se cada tag div tiver uma ID exclusiva (como no exemplo anterior), voc poder usar suas IDs para criar regras CSS que, quando aplicadas, alteram o estilo e posicionamento das tags div. A regra CSS a seguir, que pode residir no cabealho do documento ou em um arquivo CSS externo, cria regras de estilo para a primeira tag dig, ou a tag div de continer, na pgina:
#container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; }

A regra #container dita que a tag div de continer deve ter uma largura de 780 pixels, um fundo branco, nenhuma margem (no lado esquerdo da pgina), uma borda slida preta de 1 pixel, e o texto alinhado esquerda. Os resultados da aplicao da regra tag div de continer so os seguintes:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 152


Criao de pginas com CSS

Tag div de continer, 780 pixels, sem margem A. Texto alinhado esquerda B. Fundo branco C. Borda slida preta de 1 pixel

A prxima regra CSS cria regras de estilo para a tag div de barra lateral:
#sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; }

A regra #sidebar dita que a tag div de barra lateral tem uma largura de 200 pixels, um fundo cinza, um preenchimento superior e inferior de 15 pixels, um preenchimento direita de 10 pixels e um preenchimento esquerda de 20 pixels. (A ordem padro de preenchimento da parte superior direita para a parte inferior esquerda.) Alm disso, a regra posiciona a tag div de barra lateral com float: left uma propriedade que coloca a tag div de barra lateral no lado esquerdo da tag div de continer. Estes so os resultados da aplicao da regra tag div de barra lateral:

Div de barra lateral, flutuao esquerda A. Largura de 200 pixels B. Preenchimento superior e inferior, 15 pixels

Por fim, a regra CSS da tag div de continer principal finaliza o layout:
#mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; }

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 153


Criao de pginas com CSS

A regra #mainContent dita que a div de contedo principal ter uma margem esquerda de 250 pixels; isso significa que ela colocar 250 pixels de espao entre o lado esquerdo da div de continer e o lado esquerdo da div de contedo principal. Alm disso, a regra fornece 20 pixels de espaamento nos lados direito, inferior e esquerdo da div de contedo principal. Estes so os resultados da aplicao da regra div mainContent:

Div de contedo principal, margem esquerda de 250 pixels A. Preenchimento esquerdo de 20 pixels B. Preenchimento direito de 20 pixels C. Preenchimento inferior de 20 pixels

Esta ser a aparncia do cdigo completo:


<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; } #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } </style> </head> <body> <!--container div tag-->

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 154


Criao de pginas com CSS

<div id="container"> <!--sidebar div tag--> <div id="sidebar"> <h3>Sidebar Content</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div> <!--mainContent div tag--> <div id="mainContent"> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>H2 level heading </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div> </body>

Nota: O exemplo de cdigo acima uma verso simplificada do cdigo que desenvolve o layout de barra lateral esquerda fixo de duas colunas quando voc cria um novo documento usando os layouts predefinidos fornecidos com o Dreamweaver.

Mais tpicos da Ajuda


Introduo s folhas de estilos em cascata na pgina 123

Criar uma pgina com um layout CSS


Ao criar uma nova pgina no Dreamweaver, voc poder criar uma que j contenha um layout CSS. O Dreamweaver fornecido com 16 layouts CSS diferentes que voc pode escolher. Alm disso, possvel criar seus prprios layouts CSS e adicion-los pasta de configurao, a fim de que eles apaream como opes de layout na caixa de dilogo Novo documento. Dreamweaver Os layouts de CSS aplicam acabamento corretamente nos seguintes navegadores: Firefox (Windows e Macintosh) 1.0, 1.5, 2.0 e 3.6; Internet Explorer (Windows) 5.5, 6.0, 7.0 e 8.0; Opera (Windows e Macintosh) 8.0, 9.0, e 10.0; Safari 2.0, 3.0 e 4.0 e Chrome 3.0. Para obter um artigo informativo que explica como usar os layouts de CSS que acompanham o Dreamweaver, consulte o Dreamweaver Developer Center. Tambm h muitos layouts de CSS disponveis no Adobe Dreamweaver Exchange.

Mais tpicos da Ajuda


Criar uma pgina em branco na pgina 60 Definir o tipo e a codificao de documento padro na pgina 66 Vinculao a uma folha de estilos CSS externa na pgina 143

Criar uma pgina com um layout CSS


1 Selecione Arquivo > Novo. 2 Na caixa de dilogo Novo documento, selecione a categoria Pgina em branco. (Essa a seleo padro.)

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 155


Criao de pginas com CSS

3 Em Tipo de pgina, selecione o tipo de pgina que voc deseja criar.

Nota: Voc deve selecionar um tipo de pgina HTML para o layout. Por exemplo, voc pode selecionar HTML, ColdFusion, PHP etc. No possvel criar uma pgina ActionScript, CSS, Item de biblioteca, JavaScript, XML, XSLT ou Componente do ColdFusion com um layout CSS. Alm disso, os tipos de pgina da categoria Outros da caixa de dilogo Novo documento apresentam restrio na incluso de layouts de pgina CSS.
4 Em Layout, selecione o layout CSS que deseja usar. Voc pode escolher entre 16 layouts diferentes. A janela

Visualizar mostra o layout e fornece uma breve descrio do layout selecionado. Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna:
Fixa A largura da coluna especificada em pixels. A coluna no redimensionada com base no tamanho do navegador ou nas configuraes de texto do visitante do site. Lquida A largura da coluna especificada como uma porcentagem da largura do navegador do visitante. O design se

adapta caso o visitante do site torne o navegador mais largo ou mais estreito, mas no se altera com base nas configuraes de texto do visitante do site.
5 Selecione um tipo de documento no menu pop-up TipoDoc. 6 Selecione um local para a CSS do layout em CSS de Layout no menu pop-up.
Adicionar a cabealho Adiciona CSS do layout ao cabealho da pgina que voc est criando. Criar novo arquivo Adiciona a CSS do layout nova folha de estilos CSS externa e anexa a nova folha de estilos pgina que voc est criando. Vincular a arquivo existente Permite a voc especificar um arquivo CSS existente que j contm as regras de CSS necessrias ao layout. Essa opo especialmente til quando voc deseja usar o mesmo layout de CSS (as regras de CSS contidas em um nico arquivo) em vrios documentos.

7 Siga um destes procedimentos:

Se voc selecionou Adicionar a cabealho em CSS de layout no menu pop-up (a opo padro), clique em Criar. Se voc selecionar Criar novo arquivo no menu pop-up CSS de layout, clique em Criar e especifique um nome para
o novo arquivo externo na caixa de dilogo Salvar arquivo de folha de estilos como.

Se voc selecionou Vincular a arquivo existente em CSS de layout no menu pop-up, adicione o arquivo externo
caixa de texto Anexar arquivo CSS, clicando no cone Adicionar folha de estilos, preenchendo a caixa de dilogo Anexar folha de estilos externa e clicando em OK. Quando terminar, clique em Criar na caixa de dilogo Novo documento. Nota: Quando voc selecionar a opo Vincular a arquivo existente, o arquivo especificado j dever ter regras para o arquivo CSS nele contido. Quando voc colocar a CSS de layout em um novo arquivo ou vincular-se a um arquivo existente, o Dreamweaver vincular automaticamente o arquivo pgina HTML que voc est criando. Nota: Os comentrios condicionais do Internet Explorer, que ajudam a resolver os problemas de processamento do IE, permanecem incorporados no cabealho do novo documento de layout CSS, mesmo se voc selecionar Novo arquivo externo ou Arquivo externo existente como local da CSS do layout.
8 (Opcional) Voc tambm pode anexar as folhas de estilos CSS nova pgina (no relacionada ao layout CSS) ao

criar a pgina. Para fazer isso, clique no cone Anexar folha de estilos acima do painel Anexar arquivo CSS e selecione uma folha de estilos CSS. Para obter uma descrio detalhada desse processo, consulte o artigo de Anexar automaticamente uma folha de estilos a novos documentos de David Powers.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 156


Criao de pginas com CSS

Adio dos layouts CSS personalizados lista de opes


1 Crie uma pgina HTML que contm o layout CSS que voc gostaria de adicionar lista de opes na caixa de

dilogo Novo documento. A CSS do layout deve residir no cabealho da pgina HTML. Para tornar o layout CSS personalizado consistente com os outros layouts fornecidos com o Dreamweaver, salve o arquivo HTML com a extenso .htm.
2 Adicione a pgina HTML pasta Adobe Dreamweaver CS4\Configuration\BuiltIn\Layouts. 3 (Opcional) Adicione uma imagem de visualizao do layout (por exemplo, um arquivo .gif ou .png) pasta Adobe

Dreamweaver CS4\Configuration\BuiltIn\Layouts. As imagens padro fornecidas com o Dreamweaver so arquivos PNG de 227 pixels de largura x 193 pixels de altura. Atribua imagem de visualizao o mesmo nome do arquivo HTML, a fim de que voc possa control-la facilmente. Por exemplo, se o arquivo HTML for myCustomLayout.htm, atribua o nome myCustomLayout.png imagem de visualizao.
4 (Opcional) Crie um arquivo de anotaes para o layout personalizado, abrindo a pasta Adobe Dreamweaver

CS4\Configuration\BuiltIn\Layouts\_notes, copiando e colando qualquer arquivo de anotao existente na mesma pasta e renomeando a cpia do layout personalizado. Por exemplo, voc pode copiar o arquivo oneColElsCtr.htm.mno e renome-lo como myCustomLayout.htm.mno.
5 (Opcional) Aps criar um arquivo de anotaes para o layout personalizado, voc poder abrir o arquivo e

especificar o nome, a descrio e a imagem de visualizao do layout.

Trabalho com tags div


Inserir e editar tags div
Voc pode criar layouts de pgina inserindo manualmente tags div e aplicando os estilos de posicionamento CSS a elas. Uma tag div uma tag que define divises lgicas no contedo de uma pgina da Web. Voc pode usar tags div para centralizar blocos de contedo, criar efeitos de coluna, criar diferentes reas de cor e muito mais. Se no estiver familiarizado com o uso das tags div e folhas de estilos em cascata (CSS) para criar pginas da Web, voc poder criar um layout CSS baseado em um dos layouts predefinidos fornecidos com o Dreamweaver. Se no estiver acostumado a trabalhar com a CSS, mas estiver familiarizado com as tabelas, voc dever tambm tentar utiliz-las. Nota: O Dreamweaver trata todas as tags div com posio absoluta como elementos PA (elementos com posio absoluta), mesmo que voc no tenha criado essas tags usando a ferramenta de desenho Div PA.

Mais tpicos da Ajuda


Sobre os elementos PA do Dreamweaver na pgina 160 Criar uma pgina com um layout CSS na pgina 154 Apresentao do contedo em tabelas na pgina 175

Insero de tags div


Voc pode usar tags div para criar blocos de layout CSS e posicion-los no documento. Isso ser til se voc tiver uma folha de estilos CSS existente com estilos de posicionamento anexados ao documento. O Dreamweaver permite que voc insira rapidamente uma tag div e aplique estilos existentes a ela.
1 Na janela Documento, coloque o ponto de insero no local em que a tag div deve aparecer.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 157


Criao de pginas com CSS

2 Siga um destes procedimentos:

Selecione Inserir > Objetos de layout > Tag div. Na categoria Layout do painel Inserir, clique no boto Inserir tag div
3 Defina uma das seguintes opes:
Inserir Permite que voc selecione o local da tag div e o nome da tag caso ela no seja nova. Classe Exibe o estilo de classe atualmente aplicado tag. Se voc anexou uma folha de estilos, as classes definidas nessa folha de estilos aparecero na lista. Use este menu pop-up para selecionar o estilo que voc deseja aplicar tag. ID Permite que voc altere o nome usado para identificar a tag div. Se voc anexou uma folha de estilos, as IDs

definidas nessa folha de estilos aparecero na lista. As IDs dos blocos que j esto no documento no so listadas. Nota: O Dreamweaver informar se voc inserir a mesma ID de outra tag no documento.
Nova regra CSS Abre a caixa de dilogo Nova regra CSS.

4 Clique em OK.

A tag div aparece como uma caixa no documento com o texto do alocador de espao. Quando voc move o ponteiro sobre a borda da caixa, o Dreamweaver o reala. Se a tag div tiver uma posio absoluta, ela se tornar um elemento PA. (Voc pode editar tags div que no possuem posio absoluta.)

Mais tpicos da Ajuda


Sobre os elementos PA do Dreamweaver na pgina 160 Criar uma pgina com um layout CSS na pgina 154

Edio de tags div


Depois que voc inserir uma tag div, poder manipul-la ou adicionar contedo a ela. Nota: As tags div com posio absoluta se tornam elementos PA. Quando voc atribuir bordas a tags div ou quando a opo Contornos do layout CSS estiver selecionada, elas tero bordas visveis. (A opo Contornos do layout CSS selecionada por padro no menu Exibir > Auxlios visuais.) Quando voc move o ponteiro sobre uma tag div, o Dreamweaver reala a tag. possvel alterar a cor do realce ou desativar o realce. Ao selecionar uma tag div, voc poder visualizar e editar regras para ela no painel Estilos CSS. Tambm possvel adicionar contedo tag div colocando o ponto de insero dentro da tag div e adicionando o contedo exatamente como faria ao adicionar contedo a uma pgina.

Mais tpicos da Ajuda


Sobre os elementos PA do Dreamweaver na pgina 160 Abertura do painel Estilos CSS na pgina 131 Visualizao e edio das regras aplicadas uma tag div
1 Siga um destes procedimentos para selecionar a tag div:

Clique na borda da tag div.


Procure o realce para ver a borda.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 158


Criao de pginas com CSS

Clique dentro da tag div e pressione Control+A (Windows) ou Command+A (Macintosh) duas vezes. Clique dentro da tag div e selecione a tag div no seletor de tags na parte inferior da janela Documento.
2 Selecione Janela > Estilos CSS para abrir o painel Estilos CSS caso ele ainda no esteja aberto.

As regras aplicadas tag div aparecem no painel.


3 Faa as edies conforme necessrio.

Posicionamento do ponto de insero em uma tag div para adicionar contedo Clique em qualquer lugar nas bordas da tag. Alterao do texto do alocador de espao em uma tag div Selecione o texto e digite sobre ele ou pressione Delete. Nota: Voc pode adicionar contedo tag div exatamente como faria ao adicionar um contedo a uma pgina.

Alterar a cor de realce das tags div


Quando voc move o ponteiro sobre a borda de uma tag div na Visualizao de design, o Dreamweaver reala as bordas da tag. Voc pode ativar ou desativar o realce quando necessrio, ou alterar a cor do realce na caixa de dilogo Preferncias.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione Realce na lista de categorias esquerda. 3 Faa uma das seguintes alteraes e clique em OK:

Para alterar a cor de realce das tags div, clique na caixa de cor Passar o mouse, selecione a cor de realce usando o
seletor de cores (ou digite o valor hexadecimal da cor de realce na caixa de texto).

Para ativar ou desativar o realce das tags div, marque ou desmarque a caixa de seleo Mostrar de Passar o mouse.
Nota: Essas opes afetam todos os objetos (por exemplo, as tabelas), que o Dreamweaver reala quando voc move o ponteiro sobre elas.

Blocos de layout CSS


Visualizao dos blocos de layout CSS
Voc pode visualizar blocos de layout CSS enquanto trabalha na Visualizao de design. Um bloco de layout CSS um elemento de pgina HTML que voc pode posicionar em qualquer lugar da pgina. Mais especificamente, um bloco de layout CSS uma tag div sem display:inline ou qualquer outro elemento de pgina que inclui as declaraes CSS display:block, position:absolute ou position:relative. Veja a seguir alguns exemplos de elementos considerados blocos de layout CSS no Dreamweaver:

Uma tag div Uma imagem com uma posio absoluta ou relativa atribuda a ela Uma tag a com o estilo display:block atribudo a ela Um pargrafo com uma posio absoluta ou relativa atribuda a ele
Nota: Para fins de processamento visual, os blocos de layout CSS no incluem elementos inline (ou seja, elementos cujo cdigo esteja em uma linha de texto) ou elementos de bloco simples como pargrafos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 159


Criao de pginas com CSS

O Dreamweaver fornece diversos auxlios visuais para visualizao de blocos de layout CSS. Por exemplo, voc pode ativar contornos, fundos e o modelo de caixa dos blocos de layout CSS ao criar o design. Tambm possvel visualizar dicas de ferramentas que exibem as propriedades de um bloco de layout CSS quando voc flutua o ponteiro do mouse sobre o bloco de layout. A lista de auxlios de bloco de layout CSS a seguir descreve o que o Dreamweaver processa como visvel para cada:
Contornos do layout CSS Exibe os contornos de todos os blocos de layout CSS na pgina. Fundos do layout CSS Exibe as cores de fundo temporariamente atribudas de blocos de layout CSS individuais e oculta qualquer cor ou imagem de fundo que normalmente aparece na pgina.

Sempre que voc ativar o auxlio visual para visualizar fundos de bloco de layout CSS, o Dreamweaver atribui automaticamente a cada bloco de layout CSS uma cor de fundo distinta. (O Dreamweaver seleciona as cores usando um processo algortmico; no h nenhuma maneira de voc mesmo atribuir as cores.) As cores atribudas so visualmente distintas e foram projetadas para ajudar voc a fazer a distino entre os blocos de layout CSS.
Modelo de caixa de layout CSS Exibe o modelo de caixa (ou seja, preenchimento e margens) do bloco de layout CSS

selecionado.

Visualizao dos blocos de layout CSS


Voc pode ativar ou desativar os auxlios visuais do bloco de layout CSS quando necessrio. Visualizao dos contornos de bloco de layout CSS Selecione Exibir > Auxlios visuais > Contornos do layout CSS. Visualizao dos fundos de bloco de layout CSS Selecione Exibir > Auxlios visuais > Fundos do layout CSS. Visualizao dos modelos de caixa de bloco de layout CSS Selecione Exibir > Auxlios visuais > Modelo de caixa de layout CSS. Voc tambm pode acessar as opes de auxlio visual de bloco de layout CSS clicando no boto Auxlios visuais na barra de ferramentas Documento.

Uso dos auxlios visuais com elementos de bloco de layout no-CSS


Voc pode usar uma folha de estilos em tempo de design para exibir os fundos, as bordas ou a caixa de modelo dos elementos que normalmente no so considerados blocos de layout CSS. Para fazer isso, primeiro voc deve criar uma folha de estilos em tempo de design que designe o atributo display:block ao elemento de pgina apropriado.
1 Crie uma folha de estilos CSS externa selecionando Arquivo > Novo, selecionando a pgina Bsico na coluna

Categoria, selecionando CSS na coluna de pgina Bsico e clicando em Criar.


2 Na nova folha de estilos, crie regras que designem o atributo display:block aos elementos de pgina a ser exibido

como blocos de layout CSS. Por exemplo, se voc quisesse exibir uma cor de fundo para pargrafos e itens de lista, poderia criar uma folha de estilos com as seguintes regras:
p{ display:block; } li{ display:block; }

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 160


Criao de pginas com CSS

3 Salve o arquivo. 4 Na Visualizao de design, abra a pgina qual voc deseja anexar os novos estilos. 5 Selecione Formatar > Estilos CSS > Em tempo de design. 6 Na caixa de dilogo Folhas de estilo em tempo de design, clique no boto de adio (+) acima da caixa de texto

Mostrar somente em tempo de design, selecione a folha de estilos recm-criada e clique em OK.
7 Clique em OK para fechar a caixa de dilogo Folhas de estilo em tempo de design.

A folha de estilos anexada ao documento. Se voc criou uma folha de estilos usando o exemplo anterior, todos os pargrafos e itens de lista sero formatados com o atributo display:block, permitindo que voc ative ou desative os auxlios visuais de bloco de layout CSS para pargrafos e itens de lista.

Mais tpicos da Ajuda


Usar Folhas de estilo em tempo de design na pgina 148

Trabalho com elementos PA


Sobre os elementos PA do Dreamweaver
Um elemento PA (elemento com posio absoluta) um elemento de pgina HTML, especificamente uma tag div ou qualquer outra tag, que tem uma posio absoluta. Os elementos PA podem conter texto, imagens ou qualquer outro contedo inserido no corpo de um documento HTML. Com o Dreamweaver, voc pode usar elementos PA ao criar o layout da pgina. Voc pode dispor os elementos PA um em frente ao outro ou um atrs do outro, ocultar alguns elementos PA e exibir outros, e mover os elementos PA pela tela. possvel inserir uma imagem de fundo em um elemento PA e inserir um segundo elemento PA contendo texto com fundo transparente em frente a ele. Geralmente, os elementos PA so tags div com posio absoluta. (Esses so os tipos de elementos PA que o Dreamweaver insere por padro.) Mas lembre-se que voc pode classificar qualquer elemento HTML (por exemplo, uma imagem) como um elemento PA atribuindo uma posio absoluta a ele. Todos os elementos PA (e no apenas as tags div com posio absoluta) aparecem no painel Elementos PA.

Cdigo HTML para elementos Div PA


O Dreamweaver cria elementos PA usando a tag div. Quando voc desenha um elemento PA usando a ferramenta Desenhar Div PA, o Dreamweaver insere uma tag div no documento e atribui a ela um valor de ID (por padro, apDiv1 para a primeira div desenhada, apDiv2 para a segunda e assim sucessivamente). Posteriormente, voc poder renomear a Div PA para qualquer nome usando o painel Elementos PA ou o Inspetor de propriedades. O Dreamweaver tambm usa a CSS incorporada no cabealho do documento para posicionar a Div PA e atribuir a ela suas dimenses exatas. Este um exemplo de cdigo HTML para uma Div PA:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 161


Criao de pginas com CSS

<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sample AP Div Page</title> <style type="text/css"> <!-#apDiv1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; } --> </style> </head> <body> <div id="apDiv1"> </div> </body> </html>

Voc pode alterar as propriedades das Divs PA (ou qualquer elemento PA) na pgina, incluindo as coordenadas x e y, o ndice z (tambm chamado de ordem de empilhamento) e a visibilidade.

Inserir uma div PA


O Dreamweaver permite que voc crie e posicione facilmente Divs PA na pgina. Tambm possvel criar Divs PA aninhadas. Quando voc insere uma Div PA, o Dreamweaver exibe um contorno da Div PA na Visualizao de design, por padro, e reala o bloco quando voc move o ponteiro sobre ela. Para desativar o auxlio visual que mostra os contornos da Div PA (ou de qualquer elemento PA), desative Contornos do elemento PA e Contornos do layout CSS no menu Exibir > Auxlios visuais. Voc tambm pode ativar fundos e o modelo de caixa dos elementos PA como um auxlio visual enquanto cria a Div PA. Aps criar uma Div PA, adicione o contedo a ela colocando o ponto de insero na Div PA e adicionando o contedo como adicionaria um contedo a uma pgina.

Mais tpicos da Ajuda


Seleo de elementos PA na pgina 166 Alterar a cor de realce das tags div na pgina 158 Visualizao dos blocos de layout CSS na pgina 158 Desenho de uma nica Div PA ou de vrias Divs PA consecutivamente 1 Na categoria Layout do painel Inserir, clique no boto Desenhar Div PA .
2 Na Visualizao de design da janela Documento, siga um destes procedimentos:

Arraste para desenhar uma Div PA. Mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh)
enquanto arrasta para desenhar vrias Divs PA consecutivamente. Voc pode desenhar quantas Divs PA desejar, contanto que no solte a tecla Control ou Command.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 162


Criao de pginas com CSS

Insero de uma Div PA em um determinado lugar do documento Coloque o ponto de insero na janela Documento e selecione Inserir > Objetos de layout > Div PA. Nota: Esse procedimento colocar a tag da Div PA no lugar da janela Documento que voc clicou. Desse modo, o processamento visual da Div PA pode afetar outros elementos de pgina (como o texto) que a envolve. Posicionamento do ponto de insero em uma Div PA Clique em qualquer lugar das bordas da Div PA. As bordas da Div PA so realadas e a ala de seleo aparece, mas a prpria Div PA no selecionada. Mostrar bordas da Div PA Selecione Exibir > Auxlios visuais e selecione Contornos da Div PA ou Contornos do layout CSS. Nota: A seleo simultnea das duas opes surte o mesmo efeito Ocultar as bordas da Div PA Selecione Exibir > Auxlios visuais e cancele a seleo de Contornos da Div PA ou Contornos do layout CSS.

Trabalhar com Divs PA aninhadas


Uma Div PA aninhada uma Div PA cuja cdigo est contido nas tags de outra Div PA. Por exemplo, o cdigo a seguir mostra duas Divs PA que no esto aninhadas e duas Divs PA aninhadas:
<div id="apDiv1"></div> <div id="apDiv2"></div> <div id="apDiv3"> <div id="apDiv4"></div> </div>

A representao grfica de qualquer conjunto de Divs PA pode ter a seguinte aparncia:

No primeiro conjunto de tags div, uma div est acima da outra na pgina.l No segundo conjunto, a div apDiv4 est, na verdade, dentro da div apDiv3. (Voc pode alterar a ordem de empilhamento da Div PA no painel Elementos PA.) O aninhamento geralmente usado para agrupar as Divs PA. Uma Div PA aninhada movida com sua Div PA me e pode ser definida para herdar a visibilidade da tag-me. Voc pode ativar a opo Aninhamento para fazer o aninhamento automtico ao desenhar uma Div PA comeando dentro de outra Div PA. Para desenhar dentro ou sobre outra Div PA, a opo Evitar sobreposies deve estar desmarcada. Desenho de uma Div PA aninhada 1 Verifique se a opo Evitar sobreposies est desmarcada no painel Elementos PA (Janela > Elementos PA).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 163


Criao de pginas com CSS

2 Na categoria Layout do painel Inserir, clique no boto Desenhar Div PA

3 Na Visualizao de design da janela Documento, arraste para desenhar uma Div PA dentro de uma Div PA

existente. Se a opo Aninhamento estiver desativada nas preferncias de elementos PA, mantenha pressionada a tecla Alt (Windows) ou mantenha pressionada a tecla Option (Macintosh) enquanto arrasta para aninhar uma Div PA dentro de uma Div PA existente. A aparncia das Divs PA aninhadas podem variar de um navegador para outro. Ao criar Divs PA aninhadas, verifique freqentemente a aparncia delas nos vrios navegadores durante o processo de design. Insero de uma Div PA aninhada 1 Verifique se a opo Evitar sobreposies est desmarcada.
2 Coloque o ponto de insero dentro de uma Div PA existente na Visualizao de design da janela Documento e

selecione Inserir > Objetos de layout > Div PA. Aninhamento de um elemento PA existente dentro de outro usando o painel Elementos PA 1 Selecione Janela > Elementos PA para abrir o painel Elementos PA.
2 Selecione um elemento PA no painel Elementos PA, mantenha pressionada a tecla Control (Windows) ou

mantenha pressionada a tecla Command (Macintosh) enquanto arrasta o elemento PA para o elemento PA de destino no painel Elementos PA.
3 Solte o boto do mouse quando o nome do elemento PA de destino estiver realado.

Aninhamento automtico de Divs PA quando voc desenha uma Div PA dentro de outra Selecione a opo Aninhamento nas Preferncias de elementos PA.

Visualizao ou definio das preferncias de elemento PA


Use a categoria Elementos PA na caixa de dilogo Preferncias para especificar as configuraes padro dos novos elementos PA criados.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione Elementos PA na lista Categoria esquerda, especifique uma das preferncias a seguir e clique em OK.
Visibilidade Determina se os elementos PA ficaro visveis por padro. As opes so default, inherit, visible e hidden. Largura e Altura Especifique uma largura e altura padro (em pixels) para os elementos PA que voc cria usando Inserir > Objetos de layout > Div PA. Cor de fundo Especifica uma cor de fundo padro. Selecione uma cor no seletor de cores. Imagem de fundo Especifica uma imagem de fundo padro. Clique em Procurar para localizar o arquivo de imagem

no computador.
Aninhamento: Aninhar quando criado em uma div PA Especifica se uma Div PA comeando em um ponto dentro dos limites de uma Div PA existente deve ser uma Div PA aninhada. Mantenha pressionada a tecla Alt (Windows) ou a tecla Option (Macintosh) para alterar temporariamente esta configurao enquanto desenha uma Div PA.

Visualizao ou definio das propriedades de um elemento PA


Quando voc seleciona um elemento PA, o Inspetor de propriedades exibe as propriedades desse elemento.
1 Selecione um elemento PA.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 164


Criao de pginas com CSS

2 No Inspetor de propriedades (Janela > Propriedades), clique na seta de expanso no canto inferior direito, caso ela

ainda no esteja expandida, para ver todas as propriedades.

3 Defina uma das seguintes opes:


Elemento CSS-P Especifica uma ID para o elemento PA selecionado. A ID identifica o elemento PA no painel

Elementos PA e no cdigo JavaScript. Use apenas caracteres alfanumricos padro; no use caracteres especiais como espaos, hfens, barras ou pontos. Cada elemento PA deve ter sua prpria ID exclusiva. Nota: O Inspetor de propriedades de CSS-P apresenta as mesmas opes para elementos com posio relativa.
E e T (esquerda e topo) Especifica a posio do canto superior esquerdo do elemento PA em relao ao canto superior

esquerdo da pgina, ou do elemento PA pai caso ele esteja aninhado.


L e A Define a largura e altura do elemento PA.

Nota: Se o contedo do elemento PA ultrapassar o tamanho especificado, a borda inferior do elemento PA (conforme aparece na Visualizao de design do Dreamweaver) ser alongada para acomodar o contedo. (A borda inferior no alongada quando o elemento PA aparece em um navegador, a menos que a propriedade Overflow esteja definida como Visible.) A unidade padro de posio e tamanho pixels (px). Voc tambm pode especificar as seguintes unidades: pc (paicas), pt (pontos), in (polegadas), mm (milmetros), cm (centmetros) ou % (porcentagem do valor correspondente do elemento PA pai). As abreviaes devem seguir o valor, sem espaos: por exemplo, 3mm indica 3 milmetros.
Z-Index Determina o ndice z ou a ordem de empilhamento do elemento PA.

Em um navegador, os elementos PA numerados superiores aparecem em frente aos elementos PA numerados inferiores. Os valores podem ser positivos ou negativos. mais fcil alterar a ordem de empilhamento dos elementos PA usando o painel Elementos PA do que digitar valores de ndice z especficos.
Vis Especifica se o elemento PA estar inicialmente visvel ou no. Selecione uma das seguintes opes:

Default no especifica uma propriedade de visibilidade. Quando nenhuma visibilidade especificada, a maioria dos
navegadores assume Inherit como valor padro.

Inherit usa a propriedade de visibilidade do pai do elemento PA. Visible exibe o contedo do elemento PA, independentemente do valor do pai. Hidden oculta o contedo do elemento PA, independentemente do valor do pai.
Use uma linguagem de script, como JavaScript, para controlar a propriedade de visibilidade e exibir dinamicamente o contedo do elemento PA.
Imagem de fundo Especifica uma imagem de fundo para o elemento PA.

Clique no cone de pasta desejado e selecione um arquivo de imagem.


Cor do fundo Especifica uma cor de fundo para o elemento PA.

Deixe esta opo em branco para especificar um fundo transparente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 165


Criao de pginas com CSS

Classe Especifica a classe CSS usada para criar o estilo do elemento PA. Estouro Determina como os elementos PA aparecem em um navegador quando o contedo ultrapassa o tamanho especificado do elemento PA.

Visible indica que o contedo extra aparecer no elemento PA; efetivamente, o elemento PA alongado para acomod-lo. Hidden especifica que o contedo extra no ser exibido no navegador. Scroll especifica que o navegador deve adicionar barras de rolagem ao elemento quer elas sejam necessrias ou no. Auto faz com que o navegador exiba barras de rolagem para o elemento PA somente quando necessrio (ou seja, quando o contedo do elemento PA ultrapassar seus limites.) Nota: A opo estouro tem suporte instvel entre os navegadores.
Corte Define a rea visvel de um elemento PA.

Especifica as coordenadas esquerda, superior, direita e inferior para definir um retngulo no espao de coordenada do elemento PA (contando a partir do canto superior esquerdo do elemento PA). O elemento PA recortado para que apenas o retngulo especificado fique visvel. Por exemplo, para tornar o contedo de um elemento PA invisvel, a no ser por um retngulo visvel de 50 pixels de largura e 75 pixels de altura no canto superior esquerdo do elemento PA, defina E para 0, T para 0, D para 50 e B para 75. Nota: Embora a CSS especifique uma semntica diferente para clip, o Dreamweaver interpreta clip como a maioria dos navegadores.
4 Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh)

para aplicar o valor.

Visualizao ou definio das propriedades de vrios elementos PA


Quando voc seleciona dois ou mais elementos PA, o Inspetor de propriedades exibe as propriedades de texto e um subconjunto das propriedades do elemento PA completo, permitindo que voc modifique vrios elementos PA de uma s vez. Seleo de vrios elementos PA Mantenha pressionada a tecla Shift enquanto seleciona elementos PA. Visualizao e definio das propriedades de vrios elementos PA 1 Selecione vrios elementos PA.
2 No Inspetor de propriedades (Janela > Propriedades), clique na seta de expanso no canto inferior direito, caso ela

ainda no esteja expandida, para ver todas as propriedades.

3 Defina uma das propriedades a seguir de vrios elementos PA:


E e T (esquerda e topo) Especifica a posio dos cantos superiores esquerdos do elemento PA em relao ao canto superior esquerdo da pgina, ou do elemento PA pai caso ele esteja aninhado. L e A Define a largura e altura dos elementos PA.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 166


Criao de pginas com CSS

Nota: Se o contedo de qualquer elemento PA ultrapassar o tamanho especificado, a borda inferior do elemento PA (conforme aparece na Visualizao de design do Dreamweaver) ser alongada para acomodar o contedo. (A borda inferior no alongada quando o elemento PA aparece em um navegador, a menos que a propriedade Estouro esteja definida como Visible). A unidade padro de posio e tamanho pixels (px). Voc tambm pode especificar as seguintes unidades: pc (paicas), pt (pontos), in (polegadas), mm (milmetros), cm (centmetros) ou % (porcentagem do valor correspondente do elemento PA pai). As abreviaes devem seguir o valor, sem espaos: por exemplo, 3mm indica 3 milmetros.
Vis Especifica se os elementos PA estaro inicialmente visveis ou no. Selecione uma das seguintes opes:

Default no especifica uma propriedade de visibilidade. Quando nenhuma visibilidade especificada, a maioria dos
navegadores assume Inherit como valor padro.

Inherit usa a propriedade de visibilidade do pai dos elementos PA. Visible exibe o contedo dos elementos PA, independentemente do valor do pai. Hidden oculta o contedo do elemento PA, independentemente do valor do pai.
Use uma linguagem de script, como JavaScript, para controlar a propriedade de visibilidade e exibir dinamicamente o contedo do elemento PA.
Tag Especifica a tag HTML usada para definir os elementos PA. Imagem de fundo Especifica uma imagem de fundo para os elementos PA.

Clique no cone de pasta desejado e selecione um arquivo de imagem.


Cor de fundo Especifica uma cor de fundo para os elementos PA. Deixe esta opo em branco para especificar um fundo transparente.

4 Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh)

para aplicar o valor.

Viso geral do painel Elementos PA


Use o painel Elementos PA (Janela > Elementos PA) para gerenciar os elementos PA no documento. Use o painel Elementos PA para evitar sobreposies, alterar a visibilidade dos elementos PA, aninhar ou empilhar elementos PA e selecionar um ou mais elementos PA. Nota: Um elemento PA do Dreamweaver um elemento de pgina HTML, especificamente uma tag div ou qualquer outra tag, que tem uma posio absoluta. O painel Elementos PA no exibe elementos com posio relativa. Os elementos PA so exibidos como uma lista de nomes, na ordem do ndice z; por padro, o primeiro elemento PA criado (com um ndice z 1) aparece na parte inferior da lista, enquanto o elemento PA criado por ltimo aparece na parte superior. No entanto, voc pode alterar o ndice z de um elemento PA alterando seu lugar na ordem de empilhamento. Por exemplo, se voc criou oito elementos PA e deseja mover o quarto elemento para o topo da lista, atribua a ele um ndice z superior aos outros.

Seleo de elementos PA
Voc pode selecionar um ou mais elementos PA para manipul-los ou alterar suas propriedades. Seleo de um elemento PA no painel Elementos PA No painel Elementos PA (Janela > Elementos PA), clique no nome do elemento PA.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 167


Criao de pginas com CSS

Seleo de um elemento PA na janela Documento Siga um destes procedimentos:

Clique na ala de seleo de um elemento PA.


Se a ala de seleo no estiver visvel, clique em qualquer lugar dentro do elemento PA para torn-la visvel.

Clique na borda de um elemento PA. Mantenha pressionadas as teclas Control e Shift (Windows) ou mantenha pressionadas as teclas Command e Shift
(Macintosh) enquanto clica dentro de um elemento PA.

Clique dentro de um elemento PA e pressione Control+A (Windows) ou Command+A (Macintosh) para


selecionar o contedo do elemento PA. Pressione Control+A ou Command+A novamente para selecionar o elemento PA.

Clique dentro de um elemento PA e selecione sua tag no seletor de tags.


Seleo de vrios elementos PA Siga um destes procedimentos:

No painel Elementos PA (Janela > Elementos PA), mantenha pressionada a tecla Shift enquanto clica em dois ou
mais nomes de elemento PA.

Na janela Documento, mantenha pressionada a tecla Shift enquanto clica dentro ou na borda de dois ou mais
elementos PA.

Alterao da ordem de empilhamento dos elementos PA


Use o Inspetor de propriedades ou o painel Elementos PA para alterar a ordem de empilhamento dos elementos PA. O elemento PA no topo da lista do painel Elementos PA est na parte superior da ordem de empilhamento e aparece na frente dos outros elementos PA. No cdigo HTML, a ordem de empilhamento, ou o ndice z, dos elementos PA determina a ordem em que eles so desenhados em um navegador. Quanto maior o ndice z de um elemento PA, mais alto estar o elemento PA na ordem de empilhamento. Voc pode alterar o ndice z de cada elemento PA usando o painel Elementos PA ou o Inspetor de propriedades. Alterao da ordem de empilhamento dos elementos PA usando o painel Elementos PA 1 Selecione Janela > Elementos PA para abrir o painel Elementos PA.
2 Arraste um elemento PA para cima ou para baixo na ordem de empilhamento desejada.

Uma linha aparece enquanto voc move o elemento PA, indicando onde ele aparecer. Solte o boto do mouse quando a linha de posicionamento aparecer no local desejado na ordem de empilhamento. Alterao da ordem de empilhamento dos elementos PA usando o Inspetor de propriedades 1 Selecione Janela > Elementos PA para abrir o painel Elementos PA e verificar a ordem de empilhamento atual.
2 Selecione um elemento PA no painel Elementos PA ou na janela Documento. 3 No Inspetor de propriedades (Janela > Propriedades), digite um nmero na caixa de texto ndice Z.

Digite um nmero maior para mover o elemento PA para a parte superior na ordem de empilhamento. Digite um nmero menor para mover o elemento PA para a parte inferior na ordem de empilhamento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 168


Criao de pginas com CSS

Mostrar e ocultar elementos PA


Enquanto trabalha no documento, voc pode mostrar e ocultar manualmente os elementos PA, usando o painel Elementos PA, para ver como a pgina aparecer em diferentes condies. Nota: O elemento PA atualmente selecionado sempre fica visvel e aparece na frente de outros elementos PA enquanto est selecionado. Alterao da visibilidade do elemento PA 1 Selecione Janela > Elementos PA para abrir o painel Elementos PA.
2 Clique na coluna de cone de olho de um elemento PA para alterar sua visibilidade.

Um olho aberto significa que o elemento PA est visvel. Um olho fechado significa que o elemento PA no est visvel. Se no houver um cone de olho, geralmente o elemento PA herda a visibilidade do seu pai. (Quando os elementos
PA no esto aninhados, o pai o corpo do documento, que est sempre visvel.) Alm disso, o cone de olho no aparece quando no h visibilidade especificada (que aparece no Inspetor de propriedades como visibilidade padro). Alterao da visibilidade de todos os elementos PA simultaneamente No painel Elementos PA (Janela > Elementos PA), clique no cone de olho do cabealho no topo da coluna. Nota: Esse procedimento pode definir todos os elementos PA para visible ou hidden, mas no para inherit.

Redimensionamento de elementos PA
Voc pode redimensionar um elemento PA de cada vez ou redimensionar vrios elementos PA simultaneamente para que tenham a mesma largura e altura. Se a opo Evitar sobreposies estiver ativada, voc no poder redimensionar um elemento PA para que ele seja sobreposto por outro.

Mais tpicos da Ajuda


Uso da grade de layout na pgina 174 Redimensionamento de um elemento PA 1 Na Visualizao de design, selecione um elemento PA.
2 Siga um destes procedimentos para redimensionar um elemento PA:

Para redimensionar arrastando, arraste as alas de redimensionamento de qualquer elemento PA. Para redimensionar um pixel por vez, mantenha pressionada a tecla Control (Windows) ou Option (Macintosh)
enquanto pressiona uma tecla de seta. As teclas de seta movem as bordas direita e inferior do elemento PA. No possvel fazer o redimensionamento usando as bordas superior e esquerda com essa tcnica.

Para redimensionar pelo incremento de encaixe de grade, mantenha pressionadas as teclas Shift e Control
(Windows) ou mantenha pressionadas as teclas Shift e Option (Macintosh) enquanto pressiona uma tecla de seta.

No Inspetor de propriedades (Janela > Propriedades), digite valores para largura (L) e altura (A).
O redimensionamento de um elemento PA altera sua largura e altura. Ele no define quanto do contedo do elemento PA estar visvel. Voc pode definir a regio visvel de um elemento PA nas preferncias.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 169


Criao de pginas com CSS

Redimensionamento de vrios elementos PA simultaneamente 1 Na Visualizao de design, selecione dois ou mais elementos PA.
2 Siga um destes procedimentos:

Selecione Modificar > Organizar > Tornar larguras iguais ou Modificar > Organizar > Tornar alturas iguais.
Os primeiros elementos PA selecionados tero a mesma largura ou altura do ltimo elemento PA selecionado.

No Inspetor de propriedades (Janela > Propriedades), em Vrios elementos CSS-P, digite os valores de largura e
altura. Os valores so aplicados a todos os elementos PA selecionados.

Movimentao de elementos PA
Voc pode mover os elementos PA na Visualizao de design quase da mesma maneira que move os objetos na maioria dos aplicativos grficos bsicos. Se a opo Evitar sobreposies estiver ativada, voc no poder mover um elemento PA para que ele sobreponha outro.
1 Na Visualizao de design, selecione um ou vrios elementos PA. 2 Siga um destes procedimentos:

Para mover arrastando, arraste a ala de seleo do ltimo elemento PA selecionado (realado em preto), Para mover um pixel por vez, use as teclas de seta.
Mantenha pressionada a tecla Shift enquanto pressiona uma tecla de seta para mover o elemento PA pelo incremento atual de encaixe de grade.

Mais tpicos da Ajuda


Uso da grade de layout na pgina 174

Alinhamento de elementos PA
Use os comandos de alinhamento de elemento PA para alinhar um ou mais elementos PA a uma borda do ltimo elemento PA selecionado. Quando voc alinha elementos PA, os elementos PA filho no selecionados podem se mover, pois seu elemento PA pai selecionado e movido. Para impedir que isso acontea, no use elementos PA aninhados.
1 Na Visualizao de design, selecione o elemento PA. 2 Selecione Modificar > Organizar e selecione uma opo de alinhamento.

Por exemplo, se voc selecionar Top, todos os elementos PA se movero para que suas bordas superiores fiquem na mesma posio vertical da borda superior do ltimo elemento PA selecionado (realado em preto).

Converso de elementos PA em tabelas


Em vez de usar tabelas para criar seu layout, alguns designers da Web preferem trabalhar com elementos PA. O Dreamweaver permite que voc crie um layout usando elementos PA e (se desejar) os converta em tabelas. Por exemplo, talvez voc precise converter os elementos PA em tabelas caso seja necessrio oferecer suporte a navegadores anteriores verso 4.0. No entanto, a converso de elementos PA em tabelas no recomendvel porque pode resultar em tabelas com um nmero maior de clulas vazias, sem mencionar a inchao do cdigo (bloated). Se voc precisar de um layout de pgina que use tabelas, recomendvel cri-lo usando as ferramentas padro de layout de tabela disponveis no Dreamweaver.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 170


Criao de pginas com CSS

possvel converter e reconverter tabelas e elementos PA para ajustar o layout e otimizar o design da pgina. (No entanto, quando voc converte novamente uma tabela em elementos PA, o Dreamweaver converte a tabela novamente em Divs PA, independentemente do tipo de elemento PA que voc possa ter na pgina antes da converso em tabelas.) No possvel converter uma tabela ou elemento PA em uma pgina. Voc deve converter elementos PA em tabelas, e tabelas em Divs PA. Nota: Voc no pode converter elementos PA em tabelas ou tabelas em Divs PA em um documento modelo ou em um documento ao qual um modelo tenha sido aplicado. Em vez disso, crie o layout em um documento no-modelo e converta-o antes de salv-lo como modelo.

Converso entre elementos PA e tabelas


Voc pode criar o layout usando elementos PA e convert-los em tabelas para que o layout possa ser visualizado nos navegadores mais antigos. Antes de converter em tabelas, verifique se os elementos PA no se sobrepem. Alm disso, certifique-se de estar no modo Padro (Exibir > Modo Tabela > Modo padro). Converso de elementos PA em uma tabela 1 Selecione Modificar > Converter > Divs PA em tabela.
2 Selecione uma das opes a seguir e clique em OK:
Mais preciso Cria uma clula para cada elemento PA, alm que quaisquer clulas adicionais necessrias para preservar o espao entre os elementos PA. Menor: reduzir clulas vazias Especifica que as bordas dos elementos PA devem ser alinhadas caso estejam

posicionadas no nmero especificado de pixels. Se voc selecionar esta opo, a tabela resultante ter menos linhas e coluna vazias, mas poder no corresponder precisamente ao layout.
Usar GIFs transparentes Preenche a ltima linha da tabela com GIFs transparentes. Isso garante que a tabela ser

exibida com as mesmas larguras de coluna em todos os navegadores. Quando esta opo for ativada, voc no poder editar a tabela resultante arrastando suas colunas. Quando esta opo for desativada, a tabela resultante no conter GIFs transparentes, mas as larguras das colunas podero variar de um navegador para outro.
Centralizar na pgina Centraliza a tabela resultante na pgina. Se esta opo for desativada, a tabela iniciar na borda

esquerda da pgina. Converso de tabelas em Divs PA


1 Selecione Modificar > Converter > Tabelas em Divs PA. 2 Selecione uma das opes a seguir e clique em OK:
Impedir sobreposio de elemento AP Restringe as posies dos elementos PA quando eles forem criados, movidos e

redimensionados, a fim de que no se sobreponham.


Mostrar painel de elementos PA Exibe o painel de elementos PA. Mostrar grade e Encaixar na grade Permite o uso de uma grade para ajudar a posicionar elementos PA.

As tabelas so convertidas em Divs PA. As clulas vazias no so convertidas em elementos PA, a menos que tenham cores de fundo. Nota: Os elementos de pgina que estavam fora das tabelas tambm so colocados em Divs PA.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 171


Criao de pginas com CSS

Impedir sobreposio de elemento PA


Como as clulas de tabela no podem se sobrepor, o Dreamweaver no pode criar uma tabela a partir de elementos PA sobrepostos. Se voc pretende converter os elementos PA de um documento em tabelas, use a opo Evitar sobreposies para restringir a movimentao e o posicionamento do elemento PA, a fim de que eles no se sobreponham. Quando esta opo estiver ativada, um elemento PA no poder ser criado em frente a, movido ou redimensionado sobre ou aninhado dentro de um elemento PA existente. Se voc ativar esta opo aps criar elementos PA sobrepostos, arraste cada elemento PA sobreposto para afast-lo de outros elementos PA. O Dreamweaver no corrige automaticamente elementos PA sobrepostos existentes na pgina quando voc ativa Impedir sobreposio de elemento AP. Quando esta opo e encaixe forem ativados, um elemento PA no se encaixar na grade caso dois elementos PA se sobreponham. Em vez disso, ele se encaixar na borda do elemento PA mais prximo. Nota: Determinadas aes permitem a sobreposio de elementos PA at mesmo quando a opo Evitar sobreposies est ativada. Se voc inserir um elemento PA usando o menu Inserir, digitar nmeros no Inspetor de propriedades ou reposicionar elementos PA editando o cdigo-fonte HTML, possivelmente os elementos PA sero sobrepostos ou aninhados enquanto esta opo estiver ativada. Se ocorrerem sobreposies, arraste os elementos PA sobrepostos na Visualizao de design para separ-los.

No painel Elementos PA (Janela > Elementos PA), selecione a opo Evitar sobreposies. Na janela Documento, selecione Modificar > Organizar > Impedir sobreposio de elemento AP.

ltima atualizao em 28/4/2010

172

Captulo 7: Layout de pginas com HTML


Uso de auxlios visuais para layout
Definio de rguas
As rguas ajudam a avaliar, organizar e planejar o layout. Elas podem aparecer nas bordas esquerda e superior da pgina, marcadas em pixels, polegadas ou centmetros.

Para ativar e desativar as rguas, seleciona Exibir > Rguas > Mostrar. Para alterar a origem, arraste o cone de origem da rgua
da janela Documento) para qualquer lugar da pgina. (no canto superior esquerdo da Visualizao de design

Para redefinir a origem para sua posio padro, selecione Exibir > Rguas > Redefinir origem. Para alterar a unidade de medida, selecione Exibir > Rguas e, em seguida, selecione Pixels, Polegadas ou
Centmetros.

Definio de guias de layout


As guias so linhas que voc arrasta das rguas para o documento. Elas ajudam a colocar e alinhar os objetos com mais preciso. Voc tambm pode usar guias para medir o tamanho dos elementos de pgina ou emular as dobras (reas visveis) dos navegadores da Web. Para alinhar os elementos, encaixe-os nas guias e encaixe-as nos elementos. (Os elementos devem ter posio absoluta para que o recurso de encaixe funcione.) Voc tambm pode bloquear as guias para impedir que elas sejam movidas acidentalmente por outro usurio.

Criao de uma guia horizontal ou vertical


1 Arraste na rgua correspondente. 2 Posicione a guia na janela Documento e libere o boto do mouse (reposicione a guia arrastando-a novamente).

Nota: Por padro, as guias so registradas como medies de pixel absolutas no lado superior ou esquerdo do documento, e so exibidas em relao origem da rgua. Para registrar a guia como porcentagem, pressione a tecla Shift enquanto cria ou move a guia.

Mostrar ou ocultar guias


Selecione Exibir > Guias > Mostrar guias.

Encaixe dos elementos nas guias


Para encaixar os elementos nas guias, selecione Exibir > Guias > Encaixar nas guias. Para encaixar as guias nos elementos, selecione Exibir > Guias > Encaixe das guias nos elementos.
Nota: Quando voc redimensiona elementos, como elementos com posio absoluta (elementos PA), tabelas e imagens, os elementos redimensionados se encaixam nas guias.

Bloqueio e desbloqueio de todas as guias


Selecione Exibir > Guias > Bloquear guias.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 173


Layout de pginas com HTML

Visualizao e movimentao de uma guia para uma posio especfica


1 Mantenha o ponteiro do mouse sobre a guia para visualizar sua posio. 2 Clique duas vezes na guia. 3 Digite a nova posio na caixa de dilogo Mover guia e clique em OK.

Visualizao da distncia entre guias


Pressione Control (Windows) ou Command (Macintosh) e mantenha o ponteiro do mouse em qualquer lugar

entre as duas guias. Nota: A unidade de medida a mesma utilizada nas rguas.

Emulao da dobra (rea visvel) de um navegador da Web


Selecione Exibir > Guias e, em seguida, selecione um tamanho de navegador predefinido no menu.

Remoo de uma guia


Arraste a guia para fora do documento.

Alterao das configuraes da guia


Selecione Exibir > Guias > Editar guias, defina as seguintes opes e clique em OK. Cor da guia Especifica a cor das linhas da guia. Clique na amostra de cores e selecione uma cor no seletor de cores ou digite um nmero hexadecimal na caixa de texto. Cor da distncia Especifica a cor das linhas que aparecem como indicadores de distncia quando voc mantm o ponteiro do mouse entre as guias. Clique na amostra de cores e selecione uma cor no seletor de cores ou digite um nmero hexadecimal na caixa de texto. Mostrar guias Torna as guias visveis na Visualizao de design. Encaixar nas guias Faz com que os elementos da pgina se encaixem nas guias quando voc move os elementos pela

pgina.
Bloquear guias Bloqueia as guias no lugar. Encaixe das guias nos elementos Encaixa as guias nos elementos na pgina enquanto elas so arrastadas. Limpar tudo Limpa todas as guias da pgina.

Uso de guias com modelos


Quando as guias so adicionadas a um modelo do Dreamweaver, todas as instncias do modelo herdam as guias. No entanto, as guias nas instncias do modelo so tratadas como regies editveis; portanto, os usurios podem modificlas. As guias modificadas nas instncias do modelo so restauradas para seu local original sempre que a instncia atualizada com o modelo mestre. Voc tambm pode adicionar suas prprias guias s instncias de um modelo. As guias adicionadas desta maneira no so sobregravadas quando a instncia do modelo atualizada com o modelo mestre.

Mais tpicos da Ajuda


Alinhamento de elementos PA na pgina 169 Movimentao de elementos PA na pgina 169

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 174


Layout de pginas com HTML

Uso da grade de layout


A grade exibe um sistema de linhas horizontal e vertical na janela Documento. Ela til para posicionar os objetos com preciso. Voc pode fazer com que os elementos de pgina com posio absoluta se encaixem automaticamente na grade enquanto os move, alm de alterar a grade ou controlar o comportamento de encaixe especificando configuraes da grade. O encaixe funcionar quer a grade esteja ou no visvel.

Mais tpicos da Ajuda


Alinhamento de elementos PA na pgina 169 Movimentao de elementos PA na pgina 169

Mostrar ou ocultar a grade


Selecione Exibir > Grade > Mostrar grade.

Ativao ou desativao do encaixe


Selecione Exibir > Grade > Encaixar na grade.

Alterao das configuraes da grade


1 Selecione Exibir > Grade > Configuraes da grade. 2 Defina as opes e clique em OK para aplicar as alteraes.
Cor Especifica a cor das linhas da grade. Clique na amostra de cores e selecione uma cor no seletor de cores ou digite um nmero hexadecimal na caixa de texto. Mostrar grade Torna a grade visvel na Visualizao de design. Encaixar na grade Faz com que os elementos da pgina se encaixem nas linhas da grade. Espaamento Controla a distncia entre as linhas de grade. Digite um nmero e selecione Pixels, Polegadas ou Centmetros no menu. Exibir Especifica se as linhas de grade aparecero como linhas ou pontos.

Nota: Se Mostrar grade no estiver selecionado, a grade no aparecer no documento e nenhuma alterao ficar visvel.

Uso de uma imagem de decalque


Voc pode usar uma imagem de decalque como uma guia para recriar um design de pgina criado em um aplicativo grfico como o Adobe Freehand ou Fireworks. Uma imagem de decalque uma imagem JPEG, GIF ou PNG colocada no plano de fundo da janela Documento. Voc pode ocultar a imagem, definir sua opacidade e alterar sua posio. A imagem de decalque estar visvel somente no Dreamweaver. Voc no poder v-la quando estiver visualizando a pgina em um navegador. Quando a imagem de decalque estiver visvel, a cor e a imagem de fundo real da pgina no estaro visveis na janela Documento. No entanto, elas estaro visveis quando a pgina for visualizada em um navegador.

Posicionamento de uma imagem de decalque na janela Documento


1 Siga um destes procedimentos:

Selecione Exibir > Imagem de decalque > Carregar. Selecione Modificar > Propriedades da pgina e clique em Procurar (ao lado da caixa de texto Imagem de decalque).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 175


Layout de pginas com HTML

2 Na caixa de dilogo Selecionar origem da imagem, selecione um arquivo de imagem e clique em OK. 3 Na caixa de dilogo Propriedades da pgina, especifique a transparncia da imagem arrastando o controle

deslizante Transparncia da imagem e clique em OK. Para alternar para outra imagem de decalque ou alterar a transparncia da imagem de rastreamento atual a qualquer momento, selecione Modificar > Propriedades da pgina.

Mostrar ou ocultar a imagem de decalque


Selecione Exibir > Imagem de decalque > Mostrar.

Alterao da posio de uma imagem de decalque


Selecione Exibir > Imagem de decalque > Ajustar posio.

Para especificar precisamente a posio da imagem de decalque, digite os valores de coordenada nas caixas de texto
X e Y.

Para mover a imagem 1 pixel por vez, use as teclas de seta. Para mover a imagem 5 pixels por vez, pressione Shift e uma tecla de seta.

Redefinio da posio da imagem de decalque


Selecione Exibir > Imagem de decalque > Redefinir posio.

A imagem de decalque retorna ao canto superior esquerdo da janela Documento (0,0).

Alinhamento da imagem de decalque a um elemento selecionado


1 Selecione um elemento na janela Documento. 2 Selecione Exibir > Imagem de decalque > Alinhar com Seleo.

O canto superior esquerdo da imagem de decalque alinhado ao canto superior esquerdo do elemento selecionado.

Apresentao do contedo em tabelas


Sobre as tabelas
As tabelas so uma ferramenta eficaz para apresentar dados tabulares e dispor o texto e os grficos em uma pgina HTML. Uma tabela consiste em uma ou mais linhas; cada linha formada por uma ou mais clulas. Embora as colunas no sejam, em geral, especificadas explicitamente no cdigo HTML, o Dreamweaver permite que voc manipule colunas, bem como linhas e clulas. O Dreamweaver exibe a largura da tabela e a largura da coluna para cada coluna de tabela quando a tabela selecionada ou quando o ponto de insero est na tabela. Ao lado das larguras, esto as setas do menu de cabealho de tabela e dos menus de cabealho de coluna. Use os menus para obter acesso rpido aos comandos comuns relacionados a tabela. Voc pode ativar ou desativar as larguras e os menus. Se a largura da tabela ou de uma coluna no for exibida, sinal de que a tabela ou coluna no tem uma largura especificada no cdigo HTML. Se aparecerem dois nmeros, a largura visual conforme exibida na Visualizao de design no corresponde largura especificada no cdigo HTML. Isso pode acontecer quando voc redimensiona uma tabela arrastando seu canto inferior direito ou quando voc adiciona o contedo a uma clula maior do que sua largura definida.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 176


Layout de pginas com HTML

Por exemplo, se voc definir a largura de uma coluna para 200 pixels e adicionar um contedo que aumente a largura em 250 pixels, dois nmeros aparecero para essa coluna: 200 (a largura especificada no cdigo) e (250) entre parnteses (a largura visual da coluna conforme processada na tela). Nota: Voc tambm pode dispor o layout das pginas usando o posicionamento CSS.

Mais tpicos da Ajuda


Layout das pginas com CSS na pgina 150

Precedncia da formatao da tabela em HTML


Ao formatar tabelas na Visualizao de design, voc pode definir propriedades para a tabela inteira ou para linhas, colunas ou clulas selecionadas da tabela. Quando uma propriedade, como alinhamento ou cor de fundo, definida como um valor para a tabela inteira e outro valor para clulas individuais, a formatao da clula tem precedncia sobre a formatao da linha, que, por sua vez, tem precedncia sobre a formatao da tabela. A ordem de precedncia da formatao da tabela a seguinte:
1 Clulas 2 Linhas 3 Tabela

Por exemplo, se voc definir a cor de fundo de uma nica clula para azul e, depois, definir a cor de fundo de toda a tabela para amarelo, a clula azul no ser alterada para amarelo, j que a formatao da clula tem precedncia sobre a formatao da tabela. Nota: Quando voc define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a cada clula da coluna.

Sobre a diviso e mesclagem das clulas da tabela


Voc pode mesclar qualquer nmero de clulas adjacentes, contanto que a seleo inteira seja uma linha ou um retngulo de clulas, a fim de produzir uma nica clula que abranja vrias colunas ou linhas. possvel dividir uma clula em qualquer nmero de linhas ou colunas, independentemente de ela ter sido anteriormente mesclada ou no. O Dreamweaver reestrutura automaticamente a tabela (adicionando quaisquer atributos colspan ou rowspan necessrios) para criar a disposio especificada. No exemplo a seguir, as clulas do meio das primeiras duas linhas foram mescladas em uma nica clula que abrange duas linhas.

Inserir uma tabela e adicionar contedo


Usar o painel Inserir ou o menu Inserir para criar uma nova tabela. Em seguida, adicione texto e imagens s clulas da tabela da mesma maneira que adiciona texto e imagens fora de uma tabela.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 177


Layout de pginas com HTML

Nota: O recurso Modo de layout est obsoleto desde o Dreamweaver CS4 e posterior. O Modo de layout criava layouts de pgina usando tabelas de layout, o que no mais recomendado pela Adobe. Para obter mais informaes sobre o Modo de layout e sobre por que ele se tornou obsoleto, consulte o Blog da Equipe do Dreamweaver.
1 Na Visualizao de design da janela Documento, coloque o ponto de insero no local em que a tabela deve

aparecer. Nota: Se o documento estiver em branco, voc s poder colocar o ponto de insero no incio do documento.

Selecione Inserir > Tabela. Na categoria Comum do painel Inserir, clique no boto Tabela.
2 Defina os atributos da caixa de dilogo Tabela e clique em OK para criar a tabela.
Linhas Determina o nmero de linhas de tabela. Colunas Determina o nmero de colunas de tabela. Largura da tabela Especifica a largura da tabela em pixels ou como porcentagem da largura da janela do navegador. Espessura da borda Especifica a largura, em pixels, das bordas da tabela. Espaamento da clula Determina o nmero de pixels entre as clulas de tabela adjacentes.

Quando voc no atribui explicitamente valores para espessura de tabela ou espaamento e preenchimento de clula, a maioria dos navegadores exibe a espessura da borda da tabela e o preenchimento da clula definidos como 1 e o espaamento da clula definido como 2. Para garantir que os navegadores exibiro a tabela sem borda, preenchimento ou espaamento, defina Preenchimento da clula e Espaamento da clula como 0.
Preenchimento da clula Determina o nmero de pixels entre a borda de uma clula e seu contedo. Nenhum No ativa cabealhos de coluna ou linha para a tabela. esquerda Torna a primeira coluna da tabela uma coluna de cabealhos, a fim de que voc possa digitar um cabealho para cada linha da tabela. Superior Torna a primeira linha da tabela uma linha de cabealhos, a fim de que voc possa digitar um cabealho para cada coluna da tabela. Ambos Permite que voc digite cabealhos de coluna e linha na tabela.

recomendvel usar cabealhos caso algum visitante do seu site use leitor de tela. Os leitores de tela lem os cabealhos da tabela e ajudam os usurios de leitores de tela a controlar as informaes da tabela.
Legenda Fornece um ttulo de tabela que exibido fora da tabela. Alinhar legenda Especifica onde a legenda da tabela aparecer em relao tabela. Resumo Fornece uma descrio de tabela. Os leitores de tela lem o texto do resumo, mas o texto no aparece no

navegador do usurio.

Mais tpicos da Ajuda


Adio e formatao do texto na pgina 217 Adio e modificao de imagens na pgina 233

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 178


Layout de pginas com HTML

Importao e exportao de dados tabulares


Voc pode importar dados tabulares criados em outro aplicativo (como o Microsoft Excel) e salvos em um formato de texto delimitado (com itens separados por tabulaes, vrgulas, dois-pontos ou ponto-e-vrgulas) no Dreamweaver e format-los como uma tabela. Tambm possvel exportar os dados da tabela do Dreamweaver para um arquivo de texto, com o contedo das clulas adjacentes separado por um delimitador. Voc pode usar vrgulas, dois-pontos, ponto-e-vrgulas ou espaos como delimitadores. Quando voc exporta uma tabela, a tabela inteira exportada. No possvel selecionar partes de uma tabela a ser exportada. Se voc precisa apenas de alguns dados de uma tabela, por exemplo, as primeiras seis linhas ou as primeiras seis colunas, copie as clulas que contm esses dados, cole as clulas fora da tabela (para criar uma nova tabela) e exporte a nova tabela.

Importao de dados de tabela


1 Siga um destes procedimentos:

Selecione Arquivo > Importar > Dados tabulares. Na categoria Dados do painel Inserir, clique no cone Importar dados tabulares Selecione Inserir > Objetos de tabela > Importar dados tabulares.
2 Especifique as opes dos dados tabulares e clique em OK.
Arquivo de dados O nome do arquivo a ser importado. Clique no boto Procurar para selecionar um arquivo. Delimitador O delimitador usado no arquivo que voc est importando.

Se voc selecionar Outro, uma caixa de texto aparecer direita do menu pop-up. Digite o delimitador usado no arquivo. Nota: Especifique o delimitador usado quando o arquivo de dados foi salvo. Se voc no fizer isso, o arquivo no ser importado corretamente e os dados no sero corretamente formatados em uma tabela.
Largura da tabela A largura da tabela.

Selecione Ajustar aos dados para aumentar suficientemente cada coluna para que caiba a seqncia de texto mais
longa.

Selecione Definir para especificar uma largura de tabela fixa em pixels ou como uma porcentagem da largura da
janela do navegador.
Borda Especifica a largura, em pixels, das bordas da tabela. Preenchimento da clula O nmero de pixels entre o contedo de uma clula e os limites da clula. Espaamento da clula O nmero de pixels entre as clulas de tabela adjacentes.

Se voc no atribuir explicitamente valores para bordas, espaamento de clula e preenchimento de clula, a maioria dos navegadores exibir a tabela com as bordas e o preenchimento da clula definidos como 1, e o espaamento da clula definido como 2. Para garantir que os navegadores exibiro a tabela sem preenchimento ou espaamento, defina Preenchimento da clula e Espaamento da clula como 0. Para visualizar os limites da clula e da tabela quando a borda estiver definida como 0, selecione Exibir > Auxlios visuais > Bordas da tabela.
Formatar linha superior Determina qual formatao, se houver alguma, est aplicada linha superior da tabela.

Selecione entre as quatro opes de formatao: sem formatao, negrito, itlico ou negrito itlico.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 179


Layout de pginas com HTML

Exportao de uma tabela


1 Coloque o ponto de insero em qualquer clula da tabela. 2 Selecione Arquivo > Exportar > Tabela. 3 Escolha as seguintes opes:
Delimitador Especifica qual caractere delimitador deve ser usado para separar itens no arquivo exportado. Quebras de linha Especifica em qual sistema operacional voc estar abrindo o arquivo exportado: Windows, Macintosh ou UNIX. (Diferentes sistemas operacionais tm diferentes formas de indicar o fim de uma linha de texto.)

4 Clique em Exportar. 5 Digite um nome para o arquivo e clique em Salvar.

Seleo de elementos de tabela


Voc pode selecionar uma tabela, linha ou coluna inteira de uma s vez. Tambm possvel selecionar uma ou mais clulas individuais. Quando voc mover o ponteiro sobre uma tabela, linha, coluna ou clula, o Dreamweaver realar todas as clulas dessa seleo a fim de que voc saiba quais clulas sero selecionadas. Isso ser til quando voc tiver tabelas sem bordas, clulas que abranjam vrias colunas ou linhas, ou tabelas aninhadas. Voc pode alterar a cor do realce nas preferncias. Se voc posicionar o ponteiro sobre a borda de uma tabela, mantenha pressionada a tecla Control (Windows) ou Command (Macintosh), a estrutura inteira da tabela, ou seja, todas as clulas da tabela, ser realada. Isso ser til quando voc tiver tabelas aninhadas e precisar ver a estrutura de uma das tabelas.

Seleo de uma tabela inteira


Siga um destes procedimentos:

Clique no canto superior esquerdo da tabela, em qualquer lugar da borda superior ou inferior da tabela, ou na borda
de uma linha ou coluna. Nota: O ponteiro altera-se para o cone de grade de tabela clique em uma borda de linha ou coluna). Documento. quando voc pode selecionar a tabela (a menos que voc

Clique em uma clula de tabela e selecione a tag <table> no seletor de tags no canto inferior esquerdo da janela Clique em uma clula de tabela e selecione Modificar > Tabela > Selecionar tabela. Clique em uma clula de tabela, clique no menu de cabealho de tabela e selecione Selecionar tabela. As alas de
seleo aparecem nas bordas inferior e direita da tabela selecionada.

Seleo de vrias linhas ou colunas ou de linhas ou colunas individuais


1 Posicione o ponteiro para a borda esquerda de uma linha ou a borda superior de uma coluna. 2 Quando o ponteiro se transformar em uma seta de seleo, clique para selecionar uma linha ou coluna, ou arraste

para selecionar vrias linhas ou colunas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 180


Layout de pginas com HTML

Seleo de uma nica coluna


1 Clique na coluna. 2 Clique no menu de cabealho de coluna e escolha Selecionar coluna.

Seleo de uma nica clula


Siga um destes procedimentos:

Clique na clula e selecione a tag <td> no seletor de tags no canto inferior esquerdo da janela Documento. Mantenha pressionada a tecla Control (Windows) ou Command (Macintosh) na clula. Clique na clula e selecione Editar > Selecionar tudo.
Selecione Editar > Selecionar tudo novamente quando uma clula estiver selecionada a fim de realar a tabela inteira.

Seleo de uma linha ou de um bloco retangular de clulas


Siga um destes procedimentos:

Arraste de uma clula para outra clula. Clique em uma clula, mantenha pressionada a tecla Control (Windows) ou a tecla Command (Macintosh)
enquanto clica na mesma clula para selecion-la e mantenha pressionada a tecla Shift enquanto clica em outra clula. Todas as clulas da regio linear ou retangular definidas pelas duas clulas so selecionadas.

Seleo de clulas no-adjacentes


Mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh)

enquanto clica nas clulas, linhas ou colunas que voc deseja selecionar. Se cada clula, linha ou coluna em que voc mantm pressionada a tecla Control enquanto clica ou mantm pressionada a tecla Command enquanto clica ainda no estiver selecionada, ela ser adicionada seleo. Se ela j estiver selecionada, ser removida da seleo.

Alterao da cor de realce dos elementos de tabela


1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione Realce na lista de categorias esquerda, faa uma das seguintes alteraes e clique em OK.

Para alterar a cor de realce dos elementos de tabela, clique na caixa de cor de Passar o mouse, selecione a cor de
realce usando o seletor de cores (ou digite o valor hexadecimal para a cor de realce na caixa de texto).

Para ativar ou desativar o realce dos elementos de tabela, marque ou desmarque a opo Mostrar de Passar o mouse.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 181


Layout de pginas com HTML

Nota: Essas opes afetam todos os objetos, como elementos com posio absoluta (elementos PA), que so realados Dreamweaver quando voc move o ponteiro sobre eles.

Definio das propriedades da tabela


Voc pode usar o Inspetor de propriedades para editar tabelas.
1 Selecione uma tabela. 2 Altere propriedades no Inspetor de propriedades (Janela > Propriedades), conforme desejar.
Ident. da tabela Uma identificao da tabela. Linhas e colunas O nmero de linhas e colunas da tabela. W A largura da tabela em pixels ou como uma porcentagem da largura da janela do navegador.

Nota: Voc normalmente no precisa definir a altura de uma tabela.


PreenchClula O nmero de pixels entre o contedo de uma clula e os limites da clula. EspaoClula O nmero de pixels entre as clulas de tabela adjacentes. Alinhar Determina onde a tabela aparecer em relao a outros elementos no mesmo pargrafo, como texto ou

imagens. esquerda alinha a tabela esquerda dos outros elementos (a fim de que o texto no mesmo pargrafo seja disposto ao redor da tabela direita); direita alinha a tabela direita dos outros elementos (com o texto disposto ao redor dela esquerda) e Centralizado centraliza a tabela (com o texto exibido acima e/ou abaixo da tabela). Padro indica que o navegador deve usar o alinhamento padro. Quando o alinhamento for definido como Padro, o outro contedo no ser exibido ao lado da tabela. Para exibir uma tabela ao lado do outro contedo, use o alinhamento esquerda ou direita.
Borda Especifica a largura, em pixels, das bordas da tabela.

Se voc no atribuir explicitamente valores para a borda, o espaamento de clula e o preenchimento de clula, a maioria dos navegadores exibir a tabela com a borda e o preenchimento da clula definidos como 1, e o espaamento da clula definido como 2. Para garantir que os navegadores exibiro a tabela sem preenchimento ou espaamento, defina Borda, Preenchimento da clula e Espaamento da clula como 0. Para visualizar os limites da clula e da tabela quando a borda estiver definida como 0, selecione Exibir > Auxlios visuais > Bordas da tabela.
Classe define a classe CSS na tabela.

Nota: Talvez seja necessrio expandir o inspetor Propriedades da tabela para ver as opes a seguir. Para expandir o inspetor Tabela de propriedades, clique na seta de expanso, no canto inferior direito.
Limpar larguras das colunas e Limpar alturas das linhas excluem todos os valores de largura de coluna ou altura de

linha explicitamente especificados na tabela.


Converter larguras da tabela em pixels e Converter alturas da tabela em pixels definem a largura ou altura de cada

coluna da tabela para a largura atual em pixels (tambm define a largura da tabela inteira para a largura atual em pixels).
Converter larguras da tabela em porcentagem e Converter alturas da tabela em porcentagem definem a largura ou

altura de cada coluna da tabela para a largura atual expressa como uma porcentagem da largura da janela Documento (tambm define a largura da tabela inteira para a largura atual como uma porcentagem da largura da janela Documento).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 182


Layout de pginas com HTML

Se voc tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor.

Definio das propriedades da clula, linha ou coluna


Voc pode usar o Inspetor de propriedades para editar as clulas e linhas de uma tabela.
1 Selecione a coluna ou linha. 2 No Inspetor de propriedades (Janela > Propriedades), defina as seguintes opes:
Horz Especifica o alinhamento horizontal do contedo de uma clula, linha ou coluna. Voc pode alinhar o contedo

esquerda, direita ou ao centro das clulas, ou pode indicar se o navegador deve usar o alinhamento padro (geralmente esquerda para clulas regulares e Centralizado para clulas de cabealho).
Vert Especifica o alinhamento vertical do contedo de uma clula, linha ou coluna. Voc pode alinhar o contedo na

parte superior, ao meio, na parte inferior ou na linha de base das clulas, ou indicar se o navegador deve usar o alinhamento padro (geralmente Meio).
L e A A largura e a altura das clulas selecionadas em pixels ou como uma porcentagem da largura ou altura da tabela inteira. Para especificar uma porcentagem, insira o smbolo de porcentagem (%) aps o valor. Para permitir que o navegador determine a largura ou altura apropriada com base no contedo da clula, e as larguras e alturas das outras colunas e linhas, deixe o campo em branco (o padro).

Por padro, um navegador escolhe uma altura de linha ou largura de coluna para acomodar, e a imagem mais larga ou a linha mais longa em uma coluna. por isso que, s vezes, uma coluna se torna muito mais larga que as outras colunas da tabela quando voc adiciona contedo a ela. Nota: possvel especificar uma altura como porcentagem da altura total da tabela, mas a linha pode no ser exibida na altura percentual especificada nos navegadores.
Fundo A cor do fundo para uma clula, coluna ou linha, escolhida com o seletor de cores. Mesclar clulas Combina as clulas, linhas ou colunas selecionadas em uma nica clula. Voc pode mesclar as clulas somente se elas formarem um bloco retangular ou linear. Dividir clula Divide uma clula, criando duas ou mais clulas. possvel dividir somente uma clula por vez. Este boto ficar desativado se mais de uma clula for selecionada. Sem quebra de linha Impede a quebra automtica de linha, mantendo todo o texto de uma clula em uma nica linha.

Se a opo Sem quebra de linha estiver ativada, as clulas aumentaro para acomodar todos os dados enquanto voc os digita ou os cola em uma clula. (Normalmente, as clulas se expandem horizontalmente para acomodar a palavra mais longa ou a imagem mais larga na clula; em seguida, elas se expandem verticalmente quando necessrio para acomodar outro contedo.)
Cabealho Formata as clulas selecionadas como clulas de cabealho de tabela. O contedo das clulas de cabealho

de tabela estaro em negrito e centralizados, por padro. Voc pode especificar as larguras e alturas como pixels ou porcentagens, e pode converter de pixels em porcentagens e vice-versa. Nota: Quando voc define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a cada clula da coluna. No entanto, quando voc definir determinadas propriedades para uma linha, o Dreamweaver alterar os atributos da tag tr, em vez de alterar os atributos de cada tag td na linha. Quando voc estiver aplicando o mesmo formato a todas as clulas de uma linha, a aplicao do formato tag tr produzir um cdigo HTML mais limpo e conciso.
3 Pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 183


Layout de pginas com HTML

Uso do modo Tabelas expandidas para facilitar a edio da tabela


O modo Tabelas expandidas adiciona temporariamente o preenchimento e o espaamento de clula a todas as tabelas de um documento e aumenta as bordas da tabela para facilitar a edio. Esse modo permite que voc selecione itens nas tabelas ou posicione precisamente o ponto de insero. Por exemplo, voc poderia expandir uma tabela para colocar o ponto de insero esquerda ou direita de uma imagem, sem selecionar inadvertidamente a imagem ou a clula da tabela.

A. Tabela no modo Padro B. Tabela no modo Tabelas expandidas

Nota: Aps fazer a seleo ou colocar o ponto de insero, retorne ao modo Padro da Visualizao de design para fazer as edies. Algumas operaes visuais, como redimensionamento, no retornaro os resultados esperados no modo Tabelas expandidas.

Alternncia para o modo Tabelas expandidas


1 Se voc estiver trabalhando na Visualizao de cdigo, selecione Exibir > Design ou Visualizao > Cdigo e design

(no possvel alternar para o modo Tabelas expandidas na Visualizao de cdigo).


2 Siga um destes procedimentos:

Selecione Exibir > Modo Tabela > Modo Tabelas expandidas. Na categoria Layout do painel Inserir, clique em Modo Tabelas expandidas.
Uma barra chamada Modo Tabelas expandidas aparece na parte superior da janela Documento. O Dreamweaver adiciona o preenchimento e o espaamento de clula a todas as tabelas da pgina e aumenta as bordas das tabelas.

Sair do modo Tabelas expandidas


Siga um destes procedimentos:

Clique em Sair na barra Modo Tabelas expandidas na parte superior da janela Documento. Selecione Exibir > Modo Tabela > Modo Padro. Na categoria Layout do painel Inserir, clique em Modo Padro.

Formatao de tabelas e clulas


Voc pode alterar a aparncia das tabelas definindo as propriedades da tabela e suas clulas ou aplicando um design predefinido tabela. Antes de definir as propriedades da tabela e da clula, saiba que a ordem de precedncia para formatao clulas, linhas e tabelas. Para formatar o texto dentro de uma clula de tabela, use os mesmos procedimentos que voc usaria para formatar o texto fora de uma tabela.

Mais tpicos da Ajuda


Adio e formatao do texto na pgina 217

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 184


Layout de pginas com HTML

Alterao do formato de uma tabela, linha, clula ou coluna


1 Selecione uma tabela, clula, linha ou coluna. 2 No Inspetor de propriedades (Janela > Propriedades), clique na seta de expanso no canto inferior direito e altere

as propriedades quando necessrio.


3 Altere as propriedades quando necessrio.

Para obter mais informaes sobre as opes, clique no cone Ajuda do Inspetor de propriedades. Nota: Quando voc define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a cada clula da coluna. No entanto, quando voc define determinadas propriedades de uma linha, o Dreamweaver altera os atributos da tag tr em vez de alterar os atributos de cada tag td da linha. Quando voc estiver aplicando o mesmo formato a todas as clulas de uma linha, a aplicao do formato tag tr produzir um cdigo HTML mais limpo e conciso.

Adio ou edio dos valores de acessibilidade de uma tabela na Visualizao de cdigo


Edite os atributos apropriados no cdigo.

Para localizar rapidamente as tags no cdigo, clique na tabela, selecione a tag <table> no seletor de tags, na parte inferior da janela Documento.

Adio ou edio dos valores de acessibilidade de uma tabela na Visualizao de design


Para editar a legenda da tabela, realce a legenda e digite uma nova. Para editar o alinhamento da legenda, coloque o ponto de insero na legenda da tabela, clique com o boto direito
do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) e selecione Editar cdigo de tag.

Para editar o resumo da tabela, selecione a tabela, clique com o boto direito do mouse (Windows) ou mantenha
pressionada a tecla Control enquanto clica (Macintosh) e selecione Editar cdigo de tag.

Redimensionamento de tabelas, colunas e linhas


Redimensionamento de tabelas Voc pode redimensionar uma tabela inteira ou linhas e colunas individuais. Quando uma tabela inteira redimensionada, todas as clulas da tabela mudam proporcionalmente de tamanho. Se as clulas de uma tabela tiverem larguras ou alturas explcitas especificadas, o redimensionamento da tabela alterar o tamanho visual das clulas na janela Documento, mas no alterar as larguras e alturas especificadas das clulas. possvel redimensionar uma tabela arrastando uma de suas alas de seleo. O Dreamweaver exibe a largura da tabela, juntamente com um menu de cabealho de tabela, na parte superior ou inferior da tabela quando esta selecionada ou quando o ponto de insero est na tabela. s vezes, as larguras de coluna definidas no cdigo HTML no correspondem s suas larguras aparentes na tela. Quando isso acontecer, voc poder torn-las consistentes. As larguras de tabela e coluna e os menus de cabealho aparecem no Dreamweaver para ajudar voc a dispor o layout das tabelas. Voc pode ativar ou desativar as larguras e os menus quando necessrio. Redimensionamento de colunas e linhas Voc pode alterar a largura de uma coluna ou a altura de uma linha no Inspetor de propriedades ou arrastando as bordas da coluna ou linha. Se voc tiver problemas com o redimensionamento, limpe as larguras de coluna ou as alturas de linha e comece novamente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 185


Layout de pginas com HTML

Nota: Tambm possvel alterar as larguras e alturas de clula diretamente no cdigo HTML usando a Visualizao de cdigo. O Dreamweaver exibe as larguras de coluna, juntamente com os menus de cabealho de coluna, nas partes superiores ou inferiores das colunas quando a tabela selecionada ou quando o ponto de insero est na tabela. possvel ativar ou desativar os menus de cabealho de coluna quando necessrio.

Mais tpicos da Ajuda


Trabalho com cdigo de pgina na pgina 292

Redimensionamento de tabelas, colunas e linhas


Redimensionamento de uma tabela
Selecione a tabela.

Para redimensionar a tabela horizontalmente, arraste a ala de seleo direita. Para redimensionar a tabela verticalmente, arraste a ala de seleo na parte inferior. Para redimensionar a tabela em ambas as dimenses, arraste a ala de seleo no canto inferior direito.

Alterao da largura de uma coluna e manuteno da largura geral da tabela


Arraste a borda direita da coluna que voc deseja alterar.

A largura da coluna adjacente tambm alterada. Na verdade, voc redimensiona duas colunas. O feedback visual mostra como as colunas sero ajustadas. A largura geral da tabela no alterada.

Nota: Nas tabelas com larguras baseadas em porcentagem (e no em pixels), se voc arrastar a borda direita da coluna da extrema direita, a largura da tabela inteira ser alterada e todas as colunas sero aumentadas ou diminudas proporcionalmente.

Alterao da largura de uma coluna e manuteno do tamanho das outras colunas


Mantenha pressionada a tecla Shift e arraste a borda da coluna.

A largura de uma coluna alterada. O feedback visual mostra como as colunas sero ajustadas. A largura geral da tabela alterada para acomodar a coluna que voc est redimensionando.

Alterao visual da altura de uma linha


Arraste a borda inferior da linha.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 186


Layout de pginas com HTML

Torne as larguras de coluna no cdigo consistentes com as larguras visuais


1 Clique em uma clula. 2 Clique no menu de cabealho de tabela e selecione Manter consistncia de todas as larguras.

O Dreamweaver redefine a largura especificada no cdigo para que corresponda largura visual.

Limpeza de todas as larguras ou alturas definidas em uma tabela


1 Selecione a tabela. 2 Siga um destes procedimentos:

Selecione Modificar > Limpar larguras das clulas ou Modificar > Tabela > Limpar alturas das clulas. No Inspetor de propriedades, (Janela > Propriedades), clique no boto Limpar alturas das linhas
Limpar larguras das colunas . ou no boto

Clique no menu de cabealho de tabela e selecione Limpar todas as alturas ou Limpar todas as larguras.

Limpeza da largura definida de uma coluna


Clique na coluna, clique no menu de cabealho de coluna e selecione Limpar larguras das colunas.

Ativao ou desativao das larguras de tabela e coluna e dos menus


1 Selecione Exibir > Auxlios visuais > Larguras de tabela. 2 Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica

(Macintosh) na tabela e selecione Tabela > Larguras de tabela.

Adio e remoo de linhas e colunas


Para adicionar e remover linhas e colunas, use Modificar > Tabela ou menu de cabealho de coluna. Se voc pressionar Tab na ltima clula de uma tabela, outra linha ser adicionada automaticamente tabela.

Adio de uma nica linha ou coluna


Clique em uma clula e siga um destes procedimentos:

Selecione Modificar > Tabela > Inserir linha ou Modificar > Tabela > Inserir coluna.
Uma linha aparecer acima do ponto de insero ou uma coluna aparecer esquerda do ponto de insero.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 187


Layout de pginas com HTML

Clique no menu de cabealho de coluna e selecione Inserir coluna esquerda ou Inserir coluna direita.

Adio de vrias linhas ou colunas


1 Clique em uma clula. 2 Selecione Modificar > Tabela > Inserir Linhas ou colunas, preencha a caixa de dilogo e clique em OK.
Inserir Indica se as linhas ou colunas sero inseridas ou no. Nmero de linhas ou Nmero de colunas O nmero de linhas ou colunas a ser inserido. Onde Especifica se as novas linhas ou colunas devem aparecer antes ou aps a linha ou coluna da clula selecionada.

Excluso de uma linha ou coluna


Siga um destes procedimentos:

Clique em uma clula na linha ou coluna a ser excluda e selecione Modificar > Tabela > Excluir linha ou
Modificar > Tabela > Excluir coluna.

Selecione uma linha ou coluna completa e, em seguida, selecione Editar > Limpar ou pressione Delete.

Adio ou excluso de linhas ou colunas usando o Inspetor de propriedades


1 Selecione a tabela. 2 No Inspetor de propriedades (Janela > Propriedades), siga destes procedimentos:

Para adicionar ou excluir linhas, aumente ou diminuir o valor Linhas. Para adicionar ou excluir colunas, aumente ou diminuir o valor Colunas.
Nota: O Dreamweaver no avisar se voc estiver excluindo linhas e colunas que contenham dados.

Diviso e mesclagem de clulas


Use o Inspetor de propriedades ou os comandos no submenu Modificar > Tabela para dividir ou mesclar clulas.

Mesclagem de duas ou mais clulas em uma tabela


1 Selecione as clulas em uma linha contgua e sob a forma de um retngulo.

Na ilustrao a seguir, a seleo um retngulo de clulas. Portanto, as clulas podem ser mescladas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 188


Layout de pginas com HTML

Na ilustrao a seguir, a seleo no um retngulo de clulas. Portanto, as clulas no podem ser mescladas.

2 Siga um destes procedimentos:

Selecione Modificar > Tabela > Mesclar clulas. No Inspetor de propriedades HTML expandido (Janela > Propriedades), clique em Mesclar clulas
. Nota: Se o boto no for exibido, clique na seta do expansor, no canto inferior direito do Inspetor de propriedades, para ver todas as opes. O contedo das clulas individuais colocado na clula mesclada resultante. As propriedades da primeira clula selecionada so aplicadas clula mesclada.

Diviso de uma clula


1 Clique na clula e siga um destes procedimentos:

Selecione Modificar > Tabela > Dividir clula. No Inspetor de propriedades HTML expandido (Janela > Propriedades), clique em Dividir clula
. Nota: Se o boto no for exibido, clique na seta do expansor, no canto inferior direito do Inspetor de propriedades, para ver todas as opes.
2 Na caixa de dilogo Dividir clula, especifique como a clula deve ser dividida:
Dividir clula em: Especifica se a clula ser dividida em linhas ou colunas. Nmero de linhas/Nmero de colunas Especifica em quantas linhas ou colunas a clula ser dividida.

Aumento ou diminuio do nmero de linhas ou colunas ocupadas por uma clula


Siga um destes procedimentos:

Selecione Modificar > Tabela > Aumentar extenso da linha ou Modificar > Tabela > Aumentar extenso da
coluna.

Selecione Modificar > Tabela > Diminuir extenso da linha ou Modificar > Tabela > Diminuir extenso da coluna.

Cpia, colagem e excluso de clulas


Voc pode copiar, colar ou excluir uma nica clula de tabela ou vrias clulas de uma s vez, preservando a formatao da clula. possvel colar clulas no ponto de insero ou no lugar de uma seleo em uma tabela existente. Para colar vrias clulas de tabela, o contedo da rea de transferncia deve ser compatvel com a estrutura da tabela ou a seleo na tabela em que as clulas sero coladas.

Recorte ou cpia das clulas de tabela


1 Selecione uma ou mais clulas em uma linha contgua e sob a forma de um retngulo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 189


Layout de pginas com HTML

Na ilustrao a seguir, a seleo um retngulo de clulas. Portanto, as clulas podem ser recortadas ou copiadas.

Na ilustrao a seguir, a seleo no um retngulo. Portanto, as clulas no podem ser recortadas ou copiadas.

2 Selecione Editar > Recortar ou Editar > Copiar.

Nota: Se voc selecionou uma linha ou coluna inteira e clicar em Editar > Recortar, toda a linha ou coluna ser removida da tabela (e no apenas o contedo das clulas).

Colagem das clulas de tabela


1 Selecione o local onde voc deseja colar as clulas:

Para substituir as clulas existentes pelas clulas que voc est colando, selecione um conjunto de clulas existentes
com o mesmo layout das clulas na rea de transferncia. (Por exemplo, se voc copiou ou recortou um bloco de clulas de 3 x 2, poder selecionar outro bloco de clulas de 3 x 2 a ser substitudo pela colagem.)

Para colar uma linha completa de clulas acima de uma clula especfica, clique nessa clula. Para colar uma coluna completa de clulas esquerda de uma clula especfica, clique nessa clula.
Nota: Se voc tiver menos de uma linha ou coluna completa de clulas na rea de transferncia, e clicar em uma clula e colar as clulas da rea de transferncia, a clula em que voc clicou e suas vizinhas possivelmente sero substitudas (dependendo do local dela na tabela) pelas clulas que esto sendo coladas.

Para criar uma nova tabela com as clulas coladas, coloque o ponto de insero fora da tabela.
2 Selecione Editar > Colar.

Se voc estiver colando linhas ou colunas inteiras em uma tabela existente, as linhas ou colunas sero adicionadas tabela. Se voc estiver colando uma clula individual, o contedo da clula selecionada ser substitudo. Se voc estiver fazendo a colagem fora de uma tabela, as linhas, colunas ou clulas sero usadas para definir uma nova tabela.

Remoo do contedo da clula mantendo as clulas intactas


1 Selecione uma ou mais clulas.

Nota: Assegure que a seleo no inteiramente constituda de linhas ou colunas completas.


2 Selecione Editar > Limpar ou pressione Delete.

Nota: Se apenas linhas ou colunas completas estiverem selecionadas quando voc clicar em Editar > Limpar ou pressionar Delete, as linhas ou colunas inteiras, e no apenas seu contedo, sero removidas da tabela.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 190


Layout de pginas com HTML

Excluso de linhas ou colunas que contm clulas mescladas


1 Selecione a linha ou coluna. 2 Selecione Modificar > Tabela > Excluir linha ou Modificar > Tabela > Excluir coluna.

Aninhamento de tabelas
Uma tabela aninhada uma tabela dentro de uma clula de outra tabela. Voc pode formatar uma tabela aninhada como faria em qualquer outra tabela. No entanto, sua largura limitada pela largura da clula em que ela aparece.
1 Clique em uma clula da tabela existente. 2 Selecione Inserir > Tabela, defina as opes Inserir tabela e clique em OK.

Ordenao de tabelas
Voc pode ordenar as linhas de um tabela com base no contedo de uma nica coluna. Tambm possvel executar uma ordenao de tabela mais complexa com base no contedo de duas colunas. Voc no pode ordenar tabelas que contenham o atributo colspan ou rowspan, ou seja, tabelas que contenham clulas mescladas.
1 Selecione a tabela ou clique em qualquer clula. 2 Selecione Comandos > Ordenar tabela, defina as opes na caixa de dilogo e clique em OK.
Ordenar por Determina quais valores de coluna sero usados para ordenar as linhas da tabela. Ordem Determina se a coluna ser ordenada alfabtica ou numericamente, e se ela ser ordenada em ordem crescente

(de A a Z, dos nmeros menores para os maiores) ou decrescente. Quando o contedo de uma coluna for composto por nmeros, selecione Numericamente. Uma ordenao alfabtica aplicada a uma lista de nmeros de um e dois dgitos resulta na ordenao dos nmeros como se eles fossem palavras (por exemplo, 1, 10, 2, 20, 3, 30), e no como nmeros realmente (por exemplo, 1, 2, 3, 10, 20, 30).
Depois, por/Ordem Determina a ordem de uma ordenao secundria em uma coluna diferente. Especifica a coluna

de ordenao secundria no menu pop-up Depois, por e a ordem da ordenao secundria nos menus pop-up Ordem.
A ordenao inclui a primeira linha Especifica se a primeira linha da tabela deve ser includa na ordenao. Se a

primeira linha for um cabealho que no deve ser movido, no selecione esta opo.
Ordenar linhas do cabealho Especifica que todas as linhas da seo thead (se houver alguma) da tabela devem ser ordenadas usando os mesmos critrios das linhas do corpo. (Observe que as linhas thead permanecem na seo thead e ainda aparecero na parte superior da tabela, at mesmo depois da ordenao.) Para obter informaes sobre a tag thead, consulte o painel Referncia (selecione Ajuda > Referncia). Ordenar linhas do rodap Especifica que todas as linhas da seo tfoot (se houver alguma) da tabela devem ser

ordenadas usando os mesmos critrios das linhas do corpo. (Observe que as linhas tfoot permanecem na seo tfoot e ainda aparecero na parte inferior da tabela, at mesmo depois da ordenao.) Para obter informaes sobre a tag tfoot, consulte o painel Referncia (selecione Ajuda > Referncia).
Manter todas as cores de linha inalteradas aps a ordenao Especifica que os atributos de linha de tabela (como cor) devem permanecer associados ao mesmo contedo aps a ordenao. Se as linhas de tabela forem formatadas com duas cores alternativas, no selecione esta opo para garantir que a tabela classificada ainda ter linhas com cores alternativas. Se os atributos de linha forem especficos do contedo de cada linha, selecione esta opo para garantir que esses atributos permanecero associados s linhas corretas na tabela ordenada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 191


Layout de pginas com HTML

Uso de quadros
Como funcionam os quadros e os conjuntos de quadros
Um quadro uma regio de uma janela do navegador que pode exibir um documento HTML independentemente do que est sendo exibido no restante da janela do navegador. Os quadros permitem dividir uma janela do navegador em vrias regies, cada uma delas podendo exibir um documento HTML diferente. Geralmente, um quadro exibe um documento que contm controles de navegao, enquanto outro quadro exibe um documento com o contedo. Um conjunto de quadros um arquivo HTML que define o layout e as propriedades de um conjunto de quadros, incluindo o nmero de quadros, o tamanho e o posicionamento dos quadros, e o URL da pgina que aparece inicialmente em cada quadro. O arquivo de conjunto de quadros propriamente no possui contedo HTML a ser exibido em um navegador, a no ser a seo noframes. O arquivo de conjunto de quadros simplesmente fornece informaes para o navegador sobre como deve ser a aparncia de um conjunto de quadros e quais documentos devem aparecer nele. Para visualizar um conjunto de quadros em um navegador, digite o URL do arquivo do conjunto de quadros. O navegador abrir os documentos relevantes a serem exibidos nos quadros. O arquivo do conjunto de quadros de um site geralmente chamado de index.html, a fim de que ele seja exibido por padro caso um visitante no especifique um nome de arquivo. O exemplo a seguir mostra um layout de quadro composto por trs quadros: um quadro estreito no lado que contm uma barra de navegao, um quadro ao longo da parte superior contendo o logotipo e o ttulo do site, e um quadro grande que ocupa o restante da pgina e possui o contedo principal. Cada um desses quadros exibe um documento HTML separado.

Neste exemplo, o documento exibido no quadro superior nunca alterado quando o visitante navega no site. A barra de navegao de quadro lateral contm links; se voc clicar em um desses links, o contedo do quadro principal alterado, mas o contedo do quadro lateral permanece esttico. O quadro de contedo principal direita exibe o documento apropriado para o link que o visitante clica esquerda.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 192


Layout de pginas com HTML

Um quadro no um arquivo. fcil considerar o documento que aparece atualmente em um quadro como parte integrante do quadro, mas, na verdade, o documento no faz parte do quadro. O quadro um continer que retm o documento. Nota: Uma pgina se refere a um nico documento HTML ou ao contedo inteiro de uma janela de documento em um dado momento, mesmo que vrios documentos HTML apaream simultaneamente. A frase uma pgina que usa quadros, por exemplo, geralmente se refere a um conjunto de quadros e aos documento que aparecem inicialmente nesses quadros. Um site que aparece em um navegador como uma pgina nica composta de trs quadros consiste, na verdade, de pelo menos quatro documentos HTML: o arquivo de conjunto de quadros mais os trs documentos que possuem o contedo que aparece inicialmente nos quadros. Quando voc projeta uma pgina usando conjuntos de quadros no Dreamweaver, deve salvar cada um desses quatro arquivos para que a pgina funcione corretamente no navegador. Para obter informaes mais abrangentes sobre Quadros, consulte o site da Thierry Koblentz em www.tjkdesign.com/articles/frames/.

Decidir se os quadros devem ou no ser usados


A Adobe no recomenda o uso de quadros para layout de pgina da Web. Algumas das desvantagens do uso de quadros incluem:

O alinhamento grfico preciso dos elementos em quadros diferentes podem ser difcil. O teste da navegao pode ser demorado. Os URLs das pginas individuais com quadro no aparecem nos navegadores; portanto, pode ser difcil para um
visitante indicar uma pgina especfica (a menos que voc fornea um cdigo de servidor que os permita carregar uma verso com quadro de uma pgina) Para obter informaes completas com os motivos pelos quais voc no deve usar quadros, consulte a explicao de Gary White em http://apptools.com/rants/framesevil.php. Os quadros so mais utilizados para navegao, caso decida us-los. Um conjunto de quadros geralmente inclui um quadro que contm uma barra de navegao e outro quadro para exibir as pginas de contedo principais. Usar os quadros desse modo tem algumas vantagens:

O navegador de um visitante no precisa recarregar os grficos relacionados a navegao em cada pgina. Cada quadro tem sua prpria barra de rolagem (se o contedo for muito grande para caber em uma janela),
portanto, um visitante pode rolar os quadros de forma independente. Por exemplo, um visitante que rola para a parte inferior de uma pgina de contedo longa em um quadro no precisa rolar novamente para a parte superior a fim de usar a barra de navegao, caso ela esteja em outro quadro.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 193


Layout de pginas com HTML

Em muitos casos, possvel criar uma pgina da Web sem quadros que atinja os mesmos objetivos de um conjunto de quadros. Por exemplo, se voc deseja que uma barra de navegao aparea no lado esquerdo da pgina, substitua a pgina por um conjunto de quadros ou apenas inclua a barra de navegao em cada pgina do site. (O Dreamweaver ajuda voc a criar vrias pginas que usam o mesmo layout.) O exemplo a seguir mostra um design de pgina com um layout semelhante ao de um quadro, mas que no usa quadros.

Os sites criados de modo inadequado usam quadros desnecessariamente, com um conjunto de quadros que recarrega o contedo dos quadros de navegao cada vez que o visitante clica em um boto de navegao. Quando os quadros so bem utilizados (por exemplo, para manter os controles de navegao estticos em um quadro e, ao mesmo tempo, permitir que o contedo de outro quadro seja alterado), eles podem ser muito teis para um site. Nem todos os navegadores oferecem um suporte satisfatrio aos quadros, dificultando o uso dos quadros pelos visitantes com dificuldades de navegao. Portanto, se voc usar quadros, sempre fornea uma seo noframes no conjunto de quadros para os visitantes que no podem visualiz-los. Voc tambm poderia fornecer um link explcito para uma verso sem quadros do site. Para obter informaes mais abrangentes sobre Quadros, consulte o site da Thierry Koblentz em www.tjkdesign.com/articles/frames/.

Conjuntos de quadros aninhados


Um conjunto de quadros dentro de outro conjunto de quadros chamado de conjunto de quadros aninhado. Um arquivo de conjunto de quadro pode conter vrios conjuntos de quadros aninhados. A maioria das pginas da Web que usa quadros est, na verdade, usando quadros aninhados, e a maioria dos conjuntos de quadros predefinidos no Dreamweaver tambm usa o aninhamento. Qualquer conjunto de quadros em que haja diferentes nmeros de quadros em diferentes linhas ou colunas requer um conjunto de quadros aninhado. Por exemplo, o layout de quadro mais comum tem um quadro na linha superior (onde aparece o logotipo da empresa) e dois quadros na linha inferior (um quadro de navegao e um quadro de contedo). Esse layout requer um conjunto de quadros aninhado: um conjunto de quadros de duas linhas, com um conjunto de quadros de duas colunas aninhado na segunda linha.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 194


Layout de pginas com HTML

A. Conjunto de quadros principal B. O quadro de menu e o quadro de contedo esto aninhados dentro do conjunto de quadros principal.

O Dreamweaver cuida do aninhamento de conjunto de quadros quando necessrio. Se voc usar as ferramentas de diviso de quadros do Dreamweaver, no precisar se preocupar com quais quadros esto aninhados e quais no esto. H duas maneiras de aninhar conjuntos de quadros em HTML: o conjunto de quadros interno pode ser definido no mesmo arquivo que o conjunto de quadros externo ou em um arquivo separado. Cada conjunto de quadros predefinido do Dreamweaver define todos os seus conjuntos de quadros no mesmo arquivo. Os dois tipos de aninhamento produzem os mesmos resultados visuais; no fcil dizer, sem examinar o cdigo, qual tipo de aninhamento est sendo usado. A situao mais provvel em que um arquivo de conjunto de quadros externo precisar ser usado no Dreamweaver quando voc utiliza o comando Abrir no quadro para abrir um arquivo de conjunto de quadros dentro de um quadro. Isso possivelmente resultar em problemas na definio de alvos para links. geralmente mais simples manter todos os conjuntos de quadros definidos em um nico arquivo.

Trabalho com conjuntos de quadros na janela Documento


O Dreamweaver permite que voc visualize e edite todos os documentos associados a um conjunto de quadros em uma janela Documento. Com essa abordagem, ser possvel ver aproximadamente como as pginas com quadros aparecero em um navegador enquanto voc as edita. No entanto, alguns aspectos dessa abordagem pode ser confusa at que voc se acostume com elas. Em particular, cada quadro exibe um documento HTML separado. Mesmo se os documentos estiverem vazios, voc dever salv-los para que possa visualiz-los (pois o conjunto de quadros s poder ser visualizado com preciso se contiver o URL de um documento a ser exibido em cada quadro). Para garantir que o conjunto de quadros aparecer corretamente nos navegadores, siga estas etapas gerais:
1 Crie o conjunto de quadros e especifique um documento para que ele aparea em cada quadro. 2 Salve cada arquivo que aparecer em um quadro. Lembre-se de que cada quadro exibe um documento HTML

separado e que voc deve salvar cada documento, juntamente com o arquivo de conjunto de quadros.
3 Defina as propriedades de cada quadro e do conjunto de quadros (incluindo a nomeao de cada quadro, a

definio das opes de rolagem e no-rolagem).


4 Defina a propriedade Alvo no Inspetor de propriedades para todos os links, a fim de que o contedo vinculado

aparea na rea correta.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 195


Layout de pginas com HTML

Criar quadros e conjuntos de quadros


H duas maneiras de criar um conjunto de quadros no Dreamweaver: voc pode selecionar entre vrios conjuntos de quadros predefinidos ou pode cri-lo por sua prpria conta. A escolha de um conjunto de quadros predefinido configura todos os quadros e conjuntos de quadros necessrios para criar o layout e a maneira mais fcil de criar rapidamente um layout baseado em quadro. Voc pode inserir um conjunto de quadros predefinido somente na Visualizao de design da janela Documento. Tambm possvel criar seu prprio conjunto de quadros no Dreamweaver adicionando divisores janela Documento. Antes de criar um conjunto de quadros ou trabalhar com quadros, torne as bordas do quadro visveis na Visualizao de design da janela Documento selecionando Exibir > Auxlios visuais > Bordas de quadro.

Mais tpicos da Ajuda


Dreamweaver e acessibilidade na pgina 688

Criao de um conjunto de quadros predefinido e exibio de um documento existente em um quadro


1 Posicione o ponto de insero em um documento e siga um destes procedimentos:

Escolha Inserir > HTML > Quadros e selecione um conjunto de quadros predefinido. quadros predefinido.

Na categoria Layout do painel Inserir, clique na seta suspensa no boto Quadros e selecione um conjunto de
Os cones de conjunto de quadros oferecem uma representao visual de cada conjunto de quadros conforme aplicados ao documento atual. A rea azul de um cone de conjunto de quadros representa o documento atual e as reas brancas representam os quadros que exibiro outros documentos.
2 Se voc tiver configurado o Dreamweaver para solicitar atributos de acessibilidade de quadro, selecione um quadro

no menu pop-up, digite um nome para o quadro e clique em OK. (Para os visitantes que usam leitores de tela, o leitor de tela ler esse nome quando encontrar o quadro em uma pgina.) Nota: Se voc clicar em OK sem digitar um novo nome, o Dreamweaver atribuir ao quadro um nome que corresponde sua posio (quadro esquerdo, quadro direito etc.) no conjunto de quadros. Nota: Se voc pressionar Cancelar, o conjunto de quadros aparecer no documento, mas o Dreamweaver no associar tags ou atributos de acessibilidade a ele. Selecione Janela > Quadros para visualizar um diagrama dos quadros que voc est nomeando.

Criao de um conjunto de quadros predefinido vazio


1 Selecione Arquivo > Novo. 2 Na caixa de dilogo Novo documento, selecione a categoria Pgina da amostra. 3 Selecione a pasta Conjunto de quadros na coluna Pasta de amostra. 4 Selecione um conjunto de quadros na coluna Pgina de amostra e clique em Criar. 5 Se voc tiver ativado os atributos de acessibilidade de quadro em Preferncias, a caixa de dilogo Atributos de

acesso a tag frame aparecer. Preencha a caixa de dilogo de cada quadro e clique em OK. Nota: Se voc pressionar Cancelar, o conjunto de quadros aparecer no documento, mas o Dreamweaver no associar tags ou atributos de acessibilidade a ele.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 196


Layout de pginas com HTML

Criao de um conjunto de quadros


Selecione Modificar > Conjunto de quadros e, em seguida, selecione um item de diviso (como Dividir quadro

esquerda ou Dividir quadro direita) no submenu. O Dreamweaver divide a janela em quadros. Se houver um documento aberto, ele aparecer em um dos quadros.

Diviso de um quadro em quadros menores


Para dividir o quadro onde est o ponto de insero, selecione um item de diviso no submenu Modificar >
Conjunto de quadros.

Para dividir um quadro ou conjunto de quadros vertical ou horizontalmente, arraste uma borda de quadro da borda
para o meio da Visualizao de design.

Para dividir um quadro usando uma borda de quadro que no esteja na borda da Visualizao de design, mantenha
pressionada a tecla Alt (Windows) ou mantenha pressionada a tecla Option (Macintosh) enquanto arrasta uma borda de quadro.

Para dividir um quadro em quatro, arraste uma borda de quadro de um dos cantos da Visualizao de design para
o meio de um quadro. Para criar trs quadros, comece com dois quadros e divida um deles. No fcil mesclar dois quadros adjacentes sem editar o cdigo do conjunto de quadros. Portanto, transformar quatro quadros em trs mais difcil do que transformar dois quadros em trs.

Excluso de um quadro
Arraste uma borda de quadro para fora da pgina ou para uma borda do quadro pai.

Se houver algum contedo no salvo de um documento em um quadro que est sendo removido, o Dreamweaver solicitar que voc salve o documento. Nota: No possvel remover totalmente um conjunto de quadros arrastando as bordas. Para remover um conjunto de quadros, feche a janela Documento que o exibe. Se o arquivo de conjunto de quadros tiver sido salvo, exclua o arquivo.

Redimensionamento de um quadro
Para definir tamanhos aproximados de quadros, arraste as bordas de quadro na Visualizao de design da janela
Documento.

Para especificar tamanhos exatos e a quantidade de espao que o navegador alocar para uma linha ou coluna de
quadros quando o tamanho da janela do navegador no permitir que os quadros sejam exibidos em tamanho integral, use o Inspetor de propriedades.

Seleo de quadros e conjuntos de quadros


Para alterar as propriedades de um quadro ou conjunto de quadros, comece selecionando o quadro ou conjunto de quadros a ser alterado. Voc pode selecionar um quadro ou conjunto de quadros na janela Documento ou usando o painel Molduras.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 197


Layout de pginas com HTML

O painel Molduras oferece uma representao visual dos quadros em um conjunto de quadros. Ele mostra a hierarquia da estrutura do conjunto de quadros de uma maneira que pode no ser visvel na janela Documento. No painel Molduras, uma borda muito espessa envolve cada conjunto de quadros; cada quadro contornado por uma linha cinza fina e identificado por um nome de quadro.

Na Visualizao de design da janela Documento, quando um quadro selecionado, suas bordas so contornadas com uma linha pontilhada. Quando um conjunto de quadros selecionado, todas as bordas dos quadros do conjunto de quadros so contornadas com uma linha pontilhada clara. Nota: O posicionamento do ponto de insero em um documento exibido em um quadro no o mesmo que selecionar um quadro. H vrias operaes (como definir as propriedades do quadro) nas quais voc deve selecionar um quadro.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 198


Layout de pginas com HTML

Seleo de um quadro ou conjunto de quadros no painel Molduras


1 Selecione Janela > Quadros. 2 No painel Molduras:

Para selecionar um quadro, clique no quadro. (Um contorno de seleo aparece em torno do quadro no painel
Molduras e na Visualizao de design da janela Documento).

Para selecionar um conjunto de quadros, clique na borda que envolve o conjunto de quadros.

Seleo de um quadro ou conjunto de quadros na janela Documento


Para selecionar um quadro, clique com as teclas Shift e Alt pressionadas (Windows) ou com as teclas Option e Shift
(Macintosh) em um quadro na Visualizao de design.

Para selecionar um conjunto de quadros, clique em uma das bordas de quadro internas do conjunto de quadros na
Visualizao de design. (As bordas de quadro devem estar visveis para que isso possa ser feito. Selecione Exibir > Auxlios visuais > Bordas de quadro para tornar as bordas visveis, caso elas no estejam.) Nota: geralmente mais fcil selecionar conjuntos de quadros no painel Molduras do que na janela Documento. Para obter mais informaes, consulte os tpicos anteriores.

Seleo de outro quadro ou conjunto de quadros


Para selecionar o quadro ou conjunto de quadros seguinte ou anterior no mesmo nvel hierrquico da seleo atual,
pressione Alt+Seta esquerda ou Alt+Seta direita (Windows) ou Command+Seta esquerda ou Command+Seta direita (Macintosh). Usando essas teclas, voc pode percorrer os quadros e conjuntos de quadros na ordem em que esto definidos no arquivo de conjunto de quadros.

Para selecionar o conjunto de quadros pai (o conjunto de quadros que contm a seleo atual), pressione Alt+Seta
para cima (Windows) ou Command+Seta para cima (Macintosh).

Para selecionar o primeiro quadro ou conjunto de quadros filho do conjunto de quadros selecionado (ou seja, o
primeiro na ordem em que eles esto definidos no arquivo de conjunto de quadros), pressione Alt+Seta para baixo (Windows) ou Command+Seta para baixo (Macintosh).

Abertura de um documento em um quadro


Voc pode especificar o contedo inicial de um quadro inserindo o novo contedo em um documento vazio em um quadro ou abrindo um documento existente em um quadro.
1 Coloque o ponto de insero em um quadro. 2 Selecione Arquivo > Abrir no quadro. 3 Selecione um documento a ser aberto no quadro e clique em OK (Windows) ou Escolher (Macintosh). 4 (Opcional) Para tornar este documento o padro a ser exibido no quadro quando o conjunto de quadros aberto

em um navegador, salve o conjunto de quadros.

Salvar arquivos de quadro e conjunto de quadros


Para que voc possa visualizar um conjunto de quadros em um navegador, salve o arquivo de conjunto de quadros e todos os documentos a serem exibidos nos quadros. Voc pode salvar cada arquivo de conjunto de quadros e um documento com quadro ou salvar o arquivo de conjunto de quadros e todos os documentos que aparecem nos quadros simultaneamente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 199


Layout de pginas com HTML

Nota: Quando voc usa as ferramentas visuais do Dreamweaver para criar um conjunto de quadros, cada novo documento exibido em um quadro recebe um nome de arquivo padro. Por exemplo, o primeiro arquivo de conjunto de quadros nomeado como ConjuntodequadrosSemTtulo-1, enquanto o primeiro documento de um quadro nomeado como QuadroSemTtulo-1.

Salvar um arquivo de conjunto de quadros


Selecione o conjunto de quadros no painel Molduras ou na janela Documento.

Para salvar o arquivo de conjunto de quadros, selecione Arquivo > Salvar conjunto de quadros. Para salvar o arquivo de conjunto de quadros como um novo arquivo, selecione Arquivo > Salvar conjunto de
quadros como. Nota: Se o arquivo de conjunto de quadros no tiver sido salvo, esses dois comandos sero equivalentes.

Salvar um documento que aparece em um quadro


Clique no quadro, selecione Arquivo > Salvar quadro ou Arquivo > Salvar quadro como.

Salvar todos os arquivos associados a um conjunto de quadros


Selecione Arquivo > Salvar todos os quadros.

Esse procedimento salva todos os documentos abertos no conjunto de quadros, incluindo o arquivo de conjunto de quadros e todos os documentos com quadro. Se o arquivo de conjunto de quadros ainda no tiver sido salvo, uma borda espessa aparecer em torno do conjunto de quadros (ou o quadro no salvo) na Visualizao de design e voc poder selecionar um nome de arquivo. Nota: Se voc usou Arquivo > Abrir no quadro para abrir um documento no quadro, ao salvar o conjunto de quadros, o documento que voc abriu no quadro se tornar o documento padro a ser exibido nesse quadro. Caso no queira que o documento seja o padro, no salve o arquivo de conjunto de quadros.

Exibir e definir propriedades e atributos de quadro


Use o Inspetor de propriedades para visualizar e definir a maioria das propriedades de quadro, incluindo bordas, margens e informaes que especifiquem se as barras de rolagem aparecero nos quadros. Se voc definir uma propriedade de quadro, a configurao dessa propriedade ser substituda em um conjunto de quadros. Talvez voc tambm precise definir alguns atributos de quadro, como o atributo de ttulo (que no o mesmo que o atributo de nome), para melhorar a acessibilidade. Voc pode ativar a opo de criao de acessibilidade para quadros a fim de definir atributos ao criar quadros ou pode definir atributos aps inserir um quadro. Para editar atributos de acessibilidade para um quadro, use o Inspetor de tags para editar diretamente o cdigo HTML.

Mais tpicos da Ajuda


Dreamweaver e acessibilidade na pgina 688

Visualizao ou definio de propriedades de quadro


1 Selecione um quadro seguindo um destes procedimentos:

Mantenha pressionada a tecla Alt enquanto clica (Windows) ou mantenha pressionadas a teclas Shift e Option
enquanto clica (Macintosh) em um quadro na Visualizao de design da janela Documento.

Clique em um quadro no painel Molduras (Janela > Quadros).


2 No Inspetor de propriedades (Janela > Propriedades), clique na seta de expanso, no canto inferior direito, para

exibir todas as propriedades de quadro.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 200


Layout de pginas com HTML

3 Defina as opes do Inspetor de propriedades de quadro.


Moldura O nome usado pelo atributo target de um link ou por um script para fazer referncia ao quadro. Um nome de quadro deve ser uma nica palavra. So permitidos sublinhados (_), mas no so permitidos hfens (-), pontos (.) e espaos. Um nome de quadro deve iniciar com uma letra (e no com nmeros). Os nomes de quadro diferenciam minsculas de maisculas. No use termos que so palavras reservadas em JavaScript (por exemplo, top ou navigator) como nomes de quadro.

Para fazer com que um link altere o contedo de outro quadro, voc deve atribuir um nome ao quadro de destino. Para facilitar a criao de links entre quadros posteriormente, atribua nomes a cada quadro ao cri-los.
Origem Especifica o documento de origem a ser exibido no quadro. Clique no cone de pasta desejado e selecione um

arquivo.
Rolar Especifica se as barras de rolagem aparecem no quadro. Se voc definir esta opo como Padro, um valor no

ser definido para o atributo correspondente, permitindo que cada navegador use seu valor padro. A maioria dos navegadores assume Automtico como valor padro, o que significa que as barras de rolagem aparecero apenas quando no houver espao suficiente em uma janela de navegador para exibir o contedo completo do quadro atual.
Sem redimensionamento Impede que os visitantes arrastem as bordas de quadro para redimensionar o quadro em um

navegador. Nota: Voc sempre poder redimensionar os quadros no Dreamweaver; esta opo se aplica apenas aos visitantes que visualizam os quadros em um navegador.
Bordas Mostra ou oculta as bordas do quadro atual quando ele visualizado em um navegador. A seleo da opo Bordas em um quadro substitui as configuraes de borda do conjunto de quadros.

As opes de borda so Sim (mostrar bordas), No (ocultar bordas) e Padro. A maioria dos navegadores mostra as bordas, por padro, a menos que o conjunto de quadros pai esteja com as opes de borda definidas para No. Uma borda fica oculta somente quando todos os quadros que compartilham a borda esto com as opes de borda definidas para No, ou quando a propriedade de bordas do conjunto de quadros pai est definida para No e os quadros que compartilham a borda esto com as opes de borda definidas para Padro.
Cor da borda Define uma cor para todas as bordas do quadro. Esta cor se aplica a todas as bordas que tocam o quadro

e substitui a cor de borda especificada do conjunto de quadros.


Largura da margem Define a largura em pixels das margens esquerda e direita (o espao entre as bordas de quadro e

o contedo).
Altura da margem Define a altura em pixels das margens superior e inferior (o espao entre as bordas de quadro e o

contedo). Nota: Definir a largura e altura da margem de um quadro no o mesmo que definir margens na caixa de dilogo Modificar > Propriedades da pgina. Para alterar a cor de fundo de um quadro, defina a cor de fundo do documento no quadro, nas propriedades da pgina.

Definio dos valores de acessibilidade de um quadro


1 No painel Molduras (Janela > Quadros), selecione um quadro colocando o ponto de insero em um dos quadros. 2 Selecione Modificar > Editar tag <frameset>. 3 Selecione Folha de estilos/acessibilidade na lista de categorias esquerda, digite os valores e clique em OK.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 201


Layout de pginas com HTML

Edio dos valores de acessibilidade de um quadro


1 Exiba a Visualizao de cdigo ou as visualizaes de cdigo e de design do documento, se voc estiver na

Visualizao de design.
2 No painel Molduras (Janela > Quadros), selecione um quadro colocando o ponto de insero em um dos quadros.

O Dreamweaver reala a tag frame no cdigo.


3 Clique com o boto direito do mouse no cdigo (Windows) ou mantenha pressionada a tecla Control enquanto

clica no cdigo (Macintosh) e selecione Editar tag.


4 No editor de tags, faa as alteraes e clique em OK.

Alterao da cor de fundo de um documento em um quadro


1 Coloque o ponto de insero no quadro. 2 Selecione Modificar > Propriedades da pgina. 3 Na caixa de dilogo Propriedades da pgina, clique no menu Cor do fundo e selecione uma cor.

Visualizao e definio das propriedades do conjunto de quadros


Use o Inspetor de propriedades para visualizar e definir a maioria das propriedades do conjunto de propriedades, incluindo o ttulo do conjunto de quadros, as bordas e os tamanhos de quadro.

Definio de um ttulo para um documento de conjunto de quadros


1 Selecione um conjunto de quadros seguindo um destes procedimentos:

Clique em uma borda entre dois quadros do conjunto de quadros na Visualizao de design da janela Documento. Clique na borda que envolve um conjunto de quadros no painel Molduras (Janela > Quadros).
2 Na caixa Ttulo da barra de ferramentas Documento, digite um nome para o documento de conjunto de quadros.

Quando um visitante visualiza o conjunto de quadros em um navegador, o ttulo aparece na barra de ttulo do navegador.

Visualizao ou definio das propriedades de conjunto de quadros


1 Selecione um conjunto de quadros seguindo um destes procedimentos:

Clique em uma borda entre dois quadros do conjunto de quadros na Visualizao de design da janela Documento. Clique na borda que envolve um conjunto de quadros no painel Molduras (Janela > Quadros).
2 No Inspetor de propriedades (Janela > Propriedades), clique na seta de expanso no canto inferior direito e defina

as opes de conjunto de quadros.


Bordas Determina se as bordas devem aparecer em torno dos quadros quando o documento visualizado em um navegador. Para exibir bordas, selecione Sim. Para impedir que o navegador exiba as bordas, selecione No. Para que o navegador determine como as bordas sero exibidas, selecione Padro. Largura da borda Especifica uma largura para todas as bordas no conjunto de quadros. Cor da borda Define uma cor para as bordas. Use o seletor de cores para selecionar uma cor ou digite o valor

hexadecimal de uma cor.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 202


Layout de pginas com HTML

Seleo de lin./col. Define os tamanhos de quadro para as linhas e colunas do conjunto de quadros selecionado. Clique em uma aba no lado esquerdo ou superior da rea Seleo de lin./col. e digite uma altura ou largura na caixa de texto Valor.

3 Para especificar a quantidade de espao que o navegador alocar para cada quadro, selecione entre as seguintes

opes do menu Unidades:


Pixels Define o tamanho da coluna ou linha selecionada para um valor absoluto. Escolha esta opo para um quadro que deve estar sempre no mesmo tamanho, como uma barra de navegao. O espao dos quadros com tamanhos especificados em pixels alocado antes dos quadros com tamanhos especificados como um valor percentual ou relativo. A abordagem mais comum para tamanhos de quadro definir um quadro esquerdo para uma largura de pixel fixa e definir um quadro direito para um valor relativo, o que possibilitar que o quadro direito seja alongado de modo a ocupar todo o espao restante aps a largura de pixel ser alocada.

Nota: Se todas as larguras forem especificadas em pixels e um visitante visualizar o conjunto de quadros de um navegador que seja muito largo ou estreito para a largura especificada, os quadros sero aumentados ou reduzidos proporcionalmente para preencher o espao disponvel. O mesmo se aplica s alturas especificadas em pixels. Desse modo, geralmente recomendvel especificar pelo menos uma largura ou altura como relativa.
Percentual Especifica que a coluna ou linha selecionada deve ser uma porcentagem da largura ou altura total do

conjunto de quadros. O espao dos quadros com unidades definidas para Percentual alocado aps os quadros com unidades definidas para Pixels, mas antes dos quadros com unidades definidas como Relativo.
Relativo Especifica que a coluna ou linha selecionada deve ser alocada no restante do espao disponvel depois que os

quadros definidos como Pixels e Percentual estiverem com seus espaos alocados. Esse espao restante dividido proporcionalmente entre os quadros com tamanhos definidos para Relativo. Nota: Quando voc seleciona Relativo no menu Unidades, qualquer nmero digitado no campo Valor desaparecer. Se voc precisar especificar um nmero, deve digit-lo novamente. No entanto, se houver apenas uma linha ou coluna definida como Relativo, no ser necessrio digitar um nmero, j que a linha ou coluna recebe todo o espao restante depois que as outras linhas e colunas tem seus espaos alocados. Para ter a certeza da compatibilidade entre navegadores, digite 1 no campo Valor. Isso o mesmo que no digitar nenhum valor.

Controle do contedo do quadro com links


Para usar um link em um quadro para abrir um documento em outro quadro, defina um destino para o link. O atributo target de um link especifica o quadro ou a janela em que o contedo vinculado aberto. Por exemplo, se a barra de navegao estiver no quadro esquerdo e o material vinculado tiver que aparecer no quadro de contedo principal direita, especifique o nome do quadro de contedo principal como destino para cada um dos links da barra de navegao. Quando um visitante clica em um link de navegao, o contedo especificado aberto no quadro principal.
1 Na Visualizao de design, selecione um texto ou um objeto. 2 Na caixa Link no Inspetor de propriedades (Janela > Propriedades), siga um destes procedimentos:

Clique no cone de pasta e selecione o arquivo ao qual voc deseja se vincular. Arraste o cone Apontar para arquivo para o painel Arquivos e selecione o arquivo ao qual voc deseja se vincular.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 203


Layout de pginas com HTML

3 No menu Alvo do Inspetor de propriedades, selecione o quadro ou a janela em que o documento vinculado deve

aparecer:

_blank abre o documento vinculado em uma nova janela de navegador, deixando a janela atual inalterada. _parent abre o documento vinculado no conjunto de quadros pai do quadro no qual o link aparece, substituindo

o conjunto de quadros inteiro.


_self abre o link no quadro atual, substituindo o contedo nesse quadro. _top abre o documento vinculado na janela de navegador atual, substituindo todos os quadros.

Os nomes de quadro tambm aparecem neste menu. Selecione um quadro com nome a fim de abrir o documento vinculado nesse quadro. Nota: Os nomes de quadro s aparecem quando voc est editando um documento em um conjunto de quadros. Quando voc edita um documento em sua prpria janela Documento, os nomes de quadro no aparecem no menu pop-up Alvo. Se voc estiver editando um documento fora do conjunto de quadros, poder digitar o nome do quadro de destino na caixa de texto Alvo. Se voc estiver se vinculando a uma pgina fora do site, sempre use target="_top" ou target="_blank" para deixar claro que a pgina no parte do site.

Fornecimento de contedo para navegadores sem suporte a quadros


O Dreamweaver permite que voc especifique que o contedo ser exibido em navegadores baseados em texto e em navegadores grficos mais antigos que no oferecem suporte a quadros. Esse contedo armazenado no arquivo de conjunto de quadros, delimitado por uma tag noframes. Quando um navegador que no oferece suporte a quadros carrega o arquivo de conjunto de quadros, o navegador exibe somente o contedo delimitado pela tag noframes. Nota: O contedo na rea noframes deve ser mais que uma simples nota informando Voc deve fazer a atualizao para um navegador que aceite quadros. Alguns visitantes de site usam sistemas que no permitem a visualizao de quadros.
1 Selecione Modificar > Conjunto de quadros > Editar contedo sem quadros.

O Dreamweaver limpa a Visualizao de design e as palavras Contedo sem quadros aparecem na parte superior da Visualizao de design.
2 Siga um destes procedimentos:

Na janela Documento, digite ou insira o contedo como voc faria em um documento comum. Selecione Janela > Inspetor de cdigo, coloque o ponto de insero entre as tags body que aparecem nas tags
noframes e digite o cdigo HTML do contedo.

3 Selecione Modificar > Conjunto de quadros > Editar contedo sem quadros novamente para retornar

visualizao normal do documento de conjunto de quadros.

Uso de comportamentos JavaScript com quadros


H vrios comportamentos JavaScript e comandos relacionados a navegao que so especificamente apropriados para uso com quadros:
Definir texto do quadro Substitui o contedo e a formatao de um determinado quadro com o contedo especificado. O contedo pode incluir qualquer cdigo HTML vlido. Execute esta ao para exibir dinamicamente as informaes em um quadro.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 204


Layout de pginas com HTML

Ir para URL Abre uma nova pgina na janela atual ou no quadro especificado. Esta ao especificamente til para alterar o contedo de dois ou mais quadros com um clique. Inserir menu de salto Configura uma lista de menus de links que abrem arquivos em uma janela de navegador quando

eles so clicados. Voc tambm pode indicar uma janela ou quadro no qual o documento ser aberto. Para obter mais informaes, consulte Adio de comportamentos JavaScript na pgina 346

Mais tpicos da Ajuda


Aplicar o comportamento Definir texto do quadro na pgina 355 Aplicar o comportamento Ir para URL na pgina 353 Aplicar o comportamento Definir imagem da barra de navegao na pgina 355 Aplicar o comportamento Menu de salto na pgina 353

ltima atualizao em 28/4/2010

205

Captulo 8: Adio de contedo a pginas


Trabalho com pginas
Uso do painel Inserir
O painel Inserir contm botes para criar e inserir objetos, tais como tabelas e imagens. Os botes so organizados em categorias.

Mais tpicos da Ajuda


Viso geral do painel Inserir na pgina 14 Editar tags com os editores de tags na pgina 313 Selecionar e visualizar os elementos na janela Documento na pgina 212

Ocultar ou mostrar o painel Inserir


Selecione Janela > Inserir.

Nota: Se voc estiver trabalhando com determinados tipos de arquivo, como XML, JavaScript, Java e CSS, o painel Inserir e a opo de Visualizao de design estaro desativados, porque no possvel inserir itens nesses arquivos de cdigo.

Mostrar os botes em uma categoria especfica


Selecione o nome da categoria no menu pop-up Categoria. Por exemplo, para mostrar botes da categoria Layout,

selecione Layout.

Exibir o menu pop-up para um boto


Clique na seta para baixo ao lado do cone do boto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 206


Adio de contedo a pginas

Inserir um objeto
1 Selecione a categoria apropriada no menu pop-up Categoria, do painel Inserir. 2 Siga um destes procedimentos:

Clique no boto de um objeto ou arraste o cone do boto na janela Documento. Clique na seta em um boto e selecione uma opo no menu.
Dependendo do objeto, uma caixa de dilogo de insero de objeto correspondente pode aparecer, solicitando que voc procure um arquivo ou especifique parmetros para um objeto. Se preferir, o Dreamweaver pode inserir o cdigo no documento ou abrir um editor de tag ou um painel para que voc especifique informaes antes que o cdigo seja inserido. Para alguns objetos, nenhuma caixa de dilogo ser exibida se voc inserir o objeto na Visualizao de design, mas um editor de tag aparecer se o objeto for inserido na Visualizao de cdigo. Para alguns objetos, a insero do objeto na Visualizao de design faz com que o Dreamweaver passe para a Visualizao de cdigo antes da insero do objeto. Nota: Alguns objetos, como as ncoras nomeadas, no aparecem quando a pgina visualizada na janela de um navegador. Voc pode exibir cones na Visualizao de design que marcam a localizao desses objetos invisveis.

Ignorar a caixa de dilogo de insero de objeto e inserir um objeto de alocador de espao vazio
Clique com a tecla Control (Windows) ou Option pressionada (Macintosh) no boto do objeto.

Por exemplo, para inserir um alocador de espao em uma imagem sem especificar um arquivo de imagem, clique com a tecla Control ou Option pressionada no boto Imagem. Nota: Este procedimento no ignora todas as caixas de dilogo de insero de objetos. Muitos objetos, incluindo elementos PA e conjuntos de molduras, no inserem alocadores de espao nem objetos de valor padro.

Modificar preferncias do painel Inserir


1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Na categoria Geral da caixa de dilogo Preferncias, desmarque Mostrar caixa de dilogo ao inserir objetos para

ocultar as caixas de dilogo ao inserir objetos como imagens, tabelas, scripts e elementos de cabealho ou mantenha pressionada a tecla Control (Windows) ou Option (Macintosh) ao criar o objeto. Ao inserir um objeto com essa opo desativada, os valores de atributo padro so aplicados. Use o Inspetor de propriedades para alterar as propriedades de objeto depois de inserir o objeto.

Adicionar, excluir ou gerenciar itens na categoria Favoritos do painel Inserir


1 Selecione alguma categoria no painel Inserir. 2 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na rea em que

os botes so exibidos; em seguida, selecione Personalizar favoritos.


3 Na caixa de dilogo Personalizar objetos favoritos, faa as alteraes necessrias e clique em OK.

Para adicionar um objeto, selecione-o no painel Objetos disponveis esquerda e, em seguida, clique na seta entre
os dois painis ou clique duas vezes no objeto no painel Objetos disponveis. Nota: Voc pode adicionar um objeto de cada vez. Voc no pode selecionar o nome de uma categoria, como Comum, para adicionar uma categoria inteira lista de favoritos.

Para excluir um objeto ou separador, selecione um objeto no painel Objetos favoritos direita e, em seguida, clique
no boto Remover objeto selecionado na lista Objetos favoritos, acima do painel.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 207


Adio de contedo a pginas

Para mover um objeto, selecione um objeto no painel Objetos favoritos direita e, em seguida, clique no boto de
seta para cima ou para baixo, acima do painel.

Para adicionar um separador abaixo de um objeto, selecione um objeto no painel Objetos favoritos direita e, em
seguida, clique no boto Adicionar separador, abaixo do painel.
4 Se voc no estiver na categoria Favoritos do painel Inserir, selecione essa categoria para ver suas alteraes.

Inserir objetos usando botes na categoria Favoritos


Selecione a categoria Favoritos, no menu pop-up Categoria, no painel Inserir, e clique no boto de algum objeto

favorito que voc tenha adicionado.

Exibir o painel Inserir como uma Barra de insero horizontal


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).
1 Clique na aba do painel Inserir e arraste-a para a parte superior da janela Documento.

2 Quando voc visualizar uma linha azul horizontal na parte superior da janela Documento, solte o painel Inserir na

posio. Nota: A Barra de insero horizontal, por padro, tambm faz parte da rea de trabalho Clssica. Para alternar para a rea de trabalho Clssica, selecione Clssica, no alternador de rea de trabalho da Barra de aplicativos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 208


Adio de contedo a pginas

Reverter a Barra de insero horizontal para um grupo de painis


1 Clique na ala da Barra de insero horizontal (na parte esquerda da Barra de insero) e arraste-a para o local onde

os seus painis esto encaixados.


2 Posicione o painel Inserir e solte-o. Uma linha azul indica onde voc pode soltar o painel.

Mostrar categorias da Barra de insero horizontal como abas


Clique na seta ao lado do nome da categoria, na extremidade esquerda da Barra de insero horizontal, e selecione

Mostrar como abas.

Mostrar categorias da Barra de insero horizontal como um menu


Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na aba de uma

categoria da Barra de insero horizontal e, em seguida, selecione Mostrar como menus.

Definir propriedades da pgina


Para cada pgina criada no Dreamweaver, possvel especificar as propriedades de layout e formatao usando a caixa de dilogo Propriedades da pgina (Modificar > Propriedades da pgina). A caixa de dilogo Propriedades da pgina permite especificar a famlia de fontes e o tamanho de fonte padro, a cor do fundo, as margens, os estilos de link e muitos outros aspectos do design da pgina. Voc pode atribuir novas propriedades de pgina a cada nova pgina criada e modificar as propriedades das pginas existentes.. As alteraes feitas na caixa de dilogo Propriedades da pgina so aplicadas pgina inteira. O Dreamweaver define regras CSS para todas as propriedades especificadas nas categorias Aparncia (CSS), Links (CSS) e Cabealhos (CSS) da caixa de dilogo Propriedades da pgina. As regras so incorporadas na seo cabealho da pgina. Voc ainda pode definir as propriedades da pgina usando HTML, mas para isso, necessrio selecionar a categoria Aparncia (HTML) na caixa de dilogo Propriedades da pgina. (As caixas de dilogo Ttulo/codificao e Imagem de decalque tambm definem propriedades da pgina usando HTML.) Nota: As propriedades de pgina escolhidas se aplicam somente ao documento ativo. Se uma pgina usar uma folha de estilos CSS externa, o Dreamweaver no sobregravar as tags definidas nessa folha, j que esse procedimento afetar todas as pginas que a utilizam.
1 Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de

propriedades de texto.
2 Edite as propriedades da pgina e clique em OK.

Mais tpicos da Ajuda


Definio de propriedades CSS na pgina 133 Uso de formatao HTML na pgina 229 Cdigo XHTML na pgina 293

Definio de fonte da pgina CSS e de propriedades de cor e imagem do fundo


Use a caixa de dilogo Propriedades da pgina para especificar vrias opes de layout de pgina bsica para as pginas da Web, incluindo fonte, e cor e imagem do fundo.
1 Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de

propriedades de texto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 209


Adio de contedo a pginas

2 Selecione a categoria Aparncia (CSS) e defina as opes.


Fonte da pgina Especifica a famlia de fontes padro a ser usada nas pginas da Web. O Dreamweaver usa a famlia

de fontes especificada, a menos que outra fonte seja definida para um elemento de texto.
Tamanho Especifica o tamanho de fonte padro a ser usado nas pginas da Web. O Dreamweaver usa o tamanho de fonte especificado, a menos que outro tamanho de fonte seja definido para um elemento de texto. Cor do texto Especifica a cor padro em que as fontes sero processadas. Cor do fundo Define uma cor do fundo para a pgina. Clique na caixa Cor do fundo e selecione uma cor no Seletor de

cores.
Imagem do fundo Define uma imagem do fundo. Clique no boto Procurar e navegue at a imagem para selecion-la. Se desejar, digite o caminho da imagem do fundo na caixa Imagem do fundo.

O Dreamweaver coloca a imagem do fundo lado a lado (repete a imagem do fundo) caso ela no preencha toda a janela, assim como fazem os navegadores. (Para evitar que a imagem do fundo seja disposta lado a lado, use as folhas de estilos em cascata para desativar esse recurso.)
Repetir Especifica como a imagem do fundo ser exibida na pgina:

Selecione a opo No-repeat para exibir a imagem do fundo apenas uma vez. Selecione a opo Repeat para repetir ou dispor a imagem lado a lado horizontalmente e verticalmente. Selecione a opo Repeat-x para dispor a imagem lado a lado horizontalmente. Selecione a opo Repeat-y para dispor a imagem lado a lado verticalmente.
Margem esquerda e Margem direita Especifica o tamanho das margens esquerda e direita da pgina. Margem superior e Margem inferior Especifica o tamanho das margens superior e inferior da pgina.

Definio das propriedades da pgina HTML


Definir propriedades nesta categoria da caixa de dilogo Propriedades da pgina resulta na formatao HTML, em vez de CSS, de sua pgina.
1 Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de

propriedades de texto.
2 Selecione a categoria Aparncia (HTLM) e defina as opes.
Imagem do fundo Define uma imagem de fundo. Clique no boto Procurar e navegue at a imagem para selecion-la. Se desejar, digite o caminho da imagem do fundo na caixa Imagem do fundo.

O Dreamweaver coloca a imagem do fundo lado a lado (repete a imagem do fundo) caso ela no preencha toda a janela, assim como fazem os navegadores. (Para evitar que a imagem do fundo seja disposta lado a lado, use as folhas de estilos em cascata para desativar esse recurso.)
Plano de fundo Define uma cor de fundo para a pgina. Clique na caixa Cor do fundo e selecione uma cor no Seletor

de cores.
Texto Especifica a cor padro em que as fontes sero processadas. Link Especifica a cor a ser aplicada ao texto do link. Links visitados Especifica a cor a ser aplicada aos links visitados. Links ativos Especifica a cor a ser aplicada quando o mouse clicado em um link. Margem esquerda e Margem direita Especifica o tamanho das margens esquerda e direita da pgina. Margem superior e Margem inferior Especifica o tamanho das margens superior e inferior da pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 210


Adio de contedo a pginas

Definio de propriedades de link CSS


Voc pode definir a fonte padro, o tamanho da fonte, as cores dos links, os links visitados e os links ativos.
1 Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de

propriedades de texto.
2 Escolha a categoria Links (CSS) e defina as opes.
Fonte do link Especifica a famlia de fontes padro a ser usada como texto do link. Por padro, o Dreamweaver usa a famlia de fontes especificada para a pgina inteira, a menos que voc especifique outra fonte. Tamanho Especifica o tamanho de fonte padro a ser usado no texto do link. Cor do link Especifica a cor a ser aplicada ao texto do link. Links visitados Especifica a cor a ser aplicada aos links visitados. Links de sobreposio Especifica a cor a ser aplicada quando o ponteiro do mouse colocado sobre um link. Links ativos Especifica a cor a ser aplicada quando o mouse clicado em um link. Estilo sublinhado Especifica o estilo de sublinhado a ser aplicado aos links. Se a pgina j tiver um estilo de link

sublinhado definido (atravs de uma folha de estilos CSS externa, por exemplo), o valor padro do menu Estilo sublinhado ser a opo no alterar. Esta opo informa sobre um estilo de link no definido. Se voc modificar o estilo de link sublinhado usando a caixa de dilogo Propriedades da pgina, o Dreamweaver alterar a definio de link anterior.

Definio de propriedades de cabealho da pgina CSS


Voc pode definir a fonte padro, o tamanho da fonte, as cores dos links, os links visitados e os links ativos.
1 Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de

propriedades de texto.
2 Escolha a categoria Cabealhos (CSS) e defina as opes.
Fonte do cabealho Especifica a famlia de fontes padro a ser usada como cabealhos. O Dreamweaver usar a famlia

de fontes especificada, a menos que outra fonte seja definida para um elemento de texto.
Cabealho 1 a Cabealho 6 Especifica o tamanho e a cor da fonte a serem usados em at seis nveis de tags de

cabealho.

Definio das propriedades de codificao e ttulo de pgina


Voc pode definir a fonte padro, o tamanho da fonte, as cores dos links, os links visitados e os links ativos. A categoria Propriedades de codificao/ttulo de pgina permite especificar o tipo de codificao de documento do idioma usado para criar pginas da Web, bem como especificar qual formulrio de normalizao unicode ser usado com esse tipo de codificao.
1 Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de

propriedades de texto.
2 Escolha a categoria Ttulo/codificao e defina as opes.
Ttulo Especifica o ttulo de pgina a ser exibido na barra de ttulo da janela Documento e da maioria das janelas de

navegador.
Tipo de documento (DTD) Especifica uma definio de tipo de documento. Por exemplo, voc pode criar um

documento HTML compatvel com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu pop-up.
Codificao Especifica a codificao usada nos caracteres do documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 211


Adio de contedo a pginas

Se voc selecionar Unicode (UTF-8) como codificao de documento, a codificao de entidade no ser necessria, pois a codificao UTF-8 poder representar com segurana todos os caracteres. Se voc selecionar outra codificao de documento, a codificao de entidade provavelmente ser necessria para representar determinados caracteres. Para obter mais informaes sobre as entidades de caractere, consulte www.w3.org/TR/REChtml40/sgml/entities.html.
Recarregar Converte o documento existente ou abre o documento novamente usando a nova codificao. Formulrio de normalizao unicode Ativado somente se voc selecionar UTF-8 como codificao de documento. H

quatro formulrios de normalizao unicode. O mais importante deles o formulrio de normalizao C, pois o formulrio mais comum utilizado no modelo de caractere da World Wide Web. A Adobe fornece os outros trs para ser mais completa. No Unicode, alguns caracteres so visualmente similares, mas podem ser armazenados no documento de diferentes maneiras. Por exemplo, (e-umlaut) pode ser representado como um caractere nico, e com trema, ou como dois caracteres, e latino regular + trema. O caractere de combinao Unicode aquele utilizado com o caractere anterior; sendo assim, o trema apareceria acima do e latino. Os dois formulrios tm como resultado a mesma tipografia visual, mas o que salvo no arquivo diferente em cada formulrio. A normalizao o processo que garante que todos os caracteres que podem ser salvos de formas diferentes sero salvos de uma mesma forma. Ou seja, todos os caracteres de um documento sero salvos como um nico e com trema ou como e + trema , e no de duas formas em um documento. Para obter mais informaes sobre a normalizao unicode e as formas especficas que podem ser usadas, consulte o site da Unicode em www.unicode.org/reports/tr15.
Incluir assinatura Unicode (BOM) Inclui uma BOM (marca de ordem de bytes) no documento. Uma BOM consiste em

2 a 4 bytes no incio de um arquivo de texto que identifica um arquivo como Unicode, e se assim for, a ordem dos bytes a seguir. Como a codificao UTF-8 no tem ordem de bytes, a adio de um BOM UTF-8 opcional. Na UTF-16 e UTF-32, ela obrigatria.

Uso de uma imagem de decalque para criar a pgina


Voc pode inserir um arquivo de imagem que ser usado como guia na criao da pgina:
1 Selecione Modificar > Propriedades da pgina ou clique no boto Propriedades da pgina no Inspetor de

propriedades de texto.
2 Escolha a categoria Imagem de decalque e defina as opes.
Imagem de decalque Especifica uma imagem a ser usada como guia na cpia de um design. Essa imagem serve apenas

como referncia e no aparece quando o documento exibido em um navegador.


Transparncia Determina a opacidade da imagem de decalque, de completamente transparente a completamente

opaco.

Introduo codificao de documento


A codificao de documento especifica a codificao usada para os caracteres no documento. A codificao de documento especificada em uma tag meta no cabealho do documento. Ela informa ao navegador e ao Dreamweaver como o documento deve ser decodificado e quais fontes devem ser usadas para exibir o texto decodificado. Por exemplo, se voc especificar Europeu Ocidental (Latim1), esta tag meta ser inserida:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">.

O Dreamweaver exibe o documento usando as fontes especificadas em Preferncias de fontes na codificao Europeu Ocidental (Latim1); um navegador exibe o documento usando as fontes que o usurio especifica para essa codificao.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 212


Adio de contedo a pginas

Se voc especificar Japons (Shift JIS), esta tag meta ser inserida:
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">.

O Dreamweaver exibe o documento usando as fontes especificadas na codificao Japons; um navegador exibe o documento usando as fontes que o usurio especifica para as codificaes Japons. Voc pode alterar a codificao de documento de uma pgina e a codificao padro que o Dreamweaver usa para criar novos documentos, incluindo as fontes usadas para exibir cada codificao.

Mais tpicos da Ajuda


Definir o tipo e a codificao de documento padro na pgina 66

Selecionar e visualizar os elementos na janela Documento


Para selecionar um elemento na Visualizao de design da janela Documento, clique no elemento. Se um elemento estiver invisvel, torne-o visvel para que possa selecion-lo. Alguns cdigos HTML no tm uma representao visvel em um navegador. Por exemplo, as tags comment no aparecem nos navegadores. No entanto, isso pode ser til quando voc estiver criando uma pgina, a fim de que possa selecionar, editar, mover e excluir esses elementos invisveis. O Dreamweaver permite que voc especifique se ele deve ou no mostrar cones marcando o local dos elementos invisveis na Visualizao de design da janela Documento. Para indicar quais marcadores de elemento aparecero, defina opes nas preferncias de elementos invisveis. Por exemplo, voc pode especificar que as ncoras nomeadas devem ficar visveis, mas no as quebras de linha. possvel criar determinados elementos invisveis (como comentrios e ncoras com nome) usando botes na categoria Comum do painel Inserir. Em seguida, voc pode modificar esses elementos usando o Inspetor de propriedades.

Mais tpicos da Ajuda


Visualizao de cdigo na pgina 297 Uso do painel Inserir na pgina 205

Seleo de elementos
Para selecionar um elemento visvel na janela Documento, clique no elemento ou arraste o ponteiro do mouse sobre ele. Para selecionar um elemento invisvel, selecione Exibir > Auxlios visuais > Elementos invisveis (caso este item de
menu ainda no esteja selecionado) e clique no marcador do elemento na janela Documento. Alguns objetos aparecem em um lugar da pgina diferente do local onde seu cdigo foi inserido. Por exemplo, na Visualizao de design, um elemento de posicionamento absoluto (elemento AP) pode estar em qualquer lugar da pgina, mas na Visualizao de cdigo, o cdigo que define o elemento AP estar em um local fixo. Quando os elementos invisveis estiverem visveis, o Dreamweaver exibir os marcadores na janela Documento para mostrar o local do cdigo desses elementos. A seleo de um marcador selecionar o elemento inteiro; por exemplo, a seleo do marcador de um elemento AP selecionar o elemento AP inteiro.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 213


Adio de contedo a pginas

Para selecionar uma tag completa (incluindo se contedo, se houver), clique em uma tag no seletor de tags na parte
inferior esquerda da janela Documento. (O seletor de tags exibido nas visualizaes de design e de cdigo.) O seletor de tags sempre mostra as tags que contm a seleo atual ou o ponto de insero. A tag da extrema esquerda a tag mais externa que contm a seleo atual ou o ponto de insero. A prxima tag est contida nessa tag mais externa e assim sucessivamente. A tag da extrema direita a tag mais interna que contm a seleo atual ou o ponto de insero. No exemplo a seguir, o ponto de insero est em uma tag de pargrafo, <p>. Para selecionar a tabela que contm o pargrafo a ser selecionado, selecione a tag <table> esquerda da tag <p>.

Visualizao do cdigo HTML associado ao texto ou objeto selecionado


Siga um destes procedimentos:

Na barra de ferramentas Documento, clique no boto Mostrar visualizao de cdigo. Selecione Exibir > Cdigo. Na barra de ferramentas Documento, clique no boto Mostrar visualizaes de cdigo e design. Selecione Exibir > Cdigo e design. Selecione Janela > Inspetor de cdigo.
Geralmente, quando voc seleciona algum item no editor de cdigo (Visualizao de cdigo ou Inspetor de cdigo), ele tambm selecionado na janela Documento. Talvez seja necessrio sincronizar as duas visualizaes para que a seleo aparea.

Mostrar ou ocultar cones de marcador de elementos invisveis


Selecione Exibir > Auxlios visuais > Elementos invisveis.

Nota: A exibio de elementos invisveis pode alterar um pouco o layout de uma pgina, movendo outros elementos em alguns pixels. Portanto, para obter um layout preciso, oculte os elementos invisveis.

Definio de preferncias de elementos invisveis


Use as preferncias de elementos invisveis para especificar quais tipos de elementos estaro visveis quando voc selecionar Exibir > Auxlios visuais > Elementos invisveis.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e clique em Elementos

invisveis.
2 Selecione quais elementos devem ficar visveis e clique em OK.

Nota: Uma marca de seleo ao lado do nome do elemento na caixa de dilogo significa que o elemento estar visvel quando Exibir > Auxlios visuais > Elementos invisveis for selecionado.
ncoras nomeadas Exibe um cone que marca o local de cada ncora nomeada (um nome = "") no documento. Scripts Exibe um cone que marca o local do cdigo JavaScript ou VBScript no corpo do documento. Selecione o cone

para editar o script no Inspetor de propriedades ou vincular-se a um arquivo de script externo.


Comentrios Exibe um cone que marca o local dos comentrios HTML. Selecione o cone para ver o comentrio no

Inspetor de propriedades.
Quebras de linha Exibe um cone que marca o local de cada quebra de linha (BR). Por padro, esta opo no

selecionada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 214


Adio de contedo a pginas

Mapas de imagem do cliente Exibe um cone que marca o local de cada mapa de imagens do cliente no documento. Estilos incorporados Exibe um cone que mostra o local dos estilos CSS incorporados na seo body do documento.

Se os estilos CSS forem colocados na seo head de um documento, eles no aparecero na janela Documento.
Campos ocultos de formulrios Exibe um cone que marca o local dos campos de formulrios que possuem o atributo
type definido como "hidden".

Delimitador de formulrios Exibe uma borda ao redor de um formulrio, para que voc possa ver onde deve inserir os

elementos de formulrio. A borda mostra a extenso da tag form, para que quaisquer elementos de formulrio nessa borda sejam corretamente delimitados nas tags form.
Pontos de ancoragem de elementos PA Exibe um cone que marca o local do cdigo que define um elemento PA. O elemento PA pode estar em qualquer lugar da pgina. (Os elementos PA no so elementos invisveis. Somente o cdigo que define o elemento PA estar invisvel.) Selecione o cone para selecionar o elemento PA. Depois disso, voc poder ver o contedo do elemento PA, mesmo se ele estiver marcado como oculto. Pontos de ancoragem de elementos alinhados Exibe um cone que mostra o local do cdigo HTML de elementos que aceitam o atributo align. Esses elementos incluem imagens, tabelas, objetos ActiveX, plug-ins e applets. Em alguns casos, o cdigo do elemento pode estar separado do objeto visvel. Tags visuais de markup de servidores Exibe o local das tags de markup de servidores (como tags de Pginas ativas do servidor e tags do ColdFusion) cujo contedo no pode ser exibido na janela Documento. Essas tags normalmente geram tags HTML quando processadas por um servidor. Por exemplo, uma tag <CFGRAPH> gera uma tabela HTML quando processada por um servidor ColdFusion. O Dreamweaver representa a tag com um elemento invisvel do ColdFusion, pois o Dreamweaver no pode determinar a sada dinmica final da pgina. Tags no visuais de markup de servidores Exibe o local das tags de markup de servidores (como tags de Pginas ativas

do servidor e tags do ColdFusion) cujo contedo no pode ser exibido na janela Documento. Essas tags so normalmente tags lgicas, de configurao ou de processamento (por exemplo, <CFSET>, <CFWDDX> e <CFXML>) que no geram tags HTML.
Exibio CSS: Nenhum Exibe um cone que mostra o local do contedo oculto pela propriedade display:none na folha

de estilos vinculada ou incorporada.


Mostrar texto dinmico como Por padro, exibe um texto dinmico na pgina no formato {Recordset:Field}. Se esses valores forem muito extensos a ponto de distorcer a formatao da pgina, altere a exibio para {}. Incluses do servidor Exibe o contedo real de cada arquivo de incluso do servidor.

Cores aceitas pela Web


Em HTML, as cores so expressas como valores hexadecimais (por exemplo, #FF0000) ou como nomes de cor (red). Uma cor aceita pela Web aquela que aparece idntica no Netscape Navigator e Microsoft Internet Explorer, nos sistemas Windows e Macintosh, quando a execuo feita no modo de 256 cores. Em geral, sabe-se que h 216 cores comuns e que nenhum valor hexadecimal que combina os pares 00, 33, 66, 99, CC, ou FF (valores RGB 0, 51, 102, 153, 204 e 255, respectivamente) representa uma cor aceita pela Web. Os testes, no entanto, revelam que h somente 212 cores aceitas pela Web, em vez de 216, pois o Internet Explorer do Windows no processa corretamente as cores #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) e #33FF00 (51,255,0). Quando os navegadores da Web compuseram inicialmente sua aparncia, a maioria dos computadores exibia somente 265 cores (8 bits por canal (bpc)). Hoje, a maioria dos computadores exibem milhares ou milhes de cores (16 e 32 bpc). Portanto, a justificativa para o uso da paleta aceita por navegadores ser consideravelmente reduzida se voc estiver desenvolvendo o site para usurios de sistemas de computador atuais.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 215


Adio de contedo a pginas

Um motivo para o uso da paleta de cores aceitas pela Web o desenvolvimento de dispositivos alternativos da Web, como PDA e visores de telefone celular. Muitos desses dispositivos oferecem apenas visores em preto-e-branco (1 bpc) ou visores de 256 cores (8 bpc). As paletas Cubos de cor (padro) Tom contnuo do Dreamweaver usam a paleta de 216 cores aceitas pela Web. A seleo de uma cor nessas paletas exibe o valor hexadecimal da cor. Para selecionar uma cor fora do intervalo de cores aceitas pela Web, abra o seletor de cores do sistema clicando no boto Roda de cores no canto superior direito do seletor de cores do Dreamweaver. O seletor de cores do sistema no se limita s cores aceitas pela Web. As verses UNIX do Netscape Navigator usam uma paleta de cores diferente da oferecida pelas verses do Windows e Macintosh. Se voc estiver desenvolvendo dispositivos exclusivamente para navegadores UNIX (ou se seu pblicoalvo for usurios do Windows ou Macintosh com monitores de 24 bpc e usurios do UNIX com monitores de 8 bpc), recomenda-se o uso de valores hexadecimais que combinam os pares 00, 40, 80, BF, ou FF, que produzem cores aceitas pela Web para SunOS.

Usar o seletor de cores


No Dreamweaver, vrias das caixas de dilogo, bem como o Inspetor de propriedades de vrios elementos de pgina, contm uma caixa de cores, que abre um seletor de cores. Use o seletor de cores para selecionar uma cor para um elemento de pgina. Voc tambm pode definir a cor de texto padro dos elementos de pgina.
1 Clique em uma caixa de cores em qualquer caixa de dilogo ou no Inspetor de propriedades.

O seletor de cores exibido.


2 Siga um destes procedimentos:

Use o conta-gotas para selecionar uma amostra de cores na paleta. Todas as cores das paletas Cubos de cor (padro)
ou Tom contnuo so aceitas pela Web; as outras paletas no.

Use o conta-gotas para selecionar uma cor em qualquer lugar da tela, mesmo que seja fora das janelas do
Dreamweaver. Para selecionar uma cor na rea de trabalho ou em outro aplicativo, mantenha pressionado o boto do mouse. Isso permitir que o conta-gotas retenha o foco e selecione uma cor fora do Dreamweaver. Se voc clicar na rea de trabalho ou em outro aplicativo, o Dreamweaver selecionar a cor em que voc clicou. No entanto, se voc alternar para outro aplicativo, talvez seja necessrio clicar em uma janela do Dreamweaver para continuar trabalhando no Dreamweaver.

Para expandir a seleo de cor, use o menu pop-up no canto superior direito do seletor de cores. Voc pode
selecionar Cubos de cor, Tom contnuo, SO Windows, Mac OS e Tons de cinza. Nota: As paletas Cubos de cor e Tom contnuo so aceitas pela Web, ao passo que SO Windows, Mac OS e Tons de cinza no.

Para limpar a cor atual sem escolher outra cor, clique no boto Cor padro Para abrir o seletor de cores do sistema, clique no boto Roda de cores
.

Mais zoom e Menos zoom


O Dreamweaver permite aumentar a ampliao (mais zoom) na janela Documento, a fim de que voc possa verificar a preciso de pixel dos grficos, selecionar itens pequenos com mais facilidade, criar pginas com texto pequeno, criar pginas grandes etc. Nota: As ferramentas de zoom esto disponveis somente na Visualizao de design.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 216


Adio de contedo a pginas

Mais tpicos da Ajuda


Viso geral da barra de status na pgina 13

Mais zoom ou menos zoom em uma pgina


1 Clique na ferramenta Zoom (o cone de lupa) no canto inferior direito da janela Documento. 2 Siga um destes procedimentos:

Clique no ponto da pgina que voc deseja ampliar at obter a ampliao desejada. Arraste uma caixa sobre a rea da pgina que voc deseja ampliar e libere o boto do mouse. Selecione um nvel de ampliao predefinido no menu pop-up Zoom. Digite um nvel de ampliao na caixa de texto Zoom.
Voc tambm pode aplicar mais zoom sem usar a ferramenta Zoom. Para isso, pressione Control+= (Windows) ou Command+= (Macintosh).
3 Para aplicar menos zoom (reduzir a ampliao), selecione a ferramenta Zoom, pressione Alt (Windows) ou Option

(Macintosh) e clique na pgina. Voc tambm pode aplicar menos zoom sem usar a ferramenta Zoom. Para isso, pressione Control+- (Windows) ou Command+- (Macintosh).

Edio de uma pgina aps a aplicao de zoom


Clique na ferramenta Selecionar (o cone de ponteiro) no canto inferior direito da janela Documento e clique

dentro da pgina.

Panorama de uma pgina aps a aplicao de zoom


1 Clique na ferramenta Mo (o cone de mo) no canto inferior direito da janela Documento. 2 Arraste a pgina.

Preenchimento da janela Documento com uma seleo


1 Selecione um elemento na pgina. 2 Selecione Exibir > Ajustar seleo.

Preenchimento da janela Documento com uma pgina inteira


Selecione Exibir > Ajustar tudo.

Preenchimento da janela Documento com a largura inteira de uma pgina


Selecione Exibir > Ajustar largura.

Uso dos comportamentos JavaScript para detectar navegadores e plug-ins


Voc pode usar comportamentos para determinar qual navegador os visitantes esto usando e se eles tm um plug-in especfico instalado.
Verificar navegador Envia os visitantes para pginas diferentes, dependendo das marcas e verses do navegador. Por

exemplo, talvez seja necessrio que os visitantes acessem uma pgina caso tenham o Netscape Navigator 4.0 ou posterior, acessem outra pgina caso tenham o Microsoft Internet Explorer 4.0 ou posterior, e permaneam na pgina atual caso tenham outro tipo de navegador.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 217


Adio de contedo a pginas

Verificar plug-in Envia os visitantes para pginas diferentes de acordo com o plug-in instalado. Por exemplo, talvez

seja necessrio que os visitantes acessem uma pgina caso eles tenham o Shockwave e outra pgina caso no tenham.

Mais tpicos da Ajuda


Uso de comportamentos JavaScript na pgina 346 Aplicar o comportamento Verificar navegador na pgina 350 Aplicar o comportamento Verificar plug-in na pgina 350

Definir o tempo de download e as preferncias de tamanho


O Dreamweaver calcula o tamanho com base no contedo inteiro da pgina, incluindo todos os objetos vinculados, como imagens e plug-ins. O Dreamweaver estima o tempo do download com base na velocidade de conexo digitada nas preferncias de barra de status. O tempo de download real varia de acordo com as condies gerais da Internet. recomendvel usar a regra de 8 segundos ao verificar os tempos de download de uma pgina da Web especfica. Ou seja, a maioria dos usurios no esperar mais que 8 segundos para uma pgina ser carregada.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione Barra de status na lista categoria esquerda. 3 Selecione uma velocidade de conexo para calcular o tempo de download e clique em OK.

Mais tpicos da Ajuda


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

Adio e formatao do texto


Adio de texto a um documento
Para adicionar texto a um documento do Dreamweaver, digite o texto diretamente na janela Documento ou recorte e cole o texto. Tambm possvel importar texto de outros documentos. Quando voc colar texto em um documento do Dreamweaver, use o comando Colar ou Colar especial. O comando Colar especial permite especificar o formato do texto colado de diferentes formas. Por exemplo, se voc deseja colar texto de um documento formatado do Microsoft Word no documento do Dreamweaver, mas deseja retirar toda a formatao para que possa aplicar sua prpria folha de estilos CSS ao texto colado, selecione texto no Word, copie-o para a rea de transferncia e use o comando Colar especial para selecionar a opo que permite colar apenas texto. Ao usar o comando Colar para colar texto de outros aplicativos, defina as preferncias de colagem como opes padro. Nota: A combinao de teclas Control+V (Windows) e Command+V (Macintosh) sempre cola apenas texto (sem formatao) na Visualizao de cdigo.
Adicione texto ao documento seguindo um destes procedimentos:

Digite o texto diretamente na janela Documento. Copie o texto de outro aplicativo, alterne para Dreamweaver, posicione o ponto de insero na Visualizao de
design da janela Documento e selecione Editar > Colar ou Editar > Colar especial. Ao selecionar Editar > Colar especial, selecione vrias opes de formatao de colagem.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 218


Adio de contedo a pginas

Voc tambm pode colar texto usando os seguintes atalhos de teclado:


opo Colar Colar Atalho de teclado Control+V (Windows) Command+V (Macintosh) Colar especial Control+Shift+V (Windows) Command+Shift+V (Macintosh)

Insero de caracteres especiais


Determinados caracteres especiais so representados em HTML por um nome ou nmero, denominado entidade. O HTML inclui nomes de entidade para caracteres como smbolo de direitos autorais (&copy;), E comercial (&amp;) e smbolo de marca registrada (&reg;). Cada entidade possui um nome (&mdash;, por exemplo) e um equivalente numrico (&#151;, por exemplo). O HTML usa os colchetes angulares <> em seu cdigo, mas talvez seja necessrio expressar os caracteres especiais de sinal de maior que ou sinal de menor que sem que o Dreamweaver os interpretem como cdigo. Nesse caso, use &gt; como sinal de maior (>) e &lt; como sinal de menor (<). Infelizmente, vrios navegadores (especialmente os navegadores antigos e os navegadores diferentes de Netscape Navigator e Internet Explorer) no exibem corretamente muitas entidades de nome.
1 Na janela Documento, coloque o ponto de insero no local em que deseja inserir um caractere especial. 2 Siga um destes procedimentos:

Selecione o nome do caractere no submenu Inserir > HTML > Caracteres especiais. Na categoria Texto do painel Inserir, clique no boto Caracteres e selecione o caractere no submenu.
H vrios outros caracteres especiais disponveis. Para selecionar um deles, selecione Inserir > HTML > Caracteres especiais > Outros ou clique no boto Caracteres, na categoria Texto do painel Inserir e selecione a opo Outros caracteres. Selecione um caractere na caixa de dilogo Inserir outro caractere e clique em OK.

Adio de espao entre caracteres


O HTML permite apenas um espao entre os caracteres. Para adicionar espaos extras em um documento, insira um espao no-separvel. possvel definir uma preferncia para adicionar automaticamente espaos no-separveis em um documento.

Insero de um espao no-separvel


Siga um destes procedimentos:

Selecione Inserir > HTML > Caracteres especiais > Espao no-separvel. Pressione Control+Shift+Barra de espaos (Windows) ou Option+Barra de espaos (Macintosh). Na categoria Texto do painel Inserir, clique no boto Caracteres e selecione o cone Espao no-separvel.

Defina uma preferncia para adicionar espaos no-separveis.


1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Na categoria geral, verifique se a opo Permitir vrios espaos consecutivos est marcada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 219


Adio de contedo a pginas

Criao de listas numeradas e com marcadores


Voc pode criar listas numeradas (ordenadas), listas com marcadores (no-ordenadas) e listas de definies a partir de um texto existente ou de um texto novo enquanto digita na janela Documento. As listas de definies no usam caracteres esquerda, como pontos de marcador ou nmeros, e geralmente so usadas em glossrios ou descries. As listas tambm podem ser aninhadas. As listas aninhadas contm outras listas. Por exemplo, voc provavelmente precisar de uma lista ordenada ou com marcadores aninhada dentro de outra lista numerada ou ordenada. Use a caixa de dilogo Propriedades da lista para definir a aparncia de uma lista inteira ou de um item de lista individual. Voc pode definir um estilo de nmero, redefinir a numerao ou definir opes de estilo de marcador para itens de lista individuais ou para uma lista inteira.

Mais tpicos da Ajuda


Definio de propriedades CSS na pgina 133

Criao de uma nova lista


1 No documento do Dreamweaver, coloque o ponto de insero onde deseja adicionar uma lista e siga um destes

procedimentos:

No Inspetor de propriedades HTML, clique no boto Lista com marcadores ou Lista numerada. Selecione Formatar > Lista e, em seguida, selecione o tipo de lista desejado: Lista no-ordenada (com marcadores),
Lista ordenada (numerada) ou Lista de definio. O caractere esquerda do item de lista especificado aparece na janela Documento.
2 Digite o texto do item de lista e pressione Enter (Windows) ou Return (Macintosh) para criar outro item de lista. 3 Para concluir a lista, pressione Enter duas vezes (Windows) ou pressione Return duas vezes (Macintosh).

Criao de uma lista usando um texto existente


1 Selecione uma srie de pargrafos para transformar em uma lista. 2 No Inspetor de propriedades HTML, clique no boto Lista com marcadores ou Lista numerada ou selecione

Formatar > Lista e selecione o tipo de lista desejado: Lista no-ordenada, Lista ordenada ou Lista de definio.

Criao de uma lista aninhada


1 Selecione os itens de lista que voc deseja aninhar. 2 No Inspetor de propriedades HTML, clique no boto Citao em bloco ou selecione Formatar > Recuar.

O Dreamweaver recua o texto e cria uma lista separada com os atributos HTML da lista original.
3 Aplique um novo estilo ou tipo de lista ao texto recuado seguindo o mesmo procedimento usado acima.

Definio das propriedades de uma lista inteira


1 Na janela Documento, crie pelo menos um item de lista. O novo estilo ser aplicado automaticamente aos itens

extras que voc adicionar lista.


2 Com o ponto de insero no texto do item de lista, selecione Formatar > Lista > Propriedades, para abrir a caixa de

dilogo Propriedades da lista.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 220


Adio de contedo a pginas

3 Defina as opes com as deseja definir a lista:


Tipo de lista Especifica as propriedades de lista, enquanto Item de lista especifica um item individual em uma lista. Use o menu pop-up para selecionar uma lista com marcadores, numerada, de diretrios ou de menus. Dependendo do Tipo de lista selecionado, diferentes opes aparecero na caixa de dilogo. Estilo Determina o estilo de nmeros ou marcadores usados em uma lista numerada ou com marcadores. Todos os itens da lista tero esse estilo, a menos que voc especifique um novo estilo para os itens na lista. Iniciar contagem Define o valor do primeiro item em uma lista numerada.

4 Clique em OK para definir as opes.

Definio das propriedades de lista de um item de lista


1 Na janela Documento, coloque o ponto de insero no texto de um item de lista que voc deseja afetar. 2 Selecione Formatar > Lista > Propriedades. 3 Em Item de lista, defina as opes que deseja definir:
Novo estilo Especifica um estilo para o item de lista selecionado. Os estilos no menu Novo estilo so relacionados ao

tipo de lista exibido no menu Tipo de lista. Por exemplo, se o menu Item de lista exibir Lista com marcadores, somente as opes de marcador estaro disponveis no menu Novo estilo.
Redefinir contagem para Define um nmero especfico a partir do qual as entradas de item de lista sero numeradas.

4 Clique em OK para definir as opes.

Procura e substituio de texto


Voc pode usar o comando Localizar e substituir para procurar texto e atributos e tags HTML em um documento ou em um conjunto de documentos. O painel Pesquisa, no grupo de painis Resultados, mostra os resultados de uma pesquisa Localizar tudo. Nota: Para procurar arquivos em um site, use diferentes comandos: Localizar no site local e Localizar no site remoto.

Mais tpicos da Ajuda


Visualizao de cdigo na pgina 297 Expresses regulares na pgina 295

Procura e substituio de texto


1 Abra o documento em que ser realizada a pesquisa ou selecione documentos ou uma pasta no painel Arquivos. 2 Selecione Editar > Localizar e substituir. 3 Use a opo Localizar em para especificar quais arquivos sero pesquisados:
Texto selecionado Restringe a pesquisa ao texto atualmente selecionado no documento ativo. Documento atual Restringe a pesquisa ao documento ativo. Documentos abertos Pesquisa todos os documentos que esto abertos no momento. Pasta Restringe a pesquisa a uma pasta especfica. Aps escolher Pasta, clique no cone de pasta a ser acessado e

selecione uma pasta a ser pesquisada.


Arquivos selecionados no site Restringe a pesquisa aos arquivos e pastas atualmente selecionados no painel Arquivos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 221


Adio de contedo a pginas

Todo o site local atual Expande a pesquisa para todos os documentos HTML, arquivos de biblioteca e documentos de

texto do site atual.


4 Use o menu pop-up Pesquisar para especificar o tipo de pesquisa a ser executado:
Cdigo-fonte Procura seqncias de texto especficas no cdigo-fonte HTML. Voc pode procurar tags especficas

usando esta opo, mas a pesquisa Tag especfica oferece uma abordagem mais flexvel para a procura de tags.
Texto Procura seqncias de texto especficas no texto do documento. Uma pesquisa de texto ignora qualquer HTML que interrompe a seqncia de caracteres. Por exemplo, a procura de o co preto retornaria o co preto e o co <i>preto</i>. Texto (avanado) Procura seqncias de texto especficas que estejam ou no dentro de uma ou mais tags. Por exemplo, em um documento que contenha o HTML a seguir, se voc procurar tenta e especificar Fora da tag e a tag i, somente a segunda ocorrncia da palavra tenta ser localizada: Joo <i>tenta</i> terminar o trabalho no tempo estipulado, mas nem sempre consegue. Ele tenta com afinco. . Tag especfica Procure tags, atributos e valores de atributo especficos, como todas as tags td com valign definido

como top. Nota: A combinao de teclas Control+Enter ou Shift+Enter (Windows), ou Control+Return, Shift+Return ou Command+Return (Macintosh) adicionar quebras de linha nos campos de pesquisa de texto, permitindo que voc procure um caractere de retorno. Ao realizar uma pesquisa desse tipo, desmarque a opo Ignorar diferenas de espaos em branco, caso no esteja usando expresses regulares. Essa pesquisa localiza um caractere de retorno especfico, e no simplesmente a ocorrncia de uma quebra de linha. Por exemplo, ela no localiza uma tag <br> ou <p>. Os caracteres de retorno aparecem como espaos na Visualizao de design, e no como quebras de linha.
5 Use as opes a seguir para expandir ou limitar a pesquisa:
Coincidir maiscula/minscula Limita a pesquisa ao texto que corresponde exatamente ao uso de maiscula ou

minscula que voc deseja localizar. Por exemplo, se voc procurar brown derby, no encontrar Brown Derby.
Ignorar espao em branco Trata todos os espaos em branco como um nico espao para fins de correspondncia. Por
texto, mas no estetexto. exemplo, com esta opo selecionada, este texto retornar este texto e este Esta opo no estar disponvel quando a opo Utilizar expresses regulares estiver selecionada. Escreva explicitamente a expresso regular para ignorar o espao em branco. Observe que as tags <p> e <br> no contam como espao em branco.

Coincidir palavra inteira Limita a pesquisa ao texto que corresponde a uma ou mais palavras completas.

Nota: O uso desta opo o mesmo que procurar uma seqncia de pesquisa que inicia e termina com \b, atravs de uma pesquisa de expresso regular, a expresso regular de limite de palavras.
Utilizar expresses regulares Faz com que determinados caracteres e seqncias de caracteres curtas (como ?, *, \w e \b) da seqncia de pesquisa sejam interpretados como operadores de expresso regular. Por exemplo, a procura de o co p\w*\b retornaria o co preto e o co peralta.

Nota: Se voc estiver trabalhando na Visualizao de cdigo e fizer alteraes no documento, e tentar localizar e substituir algo que no seja o cdigo-fonte, uma caixa de dilogo aparecer informando que o Dreamweaver est sincronizando as duas visualizaes antes de realizar a pesquisa.
6 Para realizar a pesquisa sem substituir, clique em Localizar prximo ou Localizar tudo:
Localizar prximo Seleciona a prxima ocorrncia do texto de pesquisa ou as tags no documento atual. Se no houver

mais ocorrncias da tag no documento atual, o Dreamweaver ir para o prximo documento, caso voc esteja realizando a pesquisa em mais de um documento.
Localizar tudo Abre o painel Pesquisa no grupo de painis Resultados. Se voc estiver pesquisando um nico

documento, o recurso Localizar tudo exibir todas as ocorrncias do texto de pesquisa ou das tags, com algum contexto

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 222


Adio de contedo a pginas

delimitado. Se voc estiver pesquisando um diretrio ou site, o recurso Localizar tudo exibir uma lista dos documentos que contm a tag.
7 Para substituir o texto localizado ou as tags, clique em Substituir ou Substituir tudo. 8 Quando terminar, clique em Fechar.

Nova pesquisa sem exibir a caixa de dilogo Localizar e substituir


Pressione F3 (Windows) ou Command+G (Macintosh).

Visualizao de um resultado de pesquisa no contexto


1 Selecione Janela > Resultados para exibir o painel Pesquisa. 2 Clique duas vezes em uma linha no painel Pesquisa.

Se voc estiver pesquisando o arquivo atual, a janela documento exibir a linha que contm esse resultado de pesquisa. Se voc estiver pesquisando um conjunto de arquivos, o arquivo que contm esse resultado de pesquisa ser aberto.

Execuo da mesma pesquisa novamente


Clique no boto Localizar e substituir.

Interrupo de uma pesquisa em andamento


Clique no boto Parar.

Procura de uma tag especfica


Use a caixa de dilogo Localizar e substituir para procurar texto ou tags em um documento, e substituir o material localizado por outro texto ou tags.
1 Selecione Editar > Localizar e substituir. 2 No menu pop-up Pesquisar, selecione Tag especfica. 3 Selecione uma tag especfica ou [qualquer tag] no menu pop-up ao lado do menu pop-up Pesquisar ou digite

um nome de tag na caixa de texto.


4 (Opcional.) Limite a pesquisa com um dos seguintes modificadores de tag:
Com atributo Especifica um atributo que deve estar contido na tag. Voc pode especificar um valor especfico para o

atributo ou selecionar [qualquer valor].


Sem atributo Seleciona um atributo que no deve estar contido na tag. Por exemplo, selecione esta opo para

procurar todas as tags img que no tenham o atributo alt.


Contendo Especifica um texto ou uma tag que deve estar contido na tag original. Por exemplo, no cdigo <b><font
size="4">heading 1</font></b>, a tag font est contida na tag b.

No contendo Especifica um texto ou uma tag que no deve estar contido na tag original. Dentro da tag Especifica uma tag na qual a tag de destino deve estar contida. Fora da tag Especifica uma tag na qual a tag de destino no deve estar contida.

5 (Opcional.) Para limitar ainda mais a pesquisa, clique no boto de adio (+) e repita a etapa 3. 6 Se voc no tiver aplicado nenhum modificador de tag nas etapas 3 e 4, clique no boto de subtrao (-) para

remover o menu pop-up de modificadores de tag.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 223


Adio de contedo a pginas

7 Para executar uma ao quando a tag for encontrada (como remover ou substituir a tag), selecione a ao no menu

pop-up Ao e, se aplicvel, especifique quaisquer informaes adicionais necessrias execuo da ao.

Procura de texto especfico (avanado)


Use a caixa de dilogo Localizar e substituir para procurar texto ou tags em um documento, e substituir o material localizado por outro texto ou tags.
1 Selecione Editar > Localizar e substituir. 2 No menu pop-up Pesquisar, selecione Texto (avanado). 3 Digite texto no campo de texto adjacente ao menu pop-up Pesquisa.

Por exemplo, digite a palavra Sem ttulo.


4 Selecione Dentro da tag ou Fora da tag e, em seguida, selecione uma tag no menu pop-up adjacente.

Por exemplo, selecione Dentro da tag e depois ttulo.


5 (Opcional.) Clique no boto de adio (+) para limitar a pesquisa com um dos seguintes modificadores de tag:
Com atributo Especifica um atributo que deve estar contido na tag. Voc pode especificar um valor especfico para o

atributo ou selecionar [qualquer valor].


Sem atributo Seleciona um atributo que no deve estar contido na tag. Por exemplo, selecione esta opo para

procurar todas as tags img que no tenham o atributo alt.


Contendo Especifica um texto ou uma tag que deve estar contido na tag original. Por exemplo, no cdigo <b><font
size="4">heading 1</font></b>, a tag font est contida na tag b.

No contendo Especifica um texto ou uma tag que no deve estar contido na tag original. Dentro da tag Especifica uma tag na qual a tag de destino deve estar contida. Fora da tag Especifica uma tag na qual a tag de destino no deve estar contida.

6 (Opcional.) Para limitar ainda mais a pesquisa, repita a etapa 4.

Definio de abreviaes e acrnimos


O HTML fornece tags que permitem definir as abreviaes e os acrnimos usados na pgina para mecanismos de pesquisa, verificadores ortogrficos, programas de converso de idioma ou sintetizadores de fala. Por exemplo, talvez seja necessrio especificar que a abreviao EM na pgina significa engenharia mecnica ou que o acrnimo WHO significa World Health Organization.
1 Selecione a abreviao ou o acrnimo no texto da pgina. 2 Selecione Inserir > HTML > Objetos de texto > Abreviao ou Inserir > HTML > Objetos de texto > Acrnimo. 3 Digite o texto completo do acrnimo ou da abreviao. 4 Digite o idioma, como en para ingls, de para alemo ou it para italiano.

Definio das preferncias de cpia e colagem


Voc pode definir preferncias de colagem especial como opes padro ao usar Editar > Colar para colar texto de outros aplicativos. Por exemplo, se voc deseja colar o texto sempre como apenas texto ou texto com formatao bsica, defina a opo padro na caixa de dilogo Preferncias de cpia/colagem.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 224


Adio de contedo a pginas

Nota: Quando voc colar texto em um documento do Dreamweaver, use o comando Colar ou Colar especial. O comando Colar especial permite especificar o formato do texto colado de diferentes formas. Por exemplo, se voc deseja colar texto de um documento formatado do Microsoft Word no documento do Dreamweaver, mas deseja retirar toda a formatao para que possa aplicar sua prpria folha de estilos CSS ao texto colado, selecione texto no Word, copie-o para a rea de transferncia e use o comando Colar especial para selecionar a opo que permite colar apenas texto. Nota: As preferncias definidas na caixa de dilogo Preferncias de cpia/colagem se aplicam apenas ao material colado na Visualizao de design.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Clique na categoria Copiar/colar. 3 Defina as opes a seguir e clique em OK.
Apenas texto Permite que voc cole texto sem formatao. Se o texto original estiver formatado, toda a formatao,

incluindo quebras de linha e pargrafos, ser removida.


Texto com estrutura Permite colar um texto que retenha a estrutura, mas no retenha a formatao bsica. Por exemplo, voc pode colar o texto e reter a estrutura de pargrafos, listas e tabelas, sem reter o negrito, o itlico e outras formataes. Texto com estrutura e formatao bsica Permite colar um texto HTML estruturado e simples (por exemplo, pargrafos e tabelas, assim como um texto formatado com a tag b, i, u, strong, em, hr, abbr ou acronym). Texto com estrutura e formatao integral Permite colar um texto que retenha a estrutura, a formatao HTML e os

estilos CSS. Nota: A opo Formatao integral no pode reter estilos CSS provenientes de uma folha de estilos externa nem reter estilos caso o aplicativo do qual voc esteja colando os dados no retenha estilos aps a colagem para a rea de transferncia.
Reter quebras de linha Permite manter quebras de linha no texto colado. Esta opo estar desativada se voc tiver selecionado Apenas texto. Limpar espaamento de pargrafo do Word Selecione esta opo se tiver selecionado Texto com estrutura ou Texto

com estrutura e formatao bsica, e deseje eliminar espao extra entre pargrafos ao colar o texto.

Verificar ortografia de pgina da Web


Use o comando Verificar ortografia para verificar a ortografia no documento atual. O documento deve ser uma pgina da Web (por exemplo, uma pgina HTML, ColdFusion ou PHP). O comando Verificar ortografia no funciona em arquivos de texto ou arquivos XML. Alm disso, o comando Verificar ortografia ignora tags HTML e valores de atributo. Nota: O Dreamweaver s pode fazer a verificao ortogrfica de um arquivo que esteja aberto na janela Documento. Ele no pode fazer a verificao ortogrfica de todos os arquivos em um site sumultaneamente. Por padro, o verificador ortogrfico usa o dicionrio de ortografia Ingls (EUA). Para alterar o dicionrio, selecione Editar > Preferncias > Geral (Windows) ou Dreamweaver > Preferncias > Geral (Macintosh) e, no menu pop-up Dicionrio de ortografia, selecione o dicionrio desejado.
1 Selecione Comandos > Verificar ortografia ou pressione Shift+F7.

Quando o Dreamweaver encontrar uma palavra no reconhecida, a caixa de dilogo Verificar ortografia ser exibida.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 225


Adio de contedo a pginas

2 Selecione a opo apropriada baseado na maneira como voc deseja lidar com a discrepncia.
Adicionar a pessoal Adiciona uma palavra no reconhecida ao seu dicionrio pessoal. Ignorar Ignora esta ocorrncia da palavra no reconhecida. Alterar Substitui esta ocorrncia da palavra no reconhecida pelo texto digitado na caixa de texto Alterar para ou pela seleo da lista Sugestes. Ignorar tudo Ignora todas as ocorrncias da palavra no reconhecida. Alterar tudo Substitui todas as ocorrncias da palavra no reconhecida da mesma maneira.

Nota: O Dreamweaver no fornece um modo de excluir entradas que foram adicionadas aos dicionrios pessoais.

Importar dados tabulares


Voc pode importar dados tabulares para o documento salvando primeiramente os arquivos (do Microsoft Excel ou de banco de dados, por exemplo) como arquivos de texto delimitados. Voc pode importar e formatar dados tabulares e importar texto de documentos HTML do Microsoft Word. Tambm possvel adicionar texto de documentos do Microsoft Excel para um documento do Dreamweaver, importando o contedo do arquivo do Excel para uma pgina da Web.
1 Selecione Arquivo > Importar > Importar dados tabulares ou Inserir > Objetos de tabela > Importar dados

tabulares.
2 Procure o arquivo desejado ou digite o nome dele na caixa de texto. 3 Selecione o delimitador usado quando o arquivo foi salvo como texto delimitado. As opes disponveis so

Tabulao, Vrgula, Ponto-e-vrgula, Dois-pontos e Outros. Se voc selecionar Outros, ser exibido um campo em branco ao lado da opo. Digite o caractere que foi usado como delimitador.
4 Use as opes restantes para formatar ou definir a tabela para a qual os dados sero importados e clique em OK.

Mais tpicos da Ajuda


Abrir e editar documentos existentes na pgina 67 Importao e exportao de dados tabulares na pgina 178

Importao de documentos do Microsoft Office (somente Windows)


Voc pode inserir o contedo completo de um documento do Microsoft Word ou Excel em uma pgina da Web nova ou existente. Durante a importao de um documento do Word ou Excel, o Dreamweaver recebe o HTML convertido e o insere na pgina da Web. O tamanho do arquivo, depois que o Dreamweaver recebe o HTML convertido, deve ser inferior a 300K. Em vez de importar o contedo total de um arquivo, voc tambm pode colar partes de um documento do Word e preservar a formatao. Nota: Se voc usa o Microsoft Office 97, no possvel importar o contedo de um documento do Word ou Excel; insira um link para o documento.
1 Abra a pgina da Web na qual voc deseja inserir o documento do Word ou Excel.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 226


Adio de contedo a pginas

2 Na Visualizao de design, siga um destes procedimentos para selecionar o arquivo:

Arraste o arquivo de seu local atual para a pgina em que o contedo deve aparecer. Selecione Arquivo > Importar > Documento do Word ou Arquivo > Importar > Documento do Excel.
3 Na caixa de dilogo Inserir documento, v at o arquivo desejado, selecione qualquer opo de formatao no menu

pop-up Formatao exibido na parte inferior da caixa de dilogo e clique em Abrir.


Apenas texto Insere texto sem formatao. Se o texto original for formatado, toda a formatao ser removida. Texto com estrutura Insere um texto que retenha a estrutura, mas no retenha a formatao bsica. Por exemplo, voc

pode colar o texto e reter a estrutura de pargrafos, listas e tabelas, sem reter o negrito, o itlico e outras formataes.
Texto com estrutura e formatao bsica Insere um texto HTML estruturado e simples (por exemplo, pargrafos e tabelas, assim como um texto formatado com a tag b, i, u, strong, em, hr, abbr ou acronym). Texto com estrutura e formatao integral Insere um texto que retenha a estrutura, a formatao HTML e os estilos CSS. Limpar espaamento de pargrafo do Word Elimina o espao extra entre os pargrafos quando voc cola o texto, caso

tenha selecionado Texto com estrutura ou Formatao bsica. O contedo do documento do Word ou Excel exibido na pgina.

Criao de um link para um documento do Word ou Excel.


Voc pode inserir um link para um documento do Microsoft Word ou Excel em uma pgina existente.
1 Abra a pgina em que o link deve aparecer. 2 Arraste o arquivo do local atual para a pgina do Dreamweaver, posicionando o link no local desejado. 3 Selecione Criar um link e clique em OK. 4 Se o documento ao qual voc est se vinculando estiver localizado fora da pasta raiz do site, o Dreamweaver

solicitar que voc copie o documento para a raiz do site. Ao copiar o documento para a pasta raiz do site, voc garantir que o documento estar disponvel quando o site for publicado.
5 Ao carregar a pgina no servidor Web, verifique se o arquivo do Word ou Excel tambm foi carregado.

Agora a pgina contm um link para o documento do Word ou Excel. O texto do link o nome do arquivo vinculado. Voc pode alterar o texto do link na janela Documento se desejar.

Sobre a formatao de texto (CSS versus HTML)


A formatao de texto no Dreamweaver similar ao uso de um editor de texto padro. Voc pode definir estilos de formatao padro (Pargrafo, Cabealho 1, Cabealho 2 etc.) para um bloco de texto, alterar a fonte, o tamanho, a cor e o alinhamento do texto selecionado ou aplicar estilos de texto, como negrito, itlico, cdigo (monoespaado) e sublinhado. O Dreamweaver tem dois Inspetores de propriedades integrados em um: O Inspetor de propriedades CSS e o Inspetor de propriedades HTML. Quando voc usa o Inspetor de propriedades CSS, o Dreamweaver formata o texto usando folhas de estilos em cascata (CSS). A CSS proporciona aos designers e desenvolvedores da Web maior controle sobre o design de pgina da Web e, ao mesmo tempo, fornece recursos avanados de acessibilidade e menor tamanho de arquivo. O Inspetor de propriedades CSS permite acessar estilos existentes, bem como criar novos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 227


Adio de contedo a pginas

O uso da CSS uma maneira de controlar o estilo de uma pgina da Web sem comprometer sua estrutura. Ao separar elementos de design visual (fontes, cores, margens etc.) da lgica estrutural de uma pgina da Web, a CSS proporciona aos designers da Web controle visual e tipogrfico sem sacrificar a integridade do contedo. Alm disso, a definio do design tipogrfico e do layout da pgina em um bloco de cdigo nico e distinto sem precisar recorrer a mapas de imagem, tags font, tabelas e GIFs de espaador permite downloads mais rpidos, manuteno otimizada de sites e um ponto central a partir do qual os atributos de design sero controlados nas vrias pginas da Web. No possvel armazenar estilos criados com CSS diretamente no documento ou, para mais eficincia e flexibilidade, voc pode armazenar estilos em uma folha de estilos externa. Se voc anexar uma folha de estilos externa a vrias pginas da Web, todas as pginas refletiro automaticamente todas as alteraes feitas na folha de estilos. Para acessar todas as regras CSS de uma pgina, use o painel Estilos CSS (Janela > Estilos CSS). Para acessar as regras que se aplicam a uma seleo atual, use o painel Estilos CSS (modo Atual) ou o menu pop-up Regra-alvo no Inspetor de propriedades CSS. Se preferir, use tags de markup HTML para formatar o texto em suas pginas da Web. Para usar tags HTML em vez de CSS, formate o texto usando o Inspetor de propriedades HTML. Nota: possvel combinar a formatao CSS e a formatao HTML 3.2 em uma mesma pgina. A formatao aplicada de forma hierrquica: a formatao HTML 3.2 substitui a formatao aplicada pelas folhas de estilos CSS externa, enquanto a CSS incorporada no documento substitui a CSS externa.

Mais tpicos da Ajuda


Abertura do painel Estilos CSS na pgina 131 Introduo s folhas de estilos em cascata na pgina 123

Definir propriedades de texto no Inspetor de propriedades


Voc pode usar o Inspetor de propriedades de texto para aplicar a formatao HTML ou a formatao da folha de estilos em cascata (CSS). Quando voc aplica formatao HTML, o Dreamweaver adiciona propriedades ao cdigo HTML no corpo da pgina. Quando voc aplica formatao CSS, o Dreamweaver escreve propriedades no cabealho do documento ou em uma folha de estilos distinta. Nota: Quando voc criar estilos inline CSS, o Dreamweaver adicionar o cdigo de atributo de estilo diretamente ao corpo da pgina.

Mais tpicos da Ajuda


Criao de uma nova regra CSS na pgina 132 Definio de propriedades CSS na pgina 133 Definio das propriedades da clula, linha ou coluna na pgina 182 Definir preferncias gerais do Dreamweaver na pgina 30 Tutorial do Inspetor de propriedades CSS

Editar regras CSS no Inspetor de propriedades


1 Abra o Inspetor de propriedades (Janela > Propriedades), caso ele ainda no esteja aberto, e clique no boto CSS. 2 Siga um destes procedimentos:

Coloque o ponto de insero dentro do bloco de texto que foi formatado por uma regra que voc queira editar. A
regra exibida no menu pop-up Regra-alvo.

Selecione uma regra no menu pop-up Regra-alvo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 228


Adio de contedo a pginas

3 Faa alteraes na regra, usando as vrias opes do Inspetor de propriedades CSS.


Regra-alvo a regra que voc est editando no Inspetor de propriedades CSS. Quando se tem um estilo existente aplicado ao texto, a regra que afeta o formato do texto exibida quando voc clica dentro do texto na pgina. Voc tambm pode usar o menu pop-up Regra-alvo para criar novas regras CSS, novos estilos inline ou aplicar classes existentes ao texto selecionado. Se voc estiver criando uma nova regra, precisar preencher a caixa de dilogo Nova regra CSS. Para obter mais informaes, consulte os links no final deste tpico. Editar regra Abre a caixa de dilogo Definio de regra CSS da regra-alvo. Se voc selecionar Nova regra CSS no menu

pop-up Regra-alvo e clicar no boto Editar regra, o Dreamweaver abrir a caixa de dilogo de definio Nova regra CSS em vez disso.
Painel CSS Abre o painel de estilos CSS e exibe as propriedades da regra-alvo na visualizao Atual. Fonte Altera a fonte da regra-alvo. Tamanho Define o tamanho de fonte da regra-alvo. Cor do texto Define a cor selecionada como a cor da fonte na regra-alvo. Selecione uma cor aceita pela Web clicando na caixa de cores ou digite um valor hexadecimal (por exemplo, #FF0000) no campo de texto adjacente. Negrito Adiciona a propriedade de negrito regra-alvo. Itlico Adiciona a propriedade de itlico regra-alvo. Alinhar esquerda, Centralizar e Alinhar direita Adiciona as respectivas propriedades de alinhamento regra-alvo.

Nota: As propriedades Fonte, Tamanho, Cor do texto, Negrito, Itlico e Alinhamento sempre exibem as propriedades da regra que se aplica seleo atual na janela Documento. Quando voc alterar alguma dessas propriedades, afetar a regra-alvo. Para assistir a um tutorial em vdeo sobre como trabalhar com o Inspetor de propriedades CSS, consulte www.adobe.com/go/lrvid4041_dw_br.

Definio da formatao HTML no Inspetor de propriedades


1 Abra o Inspetor de propriedades (Janela > Propriedades), caso ele ainda no esteja aberto, e clique no boto HTML. 2 Selecione o texto que deseja formatar. 3 Defina as opes a serem aplicadas ao texto selecionado:
Formato Define o estilo de pargrafo do texto selecionado. O pargrafo aplica o formato padro de uma tag <p>,

Cabealho 1 adiciona uma tag H1 e assim por diante.


ID Atribui uma ID seleo. O menu pop-up ID (se aplicvel) lista todas as IDs declaradas no utilizadas do documento. Classe Exibe o estilo de classe atualmente aplicado ao texto selecionado. Se nenhum estilo tiver sido aplicado seleo, o menu pop-up mostrar Sem estilo CSS. Se vrios estilos tiverem sido aplicados seleo, o menu estar em branco.

Use o menu Estilo para executar qualquer um destes procedimentos:

Selecionar o estilo a ser aplicado seleo. Selecionar Nenhum para remover o estilo atualmente selecionado. Selecione Renomear e renomeie o estilo. Selecione Anexar folha de estilos para abrir uma caixa de dilogo que permita anexar uma folha de estilos externa
pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 229


Adio de contedo a pginas

Negrito Aplica <b> ou <strong> ao texto selecionado de acordo com a preferncia de estilo definida na categoria Geral da caixa de dilogo Preferncias. Itlico Aplica <i> ou <em> ao texto selecionado de acordo com a preferncia de estilo definida na categoria Geral da

caixa de dilogo Preferncias.


Lista no-ordenada Cria uma lista com marcadores do texto selecionado. Se nenhum texto for selecionado, uma nova lista com marcadores ser iniciada. Lista ordenada Cria uma lista numerada do texto selecionado. Se nenhum texto for selecionado, uma nova lista

numerada ser iniciada.


Citao em bloco e Remover citao em bloco Recua ou remove o recuo do texto selecionado aplicando ou removendo a tag blockquote. Em uma lista, o recuo cria uma lista aninhada e a remoo do recuo desaninha a lista. Link Cria um link de hipertexto do texto selecionado. Clique no cone de pasta para acessar um arquivo no site; digite

o URL; arraste o cone Apontar para arquivo para um arquivo no painel Arquivos ou arraste um arquivo do painel Arquivos para a caixa.
Ttulo Especifica a dica de ferramenta de texto para um link de hipertexto. Alvo Especifica o quadro ou a janela em que o documento vinculado ser carregado:

_blank carrega o arquivo vinculado em uma nova janela de navegador no nomeada. _parent carrega o arquivo vinculado em um conjunto de quadros pai ou na janela do quadro que contm o link.

Se o quadro que contm o link no estiver aninhado, o arquivo vinculado ser carregado na janela de navegador em tamanho integral.

_self carrega o arquivo vinculado no mesmo quadro ou janela do link. Este alvo est implcito; portanto, voc

geralmente no precisa especific-lo.


_top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.

Uso de formatao HTML


Embora CSS seja o mtodo preferido de formatao de texto, o Dreamweaver ainda permite formatar texto com HTML.

Formatao de pargrafos
Use o menu pop-up Formatar, no Inspetor de propriedades HTML, ou o submenu Formatar > Formato do pargrafo para aplicar as tags padro de pargrafo e cabealho.
1 Coloque o ponto de insero no pargrafo ou selecione algum texto no pargrafo. 2 Usando o submenu Formatar > Formato do pargrafo ou o menu pop-up Formatar, no Inspetor de propriedades;

selecione uma opo:

Selecione um formato de pargrafo (por exemplo, Cabealho 1, Cabealho 2, Texto pr-formatado etc.) A tag
HTML associada ao estilo selecionado (por exemplo, h1 para Cabealho 1, h2 para Cabealho 2, pre para Texto pr-formatado etc.) aplicada ao pargrafo inteiro.

Selecione Nenhum para remover um formato de pargrafo.


Quando voc aplicar uma tag de cabealho a um pargrafo, o Dreamweaver adicionar automaticamente a prxima linha de texto como um pargrafo padro. Para alterar essa configurao, selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). Em seguida, na categoria Geral, em Opes de edio, certifique-se de que Alternar para pargrafo simples aps cabealho no est selecionado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 230


Adio de contedo a pginas

Mais tpicos da Ajuda


Definir propriedades de texto no Inspetor de propriedades na pgina 227 Definio de propriedades CSS na pgina 133

Alterao da cor do texto


Voc pode alterar a cor padro de todo o texto em uma pgina ou pode alterar a cor do texto selecionado na pgina.

Mais tpicos da Ajuda


Usar o seletor de cores na pgina 215 Definio das cores de texto padro em uma pgina Selecione Modificar > Propriedades da pgina > Aparncia (HTML) ou Links (HTML) e selecione cores para as opes Cor do texto, Cor do link, Links visitados e Links ativos. Nota: A cor do link ativo a cor alternativa do link quando ele est sendo clicado. Alguns navegadores da Web podem no usar a cor que voc especifica. Alterao da cor do texto selecionado Selecione Formatar > Cor, selecione uma cor no seletor de cores do sistema e clique em OK.

Alinhamento do texto
possvel alinhar o texto com HTML, usando o submenu Formatar > Alinhar. Voc pode centralizar qualquer elemento em uma pgina usando o comando Formatar > Alinhar > Centralizar. Alinhamento de texto em uma pgina 1 Selecione o texto que voc deseja alinhar ou simplesmente insira o ponteiro no incio do texto.
2 Selecione Formatar > Alinhar e escolha um comando de alinhamento.

Centralizao de elementos da pgina 1 Selecione o elemento (imagem, plug-in, tabela ou outro elemento de pgina) que voc deseja centralizar.
2 Selecione Formatar > Alinhar > Centralizar.

Nota: Voc pode alinhar e centralizar blocos de texto completos. No possvel alinhar ou centralizar parte de um cabealho ou pargrafo.

Recuo do texto
O uso do comando Recuar aplica a tag HTML blockquote a um pargrafo de texto, recuando o texto em ambos os lados da pgina.
1 Coloque o ponto de insero no pargrafo que voc deseja recuar. 2 Selecione Formatar > Recuar ou Diminuir recuo, ou selecione Lista > Recuar ou Diminuir recuo, no menu de

contexto. Nota: Voc pode aplicar vrios recuos a um pargrafo. Cada vez que voc seleciona este comando, o texto recua em ambos os lados do documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 231


Adio de contedo a pginas

Aplicar estilos de fonte


Voc pode usar HTML para aplicar formatao de texto a uma nica letra ou a pargrafos e blocos de texto inteiros em um site. Use o menu Formatar para definir ou alterar caractersticas de fonte do texto selecionado. Voc pode definir o tipo, o estilo (negrito ou itlico, por exemplo) e o tamanho da fonte.
1 Selecione o texto. Se no houver nenhum texto selecionado, a opo se aplicar ao texto subseqente digitado. 2 Selecione uma das seguintes opes:

Para alterar a fonte, selecione uma combinao de fonte no submenu Formatar > Fonte. Selecione Padro para
remover as fontes aplicadas anteriormente. A opo Padro aplica a fonte padro ao texto selecionado (a fonte padro do navegador ou a fonte atribuda a essa tag na folha de estilos CSS).

Para alterar o estilo da fonte, selecione um estilo de fonte (negrito, itlico, sublinhado etc.) no submenu Formatar
> Estilo.

Mais tpicos da Ajuda


Criao de pginas com CSS na pgina 123 Criao de uma nova regra CSS na pgina 132

Renomear classe no Inspetor de propriedades HTML


O Dreamweaver exibe todas as classes disponveis para sua pgina no menu Classe do Inspetor de propriedades HTML. Voc pode renomear estilos nessa lista, selecionando a opo Renomear, no final da lista de estilos de classe.
1 Selecione Renomear no menu pop-up Estilo do Inspetor de propriedades de texto. 2 Selecione o estilo que voc deseja renomear no menu pop-up Renomear estilo. 3 Digite um novo nome no campo de texto Novo nome e clique em OK.

Adio do espaamento do pargrafo


O Dreamweaver funciona da mesma forma que muitos editores de texto: pressione Enter (Windows) ou Return (Macintosh) para criar um novo pargrafo. Os navegadores da Web inserem automaticamente um linha de espao em branco entre os pargrafos. Voc pode adicionar uma nica linha de espao entre os pargrafos inserindo uma quebra de linha.

Adio de um retorno de pargrafo


Pressione Enter (Windows) ou Return (Macintosh).

Adio de uma quebra de linha


Siga um destes procedimentos:

Pressione Shift+Enter (Windows) ou Shift+Return (Macintosh). Selecione Inserir > HTML > Caracteres especiais > Quebra de linha. Na categoria Texto do painel Inserir, clique no boto Caracteres e selecione o cone Quebra de linha.

Uso de rguas horizontais


As rguas horizontais (linhas) so teis para organizar informaes. Em uma pgina, voc pode separar visualmente texto e objetos com uma ou mais rguas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 232


Adio de contedo a pginas

Criao de uma rgua horizontal


1 Na janela Documento, coloque o ponto de insero no local em que deseja inserir uma rgua horizontal. 2 Selecione Inserir > HTML > Rgua horizontal.

Modificao de uma rgua horizontal


1 Na janela Documento, selecione a rgua horizontal. 2 Selecione Janela > Propriedades para abrir o Inspetor de propriedades e modifique as propriedades conforme

desejado:
A caixa de texto de ID Permite que voc especifique uma ID para a rgua horizontal. L e A Especifica a largura e a altura da rgua em pixels ou como uma porcentagem do tamanho da pgina. Alinhar Especifica o alinhamento da rgua (Padro, esquerda, Centralizar ou direita). Esta configurao se

aplicar somente se a largura da rgua for menor que a largura da janela do navegador.
Sombreado Especifica se a rgua desenhada com sombreado. Desmarque esta opo para desenhar a rgua em uma

cor slida.
Classe Permite que voc anexe uma folha de estilos ou aplique uma classe a partir de uma folha de estilos j anexada.

Modificao das combinaes de fontes


Use o comando Editar lista de fontes para definir as combinaes de fontes que aparecem no Inspetor de propriedades e no submenu Formatar > Fonte. As combinaes de fontes determinam como um navegador exibir um texto na pgina da Web. Um navegador usa a primeira fonte da combinao instalada no sistema do usurio. Se nenhuma das fontes da combinao estiver instalada, o navegador exibir o texto conforme especificado pelas preferncias de navegador do usurio.

Modificao das combinaes de fontes


1 Selecione Formatar > Fonte > Editar lista de fontes. 2 Selecione a combinao de fontes na lista, na parte superior da caixa de dilogo.

As fontes da combinao selecionada so relacionadas na lista Fontes escolhidas, no canto inferior esquerdo da caixa de dilogo. direita, fornecida uma lista de todas as fontes disponveis instaladas no sistema.
3 Siga um destes procedimentos:

Para adicionar ou remover fontes de uma combinao de fontes, clique no boto de setas (<< ou >>) entre as listas
Fontes escolhidas e Fontes disponveis.

Para adicionar ou remover uma combinao de fontes, clique nos botes de adio (+) e subtrao () na parte
superior da caixa de dilogo.

Para adicionar uma fonte no instalada no sistema, digite o nome da fonte no campo de texto abaixo da lista Fontes
disponveis e clique no boto << para adicion-la combinao. A adio de uma fonte no instalada no sistema til, por exemplo, para especificar uma fonte somente para Windows quando voc est desenvolvendo pginas em um Macintosh.

Para mover a combinao de fontes para cima ou para baixo na lista, clique nos botes de seta na parte superior da
caixa de dilogo.

Adio de uma nova combinao lista de fontes


1 Selecione Formatar > Fonte > Editar lista de fontes.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 233


Adio de contedo a pginas

2 Selecione uma fonte na lista Fontes disponveis e clique no boto << para mover a fonte para a lista Fontes

escolhidas.
3 Repita a etapa 2 para cada fonte subseqente da combinao.

Para adicionar uma fonte no instalada no sistema, digite o nome da fonte no campo de texto abaixo da lista Fontes disponveis e clique no boto << para adicionar a fonte combinao. A adio de uma fonte no instalada no sistema til, por exemplo, para especificar uma fonte somente para Windows quando voc est desenvolvendo pginas em um Macintosh.
4 Quando terminar de selecionar fontes especficas, selecione uma famlia de fontes genrica no menu Fontes

disponveis e clique no boto << para mover a famlia de fontes genrica para a lista Fontes escolhidas. As famlias de fontes genricas incluem cursiva, decorativa, monoespaada, sem serifas e com serifas. Se nenhuma das fontes da lista Fontes escolhidas estiver disponvel no sistema do usurio, o texto aparecer na fonte padro associada famlia de fontes genrica. Por exemplo, a fonte monoespaada padro da maioria dos sistemas Courier.

Insero de datas
O Dreamweaver oferece um objeto de data conveniente, que insere a data atual no formato de sua preferncia (com ou sem a hora) e permite a atualizao da data sempre que voc salva o arquivo. Nota: As datas e horas mostradas na caixa de dilogo Inserir data no so atuais nem refletem as datas/horas que um visitante v quando exibe o site. Elas so apenas exemplos da maneira como voc deseja exibir essas informaes.
1 Na janela Documento, coloque o ponto de insero no local em que deseja inserir a data. 2 Siga um destes procedimentos:

Selecione Inserir > Data. Na categoria Comum do painel Inserir, clique no boto Data.
3 Na caixa de dilogo resultante, selecione um formato para o nome do dia da semana, um formato para a data e um

formato para a hora.


4 Se voc deseja que a data inserida seja atualizada cada vez que voc salva o documento, selecione Atualizar

automaticamente ao salvar. Se voc deseja que a data fique sem formatao quando for inserida e nunca seja atualizada automaticamente, desmarque essa opo.
5 Clique em OK para inserir a data.

Se voc tiver selecionado Atualizar automaticamente ao salvar, poder editar o formato de data aps ele ter sido inserido no documento, clicando no texto formatado e selecionando Editar formato de data no Inspetor de propriedades.

Adio e modificao de imagens


Sobre imagens
H vrios tipos diferentes de formatos de arquivos grficos, mas trs formatos so geralmente usados nas pginas da Web: GIF, JPEG e PNG. Os formatos de arquivo GIF e JPEG so os mais aceitos e podem ser exibidos pela maioria dos navegadores.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 234


Adio de contedo a pginas

Os arquivos PNG so mais adequados para quase todos os tipos de grficos da Web devido sua flexibilidade e ao seu menor tamanho de arquivo. No entanto, a exibio de imagens PNG so apenas parcialmente aceitas no Microsoft Internet Explorer (navegadores 4.0 e posteriores) e no Netscape Navigator (navegadores 4.04 e posteriormente). Portanto, a menos que voc esteja criando grficos para um pblico-alvo especfico que use um navegador com suporte ao formato PNG, use GIFs ou JPEGs para maior acessibilidade.
GIF (Graphic Interchange Format) Os arquivos GIF usam um mximo de 256 cores e so mais adequados para a exibio de imagens em tom no-contnuo ou imagens grandes de cores simples, como barras de navegao, botes, cones, logotipos ou outras imagens com cores e tons uniformes. JPEG (Joint Photographic Experts Group) O formato de arquivo JPEG o formato preferido para imagens fotogrficas

ou em tom contnuo, pois os arquivos JPEG podem conter milhes de cores. medida que a qualidade de um arquivo JPEG aumenta, tambm aumentam o tamanho e o tempo de download do arquivo. Voc geralmente consegue um bom equilbrio entre a qualidade da imagem e o tamanho do arquivo compactando um arquivo JPEG.
PNG (Portable Network Group) O formato de arquivo PNG um substituto sem patentes para GIFs que inclui suporte

a imagens true-color, em tons de cinza e de cores indexadas, alm de suporte a canal alfa para transparncia. PNG o formato de arquivo nativo do Adobe Fireworks. Os arquivos PNG retm todas as informaes originais de camada, vetor, cor e efeitos (como sombras) e todos os elementos so completamente editveis, continuamente. Os arquivos devem ter a extenso .png para serem reconhecidos como arquivos PNG pelo Dreamweaver.

Inserir uma imagem


Quando voc insere uma imagem em um documento do Dreamweaver, uma referncia ao arquivo de imagem gerada no cdigo-fonte HTML. Para garantir que essa referncia est correta, o arquivo de imagem deve estar no site atual. Caso contrrio, o Dreamweaver perguntar se voc deseja copiar o arquivo para o site. Voc tambm pode inserir imagens dinamicamente. As imagens dinmicas so aquelas que mudam freqentemente. Por exemplo, os sistemas de rotao de banners de propaganda precisam selecionar aleatoriamente um banner em uma lista de banners possveis e exibir dinamicamente a imagem do banner selecionada quando uma pgina solicitada. Aps inserir uma imagem, voc poder definir os atributos de acessibilidade de tag de imagem que podem ser lidos pelos leitores de tela para usurios com deficincias visuais. Esses atributos podem ser editados no cdigo HTML. Para obter um tutorial sobre insero de imagens, consulte www.adobe.com/go/vid0148_br.
1 Coloque o ponto de insero no local da janela Documento em que a imagem deve aparecer e siga um destes

procedimentos:

Na categoria Comum do painel Inserir, clique no cone Imagens

Na categoria Comum do painel Inserir, clique no boto Imagens e selecione o cone Imagem. Com o cone Imagem
exibido no painel Inserir, arraste-o para a janela Documento (ou a janela Visualizao de cdigo, caso voc esteja trabalhando no cdigo).

Selecione Inserir > Imagem. Arraste uma imagem do painel Ativos (Janela > Ativos) para o local desejado na janela Documento e v para a etapa 3. Arraste uma imagem do painel Arquivos para o local desejado na janela Documento e v para a etapa 3. Arraste uma imagem da rea de trabalho para o local desejado na janela Documento e v para a etapa 3.
2 Na caixa de dilogo exibida, siga um destes procedimentos:

Selecione Sistema de arquivos para escolher um arquivo de imagem. Selecione Fonte de dados para escolher uma origem de imagem dinmica.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 235


Adio de contedo a pginas

Clique no boto Sites e servidores para escolher um arquivo de imagem em uma pasta remota de um dos sites do
Dreamweaver.
3 Navegue para selecionar a origem da imagem ou do contedo que deseja inserir.

Se voc estiver trabalhando em um documento no salvo, o Dreamweaver gerar uma referncia file:// para o arquivo de imagem. Quando voc salva o documento em qualquer lugar do site, o Dreamweaver converte a referncia em um caminho relativo a documento. Nota: Durante a insero de imagens, possvel usar um caminho absoluto para uma imagem que reside em um servidor remoto (ou seja, uma imagem que no esteja disponvel no disco rgido local). No entanto, se voc tiver problemas de desempenho enquanto estiver trabalhando, talvez seja necessrio desativar a exibio da imagem na Visualizao de design, desmarcando Comandos > Exibir arquivos externos.
4 Clique em OK. A caixa de dilogo Atributos de acesso a tag de imagem aparecer ser voc tiver ativado a caixa de

dilogo em Preferncias (Editar > Preferncias).


5 Digite valores nas caixas de texto Texto alternativo e Descrio longa, e clique em OK.

Na caixa Texto alternativo, digite um nome ou uma breve descrio para a imagem. O leitor de tela l as
informaes que voc digita aqui. Voc deve limitar a entrada a aproximadamente 50 caracteres. Em descries mais longas, recomendvel fornecer um link, na caixa de texto Descrio longa, para um arquivo que fornea mais informaes sobre a imagem.

Na caixa Descrio longa, digite o local de um arquivo que ser exibido quando o usurio clicar na imagem ou
clique no cone de pasta para navegar at o arquivo. Esta caixa de texto fornece um link para um arquivo relacionado imagem ou fornece mais informaes sobre a imagem. Nota: Voc pode digitar informaes em uma ou em ambas as caixas de texto, se necessrio. O leitor de tela l o atributo Alt da imagem. Nota: Se voc clicar em Cancelar, a imagem aparecer no documento, mas o Dreamweaver no associar tags ou atributos de acessibilidade a ela.
6 No Inspetor de propriedades (Janela > Propriedades), defina as propriedades da imagem.

Mais tpicos da Ajuda


Tornar as imagens dinmicas na pgina 579 Mapas de imagem na pgina 282 Otimizar o espao de trabalho tendo em vista um design de pgina acessvel na pgina 689 Definir propriedades da pgina na pgina 208 Insero do tutorial de imagens

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 236


Adio de contedo a pginas

Definio das propriedades da imagem


O Inspetor de propriedades de imagens permite que voc defina as propriedades de uma imagem. Se voc no consegue ver todas as propriedades de imagem, clique na seta de expanso no canto inferior direito.

1 Selecione Janela > Propriedades para exibir o Inspetor de propriedades de uma imagem selecionada. 2 Na caixa de texto abaixo da imagem em miniatura, digite um nome com o qual voc se referir imagem ao usar

um comportamento do Dreamweaver (como Trocar imagem) ou ao usar uma linguagem de script como JavaScript ou VBScript.
3 Defina qualquer uma das opes de imagem.
L e A A largura e a altura da imagem, em pixels. O Dreamweaver atualiza automaticamente essas caixas de texto com

as dimenses originais da imagem quando voc insere uma imagem em uma pgina. Se voc definir valores L e A que no correspondam largura e altura reais da imagem, esta pode no ser exibida corretamente em um navegador. (Para restaurar os valores originais, clique nos rtulos de caixa de texto L e A ou no boto Redefinir tamanho da imagem exibido direita das caixas de texto L e A quando voc digita um novo valor.) Nota: Voc pode alterar esses valores para dimensionar o tamanho de exibio desta ocorrncia da imagem, mas isso no reduz o tempo de download, pois o navegador baixa todos os dados da imagem antes do seu dimensionamento. Para reduzir o tempo de download e garantir que todas as ocorrncias de uma imagem aparecero do mesmo tamanho, use o aplicativo de edio de imagens para dimensionar as imagens.
Origem Especifica o arquivo de origem da imagem. Clique no cone de pasta para navegar at o arquivo de origem ou

digite o caminho.
Link Especifica um hiperlink para a imagem. Arraste o cone Apontar para arquivo para um arquivo do painel

Arquivos, clique no cone de pasta para ir at um documento no site ou digite manualmente o URL.
Alinhar Alinha uma imagem e um texto na mesma linha. Alt Especifica um texto alternativo que aparece no lugar da imagem dos navegadores somente texto ou dos

navegadores que foram definidos para baixar as imagens manualmente. Para os usurios com deficincias visuais que usam sintetizadores de fala com navegadores somente texto, o texto falado em voz alta. Em alguns navegadores, esse texto tambm aparece quando o ponteiro est sobre a imagem.
Ferramentas Nome do mapa e Ponto ativo Permite que voc identifique e crie um mapa de imagens do cliente. Espao V e Espao H Adiciona espao, em pixels, ao longo das laterais da imagem. O recurso Espao V adiciona espao ao longo das bordas superior e inferior de uma imagem. O recurso Espao H adiciona espao esquerda e direita de uma imagem. Destino Especifica o quadro ou a janela em que a pgina vinculada ser carregada. (Esta opo no est disponvel quando a imagem no est vinculada a outro arquivo.) Os nomes de todos os quadros do conjunto de quadros atuais aparecem na lista Destino. Voc tambm pode escolher entre os nomes de destino reservados:

_blank carrega o arquivo vinculado em uma nova janela do navegador no nomeada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 237


Adio de contedo a pginas

_parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contm o link. Se o quadro que contm o link no estiver aninhado, o arquivo vinculado ser carregado na janela de navegador em tamanho integral. _self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente no

necessrio especific-lo.
_top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.

Borda A largura, em pixels, da borda da imagem. O padro sem borda. Editar Inicia o editor de imagens especificado nas preferncias de editores externos e abre a imagem selecionada. Editar configuraes da imagem

Abre a caixa de dilogo Visualizao de imagem e possibilita que voc otimize a

imagem.
Cortar

Apara o tamanho de uma imagem, removendo reas indesejadas da imagem selecionada. Faz uma nova amostra de uma imagem redimensionada, aprimorando sua qualidade no seu novo Ajusta as configuraes de brilho e contraste de uma imagem.

Nova amostra

tamanho e forma.
Brilho e contraste Nitidez

Ajusta a nitidez de uma imagem.

Redefine os valores L e A para o tamanho original da imagem. Este boto aparece direita das caixas de texto L e A quando voc ajusta os valores da imagem selecionada.
Redefinir tamanho

Edio dos atributos de acessibilidade da imagem no cdigo


Se voc inseriu os atributos de acessibilidade de uma imagem, poder editar esses valores no cdigo HTML.
1 Na janela Documento, selecione a imagem. 2 Siga um destes procedimentos:

Edite os atributos de imagem apropriados na Visualizao de cdigo. Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica
(Macintosh), e selecione Editar tag.

Edite o valor Alt no Inspetor de propriedades.

Alinhamento de uma imagem


Voc pode alinhar uma imagem ao texto, a outra imagem, a um plug-in ou a outros elementos na mesma linha. Tambm possvel definir o alinhamento horizontal de uma imagem.
1 Selecione a imagem na Visualizao de design. 2 Defina os atributos de alinhamento da imagem no Inspetor de propriedades com o menu pop-up Alinhar.

Voc pode definir o alinhamento em relao a outros elementos no mesmo pargrafo ou linha. Nota: O HTML no permite a insero de texto ao redor dos contornos de uma imagem, assim como em alguns editores de texto. As opes de alinhamento so as seguintes:
Padro Especifica um alinhamento da linha de base. (O padro pode variar de acordo com o navegador do visitante

do site.)
Linha de base e inferior Alinha a linha de base do texto (ou outro elemento no mesmo pargrafo) parte inferior do

objeto selecionado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 238


Adio de contedo a pginas

Superior Alinha a parte superior de uma imagem parte superior do item mais alto (imagem ou texto) na linha atual. Meio Alinha a parte intermediria da imagem linha de base da linha atual. Parte superior do texto Alinha a parte superior da imagem parte superior do caractere mais alto na linha de texto. Absoluto ao meio Alinha a parte intermediria da imagem parte intermediria do texto na linha atual. Absoluto abaixo Alinha a parte inferior da imagem parte inferior da linha de texto (que inclui descendentes, como

na letra g).
esquerda Coloca a imagem selecionada na margem esquerda, colocando automaticamente o texto ao redor dela direita. Se o texto alinhado esquerda preceder o objeto na linha, ele geralmente far com que os objetos alinhados esquerda passem para uma nova linha. direita Coloca a imagem na margem direita, colocando automaticamente o texto ao redor do objeto esquerda. Se o texto alinhado direita preceder o objeto na linha, ele geralmente far com que os objetos alinhados direita passem para uma nova linha.

Redimensionamento visual de uma imagem


Voc pode redimensionar visualmente elementos como imagens, plug-ins, arquivos Shockwave ou SWF, applets e controles ActiveX no Dreamweaver. O redimensionamento visual de uma imagem ajuda voc a ver como a imagem afeta o layout em diferentes dimenses, mas no dimensiona o arquivo de imagem nas propores especificadas. Se voc redimensionar visualmente uma imagem no Dreamweaver sem usar um aplicativo de edio de imagens (como o Adobe Fireworks) para dimensionar o arquivo de imagem para o tamanho desejado, o navegador do usurio dimensionar a imagem quando a pgina for carregada. Isso pode ocasionar um atraso no tempo de download da pgina e a exibio inadequada da imagem no navegador do usurio. Para reduzir o tempo de download e garantir que todas as ocorrncias de uma imagem aparecero do mesmo tamanho, use o aplicativo de edio de imagens para dimensionar as imagens. Ao redimensionar uma imagem no Dreamweaver, voc poder fazer uma nova amostra para acomodar suas novas dimenses. A nova amostra adiciona ou remove pixels de arquivos de imagem JPEG e GIF redimensionados para que eles correspondam ao mximo aparncia da imagem original. A nova amostra de uma imagem reduz seu tamanho de arquivo e melhora o desempenho do download.

Mais tpicos da Ajuda


Editar imagens no Dreamweaver na pgina 241

Redimensionamento visual de um elemento


1 Selecione o elemento (por exemplo, uma imagem ou arquivo SWF) na janela Documento.

As alas de redimensionamento aparecem nos lados inferior e direito do elemento no canto inferior direito. Se as alas de redimensionamento no aparecerem, clique em qualquer lugar que no seja o elemento que voc deseja redimensionar e selecione-o novamente, ou clique na tag apropriada no seletor de tags para selecionar o elemento.
2 Redimensione o elemento executando um dos procedimentos a seguir:

Para ajustar a largura do elemento, arraste a ala de seleo direita. Para ajustar a altura do elemento, arraste a ala de seleo inferior. Para ajustar a largura e a altura do elemento ao mesmo tempo, arraste a ala de seleo de canto. Para preservar as propores do elemento (sua proporo de largura para altura) enquanto ajusta suas dimenses,
pressione Shift enquanto arrasta a ala de seleo de canto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 239


Adio de contedo a pginas

Para ajustar a largura e a altura de um elemento para um tamanho especfico (por exemplo, 1 x 1 pixel), use o Inspetor de propriedades para digitar um valor numrico. Os elementos podem ser visualmente redimensionados em, no mnimo, 8 x 8 pixels. valores nas caixas de texto L e A ou clique no boto Redefinir tamanho no Inspetor de propriedades de imagem.

3 Para retornar um elemento redimensionado s suas dimenses originais, no Inspetor de propriedades, exclua os

Reverso de uma imagem ao seu tamanho original


Clique no boto Redefinir tamanho

no Inspetor de propriedades de imagem.

Nova amostra de uma imagem redimensionada


1 Redimensione a imagem conforme descrito anteriormente. 2 Clique no boto Nova amostra

no Inspetor de propriedades de imagem.

Nota: Voc no pode fazer uma nova amostra de alocadores de espao de imagem ou elementos que no sejam imagens de bitmap.

Insero de um alocador de espao de imagem


Um alocador de espao de imagem um grfico utilizado at que a arte final esteja pronta para ser adicionada a uma pgina da Web. Voc pode definir o tamanho e a cor do alocador de espao, bem como fornecer um rtulo de texto a ele.
1 Na janela Documento, coloque o ponto de insero no local em que deseja inserir um grfico de alocador de espao. 2 Selecione Inserir > Objetos de imagem > Alocador de espao de imagem. 3 Em Nome (opcional), digite o texto que deve aparecer como rtulo no alocador de espao de imagem. Deixe a caixa

de texto em branco caso no deseje que o rtulo aparea. O nome deve comear com uma letra e pode conter apenas letras e nmeros. No so permitidos espaos e caracteres ASCII maisculos.
4 Em Largura e Altura (obrigatrio), digite um nmero para definir o tamanho da imagem em pixels. 5 Em Cor (opcional), siga um destes procedimentos para aplicar uma cor:

Use o seletor de cores para selecionar uma cor. Digite o valor hexadecimal da cor (por exemplo, #FF0000). Digite um nome de cor aceita pela Web (por exemplo, vermelho).
6 Em Texto alternativo (opcional), digite um texto que descreva a imagem para os visualizadores que usam um

navegador somente texto. Nota: Uma tag de imagem inserida automaticamente no cdigo HTML que contm um atributo src vazio.
7 Clique em OK.

A cor, os atributos de tamanho e o rtulo do alocador de espao de imagem aparecem da seguinte maneira:

Quando visualizados em um navegador, o rtulo e o texto de tamanho no aparecem.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 240


Adio de contedo a pginas

Mais tpicos da Ajuda


Redimensionamento visual de uma imagem na pgina 238 Usar o Fireworks para modificar os alocadores de espao de imagem do Dreamweaver na pgina 363

Substituio de um alocador de espao de imagem


Um alocador de espao de imagem no exibe uma imagem em um navegador. Antes de publicar o site, voc deve substituir qualquer alocador de espao de imagem adicionado com arquivos de imagem para Web, como GIFs ou JPEGs. Se voc tiver o Fireworks, poder criar um novo grfico no alocador de espao de imagem do Dreamweaver. A nova imagem definida para o mesmo tamanho da imagem do alocador de espao. Voc pode editar a imagem e substitula no Dreamweaver.
1 Na janela Documento, siga um destes procedimentos:

Clique duas vezes no alocador de espao de imagem. Clique no alocador de espao de imagem para selecion-lo. Em seguida, no Inspetor de propriedades (Janela >
Propriedades), clique no cone de pasta ao lado da caixa de texto Origem.
2 Na caixa de dilogo Origem da imagem, navegue at a imagem que substituir o alocador de espao de imagem e

clique em OK.

Mais tpicos da Ajuda


Usar o Fireworks para modificar os alocadores de espao de imagem do Dreamweaver na pgina 363

Definio das propriedades do alocador de espao de imagem


Para definir as propriedades de um alocador de espao de imagem, selecione o alocador de espao na janela Documento. Em seguida, selecione Janela > Propriedades para exibir o Inspetor de propriedades. Para ver todas as propriedades, clique na seta de expanso no canto inferior direito. Use o Inspetor de propriedades para definir um nome, uma largura, uma altura, uma origem de imagem, uma descrio de texto alternativo, um alinhamento e uma cor para uma imagem de alocador de espao.

No Inspetor de propriedades do alocador de espao, a caixa de texto cinza e a caixa de texto Alinhar esto desativadas. Voc pode definir essas propriedades no Inspetor de propriedades de imagem ao substituir o alocador de espao por uma imagem.
Defina uma das seguintes opes: L e A Define a largura e a altura do alocador de espao de imagem, em pixels. Origem Especifica o arquivo de origem da imagem. Em uma imagem de alocador de espao, esta caixa de texto aparece

vazia. Clique no boto Procurar para selecionar uma imagem substituta para o grfico de alocador de espao.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 241


Adio de contedo a pginas

Link Especifica um hiperlink para o alocador de espao de imagem. Arraste o cone Apontar para arquivo para um

arquivo do painel Arquivos, clique no cone de pasta para ir at um documento no site ou digite manualmente o URL.
Alt Especifica um texto alternativo que aparece no lugar da imagem dos navegadores somente texto ou dos

navegadores que foram definidos para baixar as imagens manualmente. Para os usurios com deficincias visuais que usam sintetizadores de fala com navegadores somente texto, o texto falado em voz alta. Em alguns navegadores, esse texto tambm aparece quando o ponteiro est sobre a imagem.
Criar Inicia o Fireworks para criar uma imagem substituta. O boto Criar estar desativado, a menos que o Fireworks

tambm esteja instalado no seu computador.


Redefinir tamanho Redefine os valores L e A para o tamanho original da imagem. Cor Especifica uma cor para o alocador de espao de imagem.

Mais tpicos da Ajuda


Usar o Fireworks para modificar os alocadores de espao de imagem do Dreamweaver na pgina 363

Editar imagens no Dreamweaver


Voc pode fazer uma nova amostra, cortar, otimizar e ajustar a nitidez de imagens no Dreamweaver. Voc tambm pode ajustar o brilho e o contraste.

Recursos de edio de imagens


O Dreamweaver fornece recursos bsicos de edio de imagens que permitem a voc modificar imagens sem precisar utilizar um aplicativo externo de edio de imagens, como o Fireworks ou o Photoshop. As ferramentas de edio de imagens do Dreamweaver foram projetadas para facilitar o trabalho com os designers de contedo responsveis pela criao de arquivos de imagem para uso no site da Web. Nota: Voc no precisa ter o Fireworks ou outros aplicativos de edio de imagens instalados no computador para usar os recursos de edio de imagens do Dreamweaver.
Selecione Modificar > Imagem. Defina qualquer um destes recursos de edio de imagens do Dreamweaver: Nova amostra Adiciona ou remove pixels de arquivos de imagem JPEG e GIF redimensionados para que eles

correspondam ao mximo aparncia da imagem original. A nova amostra de uma imagem reduz seu tamanho de arquivo e melhora o desempenho do download. Ao redimensionar uma imagem no Dreamweaver, voc poder fazer uma nova amostra para acomodar suas novas dimenses. Quando um objeto de bitmap submetido a uma nova amostra, os pixels so adicionados ou removidos da imagem para torn-la maior ou menor. A nova amostra de uma imagem para uma resoluo mais alta geralmente prejudica um pouco a qualidade. No entanto, a nova amostra para uma resoluo mais baixa, sempre ocasiona perda de dados e geralmente uma diminuio da qualidade.
Cortar Edite imagens reduzindo a rea da imagem. Geralmente, voc precisar cortar uma imagem para dar mais

nfase ao assunto e remover aspectos indesejados referentes ao ponto de interesse da imagem.


Brilho e contraste Modifica o contraste ou brilho dos pixels em uma imagem. Isso afeta os realces, as sombras e os meios-tons de uma imagem. Voc geralmente usa o brilho/contraste ao corrigir imagens muito escuras ou muito claras. Nitidez Ajusta o enfoque de uma imagem aumentando o contraste das bordas localizadas na imagem. Quando voc

digitaliza uma imagem ou tira uma foto digital, a ao padro da maioria dos softwares de captura de imagem suavizar as bordas dos objetos na imagem. Isso impede que os detalhes extremamente finos se percam nos pixels em que as imagens digitais so compostas. No entanto, para ressaltar os detalhes nos arquivos de imagem digital,

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 242


Adio de contedo a pginas

geralmente necessrio ajustar a nitidez da imagem, aumentando o contraste da borda e tornando a imagem mais ntida. Nota: Os recursos de edio de imagens do Dreamweaver se aplicam somente aos formatos de arquivo de imagem JPEG e GIF. Os outros formatos de arquivo de imagem bitmap no podem ser editados atravs desses recursos de edio de imagens.

Cortar uma imagem


O Dreamweaver permite cortar (ou aparar) imagens de arquivo de bitmap. Nota: Quando voc corta uma imagem, o arquivo de imagem de origem alterado no disco. Por essa razo, talvez seja necessrio guardar uma cpia de backup do arquivo de imagem caso voc precise reverter a imagem original.
1 Abra a pgina que contm a imagem a ser cortada, selecione a imagem e siga um destes procedimentos:

Clique no cone Ferramenta corte demarcado Selecione Modificar > Imagem > Cortar.

no Inspetor de propriedades de imagem.

As alas de corte aparecem ao redor da imagem selecionada.


2 Ajuste as alas de corte at que a caixa delimitadora envolva a rea da imagem que voc deseja manter. 3 Clique duas vezes na caixa delimitadora ou pressione Enter para cortar a seleo. 4 Uma caixa de dilogo informa que o arquivo de imagem que voc est cortando ser alterado no disco. Clique em

OK. Cada pixel do bitmap selecionado fora da caixa delimitadora ser removido, mas os outros objetos da imagem permanecero.
5 Visualize a imagem e verifique se ela atende s suas expectativas. Se a resposta for negativa, selecione Editar >

Desfazer corte para reverter a imagem para o estado original. Nota: Enquanto no fechar o Dreamweaver, voc poder desfazer o efeito do comando Cortar (e reverter o arquivo de imagem para o estado original). Tambm possvel editar o arquivo em um aplicativo externo de edio de imagens.

Otimizar uma imagem


Voc pode otimizar imagens nas pginas da Web no Dreamweaver.
1 Abra a pgina que contm a imagem a ser otimizada, selecione a imagem e siga um destes procedimentos:

Clique no boto Editar configuraes de imagem Selecione Modificar > Imagem > Otimizar.

no Inspetor de propriedades de imagem.

2 Faa suas edies na caixa de dilogo Visualizao da imagem e clique em OK.

Ajuste da nitidez de uma imagem


A nitidez aumenta o contraste dos pixels em torno das bordas dos objetos, a fim de aumentar a definio ou nitidez da imagem.
1 Abra a pgina que contm a imagem a ser ajustada, selecione a imagem e siga um destes procedimentos:

Clique no boto Nitidez

no Inspetor de propriedades de imagem.

Selecione Modificar > Imagem > Nitidez.


2 Voc pode especificar o grau de nitidez que o Dreamweaver aplicar imagem arrastando o controle deslizante ou

digitando um valor entre 0 e 10 na caixa de texto. Ao ajustar a nitidez da imagem usando a caixa de dilogo Nitidez, voc poder visualizar a alterao efetuada.
3 Clique em OK quando estiver satisfeito com a imagem.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 243


Adio de contedo a pginas

4 Salve as alteraes selecionando Arquivo > Salvar ou reverta para a imagem original selecionando Editar > Desfazer

nitidez. Nota: Voc s pode desfazer o efeito do comando Nitidez (e reverter para o arquivo de imagem original) antes de salvar a pgina que contm a imagem. Depois que a pgina salva, as alteraes efetuadas na imagem so salvas definitivamente.

Ajuste do brilho e contraste de uma imagem


Brilho/contraste modifica o contraste ou brilho dos pixels em uma imagem. Isso afeta os realces, as sombras e os meios-tons de uma imagem. Voc geralmente usa o brilho/contraste ao corrigir imagens muito escuras ou muito claras.
1 Abra a pgina que contm a imagem a ser ajustada, selecione a imagem e siga um destes procedimentos:

Clique no boto Brilho/contraste

no Inspetor de propriedades de imagem.

Selecione Modificar > Imagem > Brilho/contraste.


2 Arraste os controles deslizantes de brilho e contraste para ajustar as configuraes. A faixa de valores varia de -100

a 100.
3 Clique em OK.

Criao de uma imagem de sobreposio


Voc pode inserir imagens de sobreposio na pgina. Uma sobreposio uma imagem que, quando visualizada em um navegador, alterada quando o ponteiro se move sobre ela. Voc deve ter duas imagens para criar a sobreposio: uma imagem primria (a imagem exibida quando a pgina carregada pela primeira vez) e uma imagem secundria (a imagem que aparece quando o ponteiro se move sobre a imagem primria). As duas imagens em uma sobreposio devem ter o mesmo tamanho. Caso contrrio, o Dreamweaver redimensiona a segunda imagem de modo que corresponda s propriedades da primeira imagem. As imagens de sobreposio so automaticamente definidas para responder ao evento onMouseOver. Voc pode definir uma imagem para responder a um evento diferente (por exemplo, um clique de mouse) ou alterar uma imagem de sobreposio. Para obter um tutorial sobre a criao de sobreposies, consulte www.adobe.com/go/vid0159_br.
1 Na janela Documento, coloque o ponto de insero no local em que a sobreposio deve aparecer. 2 Insira a sobreposio usando um destes mtodos:

Na categoria Comum do painel Inserir, clique no boto Imagens e selecione o cone Imagem de sobreposio. Com
o cone Imagem de sobreposio exibido no painel Inserir, voc pode arrastar o cone para a janela Documento.

Selecione Inserir > Objetos de imagem > Imagem de sobreposio.


3 Defina as opes e clique em OK.
Nome da imagem O nome da imagem de sobreposio. Imagem original A imagem a ser exibida quando a pgina for carregada. Digite o caminho na caixa de texto ou clique em Procurar e selecione a imagem. Imagem de sobreposio A imagem a ser exibida quando o ponteiro movido sobre a imagem original. Digite o caminho ou clique em Procurar para selecionar a imagem. Pr-carregar imagem de sobreposio Pr-carrega as imagens no cache do navegador para que no ocorra nenhum atraso quando o usurio mover o ponteiro sobre a imagem.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 244


Adio de contedo a pginas

Texto alternativo (Opcional) Texto que descreve a imagem dos visualizadores usando um navegador somente texto. Ao clicar, Ir para URL O arquivo que voc deseja abrir quando um usurio clica na imagem de sobreposio. Digite o

caminho ou clique em Procurar e selecione o arquivo. Nota: Se voc no definir um link para a imagem, o Dreamweaver inserir um link nulo (#) no cdigo-fonte HTML ao qual o comportamento de sobreposio anexado. Se voc remover o link nulo, a imagem de sobreposio no funcionar mais.
4 Selecione Arquivo > Visualizar no navegador ou pressione F12. 5 No navegador, mova o ponteiro sobre a imagem original para ver a imagem de sobreposio.

Nota: No possvel ver o efeito de uma imagem de sobreposio na Visualizao de design.

Mais tpicos da Ajuda


Aplicar o comportamento Trocar imagem na pgina 358 Tutorial de sobreposio

Usar um editor de imagens externas


Enquanto estiver no Dreamweaver, voc poder abrir uma imagem selecionada em um editor externo de imagens. Ao retornar ao Dreamweaver aps salvar o arquivo de imagens editado, qualquer alterao feita na imagem estar visvel na janela Documento. Voc pode configurar o Fireworks como seu editor externo principal. Tambm possvel definir quais tipos de arquivo um editor abrir e selecionar vrios editores de imagem. Por exemplo, voc pode definir preferncias para iniciar o Fireworks quando precisar editar um GIF e iniciar outro editor de imagens quando precisar editar um JPG ou JPEG.

Mais tpicos da Ajuda


Trabalho com o Photoshop e Dreamweaver na pgina 368 Trabalho com o Fireworks e Dreamweaver na pgina 362 Iniciar um editor externo para arquivos de mdia na pgina 258

Inicializao do editor externo de imagens


Siga um destes procedimentos:

Clique duas vezes na imagem que deseja editar. Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica
(Macintosh) na imagem a ser editada, selecione Editar com > Procurar e, em seguida, selecione um editor.

Selecione a imagem que deseja editar e clique em Editar no Inspetor de propriedades. Clique duas vezes no arquivo de imagem no painel Arquivos para iniciar o editor de imagens principal. Se voc no
tiver especificado um editor de imagens, o Dreamweaver iniciar o editor padro do tipo de arquivo. Nota: Quando voc abrir uma imagem no painel Arquivos, os recursos de integrao do Fireworks no estaro em vigor. O Fireworks no abre o arquivo PNG original. Para usar os recursos de integrao do Fireworks, abra as imagens na janela Documento. Se voc no vir uma imagem atualizada aps retornar janela Dreamweaver, selecione a imagem e clique no boto Atualizar no Inspetor de propriedades.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 245


Adio de contedo a pginas

Definio de um editor externo de imagens para um tipo de arquivo existente


Voc pode selecionar um editor de imagens para abrir e editar arquivos grficos.
1 Abra a caixa de dilogo Preferncias de tipos de arquivos/editores seguindo um destes procedimentos:

Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e, em seguida, selecione
Tipos de arquivos/editores na lista Categoria esquerda.

Selecione Editar > Editar com editor externo e, em seguida, selecione Tipos de arquivos/editores.
2 Na lista Extenses, selecione a extenso de arquivo para a qual voc deseja definir um editor externo. 3 Clique no boto Adicionar (+) acima da lista Editores. 4 Na caixa de dilogo Selecionar editor externo, navegue at o aplicativo que deseja iniciar como editor desse tipo de

arquivo.
5 Na caixa de dilogo Preferncias, clique em Tornar primrio caso deseje que esse editor seja o editor principal desse

tipo de arquivo.
6 Para configurar um editor adicional para esse tipo de arquivo, repita as etapas 3 e 4.

O Dreamweaver usar automaticamente o editor principal quando voc editar esse tipo de imagem. possvel selecionar os outros editores listados no menu de contexto da imagem na janela Documento.

Adio de um novo tipo de arquivo lista Extenses


1 Abra a caixa de dilogo Preferncias de tipos de arquivos/editores seguindo um destes procedimentos:

Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e, em seguida, selecione
Tipos de arquivos/editores na lista Categoria esquerda.

Selecione Editar > Editar com editor externo e, em seguida, selecione Tipos de arquivos/editores.
2 Na caixa de dilogo Preferncias de tipos de arquivos/editores, clique no boto Adicionar (+) acima da lista

Extenses. Uma caixa de texto aparece na lista Extenses.


3 Digite a extenso do tipo de arquivo para o qual um editor ser iniciado. 4 Para selecionar um editor externo para o tipo de arquivo, clique em Adicionar (+) acima da lista Editores. 5 Na caixa de dilogo exibida, selecione o aplicativo que voc deseja usar para editar esse tipo de imagem. 6 Clique em Tornar primrio caso deseje que este editor seja o editor principal para o tipo de imagem.

Alterao de uma preferncia de editor existente


1 Abra a caixa de dilogo Preferncias de tipos de arquivos/editores seguindo um destes procedimentos:

Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e, em seguida, selecione
Tipos de arquivos/editores na lista Categoria esquerda.

Selecione Editar > Editar com editor externo e, em seguida, selecione Tipos de arquivos/editores.
2 Na caixa de dilogo Preferncias de tipos de arquivos/editores, na lista Extenses, selecione o tipo de arquivo que

voc est alterando para visualizar o(s) editor(es) existente(s).


3 Na lista Editores, selecione o editor que voc deseja alterar e siga um destes procedimentos:

Clique nos botes Adicionar (+) ou Excluir () acima da lista Editores para adicionar ou remover um editor. Clique no boto Tornar primrio para alterar qual editor ser iniciado por padro na edio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 246


Adio de contedo a pginas

Aplicao de comportamentos s imagens


Voc pode aplicar qualquer comportamento disponvel a uma imagem ou ponto ativo de imagem. Quando voc aplica um comportamento a um ponto ativo, o Dreamweaver insere o cdigo-fonte HTML na tag area. Os trs comportamentos se aplicam especificamente a imagens: Pr-carregar imagens, Trocar imagens e Restaurar imagem trocada.
Pr-carregar imagens Carrega imagens que no aparecem na pgina imediatamente (como aquelas que sero trocadas

por comportamentos, elementos PA ou JavaScript) no cache de navegador. Isso evita atrasos ocasionados por download quando as imagens devem aparecer.
Trocar imagem Troca uma imagem por outra alterando o atributo SRC da tag img. Use esta ao para criar sobreposies de boto e outros efeitos de imagem (incluindo a troca de mais de uma imagem simultaneamente). Restaurar imagem trocada Restaura o ltimo conjunto de imagens trocadas para os arquivos de origem anteriores. Esta ao adicionada automaticamente sempre que voc anexa a ao Trocar imagem a um objeto por padro. Voc nunca precisar selecion-la manualmente.

Voc tambm pode usar comportamentos para criar sistemas de navegao mais sofisticados, como menus de salto.

Mais tpicos da Ajuda


Inserir um menu de salto na pgina 281 Aplicar o comportamento Trocar imagem na pgina 358 Aplicar o comportamento Pr-carregar imagens na pgina 355

Insero de arquivos SWF


Sobre os tipos de arquivos FLA, SWF e FLV
Antes de usar o Dreamweaver para inserir contedo criado com o Adobe Flash, voc deve estar familiarizado com os diferentes tipos de imagem a seguir:
O arquivo FLA (.fla) O arquivo de origem de qualquer projeto e criado na ferramenta de criao Flash. Esse tipo de

arquivo s pode ser aberto no Flash (e no no Dreamweaver ou nos navegadores). Voc pode abrir o arquivo FLA no Flash e, em seguida, export-lo como um arquivo SWF ou SWT a ser usado nos navegadores.
O arquivo SWF (.swf) Uma verso compilada do arquivo FLA (.fla), otimizada para visualizao na Web. Esse arquivo

pode ser reproduzido nos navegadores e visualizado no Dreamweaver, mas no pode ser editado no Flash.
O arquivo FLV (.flv) Um arquivo de vdeo que contm udio codificado e dados de vdeo para envio atravs do Flash Player. Por exemplo, se voc tivesse um arquivo de vdeo do QuickTime ou Windows Media, usaria um decodificador (como o Flash CS4 Video Encoder ou o Sorensen Squeeze) para converter o arquivo de vdeo em arquivo FLV. Para obter mais informaes, visite o Video Technology Center em www.adobe.com/go/flv_devcenter_br.

Mais tpicos da Ajuda


Trabalho com o Flash e Dreamweaver na pgina 378 Insero de arquivos FLV na pgina 249

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 247


Adio de contedo a pginas

Insero e visualizao de arquivos SWF


Use o Dreamweaver para adicionar arquivos SWF s suas pginas e visualiz-los em um documento ou um navegador. Voc tambm pode definir propriedades para arquivos SWF no Inspetor de propriedades. Para obter um tutorial sobre a adio de arquivos SWF s pginas da Web, consulte www.adobe.com/go/vid0150_br.

Mais tpicos da Ajuda


Trabalho com o Flash e Dreamweaver na pgina 378 Edio de um arquivo SWF do Dreamweaver no Flash na pgina 378 Os arquivos SWF e as camadas DHTML Insero de filmes Shockwave na pgina 259 Insero de arquivos FLV na pgina 249 Trabalho com o tutorial Flash

Insero de um arquivo SWF


1 Na Visualizao de design da janela Documento, coloque o ponto de insero no local em que deseja inserir o

contedo e siga um destes procedimentos:

Na categoria Comum do painel Inserir, selecione Mdia e clique no cone SWF Selecione Inserir > Mdia > SWF.
2 Na caixa de dilogo exibida, selecione um arquivo SWF (.swf).

Um alocador de espao do arquivo SWF aparece na janela Documento.

O alocador de espao possui um contorno azul com abas. A aba indica o tipo de ativo (arquivo SWF) e a ID do arquivo SWF. A aba tambm exibe um cone de olho. Atua para alternar entre o arquivo SWF e as informaes de download que os usurios vem quando no esto com a verso correta do Flash Player.
3 Salve o arquivo.

O Dreamweaver informa que dois arquivos dependentes, expressInstall.swf e swfobject_modified.js, esto sendo salvos na pasta Scripts do seu site. No esquea de carregar esses arquivos quando voc carregar o arquivo SWF para o servidor Web. Navegadores no podem exibir adequadamente os arquivos SWF, a menos que voc tambm carregue esses arquivos dependentes. Nota: O Microsoft Internet Information Server (IIS) no processa tags de objeto aninhado. Para as pginas ASP, o Dreamweaver usa o objeto aninhado/cdigo incorporado em vez do cdigo do objeto aninhado ao inserir arquivos SWF ou FLV.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 248


Adio de contedo a pginas

Edio de informaes de download do Flash Player


Quando voc insere um arquivo SWF em uma pgina, o Dreamweaver insere um cdigo que detecta se o usurio possui a verso correta do Flash Player. Em caso negativo, a pgina exibe um contedo alternativo padro que solicita que o usurio baixe a verso mais recente. Voc pode alterar este contedo alternativo a qualquer momento. Este procedimento tambm se aplica a arquivos FLV. Nota: Se um usurio no tiver a verso requerida, mas tiver o Flash Player 6.0 r65 ou posterior, o navegador exibe um instalador expresso do Flash Player. Se o usurio declinar a instalao expressa, ento a pgina exibe o contedo alternativo.
1 Na Visualizao de design da janela Documento, selecione o arquivo SWF ou FLV. 2 Clique no cone de olho da aba do arquivo SWF ou FLV.

Voc tambm pode pressionar Control + ] para alternar entre a visualizao alternativa do contedo. Para retornar visualizao de SWF/FLV, pressione Control + [ at que todo o contedo alternativo seja selecionado. Em seguida, pressione novamente Control + [.
3 Edite o contedo como voc editaria qualquer outro contedo no Dreamweaver.

Nota: Voc no pode adicionar arquivos SWF ou FLV como contedo alternativo.
4 Clique novamente no cone de olho para retornar visualizao do arquivo SWF (ou FLV).

Visualizao de arquivos SWF na janela Documento


1 Na janela Documento, clique no alocador de espao do arquivo SWF para selecionar o contedo. 2 No Inspetor de propriedades (Janela > Propriedades), clique no boto Reproduzir. Clique em Parar para encerrar

a visualizao. Voc tambm pode visualizar o arquivo SWF em um navegador pressionando F12. Para visualizar todos os arquivos SWF em uma pgina, pressione Control+Alt+Shift+P (Windows) ou Command+Option+Shift+P (Macintosh). Todos os arquivos SWF sero definidos como Reproduzir.

Definir propriedades de arquivos SWF


Voc tambm pode definir propriedades dos arquivos SWF usando o Inspetor de propriedades. As propriedade tambm se aplicam aos filmes em Shockwave.
Selecione um arquivo SWF ou um filme Shockwave e defina as opes no Inspetor de propriedades (Janela >

Propriedades). Para ver todas as propriedades, clique na seta de expanso no canto inferior direito do Inspetor de propriedades.
ID Especifica um ID exclusivo para o arquivo SWF. Digite um ID na caixa de texto sem rtulo no lado esquerdo do Inspetor de propriedades. Como com o Dreamweaver CS4, necessrio um ID exclusivo. L e A Especifica a largura e a altura do filme, em pixels. Arquivo Especifica o caminho para o arquivo SWF ou filme Shockwave. Clique no cone de pasta para navegar at um arquivo ou digite um caminho. Origem Especifica o caminho para um documento de origem (o arquivo FLA), quando o Dreamweaver e o Flash

estiverem instalados no computador. Para editar um arquivo SWF, atualize o documento de origem do filme.
Fundo Especifica uma cor de fundo para a rea do filme. Esta cor tambm aparece enquanto o filme no est sendo reproduzido (durante o carregamento e aps a reproduo). Editar Inicie o Flash para atualizar um arquivo FLA (um arquivo criado na ferramenta de criao Flash). Esta opo

estar desativada se voc no tiver o Flash instalado no computador.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 249


Adio de contedo a pginas

Classe Possibilita aplicar uma classe CSS a um filme. Repetir Faz o filme reproduzir continuamente. Quando Repetir no est selecionado, o filme reproduzido uma vez

e pra.
Execuo automtica Executa automaticamente o filme quando a pgina carregada. Espao V e Espao H Especifica o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do filme. Qualidade Controla a suavizao durante a reproduo do filme. Configuraes altas melhoram a aparncia de filmes. Entretanto, filmes com configuraes altas requerem um processador mais rpido para processar corretamente a tela. A configurao baixa favorece a velocidade em relao aparncia, enquanto a configurao alta favorece a aparncia em detrimento da velocidade. A configurao Baixa automtica inicialmente enfatiza a velocidade, mas melhora a aparncia quando possvel. Inicialmente, a configurao Alta automtica enfatiza igualmente as duas qualidades, mas sacrifica a aparncia em detrimento da velocidade, se necessrio. Escala Determina como o filme se ajusta s dimenses definidas nas caixas de texto de largura e altura. A configurao

Padro exibe o filme inteiro.


Alinhar Determina como o filme alinhado na pgina. ModoW Define o parmetro do ModoW para arquivos SWF a fim de evitar conflitos com elementos DHTML, como widgets do Spry. O valor padro Opaco, que permite que os elementos DHTML apaream sobre os arquivos SWF em um navegador. Se o arquivo SWF incluir transparncias e voc desejar que os elementos DHTML apaream por trs dele, selecione a opo Transparente. Selecione a opo Janela para remover o parmetro ModoW do cdigo e permitir que o arquivo SWF aparea sobre os outros elementos DHTML. Reproduzir Reproduz o filme na janela Documento. Parmetros Abre uma caixa de dilogo para a insero de parmetros adicionais que sero transmitidos ao filme. O

filme deve ser projetado para receber esses parmetros adicionais.

Insero de documentos do FlashPaper


O recurso Inserir FlashPaper est obsoleto no Dreamweaver CS5.

Insero de arquivos FLV


Inserir arquivos FLV
Voc pode facilmente inserir o contedo de vdeo FLV nas pginas da Web sem usar a ferramenta de criao Flash. Voc deve ter um arquivo FLV codificado antes de comear.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 250


Adio de contedo a pginas

O Dreamweaver insere o componente SWF que exibe o arquivo FLV; quando visualizado em um navegador, esse componente exibe o arquivo FLV selecionado, bem como um conjunto de controles de reproduo.

O Dreamweaver oferece as seguintes opes para enviar vdeo FLV aos visitantes do site:
Vdeo de download progressivo Baixa o arquivo FLV no disco rgido do visitante do site e o reproduz. No entanto,

diferente dos mtodos baixar e reproduzir de envio de vdeo, o download progressivo permite que o arquivo de vdeo comece a reproduo antes que o download seja concludo.
Vdeo de fluxo contnuo Transmite o contedo do vdeo e o reproduz em uma pgina da Web aps um curto perodo de buffer que garante a reproduo contnua. Para ativar o vdeo de fluxo contnuo nas pginas da Web, acesse o Adobe Flash Media Server.

Voc deve ter um arquivo FLV codificado para que possa us-lo no Dreamweaver. possvel inserir os arquivos de vdeo criados com dois tipos de codecs (tecnologias de compactao/descompactao): Sorenson Squeeze e On2. Como com arquivos SWF normais, quando voc insere um arquivo FLV, o Dreamweaver insere um cdigo que detecta se o usurio possui a verso correta do Flash Player para visualizar o vdeo. Se o usurio no tiver a verso correta, a pgina exibe o contedo alternativo que informa o usurio para baixar a verso mais recente do Flash Player. Nota: Para visualizar arquivos FLV, os usurios devem ter o Flash Player 8 ou posterior instalado em seus computadores. Se um usurio no tiver a verso requerida do Flash Player, mas tiver o Flash Player 6.0 r65 ou posterior instalado, o navegador exibe um instalador expresso do Flash Player em vez do contedo alternativo. Se o usurio declinar a instalao expressa, ento a pgina exibe o contedo alternativo. Para obter mais informaes sobre o trabalho com vdeo, visite o Video Technology Center em www.adobe.com/go/flv_devcenter_br.

Inserir um arquivo FLV


1 Selecione Inserir > Mdia > FLV. 2 Na caixa de dilogo Inserir FLV, selecione Download progressivo ou Vdeo de fluxo contnuo no menu pop-up

Tipo de vdeo.
3 Preencha o restante das opes da caixa de dilogo e clique em OK.

Nota: O Microsoft Internet Information Server (IIS) no processa tags de objeto aninhado. Para as pginas ASP, o Dreamweaver usa o objeto aninhado/cdigo incorporado em vez do cdigo do objeto aninhado ao inserir arquivos SWF ou FLV.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 251


Adio de contedo a pginas

Definio das opes do vdeo de download progressivo


A caixa de dilogo Inserir FLV permite definir opes para o envio de download progressivo de um arquivo FLV inserido em uma pgina da Web.
1 Selecione Inserir > Mdia > FLV (ou clique no cone FLV na categoria Mdia da barra de insero Comum). 2 Na caixa de dilogo Inserir FLV, selecione Vdeo de Download progressivo no menu Tipo de vdeo. 3 Escolha as seguintes opes:
URL Especifica um caminho relativo ou absoluto para o arquivo FLV. Para especificar um caminho relativo (por exemplo, mypath/myvideo.flv), clique no boto Procurar, navegue at o arquivo FLV e selecione-o. Para especificar um caminho absoluto, digite o URL (por exemplo, http://www.example.com/myvideo.flv) do arquivo FLV. Capa Especifica a aparncia do componente de vdeo. Uma visualizao da capa selecionada aparece abaixo do menu

pop-up Capa.
Largura Especifica a largura do arquivo FLV, em pixels. Para que o Dreamweaver determine a largura exata do arquivo

FLV, clique no boto Detectar tamanho. Se o Dreamweaver no puder determinar a largura, digite um valor de largura.
Altura Especifica a altura do arquivo FLV, em pixels. Para que o Dreamweaver determine a altura exata do arquivo

FLV, clique no boto Detectar tamanho. Se o Dreamweaver no puder determinar a altura, digite um valor de altura. Nota: Total com capa a largura e a altura do arquivo FLV mais a largura e a altura da capa selecionada.
Restringir Mantm a mesma proporo entre a largura e a altura do componente de vdeo. Esta opo selecionada por padro. Executar automaticamente Especifica se o vdeo ser ou no reproduzido quando a pgina da Web for aberta. Retroceder automaticamente Especifica se o controle de reproduo retornar posio inicial depois que a reproduo do vdeo terminar.

4 Clique em OK para fechar a caixa de dilogo e adicionar o arquivo FLV pgina da Web.

O comando Inserir FLV gera um arquivo SWF de video player e um arquivo SWF de capa que so utilizados para exibir o contedo de vdeo em uma pgina da Web. (Para ver os novos arquivos, talvez seja necessrio clicar no boto Atualizar no painel Arquivos.) Esses arquivos so armazenados no mesmo diretrio do arquivo HTML ao qual voc est adicionando o contedo do vdeo. Quando voc carregar a pgina HTML que possui o contedo FLV, o Dreamweaver carregar esses arquivos como arquivos dependentes (contanto que voc clique em Sim na caixa de dilogo Colocar arquivos dependentes).

Definio das opes de vdeo de fluxo contnuo


A caixa de dilogo Inserir FLV permite definir opes para o envio de download de vdeo de fluxo contnuo de um arquivo FLV inserido em uma pgina da Web.
1 Selecione Inserir > Mdia > FLV (ou clique no cone FLV na categoria Mdia da barra de insero Comum). 2 Selecione Vdeo de fluxo contnuo no menu pop-up Tipo de vdeo.
URI do servidor Especifica o nome do servidor, o nome do aplicativo e o nome da ocorrncia no formulrio

rtmp://www.example.com/app_name/instance_name.
Nome do fluxo contnuo Especifica o nome do arquivo FLV a ser reproduzido (por exemplo, myvideo.flv). A extenso

.flv opcional.
Capa Especifica a aparncia do componente de vdeo. Uma visualizao da capa selecionada aparece abaixo do menu

pop-up Capa.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 252


Adio de contedo a pginas

Largura Especifica a largura do arquivo FLV, em pixels. Para que o Dreamweaver determine a largura exata do arquivo

FLV, clique no boto Detectar tamanho. Se o Dreamweaver no puder determinar a largura, digite um valor de largura.
Altura Especifica a altura do arquivo FLV, em pixels. Para que o Dreamweaver determine a altura exata do arquivo

FLV, clique no boto Detectar tamanho. Se o Dreamweaver no puder determinar a altura, digite um valor de altura. Nota: Total com capa a largura e a altura do arquivo FLV mais a largura e a altura da capa selecionada.
Restringir Mantm a mesma proporo entre a largura e a altura do componente de vdeo. Esta opo selecionada por padro. Feed de vdeo ao vivo Especifica se o contedo do vdeo dinmico. Se a opo Feed de vdeo dinmico estiver selecionada, o Flash Player reproduzir a alimentao de vdeo dinmico com fluxo do Flash Media Server. O nome do feed de vdeo ao vivo o nome especificado na caixa de texto Nome do fluxo contnuo.

Nota: Quando voc seleciona Feed de vdeo ao vivo, somente o controle de volume aparece na capa do componente, pois no possvel manipular o vdeo ao vivo. Alm disso, as opes Executar automaticamente e Retroceder automaticamente no tm nenhum efeito.
Executar automaticamente Especifica se o vdeo ser ou no reproduzido quando a pgina da Web for aberta. Retroceder automaticamente Especifica se o controle de reproduo retornar posio inicial depois que a reproduo do vdeo terminar. Tempo de buffer Especifica o tempo, em segundos, necessrio para o armazenamento em buffer antes que o vdeo comece a ser reproduzido. O tempo de buffer padro definido para 0 a fim de que o vdeo seja reproduzido imediatamente depois que o boto Reproduzir for executado. (Se a opo Executar automaticamente for selecionada, o vdeo comear a ser reproduzido assim que uma conexo for estabelecida com o servidor.) Talvez seja necessrio definir um tempo de buffer se voc estiver enviando um vdeo que tenha uma taxa de bit superior velocidade de conexo do visitante do site ou quando houver a possibilidade de o trfego da Internet ocasionar problemas de largura de banda ou de conectividade. Por exemplo, se voc deseja enviar 15 segundos de vdeo pgina da Web antes que ela comece a reproduzir o vdeo, defina o tempo de buffer para 15.

3 Clique em OK para fechar a caixa de dilogo e adicionar o arquivo FLV pgina da Web.

O comando Inserir FLV gera um arquivo SWF de video player e um arquivo SWF de capa que so utilizados para exibir o vdeo em uma pgina da Web. O comando tambm gera um arquivo main.asc que voc deve carregar no Flash Media Server. (Para ver os novos arquivos, talvez seja necessrio clicar no boto Atualizar no painel Arquivos.) Esses arquivos so armazenados no mesmo diretrio do arquivo HTML ao qual voc est adicionando o contedo do vdeo. Ao carregar a pgina HTML que contm o contedo do vdeo Flash, no se esquea de carregar os arquivos SWF para o servidor Web e o arquivo main.asc para o Flash Media Server. Nota: Se voc j tiver um arquivo main.asc no servidor, consulte o administrador do servidor antes de carregar o arquivo main.asc gerado pelo comando Inserir FLV. Voc pode carregar facilmente todos os arquivos de mdia necessrios selecionando o alocador de espao de componente do vdeo na janela Documento do Dreamweaver e clicando no boto Carregar mdia no Inspetor de propriedades (Janela > Propriedades). Para ver uma lista dos arquivos necessrios, clique em Mostrar arquivos necessrios. Nota: O boto Carregar mdia no carrega o arquivo HTML que contm o contedo do vdeo.

Edio de informaes de download do Flash Player


Quando voc insere um arquivo FLV em uma pgina, o Dreamweaver insere um cdigo que detecta se o usurio possui a verso correta do Flash Player. Em caso negativo, a pgina exibe um contedo alternativo padro que solicita que o usurio baixe a verso mais recente. Voc pode alterar este contedo alternativo a qualquer momento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 253


Adio de contedo a pginas

Este procedimento tambm se aplica a arquivos SWF. Nota: Se um usurio no tiver a verso requerida, mas tiver o Flash Player 6.0 r65 ou posterior, o navegador exibe um instalador expresso do Flash Player. Se o usurio declinar a instalao expressa, ento a pgina exibe o contedo alternativo.
1 Na Visualizao de design da janela Documento, selecione o arquivo SWF ou FLV. 2 Clique no cone de olho da aba do arquivo SWF ou FLV.

Voc tambm pode pressionar Control + ] para alternar entre a visualizao alternativa do contedo. Para retornar visualizao de SWF/FLV, pressione Control + [ at que todo o contedo alternativo seja selecionado. Em seguida, pressione novamente Control + [.
3 Edite o contedo como voc editaria qualquer outro contedo no Dreamweaver.

Nota: Voc no pode adicionar arquivos SWF ou FLV como contedo alternativo.
4 Clique novamente no cone de olho para retornar visualizao do arquivo SWF ou FLV.

Soluo de problemas em arquivos FLV


Esta seo detalha algumas das causas de problemas mais comuns em arquivos FLV. Problemas de exibio causados pela ausncia de arquivos relacionados O cdigo gerado pelo Dreamweaver CS4 conta com quatro arquivos dependentes, diferentemente do arquivo FLV:

swfobject_modified.js expressInstall.swf FLVPlayer_Progressive.swf O arquivo de capa (por exemplo, Clear_Skin_1.swf)


Observe que existem dois arquivos dependentes a mais para o Dreamweaver CS4, em comparao com o Dreamweaver CS3. Os dois primeiros arquivos desse tipo (swfobject_modified.js e expressInstall.swf) so instalados em uma pasta chamada Scripts, que o Dreamweaver cria na raiz do site se essa pasta no existir. Os outros dois arquivos (FLVPlayer_Progressive.swf e o arquivo de capa) so instalados na mesma pasta da pgina na qual o FLV foi incorporado. O arquivo de capa contm os controles do FLV e seu nome depende da capa escolhida nas opes descritas na Ajuda do DW CS4. Por exemplo, se voc escolher Limpar capa, o arquivo ser nomeado Clear_Skin_1.swf. NECESSRIO carregar todos os quatro arquivos dependentes para que o FLV seja exibido corretamente. Esquecer de fazer upload desses arquivos a causa mais comum de falhas de execuo de arquivos FLV em pginas da web. Se um desses arquivos estiver ausente, uma "caixa branca" poder ser exibida na pgina. Para certificar-se de que voc fez uploaded de todos os arquivos dependentes, use o painel Arquivos do Dreamweaver para carregar a pgina na qual o FLV aparece. Quando voc faz upload da pgina, o Dreamweaver pergunta se voc deseja carregar os arquivos dependentes (a menos que voc tenha desativado essa opo). Clique em sim para carregar os arquivos dependentes. Problemas de exibio quando pginas so visualizadas localmente Devido s atualizaes de segurana no Dreamweaver CS4, voc no pode usar o comando Visualizao no navegador para testar uma pgina com um FLV incorporado a menos que voc defina um servidor de teste local para visualizar a pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 254


Adio de contedo a pginas

Geralmente, voc s precisar de um servidor de teste se estiver desenvolvendo pginas com ASP, ColdFusion ou PHP (consulte Configurao do computador para o desenvolvimento de aplicativo na pgina 529). Se voc estiver criando sites que usam apenas HTML e no tiver definido um servidor de teste, pressione F12 (Windows) ou Opt+F12 (Macintosh) para criar vrios controles de capa na tela. A alternativa pode ser definir um servidor de teste e us-lo para carregar arquivos em um servidor remoto e visualiz-los nesse servidor. Nota: possvel que as configuraes de segurana tambm sejam responsveis pela incapacidade de visualizar o contedo FLV local, mas isso no pode ser confirmado pela Adobe. Voc pode tentar alterar as configuraes de segurana. Para obter mais informaes sobre como alterar as configuraes de segurana, consulte Observao tcnica 117502. Outras possveis causas de problemas com arquivos FLV

Se voc estiver tendo dificuldade para visualizar arquivos localmente, verifique se a opo Visualizar usando
arquivo temporrio est desmarcada em Editar > Preferncias > Visualizar no navegador

Verifique se voc possui o plug-in mais recente do FlashPlayer Tenha cuidado ao mover arquivos e pastas fora do Dreamweaver. Quando voc move arquivos e pastas fora do
Dreamweaver, ele no garante os caminhos corretos para os arquivos relacionados ao FLV.

possvel substituir temporariamente o arquivo FLV com problemas por um arquivo FLV em boas condies. Se o
arquivo FLV de substituio funcionar, o problema est no arquivo FLV original e no no navegador ou no computador.

Editar ou excluir um componente FLV


Altere as configuraes do vdeo em sua pgina da Web selecionando o alocador de espao do componente de vdeo na janela Documento do Dreamweaver e usando o Inspetor de propriedades. Outro modo excluir o componente de vdeo e reinseri-lo, selecionando Inserir > Mdia > FLV.

Editar o componente FLV


1 Selecione o alocador de espao do componente de vdeo na janela Documento do Dreamweaver clicando no cone

FLV no centro do alocador de espao.


2 Abra o Inspetor de propriedades (Janela > Propriedades) e faa as alteraes.

Nota: Voc no pode alterar os tipos de vdeo (de download progressivo para fluxo contnuo, por exemplo) usando o Inspetor de propriedades. Para alterar o tipo de vdeo, exclua o componente FLV e reinsira-o selecionando Inserir > Mdia > FLV.

Excluir o componente FLV


Selecione o alocador de espao do componente FLV na janela Documento do Dreamweaver e pressione Excluir.

Remover cdigo de deteco de FLV


No Dreamweaver CS4 e posteriores, o Dreamweaver insere o cdigo de deteco de Flash Player diretamente na tag do objeto que contm o arquivo FLV. No Dreamweaver CS3 e anteriores, entretanto, o cdigo de deteco reside fora da tag de objeto do arquivo FLV. Por esta razo, se voc quiser excluir arquivos FLV de pginas criadas com o Dreamweaver CS3 e anteriores, ser preciso remover os arquivos FLV e usar o comando Remover deteco FLV, para remover o cdigo de deteco.
Selecione Comandos > Remover deteco do vdeo Flash.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 255


Adio de contedo a pginas

Adio de Widgets da Web


Um Widget da Web um componente de pginas da Web composto de HTML, CSS e JavaScript Exemplos de widgets da Web incluem acordeons, paineis com guias e calendrios. Voc pode fazer sua prpria seleo pessoal de widgets da Web, disponvel no Dreamweaver usando o Navegador de Widgets da Adobe, um aplicativo AIR que permite navegar, configurar e visualizar widgets usando uma interface visual. Para obter mais informaes sobre como trabalhar com o navegador de widgets da Web, consulte http://help.adobe.com/en_US/WidgetBrowser/.
1 Selecione Inserir > Widget 2 Na caixa de dilogo Widget, selecione um widget e predefina (se aplicvel) e clique em OK.

Mais tpicos da Ajuda


Funcionamento dos widgets do Spry (instrues gerais) na pgina 423

Adio de som
Formatos de arquivo de udio
Voc pode adicionar som a uma pgina da Web. Existem vrios tipos diferentes do arquivos e formatos de som, incluindo .wav, .midi e .mp3. Alguns fatores a serem considerados antes de decidir sobre um formato e um mtodo para adicionar som so objetivo, pblico-alvo, tamanho do arquivo, qualidade do som e diferenas entre navegadores. Nota: Os arquivos de som so manipulados de formas muito diferentes pelos vrios navegadores. Talvez seja necessrio adicionar um arquivo de som a um arquivo SWF e incorporar o arquivo SWF para melhorar a consistncia. A lista a seguir descreve os formatos de arquivo de udio mais comuns juntamente com algumas vantagens e desvantagens de cada um deles para o design da Web.
.midi ou .mid (Musical Instrument Digital Interface) Este formato para msica instrumental. Os arquivos MIDI so compatveis com vrios navegadores e no requerem plug-in. Embora sua qualidade de som seja muito boa, ela pode variar dependendo da placa de som de um visitante. Um arquivo MIDI pequeno pode fornecer um clipe de som longo. Os arquivos MIDI no podem ser registrados e devem ser sintetizados em um computador com hardware e software especiais. .wav (Waveform Extension) Estes arquivos tm boa qualidade de som, so compatveis com vrios navegadores e no requerem plug-in. Voc pode gravar seus prprios arquivos WAV de um CD, uma fita, um microfone etc. No entanto, o tamanho de arquivo grande limita seriamente o tamanho dos clipes de som que voc pode usar nas pginas da Web. .aif (Audio Interchange File Format, or AIFF) O formato AIFF, como o formato WAV, tem uma boa qualidade de som, pode ser reproduzido pela maioria dos navegadores e no requer plug-in. Voc tambm pode gravar arquivos AIFF de um CD, uma fita, um microfone etc. No entanto, o tamanho de arquivo grande limita seriamente o tamanho dos clipes de som que voc pode usar nas pginas da Web. .mp3 (Motion Picture Experts Group Audio ou MPEG-Audio Layer-3) Um formato compactado que tornar os arquivos

de som consideravelmente menores. A qualidade do som muito boa: se um arquivo mp3 for gravado e compactado corretamente, sua qualidade poder competir com a qualidade oferecida por um CD. A tecnologia mp3 permite transmitir o arquivo de modo que um visitante no precise esperar o download do arquivo inteiro para ouvi-lo. No entanto, o tamanho de arquivo maior do que de um arquivo Real Audio. Portanto, uma msica inteira ainda poder

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 256


Adio de contedo a pginas

demorar bastante tempo para ser baixada em uma conexo de modem dial-up comum (linha telefnica). Para reproduzir arquivos mp3, os visitantes devem baixar e instalar um aplicativo de ajuda ou plug-in, como o QuickTime, Windows Media Player ou RealPlayer.
.ra, .ram, .rpm ou Real Audio Este formato tem um alto grau de compactao, com tamanhos de arquivo menores do

que mp3. Arquivos de msica inteiros podem ser baixados em um perodo de tempo razovel. Como os arquivos podem ser transmitidos de um servidor Web normal, os visitantes podem comear a ouvir o som antes que o arquivo seja completamente baixado. Os visitantes devem baixar e instalar o plug-in ou aplicativo de ajuda RealPlayer para reproduzir esses arquivos.
.qt, .qtm, .mov ou QuickTime Este formato um formato de udio e vdeo desenvolvido pela Apple Computer. O QuickTime est includo em sistemas operacionais Apple Macintosh e usado pela maioria dos aplicativos Macintosh que usam udio, vdeo ou animao. Os PCs tambm podem reproduzir arquivos no formato do QuickTime, mas precisam de um driver especial do QuickTime. O QuickTime oferece suporte a maioria dos formatos de codificao, incluindo Cinepak, JPEG e MPEG.

Nota: Alm dos formatos mais comuns listados anteriormente, h vrios formatos de arquivo de udio e vdeo diferentes disponveis para uso na Web. Se voc encontrar um formato de arquivo de mdia com o qual no esteja familiarizado, localize o criador do formato para obter informaes sobre qual a melhor forma de us-lo e implant-lo.

Mais tpicos da Ajuda


Insero e edio de objetos de mdia na pgina 257

Vinculao a um arquivo de udio


A vinculao a um arquivo de udio uma maneira simples e eficaz de adicionar som a uma pgina da Web. Este mtodo de incorporao de arquivos de som permite que os visitantes decidam se desejam ouvir o arquivo e disponibiliza o arquivo para o pblico-alvo mais amplo.
1 Selecione o texto ou a imagem que deseja usar como vnculo para o arquivo de udio. 2 No Inspetor de propriedades, clique no cone de pasta ao lado da caixa de texto Link para navegar at o arquivo de

udio ou digite o caminho e nome do arquivo na caixa de texto Link.

Incorporao de um arquivo de som


A incorporao do udio insere o som diretamente na pgina, mas o som s ser executado se os visitantes do site tiverem o plug-in apropriado para o arquivo de som escolhido. Incorpore arquivos se voc deseja usar o som como msica de fundo ou se deseja controlar o volume, a aparncia do player na pgina, ou os pontos de incio e fim do arquivo de som. Ao incorporar arquivos de som nas pginas da Web, reflita cuidadosamente sobre o uso apropriado no site e como os visitantes do site usam esses recursos de mdia. Sempre fornea um controle para ativar ou desativar a reproduo do som, caso esse visitantes no desejem ouvir o contedo do udio.
1 Na Visualizao de design, coloque o ponto de insero no local onde deseja incorporar o arquivo e siga um destes

procedimentos:

Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone Plug-in Selecione Inserir > Mdia > Plug-in.
2 Navegue at o arquivo de udio e clique em OK.

no menu pop-up.

3 Digite a largura e a altura inserindo os valores nas caixas de texto apropriadas do Inspetor de propriedades ou

redimensionando o alocador de espao de plug-in na janela Documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 257


Adio de contedo a pginas

Esses valores determinam o tamanho em que os controles de udio so exibidos no navegador.

Mais tpicos da Ajuda


Insero do contedo de plug-in do Netscape Navigator na pgina 260

Adio de outros objetos de mdia


Insero e edio de objetos de mdia
Alm de poder inserir objetos SWF e FLV, voc pode inserir filmes QuickTime ou Shockwave, applets Java, controles ActiveX ou outros objetos de udio ou vdeo em um documento do Dreamweaver. Se voc inseriu atributos de acessibilidade com um objeto de mdia, poder definir atributos de acessibilidade e editar esses valores no cdigo HTML.
1 Coloque o ponto de insero na janela documento em que deseja inserir o objeto. 2 Insira o objeto seguindo um destes procedimentos:

Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone referente ao tipo de objeto a ser
inserido.

Selecione o objeto apropriado no submenu Inserir > Mdia. Se o objeto que voc deseja inserir no for um Shockwave, Applet ou ActiveX, selecione Plug-in no submenu
Inserir > Mdia. Uma caixa de dilogo ser exibida, permitindo que voc selecione um arquivo de origem e especifique determinados parmetros para o objeto de mdia. Para evitar que essas caixas de dilogo apaream, selecione Editar > Preferncias > Geral (Windows) ou Dreamweaver > Preferncias > Geral (Macintosh) e desmarque a opo Mostrar caixa de dilogo ao inserir objetos. Para anular qualquer preferncia definida para a exibio de caixas de dilogo, mantenha pressionada a tecla Control (Windows) ou Option (Macintosh) enquanto insere o objeto. (Por exemplo, para inserir um alocador de espao de um filme Shockwave sem especificar o arquivo, mantenha pressionada a tecla Control ou Option e clique no boto Shockwave, no menu pop-up Mdia, do painel Insero Comum, ou selecione Inserir > Mdia > Shockwave.)
3 Complete a caixa de dilogo Selecionar arquivo e clique em OK.

Nota: A caixa de dilogo Atributos de acessibilidade exibida se voc tiver optado por mostrar atributos ao inserir a mdia na caixa de dilogo Editar > Preferncias.
4 Defina os atributos de acessibilidade.

Nota: Voc tambm pode editar os atributos do objeto de mdia selecionando o objeto e editando o cdigo HTML na Visualizao de cdigo, ou clicando com o boto direito do mouse (Windows) ou mantendo a tecla Control pressionada enquanto clica (Macintosh), e selecionando Editar cdigo de tag.
Ttulo Digite um ttulo para o objeto de mdia. Chave de acesso Digite um equivalente de teclado (uma letra) na caixa de texto para selecionar o objeto de formulrio

no navegador. Isso permite que um visitante do site use a tecla Control (Windows) com a tecla de acesso para acessar o objeto. Por exemplo, se voc digitar B como tecla de acesso, use Control+B para selecionar o objeto no navegador.
ndice de abas Digite um nmero para a ordem de abas do objeto de formulrio. A definio de uma ordem de abas til quando h outros links e objetos de formulrio na pgina e o usurio precisa percorrer esses itens em uma ordem especfica. Se voc definir a ordem das abas de um objeto, no deixe de definir essa ordem para todos eles.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 258


Adio de contedo a pginas

5 Clique em OK para inserir o objeto de mdia.

Nota: Se voc clicar em Cancelar, um alocador de espao de objeto de mdia aparecer no documento, mas o Dreamweaver no associar tags ou atributos de acessibilidade a ele. Para especificar um arquivo de origem ou definir dimenses e outros parmetros e atributos, use o Inspetor de propriedades para cada objeto. Voc pode editar os atributos de acessibilidade de um objeto.

Mais tpicos da Ajuda


Otimizar o espao de trabalho tendo em vista um design de pgina acessvel na pgina 689 Insero do contedo de plug-in do Netscape Navigator na pgina 260

Iniciar um editor externo para arquivos de mdia


Voc pode iniciar um editor externo no Dreamweaver para editar a maioria dos arquivos de mdia. Tambm possvel especificar o editor que o Dreamweaver iniciar para editar o arquivo.
1 Verifique se o tipo de arquivo de mdia est associado a um editor no sistema.

Para descobrir que editor est associado ao tipo de arquivo, selecione Editar > Preferncias no Dreamweaver e selecione Tipos de arquivos/editores na lista Categoria. Clique na extenso do arquivo na coluna Extenses para visualizar o(s) editor(es) associado(s) na coluna Editores. Voc pode alterar o editor associado a um tipo de arquivo.
2 Clique duas vezes no arquivo de mdia no painel Arquivos para abri-lo no editor externo.

O editor iniciado quando voc clica duas vezes no arquivo no painel Arquivos chamado editor principal. Se voc clicar duas vezes em um arquivo de imagem, por exemplo, o Dreamweaver abrir o arquivo no editor externo de imagem principal como Adobe Fireworks.
3 Se voc no deseja usar o editor externo principal para editar o arquivo, poder usar outro editor no sistema para

editar o arquivo seguindo um destes procedimentos.

No painel Arquivos, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control
enquanto clica (Macintosh) no nome de arquivo e selecione Abrir com no menu de contexto.

Na Visualizao de design, clique o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control
enquanto clica (Macintosh) no elemento de mdia na pgina atual, e selecione Editar com no menu de contexto.

Especificao do editor para ser iniciado no Dreamweaver


Voc pode especificar o editor que o Dreamweaver deve usar para editar um tipo de arquivo e adicionar ou excluir tipos de arquivo que o Dreamweaver reconhea.

Especificao explcita de quais editores externos devem ser iniciados em um determinado tipo de arquivo
1 Selecione Editar > Preferncias e, em seguida, selecione Tipos de arquivos/editores na lista Categoria.

Extenses de nome de arquivo, como .gif, .wav e .mpg, so listadas esquerda, abaixo de Extenses. Os editores associados de uma extenso selecionada so listados direita, abaixo de Editores.
2 Selecione a extenso de tipo de arquivo na lista Extenses e siga um destes procedimentos:

Para associar um novo editor ao tipo de arquivo, clique no boto de adio (+) acima da lista Editores e preencha
a caixa de dilogo exibida. Por exemplo, selecione o cone de aplicativo para que o Acrobat o associe ao tipo de arquivo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 259


Adio de contedo a pginas

Para tornar um editor o editor principal para um tipo de arquivo (ou seja, o editor que aberto quando voc clica
duas vezes no tipo de arquivo no painel Arquivos), selecione o editor na lista Editores e clique em Tornar primrio.

Para dissociar um editor de um tipo de arquivo, selecione o editor na lista Editores e clique no boto de subtrao
(-) acima da lista Editores.

Adio de um novo tipo de arquivo e editor associado


1 Clique no boto de adio (+) acima da lista Extenses e digite uma extenso de tipo de arquivo (incluindo o ponto

no incio da extenso) ou vrias extenses relacionadas separadas por espaos. Por exemplo, voc poderia digitar .xml .xsl se quisesse associ-los a um editor XML instalado no sistema.
2 Selecione um editor para o tipo de arquivo clicando no boto de adio (+) acima da lista Editores e preenchendo

a caixa de dilogo exibida.

Remoo de um tipo de arquivo


Selecione o tipo de arquivo na lista Extenses e clique no boto de subtrao (-) acima da lista Extenses.

Nota: No possvel desfazer a remoo de um tipo de arquivo. Portanto, preciso ter a certeza de que deseja remov-lo.

Uso das Design Notes com objetos de mdia


Assim como com outros objetos do Dreamweaver, voc pode adicionar Design Notes a um objeto de mdia. As Design Notes so notas associadas a um arquivo especfico que so armazenadas em um arquivo separado. Voc pode usar as Design Notes para controlar as informaes de arquivo extras associadas aos documentos, como nomes de arquivo de origem de imagem e comentrios sobre status de arquivos.
1 Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica

(Macintosh) no objeto na janela Documento. Nota: Voc deve definir o site antes de adicionar as Design Notes a qualquer objeto.
2 Selecione Design Notes da pgina no menu de contexto. 3 Digite as informaes desejadas na Design Note.

Voc tambm pode adicionar uma Design Note a um objeto de mdia no painel Arquivos selecionando o arquivo, revelando o menu de contexto e escolhendo as Design Notes no menu de contexto.

Mais tpicos da Ajuda


Ativar e desativar as Design Notes para um site na pgina 104 Armazenamento de informaes de arquivo em Design Notes na pgina 103

Insero de filmes Shockwave


Voc pode usar o Dreamweaver para inserir filmes Shockwave nos documentos. O Adobe Shockwave, um padro para multimdia interativa na Web, um formato compactado que permite que os arquivos de mdia criados no Adobe Director sejam baixados rapidamente e reproduzidos pelos navegadores mais populares.
1 No janela Documento, coloque o ponto de insero no local em que deseja inserir um filme Shockwave e siga um

destes procedimentos:

Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone Shockwave Selecione Inserir > Mdia > Shockwave.

no menu pop-up.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 260


Adio de contedo a pginas

2 Na caixa de dilogo exibida, selecione um arquivo de filme. 3 No Inspetor de propriedades, digite a largura e a altura do filme nas caixas de texto L e A.

Mais tpicos da Ajuda


Definir propriedades de arquivos SWF na pgina 248

Adio de vdeo (no-FLV)


Voc pode adicionar vdeo pgina da Web de diferentes formas e usando diferentes formatos. O vdeo pode ser baixado para o usurio ou pode ser transmitido de modo que seja reproduzido durante o download.
1 Coloque o clipe na pasta do site.

Esse clipes esto geralmente no formato de arquivo AVI ou MPEG.


2 Vincule-se ao clipe ou incorpore-o na pgina.

Para vincular o clipe, digite um texto para o link, como Clipe de Download, selecione o texto e clique no cone de pasta no Inspetor de propriedades. Navegue at o arquivo de vdeo e selecione-o. Nota: O usurio deve baixar um aplicativo de ajuda (um plug-in) para visualizar formatos comuns de fluxo contnuo, como Real Media, QuickTime e Windows Media.

Insero do contedo de plug-in do Netscape Navigator


Voc pode criar um contedo como um filme QuickTime para um plug-in do Netscape Navigator e, em seguida, usar o Dreamweaver para inserir esse contedo em um documento HTML. Os plug-ins mais comuns so RealPlayer e QuickTime, ao passo que alguns arquivos de contedo incluem mp3s e filmes QuickTime. Voc pode visualizar filmes e animaes que se baseiam nos plug-ins do Netscape Navigator diretamente na Visualizao de design da janela Documento. possvel reproduzir todos os elementos de plug-in simultaneamente para ver como a pgina aparecer para o usurio ou reproduzir cada um individualmente para garantir que voc incorporou o elemento de mdia correto. Nota: Voc no pode visualizar filmes ou animaes que se baseiam em controles ActiveX. Aps a insero do contedo para um plug-in do Netscape Navigator, use o Inspetor de propriedades para definir parmetros para esse contedo. Para visualizar as propriedades a seguir no Inspetor de propriedades, selecione um objeto de plug-in do Netscape Navigator. Inicialmente, o Inspetor de propriedades exibe as propriedades mais utilizadas. Clique na seta de expanso no canto inferior direito para ver todas as propriedades.

Insero do contedo de plug-in do Netscape Navigator e definio de suas propriedades


1 Na Visualizao de design da janela Documento, coloque o ponto de insero no local em que deseja inserir o

contedo e siga um destes procedimentos:

Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone Plug-in Selecione Inserir > Mdia > Plug-in.

no menu.

2 Na caixa de dilogo exibida, selecione um arquivo de contedo para um plug-in do Netscape Navigator e clique em OK. 3 Defina as opes de plug-in no Inspetor de propriedades.
Nome Especifica um nome para identificar o plug-in para script. Digite um nome na caixa de texto sem rtulo no lado esquerdo do Inspetor de propriedades.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 261


Adio de contedo a pginas

L e A Especifica, em pixels, a largura e a altura alocadas para o objeto na pgina. Origem Especifica o arquivo de dados de origem. Clique no cone de pasta para navegar at um arquivo ou digite um

nome de arquivo.
URL do Plg Especifica o URL do atributo pluginspace. Digite o URL completo do site em que os usurios podem baixar o plug-in. Se o usurio que estiver visualizando a pgina no tiver o plug-in, o navegador tentar baix-lo a partir deste URL. Alinhar Determina como o objeto alinhado na pgina. Espao V e Espao H Especifica o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do plug-in. Borda Especifica a largura da borda em torno do plug-in. Parmetros Abre uma caixa de dilogo para a insero de parmetros adicionais que sero transmitidos ao plug-in do

Netscape Navigator. Vrios plug-ins respondem a parmetros especiais. Voc tambm pode visualizar os atributos atribudos ao plug-in selecionado clicando no boto Atributo. possvel editar, adicionar e excluir atributos como largura e altura nesta caixa de dilogo.

Reproduo do contedo de plug-in na janela Documento


1 Insira um ou mais elementos de mdia usando um dos mtodos descritos na seo anterior. 2 Siga um destes procedimentos:

Selecione um dos elementos de mdia inserido e, em seguida, selecione Exibir > Plug-ins > Reproduzir ou clique no
boto Reproduzir no Inspetor de propriedades.

Selecione Exibir > Plug-ins > Reproduzir tudo para reproduzir todos os elementos de mdia na pgina selecionada
baseada nos plug-ins. Nota: O recurso Reproduzir tudo se aplica somente ao documento atual. Ele no se aplica a outros documentos em um conjunto de quadros, por exemplo.

Interrupo da reproduo do contedo de plug-in


Selecione um elemento de mdia e, em seguida, selecione Exibir > Plug-ins > Parar ou clique no boto Parar do

Inspetor de propriedades. Voc tambm pode selecionar Exibir > Plug-ins > Para tudo para interromper a reproduo de todo o contedo de plug-in.

Soluo de problemas dos plug-ins do Netscape Navigator


Se voc seguiu as etapas de reproduo do contedo de plug-in na janela Documento, mas ainda no consegue reproduzir algum contedo, tente o seguinte:

Verifique se o plug-in associado est instalado no computador e se o contedo compatvel com a verso do plugin que voc tem.

Abra o arquivo Configuration/Plugins/UnsupportedPlugins.txt em um editor de texto e verifique se o plug-in


problemtico est listado. Esse arquivo controla os plug-ins que ocasionam problemas no Dreamweaver e que, portanto, no recebem suporte. (Se voc est com problemas em um plug-in especfico, recomendvel adicionlo a esse arquivo.)

Verifique se h memria suficiente. Alguns plug-ins requerem mais 2 a 5 MB de memria para serem executados.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 262


Adio de contedo a pginas

Insero de um controle ActiveX


Voc pode inserir um controle ActiveX na pgina. Os controles ActiveX (conhecidos antigamente como controles OLE) so componentes reutilizveis, assim como os aplicativos em miniatura, que podem atuar como plug-ins de navegador. Eles so executados no Internet Explorer com o Windows, mas no podem ser executados no Macintosh ou Netscape Navigator. O objeto ActiveX no Dreamweaver permite a voc fornecer atributos e parmetros a um controle ActiveX no navegador do visitante. Aps a insero de um objeto ActiveX, use o Inspetor de propriedades para definir atributos da tag object e parmetros para o controle ActiveX. Clique em Parmetros no Inspetor de propriedades para digitar nomes e valores para as propriedades que no aparecem no Inspetor de propriedades. No h nenhum formato padro amplamente aceito para os parmetros dos controles ActiveX. Para descobrir quais parmetros devem ser usados, consulte a documentao do controle ActiveX que voc est usando.
No janela Documento, coloque o ponto de insero no local em que deseja inserir o contedo e siga um destes

procedimentos:

Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone ActiveX
exibido no painel Inserir, voc pode arrastar o cone para a janela Documento.

Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone ActiveX . Com o cone ActiveX Selecione Inserir > Mdia > ActiveX. Um cone marca o local da pgina em que o controle ActiveX aparecer no
Internet Explorer.

Propriedades do ActiveX
Inicialmente, o Inspetor de propriedades exibe as propriedades mais utilizadas. Clique na seta de expanso no canto inferior direito para ver todas as propriedades.
Nome Especifica um nome para identificar o objeto ActiveX para script. Digite um nome na caixa de texto sem rtulo no lado esquerdo do Inspetor de propriedades. L e A Especifica a largura e a altura do objeto, em pixels. ID da classe Identifica o controle ActiveX para o navegador. Digite um valor ou selecione um no menu pop-up. Quando a pgina carregada, o navegador usa a ID da classe para localizar o controle ActiveX necessrio ao objeto ActiveX associado pgina. Se o navegador no localizar o controle ActiveX especificado, ele tentar baix-lo no local especificado em Base. Incorporar Adiciona uma tag embed tag object do controle ActiveX. Se o controle ActiveX tiver um equivalente do plug-in do Netscape Navigator, a tag embed ativar o plug-in. O Dreamweaver atribui os valores digitados como propriedades do ActiveX aos equivalentes de plug-in do Netscape Navigator. Alinhar Determina como o objeto alinhado na pgina. Parmetros Abre uma caixa de dilogo para a insero de parmetros adicionais que sero transmitidos ao objeto

ActiveX. Vrios controles ActiveX respondem a parmetros especiais.


Origem Define o arquivo de dados a ser usado para um plug-in do Netscape Navigator se a opo Incorporar estiver

ativada. Se voc no digitar um valor, o Dreamweaver tentar determinar o valor das propriedades do ActiveX j digitadas.
Espao V e Espao H Especifica o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do objeto. Base Especifica o URL que contm o controle do ActiveX. O Internet Explorer baixar o controle ActiveX nesse local caso ele ainda no tenha sido instalado no sistema do visitante. Se voc no especificar um parmetro Base e o visitante ainda no tiver o controle ActiveX relevante instalado, o navegador no poder exibir o objeto ActiveX.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 263


Adio de contedo a pginas

Alt Img Especifica uma imagem a ser exibida se o navegador no oferecer suporte tag object. Esta opo estar disponvel somente quando a opo Incorporar estiver desmarcada. Dados Especifica um arquivo de dados para o controle ActiveX carregar. Vrios controles ActiveX, como Shockwave

e RealPlayer, no usam este parmetro.

Insero de um applet Java


Voc pode inserir um applet Java em um documento HTML usando o Dreamweaver. Java uma linguagem de programao que permite o desenvolvimento de aplicativos leves (applets) que podem ser incorporados nas pginas da Web. Aps a insero de um applet Java, use o Inspetor de propriedades para definir parmetros. Para visualizar as propriedades a seguir no Inspetor de propriedades, selecione um applet Java.
1 No janela Documento, coloque o ponto de insero no local em que deseja inserir o applet e siga um destes

procedimentos:

Na categoria Comum do painel Inserir, clique no boto Mdia e selecione o cone Applet Selecione Inserir > Mdia > Applet.
2 Selecione um arquivo que contm um applet Java.

Propriedades do applet Java


Inicialmente, o Inspetor de propriedades exibe as propriedades mais utilizadas. Clique na seta de expanso no canto inferior direito para ver todas as propriedades.
Nome Especifica um nome para identificar o applet para script. Digite um nome na caixa de texto sem rtulo no lado esquerdo do Inspetor de propriedades. L e A Especifica a largura e a altura do applet, em pixels. Code Especifica o arquivo que contm o cdigo Java do applet. Clique no cone de pasta para navegar at um arquivo ou digite um nome de arquivo. Base Identifica a pasta que contm o applet selecionado. Quando voc seleciona um applet, esta caixa de texto preenchida automaticamente. Alinhar Determina como o objeto alinhado na pgina. Alt Especifica o contedo alternativo (geralmente, uma imagem) a ser exibido se o navegador do usurio no oferecer

suporte a applets Java ou estiver com Java desativado. Se voc digitar texto, o Dreamweaver inserir o texto como o valor do atributo alt do applet. Se voc selecionar um imagem, o Dreamweaver inserir uma tag img entre as tags applet de abertura e fechamento. Nota: Para especificar o contedo alternativo que pode ser visualizado no Netscape Navigator (com Java desativado) e no Lynx (um navegador baseado em texto), selecione uma imagem e adicione manualmente um atributo alt tag img no Inspetor de cdigo.
Espao V e Espao H Especifica o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do applet. Parmetros Abre uma caixa de dilogo para a insero de parmetros adicionais que sero transmitidos ao applet.

Vrios applets respondem a parmetros especiais.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 264


Adio de contedo a pginas

Uso de comportamentos para controlar mdia


Voc pode adicionar comportamentos pgina para iniciar e interromper vrios objetos de mdia.
Controlar Shockwave ou Flash Reproduza, interrompa, retroceda ou v para um quadro em um filme Shockwave ou

arquivo SWF.
Tocar som Permite reproduzir um som; por exemplo, voc pode reproduzir um efeito de som sempre que o usurio

move o ponteiro do mouse sobre um link.


Verificar plug-in Permite verificar se os visitantes do site tm o plug-in necessrio instalado e, em seguida, os roteiam

a diferentes URLs, dependendo o plug-in dos visitantes. Isso se aplica somente a plug-ins do Netscape Navigator, j que o comportamento Verificar plug-in no verifica controles ActiveX.

Mais tpicos da Ajuda


Aplicar o comportamento Controlar Shockwave ou SWF na pgina 351 Aplicar o comportamento Tocar som na pgina 354 Aplicar o comportamento Verificar plug-in na pgina 350

Uso de parmetros para controlar objetos de mdia


Defina parmetros especiais para controlar arquivos Shockwave e SWF, controles ActiveX, plug-ins do Netscape Navigator e applets Java. Os parmetros so usados com as tags object, embed e applet. Os parmetros definem atributos especficos a diferentes tipos de objetos. Por exemplo, um arquivo SWF pode usar um parmetro de qualidade <paramname="quality"value="best"> para a tag do objeto. A caixa de dilogo Parmetro est disponvel no Inspetor de propriedades. Consulte a documentao do objeto que voc est usando para obter informaes sobre os parmetros necessrios. Nota: No h um padro amplamente aceito para a identificao de arquivos de dados para controles ActiveX. Consulte a documentao do controle ActiveX que voc est usando para descobrir quais parmetros devem ser utilizados.

Insero de um nome e valor para um parmetro


1 Selecione um objeto que possa ter parmetros (como filme Shockwave, controle ActiveX, plug-in do Netscape

Navigator ou applet Java) na janela Documento.


2 Abra a caixa de dilogo usando um dos mtodos a seguir:

Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica
(Macintosh) no objeto e selecione Parmetros no menu de contexto.

Abra o Inspetor de propriedades caso ele ainda no esteja aberto e clique no boto Parmetros localizado na metade
inferior do Inspetor de propriedades. (Verifique se o Inspetor de propriedades est expandido.)
3 Clique no boto de adio (+) e digite o nome e valor de parmetro nas colunas apropriadas.

Remoo de um parmetro
Selecione um parmetro e pressione o boto de subtrao ().

Reordenao de parmetros
Selecione um parmetro e use os botes de seta para cima e para baixo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 265


Adio de contedo a pginas

Automao de tarefas
Automao de tarefa
O painel Histrico registra as etapas que voc executa ao concluir uma tarefa. Automatize uma tarefa realizada freqentemente executando novamente essas etapas no painel Histrico ou criando um novo comando que realiza as etapas automaticamente. Determinados movimentos do mouse como, por exemplo, de seleo clicando na janela Documento no podem ser reproduzidos ou salvos. Quando voc faz um movimento desses, uma linha preta exibida no painel Histrico (a linha no fica evidente at que voc realize outra ao). Para evitar isso, use as teclas de seta em lugar do mouse a fim de mover o ponto de insero dentro da janela Documento Outras etapas tambm no podem ser repetidas como, por exemplo, arrastar um elemento de pgina para outro lugar da pgina. Quando voc realiza uma etapa dessas, um cone com um pequeno X vermelho exibido no painel Histrico. Os comandos salvos so mantidos permanentemente (a menos que voc os exclua), ao passo que os comandos registrados so descartados quando voc sai do Adobe Dreamweaver CS5, e as seqncias copiadas de etapas so descartadas quando voc copia algo

Usar o painel Histrico


O painel Histrico (Janela > Histrico) mostra uma lista das etapas que voc realizou no documento ativo desde a criao ou a abertura do documento (mas no as etapas que voc realizou em outros quadros, em outras janelas Documento ou no painel Site). Use o painel Histrico para desfazer vrias etapas simultaneamente e para automatizar tarefas.

B A

D E

A. Controle deslizante (miniatura) B. Etapas C. Boto Reexecutar D. Boto Copiar etapas E. Boto Comando Salvar como

O controle deslizante, ou miniatura, do painel Histrico aponta inicialmente para ltima etapa que voc realizou. Nota: Voc no pode reorganizar a ordem das etapas no painel Histrico. No veja o painel Histrico como um conjunto arbitrrio de comandos, e sim como uma forma de exibir as etapas que voc realizou na ordem em que as realizou.

Desfazer a ltima etapa


Siga um destes procedimentos:

Selecione Editar > Desfazer. Arraste o controle deslizante do painel Histrico at uma etapa na lista.
Nota: Para rolar automaticamente at uma determinada etapa, voc deve clicar esquerda dela; o clique na etapa propriamente dita a seleciona. A seleo de uma etapa diferente do retorno a essa etapa no histrico de etapas desfeitas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 266


Adio de contedo a pginas

Desfazer vrias etapas simultaneamente


Arraste o controle deslizante at apontar para uma etapa ou clique esquerda dela no caminho do controle

deslizante. O controle deslizante rola automaticamente at a etapa, desfazendo as etapas em meio rolagem. Nota: Assim como ao desfazer uma nica etapa, caso desfaa uma srie de etapas e, em seguida, faa algo novo no documento, voc no pode mais refazer as etapas desfeitas; elas desaparecem do painel Histrico.

Definir o nmero de etapas que o painel Histrico mantm e mostra


O nmero padro de etapas suficiente para a maior parte das necessidades do usurio. Quanto maior for o nmero, mais memria o painel Histrico exigir, o que pode afetar o desempenho e tornar o computador bem mais lento.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione Geral na lista Categoria esquerda. 3 Digite um nmero para Nmero mximo de etapas do histrico.

Quando o painel Histrico chega ao nmero mximo de etapas, as etapas iniciais so descartadas.

Apagar a lista de histrico do documento atual


No menu de contexto do painel Histrico, selecione Apagar Histrico.

Esse comando tambm apaga todas as informaes para desfazer referentes ao documento atual; depois de escolher Apagar Histrico, voc no pode desfazer as etapas apagadas. Apagar Histrico no desfaz as etapas; ele apenas remove o registro das etapas da memria.

Repetir etapas
Use o painel Histrico para repetir a ltima etapa que voc realizou, repetir uma srie de etapas prximas ou repetir uma srie de etapas no prximas. Execute novamente as etapas diretamente no painel Histrico.

Repetir uma etapa


Siga um destes procedimentos:

Selecione Editar > Refazer. No painel Histrico, selecione uma etapa e clique no boto Reexecutar. A etapa executada novamente, e uma
cpia dela exibida no painel Histrico.

Repetir uma srie de etapas


1 Selecione as etapas no painel Histrico:

Para selecionar etapas prximas, arraste de uma etapa para outra (no arraste o controle deslizante; basta arrastar
do rtulo do texto de uma etapa para o rtulo do texto de outra etapa) ou selecione a primeira e, em seguida, clique com a tecla Shift pressionada na etapa mais recente.

Para selecionar etapas no prximas, selecione uma etapa e, em seguida, clique com a tecla Control pressionada
(Windows) ou Command (Macintosh) para marcar ou desmarcar as demais etapas. As etapas executadas so as selecionadas (realadas), e no necessariamente a etapa para a qual o controle deslizante aponta no momento. Nota: Embora voc possa selecionar uma srie de etapas que incluem uma linha preta indicando que uma etapa no pode ser registrada, essa etapa ignorada quando voc executa novamente as etapas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 267


Adio de contedo a pginas

2 Clique em Executar novamente.

As etapas so executadas novamente na ordem, e uma nova etapa, Executar etapas novamente, exibida no painel Histrico.

Fazer ou estender uma seleo


Mantenha pressionada a tecla Shift ao pressionar uma tecla de seta.

Caso uma linha preta indicadora de movimento do mouse seja exibida enquanto voc realiza uma tarefa que deseja repetir depois, possvel desfaz-la e tentar outra abordagem, talvez usando as teclas de seta.

Aplicar etapas do painel Histrico a objetos


Voc pode aplicar um conjunto de etapas do painel Histrico para qualquer objeto na janela Documento. Caso voc selecione vrios objetos e, em seguida, aplique as etapas a eles no painel Histrico, os objetos so tratados como uma seleo nica e o Dreamweaver tenta aplicar as etapas a essa seleo combinada; no entanto, voc pode aplicar um conjunto de etapas a apenas um objeto por vez. Para aplicar as etapas a todos os objetos de um conjunto, voc deve fazer com que a ltima etapa da srie selecione o prximo objeto do conjunto. O segundo procedimento demonstra esse princpio em um cenrio especfico: a definio do espao vertical e horizontal de uma srie de imagens.

Aplicar etapas a um outro objeto


1 Selecione o objeto. 2 Selecione as etapas relevantes no painel Histrico e clique em Executar novamente.

Aplicar etapas a vrios objetos


1 Comece com um documento no qual cada linha consiste em uma pequena imagem (como, por exemplo, um

marcador grfico ou um cone) seguida de texto. O objetivo suprimir as imagens do texto e das demais imagens acima e abaixo delas.

2 Abra o Inspetor de propriedades (Janela > Propriedades), caso ele ainda no esteja aberto. 3 Selecione a primeira imagem. 4 No Inspetor de propriedades, digite os nmeros nas caixas Espao V e Espao H para definir o espaamento da

imagem.
5 Clique na imagem novamente para ativar a janela Documento sem mover o ponto de insero. 6 Pressione a tecla Seta esquerda para mover o ponto de insero esquerda da imagem. 7 Pressione a tecla Seta abaixo para mover o ponto de insero abaixo da linha, deixando-o esquerda da segunda

imagem da srie.
8 Pressione Shift+Seta direita para selecionar a segunda imagem.

Nota: No selecione a imagem clicando nela, ou voc no poder repetir todas as etapas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 268


Adio de contedo a pginas

9 No painel Histrico, selecione as etapas que correspondem alterao do espaamento da imagem e seleo da

prxima imagem. Clique em Executar novamente para repetir essas etapas.

O espaamento da imagem atual alterado e a prxima imagem selecionada.

10 Continue clicando em Executar novamente at que todas as imagens sejam espaadas corretamente.

Copiar e colar etapas entre documentos


Cada documento aberto tem seu prprio histrico de etapas. Voc pode copiar etapas de um documento e col-las em outro. O fechamento de um documento apaga seu histrico. Caso saiba que voc usar etapas de um documento mais tarde, copie ou salve as etapas antes de fech-lo.
1 No documento que contm as etapas que voc deseja reutilizar, selecione as etapas no painel Histrico. 2 Clique em Copiar etapas no painel Histrico

Nota: O boto Copiar etapas do painel Histrico diferente do comando Copiar do menu Editar. Voc no pode usar Editar > Copiar para copiar etapas, embora use Editar > Colar para col-las. Tome cuidado ao copiar as etapas que incluam um comando Copiar ou Colar:

No use Copiar etapas caso uma das etapas seja um comando Copiar; talvez voc no consiga col-las da forma que
deseja.

Caso as etapas incluam um comando Colar, voc no pode col-las, a menos que elas tambm incluam um
comando Copiar antes do comando Colar.
3 Abra o outro documento. 4 Coloque o ponto de insero onde voc deseja ou selecione um objeto ao qual aplicar as etapas. 5 Selecione Editar > Colar.

As etapas so reproduzidas na medida em que so coladas no painel Histrico do documento. O painel Histrico mostra as etapas como uma s, chamada Colar etapas. Caso voc tenha colado as etapas em um editor de textos, na Visualizao de cdigo ou no Inspetor de cdigo, elas so exibidas como cdigo JavaScript. Isso pode ser til no aprendizado sobre como escrever scripts prprios.

Mais tpicos da Ajuda


Gravao e edio do cdigo na pgina 304

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 269


Adio de contedo a pginas

Criar e usar comandos das etapas do histrico


Salve um conjunto de etapas do histrico como um comando nomeado, que se torna disponvel no menu Comandos. Crie e salve um novo comando caso voc possa usar um conjunto de etapas novamente, especialmente na prxima vez em que iniciar o Dreamweaver.

Criar um comando
1 Selecione uma etapa ou um conjunto de etapas no painel Histrico. 2 Clique no boto Comando Salvar como ou selecione Comando Salvar como no menu de contexto do painel

Histrico.
3 Digite um nome para o comando e clique em OK.

O comando exibido no menu Comandos. Nota: O comando salvo como um arquivo JavaScript (ou, s vezes, um arquivo em HTML) na pasta Dreamweaver/Configurao/Comandos. Caso voc esteja usando o Dreamweaver em um sistema operacional com vrios usurios, o arquivo salvo na pasta Comandos do usurio especfico.

Usar um comando salvo


1 Selecione um objeto ao qual aplicar o comando ou coloque o ponto de insero onde voc deseja aplicar o comando. 2 Selecione o comando no menu Comandos.

Editar um nome de comando


1 Selecione Comandos > Editar lista de comandos. 2 Selecione um comando a ser renomeado, digite um novo nome para ele e, em seguida, clique em Fechar.

Excluir um nome do menu Comandos


1 Selecione Comandos > Editar lista de comandos. 2 Selecione um comando. 3 Clique em Excluir e, depois, clique em Fechar.

Registrar e salvar comandos


Registre um comando temporrio para uso a curto prazo ou registre e salve um comando a ser usado posteriormente. O Dreamweaver mantm apenas um comando registrado por vez; assim que voc inicia a gravao de um novo comando, o comando antigo perdido, a menos que o salve antes da gravao do novo comando.

Registrar temporariamente uma srie de etapas


1 Selecione Comandos > Iniciar Gravao ou pressione Control+Shift+X (Windows) ou Command+Shift+X

(Macintosh). O ponteiro alterado para indicar que voc est gravando um comando.
2 Quando voc concluir a gravao, selecione Comandos > Iniciar Gravao ou pressione Control+Shift+X

(Windows) ou Command+Shift+X (Macintosh).

Reproduzir um comando registrado


Selecione Comandos > Reproduzir um comando registrado ou pressione Control+Shift+R (Windows) ou

Command+Shift+R (Macintosh).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 270


Adio de contedo a pginas

Salvar um comando registrado


1 Selecione Comandos > Reproduzir um comando registrado. 2 Selecione a etapa Executar comando exibida na lista de etapas do painel Histrico e, em seguida, clique no boto

Comando Salvar como.


3 Digite um nome para o comando e clique em OK.

O comando exibido no menu Comandos.

ltima atualizao em 28/4/2010

271

Captulo 9: Vinculao e navegao


Sobre vinculao e navegao
Sobre links
Depois de configurar um site do Dreamweaver para armazenar os documentos do seu site e de criar pginas HTML, voc pode criar links dos seus documentos para outros documentos. O Dreamweaver fornece diversas maneiras para criar links com documentos, imagens, arquivos multimdia ou softwares para download. Voc pode estabelecer links para qualquer texto ou imagem em qualquer lugar de um documento, incluindo texto ou imagens de um cabealho, lista, tabela, elemento com posio absoluta (elemento PA) ou quadro. Existem diversas maneiras de criar e gerenciar links. Alguns designers da Web preferem criar links com pginas ou arquivos no existentes ao trabalharem, enquanto outros preferem criar todos os arquivos e pginas primeiro e depois adicionar os links. Outro modo de gerenciar links criar pginas de alocador de espao, nas quais voc pode adicionar e testar links antes de concluir todas as pginas do seu site.

Mais tpicos da Ajuda


Testar links no Dreamweaver na pgina 280

Caminhos absolutos, relativos a documentos e relativos raiz do site


Para criar links, essencial conhecer o caminho do arquivo entre os documentos ou ativos de origem e de destino que esto sendo vinculados. Cada pgina da Web tem um endereo exclusivo, chamado de Localizador uniforme de recursos (URL). No entanto, ao criar um link local (um link de um documento com outro no mesmo site), normalmente no necessrio especificar o URL inteiro do documento que est sendo vinculado; em vez disso, especifique um caminho relativo do documento atual ou da pasta raiz do site. Existem trs tipos de caminhos de link:

Caminhos absolutos (como http://www.adobe.com/support/dreamweaver/contents.html). Caminhos relativos a documentos (como dreamweaver/contents.html). Caminhos relativos raiz do site (como /support/dreamweaver/contents.html).
Usando o Dreamweaver, voc pode selecionar com facilidade o tipo de caminho de documento a ser criado para seus links. Nota: melhor usar o tipo de link que voc prefere e com o qual est mais familiarizado, seja em relao raiz do site ou ao documento. Navegar pelos links, ao contrrio de digitar os caminhos, assegura que voc sempre acesse o caminho correto.

Mais tpicos da Ajuda


Definir o caminho relativo de novos links na pgina 276 Configurar um novo site na pgina 38

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 272


Vinculao e navegao

Caminhos absolutos
Os caminhos absolutos fornecem o URL completo do documento vinculado, incluindo o protocolo a ser usado (normalmente http:// para pginas da Web), por exemplo, http://www.adobe.com/support/dreamweaver/contents.html. Para um ativo de imagem, o URL completo deve ter a seguinte aparncia: http://www.adobe.com/support/dreamweaver/images/image1.jpg. Voc deve usar um caminho absoluto para vincular-se a um documento ou ativo em outro servidor. Voc tambm pode usar caminhos absolutos para links locais (com documentos no mesmo site), mas essa abordagem no recomendada: se o site for movido para outro domnio, todos os links locais de caminho absoluto sero corrompidos. Usar caminhos relativos para links locais tambm aumenta a flexibilidade, caso voc tenha que mover arquivos no seu site. Nota: Ao inserir imagens (no links), voc pode usar um caminho absoluto para uma imagem em um servidor remoto (isto , uma imagem que no est disponvel na unidade de disco rgido local).

Caminhos relativos a documentos


Na maioria dos sites, os caminhos relativos a documentos normalmente so mais adequados para links locais. Eles so teis especialmente quando o documento atual e o documento ou ativo vinculado esto na mesma pasta e provavelmente permanecero juntos. Voc tambm pode usar um caminho relativo a documentos para vincular-se a um documento ou ativo em outra pasta, especificando o caminho atravs da hierarquia de pastas do documento atual at o documento vinculado. A idia bsica dos caminhos relativos a documentos omitir a parte do caminho absoluto que igual para o documento atual e o documento ou ativo vinculado, fornecendo somente a parte diferente do caminho. Por exemplo, imagine que voc tenha um site com a seguinte estrutura:
meu_site(pasta raiz) suporte contedo.html horas.html recursos dicas.html produtos catlogo.html

ndice.html (home page)

Para vincular contedo.html com horas.html (ambos na mesma pasta), use o caminho relativo horas.html. Para vincular de contents.html a tips.html (na subpasta recursos), use o caminho relativo resources/tips.html. Em
cada barra (/), voc desce um nvel na hierarquia de pastas.

Para vincular de contents.html a index.html (na pasta pai, um nvel acima de contents.html), use o caminho relativo
../index.html. Dois pontos e uma barra (../), move um nvel acima na hierarquia de pastas.

Para vincular de contents.html a catalog.html (em uma subpasta diferente da pasta pai), use o caminho relativo
../products/catalog.html. Aqui, ../ move acima para a pasta pai, e produtos/ move abaixo para a subpasta produtos. Ao mover arquivos como um grupo (por exemplo, ao mover uma pasta inteira, de modo que todos os arquivos dessa pasta mantenham os mesmos caminhos relativos entre si), voc no precisa atualizar os links relativos a documentos entre esses arquivos. No entanto, ao mover um arquivo individual que contm links relativos a documentos ou um arquivo individual de destino de um link relativo a documentos, voc precisa atualizar esses links. (Se voc mover ou renomear arquivos usando o painel Arquivos, o Dreamweaver atualizar todos os links relevantes automaticamente.)

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 273


Vinculao e navegao

Caminhos relativos raiz do site


Os caminhos relativos raiz do site descrevem o caminho da pasta raiz do site at um documento. Voc pode usar esses caminhos se estiver trabalhando em um grande site que usa vrios servidores ou um servidor que hospeda vrios sites. No entanto, se voc no estiver familiarizado com esse tipo de caminho, use os caminhos relativos a documentos. Um caminho relativo raiz do site comea com uma barra, que indica a pasta raiz do site. Por exemplo, /suporte/dicas.html um caminho relativo raiz do site at um arquivo (dicas.html) da subpasta suporte da pasta raiz do site. Um caminho relativo raiz do site geralmente a melhor maneira de especificar links se voc mover com freqncia arquivos HTML de uma pasta para outra no site. Ao mover um documento que contm links relativos raiz do site, voc no precisar alterar os links, pois eles so relativos raiz do site, no ao documento; por exemplo, se os arquivos HTML usam links relativos raiz do site para arquivos dependentes (como imagens) e um desses arquivos for movido, os links do arquivo dependente em questo ainda sero vlidos. No entanto, ao mover ou renomear os documentos de destino de links relativos raiz do site, voc deve atualizar esses links, mesmo que os caminhos dos documentos entre si no tenham sido alterados. Por exemplo, se voc mover uma pasta, dever atualizar todos os links relativos raiz do site para os arquivos dessa pasta. (Se voc mover ou renomear arquivos usando o painel Arquivos, o Dreamweaver atualizar todos os links relevantes automaticamente.)

Vinculao
Vinculao de arquivos e documentos
Antes de criar um link, voc deve entender como funcionam caminhos absolutos, relativos a documentos e relativos raiz do site. Voc pode criar vrios tipos de links em um documento:

Um link para outro documento ou para um arquivo, como um arquivo grfico, de filme, PDF ou de som. Um link de ncora nomeado, que salta para um local especfico em um documento. Um link de email, que cria uma nova mensagem de email em branco com o endereo do destinatrio j preenchido. Links nulos e de script, usados para anexar comportamentos a um objeto ou para criar um link que executa o cdigo
JavaScript. Voc pode usar o Inspetor de propriedades e o cone Apontar para arquivo para criar links de uma imagem, objeto ou texto para outro documento ou arquivo. O Dreamweaver cria os links para outras pginas no seu site usando caminhos relativos a documentos. Voc tambm pode configurar o Dreamweaver para criar novos links usando caminhos relativos raiz do site. Importante: Sempre salve um novo arquivo antes de criar um caminho relativo a documentos; esse tipo de caminho no vlido sem um ponto inicial definido. Se voc criar um caminho relativo a documentos antes de salvar o arquivo, o Dreamweaver usar temporariamente um caminho absoluto comeando com arquivo:// at o arquivo ser salvo; quando voc salvar o arquivo, o Dreamweaver converter o caminho arquivo:// em um caminho relativo. Para assistir a um tutorial sobre a criao de links, consulte www.adobe.com/go/vid0149_br.

Mais tpicos da Ajuda


Caminhos absolutos, relativos a documentos e relativos raiz do site na pgina 271 Tutorial sobre a criao de links

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 274


Vinculao e navegao

Anexar comportamentos JavaScript a links


Voc pode anexar um comportamento a qualquer link de um documento. Avalie a possibilidade de usar os seguintes comportamentos ao inserir elementos vinculados em documentos:
Definir texto da barra de status Determina o texto de uma mensagem e o exibe na barra de status, no canto inferior esquerdo da janela do navegador. Por exemplo, voc pode usar esse comportamento para descrever o destino de um link na barra de status em vez de mostrar o URL associado. Abrir janela do navegador Abre um URL em uma nova janela. Voc pode especificar as propriedades da nova janela,

incluindo o nome, o tamanho e seus atributos (se pode ser redimensionada, se tem uma barra de menus, etc.).
Menu de salto Edita um menu de salto. Voc pode alterar a lista de menus, especificar um arquivo vinculado diferente ou alterar o local do navegador no qual o documento vinculado aberto.

Mais tpicos da Ajuda


Aplicao de comportamentos internos do Dreamweaver na pgina 349

Vincular documentos usando o Inspetor de propriedades


Voc pode usar o cone de pasta do Inspetor de propriedades ou a caixa Link para criar links de uma imagem, objeto ou texto para outro documento ou arquivo.
1 Selecione texto ou uma imagem na Visualizao de design da janela Documento. 2 Abra o Inspetor de propriedades (Janela > Propriedades) e execute um dos procedimentos a seguir:

Clique no cone de pasta

direita da caixa Link para navegar at um arquivo e selecion-lo.

O caminho at o documento vinculado aparece na caixa URL. Use o menu pop-up Em relao a na caixa de dilogo Selecionar arquivo HTML para escolher o tipo de caminho (em relao ao documento ou raiz) e, em seguida, clique em Selecionar. O tipo de caminho selecionado aplicado somente no link atual. (Voc pode alterar a configurao padro da caixa Em relao a para o site.)

Digite o caminho e o nome de arquivo do documento na caixa Link.


Para vincular-se a um documento do seu site, insira um caminho relativo a um documento ou raiz do site. Para vincular-se a um documento externo ao seu site, insira um caminho absoluto incluindo o protocolo (como http://). Voc pode usar essa abordagem para inserir um link para um arquivo que ainda no foi criado.
3 No menu pop-up Destino, selecione um local no qual o documento ser aberto:

_blank carrega o documento vinculado em uma nova janela do navegador no nomeada. _parent carrega o documento vinculado no quadro pai ou na janela pai do quadro que contm o link. Se o quadro

que contm o link no estiver aninhado, o documento vinculado ser carregado na janela completa do navegador.
_self carrega o documento vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente

no necessrio especific-lo.
_top carrega o documento vinculado na janela completa do navegador, removendo todos os quadros.

Se todos os links da sua pgina forem definidos para o mesmo destino, voc pode especificar esse destino uma vez selecionando Inserir > HTML > Tags de cabealho > Base e selecionando as informaes de destino. Para obter informaes sobre quadros de destino, consulte Controle do contedo do quadro com links na pgina 202.

Mais tpicos da Ajuda


Caminhos absolutos, relativos a documentos e relativos raiz do site na pgina 271

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 275


Vinculao e navegao

Vincular documentos usando o cone Apontar para arquivo


1 Selecione texto ou uma imagem na Visualizao de design da janela Documento. 2 Siga um dos dois procedimentos abaixo para criar um link:

Arraste o cone Apontar para arquivo

(cone de destino) direita da caixa Link no Inspetor de propriedades e aponte para uma ncora visvel no documento atual, uma ncora visvel em outro documento aberto, um elemento que tenha uma ID exclusiva atribuda a ele ou um documento no painel Arquivos. em outro documento aberto, um elemento que tenha uma ID exclusiva atribuda a ele ou um documento no painel Arquivos.

Arraste a partir da seleo feita com shift e ponte para uma ncora visvel no documento atual, uma ncora visvel

Nota: Voc pode se vincular a outro documento aberto somente se os documentos no estiverem maximizados na janela Documento. Para dispor os documentos lado a lado, selecione Janela > Em cascata ou Janela > Lado a lado. Ao apontar para um documento aberto, esse documento vai para o primeiro plano da tela enquanto voc seleciona suas opes.

Mais tpicos da Ajuda


Criar link para um local especfico em um documento na pgina 276

Adicionar um link usando o comando Hiperlink


O comando Hiperlink permite criar um link de texto para uma imagem, objeto ou outro documento ou arquivo.
1 Coloque o ponto de insero no documento onde voc deseja que o link seja exibido. 2 Siga um destes procedimentos para exibir a caixa de dilogo Inserir hiperlink:

Selecione Inserir > Hiperlink. Na categoria Comum do painel Inserir, clique no boto Hiperlink.
3 Insira o texto do link e, na caixa Link, insira o nome do arquivo para o qual o link ser criado (ou clique no cone

de pasta

para procurar o arquivo).

4 No menu pop-up Destino, selecione a janela na qual o arquivo deve ser aberto ou digite seu nome.

Os nomes de todos os quadros nomeados no documento atual aparecem na lista pop-up. Se voc especificar um quadro que no existe, a pgina vinculada ser aberta em uma nova janela que tem o nome especificado. Voc tambm pode selecionar um dos seguintes nomes de destino reservados:

_blank carrega o arquivo vinculado em uma nova janela do navegador no nomeada. _parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contm o link. Se

o quadro que contm o link no estiver aninhado, o arquivo vinculado ser carregado na janela de navegador em tamanho integral.

_self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente no

necessrio especific-lo.
_top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.

5 Na caixa de ndice de abas, insira um nmero para a ordem de abas. 6 Na caixa Ttulo, insira um ttulo para o link. 7 Na caixa Chave de acesso, insira um equivalente do teclado (uma letra) para selecionar o link no navegador. 8 Clique em OK.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 276


Vinculao e navegao

Definir o caminho relativo de novos links


Por padro, o Dreamweaver cria os links para outras pginas no seu site usando caminhos relativos a documentos. Para usar o caminho relativo raiz do site, voc deve primeiro definir uma pasta local no Dreamweaver escolhendo uma pasta raiz local para servir como o equivalente da raiz do documento em um servidor. O Dreamweaver usa essa pasta para determinar os caminhos relativos raiz do site para arquivos.
1 Selecione Site > Gerenciar sites. 2 Na caixa de dilogo Gerenciar sites, clique duas vezes no seu site na lista. 3 Na caixa de dilogo Configurao de site, expanda as Configuraes avanadas e selecione a categoria Informaes

locais.
4 Defina o caminho relativo de novos links selecionando a opo Documento ou Raiz do site.

A alterao dessa configurao no converter o caminho de links existentes depois de voc clicar em OK. A configurao aplicada somente nos novos links criados com o Dreamweaver. Nota: O contedo vinculado a um caminho relativo raiz do site no aparece quando voc visualiza documentos em um navegador local, a menos que voc especifique um servidor de teste ou selecione a opo Visualizar utilizando o arquivo temporrio em Editar > Preferncias > Visualizar no navegador. Isso ocorre porque os navegadores no reconhecem razes de site, diferente dos servidores. Para visualizar rapidamente o contedo vinculado aos caminhos relativos raiz do site, coloque o arquivo em um servidor remoto e selecione Arquivo > Visualizar no navegador.
5 Clique em Salvar.

A configurao do novo caminho aplicada somente no site atual.

Mais tpicos da Ajuda


Caminhos absolutos, relativos a documentos e relativos raiz do site na pgina 271 Configurar um novo site na pgina 38

Criar link para um local especfico em um documento


Voc pode usar o Inspetor de propriedades para criar links para uma seo especfica de um documento criando primeiro ncoras nomeadas. As ncoras nomeadas permitem definir marcadores em um documento, que normalmente so colocados em um tpico especfico ou na parte superior de um documento. Em seguida, voc cria links para essas ncoras nomeadas, que direcionam o visitante rapidamente para a posio especificada. A criao de um link para uma ncora nomeada um processo de duas etapas. Primeiro, crie uma ncora nomeada e, em seguida, crie um link para a ncora nomeada. Nota: Voc no pode colocar uma ncora nomeada em um elemento com posio absoluta (elemento AP).

Criar uma ncora nomeada


1 Na Visualizao de design da janela Documento, coloque o ponto de insero onde voc deseja inserir a ncora

nomeada.
2 Siga um destes procedimentos:

Selecione Inserir > ncora com nome. Pressione Control + Alt + A (Windows) ou Command + Option + A (Macintosh). Na categoria Comum do painel Inserir, clique no boto ncora com nome.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 277


Vinculao e navegao

3 Na caixa Nome da ncora, insira um nome para a ncora e clique em OK. O nome da ncora no pode conter

espaos. O marcador da ncora aparece no ponto de insero. Nota: Se o marcador da ncora no for exibido, selecione Exibir > Auxlios visuais > Elementos invisveis.

Vincular para uma ncora nomeada


1 Na Visualizao de design da janela Documento, selecione um texto ou uma imagem a partir do qual um link ser

criado.
2 Na caixa Link do Inspetor de propriedades, digite um sinal de nmero (#) e o nome da ncora. Por exemplo, para

vincular-se a uma ncora chamada "top" no documento atual, digite #top. Para vincular-se a uma ncora chamada "top" em um documento diferente da mesma pasta, digite nome_do_arquivo.html#top. Nota: Os nomes de ncora diferenciam minsculas de maisculas.

Vincular-se a uma ncora nomeada usando o mtodo de Apontar para arquivo


1 Abra o documento que contm a ncora nomeada.

Nota: Se a ncora no for exibida, selecione Exibir > Auxlios visuais > Elementos invisveis para deix-la visvel.
2 Na Visualizao de design da janela Documento, selecione um texto ou uma imagem a partir do qual um link ser

criado. (Se o link for criado a partir de outro documento aberto, necessrio alternar para ele.)
3 Siga um destes procedimentos:

Clique no cone Apontar para arquivo

(cone de destino) direita da caixa Link no Inspetor de propriedades e arraste-o at a ncora qual voc deseja se vincular: seja uma ncora no mesmo documento ou em outro documento aberto. desejada: seja uma ncora no mesmo documento ou em outro documento aberto.

Arraste com a tecla Shift pressionada na janela Documento desde o texto ou a imagem selecionado at a ncora

Criar um link de email


Um link de email abre uma nova janela de mensagem em branco (usando o programa de email associado ao navegador do usurio) quando clicado. Na janela da mensagem de email, a caixa Para atualizada automaticamente com o endereo especificado no link de email.

Criar um link de email usando o comando Inserir link de email


1 Na Visualizao de design da janela Documento, posicione o ponto de insero onde voc deseja que o link de email

seja exibido ou selecione o texto ou a imagem que ser exibido como link de email.
2 Escolha uma destas opes para inserir o link:

Selecione Inserir > Link de email. Na categoria Comum do painel Inserir, clique no boto Link de email.
3 Na caixa Texto, digite ou edite o corpo do email. 4 Na caixa E-mail, digite o endereo de email e clique em OK.

Criar um link de email usando o Inspetor de propriedades


1 Selecione texto ou uma imagem na Visualizao de design da janela Documento. 2 Na caixa Link do Inspetor de propriedades, digite mailto: seguido por um endereo de email.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 278


Vinculao e navegao

No digite nenhum espao entre o sinal de dois pontos e o endereo de email.

Preenchimento automtico da linha de assunto de um email


1 Crie um link de email usando o Inspetor de propriedades como descrito acima. 2 Na caixa Link do Inspetor de propriedades, adicione ?subject= aps o email e digite um assunto aps o sinal de

igual. No digite nenhum espao entre o ponto de interrogao e o final do endereo de email. A entrada completa deve ser similar ao seguinte:
mailto:someone@yoursite.com?subject=Email do seu site

Criar links nulos e de script


Um link nulo um link no designado. Use links nulos para anexar comportamentos em objetos ou texto em uma pgina. Por exemplo, voc pode anexar um comportamento em um link nulo para que esse link troque uma imagem ou exiba um elemento absolutamente posicionado (elemento AP) quando o ponteiro for movido sobre o link. Os links de script executam o cdigo JavaScript ou chamam uma funo JavaScript e so teis para fornecer aos visitantes informaes adicionais sobre um item sem que eles precisem sair da pgina da Web atual. Os links de script tambm podem ser usados para realizar clculos, validar formulrios ou executar outras tarefas de processamento quando um visitante clica em um item especfico.

Mais tpicos da Ajuda


Aplicar um comportamento na pgina 348

Criar um link nulo


1 Selecione texto, uma imagem ou um objeto na Visualizao de design da janela Documento. 2 No Inspetor de propriedades, digite javascript:; (a palavra javascript seguida por um sinal de dois pontos e por

um sinal de ponto-e-vrgula) na caixa Link.

Criar links de script


1 Selecione texto, uma imagem ou um objeto na Visualizao de design da janela Documento. 2 Na caixa Link do Inspetor de propriedades, digite javascript: seguido por algum cdigo ou chamada de funo

JavaScript. No digite nenhum espao entre o sinal de dois pontos e o cdigo ou chamada.

Atualizar links automaticamente


O Dreamweaver pode atualizar links para e de um documento sempre que voc mover ou renomear o documento em um site local. Esse recurso funciona melhor quando voc armazena o site inteiro (ou uma seo inteira) no disco local. O Dreamweaver no altera arquivos na pasta remota at voc colocar os arquivos locais nessa pasta ou verific-los no servidor remoto. Para agilizar o processo de atualizao, o Dreamweaver pode criar um arquivo de cache para armazenar informaes sobre todos os links da pasta local. O arquivo de cache atualizado de forma invisvel medida que voc adiciona, altera ou exclui links do site local.

Ativar atualizaes automticas de link


1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Na caixa de dilogo Preferncias, selecione Geral na lista de categorias esquerda.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 279


Vinculao e navegao

3 Na seo Opes do documento das preferncias de Geral, selecione uma opo no menu pop-up Atualizar links

ao mover arquivos.
Sempre Atualiza automaticamente todos os links para e de um documento selecionado sempre que esse documento

movido ou renomeado.
Nunca No atualiza automaticamente todos os links para e de um documento selecionado quando esse documento

movido ou renomeado.
Solicitar Exibe uma caixa de dilogo que lista todos os arquivos afetados pela alterao. Clique em Atualizar para atualizar os links nesses arquivos ou clique em No atualizar para no alterar os arquivos.

4 Clique em OK.

Criar um arquivo de cache para o site


1 Selecione Site > Gerenciar sites. 2 Selecione um site e clique em Editar. 3 Na caixa de dilogo Configurao de site, expanda as Configuraes avanadas e selecione a categoria Informaes

locais.
4 Na categoria Informaes locais, selecione Ativar o cache.

Na primeira vez em que voc alterar ou excluir links para arquivos na pasta local depois de iniciar o Dreamweaver, o Dreamweaver solicitar o carregamento do cache. Se voc clicar em Sim, o Dreamweaver carregar o cache e atualizar todos os links para o arquivo que acaba de ser alterado. Se voc clicar em No, a alterao ser registrada no cache, mas o Dreamweaver no carregar o cache nem atualizar os links. O cache talvez demore alguns minutos para ser carregado em sites maiores porque o Dreamweaver deve determinar se o cache est atualizado comparando os carimbos de data/hora dos arquivos do site local com os carimbos de data/hora registrados no cache. Se voc no tiver alterado nenhum arquivo fora do Dreamweaver, pode clicar com segurana no boto Parar quando for exibido.

Recriar o cache
No painel Arquivos, selecione Site > Avanado > Recriar o cache do site.

Alterar um link no site inteiro


Alm de configurar o Dreamweaver para atualizar os links automaticamente sempre que um arquivo for movido ou renomeado, voc pode alterar todos os links manualmente (incluindo os links de email, de FTP, nulos e de script) para que eles apontem para outro lugar. Essa opo mais til quando voc deseja excluir um arquivo que est vinculado a outros arquivos, mas pode ser usada para outras finalidades. Por exemplo, imagine que voc vincule as palavras "filmes deste ms" a /filmes/julho.html no site inteiro. Em 1 de agosto, voc teria que alterar esses links para que apontassem para /filmes/agosto.html.
1 Selecione um arquivo na Visualizao local do painel Arquivos.

Nota: Se estiver alterando um link de email, de FTP, nulo ou de script, voc no precisa selecionar um arquivo.
2 Selecione Site > Alterar link no site inteiro. 3 Preencha as seguintes opes na caixa de dilogo Alterar link no site inteiro:

para navegar at o arquivo de destino do qual voc deseja se desvincular e selecion-lo. Se estiver alterando um link de email, de FTP, nulo ou de script, digite o texto completo do link que est alterando.

Alterar todos os links para Clique no cone de pasta

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 280


Vinculao e navegao

Em links para Clique no cone de pasta

para navegar at o novo arquivo ao qual voc deseja se vincular e selecionlo. Se estiver alterando um link de email, de FTP, nulo ou de script, digite o texto completo do link de substituio.

4 Clique em OK.

O Dreamweaver atualiza todos os documentos vinculados ao arquivo selecionado, fazendo com que eles apontem para o novo arquivo, usando o formato de caminho j usado no documento (por exemplo, se o caminho antigo era relativo ao documento, o novo caminho tambm deve ser relativo ao documento). Depois de alterar um link no site inteiro, o arquivo selecionado fica rfo (isto , nenhum arquivo do disco local aponta para ele). Voc pode exclu-lo com segurana sem quebrar nenhum link no site local do Dreamweaver. Importante: Como essas alteraes ocorrem localmente, voc deve excluir de modo manual o arquivo rfo correspondente na pasta remota e colocar ou verificar todos os arquivos nos quais os links foram alterados; caso contrrio, os visitantes do site no observaram as mudanas.

Testar links no Dreamweaver


Os links no esto ativos no Dreamweaver, isto , voc no pode abrir um documento vinculado clicando no link na janela Documento.
Siga um destes procedimentos:

Selecione o link e selecione Modificar > Abrir pgina vinculada. Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no link.
Nota: O documento vinculado deve residir no disco local.

Mais tpicos da Ajuda


Encontrar links rompidos, externos e rfos na pgina 284 Corrigir links rompidos na pgina 285

Menus de salto
Sobre menus de salto
Um menu de salto um menu pop-up em um documento, visvel aos visitantes do site, que lista os links para documentos ou arquivos. Voc pode criar links para documentos no seu site, links para documentos em outros sites, links de email, links para grficos ou links para qualquer tipo de arquivo que possa ser aberto em um navegador. Cada opo de um menu de salto associada a um URL. Quando escolhem uma opo, os usurios so redirecionados ("saltam") para o URL associado. Os menus de salto so inseridos no objeto de formulrio Menu de salto. Um menu de salto pode conter trs componentes:

(Opcional) Uma solicitao de seleo de menu, como uma descrio de categoria para os itens de menu ou
instrues como "Escolha uma".

(Obrigatrio) Uma lista de itens de menu vinculados: um usurio seleciona uma opo e um documento ou arquivo
vinculado aberto.

(Opcional) Um boto Ir.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 281


Vinculao e navegao

Mais tpicos da Ajuda


Aplicar o comportamento Menu de salto na pgina 353 Aplicar o comportamento Menu de salto Ir na pgina 354

Inserir um menu de salto


1 Abra um documento e coloque o ponto de insero na janela Documento. 2 Siga um destes procedimentos:

Selecione Inserir > Formulrio > Menu de salto. Na categoria Formulrios do painel Inserir, clique no boto Menu de salto.
3 Preencha a caixa de dilogo Inserir menu de salto e clique em OK. Veja uma lista parcial de opes:
Botes de adio e subtrao Clique no boto de adio para inserir um item; clique no boto de adio novamente para adicionar outro item. Para excluir um item, selecione-o e clique no boto de subtrao. Botes de seta Selecione um item e clique nas setas para mov-lo para cima ou para baixo na lista. Texto Digite o nome de um item no nomeado. Se o menu incluir uma solicitao de seleo (como "Escolha uma"),

digite-a aqui como o primeiro item de menu (nesse caso, voc tambm deve escolher a opo Selecionar o primeiro item aps a alterao do URL na parte inferior).
Quando selecionado ir para URL Navegue at o arquivo de destino ou digite seu caminho. Abrir URLs em Especifique se deseja abrir o arquivo na mesma janela ou em um quadro. Se o quadro desejado no

aparecer no menu, feche a caixa de dilogo Inserir menu de salto e nomeie o quadro.
Inserir boto Ir aps menu Selecione para inserir um boto Ir em vez de uma solicitao de seleo de menu. Selecionar o primeiro item aps a alterao do URL Selecione se tiver inserido uma solicitao de seleo de menu

("Escolher uma") como o primeiro item de menu.

Mais tpicos da Ajuda


Exibir e definir propriedades e atributos de quadro na pgina 199

Editar itens de menu de salto


Voc pode alterar a ordem dos itens no menu ou no arquivo vinculado a um item e adicionar, excluir ou renomear um item. Para alterar o local em que um arquivo vinculado deve ser aberto ou para adicionar ou alterar uma solicitao de seleo de menu, voc deve aplicar o comportamento Menu de salto do painel Comportamentos.
1 Abra o Inspetor de propriedades (Janela > Propriedades) se ainda no estiver aberto. 2 Na Visualizao de design da janela Documento, clique no objeto de menu de salto para selecion-lo. 3 No Inspetor de propriedades, clique no boto Listar valores. 4 Use a caixa de dilogo Listar valores para fazer alteraes nos itens de menu e clique em OK.

Mais tpicos da Ajuda


Aplicar o comportamento Menu de salto na pgina 353

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 282


Vinculao e navegao

Soluo de problemas de menus de salto


Depois que um usurio seleciona um item do menu de salto, no possvel selecionar esse item novamente se o usurio voltar pgina ou se a caixa Abrir URLs em especificar um quadro. Existem duas maneiras de solucionar esse problema:

Use uma solicitao de seleo de menu, como uma categoria, ou uma instruo para o usurio, como "Escolha
uma". A solicitao de seleo de menu remarcada automaticamente depois de cada seleo de menu.

Use um boto Ir, que permite ao usurio revisitar o link escolhido atualmente. Ao ser usado com um menu de salto,
o boto Ir se transforma no nico mecanismo que salta para levar o usurio ao URL associado seleo do menu. A seleo de um item de menu no menu de salto no redireciona mais o usurio automaticamente para outra pgina ou quadro. Nota: Selecione somente uma dessas opes por menu de salto, na caixa de dilogo Inserir menu de salto, porque elas se aplicam a um menu de salto inteiro.

Barras de navegao
Sobre barras de navegao
O recurso Barra de navegao est obsoleto no Dreamweaver CS5. A Adobe recomenda o uso do widget Barra de menus do Spry se voc desejar criar uma barra de navegao.

Mais tpicos da Ajuda


Funcionamento do widget Barra de menus na pgina 428

Mapas de imagem
Sobre mapas de imagem
Um mapa de imagem uma imagem que foi dividida em regies chamadas pontos ativos; quando o usurio clica em um ponto ativo, ocorre uma ao (por exemplo, um novo arquivo aberto). Os mapas de imagem do cliente armazenam as informaes do link de hipertexto no documento HTML, no um arquivo de mapa separado assim como fazem os mapas de imagem do servidor. Quando um visitante do site clica em um ponto ativo da imagem, o URL associado enviado diretamente para o servidor. Desse modo, os mapas de imagem do cliente so mais rpidos do que os mapas de imagem do servidor porque o servidor no precisa interpretar a origem do clique. Os mapas de imagem do cliente so suportados pelo Netscape Navigator 2.0 e posterior, pelo NCSA Mosaic 2.1 e 3.0 e por todas as verses do Internet Explorer. O Dreamweaver no altera referncias aos mapas de imagem do servidor nos documentos existentes; voc pode usar mapas de imagem do cliente e do servidor no mesmo documento. No entanto, os navegadores compatveis com os dois tipos de mapas de imagem do prioridade aos mapas de imagem do cliente. Para incluir um mapa de imagem do servidor em um documento, voc deve gravar o cdigo HTML adequado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 283


Vinculao e navegao

Inserir mapas de imagem do cliente


Ao inserir um mapa de imagem do cliente, crie uma rea de ponto ativo e defina um link que abra quando o usurio clicar na rea do ponto ativo. Nota: Voc pode criar vrias reas de ponto ativo, mas elas devem fazer parte do mesmo mapa de imagem.
1 Na janela Documento, selecione a imagem. 2 No Inspetor de propriedades, clique na seta de expanso, no canto inferior direito, para exibir todas as

propriedades.
3 Na caixa Nome do mapa, insira um nome exclusivo para o mapa de imagem. Se estiver usando vrios mapas de

imagem no mesmo documento, verifique se cada mapa tem um nome exclusivo.


4 Para definir as reas do mapa de imagem, siga um destes procedimentos:

Selecione a ferramenta de crculo Selecione a ferramenta de retngulo Selecione a ferramenta de polgono

e arraste o ponteiro sobre a imagem para criar um ponto ativo circular. e arraste o ponteiro sobre a imagem para criar um ponto ativo retangular.

e defina um ponto ativo de forma irregular clicando uma vez para cada ponto de canto. Clique na ferramenta seta para fechar a forma.

Depois de criar o ponto ativo, o Inspetor de propriedades do ponto ativo exibido.


5 Na caixa Link do Inspetor de propriedades de ponto ativo, clique no cone de pasta

, navegue at o arquivo que deve ser aberto quando o usurio clica no ponto ativo e selecione-o, ou digite o caminho.

6 No menu pop-up Destino, selecione a janela na qual o arquivo deve ser aberto ou digite seu nome.

Os nomes de todos os quadros nomeados no documento atual aparecem na lista pop-up. Se voc especificar um quadro que no existe, a pgina vinculada ser carregada em uma nova janela que tem o nome especificado. Voc tambm pode selecionar um dos seguintes nomes de destino reservados:

_blank carrega o arquivo vinculado em uma nova janela do navegador no nomeada. _parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contm o link. Se o quadro que contm o link no estiver aninhado, o arquivo vinculado ser carregado na janela de navegador em tamanho integral. _self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente no

necessrio especific-lo.
_top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.

Nota: A opo de destino s disponibilizada quando o ponto ativo selecionado contm um link.
7 Na caixa Alt, digite o texto alternativo a ser exibido nos navegadores somente de texto ou nos navegadores que

fazem download de imagens manualmente. Alguns navegadores exibem esse texto como uma dica de ferramenta quando o usurio passa o ponteiro pelo ponto ativo.
8 Repita as etapas de 4 a 7 para definir pontos ativos adicionais no mapa de imagem. 9 Quando terminar de mapear a imagem, clique em uma rea em branco do documento para alterar o Inspetor de

propriedades.

Modificar pontos ativos do mapa de imagem


Voc pode editar com facilidade os pontos ativos criados em um mapa de imagem. Voc pode mover uma rea de ponto ativo, redimensionar pontos ativos ou mover um ponto ativo para frente ou para trs em um elemento absolutamente posicionado (elemento AP).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 284


Vinculao e navegao

Voc tambm pode copiar uma imagem com pontos ativos de um documento para outro ou copiar um ou mais pontos ativos de uma imagem e col-los em outra imagem; os pontos ativos associados imagem tambm so copiados no novo documento.

Selecionar vrios pontos ativos em um mapa de imagem


1 Use a ferramenta Ponto ativo de ponteiro para selecionar um ponto ativo. 2 Siga um destes procedimentos:

Clique com a tecla Shift nos outros pontos ativos que deseja selecionar. Pressione Control + A (Windows) ou Command + A (Macintosh) para selecionar todos os pontos ativos.

Mover um ponto ativo


1 Use a ferramenta Ponto ativo de ponteiro para selecionar o ponto ativo. 2 Siga um destes procedimentos:

Arraste o ponto ativo at uma nova rea. Use a tecla Control e as teclas de seta para mover um ponto ativo 10 pixels na direo selecionada. Use as teclas de seta para mover um ponto ativo 1 pixel na direo selecionada.

Redimensionar um ponto ativo


1 Use a ferramenta Ponto ativo de ponteiro

para selecionar o ponto ativo.

2 Arraste uma ala do seletor de ponto ativo para alterar o tamanho ou a forma do ponto ativo.

Soluo de problemas de links


Encontrar links rompidos, externos e rfos
Use o recurso Verificar links para procurar links rompidos e arquivos rfos (arquivos que ainda existem no site, mas no esto vinculados a nenhum outro arquivo do site). Voc pode procurar um arquivo aberto, uma parte de um site local ou um site local inteiro. O Dreamweaver verifica links somente de documentos do site; o Dreamweaver compila uma lista de links externos nos documentos selecionados, mas no os verifica. Voc tambm pode identificar e excluir arquivos que no so mais usados por outros arquivos do seu site.

Mais tpicos da Ajuda


Identificar e excluir arquivos no utilizados na pgina 78

Verificar links no documento atual


1 Salve o arquivo em um local do site local do Dreamweaver. 2 Selecione Arquivo > Verificar pgina > Links.

O relatrio Links rompidos aparece no painel Verificador de links (no grupo do painel Resultados).
3 No painel Verificador de links, selecione Links externos no menu pop-up Mostrar para exibir outro relatrio.

O relatrio Links externos aparece no painel Verificador de links (no grupo do painel Resultados).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 285


Vinculao e navegao

Voc pode procurar arquivos rfos ao verificar links no site inteiro.


4 Para salvar o relatrio, clique no boto Salvar relatrio no painel Verificador de links. O relatrio um arquivo

temporrio e ser perdido se no for salvo.

Verificar links em parte de um site local


1 No painel Arquivos, selecione um site no menu pop-up Sites atuais. 2 Na Visualizao local, selecione os arquivos ou pastas a serem verificados. 3 Inicie a verificao seguindo um destes procedimentos:

Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em um dos
arquivos selecionados e, em seguida, selecione Verificar links > Arquivos/pastas selecionadas no menu de contexto.

Selecione Arquivo > Verificar pgina > Links.


O relatrio Links rompidos aparece no painel Verificador de links (no grupo do painel Resultados).
4 No painel Verificador de links, selecione Links externos no menu pop-up Mostrar para exibir outro relatrio.

O relatrio Links externos aparece no painel Verificador de links (no grupo do painel Resultados). Voc pode procurar arquivos rfos ao verificar links no site inteiro.
5 Para salvar um relatrio, clique no boto Salvar relatrio no painel Verificador de links.

Verificar links no site inteiro


1 No painel Arquivos, selecione um site no menu pop-up Sites atuais. 2 Selecione Site > Verificar os links no site inteiro.

O relatrio Links rompidos aparece no painel Verificador de links (no grupo do painel Resultados).
3 No painel Verificador de links, selecione Links externos ou Arquivos rfos no menu pop-up Mostrar para exibir

outro relatrio. Uma lista dos arquivos que correspondem ao tipo de relatrio selecionado aparece no painel Verificador de links. Nota: Se voc selecionar Arquivos rfos como tipo de relatrio, poder excluir arquivos rfos diretamente do painel Verificador de links selecionando um arquivo na lista e pressionando a tecla Delete.
4 Para salvar um relatrio, clique no boto Salvar relatrio no painel Verificador de links.

Corrigir links rompidos


Depois de executar um relatrio de links, voc pode corrigir links rompidos e referncias de imagem diretamente no painel Verificador de links ou abrir arquivos da lista e corrigir os links no Inspetor de propriedades.

Corrigir links no painel Verificador de links


1 Execute um relatrio de verificao de links. 2 Na coluna Links rompidos (no na coluna Arquivos) do painel Verificador de links (no grupo do painel

Resultados), selecione o link rompido. Um cone de pasta aparece prximo ao link rompido.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 286


Vinculao e navegao

3 Clique no cone de pasta prximo

ao link rompido e navegue at o arquivo correto, ou digite o caminho e o

nome de arquivo corretos.


4 Pressione Tab ou Enter (Windows) ou Return (Macintosh).

Se houver outras referncias rompidas a este mesmo arquivo, corrija as referncias nos outros arquivos tambm. Clique em Sim para que o Dreamweaver atualize todos os documentos da lista que fazem referncia a este arquivo. Clique em No para que o Dreamweaver atualize somente a referncia atual. Nota: Se Ativar devoluo e retirada de arquivos estiver ativado no site, o Dreamweaver tentar retirar os arquivos que requerem alteraes. Se no for possvel retirar um arquivo, o Dreamweaver exibir uma caixa de dilogo de aviso e no alterar as referncias rompidas.

Corrigir links no Inspetor de propriedades


1 Execute um relatrio de verificao de links. 2 No painel Verificador de links (no grupo do painel Resultados), clique duas vezes em uma entrada na coluna

Arquivo. O Dreamweaver abre o documento, seleciona a imagem ou o link rompido e reala o caminho e o nome de arquivo no Inspetor de propriedades. (Se o Inspetor de propriedades no estiver visvel, selecione Janela > Propriedades para abri-lo.)
3 Para definir um novo caminho e nome de arquivo no Inspetor de propriedades, clique no cone de pasta

para

navegar at o arquivo correto ou digite sobre o texto realado. Se estiver atualizando uma referncia de imagem e a nova imagem for exibida no tamanho incorreto, clique nos rtulos W e H no Inspetor de propriedades ou clique no boto Atualizar para redefinir os valores de altura e largura.
4 Salve o arquivo.

Conforme os links so corrigidos, suas entradas desaparecem da lista Verificador de links. Se uma entrada ainda aparecer na lista depois de voc inserir um novo caminho ou nome de arquivo no Verificador de links (ou depois de salvar as alteraes no Inspetor de propriedades), o Dreamweaver no poder encontrar o novo arquivo e ainda considerar o link rompido.

ltima atualizao em 28/4/2010

287

Captulo 10: Visualizao de pginas


A Visualizao de design d uma idia de como sua pgina ser exibida na Web, mas no processa as pginas exatamente como os navegadores fazem. A visualizao dinmica apresenta uma representao mais precisa e permite trabalhar na Visualizao de cdigo para que voc possa ver as alteraes no design. O recurso Visualizar do navegador permite que voc veja como suas pginas sero exibidas em navegadores especficos.

Visualizao de pginas no Dreamweaver


Sobre a visualizao dinmica
A visualizao dinmica difere da visualizao tradicional de design do Dreamweaver por oferecer um processamento no editvel e mais realista da aparncia que a sua pgina ter no navegador. A visualizao dinmica no substitui o comando Visualizar no navegador; em vez disso, oferece outra maneira de visualizar como ser a aparncia "ao vivo" de sua pgina sem ter que deixar a rea de trabalho do Dreamweaver. Voc pode alternar para a Visualizao dinmica a qualquer momento em que estiver na Visualizao de design. Alternar para a visualizao dinmica, no entanto, no tem nenhuma relao com alternar entre qualquer uma outra visualizao tradicional no Dreamweaver (Cdigo/Diviso/Design). Ao mudar para a Visualizao dinmica na Visualizao de design, voc estar simplesmente alternando a Visualizao de design entre editvel e "ao vivo". Embora a Visualizao de design permanea congelada quando voc entra na Visualizao dinmica, a Visualizao de cdigo permanece editvel, para que voc possa alterar o cdigo e, em seguida, atualizar a Visualizao dinmica para ver as alteraes em vigor. Quando na visualizao dinmica, voc tem a opo adicional de exibir o cdigo ativo. A Visualizao de cdigo ativo se assemelha Visualizao dinmica por exibir uma verso do cdigo que o navegador est executando para processar a pgina. Assim como a Visualizao dinmica, a Visualizao de cdigo ativo no editvel. Uma vantagem adicional da visualizao dinmica a capacidade de congelar JavaScript. Por exemplo, voc pode alternar para a visualizao dinmica e focalizar nas colunas da tabela com base no Spry que mudam de cor como resultado da interao do usurio. Ao congelar JavaScript, a visualizao dinmica congela a pgina em seu estado atual. Em seguida, voc pode editar o CSS ou JavaScript e atualizar a pgina para ver as alteraes em vigor. Congelar JavaScript na visualizao dinmica til se voc deseja visualizar e alterar propriedades dos diferentes estados dos menus pop-up ou outros elementos interativos que no podem ser vistos na Visualizao tradicional de design. Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre o funcionamento da Visualizao dinmica, consulte www.adobe.com/go/dw10liveview_br. Para obter uma viso geral, em vdeo da equipe de engenharia do DreamWeaver sobre como trabalhar com a navegao Ativa, consulte www.adobe.com/go/dwcs5livenav_br. Para assistir a um tutorial em vdeo sobre como trabalhar com Visualizao dinmica, arquivos relacionados e o Navegador de cdigo, consulte www.adobe.com/go/lrvid4044_dw_br.

Visualizao de pginas na Visualizao dinmica


1 Certifique-se de estar na Visualizao de design (Exibir > Design) ou nas visualizaes de cdigo e de design

(Exibio > Cdigo e design).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 288


Visualizao de pginas

2 Clique no boto Visualizao dinmica.

3 (Opcional) Faa as alteraes na Visualizao de cdigo, no painel Estilos CSS, em uma folha de estilos CSS externa

ou em outro arquivo relacionado. Embora voc no possa editar na Visualizao dinmica, suas opes de edies em outras reas (por exemplo, no painel Estilos CSS ou na Visualizao de cdigo) mudam quando voc clica em Visualizao dinmica. Voc pode trabalhar com arquivos relacionados (como folhas de estilos CSS) enquanto mantm o foco na Visualizao dinmica, abrindo o arquivo relacionado na barra de ferramentas Arquivos relacionados, na parte superior do documento.
4 Se voc tiver feito alteraes na Visualizao de cdigo ou em um arquivo relacionado, atualize a Visualizao

dinmica clicando no boto Atualizar da barra de ferramentas Documento ou pressionando F5.


5 Para retornar Visualizao de design editvel, clique no boto Visualizao dinmica novamente.

Visualizao de cdigo ativo


O cdigo exibido na Visualizao de cdigo ativo semelhante ao que voc visualiza na fonte da pgina de um navegador. Embora as fontes da pgina sejam estticas, apresentando apenas a fonte da pgina do navegador, a Visualizao de cdigo ativo dinmica e atualizada quando voc interage com a pgina na Visualizao dinmica.
1 Certifique-se de estar na Visualizao dinmica. 2 Clique no boto Cdigo ativo.

O Dreamweaver exibe o cdigo ativo que o navegador usa para executar a pgina. O cdigo realado em amarelo e no editvel. Quando voc interage com os elementos interativos da pgina, o cdigo Ativo destaca as alteraes dinmicas no cdigo.
3 Para desativar o destaque das alteraes na Visualizao de cdigo ativo, escolha Visualizao > Opes de

visualizao ativa > Destacar alteraes no cdigo ativo.


4 Para retornar Visualizao de cdigo editvel, clique no boto Cdigo ativo novamente.

Para alterar as preferncia de Cdigo ativo, escolha Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (SO Macintosh) e selecione a categoria de codificao por cores.

Congelar JavaScript
Siga um destes procedimentos:

Pressione F6 Selecione Congelar JavaScript no menu pop-up do boto Visualizao dinmica.


Uma barra de informaes na parte superior do documento indicar que o JavaScript est congelado. Para fechar a barra de informaes, clique no link para fechar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 289


Visualizao de pginas

Opes de visualizao dinmica


Alm da opo Congelar JavaScript, h outras opes disponveis no menu pop-up do boto Visualizao dinmica ou no item de menu Exibir > Opes de visualizao dinmica.
Congelar JavaScript Congela elementos afetados pelo JavaScript nos respectivos estados atuais. Desativar JavaScript Desativa o JavaScript e processa novamente a pgina com a aparncia que ela teria caso o navegador no tivesse JavaScript ativado. Desativar plug-ins Desativa plug-ins e processa novamente a pgina com a aparncia que ela teria caso o navegador no tivesse plug-ins ativados. Realar alteraes no Cdigo ativo Ativa ou desativa o destaque para as alteraes do Cdigo ativo. Editar a pgina de visualizao ativa em uma nova guia Permite que voc abra novas guias para documentos do site

para os quais voc navega usando a barra de ferramentas de navegao do navegador ou o recurso Seguir link(s). Voc deve navegar para o documento primeiro e, em seguida, selecionar Editar a pgina Visualizao ativa em uma nova guia para criar uma nova guia para ela.
Seguir link Ativa o prximo link em que voc clica na Visualizao ativa Como alternativa, voc pode usar Control-

clique em um link na visualizao Ativa para ativ-lo.


Seguir links continuamente Torna os links da visualizao Ativa continuamente ativos at voc desativ-los

novamente ou fechar a pgina.


Sincronizar automaticamente arquivos remotos Sincroniza automaticamente o arquivo local e remoto quando voc clica no cone Atualizar na barra de ferramentas de navegao do navegador. O Dreamweaver coloca seu arquivo no servidor, antes de atualizar, para que os dois arquivos estejam sincronizados. Usar Servidor de teste para fonte do documento Usado principalmente por pginas dinmicas (como pginas do

ColdFusion) e, por padro, selecionado para pginas dinmicas. Quando esta opo est selecionada, o Dreamweaver usa a verso do arquivo no servidor de teste do site como a fonte de exibio da Visualizao dinmica.
Usar arquivos locais para links de documento A configurao padro de sites no dinmicos. Quando esta opo est

selecionada para sites dinmicos que usam servidor de teste, o Dreamweaver usa as verses locais do arquivos vinculados ao documento (por exemplo, arquivos CSS e JavaScript), em vez dos arquivos no servidor de teste. Voc ento pode fazer alteraes locais nos arquivos relacionados, de modo a poder visualizar a aparncia desses arquivos antes de coloc-los no servidor de teste. Se esta opo estiver desmarcada, o Dreamweaver usar as verses do servidor de teste de arquivos relacionados.
Configuraes de solicitao HTTP Conduz a uma caixa de dilogo de configuraes avanadas, onde possvel inserir

valores para exibio de live data. Para obter mais informaes, clique no boto Ajuda da caixa de dilogo.

Mais tpicos da Ajuda


Viso geral da barra de ferramentas de navegao do navegador na pgina 11 Alternar entre visualizaes na janela Documento na pgina 17 Abrir Arquivos relacionados na pgina 68 Visualizao de live data na pgina 592 Tutorial em vdeo da Visualizao dinmica

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 290


Visualizao de pginas

Visualizao de pginas em navegadores


Visualizar em um navegador
Voc pode visualizar uma pgina em um navegador a qualquer momento; no necessrio carreg-la no servidor da Web primeiro. Ao visualizar uma pgina, todas as funes relacionadas ao navegador devem funcionar, incluindo os comportamentos do JavaScript, os links absolutos e relacionados ao documento, os controles ActiveX e os plug-ins Netscape Navigator, contanto que voc tenha instalado os plug-ins ou controles ActiveX necessrios no seu navegador. Antes de visualizar um documento, voc precisa salv-lo; caso contrrio, o navegador no exibir as alteraes mais recentes.
1 Escolha uma destas opes para visualizar a pgina:

Selecione Arquivo > Visualizar no navegador e, em seguida, selecione um dos navegadores listados.
Nota: Se nenhum navegador estiver listado, selecione Editar > Preferncias ou Dreamweaver > Preferncias (Macintosh) e, em seguida, selecione a categoria Visualizar no navegador esquerda para selecionar um navegador.

Pressione F12 (Windows) ou Option + F12 (Macintosh) para exibir o documento atual no navegador primrio. Pressione Control + F12 (Windows) ou Command + F12 (Macintosh) para exibir o documento atual no navegador
secundrio.
2 Clique nos links e teste o contedo da sua pgina.

Nota: O contedo vinculado a um caminho relativo raiz do site no aparece quando voc visualiza documentos em um navegador local, a menos que voc especifique um servidor de teste ou selecione a opo Visualizar utilizando o arquivo temporrio em Editar > Preferncias > Visualizar no navegador. Isso ocorre porque os navegadores no reconhecem razes de site, diferente dos servidores. Para visualizar o contedo vinculado aos caminhos relativos raiz, coloque o arquivo em um servidor remoto e selecione Arquivo > Visualizar no navegador.
3 Feche a pgina do navegador quando terminar o teste.

Mais tpicos da Ajuda


Caminhos relativos raiz do site na pgina 273

Definio das preferncias de visualizao de navegador


Voc pode definir preferncias do navegador a ser usado ao visualizar um site e definir navegadores primrios e secundrios padro.
1 Selecione Arquivo > Visualizar no navegador > Editar lista de navegadores. 2 Para adicionar um navegador lista, clique no boto de adio (+), preencha a caixa de dilogo Adicionar

navegador e clique em OK.


3 Para excluir um navegador da lista, selecione o navegador e clique no boto de subtrao (-). 4 Para alterar as configuraes de um navegador selecionado, clique no boto Editar, faa alteraes na caixa de

dilogo Editar navegador e clique em OK.


5 Selecione a opo Navegador primrio ou Navegador secundrio para especificar se o navegador selecionado

primrio ou secundrio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 291


Visualizao de pginas

Pressionar F12 (Windows) ou Option + F12 (Macintosh) abre o navegador primrio; pressionar Control + F12 (Windows) ou Command + F12 (Macintosh) abre o navegador secundrio.
6 Selecione Visualizar usando arquivo temporrio para criar uma cpia temporria para visualizao e depurao do

servidor. (Desmarque esta opo para atualizar o documento diretamente.)

Visualizao de pginas em dispositivos mveis


Para visualizar pginas criadas no Dreamweaver em vrios dispositivos mveis, use o Device Central com o recurso Renderizao em Tela Pequena do Opera incorporado. Dispositivos diferentes tm navegadores distintos instalados, mas a visualizao pode dar uma boa impresso da aparncia e do comportamento do contedo em um dispositivo selecionado.
1 Inicie o Dreamweaver. 2 Abrir um arquivo. 3 Siga um destes procedimentos:

Selecione Arquivo > Visualizar no Navegador > Device Central. Na barra de ferramentas da janela do documento, clique no boto do navegador Visualizar/Depurar em
mantendo-o pressionado, e selecione Visualizar no Device Central. O arquivo exibido na aba Device Central Emulator. Para continuar o teste, clique duas vezes no nome de um dispositivo diferente nas listas Conjuntos de Dispositivos ou Dispositivos Disponveis. ,

Mais tpicos da Ajuda


Trabalho com o Device Central na pgina 381

ltima atualizao em 28/4/2010

292

Captulo 11: Trabalho com cdigo de pgina


Informaes gerais sobre a codificao no Dreamweaver
Mais tpicos da Ajuda
Dicas de cdigo na pgina 304 Configuraes das preferncias de codificao na pgina 299 Personalizao de atalhos de teclado na pgina 298 Tornar as pginas compatveis com XHTML na pgina 326 Procurar tags, atributos ou texto no cdigo na pgina 319 Salvamento e memorizao de padres de pesquisa na pgina 320 Otimizao da rea de trabalho para desenvolvimento visual na pgina 551 Exibio de registros de banco de dados na pgina 583

Linguagens com suporte


Alm dos recursos de edio de texto, o Adobe Dreamweaver CS5 oferece vrios recursos, como dicas de cdigo, para ajudar voc a codificar nas seguintes linguagens:

HTML XHTML CSS JavaScript Linguagem de markup do ColdFusion (CFML) VBScript (para ASP) C# e Visual Basic (para ASP.NET) JSP PHP
No h suporte para outras linguagens, como Perl, nos recursos de codificao especficos de linguagem no Dreamweaver; por exemplo, voc pode criar e editar arquivos Perl, mas as dicas de cdigo no se aplicam a essa linguagem.

Markup invlido
Se o documento contiver um cdigo invlido, o Dreamweaver exibir esse cdigo na Visualizao de design e, opcionalmente, o realar na Visualizao de cdigo. Se voc selecionar o cdigo na visualizao, o Inspetor de propriedades exibir as informaes sobre por que ele invlido e como corrigi-lo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 293


Trabalho com cdigo de pgina

Nota: A opo para realar cdigos invlidos na Visualizao de cdigo fica desativada por padro. Para acion-la, alterne para a Visualizao de cdigo (Visualizao > Cdigo) e depois selecione Visualizao > Opes da visualizao de cdigo > Realar cdigo invlido. Voc tambm pode especificar preferncias para regravar automaticamente vrios tipos de cdigo invlido ao abrir um documento.

Modificao automtica de cdigo


Voc pode definir opes que instruam o Dreamweaver limpar automaticamente o cdigo manuscrito de acordo com os critrios especificados. No entanto, o cdigo nunca regravado, a menos que as opes de regravao de cdigo sejam ativadas ou que voc execute uma ao que altere o cdigo. Por exemplo, o Dreamweaver no altera o espao em branco nem altera as maisculas e minsculas dos atributos, a menos que voc use o comando Aplicar Formatao de Origem. Algumas dessas opes de regravao de cdigo so ativadas por padro. Os recursos de Roundtrip HTML do Dreamweaver permitem que voc mova os documentos para frente e para trs entre um editor HTML baseado em texto e o Dreamweaver com pouco ou nenhum efeito no contedo e na estrutura do cdigo-fonte HTML original do documento. Esses recursos incluem:

Voc pode usar um editor de texto de terceiros para editar o documento atual. Por padro, o Dreamweaver no altera o cdigo criado ou editado em outros editores HTML, mesmo se o cdigo
for invlido, a menos que voc ative as opes de regravao de cdigo.

O Dreamweaver no altera tags que no reconhea incluindo as tags XML porque ele no tem critrios que
possa usar para julg-las. Se uma tag no reconhecida sobrepuser outra tag (por exemplo, <MyNewTag><em>text</MyNewTag></em>), o Dreamweaver a marcar como um erro, mas no regravar o cdigo.

Se desejar, defina o Dreamweaver para realar o cdigo invlido na Visualizao de cdigo (em amarelo). Quando
voc selecionar uma seo realada, o Inspetor de propriedades exibir as informaes sobre como corrigir o erro.

Cdigo XHTML
O Dreamweaver gera o novo cdigo XHTML e limpa o cdigo XHTML existente de uma forma que atenda maioria dos requisitos XHTML. As ferramentas que voc precisa para atender a alguns requisitos XHTML restantes tambm so fornecidos. Nota: Alguns requisitos tambm so necessrios em vrias verses HTML. A tabela a seguir descreve os requisitos XHTML que o Dreamweaver atende automaticamente:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 294


Trabalho com cdigo de pgina

Requisito XHTML

Aes do Dreamweaver

Deve haver uma declarao DOCTYPE no documento anterior ao Adiciona um XHTML DOCTYPE a um documento XHTML: elemento raiz e a declarao deve referenciar um dos trs arquivos de definio de tipo de documento (DTD) para XHTML (strict, transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ou frameset).
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

Se o documento XHTML tiver um conjunto de quadros:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">

O elemento raiz do documento deve ser html e o elemento html deve designar o espao para nome XHTML.

Adiciona o atributo namespace ao elemento html, da seguinte maneira:


<html xmlns="http://www.w3.org/1999/xhtml">

Um documento padro deve ter os elementos estruturais head, title e body. Um documento de conjunto de quadros deve ter os elementos estruturais head, title e frameset. Todos os elementos do documento devem ser adequadamente aninhados:
<p>Este um <i>pssimo exemplo.</p></i> <p>Este um <i>bom exemplo.</i></p>

Um documento padro inclui os elementos head, title e body. Um documento de conjunto de quadros inclui os elementos head, title e frameset. Gera um cdigo corretamente aninhado e, ao limpar o XHTML, corrige o aninhamento do cdigo que no foi gerado pelo Dreamweaver.

Todos os nomes de elemento e atributo devem ser minsculos.

Fora os nomes de elemento e atributo HTML a estarem em minsculas no cdigo XHTML gerado e ao limpar o XHTML, independentemente das preferncias de minsculas ou maisculas da tag e do atributo.

Cada elemento deve ter uma tag de finalizao, a no ser que isso seja Insere tags de finalizao no cdigo gerado e ao limpar o XHTML. declarado na DTD como EMPTY. Insere elementos vazios com um espao antes da barra de Os elementos vazios devem ter uma tag de finalizao ou a tag de abertura deve ser finalizada com />. Por exemplo, <br> no vlido. fechamento nas tags vazias do cdigo gerado e ao limpar o XHTML. A forma correta <br></br> ou <br/>. Estes so os elementos vazios: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta e param. Para compatibilidade com verses anteriores em navegadores que no so ativados para XML, deve haver um espao antes de /> (por exemplo, <br />, e no <br/>). Os atributos no podem ser minimizados; por exemplo, <td nowrap> no vlido. A forma correta <td nowrap="nowrap">. Isso afeta os seguintes atributos: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly e selected. Todos os valores de atributo devem ser envolvidos por aspas. Insere pares completos de atributo/valor no cdigo gerado e ao limpar o XHTML. Nota: Se um navegador HTML no oferecer suporte a HTML 4, pode ser que ele no consiga interpretar esses atributos booleanos quando eles aparecerem na forma completa.

Delimita os valores de atributo com aspas no cdigo gerado e ao limpar o XHTML. Define os atributos name e id para o mesmo valor, sempre que o atributo name definido por um Inspetor de propriedades no cdigo gerado pelo Dreamweaver e ao limpar o XHTML.

Os seguintes elementos devem ter um atributo id, bem como um atributo name: a, applet, form, frame, iframe, img e map. Por exemplo, <a name="intro">Introduction</a> no vlido; a forma correta
<a id="intro">Introduction</a> ou <a id="section1" name="intro"> Introduction</a>.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 295


Trabalho com cdigo de pgina

Requisito XHTML

Aes do Dreamweaver

No caso dos atributos com valores de um tipo enumerado, os valores Fora os valores de tipo enumerado a serem minsculos no cdigo devem estar em minsculas. gerado e ao limpar o XHTML. Um valor de tipo enumerado um valor que consta em uma lista especificada de valores permitidos; por exemplo, o atributo align tem os seguintes valores permitidos: center, justify, left e right. Todos os elementos de script e estilo devem ter um atributo type. (O atributo type do elemento script tem sido obrigatrio desde o HTML 4, quando o atributo language se tornou obsoleto.) Todos os elementos img e area devem ter um atributo alt. Define os atributos type e language nos elementos script e o atributo type nos elementos style, no cdigo gerado e ao limpar o XHTML. Define esses atributos no cdigo gerado e, ao limpar o XHTML, relata atributos alt ausentes.

Expresses regulares
As expresses regulares so padres que descrevem combinaes de caracteres em texto. Use-as nas pesquisas de cdigo para descrever conceitos como linhas que comeam com var e valores de atributo que contm um nmero. A tabela a seguir lista os caracteres especiais nas expresses regulares, seus significados e exemplos de uso. Para procurar um texto que contenha um dos caracteres especiais da tabela, aplique o escape ao caractere especial precedendo-o com uma barra invertida. Por exemplo, para procurar o asterisco real na frase some conditions apply*, o padro de pesquisa pode ter a seguinte aparncia: apply\*. Se voc no aplicar o escape ao asterisco, encontrar todas as ocorrncias de apply (bem como qualquer ocorrncia de appl, applyy e applyyy), e no apenas as seguidas por asterisco.
Caractere ^ Corresponde a Incio da entrada ou linha. Exemplo
^T corresponde a T em This good earth, mas no em Uncle Toms Cabin h$ corresponde a h em teach, mas no em teacher um* corresponde a um em rum, umm em yummy e u

$ *

Fim da entrada ou linha. O caractere precedente 0 ou mais vezes.

em huge + O caractere precedente uma ou mais vezes.


um+ corresponde a um em rum e umm em yummy,

mas no tem nenhuma correspondncia em huge ? O caractere precedente no mximo uma vez (ou st?on corresponde a son em Johnson e ston em seja, indica que o caractere precedente Johnston, mas no tem nenhuma correspondncia em opcional). Appleton ou tension Qualquer caractere nico, exceto o caractere de .an corresponde a ran e can na frase bran muffins can be tasty nova linha. x ou y
FF0000|0000FF corresponde a FF0000 em bgcolor="#FF0000" e 0000FF em font color="#0000FF" o{2} corresponde a oo em loom e s duas primeiras letras

x|y

{n}

Exatamente n ocorrncias do caractere precedente.

o em mooooo, mas no tem nenhuma correspondncia em money


F{2,4} corresponde a FF em #FF0000 e s quatro

{n,m}

No mnimo n e no mximo m ocorrncias do caractere precedente. Qualquer um dos caracteres entre colchetes. Especifique uma faixa de caracteres com um hfen (por exemplo, [a-f] equivale a [abcdef]).

primeiras letras F em #FFFFFF


[e-g] corresponde a e em bed, f em folly e g em guard

[abc]

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 296


Trabalho com cdigo de pgina

Caractere [^abc]

Corresponde a Qualquer caractere que no est entre colchetes. Especifique uma faixa de caracteres com um hfen (por exemplo, [^a-f] equivale a [^abcdef]). Um limite de palavra (como um espao ou um retorno de carro). Algo que no seja um limite de palavra.

Exemplo
[^aeiou] corresponde inicialmente a r em orange, b

em book e k em eek!

\b

\bb corresponde a b em book, mas no tem nenhuma

correspondncia em goober ou snob


\Bb corresponde a b em goober, mas no tem nenhuma

\B

correspondncia em book \d Qualquer caractere de dgito. Equivalente a [09]. Qualquer caractere que no seja dgito. Equivalente a [^0-9]. Feed de formulrio. Feed de linha. Retorno de carro. Qualquer caractere nico de espao em branco, \sbook corresponde a book em blue book, mas no tem incluindo espao, tabulao, feed de formulrio nenhuma correspondncia em notebook ou feed de linha. Qualquer caractere nico de espao que no seja em branco. Uma tabulao. Qualquer caractere alfanumrico, incluindo sublinhado. Equivalente a [A-Za-z0-9_]. Qualquer caractere que no seja alfanumrico. Equivalente a [^A-Za-z0-9_]. Caractere de retorno. Verifique se voc desmarcou a opo Ignorar diferenas de espao em branco ao realizar essa pesquisa, caso no esteja usando expresses regulares. Observe que isso corresponde a um caractere especfico, e no noo geral de uma quebra de linha. Por exemplo, isso no corresponde a uma tag <br> ou <p>. Os caracteres de retorno aparecem como espaos na Visualizao de design, e no como quebras de linha. b\w* corresponde a barking em the barking dog, e big e black em the big black dog \W corresponde a & em Jake&Mattie e % em 100%
\Sbook corresponde a book em notebook, mas no tem \d corresponde a 3 em C3PO e 2 em apartment 2G

\D

\D corresponde a S em 900S e Q em Q45

\f \n \r \s

\S

nenhuma correspondncia em blue book

\t \w

\W

Control+Enter ou Shift+Enter (Windows), ou Control+ Return ou Shift+Return ou Command+ Return (Macintosh)

Use parnteses para executar agrupamentos na expresso regular que ser referenciada posteriormente. Em seguida, use $1, $2, $3 e assim sucessivamente, no campo Substituir por para se referir ao primeiro, segundo, terceiro e subseqentes agrupamentos entre parnteses. Nota: Na caixa Procurar por, para se referir a um agrupamento entre parnteses anterior na expresso regular, use \1, \2, \3 e assim por diante, em vez de $1, $2, $3. Por exemplo, a procura por (\d+)\/(\d+)\/(\d+) e sua substituio por $2/$1/$3 trocar o dia e o ms em uma data separada por barras, convertendo entre datas em estilo americana e em estilo europeu.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 297


Trabalho com cdigo de pgina

Cdigo de comportamento de servidor


Quando voc desenvolver uma pgina dinmica e selecionar um comportamento de servidor no painel Comportamentos de servidor, o Dreamweaver inserir um ou mais blocos de cdigo na pgina para fazer com que o comportamento de servidor funcione. Se voc alterar manualmente o cdigo em um bloco de cdigos, no poder usar mais painis como Ligaes e Comportamentos de servidor. O Dreamweaver procura padres especficos no cdigo de pgina para detectar comportamentos de servidor e exibi-los no painel Comportamentos de servidor. Se voc alterar o cdigo em um bloco de cdigos de qualquer forma, o Dreamweaver no poder mais detectar o comportamento do servidor e exibi-lo no painel Comportamentos de servidor. No entanto, o comportamento do servidor ainda existir na pgina e voc no poder edit-lo no ambiente de codificao do Dreamweaver.

Configurao do ambiente de codificao


Uso de reas de trabalho orientadas a codificador
Voc pode adaptar o ambiente de codificao no Dreamweaver para que atenda s suas necessidades de trabalho. Por exemplo, voc pode alterar o modo de exibio do cdigo, configurar atalhos de teclado diferentes ou importar e usar sua biblioteca de tags favorita. O Dreamweaver vem com vrios layouts de reas de trabalho desenvolvidos para obter a experincia de codificao ideal. No alternador de rea de trabalho da Barra de aplicativos, voc pode selecionar as reas de trabalho Desenvolvedor de aplicativo, Desenvolvedor de aplicativo Plus, Codificador e reas de trabalho do Codificador Plus. Todas essas reas de trabalho mostram, por padro, a Visualizao de cdigo (na janela Documento inteira ou nas visualizaes de cdigo e de design) e tm painis encaixados no lado esquerdo da tela. Todos, menos o Desenvolvedor de aplicativo Plus, eliminam o Inspetor de propriedades da visualizao padro. Se nenhuma das reas de trabalho predefinidas oferecer exatamente o que voc precisa, possvel personalizar seu prprio layout de rea de trabalho, abrindo e encaixando painis no local desejado e, em seguida, salvando a rea de trabalho como rea personalizada.

Mais tpicos da Ajuda


Gerenciamento de janelas e painis na pgina 23 Salvamento e alternncia de espaos de trabalho na pgina 27 Personalizar atalhos de teclado na pgina 33 Gerenciamento de bibliotecas de tags na pgina 341

Visualizao de cdigo
Voc pode visualizar o cdigo-fonte do documento atual de vrias maneiras: exibindo-o na janela Documento atravs da ativao da Visualizao de cdigo, dividindo a janela Documento para exibir a pgina e seu cdigo associado ou trabalhando no Inspetor de cdigo em uma janela de codificao separada. O Inspetor de cdigo funciona exatamente como a Visualizao de cdigo. Considere-o uma Visualizao de cdigo do documento atual que pode ser desanexada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 298


Trabalho com cdigo de pgina

Mais tpicos da Ajuda


Alterao do formato de cdigo na pgina 300 Definir preferncias de dicas de cdigo na pgina 306 Definio das cores de cdigo na pgina 303

Visualizao de cdigo na janela Documento


Selecione Exibir > Cdigo.

Codificao e edio de uma pgina simultaneamente na janela Documento


1 Selecione Exibir > Cdigo e design.

O cdigo aparece no painel superior e a pgina aparece no painel inferior.


2 Para exibir a pgina na parte superior, selecione Visualizao de design visvel, no menu Opes de visualizao da

barra de ferramentas Documento.


3 Para ajustar o tamanho dos painis na janela Documento, arraste a barra divisora para a posio desejada. A barra

divisora est localizada entre os dois painis. A Visualizao de cdigo atualizada automaticamente quando voc fizer alteraes na Visualizao de design. No entanto, aps fazer alteraes na Visualizao de cdigo, atualize manualmente o documento na Visualizao de design clicando em Visualizao de design ou pressionando F5.

Visualizao de cdigo em uma janela separada com o Inspetor de cdigo


O Inspetor de cdigo permite que voc trabalhe em uma janela de codificao separada, exatamente como na Visualizao de cdigo.
Selecione Janela > Inspetor de cdigo. A barra de ferramentas inclui as seguintes opes: Gerenciamento de arquivos Insere ou obtm o arquivo. Visualizar/depurar no navegador Visualiza ou depura o documento em um navegador. Atualizar Visualizao de design Atualiza o documento na Visualizao de design para que ele reflita quaisquer alteraes feitas no cdigo. As alteraes feitas no cdigo s aparecero automaticamente na Visualizao de design depois que voc executar determinadas aes, como salvar o arquivo ou clicar neste boto. Referncia Abre o painel Referncia. Consulte Uso do material de referncia a linguagem na pgina 320. Navegao de cdigo Permite mover-se rapidamente pelo cdigo. Consulte Acessar a uma funo JavaScript ou VBScript na pgina 316. Opes de visualizao Permite que voc determine como o cdigo ser exibido. Consulte Definio da aparncia do

cdigo na pgina 299. Para usar a Barra de ferramentas de codificao na lateral esquerda da janela, consulte Inserir cdigo com a Barra de ferramentas de codificao na pgina 309.

Personalizao de atalhos de teclado


Voc pode usar seus atalhos de teclado favoritos no Dreamweaver. Se estiver acostumado a usar atalhos de teclado especficos, por exemplo, Shift+Enter para adicionar uma quebra de linha ou Control+G para ir a uma posio especfica no cdigo, voc poder adicion-los em Dreamweaver usando o Editor de atalhos de teclado. Para obter instrues, consulte Personalizar atalhos de teclado na pgina 33.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 299


Trabalho com cdigo de pgina

Mais tpicos da Ajuda


Trabalho com snippets de cdigo na pgina 318

Abertura de arquivos na Visualizao de cdigo por padro


Quando voc abre um tipo de arquivo que normalmente no contm nenhum HTML (por exemplo, um arquivo JavaScript), o arquivo aberto na Visualizao de cdigo (ou no Inspetor de cdigo), e no na Visualizao de cdigo. possvel especificar quais tipos de arquivo sero abertos na Visualizao de cdigo.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione Tipos de arquivos/editores na lista Categoria esquerda. 3 Na caixa Abrir na Visualizao de cdigo, adicione a extenso do tipo de arquivo que voc deseja abrir

automaticamente na Visualizao de cdigo. Digite um espao entre as extenses de nome de arquivo. possvel adicionar quantas extenses desejar.

Mais tpicos da Ajuda


Uso de um editor externo na pgina 303 Definir preferncias do Validador na pgina 326

Configuraes das preferncias de codificao


Sobre as preferncias de codificao
Voc pode definir as preferncias de codificao como formatao e cores de cdigo, entre outros, para atender s suas necessidades especficas. Nota: Para definir preferncias avanadas, use o Editor de bibliotecas de tags (consulte Gerenciamento de bibliotecas de tags na pgina 341).

Definio da aparncia do cdigo


Voc pode definir a quebra automtica de linha, exibir nmeros de linha para o cdigo, realar o cdigo invlido, definir a cor da sintaxe dos elementos de cdigo, definir o recuo e exibir caracteres ocultos no menu Exibir > Opes de visualizao de cdigo.
1 Visualize um documento na Visualizao de cdigo ou no Inspetor de cdigo. 2 Siga um destes procedimentos:

Selecione Exibir > Opes de visualizao de cdigo Clique no boto Opes de visualizao
ou no Inspetor de cdigo.
3 Marque ou desmarque qualquer uma destas opes:
Quebra automtica de palavra Quebra automaticamente a linha de cdigo para que voc possa visualiz-lo sem rolar

na barra de ferramentas na parte superior da Visualizao de cdigo

a tela horizontalmente. Esta opo no insere quebras de linha; ela apenas facilita a visualizao de cdigo.
Nmeros de linha Exibe nmeros de linha na lateral do cdigo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 300


Trabalho com cdigo de pgina

Caracteres ocultos Exibe caracteres especiais no lugar do espao em branco. Por exemplo, um ponto substitui cada

espao, uma divisa dupla substitui cada tabulao e um marcador de pargrafo substitui cada quebra de linha. Nota: As quebras de linha manuais usadas pelo Dreamweaver no so exibidas com um marcador de pargrafo.
Realar cdigo invlido Faz com que o Dreamweaver realce em amarelo todo o cdigo HTML invlido. Quando voc selecionar uma tag invlida, o Inspetor de propriedades exibir as informaes sobre como corrigir o erro. Sinalizao da sintaxe por cores Ativa ou desativa a codificao por cores. Para informaes sobre a alterao do esquema de cores, consulte Definio das cores de cdigo na pgina 303. Recuar automaticamente Faz com que o cdigo recue automaticamente quando voc pressiona Enter enquanto escreve o cdigo. A nova linha de cdigo recuada no mesmo nvel da linha anterior. Para obter informaes sobre a alterao do espaamento do recuo, consulte a opo Tamanho da tabulao em Alterao do formato de cdigo na pgina 300.

Mais tpicos da Ajuda


Visualizao de cdigo na pgina 297 Viso geral da barra de ferramentas de codificao na pgina 12 Definir preferncias de dicas de cdigo na pgina 306

Alterao do formato de cdigo


Voc pode alterar a aparncia do cdigo especificando preferncias de formatao, como recuo, tamanho da linha e uso de maisculas/minsculas dos nomes de tag e atributo. Todas as opes de formatao de cdigo, exceto a opo Ignorar maiscula/minscula de, sero aplicadas somente aos novos documentos ou s adies a documentos criadas subseqentemente. Para reformatar documentos HTML existentes, abra o documento e selecione Comandos > Aplicar Formatao de Origem.
1 Selecione Editar > Preferncias. 2 Selecione Formato do Cdigo na lista Categoria esquerda. 3 Defina uma das seguintes opes:
Recuo Indica se o cdigo gerado pelo Dreamweaver deve ser recuado (de acordo com as regras de recuo especificadas

nessas preferncias) ou no. Nota: A maioria das opes de recuo nesta caixa de dilogo se aplica somente ao cdigo gerado pelo Dreamweaver, e no ao cdigo digitado. Para fazer com que cada nova linha do cdigo digitado recue no mesmo nvel da linha anterior, selecione a opo Exibir > Recuo automtico das opes de visualizao de cdigo. Para obter mais informaes, consulte Definio da aparncia do cdigo na pgina 299.
Com (Caixa de texto e menu pop-up) Especifica quantos espaos ou tabulaes o Dreamweaver deve usar para recuar o cdigo gerado. Por exemplo, se voc digitar 3 na caixa e selecionar Tabulaes no menu pop-up, o cdigo gerado pelo Dreamweaver ser recuado por meio de trs caracteres de tabulao para cada nvel de recuo. Tamanho da tabulao Determina o tamanho de cada caractere de tabulao na Visualizao de cdigo. Por exemplo, se a opo Tamanho da tabulao for definida como 4, cada tabulao ser exibida na Visualizao de cdigo como um espao em branco de quatro caracteres. Se, alm disso, a opo Recuar com for definida como 3 Tabulaes, o cdigo gerado pelo Dreamweaver ser recuado usando trs caracteres de tabulao para cada nvel de recuo, que aparece na Visualizao de cdigo como um espao em branco de doze caracteres.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 301


Trabalho com cdigo de pgina

Nota: O Dreamweaver aplica o recuo usando espaos ou tabulaes. Ele no converte uma srie de espaos em uma tabulao ao inserir cdigo.
Quebra automtica de linha Insere um caractere de quebra de linha (tambm conhecido como quebra de linha

incondicional) quando uma linha atinge a largura de coluna especificada. (O Dreamweaver insere caracteres de quebra de linha somente em lugares em que eles no alteram a aparncia do documento nos navegadores. Portanto, algumas linhas podem permanecer maiores do que especificado pela opo Quebra automtica de linha.) Em contraposio, a opo Quebra automtica de linha na Visualizao de cdigo exibe linhas longas (que ultrapassam a largura da janela) como se elas contivessem caracteres de quebra de linha, mas na verdade no insere esses caracteres.
Tipo de quebra de linha Especifica o tipo de servidor remoto (Windows, Macintosh ou UNIX) que hospeda o site

remoto. A escolha do tipo corretor de caracteres de quebra de linha garante que o cdigo-fonte HTML aparecer corretamente quando visualizado no servidor remoto. Essa configurao tambm ser til que voc estiver trabalhando com um editor de texto externo que reconhea determinados tipos de quebras de linha. Por exemplo, use CR LF (Windows) se o Bloco de Notas for o editor externo e use CR (Macintosh) se o SimpleText for o editor externo. Nota: No caso dos servidores conectados atravs do FTP, esta opo se aplica somente ao modo de transferncia binrio. O modo de transferncia ASCII do Dreamweaver ignora esta opo. Se voc baixar os arquivos usando o modo ASCII, o Dreamweaver definir as quebras de linha com base no sistema operacional do seu computador. Se voc carregar os arquivos usando o modo ASCII, as quebras de linha sero definidas como CR LF.
Padro de maisc./minsc. da tag e Padro de maisc./minsc. do atributo Controla o uso de maisculas/minsculas dos nomes de tag e atributo. Estas opes se aplicam a tags e atributos inseridos ou editados na Visualizao de design, mas no se aplicam a tags e atributos digitados diretamente na Visualizao de cdigo ou a tags e atributos j presentes em um documento quando estes so abertos (a menos que voc tambm selecione uma ou ambas as opes Ignorar maiscula/minscula de:).

Nota: Essas preferncias se aplicam somente a pginas HTML. O Dreamweaver as ignora em pginas XHTML porque as tags e os atributos em maisculas so XHTML invlidos.
Ignorar maiscula/minscula de: Tags e Atributos Especifica se as opes de maisculas/minsculas especificadas sero sempre foradas, inclusive quando voc abrir um documento HTML existente. Quando voc selecionar uma dessas opes e clicar em OK para ignorar a caixa de dilogo, todas as tags ou atributos do documento atual sero imediatamente convertidos no uso de maisculas/minsculas especificado, assim como todas as tags ou atributos de cada documento que voc abrir desse momento em diante (at voc desmarcar esta opo novamente). As tags ou os atributos digitados na Visualizao de cdigo e no Quick Tag Editor tambm so convertidos no uso de maisculas/minsculas, bem como as tags ou os atributos que voc insere usando o painel Inserir. Por exemplo, se voc deseja que os nomes de tag sejam sempre convertidos em minsculas, especifique minsculas na opo Padro de maisc./minsc. da tag e selecione a opo Ignorar maiscula/minscula de: Tags. Quando voc abrir um documento que contenha nomes de tag em maisculas, o Dreamweaver os converter em minsculas.

Nota: As verses antigas do HTML permitiam nomes de tag e atributo em maisculas ou minsculas, mas o XHTML requer minsculas nos nomes de tag e atributo. A Web est adotando XHTML; portanto, geralmente melhor usar nomes de tag e atributo em minsculas.
Tag TD: No incluir quebra de linha na tag TD Lida com um problema de processamento que ocorre em alguns navegadores antigos quando h espao em branco ou quebras de linha imediatamente aps uma tag <td> ou imediatamente antes de uma tag </td>. Quando voc seleciona esta opo, o Dreamweaver no grava quebras de linha depois ou antes da tag <td>, mesmo se a formatao na Biblioteca de tags indicar que a quebra de linha deve existir. Formatao avanada Permite definir opes de formatao do cdigo CSS (folhas de estilo em cascata) e das tags e

atributos individuais no Editor de bibliotecas de tags.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 302


Trabalho com cdigo de pgina

Caractere de espao em branco (Apenas verso em japons) Permite selecionar &nbsp; ou espao Zenkaku para

cdigo HTML. O espao em branco selecionado nesta opo ser usado para tags vazias durante a criao de uma tabela e quando a opo Permitir vrios espaos consecutivos estiver ativada nas pginas de codificao em japons.

Mais tpicos da Ajuda


Formatao do cdigo CSS na pgina 144 Definir preferncias de dicas de cdigo na pgina 306

Definio das preferncias de regravao de cdigo


Use as preferncias de regravao de cdigo a fim de especificar como e se o Dreamweaver modificar o cdigo enquanto os documentos so abertos, ao copiar e colar elementos de formulrio, e ao digitar valores de atributo e URLs usando ferramentas como o Inspetor de propriedades. Essas preferncia no tm efeito quando voc edita HTML ou scripts na Visualizao de cdigo. Se voc desativar as opes de regravao, os itens de markup invlidos sero exibidos na janela Documento para o HTML que seria regravado.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione Regravao de cdigo na lista Categoria esquerda. 3 Defina uma das seguintes opes:
Corrigir tags abertas e aninhadas incorretamente Regrava tags de sobreposio. Por exemplo,
<b><i>texto</b></i> regravado como <b><i>texto</i></b>. Esta opo tambm insere aspas e colchetes de fechamento caso eles estejam ausentes.

Renomear itens de formulrio ao colar Garante que voc no ter nomes duplicados de objetos de formulrio. Esta

opo ativada por padro. Nota: Diferente das outras opes nesta caixa de dilogo de preferncia, esta opo no se aplica quando voc abre um documento, mas somente quando voc copia e cola um elemento de formulrio.
Remover tags de finalizao adicionais Exclui tags de finalizao que no possuem uma tag de abertura

correspondente.
Avisar ao corrigir ou remover tags Exibe um resumo do HTML tecnicamente invlido que o Dreamweaver tentou

corrigir. O resumo indica o local do problema (usando nmeros de linha e coluna) para que voc possa localizar a correo e garantir que ela est sendo processado conforme esperado.
Nunca regravar cdigo: Em arquivos com extenses Impede que o Dreamweaver regrave cdigo em arquivos com as extenses especificadas. Esta opo particularmente til para arquivos que contenham tags de terceiros. Codificar <, >, & e " em valores de atributo usando & Garante que os valores de atributo digitados ou editados usando ferramentas do Dreamweaver como o Inspetor de propriedades contero apenas caracteres legais. Esta opo ativada por padro.

Nota: Esta opo e as seguintes no se aplicam s URLs digitadas na Visualizao de cdigo. Alm disso, elas no ocasionam a alterao do cdigo j existente em um arquivo.
No codificar caracteres especiais Impede que o Dreamweaver altere URLs para que usem apenas caracteres legais.

Esta opo ativada por padro.


Codificar caracteres especiais em URLs utilizando &# Garante que, ao digitar ou editar URLs usando ferramentas do

Dreamweaver como o Inspetor de propriedades, essas URLs contero somente caracteres legais.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 303


Trabalho com cdigo de pgina

Codificar caracteres especiais em URLs utilizando % Opera da mesma maneira que a opo anterior, mas usa um

mtodo diferente de codificao de caracteres especiais. Esse mtodo de codificao (atravs do sinal de porcentagem) pode ser mais compatvel com os navegadores antigos, mas no funciona bem com os caracteres de alguns idiomas.

Mais tpicos da Ajuda


Limpar arquivos em HTML do Microsoft Word na pgina 71 Definir preferncias de dicas de cdigo na pgina 306

Definio das cores de cdigo


Use as preferncias de codificao por cor a fim de especificar cores para as categorias gerais de tags e elementos de cdigo, como tags relacionadas a formulrio ou identificadores JavaScript. Para definir preferncias de cor para uma tag especfica, edite a definio da tag no Editor de bibliotecas de tags.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione Codificao por cores na lista Categoria esquerda. 3 Selecione um tipo de documento da lista Tipos de documentos. Quaisquer edies que voc fizer s preferncias de

codificao por cores afetar todos os documentos desse tipo.


4 Clique no boto Editar esquema de cores. 5 Na caixa de dilogo Editar esquema de cores, selecione um elemento de cdigo na lista Estilos para e defina a cor

do texto, a cor do fundo e (opcional) o estilo (negrito, itlico ou sublinhado). O cdigo de amostra no painel de visualizao alterado para que corresponda s novas cores e estilos. Clique em OK para salvar as alteraes e feche a caixa de dilogo Editar esquema de cores.
6 Faa quaisquer outras selees necessrias nas preferncias de codificao por cores e clique em OK.
Fundo padro define a cor de fundo padro para a Visualizao de cdigo e o Inspetor de cdigo. Caracteres ocultos define a cor dos caracteres ocultos Plano de fundo do Cdigo ativo define a cor do fundo para a Visualizao de cdigo ativo. A cor padro amarelo. Alteraes no Cdigo ativo define a cor de destaque do cdigo que alterado na Visualizao de cdigo ativo. A cor

padro rosa.
Plano de fundo de somente leitura define a cor de fundo para o texto somente leitura.

Mais tpicos da Ajuda


Personalizao das preferncias de codificao por cor de um modelo na pgina 421 Edio de bibliotecas, tags e atributos na pgina 342 Visualizao de cdigo ativo na pgina 288 Definir preferncias de dicas de cdigo na pgina 306

Uso de um editor externo


Voc pode especificar um editor externo para a edio de arquivos com extenses especficas. Por exemplo, possvel iniciar um editor de texto como BBEdit, Bloco de Notas ou TextEdit no Dreamweaver a fim de editar arquivos JavaScript (JS). Voc pode atribuir editores externos diferentes para extenses diferentes.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 304


Trabalho com cdigo de pgina

Mais tpicos da Ajuda


Abertura de arquivos na Visualizao de cdigo por padro na pgina 299

Definio de um editor externo para um tipo de arquivo


1 Selecione Editar > Preferncias. 2 Selecione Tipos de arquivos/editores na lista Categoria esquerda, defina as opes e clique em OK.
Abrir na Visualizao de cdigo Especifica as extenses de nome de arquivo abertas automaticamente na Visualizao

de cdigo do Dreamweaver.
Editor de cdigo externo Especifica o editor de texto a ser usado. Recarregar arquivos modificados Especifica o comportamento quando o Dreamweaver detecta que as alteraes

foram feitas externamente em um documento aberto no Dreamweaver.


Salvar ao iniciar Especifica se o Dreamweaver sempre deve salvar o documento atual antes de iniciar o editor, nunca salvar o documento ou perguntar a voc se deseja salvar cada vez que iniciar o editor externo. Fireworks Especifica editores para vrios tipos de arquivo de mdia.

Inicializao de um editor de cdigo externo


Selecione Editar > Editar com editor externo.

Gravao e edio do cdigo


Dicas de cdigo
O recurso de dicas de cdigo ajuda a inserir e editar o cdigo rapidamente e sem erros. Conforme voc digita os caracteres na Visualizao de cdigo, voc v uma lista de candidatos que completam automaticamente a sua entrada. Por exemplo, ao digitar o primeiro caractere de uma tag, atributo ou nome de propriedade CSS, voc v uma lista de opes que comeam com esses caracteres. Esse recurso simplifica a insero e edio de cdigos. Voc tambm pode usar esse recurso para ver os atributos disponveis para uma tag, os parmetros disponveis para uma funo ou os mtodos disponveis para um objeto. As dicas de cdigo ficam disponveis para vrios tipos de cdigo. Quando voc digita o caractere inicial de um tipo de cdigo em particular, voc v uma lista de candidatos apropriados. Por exemplo, para exibir uma lista de dicas de cdigos para nomes de tags HTML, digite um colchete angular direito (<). De forma similar, para exibir dicas de cdigo JavaScript, digite um ponto (operador ponto) aps um objeto. Para obter os melhores resultados, especialmente ao usar as dicas de cdigos para funes e objetos, defina a opo Atraso na caixa de dilogo de preferncias Dicas de cdigo para 0 segundos. O recurso de dica de cdigo tambm reconhece classes personalizadas de JavaScript que no foram compiladas na linguagem. Voc mesmo pode gravar essas classes personalizadas e adicion-las atravs das bibliotecas de terceiros, como Prototype. A lista de dicas de cdigo desaparece quando voc pressiona Backspace (Windows) ou Delete (Macintosh). Para assistir a um tutorial em vdeo sobre dicas de cdigos, consulte www.adobe.com/go/lrvid4048_dw_br. Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre o suporte de JavaScript no Dreamweaver, consulte www.adobe.com/go/dw10javascript_br.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 305


Trabalho com cdigo de pgina

Suporte a idiomas e tecnologias


O Dreamweaver suporta dicas de cdigos para os seguintes idiomas e tecnologias:

HTML CSS DOM (Modelo de objeto do documento) JavaScript (inclui dicas de classe personalizada) Ajax Spry Adobe ColdFusion JSP PHP MySQL ASP JavaScript ASP VBScript ASP.NET C# ASP.NET VB

Exibio de um menu de dicas de cdigo


O menu de dicas de cdigos aparece automaticamente conforme voc digita na Visualizao de cdigo. Mas voc tambm pode exibir manualmente o menu de dicas de cdigos, sem digitar.
1 Na Visualizao de cdigo (Janela > Cdigo), coloque o ponto de insero dentro de uma tag. 2 Pressione Control+Barra de espaos.

Insero de cdigo na Visualizao de cdigo usando dicas de cdigos


1 Digite o incio de uma parte do cdigo. Por exemplo, para inserir uma tag, digite um colchete angular direito (<).

Para inserir um atributo, coloque o ponto de insero imediatamente aps um nome de tag e pressione a Barra de espaos. Uma lista de itens (como nomes de tag ou de atributo) exibida. Para fechar a lista a qualquer momento, pressione Esc.
2 Role pela lista usando a barra de rolagem ou as teclas de seta para cima e para baixo. 3 Para inserir um item da lista, clique duas vezes nele ou selecione-o e pressione Enter (Windows) ou Return

(Macintosh). Se um estilo CSS recm-criado no aparecer em uma lista de dicas de cdigo de estilos CSS, selecione Atualizar lista de estilos na lista de dicas de cdigo. Se a Visualizao de design estiver visvel, algumas vezes um cdigo invlido aparece temporariamente na Visualizao de design depois que voc seleciona Atualizar lista de estilos. Para remover aquele cdigo invlido da Visualizao de design, pressione F5 para atualizar aps concluir a insero do estilo.
4 Para inserir uma tag de finalizao, digite </ (barra).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 306


Trabalho com cdigo de pgina

Nota: Por padro, o Dreamweaver determina quando necessrio fechar uma tag e a insere automaticamente. Voc pode alterar esse comportamento padro de forma que o Dreamweaver insira uma tag de finalizao depois que voc digitar o colchete angular final (>) da tag de abertura. Como alternativa, o comportamento padro pode ser no inserir tag nenhuma. Selecione Editar > Preferncias > Dicas de cdigo e, em seguida, selecione uma das opes Tags de finalizao.

Edio de uma tag usando dicas de cdigo


Para substituir um atributo por um atributo diferente, exclua o atributo e seu valor. Em seguida, acrescente um
atributo e seu valor, como descrito no procedimento anterior.

Para alterar um valor, exclua o valor e adicione outro valor conforme descrito no procedimento anterior.

Atualizao de dicas de cdigos JavaScript


O Dreamweaver atualiza automaticamente a lista de dicas de cdigos disponveis conforme voc trabalha em arquivos JavaScript. Por exemplo, suponha que voc est trabalhando em um arquivo HTML principal e alterne para um arquivo JavaScript para fazer uma alterao. Essa alterao vai refletir na lista de dicas de cdigos quando voc retornar ao arquivo HTML principal. Entretanto, a atualizao automtica s funciona se voc editar os arquivos JavaScript no Dreamweaver. Se voc editar os arquivos JavaScript fora do Dreamweaver, pressione Control+ponto para atualizar as dicas de cdigos JavaScript.

Dicas de cdigos e erros de sintaxe


Algumas vezes, as dicas de cdigos no funcionam adequadamente se o Dreamweaver detectar erros de sintaxe no seu cdigo. O Dreamweaver alerta sobre os erros de sintaxe exibindo as informaes a respeito em uma barra na parte superior da pgina. A Barra de informaes de erro de sintaxe exibe a primeira linha do cdigo onde o Dreamweaver encontrou o erro. Conforme voc corrige o erro, o Dreamweaver continua a exibir qualquer outro erro que ocorra posteriormente. O Dreamweaver fornece ajuda adicional atravs do realce (em vermelho) dos nmeros das linhas onde os erros de sintaxe ocorreram. O realce aparece na Visualizao de cdigo do arquivo que contm o erro. O Dreamweaver exibe os erros de sintaxe no s para a pgina atual, mas tambm para as pginas relacionadas. Por exemplo, suponha que voc est trabalhando em uma pgina HTML que usa um arquivo JavaScript includo. Se o arquivo includo contiver um erro, o Dreamweaver tambm exibe um alerta para aquele arquivo JavaScript. Voc pode abrir facilmente o arquivo relacionado que contm o erro clicando em seu nome na parte superior do documento. Voc pode desativar a Barra de informaes de erro de sintaxe clicando no boto Alertas de erro de sintaxe na Barra de ferramentas de codificao.

Definir preferncias de dicas de cdigo


Voc pode alterar as preferncias padro das dicas de cdigos. Por exemplo, se no quiser mostrar os nomes de propriedades CSS ou as dicas de cdigos Spry, voc pode desmarc-los nas preferncias de dicas de cdigos. Voc tambm pode definir preferncias para o tempo de atraso e o fechamento de tags nas dicas de cdigo. Mesmo se as dicas de cdigo estiverem desativadas, voc ainda poder exibir uma dica pop-up na Visualizao de cdigo pressionando Control+Barra de espaos.
1 Selecione Editar > Preferncias. 2 Selecione Dicas de cdigo na lista Categoria esquerda.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 307


Trabalho com cdigo de pgina

3 Defina uma das seguintes opes:


Tags de finalizao Especifica como o Dreamweaver deve inserir tags de fechamento. Por padro, o Dreamweaver

insere a tag de finalizao automaticamente aps digitar os caracteres </. Voc pode alterar esse comportamento padro para que a tag de finalizao seja inserida depois que voc digitar o colchete angular final (>) da tag de abertura ou para que nenhuma tag de finalizao seja inserida.
Ativar dicas de cdigo Exibe as dicas de cdigo enquanto voc digita o cdigo na Visualizao de cdigo. Arraste o

controle deslizante Atraso para definir o tempo em segundos antes que as dicas apropriadas sejam exibidas.
Ativar dicas de ferramentas de descrio Exibe uma descrio extensa (se disponvel) da dica de cdigo selecionada. Menus Define exatamente o tipo de dicas de cdigo que deve ser exibido enquanto voc digita. Voc pode usar todos ou alguns menus.

Mais tpicos da Ajuda


Uso do menu de dicas no Quick Tag Editor na pgina 331 Modelo de objeto do documento W3C Tutorial de dicas de cdigos

Dicas de cdigo especficas do site


O Dreamweaver CS5 permite aos desenvolvedores trabalhar com Joomla, Drupal, Wordpress ou outras estruturas e exibir dicas de cdigo PHP quando eles gravam na Visualizao de cdigo. Para exibir essas dicas de cdigo, primeiro necessrio criar um arquivo de configurao usando a caixa de dilogo Dicas de cdigo especficas do site. A configurao informa ao Dreamweaver o local para procurar as dicas de cdigo especficas ao seu site. Para assistir a um tutorial em vdeo sobre como trabalhar com dicas de cdigo especficas do site, consulte www.adobe.com/go/learn_dw_comm13_br.

Criar o arquivo de configurao


Use a caixa de dilogo Dicas de cdigo especficas do site para criar um arquivo de configurao necessrio para exibir as dicas de cdigo no Dreamweaver. Por padro, o Dreamweaver armazena o arquivo de configurao no diretrio do Adobe Dreamweaver CS5\configurao\Compartilhado\Dinmico\Predefinies. Nota: As dicas de cdigo que voc criar so especficas para o site selecionado no painel Arquivos do Dreamweaver. Para exibir as dicas de cdigo, a pgina em que voc est trabalhando deve residir no site selecionado atual.
1 Selecionar site > Dicas de cdigo especficas do site.

Por padro, o recurso Dicas de cdigo especficas do site rastreia o site para determinar qual estrutura do Sistema de gerenciamento de contedo (CMS) voc est usando. O Dreamweaver, por padro, oferece suporte a trs estruturas: Drupal, Joomla e Wordpress. Os quatro botes direita do menu pop-up Estrutura permitem que voc importe, salve, renomeie ou exclua estruturas. Nota: No possvel excluir ou renomear as estruturas padro existentes.
2 Na caixa de texto sub-raiz, especifique a pasta de sub-raiz em que voc armazena os arquivos de estruturas.

possvel clicar no cone de pasta prximo caixa de texto para ir ao local dos arquivos de estrutura.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 308


Trabalho com cdigo de pgina

O Dreamweaver exibe uma estrutura em rvore de arquivo das pastas que contm seus arquivos de estrutura. Se as pastas e/ou arquivos que deseja rastrear estiverem abertas, voc dever clicar em OK para executar o rastreamento. Se deseja personalizar o rastreamento, voc deve avanar as prximas etapas.
3 Clique no boto de adio (+) acima da janela Arquivos para selecionar um arquivo ou pasta que voc deseja

adicionar ao rastreamento. Na caixa de dilogo Adicionar arquivos/pastas, possvel especificar extenses de arquivo particulares que voc deseja incluir. Nota: A especificao de extenses de arquivo particulares acelera o processo de rastreamento.
4 Para remover arquivos do rastreamento, selecione os arquivos que voc no deseja rastrear e clique no boto de

subtrao (-) acima da janela Arquivos. Nota: Se a estrutura selecionada for Drupal ou Joomla, a caixa de dilogo Dicas de cdigo especficas do site exibir um caminho adicional para um arquivo na pasta de configurao do Dreamweaver. No exclua istoele necessrio para o uso destas estruturas.
5 Para personalizar como o recurso Dicas de cdigo especficas do site trata um arquivo ou pasta particular,

selecione-a da lista e siga um destes procedimentos:

Selecione Rastrear esta pasta para incluir a pasta selecionada no rastreamento. Selecione Repetido para incluir todos os arquivos e pastas no diretrio selecionado. Clique no boto Extenses para abrir a caixa de dilogo Localizar extenses em que possvel especificar as
extenses de arquivo que voc deseja incluir no rastreamento de um arquivo ou pasta particular.

Salvar estrutura do site


possvel salvar a estrutura personalizada do site que voc criou na caixa de dilogo Dicas de cdigo especficas do site.
1 Crie a estrutura de arquivos e pastas como voc desejar, adicionando ou removendo arquivos e pastas quando

necessrio.
2 Clique no boto Salvar estrutura no canto superior direito da caixa de dilogo. 3 Especifique um nome para a estrutura do site e clique em Salvar.

Nota: Se o nome que voc especificou j estiver em uso, o Dreamweaver solicitar um nome diferente ou a confirmao de que voc deseja substituir a estrutura com o mesmo nome. No possvel substituir qualquer uma das estruturas padro.

Renomear estruturas do site


Ao renomear a estrutura do site, lembre-se de que voc no pode usar os nomes de qualquer uma das trs estruturas do site padro ou a palavra personalizada.
1 Exiba a estrutura que voc deseja renomear. 2 Clique no boto do cone Renomear estrutura no canto superior direito da caixa de dilogo. 3 Especifique um novo nome para a estrutura do site e clique em Renomear.

Nota: Se o nome que voc especificou j estiver em uso, o Dreamweaver solicitar um nome diferente ou a confirmao de que voc deseja substituir a estrutura com o mesmo nome. No possvel substituir qualquer uma das estruturas padro.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 309


Trabalho com cdigo de pgina

Adicionar arquivos ou pastas a uma estrutura do site


possvel adicionar quaisquer arquivos ou pastas que esto associadas estrutura. Aps isso, voc pode especificar as extenses de arquivos desejadas para o rastreamento. (Consulte a prxima seo).
1 Clique no boto de adio (+) acima da janela Arquivos para abrir a caixa de dilogo Adicionar arquivo/pasta. 2 Na caixa de texto Adicionar arquivo/pasta, digite o caminho para o arquivo ou pasta que voc deseja adicionar.

Tambm possvel clicar no cone de pasta prximo caixa de texto para ir a um arquivo ou pasta.
3 Clique no boto de adio (+) acima da janela Extenses para especificar as extenses de arquivo dos arquivos que

voc deseja rastrear. Nota: A especificao de extenses de arquivo particulares acelera o processo de rastreamento.
4 Clique em Adicionar.

Rastrear um site em busca de extenses de arquivo


Use a caixa de dilogo Localizar extenses para exibir e editar extenses de arquivo que esto includas na estrutura do site.
1 Na caixa de dilogo Dicas de cdigo especficas do site, clique no boto Extenses.

A caixa de dilogo Localizar extenses lista as extenses atuais possveis de se rastrear.


2 Para adicionar outra extenso lista, clique no boto de adio (+) acima da janela Extenses. 3 Para excluir uma extenso da lista, clique no boto de subtrao (-).

Inserir cdigo com a Barra de ferramentas de codificao


1 Verifique se voc est na Visualizao de cdigo (Exibir > Cdigo). 2 Posicione o ponto de insero no cdigo ou selecione um bloco de cdigo. 3 Clique em um boto na Barra de ferramentas de codificao ou selecione um item em um menu pop-up da barra

de ferramentas. Para descobrir a funo de cada boto, posicione o ponteiro sobre ele at que seja exibida uma dica de ferramenta. Por padro, Barra de ferramentas de codificao exibe os seguintes botes:
Documentos abertos Lista os documentos abertos. Quando voc seleciona um documento aberto, ele exibido na

janela Documento.
Exibir Navegador de cdigo Exiba o Navegador de cdigo. Para obter mais informaes, consulte Navegao no

cdigo relacionado na pgina 315.


Recolher tag completa Recolhe o contedo entre um conjunto de tags de abertura e finalizao (por exemplo, o

contedo entre <table> e </table>). Voc deve colocar o ponto de insero na tag de abertura ou finalizao e clicar no boto Recolher tag completa para recolher a tag. Tambm possvel recolher o cdigo fora de uma tag completa colocando o ponto de insero em uma tag de abertura ou finalizao, e mantendo pressionada a tecla Alt (Windows) ou mantendo pressionada a tecla Option (Macintosh) enquanto clica no boto Recolher tag completa. Alm disso, mantendo pressionada a tecla Control enquanto clica neste boto, voc desativar o recurso de recolhimento inteligente a fim de que o Dreamweaver no ajuste o contedo recolhido fora das tags completas. Para obter mais informaes, consulte Sobre o recolhimento de cdigo na pgina 321.
Recolher seleo Recolhe o cdigo selecionado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 310


Trabalho com cdigo de pgina

Voc tambm pode recolher o cdigo fora de uma seleo mantendo pressionada a tecla Alt (Windows) ou mantendo pressionada a tecla Option (Macintosh) enquanto clica no boto Recolher seleo. Alm disso, pressione a tecla Control enquanto clica neste boto para desativar o recurso de recolhimento inteligente, a fim de que voc possa recolher exatamente o que selecionou sem nenhuma interveno do Dreamweaver. Para obter mais informaes, consulte Sobre o recolhimento de cdigo na pgina 321.
Expandir tudo Restaura todo o cdigo recolhido. Selecionar tag-me Seleciona o contedo e as tags de abertura e finalizao delimitadoras da linha em que voc

colocou o ponto de insero. Se voc clicar repetidamente neste boto e as tags estiverem balanceadas, o Dreamweaver acabar selecionando as tags html e /html mais externas.
Ajustar chaves Seleciona o contedo e parnteses delimitadores, as chaves ou os colchetes da linha em que voc colocou o ponto de insero. Se voc clicar repetidamente neste boto e os smbolos delimitadores estiverem balanceados, o Dreamweaver acabar selecionando as chaves, os parnteses ou os colchetes mais externos no documento. Nmeros de linha Permite ocultar ou mostrar nmeros no incio de cada linha de cdigo. Realar cdigo invlido Reala o cdigo invlido em amarelo. Alertas de erro de sintaxe na barra de informaes Ativa ou desativa uma barra de informaes na parte superior da pgina que alerta sobre erros de sintaxe. Quando o Dreamweaver detecta um erro de sintaxe, a barra de informaes de erro de sintaxe especifica a linha do cdigo onde o erro ocorre. Alm disso, o Dreamweaver reala o nmero da linha do erro na lateral esquerda do documento na Visualizao de cdigo. A barra de informaes ativada por padro, mas aparece somente quando o Dreamweaver detecta erros de sintaxe na pgina. Aplicar comentrio Permite delimitar o cdigo selecionado entre tags de comentrio ou abrir novas tags de

comentrio.

Aplicar comentrio HTML delimita o cdigo selecionado com <!-- e --> ou abre uma nova tag caso nenhum
cdigo tenha sido selecionado.

Aplicar comentrio // insere // no incio de cada linha do cdigo CSS ou JavaScript selecionado, ou insere uma tag
// nica caso nenhum cdigo tenha sido selecionado.

Aplicar /* */ delimita o cdigo CSS ou JavaScript selecionado com /* e */. Aplicar comentrio ' destina-se a cdigo do Visual Basic. Insere uma aspa simples no incio de cada linha de um
script do Visual Basic ou insere uma aspa simples no ponto de insero caso nenhum cdigo tenha sido selecionado.

Quando voc est trabalhando em um arquivo ASP, ASP.NET, JSP, PHP ou ColdFusion e seleciona a opo Aplicar
comentrio de servidor, o Dreamweaver detecta automaticamente a tag de comentrio correta e a aplica seleo.
Remover comentrio Remove as tags de comentrio do cdigo selecionado. Se uma seleo incluir comentrios

aninhados, somente as tags de comentrio externas sero removidas.


Colocar tag ao redor Coloca a tag selecionada ao redor do cdigo selecionado no Quick Tag Editor. Snippets recentes Permite inserir um snippet de cdigo recentemente utilizado do painel Snippets. Para obter mais informaes, consulte Trabalho com snippets de cdigo na pgina 318. Mover ou converter CSS Permite mover a CSS para outro local ou converter a CSS inline em regras CSS. Para obter

mais informaes, consulte Movimentao/exportao de regras CSS na pgina 141 e Converso da CSS inline em uma regra CSS na pgina 142.
Recuar cdigo Desloca a seleo para a direita. Diminuir recuo do cdigo Desloca a seleo para a esquerda.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 311


Trabalho com cdigo de pgina

Formatar cdigo de origem Aplica os formatos de cdigo anteriormente especificados ao cdigo selecionado ou pgina inteira, caso nenhum cdigo tenha sido selecionado. Voc tambm pode definir rapidamente as preferncias de formatao de cdigo selecionando Configuraes de formatao de cdigo no boto Formatar cdigo de origem ou editar as bibliotecas de tags selecionando Editar bibliotecas de tag.

O nmero de botes disponveis na Barra de ferramentas de codificao varia de acordo com o tamanho da Visualizao de cdigo na janela Documento. Para ver todos os botes disponveis, redimensione a janela Visualizao de cdigo ou clique na seta de expanso na parte inferior da Barra de ferramentas de codificao. Voc tambm pode editar a Barra de ferramentas de codificao para exibir mais botes (como Quebra automtica de palavra, Caracteres ocultos e Recuar automaticamente) ou botes ocultos que no precisaro ser usados. Para fazer isso, no entanto, voc deve editar o arquivo XML que gera a barra de ferramentas. Para obter mais informaes, consulte Extenso do Dreamweaver. Nota: A opo que permite visualizar caracteres ocultos, que no um boto padro da Barra de ferramentas de codificao, est disponvel no menu Exibir (Exibir > Opes de visualizao de cdigo > Caracteres ocultos).

Mais tpicos da Ajuda


Verificar se as tags e chaves esto balanceadas na pgina 324 Viso geral da barra de ferramentas de codificao na pgina 12 Exibir barras de ferramentas na pgina 21

Insero de cdigo com o painel Inserir


1 Posicione o ponto de insero no cdigo. 2 Selecione uma categoria apropriada no painel Inserir. 3 Clique em um boto no painel Inserir ou selecione um item em um menu pop-up do painel Inserir.

Quando voc clicar em um cone, o cdigo poder aparecer na pgina imediatamente ou uma caixa de dilogo poder aparecer solicitando mais informaes para concluir o cdigo. Para descobrir a funo de cada boto, posicione o ponteiro sobre ele at que seja exibida uma dica de ferramenta. O nmero e o tipo dos botes disponveis no painel Inserir variam de acordo com o tipo do documento atual. Isso tambm depende da visualizao que voc est usando: Visualizao de cdigo ou Visualizao de design. Embora o painel Inserir fornea um conjunto de tags freqentemente usadas, ele no abrangente. Para fazer a sua escolha em um conjunto mais abrangente de tags, use o Seletor de tags.

Mais tpicos da Ajuda


Uso do painel Inserir na pgina 205

Insero de tags com o Seletor de tags


Use o Seletor de tags para inserir na pgina qualquer tag das bibliotecas de tags do Dreamweaver (que incluem bibliotecas de tags do ColdFusion e ASP.NET).
1 Posicione o ponto de insero no cdigo, clique com o boto direito do mouse (Windows) ou mantenha

pressionada a tecla Control enquanto clica (Macintosh) e selecione Inserir tag. O Seletor de tags exibido. O painel esquerdo contm uma lista de bibliotecas de tags com suporte, enquanto o painel direito mostra as tags armazenadas na pasta da biblioteca de tags selecionada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 312


Trabalho com cdigo de pgina

2 Selecione uma categoria de tags na biblioteca de tags ou expanda a categoria e selecione uma subcategoria. 3 Selecione uma tag no painel direito. 4 Para visualizar as informaes de sintaxe e uso da tag no Seletor de tags, clique no boto Informaes sobre tag. As

informaes sobre a tag aparecero se estiverem disponveis.


5 Para visualizar as mesmas informaes sobre a tag no painel Referncia, clique no cone <?>. As informaes sobre

a tag aparecero se estiverem disponveis.


6 Para inserir a tag selecionada no cdigo, clique em Inserir.

Se a tag aparecer no painel direito com colchetes angulares (por exemplo, <title></title>), ela no precisar de informaes adicionais e ser imediatamente inserida no documento no ponto de insero. Se a tag precisar de informaes adicionais, um editor de tags ser exibido.
7 Se um editor de tags for aberto, digite as informaes adicionais e clique em OK. 8 Clique no boto Fechar.

Mais tpicos da Ajuda


Sobre as bibliotecas de tags do Dreamweaver na pgina 341

Insero de comentrios HTML


Um comentrio um texto descritivo que voc insere no cdigo HTML para explicar o cdigo ou fornecer outras informaes. O texto do comentrio aparece somente na Visualizao de cdigo e no exibido em um navegador.

Insero de um comentrio no ponto de insero


Selecione Inserir > Comentrio.

Na Visualizao de cdigo, uma tag de comentrio inserida e o ponto de insero colocado no meio da tag. Digite seu comentrio. Na Visualizao de design, a caixa de dilogo Comentrio exibida. Digite o comentrio e clique em OK.

Exibio dos marcadores de comentrio na Visualizao de design


Selecione Exibir > Auxlios visuais > Elementos invisveis.

Verifique se a opo Comentrios est selecionada nas preferncias de elementos invisveis. Se no estiver, o marcador de comentrio no aparecer.

Edio de um comentrio existente


Na Visualizao de cdigo, localize o comentrio e edite seu texto. Na Visualizao de design, selecione o marcador Comment, edite o texto do comentrio no Inspetor de
propriedades e clique na janela Documento.

Cpia e colagem do cdigo


1 Copie o cdigo da Visualizao de cdigo ou de outro aplicativo. 2 Coloque o ponto de insero na Visualizao de cdigo e selecione Editar > Colar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 313


Trabalho com cdigo de pgina

Mais tpicos da Ajuda


Colagem e movimentao de fragmentos de cdigo recolhidos na pgina 323

Editar tags com os editores de tags


Use os Editores de tags para visualizar, especificar e editar os atributos de tags.
1 Clique com o boto direito do mouse em uma tag (Windows) ou mantenha pressionada a tecla Control enquanto

clica em uma tag (Macintosh) na Visualizao de cdigo ou em um objeto na Visualizao de design, e selecione Editar tag no menu pop-up. (O contedo desta caixa de dilogo muda de acordo com a tag selecionada.)
2 Especifique ou edite atributos para a tag e clique em OK.

Para obter mais informaes sobre a tag no Editor de tags, clique em Informaes sobre tag.

Editar cdigo com o menu de contexto Codificao


1 Na Visualizao de cdigo, selecione algum cdigo e clique com o boto direito do mouse (Windows) ou mantenha

pressionada a tecla Control enquanto clica (Macintosh).


2 Selecione o submenu Seleo e, em seguida, selecione uma destas opes:
Recolher seleo Recolhe o cdigo selecionado. Recolher seleo expandida Recolhe todos os cdigos que esto fora do cdigo selecionado. Expandir seleo Expande o fragmento de cdigo selecionado. Recolher tag completa Recolhe o contedo entre um conjunto de tags de abertura e finalizao (por exemplo, o

contedo entre <table> e </table>).


Recolher tag completa expandida Recolhe o contedo fora de um conjunto de tags de abertura e finalizao (por

exemplo, o contedo fora de <table> e </table>).


Expandir tudo Restaura todo o cdigo recolhido. Aplicar comentrio HTML Delimita o cdigo selecionado com <!-- e --> ou abre uma nova tag caso nenhum cdigo

tenha sido selecionado.


Aplicar comentrio /* */ Delimita o cdigo CSS ou JavaScript selecionado com /* e */. Aplicar comentrio // Insere // no incio de cada linha do cdigo CSS ou JavaScript selecionado, ou insere uma tag
// nica caso nenhum cdigo tenha sido selecionado.

Aplicar comentrio ' Insere uma aspa simples no incio de cada linha de um script do Visual Basic ou insere uma aspa simples no ponto de insero caso nenhum cdigo tenha sido selecionado. Aplicar comentrio de servidor Envolve o cdigo selecionado. Quando voc est trabalhando em um arquivo ASP,

ASP.NET, JSP, PHP ou ColdFusion e seleciona a opo Aplicar comentrio de servidor, o Dreamweaver detecta automaticamente a tag de comentrio correta e a aplica seleo.
Aplicar hack de comentrio de barra invertida Delimita o cdigo CSS selecionado com tags de comentrio que faro com que o Internet Explorer 5 para Macintosh ignore o cdigo. Aplicar Caio Hack Delimita o cdigo CSS selecionado com tags de comentrio que faro com que o Netscape Navigator 4 ignore o cdigo. Remover comentrio Remove as tags de comentrio do cdigo selecionado. Se uma seleo incluir comentrios

aninhados, somente as tags de comentrio externas sero removidas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 314


Trabalho com cdigo de pgina

Remover hack de comentrio de barra invertida Remove as tags de comentrio do cdigo CSS selecionado. Se uma

seleo incluir comentrios aninhados, somente as tags de comentrio externas sero removidas.
Remover Caio Hack Remove as tags de comentrio do cdigo CSS selecionado. Se uma seleo incluir comentrios

aninhados, somente as tags de comentrio externas sero removidas.


Converter abas em espaos Converte cada tabulao da seleo em um nmero de espaos igual ao valor de Tamanho da tabulao definido nas preferncias de formato do cdigo. Para obter mais informaes, consulte Alterao do formato de cdigo na pgina 300. Converter espaos em abas Converte uma srie de espaos da seleo em tabulaes. Cada srie de espaos com um nmero de espaos igual ao tamanho da tabulao convertida em uma tabulao. Recuo Recua a seleo, deslocando-a para a direita. Para obter mais informaes, consulte Recuo dos blocos de cdigo na pgina 314. Diminuir recuo Desloca a seleo para a esquerda. Remover todas as tags Remove todas as tags da seleo. Converter linhas em tabela Delimita a seleo em uma tag table sem atributos. Adicionar quebras de linha Adiciona uma tag br no final de cada linha da seleo. Converter em maiscula Converte todas as letras da seleo (incluindo nomes e valores de tag e atributo) em

maisculas.
Converter em minscula Converte todas as letras da seleo (incluindo nomes e valores de tag e atributo) em

minsculas.
Converter tags em maisculas Converte todos os nomes de tag e atributo e valores de atributo da seleo em

maisculas.
Converter tags em minsculas Converte todos os nomes de tag e atributo e valores de atributo da seleo em

minsculas.

Mais tpicos da Ajuda


Recolhimento e expanso de fragmentos de cdigo na pgina 322

Edio de uma tag de linguagem de servidor com o Inspetor de propriedades


Edite o cdigo em uma tag de linguagem de servidor (uma tag ASP, por exemplo) sem entrar na Visualizao de cdigo, usando o Inspetor de propriedades.
1 Na Visualizao de design, selecione o cone visual da tag de linguagem de servidor. 2 No Inspetor de propriedades, clique no boto Editar. 3 Faa as alteraes no cdigo da tag e clique em OK.

Mais tpicos da Ajuda


Configurao do computador para o desenvolvimento de aplicativo na pgina 529

Recuo dos blocos de cdigo


Ao gravar e editar cdigo na Visualizao de cdigo ou no Inspetor de cdigo, voc pode alterar o nvel de recuo de um bloco ou linha de cdigo selecionado, deslocando-o para a direita ou esquerda em uma tabulao.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 315


Trabalho com cdigo de pgina

Recuo do bloco de cdigo selecionado


Pressione Tab. Selecione Editar > Recuar cdigo.

Cancelamento do recuo do bloco de cdigo selecionado


Pressione Shift+Tab. Selecione Editar > Diminuir recuo do cdigo.

Navegao no cdigo relacionado


O Navegador de cdigo exibe uma lista de cdigos fonte relacionados a uma determinada seleo de sua pgina. Useo para navegar por cdigos fonte relacionados, como regras de CSS internas e externas, incluses de servidor, arquivos JavaScript externos, arquivos de modelo pai, arquivos de bibliotecas e arquivos de origem iframe. Quando voc clica em um link do Navegador de cdigo, o Dreamweaver abre o arquivo que contm a parte relevante do cdigo. O arquivo aparece na rea relacionada a arquivos, se estiver ativada. Se voc no tiver arquivos relacionados ativados, o Dreamweaver abre o arquivo selecionado como um documento separado na janela Documento. Se voc clicar em uma regra CSS no Navegador de cdigo, o Dreamweaver lhe leva diretamente para aquela regra. Se a regra for interna de um arquivo, o Dreamweaver exibe a regra na visualizao Dividida. se a regra estiver em um arquivo CSS externo, o Dreamweaver abre o arquivo e exibe a regra na rea relacionada a arquivos acima do documento principal. Voc pode acessar o Navegador de cdigo a partir das visualizaes de design, de cdigo e dividida, assim como pelo Inspetor de cdigos. Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre como trabalhar com o Navegador de cdigos, consulte www.adobe.com/go/dw10codenav_br. Para assistir a um tutorial em vdeo sobre como trabalhar com Visualizao dinmica, arquivos relacionados e o Navegador de cdigo, consulte www.adobe.com/go/lrvid4044_dw_br.

Abrir o Navegador de cdigo


Alt+clique (Windows) ou Command+Option+Click (Macintosh) em qualquer local da pgina. O Navegador de

cdigo exibe links para o cdigo que afeta a rea onde voc clicou. Clique fora do Navegador de cdigo para fech-lo. Nota: Voc tambm pode abrir o Navegador de cdigo clicando no indicador Navegador de cdigo . Este indicador aparece prximo ao ponto de insero em sua pgina quando o mouse fica sem atividade por 2 segundos.

Navegar at o cdigo com o Navegador de cdigo


1 Abra o Navegador de cdigo na rea da pgina na qual voc est interessado. 2 Clique na parte do cdigo para o qual voc deseja ir.

O Navegador de cdigo agrupa os cdigos fonte relacionados por arquivo e relaciona os arquivos em ordem alfabtica. Por exemplo, suponha que as regras CSS em trs arquivos externos afetam a seleo em seu documento. Neste caso, o Navegador de cdigo relaciona esses trs arquivos, assim como as regras CSS relevantes seleo. Para CSS relacionados a uma determinada seleo, o Navegador de cdigo funciona como um painel de Estilos CSS no modo Atual.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 316


Trabalho com cdigo de pgina

Quando voc focaliza links para regras CSS, o Navegador de cdigo exibe dicas de ferramentas das propriedades na regra. Essas dicas de ferramentas so teis quando voc quer distinguir entre muitas regras que compartilham o mesmo nome.

Desativar o indicador do Navegador de cdigo


1 Abra o Navegador de cdigo. 2 Selecione Desativar indicador no canto inferior direito. 3 Clique fora do Navegador de cdigo para fech-lo.

Para reativar o indicador do Navegador de cdigo, Alt+clique (Windows) ou Command+Option+Click (Macintosh) para abrir o Navegador de cdigo e desmarcar a opo Desativar indicador.

Mais tpicos da Ajuda


Abrir Arquivos relacionados na pgina 68 Tutorial do Navegador de cdigo

Acessar a uma funo JavaScript ou VBScript


Na Visualizao de cdigo e no Inspetor de cdigo, possvel visualizar uma lista de todas as funes JavaScript ou VBScript do cdigo e ir at qualquer uma delas.
1 Visualize o documento na Visualizao de cdigo (Visualizar > Cdigo) ou no Inspetor de cdigo (Janela >

Inspetor de cdigo).
2 Siga um destes procedimentos:

Na Visualizao de cdigo, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla
Control enquanto clica (Macintosh) em qualquer lugar da Visualizao de cdigo e selecione o submenu Funes no menu de contexto. O submenu Funes no aparece na Visualizao de design. Qualquer funo JavaScript ou VBScript do cdigo aparece no submenu. Para ver as funes em ordem alfabtica, mantenha pressionada a tecla Control enquanto clica com o boto direito do mouse (Windows) ou mantenha pressionadas as teclas Option e Control enquanto clica (Macintosh) na Visualizao de cdigo. Em seguida, selecione o submenu Funes.

No Inspetor de cdigo, clique no boto Navegao de cdigo ({ }) na barra de ferramentas.


3 Selecione um nome de funo para ir at a funo no cdigo.

Extrair JavaScript
O Extrator de JavaScript (JSE) remove todo ou a maior parte do JavaScript de seu documento do Dreamweaver, exporta-o para um arquivo externo e vincula o arquivo externo ao seu documento. O JSE tambm pode remover manipuladores de eventos, como onclick e onmouseover do seu cdigo e, ento, anexar ao seu documento, de modo no-intrusivo, o JavaScript associado a esses manipuladores.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 317


Trabalho com cdigo de pgina

Voc deve estar ciente das seguintes limitaes do Extrator de JavaScript antes de us-lo:

O JSE no extrai tags de script no corpo do documento (exceto no caso de widgets do Spry). H chance de que a
externalizao desses scripts possa causar resultados imprevistos. Por padro, o Dreamweaver lista esses scripts na caixa de dilogo Externalizar JavaScript, mas no os seleciona para extrao. (Voc pode selecion-los manualmente se desejar).

O JSE no extrai JavaScript de regies editveis de arquivos .dwt (modelo do Dreamweaver), regies no editveis
de ocorrncias do modelo ou itens de biblioteca do Dreamweaver.

Aps extrair JavaScript usando a opo Externalizar JavaScript e Anexar de modo no-intrusivo, voc no poder
mais editar comportamentos do Dreamweaver no painel Comportamentos. O Dreamweaver no pode inspecionar e preencher o painel Comportamentos com comportamentos anexados de modo no-intrusivo.

Voc no pode desfazer suas alteraes aps ter fechado a pgina. No entanto, voc pode desfazer alteraes, desde
que permanea na mesma seo de edio. Selecione Editar > Desfazer externalizar JavaScript, para desfazer.

Algumas pginas muito complexas podem no funcionar conforme o esperado. Esteja atento ao extrair JavaScript
de pginas com document.write() no corpo e em variveis globais. Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre o suporte de JavaScript no Dreamweaver, consulte www.adobe.com/go/dw10javascript_br. Para usar o Extrator de JavaScript:
1 Abra uma pgina que contenha JavaScript (por exemplo, uma pgina do Spry). 2 Selecione Comandos > Externalizar JavaScript. 3 Na caixa de dilogo Externalizar JavaScript, edite as selees padro, se necessrio.

Selecione Externalizar somente JavaScript se voc deseja que o Dreamweaver mova todo JavaScript para um
arquivo externo e para fazer referncia quele arquivo no documento atual. Esta opo deixa os manipuladores de evento como onclick e onload no documento e deixa os comportamentos visveis no painel Comportamentos.

Selecione Externalizar JavaScript e Anexar de modo no intrusivo se desejar que o Dreamweaver 1) mova
JavaScript para um arquivo externo e faa referncia a esse arquivo no documento atual e 2) remova manipuladores de evento do HTML e insira-os no tempo de execuo usando JavaScript. Ao selecionar esta opo, voc no poder mais editar comportamentos no painel Comportamentos.

Na coluna Editar, desmarque todas as edies que no deseja realizar ou selecione as edies que o
Dreamweaver, por padro, no selecionou. Por padro, o Dreamweaver lista mas no seleciona as seguintes edies:

Blocos de script no cabealho do documento que contm chamadas document.write() ou


document.writeln().

Blocos de script no cabealho do documento que contm assinaturas de funes relacionadas ao cdigo de
manuseio EOLAS, conhecido por usar document.write().

Blocos de script no corpo do documento, a menos que os blocos contenham apenas widget do Spry ou
construtores de conjunto de dados do Spry.

O Dreamweaver atribui IDs automaticamente a elementos que ainda no tm IDs. Se no gostar dessas IDs, voc
poder alter-las, editando as caixas de texto de ID.
4 Clique em OK.

A caixa de dilogo de resumo oferece um resumo de extraes. Revise as extraes e clique em OK.
5 Salve a pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 318


Trabalho com cdigo de pgina

O Dreamweaver cria um arquivo SpryDOMUtils.js, bem como outro arquivo contendo o JavaScript extrado. O Dreamweaver salva o arquivo SpryDOMUtils.js na pasta SpryAssets em seu site e salva o outro arquivo no mesmo nvel da pgina da qual voc extraiu o JavaScript. No se esquea de enviar esses arquivos dependentes para seu servidor Web quando enviar a pgina original.

Mais tpicos da Ajuda


Criao visual de pginas do Spry na pgina 423

Trabalho com snippets de cdigo


Os snippets de cdigo permitem armazenar o contedo para reutilizao rpida. Voc pode criar, inserir, editar ou excluir snippets de HTML, JavaScript, CFML, ASP, PHP e muito mais. Tambm possvel gerenciar e compartilhar snippets de cdigo com membros da equipe. Alguns snippets predefinidos que voc pode usar como ponto de partida esto disponveis. Os snippets que contm tags <font> e outros atributos elementos obsoletos esto na pasta Legacy no painel Snippets.

Insero de um snippet de cdigo


1 Coloque o ponto de insero no local onde voc deseja inserir o snippet de cdigo ou selecione o cdigo ao redor

do qual ser colocado um snippet.


2 No painel Snippets (Janela > Snippets), clique duas vezes no snippet.

Voc tambm pode clicar com o boto direito do mouse no snippet (Windows) ou manter pressionada a tecla Control enquanto clica no snippet (Macintosh) e selecionar Inserir no menu pop-up.

Criao de um snippet de cdigo


1 No painel Snippets, clique no cone Novo snippet na parte inferior do painel. 2 Digite um nome para o snippet.

Nota: Os nomes de snippet no podem conter caracteres invlidos nos nomes de arquivo, como barras (/ ou \), caracteres especiais ou aspas duplas ().
3 (Opcional) Digite uma descrio de texto para o snippet. Isso facilita o uso do snippet para os outros membros da

equipe.
4 Em Tipo de snippet, selecione Quebra de linha da seleo ou Inserir bloco. a Se voc escolher Quebra de linha da seleo, adicione cdigo para as seguintes opes:
Inserir antes de Digite ou cole o cdigo a ser inserido antes da seleo atual. Inserir depois de Digite ou cole o cdigo a ser inserido aps a seleo atual.

Para definir o espaamento padro dos blocos, use quebras de linha; pressione Enter (Windows) ou Return (Macintosh) dentro das caixas de texto. Nota: Como os snippets podem ser criados como blocos de incio e fim, use-os para envolver outras tags e contedo. Isso ser til para inserir formatao especial, links, elementos de navegao e blocos de script. Realce o contedo que voc deseja envolver e insira o snippet.
b Se voc escolher Inserir bloco, digite ou cole o cdigo a ser inserido. 5 (Opcional) Selecione Tipo de visualizao: Cdigo ou design.
Design Processa o cdigo e o exibe no painel Visualizao do painel Snippets.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 319


Trabalho com cdigo de pgina

Cdigo Exibe o cdigo no painel Visualizao.

6 Clique em OK.

Edio ou excluso de um snippet de cdigo


No painel Snippets, selecione um snippet e clique no boto Editar snippet ou Remover na parte inferior do painel.

Criao de pastas de snippet de cdigo e gerenciamento de snippets de cdigo


1 No painel Snippets, clique no boto Nova pasta de snippets na parte inferior do painel. 2 Arraste snippets para a nova pasta ou para outras pastas, conforme desejar.

Adio ou edio de um atalho de teclado para um snippet


1 No painel Snippets, clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control

enquanto clica (Macintosh) e selecione Editar atalhos de teclado. O Editor de atalho de teclado exibido.
2 No menu pop-up Comandos, selecione Snippets.

Uma lista de snippets exibida.


3 Selecione um snippet e atribua um atalho de teclado a ele.

Para obter mais informaes, consulte Personalizar atalhos de teclado na pgina 33.

Compartilhamento de um snippet com outros membros da equipe


1 Localize o arquivo correspondente ao snippet que voc deseja compartilhar na pasta Configurao/snippets, na

pasta de aplicativo do Dreamweaver.


2 Copie o arquivo de snippet para uma pasta compartilhada no computador ou em um computador da rede. 3 Faa com que os outros membros da equipe copiem o arquivo de snippet para a pasta Configurao/snippets.

Procurar tags, atributos ou texto no cdigo


Voc pode procurar tags, atributos e valores de atributo especficos. Por exemplo, possvel procurar todas as tags img que no tm o atributo alt. Voc tambm pode procurar seqncias de texto especficas que esto ou no dentro de um conjunto de tags de continer. Por exemplo, possvel procurar a palavra Sem ttulo contida em uma tag title para localizar todas as pginas sem ttulo do seu site.
1 Abra o documento em que ser realizada a pesquisa ou selecione documentos ou uma pasta no painel Arquivos. 2 Selecione Editar > Localizar e substituir. 3 Especifique em quais arquivos ser realizada a pesquisa e, em seguida, especifique o tipo de pesquisa a ser executado

e o texto ou as tags que sero procurados. Se desejar, especifique o texto de substituio tambm. Depois, clique em um dos botes Localizar ou em um dos botes Substituir.
4 Clique no boto Fechar. 5 Para realizar a pesquisa novamente sem exibir a caixa de dilogo Localizar e substituir, pressione F3 (Windows) ou

Command+G (Macintosh).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 320


Trabalho com cdigo de pgina

Mais tpicos da Ajuda


Expresses regulares na pgina 295 Procura e substituio de texto na pgina 220

Salvamento e memorizao de padres de pesquisa


Voc pode salvar padres de pesquisa e reutiliz-los posteriormente.

Mais tpicos da Ajuda


Expresses regulares na pgina 295 Procura e substituio de texto na pgina 220

Salvamento de um padro de pesquisa


1 Na caixa de dilogo Localizar e substituir (Editar > Localizar e substituir), defina os parmetros da pesquisa. 2 Clique no boto Salvar consulta (o cone de disco). 3 Na caixa de dilogo exibida, navegue at a pasta em que deseja salvar as consultas. Em seguida, digite um nome de

arquivo que identifique a consulta e clique em Salvar. Por exemplo, se o padro de pesquisa envolver a procura de tags img sem o atributo alt, voc poderia nomear a consulta como img_no_alt.dwr. Nota: As consultas salvas tero a extenso de arquivo .dwr. Algumas consultas salvas nas verses antigas do Dreamweaver possivelmente tero a extenso .dwq.

Memorizao de um padro de pesquisa


1 Selecione Editar > Localizar e substituir. 2 Clique no boto Carregar consulta (o cone de pasta). 3 Navegue at a pasta em que as consultas so salvas. Selecione um arquivo de consulta e clique em Abrir. 4 Clique em Localizar prximo, Localizar tudo, Substituir ou Substituir tudo para iniciar a pesquisa.

Uso do material de referncia a linguagem


O painel Referncia fornece uma ferramenta de referncia rpida para linguagens de markup, linguagens de programao e estilos CSS. Ele comunica informaes sobre tags, objetos e estilos especficos com os quais voc est trabalhando na Visualizao de cdigo (ou no Inspetor de cdigo). O painel Referncia tambm fornece um cdigo de exemplo que voc pode colar nos documentos.

Abertura do painel Referncia


1 Siga um destes procedimentos na Visualizao de cdigo:

Clique com o boto direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica
(Macintosh) em uma tag, atributo ou palavra-chave e selecione Referncia no menu de contexto.

Coloque o ponto de insero em uma tag, atributo ou palavra-chave e pressione Shift+F1.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 321


Trabalho com cdigo de pgina

O painel Referncia aberto e exibe informaes sobre a tag, o atributo ou a palavra-chave clicada.

2 Para ajustar o tamanho do texto no painel Referncia, selecione Fonte grande, Fonte mdia ou Fonte pequena no

menu de opes (a seta pequena no lado superior direito do painel).

Colagem do cdigo de exemplo no documento


1 Clique em qualquer lugar do cdigo de exemplo no contedo de referncia.

Todo o exemplo de cdigo realado.


2 Selecione Editar > Copiar e cole o cdigo de exemplo no documento, na Visualizao de cdigo.

Procura do contedo de referncia no painel Referncia


1 Para exibir tags, objetos ou estilos de outro livro, selecione um livro diferente no menu pop-up Livro. 2 Para visualizar informaes sobre um item especfico, selecione-o no menu pop-up Tag, Objeto, Estilo ou CFML

(dependendo do livro selecionado).


3 Para visualizar informaes sobre um atributo do item selecionado, selecione o atributo no menu pop-up ao lado

do menu pop-up Tag, Objeto, Estilo ou CFML. Esse menu contm a lista de atributos do item selecionado. A seleo padro Descrio, que exibe uma descrio do item escolhido.

Impresso do cdigo
Voc pode imprimir o cdigo para edit-lo offline, arquiv-lo ou distribu-lo.
1 Abra uma pgina na Visualizao de cdigo. 2 Selecione Arquivo > Imprimir cdigo. 3 Especifique as opes de impresso e clique em OK (Windows) ou Imprimir (Macintosh).

Recolhimento de cdigo
Sobre o recolhimento de cdigo
Voc pode recolher e expandir fragmentos de cdigo para que possa visualizar diferentes sees do documento sem precisar usar a barra de rolagem. Por exemplo, para ver todas as regras CSS na tag head que se aplica a uma tag div mais abaixo na pgina, recolha tudo o que estiver entre as tags head e div, a fim de que voc possa ver as duas sees de cdigo simultaneamente. Embora voc possa selecionar fragmentos de cdigo fazendo selees na Visualizao de design ou Visualizao de cdigo, recolha o cdigo apenas na Visualizao de cdigo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 322


Trabalho com cdigo de pgina

Nota: Os arquivos criados nos modelos do Dreamweaver exibem todos os cdigos como totalmente expandidos, mesmo se o arquivo de modelo (.dwt) contiver fragmentos de cdigo recolhidos.

Mais tpicos da Ajuda


Colagem e movimentao de fragmentos de cdigo recolhidos na pgina 323 Inserir cdigo com a Barra de ferramentas de codificao na pgina 309 Limpar cdigo na pgina 323

Recolhimento e expanso de fragmentos de cdigo


Quando voc seleciona um cdigo, um conjunto de botes de recolhimento exibido ao lado da seleo (smbolos de menos no Windows, tringulos verticais no Macintosh). Clique nos botes para recolher e expandir a seleo. Quando o cdigo recolhido, os botes de recolhimento se transformam em boto de expanso (um boto de mais no Windows; um tringulo horizontal no Macintosh). s vezes, o fragmento exato do cdigo selecionado no recolhido. O Dreamweaver usa o recolhimento inteligente para recolher a seleo mais comum e visualmente satisfatria. Por exemplo, se voc selecionou uma tag recuada e, em seguida, selecionou os espaos recuados antes da tag tambm, o Dreamweaver no recolher os espaos recuados, pois a maioria dos usurios esperar que seus recuos sejam preservados. Para desativar o recolhimento inteligente e forar o Dreamweaver a recolher exatamente o que voc selecionou, mantenha pressionada a tecla Control antes de recolher o cdigo. Alm disso, um cone de aviso nos fragmentos de cdigo recolhidos ser exibido se um fragmento contiver erros ou cdigo incompatvel com determinados navegadores. Voc tambm pode recolher o cdigo mantendo pressionada a tecla Alt (Windows) ou mantendo pressionada a tecla Option (Macintosh) enquanto clica em um dos botes de recolhimento, ou clicando no boto Recolher seleo na Barra de ferramentas de codificao.
1 Selecione algum cdigo. 2 Selecione Editar > Recolhimento de cdigo e selecione qualquer uma das opes.

Mais tpicos da Ajuda


Editar cdigo com o menu de contexto Codificao na pgina 313 Inserir cdigo com a Barra de ferramentas de codificao na pgina 309

Seleo de um fragmento de cdigo recolhido


Na Visualizao de cdigo, clique no fragmento de cdigo recolhido.

Nota: Quando voc faz uma seleo na Visualizao de design que parte de um fragmento de cdigo recolhido, o fragmento automaticamente expandido na Visualizao de cdigo. Quando voc faz uma seleo na Visualizao de design que um fragmento de cdigo completo, o fragmento permanece recolhido na Visualizao de cdigo.

Visualizao do cdigo em um fragmento de cdigo recolhido sem expandi-lo


Mantenha o ponteiro do mouse sobre o fragmento de cdigo recolhido.

Uso de atalhos de teclado para recolher e expandir cdigo


Voc tambm pode usar os seguintes atalhos de teclado:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 323


Trabalho com cdigo de pgina

Comando Recolher seleo Recolher seleo expandida Expandir seleo Recolher tag completa Recolher tag completa expandida Expandir tudo

Windows Control+Shift+C Control+Alt+C Control+Shift+E Control+Shift+J Control+Alt+J Control+Alt+E

Macintosh Command+Shift+C Command+Alt+C Command+Shift+E Command+Shift+J Command+Alt+J Command+Alt+E

Colagem e movimentao de fragmentos de cdigo recolhidos


Voc pode copiar e colar fragmentos de cdigo recolhidos ou mov-los arrastando-os.

Mais tpicos da Ajuda


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

Cpia e colagem de um fragmento de cdigo recolhido


1 Selecione o fragmento de cdigo recolhido. 2 Selecione Editar > Copiar. 3 Coloque o ponto de insero no local em que voc deseja colar o cdigo. 4 Selecione Editar > Colar.

Nota: Voc pode realizar a colagem em outros aplicativos, mas o recolhimento do fragmento de cdigo no ser preservado.

Arrastar um fragmento de cdigo recolhido


1 Selecione o fragmento de cdigo recolhido. 2 Arraste a seleo para o novo local.

Para arrastar uma cpia da seleo, mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Alt (Macintosh) e arraste. Nota: No possvel arrastar para outros documentos.

Otimizao e depurao do cdigo


Limpar cdigo
Voc pode remover automaticamente tags vazias, combinar tags font aninhadas e tags, e tambm melhorar a confuso ou ilegibilidade do cdigo HTML ou XHTML.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 324


Trabalho com cdigo de pgina

Para obter informaes sobre como limpar o HTML gerado em um documento do Microsoft Word, consulte Abrir e editar documentos existentes na pgina 67.
1 Abra um documento:

Se o documento estiver em HTML, selecione Comandos > Limpar HTML. Se o documento estiver em XHTML, selecione Comandos > Limpar XHTML.
Em um documento XHTML, o comando Limpar XHTML corrige erros de sintaxe XHTML, define o uso de maisculas/minsculas dos atributos de tag para minsculas, e adiciona ou reporta os atributos necessrios ausentes de uma tag, alm de executar operaes de limpeza de HTML.
2 Na caixa de dilogo exibida, selecione qualquer uma das opes e clique em OK.

Nota: Dependendo do tamanho do documento e do nmero de opes selecionadas, pode levar vrias segundos para que a limpeza seja concluda.
Remover tags de continer vazias Remove quaisquer tags que no tenham contedo entre elas. Por exemplo, <b></b>

e <font color="#FF0000"></font> so tags vazias, mas a tag <b> em <b>algum texto</b> no.
Remover tags aninhadas redundantes Remove todas as ocorrncias redundantes de uma tag. Por exemplo, no cdigo
<b>Isto foi <b>realmente</b> o que eu quis dizer</b>, as tags b que envolvem a palavra realmente so

redundantes e seriam removidas.


Remover comentrio HTML no-Dreamweaver Remove todos os comentrios que no foram inseridos pelo

Dreamweaver. Por exemplo, <!--begin body text--> seria removido, mas <!-- TemplateBeginEditable name="doctitle" --> no, porque ele um comentrio do Dreamweaver que marca o incio de uma regio editvel em um modelo.
Remover markup especial do Dreamweaver Remove os comentrios que o Dreamweaver adiciona ao cdigo para

permitir que os documentos sejam atualizados automaticamente quando os modelos e itens de biblioteca forem atualizados. Se voc selecionar esta opo ao limpar o cdigo em um documento baseado em modelo, o documento desanexado do modelo. Para obter mais informaes, consulte Desanexar um documento de um modelo na pgina 416.
Remover tag(s) especfica(s) Remove as tags especificadas na caixa de texto adjacente. Use esta opo para remover tags personalizadas inseridas por outros editores visuais e outras tags que no devem aparecer no seu site (por exemplo, blink). Separe vrias tags usando vrgulas (por exemplo, font,blink). Combinar tags <font> aninhadas quando possvel Consolida duas ou mais tags font quando elas controlam o mesmo intervalo de texto. Por exemplo, <font size="7"><font color="#FF0000">big red</font></font> seria alterado para <font size="7" color="#FF0000">big red</font>. Mostrar concluso do logon Exibe uma caixa de alerta com detalhes sobre as alteraes feitas no documento assim que

a limpeza concluda.

Mais tpicos da Ajuda


Alterao do formato de cdigo na pgina 300 Definio das cores de cdigo na pgina 303

Verificar se as tags e chaves esto balanceadas


Voc pode verificar se as tags, os parnteses (( )), as chaves ({ }) e os colchetes ([ ]) na pgina esto balanceados. 'Balanceado' significa que cada tag, parntese, chave ou colchete de abertura tem um sinal de fechamento correspondente e vice-versa.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 325


Trabalho com cdigo de pgina

Verificao de tags balanceadas


1 Abra o documento na Visualizao de cdigo. 2 Coloque o ponto de insero no cdigo aninhado que voc deseja verificar. 3 Selecione Editar > Selecionar tag-me.

As tags delimitadoras correspondentes (e seu contedo) so selecionadas no cdigo. Se voc continuar selecionando Editar > Selecionar tag-me, e suas tags estiverem balanceadas, o Dreamweaver acabar selecionando as tags html e /html mais externas.

Verificao de parnteses, chaves ou colchetes balanceados


1 Abra o documento na Visualizao de cdigo. 2 Coloque o ponto de insero no cdigo que voc deseja verificar. 3 Selecione Editar > Ajustar chaves.

Todos os cdigos entre os parnteses, as chaves ou os colchetes delimitadores esto selecionados. Se voc escolher novamente Editar > Ajustar chaves, todo o cdigo dentro dos parnteses, das chaves ou dos colchetes que delimitam a nova seleo ser selecionado.

Verificar compatibilidade de navegador


O recurso Verificao de compatibilidade do navegador (VCN) ajuda a localizar combinaes de HTML e CSS que podem acionar bugs de processamento do navegador. Esse recurso tambm testa o cdigo nos documentos para verificar se h alguma propriedade ou valor CSS incompatvel com os navegadores de destino. Nota: Esse recurso substitui a antiga Verificao do navegador de destino, mas retm a funcionalidade CSS.

Mais tpicos da Ajuda


Verificao de problemas de processamento de CSS em vrios navegadores na pgina 146

Validar tags
O recurso Validar tags (Arquivo > Validar) est obsoleto no Dreamweaver CS5. Porm, o Dreamweaver ainda valida documentos XML e ColdFusion. Voc pode definir preferncias para o Validador, os problemas especficos que o Validador deve verificar e os tipos de erros que o Validador deve reportar.
1 Siga um destes procedimentos:

Em um arquivo XML ou XHTML, selecione Arquivo > Validar > Como XML. Para um arquivo ColdFusion, selecione Arquivo > Validar > ColdFusion.
A aba Validao do painel Resultados exibe a mensagem Nenhum erro ou aviso ou lista os erros de sintaxe localizados.
2 Clique duas vezes em uma mensagem de erro para realar o erro no documento. 3 Para salvar o relatrio como um arquivo XML, clique no boto Salvar relatrio. 4 Para visualizar o relatrio no navegador principal (que permitir a impresso do relatrio), clique no boto

Procurar relatrio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 326


Trabalho com cdigo de pgina

Definir preferncias do Validador


O recurso Validar tags est obsoleto no Dreamweaver CS5. Entretanto, o Dreamweaver ainda oferece suporte para validadores de cdigo externos que voc instala como extenses. Quando voc instala uma extenso externa de validador, o Dreamweaver lista suas preferncias na categoria Validador da caixa de dilogo Preferncias.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Na lista Categoria esquerda, selecione Validador. 3 Selecione as bibliotecas de tags que sero usadas na validao.

Voc no pode selecionar vrias verses da mesma biblioteca de tags ou linguagem; por exemplo, se voc selecionar HTML 4.0, no poder selecionar tambm HTML 3.2 ou HTML 2.0. Selecione a verso mais antiga que deseja usar na validao; por exemplo, se um documento contiver um cdigo HTML 2.0 vlido, ele tambm ser vlido para HTML 4.0.
4 Clique em Opes e defina as opes para essas bibliotecas. 5 Selecione as opes de exibio dos tipos de erros e avisos que devero estar includos no relatrio do Validador. 6 Selecione os itens que o Validador deve verificar:
Aspas no texto Indica que o Dreamweaver deve avisar voc sobre cada uso de aspas no texto do documento. Voc deve usar a entidade &quot; em vez das aspas no texto dos documentos HTML. Entidades no texto Indica que o Dreamweaver deve recomendar a alterao de determinados caracteres (como E

comercial (&), sinal de menor que (<) e sinal de maior que (>)) para seus equivalentes da entidade HTML.
7 Clique em OK para fechar a caixa de dilogo Opes do validador e, em seguida, clique em OK novamente para

definir as preferncias.

Tornar as pginas compatveis com XHTML


Ao criar uma pgina, voc pode torn-la compatvel com XHTML. Tambm possvel tornar um documento HTML compatvel com XHTML.

Mais tpicos da Ajuda


Cdigo XHTML na pgina 293

Criao de documentos compatveis com XHTML


1 Selecione Arquivo > Novo. 2 Selecione uma categoria e um tipo para a pgina a ser criada. 3 Selecione uma das definies de tipo de documento (DTD) XHTML no menu pop-up TipoDoc na extrema direita

da caixa de dilogo e clique em Criar. Por exemplo, voc pode criar um documento HTML compatvel com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu pop-up. Nota: Nem todos os tipos de documentos podem se tornar compatveis com XHTML.

Criao de documentos compatveis com XHTML por padro


1 Selecione Editar > Preferncias ou Dreamweaver > Preferences (Mac OS X) e selecione a categoria Novo

documento.
2 Selecione um documento padro e uma das definies de tipo de documento XHTML no menu pop-up Tipo

padro de documento (DTD), e clique em OK.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 327


Trabalho com cdigo de pgina

Por exemplo, voc pode criar um documento HTML compatvel com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu pop-up.

Tornar um documento HTML existente compatvel com XHTML


1 Abra um documento e siga um destes procedimentos:

Em um documento sem quadros, selecione Arquivo > Converter e selecione uma das definies de tipo de
documento XHTML. Por exemplo, voc pode criar um documento HTML compatvel com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu pop-up.

Em um documento com quadros, selecione um quadro, selecione Arquivo > Converter e selecione uma das
definies de tipo de documento XHTML.
2 Para converter o documento inteiro, repita esta etapa para cada quadro e para o documento de conjunto de

quadros. Nota: Voc no pode converter uma ocorrncia de um modelo, pois ela deve estar na mesma linguagem que o modelo em que est baseada. Por exemplo, um documento baseado em um modelo XHTML sempre ser XHTML, e um documento baseado em um modelo no compatvel com XHTML sempre ser HTML e no poder ser convertido em XHTML ou qualquer outra linguagem.

Usar o depurador do ColdFusion (somente Windows)


Se voc for um desenvolvedor do ColdFusion que usa o ColdFusion como servidor de teste do Dreamweaver, poder visualizar as informaes de depurao desse aplicativo sem sair do Dreamweaver. Nota: No h suporte para esse recurso no Macintosh. Os desenvolvedores do Macintosh podem usar o recurso Visualizar no navegador (F12) para abrir uma pgina do ColdFusion em um navegador separado. Se a pgina contiver erros, as informaes sobre as possveis causas dos erros aparecero na parte inferior da pgina. Se voc estiver executando o ColdFusion MX 6.1 ou anterior, verifique se as configuraes de depurao esto ativadas no Administrador do ColdFusion antes de comear a depurao. Se voc estiver executando o ColdFusion MX 7 ou posterior, o Dreamweaver ativar as configuraes para voc. Alm disso, verifique se o servidor de teste do Dreamweaver est executando o ColdFusion. Para obter mais informaes, consulte Configurar um servidor de teste na pgina 46. Para garantir que as informaes de depurao sero atualizadas cada vez que uma pgina for exibida no navegador interno, assegure que o Internet Explorer procurar verses mais recentes do arquivo cada vez que ele for solicitado. No Internet Explorer, selecione Ferramentas > Opes da Internet, selecione a aba Geral e clique no boto Configuraes na rea Arquivos de Internet Temporrios. Na caixa de dilogo Configuraes, selecione a opo A cada visita pgina.
1 Abra a pgina do ColdFusion no Dreamweaver. 2 Clique no cone Depurao de servidor

na barra de ferramentas Documento.

O Dreamweaver solicita a pgina do servidor ColdFusion e a exibe em uma janela interna do navegador Internet Explorer. Se a pgina contiver erros, as possveis causas dos erros aparecero na parte inferior da pgina. Ao mesmo tempo, o painel Depurao de servidor ser aberto. O painel fornece um grande volume de informaes teis, como todas as pginas que o servidor executou para processar a pgina, todas as consultas SQL executadas na pgina e todas as variveis de servidor e seus respectivos valores, se houver algum. O painel tambm fornece um resumo dos tempos de execuo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 328


Trabalho com cdigo de pgina

3 Se a categoria Excees aparecer no painel Depurao de servidor, clique no cone de adio (+) para expandir a

categoria. A categoria Excees aparecer se o servidor detectar um ou mais problemas na pgina. Expanda a categoria para obter mais informaes sobre o problema.
4 Alterne de volta para a Visualizao de cdigo (Visualizao > Cdigo) ou para a Visualizao de design

(Visualizao > Design) e corrija o erro.


5 Salve o arquivo e clique novamente no cone Depurao do servidor.

O Dreamweaver processa a pgina no navegador interno novamente e atualiza o painel Depurao de servidor. Se no houver mais problemas na pgina, a categoria Excees no reaparecer no painel.
6 Para sair do modo de depurao, alterne para Visualizao de cdigo (Exibir > Cdigo) ou Visualizao de design

(Exibir > Design).

Mais tpicos da Ajuda


Uso de componentes do ColdFusion na pgina 649

Edio do cdigo na Visualizao de design


Sobre a edio do cdigo na Visualizao de design
O Dreamweaver permite criar e editar visualmente pginas da Web sem que voc precise se preocupar com o cdigofonte subjacente. No entanto, haver momentos em que provavelmente ser necessrio editar o cdigo para ter maior controle ou para solucionar problemas da pgina da Web. O Dreamweaver permite que voc edite algum cdigo enquanto est trabalhando na Visualizao de design. Esta seo foi projetada para pessoas que preferem trabalhar na Visualizao de design, mas que tambm desejam acessar rapidamente o cdigo.

Seleo de tags-filha na Visualizao de design


Se voc selecionar um objeto na Visualizao de design que contm tags-filha, por exemplo, uma tabela HTML, poder selecionar rapidamente a primeira tag-filha desse objeto clicando em Editar > Selecionar filho. Nota: Esse comando s estar ativado na Visualizao de design. Por exemplo, a tag <table> normalmente tem tags-filha <tr>. Se voc selecionar uma tag <table> no seletor de tags, poder selecionar a primeira linha na tabela clicando em Editar > Selecionar filho. O Dreamweaver selecionar a primeira tag <tr> no seletor de tags. Como a tag <tr> possui tags-filha, chamadas tags <td>, se voc clicar novamente em Editar > Selecionar filho, a primeira clula da tabela ser selecionada.

Edio do cdigo com o Inspetor de propriedades


Voc pode usar o Inspetor de propriedades para inspecionar e editar os atributos de texto ou de objetos na pgina. As propriedades mostradas no Inspetor de propriedades geralmente correspondem aos atributos das tags. A alterao de uma propriedade no Inspetor de propriedades normalmente tem o mesmo efeito que alterar o atributo correspondente na Visualizao de cdigo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 329


Trabalho com cdigo de pgina

Nota: O Inspetor de tags e o Inspetor de propriedades permitem que voc visualize e edite os atributos de uma tag. O Inspetor de tags permite que voc visualize e edite cada atributo associado a uma tag especfica. O Inspetor de propriedades mostra somente os atributos mais comuns, mas fornece um conjunto mais sofisticado de controles para alterar os valores desses atributos, e permite editar determinados objetos (como colunas de tabela) que no correspondem a tags especficas.
1 Clique no texto ou selecione um objeto na pgina.

O Inspetor de propriedades do texto ou objeto aparece abaixo da janela Documento. Se o Inspetor de propriedades no estiver visvel, selecione Janela > Propriedades.
2 Faa as alteraes nos atributos no Inspetor de propriedades.

Edio do CFML com o Inspetor de propriedades


Use o Inspetor de propriedades para inspecionar e modificar o markup do ColdFusion na Visualizao de design.
1 No Inspetor de propriedades, clique no boto Atributos para editar os atributos da tag ou adicionar novos. 2 Se a tag tiver contedo entre suas tags de abertura e finalizao, clique no boto Contedo para editar o contedo.

O boto Contedo aparecer somente se a tag selecionada no for uma tag vazia (ou seja, se ela contiver uma tag de abertura e uma tag de finalizao).
3 Se a tag contiver uma expresso condicional, faa as alteraes nela na caixa Expresso.

Alterar atributos com o Inspetor de tags


Use o Inspetor de tags para editar ou adicionar atributos e valores de atributos. O Inspetor de tags permite editar tags e objetos usando uma folha de propriedades similar s encontradas em outros ambientes de desenvolvimento integrado (IDEs).
1 Siga um destes procedimentos na janela Documento:

Na Visualizao de cdigo (ou no Inspetor de cdigo), clique em qualquer lugar no nome de uma tag ou em seu
contedo.

Na Visualizao de design, selecione um objeto ou selecione uma tag no Seletor de tags.


2 Abra o Inspetor de tags (Janela > Inspetor de tags) e selecione a aba Atributos.

Os atributos da seleo e seus valores atuais aparecem no Inspetor de tags.


3 Execute um dos seguintes procedimentos no Inspetor de tags:

Para visualizar os atributos organizados pela categoria, clique no boto Mostrar visualizao de categoria Para visualizar os atributos em uma lista alfabtica, clique no boto Mostrar visualizao de lista Para alterar um valor do atributo, selecione o valor e edite-o.
.

Para adicionar um valor para um atributo sem valor, clique na coluna de valor de atributo direita do atributo e
adicione um valor.

Se o atributo usar valores predefinidos, selecione um valor no menu pop-up (ou no seletor de cores) direita da
coluna de valor de atributo.

Se o atributo adotar um valor de URL, clique no boto Procurar ou use o cone Apontar para arquivo a fim de
selecionar um arquivo ou digite o URL na caixa.

Se o atributo usar um valor de uma origem de contedo dinmico (como um banco de dados), clique no boto
Dados dinmicos direita da coluna de valor de atributo. Em seguida, selecione uma origem.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 330


Trabalho com cdigo de pgina

Para excluir o valor do atributo, selecione o valor e pressione Backspace (Windows) ou Delete (Macintosh). Para alterar o nome de um atributo, selecione o nome do atributo e edite-o.
Nota: Se voc alterar o nome de um atributo padro e, em seguida, adicionar um valor para esse atributo, o atributo e seu novo valor sero movidos para a categoria apropriada.

Para adicionar um novo atributo que ainda no esteja listado, clique no espao vazio abaixo do ltimo nome de
atributo listado e digite um novo nome de atributo.
4 Pressione Enter (Windows) ou Return (Macintosh), ou clique em qualquer outro lugar no Inspetor de tags para

atualizar a tag no documento.

Mais tpicos da Ajuda


Uso de comportamentos JavaScript na pgina 346 Criao e gerenciamento de CSS na pgina 128 Definio de origens de contedo dinmico na pgina 563

Viso geral do Quick Tag Editor


Use o Quick Tag Editor para inspecionar, inserir e editar rapidamente as tags HTML sem sair da Visualizao de design. Se voc digitar um HTML invlido no Quick Tag Editor, o Dreamweaver tentar corrigi-lo para voc inserindo aspas de fechamento e colchetes angulares de fechamento quando necessrio. Para definir as opes do Quick Tag Editor, abra o editor pressionando Control-T (Windows) ou Command-T (Macintosh). O Quick Tag Editor possui trs modos:

O modo Inserir HTML usado para inserir um novo cdigo HTML. O modo Editar tag usado para editar uma tag existente. O modo Colocar tag ao redor usado para colocar uma nova tag ao redor de uma seleo atual.
Nota: O modo em que o Quick Tag Editor aberto depende da seleo atual na Visualizao de design. Nos trs modos, o procedimento bsico para uso do Quick Tag Editor o mesmo: abra o editor, digite ou edite tags e atributos, e feche o editor. Voc pode percorrer os trs modos pressionando Control+T (Windows) ou Command+T (Macintosh) enquanto o Quick Tag Editor est ativo.

Mais tpicos da Ajuda


Uso do menu de dicas no Quick Tag Editor na pgina 331

Edio de cdigo com o Quick Tag Editor


Use o Quick Tag Editor para inserir e editar rapidamente as tags HTML sem sair da Visualizao de design.

Mais tpicos da Ajuda


Gravao e edio de scripts na Visualizao de design na pgina 333

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 331


Trabalho com cdigo de pgina

Insero de uma tag HTML


1 Na Visualizao de design, clique na pgina para colocar o ponto de insero no local em que voc deseja inserir o

cdigo.
2 Pressione Control+T (Windows) ou Command+T (Macintosh).

O Quick Tag Editor aberto no modo Inserir HTML.

3 Digite a tag HTML e pressione Enter.

A tag inserida no cdigo, juntamente com uma tag de finalizao correspondente, se aplicvel.
4 Pressione Escape para sair sem fazer alteraes.

Edio de uma tag HTML


1 Selecione um objeto na Visualizao de design.

Voc tambm pode selecionar a tag que deseja editar no seletor de tags na parte inferior da janela Documento. Para obter mais informaes, consulte Edio de cdigo com o seletor de tags na pgina 332.
2 Pressione Control+T (Windows) ou Command+T (Macintosh).

O Quick Tag Editor aberto no modo Editar tag.


3 Digite novos atributos, edite atributos existentes ou edite o nome da tag. 4 Pressione Tab para mover-se de um atributo para o seguinte; pressione Shift+Tab para retornar.

Nota: Por padro, as alteraes so aplicadas ao documento quando voc pressiona Tab ou Shift+Tab.
5 Para fechar o Quick Tag Editor e aplicar todas as alteraes, pressione Enter. 6 Para sair sem fazer nenhuma outra alterao, pressione Escape.

Delimitao da seleo atual com tags HTML


1 Selecione o texto sem formatao ou um objeto na Visualizao de design.

Nota: Se voc selecionar texto ou um objeto que inclua uma tag HTML de abertura ou finalizao, o Quick Tag Editor ser aberto no modo Editar tag, e no no modo Colocar tag ao redor.
2 Pressione Control+T (Windows) ou Command+T (Macintosh), ou clique no boto do Quick Tag Editor no

Inspetor de propriedades. O Quick Tag Editor aberto no modo Colocar tag ao redor.
3 Digite uma tag de abertura nica, como strong, e pressione Enter (Windows) ou Return (Macintosh).

A tag inserida no incio da seleo atual, enquanto uma tag de finalizao correspondente inserida no final.
4 Para sair sem fazer nenhuma alterao, pressione Escape.

Uso do menu de dicas no Quick Tag Editor


O Quick Tag Editor inclui um menu de dicas de atributos que lista todos os atributos vlidos da tag que voc est editando ou inserindo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 332


Trabalho com cdigo de pgina

Voc tambm pode desativar o menu de dicas ou ajustar o atraso antes que o menu seja exibido no Quick Tag Editor. Para ver um menu de dicas que lista os atributos vlidos para uma tag, faa uma pausa rpida enquanto edita um nome de atributo no Quick Tag Editor. Um menu de dicas exibido, listando todos os atributos vlidos para a tag que voc est editando. Da mesma forma, para ver um menu de dicas que lista nomes de tag vlidos, faa uma pausa enquanto digita ou edita um nome de tag no Quick Tag Editor. Nota: As preferncias de dicas de cdigo do Quick Tag Editor so controladas pelas preferncias normais de dicas de cdigo. Para obter mais informaes, consulte Definir preferncias de dicas de cdigo na pgina 306.

Mais tpicos da Ajuda


Viso geral do Quick Tag Editor na pgina 330

Uso de um menu de dicas


1 Siga um destes procedimentos:

Comece a digitar um nome de tag ou atributo. A seleo no menu Dicas de cdigo vai para o primeiro item que
inicia com as letras que voc digitou.

Use as teclas para cima ou para baixo a fim de selecionar um item. Use a barra de rolagem para localizar um item.
2 Pressione Enter para inserir o item selecionado ou clique duas vezes em um item para inseri-lo. 3 Para fechar o menu de dicas sem inserir um item, pressione Escape ou continue digitando.

Desativao do menu de dicas ou alterao do atraso antes que o menu aparea


1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh) e selecione Dicas de

cdigo. A caixa de dilogo Preferncias de dicas de cdigo exibida.


2 Para desativar o menu de dicas, cancele a seleo da opo Ativar dicas de cdigo. 3 Para alterar o atraso antes que o menu aparea, ajuste o controle deslizante Atraso e clique em OK.

Edio de cdigo com o seletor de tags


Voc pode usar o seletor de tags para selecionar, editar ou remover tags sem sair da Visualizao de design. O seletor de tags est localizado na barra de status, na parte inferior da janela Documento, e mostra uma srie de tags:

Edio ou excluso de uma tag


1 Clique no documento.

As tags aplicadas no ponto de insero aparecem no seletor de tags.


2 No seletor de tags, clique com o boto direito do mouse em uma tag (Windows) ou mantenha pressionada a tecla

Control enquanto clica em uma tag (Macintosh).


3 Para editar uma tag, selecione Editar tag no menu. Faa as alteraes no Quick Tag Editor. Para obter mais

informaes, consulte Edio de cdigo com o Quick Tag Editor na pgina 330.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 333


Trabalho com cdigo de pgina

4 Para excluir uma tag, selecione Remover tag no menu.

Seleo de um objeto correspondente a uma tag


1 Clique no documento.

As tags aplicadas no ponto de insero aparecem no seletor de tags.


2 Clique em uma tag no seletor de tags.

O objeto representado pela tag selecionado na pgina. Use esta tcnica para selecionar linhas (tags tr) ou clulas (tags td) de tabela individuais.

Gravao e edio de scripts na Visualizao de design


Voc pode trabalhar com JavaScripts e VBScripts do cliente tanto na Visualizao de cdigo quanto na Visualizao de design, da seguinte maneira:

Grave um script JavaScript ou VBScript para a pgina sem sair da Visualizao de design. Crie um link no documento para um arquivo de script externo sem sair da Visualizao de design. Edite um script sem sair da Visualizao de design.
Antes de iniciar, selecione Exibir > Auxlios visuais > Elementos invisveis para garantir que os marcadores de script aparecero na pgina.

Gravao de um script do cliente


1 Coloque o ponto de insero no local onde deve ser inserido o script. 2 Selecione Inserir > HTML > Objetos de script > Script. 3 Selecione a linguagem de script no menu pop-up Linguagem.

Se voc estiver usando JavaScript e no tiver certeza da verso, selecione JavaScript em vez de JavaScript1.1 ou JavaScript1.2.
4 Digite ou cole o cdigo de script na caixa Contedo.

No preciso incluir as tags script de abertura e finalizao.


5 Digite ou cole o cdigo HTML na caixa Nenhum script. Os navegadores que no oferecem suporte linguagem de

script escolhida exibem esse cdigo, em vez de executarem o script.


6 Clique em OK.

Vinculao a um arquivo de script externo


1 Coloque o ponto de insero no local onde deve ser inserido o script. 2 Selecione Inserir > HTML > Objetos de script > Script. 3 Clique em OK sem digitar dados na caixa Contedo. 4 Selecione o marcador de script na Visualizao de design da janela Documento. 5 No Inspetor de propriedades, clique no cone de pasta, navegue at o arquivo de script externo desejado e selecione-

o, ou digite o nome de arquivo na caixa Origem.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 334


Trabalho com cdigo de pgina

Edio de um script
1 Selecione o marcador de script. 2 No Inspetor de propriedades, clique no boto Editar.

O script exibido na caixa de dilogo Propriedades do script. Se voc estiver vinculado a um arquivo de script externo, o arquivo ser aberto na Visualizao de cdigo, na qual voc poder fazer as edies. Nota: Se houver cdigo entre as tags de script, a caixa de dilogo Propriedades do script ser aberta, mesmo se tambm houver um link para um arquivo de script externo.
3 Na caixa Linguagem, especifique JavaScript ou VBScript como linguagem do script. 4 No menu pop-up Tipo, especifique o tipo do script: do cliente ou do servidor. 5 (Opcional) Na caixa Origem, especifique um arquivo de script vinculado externamente.

Clique no cone de pasta

ou no boto Procurar para selecionar um arquivo ou digite o caminho.

6 Edite o script e clique em OK.

Edio de scripts ASP do servidor na Visualizao de design


Use o Inspetor de propriedades do script ASP para inspecionar e modificar scripts ASP do servidor na Visualizao de design.
1 Na Visualizao de design, selecione o cone visual da tag de linguagem de servidor. 2 No Inspetor de propriedades do script ASP, clique no boto Editar. 3 Edite o script ASP do servidor e clique em OK.

Edio de scripts na pgina usando o Inspetor de propriedades


1 No Inspetor de propriedades, selecione a linguagem de script no menu pop-up Linguagem ou digite um nome de

linguagem na caixa Linguagem. Nota: Se voc estiver usando JavaScript e no tiver certeza da verso, selecione JavaScript em vez de JavaScript1.1 ou JavaScript1.2.
2 No menu pop-up Tipo, especifique o tipo do script: do cliente ou do servidor. 3 (Opcional) Na caixa Origem, especifique um arquivo de script vinculado externamente. Clique no cone de pasta

para selecionar o arquivo ou digite o caminho.


4 Clique em Editar para modificar o script.

Mais tpicos da Ajuda


Gravao e edio de scripts na Visualizao de design na pgina 333

Uso de comportamentos JavaScript


Voc pode anexar facilmente comportamentos JavaScript (no lado do cliente) nos elementos de pgina, usando a aba Comportamentos do Inspetor de tags. Para obter mais informaes, consulte Aplicao de comportamentos internos do Dreamweaver na pgina 349.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 335


Trabalho com cdigo de pgina

Trabalho com o contedo de cabealho das pginas


As pginas contm elementos que descrevem as informaes na pgina, que usado pelos navegadores de pesquisa. Voc pode definir as propriedades dos elementos head a fim de determinar como as pginas so identificadas.

Visualizar e editar o contedo do cabealho


Voc pode visualizar os elementos na seo head de um documento usando o menu Exibir, a Visualizao de cdigo da janela Documento ou o Inspetor de cdigo.

Visualizao dos elementos na seo de cabealho de um documento


Selecione Exibir > Contedo do cabealho. Para cada elemento do contedo head, exibido um marcador na parte

inferior da janela Documento, na Visualizao de design. Nota: Se a janela Documento estiver definida para mostrar somente a Visualizao de cdigo, Exibir > Contedo do cabealho estar esmaecido.

Insero de um elemento na seo de cabealho de um documento


1 Selecione um item no submenu Inserir > HTML > Tags de cabealho. 2 Digite opes para o elemento na caixa de dilogo exibida ou no Inspetor de propriedades.

Edio de um elemento na seo de cabealho de um documento


1 Selecione Exibir > Contedo do cabealho. 2 Clique em um dos cones na seo head para selecion-lo. 3 Defina ou modifique as propriedades do elemento no Inspetor de propriedades.

Definio das propriedades meta da pgina


Uma tag meta um elemento head que registra informaes sobre a pgina atual, como codificao de caractere, autor, direitos autorais ou palavras-chave. Essas tags tambm podem ser usadas para fornecer informaes ao servidor, como data de expirao, intervalo de atualizao e classificao PICS da pgina. (A PICS, Platform for Internet Content Selection, fornece um mtodo para atribuir classificaes, como classificaes de filmes, a pginas da Web.)

Adio de uma meta tag


1 Selecione Inserir > HTML > Tags de cabealho > Meta. 2 Especifique as propriedades na caixa de dilogo exibida.

Edio de uma meta tag existente


1 Selecione Exibir > Contedo do cabealho. 2 Selecione o marcador Meta exibido na parte superior da janela Documento. 3 Especifique as propriedades no Inspetor de propriedades.

Propriedades da meta tag


Defina as propriedades da meta tag da seguinte maneira: Atributo Especifica se a tag meta contm informaes descritivas sobre a pgina (name) ou informaes de cabealho

HTTP (http-equiv).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 336


Trabalho com cdigo de pgina

Valor Especifica o tipo de informaes que voc est fornecendo nesta tag. Alguns valores, como description,
keywords e refresh, j esto bem definidos (e tm seus prprios Inspetores de propriedades no Dreamweaver), mas

voc pode especificar praticamente qualquer valor (por exemplo, creationdate, documentID ou level).
Contedo Especifica as informaes reais. Por exemplo, se voc especificou level em Valor, poder especificar
beginner, intermediate ou advanced em Contedo.

Definio do ttulo da pgina


H apenas uma propriedade de ttulo: o ttulo da pgina. O ttulo aparece na barra de ttulo da janela Documento do Dreamweaver, bem com na barra de ttulo do navegador, quando voc visualiza a pgina na maioria dos navegadores. O ttulo tambm aparece na barra de ferramentas da janela Documento.

Especificao do ttulo na janela Documento


Digite o ttulo na caixa de texto Ttulo da barra de ferramentas da janela Documento.

Especificao do ttulo no contedo de cabealho


1 Selecione Exibir > Contedo do cabealho. 2 Selecione o marcador Title exibido na parte superior da janela Documento. 3 Especifique o ttulo da pgina no Inspetor de propriedades.

Especificao das palavras-chave da pgina


Muitos robs de mecanismo de pesquisa (programas que navegam automaticamente na Web coletando informaes para que os mecanismos de pesquisa indexem) lem o contedo da tag meta das palavras-chave e usam as informaes para indexar as pginas em seus bancos de dados. Como alguns mecanismos de pesquisa limitam o nmero de palavras-chave ou caracteres indexados, ou ignoram todas as palavras-chave se voc ultrapassar o limite, recomendvel usar apenas algumas palavras-chave cuidadosamente escolhidas.

Adio de uma meta tag Keywords


1 Selecione Inserir > HTML > Tags de cabealho > Palavras-chave. 2 Especifique as palavras-chave, separadas por vrgulas, na caixa de dilogo exibida.

Edio de uma meta tag Keywords


1 Selecione Exibir > Contedo do cabealho. 2 Selecione o marcador Keywords exibido na parte superior da janela Documento. 3 No Inspetor de propriedades, visualize, modifique ou exclua palavras-chave. Voc tambm pode adicionar

palavras-chave separadas por vrgula.

Especificao das descries da pgina


Vrios robs de mecanismo de pesquisa (os programas que navegam automaticamente na Web coletando informaes para que os mecanismos de pesquisa indexem) lem o contedo da tag meta Description. Alguns usam as informaes para indexar as pginas em seus bancos de dados; outros tambm exibem as informaes na pgina de resultados da pesquisa (em vez de exibir as primeiras linhas do documento). Alguns mecanismos de pesquisa limitam o nmero de caracteres indexados. Portanto, recomendvel limitar a descrio a algumas palavras (por exemplo, PorkbarbecuecateringinAlbany,Georgia ou webdesignatreasonableratesforclientsworldwide).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 337


Trabalho com cdigo de pgina

Adio de uma meta tag Description


1 Selecione Inserir > HTML > Tags de cabealho > Descrio. 2 Digite o texto descritivo na caixa de dilogo exibida.

Edio de uma meta tag Description


1 Selecione Exibir > Contedo do cabealho. 2 Selecione o marcador Description exibido na parte superior da janela Documento. 3 No Inspetor de propriedades, visualize, modifique ou exclua o texto descritivo.

Definio das propriedades de atualizao da pgina


Use o elemento de atualizao para especificar se o navegador deve atualizar automaticamente a pgina recarregando a pgina atual ou acessando outra aps um determinado perodo. Esse elemento geralmente usado para redirecionar os usurios de um URL para outro, geralmente aps exibir uma mensagem de texto informando que o URL foi alterado.

Adio de uma meta tag Refresh


1 Selecione Inserir > HTML > Tags de cabealho > Atualizar. 2 Defina as propriedades da meta tag Refresh na caixa de dilogo exibida.

Edio de uma meta tag Refresh


1 Selecione Exibir > Contedo do cabealho. 2 Selecione o marcador Refresh exibido na parte superior da janela Documento. 3 No Inspetor de propriedades, defina as propriedades da meta tag Refresh.

Definio das propriedades da meta tag Refresh


Defina as propriedades da meta tag Refresh da seguinte maneira: Atraso O tempo em segundos que deve ser aguardado at que o navegador atualize a pgina. Para que o navegador

atualize a pgina imediatamente aps o trmino do carregamento, digite 0 nesta caixa.


URL ou Ao Especifica se o navegador deve ir para um URL diferente ou atualizar a pgina atual, aps o atraso

especificado. Para abrir outro URL (em vez de atualizar a pgina atual), clique no boto Procurar, v at o item desejado e selecione a pgina a ser carregada.

Definio das propriedades de URL base da pgina


Use o elemento Base para definir um URL base qual todos os caminhos relativos de documento da pgina so considerados relativos.

Adio de uma meta tag Base


1 Selecione Inserir > HTML > Tags de cabealho > Base. 2 Especifique as propriedades da meta tag Base na caixa de dilogo exibida.

Edio de uma meta tag Base


1 Selecione Exibir > Contedo do cabealho.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 338


Trabalho com cdigo de pgina

2 Selecione o marcador Base exibido na parte superior da janela Documento. 3 No Inspetor de propriedades, especifique as propriedades da meta tag Base.

Especificao das propriedades da meta tag Base


Especifique as propriedades da meta tag Base da seguinte maneira: Href O URL base. Clique no boto Procurar para navegar at o item desejado e selecione um arquivo, ou digite um caminho na caixa. Alvo Especifica o quadro ou a janela em que todos os documentos vinculados sero abertos. Selecione um dos quadros

do conjunto de quadros atual ou um dos seguintes nomes reservados:

_blank carrega o documento vinculado em uma nova janela do navegador no nomeada. _parent carrega o documento vinculado no conjunto de quadros pai ou na janela do quadro que contm o link. Se

o quadro contendo o link no estiver aninhado, esse ser o equivalente a _top; o documento vinculado ser carregado na janela de navegador em tamanho integral.

_self carrega o documento vinculado no mesmo quadro ou janela do link. Esse destino o padro, normalmente

no necessrio especific-lo.
_top carrega o documento vinculado na janela completa do navegador, removendo todos os quadros.

Definio das propriedades de vinculao da pgina


Use a tag link para definir um relacionamento entre o documento atual e outro arquivo. Nota: A tag link da seo head no o mesmo que um link HTML entre documentos na seo body.

Adio de uma meta tag Link


1 Selecione Inserir > HTML > Tags de cabealho > Link. 2 Especifique as propriedades da meta tag Link na caixa de dilogo exibida.

Edio de uma meta tag Link


1 Selecione Exibir > Contedo do cabealho. 2 Selecione o marcador Link exibido na parte superior da janela Documento. 3 No Inspetor de propriedades, especifique as propriedades da meta tag Link.

Especificao das propriedades da meta tag Link


Defina as propriedades da meta tag Link da seguinte maneira: Href O URL do arquivo para o qual voc est definindo um relacionamento. Clique no boto Procurar para navegar at o item desejado e selecione um arquivo, ou digite um caminho na caixa. Observe que, no sentido comum do HTML, esse atributo no indica um arquivo ao qual voc est se vinculando. Os relacionamentos especificados em um elemento Link so mais complexos. ID Especifica um identificador exclusivo para o link. Ttulo Descreve o relacionamento. Este atributo tem relevncia especial para as folhas de estilos vinculadas. Para obter

mais informaes, consulte a seo External Style Sheets na especificao HTML 4.0 no site da World Wide Web Consortium em www.w3.org/TR/REC-html40/present/styles.html#style-external.
Rel Especifica o relacionamento entre o documento atual e o documento na caixa Href. Os valores possveis incluem
Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section,

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 339


Trabalho com cdigo de pgina

Subsection, Appendix, Help e Bookmark. Para especificar mais de um relacionamento, separe os valores com um

espao.
Rev Especifica um relacionamento reverso (o oposto de Rel) entre o documento atual e o documento na caixa Href.

Os valores possveis so os mesmos de Rel.

Trabalho com as incluses de servidor


Sobre as incluses de servidor
Voc pode usar o Dreamweaver para inserir incluses de servidor nas pginas, editar as incluses ou visualizar as pginas que contm incluses. Uma incluso de servidor um arquivo que o servidor incorpora no documento quando um navegador solicita o documento no servidor. Quando o navegador de um visitante solicita o documento que contm a instruo de incluso, o servidor processa a instruo e cria um novo documento no qual a instruo ser substituda pelo contedo do arquivo includo. Em seguida, o servido envia esse novo documento ao navegador do visitante. No entanto, quando voc abre um documento local diretamente em um navegador, no h servidor para processar as instrues de incluso. Sendo assim, o navegador abre o documento sem processar as instrues e o arquivo que deveria ser includo no aparece no navegador. Portanto, sem o Dreamweaver, pode ser difcil examinar os arquivos locais e visualiz-los da forma como aparecero aos visitantes depois que voc coloc-los no servidor. Com o Dreamweaver, voc pode visualizar os documentos exatamente como eles aparecero depois que estiverem no servidor, tanto na Visualizao de design como no recurso Visualizao em navegador. Para isso, entretanto, voc deve certificar-se de visualizar o arquivo que contm a incluso como um arquivo temporrio. (Selecione Editar > Preferncias, selecione a categoria Visualizar em navegador e certifique-se de que a opo Visualizar usando arquivo temporrio esteja selecionada.) Nota: Se voc estiver usando um servidor de teste, como o Apache ou Microsoft IIS, para visualizar os arquivos em sua unidade local, voc no precisa visualizar o arquivo como arquivo temporrio porque o servidor faz esse processamento para voc. Ao colocar uma incluso de servidor em um documento, voc inserir uma referncia a um arquivo externo. O contedo do arquivo especificado no documento atual no inserido. O contedo do arquivo especificado deve conter somente o contedo que voc deseja incluir. Ou seja, o arquivo de incluso no deve conter nenhuma tag head, body ou html (isso significa que as tags <html> de formatao, como as tags p, div etc., podem ser usadas). Caso isso acontea, essas tags entraro em conflito com as tags do documento original e o Dreamweaver no exibir adequadamente a pgina. Voc no pode editar o arquivo includo diretamente em um documento. Para editar o contedo de uma incluso de servidor, voc deve editar diretamente o arquivo que est incluindo. Qualquer alterao feita no arquivo externo automaticamente refletida em cada documento que a inclui. H dois tipos de incluses de servidor: Virtual e Arquivo. O Dreamweaver insere o tipo de arquivo por padro, mas voc pode usar o Inspetor de propriedades para selecionar um que seja apropriado para o tipo de servidor Web que voc usa:

Se ele for um servidor Web Apache, selecione Virtual. No Apache, o tipo Virtual funciona em todos os casos,
enquanto o tipo Arquivo funciona somente em alguns casos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 340


Trabalho com cdigo de pgina

Se ele for um Microsoft Internet Information Server (IIS), selecione Arquivo. (O tipo Virtual funciona apenas com
o IIS em determinadas circunstncias.) Nota: Infelizmente, o IIS no permitir a incluso de um arquivo em uma pasta acima da pasta atual na hierarquia de pastas, a menos que um software especial tenha sido instalado no servidor. Se voc precisa incluir um arquivo de uma pasta localizada no topo da hierarquia de pastas em um servidor IIS, pergunte ao administrador do sistema se o software necessrio est instalado.

Em outros tipos de servidores, ou se voc no souber qual o tipo do seu servidor, pergunte ao administrador do
sistema qual opo deve ser usada. Alguns servidores so configurados para examinar todos os arquivos e verificar se eles contm incluses de servidor. Outros so configurados para examinar somente arquivos com uma extenso especfica, como .shtml, .shtm ou .inc. Se uma incluso de servidor no estiver funcionando, pergunte ao administrador do sistema se voc precisa usar uma extenso especial no nome do arquivo que usa a incluso. (Por exemplo, se o nome do arquivo for canoe.html, pode ser que voc precise renome-lo para canoe.shtml.) Se voc deseja que seus arquivos retenham as extenses .html ou .htm, pea ao administrador do sistema para configurar o servidor de modo que ele procure incluses de servidor em todos os arquivos (e no apenas nos arquivos com uma extenso especfica). A procura de incluses de servidor em um arquivo leva algum tempo. Portanto, as pginas que o servidor analisa demoram um pouco mais para serem atendidas do que as outras pginas e alguns administradores no permitem a anlise de todos os arquivos.

Insero das incluses de servidor


Voc pode usar o Dreamweaver para inserir incluses de servidor na pgina.

Insero de uma incluso de servidor


1 Selecione Inserir > Incluso do servidor. 2 Na caixa de dilogo exibida, navegue at o arquivo desejado e selecione-o.

Por padro, o tipo de incluso Arquivo inserido.


3 Para alterar o tipo de incluso, selecione a incluso de servidor na janela Documento e altere o tipo no Inspetor de

propriedades (Janela > Propriedades):

Se ele for um servidor Web Apache, selecione Virtual. No Apache, o tipo Virtual funciona em todos os casos,
enquanto o tipo Arquivo funciona somente em alguns casos.

Se ele for um Microsoft Internet Information Server (IIS), selecione Arquivo. (O tipo Virtual funciona apenas com
o IIS em determinadas circunstncias.) Nota: Infelizmente, o IIS no permitir a incluso de um arquivo em uma pasta acima da pasta atual na hierarquia de pastas, a menos que um software especial tenha sido instalado no servidor. Se voc precisa incluir um arquivo de uma pasta localizada no topo da hierarquia de pastas em um servidor IIS, pergunte ao administrador do sistema se o software necessrio est instalado.

Em outros tipos de servidores, ou se voc no souber qual o tipo do seu servidor, pergunte ao administrador do
sistema qual opo deve ser usada.

Alterao de qual arquivo ser includo


1 Selecione a incluso de servidor na janela Documento. 2 Abra o Inspetor de propriedades (Janela > Propriedades).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 341


Trabalho com cdigo de pgina

3 Siga um destes procedimentos:

Clique no cone de pasta, navegue at o novo arquivo a ser includo e selecione-o. Na caixa, digite o caminho e o nome do novo arquivo a ser includo.

Edio do contedo das incluses de servidor


Voc pode usar o Dreamweaver para editar as incluses de servidor. Para editar o contedo associado ao arquivo includo, abra o arquivo.
1 Selecione a incluso de servidor na Visualizao de design ou Visualizao de cdigo e clique em Editar no Inspetor

de propriedades. O arquivo includo aberto em uma nova janela Documento.


2 Edite o arquivo e salve-o.

As alteraes se refletem imediatamente no documento atual e em qualquer documento subseqente que voc abrir que inclua o arquivo.
3 Carregue o arquivo de incluso para o site remoto se necessrio.

Gerenciamento de bibliotecas de tags


Sobre as bibliotecas de tags do Dreamweaver
Uma biblioteca de tags, no Dreamweaver, um conjunto de tags de um tipo especfico, juntamente com informaes sobre como o Dreamweaver deve formatar as tags. As bibliotecas de tags fornecem informaes sobre as tags que o Dreamweaver usa para dicas de cdigo, verificaes de navegador de destino, Seletor de tags e outros recursos de codificao. Com o Editor de bibliotecas de tags, voc pode adicionar e excluir bibliotecas de tags, tags, atributos e valores de atributo, definir propriedades para uma biblioteca de tags, incluindo o formato (para facilitar a identificao do cdigo), e editar tags e atributos.

Mais tpicos da Ajuda


Importao de tags personalizadas para o Dreamweaver na pgina 344 Configuraes das preferncias de codificao na pgina 299

Abertura e fechamento do Editor de bibliotecas de tags


1 Selecione Editar > Bibliotecas de tags para abrir o Editor de bibliotecas de tags.

A caixa de dilogo do Editor de bibliotecas de tags exibida. (As opes desta caixa de dilogo mudam de acordo com a tag selecionada.)
2 Fecha o Editor de bibliotecas de tags da seguinte maneira:

Para salvar as alteraes, clique em OK. Para fechar o editor sem salvar as alteraes, clique em Cancelar.
Nota: Quando voc clica em Cancelar, todas as alteraes efetuadas no Editor de bibliotecas de tags so descartadas. Se voc excluiu uma tag ou uma biblioteca de tags, ela ser restaurada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 342


Trabalho com cdigo de pgina

Adio de bibliotecas, tags e atributos


Voc pode usar o Editor de bibliotecas de tags para adicionar bibliotecas de tags, tags e atributos s bibliotecas de tags no Dreamweaver.

Mais tpicos da Ajuda


Configuraes das preferncias de codificao na pgina 299 Importao de tags personalizadas para o Dreamweaver na pgina 344

Adio de uma biblioteca de tags


1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), clique no boto de adio (+) e selecione Nova

biblioteca de tags.
2 Na caixa Nome da biblioteca, digite um nome (por exemplo, Tags diversas) e clique em OK.

Adio de tags a uma biblioteca de tags


1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), clique no boto de adio (+) e selecione Novas tags. 2 Selecione o menu pop-up Biblioteca de tags e selecione uma biblioteca de tags. 3 Digite o nome da nova tag. Para adicionar mais de uma tag, separe os nomes das tags com uma vrgula e um espao

(por exemplo: cfgraph, cfgraphdata).


4 Se as novas tags tiverem tags de fim correspondentes (</...>), selecione Possui tags de fim correspondentes. 5 Clique em OK.

Adio de atributos a uma tag


1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), clique no boto de adio (+) e selecione Novos

atributos.
2 Selecione o menu pop-up Biblioteca de tags e selecione uma biblioteca de tags. 3 No menu pop-up Tag, selecione uma tag. 4 Digite o nome do novo atributo. Para adicionar mais de um atributo, separe os nomes dos atributos com uma

vrgula e um espao (por exemplo: width, height).


5 Clique em OK.

Edio de bibliotecas, tags e atributos


Use o Editor de bibliotecas de tags para definir as propriedades de uma biblioteca de tags, e editar tags e atributos em uma biblioteca.

Mais tpicos da Ajuda


Configuraes das preferncias de codificao na pgina 299

Definio das propriedades de uma biblioteca de tags


1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), selecione uma biblioteca de tags (e no uma tag) na

lista Tags.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 343


Trabalho com cdigo de pgina

Nota: As propriedades das bibliotecas de tags aparecem somente quando uma biblioteca de tags selecionada. As bibliotecas de tags so representadas pelas pastas de nvel superior na lista Tags; por exemplo, a pasta de tags HTML representa uma biblioteca de tags, enquanto a pasta abbr da pasta de tags HTML representa uma tag.
2 Na lista Usado em, selecione cada tipo de documento que deve usar a biblioteca de tags.

Os tipos de documento que voc seleciona aqui determinam quais tipos de documento fornecem dicas de cdigo para a biblioteca de tags especificada. Por exemplo, se a opo HTML no estiver selecionada para um determinada biblioteca de tags, as dicas de cdigo dessa biblioteca aparecero em arquivos HTML.
3 (Opcional) Digite o prefixo das tags na caixa Prefixo da tag.

Nota: Um prefixo usado para identificar uma tag no cdigo como parte de uma biblioteca de tags especfica. Algumas bibliotecas de tags no usam prefixos.
4 Clique em OK.

Edio de uma tag em uma biblioteca de tags


1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), expanda uma biblioteca de tags na lista Tags e

selecione uma tag.


2 Defina uma das seguintes opes de formatao de tag:
Quebras de linha Especifica onde o Dreamweaver inserir quebras de linha para uma tag. Contedo Especifica como o Dreamweaver inserir o contedo de uma tag; ou seja, se ele aplicar uma quebra de linha, formatao e recuo de regras ao contedo. Maisc./minsc. Especifica o uso de maisculas/minsculas em uma tag especfica. Selecione Padro, Minsculas, Maisculas ou Maisculas e minsculas Se voc selecionar Maisculas e minsculas, a caixa de dilogo Nome da tag em maisc./minsc. Digite a tag respeitando o uso de maisculas/minsculas que o Dreamweaver deve usar ao inserila (por exemplo, getProperty) e clique em OK. Definir padro Define o uso padro de maisculas/minsculas de todas as tags. Na caixa de dilogo Padro de

maisc./minsc. da tag exibida, selecione <MAISCULAS> ou <minsculas> e clique em OK. Provavelmente ser necessrio definir o uso padro de maisculas/minsculas para que fique em conformidade com os padres XML e XHTML.

Edio de um atributo para uma tag


1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), expanda uma biblioteca de tags na caixa Tags,

expanda uma tag e selecione um atributo de tag.


2 No menu pop-up Maisc./minsc. de atributo, selecione a opo Padro, Minsculas, Maisculas ou Maisculas e

minsculas. Se voc selecionar Maisculas e minsculas, a caixa de dilogo Nome do atributo em maisc./minsc. Digite o atributo respeitando o uso de maisculas/minsculas que o Dreamweaver deve usar ao inseri-lo (por exemplo, onClick e clique em OK. Clique no link Definir padro para definir o uso padro de maisculas/minsculas de todos os nomes de atributo.
3 No menu pop-up Tipo de atributo, selecione o tipo do atributo.

Se voc selecionar Enumerado, digite cada valor permitido para o atributo na caixa Valores. Separe os valores com vrgulas, mas sem espaos. Por exemplo, os valores enumerados do atributo showborder da tag cfchart so listados como yes,no.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 344


Trabalho com cdigo de pgina

Excluso de bibliotecas, tags e atributos


1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), selecione uma biblioteca de tags, uma tag ou um

atributo na caixa Tags.


2 Clique no boto de subtrao (). 3 Clique em OK para excluir definitivamente o item.

O item removido da caixa Tags.


4 Clique em OK para fechar o Editor de bibliotecas de tags e concluir a excluso.

Mais tpicos da Ajuda


Configuraes das preferncias de codificao na pgina 299

Importao de tags personalizadas para o Dreamweaver


Sobre a importao de tags personalizadas para o Dreamweaver
Voc pode importar tags personalizadas para o Dreamweaver a fim de que se tornem parte integrante do ambiente de criao. Por exemplo, quando voc comea a digitar uma tag personalizada importada na Visualizao de cdigo, um menu de dicas de cdigo exibido, listando os atributos da tag e permitindo que voc selecione um deles.

Importar tags de arquivos XML


Voc pode importar tags de um arquivo XML de definio de tipo de documento (DTD) ou de um esquema.
1 Abra o Editor de bibliotecas de tags (Editar > Bibliotecas de tags). 2 Clique no boto de adio (+) e selecione Esquema DTD > Importar Arquivo XML DTD ou de esquema. 3 Digite o nome do arquivo ou o URL do arquivo DTD ou de esquema. 4 Digite o prefixo a ser usado com as tags.

Nota: Um prefixo usado para identificar uma tag no cdigo como parte de uma biblioteca de tags especfica. Algumas bibliotecas de tags no usam prefixos.
5 Clique em OK.

Importar tags personalizadas do ASP.NET


Voc pode importar tags personalizadas do ASP.NET para o Dreamweaver. Antes de comear, verifique se a tag personalizada est instalada no servidor de teste definindo na caixa de dilogo Definio de sites (consulte Configurar um servidor de teste na pgina 46). As tags compiladas (arquivos DLL) devem ser colocadas na pasta /bin da raiz do site. As tags no compiladas (arquivos ASCX) podem residir em qualquer diretrio ou subdiretrio virtual no servidor. Para obter mais informaes, consulte a documentao do Microsoft ASP.NET.
1 Abra uma pgina ASP.NET no Dreamweaver. 2 Abra o Editor de bibliotecas de tags (Editar > Bibliotecas de tags).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 345


Trabalho com cdigo de pgina

3 Clique no boto de adio (+), selecione uma das seguintes opes e clique em OK:

Para importar todas as tags personalizadas do ASP.NET do servidor de aplicativo, selecione ASP.NET > Importar
todas as tags personalizadas do ASP.NET.

Para importar apenas determinadas tags personalizadas do servidor de aplicativo, selecione ASP.NET > Importar
todas as tags personalizadas do ASP.NET selecionadas. Mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto clica nas tags da lista.

Importar tags JSP de um arquivo ou servidor (web.xml)


Importe uma biblioteca de tags JSP de vrios tipos de arquivo ou de um servidor JSP para o Dreamweaver.
1 Abra uma pgina JSP no Dreamweaver. 2 Abra o Editor de bibliotecas de tags (Editar > Bibliotecas de tags). 3 Clique no boto de adio (+) e selecione JSP > Importar do arquivo (*.tld, *.jar, *.zip) ou JSP > Importar do

servidor (web.xml.)
4 Clique no boto Procurar ou digite um nome para o arquivo que contm a biblioteca de tags. 5 Digite um URI para identificar a biblioteca de tags.

O URI (Localizador uniforme de recursos) geralmente consiste no URL da organizao que mantm a biblioteca de tags. O URL no usado para visualizar o site da organizao. Ele usado para identificar exclusivamente a biblioteca de tags.
6 (Opcional) Digite o prefixo a ser usado com as tags. Algumas bibliotecas de tags usam um prefixo para identificar

uma tag no cdigo como parte de uma biblioteca de tags especfica.


7 Clique em OK.

Importar tags JRun


Se voc usar o Adobe JRun, poder importar suas tags JRun no Dreamweaver.
1 Abra uma pgina JSP no Dreamweaver. 2 Abra o Editor de bibliotecas de tags (Editar > Bibliotecas de tags). 3 Clique no boto de adio (+) para selecionar JSP > Importar tags do servidor JRun Server da pasta. 4 Digite um nome para a pasta que contm as tags JRun. 5 Digite um URI para identificar a biblioteca de tags.

O URI (Localizador uniforme de recursos) geralmente consiste no URL da organizao que mantm a biblioteca de tags. O URL no usado para visualizar o site da organizao. Ele usado para identificar exclusivamente a biblioteca de tags.
6 (Opcional) Digite o prefixo a ser usado com as tags. Algumas bibliotecas de tags usam um prefixo para identificar

uma tag no cdigo como parte de uma biblioteca de tags especfica.


7 Clique em OK.

ltima atualizao em 28/4/2010

346

Captulo 12: Adio de comportamentos JavaScript


Uso de comportamentos JavaScript
Sobre os comportamentos JavaScript
Os comportamentos do Adobe Dreamweaver CS5 colocam o cdigo JavaScript nos documentos de modo que os visitantes podem alterar uma pgina da Web de vrias maneiras ou iniciar algumas tarefas. Um comportamento uma combinao de um evento e uma ao acionada por esse evento. No painel Comportamentos, adicione um comportamento a uma pgina especificando uma ao e, em seguida, especificando o evento que aciona essa ao. Nota: O cdigo Comportamento um cdigo JavaScript do cliente, isto , um cdigo executado nos navegadores, no nos servidores. Eventos so mensagens geradas com eficincia pelos navegadores que indicam que um visitante da pgina realizou alguma ao. Por exemplo, quando um visitante move o ponteiro sobre um link, o navegador gera um evento onMouseOver para esse link; em seguida, o navegador verifica se necessrio chamar algum cdigo JavaScript (especificado na pgina que est sendo visualizada) em resposta. Eventos diferentes so definidos para diferentes elementos de pgina; por exemplo, na maioria dos navegadores, os eventos onMouseOver e onClick so associados a links, enquanto onLoad um evento associado a imagens e seo body do documento. Uma ao um cdigo JavaScript gravado anteriormente para executar uma tarefa, como abrir a janela de um navegador, mostrar ou ocultar um elemento da API, reproduzir um som ou parar um filme do Adobe Shockwave. As aes fornecidas com o Dreamweaver so compatveis com vrios navegadores. Depois de ser anexado a um elemento da pgina, o comportamento chama a ao (cdigo JavaScript) associada a um evento sempre que esse evento ocorre para o elemento em questo. (Os eventos que podem ser usados para acionar uma determinada ao variam de acordo com o navegador.) Por exemplo, se voc anexar a ao Mensagem pop-up a um link e especificar que essa ao ser acionada pelo evento onMouseOver, sua mensagem aparecer sempre que algum usurio colocar um ponteiro nesse link. Um nico evento pode acionar diversas aes diferentes e voc pode especificar a ordem de ocorrncia dessas aes. O Dreamweaver fornece aproximadamente 24 aes; aes adicionais podem ser encontradas no site do Exchange em www.adobe.com/go/dreamweaver_exchange_br, bem como em sites de desenvolvedores de terceiros. Voc pode gravar suas prprias aes se tiver experincia em JavaScript. Nota: Os termos comportamento e ao so termos do Dreamweaver, no termos HTML. Do ponto de vista do navegador, uma ao como qualquer outra parte do cdigo JavaScript.

Viso geral do painel Comportamentos


Voc pode usar o painel Comportamentos (Janela > Comportamentos) para anexar comportamentos aos elementos da pgina (mais especificamente s tags) e para modificar parmetros de comportamentos anexados anteriormente. Os comportamentos que j foram anexados ao elemento da pgina selecionado atualmente aparecem na lista de comportamentos (rea principal do painel), relacionados em ordem alfabtica por evento. Se diversas aes estiverem listadas para o mesmo evento, elas sero executadas na ordem em que aparecem na lista. Se nenhum comportamento aparecer na lista, isso indica que nenhum comportamento foi anexado ao elemento selecionado atualmente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 347


Adio de comportamentos JavaScript

O painel Comportamentos tem as seguintes opes:


Mostrar eventos definidos Exibe somente os eventos que foram anexados ao documento atual. Os eventos so

organizados em categorias do cliente e do servidor. Os eventos de cada categoria esto em uma lista que pode ser expandida. Mostrar eventos definidos a visualizao padro.
Mostrar todos os eventos Exibe uma lista em ordem alfabtica de todos os eventos de uma determinada categoria. Adicionar comportamento (+) Exibe um menu de aes que podem ser anexadas ao elemento selecionado atualmente. Quando uma ao selecionada nessa lista, uma caixa de dilogo aparece na qual possvel especificar parmetros para a ao. Se todas as aes estiverem esmaecidas, nenhum evento poder ser gerado pelo elemento selecionado. Remover evento () Remove o evento e a ao selecionados da lista de comportamentos. Botes de seta para cima e para baixo Mova a ao selecionada para cima ou para baixo na lista de comportamentos

para um evento especfico. Voc pode alterar a ordem das aes somente para um evento especfico; por exemplo, possvel alterar a ordem em que vrias aes ocorrem para o evento onLoad, mas todas as aes de onLoad permanecem juntas na lista de comportamentos. Os botes de seta esto desativados para aes que no podem ser movidas para cima ou para baixo na lista.
Eventos Exibe um menu pop-up, exibido somente quando um evento selecionado, de todos os eventos que podem

acionar a ao (esse menu aparece quando voc clica no boto de seta ao lado do nome do evento selecionado). Eventos diferentes podem aparecer dependendo do objeto selecionado. Se os eventos esperados no aparecerem, verifique se o elemento de pgina ou tag correto est selecionado. (Para selecionar uma tag especfica, use o seletor de tags no canto inferior esquerdo da janela Documento.) Nota: Os nomes de evento entre parnteses esto disponveis somente para links; a seleo de um desses nomes de evento adiciona automaticamente um link nulo ao elemento de pgina selecionado e anexa o comportamento a esse link e no ao elemento propriamente dito. O link nulo especificado como href="javascript:;" no cdigo HTML.

Sobre eventos
Cada navegador fornece um conjunto de eventos que podem ser associados s aes listadas no menu Aes (+) do painel Comportamento. Quando um visitante de sua pgina da Web interage com a pgina (por exemplo, clicando em uma imagem), o navegador gera eventos; esses eventos podem ser usados para chamar funes JavaScript que executam uma ao. O Dreamweaver fornece muitas aes comuns que podem ser acionadas por esses eventos. Para obter os nomes e as descries dos eventos fornecidos por cada navegador, acesse o Centro de suporte do Dreamweaver em www.adobe.com/go/dreamweaver_support_br. Eventos diferentes podem aparecer no menu Eventos dependendo do objeto selecionado. Para saber quais eventos so suportados por um determinado navegador para um determinado elemento de pgina, insira o elemento de pgina no seu documento e anexe um comportamento a ele; em seguida, observe o menu Eventos no painel Comportamentos. (Por padro, os eventos so da lista de eventos do HTML 4.01 e so suportados pela maioria dos navegadores modernos.) Os eventos podem ser desativados se os objetos relevantes ainda no existirem na pgina ou se o objeto selecionado no puder receber eventos. Se os eventos esperados no aparecerem, voc dever verificar se o objeto correto est selecionado. Se voc estiver anexando um comportamento a uma imagem, alguns eventos (como onMouseOver) aparecero entre parnteses. Esses eventos esto disponveis somente para links. Quando um deles selecionado, o Dreamweaver coloca uma tag <a> antes e depois da imagem para definir um link nulo. O link nulo representado por javascript:; na caixa Link do Inspetor de propriedades. Voc pode alterar o valor do link se desejar transform-lo em um link real para outra pgina, mas se o link do JavaScript for excludo sem ser substitudo por outro link, o comportamento ser removido.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 348


Adio de comportamentos JavaScript

Para ver quais tags podem ser usadas com um determinado evento em um determinado navegador, procure o evento em um dos arquivos da pasta Dreamweaver/Configurao/Comportamentos/Eventos.

Aplicar um comportamento
Voc pode anexar comportamentos ao documento inteiro (isto , tag <body>) ou a links, imagens, elementos de formulrio e diversos outros elementos HTML. O navegador de destino selecionado determina quais eventos so suportados para um determinado elemento. possvel especificar mais de uma ao para cada evento. As aes ocorrem na ordem em que esto listadas na coluna Aes do painel Comportamentos, mas essa ordem pode ser alterada.
1 Selecione um elemento na pgina, como uma imagem ou um link.

Para anexar um comportamento pgina inteira, clique na tag <body> no seletor de tags, no canto inferior esquerdo da janela Documento.
2 Escolha Janela > Comportamentos. 3 Clique no boto de adio (+) e selecione uma ao no menu Adicionar comportamento.

As aes que esto desativadas no menu no podem ser escolhidas. Elas podem estar desativadas porque um objeto necessrio no existe no documento atual. Por exemplo, a ao Controlar Shockwave ou SWF estar desativada se o documento no contiver nenhum arquivo SWF ou Shockwave. Quando uma ao selecionada, uma caixa de dilogo aparece exibindo parmetros e instrues para a ao.
4 Insira os parmetros da ao e clique em OK.

Todas as aes fornecidas no Dreamweaver funcionam em navegadores modernos. Algumas aes no funcionam em navegadores mais antigos, mas no provocaro erros. Nota: Os elementos de destino requerem uma ID exclusiva. Por exemplo, se desejar aplicar o comportamento Trocar imagem em uma imagem, ser necessrio fornecer uma ID. Se voc no especificar uma ID para o elemento, o Dreamweaver especificar uma automaticamente.
5 O evento padro que acionar a ao aparece na coluna Eventos. Se no for o evento desejado, selecione outro no

menu pop-up Eventos. (Para abrir o menu Eventos, selecione um evento ou uma ao no painel Comportamentos e clique na seta para baixo preta que aparece entre o nome do evento e o nome da ao.)

Alterar ou excluir comportamentos


Depois de anexar um comportamento, voc pode alterar o evento que aciona a ao, adicionar ou remover aes e alterar parmetros de aes.
1 Selecione um objeto com um comportamento anexado. 2 Escolha Janela > Comportamentos. 3 Faa as alteraes:

Para editar os parmetros de uma ao, clique duas vezes no nome da ao ou selecione-a e pressione Enter
(Windows) ou Return (Macintosh); em seguida, altere os parmetros na caixa de dilogo e clique em OK.

Para alterar a ordem das aes de um determinado evento, selecione uma ao e clique na seta para cima ou para
baixo. Se preferir, selecione a ao e corte e cole-a no local desejado entre as outras aes.

Para excluir um comportamento, selecione-o e clique no boto de subtrao () ou pressione Excluir.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 349


Adio de comportamentos JavaScript

Atualizar um comportamento
1 Selecione um elemento que apresenta o comportamento anexado a ele. 2 Escolha Janela > Comportamentos e clique duas vezes no comportamento. 3 Faa as alteraes e clique em OK na caixa de dilogo do comportamento.

Todas as ocorrncias desse comportamento na pgina sero atualizadas. Se outras pginas do site tiverem esse comportamento, atualize-as uma por uma.

Baixar e instalar comportamentos de terceiros


Muitas extenses esto disponveis no Exchange para o site do Dreamweaver (www.adobe.com/go/dreamweaver_exchange_br).
1 Escolha Janela > Comportamentos e selecione Obter mais comportamentos no menu Adicionar comportamento.

O navegador primrio se abre e o site do Exchange exibido.


2 Procure os pacotes. 3 Baixe e instale o pacote de extenso desejado.

Para obter mais informaes, consulte Adicionar e gerenciar extenses no Dreamweaver na pgina 35.

Aplicao de comportamentos internos do Dreamweaver


Uso de comportamentos internos
Os comportamentos includos no Dreamweaver foram gravados para funcionar nos navegadores modernos. Os comportamentos no funcionam em navegadores mais antigos. Nota: As aes do Dreamweaver foram gravadas com cuidado para funcionar no mximo de navegadores possvel. Se voc remover o cdigo de uma ao do Dreamweaver manualmente ou substitu-lo por seu prprio cdigo, a compatibilidade com vrios navegadores pode ser afetada. Embora as aes do Dreamweaver tenham sido gravadas para maximizar a compatibilidade com vrios navegadores, alguns navegadores no suportam JavaScript e muitas pessoas que navegam na Internet mantm o JavaScript desativado em seus navegadores. Para obter os melhores resultados em vrias plataformas, fornea interfaces alternativas com a tag <noscript> no incio e no final para que os usurios sem JavaScript possam usar seu site.

Aplicar o comportamento Chamar JavaScript


O comportamento Chamar JavaScript executa uma funo ou linha personalizada do cdigo JavaScript quando ocorre um evento. (Voc pode gravar seu prprio script ou usar o cdigo fornecido livremente pelas diversas bibliotecas JavaScript disponveis na Web.)
1 Selecione um objeto e escolha Chamar JavaScript no menu Adicionar comportamento do painel Comportamentos. 2 Digite o JavaScript exato a ser executado ou digite o nome de uma funo.

Por exemplo, para criar um boto Voltar, voc pode digitar if (history.length > 0){history.back()}. Se voc tiver includo o cdigo em uma funo, digite somente o nome da funo (por exemplo, hGoBack()).
3 Clique em OK e verifique se o evento padro est correto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 350


Adio de comportamentos JavaScript

Aplicar o comportamento Alterar propriedade


Use o comportamento Alterar propriedade para alterar o valor de uma propriedade de um objeto (por exemplo, a cor de fundo de um div ou a ao de um formulrio). Nota: Use esse comportamento somente se voc estiver familiarizado com HTML e JavaScript.
1 Selecione um objeto e escolha Alterar propriedade no menu Adicionar comportamento do painel

Comportamentos.
2 No menu Tipo de elemento, selecione um tipo de elemento para exibir todos os elementos identificados do tipo em

questo.
3 Selecione um elemento no menu ID do elemento. 4 Selecione uma propriedade no menu Propriedade ou insira o nome da propriedade na caixa. 5 Insira o novo valor da nova propriedade no campo Novo valor. 6 Clique em OK e verifique se o evento padro est correto.

Aplicar o comportamento Verificar navegador


Esse comportamento est obsoleto a partir do Dreamweaver CS5.

Aplicar o comportamento Verificar plug-in


Use o comportamento Verificar plug-in para enviar os visitantes para pginas diferentes, dependendo da instalao do plug-in especificado. Por exemplo, voc pode direcionar os visitantes para uma pgina caso eles tenham o Shockwave e para outra pgina caso no tenham. Nota: Voc no pode detectar plug-ins especficos no Internet Explorer usando o JavaScript. No entanto, selecione Flash ou Director para adicionar o cdigo VBScript adequado sua pgina a fim de detectar esses plug-ins no Internet Explorer no Windows. A deteco de plug-ins no pode ser feita no Internet Explorer no Mac OS.
1 Selecione um objeto e escolha Verificar plug-in no menu Adicionar comportamento do painel Comportamentos. 2 Selecione um plug-in no menu Plug-in ou clique em Inserir e digite o nome exato do plug-in na caixa adjacente.

Voc deve usar o nome exato do plug-in conforme especificado em negrito na pgina Sobre plug-ins no Netscape Navigator. (No Windows, selecione o comando Ajuda > Sobre plug-ins do Navigator; no Mac OS, selecione Sobre plug-ins no menu Apple.)
3 Na caixa Se localizado, v para URL, especifique uma URL para os visitantes que tm o plug-in.

Se for um URL remoto, inclua o prefixo http:// no endereo. Se o campo ficar em branco, os visitantes permanecero na mesma pgina.
4 Na caixa Do contrrio, v para URL, especifique um URL alternativo para os visitantes que no tm o plug-in. Se o

campo ficar em branco, os visitantes permanecero na mesma pgina.


5 Especifique o que deve ser feito caso no seja possvel fazer a deteco de plug-ins. Por padro, quando a deteco

no permitida, o visitante enviado para o URL listado na caixa Do contrrio. Para enviar o visitante para o primeiro URL (Se localizado), selecione a opo Sempre ir para o primeiro URL se a deteco no for possvel. Quando selecionada, essa opo supe que o visitante tem o plug-in, a no ser que o navegador indique explicitamente que o plug-in no est presente. Em geral, selecione essa opo se o contedo do plug-in fizer parte de sua pgina; caso contrrio, deixe-a desmarcada. Nota: Essa opo aplica-se somente ao Internet Explorer; o Netscape Navigator sempre pode detectar plug-ins.
6 Clique em OK e verifique se o evento padro est correto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 351


Adio de comportamentos JavaScript

Aplicar o comportamento Controlar Shockwave ou SWF


Esse comportamento est obsoleto a partir do Dreamweaver CS5.

Aplicar o comportamento Arrastar elemento AP


O comportamento Arrastar elemento AP permite que o visitante arraste um elemento absolutamente posicionado (AP). Use esse comportamento para criar quebra-cabeas, controles deslizantes e outros elementos de interface mveis. Voc pode especificar a direo em que o visitante pode arrastar o elemento AP (na horizontal, na vertical ou em qualquer direo), um destino para onde o visitante deve arrastar o elemento AP, se necessrio encaixar o elemento AP no destino caso esteja a um determinado nmero de pixels do destino, o que deve ser feito quando o elemento AP toca no destino e muito mais. Como o comportamento Arrastar elemento AP deve ser chamado antes de o visitante poder arrastar o elemento AP, anexe esse comportamento ao objeto body (com o evento onLoad).
1 Selecione Inserir > Objetos de layout > PA Div ou clique no boto Desenhar PA Div no painel Inserir e desenhe um

PA Div na Visualizao de design da janela Documento.


2 Clique em <body> no seletor de tags no canto inferior esquerdo da janela Documento. 3 Selecione Arrastar elemento PA no menu Adicionar comportamento do painel Comportamentos.

Se a opo Arrastar elemento AP no estiver disponvel, voc provavelmente tem um elemento AP selecionado.
4 No menu pop-up Elemento AP, selecione o elemento AP. 5 Selecione Restrito ou Irrestrito no menu pop-up Movimento.

O movimento irrestrito apropriado para quebra-cabeas e outros jogos de arrastar e soltar. Para controles deslizantes e cenrios mveis, como gavetas de arquivo, cortinas e mini venezianas, selecione o movimento restrito.
6 Para o movimento restrito, insira os valores (em pixels) nas caixas Para cima, Para baixo, Para a esquerda e Para a

direita. Os valores esto relacionados posio inicial do elemento AP. Para restringir o movimento em uma regio retangular, insira valores positivos nas quatro caixas. Para permitir somente o movimento vertical, insira valores positivos em Para cima e Para baixo e 0 em Para a esquerda e Para a direita. Para permitir somente o movimento horizontal, insira valores positivos em Para a esquerda e Para a direita e 0 em Para cima e Para baixo.
7 Insira valores (em pixels) para o destino de liberao nas caixas Para a esquerda e Superior.

O destino de liberao o ponto para o qual o visitante deve arrastar o elemento AP. Um elemento AP atinge o destino de liberao quando suas coordenadas esquerda e superior correspondem aos valores inseridos nas caixas Para a esquerda e Superior. Os valores esto relacionados ao canto superior esquerdo da janela do navegador. Clique em Obter posio atual para preencher automaticamente as caixas de texto com a posio atual do elemento AP.
8 Insira um valor (em pixels) na caixa Encaixar se estiver em para determinar a que distncia o visitante deve estar

do destino de liberao antes de encaixar o elemento AP no destino. Valores maiores facilitam a localizao do destino de liberao.
9 Para quebra-cabeas simples e manipulao de cenrios, voc pode parar aqui. Para definir a ala de arrastamento

do elemento AP, acompanhe o movimento do elemento enquanto est sendo arrastado, acione uma ao quando o elemento AP for solto e clique na aba Avanado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 352


Adio de comportamentos JavaScript

10 Para especificar se o visitante deve clicar em uma rea especfica do elemento AP para arrast-lo, selecione rea

dentro do elemento no menu Ala de arrastamento; em seguida, insira as coordenadas esquerda e superior e a largura e a altura da ala de arrastamento. Essa opo til quando a imagem dentro do elemento AP contm um elemento que sugere o arrastamento, como uma barra de ttulo ou o puxador de uma gaveta. No defina essa opo se desejar que o visitante clique em qualquer lugar no elemento AP para arrast-lo.
11 Selecione todas as opes de Quando estiver arrastando que deseja usar:

Selecione Trazer elemento para frente se for necessrio mover o elemento AP para frente da ordem de
empilhamento enquanto estiver sendo arrastado. Se voc selecionar essa opo, use o menu pop-up para determinar se o elemento AP deve ficar na frente ou ser restaurado para sua posio original na ordem de empilhamento.

Insira o cdigo JavaScript ou o nome de uma funo (por exemplo, monitorAPelement()) na caixa Chamar
JavaScript para executar repetidas vezes o cdigo ou a funo enquanto o elemento AP estiver sendo arrastado. Por exemplo, voc pode gravar uma funo que monitora as coordenadas do elemento AP e exibe dicas como est ficando quente ou est bem longe do destino de liberao em uma caixa de texto.
12 Insira o cdigo JavaScript ou o nome de uma funo (por exemplo, evaluateAPelementPos()) na segunda caixa

Chamar JavaScript para executar o cdigo ou a funo quando o elemento AP for solto. Selecione Somente se encaixado caso seja necessrio executar o JavaScript somente se o elemento AP tiver chegado ao destino de liberao.
13 Clique em OK e verifique se o evento padro est correto.

Coleta de informaes sobre o elemento AP arrastvel


Quando voc anexa o comportamento Arrastar elemento AP a um objeto, o Dreamweaver insere a funo MM_dragLayer() na seo head do documento. (A funo preserva a conveno de nomenclatura antiga dos elementos PA [isto , Camada], de modo que as camadas criadas nas verses anteriores do Dreamweaver ainda podero ser editadas.) Alm de registrar o elemento AP como arrastvel, essa funo define trs propriedades para cada elemento AP arrastvel (MM_LEFTRIGHT, MM_UPDOWN e MM_SNAPPED), que podem ser usadas em suas prprias funes JavaScript para determinar a posio horizontal relativa do elemento AP, a posio vertical relativa do elemento AP e se o elemento AP chegou ao destino de liberao. Nota: As informaes fornecidas aqui destinam-se somente a programadores experientes de JavaScript. Por exemplo, a seguinte funo exibe o valor da propriedade MM_UPDOWN (a posio vertical atual do elemento AP) em um campo de formulrio chamado curPosField. (Os campos de formulrio so teis para exibir informaes atualizadas continuamente porque so dinmicos, isto , voc pode alterar seu contedo depois do carregamento da pgina.)
function getPos(layerId){ var layerRef = document.getElementById(layerId); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; }

Em vez de exibir os valores de MM_UPDOWN ou MM_LEFTRIGHT em um campo de formulrio, voc pode usar esses valores de diversas outras maneiras. Por exemplo, possvel gravar uma funo que exibe uma mensagem no campo de formulrio dependendo da proximidade do valor com relao zona de liberao ou chamar outra funo para mostrar ou ocultar um elemento AP dependendo do valor.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 353


Adio de comportamentos JavaScript

especialmente til para ler a propriedade MM_SNAPPED quando existem vrios elementos PA na pgina e todos devem atingir seus destinos antes que o visitante possa passar para a prxima pgina ou tarefa. Por exemplo, voc pode gravar uma funo para contar quantos elementos PA tm um valor MM_SNAPPED igual a true e cham-la sempre que um elemento PA for solto. Quando a contagem de encaixes atingir o nmero desejado, voc pode direcionar o visitante para a prxima pgina ou exibir uma mensagem de xito.

Aplicar o comportamento Ir para URL


O comportamento Ir para URL abre uma nova pgina na janela atual ou no quadro especificado. Esse comportamento til para alterar o contedo de dois ou mais quadros com um clique.
1 Selecione um objeto e escolha Ir para URL no menu Adicionar comportamento do painel Comportamentos. 2 Selecione um destino para o URL na lista Abrir em.

A lista Abrir em relaciona automaticamente os nomes de todos os quadros do conjunto de molduras atual, bem como da janela principal. Se no houver nenhum quadro, a janela principal ser a nica opo. Nota: Esse comportamento pode produzir resultados inesperados se algum quadro for superior, estiver em branco, for gerado automaticamente ou pai. s vezes, os navegadores trocam incorretamente esses nomes por nomes de destino reservados.
3 Clique em Procurar para selecionar um documento a ser aberto ou insira o caminho e o nome de arquivo do

documento na caixa URL.


4 Repita as etapas 2 e 3 para abrir documentos adicionais em outros quadros. 5 Clique em OK e verifique se o evento padro est correto.

Aplicar o comportamento Menu de salto


Quando voc cria um menu de salto usando o comando Inserir > Formulrio > Menu de salto, o Dreamweaver cria um objeto de menu e anexa o comportamento Menu de salto (ou Menu de salto Ir) a esse objeto. Normalmente, no necessrio anexar o comportamento Menu de salto a um objeto de forma manual. Voc pode editar um menu de salto existente de duas maneiras:

Voc pode editar e reorganizar itens de menu, alterar os arquivos a serem ignorados e alterar a janela em que esses
arquivos devem ser abertos clicando duas vezes em um comportamento Menu de salto existente no painel Comportamentos.

Voc pode editar os itens no menu, assim como faria em qualquer outro menu, selecionando o menu e usando o
boto Listar valores do Inspetor de propriedades.
1 Crie um objeto de menu de salto se ainda no houver um no documento. 2 Selecione o objeto e escolha Menu de salto no menu Adicionar comportamento do painel Comportamentos. 3 Faa as alteraes desejadas na caixa de dilogo Menu de salto e clique em OK.

Mais tpicos da Ajuda


Menus de salto na pgina 280 Inserir ou alterar um menu dinmico de formulrio HTML na pgina 668

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 354


Adio de comportamentos JavaScript

Aplicar o comportamento Menu de salto Ir


O comportamento Menu de salto Ir tem uma relao prxima com o comportamento Menu de salto; nesse caso, um boto Ir associado a um menu de salto. (Antes de usar esse comportamento, um menu de salto j deve existir no documento.) Clique no boto Ir para abrir o link que est selecionado no menu de salto. Um menu de salto normalmente no precisa de um boto Ir; a seleo de um item em um menu de salto, em geral, carrega um URL sem exigir mais nenhuma ao do usurio. No entanto, se o visitante selecionar o mesmo item que j est escolhido no menu de salto, o salto no ocorrer. Em geral, isso no importa, mas se o menu de salto aparecer em um quadro e seus itens estiverem vinculados a pginas de outros quadros, um boto Ir ser til para permitir que os visitantes selecionem novamente um item que j est selecionado no menu de salto. Nota: Ao ser usado com um menu de salto, o boto Ir se transforma no nico mecanismo que salta para levar o usurio ao URL associado seleo do menu. A seleo de um item de menu no menu de salto no redireciona mais o usurio automaticamente para outra pgina ou quadro.
1 Selecione um objeto a ser usado como boto Ir (geralmente, uma imagem de boto) e escolha Menu de salto Ir no

menu Adicionar comportamento do painel Comportamentos.


2 No menu Escolher menu de salto, selecione um menu para o boto Ir a ser ativado e clique em OK.

Aplicar o comportamento Abrir janela do navegador


Use o comportamento Abrir janela do navegador para abrir uma pgina em uma nova janela. Voc pode especificar as propriedades da nova janela, incluindo o tamanho, seus atributos (se pode ser redimensionada, se tem uma barra de menus, etc.) e o nome. Por exemplo, voc pode usar esse comportamento para abrir uma imagem maior em uma janela separada quando o visitante clicar em uma imagem em miniatura; com esse comportamento, a nova janela pode ficar com o tamanho exato da imagem. Se nenhum atributo for especificado, a janela ser aberta no tamanho e com os atributos da janela que acionou sua abertura. A especificao de qualquer atributo para a janela desativa automaticamente todos os outros atributos que no esto explicitamente ativados. Por exemplo, se voc no definir nenhum atributo, a janela pode abrir na resoluo de 1024 x 768 pixels e ter uma barra de navegao (mostrando os botes Voltar, Encaminhar, Incio e Recarregar), a barra de ferramentas do local (mostrando o URL), a barra de status (mostrando mensagens de status na parte inferior) e a barra de menus (mostrando Arquivo, Editar, Visualizar e outros menus). Se voc definir explicitamente a largura como 640 e a altura como 480, e no definir nenhum outro atributo, a janela abrir na resoluo de 640 x 480 pixels, sem barras de ferramentas.
1 Selecione um objeto e escolha Abrir janela do navegador no menu Adicionar comportamento do painel

Comportamentos.
2 Clique em Procurar para selecionar um arquivo ou insira o URL que deseja exibir. 3 Defina as opes para a largura e a altura da janela (em pixels) e para a incorporao de vrias barras de ferramentas,

barras de rolagem, alas de redimensionamento e o aspecto. Nomeie a janela (no use nenhum espao ou caractere especial) se desejar que ela seja o destino dos links ou se desejar control-la com JavaScript.
4 Clique em OK e verifique se o evento padro est correto.

Aplicar o comportamento Tocar som


Esse comportamento est obsoleto a partir do Dreamweaver CS5.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 355


Adio de comportamentos JavaScript

Aplicar o comportamento Mensagem pop-up


O comportamento Mensagem pop-up exibe um alerta JavaScript com a mensagem especificada. Como os alertas JavaScript tm somente um boto (OK), use esse comportamento para fornecer informaes ao usurio em vez de apresentar opes de escolha. Voc pode incorporar qualquer chamada de funo, propriedade, varivel global ou outra expresso JavaScript vlida no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{). Exemplo:
The URL for this page is {window.location}, and today is {new Date()}.

Nota: O navegador controla a aparncia do alerta. Se desejar ter mais controle sobre a aparncia, avalie a possibilidade de usar o comportamento Abrir janela do navegador.
1 Selecione um objeto e escolha Mensagem pop-up no menu Adicionar comportamento do painel Comportamentos. 2 Insira sua mensagem na caixa Mensagem. 3 Clique em OK e verifique se o evento padro est correto.

Aplicar o comportamento Pr-carregar imagens


O comportamento Pr-carregar imagens diminui o tempo de exibio armazenando em cache as imagens que no so mostradas quando a primeira pgina aparece (por exemplo, imagens que sero trocadas com comportamentos ou scripts). Nota: O comportamento Trocar imagem pr-carrega automaticamente todas as imagens realadas quando voc seleciona a opo Pr-carregar imagens na caixa de dilogo Trocar imagem; desse modo, no necessrio adicionar o comportamento Pr-carregar imagens manualmente ao usar a opo Trocar imagem.
1 Selecione um objeto e escolha Pr-carregar imagens no menu Adicionar comportamento do painel

Comportamentos.
2 Clique em Procurar para selecionar um arquivo de imagem ou insira o caminho e o nome de arquivo de uma

imagem na caixa Arquivo de origem de imagem.


3 Clique no boto de adio (+), na parte superior da caixa de dilogo, para adicionar a imagem lista Pr-carregar

imagens.
4 Repita as etapas 2 e 3 para todas as imagens restantes que deseja pr-carregar na pgina atual. 5 Para remover uma imagem da lista Pr-carregar imagens, selecione-a e clique no boto de subtrao (-). 6 Clique em OK e verifique se o evento padro est correto.

Aplicar o comportamento Definir imagem da barra de navegao


Esse comportamento est obsoleto a partir do Dreamweaver CS5.

Aplicar o comportamento Definir texto do quadro


O comportamento Definir texto do quadro permite definir dinamicamente o texto de um quadro, substituindo o contedo e a formatao de um quadro pelo contedo especificado. O contedo pode incluir qualquer cdigo HTML vlido. Use esse comportamento para exibir informaes dinamicamente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 356


Adio de comportamentos JavaScript

Embora o comportamento Definir texto do quadro substitua a formatao de um quadro, voc pode selecionar Preservar cor de fundo para preservar os atributos de cor de fundo da pgina e do texto. Voc pode incorporar qualquer chamada de funo, propriedade, varivel global ou outra expresso JavaScript vlida no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{). Exemplo:
The URL for this page is {window.location}, and today is {new Date()}.

1 Selecione um objeto e escolha Definir texto > Definir texto do quadro no menu Adicionar comportamento do

painel Comportamentos.
2 Na caixa de dilogo Definir texto do quadro, selecione o quadro de destino no menu Quadro. 3 Clique no boto Obter HTML atual para copiar o contedo atual da seo body do quadro de destino. 4 Insira uma mensagem na caixa Novo HTML. 5 Clique em OK e verifique se o evento padro est correto.

Mais tpicos da Ajuda


Criar quadros e conjuntos de quadros na pgina 195

Aplicar o comportamento Definir texto do recipiente


O comportamento Definir texto do recipiente substitui o contedo e a formatao de um recipiente existente (isto , qualquer elemento que possa conter texto ou outros elementos) em uma pgina pelo contedo especificado. O contedo pode incluir qualquer cdigo-fonte HTML vlido. Voc pode incorporar qualquer chamada de funo, propriedade, varivel global ou outra expresso JavaScript vlida no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{). Exemplo:
The URL for this page is {window.location}, and today is {new Date()}.

1 Selecione um objeto e, em seguida, Definir texto > Definir texto do continer no menu Adicionar comportamento

do painel Comportamentos.
2 Na caixa de dilogo Definir texto do recipiente, use o menu Recipiente para selecionar o elemento de destino. 3 Insira o novo texto ou HTML na caixa Novo HTML. 4 Clique em OK e verifique se o evento padro est correto.

Mais tpicos da Ajuda


Inserir uma div PA na pgina 161

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 357


Adio de comportamentos JavaScript

Aplicar o comportamento Definir texto da barra de status


O comportamento Definir texto da barra de status mostra uma mensagem na barra de status no canto inferior esquerdo da janela do navegador. Por exemplo, voc pode usar esse comportamento para descrever o destino de um link na barra de status em vez de mostrar o URL associado. Os visitantes geralmente ignoram ou desconsideram as mensagens da barra de status (nem todos os navegadores do suporte completo definio do texto da barra de status); se sua mensagem for importante, avalie a possibilidade de exibi-la como uma mensagem pop-up ou como o texto de um elemento AP. Nota: Se voc usar o comportamento Definir texto da barra de status no Dreamweaver, o texto da barra de status do navegador no ser alterado necessariamente porque alguns navegadores precisam de ajustes especiais ao alterar o texto da barra de status. O Firefox, por exemplo, requer a alterao de uma opo avanada que permite ao JavaScript alterar o texto da barra de status. Para obter mais informaes, consulte a documentao do navegador. Voc pode incorporar qualquer chamada de funo, propriedade, varivel global ou outra expresso JavaScript vlida no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{). Exemplo:
The URL for this page is {window.location}, and today is {new Date()}.

1 Selecione um objeto e escolha Definir texto > Definir texto da barra de status no menu Adicionar comportamento

do painel Comportamentos.
2 Na caixa de dilogo Definir texto da barra de status, digite sua mensagem na caixa Mensagem.

Seja objetivo. O navegador trunca a mensagem se ela no cabe na barra de status.


3 Clique em OK e verifique se o evento padro est correto.

Aplicar o comportamento Definir texto do campo de texto


O comportamento Definir texto do campo de texto substitui o contedo do campo de texto de um formulrio pelo contedo especificado. Voc pode incorporar qualquer chamada de funo, propriedade, varivel global ou outra expresso JavaScript vlida no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{). Exemplo:
The URL for this page is {window.location}, and today is {new Date()}.

Criar um campo de texto nomeado


1 Selecione Inserir > Formulrio > Campo de texto.

Se o Dreamweaver solicitar a adio de uma tag de formulrio, clique em Sim.


2 No Inspetor de propriedades, digite um nome para o campo de texto. Verifique se o nome exclusivo na pgina

(no use o mesmo nome para vrios elementos da mesma pgina, mesmo se estiverem em formulrios diferentes).

Aplicar Definir texto do campo de texto


1 Selecione um campo de texto e escolha Definir texto > Definir texto do campo no menu Adicionar comportamento

do painel Comportamentos.
2 Selecione o campo de texto de destino no menu Campo de texto e insira o novo texto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 358


Adio de comportamentos JavaScript

3 Clique em OK e verifique se o evento padro est correto.

Aplicar o comportamento Mostrar/ocultar elementos


O comportamento Mostrar/ocultar elementos mostra, oculta ou restaura a visibilidade padro de um ou mais elementos de pgina. Esse comportamento til para exibir informaes medida que o usurio interage com a pgina. Por exemplo, conforme o usurio move o ponteiro pela imagem de uma planta, voc pode mostrar um elemento de pgina fornecendo detalhes sobre a poca de crescimento e a regio da planta, a quantidade de sol necessria, quanto a planta crescer e assim por diante. O comportamento mostra ou oculta somente o elemento relevante; na verdade, ele no remove o elemento do fluxo da pgina quando est oculto.
1 Selecione um objeto e selecione Mostrar/ocultar elementos no menu Adicionar comportamento do painel

Comportamentos. Se a opo Mostrar/ocultar elementos no estiver disponvel, voc provavelmente tem um elemento PA selecionado. Como os elementos PA no aceitam eventos nos navegadores 4.0, selecione um objeto diferente, como a tag <body> ou uma tag link (<a>).
2 Na lista Elementos, selecione o elemento que deseja mostrar ou ocultar e clique em Mostrar, Ocultar ou Restaurar

(para restaurar a visibilidade padro).


3 Repita a etapa 2 para todos os demais elementos cuja visibilidade deseja alterar. (Voc pode alterar a visibilidade de

vrios elementos com um nico comportamento.)


4 Clique em OK e verifique se o evento padro est correto.

Aplicar o comportamento Mostrar menu pop-up


Esse comportamento est obsoleto a partir do Dreamweaver CS5.

Adicionar, remover e reorganizar itens de menu pop-up


Esse comportamento est obsoleto a partir do Dreamweaver CS5.

Formatar um menu pop-up


Esse comportamento est obsoleto a partir do Dreamweaver CS5.

Posicionar um menu pop-up em um documento


Esse comportamento est obsoleto a partir do Dreamweaver CS5.

Modificar um menu pop-up


Esse comportamento est obsoleto a partir do Dreamweaver CS5.

Aplicar o comportamento Trocar imagem


O comportamento Trocar imagem troca uma imagem por outra alterando o atributo src da tag <img>. Use esse comportamento para criar sobreposies de boto ou outros efeitos de imagem (incluindo a troca de mais de uma imagem ao mesmo tempo). A insero de uma imagem de sobreposio adiciona automaticamente o comportamento Trocar imagem sua pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 359


Adio de comportamentos JavaScript

Nota: Como somente o atributo src afetado por esse comportamento, voc deve trocar uma imagem que tenha as mesmas dimenses (altura e largura) da original. Caso contrrio, a imagem trocada reduzida ou ampliada para ficar com as dimenses da imagem original. Existe tambm o comportamento Restaurar imagem trocada, que restaura o ltimo conjunto de imagens trocadas para os arquivos de origem anteriores. Esse comportamento adicionado automaticamente sempre que o comportamento Trocar imagem anexado a um objeto; se a opo Restaurar ficar selecionada durante a adio de Trocar imagem, nunca selecione o comportamento Restaurar imagem trocada manualmente.
1 Selecione Inserir > Imagem ou clique no boto Imagem, no painel Inserir, para inserir uma imagem. 2 No Inspetor de propriedades, insira um nome para a imagem na caixa de texto esquerda.

No necessrio nomear imagens; elas so nomeadas automaticamente quando voc anexa o comportamento a um objeto. No entanto, mais fcil diferenciar imagens na caixa de dilogo Trocar imagem nomeando todas as imagens com antecedncia.
3 Repita as etapas 1 e 2 para inserir imagens adicionais. 4 Selecione um objeto (geralmente, a imagem que ser trocada) e escolha Trocar imagem no menu Adicionar

comportamento do painel Comportamentos.


5 Na lista Imagens, selecione a imagem cuja origem deseja alterar. 6 Clique em Procurar para selecionar o novo arquivo de imagem ou insira o caminho e o nome de arquivo da nova

imagem na caixa Definir origem como.


7 Repita as etapas 5 e 6 para qualquer imagem adicional que deseja alterar. Use a mesma ao Trocar imagem para

todas as imagens que deseja alterar de uma vez; caso contrrio, a ao Restaurar imagem trocada correspondente no restaurar todas as imagens.
8 Selecione a opo Pr-carregar imagens para armazenar em cache as novas imagens quando a pgina for carregada.

Isso evita atrasos de download quando as imagens precisarem aparecer.


9 Clique em OK e verifique se o evento padro est correto.

Aplicar o comportamento Validar formulrio


O comportamento Validar formulrio verifica o contedo dos campos de texto especificados para assegurar que o usurio inseriu o tipo de dados correto. Anexe esse comportamento a campos de texto individuais com o evento onBlur para validar os campos medida que o usurio preenche o formulrio ou anexe-o ao formulrio com o evento onSubmit para avaliar vrios campos de texto ao mesmo tempo quando o usurio clicar no boto Enviar. Anexar esse comportamento a um formulrio impede o envio de formulrios com dados invlidos.
1 Selecione Inserir > Formulrio ou clique no boto Formulrio, no painel Inserir, para inserir um formulrio. 2 Selecione Inserir > Formulrio > Campo de texto ou clique no boto Campo de texto no painel Inserir para inserir

um campo de texto. Repita essa etapa para inserir campos de texto adicionais.
3 Escolha um mtodo de validao:

Para validar campos individuais medida que o usurio preenche o formulrio, selecione um campo de texto e
selecione Janela > Comportamentos.

Para validar vrios campos quando o usurio envia o formulrio, clique na tag <form> no seletor de tags, no canto
inferior esquerdo da janela Documento, e escolha Janela > Comportamentos.
4 Selecione Validar formulrio no menu Adicionar comportamento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 360


Adio de comportamentos JavaScript

5 Siga um destes procedimentos:

Se estiver validando campos individuais, selecione o mesmo campo selecionado na janela Documento na lista
Campos.

Se estiver validando vrios campos, selecione um campo de texto na lista Campos.


6 Selecione a opo Obrigatrio caso seja necessrio inserir alguns dados no campo. 7 Selecione uma das seguintes opes de Aceitar:
Usar Tudo Verifica se um campo obrigatrio contm dados; os dados podem ser de qualquer tipo. Usar Endereo de e-mail Verifica se o campo contm um smbolo @. Usar Nmero Verifica se o campo contm somente nmeros. Usar Nmero de Verifica se o campo contm um nmero de um intervalo especfico.

8 Se voc tiver optado por validar vrios campos, repita as etapas 6 e 7 para todos os campos adicionais que desejar

validar.
9 Clique em OK.

Se voc estiver validando vrios campos quando o usurio enviar o relatrio, o evento onSubmit aparecer automaticamente no menu Eventos.
10 Se voc estiver validando campos individuais, verifique se o evento padro onBlur ou onChange. Caso contrrio,

selecione um desses eventos. Os dois eventos acionam o comportamento Validar formulrio quando o usurio sai do campo. A diferena que onBlur ocorre independentemente de o usurio ter inserido algum dado no campo e onChange ocorre somente se o usurio tiver alterado o contedo do campo. O evento onBlur recomendado para campos obrigatrios.

ltima atualizao em 28/4/2010

361

Captulo 13: Trabalho com outros aplicativos


Integrao com vrios aplicativos
Sobre a integrao com Photoshop, Flash e Fireworks
Photoshop, Fireworks e Flash so ferramentas avanadas de desenvolvimento da Web para criao e gerenciamento de arquivos grficos e SWF. Voc pode integrar o Dreamweaver nessas ferramentas para simplificar seu fluxo de trabalho de design da Web. Nota: H tambm um integrao limitada com alguns outros aplicativos. Por exemplo, possvel exportar um arquivo do InDesign como XHTML e continuar trabalhando com ele no Dreamweaver. Para assistir a um tutorial sobre esse fluxo de trabalho, consulte www.adobe.com/go/vid0202_br. Voc pode inserir facilmente imagens e contedo criados com o Adobe Flash (arquivos SWF e FLV) em um documento do Dreamweaver. Voc tambm pode editar uma imagem ou arquivo SWF no editor original depois de inseri-los em um documento do Dreamweaver. Nota: Para usar o Dreamweaver junto com esses aplicativos da Adobe, necessrio instalar esses aplicativos no seu computador. Para Fireworks e Flash, a integrao entre produtos obtida atravs de edio completa. A edio completa assegura que as atualizaes de cdigo sejam transferidas corretamente entre o Dreamweaver e esses outros aplicativos (por exemplo, para preservar os comportamentos de sobreposio ou os links para outros arquivos). O Dreamweaver tambm se baseia no Design Notes para integrao entre produtos. Design Notes so pequenos arquivos que permitem que o Dreamweaver localize o documento de origem de uma imagem ou de um arquivo SWF exportados. Ao exportar arquivos do Fireworks, do Flash ou do Photoshop diretamente para um site definido do Dreamweaver, as Design Notes que contm referncias ao arquivo de criao PSD, PNG ou do Flash (FLA) original so exportadas automaticamente para o site junto com o arquivo habilitado para a Web (GIF, JPEG, PNG ou SWF). Alm das informaes sobre o local, as Design Notes contm outras informaes pertinentes sobre os arquivos exportados. Por exemplo, ao exportar uma tabela do Fireworks, o Fireworks grava uma Design Note para cada arquivo de imagem exportado da tabela. Se o arquivo exportado tiver pontos ativos ou sobreposies, as Design Notes incluiro informaes sobre seus scripts. Como parte da operao de exportao, o Dreamweaver cria a pasta named _notes na mesma pasta do ativo exportado. Essa pasta contm as Design Notes que o Dreamweaver precisa para ser integrado no Photoshop, no Flash ou no Fireworks. Nota: Para usar as Design Notes, verifique se elas no esto desativadas para o site do Dreamweaver. Elas esto ativadas por padro. No entanto, mesmo se estiverem desativadas, quando um arquivo de imagem do Photoshop for inserido, o Dreamweaver criar uma Design Note para armazenar o local do arquivo PSD de origem. Para assistir a um tutorial sobre a integrao do Dreamweaver e do Fireworks, consulte www.adobe.com/go/vid0188_br. Para assistir a um tutorial sobre a integrao do Dreamweaver e do Photoshop, consulte www.adobe.com/go/lrvid4043_dw_br.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 362


Trabalho com outros aplicativos

Mais tpicos da Ajuda


Sobre as Design Notes na pgina 103 Ativar e desativar as Design Notes para um site na pgina 104 Tutorial do Dreamweaver e do InDesign

Trabalho com o Fireworks e Dreamweaver


Inserir uma imagem do Fireworks
O Dreamweaver e o Fireworks reconhecem e compartilham muitos dos mesmos procedimentos de edio de arquivos, incluindo alteraes em links, mapas de imagem, fatias de tabela e muito mais. Juntos, esses dois aplicativos fornecem um fluxo de trabalho dinamizado para edio, otimizao e colocao de arquivos grficos em pginas HTML da Web. Voc pode colocar um grfico exportado do Fireworks diretamente em um documento do Dreamweaver usando o comando Inserir imagem ou criar um novo grfico do Fireworks a partir de um alocador de espao de imagem do Dreamweaver.
1 No documento do Dreamweaver, coloque o ponto de insero onde deseja que a imagem seja exibida e siga um

destes procedimentos:

Selecione Inserir > Imagem. Na categoria Comum do painel Inserir, clique no boto Imagem ou arraste-o at o documento.
2 Navegue at o arquivo exportado desejado do Fireworks e clique em OK (Windows) ou em Abrir (Macintosh).

Nota: Se o arquivo do Fireworks no estiver no site atual do Dreamweaver, uma mensagem ser exibida perguntando se voc deseja copiar o arquivo na pasta raiz. Clique em Sim.

Mais tpicos da Ajuda


Sobre a integrao com Photoshop, Flash e Fireworks na pgina 361

Editar uma imagem ou tabela do Fireworks a partir do Dreamweaver


Ao abrir e editar uma imagem ou uma fatia da imagem que faz parte de uma tabela do Fireworks, o Dreamweaver inicia o Fireworks, que abre o arquivo PNG a partir do qual a imagem ou a tabela foi exportada. Nota: Esse processo presume que o Fireworks tenha sido definido como o principal editor de imagens externas para arquivos PNG. Normalmente, o Fireworks tambm definido como o editor padro de arquivos JPEG e GIF, embora o Photoshop possa ser definido como o editor padro desses tipos de arquivo. Quando a imagem faz parte de uma tabela do Fireworks, voc pode abrir a tabela inteira do Fireworks para edio contanto que o comentrio <!--fw table--> exista no cdigo HTML. Se o arquivo PNG de origem tiver sido exportado a partir do Fireworks para um site do Dreamweaver com a configurao Estilo HTML e imagens do Dreamweaver, o comentrio da tabela do Fireworks ser automaticamente inserido no cdigo HTML.
1 No Dreamweaver, abra o Inspetor de propriedades (Janela > Propriedades) se ainda no estiver aberto. 2 Clique na imagem ou na fatia da imagem para selecion-la.

Ao selecionar uma imagem que foi exportada a partir do Fireworks, o Inspetor de propriedades identifica a seleo como uma imagem ou tabela do Fireworks e exibe o nome do arquivo PNG de origem.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 363


Trabalho com outros aplicativos

3 Para iniciar o Fireworks para edio, siga um destes procedimentos:

No Inspetor de propriedades, clique em Editar. Mantenha pressionada a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes na imagem
selecionada.

Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na imagem
selecionada e escolha Editar com Fireworks no menu de contexto. Nota: Se o Fireworks no conseguir localizar o arquivo de origem, voc dever localizar o arquivo PNG de origem. Ao trabalhar com o arquivo de origem do Fireworks, as alteraes so salvas tanto no arquivo de origem quanto no arquivo exportado; caso contrrio, somente o arquivo exportado ser atualizado.
4 No Fireworks, edite o arquivo PNG de origem e clique em Concludo.

O Fireworks salva as alteraes no arquivo PNG, exporta a imagem atualizada (ou o HTML e as imagens) e volta ao Dreamweaver. No Dreamweaver, a imagem ou tabela atualizada exibida. Para assistir a um tutorial sobre a integrao do Dreamweaver e do Fireworks, consulte www.adobe.com/go/vid0188_br.

Mais tpicos da Ajuda


Usar um editor de imagens externas na pgina 244 Tutorial do Dreamweaver e do Fireworks

Otimizar uma imagem do Fireworks a partir do Dreamweaver


Voc pode usar o Dreamweaver para fazer rpidas alteraes nas imagens e animaes do Fireworks. No Dreamweaver, voc pode alterar configuraes de otimizao, configuraes de animao e o tamanho e a rea da imagem exportada.
1 No Dreamweaver, selecione a imagem desejada e siga um destes procedimentos:

Selecione Comando > Otimizar imagem Clique no boto Editar configuraes de imagem no Inspetor de propriedades.
2 Faa suas edies na caixa de dilogo Visualizao da imagem:

Para editar as configuraes de otimizao, clique na aba Opes. Para editar o tamanho e a rea da imagem exportada, clique na aba Arquivo.
3 Ao terminar, clique em OK.

Mais tpicos da Ajuda


Configurao das opes da caixa de dilogo Visualizao da imagem na pgina 374

Usar o Fireworks para modificar os alocadores de espao de imagem do Dreamweaver


Voc pode criar um alocador de espao de imagem em um documento do Dreamweaver e, em seguida, iniciar o Fireworks para projetar uma imagem grfica ou uma tabela do Fireworks para substitu-lo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 364


Trabalho com outros aplicativos

Para criar uma nova imagem de um alocador de espao, necessrio instalar o Dreamweaver e o Fireworks no seu sistema.
1 Verifique se o Fireworks j est definido como o editor de imagens para arquivos PNG. 2 Na janela Documento, clique no alocador de espao de imagem para selecion-lo. 3 Inicie o Fireworks no modo Edio a partir do Dreamweaver seguindo um destes procedimentos:

No Inspetor de propriedades, clique em Criar. Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no alocador de espao de
imagem.

Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no alocador de
espao de imagem e, em seguida, selecione Criar imagem no Fireworks.
4 Use as opes do Fireworks para criar a imagem.

O Fireworks reconhece as seguintes configuraes de alocador de espao de imagem, que podem ser definidas enquanto voc trabalha com o alocador no Dreamweaver: tamanho da imagem (relacionado ao tamanho de tela de desenho do Fireworks), ID da imagem (usada pelo Fireworks como o nome de documento padro para o arquivo de origem e o arquivo de exportao criados) e o alinhamento do texto. O Fireworks tambm reconhece links e algumas sobreposies (como imagem trocada, menu pop-up e texto) que voc anexou ao alocador de espao de imagem ao trabalhar no Dreamweaver. Nota: Embora o Fireworks no mostre os links adicionados a um alocador de espao de imagem, eles so preservados. Se voc desenhar um ponto ativo e adicionar um link no Fireworks, o link adicionado ao alocador de imagem no Dreamweaver no ser excludo; no entanto, se uma fatia da nova imagem for cortada no Fireworks, o link no documento do Dreamweaver ser excludo quando o alocador de espao de imagem for substitudo. O Fireworks no reconhece as seguintes configuraes de alocador de espao de imagem: alinhamento da imagem, cor, Vspace e Hspace e mapas. Essas configuraes esto desativadas no Inspetor de propriedades do alocador de espao de imagem.
5 Quando terminar, clique em Concludo para exibir a solicitao para salvar. 6 Na caixa de texto Salvar em, selecione a pasta definida como a pasta do site local do Dreamweaver.

Se o alocador de espao de imagem tiver sido nomeado quando foi inserido no documento do Dreamweaver, o Fireworks preencher a caixa Nome do arquivo com esse nome. Voc pode alterar o nome.
7 Clique em Salvar para salvar o arquivo PNG.

A caixa de dilogo Exportar exibida. Use essa caixa de dilogo para exportar a imagem como um arquivo GIF ou JPEG ou, no caso de imagens segmentadas, como HTML e imagens.
8 Em Salvar em, selecione a pasta do site local do Dreamweaver.

A caixa Nome exibida automaticamente com o nome usado para o arquivo PNG. Voc pode alterar o nome.
9 Em Salvar como tipo, selecione o tipo do arquivo que deseja exportar; por exemplo, Apenas imagens ou HTML e

imagens.
10 Clique em Salvar para salvar o arquivo exportado.

O arquivo salvo e o foco volta para o Dreamweaver. No documento do Dreamweaver, o arquivo exportado ou a tabela do Fireworks substitui o alocador de espao de imagem.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 365


Trabalho com outros aplicativos

Mais tpicos da Ajuda


Usar um editor de imagens externas na pgina 244 Inserir uma imagem na pgina 234

Sobre os menus pop-up do Fireworks


O Fireworks permite criar de modo rpido e fcil menus pop-up baseados em CSS. Alm de serem extensveis e rpidos de baixar, os menus pop-up criados com o Fireworks oferecem as seguintes vantagens:

Os itens de menu podem ser indexados por mecanismos de pesquisa. Os itens de menu podem ser lidos por leitores de tela, deixando as pginas mais acessveis. O cdigo gerado pelo Fireworks est em conformidade com os padres e pode ser validado.
Voc pode editar os menus pop-up do Fireworks com o Dreamweaver ou o Fireworks, mas no com ambos. As alteraes feitas no Dreamweaver no so preservadas no Fireworks.

Mais tpicos da Ajuda


Editar os menus pop-up do Fireworks no Dreamweaver na pgina 365

Editar os menus pop-up do Fireworks no Dreamweaver


Voc pode criar um menu pop-up no Fireworks 8 ou posterior e, em seguida, edit-lo com o Dreamweaver ou o Fireworks (usando a edio completa), mas no com ambos. Se voc editar os menus no Dreamweaver e, em seguida, edit-los no Fireworks, todas as edies anteriores, exceto a do contedo do texto, sero perdidas. Se preferir editar os menus com o Dreamweaver, use o Fireworks para criar o menu pop-up e use o Dreamweaver exclusivamente para editar e personalizar o menu. Se preferir editar os menus no Fireworks, use o recurso de edio completa no Dreamweaver, mas no edite os menus diretamente no Dreamweaver.
1 No Dreamweaver, selecione a tabela do Fireworks que contm o menu pop-up e, em seguida, clique em Editar no

Inspetor de propriedades. O arquivo PNG de origem aberto no Fireworks.


2 No Fireworks, edite o menu com o Editor de menu pop-up e clique em Concludo na barra de ferramentas do

Fireworks. O Fireworks envia o menu pop-up editado novamente para o Dreamweaver. Se voc tiver criado um menu pop-up no Fireworks MX 2004 ou anterior, poder edit-lo no Dreamweaver usando a caixa de dilogo Mostrar menu pop-up, disponvel no painel Comportamentos.

Mais tpicos da Ajuda


Sobre os menus pop-up do Fireworks na pgina 365

Editar um menu pop-up criado no Fireworks MX 2004 ou anterior


1 No Dreamweaver, selecione o ponto ativo ou a imagem que aciona o menu pop-up. 2 No painel Comportamentos (Shift + F3), clique duas vezes em Mostrar menu pop-up na lista Aes.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 366


Trabalho com outros aplicativos

3 Faa as alteraes na caixa de dilogo Menu pop-up e clique em OK.

Mais tpicos da Ajuda


Aplicar o comportamento Mostrar menu pop-up na pgina 358

Especificar as preferncias de incio e edio dos arquivos de origem do Fireworks


Ao usar o Fireworks para editar imagens, as imagens de suas pginas da Web normalmente so exportadas pelo Fireworks a partir de um arquivo PNG de origem. Ao abrir um arquivo de imagem no Dreamweaver para edit-lo, o Fireworks abre automaticamente o arquivo PNG de origem, solicitando sua localizao caso no o encontre. Se preferir, voc pode definir preferncias no Fireworks para que o Dreamweaver abra a imagem inserida, que o Fireworks permita o uso do arquivo de imagem inserido ou o arquivo de origem do Fireworks sempre que uma imagem for aberta no Dreamweaver. Nota: O Dreamweaver reconhece as preferncias de incio e edio do Fireworks somente em alguns casos. Especificamente, voc deve abrir e otimizar uma imagem que no faa parte de uma tabela do Fireworks e contenha um caminho correto de Design Notes at um arquivo PNG de origem.
1 No Fireworks, selecione Editar > Preferncias (Windows) ou Fireworks > Preferncias (Macintosh) e clique na aba

Iniciar e editar (Windows) ou selecione Iniciar e editar no menu pop-up (Macintosh).


2 Especifique as opes de preferncia a serem usadas ao editar ou otimizar as imagens do Fireworks colocadas em

um aplicativo externo:
Sempre usar o PNG de origem Abra automaticamente o arquivo PNG do Fireworks definido na Design Note como a

origem da imagem colocada. As atualizaes so feitas no arquivo PNG de origem e na imagem colocada correspondente.
Nunca usar o PNG de origem Abra automaticamente a imagem colocada do Fireworks, independentemente da

existncia de um arquivo PNG de origem. As atualizaes so feitas somente na imagem colocada.


Perguntar ao iniciar Uma mensagem exibida perguntando se o arquivo PNG de origem deve ser aberto. Voc

tambm pode especificar preferncias globais de incio e edio nessa mensagem.

Inserir cdigo HTML do Fireworks em um documento do Dreamweaver


No Fireworks, voc pode usar o comando Exportar para exportar e salvar arquivos otimizados de imagem e HTML em um local dentro de uma pasta do site do Dreamweaver. Voc pode inserir o arquivo no Dreamweaver. O Dreamweaver permite inserir o cdigo HTML gerado pelo Fireworks, completo com as imagens associadas, as fatias e JavaScript, em um documento.
1 No documento do Dreamweaver, coloque o ponto de insero onde voc deseja inserir o cdigo HTML do

Fireworks.
2 Siga um destes procedimentos:

Selecione Inserir > Objetos de imagem > HTML do Fireworks. Na categoria Comum do painel Inserir, clique no boto Imagens e escolha Inserir HTML do Fireworks no menu
pop-up.
3 Clique em Procurar para selecionar um arquivo HTML do Fireworks. 4 Se no for necessrio usar mais o arquivo, selecione Excluir arquivo aps insero. A seleo dessa opo no afeta

o arquivo PNG de origem associado ao arquivo HTML.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 367


Trabalho com outros aplicativos

Nota: Se o arquivo HTML estiver em uma unidade de rede, ele ser excludo permanentemente, no ser movido para a Lixeira.
5 Clique em OK para inserir o cdigo HTML, junto com as imagens associadas, as fatias e JavaScript, no documento

do Dreamweaver.

Colar o cdigo HTML do Fireworks no Dreamweaver


Uma maneira rpida de colocar as imagens e as tabelas geradas pelo Fireworks no Dreamweaver copiar e colar o cdigo HTML do Fireworks diretamente em um documento do Dreamweaver.

Copiar e colar o cdigo HTML do Fireworks no Dreamweaver


1 No Fireworks, selecione Editar > Copiar cdigo HTML. 2 Siga o assistente que o orientar para escolher as configuraes de exportao do HTML e das imagens. Quando

solicitado, especifique a pasta do site do Dreamweaver como destino das imagens exportadas. O assistente exporta as imagens para o destino especificado e copia o cdigo HTML na rea de transferncia.
3 No documento do Dreamweaver, coloque o ponto de insero onde voc deseja colar o cdigo HTML e selecione

Editar > Colar HTML do Fireworks. Todo o cdigo HTML e JavaScript associado aos arquivos de Fireworks exportados copiado no documento do Dreamweaver e todos os links de imagens so atualizados.

Exportar e colar o cdigo HTML do Fireworks no Dreamweaver


1 No Fireworks, selecione Arquivo > Exportar. 2 Especifique a pasta do site do Dreamweaver como destino das imagens exportadas. 3 No menu pop-up Exportar, selecione HTML e imagens. 4 No menu pop-up HTML, selecione Copiar para rea de transferncia e, em seguida, clique em Exportar. 5 No documento do Dreamweaver, coloque o ponto de insero onde voc deseja colar o cdigo HTML exportado e

selecione Editar > Colar HTML do Fireworks. Todo o cdigo HTML e JavaScript associado aos arquivos de Fireworks exportados copiado no documento do Dreamweaver e todos os links de imagens so atualizados.

Atualizar o cdigo HTML do Fireworks colocado no Dreamweaver


No Fireworks, o comando Arquivo > Atualizar HTML fornece uma alternativa tcnica de incio e edio de atualizao dos arquivos do Fireworks colocados no Dreamweaver. Com o recurso Atualizar HTML, possvel editar uma imagem PNG de origem no Fireworks e atualizar automaticamente o cdigo HTML exportado e os arquivos de imagem colocados em um documento do Dreamweaver. Esse comando permite atualizar os arquivos do Dreamweaver mesmo quando o Dreamweaver no est em execuo.
1 No Fireworks, abra o arquivo PNG de origem e faa suas edies. 2 Selecione Arquivo > Salvar. 3 No Fireworks, selecione Arquivo > Atualizar HTML. 4 Navegue at o arquivo do Dreamweaver que contm o HTML que deseja atualizar e clique em Abrir. 5 Navegue at a pasta de destino onde deseja colocar os arquivos de imagem atualizados e clique em Selecionar

(Windows) ou Escolher (Macintosh).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 368


Trabalho com outros aplicativos

O Fireworks atualiza o cdigo HTML e JavaScript no documento do Dreamweaver. O Fireworks tambm exporta as imagens atualizadas associadas ao HTML e coloca essas imagens na pasta de destino especificada. Se o Fireworks no conseguir encontrar o cdigo HTML correspondente a ser atualizado, voc poder inserir o novo cdigo HTML no documento do Dreamweaver. O Fireworks coloca a seo JavaScript do novo cdigo no comeo do documento e coloca a tabela ou link HTML da imagem no final.

Criar um lbum de fotos na Web


O recurso Criar lbum de fotografias na Web est obsoleto no DreamWeaver CS5.

Trabalho com o Photoshop e Dreamweaver


Sobre a integrao do Photoshop
Voc pode inserir arquivos de imagem do Photoshop (formato PSD) em pginas da Web no Dreamweaver e permitir que o Dreamweaver otimize-as como imagens habilitadas para a Web (formatos GIF, JPEG e PNG). Ao executar essa ao, o Dreamweaver insere a imagem como um objeto inteligente e mantm uma conexo ativa com o arquivo PSD original. Tambm possvel colar toda ou parte de uma imagem do Photoshop de vrias camadas ou fatias em uma pgina da Web no Dreamweaver. Entretanto, quando voc copia e cola do Photoshop, a conexo ativa com o arquivo original no mantida. Para atualizar a imagem, faa as alteraes no Photoshop e copie e cole novamente. Nota: Se esse recurso de integrao for usado com freqncia, voc poder armazenar seus arquivos do Photoshop no site do Dreamweaver para facilitar o acesso. Nesse caso, certifique-se de que as imagens estejam encobertas para evitar a exposio dos ativos originais, assim como as transferncias desnecessrias entre o site local e o servidor remoto. Para assistir a um tutorial sobre o fluxo de trabalho de objetos inteligentes no Photoshop e no Dreamweaver, consulte www.adobe.com/go/lrvid4043_dw_br.

Sobre os fluxos de trabalho do Photoshop-Dreamweaver e Objetos Inteligentes


H dois principais fluxos de trabalho para trabalhar com os arquivos do Photoshop no Dreamweaver: o fluxo de trabalho copiar/colar e o fluxo de trabalho do Objetos Inteligentes. Fluxo de trabalho copiar/colar O fluxo de trabalho copiar/colar permite que voc selecione fatias ou camadas em um arquivo do Photoshop e, ento, use o Dreamweaver para inseri-las como imagens prontas para a Web. Se quiser atualizar o contedo posteriormente, entretanto, voc dever abrir o arquivo Photoshop original, executar suas alteraes, copiar sua fatia ou camada para a rea de Transferncia novamente e, ento, colar a fatia ou a camada atualizada no Dreamweaver. Esse fluxo de trabalho s recomendado quando voc deseja inserir parte de um arquivo do Photoshop (por exemplo, uma seo de um componente de design) como uma imagem em uma pgina da Web. Fluxo de trabalho Objetos Inteligentes Ao trabalhar com os arquivos do Photoshop completos, a Adobe recomenda o fluxo de trabalho de Objetos Inteligentes. Um objeto inteligente no Dreamweaver uma imagem colocada em um pgina da Web que tenha uma conexo instantnea com um arquivo original do Photoshop (PSD). Na Visualizao de design do Dreamweaver, um Objeto Inteligente indicado por um cone no canto superior esquerdo da imagem.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 369


Trabalho com outros aplicativos

Objeto inteligente

Quando a imagem da Web (ou seja, a imagem na pgina do Dreamweaver) est fora de sincronia com o arquivo Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do cone do Objeto Inteligente em vermelho. Ao selecione a imagem da web na Visualizao de design e clicar no boto Atualizar do original no Inspetor de propriedades, a imagem atualizada automaticamente, refletindo quaisquer alteraes feitas no arquivo original do Photoshop. Ao usar o fluxo de trabalho de Objetos Inteligentes, voc no precisa abrir o Photoshop para atualizar uma imagem da Web. Alm disso, quaisquer atualizaes feitas em um Objeto Inteligente no Dreamweaver so no destrutivas. Ou seja, voc pode alterar a verso da Web da imagem em sua pgina enquanto mantm a imagem original do Photoshop intacta. Voc tambm pode atualizar um Objeto Inteligente sem selecionar a imagem da Web na visualizao de Design. O painel Recursos permite que voc atualize todos os Objetos Inteligentes, incluindo as imagens que podem no ser selecionveis na janela Documento (por exemplo, imagens de segundo plano CSS). Configuraes de otimizao de imagens Tanto para o fluxo de trabalho de copiar/colar quanto para o fluxo de trabalho de Objetos Inteligentes, voc pode especificar configuraes de otimizao na caixa de dilogo Visualizao da imagem. Essa caixa de dilogo permite que voc defina aspectos como o formato da imagem, qualidade da imagem etc. Se voc estiver copiando uma fatia ou uma camada pela primeira vez ou inserindo uma arquivo do Photoshop como um Objeto Inteligente pela primeira vez, o Dreamweaver exibir essa caixa de dilogo de modo que voc possa criar facilmente a imagem da Web. Se voc copiar e colar uma atualizao em uma determinada fatia ou camada, o Dreamweaver manter as configuraes originais e recriar a imagem da Web com essas configuraes. Da mesma maneira, ao atualizar um Objeto Inteligente usando o Inspetor de propriedades, o Dreamweaver usar as mesmas configuraes usadas quando voc inseriu a imagem pela primeira vez. Voc pode alterar as configuraes de imagem a qualquer momento selecionando a imagem da Web na Visualizao de design e, ento, clicando no boto Editar configuraes de imagem no Inspetor de propriedades.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 370


Trabalho com outros aplicativos

Armazenamento de arquivos do Photoshop Se voc tiver inserido uma imagem da Web e no tiver armazenado o arquivo original do Photoshop em seu site do Dreamweaver, o Dreamweaver reconhecer o caminho para o arquivo original como um caminho de arquivo local absoluto. (Isso verdadeiro tanto para o fluxo de trabalho de copiar/colar quanto para o de Objetos Inteligentes.) Por exemplo, se o caminho de seu site do Dreamweaver for C:\Sites\meuSite e seu arquivo do Photoshop estiver armazenado em C:/Images/Photoshop, o Dreamweaver no reconhecer o ativo original como parte do site chamado meuSite. Isso causar problemas se voc quiser compartilhar o arquivo do Photoshop com outros membros da equipe, pois o Dreamweaver reconhecer o arquivo somente como disponvel em um determinado disco rgido local. Se voc armazenar o arquivo do Photoshop em seu site, entretanto, o Dreamweaver definir um caminho entre o site o arquivo. Qualquer usurio com acesso ao site ser capaz de definir o caminho correto at o arquivo, desde que voc tenha fornecido o arquivo original para download. Para assistir a um tutorial em vdeo sobre o fluxo de trabalho de Objetos Inteligentes no Photoshop e no Dreamweaver, consulte www.adobe.com/go/lrvid4043_dw_br.

Como criar objetos inteligentes


Quando voc insere uma imagem do Photoshop (arquivo PSD) em uma pgina, o Dreamweaver cria um objeto inteligente. Um Objeto inteligente uma imagem habilitada para a Web que mantm uma conexo ativa com a imagem original do Photoshop. Sempre que voc atualiza a imagem original no Photoshop, o Dreamweaver oferece a opo de atualizar a imagem no Dreamweaver com o clique de um boto.
1 No Dreamweaver (Visualizao de design ou de cdigo), coloque o ponto de insero na pgina onde voc deseja

inserir a imagem.
2 Selecione Inserir > Imagem.

Voc tambm pode arrastar o arquivo PSD para a pgina a partir do painel Arquivos, caso esteja armazenando os arquivos do Photoshop em seu site. Se essa for a sua opo, ignore a prxima etapa.
3 Localize o arquivo de imagem PSD do Photoshop na caixa de dilogo Selecionar origem da imagem clicando no

boto Procurar e navegando at o arquivo.


4 Na caixa de dilogo Visualizao da imagem exibida, ajuste as configuraes de otimizao conforme necessrio e

clique em OK.
5 Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site.

O Dreamweaver cria os objetos inteligentes com base nas configuraes de otimizao selecionadas e coloca em sua pgina a verso habilitada para a Web da imagem. O objeto inteligente mantm uma conexo ativa com a imagem original e permite que voc saiba quando ambas esto fora de sincronia. Nota: Se voc decidir alterar posteriormente as configuraes de otimizao para uma imagem colocada em suas pginas, pode selecionar a imagem, clicar no boto Editar configuraes de imagem no Inspetor de propriedades da imagem e fazer as alteraes na caixa de dilogo Visualizao de imagem. As alteraes feitas na caixa de dilogo Visualizao de imagem so aplicadas de forma no destrutiva. O Dreamweaver nunca modifica o arquivo original do Photoshop e sempre recria a imagem da Web com base nos dados originais. Para assistir a um tutorial em vdeo sobre o trabalho com Objetos inteligentes do Photoshop, consulte www.adobe.com/go/lrvid4043_dw_br.

Mais tpicos da Ajuda


Dreamweaver e acessibilidade na pgina 688 Configurao das opes da caixa de dilogo Visualizao da imagem na pgina 374

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 371


Trabalho com outros aplicativos

Atualizar um objeto inteligente


Se voc alterar o arquivo do Photoshop ao qual seu objeto inteligente vinculado, o Dreamweaver notifica que a imagem habilitada para a web est fora de sincronia com o original. No Dreamweaver, os objetos inteligentes so indicados por um cone no canto superior esquerdo da imagem. Quando a imagem habilitada para a Web no Dreamweaver est fora de sincronia com o arquivo original do Photoshop, ambas as setas do cone ficam verdes. Quando a imagem habilitada para a Web est fora de sincroniza com o arquivo original do Photoshop, uma das setas do cone torna-se vermelha.
Para atualizar um objeto inteligente com o contedo atual do arquivo original do Photoshop, selecione Objeto

inteligente na janela Documento e depois clique no boto Atualizar do original no Inspetor de propriedades. Nota: Voc no precisa ter o Photoshop instalado para fazer a atualizao no Dreamweaver.

Atualizar vrios objetos inteligentes


Voc pode atualizar vrios objetos inteligentes de uma s vez usando o painel Ativos. O painel Ativos possibilita visualizar os objetos inteligentes que talvez no possam ser selecionados na janela Documento (por exemplo, imagem de plano de fundo CSS).
1 No painel Arquivos, clique na aba Ativos para visualizar os ativos do site. 2 Certifique-se de que a visualizao Imagens foi selecionada. Se no estiver, clique no boto Imagens. 3 Selecione cada ativo de imagem no painel Ativos. Quando voc seleciona um objeto inteligente, possvel ver um

cone de Objeto inteligente no canto superior esquerdo da imagem. Imagens normais no possuem este cone.
4 Em cada objeto inteligente que voc quiser atualizar, clique com o boto direito do mouse sobre o nome do arquivo

e selecione Atualizar do original. Voc tambm pode clicar mantendo a tecla Control pressionada para selecionar vrios nomes de arquivos e atualizar todos de uma vez. Nota: Voc no precisa ter o Photoshop instalado para fazer a atualizao no Dreamweaver.

Redimensionar um objeto inteligente


Voc pode redimensionar um objeto inteligente na janela Documento como faria com qualquer outra imagem.
1 Selecione o objeto inteligente na janela Documento e arraste as alas de redimensionamento para redimensionar a

imagem. Voc pode manter a largura e a altura proporcionais mantendo a tecla Shift pressionada conforme arrasta.
2 Clique no boto Atualizar do original no Inspetor de propriedades.

Quando voc atualiza o objeto inteligente, a imagem da web, de forma no destrutiva, reprocessa o novo tamanho com base no contedo atual do arquivo original e das configuraes originais de otimizao.

Editar o arquivo original do Photoshop de um objeto inteligente


Aps criar o objeto inteligente na sua pgina do Dreamweaver, voc pode editar o arquivo PSD original no Photoshop. Aps fazer as alteraes no Photoshop, voc pode atualizar facilmente a imagem da Web no Dreamweaver. Nota: Certifique-se de configurar o Photoshop como editor principal de imagens externas.
1 Selecione o objeto inteligente na janela Documento. 2 Clique no boto Editar no Inspetor de propriedades. 3 Faa as alteraes no Photoshop e salve o novo arquivo PSD. 4 No Dreamweaver, selecione novamente o objeto inteligente e clique no boto Atualizar do original.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 372


Trabalho com outros aplicativos

Nota: Se voc alterou o tamanho da imagem no Photoshop, precisar redimensionar o tamanho da imagem da Web no Dreamweaver. O Dreamweaver atualiza um objeto inteligente somente com base no contedo do arquivo original do Photoshop e no em seu tamanho. Para sincronizar o tamanho de uma imagem da Web com o tamanho do arquivo original do Photoshop, clique com o boto direito do mouse na imagem e selecione Redefinir tamanho para original.

Mais tpicos da Ajuda


Editar imagens no Dreamweaver na pgina 241 Usar um editor de imagens externas na pgina 244 Configurao das opes da caixa de dilogo Visualizao da imagem na pgina 374

Estados de objetos inteligentes


A tabela a seguir lista os vrios estados de objetos inteligentes.
Estado de objeto inteligente Imagens sincronizadas Descrio Ao recomendada

A imagem da Web est em sincronia com o contedo atual do arquivo original do Photoshop. Os atributos de largura e altura do cdigo HTML combinam com as dimenses da imagem da Web. O arquivo original do Photoshop foi modificado aps a criao da imagem da Web no Dreamweaver.

Nenhum

Ativo original modificado

Use o boto Atualizar do original no Inspetor de propriedades para sincronizar as duas imagens. Use o boto Atualizar do original no Inspetor de propriedades para recriar a imagem da Web a partir do arquivo original do Photoshop. O Dreamweaver usa dimenses de altura e largura de HTML atualmente especificadas ao recriar a imagem. No crie imagens da Web com dimenses maiores que as dimenses do arquivo original do Photoshop.

As dimenses da imagem da Web so diferentes da largura e altura do HTML selecionado

Os atributos de largura e altura do cdigo HTML so diferentes das dimenses de largura e altura da imagem da Web que o Dreamweaver criou na insero. Se as dimenses da imagem da Web forem menores que os valores selecionados de largura e altura no HTML, a imagem da Web pode aparecer como pixels.

As dimenses do ativo Os atributos de largura e altura do cdigo HTML so diferentes original so muito das dimenses de largura e altura do arquivo original do pequenas para a largura e a Photoshop. A imagem da Web pode aparecer como pixels. altura do HTML selecionado Ativo original no encontrado

O Dreamweaver no pde localizar o arquivo original do Corrija o caminho do arquivo na caixa de Photoshop especificado na caixa de texto Original do Inspetor de texto Original do Inspetor de propriedades propriedades. ou mova o arquivo do Photoshop para o local atualmente especificado.

Copiar e colar uma seleo do Photoshop


Voc pode copiar todas ou algumas imagens do Photoshop e colar a seleo na pgina do Dreamweaver como uma imagem habilitada para a Web. possvel copiar uma nica camada ou um conjunto de camadas de uma rea selecionada da imagem ou copiar uma fatia da imagem. Entretanto, quando se faz isso, o Dreamweaver no cria um objeto inteligente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 373


Trabalho com outros aplicativos

Nota: Embora a funo Atualizar do original no esteja disponvel para imagens coladas, voc ainda pode abrir e editar o arquivo original do Photoshop selecionando a imagem colada e clicando no boto Editar do Inspetor de propriedades.
1 No Photoshop, execute um dos procedimentos a seguir:

Copie toda ou parte de uma nica camada usando a ferramenta Letreiro para selecionar a parte que deseja copiar
e escolha Editar > Copiar. Somente a camada ativa da rea selecionada copiada na rea de transferncia. Se houver efeitos baseados em camadas, eles no sero copiados.

Copie e mescle vrias camadas usando a ferramenta Letreiro para selecionar a parte que deseja copiar e escolha
Editar > Copiar parte mesclada. Isso nivela e copia todas as camadas ativas e inferiores da rea selecionada na rea de transferncia. Se houver efeitos baseados em camadas associados, eles no sero copiados.

Copie uma fatia usando a ferramenta Selecionar fatia para selecionar a fatia e, em seguida, escolha Editar > Copiar.
Isso nivela e copia todas as camadas ativas e inferiores da fatia na rea de transferncia. Escolha Selecionar > Tudo para selecionar rapidamente toda a imagem para ser copiada.
2 No Dreamweaver (Visualizao de design ou de cdigo), coloque o ponto de insero na pgina onde voc deseja

inserir a imagem.
3 Selecione Editar > Colar. 4 Na caixa de dilogo Visualizao da imagem, ajuste as configuraes de otimizao como necessrio e clique em OK. 5 Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site.

O Dreamweaver define a imagem de acordo com as configuraes de otimizao e coloca uma verso habilitada para a Web da imagem na sua pgina. As informaes sobre a imagem, como o local do arquivo PSD original, so salvas em uma Design Note, independentemente de as Design Notes estarem ativadas para seu site. A Design Note permite que voc volte para editar o arquivo de origem do Photoshop a partir do Dreamweaver. Para assistir a um tutorial sobre como copiar e colar entre aplicativos diferentes, incluindo o Dreamweaver e o Photoshop, consulte www.adobe.com/go/vid0193_br.

Mais tpicos da Ajuda


Sobre a integrao com Photoshop, Flash e Fireworks na pgina 361 Configurao das opes da caixa de dilogo Visualizao da imagem na pgina 374 Dreamweaver e acessibilidade na pgina 688 Tutorial sobre as operaes de copiar/colar entre vrios produtos

Editar imagens coladas


Aps colar as imagens do Photoshop nas suas pginas do Dreamweaver, voc pode editar o arquivo PSD original no Photoshop. Ao utilizar o fluxo copiar/colar, a Adobe recomenda sempre manter suas edies no arquivo original PSD, e no na imagem habilitada para a web, e a colar novamente para manter uma nica origem. Nota: Verifique se o Photoshop est definido como o principal editor de imagens externas para o tipo de arquivo que deseja editar.
1 No Dreamweaver, selecione uma imagem habilitada para a Web que foi criada originalmente no Photoshop e

execute um dos procedimentos a seguir:

Clique no boto Editar no Inspetor de propriedades da imagem. Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no arquivo ao mesmo tempo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 374


Trabalho com outros aplicativos

Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em uma
imagem, escolha Editar original com no menu de contexto e, em seguida, escolha Photoshop. Nota: Esse processo presume que o Photoshop tenha sido definido como o principal editor de imagens externas para arquivos de imagem PSD. Voc tambm pode definir o Photoshop como o editor padro para os tipos de arquivo JPEG, GIF e PNG.
2 Editar o arquivo no Photoshop. 3 Retorne ao Dreamweaver e cole a imagem ou seleo atualizada em sua pgina.

Se quiser reotimizar a imagem a qualquer momento, voc pode selecionar a imagem e clicar no boto Editar configuraes de imagem no Inspetor de propriedades.

Mais tpicos da Ajuda


Editar imagens no Dreamweaver na pgina 241 Usar um editor de imagens externas na pgina 244 Configurao das opes da caixa de dilogo Visualizao da imagem na pgina 374

Configurao das opes da caixa de dilogo Visualizao da imagem


Opes da caixa de dilogo Visualizao da imagem
Ao criar um objeto inteligente ou colar uma seleo do Photoshop, o Dreamweaver exibe a caixa de dilogo Visualizao da imagem. (O Dreamweaver tambm exibe esta caixa de dilogo para qualquer outro tipo de imagem, se voc selecionar a imagem e clicar no boto Editar configuraes de imagem no Inspetor de propriedades.) Esta caixa de dilogo possibilita definir e visualizar as configuraes para imagens habilitadas para a Web usando a combinao correta de cor, compactao e qualidade. Uma imagem habilitada para a Web pode ser exibida por todos os navegadores modernos e sempre tem a mesma aparncia, independentemente do sistema ou do navegador usado pelo visualizador. Ao inserir uma imagem do Photoshop, a caixa de dilogo Visualizao da imagem permite ajustar diversas configuraes para a publicao na Web. Em geral, as configuraes afetam a qualidade e o tamanho do arquivo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 375


Trabalho com outros aplicativos

A caixa de dilogo Visualizao da imagem A. Aba Opes B. Aba Arquivo C. Painel Visualizar

Nota: Apenas a verso exportada do arquivo de imagem afetada, independentemente das configuraes selecionadas. Os arquivos originais PSD do Photoshop ou PNG do Fireworks sempre permanecem inalterados. A caixa de dilogo Visualizao da imagem tem trs sees:

A aba Opes permite definir o formato de arquivo a ser usado e as preferncias, como cores. A aba Arquivo permite definir o fator de escala e o tamanho do arquivo alvo da imagem. O painel Visualizar permite ver uma verso da imagem com as configuraes atuais.
Muitas opes de imagem esto disponveis na aba Opes e elas variam de acordo com o formato de arquivos escolhido. Vrios conjuntos de opes de imagem GIF e JPEG esto disponveis para sua praticidade no menu pop-up Configuraes salvas. Opes de imagem JPEG Para otimizar uma imagem JPEG, defina suas opes de compactao e suavizao. Voc no pode editar a paleta de cores.
Qualidade Use o controle deslizante para aumentar ou diminuir a qualidade da imagem. Quanto melhor a qualidade, maior o tamanho do arquivo. Suavizao Permite aumentar a suavizao conforme necessrio. Imagens com menos qualidade talvez precisem de

uma valor maior de suavizao.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 376


Trabalho com outros aplicativos

Exibio progressiva do navegador Exibe uma imagem inicialmente em baixa resoluo e aumenta progressivamente

a resoluo durante o download. No selecionada por padro.


Bordas com cores ntidas Permite obter uma imagem com maior qualidade. Fosco Permite definir o fundo da imagem. Voc pode manter a transparncia de um arquivo PNG de 32 bpc (bits por canal) clicando no cone de transparncia na caixa de dilogo Fosco. Tambm possvel usar a opo Fosco para objetos com suavizao de borda que ficam diretamente acima da tela correspondendo a cor fosca com o fundo de destino. Remover cores no utilizadas Reduz o tamanho do arquivo removendo as cores que no so utilizadas na imagem. Otimizar para o tamanho Especifica o tamanho da imagem em quilobytes. Para imagens de 8 bpc, o assistente tenta

atingir o tamanho de arquivo solicitado ajustando o nmero de cores ou o pontilhamento. Opes de imagem GIF e PNG Na aba Opes, voc pode definir um valor de transparncia para cores individuais em imagens GIF e PNG de 8 bpc de modo que o fundo da pgina da Web fique visvel nas reas com essas cores. Faa isso ajustando a paleta de cores esquerda da aba Opes. As imagens PNG com o formato 32 bpc contm transparncia automaticamente, portanto, no haver uma opo de transparncia para PNGs de 32 bpc no painel Otimizar.
Paleta Definido como Adaptvel por padro. Selecione uma das configuraes salvas de paleta de cores no menu pop-

up se desejar usar um conjunto de opes predefinido


Perda Definido como 0 por padro. No aplicvel a imagens PNG. Pontilhamento Aproxima as cores que no esto na paleta atual, alternando pixels com cores similares de modo que

apaream como uma mistura da cor ausente. O pontilhamento til especialmente ao exportar imagens com misturas ou gradientes complexos ou ao exportar imagens fotogrficas para um formato grfico de 8 bpc, como GIF. No selecionada por padro. Nota: O Pontilhamento pode aumentar muito o tamanho do arquivo.
Lista de nmero de cores Definido como 256 por padro. O nmero de cores depende do comportamento atual da paleta. Por exemplo, a paleta "Web 216" exibe somente 216 cores. Paleta Cor A exibio das cores varia de acordo com o comportamento da paleta e o nmero mximo de cores selecionados. Ferramentas da paleta Clique em qualquer pixel da paleta e, em seguida, clique nesses cones para alterar, adicionar

ou excluir cores ou para deixar uma cor transparente, aceita pela Web ou bloqueada.
cones de Selecionar cor de transparncia Esses botes permitem selecionar, adicionar ou remover uma cor da paleta. Por exemplo, se voc escolher a opo Selecionar cor de transparncia, poder clicar em qualquer pixel da paleta ou em um ponto de cor no painel de visualizao para deix-la transparente. Menu pop-up Transparncia Permite definir ndice, Alfa ou Sem transparncia. Uma grade cinza e branca nas

visualizaes de documento indica reas transparentes. Para saber como suas configuraes afetam a imagem, escolha At 2 ou At 4 na visualizao da imagem e clique em uma imagem que no seja a original.

ndice Use a transparncia de ndice ao exportar imagens GIF que contm reas transparentes. Com a transparncia de ndice, possvel especificar cores que devem ficar transparentes depois da exportao. A transparncia de ndice ativa ou desativa pixels com valores de cor especficos. Alfa Use a transparncia alfa ao exportar imagens PNG de 8 bpc que contm reas transparentes. A transparncia
alfa permite gradientes de transparncia e pixels semi-opacos.
Fosco Permite que voc defina o plano de fundo da imagem. Voc pode manter a transparncia de um arquivo PNG de 32 bpc clicando no cone de transparncia na caixa de dilogo Fosco. Tambm possvel usar a opo Fosco para

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 377


Trabalho com outros aplicativos

objetos com suavizao de borda que ficam diretamente acima da tela correspondendo a cor fosca com o fundo de destino.
Remover cores no utilizadas Reduz o tamanho do arquivo removendo as cores que no so utilizadas na imagem. Exibio entrelaada do navegador Exibe uma imagem entrelaada inicialmente em baixa resoluo e aumenta

progressivamente at a resoluo mxima durante o download. No selecionada por padro.


Otimizar para o tamanho Permite especificar um tamanho, em quilobytes, para a imagem. Para imagens de 8 bpc, o

assistente tenta atingir o tamanho de arquivo solicitado ajustando o nmero de cores ou o pontilhamento. Configuraes salvas O Dreamweaver fornece vrias configuraes para sua praticidade. Dependendo das configuraes salvas escolhidas, as opes de imagem especficas do tipo de arquivo descritas acima podem variar.
GIF - Web 216 Faz com que todas as cores sejam aceitas pela Web. A paleta de cores contm no mximo 216 cores. GIF - Websnap 256 Converte cores no aceitas pela Web na cor mais prxima aceita pela Web. A paleta de cores contm no mximo 256 cores. GIF - Websnap 128 Converte cores no aceitas pela Web na cor mais prxima aceita pela Web. A paleta de cores contm no mximo 128 cores. GIF - Adaptvel 256 A paleta de cores que contm somente as cores reais usadas no grfico. A paleta de cores contm

no mximo 256 cores.


JPEG - Melhor qualidade Define a qualidade como 80 e a suavidade como 0, resultando em um grfico de alta

qualidade, mas maior.


JPEG - Menor arquivo Define a qualidade como 60 e a suavizao como 2, resultando em um grfico com metade do tamanho de um arquivo JPEG de Melhor qualidade, mas com menos qualidade.

(Opcional) Alterar a escala da imagem ou opes de exportao de rea na aba Arquivo


1 Selecione a aba Arquivo. 2 Diminua ou expanda a imagem de uma das seguintes formas:

Especifique uma porcentagem de escala. Insira os valores absolutos de pixel para largura ou altura.
3 Selecione Restringir para manter as propores originais da imagem enquanto a redimensiona. 4 Altere a forma da imagem colocada escolhendo a opo Exportar rea e seguindo um destes procedimentos:

Arraste a borda pontilhada ao redor da imagem visualizada conforme necessrio. Voc pode arrastar a imagem
dentro das bordas para exibir as reas ocultas.

Insira as coordenadas de pixel para os limites da imagem.

(Opcional) Visualizar e ajustar imagens no painel Visualizar


1 Na caixa de dilogo Visualizao da imagem, selecione a opo Visualizar caso deseje ver a imagem com as

configuraes aplicadas. Se houver algum problema de desempenho, desmarque essa opo.


2

Selecione uma das configuraes salvas de paleta de cores no menu pop-up Configuraes salvas se desejar usar um conjunto de opes predefinido. e percorra a imagem para ver partes diferentes.

3 Se a imagem for maior que a rea de visualizao, use a ferramenta de ponteiro para segurar a imagem visualizada

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 378


Trabalho com outros aplicativos

4 Use a ferramenta de corte demarcado para reduzir o tamanho da imagem. Voc talvez precise diminuir o zoom

primeiro para ver a imagem inteira.


5 Escolha um valor no menu pop-up Zoom para expandir ou reduzir a imagem visualizada. Voc tambm pode

escolher a ferramenta Zoom e clicar para aplicar mais zoom; para aplicar menos zoom, mantenha pressionada a tecla Alt enquanto clica (Windows) ou mantenha pressionada a tecla Option enquanto clica (Macintosh).
6 possvel visualizar duas ou quatro otimizaes diferentes clicando no boto At 2 ou At 4, na parte inferior do

painel de visualizao, e escolhendo paletas de cores diferentes para cada painel. Nota: Os controles de animao na caixa de dilogo Visualizar esto sempre desativados para imagens do Photoshop.

Trabalho com o Flash e Dreamweaver


Edio de um arquivo SWF do Dreamweaver no Flash
Se voc tem o Flash e o Dreamweaver instalados, pode selecionar um arquivo SWF em um documento do Dreamweaver e usar o Flash para edit-lo. O Flash no edita diretamente o arquivo SWF; edita o documento de origem (arquivo FLA) e reexporta o arquivo SWF.
1 No Dreamweaver, abra o Inspetor de propriedades (Janela > Propriedades). 2 No documento do Dreamweaver, siga um destes procedimentos:

Clique no espao reservado para o arquivo SWF para selecion-lo; ento, no Inspetor de propriedades, clique em
Editar.

Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no espao
reservado para o arquivo SWF, e ento selecione Editar com Flash no menu de contexto. O Dreamweaver muda o foco para o Flash e o Flash tenta localizar o arquivo de criao do Flash (FLA) para o arquivo SWF selecionado. Se o Flash no conseguir localizar o arquivo de criao do Flash, ser solicitado que voc o localize. Nota: se o arquivo FLA ou o arquivo SWF estiver bloqueado, verifique o arquivo no Dreamweaver.
3 No Flash, edite o arquivo FLA. A janela Documento do Flash indica que voc est modificando o arquivo a partir

do Dreamweaver.
4 Quando terminar a edio, clique em Concludo.

O Flash atualiza o arquivo FLA, reexporta-o como um arquivo SWF e encerrado. Ento, o foco retorna ao documento do Dreamweaver. Nota: para atualizar o arquivo SWF e manter o Flash aberto, no Flash, selecione Arquivo > Atualizar para Dreamweaver.
5 Para exibir o arquivo atualizado no documento, clique em Reproduzir no Inspetor de propriedades do

Dreamweaver ou pressione F12 para visualizar a pgina em uma janela do navegador.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 379


Trabalho com outros aplicativos

Trabalho com o Adobe Bridge


Sobre o Adobe Bridge
O Dreamweaver fornece integrao contnua com o Adobe Bridge, o navegador de arquivos de vrias plataformas includo nos componentes do Adobe Creative Suite 5. O Adobe Bridge o ajuda a localizar, organizar e procurar os ativos necessrios para voc criar contedo de impresso, da Web, de vdeo e mvel. Voc pode iniciar o Adobe Bridge em qualquer componente do Creative Suite (exceto o Acrobat 9) e us-lo para acessar tipos de ativos que sejam ou no da Adobe. No Adobe Bridge, possvel:

Visualizar, pesquisar, classificar e processar arquivos sem abrir aplicativos individuais do Creative Suite. Voc pode
tambm editar os metadados de arquivos e usar o Adobe Bridge para inserir os arquivos em seus documentos, projetos ou composies.

Importar e editar fotos de um carto de cmera digital, agrupe as fotos relacionadas em pilhas e abra e edite arquivos
Raw da cmera, sem iniciar o Photoshop.

Realizar tarefas automatizadas, como comandos de lote.


Sincronizar configuraes de cor entre componentes do Creative Suite gerenciados com cores.

Mais tpicos da Ajuda


Creative Suite 5 - Bridge

Iniciar o Adobe Bridge a partir do Dreamweaver


Voc pode iniciar o Adobe Bridge a partir do Dreamweaver para visualizar arquivos antes de coloc-los ou arrast-los no layout da pgina.
Voc pode iniciar o Adobe Bridge de diversas maneiras diferentes:

Selecione Arquivo > Navegar no Bridge. Clique no boto Navegar no Bridge na barra de ferramentas Padro. Pressione o atalho de Navegar no Bridge no teclado: Control + Alt + O (Windows) ou Command + Option + O
(Macintosh). O Bridge aberto no modo Procurar arquivo, mostrando o contedo da pasta aberta pela ltima vez no Dreamweaver. Se o Adobe Bridge j estava aberto, ele se tornar a janela ativa. Nota: Se o Adobe Bridge no estiver instalado, o Dreamweaver exibir uma mensagem de erro e ser necessrio instalar o aplicativo antes de usar esses recursos.

Insero de arquivos do Adobe Bridge no Dreamweaver


Voc pode inserir arquivos nas pginas do Dreamweaver inserindo-os ou arrastando-os a partir do Adobe Bridge para sua pgina. O documento do Dreamweaver no qual deseja inserir o arquivo deve estar aberto e na Visualizao de design para usar esse recurso. possvel inserir a maioria dos tipos de arquivo nas pginas, mas o Dreamweaver trata cada um deles de modo diferente:

Se for inserida uma imagem habilitada para a Web (JPEG, GIF ou PNG), o Dreamweaver inserir os arquivos de
imagem diretamente na sua pgina e colocar uma cpia na pasta de imagens padro do site.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 380


Trabalho com outros aplicativos

Se voc inserir um arquivo PSD do Photoshop, ser necessrio definir as configuraes de otimizao para que o
Dreamweaver possa colocar o arquivo na sua pgina.

Se for inserido um arquivo que no seja de imagem, como mp3, PDF ou um tipo de arquivo desconhecido, o
Dreamweaver inserir um link para o arquivo de origem.

Se for inserido um arquivo HTML, o Dreamweaver inserir um link para o arquivo de origem. (Somente Windows) Se o Microsoft Office estiver instalado e voc estiver inserido um arquivo do Microsoft Word
ou Excel, especifique se deseja inserir o arquivo propriamente dito ou um link para o arquivo de origem. Se desejar inserir o arquivo, especifique at que ponto a formatao do arquivo deve ser mantida.

Mais tpicos da Ajuda


Como criar objetos inteligentes na pgina 370 Trabalho com o Photoshop e Dreamweaver na pgina 368

Colocar um arquivo do Adobe Bridge na sua pgina


1 No Dreamweaver (Visualizao de design), coloque o ponto de insero na pgina onde voc deseja inserir o

arquivo.
2 No Adobe Bridge, selecione o arquivo e escolha Arquivo > Inserir em Dreamweaver. 3 Se o arquivo no estiver na pasta raiz do site, copie-o para essa pasta. 4 Se voc tiver definido Editar > Preferncias > Acessibilidade para mostrar atributos ao inserir imagens, a caixa de

dilogo Atributos de acesso a tag de imagem ser exibida quando imagens habilitadas para a Web, como JPEG e GIF, forem inseridas. Nota: Se o ponto de insero estiver na Visualizao de cdigo, o Adobe Bridge ser iniciado normalmente, mas no poder colocar o arquivo. Os arquivos s podem ser colocados na Visualizao de design.

Arrastar um arquivo do Bridge na pgina


1 No Dreamweaver (Visualizao de design), coloque o ponto de insero na pgina onde voc deseja inserir a

imagem.
2 Inicie o Adobe Bridge se ainda no estiver aberto. 3 No Adobe Bridge, selecione um ou mais arquivos e arraste-os para a pgina do Dreamweaver. 4 Se o arquivo no estiver na pasta raiz do site, copie-o nessa pasta. 5 Se voc tiver definido Editar > Preferncias > Acessibilidade para mostrar atributos ao inserir imagens, a caixa de

dilogo Atributos de acesso a tag de imagem ser exibida quando imagens aceitas pela Web, como JPEG e GIF, forem inseridas. Nota: Se o ponto de insero estiver na Visualizao de cdigo, o Adobe Bridge ser iniciado normalmente, mas no poder colocar o arquivo. Os arquivos s podem ser colocados na Visualizao de design.

Iniciar o Dreamweaver a partir do Adobe Bridge


Selecione um arquivo no Adobe Bridge e siga um destes procedimentos:

Selecione Arquivo > Abrir com > Adobe Dreamweaver. Clique com o boto direito do mouse (com a tecla Control pressionada no Macintosh) e escolha Abrir com > Adobe
Dreamweaver no menu de contexto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 381


Trabalho com outros aplicativos

Nota: Se o Dreamweaver j estiver aberto, essa ao ativa o programa. Se o Dreamweaver no estiver aberto, o Adobe Bridge o inicia, ignorando a tela de boas-vindas.

Trabalho com o Device Central


Uso do Adobe Device Central com o Dreamweaver
O Device Central habilita os designers e desenvolvedores da Web do Dreamweaver a visualizarem a aparncia dos arquivos do Dreamweaver em uma ampla variedade de dispositivos mveis. O Device Central usa a Renderizao em Tela Pequena do Opera para proporcionar aos designers e desenvolvedores uma impresso da aparncia da pgina da Web em uma tela pequena. Ela tambm habilita os designers e desenvolvedores a testarem se o CSS comporta-se corretamente. Por exemplo, um desenvolvedor da Web pode ter um cliente que deseja tornar o site da Web disponvel para celulares. O desenvolvedor da Web pode usar o Dreamweaver para criar pginas preliminares e usar o Device Central para testar a aparncia das pginas em dispositivos diferentes.

Mais tpicos da Ajuda


Ajuda do Adobe Device Central

Visualizao de contedo mvel com o Adobe Device Central e o Dreamweaver


Para visualizar pginas criadas no Dreamweaver em vrios dispositivos mveis, use o Device Central com o recurso Renderizao em Tela Pequena do Opera incorporado. Dispositivos diferentes tm navegadores distintos instalados, mas a visualizao pode dar uma boa impresso da aparncia e do comportamento do contedo em um dispositivo selecionado.
1 Inicie o Dreamweaver. 2 Abrir um arquivo. 3 Siga um destes procedimentos:

Selecione Arquivo > Visualizar no Navegador > Device Central. Na barra de ferramentas da janela do documento, clique no boto do navegador Visualizar/Depurar em
mantendo-o pressionado, e selecione Visualizar no Device Central. O arquivo exibido na aba Device Central Emulator. Para continuar o teste, clique duas vezes no nome de um dispositivo diferente nas listas Conjuntos de Dispositivos ou Dispositivos Disponveis. ,

Dicas para criao de contedo da Web para dispositivos mveis usando o Dreamweaver
O Device Central visualiza pginas da Web criadas no Dreamweaver usando a Renderizao em Tela Pequena do Opera. Essa visualizao pode proporcionar uma boa idia da aparncia de uma pgina da Web em um dispositivo mvel. Nota: a Renderizao em Tela Pequena do Opera pode ou no estar pr-instalado em qualquer dispositivo emulador individual. O Device Central simplesmente proporciona uma visualizao da aparncia do contedo, caso a Renderizao em Tela Pequena do Opera estivesse instalado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 382


Trabalho com outros aplicativos

Use as seguintes dicas para garantir que as pginas da Web criadas no Dreamweaver sejam exibidas corretamente em dispositivos mveis:

Se voc usar estrutura do Adobe Spry para desenvolver contedo, adicione a seguinte linha de HTML s pginas
para que elas possam renderizar CSS e executar JavaScript corretamente no Device Central:
<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/> <link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>

A Renderizao em Tela Pequena do Opera no oferece suporte a quadros, pop-ups, sublinhados, tachados, linhas
sobrepostas, intermitncias e letreiros. Tente evitar esses elementos de projeto.

Mantenha as pginas da Web simples para dispositivos mveis. Em especial, use um nmero mnimo de fontes,
tamanhos de fontes e cores.

A reduo de tamanhos de imagem e a reduo do nmero de cores necessrias aumentam as chances de que as
imagens sejam exibidas como planejado. Use CSS ou HTML para especificar uma altura e uma largura exatas para cada imagem usada. Fornea texto alternativo para todas as imagens. Nota: o site da Web do software Opera uma boa fonte de informaes sobre a otimizao de pginas da Web para dispositivos mveis. Para obter mais dicas e tcnicas sobre como criar contedo para celulares e outros dispositivos mveis, consulte www.adobe.com/go/learn_cs_mobilewiki_br.

Trabalho com o ConnectNow


Trabalho com o ConnectNow
O Adobe ConnectNow fornece uma sala de reunies online segura e pessoal onde voc pode encontrar e colaborar com outras pessoas via Web em tempo real. Com o ConnectNow, possvel compartilhar e fazer comentrios na tela do computador, enviar mensagens de bate-papo e comunicar-se usando udio integrado. Voc tambm pode transmitir vdeos ao vivo, compartilhar arquivos, obter comentrios de reunies e controlar o computador de um participante. possvel acessar o ConnectNow diretamente na interface do aplicativo.
1 Escolha Arquivo > Compartilhar minha tela. 2 Na caixa de dilogo Conectar-se ao Adobe CS Live, digite seu endereo de email e senha e clique em Entrar. Caso

no possua uma ID da Adobe, clique no boto Criar uma ID da Adobe.


3 Para compartilhar sua tela, clique no boto Compartilhar minha tela na parte central da janela do aplicativo

ConnectNow. Para obter instrues completas sobre o uso do ConnectNow, consulte http://help.adobe.com/en_US/Acrobat.com/ConnectNow/index.html. Para assistir a um tutorial em vdeo sobre como usar o ConnectNow, consulte Uso do ConnectNow para compartilhar a tela (7:12). (Essa demonstrao fica localizada no Dreamweaver.)

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 383


Trabalho com outros aplicativos

AIR Extension para Dreamweaver


O Adobe AIR Extension for Dreamweaver permite transformar um aplicativo baseado na Web em um aplicativo desktop. Os usurios podem, assim, executar o aplicativo em seus desktops e, em alguns casos, sem uma conexo com a Internet. Voc pode usar a extenso com o Dreamweaver CS3 e posterior. No compatvel com o Dreamweaver 8. Nota: O Adobe AIR no fornece suporte para o Adobe InContext Editing. Se voc usar o AIR Extension para Dreamweaver para exportar um aplicativo que contm regies do InContext Editing, os recursos do InContext Editing no funcionaro.

Instalao do AIR Extension para Dreamweaver


O AIR Extension para Dreamweaver o ajuda a criar aplicativos ricos da Internet para o desktop. Por exemplo, voc pode ter um conjunto de pginas da Web que interagem uma com a outra para exibir dados XML. Voc pode usar o Adobe AIR Extension para Dreamweaver para compactar esse conjunto de pginas em um pequeno aplicativo que pode ser instalado no computador de um usurio. Quando o usurio executar o aplicativo a partir do desktop, o aplicativo ser carregado e exibir o prottipo na sua prpria janela, independentemente de um navegador. O usurio pode ento procurar o site localmente no seu computador, sem uma conexo com a Internet. Pginas dinmicas, como pginas do Adobe ColdFusion e pginas PHP no so executadas em Adobe AIR. O tempo de execuo funciona apenas com HTML e JavaScript. No entanto, voc pode usar JavaScript em suas pginas para chamar qualquer servio da Web exposto na Internet, incluindo os servios ColdFusion ou gerados por PHP, com mtodos Ajax, como XMLHTTPRequest ou APIs especficas do Adobe AIR.

Requisitos do sistema
Para usar o Adobe AIR Extension para Dreamweaver, o software a seguir dever ser instalado e adequadamente configurado:

Dreamweaver CS3 ou posterior Adobe Extension Manager CS3 ou posterior Java JRE 1.4 ou posterior (necessrio para criao do arquivo Adobe AIR). O Java JRE est disponvel em
http://java.sun.com/. Os requisitos precedentes existem apenas para criao e visualizao de aplicativos Adobe AIR no Dreamweaver. Para instalar e executar um aplicativo Adobe AIR no desktop, necessrio tambm instalar o Adobe AIR no computador. Para baixar o tempo de execuo, consulte www.adobe.com/go/air_br.

Instale o Adobe AIR Extension para Dreamweaver


1 Baixe o Adobe AIR Extension para Dreamweaver aqui: http://www.adobe.com/products/air/tools/ajax/. 2 Clique duas vezes no arquivo de extenso .mpx no Windows Explorer (Windows) ou no Finder (Macintosh). 3 Siga as instrues na tela para instalar a extenso. 4 Depois de ter concludo, reinicie o Dreamweaver.

Para obter informaes sobre como usar o Adobe AIR Extension para Dreamweaver, consulte Como usar o AIR Extension para Dreamweaver.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 384


Trabalho com outros aplicativos

Criao de um aplicativo AIR no Dreamweaver


Para criar um aplicativo AIR baseado em HTML no Dreamweaver, voc seleciona um site existente para compactar como um aplicativo AIR.
1 Certifique-se de que as pginas da Web que deseja compactar em um aplicativo estejam contidas em um site

definido do Dreamweaver.
2 No Dreamweaver, abra a pgina inicial do conjunto de pginas que deseja compactar. 3 Selecione Site > Configuraes do aplicativo AIR. 4 Conclua a caixa de dilogo Configuraes do aplicativo AIR e do instalador e clique em Criar arquivo AIR.

Para obter mais informaes, consulte as opes da caixa de dilogo listadas a seguir. A primeira vez que voc cria um arquivo Adobe AIR, o Dreamweaver cria um arquivo aplicativo.xml na pasta raiz do site. Esse arquivo serve como um manifesto, definindo vrias propriedades do aplicativo. A seguir, h uma descrio das opes na caixa de dilogo Configuraes do aplicativo AIR e do instalador:
Nome do arquivo do aplicativo o nome usado para o arquivo executvel do aplicativo. Por padro, a extenso usa o nome do site do Dreamweaver para nomear o arquivo. Voc pode alterar o nome, se preferir. No entanto, no nome deve conter apenas caracteres vlidos para nomes de arquivos ou de pastas. (Ou seja, pode conter apenas caracteres ASCII e no pode terminar com um ponto.) Essa configurao obrigatria. Nome do aplicativo o nome que exibido nas telas de instalao quando os usurios instalam o aplicativo.

Novamente, a extenso especifica o nome do site do Dreamweaver por padro. Essa configurao no tem restries de caractere e no obrigatria.
ID do aplicativo identifica o aplicativo com uma ID exclusiva. Voc pode alterar a ID padro se preferir. No use

espaos ou caracteres especiais no ID. Os nicos caracteres vlidos so 0-9, a-z, A-Z, . (ponto) e - (trao). Essa configurao obrigatria.
Verso especifica o nmero da verso do aplicativo. Essa configurao obrigatria. Contedo inicial especifica a pgina inicial do aplicativo. Clique no boto Navegar para navegar para a pgina

inicial e selecion-la. O arquivo escolhido deve residir dentro da pasta raiz do site. Essa configurao obrigatria.
Descrio permite especificar uma descrio do aplicativo a ser exibida quando o usurio instalar o aplicativo. Copyright permite especificar um copyright que exibido nas informaes em Sobre para aplicativos Adobe AIR

instalados no Macintosh. Essas informaes no so usadas para aplicativos instalados no Windows.


Estilo da janela especifica o estilo da janela (ou cromo) que ser utilizado na interface de usurio quando o usurio

executar o aplicativo no computador. O Cromo do sistema rodeia o aplicativo com o controle de janelas padro do sistema operacional. O Cromo personalizado (opaco) elimina o cromo padro do sistema e permite criar um cromo do seu prprio aplicativo. (Voc cria o cromo personalizado diretamente na pgina HTML compactada.) O cromo personalizado (transparente) como o cromo personalizado (opaco), mas adiciona recursos transparentes s bordas da pgina, permitindo janelas de aplicativo no retangulares.
Tamanho da janela especifica as dimenses da janela do aplicativo quando ela aberta. cone permite selecionar imagens personalizadas para os cones de aplicativos. (As imagens padro so imagens

Adobe AIR que vm com a extenso.) Para usar imagens personalizadas, clique no boto Selecionar imagens de cones. Na caixa de dilogo Imagens de cones que exibida, clique na pasta para cada tamanho de cone e selecione o arquivo de imagem que utilizar. o AIR oferece suporte a arquivos PNG de imagens de cones de aplicativos. Nota: As imagens personalizadas selecionadas devem residir no site do aplicativo e seus caminhos devem ser relativos raiz do site.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 385


Trabalho com outros aplicativos

Tipos de arquivos associados permite associar tipos de arquivos ao seu aplicativo. Para obter mais informaes,

consulte a seo a seguir.


Atualizaes de aplicativos determina se o instalador de aplicativo do Adobe AIR ou o prprio aplicativo executa

atualizaes para novas verses dos aplicativos Adobe AIR. A caixa de seleo marcada por padro, o que faz com que o instalador de aplicativo do Adobe AIR execute atualizaes. Se quiser que seu aplicativo execute suas prprias atualizaes, desmarque a caixa de seleo. Tenha em mente que se desmarcar a caixa de seleo, voc precisar escrever um aplicativo que execute atualizaes.
Arquivos includos especifica quais arquivos ou pastas sero includos no aplicativo. Voc pode adicionar arquivos HTML e CSS, arquivos de imagem e arquivos de bibliotecas JavaScript. Clique no boto de adio (+) para adicionar arquivos e no cone de pasta para adicionar pastas. No inclua certos arquivos como as_mmServerScripts, _notes, e assim por diante. Para excluir um arquivo ou uma pasta da lista, selecione o arquivo ou a pasta e clique no boto de subtrao (-). Assinatura digital Clique em Definir para assinar o aplicativo com uma assinatura digital. Essa configurao obrigatria. Para obter mais informaes, consulte a seo a seguir. Pasta de menu do programa especifica um subdiretrio no menu Iniciar do Windows em que voc deseja que o atalho do aplicativo seja criado. (No aplicvel no Macintosh.) Destino especifica onde salvar o novo instalador de aplicativos (arquivo .air). O local padro a raiz do site. Clique

no boto Procurar para selecionar um local diferente. O nome de arquivo padro se baseia no nome do site, com uma extenso .air adicionada. Essa configurao obrigatria.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 386


Trabalho com outros aplicativos

A seguir h um exemplo da caixa de dilogo com algumas opes bsicas definidas:

Assinar um aplicativo com um certificado digital


Uma assinatura digital fornece a garantia de que o cdigo de um aplicativo no foi alterado ou corrompido desde a sua criao pelo autor do software. Todos os aplicativos Adobe AIR exigem uma assinatura digital e no podem ser instalados sem ela. Voc pode assinar o aplicativo com um certificado digital comprado, criar seu prprio certificado ou preparar um arquivo Adobe AIRI (um arquivo intermedirio Adobe AIR) que voc assinar posteriormente.
1 Na caixa de dilogo Configuraes do aplicativo e do instalador AIR, clique no boto Definir, ao lado da opo

Assinatura digital.
2 Na caixa de dilogo Assinatura digital, siga um destes procedimentos:

Para assinar um aplicativo com um certificado digital pr-adquirido, clique no boto Procurar, selecione o
certificado, insira a senha correspondente e clique em OK.

Para criar o seu prprio certificado digital auto-assinado, clique no boto Criar e preencha a caixa de dilogo. A
opo de tipo de certificado refere-se ao nvel de segurana: 1024-RSA usa uma chave de 1024 bits (menos segura) e 2048-RSA usa uma chave de 2048 bits (mais segura). Quando terminar, clique em OK. Em seguida, insira a senha correspondente na caixa de dilogo Assinatura digital e clique em OK.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 387


Trabalho com outros aplicativos

Selecione Preparar um pacote AIRI que ser assinado posteriormente e clique em OK. Essa opo permite criar
um aplicativo AIR intermedirio (AIRI) sem uma assinatura digital. Um usurio no consegue instalar o aplicativo, no entanto, at voc adicionar uma assinatura digital.

Sobre o carimbo de data/hora


Quando voc assina um aplicativo Adobe AIR com um certificado digital, a ferramenta de compactao pergunta ao servidor sobre uma autoridade de carimbo de data e hora para obter uma data e hora de assinatura verificvel independentemente. O carimbo de data e hora obtido incorporado no arquivo AIR. Desde que o certificado de assinatura seja vlido no momento da assinatura, o arquivo AIR poder ser instalado, mesmo depois que o certificado tiver expirado. Por outro lado, se nenhum carimbo de data e hora for obtido, o arquivo AIR no poder mais ser instalado quando o certificado expirar ou for revogado. Por padro, o Adobe AIR Extension para Dreamweaver obtm um carimbo de data e hora ao criar um aplicativo Adobe AIR. Voc pode, no entanto, desativar o carimbo de data e hora desfazendo a seleo da opo Carimbo de data e hora na caixa de dilogo Assinatura digital. (Recomendamos fazer isso, por exemplo, se um servio de carimbo de data e hora no estiver disponvel.) A Adobe recomenda que todos os arquivos AIR publicamente distribudos incluam um carimbo de data e hora. A autoridade de carimbo de data e hora padro usada pelas ferramentas de compactao do AIR o Geotrust. Para obter mais informaes sobre o carimbo de data/hora e os certificados digitais, consulte Assinatura digital do arquivo AIR.

Edio de tipos de arquivos AIR associados


Voc pode associar diferentes tipos de arquivos com o aplicativo Adobe AIR. Por exemplo, se quiser tipos de arquivos com uma extenso .avf para abrir no Adobe AIR quando um usurio clicar duas vezes neles, voc poder adicionar a extenso .avf lista de tipos de arquivos associados.
1 Na caixa de dilogo Configuraes do aplicativo e do instalador AIR, clique no boto Editar lista, ao lado da opo

Tipos de arquivos associados.


2 Na caixa de dilogo Tipos de arquivos associados, siga um destes procedimentos:

Selecione um tipo de arquivo e clique no boto menos (-) para excluir o tipo de arquivo. Clique no boto mais (+) para adicionar um tipo de arquivo.
Se clicar no boto mais para adicionar um tipo de arquivo, a caixa de dilogo Configuraes de tipo de arquivo ser exibida. Conclua a caixa de dilogo e clique em OK para fech-la. A seguir est uma lista de opes:
Nome especifica o nome do tipo de arquivo que aparece na lista Tipos de arquivos. Essa opo obrigatrio e

pode incluir apenas caracteres ASCII alfanumricos (a-z, A-Z, 0-9) e pontos (por exemplo, adobe.VideoFile). O nome deve ser iniciado com uma letra. O tamanho mximo de 38 caracteres.
Extenso especifica a extenso do tipo de arquivo. No inclui um ponto antes da extenso. Essa opo obrigatria e pode incluir apenas caracteres ASCII alfanumricos (a-z, A-Z, 0-9). O tamanho mximo de 38 caracteres. Descrio permite especificar uma descrio opcional para o tipo de arquivo. Tipo de contedo especifica o tipo MIME ou tipo de mdia para o arquivo (por exemplo texto/html,

imagem/gif, e assim por diante).


Locais de arquivos de cones permite selecionar imagens personalizadas para os tipos de arquivos associados.

(As imagens padro so imagens Adobe AIR que vm com a extenso.)

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 388


Trabalho com outros aplicativos

Edio das configuraes do aplicativo AIR


Voc pode editar as configuraes do aplicativo Adobe AIR a qualquer momento.
Selecione Site > Configuraes do aplicativo AIR e faa as alteraes.

Visualizao de uma pgina da Web em um aplicativo AIR


Voc pode visualizar uma pgina HTML no Dreamweaver da maneira que ela apareceria em um aplicativo AIR. A visualizao til quando voc quer ver como uma pgina da Web ser no aplicativo sem ter que criar todo o aplicativo.
Na barra de ferramentas do documento, clique no boto Visualizar/depurar no navegador e selecione Visualizar

em AIR. Voc tambm pode pressionar Ctrl+Shift+F12 (Windows) ou Cmd+Shift+F12 (Macintosh).

Uso da dicas de cdigo do AIR e da codificao por cores


O Adobe AIR Extension para Dreamweaver tambm adiciona dicas de cdigo e a codificao por cores para os elementos de linguagem do Adobe AIR na Visualizao de cdigo no Dreamweaver.

Abra um arquivo HTML ou JavaScript na Visualizao de cdigo e insira o cdigo do Adobe AIR.
Nota: O mecanismo de dicas de cdigo funciona apenas entre tags <script> ou em arquivos .js. Para obter mais informaes sobre os elementos de linguagem do Adobe AIR, consulte a documentao do desenvolvedor no resto deste guia.

Acesso documentao do Adobe AIR


O Adobe AIR Extension adiciona um item ao menu de ajuda do Dreamweaver que permite acessar aplicativos AIR em desenvolvimento com HTML e Ajax.
Selecione Ajuda > Ajuda do Adobe AIR.

ltima atualizao em 28/4/2010

389

Captulo 14: Criao e gerenciamento de modelos


Sobre os modelos do Dreamweaver
Noes bsicas sobre modelos do Dreamweaver
Um modelo um tipo especial de documento usado para criar um layout de pgina "fixo". Os documentos criados com base no modelo herdam o seu layout de pgina. Ao criar um modelo, voc especifica o contedo que os usurios podem editar em um documento criado com esse modelo. Os modelos permitem que seus autores controlem os elementos de pgina que os usurios do modelo (redatores, artistas grficos ou desenvolvedores da Web) podem editar. H diversos tipos de regies que o autor do modelo pode incluir em um documento. Nota: Os modelos permitem que voc controle uma grande rea de design e reutilize layouts completos. Se voc quiser reutilizar elementos de design especficos, como um logotipo ou informaes de copyright de um site, crie itens de biblioteca. Com o uso de modelos, voc pode atualizar vrias pginas de uma vez. Um documento criado com um modelo permanece conectado a esse modelo at ser desanexado. possvel modificar um modelo e imediatamente atualizar o design em todos os documentos nele baseados. Nota: Os modelos do Dreamweaver diferem dos modelos de alguns outros softwares do Adobe Creative Suite, pois as sees de pgina dos modelos do Dreamweaver so fixas (no podem ser editadas) por padro.

Mais tpicos da Ajuda


Gerenciamento de ativos e bibliotecas na pgina 110 Criao de um modelo do Dreamweaver na pgina 397

Tipos de regies de modelo


Quando voc salva um documento como modelo, grande parte das regies do documento so bloqueadas. Como autor do modelo, voc especifica quais regies do documento baseado em modelo sero editveis. Para isso, voc insere regies editveis ou parmetros editveis no modelo. Ao criar o modelo, voc pode alterar as regies editveis e as regies bloqueadas. Contudo, em um documento baseado no modelo, o usurio do modelo s pode efetuar alteraes nas regies editveis; as regies bloqueadas no podem ser modificadas. Existem quatro tipos de regies de modelo:
Uma regio editvel Uma regio desbloqueada em um documento baseado em modelo: uma seo que o usurio do

modelo pode editar. O autor do modelo pode especificar qualquer rea do modelo como editvel. Para ser eficaz, o modelo deve conter pelo menos uma regio editvel; caso contrrio, as pginas baseadas no modelo no podero ser editadas.
Uma regio repetitiva Uma seo do layout do documento definida para que o usurio do modelo possa adicionar ou

excluir cpias da regio repetitiva de um documento baseado no modelo quando necessrio. Por exemplo, voc pode definir que uma linha da tabela se repita. As sees repetitivas so editveis; portanto, o usurio do modelo pode editar o contedo no elemento repetitivo, enquanto o prprio design fica sob o controle do autor do modelo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 390


Criao e gerenciamento de modelos

H dois tipos de regies repetitivas que voc pode inserir em um modelo: regio repetitiva e tabela repetitiva.
Uma regio opcional Uma seo de um modelo cujo contedo (como texto ou imagem) que pode aparecer ou no em

um documento. Na pgina baseada em modelo, o usurio do modelo geralmente controla se o contedo exibido.
Um atributo de tag editvel Permite que voc desbloqueie um atributo de tag em um modelo, de forma que o atributo

possa ser editado em uma pgina baseada em modelo. Por exemplo, voc pode "bloquear" a imagem que aparecer no documento, mas permitir que o usurio do modelo defina o alinhamento esquerda, direita ou ao centro.

Mais tpicos da Ajuda


Edio de contedo em um documento baseado em modelo na pgina 417 Criao de regies editveis na pgina 400 Criao de regies repetitivas na pgina 401 Utilizao de regies opcionais na pgina 404 Definio de atributos de tag editveis na pgina 406

Links em modelos
Quando voc cria um arquivo de modelo salvando uma pgina existente como modelo, o novo modelo na pasta Modelos e os links no arquivo so atualizados para que os caminhos relativos ao documento estejam corretos. Posteriormente, quando voc criar um documento baseado nesse modelo e o salvar, todos os links relativos ao documento sero atualizados novamente para continuar a apontar para os arquivos corretos. Ao adicionar um novo link de documento ao arquivo de modelo, voc pode facilmente errar o nome do caminho se o digitar na caixa de texto do link no Inspetor de propriedades. O caminho correto em um arquivo de modelo o caminho da pasta Modelos para o documento vinculado, e no o caminho da pasta do documento baseado em modelo para o documento vinculado. Verifique se os caminhos para os links esto corretos usando o cone de pasta ou o cone Indicar arquivo no Inspetor de propriedades ao criar links em modelos. Preferncia de atualizao de link do Dreamweaver 8.01 Antes do Dreamweaver 8 (ou seja, o Dreamweaver MX 2004 e anterior), o Dreamweaverno atualizava links para arquivos da pasta Modelos. (Por exemplo, se voc tiver um arquivo denominado main.css na pasta Modelos e criar um link href="main.css" no arquivo de modelo, o Dreamweaver no atualizar esse link ao criar uma pgina baseada em modelo.) Alguns usurios tiravam proveito da maneira como o Dreamweaver tratava os links para arquivos na pasta Modelos e usavam essa inconsistncia para criar links que eles no queriam atualizar ao criar pginas baseadas em modelo. Por exemplo, se voc usa o Dreamweaver MX 2004 e tem um site com diferentes pastas para diferentes aplicativos: Dreamweaver, Flash e Photoshop. Cada pasta de produto contm uma pgina index.html baseada em modelo e uma verso exclusiva do arquivo main.css no mesmo nvel. Se o arquivo de modelo contiver o link referente ao documento href="main.css" (um link para uma verso do arquivo main.css na pasta Modelos) e voc quiser que as pginas index.html baseadas em modelo tambm contenham esse link, crie as pginas index.html baseadas em modelo sem se preocupar que o Dreamweaver atualize esses links especficos. Quando o Dreamweaver MX 2004 cria as pginas index.html baseadas em modelo, os links href="main.css" (no atualizados) referem-se aos arquivos main.css existentes nas pastas do Dreamweaver, Flash e Photoshop, e no ao arquivo main.css contido na pasta Modelos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 391


Criao e gerenciamento de modelos

Entretanto, no Dreamweaver 8, esse comportamento foi alterado para que todos os links relativos a documentos sejam atualizados quando pginas baseadas em modelo forem criadas, independentemente do local aparente dos arquivos vinculados. Nessa situao, o Dreamweaver examina o link no arquivo de modelo (href="main.css") e cria um link na pgina baseada em modelo que relacionado ao local do novo documento. Por exemplo, se voc estiver criando um documento baseado em modelo um nvel acima da pasta Modelos, o Dreamweaver gravar o link no novo documento como href="Templates/main.css". Essa atualizao no Dreamweaver 8 quebrou os links em pginas criadas pelos designers que tiraram proveito da prtica anterior do Dreamweaver de no atualizar links para arquivos na pasta Modelos. O Dreamweaver 8.01 incluiu uma preferncia que permite ativar e desativar o comportamento dos links relativos a atualizaes. (Essa preferncia especial aplica-se somente aos links para arquivos na pasta Modelos, e no a links em geral.) O comportamento padro no atualizar esses links (como no Dreamweaver MX 2004 e anterior), mas se voc quiser que o Dreamweaver atualize esses tipos de links ao criar pginas baseadas em modelo, basta desmarcar a preferncia. (Voc s faria isso se, por exemplo, tivesse uma pgina CSS (folhas de estilos em cascata), main.css, na pasta Modelos, e precisasse do link href="Templates/main.css" no documento baseado em modelo. Contudo, essa no uma prtica recomendvel, porque somente os arquivos de modelo (DWT) do Dreamweaver devem estar na pasta Modelos.) Para que o Dreamweaver atualize os caminhos relacionados a documentos para arquivos que no so de modelo da pasta Modelos, selecione a categoria Modelos na caixa de dilogo Configurao de site (que est abaixo de Configuraes avanadas) e desmarque a opo No regravar caminhos relativos a documentos. Para obter mais informaes, consulte o Dreamweaver TechNote no site da Adobe em www.adobe.com/go/f55d8739_br.

Mais tpicos da Ajuda


Vincular documentos usando o cone Apontar para arquivo na pgina 275 Caminhos relativos a documentos na pgina 272

Scripts de servidor em modelos e documentos baseados em modelo


Alguns scripts de servidor so inseridos no incio ou no fim do documento (antes da tag <html> ou aps a tag </html>). Esses scripts exigem tratamento especial em modelos e documentos baseados em modelo. Normalmente, se voc altera o cdigo do script antes da tag <html> ou aps a tag </html> em um modelo, as alteraes no so copiadas para os documentos que se baseiam nesse modelo. Isso pode gerar erros se outros scripts de servidor, dentro do corpo principal do modelo, dependerem dos scripts que no forem copiados. Um alerta avisa se voc alterar scripts antes da tag <html> ou aps a tag </html> em um modelo. Para evitar esse problema, voc pode inserir o seguinte cdigo na seo head do modelo:
<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

Quando esse cdigo est em um modelo, as alteraes em scripts antes da tag <html> ou aps a tag </html> so copiadas para documentos baseados nesse modelo. Contudo, voc no poder mais editar esses scripts em documentos baseados no modelo. Dessa forma, voc pode optar por editar esses scripts no modelo ou em documentos baseados no modelo, mas no em ambos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 392


Criao e gerenciamento de modelos

Parmetros de modelo
Os parmetros de modelo indicam valores para controlar o contedo em documentos baseados em modelo. Use parmetros de modelo para regies opcionais ou atributos de tags editveis ou para definir os valores que voc deseja passar para um documento anexado. Para cada parmetro, voc seleciona um nome, um tipo de dados e um valor padro. Cada parmetro deve ter um nome exclusivo que diferencie maisculas e minsculas. Eles devem ser de um dos cinco tipos de dados permitidos: texto, booleano, cor, URL ou nmero. Os parmetros de modelo so passados para o documento como parmetros de ocorrncia. Na maioria dos casos, o usurio de um modelo pode editar o valor padro do parmetro para personalizar o que exibido no documento baseado em modelo. Em outros casos, o autor do modelo pode determinar o que aparece no documento, de acordo com o valor de uma expresso do modelo. Nota: Um artigo til sobre isso est disponvel on-line em www.adobe.com/devnet/dreamweaver/articles/template_parameters.html.

Mais tpicos da Ajuda


Utilizao de regies opcionais na pgina 404 Definio de atributos de tag editveis na pgina 406

Expresses de modelo
As expresses de modelo so instrues que computam ou avaliam um valor. Voc pode usar uma expresso para armazenar um valor e exibi-lo em um documento. Por exemplo, uma expresso pode ser simples como o valor de um parmetro, como @@(Param)@@, ou complexa o suficiente para computar valores que alternam a cor de fundo em uma linha de tabela, como @@((_index & 1) ? red : blue)@@. Voc tambm pode definir expresses para condies if e if mltiplo. Quando uma expresso usada em uma instruo condicional, o Dreamweaver a avalia como verdadeira ou falsa. Se a condio verdadeira, a regio opcional aparece no documento baseado em modelo; se falsa, ela no aparece. Voc pode definir expresses na visualizao de cdigo ou na caixa de dilogo Regio opcional ao inserir uma regio opcional. Na visualizao de cdigo, h duas formas de definir expresses de modelo: use o comentrio <!-- TemplateExpr
expr="sua expresso"--> comment ou @@(sua expresso)@@. Quando voc insere a expresso no cdigo de

modelo, um marcador de expresso exibido na Visualizao de design. Quando voc aplica o modelo, o Dreamweaver avalia a expresso e exibe o valor no documento baseado em modelo.

Mais tpicos da Ajuda


Linguagem da expresso de modelo na pgina 392 Condio If mltiplo em cdigo de modelo na pgina 394

Linguagem da expresso de modelo


A linguagem da expresso de modelo um pequeno subconjunto de JavaScript e usa regras precedentes e sintaxe JavaScript. Use os operadores JavaScript para desenvolver uma expresso como esta:
@@(firstName+lastName)@@

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 393


Criao e gerenciamento de modelos

Estes recursos e operadores podem ser usados:

literais numricos, seqncias de caracteres literais (somente sintaxe entre aspas duplas), booleanos literais
(verdadeiro ou falso)

referncia de varivel (veja a lista de variveis definidas nesta seo) referncia de campo (operador "dot") operadores unrios: +, -, ~, ! operadores binrios: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >> operador condicional: ?: parnteses: ()
Estes so os tipos de dados usados: booleano, ponto flutuante IEEE 64 bpc, seqncia de caracteres e objeto. Os modelos do Dreamweaver no utilizam os tipos JavaScript nulo ou no definido. Eles tambm no permitem que tipos escalares sejam convertidos implicitamente em um objeto; portanto, a expresso "abc".length acionaria um erro, em vez de gerar o valor 3. Os nicos objetos disponveis so os definidos pelo modelo de objeto de expresso. As seguintes variveis so definidas:
_documento Contm os dados do modelo em nvel de documento com um campo para cada parmetro no

modelo.
_repeat Definido apenas para expresses que aparecem em uma regio repetitiva. Fornece informaes internas sobre a regio _ndice O ndice numrico (a partir de 0) da entrada atual _numRows O nmero total de entradas nesta regio repetitiva _isFirst Verdadeiro se a entrada atual for a primeira entrada na regio repetitiva _isLast Verdadeiro se a entrada atual for a ltima entrada na regio repetitiva _prevRecord O objeto _repeat da entrada anterior. um erro acessar esta propriedade para a primeira entrada na

regio.
_nextRecord O objeto _repeat da prxima entrada. um erro acessar esta propriedade para a ltima entrada na

regio.
_parent Em uma regio repetitiva aninhada, ele informa o objeto _repeat para a regio repetitiva externa. um erro acessar esta propriedade fora de uma regio repetitiva aninhada.

Durante a avaliao da expresso, todos os campos dos objetos _document e _repeat esto implicitamente disponveis. Por exemplo, voc pode inserir title em vez de _document.title para acessar o parmetro de ttulo do documento. Em casos nos quais h conflito de campo, os campos do objeto _repeat tm prioridade em relao aos campos do objeto _document. Portanto, no h necessidade de mencionar explicitamente _document ou _repeat, a no ser que _document seja necessrio em uma regio repetitiva para fazer referncia aos parmetros de documento que so ocultos por parmetros de regio repetitiva. Quando regies repetitivas aninhadas so usadas, somente os campos das regies repetitivas mais internas esto implicitamente disponveis. As regies externas devem ser referenciadas explicitamente com _parent.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 394


Criao e gerenciamento de modelos

Condio If mltiplo em cdigo de modelo


Voc pode definir expresses de modelo para condies if e if mltiplo. Este exemplo demonstra como definir um parmetro denominado "Dept", como configurar um valor inicial e como definir uma condio if mltiplo que determina a exibio de determinado logotipo. Este um exemplo do cdigo a ser inserido na seo head do modelo:
<!-- TemplateParam name="Dept" type="number" value="1" -->

A instruo de condio a seguir verifica o valor atribudo ao parmetro Dept. Quando a condio verdadeira ou correspondente, a imagem apropriada exibida.
<!-- TemplateBeginMultipleIf --> <!-- checks value of Dept and shows appropriate <!-- TemplateBeginIfClause cond="Dept == 1" --> TemplateEndIfClause --> <!-- TemplateBeginIfClause cond="Dept == 2" --> TemplateEndIfClause--> <!-- TemplateBeginIfClause cond="Dept == 3" --> TemplateEndIfClause --> <!-- TemplateBeginIfClause cond="Dept != 3" --> TemplateEndIfClause --> <!-- TemplateEndMultipleIf --> image--> <img src=".../sales.gif"> <!-<img src=".../support.gif"> <!-<img src=".../hr.gif"> <!-<img src=".../spacer.gif"> <!--

Quando voc cria um documento baseado em modelo, os parmetros de modelo so passados para o documento automaticamente. O usurio do modelo determina qual imagem ser exibida.

Mais tpicos da Ajuda


Modificar propriedades de modelo na pgina 417

Reconhecimento de modelos e documentos baseados em modelo


Reconhecimento de modelos na Visualizao de design
Na visualizao de design, as regies editveis aparecem na janela Documento entre contornos retangulares com uma cor de realce predefinida. Uma pequena aba aparece no canto superior esquerdo de cada regio, indicando o nome da regio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 395


Criao e gerenciamento de modelos

Para identificar um arquivo de modelo, verifique a barra de ttulo na janela Documento. A barra de ttulo de um arquivo de modelo contm a palavra <<Modelo>> e a extenso do nome de arquivo .dwt.

Reconhecimento de modelos na visualizao de cdigo


Na Visualizao de cdigo, as regies de contedo editvel so marcadas em HTML com os seguintes comentrios:
<!-- TemplateBeginEditable> and <!-- TemplateEndEditable -->

Voc pode usar preferncias de cor de cdigo para definir seu prprio esquema de cores de forma a diferenciar facilmente as regies do modelo quando exibir um documento na Visualizao de cdigo. Tudo o que estiver entre esses comentrios ser editvel nos documentos baseados no modelo. O cdigo de origem HTML de uma regio editvel deve ser assim:
<table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366"> <td>Name</td> <td><font color="#FFFFFF">Address</font></td> <td><font color="#FFFFFF">Telephone Number</font></td> </tr> <!-- TemplateBeginEditable name="LocationList" --> <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- TemplateEndEditable --> </table>

Nota: Ao editar o cdigo do modelo na visualizao de cdigo, tenha cuidado para no alterar as tags de comentrio relacionadas ao modelo que o Dreamweaver utiliza.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 396


Criao e gerenciamento de modelos

Mais tpicos da Ajuda


Personalizao das preferncias de codificao por cor de um modelo na pgina 421

Reconhecimento de documentos baseados em modelo na Visualizao de design


Em um documento baseado em modelo, as regies editveis aparecem na Visualizao de design da janela Documento circundadas por contornos retangulares em uma cor de realce predefinida. Uma pequena aba aparece no canto superior esquerdo de cada regio, indicando o nome da regio. Alm dos contornos de regies editveis, a pgina inteira tem um contorno em outra cor, com uma aba no canto superior direito que exibe o nome do modelo do documento. Esse retngulo realado informa que o documento baseia-se em um modelo e que possvel alterar o contedo fora das regies editveis.

Mais tpicos da Ajuda


Definir preferncias de realce para regies de modelo na pgina 421

Reconhecimento de documentos baseados em modelo na visualizao de cdigo


Na visualizao de cdigo, as regies editveis de um documento derivadas de um modelo aparecem em uma cor diferente da do cdigo nas regies no editveis. Voc pode efetuar alteraes somente no cdigo nas regies editveis ou nos parmetros editveis, e no pode digitar nas regies bloqueadas. O contedo editvel marcado em HTML com os seguintes Dreamweaver comentrios:
<!-- InstanceBeginEditable> and <!-- InstanceEndEditable -->

Tudo o que est entre esses comentrios editvel em um documento baseado em modelo. O cdigo de origem HTML de uma regio editvel deve ser assim:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 397


Criao e gerenciamento de modelos

<body bgcolor="#FFFFFF" leftmargin="0"> <table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366"> <td>Name</td> <td><font color="#FFFFFF">Address</font></td> <td><font color="#FFFFFF">Telephone Number</font></td> </tr> <!-- InstanceBeginEditable name="LocationList" --> <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- InstanceEndEditable --> </table> </body>

A cor padro de um texto no editvel cinza. Voc pode selecionar outra cor para as regies editveis e no editveis na caixa de dilogo Preferncias.

Mais tpicos da Ajuda


Personalizao das preferncias de codificao por cor de um modelo na pgina 421

Criao de um modelo do Dreamweaver


Sobre a criao de modelos do Dreamweaver
Voc pode criar um modelo a partir de um documento j existente (como um documento HTML, Adobe ColdFusion ou Microsoft Active Server Pages) ou pode criar um modelo a partir de um documento novo. Depois de criar um modelo, voc pode inserir regies e definir preferncias para a cor de cdigo e a cor de realce de regio de modelo. Voc pode armazenar informaes adicionais sobre um modelo (como quem o criou, quando ele foi alterado pela ltima vez ou por que voc optou por certos layouts) em um arquivo do Design Notes do modelo. Documentos baseados em modelo no herdam as Design Notes do modelo. Nota: Os modelos do Adobe Dreamweaver diferem dos modelos de alguns outros softwares do Adobe Creative Suite, pois as sees de pgina dos modelos do Dreamweaver so fixas (no podem ser editadas) por padro. Para obter um tutorial sobre a criao de modelos, consulte www.adobe.com/go/vid0157_br. Para obter um tutorial sobre a utilizao de modelos, consulte www.adobe.com/go/vid0158_br.

Mais tpicos da Ajuda


Tipos de regies de modelo na pgina 389 Configurao de preferncias de criao para os modelos na pgina 421 Associar Design Notes a arquivos na pgina 104 Criao de tutorial sobre modelos Uso de tutorial sobre modelos

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 398


Criao e gerenciamento de modelos

Criar um modelo a partir de um documento existente


Voc pode criar um modelo a partir de um documento existente.
1 Abra o documento que voc deseja salvar como modelo. 2 Siga um destes procedimentos:

Selecione Arquivo > Salvar como modelo. Na categoria Comum do painel Inserir, clique no boto Modelos e selecione Criar modelo, no menu pop-up.
Nota: A menos que voc selecione No mostrar esta caixa de dilogo novamente, receber um aviso que informa que o documento que voc est salvando no tem regies editveis. Clique em OK para salvar o documento como um modelo ou clique em Cancelar para sair desta caixa de dilogo sem criar um modelo.
3 Selecione um site no qual o modelo ser salvo no menu pop-up Site e insira um nome exclusivo para o modelo na

caixa Salvar como.


4 Clique em Salvar. O Dreamweaver salva o arquivo de modelo na pasta Modelos do site, na pasta raiz local do site,

com uma extenso .dwt. Se a pasta Modelos ainda no existir no site, o Dreamweaver a criar automaticamente quando voc salvar o novo modelo. Nota: No retire os modelos da pasta Modelos, nem coloque arquivos que no so de modelo nessa pasta. Tambm no transfira a pasta Modelos para fora da pasta raiz local. Esse procedimento poder causar erros nos caminhos dos modelos.

Mais tpicos da Ajuda


Criar um modelo em branco na pgina 62 Criao e abertura de documentos na pgina 59

Usar o painel Ativos para criar um novo modelo


1 No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel 2 Clique no boto Novo Modelo

na parte inferior do painel Ativos.

Um modelo novo e sem ttulo ser adicionado lista de modelos no painel Ativos.
3 Com o modelo selecionado, insira um nome para esse modelo e pressione Enter (Windows) ou Return

(Macintosh). O Dreamweaver cria um modelo em branco no painel Ativos e na pasta Modelos.

Sobre a criao de modelos para sites do Contribute


Usando o Dreamweaver, voc pode criar modelos para ajudar os usurios do Adobe Contribute a criar novas pginas, a garantir uma aparncia consistente ao respectivo site e a permitir a atualizao simultnea do layout de vrias pginas. Depois que voc cria um modelo e faz o seu upload no servidor, ele fica disponvel para todos os usurios do Contribute que se conectam ao seu site, a menos que voc tenha definido restries que limitem o uso do modelo a certas funes do Contribute. Se voc definiu restries para o uso do modelo, convm adicionar cada modelo novo lista de modelos que o usurio do Contribute pode utilizar (consulte Administrao do Contribute). Nota: Certifique-se de que a pasta raiz do site estabelecida na definio de sites de cada usurio do Contribute seja igual pasta raiz do site estabelecida em sua definio de sites no Dreamweaver. Se a pasta raiz do site de um usurio no corresponder sua, esse usurio no poder utilizar modelos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 399


Criao e gerenciamento de modelos

Alm dos modelos do Dreamweaver, voc pode criar modelos que no so do Dreamweaver usando as ferramentas de administrao do Contribute. Um modelo que no seja do Dreamweaver uma pgina j existente que os usurios do Contribute podem utilizar para criar novas pginas; ele assemelha-se a um modelo do Dreamweaver, exceto pelo fato de que as pginas que nele se baseiam no so atualizadas quando voc o altera. Alm disso, os modelos que no so do Dreamweaver no podem conter elementos de modelo do Dreamweaver, como regies editveis, bloqueadas, repetitivas e opcionais. Quando um usurio do Contribute cria um novo documento em um site que contm modelos do Dreamweaver, o Contribute lista os modelos disponveis (modelos do Dreamweaver e modelos que no so do Dreamweaver) na caixa de dilogo Nova pgina.

Para incluir pginas que usam codificaes diferentes de Latin-1 em seu site, pode ser necessrio criar modelos (sejam modelos Dreamweaver ou noDreamweaver). Os usurios do Contribute podem editar pginas que usam qualquer codificao, mas quando criarem uma nova pgina em branco, o programa utilizar a codificao Latin-1. Para criar uma pgina que utiliza outra codificao, o usurio do Contribute pode criar uma cpia de uma pgina existente que utilize outra codificao ou usar um modelo que utilize outra codificao. Contudo, se no houver pginas ou modelos no site que utilizem outras codificaes, primeiro crie uma pgina ou um modelo no Dreamweaver que utilize essa outra codificao.

Criar um modelo para um site do Contribute


1 Selecione Site > Gerenciar sites. 2 Selecione um site e clique em Editar. 3 Na caixa de dilogo Configurao de site, selecione a categoria Contribute. 4 Caso ainda no o tenha feito, voc precisar ativar a compatibilidade do Contribute.

Selecione Ativar compatibilidade do Contribute e insira um URL raiz do site.


5 Clique em Administrar site do Contribute. 6 Se solicitado, insira a senha de administrador e clique em OK. 7 Na categoria Usurios e funes, selecione uma funo e clique no boto Editar configuraes de funo. 8 Selecione a categoria Novas pginas e adicione as pginas existentes lista em Criar uma pgina nova copiando uma

pgina desta lista.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 400


Criao e gerenciamento de modelos

Para obter mais informaes, consulte Administrao do Contribute.


9 Clique duas vezes em OK para fechar as caixas de dilogo.

Mais tpicos da Ajuda


Preparar um site para usar com o Contribute na pgina 54

Criao de regies editveis


Inserir uma regio editvel
As regies editveis do modelo controlam quais reas de uma pgina baseada em modelo o usurio pode editar. Antes de inserir uma regio editvel, salve o documento no qual voc est trabalhando como um modelo. Nota: Se voc inserir uma regio editvel em um documento, e no em um arquivo de modelo, receber um alerta de que o documento ser automaticamente salvo como um modelo. Voc pode posicionar a regio editvel em qualquer local da pgina, mas considere os seguintes pontos caso esteja criando uma tabela ou um elemento de posicionamento absoluto (elemento PA) editvel:

Voc pode marcar uma tabela inteira ou uma clula especfica da tabela como editvel, mas no pode marcar vrias
clulas da tabela como uma nica regio editvel. Se uma tag <td> estiver selecionada, a regio editvel incluir a regio ao redor da clula; caso contrrio, a regio editvel afetar somente o contedo dentro da clula.

Os elementos PA e o contedo dos elementos PA so itens separados. Ao tornar um elemento PA editvel, voc
altera a posio do elemento PA, bem como a de seu contedo. Entretanto, ao tornar o contedo de um elemento PA editvel, voc pode alterar somente o contedo do elemento PA, e no sua posio.
1 Na janela Documento, proceda de uma das seguintes maneiras para selecionar a regio:

Selecione o texto ou o contedo que voc deseja definir como uma regio editvel. Posicione o ponto de insero onde voc pretende inserir uma regio editvel.
2 Proceda de uma das seguintes maneiras para inserir uma regio editvel:

Selecione Inserir > Objetos de modelo > Regio editvel. Clique com o boto direito do mouse (Windows) ou Control-clique (Macintosh) e selecione Modelos > Nova
regio editvel.

Na categoria Comum do painel Inserir, clique no boto Modelos e selecione Regio editvel, no menu pop-up.
3 Na caixa de texto Nome, insira um nome exclusivo para a regio. (No possvel usar o mesmo nome para mais de

uma regio editvel em determinado modelo.) Nota: No use caracteres especiais na caixa Nome.
4 Clique em OK. A regio editvel fica dentro de um retngulo realado no modelo, cuja cor de realce definida nas

preferncias. Uma aba no canto superior esquerdo indica o nome da regio. Se voc inserir uma regio editvel vazia no documento, o nome da regio tambm aparecer dentro da regio.

Mais tpicos da Ajuda


Criao de um modelo do Dreamweaver na pgina 397 Definir preferncias de realce para regies de modelo na pgina 421

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 401


Criao e gerenciamento de modelos

Selecionar regies editveis


Voc pode facilmente identificar e selecionar regies no documento de modelo e nos documentos baseados em modelo.

Selecionar uma regio editvel na janela Documento


Clique na aba no canto superior esquerdo da regio editvel.

Localizar uma regio editvel e selecion-la no documento


Selecione Modificar > Modelos e selecione o nome da regio na lista na parte inferior desse submenu.

Nota: As regies editveis que esto dentro de uma regio repetitiva no aparecem no menu. Para localizar essas regies, procure as bordas com aba na janela Documento. A regio editvel est selecionada no documento.

Remover uma regio editvel


Se voc marcou uma regio do arquivo de modelo como editvel e deseja bloque-la (torn-la no editvel em documentos baseados em modelo) novamente, use o comando Remover markup do modelo.
1 Clique na aba no canto superior esquerdo da regio editvel para selecion-la. 2 Siga um destes procedimentos:

Selecione Modificar > Modelos > Remover markup do modelo. Clique com o boto direito do mouse (Windows) ou Control-clique (Macintosh) e selecione Modelos > Remover
markup do modelo. A regio no poder mais ser editada.

Alterar o nome de uma regio editvel


Depois de inserir uma regio editvel, voc no poder mais alterar seu nome.
1 Clique na aba no canto superior esquerdo da regio editvel para selecion-la. 2 No Inspetor de propriedades (Janela > Propriedades), insira um novo nome. 3 Pressione Enter (Windows) ou Return (Macintosh).

Criao de regies repetitivas


Sobre regies repetitivas do modelo
Uma regio repetitiva uma seo do modelo que pode ser duplicada inmeras vezes em uma pgina baseada em modelo. Normalmente, as regies repetitivas so usadas com tabelas mas possvel definir uma regio repetitiva para outros elementos da pgina. As regies repetitivas permitem que voc controle o layout da pgina por meio da repetio de certos itens, como um item de catlogo e um layout de descrio, ou uma linha de dados como uma lista de itens. Voc pode usar dois objetos de modelo de regio repetitiva: regio repetitiva e tabela repetitiva.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 402


Criao e gerenciamento de modelos

Mais tpicos da Ajuda


Tipos de regies de modelo na pgina 389

Criar uma regio repetitiva em um modelo


As regies repetitivas permitem que os usurios do modelo dupliquem uma regio especfica de um modelo o quanto desejarem. Uma regio repetitiva no necessariamente uma regio editvel. Para criar contedo em uma regio repetitiva editvel (por exemplo, permitir que um usurio insira texto em uma clula da tabela do documento baseado em modelo), preciso inserir uma regio editvel na regio repetitiva.
1 Na janela Documento, siga um destes procedimentos:

Selecione o texto ou o contedo que voc deseja definir como uma regio repetitiva. Posicione o ponto de insero no documento onde voc deseja inserir a regio repetitiva.
2 Siga um destes procedimentos:

Selecione Inserir > Objetos de modelo > Regio repetitiva. Clique com o boto direito do mouse (Windows) ou Control-clique (Macintosh) e selecione Modelos > Nova
regio repetitiva.

Na categoria Comum do painel Inserir, clique no boto Modelos e selecione Regio repetitiva no menu pop-up.
3 Na caixa Nome, insira um nome exclusivo para a regio do modelo. (No possvel usar o mesmo nome para mais

de uma regio repetitiva em um modelo.) Nota: Ao nomear uma regio, no use caracteres especiais.
4 Clique em OK.

Mais tpicos da Ajuda


Inserir uma regio editvel na pgina 400

Inserir uma tabela repetitiva


Voc pode usar uma tabela repetitiva para criar uma regio editvel (em formato de tabela) com linhas repetitivas. Voc pode definir atributos de tabela e determinar quais clulas so editveis.
1 Na janela Documento, posicione o ponto de insero onde a tabela repetitiva deve ser includa no documento. 2 Siga um destes procedimentos:

Selecione Inserir > Objetos de modelo > Tabela repetitiva. Na categoria Comum do painel Inserir, clique no boto Modelos e selecione Tabela repetitiva, no menu pop-up.
3 Especifique as opes a seguir e clique em OK.
Linhas Determina o nmero de linhas da tabela. Colunas determina o nmero de colunas da tabela. Preenchimento da clula determina o nmero de pixels entre o contedo e os limites da clula. Espaamento da clula Determina o nmero de pixels entre as clulas de tabela adjacentes.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 403


Criao e gerenciamento de modelos

Se voc no atribuir valores explicitamente para o preenchimento e o espaamento da clula, a maioria dos navegadores exibir a tabela como se o preenchimento da clula estivesse definido como 1 e o espaamento como 2. Para garantir que os navegadores exibiro a tabela sem preenchimento ou espaamento, defina Preenchimento da clula e Espaamento da clula como 0.
Largura Especifica a largura da tabela em pixels ou como porcentagem da largura da janela do navegador. Borda Especifica a largura, em pixels, das bordas da tabela.

Se voc no atribuir explicitamente um valor de borda, a maioria dos navegadores exibir a tabela como se a borda estivesse definida como 1. Para que os navegadores exibam a tabela sem bordas, defina Borda como 0. Para visualizar os limites da clula e da tabela quando a borda estiver definida como 0, selecione Exibir > Auxlios visuais > Bordas da tabela.
Repetir linhas da tabela Especifica as linhas da tabela que sero includas na regio repetitiva. Linha inicial Define o nmero especificado como a primeira linha a ser includa na regio repetitiva. Linha final Define o nmero especificado como a ltima linha a ser includa na regio repetitiva. Nome da regio Permite definir um nome exclusivo para a regio repetitiva.

Definir cores de fundo alternadas em uma tabela repetitiva


Aps inserir uma tabela repetitiva em um modelo, voc pode personaliz-la alternando a cor de fundo das linhas da tabela.
1 Na janela Documento, selecione uma linha na tabela repetitiva. 2 Clique no boto Mostrar visualizao de cdigo ou Mostrar visualizao de design na barra de ferramentas

Documento para acessar o cdigo da linha de tabela selecionada.


3 Na visualizao de cdigo, edite a tag <tr> para incluir o seguinte cdigo:
<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">

Voc pode substituir os valores hexadecimais #FFFFFF e #CCCCCC por outras opes de cor.
4 Salve o modelo.

Este um exemplo de cdigo de uma tabela que inclui cores de linha de fundo alternadas:
<table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr> <!-- TemplateBeginRepeat name="contacts" --> <tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@"> <td> <!-- TemplateBeginEditable name="name" --> name <!-- TemplateEndEditable --> </td> <td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable --> </td> <td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable --> </td> </tr> <!-- TemplateEndRepeat --> </table>

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 404


Criao e gerenciamento de modelos

Utilizao de regies opcionais


Sobre as regies opcionais do modelo
Uma regio opcional uma regio em um modelo que os usurios podem definir para que seja exibida ou oculta em um documento baseado em modelo. Use uma regio opcional quando quiser definir condies para a exibio de contedo em um documento. Ao inserir uma regio opcional, voc pode definir valores especficos para um parmetro de modelo ou definir instrues condicionais (instrues If...else) para regies do modelo. Use operaes verdadeiro/falso simples ou defina expresses e instrues condicionais mais complexas. Posteriormente, voc poder modificar a regio opcional, caso seja necessrio. De acordo com as condies que voc definir, os usurios do modelo podem editar os parmetros em documentos baseados em modelo e controlar se a regio opcional exibida. Voc pode vincular vrias regies opcionais a um determinado parmetro. No documento baseado em modelo, as duas regies sero exibidas ou ocultas como uma unidade. Por exemplo, voc pode exibir uma imagem "fechada" e uma rea de texto com o preo de venda de um item.

Mais tpicos da Ajuda


Modificar propriedades de modelo na pgina 417 Tipos de regies de modelo na pgina 389

Inserir uma regio opcional


Use uma regio opcional para controlar o contedo que pode ou no ser exibido em um documento baseado em modelo. Existem dois tipos de regies opcionais:

Regies opcionais no editveis, que permitem aos usurios do modelo mostrar e ocultar regies marcadas sem
ativ-las para a edio do contedo. A aba do modelo de uma regio opcional precedida da palavra if. Com base na condio definida no modelo, o usurio pode definir se possvel visualizar a regio nas pginas que ele cria.

Regies opcionais editveis, que permitem aos usurios do modelo definir se a regio ser exibida ou no, e lhes
permite editar contedo na regio. Por exemplo, se a regio opcional inclui uma imagem ou um texto, o usurio do modelo pode definir se o contedo ser exibido, bem como editar o contedo se assim desejar. Uma regio editvel controlada por uma instruo condicional.

Mais tpicos da Ajuda


Modificar propriedades de modelo na pgina 417

Inserir uma regio opcional no editvel


1 Na janela Documento, selecione o elemento a ser definido como uma regio opcional. 2 Siga um destes procedimentos:

Selecione Inserir > Objetos de modelo > Regio opcional. Clique com o boto direito do mouse (Windows) ou Control-clique (Macintosh) sobre o contedo selecionado e
selecione Modelos > Nova regio opcional.

Na categoria Comum do painel Inserir, clique no boto Modelos e selecione Regio opcional, no menu pop-up.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 405


Criao e gerenciamento de modelos

3 Insira um nome para a regio opcional, clique na aba Avanado se quiser definir valores para a regio opcional e

clique em OK.

Inserir uma regio editvel opcional


1 Na janela Documento, posicione o ponto de insero onde deseja inserir a regio opcional.

No possvel quebrar o texto de uma seleo para criar uma regio editvel opcional. Insira a regio e, em seguida, insira o contedo na regio.
2 Siga um destes procedimentos:

Selecione Inserir > Objetos de modelo > Regio opcional editvel. Na categoria Comum do painel Inserir, clique no boto Modelos e selecione Regio opcional editvel, no menu
pop-up.
3 Insira um nome para a regio opcional, clique na aba Avanado se quiser definir valores para a regio opcional e

clique em OK.

Definir valores para uma regio opcional


Voc pode editar as configuraes da regio opcional depois de inserir a regio em um modelo. Por exemplo, voc pode alterar se a configurao padro para o contedo deve ser exibida ou no, vincular um parmetro a uma regio opcional existente ou modificar uma expresso de modelo. Crie parmetros de modelo e defina instrues condicionais (instrues If... else) para regies de modelo. Voc pode usar operaes verdadeiro/falso simples ou definir expresses e instrues condicionais mais complexas. Na aba Avanado, voc pode vincular vrias regies opcionais a determinado parmetro. No documento baseado em modelo, as duas regies sero exibidas ou ocultas como uma unidade. Por exemplo, voc pode exibir uma imagem "fechada" e uma rea de texto com o preo de venda de um item. Voc tambm pode usar a aba Avanado para gravar uma expresso de modelo que avalie um valor para a regio opcional que a exibir ou ocultar.
1 Na janela Documento, siga um destes procedimentos:

Na Visualizao de design, clique na aba de modelo da regio opcional que voc deseja modificar. Na Visualizao de design, posicione o ponto de insero na regio de modelo; em seguida, no seletor de tag, na
parte inferior da janela Documento, selecione a tag de modelo<mmtemplate:if>.

Na visualizao de cdigo, clique na aba de comentrio da regio de modelo que voc deseja modificar.
2 No Inspetor de propriedades (Janela > Propriedades), clique em Editar. 3 Na aba Bsica, insira um nome para o parmetro na caixa Nome. 4 Selecione Mostrar por padro para definir a regio selecionada a ser exibida no documento. Desmarque-a para

definir o valor padro como falso. Nota: Para definir outro valor para o parmetro, na visualizao de cdigo, localize o parmetro na seo do documento e edite o valor.
5 (Opcional) Clique na aba Avanado e defina as seguintes opes:

Se voc quiser vincular parmetros de regies opcionais, clique na aba Avanado, selecione Usar parmetro e, no
menu pop-up, selecione o parmetro existente que voc deseja vincular ao contedo selecionado.

Para gravar uma expresso de modelo a fim de controlar a exibio de uma regio opcional, clique na aba
Avanado, selecione Inserir expresso e informe a expresso na caixa.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 406


Criao e gerenciamento de modelos

Nota: O Dreamweaver insere marcas de aspas duplas em torno do texto inserido.


6 Clique em OK.

Quando voc usa o objeto de modelo Regio opcional, o Dreamweaver insere comentrios de modelo no cdigo. Um parmetro de modelo definido na seo head, como no seguinte exemplo:
<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->

No local em que a regio opcional inserida, um cdigo semelhante a este exibido:


<!-- TemplateBeginIf cond="departmentImage" --> <p><img src="/images/airfare_on.gif" width="85" height="22"> </p> <!-- TemplateEndIf -->

Voc pode acessar e editar parmetros de modelo no documento baseado em modelo.

Mais tpicos da Ajuda


Modificar propriedades de modelo na pgina 417 Expresses de modelo na pgina 392

Definio de atributos de tag editveis


Especificar atributos de tag editveis em um modelo
Voc pode permitir que um usurio do modelo modifique atributos de tag especficos em um documento criado com um modelo. Por exemplo, voc pode definir uma cor de fundo no documento de modelo e permitir que os usurios definam outra cor de fundo para as pginas que eles criarem. Os usurios s podem atualizar os atributos especificados como editveis. Voc tambm pode definir vrios atributos editveis em uma pgina para que os usurios do modelo possam modificar os atributos nos documentos baseados em modelo. Estes so os tipos de dados aceitos: texto, booleano (verdadeiro/falso), cor e URL. A criao de um atributo de tag editvel insere um parmetro de modelo no cdigo. Um valor inicial para o atributo definido no documento de modelo; quando um documento baseado em modelo criado, ele herda o parmetro. Um usurio de modelo poder, em seguida, editar o parmetro no documento baseado em modelo. Nota: Se voc vincular um atributo editvel a uma folha de estilos, os atributos da folha de estilos no ficaro mais disponveis para visualizao ou edio no arquivo de modelo.
1 Na janela Documento, selecione um item para o qual voc deseja definir um atributo de tag editvel. 2 Selecione Modificar > Modelos > Tornar atributo editvel. 3 Na caixa Atributo, insira um nome ou selecione um atributo na caixa de dilogo Atributos de tag editveis de uma

das seguintes maneiras:

Se o atributo que ficar editvel constar do menu pop-up Atributo, selecione-o. Se o atributo que ficar editvel no estiver no menu pop-up Atributo, clique em Adicionar e, na caixa de dilogo
exibida, insira o nome do atributo a ser adicionado e clique em OK.
4 Certifique-se de que a opo Tornar atributo editvel esteja selecionada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 407


Criao e gerenciamento de modelos

5 Na caixa Rtulo, insira um nome exclusivo para o atributo.

Para facilitar a identificao posterior de determinado atributo de tag editvel, use um rtulo que identifique o elemento e o atributo. Por exemplo, voc pode rotular como logoSrc uma imagem cuja origem seja editvel ou rotular a cor de fundo editvel de uma tag de corpo como bodyBgcolor.
6 No menu Tipo, selecione o tipo de valor permitido para este atributo definindo uma das seguintes opes:

Para que um usurio insira um valor de texto para o atributo, selecione Texto. Por exemplo, voc pode usar texto
com o atributo align; em seguida, o usurio pode definir o valor do atributo como left, right ou center.

Para inserir um link em um elemento, como um caminho de arquivo at uma imagem, selecione URL. O uso dessa
opo atualiza automaticamente o caminho usado em um link. Se o usurio mover a imagem para uma nova pasta, a caixa de dilogo Atualizar links ser exibida.

Para ter o seletor de cores disponvel para escolher um valor, marque Cor. Para ativar um usurio a fim de selecionar um valor de verdadeiro ou falso na pgina, selecione Verdadeiro/falso. Para permitir que o usurio do modelo digite um valor numrico para atualizar um atributo (por exemplo, para
alterar os valores de altura ou de largura de uma imagem), selecione Nmero.
7 A caixa Valor padro exibe o valor do atributo de tag selecionado no modelo. Insira um novo valor nessa caixa para

definir outro valor inicial para o parmetro no documento baseado em modelo.


8 (Opcional) Se voc quiser efetuar alteraes em outro atributo da tag selecionada, marque o atributo e defina as

opes desse atributo.


9 Clique em OK.

Mais tpicos da Ajuda


Modificar propriedades de modelo na pgina 417

Tornar no editvel um atributo de tag editvel


Uma tag anteriormente marcada como editvel pode ser marcada como no editvel.
1 No documento de modelo, clique no elemento associado ao atributo editvel ou use o seletor para selecionar a tag. 2 Selecione Modificar > Modelos > Tornar atributo editvel. 3 No menu pop-up Atributos, selecione o atributo que ser afetado. 4 Desmarque Tornar atributo editvel e clique em OK. 5 Atualize os documentos baseados no modelo.

Criao de um modelo aninhado


Sobre modelos aninhados
Um modelo aninhado um modelo cujo design e regies editveis baseiam-se em outro modelo. Os modelos aninhados so teis para controlar o contedo em pginas de um site que tenham muitos elementos de design em comum, mas algumas variaes entre as pginas. Por exemplo, um modelo base pode conter reas de design mais abrangentes a serem usadas por muitos contribuidores de contedo de um site, ao passo que um modelo aninhado pode definir melhor as regies editveis das pginas de uma seo especfica de um site.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 408


Criao e gerenciamento de modelos

As regies editveis de um modelo base so passadas para o modelo aninhado e permanecem editveis nas pginas criadas a partir de um modelo aninhado, a no ser que novas regies de modelo sejam inseridas nessas regies. As alteraes realizadas em um modelo base so automaticamente atualizadas em modelos que utilizam o modelo base e em todos os documentos baseados em modelos que utilizam os modelos principal e aninhado. No seguinte exemplo, o modelo trioHome contm trs regies editveis, denominadas Body, NavBar e Footer:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 409


Criao e gerenciamento de modelos

Para criar um modelo aninhado, um novo documento com base no modelo foi criado e, em seguida, salvo como um modelo e denominado TrioNested. No modelo aninhado, duas regies editveis foram adicionadas regio editvel denominada Body.

Quando voc adiciona uma nova regio editvel a uma regio editvel passada para o modelo aninhado, a cor de realce da regio editvel muda para laranja. O contedo adicionado fora da regio editvel, como o grfico na editableColumn, no poder mais ser editado em documentos baseados no modelo aninhado. As reas editveis com realce azul, independentemente de terem sido adicionadas ao modelo aninhado ou de serem provenientes do modelo base, permanecem editveis em documentos que se baseiam no modelo aninhado. As regies de modelo no contm uma regio editvel passada para os documentos baseados em modelo como regies editveis.

Criar um modelo aninhado


Os modelos aninhados permitem que voc crie variaes de um modelo base. Voc pode aninhar diversos modelos para definir layouts cada vez mais especficos. Por padro, todas as regies editveis do modelo base passam do modelo aninhado para o documento baseado nesse modelo aninhado. Isso significa que se voc criar uma regio editvel em um modelo base e, em seguida, criar um modelo aninhado, a regio editvel aparecer em documentos baseados no modelo aninhado (se voc no inseriu novas regies de modelo nessa regio do modelo aninhado).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 410


Criao e gerenciamento de modelos

Nota: possvel inserir markup de modelo dentro de uma regio editvel para que ela no passe como uma regio editvel em documentos baseados no modelo aninhado. Essas regies tm uma borda laranja em vez de azul.
1 Para criar um documento a partir do modelo no qual voc deseja basear o modelo aninhado, siga um destes

procedimentos:

Na categoria Modelos do painel Ativos, clique com o boto direito do mouse (Windows) ou Control-clique
(Macintosh) no modelo com o qual voc deseja criar um novo documento e selecione Novo a partir de modelo no menu de contexto.

Selecione Arquivo > Novo. Na caixa de dilogo Novo documento, selecione a categoria Pgina de modelo e
selecione o site que contm o modelo a ser usado. Na lista Modelo, clique duas vezes no modelo para criar um novo documento.
2 Selecione Arquivo > Salvar como modelo para salvar o novo documento como um modelo aninhado: 3 Insira um nome na caixa Salvar como e clique em OK.

Mais tpicos da Ajuda


Scripts de servidor em modelos e documentos baseados em modelo na pgina 391

Evitar que uma regio editvel passe para um modelo aninhado


Nos modelos aninhados, as regies editveis de passagem tm uma borda azul. possvel inserir markup de modelo dentro de uma regio editvel para que ela no passe como uma regio editvel em documentos baseados no modelo aninhado. Essas regies tm uma borda laranja em vez de azul.
1 Na visualizao de cdigo, localize a regio editvel que no deve ser passada.

As regies editveis so definidas por tags de comentrio de modelo.


2 Acrescente o seguinte cdigo ao cdigo da regio editvel:
@@("")@@

Este cdigo de modelo pode ser colocado em qualquer lugar dentro de <!-- InstanceBeginEditable --><!As tags -- InstanceEndEditable --> que rodeiam a regio editvel. Por exemplo:
<!-- InstanceBeginEditable name="EditRegion1" --> <p>@@("")@@ Editable 1 </p> <!-- InstanceEndEditable -->

Para obter mais informaes, consulte o TechNote 16416 no site da Adobe em www.adobe.com/go/16416_br.

Edio, atualizao e excluso de modelos


Sobre a edio e a atualizao de modelos
Quando voc efetua alteraes e salva um modelo, todos os documentos baseados no modelo so atualizados. Voc tambm pode atualizar manualmente um documento baseado em modelo ou o site inteiro, caso isso seja necessrio. Nota: Para editar um modelo para um site do Contribute, use o Dreamweaver; no possvel editar modelos no Contribute. Use a categoria Modelos do painel Ativos para gerenciar modelos existentes, inclusive renomear e excluir arquivos de modelo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 411


Criao e gerenciamento de modelos

Voc pode executar estas tarefas de gerenciamento de modelo com o painel Ativos:

Criar um modelo Editar e atualizar modelos Aplicar ou remover um modelo em um documento


O Dreamweaver verifica a sintaxe do modelo ao salv-lo. No recomendvel verificar manualmente a sintaxe durante a edio do modelo.

Mais tpicos da Ajuda


Criao de um modelo do Dreamweaver na pgina 397 Verificar sintaxe de modelo na pgina 420 Aplicao ou remoo de um modelo em um documento na pgina 415

Abrir um modelo para edio


Voc pode abrir um arquivo de modelo diretamente para edio ou abrir um documento baseado em modelo e, em seguida, abrir o modelo anexado para edio. Quando voc realiza uma alterao em um modelo, o Dreamweaver solicita que voc atualize os documentos baseados no modelo. Nota: Voc tambm pode atualizar manualmente os documentos para refletir as alteraes do modelo, caso isso seja necessrio.

Mais tpicos da Ajuda


Verificar sintaxe de modelo na pgina 420

Abrir e editar um arquivo de modelo


1 No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel

O painel Ativos lista todos os modelos disponveis para o site e exibe uma visualizao do modelo selecionado.
2 Na lista de modelos disponveis, siga um destes procedimentos:

Clique duas vezes no nome do modelo a ser editado. Selecione um modelo para edio e clique no boto Editar
3 Modifique o contedo do modelo.

na parte inferior do painel Ativos.

Para modificar as propriedades de pgina do modelo, selecione Modificar > Propriedades da pgina. (Os documentos baseados em um modelo herdam as propriedades de pgina do modelo.)
4 Salve o modelo. O Dreamweaver solicita que voc atualize pginas com base no modelo. 5 Clique em Atualizar para atualizar todos os documentos com base no modelo modificado; clique em No atualizar

se no quiser atualizar os documentos baseados no modelo modificado. O Dreamweaver exibe um registro que indica os arquivos que foram atualizados.

Abrir e modificar o modelo anexado ao documento atual


1 Abra o documento baseado em modelo na janela Documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 412


Criao e gerenciamento de modelos

2 Siga um destes procedimentos:

Selecione Modificar > Modelos > Abrir modelo anexado. Clique com o boto direito do mouse (Windows) ou Control-clique (Macintosh) e selecione Modelos > Abrir
modelo anexado.
3 Modifique o contedo do modelo.

Para modificar as propriedades de pgina do modelo, selecione Modificar > Propriedades da pgina. (Os documentos baseados em um modelo herdam as propriedades de pgina do modelo.)
4 Salve o modelo. O Dreamweaver solicita que voc atualize pginas com base no modelo. 5 Clique em Atualizar para atualizar todos os documentos com base no modelo modificado; clique em No atualizar

se no quiser atualizar os documentos baseados no modelo modificado. O Dreamweaver exibe um registro que indica os arquivos que foram atualizados.

Renomear um modelo
1 No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel 2 Clique no nome do modelo para selecion-lo. 3 Clique no nome novamente para que o texto possa ser selecionado e insira um novo nome.

Esse mtodo de renomeao funciona da mesma forma que a renomeao de um arquivo no Windows Explorer (Windows) ou no Finder (Macintosh). Assim como no Windows Explorer e no Finder, faa uma pausa rpida entre os cliques. No clique duas vezes no nome, pois esse procedimento abre o modelo para edio.
4 Clique em outra rea do painel Ativo ou pressione Enter (Windows) ou Return (Macintosh) para ativar a alterao.

Um alerta pergunta se voc deseja atualizar os documentos baseados nesse modelo.


5 Para atualizar todos os documentos do site que utilizam esse modelo, clique em Atualizar. Clique em No atualizar

se voc no quiser atualizar qualquer documento baseado nesse modelo.

Mais tpicos da Ajuda


Criao de um modelo do Dreamweaver na pgina 397 Aplicao ou remoo de um modelo em um documento na pgina 415

Alterar a descrio de um modelo


A descrio do modelo aparece na caixa de dilogo Novo documento quando voc cria uma pgina a partir de um modelo existente.
1 Selecione Modificar > Modelos > Descrio. 2 Na caixa de dilogo Descrio do modelo, edite a descrio e clique em OK.

Mais tpicos da Ajuda


Criao de um modelo do Dreamweaver na pgina 397

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 413


Criao e gerenciamento de modelos

Atualizar manualmente documentos baseados em modelos


Quando voc faz uma alterao em um modelo, o Dreamweaver solicita que voc atualize os documentos baseados no modelo. Voc pode atualizar manualmente o documento atual ou o site inteiro, caso seja necessrio. O processo de atualizao manual dos documentos baseados em modelo igual ao de reaplicao do modelo.

Aplicar alteraes de modelo ao documento baseado em modelo


1 Abra o documento na janela Documento. 2 Selecione Modificar > Modelos > Atualizar pgina atual.

O Dreamweaver atualiza o documento com todas as alteraes do modelo.

Atualizar o site inteiro ou todos os documentos que usam determinado modelo


Voc pode atualizar todas as pginas no site ou somente as pginas de um modelo especfico.
1 Selecione Modificar > Modelos > Atualizar pginas. 2 No menu Pesquisar, siga um destes procedimentos:

Para atualizar todos os arquivos no site selecionado com seus modelos correspondentes, selecione Site inteiro e
indique o nome do site no menu pop-up adjacente.

Para atualizar os arquivos de um modelo especfico, selecione Arquivos que usam e indique o nome do modelo no
menu pop-up adjacente.
3 Verifique se Modelos est selecionado na opo Atualizar. 4 Se voc no quiser ver um registro dos arquivos que o Dreamweaver atualiza, desmarque a opo Mostrar registro;

caso contrrio, deixe a opo selecionada.


5 Clique em Iniciar para atualizar os arquivos como indicado. Se voc marcou a opo Mostrar registro, o

Dreamweaver fornecer informaes sobre os arquivos que ele tenta atualizar, inclusive informaes sobre o sucesso da atualizao.
6 Clique em Fechar.

Atualizar modelos em site do Contribute


Os usurios do Contribute no podem alterar um modelo do Dreamweaver. Entretanto, voc pode usar o Dreamweaver para alterar um modelo de um site do Contribute. Lembre-se do seguinte ao atualizar modelos em um site do Contribute:

O Contribute somente recupera modelos novos e alterados no site quando o Contribute iniciado e quando um
usurio do Contribute altera as respectivas informaes de conexo. Se voc efetuar alteraes em um modelo enquanto um usurio do Contribute edita um arquivo baseado nesse modelo, o usurio no ver as alteraes no modelo at reiniciar o Contribute.

Se voc remover uma regio editvel de um modelo, o usurio do Contribute que estiver editando uma pgina
baseada nesse modelo pode ficar confuso sobre o que fazer com o contedo da regio editvel. Para atualizar um modelo em um site do Contribute, siga as etapas a seguir.
1 Abra o modelo do Contribute no Dreamweaver, edite-o e salve-o. Para obter instrues, consulte Abrir um

modelo para edio na pgina 411.


2 Solicite que todos os usurios do Contribute que estiverem trabalhando no site reiniciem o Contribute.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 414


Criao e gerenciamento de modelos

Excluir um arquivo de modelo


1 No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel 2 Clique no nome do modelo para selecion-lo. 3 Clique no boto Excluir

na parte inferior do painel e confirme se deseja excluir o modelo.

Importante: Depois de excludo, o arquivo de modelo no pode ser recuperado. O arquivo de modelo excludo do site. Os documentos baseados em um modelo excludo no so desanexados do modelo; eles retm a estrutura e as regies editveis que o arquivo de modelo tinha antes de ser excludo. possvel converter esse documento em um arquivo HTML sem regies editveis ou bloqueadas.

Mais tpicos da Ajuda


Desanexar um documento de um modelo na pgina 416 Aplicao ou remoo de um modelo em um documento na pgina 415 Criao de um modelo do Dreamweaver na pgina 397

Exportao e importao de contedo de modelo


Sobre o contedo XML do modelo
Voc pode considerar um documento baseado em modelo como um documento que contm dados representados por pares de nome e valor. Cada par consiste no nome de uma regio editvel e o contedo dessa regio. Voc pode exportar os pares de nome e valor para um arquivo XML para poder trabalhar com os dados fora do Dreamweaver (por exemplo, em um editor XML ou um editor de texto, ou um aplicativo de banco de dados). Inversamente, se voc tiver um documento XML que esteja estruturado corretamente, poder importar os dados dele para um documento baseado em um modelo do Dreamweaver.

Exportar regies editveis de um documento como XML


1 Abra um documento baseado em modelo que contenha regies editveis. 2 Selecione Arquivo > Exportar > Dados do modelo como XML. 3 Selecione uma das opes de Notao:

Se o modelo contiver parmetros de modelo ou regies repetitivas, selecione Usar tags padro de XML do
Dreamweaver.

Se o modelo no contiver parmetros de modelo ou regies repetitivas, selecione Usar nomes de regies editveis
como tags de XML.
4 Clique em OK. 5 Na caixa de dilogo exibida, selecione um local de pasta, insira um nome para o arquivo XML e clique em Salvar.

gerado um arquivo XML que contm o material dos parmetros e das regies editveis do documento, inclusive as regies editveis dentro das regies repetitivas ou das regies opcionais. O arquivo XML inclui o nome do modelo original, bem como o nome e o contedo de cada regio do modelo. Nota: O contedo nas regies no editveis no exportado para o arquivo XML.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 415


Criao e gerenciamento de modelos

Importar contedo XML


1 Selecione Arquivo > Importar > Importar XML para modelo. 2 Selecione o arquivo XML e clique em Abrir.

O Dreamweaver cria um novo documento baseado no modelo especificado no arquivo XML. Ele preenche o contedo de cada regio editvel nesse documento usando os dados do arquivo XML. O documento resultante aparece em uma nova janela Documento. Se seu arquivo XML no estiver configurado exatamente da forma como o Dreamweaver espera, pode ser que voc no consiga importar os dados. Uma soluo para esse problema exportar um arquivo XML do Dreamweaver, de forma que voc ter um arquivo XML com exatamente a mesma estrutura. Em seguida, copie os dados do arquivo XML original para o arquivo XML exportado. O resultado um arquivo XML com a estrutura correta que contm os dados apropriados, prontos para serem importados.

Exportar um site sem markup de modelo


Voc pode exportar documentos baseados em modelo de um site para outro sem incluir o markup de modelo.
1 Selecione Modificar > Modelos > Exportar sem markup. 2 Na caixa Pasta, insira o caminho at a pasta para a qual o arquivo ser exportado ou clique em Procurar e selecione

a pasta. Nota: Voc deve selecionar uma pasta fora do site atual.
3 Se voc quiser salvar uma verso XML dos documentos baseados em modelo, selecione Manter arquivos de dados

de modelo.
4 Se voc quiser atualizar alteraes em arquivos exportados anteriormente, selecione Extrair somente arquivos

alterados e clique em OK.

Aplicao ou remoo de um modelo em um documento


Aplicar um modelo a um documento
Quando voc aplica um modelo a um documento que j tem contedo, o Dreamweaver tenta estabelecer uma correspondncia entre o contedo existente e uma regio no modelo. Se voc estiver aplicando uma verso revisada de um seus modelos, os nomes provavelmente sero correspondentes. Se voc aplicar um modelo a um documento que no utilizou um modelo, no haver regies editveis para comparao e no haver correspondncia. O Dreamweaver rastreia essas falhas de correspondncia para que voc possa selecionar para qual regio ou regies o contedo da pgina atual ser transferido ou que voc possa excluir o contedo no correspondente. possvel aplicar um modelo a um documento usando o painel Ativos na janela Documento. Voc pode desfazer a aplicao de um modelo se necessrio. Importante: Quando voc aplica um modelo a um documento existente, o modelo substitui o contedo do documento pelo contedo do modelo. Sempre faa backup do contedo de uma pgina antes de aplicar um modelo a ela.

Aplicar um modelo a um documento usando o painel Ativos


1 Abra o documento ao qual voc deseja aplicar o modelo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 416


Criao e gerenciamento de modelos

2 No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel 3 Siga um destes procedimentos:

Arraste o modelo a ser aplicado do painel Ativos para a janela Documento. Selecione o modelo a ser aplicado e clique no boto Aplicar na parte inferior do painel Ativos.
Se houver contedo no documento que no possa ser atribudo automaticamente a uma regio de modelo, a caixa de dilogo Nomes de regio inconsistentes ser exibida.
4 Selecione um destino para o contedo usando o menu Mover contedo para nova regio para selecionar um destes:

Selecione uma regio no novo modelo para a qual o contedo existente ser movido. Selecione Em lugar nenhum para remover o contedo do documento.
5 Para mover todo contedo no resolvido para a regio selecionada, clique em Usar para todos. 6 Clique em OK para aplicar o modelo ou clique em Cancelar para cancelar a aplicao do modelo ao documento.

Importante: Quando voc aplica um modelo a um documento existente, o modelo substitui o contedo do documento pelo contedo do modelo. Sempre faa backup do contedo de uma pgina antes de aplicar um modelo a ela.

Aplicar um modelo a um documento na janela Documento


1 Abra o documento ao qual voc deseja aplicar o modelo. 2 Selecione Modificar > Modelos > Aplicar modelo pgina.

A caixa de dilogo Selecionar modelo exibida.


3 Escolha um modelo na lista e clique em Selecionar.

Se houver contedo no documento que no possa ser atribudo automaticamente a uma regio de modelo, a caixa de dilogo Nomes de regio inconsistentes ser exibida.
4 Selecione um destino para o contedo usando o menu Mover contedo para nova regio para selecionar um destes:

Selecione uma regio no novo modelo para a qual o contedo existente ser movido. Selecione Em lugar nenhum para remover o contedo do documento.
5 Para mover todo contedo no resolvido para a regio selecionada, clique em Usar para todos. 6 Clique em OK para aplicar o modelo ou clique em Cancelar para cancelar a aplicao do modelo ao documento.

Importante: Quando voc aplica um modelo a um documento existente, o modelo substitui o contedo do documento pelo contedo do modelo. Sempre faa backup do contedo de uma pgina antes de aplicar um modelo a ela.

Desfazer alteraes do modelo


Selecione Editar > Desfazer Aplicar modelo.

O documento retorna ao estado anterior aplicao do modelo.

Desanexar um documento de um modelo


Para efetuar alteraes nas regies bloqueadas de um documento baseado em modelo, desanexe o documento do modelo. Depois de desanexado, o documento inteiro ficar editvel.
1 Abra o documento baseado em modelo a ser desanexado. 2 Selecione Modificar > Modelos > Desanexar do modelo.

O documento desanexado do modelo e todo o cdigo do modelo removido.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 417


Criao e gerenciamento de modelos

Edio de contedo em um documento baseado em modelo


Sobre a edio de contedo em documentos baseados em modelo
Os modelos do Dreamweaver especificam regies que so bloqueadas (no editveis) e outras que so editveis para documentos baseados em modelos. Nas pginas baseadas em modelos, os usurios do modelo s podem editar o contedo em regies editveis. Voc pode facilmente identificar e selecionar regies editveis para editar contedo. Os usurios do modelo no podem editar o contedo das regies bloqueadas. Nota: Se voc tentar editar uma regio bloqueada em um documento baseado em modelo quando o realce estiver desativado, o ponteiro do mouse mudar para indicar que no possvel clicar em uma regio bloqueada. Os usurios do modelo tambm podem modificar propriedades e editar entradas de uma regio repetitiva em documentos baseados em modelos.

Mais tpicos da Ajuda


Criar uma pgina baseada em um modelo na pgina 63 Sobre os modelos do Dreamweaver na pgina 389 Selecionar regies editveis na pgina 401

Modificar propriedades de modelo


Quando os autores do modelo criam parmetros em um modelo, os documentos baseados no modelo herdam automaticamente os parmetros e suas configuraes de valor iniciais. O usurio do modelo pode atualizar os atributos de tag editveis e outros parmetros de modelo (como configuraes de regio opcionais).

Mais tpicos da Ajuda


Parmetros de modelo na pgina 392 Utilizao de regies opcionais na pgina 404 Definio de atributos de tag editveis na pgina 406

Modificar um atributo de tag editvel


1 Abra o documento baseado em modelo. 2 Selecione Modificar > Propriedades de modelo.

A caixa de dilogo Propriedades de modelo aberta, mostrando uma lista das propriedades disponveis. A caixa de dilogo mostra as regies opcionais e os atributos de tag editveis.
3 Na lista Nome, selecione a propriedade.

A rea inferior da caixa de dilogo atualizada de forma a mostrar o rtulo da propriedade selecionada e seu valor atribudo.
4 No campo direita do rtulo de propriedade, edite o valor para modificar a propriedade no documento.

Nota: O nome do campo e os valores atualizveis so definidos no modelo. Os atributos que no aparecerem na lista Nome no podem ser editados no documento baseado em modelo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 418


Criao e gerenciamento de modelos

5 Selecione Permitir modelos aninhados para controlar isto se voc quiser passar a propriedade editvel junto com

os documentos baseados no modelo aninhado.

Modificar parmetros de modelo de regio opcionais


1 Abra o documento baseado em modelo. 2 Selecione Modificar > Propriedades de modelo.

A caixa de dilogo Propriedades de modelo aberta, mostrando uma lista das propriedades disponveis. A caixa de dilogo mostra as regies opcionais e os atributos de tag editveis.
3 Na lista Nome, selecione uma propriedade.

A caixa de dilogo atualizada de forma a mostrar o rtulo da propriedade selecionada e seu valor atribudo.
4 Selecione Mostrar para exibir a regio opcional no documento ou desmarque Mostrar para ocultar a regio

opcional. Nota: O nome do campo e a configurao padro so definidos no modelo.


5 Selecione Permitir modelos aninhados para controlar isto se voc quiser passar a propriedade editvel junto com

os documentos baseados no modelo aninhado.

Adicionar, excluir e alterar a ordem de uma entrada da regio repetitiva


Use controles de regio repetitiva para adicionar, excluir ou alterar a ordem de entradas em documentos baseados em modelo. Quando voc adiciona uma entrada de regio repetitiva, uma cpia da regio repetitiva inteira adicionada. Para atualizar o contedo nas regies repetitivas, o modelo original deve incluir uma regio editvel na regio repetitiva.

Mais tpicos da Ajuda


Criao de regies repetitivas na pgina 401

Adicionar, excluir ou alterar a ordem de uma regio repetitiva


1 Abra o documento baseado em modelo. 2 Posicione o ponto de insero na regio repetitiva para selecion-la. 3 Siga um destes procedimentos:

Clique no boto de mais (+) para adicionar uma entrada de regio repetitiva abaixo da entrada selecionada. Clique no boto de menos () para excluir a entrada da regio repetitiva selecionada. Clique no boto Seta abaixo para mover a entrada selecionada uma posio para baixo. Clique no boto Seta para cima para mover a entrada selecionada uma posio para cima.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 419


Criao e gerenciamento de modelos

Nota: Uma alternativa selecionar Modificar > Modelo e marcar uma das opes de entrada repetitiva na parte inferior do menu de contexto. Voc pode usar esse menu para inserir uma nova entrada repetitiva ou mover a posio da entrada selecionada.

Recortar, copiar e excluir entradas


1 Abra o documento baseado em modelo. 2 Posicione o ponto de insero na regio repetitiva para selecion-la. 3 Siga um destes procedimentos:

Para recortar uma entrada repetitiva, selecione Editar > Entradas repetitivas > Recortar entrada repetitiva. Para copiar uma entrada repetitiva, selecione Editar > Entradas repetitivas > Copiar entrada repetitiva. Para remover uma entrada repetitiva, selecione Editar > Entradas repetitivas > Excluir entrada repetitiva. Para colar uma entrada repetitiva, selecione Editar > Colar.
Nota: A colagem insere uma nova entrada, ela no substitui qualquer entrada existente.

Sintaxe do modelo
Regras gerais de sintaxe
O Dreamweaver usa tags de comentrio HTML para especificar regies em modelos e documentos baseados em modelo, de forma que os documentos baseados em modelo permanecem arquivos HTML vlidos. Quando voc insere um objeto de modelo, as tags de modelo so inseridas no cdigo. Estas so regras gerais de sintaxe:

Voc sempre pode substituir qualquer espao em branco (espaos, abas, quebras de linha) que aparecer. O espao
em branco obrigatrio, exceto no incio ou no fim de um comentrio.

Os atributos podem ser especificados em qualquer ordem. Por exemplo, em um TemplateParam, possvel
especificar o tipo antes do nome.

Os nomes de atributo e comentrio diferenciam maisculas e minsculas. Todos os atributos devem estar entre aspas. Podem ser usadas aspas simples ou duplas.

Tags de modelo
O Dreamweaver usa as seguintes tags de modelo:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 420


Criao e gerenciamento de modelos

<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!--

TemplateBeginEditable name="..." --> TemplateEndEditable --> TemplateParam name="..." type="..." value="..." --> TemplateBeginRepeat name="..." --> TemplateEndRepeat --> TemplateBeginIf cond="..." --> TemplateEndIf --> TemplateBeginPassthroughIf cond="..." --> TemplateEndPassthroughIf --> TemplateBeginMultipleIf --> TemplateEndMultipleIf --> TemplateBeginPassthroughMultipleIf --> TemplateEndPassthroughMultipleIf --> TemplateBeginIfClause cond="..." --> TemplateEndIfClause --> TemplateBeginPassthroughIfClause cond="..." --> TemplateEndPassthroughIfClause --> TemplateExpr expr="..." --> (equivalent to @@...@@) TemplatePassthroughExpr expr="..." --> TemplateInfo codeOutsideHTMLIsLocked="..." -->

Tags de ocorrncia
O Dreamweaver usa as seguintes tags de ocorrncia:
<!-<!-<!-<!-<!-<!-<!-<!-<!-InstanceBegin template="..." codeOutsideHTMLIsLocked="..." --> InstanceEnd --> InstanceBeginEditable name="..." --> InstanceEndEditable --> InstanceParam name="..." type="..." value="..." passthrough="..." --> InstanceBeginRepeat name="..." --> InstanceEndRepeat --> InstanceBeginRepeatEntry --> InstanceEndRepeatEntry -->

Verificar sintaxe de modelo


O Dreamweaver verifica a sintaxe quando voc salva o modelo, mas voc pode verificar manualmente a sintaxe do modelo antes de salvar o modelo. Por exemplo, se voc adicionar uma expresso ou um parmetro de modelo na visualizao de cdigo, poder verificar se o cdigo segue a sintaxe correta.
1 Abra o documento a ser verificado na janela Documento. 2 Selecione Modificar > Modelos > Verificar sintaxe de modelo.

exibida uma mensagem de erro se a sintaxe estiver mal formulada. A mensagem de erro descreve o erro e refere-se linha especfica do cdigo em que est o erro.

Mais tpicos da Ajuda


Reconhecimento de modelos e documentos baseados em modelo na pgina 394 Expresses de modelo na pgina 392

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 421


Criao e gerenciamento de modelos

Configurao de preferncias de criao para os modelos


Personalizao das preferncias de codificao por cor de um modelo
As preferncias de cor de cdigo controlam atributos de texto, cor de fundo e estilo do texto exibido na visualizao de cdigo. Voc pode definir seu prprio esquema de cores para diferenciar facilmente as regies do modelo quando visualizar um documento na Visualizao de cdigo.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione Codificao por cores na lista de categorias esquerda. 3 Selecione HTML na lista Tipo de documento e clique no boto Editar esquema de cores. 4 Na lista Estilos de, selecione Tags de modelo. 5 Defina os atributos de cor, cor de fundo e estilo para o texto da visualizao de cdigo da seguinte maneira:

Para alterar a cor do texto, na caixa Cor do texto, digite o valor hexadecimal da cor a ser aplicada ao texto
selecionado ou use o seletor de cores para escolher uma cor para aplicar ao texto. Faa o mesmo no campo Fundo para adicionar ou alterar uma cor de fundo do texto selecionado.

Para adicionar um atributo de estilo ao cdigo selecionado, clique nos botes N (negrito), I (itlico) ou S
(sublinhado) para definir o formato desejado.
6 Clique em OK.

Nota: Se quiser efetuar alteraes globais, voc poder editar o arquivo de origem que armazena suas preferncias. No Windows XP, ele est localizado em C:\Documents and Settings\%nome do usurio%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml. No Windows Vista, ele est localizado em C:\Users\%nome do usurio%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml.

Definir preferncias de realce para regies de modelo


Voc pode usar as preferncias de realce do Dreamweaver para personalizar as cores de realce dos contornos das regies editveis e bloqueadas de um modelo na Visualizao de design. A cor da regio editvel aparece no modelo, bem como nos documentos baseados no modelo.

Mais tpicos da Ajuda


Reconhecimento de documentos baseados em modelo na Visualizao de design na pgina 396 Reconhecimento de modelos na Visualizao de design na pgina 394

Alterar cores de realce de modelo


1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione Realce na lista de categorias esquerda. 3 Clique nas caixas de cor Regies editveis, Regies aninhadas ou Regies bloqueadas e escolha uma cor de realce

usando o seletor de cores (ou insira o valor hexadecimal da cor de realce na caixa). Para obter informaes sobre o uso do seletor de cor, consulte Usar o seletor de cores na pgina 215.
4 (Opcional) Repita o processo para outros tipos de regio de modelo, caso seja necessrio. 5 Clique na opo Mostrar para ativar ou desativar a exibio de cores na janela Documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 422


Criao e gerenciamento de modelos

Nota: A Regio aninhada no tem uma opo Mostrar; sua exibio controlada pela opo Regio editvel.
6 Clique em OK.

Exibir cores de realce na janela Documento


Selecione Exibir > Auxlios visuais > Elementos invisveis.

As cores de realce aparecem na janela de documento somente quando Exibir > Auxlios visuais > Elementos invisveis est ativado e as opes apropriadas so ativadas nas preferncias de realce. Nota: Se os elementos invisveis estiverem visveis, mas as cores de realce no, selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferences (Macintosh), e selecione a categoria Realce. Certifique-se de que a opo Mostrar ao lado da cor de realce apropriada esteja selecionada. Certifique-se tambm de que a cor desejada aparea contra a cor de fundo da pgina.

ltima atualizao em 28/4/2010

423

Captulo 15: Criao visual de pginas do Spry


A estrutura do Spry uma biblioteca JavaScript que permite aos designers criar pginas da Web que garantam experincias mais interessantes aos visitantes do site. Com o Spry, voc pode usar HTML, CSS e o mnimo de JavaScript para incorporar dados XML aos documentos HTML, criar widgets como acordees e barras de menu, e adicionar diferentes tipos de efeitos a vrios elementos de pgina. A estrutura do Spry foi desenvolvida para simplificar e facilitar o uso de marcao para quem tem conhecimentos bsicos de HTML, CSS e JavaScript. A estrutura do Spry destina-se principalmente aos profissionais de design na Web ou designers no-profissionais avanados. Essa no uma estrutura integral de aplicativos da Web para o desenvolvimento de contedo da Web em nvel empresarial (embora ela possa ser usada com outras pginas de nvel empresarial).

Sobre a estrutura do Spry


A estrutura do Spry uma biblioteca JavaScript que permite aos designers criar pginas da Web que garantam experincias mais interessantes aos visitantes do site. Com o Spry, voc pode usar HTML, CSS e o mnimo de JavaScript para incorporar dados XML aos documentos HTML, criar widgets como acordees e barras de menu, e adicionar diferentes tipos de efeitos a vrios elementos de pgina. A estrutura do Spry foi elaborada para simplificar e facilitar o uso do markup aos que tm conhecimentos bsicos de HTML, CSS e JavaScript. A estrutura do Spry destina-se principalmente aos profissionais de design na Web ou designers no-profissionais avanados. Essa no uma estrutura integral de aplicativos da Web para o desenvolvimento de contedo da Web em nvel empresarial (embora ela possa ser usada com outras pginas de nvel empresarial). Para obter mais informaes sobre a estrutura do Spry, consulte www.adobe.com/go/learn_dw_spryframework_br.

Mais tpicos da Ajuda


Guia do desenvolvedor do Spry

Funcionamento dos widgets do Spry (instrues gerais)


Sobre widgets do Spry
Um widget do Spry um elemento de pgina que enriquece a experincia do usurio por meio de interao. Um widget do Spry consiste no seguinte:
Estrutura do widget Um bloco de cdigo HTML que define a composio estrutural do widget. Comportamento do widget JavaScript que controla como o widget responde a eventos iniciados pelo usurio. Estilo de widget CSS que especifica a aparncia do widget.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 424


Criao visual de pginas do Spry

A estrutura do Spry utiliza um conjunto de widgets reutilizveis desenvolvidos em HTML, CSS e JavaScript padro. Voc pode inserir facilmente esses widgets (o cdigo HTML e CSS bem simplificados) e, em seguida, aplicar o estilo. Os comportamentos na estrutura incluem funes que permitem aos usurios mostrar ou ocultar contedo na pgina, alterar a aparncia (como cor) da pgina, interagir com itens de menu, e muito mais. Cada widget na estrutura do Spry est associado a arquivos CSS e JavaScript exclusivos. O arquivo CSS contm tudo o que necessrio para criar o estilo do widget, e o arquivo JavaScript responsvel pela funcionalidade do widget. Quando voc insere um widget usando a interface do Dreamweaver, o Dreamweaver vincula automaticamente esses arquivos sua pgina, e o widget ganha funcionalidade e estilo. Os arquivos CSS e JavaScript associados a determinado widget recebem o nome do widget para que voc possa facilmente correlacionar os arquivos aos widgets. (Por exemplo, os arquivos associados ao widget Acordeo chamamse SpryAccordion.css e SpryAccordion.js). Quando voc insere um widget em uma pgina salva, o Dreamweaver cria um diretrio SpryAssets no site e salva os arquivos JavaScript e CSS correspondentes nesse local.

Mais tpicos da Ajuda


Introduo s folhas de estilos em cascata na pgina 123

Recursos e tutoriais dos dispositivos do spry


Os recursos on-line a seguir fornecem mais informaes sobre como personalizar os dispositivos do Spry. Amostras de dispositivos do Spry Personalizao de barras de menu do Spry no Dreamweaver Tutorial do dispositivo com painis com guias e barra de menu Dispositivos de validao do Spry (tutorial em vdeo)

Inserir um widget do Spry


Selecione Inserir > Spry e escolha o widget a ser inserido.

Ao inserir um widget, Dreamweaver voc automaticamente inclui os arquivos JavaScript e CSS necessrios do Spry em seu site quando salva a pgina. Nota: Para inserir widgets do Spry, voc tambm pode usar a categoria Spry no painel Inserir.

Selecionar um widget do Spry


1 Mantenha o ponteiro do mouse sobre o widget at aparecer a estrutura azul com abas. 2 Clique na aba no canto superior esquerdo do widget.

Editar um widget do Spry


Selecione o widget para edit-lo e fazer alteraes no Inspetor de propriedades (Janela > Propriedades).

Para obter detalhes sobre como efetuar alteraes em determinados widgets, consulte as sees apropriadas a cada widget.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 425


Criao visual de pginas do Spry

Criar o estilo de um widget do Spry


Localize o arquivo CSS apropriado para o widget na pasta SpryAssets do site e edite o CSS de acordo com suas

preferncias. Para obter detalhes sobre como criar o estilo de determinados widgets, consulte as sees apropriadas sobre personalizao para cada widget. Voc tambm pode formatar um widget do Spry editando os estilos no painel CSS, da mesma forma que faria com qualquer outro elemento com estilo na pgina.

Obter mais widgets


H muito mais widgets da Web disponveis alm dos widgets do Spry instalados com o Dreamweaver. O Adobe Exchange fornece widgets da Web desenvolvidos por outros profissionais criativos.
Escolha Procurar widgets da Web no menu Estender Dreamweaver

, na Barra de aplicativos.

Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre o funcionamento com widgets da web, consulte www.adobe.com/go/dw10widgets_br.

Alterar a pasta de ativos padro do Spry


Quando voc insere um widget, um conjunto de dados ou um efeito do Spry em uma pgina salva, Dreamweaver cria um diretrio SpryAssets no site e salva os arquivos JavaScript e CSS correspondentes nesse local. Voc pode alterar o local padro em que o Dreamweaver salva os ativos do Spry, caso prefira salv-los em outro local.
1 Selecione Arquivos > Gerenciar sites. 2 Selecione o seu site na caixa de dilogo Gerenciar sites e clique em Editar. 3 Na caixa de dilogo Configurao de site, expanda as Configuraes avanadas e selecione a categoria Spry. 4 Informe um caminho para a pasta a ser usada para os ativos do Spry e clique em OK. Voc tambm pode clicar no

cone de pasta para navegar at determinado local.

Mais tpicos da Ajuda


Configurao de um site do Dreamweaver na pgina 37

Funcionamento do widget Acordeo


Sobre o widget Acordeo
O widget Acordeo um conjunto de painis flexveis que podem armazenar um volume grande de contedo em um espao compacto. Os visitantes do site clicam na aba do painel para ocultar ou revelar o contedo armazenado no acordeo. Os painis do acordeo se expandem ou contraem de acordo com a aba em que o visitante clica. Em um acordeo, somente um painel de contedo fica aberto e visvel em determinado momento. Este exemplo mostra um widget Acordeo com o primeiro painel expandido:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 426


Criao visual de pginas do Spry

A. Aba do painel Acordeo B. Contedo do painel Acordeo C. Painel Acordeo (aberto)

O HTML padro do widget Acordeo composto de uma tag div externa que contm todos os painis, uma tag div para cada painel, um div de cabealho e um div de contedo dentro da tag de cada painel. Um widget Acordeo pode conter inmeros painis individuais. O HTML do widget Acordeo tambm inclui tags de script no cabealho do documento e aps o markup HTML do acordeo. Para obter uma explicao abrangente sobre como o widget Acordeo funciona, inclusive uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_spryaccordion_br. Para ter acesso ao tutorial sobre como trabalhar com widgets Acordeo consulte www.adobe.com/go/vid0167_br.

Inserir e editar o widget Acordeo


Inserir o widget Acordeo
Selecione Inserir > Spry > Acordeo do Spry.

Nota: Para inserir um widget Acordeo, voc tambm pode usar a categoria Spry no painel Inserir.

Adicionar um painel a um widget Acordeo


1 Selecione um widget Acordeo na janela Documento. 2 Clique no boto de adio (+) de Painis no Inspetor de propriedades (Janela > Propriedades). 3 (Opcional) Altere o nome do painel selecionando e alterando o texto desejado do painel na Visualizao de design.

Excluir painel de um widget Acordeo


1 Selecione um widget Acordeo na janela Documento. 2 No menu Painis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel a ser excludo

e clique no boto de subtrao (-).

Abrir painel para edio


Siga um destes procedimentos:

Mova o ponteiro do mouse sobre a aba do painel para abri-lo na Visualizao de design e clique no cone em forma
de olho que aparece direita da aba.

Selecione um widget Acordeo na janela Documento e clique no nome do painel para edit-lo no menu Painis do
Inspetor de propriedades (Janela > Propriedades).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 427


Criao visual de pginas do Spry

Alterar a ordem dos painis


1 Selecione um widget Acordeo na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel do Acordeo que voc deseja

mover.
3 Clique nas setas para cima e para baixo para mover o painel para cima ou para baixo.

Personalizar o widget Acordeo


Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Acordeo, ele no aceita tarefas de estilizao personalizadas. Voc pode alterar as regras de CSS para o dispositivo Acordeo e criar um acordeo com o estilo de sua preferncia. Para obter uma referncia rpida sobre como alterar as cores no dispositivo Acordeo, consulte o Guia rpido para painis com guias, acordees e contrair painis de David Powers. Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_spryaccordion_custom_br. Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryAccordion.css. O Dreamweaver salva o arquivo SpryAccordion.css na pasta SpryAssets do seu site sempre que voc cria um widget Acordeo do Spry. Esse arquivo tambm contm informaes comentadas sobre vrios estilos que se aplicam ao widget, o que poder ser til. Embora voc possa facilmente editar regras para o widget Acordeo diretamente no arquivo CSS, voc tambm pode usar o painel Estilos CSS para editar o CSS do acordeo. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.

Mais tpicos da Ajuda


Painel Estilos CSS no modo Atual na pgina 128

Criar o estilo do texto do widget Acordeo


Para criar o estilo do texto de um widget Acordeo, configure as propriedades do recipiente inteiro do widget Acordeo ou configure as propriedades dos componentes do widget individualmente.
Para alterar o estilo do texto de um widget Acordeo, use a seguinte tabela para localizar a regra de CSS apropriada

e, em seguida, adicionar os valores e as propriedades de estilo do seu prprio texto:


Texto a ser alterado Regra de CSS relevante Exemplo de propriedades e valores a adicionar fonte: Arial; font-size:medium;

Texto no acordeo inteiro (inclui aba e painel .Accordion ou .AccordionPanel de contedo) Texto somente nas abas do painel do acordeo Texto somente nos painis de contedo do acordeo .AccordionPanelTab

fonte: Arial; font-size:medium;

.AccordionPanelContent

fonte: Arial; font-size:medium;

Alterar as cores de fundo do widget Acordeo


Para alterar as cores de fundo de diversas partes de um widget Acordeo, use a seguinte tabela para localizar a regra

de CSS apropriada e, em seguida, adicione ou altere os valores e as propriedades da cor de fundo:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 428


Criao visual de pginas do Spry

Parte do widget a alterar

Regra de CSS relevante

Exemplo de propriedade e valor a adicionar ou alterar cor de fundo: #CCCCCC; (este o valor padro.) cor de fundo: #CCCCCC;

Cor de fundo das abas do painel do acordeo .AccordionPanelTab

Cor de fundo dos painis de contedo do acordeo Cor de fundo do painel do acordeo aberto Cor de fundo das abas do painel focalizado Cor de fundo da aba do painel aberto focalizado

.AccordionPanelContent

.AccordionPanelOpen .AccordionPanelTab .AccordionPanelTabHover .AccordionPanelOpen .AccordionPanelTabHover

cor de fundo: #EEEEEE; (este o valor padro.) cor: #555555; (este o valor padro.) cor: #555555; (este o valor padro.)

Restringir a largura de um acordeo


Por padro, o widget Acordeo se expande at ocupar o espao disponvel. Entretanto, voc pode restringir a largura de um widget configurando uma propriedade de largura para o recipiente do acordeo.
1 Abra o arquivo SpryCcordion.css e localize a regra de CSS .Accordion. Essa a regra que define propriedades para

o principal elemento recipiente do widget Acordeo. Voc tambm pode localizar a regra selecionando o widget Acordeo e verificando o painel Estilos CSS (Janela > Estilos CSS). Verifique se o painel est definido no modo Atual.
2 Adicione um valor e uma propriedade de largura regra. Por exemplo largura: 300px;.

Funcionamento do widget Barra de menus


Sobre o widget Barra de menus
O widget Barra de menus um conjunto de botes de menu de navegao que exibem submenus quando um visitante do site passa o mouse sobre um dos botes. As barras de menus permitem que voc exiba um grande volume de informaes sobre navegao em um espao compacto, alm de dar aos visitantes do site uma idia do que est disponvel, sem necessidade de navegar excessivamente. O Dreamweaver permite que voc insira dois tipos de widget Barra de menus: vertical e horizontal. Este exemplo mostra um widget Barra de menus horizontal com o terceiro item de menu expandido:

Widget Barra de menus (consiste nas tags <ul>, <li> e <a>) A. Item de menu tem submenu B. Item de submenu tem submenu

O HTML do widget Barra de menus composto de uma tag ul externa que contm uma tag li para cada item de menu de nvel superior. Os itens de menu de nvel superior (tags li), por sua vez, contm tags ul e li que definem submenus para cada item; os submenus podem, da mesma forma, conter submenus. Os menus de nvel superior e os submenus podem conter quantos itens de submenu voc desejar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 429


Criao visual de pginas do Spry

Para obter uma explicao abrangente sobre como o widget Barra de menus funciona, inclusive uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprymenubar_br. Para ter acesso ao tutorial sobre como criar Barras de menus do Spry, consulte www.adobe.com/go/vid0168_br.

Mais tpicos da Ajuda


Tutorial da Barra de menus do Spry

Inserir e editar o widget Barra de menus


Inserir o widget Barra de menus
1 Selecione Inserir > Spry > Barra de menus do Spry. 2 Selecione Horizontal ou Vertical e clique em OK.

Nota: Para inserir um widget Barra de Menus, voc tambm pode usar a categoria Spry do painel Inserir. Nota: O widget Barra de menus do Spry usa camadas de DHTML para exibir sees de HTML sobre as outras sees. Se a pgina tiver contedo criado com o Adobe Flash, isso poder causar problemas, porque os arquivos SWF sempre so exibidos sobre todas as outras camadas de DHTML, de forma que o arquivo SWF seja exibido sobre os submenus. A alternativa para essa situao alterar os parmetros do arquivo SWF e usar wmode="transparent". Voc pode fazer isso facilmente selecionando o arquivo SWF na janela Documento e definindo a opo wmode como transparente no Inspetor de propriedades. Para obter mais informaes, consulte www.adobe.com/go/15523_br.

Adicionar ou excluir menus e submenus


Use o Inspetor de propriedades (Janela > Propriedades) para adicionar ou excluir itens no widget Barra de menus. Adicionar um item de menu principal 1 Selecione um widget Barra de menus na janela Documento.
2 No Inspetor de propriedades, clique no boto de adio acima da primeira coluna. 3 (Opcional) Renomeie o novo item de menu alterando o texto padro na janela Documento ou na caixa Texto do

Inspetor de propriedades. Adicionar um item de submenu 1 Selecione um widget Barra de menus na janela Documento.
2 No Inspetor de propriedades, selecione o nome do item de menu principal ao qual voc deseja adicionar o

submenu.
3 Clique no boto de adio acima da segunda coluna. 4 (Opcional) Renomeie o novo item de submenu alterando o texto padro na janela Documento ou na caixa de texto

do Inspetor de propriedades. Para adicionar um submenu a um submenu, selecione o nome do item de submenu ao qual voc deseja adicionar outro item de submenu e clique no boto de adio acima da terceira coluna no Inspetor de propriedades. Nota: O Dreamweaver somente aceita dois nveis de submenus na Visualizao de design, mas voc pode adicionar quantos submenus desejar na Visualizao de cdigo. Excluir um item de menu ou submenu principal 1 Selecione um widget Barra de menus na janela Documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 430


Criao visual de pginas do Spry

2 No Inspetor de propriedades, selecione o nome do item de menu ou submenu principal a ser excludo e clique no

boto de subtrao.

Alterar a ordem dos itens de menu


1 Selecione um widget Barra de menus na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o nome do item de menu que voc deseja

reordenar.
3 Clique nas setas para cima e para baixo para mover o item de menu para cima ou para baixo.

Alterar o texto de um item de menu


1 Selecione um widget Barra de menus na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o nome do item de menu cujo texto voc deseja

alterar.
3 Efetue suas alteraes na caixa Texto.

Vincular um item de menu


1 Selecione um widget Barra de menus na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o nome do item de menu ao qual voc deseja aplicar

um link.
3 Digite o link na caixa de texto Link ou clique no cone de pasta para ir at um arquivo.

Criar uma dica de ferramenta para um item de menu


1 Selecione um widget Barra de menus na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o nome do item de menu para o qual voc deseja

criar uma dica de ferramenta.


3 Digite o texto da dica de ferramenta na caixa de texto Ttulo.

Designar um atributo de destino para um item de menu


O atributo de destino especifica onde uma pgina vinculada deve ser aberta. Por exemplo, voc pode designar um atributo de destino a um item de menu para que a pgina vinculada abra em uma nova janela do navegador quando o visitante do site clicar no link. Se voc utiliza conjuntos de molduras, tambm pode especificar o nome de uma moldura onde deseja abrir a pgina vinculada.
1 Selecione um widget Barra de menus na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o nome do item de menu para o qual voc deseja

designar um atributo de destino.


3 Insira um dos quatro atributos na caixa Destino:
_blank Abre a pgina vinculada em uma nova janela do navegador. _self Carrega a pgina vinculada na mesma janela do navegador. Esta a opo padro. Se a pgina estiver em uma

moldura ou em um conjunto de molduras, ela ser carregada dentro dessa moldura.


_parent Carrega o documento vinculado no conjunto de molduras pai imediato do documento. _top Carrega a pgina vinculada na janela na extremidade superior de um conjunto de molduras.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 431


Criao visual de pginas do Spry

Desativar estilos
Voc pode desativar o recurso de estilo de um widget Barra de menus para ver melhor a estrutura HTML do widget na Visualizao de design. Por exemplo, quando voc desativa os estilos, os itens da barra de menus so exibidos em uma lista com marcadores na pgina, e no como itens com estilo da barra de menus.
1 Selecione um widget Barra de menus na janela Documento. 2 Clique no boto Desativar estilos no Inspetor de propriedades (Janela > Propriedades).

Alterar a orientao de um widget Barra de menus


Voc pode alterar a orientao de um widget Barra de menus de horizontal para vertical, e vice-versa. Tudo o que voc tem a fazer alterar o cdigo HTML da barra de menus e verificar se o arquivo CSS correto est na pasta SpryAssets. O exemplo a seguir altera um widget Barra de menus horizontal em vertical.
1 No Dreamweaver, abra a pgina que contm um widget Barra de menus horizontal. 2 Insira um widget Barra de menus vertical (Inserir > Spry > Barra de menus do Spry) e salve a pgina. Essa etapa

garante que o arquivo CSS correto de uma barra de menus vertical seja includo no site. Nota: Se o site j tem um widget Barra de menus vertical em alguma parte, no ser preciso inserir um novo. Basta anexar o arquivo SpryMenuBarVertical.css pgina, em vez de clicar no boto Anexar folha de estilos no painel Estilos CSS (Janelas > Estilos CSS).
3 Exclua a Barra de menus vertical. 4 Na Visualizao de cdigo (Exibir > Cdigo), localize a classe MenuBarHorizontal e altere-a para MenuBarVertical.

A classe MenuBarHorizontal definida na tag ul do recipiente da barra de menus (<ul id="MenuBar1" classe="MenuBarHorizontal">).
5 Depois do cdigo, localize o construtor de barra de menus:
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

6 Remova a opo imgDown de pr-carregamento (e vrgula) do construtor:


var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

Nota: Se converter uma barra de menus vertical para horizontal, adicione a opo imgDown de pr-carregamento e a vrgula.
7 (Opcional) Se sua pgina no tiver outros widgets Barra de menus horizontal, exclua o link do arquivo

MenuBarHorizontal.css anterior no cabealho do documento.


8 Salve a pgina.

Personalizar o widget Barra de menus


Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Barra de menus, ele no aceita tarefas de estilizao personalizadas. Voc pode alterar as regras de CSS para o dispositivo Barra de menus e criar uma barra de menus com o estilo de sua preferncia. Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_sprymenubar_custom_br. Para obter um tutorial sobre como executar as tarefas de estilizao mais comuns, consulte Personalizao de uma barra de menus do Spry.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 432


Criao visual de pginas do Spry

Para obter mais recursos da Web sobre personalizao do dispositivo Barra de menu, consulte Personalizao de barras de menu do Spry no Dreamweaver de Ryan Grabenstein. Todas as regras de CSS nos tpicos abaixo se referem s regras padro localizadas no arquivo SpryMenuBarHorizontal.css ou SpryMenuBarVertical.css (dependendo da sua seleo). O Dreamweaver salva esses arquivos CSS na pasta SpryAssets do site sempre que voc cria um widget Barra de menus do Spry. Esses arquivos tambm contm informaes teis comentadas sobre vrios estilos que se aplicam ao widget. Embora voc possa facilmente editar regras para o widget Barra de menus diretamente no arquivo CSS relacionado, voc tambm pode usar o painel Estilos CSS para editar o CSS da barra de menus. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.

Mais tpicos da Ajuda


Painel Estilos CSS no modo Atual na pgina 128

Alterar o estilo de texto de um item de menu


O CSS anexado tag <a> contm as informaes para o estilo do texto. Existem vrios valores de classe de estilo de texto importantes anexados tag <a> que pertencem a diferentes estados de menu.
Para alterar o estilo de texto de um item de menu, use a seguinte tabela para localizar a regra de CSS apropriada e

alterar o valor padro:


Estilo a alterar Regra de CSS para barra de menus vertical ou horizontal ul.MenuBarVertical a, ul.MenuBarHorizontal a ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover Propriedades relevantes e valores padro cor: #333; text-decoration: none; cor: #FFF;

Texto padro Cor do texto quando o ponteiro do mouse passa por cima Cor do texto em foco

cor: #FFF;

Cor do item da Barra de menus quando o ponteiro do mouse passa por cima Cor do item de submenu quando o ponteiro do mouse passa por cima

cor: #FFF;

cor: #FFF;

Alterar a cor de fundo de um item de menu


O CSS anexado tag <a> contm as informaes para a cor de fundo de um item de menu. Existem vrios valores de classe de cor de fundo importantes anexados tag <a> que pertencem a diferentes estados de menu.
Para alterar a cor de fundo de um item de menu, use a seguinte tabela para localizar a regra de CSS apropriada e

alterar o valor padro:


Cor a alterar Regra de CSS para barra de menus vertical ou horizontal ul.MenuBarVertical a, ul.MenuBarHorizontal a ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover Propriedades relevantes e valores padro cor de fundo: #EEE; cor de fundo: #33C;

Fundo padro Cor de fundo quando o ponteiro do mouse passa por cima

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 433


Criao visual de pginas do Spry

Cor a alterar

Regra de CSS para barra de menus vertical ou horizontal ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

Propriedades relevantes e valores padro cor de fundo: #33C;

Cor de fundo quando em foco

Cor do item da Barra de menus quando o ponteiro do mouse passa por cima Cor do item de submenu quando o ponteiro do mouse passa por cima

cor de fundo: #33C;

cor de fundo: #33C;

Alterar a dimenso dos itens de menu


Para alterar a dimenso dos itens de menu, mude as propriedades de largura das tags li e ul do item de menu.
1 Localize a regra ul.MenuBarVertical li ou ul.MenuBarHorizontal li. 2 Altere a propriedade de largura para uma largura desejada (ou altere a propriedade para auto para remover uma

largura fixa e adicione a propriedade e o valor espao em branco: sem quebra automtica de linha; regra).
3 Localize a regra ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul. 4 Altere a propriedade de largura para uma largura desejada (ou altere a propriedade para auto para remover uma

largura fixa).
5 Localize a regra ul.MenuBarVertical ul li ou ul.MenuBarHorizontal ul li. 6 Adicione as seguintes propriedades regra: flutuao: nenhum; e cor de fundo: transparente;. 7 Exclua o valor e a propriedade largura: 8.2em;.

Posicionar submenus
A posio dos submenus da Barra de menus do Spry controlada pela propriedade de margem nas tags ul do submenu.
1 Localize a regra ul.MenuBarVertical ul ou ul.MenuBarHorizontal ul. 2 Altere os valores padro margem: -5% 0 0 95%; para os valores desejados.

Funcionamento do widget Painel flexvel


Sobre o widget Painel flexvel
O widget Painel flexvel um painel que pode armazenar contedo em um espao compacto. Para ocultar ou expor o contedo armazenado no Painel flexvel, o usurio clica na aba do widget. Este exemplo mostra um widget Painel flexvel, expandido e recolhido:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 434


Criao visual de pginas do Spry

A. Expandido B. Recolhido

O HTML do widget Painel flexvel compe-se de uma tag div externa que contm a tag div do contedo e a tag div do recipiente da aba. O HTML do widget Painel flexvel tambm inclui tags de script no cabealho do documento e aps o markup HTML do Painel flexvel. Para obter uma explicao mais abrangente sobre como o widget Painel flexvel funciona, inclusive uma anatomia completa do cdigo desse widget, consulte www.adobe.com/go/learn_dw_sprycollapsiblepanel_br.

Inserir e editar o widget Painel flexvel


Inserir o widget Painel flexvel
Selecione Inserir > Spry > Painel flexvel do Spry.

Nota: Para inserir um widget Painel flexvel, voc tambm pode usar a categoria Spry no painel Inserir.

Abrir ou fechar o Painel flexvel na Visualizao de design


Siga um destes procedimentos:

Mova o ponteiro do mouse sobre a aba do painel na Visualizao de design e clique no cone em forma de olho que
aparece direita da aba.

Selecione um widget Painel flexvel na janela Documento e selecione Aberto ou Fechado no menu pop-up Exibir,
no Inspetor de propriedades (Janela > Propriedades).

Definir o estado padro de um widget Painel flexvel


Voc pode definir o estado padro (aberto ou fechado) do widget Painel flexvel quando a pgina da Web carregada no navegador.
1 Selecione um widget Painel flexvel na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione Aberto ou Fechado no menu pop-up Estado

padro.

Ativar ou desativar a animao do widget Painel flexvel


Por padro, quando voc ativa animao para um widget Painel flexvel, o painel abre e fecha lenta e gradualmente quando o visitante do site clica na aba do painel. Se voc desativa a animao, o painel flexvel abre e fecha abruptamente.
1 Selecione um widget Painel flexvel na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque Ativar animao.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 435


Criao visual de pginas do Spry

Personalizar o widget Painel flexvel


Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Painel flexvel, ele no aceita tarefas de estilizao personalizadas. Voc pode alterar as regras de CSS para o dispositivo Painel flexvel e criar um painel flexvel com o estilo de sua preferncia. Para obter uma referncia rpida sobre como alterar as cores no dispositivo Contrair painel, consulte o Guia rpido para painis com guias, acordees e contrair painis de David Powers. Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_br. Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryCollapsiblePanel.css. O Dreamweaver salva o arquivo SpryCollapsiblePanel.css na pasta SpryAssets do site sempre que voc cria um widget Painel flexvel do Spry. Esse arquivo tambm contm informaes teis comentadas sobre vrios estilos que se aplicam ao widget. Embora voc possa facilmente editar regras para o widget Painel flexvel diretamente no arquivo CSS relacionado, voc tambm pode usar o painel Estilos CSS para editar o CSS do painel flexvel. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.

Mais tpicos da Ajuda


Painel Estilos CSS no modo Atual na pgina 128

Criar estilo de texto do widget Painel flexvel


Para criar o estilo do texto de um widget Painel flexvel, configure as propriedades do recipiente inteiro do widget Painel flexvel ou configure as propriedades dos componentes do widget individualmente.
Para alterar o formato do texto de um widget Painel flexvel, use a seguinte tabela para localizar a regra de CSS

apropriada e, em seguida, adicionar os seus prprios valores e propriedades de estilo do texto:


Estilo a alterar Regra de CSS relevante Exemplo de propriedades e valores a adicionar ou alterar fonte: Arial; font-size:medium; fonte: bold 0.7em sans-serif; (este o valor padro.) fonte: Arial; font-size:medium;

Texto no painel flexvel inteiro Texto na aba do painel apenas Texto no painel de contedo apenas

.CollapsiblePanel .CollapsiblePanelTab .CollapsiblePanelContent

Alterar as cores de fundo do widget Painel flexvel


Para alterar as cores de fundo de diversas partes de um widget Painel flexvel, use a seguinte tabela para localizar a

regra de CSS apropriada e, em seguida, adicionar ou alterar as propriedades e os valores da cor de fundo de sua preferncia:
Cor a alterar Regra de CSS relevante Exemplo de propriedade e valor a adicionar ou alterar cor de fundo: #DDD; (este o valor padro.)

Cor de fundo da aba do painel

.CollapsiblePanelTab

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 436


Criao visual de pginas do Spry

Cor a alterar

Regra de CSS relevante

Exemplo de propriedade e valor a adicionar ou alterar cor de fundo: #DDD; cor de fundo: #EEE; (este o valor padro.)

Cor de fundo do painel de contedo Cor de fundo da aba quando o painel est aberto

.CollapsiblePanelContent .CollapsiblePanelOpen .CollapsiblePanelTab

Cor de fundo da aba do painel aberta quando .CollapsiblePanelTabHover, o ponteiro do mouse passa por cima .CollapsiblePanelOpen .CollapsiblePanelTabHover

cor de fundo: #CCC; (este o valor padro.)

Limitar a largura de um painel flexvel


Por padro, o widget Painel flexvel se expande at ocupar o espao disponvel. Entretanto, voc pode restringir a largura de um widget Painel flexvel configurando uma propriedade de largura para o recipiente do painel flexvel.
1 Localize a regra CSS do arquivo .CollapsiblePanel abrindo o arquivo SpryCollapsible Panel.css. Essa regra define

propriedades para o principal elemento recipiente do widget Painel flexvel. Voc tambm pode localizar a regra selecionando o widget Painel flexvel e verificando o painel Estilos CSS (Janela > Estilos CSS). Verifique se o painel est definido no modo Atual.
2 Adicione um valor e uma propriedade de largura regra. Por exemplo largura: 300px;.

Funcionamento do widget Painis com aba


Sobre o widget Painis com aba
O widget Painis com aba um conjunto de painis que podem armazenar contedo em um espao compacto. Os visitantes do site ocultam ou revelam o contedo armazenado nos Painis com aba clicando na aba do painel que eles desejam acessar. Os painis do widget abrem de acordo com as abas em que o visitante clica. Em um widget Painis com aba, somente um painel de contedo aberto em determinado momento. Este exemplo mostra um widget Painis com aba, com o terceiro painel aberto:
A B

A. Aba B. Contedo C. Widget Painis com aba D. Painel com aba

O cdigo HTML do widget Painis com aba consiste em uma tag div externa que contm todos os painis, uma lista das abas, um div para conter os painis de contedo e um div para cada painel de contedo. O HTML do widget Painis com aba tambm inclui tags de script no cabealho do documento e aps o markup HTML do widget Painel com aba. Para obter uma explicao abrangente sobre como o widget Painis com aba funciona, inclusive uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprytabbedpanels_br.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 437


Criao visual de pginas do Spry

Inserir e editar o widget Painis com aba


Inserir o widget Painis com aba
Selecione Inserir > Spry > Painis com aba do Spry.

Nota: Para inserir um widget Painis com aba, voc tambm pode usar a categoria Spry no painel Inserir.

Adicionar um painel em um widget Painis com aba


1 Selecione um widget Painis com aba na janela Documento. 2 Clique no boto de adio de Painis no Inspetor de propriedades (Janela > Propriedades). 3 (Opcional) Altere o nome da aba selecionando o texto da aba na Visualizao de design.

Excluir um painel de um widget Painis com aba


1 Selecione um widget Painis com aba na janela Documento. 2 No menu Painis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel a ser excludo

e clique no boto de subtrao.

Abrir painel para edio


Siga um destes procedimentos:

Mova o ponteiro do mouse sobre a aba do painel para abri-lo na Visualizao de design e clique no cone em forma
de olho que aparece direita da aba.

Selecione um widget Painis com aba na janela Documento e clique no nome do painel para edit-lo no menu
Painis do Inspetor de propriedades (Janela > Propriedades).

Alterar a ordem dos painis


1 Selecione um widget Painis com aba na janela Documento. 2 No menu Painis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel que voc deseja

mover.
3 Clique nas setas para cima e para baixo para mover o painel para cima ou para baixo.

Definir o painel aberto padro


Voc pode definir qual painel do widget Painis com aba abre por padro quando a pgina aberta no navegador.
1 Selecione um widget Painis com aba na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o painel que voc deseja abrir por padro no menu

pop-up Painel padro.

Personalizar o widget Painis com aba


Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Painis com aba, ele no aceita tarefas de estilizao personalizadas. Voc pode alterar as regras de CSS para o dispositivo Painis com aba e criar um dispositivo com o estilo de sua preferncia. Para obter uma referncia rpida sobre como alterar as cores no dispositivo Painis com guias, consulte o Guia rpido para painis com guias, acordees e contrair painis de David Powers.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 438


Criao visual de pginas do Spry

Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_sprytabbedpanels_custom_br. Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryTabbedPanels.css. O Dreamweaver salva o arquivo SpryTabbedPanels.css na pasta SpryAssets do seu site sempre que voc cria um widget Painis com aba do Spry. Esse arquivo tambm contm informaes teis comentadas sobre vrios estilos que se aplicam ao widget. Embora voc possa facilmente editar regras para o widget Painis com aba diretamente no arquivo CSS relacionado, voc tambm pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.

Mais tpicos da Ajuda


Painel Estilos CSS no modo Atual na pgina 128

Criar o estilo do texto do widget Painis com aba


Para criar o estilo do texto de um widget Painis com aba, configure as propriedades do recipiente inteiro do widget Painis com aba ou configure as propriedades dos componentes do widget individualmente.
Para alterar o estilo do texto de um widget Painis com aba, use a seguinte tabela para localizar a regra de CSS

apropriada e, em seguida, adicionar seus prprios valores e propriedades de estilo do texto:


Texto a ser alterado Regra de CSS relevante Exemplo de propriedades e valores a adicionar fonte: Arial; font-size:medium; fonte: Arial; font-size:medium; fonte: Arial; font-size:medium;

Texto no widget inteiro Texto nas abas do painel apenas Texto nos painis de contedo apenas

.TabbedPanels .TabbedPanelsTabGroup ou .TabbedPanelsTab .TabbedPanelsContentGroup ou .TabbedPanelsContent

Alterar as cores de fundo do widget Painis com aba


Para alterar as cores de fundo de diversas partes de um widget Painis com aba, use a seguinte tabela para localizar

a regra de CSS apropriada e, em seguida, adicionar ou alterar as propriedades e os valores da cor de fundo de sua preferncia:
Cor a alterar Regra de CSS relevante Exemplo de propriedade e valor a adicionar ou alterar

Cor de fundo das abas do painel Cor de fundo dos painis de contedo

.TabbedPanelsTabGroup ou .TabbedPanelsTab cor de fundo: #DDD; (este o valor padro.) .Tabbed PanelsContentGroup ou .TabbedPanelsContent .TabbedPanelsTabSelected .TabbedPanelsTabHover cor de fundo: #EEE; (este o valor padro.)

Cor de fundo da aba selecionada Cor de fundo das abas do painel quando o ponteiro do mouse passa por cima

cor de fundo: #EEE; (este o valor padro.) cor de fundo: #CCC; (este o valor padro.)

Restringir a largura dos painis com aba


Por padro, o widget Painis com aba se expande at ocupar o espao disponvel. Entretanto, voc pode restringir a largura de um widget Painis com aba configurando uma propriedade de largura para o recipiente do acordeo.
1 Abra o arquivo SpryTabbedPanels.css para localizar a regra de CSS .TabbedPanels. Essa regra define propriedades

para o principal elemento recipiente do widget Painis com aba.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 439


Criao visual de pginas do Spry

Voc tambm pode localizar a regra selecionando o widget Painis com aba e verificando o painel Estilos CSS (Janela > Estilos CSS). Verifique se o painel est definido no modo Atual.
2 Adicione um valor e uma propriedade de largura regra. Por exemplo largura: 300px;.

Funcionamento do widget Dica de ferramenta


Sobre o widget Dica de ferramenta
O widget Dica de ferramenta do Spry exibe informaes adicionais quando o usurio passa o mouse sobre um elemento especfico em uma pgina da Web. O contedo adicional desaparece quando o usurio tira o mouse desse local. Tambm possvel configurar as dicas de ferramenta para permanecerem abertas por perodos maiores para que os usurios possam interagir com o seu contedo. O widget Dica de ferramenta contm os trs elementos a seguir:

O recipiente da dica de ferramenta. Este elemento contm a mensagem ou o contedo que deve ser exibido assim
que o usurio ativa a dica de ferramenta.

Os elementos da pgina que ativam a dica de ferramenta. O script do construtor. o JavaScript que informa ao Spry quando deve criar a funcionalidade de dica de
ferramenta. Quando voc inserir um widget Dica de ferramenta, o Dreamweaver cria um recipiente de dica de ferramenta usando as tags div e coloca as tags span antes e depois do elemento "acionador" (o elemento da pgina que ativa a dica de ferramenta). O Dreamweaver usa essas tags por padro. No entanto, as tags para a dica de ferramenta e para o elemento acionador podem ser de qualquer tipo, contanto que estejam no corpo da pgina. Leve em considerao os seguintes pontos ao trabalhar com o widget Dica de ferramenta:

Uma dica de ferramenta aberta ser fechada antes que a prxima seja aberta. As dicas de ferramenta so exibidas enquanto o usurio passa o mouse pela rea de acionamento. No existe nenhuma restrio quanto ao tipo de tag que pode ser usado para os acionadores e para o contedo da
dica de ferramenta. No entanto, os elementos em nvel de bloco so sempre recomendados para evitar possveis problemas de processamento entre navegadores.

Por padro, a dica de ferramenta aparece 20 pixels abaixo e direita do cursor. Para definir um ponto de aparncia
personalizada, use as opes Deslocamento horizontal e vertical do Inspetor de propriedades.

Atualmente, no possvel manter uma dica de ferramenta aberta durante o carregamento da pgina no navegador.
O widget Dica de ferramenta requer muito pouco CSS. O Spry usa o JavaScript para mostrar, ocultar e posicionar a dica de ferramenta. Voc pode aplicar outros estilos para a dica de ferramenta com as tcnicas de CSS padro, conforme necessrio para sua pgina. A nica regra contida no arquivo CSS padro uma soluo para problemas do Internet Explorer 6; essa regra faz com que a dica de ferramenta aparea acima dos elementos de formulrio ou objetos Flash. Para obter uma explicao mais abrangente sobre como o widget Dica de ferramenta Spry funciona, inclusive uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprytooltip_br. Para assistir a um tutorial em vdeo sobre como trabalhar com o widget Dica de ferramenta Spry, consulte www.adobe.com/go/lrvid4046_dw_br.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 440


Criao visual de pginas do Spry

Inserir o widget Dica de ferramenta


Selecione Inserir > Spry > Dica de ferramenta do Spry.

Nota: Para inserir um widget Dica de ferramenta, voc tambm pode usar a categoria Spry no painel Inserir. Essa ao insere um novo widget Dica de ferramenta com um recipiente para o contedo da dica de ferramenta e uma sentena de alocador de espao que age como o acionador da dica de ferramenta. Voc tambm pode selecionar um elemento existente na pgina (por exemplo, uma imagem) e, em seguida, inserir a dica de ferramenta. Ao fazer isso, o elemento selecionado age como o acionador da nova dica de ferramenta. necessrio selecionar um elemento de tag completa (por exemplo, uma tag img ou p) para que o Dreamweaver possa atribuir uma ID a esse elemento caso ainda no exista uma.

Editar opes do widget Dica de ferramenta


possvel definir opes que permitem personalizar o comportamento do widget Dica de ferramenta.
1 Passe o mouse sobre ou coloque o ponto de insero no contedo da dica de ferramenta na pgina. 2 Clique na aba azul do widget Dica de ferramenta para selecion-lo. 3 Defina as opes como desejar no Inspetor de propriedades do widget Dica de ferramenta.
Nome O nome do recipiente da dica de ferramenta. O recipiente armazena o contedo da dica de ferramenta. Por padro, o Dreamweaver usa uma tag div como o recipiente. Acionador O elemento da pgina que ativa a dica de ferramenta. Por padro, o Dreamweaver insere uma sentena de

alocador de espao, com as tags span antes e depois, como o acionador, mas possvel selecionar qualquer elemento da pgina que tenha uma ID exclusiva.
Seguir o mouse Quando est selecionada, esta opo faz com que a dica de ferramenta siga o mouse enquanto o

usurio est passando pelo elemento acionador.


Ocultar ao retirar o mouse Quando est selecionada, esta opo mantm a dica de ferramenta aberta enquanto o

mouse est passando por ela (mesmo que o mouse saia do elemento acionador). Manter a dica de ferramenta aberta ser til se houver links ou outros elementos interativos na dica de ferramenta. Se essa opo no for selecionada, o elemento de dica de ferramenta ser fechado quando o mouse sair da rea de acionamento.
Deslocamento horizontal Calcula a posio horizontal da dica de ferramenta em relao ao mouse. O valor de

deslocamento calculado em pixels e o padro equivale a 20 pixels.


Deslocamento vertical Calcula a posio vertical da dica de ferramenta em relao ao mouse. O valor de deslocamento calculado em pixels e o padro equivale a 20 pixels. Mostrar atraso O atraso em milissegundos para que a dica de ferramenta aparea depois de ter entrado no elemento acionador. O valor padro 0. Ocultar atraso O atraso em milissegundos para que a dica de ferramenta desaparea depois de ter sado do elemento

acionador. O valor padro 0.


Efeito O tipo de efeito que deve ser usado quando a dica de ferramenta for exibida. Veneziana simula uma janela

veneziana que se move para cima e para baixo para mostrar ou ocultar a dica de ferramenta. Atenuar ativa e desativa a dica de ferramenta. O valor padro Nenhum.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 441


Criao visual de pginas do Spry

Funcionamento do widget Grupo de botes de opo de validao


Sobre o widget Grupo de botes de opo de validao
O widget Grupo de botes de opo de validao um grupo de botes de opo com suporte de validao para a seleo. O widget fora a seleo de um dos botes do grupo. Este exemplo mostra um widget Grupo de botes de opo de validao em vrios estados.
B

A. Mensagens de erro do widget Grupo de botes de opo de validao B. Grupo do widget Grupo de botes de opo de validao

O widget Grupo de botes de opo de validao inclui trs estados alm do estado inicial: vlido, invlido e valor obrigatrio. Voc pode alterar as propriedades desses estados editando o arquivo CSS correspondente (SpryValidationRadio.css), de acordo com os resultados de validao desejados. Um widget Grupo de botes de opo de validao pode validar em diversos momentos: quando o usurio clica fora do widget, quando ele faz selees ou quando ele tenta enviar o formulrio.
Estado inicial Quando a pgina carregada no navegador ou quando o usurio redefine o formulrio. Estado vlido Quando o usurio faz uma seleo e o formulrio pode ser enviado. Estado obrigatrio Quando o usurio no faz uma seleo obrigatria. Estado invlido Quando o usurio seleciona um boto de opo que no tem um valor aceitvel.

Sempre que um widget Grupo de botes de opo de validao entra em um desses estados por meio de interao do usurio, a lgica da estrutura do Spry aplica uma classe CSS especfica ao recipiente HTML do widget em runtime. Por exemplo, se um usurio tentar enviar um formulrio mas no fizer selees, o Spry aplicar uma classe ao widget que provocar a exibio da mensagem de erro Faa uma seleo. As regras que controlam o estilo e os estados de exibio das mensagens de erro esto no arquivo que acompanha o widget, SpryValidationRadio.css. O cdigo HTML padro do widget Grupo de botes de opo de validao, em geral dentro de um formulrio, consiste em uma tag span de recipiente que fica em volta da tag input type="radio" do grupo de botes de opo. O cdigo HTML do widget Grupo de botes de opo de validao tambm inclui tags de script no cabealho do documento e aps o cdigo HTML do widget. Para obter uma explicao mais abrangente sobre como o dispositivo Grupo de botes de opo de validao funciona, inclusive uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_spryradio_br.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 442


Criao visual de pginas do Spry

Inserir e editar o widget Grupo de botes de opo de validao


Inserir o widget Grupo de botes de opo de validao
1 Selecione Inserir > Spry > Grupo de botes de opo de validao do Spry. 2 Na caixa de texto Nome, digite um nome para o grupo de botes de opo. 3 Adicione ou exclua botes de opo do grupo clicando nos botes de adio (+) ou subtrao (-). 4 Na coluna Rtulo, clique no nome de cada boto de opo para tornar o campo editvel e atribua nomes exclusivos

a cada boto.
5 Na coluna Valor, clique em cada valor para tornar o campo editvel e atribua um valor exclusivo a cada boto de

opo.
6 (Opcional) Clique em um boto de opo ou em seu valor para selecionar uma linha especfica e, em seguida, clique

nas setas para cima e para baixo para mover a linha para cima ou para baixo.
7 Selecione o tipo de layout para o grupo de botes de opo.
Quebras de linha Coloca cada boto de opo em uma linha separada usando quebras de linha (tags br). Tabela Coloca cada boto de opo em uma linha separada usando linhas individuais da tabela (tags tr).

8 Clique em OK.

Nota: Para inserir um widget Grupo de botes de opo, voc tambm pode usar a categoria Spry no painel Inserir.

Especificar quando a validao ocorre


Voc pode definir o ponto em que ocorre a validao: quando o usurio clica fora do widget, quando ele faz selees ou quando ele tenta enviar o formulrio.
1 Selecione um widget Grupo de botes de opo de validao na janela Documento, clicando em sua aba azul. 2 No Inspetor de propriedades (Janela > Propriedades), selecione a opo que indica quando a validao deve

ocorrer. Voc pode selecionar todas as opes ou somente Enviar.


Desfocar Valida sempre que o usurio clica fora do grupo de botes de opo. Alterar Valida quando o usurio faz selees. Enviar Valida quando o usurio tenta enviar o formulrio. A opo Enviar selecionada por padro e a seleo no pode ser cancelada.

Exibir estados do widget na Visualizao de design


1 Selecione um widget Grupo de botes de opo de validao na janela Documento, clicando em sua aba azul. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o estado que voc deseja ver no menu pop-up

Estados de visualizao. Por exemplo, selecione Inicial para ver o widget em seu estado inicial.

Alterar o status obrigatrio dos botes de opo


Por padro, os widgets Grupo de botes de opo de validao exigem que o usurio faa uma seleo antes de enviar o formulrio. Entretanto, voc pode fazer selees opcionais para o usurio.
1 Selecione um widget Grupo de botes de opo de validao na janela Documento, clicando em sua aba azul. 2 No Inspetor de propriedades (Janela > Propriedades), desmarque a opo Obrigatrio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 443


Criao visual de pginas do Spry

Especificar um valor vazio ou invlido


Voc pode especificar um valor que ser registrado como vazio ou invlido se o usurio selecionar um boto de opo associado a um desses valores. Se o usurio selecionar um boto de opo com um valor vazio, o navegador retornar a mensagem de erro "Faa uma seleo". Se o usurio selecionar um boto de opo com um valor invlido, o navegador retornar a mensagem de erro "Selecione um valor vlido".

Widget Grupo de botes de opo com um boto com valor vazio.

1 No widget Grupo de botes de opo, selecione o boto que deseja usar para o boto vazio ou invlido. Ao

especificar valores vazios ou invlidos para o widget, devem existir botes de opo correspondentes com esses valores j atribudos.
2 No Inspetor de propriedades (Janela > Propriedades) do widget, atribua ao boto de opo um valor marcado. Para

criar um boto de opo com um valor vazio, digite none na caixa de texto Valor marcado. Para criar um boto de opo com um valor invlido, digite invalid na caixa de texto Valor marcado.
3 Selecione o widget Grupo de botes de opo de validao inteiro clicando na aba azul. 4 No Inspetor de propriedades, especifique os valores vazios ou invlidos. Para criar um widget que exibe a

mensagem de erro de valor vazio "Faa uma seleo", digite none na caixa de texto Valor vazio. Para criar um widget que exibe a mensagem de erro de valor invlido "Selecione um valor vlido", digite invalid na caixa de texto Valor invlido. O boto de opo propriamente dito e o widget Grupo de botes de opo devem ter os valores none ou invalid atribudos para que as mensagens de erro sejam exibidas corretamente.

Personalizar o widget Grupo de botes de opo


Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Grupo de botes de opo de validao, ele no aceita tarefas de estilizao personalizadas. Voc pode alterar o CSS do widget Grupo de botes de opo de validao para criar um widget que tenha o estilo de sua preferncia. Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_spryradio_custom_br. Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryValidationRadio.css. O Dreamweaver salva o arquivo SpryValidationRadio.css na pasta SpryAssets do seu site sempre que voc cria um widget Grupo de botes de opo de validao do Spry. A consulta a este arquivo pode ser til, pois ele contm informaes comentadas sobre vrios estilos que se aplicam ao widget. Embora seja possvel editar facilmente as regras para o widget Grupo de botes de opo de validao diretamente no arquivo CSS relacionado, voc tambm pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.

Mais tpicos da Ajuda


Painel Estilos CSS no modo Atual na pgina 128

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 444


Criao visual de pginas do Spry

Estilo do widget Grupo de botes de opo de validao (instrues gerais)


1 Abra o arquivo SpryValidationRadio.css. 2 Localize a regra CSS para a parte do widget a ser alterada. Por exemplo, para alterar a cor de fundo do estado

obrigatrio do widget Grupo de botes de opo, edite a regra radioRequiredState no arquivo SpryValidationRadio.css.
3 Faa alteraes na regra CSS e salve o arquivo.

O arquivo SpryValidationRadio.css contm comentrios extensos, a explicao do cdigo e a finalidade de determinadas regras. Para obter mais informaes, consulte os comentrios no arquivo.

Estilo do texto das mensagens de erro do widget Grupo de botes de opo de validao
Por padro, as mensagens de erro do widget Grupo de botes de opo de validao aparecem em vermelho com uma borda slida de 1 pixel em torno do texto.
Para alterar o estilo do texto de um widget Grupo de botes de opo de validao, use a seguinte tabela para

localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar suas propriedades e valores de estilo de texto.
Texto no qual aplicar o estilo Texto da mensagem de erro Regra de CSS relevante .radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg Propriedades relevantes a alterar cor: #CC3333; borda: 1px solid #CC3333;

Funcionamento do widget Campo de texto de validao


Sobre o widget Campo de texto de validao
Um widget Campo de texto de validao do Spry um campo de texto que exibe estados vlidos ou invlidos quando o visitante do site insere texto. Por exemplo, voc pode adicionar um widget Campo de texto de validao a um formulrio no qual os visitantes digitam seus endereos de email. Se eles no digitarem o smbolo @ e um ponto no endereo de email, o widget retornar uma mensagem declarando que as informaes inseridas pelo usurio so invlidas. Este exemplo mostra um widget Campo de texto de validao em vrios estados:
A

A. Widget Campo de texto, dica ativada B. Widget Campo de texto, estado vlido C. Widget Campo de texto, estado invlido D. Widget Campo de texto, estado obrigatrio

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 445


Criao visual de pginas do Spry

O widget Campo de texto de validao inclui inmeros estados (por exemplo, vlido, invlido, estado obrigatrio e assim por diante). Voc pode alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com os resultados de validao desejados. Um widget Campo de texto de validao pode validar em vrios pontos; por exemplo, quando o visitante clica fora do widget, digita ou tenta enviar o formulrio.
Estado inicial O estado do widget quando a pgina carregada no navegador ou quando o usurio redefine o

formulrio.
Estado de foco O estado do widget quando o usurio coloca o ponto de insero no widget. Estado vlido O estado do widget depois que o usurio insere informaes corretamente e o formulrio pode ser

enviado.
Estado invlido O estado do widget depois que o usurio insere texto em um formato invlido. (Por exemplo, 06 para

um ano em vez de 2006).


Estado obrigatrio O estado do widget quando o usurio no insere texto obrigatrio no campo de texto. Estado Nmero mnimo de caracteres O estado do widget quando o usurio insere um nmero de caracteres inferior

ao obrigatrio no campo de texto.


Estado Nmero mximo de caracteres O estado do widget quando o usurio insere um nmero de caracteres superior

ao obrigatrio no campo de texto.


Estado Valor mnimo O estado do widget quando o usurio insere um valor menor que o valor obrigatrio no campo de texto. (Aplica-se a validaes do tipo inteiro, real e dados.) Estado Valor mximo O estado do widget quando o usurio insere um valor maior que o valor mximo permitido no campo de texto. (Aplica-se a validaes do tipo inteiro, real e dados.)

Sempre que um widget Campo de texto de validao entra em um desses estados por meio de interao do usurio, a lgica da estrutura do Spry aplica uma classe CSS especfica ao recipiente HTML do widget em runtime. Por exemplo, se um usurio tenta enviar um formulrio mas no insere texto em um campo de texto obrigatrio, o Spry aplica uma classe ao widget que provoca a exibio da mensagem de erro Um valor necessrio. As regras que controlam o estilo e os estados de exibio das mensagens de erro esto no arquivo CSS que acompanha o widget, SpryValidationTextField.css. O HTML padro do widget Campo de texto de validao, em geral dentro de um formulrio, consiste em uma tag <span> de recipiente que fica em volta da tag <input> do campo de texto. O HTML do widget Campo de texto de validao tambm inclui tags de script no cabealho do documento e aps o markup HTML do widget. Para obter uma explicao mais abrangente sobre como o widget Campo de texto de validao funciona, inclusive uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprytextfield_br.

Inserir e editar o widget Campo de texto de validao


Inserir o widget Campo de texto de validao
1 Selecione Inserir > Spry > Campo de texto de validao do Spry. 2 Preencha a caixa de dilogo Atributos de acesso a tag input e clique em OK.

Nota: Para inserir um widget Campo de texto de validao, voc tambm pode usar a categoria Spry no painel Inserir.

Mais tpicos da Ajuda


Criar formulrios HTML acessveis na pgina 672

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 446


Criao visual de pginas do Spry

Especificar um formato e um tipo de validao


Voc pode especificar diversos tipos de validao para o widget Campo de texto de validao. Por exemplo, voc pode especificar um tipo de validao de carto de crdito se o campo de texto aceitar nmeros de carto de crdito.
1 Selecione um widget Campo de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione um tipo de validao no menu Tipo. 3 Se aplicvel, selecione um formato no menu pop-up Formato.

Na maioria dos tipos de validao, o campo de texto deve ter um formato padro. Por exemplo, se voc aplicar o tipo de validao inteiro a um campo de texto, o widget s validar se o usurio inserir nmeros no campo de texto. Alguns tipos de validao, no entanto, permitem que voc escolha o tipo de formato aceito em seu campo de texto. Esta tabela lista os formatos e tipos de validao disponveis no Inspetor de propriedades:
Tipo de validao Nenhum Inteiro Email Endereo Formato Nenhum formato especfico necessrio. O campo de texto aceita somente nmeros. O campo de texto aceita endereos de email que contm @ e um ponto (.) que sejam precedidos e seguidos por pelo menos uma letra. Os formatos variam. Faa a sua seleo no menu pop-up Formato do Inspetor de propriedades. Os formatos variam. Faa a sua seleo no menu pop-up Formato do Inspetor de propriedades. (tt representa o formato am/pm; t representa o formato a/p.) Os formatos variam. Faa a sua seleo no menu pop-up Formato do Inspetor de propriedades. Voc pode optar por aceitar todos os cartes de crdito ou especificar determinado tipo de carto de crdito (MasterCard, Visa e outros). O campo de texto no aceita espaos nos nmeros do carto de crdito. Por exemplo: 4321 3456 4567 4567. Os formatos variam. Faa a sua seleo no menu pop-up Formato do Inspetor de propriedades. O campo de texto aceita nmeros de telefone formatados para os Estados Unidos e o Canad (000) 000-0000 ou formatos personalizados. Se voc selecionar um formato personalizado como opo, insira o formato, por exemplo 000.00(00), na caixa de texto Padro. O campo de texto aceita nmeros de CPF formatados como 000-00-0000. Se voc desejar usar um formato diferente, selecione Personalizado como seu tipo de validao e especifique um padro. O mecanismo de validao de padres aceita somente caracteres ASCII. O campo de texto aceita moeda formatada como 1,000,000.00 ou 1.000.000,00. Valida vrios tipos de nmeros: inteiros (por exemplo, 1); valores flutuantes (por exemplo, 12.123); e valores flutuantes em notao cientfica (por exemplo, 1.212e+12, 1.221e-12 onde e usado como uma potncia de 10). Os formatos variam. Faa a sua seleo no menu pop-up Formato do Inspetor de propriedades. O campo de texto aceita URLs formatados como http://xxx.xxx.xxx ou ftp://xxx.xxx.xxx. Permite que voc especifique um formato e um tipo de validao personalizado. Insira o padro do formato (e uma dica, se quiser) no Inspetor de propriedades. O mecanismo de validao de padres aceita somente caracteres ASCII.

Data Tempo

Carto de crdito

CEP Nmero de telefone

Nmero do CPF

Moeda Nmero real/notao cientfica

Endereo IP URL Personalizada

Especificar quando a validao ocorre


Voc pode definir o ponto em que ocorre a validao: quando o visitante do site clica fora do widget, enquanto ele digita ou quando ele tenta enviar o formulrio.
1 Selecione um widget Campo de texto de validao na janela Documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 447


Criao visual de pginas do Spry

2 No Inspetor de propriedades (Janela > Propriedades), selecione a opo que indica quando a validao deve

ocorrer. Voc pode selecionar todas as opes ou somente Enviar.


Desfocar Valida sempre que o usurio clica fora do campo de texto. Alterar Valida quando o usurio altera o texto do campo de texto. Enviar Valida quando o usurio tenta enviar o formulrio. A opo Enviar selecionada por padro e a seleo no pode ser cancelada.

Especificar um nmero mnimo e mximo de caracteres


Esta opo s est disponvel para os tipos de validao Nenhum, Inteiro, Endereo de email e URL.
1 Selecione um widget Campo de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), insira um nmero na caixa Caracteres (mn.) ou Caracteres

(mx.). Por exemplo, se voc inserir 3 na caixa Caracteres (mn.), o widget validar apenas se o usurio inserir trs ou mais caracteres.

Especificar valores mnimos e mximos


Esta opo est disponvel apenas para os tipos de validao Inteiro, Tempo, Moeda e Nmero real/notao cientfica.
1 Selecione um widget Campo de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), insira um nmero na caixa Valor mnimo ou Valor mximo.

Por exemplo, se voc inserir 3 na caixa Valor mnimo, o widget validar somente se o usurio inserir o nmero 3 ou um valor superior (4, 5, 6 e assim por diante) no campo de texto.

Exibir estados do widget na Visualizao de design


1 Selecione um widget Campo de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o estado que voc deseja ver no menu pop-up

Estados de visualizao. Por exemplo, se voc quiser ver o widget em seu estado vlido, selecione Vlido.

Alterar o status obrigatrio de um campo de texto


Por padro, todos os widgets Campo de texto de validao inseridos com o Dreamweaver requerem a entrada do usurio quando publicados em uma pgina da Web. Contudo, voc determinar que o preenchimento dos campos de texto pelo usurio seja opcional.
1 Selecione um widget Campo de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opo Obrigatrio de acordo com

a sua preferncia.

Criar uma dica para um campo de texto


Por haver inmeros tipos de formatos para os campos de texto, aconselhvel colocar uma dica para que os usurios saibam qual formato devem inserir. Por exemplo, um campo de texto definido com o tipo de validao Nmero de telefone s aceitar nmeros de telefone no formato (000) 000-0000. Voc pode inserir essas amostras de nmeros como uma dica para que o campo de texto exiba o formato correto quando o usurio carregar a pgina no navegador.
1 Selecione um widget Campo de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), insira uma dica na caixa de texto Dica.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 448


Criao visual de pginas do Spry

Bloquear caracteres invlidos


Voc pode impedir que os usurios insiram caracteres invlidos em um widget Campo de texto de validao. Por exemplo, se voc selecionar essa opo para um widget definido com o tipo de validao Inteiro, nada ser exibido no campo de texto se o usurio tentar digitar uma letra.
1 Selecione um widget Campo de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione a opo Forar padro.

Personalizar o widget Campo de texto de validao


Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Campo de texto de validao, ele no aceita tarefas de estilizao personalizadas. Voc pode alterar o CSS do widget Campo de texto de validao para poder criar um widget que tenha o estilo de sua preferncia. Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_sprytextfield_custom_br. Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryValidationTextField.css. O Dreamweaver salva o arquivo SpryValidationTextField.css na pasta SpryAssets do site sempre que voc cria um widget Campo de texto de validao do Spry. A consulta a este arquivo pode ser til, pois ele contm informaes comentadas sobre vrios estilos que se aplicam ao widget. Embora voc possa facilmente editar regras para o widget Campo de texto de validao diretamente no arquivo CSS relacionado, voc tambm pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.

Mais tpicos da Ajuda


Painel Estilos CSS no modo Atual na pgina 128

Estilo do texto das mensagens de erro do widget Campo de texto de validao


Por padro, as mensagens de erro do widget Campo de texto de validao aparecem em vermelho com uma borda de 1 pixel em torno do texto.
Para alterar o estilo do texto de mensagem de erros de um widget Campo de texto de validao, use a seguinte tabela

para localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar seus prprios valores e propriedades de estilo de texto:
Texto a ser alterado Texto da mensagem de erro Regra de CSS relevante Propriedades relevantes a alterar

.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState cor: #CC3333; borda: 1px solid .textfieldInvalidFormatMsg, .textfieldMinValueState #CC3333; .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg

Alterar as cores de fundo do widget Campo de texto de validao


Para alterar as cores de fundo do widget Campo de Texto de validao em vrios estados, use esta tabela para

localizar a regra de CSS apropriada e alterar os valores da cor de fundo padro:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 449


Criao visual de pginas do Spry

Cor a alterar Cor de fundo do widget em estado vlido Cor de fundo do widget em estado invlido

Regra de CSS relevante .textfieldValidState input, input.textfieldValidState

Propriedade relevante a alterar cor de fundo: #B8F5B1;

input.textfieldRequiredState, .textfieldRequiredState input, cor de fundo: #FF9F9F; input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input .textfieldFocusState input, input.textfieldFocusState cor de fundo: #FFFFCC;

Cor de fundo quando o widget est em foco

Funcionamento do widget rea de texto de validao


Sobre o widget rea de texto de validao
O widget rea de Texto de validao do Spry uma rea de texto que exibe estados vlidos e invlidos quando o usurio insere algum tipo de texto. Se a rea de texto for um campo obrigatrio e o usurio no inserir texto, o widget retornar uma mensagem informando que necessrio inserir um valor. Este exemplo mostra um widget rea de texto de validao em vrios estados:
A

A. Contador de caracteres restantes B. Widget rea de texto em foco, estado nmero mximo de caracteres C. Widget rea de texto em foco, estado vlido D. Widget rea de texto, estado obrigatrio E. Contador de caracteres digitados

O widget rea de texto de validao inclui inmeros estados (por exemplo, vlido, invlido, estado obrigatrio e assim por diante). Voc pode alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com os resultados de validao desejados. Um widget rea de texto de validao pode validar em vrios pontos; por exemplo, quando o usurio clica fora do widget, enquanto ele digita ou quando ele tenta enviar o formulrio.
Estado inicial O estado do widget quando a pgina carregada no navegador ou quando o usurio redefine o

formulrio.
Estado de foco O estado do widget quando o usurio coloca o ponto de insero no widget. Estado vlido O estado do widget depois que o usurio insere informaes corretamente e o formulrio pode ser

enviado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 450


Criao visual de pginas do Spry

Estado obrigatrio O estado do widget quando o usurio no insere qualquer texto. Estado Nmero mnimo de caracteres O estado do widget quando o usurio insere menos caracteres do que o nmero

mnimo de caracteres obrigatrio na rea de texto.


Estado Nmero mximo de caracteres O estado do widget quando o usurio insere mais caracteres do que o nmero

mximo de caracteres permitido na rea de texto. Sempre que um widget rea de texto de validao entra em um desses estados por meio de interao do usurio, a lgica da estrutura do Spry aplica uma classe CSS especfica ao recipiente HTML do widget em runtime. Por exemplo, se um usurio tentar enviar um formulrio mas no inserir texto em uma rea de texto obrigatria, o Spry aplicar uma classe ao widget que provocar a exibio da mensagem de erro Um valor necessrio. As regras que controlam o estilo e os estados de exibio das mensagens de erro esto no arquivo CSS que acompanha o widget, SpryValidationTextArea.css. O HTML padro do widget rea de texto de validao, em geral dentro de um formulrio, consiste em uma tag <span> de recipiente que fica em volta da tag <textarea> do campo de texto. O HTML do widget rea de texto de validao tambm inclui tags de script no cabealho do documento e aps o markup HTML do widget. Para obter uma explicao mais abrangente de como o widget rea de texto de validao funciona, inclusive uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprytextarea_br.

Inserir e editar o widget rea de texto de validao


Inserir o widget rea de texto de validao
1 Selecione Inserir > Spry > rea de texto de validao do Spry. 2 Preencha a caixa de dilogo Atributos de acesso a tag input e clique em OK.

Nota: Para inserir um widget rea de texto de validao, voc tambm pode usar a categoria Spry no painel Inserir.

Mais tpicos da Ajuda


Criar formulrios HTML acessveis na pgina 672

Especificar quando a validao ocorre


Voc pode definir o ponto em que ocorre a validao: quando o usurio clica fora do widget, quando ele digita ou quando ele tenta enviar o formulrio.
1 Selecione um widget rea de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione a opo Validar em que indica quando a validao

deve ocorrer. Voc pode selecionar todas as opes ou somente Enviar.


Desfocar Valida sempre que o usurio clica fora do campo de texto. Alterar Valida quando o usurio altera o texto do campo de texto. Enviar Valida quando o usurio tenta enviar o formulrio. A opo Enviar selecionada por padro e a seleo no

pode ser cancelada.

Especificar um nmero mnimo e mximo de caracteres


1 Selecione um widget rea de texto de validao na janela Documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 451


Criao visual de pginas do Spry

2 No Inspetor de propriedades (Janela > Propriedades), insira um nmero na caixa Caracteres (mn.) ou Caracteres

(mx.). Por exemplo, se voc inserir 20 na caixa Caracteres (mn.), o widget validar apenas se o usurio inserir 20 ou mais caracteres na rea de texto.

Adicionar um contador de caracteres


Voc pode adicionar um contador de caracteres que permita aos usurios saber quantos caracteres eles digitaram ou o nmero de caracteres restantes durante a insero de texto. Por padro, quando voc adiciona um contador de caracteres, o contador aparece fora do canto inferior direito do widget.
1 Selecione um widget rea de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione a opo Contagem de caracteres ou Caracteres

restantes. Nota: A opo Caracteres restantes s fica disponvel se voc define um nmero mximo de caracteres permitidos.

Exibir estados do widget na Visualizao de design


1 Selecione um widget rea de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o estado que voc deseja ver no menu pop-up

Estados de visualizao. Por exemplo, se voc quiser ver o widget em seu estado vlido, selecione Vlido.

Alterar o status obrigatrio de uma rea de texto


Por padro, todos os widgets rea de texto de validao inseridos com o Dreamweaver requerem entrada do usurio quando publicados em uma pgina da Web. Entretanto, voc pode criar reas de texto opcionais para validao.
1 Selecione um widget rea de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opo Obrigatrio de acordo com

a sua preferncia.

Criar uma dica para uma rea de texto


Voc pode adicionar uma dica rea de texto (por exemplo, Digite a descrio aqui) para que os usurios saibam o tipo de informao que eles devem inserir na rea de texto. A rea de texto exibe o texto da dica quando o usurio carrega a pgina no navegador.
1 Selecione um widget rea de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), insira uma dica na caixa de texto Dica.

Bloquear caracteres extras


Voc pode impedir que os usurios insiram mais caracteres do que o nmero mximo permitido no widget rea de texto de validao. Por exemplo, se voc selecionar essa opo para um widget definido para no aceitar mais de 20 caracteres, o usurio no poder digitar mais de 20 caracteres na rea de texto.
1 Selecione um widget rea de texto de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione a opo Bloquear caracteres extras.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 452


Criao visual de pginas do Spry

Personalizar o widget rea de texto de validao


Embora o Inspetor de propriedades permita que voc faa edies simples em um widget rea de texto de validao, ele no aceita tarefas de estilizao personalizadas. Voc pode alterar o CSS do widget rea de texto de validao para poder criar um widget que tenha o estilo de sua preferncia. Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_sprytextarea_custom_br. Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryValidationTextArea.css. O Dreamweaver salva o arquivo SpryValidationTextArea.css na pasta SpryAssets do seu site sempre que voc cria um widget rea de texto de validao do Spry. A consulta a este arquivo pode ser til, pois ele contm informaes comentadas sobre vrios estilos que se aplicam ao widget. Embora voc possa facilmente editar regras para o widget rea de texto de validao diretamente no arquivo CSS relacionado, voc tambm pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.

Mais tpicos da Ajuda


Painel Estilos CSS no modo Atual na pgina 128

Estilo do texto das mensagens de erro do widget rea de texto de validao


Por padro, as mensagens de erro do widget rea de texto de validao aparecem em vermelho com uma borda de 1 pixel em torno do texto.
Para alterar o estilo do texto de mensagens de erro de um widget rea de texto de validao, use a seguinte tabela

para localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar seus prprios valores e propriedades de estilo do texto:
Texto a ser alterado Texto da mensagem de erro Regra de CSS relevante .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg Propriedades relevantes a alterar cor: #CC3333; borda: 1px solid #CC3333;

Alterar as cores de fundo do widget rea de texto de validao


Para alterar as cores de fundo do widget rea de texto de validao em vrios estados, use esta tabela para localizar

a regra de CSS apropriada e alterar os valores da cor de fundo padro:


Cor de fundo a alterar Cor de fundo do widget em estado vlido Regra de CSS relevante .textareaValidState textarea, textarea.textareaValidState textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea .textareaFocusState textarea, textarea.textareaFocusState Propriedade relevante a alterar cor de fundo: #B8F5B1;

Cor de fundo do widget em estado invlido

cor de fundo: #FF9F9F;

Cor de fundo quando o widget est em foco

cor de fundo: #FFFFCC;

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 453


Criao visual de pginas do Spry

Funcionamento do widget Seleo de validao


Sobre o widget Seleo de validao
O widget Seleo de validao do Spry um menu suspenso que exibe estados vlidos e invlidos quando o usurio faz uma seleo. Por exemplo, voc pode inserir um widget Seleo de validao que contenha uma lista de estados, agrupados em diferentes sees e divididos por linhas horizontais. Se o usurio selecionar acidentalmente uma das linhas divisrias e no um dos estados, o widget Seleo de validao retornar uma mensagem ao usurio informando que a seleo invlida. Este exemplo mostra um widget Seleo de validao expandido e tambm recolhido em vrios estados:
B

A. Widget Seleo de validao em foco B. Widget Seleo, estado vlido C. Widget Seleo, estado obrigatrio D. Widget Seleo, estado invlido

O widget Seleo de validao inclui inmeros estados (por exemplo, vlido, invlido, valor obrigatrio e assim por diante). Voc pode alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com os resultados de validao desejados. Um widget Seleo de validao pode validar em vrios pontos; por exemplo, quando o usurio clica fora do widget, quando ele faz selees ou quando ele tenta enviar o formulrio.
Estado inicial O estado do widget quando a pgina carregada no navegador ou quando o usurio redefine o

formulrio.
Estado de foco O estado quando o usurio clica no widget. Estado vlido O estado do widget depois que o usurio seleciona um item vlido e o formulrio pode ser enviado. Estado invlido O estado do widget depois que o usurio seleciona um item invlido. Estado obrigatrio O estado do widget quando o usurio no seleciona um item vlido.

Sempre que um widget Seleo de validao entra em um desses estados por meio de interao do usurio, a lgica da estrutura do Spry aplica uma classe CSS especfica ao recipiente HTML do widget em runtime. Por exemplo, se um usurio tentar enviar um formulrio mas no selecionar um item no menu, o Spry aplicar uma classe ao widget para que ele exiba a mensagem de erro Selecione um item. As regras que controlam o estilo e os estados de exibio das mensagens de erro esto no arquivo CSS que acompanha o widget, SpryValidationSelect.css. O HTML padro do widget Seleo de validao, em geral dentro de um formulrio, consiste em uma tag <span> de recipiente que fica em volta da tag <select> da rea de texto. O HTML do widget Seleo de validao tambm inclui tags de script no cabealho do documento e aps o markup HTML do widget. Para obter uma explicao abrangente sobre como o widget Seleo de validao funciona, inclusive uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_spryselect_br.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 454


Criao visual de pginas do Spry

Inserir e editar o widget Seleo de validao


Inserir o widget Seleo de validao
1 Selecione Inserir > Spry > Seleo de validao do Spry. 2 Preencha a caixa de dilogo Atributos de acesso a tag input e clique em OK. 3 Na Visualizao de cdigo, adicione tags de opo que contenham valores e itens de menu. O Dreamweaver no

faz isso automaticamente. Para obter mais informaes, consulte o tpico anterior. Nota: Para inserir um widget Seleo de validao, voc tambm pode usar a categoria Spry no painel Inserir.

Mais tpicos da Ajuda


Criar formulrios HTML acessveis na pgina 672

Especificar quando a validao ocorre


Voc pode definir o ponto em que ocorre a validao: quando o usurio clica fora do widget, quando ele digita ou quando ele tenta enviar o formulrio.
1 Selecione um widget Seleo de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione a opo que indica quando a validao deve

ocorrer. Voc pode selecionar todas as opes ou somente Enviar.


Desfocar Valida sempre que o usurio clica fora do widget. Alterar Valida quando o usurio faz selees. Enviar Valida quando o usurio tenta enviar o formulrio. A opo Enviar selecionada por padro e a seleo no pode ser cancelada.

Exibir estados do widget na Visualizao de design


1 Selecione um widget Seleo de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o estado que voc deseja ver no menu pop-up

Estados de visualizao. Por exemplo, se voc quiser ver o widget em seu estado vlido, selecione Vlido.

Proibir ou permitir valores em branco


Por padro, todos os widgets Seleo de validao que voc insere com o Dreamweaver exigem que os usurios selecionem itens de menu que tenham um valor associado quando o widget publicado em uma pgina da Web. Entretanto, voc pode desativar essa opo.
1 Selecione um widget Seleo de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opo No permitir valores em

branco, de acordo com a sua preferncia.

Especificar um valor invlido


Voc pode especificar um valor que ser registrado como invlido se o usurio selecionar um item de menu que esteja associado a esse valor. Por exemplo, se voc especificar -1 como um valor invlido e atribuir o valor a uma tag de opo, o widget retornar uma mensagem de erro se o usurio selecionar esse item de menu.
<option value="-1"> ------------------- </option>

1 Selecione um widget Seleo de validao na janela Documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 455


Criao visual de pginas do Spry

2 No Inspetor de propriedades (Janela > Propriedades), insira um nmero para usar como um valor invlido na caixa

Valor invlido.

Personalizar o widget Seleo de validao


Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Seleo de validao, ele no aceita tarefas de estilizao personalizadas. Voc pode alterar o CSS do widget Seleo de validao para criar um widget que tenha o estilo de sua preferncia. Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_spryselect_custom_br. Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryValidationSelect.css. O Dreamweaver salva o arquivo SpryValidationSelect.css na pasta SpryAssets do seu site sempre que voc cria um widget Seleo de validao do Spry. A consulta a este arquivo pode ser til, pois ele contm informaes comentadas sobre vrios estilos que se aplicam ao widget. Embora voc possa facilmente editar regras para o widget Seleo de validao diretamente no arquivo CSS relacionado, voc tambm pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.

Mais tpicos da Ajuda


Painel Estilos CSS no modo Atual na pgina 128

Estilo do texto das mensagens de erro do widget Seleo de validao


Por padro, as mensagens de erro do widget Seleo de validao aparecem em vermelho com uma borda de 1 pixel em torno do texto.
Para alterar o estilo do texto de mensagens de erros de um widget Seleo de validao, use a seguinte tabela para

localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar suas propriedades e valores de estilo de texto:
Texto no qual aplicar o estilo Texto da mensagem de erro Regra de CSS relevante Propriedades relevantes a alterar

.selectRequiredState .selectRequiredMsg, .selectInvalidState cor: #CC3333; borda: 1px solid #CC3333; .selectInvalidMsg

Alterar as cores de fundo do widget Seleo de validao


Para alterar as cores de fundo do widget Seleo de validao em vrios estados, use esta tabela para localizar a regra

de CSS apropriada e alterar os valores da cor de fundo padro:


Cor de fundo a alterar Regra de CSS relevante Propriedade relevante a alterar cor de fundo: #B8F5B1; cor de fundo: #FF9F9F;

Cor de fundo do widget em estado vlido Cor de fundo do widget em estado invlido

.selectValidState select, select.selectValidState select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select .selectFocusState select, select.selectFocusState

Cor de fundo quando o widget est em foco

cor de fundo: #FFFFCC;

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 456


Criao visual de pginas do Spry

Funcionamento do widget Caixa de seleo de validao


Sobre o widget Caixa de seleo de validao
O widget Caixa de seleo de validao uma caixa de seleo ou um grupo de caixas de seleo em formato HTML que exibe estados vlidos e invlidos quando o usurio marca ou no marca uma caixa de seleo. Por exemplo, voc pode adicionar um widget Caixa de seleo de validao a um formulrio no qual o usurio precisa fazer trs selees. Se o usurio no fizer as trs selees, o widget retornar uma mensagem informando que o nmero mnimo de selees no foi cumprido. Este exemplo mostra um widget Caixa de seleo de validao em vrios estados:

A. Grupo de widgets Caixa de seleo de validao, estado nmero mnimo de selees B. Widget Caixa de seleo de validao, estado obrigatrio

O widget Caixa de seleo de validao inclui inmeros estados (por exemplo, vlido, invlido, valor obrigatrio e assim por diante). Voc pode alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com os resultados de validao desejados. Um widget Caixa de seleo de validao pode validar em vrios pontos; por exemplo, quando o usurio clica fora do widget, quando ele faz selees ou quando ele tenta enviar o formulrio.
Estado inicial O estado do widget quando a pgina carregada no navegador ou quando o usurio redefine o

formulrio.
Estado vlido O estado do widget depois que o usurio faz uma seleo ou corrige inmeras selees, e o formulrio pode ser enviado. Estado obrigatrio O estado do widget quando o usurio no faz uma seleo obrigatria. Estado Nmero mnimo de selees O estado do widget quando o usurio marca menos caixas de seleo do que o

nmero mnimo obrigatrio.


Estado Nmero mximo de selees O estado do widget quando o usurio marca mais caixas de seleo do que o

nmero mximo obrigatrio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 457


Criao visual de pginas do Spry

Sempre que um widget Caixa de seleo de validao entra em um desses estados por meio de interao do usurio, a lgica da estrutura do Spry aplica uma classe CSS especfica ao recipiente HTML do widget em runtime. Por exemplo, se um usurio tentar enviar um formulrio mas no fizer selees, o Spry aplicar uma classe ao widget que provocar a exibio da mensagem de erro Faa uma seleo. As regras que controlam o estilo e os estados de exibio das mensagens de erro esto no arquivo CSS que acompanha o widget, SpryValidationCheckbox.css. O HTML padro do widget Caixa de seleo de validao, em geral dentro de um formulrio, consiste em uma tag <span> de recipiente que fica em volta da tag <input type="checkbox"> da caixa de seleo. O HTML do widget Caixa de seleo de validao tambm inclui tags de script no cabealho do documento e aps o markup HTML do widget. Para obter uma explicao abrangente sobre como o widget Caixa de seleo de validao funciona, inclusive uma anatomia completa do respectivo cdigo, consulte www.adobe.com/go/learn_dw_sprycheckbox_br.

Inserir e editar o widget Caixa de seleo de validao


Inserir o widget Caixa de seleo de validao
1 Selecione Inserir > Spry > Caixa de seleo de validao do Spry. 2 Preencha a caixa de dilogo Atributos de acesso a tag input e clique em OK.

Nota: Para inserir um widget Caixa de seleo de validao, voc tambm pode usar a categoria Spry no painel Inserir.

Mais tpicos da Ajuda


Criar formulrios HTML acessveis na pgina 672

Especificar quando a validao ocorre


Voc pode definir o ponto em que ocorre a validao: quando o usurio clica fora do widget, quando ele faz selees ou quando ele tenta enviar o formulrio.
1 Selecione um widget Caixa de seleo de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione a opo que indica quando a validao deve

ocorrer. Voc pode selecionar todas as opes ou somente Enviar.


Desfocar Valida sempre que o usurio clica fora da caixa de seleo. Alterar Valida quando o usurio faz selees. Enviar Valida quando o usurio tenta enviar o formulrio. A opo Enviar selecionada por padro e a seleo no pode ser cancelada.

Especificar uma faixa mnima e mxima de selees


Por padro, um widget Caixa de seleo de validao definido como obrigatrio. No entanto, se voc inserir inmeras caixas de seleo na pgina, poder especificar uma faixa mnima e mxima de selees. Por exemplo, se voc tem seis caixas de seleo dentro da tag <span> para um nico widget Caixa de seleo de validao e deseja garantir que o usurio selecione ao menos trs, voc pode definir essa preferncia para o widget inteiro.
1 Selecione um widget Caixa de seleo de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione a opo Forar faixa. 3 Insira um nmero mnimo ou mximo (ou ambos) de caixas de seleo que o usurio deve marcar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 458


Criao visual de pginas do Spry

Exibir estados do widget na Visualizao de design


1 Selecione um widget Caixa de seleo de validao na janela Documento. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o estado que voc deseja ver no menu pop-up

Estados de visualizao. Por exemplo, selecione Inicial para ver o widget em seu estado inicial.

Personalizar mensagens de erro do widget Caixa de seleo de validao


Por padro, as mensagens de erro do widget Caixa de seleo de validao aparecem em vermelho com uma borda de 1 pixel em torno do texto. Voc pode alterar o CSS do widget Caixa de seleo de validao para criar um widget que tenha o estilo de sua preferncia. Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_sprycheckbox_custom_br.
1 Abra o arquivo SpryValidationCheckbox.css.

O Dreamweaver salva o arquivo SpryValidationCheckbox.css na pasta SpryAssets do seu site sempre que voc cria um widget Caixa de seleo de validao do Spry. aconselhvel consultar este arquivo, pois ele contm informaes comentadas sobre vrios estilos que se aplicam ao widget.
2 Use esta tabela para localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar

seus prprios valores e propriedades de estilo ao texto:


Texto no qual aplicar o Regra de CSS relevante estilo Texto da mensagem de erro .checkboxRequiredState .checkboxRequiredMsg, .checkboxMinSelectionsState .checkboxMinSelectionsMsg, .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg Propriedades relevantes a alterar

cor: #CC3333; borda: 1px solid #CC3333;

Embora voc possa facilmente editar regras para o widget Caixa de seleo de validao diretamente no arquivo CSS relacionado, voc tambm pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.

Mais tpicos da Ajuda


Painel Estilos CSS no modo Atual na pgina 128

Funcionamento do widget Senha de validao


Sobre o widget Senha de validao
O widget Senha de validao do Spry um campo de texto de senha que pode ser usado para forar regras de senha (por exemplo, nmero e tipo de caracteres). O widget fornece mensagens de aviso ou de erro com base na entrada do usurio. Nota: Familiarize-se com os widgets de validao do Spry antes de trabalhar com o widget Senha. Se no estiver familiarizado com eles, consulte Funcionamento do widget Campo de texto de validao na pgina 444 ou qualquer outra viso geral dos widgets de validao antes de continuar. Esta viso geral no apresenta todos os conceitos bsicos do widget de validao. Este exemplo mostra um widget Senha de validao em vrios estados:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 459


Criao visual de pginas do Spry

A. Widget Senha, estado do nmero mnimo de caracteres B. Widget Senha, estado do nmero mximo de caracteres C. Widget Senha, estado obrigatrio

O widget Senha de validao inclui inmeros estados (por exemplo, vlido, obrigatrio, nmero mnimo de caracteres e assim por diante). Voc pode alterar as propriedades desses estados editando o arquivo CSS correspondente (SpryValidationPassword.css), de acordo com os resultados de validao desejados. Um widget Senha de validao pode validar em vrios pontos; por exemplo, quando o visitante do site clica fora do campo de texto, digita ou tenta enviar o formulrio.
Estado inicial Quando a pgina carregada no navegador ou quando o usurio redefine o formulrio. Estado de foco Quando o usurio coloca o ponto de insero no widget. Estado vlido Quando o usurio insere informaes corretamente e o formulrio pode ser enviado. Estado de fora invlida Quando o usurio insere um texto que no corresponde aos critrios de fora do campo de

texto de senha. Por exemplo, se voc tiver especificado que a senha deve conter pelo menos duas letras maisculas e a senha inserida no tiver nenhuma ou tiver apenas uma letra maiscula.
Estado obrigatrio Quando o usurio no insere texto obrigatrio no campo de texto. Estado Nmero mnimo de caracteres Quando o usurio insere um nmero de caracteres inferior ao obrigatrio no

campo de texto de senha.


Estado Nmero mximo de caracteres Quando o usurio insere um nmero de caracteres superior ao permitido no

campo de texto de senha. Para obter uma explicao abrangente sobre como os widgets Senha de validao funcionam, bem como informaes adicionais sobre a estrutura do widget, consulte www.adobe.com/go/learn_dw_sprypassword_br.

Mais tpicos da Ajuda


Amostras do widget Senha de validao

Inserir e editar o widget Senha de validao


Inserir o widget Senha de validao
1 Selecione Inserir > Spry > Senha de validao do Spry. 2 Preencha a caixa de dilogo Atributos de acesso a tag input e clique em OK.

Nota: Para inserir um widget Senha de validao, voc tambm pode usar a categoria Spry no painel Inserir.

Mais tpicos da Ajuda


Criar formulrios HTML acessveis na pgina 672

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 460


Criao visual de pginas do Spry

Alterar o status obrigatrio de um widget Senha de validao


Por padro, todos os widgets Senha de validao inseridos com o Dreamweaver requerem entrada do usurio quando publicados em uma pgina da Web. Contudo, voc determinar que o preenchimento dos campos de texto de senha pelo usurio seja opcional.
1 Selecione um widget Senha de validao na janela Documento, clicando em sua aba azul. 2 No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opo Obrigatrio de acordo com

a sua preferncia.

Exibir estados do widget na Visualizao de design


1 Selecione um widget Senha de validao na janela Documento, clicando em sua aba azul. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o estado que voc deseja ver no menu pop-up

Estados de visualizao. Por exemplo, se voc quiser ver o widget em seu estado vlido, selecione Vlido.

Especificar quando a validao ocorre


Voc pode definir o ponto em que ocorre a validao: quando o visitante do site clica fora do widget, enquanto ele digita ou quando ele tenta enviar o formulrio.
1 Selecione um widget Senha de validao na janela Documento, clicando em sua aba azul. 2 No Inspetor de propriedades (Janela > Propriedades), selecione a opo que indica quando a validao deve

ocorrer. Voc pode selecionar todas as opes ou somente Enviar.


Desfocar Valida sempre que o usurio clica fora do campo de texto de senha. Alterar Valida quando o usurio altera o texto do campo de texto de senha. Enviar Valida quando o usurio tenta enviar o formulrio. A opo Enviar selecionada por padro e a seleo no pode ser cancelada.

Definir fora da senha


A fora da senha refere-se ao grau de correspondncia entre as combinaes de determinados caracteres e os requisitos de um campo de texto de senha. Por exemplo, se voc tiver criado um formulrio no qual os usurios selecionam uma senha, poder for-los a incluir um determinado nmero de letras maisculas na senha, um determinado nmero de caracteres especiais e assim por diante. Nota: Por padro, nenhuma das opes disponveis definida para o widget Senha.
1 Clique na aba azul do widget Senha de validao para selecion-lo. 2 Defina opes no Inspetor de propriedades (Janela > Propriedades), conforme desejar. Os nmeros inseridos nos

campos de opo so os nmeros obrigatrios para a validao do widget. Por exemplo, se voc inserir 8 na caixa Mnimo de caracteres, o widget no ser validado, a no ser que o usurio insira pelo menos oito caracteres no campo de texto de senha.
Mnimo/Mximo de caracteres Especifica o nmero mnimo e mximo de caracteres obrigatrios para que a senha seja

vlida.
Mnimo/Mximo de letras Especifica o nmero mnimo e mximo de letras (a, b, c e assim por diante) obrigatrias

para que a senha seja vlida.


Mnimo/Mximo de nmeros Especifica o nmero mnimo e mximo de nmeros (1, 2, 3 e assim por diante) obrigatrios para que a senha seja vlida.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 461


Criao visual de pginas do Spry

Mnimo/Mximo de letras maisculas Especifica o nmero mnimo e mximo de letras maisculas (A, B, C e assim por diante) obrigatrias para que a senha seja vlida. Mnimo/Mximo de caracteres especiais Especifica o nmero mnimo e mximo de caracteres especiais (!, @, # e assim

por diante) obrigatrios para que a senha seja vlida. Deixar qualquer uma das opes acima em branco faz com que o widget no seja validado em relao ao critrio em questo. Por exemplo, se voc deixar a opo Mnimo/mximo de nmeros em branco, o widget no procurar nmeros na string da senha.

Personalizar o widget Senha de validao


Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Senha de validao, ele no aceita tarefas de estilizao personalizadas. Voc pode alterar o CSS do widget Senha de validao para criar um widget que tenha o estilo de sua preferncia. Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_sprypassword_custom_br. Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryValidationPassword.css. O Dreamweaver salva o arquivo SpryValidationPassword.css na pasta SpryAssets do seu site sempre que voc cria um widget Senha de validao do Spry. A consulta a este arquivo pode ser til, pois ele contm informaes comentadas sobre vrios estilos que se aplicam ao widget. Embora voc possa facilmente editar regras para o widget Senha de validao diretamente no arquivo CSS relacionado, voc tambm pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.

Mais tpicos da Ajuda


Painel Estilos CSS no modo Atual na pgina 128

Estilo do widget Senha de validao (instrues gerais)


1 Abra o arquivo SpryValidationPassword.css. 2 Localize a regra CSS para a parte do widget a ser alterada. Por exemplo, para alterar a cor de fundo do estado

obrigatrio do widget Senha, edite a regra input.passwordRequiredState no arquivo SpryValidationPassword.css.


3 Faa alteraes no CSS e salve o arquivo.

O arquivo SpryValidationPassword.css contm comentrios extensos, a explicao do cdigo e a finalidade de determinadas regras. Para obter mais informaes, consulte os comentrios no arquivo.

Estilo do texto das mensagens de erro do widget Senha de validao


Por padro, as mensagens de erro do widget Senha de validao aparecem em vermelho com uma borda slida de 1 pixel em torno do texto.
Para alterar o estilo do texto de um widget Senha de validao, use a seguinte tabela para localizar a regra de CSS

apropriada e, em seguida, alterar as propriedades padro ou adicionar suas propriedades e valores de estilo de texto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 462


Criao visual de pginas do Spry

Texto a ser alterado

Regra de CSS relevante

Propriedades relevantes a alterar cor: #CC3333; borda: 1px solid #CC3333;

Texto da mensagem de erro

.passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg

Alterar as cores de fundo do widget Senha de validao


Para alterar as cores de fundo do widget Senha de validao em vrios estados, use esta tabela para localizar a regra

de CSS apropriada e alterar os valores da cor de fundo padro.


Cor a alterar Cor de fundo do widget em estado vlido Cor de fundo do widget em estado invlido Regra de CSS relevante .passwordValidState input, input.passwordValidState Propriedade relevante a alterar cor de fundo: #B8F5B1;

input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input .passwordFocusState input, input.passwordFocusState

cor de fundo: #FF9F9F;

Cor de fundo quando o widget est em foco

cor de fundo: #FFFFCC;

Funcionamento do widget Confirmao de validao


Sobre o widget Confirmao de validao
O widget Confirmao de validao um campo de texto ou um campo de formulrio de senha que exibe estados vlidos ou invlidos quando o usurio insere um valor que no corresponde ao valor de um campo similar no mesmo formulrio. Por exemplo, voc pode adicionar um widget Confirmao de validao a um formulrio que exige que o usurio digite novamente a senha especificada em um campo anterior. Se o usurio no digitar a senha exatamente conforme especificado antes, o widget retornar uma mensagem de erro informando que os valores no coincidem. Voc tambm pode usar o widget Confirmao de validao em conjunto com um widget Campo de texto de validao para validar endereos de email. Nota: Familiarize-se com os widgets de validao do Spry antes de trabalhar com o widget Confirmao. Se no estiver familiarizado com eles, consulte Funcionamento do widget Campo de texto de validao na pgina 444 ou qualquer outra viso geral dos widgets de validao antes de continuar. Esta viso geral no apresenta todos os conceitos bsicos do widget de validao. A ilustrao a seguir mostra uma configurao tpica do widget Confirmao:
A

A. Um campo de senha ou o widget Validao de senha do Spry B. Widget Confirmao

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 463


Criao visual de pginas do Spry

O widget Confirmao de validao inclui inmeros estados (por exemplo, vlido, invlido, obrigatrio e assim por diante). Voc pode alterar as propriedades desses estados editando o arquivo CSS correspondente (SpryValidationConfirm.css), de acordo com os resultados de validao desejados. Um widget Confirmao de validao pode validar em vrios pontos; por exemplo, quando o visitante do site clica fora do widget, digita ou tenta enviar o formulrio.
Estado inicial Quando a pgina carregada no navegador ou quando o usurio redefine o formulrio. Estado de foco Quando o usurio coloca o ponto de insero no widget. Estado vlido Quando o usurio insere informaes corretamente e o formulrio pode ser enviado. Estado invlido Quando o usurio insere um texto que no corresponde ao inserido em um campo de texto anterior, no widget Campo de texto de validao ou no widget Senha de validao. Estado obrigatrio Quando o usurio no insere texto obrigatrio no campo de texto.

Para obter uma explicao abrangente sobre como os widgets Confirmao de validao funcionam, bem como informaes adicionais sobre a estrutura do widget, consulte www.adobe.com/go/learn_dw_spryconfirm_br.

Mais tpicos da Ajuda


Amostras do widget Confirmao de validao

Inserir e editar o widget Confirmao de validao


Inserir o widget Confirmao de validao
1 Selecione Inserir > Spry > Confirmao de validao do Spry. 2 Preencha a caixa de dilogo Atributos de acesso a tag input e clique em OK.

Nota: Para inserir um widget Confirmao de validao, voc tambm pode usar a categoria Spry no painel Inserir.

Mais tpicos da Ajuda


Criar formulrios HTML acessveis na pgina 672

Alterar o status obrigatrio de um widget Confirmao de validao


Por padro, todos os widgets Confirmao de validao inseridos com o Dreamweaver requerem entrada do usurio quando publicados em uma pgina da Web. Contudo, voc pode determinar que o preenchimento dos campos de texto de confirmao pelo usurio seja opcional.
1 Selecione um widget Confirmao de validao na janela Documento, clicando em sua aba azul. 2 No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opo Obrigatrio de acordo com

a sua preferncia.

Especificar o campo de texto a ser validado


1 Selecione um widget Confirmao de validao na janela Documento, clicando em sua aba azul. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o campo de texto em relao ao qual deseja fazer a

validao, selecionando um campo de texto no menu pop-up Validar em relao a. Todos os campos de texto com IDs exclusivas atribudas a eles so exibidos como opes no menu pop-up.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 464


Criao visual de pginas do Spry

Exibir estados do widget na Visualizao de design


1 Selecione um widget Confirmao de validao na janela Documento, clicando em sua aba azul. 2 No Inspetor de propriedades (Janela > Propriedades), selecione o estado que voc deseja ver no menu pop-up

Estados de visualizao. Por exemplo, se voc quiser ver o widget em seu estado vlido, selecione Vlido.

Especificar quando a validao ocorre


Voc pode definir o ponto em que ocorre a validao: quando o visitante do site clica fora do widget, enquanto ele digita ou quando ele tenta enviar o formulrio.
1 Selecione um widget Confirmao de validao na janela Documento, clicando em sua aba azul. 2 No Inspetor de propriedades (Janela > Propriedades), selecione a opo que indica quando a validao deve

ocorrer. Voc pode selecionar todas as opes ou somente Enviar.


Desfocar Valida sempre que o usurio clica fora do campo de texto de confirmao. Alterar Valida quando o usurio altera o texto do campo de texto de confirmao. Enviar Valida quando o usurio tenta enviar o formulrio. A opo Enviar selecionada por padro e a seleo no pode ser cancelada.

Personalizar o widget Confirmao


Embora o Inspetor de propriedades permita que voc faa edies simples em um widget Confirmao de validao, ele no aceita tarefas de estilizao personalizadas. Voc pode alterar o CSS do widget Confirmao de validao para criar um widget que tenha o estilo de sua preferncia. Para obter uma lista mais avanada de tarefas de estilizao, consulte www.adobe.com/go/learn_dw_spryconfirm_custom_br. Todas as regras de CSS nos tpicos a seguir se referem s regras padro localizadas no arquivo SpryValidationConfirm.css. O Dreamweaver salva o arquivo SpryValidationConfirm.css na pasta SpryAssets do seu site sempre que voc cria um widget Confirmao de validao do Spry. A consulta a este arquivo pode ser til, pois ele contm informaes comentadas sobre vrios estilos que se aplicam ao widget. Embora voc possa facilmente editar regras para o widget Confirmao de validao diretamente no arquivo CSS relacionado, voc tambm pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel til para localizar as classes de CSS atribudas a diversos trechos do widget, especialmente se voc usar o modo Atual do painel.

Mais tpicos da Ajuda


Painel Estilos CSS no modo Atual na pgina 128

Estilo do widget Confirmao de validao (instrues gerais)


1 Abra o arquivo SpryValidationConfirm.css. 2 Localize a regra CSS para a parte do widget a ser alterada. Por exemplo, para alterar a cor de fundo do estado

obrigatrio do widget Confirmao, edite a regra input.confirmRequiredState no arquivo SpryValidationConfirm.css.


3 Faa alteraes no CSS e salve o arquivo.

O arquivo SpryValidationConfirm.css contm comentrios extensos, a explicao do cdigo e a finalidade de determinadas regras. Para obter mais informaes, consulte os comentrios no arquivo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 465


Criao visual de pginas do Spry

Estilo do texto das mensagens de erro do widget Confirmao de validao


Por padro, as mensagens de erro do widget Confirmao de validao aparecem em vermelho com uma borda slida de 1 pixel em torno do texto.
Para alterar o estilo do texto de um widget Confirmao de validao, use a seguinte tabela para localizar a regra de

CSS apropriada e, em seguida, alterar as propriedades padro ou adicionar suas propriedades e valores de estilo de texto.
Texto a ser alterado Regra de CSS relevante Propriedades relevantes a alterar cor: #CC3333; borda: 1px solid #CC3333;

Texto da mensagem de erro

.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg

Alterar as cores de fundo do widget Confirmao de validao


Para alterar as cores de fundo do widget Confirmao de validao em vrios estados, use esta tabela para localizar

a regra de CSS apropriada e alterar os valores da cor de fundo padro.


Cor a alterar Cor de fundo do widget em estado vlido Cor de fundo do widget em estado invlido Cor de fundo quando o widget est em foco Regra de CSS relevante .confirmValidState input, input.confirmValidState Propriedade relevante a alterar cor de fundo: #B8F5B1;

input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input .confirmFocusState input, input.confirmFocusState

cor de fundo: #FF9F9F;

cor de fundo: #FFFFCC;

Exibio de dados com o Spry


Sobre os conjuntos de dados do Spry
Um conjunto de dados do Spry essencialmente um objeto JavaScript que contm uma coleo de dados especificados por voc. Com o Dreamweaver, voc pode rapidamente criar esse objeto e carregar nele dados de uma fonte de dados (como um arquivo XML ou HTML). O conjunto de dados resulta em uma matriz de dados na forma de uma tabela padro, contendo linhas e colunas. Enquanto cria um conjunto de dados do Spry com o Dreamweaver, voc pode tambm especificar como deseja exibir os dados em uma pgina da Web. Considere um conjunto de dados como um continer virtual com uma estrutura de linhas e colunas. Ele existe como um objeto JavaScript cujas informaes s ficam visveis quando voc especifica exatamente como exibi-lo na pgina da Web. Voc pode exibir todos os dados nesse continer ou optar por exibir somente partes selecionadas. Para obter informaes completas sobre o funcionamento dos conjuntos de dados do Spry, consulte www.adobe.com/go/learn_dw_sdg_sprydataset_br. Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre como trabalhar com conjuntos de dados do Spry, consulte www.adobe.com/go/dw10datasets_br. Para assistir a um tutorial em vdeo sobre como trabalhar com conjuntos de dados do Spry, consulte www.adobe.com/go/lrvid4047_dw_br.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 466


Criao visual de pginas do Spry

Criar um conjunto de dados do Spry


Criar um conjunto de dados HTML do Spry
1 Se voc est apenas criando um conjunto de dados, no precisa se preocupar com o ponto de insero. Mas, se est

criando um conjunto de dados e inserindo um layout, verifique se o ponto de insero est onde voc deseja inserir o layout na pgina.
2 Escolha Inserir > Spry > Conjunto de dados do Spry. 3 Na tela Especificar fonte de dados, faa o seguinte:

Selecione HTML no menu pop-up Selecionar tipo de dados. (Ele selecionado por padro.) Especifique um nome para o novo conjunto de dados. Da primeira vez que voc criar um conjunto de dados, o
nome padro ser ds1. O nome do conjunto de dados pode conter letras, nmeros e sublinhados, mas no pode comear com um nmero.

Especifique os elementos HTML na fonte de dados que voc deseja que o Dreamweaver detecte. Por exemplo,
se voc tiver organizado seus dados dentro de uma tag div e quiser que o Dreamweaver detecte tags div em vez de tabelas, selecione Divs no menu pop-up Detectar. A opo Personalizar permite digitar qualquer nome de tag que voc deseje selecionar.

Especifique o caminho para o arquivo que contm a fonte de dados HTML. Pode ser um caminho relativo para
um arquivo local no seu site (por exemplo, dados/dados_html.html), ou ento um URL absoluto para uma pgina da Web ao vivo (usando HTTP ou HTTPS). Voc pode clicar no boto Procurar para navegar at um arquivo local e selecion-lo. O Dreamweaver processa a fonte de dados HTML na janela Seleo de dados e exibe marcadores visuais para os elementos qualificados para serem contineres do conjunto de dados. O elemento que voc deseja usar j deve ter uma ID exclusiva atribuda a ele. Se no tiver, o Dreamweaver exibir uma mensagem de erro, e voc precisar voltar ao arquivo de fonte de dados e atribuir a ele uma ID exclusiva. Alm disso, os elementos qualificados no arquivo de fonte de dados no podem residir em regies do Spry nem conter outras referncias de dados. Como alternativa, voc pode especificar um Feed em tempo de design como sua fonte de dados. Para obter mais informaes, consulte Usar um feed em tempo de design na pgina 475.

Selecione o elemento para o seu continer de dados clicando em uma das setas amarelas que aparecem na janela
Seleo de dados, ou ento escolhendo uma ID no menu pop-up Contineres de dados.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 467


Criao visual de pginas do Spry

A seleo do elemento para dados de continer do conjunto de dados HTML.

No caso de arquivos grandes, voc pode clicar na seta Expandir/reduzir, na parte inferior da janela Seleo de dados, para ver mais dados. Depois que voc selecionar o elemento de continer para o conjunto de dados, o Dreamweaver exibir uma visualizao do conjunto de dados na janela Visualizao de dados.

(Opcional) Selecione Seleo avanada de dados se quiser especificar seletores de dados CSS para o conjunto de
dados. Por exemplo, se voc especificar .product na caixa de texto Seletores de linha e .boximage na caixa de texto Seletores de coluna, o conjunto de dados incluir somente as linhas com a classe .product atribuda e somente as colunas com a classe .boximage atribuda. Se quiser digitar mais de um seletor em determinada caixa de texto, separe-os com vrgula. Para obter mais informaes, consulte Sobre os seletores de dados do Spry na pgina 475.

Quando terminar de usar a tela Especificar fonte de dados, clique em Concludo para criar o conjunto de dados
imediatamente, ou ento em Avanar para passar tela Definir opes de dados. Se voc clicar em Concludo, o conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 468


Criao visual de pginas do Spry

4 Na tela Definir opes de dados, faa o seguinte:

(Opcional) Defina os tipos de colunas do conjunto de dados selecionando uma coluna e escolhendo um tipo de
coluna no menu pop-up Tipo. Por exemplo, se uma coluna no conjunto de dados contm nmeros, selecionea e escolha number no menu pop-up Tipo. Essa opo s ser importante se voc quiser que seus usurios possam ordenar os dados por essa coluna. Voc pode selecionar uma coluna do conjunto de dados clicando em seu cabealho, escolhendo-a no menu popup Nome da coluna ou navegando at ela com as setas para a esquerda e para a direita no canto superior esquerdo da tela.

(Opcional) Especifique como deseja ordenar os dados selecionando a coluna a partir da qual deseja fazer a
ordenao no menu pop-up Ordenar colunas. Depois de selecionar a coluna, voc poder especificar o uso de ordem crescente ou decrescente.

(Opcional: somente tabelas) Desmarque a opo Usar primeira linha como cabealho se quiser usar nomes de
colunas genricos (ou seja, column0, column1, column2 etc.) em vez de nomes de colunas especificados na sua fonte de dados HTML. Nota: Se voc tiver selecionado algo diferente de uma tabela como elemento de continer do seu conjunto de dados, essa opo e a prxima no estaro disponveis. O Dreamweaver usa automaticamente column0, column1, column2 etc. como nomes de colunas de conjuntos de dados no baseados em tabelas.

(Opcional: somente tabelas) Selecione Usar colunas como linhas para reverter a orientao horizontal e vertical
dos dados no conjunto de dados. Se voc selecionar essa opo, as colunas sero usadas como linhas.

(Opcional) Selecione Filtrar linhas duplicadas para excluir as linhas duplicadas de dados do conjunto de dados. (Opcional) Selecione Desativar cache de dados se quiser ter sempre acesso aos dados mais recentes no conjunto
de dados. Se quiser que os dados sejam atualizados automaticamente, selecione Atualizar dados automaticamente e especifique um tempo de atualizao em milissegundos.

Quando terminar de usar a tela Definir opes de dados, clique em Concludo para criar o conjunto de dados
imediatamente, ou ento em Avanar para passar tela Escolher opes de insero. Se voc clicar em Concludo, o conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes).
5 Na tela Escolher opes de insero, siga um destes procedimentos:

Selecione um layout para o novo conjunto de dados e especifique as opes de configurao adequadas. Para
obter mais informaes, consulte Escolher um layout para o conjunto de dados na pgina 471.

Selecione No inserir HTML. Se voc selecionar essa opo, o Dreamweaver criar o conjunto de dados, mas
no adicionar HTML pgina. O conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes), e voc poder arrastar dados manualmente do conjunto de dados para a pgina.
6 Clique em Concludo.

O Dreamweaver criar o conjunto de dados e, se voc tiver selecionado uma opo de layout, exibir na sua pgina o layout e os alocadores de espao para os dados. Se observar a Visualizao de cdigo, voc ver que o Dreamweaver adicionou ao cabealho referncias aos arquivos SpryData.js e SpryHTMLDataSet.js. Esses arquivos so ativos importantes do Spry que funcionam em conjunto com a pgina. No remova esse cdigo da sua pgina, ou ento o conjunto de dados no funcionar. Quando carregar sua pgina em um servidor, voc precisar carregar tambm esses arquivos como dependentes.

Criar um conjunto de dados XML do Spry


1 Se voc est apenas criando um conjunto de dados, no precisa se preocupar com o ponto de insero. Mas, se est

criando um conjunto de dados e inserindo um layout, verifique se o ponto de insero est onde voc deseja inserir o layout na pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 469


Criao visual de pginas do Spry

2 Escolha Inserir > Spry > Conjunto de dados do Spry. 3 Na tela Especificar fonte de dados, faa o seguinte:

Selecione XML no menu pop-up Selecionar tipo de dados. Especifique um nome para o novo conjunto de dados. Da primeira vez que voc criar um conjunto de dados, o
nome padro ser ds1. O nome do conjunto de dados pode conter letras, nmeros e sublinhados, mas no pode comear com um nmero.

Especifique o caminho para o arquivo que contm a fonte de dados XML. Pode ser um caminho relativo para
um arquivo local no seu site (por exemplo, arquivos_de_dados/dados.xml), ou ento um URL absoluto para uma pgina da Web (usando HTTP ou HTTPS). Voc pode clicar no boto Procurar para navegar at um arquivo local e selecion-lo. O Dreamweaver processa a fonte de dados XML na janela Elementos de linha, exibindo a rvore XML de elementos de dados disponveis para seleo. Os elementos repetidos so marcados com um sinal de adio (+) e os elementos-filho so recuados. Como alternativa, voc pode especificar um Feed em tempo de design como sua fonte de dados. Para obter mais informaes, consulte Usar um feed em tempo de design na pgina 475.

Selecione o elemento que contm os dados que voc deseja exibir. Geralmente um elemento repetido como
<menu_item>, com vrios elementos-filho como <item>, <link>, <description> etc.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 470


Criao visual de pginas do Spry

A seleo de um elemento repetido para conjuntos de dados XML

Depois que voc selecionar o elemento de continer para o conjunto de dados, o Dreamweaver exibir uma visualizao do conjunto de dados na janela Visualizao de dados. A caixa de texto XPath exibe uma expresso que mostra onde o n selecionado est localizado no arquivo XML de origem. Nota: XPath (XML Path Language) uma sintaxe para lidar com trechos de um documento XML. Na maioria das vezes, essa sintaxe usada como uma linguagem de consulta para dados XML, assim como a linguagem SQL usada para bancos de dados de consulta. Para obter mais informaes sobre o XPath, consulte a especificao da linguagem XPath no site da W3C em www.w3.org/TR/xpath.

Quando terminar de usar a tela Especificar fonte de dados, clique em Concludo para criar o conjunto de dados
imediatamente, ou ento em Avanar para passar tela Definir opes de dados. Se voc clicar em Concludo, o conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 471


Criao visual de pginas do Spry

4 Na tela Definir opes de dados, faa o seguinte:

(Opcional) Defina os tipos de colunas do conjunto de dados selecionando uma coluna e escolhendo um tipo de
coluna no menu pop-up Tipo. Por exemplo, se uma coluna no conjunto de dados contm nmeros, selecionea e escolha number no menu pop-up Tipo. Essa opo s ser importante se voc quiser que seus usurios possam ordenar os dados por essa coluna. Voc pode selecionar uma coluna do conjunto de dados clicando em seu cabealho, escolhendo-a no menu popup Nome da coluna ou navegando at ela com as setas para a esquerda e para a direita no canto superior esquerdo da tela.

(Opcional) Especifique como deseja ordenar os dados selecionando a coluna a partir da qual deseja fazer a
ordenao no menu pop-up Ordenar coluna. Depois de selecionar a coluna, voc poder especificar o uso de ordem crescente ou decrescente.

(Opcional) Selecione Filtrar linhas duplicadas para excluir as linhas duplicadas de dados do conjunto de dados. (Opcional) Selecione Desativar cache de dados se quiser ter sempre acesso aos dados mais recentes no conjunto
de dados. Se quiser atualizar os dados automaticamente, selecione Atualizar dados automaticamente e especifique um tempo de atualizao em milissegundos.

Quando terminar de usar a tela Definir opes de dados, clique em Concludo para criar o conjunto de dados
imediatamente, ou ento em Avanar para passar tela Escolher opes de insero. Se voc clicar em Concludo, o conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes).
5 Na tela Escolher opes de insero, siga um destes procedimentos:

Selecione um layout para o novo conjunto de dados e especifique as opes de configurao adequadas. Para
obter mais informaes, consulte Escolher um layout para o conjunto de dados na pgina 471.

Selecione No inserir HTML. Se voc selecionar essa opo, o Dreamweaver criar o conjunto de dados, mas
no adicionar HTML pgina. O conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes), e voc poder arrastar dados manualmente do conjunto de dados para a pgina.
6 Clique em Concludo.

O Dreamweaver criar o conjunto de dados e, se voc tiver selecionado uma opo de layout, exibir na sua pgina o layout e os alocadores de espao para os dados. Se observar a Visualizao de cdigo, voc ver que o Dreamweaver adicionou ao cabealho referncias aos arquivos xpath.js e SpryData.js. Esses arquivos so ativos importantes do Spry que funcionam em conjunto com a pgina. No remova esse cdigo da sua pgina, ou ento o conjunto de dados no funcionar. Quando carregar sua pgina em um servidor, voc precisar carregar tambm esses arquivos como dependentes.

Escolher um layout para o conjunto de dados


A tela Escolher opes de insero permite selecionar diferentes opes de exibio para os valores do conjunto de dados na pgina. Voc pode exibir os dados usando uma tabela dinmica do Spry, um layout mestre/detalhado, um layout de contineres empilhados (uma nica coluna) ou um layout de contineres empilhados com rea de destaque (duas colunas). Uma representao em miniatura da aparncia de cada layout mostrada na tela Escolher opes de insero. Layout de tabela dinmica Selecione essa opo se quiser exibir seus dados em uma tabela dinmica do Spry. As tabelas do Spry permitem a ordenao dinmica de colunas e outros comportamentos interativos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 472


Criao visual de pginas do Spry

Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir tabela e siga estas etapas:
1 No painel Colunas, ajuste as colunas da tabela seguindo este procedimento:

Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna da tabela. Clique no sinal
de adio (+) e selecione um nome de coluna para adicionar novas colunas tabela.

Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. A coluna movida
para cima fica mais esquerda da tabela exibida, e a coluna movida para baixo aparece direita.
2 Para tornar uma coluna ordenvel, selecione-a no painel Colunas e escolha Ordenar coluna quando o cabealho

estiver selecionado. Todas as colunas so ordenveis por padro. Se quiser tornar uma coluna no-ordenvel, selecione seu nome no painel Colunas e desmarque Ordenar coluna quando o cabealho estiver selecionado.
3 Se voc tem estilos CSS associados pgina, seja como uma folha de estilos anexada ou como um conjunto de estilos

individuais na pgina HTML, pode aplicar uma classe CSS a uma ou mais das seguintes opes:
Classe Linha mpar Altera a aparncia das linhas com numerao mpar na tabela dinmica, de acordo com o estilo de classe selecionado. Classe Linha par Altera a aparncia das linhas com numerao par na tabela dinmica, de acordo com o estilo de

classe selecionado.
Classe Focalizao Altera a aparncia de uma linha da tabela quando voc move o mouse sobre ela, de acordo com o estilo de classe selecionado. Classe Seleo Altera a aparncia de uma linha da tabela quando voc clica nela, de acordo com o estilo de classe

selecionado. Nota: A ordem das classes mpar, par, de focalizao e de seleo na sua folha de estilos muito importante. As regras devem estar na ordem exata indicada acima (mpar, par, focalizao, seleo). Se a regra de focalizao aparecer abaixo da regra de seleo na folha de estilos, o efeito de focalizao no aparecer at que o usurio mova o mouse sobre outra linha. Se as regras de focalizao e seleo aparecerem acima das regras par e mpar na folha de estilos, os efeitos de par e mpar no funcionaro. Voc pode arrastar as regras no painel CSS para orden-las corretamente, ou ento manipular o cdigo CSS diretamente.
4 Se a tabela que voc est criando for se tornar uma tabela mestre dinmica do Spry, selecione Atualizar regies de

detalhes quando a linha estiver selecionada. Para obter mais informaes, consulte Sobre tabelas mestre dinmicas do Spry e atualizao de regies de detalhes na pgina 475.
5 Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.

Se estiver na Visualizao de design, voc ver a tabela aparecer com uma linha de cabealhos e uma linha de referncias de dados. As referncias de dados aparecem realadas e entre chaves ({}). Layout mestre/detalhado Selecione essa opo se quiser exibir seus dados usando um layout mestre/detalhado. O layout mestre/detalhado permite aos usurios clicar em um item na regio mestre ( esquerda) que atualiza as informaes na regio detalhada ( direita). Normalmente, a regio mestre contm uma longa lista de nomes; por exemplo, uma lista dos produtos disponveis. Quando o usurio clica em um dos nomes de produtos, a regio detalhada exibe muito mais informaes detalhadas sobre a seleo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 473


Criao visual de pginas do Spry

Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir layout mestre/detalhado e siga estas etapas:
1 No painel Colunas mestre, ajuste o contedo da sua regio mestre da seguinte forma:

Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna da regio mestre. Clique
no sinal de adio (+) e selecione um nome de coluna para adicionar novas colunas regio mestre. Por padro, o Dreamweaver preenche a regio mestre com dados da primeira coluna do conjunto de dados.

Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna
para cima ou para baixo no painel Colunas mestre define a ordem de aparecimento dos dados na regio mestre da pgina.
2 Repita as etapas acima para o painel Colunas detalhadas. Por padro, o Dreamweaver preenche a regio detalhada

com todos os dados que no aparecem na regio mestre (ou seja, todas as colunas, exceto a primeira do conjunto de dados).
3 (Opcional) Defina diferentes tipos de continer para os dados na regio detalhada. Para fazer isso, selecione o nome

de uma coluna detalhada e escolha o continer que deseja usar para ela no menu pop-up Tipo de continer. Voc pode escolher entre as tags DIV, P, SPAN e H1-H6.
4 Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.

Se estiver na Visualizao de design, voc ver que as regies mestre/detalhada aparecero preenchidas com as referncias de dados selecionadas por voc. As referncias de dados aparecem realadas e entre chaves ({}). Layout de contineres empilhados Selecione essa opo se quiser exibir seus dados usando uma estrutura de contineres repetidos na pgina. Por exemplo, se voc tem quatro colunas de dados no conjunto de dados, cada continer pode incluir as quatro colunas, e a estrutura de contineres se repetir para cada linha no conjunto de dados. Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir contineres empilhados e siga estas etapas:
1 No painel Colunas, ajuste o contedo dos seus contineres empilhados da seguinte forma:

Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna dos contineres
empilhados. Clique no sinal de adio (+) e selecione um nome de coluna para adicionar novas colunas aos contineres. Por padro, o Dreamweaver preenche os contineres empilhados com dados de todas as colunas do conjunto de dados.

Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna
para cima ou para baixo no painel Colunas define a ordem de aparecimento dos dados nos contineres empilhados da pgina.
2 (Opcional) Defina diferentes tipos de continer para os dados nos contineres empilhados. Para fazer isso, selecione

o nome de uma coluna do conjunto de dados e escolha o continer que deseja usar para ela no menu pop-up Tipo de continer. Voc pode escolher entre as tags DIV, P, SPAN e H1-H6.
3 Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.

Se estiver na Visualizao de design, voc ver o continer preenchido com as referncias de dados selecionadas por voc. As referncias de dados aparecem realadas e entre chaves ({}).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 474


Criao visual de pginas do Spry

Layout de contineres empilhados com rea de destaque Selecione essa opo se quiser exibir seus dados usando uma estrutura de contineres repetidos na pgina, com uma rea de destaque em cada continer. Normalmente, a rea de destaque contm uma imagem. O layout de rea de destaque semelhante ao de contineres empilhados. A diferena que, no layout de rea de destaque, a exibio dos dados dividida em duas colunas separadas (dentro do mesmo continer). Depois de selecionar essa opo, clique no boto Configurar para abrir a caixa de dilogo Inserir layout de rea de destaque e siga estas etapas:
1 No painel Colunas de destaque, ajuste o contedo da sua rea de destaque da seguinte forma:

Selecione um nome de coluna e clique no sinal de subtrao (-) para excluir a coluna da rea de destaque. Clique
no sinal de adio (+) e selecione um nome de coluna para adicionar novas colunas rea de destaque. Por padro, o Dreamweaver preenche a rea de destaque com dados da primeira coluna do conjunto de dados.

Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna
para cima ou para baixo no painel Colunas de destaque define a ordem de aparecimento dos dados na rea de destaque da pgina.
2 (Opcional) Defina diferentes tipos de continer para os dados na rea de destaque. Para fazer isso, selecione o nome

de uma coluna do conjunto de dados e escolha o continer que deseja usar para ela no menu pop-up Tipo de continer. Voc pode escolher entre as tags DIV, P, SPAN e H1-H6.
3 Repita as etapas acima para o painel Colunas empilhadas. Por padro, o Dreamweaver preenche as colunas

empilhadas com todos os dados que no aparecem na rea de destaque (ou seja, todas as colunas, exceto a primeira do conjunto de dados).
4 Clique em OK para fechar a caixa de dilogo. Depois, clique em Concludo na tela Escolher opes de insero.

Se estiver na Visualizao de design, voc ver a rea de destaque com os contineres empilhados ao longo dela, preenchida com as referncias de dados selecionadas por voc. As referncias de dados aparecem realadas e entre chaves ({}). No inserir HTML Selecione essa opo se quiser criar um conjunto de dados, mas no quiser que o Dreamweaver insira nele um layout HTML. O conjunto de dados ficar disponvel no painel Ligaes (Janela > Ligaes), e voc poder arrastar dados manualmente do conjunto de dados para a pgina. Mesmo que voc crie um conjunto de dados sem inserir um layout, ainda poder inserir um dos layouts HTML disponveis a qualquer momento. Para fazer isso, clique duas vezes no nome do conjunto de dados no painel Ligaes, continue clicando para chegar tela Escolher opes de insero, selecione o layout e clique em Concludo. Nota: Voc tambm pode arrastar o nome do conjunto de dados do painel Ligaes para o ponto de insero na pgina. Quando voc fizer isso, a tela Escolher opes de insero ser aberta. Selecione o layout e clique em Concludo.

Editar um conjunto de dados


Depois de criar um conjunto de dados do Spry, voc poder edit-lo a qualquer momento.
No painel Ligaes (Janela > Ligaes), clique duas vezes no nome do seu conjunto de dados e edite-o.

Nota: Quando voc edita um conjunto de dados e seleciona um novo layout na tela Escolher opes de insero, o Dreamweaver no substitui o layout que j est na pgina. Em vez disso, insere um novo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 475


Criao visual de pginas do Spry

Usar um feed em tempo de design


Se voc est trabalhando com dados que ainda esto em desenvolvimento, talvez seja til usar um feed em tempo de design. Por exemplo, se o desenvolvedor do servidor ainda estiver finalizando o banco de dados por trs do seu arquivo de dados XML, voc pode usar uma verso de teste do arquivo para criar sua pgina separadamente do desenvolvimento do banco de dados. Quando voc usa um feed em tempo de design, o Dreamweaver preenche seu ambiente de trabalho somente com dados desse feed. As referncias fonte de dados existentes no cdigo da pgina permanecem como referncias fonte de dados real que voc deseja utilizar.
1 Comece criando um conjunto de dados do Spry (consulte os procedimentos anteriores para obter instrues). 2 Na tela Especificar fonte de dados, clique no link Feed em tempo de design. 3 Clique no boto Procurar para localizar o feed em tempo de design e clique em OK.

Sobre os seletores de dados do Spry


Quando voc usa o Dreamweaver para criar um conjunto de dados do Spry, por padro, o Dreamweaver inclui todos os dados em um continer selecionado. Voc pode refinar essa seleo usando seletores de dados CSS. Os seletores de dados CSS permitem incluir somente uma parte dos dados da fonte de dados, possibilitando que voc especifique regras CSS anexadas a determinados dados. Por exemplo, se voc especificar .product na caixa de texto Seletores de linha da tela Especificar fonte de dados, o Dreamweaver criar um conjunto de dados contendo somente linhas com a classe .product atribuda. Voc precisa selecionar a opo Seleo avanada de dados, na tela Especificar fonte de dados, para que as caixas dos seletores de dados se tornem ativas. Se voc inserir seletores de dados e desmarcar essa opo, o Dreamweaver ir reter o que voc digitar nas caixas, mas no os utilizar como filtros para o conjunto de dados.

Sobre tabelas mestre dinmicas do Spry e atualizao de regies de detalhes


Um dos usos mais comuns dos conjuntos de dados do Spry criar uma ou mais tabelas HTML que atualizam dinamicamente outros dados da pgina em resposta a uma ao do usurio. Por exemplo, se um usurio seleciona um produto em uma lista de produtos de uma tabela, o conjunto de dados pode atualizar imediatamente os dados em outra parte da pgina com as informaes detalhadas sobre o produto selecionado. Com o Spry, essas atualizaes no exigem uma atualizao de pgina. Essas regies separadas da pgina so conhecidas como regies mestre e de detalhes. Normalmente, uma rea da pgina (a regio mestre) exibe uma lista de itens categorizados (por exemplo, uma lista de produtos), e outra rea da pgina (a regio de detalhes) exibe mais informaes sobre um registro selecionado. Cada conjunto de dados mantm a noo de uma linha atual e, por padro, a linha atual definida como a primeira linha de dados no conjunto de dados. Quando um usurio faz selees diferentes em uma regio mestre (novamente, adotando o exemplo de uma lista de produtos distintos), na verdade, o Spry altera a linha atual do conjunto de dados. Como a regio de detalhes dependente da regio mestre, todas as alteraes ocorridas a partir da interao do usurio com a regio mestre (por exemplo, a seleo de produtos diferentes) resultam em alteraes nos dados exibidos na regio de detalhes. O Dreamweaver cria layouts mestre/detalhados automaticamente, para que todas as associaes corretas entre regies mestre e de detalhes estejam presentes. Mas, se voc quiser criar uma tabela mestre dinmica por conta prpria, ter a opo de prepar-la para a associao posterior com uma regio de detalhes. Quando voc seleciona a opo Atualizar regies de detalhes quando a linha estiver selecionada (na caixa de dilogo Inserir tabela), o Dreamweaver insere uma tag spry:setrow dentro da tag da linha repetitiva na sua tabela dinmica. Esse atributo prepara a tabela como mestre, com a capacidade de redefinir a linha atual do conjunto de dados medida que o usurio interage com a tabela.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 476


Criao visual de pginas do Spry

Para obter mais informaes sobre a criao manual de regies mestre/de detalhes, consulte o Guia de desenvolvedor do Spry em www.adobe.com/go/learn_dw_sdg_masterdetail_br.

Criar uma regio do Spry


A estrutura do Spry usa dois tipos de regies: uma a regio do Spry ao redor de objetos de dados como tabelas e listas de repeties, a outra uma regio de detalhes do Spry usada com um objeto de tabela mestre para permitir a atualizao dinmica de dados em uma pgina do Dreamweaver. Todos os objetos de dados do Spry devem estar em uma regio do Spry. (Se voc tentar adicionar um objeto de dados do Spry antes de adicionar uma regio do Spry a uma pgina, o Dreamweaver solicitar a incluso de uma regio do Spry.) Por padro, as regies do Spry esto em contineres div HTML. Voc pode adicion-las antes de adicionar uma tabela, adicion-las automaticamente ao inserir uma tabela ou lista de repeties ou coloc-las em torno de tabelas ou objetos de lista de repeties existentes. Ao adicionar uma regio de detalhes, normalmente voc adiciona o objeto de tabela mestre primeiro e seleciona a opo Atualizar regies de detalhes (consulte Layout de tabela dinmica na pgina 471). O nico valor diferente e especfico para uma regio de detalhes a opo Tipo na caixa de dilogo Inserir regio do Spry.
1 Selecione Inserir > Spry > Regio do Spry.

Voc tambm pode clicar no boto Regio do Spry, na categoria Spry do painel Inserir.
2 Para o objeto recipiente, selecione a opo <div> ou <span>. O padro usar um recipiente <div>. 3 Escolha uma das seguintes opes:

Para criar uma Regio do Spry, selecione Regio (a padro) como o tipo de regio a inserir. Para criar uma Regio de detalhes do Spry, selecione a opo Regio de detalhes. Voc s usaria uma regio de
detalhes se quisesse ligar os dados dinmicos que so atualizados como dados em outras alteraes de regio do Spry. Importante: preciso inserir uma regio de detalhes em um <div> diferente da regio da tabela mestre. Convm usar a Visualizao de cdigo para posicionar o ponto de insero corretamente.
4 Escolha o conjunto de dados do Spry no menu. 5 Se quiser criar ou alterar a regio definida para um objeto, selecione o objeto e escolha uma destas opes:
Quebra de linha da seleo Coloca uma nova regio em torno de um objeto. Substituir seleo Substitui uma regio existente de um objeto.

6 Quando voc clica em OK, o Dreamweaver coloca um alocador de espao de regio na pgina com o texto O

contedo da regio do Spry inserido aqui. Voc pode substituir o texto desse alocador de espao por um objeto de dados do Spry, como uma tabela ou lista de repeties, ou por dados dinmicos no painel Ligaes (Janela > Ligaes).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 477


Criao visual de pginas do Spry

O painel Ligaes exibe os dados disponveis no conjunto de dados.

Nota: No painel Ligaes, existem alguns elementos internos do Spry, ds_RowID, ds_CurrentRowID e ds_RowCount, tambm listados. O Spry os utiliza para definir a linha na qual o usurio clicou ao determinar como atualizar as regies de detalhes dinmicas.
7 Para substituir o texto do alocador de espao por um objeto de dados do Spry (por exemplo, uma tabela do Spry),

clique no boto apropriado do objeto de dados do Spry, na categoria Spry do painel Inserir.
8 Para substituir o texto do alocador de espao por dados dinmicos, use um dos seguintes mtodos:

Arraste um ou mais elementos no painel Ligaes sobre o texto selecionado. Na Visualizao de cdigo, digite o cdigo de um ou mais elementos diretamente. Use este formato: {datasetname::element-name}, como em {ds1::category}. ou {dsProducts::desc}. Se voc est usando somente um conjunto de dados no arquivo ou elementos de dados do mesmo conjunto de dados definido para a regio, possvel omitir o nome do conjunto de dados e apenas gravar {category} ou {desc}.

Independentemente do mtodo que voc usar para definir o contedo de sua regio, estas linhas sero adicionadas ao cdigo HTML:
<div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>

Criar uma regio repetitiva do Spry


Voc pode adicionar regies repetitivas para exibir os dados. Uma regio repetitiva uma estrutura de dados simples que voc pode formatar quando necessrio para apresentar seus dados. Por exemplo, voc pode usar uma regio repetida para exibir um conjunto de miniaturas fotogrficas, uma depois da outra, em um objeto de layout de pgina como um elemento AP div.
1 Selecione Inserir > Spry > Repetio do Spry.

Voc tambm pode clicar no boto Repetio do Spry, na categoria Spry do painel Inserir.
2 Para o recipiente do objeto, selecione a opo <div> ou <span> dependendo do tipo de tag desejado. O padro

usar um recipiente <div>.


3 Selecione a opo Repetir (padro) ou Repetir filhos.

Se voc quiser mais flexibilidade, convm usar a opo Repetir filhos que valida os dados de cada linha de uma lista no nvel filho. Por exemplo, se voc tem uma lista <ul>, os dados so verificados no nvel <li>. Se voc escolher a opo Repetir, os dados sero verificados no nvel <ul>. A opo Repetir filhos pode ser especialmente til se voc usar expresses condicionais no cdigo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 478


Criao visual de pginas do Spry

4 Escolha o conjunto de dados do Spry no menu. 5 Se j h texto ou elementos selecionados, voc pode envolv-los ou substitu-los. 6 Clique em OK para exibir uma regio de repetio na pgina.

Nota: Todos os objetos de dados do Spry precisam estar em regies. Ento, verifique se voc criou uma regio do Spry na sua pgina antes de inserir uma regio repetitiva.
7 Quando voc clica em OK, o Dreamweaver insere um alocador de espao de regio na pgina com o texto O

contedo da regio do Spry inserido aqui. Voc pode substituir o texto desse alocador de espao por um objeto de dados do Spry, como uma tabela ou lista de repeties, ou por dados dinmicos no painel Ligaes (Janela > Ligaes).

O painel Ligaes exibe os dados disponveis no conjunto de dados.

Nota: No painel Ligaes, existem alguns elementos internos do Spry, ds_RowID, ds_CurrentRowID e ds_RowCount, tambm listados. O Spry os utiliza para definir a linha na qual o usurio clicou ao determinar como atualizar as regies de detalhes dinmicas.
8 Para substituir o texto do alocador de espao por um objeto de dados do Spry, clique no boto apropriado do objeto

de dados do Spry no painel Inserir.


9 Para substituir o texto do alocador de espao por um ou mais dados dinmicos, use um dos seguintes mtodos:

Arraste um ou mais elementos no painel Ligaes sobre o texto selecionado. Na Visualizao de cdigo, digite o cdigo de um ou mais elementos diretamente. Use este formato: {datasetname::element-name}, como em {ds1::category}. ou {dsProducts::desc}. Se voc est usando somente um conjunto de dados no arquivo ou elementos de dados do mesmo conjunto de dados definido para a regio, possvel omitir o nome do conjunto de dados e apenas gravar {category} ou {desc}.

Independentemente do mtodo que voc usar para definir o contedo de sua regio, estas linhas sero adicionadas ao seu cdigo HTML:
<div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>

Criar uma regio de listas de repetio do Spry


Voc pode adicionar listas de repetio para exibir os dados como uma lista ordenada, uma lista no-ordenada (com marcadores), uma lista de definies ou uma lista suspensa.
1 Selecione Inserir > Spry > Lista de repetio do Spry.

Voc tambm pode clicar no boto Lista de repetio do Spry, na categoria Spry do painel Inserir.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 479


Criao visual de pginas do Spry

2 Selecione a tag recipiente a ser usada: UL, OL, DL ou SELECT. As outras opes variam de acordo com o recipiente

escolhido. Se voc escolher SELECT, defina os seguintes campos:

Exibir coluna: isto que aparece quando os usurios visualizam a pgina no navegador. Coluna de valor: este o valor real enviado ao servidor de fundo.
Por exemplo, possvel criar uma lista de estados e mostrar os usurios Alabama e Alaska, mas enviar AL ou AK ao servidor. Voc tambm pode usar SELECT como uma ferramenta de navegao e mostrar os nomes de produto como Adobe Dreamweaver e Adobe Acrobat aos usurios, mas enviar URLs como support/products/dreamweaver.html e support/products/acrobat.html ao servidor.
3 Escolha o conjunto de dados do Spry no menu. 4 Escolha as colunas a serem exibidas. 5 Clique em OK para exibir uma regio de lista de repetio na pgina. Na Visualizao de cdigo, voc pode ver que

as tags HTML <ul>, <ol>, <dl> ou as tags de seleo FORM so inseridas no arquivo. Nota: Se voc tentar inserir uma regio de lista de repetio sem ter criado uma regio, o Dreamweaver solicitar a incluso de uma para que voc possa inserir a tabela. Todos os objetos de dados do Spry devem estar contidos nas regies.

Incluso de efeitos do Spry


Viso geral dos efeitos do Spry
Efeitos do Spry so aprimoramentos visuais que podem ser aplicados a quase todo elemento de uma pgina HTML com o uso de JavaScript. Os efeitos so geralmente usados para realar informaes, criar transies animadas ou alterar um elemento de pgina visualmente por determinado perodo. Voc pode aplicar efeitos aos elementos HTML sem necessidade de tags personalizadas adicionais. Nota: Para aplicar um efeito a um elemento, ele deve estar selecionado ou ter uma identificao. Se, por exemplo, voc est aplicando um realce a uma tag div que no est selecionada, o div deve ter um valor vlido de identificao. Se o elemento no existir, voc ter que adicionar um ao cdigo HTML. Os efeitos podem alterar a opacidade, a escala, a posio e as propriedades de estilo de um elemento como a cor de fundo. Voc pode criar efeitos visuais interessantes combinando duas ou mais propriedades. Como esses efeitos se baseiam no Spry, quando o usurio clica em um elemento com um efeito, somente o elemento atualizado dinamicamente, sem atualizao da pgina HTML inteira. O Spry inclui estes efeitos:
Aparecer/Desaparecer Faz um elemento aparecer ou desaparecer. Realce Altera a cor de fundo de um elemento. Cego Simula uma veneziana que abre ou fecha para ocultar ou revelar o elemento. Deslizar Move o elemento para cima ou para baixo. Aumentar/Diminuir Aumenta ou reduz o tamanho do elemento. Espalhar D a impresso de que o elemento se espalha da esquerda para a direita. Apertar Faz o elemento desaparecer no canto superior esquerdo da pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 480


Criao visual de pginas do Spry

Importante: Quando voc usa um efeito, vrias linhas de cdigo so adicionadas ao arquivo na Visualizao de cdigo. Uma linha identifica o arquivo SpryEffects.js, que necessrio para incluir os efeitos. No remova essa linha do cdigo ou os efeitos no funcionaro. Para obter uma viso geral abrangente dos efeitos do Spry disponveis na estrutura do Spry, consulte www.adobe.com/go/learn_dw_spryeffects_br.

Aplicar um efeito Aparecer/Desaparecer


Nota: Voc pode usar este efeito com qualquer elemento HTML, exceto applet, body, iframe, object, tr, tbody ou th.
1 (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito. 2 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos >

Aparecer/Desaparecer no menu.
3 Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha

<Seleo atual>.
4 Na caixa Durao do efeito, defina em milissegundos o tempo de ocorrncia do efeito. 5 Selecione o efeito que deseja aplicar: Desaparecer ou Aparecer. 6 Na caixa Desaparecer de, defina a porcentagem de opacidade para quando o efeito aparecer. 7 Na caixa Desaparecer at, defina a porcentagem de opacidade para at quando o efeito desaparecer. 8 Selecione Alternar efeito se voc quiser que o efeito seja reversvel, passando de desaparecer para aparecer e vice-

versa com cliques sucessivos.

Aplicar o efeito Persiana


Nota: Use esse efeito somente com estes elementos HTML: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu oupre.
1 (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito. 2 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos >

Veneziana no menu.
3 Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha

<Seleo atual>.
4 Na caixa Durao do efeito, defina em milissegundos o tempo de ocorrncia do efeito. 5 Selecione o efeito que deseja aplicar: Ocultar ou Mostrar. 6 Na caixa Ocultar de/Mostrar de, defina o ponto inicial de rolagem do efeito como uma porcentagem ou um nmero

pixel. Esses valores so calculados a partir da parte superior do elemento.


7 No campo Ocultar at/Mostrar at, defina o ponto final de rolagem do efeito como uma porcentagem ou um

nmero pixel. Esses valores so calculados a partir da parte superior do elemento.


8 Selecione Alternar efeito se voc quiser que o efeito seja reversvel, rolando a tela para cima e para baixo com cliques

sucessivos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 481


Criao visual de pginas do Spry

Aplicar um efeito Aumentar/Diminuir


Nota: Use esse efeito com estes elementos HTML: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu oupre.
1 (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito. 2 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos >

Aumentar/Diminuir no menu pop-up.


3 Selecione a ID do elemento no menu pop-up do elemento de destino. Se voc j selecionou um elemento, escolha

<Seleo atual>.
4 No campo Durao do efeito, defina em milissegundos o tempo de ocorrncia do efeito. 5 Selecione o efeito que deseja aplicar: Aumentar ou Diminuir. 6 Na caixa Aumentar de/Diminuir de, defina o tamanho do elemento quando o efeito comea. Deve ser uma

porcentagem do tamanho ou um valor em pixel.


7 Na caixa Aumentar at/Diminuir at, defina o tamanho do elemento quando o efeito termina. Deve ser uma

porcentagem do tamanho ou um valor em pixel.


8 Se voc optar por pixels para as caixas Aumentar/Diminuir de ou at, o campo de largura e altura ficar visvel.

Dependendo da opo escolhida, o elemento aumentar ou diminuir proporcionalmente.


9 Indique se voc deseja que o elemento aumente ou diminua no canto superior esquerdo da pgina ou no centro da

pgina.
10 Selecione Alternar efeito se voc quiser que o efeito seja reversvel, aumentando e diminuindo com cliques

sucessivos.

Aplicar um efeito Realce


Nota: Voc pode usar este efeito com qualquer elemento HTML, excetoapplet, body, frame, frameset ou noframes.
1 (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito. 2 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos > Realce

no menu.
3 Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha

<Seleo atual>.
4 Na caixa Durao do efeito, defina em milissegundos o tempo de durao do efeito. 5 Selecione a cor para iniciar o realce. 6 Selecione a cor para finalizar o realce. Essa cor dura somente pelo tempo definido em Durao do efeito. 7 Selecione a cor que o elemento ter depois que o realce terminar. 8 Selecione Alternar efeito se voc quiser que o efeito seja reversvel, alternando as cores de realce com cliques

sucessivos.

Aplicar um efeito Espalhar


Nota: Use esse efeito com estes elementos HTML: address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre outable.
1 (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 482


Criao visual de pginas do Spry

2 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos >

Espalhar no menu.
3 Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha

<Seleo atual>.

Aplicar o efeito Deslizar


Para que o efeito Deslizar funcione adequadamente, uma tag de recipiente com um ID exclusivo deve ser colocada em volta do elemento de destino. A tag de recipiente que voc coloca em volta do elemento de destino deve ser uma tag blockquote, dd, form, div ou center. A tag do elemento de destino deve ser uma das seguintes: blockquote, dd,div, form, center, table, span, input, textarea, select ou image.
1 (Opcional) Selecione a tag de recipiente do contedo ao qual voc deseja aplicar o efeito. 2 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos >

Deslizar no menu.
3 Selecione a ID da tag de recipiente no menu do elemento de destino. Se o recipiente j estiver selecionado, escolha

<Seleo atual>.
4 No campo Durao do efeito, defina em milissegundos o tempo de ocorrncia do efeito. 5 Selecione o efeito que deseja aplicar: Deslizar para cima ou Deslizar para baixo. 6 Na caixa Deslizar para cima, defina o ponto inicial de deslizamento como uma porcentagem ou um nmero pixel. 7 Na caixa Deslizar para cima at, defina o ponto final de deslizamento como uma porcentagem ou um nmero

positivo em pixel.
8 Selecione Alternar efeito se voc quiser que o efeito seja reversvel, deslizando a tela para cima e para baixo com

cliques sucessivos.

Aplicar um efeito Apertar


Nota: Use esse efeito somente com estes elementos HTML: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu oupre.
1 (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito. 2 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Efeitos >

Apertar no menu.
3 Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha

<Seleo atual>.

Adicionar um efeito extra


Voc pode associar vrios comportamentos de efeitos com o mesmo elemento para produzir resultados interessantes.
1 (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito. 2 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione um efeito no

menu Efeitos.
3 Selecione a identificao do elemento no menu do elemento de destino. Se voc j selecionou um elemento, escolha

<Seleo atual>.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 483


Criao visual de pginas do Spry

Excluir um efeito
Voc pode remover um ou mais comportamentos de efeitos de um elemento.
1 (Opcional) Selecione o elemento de contedo ou layout ao qual voc deseja aplicar o efeito. 2 No painel Comportamentos (Janela > Comportamentos), clique no efeito que voc deseja excluir da lista de

comportamentos.
3 Siga um destes procedimentos:

Clique no boto Remover evento na barra de ttulo do subpainel (-). Clique com o boto direito do mouse (Windows) ou Control-clique (Macintosh) sobre o comportamento e
selecione Excluir comportamento.

ltima atualizao em 28/4/2010

484

Captulo 16: Uso dos servios on-line da Adobe


Servios on-line da Adobe
Os servios on-line da Adobe so aplicativos da Web hospedados que funcionam de maneira semelhante s ferramentas de rea de trabalho tradicionais. No entanto, a vantagem dos servios on-line que eles esto sempre atualizados, por serem hospedados na Web e no em seu computador. O Dreamweaver se integra diretamente com o Adobe BrowserLab e o Adobe Business Catalyst InContext Editing. A ajuda para trabalhar com esses servios est includa nas sees da Ajuda a seguir. O Dreamweaver tambm se integra com os servios on-line do Adobe CS Live (que inclui o BrowserLab). Para obter mais informaes sobre o trabalho com o CS Live, consulte Uso do Adobe CS Live. Para obter mais informaes sobre o gerenciamento dos servios on-line da Adobe, consulte o site da Adobe em www.adobe.com/go/learn_creativeservices_br.

BrowserLab
O Adobe Browser Lab permite que voc visualize o contedo da Web local no Dreamweaver, sem que seja necessrio post-lo primeiro em um servidor de acesso pblico. possvel visualizar arquivos a partir do seu site local Dreamweaver ou de um servidor remoto ou de teste. Para obter uma viso geral em vdeo da equipe de engenharia do Dreamweaver sobre como trabalhar com o BrowserLab, consulte www.adobe.com/go/dwcs5drf_br. Para obter informaes sobre como usar o servio on-line BrowserLab, consulte http://browserlab.adobe.com.

Definir a preferncia do local do arquivo


O BrowserLab permite que voc visualize verses locais de seus arquivos (ou seja, arquivos que voc no carregou no servidor da Web), ou arquivos em outros servidores (por exemplo, um servidor de teste remoto). Quando voc visualizar um arquivo local, o BrowserLab na verdade carrega o arquivo para um servidor BrowserLab, captura os instantneos de sua pgina em navegadores diferentes e, em seguida exibe as capturas de tela na janela de aplicativo do BrowserLab. Quando voc visualizar um arquivo de um servidor, o BrowserLab executa essa operao como se fosse um arquivo dinmico: captura instantneos do arquivo servidor em navegadores diferentes e, em seguida exibe as capturas de tela na janela de aplicativo do BrowserLab.
1 Escolha Janela > Extenses > Adobe BrowserLab.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 485


Uso dos servios on-line da Adobe

2 No painel de servios da Web do BrowserLab, escolha um local no menu pop-up.

Nota: O local do arquivo permanecer o mesmo at que voc mude-o novamente.


Local direciona o BrowserLab para visualizar arquivos do seu site local. Quando voc visualizar um arquivo em Visualizao de cdigo ou de design, o BrowserLab usa o arquivo local como sua fonte para captura de telas. Quando voc visualizar um arquivo em Visualizao dinmica, o BrowserLab usa a pgina processada pelo WebKit ( o mecanismo de processamento para Visualizao dinmica) como sua fonte para captura de telas. Servidor direciona o BrowserLab para visualizar arquivos do seu servidor ativo.

Quando voc visualizar arquivos usando a configurao do servidor (ou seja, arquivos nono site local do Dreamweaver), o servidor que o BrowserLab usa aquele que est ativo no Dreamweaver. O servidor ativo o servidor que foi selecionado por ltimo no menu de visualizao de servidor, tanto no painel Arquivos estendido como no reduzido. Por exemplo, se voc carregou arquivos do seu site local para um servidor definido de teste, o BrowserLab ir capturar instantneos do arquivo especfico no servidor teste. O Dreamweaver memoriza essa configurao e a mantm at que voc altere manualmente o servidor ativo. Para verificar qual seu servidor ativo, no painel Arquivos clique no boto Expandir. O servidor selecionado (de teste ou remoto) o servidor ativo. Importante: Se o seu servidor ativo for um servidor remoto (por exemplo, um servidor de teste remoto) ou um servidor de teste, a caixa de texto URL da Web na Visualizao de edio bsica do servidor dever ser preenchida. O URL da Web deve corresponder ao local especfico do servidor de teste ou remoto (endereo FTP para sites FTP, pasta remota para Sites local ou de rede e assim por diante).

Visualizar uma pgina


1 No Dreamweaver, abra a pgina que deseja visualizar. 2 Escolha Arquivo > Visualizar no navegador > Adobe BrowserLab. 3 Quando a tela de logon do BrowserLab abrir, voc dever digitar sua ID da Adobe (endereo de email) e clicar em

Entrar.

Editar e atualizar uma pgina


Voc pode editar uma pgina local no Dreamweaver e atualiz-la no BrowserLab sem ter que salvar o arquivo no Dreamweaver ou carreg-la em um servidor. Essa opo particularmente til se voc estiver fazendo muitas edies no CSS e quiser visualizar cada alterao enquanto trabalha sem a necessidade salvar as alteraes. Nota: Se voc visualizar no BrowserLab usando a configurao remota, o BrowserLab ir salvar e carregar automaticamente o arquivo em um servidor ativo antes da visualizao.
1 No Dreamweaver, abra a pgina que deseja visualizar. 2 Escolha Arquivo > Visualizar no navegador > Adobe BrowserLab. 3 Faa alteraes na pgina ou no CSS anexado pgina. 4 Na janela de aplicativo do BrowserLab, clique no boto Atualizar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 486


Uso dos servios on-line da Adobe

O BrowserLab visualiza a pgina sem ter que primeiro salvar as alteraes locais.

Mais tpicos da Ajuda


Visualizao de pginas no Dreamweaver na pgina 287 Configurar um novo site na pgina 38 Configurar um servidor de teste na pgina 46 Sobre o URL da Web do servidor de teste na pgina 47

Business Catalyst InContext Editing


Business Catalyst InContext Editing
O Adobe Business Catalyst InContext Editing um componente de edio do Adobe Business Catalyst que permite aos usurios fazerem alteraes simples de contedo em um navegador da Web. Para alterar uma pgina da Web, basta aos usurios navegarem para a pgina, fazer logon no InContext Editing e editar a pgina. As opes de edio so simples e elegantes e o respectivo uso no exige nenhum conhecimento anterior de cdigo HTML nem edio na Web. No entanto, antes de habilitar a realizao de alteraes ao vivo pelos usurios na Web, voc precisa usar o Dreamweaver para tornar suas pginas HTML editveis. Isso pode ser feito com a especificao de regies na pgina que voc deseja permitir que os usurios editem. Por exemplo, voc pode ter uma pgina de notcias com ttulos e bales para os artigos. Voc pode selecionar esse contedo e transform-lo em uma regio editvel do InContext Editing de forma que quando um usurio se conectar ao InContext Editing, possa editar os ttulos e os bales diretamente em um navegador. Esta documentao explica como trabalhar com as regies editveis do InContext Editing no Dreamweaver; mas a Adobe tambm fornece outros recursos para ajud-lo a trabalhar com o InContext Editing:

Para obter documentao sobre o uso do InContext Editing para editar pginas em um navegador, consulte
www.adobe.com/go/learn_dw_incontextediting_browser_br.

Para obter documentao sobre o trabalho com o Painel de administrao do InContext Editing, consulte
www.adobe.com/go/learn_dw_incontextediting_administration_guide_br. Para obter mais informaes sobre o Adobe Business Catalyst, visite www.businesscatalyst.com. Nota: O Adobe AIR no fornece suporte para o Adobe Business Catalyst InContext Editing. Se voc usar o AIR Extension para Dreamweaver para exportar um aplicativo que contm regies do InContext Editing, os recursos do InContext Editing no funcionaro.

Criar uma regio editvel do InContext Editing


Uma regio editvel do InContext Editing consiste em um par de tags HTML incluindo o atributo ice:editable na tag de abertura. A regio editvel define uma rea na pgina que pode ser editada diretamente por um usurio em um navegador. Nota: Se voc estiver adicionando uma regio editvel do InContext Editing a uma pgina baseada em um modelo do Dreamweaver, essa nova regio editvel deve existir dentro de uma regio que j editvel.
1 Siga um destes procedimentos:

Selecione uma tag div, th ou td que voc deseje transformar em uma regio editvel.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 487


Uso dos servios on-line da Adobe

Posicione o ponto de insero onde voc pretende inserir uma nova regio editvel na pgina. Selecione exatamente uma regio editvel em um modelo do Dreamweaver (arquivo DWT). Selecione outro contedo na pgina que voc deseje tornar editvel (por exemplo, um bloco de texto).
2 Escolha Inserir > InContext Editing > Criar regio editvel. 3 As opes variam dependendo de sua seleo.

Se voc tiver selecionado uma tag div, th ou td, o Dreamweaver a transformar em uma regio editvel sem a
necessidade de outras etapas.

Se estiver inserindo uma nova regio editvel em branco, siga um destes procedimentos: Selecione Inserir nova regio editvel no ponto de insero atual e clique em OK. O Dreamweaver insere uma
tag div no seu cdigo com o atributo ice:editable na tag de abertura.

Selecione Transformar a tag-me em uma regio editvel se quiser que o Dreamweaver transforme a tag-me
da seleo no elemento de continer da regio. Somente algumas tags HTML podem ser transformadas: div, th e td. Nota: Esta segunda opo est disponvel somente quando o n pai atende aos critrios exatos para transformao. Por exemplo, ele deve ser uma das tags transformveis listadas e no deve estar sujeito a nenhum dos erros listados em Mensagens de erro do InContext Editing na pgina 490.

Se voc selecionou uma regio editvel de modelo do Dreamweaver, clique em OK na caixa de dilogo Criar
regio editvel. O Dreamweaver coloca a regio editvel de modelo entre as tags div que atuam como um continer para a nova regio editvel do InContext Editing.

Se voc tiver selecionado outro contedo que deseje tornar editvel, siga um destes procedimentos: Selecione Delimitar a seleo atual com uma tag DIV e transform-la se quiser delimitar sua seleo com uma
tag div e transform-la em uma regio editvel. A tag div com a qual o Dreamweaver delimita o contedo atua como continer da regio editvel. Nota: Adicionar tags div s pginas pode alterar o processamento das pginas e os efeitos das regras de CSS. Por exemplo, se voc tiver um regra de CSS que aplica uma borda vermelha ao redor das tags div, ver uma borda vermelha ao redor de sua seleo atual quando o Dreamweaver coloc-la entre as tags div e transmitila. Se voc quiser evitar esse tipo de conflito, poder reescrever as regras de CSS que afetam a seleo atual ou desfazer a transformao (Editar > Desfazer) e, em seguida, selecionar e transformar uma tag suportada que o Dreamweaver no precisa coloc-la entre as tags div.

Selecione Transformar a tag-me em uma regio editvel se quiser que o Dreamweaver transforme a tag-me
da seleo no elemento de continer da regio editvel. Somente algumas tags HTML podem ser transformadas: div, th e td.
4 Na Visualizao de design, clique na aba azul da regio editvel para selecion-la, se ainda no estiver selecionada.

Nota: Se voc estiver trabalhando e um modelo do Dreamweaver, certifique-se de selecionar a regio editvel InContext Editing (a regio do continer) e no a regio editvel de modelo do Dreamweaver.
5 Selecione ou cancele a seleo de opes no Inspetor de propriedades da regio editvel. As opes que voc

selecionar estaro disponveis para um usurio que editar o contedo da regio editvel em um navegador. Por exemplo, se voc selecionar a opo Negrito, o usurio poder formatar o texto em negrito; se voc selecionar as opes Lista numerada e Lista com marcadores, o usurio poder criar listas numeradas e com marcadores; se voc selecionar a opo Link, o usurio poder criar links; e assim por diante. Passe o mouse sobre o cone de cada opo para ver uma dica de ferramenta indicando a funo ativada pela opo.
6 Salve a pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 488


Uso dos servios on-line da Adobe

Se for a primeira vez que voc adiciona funes do InContext Editing a uma pgina, o Dreamweaver informar sobre o acrscimo dos arquivos de suporte do InContext Editing ao seu site: ice.conf.js, ice.js e ide.html. Certifiquese de carregar esses arquivos no servidor quando carregar sua pgina. Caso contrrio, os recursos do InContext Editing no funcionaro em um navegador.

Criar uma regio repetitiva do InContext Editing


Uma regio repetitiva do InContext Editing consiste em um par de tags HTML incluindo o atributo ice:repeating na tag de abertura. A regio repetitiva define uma rea na pgina que um usurio pode "repetir" e qual pode adicionar contedo ao fazer a edio em um navegador. Por exemplo, se voc tem um cabealho e, em seguida, um pargrafo de texto, pode transformar esses elementos em uma regio repetitiva que um usurio poder duplicar em uma pgina.

As regies repetitivas, como so vistas em uma janela de navegador editvel do InContext Editing. A regio inferior selecionada e pode ser duplicada novamente, excluda ou movida para cima e para baixo.

Alm de adicionar regies repetitivas com base na regio original, voc tambm pode oferecer ao usurio a opo de excluir regies, adicionar regies completamente novas (no baseadas no contedo da regio original) e mover as regies para cima ou para baixo. Quando voc cria uma regio repetitiva, o Dreamweaver a delimita em outro continer, chamado de grupo de regies repetitivas. Esse continer uma tag div com o atributo ice:repeatinggroup adicionado tag de abertura atua como continer de todas as regies repetitivas editveis que um usurio pode adicionar ao grupo. Voc no pode mover as regies repetitivas para fora de seus contineres de grupos de regies repetitivas. Alm disso, voc no deve adicionar manualmente tags de grupos de regies repetitivas sua pgina. O Dreamweaver as adiciona automaticamente quando necessrio. Nota: Ao criar uma regio repetitiva a partir de uma linha da tabela (tag tr), o Dreamweaver aplica o atributo de grupo de regies repetitivas tag-me (por exemplo, a tag table) e no insere uma tag div.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 489


Uso dos servios on-line da Adobe

Se voc estiver trabalhando em uma pgina que contm um grupo de regies repetitivas e tentar adicionar uma regio repetitiva imediatamente depois de um grupo existente, o Dreamweaver detectar que o grupo de regies repetitivas precede a regio que voc est tentando adicionar e apresenta a opo de adicionar a nova regio ao grupo existente. Voc pode optar por adicionar a nova regio repetitiva ao grupo existente ou criar um grupo de regies repetitivas totalmente novo. Nota: Se voc estiver adicionando uma regio repetitiva do InContext Editing a uma pgina baseada em um modelo do Dreamweaver, essa nova regio repetitiva deve existir dentro de uma regio que j editvel. Para criar uma regio repetitiva no Dreamweaver, siga estas etapas.
1 Siga um destes procedimentos:

Selecione uma tag que voc deseja transformar em uma regio repetitiva. A lista de tags possveis extensa: a,
abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul e var.

Nota: Somente as tags div podem conter atributos de regio editvel e repetitiva simultaneamente.

Posicione o ponto de insero onde voc pretende inserir uma nova regio repetitiva na pgina. Selecione exatamente uma regio repetitiva em um modelo do Dreamweaver (arquivo DWT). Selecione outro contedo na pgina que voc deseje tornar repetvel (por exemplo, um cabealho e um bloco de
texto).
2 Escolha Inserir > InContext Editing > Criar regio repetitiva. 3 As opes variam dependendo de sua seleo.

Se voc tiver selecionado uma tag transformvel, o Dreamweaver a transformar em uma regio repetitiva sem
a necessidade de outras etapas.

Se estiver inserindo uma nova regio repetitiva em branco, siga um destes procedimentos: Selecione Inserir nova regio repetitiva no ponto de insero atual e clique em OK. Selecione Transformar a tag-me em uma regio repetitiva se quiser que o Dreamweaver transforme a tagme da seleo no elemento de continer da regio. Somente algumas tags HTML podem ser transformadas: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul e var. Nota: Esta segunda opo est disponvel somente quando o n pai atende aos critrios exatos para transformao. Por exemplo, ele deve ser uma das tags transformveis listadas e no deve estar sujeito a nenhum dos erros listados em Mensagens de erro do InContext Editing na pgina 490.

Se voc selecionou uma regio repetitiva de modelo do Dreamweaver, clique em OK na caixa de dilogo Criar
regio repetitiva. O Dreamweaver coloca a regio repetitiva de modelo entre as tags div que atuam como um continer para a nova regio repetitiva do InContext Editing.

Se voc tiver selecionado outro contedo que deseje tornar repetvel, siga um destes procedimentos: Selecione Delimitar a seleo atual com uma tag DIV e transform-la se quiser delimitar sua seleo com uma
tag div e transform-la em uma regio repetitiva. A tag div com a qual o Dreamweaver delimita o contedo atua como continer da regio repetitiva.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 490


Uso dos servios on-line da Adobe

Selecione Transformar a tag-me em uma regio repetitiva se quiser que o Dreamweaver transforme a tagme da seleo no elemento de continer da regio repetitiva. Somente algumas tags HTML podem ser transformadas: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul e var.
4 Na Visualizao de design, clique na aba azul da regio repetitiva para selecion-la, se ainda no estiver selecionada.

Observe que o Dreamweaver obriga voc a selecionar a aba do grupo de regies repetitivas. Isso ocorre porque todas as regies repetitivas existem em um grupo de regies repetitivas, e voc precisa definir opes para essas regies configurando as opes do grupo inteiro.
5 Selecione ou cancele a seleo de opes no Inspetor de propriedades do grupo de regies repetitivas. H duas

opes disponveis: Reordenar e Adicionar/remover. Quando voc seleciona Reordenar, os usurios podem mover as regies repetitivas para cima ou para baixo durante a edio em um navegador. Quando voc seleciona Adicionar/remover, os usurios podem adicionar ou remover regies repetitivas durante a edio em um navegador. Ambas as opes so selecionadas por padro, e voc sempre deve selecionar pelo menos uma delas.
6 Salve a pgina.

Se for a primeira vez que voc adiciona funes do InContext Editing a uma pgina, o Dreamweaver informar sobre o acrscimo dos arquivos de suporte do InContext Editing ao seu site: ice.conf.js, ice.js e ide.html. Certifiquese de carregar esses arquivos no servidor quando carregar sua pgina. Caso contrrio, os recursos do InContext Editing no funcionaro em um navegador.

Excluir uma regio


melhor excluir uma regio usando o Inspetor de propriedades da regio. O uso do Inspetor de propriedades da regio garante a excluso de todo o cdigo associado a ela.
1 Selecione uma regio editvel, uma regio repetitiva ou um grupo de regies repetitivas. 2 No Inspetor de propriedades da regio, clique no boto Remover regio.

Especificar classes CSS para formatao


O InContext Editing gerencia as classes CSS disponveis. O recurso foi retirado do Dreamweaver CS5.

Mensagens de erro do InContext Editing


No possvel aplicar o InContext Editing s tags que contm tags de script ou bloco(s) de cdigo do servidor.
Se a sua seleo contiver cdigo do servidor, o Dreamweaver no permitir que voc a transforme em uma regio editvel ou repetitiva. Essa questo tem relao com a forma como o InContext Editing salva as pginas editveis quando o usurio est trabalhando no navegador. Quando um usurio salva a pgina aps a edio, o InContext Editing remove da regio o cdigo do servidor.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 491


Uso dos servios on-line da Adobe

A seleo atual no pode ser transformada nem ter quebra automtica com uma tag DIV, pois o n-pai no permite DIV como tag-filha
Quando a seleo que deseja transformar em sua pgina no pode ser transformada diretamente, o Dreamweaver precisa colocar a seleo entre as tags div que atuam como o continer para a nova regio editvel ou repetitiva. Por essa razo, as tags-me daquilo que deseja transformar devem permitir as tags div como filhas. Se a tag-me da tag que voc est tentando transformar no permitir tags div filhas, o Dreamweaver no permitir que voc realize a transformao.

A seleo atual j contm ou est dentro de uma Regio editvel. Regies editveis aninhadas no so permitidas.
Se a sua seleo estiver dentro de uma regio editvel ou se houver uma regio editvel dentro da seleo, o Dreamweaver no permitir que voc realize a transformao. O InContext Editing no oferece suporte a regies editveis aninhadas.

Regies editveis no devem conter Regies repetitivas nem Grupos de regies repetitivas.
As regies editveis do InContext Editing no podem conter nenhum outro recurso do InContext Editing. Se voc tentar adicionar uma regio repetitiva ou um grupo de regies repetitivas a uma regio editvel, o Dreamweaver no permitir que voc realize a transformao.

Regies repetitivas no devem conter Regies editveis nem Grupos de regies repetitivas.
As regies editveis do InContext Editing no podem conter nenhum outro recurso do InContext Editing. Se voc tentar adicionar uma regio repetitiva ou um grupo de regies repetitivas a uma regio editvel, o Dreamweaver no permitir que voc realize a transformao. Alm disso, o Dreamweaver no transformar um elemento em uma regio editvel ou repetitiva se ele j contiver um grupo de regies repetitivas.

A seleo atual j contm ou est dentro de uma Regio repetitiva. Regies repetitivas aninhadas no so permitidas.
Se a sua seleo estiver dentro de uma regio repetitiva ou se houver uma regio repetitiva dentro da seleo, o Dreamweaver no permitir que voc realize a transformao. O InContext Editing no oferece suporte a regies repetitivas aninhadas.

A seleo deve conter exatamente uma regio editvel/repetitiva de modelo do Dreamweaver ou estar em qualquer regio editvel de modelo do Dreamweaver.
Ao trabalhar com arquivos de modelo do Dreamweaver (arquivos .dwt), voc precisa seguir algumas regras. Para transformar uma regio editvel/repetitiva de modelo do Dreamweaver em uma regio editvel/repetitiva do InContext Editing, voc precisa selecionar exatamente uma regio editvel/repetitiva de modelo do Dreamweaver na pgina e transform-la. Para transformar outra seleo na pgina (por exemplo, um bloco de texto), a seleo precisa estar dentro de uma regio editvel de modelo do Dreamweaver.

Somente tags DIV podem ter os recursos Regio editvel e Regio repetitiva aplicados ao mesmo tempo.
Se a sua seleo no for uma tag div e j tiver um atributo de regio repetitiva aplicado a ela, o Dreamweaver no permitir que voc aplique tambm o atributo de regio editvel tag. Somente as tags div podem ter atributos de regio editvel e repetitiva aplicados simultaneamente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 492


Uso dos servios on-line da Adobe

O Dreamweaver detectou que a tag Grupo de regies repetitivas precede a Regio repetitiva
Todas as regies repetitivas do InContext Editing precisam existir dentro de um grupo de regies repetitivas. Quando voc adiciona uma nova regio repetitiva a uma pgina, o Dreamweaver detecta se j existe um grupo de regies repetitivas imediatamente anterior. Se existir, o Dreamweaver oferecer a voc a opo de adicionar a nova regio repetitiva ao grupo de regies repetitivas j existente, ou ento criar um novo grupo de regies repetitivas para conter a nova regio repetitiva.

ltima atualizao em 28/4/2010

493

Captulo 17: Exibio de dados XML com XSLT


Sobre XML e XSLT
Uso de XML e XSL com pginas da Web
A linguagem de markup extensvel (XML) uma linguagem que permite estruturar informaes. Como o HTML, o XML permite estruturar informaes com tags, mas as tags XML no so predefinidas como as tags HTML. Em vez disso, o XML permite criar tags que definem melhor sua estrutura de dados (esquema). As tags so aninhadas em outras para criar um esquema de tags pai e filho. Como a maioria das tags HTML, todas as tags de um esquema XML tm uma tag de abertura e uma de fechamento. O exemplo a seguir mostra a estrutura bsica de um arquivo XML:
<?xml version="1.0"> <mybooks> <book bookid="1"> <pubdate>03/01/2004</pubdate> <title>Displaying XML Data with Adobe Dreamweaver</title> <author>Charles Brown</author> </book> <book bookid="2"> <pubdate>04/08/2004</pubdate> <title>Understanding XML</title> <author>John Thompson</author> </book> </mybooks>

Nesse exemplo, cada tag <book> pai contm trs tags filho: <pubdate>, <title> e <author>. No entanto, cada tag <book> tambm uma tag filho da tag <mybooks>, que a tag no maior nvel do esquema. Voc pode nomear e estruturar as tags XML de qualquer maneira, contanto que as tags sejam aninhadas corretamente em outras e que cada tag de abertura seja atribuda a uma tag de fechamento correspondente. Os documentos XML no contm nenhuma formatao: so apenas recipientes de informaes estruturadas. Depois de criar um esquema XML, voc pode usar a linguagem de folha de estilos extensvel (XSL) para exibir as informaes. Assim como as folhas de estilos em cascata (CSS) permitem formatar o HTML, o XSL permite formatar dados XML. Voc pode definir estilos, elementos de pgina, layout e outros itens em um arquivo XSL e anex-lo a um arquivo XML para que, quando um usurio visualize os dados XML em um navegador, os dados sejam formatados de acordo com o que foi definido no arquivo XSL. O contedo (os dados XML) e a apresentao (definida pelo arquivo XSL) so totalmente separados, fornecendo a voc maior controle sobre a exibio das informaes em uma pgina da Web. Em sntese, XSL uma tecnologia de apresentao do XML, onde a sada principal uma pgina HTML. As transformaes de linguagem de folha de estilos extensvel (XSLT) uma linguagem de subconjunto de XSL que, na realidade, permite exibir dados XML em uma pgina da Web e "transform-los", junto com estilos XSL, em informaes legveis e com estilo em forma de HTML. Voc pode usar o Dreamweaver para criar pginas XSLT que permitem executar transformaes XSL usando um servidor de aplicativo em um navegador. Em uma transformao XSL do servidor, o servidor transforma o XML e o XSL e os exibe na pgina. Em uma transformao do cliente, um navegador (como o Internet Explorer) faz esse trabalho.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 494


Exibio de dados XML com XSLT

A abordagem adotada (transformaes do servidor ou do cliente) depende do que voc est tentando atingir como resultado final, das tecnologias disponveis no seu caso, do nvel de acesso a arquivos de origem XML e de outros fatores. As duas abordagens tm suas vantagens e desvantagens. Por exemplo, as transformaes do servidor funcionam em todos os navegadores, enquanto as transformaes do cliente esto restritas somente a navegadores modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 e Firefox 1.0.2). As transformaes do servidor permitem exibir dados XML dinamicamente a partir do seu prprio servidor ou de qualquer outro lugar da Web, enquanto as transformaes do cliente devem usar dados XML que esto hospedados localmente no seu prprio servidor da Web. Finalmente, as transformaes do servidor exigem a implantao das pginas em um servidor de aplicativo configurado, enquanto as transformaes do cliente precisam somente do acesso a um servidor da Web. Para assistir a um tutorial e saber mais sobre XML, consulte www.adobe.com/go/vid0165_br.

Mais tpicos da Ajuda


Tutorial de XML

Transformaes XSL do servidor


O Dreamweaver fornece mtodos de criao de pginas XSLT que permitem executar transformaes XSL do servidor. Quando um servidor de aplicativo executa a transformao XSL, o arquivo que contm os dados XML pode residir no seu prprio servidor ou em qualquer outro lugar da Web. Alm disso, qualquer navegador pode exibir os dados transformados. No entanto, a implantao de pginas para transformaes do servidor um pouco complexa e requer o acesso a um servidor de aplicativo. Ao trabalhar com transformaes XSL do servidor, voc pode usar o Dreamweaver para criar pginas XSLT que geram documentos HTML completos (pginas XSLT inteiras) ou fragmentos XSLT que geram uma parte de um documento HTML. Uma pgina XSLT inteira similar a uma pgina HTML normal. Ela contm uma tag <body> e uma tag <head> e permite exibir uma combinao de dados HTML e XML na pgina. Um fragmento XSLT uma parte do cdigo, usado por um documento separado, que exibe dados XML formatados. Diferente de uma pgina XSLT inteira, esse fragmento um arquivo independente que no contm nenhuma tag <body> ou <head>. Se desejar exibir dados XML em uma pgina sua, crie uma pgina XSLT inteira e associe seus dados XML a essa pgina. Se, por outro lado, voc desejar exibir dados XML em uma seo especfica de uma pgina dinmica existente (por exemplo, uma pgina inicial dinmica para uma loja de artigos de esporte, com placares de um feed RSS exibidos em uma lateral da pgina), crie um fragmento XSLT e insira uma referncia a ele na pgina dinmica. A criao de fragmentos XSLT e seu uso em conjunto com outras pginas dinmicas para exibir dados XML o cenrio mais comum. A primeira etapa da criao desses tipos de pginas criar o fragmento XSLT. O fragmento um arquivo separado que contm o layout, a formatao e outras informaes dos dados XML que voc eventualmente pode exibir na pgina dinmica. Depois de criar o fragmento XSLT, insira uma referncia a ele em sua pgina dinmica (por exemplo, uma pgina PHP ou ColdFusion). A referncia inserida ao fragmento funciona de modo semelhante a uma incluso do servidor (SSI) os dados XML formatados (o fragmento) residem em um arquivo separado, enquanto a Visualizao de design exibe um alocador de espao para o fragmento na pgina dinmica propriamente dita. Quando um navegador solicita a pgina dinmica que contm a referncia ao fragmento, o servidor processa a instruo includa e criam um novo documento no qual o contedo formatado do documento (e no o alocador de espao) exibido.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 495


Exibio de dados XML com XSLT

SERVIDOR WEB Servidor de aplicativos

<HTML> <p>data </HTML>

<xsl:>

3
</xsl:>

XML

Navegador da web

<HTML> <code> </HTML>

1. Navegador solicita a pgina dinmica. 2. Servidor Web localiza e passa a pgina para o servidor de aplicativo 3. Servidor de aplicativo rastreia a pgina em busca de instrues e obtm fragmento do XSLT. 4. Servidor de aplicativo executa transformao (l o fragmento do XSLT, obtm e formata os dados xml). 5. Servidor de aplicativo insere o fragmento transformado na pgina e a passa de volta para o servidor Web. 6. Servidor Web envia a pgina concluda para o navegador.

Use o comportamento Transformao XSL do servidor para inserir a referncia a um fragmento XSLT em uma pgina dinmica. Quando a referncia inserida, o Dreamweaver gera uma pasta incluses/MM_XSLTransform/ na pasta raiz do site que contm um arquivo de biblioteca de runtime. O servidor de aplicativo usa as funes definidas nesse arquivo ao transformar os dados XML especificados. O arquivo responsvel por procurar os dados XML e os fragmentos XSLT, executar a transformao XSL e exibir os resultados na pgina da Web. O arquivo que contm o fragmento XSLT, o arquivo XML que contm seus dados e o arquivo de biblioteca gerado em runtime devem estar no servidor da sua pgina para serem exibidos corretamente. (Se voc selecionar um arquivo XML remoto como fonte de dados, de um feed RSS, por exemplo, esse arquivo obviamente deve residir em qualquer outro lugar da Internet.) Voc tambm pode usar o Dreamweaver para criar pginas XSLT inteiras para serem usadas com transformaes do servidor. Uma pgina XSLT inteira funciona exatamente como um fragmento XSLT; somente ao inserir a referncia pgina XSLT inteira usando o comportamento Transformao XSL do servidor voc est inserindo o contedo completo de uma pgina HTML. Desse modo, todo o HTML da pgina dinmica (a pgina .cfm, .php ou .asp que age como a pgina de recipiente) deve ser removido antes de inserir a referncia. O Dreamweaver suporta transformaes XSL para pginas ColdFusion, ASP e PHP. Nota: Seu servidor deve ser configurado corretamente para executar transformaes do servidor. Para obter mais informaes, entre em contato com o administrador do servidor.

Mais tpicos da Ajuda


Execuo de transformaes XSL no servidor na pgina 500

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 496


Exibio de dados XML com XSLT

Transformaes XSL do cliente


Voc pode executar transformaes XSL no cliente sem usar um servidor de aplicativo. Voc pode usar o Dreamweaver para criar uma pgina XSLT inteira que far isso; no entanto, as transformaes do cliente requerem a manipulao do arquivo XML que contm os dados que deseja exibir. Alm disso, as transformaes do cliente funcionam somente em navegadores modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 e Firefox 1.0.2). Para obter mais informaes sobre os navegadores que suportam ou no as transformaes XSL, consulte www.w3schools.com/xsl/xsl_browsers.asp_br. Primeiro, crie uma pgina XSLT inteira e anexe uma fonte de dados XML. (O Dreamweaver solicita que a fonte de dados seja anexada quando a nova pgina criada.) Voc pode criar uma pgina XSLT totalmente nova ou converter uma pgina HTML existente em uma pgina XSLT. Ao converter uma pgina HTML existente em uma pgina XSLT, voc deve anexar uma fonte de dados XML usando o painel Ligaes (Janela > Ligaes). Depois de criar a pgina XSLT, voc deve vincul-la ao arquivo XML que contm os dados XML inserindo uma referncia pgina XSLT no prprio arquivo XML (assim como voc insere uma referncia a uma folha de estilos CSS externa na seo <head> de uma pgina HTML). Os visitantes do seu site devem visualizar o arquivo XML (no a pgina XSLT) em um navegador. Quando os visitantes acessam a pgina, o navegador executa a transformao XSL e exibe os dados XML formatados pela pgina XSLT vinculada. A relao entre as pginas XML e XSLT vinculadas conceitualmente similar, embora seja diferente do modelo CSS externo/pgina HTML. Quando houver uma pgina HTML que contm o contedo (como texto), use uma folha de estilos externa para formatar esse contedo. A pgina HTML determina o contedo e o cdigo CSS externo, que o usurio nunca v, determina a apresentao. Com XSLT e XML, a situao inversa. O arquivo XML (que o usurio nunca v na forma bruta) determina o contedo, enquanto a pgina XSLT determina a apresentao. A pgina XSLT contm as tabelas, o layout, os grficos e outros itens que o HTML normalmente contm. Quando um usurio visualiza o arquivo XML em um navegador, a pgina XSLT formata o contedo.
5 Navegador da Web 1
<XML> <directive>

SERVIDOR WEB

XSLT
4

1. Navegador solicita arquivo XML. 2. Servidor responde enviando arquivo XML ao navegador. 3. Navegador l a diretiva XML e chama o arquivo XSLT. 4. Servidor envia arquivo XSLT ao navegador. 5. Navegador transforma e exibe os dados XML no navegador.

Quando voc usa o Dreamweaver para vincular uma pgina XSLT a uma pgina XML, o Dreamweaver insere o cdigo apropriado na parte superior da pgina XML. Se voc possuir a pgina XML que est sendo vinculada (isto , se o arquivo XML residir exclusivamente no seu servidor da Web), basta usar o Dreamweaver para inserir o cdigo apropriado que vincula as duas pginas. Quando voc possui o arquivo XML, as transformaes XSL executadas pelo cliente so totalmente dinmicas. Desse modo, sempre que voc atualiza os dados no arquivo XML, qualquer sada HTML que usa a pgina XSLT vinculada ser atualizada automaticamente com as novas informaes.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 497


Exibio de dados XML com XSLT

Nota: Os arquivos XML e XSL usados para as transformaes do cliente devem residir no mesmo diretrio. Caso contrrio, o navegador ler o arquivo XML e encontrar a pgina XSLT da transformao, mas no encontrar os ativos (folhas de estilos, imagens, etc.) definidos pelos links relativos na pgina XSLT. Se voc no possuir a pgina XML que est sendo vinculada (por exemplo, se desejar usar os dados XML de um feed RSS de algum outro lugar da Web), o fluxo de trabalho ser um pouco mais complicado. Para executar transformaes do cliente usando dados XML de uma fonte externa, primeiro faa download do arquivo de origem XML no mesmo diretrio onde reside a pgina XSLT. Quando a pgina XML estiver no seu site local, voc poder usar o Dreamweaver para adicionar o cdigo apropriado que vincula a pgina XML pgina XSLT e postar as duas pginas (o arquivo XML baixado e a pgina XSLT vinculada) no seu servidor da Web. Quando o usurio visualiza a pgina XML em um navegador, a pgina XSLT formata o contedo, assim como no exemplo anterior. A desvantagem de executar transformaes XSL do cliente nos dados XML provenientes de uma fonte externa o fato de os dados XML serem apenas parcialmente dinmicos. O arquivo XML baixado e alterado simplesmente um instantneo do arquivo que reside em algum outro lugar da Web. Se o arquivo XML original for alterado na Web, voc deve fazer download do arquivo novamente, vincul-lo pgina XSLT e postar o arquivo XML novamente no seu servidor da Web. O navegador processa somente os dados recebidos do arquivo XML no servidor da Web, no os dados contidos no arquivo XML de origem.

Mais tpicos da Ajuda


Execuo de transformaes XSL no cliente na pgina 517

Dados XML e elementos repetitivos


O objeto XSLT de regio repetitiva permite exibir elementos repetidos de um arquivo XML em uma pgina. Qualquer regio que contm um alocador de espao de dados XML pode ser transformada em uma regio repetitiva. No entanto, as regies mais comuns so uma tabela, uma linha de tabela ou uma srie de linhas de tabela.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 498


Exibio de dados XML com XSLT

O exemplo a seguir mostra como o objeto XSLT de regio repetitiva aplicado em uma linha da tabela que exibe informaes sobre o cardpio de um restaurante. A linha inicial exibe trs elementos diferentes do esquema XML: item, descrio e preo. Quando o objeto XSLT de regio repetitiva aplicado na linha da tabela e a pgina processada por um servidor de aplicativo ou por um navegador, a tabela repetida com dados exclusivos inseridos em cada nova linha da tabela.

Quando um objeto XSLT de regio repetitiva aplicado em um elemento na janela Documento, um fino contorno cinza com abas exibido ao redor da regio repetida. Ao visualizar seu trabalho em um navegador (Arquivo > Visualizar no navegador), o contorno cinza desaparece e a seleo expandida para exibir os elementos repetitivos especificados no arquivo XML, assim como na ilustrao anterior. Ao adicionar o objeto XSLT de regio repetitiva pgina, o comprimento do alocador de espao de dados XML truncado na janela Documento. Isso acontece porque o Dreamweaver atualiza a expresso XPath (Linguagem de caminho XML) do alocador de espao de dados XML de modo que haja relao com o caminho do elemento repetitivo. Por exemplo, o cdigo a seguir referente a uma tabela que contm dois alocadores de espao dinmicos, sem um objeto XSLT de regio repetitiva aplicado:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 499


Exibio de dados XML com XSLT

<table width="500" border="1"> <tr> <td><xsl:value-of select="rss/channel/item/title"/></td> </tr> <tr> <td><xsl:value-of select="rss/channel/item/description"/></td> </tr> </table>

O cdigo a seguir referente mesma tabela com o objeto XSLT de regio repetitiva aplicado:
<xsl:for-each select="rss/channel/item"> <table width="500" border="1"> <tr> <td><xsl:value-of select="title"/></td> </tr> <tr> <td><xsl:value-of select="description"/></td> </tr> </table> </xsl:for-each>

No exemplo anterior, o Dreamweaver atualizou o XPath dos itens que esto na Regio repetitiva (ttulo e descrio) para relacion-los com o XPath das tags <xsl:for-each> delimitadoras e no ao documento completo. O Dreamweaver gera expresses XPath relativas ao contexto em outros casos tambm. Por exemplo, se voc arrastar um alocador de espao de dados XML para uma tabela que j tem um objeto XSLT de regio repetitiva aplicado, o Dreamweaver exibir automaticamente o XPath relativo ao XPath existente nas tags <xsl:for-each> delimitadoras.

Mais tpicos da Ajuda


Exibir elementos XML repetitivos na pgina 504

Visualizao de dados XML


Ao usar a opo Visualizar no navegador (Arquivo > Visualizar no navegador) para visualizar os dados XML inseridos em um fragmento XSLT ou em uma pgina XSLT inteira, o mecanismo que executa a transformao XSL varia de acordo com a situao. Para pginas dinmicas que contm fragmentos XSLT, o servidor de aplicativo sempre executa a transformao. Em outras situaes, o Dreamweaver ou o navegador pode executar a transformao. A tabela a seguir resume as situaes em que a opo Visualizar no navegador usada e os mecanismos que executam as respectivas transformaes:
Tipo de pgina visualizada no navegador Pgina dinmica que contm um fragmento XSLT Fragmento XSLT ou pgina XSLT inteira Arquivo XML vinculado a uma pgina XSLT inteira Transformao dos dados executada por Servidor de aplicativo Dreamweaver Navegador

Os tpicos a seguir fornecem diretrizes para ajudar voc a determinar os mtodos de visualizao adequados, de acordo com suas necessidades.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 500


Exibio de dados XML com XSLT

Visualizao de pginas para transformaes do servidor No caso das transformaes do servidor, o contedo que o visitante do site v transformado pelo servidor de aplicativo. Ao criar pginas XSLT e pginas dinmicas para serem usadas com transformaes do servidor, recomendado visualizar sempre a pgina dinmica que contm o fragmento XSLT em vez do prprio fragmento. No primeiro cenrio, use o servidor de aplicativo, que garante a consistncia da sua visualizao com o que os visitantes do site vero ao acessarem sua pgina. No ltimo cenrio, o Dreamweaver executa a transformao e pode fornecer resultados ligeiramente inconsistentes. Voc pode usar o Dreamweaver para visualizar o fragmento XSLT durante o processo de criao, mas ver os resultados mais precisos do processamentos dos dados se usar o servidor de aplicativo para visualizar a pgina dinmica depois de inserir o fragmento XSLT. Visualizao de pginas para transformaes do cliente No caso das transformaes do cliente, o contedo que o visitante do site v transformado por um navegador. Para tal, adicione um link do arquivo XML pgina XSLT. Se voc abrir o arquivo XML no Dreamweaver e visualiz-lo em um navegador, forar o navegador a carregar o arquivo XML e executar a transformao. Desse modo, voc tem a mesma experincia do visitante do site. No entanto, essa abordagem dificulta a depurao da pgina porque o navegador transforma o XML e gera o HTML internamente. Se selecionar a opo Exibir fonte do navegador para depurar o HTML gerado, voc ver somente o XML original recebido pelo navegador, no o HTML completo (tags, estilos, etc.) responsvel pelo processamento da pgina. Para ver o HTML completo ao visualizar o cdigo-fonte, voc deve visualizar a pgina XSLT em um navegador. Visualizao de pginas XSLT inteiras e de fragmentos XSLT Ao criar pginas XSLT inteiras e fragmentos XSLT, visualize seu trabalho para verificar se os dados esto sendo exibidos corretamente. Se a opo Visualizar no navegador for usada para exibir uma pgina XSLT inteira ou um fragmento XSLT, o Dreamweaver executar a transformao usando um mecanismo interno. Esse mtodo gera resultados rpidos e facilita a criao e a depurao incremental da pgina. Ele tambm permite visualizar o HTML completo (tags, estilos, etc.) por meio da seleo da opo Exibir fonte no navegador. Nota: Esse mtodo de visualizao normalmente usado quando voc comea a criar pginas XSLT, independentemente do uso do cliente ou do servidor para transformar os dados.

Execuo de transformaes XSL no servidor


Fluxo de trabalho de execuo de transformaes XSL do servidor
Voc pode executar transformaes XSL do servidor no servidor. Saiba mais sobre as transformaes XSL do servidor e do cliente e sobre como usar XML e XSL com pginas da Web antes de criar pginas que exibem dados XML. Nota: Seu servidor deve ser configurado corretamente para executar transformaes do servidor. Para obter mais informaes, entre em contato com o administrador do servidor. O fluxo de trabalho geral para executar transformaes XSL do servidor descrito a seguir (cada etapa descrita em outros tpicos):
1. Configure um site do Dreamweaver. 2. Escolha uma tecnologia de servidor e configure um servidor de aplicativo. 3. Teste o servidor de aplicativo.

Por exemplo, crie uma pgina que requer processamento e verifique se o servidor de aplicativo processa a pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 501


Exibio de dados XML com XSLT

4. Crie um fragmento ou uma pgina XSLT ou converta uma pgina HTML em uma pgina XSLT.

No site do Dreamweaver, crie um fragmento XSLT ou uma pgina XSLT inteira. Converta uma pgina HTML existente em uma pgina XSLT inteira.
5. Anexe uma fonte de dados XML pgina. 6. Exiba os dados XML ligando os dados ao fragmento XSLT ou pgina XSLT inteira. 7. Se for apropriado, adicione um objeto XSLT de regio repetitiva tabela ou linha de tabela que contenha os alocadores de espao de dados XML. 8. Insira referncias.

Para inserir uma referncia ao fragmento XSLT em sua pgina dinmica, use o comportamento Transformao
XSL do servidor.

Para inserir uma referncia pgina XSLT inteira na pgina dinmica, exclua todo o cdigo HTML da pgina
dinmica e, em seguida, use o comportamento Transformao XSL do servidor.
9. Poste a pgina e o fragmento.

Poste a pgina dinmica e o fragmento XSLT (ou a pgina XSLT inteira) no seu servidor de aplicativo. Se estiver usando um arquivo XML local, tambm dever post-lo.
10. Visualize a pgina dinmica em um navegador.

Ao fazer isso, o servidor de aplicativo transforma os dados XML, insere esses dados na pgina dinmica e os exibe no navegador.

Mais tpicos da Ajuda


Configurao de um site do Dreamweaver na pgina 37 Escolha do servidor de aplicativo na pgina 531 Uso de XML e XSL com pginas da Web na pgina 493 Transformaes XSL do cliente na pgina 496 Transformaes XSL do servidor na pgina 494

Criar uma pgina XSLT


Voc pode criar pginas XSLT que permitem exibir dados XML em pginas da Web. Voc pode criar uma pgina XSLT inteira (uma pgina XSLT que contm uma tag <body> e uma tag <head>) ou um fragmento XSLT. Ao criar um fragmento XSLT, crie um arquivo independente sem nenhuma tag body ou head - um simples pedao do cdigo que posteriormente ser inserido em uma pgina dinmica. Nota: Se estiver comeando a partir de uma pgina XSLT existente, voc precisa anexar uma fonte de dados XML ao fragmento.
1 Selecione Arquivo > Novo. 2 Na categoria Pgina em branco da caixa de dilogo Novo documento, selecione uma das seguintes opes na coluna

Tipo de pgina:

Selecione XSLT (pgina inteira) para criar uma pgina XSLT inteira.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 502


Exibio de dados XML com XSLT

Selecione XSLT (fragmento) para criar um fragmento XSLT.


3 Clique em Criar e siga um destes procedimentos na caixa de dilogo Localizar origem XML:

Selecione Anexar arquivo local, clique no boto Procurar, navegue at um arquivo XML local no seu computador
e clique em OK.

Selecione Anexar arquivo remoto, insira o URL de um arquivo XML na Internet (como o endereo de um feed RSS,
por exemplo) e clique em OK. Nota: Clique no boto Cancelar para gerar uma nova pgina XSLT sem nenhum fonte de dados XML anexada. O painel Ligaes preenchido com o esquema da fonte de dados XML.

A tabela a seguir fornece uma explicao dos diversos elementos do esquema que podem aparecer:
Elemento <> Representa Elemento XML obrigatrio no repetitivo Elemento XML repetitivo Elemento XML opcional Detalhes Um elemento que aparece exatamente uma vez no n pai Um elemento que aparece uma ou mais vezes no n pai Um elemento que aparece nenhuma ou mais vezes no n pai Normalmente, o elemento repetitivo quando o ponto de insero est dentro de uma regio repetitiva

<>+ <>+

N do elemento em negrito

Elemento de contexto atual

Atributo XML

4 Salve sua nova pgina (Arquivo > Salvar) com a extenso .xsl ou .xslt (.xsl o padro).

Converter pginas HTML em pginas XSLT


Voc tambm pode converter pginas HTML existentes em pginas XSLT. Por exemplo, se houver uma pgina esttica pr-projetada qual deseja adicionar dados XML, voc pode converter a pgina em uma pgina XSLT, em vez de criar uma pgina XSLT e reprojet-la a partir do zero.
1 Abra a pgina HTML que deseja converter. 2 Selecione Arquivo > Converter > XSLT 1.0.

Uma cpia da pgina aberta na janela Documento. A nova pgina uma folha de estilos XSL, salva com a extenso .xsl.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 503


Exibio de dados XML com XSLT

Anexar fontes de dados XML


Se estiver comeando a partir de uma pgina XSLT existente, ou se no anexar uma fonte de dados XML ao criar uma nova pgina XSLT com o Dreamweaver, anexe uma fonte de dados XML usando o painel Ligaes.
1 No painel Ligaes (Janela > Ligaes), clique no link XML.

Nota: Voc tambm pode clicar no link Origem, no canto superior direito do painel Ligaes, para adicionar uma fonte de dados XML.
2 Siga um destes procedimentos:

Selecione Anexar arquivo local, clique no boto Procurar, navegue at um arquivo XML local no seu computador
e clique em OK.

Selecione Anexar arquivo remoto e insira o URL de um arquivo XML na Internet (como o endereo de um RSS
feed, por exemplo).
3 Clique em OK para fechar a caixa de dilogo Localizar origem XML.

O painel Ligaes preenchido com o esquema da fonte de dados XML.

Exibir dados XML em pginas XSLT


Depois de criar uma pgina XSLT e anexar uma fonte de dados XML, voc pode associar dados pgina. Para fazer isso, adicione um alocador de espao de dados XML pgina e use o Construtor de expresses XPath ou o Inspetor de propriedades para formatar os dados selecionados que sero exibidos na pgina.
1 Abra uma pgina XSLT com uma fonte de dados XML anexada. 2 (Opcional) Selecione Inserir > Tabela para adicionar uma tabela pgina. A tabela ajuda a organizar os dados XML.

Nota: Na maioria dos casos, use o objeto XSLT de regio repetitiva para exibir elementos XML repetitivos em uma pgina. Nesse caso, crie uma tabela com uma nica linha e uma ou mais colunas ou uma tabela de duas linhas se desejar incluir um cabealho.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 504


Exibio de dados XML com XSLT

3 No painel Ligaes, selecione um elemento XML e arraste-o at o local da pgina onde deseja inserir os dados.

Um alocador de espao de dados XML exibido na pgina. O alocador de espao realado e fica entre chaves. usada a sintaxe XPath (Linguagem de caminho XML) para descrever a estrutura hierrquica do esquema XML. Por exemplo, se voc arrastar o elemento filho title at a pgina e esse elemento tiver os elementos pai rss, channel e item, a sintaxe do alocador de espao de contedo dinmico ser {rss/channel/item/title}. Clique duas vezes no alocador de espao de dados XML na pgina para abrir o Construtor de expresses XPath. O Construtor de expresses XPath permite formatar os dados selecionados ou selecione outros itens no esquema XML.
4 (Opcional) Aplique estilos aos dados XML selecionando um alocador de espao de dados XML e aplicando estilos

a ele como faria em qualquer outra parte do contedo usando o Inspetor de propriedades ou o painel Estilos CSS. Se preferir, voc pode usar as Folhas de estilo em tempo de design para aplicar estilos aos fragmentos XSLT. Cada um desses mtodos tem vantagens e desvantagens.
5 Visualize seu trabalho em um navegador (Arquivo > Visualizar no navegador).

Nota: Quando voc visualiza seu trabalho usando a opo Visualizar no navegador, o Dreamweaver executa uma transformao XSL interno sem usar um servidor de aplicativo.

Mais tpicos da Ajuda


Visualizao de dados XML na pgina 499 Apresentao do contedo em tabelas na pgina 175

Exibir elementos XML repetitivos


O objeto XSLT de regio repetitiva permite exibir elementos repetitivos de uma fonte de dados XML em uma pgina da Web. Por exemplo, se voc estiver exibindo ttulos de artigos e descries de um feed de notcias e esse feed tiver entre 10 e 20 artigos, cada ttulo e descrio do arquivo XML provavelmente seria um elemento filho de um elemento repetitivo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 505


Exibio de dados XML com XSLT

Qualquer regio da Visualizao de design que contm um alocador de espao de dados XML pode ser transformada em uma regio repetitiva. No entanto, as regies mais comuns so tabelas, linhas de tabelas ou uma srie de linhas de tabelas.
1 Na Visualizao de design, selecione uma regio que contm alocadores de espao de dados XML.

A seleo pode ser qualquer item, incluindo uma tabela, uma linha de tabela ou mesmo um pargrafo do texto.

Para selecionar uma regio na pgina com preciso, voc pode usar o seletor de tags no canto inferior esquerdo da janela Documento. Por exemplo, se a regio for uma tabela, clique dentro da tabela na pgina e, em seguida, clique na tag no seletor de tags.
2 Siga um destes procedimentos

Selecione Inserir > Objetos XSLT > Regio repetitiva. Na categoria XLST do painel Inserir, clique no boto Regio repetitiva.
3 No Construtor de expresses XPath, selecione o elemento repetitivo, indicado por um pequeno sinal de adio.

4 Clique em OK.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 506


Exibio de dados XML com XSLT

Na janela Documento, um fino contorno cinza com abas exibido em torno da regio repetida. Ao visualizar seu trabalho em um navegador (Arquivo > Visualizar no navegador), o contorno cinza desaparece e a seleo expandida para exibir os elementos repetitivos especificados no arquivo XML. Ao adicionar o objeto XSLT de regio repetitiva pgina, o alocador de espao de dados XML truncado na janela Documento. Isso acontece porque o Dreamweaver trunca o XPath para o alocador de espao de dados XML de modo que haja relao com o caminho do elemento repetitivo.

Mais tpicos da Ajuda


Usar o Construtor de expresses XPath para adicionar expresses para dados XML na pgina 513 Dados XML e elementos repetitivos na pgina 497

Definir propriedades da regio repetitiva (XSL)


No Inspetor de propriedades, voc pode selecionar um n XML diferente para criar a regio repetitiva.
Na caixa Selecionar, insira um novo n, pressione o cone de raio e selecione o n na rvore de esquema XML

exibida.

Editar um objeto XSLT de regio repetitiva


Depois de adicionar um objeto XLST de regio repetitiva a uma regio, voc pode edit-lo usando o Inspetor de propriedades.
1 Selecione o objeto clicando na aba cinza que contorna a regio repetitiva. 2 No Inspetor de propriedades (Janela > Propriedades), clique no cone dinmico ao lado do campo de texto

Selecionar.
3 No Construtor de expresses XPath, faa as alteraes e clique em OK.

Inserir fragmentos XSLT em pginas dinmicas


Depois de criar um fragmento XSLT, voc pode inseri-lo em uma pgina da Web dinmica usando o comportamento Transformao XSL do servidor. Ao adicionar o comportamento do servidor sua pgina e visualizar a pgina em um navegador, um servidor de aplicativo executa uma transformao que exibe os dados XML do fragmento XSLT selecionado. O Dreamweaver suporta transformaes XSL para pginas ColdFusion, ASP ou PHP. Nota: Se desejar inserir o contedo de uma pgina XSLT inteira em uma pgina dinmica, o procedimento ser exatamente o mesmo. Antes de usar o comportamento Transformao XSL do servidor para inserir a pgina XSLT inteira, exclua todo o cdigo HTML da pgina dinmica.
1 Abra uma pgina ColdFusion, ASP ou PHP existente. 2 Na Visualizao de design, coloque o ponto de insero no local onde voc deseja inserir o fragmento XSLT.

Nota: Ao inserir fragmentos XSLT, voc sempre deve clicar no boto Mostrar visualizaes de cdigo e de design depois de colocar o ponto de insero na pgina para garantir que o ponto seja colocado no local correto. Caso o local no seja correto, clique em algum outro lugar da Visualizao de cdigo para colocar o ponto de insero onde deseja.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 507


Exibio de dados XML com XSLT

3 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Transformao XSL.

4 Na caixa de dilogo Transformao XSL, clique no boto Procurar e navegue at um fragmento XSLT ou uma

pgina XSLT inteira. O Dreamweaver preenche o prximo campo de texto com o caminho do arquivo ou o URL do arquivo XML que est anexado ao fragmento especificado. Para alter-lo, clique no boto Procurar e navegue at outro arquivo.
5 (Opcional) Clique no boto de adio (+) para adicionar um parmetro XSLT. 6 Clique em OK para inserir uma referncia ao fragmento XSLT na pgina. O fragmento no pode ser editado. Voc

pode clicar duas vezes no fragmento para abrir o arquivo de origem do fragmento e edit-lo. Uma pasta incluses/MM_XSLTransform/, que contm um arquivo de biblioteca de runtime, tambm criada na pasta raiz do site. O servidor de aplicativo usa as funes definidas nesse arquivo para executar a transformao.
7 Carregue a pgina dinmica no seu servidor (Site > Colocar) e clique em Sim para incluir os arquivos dependentes.

O arquivo que contm o fragmento XSLT, o arquivo XML que contm seus dados e o arquivo de biblioteca gerado em runtime devem estar no servidor da sua pgina para serem exibidos corretamente. (Se voc selecionar um arquivo XML remoto como fonte de dados, esse arquivo deve residir em qualquer outro lugar da Internet.)

Mais tpicos da Ajuda


Criar uma pgina XSLT na pgina 501 Transformaes XSL do servidor na pgina 494

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 508


Exibio de dados XML com XSLT

Excluir fragmentos XSLT de pginas dinmicas


Voc pode remover um fragmento XSLT de uma pgina excluindo o comportamento Transformao XSL do servidor usado para inserir o fragmento. A excluso do comportamento do servidor exclui somente o fragmento XSLT (os arquivos XML, XSLT ou de biblioteca de runtime associados no so excludos).
1 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), selecione o comportamento

Transformao XSL do servidor que deseja excluir.


2 Clique no boto de subtrao (-).

Nota: Nesta verso, voc sempre deve remover os comportamentos de servidor. A excluso manual do cdigo gerado remove apenas parcialmente o comportamento de servidor, mesmo que o comportamento desaparea do painel Comportamentos de servidor.

Editar comportamentos Transformao XSL do servidor


Depois de adicionar um fragmento XSLT a uma pgina da Web dinmica, voc pode editar o comportamento Transformao XSL do servidor a qualquer momento.
1 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique duas vezes no

comportamento Transformao XSL do servidor que deseja editar.


2 Faa as alteraes e clique em OK.

Criar um link dinmico


Voc pode criar um link dinmico na sua pgina XSLT vinculado a um URL especfico quando o usurio clica em uma palavra ou grupo de palavras especificado nos dados XML. Para obter instrues completas, consulte a errata do Dreamweaver em www.adobe.com/go/dw_documentation_br.

Aplicao de estilos em fragmentos XSLT


Ao criar uma pgina XSLT inteira (isto , uma pgina XSLT que contm as tags <body> e <head>), voc pode exibir os dados XML na pgina e formatar os dados como qualquer outra parte do contedo usando o Inspetor de propriedades ou o painel Estilos CSS. No entanto, ao criar um fragmento XSLT a ser inserido em uma pgina dinmica (por exemplo, um fragmento a ser inserido em uma pgina ASP, PHP ou Cold Fusion), o processamento de estilos no fragmento e na pgina dinmica fica mais complicado. Embora voc trabalhe em um fragmento XSLT separadamente da pgina dinmica, importante lembrar que o fragmento deve ser usado na pgina dinmica e que a sada do fragmento XSLT reside em algum lugar entre as tags <body> da pgina dinmica. Neste fluxo de trabalho, importante no incluir elementos <head> (como definies de estilo ou links para folhas de estilo externas) nos fragmentos XSLT. Desse modo, o servidor de aplicativo coloca esses elementos na tag <body> da pgina dinmica, gerando um markup invlido. Por exemplo, voc pode criar um fragmento XSLT para insero em uma pgina dinmica e formatar o fragmento usando a mesma folha de estilo externa da pgina dinmica. Se voc anexar a mesma folha de estilo ao fragmento, a pgina HTML resultante conter um link duplicado para a folha de estilo (um na seo <head> da pgina dinmica e outro na seo <body> da pgina, onde o contedo do fragmento XSLT exibido). Em vez dessa abordagem, voc deve usar as Folhas de estilo em tempo de design para fazer referncia folha de estilo externa. Ao formatar o contedo dos fragmentos XSLT, use o seguinte fluxo de trabalho:

Primeiro, anexe uma folha de estilo externa pgina dinmica. Esta a melhor maneira de aplicar estilos no
contedo de qualquer pgina da Web.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 509


Exibio de dados XML com XSLT

Em seguida, anexe a mesma folha de estilo externa ao fragmento XSLT como uma folha de estilo em tempo de
design. Como o nome indica, as folhas de estilo em tempo de design funcionam somente na Visualizao de design do Dreamweaver. Depois de realizar as duas etapas anteriores, voc pode criar novos estilos no seu fragmento XSLT usando a mesma folha de estilo anexada sua pgina dinmica. A sada HTML ser mais limpa (porque a referncia folha de estilo vlida somente no Dreamweaver) e o fragmento ainda exibir os estilos apropriados na Visualizao de design. Alm disso, todos os estilos sero aplicados tanto no fragmento quanto na pgina dinmica quando a pgina dinmica for visualizada no modo Design ou em um navegador. Nota: Se voc visualizar o fragmento XSLT em um navegador, os estilos no sero exibidos pelo navegador. Em vez disso, voc deve visualizar a pgina dinmica no navegador para ver o fragmento XSLT no contexto da pgina dinmica. Para obter mais informaes sobre como usar CSS para formatar fragmentos XSLT, consulte www.adobe.com/go/dw_xsl_styles_br.

Mais tpicos da Ajuda


Usar Folhas de estilo em tempo de design na pgina 148

Usar parmetros com transformaes XSL


Voc pode definir parmetros para a transformao XSL ao adicionar o comportamento Transformao XSL do servidor a uma pgina da Web. Um parmetro controla como os dados XML so processados e exibidos. Por exemplo, voc pode usar um parmetro para identificar e listar um artigo especfico de um feed de notcias. Quando a pgina carregada em um navegador, somente o artigo especificado com o parmetro exibido.

Adicionar um parmetro XSLT a uma transformao XSL


1 Abra a caixa de dilogo Transformao XSL. Para fazer isso, clique duas vezes no comportamento Transformao

XSL do servidor no painel Comportamentos de servidor (Janela > Comportamentos de servidor) ou adicione um novo comportamento Transformao XSL do servidor.
2 Na caixa de dilogo Transformao XSL, clique no boto de adio (+) ao lado de Parmetros XSLT.

3 Na caixa de dilogo Adicionar parmetro, insira um nome para o parmetro na caixa Nome. O nome pode conter

somente caracteres alfanumricos. Os espaos no so permitidos.


4 Siga um destes procedimentos:

Se desejar usar um valor esttico, insira-o na caixa Valor.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 510


Exibio de dados XML com XSLT

Se desejar usar um valor dinmico, clique no cone de dinmico ao lado da caixa Valor, preencha a caixa de dilogo
Dados dinmicos e clique em OK. Para obter mais informaes, clique no boto Ajuda na caixa de dilogo Dados dinmicos.
5 Na caixa Valor padro, insira o valor a ser usado pelo parmetro se a pgina no receber nenhum valor de runtime

e clique em OK.

Editar um parmetro XSLT


1 Abra a caixa de dilogo Transformao XSL. Para fazer isso, clique duas vezes no comportamento Transformao

XSL do servidor no painel Comportamentos de servidor (Janela > Comportamentos de servidor) ou adicione um novo comportamento Transformao XSL do servidor.
2 Selecione um parmetro na lista de parmetro XSLT. 3 Clique no boto Editar. 4 Faa as alteraes e clique em OK.

Excluir um parmetro XSLT


1 Abra a caixa de dilogo Transformao XSL. Para fazer isso, clique duas vezes no comportamento Transformao

XSL do servidor no painel Comportamentos de servidor (Janela > Comportamentos de servidor) ou adicione um novo comportamento Transformao XSL do servidor.
2 Selecione um parmetro na lista de parmetro XSLT. 3 Clique no boto de subtrao (-).

Criar e editar regies XSLT condicionais


Voc pode criar uma ou vrias regies condicionais em uma pgina XSLT. Selecione um elemento na Visualizao de design e aplique uma regio condicional na seleo ou insira uma regio condicional no ponto de insero do documento. Por exemplo, se desejar exibir a expresso No disponvel ao lado do preo de um item que no est disponvel, digite o texto No disponvel na pgina, selecione-o e aplique uma regio condicional no texto selecionado. O Dreamweaver coloca a tag <xsl:if> antes e depois da seleo e exibe a expresso No disponvel na pgina somente quando os dados corresponderem s condies da expresso condicional.

Aplicar uma regio XSLT condicional


Voc pode gravar uma expresso condicional simples a ser inserida na sua pgina XSLT. Se o contedo estiver selecionado quando voc abrir a caixa de dilogo Regio condicional, haver a tag <xsl:if> antes e depois do contedo. Se o contedo no estiver selecionado, o bloco <xsl:if> ser includo no ponto de insero na pgina. recomendado usar a caixa de dilogo para comear e personalizar a expresso na Visualizao de cdigo. O elemento <xsl:if> semelhante ao elemento if de outras linguagens. Esse elemento permite testar uma condio e tomar uma ao com base no resultado. O elemento <xsl:if> permite testar uma expresso para um nico valor verdadeiro ou falso.
1 Selecione Inserir > Objetos XSLT > Regio condicional ou clique no cone Regio condicional, na categoria XSLT

do painel Inserir.
2 Na caixa de dilogo Regio condicional, insira a expresso condicional a ser usada na regio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 511


Exibio de dados XML com XSLT

No exemplo a seguir, teste a expresso para observar se o valor do atributo @available do n do contexto true.

3 Clique em OK.

O seguinte cdigo inserido na pgina XSLT:


<xsl:if test="@available=&apos;true&apos;"> Content goes here </xsl:if>

Nota: Os valores de seqncia de caracteres devem ser definidos como true entre aspas. O Dreamweaver codifica as aspas (&apos;) para que sejam inseridas como XHTML vlido. Alm de testar os ns com relao aos valores, voc pode usar qualquer funo XSLT suportada em qualquer instruo condicional. A condio testada no n atual do arquivo XML. No exemplo a seguir, teste a expresso no ltimo n do conjunto de resultados:

Para obter mais informaes e exemplos sobre expresses condicionais de gravao, consulte a seo <xsl:if> no painel Referncia (Ajuda > Referncia).

Aplicar vrias regies XSLT condicionais


Voc pode gravar uma expresso condicional simples a ser inserida na sua pgina XSLT. Se o contedo estiver selecionado quando voc abrir a caixa de dilogo Regio condicional, haver a tag <xsl:choose> antes e depois do contedo. Se o contedo no for selecionado, o bloco <xsl:choose> ser includo no ponto de insero na pgina. recomendado usar a caixa de dilogo para comear e personalizar a expresso na Visualizao de cdigo. O elemento <xsl:choose> semelhante ao elemento case de outras linguagens. Esse elemento permite testar uma condio e tomar uma ao com base no resultado. O elemento <xsl:choose> permite testar vrias condies.
1 Selecione Inserir > Objetos XSLT > Regio condicional mltipla ou clique no cone Regio condicional mltipla na

categoria XSLT do painel Inserir.


2 Na caixa de dilogo Regio condicional mltipla, insira a primeira condio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 512


Exibio de dados XML com XSLT

No exemplo a seguir, teste a expresso para observar se o subelemento price do n do contexto inferior a 5.

3 Clique em OK.

No exemplo, o seguinte cdigo inserido na pgina XSLT:


<xsl:choose> <xsl:when test="price&lt;5"> Content goes here </xsl:when> <xsl:otherwise> Content goes here </xsl:otherwise> </xsl:choose>

4 Para inserir outra condio, coloque o ponto de insero na Visualizao de cdigo entre os pares de tag
<xsl:when> ou antes da tag <xsl:otherwise> e insira uma regio condicional (Inserir > Objetos XSLT > Regio

condicional). Depois de especificar a condio e clicar em OK, outra tag <xsl:when> ser inserida no bloco <xsl:choose>. Para obter mais informaes e exemplos sobre expresses condicionais de gravao, consulte as sees <xsl:choose> no painel Referncia (Ajuda > Referncia).

Definir propriedades da regio condicional (If)


O propsito do recurso Definir inspetor de propriedade de regio condicional alterar a condio usada em uma regio condicional na pgina XSL. A regio condicional testa a condio e toma uma ao com base no resultado.
Na caixa Testar, insira uma nova condio e pressione Enter.

Definir propriedades condicionais (When)


O propsito do recurso Definir inspetor de propriedade de regio condicional alterar a condio usada em uma regio condicional mltipla na pgina XSL. A regio condicional mltipla testa a condio e toma uma ao com base no resultado.
Na caixa Testar, insira uma nova condio e pressione Enter.

Inserir comentrios XSL


Voc pode adicionar tags de comentrio XSL a um documento ou envolver uma seleo em tags de comentrio XSL.

Adicionar tags de comentrio XSL a um documento


Siga um destes procedimentos:

Na Visualizao de design, selecione Inserir > Objetos XSLT > Comentrio XSL, digite o contedo do comentrio
(ou deixe a caixa em branco) e clique em OK.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 513


Exibio de dados XML com XSLT

Na Visualizao de cdigo, selecione Inserir > Objetos XSLT > Comentrio XSL.
Voc tambm pode clicar no cone Comentrio XSL, na categoria XSLT do painel Inserir.

Envolver uma seleo em tags de comentrio XSL


1 Passe para a Visualizao de cdigo (Exibir > Cdigo). 2 Selecione o cdigo que deseja comentar. 3 Na Barra de ferramentas de codificao, clique no boto Aplicar comentrio e selecione Aplicar comentrio

<xsl:comment></xsl:comment>.

Usar o Construtor de expresses XPath para adicionar expresses para dados XML
O XPath (Linguagem de caminho XML) uma sintaxe no XML que controla partes de um documento XML. Na maioria das vezes, essa sintaxe usada como uma linguagem de consulta para dados XML, assim como a linguagem SQL usada para bancos de dados de consulta. Para obter mais informaes sobre o XPath, consulte a especificao da linguagem XPath no site da W3C em www.w3.org/TR/xpath. O Construtor de expresses XPath um recurso do Dreamweaver que permite criar expresses XPath simples para identificar ns de dados especficos e para regies repetitivas. Em vez de arrastar valores da rvore de esquema XML, esse mtodo permite formatar o valor exibido. O contexto atual identificado com base na posio do ponto de insero no arquivo XSL quando a caixa de dilogo Construtor de expresses XPath est aberta. O contexto atual est em negrito na rvore de esquema XML. medida que voc faz selees nessa caixa de dilogo, as instrues XPath corretas so geradas, em relao ao contexto atual. Isso simplifica o processo de gravao de expresses XPath corretas para iniciantes e usurios avanados. Nota: Esse recurso foi projetado para ajudar a criar expresses XPath simples para identificar um n especfico ou para regies repetitivas. O recurso no permite editar as expresses manualmente. Se for necessrio criar expresses complexas, use o Construtor de expresses XPath para comear e personalizar expresses na Visualizao de cdigo ou com o Inspetor de propriedades.

Criar uma expresso XPath para identificar um n especfico


1 Clique duas vezes no alocador de espao de dados XML na pgina para abrir o Construtor de expresses XPath. 2 Na caixa de dilogo Construtor de expresses XPath (texto dinmico), selecione qualquer n na rvore de esquema XML.

A expresso XPath correta gravada na caixa Expresso para identificar o n. Nota: Se voc selecionar um n diferente na rvore de esquema XML, a expresso ser alterada para refletir sua escolha.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 514


Exibio de dados XML com XSLT

No exemplo a seguir, exiba o subelemento price do n item:

Essa seleo inseriria o seguinte cdigo na pgina XSLT:


<xsl:value-of select="price"/>

3 (Opcional) Selecione uma opo de formatao no menu pop-up Formato.

A formatao de uma seleo til quando o valor do n retorna um nmero. O Dreamweaver fornece uma lista predefinida de funes de formatao. Para obter uma lista completa das funes de formatao disponveis e exemplos, consulte o painel Referncia. No exemplo a seguir, formate o subelemento price como uma moeda com duas casas decimais:

Essas opes inseririam o seguinte cdigo na pgina XSLT:


<xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 515


Exibio de dados XML com XSLT

4 Clique em OK. 5 Para exibir o valor de cada n no arquivo XML, aplique uma regio repetitiva no elemento que contm o texto

dinmico (por exemplo, uma linha de tabela HTML ou um pargrafo). Para obter mais informaes e exemplos sobre como selecionar ns para retornar um valor, consulte a seo <xsl:value-of/> no painel Referncia.

Selecionar um n para repetir


Voc pode selecionar um n a ser repetido e, se desejar, filtrar os resultados. Na caixa de dilogo Construtor de expresses XPath, o contedo selecionado ser envolto em um bloco <xsl:for-each>. Se o contedo no for selecionado, o bloco <xsl:for-each> ser inserido no ponto de insero do cursor.
1 Clique duas vezes no alocador de espao de dados XML na pgina para abrir o Construtor de expresses XPath. 2 Na caixa de dilogo Construtor de expresses XPath (regio repetitiva), selecione o item a ser repetido na rvore de

esquema XML. A expresso XPath correta gravada na caixa Expresso para identificar o n. Nota: Os itens repetitivos so identificados com um sinal de adio (+) na rvore de esquema XML. No exemplo a seguir, repita cada n item do arquivo XML.

Ao clicar em OK, o seguinte cdigo ser inserido na pgina XSLT:


<xsl:for-each select="provider/store/items/item"> Content goes here </xsl:for-each>

Em alguns casos, voc talvez queira trabalhar com um subconjunto dos ns repetitivos (por exemplo, somente com itens onde um atributo tem um valor especfico). Nesse caso, necessrio criar um filtro.

Filtrar os dados a serem repetidos


Use um filtro para identificar os ns repetitivos que tm valores de atributo especficos.
1 Na rvore de esquema XML, selecione um n a ser repetido. 2 Clique no boto de expanso Criar filtro.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 516


Exibio de dados XML com XSLT

3 Clique no boto de adio (+) para criar um filtro vazio. 4 Insira os critrios de filtragem nos seguintes campos:
Filtrar por Especifique o n repetitivo que contm os dados que serviro de filtro. O menu pop-up fornece uma lista

de ns ancestrais relativos ao n selecionado na rvore de esquema XML.


Onde Especifica o atributo ou subelemento do n Filtrar por que ser usado para limitar os resultados. Voc pode

selecionar um atributo ou subelemento no menu pop-up ou inserir sua prpria expresso XPath nesse campo para identificar filhos que existem em nveis mais profundos da rvore de esquema.
Operador Especifique o operador de comparao a ser usado na expresso de filtro. Valor Especifique o valor que deve ser verificado no n Filtrar por. Insira o valor. Se parmetros dinmicos forem

definidos na pgina XSLT, voc pode selecionar um deles no menu pop-up.


5 Para especificar outro filtro, clique no boto de adio (+) novamente.

Conforme voc insere valores ou seleciona opes nos menus pop-up, a expresso XPath na caixa Expresso alterada. No exemplo a seguir, limite o conjunto de resultados aos ns item onde o valor do atributo @available true.

Ao clicar em OK, o seguinte cdigo ser inserido na pgina XSLT:


<xsl:for-each select="provider/store/items/item[@available = &apos;true&apos;]"> Content goes here </xsl:for-each>

Nota: Os valores de seqncia de caracteres devem ser definidos como true entre aspas. O Dreamweaver codifica as aspas (&apos;) para que sejam inseridas como XHTML vlido.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 517


Exibio de dados XML com XSLT

Voc pode criar filtros mais complexos que permitem especificar ns pai como parte dos critrios de filtragem. No exemplo a seguir, limite o conjunto de resultados aos ns item onde o atributo @id de store igual a 1 e o n price de item superior a 5.

Ao clicar em OK, o seguinte cdigo ser inserido na pgina XSLT:


<xsl:for-each select="provider/store[@id = 1]/items/item[price &gt; 5]"> Content goes here </xsl:for-each>

Para obter mais informaes e exemplos sobre regies repetitivas, consulte a seo <xsl:for-each> no painel Referncia.

Execuo de transformaes XSL no cliente


Fluxo de trabalho de execuo de transformaes XSL do cliente
Voc pode executar transformaes XSL do cliente. Saiba mais sobre as transformaes XSL do servidor e do cliente e sobre como usar XML e XSL com pginas da Web antes de criar pginas que exibem dados XML. O fluxo de trabalho geral para executar transformaes XSL do cliente descrito a seguir (cada etapa descrita em outros tpicos):
1. Configure um site do Dreamweaver. 2. Crie uma pgina XSLT ou converta uma pgina HTML em XSLT.

No site do Dreamweaver, crie uma pgina XSLT inteira. Converta uma pgina HTML existente em uma pgina XSLT inteira.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 518


Exibio de dados XML com XSLT

3. Anexe uma fonte de dados XML pgina (se ainda no tiver feito isso).

O arquivo XML anexado deve residir no mesmo diretrio da pgina XSLT.


4. Associe os dados XML pgina XSLT. 5. Exiba os dados XML ligando os dados pgina XSLT inteira. 6. Se for apropriado, adicione um objeto XSLT de regio repetitiva tabela ou linha de tabela que contenha os alocadores de espao de dados XML. 7. Anexe a pgina XSLT pgina XML. 8. Poste a pgina XML e a pgina XSLT vinculada no seu servidor da Web. 9. Visualize a pgina XML em um navegador.

Ao fazer isso, o navegador transforma os dados XML, formata esses dados com a pgina XSLT e exibe a pgina com estilo no navegador.

Mais tpicos da Ajuda


Configurao de um site do Dreamweaver na pgina 37 Escolha do servidor de aplicativo na pgina 531 Vincular uma pgina XSLT a uma pgina XML na pgina 519 Uso de XML e XSL com pginas da Web na pgina 493 Transformaes XSL do cliente na pgina 496 Transformaes XSL do servidor na pgina 494

Criao de pginas XSLT inteiras e exibio de dados


Voc deve usar uma pgina XSLT inteira para transformaes do cliente. (Os fragmentos XSLT no funcionam nesse tipo de transformao.) Siga essas etapas gerais para criar, ligar dados XML e formatar pginas XSLT para transformaes do cliente:
1. Crie a pgina XSLT. 2. Exiba dados na pgina XSLT. 3. Exiba elementos repetitivos na pgina XSLT.

Mais tpicos da Ajuda


Criar uma pgina XSLT na pgina 501 Exibir dados XML em pginas XSLT na pgina 503 Exibir elementos XML repetitivos na pgina 504

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 519


Exibio de dados XML com XSLT

Vincular uma pgina XSLT a uma pgina XML


Depois de criar uma pgina XSLT inteira com alocadores de espao de contedo dinmico para os dados XML, voc deve inserir uma referncia pgina XSLT na pgina XML. Nota: Os arquivos XML e XSL usados para as transformaes do cliente devem residir no mesmo diretrio. Caso contrrio, o navegador ler o arquivo XML e encontrar a pgina XSLT da transformao, mas no encontrar os ativos (folhas de estilos, imagens, etc.) definidos pelos links relativos na pgina XSLT.
1 Abra o arquivo XML que deseja vincular com a pgina XSLT. 2 Selecione Comandos > Anexar uma folha de estilos XSLT. 3 Na caixa de dilogo, clique no boto Procurar, navegue at a pgina XSLT que deseja vincular, selecione-a e clique

em OK.
4 Clique em OK para fechar a caixa de dilogo e inserir a referncia pgina XSLT na parte superior do documento XML.

Entidades de caracteres ausentes


Especificar uma entidade de caractere ausente
Em XSLT, alguns caracteres no so permitidos em determinados contextos. Por exemplo, voc no pode usar o sinal de menor que (<) e o E comercial (&) no texto entre tags ou em um valor de atributo. O mecanismo de transformao XSLT gerar um erro se esses caracteres forem usados de modo incorreto. Para solucionar o problema, voc pode especificar entidades de caractere para substituir os caracteres especiais. Uma entidade de caractere uma seqncia de caracteres que representa outros caracteres. As entidades de caractere so nomeadas ou numeradas. Uma entidade nomeada comea com um E comercial (&) seguido pelo nome ou por caracteres, e termina com ponto-e-vrgula (;). Por exemplo, &lt; representa o sinal menor que (<). As entidades numeradas tambm comeam e terminam da mesma maneira, exceto pela presena de uma cerquilha (#) e de um nmero que especifica o caractere. O XSLT tem as cinco entidades predefinidas a seguir:
Caractere < (menor que) & (E comercial) > (maior que) " (aspas) (apstrofe) Cdigo da entidade &lt; &amp; &gt; &quot; &apos;

Se voc usar outras entidades de caractere em um arquivo XSL, precisar defini-las na seo DTD do arquivo XSL. O Dreamweaver fornece vrias definies de entidade padro que podem ser observadas na parte superior de um arquivo XSL criado no Dreamweaver. Essas entidades padro abrangem uma ampla seleo dos caracteres usados com mais freqncia. Ao visualizar o arquivo XSL em um navegador, o Dreamweaver verifica o arquivo XSL para observar se h entidades no definidas e notifica caso alguma for encontrada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 520


Exibio de dados XML com XSLT

Se voc visualizar um arquivo XML anexado a um arquivo XSLT ou visualizar uma pgina do servidor com uma transformao XSLT, o servidor ou o navegador (em vez do Dreamweaver) enviar uma notificao sobre uma entidade no definida. O exemplo a seguir mostra uma mensagem que pode ser exibida no Internet Explorer quando voc solicita um arquivo XML transformado por um arquivo XSL com uma definio de entidade ausente:
Reference to undefined entity 'auml'. Error processing resource 'http://localhost/testthis/list.xsl'. Line 28, Position 20 <p class=''test''>&auml;</p> -------------------^

Para corrigir o erro da pgina, adicione a definio de entidade manualmente pgina.

Especificar uma definio de entidade ausente


1 Procure o caractere ausente na pgina de referncia de entidades de caractere no site da W3C em

www.w3.org/TR/REC-html40/sgml/entities.html. Essa pgina da Web contm as 252 entidades permitidas no HTML 4 e no XHTML 1.0. Por exemplo, se a entidade de caractere Egrave estiver ausente, procure Egrave no site da W3C. A seguinte entrada estar disponvel:
<!ENTITY Egrave CDATA "&#200;" -- latin capital letter E with grave, U+00C8 ISOlat1 -->

2 Anote o nome e o cdigo da entidade na entrada.

No exemplo, Egrave o nome da entidade e &#200 o cdigo da entidade.


3 Com essas informaes, passe para a Visualizao de cdigo e insira a seguinte tag de entidade na parte superior do

arquivo XSL (depois da declarao TipoDoc e com as outras tags de entidade):


<!ENTITY entityname "entitycode;">

No exemplo, voc inseriria a seguinte tag de entidade:


<!ENTITY Egrave "&#200;">

4 Salve o arquivo.

Se voc usar vrias vezes as mesmas entidades de caractere, poder adicionar permanentemente suas definies aos arquivos XSL criados pelo Dreamweaver por padro quando o comando Arquivo > Novo usado.

Adicionar definies de entidade aos arquivos XSL criados pelo Dreamweaver por padro
1 Localize o seguinte arquivo de configurao na pasta do aplicativo Dreamweaver e abra-o em qualquer editor de

texto: Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml
2 Localize a declarao mm_xslt_1:
<documenttypedeclaration id="mm_xslt_1">

3 Insira as novas tags de entidade na lista de tags de entidade da seguinte maneira:


<!ENTITY entityname "entitycode;">

4 Salve o arquivo e reinicie o Dreamweaver.

ltima atualizao em 28/4/2010

521

Captulo 18: Preparao para criao de sites dinmicos


Para comear a criao de pginas da Web dinmicas, h algumas preparaes a serem feitas, incluindo a configurao de um servidor de aplicativo da Web e a conexo com um banco de dados para aplicativos do ColdFusion, ASP e PHP. O Adobe Dreamweaver CS5 lida com conexes de banco de dados de maneira diferente dependendo da tecnologia do servidor.

Introduo aos aplicativos da Web


Sobre os aplicativos da Web
Um aplicativo da Web um site que contm pginas de contedo parcial ou inteiramente no determinado. O contedo final de uma pgina s determinado quando o visitante solicita uma pgina do servidor Web. Como o contedo final da pgina varia de solicitao para solicitao com base nas aes do visitante, esse tipo chamado de pgina dinmica. Os aplicativos da Web so criados para superar vrios desafios e problemas. Esta seo descreve usos comuns para os aplicativos da Web e apresenta um exemplo simples.

Usos comuns dos aplicativos da Web


Os aplicativos da Web tm muitos usos tanto para os visitantes quanto para os desenvolvedores do site, inclusive os seguintes:

Permitem aos visitantes localizar informaes de maneira rpida e fcil em um site rico em contedo.
Esse tipo de aplicativo da Web oferece aos visitantes a possibilidade de pesquisar, organizar e navegar em contedo na medida em que acharem cabvel. Entre os exemplos esto intranets de empresas, o Microsoft MSDN (www.msdn.microsoft.com) e a Amazon.com (www.amazon.com).

Colete, salve e analise dados fornecidos por visitantes do site.


Antigamente, os dados inseridos em formulrios em HTML eram enviados como mensagens de email a funcionrios ou aplicativos CGI para processamento. Um aplicativo da Web pode salvar os dados do formulrio diretamente em um banco de dados, alm de extrair os dados e criar relatrios baseados na Web para anlise. Entre os exemplos esto pginas de bancos on-line, pginas de retirada de lojas, pesquisas e formulrios com comentrios feitos pelo usurio.

Atualize sites cujo contedo mude constantemente.


Um aplicativo da Web evita que o designer fique atualizando continuamente o HTML do site. Provedores de contedo como, por exemplo, editores de notcias fornecem contedo ao aplicativo da Web, e este atualiza o site automaticamente. Entre os exemplos esto a Economist (www.economist.com) e a CNN (www.cnn.com).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 522


Preparao para criao de sites dinmicos

Exemplo de aplicativo da Web


Janet designer profissional e, h muito tempo, a usuria do Dreamweaver responsvel pela manuteno da intranet e do site de uma empresa de mdio porte com 1.000 funcionrios. Certo dia, Chris, dos Recursos Humanos, chega at ela com um problema. O RH administra um programa de condicionamento fsico que d aos funcionrios pontos para cada quilmetro percorrido andando, de bicicleta ou correndo. Cada funcionrio deve informar seu total mensal de quilmetros em um email enviado para Chris. Ao final do ms, Chris rene todas as mensagens de email e d aos funcionrios pequenos prmios em dinheiro de acordo com sua pontuao total. O problema de Chris que o programa de condicionamento fsico cresceu muito. Assim, muitos funcionrios esto participando, e Chris sobrecarregado com emails ao final de cada ms. Chris pergunta a Janet se h uma soluo baseada na Web. Janet prope um aplicativo da Web baseado na intranet que realiza as seguintes tarefas:

Permite aos funcionrios inserir a quilometragem em uma pgina da Web usando um formulrio em HTML
simples

Armazena a quilometragem do funcionrio em um banco de dados Calcula os pontos de condicionamento fsico de acordo com os dados da quilometragem Permite aos funcionrios controlar o andamento mensal D a Chris o acesso com um clique pontuao total ao final de cada ms
Janet coloca o aplicativo em funcionamento antes do horrio de almoo usando o Dreamweaver, que conta com as ferramentas de que ela precisa para criar esse tipo de aplicativo rpida e facilmente.

Como funciona um aplicativo de Web


Um aplicativo de Web um conjunto de pginas de Web estticas e dinmicas. Uma pgina da Web esttica aquela que no se altera quando um visitante a solicita: o servidor Web envia a pgina para o navegador da Web solicitante sem modific-la. J uma pgina da Web dinmica modificada pelo servidor antes de ser enviada para o navegador solicitante. A natureza mutvel da pgina justifica ela ser chamada de dinmica. Por exemplo, voc poderia projetar uma pgina para exibir os resultados do condicionamento fsico, ao mesmo tempo em que deixaria que determinadas informaes (como, por exemplo, o nome do funcionrio e os resultados) fossem determinadas quando a pgina fosse solicitada por um determinado funcionrio. As prximas sees descrevem mais detalhadamente como funcionam os aplicativos da Web.

Processamento de pginas da Web estticas


Um site esttico formado por um conjunto de pginas em HTML relacionadas e arquivos hospedados em um computador com um servidor Web em execuo. Um servidor Web o software que apresenta pginas da Web em resposta a solicitaes de navegadores da Web. Uma solicitao de pgina gerada quando um visitante clica em um link em uma pgina da Web, seleciona um marcador em um navegador ou digita um URL na caixa de texto de endereo do navegador. O contedo final de uma pgina da Web esttica determinado pelo designer da pgina e no alterado quando ela solicitada. Eis um exemplo:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 523


Preparao para criao de sites dinmicos

<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> </body> </html>

Todas as linhas do cdigo em HTML da pgina so escritas pelo designer antes da pgina ser colocada no servidor. Como o HTML, uma vez no servidor, no alterado, esse tipo de pgina chamado de pgina esttica. Nota: Mais especificamente, uma pgina esttica pode no ser to esttica assim. Por exemplo, uma imagem de sobreposio ou um contedo Flash (um arquivo SWF) pode dar vida a uma pgina esttica. No entanto, essa documentao se refere a uma pgina como sendo esttica caso ela seja enviada para o navegador sem modificaes. Quando recebe uma solicitao de uma pgina esttica, o servidor Web l a solicitao, localiza a pgina e a envia para o navegador solicitante, como mostra o seguinte exemplo:
3
Resposta

SERVIDOR WEB

<HTML> <p>H1 </HTML>


Navegador da web

2
Solicitao

1 1. Navegador da Web solicita a pgina esttica. 2. Servidor Web localiza a pgina. 3. Servidor Web envia a pgina para o navegador solicitante.

No caso dos aplicativos da Web, certas linhas de cdigo no so determinadas quando o visitante solicita a pgina. Para que a pgina seja enviada ao navegador, essas linhas devem ser determinadas por um mecanismo. O mecanismo abordado na seguinte seo.

Processamento de pginas dinmicas


Ao receber uma solicitao de uma pgina da Web esttica, um servidor Web envia a pgina diretamente para o navegador solicitante. Porm, ao receber uma solicitao de uma pgina dinmica, o servidor Web reage de maneira diferente: ele passa a pgina para uma parte especial do software responsvel pela concluso da pgina. Esse software especial chamado de servidor de aplicativo. O servidor de aplicativo l o cdigo na pgina, conclui a pgina de acordo com as instrues do cdigo e, em seguida, remove o cdigo da pgina. O resultado uma pgina esttica que o servidor de aplicativo passa para o servidor Web que, em seguida, envia a pgina para o navegador solicitante. Todo o obtido pelo navegador quando a pgina chega HTML puro. Eis uma visualizao do processo:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 524


Preparao para criao de sites dinmicos

SERVIDOR WEB

5
Resposta

4
<HTML> <p>H1 </HTML>

Servidor de aplicativos Navegador da Web

Solicitao

<HTML> <code> </HTML>

1. Navegador da Web solicita a pgina dinmica. 2. Servidor Web localiza e passa a pgina para o servidor de aplicativo. 3. Servidor de aplicativo rastreia a pgina em busca de instrues e conclui a pgina. 4. Servidor de aplicativo passa novamente a pgina concluda para o servidor Web. 5. Servidor Web envia a pgina concluda para o navegador solicitante

Acesso a um banco de dados


Um servidor de aplicativo permite trabalhar com recursos do servidor como, por exemplo, bancos de dados. Por exemplo, uma pgina dinmica pode instruir o servidor de aplicativo para extrair dados de um banco de dados e inserilos no HTML da pgina. Para obter mais informaes, consulte www.adobe.com/go/learn_dw_dbguide_br. O uso de um banco de dados para armazenar o contedo permite separar o design do site do contedo que voc deseja exibir para os usurios do site. Em vez de escrever arquivos em HTML individuais para cada pgina, voc s precisa escrever uma pgina ou modelo para os diferentes tipos de informaes que deseja apresentar. Em seguida, voc pode carregar o contedo em um banco de dados e, em seguida, fazer com que o site recupere esse contedo em resposta a uma solicitao do usurio. Voc tambm pode atualizar as informaes em uma nica fonte e, em seguida, preencher essa alterao em todo o site sem ter que editar manualmente todas as pginas. Voc pode usar o Adobe Dreamweaver CS5 para projetar formulrios da Web a fim de inserir, atualizar ou excluir dados do banco de dados. A instruo para extrair dados de um banco de dados chamada de consulta ao banco de dados. Uma consulta consiste em critrios de pesquisa expressados em uma linguagem de banco de dados chamada SQL (Linguagem de consulta estruturada). A consulta SQL escrita em scripts ou tags do servidor da pgina. Um servidor de aplicativo no pode se comunicar diretamente com um banco de dados porque o formato prprio do banco de dados processa os dados indecifrveis de maneira muito semelhante a um documento do Microsoft Word aberto no Bloco de Notas ou BBEdit talvez seja indecifrvel. O servidor de aplicativo pode se comunicar com o banco de dados apenas por meio de um driver de banco de dados: software que funciona como um intrprete entre o servidor de aplicativo e o banco de dados. Depois que o driver estabelece a comunicao, a consulta executada no banco de dados e um conjunto de registros criado. Um conjunto de registros um conjunto de dados extrados de uma ou mais tabelas de um banco de dados. O conjunto de registros retorna ao servidor de aplicativo, que usa os dados para completar a pgina. Eis uma consulta ao banco de dados simples escrita em SQL:
SELECT lastname, firstname, fitpoints FROM employees

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 525


Preparao para criao de sites dinmicos

A instruo cria um conjunto de registros com trs colunas e o preenche com linhas que contm sobrenome, nome e pontos em condicionamento fsico de todos os funcionrios no banco de dados. Para obter mais informaes, consulte www.adobe.com/go/learn_dw_sqlprimer_br. O seguinte exemplo mostra o processo de consulta a um banco de dados e o retorno dos dados ao navegador:
SERVIDOR WEB

9
Resposta

8
<HTML> <p>dados </HTML>

7 6
Conjunto de registros

Servidor de aplicativos Navegador da Web

Driver de banco de dados

Banco de dados

Solicitao

<HTML> <code> </HTML>

Consulta

4 2 3

1. Navegador da Web solicita a pgina dinmica. 2. Servidor Web localiza e passa a pgina para o servidor de aplicativo. 3. Servidor de aplicativo rastreia a pgina em busca de instrues. 4. Servidor de aplicativo envia consulta ao driver de banco de dados. 5. Driver executa a consulta no banco de dados. 6. Conjunto de registros devolvido ao driver. 7. Driver passa o conjunto de registros para o servidor de aplicativo 8. Servidor de aplicativo insere dados na pgina e, em seguida, passa a pgina para o servidor Web 9. Servidor Web envia a pgina concluda para o navegador solicitante.

Voc pode usar praticamente qualquer banco de dados com o aplicativo da Web, desde que o driver de banco de dados apropriado esteja instalado no servidor. Caso pretenda criar pequenos aplicativos de baixo custo, voc pode usar um banco de dados baseado em arquivo como, por exemplo, um criado no Microsoft Access. Caso pretenda criar aplicativos robustos, fundamentais empresa, voc pode usar um banco de dados baseado em servidor como, por exemplo, um criado no Microsoft SQL Server, no Oracle 9i ou no MySQL. Caso o banco de dados esteja localizado em um sistema que no seja o servidor Web, verifique se h uma conexo rpida entre os dois sistemas para que o aplicativo da Web possa operar com rapidez e eficincia.

Mais tpicos da Ajuda


Guia introdutrio aos bancos de dados

Criao de pginas dinmicas


A criao de uma pgina dinmica consiste em escrever primeiramente o HTML e, em seguida, adicionar os scripts ou as tags do servidor ao HTML para tornar a pgina dinmica. Quando voc exibe o cdigo resultante, a linguagem aparece incorporada ao HTML da pgina. Dessa forma, essas linguagens so conhecidas como linguagens de programao com HTML incorporado. O seguinte exemplo bsico usa a Linguagem de markup do ColdFusion (CFML):

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 526


Preparao para criao de sites dinmicos

<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> <!--- embedded instructions start here ---> <cfset department="Sales"> <cfoutput> <p>Be sure to visit our #department# page.</p> </cfoutput> <!--- embedded instructions end here ---> </body> </html>

As instrues incorporadas pgina realizam as seguintes aes:


1 Crie uma varivel chamada department e atribua a seqncia de caracteres "Sales" a ela. 2 Insira o valor da varivel, "Sales", ao cdigo em HTML.

O servidor de aplicativo retorna a seguinte pgina ao servidor Web:


<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> <p>Be sure to visit our Sales page.</p> </body> </html>

O servidor Web envia a pgina para o navegador solicitante, que a exibe da seguinte forma: Sobre a Trio Motors A Trio Motors uma grande montadora de automveis. No deixe de visitar a nossa pgina de vendas. Voc escolhe uma linguagem de script ou baseada em tag a ser usada de acordo com a tecnologia disponvel no servidor. Estas so as linguagens mais conhecidas para as tecnologias de servidor que recebem suporte doDreamweaver:
Tecnologia de servidor ColdFusion ASP (Pginas ativas do servidor) Linguagem Linguagem de markup do ColdFusion (CFML) VBScript JavaScript PHP PHP

O Dreamweaver pode criar os scripts ou as tags do servidor necessrias ao funcionamento das pginas, ou voc pode escrev-los manualmente no ambiente de codificao do Dreamweaver.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 527


Preparao para criao de sites dinmicos

Mais tpicos da Ajuda


Escolha do servidor de aplicativo na pgina 531

Terminologia do aplicativo da Web


Esta seo define os termos mais usados em relao aos aplicativos da Web.
Um servidor de aplicativo Software que ajuda um servidor Web a processar pginas da Web que contenham scripts ou tags do servidor. Quando uma pgina dessas solicitada no servidor, o servidor Web a entrega ao servidor de aplicativo para que ele a processe antes do envio da pgina para o navegador. Para obter mais informaes, consulte Como funciona um aplicativo de Web na pgina 522.

Servidores de aplicativo comuns incluem ColdFusion e PHP.


Um banco de dados Um conjunto de dados armazenados em tabelas. Cada uma das linhas de uma tabela constitui um registro e cada coluna, um campo no registro, como mostrado no seguinte exemplo:
Campos (colunas)

Nmero Sobrenome

Nome

Posio

Objetivo

Registros (linhas)

Um driver de banco de dados Software que funciona como intrprete entre um aplicativo da Web e um banco de

dados. Os dados em um banco de dados so armazenados em um formato prprio. Um driver de banco de dados permite ao aplicativo da Web ler e manipular dados que outrora seriam indecifrveis.
Um sistema de gerenciamento do banco de dados (DBMS ou sistema de banco de dados) Software usado para criar

e manipular bancos de dados. Entre os sistemas de banco de dados mais comuns esto Microsoft Access, Oracle 9i e MySQL.
Uma consulta ao banco de dados A operao que extrai um conjunto de registros de um banco de dados. Uma

consulta consiste em critrios de pesquisa expressados em uma linguagem de banco de dados chamada SQL. Por exemplo, a consulta pode especificar que apenas determinadas colunas ou certos registros sejam includos no conjunto.
Uma pgina dinmica Uma pgina da Web personalizada por um servidor de aplicativo para que a pgina seja enviada

a um navegador.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 528


Preparao para criao de sites dinmicos

Um conjunto de registros Um conjunto de dados extrados de uma ou mais tabelas em um banco de dados, como mostrado no seguinte exemplo:

Um banco de dados relacional Um banco de dados que contm mais de uma tabela, com as tabelas compartilhando os dados. O seguinte banco de dados relacional porque duas tabelas compartilham a mesma coluna DepartmentID.

Uma tecnologia de servidor A tecnologia que o servidor de aplicativo usa para modificar pginas dinmicas durante

o runtime. O ambiente de desenvolvimento do Dreamweaver d suporte s seguintes tecnologias de servidor:

Adobe ColdFusion Microsoft ASP (Pginas ativas do servidor) PHP: PHP (Pr-processador de hipertexto)
Voc tambm pode usar o ambiente de codificao do Dreamweaver a fim de desenvolver pginas para qualquer outra tecnologia de servidor no listada.
Uma pgina esttica Uma pgina da Web no modificada por um servidor de aplicativo para que a pgina seja enviada

a um navegador. Para obter mais informaes, consulte Processamento de pginas da Web estticas na pgina 522.
Um aplicativo da Web Um site que contm pginas de contedo parcial ou inteiramente no determinado. O

contedo final dessas pginas s determinado quando um visitante solicita uma pgina do servidor Web. Como o contedo final da pgina varia de solicitao para solicitao com base nas aes do visitante, esse tipo chamado de pgina dinmica.
Um servidor Web Software que envia pginas da Web em resposta a solicitaes de navegadores da Web. Uma

solicitao de pgina gerada quando um visitante clica em um link em uma pgina da Web no navegador, seleciona um marcador no navegador ou digita um URL na caixa de texto de endereo do navegador. Servidores Web populares incluem o Microsoft Internet Information Server (IIS) e o Apache HTTP Server.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 529


Preparao para criao de sites dinmicos

Configurao do computador para o desenvolvimento de aplicativo


Do que voc precisa para criar aplicativos da Web
Para criar aplicativos da Web no Adobe Dreamweaver CS5, voc precisa do seguinte software:

Um servidor Web Um servidor de aplicativo que funcione com o servidor Web


Nota: No contexto dos aplicativos da Web, os termos servidor Web e servidor de aplicativo se referem a software, e no a hardware. Caso queira usar um banco de dados com o aplicativo, voc precisa do seguinte software adicional:

Um sistema de banco de dados Um driver que d suporte ao banco de dados


Vrias empresas de hospedagem na Web oferecem planos que permitem usar o software para testar e implantar aplicativos da Web. Em alguns casos, voc pode instalar o software obrigatrio no mesmo computador do Dreamweaver para fins de desenvolvimento. Voc tambm pode instalar o software em um computador de rede (normalmente, um computador com Windows 2000 ou XP) para que outros desenvolvedores da equipe possam trabalhar em um projeto. Caso queira usar um banco de dados com o aplicativo da Web, voc deve inicialmente se conectar a ele.

Mais tpicos da Ajuda


Configurao de um ambiente de desenvolvimento ColdFusion na pgina 531 Configurao de um ambiente de desenvolvimento PHP na pgina 532 Configurao de um ambiente de desenvolvimento ASP na pgina 532

Fundamentos do servidor Web


Para desenvolver e testar pginas da Web dinmicas, voc precisa de um servidor Web em funcionamento. Um servidor Web o software que apresenta pginas da Web em resposta a solicitaes de navegadores da Web. s vezes, um servidor Web chamado de servidor HTTP. Voc pode instalar e usar um servidor Web no computador local. Caso seja um usurio do Macintosh, voc pode usar o servidor Web Apache j instalado no Macintosh. Nota: A Adobe no d suporte tcnico a softwares de outros fabricantes como, por exemplo, o Microsoft Internet Information Server. Caso voc precise de ajuda com um produto Microsoft, entre em contato com o suporte tcnico da Microsoft. Caso voc use o IIS (Internet Information Server) para desenvolver aplicativos da Web, o nome padro do servidor Web o nome do computador. Voc pode alterar o nome do servidor alterando o nome do computador. Caso o computador no tenha nenhum nome, o servidor usa a palavra localhost. O nome do servidor corresponde pasta raiz do servidor, que (em um computador com Windows) deve ser C:\Inetpub\wwwroot. Voc pode abrir qualquer pgina da Web armazenada na pasta raiz digitando o seguinte URL em um navegador em execuo no computador: http://nome_do_servidor/nome_do_arquivo

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 530


Preparao para criao de sites dinmicos

Por exemplo, caso o nome do servidor seja mer_noire e uma pgina da Web chamada soleil.html seja armazenada em C:\Inetpub\wwwroot\, voc pode abrir a pgina digitando o seguinte URL em um navegador em execuo no computador local: http://mer_noire/soleil.html Nota: No se esquea de usar barras, e no barras invertidas, nos URLs. Voc tambm pode abrir qualquer pgina da Web armazenada em qualquer subpasta da pasta raiz especificando a subpasta no URL. Por exemplo, suponhamos que o arquivo soleil.html esteja armazenado em uma subpasta chamada gamelan da seguinte forma: C:\Inetpub\wwwroot\gamelan\soleil.html Voc pode abrir essa pgina digitando o seguinte URL em um navegador em execuo no computador: http://mer_noire/gamelan/soleil.html Quando o servidor Web est em execuo no computador, voc pode substituir o nome do servidor por localhost. Por exemplo, os seguintes URLs abrem a mesma pgina em um navegador: http://mer_noire/gamelan/soleil.html http://localhost/gamelan/soleil.html Nota: Outra expresso que voc pode usar em lugar do nome do servidor ou de localhost 127.0.0.1 (por exemplo, http://127.0.0.1/gamelan/soleil.html).

Mais tpicos da Ajuda


Configurao de um ambiente de desenvolvimento ColdFusion na pgina 531 Configurao de um ambiente de desenvolvimento PHP na pgina 532 Configurao de um ambiente de desenvolvimento ASP na pgina 532

Escolha de um servidor Web


Para desenvolver e testar aplicativos da Web, voc pode escolher um dentre vrios servidores Web, inclusive o Microsoft Internet Information Server (IIS) e o Apache HTTP Server. Caso no esteja usando um servio de hospedagem na Web, escolha um servidor Web e o instale no computador local com o propsito de desenvolvimento. Usurios do Windows e do Macintosh que desejam desenvolver aplicativos da Web do ColdFusion podem usar o servidor Web includo na edio de desenvolvedor do servidor de aplicativo ColdFusion 8, cuja instalao e uso so gratuitos. Outros usurios do Windows podem executar um servidor Web no computador local instalando o IIS. O servidor Web talvez j esteja instalado no sistema. Verifique a estrutura da pasta para ver se ela contm uma pasta C:\Inetpub ou D:\Inetpub. O IIS cria essa pasta durante a instalao. Usurios do sistema operacional Mac podem usar o servidor Web Apache instalado com o sistema operacional. Para obter informaes sobre a instalao e a configurao de outros servidores Web, consulte a documentao do fornecedor do servidor ou o administrador do sistema.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 531


Preparao para criao de sites dinmicos

Escolha do servidor de aplicativo


Servidor de aplicativo um software que ajuda um servidor Web a processar pginas dinmicas. Ao escolher um servidor de aplicativo, voc deve considerar vrios fatores, inclusive o oramento, a tecnologia de servidor que deseja usar (ColdFusion, ASP, ou PHP), alm do tipo de servidor Web.
Oramento Alguns fornecedores vendem servidores de aplicativo sofisticados cujos preos de aquisio e administrao so altos. Outros fornecedores oferecem solues mais simples e mais econmicas (um exemplo o ColdFusion). Alguns servidores de aplicativo so incorporados a servidores Web (como o Microsoft IIS), enquanto outros podem ser baixados gratuitamente na Internet (como o PHP). Tecnologia de servidor Servidores de aplicativo usam tecnologias diferentes. O Dreamweaver d suporte a trs tecnologias de servidor: ColdFusion, ASP e PHP. A tabela a seguir mostra servidores de aplicativo comuns disponveis para as tecnologias de servidor que recebem suporte do Dreamweaver:
Tecnologia de servidor ColdFusion ASP PHP Servidor de aplicativo Adobe ColdFusion 8 Microsoft IIS Servidor PHP

Para obter mais informaes sobre o ColdFusion, selecione Ajuda do ColdFusion no menu Ajuda. Para obter mais informaes sobre o ASP, visite o site da Microsoft em http://msdn.microsoft.com/library/default.asp?url=/library/pt_br/dnanchor/html/activeservpages.asp. Para obter mais informaes sobre o PHP, visite o site do PHP em www.php.net/.

Escolha de um banco de dados


Os bancos de dados se apresentam em muitos formulrios de acordo com a quantidade e a complexidade dos dados que devem armazenar. Ao escolher um banco de dados, voc deve considerar vrios fatores, incluindo o oramento e a previso do nmero de usurios que deve acessar o banco de dados.
Oramento Alguns fornecedores produzem servidores de sofisticados aplicativos de banco de dados, cujos preos de aquisio e administrao so altos. Outros fornecedores fornecem solues mais baratas e de custo efetivo maior, como o Microsoft Access ou o banco de dados de cdigo-fonte aberto MySQL. Usurios Caso voc preveja o acesso de uma grande comunidade de usurios ao site, selecione um banco de dados projetado para dar suporte base de usurios desejada do site. Para sites que exijam maior flexibilidade na modelagem de dados, alm da possibilidade de suporte a grandes comunidades de usurios simultneos, deve-se considerar bancos de dados relacionais baseados em servidor (normalmente conhecidos como RDBMS), como o Microsoft SQL Server e o Oracle.

Configurao de um ambiente de desenvolvimento ColdFusion


Para obter instrues detalhadas sobre a configurao de um ambiente de desenvolvimento do ColdFusion para Dreamweaver em computador com Windows ou Mac, consulte o site da Adobe em www.adobe.com/go/learn_dw_cfsetup_br. Os usurios do Windows e do Macintosh podem baixar e instalar uma edio de desenvolvedor gratuita totalmente funcional do servidor de aplicativo do ColdFusion no site da Adobe, em www.adobe.com/go/coldfusion_br.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 532


Preparao para criao de sites dinmicos

Nota: A Developer Edition se destina ao uso no comercial para o desenvolvimento e o teste dos aplicativos da Web. Ela no est licenciada para desenvolvimento. Ela d suporte a solicitaes do host local e a dois endereos IP remotos. Voc pode us-la para desenvolver e testar os aplicativos da Web sempre que desejar; o software no expira. Para obter mais informaes, consulte a ajuda do ColdFusion (Ajuda > Ajuda do ColdFusion). Durante a instalao, voc pode configurar o ColdFusion para usar o servidor Web incorporado ao ColdFusion ou outro servidor Web instalado no sistema. Normalmente, melhor que o ambiente de desenvolvimento corresponda ao ambiente de produo. Por isso, caso haja um servidor Web existente como, por exemplo, o Microsoft IIS no computador de desenvolvimento, voc talvez queira us-lo em lugar do servidor Web do ColdFusion incorporado.

Configurao de um ambiente de desenvolvimento PHP


Para obter instrues detalhadas sobre a configurao de um ambiente de desenvolvimento PHP para Dreamweaver em computador com Windows ou Mac, consulte o site da Adobe em www.adobe.com/go/learn_dw_phpsetup_br. H edies do servidor de aplicativo para os sistemas Windows, Linux, UNIX, HP-UX, Solaris e Mac OS X. Para obter mais informaes sobre o servidor de aplicativo, consulte a documentao do PHP, que voc tambm pode baixar no site do PHP em www.php.net/download-docs.php.

Configurao de um ambiente de desenvolvimento ASP


Para obter instrues detalhadas sobre a configurao de um ambiente de desenvolvimento ASP para Dreamweaver em computador com Windows ou Mac, consulte o site da Adobe em www.adobe.com/go/learn_dw_aspsetup_br. Para executar as pginas do ASP, voc precisa de um servidor de aplicativo que d suporte ao Microsoft Active Server Pages 2.0. como, por exemplo, o Microsoft IIS (Internet Information Services), que acompanha o Windows 2000 e o Windows XP Professional. Os usurios do Windows XP Professional podem instalar e executar o IIS no computador local. Os usurios do Macintosh podem usar um servio de hospedagem na Web com um plano ASP ou instalar o IIS em um computador remoto.

Criao de uma pasta raiz para o aplicativo


Depois da inscrio em uma empresa de hospedagem na Web ou da configurao do software de servidor propriamente dito, crie uma pasta raiz para o aplicativo da Web no computador em que o servidor Web est execuo. A pasta raiz pode ser local ou remota, dependendo do local em que o servidor Web est em execuo. O servidor Web pode fornecer qualquer arquivo que esteja nessa pasta ou em qualquer uma de suas subpastas em resposta a uma solicitao HTTP de um navegador da Web. Por exemplo, em um computador com o ColdFusion 8 em execuo, possvel fornecer a um navegador da Web qualquer arquivo na pasta \ColdFusion8\wwwroot ou em uma de suas subpastas. Estas so as pastas raiz padro dos servidores Web selecionados:
Servidor Web ColdFusion 8 IIS Apache (Windows) Apache (Macintosh) Pasta raiz padro \ColdFusion8\wwwroot \Inetpub\wwwroot \apache\htdocs Users:MyUserName:Sites

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 533


Preparao para criao de sites dinmicos

Para testar o servidor Web, coloque uma pgina em HTML de teste na pasta raiz padro e tente abri-la digitando o URL da pgina em um navegador. O URL formado pelo nome de domnio e pelo nome de arquivo da pgina em HTML da seguinte forma: www.exemplo.com/pgina_de_teste.htm. Caso o servidor Web esteja em execuo no computador local, voc pode usar localhost em lugar de um nome de domnio. Digite um das seguintes URLs localhost de acordo com o servidor Web:
Servidor Web ColdFusion 8 IIS Apache (Windows) Apache (Macintosh) URL localhost http://localhost:8500/testpage.htm http://localhost/testpage.htm http://localhost:80/testpage.htm http://localhost/~MyUserName/testpage.htm (em que MyUserName o nome de usurio do Macintosh)

Nota: Por padro, o servidor Web ColdFusion executado na porta 8500 e o servidor Apache para Windows, na porta 80. Caso a pgina no seja aberta como esperado, procure os seguintes erros:

O servidor Web no foi iniciado. Consulte a documentao do servidor Web para obter as instrues iniciais. O arquivo no tem uma extenso .htm ou .html. Voc digitou o caminho de arquivo da pgina (por exemplo, c:\ColdFusion8\wwwroot\testpage.htm) e no o URL
(por exemplo, http://localhost:8500/testpage.htm) na caixa de texto de endereo do navegador.

O URL digitado est incorreto. Verifique se h erros e se o nome de arquivo no seguido por uma barra como,
por exemplo, http://localhost:8080/testpage.htm/. Aps a criao de uma pasta raiz para o aplicativo, defina um site do Dreamweaver para gerenciar os arquivos.

Mais tpicos da Ajuda


Fundamentos do servidor Web na pgina 529 Configurao de um site do Dreamweaver na pgina 37

Sobre a definio de um site do Dreamweaver


Depois da configurao do sistema para desenvolver aplicativos da Web, defina um site do Dreamweaver para gerenciar os arquivos. Antes de iniciar, verifique se voc atende aos seguintes requisitos:

Voc tem acesso a um servidor Web. O servidor Web pode estar em execuo no computador local, em um
computador remoto como, por exemplo, um servidor de desenvolvimento ou um servidor mantido pela empresa de hospedagem na Web.

Um servidor de aplicativo est instalado e em execuo no sistema em execuo no servidor Web. Voc criou uma pasta raiz para o aplicativo da Web no sistema em que o servidor Web est em execuo.
A definio de um site do Dreamweaver para o aplicativo da Web consiste em trs etapas: 1. Definir uma pasta local A pasta local a pasta que voc usa para armazenar cpias funcionais dos arquivos do site no disco rgido. Voc pode definir uma pasta local para cada novo aplicativo da Web criado. A definio de uma pasta local tambm d a possibilidade de gerenciar os arquivos e de transferi-los de e para o servidor Web com facilidade.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 534


Preparao para criao de sites dinmicos

2. Definir uma pasta remota Defina uma pasta localizada no computador no qual o servidor Web est em execuo como uma pasta remota do Dreamweaver. A pasta remota a pasta que voc criou para o aplicativo da Web no servidor Web. 3. Definir uma pasta de teste O Dreamweaver usa a pasta para gerar e exibir o contedo dinmico, alm de se conectar a bancos de dados enquanto voc trabalha. O servidor de teste pode ser o computador local, um servidor de desenvolvimento, um servidor de teste ou um servidor de produo. Desde que ele consiga processar esse tipo de pgina dinmica que voc pretende desenvolver, a opo no importa. Depois que o site do Dreamweaver estiver definido, voc poder comear a criar o aplicativo da Web.

Mais tpicos da Ajuda


Configurao de um site do Dreamweaver na pgina 37

Conexes de banco de dados para desenvolvedores do ColdFusion


Conexo com um banco de dados do ColdFusion
Ao desenvolver um aplicativo da Web do ColdFusion no Dreamweaver, voc se conecta a um banco de dados selecionando uma fonte de dados do ColdFusion definida no Dreamweaver ou no Administrador do ColdFusion, o console de gerenciamento do servidor. Antes de se conectar a um banco de dados, voc deve configurar um aplicativo da Web do ColdFusion. Voc tambm deve configurar um banco de dados no computador local ou em um sistema ao qual voc tem acesso por rede ou FTP. Verifique se o Dreamweaver sabe onde localizar as fontes de dados do ColdFusion. Para recuperar as fontes de dados do ColdFusion no momento da criao, o Dreamweaver coloca os scripts em uma pasta do computador no qual o ColdFusion est em execuo. Voc deve especificar essa pasta na categoria Servidor de teste da caixa de dilogo Definio de sites. Em seguida, voc deve criar uma fonte de dados do ColdFusion no Dreamweaver ou no Administrador do ColdFusion (caso ainda no haja nenhuma). Depois de criar uma fonte de dados do ColdFusion, voc pode us-la no Dreamweaver para se conectar ao banco de dados.

Criar ou modificar uma fonte de dados do ColdFusion


Para poder usar as informaes do banco de dados na pgina, voc deve criar uma fonte de dados do ColdFusion. Caso esteja executando o ColdFusion MX 7 ou posterior, voc pode criar ou modificar diretamente a fonte de dados no Dreamweaver. Caso esteja executando o ColdFusion MX, voc deve usar o console de gerenciamento do servidor, o Administrador do ColdFusion MX, para criar ou modificar a fonte de dados. Nesse caso, voc pode continuar usando o Dreamweaver para abrir o Administrador do ColdFusion MX.

Mais tpicos da Ajuda


Configurar um servidor de teste na pgina 46 Ativar os aprimoramentos feitos no ColdFusion na pgina 674

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 535


Preparao para criao de sites dinmicos

Criar ou modificar uma fonte de dados do ColdFusion caso o ColdFusion MX 7 ou posterior esteja em execuo
1 Verifique se um computador com o ColdFusion MX 7 ou posterior em execuo est definido como servidor de

teste do site.
2 Abra uma pgina do ColdFusion no Dreamweaver. 3 Para criar uma nova fonte de dados, clique no boto de adio (+) do painel Bancos de dados (Janelas > Bancos de

dados) e insira os valores de parmetro especficos do driver de banco de dados. Nota: O Dreamweaver s exibe o boto de adio (+) caso voc esteja executando o ColdFusion MX 7 ou posterior.
4 Para modificar uma fonte de dados, clique duas vezes na conexo de banco de dados no painel Bancos de dados e

faa as alteraes. Voc pode editar qualquer parmetro, exceto o nome da fonte de dados. Para obter mais informaes, consulte a documentao do fornecedor do driver ou o administrador do sistema.

Criar ou modificar uma fonte de dados do ColdFusion caso o ColdFusion MX 6.1 ou 6.0 esteja em execuo
1 Abra uma pgina do ColdFusion no Dreamweaver. 2 No painel Bancos de dados (Janela > Bancos de dados) do Dreamweaver, clique em Modificar fontes de dados na

barra de ferramentas do painel.


3 Faa logon no Administrador do ColdFusion MX e crie ou modifique a fonte de dados.

Para obter instrues, consulte a ajuda do ColdFusion (Ajuda > Ajuda do ColdFusion). Voc deve fornecer determinados valores de parmetro para criar a fonte de dados do ColdFusion. Em relao aos valores de parmetro especficos do driver de banco de dados, consulte a documentao do fornecedor do driver ou o administrador do sistema. Depois de criar uma fonte de dados do ColdFusion, voc pode us-la no Dreamweaver.

Conexo com o banco de dados no Dreamweaver


Depois de criar uma fonte de dados do ColdFusion, use-a para se conectar ao banco de dados no Dreamweaver. Abra qualquer pgina do ColdFusion no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). As fontes de dados do ColdFusion devem ser exibidas no painel. Caso as fontes de dados no sejam exibidas, complete a lista de verificao no painel. Verifique se o Dreamweaver sabe onde localizar as fontes de dados do ColdFusion. Na categoria Servidor de teste da caixa de dilogo Definio de sites, especifique a pasta raiz do site no computador no qual o ColdFusion est em execuo.

Mais tpicos da Ajuda


Soluo de problemas das conexes de banco de dados na pgina 545

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 536


Preparao para criao de sites dinmicos

Conexes de banco de dados para desenvolvedores do ASP


Sobre conexes de banco de dados do ASP
Um aplicativo do ASP deve se conectar a um banco de dados por meio de um driver ODBC (conectividade com banco de dados aberto) ou um provedor OLE DB (banco de dados de vinculao e incorporao de objeto). O driver ou o provedor funciona como um intrprete que permite ao aplicativo da Web se comunicar com o banco de dados. A seguinte tabela mostra alguns drivers que voc pode usar com os bancos de dados Microsoft Access, Microsoft SQL Server e Oracle:
Banco de dados Microsoft Access Driver de banco de dados Driver do Microsoft Access (ODBC) Provedor do Microsoft Jet para Access (OLE DB) Microsoft SQL Server Driver do Microsoft SQL Server (ODBC) Provedor do Microsoft SQL Server (OLE DB) Oracle Driver do Microsoft Oracle (ODBC) Provedor do Oracle para OLE DB

Voc pode usar o DSN (nome de uma fonte de dados) ou a seqncia de caracteres de conexo para se conectar ao banco de dados. Voc deve usar uma seqncia de caracteres de conexo caso esteja se conectando por meio de um provedor OLE DB ou um driver ODBC no esteja instalado em um sistema Windows. Um DSN um identificador com apenas uma palavra como, por exemplo, myConnection, que aponta para o banco de dados e contm todas as informaes necessrias para se conectar a ele. Voc define um DSN no Windows. Voc pode usar um DSN caso esteja se conectando por meio de um driver ODBC instalado em um sistema Windows. Uma seqncia de conexo uma expresso codificada manualmente que identifica o banco de dados e lista as informaes necessrias para se conectar a ele, como mostrado no seguinte exemplo:
Driver={SQL Server};Server=Socrates;Database=AcmeMktg; UID=wiley;PWD=roadrunner

Nota: Voc tambm pode usar uma seqncia de conexo caso esteja se conectando por meio de um driver ODBC instalado em um sistema Windows, embora o uso de um DSN seja mais fcil.

Mais tpicos da Ajuda


Acesso a um banco de dados na pgina 524

Sobre as conexes OLE DB


Voc pode usar um provedor OLE DB para se comunicar com o banco de dados (o OLE DB s est disponvel no Windows NT, 2000 ou XP). A criao de uma conexo OLE DB direta com banco de dados especfico pode aumentar a velocidade da conexo eliminando a camada ODBC entre o aplicativo da Web e o banco de dados. Caso voc no especifique um provedor OLE DB para o banco de dados, o ASP usa o provedor OLE DB padro para drivers ODBC a fim de se comunicar com um driver ODBC que, por sua vez, se comunica com o banco de dados.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 537


Preparao para criao de sites dinmicos

H provedores OLE DB diferentes para bancos de dados diferentes. Voc pode obter provedores OLE DB para o Microsoft Access e o SQL Server baixando e instalando os pacotes do Microsoft Data Access Components (MDAC) 2.5 e 2.7 no computador com o Windows e o IIS em execuo. Voc pode baixar os pacotes MDAC gratuitamente no site da Microsoft em http://msdn.microsoft.com/data/mdac/downloads/. Nota: Verifique se voc instalou o MDAC 2.5 antes da instalao do MDAC 2.7. Voc pode baixar provedores OLE DB para bancos de dados Oracle no site da Oracle em www.oracle.com/technology/software/tech/windows/ole_db/index.html (o registro obrigatrio). No Dreamweaver, voc cria uma conexo OLE DB incluindo um parmetro Provider em uma seqncia de caracteres de conexo. Por exemplo, eis os parmetros de provedores OLE DB comuns para bancos de dados Access, SQL Server e Oracle, respectivamente:
Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;...

Para o valor do parmetro do provedor OLE DB, consulte a documentao do fornecedor do provedor ou o administrador do sistema.

Sobre as seqncias de caracteres de conexo


Uma seqncia de caracteres de conexo combina todas as informaes de que o aplicativo da Web precisa para se conectar a um banco de dados. O Dreamweaver insere essa seqncia de caracteres nos scripts do servidor da pgina para serem processados posteriormente pelo servidor de aplicativo. Uma seqncia de caracteres de conexo para bancos de dados Microsoft Access e SQL Server consiste em uma combinao dos seguintes parmetros separados por pontos-e-vrgulas:
Provedor Especifica o provedor OLE DB para o banco de dados. Por exemplo, eis os parmetros de provedores OLE

DB comuns para bancos de dados Access, SQL Server e Oracle, respectivamente:


Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;...

Para o valor do parmetro do provedor OLE DB, consulte a documentao do fornecedor do provedor ou o administrador do sistema. Caso no inclua um parmetro Provedor, usado o provedor OLE DB padro para ODBC, e voc deve especificar um driver ODBC apropriado ao banco de dados.
Driver Especifica o driver ODBC a ser usado caso voc no especifique um provedor OLE DB para o banco de dados. Servidor Especifica o servidor que hospeda o banco de dados SQL Server caso o aplicativo da Web seja executado em

um servidor diferente.
Banco de dados O nome de um banco de dados SQL Server. DBQ O caminho para um banco de dados baseado em arquivo como, por exemplo, um criado no Microsoft Access. O caminho est no servidor que hospeda o arquivo do banco de dados. UID Especifica o nome do usurio. PWD Especifica a senha do usurio. DSN O nome da fonte de dados, caso voc uma. Dependendo de como define o DSN no servidor, voc pode omitir os

demais parmetros da seqncia de caracteres de conexo. Por exemplo, DSN=Results pode ser uma seqncia de caracteres de conexo vlida caso voc defina os demais parmetros ao criar o DSN.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 538


Preparao para criao de sites dinmicos

As seqncias de caracteres de conexo para outros tipos de bancos de dados talvez no usem os parmetros listados acima ou tero nomes ou usos diferentes quanto aos parmetros. Para obter mais informaes, consulte a documentao do fornecedor do banco de dados ou o administrador do sistema. Eis um exemplo de uma seqncia de caracteres de conexo que criar uma conexo ODBC com um banco de dados do Access chamado trees.mdb:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Research\trees.mdb

Eis um exemplo de uma conexo que criar uma conexo OLE DB com um banco de dados do SQL Server chamado Mothra localizado em um servidor chamado Gojira:
Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith; PWD=orlando8

Criar uma seqncia de caracteres de conexo usando um DSN local


Nota: Esta seo pressupe que voc tenha configurado um aplicativo do ASP. Ele tambm considera que h um banco de dados configurado no computador local ou em um sistema ao qual voc tem acesso por rede ou FTP. Voc pode usar um DSN para criar uma conexo ODBC entre o aplicativo da Web e o banco de dados. DSN um nome que contm todos os parmetros necessrios para se conectar a um banco de dados especfico usando um driver ODBC. Como s pode especificar um driver ODBC em um DSN, voc deve usar uma seqncia de caracteres de conexo caso queira usar um provedor OLE DB. Voc pode usar um DSN definido localmente para criar uma conexo de banco de dados no Dreamweaver.
1 Defina um DSN no computador com o Windows e o Dreamweaver em execuo.

Para obter instrues, consulte os seguintes artigos no site da Microsoft:

Caso o computador esteja executando o Windows 2000, consulte o artigo da Base de Dados de Conhecimento da
Microsoft 300596 em http://support.microsoft.com/default.aspx?scid=kb;pt_br;300596

Caso o computador esteja executando o Windows XP, consulte o artigo da Base de Dados de Conhecimento da
Microsoft 305599 em http://support.microsoft.com/default.aspx?scid=kb;pt_br;305599
2 Abra uma pgina do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 3 Clique no boto de adio (+) no painel e selecione Nome da fonte de dados (DSN) no menu. 4 Digite um nome para a nova conexo sem espaos ou caracteres especiais. 5 Selecione a opo Usando o DSN local e escolha o DSN que voc deseja usar no menu Nome da fonte de dados

(DSN). Caso voc queira usar um DSN local, mas ainda no tenha definido um, clique em Definir para abrir o Administrador de fonte de dados ODBC do Windows.
6 Complete as caixas Nome do usurio e Senha. 7 Voc pode restringir o nmero de itens de banco de dados que o Dreamweaver recupera durante o design clicando

em Avanado e digitando um nome de esquema ou de catlogo. Nota: Voc no pode criar um esquema ou catlogo no Microsoft Access.
8 Clique em Testar para se conectar ao banco de dados e, depois, clique em OK. Caso haja uma falha na conexo,

clique duas vezes na seqncia de caracteres de conexo ou verifique as configuraes da pasta de teste que o Dreamweaver usa para processar pginas dinmicas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 539


Preparao para criao de sites dinmicos

Mais tpicos da Ajuda


Restringir informaes de banco de dados exibidas no Dreamweaver na pgina 553 Configurao do computador para o desenvolvimento de aplicativo na pgina 529 Soluo de problemas das conexes de banco de dados na pgina 545

Criar uma seqncia de caracteres de conexo usando um DSN remoto


Nota: Esta seo pressupe que voc tenha configurado um aplicativo do ASP. Ele tambm considera que h um banco de dados configurado no computador local ou em um sistema ao qual voc tem acesso por rede ou FTP. Nota: O Dreamweaver pode recuperar apenas DSNs de servidor criados com o Administrador de fonte de dados ODBC do Windows. Voc pode usar um DSN definido em um computador remoto para criar uma conexo de banco de dados no Dreamweaver. Caso voc queira usar um DSN remoto, o DSN deve ser definido no computador com o Windows e o servidor de aplicativo em execuo (provavelmente, o IIS). Nota: Como s pode especificar um driver ODBC em um DSN, voc deve usar uma seqncia de caracteres de conexo caso queira usar um provedor OLE DB.
1 Defina um DSN no sistema remoto em que o servidor de aplicativo est em execuo.

Para obter instrues, consulte os seguintes artigos no site da Microsoft:

Caso o computador remoto esteja executando o Windows 2000, consulte o artigo da Base de Dados de
Conhecimento da Microsoft 300596 em http://support.microsoft.com/default.aspx?scid=kb;pt_br;300596

Caso o computador remoto esteja executando o Windows XP, consulte o artigo da Base de Dados de Conhecimento
da Microsoft 305599 em http://support.microsoft.com/default.aspx?scid=kb;pt_br;305599
2 Abra uma pgina do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 3 Clique no boto de adio (+) no painel e selecione Nome da fonte de dados (DSN) no menu. 4 Digite um nome para a nova conexo sem espaos ou caracteres especiais. 5 Selecione Usando DSN no servidor de teste.

Nota: Os usurios do Macintosh podem ignorar essa etapa porque todas as conexes de banco de dados usam DSNs no servidor de aplicativo.
6 Digite o DSN ou clique no boto DSN para conect-lo ao servidor e selecione o DSN para o banco de dados que

voc deseja e, em seguida, complete as opes.


7 Complete as caixas Nome do usurio e Senha. 8 Voc pode restringir o nmero de itens de banco de dados que o Dreamweaver recupera durante o design clicando

em Avanado e digitando um nome de esquema ou de catlogo. Nota: Voc no pode criar um esquema ou catlogo no Microsoft Access.
9 Clique em Testar para se conectar ao banco de dados e, depois, clique em OK. Caso haja uma falha na conexo,

clique duas vezes na seqncia de caracteres de conexo ou verifique as configuraes da pasta de teste que o Dreamweaver usa para processar pginas dinmicas.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 540


Preparao para criao de sites dinmicos

Mais tpicos da Ajuda


Configurao do computador para o desenvolvimento de aplicativo na pgina 529 Restringir informaes de banco de dados exibidas no Dreamweaver na pgina 553 Soluo de problemas das conexes de banco de dados na pgina 545

Criar uma conexo usando uma seqncia de caracteres de conexo


Voc pode usar uma conexo sem DSN para criar uma conexo ODBC ou OLE DB entre o aplicativo da Web e o banco de dados. Voc usa uma seqncia de caracteres de conexo para criar esse tipo de conexo.
1 Abra uma pgina do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 2 Clique no boto de adio (+) no painel, selecione Personalizar seqncia de caracteres de conexo no menu,

complete as opes e clique em OK.


3 Digite um nome para a nova conexo sem espaos ou caracteres especiais. 4 Digite uma seqncia de caracteres de conexo para o banco de dados. Se voc no especificar um provedor OLE

DB na seqncia de conexo ou seja, se voc no incluir um parmetro Provider o ASP usar automaticamente o provedor OLE DB dos drivers ODBC. Nesse caso, voc deve especificar um driver ODBC apropriado ao banco de dados. Caso o site seja hospedado por um ISP e voc no saiba o caminho completo do banco de dados, use o mtodo MapPath do objeto de servidor do ASP na seqncia de conexo.
5 Caso o driver de banco de dados especificado na seqncia de caracteres de conexo no esteja instalado no mesmo

computador do Dreamweaver, selecione Usando driver no servidor de teste. Nota: Os usurios do Macintosh podem ignorar essa etapa porque todas as conexes de banco de dados usam o servidor de aplicativo.
6 Voc pode restringir o nmero de itens de banco de dados que o Dreamweaver recupera durante o design clicando

em Avanado e digitando um nome de esquema ou de catlogo. Nota: Voc no pode criar um esquema ou catlogo no Microsoft Access.
7 Clique em Testar para se conectar ao banco de dados e, depois, clique em OK. Caso haja uma falha na conexo,

clique duas vezes na seqncia de caracteres de conexo ou verifique as configuraes da pasta de teste que o Dreamweaver usa para processar pginas dinmicas.

Mais tpicos da Ajuda


Conexo com um banco de dados do ColdFusion na pgina 534 Restringir informaes de banco de dados exibidas no Dreamweaver na pgina 553 Soluo de problemas das conexes de banco de dados na pgina 545

Conexo com um banco de dados em um ISP


Caso seja um desenvolvedor do ASP trabalhando com um ISP (provedor de servios da Internet) comercial, voc normalmente no sabe o caminho fsico dos arquivos que carrega, inclusive do(s) arquivo(s) de banco de dados. Caso o ISP no defina um DSN para voc ou demore muito para fazer isso, voc deve achar outra forma de criar as conexes com os arquivos de banco de dados. Uma alternativa criar uma conexo sem DSN com um arquivo de banco de dados, embora voc s possa definir uma conexo dessa caso conhea o caminho fsico do arquivo de banco de dados no servidor ISP.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 541


Preparao para criao de sites dinmicos

Voc pode obter o caminho fsico de um arquivo de banco de dados usando o mtodo MapPath do objeto de servidor do ASP. Nota: As tcnicas abordadas nesta seo s se aplicam caso o banco de dados seja baseado em arquivo como, por exemplo, um banco de dados Microsoft Access no qual os dados so armazenados em um arquivo .mdb.

Introduo aos caminhos fsico e virtual


Aps o uso do Dreamweaver para carregar os arquivos em um servidor remoto, os arquivos residem em uma pasta na rvore de diretrio local do servidor. Por exemplo, em um servidor com o Microsoft IIS em execuo, o caminho para a home page pode ser o seguinte:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm

Esse caminho conhecido como caminho fsico do arquivo. No entanto, o URL para abrir o arquivo no usa o caminho fsico. Ela usa o nome do servidor ou do domnio seguido de um caminho virtual, como mostrado no seguinte exemplo:
www.plutoserve.com/jsmith/index.htm

O caminho virtual, /jsmith/index.htm, se equivale ao caminho fsico, c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm.

Localizar o caminho fsico de um arquivo com o caminho virtual


Caso trabalhe com um ISP, voc nem sempre sabe o caminho fsico dos arquivos que carrega. Os ISPs normalmente oferecem a voc um host FTP, possivelmente um diretrio host, alm de um nome de logon e senha. Os ISPs tambm especificam um URL para exibir as pginas na Internet como, por exemplo, www.plutoserve.com/jsmith/. Caso saiba o URL, voc pode obter o caminho virtual do arquivo trata-se do caminho aps o nome do servidor ou do domnio em um URL. Desde que saiba o caminho virtual, voc pode obter o caminho fsico do arquivo no servidor usando o mtodo MapPath. O mtodo MapPath usa o caminho virtual como argumento e retorna o caminho fsico e o nome do arquivo. Eis a sintaxe do mtodo:
Server.MapPath("/virtualpath")

Caso o caminho virtual de um arquivo seja /jsmith/index.htm, a seguinte expresso retorna o caminho fsico:
Server.MapPath("/jsmith/index.htm")

Voc pode testar o mtodo MapPath da seguinte forma.


1 Abra uma pgina do ASP no Dreamweaver e alterne para a visualizao de cdigo (Exibir > Cdigo). 2 Digite a seguinte expresso no cdigo HTML da pgina.
<%Response.Write(stringvariable)%>

3 Use o mtodo MapPath a fim de obter um valor para o argumento stringvariable.

Eis um exemplo:
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>

4 Para exibir a pgina, alterne para Visualizao dinmica (Exibir > Visualizao dinmica).

A pgina exibe o caminho fsico do arquivo no servidor de aplicativo, por exemplo:


c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm

Para obter mais informaes sobre o mtodo MapPath, consulte a documentao on-line que acompanha o Microsoft IIS.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 542


Preparao para criao de sites dinmicos

Usar um caminho virtual para se conectar a um banco de dados


Para escrever uma seqncia de caracteres de conexo sem DSN para um arquivo de banco de dados localizado em um servidor remoto, voc deve conhecer o caminho fsico do arquivo. O seguinte exemplo uma seqncia de caracteres de conexo sem DSN para um banco de dados do Microsoft Access:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb

Caso no saiba o caminho fsico dos arquivos no servidor remoto, voc pode obt-lo usando o mtodo MapPath na seqncia de caracteres de conexo.
1 Carregue o arquivo de banco de dados no servidor remoto e anote o caminho virtual por exemplo,

/jsmith/data/statistics.mdb.
2 Abra uma pgina do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 3 Clique no boto de adio (+) no painel e selecione Personalizar seqncia de caracteres de conexo no menu. 4 Digite um nome para a nova conexo sem espaos ou caracteres especiais. 5 Digite a seqncia de caracteres de conexo e use o mtodo MapPath para fornecer o parmetro DBQ.

Suponhamos que o caminho virtual para o banco de dados do Microsoft Access seja /jsmith/data/statistics.mdb; a seqncia de caracteres de conexo pode ser expressada da seguinte forma caso voc use VBScript como linguagem de script:
"Driver={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath ("/jsmith/data/statistics.mdb")

O e comercial (&) usado para concatenar (combinar) duas seqncias de caracteres. A primeira seqncia de caracteres colocada entre aspas e a segunda retornada pela expresso Server.MapPath. Quando as duas seqncias de caracteres so combinadas, a seguinte seqncia criada:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb

Caso voc use JavaScript, a expresso idntica, exceto se voc usar um sinal de adio (+) em lugar de um e comercial (&) para concatenar as duas seqncias de caracteres:
"Driver={Microsoft Access Driver (*.mdb)};DBQ=" + Server.MapPath ("/jsmith/data/statistics.mdb")

6 Selecione Usando driver no servidor de teste, clique em Testar e, depois, clique em OK.

Nota: Os usurios do Macintosh podem ignorar essa etapa porque todas as conexes de banco de dados usam o servidor de aplicativo. Nota: Caso haja falha na conexo, confirme a seqncia de caracteres de conexo ou entre em contato com o ISP para verificar se o driver de banco de dados que voc especificou na seqncia est instalado no servidor remoto. Tambm verifique se o ISP tem a verso mais recente do driver. Por exemplo, um banco de dados criado no Microsoft Access 2000 no funcionar com o Driver do Microsoft Access 3.5. Voc precisa do Driver do Microsoft Access 4.0 ou posterior.
7 Atualize a conexo de banco de dados das pginas dinmicas existentes (abra a pgina no Dreamweaver, clique duas

vezes no nome do conjunto de registros no painel Ligaes ou Comportamentos de servidor e selecione a conexo que voc acabou de criar no menu Conexo) e use a nova conexo com uma pgina nova que voc criou.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 543


Preparao para criao de sites dinmicos

Editar ou excluir uma conexo de banco de dados


Quando voc cria uma conexo de banco de dados, o Dreamweaver armazena as informaes da conexo em um arquivo de incluso na subpasta Conexes da pasta raiz local do site. Voc pode editar ou excluir as informaes de conexo no arquivo manualmente ou da seguinte forma.

Editar uma conexo


1 Abra uma pgina do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 2 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e selecione

Editar conexo no menu.


3 Edite as informaes de conexo e clique em OK.

O Dreamweaver atualiza o arquivo de incluso, que atualiza todas as pginas do site que usam a conexo.

Excluir uma conexo


1 Abra uma pgina do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 2 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e selecione

Excluir conexo no menu.


3 Na caixa de dilogo exibida, confirme se voc deseja excluir a conexo.

Nota: Para evitar o recebimento de erros aps a excluso de uma conexo, atualize todos os conjuntos de registros que usam a conexo antiga clicando duas vezes no nome do conjunto no painel Ligaes e escolhendo uma nova conexo.

Conexes de banco de dados para desenvolvedores do PHP


Sobre conexes de banco de dados do PHP
Tendo em vista o desenvolvimento do PHP, o Dreamweaver s d suporte ao sistema de banco de dados MySQL. No h suporte para outros sistemas de banco de dados como, por exemplo, Microsoft Access ou Oracle. O MySQL um software de cdigo-fonte aberto que voc pode baixar gratuitamente na Internet para uso no comercial. Para obter mais informaes, consulte o site do MySQL em http://dev.mysql.com/downloads/. Esta seo pressupe que voc tenha configurado um aplicativo do PHP. Ele tambm considera que h um banco de dados MySQL configurado no computador local ou em um sistema ao qual voc tem acesso por rede ou FTP. Para fins de desenvolvimento, baixe e instale a verso Windows Essentials do servidor de banco de dados MySQL.

Mais tpicos da Ajuda


Configurao de um ambiente de desenvolvimento PHP na pgina 532

Conectar-se a um banco de dados


Para se conectar a um banco de dados durante o desenvolvimento de um aplicativo do PHP no Dreamweaver, voc deve ter um ou mais bancos de dados MySQL e o servidor MySQL deve ser inicializado.
1 Abra uma pgina do PHP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 544


Preparao para criao de sites dinmicos

2 Clique no boto de adio (+) no painel, selecione Conexo MySQL no menu e complete a caixa de dilogo.

Digite um nome para a nova conexo sem espaos ou caracteres especiais. Na caixa Servidor MySQL, digite um endereo IP ou o nome de um servidor para o computador de hospedagem
do MySQL. Caso o MySQL esteja em execuo no mesmo computador do PHP, voc pode digitar localhost.

Digite o nome do usurio e a senha do MySQL. Na caixa Banco de dados, digite o nome do banco de dados ou clique em Selecionar e selecione o banco de dados
na lista de bancos de dados MySQL e clique em Testar. O Dreamweaver tenta se conectar ao banco de dados. Caso haja falha na conexo, confirme o nome de servidor, o nome de usurio e a senha. Caso a falha na conexo persista, verifique as configuraes da pasta de teste que o Dreamweaver usa para processar as pginas dinmicas. O Dreamweaver escolhe a melhor alternativa para preencher automaticamente o valor do prefixo do URL na categoria Servidor de teste da caixa de dilogo Definio de site, mas algumas vezes ser necessrio que voc ajuste o prefixo do URL para que sua conexo funcione. Certifique-se de que o prefixo do URL seja o URL que os usurios digitam em seus navegadores para abrir o aplicativo da Web, menos o nome do arquivo (ou pgina de incio) do aplicativo.
3 Clique em OK.

Nota: Caso voc receba a mensagem de erro Client does not support authentication protocol requested. Consider upgrading MySQL client ao testar a conexo de banco de dados PHP com o MySQL 4.1, consulte Soluo de problemas de mensagens de erro MySQL na pgina 550.

Editar ou excluir uma conexo de banco de dados


Quando voc cria uma conexo de banco de dados, o Dreamweaver armazena as informaes da conexo em um arquivo de incluso na subpasta Conexes da pasta raiz local do site. Voc pode editar ou excluir as informaes de conexo no arquivo manualmente ou da seguinte forma.

Editar uma conexo


1 Abra uma pgina do PHP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 2 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e selecione

Editar conexo no menu.


3 Edite as informaes de conexo e clique em OK.

O Dreamweaver atualiza o arquivo de incluso, que atualiza todas as pginas do site que usam a conexo.

Excluir uma conexo


1 Abra uma pgina do PHP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 2 Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e selecione

Excluir conexo no menu.


3 Na caixa de dilogo exibida, confirme se voc deseja excluir a conexo.

Nota: Para evitar o recebimento de erros aps a excluso de uma conexo, atualize todos os conjuntos de registros que usam a conexo antiga clicando duas vezes no nome do conjunto no painel Ligaes e selecionando uma nova conexo na caixa de dilogo Conjunto de registros.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 545


Preparao para criao de sites dinmicos

Soluo de problemas das conexes de banco de dados


Soluo de problemas de permisso
Uma dos problemas mais comuns a insuficincia de permisses de arquivo ou de pasta. Caso o banco de dados esteja localizado em um computador com o Windows 2000 ou o Windows XP e voc receba uma mensagem de erro ao tentar exibir uma pgina dinmica em um navegador da Web ou na Visualizao dinmica, o erro talvez seja por conta de um problema de permisso. A conta do Windows que tenta acessar o banco de dados no tem permisses suficientes. A conta pode ser a conta do Windows annima (por padro, IUSR_computername) ou uma conta de usurio especfica, caso a pgina tenha sido protegida para acesso autenticado. Voc deve alterar as permisses para dar conta IUSR_computername as permisses corretas de forma que o servidor Web possa acessar o arquivo de banco de dados. Alm disso, a pasta que contm o arquivo de banco de dados tambm deve ter determinadas permisses definidas para que seja possvel gravar nesse banco de dados. Caso a pgina deva ser acessada anonimamente, d conta IUSR_computername controle total pasta e ao arquivo de banco de dados, como descrito no procedimento abaixo. Alm disso, caso o caminho do banco de dados seja referenciado usando UNC (\\Servidor\Compartilhamento), verifique se Permisses de compartilhamento do conta IUSR_computername acesso total. Essa etapa se aplica mesmo que o compartilhamento esteja no servidor Web local. Caso voc copie o banco de dados de outro local, talvez ele no herde as permisses da pasta de destino e voc tenha que alterar as permisses para o banco de dados.

Verificar ou alterar as permisses de arquivo do banco de dados (Windows XP)


1 Verifique se voc tem privilgios de administrador no computador. 2 No Windows Explorer, localize o arquivo do banco de dados ou a pasta que contm o banco de dados, clique com

o boto direito do mouse no arquivo ou na pasta e selecione Propriedades.


3 Selecione a aba Segurana.

Nota: Esta etapa s se aplica caso voc tenha um sistema de arquivos NTFS. Se voc tiver um sistema de arquivos FAT, a caixa de dilogo no ter uma aba Segurana.
4 Caso a conta IUSR_computername no esteja listada na lista Nomes de grupo ou de usurio, clique no boto

Adicionar para adicion-la.


5 Na caixa de dilogo Selecionar Usurios e Grupos, clique em Avanado.

A caixa de dilogo alterada para mostrar mais opes.


6 Clique em Locais e selecione o nome do computador. 7 Clique em Localizar agora para exibir uma lista dos nomes de conta associados ao computador. 8 Selecione a conta IUSR_computername e clique em OK; depois, clique em OK novamente para limpar a caixa de

dilogo.
9 Para atribuir permisses totais conta IUSR, selecione Controle total e clique em OK.

Verificar ou alterar as permisses de arquivo do banco de dados (Windows 2000)


1 Verifique se voc tem privilgios de administrador no computador.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 546


Preparao para criao de sites dinmicos

2 No Windows Explorer, localize o arquivo do banco de dados ou a pasta que contm o banco de dados, clique com

o boto direito do mouse no arquivo ou na pasta e selecione Propriedades.


3 Selecione a aba Segurana.

Nota: Esta etapa s se aplica caso voc tenha um sistema de arquivos NTFS. Se voc tiver um sistema de arquivos FAT, a caixa de dilogo no ter uma aba Segurana.
4 Caso a conta IUSR_computername no esteja listada dentre as contas do Windows na caixa de dilogo Permisses

de arquivo, clique no boto Adicionar para adicion-la.


5 Na caixa de dilogo Selecionar usurios, computadores ou grupos, selecione o nome do computador no menu

Pesquisar para exibir uma lista dos nomes da conta associados ao computador.
6 Selecione a conta IUSR_computername e clique em Adicionar. 7 Para atribuir permisses totais conta IUSR, selecione Controle total no menu Tipo de acesso e clique em OK.

Para obter mais segurana, as permisses podem ser definidas de forma que a permisso de Leitura permanea desativada para a pasta da Web que contm o banco de dados. A navegao na pasta no ser permitida, embora as pginas da Web continuem podendo acessar o banco de dados. Para obter mais informaes sobre a conta IUSR e as permisses do servidor Web, consulte as seguintes TechNotes no Centro de Suporte da Adobe:

Understanding anonymous authentication and the IUSR account at www.adobe.com/go/authentication_br Setting IIS web server permissions at www.adobe.com/go/server_permissions_br

Soluo de problemas de mensagens de erro Microsoft


Essas mensagens de erro Microsoft podem ocorrer quando voc solicita uma pgina dinmica do servidor caso use o Internet Information Server (IIS) com um sistema de banco de dados Microsoft como, por exemplo, o Access ou o SQL Server. Nota: A Adobe no d suporte tcnico a softwares de outros fabricantes como, por exemplo, o Microsoft Windows e o IIS. Caso essas informaes no corrijam o problema, entre em contato com o suporte tcnico da Microsoft ou visite o site de suporte Microsoft em http://support.microsoft.com/. Para obter mais informaes sobre erros 80004005, consulte INFO: Troubleshooting Guide for 80004005 Errors in Active Server Pages and Microsoft Data Access Components (Q306518), no site da Microsoft em http://support.microsoft.com/default.aspx?scid=kb;pt_br;Q306518.

[Reference]80004005Nome da fonte de dados no encontrado e nenhum driver padro especificado


Esse erro ocorre quando voc tenta exibir uma pgina dinmica em um navegador da Web ou na Visualizao dinmica. A mensagem de erro pode variar de acordo com o banco de dados e o servidor Web. Entre outras variaes da mensagem de erro esto:

80004005Falha em SQLSetConnectAttr do driver 80004005Erro geral ao no poder abrir a chave do Registro 'DriverId'
Eis as causas possveis e as solues:

A pgina no consegue localizar o DSN. Verifique se um DSN foi criado tanto no servidor Web quanto na mquina
local.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 547


Preparao para criao de sites dinmicos

O DSN pode ter sido definido como um DSN de usurio, e no de sistema. Exclua o DSN de usurio e crie um DSN
de sistema para substitu-lo. Nota: Caso voc no exclua o DSN de usurio, os nomes de DSN duplicados produzem um novo erro ODBC. Caso voc use o Microsoft Access, o arquivo de banco de dados (.mdb) pode estar bloqueado. O bloqueio talvez se deva a um DSN com um nome diferente acessando o banco de dados. No Windows Explorer, procure o arquivo de bloqueio (.ldb) na pasta que contm o arquivo de banco de dados (.mdb) e exclua o arquivo .ldb. Caso haja outro DSN apontando para o mesmo arquivo de banco de dados, exclua o DSN a fim de evitar o erro no futuro. Reinicie o computador depois de fazer todas as alteraes.

[Reference]80004005No foi possvel usar (desconhecido); arquivo j em uso


Esse erro ocorre quando voc usa um banco de dados do Microsoft Access e tenta exibir uma pgina dinmica em um navegador da Web ou na Visualizao dinmica. Outra variao da mensagem de erro 80004005O mecanismo de banco de dados Microsoft Jet no pde abrir o arquivo (desconhecido). A causa provvel um problema de permisso. Eis algumas causas especficas e as solues:

A conta usada pelo Internet Information Server (normalmente, IUSR) talvez no tenha as permisses do Windows
corretas para um banco de dados baseado em arquivo ou para a pasta que contm o arquivo. Verifique as permisses na conta do IIS (IUSR) no gerenciador de usurios.

Voc talvez no tenha permisso para criar ou destruir arquivos temporrios. Verifique as permisses quanto ao
arquivo e pasta. Verifique se voc tem permisso para criar ou destruir algum arquivo temporrio. Os arquivos temporrios so normalmente criados na mesma pasta do banco de dados, embora o arquivo tambm possa ser criado em outras pastas como, por exemplo, /Winnt.

No Windows 2000, talvez seja necessrio alterar o valor de tempo-limite para o DSN do banco de dados do Access.
Para alterar o valor de tempo-limite, selecione Iniciar > Configuraes > Painel de Controle > Ferramentas Administrativas > Fontes de Dados (ODBC). Clique na aba Sistema, realce o DSN correto e clique no boto Configurar. Clique no boto Opes e altere o valor Tempo limite da pgina para 5000. Caso os problemas persistam, consulte os seguintes artigos da Base de Dados de Conhecimento da Microsoft:

PRB: 80004005 Couldn't Use (unknown); File Already in Use at


http://support.microsoft.com/default.aspx?scid=kb;pt_br;Q174943.

PRB: Microsoft Access Database Connectivity Fails in Active Server Pages at


http://support.microsoft.com/default.aspx?scid=kb;pt_br;Q253604.

PRB: Error Cannot Open File Unknown Using Access at


http://support.microsoft.com/default.aspx?scid=kb;pt_br;Q166029.

[Reference]80004005Falha no logon()
Esse erro ocorre quando voc usa o Microsoft SQL Server e tenta exibir uma pgina dinmica em um navegador da Web ou na Visualizao dinmica. Esse erro gerado pelo SQL Server caso voc no aceite ou reconhea a conta do logon ou a senha enviada (caso voc esteja usando a segurana padro), ou caso uma conta do Windows no esteja mapeada para uma conta SQL (caso voc esteja usando a segurana integrada). Eis as solues possveis:

Caso voc use a segurana padro, o nome da conta e a senha talvez estejam incorretos. Tente usar a conta Admin
do sistema e a senha (UID= sa e sem senha), que devem ser definidas na linha da seqncia de caracteres de conexo. (Os DSNs no armazenam nomes de usurio e senhas.)

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 548


Preparao para criao de sites dinmicos

Caso voc use segurana integrada, verifique a conta do Windows chamando a pgina e localize a conta SQL
mapeada (caso haja alguma).

O SQL Server no permite sublinhados em nomes de conta SQL. Se algum mapear manualmente a conta do
Windows IUSR_machinename para uma conta SQL com o mesmo nome, haver uma falha. Mapeie uma conta que usa um sublinhado para um nome de conta no SQL que no usa um sublinhado.

[Reference]80004005Operao deve usar uma consulta atualizvel


Esse erro ocorre quando um evento atualiza um conjunto de registros ou insere dados em um conjunto. Eis as causas possveis e as solues:

As permisses definidas na pasta que contm o banco de dados so muito restritivas. Os privilgios IUSR devem
ser definidos como leitura/gravao.

As permisses no arquivo de banco de dados propriamente dito no tm privilgios de leitura/gravao em vigor. O banco de dados deve estar localizado fora do diretrio Inetpub/wwwroot. Embora possa exibir e pesquisar os
dados, voc talvez no consiga atualiz-los a menos que o banco de dados esteja localizado no diretrio wwwroot.

O conjunto de registros se baseia em uma consulta no atualizvel. Ingressos so bons exemplos de consultas no
atualizveis dentro de um banco de dados. Reestruture as consultas para que elas sejam atualizveis. Para obter mais informaes sobre o erro, consulte PRB: ASP Error The Query Is Not Updateable When You Update Table Record, na Base de Dados de Conhecimento da Microsoft em http://support.microsoft.com/default.aspx?scid=kb;pt_br;Q174640.

[Reference]80040e07Tipo de dados no correspondente na expresso de critrios


Esse erro ocorre quando o servidor tenta processar uma pgina que contm um comportamento de servidor Inserir registro ou Atualizar registro, e o comportamento de servidor tenta definir o valor de uma coluna Data/hora de um banco de dados do Microsoft Access como uma seqncia de caracteres vazia (""). O Microsoft Access tem tipo de dados acentuado; ele impe um conjunto de regras rigorosas em determinados valores de coluna. O valor de seqncia de caracteres vazia na consulta SQL no pode ser armazenada em uma coluna Data/hora do Access. Atualmente, a nica alternativa conhecida evitar a insero ou a excluso de colunas Data/hora no Access com seqncias de caracteres vazias ("") ou com qualquer outro valor que no corresponda faixa de valores especificada para o tipo de dados.

[Reference]80040e10Poucos parmetros
Esse erro ocorre quando uma coluna especificada na consulta SQL no existe na tabela do banco de dados. Compare os nomes da coluna na tabela do banco de dados com a consulta SQL. A causa desse erro costuma ser um erro tipogrfico.

[Reference]80040e10Campo COUNT incorreto


Esse erro ocorre quando voc visualiza uma pgina que contm um comportamento de servidor Inserir registro em um navegador da Web e tenta us-lo para inserir um registro em um banco de dados do Microsoft Access. Voc talvez esteja tentando inserir um registro em um campo de banco de dados que apresenta um ponto de interrogao (?) no nome. O ponto de interrogao um caractere especial para alguns mecanismos de banco de dados, inclusive o Microsoft Access, e no deve ser usado em nomes de tabela de banco de dados ou em nomes de campo. Abra o sistema de banco de dados e exclua o ponto de interrogao (?) dos nomes de campo e atualize os comportamentos de servidor na pgina que se referem ao campo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 549


Preparao para criao de sites dinmicos

[Reference]80040e14Erro de sintaxe na instruo INSERT INTO


Esse erro ocorre quando o servidor tenta processar uma pgina que contenha um comportamento de servidor Inserir registro. Esse erro normalmente resulta de um ou mais dos seguintes problemas com o nome de um campo, objeto ou varivel no banco de dados:

O uso de uma palavra reservada como nome. A maioria dos bancos de dados tem um conjunto de palavras
reservadas. Por exemplo, data uma palavra reservada e no pode ser usada em nomes de coluna em um banco de dados.

O uso de caracteres especiais no nome. Entre os exemplos de caracteres especiais esto:


./*:!#&-?

O uso de um espao no nome.


O erro tambm pode ocorrer quando uma mscara de entrada definida para um objeto no banco de dados, e os dados inseridos no correspondem mascara. Para corrigir o problema, evite o uso de palavras reservadas como, por exemplo, data, nome, seleo, onde e nvel ao especificar nomes de coluna no banco de dados. Alm disso, elimine os espaos e os caracteres especiais. Consulte as seguintes pginas da Web para obter listas de palavras reservadas para sistemas de banco de dados comuns:

Microsoft Access em http://support.microsoft.com/default.aspx?scid=kb;pt_br;Q209187 Microsoft SQL Server em http://msdn.microsoft.com/library/default.asp?url=/library/pt_br/tsqlref/ts_rarz_9oj7.asp

MySQL em http://dev.mysql.com/doc/mysql/en/reserved-words.html

[Reference]80040e21Erro de ODBC ao inserir ou atualizar


Esse erro ocorre quando o servidor tenta processar uma pgina que contenha um comportamento de servidor Atualizar registro ou Inserir registro. O banco de dados no pode lidar com a operao de atualizao ou de insero que o comportamento de servidor est tentando realizar. Eis as causas possveis e as solues:

O comportamento de servidor est tentando atualizar um campo de numerao automtica da tabela do banco de
dados ou inserir um registro em um campo de numerao automtica. Como os campos de numerao automtica so preenchidos automaticamente pelo sistema de banco de dados, qualquer tentativa de preench-los externamente usando um valor resultar em falha.

Os dados que o comportamento de servidor est atualizando ou inserindo so do tipo errado para o campo de
banco de dados como, por exemplo, inserir um campo booleano (sim/no), inserir uma seqncia de caracteres em um campo numrico ou inserir uma seqncia de caracteres formatada incorretamente no campo Data/hora.

[Reference]800a0bcdBOF ou EOF verdadeiro


Esse erro ocorre quando voc tenta exibir uma pgina dinmica em um navegador da Web ou na Visualizao dinmica. O problema ocorre quando a pgina tenta exibir dados de um conjunto de registros vazio. Para resolver o problema, aplique o comportamento de servidor Mostrar regio para que o contedo dinmico seja exibido na pgina da seguinte forma:
1 Realce o contedo dinmico na pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 550


Preparao para criao de sites dinmicos

2 No painel Comportamentos de servidor, clique no boto de adio (+) e selecione Mostrar regio > Mostrar regio

se conjunto de registros no estiver vazio.


3 Selecione o conjunto de registros fornecendo o contedo dinmico e clique em OK. 4 Repita as etapas de 1 a 3 para cada elemento de contedo dinmico na pgina.

Soluo de problemas de mensagens de erro MySQL


Uma mensagem de erro que voc recebe normalmente ao testar uma conexo de banco de dados do PHP com o MySQL 4.1 Client does not support authentication protocol requested. Consider upgrading MySQL client. Voc talvez tenha que reverter para uma verso anterior do MySQL ou instalar o PHP 5 e copiar algumas DLLs (bibliotecas de links dinmicos). Para obter instrues detalhadas, consulte Configurao de um ambiente de desenvolvimento PHP na pgina 532. Tambm consulte as seguintes TechNotes:

TechNote c45f8a29 em www.adobe.com/go/c45f8a29_br. TechNote 16515 em www.adobe.com/go/16515_br.

Remoo de scripts de conexo


Uso do comando Remover scripts de conexo
Voc pode usar o comando Remover scripts de conexo para remover scripts que o Dreamweaver coloca em uma pasta remota para acessar bancos de dados. Esses scripts s so necessrios na criao durante o design no Dreamweaver. Quando voc seleciona a opo Usando driver no servidor de teste ou Usando o DSN no servidor de teste na caixa de dilogo Conexes do banco de dados, o Dreamweaver carrega um arquivo de script MMHTTPDB no servidor de teste. Isso permite que o Dreamweaver manipule o driver de banco de dados remoto com o protocolo HTTP, o que, por sua vez, permite ao Dreamweaver obter as informaes de banco de dados de que ele precisa para ajudar a criar o site. No entanto, esse arquivo permite ver os DSNs definidos no sistema. Caso os DSNs e os bancos de dados no sejam protegidos por senha, o script tambm permite quem um invasor emita comandos SQL para o banco de dados. Os arquivos de script MMHTTPDB esto localizados na pasta _mmServerScripts, que est localizada na raiz do site. Nota: O navegador de arquivos do Dreamweaver (o painel Arquivos) oculta a pasta _mmServerScripts. Voc pode ver a pasta _mmServerScripts caso use um cliente FTP de outro fabricante ou navegador de arquivos. Em algumas configuraes, esses scripts no so to necessrios. Como no esto envolvidos quando voc apresenta pginas da Web aos visitantes do site, os scripts no devem ser colocados em um servidor de produo. Caso tenha carregado o arquivo de scripts MMHTTPDB em um servidor de produo, voc deve exclu-lo. O comando Remover scripts de conexo remove automaticamente os arquivos de script para voc. Para obter mais informaes, consulte TechNote 19214 no site da Adobe em www.adobe.com/go/19214_br.

ltima atualizao em 28/4/2010

551

Captulo 19: Como tornar pginas dinmicas


Voc pode criar pginas dinmicas que exibam informaes de fontes de contedo dinmico como, por exemplo, bancos de dados e variveis de sesso. O Adobe Dreamweaver CS5 d suporte ao desenvolvimento de pgina dinmica para modelos de servidor ColdFusion, ASP e PHP. Voc tambm pode usar uma estrutura baseada em Ajax chamada Spry para criar pginas dinmicas que exibam e processem dados em XML. O uso de elementos de formulrio do Spry criados previamente permite criar pginas dinmicas que no exigem uma atualizao de pgina inteira.

Otimizao da rea de trabalho para desenvolvimento visual


Exibio de painis de desenvolvimento de aplicativo da Web
Selecione a categoria Dados no menu pop-up Categoria do painel Inserir para exibir um conjunto de botes que permitem adicionar contedo dinmico e comportamentos de servidor sua pgina. O nmero e o tipo de botes exibidos variam de acordo com o tipo de documento aberto na janela Documento. Mova o mouse sobre um cone para exibir uma dica de ferramenta que descreve o que o boto faz. O painel Inserir inclui botes para adicionar os seguintes itens pgina:

Conjuntos de registros Texto dinmico ou tabelas Barras para navegao em registros


Caso voc alterne para a Visualizao de cdigo (Exibir > Cdigo), painis adicionais podero ser exibidos na prpria categoria painel Inserir, o que permite inserir cdigo na pgina. Por exemplo, caso voc veja uma pgina do ColdFusion na Visualizao de cdigo, um painel CFML disponibilizado na categoria CFML do painel Inserir. Vrios painis oferecem forma de criar pginas dinmicas:

Selecione o painel Ligaes (Janela > Ligaes) a fim de definir fontes de contedo dinmico para a pgina e
adicionar o contedo pgina.

Selecione o painel Comportamentos de servidor (Janela > Comportamentos de servidor) para adicionar lgica
do servidor a pginas dinmicas.

Selecione o painel Bancos de dados (Janela >Bancos de dados) para explorar bancos de dados ou criar conexes
de banco de dados.

Selecione o painel Componentes (Janela > Componentes) para inspecionar, adicionar ou modificar os cdigos
dos componentes do ColdFusion. Nota: O painel Componentes s ativado quando se abre uma pgina do ColdFusion. Um comportamento de servidor o conjunto de instrues inserido em uma pgina dinmica durante o design e executado no servidor durante o runtime.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 552


Como tornar pginas dinmicas

Para obter um tutorial sobre a configurao da rea de trabalho de desenvolvimento, consulte www.adobe.com/go/vid0144_br.

Mais tpicos da Ajuda


Painel Ligaes na pgina 561 Painel Comportamentos de servidor na pgina 562 Painel Bancos de dados na pgina 562 Painel Componentes na pgina 563 Tutorial da rea de trabalho de desenvolvimento

Exibir o banco de dados dentro do Dreamweaver


Depois de se conectar ao banco de dados, voc pode exibir a estrutura e os dados dentro do Dreamweaver.
1 Abra o painel Bancos de dados (Janela > Bancos de dados).

O painel Bancos de dados exibe todos os bancos de dados para os quais voc criou conexes. Caso voc esteja desenvolvendo um site do ColdFusion, o painel exibe todos os bancos de dados que tm fontes de dados definidas no Administrador do ColdFusion. Nota: O Dreamweaver procura o site atual no servidor do ColdFusion que voc definiu. Caso nenhum banco de dados seja exibido no painel, voc deve criar uma conexo de banco de dados.
2 Para exibir as tabelas, os procedimentos armazenados e as visualizaes no banco de dados, clique no sinal de

adio (+) ao lado de uma conexo na lista.


3 Para exibir as colunas da tabela, clique no nome de uma tabela.

Os cones da coluna refletem o tipo de dados e indicam a chave primria da tabela.


4 Para exibir os dados de uma tabela, clique com o boto direito do mouse (Windows) ou clique mantendo a tecla

Control pressionada (Macintosh) no nome da tabela na lista e selecione Exibir dados no menu pop-up.

Mais tpicos da Ajuda


Configurao de um ambiente de desenvolvimento ColdFusion na pgina 531 Configurao de um ambiente de desenvolvimento PHP na pgina 532 Configurao de um ambiente de desenvolvimento ASP na pgina 532

Visualizao de pginas dinmicas em um navegador


Os desenvolvedores de aplicativo da Web costumam depurar as pginas clicando nelas normalmente em um navegador da Web. Voc pode exibir rapidamente pginas dinmicas em um navegador sem carreg-las inicialmente em um servidor (pressione F12). Para visualizar pginas dinmicas, preencha a categoria Servidor de teste da caixa de dilogo Definio de sites. Voc pode especificar que o Dreamweaver usa arquivos temporrios, e no os arquivos originais. Com essa opo, o Dreamweaver executa uma cpia temporria da pgina em um servidor Web antes de exibi-la no navegador. (Em seguida, o Dreamweaver exclui o arquivo temporrio do servidor.) Para definir essa opo, selecione Editar > Preferncias > Visualizar no navegador.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 553


Como tornar pginas dinmicas

A opo Visualizar no navegador no carrega pginas relacionadas como, por exemplo, uma pgina de resultados ou detalhada, arquivos dependentes como arquivos de imagem ou incluses do servidor. Para carregar um arquivo no encontrado, selecione Janela > Site para abrir o painel Site, escolha o arquivo em Pasta local e clique na seta para cima azul na barra de ferramentas a fim de copiar o arquivo para a pasta do servidor Web.

Mais tpicos da Ajuda


Configurar um servidor de teste na pgina 46

Restringir informaes de banco de dados exibidas no Dreamweaver


Usurios avanados de sistemas de bancos de dados grandes como o Oracle devem restringir o nmero de itens de banco de dados recuperados e exibidos pelo Dreamweaver durante o design. Um banco de dados Oracle pode conter itens que o Dreamweaver no pode processar durante o design. Voc pode criar um esquema no Oracle e us-lo no Dreamweaver para filtrar itens desnecessrios durante o design. Nota: Voc no pode criar um esquema ou catlogo no Microsoft Access. Outros usurios podem aproveitar a restrio da quantidade de informaes que o Dreamweaver recupera durante o design. Alguns bancos de dados contm dezenas ou mesmo centenas de tabelas, e talvez voc prefira no listar todas elas enquanto trabalha. Um esquema ou catlogo pode restringir o nmero de itens de banco de dados recuperados durante o design. Voc deve criar um esquema ou catlogo no sistema de banco de dados para poder aplic-lo no Dreamweaver. Consulte a documentao do sistema de banco de dados ou o administrador do sistema. Nota: Voc no pode aplicar um esquema ou catlogo no Dreamweaver caso esteja desenvolvendo um aplicativo do ColdFusion ou usando o Microsoft Access.
1 Abra uma pgina dinmica no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de

dados).

Caso haja uma conexo de banco de dados, clique com o boto direito do mouse (Windows) ou clique mantendo
a tecla Control pressionada (Macintosh) na lista e selecione Editar conexo no menu pop-up.

Caso a conexo no exista, clique no boto de adio (+) na parte superior do painel e a crie.
2 Na caixa de dilogo da conexo, clique em Avanado. 3 Especifique o esquema ou o catlogo e clique em OK.

Definir o Inspetor de propriedades para procedimentos armazenados do ColdFusion e comandos do ASP


Modifique o procedimento armazenado selecionado. As opes disponveis variam de acordo com a tecnologia do servidor.
Edite todas as opes. Quando voc seleciona uma nova opo no inspetor, o Dreamweaver atualiza a pgina.

Mais tpicos da Ajuda


Editar contedo dinmico na pgina 581

Opes de Entrada
O Inspetor de propriedades exibido quando o Dreamweaver encontra um tipo de entrada no reconhecido. Esse erro normalmente ocorre por conta de uma digitao ou de outro erro na entrada dos dados.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 554


Como tornar pginas dinmicas

Caso voc altere o tipo de campo no Inspetor de propriedades para um valor que o Dreamweaver reconhece por exemplo, caso voc corrija o erro ortogrfico , o Inspetor de propriedades atualizado para mostrar as propriedades do tipo reconhecido. Defina qualquer uma das seguintes opes no Inspetor de propriedades:
Entrada Atribui um nome ao campo. Essa caixa obrigatria, e o nome deve ser exclusivo. Tipo Define o tipo de entrada do campo. O contedo da caixa reflete o valor do tipo de entrada exibido atualmente no cdigo-fonte HTML. Valor Define o valor do campo. Parmetros Abre a caixa de dilogo Parmetros para que voc possa exibir os atributos atuais do campo, bem como

adicionar ou remover atributos.

Criao de pginas dinmicas


Dreamweaver e design de pgina dinmica
Siga estas etapas gerais para projetar e criar com xito um site dinmico.
1 Criar a pgina.

Uma das etapas principais da criao de qualquer site seja esttico ou dinmico o design visual da pgina. Durante a adio de elementos dinmicos a uma pgina da Web, o design da pgina se torna essencial usabilidade. Voc deve pensar bem em como os usurios iro interagir com as pginas individuais e os sites como um todo. Um mtodo comum de incorporao de contedo dinmico a uma pgina da Web criar uma tabela para apresentar contedo e importar contedo dinmico para uma ou mais clulas da tabela. Usando esse mtodo, voc pode apresentar informaes de vrios tipos em um formato estruturado.
2 Crie uma fonte de contedo dinmico.

Os sites dinmicos precisam de uma fonte de contedo da qual extraem dados para que possam exibi-los em uma pgina da Web. Para poder usar fontes de contedo em uma pgina da Web, voc deve fazer o seguinte:

Crie uma conexo com a fonte de contedo dinmico (como, por exemplo, um banco de dados) e o servidor de
aplicativo que processa a pgina. Crie a fonte de dados usando o painel Ligaes; em seguida, voc pode selecionar e inserir a fonte de dados na pgina.

Especifique quais informaes no banco de dados voc deseja exibir ou quais variveis deve incluir na pgina
criando um conjunto de registros. Voc tambm pode testar a consulta na caixa de dilogo Conjunto de registros e fazer todos os ajustes necessrios antes de adicion-los ao painel Ligaes.

Selecione e insira elementos de contedo dinmico na pgina selecionada.


3 Adicione contedo dinmico pgina da Web.

Depois de definir um conjunto de registros ou outra fonte de dados e adicion-lo ao painel Ligaes, voc pode inserir o contedo dinmico que o conjunto de registros representa na pgina. A interface controlada por menu do Dreamweaver simplifica a adio de elementos de contedo dinmico tanto quanto a seleo de uma fonte de contedo dinmico no painel Ligaes, alm de sua insero em texto, imagem ou objeto de formulrio dentro da pgina atual.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 555


Como tornar pginas dinmicas

Quando voc insere um elemento de contedo dinmico ou outro comportamento em uma pgina, o Dreamweaver insere um script do servidor no cdigo-fonte da pgina. Esse script instrui o servidor a recuperar dados da fonte definida e process-los dentro da pgina da Web. Para colocar contedo dinmico em uma pgina da Web, voc pode seguir um dos seguintes procedimentos:

Coloque-o no ponto de insero na Visualizao de cdigo ou de design. Substitua uma seqncia de caracteres de texto ou outro alocador de espao.
Insira-o em um atributo HTML. Por exemplo, o contedo dinmico pode definir o atributo src de uma imagem ou o atributo value de um campo de formulrio.
4 Adicione comportamentos de servidor a uma pgina.

Alm de adicionar contedo dinmico, voc pode incorporar uma lgica de aplicativo complexa a pginas da Web usando comportamentos de servidor. Comportamentos de servidor so partes predefinidas de cdigo do servidor que adicionam lgica de aplicativo a pginas da Web, proporcionando maior interao e funcionalidade. Os comportamentos de servidor do Dreamweaver permitem adicionar lgica de aplicativo a um site sem a necessidade de que voc escreva o cdigo. Os comportamentos de servidor fornecidos com o Dreamweaver do suporte a tipos de documento do ColdFusion, ASP, e PHP. Os comportamentos de servidor so escritos e testados para que sejam rpidos, seguros e eficientes. Os comportamentos de servidor incorporados do suporte a pginas da Web em vrias plataformas para todos os navegadores. O Dreamweaver fornece uma interface apontar e clicar que torna a aplicao de contedo dinmico e de comportamentos complexos a uma pgina to fcil quanto a insero de elementos de texto e design. Os seguintes comportamentos de servidor esto disponveis:

Defina um conjunto de registros de um banco de dados existente. Em seguida, o conjunto de registros que voc
define armazenado no painel Ligaes.

Exiba vrios registros em uma nica pgina. Voc seleciona uma tabela inteira ou clulas individuais ou linhas
com contedo dinmico e especifica o nmero de registros a serem exibidos em cada visualizao de pgina.

Crie e insira uma tabela dinmica em uma pgina e associe a tabela a um conjunto de registros. Voc pode
modificar posteriormente a aparncia da tabela e a regio repetitiva usando o Inspetor de propriedades e o comportamento de servidor Regio repetitiva, respectivamente.

Insira um objeto de texto dinmico em uma pgina. O objeto de texto que voc insere um item de um conjunto
de registros predefinido ao qual possvel aplicar qualquer um dos formatos de dados.

Crie controles de navegao em registros e de status, pginas mestre/detalhadas e formulrios para a atualizao
das informaes em um banco de dados.

Exiba mais de um registro de um banco de dados. Crie links para navegao no conjunto de registros que permitam aos usurios exibir os registros anterior ou
seguinte de um banco de dados.

Adicione um contador de registros para ajudar os usurios a controlar quantos registros retornaram e onde eles
se encontram no resultado retornado. Voc tambm pode estender os comportamentos de servidor do Dreamweaver escrevendo comportamentos de servidor prprios ou instalando de outros fabricantes.
5 Teste e depure a pgina.

Antes de criar uma pgina dinmica ou um site inteiro disponvel na Web, voc deve testar sua funcionalidade. Voc tambm deve considerar como a funcionalidade do aplicativo pode afetar pessoas com deficincias. Para obter um tutorial sobre a criao de pginas dinmicas, consulte www.adobe.com/go/learn_dw_webapp_br.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 556


Como tornar pginas dinmicas

Mais tpicos da Ajuda


Apresentao do contedo em tabelas na pgina 175 Adio e formatao do texto na pgina 217 Adio e modificao de imagens na pgina 233 Insero de arquivos SWF na pgina 246

Viso geral das fontes de contedo dinmico


Sobre as fontes de contedo dinmico
Uma fonte de contedo dinmico um armazenamento das informaes das quais voc pode recuperar e exibir contedo dinmico a ser usado em uma pgina da Web. Entre as fontes de contedo dinmico esto no apenas as informaes armazenadas em um banco de dados, mas os valores enviados por formulrios em HTML, valores contidos em objetos de servidor e outras fontes de contedo. O Dreamweaver permite que voc se conecte a um banco de dados e crie um conjunto de registros do qual extrair contedo dinmico. Um conjunto de registros o resultado de uma consulta de banco de dados. Ele extrai as informaes especficas que voc solicita e permite exibir essas informaes dentro de uma pgina especificada. Voc define o conjunto de registros com base nas informaes contidas no banco de dados e no contedo que deseja exibir. Fornecedores de tecnologia diferentes podem usar terminologias distintas quanto a um conjunto de registros. No ASP e no ColdFusion, um conjunto de registros definido como uma consulta. Caso voc esteja usando outras fontes de dados como, por exemplo, entrada do usurio ou variveis de servidor, o nome da fonte de dados definido no Dreamweaver o mesmo nome da fonte de dados. Os sites dinmicos exigem uma fonte de dados da qual possam recuperar e exibir contedo dinmico. O Dreamweaver permite que voc use bancos de dados, variveis de solicitao, variveis de URL, variveis de servidor, variveis de formulrio, procedimentos armazenados e outras fontes de contedo dinmico. Dependendo da fonte de dados, voc pode recuperar o novo contedo para atender a uma solicitao ou modificar a pgina para atender s necessidades dos usurios. Qualquer fonte de contedo que voc define no Dreamweaver adicionada lista das fontes de contedo do painel Ligaes. Em seguida, voc pode inserir a fonte de contedo na pgina selecionada atualmente.

Sobre conjuntos de registros


As pginas da Web no podem acessar diretamente os dados armazenados em um banco de dados. Na verdade, elas interagem com um conjunto de registros. Um conjunto de registros um subconjunto das informaes (registros), extradas do banco de dados usando uma consulta do banco de dados. Uma consulta uma instruo de pesquisa projetada para localizar e extrair informaes especficas em um banco de dados. Ao usar um banco de dados como uma fonte de contedo para uma pgina da Web dinmica, voc deve criar inicialmente um conjunto de registros no qual armazena os dados recuperados. Os conjuntos de registros funcionam como um intermedirio entre o banco de dados que armazena o contedo e o servidor de aplicativo que gera a pgina. Conjuntos de registros so armazenados temporariamente na memria do servidor do aplicativo para recuperao de dados mais rpida. O servidor descarta o conjunto de registros quando no for mais necessrio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 557


Como tornar pginas dinmicas

Uma consulta pode produzir um conjunto de registros que inclui apenas determinadas colunas, certos registros ou combinaes de ambos. Um conjunto de registros tambm pode incluir todos os registros e colunas de uma tabela de banco de dados. No entanto, como os aplicativos raramente precisam usar todos os dados de um banco de dados, voc deve procurar criar conjuntos de registros com o menor tamanho possvel. Como o servidor Web mantm temporariamente o conjunto de registros na memria, o uso de um conjunto de registros menor requer menos memria e pode melhorar o desempenho do servidor. As consultas de banco de dados so escritas em SQL (linguagem de consulta estruturada), uma linguagem simples que permite recuperar, adicionar e excluir dados em um banco de dados. O construtor SQL includo no Dreamweaver permite criar consultas simples sem que voc precise compreender SQL. Entretanto, se voc quiser criar consultas complexas em SQL, um conhecimento bsico dessa linguagem permite criar consultas mais avanadas, alm de proporcionar mais flexibilidade na criao de pginas dinmicas. Antes de definir um conjunto de registros com o Dreamweaver, voc deve criar uma conexo com um banco de dados e caso no haja nenhum dado inserir dados no banco de dados. Caso voc ainda no tenha definido uma conexo de banco de dados para o site, consulte o captulo sobre a conexo de banco de dados referente tecnologia de servidor para a qual est desenvolvendo e siga as instrues sobre a criao de uma conexo de banco de dados.

Mais tpicos da Ajuda


Definir um conjunto de registros sem escrever em SQL na pgina 563

Sobre os parmetros de URL e de formulrio


Os parmetros de URL armazenam informaes recuperadas de entradas dos usurios. Para definir um parmetro de URL voc cria um formulrio ou link de hipertexto que usa o mtodo OBTER para enviar dados. As informaes so acrescentadas ao URL da pgina solicitada e comunicadas ao servidor. Durante o uso de variveis de URL, a seqncia de caracteres de consulta contm um ou mais pares nome/valor associados aos campos de formulrio. Esses pares nome/valor so acrescentados ao URL. Os parmetros de formulrio armazenam informaes recuperadas includas na solicitao HTTP de uma pgina da Web. Caso voc crie um formulrio que usa o mtodo POSTAR, os dados enviados pelo formulrio so passados para o servidor. Antes de comear, verifique se voc passou um parmetro de formulrio ao servidor.

Mais tpicos da Ajuda


Parmetros de URL na pgina 657 Definir parmetros de formulrio na pgina 570

Sobre as variveis de sesso


As variveis de sesso permitem armazenar e exibir informaes mantidas durante a visita de um usurio (ou sesso). O servidor cria um objeto de sesso diferente para cada usurio e o mantm durante um perodo estabelecido ou at que o objeto seja encerrado explicitamente. Como as variveis de sesso duram em toda a sesso do usurio e se mantm quando o usurio deixa uma pgina para outra dentro do site, elas so ideais para o armazenamento de referncias do usurio. As variveis de sesso tambm podem ser usadas na insero de um valor no cdigo HTML da pgina, na atribuio de um valor a uma varivel local ou no fornecimento de um valor para avaliar uma expresso condicional. Antes de definir variveis de sesso para uma pgina, voc deve cri-las no cdigo-fonte. Depois de criar uma varivel de sesso no cdigo-fonte do aplicativo da Web, voc pode usar o Dreamweaver para recuperar seu valor e us-lo em uma pgina da Web.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 558


Como tornar pginas dinmicas

Como funcionam as variveis de sesso


As variveis de sesso armazenam informaes (normalmente parmetros de formulrio ou de URL enviados por usurios) e as disponibilizam a todas as pginas de um aplicativo da Web durante a visita do usurio. Por exemplo, quando os usurios fazem logon em um portal da Web que fornece acesso a emails, cotaes, previses do tempo e notcias dirias, o aplicativo da Web armazena as informaes de logon em uma varivel de sesso que identifica o usurio em todas as pginas do site. Isso permite que o usurio veja apenas os tipos de contedo que selecionou enquanto navega no site. As variveis de sesso tambm podem fornecer um mecanismo de segurana ao encerrar a sesso do usurio caso a conta permanea inativa durante um determinado perodo. Isso tambm libera memria do servidor e recursos de processamento caso o usurio se esquea de fazer logoff em um site. As variveis de sesso armazenam informaes durante a vida da sesso de uso. A sesso comea quando o usurio abre uma pgina dentro do aplicativo e encerra quando ele no abre outra pgina do aplicativo durante um determinado perodo ou quando encerra explicitamente a sesso (normalmente clicando em um link fazer logoff). Enquanto existir, a sesso ser especfica de um usurio individual, e todos os usurios tm uma sesso separada. Use variveis de sesso para armazenar informaes que qualquer pgina de um aplicativo da Web possa acessar. As informaes podem ser to diversificadas quanto o nome de usurio, o tamanho da fonte preferencial ou o sinalizador que indica se o usurio fez o logon com xito. Outro uso comum das variveis de sesso manter um valor em execuo como, por exemplo, o nmero de perguntas respondidas corretamente at ento em um quiz on-line ou os produtos que o usurio selecionou de um catlogo on-line. As variveis de sesso s podem funcionar caso o navegador do usurio esteja configurado para aceitar cookies. O servidor cria um nmero de ID da sesso que identifica com exclusividade o usurio quando a sesso iniciada pela primeira vez e, em seguida, envia um cookie que contm o nmero de ID para o navegador do usurio. Quando o usurio solicita outra pgina do servidor, este l o cookie no navegador para identificar o usurio e recuperar as variveis de sesso do usurio armazenadas na memria do servidor.

Coleta, armazenamento e recuperao de informaes em variveis de sesso


Antes de criar uma varivel de sesso, voc deve inicialmente obter as informaes que deseja armazenar e, em seguida, envi-las ao servidor para armazenamento. Voc pode coletar e enviar informaes para o servidor usando formulrios em HTML ou links de hipertexto que contenham parmetros de URL. Voc tambm pode obter informaes de cookies armazenados no computador do usurio, dos cabealhos HTTP enviados pelo navegador do usurio com uma solicitao de pgina ou de um banco de dados. Um exemplo tpico de armazenamento de parmetros de URL em variveis de sesso um catlogo de produtos que usa parmetros de URL codificados criados com o uso de um link para enviar informaes de produto novamente para o servidor a serem armazenadas em uma varivel de sesso. Quando um usurio clica no link Adicionar ao carro de compras, a ID do produto armazenada em uma varivel de sesso enquanto o usurio continua comprando. Quando o usurio prossegue na direo da pgina de retirada, a ID do produto armazenada na varivel de sesso recuperada. Uma pesquisa baseada em formulrio um exemplo tpico de uma pgina que armazena parmetros de formulrio em variveis de sesso. O formulrio envia as informaes selecionadas novamente para o servidor, onde uma pgina de aplicativo computa a pesquisa e armazena a resposta em uma varivel de sesso a ser passada para um aplicativo que pode agrupar as respostas coletadas da populao pesquisada. Ou as informaes podem ser armazenadas em um banco de dados para serem usadas mais tarde. Depois que as informaes so enviadas para o servidor, voc armazena as informaes em variveis de sesso adicionando o cdigo apropriado do modelo de servidor pgina especificada pelo parmetro de URL ou de formulrio. Conhecida como pgina de destino, ela especificada no atributo action do formulrio em HTML ou no atributo href do link de hipertexto na pgina inicial.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 559


Como tornar pginas dinmicas

Depois de armazenar um valor em uma varivel de sesso, voc pode usar o Dreamweaver para recuperar o valor das variveis de sesso e us-lo em um aplicativo da Web. Depois de definir a varivel de sesso no Dreamweaver, voc pode inserir o valor em uma pgina. A sintaxe do HTML de cada uma exibida da seguinte forma:
<form action="destination.html" method="get" name="myform"> </form> <param name="href"value="destination.html">

Tanto a tecnologia de servidor usada quanto o mtodo que voc usa para obter as informaes determinam o cdigo usado para armazenar as informaes em uma varivel de sesso. A sintaxe bsica de cada tecnologia de servidor a seguinte: ColdFusion
<CFSET session.variable_name = value>

ASP
<% Session("variable_name") = value %>

A expresso value costuma ser uma expresso de servidor como, por exemplo, Request.Form("lastname"). Por exemplo, caso voc use um parmetro de URL chamado product (ou um formulrio em HTML com o mtodo OBTER e um campo de texto chamado product) para coletar informaes, as seguintes instrues armazenam as informaes em uma varivel de sesso chamada prodID: ColdFusion
<CFSET session.prodID = url.product>

ASP
<% Session("prodID") = Request.QueryString("product") %>

Caso voc use um formulrio em HTML com o mtodo postar e um campo de texto chamado txtProduct para coletar as informaes, as seguintes instrues armazenam as informaes na varivel de sesso: ColdFusion
<CFSET session.prodID = form.txtProduct>

ASP
<% Session("prodID") = Request.Form("txtProduct") %>

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 560


Como tornar pginas dinmicas

Exemplo de informaes armazenadas em variveis de sesso


Voc est trabalhando em um site com um grande pblico de cidados mais velhos. No Dreamweaver, adicione dois links pgina Bem-vindo que permitem aos usurios personalizar o tamanho do texto do site. Para um texto maior, fcil de ler, o usurio clica em um link e, para um texto de tamanho regular, o usurio clica em outro link.

Todos os links tm um parmetro de URL chamado fontsize que envia a preferncia de texto do usurio para o servidor, como mostra o seguinte exemplo do Adobe ColdFusion:
<a href="resort.cfm?fontsize=large">Larger Text</a><br> <a href="resort.cfm?fontsize=small">Normal Text</a>

Armazene a preferncia de texto do usurio em uma varivel de sesso e use-a para definir o tamanho da fonte em todas as pginas que o usurio solicita. Prxima parte superior da pgina de destino, digite o seguinte cdigo para criar uma sesso chamada font_pref que armazena a preferncia de tamanho da fonte do usurio. ColdFusion
<CFSET session.font_pref = url.fontsize>

ASP
<% Session("font_pref") = Request.QueryString("fontsize") %>

Quando o usurio clica no link de hipertexto, a pgina envia a preferncia de texto do usurio em um parmetro de URL para a pgina de destino. O cdigo na pgina de destino armazena o parmetro de URL na varivel de sesso font_pref. Durante a sesso do usurio, todas as pginas do aplicativo recuperam esse valor e exibem o tamanho de fonte selecionado.

Mais tpicos da Ajuda


Adio de contedo dinmico a pginas na pgina 577 Definir variveis de sesso na pgina 571

Variveis de aplicativo do ASP e do ColdFusion


No ASP e no ColdFusion, voc pode usar variveis de aplicativo para armazenar e exibir informaes mantidas durante a vida til do aplicativo e que se mantm de usurio para usurio. A vida til do aplicativo se estende do tempo em que o usurio inicialmente solicita uma pgina no aplicativo at o momento em que o servidor Web parado. (Um aplicativo definido como se todos os arquivos estivessem em um diretrio virtual e em seus subdiretrios.)

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 561


Como tornar pginas dinmicas

Como as variveis de aplicativo se estendem pela vida til do aplicativo e permanecem de usurio para usurio, elas so ideais para o armazenamento das informaes que devem existir para todos os usurios como, por exemplo, a hora e a data atuais. O valor da varivel de aplicativo definido no cdigo do aplicativo.

Variveis de servidor do ASP


Voc pode definir as seguintes variveis de servidor do ASP como fontes de contedo dinmico: Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables e Request.ClientCertificates.

Mais tpicos da Ajuda


Definir variveis de servidor na pgina 573

Variveis de servidor do ColdFusion


Voc pode definir as seguintes variveis de servidor do ColdFusion:
Variveis de cliente Associe dados a um cliente especfico. As variveis de cliente mantm o estado do aplicativo enquanto o usurio se move uma pgina para outra no aplicativo, bem como de uma sesso para outra. A manuteno de estado significa preservar as informaes de uma pgina (ou sesso) para a prxima de forma que o aplicativo se lembre do usurio, alm das opes e das preferncias anteriores do usurio. Variveis de cookie Acesse cookies passados para o servidor pelo navegador. Variveis CGI Fornea informaes sobre o servidor com o ColdFusion em execuo, o navegador que solicita uma pgina e demais informaes sobre o ambiente de processamento. Variveis de servidor Elas podem ser acessadas por todos os clientes e aplicativos do servidor. Elas persistem at a

parada do servidor.
Variveis locais Elas so criadas com a tag CFSET ou a tag CFPARAM dentro de uma pgina do ColdFusion.

Mais tpicos da Ajuda


Definir variveis de servidor na pgina 573

Painis de contedo dinmico


Painel Ligaes
Use o painel Ligaes para definir e editar fontes de contedo dinmico, adicionar contedo dinmico a uma pgina e aplicar formatos de dados a texto dinmico. Voc pode realizar as seguintes tarefas com esse painel:

Definio de origens de contedo dinmico na pgina 563 Adio de contedo dinmico a pginas na pgina 577 Alterar ou excluir fontes de contedo na pgina 576 Usar formatos de dados predefinidos na pgina 591 Anexar fontes de dados XML na pgina 503 Exibir dados XML em pginas XSLT na pgina 503

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 562


Como tornar pginas dinmicas

Parmetros de URL na pgina 657 Definir variveis de sesso na pgina 571 Definir variveis de aplicativo para o ASP e o ColdFusion na pgina 571 Definir variveis de servidor na pgina 573 Colocar em cache fontes de contedo na pgina 576 Copiar um conjunto de registros de uma pgina para outra na pgina 577 Tornar os atributos de HTML dinmicos na pgina 579

Painel Comportamentos de servidor


Use o painel Comportamentos de servidor para adicionar os comportamentos de servidor do Dreamweaver a uma pgina, editar outros e cri-los. Voc pode realizar as seguintes tarefas com esse painel:

Exibio de registros de banco de dados na pgina 583 Definio de origens de contedo dinmico na pgina 563 Criar pginas mestre e detalhadas em uma operao na pgina 612 Criao de pginas de pesquisa e de resultados na pgina 613 Criao de pginas para insero de registro na pgina 620 Criao de pginas para atualizar um registro na pgina 623 Criao de pginas para excluir um registro na pgina 629 Criao de uma pgina que apenas usurios autorizados podem acessar na pgina 645 Criao de uma pgina de registro na pgina 641 Criao de uma pgina de logon na pgina 643 Criao de uma pgina que apenas usurios autorizados podem acessar na pgina 645 Adicionar um procedimento armazenado (ColdFusion) na pgina 639 Excluir contedo dinmico na pgina 581 Adio de comportamentos de servidor personalizados na pgina 594

Painel Bancos de dados


Use o painel Bancos de dados para criar conexes de banco de dados, inspecionar bancos de dados e inserir cdigo relacionado a banco de dados nas pginas. Voc pode exibir e se conectar ao banco de dados com esse painel:

Exibir o banco de dados dentro do Dreamweaver na pgina 552 Conexes de banco de dados para desenvolvedores do ColdFusion na pgina 534 Conexes de banco de dados para desenvolvedores do ASP na pgina 536 Conexes de banco de dados para desenvolvedores do PHP na pgina 543

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 563


Como tornar pginas dinmicas

Painel Componentes
Use o painel Componentes para criar e inspecionar componentes, alm de inserir cdigo de componente nas pginas. Nota: O painel no funciona na Visualizao de design. Voc pode realizar as seguintes tarefas com esse painel:

Uso de componentes do ColdFusion na pgina 649

Definio de origens de contedo dinmico


Definir um conjunto de registros sem escrever em SQL
Voc pode criar um conjunto de registros sem inserir manualmente instrues SQL.
1 Na janela Documento, abra a pgina que usar o conjunto de registros. 2 Selecione Janelas > Ligaes para exibir o painel Ligaes. 3 No painel Ligaes, clique no boto de adio (+) e selecione Conjunto de registros (consulta) no menu pop-up.

A caixa de dilogo simples Conjunto de registros exibida. Caso voc esteja desenvolvendo um site em ColdFusion, a caixa de dilogo Conjunto de registros muda um pouco. (Caso a caixa de dilogo avanada Conjunto de registros seja exibida em seu lugar, clique no boto Simples a fim de alternar para a caixa de dilogo Conjunto de registros simples.)
4 Complete a caixa de dilogo Conjunto de registros referente ao tipo de documento.

Para obter instrues, consulte os tpicos abaixo.


5 Clique no boto Testar para executar a consulta e verificar se ela recupera as informaes que voc deseja.

Caso voc tenha definido um filtro que usa parmetros inseridos por usurios, insira um valor na caixa Valor de teste e clique em OK. Caso uma ocorrncia do conjunto de registros seja criada com xito, uma tabela exibida com os dados extrados do conjunto.
6 Clique em OK para adicionar o conjunto de registros lista de fontes de contedo disponveis no painel Ligaes.

Opes da caixa de dilogo simples Conjunto de registros (PHP, ASP)


1 Na caixa Nome, digite um nome para o conjunto de registros.

Uma prtica comum adicionar o prefixo rs a nomes do conjunto de registros para diferenci-los dos demais nomes de objeto no cdigo, por exemplo: rsPressReleases. Os nomes do conjunto de registros s podem conter letras, nmeros e o caractere de sublinhado (_). Voc no pode usar caracteres especiais ou espaos.
2 Selecione uma conexo no menu pop-up Conexo.

Caso nenhuma conexo seja exibida na lista, clique em Definir para criar uma.
3 No menu pop-up Tabela, selecione a tabela do banco de dados que fornecer dados ao conjunto de registros.

O menu pop-up exibe todas as tabelas no banco de dados especfico.


4 Para incluir um subconjunto das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as

colunas desejadas clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 564


Como tornar pginas dinmicas

5 Para limitar ainda mais os registros que a tabela retorna, complete a seo Filtro:

No primeiro menu pop-up, selecione uma coluna da tabela do banco de dados a ser comparada com um valor
de teste que voc define.

No segundo menu pop-up, selecione uma expresso condicional para comparar o valor selecionado em cada
registro com o valor de teste.

No terceiro menu pop-up, selecione Valor digitado. Na caixa, digite o valor de teste.
Caso o valor especificado em um registro atenda condio de filtragem, o registro includo no conjunto de registros.
6 (Opcional) Para classificar os registros, selecione uma coluna para classificar e, em seguida, especifique se os

registros devem ser classificados em ordem crescente (1, 2, 3... ou A, B, C...) ou em ordem decrescente.
7 Clique em Testar para se conectar ao banco de dados e criar uma ocorrncia da fonte de dados, e clique em OK para

fechar a fonte de dados. Uma tabela exibida com os dados retornados. Cada linha contm um registro e cada coluna representa um campo nesse registro.
8 Clique em OK. O conjunto de registros recm-definido exibido no painel Ligaes.

Opes da caixa de dilogo simples Conjunto de registros (ColdFusion)


Defina um conjunto de registros para tipos de documento do ColdFusion como fonte de contedo dinmico sem precisar codificar manualmente instrues SQL.
1 Na caixa Nome, digite um nome para o conjunto de registros.

Uma prtica comum adicionar o prefixo rs a nomes do conjunto de registros para diferenci-los dos demais nomes de objeto no cdigo. Por exemplo: rsPressReleases Os nomes do conjunto de registros s podem conter letras, nmeros e o caractere de sublinhado (_). Voc no pode usar caracteres especiais ou espaos.
2 Caso voc esteja definindo um conjunto de registros para um componente do ColdFusion (ou seja, caso um arquivo

CFC esteja aberto no momento Dreamweaver), selecione uma funo CFC existente no menu pop-up Funo ou clique no boto Nova funo para criar uma nova funo. Nota: O menu pop-up Funo s est disponvel caso um arquivo CFC seja o documento atual e voc tenha acesso a um computador com o ColdFusion MX 7 ou melhor em execuo. O conjunto de registros definido na funo.
3 Selecione uma fonte de dados no menu pop-up Fonte de dados.

Caso no haja nenhuma fonte de dados no menu pop-up, voc cria uma fonte de dados do ColdFusion.
4 Nas caixas Nome de usurio e Senha, digite o nome de usurio e a senha do servidor de aplicativo do ColdFusion,

caso necessrio. As fontes de dados do ColdFusion podem exigir um nome de usurio e senha no acesso. Caso voc no tenha o nome de usurio e a senha para acessar uma fonte de dados no ColdFusion, entre em contato com o administrador do ColdFusion na organizao.
5 No menu pop-up Tabela, selecione a tabela do banco de dados que fornecer dados ao conjunto de registros.

O menu pop-up Tabela exibe todas as tabelas no banco de dados especfico.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 565


Como tornar pginas dinmicas

6 Para incluir um subconjunto das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as

colunas desejadas clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista.
7 Para limitar ainda mais os registros que a tabela retorna, complete a seo Filtro:

No primeiro menu pop-up, selecione uma coluna da tabela do banco de dados a ser comparada com um valor
de teste que voc define.

No segundo menu pop-up, selecione uma expresso condicional para comparar o valor selecionado em cada
registro com o valor de teste.

No terceiro menu pop-up, selecione Valor digitado. Na caixa, digite o valor de teste.
Caso o valor especificado em um registro atenda condio de filtragem, o registro includo no conjunto de registros.
8 (Opcional) Para classificar os registros, selecione uma coluna para classificar e, em seguida, especifique se os

registros devem ser classificados em ordem crescente (1, 2, 3... ou A, B, C...) ou decrescente.
9 Clique em Testar para se conectar ao banco de dados e criar uma ocorrncia da fonte de dados.

Uma tabela exibida com os dados retornados. Cada linha contm um registro e cada coluna representa um campo nesse registro. Clique em OK para fechar o conjunto de registros de teste.
10 Clique em OK. O conjunto de registros do ColdFusion recm-definido exibido no painel Ligaes.

Definir um conjunto de registros avanado escrevendo em SQL


Escreva instrues SQL prprias usando a caixa de dilogo avanada Conjunto de registros ou crie uma instruo SQL usando a rvore grfica Itens do banco de dados.
1 Na janela Documento, abra a pgina que usar o conjunto de registros. 2 Selecione Janelas > Ligaes para exibir o painel Ligaes. 3 No painel Ligaes, clique no boto de adio (+) e selecione Conjunto de registros (consulta) no menu pop-up.

A caixa de dilogo avanada Conjunto de registros exibida. Caso voc esteja desenvolvendo um site em ColdFusion, a caixa de dilogo Conjunto de registros muda um pouco. (Mas caso seja exibida a caixa de dilogo simples Conjunto de registros, alterne para a caixa de dilogo avanada Conjunto de registros clicando no boto Avanado.)
4 Complete a caixa de dilogo avanada Conjunto de registros.

Para obter instrues, consulte os tpicos abaixo.


5 Clique no boto Testar para executar a consulta e verificar se ela recupera as informaes que voc deseja.

Caso voc tenha definido um filtro que use parmetros inseridos pelos usurios, o boto Testar exibe a caixa de dilogo Valor de teste. Insira um valor na caixa Valor de teste e clique em OK. Caso uma ocorrncia do conjunto de registros seja criada com xito, uma tabela exibida com os dados do conjunto.
6 Clique em OK para adicionar o conjunto de registros lista de fontes de contedo disponveis no painel Ligaes.

Mais tpicos da Ajuda


Criar consultas SQL usando a rvore Itens do banco de dados na pgina 569 Conexes de banco de dados para desenvolvedores do ASP na pgina 536 Conexes de banco de dados para desenvolvedores do PHP na pgina 543

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 566


Como tornar pginas dinmicas

Definio de origens de contedo dinmico na pgina 563 Adicionar um procedimento armazenado (ColdFusion) na pgina 639 SQL primer

Opes da caixa de dilogo avanada Conjunto de registros (PHP, ASP)


Defina um conjunto de registros como fonte de contedo dinmico escrevendo uma instruo SQL personalizada ou criando uma instruo SQL usando a rvore grfica Itens do banco de dados.
1 Na caixa Nome, digite um nome para o conjunto de registros.

Uma prtica comum adicionar o prefixo rs a nomes do conjunto de registros para diferenci-los dos demais nomes de objeto no cdigo. Por exemplo: rsPressRelease Os nomes do conjunto de registros s podem conter letras, nmeros e o caractere de sublinhado (_). Voc no pode usar caracteres especiais ou espaos.
2 Selecione uma conexo no menu pop-up Conexo. 3 Insira uma instruo SQL na rea de texto SQL ou use a rvore grfica Itens do banco de dados na parte inferior da

caixa de dilogo para criar uma instruo SQL usando o conjunto de registros escolhido. Faa o seguinte para usar a rvore Itens do banco de dados e criar a instruo SQL:

Verifique se a rea de texto SQL est em branco. Expanda as ramificaes da rvore at localizar o objeto de banco de dados de que voc precisa uma coluna em
uma tabela, por exemplo, ou um procedimento armazenado no banco de dados.

Selecione o objeto de banco de dados e clique em um dos botes no lado direito da rvore.
Por exemplo, caso voc selecione uma coluna da tabela, os botes disponveis so SELECT, WHERE e ORDER BY. Clique em um dos botes para adicionar a clusula associada instruo SQL. Voc tambm pode usar uma instruo SQL predefinida em um procedimento armazenado selecionando o procedimento armazenado na rvore Itens do banco de dados e clicando no boto Procedimento. O Dreamweaver preenche automaticamente as reas SQL e Varivel.
4 Caso a instruo SQL contenha variveis, defina os valores na rea Variveis clicando no boto de adio (+) e

digitando o nome da varivel, o tipo (inteira, texto, data ou nmero de ponto flutuante) o nome padro (o valor que a varivel deve usar caso nenhum valor de runtime retorne) e o valor de runtime. Nota: Quando usar variveis em uma instruo SQL em PHP, o Dreamweaver adicionar automaticamente um smbolo de dlar ao nome da varivel, portanto voc deve omitir o sinal de dlar (por exemplo, colname, em vez de $colname). Caso a instruo SQL contenha variveis, verifique se a coluna Valor padro da caixa Variveis contm valores de teste vlidos. O valor de runtime costuma ser um parmetro de URL ou de formulrio inserido por um usurio em um campo de formulrio em HTML. Parmetros de URL na coluna Valor de runtime:
Modelo do servidor ASP PHP Expresso do valor de runtime para o parmetro de URL Request.QueryString(formFieldName) $_GET['formFieldName']

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 567


Como tornar pginas dinmicas

Parmetros de formulrio na coluna Valor de runtime:


Modelo do servidor ASP PHP Expresso do valor de runtime para o parmetro de formulrio Request.Form(formFieldName) $_POST['formFieldName']

5 Clique em Testar para se conectar ao banco de dados e criar uma ocorrncia do conjunto de registros.

Caso a instruo SQL contenha variveis, verifique se a coluna Valor padro da caixa Variveis contm valores de teste vlidos antes de clicar em Testar. Caso haja xito, uma tabela exibida com os dados do conjunto de registros. Cada linha contm um registro e cada coluna representa um campo nesse registro. Clique em OK para limpar o conjunto de registros.
6 Caso esteja satisfeito com o trabalho, clique em OK.

Opes da caixa de dilogo avanada Conjunto de registros (ColdFusion)


Use a caixa de dilogo avanada Conjunto de registros para escrever consultas SQL personalizadas ou use a rvore Itens do banco de dados para criar consultas SQL usando uma interface apontar e clicar.
1 Na caixa Nome, digite um nome para o conjunto de registros.

Uma prtica comum adicionar o prefixo rs a nomes do conjunto de registros para diferenci-los dos demais nomes de objeto no cdigo. Por exemplo: rsPressReleases Os nomes do conjunto de registros s podem conter letras, nmeros e o caractere de sublinhado (_). Voc no pode usar caracteres especiais ou espaos. Caso voc esteja definindo um conjunto de registros para um componente do ColdFusion (ou seja, caso um arquivo CFC esteja aberto no momento Dreamweaver), selecione uma funo CFC existente no menu pop-up Funo ou clique no boto Nova funo para criar uma nova funo. Nota: O menu pop-up Funo s est disponvel caso um arquivo CFC seja o documento atual e voc tenha acesso a um computador com o ColdFusion MX 7 ou melhor em execuo. O conjunto de registros definido na funo.
2 Selecione uma fonte de dados no menu pop-up Fonte de dados.

Se no houver nenhuma fonte de dados na lista do menu pop-up, voc primeiramente precisar criar uma fonte de dados do ColdFusion.
3 Nas caixas Nome de usurio e Senha, digite o nome de usurio e a senha do servidor de aplicativo do ColdFusion,

caso necessrio. As fontes de dados do ColdFusion podem exigir um nome de usurio e senha no acesso. Caso voc no tenha o nome de usurio e a senha para acessar uma fonte de dados no ColdFusion, entre em contato com o administrador do ColdFusion na organizao.
4 Insira uma instruo SQL na rea de texto SQL ou use a rvore grfica Itens do banco de dados na parte inferior da

caixa de dilogo para criar uma instruo SQL usando o conjunto de registros escolhido.
5 (Opcional) Faa o seguinte para usar a rvore Itens do banco de dados e criar a instruo SQL:

Verifique se a rea de texto SQL est em branco. Expanda as ramificaes da rvore at localizar o objeto de banco de dados de que voc precisa por exemplo, uma
coluna de uma tabela.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 568


Como tornar pginas dinmicas

Selecione o objeto de banco de dados e clique em um dos botes no lado direito da rvore.
Por exemplo, caso voc selecione uma coluna da tabela, os botes disponveis so SELECT, WHERE e ORDER BY. Clique em um dos botes para adicionar a clusula associada instruo SQL. Caso a instruo SQL contenha parmetros, defina os valores na rea Parmetros clicando no boto de adio (+) e digitando o nome do parmetro e o nome padro (o valor que o parmetro deve usar caso nenhum valor de runtime retorne). Caso a instruo SQL contenha parmetros, verifique se a coluna Valor padro da caixa Parmetros contm valores de teste vlidos. Parmetros de pgina permitem fornecer valores padro para referncias de valor de runtime no SQL que voc escreve. Por exemplo, a seguinte instruo SQL seleciona um registro de funcionrio com base no valor da ID do funcionrio. Voc pode atribuir um valor padro ao parmetro, verificando se um valor de runtime sempre retorna. Nesse exemplo, FormFieldName se refere a um campo de formulrio em que o usurio insere a ID de um funcionrio:
SELECT * FROM Employees WHERE EmpID = + (Request.Form(#FormFieldName#))

A caixa de dilogo Adicionar parmetros de pgina teria um par nome/valor semelhante a:


Nome FormFieldName Valores padro
0001

O valor de runtime costuma ser um parmetro de URL ou de formulrio inserido por um usurio em um campo de formulrio em HTML.
6 Clique em Testar para se conectar ao banco de dados e criar uma ocorrncia do conjunto de registros.

Caso a instruo SQL contenha referncias de runtime, verifique se a coluna Valor padro do campo Parmetros de pgina contm valores de teste vlidos antes de clicar em Testar. Caso haja xito, uma tabela exibida com os dados do conjunto de registros. Cada linha contm um registro e cada coluna representa um campo nesse registro. Clique em OK para limpar o conjunto de registros.
7 Caso esteja satisfeito com o trabalho, clique em OK.

Definir parmetros em uma instruo SQL (ColdFusion)


Defina parmetros em uma instruo SQL; o valor padro o valor que o parmetro deve usar caso no retorne nenhum valor de runtime.
1 Selecione um nome de parmetro no menu pop-up Nome. 2 Insira um valor padro para o parmetro na caixa Parmetro padro e clique em OK.

Definir parmetros em uma instruo SQL (PHP)


Defina parmetros em uma instruo SQL; o valor padro o valor que o parmetro deve usar caso no retorne nenhum valor de runtime.
1 Digite o nome de um parmetro na caixa Nome. 2 Insira um valor padro para o parmetro na caixa Parmetro padro. 3 Insira um valor de runtime para um parmetro na caixa Valor de runtime e clique em OK.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 569


Como tornar pginas dinmicas

Criar consultas SQL usando a rvore Itens do banco de dados


Em vez de digitar manualmente as instrues SQL na caixa SQL, voc pode usar a interface apontar e clicar de Itens do banco de dados para criar consultas SQL complexas. A rvore Itens do banco de dados permite selecionar objetos de banco de dados e vincul-los usando clusulas SQL SELECT, WHERE e ORDER BY. Depois de criar uma consulta SQL, voc pode definir qualquer varivel usando a rea Variveis da caixa de dilogo. Os prximos dois exemplos descrevem duas instrues SQL e as etapas para cri-las usando a rvore Itens do banco de dados da caixa de dilogo avanada Conjunto de registros.

Exemplo: seleo de uma tabela


Este exemplo seleciona todo o contedo da tabela Funcionrios. A instruo SQL que define a consulta exibida da seguinte forma:
SELECT * FROM Employees

Para criar essa consulta, siga estas etapas.


1 Expanda a ramificao Tabelas para exibir todas as tabelas no banco de dados selecionado. 2 Selecione a tabela Funcionrios. 3 Clique no boto Selecionar. 4 Clique em OK para adicionar o conjunto de registros ao painel Ligaes.

Exemplo: seleo de linhas especficas de uma tabela e ordenao dos resultados


O seguinte exemplo seleciona duas linhas da tabela Funcionrios e, depois, seleciona o tipo de trabalho usando uma varivel que voc deve definir. Em seguida, os resultados so ordenados pelo nome de funcionrio.
SELECT emplNo, emplName FROM Employees WHERE emplJob = 'varJob' ORDER BY emplName

1 Expanda a ramificao Tabelas para exibir todas as tabelas no banco de dados selecionado e, depois, expanda a

tabela Funcionrios para exibir as linhas da tabela individual.


2 Crie a instruo SQL da seguinte forma:

Selecione emplNo e clique no boto Selecionar. Selecione emplName e clique no boto Selecionar. Selecione emplJob e clique no boto Onde. Selecione emplName e clique no boto Ordenar por.
3 Coloque o ponto de insero depois de WHERE emplJob na rea de texto SQL e digite ='varJob' (inclua o sinal de

igual).
4 Defina a varivel 'varJob' clicando no boto de adio (+) da rea Variveis e inserindo os valores nas colunas

Nome, Valor padro e Valor de runtime: varJob, CLERK, Request("job").


5 Clique em OK para adicionar o conjunto de registros ao painel Ligaes.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 570


Como tornar pginas dinmicas

Definir parmetros de URL


Os parmetros de URL armazenam informaes recuperadas de entradas dos usurios. Antes de comear, verifique se voc passou um parmetro de formulrio ou de URL ao servidor. Depois de definir a varivel de URL, voc pode usar seu valor na pgina selecionada no momento.
1 Na janela Documento, abra a pgina que usar a varivel. 2 Selecione Janelas > Ligaes para exibir o painel Ligaes. 3 No painel Ligaes, clique no boto de adio (+) e selecione uma das seguintes opes no menu pop-up:
Tipos de documento ASP ColdFusion PHP Item de menu no painel Ligaes da varivel de URL Varivel de solicitao > Request.QueryString Varivel de URL Varivel de URL

4 Na caixa de dilogo Varivel de URL, digite o nome da varivel de URL na caixa e clique em OK.

O nome da varivel de URL costuma ser o nome do campo de formulrio em HTML ou do objeto usado para obter o valor.
5 A varivel de URL exibida no painel Ligaes.

Mais tpicos da Ajuda


Sobre os parmetros de URL e de formulrio na pgina 557 Adio de contedo dinmico a pginas na pgina 577 Parmetros de URL na pgina 657 Variveis de servidor do ColdFusion na pgina 561

Definir parmetros de formulrio


Os parmetros de formulrio armazenam informaes recuperadas includas na solicitao HTTP de uma pgina da Web. Caso voc crie um formulrio que usa o mtodo POSTAR, os dados enviados pelo formulrio so passados para o servidor. Antes de comear, verifique se voc passou um parmetro de formulrio ao servidor. Depois de definir o parmetro de formulrio como fonte de contedo, voc pode usar o valor na pgina.
1 Na janela Documento, abra a pgina que usar a varivel. 2 Selecione Janelas > Ligaes para exibir o painel Ligaes. 3 No painel Ligaes, clique no boto de adio (+) e selecione uma das seguintes opes no menu pop-up:
Tipos de documento ASP ColdFusion PHP Item de menu no painel Ligaes da varivel de formulrio Varivel de solicitao > Request.Form Varivel de formulrio Varivel de formulrio

4 Na caixa de dilogo Varivel de formulrio, digite o nome da varivel de formulrio e clique em OK. O nome do

parmetro de formulrio costuma ser o nome do campo de formulrio em HTML ou do objeto usado para obter o valor.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 571


Como tornar pginas dinmicas

O parmetro de formulrio exibido no painel Ligaes.

Mais tpicos da Ajuda


Sobre as fontes de contedo dinmico na pgina 556 Sobre os parmetros de URL e de formulrio na pgina 557 Definir variveis de servidor na pgina 573

Definir variveis de sesso


Voc pode usar variveis de sesso para armazenar e exibir informaes mantidas durante a visita de um usurio (ou sesso). O servidor cria um objeto de sesso diferente para cada usurio e o mantm durante um perodo estabelecido ou at que o objeto seja encerrado explicitamente. Antes de definir variveis de sesso para uma pgina, voc deve cri-las no cdigo-fonte. Depois de criar uma varivel de sesso no cdigo-fonte do aplicativo da Web, voc pode usar o Dreamweaver para recuperar seu valor e us-lo em uma pgina da Web.
1 Crie uma varivel de sesso no cdigo-fonte e atribua um valor a ela.

Por exemplo, esse modelo do ColdFusion instancia uma sesso chamada username e atribui a ela o valor Cornelius:
<CFSET session.username = Cornelius>

2 Selecione Janela > Ligaes para exibir o painel Ligaes. 3 Clique no boto de adio (+) e selecione Varivel de sesso no menu pop-up. 4 Digite o nome da varivel que voc definiu no cdigo-fonte do aplicativo e clique em OK.

Mais tpicos da Ajuda


Coleta de informaes dos usurios na pgina 656 Como funcionam as variveis de sesso na pgina 558 Coleta, armazenamento e recuperao de informaes em variveis de sesso na pgina 558

Definir variveis de aplicativo para o ASP e o ColdFusion


No ASP e no ColdFusion, voc pode usar variveis de aplicativo para armazenar e exibir informaes mantidas durante a vida til do aplicativo e que se mantm de usurio para usurio. Depois de definir a varivel de aplicativo, voc pode usar o valor em uma pgina. Nota: No h objetos de varivel de aplicativo em PHP.
1 Abra um tipo de documento dinmico na janela Documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 572


Como tornar pginas dinmicas

2 Selecione Janela > Ligaes para exibir o painel Ligaes. 3 Clique no boto de adio (+) e selecione Varivel de aplicativo no menu pop-up. 4 Digite o nome da varivel como voc o definiu no cdigo-fonte do aplicativo e clique em OK.

A varivel de aplicativo exibida no painel Ligaes, no cone Aplicativo.

Mais tpicos da Ajuda


Sobre a adio de contedo dinmico na pgina 577 Definir variveis de servidor na pgina 573

Usar uma varivel como fonte de dados para um conjunto de registros do ColdFusion
Quando voc define um conjunto de registros no painel Ligaes, o Dreamweaver informa o nome da fonte de dados do ColdFusion na tag cfquery da pgina. Para obter mais flexibilidade, voc pode armazenar um nome de fonte de dados em uma varivel e usar a varivel na tag cfquery. O Dreamweaver fornece um mtodo visual de especificao dessa varivel nos conjuntos de registros.
1 Verifique se uma pgina do ColdFusion est ativa na janela Documento. 2 No painel Ligaes, clique no boto de adio (+) e selecione Varivel de nome da fonte de dados no menu pop-up.

A caixa de dilogo Varivel de nome da fonte de dados exibida.


3 Defina uma varivel e clique em OK. 4 Ao definir o conjunto de registros, selecione a varivel como fonte de dados do conjunto de registros.

Na caixa de dilogo Conjunto de registros, a varivel exibida no menu pop-up Fonte de dados com as fontes de dados do ColdFusion no servidor.
5 Complete a caixa de dilogo Conjunto de registros e clique em OK. 6 Inicialize a varivel.

O Dreamweaver no inicializa a varivel para que voc possa inicializ-la como e onde desejar. Voc pode inicializar a varivel no cdigo da pgina (antes da tag cfquery), em um arquivo de incluso ou em algum outro arquivo como uma varivel de sesso ou de aplicativo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 573


Como tornar pginas dinmicas

Definir variveis de servidor


Voc define variveis de servidor como fontes de contedo dinmico a serem usadas dentro de um aplicativo da Web. As variveis de servidor variam de acordo com o tipo de documento e entre elas esto variveis de formulrio, de URL, de sesso e de aplicativo. As variveis de servidor podem ser acessadas por todos os clientes que acessam o servidor e por qualquer aplicativo em execuo no servidor. As variveis persistem at a parada do servidor.

Mais tpicos da Ajuda


Adio de contedo dinmico a pginas na pgina 577 Parmetros de URL na pgina 657 Parmetros de formulrio em HTML na pgina 656 Variveis de servidor do ColdFusion na pgina 561

Definir variveis de servidor do ColdFusion


1 Abra o painel Ligaes (Janela > Ligaes). Na caixa de dilogo Varivel de servidor, digite o nome da varivel de

servidor e clique em OK.


2 Clique no boto de adio (+) e selecione a varivel de sesso no menu pop-up. 3 Digite o nome da varivel e clique em OK. A varivel de servidor do ColdFusion exibida no painel Ligaes.

A seguinte tabela lista as variveis de servidor do ColdFusion incorporadas:


Varivel Server.ColdFusion.ProductName Server.ColdFusion.ProductVersion Server.ColdFusion.ProductLevel Server.ColdFusion.SerialNumber Server.OS.Name Server.OS.AdditionalInformation Server.OS.Version Server.OS.BuildNumber Descrio Nome de produto do ColdFusion. Nmero da verso do ColdFusion. Edio do ColdFusion (Enterprise, Professional). Nmero de srie da verso atualmente instalada do ColdFusion. Nome do sistema operacional em execuo no servidor (Windows XP, Windows 2000, Linux). Informaes adicionais sobre o sistema operacional instalado (service packs, atualizaes). Verso do sistema operacional instalado. Verso da compilao do sistema operacional instalado.

Definir uma varivel local do ColdFusion


Variveis locais so variveis criadas com a tag CFSET ou CFPARAM dentro de uma pgina do ColdFusion. A varivel local definida exibida no painel Ligaes.
Na caixa de dilogo Varivel local, digite o nome da varivel local e clique em OK.

Definir variveis de servidor do ASP


Voc pode definir as seguintes variveis de servidor do ASP como fontes de contedo dinmico: Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables e Request.ClientCertificates.
1 Abra o painel Ligaes (Janela > Ligaes). 2 Clique no boto de adio (+) e selecione Varivel de solicitao no menu pop-up.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 574


Como tornar pginas dinmicas

3 Na caixa de dilogo Varivel de solicitao, selecione um dos seguintes conjuntos de solicitao no menu pop-up Tipo:
O conjunto QueryString Recupera informaes acrescentadas ao URL da pgina de envio como, por exemplo, quando a pgina tem um formulrio em HTML usando o mtodo OBTER. A seqncia de caracteres de consulta consiste em um ou mais pares nome/valor (por exemplo, last=Smith, first=Winston) acrescentados ao URL com um ponto de interrogao (?). Caso a seqncia de caracteres de consulta tenha mais de um par nome/valor, so inseridos sinais de e comercial (&). O conjunto Form Recupera informaes de formulrio includas no corpo da solicitao HTTP por formulrio HTTP

usando o mtodo POSTAR.


O conjunto ServerVariables Recupera os valores de variveis de ambiente predefinidas. O conjunto tem uma lista de variveis longa, inclusive CONTENT_LENGTH (o comprimento do contedo enviado na solicitao HTTP, que voc pode usar para ver se um formulrio est vazio) e HTTP_USER_AGENT (fornece informaes sobre o navegador do usurio).

Por exemplo, Request.ServerVariables("HTTP_USER_AGENT") contm informaes sobre o navegador responsvel pela solicitao como, por exemplo, Mozilla/4.07 [en] (WinNT; I), que indica um navegador Netscape Navigator 4.07. Para obter uma lista completa das variveis de ambiente do servidor do ASP, consulte a documentao on-line instalada com o Microsoft Personal Web Server (PWS) ou o Internet Information Server (IIS).
O conjunto Cookies Recupera os valores dos cookies enviados em uma solicitao HTTP. Por exemplo, suponhamos que na pgina haja um cookie chamado "readMe" no sistema do usurio. No servidor, os valores do cookie so armazenados na varivel Request.Cookies("readMe"). O conjunto ClientCertificate Recupera os campos de certificao da solicitao HTTP enviada pelo navegador. Os

campos de certificao so especificados no padro X.509.


4 Especifique a varivel no conjunto que voc deseja acessar e clique em OK.

Por exemplo, caso voc acesse as informaes na varivel Request.ServerVariables("HTTP_USER_AGENT"), insira o argumento HTTP_USER_AGENT. Caso voc queira acessar as informaes na varivel Request.Form("lastname"), insira o argumento lastname. A varivel de solicitao exibida no painel Ligaes.

Definir variveis de servidor PHP


Defina as variveis de servidor como uma fonte de contedo dinmico para pginas em PHP. As variveis de servidor do PHP so exibidas no painel Ligaes.
1 Abra o painel Ligaes (Janela > Ligaes). 2 Clique no boto de adio (+) e selecione a varivel no menu pop-up. 3 Na caixa de dilogo Varivel de solicitao, digite o nome da varivel (por exemplo, REQUEST_METHOD) e

clique em OK. Para obter mais informaes, procure pela palavra-chave $_SERVER na documentao do PHP.

Definir uma varivel de cliente do ColdFusion


Defina uma varivel de cliente do ColdFusion como uma fonte de contedo dinmico para a pgina. As variveis de cliente do ColdFusion recm-definidas so exibidas no painel Ligaes.
Na caixa de dilogo Varivel de cliente, digite o nome da varivel e clique em OK.

Por exemplo, para acessar as informaes na varivel Client.LastVisit do ColdFusion, insira LastVisit.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 575


Como tornar pginas dinmicas

Variveis de cliente so variveis criadas no cdigo para associar dados a um cliente especfico. As variveis de cliente mantm o estado do aplicativo enquanto o usurio se move uma pgina para outra no aplicativo, bem como de uma sesso para outra. As variveis de cliente podem ser definidas pelo usurio ou incorporadas. A seguinte tabela lista as variveis de cliente do ColdFusion incorporadas:
Varivel Client.CFID Client.CFTOKEN Client.URLToken Descrio Outra ID para cada cliente que se conecta ao servidor. Um nmero gerado aleatoriamente usado exclusivamente para identificar um cliente em especial. Uma combinao entre CFID e CFTOKEN a ser passada entre os modelos quando os cookies no forem usados. Registra o carimbo de data/hora da ltima visita que um cliente fez. O nmero de solicitaes de pgina vinculadas a um nico cliente (controlado por CFID e CFTOKEN). Registra o carimbo de data/hora quando CFID e CFTOKEN foram criados inicialmente para um determinado cliente.

Client.LastVisit Client.HitCount Client.TimeCreated

Definir uma varivel de cookie do ColdFusion


As variveis de cookie so criadas no cdigo e acessam informaes contidas em cookies passadas para o servidor por um navegador. A varivel de cookie definida exibida no painel Ligaes.
Na caixa de dilogo Varivel de cookie, digite o nome da varivel de cookie e clique em OK.

Definir uma varivel CGI do ColdFusion


A varivel CGI definida exibida no painel Ligaes.
Na caixa de dilogo Varivel CGI, digite o nome da varivel e clique em OK.

Por exemplo, caso voc acesse as informaes na varivel CGI.HTTP_REFERER, insira HTTP_REFERER. A seguinte tabela lista as variveis CGI do ColdFusion mais comuns criadas no servidor:
Varivel SERVER_SOFTWARE Descrio O nome e a verso do software do servidor das informaes que atende solicitao (no qual o gateway est em execuo). Formato: nome/verso. O nome de host do servidor, a cpia do DNS ou o endereo IP como ele exibido nos URLs de autoreferncia. A reviso da especificao de CGI com a qual o servidor compatvel. Formato: CGI/reviso. O nome e a reviso do protocolo de informaes que acompanha a solicitao. Formato: protocolo/reviso. O nmero da porta para o qual a solicitao foi enviada. O mtodo com o qual a solicitao foi feita. Para HTTP, os mtodos so Obter, Cabealho, Postar etc. As informaes adicionais do caminho dadas pelo cliente. Os scripts podem ser acessados pelo nome do caminho virtual, seguido de informaes adicionais ao final dele. As informaes adicionais so enviadas como PATH_INFO. O servidor fornece uma verso traduzida de PATH_INFO, que usa o caminho e faz um mapeamento virtual/fsico para ele.

SERVER_NAME

GATEWAY_INTERFACE SERVER_PROTOCOL

SERVER_PORT REQUEST_METHOD PATH_INFO

PATH_TRANSLATED

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 576


Como tornar pginas dinmicas

Varivel SCRIPT_NAME QUERY_STRING REMOTE_HOST

Descrio Um caminho virtual at o script em execuo; usado em URLs de auto-referncia. As informaes de consulta aps o ponto de interrogao (?) no URL que referencia o script. O nome de host que realiza a solicitao. Caso no tenha essas informaes, o servidor define REMOTE_ADDR, e no REMOTE_HOST. O endereo IP do host remoto que faz a solicitao. Caso o servidor d suporte autenticao do usurio e o script esteja protegido, trata-se do mtodo de autenticao especfico do protocolo usado para validar o usurio. Caso o servidor d suporte autenticao do usurio e o script esteja protegido, trata-se do nome de usurio da autenticao. (Tambm disponvel como AUTH_USER.) Caso o servidor HTTP d suporte identificao RFC 931, a varivel definida como o nome do usurio remoto recuperado do servidor. Use a varivel apenas no logon. Em consultas que tenham informaes anexadas como, por exemplo, HTTP POST e PUT, trata-se do tipo de contedo dos dados. O comprimento do contedo conforme indicado pelo cliente.

REMOTE_ADDR AUTH_TYPE

REMOTE_USER AUTH_USER

REMOTE_IDENT

CONTENT_TYPE

CONTENT_LENGTH

A seguinte tabela lista as variveis CGI mais comuns criadas pelo navegador e passadas para o servidor:
Varivel HTTP_REFERER HTTP_USER_AGENT Descrio O documento de referncia. Trata-se do documento de vnculo ou de envio dos dados do formulrio. O navegador que o cliente est usando no momento para enviar a solicitao. Formato: software/biblioteca da verso/verso. A hora em que a pgina foi modificada pela ltima vez. A varivel enviada no momento em que o navegador desejar, normalmente em resposta ao servidor que enviou o cabealho HTTP LAST_MODIFIED. Ela pode ser usada para aproveitar o cache do navegador.

HTTP_IF_MODIFIED_SINCE

Colocar em cache fontes de contedo


Voc pode colocar em cache ou armazenar fontes de contedo dinmico em uma Design Note. Isso permite trabalhar em um site mesmo que voc no tenha acesso ao banco de dados ou ao servidor de aplicativo que armazena as fontes de contedo dinmico. A colocao em cache tambm pode agilizar o desenvolvimento com a eliminao de acessos repetidos em uma rede ao banco de dados e ao servidor de aplicativo.
Clique no boto de seta no canto superior direito do painel Ligaes e escolha Colocar em cache no menu pop-up.

Caso faa alteraes em uma das fontes de contedo, voc pode atualizar o cache clicando no boto Atualizar (o cone de seta circular) no canto superior direito do painel Ligaes. (Expanda o painel caso voc no veja o boto.)

Alterar ou excluir fontes de contedo


Voc pode alterar ou excluir qualquer fonte de contedo dinmico existente ou seja, qualquer fonte de contedo listada no painel Ligaes. A alterao ou a excluso de uma fonte de contedo no painel Ligaes no altera ou exclui nenhuma ocorrncia do contedo na pgina. Isso apenas o altera ou exclui como uma possvel fonte de contedo da pgina.

Alterar uma fonte de contedo no painel Ligaes


1 No painel Ligaes (Janela > Ligaes), clique duas vezes no nome da fonte de contedo que voc deseja editar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 577


Como tornar pginas dinmicas

2 Faa suas alteraes na caixa de dilogo exibida. 3 Caso esteja satisfeito com o trabalho, clique em OK.

Excluir uma fonte de contedo do painel Ligaes


1 No painel Ligaes (Janela > Ligaes), selecione a fonte de contedo na lista. 2 Clique no boto de subtrao (-).

Copiar um conjunto de registros de uma pgina para outra


Voc pode copiar um conjunto de registros de uma pgina para outra dentro de um site definido.
1 Selecione o conjunto de registros no painel Ligaes ou no painel Comportamentos de servidor. 2 Clique com o boto direito do mouse no conjunto de registros e selecione Copiar no menu pop-up. 3 Abra a pgina para a qual voc deseja copiar o conjunto de registros. 4 Clique com o boto direito do mouse no painel Ligaes ou na barra de ferramentas Comportamentos de servidor

e selecione Colar no menu pop-up.

Mais tpicos da Ajuda


Sobre as fontes de contedo dinmico na pgina 556 Alterar ou excluir fontes de contedo na pgina 576

Adio de contedo dinmico a pginas


Sobre a adio de contedo dinmico
Depois de definir uma ou mais fontes de contedo dinmico, voc pode us-las para adicionar contedo dinmico pgina. As fontes de contedo podem incluir uma coluna de um conjunto de registro, um valor enviado por um formulrio em HTML, o valor contido em um objeto de servidor ou outros dados. No Dreamweaver, voc pode colocar contedo dinmico em praticamente qualquer lugar de uma pgina da Web ou cdigo-fonte HTML. Voc pode colocar contedo dinmico no ponto de insero, substituir uma seqncia de caracteres de texto ou inseri-lo como um atributo HTML. Por exemplo, o contedo dinmico pode definir o atributo src de uma imagem ou o atributo value de um campo de formulrio. Voc pode adicionar contedo dinmico a uma pgina selecionando uma fonte de contedo no painel Ligaes. O Dreamweaver insere um script do servidor no cdigo da pgina que instrui o servidor a transferir os dados da fonte de contedo para o cdigo HTML da pgina quando esta solicitada pelo navegador. Normalmente, h mais de uma forma de tornar dinmico um elemento de pgina. Por exemplo, para tornar uma imagem dinmica voc pode usar o painel Ligaes, o Inspetor de propriedades ou o comando Imagem do menu Inserir. Por padro, uma pgina em HTML pode exibir apenas um registro por vez. Para exibir os demais registros do conjunto de registros, voc pode adicionar um link para percorr-los individualmente ou pode criar uma regio repetitiva a fim de exibir mais de um registro em uma nica pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 578


Como tornar pginas dinmicas

Mais tpicos da Ajuda


Definio de origens de contedo dinmico na pgina 563 Criar uma barra de navegao do conjunto de registros na pgina 584 Exibir vrios resultados do conjunto de registros na pgina 587 Aplicao de elementos tipogrficos e de layout de pgina a dados dinmicos na pgina 584 Usar formatos de dados predefinidos na pgina 591

Sobre o texto dinmico


O texto dinmico adota qualquer formatao aplicada ao texto existente ou ao ponto de insero. Por exemplo, caso um estilo de folhas de estilos em cascata (CSS) afete o texto selecionado, o contedo dinmico que o substitui tambm afetado pelo estilo. Voc pode adicionar ou alterar o formato de texto do contedo dinmico usando qualquer uma das ferramentas de formatao de texto do Dreamweaver. Voc tambm pode aplicar um formato de dados ao texto dinmico. Por exemplo, caso os dados consistam em dados, voc pode especificar um determinado formato de data como, por exemplo, 04/17/00 para visitantes norte-americanos ou 17/04/00 para visitantes canadenses.

Tornar texto dinmico


Voc pode substituir o texto existente pelo texto dinmico ou colocar texto dinmico em um determinado ponto de insero da pgina.

Mais tpicos da Ajuda


Sobre conjuntos de registros na pgina 556 Usar formatos de dados predefinidos na pgina 591

Adicionar texto dinmico


1 Na Visualizao de design, selecione o texto na pgina ou clique onde voc deseja adicionar texto dinmico. 2 No painel Ligaes (Janela > Ligaes), selecione uma fonte de contedo na lista. Caso voc selecione um conjunto

de registros, especifique a coluna que voc deseja no conjunto de registros. A fonte de contedo deve conter texto sem formatao (texto em ASCII). Texto sem formatao inclui HTML. Caso nenhuma fonte de contedo seja exibida na lista ou caso as fontes de contedo disponveis no atendam s suas necessidades, clique no boto de adio (+) para definir uma nova.
3 (Opcional) Selecione um formato de dados para o texto. 4 Clique em Inserir ou arraste a fonte de contedo para a pgina.

Um alocador de espao de contedo dinmico aparece. (Caso voc tenha selecionado o texto na pgina, o alocador de espao substitui a seleo do texto.) O alocador de espao do contedo do conjunto de registros usa a sintaxe {RecordsetName.ColumnName}, em que Recordset o nome do conjunto de registros e ColumnName o nome da coluna que voc escolheu no conjunto. s vezes, o comprimento dos alocadores de espao para texto dinmico distorce o layout da pgina na janela Documento. Voc pode resolver o problema usando chaves vazias como alocadores de espao, como descrito no prximo tpico.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 579


Como tornar pginas dinmicas

Exibir alocadores de espao para texto dinmico


1 Selecione Editar > Preferncias > Elementos invisveis (Windows) ou Dreamweaver > Preferences > Invisible

Elements (Macintosh).
2 No menu pop-up Mostrar texto dinmico como, selecione { } e clique em OK.

Tornar as imagens dinmicas


Voc pode tornar dinmicas as imagens na sua pgina. Por exemplo, suponhamos que voc crie uma pgina para exibir itens venda em um leilo beneficente. Cada pgina incluiria texto descritivo e foto de um item. O layout geral da pgina permaneceria o mesmo para todos os itens, mas a foto (e o texto descritivo) poderia mudar.
1 Com a pgina aberta na Visualizao de design (Exibir > Design), coloque o ponto de insero onde voc deseja

que a imagem seja exibida na pgina.


2 Selecione Inserir > Imagem.

A caixa de dilogo Selecionar origem da imagem exibida.


3 Clique na opo Fontes de dados (Windows) ou no boto Data Source (Macintosh).

exibida uma lista de fontes de contedo.


4 Selecione uma fonte de contedo na lista e clique em OK.

A fonte de contedo deve ser um conjunto de registros que contm os caminhos dos arquivos de imagem. Dependendo da estrutura de arquivo do site, os caminhos podem ser absolutos, relativos ao documento ou raiz. Nota: Atualmente, o Dreamweaver no d suporte a imagens binrias armazenadas em um banco de dados. Caso nenhum registro seja exibido na lista ou caso os conjuntos de registros disponveis no atendam s suas necessidades, defina um novo conjunto de registros.

Mais tpicos da Ajuda


Definir um conjunto de registros sem escrever em SQL na pgina 563

Tornar os atributos de HTML dinmicos


Voc pode alterar dinamicamente a aparncia de uma pgina ligando os atributos de HTML a dados. Por exemplo, voc pode alterar a imagem do plano de fundo de uma tabela ligando o atributo background da tabela a um campo em um conjunto de registros. Voc pode ligar atributos HTML usando o painel Ligaes ou o Inspetor de propriedades.

Tornar atributos de HTML dinmicos usando o painel Ligaes


1 Abra o painel Ligaes escolhendo Janela > Ligaes. 2 Verifique se o painel Ligaes lista a fonte de dados que voc deseja usar.

A fonte de contedo deve conter dados apropriados ao atributo de HTML que voc deseja ligar. Caso nenhuma fonte de contedo seja exibida na lista ou caso as fontes de contedo disponveis no atendam s suas necessidades, clique no boto de adio (+) para definir uma nova fonte de dados.
3 Na Visualizao de design, selecione um objeto HTML.

Por exemplo, para selecionar uma tabela em HTML, clique dentro dela e, depois, clique na tag <table> no seletor de tags na parte inferior da janela Documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 580


Como tornar pginas dinmicas

4 No painel Ligaes, selecione uma fonte de contedo na lista. 5 Na caixa Ligar a, selecione um atributo de HTML no menu pop-up. 6 Clique em Ligar.

Na prxima vez em que a pgina for executada no servidor de aplicativo, o valor da fonte de dados ser vinculado ao atributo de HTML.

Tornar atributos de HTML dinmicos usando o Inspetor de propriedades


1 Na Visualizao de design, selecione um objeto HTML e abra o Inspetor de propriedades (Janela > Propriedades).

Por exemplo, para selecionar uma tabela em HTML, clique dentro dela e, depois, clique na tag <table> no seletor de tags na parte inferior da janela Documento.
2 Como voc liga uma fonte de contedo dinmico ao atributo de HTML depende de onde ela est localizada.

Caso o atributo que voc deseja ligar tenha um cone de pasta prximo a ele no Inspetor de propriedades, clique no
cone de pasta para abrir uma caixa de dilogo de seleo do arquivo e, em seguida, clique na opo Fontes de dados para exibir uma lista das fontes de dados.

Caso o atributo que voc deseja ligar no tenha um cone de pasta prximo a ele, clique na aba Lista (a aba mais
abaixo das duas) esquerda do inspetor. A visualizao Lista do Inspetor de propriedades exibida.

Caso o atributo que voc deseja ligar no esteja listado na visualizao Lista, clique no boto de adio (+) e, em
seguida, digite o nome do atributo ou clique no boto de seta pequeno e selecione o atributo no menu pop-up.
3 Para tornar o valor do atributo dinmico, clique no atributo e, em seguida, clique no cone do raio ou no cone da

pasta ao final da linha do atributo. Caso voc tenha clicado no cone do raio, uma lista de fontes de dados exibida. Caso tenha clicado no cone da pasta, uma caixa de dilogo para seleo de arquivo exibida. Selecione a opo Fontes de dados para exibir uma lista das fontes de contedo.
4 Selecione uma fonte de contedo na lista de fontes de contedo e clique em OK.

A fonte de contedo deve manter dados apropriados ao atributo de HTML que voc deseja ligar. Caso nenhuma fonte de contedo seja exibida na lista ou caso as fontes de contedo disponveis no atendam s suas necessidades, defina uma nova. Na prxima vez em que a pgina for executada no servidor de aplicativo, o valor da fonte de dados ser vinculado ao atributo de HTML.

Tornar ActiveX, Flash e outros parmetros de objeto dinmicos


Voc pode tornar os parmetros de applets Java e os plug-ins dinmicos, bem como os parmetros dos objetos de ActiveX, Flash, Shockwave, Director e Generator. Antes de comear, verifique se os campos do conjunto de registros mantm dados apropriados aos parmetros de objeto que voc deseja ligar.
1 Na Visualizao de design, selecione um objeto da pgina e abra o Inspetor de propriedades (Janela >

Propriedades).
2 Clique no boto Parmetros. 3 Caso o parmetro no seja exibido na lista, clique no boto de adio (+) e digite um nome de parmetro na coluna

Parmetro.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 581


Como tornar pginas dinmicas

4 Clique na coluna Valor do parmetro e, depois, clique no cone do raio para especificar um valor dinmico.

exibida uma lista de fontes de dados.


5 Selecione uma fonte de dados na lista e clique em OK.

A fonte de dados deve manter dados apropriados ao parmetro de objeto que voc deseja ligar. Caso nenhuma fonte de dados seja exibida na lista ou caso as fontes de dados disponveis no atendam s suas necessidades, defina uma nova.

Mais tpicos da Ajuda


Definio de origens de contedo dinmico na pgina 563

Alterao do contedo dinmico


Sobre o contedo dinmico
Voc pode alterar o contedo dinmico da pgina editando o comportamento de servidor que fornece o contedo. Por exemplo, voc pode editar um comportamento de servidor do conjunto de registros para fornecer mais registros pgina. O contedo dinmico de uma pgina listado no painel Comportamentos de servidor. Por exemplo, caso voc adicione um conjunto de registros pgina, o painel Comportamentos de servidor listado da seguinte forma:
Recordset(myRecordset)

Caso voc adicione outro conjunto de registros pgina, o painel Comportamentos de servidor lista ambos os conjuntos de registros da seguinte forma:
Recordset(mySecondRecordset)Recordset(myRecordset)

Editar contedo dinmico


1 Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor). 2 Clique no boto de adio (+) para exibir os comportamentos de servidor e clique duas vezes no comportamento

de servidor do painel. A caixa de dilogo que voc usou para definir a fonte de dados original exibida.
3 Faa as alteraes na caixa de dilogo e clique em OK.

Excluir contedo dinmico


Depois de adicionar contedo dinmico a uma pgina, o exclua de uma das seguintes formas:

Selecione o contedo dinmico na pgina e pressione Excluir. Selecione o contedo dinmico no painel Comportamentos de servidor e clique no boto de subtrao (-).
Nota: Essa operao remove o script do servidor na pgina que recupera o contedo dinmico do banco de dados. Ela no exclui os dados do banco de dados.

Testar o contedo dinmico


Voc pode visualizar e editar contedo dinmico utilizando a Visualizao dinmica.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 582


Como tornar pginas dinmicas

Enquanto o contedo dinmico exibido, voc pode realizar as seguintes tarefas:

Ajustar o layout da pgina usando as ferramentas de design da pgina Adicionar, editar ou excluir contedo dinmico Adicionar, editar ou excluir comportamentos de servidor
1 Clique no boto Visualizao dinmica para exibir o contedo dinmico 2 Faa as alteraes necessrias na pgina. preciso alternar entre Visualizao dinmica e de design ou Visualizao

de cdigo para fazer as alteraes e ver como elas foram efetivadas.

Mais tpicos da Ajuda


Parmetros de formulrio em HTML na pgina 656 Parmetros de URL na pgina 657 Como funcionam as variveis de sesso na pgina 558

Deixar os usurios do Adobe Contribute editarem contedo dinmico


Quando um usurio do Contribute edita uma pgina com contedo dinmico ou elementos invisveis (como, por exemplo, scripts e comentrios), o Contribute exibe o contedo dinmico e os elementos invisveis como marcadores amarelos. Por padro, os usurios do Contribute no podem selecionar ou excluir esses marcadores. Caso queira que os usurios do Contribute possam selecionar e excluir contedo dinmico e outros elementos invisveis de uma pgina, voc pode alterar as configuraes do grupo de permisso para permitir isso. Normalmente, os usurios do Contribute jamais podem editar contedo dinmico, mesmo quando voc permite que eles o selecionem. Nota: Usando algumas tecnologias de servidor, voc pode exibir texto esttico usando uma tag ou uma funo do servidor. Para permitir que os usurios do Contribute editem o texto esttico em uma pgina dinmica que usa uma dessas tecnologias de servidor, coloque o texto fora das tags de servidor. Para obter mais informaes, consulte Administrao do Adobe Contribute.
1 Selecione Site > Administrar o site do Contribute. 2 Caso determinadas opes obrigatrias para a compatibilidade com o Contribute no estejam ativadas, uma caixa

de dilogo exibida perguntando se voc deseja ativar essas opes. Clique em OK para ativar essas opes e a compatibilidade com o Contribute.
3 Se solicitado, insira a senha de administrador e clique em OK.

A caixa de dilogo Administrar site exibida.


4 Na categoria Usurios e funes, selecione uma funo e clique no boto Editar configuraes de funo. 5 Selecione a categoria Edio e desmarque a opo para proteger scripts e formulrios. 6 Clique em OK para fechar a caixa de dilogo Editar configuraes. 7 Clique em Fechar para fechar a caixa de dilogo Administrar site.

Mais tpicos da Ajuda


Gerenciamento de sites do Contribute com o Dreamweaver na pgina 51 Criar um modelo para um site do Contribute na pgina 399

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 583


Como tornar pginas dinmicas

Modificar conjuntos de registros com o Inspetor de propriedades


Use o Inspetor de propriedades para modificar o conjunto de registros selecionado. As opes disponveis variam de acordo com o modelo do servidor.
1 Abra o Inspetor de propriedades (Janela > Propriedades) e, em seguida, selecione o conjunto de registros no painel

Comportamentos de servidor (Janela > Comportamento de servidor).


2 Edite todas as opes. Quando voc seleciona uma nova opo no inspetor, o Dreamweaver atualiza a pgina.

Mais tpicos da Ajuda


Editar contedo dinmico na pgina 581

Exibio de registros de banco de dados


Sobre os registros do banco de dados
A exibio de registros do banco de dados envolve a recuperao de informaes armazenadas em um banco de dados ou em outra fonte de contedo, alm do processamento dessas informaes em uma pgina da Web. O Dreamweaver fornece vrios mtodos de exibio de contedo dinmico, alm de muitos comportamentos de servidor incorporados que permitem aprimorar a apresentao de contedo dinmico e possibilitam aos usurios percorrer e navegar nas informaes retornadas de um banco de dados com mais facilidade. Os bancos de dados e as demais fontes de contedo dinmico oferecem mais eficincia e flexibilidade na pesquisa, na classificao e na visualizao de grandes armazenamentos de informaes. O uso de um banco de dados para armazenar contedo de sites se justifica quando voc precisa armazenar grandes quantidades de informaes e, em seguida, recuperar e exibir essas informaes de maneira significativa. O Dreamweaver oferece vrias ferramentas e comportamentos predefinidos para ajud-lo a recuperar e a exibir as informaes armazenadas em um banco de dados de maneira eficiente.

Comportamentos de servidor e elementos de formatao


O Dreamweaver fornece os seguintes comportamentos de servidor e elementos de formatao para permitir a exibio de dados dinmicos:
Formatos Permitem que voc aplique tipos diferentes de valores numricos, monetrios, de data/hora e porcentagem a textos dinmicos.

Por exemplo, caso o preo de um item em um conjunto de registros seja 10.989, voc pode exibir o preo na pgina como US$ 10.99 selecionando o formato Moeda - 2 casas decimais do Dreamweaver. Esse formato exibe um nmero usando duas casas decimais. Caso o nmero tenha mais de duas casas decimais, o formato de dados arredonda o nmero para o decimal mais prximo. Caso o nmero no tenha casas decimais, o formato de dados adiciona uma casa decimal e dois zeros.
Regio repetitiva Comportamentos de servidor permitem exibir vrios itens retornados de uma consulta de banco de

dados e especificar o nmero de registros a ser exibido por pgina.


Navegao do conjunto de registros Comportamentos de servidor permitem inserir elementos de navegao que

permitem aos usurios passar ao grupo de conjuntos de registros anteriores ou posteriores retornados pelo conjunto de registros. Por exemplo, caso opte por exibir 10 registros por pgina usando o objeto de servidor Regio repetitiva e o conjunto retorne 40 registros, voc pode navegar em 10 registros por vez.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 584


Como tornar pginas dinmicas

Barra de status Conjunto de registros Comportamentos de servidor permitem incluir um contador que mostra aos

usurios onde eles esto dentro de um conjunto de registros em relao ao nmero total de registros retornados.
Mostrar regio Comportamentos de servidor permitem optar por mostrar ou ocultar itens na pgina com base na

relevncia dos registros exibidos no momento. Por exemplo, caso um usurio tenha navegado at o ltimo registro de um conjunto, voc pode ocultar o link Prximo e exibir apenas o link Anterior.

Aplicao de elementos tipogrficos e de layout de pgina a dados dinmicos


Um recurso eficiente do Dreamweaver a possibilidade de apresentar dados dinmicos dentro de uma pgina estruturada e de aplicar formatao tipogrfica usando HTML e CSS. Para aplicar formatos a dados dinmicos no Dreamweaver, formate as tabelas e os alocadores de espao para os dados dinmicos usando as ferramentas de formatao do Dreamweaver. Quando so inseridos usando a fonte de dados, os dados adotam automaticamente a formatao da fonte, do pargrafo e da tabela especificada por voc.

Mais tpicos da Ajuda


Apresentao do contedo em tabelas na pgina 175 Adio e formatao do texto na pgina 217

Navegao em resultados do conjunto de recursos do banco de dados


Os links para navegao no conjunto de registros permitem aos usurios mover de um registro para o prximo ou de um conjunto de registros para o prximo. Por exemplo, depois de criar uma pgina para exibir cinco registros por vez, voc talvez queira adicionar links como, por exemplo, Prximo ou Anterior que permitem aos usurios exibir os cinco registros prximos ou anteriores. Voc pode criar quatro tipos de links de navegao para percorrer um conjunto de registros: Primeiro, Anterior, Prximo e ltimo. Uma nica pgina pode conter qualquer nmero desses links, desde que todos funcionem em um nico conjunto de registros. Voc no pode adicionar links para percorrer um segundo conjunto de registros na mesma pgina. Os links para navegao no conjunto de registros exigem os seguintes elementos dinmicos:

Um conjunto de registros para navegao Contedo dinmico na pgina para exibir o(s) registro(s) Texto ou imagens na pgina para funcionar como uma barra de navegao clicvel Um conjunto Mover para registro dos comportamentos de servidor para navegar no conjunto de registros
Voc pode adicionar os dois ltimos elementos usando o objeto de servidor Barras para navegao em registros ou adicion-los separadamente usando as ferramentas de design e o painel Comportamentos de servidor.

Criar uma barra de navegao do conjunto de registros


Voc pode criar uma barra de navegao do conjunto de registros em uma nica operao usando o comportamento de servidor Barra de navegao do conjunto de registros. O objeto de servidor adiciona os seguintes blocos de criao pgina:

Uma tabela em HTML com links de texto ou imagem Um conjunto de comportamentos de servidor Mover para Um conjunto de comportamentos de servidor Mostrar regio

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 585


Como tornar pginas dinmicas

A verso em texto de Barra de navegao do conjunto de registros semelhante a:

A verso em imagem de Barra de navegao do conjunto de registros semelhante a:

Antes de colocar a barra de navegao na pgina, verifique se a pgina contm um conjunto de registros para navegao e um layout de pgina no qual exibir os registros. Depois de colocar a barra de navegao na pgina, voc pode usar as ferramentas de design para personalizar a barra. Voc tambm pode editar os comportamentos de servidor Mover para e Mostrar regio clicando duas vezes neles no painel Comportamentos de servidor. O Dreamweaver cria uma tabela que contm links de texto ou de imagem que permitem ao usurio navegar no conjunto de registros selecionado quando clicado. Quando o primeiro registro do conjunto exibido, os links Primeiro e Anterior ou as imagens permanecem ocultos. Quando o ltimo registro do conjunto exibido, os links Prximo e ltimo ou as imagens permanecem ocultos. Voc pode personalizar o layout da barra de navegao usando as ferramentas de design e o painel Comportamentos de servidor.
1 Na Visualizao de design, coloque o ponto de insero no local da pgina onde voc deseja que a barra de

navegao seja exibida.


2 Exiba a caixa de dilogo Barra de navegao do conjunto de registros (Inserir > Objetos de dados > Paginao do

conjunto de registros > Barra de navegao do conjunto de registros).


3 Selecione o conjunto de registros em que voc deseja navegar no menu pop-up Conjunto de registros. 4 Na seo Exibir usando, selecione o formato para exibir os links de navegao na pgina e clique em OK.
Texto Coloca links de texto na pgina. Imagens Inclui imagens grficas como links. O Dreamweaver usa arquivos de imagem prprios. Voc pode substituir

essas imagens por arquivos de imagem prprios depois de colocar a barra na pgina.

Barras de navegao do conjunto de registros personalizadas


Voc pode criar sua prpria barra de navegao do conjunto de registros que usa layout e estilos de formatao mais complexos do que os da tabela simples criada pelo objeto de servidor Barra de navegao do conjunto de registros. Para criar sua prpria barra de navegao do conjunto de registros, voc deve:

Criar links de navegao em texto ou imagens Colocar os links na pgina usando a Visualizao de design Atribuir comportamentos de servidor individuais a cada link de navegao
Esta seo descreve como atribuir comportamentos de servidor individuais aos links de navegao.

Criar e atribuir comportamentos de servidor a um link de navegao


1 Na Visualizao de design, selecione a seqncia de caracteres de texto ou a imagem que voc deseja usar como link

para navegao em registros.


2 Abra o painel Comportamentos do servidor (Janela > Comportamentos do servidor) e clique no boto de adio (+).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 586


Como tornar pginas dinmicas

3 Selecione Paginao do conjunto de registros no menu pop-up e, depois, selecione um comportamento de servidor

apropriado no link dos comportamentos de servidor listados. Caso o conjunto contenha vrios registros, o comportamento de servidor Mover para ltimo registro pode demorar muito para ser executado quando o usurio clica no link.
4 No menu pop-up Conjunto de registros, selecione o conjunto que contm os registros e clique em OK.

O comportamento de servidor atribudo ao link de navegao.

Definir as opes da caixa de dilogo Mover para (comportamento de servidor)


Adicione links que permitam ao usurio navegar nos registros de um conjunto.
1 Caso voc no tenha selecionado nada na pgina, selecione um link no menu pop-up. 2 Selecione o conjunto que contm os registros a serem percorridos e clique em OK.

Nota: Caso o conjunto contenha vrios registros, o comportamento de servidor Mover para ltimo registro pode demorar muito para ser executado quando o usurio clica no link.

Tarefas de design da barra de navegao


Ao criar uma barra de navegao personalizada, comece criando sua representao visual usando as ferramentas de design de pgina do Dreamweaver. Voc no precisa criar um link para a seqncia de caracteres de texto ou a imagem; o Dreamweaver cria um para voc. A pgina para a qual a barra de navegao foi criada deve conter um conjunto de registros para navegar. Uma barra de navegao do conjunto de registros simples pode ser semelhante a esta com botes de link criados fora das imagens ou outros elementos de contedo:

Depois de adicionar um conjunto de registros a uma pgina e criar uma barra de navegao, voc deve aplicar comportamentos de servidor a cada elemento de navegao. Por exemplo, uma barra de navegao do conjunto de registros tpica contm representaes dos seguintes links correspondentes ao comportamento apropriado:
Link de navegao Ir para primeira pgina Ir para pgina anterior Ir para prxima pgina Ir para ltima pgina Comportamento de servidor Mover para primeira pgina Mover para pgina anterior Mover para prxima pgina Mover para ltima pgina

Mais tpicos da Ajuda


Sobre conjuntos de registros na pgina 556

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 587


Como tornar pginas dinmicas

Exibir e ocultar regies com base nos resultados do conjunto de registros


Voc tambm pode especificar que uma regio seja exibida ou ocultada com base no preenchimento do conjunto de registros. Caso um conjunto de registros esteja vazio (por exemplo, nenhum registro foi encontrado correspondente consulta), voc pode exibir uma mensagem informando o usurio de que nenhum registro retornou. Isso especialmente til quando se criam pginas de pesquisa que dependam dos termos de pesquisa de entrada para executar consultas. Da mesma forma, voc pode exibir uma mensagem de erro caso haja um problema na conexo com um banco de dados ou caso o nome de usurio e a senha de um usurio no correspondam aos reconhecidos pelo servidor. Os comportamentos de servidor Mostrar regio so:

Mostrar se conjunto de registros estiver vazio Mostrar se conjunto de registros no estiver vazio Mostrar se for primeira pgina Mostrar se no for primeira pgina Mostrar se for ltima pgina Mostrar se no for ltima pgina
1 Na Visualizao de design, selecione a regio na pgina a ser mostrada ou ocultada. 2 No painel Comportamentos do servidor (Janela > Comportamentos do servidor), clique no boto de adio (+). 3 Selecione Mostrar regio no menu pop-up, selecione um dos comportamentos de servidor listados e clique em OK.

Mais tpicos da Ajuda


Sobre os registros do banco de dados na pgina 583 Criar uma tabela dinmica na pgina 588

Exibir vrios resultados do conjunto de registros


O comportamento de servidor Regio repetitiva permite exibir vrios registros de um conjunto dentro de uma pgina. Qualquer seleo de dados dinmicos pode ser transformada em uma regio repetitiva. No entanto, as regies mais comuns so tabelas, linhas de tabelas ou uma srie de linhas de tabelas.
1 Na Visualizao de design, selecione uma regio que apresente contedo dinmico.

A seleo pode ser qualquer item, incluindo tabelas, linhas de tabelas ou mesmo um pargrafo do texto. Para selecionar uma regio na pgina com preciso, voc pode usar o seletor de tags no canto esquerdo da janela do documento. Por exemplo, caso a regio seja uma linha de tabela, clique dentro da linha na pgina e, depois, clique na tag <tr> direita no seletor para selecionar a linha da tabela.
2 Selecione Janela > Comportamentos de servidor para exibir o painel Comportamentos de servidor. 3 Clique no boto de adio (+) e selecione Regio repetitiva. 4 Selecione o nome do conjunto de registros a ser usado no menu pop-up. 5 Selecione o nmero de registros a serem exibidos por pgina e clique em OK.

Na janela Documento, um fino contorno cinza com abas exibido em torno da regio repetitiva.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 588


Como tornar pginas dinmicas

Mais tpicos da Ajuda


Sobre os registros do banco de dados na pgina 583 Editar contedo dinmico na pgina 581

Modificar regies repetitivas no Inspetor de propriedades


Modifique a regio repetitiva selecionada alterando qualquer uma das seguintes opes:

O nome da regio repetitiva. O conjunto que fornece os registros regio repetitiva. O nmero de registros exibidos
Quando voc seleciona uma nova opo, o Dreamweaver atualiza a pgina.

Criar e adicionar uma regio repetitiva para exibir vrios registros em uma pgina
1 Especifique o conjunto de registros que contm os dados a serem exibidos na regio repetitiva. 2 Especifique o nmero de registros a serem exibidos por pgina e clique em OK.

Caso voc especifique um nmero limitado de registros por pgina e o nmero de registros solicitados seja excedido, adicione links para navegao em registro para permitir aos usurios exibir os demais registros.

Criar uma tabela dinmica


O seguinte exemplo ilustra como o comportamento Regio repetitiva aplicado linha de uma tabela e especifica que so exibidos nove registros por pgina. A prpria linha exibe quatro registros diferentes: cidade, estado, endereo e CEP.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 589


Como tornar pginas dinmicas

Para criar uma tabela como, por exemplo, a do exemplo anterior, voc deve criar uma tabela que tenha contedo dinmico e aplicar o comportamento de servidor Regio repetitiva linha da tabela com o contedo dinmico. Quando a pgina processada pelo servidor de aplicativo, a linha repetida o nmero de vezes especificado no objeto de servidor Regio repetitiva com um registro diferente inserido em cada linha nova.
1 Escolha uma destas opes para inserir uma tabela dinmica:

Selecione Inserir > Objetos de dados > Dados dinmicos > Tabela dinmica para exibir a caixa de dilogo Tabela
dinmica.

Na categoria Dados do painel Inserir, clique no boto Dados dinmicos e selecione o cone Tabela dinmica no
menu pop-up.
2 Selecione o conjunto de registros no menu pop-up Conjunto de registros. 3 Selecione o nmero de registros a serem exibidos por pgina. 4 (Opcional) Insira os valores da borda da tabela, do preenchimento da clula e do espaamento da clula.

A caixa de dilogo Tabela dinmica mantm os valores que voc insere para bordas da tabela, preenchimento da clula e espaamento da clula. Nota: Caso voc esteja trabalhando em um projeto que exija vrias tabelas dinmicas com a mesma aparncia, insira os valores de layout da tabela, o que simplifica ainda mais o desenvolvimento da pgina. Voc pode ajustar esses valores depois de inserir a tabela usando o Inspetor de propriedades da tabela.
5 Clique em OK.

Uma tabela e os alocadores de espao do contedo dinmico definido no conjunto de registros associado so inseridos na pgina.

Nesse exemplo, o conjunto de registros contm quatro colunas: AUTHORID, FIRSTNAME, LASTNAME e BIO. A linha de cabealho da tabela preenchida com os nomes de cada coluna. Voc pode editar os cabealhos usando qualquer texto descritivo ou substitu-los por imagens representativas.

Criar contadores de registros


Os contadores de registros do aos usurios um ponto de referncia ao navegarem em um conjunto de registros. Normalmente, eles exibem o nmero total de registros retornados e os registros visualizados no momento. Por exemplo, se um conjunto retornasse 40 registros individuais e 8 fossem exibidos por pgina, o contador de registros na primeira pgina indicaria Exibindo registros 1-8 de 40. Para criar um contador de registros em uma pgina, voc deve criar um conjunto de registros para a pgina, um layout de pgina apropriado ao contedo dinmico e, em seguida, uma barra de navegao do conjunto de registros.

Mais tpicos da Ajuda


Sobre conjuntos de registros na pgina 556 Criar uma barra de navegao do conjunto de registros na pgina 584

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 590


Como tornar pginas dinmicas

Exibir vrios resultados do conjunto de registros na pgina 587 Criar uma tabela dinmica na pgina 588

Criar contadores de registros simples


Os contadores de registros permitem aos usurios saber onde esto em um determinado conjunto de registros em relao ao nmero total de registros retornados. Por essa razo, os contadores de registros so um comportamento til capaz de agregar usabilidade de uma pgina da Web de maneira significativa. Crie um contador de registros simples usando o objeto de servidor Status de navegao do conjunto de registros. Esse objeto de servidor cria uma entrada de texto na pgina para exibir o status de registro atual. Voc pode personalizar o contador de registros usando as ferramentas de design de pgina do Dreamweaver.
1 Coloque o ponto de insero onde voc deseja inserir um contador de registros. 2 Selecione Inserir > Objetos de dados > Exibir contagem de registros > Status de navegao do conjunto de registros

e, depois, selecione o conjunto de registros no menu pop-up Conjunto de registros e, em seguida, clique em OK. O objeto de servidor Status de navegao do conjunto de registros insere um contador de registros de texto semelhante ao seguinte exemplo:

Quando exibido na Visualizao dinmica, o contador exibido semelhante ao seguinte exemplo:

Criar e adicionar o contador de registros na pgina


Na caixa de dilogo Status de navegao do conjunto de registros, selecione o conjunto de registros a ser controlado

e clique em OK.

Criar contadores de registros personalizados


Voc usa comportamentos de contagem de registros para criar contadores de registros personalizados. A criao de um contador de registros personalizado permite criar um contador de registros que vai alm da tabela simples, de linha nica, inserida pelo objeto de servidor Status de navegao do conjunto de registros. Voc pode organizar elementos de design de vrias formas criativas e aplicar um comportamento de servidor apropriado a cada elemento. Os comportamentos de servidor Contagem de registros so:

Exibir nmero de registro inicial Exibir nmero de registro final Exibir total de registros
Para criar um contador de registros personalizado em uma pgina, voc deve criar inicialmente um conjunto de registros para a pgina, um layout de pgina apropriado ao contedo dinmico e, em seguida, uma barra de navegao do conjunto de registros. Este exemplo cria um contador de registros semelhante ao do exemplo em Contadores de registros simples. Nesse exemplo, o texto na fonte sans-serif representa os alocadores de espao da contagem de registros que sero inseridos na pgina. O contador de registros do exemplo exibido da seguinte forma: Exibindo registros de StartRow a EndRow de RecordSet.RecordCount.
1 Na Visualizao de design, digite o texto do contador na pgina. O texto pode ser o que voc quiser, por exemplo:
Displaying records thru of .

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 591


Como tornar pginas dinmicas

2 Coloque o ponto de insero ao final da seqncia de caracteres de texto. 3 Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor). 4 Clique no boto de adio (+) no canto superior esquerdo e, depois, clique em Exibir contagem de registros. Nesse

submenu, selecione Exibir total de registros. O comportamento Exibir total de registros inserido na pgina, e um alocador de espao inserido onde estava o ponto de insero. A seqncia de caracteres de texto exibida da seguinte forma:
Displaying records thru of {Recordset1.RecordCount}.

5 Coloque o ponto de insero depois da palavra records e selecione Exibir nmero de registro inicial no painel

Comportamentos de servidor > boto de adio (+) > Contagem de registros. A seqncia de caracteres de texto exibida da seguinte forma:
Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.

6 Agora coloque o ponto de insero entre as palavras thru e of e selecione Exibir nmero de registro inicial no

painel Comportamentos de servidor > boto de adio (+) > Contagem de registros. A seqncia de caracteres de texto exibida da seguinte forma:
Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of{Recordset1.RecordCount}.

7 Confirme se o contador est funcionando corretamente exibindo a pgina na Visualizao dinmica; o contador

semelhante ao do seguinte exemplo:


Displaying records 1 thru 8 of 40.

Caso a pgina de resultados tenha um link de navegao para se mover para o prximo conjunto de registros, o clique no link atualiza o contador de registros para que ele exiba o seguinte:
Showing records 9 thru 16 of 40.

Usar formatos de dados predefinidos


O Dreamweaver inclui vrios formatos de dados predefinidos que voc pode aplicar a elementos de dados dinmicos. Entre os estilos de formato de dados esto data e hora, moeda e formatos numrico e percentuais.

Aplicar formatos de dados a contedo dinmico


1 Na janela Documento, selecione o alocador de espao do contedo dinmico. 2 Selecione Janela > Ligaes para exibir o painel Ligaes. 3 Clique no boto de seta para baixo na coluna Formato.

Caso a seta para baixo no esteja visvel, expanda o painel.


4 No menu pop-up Formato, selecione a categoria do formato de dados que voc deseja.

Verifique se o formato de dados apropriado ao tipo de dado que voc est formatando. Por exemplo, os formatos Moeda s funcionam caso os dados dinmicos consistam em dados numricos. Observe que voc no pode aplicar mais de um formato aos mesmos dados.
5 Verifique se o formato foi aplicado corretamente ao visualizar a pgina na Visualizao dinmica.

Personalizar um formato de dados


1 Abra uma pgina que contenha dados dinmicos na Visualizao de design. 2 Selecione os dados dinmicos cujo formato voc deseja personalizar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 592


Como tornar pginas dinmicas

O item de dados ligado cujo texto dinmico voc selecionou realado no painel Ligaes (Janela > Ligaes). O painel exibe duas colunas para o item selecionado Ligao e Formato. Caso a coluna Formato no esteja visvel, alargue o painel Ligaes para mostr-la.
3 No painel Ligaes, clique na seta para baixo na coluna Formato para expandir o menu pop-up dos formatos de

dados disponveis. Caso a seta para baixo no esteja visvel, alargue ainda mais o painel Ligaes.
4 Selecione Editar lista de formatos no menu pop-up. 5 Complete a caixa de dilogo e clique em OK. a Selecione o formato na lista e clique em Editar. b Altere qualquer um dos seguintes parmetros nas caixas Moeda, Nmero ou Porcentagem e clique em OK.

O nmero de dgitos a serem exibidos aps a casa decimal Se um zero deve ser colocado antes das fraes Se os parnteses ou um sinal de subtrao devem ser usados em valores negativos Se os dgitos devem ser agrupados
c Para excluir um formato de dados, clique no formato na lista e clique no boto de subtrao (-).

Criar um formato de dados (apenas ASP)


1 Abra uma pgina que contenha dados dinmicos na Visualizao de design. 2 Selecione os dados dinmicos para os quais voc deseja criar um formato personalizado. 3 Selecione Janela > Ligaes para exibir o painel Ligaes e clique na seta para baixo na coluna Formato. Caso a seta

para baixo no esteja visvel, expanda o painel.


4 Selecione Editar lista de formatos no menu pop-up. 5 Clique no boto de adio (+) e selecione um tipo de formato. 6 Defina o formato e clique em OK. 7 Digite um nome para o novo formato na coluna Nome e clique em OK.

Nota: Embora o Dreamweaver suporte somente a criao de formatos de dados para pginas em ASP, os usurios do ColdFusion e do PHO podem baixar formatos que outros desenvolvedores criaram ou criar formatos de servidor e postlos no Dreamweaver Exchange. Para obter mais informaes sobre a API Formato de servidor, consulte Extenso do Dreamweaver (Ajuda > Extenso do Dreamweaver > Formatos de servidor).

Visualizao de live data


O recurso Visualizar Live Data est obsoleto no Dreamweaver CS5. Ele foi substitudo por Visualizao dinmica, um recurso mais simplificado. Para exibir live data em Visualizao dinmica, assegure-se de j ter feito o seguinte procedimento:

Definir uma pasta para processar pginas dinmicas (por exemplo, uma pasta raiz em um servidor ColdFusion ou
no computador ou em uma mquina remota). Caso a pgina exiba uma mensagem de erro quando voc ativar a Visualizao dinmica, verifique se o prefixo do URL na caixa de dilogo Definio de sites est correto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 593


Como tornar pginas dinmicas

Copie os arquivos relacionados (se houver) para a pasta. Fornea pgina todos os parmetros que um usurio normalmente forneceria.

Fornecer live data pgina na Visualizao dinmica


1 Abra a caixa de dilogo Configuraes de visualizao dinmica (Exibir > Opes de visualizao dinmica >

Configuraes de solicitao HTTP).


2 Na rea Solicitao de URL, clique no boto de adio (+) e digite um parmetro que a pgina espera. 3 Especifique um nome e um valor de teste para cada parmetro. 4 No menu pop-up Mtodo, selecione o mtodo de formulrio em HTML que a pgina espera: POSTAR ou OBTER. 5 Na rea de texto Script de inicializao, inclua todos os cdigos-fonte que voc deseja inserir na parte superior da

pgina antes da execuo. Os scripts de inicializao consistem em cdigo que define as variveis de sesso.
6 Para salvar as configuraes da pgina atual, selecione Salvar configuraes para este documento e, depois, clique

em OK. Nota: Para salvar as configuraes, voc deve ativar as Design Notes (Arquivo > Design Notes).

Soluo de problemas de live data na Visualizao dinmica


Muitos problemas com a visualizao de dados dinmicos em Visualizao dinmica podem estar ligados a valores no encontrados ou incorretos na caixa de dilogo Definio de sites (Site > Editar sites). Marque a categoria Servidor de teste na caixa de dilogo Definio de sites. A caixa Pasta remota deve especificar uma pasta capaz de processar pginas dinmicas. Eis um exemplo de uma pasta remota apropriada caso o IIS ou o PWS esteja em execuo no disco rgido: C:\Inetpub\wwwroot\myapp\ Verifique se a caixa Prefixo do URL especifica um URL correspondente (mapeada para) pasta remota. Por exemplo, caso o PWS ou o IIS esteja em execuo no computador local, as seguintes pastas remotas tm os seguintes prefixos do URL:
Pasta remota C:\Inetpub\wwwroot\ C:\Inetpub\wwwroot\myapp\ C:\Inetpub\wwwroot\fs\planes Prefixo do URL http://localhost/ http://localhost/myapp/ http://localhost/fs/planes

Mais tpicos da Ajuda


Alternar entre visualizaes na janela Documento na pgina 17 Visualizao de pginas na Visualizao dinmica na pgina 287 Visualizao de pginas dinmicas em um navegador na pgina 552

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 594


Como tornar pginas dinmicas

Adio de comportamentos de servidor personalizados


Sobre os comportamentos de servidor personalizados
O Dreamweaver acompanha um conjunto de comportamentos de servidor incorporados que permite adicionar recursos dinmicos a um site. Voc pode estender a funcionalidade do Dreamweaver criando comportamentos de servidor para atender s suas necessidades de desenvolvimento ou obtendo comportamentos de servidor no site do Dreamweaver Exchange. Antes de criar comportamentos de servidor prprios, voc deve visitar o site do Dreamweaver Exchange para ver se alguma outra parte j criou um comportamento de servidor que fornece a funcionalidade que voc gostaria de adicionar ao site. Em geral, um desenvolvedor de outro fabricante j criou e testou um comportamento de servidor que atender s suas necessidades.

Acessar o Dreamweaver Exchange


1 No Dreamweaver, acesse o Dreamweaver Exchange de uma destas formas:

Selecione Ajuda > Dreamweaver Exchange. Selecione Janela > Comportamentos de servidor, clique no boto de adio (+) e selecione Obter mais
comportamentos de servidor. A pgina da Web do Dreamweaver Exchange aberta no navegador.
2 Faa logon no Exchange usando sua ID Adobe ou, caso ainda no tenha criado uma ID Dreamweaver Exchange

para voc mesmo, siga as instrues para abrir uma conta Adobe.

Instalar um comportamento de servidor ou outra extenso no Dreamweaver


1 Inicie o Gerente de extenso selecionando Comandos > Gerenciar extenses. 2 Selecione Arquivo > Instalar pacote no Gerente de extenso.

Para obter mais informaes, consulte Uso do Gerente de extenso.

Fluxo de trabalho dos comportamentos de servidor personalizados


Caso seja um desenvolvedor proficiente em ColdFusion, JavaScript, VBScript ou PHP, voc pode escrever seus prprios comportamentos de servidor. Entre as etapas para criar um comportamento de servidor esto as seguintes tarefas:

Escreva um ou mais blocos de cdigo que realizem a ao obrigatria. Especifique onde o bloco de cdigo deve ser inserido no cdigo HTML da pgina. Caso o comportamento de servidor exija que um valor seja especificado para um parmetro, crie uma caixa de
dilogo que solicite ao desenvolvedor que est aplicando o comportamento fornecer um valor apropriado.

Teste o comportamento de servidor antes de disponibiliz-lo aos demais.

Mais tpicos da Ajuda


Solicitar um parmetro para o comportamento de servidor na pgina 601 Teste dos comportamentos de servidor na pgina 604

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 595


Como tornar pginas dinmicas

Usar o Criador de comportamentos de servidor


Use o Criador de comportamentos de servidor para adicionar o(s) bloco(s) de cdigo que o comportamento insere em uma pgina.
1 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Novo comportamento de servidor.


2 No menu pop-up Tipo de documento, selecione o tipo de documento para o qual voc est desenvolvendo o

comportamento de servidor.
3 Na caixa Nome, digite um nome para o comportamento de servidor. 4 (Opcional) Para copiar um comportamento de servidor existente a ser adicionado ao comportamento que voc est

criando, selecione a opo Copiar comportamento de servidor existente e, depois, selecione o comportamento de servidor no menu pop-up Comportamento a ser copiado. Clique em OK. A caixa de dilogo Criador de comportamentos de servidor exibida.
5 Para adicionar um novo bloco de cdigo, clique no boto de adio (+), digite um nome para o bloco de cdigo e

clique em OK. O nome que voc digita exibido no Criador de comportamentos de servidor com as tags de script apropriadas visveis na caixa Bloco de cdigo.
6 Na caixa Bloco de cdigo, digite o cdigo de runtime necessrio implementao do comportamento de servidor.

Nota: Ao digitar o cdigo na caixa Bloco de cdigo, voc s pode inserir uma nica tag ou bloco de cdigo para cada bloco de cdigo nomeado (por exemplo, myBehavior_block1, myBehavior_block2, myBehavior_blockn etc.). Caso voc tenha que inserir vrias tags ou blocos de cdigo, crie um bloco de cdigo individual para cada uma. Voc tambm pode copiar e colar cdigo de outras pginas.
7 Coloque o ponto de insero no bloco de cdigo em que voc deseja inserir o parmetro ou selecione uma

seqncia de caracteres a ser substituda por um parmetro.


8 Clique no boto Inserir o parmetro no bloco de cdigo. 9 Digite um nome para o parmetro na caixa Nome do parmetro (por exemplo, Sesso) e clique em OK.

O parmetro inserido no bloco de cdigo no local em que voc colocou o ponto de insero antes da definio do parmetro. Caso voc selecione uma seqncia de caracteres, todas as instncias da seqncia de caracteres selecionada so substitudas por um marcador de parmetro (por exemplo, @@Sesso@@).
10 Selecione uma opo no menu pop-up Inserir cdigo especificando onde incorporar os blocos de cdigo. 11 (Opcional) Para especificar informaes adicionais sobre o comportamento de servidor, clique no boto Avanado. 12 Para criar mais blocos de cdigo, repita as etapas de 5 a 11. 13 Caso o comportamento de servidor exija que os parmetros sejam fornecidos a ele, voc deve criar uma caixa de

dilogo que aceite parmetros da pessoa que aplica o comportamento. Consulte o link abaixo.
14 Depois de realizar as etapas obrigatrias criao do comportamento de servidor, clique em OK.

O painel Comportamentos de servidor lista o comportamento de servidor.


15 Teste o comportamento de servidor e verifique se ele est funcionando corretamente.

Mais tpicos da Ajuda


Repetio dos blocos de cdigo com a diretiva de loop na pgina 599 Diretrizes de codificao na pgina 604

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 596


Como tornar pginas dinmicas

Solicitar um parmetro para o comportamento de servidor na pgina 601 Adio de comportamentos de servidor personalizados na pgina 594

Opes avanadas
Depois que voc especifica o cdigo-fonte e insere o local de cada bloco de cdigo, o comportamento de servidor est totalmente definido. Na maioria dos casos, voc no precisa especificar nenhuma informao adicional. Caso seja um usurio avanado, voc pode definir uma das seguintes opes:
Identificador Especifica se o bloco de cdigo deve ser tratado como um identificador.

Por padro, todos os blocos de cdigo so identificadores. Caso o Dreamweaver localize um bloco de cdigo identificador em qualquer lugar de um documento, ele lista o comportamento no painel Comportamentos de servidor. Use a opo Identificador para especificar se o bloco de cdigo deve ser tratado como um identificador. Pelo menos um dos blocos de cdigo do comportamento de servidor deve ser identificador. Um bloco de cdigo no deve ser um identificador caso uma das seguintes condies se aplique: o mesmo bloco de cdigo usado por outro comportamento de servidor, ou o bloco to simples que pode ocorrer naturalmente na pgina.
Ttulo do comportamento de servidor Especifica o ttulo do comportamento no painel Comportamentos de servidor.

Quando o designer da pgina clicar no boto de adio (+) no painel Comportamentos de servidor, o ttulo do novo comportamento de servidor ser exibido no menu pop-up. Quando um designer aplica uma ocorrncia de um comportamento de servidor a um documento, o comportamento exibido na lista de comportamentos aplicados no painel Comportamentos de servidor. Use a caixa Ttulo do comportamento de servidor para especificar o contedo do menu pop-up de adio (+) e a lista dos comportamentos aplicados. O valor inicial da caixa o nome que voc forneceu na caixa de dilogo Novo comportamento de servidor. medida que os parmetros so definidos, o nome atualizado automaticamente para que os parmetros sejam exibidos entre parnteses depois do nome do comportamento de servidor.
Set Session Variable (@@Name@@, @@Value@@)

Caso o usurio aceite o valor padro, tudo o que estiver antes dos parnteses exibido no menu pop-up de adio (+) (por exemplo, Definir varivel de sesso). O nome mais os parmetros sero exibidos na lista dos comportamentos aplicados por exemplo, Definir varivel de sesso ("abcd", "5").
Bloco de cdigo a ser selecionado Especifica o bloco de cdigo selecionado quando o usurio seleciona o

comportamento no painel Comportamentos de servidor. Quando voc aplica um comportamento de servidor, um dos blocos de cdigo do comportamento designado como sendo o bloco de cdigo a ser selecionado. Caso voc aplique o comportamento de servidor e, em seguida, selecione o comportamento no painel Comportamentos de servidor, o bloco designado selecionado na janela Documento. Por padro, o Dreamweaver seleciona o primeiro bloco de cdigo que no esteja acima da tag html. Caso todos os blocos de cdigo estejam acima da tag html, selecionado o primeiro. Os usurios avanados podem especificar qual o bloco de cdigo selecionado.

Criao dos blocos de cdigo


Os blocos de cdigo que voc cria no Criador de comportamentos de servidor so integrados em um comportamento de servidor exibido no painel Comportamentos de servidor. O cdigo pode ser qualquer cdigo de runtime vlido para o modelo de servidor especificado. Por exemplo, caso voc escolha ColdFusion como o tipo de documento para o comportamento de servidor personalizado, o cdigo que voc escreve deve ser um cdigo do ColdFusion vlido em execuo em um servidor de aplicativo do ColdFusion.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 597


Como tornar pginas dinmicas

Voc pode criar os blocos de cdigo diretamente no Criador de comportamentos de servidor ou copiar e colar o cdigo de outras fontes. Cada bloco de cdigo que voc cria no Criador de comportamentos de servidor deve ser um bloco com tag ou script nico. Caso voc insira vrios blocos de tag, divida-os em blocos de cdigo separados. Condies em blocos de cdigo O Dreamweaver permite que voc desenvolva blocos de cdigo que incorporam instrues de controle executadas periodicamente. O Criador de comportamentos de servidor usa as instrues if, elseif e else, podendo conter parmetros do comportamento de servidor. Isso permite inserir blocos de texto alternativos com base nos valores das relaes OR entre os parmetros de comportamento do servidor. O seguinte exemplo mostra as instrues if, elseif e else. Os colchetes ([ ]) indicam o cdigo opcional e o asterisco (*), zero ou mais instncias. Para executar uma parte de um bloco de cdigo ou todo o bloco somente se uma ou mais determinadas condies se aplicarem, use a seguinte sintaxe:
<@ if (expression1) @>conditional text1[<@ elseif (expression2) @>conditional text2]*[<@ else @> conditional text3]<@ endif @>

As expresses de condio podem ser qualquer expresso JavaScript que possa ser avaliada com o uso da funo eval() do JavaScript, podendo incluir um parmetro do comportamento de servidor marcado por @@s. (Os @@s diferenciam o parmetro das variveis e palavras-chave do JavaScript.) Uso efetivo de expresses condicionais Durante o uso das diretivas if, else e elseif dentro da tag XML insertText, o texto participante pr-processado para resolver as diretivas if e determinar o texto a ser includo no resultado. As diretivas if e elseif usam a expresso como um argumento. A expresso de condio igual s expresses de condio JavaScript, tambm podendo conter parmetros do comportamento de servidor. Diretivas como essa permitem optar por blocos de cdigo alternativos baseados nos valores ou nas relaes entre parmetros do comportamento de servidor. Por exemplo, o seguinte cdigo do JSP acompanha um comportamento de servidor do Dreamweaver que usa um bloco de cdigo convencional:
@@rsName@@.close(); <@ if (@@callableName@@ != '') @> @@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet();<@ else @> @@rsName@@ = Statement@@rsName@@.executeQuery(); <@ endif @> @@rsName@@_hasData = @@rsName@@.next();

O bloco de cdigo convencional comea com <@ if (@@callableName@@ != '') @> e termina com <@ endif @>. De acordo com o cdigo, caso o usurio digite um valor para o parmetro @@callableName@@ na caixa de dilogo Parmetro do comportamento de servidor em outras palavras, caso o valor de parmetro @@callableName@@ no seja nulo ou (@@callableName@@ != '') , o bloco de cdigo condicional substitudo pelas seguintes instrues:
@@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet();

Do contrrio, o bloco de cdigo substitudo pela seguinte instruo:


@@rsName@@ = Statement@@rsName@@.executeQuery();

Mais tpicos da Ajuda


Repetio dos blocos de cdigo com a diretiva de loop na pgina 599

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 598


Como tornar pginas dinmicas

Posicionamento de um bloco de cdigo


Ao criar blocos de cdigo usando o Criador de comportamentos de servidor, voc deve especificar onde inseri-los no cdigo HTML da pgina. Por exemplo, caso insira um bloco de cdigo acima da tag de abertura <html>, voc deve especificar a posio do bloco em relao s demais tags, scripts e comportamentos de servidor na seo do cdigo HTML da pgina. Entre os exemplos tpicos esto o posicionamento de um comportamento antes ou depois de qualquer consulta ao conjunto de registros que tambm possa existir no cdigo da pgina acima da tag de abertura <html>. Quando voc seleciona uma opo de posicionamento no menu pop-up Inserir cdigo, as opes disponveis no menu pop-up Posio relativa mudam para fornecer opes relevantes a essa parte da pgina. Por exemplo, caso voc selecione Acima da tag <html> no menu pop-up Inserir cdigo, as opes de posicionamento disponveis no menu pop-up Posio relativa refletem opes relevantes parte da pgina. A seguinte tabela mostra as opes de insero do bloco de cdigo, alm das opes de posicionamento relativo disponveis a cada uma:
Opes de Inserir cdigo Acima da tag <html> Opes de posio relativa

No incio do arquivo Logo antes dos conjuntos de registros Logo aps os conjuntos de registros Logo acima da tag <html> Posio personalizada Antes do fim do arquivo Antes da finalizao do conjunto de registros Aps a finalizao do conjunto de registros Aps a tag </html> Posio personalizada

Abaixo da tag </html>

Relativo a determinada tag

Selecione uma tag no menu pop-up Tag e, em seguida, escolha uma das opes de posicionamento. Antes da seleo Aps a seleo Substituir a seleo Envolver a seleo

Relativo seleo

Para especificar uma posio personalizada, voc deve atribuir um peso ao bloco de cdigo. Use a opo Posio personalizada somente quando voc quiser inserir mais de um bloco de cdigo em uma determinada ordem. Por exemplo, para inserir uma srie ordenada dos trs blocos de cdigo aps os blocos de cdigo que abrem os conjuntos de registros, voc inseriria um peso 60 para o primeiro bloco, 65 para o segundo e 70 para o terceiro. Por padro, o Dreamweaver atribui um peso 50 a todos os blocos de cdigo que abrem o conjunto de registros inseridos acima da tag <html>. Caso o peso de dois ou mais blocos seja o mesmo, o Dreamweaver define aleatoriamente a ordem entre os blocos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 599


Como tornar pginas dinmicas

Mais tpicos da Ajuda


Solicitar um parmetro para o comportamento de servidor na pgina 601 Diretrizes de codificao na pgina 604 Sobre os comportamentos de servidor personalizados na pgina 594 Criao dos blocos de cdigo na pgina 596 Teste dos comportamentos de servidor na pgina 604

Posicionar um bloco de cdigo (instrues gerais)


1 Usando o Criador de comportamentos de servidor, escreva um bloco de cdigo. 2 Na caixa de dilogo Criador de comportamentos de servidor, selecione uma posio na qual inserir o bloco de

cdigo no menu pop-up Inserir cdigo.


3 Na caixa de dilogo Criador de comportamentos de servidor, selecione uma posio relativa ao que voc selecionou

no menu pop-up Inserir cdigo.


4 Caso complete a criao do bloco de cdigo, clique em OK.

O comportamento de servidor listado no painel Comportamentos de servidor (Janela > Comportamento de servidor); clique no boto de adio (+) para exibi-lo.
5 Teste o comportamento de servidor e verifique se ele est funcionando corretamente.

Posicionar um bloco de cdigo relativo a outra tag na pgina


1 No menu pop-up Inserir cdigo, selecione Relativo a determinada tag. 2 Na caixa Tag, digite a tag ou selecione uma no menu pop-up.

Caso voc insira uma tag, no inclua os sinais de menor e maior (<>).
3 Especifique um local relativo tag escolhendo uma opo no menu pop-up Posio relativa.

Posicionar um bloco de cdigo relativo a uma tag selecionada pelo designer da pgina
1 No menu pop-up Inserir cdigo, selecione Relativo seleo. 2 Especifique um local relativo seleo escolhendo uma opo no menu pop-up Posio relativa.

Voc pode inserir o cdigo de bloco logo antes ou logo depois da seleo. Voc tambm pode substituir a seleo pelo bloco de cdigo ou envolv-lo em torno da seleo. Para envolver o bloco de cdigo em torno de uma seleo, a seleo deve consistir em tags de abertura e de fechamento sem nada entre elas como a seguinte:
<CFIF Day="Monday"></CFIF>

Insira a parte da tag de abertura do bloco de cdigo antes da tag de abertura da seleo e a parte da tag de fechamento do bloco de cdigo depois da tag de fechamento da seleo.

Repetio dos blocos de cdigo com a diretiva de loop


Para repetir uma parte de um bloco de cdigo ou todo o bloco algumas vezes, use a seguinte sintaxe:
<@ loop (@@param1@@,@@param2@@) @>code block<@ endloop @>

Ao criar comportamentos de servidor, voc pode usar construtos de loop para repetir um bloco de cdigo um nmero especificado de vezes.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 600


Como tornar pginas dinmicas

<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>code block <@ endloop @>

A diretiva de loop aceita uma lista separada por vrgulas das matrizes de parmetros como argumentos. Nesse caso, os argumentos da matriz de parmetros permitem ao usurio fornecer vrios valores para um nico parmetro. O texto repetitivo duplicado n vezes, em que n o comprimento dos argumentos da matriz de parmetros. Caso seja especificado mais de um argumento de matriz de parmetros, todas as matrizes devem ter o mesmo comprimento. Na ensima avaliao do loop, o ensimo elemento da matriz de parmetros substitui as instncias do parmetro associado no bloco de cdigos. Ao criar uma caixa de dilogo para o comportamento de servidor, voc pode adicionar um controle caixa de dilogo que permite ao designer da pgina criar matrizes de parmetros. O Dreamweaver inclui um controle de matriz simples que voc pode usar para criar caixas de dilogo. Esse controle, chamado Lista separada por vrgula do campo de texto, est disponvel no Criador de comportamentos de servidor. Para criar elementos de interface de usurio mais complexos, consulte a documentao da API para criar uma caixa de dilogo com um controle de criao de matrizes (um controle de grade, por exemplo). Voc pode aninhar qualquer nmero de condicionais ou diretivas de loop em uma diretiva condicional. Por exemplo, voc pode especificar se uma expresso verdadeira para executar um loop. O seguinte exemplo mostra como blocos de cdigo repetitivos podem ser usados para criar comportamentos de servidor (o exemplo um comportamento do ColdFusion usado para acessar um procedimento armazenado):
<CFSTOREDPROC procedure="AddNewBook" datasource=#MM_connection_DSN# username=#MM_connection_USERNAME# password=#MM_connection_PASSWORD#> <CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR"> </CFSTOREDPROC>

Neste exemplo, a tag CFSTOREDPROC pode incluir zero ou mais tags CFPROCPARAM. No entanto, sem o suporte diretiva de loop, no h como incluir as tags CFPROCPARAM na tag CFSTOREDPROC inserida. Se isso fosse criado como um comportamento de servidor sem o uso da diretiva de loop, voc precisaria dividir esse exemplo em dois participantes: uma tag principal CFSTOREDPROC e uma tag CFPROCPARAM cujo tipo de participante mltiplo. Usando a diretiva de loop, voc pode escrever o mesmo procedimento da seguinte forma:
<CFSTOREDPROC procedure="@@procedure@@" datasource=#MM_@@conn@@_DSN# username=#MM_@@conn@@_USERNAME# password=#MM_@@conn@@_PASSWORD#> <@ loop (@@paramName@@,@@value@@,@@type@@) @> <CFPROCPARAM type="IN" dbvarname="@@paramName@@" value="@@value@@" cfsqltype="@@type@@"> <@ endloop @> </CFSTOREDPROC>

Nota: As novas linhas depois de cada @> so ignoradas. Caso o usurio tenha inserido os seguintes valores de parmetro na caixa de dilogo Criador de comportamentos de servidor:

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 601


Como tornar pginas dinmicas

procedure = "proc1" conn = "connection1" paramName = ["@CategoryId", "@Year", "@ISBN"] value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"] type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]

O comportamento de servidor inseriria o seguinte cdigo de runtime na pgina:


<CFSTOREDPROC procedure="proc1" datasource=#MM_connection1_DSN# username=#MM_connection1_USERNAME# password=#MM_connection1_PASSWORD#> <CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR"> </CFSTOREDPROC>

Nota: As matrizes de parmetros no podem ser usadas fora de um loop, exceto como parte de uma expresso de diretiva condicional. Uso das variveis _length e _index da diretiva de loop A diretiva de loop inclui duas variveis incorporadas que voc pode usar em condies if incorporadas. As variveis so: _length e _index. A varivel _length avalia o comprimento das matrizes processadas pela diretiva de loop, ao passo que a varivel _index avalia o ndice atual da diretiva de loop. Para garantir que as variveis s sejam reconhecidas como diretivas, e no como parmetros reais a serem passados para o loop, no coloque nenhuma das variveis entre @@s. Um exemplo de uso das variveis incorporadas aplic-las ao atributo import da diretiva de pgina. O atributo
import exige a separao dos pacotes por vrgulas. Caso a diretiva loop se estenda por todo o atributo import, voc

obtm apenas o nome de atributo import= na primeira iterao do loop isso inclui as aspas de fechamento (") e no uma vrgula na ltima iterao do loop. Usando a varivel incorporada, voc pode expressar isso da seguinte forma:
<@loop (@@Import@@)@> <@ if(_index == 0)@>import=" <@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>, <@ endif @> <@endloop@>

Solicitar um parmetro para o comportamento de servidor


Os comportamentos de servidor normalmente exigem que o designer da pgina fornea um valor de parmetro. Esse valor deve ser inserido antes do cdigo do comportamento de servidor ser inserido na pgina. Voc cria a caixa de dilogo definindo os parmetros fornecidos pelo designer no cdigo. Em seguida, voc gera uma caixa de dilogo para o comportamento de servidor, que solicita ao designer da pgina um valor de parmetro. Nota: Um parmetro adicionado ao bloco de cdigo sem a sua interveno caso voc especifique que o cdigo deve ser inserido relativo a uma tag especfica escolhida pelo designer da pgina (ou seja, voc escolhe Relativo a determinada tag no menu pop-up Inserir cdigo). O parmetro adiciona um menu de tag caixa de dilogo do comportamento para permitir ao designer da pgina selecionar uma tag.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 602


Como tornar pginas dinmicas

Definir o parmetro no cdigo do comportamento de servidor


1 Digite um marcador de parmetro no cdigo em que voc deseja inserir o valor de parmetro fornecido. O

parmetro tem a seguinte sintaxe:


@@parameterName@@

2 Coloque a seqncia de caracteres formParam entre marcadores de parmetro (@@):


<% Session("lang_pref") = Request.Form("@@formParam@@"); %>

Por exemplo, caso o comportamento de servidor contenha o seguinte bloco de cdigo:


<% Session("lang_pref") = Request.Form("Form_Object_Name"); %>

Para exigir que o designer da pgina fornea o valor de Form_Object_Name, coloque a seqncia de caracteres entre marcadores de parmetro (@@):
<% Session("lang_pref") = Request.Form("@@Form_Object_Name@@"); %>

Voc tambm pode realar a seqncia de caracteres e clicar no boto Inserir o parmetro no bloco de cdigo. Digite o nome de um parmetro e clique em OK. O Dreamweaver substitui todas as instncias da seqncia de caracteres realada pelo nome de parmetro especificado entre marcadores de parmetro. O Dreamweaver usa as seqncias de caracteres que voc coloca entre marcadores de parmetro para identificar os controles na caixa de dilogo gerada (consulte o seguinte procedimento). No exemplo anterior, o Dreamweaver cria uma caixa de dilogo com o seguinte rtulo:

Nota: Os nomes de parmetro no cdigo do comportamento de servidor no podem ter espaos. Por isso, os rtulos da caixa de dilogo no podem ter nenhum espao. Caso queira incluir espaos no rtulo, voc pode editar o arquivo HTML gerado.

Criar uma caixa de dilogo para o comportamento de servidor a fim de solicitar o valor de parmetro
1 No Criador de comportamentos de servidor, clique em Avanar. 2 Para alterar a ordem de exibio dos controles da caixa de dilogo, selecione um parmetro e clique nas setas para

cima e para baixo.


3 Para alterar o controle de um parmetro, selecione o parmetro e, depois, selecione outro controle na coluna Exibir

como.
4 Clique em OK.

O Dreamweaver gera uma caixa de dilogo com um controle identificado para cada parmetro fornecido por designer que voc define.

Exibir a caixa de dilogo


Clique no boto de adio (+) no painel Comportamentos de servidor (Janela > Comportamentos de servidor) e

selecione o comportamento de servidor personalizado no menu pop-up.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 603


Como tornar pginas dinmicas

Editar a caixa de dilogo que voc criou para o comportamento de servidor


1 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Editar comportamentos de servidor no menu pop-up.


2 Selecione o comportamento de servidor na lista e clique em Abrir. 3 Clique em Avanar.

Uma caixa de dilogo exibida listando todos os parmetros fornecidos pelo designer que voc definiu no cdigo.
4 Para alterar a ordem de exibio dos controles da caixa de dilogo, selecione um parmetro e clique nas setas para

cima e para baixo.


5 Para alterar o controle de um parmetro, selecione o parmetro e, depois, selecione outro controle na coluna Exibir

como.
6 Clique em OK.

Editar e modificar comportamentos de servidor


Voc pode editar qualquer comportamento de servidor criado com o Criador de comportamentos de servidor, inclusive comportamentos de servidor que voc baixa no site do Dreamweaver Exchange e de desenvolvedores de outros fabricantes. Caso voc aplique um comportamento de servidor a uma pgina e, em seguida, edite o comportamento no Dreamweaver, as instncias do comportamento antigo deixam de ser exibidas no painel Comportamentos de servidor. O painel Comportamentos de servidor pesquisa a pgina em busca do cdigo correspondente ao cdigo dos comportamentos de servidor conhecidos. Caso o cdigo de um comportamento de servidor seja alterado, o painel no reconhece as verses anteriores do comportamento na pgina.

Mais tpicos da Ajuda


Usar o Criador de comportamentos de servidor na pgina 595 Posicionamento de um bloco de cdigo na pgina 598

Manter as verses anterior e nova do comportamento no painel


Clique no boto de adio (+) no painel Comportamentos de servidor (Janela > Comportamentos de servidor),

selecione Novo comportamento de servidor e crie uma cpia do comportamento de servidor antigo.

Editar o cdigo de um comportamento de servidor criado com o Criador de comportamentos de servidor


1 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Editar comportamentos de servidor no menu pop-up. A caixa de dilogo Editar comportamentos de servidor exibe todos os comportamentos relacionados tecnologia de servidor atual.
2 Selecione o comportamento de servidor e clique em Editar. 3 Selecione o bloco de cdigo apropriado e modifique o cdigo, as marcas de parmetro ou a posio do bloco de

cdigo a ser inserido nas pginas.


4 Caso o cdigo modificado no contenha nenhum parmetro fornecido pelo designer, clique em OK.

O Dreamweaver gera novamente o comportamento de servidor sem uma caixa de dilogo. O novo comportamento de servidor exibido no menu pop-up de adio (+) do painel Comportamentos de servidor.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 604


Como tornar pginas dinmicas

5 Caso o cdigo modificado contenha parmetros fornecidos pelo designer, clique em Avanar.

O Dreamweaver pergunta se voc deseja criar uma nova caixa de dilogo substituindo a anterior. Faa as alteraes e clique em OK. O Dreamweaver salva todas as alteraes no arquivo EDML do comportamento de servidor.

Diretrizes de codificao
Em geral, o cdigo do comportamento de servidor deve ser compacto e eficiente. Os desenvolvedores de aplicativo da Web so muito sensveis ao cdigo adicionado s suas pginas. Siga as prticas de codificao geralmente aceitas para linguagens do tipo documento (ColdFusion, JavaScript, VBScript ou PHP). Ao escrever comentrios, considere os pblicos tcnicos diferentes que talvez precisem compreender o cdigo como, por exemplo, os designers da Web e de interao ou outros desenvolvedores de aplicativo da Web. Inclua comentrios que descrevam com preciso o propsito do cdigo e todas as instrues especiais para inclu-lo em uma pgina. No se esquea das seguintes diretrizes de codificao quando voc criar comportamentos de servidor:
Verificao de erros Um requisito importante. O cdigo do comportamento de servidor deve lidar tranqilamente com casos de erro. Tente prever todas as possibilidades. Por exemplo, e se uma solicitao de parmetro falha? E se nenhum registro retornar de uma consulta? Nomes exclusivos Ajude a garantir que o cdigo seja claramente identificvel e evite diferenas de nome em relao ao cdigo existente. Por exemplo, caso a pgina contenha uma funo chamada hideLayer() e uma varivel global chamada ERROR_STRING e o comportamento de servidor insira um cdigo que tambm usa esses nomes, o comportamento de servidor pode entrar em conflito com o cdigo existente. Prefixos de cdigo Eles permitem que voc identifique funes de runtime prprias e variveis globais em uma pgina. Uma conveno usar as iniciais. Nunca use o prefixo MM_ porque ele est reservado apenas para uso do Dreamweaver. O Dreamweaver precede todas as funes e variveis globais com o prefixo MM_ para impedir que elas entrem em conflito com qualquer cdigo que voc escreva.
var MM_ERROR_STRING = "..."; function MM_hideLayer() {

Evite blocos de cdigo semelhantes para que o cdigo que voc escreve no seja muito semelhante ao cdigo em outros blocos. Caso um bloco de cdigo seja muito semelhante a outro bloco de cdigo na pgina, o painel Comportamentos de servidor pode identificar por engano o primeiro bloco de cdigo como uma ocorrncia do segundo (ou o inverso). Uma soluo simples adicionar um comentrio a um bloco de cdigo para torn-lo exclusivo.

Mais tpicos da Ajuda


Sobre os comportamentos de servidor personalizados na pgina 594 Fluxo de trabalho dos comportamentos de servidor personalizados na pgina 594

Teste dos comportamentos de servidor


O Exchange do Dreamweaver recomenda a realizao dos seguintes testes em todos os comportamentos de servidor que voc cria:

Aplique o comportamento do painel Comportamentos de servidor. Caso haja uma caixa de dilogo, insira dados
vlidos nos campos e clique em OK. Verifique se no ocorre nenhum erro quando o comportamento aplicado. Verifique se o cdigo de runtime do comportamento de servidor exibido no Inspetor de cdigo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 605


Como tornar pginas dinmicas

Aplique o comportamento de servidor novamente e digite os dados invlidos em todos os campos da caixa de
dilogo. Tente deixar o campo em branco usando nmeros grandes ou negativos, caracteres invlidos (como, por exemplo, /, ?, :, * etc.) e letras em campos numricos. Voc pode escrever rotinas de validao de formulrio para lidar com dados invlidos (rotinas de validao envolvem codificao manual, o que vai alm do escopo deste livro). Depois de aplicar o comportamento de servidor pgina, verifique o seguinte:

Verifique o painel Comportamentos de servidor para ter certeza de que o nome do comportamento de servidor
exibido na lista de comportamentos adicionados pgina.

Se aplicvel, verifique se os cones de script do servidor aparecem na pgina. Os cones genricos de script do
servidor so escudos dourados. Para ver os cones, ative Elementos invisveis (Exibir > Auxlios visuais > Elementos invisveis).

Na Visualizao de cdigo (Exibir > Cdigo), verifique se nenhum cdigo invlido foi gerado.
Alm disso, caso o comportamento de servidor insira cdigo no documento que estabelece uma conexo com um banco de dados, crie um banco de dados de teste e teste o cdigo inserido no documento. Verifique a conexo definindo as consultas que produzem conjuntos de dados diferentes e tamanhos de conjuntos de dados diferentes. Por fim, carregue a pgina no servidor e a abra em um navegador. Veja o cdigo-fonte HTML da pgina e verifique se nenhum HTML invlido foi gerado pelos scripts do servidor.

ltima atualizao em 28/4/2010

606

Captulo 20: Criao visual de aplicativos


No Adobe Dreamweaver CS5, voc pode usar o Adobe ColdFusion, PHP ou ASP para criar pginas que permitam pesquisar, inserir, excluir e atualizar registros do banco de dados, exibir informaes mestre e detalhadas, alm de restringir o acesso a determinados usurios.

Criao de pginas mestre e detalhadas


Sobre pginas mestre e detalhadas
Pginas mestre e detalhadas so conjuntos de pginas usados para organizar e exibir dados de um conjunto de registros. Essas pginas fornecem ao visitante do site tanto uma viso geral quanto uma viso detalhada. A pgina mestre lista todos os registros e contm links para as pginas detalhadas que exibem informaes adicionais sobre cada registro.

Pgina mestre

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 607


Criao visual de aplicativos

Pgina detalhada

Voc pode criar pginas mestre e detalhadas inserindo um objeto de dados para criar uma pgina mestre e uma pgina detalhada em uma operao ou usando comportamentos de servidor para cri-las de maneira mais personalizada. Ao usar comportamentos de servidor para criar pginas mestre e detalhadas, voc cria inicialmente uma pgina mestre para listar os registros e, em seguida, adiciona links da lista s pginas detalhadas.

Mais tpicos da Ajuda


Sobre pginas de pesquisa e de resultados na pgina 613

Criar uma pgina mestre


Antes de comear, verifique se voc definiu uma conexo de banco de dados para o site.
1 Para criar uma pgina em branco, selecione Arquivo > Novo > Pgina em branco, escolha um tipo de pgina e

clique em Criar. Essa se torna a pgina mestre.


2 Defina um conjunto de registros.

No painel Ligaes (Janelas > Ligaes), clique no boto de adio (+), selecione Conjunto de registros e escolha as opes. Caso voc queira escrever sua prpria instruo SQL, clique em Avanado. Verifique se o conjunto de registros contm todas as colunas da tabela necessrias criao da pgina mestre. O conjunto de registros tambm deve incluir a coluna da tabela que contm a chave exclusiva de cada registro, ou seja, a coluna ID do registro. No seguinte exemplo, a coluna Cdigo contm a chave exclusiva de todos os registros.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 608


Criao visual de aplicativos

Colunas do conjunto de registros selecionadas para uma pgina mestre

Normalmente, o conjunto de registros da pgina mestre extrai algumas colunas da tabela de um banco de dados, ao passo que o conjunto de registros da pgina detalhada extrai mais colunas da mesma tabela para fornecer detalhes adicionais. O conjunto de registros pode ser definido pelo usurio durante o runtime. Para obter mais informaes, consulte Criao de pginas de pesquisa e de resultados na pgina 613.
3 Insira uma tabela dinmica para exibir os registros.

Coloque o ponto de insero onde voc deseja que a tabela dinmica seja exibida na pgina. Selecione Inserir > Objetos de dados > Dados dinmicos > Tabela dinmica, defina as opes e clique em OK. Caso no queira mostrar as IDs de registro aos usurios, voc pode excluir a coluna da tabela dinmica. Clique em qualquer lugar da pgina a fim de mover o foco para a pgina. Mova o cursor prximo parte superior da coluna na tabela dinmica at que as clulas da coluna estejam contornadas em vermelho e, em seguida, marque a coluna. Pressione Excluir para excluir a coluna da tabela.

Mais tpicos da Ajuda


Definir um conjunto de registros sem escrever em SQL na pgina 563 Definir um conjunto de registros avanado escrevendo em SQL na pgina 565 Criar uma tabela dinmica na pgina 588

Criar links para a pgina detalhada


Depois de criar a pgina mestre e adicionar o conjunto de registros, voc cria links que abrem a pgina detalhada. Em seguida, voc modifica os links para passar as IDs dos registros selecionados pelo usurio. A pgina detalhada usa essa ID para localizar o registro solicitado no banco de dados e exibi-lo. Nota: Voc cria links para atualizar pginas usando o mesmo processo. A pgina de resultados semelhante a uma pgina mestre, e a pgina de atualizao semelhante pgina detalhada.

Mais tpicos da Ajuda


Criao de pginas para atualizar um registro na pgina 623

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 609


Criao visual de aplicativos

Abrir a pgina detalhada e passar a ID de um registro (ColdFusion, PHP)


1 Na tabela dinmica, selecione o alocador de espao de contedo do texto que funcionar como um link.

Links aplicados ao alocador de espao selecionado.

2 No Inspetor de propriedades, clique no cone da pasta ao lado da caixa Link. 3 Procure e selecione a pgina detalhada. A pgina detalhada exibida na caixa Link do Inspetor de propriedades.

Na tabela dinmica, o texto selecionado exibido com o link. Quando a pgina executada no servidor, o link aplicado ao texto em todas as linhas da tabela.
4 Na pgina mestre, selecione o link na tabela dinmica. 5 (ColdFusion) Na caixa Link do Inspetor de propriedades, adicione esta seqncia de caracteres ao final do URL:
?recordID=#recordsetName.fieldName#

O ponto de interrogao informa ao servidor de que se trata de um ou mais parmetros de URL. A palavra recordID o nome do parmetro do URL (voc pode dar a ele o nome que quiser). Anote o nome do parmetro do URL porque voc o usar na pgina detalhada posteriormente. A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso do ColdFusion que retorna a ID de um registro do conjunto de registros. gerada uma ID diferente para cada linha da tabela dinmica. Na expresso do ColdFusion, substitua recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do campo do conjunto de registros que identifica com exclusividade cada registro. Na maior parte dos casos, o campo consistir no nmero da ID de um registro. No seguinte exemplo, o campo consiste em cdigos de local exclusivos.
locationDetail.cfm?recordID=#rsLocations.CODE#

Quando a pgina executada, os valores do campo CODE do conjunto de registros so inseridos nas linhas correspondentes da tabela dinmica. Por exemplo, caso Canberra, Austrlia, o local da locao, apresente o cdigo CBR, o seguinte URL usado na linha Canberra da tabela dinmica:
locationDetail.cfm?recordID=CBR

6 (PHP) No campo Link do Inspetor de propriedades, adicione esta seqncia de caracteres ao final do URL:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>

O ponto de interrogao informa ao servidor de que se trata de um ou mais parmetros de URL. A palavra recordID o nome do parmetro do URL (voc pode usar o nome que quiser). Anote o nome do parmetro do URL porque voc o usar na pgina detalhada posteriormente. A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso do PHP que retorna a ID de um registro do conjunto de registros. gerada uma ID diferente para cada linha da tabela dinmica. Na expresso do PHP, substitua recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do campo do conjunto de registros que identifica com exclusividade cada registro. Na maior parte dos casos, o campo consistir no nmero da ID de um registro. No seguinte exemplo, o campo consiste em cdigos de local exclusivos.
locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 610


Criao visual de aplicativos

Quando a pgina executada, os valores do campo CODE do conjunto de registros so inseridos nas linhas correspondentes da tabela dinmica. Por exemplo, caso Canberra, Austrlia, o local da locao, apresente o cdigo CBR, o seguinte URL usado na linha Canberra da tabela dinmica:
locationDetail.php?recordID=CBR

7 Salve a pgina.

Abra a pgina detalhada e passe a ID de um registro (ASP)


1 Selecione o contedo dinmico a ser duplicado como um link. 2 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Ir para pgina detalhada no menu pop-up.


3 Na caixa Pgina detalhada, clique em Procurar e localize a pgina. 4 Especifique o valor que voc deseja passar para a pgina detalhada selecionando um conjunto de registros e uma

coluna nos menus pop-up Conjunto de registros e Coluna. Normalmente, o valor exclusivo do registro como, por exemplo, a ID de chave exclusiva.
5 Se desejado, passe os parmetros de pgina existentes para a pgina detalhada selecionando as opes Parmetros

de URL ou Parmetros de formulrio.


6 Clique em OK.

Um link especial contorna o texto selecionado. Quando o usurio clica no link, o comportamento de servidor Ir para pgina detalhada passa um parmetro do URL que contm a ID do registro para a pgina detalhada. Por exemplo, caso o parmetro do URL se chame id e a pgina detalhada, customerdetail.asp, o URL permanece semelhante seguinte quando o usurio clica no link: http://www.mysite.com/customerdetail.asp?id=43 A primeira parte do URL, http://www.mysite.com/customerdetail.asp, abre a pgina detalhada. J a segunda parte, ?id=43, o parmetro do URL. Ela informa pgina detalhada qual registro localizar e exibir. O termo id o nome do parmetro do URL e 43 seu valor. Nesse exemplo, o parmetro do URL contm o nmero da ID do registro, 43.

Localizar e exibir o registro solicitado na pgina detalhada


Para exibir o registro solicitado pela pgina mestre, voc deve definir um conjunto de registros para armazenar um nico registro e ligar as colunas do conjunto pgina detalhada.
1 Alterne para a pgina detalhada. Caso voc ainda no tenha uma pgina detalhada, crie uma pgina em branco

(Arquivo > Novo).


2 No painel Ligaes (Janela > Ligaes), clique no boto de adio (+) e selecione Conjunto de registros (consulta)

ou Conjunto de dados (consulta) no menu pop-up. A caixa de dilogo Conjunto de registros ou Conjunto de dados simples exibida. Caso seja exibida a caixa de dilogo avanada em seu lugar, clique em Simples.
3 Nomeie o conjunto de registros e selecione uma fonte de dados, alm da tabela do banco de dados que fornecer os

dados para o conjunto de registros.


4 Na rea Colunas, selecione as colunas da tabela a serem includas no conjunto de registros.

O conjunto pode ser idntico ou no ao conjunto de registros da pgina mestre. Normalmente, o conjunto de registros de uma pgina detalhada tem mais colunas para poder exibir mais detalhes.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 611


Criao visual de aplicativos

Caso os conjuntos de registros sejam diferentes, verifique se o conjunto da pgina detalhada contenha pelo menos uma coluna em comum com o conjunto de registros da pgina mestre. A coluna em comum costuma ser a da ID do registro, mas tambm pode ser o campo conjunto das tabelas relacionadas. Para incluir apenas algumas das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as colunas desejadas clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista.
5 Complete a seo Filtro para localizar e exibir o registro especificado no parmetro do URL passado pela pgina

mestre:

No primeiro menu pop-up da rea Filtro, selecione a coluna do conjunto de registros que contm valores
correspondentes ao valor do parmetro do URL passado pela pgina mestre. Por exemplo, caso o parmetro do URL contenha o nmero de uma ID de registro, selecione a coluna que contm os nmeros da ID de registro. No exemplo abordado na seo anterior, a coluna do conjunto de registros chamada CODE contm os valores correspondentes ao valor do parmetro do URL passado pela pgina mestre.

No menu pop-up ao lado do primeiro menu, selecione o sinal de igual (ele j deve estar selecionado). No terceiro menu pop-up, selecione Parmetro do URL. A pgina mestre usa um parmetro do URL para passar
informaes pgina detalhada.

Na quarta caixa, digite o nome do parmetro do URL passado pela pgina mestre.
6 Clique em OK. O conjunto de registros exibido no painel Ligaes. 7 Ligue as colunas do conjunto de registros pgina detalhada selecionando as colunas no painel Ligaes (Janela >

Ligaes) e arrastando-as para a pgina. Depois de carregar as pginas mestre e detalhada no servidor, voc pode abrir a pgina mestre em um navegador. Depois que um link detalhado clicado na pgina mestre, a pgina detalhada aberta com mais informaes sobre o registro selecionado.

Mais tpicos da Ajuda


Configurar um servidor de teste na pgina 46

Localize um registro especfico e exiba-o em uma pgina (ASP)


Voc pode adicionar um comportamento de servidor que localize um registro especfico de um conjunto para poder exibir os dados do registro na pgina. O comportamento do servidor s est disponvel quando se usa o modelo de servidor ASP.
1 Crie uma pgina que tenha os seguintes pr-requisitos:

A ID de um registro contida no parmetro de um URL e passada por outra pgina para a pgina atual. Voc pode
criar parmetros de URL na outra pgina com hiperlinks em HTML ou formulrio em HTML. Para obter mais informaes, consulte Coleta de informaes dos usurios na pgina 656.

Um conjunto de registros definido para a pgina atual. O comportamento de servidor extrai os detalhes do registro
do conjunto. Para obter instrues, consulte Definir um conjunto de registros sem escrever em SQL na pgina 563 ou Definir um conjunto de registros avanado escrevendo em SQL na pgina 565.

Colunas do conjunto de registros ligado pgina. O registro especfico deve ser exibido na pgina. Para obter mais
informaes, consulte Tornar texto dinmico na pgina 578.
2 Adicione o comportamento de servidor para localizar o registro especificado pelo parmetro do URL clicando no

boto de adio (+) do painel Comportamentos de servidor (Janela > Comportamentos de servidor) e selecionando Paginao do conjunto de registros > Mover para registro especfico.
3 No menu pop-up Mover para registro em, selecione o conjunto de registros definido para a pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 612


Criao visual de aplicativos

4 No menu pop-up Coluna Onde, selecione a coluna que contm o valor passado pela outra pgina.

Por exemplo, caso a outra pgina passe o nmero de uma ID de registro, selecione a coluna que contm os nmeros da ID de registro.
5 Na caixa Corresponde ao parmetro de URL, digite o nome do parmetro do URL passado pela outra pgina.

Por exemplo, caso o URL usado pela outra pgina para abrir a pgina detalhada seja id=43, digiteid na caixa Corresponde ao parmetro de URL.
6 Clique em OK.

Na prxima vez em que a pgina for solicitada por um navegador, o comportamento de servidor ir ler a ID do registro no parmetro do URL passado pela outra pgina e se mover para o registro especificado do conjunto.

Criar pginas mestre e detalhadas em uma operao


Ao desenvolver aplicativos da Web, voc pode criar rapidamente pginas mestre e detalhadas usando o objeto de dados Conjunto de pginas mestre/detalhadas.
1 Para criar uma pgina dinmica em branco, selecione Arquivo > Novo > Pgina em branco, escolha uma pgina

dinmica e clique em Criar. Essa se torna a pgina mestre.


2 Defina um conjunto de registros para a pgina.

Verifique se o conjunto de registros contm no apenas todas as colunas necessrias pgina mestre, mas tambm todas as colunas necessrias pgina detalhada. Normalmente, o conjunto de registros da pgina mestre extrai algumas colunas da tabela de um banco de dados, ao passo que o conjunto de registros da pgina detalhada extrai mais colunas da mesma tabela para fornecer detalhes adicionais.
3 Abra a pgina mestre na Visualizao de design e selecione Inserir > Objetos de dados > Conjunto de pginas

mestre/detalhadas.
4 No menu pop-up Recordset, verifique se o conjunto que contm os registros a serem exibidos na pgina mestre est

escolhido.
5 Na rea Campos de pgina mestre, selecione as colunas do conjunto de registros a serem exibidas na pgina mestre.

Por padro, todas as colunas do conjunto de registros so selecionadas. Caso o conjunto de registros contenha uma coluna de chave exclusiva como, por exemplo, recordID, selecione-a e clique no boto de subtrao (-) para que ela no seja exibida na pgina.
6 Para alterar a ordem na qual as colunas so exibidas na pgina mestre, selecione uma coluna na lista e clique na seta

para cima ou para baixo. Na pgina mestre, as colunas do conjunto de registros sero organizadas horizontalmente em uma tabela. Clicar na seta para cima move a coluna para esquerda; clicar na seta para baixo move a coluna para direita.
7 No menu pop-up Vincular a detalhes em, selecione a coluna do conjunto de registros que exibir um valor que

tambm funciona como um link para a pgina detalhada. Por exemplo, caso voc queira que cada nome de produto na pgina mestre tenha um link para a pgina detalhada, selecione a coluna do conjunto de registros que contm os nomes dos produtos.
8 No menu pop-up Repassar chave exclusiva, selecione a coluna do conjunto de registros contendo os valores que

identificam os registros. Normalmente, a coluna escolhida se refere ao nmero da ID do registro. Esse valor passado para a pgina detalhada para que ela possa identificar o registro escolhido pelo usurio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 613


Criao visual de aplicativos

9 Desmarque a opo Numrico caso a coluna da chave exclusiva no seja numrica.

Nota: Essa opo selecionada por padro; ela no exibida para todos os modelos de servidor.
10 Especifique o nmero de registros a serem exibidos na pgina mestre. 11 Na caixa Nome de pgina detalhada, clique em Procurar e localize o arquivo de pgina detalhada criado por voc

ou digite um nome e deixe que o objeto de dados crie um.


12 Na rea Campos de pgina detalhada, selecione as colunas a serem exibidas na pgina detalhada.

Por padro, todas as colunas do conjunto de registros da pgina mestre so selecionadas. Caso o conjunto de registros contenha uma coluna de chave exclusiva como, por exemplo, recordID, selecione-a e clique no boto de subtrao () para que ela no seja exibida na pgina detalhada.
13 Para alterar a ordem na qual as colunas so exibidas na pgina detalhada, selecione uma coluna na lista e clique na

seta para cima ou para baixo. Na pgina detalhada, as colunas do conjunto de registros so organizadas verticalmente em uma tabela. Clicar na seta para cima move a coluna para cima; clicar na seta para baixo move a coluna para baixo.
14 Clique em OK.

O objeto de dados cria uma pgina detalhada (caso voc ainda no tenha criado uma) e adiciona contedo dinmico e comportamentos de servidor s pginas mestre e detalhadas.
15 Personalize o layout das pginas mestre e detalhadas de acordo com suas necessidades.

Voc pode personalizar integralmente o layout de todas as pginas usando as ferramentas de design doDreamweaver. Voc tambm pode editar os comportamentos de servidor clicando duas vezes neles no painel Comportamentos de servidor. Depois de criar as pginas mestre e detalhadas usando o objeto de dados, use o painel Comportamentos de servidor (Janela > Comportamentos de servidor) para modificar os vrios blocos de criao inseridos pelo objeto de dados nas pginas.

Mais tpicos da Ajuda


Editar contedo dinmico na pgina 581 Definio de origens de contedo dinmico na pgina 563

Criao de pginas de pesquisa e de resultados


Sobre pginas de pesquisa e de resultados
Voc pode usar o Dreamweaver para criar um conjunto de pginas e permitir que os usurios pesquisem o banco de dados e vejam os resultados da pesquisa. Na maior parte dos casos, voc precisa de pelo menos duas pginas para adicionar esse recurso ao aplicativo da Web. A primeira pgina contm um formulrio em HTML no qual os usurios inserem os parmetros de pesquisa. Embora no realize nenhuma pesquisa efetiva, essa pgina conhecida como pgina de pesquisa. A segunda pgina de que voc precisa a de resultados, que realiza grande parte do trabalho. A pgina de resultados realiza as seguintes tarefas:

L os parmetros de pesquisa enviados pela pgina de pesquisa

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 614


Criao visual de aplicativos

Conecta-se ao banco de dados e procura os registros Cria um conjunto usando os registros encontrados Exibe o contedo do conjunto de registros
Voc tambm pode adicionar uma pgina detalhada. Uma pgina detalhada d aos usurios mais informaes sobre um determinado registro da pgina de resultados. Caso voc tenha apenas um parmetro de pesquisa, o Dreamweaver lhe permite adicionar recursos de pesquisa ao aplicativo da Web sem usar consultas e variveis SQL. Basta criar as pginas e completar algumas caixas de dilogo. Caso tenha mais de um parmetro de pesquisa, voc precisa escrever uma instruo SQL e definir muitas variveis para ela. O Dreamweaver insere a consulta SQL na pgina. Quando a pgina executada no servidor, todos os registros na tabela do banco de dados so verificados. Caso o campo especificado em um registro atenda s condies da consulta SQL, o registro includo em um conjunto de registros. A consulta SQL ativa cria um conjunto de registros contendo apenas os resultados da pesquisa. Por exemplo, a equipe de vendas em campo pode ter informaes sobre clientes de uma determinada rea cujas rendas so superiores a um determinado nvel. Em um formulrio de uma pgina de pesquisa, o associado de vendas insere uma rea geogrfica e um nvel de receita mnimo e, em seguida, clica no boto Enviar para enviar os dois valores a um servidor. No servidor, os valores so passados para a instruo SQL da pgina de resultados, que cria um conjunto de registros contendo apenas os clientes da rea especificada cujas receitas estejam acima do nvel especificado.

Mais tpicos da Ajuda


Definio de origens de contedo dinmico na pgina 563 Criao de pginas de pesquisa e de resultados na pgina 613

Criar a pgina de pesquisa


Uma pgina de pesquisa na Web normalmente contm campos de formulrio nos quais o usurio insere os parmetros de pesquisa. A pgina de pesquisa deve ter, no mnimo, um formulrio em HTML com um boto Enviar. Para adicionar um formulrio em HTML a uma pgina de pesquisa, conclua o seguinte procedimento.
1 Abra a pgina de pesquisa ou uma nova pgina e selecione Inserir > Formulrio > Formulrio.

criado um formulrio vazio na pgina. Voc talvez precise ativar os Elementos invisveis (Exibir > Auxlios visuais > Elementos invisveis) para ver os limites do formulrio, representados por linhas finas em vermelho.
2 Adicione objetos de formulrio para que os usurios insiram os parmetros de pesquisa selecionando Formulrio

no menu Inserir. Entre os objetos de formulrio esto campos de texto, menus, opes e botes de opo. Voc pode adicionar quantos objetos de formulrio quiser para ajudar os usurios a refinar suas pesquisas. No entanto, lembre-se de que quanto maior for o nmero de parmetros na pgina de pesquisa, mais complexa ser a instruo SQL.
3 Adicione um boto Enviar ao formulrio (Inserir > Formulrio > Boto). 4 (Opcional) Altere o rtulo do boto Enviar selecionando o boto, abrindo o Inspetor de propriedades (Janela >

Propriedades) e inserindo um novo valor na caixa Valor. Em seguida, voc informar ao formulrio para onde enviar os parmetros de pesquisa quando o usurio clica no boto Enviar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 615


Criao visual de aplicativos

5 Escolha o formulrio selecionando a tag <form> no seletor de tags na parte inferior da janela Documento, como

mostra a seguinte imagem:

6 Na caixa Ao do Inspetor de propriedades do formulrio, digite o nome de arquivo da pgina de resultados que

realizar a pesquisa no banco de dados.


7 No menu pop-up Mtodo, selecione um dos seguintes mtodos para determinar como o formulrio envia os dados

para o servidor:

OBTER envia os dados do formulrio anexando-os ao URL como uma seqncia de caracteres de consulta. Como

os URLs esto limitados a 8.192 caracteres, no use o mtodo OBTER com formulrios longos.
POSTAR envia os dados do formulrio no corpo de uma mensagem. Padro usa o mtodo padro do navegador (normalmente, OBTER).

A pgina de pesquisa est pronta.

Mais tpicos da Ajuda


Sobre pginas de pesquisa e de resultados na pgina 613 Criao de formulrios da Web na pgina 659

Criar uma pgina de resultados bsica


Quando o usurio clica no boto Pesquisar do formulrio, os parmetros de pesquisa so enviados para uma pgina de resultados no servidor. A pgina de resultados no servidor, e no a pgina de pesquisa no navegador, a responsvel por recuperar os registros do banco de dados. Caso a pgina de pesquisa envie um parmetro de pesquisa nico para o servidor, voc pode criar a pgina de resultados sem consultas e variveis SQL. Voc cria um conjunto de registros bsico com um filtro que exclui os registros que no atendam ao parmetro de pesquisa enviado pela pgina de pesquisa. Nota: Caso tenha mais de uma condio de pesquisa, voc deve usar a caixa de dilogo avanada Conjunto de registros para definir o conjunto de registros (consulte Criar uma pgina de resultados avanada na pgina 617).

Mais tpicos da Ajuda


Sobre pginas de pesquisa e de resultados na pgina 613 Criar a pgina de pesquisa na pgina 614 Criar uma pgina detalhada para uma pgina de resultados na pgina 619

Criar o conjunto de registros para manter os resultados de pesquisa


1 Abra a pgina de resultados na janela Documento.

Caso voc ainda no tenha uma pgina de resultados, crie uma pgina dinmica em branco (Arquivo > Novo > Pgina em branco).
2 Crie um conjunto de registros abrindo o painel Ligaes (Janela > Ligaes), clicando no boto de adio (+) e

selecionando Conjunto de registros no menu pop-up.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 616


Criao visual de aplicativos

3 Verifique se a caixa de dilogo simples Conjunto de registros exibida.

Mas caso seja exibida a caixa de dilogo avanada, alterne para a caixa de dilogo simples clicando no boto Simples.
4 Digite um nome para o conjunto de registros e selecione uma conexo.

A conexo deve ser com um banco de dados que contenha os dados a serem pesquisados pelo usurio.
5 No menu pop-up Tabela, selecione a tabela a ser procurada no banco de dados.

Nota: Em uma pesquisa com parmetro nico, voc pode procurar registros em apenas uma tabela. Para pesquisar mais de uma tabela simultaneamente, voc deve usar a caixa de dilogo avanada Conjunto de registros e definir uma consulta SQL.
6 Para incluir apenas algumas das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as

colunas desejadas clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista. Voc deve incluir apenas as colunas que contenham as informaes a serem exibidas na pgina de resultados. Saia da caixa de dilogo Conjunto de registros por enquanto. Voc a usar para recuperar os parmetros enviados pela pgina de pesquisa e criar um filtro do conjunto de registros a fim de excluir os registros que no atendam aos parmetros.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 617


Criao visual de aplicativos

Criar o filtro do conjunto de registros


1 No primeiro menu pop-up na rea Filtro, selecione uma coluna da tabela do banco de dados na qual procurar uma

correspondncia. Por exemplo, caso o valor enviado pela pgina de pesquisa seja o nome de uma cidade, selecione a coluna da tabela que contm nomes de cidades.
2 No menu pop-up ao lado do primeiro menu, selecione o sinal de igual (ele deve ser o padro). 3 No terceiro menu pop-up, selecione Varivel de formulrio caso o formulrio na pgina de pesquisa use o mtodo
POSTAR ou Parmetro de URL caso ele use o mtodo OBTER.

A pgina de pesquisa usa uma varivel de formulrio ou um parmetro de URL a fim de passar informaes para a pgina de resultados.
4 Na quarta caixa, digite o nome do objeto de formulrio que aceita o parmetro de pesquisa na pgina de pesquisa.

O nome do objeto duplicado como o nome da varivel de formulrio ou do parmetro de URL. Voc pode obter o nome alternando para a pgina de pesquisa, clicando no objeto de formulrio no formulrio para selecion-lo e verificando o nome do objeto no Inspetor de propriedades. Por exemplo, suponhamos que voc queira criar um conjunto de registros que inclua apenas viagens de aventura para um pas especfico. Vamos pressupor que haja uma coluna na tabela chamada TRIPLOCATION. Alm disso, suponhamos que o formulrio em HTML na pgina de pesquisa use o mtodo OBTER e contenha um objeto de menu chamado Location que exibe uma lista dos pases. O seguinte exemplo mostra como a seo Filtro deve ficar:

5 (Opcional) Clique em Testar, digite um valor de teste e clique em OK para se conectar ao banco de dados e criar

uma ocorrncia do conjunto de registros. O valor de teste simula o valor que retornaria da pgina de pesquisa. Clique em OK para fechar o conjunto de registros de teste.
6 Caso voc esteja satisfeito com o conjunto de registros, clique em OK.

Um script do servidor inserido na pgina que verifica todos os registros na tabela do banco de dados quando executada no servidor. Caso o campo especificado em um registro atenda condio de filtragem, o registro includo em um conjunto de registros. O script cria um conjunto de registros contendo apenas os resultados da pesquisa. A prxima etapa exibir o conjunto de registros na pgina de resultados. Para obter mais informaes, consulte Exibir os resultados da pesquisa na pgina 618.

Criar uma pgina de resultados avanada


Caso a pgina de pesquisa envie mais de um parmetro de pesquisa ao servidor, voc deve escrever uma consulta SQL para a pgina de resultados e usar os parmetros de pesquisa em variveis SQL. Nota: Caso tenha apenas uma condio de pesquisa, voc pode usar a caixa de dilogo simples Conjunto de registros para definir o conjunto de registros (consulte Criar uma pgina de resultados bsica na pgina 615).
1 Abra a pgina de resultados no Dreamweaver e, em seguida, crie um conjunto de registros abrindo o painel Ligaes

(Janela > Ligaes), clicando no boto de adio (+) e selecionando Conjunto de registros no menu pop-up.
2 Verifique se a caixa de dilogo avanada Conjunto de registros exibida.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 618


Criao visual de aplicativos

A caixa de dilogo avanada tem uma rea de texto para inserir instrues SQL. Mas caso seja exibida a caixa de dilogo simples, alterne para a caixa de dilogo avanada clicando no boto Avanado.
3 Digite um nome para o conjunto de registros e selecione uma conexo.

A conexo deve ser com um banco de dados que contenha os dados a serem pesquisados pelo usurio.
4 Insira uma instruo Select na rea de texto SQL.

Verifique se a instruo inclui uma clusula WHERE com variveis que mantm os parmetros de pesquisa. No seguinte exemplo, as variveis so chamadas varLastName e varDept:
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept'

Para reduzir o trabalho de digitao, voc pode usar os trs itens de banco de dados na parte inferior da caixa de dilogo avanada Conjunto de registros. Para obter instrues, consulte Definir um conjunto de registros avanado escrevendo em SQL na pgina 565. Para obter ajuda sobre a sintaxe SQL, consulte o SQL primer em www.adobe.com/go/learn_dw_sqlprimer_br.
5 Atribua s variveis SQL os valores dos parmetros de pesquisa clicando no boto de adio (+) na rea Variveis

e digitando o nome da varivel, o valor padro (o valor que a varivel deve assumir caso no retorne nenhum valor de runtime) e o valor de runtime (normalmente um objeto de servidor que mantm um valor enviado por um navegador como, por exemplo, uma varivel de solicitao). No seguinte exemplo em ASP, o formulrio em HTML na pgina de pesquisa usa o mtodo OBTER e contm um campo de texto chamado LastName e outro chamado Department:

No ColdFusion, os valores de runtime seriam #LastName# e #Department#. No PHP, os valores de runtime devem ser $_REQUEST["LastName"] e $_REQUEST["Department"].
6 (Opcional) Clique em Testar para criar uma ocorrncia do conjunto de registros usando os valores de varivel

padro. Os valores padro simulam os valores que retornariam da pgina de pesquisa. Clique em OK para fechar o conjunto de registros de teste.
7 Caso voc esteja satisfeito com o conjunto de registros, clique em OK.

A consulta SQL inserida na pgina. A prxima etapa exibir o conjunto de registros na pgina de resultados.

Exibir os resultados da pesquisa


Depois de criar um conjunto de registros para manter os resultados da pesquisa, voc deve exibir as informaes na pgina de resultados. Exibir os registros pode ser uma simples questo de arrastar colunas individuais do painel Ligaes para a pgina de resultados. Voc pode adicionar links de navegao para avanar e retornar o conjunto de registros, ou criar uma regio repetitiva para exibir mais de um registro na pgina. Voc tambm pode adicionar links a uma pgina detalhada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 619


Criao visual de aplicativos

Para obter mais informaes sobre mtodos de exibio do contedo dinmico em uma pgina que no seja o de exibio dos resultados em uma tabela dinmica, consulte Exibio de registros de banco de dados na pgina 583.
1 Coloque o ponto de insero onde voc deseja que a tabela dinmica seja exibida na pgina de resultados e selecione

Inserir > Objetos de dados > Dados dinmicos > Tabela dinmica.
2 Complete a caixa de dilogo Tabela dinmica, selecionando o conjunto de registros definido por voc para manter

os resultados de pesquisa.
3 Clique em OK. Uma tabela dinmica que exibe resultados de pesquisa inserida na pgina de resultados.

Criar uma pgina detalhada para uma pgina de resultados


O conjunto de pginas de pesquisa e de resultados pode incluir uma pgina detalhada para exibir mais informaes sobre registros especficos da pgina de resultados. Nessa situao, a pgina de resultados tambm duplicada como pgina mestre em um conjunto de pginas mestre/detalhadas.

Mais tpicos da Ajuda


Criar pginas mestre e detalhadas em uma operao na pgina 612 Criar a pgina de pesquisa na pgina 614 Criar uma pgina de resultados bsica na pgina 615

Crie um link para abrir uma pgina relacionada (ASP)


Voc pode criar um link que abre uma pgina relacionada e passa parmetros existentes para essa pgina. O comportamento do servidor s est disponvel quando se usa o modelo de servidor ASP. Antes de adicionar um comportamento de servidor Ir para pgina relacionada a uma pgina, verifique se ela recebe parmetros de formulrio ou URL de outra pgina. A funo do comportamento de servidor passar esses parmetros para uma terceira pgina. Por exemplo, voc pode passar os parmetros de pesquisa recebidos por uma pgina de resultados para outra pgina e evitar que o usurio digite novamente esses parmetros. Alm disso, voc pode selecionar um texto ou uma imagem da pgina para servir como o link para a pgina relacionada ou posicionar o ponteiro na pgina sem selecionar nada, e o texto do link inserido.
1 Na caixa Ir para pgina relacionada, clique em Procurar e localize o arquivo da pgina relacionada.

Caso a pgina atual envie dados para ela prpria, digite o nome do arquivo da pgina atual.
2 Caso os parmetros que voc deseja passar tenham sido recebidos diretamente de um formulrio em HTML usando

o mtodo OBTER ou estejam listados no URL da pgina, selecione a opo Parmetros de URL.
3 Caso os parmetros que voc deseja passar tenham sido recebidos diretamente de um formulrio em HTML usando

o mtodo POSTAR, selecione a opo Parmetros de formulrio.


4 Clique em OK.

Quando o novo link clicado, a pgina passa os parmetros para a pgina relacionada usando uma seqncia de caracteres de consulta.

Mais tpicos da Ajuda


Coleta de informaes dos usurios na pgina 656

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 620


Criao visual de aplicativos

Criao de pginas para insero de registro


Sobre a criao de pginas para insero de registro
O aplicativo pode conter uma pgina que permite aos usurios inserir novos registros em um banco de dados. Para obter um tutorial sobre a criao de uma pgina para insero de registro, consulte www.adobe.com/go/learn_dw_webapp_br. Uma pgina para insero consiste em dois blocos de criao:

Um formulrio em HTML que permite aos usurios inserir dados Um comportamento de servidor Inserir registro que atualiza o banco de dados
Quando um usurio clica em Enviar em um formulrio, o comportamento de servidor insere registros em uma tabela do banco de dados. Voc pode adicionar esses blocos de criao em uma nica operao usando o objeto de dados Registrar formulrio de insero ou pode adicion-los separadamente usando as ferramentas de formulrio do Dreamweaver e o painel Comportamentos de servidor. Nota: A pgina para insero pode conter apenas um comportamento de servidor para edio do registro por vez. Por exemplo, voc no pode adicionar um comportamento de servidor Atualizar registro ou Excluir registro pgina para insero.

Criar uma pgina para insero bloco por bloco


Voc tambm pode criar uma pgina para insero usando as ferramentas de formulrio e os comportamentos de servidor.

Mais tpicos da Ajuda


Criao de formulrios da Web na pgina 659

Adicionar um formulrio em HTML a uma pgina para insero


1 Crie uma pgina dinmica (Arquivo > Novo > Pgina em branco) e crie o layout da pgina usando as ferramentas

de design do Dreamweaver.
2 Adicione um formulrio em HTML colocando o ponto de insero onde voc deseja que o formulrio seja exibido

e selecionando Inserir > Formulrio > Formulrio. criado um formulrio vazio na pgina. Voc talvez precise ativar os Elementos invisveis (Exibir > Auxlios visuais > Elementos invisveis) para ver os limites do formulrio, representados por linhas finas em vermelho.
3 Nomeie o formulrio em HTML clicando na tag <form> na parte inferior da janela Documento para selecionar o

formulrio, abrindo o Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulrio. Voc no precisa especificar um atributo action ou method para o formulrio a fim de inform-lo para onde e como enviar os dados do registro quando o usurio clicar no boto Enviar. O comportamento de servidor Inserir registro define esses atributos para voc.
4 Adicione um objeto de formulrio como, por exemplo, um campo de texto (Inserir > Formulrio > Campo de

texto) para cada coluna na tabela do banco de dados em que deseja inserir os registros. Os objetos de formulrio se destinam entrada de dados. Os campos de texto so comuns a esse propsito, mas voc tambm pode usar menus, opes e botes de opo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 621


Criao visual de aplicativos

5 Adicione um boto Enviar ao formulrio (Inserir > Formulrio > Boto).

Voc pode alterar o rtulo do boto Enviar selecionando o boto, abrindo o Inspetor de propriedades (Janela > Propriedades) e inserindo um novo valor na caixa Rtulo.

Adicionar um comportamento de servidor para inserir registros em uma tabela do banco de dados (ColdFusion)
1 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Inserir registro no menu pop-up.


2 Selecione um formulrio no menu pop-up Enviar valores de. 3 No menu pop-up Fonte de dados, selecione uma conexo com o banco de dados. 4 Digite o nome do usurio e a senha. 5 No menu pop-up Inserir em uma tabela, selecione a tabela do banco de dados em que o registro deve ser inserido. 6 Especifique uma coluna do banco de dados em que o registro deve ser inserido, selecione o objeto de formulrio

que ir inserir o registro no menu pop-up Valor e um tipo de dados para o objeto de formulrio no menu pop-up Enviar como. O tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo booleanos). Repita o procedimento para todos os objetos no formulrio.
7 Na caixa Ir para, Aps a insero, insira a pgina a ser aberta aps a insero do registro na tabela ou clique no boto

Procurar para procurar o arquivo.


8 Clique em OK.

O Dreamweaver adiciona um comportamento de servidor pgina que permite aos usurios inserir registros em uma tabela do banco de dados preenchendo o formulrio em HTML e clicando no boto Enviar.

Adicionar um comportamento de servidor para inserir registros em uma tabela do banco de dados (ASP)
1 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Inserir registro no menu pop-up.


2 No menu pop-up Conexo, selecione uma conexo com o banco de dados.

Clique no boto Definir caso voc precise definir uma conexo.


3 No menu pop-up Inserir em uma tabela, selecione a tabela do banco de dados em que o registro deve ser inserido. 4 Na caixa Ir para, Aps a insero, insira a pgina a ser aberta aps a insero do registro na tabela ou clique em

Procurar para procurar o arquivo.


5 No menu pop-up Obter valores em, selecione o formulrio em HTML usando na insero dos dados.

O Dreamweaver seleciona automaticamente o primeiro formulrio da pgina.


6 Especifique uma coluna do banco de dados em que o registro deve ser inserido, selecione o objeto de formulrio

que ir inserir o registro no menu pop-up Valor e um tipo de dados para o objeto de formulrio no menu pop-up Enviar como. O tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo booleanos). Repita o procedimento para todos os objetos no formulrio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 622


Criao visual de aplicativos

7 Clique em OK.

O Dreamweaver adiciona um comportamento de servidor pgina que permite aos usurios inserir registros em uma tabela do banco de dados preenchendo o formulrio em HTML e clicando no boto Enviar. Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor) e clique duas vezes no comportamento Inserir registro.

Adicionar um comportamento de servidor para inserir registros em uma tabela do banco de dados (PHP)
1 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Inserir registro no menu pop-up.


2 Selecione um formulrio no menu pop-up Enviar valores de. 3 No menu pop-up Conexo, selecione uma conexo com o banco de dados. 4 No menu pop-up Inserir tabela, selecione a tabela do banco de dados em que o registro deve ser inserido. 5 Especifique uma coluna do banco de dados em que o registro deve ser inserido, selecione o objeto de formulrio

que ir inserir o registro no menu pop-up Valor e um tipo de dados para o objeto de formulrio no menu pop-up Enviar como. O tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo booleanos). Repita o procedimento para todos os objetos no formulrio.
6 Na caixa Ir para, Aps a insero, insira a pgina a ser aberta aps a insero do registro na tabela ou clique no boto

Procurar para procurar o arquivo.


7 Clique em OK.

O Dreamweaver adiciona um comportamento de servidor pgina que permite aos usurios inserir registros em uma tabela do banco de dados preenchendo o formulrio em HTML e clicando no boto Enviar.

Criar a pgina para insero em uma nica operao


1 Abra a pgina na Visualizao de design e selecione Inserir > Objetos de dados > Inserir registro > Assistente para

registrar formulrio de insero.


2 No menu pop-up Conexo, selecione uma conexo com o banco de dados. Clique em Definir caso voc precise

definir uma conexo.


3 No menu pop-up Inserir em uma tabela, selecione a tabela do banco de dados em que o registro deve ser inserido. 4 Caso voc use o ColdFusion, digite um nome de usurio e senha. 5 Na caixa Ir para, Aps a insero, insira a pgina a ser aberta aps a insero do registro na tabela ou clique no boto

Procurar para procurar o arquivo.


6 Na rea Campos de formulrio, especifique os objetos de formulrio que voc deseja incluir no formulrio em

HTML da pgina para insero e quais colunas da tabela do banco de dados cada objeto de formulrio deve atualizar. Por padro, o Dreamweaver cria um objeto de formulrio para cada coluna na tabela do banco de dados. Caso o banco de dados gere automaticamente IDs de chave exclusiva para cada novo registro criado, remova o objeto de formulrio correspondente coluna da chave selecionando-o na lista e clicando no boto de subtrao (-). Isso elimina o risco de que o usurio do formulrio insira um valor de ID j existente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 623


Criao visual de aplicativos

Voc tambm pode alterar a ordem dos objetos no formulrio em HTML selecionando um objeto de formulrio na lista e clicando na seta para cima ou para baixo direita da caixa de dilogo.
7 Especifique como cada campo de entrada de dados deve ser exibido no formulrio em HTML clicando em uma

linha na tabela Campos de formulrio e inserindo as seguintes informaes nas caixas abaixo da tabela:

Na caixa Rtulo, digite um rtulo descritivo a ser exibido ao lado do campo de entrada de dados. Por padro, o
Dreamweaver exibe o nome da coluna da tabela no rtulo.

No menu pop-up Exibir como, selecione um objeto de formulrio para servir como campo de entrada de dados.
Voc pode selecionar Campo de texto, rea de texto, Menu, Caixa de seleo, Grupo de botes de opo e Texto. Para entradas somente leitura, selecione Texto. Voc tambm pode selecionar Campo de senha, Campo de arquivo e Campo oculto. Nota: Os campos ocultos so inseridos ao final do formulrio.

No menu pop-up Enviar como, selecione o formato de dados aceito pela tabela do banco de dados. Por exemplo,
caso a coluna da tabela aceite apenas dados numricos, selecione Numrico.

Defina as propriedades do objeto de formulrio. Voc conta com opes diferentes dependendo do objeto de
formulrio selecionado por voc como o campo de entrada de dados. Para campos de texto, reas de texto e texto, voc pode inserir um valor inicial. Para menus e grupos de botes de opo, voc abre outra caixa de dilogo a fim de definir as propriedades. Para opes, selecione a opo Marcado ou Desmarcado.
8 Clique em OK.

O Dreamweaver adiciona um formulrio em HTML e um comportamento de servidor Inserir registro pgina. Os objetos de formulrio so colocados em uma tabela bsica, que voc pode personalizar usando as ferramentas de design de pgina do Dreamweaver. (Verifique se todos os objetos continuam dentro dos limites do formulrio.) Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor) e clique duas vezes no comportamento Inserir registro.

Criao de pginas para atualizar um registro


Sobre as pginas de atualizao do registro
O aplicativo pode conter um conjunto de pginas que permite aos usurios atualizar registros existentes em uma tabela do banco de dados. As pginas normalmente consistem em uma pgina de pesquisa, uma pgina de resultados e uma pgina de atualizao. As pginas de pesquisa e de resultados permitem aos usurios recuperar o registro e a pgina de atualizao permite aos usurios modific-lo.

Procurar o registro a ser atualizado


Quando querem atualizar um registro, os usurios devem inicialmente localiz-lo no banco de dados. Dessa forma, voc precisa de uma pgina de pesquisa e resultados para usar a pgina de atualizao. O usurio insere os critrios na pgina de pesquisa e seleciona o registro na pgina de resultados. Quando o usurio clica no registro da pgina de resultados, a pgina de atualizao aberta exibindo o registro em um formulrio em HTML.

Mais tpicos da Ajuda


Criao de pginas de pesquisa e de resultados na pgina 613

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 624


Criao visual de aplicativos

Criar links para a pgina de atualizao


Depois de criar as pginas de pesquisa e de resultados, voc cria links na pgina de resultados para abrir a pgina de atualizao. Em seguida, voc modifica os links para passar as IDs dos registros selecionados pelo usurio. A pgina de atualizao usa essa ID para localizar o registro solicitado no banco de dados e exibi-lo. Voc usa o mesmo processo para abrir a pgina de atualizao e passar uma ID de registro da abertura de uma pgina detalhada e da passagem de uma ID de registro. Para obter mais informaes, consulte Criar links para a pgina detalhada na pgina 608.

Mais tpicos da Ajuda


Parmetros de URL na pgina 657

Recuperar o registro a ser atualizado


Depois que a pgina de resultados passa o ID do registro para a pgina de atualizao identificando o registro a ser atualizado, a pgina de atualizao deve ler o parmetro, recuperar o registro da tabela do banco de dados e armazenlo temporariamente em um conjunto de registros.
1 Crie uma pgina no Dreamweaver e a salve.

A pgina se tornar a pgina de atualizao.


2 No painel Ligaes (Janela > Ligaes), clique no boto de adio (+) e selecione Conjunto de registros.

Caso seja exibida a caixa de dilogo avanada, clique em Simples. A caixa de dilogo avanada tem uma rea de texto para inserir instrues SQL; a simples, no.
3 Nomeie o conjunto de registros e especifique onde os dados que voc deseja atualizar esto localizados usando os

menus pop-up Conexo e Tabela.


4 Clique em Selecionado e selecione uma coluna da chave (normalmente a coluna da ID de registro) e as colunas que

contm os dados a serem atualizados.


5 Configure a rea Filtro de forma que o valor da coluna da chave seja igual ao valor do parmetro de URL

correspondente passado pela pgina de resultados. O tipo de filtro cria um conjunto de registros que contm apenas o registro especificado pela pgina de resultados. Por exemplo, caso a coluna da chave contenha informaes da ID de registro e se chame PRID e caso a pgina de resultados passe as informaes da ID de registro correspondente no parmetro de URL chamado id, a rea Filtro deve ser semelhante ao seguinte exemplo:

6 Clique em OK.

Quando o usurio seleciona um registro na pgina de resultados, a pgina de atualizao gera um conjunto de registros contendo apenas o registro selecionado.

Concluir a pgina de atualizao bloco por bloco


Uma pgina de atualizao tem trs blocos de criao:

Um conjunto de registros filtrado para recuperar o registro de uma tabela do banco de dados

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 625


Criao visual de aplicativos

Um formulrio em HTML para permitir aos usurios modificar os dados do registro Um comportamento de servidor Atualizar registro para atualizar a tabela do banco de dados
Voc pode adicionar separadamente os dois blocos de criao bsicos finais de uma pgina de atualizao usando as ferramentas de formulrio e o painel Comportamentos de servidor.

Mais tpicos da Ajuda


Recuperar o registro a ser atualizado na pgina 624 Criao de formulrios da Web na pgina 659

Adicionar um formulrio em HTML a uma pgina de atualizao


1 Crie uma pgina (Arquivo > Novo > Pgina em branco). Essa se torna a pgina de atualizao. 2 Crie o layout da pgina usando as ferramentas de design do Dreamweaver. 3 Adicione um formulrio em HTML colocando o ponto de insero onde voc deseja que o formulrio seja exibido

e selecionando Inserir > Formulrio > Formulrio. criado um formulrio vazio na pgina. Voc talvez precise ativar os Elementos invisveis (Exibir > Auxlios visuais > Elementos invisveis) para ver os limites do formulrio, representados por linhas finas em vermelho.
4 Nomeie o formulrio em HTML clicando na tag <form> na parte inferior da janela Documento para selecionar o

formulrio, abrindo o Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulrio. Voc no precisa especificar um atributo action ou method para o formulrio a fim de inform-lo para onde e como enviar os dados do registro quando o usurio clicar no boto Enviar. O comportamento de servidor Atualizar registro define esses atributos para voc.
5 Adicione um objeto de formulrio como, por exemplo, um campo de texto (Inserir > Formulrio > Campo de

texto) para cada coluna a ser atualizada na tabela do banco de dados. Os objetos de formulrio se destinam entrada de dados. Os campos de texto so comuns a esse propsito, mas voc tambm pode usar menus, opes e botes de opo. Cada objeto de formulrio deve ter uma coluna correspondente no conjunto de registros definido anteriormente. A nica exceo a coluna de chave exclusiva, que no deve ter nenhum objeto de formulrio correspondente.
6 Adicione um boto Enviar ao formulrio (Inserir > Formulrio > Boto).

Voc pode alterar o rtulo do boto Enviar selecionando o boto, abrindo o Inspetor de propriedades (Janela > Propriedades) e inserindo um novo valor na caixa Rtulo.

Exibir o registro no formulrio


1 Verifique se voc definiu um conjunto de registros para manter o registro a ser atualizado pelo usurio.

Consulte Recuperar o registro a ser atualizado na pgina 624.


2 Ligue todos os objetos de formulrio no conjunto de registro conforme a descrio nas seguintes etapas:

Exibir contedo dinmico em campos de texto em HTML na pgina 669 Pr-selecionar dinamicamente uma caixa de seleo em HTML na pgina 670 Pr-selecionar dinamicamente um boto de opo em HTML na pgina 670 Inserir ou alterar um menu dinmico de formulrio HTML na pgina 668 Tornar os menus de formulrio em HTML dinmicos na pgina 669

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 626


Criao visual de aplicativos

Adicionar um comportamento de servidor para atualizar a tabela do banco de dados


1 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Atualizar registro no menu pop-up. A caixa de dilogo Atualizar registro exibida.
2 Selecione um formulrio no menu pop-up Enviar valores de. 3 No menu pop-up Fonte de dados ou Conexo, selecione uma conexo com o banco de dados. 4 Digite o nome do usurio e a senha, se aplicvel. 5 No menu pop-up Atualizar tabela, selecione a tabela do banco de dados que contm o registro da atualizao. 6 (ColdFusion, PHP) Especifique uma coluna do banco de dados a ser atualizada, selecione o objeto de formulrio

que atualizar a coluna no menu pop-up Valor, escolha o tipo de dados do objeto de formulrio no menu pop-up Enviar como e selecione Chave primria, caso queira identificar essa coluna como a chave primria. O tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo booleanos). Repita o procedimento para todos os objetos no formulrio.
7 (ASP) No menu pop-up Selecionar registro em, especifique o conjunto de registros que contm o registro exibido

no formulrio em HTML. No menu pop-up Coluna de chave exclusiva, selecione uma coluna de chave (normalmente a coluna da ID de registro) para identificar o registro na tabela do banco de dados. Selecione a opo Numrico, caso o valor seja um nmero. Uma coluna de chave normalmente aceita apenas valores numricos, embora aceite valores de texto s vezes.
8 Na caixa Ir para, Aps a atualizao ou Se obtiver xito, insira a pgina a ser aberta aps a atualizao do registro

na tabela ou clique no boto Procurar para procurar o arquivo.


9 (ASP) Especifique uma coluna do banco de dados a ser atualizada, selecione o objeto de formulrio que ir atualizar

a coluna no menu pop-up Valor e um tipo de dados para o objeto de formulrio no menu pop-up Enviar como. O tipo de dados o tipo que a coluna na tabela do banco de dados est esperando (texto, numrico, valores de opo booleanos). Repita o procedimento para todos os formulrios.
10 Clique em OK.

O Dreamweaver adiciona um comportamento de servidor pgina que permite aos usurios atualizar registros em uma tabela do banco de dados modificando as informaes exibidas no formulrio em HTML e clicando no boto Enviar. Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor) e clique duas vezes no comportamento Atualizar registro.

Concluir a pgina de atualizao em uma nica operao


Uma pgina de atualizao tem trs blocos de criao:

Um conjunto de registros filtrado para recuperar o registro de uma tabela do banco de dados Um formulrio em HTML para permitir aos usurios modificar os dados do registro Um comportamento de servidor Atualizar registro para atualizar a tabela do banco de dados
Voc pode adicionar os dois blocos de criao finais de uma pgina de atualizao em uma nica operao usando o objeto de dados Registrar formulrio de atualizao. O objeto de dados adiciona um formulrio em HTML e um comportamento de servidor Atualizar registro pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 627


Criao visual de aplicativos

Para que voc possa usar o objeto de dados, o aplicativo da Web deve ser capaz de identificar o registro a ser atualizado e a pgina de atualizao deve ser capaz de recuper-lo. Depois que o objeto de dados coloca os blocos de criao na pgina, voc pode usar as ferramentas de design do Dreamweaver para personalizar o formulrio ao seu gosto, ou o painel Comportamentos de servidor para editar o comportamento de servidor Atualizar registro. Nota: A pgina de atualizao pode conter apenas um comportamento de servidor para edio do registro por vez. Por exemplo, voc no pode adicionar um comportamento de servidor Inserir registro ou Excluir registro pgina de atualizao.
1 Abra a pgina na Visualizao de design e selecione Inserir > Objetos de dados > Atualizar registro > Assistente

para registrar formulrio de atualizao. A caixa de dilogo Registrar formulrio de atualizao exibida.
2 No menu pop-up Conexo, selecione uma conexo com o banco de dados.

Clique no boto Definir caso voc precise definir uma conexo.


3 No menu pop-up Tabela a ser atualizada, selecione a tabela do banco de dados que contm o registro da atualizao. 4 No menu pop-up Selecionar registro em, especifique o conjunto de registros que contm o registro exibido no

formulrio em HTML.
5 No menu pop-up Coluna de chave exclusiva, selecione uma coluna de chave (normalmente a coluna da ID de

registro) para identificar o registro na tabela do banco de dados. Caso o valor seja um nmero, selecione a opo Numrico. Uma coluna de chave normalmente aceita apenas valores numricos, embora aceite valores de texto s vezes.
6 Em Aps a atualizao, caixa Ir para, insira a pgina a ser aberta aps a atualizao do registro na tabela. 7 Na rea Campos de formulrio, especifique quais colunas da tabela do banco de dados cada objeto de formulrio

deve atualizar. Por padro, o Dreamweaver cria um objeto de formulrio para cada coluna na tabela do banco de dados. Caso o banco de dados gere automaticamente IDs de chave exclusiva para cada novo registro criado, remova o objeto de formulrio correspondente coluna da chave selecionando-o na lista e clicando no boto de subtrao (-). Isso elimina o risco de que o usurio do formulrio insira um valor de ID j existente. Voc tambm pode alterar a ordem dos objetos no formulrio em HTML selecionando um objeto de formulrio na lista e clicando na seta para cima ou para baixo direita da caixa de dilogo.
8 Especifique como cada campo de entrada de dados deve ser exibido no formulrio em HTML clicando em uma

linha na tabela Campos de formulrio e inserindo as seguintes informaes nas caixas abaixo da tabela:

Na caixa Rtulo, digite um rtulo descritivo a ser exibido ao lado do campo de entrada de dados. Por padro, o
Dreamweaver exibe o nome da coluna da tabela no rtulo.

No menu pop-up Exibir como, selecione um objeto de formulrio para servir como campo de entrada de dados.
Voc pode selecionar Campo de texto, rea de texto, Menu, Caixa de seleo, Grupo de botes de opo e Texto. Para entradas somente leitura, selecione Texto. Voc tambm pode selecionar Campo de senha, Campo de arquivo e Campo oculto. Nota: Os campos ocultos so inseridos ao final do formulrio.

No menu pop-up Enviar como, selecione o formato de dados esperado pela tabela do banco de dados. Por exemplo,
caso a coluna da tabela aceite apenas dados numricos, selecione Numrico.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 628


Criao visual de aplicativos

Defina as propriedades do objeto de formulrio. Voc conta com opes diferentes dependendo do objeto de
formulrio selecionado por voc como o campo de entrada de dados. Para campos de texto, reas de texto e texto, voc pode inserir um valor inicial. Para menus e grupos de botes de opo, voc abre outra caixa de dilogo a fim de definir as propriedades. Para opes, selecione a opo Marcado ou Desmarcado.
9 Defina as propriedades dos demais objetos de formulrio selecionando outra linha Campos de formulrio e

digitando um rtulo, valor Exibir como e valor Enviar como. Para menus e grupos de botes de opo, abra outra caixa de dilogo a fim de definir as propriedades. Para opes, defina uma comparao entre o valor do registro atual da opo e um determinado valor para saber se a opo est marcada quando o registro exibido.
10 Clique em OK.

O Dreamweaver adiciona um formulrio em HTML e um comportamento de servidor Atualizar registro pgina. O objeto de dados adiciona um formulrio em HTML e um comportamento de servidor Atualizar registro pgina. Os objetos de formulrio so colocados em uma tabela bsica, que voc pode personalizar usando as ferramentas de design de pgina do Dreamweaver. (Verifique se todos os objetos continuam dentro dos limites do formulrio.) Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor) e clique duas vezes no comportamento Atualizar registro.

Mais tpicos da Ajuda


Recuperar o registro a ser atualizado na pgina 624 Inserir ou alterar um menu dinmico de formulrio HTML na pgina 668

Opes de Propriedades do elemento de formulrio


O propsito da caixa de dilogo Propriedades do elemento de formulrio definir as opes dos elementos de formulrio em pginas que permitam aos usurios atualizar registros de um banco de dados.
1 Selecione Manualmente ou No banco de dados, dependendo da forma como planeja criar o elemento de

formulrio.
2 Clique no boto de adio (+) para adicionar um elemento. 3 Digite um rtulo e um valor para o elemento. 4 Na caixa Selecionar valor igual a, caso voc queira que um determinado elemento esteja selecionado quando a

pgina for aberta em um navegador ou quando um registro for exibido no formulrio, insira um valor igual ao do elemento. Voc pode inserir um valor esttico ou especificar um valor dinmico clicando no cone do raio e selecionando um valor dinmico na lista das fontes de dados. Em ambos os casos, o valor especificado deve ser correspondente a um dos valores do elemento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 629


Criao visual de aplicativos

Criao de pginas para excluir um registro


Sobre as pginas de excluso do registro
O aplicativo pode conter um conjunto de pginas que permite aos usurios excluir registros de um banco de dados. As pginas normalmente consistem em uma pgina de pesquisa, uma pgina de resultados e uma pgina de excluso. Uma pgina de excluso costuma ser uma pgina detalhada funcionando em conjunto com uma pgina de resultados. As pginas de pesquisa e de resultados permitem ao usurio recuperar o registro e a pgina de excluso, confirmar e exclu-lo. Depois de criar as pginas de pesquisa e de resultados, voc adiciona links na pgina de resultados para abrir a pgina de excluso e, em seguida, criar uma pgina que exiba os registros e um boto Enviar.

Procurar o registro a ser excludo


Quando querem excluir um registro, os usurios devem inicialmente localiz-lo no banco de dados. Dessa forma, voc precisa de uma pgina de pesquisa e resultados para usar a pgina de excluso. O usurio insere os critrios na pgina de pesquisa e seleciona o registro na pgina de resultados. Quando o usurio clica no registro, a pgina de excluso aberta exibindo o registro em um formulrio em HTML.

Mais tpicos da Ajuda


Criao de pginas de pesquisa e de resultados na pgina 613

Criar links para uma pgina de excluso


Depois de criar as pginas de pesquisa e de resultados, voc deve criar links na pgina de resultados para abrir a pgina de excluso. Em seguida, voc modifica os links para passar as IDs dos registros a serem excludos pelo usurio. A pgina de excluso usa essa ID para localizar e exibir o registro.

Mais tpicos da Ajuda


Parmetros de URL na pgina 657

Para criar manualmente os links


1 Na pgina de resultados, crie uma coluna na tabela usada para exibir os registros clicando dentro da ltima coluna

da tabela e selecionando Modificar > Tabela > Inserir linhas ou colunas.


2 Selecione as opes Colunas e Aps coluna atual e clique em OK.

Uma coluna adicionada tabela.


3 Na coluna da tabela recm-criada, digite a seqncia de caracteres Delete na linha que contm os alocadores de

espao do contedo dinmico. Verifique se voc digitou a seqncia de caracteres na regio com abas repetitivas. Voc tambm pode inserir uma imagem com uma palavra ou smbolo a ser excludo.
4 Selecione a seqncia de caracteres Delete para aplicar um link a ela. 5 No Inspetor de propriedades, insira a pgina de excluso na caixa Link. Voc pode digitar qualquer nome de

arquivo. Aps o clique fora da caixa Link, a seqncia de caracteres Delete exibida vinculada tabela. Se ativar Visualizao dinmica, voc pode ver se o link est aplicado ao mesmo texto em todas as linhas da tabela.
6 Selecione o link Excluir na pgina de resultados.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 630


Criao visual de aplicativos

7 (ColdFusion) Na caixa Link do Inspetor de propriedades, adicione esta seqncia de caracteres ao final do URL:
?recordID=#recordsetName.fieldName#

O ponto de interrogao informa ao servidor de que se trata de um ou mais parmetros de URL. A palavra recordID o nome do parmetro do URL (voc pode dar a ele o nome que quiser). Anote o nome do parmetro do URL porque voc o usar na pgina de excluso posteriormente. A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso do ColdFusion que retorna a ID de um registro do conjunto de registros. gerada uma ID diferente para cada linha da tabela dinmica. Na expresso do ColdFusion, substitua recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do campo do conjunto de registros que identifica com exclusividade cada registro. Na maior parte dos casos, o campo consistir no nmero da ID de um registro. No seguinte exemplo, o campo consiste em cdigos de local exclusivos:
confirmDelete.cfm?recordID=#rsLocations.CODE#

Quando a pgina executada, os valores do campo CODE do conjunto de registros so inseridos nas linhas correspondentes da tabela dinmica. Por exemplo, caso Canberra, Austrlia, o local da locao, apresente o cdigo CBR, o seguinte URL usado na linha Canberra da tabela dinmica:
confirmDelete.cfm?recordID=CBR

8 (PHP) No campo Link do Inspetor de propriedades, adicione esta seqncia de caracteres ao final do URL:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>

O ponto de interrogao informa ao servidor de que se trata de um ou mais parmetros de URL. A palavra recordID o nome do parmetro do URL (voc pode dar a ele o nome que quiser). Anote o nome do parmetro do URL porque voc o usar na pgina de excluso posteriormente. A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso do PHP que retorna a ID de um registro do conjunto de registros. gerada uma ID diferente para cada linha da tabela dinmica. Na expresso do PHP, substitua recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do campo do conjunto de registros que identifica com exclusividade cada registro. Na maior parte dos casos, o campo consistir no nmero da ID de um registro. No seguinte exemplo, o campo consiste em cdigos de local exclusivos:
confirmDelete.php?recordID=<?php echo $row_rsLocations['CODE']; ?>

Quando a pgina executada, os valores do campo CODE do conjunto de registros so inseridos nas linhas correspondentes da tabela dinmica. Por exemplo, caso Canberra, Austrlia, o local da locao, apresente o cdigo CBR, o seguinte URL usado na linha Canberra da tabela dinmica:
confirmDelete.php?recordID=CBR

9 (ASP) No campo Link do Inspetor de propriedades, adicione esta seqncia de caracteres ao final do URL:
?recordID=<%=(recordsetName.Fields.Item("fieldName").Value)%>

O ponto de interrogao informa ao servidor de que se trata de um ou mais parmetros de URL. A palavra recordID o nome do parmetro do URL (voc pode dar a ele o nome que quiser). Anote o nome do parmetro do URL porque voc o usar na pgina de excluso posteriormente. A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso do ASP que retorna a ID de registro do conjunto de registros. gerada uma ID diferente para cada linha da tabela dinmica. Na expresso do ASP, substitua recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do campo do conjunto de registros que identifica com exclusividade cada registro. Na maior parte dos casos, o campo consistir no nmero da ID de um registro. No seguinte exemplo, o campo consiste em cdigos de local exclusivos:
confirmDelete.asp?recordID=<%=(rsLocations.Fields.Item("CODE").Value)%>

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 631


Criao visual de aplicativos

Quando a pgina executada, os valores do campo CODE do conjunto de registros so inseridos nas linhas correspondentes da tabela dinmica. Por exemplo, caso Canberra, Austrlia, o local da locao, apresente o cdigo CBR, o seguinte URL usado na linha Canberra da tabela dinmica:
confirmDelete.asp?recordID=CBR

10 Salve a pgina.

Para criar visualmente os links (apenas em ASP)


1 Na pgina de resultados, crie uma coluna na tabela usada para exibir os registros clicando dentro da ltima coluna

da tabela e selecionando Modificar > Tabela > Inserir linhas ou colunas.


2 Selecione as opes Colunas e Aps coluna atual e clique em OK.

Uma coluna adicionada tabela.


3 Na coluna da tabela recm-criada, digite a seqncia de caracteres Delete na linha que contm os alocadores de

espao do contedo dinmico. Verifique se voc digitou a seqncia de caracteres na regio com abas repetitivas. Voc tambm pode inserir uma imagem com uma palavra ou smbolo a ser excludo.
4 Selecione a seqncia de caracteres Delete para aplicar um link a ela. 5 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Ir para pgina detalhada no menu pop-up.


6 Na caixa Pgina detalhada, clique em Procurar e localize a pgina de excluso. 7 Na caixa Repassar parmetro de URL, especifique o nome do parmetro, como recordID.

Voc pode inventar o nome que quiser, mas anote o nome, porque depois ser usado na pgina de excluso.
8 Especifique o valor que voc deseja passar para a pgina de excluso selecionando um conjunto de registros e uma

coluna nos menus pop-up Conjunto de registros e Coluna. Normalmente, o valor exclusivo do registro como, por exemplo, a ID de chave exclusiva.
9 Selecione a opo Parmetros de URL. 10 Clique em OK.

Um link especial contorna o texto selecionado. Quando o usurio clica no link, o comportamento de servidor Ir para pgina detalhada passa um parmetro do URL que contm a ID do registro para a pgina de excluso especificada. Por exemplo, caso o parmetro do URL se chame recordID e a pgina de excluso, confirmdelete.asp, quando o usurio clica no link, o URL permanece semelhante seguinte: http://www.mysite.com/confirmdelete.asp?recordID=43 A primeira parte do URL, http://www.mysite.com/confirmdelete.asp, abre a pgina de excluso. J a segunda parte, ?recordID=43, o parmetro do URL. Ela informa pgina de excluso qual registro localizar e exibir. O termo recordID o nome do parmetro do URL e 43 seu valor. Nesse exemplo, o parmetro do URL contm o nmero da ID do registro, 43.

Criar a pgina de excluso


Depois de concluir a pgina que lista os registros, alterne para a pgina de excluso. A pgina de excluso mostra o registro e pergunta ao usurio se ele tem certeza de que deseja exclu-lo. Quando o usurio confirma a operao clicando no boto de formulrio, o aplicativo da Web exclui o registro do banco de dados.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 632


Criao visual de aplicativos

Criar essa pgina consiste na criao de um formulrio em HTML, na recuperao do registro a ser exibido no formulrio, na exibio do registro no formulrio e na adio da lgica para exclu-lo do banco de dados. Recuperar e exibir o registro consiste na definio de um conjunto de registros para manter um nico registro aquele que o usurio deseja excluir e na ligao das colunas do conjunto ao formulrio. Nota: A pgina de excluso pode conter apenas um comportamento de servidor para edio do registro por vez. Por exemplo, voc no pode adicionar um comportamento de servidor Inserir registro ou Atualizar registro pgina de excluso.

Criar um formulrio em HTML para exibir o registro


1 Crie uma pgina e a salve como a pgina de excluso especificada na seo anterior.

Voc especificou uma pgina de excluso ao criar o link Excluir na seo anterior. Use esse nome ao salvar o arquivo pela primeira vez (por exemplo, deleteConfirm.cfm).
2 Insira um formulrio em HTML na pgina (Inserir > Formulrio > Formulrio). 3 Adicione um campo de formulrio oculto ao formulrio.

O campo de formulrio oculto obrigatrio para armazenar a ID do registro passada pelo parmetro de URL. Para adicionar um campo oculto, coloque o ponto de insero no formulrio e selecione Inserir > Formulrio > Campo oculto.
4 Adicione um boto ao formulrio.

O usurio clicar no boto para confirmar e excluir o registro exibido. Para adicionar um boto, coloque o ponto de insero no formulrio e selecione Inserir > Formulrio > Boto.
5 Melhore o design da pgina da forma que desejar e a salve.

Recuperar o registro que o usurio deseja excluir


1 No painel Ligaes (Janela > Ligaes), clique no boto de adio (+) e selecione Conjunto de registros (consulta)

no menu pop-up. A caixa de dilogo Conjunto de registros ou Conjunto de dados simples exibida. Caso seja exibida a caixa de dilogo Conjunto de registros avanada em seu lugar, clique em Simples.
2 Nomeie o conjunto de registros e selecione uma fonte de dados, alm da tabela do banco de dados que contm os

registros que os usurios podem excluir.


3 Na rea Colunas, selecione as colunas da tabela (campos de registro) que deseja exibir na pgina.

Para exibir apenas alguns dos campos de registro, clique em Selecionado e escolha os campos desejados clicando neles com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista. No se esquea de incluir o campo da ID do registro, mesmo que voc no v exibi-lo.
4 Complete a seo Filtro da seguinte forma para localizar e exibir o registro especificado no parmetro do URL

passado pela pgina de resultados:

No primeiro menu pop-up da rea Filtro, selecione a coluna do conjunto de registros que contm valores
correspondentes ao valor do parmetro do URL passado pela pgina com os links Excluir. Por exemplo, caso o parmetro do URL contenha o nmero de uma ID de registro, selecione a coluna que contm os nmeros da ID de registro. No exemplo abordado na seo anterior, a coluna do conjunto de registros chamada CODE contm os valores correspondentes ao valor do parmetro do URL passado pela pgina com os links Excluir.

No menu pop-up ao lado do primeiro menu, selecione o sinal de igual, caso ele ainda no esteja selecionado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 633


Criao visual de aplicativos

No terceiro menu pop-up, selecione Parmetro do URL. A pgina com os links Excluir usa um parmetro de URL
para passar informaes pgina de excluso.

Na quarta caixa, digite o nome do parmetro do URL passado pela pgina com os links Excluir.

5 Clique em OK.

O conjunto de registros exibido no painel Ligaes.

Exibir o registro que o usurio deseja excluir


1 Selecione as colunas do conjunto de registros (campos do registro) no painel Ligaes e as arraste para a pgina de

excluso. Verifique se voc inseriu esse contedo dinmico somente leitura dentro dos limites do formulrio. Para obter mais informaes sobre como inserir contedo dinmico em uma pgina, consulte Tornar texto dinmico na pgina 578. Em seguida, voc deve ligar a coluna da ID do registro ao campo de formulrio oculto.
2 Verifique se os Elementos invisveis esto ativados (Exibir > Auxlios visuais > Elementos invisveis) e, em seguida,

clique no cone do escudo amarelo que representa o campo de formulrio oculto. O campo de formulrio oculto selecionado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 634


Criao visual de aplicativos

3 No Inspetor de propriedades, clique no cone do raio ao lado da caixa Valor. 4 Na caixa de dilogo Dados dinmicos, selecione a coluna da ID do registro no conjunto de registros.

No seguinte exemplo, a coluna da ID do registro, CODE, contm cdigos de armazenamento exclusivos.

Coluna da ID do registro selecionada

5 Clique em OK e salve a pgina.

Pgina de excluso concluda

Adicionar lgica para excluir o registro


Depois de exibir o registro selecionado na pgina de excluso, voc deve adicionar lgica pgina que exclui o registro do banco de dados quando o usurio clica no boto Confirmar excluso. Voc pode adicionar essa lgica de maneira rpida e fcil usando o comportamento de servidor Excluir registro.

Para adicionar um comportamento de servidor para excluir o registro (ColdFusion, PHP)


1 Verifique se a pgina de excluso do ColdFusion ou PHP est aberta no Dreamweaver.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 635


Criao visual de aplicativos

2 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Excluir registro.


3 Na caixa Primeiro verifique se a varivel est definida, verifique se o Valor de chave primria est selecionado.

Voc especifica o valor de chave primria na caixa de dilogo.


4 No menu pop-up Fonte de dados ou Conexo (ColdFusion), selecione uma conexo com o banco de dados para

que o comportamento de servidor possa se conectar ao banco de dados afetado.


5 No menu pop-up Tabela, selecione a tabela do banco de dados que contm os registros a serem excludos. 6 No menu pop-up Coluna de chave primria, selecione a coluna da tabela que contm as IDs de registro.

O comportamento Excluir registro pesquisa a coluna em busca de uma correspondncia. A coluna deve conter os mesmos dados da ID de registro da coluna do conjunto de registros ligado ao campo de formulrio oculto na pgina. Caso a ID de registro seja um numrica, selecione a opo Numrico.
7 (PHP) No menu pop-up Valor de chave primria, selecione a varivel na pgina que contm a ID de registro

identificando o registro a ser excludo. A varivel criada pelo campo de formulrio oculto. Ela tem o mesmo nome do atributo de nome do campo oculto e um parmetro de formulrio ou de URL, dependendo do atributo de mtodo do formulrio.
8

Em Aps a excluso, caixa Ir para ou Se obtiver xito, caixa Ir para, especifique uma pgina a ser aberta aps a excluso do registro da tabela do banco de dados.

Voc pode especificar uma pgina que contenha uma breve mensagem de xito para o usurio ou uma pgina listando os registros restantes para que o usurio possa verificar se o registro foi excludo.

9 Clique em OK e salve o trabalho.

Para adicionar um comportamento de servidor para excluir o registro (ASP)


1 Verifique se a pgina de excluso de ASP est aberta no Dreamweaver. 2 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Excluir registro.


3 No menu pop-up Conexo, selecione uma conexo com o banco de dados para que o comportamento de servidor

possa se conectar ao banco de dados afetado. Clique no boto Definir caso voc precise definir uma conexo.
4 No menu pop-up Excluir da tabela, selecione a tabela do banco de dados que contm o registro a ser excludo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 636


Criao visual de aplicativos

5 No menu pop-up Selecionar registro em, especifique o conjunto de registros que contm os registros a serem

excludos.
6 No menu pop-up Coluna de chave exclusiva, selecione uma coluna de chave (normalmente a coluna da ID de

registro) para identificar o registro na tabela do banco de dados. Caso o valor seja um nmero, selecione a opo Numrico. Uma coluna de chave normalmente aceita apenas valores numricos, embora aceite valores de texto s vezes.
7 No menu pop-up Excluir ao enviar, especifique o formulrio em HTML com o boto Enviar que envia o comando

de excluso para o servidor.


8 Em Aps a excluso, caixa Ir para, especifique uma pgina a ser aberta aps a excluso do registro da tabela do

banco de dados. Voc pode especificar uma pgina que contenha uma breve mensagem de xito para o usurio ou uma pgina listando os registros restantes para que o usurio possa verificar se o registro foi excludo.
9 Clique em OK e salve o trabalho.

Teste as pginas de excluso


1 Carregue a pesquisa, os resultados e as pginas de excluso do servidor Web, abra um navegador e procure um

registro de teste descartvel a ser excludo. Quando voc clica em um link Excluir na pgina de resultados, a pgina de excluso deve ser exibida.
2 Clique no boto Confirmar para excluir o registro do banco de dados. 3 Verifique se o registro foi excludo pesquisando-o novamente. O registro no deve mais aparecer na pgina de

resultados.

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


Sobre os objetos de comando do ASP
Um objeto de comando do ASP um objeto de servidor que realiza uma determinada operao em um banco de dados. O objeto pode conter qualquer instruo SQL vlida, inclusive uma que retorna um conjunto de registros ou outra que insere, atualiza ou exclui registros em um banco de dados. Um objeto de comando pode alterar a estrutura de um banco de dados caso a instruo SQL adicione ou exclua uma coluna em uma tabela. Voc tambm pode usar um objeto de comando para executar um procedimento armazenado em um banco de dados. Um objeto de comando pode ser reutilizvel no sentido de que o servidor de aplicativo pode reutilizar uma verso compilada exclusiva do objeto para executar o comando vrias vezes. Voc torna um comando reutilizvel definindo a propriedade Preparado do objeto Comando como true, como na seguinte instruo VBScript:
mycommand.Prepared = true

Se voc souber que o comando ser executado mais de uma vez, ter uma verso compilada exclusiva do objeto pode tornar as operaes do banco de dados mais eficiente. Nota: Nem todos os fornecedores de bancos de dados do suporte a comandos preparados. Caso o banco de dados no d suporte, ele pode retornar um erro quando voc define essa propriedade como true. Ele pode at mesmo ignorar a solicitao para preparar o comando e definir a propriedade Preparado como false.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 637


Criao visual de aplicativos

Um objeto de comando criado por scripts em uma pgina em ASP, mas o Dreamweaver lhe permite criar objetos de comando sem escrever uma linha de cdigo ASP.

Usar comandos do ASP para modificar um banco de dados


Voc pode usar o Dreamweaver para criar objetos de comando do ASP que inserem, atualizam ou excluem registros em um banco de dados. Voc fornece o objeto de comando com a instruo SQL ou o procedimento armazenado que realiza a operao no banco de dados.
1 No Dreamweaver, abra a pgina do ASP que executar o comando. 2 Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+)

e selecione Comando.
3 Digite um nome para o comando, selecione uma conexo com o banco de dados que contenha os registros que voc

deseja editar e selecione a operao de edio que o comando deve realizar Inserir, Atualizar ou Excluir. O Dreamweaver inicia a instruo SQL com base no tipo de operao selecionado por voc. Por exemplo, caso voc selecione Inserir, a caixa de dilogo semelhante seguinte:

4 Conclua a instruo SQL.

Para obter informaes sobre a escrita de instrues SQL que modificam bancos de dados, consulte um manual de Transact-SQL.
5 Use a rea Variveis para definir todas as variveis SQL. Fornea o nome e o valor de runtime. A especificao do

tipo e tamanho de cada varivel impede ataques de injeo. O seguinte exemplo mostra uma instruo Inserir que contm trs variveis SQL. Os valores dessas variveis so fornecidos por parmetros de URL passados para a pgina, conforme a definio na coluna Valor de runtime da rea Variveis.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 638


Criao visual de aplicativos

Para obter o valor Tamanho, use o painel Bancos de dados do Dreamweaver. Localize o banco de dados no painel Banco de dados e o expanda. Em seguida, localize a tabela na qual voc est trabalhando e a expanda. A tabela lista os tamanhos dos campos. Por exemplo, ela pode informar ADDRESS (WChar 50). Nesse exemplo, 50 o tamanho. Voc tambm pode localizar o tamanho no aplicativo de banco de dados. Nota: Os tipos de dados Numrico, Booleano e Data/hora sempre usam -1 como tamanho. Para determinar o valor Tipo, consulte a seguinte tabela:
Tipo no banco de dados Numrico (MS Access, MS SQL Server, MySQL) Booleano, Sim/no (MS Access, MS SQL Server, MySQL) Data/hora (MS Access, MS SQL Server, MySQL) Todos os demais tipos de campo de texto, inclusive os tipos de dados de texto do MySQL char, varchar e longtext text (MS Access) ou nvarchar, nchar (MS SQL Server) Tipo no Dreamweaver Duplo Duplo DBTimeStamp LongVarChar Tamanho -1 -1 -1 verificar tabela do banco de dados verificar tabela do banco de dados 1073741823

VarWChar

memo (MS Access), ntext (MS SQL Server) ou campos que do suporte a grandes quantidades de texto

LongVarWChar

Para obter mais informaes sobre o tipo e o tamanho das variveis SQL, consulte www.adobe.com/go/4e6b330a_br.
6 Feche a caixa de dilogo.

O Dreamweaver insere o cdigo ASP na pgina que, quando executada no servidor, cria um comando que insere, atualiza ou exclui registros no banco de dados. Por padro, o cdigo define a propriedade Preparado do objeto Comando como true, o que faz o servidor de aplicativo reutilizar uma verso compilada exclusiva do objeto sempre que o comando executado. Para mudar essa configurao, alterne para a Visualizao de cdigo e altere a propriedade Preparado para false.
7 Crie uma pgina com um formulrio em HTML para que os usurios possam inserir dados de registro. No

formulrio em HTML, inclua trs campos de texto (txtCity, txtAddress e txtPhone) e um boto de envio. O formulrio usa o mtodo OBTER e envia os valores do campo de texto para a pgina que contm o comando.

Sobre os procedimentos armazenados


Embora seja possvel usar comportamentos de servidor para criar pginas que modificam bancos de dados, voc tambm pode usar objetos de manipulao de banco de dados como, por exemplo, procedimentos armazenados ou objetos de comando do ASP na criao das pginas. Um procedimento armazenado um banco de dados reutilizvel que realiza algumas operaes no banco de dados. Um procedimento armazenado contm um cdigo SQL que pode, dentre outras coisas, inserir, atualizar ou excluir registros. Os procedimentos armazenados tambm podem alterar a estrutura do banco de dados propriamente dito. Por exemplo, voc pode usar um procedimento armazenado para adicionar uma coluna de tabela ou at mesmo excluir uma tabela. Um procedimento armazenado tambm pode chamar outro procedimento armazenado, bem como aceitar parmetros de entrada e retornar vrios valores para o procedimento de chamada na forma de parmetros de sada.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 639


Criao visual de aplicativos

Um procedimento armazenado reutilizvel no sentido de que voc pode reutilizar uma verso compilada exclusiva do procedimento para executar uma operao de banco de dados vrias vezes. Se voc souber que uma tarefa de banco de dados ser executada mais de uma vez ou que a mesma tarefa ser executada por aplicativos diferentes usar um procedimento armazenado na execuo dessa tarefa pode tornar as operaes do banco de dados mais eficientes. Nota: Os bancos de dados MySQL e Microsoft Access no do suporte a procedimentos armazenados.

Adicionar um procedimento armazenado (ColdFusion)


Voc pode usar um procedimento armazenado para modificar um banco de dados. Um procedimento armazenado um banco de dados reutilizvel que realiza algumas operaes no banco de dados. Para que voc use um procedimento armazenado e modifique um banco de dados, verifique se o procedimento contm o SQL que modifica o banco de dados de alguma forma. Para criar e armazenar um no banco de dados, consulte a documentao do banco de dados e um bom manual de Transact-SQL.
1 No Dreamweaver, abra a pgina que executar o procedimento armazenado. 2 No painel Ligaes (Janela > Ligaes), clique no boto de adio (+) e selecione Procedimento armazenado. 3 No menu pop-up Fonte de dados, selecione uma conexo com o banco de dados que contm o procedimento

armazenado.
4 Digite o nome de usurio e a senha da fonte de dados do ColdFusion. 5 Selecione um procedimento armazenado no menu pop-up Procedimentos.

O Dreamweaver preenche automaticamente todos os parmetros.


6 Selecione um parmetro e clique em Editar caso tenha que fazer alteraes.

A caixa de dilogo Editar varivel do procedimento armazenado exibida. O nome da varivel que voc est editando exibido na caixa Nome. Nota: Voc deve inserir valores de teste para todos os procedimentos de entrada do procedimento armazenado.
7 Faa as alteraes conforme necessrio:

Selecione uma Direo no menu pop-up. Um procedimento armazenado pode ter valores de entrada, valores de
sada ou ambos.

Selecione um tipo de SQL no menu pop-up. Insira uma varivel de retorno, um valor de runtime e um valor de teste.
8 Caso o procedimento armazenado use um parmetro, clique no boto de adio (+) para adicionar um parmetro

de pgina. Nota: Voc deve inserir parmetros de pgina correspondentes para cada valor de retorno do parmetro de procedimento armazenado. No adicione parmetros de pgina a menos que haja um valor de retorno correspondente. Clique novamente no boto de adio (+) para adicionar outro parmetro de pgina, se necessrio.
9 Selecione um parmetro de pgina e clique no boto de subtrao (-) para exclu-lo se necessrio ou clique em

Editar para fazer as alteraes no parmetro.


10 Selecione a opo Retornar conjunto de registros nomeado e, em seguida, digite um nome para o conjunto de

registros; caso o procedimento armazenado retorne um conjunto de registros, clique no boto Testar para ver o conjunto retornado pelo procedimento armazenado. O Dreamweaver executa o procedimento armazenado e exibe o conjunto de registros, se necessrio. Nota: Caso o procedimento armazenado retorne um conjunto de registros e use parmetros, voc deve inserir um valor na coluna Valor padro da caixa Variveis para testar o procedimento armazenado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 640


Criao visual de aplicativos

Voc pode usar valores de teste diferentes para gerar conjuntos de registros diferentes. Para alterar os valores de teste, clique no boto Editar em Parmetro e altere o valor de teste, ou clique no boto Editar em Parmetros de pgina e altere o valor padro.
11 Selecione a opo Retorna cdigo de status nomeado, digite um nome para o cdigo de status, caso o procedimento

armazenado retorne um valor de retorno do cdigo de status. Clique em OK. Depois que voc fecha a caixa, o Dreamweaver insere o cdigo do ColdFusion na pgina que chama um procedimento armazenado no banco de dados, quando o cdigo executado no servidor. Por sua vez, o procedimento armazenado realiza uma operao no banco de dados como, por exemplo, inserir um registro. Caso o procedimento armazenado use parmetros, voc pode criar uma pgina que coleta os valores de parmetro os envia para a pgina com o procedimento armazenado. Por exemplo, voc pode criar uma pgina que usa parmetros de URL ou um formulrio em HTML para coletar valores de parmetro dos usurios.

Mais tpicos da Ajuda


Definir um conjunto de registros avanado escrevendo em SQL na pgina 565

Executar um procedimento armazenado (ASP)


Com pginas em ASP, voc deve adicionar um objeto de comando a uma pgina para executar um procedimento armazenado. Para obter mais informaes sobre objetos de comando, consulte Sobre os objetos de comando do ASP na pgina 636.
1 No Dreamweaver, abra a pgina que executar o procedimento armazenado. 2 No painel Ligaes (Janela > Ligaes), clique no boto de adio (+) e selecione Comando (procedimento

armazenado). A caixa de dilogo Comando exibida.


3 Digite um nome para o comando, selecione uma conexo com o banco de dados que contm o procedimento

armazenado e escolha Procedimento armazenado no menu pop-up Tipo.


4 Selecione o procedimento armazenado expandindo a ramificao Procedimentos armazenados na caixa Itens do

banco de dados, selecionando o procedimento armazenado na lista e clicando no boto Procedimento.


5 Insira todos os parmetros obrigatrios na tabela Variveis.

Voc no precisa inserir parmetros para nenhuma varivel RETURN_VALUE.


6 Clique em OK.

Depois que voc fecha a caixa de dilogo, o cdigo do ASP inserido na pgina. Quando o cdigo executado no servidor, o cdigo cria um objeto de comando que executa um procedimento armazenado no banco de dados. Por sua vez, o procedimento armazenado realiza uma operao no banco de dados como, por exemplo, inserir um registro. Por padro, o cdigo define a propriedade Preparado do objeto Comando como true, o que faz o servidor de aplicativo reutilizar uma verso compilada exclusiva do objeto sempre que o procedimento armazenado executado. Se voc souber que o comando ser executado mais de uma vez, ter uma verso compilada exclusiva do objeto pode aumentar a eficincia das operaes do banco de dados. No entanto, se o comando for executado apenas uma ou duas vezes, us-lo pode, na verdade, retardar o aplicativo da Web porque o sistema tem de parar para compilar o comando. Para mudar a configurao, alterne para a Visualizao de cdigo e altere a propriedade Preparado para false. Nota: Nem todos os fornecedores de bancos de dados do suporte a comandos preparados. Caso o banco de dados no d suporte a ele, voc talvez receba uma mensagem de erro ao executar a pgina. Alterne para a Visualizao de cdigo e altere a propriedade Preparado para false.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 641


Criao visual de aplicativos

Caso o procedimento armazenado use parmetros, voc pode criar uma pgina que coleta os valores de parmetro os envia para a pgina com o procedimento armazenado. Por exemplo, voc pode criar uma pgina que usa parmetros de URL ou um formulrio em HTML para coletar valores de parmetro dos usurios.

Criao de uma pgina de registro


Sobre as pginas de registro
O aplicativo da Web pode conter uma pgina que exige o registro dos usurios na primeira vez em que eles visitam o site. Uma pgina de registro formada pelos seguintes blocos de criao:

Uma tabela do banco de dados para armazenar informaes de logon dos usurios Um formulrio em HTML que permite aos usurios selecionar um nome de usurio e senha
Voc tambm pode usar o formulrio para obter demais informaes pessoais dos usurios.

Um comportamento de servidor Inserir registro para atualizar a tabela do banco de dados dos usurios do site Um comportamento de servidor Verificar novo nome de usurio para verificar se o nome digitado pelo usurio no
est sendo usado por outro

Mais tpicos da Ajuda


Adicionar um formulrio em HTML para a seleo de um nome de usurio e senha na pgina 642 Atualizar a tabela de usurios do banco de dados na pgina 642 Adicionar um comportamento de servidor para verificar um nome de usurio exclusivo na pgina 643

Armazenamento de informaes de logon dos usurios


Uma pgina de registro exige que uma tabela do banco de dados armazena as informaes de logon inseridas pelos usurios.

Verifique se a tabela do banco de dados contm um nome de usurio e uma coluna de senha. Caso voc queira que
os usurios conectados tenham privilgios de acesso diferentes, inclua uma coluna de privilgio de acesso.

Caso voc queira definir uma senha comum a todos os usurios do site, configure o aplicativo de banco de dados
(Microsoft Access, Microsoft SQL Server, Oracle etc.) para digitar a senha em todos os registros de novo usurio por padro. Na maioria dos aplicativos de banco de dados, voc pode definir uma coluna como um valor padro sempre que um novo registro criado. Defina o valor padro da senha.

Voc tambm pode usar a tabela do banco de dados para armazenar outras informaes teis sobre o usurio.
A prxima etapa da criao de uma pgina de registro adicionar um formulrio em HTML a ela para permitir que os usurios escolham um nome de usurio e senha (se aplicvel).

Mais tpicos da Ajuda


Armazenar privilgios de acesso no banco de dados do usurio na pgina 647

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 642


Criao visual de aplicativos

Adicionar um formulrio em HTML para a seleo de um nome de usurio e senha


Voc adiciona um formulrio em HTML pgina de registro para permitir que os usurios selecionem um nome de usurio e senha (se aplicvel).
1 Crie uma pgina (Arquivo > Novo > Pgina em branco) e crie o layout da pgina de registro usando as ferramentas

de design do Dreamweaver.
2 Adicione um formulrio em HTML colocando o ponto de insero onde voc deseja que o formulrio seja exibido

e selecionando Formulrio no menu Inserir. criado um formulrio vazio na pgina. Voc talvez precise ativar os Elementos invisveis (Exibir > Auxlios visuais > Elementos invisveis) para ver os limites do formulrio, representados por linhas finas em vermelho.
3 Nomeie o formulrio em HTML clicando na tag <form> na parte inferior da janela Documento para selecionar o

formulrio, abrindo o Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulrio. Voc no precisa especificar um atributo action ou method para o formulrio a fim de inform-lo para onde e como enviar os dados do registro quando o usurio clicar no boto Enviar. O comportamento de servidor Inserir registro define esses atributos para voc.
4 Adicione campos de texto (Inserir > Formulrio > Campo de texto) para permitir que o usurio digite um nome de

usurio e senha. O formulrio tambm pode ter mais objetos de formulrio para registrar outros dados pessoais. Voc deve adicionar rtulos (como textos ou imagens) ao lado de cada objeto de formulrio para informar suas funes aos usurios. Voc tambm deve alinhar os objetos de formulrio colocando-os dentro de uma tabela em HTML. Para obter mais informaes sobre objetos de formulrio, consulte Criao de formulrios da Web na pgina 659.
5 Adicione um boto Enviar ao formulrio (Inserir > Formulrio > Boto).

Voc pode alterar o rtulo do boto Enviar selecionando o boto, abrindo o Inspetor de propriedades (Janela > Propriedades) e inserindo um novo valor na caixa Valor. A prxima etapa da criao de uma pgina de registro adicionar o comportamento de servidor Inserir registro para inserir registros na tabela dos usurios no banco de dados.

Atualizar a tabela de usurios do banco de dados


Voc deve adicionar um comportamento de servidor Inserir registro pgina de registro para atualizar a tabela de usurios no banco de dados.
1 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Inserir registro no menu pop-up. A caixa de dilogo Inserir registro exibida.
2 Complete a caixa de dilogo, no se esquecendo de especificar a tabela de usurios no banco de dados em que os

dados dos usurios sero inseridos. Clique em OK. A etapa final da criao de uma pgina de registro verificar se o nome no foi usado por outro usurio registrado.

Mais tpicos da Ajuda


Criar uma pgina para insero bloco por bloco na pgina 620

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 643


Criao visual de aplicativos

Adicionar um comportamento de servidor para verificar um nome de usurio exclusivo


Voc pode adicionar um comportamento de servidor a uma pgina de registro que verifica se o nome de usurio exclusivo antes de adicion-lo ao banco de dados de usurios registrados. Quando o usurio clica no boto Enviar na pgina de registro, o comportamento de servidor compara o nome de usurio digitado pelo usurio com os nomes de usurio armazenados na tabela de usurios registrados de um banco de dados. Caso nenhum nome de usurio correspondente seja encontrado na tabela do banco de dados, o comportamento de servidor realiza normalmente a operao de insero do registro. Caso um nome de usurio correspondente seja encontrado, o comportamento de servidor cancela a operao de insero do registro e abre uma nova pgina (normalmente uma pgina alertando o usurio de que o nome de usurio j est sendo usado).
1 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Usar autenticao > Verificar novo nome de usurio no menu pop-up.
2 No menu pop-up Campo de nome de usurio, selecione o campo de texto de formulrio usado pelos visitantes para

digitar um nome de usurio.


3 Em Se j existir, caixa Ir para, especifique uma pgina a ser aberta caso um nome de usurio correspondente seja

encontrado na tabela do banco de dados e clique em OK. A pgina aberta deve alertar o usurio de que o nome de usurio j est sendo usado e permitir que ele tente novamente.

Criao de uma pgina de logon


Sobre as pginas de logon
O aplicativo da Web pode conter uma pgina que permite aos usurios registrados fazer logon no site. Uma pgina de logon formada pelos seguintes blocos de criao:

Uma tabela de usurios registrados do banco de dados Um formulrio em HTML para permitir aos usurios digitar um nome de usurio e senha Um comportamento de servidor Fazer logon do usurio para verificar se o nome de usurio e a senha digitados so
vlidos Uma varivel de sesso que consiste no nome de usurio criada para o usurio quando este faz logon com xito.

Mais tpicos da Ajuda


Adicionar um formulrio em HTML para permitir aos usurios fazer logon na pgina 644 Verificar o nome de usurio e a senha na pgina 644

Criar uma tabela de usurios registrados do banco de dados


Voc precisa de uma tabela de usurios registrados no banco de dados para verificar se o nome de usurio e a senha digitados na pgina de logon so vlidos.
Use o aplicativo de banco de dados e uma pgina de registro para criar a tabela. Para obter as instrues, consulte

os tpicos relacionados abaixo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 644


Criao visual de aplicativos

A prxima etapa da criao de uma pgina de logon adicionar um formulrio em HTML pgina para permitir aos usurios fazer logon. Consulte o prximo tpico para obter instrues.

Mais tpicos da Ajuda


Criao de uma pgina de registro na pgina 641

Adicionar um formulrio em HTML para permitir aos usurios fazer logon


Voc adiciona um formulrio em HTML pgina para permitir aos usurios fazer logon digitando um nome de usurio e senha.
1 Crie uma pgina (Arquivo > Novo > Pgina em branco) e crie o layout da pgina de logon usando as ferramentas

de design do Dreamweaver.
2 Adicione um formulrio em HTML colocando o ponto de insero onde voc deseja que o formulrio seja exibido

e escolhendo Formulrio no menu Inserir. criado um formulrio vazio na pgina. Voc talvez precise ativar os Elementos invisveis (Exibir > Auxlios visuais > Elementos invisveis) para ver os limites do formulrio, representados por linhas finas em vermelho.
3 Nomeie o formulrio em HTML clicando na tag <form> na parte inferior da janela Documento para selecionar o

formulrio, abrindo o Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulrio. Voc no precisa especificar um atributo action ou method para o formulrio a fim de inform-lo para onde e como enviar os dados do registro quando o usurio clicar no boto Enviar. O comportamento de servidor Fazer logon do usurio define esses atributos para voc.
4 Adicione um nome de usurio e um campo de texto de senha (Inserir > Formulrio > Campo de texto) ao

formulrio. Adicione rtulos (como textos ou imagens) ao lado de cada campo de arquivo e alinhe os campos de texto os colocando em uma tabela em HTML e definindo o atributo border da tabela como 0.
5 Adicione um boto Enviar ao formulrio (Inserir > Formulrio > Boto).

Voc pode alterar o rtulo do boto Enviar selecionando o boto, abrindo o Inspetor de propriedades (Janela > Propriedades) e inserindo um novo valor na caixa Rtulo. A prxima etapa da criao de uma pgina de logon adicionar o comportamento de servidor Fazer logon do usurio para verificar se o nome de usurio e a senha digitados so vlidos.

Verificar o nome de usurio e a senha


Voc deve adicionar um comportamento de servidor Fazer logon do usurio para verificar se o nome de usurio e a senha digitados por um usurio so vlidos. Quando um usurio clica no boto Enviar da pgina de logon, o comportamento de servidor Fazer logon do usurio compara os valores inseridos pelo usurio com os valores dos usurios registrados. Caso os valores sejam correspondentes, o comportamento de servidor abre uma pgina (normalmente, a tela Bem-vindo do site). Caso os valores no sejam correspondentes, o comportamento de servidor abre outra pgina (normalmente, a pgina que alerta o usurio de falha na tentativa de logon).
1 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Usar autenticao > Fazer logon do usurio no menu pop-up.


2 Especifique o formulrio e os objetos de formulrio usados pelos visitantes para digitar nome de usurio e senha. 3 (ColdFusion) Digite o nome do usurio e a senha, se aplicvel.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 645


Criao visual de aplicativos

4 Especifique a tabela do banco de dados e as colunas que contm os nomes de usurio e as senhas de todos os

usurios registrados. O comportamento de servidor compara o nome de usurio e a senha digitados por um visitante na pgina de logon com os valores nessas colunas.
5 Especifique uma pgina a ser aberta caso haja xito no processo de logon.

A pgina especificada costuma ser a tela Bem-vindo do site.


6 Especifique uma pgina a ser aberta caso haja falha no processo de logon.

A pgina especificada costuma alertar o usurio de que houve falha no processo de logon e permite que ele tente novamente.
7 Caso voc queira que os usurios sejam encaminhados para a pgina de logon depois de acessarem uma pgina

restrita e retornarem a esta pgina aps o logon, selecione a opo Ir para URL anterior. Caso um usurio tente acessar o site abrindo uma pgina restrita sem antes fazer o logon nela, a pgina restrita pode encaminh-lo para a pgina de logon. Depois que o usurio consegue fazer o logon, a pgina de logon o redireciona para a pgina restrita que o encaminhou inicialmente para a pgina de logon. Quando completar a caixa de dilogo para o comportamento de servidor Restringir acesso pgina nessas pginas, verifique se voc especificou a pgina de logon em Se o acesso for negado, caixa Ir para.
8 Especifique se voc deve conceder acesso pgina com base exclusivamente no nome de usurio e na senha ou

tambm de acordo com o nvel de autorizao e clique em OK. Um comportamento de servidor adicionado pgina de logon que verifica se o nome de usurio e a senha digitados por um visitante so vlidos.

Mais tpicos da Ajuda


Redirecionar usurios no autorizados na pgina 646 Criao de uma pgina que apenas usurios autorizados podem acessar na pgina 645

Criao de uma pgina que apenas usurios autorizados podem acessar


Sobre as pginas protegidas
O aplicativo da Web pode conter uma pgina protegida que apenas usurios autorizados podem acessar. Por exemplo, caso um usurio tente ignorar a pgina de logon digitando o URL da pgina protegida em um navegador, o usurio redirecionado para outra pgina. Da mesma forma, caso voc defina o nvel de autorizao de uma pgina como Administrador, apenas usurios com privilgios de acesso Administrador podem exibir a pgina. Caso um usurio conectado tente acessar a pgina protegida sem os privilgios de acesso apropriados, ele redirecionado para outra pgina. Voc tambm pode usar os nveis de autorizao para revisar usurios recm-registrados concedendo a eles acesso total ao site. Por exemplo, convm receber o pagamento antes de permitir que um usurio acesse as pginas de membro do site. Para isso, voc pode proteger as pginas de membro com um nvel de autorizao Membro e conceder a usurios recm-registrados apenas os privilgios de Convidado. Depois de receber o pagamento do usurio, voc pode atualizar os privilgios de acesso do usurio para Membro (na tabela de usurios registrados do banco de dados).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 646


Criao visual de aplicativos

Caso no pretenda usar os nveis de autorizao, voc pode proteger qualquer pgina do site simplesmente adicionando um comportamento de servidor Restringir acesso pgina. O comportamento de servidor redireciona para outra pgina qualquer usurio que no tenha conseguido fazer o logon. Caso pretenda usar os nveis de autorizao, voc pode proteger qualquer pgina do site usando os seguintes blocos de criao:

Um comportamento de servidor Restringir acesso pgina para redirecionar usurios no autorizados para outra
pgina

Uma coluna extra na tabela de usurios do banco de dados para armazenar os privilgios de acesso de cada usurio
Independentemente do uso ou no dos nveis de autorizao, voc pode adicionar um link pgina protegida que permite ao usurio fazer logout e limpa todas as variveis de sesso.

Mais tpicos da Ajuda


Proteo de uma pasta no aplicativo (ColdFusion) na pgina 648

Redirecionar usurios no autorizados


Para impedir que usurios no autorizados acessem uma pgina, adicione um comportamento de servidor Restringir acesso pgina a ela. O comportamento de servidor redireciona o usurio para outra pgina caso o usurio tente ignorar a pgina de logon digitando o URL da pgina protegida em um navegador ou caso ele esteja conectado, mas tente acessar uma pgina protegida sem os privilgios de acesso apropriados. Nota: O comportamento de servidor Restringir acesso pgina s pode proteger pginas em HTML. Ele no protege outros recursos do site como, por exemplo, arquivos de imagem e de udio. Caso queira dar a muitas pginas do site os mesmos direitos de acesso, voc pode copiar e col-los de uma pgina para outra.

Redirecionar usurios no autorizados para outra pgina


1 Abra a pgina que voc deseja proteger. 2 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de adio (+) e

selecione Usar autenticao > Restringir acesso pgina no menu pop-up.


3 Selecione o nvel de acesso da pgina. Para permitir que apenas usurios com determinados privilgios de acesso

vejam a pgina, selecione a opo Nome de usurio, senha e nvel de acesso e especifique os nveis de autorizao da pgina. Por exemplo, voc pode especificar que apenas usurios com privilgios de Administrador possam exibir a pgina selecionando Administrador na lista dos nveis de autorizao.
4 Para adicionar nveis de autorizao lista, clique em Definir. Na lista Definir nveis de acesso exibida, insira um

novo nvel de autorizao e clique no boto de adio (+). O novo nvel de autorizao armazenado para ser usado com outras pginas. Verifique se a seqncia de caracteres do nvel de autorizao corresponde exatamente seqncia de caracteres armazenada no banco de dados do usurio. Por exemplo, caso a coluna da autorizao no banco de dados contenha o valor "Administrador", digite Administrador, e no Admin, na caixa Nome.
5 Para definir mais de um nvel de autorizao para uma pgina, clique nos nveis com a tecla Control pressionada

(Windows) ou Command (Macintosh) na lista. Por exemplo, voc pode especificar que qualquer usurio com privilgios de Convidado, Membro ou Administrador pode exibir a pgina.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 647


Criao visual de aplicativos

6 Especifique a pgina a ser aberta caso um usurio no autorizado tente abrir a pgina protegida.

Verifique se a pgina escolhida no est protegida.


7 Clique em OK.

Copiar e colar os direitos de acesso de uma pgina para as demais pginas do site
1 Abra a pgina protegida e selecione o comportamento de servidor Restringir acesso pgina listado no painel

Comportamentos de servidor (e no o no menu pop-up de adio [+]).


2 Clique no boto de seta no canto superior direito do painel e selecione Copiar no menu pop-up.

O comportamento de servidor Restringir acesso pgina copiado para a rea de transferncia do sistema.
3 Abra a outra pgina que voc deseja proteger da mesma forma. 4 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no boto de seta no canto

superior direito e selecione Colar no menu pop-up.


5 Repita as etapas 3 e 4 para todas as pginas que voc deseja proteger.

Armazenar privilgios de acesso no banco de dados do usurio


O bloco de criao s obrigatrio caso voc queira que determinados usurios conectados tenham privilgios de acesso diferentes. Caso precise apenas que os usurios faam logon, voc no tem que armazenar privilgios de acesso.
1 Para fornecer a determinados usurios conectados privilgios de acesso diferentes, verifique se a tabela de usurios

do banco de dados contm uma coluna especificando os privilgios de acesso de cada usurio (Convidado, Usurio, Administrador etc.). Os privilgios de acesso de cada usurio devem ser inseridos no banco de dados pelo administrador do site. Na maioria dos aplicativos de banco de dados, voc pode definir uma coluna como um valor padro sempre que um novo registro criado. Defina o valor padro como o privilgio de acesso mais comum do site (por exemplo, Convidado) e, em seguida, altere manualmente as excees (por exemplo, alterando Convidado para Administrador). O usurio agora tem acesso a todas as pginas de administrador.
2 Verifique se cada usurio no banco de dados tem um privilgio de acesso exclusivo como, por exemplo, Convidado

ou Administrador, e no vrios privilgios como Usurio, Administrador. Para definir vrios privilgios de acesso para as pginas (por exemplo, todos os convidados e administradores podem ver a pgina), os defina no nvel da pgina, e no do banco de dados.

Fazer logout de usurios


Quando um usurio faz logon com xito, uma varivel de sesso criada consistindo no nome de usurio. Quando o usurio deixa o site, voc pode usar o comportamento de servidor Fazer logout do usurio para limpar a varivel da sesso e redirecion-lo para outra pgina (normalmente uma pgina de despedida ou de agradecimento). Voc pode invocar o comportamento de servidor Fazer logout do usurio quando o usurio clica em um link ou quando uma determinada pgina carregada.

Adicionar um link para permitir que os usurios faam logout


1 Selecione o texto ou a imagem de uma pgina para servir como link. 2 No painel Comportamentos de servidor (Janela > Comportamentos), clique no boto de adio (+) e selecione Usar

autenticao > Fazer logout do usurio.


3 Especifique uma pgina a ser aberta quando o usurio clica no link e em OK.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 648


Criao visual de aplicativos

A pgina costuma ser de despedida ou de agradecimento.

Fazer logout dos usurios quando uma pgina especfica carregada


1 Abra a pgina a ser carregada no Dreamweaver.

A pgina costuma ser de despedida ou de agradecimento.


2 No painel Comportamentos de servidor, clique no boto de adio (+) e selecione Usar autenticao > Fazer logout

do usurio.
3 Selecione a opo Fazer logout quando a pgina for carregada e clique em OK.

Proteo de uma pasta no aplicativo (ColdFusion)


Proteo de uma pasta ou de um site no servidor (ColdFusion)
Voc pode usar o Dreamweaver para proteger uma pasta especfica por senha no aplicativo do ColdFusion, inclusiva a pasta raiz do aplicativo. Quando um visitante do site solicita qualquer pgina na pasta especificada, o ColdFusion pede ao visitante um nome de usurio e senha. O ColdFusion armazena o nome de usurio e a senha em variveis de sesso para que o visitante no precise digit-los novamente durante a sesso. Nota: Esse recurso s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Com um documento do ColdFusion aberto no Dreamweaver, selecione Comandos > Assistente de logon do

ColdFusion.
2 Conclua o Assistente de logon do ColdFusion. a Especifique o caminho completo at a pasta que voc deseja proteger e clique em Avanar. b Na tela seguinte, selecione um destes tipos de autenticao:
Autenticao simples Protege o aplicativo com um nome de usurio e senha exclusivos para todos os usurios. Autenticao do Windows NT Protege o aplicativo usando nomes de usurio e senhas do NT. Autenticao LDAP Protege o aplicativo com nomes de usurio e senhas armazenados em um servidor LDAP.

c Especifique se voc deseja que os usurios faam logon usando uma pgina de logon do ColdFusion ou um menu

pop-up.
d Na prxima tela, especifique as seguintes configuraes:

Caso voc tenha selecionado a autenticao simples, especifique o nome de usurio e a senha que cada visitante
deve digitar.

Caso voc tenha selecionado a autenticao do Windows NT, especifique o domnio do NT de validao. Caso voc tenha selecionado a autenticao LDAP, especifique o servidor LDAP de validao.
3 Carregue os novos arquivos no site remoto. Os arquivos esto localizados na pasta do site local.

Mais tpicos da Ajuda


Ativar os aprimoramentos feitos no ColdFusion na pgina 674 Criao de uma pgina que apenas usurios autorizados podem acessar na pgina 645 Proteo de uma pasta no aplicativo (ColdFusion) na pgina 648

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 649


Criao visual de aplicativos

Uso de componentes do ColdFusion


Sobre os componentes do ColdFusion
Os arquivos CFC (componente do ColdFusion) lhe permitem integrar as lgicas de aplicativo e de negcios em unidades reutilizveis, inteiras. Os CFCs tambm proporcionam uma forma rpida e fcil de criar servios da Web. Um CFC uma unidade de software reutilizvel escrita em CFML (linguagem de markup do ColdFusion), que facilita a reutilizao e a manuteno do cdigo. Voc pode usar o Dreamweaver para trabalhar com CFCs. Para obter informaes sobre as tags e a sintaxe CFC, consulte a documentao do ColdFusion em Dreamweaver (Ajuda > Uso do ColdFusion). Nota: Voc s pode usar CFCs com o ColdFusion MX ou posterior. No h suporte para CFCs no ColdFusion 5. Os CFCs devem fornecer uma forma simples, mas eficiente, para que desenvolvedores integrem elementos dos sites. Normalmente, voc deve usar componentes na lgica de aplicativo ou de negcios. Use tags personalizadas em elementos de apresentao como, por exemplo, saudaes personalizadas, menus dinmicos etc. Assim como acontece com muitos outros tipos de construo, os sites dinmicos normalmente podem aproveitar partes intercambiveis. Por exemplo, um site dinmico pode executar a mesma consulta repetidamente ou calcular o preo total das pginas do carro de compras e recalcul-lo sempre que um item adicionado. Essas tarefas podem ser tratadas por componentes. Voc pode corrigir, melhorar, estender e at mesmo substituir um componente com impacto mnimo sobre o resto do aplicativo. Suponhamos que uma loja online calcule o frete com base no preo dos pedidos. Para pedidos abaixo de US$ 20, o frete de US$ 4; para pedidos entre US$ 20 e US$ 40, ele de US$ 6 e assim por diante. Voc poderia inserir a lgica de clculo do frete tanto na pgina do carro de compras quanto na pgina de retirada, mas isso misturaria o cdigo de apresentao em HTML e o cdigo da lgica em CFML, alm de normalmente dificultar a manuteno e a reutilizao. Voc decide criar um CFC chamado Preo que tem, dentre outras coisas, uma funo chamada ShippingCharge. A funo usa um preo como argumento e retorna um frete. Por exemplo, caso o valor do argumento seja 32,80, a funo retorna 6. Tanto na pgina do carro de compras quanto na pgina de retirada, voc insere uma tag especial para invocar a funo ShippingCharge. Quando a pgina solicitada, a funo invocada e um frete retorna para a pgina. Mais tarde, a loja anuncia uma promoo especial: frete gratuito para todos os pedidos acima de US$ 100. Voc faz a alterao nos fretes em um s local a funo ShippingCharge do componente Preo e todas as pginas que usam a funo obtm automaticamente fretes precisos.

Viso geral do painel Componentes (ColdFusion)


Use o painel Componentes (Janela > Componentes) para exibir e editar os componentes do ColdFusion e adicione um cdigo pgina que invoca a funo quando a pgina em CFM solicitada. Nota: O painel Componentes s est disponvel durante a exibio de uma pgina do ColdFusion no Dreamweaver.

Mais tpicos da Ajuda


Criar pginas da Web que usam CFCs na pgina 652

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 650


Criao visual de aplicativos

Criar ou excluir um CFC no Dreamweaver


Voc pode usar o Dreamweaver para definir visualmente um CFC e suas funes. O Dreamweaver cria um arquivo .cfc e insere as tags de CFML necessrias para voc. Nota: Dependendo do componente, voc talvez tenha que completar alguns cdigos manualmente.
1 Abra uma pgina do ColdFusion no Dreamweaver. 2 No painel Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up. 3 Clique no boto de adio (+), complete a caixa de dilogo Criar componente e clique em OK. a Na seo Componentes, informe os detalhes do componente. Aqui est uma lista parcial:
Nome Especifica o nome de arquivo do componente. O nome deve conter apenas caracteres alfanumricos e sublinhados (_). No especifique a extenso de arquivo .cfc ao digitar o nome. Diretrio do componente Especifica onde o componente salvo. Selecione a pasta raiz do aplicativo da Web (como,

por exemplo, \Inetpub\wwwroot\myapp\) ou qualquer uma das subpastas.


b Para definir uma ou mais funes para o componente, selecione Funes na lista Seo, clique no boto de adio

(+) e insira os detalhes da nova funo. Verifique se voc especificou o tipo do valor retornado pela funo na opo Tipo de retorno. Caso voc selecione remoto no menu Acesso, a funo disponibilizada como um servio da Web.
c Para definir um ou mais argumentos de uma funo, selecione Argumentos na lista Seo, selecione a funo no

menu pop-up, clique no boto de adio (+) e insira os detalhes do novo argumento direita.
4 Caso voc use um servidor de desenvolvimento remoto, carregue o arquivo CFC e todos os arquivos dependentes

(como, por exemplo, os usados para implementar uma funo ou para incluir arquivos) no servidor remoto. O carregamentos dos arquivos garante que recursos do Dreamweaver como, por exemplo, a visualizao Live e Visualizar o navegador funcionem corretamente. O Dreamweaver escreve um arquivo CFC e o salva na pasta que voc especificar. O novo componente tambm exibido no painel Componentes (depois do clique em Atualizar).
5 Para remover um componente, voc deve excluir manualmente o arquivo CFC do servidor.

Mais tpicos da Ajuda


Criar pginas da Web que usam CFCs na pgina 652 Sobre os componentes do ColdFusion na pgina 649

Exibir CFCs no Dreamweaver


O Dreamweaver fornece uma forma de examinar visualmente os CFCs localizados na pasta do site ou em todo o servidor. O Dreamweaver l os arquivos CFC e exibe informaes sobre eles em uma visualizao hierrquica de fcil navegao no painel Componentes. O Dreamweaver procura os componentes no servidor de teste (consulte Conexo com o banco de dados no Dreamweaver na pgina 535). Caso voc crie CFCs ou faa alteraes nos CFCs existentes, no se esquea de carregar os arquivos CFC no servidor de teste para que eles sejam refletidos com preciso no painel Componentes. Para exibir os componentes localizados em outro servidor, altere as configuraes do servidor de teste.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 651


Criao visual de aplicativos

Voc pode exibir qualquer uma das seguintes informaes sobre os componentes do CF:

Listar todos os componentes do ColdFusion definidos no servidor. Caso voc esteja executando o ColdFusion MX 7 ou posterior, filtre a lista para mostrar apenas os CFCs localizados
na pasta do site.

Explorar as funes e os argumentos de cada componente. Inspecionar as propriedades das funes que funcionam como servios da Web.
Para usar o Dreamweaver a fim de inspecionar os CFCs que residem na raiz do servidor enquanto tambm gerencia os arquivos do site em uma raiz diferente, voc pode definir dois sites do Dreamweaver. Defina o primeiro site de forma a apontar para a raiz do servidor e o segundo, para a raiz do site. Use o menu pop-up do site no painel Arquivos para alternar rapidamente entre os dois sites. Para exibir os CFCs no Dreamweaver, siga estas etapas:
1 Abra uma pgina do ColdFusion no Dreamweaver. 2 No painel Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up. 3 Clique no boto Atualizar no painel para recuperar os componentes.

O pacote de componentes exibido no servidor. Pacote de componentes uma pasta que contm arquivos CFC. Caso os pacotes de componentes existentes no sejam exibidos, clique no boto Atualizar da barra de ferramentas do painel.
4 Para exibir apenas os CFCs localizados na pasta do site, clique no boto Mostrar apenas os CFCs do site atual da

barra de ferramentas do painel Componentes. Nota: O recurso s est disponvel caso voc tenha definido um computador com o ColdFusion MX 6 ou posterior em execuo como servidor de teste do Dreamweaver. Nota: Caso o site atual esteja listado em uma pasta virtual do servidor remoto, a filtragem no funciona.
5 Clique no boto de adio (+) ao lado do nome do pacote para exibir os componentes armazenados no pacote.

Para listar as funes de um componente, clique no boto de adio (+) ao lado do nome do componente. Para ver os argumentos que uma funo usa, bem como o tipo de argumento e se eles so obrigatrios ou opcionais,
abra a ramificao da funo na visualizao hierrquica. As funes que no usam argumentos no apresentam nenhum boto de adio (+) abaixo delas.

Para exibir rapidamente os detalhes de um argumento, de uma funo, de um componente ou de um pacote,


selecione o item na visualizao hierrquica e clique no boto Obter detalhes na barra de ferramentas do painel. Voc tambm pode clicar com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no item e selecionar Obter detalhes no menu pop-up. Os detalhes do item so exibidos em uma caixa de mensagem.

Mais tpicos da Ajuda


Configurar um servidor de teste na pgina 46 Ativar os aprimoramentos feitos no ColdFusion na pgina 674 Criar pginas da Web que usam CFCs na pgina 652

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 652


Criao visual de aplicativos

Editar CFCs no Dreamweaver


O Dreamweaver fornece uma forma aprimorada de edio do cdigo dos componentes do ColdFusion definidos para o site. Por exemplo, voc pode adicionar, alterar ou excluir qualquer funo de componente sem o Dreamweaver. Para usar o recurso, o ambiente de desenvolvimento deve ser definido da seguinte forma:

O ColdFusion deve estar em execuo localmente. Na caixa de dilogo avanada Definio de sites do Dreamweaver, o Tipo de acesso especificado na categoria
Servidor de teste deve ser Local/rede.

Na caixa de dilogo avanada Definio de sites, o caminho da pasta raiz local deve ser igual ao caminho da pasta
do servidor de teste (por exemplo, c:\Inetpub\wwwroot\cf_projects\myNewApp\). Voc pode examinar e alterar esses caminhos selecionando Site > Editar os sites.

O componente deve ser armazenado na pasta do site local ou em qualquer uma das subpastas do disco rgido.
Abra uma pgina do ColdFusion no Dreamweaver e veja os componentes no painel Componentes. Para exibir os componentes, abra o painel Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up do painel e clique no boto Atualizar do painel. Como o ColdFusion est em execuo localmente, o Dreamweaver exibe os pacotes de componentes no disco rgido. Use o seguinte procedimento para editar um componente.
1 Abra uma pgina do ColdFusion no Dreamweaver e veja os componentes no painel Componentes (Janela >

Componentes).
2 Selecione Componentes CF no menu pop-up do painel e clique no boto Atualizar do painel.

Como o ColdFusion est em execuo localmente, o Dreamweaver exibe os pacotes de componentes no disco rgido. Nota: Para editar visualmente o conjunto de registros CFC, clique duas vezes nele no painel Ligaes.
3 Para editar um arquivo de componente em termos gerais, abra o pacote e clique duas vezes no nome do

componente na visualizao hierrquica. O arquivo do componente aberto na Visualizao de cdigo.


4 Para editar uma funo especfica, argumento ou propriedade, clique duas vezes no item na visualizao

hierrquica.
5 Faa manualmente as alteraes na Visualizao de cdigo. 6 Salve o arquivo (Arquivo > Salvar). 7 Para ver uma nova funo no painel Componentes, atualize a visualizao clicando no boto Atualizar na barra de

ferramentas do painel.

Mais tpicos da Ajuda


Exibir CFCs no Dreamweaver na pgina 650

Criar pginas da Web que usam CFCs


Uma forma de usar a funo de um componente nas pginas da Web escrever cdigo na pgina que invoca a funo quando a pgina solicitada. Voc pode usar o Dreamweaver para ajudar voc a escrever o cdigo. Nota: Para obter outras formas de usar componentes, consulte a documentao do ColdFusion em Dreamweaver (Ajuda > Uso do ColdFusion).
1 No Dreamweaver, abra a pgina do ColdFusion que usar a funo de componente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 653


Criao visual de aplicativos

2 Passe para a Visualizao de cdigo (Exibir > Cdigo). 3 Abra o painel Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up do painel. 4 Localize o componente desejado e o insira usando uma das seguintes tcnicas:

Arraste uma funo da visualizao hierrquica para a pgina. O cdigo inserido na pgina para invocar a funo. Selecione a funo no painel e clique no boto Inserir na barra de ferramentas do painel (o segundo boto direita).
O Dreamweaver insere o cdigo na pgina, no ponto de insero.
5 Caso voc insira uma funo com argumentos, complete manualmente o cdigo do argumento.

Para obter mais informaes, consulte a documentao do ColdFusion em Dreamweaver (Ajuda > Uso do ColdFusion).
6 Salve a pgina (Arquivo > Salvar).

Definir um conjunto de registros em um CFC


O Dreamweaver pode ajudar voc a definir um conjunto de registros (tambm conhecido como consulta do ColdFusion) em um CFC. Definindo um conjunto de registros em um CFC, voc no precisa definir o conjunto de registros em todas as pginas em que ele usado. Voc define o conjunto de registros uma vez no CFC e usa o CFC em pginas diferentes. Nota: Esse recurso s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos feitos no ColdFusion na pgina 674.
1 Crie ou abra um arquivo CFC existente no Dreamweaver. 2 No painel Ligaes (Janela > Ligaes), clique no boto de adio (+) e selecione Conjunto de registros (consulta)

no menu pop-up. A caixa de dilogo Conjunto de registros exibida. Voc pode trabalhar nas caixas de dilogo Conjunto de registros simples ou avanada.
3 Para usar uma funo existente no CFC, selecione a funo no menu pop-up Funo e passe etapa 5.

O conjunto de registros definido na funo.


4 Para definir uma nova funo no CFC, clique no boto Nova funo, digite um nome para a funo na caixa de

dilogo exibida e, em seguida, clique em OK. O nome deve conter apenas caracteres alfanumricos e sublinhados (_).
5 Para definir um conjunto de registros para a funo, complete as opes da caixa de dilogo Conjunto de registros.

A nova funo inserida no CFC que define o conjunto de registros.

Mais tpicos da Ajuda


Criar ou excluir um CFC no Dreamweaver na pgina 650

Usar um conjunto de registros CFC como fonte de contedo dinmico


Voc pode usar um CFC como fonte de contedo dinmico para as pginas caso o componente contenha uma funo que define um conjunto de registros. Nota: Esse recurso s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos feitos no ColdFusion.
1 Abra uma pgina do ColdFusion no Dreamweaver.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 654


Criao visual de aplicativos

2 No painel Ligaes (Janela > Ligaes), clique no boto de adio (+) e selecione Conjunto de registros (consulta)

no menu pop-up. A caixa de dilogo Conjunto de registros exibida. Voc pode trabalhar nas caixas de dilogo Conjunto de registros simples ou avanada.
3 Clique no boto Consulta do CFC. 4 Complete a caixa de dilogo Consulta do CFC, clique em OK e em OK novamente para adicionar o conjunto de

registros CFC lista das fontes de contedo disponveis no painel Ligaes.


5 Use o painel Ligaes para ligar o conjunto de registros a vrios elementos de pgina.

Para obter mais informaes, consulte Adio de contedo dinmico a pginas na pgina 577.

Definir contedo dinmico usando um CFC


Voc pode definir um conjunto de registros como uma fonte de contedo dinmico no Dreamweaver usando um CFC que contm uma definio do conjunto de registros.
1 Na caixa Nome, digite um nome para o conjunto de registros CFC.

Uma prtica comum adicionar o prefixo rs a nomes do conjunto de registros para diferenci-los dos demais nomes de objeto no cdigo, por exemplo: rsPressRelease. Os nomes dos conjuntos de registros devem conter apenas caracteres alfanumricos e sublinhados (_). Voc no pode usar caracteres especiais ou espaos.
2 Selecione um pacote de um dos j definidos no servidor.

Caso o pacote no seja exibido no menu pop-up, voc pode atualizar a lista de pacotes clicando no boto Atualizar prximo do menu pop-up. Primeiramente, verifique se voc carregou os CFCs no servidor de teste. S so exibidos CFCs no servidor de teste.
3 Selecione um componente dentre os definidos no pacote selecionado atualmente.

Caso o menu pop-up Componente no contenha nenhum componente, ou caso nenhum dos componentes criados anteriormente seja exibido no menu, voc deve carregar os arquivos CFC no servidor de teste.
4 (Opcional) Para criar um componente, clique no boto Criar novo componente. a Na caixa Nome, digite o nome para o novo CFC. O nome deve conter apenas caracteres alfanumricos e

sublinhados (_).
b Na caixa Diretrio do componente, insira o local do CFC ou localize a pasta.

Nota: A pasta deve ser o caminho relativo da pasta raiz do site.


5 No menu pop-up Funo, selecione a funo que contm a definio do conjunto de registros.

O menu pop-up Funo contm apenas as funes definidas no componente selecionado no momento. Caso nenhuma funo seja exibida no menu pop-up ou caso as alteraes mais recentes no sejam refletidas nas funes listadas atualmente, verifique se as alteraes foram salvas e carregadas no servidor. Nota: As caixas Conexo e SQL so somente leitura.
6 Edite todos os parmetros (tipo, valor e valor padro) que devem ser passados como um argumento de funo

clicando no boto Editar.


a Insira um valor para o parmetro atual selecionando o tipo de valor no menu pop-up Valor e inserindo o valor na

caixa direita.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 655


Criao visual de aplicativos

O tipo de valor pode ser um parmetro de URL, uma varivel de formulrio, um cookie, uma varivel de sesso, uma varivel de aplicativo ou um valor inserido.
b Insira um valor padro para o parmetro na caixa Valor padro.

Caso nenhum valor de runtime retorne, o valor de parmetro padro usado.


c Clique em OK.

Voc no pode modificar a conexo de banco de dados e a consulta SQL do conjunto de registros. Esses campos esto sempre desativados a conexo e a consulta SQL so exibidas para sua informao.
7 Clique em Testar para se conectar ao banco de dados e criar uma ocorrncia do conjunto de registros.

Caso a instruo SQL contenha parmetros de pgina, verifique se a coluna Valor padro da caixa Parmetros contm valores de teste vlidos antes de clicar em Testar. Caso a consulta tenha sido executada com xito, uma tabela exibe o conjunto de registros. Cada linha contm um registro e cada coluna representa um campo nesse registro. Clique em OK para limpar a Consulta do CFC.
8 Clique em OK.

ltima atualizao em 28/4/2010

656

Captulo 21: Criao de formulrios


Quando um visitante insere informaes em um formulrio exibido em um navegador da Web e clica no boto de envio, as informaes so enviadas para um servidor onde so processadas por um script do servidor ou aplicativo. O servidor responde enviando de volta as informaes solicitadas pelo usurio (ou cliente) ou realizando alguma outra ao com base no contedo do formulrio. Voc pode usar o Dreamweaver para criar formulrios que enviem dados para a maior parte dos servidores de aplicativos, incluindo PHP, ASP e ColdFusion. Se voc usar o ColdFusion, tambm poder adicionar controles de formulrios especficos do ColdFusion nos seus formulrios. Seus formulrios podem ter campos de texto, campos de senha, botes de opo, caixas de seleo, menus pop-up, botes clicveis e outros objetos de formulrio. O Dreamweaver tambm pode escrever cdigo que valida as informaes que um visitante fornece. Por exemplo, voc pode verificar se um endereo de email que um usurio digita contm um smbolo @ ou se um campo de texto obrigatrio contm um valor.

Coleta de informaes dos usurios


Sobre a coleta de informaes dos usurios
Voc pode usar formulrios da Web ou links de hipertexto para coletar informaes dos usurios, armazenar essas informaes na memria do servidor e, em seguida, us-las para criar uma resposta dinmica baseada nas entradas do usurio. As ferramentas mais comuns para a coleta de informaes do usurio so os formulrios em HTML e os links de hipertexto.
Formulrios em HTML Eles permitem que voc colete informaes dos usurios e as armazene na memria do servidor. Um formulrio em HTML pode enviar as informaes como parmetros de formulrio ou de URL. Links de hipertexto Eles permitem que voc colete informaes dos usurios e as armazene na memria do servidor. Voc especifica um valor (ou valores) a ser enviado quando o usurio clica em um link uma preferncia, por exemplo acrescentando o valor URL especificada na tag de ancoragem. Quando um usurio clica no link, o navegador envia o URL e o valor acrescentado para o servidor.

Parmetros de formulrio em HTML


Os parmetros de formulrio so enviados para o servidor usando um formulrio em HTML com o mtodo POSTAR ou OBTER. Quando estiver usando o mtodo POSTAR, os parmetros sero enviados para o servidor da web como parte do cabealho do documento e no ficam visveis ou acessveis para qualquer pessoa que esteja usando mtodos padro para exibir a pgina. O mtodo POSTAR deve ser usado para valores que afetam o contedo do banco de dados (por exemplo, inserindo, atualizando ou excluindo registros) ou para valores enviados por email. O mtodo OBTER acrescenta parmetros URL solicitada. Os parmetros ficam visveis para qualquer pessoa que esteja exibindo a pgina. O mtodo OBTER deve ser usado em formulrios de pesquisa. Voc pode usar o Dreamweaver para projetar rapidamente formulrios em HTML que enviam parmetros de formulrio para o servidor. Tome cuidado com o mtodo que voc usa para transmitir informaes do navegador para o servidor.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 657


Criao de formulrios

Os parmetros de formulrio usam os nomes dos objetos de formulrio correspondentes. Por exemplo, caso o formulrio contenha um campo de texto chamado txtLastName, o seguinte parmetro de formulrio enviado para o servidor quando o usurio clica no boto Enviar:
txtLastName=enteredvalue

Nos casos em que um aplicativo da Web espera um valor de parmetro preciso (por exemplo, quando ele realiza uma ao com base em uma de vrias opes), use um boto de opo, uma caixa de seleo ou um objeto de formulrio lista/menu para controlar os valores que o usurio pode enviar. Isso impede que os usurios digitem as informaes incorretamente e causem um erro de aplicativo. O seguinte exemplo mostra um formulrio de menu pop-up que oferece trs opes:

Cada opo de menu corresponde a um valor codificado enviado como um parmetro de formulrio para o servidor. A caixa de dilogo Listar valores do seguinte exemplo compara cada item de lista com um valor (Adicionar, Atualizar ou Excluir):

Depois que um parmetro de formulrio criado, o Dreamweaver pode recuperar o valor e us-lo em um aplicativo da Web. Depois da definio do parmetro de formulrio no Dreamweaver, voc pode inserir o valor em uma pgina.

Mais tpicos da Ajuda


Criao de formulrios da Web na pgina 659 Adio de contedo dinmico a pginas na pgina 577 Acesso a um banco de dados na pgina 524

Parmetros de URL
Os parmetros de URL permitem passar informaes fornecidas pelo usurio do navegador para o servidor. Quando um servidor recebe uma solicitao e os parmetros so acrescentados URL da solicitao, o servidor d pgina solicitada acesso aos parmetros antes de oferec-la ao navegador.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 658


Criao de formulrios

Um parmetro de URL um par nome/valor acrescentado a um URL. O parmetro comea com um ponto de interrogao (?) e usa a forma nome=valor. Caso haja mais de um parmetro de URL, cada um deles separado por um e comercial (&). O seguinte exemplo mostra um parmetro de URL com dois pares nome/valor:
http://server/path/document?name1=value1&name2=value2

No fluxo de trabalho desse exemplo, o aplicativo uma loja baseada na Web. Como os desenvolvedores do site querem atingir o maior pblico possvel, o site foi projetado para dar suporte a moedas estrangeiras. Ao fazer logon no site, os usurios podem selecionar a moeda na qual exibem os preos dos itens disponveis.
1 O navegador solicita a pgina report.cfm do servidor. A solicitao inclui o parmetro de URL Currency="euro". A

varivel Currency="euro" especifica que todas as quantias monetrias recuperadas sejam exibidas em euro da Unio Europia.
2 O servidor armazena temporariamente o parmetro de URL na memria. 3 A pgina report.cfm usa os parmetros para recuperar o custo dos itens em euros. Essas quantias monetrias podem

ser armazenadas em uma tabela de banco de dados com moedas diferentes ou convertidas de uma moeda exclusiva associada a cada item (qualquer moeda com suporte do aplicativo).
4 O servidor envia a pgina report.cfm para o navegador e exibe o valor dos itens na moeda solicitada. Quando esse

usurio encerra a sesso, o servidor limpa o valor do parmetro de URL, o que libera a memria do servidor para hospedar novas solicitaes de usurio.
SERVIDOR WEB
http://www.mysite.com/ report.cfm?Currency="" Currency=""

Navegador da Web
<HTML> <code> </HTML>
report.cfm

Os parmetros de URL tambm so criados quando o mtodo HTTP OBTER usado em conjunto com um formulrio em HTML. O mtodo OBTER especifica se o valor de parmetro est acrescentado solicitao de URL quando o formulrio enviado. Entre os usos tpicos dos parmetros de URL est a personalizao dos sites com base nas preferncias do usurio. Por exemplo, um parmetro de URL que consiste em um nome de usurio e senha pode ser usado para autenticar um usurio, exibindo apenas informaes para as quais o usurio se registrou. Entre os exemplos comuns disso esto os sites de finanas que exibem os preos das aes com base nos smbolos do mercado de aes que o usurio escolheu previamente. Os desenvolvedores de aplicativo da Web normalmente usam os parmetros de URL para passar valores a variveis dentro de aplicativos. Por exemplo, voc poderia passar termos para variveis SQL em um aplicativo da Web a fim de gerar resultados de pesquisa.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 659


Criao de formulrios

Criao de parmetros de URL com o uso de links em HTML


Voc cria parmetros de URL dentro de um link em HTML por meio do uso do atributo href da tag de ancoragem HTML. Voc pode digitar os parmetros de URL diretamente no atributo na visualizao Cdigo (Exibir > Cdigo) ou por meio do acrscimo dos parmetros de URL ao final do URL do link na caixa Link do Inspetor de propriedades. No seguinte exemplo, trs links criam um parmetro de URL exclusivo (action) com trs valores possveis (Adicionar, Atualizar e Excluir). Quando o usurio clica em um link, um valor de parmetro enviado para o servidor, e a ao solicitada realizada.
<a href="http://www.mysite.com/index.cfm?action=Add">Add a record</a> <a href="http://www.mysite.com/index.cfm?action=Update">Update a record</a> <a href="http://www.mysite.com/index.cfm?action=Delete">Delete a record</a>

O Inspetor de propriedades (Janela > Propriedades) permite criar os mesmos parmetros de URL com a seleo do link e o acrscimo dos valores de parmetro de URL ao final do URL do link na caixa Link.

Depois que um parmetro de URL criado, o Dreamweaver pode recuperar o valor e us-lo em um aplicativo da Web. Depois da definio do parmetro de URL no Dreamweaver, voc pode inserir o valor em uma pgina.

Mais tpicos da Ajuda


Sobre os parmetros de URL e de formulrio na pgina 557 Vinculao na pgina 273 Definir parmetros de formulrio na pgina 570 Adio de contedo dinmico a pginas na pgina 577 Acesso a um banco de dados na pgina 524

Criao de formulrios da Web


Sobre formulrios da Web
Quando um visitante insere informaes em um formulrio exibido em um navegador da Web e clica no boto de envio, as informaes so enviadas para um servidor onde so processadas por um script do servidor ou aplicativo. O servidor responde enviando de volta as informaes solicitadas pelo usurio (ou cliente) ou realizando alguma outra ao com base no contedo do formulrio. Voc pode criar formulrios que enviem dados para a maior parte dos servidores de aplicativos, incluindo PHP, ASP e ColdFusion. Se voc usar o ColdFusion, tambm poder adicionar controles de formulrios especficos do ColdFusion nos seus formulrios. Nota: Voc tambm pode enviar dados de formulrio diretamente para um destinatrio de email.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 660


Criao de formulrios

Mais tpicos da Ajuda


Coleta de informaes dos usurios na pgina 656 Criao dos formulrios do ColdFusion na pgina 674

Objetos de formulrio
No Dreamweaver, os tipos de entrada de formulrio so chamados objetos de formulrio. Os objetos de formulrio so os mecanismos que permitem aos usurios inserir dados. Voc pode adicionar os seguintes objetos de formulrio a um formulrio:
Campos de texto Aceite todos os tipos de entrada de texto alfanumrico. O texto pode ser exibido como uma linha nica, vrias linhas e um campo de senha no qual o texto digitado substitudo por asteriscos ou marcadores a fim de ocultar o texto de curiosos.

Nota: As senhas e as demais informaes enviadas para um servidor usando um campo de senha no so criptografadas. Os dados transferidos podem ser interceptados e lidos como texto alfanumrico. Por essa razo, voc deve sempre fornecer criptografia aos dados que deseja manter em segurana.
Campos ocultos Armazene informaes inseridas por um usurio como, por exemplo, endereo de email ou

preferncia de visualizao e, em seguida, use esses dados na prxima visita do usurio ao site.
Botes Realize as aes com o clique. Voc pode adicionar um nome ou rtulo personalizado a um boto, ou usar um dos rtulos Enviar ou Redefinir predefinidos. Use um boto para enviar dados de formulrio ao servidor ou para redefinir o formulrio. Voc tambm pode atribuir outras tarefas de processamento definidas em um script. Por exemplo, o boto pode calcular o custo total dos itens selecionados com base em valores atribudos.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 661


Criao de formulrios

Caixas de seleo Permita vrias respostas dentro de um nico grupo de opes. Um usurio pode selecionar quantas opes se aplicarem. O seguinte exemplo mostra trs itens de caixa de seleo marcados: Surfing, Mountain Biking e Rafting.

Botes de opo Represente opes exclusivas. A seleo de um boto dentro de um grupo de botes de opo

desmarca todos os demais (um grupo consiste em dois ou mais botes que compartilham o nome). No exemplo abaixo, Rafting a opo selecionada no momento. Caso o usurio clique em Surfing, o boto Rafting desmarcado automaticamente.

Menus de lista Exiba valores de opo em uma lista de rolagem que permite aos usurios selecionar vrias opes. A

opo Lista exibe os valores de opo em um menu que permite aos usurios selecionar apenas um nico item. Use menus quando voc tiver uma quantidade de espao limitada, mas precisa exibir muitos itens, ou para controlar os valores retornados ao servidor. Diferentemente dos campos de texto nos quais os usurios digitam o que querem, inclusive dados invlidos, voc define os valores exatos retornados por um menu. Nota: Um menu pop-up em um formulrio em HTML no igual a um menu pop-up grfico. Para obter informaes sobre como criar, editar, mostrar e ocultar um menu pop-up grfico, consulte o link ao final desta seo.
Menus de salto Listas de navegao ou menus pop-up que permitem inserir um menu no qual cada opo vinculada a um documento ou arquivo. Campos de arquivo Eles permitem aos usurios procurar um arquivo no computador e carreg-lo como dados de

formulrio.
Campos de imagem Eles permitem inserir uma imagem em um formulrio. Use campos de imagem para criar botes grficos como, por exemplo, Enviar ou Redefinir. O uso de uma imagem para realizar tarefas que no sejam o envio de dados exige que um comportamento seja anexado ao objeto de formulrio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 662


Criao de formulrios

Mais tpicos da Ajuda


Aplicar o comportamento Mostrar menu pop-up na pgina 358

Criar um formulrio em HTML


1 Abra uma pgina e coloque o ponto de insero onde voc deseja que o formulrio seja exibido. 2 Selecione Inserir > Formulrio ou a categoria Formulrios, no painel Inserir, e clique no cone Formulrio.

Na visualizao Design, os formulrios so indicados por um contorno vermelho pontilhado. Se voc no vir esse contorno, selecione Exibir > Auxlios visuais > Elementos invisveis.
3 Defina as propriedades do formulrio em HTML no Inspetor de propriedades (Janela >Propriedades): a Na janela Documento, clique no contorno para selecionar o formulrio. b Na caixa Formulrio, digite um nome exclusivo para identificar o formulrio.

A nomeao de um formulrio possibilita referenciar ou controlar o formulrio com uma linguagem de script como, por exemplo, JavaScript ou VBScript. Caso voc no nomeie o formulrio, o Dreamweaver gera um nome usando a sintaxe formn e incrementa o valor de n a cada formulrio adicionado pgina.
c Na caixa Ao, especifique a pgina ou o script que processar os dados do formulrio digitando o caminho ou

clicando no cone de pasta para navegar at a pgina ou o script apropriado. Exemplo: processorder.php.
d No menu pop-up Mtodo, especifique o mtodo para transmitir os dados de formulrio ao servidor. Defina uma

das seguintes opes:


Padro Usa a configurao padro do navegador para enviar os dados do formulrio ao servidor. Normalmente, o valor padro o mtodo OBTER. OBTER Acrescenta o valor URL que est solicitando a pgina. POSTAR Incorpora os dados de formulrio solicitao HTTP.

No use o mtodo OBTER para enviar formulrios longos. As URLs esto limitadas a 8.192 caracteres. Se a quantidade de dados enviados for muito grande, eles sero truncados, o que leva a resultados inesperados ou falhas no processamento. As pginas dinmicas geradas por parmetros passados pelo mtodo OBTER podem ser marcadas porque todos os valores necessrios para gerar novamente a pgina esto contidos no URL exibido na caixa Endereo do navegador. Por outro lado, as pginas dinmicas geradas por parmetros passados pelo mtodo POSTAR no podem ser marcadas. Caso voc colete nomes de usurio e senhas confidenciais, nmeros de carto de crdito ou outras informaes confidenciais, o mtodo POSTAR pode parecer mais seguro que o mtodo OBTER. No entanto, as informaes enviadas pelo mtodo POSTAR no so criptografadas e podem ser facilmente recuperadas por um hacker. Para garantir a segurana, use uma conexo protegida em um servidor seguro.
e (Opcional) No menu pop-up Tipo de codif., especifique o tipo de codificao MIME dos dados enviados para o

servidor para processamento. A configurao padro de application/x-www-form-urlencode costuma ser usado com o mtodo POSTAR. Caso voc esteja criando um campo de carregamento de arquivo, especifique o tipo MIME multipart/form-data.
f

(Opcional) No menu pop-up Destino, especifique a janela na qual exibir os dados retornados pelo programa invocado.

Caso a janela nomeada ainda no esteja aberta, uma nova com esse nome aberta. Defina um dos seguintes valores de destino:
_blank Abre o documento de destino em uma nova janela sem nome.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 663


Criao de formulrios

_parent Abre o documento de destino na janela pai da janela que exibe o documento atual. _self Abre o documento de destino na mesma janela da janela na qual o formulrio foi enviado. _top Abra o documento de destino no corpo da janela atual. Esse valor pode ser usado para verificar se o documento

de destino usa toda a janela mesmo que o documento original tenha sido exibido em um quadro.
4 Insira objetos de formulrio na pgina: a Coloque o ponto de insero onde o objeto de formulrio deve ser exibido no formulrio. b Selecione o objeto no menu Inserir > Formulrio ou na categoria Formulrios do painel Inserir. c Complete a caixa de dilogo Atributos de acesso a tag input. Para obter mais informaes, clique no boto Ajuda

da caixa de dilogo. Nota: Se no visualizar a caixa de dilogo Atributos de acesso a tag input, voc ter que ter o Ponto de insero na Visualizao de cdigo para tentar inserir o objeto de formulrio. Verifique se o Ponto de insero est na Visualizao de projeto e tente novamente. Para obter mais informaes sobre esse tpico, consulte o artigo de David PowerCriando formulrios HTML no Dreamweaver.
d Defina as propriedades dos objetos. e Digite um nome para o objeto no Inspetor de propriedades.

Todos os campos de texto, campos ocultos, caixas de seleo e objetos de lista/menu devem ter um nome exclusivo que identifique o objeto no formulrio. Os nomes de objeto de formulrio no podem conter espaos ou caracteres especiais. Voc pode usar qualquer combinao dos caracteres alfanumricos e um sublinhado (_). O rtulo que voc atribui ao objeto o nome da varivel que armazena o valor (os dados inseridos) do campo. Esse o valor enviado para o servidor para processamento. Nota: Todos os botes de opo em um grupo devem ter o mesmo nome.
f

Para identificar o campo de texto, a caixa de seleo ou o objeto de boto de opo na pgina, clique ao lado do objeto e digite o rtulo.

5 Ajuste o layout do formulrio.

Use quebras de linha, quebras de pargrafo, texto pr-formatado ou tabelas para formatar os formulrios. Voc no pode inserir um formulrio em outro formulrio (ou seja, no possvel sobrepor tags), mas pode incluir mais de um formulrio em uma pgina. Ao criar formulrios, no se esquea de identificar os campos de formulrio com texto descritivo para permitir aos usurios saber ao que eles esto respondendo por exemplo, Digite seu nome para solicitar informaes de nome. Use tabelas para fornecer estrutura a objetos de formulrio e rtulos de campo. Ao usar tabelas em formulrios, verifique se todas as tags table esto includas entre as tags form. Para assistir a um tutorial sobre a criao de formulrios, consulte www.adobe.com/go/vid0160_br. Para assistir a um tutorial sobre formulrios de estilo com CSS, consulte www.adobe.com/go/vid0161_br.

Mais tpicos da Ajuda


Coleta de informaes dos usurios na pgina 656 Definir parmetros de formulrio na pgina 570 Definir parmetros de URL na pgina 570 Criao dos formulrios do ColdFusion na pgina 674 Criao visual de pginas do Spry na pgina 423

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 664


Criao de formulrios

Tutorial sobre criao de formulrios Tutorial sobre formulrios de estilo

Propriedades do objeto de campo de texto


Selecione o objeto do campo de texto e defina uma das seguintes opes no Inspetor de propriedades:
Largura do caractere Especifica o nmero mximo de caracteres que podem ser exibidos no campo. Esse nmero

pode ser inferior ao N mx. de caract, que especifica o nmero mximo de caracteres que podem ser digitados no campo. Por exemplo, se a Largura do caractere for definida como 20 (o valor padro) e um usurio digitar 100 caracteres, apenas 20 deles sero visveis no campo de texto. Embora voc no possa exibir os caracteres no campo, eles so reconhecidos pelo objeto de campo e enviados para processamento no servidor.
N mx. de caract. Especifica o nmero mximo de caracteres que o usurio pode digitar em campos de texto de linha

nica. Use N mx. de caract. para limitar CEPs a 5 dgitos, limitar senhas a 10 caracteres etc. Caso voc deixe a caixa N mx. de caract. em branco, os usurios podem digitar qualquer quantidade de texto. Se o texto exceder a largura do caractere do campo, o texto ser rolado. Caso um usurio exceda o nmero mximo de caracteres, o formulrio produz um som de alerta.
Nmero de linhas (Disponvel quando a opo Vrias linhas est selecionada) Define a altura do campo para campos de texto com vrias linhas. Desativado Desativa a rea de texto. Somente leitura Torna a rea de texto somente leitura. Tipo Designa o campo como um campo de linha nica, de vrias linhas ou de senha.

Linha nica Resulta em uma tag input com o type atributo definido como text. A configurao Largura do caractere mapeada para o atributo size e a configurao N mx. de caract., para o atributo maxlength. Multi-linhas Resulta em uma tag textarea. A configurao Largura do caractere mapeada para o atributo cols e a configurao Nmero de linhas, para o atributo rows. Senha Resulta em uma tag input com o type atributo definido como password. As configuraes Largura do
caractere e N mx. de caract. so mapeadas para os mesmos atributos como campos de texto de linha nica. Quando um usurio digita um campo de texto de senha, a entrada exibida como marcadores ou asteriscos para proteg-lo da observao de outras pessoas.
Valor inicial Atribui o valor exibido no campo quando o formulrio carregado pela primeira vez. Por exemplo, voc

pode indicar que o usurio digita informaes no campo incluindo uma observao ou um valor de exemplo.
Classe Permite que voc aplique regras de CSS ao objeto.

Opes de objeto de boto


Boto Atribui um nome ao boto. Dois nomes reservados, Enviar e Redefinir, informam o formulrio para enviar os dados de formulrio ao aplicativo de processamento ou ao script, ou para redefinir todos os campos de formulrio de acordo com os valores originais, respectivamente. Valor Determina o texto exibido no boto. Ao Determina o que acontece quando um boto clicado.

Enviar formulrio Envia os dados de formulrio para processamento quando o usurio clica no boto. Os dados so enviados para a pgina ou o script especificado na propriedade Ao do formulrio. Redefinir formulrio Limpa o contedo do formulrio quando o boto clicado.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 665


Criao de formulrios

Nenhuma Especifica a ao a ser realizada quando o boto clicado. Por exemplo, voc pode adicionar um comportamento do JavaScript que abre outra pgina quando o usurio clica no boto.
Classe Aplica regras de CSS ao objeto.

Opes de objeto de caixa de seleo


Valor marcado Define o valor a ser enviado para o servidor quando a caixa de seleo marcada. Por exemplo, em

uma pesquisa voc pode definir um valor igual a 4 para concordo totalmente e um valor igual a 1 para discordo totalmente.
Estado inicial Determina se a caixa de seleo marcada quando o formulrio carregado no navegador. Dinmico Permite ao servidor determinar dinamicamente o estado inicial da caixa de seleo. Por exemplo, voc pode

usar as caixas de seleo para apresentar visualmente as informaes Sim/No armazenadas em um registro de banco de dados. No momento do design, voc no sabe essas informaes. Durante o runtime, o servidor l o registro de banco de dados e marca a caixa de seleo caso o valor seja Sim.
Classe Aplica regras de folhas de estilos em cascata (CSS) ao objeto.

Opes do objeto de boto de opo nico


Valor marcado Define o valor a ser enviado para o servidor quando o boto de opo selecionado. Por exemplo, voc

pode digitar skiing na caixa Valor marcado para indicar que um usurio escolheu skiing.
Estado inicial Determina se o boto de opo selecionado quando o formulrio carregado no navegador. Dinmico Permite ao servidor determinar dinamicamente o estado inicial do boto de opo. Por exemplo, voc pode

usar os botes de opo para apresentar visualmente as informaes armazenadas em um registro de banco de dados. No momento do design, voc no sabe essas informaes. Durante o runtime, o servidor l o registro de banco de dados e marca o boto de opo caso o valor corresponda ao que voc especificou.
Classe Aplica regras de CSS ao objeto.

Opes de menu
Lista/menu Atribui um nome ao menu. O nome deve ser exclusivo. Tipo Indica se o menu aberto quando clicado (a opo Menu) ou exibe uma lista rolvel de itens (a opo Lista). Selecione a opo Menu caso voc queira que apenas uma opo permanea visvel quando o formulrio exibido em um navegador. Para exibir as demais opes, o usurio clica na seta para baixo.

Selecione a opo Lista para listar uma ou todas as opes quando o formulrio exibido em um navegador a fim de permitir aos usurios selecionar vrios itens.
Altura (Listar apenas o tipo) Define o nmero de itens exibidos no menu. Selees (Listar apenas o tipo) Indica se o usurio pode selecionar vrios itens na lista. Listar valores Abre uma caixa de dilogo que permite adicionar os itens a um menu de formulrio:

1 Use os botes de adio (+) e de subtrao (-) para adicionar e remover itens na lista. 2 Digite o texto do rtulo e um valor opcional para cada item de menu.

Cada item da lista tem um rtulo (o texto exibido na lista) e um valor (o valor enviado para o aplicativo de processamento caso o item seja selecionado). Caso nenhum valor seja especificado, o rtulo enviado, na verdade, para o aplicativo de processamento.
3 Use os botes de seta para cima e para baixo a fim de reorganizar os itens na lista.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 666


Criao de formulrios

Os itens so exibidos no menu na mesma ordem em que so exibidos na caixa de dilogo Listar valores. O primeiro item da lista o item selecionado quando a pgina carregada em um navegador.
Dinmico Permite ao servidor selecionar dinamicamente um item no menu quando ele exibido pela primeira vez. Classe Permite que voc aplique regras de CSS ao objeto. Selecionados inicialmente Define os itens selecionados na lista por padro. Clique no(s) item(ns) na lista.

Inserir campos de carregamento de arquivo


Voc pode criar um campo de carregamento de arquivo que permite aos usurios selecionar um arquivo no computador como, por exemplo, um documento de processador de textos ou um arquivo grfico e carreg-lo no servidor. Um campo de arquivo semelhante aos demais campos de texto, exceto por tambm conter um boto Procurar. O usurio pode digitar manualmente o caminho do arquivo que deseja carregar ou usar o boto Procurar para localizar e selecionar o arquivo. Para usar campos de carregamento de arquivo, voc deve ter um script do servidor ou uma pgina capaz de lidar com envios de arquivo. Consulte a documentao da tecnologia de servidor que voc usa para processar dados de formulrio. Por exemplo, caso voc use PHP, consulte Controle de carregamentos de arquivos no Manual on-line do PHP em http://us2.php.net/features.file-upload.php. Os campos de arquivo exigem que voc use o mtodo POSTAR para transmitir os arquivos do navegador para o servidor. O arquivo postado no endereo que voc especificou na caixa Ao do formulrio. Nota: Entre em contato com o administrador do sistema para confirmar se h permisso para carregamentos de arquivo annimos antes de usar o campo de arquivo.
1 Insira um formulrio na pgina (Inserir > Formulrio). 2 Selecione o formulrio para exibir o Inspetor de propriedades. 3 Defina o Mtodo do formulrio como POSTAR. 4 No menu pop-up Tipo de codif., selecione multipart/form-data. 5 Na caixa Ao, especifique o script do servidor ou a pgina capaz de controlar o arquivo carregado. 6 Coloque o ponto de insero no contorno do formulrio e selecione Inserir > Formulrio > Campo de arquivo. 7 Defina qualquer uma das seguintes opes no Inspetor de propriedades:
Nome do campo de arquivo Especifica o nome do objeto do campo de arquivo. Largura do caractere Especifica o nmero mximo de caracteres que podem ser exibidos no campo. N mx. de caract. Especifica o nmero mximo de caracteres que o campo manter. Caso o usurio procure o arquivo, o nome de arquivo e o caminho podem exceder o valor N mx. de caract especificado. No entanto, se o usurio tentar digitar o nome de arquivo e o caminho, o campo de arquivo s permitir o nmero de caracteres especificado pelo valor N mx. de caract.

Inserir um boto de imagem


Voc tambm pode usar imagens como cones de boto. O uso de uma imagem para realizar tarefas que no sejam o envio de dados exige que um comportamento seja anexado ao objeto de formulrio.
1 No documento, coloque o ponto de insero dentro do contorno do formulrio. 2 Selecione Inserir > Formulrio > Campo de imagem.

A caixa de dilogo Selecionar origem da imagem exibida.


3 Selecione a imagem do boto na caixa de dilogo Selecionar origem da imagem e clique em OK.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 667


Criao de formulrios

4 Defina qualquer uma das seguintes opes no Inspetor de propriedades:


Campo de imagens Atribui um nome ao boto. Dois nomes reservados, Enviar e Redefinir, informam o formulrio para enviar os dados de formulrio ao aplicativo de processamento ou ao script, ou para redefinir todos os campos de formulrio de acordo com os valores originais, respectivamente. Origem Especifica a imagem que voc deseja usar para o boto. Alt Permite que voc digite texto descritivo caso haja falha no carregamento da imagem no navegador. Alinhar Define o atributo align do objeto. Editar imagem Inicia o editor de imagens padro e abre o arquivo de imagem para edio. Classe Permite que voc aplique regras de CSS ao objeto.

5 Para anexar um comportamento do JavaScript ao boto, selecione a imagem e, depois, selecione o comportamento

no painel Comportamentos (Janela > Comportamentos).

Opes de objeto do campo oculto


Campo oculto Especifica o nome do campo. Valor Atribui um valor ao campo. Esse valor passado para o servidor quando o formulrio enviado.

Inserir um grupo de botes de opo


1 Coloque o ponto de insero dentro do contorno do formulrio. 2 Selecione Inserir > Formulrio > Grupo de botes de opo. 3 Complete a caixa de dilogo e clique em OK. a Na caixa Nome, digite um nome para o grupo de botes de opo.

Caso voc defina os botes de opo para passar parmetros novamente ao servidor, os parmetros so associados ao nome. Por exemplo, caso voc nomeie o grupo myGroup e defina o mtodo de formulrio como OBTER (ou seja, voc deseja que o formulrio passe parmetros de URL, e no parmetros de URL quando o usurio clicar no boto de envio), a expresso myGroup="CheckedValue" ser passada no URL para o servidor.
b Clique no boto de adio (+) para adicionar um boto de opo ao grupo. Digite um rtulo e um valor marcado

para o novo boto.


c Clique nas setas para cima ou para baixo a fim de reorganizar os botes. d Para definir um boto de opo especfico a ser selecionado quando a pgina aberta em um navegador, digite um

valor igual ao valor do boto de opo na caixa Selecionar valor igual a. Digite um valor esttico ou especifique um valor dinmico clicando no cone de raio ao lado da caixa e selecionando um conjunto de registros que contenha possveis valores marcados. Em ambos os casos, o valor que voc especifica deve corresponder ao valor marcado de um dos botes de opo do grupo. Para exibir os valores marcados dos botes de opo, selecione cada um dos botes e abra seu Inspetor de propriedades (Janela > Propriedades).
e Selecione o formato no qual voc deseja que o Dreamweaver crie o layout dos botes.

Crie o layout dos botes usando quebras de linha ou uma tabela. Caso voc selecione a opo de tabela, o Dreamweaver cria uma tabela de coluna nica e coloca os botes de opo esquerda e os rtulos direita. Voc tambm pode definir as propriedades no Inspetor de propriedades ou diretamente na Visualizao de cdigo.

Inserir um grupo de caixas de seleo


1 Coloque o ponto de insero dentro do contorno do formulrio.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 668


Criao de formulrios

2 Selecione Inserir > Formulrio > Grupo de caixas de seleo. 3 Complete a caixa de dilogo e clique em OK. a Na caixa Nome, digite um nome para o grupo de caixas de seleo.

Caso voc defina as caixas de seleo para passar parmetros novamente ao servidor, os parmetros sero associados ao nome. Por exemplo, caso voc nomeie o grupo myGroup e defina o mtodo de formulrio como OBTER (ou seja, voc deseja que o formulrio passe parmetros de URL, e no parmetros de formulrio quando o usurio clicar no boto de envio), a expresso myGroup="CheckedValue" ser passada no URL para o servidor.
b Clique no boto de adio (+) para adicionar uma caixa de seleo ao grupo. Digite um rtulo e um valor marcado

para a nova caixa de seleo.


c Clique nas setas para cima ou para baixo a fim de reorganizar as caixas de seleo. d Para definir uma caixa de seleo especfica a ser selecionada quando a pgina aberta em um navegador, digite um

valor igual ao valor da caixa de seleo na caixa Selecionar valor igual a. Digite um valor esttico ou especifique um valor dinmico clicando no cone de raio ao lado da caixa e selecionando um conjunto de registros que contenha possveis valores marcados. Em ambos os casos, o valor que voc especifica deve corresponder ao valor marcado de uma das caixas de seleo do grupo. Para exibir os valores marcados das caixas de seleo, selecione cada caixa de seleo e abra seu Inspetor de propriedades (Janela > Propriedades).
e Selecione o formato no qual deseja que o Dreamweaver crie o layout das caixas de seleo.

Crie o layout das caixas de seleo usando quebras de linha ou uma tabela. Caso voc selecione a opo de tabela, o Dreamweaver cria uma tabela de coluna nica e coloca as caixas de seleo esquerda e os rtulos direita. Voc tambm pode definir as propriedades no Inspetor de propriedades ou diretamente na Visualizao de cdigo.

Sobre os objetos de formulrio dinmicos


Um objeto de formulrio dinmico um objeto de formulrio cujo estado inicial determinado pelo servidor quando a pgina solicitada no servidor, e no pelo designer do formulrio durante o design. Por exemplo, quando um usurio solicita uma pgina do PHP que contm um formulrio com um menu, um script do PHP na pgina preenche automaticamente o menu com valores armazenados em um banco de dados. Em seguida, o servidor envia a pgina completada para o navegador do usurio. Tornar objetos de formulrio dinmicos pode simplificar a manuteno do site. Por exemplo, muitos sites usam menus para apresentar aos usurios um conjunto de opes. Caso o menu seja dinmico, voc pode adicionar, remover ou alterar itens de menu em um nico local a tabela do banco de dados em que os itens so armazenados para atualizar todas as ocorrncias do mesmo menu no site.

Mais tpicos da Ajuda


Definio de origens de contedo dinmico na pgina 563

Inserir ou alterar um menu dinmico de formulrio HTML


Voc pode preencher dinamicamente um menu de formulrio em HTML ou menu de lista com entradas de um banco de dados. Na maioria das pginas, voc pode usar um objeto de menu em HTML. Antes de comear, voc deve inserir um formulrio em HTML em uma pgina do ColdFusion, PHP ou ASP e definir um conjunto de registros ou outra fonte de contedo dinmico para o menu.
1 Insira um objeto de formulrio Lista/menu HTML na pgina: a Clique em um formulrio em HTML na pgina (Inserir > Formulrio > Formulrio).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 669


Criao de formulrios

b Selecione Inserir > Formulrio > Lista/menu para inserir o objeto de formulrio. 2 Siga um destes procedimentos:

Selecione o objeto de formulrio Lista/menu HTML novo ou j existente e, em seguida, clique no boto Dinmico
no Inspetor de propriedades.

Selecione Inserir > Objetos de dados > Dados dinmicos > Lista de seleo dinmica.
3 Complete a caixa de dilogo Lista/menu dinmico e clique em OK. a No menu pop-up Opes do conjunto de registros, selecione o conjunto de registros a ser usado como uma fonte

de contedo. Voc tambm usa esse menu para editar itens de lista/menu estticos e dinmicos posteriormente.
b Na rea Opes estticas, insira um item padro na lista ou no menu. Alm disso, use essa opo para editar

entradas estticas em um objeto de formulrio lista/menu depois de adicionar contedo dinmico.


c (Opcional) Use os botes de adio (+) e de subtrao (-) para adicionar e remover itens na lista. Os itens esto na

mesma ordem da caixa de dilogo Valores iniciais da lista. O primeiro item da lista o item selecionado quando a pgina carregada em um navegador. Use os botes de seta para cima e para baixo a fim de reorganizar os itens na lista.
d No menu pop-up Valores, selecione o campo que contm os valores dos itens de menu. e No menu pop-up Rtulos, selecione o campo que contm os rtulos dos itens de menu. f

(Opcional) Para especificar que um determinado item de menu selecionado quando a pgina aberta em um navegador ou quando um registro exibido no formulrio, digite um valor igual ao valor do item de menu na caixa Selecionar valor igual a.

Voc pode inserir um valor esttico ou especificar um valor dinmico clicando no cone de raio ao lado da caixa e selecionando um valor dinmico na lista das fontes de dados. Em ambos os casos, o valor especificado deve ser correspondente a um dos valores do item de menu.

Tornar os menus de formulrio em HTML dinmicos


1 Na visualizao Design, selecione o objeto de formulrio lista/menu. 2 No Inspetor de propriedades, clique no boto Dinmico. 3 Complete a caixa de dilogo e clique em OK.

Exibir contedo dinmico em campos de texto em HTML


Voc pode exibir contedo dinmico em campos de texto HTML quando o formulrio visualizado em um navegador. Antes de comear, voc deve criar o formulrio em uma pgina do ColdFusion, PHP ou ASP e definir um conjunto de registros ou outra fonte de contedo dinmico para o texto.
1 Selecione o campo de texto no formulrio em HTML na pgina. 2 No Inspetor de propriedades, clique no cone de raio ao lado da caixa Valor inicial para exibir a caixa de dilogo

Dados dinmicos.
3 Selecione a coluna do conjunto de registros que fornecer um valor para o campo de texto e, em seguida, clique em OK.

Definir as opes da caixa de dilogo Campo de texto dinmico


1 Selecione o campo de texto a ser tornado dinmico no menu pop-up Campo de texto.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 670


Criao de formulrios

2 Clique no cone de raio ao lado da caixa Definir valor para, selecione uma fonte de dados na lista de fontes e clique

em OK. A fonte de dados deve conter informaes textuais. Caso nenhuma fonte de dados seja exibida na lista ou caso as fontes de dados disponveis no atendam s suas necessidades, clique no boto de adio (+) para definir uma nova.

Mais tpicos da Ajuda


Definio de origens de contedo dinmico na pgina 563

Pr-selecionar dinamicamente uma caixa de seleo em HTML


Voc pode permitir ao servidor decidir se deve escolher uma caixa de seleo quando o formulrio exibido em um navegador. Antes de comear, voc deve criar o formulrio em uma pgina do ColdFusion, PHP ou ASP e definir um conjunto de registros ou outra fonte de contedo dinmico para as caixas de seleo. O ideal que a origem de contedo contenha dados booleanos como, por exemplo, Sim/No ou verdadeiro/falso.
1 Escolha um objeto de formulrio de caixa de seleo na pgina. 2 No Inspetor de propriedades, clique no boto Dinmico. 3 Complete a caixa de dilogo Caixa de seleo dinmica e clique em OK.

Clique no cone de raio ao lado da caixa Marcar se e selecione o arquivo na lista de fontes de dados.
A fonte de dados deve conter dados Booleanos como, por exemplo, Sim e No ou verdadeiro e falso. Caso nenhuma fonte de dados seja exibida na lista ou caso as fontes de dados disponveis no atendam s suas necessidades, clique no boto de adio (+) para definir uma nova.

Na caixa Igual a, digite o valor que o campo deve ter para que a caixa de seleo seja exibida marcada.
Por exemplo, para que a caixa de seleo seja exibida marcada quando um determinado campo em um registro apresentar um valor Sim, digite Sim na caixa Igual a. Nota: Esse valor tambm retorna para o servidor caso o usurio clique no boto Enviar do formulrio.

Pr-selecionar dinamicamente um boto de opo em HTML


Pr-selecione dinamicamente um boto de opo em HTML quando um registro exibido no formulrio em HTML em um navegador. Antes de comear, voc deve criar o formulrio em uma pgina do ColdFusion, PHP ou ASP e inserir pelo menos um grupo de botes de opo em HTML (Inserir > Formulrio > Grupo de botes de opo). Voc tambm deve definir um conjunto de registros ou outra origem de contedo dinmico para os botes de opo. O ideal que a origem de contedo contenha dados booleanos como, por exemplo, Sim/no ou verdadeiro/falso.
1 Na visualizao Design, selecione um boto de opo no grupo. 2 No Inspetor de propriedades, clique no boto Dinmico. 3 Complete a caixa de dilogo Grupo de botes de opo dinmico e clique em OK.

Definir as opes da caixa de dilogo Grupo de botes de opo dinmico


1 No menu pop-up Grupo de botes de opo, selecione um formulrio e o grupo de botes de opo na pgina.

A caixa Valor do boto de opo exibe os valores de todos os botes de opo no grupo.
2 Selecione um valor a ser pr-selecionado dinamicamente na lista de valores. Esse valor exibido na caixa Valor.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 671


Criao de formulrios

3 Clique no cone de raio ao lado da caixa Selecionar valor igual a e selecione um conjunto de registros que contenha

valores marcados para os botes de opo no grupo. O conjunto de registros que voc seleciona contm valores correspondentes aos valores marcados dos botes de opo. Para exibir os valores marcados dos botes de opo, selecione cada um dos botes e abra seu Inspetor de propriedades (Janela > Propriedades).
4 Clique em OK.

Definir as opes da caixa de dilogo Grupo de botes de opo dinmico (ColdFusion)


1 Selecione um grupo de botes de opo e um formulrio no menu pop-up Grupo de botes de opo. 2 Clique no cone de raio prximo caixa Selecionar valor igual a. 3 Complete a caixa de dilogo Dados dinmicos e clique em OK. a Selecione uma fonte de dados na lista das fontes de dados. b (Opcional) Selecione um formato de dados para o texto. c (Opcional) Modifique o cdigo que o Dreamweaver insere na pgina para exibir o texto dinmico. 4 Clique em OK para fechar a caixa de dilogo Grupo de botes de opo dinmico e insira o alocador de espao de

contedo dinmico no Grupo de botes de opo.

Validar dados de formulrio em HTML


O Dreamweaver pode adicionar cdigo JavaScript que verifica o contedo dos campos de texto especificados para assegurar que o usurio inseriu o tipo de dados correto. Voc pode usar widgets de formulrio do Spry para criar os formulrios e validar o contedo dos elementos de formulrio especificados. Para obter mais informaes, consulte os tpicos do Spry listados abaixo. Voc tambm pode criar formulrios do ColdFusion no Dreamweaver que validam o contedo de campos especificados. Para obter mais informaes, consulte os tpicos do captulo ColdFusion listados abaixo.
1 Crie um formulrio em HTML que inclua pelo menos um campo de texto e um boto Enviar.

Verifique se todos os campos de texto que voc deseja validar tm um nome exclusivo.
2 Selecione o boto Enviar. 3 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione o

comportamento Validar formulrio na lista.


4 Defina as regras de validao para cada campo de texto e clique em OK.

Por exemplo, voc pode especificar que um campo de texto referente idade de uma pessoa aceite apenas nmeros. Nota: O comportamento Validar formulrio s est disponvel caso um campo de texto tenha sido inserido no documento.

Mais tpicos da Ajuda


Funcionamento do widget Campo de texto de validao na pgina 444 Funcionamento do widget rea de texto de validao na pgina 449 Funcionamento do widget Seleo de validao na pgina 453

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 672


Criao de formulrios

Funcionamento do widget Caixa de seleo de validao na pgina 456 Validar dados de formulrio do ColdFusion na pgina 686

Anexar comportamentos do JavaScript a objetos de formulrio em HTML


Voc pode anexar comportamentos do JavaScript armazenados no Dreamweaver a objetos de formulrio em HTML como, por exemplo, botes.
1 Selecione o objeto de formulrio em HTML. 2 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione um

comportamento na lista.

Anexar scripts personalizados a botes de formulrio em HTML


Alguns formulrios usam JavaScript ou VBScript para realizar o processamento de formulrio ou outra ao no cliente, e no o envio dos dados do formulrio para processamento no servidor. Voc pode usar o Dreamweaver para configurar um boto de formulrio e executar um determinado script do cliente quando usurio clica no boto.
1 Selecione um boto Enviar em um formulrio. 2 No painel Comportamentos (Janela > Comportamentos), clique no boto de adio (+) e selecione Chamar

JavaScript na lista.
3 Na caixa Chamar JavaScript, digite o nome da funo do JavaScript a ser executada quando o usurio clica no boto

e clique em OK. Por exemplo, voc pode digitar o nome de uma funo que ainda no existe como, por exemplo, processMyForm().
4 Caso a funo JavaScript ainda no esteja na seo head do documento, adicione-a agora.

Por exemplo, voc pode definir a seguinte funo JavaScript na seo head do documento para exibir uma mensagem quando o usurio clica no boto Enviar:
function processMyForm(){ alert('Thanks for your order!'); }

Mais tpicos da Ajuda


Aplicar o comportamento Chamar JavaScript na pgina 349

Criar formulrios HTML acessveis


Ao inserir um objeto de formulrio em HTML, voc pode tornar o objeto de formulrio acessvel e alterar os atributos de acessibilidade posteriormente.

Adicionar um objeto de formulrio acessvel


1 Na primeira vez em que voc adicionar objetos de formulrio acessveis, ative a caixa de dilogo Acessibilidade para

objetos de formulrio (consulte Otimizao da rea de trabalho para desenvolvimento visual na pgina 551). Trata-se de uma etapa nica.
2 No documento, coloque o ponto de insero onde voc deseja que o objeto de formulrio seja exibido. 3 Selecione Inserir > Formulrio e selecione um objeto de formulrio a ser inserido.

A caixa de dilogo Atributos de acesso a tag input exibida.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 673


Criao de formulrios

4 Complete a caixa de dilogo e clique em OK. Veja uma lista parcial de opes:

Nota: O leitor de tela l o nome que voc digita como sendo o atributo Rtulo do objeto.
ID atribui uma ID ao campo de formulrio. Esse valor pode ser usado como referncia ao campo do JavaScript; ele tambm usado como sendo o valor do atributo for caso voc escolha a opo Anexar tag label usando nas opes Estilo. Dispor ao redor com tag label Envolve o item de formulrio com uma tag label da seguinte forma:
<label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

Anexar tag label usando Usa o atributo for para envolver o item de formulrio com uma tag label da seguinte forma:
<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

Essa opo faz com que o navegador processe texto associado a uma caixa de seleo e ao boto de opo com um retngulo em foco e permite ao usurio marcar a caixa de seleo e o boto de opo clicando em qualquer lugar do texto associado, e no a caixa de seleo ou o controle do boto de opo. Nota: Essa a opo preferencial para acessibilidade; no entanto, a funcionalidade pode variar de acordo com o navegador.
Nenhuma tag label No usa uma tag label da seguinte forma:
<input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

Chave de acesso Usa um equivalente do teclado (uma letra) e a tecla Alt (Windows) ou a tecla Control (Macintosh)

para selecionar o objeto de formulrio no navegador. Por exemplo, se voc digitasse B como Chave de acesso, os usurios com um navegador Macintosh poderiam digitar Control+B para selecionar o objeto de formulrio.
ndice de abas Especifica uma ordem de abas para os objetos de formulrio. Caso voc defina a ordem de abas para um objeto, voc deve definir a ordem para todos os objetos.

A configurao de uma ordem de abas til quando voc tem outros links e objetos de formulrio na pgina e precisa que o usurio percorra eles em uma ordem especfica.
5 Clique em Sim para inserir uma tag form.

O objeto de formulrio exibido no documento. Nota: Se voc pressionar Cancelar, o objeto de formulrio aparecer no documento, mas o Dreamweaver no associar tags ou atributos de acessibilidade a ela.

Editar valores de acessibilidade para um objeto de formulrio


1 Na janela Documento, selecione o objeto. 2 Siga um destes procedimentos:

Edite os atributos apropriados na Visualizao de cdigo. Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida,
selecione Editar tag.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 674


Criao de formulrios

Criao dos formulrios do ColdFusion


Sobre formulrios do ColdFusion
Os formulrios do ColdFusion fornecem vrios mecanismos incorporados para validar os dados de formulrios. Por exemplo, voc pode fazer uma verificao para garantir que um usurio digitou uma data vlida. Alguns controles de formulrios possuem recursos adicionais. Vrios no tm correspondentes em HTML e outros suportam diretamente o preenchimento dinmico de controles a partir de fontes de dados. O Dreamweaver fornece vrios aprimoramentos para os desenvolvedores do ColdFusion que usam o ColdFusion MX 7 ou posterior como servidor de desenvolvimento. Esses aprimoramentos incluem mais botes do painel Inserir, itens de menu e inspetores de propriedades para que voc possa criar e definir rapidamente as propriedades de formulrios do ColdFusion. Voc tambm pode gerar um cdigo que valide as informaes fornecidas pelos visitantes do site. Por exemplo, voc pode verificar se o endereo de email fornecido por um usurio contm o smbolo @ ou se um campo de texto obrigatrio contm um determinado tipo de valor.

Ativar os aprimoramentos feitos no ColdFusion


Alguns desses aprimoramentos exigem que voc defina um computador em que o ColdFusion MX 7 ou posterior esteja em execuo como um servidor de teste para o Dreamweaver. Por exemplo, os inspetores de propriedades para controles de formulrio s permanecem disponveis caso voc especifique o servidor de teste correto. Voc define um servidor de teste apenas uma vez. Em seguida, o Dreamweaver detecta automaticamente a verso do servidor de teste e faz os aprimoramentos disponveis caso ele detecte o ColdFusion.
1 Caso voc ainda no tenha feito isso, defina um site do Dreamweaver para o projeto do ColdFusion. 2 Selecione Site > Gerenciar sites, selecione seu site da lista e clique em Editar. 3 Selecione a categoria Servidores e especifique um computador que esteja executando o ColdFusion MX 7 ou

posterior como sendo o servidor de teste para o site do Dreamweaver. Verifique se voc especificou um URL da Web.
4 Abra um documento qualquer do ColdFusion.

Voc no ver nenhuma alterao visvel feita no espao de trabalho do Dreamweaver at abrir um documento do ColdFusion.

Mais tpicos da Ajuda


Proteo de uma pasta no aplicativo (ColdFusion) na pgina 648 Configurao de um site do Dreamweaver na pgina 37 Configurar um servidor de teste na pgina 46

Criar formulrios do ColdFusion


Voc pode usar vrios botes do painel Inserir, itens de menu e inspetores de propriedades para criar rapidamente formulrios do ColdFusion e definir as propriedades no Dreamweaver. Nota: Esses aprimoramentos s esto disponveis caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Abra uma pgina do ColdFusion e coloque o ponto de insero onde voc deseja que o formulrio do ColdFusion

seja exibido.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 675


Criao de formulrios

2 Selecione Inserir > Objetos do ColdFusion > CFForm > CFForm ou selecione a categoria CFForm do painel Inserir

e clique no cone CF Form. O Dreamweaver insere um formulrio do ColdFusion vazio. Na visualizao Design, o formulrio indicado por um contorno vermelho pontilhado. Caso voc no veja esse contorno, verifique se Exibir > Auxlios visuais > Elementos invisveis est selecionado.
3 Verifique se o formulrio ainda est selecionado e, em seguida, use o Inspetor de propriedades para definir qualquer

uma das seguintes propriedades do formulrio.


CFForm Define o nome do formulrio. Ao Permite que voc especifique o nome da pgina do ColdFusion a ser processada quando o formulrio for

enviado.
Mtodo Permite que voc defina o mtodo usado pelo navegador para enviar os dados do formulrio para o servidor:

POSTAR Envia os dados usando o mtodo postar HTTP; esse mtodo envia os dados em uma mensagem separada para o servidor. OBTER Envia os dados usando o mtodo obter HTTP e colocando o contedo do campo do formulrio na seqncia de caracteres de consulta do URL.
Alvo Permite que voc modifique o valor do atributo-alvo da tag cfform. Tipo de codificao Especifica o mtodo de codificao usado na transmisso dos dados do formulrio.

Nota: Tipo de codificao no se refere codificao de caracteres. Esse atributo especifica o tipo de contedo usado no envio do formulrio para o servidor (quando o valor do mtodo postar). O valor padro desse atributo application/x-www-form-urlencoded.
Formato Determina o tipo de formulrio criado:

HTML Gera um formulrio em HTML e o envia para o cliente. Os controles filhos cfgrid e cftree podem estar em Flash ou no formato applet. Flash Gera um formulrio em Flash e o envia para o cliente. Todos os controles esto no formato Flash. XML Gera XForms em XML e coloca os resultados em uma varivel com o nome de formulrio do ColdFusion.
No envia nada para o cliente. Os controles filhos cfgrid e cftree podem estar em Flash ou no formato applet.
Estilo Permite que voc especifique um estilo para o formulrio. Para obter mais informaes, consulte a documentao do ColdFusion. Capa Flash/XML Permite que voc especifique uma cor halo para estilizar a sada. O tema determina a cor usada para elementos realados e selecionados. Preservar dados Determina se preciso substituir os valores de controle iniciais pelos valores enviados quando o formulrio postado.

Caso seja Falso, os valores especificados nos atributos da tag de controle so usados. Caso seja Verdadeiro, so usados os valores enviados.
Origem dos scripts Especifica o URL, relativo raiz da Web, do arquivo JavaScript que contm o cdigo do cliente usado pela tag e pelas tags filhas. O atributo til caso o arquivo no esteja no local padro. Esse atributo pode ser necessrio em alguns ambientes de hospedagem e configuraes que bloqueiam o acesso ao diretrio /CFIDE. O local padro definido no Administrador do ColdFusion; por padro, ele /CFIDE/scripts/cfform.js. Arquivamento Especifica o URL das classes Java para download dos controles de applet cfgrid, cfslider e cftree. O local

padro /CFIDE/classes/cfapplets.jar.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 676


Criao de formulrios

Altura Especifica a altura do formulrio. Largura Especifica a largura do formulrio. Exibir editor de tags para cfform Permite que voc edite as propriedades no listadas no Inspetor de propriedades.

4 Insira os controles de formulrio do ColdFusion.

Coloque o ponto de insero onde deseja que o controle seja exibido no formulrio do ColdFusion e, em seguida, selecione o controle no menu Inserir (Inserir > Objetos do ColdFusion > CFForm) ou na categoria CFForm do painel Inserir.
5 Se necessrio, defina as propriedades do controle usando o Inspetor de propriedades.

Verifique se o controle est selecionado na visualizao Design e, em seguida, defina as propriedades no Inspetor de propriedades. Para obter mais informaes sobre as propriedades, clique no cone Ajuda do Inspetor de propriedades.
6 Ajuste o layout do formulrio do ColdFusion.

Caso esteja criando um formulrio baseado em HTML, voc pode usar quebras de linha, quebras de pargrafo, textos pr-formatados ou tabelas para formatar os formulrios. Voc no pode inserir um formulrio do ColdFusion em outro formulrio do ColdFusion (ou seja, no possvel sobrepor tags), mas pode incluir mais de um formulrio do ColdFusion em uma pgina. Caso voc esteja criando um formulrio baseado em Flash, use os estilos CSS (folhas de estilos em cascata) no layout do formulrio. O ColdFusion ignora qualquer HTML no formulrio. Lembre-se de identificar os campos do formulrio do ColdFusion com um texto descritivo para que os usurios saibam ao que esto respondendo. Por exemplo, crie um rtulo Digite o seu nome para solicitar informaes sobre o nome.

Mais tpicos da Ajuda


Validar dados de formulrio do ColdFusion na pgina 686 Criar um formulrio em HTML na pgina 662

Inserir controles de formulrio do ColdFusion


Use o painel Inserir ou o menu Inserir para inserir rapidamente os controles de formulrio do ColdFusion em um formulrio do ColdFusion. Voc precisa criar um formulrio do ColdFusion em branco antes de inserir controles nele. Nota: Esses aprimoramentos s esto disponveis caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Na visualizao Design, coloque o ponto de insero dentro do contorno do formulrio. 2 Selecione o controle no menu Inserir (Inserir > Objetos do ColdFusion > CFForm) ou na categoria CFForm do

painel Inserir.
3 Clique no controle da pgina para selecion-la e, em seguida, definir suas propriedades no Inspetor de

propriedades. Para obter informaes sobre as propriedades de controles especficos, consulte os tpicos sobre os controles.

Mais tpicos da Ajuda


Modificar controles de formulrio do ColdFusion na pgina 686 Validar dados de formulrio do ColdFusion na pgina 686

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 677


Criao de formulrios

Inserir campos de texto do ColdFusion


Voc pode inserir virtualmente um campo de texto do ColdFusion ou campo de senha no formulrio e, em seguida, definir suas opes. Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.

Inserir virtualmente um campo de texto do ColdFusion


1 Na visualizao Design, coloque o ponto de insero dentro do contorno do formulrio. 2 Na categoria CFForm do painel Inserir, clique no cone Campo de texto do CF ou selecione Inserir > Objetos do

ColdFusion > CFForm > CFtextfield. Um campo de texto exibido no formulrio.


3 Selecione o campo de texto e defina suas propriedades no Inspetor de propriedades. 4 Para identificar o campo de texto na pgina, clique ao lado dele e digite o texto do rtulo.

Inserir visualmente um campo de senha


1 Repita as etapas 1 e 2 do procedimento anterior para inserir um campo de texto. 2 Selecione o campo de texto inserido para exibir o seu Inspetor de propriedades. 3 Selecione o valor Senha no menu pop-up Modo de texto do Inspetor de propriedades.

Opes de CFTextField (ColdFusion)


Para definir as opes de um campo de texto ou de senha do ColdFusion, defina uma das seguintes opes no Inspetor de propriedades de CFTextField:
CFtextfield Define o atributo id da tag <cfinput>. Valor Permite que voc especifique o texto a ser exibido no campo quando a pgina for aberta pela primeira vez em

um navegador. As informaes podem ser estticas ou dinmicas. Para especificar um valor dinmico, clique no cone de raio ao lado da caixa Valor e selecione a coluna de um conjunto de registros na caixa de dilogo Dados dinmicos. A coluna do conjunto de registros fornece um valor para o campo de texto quando voc exibe o formulrio em um navegador.
Modo de texto Permite que voc alterne os campos de entrada de texto e de senha padro. O atributo modificado por esse controle type. Somente leitura Permite que voc torne o texto exibido somente leitura. Comprimento mximo Define o nmero mximo de caracteres aceitos pelo campo de texto. Mscara Permite que voc especifique uma mscara para o texto solicitado. Voc usa essa propriedade para validar a

entrada do usurio. O formato da mscara constitudo pelos caracteres A, 9, X e ? . Nota: O atributo mask ignorado para a tag cfinput type="password".
Validar Especifica o tipo de validao do campo atual. Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer. Rtulo Permite que voc especifique um rtulo para o campo de texto. Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e direita. Para obter mais informaes, consulte a documentao do ColdFusion.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 678


Criao de formulrios

Altura Permite que voc especifique a altura do controle, em pixels. Largura Permite que voc especifique a largura do controle, em pixels. Tamanho Permite que voc especifique o tamanho do controle. Obrigatrio Permite que voc especifique se o campo de texto deve ou no conter dados para que o formulrio seja

enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.

Inserir campos ocultos do ColdFusion


Voc pode inserir visualmente um campo oculto do ColdFusion no formulrio e definir suas propriedades. Use campos ocultos para armazenar e enviar informaes no inseridas pelo usurio. As informaes permanecem ocultas ao usurio. Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Na visualizao Design, coloque o ponto de insero dentro do contorno do formulrio. 2 Na categoria CFForm do painel Inserir, clique no cone Campo oculto do CF.

Um marcador exibido no formulrio do ColdFusion. Se voc no vir o marcador, selecione Exibir > Auxlios visuais > Elementos invisveis.
3 Selecione o campo oculto na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfhiddenfield Permite que voc especifique o nome exclusivo do campo oculto. Valor Permite que voc especifique um valor para o campo oculto. Os dados podem ser estticos ou dinmicos.

Para especificar um valor dinmico, clique no cone de raio ao lado da caixa Valor e selecione a coluna de um conjunto de registros na caixa de dilogo Dados dinmicos. A coluna do conjunto de registros fornece um valor para o campo de texto quando voc exibe o formulrio em um navegador.
Validar Especifica o tipo de validao do campo atual. Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer. Rtulo Permite que voc especifique um rtulo para o controle. Essa propriedade ignorada pelo servidor do

ColdFusion durante o runtime.


Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e direita. Para obter mais informaes, consulte a documentao do ColdFusion. Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do

ColdFusion durante o runtime.


Largura Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo servidor do

ColdFusion durante o runtime.


Tamanho Permite que voc especifique o tamanho do controle. Essa propriedade ignorada pelo servidor do ColdFusion durante o runtime. Obrigatrio Permite que voc especifique se o campo oculto deve ou no conter dados para que o formulrio seja

enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 679


Criao de formulrios

Mais tpicos da Ajuda


Modificar controles de formulrio do ColdFusion na pgina 686

Inserir reas de texto do ColdFusion


Voc pode inserir visualmente uma rea de texto do ColdFusion no formulrio e definir suas propriedades. Uma rea de texto um elemento de entrada que consiste em vrias linhas de texto. Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Coloque o ponto de insero dentro do contorno do formulrio. 2 Na categoria CFForm do painel Inserir, clique no cone rea de texto do CF.

Uma rea de texto exibida no formulrio do ColdFusion.


3 Selecione a rea de texto na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cftextarea Permite que voc especifique um nome exclusivo para o controle. Largura do caractere Permite que voc defina o nmero de caracteres por linha. Nmero de linhas Permite que voc defina o nmero de linhas a serem exibidas na rea de texto. Quebra automtica de linha Permite que voc especifique como quebrar automaticamente a linha do texto digitado

pelos usurios.
Obrigatrio Permite que voc especifique se o usurio deve inserir dados no campo (marcado) ou no (desmarcado). Valor inicial Permite que voc especifique o texto a ser exibido na rea de texto quando a pgina for inicialmente aberta

em um navegador.
Validar Especifica o tipo de validao do campo. Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer. Rtulo Permite que voc especifique um rtulo para o controle. Estilo Permite que voc especifique um estilo para o controle. Para obter mais informaes, consulte a documentao do ColdFusion. Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do

ColdFusion durante o runtime.


Largura Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo servidor do

ColdFusion durante o runtime.


Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.

4 Para identificar a rea de texto, clique ao lado dela e digite o texto do rtulo.

Mais tpicos da Ajuda


Validar dados de formulrio do ColdFusion na pgina 686 Modificar controles de formulrio do ColdFusion na pgina 686

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 680


Criao de formulrios

Inserir botes do ColdFusion


Voc pode inserir visualmente um boto do ColdFusion no formulrio e definir suas propriedades. Os botes do ColdFusion controlam as operaes de formulrio do ColdFusion. Eles podem ser usados no envio dos dados de formulrio do ColdFusion para o servidor ou na redefinio do formulrio do ColdFusion. Os botes padro do ColdFusion costumam estar identificados com os rtulos Enviar, Redefinir ou Enviar. Voc tambm pode atribuir outras tarefas de processamento definidas em um script. Por exemplo, o boto pode calcular o custo total dos itens selecionados com base em valores atribudos. Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Coloque o ponto de insero dentro do contorno do formulrio do ColdFusion. 2 Na categoria CFForm do painel Inserir, clique no cone Boto do CF.

Um boto exibido no formulrio do ColdFusion.


3 Selecione o boto na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfbutton Permite que voc especifique um nome exclusivo para o controle. Ao Permite que voc especifique o tipo de boto a ser criado. Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.

As demais propriedades so ignoradas pelo servidor do ColdFusion durante o runtime.

Mais tpicos da Ajuda


Modificar controles de formulrio do ColdFusion na pgina 686

Inserir caixas de seleo do ColdFusion


Voc pode inserir visualmente uma caixa de seleo do ColdFusion no formulrio e definir suas propriedades. Use as caixas de seleo para permitir que os usurios escolham mais de uma opo em um conjunto de opes. Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Coloque o ponto de insero dentro do contorno do formulrio. 2 Na categoria CFForm do painel Inserir, clique no cone Caixa de seleo do CF.

Uma caixa de seleo exibida no formulrio do ColdFusion.


3 Selecione a caixa de seleo na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfcheckbox Permite que voc especifique um nome exclusivo para o controle. Valor marcado Permite que voc especifique um valor a ser retornado pela caixa de seleo caso o usurio a marque. Estado inicial Permite que voc especifique se a caixa de seleo permanece marcada quando a pgina aberta pela

primeira vez em um navegador.


Validar Especifica o tipo de validao da caixa de seleo. Validar em Especifica quando a caixa de seleo validada: onSubmit, onBlur ou onServer. Rtulo Permite que voc especifique um rtulo para a caixa de seleo. Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e direita. Para obter mais informaes, consulte a documentao do ColdFusion.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 681


Criao de formulrios

Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do

ColdFusion durante o runtime.


Largura Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo servidor do

ColdFusion durante o runtime.


Tamanho Permite que voc especifique o tamanho do controle. Essa propriedade ignorada pelo servidor do ColdFusion durante o runtime. Obrigatrio Permite que voc especifique se a caixa de seleo deve permanecer marcada para que o formulrio seja

enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.

4 Para identificar a caixa de seleo, clique ao lado dela na pgina e digite o texto do rtulo.

Mais tpicos da Ajuda


Modificar controles de formulrio do ColdFusion na pgina 686 Validar dados de formulrio do ColdFusion na pgina 686

Inserir botes de opo do ColdFusion


Voc pode inserir visualmente um boto de opo do ColdFusion no formulrio e definir suas propriedades. Use botes de opo quando quiser que os usurios selecionem apenas uma dentre um conjunto de opes. Os botes de opo costumam ser usados em grupos. Todos os botes de opo em um grupo devem ter o mesmo nome. Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Coloque o ponto de insero dentro do contorno do formulrio. 2 Selecione Inserir > Objetos do ColdFusion > CFForm > CFradiobutton.

Um boto de opo exibido no formulrio do ColdFusion.


3 Selecione o boto de opo na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfradiobutton Permite que voc especifique um nome exclusivo para o controle. Valor marcado Permite que voc especifique um valor a ser retornado pelo boto de opo caso o usurio a marque. Estado inicial Permite que voc especifique se o boto de opo permanece selecionado quando a pgina aberta pela

primeira vez em um navegador.


Validar Especifica o tipo de validao do boto de opo. Validar em Especifica quando o boto de opo validado: onSubmit, onBlur ou onServer. Rtulo Permite que voc especifique um rtulo para o boto de opo. Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e direita. Para obter mais informaes, consulte a documentao do ColdFusion. Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do

ColdFusion durante o runtime.


Largura Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo servidor do

ColdFusion durante o runtime.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 682


Criao de formulrios

Tamanho Permite que voc especifique o tamanho do controle. Essa propriedade ignorada pelo servidor do ColdFusion durante o runtime. Obrigatrio Permite que voc especifique se o boto de opo deve permanecer selecionado para que o formulrio seja

enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.

4 Para identificar o boto de opo, clique ao lado dele na pgina e digite o texto do rtulo.

Mais tpicos da Ajuda


Modificar controles de formulrio do ColdFusion na pgina 686 Validar dados de formulrio do ColdFusion na pgina 686

Inserir caixas de marcao do ColdFusion


Voc pode inserir visualmente uma caixa de marcao do ColdFusion no formulrio e definir suas propriedades. Uma caixa de marcao permite que um visitante selecione um ou mais itens de uma lista. As caixas de marcao so teis quando voc tem uma quantidade de espao limitada, mas precisa exibir muitos itens. Elas tambm so muito teis quando voc deseja controlar os valores retornados ao servidor. Diferentemente dos campos de texto, nos quais os usurios digitam o que querem, inclusive dados invlidos, com as caixas de marcao, voc pode definir os valores exatos retornados por um menu. Voc pode inserir dois tipos de caixas de marcao em um formulrio: um menu que suspenso quando o usurio clica nele ou um menu que exibe uma lista rolvel de itens que o usurio pode selecionar. Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Coloque o ponto de insero dentro do contorno do formulrio. 2 Na categoria CFForm do painel Inserir, clique no cone Marcao do CF.

Uma caixa de marcao exibida no formulrio do ColdFusion.


3 Selecione a caixa de marcao na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfselect Permite que voc especifique um nome exclusivo para o controle. Tipo Permite que voc escolha um menu pop-up ou uma lista. Caso voc selecione o tipo lista, as opes Listar altura

e Permitir vrias selees de lista so disponibilizadas.


Listar altura Permite que voc especifique o nmero de linhas a serem exibidas no menu da lista. S disponvel caso

voc selecione o tipo lista.


Permitir vrias selees de lista Permite que voc especifique se o usurio pode selecionar mais de uma opo da lista

por vez. S disponvel caso voc selecione o tipo lista.


Editar valores Abre uma caixa de dilogo que lhe permite adicionar, editar ou remover opes da caixa de marcao. Selecionados inicialmente Permite que voc especifique a opo selecionada por padro. Voc pode selecionar mais

de uma opo caso tenha selecionado a opo Permitir vrias selees de lista.
Conjunto de registros Permite que voc especifique o nome da consulta do ColdFusion que deseja usar para preencher

a lista ou o menu.
Exibir coluna Permite que voc especifique a coluna do conjunto de registros para fornecer o rtulo de exibio de

cada elemento da lista. Usado com a propriedade Conjunto de registros.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 683


Criao de formulrios

Coluna de valor Permite que voc especifique a coluna do conjunto de registros para fornecer o valor de cada elemento da lista. Usado com a propriedade Conjunto de registros. Rtulo do Flash Permite que voc especifique um rtulo para a caixa de marcao. Altura do Flash Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do ColdFusion durante o runtime. Largura do Flash Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo

servidor do ColdFusion durante o runtime.


Mensagem Especifica a mensagem a ser exibida se a propriedade Obrigatrio for definida como Sim e o usurio deixar de fazer uma seleo antes de enviar o formulrio. Obrigatrio Permite que voc especifique se um item de menu deve permanecer selecionado para que o formulrio

seja enviado ao servidor.


Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.

Mais tpicos da Ajuda


Modificar controles de formulrio do ColdFusion na pgina 686 Validar dados de formulrio do ColdFusion na pgina 686

Inserir campos de imagem do ColdFusion


Voc pode inserir visualmente um campo de imagem do ColdFusion no formulrio e definir suas opes. Use os campos de imagem para criar botes personalizados. Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Na visualizao Design, coloque o ponto de insero dentro do contorno do formulrio. 2 Na categoria CFForm do painel Inserir, clique no cone Campo de imagem do CF. Navegue para selecionar a

imagem a ser inserida e clique em OK. Se desejar, voc pode digitar o caminho do arquivo de imagem na caixa Origem. Nota: Caso a imagem esteja fora da pasta raiz do site, voc deve copiar a imagem para a pasta raiz. As imagens que esto fora da pasta raiz talvez no estejam acessveis quando voc publicar o site.
3 Selecione o campo da imagem na pgina e defina uma das seguintes opes no Inspetor de propriedades:
Cfimagefield Permite que voc especifique um nome exclusivo para o controle. Origem Permite que voc especifique o URL da imagem inserida. Alt Permite que voc especifique uma mensagem quando a imagem no puder ser exibida. Alinhar Permite que voc especifique o alinhamento da figura. Borda Permite que voc defina a largura da borda da imagem. Editar imagem Abra a imagem no editor de imagens padro.

Para definir um editor de imagens padro, selecione Editar > Preferncias > Tipos de arquivos / editores. Do contrrio, o boto Editar imagem no realiza nenhuma ao.
Validar Especifica o tipo de validao do campo de imagem. Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 684


Criao de formulrios

Rtulo Permite que voc especifique um rtulo para o boto de opo. Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e direita. Para obter mais informaes, consulte a documentao do ColdFusion. Altura Permite que voc especifique a altura do controle, em pixels. Largura Permite que voc especifique a largura do controle, em pixels. Tamanho Permite que voc especifique o tamanho do controle. Essa propriedade ignorada pelo servidor do ColdFusion durante o runtime. Obrigatrio Permite que voc especifique se o controle deve ou no conter dados para que o formulrio seja enviado

ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.

Mais tpicos da Ajuda


Modificar controles de formulrio do ColdFusion na pgina 686 Validar dados de formulrio do ColdFusion na pgina 686

Inserir campos de arquivo do ColdFusion


Voc pode inserir visualmente um campo de arquivo do ColdFusion no formulrio e definir suas propriedades. Use um campo de arquivo para permitir que os usurios selecionem um arquivo do computador como, por exemplo, um documento de processamento de textos ou um arquivo grfico e carreguem-no servidor. Um campo de arquivo do ColdFusion semelhante aos demais arquivos de texto, exceto por tambm conter um boto Procurar. Os usurios podem digitar manualmente o caminho do arquivo que desejam carregar ou usar o boto Procurar para localizar e selecionar o arquivo. Os campos de arquivo exigem que voc use o mtodo POSTAR para transmitir os arquivos do navegador para o servidor. O arquivo postado no endereo que voc especificou na caixa Ao do formulrio. Entre em contato com o administrador do sistema para confirmar se h permisso para carregamentos de arquivo annimos antes de usar um campo de arquivo no formulrio. Os campos de arquivo tambm exigem que a codificao do formulrio seja definida como multipart/form. O Dreamweaver define isso automaticamente quando voc insere um controle do campo de arquivo. Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Na visualizao Design, selecione CFForm para exibir o Inspetor de propriedades.

Para selecionar rapidamente o formulrio, clique em qualquer lugar do contorno na tag<cfform> do seletor na parte inferior da janela Documento.
2 No Inspetor de propriedades, defina o mtodo do formulrio como POSTAR. 3 No menu pop-up Tipo de codif., selecione multipart/form-data. 4 Posicione o ponto de insero dentro do contorno do formulrio onde voc deseja que o campo de arquivo seja

exibido.
5 Selecione Inserir > Objetos do ColdFusion > CFForm > CFfilefield.

Um campo de arquivo exibido no documento.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 685


Criao de formulrios

6 Selecione o campo de arquivo na pgina e defina uma das seguintes propriedades no Inspetor de propriedades:
Cffilefield Permite que voc especifique um nome exclusivo para o controle. Comprimento mximo Permite que voc especifique o nmero mximo de caracteres que o caminho do arquivo pode ter. Validar Especifica o tipo de validao do campo. Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer. Rtulo Permite que voc especifique um rtulo para o campo. Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e direita. Para obter mais informaes, consulte a documentao do ColdFusion. Altura Permite que voc especifique a altura do controle, em pixels. Essa propriedade ignorada pelo servidor do

ColdFusion durante o runtime.


Largura Permite que voc especifique a largura do controle, em pixels. Essa propriedade ignorada pelo servidor do

ColdFusion durante o runtime.


Tamanho Permite que voc especifique o tamanho do controle. Obrigatrio Permite que voc especifique se o campo de arquivo deve ou no conter dados para que o formulrio seja

enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.

Mais tpicos da Ajuda


Modificar controles de formulrio do ColdFusion na pgina 686 Validar dados de formulrio do ColdFusion na pgina 686

Inserir campos de data do ColdFusion


Embora voc no possa inserir visualmente um campo de data do ColdFusion no Dreamweaver, possvel definir visualmente suas propriedades. Um campo de data do ColdFusion um tipo de campo de texto especial que permite aos usurios selecionar uma data em um calendrio pop-up e inseri-la no campo de texto. Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Na visualizao Design, selecione CFForm para exibir o Inspetor de propriedades.

Para selecionar rapidamente o formulrio, clique em qualquer lugar do contorno na tag<cfform> do seletor na parte inferior da janela Documento.
2 No Inspetor de propriedades, defina a propriedade Formato do formulrio como Flash.

O controle do campo de data s pode ser processado em formulrios do ColdFusion baseados em Flash.
3 Alterne para a visualizao Cdigo (Exibir > Cdigo) e insira a seguinte tag em qualquer lugar entre as tags CFForm

de abertura e de finalizao:
<cfinput name="datefield" type="datefield">

4 Alterne para a visualizao Design, selecione o campo de data na pgina e, em seguida, defina uma das seguintes

opes no Inspetor de propriedades:


Cfdatefield Permite que voc especifique um nome exclusivo para o controle.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 686


Criao de formulrios

Valor Permite que voc especifique uma data a ser exibida no campo quando a pgina for aberta pela primeira vez em

um navegador. A data pode ser esttica ou dinmica. Para especificar um valor dinmico, clique no cone de raio ao lado da caixa Valor e selecione a coluna de um conjunto de registros na caixa de dilogo Dados dinmicos. A coluna do conjunto de registros fornece um valor para o campo de data quando voc exibe o formulrio em um navegador.
Validar Especifica o tipo de validao do campo. Validar em Especifica quando o campo validado: onSubmit, onBlur ou onServer. Rtulo Permite que voc especifique um rtulo para o campo. Padro Permite que voc especifique um padro de expresso regular JavaScript para validar a entrada. Omita barras esquerda e direita. Para obter mais informaes, consulte a documentao do ColdFusion. Altura Permite que voc especifique a altura do controle, em pixels. Largura Permite que voc especifique a largura do controle, em pixels. Tamanho Permite que voc especifique o tamanho do controle. Obrigatrio Permite que voc especifique se o campo de data deve ou no conter um valor para que o formulrio seja

enviado ao servidor.
Exibir editor de tags Permite que voc edite as propriedades no listadas no Inspetor de propriedades.

Mais tpicos da Ajuda


Validar dados de formulrio do ColdFusion na pgina 686

Modificar controles de formulrio do ColdFusion


Voc pode alterar visualmente as propriedades dos controles de formulrio do ColdFusion independentemente de estar trabalhando na visualizao Design ou Cdigo. Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Na visualizao Design, selecione o controle de formulrio na pgina; na visualizao Cdigo, clique em qualquer

lugar dentro da tag do controle. O Inspetor de propriedades exibe as propriedades do controle de formulrio.
2 Altere as propriedades do controle no Inspetor de propriedades.

Para obter mais informaes, clique no cone Ajuda do Inspetor de propriedades.


3 Para definir mais propriedades, clique no boto Exibir editor de tags do Inspetor de propriedades e defina as

propriedades no Editor de tags exibido.

Validar dados de formulrio do ColdFusion


Voc pode criar formulrios do ColdFusion no Dreamweaver que verifiquem o contedo de campos especificados para garantir que o usurio inseriu o tipo de dados correto. Nota: Esse aprimoramento s est disponvel caso voc tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior.
1 Crie um formulrio do ColdFusion que inclua pelo menos um campo de entrada e um boto Enviar. Verifique se

todos os campos do ColdFusion que voc deseja validar tm um nome exclusivo.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 687


Criao de formulrios

2 Selecione um campo no formulrio que voc deseja validar. 3 No Inspetor de propriedades, especifique como voc deseja validar o campo.

A parte inferior de cada Inspetor de propriedades de entrada contm controles que lhe ajudam a definir a regra de validao especfica. Por exemplo, talvez voc queira especificar se um campo de texto deve conter um nmero de telefone. Para isso, selecione Telefone no menu pop-up Valor do Inspetor de propriedades. Voc tambm pode especificar quando validar no menu pop-up Validar em.

ltima atualizao em 28/4/2010

688

Captulo 22: Acessibilidade


Dreamweaver e acessibilidade
Mais tpicos da Ajuda
Inserir uma imagem na pgina 234 Insero de arquivos SWF na pgina 246 Validar dados de formulrio em HTML na pgina 671 Criar quadros e conjuntos de quadros na pgina 195 Inserir uma tabela e adicionar contedo na pgina 176

Sobre contedo acessvel


Acessibilidade se refere criao de sites e produtos da Web utilizveis por pessoas com deficincias visual, auditiva, motora entre outras. Entre os exemplos de recursos de acessibilidade para softwares e sites esto o suporte ao leitor de tela, equivalentes em texto para grficos, atalhos de teclado, mudana das cores de exibio para alto contraste etc. O Dreamweaver fornece ferramentas que o tornam acessvel e ferramentas que ajudam a criar contedo acessvel. Para os desenvolvedores do Dreamweaver que precisam usam recursos de acessibilidade, o aplicativo oferece suporte ao leitor de tela, navegao por teclado e acessibilidade do sistema operacional. Para designers que precisam criar contedo acessvel, o Dreamweaver ajuda voc na criao de pginas acessveis que apresentam contedo til para leitores de tela e que so compatveis com as diretrizes do governo federal. Por exemplo, as caixas de dilogo solicitam a voc aplicar atributos de acessibilidade como, por exemplo, equivalentes em texto de uma imagem ao inserir elementos de pgina. Dessa forma, quando a imagem exibida em uma pgina para um usurios com deficincia visual, o leitor de tela l a descrio. Nota: Para obter mais informaes sobre duas iniciativas de acessibilidade significativas, consulte a Web Accessibility Initiative do World Wide Web Consortium (www.w3.org/wai) e a seo 508 do U.S. Federal Rehabilitation Act (www.section508.gov). Nenhuma ferramenta de criao pode automatizar o processo de desenvolvimento. A criao de sites acessveis exige que voc compreenda os requisitos de acessibilidade e tome decises contnuas sobre como os usurios com deficincia interagem com as pginas da Web. A melhor forma de verificar se um site acessvel se d pelo planejamento deliberado, pelo desenvolvimento, pelo teste e pela avaliao.

Uso de leitores de tela com o Dreamweaver


Um leitor de tela dita o texto exibido na tela do computador. Ele tambm l informaes no textuais como, por exemplo, rtulos de boto ou descries de imagem do aplicativo, fornecidas em tags de acessibilidade ou atributos durante a criao. Como designer do Dreamweaver, voc pode usar um leitor de tela para ajudar na criao das pginas da Web. O leitor de tela comea a leitura no canto superior esquerdo da janela Documento. O Dreamweaver d suporte aos leitores de tela JAWS for Windows, da Freedom Scientific (www.freedomscientific.com) e Window-Eyes, da GW Micro (www.gwmicro.com).

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 689


Acessibilidade

Suporte a recursos de acessibilidade do sistema operacional


O Dreamweaver d suporte a recursos de acessibilidade dos sistemas operacionais Windows e Macintosh. Por exemplo, no Macintosh, voc define as preferncias visuais na caixa de dilogo Universal Access Preferences (Apple > System Preferences). As configuraes so refletidas no espao de trabalho do Dreamweaver. Tambm h suporte configurao de alto contraste do sistema operacional Windows. Voc ativa essa opo por meio do Painel de Controle do Windows e isso afeta o Dreamweaver da seguinte forma:

Caixas de dilogo e painis usam as configuraes da cor do sistema. Por exemplo, caso voc defina a cor como
Branco e Preto, todas as caixas de dilogo e painis do Dreamweaver so exibidos com uma cor de primeiro plano branca e a cor do plano de fundo preta.

A Visualizao de cdigo usa a cor de texto do sistema e da janela. Por exemplo, caso voc defina a cor do sistema
como Branco e Preto e, em seguida, altere as cores do texto em Editar > Preferncias > Codificao por cores, o Dreamweaver ignora essas configuraes de cor e exibe o texto do cdigo com a cor de primeiro plano branca e a cor do plano de fundo preta.

A Visualizao de design usa as cores de plano de fundo e de texto que voc definiu em Modificar > Propriedades
da pgina para que as pginas que voc projetou processem cores de acordo com o navegador.

Otimizar o espao de trabalho tendo em vista um design de pgina acessvel


Ao criar pginas acessveis, voc precisa associar informaes como, por exemplo, rtulos e descries a objetos de pgina para que o contedo seja acessvel a todos os usurios. Para fazer isso, ative a caixa de dilogo Acessibilidade de cada objeto para que o Dreamweaver solicite informaes de acessibilidade quando voc inserir objetos. Voc pode ativar uma caixa de dilogo para qualquer um dos objetos na categoria Acessibilidade em Preferncias.
1 Selecione Editar > Preferncias (Windows) ou Dreamweaver > Preferncias (Macintosh). 2 Selecione Acessibilidade na lista Categoria esquerda, selecione um objeto, defina uma das seguintes opes e

clique em OK.
Mostrar os atributos na insero Selecione os objetos para os quais voc deseja ativar as caixas de dilogo de acessibilidade. Por exemplo, objetos de formulrio, quadros, mdia e imagens. Manter foco no painel Mantm foco no painel, o que o torna acessvel ao leitor de tela. (Caso voc no selecione essa opo, o foco permanece na Visualizao de design ou de cdigo quando um usurio abre um painel.) Processamento fora da tela Selecione essa opo ao usar um leitor de tela.

Nota: Os atributos de acessibilidade so exibidos na caixa de dilogo Inserir tabela quando voc insere uma nova tabela.

Recurso do relatrio de validao da acessibilidade do Dreamweaver


O recurso de relatrio de validao da acessibilidade do DreamWeaver foi desaprovado no DreamWeaver CS5.

Navegar no Dreamweaver usando o teclado


Voc pode usar o teclado para navegar em painis, inspetores, caixas de dilogo, quadros e tabelas sem usar um mouse. Nota: S h suporte navegao em abas e ao uso de teclas de seta no Windows.

Navegar em painis
1 Na janela Documento, pressione Control+F6 para mudar o foco para um painel.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 690


Acessibilidade

Uma linha pontilhada em torno do ttulo do painel indica que o foco est no painel. O leitor de tela l a barra de ttulo do painel que est em foco.
2 Pressione Control+F6 novamente para alternar o foco at que ele esteja no painel que voc deseja trabalhar.

(Pressione Control+Shift+F6 para alternar o foco para o painel anterior.)


3 Caso o painel no qual voc deseja trabalhar no esteja aberto, use os atalhos de teclado no menu do Windows para

exibir o painel apropriado e, em seguida, pressione Control+F6. Caso o painel no qual voc deseja trabalhar esteja aberto, mas no expandido, coloque o foco na barra de ttulo do painel e, em seguida, pressione a Barra de espao. Pressione a Barra de espao novamente para recolher o painel.
4 Pressione a tecla Tab para percorrer as opes do painel. 5 Use as teclas de seta quando apropriado:

Caso uma opo tenha escolhas, use as teclas de seta para percorr-las e, em seguida, pressione a Barra de espao
para fazer uma seleo.

Caso haja abas no grupo de painis para abrir outros painis, coloque o foco na aba de abertura e, em seguida, use
as teclas de seta para esquerda ou para direita para abrir as outras abas. Depois de abrir uma nova aba, pressione a tecla Tab para percorrer as opes do painel.

Navegar no Inspetor de propriedades


1 Pressione Control+F3 para exibir o Inspetor de propriedades, caso ele no esteja visvel. 2 Pressione Control+F6 (apenas no Windows) at alternar o foco para o Inspetor de propriedades. 3 Pressione a tecla Tab para percorrer as opes do Inspetor de propriedades. 4 Use as teclas de seta conforme apropriado para percorrer as opes. 5 Pressione Control+Seta para baixo/seta para cima (Windows) ou Command Seta para baixo/seta para cima

(Macintosh) para abrir e fechar a seo expandida do Inspetor de propriedades, conforme necessrio, ou, com o foco na seta de expanso no canto inferior direito, pressione a Barra de espao. Nota: O foco do teclado deve estar dentro do Inspetor de propriedades (e no no ttulo do painel) para expandir e recolher para trabalhar.

Navegar em uma caixa de dilogo


1 Pressione a tecla Tab para percorrer as opes da caixa de dilogo. 2 Use as teclas de seta para percorrer as opes. 3 Caso a caixa de dilogo tenha uma lista Categoria, pressione Control+Tab (Windows) para alterar o foco para a

lista de categorias e, em seguida, use as teclas de seta para subir e descer a lista.
4 Pressione Control+Tab novamente para alternar para as opes de uma categoria. 5 Pressione Enter para sair da caixa de dilogo.

Navegar em quadros
Caso o documento contenha quadros, voc pode usar as teclas de seta a fim de alternar o foco para um quadro.

Selecionar um quadro
1 Pressione Alt+seta para baixo a fim de colocar o ponto de insero na janela Documento. 2 Pressione Alt+seta para cima a fim de selecionar o quadro com o foco atualmente.

ltima atualizao em 28/4/2010

USO DO DREAMWEAVER CS5 691


Acessibilidade

3 Continue pressionando Alt+seta para cima a fim de alternar o foco para o conjunto de molduras e, em seguida, para

os conjuntos de molduras pai, caso haja algum aninhado.


4 Pressione Alt+seta para baixo a fim de alternar o foco para um conjunto de molduras filho ou um nico quadro

dentro do conjunto de molduras.


5 Com o foco em um nico quadro, pressione Alt+seta para esquerda ou para direita a fim de se mover entre os

quadros.

Navegar em uma tabela


1 Use as teclas de seta ou pressione Tab a fim de se mover para outras clulas conforme necessrio.

O pressionamento de Tab na clula direita adiciona outra linha tabela.


2 Para selecionar uma clula, pressione Control+A (apenas no Windows) enquanto o ponto de insero est na

clula.
3 Para selecionar toda a tabela, pressione Control+A duas vezes caso o ponto de insero esteja em uma clula, ou

uma vez caso uma clula esteja selecionada.


4 Para sair da tabela, pressione Control+A trs vezes caso o ponto de insero esteja em uma clula, duas vezes caso

a clula esteja selecionada ou uma caso a tabela esteja selecionada e, em seguida, pressiona a tecla de seta para cima, para esquerda ou para direita.

You might also like