Como usar o Dreamweaver

Uso doADOBE DREAMWEAVER CS5 & CS5.5

ltima atualizao em 2/5/2011

Avisos legais

Avisos legaisPara avisos legais, consulte http://help.adobe.com/pt_BR/legalnotices/index.html.

http://help.adobe.com/pt_BR/legalnotices/index.html

iii


Contedo

Captulo 1: O que h de novoO que h de novo (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

O que h de novo (CS5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

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

Trabalho na janela Documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

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

Personalizao da rea de trabalho do CS5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Atalhos do teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Extenses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

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

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

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

Gerenciamento de arquivos e pastas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

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

Devoluo e retirada de arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Sincronizao de arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Comparao de arquivos em busca de diferenas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

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

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

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

Teste do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

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

Trabalho com ativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

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

Trabalho com itens de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

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

Criao e gerenciamento de CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

Layout das pginas com CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

Trabalho com tags div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

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

Apresentao do contedo em tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Uso de quadros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

ivCOMO USAR O DREAMWEAVERContedo


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

Adio e formatao do texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

Adio e modificao de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Incorporar vdeos em pginas da Web (HTML5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

Insero de arquivos SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

Insero de arquivos FLV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Adio de Widgets da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

Adio de som . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

Adio de outros objetos de mdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Automao de tarefas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

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

Vinculao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277

Menus de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

Barras de navegao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

Mapas de imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

Soluo de problemas de links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

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

Visualizao de pginas em navegadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Visualizao de pginas em dispositivos mveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

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

Configurao do ambiente de codificao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

Configuraes das preferncias de codificao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303

Gravao e edio do cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308

Recolhimento de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

Otimizao e depurao do cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

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

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

Trabalho com as incluses de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Gerenciamento de bibliotecas de tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346

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

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

Aplicao de comportamentos internos do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354

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

Trabalho com o Fireworks e Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

Trabalho com o Photoshop e Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373

Trabalho com o Flash e Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383

Trabalho com o Adobe Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384

vCOMO USAR O DREAMWEAVERContedo


Trabalho com o Device Central . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386

Trabalho com o ConnectNow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387

AIR Extension para Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388

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

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

Criao de um modelo do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

Criao de regies editveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405

Criao de regies repetitivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406

Utilizao de regies opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409

Definio de atributos de tag editveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411

Criao de um modelo aninhado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

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

Exportao e importao de contedo de modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419

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

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

Sintaxe do modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424

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

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

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

Funcionamento do widget Acordeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430

Funcionamento do widget Barra de menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433

Funcionamento do widget Painel flexvel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438

Funcionamento do widget Painis com aba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441

Funcionamento do widget Dica de ferramenta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

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

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

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

Funcionamento do widget Seleo de validao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458

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

Funcionamento do widget Senha de validao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463

Funcionamento do widget Confirmao de validao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467

Exibio de dados com o Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470

Incluso de efeitos do Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484

Captulo 16: Design para vrias telas e dispositivosCriao de consultas de mdia (CS 5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489

Alterar orientao de pgina (CS 5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491

Criar aplicativos da Web para dispositivos mveis (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491

Implantar aplicativos da Web como aplicativos mveis nativos (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494

Visualizar pginas usando o painel Visualizao de vrias telas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497

viCOMO USAR O DREAMWEAVERContedo


Captulo 17: Uso dos servios on-line da AdobeServios on-line da Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499

BrowserLab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499

Business Catalyst InContext Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499

Captulo 18: Exibio de dados XML com XSLTSobre XML e XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506

Execuo de transformaes XSL no servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513

Execuo de transformaes XSL no cliente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530

Entidades de caracteres ausentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532

Captulo 19: Preparao para criao de sites dinmicosIntroduo aos aplicativos da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534

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

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

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

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

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

Remoo de scripts de conexo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563

Captulo 20: Como tornar pginas dinmicasOtimizao da rea de trabalho para desenvolvimento visual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564

Criao de pginas dinmicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567

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

Painis de contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574

Definio de origens de contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576

Adio de contedo dinmico a pginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590

Alterao do contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594

Exibio de registros de banco de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596

Visualizao de live data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605

Adio de comportamentos de servidor personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607

Captulo 21: Criao visual de aplicativosCriao de pginas mestre e detalhadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619

Criao de pginas de pesquisa e de resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 626

Criao de pginas para insero de registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 633

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

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

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

Criao de uma pgina de registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654

Criao de uma pgina de logon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656

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

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

Uso de componentes do ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 662

viiCOMO USAR O DREAMWEAVERContedo


Captulo 22: Criao de formulriosColeta de informaes dos usurios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 669

Criao de formulrios da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 672

Criao dos formulrios do ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687

Captulo 23: AcessibilidadeDreamweaver e acessibilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701

1


Captulo 1: O que h de novo

O que h de novo (CS5.5)Suporte a vrias telas Visualize seus designs em resolues de tela padro ou use consultas de mdia para definir a resoluo. Quando testar em dispositivos que alteram a orientao de pgina conforme o dispositivo segurado, use as opes de paisagem ou retrato durante a visualizao. Para obter mais informaes, consulte Design para vrias telas e dispositivos na pgina 489.

Suporte a consulta de mdia Use as consultas de mdia para personalizar a aparncia do seu site de resolues de tela diferentes. Para obter mais informaes, consulte Criao de consultas de mdia (CS 5.5) na pgina 489.

Crie aplicativos da Web que funcionam em dispositivos mveis Projete rapidamente um aplicativo da Web que funcione na maior parte dos dispositivos mveis usando o widget jQuery Mobile. Para obter mais informaes, consulte Criar aplicativos da Web para dispositivos mveis (CS5.5) na pgina 491.

Empacotar aplicativos da Web para Android, iPhone e iPad Empacote seus aplicativos da Web no Dreamweaver e implante-os no Android e em dispositivos com base em iOS. Para obter mais informaes, consulte Implantar aplicativos da Web como aplicativos mveis nativos (CS5.5) na pgina 494.

Suporte a HTML5, CSS3 e jQuery O Dreamweaver oferece suporte a dicas de cdigo para HTML5, CSS3 e jQuery.

Layouts iniciais tambm esto disponveis para a criao de pginas HTML5 a partir do zero. O Dreamweaver suporta o recurso HTML5 para incorporar vdeos em pginas HTML. Para obter mais informaes, consulte Incorporar vdeos em pginas da Web (HTML5) na pgina 250.

O painel CSS foi aprimorado para oferecer suporte s propriedades CSS3 mais utilizadas. Para obter mais informaes, consulte Dicas de cdigo na pgina 308 e Aprimoramentos no suporte a CSS3 no painel de estilos CSS (CS 5.5) na pgina 134.

Suporte a FTPS Transfira dados usando FTPS. O FTPS (FTP sobre SSL) fornece tanto suporte criptografia quanto autenticao em relao ao SFTP que s oferece suporte criptografia. Para obter mais informaes, consulte Definir opes para conexes FTPS (CS 5.5) na pgina 42.

Suporte a validador de W3C Crie pginas em HTML e XHTML compatveis com os padres usando o validador de W3C no Dreamweaver. Para obter mais informaes, consulte Validar documentos usando o validador de W3C (CS 5.5) na pgina 329.

O que h de novo (CS5)

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

2COMO USAR O DREAMWEAVERO que h de novo


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

Aprimoramentos do CSS

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

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

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

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

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

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

http://www.adobe.com/go/business_catalyst_get_extension_br

3COMO USAR O DREAMWEAVERO que h de novo


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

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

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

Recursos obsoletosOs seguintes recursos se tornaram obsoletos no Dreamweaver CS5:

Relatrio de validao de acessibilidade

Comportamentos de servidor ASP/JavaScript

Verificar navegador, comportamento JavaScript

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

Controlar Shockwave ou SWF, comportamento JavaScript

Criar lbum de fotografias na Web

Ocultar menu pop-up, comportamento JavaScript

O InContext Editing gerencia classes de CSS disponveis

Inserir FlashPaper

Inserir/Remover marca da Web

Integrao do Microsoft Visual Sourcesafe

Barras de navegao

Tocar som, comportamento JavaScript

Menu Mostrar eventos (painel Comportamentos)

Mostrar menu pop-up, comportamento JavaScript

Linha do tempo, comportamentos JavaScript

Validar tags

Visualizao Live Data

4


Captulo 2: rea de trabalho

Fluxo e rea de trabalho do Dreamweaver

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

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

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

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

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

5COMO USAR O DREAMWEAVERrea de trabalho


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

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

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

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

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

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

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

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

http://www.adobe.com/go/lrvid4040_dw_br



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

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

A B C E FD

G H I



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

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

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

Personalizao da rea de trabalho do CS5 na pgina 24

Exibir documentos com abas (Dreamweaver Macintosh) na pgina 30

Tutorial da rea de trabalho do Dreamweaver

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

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

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

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

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

A B DC E F

G H I

http://www.adobe.com/go/lrvid4042_dw_brhttp://www.adobe.com/go/lrvid_4042_br



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 18

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

Gerenciamento de janelas e painis na pgina 24

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

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

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

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

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



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

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

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

Para acessar um documento, clique na aba correspondente.

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

Mais tpicos da Ajuda Trabalho na janela Documento na pgina 18

Sobre a Visualizao dinmica na pgina 291

Abrir Arquivos relacionados na pgina 70

Informaes gerais sobre a codificao no Dreamweaver na pgina 296

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

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

As seguintes opes aparecem na barra de ferramentas Documento:

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

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

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

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

A B C D E G H I J K LF



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

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

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

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

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

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

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

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

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

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

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

Mais tpicos da Ajuda Exibir barras de ferramentas na pgina 22

Visualizao de pginas na Visualizao dinmica na pgina 291

Configuraes das preferncias de codificao na pgina 303

Visualizar e editar o contedo do cabealho na pgina 339

Uso de auxlios visuais para layout na pgina 176

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


Criao e abertura de documentos na pgina 61



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

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

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

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

Processar tipo de mdia impressa 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 de projeo Mostra como a pgina aparece em um dispositivo de projeo.

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

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

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

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

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


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

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

http://www.w3.org/TR/CSS21/media.htmlhttp://www.adobe.com/go/vid0156_br



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 291

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

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

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


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



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

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

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

Ferramenta Selecionar Ativa e desativa a ferramenta Mo.

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

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

Menu pop-up Tamanho da janela (No disponvel na Visualizao de cdigo.) Permite redimensionar a janela Documento para dimenses predefinidas ou personalizadas. Quando voc altera o tamanho da visualizao de uma pgina na visualizao de design ou dinmica, somente as dimenses da visualizao so modificadas. O tamanho do documento permanece inalterado.

Alm de tamanhos predeterminados e personalizados, o Dreamweaver tambm enumera os tamanhos especificados em uma consulta de mdia. Quando voc seleciona um tamanho que corresponde a uma consulta de mdia, o Dreamweaver usa a consulta de mdia para exibir a pgina. Voc tambm pode alterar a orientao de pgina para visualizar a pgina de dispositivos mveis onde o layout da pgina alterado com base em como o dispositivo segurado.

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 21

Mais zoom e Menos zoom na pgina 219

Redimensionar a janela Documento na pgina 20

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

A B C D E F G H



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

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

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

Usar o Inspetor de propriedades na pgina 22

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



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

O painel Inserir est organizado nas seguintes categorias:

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

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

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

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

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

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

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

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

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

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

Mais tpicos da Ajuda Uso do painel Inserir na pgina 209

Criao visual de pginas do Spry na pgina 428



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

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

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

(CS 5.5) O painel Arquivos interage com o servidor em intervalos regulares para atualizar o contedo. Uma mensagem de erro ser exibida se voc executar uma ao no painel Arquivos quando ele estiver executando essas atualizaes automticas. Para desativar as atualizaes automticas, abra o menu de opes do painel Arquivos e desmarque a opo Atualizar automaticamente no menu Exibir.

Para atualizar o contedo do painel manualmente, use o boto Atualizar no painel. O status de check-out atual dos arquivos, porm, s atualizado quando as atualizaes automticas esto ativadas.

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



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

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

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

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

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

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

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

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



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

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

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

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

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

Usurios do GoLiveSe estiver usando o GoLive e desejar voltar a trabalhar com o Dreamweaver, voc pode encontrar uma apresentao on-line da rea de trabalho e do fluxo de trabalho do Dreamweaver, bem como maneiras para migrar seus sites para o Dreamweaver.

Mais tpicos da Ajuda Tutorial do Dreamweaver para usurios do GoLive

Trabalho na janela Documento

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

Passar para a Visualizao de cdigo Siga um destes procedimentos:

Selecione Exibir > Cdigo.

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

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

Selecione Exibir > Dividir cdigo.

http://www.adobe.com/go/vid0151_br



Passar para a Visualizao de design Siga um destes procedimentos:

Selecione Exibir > Design.

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

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

Selecione Exibir > Cdigo e design.

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

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

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

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

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

1 Certifique-se de estar na visualizao Dividir cdigo (Exibir > Dividir cdigo) ou nas visualizaes de cdigo e de design (Exibir > 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 (Exibir > Visualizao de design esquerda).

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

Visualizao de pginas na Visualizao dinmica na pgina 291

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

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

Exibir documentos com abas (Dreamweaver Macintosh) na pgina 30



Janelas de documento em cascata Selecione Janela > Em cascata.

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

(Macintosh) Selecione Janela > Lado a lado.

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

Quando voc altera o tamanho da visualizao de uma pgina na visualizao de design ou dinmica, somente as dimenses da visualizao so modificadas. O tamanho do documento permanece inalterado.

Alm de tamanhos predeterminados e personalizados, o Dreamweaver tambm enumera os tamanhos especificados em uma consulta de mdia. Quando voc seleciona um tamanho que corresponde a uma consulta de mdia, o Dreamweaver usa a consulta de mdia para exibir a pgina. Voc tambm pode alterar a orientao de pgina para visualizar a pgina de dispositivos mveis onde o layout da pgina alterado com base em como o dispositivo segurado.

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.

Dreamweaver CS5.5 e posterior oferece uma longa lista de opes, incluindo opes de dispositivos mveis comuns (como exemplificado abaixo).

O tamanho da janela mostrado reflete as dimenses internas da janela do navegador, sem as bordas; o tamanho do monitor ou o dispositivo mvel listado entre parnteses.

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.

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.

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

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



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

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

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

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

3 Insira valores para Largura e Altura.

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

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

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

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

2 Selecione a Barra de status (CS5) ou Tamanhos de janela (CS5.5 e posterior) da 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 20

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

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

Referncia Permite que voc procure informaes de referncia teis.

Validao Permite verificar erros de cdigo ou de sintaxe.

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

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

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



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

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

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

Uso do material de referncia a linguagem na pgina 324

Teste do site na pgina 108

Validar documentos XML na pgina 329

Verificar compatibilidade de navegador na pgina 328

Encontrar links rompidos, externos e rfos na pgina 288

Colocar arquivos em um servidor remoto na pgina 86

Obter arquivos de um servidor remoto na pgina 84

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

Uso de barras de ferramentas, inspetores e menus de contexto

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

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

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

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

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

Viso geral da barra de ferramentas Padro na pgina 10

Viso geral da barra de ferramentas de codificao na pgina 12

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

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



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

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

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

Definir propriedades de texto no Inspetor de propriedades na pgina 231

Encaixe e desencaixe de painis na pgina 25

Alterar atributos com o Inspetor de tags na pgina 334

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

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

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

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

2 Altere qualquer propriedade no Inspetor de propriedades.

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

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

Clique fora dos campos de texto de edio de propriedade.

Pressione Enter (Windows) ou Return (Macintosh).

Pressione Tab para passar para outra propriedade.

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

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



2 Selecione um comando no menu de contexto.

Personalizao da rea de trabalho do CS5

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

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

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

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

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



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

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

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

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

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

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

Nota: alguns produtos no tm suporte para essa funcionalidade.

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

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

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

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

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

http://kb2.adobe.com/cps/405/kb405298.html



Painel de navegao no encaixe

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

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

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

Para mover um painel, arraste-o pela guia.

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

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

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

Adio e remoo de painisSe todos os painis f

Documents

Como usar o Dreamweaver