Usando o Dream Weaver MX

Usando o
Dreamweaver MX
macromedia
®
Marcas comerciais
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,
Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop
Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the
Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand
Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream,
Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind,
Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit,
ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal
Media, Virtuoso, Web Design 101, Whirlwind e Xtra são marcas comerciais da Macromedia, Inc. e podem estar registradas nos Estados
Unidos ou em outras jurisdições, inclusive internacionais. Outros nomes de produtos, logotipos, desenhos, títulos, palavras ou frases
mencionadas nesta publicação podem ser marcas comerciais ou de serviço, bem como nomes comerciais da Macromedia, Inc. ou de outras
entidades, podendo estar registradas em determinadas jurisdições, inclusive internacionais.
Este guia contém links para sites da Web de outros fabricantes, for a do controle da Macromedia, que não se responsabiliza pelo conteúdo de
nenhum dos sites vinculados. Será de inteira responsabilidade do usuário o acesso a um site da Web de outro fabricante, por meio de um link
mencionado neste guia. A Macromedia fornece esses links apenas para a sua conveniência e a inclusão destes não implica em endosso ou
responsabilidade pelo conteúdo dos sites de outros fabricantes.
Isenção de responsabilidade da Apple

A APPLE COMPUTER, INC. NÃO OFERECE GARANTIAS, EXPRESSAS OU IMPLÍCITAS, PARA O PACOTE DE SOFTWARE
CONTIDO NESTA EMBALAGEM, SUA COMERCIABILIDADE OU ADEQUAÇÃO A QUALQUER OBJETIVO ESPECÍFICO. A
EXCLUSÃO DE GARANTIAS IMPLÍCITAS NÃO É PERMITIDA EM ALGUNS ESTADOS. A EXCLUSÃO MENCIONADA
ACIMA PODE NÃO SE APLICAR AO SEU CASO. ESTA GARANTIA LHE OUTORGA DIREITOS LEGAIS ESPECÍFICOS. O
USUÁRIO PODE DISPOR DE OUTROS DIREITOS QUE VARIAM PARA CADA ESTADO.
Copyright © 2002 Macromedia, Inc. Todos os direitos reservados. Este manual não pode ser copiado, fotocopiado, reproduzido,
traduzido ou convertido para qualquer meio eletrônico ou formato legível por máquina, no todo ou em parte, sem aprovação prévia e por
escrito da Macromedia, Inc.
Estas notificações sobre softwares de outros fabricantes e/ou os termos e condições adicionais podem ser encontrados em http://
www.macromedia.com/go/thirdparty/.
Número de peça ZDW60M300PO
Agradecimentos
Gerente de projeto: Sheila McGinn
Redatores: Chris Bedford, Kim Diezel, Jed Hartman, Charles Nadeau, Jennifer Rowe
Edição: Mary Ferguson, Mary Kraemer, Lisa Stanziano
Gerente de produção: Patrice O’Neill
Desenho e produção de multimídia: Aaron Begley, Benjamin Salles, Noah Zilberberg
Desenho e produção do manual impresso e da Auda: Chris Basmajian, Caroline Branch, John Francis
Edição e produção para Web: George Brown, Rebecca Godbois, Jeff Harmon, Jon Varese
Agradecemos especialmente a Luciano Arruda, Jake Cockrell, Kristin Conradi, George Comninos, David Deming, Tonya Estes, Stephanie
Goss, David Halbakken, Nick Halbakken, Wanda Huang, Narciso (nj) Jaramillo, Craig Jennings, Ken Karleskint, Sho Kuwamoto, David
Lenoe, Jay London, Bonnie Loo, Sam Mathews, Larry McLister, Susan Morrow, Masayo Noda, Dan Radigan, Mike Sundermeyer, Heidi
Bauer Williams, Jorge Taylor, Lawrence Teschmacher, Venu Venugopal e às equipes de engenharia e de garantia de qualidade do
Dreamweaver.
Primeira edição: Junho de 2002
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103, EUA
2
ÍNDICE
Parte I
Princípios básicos do Dreamweaver
CAPÍTULO 1
Bem-vindo ao Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Introdução ao Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Fluxo de trabalho para criação de um site da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Onde iniciar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Convenções tipográficas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Novidades do Dreamweaver MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Recursos de tecnologias da Web e HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
CAPÍTULO 2
Exploração da área de trabalho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Utilização da área de trabalho do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Utilização de janelas e painéis no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Utilização do Dreamweaver com outros aplicativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Personalização do Dreamweaver: Princípios básicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
CAPÍTULO 3
Como planejar e configurar o seu site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Sobre o planejamento e projeto de sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Como configurar um site do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Como utilizar o Assistente Definição do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Como configurar uma pasta local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Como configurar uma pasta remota . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Como editar um site do Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Como editar os sites da Web já existentes no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 72
3
CAPÍTULO 4
Como gerenciar o seu site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Sobre o painel Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Sobre o mapa do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Como importar e exportar sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Como remover um site da lista de sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Como utilizar as opções de devolução e retirada de arquivos . . . . . . . . . . . . . . . . . . . . . 94
Como obter e colocar arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Como sincronizar os arquivos nos sites local e remoto . . . . . . . . . . . . . . . . . . . . . . . . . 100
Como encobrir as pastas e os arquivos do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Como utilizar as Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Como utilizar os relatórios para aprimorar o fluxo de trabalho . . . . . . . . . . . . . . . . . . 109
Sobre o painel Sitespring no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Como utilizar o painel Sitespring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
CAPÍTULO 5
Configuração de um documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Como criar documentos do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Como trabalhar com a caixa de diálogo Novo documento . . . . . . . . . . . . . . . . . . . . . . 116
Como abrir documentos existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Definição das propriedades do documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Como trabalhar com as cores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Seleção de elementos na janela do documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Utilização de guias visuais no processo de projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Visualização e edição do conteúdo do HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Como automatizar as tarefas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Parte II
Como preparar a criação de sites dinâmicos
CAPÍTULO 6
Configuração de um aplicativo para a Web . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Uma nota para os usuários do Dreamweaver UltraDev 4 . . . . . . . . . . . . . . . . . . . . . . . 137
O que é necessário para criar aplicativos para a Web . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Configuração de um servidor da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Configuração de um servidor de aplicativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Como criar uma pasta raiz para o aplicativo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Como definir um site do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Como efetuar a conexão com um banco de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Como solucionar erros do servidor de aplicativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
CAPÍTULO 7
Conexões de banco de dados para programadores ColdFusion. . . . . . . 149
Edição ou exclusão de uma conexão de banco de dados . . . . . . . . . . . . . . . . . . . . . . . . 151
Como se conectar utilizando a conectividade do UltraDev 4 . . . . . . . . . . . . . . . . . . . . 151
4 Índice
CAPÍTULO 8
Conexões de banco de dados para programadores ASP.NET . . . . . . . . 155
CAPÍTULO 9
Conexões de banco de dados para programadores ASP . . . . . . . . . . . . . 161
Como compreender as conexões de banco de dados ASP. . . . . . . . . . . . . . . . . . . . . . . 162
Criação de uma conexão DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Criação de uma conexão sem DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Como efetuar a conexão com um banco de dados através de um ISP. . . . . . . . . . . . . . 168
CAPÍTULO 10
Conexões de banco de dados para programadores JSP . . . . . . . . . . . . . 173
Como compreender as conexões JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Como efetuar a conexão através de um driver ODBC . . . . . . . . . . . . . . . . . . . . . . . . . 176
CAPÍTULO 11
Conexões de banco de dados para programadores PHP . . . . . . . . . . . . . 181
Parte III
Como trabalhar com códigos de página
CAPÍTULO 12
Configuração do seu ambiente de codificação . . . . . . . . . . . . . . . . . . . . . . . 185
Exibição do seu código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Definição de preferências de visualização . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Definição de preferências de codificação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Personalização de atalhos de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Abertura de arquivos na visualização do código como padrão . . . . . . . . . . . . . . . . . . . 191
Definição de preferências do Validador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Gerenciamento de bibliotecas de tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Importação de tags personalizadas para o Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . 195
Utilização de um editor de HTML externo com o Dreamweaver . . . . . . . . . . . . . . . . 198
CAPÍTULO 13
Codificação no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Sobre o ambiente de codificação do Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Como gravar e editar o código. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Como procurar e substituir tags e atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Acesso a referências de linguagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Índice 5
CAPÍTULO 14
Otimização e depuração do código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Limpeza do código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Como verificar se as tags e chaves estão ajustadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Validação das tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Como tornar as páginas compatíveis com XHTML. . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Como utilizar o depurador JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Como utilizar o depurador de ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
CAPÍTULO 15
Edição do código na visualização do projeto . . . . . . . . . . . . . . . . . . . . . . . . 229
Edição do código com o inspetor de propriedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Edição do código com um editor de tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Edição de códigos com o Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Edição do código com o seletor de tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Edição de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Como trabalhar com inclusões do servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Parte IV
Como projetar um layout de página
CAPÍTULO 16
Apresentação do conteúdo com tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Como inserir uma tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Como adicionar conteúdo a uma célula da tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Como importar dados tabulares. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Como selecionar elementos da tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Formatação de tabelas e células . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Como redimensionar tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Como alterar a largura da coluna e a altura da linha . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Como adicionar e remover linhas e colunas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Como aninhar tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Como recortar, copiar e colar células . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Como ordenar tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Como exportar dados da tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
CAPÍTULO 17
Definição do layout de páginas na visualização de layout . . . . . . . . . . . . . 257
Sobre as células e tabelas de layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Como entrar e sair da visualização de layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Como desenhar células e tabelas de layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Como adicionar conteúdo a uma célula de layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Como mover e redimensionar células e tabelas de layout . . . . . . . . . . . . . . . . . . . . . . . 264
Como formatar células e tabelas de layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Definição da largura de colunas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Definição das preferências de visualização de layout. . . . . . . . . . . . . . . . . . . . . . . . . . . 271
6 Índice
CAPÍTULO 18
Utilização de molduras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Sobre molduras e conjuntos de molduras. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Como decidir se as molduras devem ser utilizadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Sobre como criar páginas da Web com base em molduras no Dreamweaver. . . . . . . . . 277
Criação de molduras e conjuntos de molduras. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Como selecionar molduras e conjuntos de molduras . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Como salvar arquivos de moldura e de conjunto de molduras . . . . . . . . . . . . . . . . . . . 283
Visualização e definição das propriedades da moldura . . . . . . . . . . . . . . . . . . . . . . . . . 284
Visualização e definição das propriedades de um conjunto de molduras . . . . . . . . . . . 285
Como controlar um conteúdo de moldura com links . . . . . . . . . . . . . . . . . . . . . . . . . 286
Como tratar um navegador que não pode exibir molduras. . . . . . . . . . . . . . . . . . . . . . 287
Utilização de comportamentos JavaScript com molduras . . . . . . . . . . . . . . . . . . . . . . . 287
Parte V
Como adicionar conteúdo
CAPÍTULO 19
Como inserir e formatar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Como inserir e formatar texto HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Formatação do texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Utilização dos estilos HTML para formatar o texto . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Sobre CSSs (Cascading Style Sheets) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
Conversão de estilos CSS em tags de HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Verificação ortográfica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Busca e substituição de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
CAPÍTULO 20
Como inserir imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Sobre uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Como inserir uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Redimensionamento de uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Criação de uma imagem cambiável . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Utilização de um editor de imagens externo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Aplicação de um comportamento a imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
CAPÍTULO 21
Integração do Dreamweaver com outros aplicativos . . . . . . . . . . . . . . . . . 329
Sobre a integração do Fireworks e do Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Como trabalhar com o Dreamweaver e o Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Criação de um álbum de fotografias na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Como trabalhar com Dreamweaver e Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Índice 7
CAPÍTULO 22
Como inserir mídia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Como inserir e executar um objeto de mídia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Como iniciar um editor externo para arquivos de mídia . . . . . . . . . . . . . . . . . . . . . . . 346
Utilização das Design Notes com um objeto de mídia . . . . . . . . . . . . . . . . . . . . . . . . . 347
Sobre o conteúdo Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Como inserir um objeto de botão Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Como inserir um objeto de texto Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Como inserir filmes Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Como inserir filmes Shockwave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Como adicionar vídeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Como adicionar um som a uma página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Vinculação a um arquivo de áudio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Incorporação de um arquivo de som . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Como inserir o conteúdo do plug-in do Netscape Navigator . . . . . . . . . . . . . . . . . . . . 356
Como inserir um controle ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Como inserir um applet Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Utilização dos comportamentos para controlar os elementos de mídia . . . . . . . . . . . . . 358
CAPÍTULO 23
Dreamweaver e Acessibilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Utilização dos recursos de acessibilidade do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 360
Autoria da acessibilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Teste de acessibilidade do site da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
Parte VI
Como trabalhar com comportamentos e animações
CAPÍTULO 24
Como utilizar comportamentos JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Como utilizar o painel Comportamentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Sobre os eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Aplicação de um comportamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
Sobre comportamentos e texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Como anexar um comportamento a uma linha de tempo . . . . . . . . . . . . . . . . . . . . . . 379
Como alterar um comportamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Como atualizar um comportamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Como criar novas ações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Download e instalação de comportamentos de outros fabricantes . . . . . . . . . . . . . . . . 381
Como utilizar as ações de comportamentos enviadas com o Dreamweaver. . . . . . . . . . 381
8 Índice
CAPÍTULO 25
Animação de camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Sobre o código HTML das camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Criação de camadas na página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Aninhamento de camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Manipulação de camadas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Como adicionar conteúdo às camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
Como exibir e definir as propriedades da camada . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Utilização de tabelas e camadas para o layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
Animação de camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Animação de camadas utilizando as ações de comportamentos . . . . . . . . . . . . . . . . . . 428
Parte VII
Como trabalhar com várias páginas
CAPÍTULO 26
Links e navegação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
Sobre as localizações e os caminhos dos documentos . . . . . . . . . . . . . . . . . . . . . . . . . . 432
Criação de links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Gerenciamento de links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442
Criação de menus de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446
Criação das barras de navegação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448
Criação dos mapas de imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Anexação de comportamentos aos links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
CAPÍTULO 27
Como gerenciar as propriedades do site, bibliotecas e modelos . . . . . . . 453
Como utilizar o painel Propriedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454
Como gerenciar o painel Propriedades. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Como trabalhar com itens de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
Como criar, gerenciar e editar itens de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
Sobre os modelos do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Como criar um modelo no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Como criar regiões editáveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
Como criar regiões repetitivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
Como definir atributos de tags editáveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483
Sobre as regiões opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Como criar um documento de um modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487
Como editar conteúdo uma página baseada em modelo . . . . . . . . . . . . . . . . . . . . . . . 488
Sobre os modelos aninhados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
Como criar um modelo aninhado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493
Como aplicar um modelo a um documento existente . . . . . . . . . . . . . . . . . . . . . . . . . 494
Como editar e atualizar os modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Sobre o XML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
Índice 9
CAPÍTULO 28
Como testar um site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499
Como verificar a compatibilidade com o navegador. . . . . . . . . . . . . . . . . . . . . . . . . . . 501
Como utilizar os comportamentos para detectar os navegadores e plug-ins . . . . . . . . . 502
Como visualizar as páginas nos navegadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502
Como verificar os links em uma página ou site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504
Como ajustar os links rompidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
Como abrir documentos vinculados no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 506
Como definir o tempo e o tamanho do download . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507
Como utilizar os relatórios para testar um site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Parte VIII
Como tornar as páginas dinâmicas
CAPÍTULO 29
Otimização da área de trabalho para desenvolvimento visual . . . . . . . . . 513
Exibição de um painel útil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513
Exibir a estrutura do banco de dados no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . 515
Exibição de Live Data na visualização do projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516
Como trabalhar na visualização do projeto sem o Live Data . . . . . . . . . . . . . . . . . . . . 520
Visualização de páginas dinâmicas em um navegador. . . . . . . . . . . . . . . . . . . . . . . . . . 520
Restrição de uma informação do banco de dados no Dreamweaver . . . . . . . . . . . . . . . 521
CAPÍTULO 30
Fluxo de trabalho do Dreamweaver para projetos de páginas
dinâmicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523
Como projetar a página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524
Como criar uma fonte de conteúdo dinâmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524
Como adicionar conteúdo dinâmico a uma página da web . . . . . . . . . . . . . . . . . . . . . 526
Como aprimorar a funcionalidade de uma página dinâmica . . . . . . . . . . . . . . . . . . . . 526
Como testar e depurar a página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
CAPÍTULO 31
Como armazenar e recuperar dados para a página . . . . . . . . . . . . . . . . . . . 531
Uso de um banco de dados para armazenar conteúdo . . . . . . . . . . . . . . . . . . . . . . . . . 531
Coleta de dados enviados por usuários. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532
Acesso a dados armazenados em variáveis de sessão . . . . . . . . . . . . . . . . . . . . . . . . . . . 536
10 Índice
CAPÍTULO 32
Definição das fontes de conteúdo dinâmico . . . . . . . . . . . . . . . . . . . . . . . . . 543
Como compreender as fontes de conteúdo dinâmico. . . . . . . . . . . . . . . . . . . . . . . . . . 544
Definição de um conjunto de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544
Definição dos parâmetros da URL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549
Definição dos parâmetros de formulário . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Definição das variáveis de sessão . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552
Definição das variáveis de aplicativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553
Definição das variáveis de servidor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553
Armazenamento em cache das fontes de conteúdo. . . . . . . . . . . . . . . . . . . . . . . . . . . . 558
Como alterar ou excluir as fontes de conteúdo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559
Como copiar um conjunto de registros para outra página . . . . . . . . . . . . . . . . . . . . . . 559
CAPÍTULO 33
Como adicionar conteúdo dinâmico às páginas da Web . . . . . . . . . . . . . . 561
Como adicionar conteúdo dinâmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
Como tornar o texto dinâmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
Como tornar dinâmicas as imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564
Como tornar dinâmicos os atributos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Como tornar dinâmicos os objetos ActiveX, Flash e outros parâmetros de objetos . . . 567
Como alterar o conteúdo dinâmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568
Como excluir o conteúdo dinâmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568
CAPÍTULO 34
Como exibir os registros de bancos de dados . . . . . . . . . . . . . . . . . . . . . . . 569
Como aplicar elementos tipográficos e layout de página a dados dinâmicos . . . . . . . . . 570
Como aplicar formatos aos dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570
Como personalizar os formatos de dados existentes . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Como criar links de navegação para conjuntos de registros . . . . . . . . . . . . . . . . . . . . . 572
Mostrar ou ocultar as regiões com base nos resultados do conjunto de registros . . . . . . 575
Como exibir diversos registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576
Como criar uma tabela com um comportamento de servidor Região repetitiva . . . . . . 577
Como criar um contador de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579
Como criar um controle da Web DataGrid ou DataList do ASP.NET . . . . . . . . . . . . 582
CAPÍTULO 35
Como utilizar os componentes ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . 587
Como compreender os componentes ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587
Como criar visualmente um componente no Dreamweaver . . . . . . . . . . . . . . . . . . . . . 588
Como exibir os componentes ColdFusion no Dreamweaver . . . . . . . . . . . . . . . . . . . . 589
Como editar os componentes ColdFusion no Dreamweaver . . . . . . . . . . . . . . . . . . . . 590
Como criar páginas da Web que utilizam componentes ColdFusion . . . . . . . . . . . . . . 591
CAPÍTULO 36
Como utilizar os serviços da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593
Como compreender os serviços da Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
Como instalar e configurar os geradores proxy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596
Como adicionar um proxy de serviço da Web utilizando a descrição WSDL . . . . . . . . 599
Como adicionar um serviço da Web a uma página . . . . . . . . . . . . . . . . . . . . . . . . . . . 600
Como editar a lista de sites de serviços da Web UDDI . . . . . . . . . . . . . . . . . . . . . . . . 602
Índice 11
CAPÍTULO 37
Como adicionar comportamentos de servidor personalizados . . . . . . . . 603
Instalação de outro comportamento de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603
Como criar comportamentos de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604
Gravação de um bloco de código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608
Como tornar um bloco de código condicional. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610
Como editar e modificar o código de comportamento do servidor . . . . . . . . . . . . . . . 618
CAPÍTULO 38
Criação de formulários interativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 621
Os objetos de formulário . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622
Como criar um formulário . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623
Como compreender os objetos de formulário . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 625
Como inserir caixas de seleção e botões de rádio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632
Incluir listas e menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634
Inclusão de botões de formulário . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637
A criação de formulários . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639
Utilização da função JavaScript do cliente para processar um formulário . . . . . . . . . . . 639
Como utilizar os comportamentos com formulários . . . . . . . . . . . . . . . . . . . . . . . . . . 640
Criação de objetos de formulário dinâmicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641
Parte IX
Como desenvolver aplicativos em pouco tempo
CAPÍTULO 39
Como criar páginas-mestras/detalhes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
Páginas-mestras/detalhes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
Como construir páginas-mestras/detalhes rapidamente . . . . . . . . . . . . . . . . . . . . . . . . 649
Como criar páginas-mestras/detalhes bloco a bloco . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Como modificar páginas-mestras/detalhes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653
CAPÍTULO 40
Como criar páginas que realizam buscas em bancos de dados . . . . . . . . 655
As páginas de busca/resultados. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655
Como criar a página de busca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656
Como criar a página de resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 657
Como criar uma página de detalhes para uma página de resultados . . . . . . . . . . . . . . . 662
Como trabalhar com as páginas relacionadas (apenas usuários de ASP e JSP). . . . . . . . 666
CAPÍTULO 41
Como criar páginas para modificar bancos de dados . . . . . . . . . . . . . . . . . 669
Como criar uma página para inserir registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 670
Como criar uma página para atualizar os registros . . . . . . . . . . . . . . . . . . . . . . . . . . . 673
Como criar uma página para excluir um registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 678
Como utilizar os procedimentos armazenados para modificar bancos de dados . . . . . . 681
Como utilizar comandos ASP para modificar um banco de dados . . . . . . . . . . . . . . . . 686
Como utilizar as instruções preparadas JSP para modificar um banco de dados . . . . . . 688
12 Índice
CAPÍTULO 42
Como criar páginas que restringem o acesso ao site . . . . . . . . . . . . . . . . . 691
Como criar uma página de registro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692
Como criar uma página de acesso (login). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 696
Como criar uma página que apenas os usuários autorizados podem acessar . . . . . . . . . 699
Parte X
Apêndices
ANEXO A
Guia do iniciante em bancos de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705
Os bancos de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705
Conceitos básicos do projeto de um banco de dados . . . . . . . . . . . . . . . . . . . . . . . . . . 706
Como compreender as conexões de bancos de dados . . . . . . . . . . . . . . . . . . . . . . . . . 712
ANEXO B
Manual básico de SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719
Princípios básicos de sintaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719
Definição das colunas de um conjunto de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . 721
Limite do número de registros de um conjunto de registros. . . . . . . . . . . . . . . . . . . . . 721
Ordenação dos registros em um conjunto de registros . . . . . . . . . . . . . . . . . . . . . . . . . 724
Como unir as tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725
ANEXO C
Como configurar DSNs no Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727
Como compreender os DSNs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727
Como criar um DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 728
ANEXO D
Referência rápida: Tags do Macromedia ASP.NET . . . . . . . . . . . . . . . . . . 731
ÍNDICE REMISSIVO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741
Índice 13
14 Índice
Parte I
Parte I
Princípios básicos do
Dreamweaver
Aprenda como utilizar a documentação e outros recursos do

Dreamweaver, além de configurar a área de trabalho do
Dreamweaver de acordo com suas preferências de trabalho.
Planeje e configure um site e comece a criar páginas.
Esta seção contém os seguintes capítulos:
• Capítulo 1, “Bem-vindo ao Dreamweaver”
• Capítulo 2, “Exploração da área de trabalho”
• Capítulo 3, “Como planejar e configurar o seu site”
• Capítulo 4, “Como gerenciar o seu site”
• Capítulo 5, “Configuração de um documento”
CAPÍTULO 1
Bem-vindo ao Dreamweaver
O Dreamweaver MX da Macromedia é um editor de HTML profissional para desenhar, codificar

e desenvolver sites, páginas e aplicativos para a Web. Para aqueles que preferem o controle da
codificação manual-HTML ou para os que preferem trabalhar em um ambiente de edição visual,
o Dreamweaver fornece ferramentas úteis para aprimorar a sua experiência de criação para Web.
Os recursos de edição visual do Dreamweaver permitem criar páginas, de modo rápido, sem que
seja necessário escrever uma única linha de código. É possível visualizar todos os elementos ou
propriedades do site e arrastá-los de um painel fácil de usar diretamente para um documento.
Dinamize o fluxo de trabalho de desenvolvimento de sites através da criação e edição das imagens
no Fireworks da Macromedia, em seguida importando para o Dreamweaver ou incluindo objetos
criados no Flash da Macromedia diretamente no Dreamweaver.
O Dreamweaver também inclui muitos recursos e ferramentas de codificação, como as
ferramentas de edição de código no modo de na visualização de código (por exemplo: codificação
por cores e preenchimento de tags), material de referência sobre HTML, CSS, JavaScript, CFML,
ASP e JSP e um depurador JavaScript. A tecnologia de codificação HTML Macromedia
Roundtrip permite importar os documentos HTML codificados manualmente sem reformatar o
código e, em seguida, pode-se optar por reformatar o código aplicando um estilo de formatação
preferido.
A última versão do Dreamweaver incorpora e expande todos os recursos do Macromedia
UltraDev para ajudá-lo a criar aplicativos dinâmicos para a Web com base em banco de dados,
utilizando linguagens de servidor, como ASP, ASP.NET, ColdFusion Markup Language (CFML),
JSP e PHP.
O Dreamweaver pode ser inteiramente personalizado. Crie os seus próprios objetos e comandos,
modifique os atalhos de teclado e adicione códigos JavaScript para ampliar ainda mais os recursos
do Dreamweaver com novos comportamentos, inspetores de propriedades e relatórios de site.
Este capítulo contém as seguintes seções:
“Introdução ao Dreamweaver”, na página 18
“Fluxo de trabalho para criação de um site da Web”, na página 20
“Onde iniciar”, na página 25
“Convenções tipográficas”, na página 27
“Novidades do Dreamweaver MX”, na página 28
“Recursos de tecnologias da Web e HTML”, na página 32
17
Introdução ao Dreamweaver
O Dreamweaver contém vários recursos para ajudá-lo a aprender rapidamente os recursos do
programa e tornar-se um experiente criador de páginas e sites da Web. Estes recursos incluem um
manual impresso, Guia de introdução, o sistema de ajuda on-line e tutoriais. Além disso, dicas,
notas técnicas, exemplos e informações atualizadas com regularidade podem ser encontrados no
centro de suporte do Dreamweaver, no site da Macromedia na Web.
Guia de introdução
O Guia de introdução foi elaborado para orientá-lo através dos procedimentos da criação de um
site da Web simples e funcional utilizando o Dreamweaver. O guia destina-se aos usuários que já
criaram páginas da Web, mas não estão familiarizados com alguns aspectos do Dreamweaver.
Inclui capítulos sobre a criação e edição de páginas estáticas simples, edição manual de código e
criação de aplicativos dinâmicos para a Web. Este guia é fornecido como um manual impresso,
que faz parte do sistema de ajuda, e também no formato de arquivo PDF.
Tutoriais
Os tutoriais contêm descrições mais detalhadas sobre determinados tópicos e fornecem mais
informações sobre áreas específicas do que o Guia de introdução. Ao trabalhar com os tutoriais,
você aprenderá a editar um exemplo de site da Web, utilizando alguns dos recursos mais avançados
e utilitários do Dreamweaver. Os tutoriais estão disponíveis no Guia de introdução impresso, na
Ajuda do Dreamweaver (no menu Ajuda Dreamweaver, selecione Tutoriais), e como parte do
arquivo PDF do Guia de introdução.
Se você já estiver familiarizado com os recursos de projeto do Dreamweaver mas quiser saber mais
sobre a criação de aplicativos para a Web, inicie executando os tutoriais de páginas dinâmicas, que
ensinam a criar páginas interativas que se conectam a bancos de dados.
Ajuda do Dreamweaver
A ajuda do Dreamweaver, otimizada para uso on-line, contém informações completas sobre todos
os recursos do Dreamweaver. A ajuda do Dreamweaver é exibida no visualizador da ajuda do
sistema operacional: Ajuda HTML da Microsoft ou Apple Help (Macintosh). Em ambas as
plataformas, as informações necessárias podem ser encontradas de quatro maneiras:
Conteúdo permite exibir todas as informações organizadas por assunto. Clique nas entradas
de-nível superior para exibir os subtópicos.
O índice, como aqueles impressos tradicionalmente, permite procurar termos e conceitos
específicos.
Pesquisar permite localizar uma seqüência de caracteres em qualquer parte do texto do sistema de
ajuda.
18 Capítulo 1
Ajuda contextual possibilita abrir um tópico relevante da ajuda a partir de cada caixa de diálogo,
painel e inspetor. Para exibir a ajuda contextual, clique no botão Ajuda da caixa de diálogo,
escolha Ajuda no menu Opções, na barra de título de um grupo de painéis, ou clique no ícone de
ponto de interrogação em um inspetor ou outro tipo de janela.
Clique aqui para abrir a Ajuda.
Cada tópico da Ajuda contém botões que podem ser clicados para que se possa passar de um
tópico a outro. Os botões seta à direita e à esquerda levam ao próximo tópico ou ao anterior em
uma seção (de acordo com a ordem dos tópicos no conteúdo).
Extensão dos recursos do Dreamweaver

O sistema de ajuda Extensão dos recursos do Dreamweaver contém informações sobre o modelo de
objeto de documento (DOM) e interfaces de programação de aplicativos (APIs) do Dreamweaver,
que permitem aos programadores de JavaScript e C criar extensões para o programa.
Centro de suporte do Dreamweaver

Para que o usuário possa aproveitar ao máximo o Dreamweaver, é necessário consultar um centro
de suporte na Web: O site do Centro de suporte do Dreamweaver na Web (http://
www.macromedia.com/br/support/), é atualizado regularmente com as informações mais recentes
sobre o Dreamweaver, além de conter recomendações de usuários experientes, exemplos, dicas,
atualizações e informações sobre os tópicos avançados. Verifique o site da Web com freqüência
para conhecer as novidades sobre o Dreamweaver e saber como obter o melhor rendimento do
programa.
Central para designer e desenvolvedor

O Centro de design e programação da Macromedia, no endereço http://www.macromedia.com/
br/desdev/, fornece ferramentas, tutoriais e outros recursos para os produtos da Macromedia.
Fóruns on-line do Dreamweaver

Compartilhe questões técnicas e sugestões úteis com outros usuários do Dreamweaver visitando os
fóruns on-line do Dreamweaver. As informações sobre acesso aos fóruns estão no site da
Macromedia na Web, no endereço http://www.macromedia.com/go/dreamweaver_newsgroup.
Atalhos de teclado
Os diagramas que mostram todos os atalhos de teclado na configuração padrão do Dreamweaver
estão disponíveis no site da Macromedia na Web, em http://www.macromedia.com/go/
dreamweaver_mx_shortcuts.
Bem-vindo ao Dreamweaver 19
Fluxo de trabalho para criação de um site da Web
Há diversos métodos possíveis para se criar um site da Web. No fluxo de trabalho apresentado
nesta documentação, o usuário inicia definindo os objetivos e as estratégias do site. Se você estiver
desenvolvendo um aplicativo para a Web, será preciso configurar os servidores e bancos de dados
de acordo com a necessidade. Em seguida, o usuário projetará a aparência do site. Quando o
projeto estiver completo, serão criados o site e as páginas de código, adicionando o conteúdo e a
interatividade. Em seguida, as páginas serão vinculadas e a funcionalidade do site será testada para
verificar se atende aos objetivos definidos. É possível incluir também páginas dinâmicas no site.
No final do ciclo, o site é publicado em um servidor. Muitos programadores efetuam ainda uma
manutenção periódica para assegurar que o site permaneça atualizado e funcional.
Para facilitar a obtenção de informações necessárias ao desenvolvimento de sites da Web, a
documentação Como utilizar o Dreamweaver é dividida em seções amplas, que oferecem exemplos
do desenvolvimento da Web: planejamento, criação, desenvolvimento, teste, publicação e
manutenção do site.
Sobre o planejamento do site

O cuidado no planejamento e na organização do site desde o início pode economizar tempo
posteriormente. A organização do site não consiste apenas em determinar onde os arquivos serão
armazenados, mas também examinar os requisitos e objetivos do site, bem como o perfil do
público-alvo. Além disso, é necessário considerar certos requisitos técnicos, como o acesso dos
usuários e também as restrições do navegador, dos plug-ins e de download.
Quando as informações estiverem organizadas e a estrutura tiver sido determinada, é possível iniciar a
criação do seu site.
• Determine a estratégia a ser adotada e as questões a serem consideradas durante o planejamento
do site. Consulte o Capítulo 3, “Como planejar e configurar o seu site”, na página 61.
• Utilize o mapa do site do Dreamweaver para configurar a estrutura organizacional do site. No
painel Site, é possível adicionar, excluir e renomear arquivos e pastas para alterar a organização
de acordo com as suas necessidades. Consulte o Capítulo 3, “Como planejar e configurar o seu
site”, na página 61 e Capítulo 4, “Como gerenciar o seu site”, na página 75.
• Inicie criando páginas simples que poderão se tornar mais complexas posteriormente. Na caixa
de diálogo Novo documento, crie novas páginas em branco ou baseadas em projetos de página
predefinidos. Consulte o Capítulo 5, “Configuração de um documento”, na página 115.
Se você fizer parte de uma equipe de desenvolvimento da Web, os tópicos a seguir podem ser de
interesse:
• Para configurar um sistema para evitar que os membros da equipe substituam os arquivos, veja
“Como utilizar as opções de devolução e retirada de arquivos”, na página 94.
• Para utilizar as Design Notes para comunicar-se com os membros da equipe da Web, veja
“Como utilizar as Design Notes”, na página 105.
20 Capítulo 1
Sobre a configuração de um aplicativo para a Web
Cada vez mais os sites da Web contêm páginas dinâmicas que permitem aos visitantes exibir as
informações armazenadas em bancos de dados. Além disso, alguns visitantes podem adicionar e
editar novas informações nos bancos de dados. Para criar essas páginas, é necessário executar várias
etapas preparatórias.
• Configurar um servidor da Web e um servidor de aplicativos, em seguida, criar ou modificar
um site do Dreamweaver. Consulte o Capítulo 6, “Configuração de um aplicativo para a
Web”, na página 137.
• Conectar-se a um banco de dados. Dependendo da tecnologia de servidor utilizada pelo
servidor de aplicativos, consulte o Capítulo 7, “Conexões de banco de dados para
programadores ColdFusion”, na página 149, Capítulo 8, “Conexões de banco de dados para
programadores ASP.NET”, na página 155, Capítulo 9, “Conexões de banco de dados para
programadores ASP”, na página 161, Capítulo 10, “Conexões de banco de dados para
programadores JSP”, na página 173 ou Capítulo 11, “Conexões de banco de dados para
programadores PHP”, na página 181.
Sobre a codificação manual
A codificação manual de páginas não se constitui propriamente em uma etapa do fluxo de
trabalho durante a criação de páginas em um site da Web. O Dreamweaver fornece ferramentas de
edição visual fáceis de usar, além de ferramentas de codificação sofisticadas. Você pode utilizar um
dos métodos, ou ambos, para criar e editar suas páginas.
• É possível trabalhar em um ambiente de codificação sem utilizar as ferramentas visuais. Essas
ferramentas o ajudarão a criar e editar o código, formatá-lo, verificar sua compatibilidade com
os padrões e depurar códigos JavaScript. Consulte o Capítulo 12, “Configuração do seu
ambiente de codificação”, na página 185, Capítulo 13, “Codificação no Dreamweaver”, na
página 201 e Capítulo 14, “Otimização e depuração do código”, na página 215.
• É possível também utilizar as ferramentas de codificação no modo de visualização do projeto,
que é o ambiente de criação visual do Dreamweaver. Consulte o Capítulo 15, “Edição do
código na visualização do projeto”, na página 229.
Sobre a criação de páginas da Web

Muitos projetos de design da Web começam pela criação de “roteiros” visuais ou fluxogramas que
se tornam páginas de exemplo. Utilize o Dreamweaver para criar páginas de exemplo ou
“protótipos” à medida que trabalha em um projeto final. Os protótipos-geralmente mostram o
layout do desenho, a navegação do site, os componentes técnicos, os temas, a cor e as imagens
gráficas ou outros elementos de mídia, mas não contêm os elementos finais das páginas.
• As ferramentas de edição de tabelas e a visualização de layout no Dreamweaver permitem
projetar rapidamente as páginas da Web, através do desenho e da reorganização da estrutura da
página. Consulte o Capítulo 16, “Apresentação do conteúdo com tabelas”, na página 241 e
Capítulo 17, “Definição do layout de páginas na visualização de layout”, na página 257.
• Para exibir vários documentos simultaneamente em um navegador da Web, é possível criar
documentos utilizando molduras. Consulte o Capítulo 18, “Utilização de molduras”, na
página 273.
Sobre a inclusão do conteúdo
Com o Dreamweaver, é possível adicionar facilmente diversos tipos de conteúdo às páginas da
Web. Adicione propriedades e elementos de projeto, como texto, imagens, cores, filmes, som e
outras formas de mídia.
• Digite diretamente em um documento do Dreamweaver ou importe o texto de outros
documentos e, em seguida, formate o texto utilizando o inspetor de propriedades do
Dreamweaver ou o painel Estilos HTML. É possível criar facilmente as suas próprias folhas de
estilos em cascata (Cascading Style Sheets). Consulte o Capítulo 19, “Como inserir e formatar
texto”, na página 291.
• O painel Propriedades permite organizar facilmente as propriedades em um site. A maioria das
propriedades pode ser arrastada diretamente do painel Propriedades para um documento do
Dreamweaver. Veja “Como utilizar o painel Propriedades”, na página 454.
• Insira imagens, incluindo imagens cambiáveis, mapas de imagens e imagens compartilhadas do
Fireworks. Utilize as ferramentas de alinhamento, para posicionar as imagens em uma página.
Consulte o Capítulo 20, “Como inserir imagens”, na página 319 e Capítulo 21, “Integração do
Dreamweaver com outros aplicativos”, na página 329.
• Insira outros tipos de mídia numa página da Web, como filmes Flash, Shockwave e
QuickTime, som e miniaplicativos. Consulte o Capítulo 22, “Como inserir mídia”, na
página 345.
• Certifique-se de que seu conteúdo esteja acessível para pessoas com deficiência física. Consulte
o Capítulo 23, “Dreamweaver e Acessibilidade”, na página 359.
Sobre interatividade e animação

Muitas páginas da Web são estáticas e contêm apenas texto e imagens. O Dreamweaver permite ir
além das páginas estáticas, adicionando interatividade e animações para atrair o interesse dos
visitantes. É possível fornecer comentários aos visitantes à medida que navegam pelo site,
demonstrar conceitos, animar elementos da página. Em resumo, você poderá criar uma maior
interatividade com o visitante do site.
Há diversas maneiras de adicionar interatividade e animação às páginas utilizando o
Dreamweaver:
• Utilize os comportamentos para realizar tarefas em resposta a determinados eventos, como o
realce de um botão quando o visitante passar o ponteiro sobre ele, a validação de um
formulário quando o visitante clique no botão Enviar ou a abertura de uma segunda janela do
navegador quando a página principal terminar de ser carregada. Consulte o Capítulo 24,
“Como utilizar comportamentos JavaScript”, na página 375.
• Utilize as linhas de tempo para criar animações que dispensam plug-ins, controles ActiveX ou
Java. As linhas de tempo utilizam HTML dinâmico para alterar a posição de uma camada ou a
origem de uma imagem ao longo do tempo, ou para chamar certas ações de comportamento
automaticamente após a carga da página. Consulte o Capítulo 25, “Animação de camadas”, na
página 407.
22 Capítulo 1
Sobre a conexão das páginas do site
Páginas individuais não compõem um site. É necessário vinculá-las através da criação de links
HTML e reutilizando conteúdo para que as páginas tenham uma aparência uniforme.
• Com o Dreamweaver, é possível criar links HTML padrão, incluindo links âncora e de correio
eletrônico ou configurar facilmente sistemas de navegação gráfica, como menus de salto e
barras de navegação. Consulte o Capítulo 26, “Links e navegação”, na página 431.
• Os modelos e arquivos de biblioteca do Dreamweaver permitem aplicar conteúdo reutilizável e
desenhos de páginas no site com facilidade. Novas páginas podem ser criadas com base em um
modelo do Dreamweaver e, em seguida, seu layout poderá ser atualizado automaticamente
quando o modelo for alterado. Consulte o Capítulo 27, “Como gerenciar as propriedades do
site, bibliotecas e modelos”, na página 453.
Sobre os testes e a publicação do seu site

O seu site está completo e pronto para ser publicado, mas antes de publicá-lo em um servidor é
necessário testá-lo. Dependendo do tamanho do projeto, das especificações do cliente e dos tipos
de navegadores que os visitantes utilizarão, talvez seja necessário mover o site para um servidor de
teste onde possa ser testado e editado. Depois que as correções forem feitas, o site poderá ser
publicado onde o público possa acessá-lo. Após a publicação do site, estabeleça um ciclo de
manutenção para assegurar a qualidade deste, responda aos comentários dos usuários e atualize as
informações do site.
Utilize os seguintes recursos do Dreamweaver para testar e publicar um site:
• Para adicionar novas tags em uma página ou corrigir o seu código, utilize o painel Referência
do Dreamweaver, para pesquisar código JavaScript, CSS e HTML. Veja “Acesso a referências
de linguagem”, na página 214.
• Utilize o Depurador JavaScript para ajudar a corrigir erros de JavaScript no seu código. O
depurador permite definir pontos de interrupção no código e, depois, visualizar o código
quando uma página for depurada no Dreamweaver. Veja “Como utilizar o depurador
JavaScript”, na página 221.
• Execute verificações de navegador e plug-in, teste e corrija links em seus documentos e execute
relatórios de site para verificar arquivos HTML quanto a erros comuns. Consulte o Capítulo
28, “Como testar um site”, na página 499.
• No painel Site do Dreamweaver, você obterá várias ferramentas para ajudar a gerenciar o site,
transferir arquivos de e para um servidor remoto, configurar um processo de devolução/
retirada, para evitar que os arquivos sejam substituídos, e sincronizar os arquivos nos seus sites
local e remoto. Consulte o Capítulo 3, “Como planejar e configurar o seu site”, na página 61.
Sobre a criação de páginas dinâmicas
No Dreamweaver, é possível definir várias origens de conteúdo dinâmico, inclusive conjuntos de
registros extraídos de bancos de dados, parâmetros de formulário e componentes de software
reutilizáveis para Java. Para adicionar o conteúdo dinâmico a uma página, basta arrastá-lo até a
página.
A página pode ser definida para exibir um ou muitos registros de uma só vez, mais de uma página
de registros, adicionar links especiais para que se possa passar de uma página de registros à
próxima (e retornar) e criar contadores de registros, para ajudar os usuários a controlar os
registros.
• Se você não estiver familiarizado com a criação de aplicativos para a Web no Dreamweaver,
aprenda a utilizar o programa para criar páginas dinâmicas. Consulte o Capítulo 29,
“Otimização da área de trabalho para desenvolvimento visual”, na página 513 e Capítulo 30,
“Fluxo de trabalho do Dreamweaver para projetos de páginas dinâmicas”, na página 523.
• Defina e exiba o conteúdo dinâmico nas suas páginas. Consulte o Capítulo 31, “Como
armazenar e recuperar dados para a página”, na página 531, Capítulo 32, “Definição das fontes
de conteúdo dinâmico”, na página 543, Capítulo 33, “Como adicionar conteúdo dinâmico às
páginas da Web”, na página 561 e Capítulo 34, “Como exibir os registros de bancos de dados”,
na página 569.
• Incorpore aplicativos ou lógica empresarial utilizando tecnologias avançadas, como os
componentes ColdFusion e serviços da Web. Consulte o Capítulo 35, “Como utilizar os
componentes ColdFusion”, na página 587 e Capítulo 36, “Como utilizar os serviços da Web”,
na página 593.
• Se necessitar de mais flexibilidade, crie os seus próprios comportamentos de servidor e
formulários interativos. Consulte o Capítulo 37, “Como adicionar comportamentos de
servidor personalizados”, na página 603 e Capítulo 38, “Criação de formulários interativos”, na
página 621.
Sobre o desenvolvimento rápido de aplicativos

O Dreamweaver oferece várias ferramentas de desenvolvimento rápido de aplicativos (RAD,
Rapid Application Development), incluindo comportamentos de servidor e objetos de aplicativo,
que ajudam a criar aplicativos para a Web sofisticados, sem a necessidade de escrever nenhum
código do servidor.
• Crie rapidamente páginas que efetuam buscas e modificam bancos de dados, além de exibir os
resultados da pesquisa. Consulte o Capítulo 39, “Como criar páginas-mestras/detalhes”, na
página 647, o Capítulo 40, “Como criar páginas que realizam buscas em bancos de dados”, na
página 655 e o Capítulo 41, “Como criar páginas para modificar bancos de dados”, na
página 669.
• Ofereça segurança restringindo o acesso às páginas. Consulte o Capítulo 42, “Como criar
páginas que restringem o acesso ao site”, na página 691.
24 Capítulo 1
Onde iniciar
Este guia contém informações para os leitores em vários níveis. Para tirar o melhor proveito desta
documentação, inicie lendo as partes mais adequadas ao seu nível de experiência.
Para iniciantes em desenho da Web:
1 Inicie lendo os dois primeiros capítulos do Guia de introdução. Se alguma seção desses capítulos
lhe parecer muito avançada ou complexa, ignore-a e volte a ela posteriormente.
2 Em Como utilizar o Dreamweaver, consulte o Capítulo 2, “Exploração da área de trabalho”, na
página 35, Capítulo 3, “Como planejar e configurar o seu site”, na página 61, Capítulo 4,
“Como gerenciar o seu site”, na página 75 e Capítulo 5, “Configuração de um documento”, na
página 115.
3 Aprenda sobre layouts de páginas no Capítulo 17, “Definição do layout de páginas na visualização
de layout”, na página 257.
4 Para saber como formatar texto e incluir imagens nas páginas, consulte o Capítulo 19, “Como
inserir e formatar texto”, na página 291 e o Capítulo 20, “Como inserir imagens”, na
página 319.
5 Isso é tudo que você precisa para começar a produzir sites da Web de alta qualidade. Quando
estiver pronto para aprender a utilizar as ferramentas mais avançadas, poderá continuar lendo
os capítulos restantes sobre as páginas estáticas, na ordem em que são apresentados. Talvez seja
mais conveniente adiar a leitura dos capítulos sobre as páginas dinâmicas para quando estiver
mais familiarizado com a criação de páginas da Web.
Para os designers da Web experientes que ainda não trabalharam com o Dreamweaver:
1 Inicie lendo os dois primeiros capítulos do Guia de introdução.

página 35 para obter mais detalhes sobre a interface do usuário do Dreamweaver.
3 Embora você esteja provavelmente familiarizado com grande parte do conteúdo em Capítulo
3, “Como planejar e configurar o seu site”, na página 61 e Capítulo 4, “Como gerenciar o seu
site”, na página 75, examine esses capítulos para saber como os conceitos já conhecidos são
implementados no Dreamweaver. Dê atenção especial às seções que tratam da utilização do
Dreamweaver para configurar um novo site.
4 Siga as etapas em qualquer tutorial que lhe interesse, para saber mais sobre como utilizar o
Dreamweaver para executar determinadas tarefas. Para exibir os tutoriais no sistema de ajuda,
escolha Ajuda> Tutoriais.
5 O Capítulo 19, “Como inserir e formatar texto”, na página 291 e o Capítulo 20, “Como
inserir imagens”, na página 319 contêm informações úteis e detalhadas sobre a utilização do
Dreamweaver para criar páginas HTML básicas.
6 Consulte a visão geral, no início de cada um dos outros capítulos, para verificar se os tópicos
correspondentes são de seu interesse.
Para os codificadores manuais experientes:
1 Inicie lendo o primeiro e o terceiro capítulos do Guia de introdução.

3 Embora você esteja provavelmente familiarizado com grande parte do conteúdo em Capítulo
3, “Como planejar e configurar o seu site”, na página 61 e Capítulo 4, “Como gerenciar o seu
site”, na página 75, examine esses capítulos para saber como os conceitos já conhecidos são
4 Para mais detalhes sobre codificação com o Dreamweaver, consulte o Capítulo 12,
“Configuração do seu ambiente de codificação”, na página 185, Capítulo 13, “Codificação no
Dreamweaver”, na página 201, Capítulo 14, “Otimização e depuração do código”, na
página 215 e Capítulo 15, “Edição do código na visualização do projeto”, na página 229.
Para os designers da Web experientes, que já estão familiarizados com o Dreamweaver, e

desejam aprender a criar páginas dinâmicas:
1 Inicie lendo o primeiro, quarto e quinto capítulos do Guia de introdução.

página 35 para obter mais detalhes sobre novos aspectos da interface do usuário do
Dreamweaver.
3 Para configurar servidores da Web e de aplicativos, consulte o Capítulo 6, “Configuração de
um aplicativo para a Web”, na página 137.
4 Conectar-se a um banco de dados. Dependendo da tecnologia de servidor utilizada pelo
6 Para personalizar o Dreamweaver manualmente, consulte o item “Como personalizar o
Dreamweaver”, no centro de suporte da Macromedia, no endereço http://
www.macromedia.com/go/customizing_dreamweaver (em inglês). Se desejar criar extensões
para o Dreamweaver, consulte Extensão dos recursos do Dreamweaver (Ajuda > Extensão dos
recursos do Dreamweaver).
Para os desenvolvedores de aplicativos para a Web que não utilizaram o Dreamweaver ou o

UltraDev:
1 Inicie pela leitura rápida do Guia de introdução para familiarizar-se com os conceitos básicos do
Dreamweaver.
26 Capítulo 1
3 Embora você esteja provavelmente familiarizado com grande parte do conteúdo em Capítulo 3,
“Como planejar e configurar o seu site”, na página 61 e Capítulo 4, “Como gerenciar o seu site”,
na página 75, examine esses capítulos para saber como os conceitos já conhecidos são
4 Siga as etapas em qualquer tutorial que lhe interesse, para saber mais sobre como utilizar o
Dreamweaver para executar determinadas tarefas. Para exibir os tutoriais no sistema de ajuda,
escolha Ajuda > Tutoriais.
5 Para configurar servidores da Web e de aplicativos utilizando o Dreamweaver, consulte o
Capítulo 6, “Configuração de um aplicativo para a Web”, na página 137.
6 Conectar-se a um banco de dados. Dependendo da tecnologia de servidor utilizada pelo
Para os desenvolvedores de aplicativos para a Web que utilizaram o UltraDev 4:
1 Inicie pela leitura de “Novidades do Dreamweaver MX”, na página 28.

página 35 para obter mais detalhes sobre novos aspectos da interface do usuário do
Dreamweaver.
3 Para personalizar o Dreamweaver manualmente, consulte o item “Como personalizar o
Dreamweaver”, no centro de suporte da Macromedia, no endereço http://
www.macromedia.com/go/customizing_dreamweaver (em inglês). Se desejar criar extensões
para o Dreamweaver, consulte Extensão dos recursos do Dreamweaver (Ajuda > Extensão dos
recursos do Dreamweaver).
Convenções tipográficas
As seguintes convenções tipográficas são utilizadas neste guia:
• Os itens de menu são mostrados neste formato: nome do menu > nome do item de menu. Os
itens nos submenus são mostrados neste formato: nome do menu > nome do submenu > nome
do item de menu.
• Fonte do código indica os nomes de tags e de atributos HTML, bem como o texto
utilizado nos exemplos.
• Fonte do código em itálico indica os itens substituíveis (às vezes denominados
metassímbolos) no código.
• Texto romano em negrito indica o texto a ser digitado exatamente conforme a indicação.
Novidades do Dreamweaver MX
O Dreamweaver MX contém uma grande variedade de novos recursos, como os modelos
aprimorados, para auxiliar os designers visuais, e muitos novos recursos de codificação. O
Dreamweaver também inclui agora todas as funcionalidades para desenvolvimento de aplicativos
do Dreamweaver UltraDev 4, além de oferecer vários outros recursos novos, inclusive uma área de
trabalho centralizada no código, derivada do Macromedia ColdFusion Studio, um melhor código
em tempo de execução e suporte às tecnologias de aplicativos para a Web mais recentes.
Controle total sobre o código e o projeto

É possível criar o site desejado de forma personalizada utilizando as ferramentas de projeto do MX
ou o ambiente avançado de codificação dos Dreamweaver.
O novo layout da área de trabalho integrada fornece um ambiente mais familiar, apresentando
uma interface de múltiplos documentos (MDI, Multiple Document Interface) que inclui painéis
inteiramente encaixáveis e janelas de documento com guias.
No Dreamweaver MX o gerenciamento de painéis do Macromedia MX, é compatível com o
funcionamento dos painéis no Macromedia Flash MX e no Fireworks MX. Agrupe os painéis
encaixáveis, que podem ser reduzidos, e expanda ou reduza-os conforme a necessidade para que o
fluxo de trabalho seja altamente configurável e homogêneo.
Os exemplos de componentes da Web pré-desenhados incluem layouts profissionais para
adiantar os seus projetos, bem como bibliotecas de funções JavaScript, que permitem ter acesso à
sofisticada interatividade de cliente, sem precisar ler centenas de páginas de manuais.
Modelos aprimorados do Dreamweaver permitem configurar regras sofisticadas para que os
colaboradores possam inserir conteúdo sem comprometer o desenho do site. A herança de modelos
permite um controle mais personalizado do layout, e as regiões editáveis possibilitam maior
flexibilidade às contribuições dos colaboradores.
O assistente de definição de sites permite configurar o site de forma rápida é fácil, tanto para criar
um site dinâmico pela primeira vez quanto para configurar uma conta junto ao provedor Internet.
Sugestões de código fornecem acesso fácil aos menus personalizados que mostram os atributos de
tags adequados, às propriedades dos métodos, aos parâmetros das funções e aos estilos CSS
durante a edição na visualização de código.
Barra de inserção personalizável permite acesso rápido aos objetos e comportamentos no
Dreamweaver MX e pode ser inteiramente extensível.
A barra de ferramentas do documento poder ser agora personalizada para atender às suas
necessidades e preferências, utilizando XML e JavaScript.
O explorador de arquivos foi integrado ao painel Site, permitindo a busca de propriedades e
arquivos na área de trabalho e nos volumes da rede, sem precisar sair do Dreamweaver para
utilizar o explorador de arquivos original do sistema operacional.
Painel de respostas estabelece a conexão direta com os recursos on-line do Centro de suporte da
Macromedia. É possível recuperar novos conteúdos à vontade, para garantir o seu acesso freqüente às
mais recentes dicas e truques.
Manipulação e edição aprimorada de tabelas geram um código melhor para as edições de tabelas
nas visualizações padrão e de layout, dinamizando assim a manipulação dos atributos e
assegurando que todos os layouts estejam o mais integrado possivel, sem comprometer a
compatibilidade entre os diferentes navegadores.
28 Capítulo 1
Menus pop-up JavaScript em cascata agora podem ser criados diretamente no Dreamweaver
MX; esse recurso estava disponível anteriormente apenas no Fireworks.
Sinalização da sintaxe por cores pode ser agora inteiramente configurada e personalizada, de acordo
com as suas necessidades.
A barra de ferramentas padrão permite o acesso rápido aos comandos utilizados com freqüência
(Abrir, Salvar e Novo) e da área de trabalho.
Impressão na visualização de código agora permite imprimir o código-fonte, com a formatação
adequada.
Suporte avançado a todas as tecnologias de servidor mais recentes

Crie com rapidez aplicativos para a Web dinâmicos e orientados para banco de dados,
manualmente ou utilizando objetos visuais e comportamentos.
Bibliotecas de código do servidor para ColdFusion, ASP, ASP.NET, JSP e PHP permitem criar
visualmente sites da Web dinâmicos, utilizando todas as tecnologias de servidor mais avançadas.
Utilize um ambiente de desenvolvimento para integrar-se a vários sites e tecnologias de
especializadas.
O painel Trechos permite armazenar partes de código arbitrárias, para utilização posterior. É
possível reutilizar código, layouts e funções complexas.
O Editor de bibliotecas de tags fornece um banco de dados de tags integrado para armazenar
informações sobre tags originais e personalizadas. Esse recurso permite editar as propriedades das
tags existentes e importar novas tags.
Centenas de editores de tags permitem editar rapidamente os atributos relevantes de
determinadas tags em HTML, CFML e ASP.NET, na visualização de código.
Suporte a tags personalizadas ASP.NET permite importar os controles de servidor ASP.NET
personalizados (tags personalizadas) para as páginas ASP.NET e visualizar sua estrutura e atributos
no seletor de tags, nas sugestões de código e no inspetor de código.
Tags ASP.NET de formulários da Web são agora processadas no Macintosh e Windows,
permitindo uma visualização e edição sofisticadas. Os editores de tags dos formulários da Web
permitem criar rapidamente formulários ASP.NET da Web, utilizando controles de servidor e de
validação.
Objetos DataGrid e DataList do ASP.NET podem ser facilmente criados no Dreamweaver MX,
com o objetivo de manipular e exibir dados complexos.
Painel integrado Banco de dados permite examinar rapidamente a estrutura e o conteúdo de seus
bancos de dados, percorrer as tabelas, os procedimentos armazenados e as visualizações, antes de
criar as consultas.
O seletor de tags mostra a estrutura de todas as tags disponíveis ao Dreamweaver MX, inclusive as
tags personalizadas, importadas através do editor de bibliotecas de tags. Utilize-o para colocar e
editar as tags nas páginas, com rapidez, e veja as informações de referência de tags individuais.
O banco de dados de tags com base em XML personalizável armazena informações sobre a
estrutura de todas as tags disponíveis. Esse mecanismo centralizado de armazenamento de
informações permite que os recursos, como as sugestões de código, o seletor de tags e o inspetor
de tags, funcionem com as tags importadas originais e personalizadas.
Detecção do ColdFusion MX permite que o assistente de definição de sites se configure
automaticamente para definir um site ColdFusion, utilizando uma cópia instalada local do
Macromedia ColdFusion MX Developer Edition.
Painel Depuração pelo servidor Live do ColdFusion MX dinamiza o fluxo de trabalho da
depuração do ColdFusion MX, exibindo o resultado desta diretamente no Dreamweaver MX.
Visualize as informações sobre variáveis, consultas e outras estatísticas importantes de páginas, e
vá direto para as áreas problemáticas, sem sair do ambiente de desenvolvimento.
O código de tempo de execução do ColdFusion gerado pelos objetos e comportamentos de
servidor do Dreamweaver MX, foi aprimorado para orientar-se mais para as tags, não podendo
quase ser distinguido do código escrito manualmente por um programador.
Suporte a RDS permite transferir arquivos de/para e examinar a estrutura dos bancos de dados
nos servidores ColdFusion, utilizando as conexões RDS.
Bibliotecas de tags JSP ajudam os programadores a suprimir a lógica do servidor das páginas JSP.
O Dreamweaver MX pode importar as informações da biblioteca de tags JSP dos arquivos TLD
(Tag Library Descriptor, descritor de biblioteca de tags) e torná-las disponíveis nas sugestões de
código, no seletor de tags e no inspetor de tags.
Análise completa dos componentes de software reutilizáveis para Java mostra os métodos
getProperty e setProperty dos componentes de software reutilizáveis para Java no painel Ligações,
além de poder exibir todos os métodos e propriedades destes no painel Componentes do servidor,
permitindo que os programadores integrem completamente os componentes de software
reutilizáveis aos aplicativos JSP.
Objetos de formulário dinâmicos permitem criar listas de seleção orientadas para banco de dados e
outros elementos de formulário, através da simples escolha do objeto de formulário adequado na
barra Inserir.
O criador de comportamentos de servidor do UltraDev 4 foi aprimorado para permitir que os
usuários criem comportamentos de servidor com elementos de interface de usuário mais
complexos, incluindo caixas de seleção, grupos de botões de opção e menus de conexão.
fornece uma versão licenciada do
Pacote integrado do HomeSite 5 e ColdFusion Studio 5
HomeSite+, uma combinação do ColdFusion Studio e HomeSite 5, totalmente integrada e
incluída no Dreamweaver MX.
Acesso fácil aos padrões mais recentes

Crie sites da Web compatíveis com os padrões mais recentes da Web, incluindo XML e serviços da
Web, e mantenha seus recursos atualizados com as tecnologias de desenvolvimento mais
avançadas.
Análise dos serviços da Web para ASP.NET, ColdFusion e Java permite examinar e interagir com
os padrões mais recentes de serviços da Web com base em XML, em todas as tecnologias de
servidor mais avançadas. Incorpore funcionalidades complexas aos seus aplicativos para a Web,
utilizando o recurso de análise dos serviços da Web no Dreamweaver MX.
Edição e validação de XML permite importar DTDs e esquemas, assegurando assim a formatação
correta dos documentos.
30 Capítulo 1
Suporte aprimorado às CSS, incluindo a integração TopStyle ajuda a criar sites compatíveis com
os padrões mais recentes de folhas de estilos CSS. O painel Estilos CSS do Dreamweaver MX foi
aperfeiçoado para mostrar os estilos definidos interna e externamente, além de permitir o uso das
folhas de estilo na fase de projeto. Também é oferecido suporte a muitas novas construções de
CSS2. O inspetor de propriedades do texto também pode ser utilizado na aplicação de estilos
CSS.
Suporte a XHTML permite garantir que os sites estão atualizados de acordo com os padrões mais
recentes de desenho HTML, configurando o Dreamweaver MX para gerar código compatível
com XHTML. Além disso, converte rapidamente arquivos HTML mais antigos em XHTML,
utilizando o conversor de XHTML.
Relatório de compatibilidade com a seção 508 do acesso ao site ajuda a determinar se o site
atende às instruções de acessibilidade e detecta problemas de maneira rápida e fácil.
Conteúdo integrado de referência sobre acessibilidade, no painel Referência, fornece o contexto e
subsídios para as melhores práticas relativas ao projeto da acessibilidade.
Opção de acessibilidade para gerar códigos compatíveis auxilia durante o ciclo de edição para
assegurar que o conteúdo que está sendo criado atenda às instruções de acessibilidade. Configure o
Dreamweaver para solicitar atributos específicos, relacionados à acessibilidade, quando as tags e os
objetos adequados forem inseridos na página.
Suporte a componentes ColdFusion oferece maior portabilidade e modularidade da lógica do
servidor, exibindo as propriedades através da CFML, como um serviço da Web, ou através do
Flash Application Server Gateway. O Dreamweaver MX inclui suporte à análise, criação e edição
de componentes ColdFusion.
Validador de código assegura que os documentos atendem aos padrões adequados, fornecendo um
relatório de validação relativo a um determinado perfil de navegador ou a uma versão específica de
um padrão, inclusive XHTML Transitional e HTML 4.0.
Carga e edição no Macromedia Flash MX e no Fireworks MX acelera a edição de imagens,
animação e HTML entre o Dreamweaver MX, Fireworks MX e Flash MX, permitindo a carga e
otimização diretamente no Dreamweaver.
Inspetor de tags para exibir XML, HTML e CFML permite ver a estrutura de um documento com
rapidez e facilidade. É possível detectar e eliminar rapidamente aninhamentos e relações principais
indevidos, sem ter que examinar o código-fonte original.
O login de FTP seguro integra-se ao MacSSH e ao PUTTY para Windows, permitindo a
transferência segura e ativada por SSH das informações sobre login a partir do cliente FTP
integrado do Dreamweaver.
Suporte integral ao conjunto de caracteres UTF-8,em todos os idiomas, permite criar e
transformar páginas utilizando a codificação UTF-8.
Suporte integral ao Windows XP permite que o Dreamweaver MX funcione em velocidade
máxima nos sistemas operacionais mais recentes e oferece suporte a todos os aprimoramentos de
interface do usuário recém-lançados.
Integração com o Macromedia Sitespring ajuda-o a utilizar os melhores procedimentos para
gerenciar a produção e os clientes na área de trabalho do Dreamweaver.
Recursos de tecnologias da Web e HTML
A seguir, estão alguns recursos úteis, disponíveis na Web:
A especificação HTML 4.01 (http://www.w3.org/TR/REC-html40/) é o documento oficial para
HTML do World Wide Web Consortium.
Índice DOT HTML (http://www.blooberry.com/indexdot/html/) é uma lista completa de tags,
atributos e valores HTML, bem como sua compatibilidade com os diversos navegadores.
A especificação XHTML 1.0 (http://www.w3.org/TR/xhtml1/) é o documento oficial para a
Extensible HyperText Markup Language (XHTML, linguagem extensível de marcadores de
hipertexto).
O site XML.com da O'Reilly (http://www.xml.com) fornece informações, tutoriais e dicas sobre a
Extensible Markup Language (XML), assim como outras tecnologias da Web.
As especificações para o nível 1 das Cascading Style Sheets (CSS1) (http://www.w3.org/TR/
REC-CSS1) e para o nível 2 (CSS2) (http://www.w3.org/TR/REC-CSS2/) são os documentos
oficiais para as folhas de estilo do World Wide Web Consortium.
Guia de referência das folhas de estilos da Web Review (http://webreview.com/guides/style/
style.html) explica o que são os estilos CSS e em quais navegadores funcionam.
As páginas Visão geral das ASP da Microsoft (http://msdn.microsoft.com/workshop/server/asp/
ASPover.asp) contêm informações sobre as Active Server Pages (ASP).
Página ASP.NET da Microsoft (http://www.asp.net/) contém informações sobre o ASP.NET.
A página JSP da Sun (http://java.sun.com/products/jsp/) contém informações sobre as JavaServer
Pages (JSP).
As páginas PHP (http://www.php.net/) contêm informações sobre o PHP: pré-processador de
hipertexto.
O site MySQL (http://www.mysql.com/) contém informações sobre o MySQL.
Tabela de entidades (http://www.bbsinc.com/iso8859.html) apresenta uma lista dos nomes de
entidades utilizadas pelo padrão ISO 8859-1 (Latin-1).
A página de eventos de HTML dinâmico (http://msdn.microsoft.com/workshop/author/dhtml/
reference/events.asp#om40_event) contém informações sobre os eventos no Microsoft Internet
Explorer.
A página de produtos ColdFusion da Macromedia (http://www.macromedia.com/br/software/
coldfusion/) contém informações sobre ColdFusion.
A página de produtos JRun Server da Macromedia (http://www.macromedia.com/br/software/
jrun/) contém informações sobre o servidor de aplicativos em Java JRun.
A página IBM WebSphere (http://www.ibm.com/software/webservers/appserv/) contém
informações sobre o servidor de aplicativos WebSphere.
A página do produto da Chili!Soft (http://www.Chilisoft.com/products/) contém informações
sobre o servidor de aplicativos ASP da Chili!Soft.
A JavaScript Bible, de autoria de Danny Goodman (IDG Books), traz informações sobre a
linguagem JavaScript 1.2 de maneira detalhada.
32 Capítulo 1
JavaScript: The Definitive Guide (JavaScript: o guia definitivo), de autoria de David Flanagan
(O’Reilly & Associates), fornece informações de referência para cada função, objeto, método,
propriedade e manipulador de evento JavaScript.
“CGI Scripts for Fun and Profit” (http://www.hotwired.lycos.com/webmonkey/99/26/
index4a.html) é um artigo do site Hotwired Webmonkey sobre a inclusão de scripts CGI
(Common Gateway Interface) já prontos nas páginas.
O Índice de recursos CGI (http://www.cgi-resources.com/) é um repositório de todas as questões
relativas a CGI, incluindo scripts prontos, documentação, livros e até mesmo programadores que
oferecem seus serviços.
O site Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/) inclui uma introdução
à CGI.
34 Capítulo 1
CAPÍTULO 2
Exploração da área de trabalho
Para obter o máximo de sua experiência com o Macromedia Dreamweaver MX, é necessário
compreender os conceitos básicos inerentes à área de trabalho do Dreamweaver e saber como
escolher as opções, utilizar os inspetores e painéis, e definir as preferências mais adequadas ao seu
estilo de trabalho.
Este capítulo contém os seguintes tópicos:
• “Utilização da área de trabalho do Dreamweaver”, na página 35
• “Utilização de janelas e painéis no Dreamweaver”, na página 41
• “Utilização do Dreamweaver com outros aplicativos”, na página 55
• “Personalização do Dreamweaver: Princípios básicos”, na página 55
Utilização da área de trabalho do Dreamweaver

Esta seção descreve os elementos básicos da área de trabalho no Windows e explica como escolher
um layout inicial para a mesma.
No Windows, o Dreamweaver MX fornece duas opções de layout de área de trabalho: um
layout-integrado-em uma única janela e um layout flutuante, semelhante ao do Dreamweaver 4.
Veja “Sobre o layout da área flutuante de trabalho no Windows”, na página 39.
35
Escolha de um layout de área de trabalho
Na primeira vez que o Dreamweaver é iniciado, aparece uma caixa de diálogo que permite
escolher um layout de área de trabalho. Caso você mude de idéia posteriormente, é possível
alternar para uma área de trabalho diferente utilizando a caixa de diálogo Preferências.
Para escolher um layout de área de trabalho:
Selecione um dos seguintes layouts:

A área de trabalho do Dreamweaver MX é integrada e utiliza a MDI (interface de múltiplos
documentos) na qual todas as janelas de documento e os painéis estão integrados em uma janela
de aplicativo maior, com os grupos de painéis encaixados à direita. Recomendado para a maioria
dos usuários.
Observação: Na maior parte deste guia do usuário presume-se que está sendo utilizada a área de trabalho
integrada do Dreamweaver MX.
Dreamweaver MX consiste na mesma área de trabalho integrada, porém os grupos de painéis estão
encaixados à esquerda, apresentando um layout semelhante ao utilizado pelo Macromedia
HomeSite e o Macromedia ColdFusion Studio, e as janelas de documento mostram a visualização
de código como padrão. Esse layout é recomendado para os usuários do HomeSite ou ColdFusion
Studio e outros-codificadores manuais que desejam utilizar um layout de área de trabalho familiar.
Para escolher esse layout, selecione a opção Área de trabalho do Dreamweaver MX e, em seguida,
escolha a opção Estilo HomeSite/Coder.
Observação: Os grupos de painéis podem ser encaixados em ambos os lados da área de trabalho, em qualquer
dos layouts de área de trabalho.
A área de trabalho do Dreamweaver 4 apresenta um layout semelhante ao utilizado no

Dreamweaver 4, no qual cada documento está em uma janela flutuante individual. Os grupos de
painéis são encaixados juntos, mas não estão situados dentro da janela maior do aplicativo.
Recomendado apenas para os usuários do Dreamweaver 4 que preferem utilizar uma área de
trabalho mais familiar.
36 Capítulo 2
Para alternar para uma área de trabalho diferente da que foi escolhida:
1 Escolha Editar > Preferências.

2 Na lista de categorias, à esquerda, selecione Geral, caso não esteja selecionada.
3 Clique no botão Alterar a área de trabalho.
4 Selecione um layout de área de trabalho e clique em OK.
Será exibida uma mensagem de alerta informando que o novo layout será mostrado após o reinício
do Dreamweaver.
5 Clique em OK para fechar a mensagem de alerta.
6 Clique novamente em OK para fechar a caixa de diálogo Preferências.
7 Saia do Dreamweaver e reinicie-o.
Sobre a área de trabalho integrada do Dreamweaver MX no Windows

No Windows, a área de trabalho integrada do Dreamweaver MX apresenta todas as janelas e
painéis reunidos em uma única janela maior do aplicativo.
barra Inserir
barra de ferramentas do documento
janela do documento
janela Bem-vindo grupos de painéis
inspetor de propriedades painel Site

seletor de tags
Exploração da área de trabalho 37

A área de trabalho Estilo HomeSite/Coder contém os mesmos elementos, porém os grupos de
painéis estão encaixados no lado esquerdo, e não à direita, da janela principal. O padrão desse layout
de área de trabalho é mostrar o inspetor de propriedades minimizado e a janela do documento ser
exibida na visualização de código.
grupos de painéis barra Inserir

barra de ferramentas
painel Site do documento
seletor de tags Inspetor de propriedades janela do documento

(minimizado)
Os usuários do Windows podem alternar para essa área flutuante de trabalho utilizando a caixa de
diálogo Preferências; para obter mais informações, veja “Escolha de um layout de área de
trabalho”, na página 36.
Para ter uma visão geral resumida das janelas e painéis, veja “Sobre as janelas e os painéis”, na
página 40. Para obter mais detalhes sobre janelas e painéis específicos, veja “Utilização de janelas e
painéis no Dreamweaver”, na página 41.
38 Capítulo 2
Sobre o layout da área flutuante de trabalho no Windows
No layout da área de trabalho no estilo do Dreamweaver 4, cada documento está em sua janela
individual. Os grupos de painéis são inicialmente encaixados juntos, mas podem ser separados e
colocados em suas próprias janelas.
barra de ferramentas do documento

barra
Inserir janela do documento painel Site
grupos de painéis
seletor de tags inspetor de propriedades
Na área flutuante de trabalho, as janelas se encaixam automaticamente umas nas outras, nas
laterais da tela e na janela do documento, à medida que são arrastadas ou redimensionadas. Essa
característica facilita o deslocamento e a organização dos diversos painéis e janelas flutuantes no
Dreamweaver.
Os usuários do Windows podem alternar para uma área de trabalho integrada em uma única
janela utilizando a caixa de diálogo Preferências; para obter mais informações, veja “Utilização da
área de trabalho do Dreamweaver”, na página 35.
Para ter uma visão geral resumida das janelas e painéis, veja “Sobre as janelas e os painéis”, na
página 40. Para obter mais detalhes sobre janelas e painéis específicos, veja “Utilização de janelas e
painéis no Dreamweaver”, na página 41.

Sobre as janelas e os painéis
Esta seção descreve resumidamente alguns elementos que aparecem nos layouts de áreas de
trabalho integradas e flutuantes. Para obter mais informações sobre janelas e painéis específicos,
veja “Utilização de janelas e painéis no Dreamweaver”, na página 41.
A janela Bem-vindo contém dicas sobre a configuração da área de trabalho, para diversos
objetivos, e informações sobre os novos recursos, para as pessoas que utilizaram as versões
anteriores do Dreamweaver.
A barra Inserir contém botões para inserção de vários tipos de “objetos”, como imagens, tabelas e
camadas em um documento. Cada objeto é uma parte do código HTML, que permite ao usuário
definir vários atributos à medida que são inseridos. Por exemplo: é possível inserir uma imagem
clicando no ícone de Imagem, na barra Inserir. Se preferir, inclua os objetos utilizando o menu
Inserir em vez da barra Inserir.
A barra de ferramentas do documento contém botões e menus pop-up que possibilitam diferentes
visualizações da janela do documento (visualização do projeto e de código), várias opções de
exibição e algumas operações comuns, como a visualização no navegador.
A barra de ferramentas padrão (que não é exibida no layout padrão da área de trabalho) contém
botões para executar operações comuns dos menus Arquivo e Editar: Novo, Abrir, Salvar, Salvar
como, Salvar tudo, Recortar, Copiar, Colar, Desfazer e Refazer. Para exibir a barra de ferramentas
padrão, escolha Exibir> Barras de ferramentas> Padrão.
A janela do documento exibe o documento que está sendo criado e editado.
O inspetor de propriedades permite exibir e alterar várias propriedades do objeto ou texto
selecionado. Cada tipo de objeto apresenta propriedades diferentes (o padrão é não expandido no
layout da área de trabalho em estilo Coder).
O seletor de tags, na barra de status situada na parte inferior da janela do documento, mostra a
hierarquia das tags que delimitam a seleção atual na visualização do projeto. Clique em qualquer
tag na hierarquia para selecioná-la e exibir todo o seu conteúdo (não está visível na visualização de
código e, por conseguinte, não estará visível como padrão no layout da área de trabalho em estilo
Coder). Para obter mais informações, veja “Edição do código com o seletor de tags”, na
página 233.
Os grupos de painéis são conjunto vejas de painéis relacionados, agrupados sob um cabeçalho.
Para expandir um grupo de painéis, clique na seta de expansão, à esquerda do nome do grupo;
para desanexar um grupo de painéis, arraste a pinça, na extremidade esquerda da barra de título
do grupo.
O painel Sitepermite gerenciar os arquivos e as pastas que compõem o site. Para obter mais
informações, veja “Sobre o painel Site”, na página 76. Esse painel também possibilita a exibição de
todos os arquivos no disco local, como no Windows Explorer.
A barra do Iniciador (não é exibida no layout padrão de área de trabalho) exibe botões na barra de
status para abrir e fechar os painéis e inspetores utilizados com mais freqüência. Para exibir a barra
do Iniciador e especificar os ícones que ela mostrará, veja “Definição das preferências dos painéis”,
na página 52.
40 Capítulo 2
O Dreamweaver fornece muitos outros painéis, inspetores e janelas que não são mostrados nesta
seção, como o painel Histórico e o inspetor de código. A maioria dos painéis pode ser reunida em
grupos de painéis. Para abrir os painéis, inspetores e janelas do Dreamweaver, utilize o menu
Janela. Uma marca de seleção próxima a um item, no menu Janela, indica que ele está aberto
(embora possa estar oculto atrás de outras janelas). Para exibir um item que não esteja aberto,
escolha o nome do item no menu.
Se um painel, inspetor ou janela, que estiver marcado como aberto, não puder ser localizado,
escolha Janela > Organizar os painéis para posicionar todos os painéis abertos.
Utilização de janelas e painéis no Dreamweaver

Esta seção explica como utilizar várias janelas, barras de ferramentas, painéis, inspetores
específicos e outros elementos da área de trabalho do Dreamweaver.
Janela do documento
A janela do documento mostra o documento que está aberto. É possível escolher uma das
seguintes visualizações:
• Visualização do projeto, um ambiente de projeto para criar o layout visual da página, executar
a edição visual e desenvolver rapidamente os aplicativos. Nessa visualização, o Dreamweaver
exibe uma representação inteiramente editável do documento, semelhante à visualização de
uma página em um navegador. É possível configurar a visualização do projeto para que exiba o
conteúdo dinâmico durante o trabalho com o documento (veja “Exibição de Live Data na
visualização do projeto”, na página 516).
• A visualização de código é um ambiente de codificação manual para gravar e editar código-de
servidor HTML e JavaScript, como Microsoft Active Server Pages (ASP) ou ColdFusion
Markup Language, e qualquer outro tipo de código. Para obter mais informações, consulte o
Capítulo 13, “Codificação no Dreamweaver”, na página 201.
• As visualizações de código e do projeto permitem ver o documento nessas duas visualizações
em uma única janela.
Para alternar rapidamente entre as duas visualizações, pressione Control+sinal de til (~).
Quando a janela do documento contém uma barra de título, esta exibirá o título da página e,
entre parênteses, o nome e caminho do arquivo. Após o nome do arquivo, o Dreamweaver exibe
um asterisco, se tiverem sido feitas alterações ainda não salvas.
No Windows, quando a janela do documento é maximizada no layout de área de trabalho
integrada, ela não contém a barra de título. Nesse caso, o título da página, e o nome e caminho do
arquivo aparecerão na barra de título da janela principal da área de trabalho.

Sobre a barra de status
A barra de status, situada na parte inferior da janela do documento, fornece informações
adicionais sobre o documento que você estiver criando.
Tamanho do documento e
tempo estimado de download
seletor de tags menu pop-up Tamanho da janela
O seletor de tags mostra a hierarquia das tags que envolvem a seleção atual. Clique em qualquer
tag na hierarquia para selecioná-la e exibir todo o seu conteúdo. Clique na tag <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 botão direito do mouse na tag e escolha uma classe ou identificação
no menu contextual.
O menu pop-up Tamanho da janela (exibido apenas na visualização do projeto) permite
redimensionar a janela do documento para um tamanho predeterminado ou personalizado. Veja
“Redimensionamento da janela do documento”, na página 42.
À direita do menu pop-up Tamanho da janela são mostradas as estimativas de tamanho do
documento e de tempo de download da página, incluindo todos os arquivos dependentes, como
os arquivos de imagens e de outras mídias. Veja “Como definir o tempo e o tamanho do
download”, na página 507.
Para obter informações sobre a criação de um novo documento e como utilizar os documentos
pré-desenhados, fornecidos com o Dreamweaver, consulte o Capítulo 5, “Configuração de um
documento”, na página 115.
Redimensionamento da janela do documento

A barra de status exibe as dimensões atuais da janela do documento (em pixels). Para definir um
tamanho de janela caiba em qualquer um dos vários tamanhos de monitores comumente
utilizados, clique no tamanho da janela e escolha um tamanho no menu pop-up Tamanho da
janela. Para redimensionar de modo menos preciso, utilize os métodos padrão do sistema
operacional de ajuste de janelas, por exemplo: arrastar o canto inferior direito da janela. Na área
de trabalho integrada do Windows, é possível maximizar uma janela de documento para que ela
preencha totalmente a área do documento da janela integrada.
Observação: Não é possível redimensionar uma janela de documento que estiver maximizada na área de trabalho
integrada.
Quando a janela do documento está maximizada, as guias aparecem na parte inferior da área da
janela do documento, mostrando os nomes de arquivos de todos os documentos que estiverem
abertos. Para alternar para um documento, clique na sua respectiva guia.
42 Capítulo 2
Para criar uma página cuja aparência seja melhor em um determinado tamanho, é possível ajustar
a janela do documento para qualquer um dos tamanhos predeterminados, editá-los ou criar novos
tamanhos.
Observação: O tamanho da janela mostrado reflete as dimensões internas da janela do navegador, sem incluir as
bordas; o tamanho do monitor é exibido entre parênteses. Por exemplo: seria recomendável utilizar o tamanho “536 x
196 (640 x 480, padrão)” se for provável que os visitantes ao seu site estejam utilizando o Microsoft Internet Explorer
ou o Netscape Navigator nas suas configurações padrão em um monitor de 640 x 480 pixels.
Para redimensionar a janela do documento de acordo com um tamanho predeterminado:
Escolha um dos tamanhos no menu pop-up situado na parte inferior da janela do documento.
Para alterar os valores na lista do menu pop-up Tamanho da janela:
1 No menu pop-up Tamanho da janela, escolha Editar os tamanhos.

2 Clique em qualquer dos valores de largura e altura na lista Tamanhos de janela, e digite um
novo valor.
Para que a janela do documento se ajuste apenas a uma largura específica (mantendo a altura
inalterada), selecione um valor de altura e exclua-o.
3 Clique na caixa de texto Descrição, para digitar um texto descritivo sobre um determinado
tamanho.
4 Clique em OK para salvar a alteração e retornar à janela do documento.
Para adicionar um novo tamanho ao menu pop-up Tamanho da janela:
1 No menu pop-up Tamanho da janela, escolha Editar os tamanhos.

2 Clique no espaço em branco abaixo do último valor na coluna Largura.
3 Digite os valores de Largura e Altura. Para definir apenas os valores de Largura ou de Altura,
basta deixar um campo vazio.
4 Clique no campo Descrição, para inserir um texto descritivo sobre o tamanho adicionado.
5 Clique em OK para salvar a alteração e retornar à janela do documento.
Por exemplo: digite SVGA ou PC comum ao lado da entrada referente a um monitor de 800 x
600 pixels, e Mac de 17 pol. ao lado da entrada referente a um monitor de 832 x 624 pixels. A
maioria dos monitores permitem ajustes para várias dimensões em pixels.
Para maximizar a janela do documento (apenas na área de trabalho integrada do Windows):
Clique no botão Maximizar, na barra de título da janela do documento.

Definição das preferências da barra de status
Para definir as preferências da barra de status, escolha Editar > Preferências e selecione Barra de
status, na lista de categorias, à esquerda. Para obter mais informações, veja “Sobre a barra de
status”, na página 42.
Tamanhos de janela permite personalizar os tamanhos de janelas mostrados no menu pop-up da
barra de status. Veja “Redimensionamento da janela do documento”, na página 42.
Velocidade de conexão determina a velocidade da conexão (em quilobits por segundo) utilizada no
cálculo do tamanho do download. O tamanho do download da página é exibido na barra de status.
Quando uma imagem é selecionada na janela do documento, o tamanho do download dessa
imagem é exibido no inspetor de propriedades.
Utilização da barra do Iniciador

A barra do Iniciador é mostrada na barra de status e contém botões para abrir e fechar vários
painéis, inspetores e janelas.
Para exibir a barra do Iniciador, ative a opção Mostrar os ícones nos painéis e no Iniciador, nas
preferências dos painéis. É possível especificar quais itens serão exibidos na barra do Iniciador.
Para obter mais informações, veja “Definição das preferências dos painéis”, na página 52.
Utilização da barra de ferramentas do documento

A barra de ferramentas do documento contém botões que permitem alternar rapidamente
diferentes visualizações do documento: de código, do projeto, uma visualização dividida que
mostra as visualizações de código e do projeto, e a visualização do Live Data (veja “Exibição de
Live Data na visualização do projeto”, na página 516). A barra de ferramentas contém alguns
comandos e opções comuns relacionados à visualização do documento, transferência entre os sites
local e remoto, e depuração do código JavaScript
Para exibir ou ocultar a barra de ferramentas do documento, escolha Exibir > Barras de
ferramentas > Documento.
Mostrar a visualização de código Gerenciamento de arquivos
Mostrar a visualização
do projeto Visualizar/depurar no navegador
Título do
documento Referência
Opções de visualização
Visualização do Live Data
Navegação por códigos
Mostrar as visualizações de Atualizar a visualização do projeto
código e do projeto
44 Capítulo 2
As seguintes opções são mostradas na barra de ferramentas do documento:
• Mostrar a visualização de código exibe apenas a visualização de código na janela do documento.
• Mostrar as visualizações de código e do projetoexibe a visualização de código em uma parte da
janela do documento e a visualização do projeto na outra parte.
Quando essa visualização combinada é selecionada, a opção Visualização do projeto no alto
torna-se disponível no menu Opções de visualização. Utilize essa opção para especificar qual
visualização aparecerá na parte superior da janela do documento.
• Mostrar a visualização do projeto exibe apenas a visualização do projeto na janela do
documento.
Também é possível escolher uma visualização no menu Exibir.
• Título permite digitar um título para o documento, que será exibido na barra de título do
navegador.
Se o documento já tiver um título, ele aparecerá nesse campo.
• Gerenciamento de arquivos exibe o menu pop-up Gerenciamento de arquivos.
• Visualizar/depurar no navegador permite visualizar ou depurar o documento no navegador.
Escolha um navegador no menu pop-up.
Para adicionar um navegador ao menu ou alterar os navegadores contidos na lista, escolha
Editar a lista de navegadores.
• Atualizar a visualização do projeto atualiza a visualização do projeto do documento após as
alterações feitas na visualização de código.
As alterações feitas na visualização de código não são exibidas automaticamente na visualização
do projeto até que sejam executadas determinadas ações, por exemplo: salvar o arquivo ou
clique neste botão.
• Referência exibe o painel Referência.
O painel Referência contém informações de referência sobre HTML, CSS, JavaScript, CFML,
ASP e JSP. Para obter mais informações, veja “Acesso a referências de linguagem”, na
página 214.
• Navegação do código permite navegar pelo código JavaScript. Para obter mais informações,
veja “Como utilizar o depurador JavaScript”, na página 221.
• Opções de visualização permite definir as opções das visualizações de código e do projeto,
inclusive qual visualização deve aparecer em primeiro plano.
Para obter mais informações sobre as opções da visualização de código, veja “Definição de
preferências de visualização”, na página 186.
As opções da visualização do projeto permitem ocultar todos os auxílios visuais (por ex.:
tabelas, camadas e bordas da moldura) de uma só vez, ou mostrar e ocultar auxílios individuais,
conforme a preferência. Essas opções também possibilitam exibir o conteúdo do cabeçalho e as
guias visuais. Para obter mais informações sobre essas opções, que também se encontram no
menu Exibir, veja “Seleção de elementos na janela do documento”, na página 124,
“Visualização e edição do conteúdo do HEAD”, na página 128 e “Utilização de guias visuais
no processo de projeto”, na página 126.
Quando as visualizações de código e do projeto estiverem em exibição, ambos os conjuntos de
opções estarão disponíveis no menu.

Utilização da barra de ferramentas padrão
A barra de ferramentas padrão contém botões para executar operações comuns dos menus
Arquivo e Editar: Novo, Abrir, Salvar, Salvar como, Salvar tudo, Recortar, Copiar, Colar, Desfazer
e Refazer. Utilize esses botões da mesma forma que os comandos equivalentes nos menus. Para
obter mais informações sobre as operações Abrir e Salvar, consulte o Capítulo 5, “Configuração de
um documento”, na página 115.
Para exibir a barra de ferramentas padrão, escolha Exibir > Barras de ferramentas > Padrão.
Utilização dos menus contextuais

O Dreamweaver utiliza amplamente os menus contextuais, que fornecem acesso conveniente aos
comandos mais úteis e às propriedades relacionadas ao objeto ou à janela com a qual você estiver
trabalhando. Os menus contextuais apresentam apenas os comandos pertinentes à seleção atual.
Para utilizar um menu contextual:
1 Clique com o botão direito do mouse no objeto ou na janela.

Será exibido o menu contextual correspondente ao objeto ou à janela selecionada.
2 Escolha um comando no menu contextual.
Utilização da barra Inserir:

A barra Inserir contém botões para criar e inserir objetos, como tabelas, camadas e imagens. Os
botões estão organizados em guias.
Para mostrar ou ocultar a barra Inserir:
Escolha Janela>Inserir.
Para expandir ou reduzir a barra Inserir:
Clique na seta de expansão, no canto esquerdo da barra de título da barra Inserir.
46 Capítulo 2
Para mudar a orientação da barra Inserir, siga um dos procedimentos:
• Para mudar a posição da barra Inserir de horizontal para vertical, clique no ícone de orientação
vertical, próximo ao canto superior direito.
• Para mudar a posição da barra Inserir, de vertical para horizontal, clique no ícone de orientação
horizontal, próximo ao canto inferior direito.
Para mostrar os botões em uma determinada guia, siga um dos procedimentos abaixo:
• Se a barra Inserir estiver configurada com as guias na horizontal, clique em uma guia.
• Se a barra Inserir estiver na posição vertical, clique no nome da categoria, na parte superior da
barra, e escolha uma categoria no menu pop-up que aparecer.
Para inserir um objeto:
1 Selecione a guia adequada na barra Inserir.

2 Clique em um objeto de botão ou arraste o ícone de botão para a janela do documento.
Dependendo do objeto, poderá ser exibida uma caixa de diálogo de inserção de objeto
correspondente, solicitando a busca um arquivo ou parâmetros específicos a um objeto.
Para ignorar a caixa de diálogo de inserção de objetos e inserir um objeto alocador de espaço
vazio:
Pressione Control e clique no botão correspondente ao objeto.

Por exemplo: para inserir um alocador de espaço de uma imagem sem especificar um arquivo de
imagem, pressione Control e clique no botão Imagem.
Observação: Esse procedimento não ignora todas as caixas de diálogo de inserção de objeto. Muitos objetos,
inclusive as barras de navegação, camadas, botões Flash e conjuntos de molduras, não inserem alocadores de
espaço ou objetos com valor padrão.
A barra Inserir contém várias guias: Comuns, Layout, Texto, Tabelas, Molduras, Formulários,
Modelos, Caracteres, Mídia, Cabeçalho, Script e Aplicativo. São exibidas guias adicionais quando
o documento que estiver em exibição contiver código do servidor, como documentos ASP ou
CFML.
• A guia Aplicativo permite inserir elementos dinâmicos, como conjuntos de registros, regiões
repetidas, e formulários de atualização e de inserção de registros. Para obter informações sobre
conteúdo dinâmico, consulte o Capítulo 33, “Como adicionar conteúdo dinâmico às páginas
da Web”, na página 561.
• A guia Caracteres contém caracteres especiais, como o símbolo de direito autoral (copyright),
as aspas curvas, e os símbolos de marcas comerciais e registradas. Observe que alguns desses
símbolos podem não ser exibidos corretamente nas versões 3.0 e anteriores dos navegadores
Internet Explorer e Netscape Navigator.
• A guia Comuns contém botões para criar e inserir os objetos utilizados com mais freqüência,
por exemplo: imagens, tabelas e camadas.
• A guia Formulários contém botões para criar formulários e inserir elementos de formulários.

• A guia Molduras contém os layouts comuns dos conjuntos de molduras.
• A guia Head contém botões para adicionar vários elementos head, como as tags meta e base.
• A guia Layout permite inserir tabelas e camadas, bem como escolher entre duas visualizações de
tabelas: visualização padrão (o padrão) e de layout. Quando é selecionada a visualização de
layout, podem ser utilizadas as ferramentas de layout do Dreamweaver: Desenhar a célula de
layout e Desenhar a tabela de layout. Para obter mais informações, consulte o Capítulo 17,
“Definição do layout de páginas na visualização de layout”, na página 257.
• A guia Mídia contém botões para inserir objetos de mídia animados ou interativos, como botões e
texto Flash, applets Java e objetos ActiveX. Para obter mais informações, consulte o Capítulo 22,
“Como inserir mídia”, na página 345.
• A guia Script permite inserir um script, uma seção noscript ou uma inclusão do servidor
(server-side include).
• A guia Tabelas permite inserir uma tabela inteira ou uma tag específica a uma tabela (como tr,
th ou td).
• A guia Modelos permite inserir regiões editáveis, opcionais e repetitivas nos arquivos de
modelos. Para obter mais informações, veja “Sobre os modelos do Dreamweaver”, na
página 472.
• A guia Texto permite inserir várias tags de formatação de lista e de texto, como b, em, p, h1 e ul.
Observação: Embora alguns botões na guia Texto sejam semelhantes aos encontrados no inspetor de
propriedades, suas funções são diferentes. Os botões na guia Texto servem apenas para inserir código e não
refletem o estado atual da seleção; se a seleção contiver texto em negrito, o botão Negrito, no inspetor de
propriedades, será exibido como selecionado, enquanto que o mesmo botão na guia Texto não estará ativado.
• As guias de código do servidor, disponíveis apenas para as páginas que utilizam uma
determinada linguagem de servidor, incluem ASP, ASP.NET, CFML Basic, CFML Flow, CFML
Advanced, JSP e PHP. Cada uma dessas guias fornece objetos de código do servidor, que
podem ser inseridos na visualização de código.
Para obter informações sobre os objetos em cada guia, consulte os tópicos relacionados na Ajuda
do Dreamweaver.
Se apenas alguns objetos estiverem visíveis em uma determinada guia, será mostrada uma pequena
seta no canto inferior esquerdo da barra Inserir; para exibir os outros objetos da guia, clique na
seta.
Quando um objeto de botão é clicado, o Dreamweaver insere código no documento. Em alguns
casos, o código é inserido imediatamente, em outros, é exibido um editor de tags (veja “Edição de
tags utilizando editores de tags”, na página 206) ou uma outra caixa de diálogo, permitindo a
especificação de mais informações, antes da inserção do código. Se um objeto for inserido na
visualização do projeto, não será exibida nenhuma caixa de diálogo, porém se ele for inserido na
visualização de código, aparecerá o editor de tags. No caso de alguns objetos, a inserção destes na
visualização do projeto fará com que o Dreamweaver alterne para a visualização de código, antes
de inserir o objeto.
Alguns objetos, como as âncoras com nome, não estão visíveis quando a página é exibida na janela
do navegador. Para exibir os ícones que marcam os locais desses objetos invisíveis na visualização
do projeto, escolha Exibir > Auxílios visuais > Elementos invisíveis. Para selecionar os objetos
invisíveis na visualização do projeto, clique em seus respectivos ícones. Para obter mais
informações, veja “Sobre os elementos invisíveis”, na página 125.
48 Capítulo 2
Algumas das definições de preferências gerais afetam a barra Inserir. Para modificá-las, escolha
Editar > Preferências e selecione Geral na lista de categorias à esquerda.
• Ao inserir objetos, como imagens, tabelas, scripts e elementos head, uma caixa de diálogo
solicitará informações adicionais. As caixas de diálogo podem ser suprimidas, desativando a
opção Mostrar a caixa de diálogo ao inserir objetos ou mantendo pressionada a tecla Control
durante a criação do objeto. Quando o objeto é inserido com essa opção desativada, são
conferidos valores de atributos padrão ao objeto. Utilize o inspetor de propriedades para alterar
as propriedades do objeto após a inserção.
• A opção barra Inserir permite exibir o seu conteúdo apenas como ícones, texto, ou texto e
ícones.
É possível modificar qualquer objeto na barra Inserir ou criar os seus próprios objetos; veja
“Customizing Dreamweaver”, no Centro de suporte da Macromedia, em http://
www.macromedia.com/go/customizing_dreamweaver (em inglês).
Utilização do inspetor de propriedades

O inspetor de propriedades permite examinar e editar as propriedades do elemento da página que
estiver selecionado, como um texto ou objeto inserido. Os elementos da página podem ser
selecionados nas visualizações do projeto ou de código.
Para mostrar ou ocultar o inspetor de propriedades, escolha Janela > Propriedades.
A maioria das alterações feitas às propriedades será imediatamente aplicada à janela do documento.
Contudo, no caso de algumas propriedades, as alterações não são aplicadas até que você clique fora
dos campos de texto de edição de propriedades, pressione Enter ou Tab para passar a outra
propriedade.
O conteúdo do inspetor de propriedades varia dependendo do elemento selecionado. Para obter
informações sobre determinadas propriedades, selecione um elemento na janela do documento e,
em seguida, clique no ícone da Ajuda, no canto superior direito do inspetor de propriedades.
O inspetor de propriedades inicialmente exibirá a maioria das propriedades do elemento
selecionado. Clique na seta de expansão, no canto inferior direito do inspetor de propriedades,
para reduzi-lo e mostrar apenas as propriedades utilizadas mais comumente.
Dica: Em alguns casos, é possível que certas propriedades incomuns não apareçam, mesmo no inspetor de
propriedades expandido; nesses casos, utilize o inspetor de código ou a visualização de código, para codificar
essas propriedades manualmente, ou selecione a tag na visualização de código e escolha Modificar > Editar a tag.

Gerenciamento de painéis e grupos de painéis
No Dreamweaver, os painéis são reunidos em grupos de painéis. Cada grupo pode ser expandido
ou reduzido, e encaixado ou separado de outros grupos de painéis. Os grupos de painéis também
podem ser encaixados na janela integrada do aplicativo (apenas na área de trabalho integrada do
Windows). Esse recurso facilita o acesso aos painéis necessários sem desorganizar a área de
trabalho. Em um grupo, os painéis são mostrados como guias.
Observação: Quando um grupo de painéis é flutuante (separado), aparece uma barra vazia estreita na parte
superior do grupo de painéis. Nesta documentação, o termo “barra de título do grupo de painéis” refere-se à área na
qual o nome do grupo de painéis é mostrado, e não à barra vazia estreita.
Para expandir ou reduzir um grupo de painéis, siga um dos procedimentos abaixo:
• Clique na seta de expansão, no lado esquerdo da barra de título do grupo de painéis.

• Clique no título do grupo de painéis.
Para selecionar um painel dentro de um grupo expandido de painéis:
Clique na guia do painel.
Para separar um grupo de painéis:
Arraste o grupo de painéis pela respectiva pinça (no lado direito da barra de título do grupo de
painéis) até que o contorno indique que ele não está mais anexado.
Para encaixar um grupo de painéis em outros grupos de painéis (área flutuante de trabalho) ou na
janela integrada, apenas no Windows:
Arraste o grupo de painéis utilizando a pinça, até que o seu contorno indique que ele não está
mais anexado.
A maioria dos painéis pode ser encaixada apenas à esquerda ou à direita da janela do documento
na área de trabalho integrada, enquanto os outros (como o inspetor de propriedades e a barra
Inserir) podem ser encaixados somente nas partes superior e inferior da janela integrada.
Para arrastar um grupo de painéis flutuantes (desacoplados) sem encaixá-lo:
Arraste o grupo de painéis pela barra situada acima da barra de título. O grupo de painéis não será
encaixado encaixado, contanto que não seja arrastado pela respectiva pinça.
50 Capítulo 2
Para ver o menu Opções do grupo de painéis:
Expanda o grupo de painéis clicando na seta de expansão.

O menu Opções estará visível quando o grupo de painéis for expandido.
Dica: Algumas opções estão disponíveis no menu contextual do grupo de painéis mesmo quando o grupo for
reduzido; clique com o botão direito do mouse na barra de título do grupo de painéis para exibir o menu contextual.
Para renomear um grupo de painéis:
1 No menu Opções, à direita da barra de título do grupo de painéis, escolha Renomear o grupo
de painéis.
2 Digite um novo nome e clique em OK.
Para desanexar um painel de um grupo de painéis:
Arraste o painel pela respectiva guia até que o seu contorno indique que ele não está mais
encaixado.
O painel será exibido em um novo grupo de painéis individual.
Para encaixar um painel em um grupo de painéis:
Arraste o painel pela respectiva guia até que o seu contorno indique que ele está encaixado.
Para maximizar um grupo de painéis, siga um dos procedimentos abaixo:
• No menu Opções, na barra de título do grupo de painéis, escolha Maximizar o grupo de

painéis.
• Clique duas vezes em qualquer local da barra de título do grupo de painéis.
O grupo de painéis se expandirá verticalmente de modo a preencher todo o espaço vertical
disponível.
Para fechar um grupo de painéis, fazendo-o desaparecer por completo:
No menu Opções da barra de título do grupo de painéis, escolha Fechar o grupo de painéis.
O grupo de painéis desaparecerá da tela.

Para abrir um grupo de painéis que não está visível na tela:
Escolha o nome do painel no menu Janela.
Para alterar o tamanho do conjunto inteiro de grupos de painéis (apenas na área flutuante de
trabalho):
Arraste o conjunto de grupos de painéis, utilizando o mesmo procedimento para redimensionar

qualquer janela no seu sistema operacional. Por exemplo: é possível arrastar a área de
redimensionamento no canto inferior direito do conjunto de grupos de painéis.
Definição das preferências dos painéis

Utilize as preferências de painéis para especificar quais painéis e inspetores sempre aparecerão em
primeiro plano na janela do documento e quais serão ocultados por essa janela. As preferências de
painéis também podem ser utilizadas para especificar se os ícones serão mostrados nas guias dos
painéis, se a barra do Iniciador será exibida e quais painéis e inspetores ela conterá.
Para definir as preferências dos painéis, escolha Editar > Preferências e selecione Painéis, na lista de
categorias, à esquerda. Em seguida, escolha qualquer das seguintes opções:
Sempre visíveis permite especificar quais painéis sempre serão mostrados em primeiro plano na
janela do documento. Como padrão, todos os painéis, inspetores e outras janelas desse tipo
sempre “flutuarão” em primeiro plano na janela do documento. Se for cancelada a seleção de um
item nessa lista, a janela do documento poderá ser exibida na frente desse item.
Por exemplo: para que a janela do documento esteja na frente do inspetor de propriedades,
desmarque a opção Propriedades. O inspetor de propriedades aparecerá agora na frente da janela
do documento, apenas quando ele estiver ativo.
Para que a janela do documento esteja na frente de qualquer painel flutuante, incluído na
personalização do Dreamweaver, desmarque Todos os outros painéis.
Observação: A opção Sempre visíveis não se aplicará à área de trabalho integrada quando todos os painéis
estiverem encaixados.
Mostrar os ícones nos painéis e no Iniciadordetermina se a barra do Iniciador será exibida.

Quando essa opção é selecionada, o Iniciador é mostrado na área da barra de status e aparece um
pequeno ícone na guia de cada painel (veja “Sobre a barra de status”, na página 42). Os botões na
barra do Iniciador abrem painéis e inspetores.
Mostrar no iniciador especifica quais itens serão exibidos na barra do Iniciador.
Para especificar quais itens aparecem na barra do Iniciador:
1 Para incluir um item à barra do Iniciador, clique no botão com o sinal de adição (+).
2 Para remover um item da barra do Iniciador, selecione o item e clique no botão com o sinal de
subtração (-).
3 Para alterar a ordem dos itens na barra do Iniciador, selecione um item na lista e clique no
botão de seta.
Por exemplo: para mover um item para a direita na barra do Iniciador, desloque-o para a baixo
na lista.
4 Clique em OK.
A barra do Iniciador se modifica para mostrar os itens especificados.
52 Capítulo 2
Sobre o painel Site
O painel Site permite definir um site, gerenciar os arquivos locais no site, efetuar o upload e
download de arquivos de um site remoto e procurar arquivos no disco local, fora do site. Para
obter detalhes sobre a utilização do painel Site, consulte o Capítulo 4, “Como gerenciar o seu
site”, na página 75.
Sobre o painel Histórico

O painel Histórico mostra a lista de etapas realizadas no documento ativo desde que foi criado ou
aberto, até um número máximo especificado de etapas (o painel Histórico não mostra as etapas
realizadas em outras molduras, janelas de documento ou no painel Site). Ele permite desfazer uma
ou mais etapas, executá-las novamente e criar novos comandos para automatizar tarefas
repetitivas.
Etapas
Controle deslizante (polegar)
botão Salvar como comando

botão Executar
novamente botão Copiar as etapas
O botão deslizante (polegar) do painel Histórico indica inicialmente a última etapa efetuada.
Utilização do painel Histórico

O painel Histórico controla cada etapa do seu trabalho no Dreamweaver. Utilize o painel
Histórico para desfazer diversas etapas simultaneamente.
Se desejar desfazer a última operação realizada em um documento, escolha Editar > Desfazer,
como em qualquer outro aplicativo. O nome do comando Desfazer no menu Editar será alterado,
refletindo a última operação efetuada.
O painel Histórico também permite executar novamente etapas já realizadas e automatizar tarefas,
através da criação de novos comandos. Para obter mais informações, veja “Como automatizar as
tarefas”, na página 129.
Para abrir o painel Histórico:
Escolha Janela > Outros > Histórico.
Para desfazer a última etapa:
Arraste o controle deslizante do painel Histórico uma etapa acima na lista. Esta ação provoca o mesmo
efeito que a seleção de Editar > Desfazer.
A etapa desfeita aparecerá acinzentada.

Para desfazer várias etapas simultaneamente, siga um dos procedimentos abaixo:
• Arraste o controle deslizante até que indique uma etapa.

• Clique à esquerda de uma etapa, ao longo do caminho do controle deslizante; este rolará
automaticamente até a etapa, desfazendo as etapas durante a rolagem.
Observação: Para rolar automaticamente até uma determinada etapa, clique à esquerda da mesma; o clique em
uma etapa seleciona-a. A seleção de uma etapa é diferente da volta à etapa no histórico dos comandos Desfazer.
Da mesma maneira que uma única etapa não pode ser refeita, se várias etapas forem desfeitas, não
será mais possível refazê-las depois de efetuar uma nova ação no documento, já que elas
desaparecerão do painel Histórico.
Para definir o número de etapas que o painel Histórico manterá e mostrará:
1 Escolha Editar > Preferências e em seguida Geral, na lista de categorias.

2 Digite o Número máximo de etapas da paleta de histórico.
O valor padrão deve ser suficiente para a maioria dos usuários. Quanto mais alto for o número,
maiores serão os requisitos de memória do painel Histórico. Isso poderá afetar o desempenho e
diminuir significativamente a velocidade do computador. Quando o painel Histórico atingir o
número máximo de etapas, as primeiras etapas serão descartadas.
Observação: Não é possível reordenar as etapas no painel Histórico. Não imagine o painel Histórico como uma
coleção arbitrária de comandos; considere-o como uma maneira de visualizar as etapas já realizadas, na ordem em
que foram executadas.
Para apagar a lista de histórico do documento atual:
No menu contextual do painel Histórico, escolha Limpar o histórico.

Esse comando também limpará todas as informações relacionadas aos comandos Desfazer do
documento; depois de escolher Limpar o histórico, não será mais possível desfazer as etapas que
tiverem sido limpas (observe que o comando Limpar o histórico não refaz as etapas; ele
simplesmente remove o registro das etapas da memória do Dreamweaver).
Sobre o Painel de respostas

O Painel de respostas fornece acesso rápido a informações que o ajudam a trabalhar de modo
eficaz com o Dreamweaver. Ele inclui tutoriais, Notas técnicas, as extensões do Dreamweaver e
outros conteúdos úteis.
Para obter as informações mais recentes sobre o Dreamweaver no site macromedia.com, clique no
botão Atualizar.
54 Capítulo 2
Utilização do Dreamweaver com outros aplicativos
O Dreamweaver adapta o seu desenho da Web e o processo de desenvolvimento, facilitando,
assim, o trabalho com outros aplicativos. Para obter informações sobre o trabalho com outros
aplicativos, como navegadores, editores de HTML e de imagens, e ferramentas de animação,
consulte os seguintes tópicos:
• Para obter informações sobre a utilização do Dreamweaver com outros editores de HTML,
como HomeSite ou BBEdit, veja “Utilização de um editor de HTML externo com o
Dreamweaver”, na página 198.
• É possível especificar os navegadores preferidos para visualizar o site. Veja “Como visualizar as
páginas nos navegadores”, na página 502.
• Um editor de imagens externo, como o Macromedia Fireworks, pode ser iniciado no
Dreamweaver. Veja “Utilização de um editor de imagens externo”, na página 326.
• É possível configurar o Dreamweaver para que inicie um editor diferente, de acordo com o tipo
de arquivo. Veja “Como iniciar um editor externo para arquivos de mídia”, na página 346.
• Para obter informações sobre a inclusão de interatividade no seu site utilizando o Macromedia
Flash, veja “Sobre o conteúdo Flash”, na página 348.
• Para saber como adicionar animações no seu site utilizando os filmes Macromedia Shockwave,
veja “Como inserir filmes Shockwave”, na página 353.
• Para obter informações sobre a utilização do ColdFusion, consulte o Capítulo 6,
“Configuração de um aplicativo para a Web”, na página 137.
Personalização do Dreamweaver: Princípios básicos

Existem algumas técnicas básicas que podem ser utilizadas para personalizar o Dreamweaver, de
modo a adequá-lo às suas necessidades, sem precisar conhecer códigos complexos ou saber como
editar arquivos de texto. Por exemplo: é possível definir preferências, criar os seus próprios atalhos
de teclado e adicionar extensões ao Dreamweaver.
Para obter informações sobre a personalização dos arquivos de configuração manualmente, veja
“Customizing Dreamweaver” no Centro de suporte da Macromedia, em http://
www.macromedia.com/go/customizing_dreamweaver (em inglês).
Definição das preferências

O Dreamweaver oferece definições de preferências que controlam a aparência e o comportamento
geral da interface do usuário do programa, bem como as opções relativas a recursos específicos,
por exemplo: camadas, folhas de estilos, exibição de código HTML e JavaScript, editores externos
e visualização nos navegadores. Este guia guia do sistema de ajuda contém informações sobre
determinadas opções das preferências, juntamente com o recurso ou tópico associado.
Este guia descreve apenas as opções mais comuns das preferências. Para obter informações sobre
uma determinada opção das preferências que não conste neste guia, consulte o tópico
correspondente na Ajuda do Dreamweaver.

Definição das preferências gerais
As preferências gerais controlam a aparência do Dreamweaver como um todo. Para alterá-las,
escolha Editar > Preferências ou e, em seguida, clique em Geral. As preferências gerais dividem-se
em duas subcategorias: Opções do documento e de edição. Para obter informações detalhadas
sobre essas preferências, consulte a Ajuda do Dreamweaver.
especifica que o Dreamweaver deve aplicar a tag
A utilização de <strong> e <em> em vez de <b> e <i>
strong sempre que uma ação aplique normalmente a tag b e aplicar tag em sempre que uma ação
colocar a tag i. Essas ações incluem o clique nos botões Negrito e Itálico, no inspetor de
propriedades do texto, e a escolha de Texto > Estilo > Negrito ou Texto > Estilo > Itálico. Para
utilizar as tags b e i nos seus documentos, desmarque esta opção.
Observação: O World Wide Web Consortium não recomenda a utilização das tags b e i; as tags strong e em
fornecem mais informações semânticas do que as tags b e i.
Definição das preferências de fontes

Utilize as preferências de fontes para definir as fontes que o Dreamweaver usará para exibir cada
codificação de fonte. A codificação do documento determina como ele será exibido no navegador.
As definições de fontes do Dreamweaver permitem mostrar uma determinada codificação
utilizando a fonte e o tamanho preferidos, sem afetar a aparência do documento quando for
visualizado por outras pessoas em um navegador. Veja “Configuração de um documento”, na
página 115 para obter informações sobre a definição de uma codificação padrão para novos
documentos.
Para definir as fontes a serem utilizadas no Dreamweaver para cada tipo de codificação:
1 Escolha Editar > Preferências e clique em Fontes, na lista de categorias.

2 Selecione o tipo de codificação (como Ocidental (Latin1) ou Japonês, por exemplo) na lista
Definições de fontes e, em seguida, escolha as fontes a serem utilizadas no Dreamweaver para
essa codificação, nos menus pop-up de fontes situados abaixo da lista Definições de fontes.
Observação: As fontes escolhidas não afetam a aparência do documento no navegador de um visitante do seu
site.
Para obter mais informações sobre as preferências de fontes, consulte a Ajuda do Dreamweaver.
Utilização do editor de atalhos de teclado

Utilize o editor de atalhos de teclado para criar as suas próprias teclas de atalho, editar os atalhos
existentes ou utilizar os conjuntos de atalhos predeterminados.
Observação: Os diagramas que mostram todos os atalhos de teclado na configuração padrão do Dreamweaver
estão disponíveis no site da Macromedia na Web, em http://www.macromedia.com/go/
dreamweaver_mx_shortcuts.
56 Capítulo 2
Para editar os atalhos de teclado:
1 Escolha Editar > Atalhos de teclado.

Será exibida a caixa de diálogo Atalhos de teclado.
botão Conjunto duplicado
botão Excluir o conjunto
botão Salvar como arquivo HTML
botão Renomear o ícone
2 Defina qualquer uma das seguintes opções:

• Conjunto atual permite escolher um conjunto de atalhos predeterminados, incluídos no
Dreamweaver, ou qualquer conjunto personalizado definido pelo usuário. Os conjuntos
predeterminados estão listados no início do menu. Por exemplo: se você estiver familiarizado
com os atalhos do HomeSite ou BBEdit, poderá utilizá-los escolhendo o conjunto
predeterminado correspondente.
• Comandos permite selecionar uma categoria de comandos para editá-los. Por exemplo: é possível
editar os comandos de menu, como Abrir o arquivo, ou um dos comandos de edição de código,
como Ajustar as chaves.
• A lista de comandos exibe os comandos associados à categoria selecionada no menu pop-up
Comandos, assim como os atalhos a eles atribuídos. A categoria Comandos de menu exibe essa
lista como uma visualização hierárquica que reflete a estrutura dos menus. As outras categorias
apresentam listas não-hierárquicas de comandos pelo nome (por exemplo: Sair do aplicativo).
• Atalhos exibe todos os atalhos atribuídos ao comando selecionado.
• Adicionar o item (+) adiciona um novo atalho ao comando. Clique nesse botão para adicionar
uma nova linha em branco na caixa de texto Atalhos. Digite uma nova combinação de teclas e
clique em Alterar, para adicionar um novo atalho de teclado a este comando. Podem ser
atribuídos dois diferentes atalhos de teclado a cada comando; se já existirem dois atalhos
designados para um comando, o botão Adicionar o item não executará nenhuma ação.
• Remover o item (-) remove o atalho selecionado da lista de atalhos.

• Pressione a tecla exibe a combinação de teclas a ser digitada ao adicionar ou alterar um atalho.
• Alterar adiciona a combinação de teclas, mostrada na caixa de texto Pressione a tecla, à lista de
atalhos ou altera o atalho selecionado de modo a refletir a combinação de teclas especificada.
• Duplicar duplica o conjunto atual. Denomine o novo conjunto; o nome padrão é o nome atual
do conjunto acrescido da palavra cópia.
• Renomear renomeia o conjunto atual.
• Salvar como arquivo HTML salva o conjunto atual em um formato de tabela HTML, para fácil
visualização e impressão. É possível abrir o arquivo HTML no navegador e imprimir os atalhos,
para referência rápida.
• Excluir exclui um conjunto (o conjunto ativo não pode ser excluído).
Para remover um atalho de um comando:
1 No menu pop-up Comandos, selecione uma categoria de comando.

A lista Comandos exibe os comandos incluídos na categoria.
2 Na lista Comandos, selecione um comando.
Os atalhos atribuídos ao comando aparecem na caixa de texto Atalhos.
3 Selecione um atalho.
4 Clique no botão Remover o item (-).
Para adicionar um atalho a um comando:

3 Para adicionar um atalho a um comando, siga um dos procedimentos abaixo:
• Se houver menos de dois atalhos atribuídos ao comando, clique no botão Adicionar o item (+).
Será exibida uma nova linha em branco na caixa de texto Atalhos e o ponto de inserção se
moverá para a caixa de texto Pressione a tecla.
• Se houver dois atalhos atribuídos ao comando, selecione um deles (este será substituído pelo
novo atalho). Em seguida, clique na caixa de texto Pressione a tecla.
4 Pressione uma combinação de teclas.
A combinação de teclas será exibida na caixa de texto Pressione a tecla.
Observação: Se ocorrer algum problema com a combinação de teclas (por exemplo: se ela já tiver sido atribuída
a outro comando), será exibida uma mensagem explicativa, logo abaixo do campo Atalhos, e talvez não seja
possível adicionar ou editar o atalho.
5 Clique em Alterar. A nova combinação de teclas será atribuída ao comando.
58 Capítulo 2
Para editar um atalho já existente:

3 Selecione um comando para alterá-lo.
4 Clique na caixa de texto Pressione a tecla e digite uma nova combinação de teclas.
5 Clique no botão Alterar, para alterar o atalho.
Observação: Se ocorrer algum problema com a combinação de teclas (por exemplo: se ela já tiver sido atribuída
a outro comando), será exibida uma mensagem explicativa, logo abaixo do campo Atalhos, e talvez não seja
possível adicionar ou editar o atalho.
Como adicionar extensões no Dreamweaver

As extensões são novos recursos que podem ser facilmente adicionados ao Dreamweaver. É possível
utilizar muitos tipos de extensões; por exemplo: há extensões que permitem reformatar tabelas, efetuar
conexões a bancos de dados auxiliares ou que podem ajudá-lo a escrever scripts para navegadores.
Observação: Para instalar extensões que todos os usuários possam utilizar em um sistema operacional multiusuário, é
necessário ter efetuado login como Administrador. Para obter mais informações sobre os sistemas multiusuário, veja
“Personalização do Dreamweaver nos sistemas multiusuário”, na página 60.
Para ter acesso às mais recentes extensões do Dreamweaver, utilize o site de intercâmbio da
Macromedia na Web, no seguinte endereço: http://www.macromedia.com/br/exchange/
dreamweaver/. Neste site, é possível efetuar o login e o download das extensões (muitas das quais
são gratuitas), participar de grupos de discussão, visualizar as avaliações e críticas dos usuários,
além de instalar e utilizar o Extension Manager. É necessário instalar o Extension Manager antes
de instalar as extensões.
O Extension Manager é um aplicativo independente que permite instalar e gerenciar as extensões
nos aplicativos da Macromedia. Inicie o Extension Manager no Dreamweaver escolhendo
Comandos > Gerenciar extensões.
Para instalar e gerenciar as extensões:
1 No site do Macromedia Exchange na Web, clique no link de download de uma extensão.

O seu navegador poderá permitir escolher e abri-la diretamente no site ou salvá-la em disco.
• Se a extensão for aberta diretamente no site, o Extension Manager executará a instalação
automaticamente.
• Se a extensão for salva no disco, um bom local para salvar o arquivo do pacote de extensão (.mxp)
é a pasta Downloaded Extensions, na pasta do aplicativo Dreamweaver do computador.
2 Clique duas vezes no arquivo do pacote de extensão ou abra o Extension Manager e escolha
Arquivo> Instalar a extensão.
A extensão será instalada no Dreamweaver. Algumas extensões não estão acessíveis enquanto o
Dreamweaver não for reiniciado; é possível que haja uma solicitação para que você saia do
aplicativo e o reinicie.
Utilize o Extension Manager para remover extensões ou ver mais informações sobre uma
determinada extensão.

Personalização do Dreamweaver nos sistemas multiusuário
O Dreamweaver pode ser personalizado para atender às suas necessidades mesmo em um sistema
operacional multiusuário, como o Windows NT, Windows 2000 ou Windows XP, e impede que a
configuração personalizada de um usuário afete qualquer outra. Para que isso ocorra, na primeira
execução do Dreamweaver em um sistema operacional multiusuário que o reconheça, o aplicativo
criará cópias de vários arquivos de configuração para você. Esses arquivos de configuração são
armazenados em uma pasta que lhe pertence. Por exemplo: no Windows XP, eles são armazenados
em C:\Documents and Settings\username\Application Data\Macromedia\Dreamweaver
MX\Configuration (que pode estar dentro de uma pasta oculta).
Observação: Em sistemas operacionais mais antigos (Windows 98 e Windows ME), todos os usuários
compartilham um único conjunto de arquivos de configuração do Dreamweaver, mesmo que o sistema esteja
configurado para oferecer suporte a vários usuários.
Se o Dreamweaver for reinstalado ou atualizado, ele fará automaticamente cópias de segurança

dos arquivos de configuração do usuário existentes de modo que, se eles tiverem sido
personalizados manualmente, o usuário ainda terá acesso às alterações efetuadas.
60 Capítulo 2
CAPÍTULO 3
Como planejar e configurar o seu site
Um site da Web é um conjunto de documentos vinculados com atributos compartilhados, como

tópicos relacionados, uma concepção semelhante ou uma finalidade compartilhada.
O Macromedia Dreamweaver MX é uma ferramenta de criação e gerenciamento de sites que pode
ser utilizada para criar sites da Web completos, além de documentos individuais. Para obter os
melhores resultados, projete e planeje o seu site da Web antes de criar qualquer página contida
nele.
Observação: Se não quiser aguardar até a criação dos documentos, tente utilizar algumas das ferramentas de
criação de documentos do Dreamweaver, para criar um exemplo de documento (consulte “Como criar um novo
documento em branco”, na página 117). Mas não tente criar os documentos definitivos antes de configurar o site.
A primeira etapa da criação de um site da Web é o planejamento (consulte “Sobre o planejamento

e projeto de sites”, na página 61). A etapa seguinte envolve a configuração da estrutura básica do
site (consulte “Como configurar um site do Dreamweaver”, na página 66). Ao iniciar a criação do
conteúdo do site, considere a possibilidade de baseá-lo em um modelo do Dreamweaver (consulte
“Sobre os modelos do Dreamweaver”, na página 472 e “Como criar um modelo no
Dreamweaver”, na página 477).
Se você já tiver um site em um servidor da Web e desejar utilizar o Dreamweaver para editá-lo,
consulte “Como editar um site do Dreamweaver”, na página 72.
Este capítulo inclui as seguintes seções:
“Sobre o planejamento e projeto de sites”, na página 61
“Como configurar um site do Dreamweaver”, na página 66
“Como configurar uma pasta local”, na página 67
“Como configurar uma pasta remota”, na página 69
“Como editar um site do Dreamweaver”, na página 72
“Como editar os sites da Web já existentes no Dreamweaver”, na página 72
Sobre o planejamento e projeto de sites

No Dreamweaver, o termo site pode se referir a um site da Web ou a um local de armazenamento
de documentos pertencentes a um site da Web. Ao iniciar a criação de um site da Web, é
necessário seguir uma série de etapas de planejamento para assegurar que o seu site funcionará.
Mesmo se estiver criando apenas uma home page pessoal a ser visitada apenas por amigos e
família, é recomendável planejar o site com cuidado, para assegurar que todos poderão utilizá-lo
com sucesso.
61
Como determinar os seus objetivos
A decisão de quais serão os objetivos do seu site é a primeira etapa na criação de um site da Web.
Consulte o cliente sobre o site que ele deseja. O que pretende atingir com um site da Web? Tome
nota de seus objetivos, para que se lembre deles durante o processo de criação. Os objetivos
ajudam a concentrar e destinar o site da Web às suas necessidades particulares.
Um site da Web que divulga notícias sobre um tema específico deve ter aparência e navegação
diferentes de um site da Web destinado a vender produtos. A complexidade dos seus objetivos
afetará a navegação, as ferramentas de criação a serem utilizadas (Flash, Director e assim por
diante) e até mesmo a aparência e impressão causadas pelo site.
Como escolher um público-alvo

Após decidir o que deseja alcançar com o seu site da Web, você precisará decidir quem deseja que
o visite. Esta pode ser uma pergunta pouco importante, já que a maioria das pessoas deseja que
todo mundo visite o seu site da Web. No entanto, é difícil criar um site da Web que todas as
pessoas do mundo irão utilizar. As pessoas utilizam navegadores diferentes, se conectam em
velocidades diferentes e podem ou não possuir plug-ins de mídia. Todos estes fatores podem afetar
o uso do seu site. Por estes motivos, você precisa determinar o seu público-alvo.
Pense nas pessoas que serão atraídas ao seu site da Web ou quem espera atrair. Que tipos de
computadores você acredita que elas usarão? Qual será a plataforma predominante (Macintosh,
Windows, Linux e assim por diante)? Qual é a velocidade de conexão média (modem 33,6 ou
DSL)? Que tipos de navegadores e tamanhos de monitores estas pessoas estarão utilizando? Você
está criando um site de intranet onde todos estarão utilizando o mesmo sistema operacional de
computador e o mesmo navegador? Todos estes fatores podem afetar muito a aparência que a sua
página da Web terá para os visitantes.
Depois de ter escolhido o seu público e determinado que tipos de computadores, velocidades de
conexão e navegadores os seus visitantes utilizarão, inicie o seu projeto.
Digamos, por exemplo: que o seu público-alvo seja composto predominantemente de usuários do
Windows que possuem monitores de 17 polegadas e utilizam a versão 3.0 ou mais avançada do
Internet Explorer. À medida que projetar a sua página da Web, você deverá testar o
funcionamento do site no Internet Explorer num computador com Windows e um tamanho de
tela de 800 por 600 pixels. É pouco provável que haja visitantes utilizando o Netscape Navigator
na plataforma Macintosh, mas você deve assegurar que o seu site funcione nestes tipos de
computadores mesmo assim, até mesmo se a exibição não for exatamente a mesma que a do
público-alvo.
Como criar sites compatíveis com o navegador

Ao criar um site, você deve se lembrar de que há vários navegadores da Web que poderão ser utilizados
pelos seus visitantes. Se possível, desenhe sites com ampla compatibilidade com o navegador, levando
em consideração as outras restrições do projeto.
São utilizados cerca de 25 navegadores da Web diferentes, sendo que a maioria deles foi lançada em
mais de uma versão. Mesmo que você vise apenas o Netscape Navigator e o Microsoft Internet
Explorer, que são utilizados pela maioria dos usuários da Web, lembre-se de que nem todos têm a
versão mais recente desses navegadores. Se o site estiver na Web, mais cedo ou mais tarde alguém irá
visitá-lo utilizando o Netscape Navigator 2.0, o navegador que a AOL fornece aos seus clientes ou
algum navegador somente de texto como o Lynx.
62 Capítulo 3
Em algumas circunstâncias, não é necessário criar sites compatíveis com diversos navegadores. Por
exemplo: se o site estiver disponível apenas na intranet de sua empresa e você souber que todos os
funcionários utilizam o mesmo navegador, é possível otimizar o site de modo a ser compatível
com esse navegador. Da mesma forma, se for criado conteúdo HTML para ser distribuído em
CD-ROM junto com um determinado navegador, é razoável supor que todos os seus clientes
terão acesso a esse navegador.
Na maioria dos sites da Web projetados para visitas públicas, é conveniente torná-los visualizáveis
no maior número possível de navegadores. Escolha um ou dois navegadores como principais e
desenhe o site visando-os, mas tente explorar o site com outros navegadores de vez em quando, para
evitar incluir muito conteúdo incompatível. Também é possível enviar uma mensagem para um
grupo de discussão, solicitando-lhes que visualizem o seu site. Esta pode ser uma boa maneira de
obter comentários de um público variado.
Quanto mais sofisticado for o site termos de layout, animação, conteúdo de multimídia e
interação, menor será a probabilidade de que seja compatível com diversos navegadores. Nem
todos os navegadores podem executar o JavaScript, por exemplo. Uma página contendo texto
simples que não utiliza caracteres especiais será exibida sem problemas em qualquer navegador,
porém essa página parecerá menos atraente do que aquelas que contêm imagens, layout e forem
interativas. Tente equilibrar o projeto, para obter o máximo de efeito e compatibilidade com
diferentes navegadores.
Um procedimento útil consiste em fornecer várias versões de certas páginas importantes, como a
home page do site. Por exemplo: é possível desenhar uma versão dessa página com molduras e
outra sem molduras. Você poderá incluir na sua página da Web um comportamento para
direcionar automaticamente os visitantes que não dispuserem de navegadores com suporte a
molduras para a versão sem molduras. Para obter mais informações, consulte “Como utilizar as
ações de comportamentos enviadas com o Dreamweaver”, na página 381.
Como organizar a estrutura do site

O cuidado na organização do site desde o início pode, posteriormente, evitar frustrações e
economizar tempo. Se começar a criar documentos sem pensar em que local da hierarquia da
pasta eles deverão ser armazenados, é possível que você tenha que lidar com uma pasta de difícil
acesso e com demasiados arquivos, ou que os arquivos relacionados estejam espalhados em várias
pastas com nomes semelhantes.
Em geral, a configuração de um site envolve a criação de uma pasta no disco local, que contém todos
os arquivos do site (conhecido como o site local), e a criação e edição de documentos contidos nesta
pasta. Quando o site estiver pronto para ser publicado e visualizado pelo público, estes arquivos
poderão, então, ser copiados para um servidor da Web. Esta abordagem é melhor do que criar e
editar os arquivos no próprio site público ativo da Web, pois ela permite testar as alterações no site
local antes de torná-las publicamente visualizáveis e, em seguida, quando o site estiver finalizado,
efetuar o upload dos arquivos locais e atualizar todo o site público de uma vez só.
Para coordenar o site local com o Dreamweaver, consulte “Como configurar um site do
Dreamweaver”, na página 66. Depois que o site local tiver sido configurado com o Dreamweaver,
você poderá, entre outras coisas, gerenciar os arquivos do site, manter um registro dos links e
atualizar as páginas com mais facilidade.
Como planejar e configurar o seu site 63

Classifique o site em categorias Coloque na mesma pasta as páginas que se relacionarem. Por
exemplo: todos os press releases, informações de contato e oportunidades de empregos em sua
empresa poderão ser armazenados em uma pasta, enquanto que as páginas relativas ao seu
catálogo on-line poderão ser armazenadas em outra pasta. Sempre que necessário, utilize
subpastas. Este tipo de organização facilitará a manutenção e navegação do seu site.
Decida onde serão armazenados itens como imagens e arquivos de som Por exemplo: é
conveniente colocar todas as imagens em um único local, para facilitar a localização das mesmas
quando forem inseridas em uma página. Algumas vezes, os criadores colocam todos os itens
destinados a um site e que não forem HTML em uma pasta denominada Propriedades. É possível
que esta pasta contenha outras pastas (para imagens, filmes Shockwave e arquivos de som, por
exemplo). Alternativamente, é possível que haja uma pasta Propriedades para cada grupo de
páginas relacionadas no site, se os diversos grupos não compartilharem muitas propriedades.
SITE REMOTO SITE LOCAL
meu_site1 meu_site2
(pasta raiz) (pasta raiz)
Sobre_a_empresa Sobre_a_empresa
Catálogo Propriedades
Propriedades Catálogo
(do site inteiro)
index.html Propriedades
(home page)
index.html
(home page)
Utilize a mesma estrutura nos sites locais e remotos O site local e o site remoto da Web deverão
ter exatamente a mesma estrutura. Se você criar um site local utilizando o Dreamweaver e, em
seguida, efetuar o upload de tudo para o site remoto, o Dreamweaver se encarregará de duplicar
com exatidão a estrutura local no site remoto.
Como criar a aparência do projeto

Muito tempo será economizado no processo se o seu projeto e layout forem planejados antes de
iniciar o trabalho no Dreamweaver. Pode ser tão simples como criar um desenho de protótipo
numa folha de papel, de acordo com a aparência desejada do layout do site. Uma abordagem mais
avançada seria criar um desenho composto do site, utilizando aplicativos como o Macromedia
FreeHand ou Fireworks. O importante é ter um protótipo do layout e projeto, para que este possa
ser seguido mais tarde, quando o site estiver sendo construído.
64 Capítulo 3
É importante manter a coerência no layout e projeto da sua página. É do seu interesse que os
usuários possam clique nas páginas do seu site sem ficarem confusos, porque todas as páginas têm
uma aparência diferente ou a navegação está posicionada num local diferente em cada página.
Como projetar o esquema de navegação

Um outro aspecto em que o planejamento de sites apresenta vantagens é a navegação. À medida
que cria o seu site, pense na experiência que você deseja proporcionar aos visitantes. Pense em
como um visitante ao seu site poderá se mover de uma área para outra. Considere os seguintes
aspectos:
A informação “Você está aqui” permite aos visitantes saber facilmente onde estão no seu site e
como retornar à página inicial.
O recurso de busca e os índices facilitam a localização de quaisquer informações buscadas
pelos visitantes.
Os comentários fornecem uma maneira através da qual os visitantes podem entrar em contato
com o webmaster (quando necessário) e com outras pessoas relevantes associadas à empresa ou ao
site, caso ocorra qualquer problema com o site.
Projete a aparência da sua navegação. A navegação deve ser coerente no site inteiro. Se uma barra
de navegação for colocada no alto da sua home page, procure mantê-la nesta posição em todas as
páginas vinculadas.
O Dreamweaver possui duas ferramentas de navegação que podem ser utilizadas para criar o
esquema de navegação. Para obter mais informações, consulte “Links e navegação”, na
página 431.
Como planejar e reunir as propriedades

Depois que souber qual será a aparência do projeto e do layout, é possível criar e reunir as
propriedades que serão necessárias. As propriedades podem ser itens como imagens, texto ou
mídia (Flash, Shockwave, entre outros). Antes de começar a desenvolver o site, assegure-se de ter
todos estes itens reunidos e prontos para serem utilizados. Caso contrário, você terá que
interromper o desenvolvimento constantemente para localizar uma imagem ou criar um botão.
Se estiver utilizando imagens de um site de clip-art ou elas estiverem sendo criadas por alguma
outra pessoa, assegure-se de reuni-las e colocá-las numa pasta do site (consulte “Como organizar a
estrutura do site”, na página 63). Se estiver criando as propriedades você mesmo, assegure-se de
criá-las antes de iniciar o desenvolvimento, incluindo todas as imagens necessárias, se estiver
utilizando imagens cambiáveis. Em seguida, organize as propriedades, para que possa acessá-las
facilmente enquanto estiver criando o site no Dreamweaver.
O Dreamweaver pode facilitar a reutilização de layouts e elementos de página em vários tipos de
documentos, através da utilização de modelos e bibliotecas. No entanto, é mais fácil criar novas
páginas com modelos e bibliotecas do que aplicá-los a documentos existentes.
Utilize os modelos,se souber que muitas de suas páginas utilizarão o mesmo layout. Planeje e
projete um modelo para tal layout e, em seguida, você poderá criar novas páginas a partir do
modelo. Se decidir alterar o layout de todas as páginas, basta alterar o modelo.
Observação: Existem algumas restrições quanto às alterações que podem ser feitas aos documentos que se
baseiam em modelos. O melhor aproveitamento que se pode dar aos modelos ocorre em ambientes de
colaboração, para garantir que todos estejam utilizando o mesmo layout de página. É possível que os itens de
biblioteca ofereçam uma maior flexibilidade de uso fora dos ambientes de colaboração.

Utilize itens de biblioteca, se você já souber que determinadas imagens ou outros elementos
aparecerão em muitas páginas do site. Crie estes elementos com antecedência e transforme-os em
itens de uma biblioteca. Se estes itens forem alterados posteriormente, a nova versão atualizada
aparecerá em todas as páginas que os utilizarem.
Para obter mais informações sobre como reutilizar os layouts e elementos de uma página, consulte
“Como gerenciar as propriedades do site, bibliotecas e modelos”, na página 453.
Como configurar um site do Dreamweaver

Depois de planejar a estrutura do site (consulte “Como organizar a estrutura do site”, na página 63)
ou se já houver um site, designe um novo site no Dreamweaver, para poder passar à criação.
Os sites do Dreamweaver constituem uma maneira de organizar todos os documentos associados
a um site da Web. Encare-os como um projeto. Para cada site da Web a ser criado, é necessário
configurar um site. A organização dos arquivos em um site permite utilizar o Dreamweaver com o
FTP para efetuar o upload do site para o servidor da Web, controlar automaticamente e manter os
links, gerenciar e compartilhar os arquivos. Não é possível fazer uso completo dos recursos do
Dreamweaver, exceto se for definido um site.
Os sites do Dreamweaver consistem de até três partes, dependendo do ambiente e do tipo de site
da Web a ser criado:
• Pasta local é o diretório de trabalho. O Dreamweaver se refere a essa pasta como “site local”.
Para obter mais informações, consulte “Como configurar uma pasta local”, na página 67.
• Pasta remota é onde são armazenados os arquivos, dependendo do ambiente: para teste,
produção, colaboração e assim por diante. O Dreamweaver se refere a essa pasta como “site
remoto”. Para obter mais informações, consulte “Como configurar uma pasta remota”, na
página 69.
• Pasta de páginas dinâmicas é a pasta onde o Dreamweaver processa as páginas dinâmicas. Para
obter mais informações, consulte “Como especificar onde as páginas dinâmicas podem ser
processadas”, na página 144.
Para iniciar o procedimento, configure na íntegra um site do Dreamweaver ou inicie apenas a primeira
etapa, configurando a pasta local. É necessário configurar pelo menos uma pasta local antes de
começar a utilizar o Dreamweaver.
Há duas maneiras de configurar um site do Dreamweaver: utilize o Assistente Definição do site,
que o guiará através do processo de configuração, ou as definições avançadas de Definição do site,
que permitem configurar cada pasta local, remota e de teste, conforme a necessidade.
Para configurar um site do Dreamweaver:
1 Selecione Site > Novo site.

Aparecerá a caixa de diálogo Definição do site.
2 Clique na guia Básico, para utilizar o Assistente Definição do site, ou na guia Avançado, para
utilizar as definições avançadas.
66 Capítulo 3
3 Conclua o processo de configuração do site do Dreamweaver:
• No Assistente Definição do site, responda às perguntas e clique em Avançar, para continuar o
processo de configuração (consulte “Como utilizar o Assistente Definição do site”, na
página 67).
• Nas definições avançadas, preencha os dados nas categorias Informações locais (consulte
“Como configurar uma pasta local”, na página 67), Informações remotas (consulte “Como
configurar uma pasta remota”, na página 69) e Servidor de teste (consulte “Como especificar
onde as páginas dinâmicas podem ser processadas”, na página 144), conforme a necessidade.
Observação: Recomenda-se aos usuários que ainda não conhecem o Dreamweaver que utilizem o Assistente
Definição do site; os usuários mais experientes do Dreamweaver poderão utilizar as definições avançadas.
Como utilizar o Assistente Definição do site

Utilize o Assistente Definição do site para configurar um site do Dreamweaver. O Assistente
Definição do site o guiará através do processo de configuração do site. Esse método é
recomendado aos usuários que ainda não conhecem o Dreamweaver.
O Assistente possui três seções. Dependendo das definições selecionadas, cada seção apresentará
diversas telas, denominadas partes. As três principais seções incluem os seguintes itens:
• Como editar os arquivos é o local onde se configura a pasta local. Para obter mais informações,
consulte “Como configurar uma pasta local”, na página 67.
• Como testar os arquivos é o local onde se configura uma pasta para que o Dreamweaver
processe páginas dinâmicas. Para obter mais informações, consulte “Como especificar onde as
páginas dinâmicas podem ser processadas”, na página 144.
• Como compartilhar os arquivosé o local onde se configura a pasta remota. Para obter mais
informações, consulte “Como configurar uma pasta remota”, na página 69.
O nome da seção em negrito, situado no alto da caixa de diálogo, indica o ponto do processo de
configuração. Talvez não haja necessidade de configurar as pastas nas três seções. Cada seção fará
perguntas, com o objetivo de auxiliá-lo a determinar as suas necessidades.
Para utilizar o Assistente Definição do site para configurar um site do Dreamweaver:
1 Selecione Site > Novo site.

2 Clique na guia Básica, para utilizar o Assistente Definição do site.
3 Responda às perguntas de cada tela e, em seguida, clique em Avançar, para prosseguir. Clique
em Voltar, para retornar a uma tela anterior, se necessário.
Como configurar uma pasta local

A pasta local é o diretório de trabalho do site do Dreamweaver (consulte “Como configurar um
site do Dreamweaver”, na página 66). Essa pasta pode estar no computador local ou em um
servidor da rede. Ela é o local onde são armazenados os arquivos “em andamento” de um site do
Dreamweaver.
Os sites do Dreamweaver são estabelecidos com a configuração de uma pasta local. Também é
possível adicionar pastas remotas e de teste (consulte “Como configurar uma pasta remota”, na
página 69 e “Como criar uma pasta raiz para o aplicativo”, na página 142), mas é necessário
configurar pelo menos uma pasta local para poder começar a projetar sites no Dreamweaver.

Como configurar uma pasta local:
1 Escolha Site > Novo site.

2 Clique no botão Avançado, se as definições avançadas não estiverem sendo exibidas.
A guia Avançado da caixa de diálogo Definição do site exibirá as opções da categoria
Informações locais.
3 Digite as opções de Informações locais.

Para obter mais informações, clique no botão Ajuda da caixa de diálogo.
4 Clique em OK.
O Dreamweaver criará o cache inicial do site e o novo site do Dreamweaver aparecerá no painel
Site. Para obter mais informações sobre o painel Site e o gerenciamento do site, consulte
“Como gerenciar o seu site”, na página 75.
Posteriormente, quando o site estiver pronto para ser publicado em um servidor remoto, inclua
informações adicionais relacionadas ao site. Para obter informações, consulte “Como configurar
uma pasta remota”, na página 69.
68 Capítulo 3
Como configurar uma pasta remota
Depois que você tiver configurado uma pasta local de um site do Dreamweaver (consulte “Como
configurar uma pasta local”, na página 67), configure uma pasta remota. As pastas local e remota
permitem transferir arquivos entre o disco local e o servidor da Web, o que facilita o
gerenciamento de arquivos dos sites do Dreamweaver.
Dependendo do ambiente de criação, a pasta remota receberá os arquivos para teste, colaboração,
produção, disposição ou outros tipos de atividades. Normalmente, a pasta remota está situada no
computador onde estiver em execução o servidor da Web.
Observação: Não será necessário especificar uma pasta remota, se a pasta que tiver sido especificada como pasta
local, na categoria Informações locais (consulte “Como configurar uma pasta local”, na página 67), for a mesma
pasta que tiver sido criada para os arquivos do site no sistema que estiver executando o servidor da Web. Isso
implica que o servidor da Web está em execução no computador local.
Determine como se dará o acesso à pasta remota e tome nota das informações de conexão.
Quando terminar de reunir essas informações, utilize o comando Editar os sites, para configurar a
pasta remota. Caso você tenha problemas, consulte “Como solucionar problemas de configuração
da pasta remota”, na página 71.
Depois que a pasta remota estiver configurada, conecte-se à mesma, procure e gerencie os arquivos
do site do Dreamweaver. Se você estiver criando um site dinâmico, precisará adicionar uma pasta
para processar as páginas dinâmicas (consulte “Como especificar onde as páginas dinâmicas
podem ser processadas”, na página 144).
Para configurar uma pasta remota:
1 Escolha Site> Editar os sites.

Aparecerá a caixa de diálogo Editar os sites.
2 Selecione um site do Dreamweaver já existente.
Se não houver sites do Dreamweaver definidos, crie uma pasta local antes de continuar
(consulte “Como configurar uma pasta local”, na página 67).
3 Clique em Editar.
4 Se o Dreamweaver exibir o Assistente Definição do site, clique no botão Avançado.
5 Selecione Informações remotas, na lista de categorias à esquerda.
6 Escolha uma opção de acesso.
7 Clique em OK.
Para se conectar a uma pasta remota:
No painel Site, escolha Site > Conectar, ou clique no botão Conectar ao host remoto, na barra de
ferramentas do painel Site.
Observação: Se o site utilizar FTP com SSH para acessar a pasta remota, quando você tentar estabelecer a conexão
com o servidor remoto, um prompt de comando solicitará o seu logon no servidor SSH. Depois que efetuar o logon,
clique em OK, na caixa de diálogo do Dreamweaver.

Para se desconectar de uma pasta remota:
No painel Site, escolha Site > Desconectar, ou clique no botão Desconectar, na barra de ferramentas
do painel Site.
Como escolher o diretório do host para acesso via FTP

Se optar pelo FTP para acessar a pasta remota (consulte “Como configurar uma pasta remota”, na
página 69), será necessário determinar o diretório do host desta. O diretório do host especificado
deverá corresponder à pasta raiz da pasta local. O diagrama a seguir mostra um exemplo de pasta
local, à esquerda, e um exemplo de pasta remota, à direita.
não diretório de logon

(neste caso, não pode
ser o diretório do host)
site local sim Público_html

(pasta raiz) (deveria ser o diretório do host)
Propriedades não Propriedades

(não pode ser o
diretório do host)
HTML HTML
Se a estrutura do site não coincidir com a da pasta local, o Dreamweaver carregará os arquivos
para o local incorreto e estes não estarão visíveis para os visitantes do site. Os caminhos até as
imagens e os links também se romperão.
É necessário que o diretório raiz remoto exista, para que o Dreamweaver possa se conectar a ele. Se
não houver um diretório raiz correspondente à pasta remota, solicite ao administrador do servidor
que crie um ou faça-o você próprio.
Se estiver em dúvida sobre o que digitar na caixa de texto Diretório do host, entre em contato com
o administrador do servidor ou tente deixar a caixa de texto em branco. Em alguns servidores, o
diretório raiz será idêntico àquele com o qual você estabeleceu a primeira conexão com o FTP.
Para descobrir isso, conecte-se ao servidor. Se aparecer uma pasta com um nome semelhante a
public_html, ou www ou o seu nome de logon na visualização de arquivos remotos, no painel
Site, este será provavelmente o diretório a ser utilizado na caixa de texto Diretório do host.
Como utilizar o Secure Shell para obter acesso via FTP

Na caixa de diálogo Definição do site, quando você selecionar FTP para acessar a pasta remota,
terá a opção de utilizar o SSH (Secure Shell). Para ativar o SSH no Windows e clique no botão
Ajuda desta caixa de diálogo.
Para utilizar o SSH no Macintosh, efetue o download do cliente de SSH para Macintosh, no site
do Centro de suporte do Dreamweaver na Web: http://www.macromedia.com/br/support/.
70 Capítulo 3
Como solucionar problemas de configuração da pasta remota
Um servidor da Web pode ser configurado de várias maneiras. A lista a seguir contém informações
sobre algumas questões comuns que podem ocorrer durante a configuração de uma pasta remota e
como solucioná-las.
• É possível que a implementação de FTP do Dreamweaver não funcione corretamente em
determinados servidores proxy, firewalls em muitos níveis e outras formas de acesso indireto ao
servidor.
Caso você tenha problemas com o acesso de FTP, peça ajuda ao administrador de sistemas
local.
• Para efetuar a implementação de FTP do Dreamweaver, é necessário estabelecer conexão com a
pasta raiz do sistema remoto. Em muitos aplicativos, é possível conectar-se a qualquer diretório
remoto e, em seguida, navegar pelo sistema de arquivos remotos, para localizar o diretório
desejado.
Certifique-se de indicar a pasta raiz do sistema remoto como diretório do host.
Se estiverem ocorrendo problemas na conexão e o diretório do host tiver sido especificado com
uma barra inclinada simples (/), é possível que você precise especificar um caminho relativo do
diretório ao qual estiver se conectando, assim como a pasta raiz remota.
Por exemplo: se a pasta raiz remota for um diretório de nível mais elevado, é possível que você
precise especificar ../../ correspondente ao diretório do host.
• Os nomes de pastas e arquivos que contêm espaços e caracteres especiais geralmente causam
problemas quando são transferidos para um site remoto.
Utilize sinais de sublinhado em vez de espaços e evite os caracteres especiais nos nomes de
arquivos e pastas, sempre que possível. Em particular, dois pontos, barras inclinadas, pontos e
apóstrofes nos nomes de arquivos ou pastas podem causar problemas. Ocasionalmente, os
caracteres especiais em nomes de pastas ou arquivos também podem impedir que o
Dreamweaver crie um mapa do site.
• Se ocorrerem problemas com nomes longos de arquivos, renomeie-os com designações mais
curtas.
• Observe que muitos servidores podem utilizar links simbólicos (no UNIX), atalhos (no
Windows) para conectar uma pasta em uma parte do disco do servidor a uma outra que esteja
em uma localização diferente.
Por exemplo: o subdiretório public_html do seu diretório principal no servidor pode ser, na
verdade, um link para outra parte do servidor. Na maioria dos casos, esses apelidos não
provocam qualquer efeito sobre a possibilidade de conexão à pasta ou diretório adequado, mas
se for possível conectar-se a uma parte do servidor mas não a outras, pode ocorrer uma
discrepância devida ao apelido.
• Caso apareça uma mensagem de erro como: “não é possível colocar o arquivo”, é possível que
não haja espaço na pasta remota. Verifique o registro do FTP, para obter informações mais
detalhadas.
Em geral, quando ocorrer um problema em uma transferência de FTP, examine o registro do FTP,
escolhendo Janela > Resultados > Registro de FTP do site, no painel Site.

Como editar um site do Dreamweaver
Utilize as definições avançadas de Definição do site para editar os sites do Dreamweaver.
Para editar um site do Dreamweaver, siga um dos procedimentos abaixo:
• Escolha Site > Editar os sites, selecione um site e, em seguida, clique em Editar.
• Escolha Site > Abrir o site e, em seguida, selecione um site.
Como editar os sites da Web já existentes no Dreamweaver

Utilize o Dreamweaver para editar sites existentes, mesmo se o site original não tiver sido criado
no Dreamweaver. É possível editar os sites existentes no sistema local ou em um sistema remoto.
Como editar um site local da Web já existente no Dreamweaver

É possível utilizar o Dreamweaver para editar um site da Web já existente no disco local, mesmo
se o site original não tiver sido criado no Dreamweaver.
Para editar um site local da Web já existente:
1 Abra a caixa de diálogo Definição do site, seguindo um dos procedimentos abaixo:

• Escolha Site > Editar os sites e, em seguida, clique em Novo.
• Escolha Site > Abrir o site > Definir os sites.
A caixa de diálogo Definição do site exibirá as opções de Informações locais.
2 Preencha a caixa de diálogo.
3 Clique em OK.
72 Capítulo 3
Como editar um site remoto da Web já existente no Dreamweaver
É possível utilizar o Dreamweaver para copiar um site remoto já existente (ou um ramo deste)
para o disco local e editá-lo aí, mesmo se o site original não tiver sido criado no Dreamweaver.
Mesmo se pretender editar apenas uma parte do site remoto, duplique localmente toda a estrutura
da ramificação do site remoto, desde a raiz do mesmo até os arquivos a serem editados.
Por exemplo: se a pasta raiz do site remoto (denominada public_html) contiver duas pastas
(Projeto1 e Projeto2) e você desejar trabalhar apenas com os arquivos HTML no Projeto1, não
haverá necessidade de efetuar o download dos arquivos do Projeto2, porém será necessário mapear
a pasta raiz local para public_html, em vez de Projeto1.
SITE REMOTO SITE LOCAL
público_html pasta raiz local

(mapeie-a como público_html,
não como Projeto1 ou Projeto2/HTML)
Projeto1
Projeto1
(deve estar presente no site local;
corresponde a Projeto1 no site remoto)
Propriedades
HTML
(deve estar presente no
HTML
site local; corresponde a
Projeto1/HTML no site remoto)
Projeto2
Propriedades
HTML
Para editar um site remoto já existente:
1 Crie uma pasta local que abrigará o site existente e defina-a como sendo a pasta raiz local do
site (consulte “Como configurar uma pasta local”, na página 67).
2 Defina uma pasta remota utilizando as informações sobre o site já existente (consulte “Como
configurar uma pasta remota”, na página 69). Certifique-se de escolher a pasta raiz correta para
o site remoto.
3 Clique no botão Conectar, no painel Site, para se conectar ao site remoto.

4 Dependendo da extensão do site remoto a ser editada, siga um dos procedimentos abaixo:
• Se desejar trabalhar com o site inteiro, selecione a pasta raiz do site remoto e clique em Obter,
para efetuar o download do site inteiro no disco local.
• Se desejar trabalhar apenas com um dos arquivos ou pastas do site, localize-o na visualização
remota do painel Site e clique em Obter o(s) arquivo(s), para efetuar o seu download no disco
local.
O Dreamweaver duplicará automaticamente o quanto for possível a estrutura do site remoto,
posicionando o arquivo do qual se fez download na porção adequada da hierarquia do site. Ao
editar apenas uma parte de um site, opte preferencialmente por incluir os arquivos
dependentes.
5 Prossiga como se estivesse criando um site a partir do zero: edite os documentos, visualize e
teste-os, e carregue-os novamente para o site remoto.
74 Capítulo 3
CAPÍTULO 4
Como gerenciar o seu site
O Macromedia Dreamweaver MX ajuda a organizar os arquivos nas pastas local e remota

(também denominadas sites), através do painel Site. Ele permite duplicar a estrutura da pasta local
em um servidor remoto ou de uma pasta remota no seu sistema local. Os links relativos criados no
site local continuarão a funcionar após a transferência de arquivos para o site remoto, porque a
estrutura dos dois sites será idêntica.
Um site local é criado no Dreamweaver utilizando o comando Novo site, que cria a pasta raiz local
do site, ou transformando uma pasta existente em pasta raiz local (consulte “Como configurar
uma pasta local”, na página 67). Ao criar um novo site, você estará definindo um site remoto. É
possível adicionar essas informações posteriormente, utilizando o comando Editar os sites
(consulte “Como configurar uma pasta remota”, na página 69).
O Dreamweaver apresenta alguns recursos para gerenciar um site e transferir arquivos de e para
um servidor remoto. Quando os arquivos são transferidos entre os sites locais e remotos, o
Dreamweaver mantém paralelas as estruturas de pastas e arquivos entre estes sites. Ao transferir
arquivos entre os sites, o Dreamweaver automaticamente criará as pastas necessárias, se ainda não
exisitirem em um dos sites. Os arquivos dos sites locais e remotos também podem ser
sincronizados; conforme a necessidade, o Dreamweaver copia os arquivos em ambas as direções, e
remove os arquivos inúteis, se houver algum.
O Dreamweaver contém recursos para facilitar o trabalho de colaboração em sites da Web. É
possível retirar e devolver os arquivos a um servidor remoto, de maneira que os outros membros
de uma equipe da Web possam saber quem está trabalhando em um determinado arquivo. É
possível adicionar Design Notes aos arquivos, para compartilhar informações com os membros da
equipe sobre o status e prioridade de um arquivo, e assim por diante. Também é possível utilizar o
recurso Relatórios de fluxo de trabalho, para executar relatórios relativos ao site, exibir
informações sobre o status das retiradas e devoluções de arquivos e procurar as Design Notes
anexadas aos arquivos.
Uma vez que o site tiver sido publicado, qualquer pessoa de sua equipe poderá continuar a mantê-
lo. Antes e após a publicação do site, é recomendável manter um procedimento contínuo para a
resolução de quaisquer problemas encontrados no site (para obter mais informações, consulte
“Como testar um site”, na página 499).
75
• “Sobre o painel Site”, na página 76
• “Sobre o mapa do site”, na página 86
• “Como importar e exportar sites”, na página 92
• “Como remover um site da lista de sites”, na página 93
• “Como utilizar as opções de devolução e retirada de arquivos”, na página 94
• “Como obter e colocar arquivos”, na página 97
• “Como sincronizar os arquivos nos sites local e remoto”, na página 100
• “Como encobrir as pastas e os arquivos do site”, na página 101
• “Como utilizar as Design Notes”, na página 105
• “Como utilizar os relatórios para aprimorar o fluxo de trabalho”, na página 109
• “Sobre o painel Sitespring no Dreamweaver”, na página 111
• “Como utilizar o painel Sitespring”, na página 112
Sobre o painel Site

O painel Site permite exibir um site, inclusive todos os arquivos locais, remotos e do servidor de
teste que estiverem associados a ele. O site local aparecerá como padrão. Altere o layout do painel
Site, para exibir o site remoto ou o servidor de teste (consulte “Como alterar o layout do painel
Site”, na página 82). Expanda o painel Site, para obter uma visualização mista (consulte “Como
utilizar o painel Site”, na página 77).
Observação: No Macintosh, o painel Site é sempre exibido na visualização mista (não é fechado).
76 Capítulo 4
Utilize o painel Site para executar as operações padrão de manutenção de arquivos, como, por
exemplo:
• Crie novos documentos HTML
• Exibir, abrir e transferir arquivos
• Crie pastas
• Excluir itens
• Transferir arquivos entre sites locais, remotos e servidores de teste
• Determinar o layout da navegação do site utilizando o mapa do mesmo (consulte “Como
configurar uma pasta remota”, na página 69 e “Como utilizar o mapa do site”, na página 87)
O painel Site contém um navegador de arquivos integrado. Esse navegador de arquivos permite
navegar o disco e a rede local, além do próprio site (consulte “Como utilizar o navegador de
arquivos integrado”, na página 86).
Como utilizar o painel Site

Como padrão, o painel Site está integrado à área de trabalho do Dreamweaver“Exploração da área
de trabalho”, na página 35. Conforme a necessidade, é possível mover, abrir ou fechar o painel
(consulte “Utilização de janelas e painéis no Dreamweaver”, na página 41). Também é possível
expandi-lo, para obter a visualização mista de um site. Na visualização mista, opte por exibir os
sites local e remoto, o servidor de teste ou o mapa do site (“Como alterar o layout do painel Site”,
na página 82).
Para abrir ou fechar o painel Site:
Escolha Janela > Site.
Para expandir ou reduzir o painel Site:
Clique no botão Expandir/Fechar, na barra de ferramentas do painel Site.

Observação: Se você clique no botão Expandir/Fechar para expandir o painel enquanto este estiver encaixado, ele
será maximizado, de modo a impossibilitar o trabalho na janela do documento. Para retornar à janela do documento,
clique novamente no botão Expandir/Fechar, para reduzir o painel. Se você clique no botão Expandir/Fechar para
expandir o painel enquanto este estiver flutuando, ele não sofrerá alterações e você poderá continuar a trabalhar na
janela do documento. É necessário reduzir o painel para poder encaixá-lo novamente.
Utilize os seguintes botões e opções da barra de ferramentas do painel Site, para determinar o que
será exibido nele e para transferir arquivos:
visualização dos arquivos do site Atualizar
Visualização do servidor de teste Obter o(s) arquivo(s)
visualização do mapa do site Colocar o(s) arquivo(s)
Menu pop-up Site Expandir/Fechar

Conectar/desconectar Devolver o(s) arquivo(s)
Retirar o(s) arquivo(s)
Observação: Os botões Arquivos do site, Servidor de teste e Mapa do site aparecerão apenas quando o painel Site
estiver expandido.
Como gerenciar o seu site 77

A visualização dos arquivos do site exibe a estrutura de arquivos do site local e remoto nos painéis
do painel Site. Uma definição de preferência determinará qual site aparecerá nos painéis esquerdo
e direito; consulte “Como definir as preferências do site”, na página 79. A visualização dos
arquivos do site constitui a visualização padrão do painel Site.
A visualização do servidor de teste exibe a estrutura de pastas do servidor de teste e o site local.
A visualização do mapa do site exibe
uma imagem do mapa do site, levando em conta como os
documentos estão vinculados uns aos outros. Mantenha pressionado este botão, para escolher no
menu pop-up a opção Apenas o mapa ou Mapa e arquivos.
O menu pop-up Site lista os sites que tiverem sido definidos. Para alternar entre diversos sites,
escolha um outro site da lista. Para adicionar um site ou editar as informações relativas a um site
existente, escolha Editar os sites, na parte inferior do menu (consulte “Como configurar uma
pasta remota”, na página 69).
Conectar/desconectar (protocolos FTP, RDS e WebDAV e com SourceSafe) conecta-se ou
desconecta-se do site remoto. Como padrão, o Dreamweaver se desconectará do site remoto
depois de 30 minutos de ociosidade (apenas no FTP).
Para alterar o limite de tempo, escolha Editar > Preferências e, em seguida, selecione Site, na lista
de categorias exibida à esquerda.
Atualizar atualiza as listas de diretórios locais e remotos. Utilize esse botão para atualizar manualmente
as listas de diretórios, caso seja cancelada a seleção das opções Atualizar automaticamente a lista de
arquivos locais ou Atualizar automaticamente a lista de arquivos remotos, na caixa de diálogo
Definição do site (consulte “Como configurar uma pasta remota”, na página 69).
Obter o(s) arquivo(s) copia os arquivos selecionados do site remoto ou do servidor de teste para o
site local (substituindo a cópia local do arquivo já existente, se houver). Se a opção Ativar a
devolução e retirada de arquivos estiver ativada, as cópias locais serão somente de leitura; os
arquivos continuarão disponíveis no site remoto, para que outros membros da equipe possam
retirá-los. Se a opção Ativar a devolução e retirada de arquivos estiver desativada, a obtenção de
um arquivo transferirá uma cópia com os privilégios de leitura e gravação.
O Dreamweaver copiará os arquivos que tiverem sido selecionados no painel ativo do painel Site.
Se o painel Remoto ou Servidor de teste estiver ativo, os arquivos remotos ou do servidor de teste
que tiverem sido selecionados serão copiados para o site local; se o painel Local estiver ativo, o
Dreamweaver copiará a versão remota ou do servidor de teste dos arquivos locais selecionados
para o site local. Para obter mais informações, consulte “Como obter arquivos de um servidor
remoto ou de teste”, na página 97.
Observação: É possível obter os arquivos remotos ou do servidor de teste, mas os recursos próprios à devolução e
retirada se aplica apenas aos arquivos remotos.
Colocar o(s) arquivo(s) copia os arquivos selecionados do site local para o site remoto ou para o
servidor de teste.
O Dreamweaver copiará os arquivos que tiverem sido selecionados no painel ativo do painel Site.
Se o painel Local estiver ativo, os arquivos locais que tiverem sido selecionados serão copiados
para o site remoto ou para o servidor de teste; se o painel Remoto ou Servidor de teste estiver
ativo, o Dreamweaver copiará a versão local dos arquivos remotos ou do servidor de teste para o
site remoto. Para obter mais informações, consulte “Como colocar arquivos em um servidor
Observação: É possível colocar os arquivos no servidor remoto ou de teste, mas os recursos próprios à devolução
e retirada se aplica apenas aos arquivos remotos.
78 Capítulo 4
Se você estiver colocando um arquivo que ainda não exista no site remoto e a opção Ativar a
devolução e retirada de arquivos estiver ativa, o Dreamweaver adicionará o arquivo ao site remoto
como “retirado”. Clique no botão Devolver os arquivos, se desejar adicionar um arquivo sem o
status de retirada.
Retirar o(s) arquivo(s) transfere uma cópia do arquivo do servidor remoto para o site local
(substituindo a cópia local do arquivo já existente, se houver) e marca esse arquivo como tendo
sido retirado do servidor. Esta opção não estará disponível se a opção Ativar a devolução e retirada
de arquivos, na caixa de diálogo Definição do site, estiver desativada no site. Para obter mais
informações, veja “Como devolver e retirar os arquivos de um servidor remoto”, na página 95.
Devolver o(s) arquivo(s) transfere uma cópia do arquivo local para o servidor remoto, tornando-o
disponível para edição por outros usuários. O arquivo local se tornará somente de leitura. Esta
opção não estará disponível se a opção Ativar a devolução e retirada de arquivos, na caixa de diálogo
Definição do site, estiver desativada no site. Para obter mais informações, veja “Como devolver e
retirar os arquivos de um servidor remoto”, na página 95.
O botão Expandir/Fechar expande ou fecha o painel Site, exibindo apenas um ou dois painéis.
Como definir as preferências do site

A caixa de diálogo Preferências permite controlar os recursos de transferência de arquivos do
painel Site.
Para editar as preferências do painel Site:
1 Selecione Editar > Preferências.

A caixa de diálogo Preferências é exibida.
2 Selecione Site, na lista de categorias à esquerda.
Aparecerão as opções de preferência do site.

3 Altere as opções conforme a necessidade.
4 Clique em OK.
É possível definir se os tipos de arquivos serão transferidos no formato ASCII (texto) ou binário,
através da personalização do arquivo FTPExtensionMap.txt, na pasta Dreamweaver/
Configuration. Para obter mais informações, consulte “Bem-vindo ao Dreamweaver”, na
página 17.
Como alterar as colunas de visualização de arquivos

É possível personalizar as colunas que serão exibidas nas listas Site local e Site remoto, no painel
Site. Siga qualquer um dos procedimentos abaixo:
• Reordene as colunas
• Adicione novas colunas (dez, no máximo)
• Exclua colunas
• Oculte colunas
• Designe colunas a serem compartilhadas com todos os usuários que estiverem conectados a um
site
As colunas padrão são Nome, Notas, Tamanho, Tipo, Modificado e Retirado por. Para ordenar
segundo qualquer coluna, clique no respectivo cabeçalho, no painel Site. O ato de clique em uma
coluna mais de uma vez inverterá a ordem (ascendente ou descendente) de acordo com a qual o
Dreamweaver a organiza.
Observação: Não é possível excluir ou renomear uma coluna padrão, ou associar uma Design Note à mesma. É
possível alterar a ordenação e o alinhamento das colunas padrão, assim como ocultá-las, com exceção da coluna
Nome, que não pode ser oculta.
80 Capítulo 4
Para adicionar, excluir ou alterar as colunas:
1 No painel Site, siga um dos procedimentos abaixo, para acessar as opções das colunas de
visualização de arquivos:
• Escolha Exibir > Colunas de visualização de arquivos.
• Escolha Site > Editar os sites e, em seguida, clique em Editar. Em seguida, na lista de categorias
à esquerda na caixa de diálogo Definição do site, selecione Colunas de visualização de arquivos.
A caixa de diálogo Definição do site exibirá as opções das colunas de visualização de arquivos.

3 Clique em OK.
Tópico relacionado
“Como alterar o layout do painel Site”, na página 82

Como abrir e exibir os sites no painel Site
Quando o painel Site estiver reduzido, ele exibirá o conteúdo dos sites local e remoto, ou do
servidor de teste como uma lista de arquivos. Quando o painel Site estiver expandido, além do site
local, ele exibirá o site remoto ou o servidor de teste em uma visualização mista. Quando estiver
expandido, o painel Site também pode exibir um mapa visual do site local.
Observação: Para poder exibir um site remoto ou um servidor de teste, é necessário configurá-lo (consulte “Como
configurar uma pasta remota”, na página 69 ou “Como especificar onde as páginas dinâmicas podem ser
processadas”, na página 144). Para poder exibir o mapa de um site, é necessário configurar uma home page
(consulte “Como utilizar o mapa do site”, na página 87).
Para abrir um site existente do Dreamweaver:
No painel Site, selecione um site no menu pop-up Site (esse é o local onde o nome do site
examinado aparecerá).
Observação: Para definir um site do Dreamweaver, consulte “Como configurar um site do Dreamweaver”, na
página 66.
Para alterar a visualização do site enquanto o painel Site estiver reduzido:
Com esse painel reduzido, selecione Visualização local, Visualização remota ou Servidor de teste,
no menu pop-up no qual a visualização estiver sendo exibida.
Observação: Como padrão, Visualização local aparecerá nesse menu pop-up.
Para alterar as visualizações do site enquanto o painel Site estiver expandido:
Com esse painel expandido, clique no botão Arquivos do site (no site remoto), Servidor de teste
ou Mapa do site, na barra de ferramentas do painel.
Servidor de teste
Mapa do site
Arquivos do site
Observação: O botão Mapa do site permite optar pela visualização apenas do mapa do site ou deste e dos
arquivos do site. Para obter mais informações, consulte “Como utilizar o mapa do site”, na página 87.
Como alterar o layout do painel Site

Quando o painel Site estiver em visualização mista, o site local aparecerá, como padrão, no lado
direito do painel Site. Como padrão, o site remoto, servidor de teste ou mapa do site aparecerá no
lado esquerdo. É possível alternar entre estas visualizações.
Para alterar o layout do painel Site:
1 No painel, clique no botão Expandir/Fechar para expandi-lo, se já não estiver.

82 Capítulo 4
3 Selecione Site, na lista de categorias à esquerda.
Aparecerão as opções de preferência do site.
4 No menu pop-up Mostrar sempre, selecione Arquivos locais ou Arquivos remotos.

5 Selecione onde deseja que os arquivos da opção Mostrar sempre apareçam, no lado direito ou
esquerdo do painel Site expandido.
6 Clique em OK.
Para alterar o tamanho da área de visualização:
No painel Site expandido, siga um dos procedimentos abaixo:

• Arraste a barra de divisão que separa as duas visualizações, para aumentar ou diminuir a área de
exibição do painel direito ou esquerdo.
• Utilize as barras de rolagem, na parte inferior do painel Site, para rolar pelo conteúdo das
visualizações.
• No mapa do site, arraste a seta acima de um arquivo para alterar o espaço entre os arquivos.
Tópico relacionado
“Como alterar as colunas de visualização de arquivos”, na página 80

Como trabalhar com os arquivos no painel Site
Utilize o painel Site para exibir os sites como listas de arquivos, abrir ou renomear arquivos,
adicionar novas pastas ou arquivos a um site ou atualizar a visualização do site depois de concluir
as alterações.
Também é possível utilizar o painel Site para determinar quais arquivos (no site local ou remoto)
foram atualizados desde a última vez em que foram transferidos. Para obter mais informações
sobre a sincronização do site local com o remoto, consulte “Como sincronizar os arquivos nos
sites local e remoto”, na página 100.
Para abrir um arquivo do painel Site, siga um dos procedimentos abaixo:
• Clique duas vezes no ícone do arquivo.

• Clique com o botão direito do mouse no ícone correspondente ao arquivo e, em seguida,
escolha Abrir.
• Escolha Arquivo > Abrir.
Para adicionar um novo arquivo ou pasta a um site:
1 Selecione um arquivo ou pasta no painel Site.

O Dreamweaver criará o novo arquivo ou pasta dentro da pasta que estiver selecionada ou na
mesma pasta do arquivo que estiver selecionado.
2 Para criar uma nova pasta, escolha Arquivo > Nova pasta, no painel Site.
Para criar um novo arquivo, escolha Arquivo > Novo arquivo, no painel Site.
Observação: Alternativamente, escolha Novo arquivo ou Nova pasta, no menu contextual do painel Site.
3 Digite um nome para o novo arquivo ou pasta.

4 Pressione a tecla Enter.
Para renomear um arquivo ou pasta de um site:
1 No painel Site, selecione o arquivo ou a pasta a ser renomeada.

2 Siga um dos procedimentos abaixo, para ativar o nome do arquivo ou da pasta:
• Escolha Arquivo > Renomear.
• Clique no nome do arquivo, faça uma pausa e, em seguida, clique novamente.
• Clique com o botão direito do mouse no ícone do arquivo e escolha Renomear.
3 Digite o novo nome.
4 Pressione a tecla Enter.
Para atualizar o painel Site, siga um dos procedimentos abaixo:
• Escolha Exibir > Atualizar.

• Clique no botão Atualizar, no painel Site (essa opção atualiza ambos os painéis).
Observação: O Dreamweaver atualizará automaticamente o painel Site quando você fizer alterações em outro
aplicativo e retornar ao Dreamweaver.
84 Capítulo 4
Para localizar e selecionar os arquivos retirados:
No painel Site, escolha Editar > Selecionar os arquivos retirados.
Para localizar e selecionar os arquivos que forem mais recentes no site local do que no remoto:
No painel Site, escolha Editar > Selecionar um local mais novo.
Para localizar e selecionar os arquivos que forem mais recentes no site remoto do que no local:
No painel Site, escolha Editar > Selecionar um remoto mais novo.
Como localizar arquivos no painel Site

No painel Site, é possível procurar um arquivo nos sites local e remoto. Para obter mais
informações sobre como procurar e substituir o texto contido nos arquivos, consulte “Busca e
substituição de texto”, na página 316.
Para localizar um arquivo no site local:
1 Abra o arquivo do site remoto ou selecione-o na visualização Site remoto, no painel Site.
2 Siga um dos procedimentos abaixo:
• Se tiver aberto o arquivo na janela do documento, escolha Site > Localizar no site.
• Se tiver selecionado o arquivo no painel Site, clique com o botão direito do mouse e selecione
Localizar no site local.
O Dreamweaver realçará o arquivo na visualização Site local, no painel Site.
Para localizar um arquivo no site remoto:
1 Abra o arquivo do site local ou selecione-o na visualização Site local, no painel Site.
• Se tiver aberto o arquivo na janela do documento, escolha Site > Localizar no site.
• Se tiver selecionado o arquivo no painel Site, clique com o botão direito do mouse e selecione
Localizar no site remoto.
O Dreamweaver realçará o arquivo na visualização Site remoto, no painel Site.
Observação: Se, enquanto a janela do documento estiver ativa, for selecionado Site > Localizar no site e o arquivo
não fizer parte do site que estiver aberto, o Dreamweaver tentará determinar a qual dos sites definidos localmente
pertence o arquivo; se ele pertencer a apenas um site local, o Dreamweaver abrirá este site e, em seguida, procurará
nele o arquivo.

Como utilizar o navegador de arquivos integrado
O navegador de arquivos integrado do painel Site fornece acesso à área de trabalho e à rede local,
a outros sites definidos e a arquivos que não estiverem associados a um site. Utilize o navegador de
arquivos integrado para efetuar as seguintes operações em arquivos situados fora do site:
• Arrastar arquivos
• Excluir arquivos
• Renomear arquivos
• Procurar na rede
• Abrir arquivos no Dreamweaver ou em outros aplicativos
• Operações envolvendo sites, como a transferência de arquivos
Observação: Efetue essas operações da mesma maneira que aquelas que envolvem arquivos em um site definido
(consulte “Sobre o painel Site”, na página 76. A melhor maneira de gerenciar os arquivos consiste em criar um site
do Dreamweaver (consulte “Como configurar um site do Dreamweaver”, na página 66).
Quando se arrasta um arquivo de um site para outro ou para uma pasta que não esteja associada a
um site, o Dreamweaver copia o arquivo arrastado para o local em que for solto. Se o arquivo for
arrastado dentro do mesmo site, o Dreamweaver o moverá do local original para o local em que for
solto.
Quando se arrasta um arquivo que não esteja associado a um site, o Dreamweaver o copia para o
local em que for solto. Se o arquivo que não estiver associado ao site for arrastado para uma outra
pasta sem associação com o site, o Dreamweaver o transferirá para o local em que for solto.
Observação: Para mover um arquivo que o Dreamweaver copia como padrão, mantenha pressionada a tecla Shift
enquanto arrasta o arquivo. Para copiar um arquivo que o Dreamweaver move como padrão, mantenha pressionada
a tecla Control enquanto arrasta o arquivo.
No navegador de arquivos, as pastas do site aparecerão com uma cor diferente das pastas que não
pertencerem a ele, para que se possa distingui-las. Se você tentar efetuar uma operação no site que
afete uma pasta ou arquivo que não esteja associado ao site, o Dreamweaver solicitará a definição
de um site no programa antes de efetuar a operação.
Para utilizar o navegador de arquivos integrado:
Na hierarquia de arquivos do painel Site, clique no sinal de adição (+) ao lado da área de trabalho.
Sobre o mapa do site

Utilize a visualização do mapa do site para exibir uma pasta local de um site do Dreamweaver
como um mapa visual de ícones vinculados, adicionar novos arquivos a um site do Dreamweaver,
ou adicionar, modificar ou remover links. A visualização do mapa do site é ideal para criar o
layout da estrutura do site. É possível configurar rapidamente a estrutura inteira do site e, em
seguida, criar uma imagem gráfica do mapa do site.
Observação: O mapa do site se aplica apenas aos sites locais. Para criar o mapa de um site remoto, copie o
conteúdo deste para uma pasta na unidade local e utilize o comando Editar os sites, para definir o site como sendo
local. Para obter mais informações, consulte “Como configurar uma pasta local”, na página 67.
86 Capítulo 4
Como utilizar o mapa do site
É necessário definir uma home page correspondente ao site antes de exibir o mapa do mesmo. A
home page pode ser qualquer página do site; ela não precisa ser a página principal do site. Nesse
caso, a home page é apenas o ponto de partida do mapa.
Para definir a home page do site:

2 Escolha Editar, para abrir um site já existente.
3 Na lista de categorias, à esquerda, selecione Layout do mapa do site.
A caixa de diálogo Definição do site exibirá as opções do Layout do mapa do site.
4 Clique no ícone da pasta, para procurar a home page do site, ou digite um caminho de arquivo
na caixa de texto Home page.
5 Clique em OK.

Para exibir o mapa de um site:
1 No painel Site, clique no botão Expandir/Fechar para expandi-lo, se já não estiver.

2 Selecione Exibir > Mapa do site, ou clique no botão Mapa do site e, em seguida, selecione Apenas
o mapa ou Site e mapa.
Selecione Apenas o mapa, para exibir o mapa do site sem a estrutura de arquivos locais, ou Site
e mapa, para exibir o mapa do site e a estrutura de arquivos locais.
Observação: Se você não tiver definido uma home page ou se o Dreamweaver não puder localizar uma página
denominada index.html ou index.htm no site para utilizar como home page, aparecerá uma caixa de diálogo,
solicitando a seleção de uma home page mediante o clique em Editar os sites. Escolha um site, clique em Editar
e, em seguida, selecione Layout do mapa do site, na lista de categorias à esquerda da caixa de diálogo Definição
do site.
O painel Site exibe um mapa do site, juntamente com a estrutura de arquivos locais.
Como exibir o mapa do site

O mapa do site mostrará os arquivos HTML e outras páginas como ícones. Os links serão
exibidos na ordem em que forem detectados no código-fonte HTML, da seguinte maneira:
• O texto em vermelho indica um link rompido.
• O texto em azul e marcado com um ícone representando um globo indica um arquivo em um
outro site ou um link especial (como um link de correio eletrônico ou de script).
• Uma marca de seleção verde indica um arquivo retirado por você.
• Uma marca de seleção vermelha indica um arquivo retirado por outro usuário.
• Um ícone com um cadeado indica um arquivo somente de leitura.
Como padrão, o mapa exibe dois níveis da estrutura do site, a partir da home page atual. Clique
nos sinais de adição (+) ou subtração (-), ao lado de uma página, a fim de mostrar ou ocultar as
páginas vinculadas abaixo do segundo nível, respectivamente.
Como padrão, o mapa do site não exibe arquivos ocultos ou dependentes. Os arquivos ocultos são
arquivos HTML marcados como ocultos. O conteúdo das páginas de arquivos dependentes é
diferente de HTML, podendo incluir imagens, modelos, arquivos do Macromedia Shockwave ou
do Macromedia Flash. Para obter mais informações, consulte “Como mostrar e ocultar os
arquivos do mapa do site”, na página 91.
88 Capítulo 4
Como modificar o layout do mapa do site
Utilize as opções do Layout do mapa do site para personalizar a aparência do mapa do site. É
possível especificar a home page, o número de colunas exibidas, se os identificadores de ícones
exibirão o nome do arquivo ou o título da página, e decidir se os arquivos ocultos e dependentes
serão mostrados.
Para modificar o layout do mapa do site:
1 Siga um dos procedimentos abaixo, para abrir a caixa de diálogo Definição do site:
• Escolha Site > Editar os sites e, em seguida, clique em Editar. Na lista de categorias, à esquerda,
selecione Layout do mapa do site.
• No painel Site, escolha Site > Layout.
A caixa de diálogo Definição do site exibirá as opções do Layout do mapa do site.
2 Faça as alterações necessárias.

3 Clique em OK, para fechar a caixa de diálogo Definição do site.
4 Clique em Concluída, para fechar a caixa de diálogo Editar os sites, se estiver aberta.
Como trabalhar com as páginas no mapa do site

Durante o trabalho no mapa do site, é possível selecionar páginas, abrir uma página para edição,
adicionar novas páginas ao site, criar links entre arquivos e alterar os títulos das páginas.
Para selecionar várias páginas no mapa do site, siga um dos procedimentos abaixo:
• Pressione a tecla Shift e clique, para selecionar uma faixa de páginas adjacentes.
• Inicie em uma parte em branco da visualização e arraste um grupo de arquivos, para selecioná-
los.
• Pressione a tecla Control e dê um clique, para selecionar páginas não-contíguas.

Para abrir uma página do mapa do site para edição, siga um dos procedimentos abaixo:
• Clique duas vezes no arquivo.

• Selecione o arquivo e escolha Arquivo > Abrir.
Para adicionar um arquivo já existente ao site, siga um dos procedimentos abaixo:
• Arraste um arquivo do Windows Explorer e solte-o em um arquivo do mapa do site. A página

será adicionada ao site e um link será criado entre ela e o arquivo no qual for solta.
• Selecione Site > Link a um arquivo existente e, em seguida procure o arquivo.
Para criar um novo arquivo e adicionar um link no mapa do site:
1 Selecione um arquivo HTML no mapa do site e, depois, siga um dos procedimentos abaixo:
• Escolha Site > Link a um novo arquivo.
• Escolha Link a um novo arquivo, no menu contextual.
Aparecerá a caixa de diálogo Link a um novo arquivo.
2 Digite um nome, título e o texto do link.

3 Clique em OK.
O Dreamweaver salvará o arquivo na mesma pasta que o arquivo selecionado. Se for adicionado
um novo arquivo a uma ramificação oculta, o novo arquivo também estará oculto (consulte
“Como mostrar e ocultar os arquivos do mapa do site”, na página 91).
Para modificar o título de uma página no mapa do site:
1 Certifique-se de que a opção Mostrar os títulos das páginas esteja selecionada, escolhendo
Exibir > Mostrar os títulos das páginas, no painel Site.
2 Selecione uma página e, em seguida, siga um dos procedimentos abaixo:
• Clique no título. Quando ele se tornar editável, digite um novo título.
• Escolha Arquivo > Renomear.
3 Depois de digitar o novo nome, pressione Enter.
Observação: Durante o trabalho no painel Site, o Dreamweaver atualizará automaticamente todos os links aos
arquivos cujos nomes tiverem sido modificados.
90 Capítulo 4
Para alterar a home page no mapa do site, siga um dos procedimentos abaixo:
• Na visualização Site local, no painel Site, selecione um arquivo e, em seguida, clique com o
botão direito do mouse e escolha Definir como home page.
• Na visualização Site local, no painel Site, clique no arquivo a ser transformado em nova home
page e, em seguida, escolha Site > Definir como home page.
• Selecione um arquivo no mapa do site e escolha Site > Nova home page.
• Escolha Site > Editar os sites e clique em Editar. Selecione Layout do mapa do site, na lista de
categorias da caixa de diálogo Definição do site. Procure uma nova home page e, em seguida,
clique em OK.
Para atualizar a visualização do mapa do site depois de ter concluído as alterações:
1 Clique em qualquer ponto do mapa do site, para cancelar a seleção dos arquivos.
2 Escolha Exibir > Atualizar.
Como mostrar e ocultar os arquivos do mapa do site

É possível modificar o layout do mapa do site, para mostrar ou não os arquivos ocultos e
dependentes. Esse procedimento é útil quando se deseja enfatizar tópicos ou conteúdos importantes
e retirar a ênfase de materiais menos relevantes.
Para ocultar um arquivo utilizando o mapa do site, é necessário marcar o arquivo como oculto.
Quando um arquivo for ocultado, os links a ele também se tornarão ocultos. Quando um arquivo
marcado como oculto for exibido, o ícone e os links a ele estarão visíveis no mapa do site, porém
os nomes aparecerão em itálico.
Observação: Como padrão, os arquivos dependentes já estão ocultos.
Para marcar os arquivos como ocultos no mapa do site:
1 No mapa do site, selecione um ou mais arquivos.

2 Escolha Exibir > Mostrar/ocultar o link.
Para mostrar ou ocultar os arquivos marcados como ocultos no mapa do site, siga um dos
procedimentos abaixo:
• Escolha Exibir > Mostrar os arquivos marcados como ocultos.

• Escolha Exibir > Layout, para abrir a caixa de diálogo Definição do site e, em seguida, selecione
a opção Exibir os arquivos marcados como ocultos.
Para mostrar os arquivos dependentes no mapa do site, siga um dos procedimentos abaixo:
• Escolha Exibir > Mostrar os arquivos dependentes.

• Escolha Exibir > Layout, para abrir a caixa de diálogo Definição do site e, em seguida, selecione
a opção Exibir os arquivos dependentes.
Para desmarcar os arquivos marcados como ocultos no mapa do site:
1 No mapa do site, selecione um ou mais arquivos.

2 Escolha Exibir > Mostrar os arquivos marcados como ocultos.
3 Escolha Exibir > Mostrar/ocultar o link.

Como exibir o site a partir de uma ramificação
É possível exibir os detalhes de uma determinada seção de um site, tomando como ponto de
referência uma das ramificações do mapa do site.
Para exibir uma outra ramificação no mapa do site:
Selecione a página a ser exibida e escolha Exibir > Exibir como raiz.
O mapa do site será redesenhado na janela como se a página especificada estivesse na raiz do site.
A caixa de texto Navegação no site, situada acima do mapa do site, exibe o caminho da home page
até a página especificada. Selecione qualquer item nesse caminho para exibir o mapa do site a
partir desse nível, clicando uma vez.
Para expandir ou contrair as ramificações do mapa do site:
Clique no sinal de adição (+) ou subtração (–) de uma ramificação.
Como salvar o mapa do site

É possível salvar o mapa do site como uma imagem e, em seguida, exibi-la (ou imprimi-la) em um
editor de imagens.
Para criar um arquivo de imagem do mapa do site atual:
1 No mapa do site, siga um dos procedimentos abaixo:

• Escolha Arquivo > Salvar o mapa do site. Na caixa de diálogo Salvar o mapa do site, digite um
nome na caixa de texto Nome do arquivo. No menu pop-up Tipo de arquivo,
selecione .bmp ou .png.
• Selecione Site > Visualização do mapa do site > Salvar o mapa do site > Salvar o mapa do site
como PICT, ou Site > Visualização do mapa do site > Salvar o mapa do site > Salvar o mapa do
site como JPEG.
2 Escolha o local onde deseja salvar o arquivo e digite o nome da imagem.
3 Clique em Salvar.
Como importar e exportar sites

Com o Dreamweaver, é possível exportar um site como um arquivo XML e, em seguida, importá-
lo de volta para o Dreamweaver. Esse recurso permite transferir sites de um computador para
outro e entre diferentes versões do produto, ou compartilhá-los com outros usuários.
Para exportar um site:
1 Escolha Site > Editar os sites.

2 Clique no botão Exportar.
Aparecerá o painel Exportar o site.
3 Procure o local onde deseja salvar o site.
92 Capítulo 4
4 Clique em Salvar.
O Dreamweaver salvará o site como um arquivo XML com a extensão STE no local especificado.
5 Clique em Concluída, para fechar a caixa de diálogo Editar os sites.
Para importar um site:

2 Clique no botão Importar.
Aparecerá o painel Importar o site.
3 Procure e selecione um site (salvo como um arquivo XML) a ser importado.
Observação: Para poder importar o arquivo, é necessário exportar o site do Dreamweaver, que o salvará como
um arquivo XML.
4 Clique em Abrir.
O Dreamweaver importará o site, cujo nome aparecerá na caixa de diálogo Editar os sites.
Como remover um site da lista de sites

Se não desejar mais trabalhar com um site no Dreamweaver, remova-o da lista de sites. Os
arquivos do site não serão removidos.
Observação: Quando um site for removido da lista, todas as informações de configuração sobre o site serão
perdidas em caráter permanente.
Para remover um site da lista de sites:

2 Selecione o nome do site.
3 Clique em Remover.
Aparecerá uma caixa de diálogo, solicitando a confirmação da remoção.
4 Clique em Sim, para remover o site da lista, ou em Não, para manter o seu nome.

Como utilizar as opções de devolução e retirada de arquivos
Em um ambiente com vários usuários, utilize o sistema de devoluções e retiradas de arquivos dos
servidores local e remoto. Caso você seja a única pessoa trabalhando no servidor remoto, utilize os
comandos Colocar e Obter, sem devolver ou retirar os arquivos (consulte “Como obter e colocar
arquivos”, na página 97).
A retirada de um arquivo equivale a declarar: “Estou trabalhando com este arquivo — não o
toque!”. Quando um arquivo for retirado, o Dreamweaver exibirá no painel Site o nome da pessoa
que o retirou, juntamente com uma marca de seleção vermelha (se um membro da equipe o tiver
retirado), ou verde (se você for essa pessoa) ao lado do ícone do arquivo.
A devolução de um arquivo possibilitará aos outros membros da equipe retirar e editá-lo. Quando
você devolver um arquivo depois de tê-lo editado, a sua versão local se tornará somente leitura e
aparecerá um símbolo de cadeado ao seu lado, no painel Site, para evitar qualquer modificação ao
arquivo.
No servidor remoto, o Dreamweaver não modifica o status dos arquivos retirados para somente
leitura. Caso os arquivos sejam transferidos com um aplicativo diferente do Dreamweaver, será
possível sobrescrever os arquivos retirados. No entanto, nos outros aplicativos, o arquivo .LCK
estará visível ao lado do arquivo retirado na hierarquia de arquivos, a fim de evitar acidentes deste
gênero.
Para ativar a opção Devolver/retirar em alguns sites, consulte “Como configurar o sistema de
devoluções e retiradas”, na página 94. Para obter mais informações sobre a transferência de
arquivos entre os sites local e remoto sem devolvê-los ou retirá-los, consulte “Como obter arquivos
de um servidor remoto ou de teste”, na página 97 e “Como colocar arquivos em um servidor
Observação: É possível utilizar os recursos de obtenção e colocação de arquivos com um servidor de teste, mas
não os recursos de devolução e retirada de arquivos.
Como configurar o sistema de devoluções e retiradas

Para poder utilizar o sistema de devoluções e retiradas, é necessário associar o site local a um
servidor remoto (consulte “Como configurar uma pasta remota”, na página 69).
Para configurar o sistema de devoluções e retiradas:

2 Selecione um site e, em seguida, clique em Editar.
94 Capítulo 4
3 Na lista de categorias à esquerda, clique em Informações remotas.
A caixa de diálogo Definição do site exibirá as opções de Informações remotas. A seção
Devolver/retirar aparecerá na parte inferior da caixa de diálogo.
Observação: Se as opções de devoluções e retiradas não forem exibidas, o servidor remoto não foi configurado
(consulte “Como configurar uma pasta remota”, na página 69).
4 Preencha a seção Devolver/retirar.

5 Clique em OK.
Como devolver e retirar os arquivos de um servidor remoto

Utilize o painel Site ou a janela do documento para devolver ou retirar os arquivos de um servidor
remoto.
O sistema de devoluções e retiradas de arquivos do Dreamweaver utiliza os seguintes símbolos no
painel Site:
• Uma marca de seleção verde indica que você retirou o arquivo.
• Uma marca vermelha indica que um outro membro da equipe retirou o arquivo.
• Um símbolo de cadeado indica que o arquivo é somente de leitura.
Se você retirar um arquivo e decidir não editá-lo (ou descartar as alterações feitas), poderá desfazer
a retirada.

Para retirar os arquivos de um servidor remoto no painel Site:
1 Escolha um site no menu pop-up Site.

2 Selecione os arquivos a serem retirados.
Observação: É possível selecioná-los na visualização local ou remota.
3 Siga um dos procedimentos abaixo, para retirar o(s) arquivo(s):

• Clique no botão Retirar, na barra de ferramentas do painel Site.
• Clique com o botão direito do mouse. Em seguida, escolha Retirar, no menu contextual.
4 Clique em Sim no aviso, para efetuar o download dos arquivos dependentes, juntamente com
os arquivos selecionados, ou em Não, para não efetuar o download dos arquivos dependentes.
Observação: É recomendável efetuar o download dos arquivos dependentes na retirada de um novo arquivo,
mas se a versão mais recente dos arquivos dependentes já estiver no disco local, não haverá necessidade de
efetuar o seu download novamente.
Uma marca de seleção verde aparecerá ao lado do ícone do arquivo, indicando que você o
retirou.
Para devolver os arquivos para um servidor remoto no painel Site:
1 Escolha um site no menu pop-up Site.

2 Selecione os arquivo(s) retirado(s) ou novo(s).
Observação: É possível selecioná-los na visualização local ou remota.
3 Siga um dos procedimentos abaixo para devolver o(s) arquivo(s):

• Clique no botão Devolver, na barra de ferramentas do painel Site.
• Clique com o botão direito do mouse. Em seguida, escolha Devolver, no menu contextual.
4 Clique em Sim no aviso, para efetuar o download dos arquivos dependentes, juntamente com
os arquivos selecionados, ou em Não, para não efetuar o download dos arquivos dependentes.
Observação: É recomendável efetuar o upload dos arquivos dependentes na devolução de um novo arquivo,
mas se a versão mais recente dos arquivos dependentes já estiver no servidor remoto, não haverá necessidade
de efetuar o seu upload novamente.
Um símbolo de cadeado aparecerá ao lado do ícone do arquivo, indicando que, a partir de

agora, ele é somente de leitura.
Para devolver ou retirar um arquivo que estiver aberto na janela do documento, siga um dos
• Escolha Site > Devolver, ou Site > Retirar.

• Clique no ícone de Gerenciamento de arquivos, na barra de ferramentas da janela do
documento e, em seguida, escolha Devolver ou Retirar, no menu pop-up.
Observação: Se você selecionar Site > Devolver, ou Site > Retirar e o arquivo não fizer parte do site que estiver
aberto, o Dreamweaver tentará determinar a qual dos sites definidos localmente pertence o arquivo. Se o arquivo
pertencer a apenas um site local, o Dreamweaver abrirá este site e, em seguida, efetuará a operação de devolução
ou retirada do arquivo.
96 Capítulo 4
Se o arquivo ativo for retirado, a versão aberta deste será substituída pela nova versão retirada. Se o
arquivo ativo for devolvido, ele deverá ser automaticamente salvo antes da devolução, dependendo
das opções de preferência definidas (consulte “Como definir as preferências do site”, na
página 79).
Para desfazer a retirada de um arquivo:
1 Selecione o arquivo.
2 Siga um dos procedimentos abaixo, para desfazer a retirada do arquivo:
• Escolha Site > Desfazer a retirada.
• Clique com o botão direito do mouse no arquivo, no painel Site. Em seguida, escolha Desfazer
a retirada, no menu contextual.
A cópia local do arquivo se tornará somente de leitura e quaisquer alterações feitas serão perdidas.
Como obter e colocar arquivos

Se você estiver trabalhando em um ambiente com vários usuários, utilize o sistema de devoluções
e retiradas para transferir os arquivos entre os sites local e remoto (consulte “Como utilizar as
opções de devolução e retirada de arquivos”, na página 94). Contudo, se for a única pessoa
trabalhado no site remoto, utilize os comandos Obter e Colocar, para transferir os arquivos sem
devolver ou retirá-los.
Observação: Se, enquanto a janela do documento estiver ativa, você selecionar Site > Obter, ou Site > Colocar, e o
arquivo não fizer parte do site que estiver aberto, o Dreamweaver tentará determinar a qual dos sites definidos
localmente pertence o arquivo; se ele pertencer a apenas um site local, o Dreamweaver abrirá esse site e, em seguida,
executará a operação de obtenção ou colocação.
Como obter arquivos de um servidor remoto ou de teste

O comando Obter copia arquivos do site remoto ou do servidor de teste para o site local, da
seguinte maneira:
• Se for utilizado o sistema de devoluções e retiradas (isto é, se a opção Ativar a devolução e
retirada de arquivos estiver acionada), o comando Obter produzirá uma cópia local somente de
leitura do arquivo; este continuará disponível no site remoto para os outros membros da equipe
retirá-lo (consulte “Como utilizar as opções de devolução e retirada de arquivos”, na
página 94).
• Se você não estiver utilizando o sistema de devoluções e retiradas (ou seja, se a opção Ativar a
devolução e a retirada de arquivos não estiver selecionada), a obtenção de um arquivo transferirá
uma cópia com privilégios de leitura e gravação.
Observação: Se você estiver trabalhando em um ambiente de equipe — isto é, se outras pessoas estiverem
utilizando os mesmos arquivos —, não desative a opção Ativar a devolução e retirada de arquivos. Se as outras
pessoas estiverem utilizando o sistema de devoluções e retiradas no site, você também deverá utilizar o mesmo
sistema.
É possível obter os arquivos selecionando-os na visualização local ou remota do painel Site. Se a

visualização remota estiver ativa, o Dreamweaver copiará os arquivos remotos selecionados no site
local; se a visualização local estiver ativa, as versões remotas dos arquivos locais escolhidos serão
copiadas no site local.

Para obter apenas os arquivos cuja versão remota for mais recente do que a local, utilize o
comando Sincronizar (consulte “Como sincronizar os arquivos nos sites local e remoto”, na
página 100).
O Dreamweaver registra todas as atividades de transferência de arquivos através de FTP. Se ocorrer
um erro durante a transferência de um arquivo com o FTP, o Registro de FTP do site poderá
auxiliá-lo a determinar o problema.
Para exibir o registro de FTP:
Selecione Exibir > Registro de FTP do site
Para obter arquivos de um servidor remoto ou de teste:
1 No painel Site, escolha um site no menu pop-up Site.

2 Caso esteja utilizando o FTP para transferir arquivos, clique no botão Conectar, a fim de abrir
uma conexão com o servidor remoto.
Se já houver uma conexão aberta (indicada pelo botão Desconectar), ignore essa etapa.
Caso os arquivos remotos já estejam visíveis no painel Remoto devido a uma conexão anterior,
não será preciso clique em Conectar; quando se clica em Obter, o Dreamweaver estabelece
automaticamente a conexão.
3 Selecione os arquivos dos quais deseja efetuar o download.
Em geral, esses arquivos são selecionados na visualização remota ou do servidor de teste, mas é
possível selecionar os arquivos correspondentes na visualização local, se preferir.
4 Siga um dos procedimentos abaixo, para obter o arquivo:
• Clique no botão Obter, na barra de ferramentas do painel Site.
• No menu contextual, escolha Obter.
• Escolha Site > Obter.
Observação: Se o arquivo estiver aberto na janela do documento, também é possível escolher Site > Obter,
nessa janela.
Aparecerá uma caixa de diálogo, indagando se você deseja obter os arquivos dependentes.
5 Para efetuar o download dos arquivos dependentes, clique em Sim; para ignorá-los, clique em
Não.
Se já houver cópias locais dos arquivos dependentes, clique em Não.
Para interromper a transferência de arquivos a qualquer momento, clique no botão Cancelar, na
caixa de diálogo Status. É possível que a transferência não pare imediatamente.
98 Capítulo 4
Como colocar arquivos em um servidor remoto ou de teste
O comando Colocar copia arquivos do site local para o site remoto, geralmente sem alterar o
status de retirada dos mesmos. Há duas situações comuns nas quais é possível utilizar o comando
Colocar em vez de Devolver:
• Utilize Colocar quando você não estiver em um ambiente com muitos usuários e não estiver
utilizando o sistema de devoluções e retiradas de arquivos.
Observação: Se desejar colocar um arquivo em um servidor remoto e devolvê-lo, utilize o comando Devolver
(consulte “Como devolver e retirar os arquivos de um servidor remoto”, na página 95).
• Utilize o comando Colocar quando desejar colocar a versão atual do arquivo no servidor e
continuar a editá-lo.
Observação: Caso você coloque um arquivo que ainda não exista no site remoto e esteja utilizando o sistema de
devoluções e retiradas, o arquivo será copiado no site remoto e, em seguida, retirado, para que você possa
continuar a editá-lo.
Para colocar apenas os arquivos cuja versão local for mais recente do que a remota, consulte
“Como sincronizar os arquivos nos sites local e remoto”, na página 100.
Observação: Não utilize caracteres especiais (como é, ç ou ¥) ou pontuação, como dois pontos, barras inclinadas
ou pontos nos nomes dos arquivos que serão colocados em um servidor remoto ou de teste. Muitos
servidores converterão esses caracteres durante o processo do upload, provocando a ruptura dos links entre os
arquivos.
Para colocar arquivos em um servidor remoto ou de teste:
1 No painel Site, escolha um site no menu pop-up Site.

2 Se for utilizado o FTP para a transferência dos arquivos, clique em Conectar, para abrir uma
conexão com o servidor remoto, que lhe permitirá ver o que há no site remoto antes de
transferir os arquivos.
Contudo, não é necessário clique em Conectar; quando você clique em Colocar, o
Dreamweaver estabelecerá automaticamente a conexão.
3 Selecione os arquivos cujo upload deseja efetuar.
Normalmente, eles são escolhidos na visualização local, mas é possível selecionar os arquivos
correspondentes na visualização remota, se preferir.
4 Siga um dos procedimentos abaixo, para colocar o arquivo:
• Clique no botão Colocar, na barra de ferramentas do painel Site.
• No menu contextual, escolha Colocar.
• Escolha Site > Colocar.
Se o arquivo estiver aberto na janela do documento, será possível escolher Site > Colocar, na
janela do documento.

5 Se o arquivo não tiver sido salvo, é possível que apareça uma caixa de diálogo (dependendo da
definição da preferência, no painel Site, na caixa de diálogo Preferências), que permite salvar o
arquivo antes de colocá-lo no servidor remoto.
Para salvar o arquivo, clique em Sim; para colocar a versão salva anteriormente no servidor
remoto, clique em Não. Se preferir não salvar o arquivo, as alterações feitas após o último
salvamento não serão colocadas no servidor remoto. Contudo, o arquivo continuará aberto
para que ainda seja possível salvá-lo arquivo depois de colocá-lo no servidor.
Aparecerá uma caixa de diálogo, indagando se você deseja colocar os arquivos dependentes.
6 Para efetuar o upload dos arquivos dependentes, clique em Sim; para ignorá-los, clique em
Não.
Se o site remoto já contiver cópias dos arquivos dependentes, clique em Não. Para evitar
perguntas sobre os arquivos dependentes em uploads posteriores, selecione a opção Não
indague novamente.
Para interromper a transferência de arquivos, clique no botão Cancelar, na caixa de diálogo Status.
É possível que a transferência não pare imediatamente.
O Dreamweaver registra todas as atividades de transferência de arquivos através de FTP. Se ocorrer
um erro durante a transferência de um arquivo com o FTP, o Registro de FTP do site poderá
auxiliá-lo a determinar o problema. Para exibir o registro, selecione Exibir > Registro de FTP do
site.
Como sincronizar os arquivos nos sites local e remoto

Depois que os arquivos forem criados nos sites local e remoto, é possível sincronizá-los. Utilize o
comando Site > Sincronizar, para transferir as versões mais recentes dos seus arquivos de e para o
site remoto.
Caso o site remoto seja um servidor de FTP (em vez de um servidor de rede), a sincronização dos
arquivos utilizará o FTP. Para obter mais informações sobre o uso do FTP, consulte “Como
configurar uma pasta remota”, na página 69.
Antes de sincronizar os sites, o Dreamweaver permite verificar quais arquivos serão colocados ou
obtidos no servidor remoto. O Dreamweaver também confirmará quais arquivos foram
atualizados após o término da sincronização.
Para verificar quais arquivos são mais recentes no site local ou no site remoto, sem sincronização,
siga um dos procedimentos abaixo:
• Escolha Editar > Selecionar um local mais novo, ou Editar > Selecionar um remoto mais novo (no
painel Site).
• Escolha Site > Arquivos do site Exibir > Selecionar um local mais novo.
Para sincronizar os arquivos:
1 No painel Site, escolha um site no menu pop-up da lista Sites atuais.

2 Selecione os arquivos ou as pastas específicas.
Se desejar sincronizar o site inteiro, ignore essa etapa.
100 Capítulo 4
3 No painel Site, siga um dos procedimentos abaixo, para sincronizar:
• Escolha Site > Sincronizar.
• Clique com o botão direito do mouse. Em seguida, selecione Sincronizar, no menu contextual.
Aparecerá a caixa de diálogo Sincronizar os arquivos.

O Dreamweaver sincronizará os arquivos automaticamente. Se os arquivos já estiverem
sincronizados, o Dreamweaver o informará que a sincronização não é necessária.
Como encobrir as pastas e os arquivos do site

O encobrimento de sites permite excluir determinadas pastas e tipos arquivos de um site, nas
operações de obtenção e colocação. É possível encobrir pastas individuais, mas não arquivos
individuais. Para encobrir arquivos, é necessário selecionar um tipo de arquivo. O Dreamweaver
encobrirá todos os arquivos desse tipo e memorizará as definições de cada site, para evitar que você
tenha que fazer seleções a cada vez que trabalhar no site.
Por exemplo: se estiver trabalhando em um site grande e não desejar efetuar o upload diário dos
arquivos de multimídia, utilize o encobrimento do site para encobrir a pasta de componentes de
multimídia. O sistema excluirá os arquivos desta pasta das operações que afetarem o site.
É possível encobrir pastas e tipos de arquivos do site remoto ou local. O encobrimento exclui as
pastas e os arquivos encobertos nas seguintes operações:
• Colocar, Obter, Devolver e Retirar
• Relatórios
• Selecione um local mais novo e Selecione um remoto mais novo
• Operações no site inteiro, como Verificar os links, Alterar o link, Localizar/substituir
• Sincronizar
• Conteúdo do painel Propriedades
• Atualizações de modelos e bibliotecas
Observação: O Dreamweaver excluirá os modelos e itens de bibliotecas encobertos apenas nas operações de
obtenção e colocação, mas não excluirá esses itens de operações em lote porque isso poderá acarretar a sua
dessincronização com as respectivas instâncias.
Para realizar uma operação em uma determinada pasta encoberta, basta selecionar o item no painel
Site. A realização direta de uma operação em um arquivo ou uma pasta anula o encobrimento.

Como ativar e desativar o encobrimento de sites
O encobrimento de sites está ativo como padrão. É possível desativar o encobrimento em caráter
permanente ou apenas temporariamente, para realizar uma operação que afete todos os arquivos,
inclusive os que estiverem encobertos. Quando o encobrimento de sites for desativado, todos os
arquivos que estiverem encobertos serão desencobertos. Quando ele for reativado, todos os
arquivos que estavam anteriormente encobertos retornarão a esse estado.
Observação: Também é possível utilizar a opção Desencobrir tudo, para desencobrir todos os arquivos, mas ela não
desativará o encobrimento; também não há uma maneira de encobrir novamente todas as pastas e os arquivos que
estavam anteriormente encobertos, exceto redefinindo o encobrimento de cada pasta e tipo de arquivo.
Para ativar ou desativar o encobrimento de sites:
1 No painel Site, selecione um site no menu pop-up Site.

2 No painel Site, siga um dos procedimentos abaixo:
• Escolha Site > Encobrimento, para exibir o submenu.
• Selecione um arquivo ou uma pasta e clique com o botão direito do mouse, para exibir o menu
contextual.
3 No submenu, siga um dos procedimentos abaixo:
• Selecione Ativar o encobrimento ou Desativar o encobrimento.
• Selecione Definições. Em seguida, na guia Avançado da caixa de diálogo Definição do site,
escolha Encobrimento, na lista de categorias à esquerda, marque ou desmarque a opção Ativar
o encobrimento e clique em OK.
O encobrimento deste site estará ativado ou desativado.
Como encobrir e desencobrir as pastas do site

É possível encobrir determinadas pastas, mas não todas as pastas ou um site inteiro. É possível
encobrir diversas pastas simultaneamente.
Para encobrir ou desencobrir determinadas pastas de um site:
1 No painel Site, selecione um site no menu pop-up Site que possuir a opção de encobrimento
de sites ativada.
2 Selecione a(s) pasta(s) que deseja encobrir ou desencobrir.
• Escolha Site > Encobrimento > Encobrir, ou Site > Encobrimento > Desencobrir.
• Clique com o botão direito do mouse. Em seguida, escolha Encobrimento >
Encobrir, ou Encobrimento > Desencobrir, no menu contextual.
Uma linha vermelha atravessando o ícone correspondente à pasta aparecerá ou desaparecerá,
indicando o encobrimento ou não da pasta.
102 Capítulo 4
Como encobrir e desencobrir determinados tipos de arquivos
É possível indicar determinados tipos de arquivos a serem encobertos, de modo que o
Dreamweaver encubra todos os arquivos que terminarem com um padrão especificado. Por
exemplo: encubra todos os arquivos que terminarem com a extensão .txt. Os tipos de arquivos
digitados não precisam ser extensões; eles podem obedecer a qualquer padrão no final dos nomes
de arquivo.
Para encobrir determinados tipos de arquivos em um site:
de sites ativada.
• Escolha Site > Encobrimento > Definições.
• Clique com o botão direito do mouse e, em seguida, selecione Definições.
Aparecerá a guia Avançado da caixa de diálogo Definição do site.
3 Selecione a caixa de seleção Encobrir os arquivos terminados com.

4 Na caixa de texto, digite os tipos de arquivos a serem encobertos.
Por exemplo: .jpg, para encobrir todos os arquivos do site que terminarem com .jpg.
Observação: Separe os diversos tipos de arquivos com um espaço; não utilize vírgulas ou sinais de dois pontos.

5 Clique em OK.
Aparecerá uma linha vermelha atravessando os arquivos afetados, indicando o seu encobrimento.
Dica: Alguns programas de software criam arquivos de cópia de segurança com um determinado sufixo, como .bak.
Esses arquivos podem ser encobertos.
Para desencobrir determinados tipos de arquivos em um site:
de sites ativada.
• Escolha Site > Encobrimento > Definições.
• Clique com o botão direito do mouse e, em seguida, selecione Encobrimento > Definições.
Aparecerá a guia Avançado da caixa de diálogo Definição do site.
• Desmarque a caixa de seleção Encobrir os arquivos terminados com, para desencobrir todos os
tipos de arquivos enumerados na caixa de texto.
• Exclua determinados tipos de arquivos da caixa de texto, para desencobri-los.
4 Clique em OK.
As linhas vermelhas que atravessavam os arquivos afetados desaparecerão, indicando o seu
desencobrimento.
Como desencobrir todas as pastas e arquivos

É possível desencobrir todas as pastas e arquivos de um site simultaneamente. Essa ação não pode
ser desfeita; não há como encobrir novamente todos os itens que estavam encobertos
anteriormente. Será necessário encobri-los individualmente.
Observação: Se desejar desencobrir temporariamente todas as pastas e arquivos e encobri-los novamente,
desative o encobrimento de sites (consulte “Como ativar e desativar o encobrimento de sites”, na página 102).
Para desencobrir todas as pastas e arquivos de um site:
de sites ativada.
2 Selecione qualquer arquivo ou pasta do site.
• Escolha Site > Encobrimento > Desencobrir tudo.
• Clique com o botão direito do mouse e, em seguida, escolha Encobrimento > Desencobrir
tudo.
Observação: Essa etapa também cancela a seleção da caixa Encobrir os arquivos terminados com, em Site >
Encobrimento > Definições.
As linhas vermelhas que atravessavam os ícones dos arquivos e das pastas desaparecerão,
indicando o seu desencobrimento.
104 Capítulo 4
Como utilizar as Design Notes
As Design Notes são notas que acompanham um arquivo. Elas estão associadas ao arquivo que
descrevem, mas são armazenadas em outro arquivo. Utilize as Design Notes para controlar as
informações adicionais relativas aos documentos, como nomes de arquivos de origem de imagens
e comentários sobre o status de arquivos.
Por exemplo: se um documento for copiado de um site para outro, é possível adicionar Design
Notes a esse documento, informando que seu original está na pasta do outro site. Posteriormente,
se esse documento for atualizado, você será informado que é necessário atualizar também a página
original.
O comando Design Notes pode ser utilizado também para controlar informações confidenciais
que não podem ser colocadas no interior de um documento por motivos de segurança. Por
exemplo: podem ser incluídas informações sobre a criação do documento ou notas sobre a escolha
de um determinado preço ou configuração, ou ainda quais fatores de marketing influenciaram
uma decisão sobre design.
No painel Site é possível ver quais arquivos apresentam Design Notes anexadas: haverá um ícone
de Design Notes na coluna Notas.
Para obter informações gerais sobre a utilização das Design Notes, consulte “Como salvar as
informações sobre o arquivo contidas nas Design Notes”, na página 106. Para obter informações
sobre a utilização das Design Notes com o Fireworks, consulte “Como utilizar as Design Notes no
Fireworks e no Flash com o Dreamweaver”, na página 109.
Como ativar e desativar as Design Notes

Ative ou desative as Design Notes de um site na categoria Design Notes da caixa de diálogo
Definição do site. Ao ativar as Design Notes, é possível optar por utilizá-las apenas localmente, se
desejar.
Para ativar e desativar as Design Notes do site ou para utilizá-las localmente:


3 Na lista de categorias, à esquerda, clique em Design Notes.
Aparecerá a caixa de diálogo Definição do site, que apresenta as opções das Design Notes.

5 Clique em OK.
Como salvar as informações sobre o arquivo contidas nas Design Notes

É possível criar um arquivo de Design Notes para cada documento ou modelo do site. Pode-se
criar também Design Notes referentes a miniaplicativos, controles ActiveX, imagens, filmes Flash,
objetos Shockwave e campos de imagem nos documentos.
Observação: Se forem adicionadas Design Notes a um arquivo de modelo, os documentos criados com esse
modelo não as herdarão.
106 Capítulo 4
Para adicionar Design Notes a um documento:
1 Enquanto o documento estiver ativo na janela do documento, escolha Arquivo >

Design Notes.
Também é possível selecionar o arquivo no painel Site e, em seguida, escolher Arquivo >
Design Notes.
Observação: Se o arquivo residir em um site remoto, retire ou obtenha o arquivo e, em seguida selecione-o na
pasta local (consulte “Como devolver e retirar os arquivos de um servidor remoto”, na página 95 ou “Como obter
e colocar arquivos”, na página 97).
Aparecerá a caixa de diálogo Design Notes.

3 Clique em OK, para salvar as notas.
O Dreamweaver salvará as notas em uma pasta denominada _notes, no mesmo local que o
arquivo. O nome do arquivo será o mesmo do arquivo do documento, além da extensão .mno.
Por exemplo: se o nome do arquivo for índice.html, o arquivo de Design Notes a ele associado
será denominado índice.html.mno.
Para adicionar Design Notes a um objeto:
1 Selecione o objeto.
2 Clique com o botão direito do mouse. Em seguida, escolha Design Notes, no menu contextual
do objeto.
Aparecerá a caixa de diálogo Design Notes.

4 Clique em OK, para salvar as notas.
O Dreamweaver salvará o arquivo de Design Notes de um objeto em uma pasta _notes, no
mesmo diretório que o arquivo de origem do objeto, que não é necessariamente idêntico ao do
documento no qual aparece o objeto.
Para abrir as Design Notes associadas a um arquivo, siga um dos procedimentos abaixo:
• Selecione um arquivo no painel Site ou abra o arquivo e, em seguida, escolha Arquivo > Design
Notes.
• Na coluna Notas do painel Site, clique duas vezes no ícone amarelo das Design Notes.
Para atribuir um status personalizado às Design Notes:
1 Abra as Design Notes correspondentes a um arquivo ou objeto (consulte o procedimento

anterior).
2 Clique na guia Todas as informações.
3 Clique no botão com o sinal de adição (+).
4 No campo Nome, digite a palavra status.
5 No campo Valor, digite o status.
Se já existir um valor de status, ele será substituído pelo novo valor.
6 Clique na guia Informações básicas e observe que o valor do novo status aparecerá no menu
pop-up Status.
Observação: É possível constar apenas um valor personalizado no menu de status de cada vez. Se esse
procedimento for realizado novamente, o Dreamweaver substituirá o valor de status inserido na primeira vez
pelo novo valor.
Para excluir do site as Design Notes sem associação:

2 Selecione o site e, em seguida, clique em Editar.
3 Na lista de categorias, à esquerda, clique em Design Notes.
4 Clique no botão Limpar.
O Dreamweaver solicitará que verifique se as Design Notes que não estão mais associadas a um
arquivo do site deverão ser excluídas.
Se você utilizar o Dreamweaver para excluir um arquivo ao qual está associado um arquivo de
Design Notes, ambos serão excluídos; por essa razão, geralmente os arquivos órfãos de Design
Notes ocorrerão apenas quando um arquivo for excluído ou renomeado fora do Dreamweaver.
Observação: Se a opção Manter as Design Notes for cancelada antes de clique em Limpar, o Dreamweaver
excluirá todos os arquivos de Design Notes associados ao site.
108 Capítulo 4
Como utilizar as Design Notes no Fireworks e no Flash com o Dreamweaver
Se um arquivo for aberto no Macromedia Fireworks ou no Macromedia Flash e exportado com
outro formato, estes programas salvarão automaticamente, em um arquivo de Design Notes, o
nome do arquivo de origem inicial.
Por exemplo: se você abrir minha_casa.png no Fireworks e exportá-lo como minha_casa.gif, o
Fireworks criará automaticamente um arquivo de Design Notes denominado minha_casa.gif.mno,
contendo o nome do arquivo original, como uma URL de arquivo: absoluto. As Design Notes
correspondentes ao arquivo minha_casa.gif poderão conter a linha abaixo:
fw_source="arquivo:///Meudisco/sites/propriedades/orig/minha_casa.png"
Uma Design Note semelhante do Flash poderia conter a seguinte linha:
fl_source="arquivo:///Meudisco/sites/propriedades/orig/minha_casa.fla"
Observação: Para poder compartilhar as Design Notes, os usuários devem definir o mesmo caminho relativo à raiz
do site. Por exemplo: sites/propriedades/orig.
Quando a imagem for importada para o Dreamweaver, o arquivo de Design Notes será
automaticamente copiado para o site, juntamente com a imagem. Quando a imagem for
selecionada no Dreamweaver e você decidir editá-la no Fireworks (consulte “Como iniciar um
editor externo para arquivos de mídia”, na página 346), este programa abrirá o arquivo original a
ser editado.
Como utilizar os relatórios para aprimorar o fluxo de trabalho

É possível utilizar os relatórios para aprimorar a colaboração entre os membros de uma equipe de
criação para a Web.
É possível executar relatórios de fluxo de trabalho que exibam as pessoas que retiraram certos
arquivos e quais destes apresentam Design Notes a eles associadas. É possível refinar ainda mais os
relatórios das Design Notes, especificando os parâmetros nome/valor.
Para obter mais informações sobre a execução de outros tipos de relatórios, consulte “Como
utilizar os relatórios para testar um site”, na página 508.
Observação: É necessário contar com uma conexão definida a um site remoto, para poder executar os relatórios de
fluxo de trabalho.

Para executar um relatório Retirado por:
1 Abra um documento.
2 Escolha Site > Relatórios.
A caixa de diálogo Relatórios é exibida.
3 Selecione uma categoria e os tipos de relatório a serem executados.

4 Clique em Executar.
Dependendo do relatório a ser criado, será necessário salvar o arquivo, definir o site ou
selecionar uma pasta (se ainda não o tiver feito).
O relatório aparecerá no painel Relatórios de site (no grupo de painéis Resultados).
Para utilizar um relatório:
1 No painel Relatórios de site, clique no cabeçalho da coluna de acordo com a qual deseja
ordenar os resultados.
É possível ordenar por nome de arquivo, número da linha ou descrição. Também é possível
executar vários relatórios diferentes e manter os diversos painéis Resultados abertos.
2 Selecione qualquer linha do relatório e clique no botão Mais informações, no lado esquerdo do
painel Relatórios de site, para obter uma descrição do problema.
As informações aparecerão no painel Referência (no grupo de painéis Código).
3 Clique duas vezes em qualquer linha do relatório, para exibir o código correspondente na
Observação: Na visualização do projeto, o Dreamweaver exibe o problema relatado em código,
em visualização mista.
4 Clique em Salvar o relatório para salvar o relatório.

Quando o relatório for salvo, ele poderá ser importado para um arquivo existente de modelo. Em
seguida, é possível importar o arquivo para um banco de dados ou planilha, e imprimir ou exibi-lo
em um site da Web.
110 Capítulo 4
Sobre o painel Sitespring no Dreamweaver
Utilize o painel Sitespring para exibir o Sitespring diretamente no Dreamweaver. Também é
possível selecionar uma tarefa do painel, estabelecer conexão com a página do Sitespring na Web e
editar a tarefa. Salve quaisquer alterações feitas no Sitespring, retorne ao Dreamweaver e atualize o
painel Sitespring, para examiná-las. O painel Sitespring exibe as tarefas, juntamente com a sua
prioridade, seu status, data de vencimento e o nome do projeto.
Observação: O Sitespring está disponível apenas em inglês. Observe que os comandos de menu e as tomadas de
tela da interface mostrados nessa seção estão em inglês.
Requisitos do sistema
Para poder utilizar o painel Tarefas Sitespring com o Dreamweaver, é necessário que o
Dreamweaver MX ou mais avançado e o Sitespring estejam instalados no sistema ou no servidor.
Se o Sitespring ainda não estiver instalado, efetue o download de uma versão de teste gratuita no
site da Web Macromedia Sitespring. O Sitespring é compatível apenas com os navegadores mais
recentes que apresentam o Flash ativado, como o Netscape Communicator 4.06 ou mais
avançado, e o Microsoft Internet Explorer 5 ou mais avançado.
Como se conectar ao servidor Sitespring

Para poder utilizar o painel Sitespring, é necessário se conectar e efetuar o logon no servidor
Sitespring.
Observação: Para obter mais informações sobre como utilizar o Macromedia Sitespring, consulte a documentação
do mesmo.
Para se conectar ao servidor Sitespring no Dreamweaver:
1 Na janela do documento, escolha Janela > Outros > Sitespring, ou pressione a tecla F7.
Aparecerá a caixa de diálogo Logon em Sitespring.
2 Na caixa de texto Servidor Sitespring, digite a URL correspondente ao servidor Sitespring ao

qual você se conectará. Se você não tiver certeza a respeito da URL, entre em contato com o
administrador do sistema.
3 Nas caixas de texto Nome de usuário e Senha, digite o seu nome de usuário e senha do servidor
Sitespring. A caixa de texto Nome de usuário é sensível a maiúsculas e minúsculas.

4 Se desejar salvar a sua senha no computador, selecione a opção Salvar a senha e Efetue o logon
automático.
Observação: Apenas essa opção permite fechar e abrir o painel Sitespring novamente, dispensando a
necessidade de digitar qualquer informação de logon. Se tiver efetuado o logoff completo do Sitespring, através
do Dreamweaver ou do próprio aplicativo, será necessário digitar essas informações novamente.
5 Clique em Efetue o logon, para se conectar ao servidor Sitespring.

O status da conexão aparecerá acima da caixa de texto Servidor Sitespring. Assim que a
conexão for estabelecida, o painel Sitespring exibirá as tarefas.
Se tiver dificuldades em se conectar à Sitespring, entre em contato com o administrador do
sistema.
Como utilizar o painel Sitespring

Utilize o painel Sitespring para visualizar todas as tarefas ou apenas aquelas associadas a um
determinado projeto. É possível editar uma tarefa e atualizar a lista de tarefas, para examinar as
alterações. A caixa de texto Tarefas exibe as tarefas, sua prioridade, seu status, data de vencimento
e o nome do projeto.
Para utilizar o painel Sitespring:
1 Na janela do documento, escolha Janela > Outros > Sitespring, ou pressione a tecla F7.
2 Efetue o logon no servidor Sitespring, se ainda não o tiver feito (consulte “Como se conectar ao
servidor Sitespring”, na página 111).
O painel Sitespring exibe as tarefas atuais. Ele consiste de uma caixa de texto Tarefas, que exibe
as tarefas abertas, além de um menu e ícones para realizar certas ações. As tarefas são ordenadas
por nome. Clique no cabeçalho de uma coluna, para ordenar de acordo com a mesma. O
painel Sitespring não exibe tarefas com o status Suspenso or Concluído.
112 Capítulo 4
3 Selecione uma dentre as seguintes opções:
• Escolha um determinado projeto no menu pop-up Projeto, para exibir apenas as tarefas a ele
associadas, ou escolha Mostrar todas as tarefas, para exibir todas as tarefas.
• Clique no ícone Atualizar, para atualizar o painel Sitespring e examinar qualquer alteração que
tiver sido feita na tarefa.
Observação: É necessário salvar as alterações no Sitespring para que elas apareçam no painel.
• Selecione uma tarefa na coluna Nome e, em seguida, clique no botão Editar a tarefa, para editá-la.
Para editar as tarefas, também é necessário efetuar o logon no Sitespring, através da página da
Web Efetue o logon. Se você tiver efetuado o logon, aparecerá a respectiva página Editar a
tarefa. Se você ainda não tiver efetuado o logon, aparecerá a página da Web Efetue o logon.
• Clique no ícone Sitespring, para ir diretamente para a página do Sitespring na Web.
Se você já tiver efetuado o logon, a home page do Sitespring aparecerá. Se você ainda não tiver
efetuado o logon, aparecerá a página Efetue o logon.
• Para fechar o painel Sitespring, pressione a tecla F7 ou clique na caixa de fechamento do painel.
Observação: Para evitar efetuar o logon repetidas vezes, é recomendável fechar o painel Sitespring, ao invés de
efetuar o logoff.
• Clique no link Logoff, para efetuar o logoff do Sitespring ou para alterar o usuário.
Aparecerá a caixa de diálogo Logon em Sitespring. Digite outro nome de usuário e outra senha para
alterar o usuário, ou feche a caixa de diálogo, para efetuar a desconexão (consulte “Como efetuar o
logoff do Sitespring no Dreamweaver”, na página 114).

Como efetuar o logoff do Sitespring no Dreamweaver
Ao clicar no link Logoff no painel Sitespring, você também estará efetuando o logoff do Sitespring
no Dreamweaver.
Para efetuar o logoff do Sitespring:
1 No painel Sitespring, clique no link Logoff.

Aparecerá a caixa de diálogo Logon em Sitespring.
2 Feche a caixa de diálogo.

Na próxima vez em que você acessar o painel Sitespring, não será necessário digitar a URL
novamente para se conectar (a não ser que você deseje acessar outro servidor Sitespring), porém será
necessário digitar a sua senha.
114 Capítulo 4
CAPÍTULO 5
Configuração de um documento
O Macromedia Dreamweaver MX oferece um ambiente flexível para se trabalhar com uma

variedade de documentos de desenvolvimento e criação na Web. Além de documentos HTML, é
possível criar e abrir documentos CFML, ASP, JavaScript, CSS ou documentos de texto.
A caixa de diálogo Novo documento fornece diversos tipos de documentos dos quais é possível
criar um novo documento. Nessa interface fácil de utilizar, é possível criar um novo documento
ou um modelo em branco, um documento com base em modelos existentes ou um documento ou
modelo com base em um dos layouts de página projetados fornecidos com o Dreamweaver. É
possível utilizar esses modelos e layouts de página projetados básicos para rapidamente começar a
desenvolver páginas da Web com aparência profissional.
Outras opções de documentos também estão disponíveis na caixa de diálogo Novo documento. É
possível selecionar documentos de texto, tais como documentos JavaScript ou CSS (Folha de
estilo em cascata, Cascading Style Sheet), e documentos de página dinâmica, como páginas
Macromedia ColdFusion, Microsoft Active Server Pages (ASP) e PHP. Se geralmente o usuário
trabalha com um tipo de documento, poderá defini-lo como o tipo de documento padrão para as
novas páginas que criar.
No Dreamweaver, é possível definir facilmente as propriedades de um documento, tais como tags
meta, título de documentos e cores de fundo, além de várias outras propriedades de página na
visualização do projeto ou na visualização do código.
Este capítulo inclui os tópicos a seguir:
• “Como trabalhar com a caixa de diálogo Novo documento”, na página 116
• “Como abrir documentos existentes”, na página 120
• “Definição das propriedades do documento”, na página 121
• “Seleção de elementos na janela do documento”, na página 124
• “Utilização de guias visuais no processo de projeto”, na página 126
• “Como automatizar as tarefas”, na página 129
115
Como criar documentos do Dreamweaver
A caixa de diálogo Novo documento exibe diversos tipos de documentos dos quais é possível criar
uma nova página. O Dreamweaver abre a caixa de diálogo Novo documento ao escolher
Arquivo > Novo. Se o usuário trabalha predominantemente com um tipo de documento, como
páginas HTML, ColdFusion ou páginas ASP (Active Server Pages), convém configurar um tipo
de documento padrão. A configuração de um tipo de documento padrão permite ao usuário abrir
um novo documento de um tipo preferido ao criar um novo documento sem ter de abrir a caixa
de diálogo Novo documento.
Tópicos relacionados
“Como criar um novo documento em branco”, na página 117
“Como abrir documentos existentes”, na página 120
“Como criar um documento a partir de um modelo existente”, na página 119
“Como criar um documento a partir de um arquivo de projeto do Dreamweaver”, na página 117
Como trabalhar com a caixa de diálogo Novo documento

A caixa de diálogo Novo documento fornece diversas opções para a seleção de um novo
documento de trabalho. É possível criar um novo documento das seguintes maneiras:
• É possível começar com um documento em branco.
• É possível utilizar um modelo que define a aparência do documento e determina as partes de
um documento que podem ser editadas.
Para abrir a caixa de diálogo Novo documento:
• Escolha Arquivo > Novo.

A caixa de diálogo Novo documento contém duas guias: Geral e Modelos.
A guia Geral contém vários tipos de documento que podem ser utilizados para criar uma nova
página em branco. É possível selecionar um novo documento nas categorias Página básica, Página
dinâmica e Conjunto de molduras. Crie uma página com base em um tipo de arquivo especial,
como arquivos CSS, JavaScript, VBScript ou de texto, selecionando um documento na categoria
Outro. A categoria Modelos fornece diversos tipos de documentos dos quais é possível criar um
modelo em branco, como modelos HTML e modelos nos quais é possível inserir
comportamentos de servidor.
As categorias Folhas de estilos CSS, Projetos de página e Projetos de páginas (acessíveis) fornecem
arquivos de design pré-criados que você pode utilizar para criar suas próprias páginas. No caso de
folhas de estilos CSS, é possível copiar uma folha de estilos padronizada e, depois, aplicá-la ao
documento.
Dependendo do tipo de documento selecionado, outras opções são exibidas na caixa de diálogo.
Se for selecionado um documento HTML, por exemplo: é possível tornar o documento
compatível com XHTML. Ao selecionar um arquivo de Projetos de página, é possível criar um
documento ou um modelo.
A guia Modelos contém uma lista de sites do Dreamweaver definidos pelo usuário. É possível
escolher um modelo de qualquer um dos sites listados para criar novos documentos com base
nesse modelo.
116 Capítulo 5
Selecione uma categoria para ver uma lista de tipos de documentos disponíveis na lista
Documentos, exibida à direita. Quando o usuário clica em um documento da lista, é exibida a
descrição correspondente e, no caso de documentos das categorias Projetos de página, Folhas de
estilos CSS e Conjuntos de molduras, uma visualização do documento selecionado.
É possível utilizar a opção Preferências, localizada na parte inferior da caixa de diálogo Novo
documento, para definir preferências para o documento padrão, como tipo de documento,
codificação e extensão de arquivo. Além disso, é possível definir uma opção para abrir um novo
documento automaticamente sem utilizar a caixa de diálogo Novo documento. Para obter
informações sobre a definição das preferências de um documento, veja Definição de preferências
do novo documento, na Ajuda do Dreamweaver.
Utilize o link Obter mais conteúdo, exibido na caixa de diálogo Novo documento, para ir para o
Dreamweaver Exchange e efetuar o download de mais conteúdo para o projeto da página.
Como criar um novo documento em branco

É possível utilizar a caixa de diálogo Novo documento para selecionar o tipo de documento que se
deseja criar.
Se, geralmente, você trabalha com um tipo de documento específico, poderá definir um
documento padrão e automaticamente abrir um novo documento com base no documento
padrão por ele definido. Para obter informações, veja Definição de preferências do novo
documento, na Ajuda do Dreamweaver.
Para criar um novo documento em branco:
1 No Dreamweaver, escolha Arquivo > Novo.

A caixa de diálogo Novo documento é exibida. A guia Geral já está selecionada.
2 Na lista Categoria, selecione a categoria do documento a ser criado.
Por exemplo: selecione Página básica para criar um documento HTML ou Página dinâmica
para criar um documento ColdFusion ou ASP e assim por diante.
3 Na lista de documentos, selecione o tipo de página que deseja criar e siga um dos
• Clique em Criar.
• Clique duas vezes no item da lista de documentos.
• Pressione Enter.
A caixa de diálogo é fechada e um novo documento é exibido na janela do documento.
Como criar um documento a partir de um arquivo de projeto do Dreamweaver

O Dreamweaver vem com diversos arquivos de elementos de design e de layout de página com
aparência profissional. É possível utilizar esses arquivos de projeto como pontos de partida para
criar páginas do seu próprio site.
Os arquivos de projeto incluem documentos e modelos que seguem padrões de acessibilidade,
documentos de layout de página com base em tabelas e Folhas de estilos CSS. É possível visualizar
um documento e ler uma breve descrição dos respectivos elementos de design de itens nas
categorias Folhas de estilos CSS, Conjuntos de molduras, Projetos de página e Projetos de página
(acessíveis).
Configuração de um documento 117

Ao criar um documento com base em um arquivo de projeto, o Dreamweaver cria uma cópia do
arquivo. Se o arquivo de projeto inclui links para arquivos de propriedades (tais como imagens,
elementos Flash ou uma Folha de estilos CSS externa), ao salvar o documento, o Dreamweaver
solicita que salve uma cópia dos arquivos dependentes. Selecione o local dos arquivos
dependentes, conforme a sua preferência, ou utilizar a localização da pasta padrão gerada pelo
Dreamweaver (com base no nome de origem do arquivo de projeto).
Também é possível criar um novo modelo a partir de um arquivo de projeto. O modelo já possui
regiões editáveis definidas. É possível criar novas regiões editáveis no modelo. O usuário será
solicitado a salvar o arquivo como um modelo para o site atual. Arquivos vinculados também
serão copiados para o site.
Observação: Se for criado um documento com base em um conjunto de molduras predefinido, apenas a estrutura
do conjunto de molduras será copiada e não o conteúdo da moldura. Além disso, será necessário salvar cada
arquivo de moldura separadamente. Para obter informações sobre como salvar molduras, veja “Como salvar
arquivos de moldura e de conjunto de molduras”, na página 283.
Para criar uma Folha de estilo em cascata:
1 Abra a caixa de diálogo Novo documento e escolher Arquivo > Novo.

2 Na lista Categoria, selecione Folhas de estilos CSS.
A lista de documentos à direita é atualizada com uma seleção de Folhas de estilos CSS.
3 Na lista de documentos, selecione uma folha de estilos para visualizar as propriedades e
descrição correspondentes e siga um dos procedimentos abaixo:
• Clique em Criar.
• Clique duas vezes no item da lista de documentos.
• Pressione Enter.
A caixa de diálogo é fechada e um novo documento CSS é exibido na janela do documento. A
Folha de estilos CSS é aberta na visualização do código.
4 Escolha Arquivo > Salvar como.
5 Na caixa de diálogo Salvar como, navegar até o local onde deseja salvar o arquivo, digite um
nome de arquivo exclusivo para o documento e clique em Salvar.
Para criar um documento Projetos de página:
1 Abra a caixa de diálogo Novo documento e escolher Arquivo > Novo.

2 Na lista Categoria, selecione Projeto de página ou Projeto de página (acessível), dependendo
das necessidades de projeto.
3 Na lista Projetos de página, selecione o documento a ser usado como modelo para a nova
página.
• Para criar um documento, selecione o botão de opção Documento.
• Para criar um novo modelo, selecione o botão de opção Modelo.
118 Capítulo 5
5 Clique em Criar.
Um novo documento é exibido na janela do documento. Se for criado um modelo, serão vistas as
regiões editáveis definidas e o usuário será solicitado a salvar o documento como um modelo para
o site atual.
6 Escolha Arquivo > Salvar para salvar o documento.
Se o arquivo tiver links para arquivos de propriedades, será exibida a caixa de diálogo Copiar os
arquivos dependentes.
7 Na caixa de diálogo Copiar os arquivos dependentes, definir opções para copiar as propriedades
para o site atual.
8 Clique em Copiar para copiar as propriedades para a pasta selecionada e fechar a caixa de
diálogo.
Como criar um documento a partir de um modelo existente

A caixa de diálogo Novo documento pode ser utilizada para selecionar, visualizar e criar um novo
documento a partir de um modelo existente. É possível selecionar um modelo de quaisquer sites
definidos pelo Dreamweaver.
Os documentos da categoria Projeto de página, na caixa de diálogo Novo documento, também
permitem criar modelos. Uma vez que um documento de projeto de página é salvo como um
modelo no site do usuário, ele pode criar páginas com base nesse modelo. Para obter informações,
veja “Como criar um documento a partir de um arquivo de projeto do Dreamweaver”, na
página 117.
Para obter mais informações sobre como trabalhar com modelos e documentos baseados em
modelos, consulte o Capítulo 27, “Sobre os modelos do Dreamweaver”, na página 472.
Para criar um novo documento a partir de um modelo:
1 Escolha Arquivo > Novo para abrir a caixa de diálogo Novo documento.
2 Na guia Modelos, na lista Modelos para, selecione o site do Dreamweaver que contém o
modelo desejado.
3 A lista Site exibe modelos no site selecionado, se houver.
4 Selecione o modelo a ser utilizado.
5 Desmarcar a opção Atualizar a página quando o modelo for alterado se desejar desanexar o
novo documento do modelo.
6 Clique em Criar.
Um novo documento é criado.
7 Salve o documento.

Salva de um documento
Ao salvar um documento, evite utilizar espaços e caracteres especiais nos nomes de arquivos e
pastas. Particularmente, não utilizar caracteres especiais (como é, ç ou ¥) ou pontuação (como
dois pontos, barras inclinadas ou pontos) nos nomes dos arquivos que serão colocados em um
servidor remoto; muitos servidores alteram esses caracteres durante o upload, o que causa o
rompimento dos links para os arquivos. Além disso, não colocar um número no início de um
nome de arquivo.
Para salvar um documento:
1 Escolha Arquivo > Salvar.

2 Na caixa de diálogo que é exibida, navegar até a pasta onde deseja salvar o arquivo.
3 No campo de texto Nome do arquivo, digite um nome para o arquivo.
4 Clique em Salvar para salvar o arquivo.
Como abrir documentos existentes

No Dreamweaver, é possível abrir um documento HTML existente ou qualquer tipo de
documento dinâmico, mesmo que não tenha sido criado no Dreamweaver. É possível abrir o
documento e utilizar o Dreamweaver para editá-lo, beneficiando-se do recurso de criação de
páginas da visualização do projeto ou da visualização do código.
Também é possível abrir arquivos de texto diferentes de HTML, tais como arquivos JavaScript,
arquivos XML, Folhas de estilos CSS ou arquivos de texto salvos por processadores ou editores de
texto.
Determinados arquivos, como um documento CSS, são abertos somente na visualização do
código e permitem editar o código no arquivo. É possível atualizar o documento enquanto se
trabalha no Dreamweaver e, depois, salvar as alterações feitas no arquivo.
Se o documento a ser aberto é um arquivo do Microsoft Word 97, Word 98 ou Word 2000 salvo
como HTML, convém importá-lo para o Dreamweaver em vez de abri-lo. Ao importar um arquivo
HTML do Word, o Dreamweaver solicita limpar as tags de markup irrelevantes que o Word insere
em arquivos HTML. É possível utilizar o comando Limpar o HTML do Word para definir uma cor
de fundo para a página e limpar a formatação da Folha de estilos CSS no documento importado.
Para abrir um arquivo existente, seguir um dos procedimentos abaixo:
1 No Dreamweaver, escolher Arquivo > Abrir.

2 Na caixa de diálogo que aparece, selecione o arquivo a ser aberto.
3 Clique em Abrir.
O documento é aberto na janela do documento.
Observação: Por padrão, documentos JavaScript, de texto e de Folhas de estilos CSS são abertos na
visualização do código. Para obter informações sobre como alterar a definição de um editor de texto externo e
exibir esses tipos de arquivos, veja “Como iniciar um editor externo para arquivos de mídia”, na página 346.
120 Capítulo 5
Para abrir e importar um arquivo HTML do Microsoft Word:
1 No Dreamweaver, escolher Arquivo > Importar > HTML do Word.

É exibida a caixa de diálogo Selecionar o arquivo HTML do Word a ser importado.
2 Na caixa de diálogo, selecione o documento a ser aberto.
3 Clique em Abrir.
O Dreamweaver abre o documento em uma nova janela e a caixa de diálogo Limpar o HTML
do Word é exibida.
4 Escolha opções na guia Básica ou Detalhes para selecionar as opções de limpeza a serem
aplicadas ao documento.
Para obter mais informações sobre as opções de limpeza, veja Como limpar o HTML do Word,
na Ajuda do Dreamweaver.
5 Clique em OK.
O Dreamweaver aplica as definições de limpeza ao novo documento e é exibido um log das
alterações feitas.
6 Salve o documento.
Definição das propriedades do documento

Os títulos de páginas, as cores e imagens de fundo, as cores do texto e dos links e as margens são
propriedades básicas de todo documento HTML. O título da página identifica e nomeia o
documento. Uma cor ou imagem de fundo define a aparência geral do documento. As cores do
texto e dos links ajudam os visitantes do site a distinguir entre texto comum e hipertexto e também
a identificar os links que foram ou não visitados.
Para obter informações sobre como preencher a caixa de diálogo Propriedades da página, veja
Seleção de propriedades da página, na Ajuda do Dreamweaver.
Alteração do título do documento

O título de uma página HTML ajuda os visitantes do site a controlar o que estão exibindo
enquanto navegam e também identifica a página nas listas de histórico e marcadores do visitante.
Se uma página não tiver um título, ela será exibida na janela do navegador e nessas listas como um
Documento sem título. Observar que o ato de salvar um documento e lhe atribuir um nome não é
o mesmo que dar um título a uma página. Para localizar todos os documentos sem título
existentes no site, utilizar o comando > Relatórios do site; veja “Como utilizar os relatórios para
testar um site”, na página 508.
Para alterar o título de uma página:
1 Com o documento aberto, seguir um dos procedimentos abaixo:

• Escolha Modificar > Propriedades da página.
• Escolha Exibir > Barra de ferramentas (se ainda não estiver selecionada).
• Clique com o botão direito do mouse em uma área vazia do documento e, em seguida,
selecione Propriedades da página.
2 Na caixa de texto Título, digite o título da página e pressione Enter.

3 Se estiver editando o título na caixa de diálogo Propriedades da página, clique em OK.
O título é exibido na barra de título da janela do documento e na barra de ferramentas, se
estiver sendo exibida. O nome do arquivo da página e a pasta na qual o arquivo é salvo são
exibidos entre parênteses ao lado do título, na barra de título. Um asterisco indica que o
documento contém alterações que ainda não foram salvas.
Definição de uma imagem de fundo ou de uma cor de fundo para a página

Para definir uma imagem ou cor de fundo da página, utilizar a caixa de diálogo Propriedades da
página. Se utilizar tanto uma imagem de fundo quanto uma cor de fundo, a cor aparecerá durante
o download da imagem e, então, esta cobrirá a cor. Se a imagem de fundo contiver algum pixel
transparente, a cor de fundo transparecerá.
Para definir uma imagem ou cor de fundo:
1 Escolha Modificar > Propriedades da página ou selecionar Propriedades da página, no

menu contextual, na visualização do projeto da janela do documento.
2 Para definir uma imagem de fundo, clique no botão Procurar e, depois, procurar a imagem e
selecioná-la. Uma alternativa é digitar o caminho da imagem de fundo na caixa Imagem de
fundo.
O Dreamweaver colocará lado a lado (repetirá) a imagem de fundo se esta não preencher toda a
janela, exatamente como fazem os navegadores. Para que a imagem de fundo não seja colocada
lado a lado, utilizar a opção Folhas de estilo em cascata para desativar a repetição de imagens.
Veja Definição de propriedades de fundo de estilos CSS, na Ajuda do Dreamweaver.
3 Para definir uma cor de fundo, clique na caixa Cor de fundo e selecionar uma cor no seletor de
cores.
Como trabalhar com as cores

No Dreamweaver, muitas caixas de diálogo, assim como o inspetor de propriedades de diversos
elementos de páginas, contêm uma caixa de cores, que abre um seletor de cores. Utilize o seletor
de cores para escolher uma cor para um elemento da página.
Para escolher uma cor no Dreamweaver:
1 Clique em uma caixa de cores de qualquer caixa de diálogo ou do inspetor de propriedades.

O seletor de cores é exibido.
caixa de cores do inspetor

de propriedades
122 Capítulo 5
• Utilize o conta-gotas para selecionar uma exemplo de cor na paleta. Todas as cores exibidas nas
paletas Cubos de cor (padrão) e Tom contínuo são aceitas pela Web, mas as cores de outras
paletas não (para obter mais informações, veja “Sobre as cores aceitas pela Web”, na
página 123).
• Utilize o conta-gotas para selecionar uma cor de qualquer lugar da tela, inclusive fora das janelas
do Dreamweaver. Se você clicar na área de trabalho ou em outro aplicativo, o Dreamweaver
selecionará a cor do local clicado, porém é possível alternar para o outro aplicativo; neste caso,
clique em uma janela do Dreamweaver, para continuar a trabalhar neste programa, ou mantenha
pressionado o botão do mouse enquanto move do Dreamweaver para a área de trabalho, a fim de
evitar sair do Dreamweaver.
• Para aumentar a seleção de cores, utilizar o menu pop-up localizado no canto superior direito
do seletor de cores. É possível selecionar Cubos de cor, Tom contínuo, Windows, Mac OS,
Tons de cinza e Passar à cor aceita pela Web.
Deve-se observar que as paletas Cubos de cor e Tom contínuo são aceitas pela Web, mas as
paletas Windows, Mac OS e Tons de cinza não são. Se estiver utilizando uma paleta que não
for aceita pela Web e, em seguida, escolher Passar à cor aceita pela Web, o Dreamweaver
substituirá a cor selecionada pela cor mais próxima aceita pela Web. Em outras palavras, é
possível que a cor não corresponda à que for visualizada.
• Para limpar a cor atual sem ter de escolher outra cor, clique no botão Tachado.
• Para abrir o seletor de cores do sistema, clique no botão Roda de cores. Para obter mais
informações, veja “Sobre as cores aceitas pela Web”, na página 123.
Sobre as cores aceitas pela Web

Em HTML, as cores são expressas como valores hexadecimais (por exemplo: #FF0000) ou como
nomes de cores (vermelho). Uma cor aceita pela Web tem a mesma aparência no Netscape
Navigator e no Microsoft Internet Explorer nos sistemas Windows em execução no modo de 256
cores. Na prática, diz-se que há 216 cores comuns e que qualquer valor hexadecimal que combine
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.
No entanto, testes revelam que existem somente 212 cores aceitas pela Web em vez de 216, pois o
Internet Explorer, quando executado no Windows, não interpreta corretamente as cores #0033FF
(0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) e #33FF00 (51,255,0).
No Dreamweaver, as paletas Cubos de cor (padrão) e Tom contínuo utilizam a paleta de 216 cores
aceitas pela Web; a seleção de uma cor de uma dessas paletas exibirá o valor hexadecimal da cor.
Para escolher uma cor fora da faixa de cores aceitas pela Web, abrir o seletor de cores do sistema,
clicando no botão Roda de cores, localizado no canto superior direito do seletor de cores do
Dreamweaver. O seletor de cores do sistema não se limita às cores aceitas pela Web.
As versões para UNIX do Netscape Navigator utilizam uma paleta de cores diferente daquela
usada nas versões para Windows e Macintosh. Se a programação for exclusiva para navegadores
UNIX (ou se o público-alvo for composto por usuários do Windows ou Macintosh com
monitores de 24 bits e por usuários do UNIX com monitores de 8 bits), deve-se considerar a
possibilidade de utilizar valores hexadecimais que combinem os pares 00, 40, 80, BF ou FF, que
produzem cores aceitas pela Web para o SunOS.

Definição das cores padrão do texto
Defina as cores padrão do texto comum, links, links visitados e dos links ativos na caixa de
diálogo Propriedades da página ou escolher um esquema de cores predefinido para definir as cores
do texto e do fundo da página (veja “Como trabalhar com as cores”, na página 122).
Observação: A cor dos links ativos é a cor assumida por um link quando se clica nele. Alguns navegadores da Web
podem não utilizar a cor que você especificar.
Para definir as cores padrão do texto, seguir um dos procedimentos abaixo:
• Escolha Modificar > Propriedades da página e, em seguida, escolher as cores para as opções Cor
do texto, Cor do link, Links visitados e Links ativos.
• Escolha Comandos > Definir o esquema de cores e, em seguida, escolher uma cor de fundo e
um conjunto de cores para o texto e os links.
A caixa de exemplo exibe a aparência do esquema de cores no navegador.
Seleção de elementos na janela do documento

Para selecionar um elemento na visualização do projeto da janela do documento, clique no
elemento. Se um elemento está invisível, é necessário torná-lo visível para poder selecioná-lo.
Para selecionar elementos, utilizar as seguintes técnicas:
• Para selecionar um elemento visível na janela do documento, clique nele ou arrastar o mouse sobre
o elemento.
• Para selecionar um elemento invisível, escolher Exibir > Auxílios visuais > Elementos invisíveis
(se esse item de menu já não estiver selecionado) e, em seguida, clique no marcador do
elemento na janela do documento.
Alguns objetos são exibidos na página em um lugar diferente de onde foi inserido o código
correspondente. Por exemplo: uma camada pode estar em qualquer posição na página, mas o
código que a define estará em uma posição fixa. Quando os elementos invisíveis estiverem
sendo exibidos, o Dreamweaver mostrará os marcadores na janela do documento para indicar a
localização do código de tais elementos. A seleção de um marcador seleciona o elemento
inteiro. Por exemplo: a seleção do marcador de uma camada seleciona toda a camada (veja
“Sobre os elementos invisíveis”, na página 125).
• Para selecionar uma tag completa (inclusive o seu conteúdo, se houver), clique em uma tag do
seletor de tags, localizado na parte inferior esquerda da janela do documento (o seletor de tags é
exibido tanto na visualização do projeto como na visualização do código). O seletor sempre
mostra as tags que contêm a seleção atual ou o ponto de inserção. A tag mais à esquerda é a tag
mais externa que contém a seleção atual ou o ponto de inserção. A tag seguinte está contida na
tag mais externa e assim por diante. A tag mais à direita é a tag mais interna, que contém a
seleção atual ou o ponto de inserção.
No exemplo a seguir, o ponto de inserção está em uma tag de parágrafo, <p>. Para selecionar a
tabela na qual há um marcador de parágrafo, selecione a tag <table> à esquerda da tag <p>.
124 Capítulo 5
Para ver o código HTML associado ao texto ou objeto selecionado, seguir um dos
• Na barra de ferramentas Documento, clique no botão Mostrar a visualização do código.

• Selecione Exibir > Código.
• Na barra de ferramentas Documento, clique no botão Mostrar visualizações de código e do
projeto.
• Selecione Exibir > Código e projeto.
• Selecione Janela > Outros > Inspetor de código.
Para obter mais informações sobre a visualização do código, veja “Exibição do seu código”, na
página 185.
Ao selecionar um elemento em um dos editores de código (a visualização do código ou o inspetor
de código), ele também é selecionado na janela do documento. Talvez seja preciso sincronizar as
duas visualizações para que a seleção seja exibida; veja “Exibição do seu código”, na página 185.
Sobre os elementos invisíveis

Alguns códigos HTML não possuem uma representação visível em um navegador. Por exemplo:
as tags comment não são exibidas nos navegadores. Entretanto, enquanto se está criando uma
página, pode ser útil selecionar tais elementos invisíveis, editá-los, movê-los e excluí-los. O
Dreamweaver permite especificar se ícones devem ser exibidos marcando a localização de
elementos invisíveis na visualização do projeto da janela do documento.
Para exibir ou ocultar os ícones marcadores de elementos invisíveis, escolher Exibir > Auxílios
visuais > Elementos invisíveis. A exibição de elementos invisíveis permite selecioná-los e alterar as
suas propriedades no inspetor de propriedades. A sua ocultação permite examinar a página mais
detalhadamente, da maneira como ela será exibida no navegador. Observar que a exibição dos
elementos invisíveis pode alterar levemente o layout da página, movendo outros elementos alguns
pixels. Portanto, para obter uma precisão no layout, deve-se ocultar os elementos invisíveis.
Para indicar os marcadores de elementos que são exibidos ao escolher a opção Exibir > Auxílios
visuais > Elementos invisíveis, é possível definir opções nas preferências de Elementos invisíveis.
Por exemplo: pode-se especificar que as âncoras com nome deverão ficar visíveis, mas não as
quebras de linha. Para uma explicação de cada preferência de Elementos invisíveis, veja Definição
das preferências de elementos invisíveis, na Ajuda do Dreamweaver.
É possível criar determinados elementos invisíveis (tais como comentários e âncoras com nome)
utilizando botões da categoria Comuns da barra Inserir (veja “Utilização da barra Inserir:”, na
página 46). Em seguida, é possível modificar esses elementos utilizando o inspetor de
propriedades.

Utilização de guias visuais no processo de projeto
O Dreamweaver fornece diversos tipos de guias visuais para auxiliá-lo a projetar os documentos e
prever (aproximadamente) a aparência que eles terão nos navegadores. Siga todos os
• Ajuste instantaneamente a janela do documento ao tamanho desejado para veja como os
elementos se ajustam à página. Veja “Redimensionamento da janela do documento”, na
página 42.
• Utilize as réguas para que sirvam como um guia visual ao posicionar e redimensionar camadas
ou tabelas.Veja “Exibição das réguas”, na página 126.
• Utilize uma imagem de rastreamento como o fundo da página para ajudar a duplicar um
projeto criado em um aplicativo de edição de imagens ou ilustrações, como o Macromedia
Fireworks. Veja “Utilização de uma imagem de rastreamento”, na página 126.
• Utilize a grade para posicionar e redimensionar as camadas com precisão. As marcas da grade
exibidas na página ajudam a alinhar as camadas e, quando o encaixe for ativado, as camadas se
encaixarão automaticamente no ponto de grade mais próximo ao serem redimensionadas ou
movidas (outros objetos, como imagens e parágrafos, não se encaixam na grade). O encaixe
funcionará independentemente da visibilidade da grade. Veja “Encaixe de camadas na grade”,
na página 414.
Exibição das réguas

As réguas podem ser exibidas nas bordas superior e esquerda da página, marcadas em pixels,
polegadas ou centímetros.
Para alterar as definições de régua, seguir um dos procedimentos abaixo:
• Para mostrar ou ocultar as réguas, escolher Exibir > Réguas > Mostrar.
• Para alterar a origem, arrastar o ícone de origem da régua para qualquer lugar na página. Este
ícone é exibido no canto superior esquerdo da visualização do projeto da janela de documento
enquanto as réguas estão sendo exibidas. Para redefinir a origem para a posição padrão, escolher
Exibir > Réguas > Redefinir a origem.
• Para alterar a unidade de medida, escolher Pixels, Polegadas ou Centímetros no submenu
Exibir > Réguas.
Utilização de uma imagem de rastreamento

Utilize uma imagem de rastreamento como guia para recriar o projeto de uma página da qual foi
feito um protótipo em um aplicativo gráfico. As imagens de rastreamento são imagens JPEG, GIF
ou PNG que são colocadas no fundo da janela do documento. É possível ocultar a imagem,
definir a sua opacidade e alterar a sua posição.
A imagem de rastreamento fica visível apenas no Dreamweaver. Ela nunca fica visível quando a
página é exibida em um navegador. Quando a imagem de rastreamento fica visível, a imagem e a
cor de fundo reais da página não podem ser visualizadas na janela do documento; contudo, elas
aparecem quando a página é exibida em um navegador.
126 Capítulo 5
Para colocar uma imagem de rastreamento na janela do documento:

• Escolha Exibir > Imagem de rastreamento > Carregar.
• Escolha Modificar > Propriedades da página e, em seguida, clique no botão Procurar, ao lado
da caixa de texto Imagem de rastreamento.
2 Na caixa de diálogo que é exibida, selecione um arquivo de imagem e clique em Selecionar.
3 A caixa de diálogo Propriedades da página é exibida. Especifique a transparência da imagem,
arrastando o botão deslizante Transparência da imagem, e clique em OK.
Para alternar para outra imagem de rastreamento ou alterar a transparência da imagem de
rastreamento atual a qualquer momento, escolher Modificar > Propriedades da página.
Para exibir ou ocultar a imagem de rastreamento:
Escolha Exibir > Imagem de rastreamento > Mostrar.
Para alterar a posição de uma imagem de rastreamento:
Escolha Exibir > Imagem de rastreamento > Ajustar a posição. Depois, seguir um dos
• Para especificar com precisão a posição da imagem de rastreamento, digite valores de
coordenadas nas caixas de texto X e Y.
• Para mover a imagem um pixel de cada vez, utilizar as teclas de seta.
• Para mover a imagem cinco pixels de cada vez, pressionar a tecla Shift e uma tecla de seta.
Para redefinir a posição da imagem de rastreamento:
Escolha Exibir > Imagem de rastreamento > Redefinir a posição. A imagem de rastreamento
retorna ao canto superior esquerdo da janela do documento (coordenadas 0,0).
Para alinhar a imagem de rastreamento a um elemento selecionado:
1 Selecione um elemento na janela do documento.

2 Escolha Exibir > Imagem de rastreamento > Alinhar com a seleção.
O canto superior esquerdo da imagem de rastreamento é alinhado com o canto superior
esquerdo do elemento selecionado.

Visualização e edição do conteúdo do HEAD
Os arquivos HTML são compostos por duas seções principais: a seção head e a seção body. A seção
body é a parte principal do documento, a parte visível que contém texto, imagens, etc. A seção
head é a parte invisível, com exceção do título do documento, que é exibido nas barras de título
das janelas dos navegadores e do Dreamweaver. Cada página criada deve ter um título.
A seção head também contém outras informações importantes, como o tipo do documento, a
codificação de idioma, as funções e variáveis JavaScript e VBScript, as palavras-chave e os
indicadores de conteúdo para os mecanismos de pesquisa, bem como definições de estilo. Não é
necessário fornecer todos esses elementos para cada página; é possível, por exemplo: fornecer
somente as palavras-chave e os indicadores de conteúdo da home page. É possível exibir os
elementos da seção head utilizando-se o menu Exibir, a visualização do código da janela do
documento ou o inspetor de código.
Para exibir os elementos da seção head de um documento:
Escolha Exibir > Conteúdo do HEAD. Para cada elemento do conteúdo do head, é exibido um
marcador na parte superior da janela do documento na visualização do projeto.
Observação: Se a janela do documento estiver definida para mostrar somente a visualização do código, a opção
Exibir > Conteúdo do HEAD estará esmaecida.
Para inserir um elemento na seção head de um documento:

• Na categoria Head da barra Inserir, clique em um dos botões de objeto.
• Escolha um item no submenu Inserir > Tags do cabeçalho.
2 Inserir as opções para o elemento na caixa de diálogo que é exibida ou no inspetor
de propriedades.
Para editar um elemento na seção head de um documento:
1 Escolha Exibir > Conteúdo do HEAD.

2 Clique em um dos ícones na seção head para selecioná-lo.
3 Defina ou modificar as propriedades do elemento no inspetor de propriedades.
Para obter informações sobre as propriedades de determinados elementos do head, ver os tópicos a
seguir da Ajuda do Dreamweaver:
• Definição de propriedades meta
• Definição de propriedades de título
• Definição de propriedades de palavras-chave
• Definição de propriedades de descrição
• Definição de propriedades de atualização
• Definição de propriedades de base
• Definição de propriedades de link
128 Capítulo 5
Como automatizar as tarefas
Ao criar documentos, talvez se deseje executar a mesma tarefa várias vezes. Esta seção explica
como utilizar o painel Histórico para automatizar tarefas repetitivas.
Para repetir uma série de etapas uma ou duas vezes, deve-se executá-las diretamente no painel
Histórico, que registra as etapas executadas pelo usuário enquanto ele trabalha em um documento
(para informações básicas sobre o painel Histórico, veja “Sobre o painel Histórico”, na página 53).
Para automatizar uma tarefa realizada com freqüência, deve-se criar um novo comando que
execute essa tarefa automaticamente.
Alguns movimentos do mouse, como o ato de clique ou arrastar para selecionar um elemento na
janela do documento, não poderão ser executados ou salvos como parte de comandos salvos. Ao
realizar um destes movimentos, uma linha preta é exibida no painel Histórico (embora a linha não
estará óbvia enquanto uma outra ação não for efetuada). Para evitar movimentos que não podem
ser executados novamente, utilizar as teclas de seta em vez do mouse para mover o ponto de
inserção na janela do documento. Para efetuar ou estender uma seleção, manter pressionada a
tecla Shift ao pressionar uma tecla de seta.
Observação: Se uma linha preta de indicação do movimento do mouse aparecer enquanto você estiver
executando uma tarefa que deseja repetir mais tarde, é possível desfazer até antes desta etapa e tentar novamente,
talvez utilizando as teclas de seta.
Algumas outras etapas específicas também não podem ser repetidas, como arrastar um elemento
de página para outro local na página. Ao efetuar uma destas etapas, um ícone de comando de
menu com um pequeno X vermelho é exibido no painel Histórico.
As etapas serão repetidas da mesma forma como foram executadas originalmente. Elas não podem
ser modificadas enquanto estiverem sendo executadas. Por exemplo: se a cor de uma célula de
tabela tiver sido anteriormente alterada para vermelho, a aplicação dessa etapa a uma outra célula
de tabela também alterará sua cor para vermelho; é impossível especificar uma cor diferente
quando a mesma etapa é aplicada a uma nova célula.
Repetição de etapas
Para repetir a última etapa executada, utilizar o comando Editar >Repetir ou o atalho de teclado
Control+Y. O nome deste comando do menu Editar é alterado para refletir a última etapa
executada; por exemplo: se a última etapa tiver sido a digitação de um texto, o nome do comando
será Repetir a digitação (é impossível utilizar o comando Repetir imediatamente após uma
operação Desfazer ou Refazer).
Para repetir as etapas que diferirem da mais recente ou para repetir diversas etapas ao mesmo tempo,
utilizar o painel Histórico(para informações básicas sobre o painel Histórico, veja “Sobre o painel
Histórico”, na página 53).
Observar que as etapas executadas novamente serão aquelas que tiverem sido selecionadas
(realçadas) e não necessariamente a etapa que está indicada pelo controle deslizante.
Para repetir uma etapa:
No painel Histórico, selecione a etapa e clique no botão Executar novamente. A etapa será
executada novamente e uma cópia dela será exibida no painel Histórico.

Para repetir uma série de etapas adjacentes:
1 Selecione as etapas no painel Histórico, seguindo um dos procedimentos abaixo:

• Arrastar de uma etapa para outra (não arrastar o controle deslizante, arrastar apenas do
identificador de texto de uma etapa até o identificador de texto de uma outra etapa).
• Selecione a primeira etapa e, em seguida, manter a tecla Shift pressionada e clique na última
etapa ou selecionar a última etapa e, depois, manter a tecla Shift pressionada e clique na
primeira etapa.
Observação: Embora seja possível selecionar uma série de etapas que inclui uma linha preta de indicação do
movimento do mouse, esse movimento do mouse é ignorado quando as etapas são executadas novamente.
2 Clique em Executar novamente.

As etapas serão executadas novamente na ordem e uma nova etapa, denominada Executar
novamente as etapas, será exibida no painel Histórico.
Para repetir etapas não-adjacentes:
1 Selecione uma etapa e, em seguida, manter a tecla Control pressionada e clique nas outras
etapas.
Também é possível clique na etapa selecionada mantendo a tecla Control pressionada (no
Windows) para desmarcar uma etapa selecionada.
2 Clique em Executar novamente.
As etapas selecionadas serão executadas novamente na ordem e uma nova etapa, denominada
Executar novamente as etapas, será exibida no painel Histórico.
Aplicação de etapas a um outro objeto

É possível aplicar um conjunto de etapas do painel Histórico a qualquer objeto na janela
do documento.
Para aplicar as etapas do painel Histórico a um novo objeto:
1 Selecione o objeto.
2 Selecione as etapas relevantes no painel Histórico e, em seguida, clique em Executar
novamente.
Aplicação de etapas a vários objetos

Se forem selecionados diversos objetos em um documento aos quais se aplicarão as etapas do
painel Histórico, os objetos serão tratados como uma única seleção e o Dreamweaver tentará
aplicar as etapas a esta seleção combinada. Por exemplo: é impossível selecionar cinco imagens e
aplicar a mesma alteração de tamanho a cada uma delas ao mesmo tempo. Uma alteração de
tamanho é uma operação que deve ser aplicada a cada imagem individualmente e não a um
conjunto de imagens.
Para aplicar uma série de etapas a cada objeto existente em um conjunto de objetos, é necessário
que a última etapa da série selecione o próximo objeto do conjunto. O procedimento a seguir
demonstra este princípio em uma determinada situação: definição do espaçamento vertical e
horizontal de uma série de imagens.
130 Capítulo 5
Para definir o espaçamento vertical e horizontal de uma série de imagens:
1 Inicie com um documento no qual cada linha consiste em uma pequena imagem (como um
marcador gráfico ou um ícone) seguida de texto. O objetivo é manter as imagens afastadas do
texto e de outras imagens acima e abaixo delas.
2 Abra o inspetor de propriedades (Janela > Propriedades) caso não esteja aberto.
3 Selecione a primeira imagem.
4 No inspetor de propriedades, digite números nas caixas de texto Espaço V e Espaço H para
definir o espaçamento entre as imagens.
5 Clique na imagem novamente para tornar a janela do documento ativa sem mover o ponto de
inserção.
6 Pressione a tecla de seta à esquerda para mover o ponto de inserção para a esquerda da imagem.
Em seguida, pressionar a tecla de seta para baixo a fim de mover o ponto de inserção uma linha
abaixo, deixando-o à esquerda da segunda imagem da série. Pressione as teclas Shift+seta à
direita para selecionar a segunda imagem.
Observação: Não selecionar a imagem clicando nela, pois desse modo não será possível executar todas as
etapas novamente.
7 Selecione as etapas do painel Histórico que correspondem à alteração do espaçamento da

imagem e à seleção da próxima imagem. Clique no botão Executar novamente para reexecutar
essas etapas.
O espaçamento da imagem atual é alterado e a próxima imagem é selecionada.
8 Continuar clicando em Executar novamente até que todas as imagens sejam espaçadas da
forma correta.
Para aplicar etapas a um objeto de um outro documento, utilizar o botão Copiar as etapas; veja
“Como copiar e colar as etapas entre documentos”, na página 132.

Como copiar e colar as etapas entre documentos
Cada documento aberto tem seu próprio histórico de etapas. É possível copiar as etapas de um
documento e colá-las em outro.
Observação: Copie as etapas (um botão do painel Histórico) é diferente de Copiar (no menu Editar). É impossível
utilizar Editar > Copiar para copiar as etapas, embora elas sejam coladas com o comando Editar > Colar.
O fechamento de um documento limpará o seu histórico. Se tiver certeza de que desejará utilizar
etapas de um documento após tê-lo fechado, copiar as etapas usando Copiar as etapas (ou salvá-las
como um comando; veja “Criação de novos comandos a partir de etapas do histórico”, na
página 132) antes de fechar o documento.
As etapas que incluem um comando Copiar ou Colar devem ser copiadas com cuidado:
• Não utilizar Copiar as etapas se uma das etapas for um comando Copiar; talvez não seja
possível colar estas etapas da maneira desejada.
• Se as etapas incluírem um comando Colar, será impossível colá-las, a não ser que também
incluam um comando Copiar antes do comando Colar.
Se as etapas forem coladas em um editor de texto ou na visualização do código ou no inspetor de
código, elas serão exibidas como código JavaScript. Este procedimento poderá ser útil para
aprender como gravar os seus próprios scripts. Para obter mais informações sobre como utilizar o
JavaScript no Dreamweaver, veja “Como gravar e editar o código”, na página 203.
Para reutilizar as etapas de um documento em outro documento:
1 Inicie com o documento que contém as etapas a serem reutilizadas.

2 Selecione as etapas no painel Histórico.
3 No painel Histórico, clique no botão Copiar as etapas para copiar essas etapas.
4 Abra o outro documento.
5 Coloque o ponto de inserção no local desejado ou selecionar um objeto ao qual deseja
aplicar as etapas.
6 Escolha Editar > Colar para colar as etapas.
As etapas serão executadas novamente à medida que forem coladas no painel Histórico do
documento. O painel Histórico mostra as etapas como uma única etapa, denominada Colar as
etapas.
Criação de novos comandos a partir de etapas do histórico

É possível salvar um conjunto de etapas do histórico como um comando com nome, que se
tornará disponível no menu Comandos.
Crie e salvar um novo comando se houver a probabilidade de utilizar novamente um determinado
conjunto de etapas no futuro, principalmente se desejar utilizar estas etapas sempre que iniciar o
Dreamweaver; os comandos salvos são mantidos em caráter permanente (a menos que sejam
excluídos), enquanto os comandos gravados são descartados ao sair do Dreamweaver; as
seqüências copiadas de etapas são descartadas quando outro elemento é copiado.
É possível editar ou excluir os nomes de comandos colocados no menu Comandos utilizando
Comandos > Editar a lista de comandos. É mais complicado editar e excluir os comandos
incluídos no menu Comandos (ou seja, os comandos que não foram adicionados
voluntariamente).
132 Capítulo 5
Para criar um comando:
1 Selecione a etapa ou conjunto de etapas no painel Histórico.

2 Clique no botão Salvar como comando ou escolher Salvar como comando no menu contextual
do painel Histórico.
3 Digite um nome para o comando e clique em OK.
O comando é exibido no menu Comandos.
Observação: O comando é salvo como um arquivo JavaScript (ou, às vezes, como um arquivo HTML) na pasta
Dreamweaver/Configuration/Commands.
Para utilizar um comando salvo:
1 Selecione um objeto ao qual se deseja aplicar o comando ou colocar o ponto de inserção no

local desejado.
2 Escolha o comando no menu Comandos.
Para editar os nomes de comandos no menu Comandos:
1 Escolha Comandos > Editar a lista de comandos.

2 Selecione o comando a ser renomeado e digitar um novo nome para ele.
3 Clique em Fechar.
Para excluir um nome do menu Comandos:
1 Escolha Comandos > Editar a lista de comandos.

2 Selecione um comando.
3 Clique em Excluir e, depois, em Fechar.
Gravação de comandos
O Dreamweaver permite gravar um comando temporário a ser utilizado por um curto período de
tempo. São estas as principais diferenças entre essa abordagem e a reexecução das etapas do painel
Histórico (veja “Repetição de etapas”, na página 129):
• As etapas são gravadas à medida que são executadas, dispensando a necessidade de selecioná-las
no painel Histórico antes de reexecutá-las.
• Durante a gravação, o Dreamweaver impede que sejam efetuados movimentos do mouse que
não possam ser gravados (como clicar para selecionar um elemento de uma janela ou arrastá-lo
para um novo local).
• Se você alternar para um outro documento durante a gravação, o Dreamweaver não gravará as
alterações feitas no outro documento. Observar o ponteiro do mouse para saber se a gravação
está sendo processada ou não.
O Dreamweaver mantém apenas um comando gravado por vez; assim que for iniciada a gravação
de um novo comando, o antigo se perderá. Para salvar um novo comando sem perder um
comando já gravado, salvar o comando no painel Histórico.
Uma vez gravado o comando, é possível salvá-lo utilizando o painel Histórico.

Para gravar temporariamente uma série de etapas utilizadas com freqüência:
1 Escolha Comandos > Iniciar a gravação ou pressionar Control+Shift+X.

O ponteiro se altera, indicando que um comando está sendo gravado.
2 Ao terminar a gravação, escolher Comandos > Parar a gravação ou pressionar Control+Shift+X.
Para reexecutar um comando gravado:
Escolha Comandos > Executar o comando gravado ou pressionar Control+Shift+R.
Para salvar um comando gravado:
1 Escolha Comandos > Executar o comando gravado para executar o comando novamente.
Uma etapa denominada Executar o comando é exibida na lista de etapas do painel Histórico.
2 Selecione a etapa Executar o comando e clique no botão Salvar como comando.
3 Digite um nome para o comando e clique em OK.
Observação: O comando é exibido no menu Comandos.
134 Capítulo 5
Parte II
Parte II
Como preparar a
criação de sites
dinâmicos
Se você estiver construindo um aplicativo para a Web

dinâmico, comece definindo um servidor de aplicativos e
conectando-se a um banco de dados.
• Capítulo 6, “Configuração de um aplicativo para a Web”
• Capítulo 7, “Conexões de banco de dados para
programadores ColdFusion”
programadores ASP.NET”
programadores ASP”
programadores JSP”
programadores PHP”
CAPÍTULO 6
Configuração de um aplicativo para a Web
Este capítulo descreve como configurar o sistema para criar aplicativos para a Web no
Macromedia Dreamweaver MX.
Observação: Se desejar criar o aplicativo de exemplo para a Web instalado com o Dreamweaver, veja a Ajuda do
Dreamweaver (Ajuda > Como utilizar o Dreamweaver).
Este capítulo contém as seções a seguir:

• “Uma nota para os usuários do Dreamweaver UltraDev 4”, na página 137
• “O que é necessário para criar aplicativos para a Web”, na página 138
• “Configuração de um servidor da Web”, na página 139
• “Configuração de um servidor de aplicativos”, na página 139
• “Como criar uma pasta raiz para o aplicativo”, na página 142
• “Como definir um site do Dreamweaver”, na página 142
• “Como efetuar a conexão com um banco de dados”, na página 146
• “Como solucionar erros do servidor de aplicativos”, na página 146
Uma nota para os usuários do Dreamweaver UltraDev 4

Caso seja usuário do Macromedia Dreamweaver UltraDev 4, provavelmente seu sistema já está
configurado para criar aplicativos para a Web. Se você instalou o Dreamweaver MX junto com o
UltraDev 4, todos os sites do UltraDev foram automaticamente importados para o Dreamweaver.
Não é necessário redefini-los no Dreamweaver MX.
No entanto, se um site importado tiver páginas do Macromedia ColdFusion que foram criadas
utilizando-se comportamentos de servidor do UltraDev 4, informar ao Dreamweaver que o site
contém páginas geradas pelo UltraDev. O motivo é que o Dreamweaver MX procura padrões de
código na página para identificar e exibir comportamentos de servidor no painel
Comportamentos de servidor. No caso de páginas criadas com o Microsoft Active Server Pages
(ASP) e o JavaServer Pages (JSP), o Dreamweaver MX gera o mesmo código que o UltraDev, por
isso ele reconhece e exibe comportamentos de servidor ASP e JSP gerados pelo UltraDev. No
entanto, para as páginas ColdFusion, o Dreamweaver MX gera um código aperfeiçoado e mais
fácil de ser entendido. Como o Dreamweaver procura esses novos padrões de código como
padrãot, ele não reconhece comportamentos de servidor do ColdFusion gerados pelo UltraDev.
É necessário instruir o Dreamweaver a procurar os padrões de código do UltraDev caso deseje
continuar trabalhando com os antigos comportamentos de servidor.
137
Para instruir o Dreamweaver a procurar o código do ColdFusion gerado pelo UltraDev 4:
1 Abra a caixa de diálogo Definição do site selecionando Site > Editar os sites, escolhendo o site e
clicando em Editar.
2 Se o assistente for exibido, clique em Avançado e selecionar Servidor de teste na lista Categoria.
A caixa de diálogo Servidor de teste é exibida.
3 No menu pop-up Este site contém, escolher uma das opções a seguir:
• Se desejar que o Dreamweaver continue gerando o código UltraDev para novas páginas,
escolher Somente páginas do UltraDev 4.
• Se desejar que o Dreamweaver comece a utilizar o código aperfeiçoado para novas páginas, escolher
Ambas as versões. Isso atualizará o site do UltraDev 4 de modo incremental; com o tempo, o site
será formado, em sua maioria, por páginas com os novos comportamentos de servidor.
4 Clique em OK e em Concluído.
As conexões de bancos de dados são tratadas de forma diferente quando se especifica que o site
contém somente páginas do UltraDev 4. Para obter mais informações, veja “Como se conectar
utilizando a conectividade do UltraDev 4”, na página 151.
O que é necessário para criar aplicativos para a Web

Para criar aplicativos para a Web no Dreamweaver, é necessário o software a seguir:
• Um servidor da Web
• Um servidor de aplicativos que é executado no servidor da Web ou um servidor da Web que
funcione também como um servidor de aplicativos, como o Microsoft PWS ou IIS
Observação: No contexto de aplicativos para a Web, os termos “servidor da Web” e “servidor de aplicativos”
referem-se a software e não a hardware.
Se desejar utilizar um banco de dados com o aplicativo, é necessário o software adicional a seguir:
• Um banco de dados ou sistema de banco de dados
• Um driver de banco de dados que ofereça suporte ao banco de dados
Para obter informações sobre como configurar um banco de dados para o aplicativo para a Web,
veja “Como efetuar a conexão com um banco de dados”, na página 146.
Diversas empresas de hospedagem na Web oferecem planos que permitem utilizar o software que
elas possuem para testar e implementar aplicativos para a Web. Os usuários do Windows podem
instalar o software necessário no mesmo computador em que está instalado o Dreamweaver para
fins de desenvolvimento. Também é possível instalar o software em um computador de rede
(normalmente, um computador com o Windows NT ou Windows 2000) para que outros
programadores de sua equipe possam trabalhar em um projeto.
Os usuários do Macintosh podem utilizar um serviço de hospedagem na Web ou instalar o software
necessário em um computador remoto. Os usuários do Mac OS 10.1 podem desenvolver sites PHP
localmente usando o servidor da Web Apache e o servidor de aplicativos PHP instalados com o
sistema operacional. Para obter informações de configuração, visitar os sites da Web a seguir:
• http://developer.apple.com/internet/macosx/php.html
• http://www.entropy.ch/software/macosx/
• http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html
138 Capítulo 6
Configuração de um servidor da Web
Para executar aplicativos para a Web, é necessário um servidor da Web. Um servidor da Web é um
software que fornece arquivos em resposta a solicitações de navegadores da Web. O servidor da
Web é chamado, algumas vezes, de servidor HTTP. Os servidores da Web conhecidos incluem
IIS, Netscape Enterprise Server, iPlanet Web Server e Apache HTTP Server.
Se não estiver usando um serviço de hospedagem na Web, escolher um servidor da Web e instalá-
lo no computador local ou em um computador remoto. Para obter mais informações, ver a
documentação do fornecedor do servidor ou entrar em contato com o administrador do sistema.
Os usuários do Windows podem ter um servidor da Web pronto para uso no computador local;
para tanto, basta instalar o PWS ou o IIS. O servidor da Web pode já estar instalado. Verificar a
estrutura de pastas para saber se contém uma pasta C:\Inetpub or D:\Inetpub. O PWS e o IIS
criam esta pasta durante a instalação. Se desejar instalar o PWS ou o IIS, veja a Ajuda do
Dreamweaver (Ajuda > Como utilizar o Dreamweaver).
As páginas ASP.NET funcionam apenas com um único servidor da Web: o Microsoft IIS 5 ou
superior. Não há suporte para o servidor PWS. Além disso, como o IIS 5 é um serviço dos
sistemas operacionais Windows 2000 e Windows XP Professional, somente é possível utilizar essas
duas versões do Windows para executar aplicativos ASP.NET. Não há suporte para o Windows
98, ME ou NT. Deve-se observar, no entanto, que é possível desenvolver (e não executar)
aplicativos ASP.NET em qualquer computador com o Dreamweaver MX, inclusive computadores
com sistema Macintosh.
Configuração de um servidor de aplicativos

Para executar aplicativos para a Web, é necessário que o servidor da Web trabalhe com um
servidor de aplicativos. Um servidor de aplicativos é um software que ajuda o servidor da Web a
processar determinadas páginas da Web. Quando a página é solicitada, o servidor da Web envia a
página ao servidor de aplicativos para processamento antes de enviá-la ao navegador.
Os servidores de aplicativos conhecidos incluem Macromedia ColdFusion MX, Macromedia
JRun, Microsoft .NET Framework, PHP, IBM WebSphere e Jakarta Tomcat. Os servidores da
Web Microsoft IIS e PWS também funcionam como servidores de aplicativos ASP. O servidor de
aplicativos geralmente é instalado no mesmo sistema que executa o servidor da Web.
Estes são alguns dos tópicos analisados nesta seção:
• “Escolha do servidor de aplicativos”, na página 140
• “Instalação de um servidor de aplicativos ColdFusion”, na página 140
• “Instalação de um servidor de aplicativos ASP.NET”, na página 141
• “Instalação de um servidor de aplicativos ASP”, na página 141
• “Instalação de um servidor de aplicativos JSP”, na página 141
• “Instalação de um servidor de aplicativos PHP”, na página 142
Configuração de um aplicativo para a Web 139

Escolha do servidor de aplicativos
A escolha do servidor de aplicativos depende de diversos fatores, como o orçamento, a tecnologia de
servidor que se deseja utilizar (ColdFusion, ASP.NET, ASP, JSP ou PHP) e o servidor da Web
escolhido.
Orçamento: Alguns fornecedores comercializam servidores de aplicativos avançados que são
dispendiosos em termos de aquisição e administração. Outros fornecedores oferecem soluções
mais simples, eficientes e econômicas (os exemplos incluem servidores Macromedia ColdFusion e
JRun). Alguns servidores de aplicativos vêm integrados a servidores da Web (como o Microsoft
IIS e o PWS) e outros podem ser copiados gratuitamente pela Internet (como o Jakarta Tomcat e
o PHP).
Tecnologia de servidor: Os servidores de aplicativos utilizam tecnologias distintas. O
Dreamweaver oferece suporte a cinco tecnologias de servidor: ColdFusion, ASP.NET, ASP, JSP e
PHP. Para obter mais informações, veja a Ajuda do Dreamweaver (Ajuda > Como utilizar o
Dreamweaver). A tabela abaixo mostra servidores de aplicativos conhecidos disponíveis para as
cinco tecnologias de servidor que contam com suporte do Dreamweaver:
Tecnologia de servidor Servidor de aplicativos
ColdFusion Macromedia ColdFusion MX
ASP.NET Microsoft IIS 5 com .NET Framework
ASP Microsoft IIS ou PWS

Sun Chili!Soft ASP
JSP Macromedia JRun

IBM WebSphere
Apache Tomcat
BEA WebLogic
PHP Servidor PHP
Servidor da Web: A escolha do servidor de aplicativos também pode depender do servidor da Web
que se deseja utilizar. Certifique-se de que o aplicativo funcione com o servidor da Web. Por
exemplo: o servidor .NET Framework funciona somente com o IIS 5 ou superior.
Instalação de um servidor de aplicativos ColdFusion

Para executar páginas ColdFusion, é necessário utilizar o servidor de aplicativos ColdFusion. Este
servidor está disponível para sistemas Windows, Linux, Solaris e HP-UX.
É possível efetuar o download do ColdFusion MX e instalar uma edição para desenvolvedores
totalmente funcional no site da Macromedia na Web, em
http://www.macromedia.com/br/software/coldfusion/. Uma cópia do ColdFusion MX Server
Developer Edition também está disponível no CD do Dreamweaver (somente na versão para
Windows).
Depois de instalar o servidor de aplicativos, crie uma pasta raiz para o aplicativo para a Web. Veja
“Como criar uma pasta raiz para o aplicativo”, na página 142.
140 Capítulo 6
Instalação de um servidor de aplicativos ASP.NET
Para desenvolver páginas ASP.NET, é necessário o software a seguir:
• Um computador com o Windows 2000 ou Windows XP Professional executando o IIS 5 ou
mais avançado
• O Microsoft .NET Framework, que pode ser copiado do site da Microsoft na Web
Efetuar o download do .NET Framework a partir do site da Microsoft na Web, em
http://asp.net/download.aspx, e seguir as instruções fornecidas no site.
Depois de instalar o .NET Framework, criar uma pasta raiz para o aplicativo para a Web. Veja
“Como criar uma pasta raiz para o aplicativo”, na página 142.
Instalação de um servidor de aplicativos ASP

Para desenvolver páginas ASP, é necessário um servidor de aplicativos que ofereça suporte ao
Microsoft Active Server Pages 2.0. Estas são algumas das opções conhecidas:
• Microsoft IIS, que acompanha o Windows NT Server, Windows 2000 e o Windows XP
Professional
• Microsoft PWS, uma versão reduzida do IIS que pode ser executada no Windows 98 e NT
Workstation
• Sun Chili!Soft ASP, cujas versões podem ser executadas no Windows, Linux, Solaris e em
outras plataformas. Para obter mais informações, visitar o site da Chili!Soft na Web, em
http://www.chilisoft.com/chiliasp/default.asp
Os usuários do Windows podem instalar e executar o IIS ou o PWS nos seus computadores locais.
Para obter instruções, veja a Ajuda do Dreamweaver (Ajuda > Como utilizar o Dreamweaver).
Os usuários do Macintosh podem utilizar um serviço de hospedagem na Web que ofereça um
plano do ASP ou instalar o IIS ou o PWS em um computador remoto.
Depois de instalar o IIS ou o PWS, criar uma pasta raiz para o aplicativo para a Web. Veja “Como
criar uma pasta raiz para o aplicativo”, na página 142.
Instalação de um servidor de aplicativos JSP

Para desenvolver páginas JSP, é necessário um servidor de aplicativos que ofereça suporte a
JavaServer Pages. Estas são algumas das opções conhecidas:
• Macromedia JRun para Windows, Linux, Solaris ou UNIX. É possível efetuar o download de
uma versão de teste no site da Macromedia na Web, em
http://www.macromedia.com/br/software/jrun/.
• IBM WebSphere para diversos sistemas operacionais. É possível efetuar o download de uma
versão de teste no site da IBM na Web, em http://www-
4.ibm.com/software/webservers/appserv/download.html.
• Tomcat para Windows e UNIX. É possível efetuar o download de uma cópia do Tomcat no
site do Projeto Jakarta na Web, em http://jakarta.apache.org/tomcat/.
plano do JSP ou instalar um servidor de aplicativos JSP em um computador remoto executando
um servidor da Web.
Depois de instalar um servidor de aplicativos JSP, criar uma pasta raiz para o aplicativo para a
Web. Veja “Como criar uma pasta raiz para o aplicativo”, na página 142.

Instalação de um servidor de aplicativos PHP
Para executar páginas PHP, é necessário o servidor de aplicativos PHP, que é um software de
código-fonte aberto disponível na Web. Há edições do servidor de aplicativos disponíveis para
sistemas Windows, Linux, UNIX, HP-UX, Solaris e Mac OS X. O servidor de aplicativos
funciona com os servidores da Web a seguir: Apache, Microsoft IIS ou PWS, Netscape e iPlanet e
quase todos os servidores da Web que oferecem suporte à interface CGI.
É possível efetuar o download do servidor de aplicativos PHP no site da PHP na Web, em
http://www.php.net/downloads.php. Para obter informações sobre como instalar o servidor, ver a
documentação do PHP, que também pode ser copiada do site da PHP na Web, em
http://www.php.net/download-docs.php.
plano do PHP ou instalar o PHP em um computador remoto executando um servidor da Web. Se
você é usuário do Mac OS 10.1, pode utilizar o servidor de aplicativos PHP instalado com o
sistema operacional. Para obter mais informações, visitar os sites da Web a seguir:
• http://developer.apple.com/internet/macosx/php.html
• http://www.entropy.ch/software/macosx/
• http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html
Depois de instalar o servidor de aplicativos PHP, criar uma pasta raiz para o aplicativo para a Web.
Como criar uma pasta raiz para o aplicativo

Após a instalação do software de servidor, criar uma pasta raiz para o aplicativo para a Web no
computador que está executando o servidor da Web.
Certifique-se de que a pasta seja publicada pelo servidor da Web. Em outras palavras, o servidor da
Web pode fornecer qualquer arquivo existente nessa pasta ou em qualquer uma das suas subpastas
em resposta a uma solicitação HTTP feita por um navegador da Web. Por exemplo: em um
computador executando o PWS ou o IIS, qualquer arquivo existente na pasta Inetpub\wwwroot ou
em qualquer uma de suas subpastas pode ser fornecido para um navegador da Web.
Como definir um site do Dreamweaver

Após a configuração do sistema para desenvolver aplicativos para a Web, definir um site do
Dreamweaver para gerenciar os arquivos.
Observação: Os usuários do Macromedia HomeSite e do ColdFusion Studio podem considerar um site do
Dreamweaver como um projeto do HomeSite ou Studio.
Antes de começar, certifique-se de que os requisitos a seguir sejam atendidos:

• Você tem acesso a um servidor da Web. O servidor da Web pode estar sendo executado no
computador local, em um computador remoto (como um servidor de desenvolvimento) ou em
um servidor mantido por uma empresa de hospedagem na Web. Veja “Configuração de um
servidor da Web”, na página 139.
• Um servidor de aplicativos está instalado e em execução no sistema com o servidor da Web.
Veja “Configuração de um servidor de aplicativos”, na página 139.
• Foi criada uma pasta raiz para o aplicativo para a Web no sistema onde está sendo executado o
servidor da Web. Para obter mais informações, veja “Como criar uma pasta raiz para o
aplicativo”, na página 142.
142 Capítulo 6
O processo de definição de um site do Dreamweaver para o aplicativo para a Web consiste em três
etapas:
1 Defina uma pasta do disco rígido como a pasta local que o Dreamweaver utilizará para
armazenar cópias de trabalho dos arquivos do site (veja “Como definir uma pasta local”, na
página 143).
2 Defina uma pasta do computador que está executando o servidor da Web como a pasta remota
do Dreamweaver (veja “Como definir uma pasta remota”, na página 143).
3 Especifique para onde o Dreamweaver deve enviar páginas dinâmicas a serem processadas
enquanto o usuário trabalha (veja “Como especificar onde as páginas dinâmicas podem ser
processadas”, na página 144).
Depois de definir o site do Dreamweaver, é possível começar a criar aplicativos para a Web.
Como definir uma pasta local

É possível definir uma pasta local do Dreamweaver para cada novo aplicativo para a Web que for
criado. A pasta local é a pasta usada para armazenar cópias de trabalho de arquivos do site no disco
rígido. Se a pasta local não for definida, o Dreamweaver não funcionará corretamente.
A definição de uma pasta local também permite gerenciar os arquivos e transferi-los de/para o
servidor da Web com o simples clique de um botão.
Para definir uma pasta local do Dreamweaver:
1 Crie uma pasta no disco local para armazenar cópias de trabalho dos arquivos.
Talvez seja conveniente criar subpastas para armazenar os arquivos de imagens e outras
propriedades.
2 No Dreamweaver, escolher Site > Novo site.
A caixa de diálogo Definição do site é exibida.
3 Se o assistente for exibido, clique em Avançado e selecionar Informações locais na lista
Categoria (este deve ser o padrão).
4 Na caixa Nome do site, digite um nome descritivo para o site do Dreamweaver.
5 Na caixa Pasta raiz local, especificar a pasta criada na Etapa 1.
É possível digitar um caminho ou clique no ícone da pasta para procurá-la e selecioná-la.
6 Se desejar, preencher as outras opções da categoria Informações locais (elas não são necessárias
para que o site funcione).
Para obter mais informações sobre essas opções, clique no botão Ajuda da caixa de diálogo.
A caixa de diálogo Definição do site deve ficar aberta. Em seguida, especificar uma pasta remota.
Como definir uma pasta remota

Após definir uma pasta local, é possível definir uma pasta remota para o site do Dreamweaver. A
pasta remota é aquela criada para o aplicativo para a Web no servidor da Web (veja “Como criar
uma pasta raiz para o aplicativo”, na página 142).
Não será preciso definir uma pasta remota se a pasta definida em “Como definir uma pasta local”,
na página 143 puder funcionar também como a pasta raiz do aplicativo para a Web (isso implica
que o servidor da Web esteja em execução no computador local).

Para definir uma pasta remota do Dreamweaver:
1 Se a caixa de diálogo Definição do site não estiver aberta, para abri-la, escolher Site > Editar os
sites, selecione o site desejado e clique em Editar.
2 Se o assistente for exibido, clique em Avançado e selecionar Informações remotas na lista
Categoria.
A caixa de diálogo Informações remotas é exibida.
3 No menu pop-up Acesso, escolher uma das opções a seguir: Local/Rede, FTP ou RDS.
As opções configuradas dizem ao Dreamweaver como o usuário deseja transferir os arquivos
entre a pasta local e a pasta remota.
Observação: Para utilizar RDS, a pasta remota deve estar no computador com o ColdFusion.
Os arquivos também podem ser enviados para o aplicativo SourceSafe; para isso, escolher
Banco de dados SourceSafe (o SourceSafe é utilizado pelos programadores para controlar as
versões dos arquivos). Se essa opção for escolhida, será necessário definir uma pasta separada.
Para obter instruções, veja “Como especificar onde as páginas dinâmicas podem ser
processadas”, na página 144.
4 Depois de escolher um método de acesso, definir opções de acesso conforme apropriado.
Para obter mais informações sobre essas opções, clique no botão Ajuda da caixa de diálogo.
A caixa de diálogo Definição do site deve ficar aberta. Em seguida, é necessário definir uma pasta para
processar páginas dinâmicas.
Como especificar onde as páginas dinâmicas podem ser processadas

Após definir a pasta remota no Dreamweaver, especificar uma pasta onde as páginas dinâmicas
possam ser processadas. O Dreamweaver usa essa pasta para gerar conteúdo dinâmico e para se
conectar a bancos de dados enquanto o usuário trabalha.
Normalmente, especifica-se a pasta raiz criada no servidor da Web (veja “Como criar uma pasta
raiz para o aplicativo”, na página 142) porque o servidor da Web e o servidor de aplicativos
trabalham em conjunto.
Observação: A pasta raiz pode ser local ou remota, dependendo do local onde é executado o servidor da Web.
Para especificar onde o Dreamweaver pode processar as páginas dinâmicas:
1 Se a caixa de diálogo Definição do site não estiver aberta, para abri-la, escolher Site > Editar os
sites, selecione o site desejado e clique em Editar.
2 Se o assistente for exibido, clique em Avançado e selecionar Servidor de teste na lista Categoria.
A caixa de diálogo Servidor de teste é exibida. O Dreamweaver precisa dos serviços de um
servidor de teste para gerar e exibir o conteúdo dinâmico enquanto o usuário trabalha. O
servidor de teste pode ser o computador local, um servidor de desenvolvimento, um servidor
temporário ou um servidor de produção. Desde que o servidor possa processar o tipo de
páginas dinâmicas a serem desenvolvidas, a escolha não fará diferença.
3 Preencha a caixa de diálogo e clique em OK.
144 Capítulo 6
O prefixo de URL
É necessário especificar um prefixo de URL para que o Dreamweaver MX possa utilizar os
serviços de um servidor de teste para exibir dados e se conectar a bancos de dados enquanto o
usuário trabalha. O Dreamweaver usa o servidor de teste para gerar o conteúdo dinâmico exibido
na janela do Live Data e no navegador quando é utilizado o comando Visualizar no navegador.
O Dreamweaver também utiliza o servidor de teste para efetuar conexões com um banco de dados na
fase de design. O Dreamweaver utiliza a conexão feita durante a fase de design para fornecer
informações úteis sobre o banco de dados, como os nomes das tabelas do banco de dados e os nomes
das colunas das tabelas.
Um prefixo de URL é formado pelo nome do domínio e por quaisquer subdiretórios ou diretórios
virtuais do diretório inicial do site da Web.
Observação: Esta seção utiliza a terminologia empregada no Microsoft IIS. A terminologia pode variar conforme o
servidor, mas os mesmos conceitos se aplicam à maioria dos servidores da Web.
O diretório inicial é a pasta do servidor mapeada para o nome do domínio do site. Suponha que a
pasta a ser utilizada para processar as páginas dinâmicas seja c:\sites\company\ e que ela é o
diretório inicial (ou seja, essa pasta está mapeada para o nome do domínio do site — por exemplo:
www.mystartup.com). Nesse caso, o prefixo de URL é http://www.mystartup.com/.
Se a pasta a ser utilizada para processar as páginas dinâmicas é uma subpasta do diretório inicial,
basta adicionar a subpasta à URL. Suponha que o diretório inicial é c:\sites\company\, o nome do
domínio do site é www.mystartup.com e a pasta a ser utilizada para processar as páginas dinâmicas
é c:\sites\company\inventory. Digite este prefixo de URL:
http://www.mystartup.com/inventory/
Se a pasta a ser utilizada para processar as páginas dinâmicas não é o diretório inicial ou qualquer
um de seus subdiretórios, deve-se criar um diretório virtual.
é uma pasta que não está contida fisicamente no diretório inicial do servidor,
Um diretório virtual
mesmo que ela pareça estar na URL. Para criar um diretório virtual, especificar um álias para o
caminho da pasta na URL. Suponha que o diretório inicial é c:\sites\company, a pasta de
processamento é d:\apps\inventory e que foi definido um álias para essa pasta chamado
warehouse. Digite este prefixo de URL:
http://www.mystartup.com/warehouse/
Localhost é um termo que faz referência ao diretório inicial nas URLs quando o cliente
(normalmente um navegador, mas nesse caso o Dreamweaver) está em execução no mesmo
sistema que o servidor da Web. Suponha que o Dreamweaver está em execução no mesmo sistema
que o servidor da Web, que o diretório inicial é c:\sites\company e que foi definido um diretório
virtual chamado warehouse para fazer referência à pasta a ser utilizada para o processamento das
páginas dinâmicas. Digite este prefixo de URL:
http://localhost/warehouse/
Para determinar o nome do domínio e o diretório inicial no PWS e no IIS 4,0, clique no ícone de
Principal no Personal Web Manager e anotar a home page especificada na área Publicação.

Como efetuar a conexão com um banco de dados
Se desejar utilizar um banco de dados com o aplicativo para a Web, primeiro é necessário se conectar
a ele. Para uma discussão geral sobre conexões de banco de dados, veja “Como compreender as
conexões de bancos de dados”, na página 712.
O Dreamweaver MX trata as conexões de banco de dados de modo distinto, dependendo da
tecnologia de servidor escolhida. Consultar os capítulos a seguir:
• Capítulo 7, “Conexões de banco de dados para programadores ColdFusion”, na página 149
• Capítulo 8, “Conexões de banco de dados para programadores ASP.NET”, na página 155
• Capítulo 9, “Conexões de banco de dados para programadores ASP”, na página 161
• Capítulo 10, “Conexões de banco de dados para programadores JSP”, na página 173
• Capítulo 11, “Conexões de banco de dados para programadores PHP”, na página 181
Como solucionar erros do servidor de aplicativos

Esta seção descreve alguns erros conhecidos do servidor de aplicativos e como solucioná-los.
Para obter mais informações sobre os servidores de aplicativos Macromedia, visitar as Centrais de
suporte do ColdFusion e do JRun no site da Macromedia na Web, em
http://www.macromedia.com/br/support/.
Para obter mais informações sobre outros servidores de aplicativos, ver a documentação do
servidor, visitar o site do fornecedor na Web ou entrar em contato com o departamento de
suporte técnico do fornecedor.
Esta seção aborda os erros de servidor a seguir:
• ColdFusion - 405 Método não permitido
• JRun – Erro de sintaxe: Era esperado um identificador em vez deste símbolo
• JRun - Erro 2140
• WebSphere - Erro 403 (proibido por regra)
• WebSphere - Erro 404 (Arquivo não localizado)
ColdFusion - 405 Método não permitido

Este erro ocorre com o ColdFusion 4 ou 5 quando a instalação é verificada. Ele pode ser gerado
pelo fato de haver uma versão FrontPage do PWS. Certifique-se de possuir a versão completa do
PWS e não a versão FrontPage.
Se a versão correta do PWS estiver instalada, verificar o nome do diretório virtual para cfdocs e
cfide. No PWS, clique no ícone Avançado, escolher o diretório virtual na lista e clique em Editar
as propriedades. Na caixa Álias, remover quaisquer vírgulas do nome do diretório virtual.
Também é recomendável armazenar os arquivos de banco de dados em um local que não seja a pasta
raiz do servidor da Web. Às vezes, os servidores da Web podem armazenar os arquivos no cache e
bloqueá-los de modo exclusivo, gerando problemas de permissão de gravação. Armazenar os bancos
de dados fora da pasta raiz do servidor da Web também é uma medida adicional de segurança.
146 Capítulo 6
JRun – Erro de sintaxe: Era esperado um identificador em vez deste símbolo
Este erro ocorre quando é feita uma tentativa de processar uma página JSP denominada
default.jsp.
A palavra “default” (padrão) é uma palavra-chave reservada no JRun. Para corrigir o problema,
renomear a página como index.jsp ou home.jsp.
JRun - Erro 2140

Este erro pode ocorrer por diversos motivos:
• A chave de licença não foi digitada corretamente. Recortar e colar a chave de licença digitada
na mensagem de correio eletrônico de confirmação da compra, para evitar erros de digitação.
Certificar-se também de que não há espaços após a chave de licença.
• O jsm padrão não foi instalado corretamente como um serviço do NT.
Para obter mais informações, ver o artigo 12015 da central de suporte do JRun, em
http://www.macromedia.com/go/error_2140.
WebSphere - Erro 403 (proibido por regra)

Este erro ocorre quando é chamado um servlet ou JSP. A seguir, estão listadas possíveis causas e
soluções:
• Foi usado um nome de arquivo incorreto ao chamar o arquivo JSP. Verificar o nome do arquivo
JSP. Corrigir erros de digitação, de uso de maiúsculas e minúsculas ou de extensão do nome do
arquivo. Certifique-se de que o nome do arquivo JSP termina com .jsp.
• Se não estiver sendo usado o número de porta padrão para a instância do IBM HTTP Server
for AS/400 (porta 80), isso indica que host:port não foi adicionado como um álias para o host
virtual. Para exibir os aliases dos hosts virtuais, clique na guia Propriedades avançadas do host
virtual, na Console administrativa.
• Não há um servlet habilitado para JSP destinado ao aplicativo para a Web no qual reside o
arquivo JSP. Verificar se o servlet habilitado para JSP foi adicionado ao aplicativo para a Web
no qual o JSP reside. Crie o servlet habilitado para JSP, se necessário.
• Se o servlet foi criado em um aplicativo para a Web, ele deverá ter um caminho de URI
(Indicador de recurso uniforme, Uniform Resource Indicator). Verificar se o caminho do URI
está correto.
• As diretivas Passar ou Redirecionar da configuração do servidor HTTP ativo impedem que o
JSP ou o servlet sejam chamados. Verificar se as diretivas Passar e Redirecionar na configuração
do IBM HTTP Server for AS/400 ativo estão corretas.
Para obter mais informações, ver a seção FAQ no site da IBM na Web, em
http://www.ibm.com/support/techdocs/atsmastr.nsf/PubAllNum/FQ101338.
Para outros problemas relacionados ao WebSphere, visitar a Central de suporte do IBM
WebSphere, em http://www.ibm.com/software/webservers/appserv/support.html.

WebSphere - Erro 404 (Arquivo não localizado)
Este erro ocorre ao chamar um servlet ou o JSP. A seguir, estão listadas possíveis causas e soluções:
• Verifique se a URL do JSP ou do servlet foi digitada corretamente.
• O processo do servidor de aplicativos não tem autoridade suficiente para acessar a pasta que
contém o código Java gerado pelo JSP e o arquivo de classe. Verificar se QEJBSVR tem
autoridade para acessar a estrutura de pastas /QIBM/UserData/WebASAdv/default/temp ou
/QIBM/UserData/WebASAdv/<nomedousuário>/temp.
• Este erro pode ocorrer porque uma classe utilizada pelo servlet não foi localizada. Verificar se
todas as classes exigidas pelo servlet estão na variável de caminho de classe do aplicativo para a
Web.
• Este erro pode ser gerado por uma diretiva Passar inserida incorretamente no arquivo de
configuração HTTP. Se a diretiva Passar (PASS /*) for usada antes da diretiva Serviço, esta
última nunca será referenciada. Para corrigir este problema, mover a diretiva Passar para o final
das entradas de configuração HTTP ou torná-la mais específica (por exemplo: PASS /*.html).
Para obter mais informações sobre as diretivas de configuração HTTP, veja “Edição do arquivo
de configuração HTTP para adicionar diretivas de servidor” na documentação do WebSphere.
Para obter mais informações, visitar a Central de suporte do IBM WebSphere, em
http://www.ibm.com/software/webservers/appserv/support.html.
148 Capítulo 6
CAPÍTULO 7
Conexões de banco de dados para
programadores ColdFusion
Este capítulo descreve como se conectar a bancos de dados ao desenvolver aplicativos baseados no
Macromedia ColdFusion com o Macromedia Dreamweaver MX. Para aplicativos ColdFusion,
conectar-se ao Dreamweaver escolhendo uma fonte de dados ColdFusion definida no
Administrador de ColdFusion, que é a console de gerenciamento do servidor.
Este capítulo pressupõe que o aplicativo para a Web ColdFusion já esteja configurado (veja
“Configuração de um aplicativo para a Web”, na página 137). Também pressupõe que um banco
de dados esteja configurado no computador local ou em um sistema ao qual você tem acesso de
rede ou FTP.
Este capítulo contém os tópicos a seguir:
• “Edição ou exclusão de uma conexão de banco de dados”, na página 151
• “Como se conectar utilizando a conectividade do UltraDev 4”, na página 151
Para aprender mais sobre bancos de dados e conexões de bancos de dados, veja “Guia do iniciante
em bancos de dados”, na página 705.

Ao desenvolver um aplicativo ColdFusion para a Web com o Dreamweaver, conectar-se a um
banco de dados selecionando uma fonte de dados ColdFusion definida no Administrador de
ColdFusion, que é a console de gerenciamento do servidor.
Observação: Se estiver executando o ColdFusion 5 em um computador com o Windows, também será possível
configurar um DSN (Nome de fonte de dados, Data Source Name) no computador. DSNs de sistema são
automaticamente considerados fontes de dados pelo ColdFusion 4 ou 5.
Para se conectar a um banco de dados, certifique-se de que o Dreamweaver saiba onde estão
localizadas as fontes de dados ColdFusion. Para recuperar as fontes de dados ColdFusion na fase
de design, o Dreamweaver coloca os scripts em uma pasta no computador em que o ColdFusion
está sendo executado. É necessário especificar esta pasta na categoria Servidor de teste na caixa de
diálogo Definição do site. Para obter mais informações, veja “Como especificar onde as páginas
dinâmicas podem ser processadas”, na página 144.
Em seguida, criar uma fonte de dados ColdFusion no Administrador de ColdFusion (se ainda não
existir uma). Para obter mais informações, veja “Como criar uma fonte de dados ColdFusion”, na
página 150.
149
Após criar uma fonte de dados ColdFusion, é possível utilizá-la no Dreamweaver para efetuar uma
conexão ao banco de dados. Para obter mais informações, veja “Como efetuar a conexão com o
banco de dados no Dreamweaver”, na página 150.
Esta seção pressupõe que você esteja utilizando a conectividade do Dreamweaver MX e não a
conectividade do Dreamweaver UltraDev 4. As conexões com o banco de dados são tratadas de
forma diferente no UltraDev 4. Para obter mais informações, veja “Como se conectar utilizando a
conectividade do UltraDev 4”, na página 151.
Como criar uma fonte de dados ColdFusion

Antes de se conectar a um banco de dados, é preciso criar uma fonte de dados ColdFusion no
Administrador de ColdFusion, que é a console de gerenciamento do servidor.
Observação: Se estiver executando o ColdFusion 5 em um computador com o Windows, também poderá
configurar um DSN no computador. Os DSNs de sistema são automaticamente considerados fontes de dados pelo
ColdFusion 5. Para obter mais informações, veja “Como configurar DSNs no Windows”, na página 727.
Para criar uma fonte de dados ColdFusion:
1 No painel Bancos de dados (Janela > Bancos de dados) do Dreamweaver, clique no ícone
Modificar as fontes de dados (o segundo ícone partindo da direita na barra de tarefas do
painel).
O Administrador de ColdFusion é aberto em um navegador.
2 Efetue o logon no Administrador de ColdFusion e crie a fonte de dados.
Para obter instruções, veja a documentação do ColdFusion.
É preciso fornecer determinados valores de parâmetros para criar a fonte de dados ColdFusion.
Para obter os valores de parâmetros específicos ao driver do banco de dados, veja a documentação
do fornecedor do driver ou consultar o administrador do sistema.
Uma vez criada a fonte de dados ColdFusion, é possível utilizá-la no Dreamweaver.
Como efetuar a conexão com o banco de dados no Dreamweaver

Depois de criar uma fonte de dados ColdFusion no Administrador de ColdFusion, é possível
utilizá-la para efetuar uma conexão ao banco de dados no Dreamweaver.
Abra qualquer página do ColdFusion no Dreamweaver e, em seguida, abra o painel Bancos de
dados (Janela > Bancos de dados). As fontes de dados ColdFusion são exibidas no painel.
Se as fontes de dados não forem exibidas, certifique-se de que o Dreamweaver saiba onde estão
localizadas as fontes de dados ColdFusion. Na categoria Servidor de teste na caixa de diálogo
Definição do site, especifique a pasta raiz do site no computador que está executando o
ColdFusion. Para obter mais informações, veja “Como especificar onde as páginas dinâmicas
podem ser processadas”, na página 144.
150 Capítulo 7
Edição ou exclusão de uma conexão de banco de dados
É possível editar ou excluir fontes de dados do ColdFusion no Administrador de ColdFusion. No
painel Bancos de dados (Janela > Bancos de dados) do Dreamweaver, clique no ícone Modificar as
fontes de dados (o segundo ícone partindo da direita na barra de tarefas do painel). O
Administrador de ColdFusion é aberto em um navegador. Efetue o logon e modifique a fonte de
dados. Para obter instruções, veja a documentação do ColdFusion.
Para evitar a ocorrência de erros após excluir ou renomear uma fonte de dados do ColdFusion,
atualizar todos os conjuntos de registros que utilizam a fonte de dados antiga no Dreamweaver
clicando duas vezes no nome do conjunto de registro, no painel Ligações, e escolhendo uma nova
fonte de dados.
Como se conectar utilizando a conectividade do UltraDev 4

Esta seção descreve como se conectar a um banco de dados se tiver sido criado um aplicativo
ColdFusion utilizando comportamentos de servidor do Dreamweaver UltraDev 4 ou se estiver
recriando um aplicativo no Dreamweaver MX utilizando comportamentos de servidor do
UltraDev 4. Para obter mais informações, veja “Uma nota para os usuários do Dreamweaver
UltraDev 4”, na página 137.
Nesta seção, o termo “UD4 ColdFusion” refere-se à conectividade do UltraDev 4.
Esta seção contém os tópicos a seguir:
• “Requisitos de conexão”, na página 151
• “Como criar uma conexão UD4 ColdFusion normal”, na página 152
• “Como criar uma conexão UD4 ColdFusion avançada (para usuários do Macintosh)”, na
página 152
• “Edição ou exclusão de uma conexão UD4 ColdFusion”, na página 153
Requisitos de conexão
Para criar uma conexão com o banco de dados UD4 ColdFusion, os requisitos a seguir devem ser
satisfeitos:
• Um site Dreamweaver especificando que o site contém somente arquivos do UltraDev 4. Para
obter mais informações, veja “Como especificar onde as páginas dinâmicas podem ser
processadas”, na página 144
• Um banco de dados deve estar configurado no computador local ou em um sistema ao qual você
tem acesso de rede ou FTP.
• Um driver de banco de dados apropriado deve estar instalado no computador que estiver
executando o ColdFusion.
• Uma fonte de dados ColdFusion deve estar definida para o banco de dados. Para obter mais
informações, veja “Como criar uma fonte de dados ColdFusion”, na página 150
Conexões de banco de dados para programadores ColdFusion 151

Como criar uma conexão UD4 ColdFusion normal
Esta seção descreve como criar uma conexão de banco de dados normal se você estiver usando a
conectividade do UltraDev 4.
A conectividade do ColdFusion no UltraDev 4 quando executado no Macintosh não oferece
suporte aos procedimentos armazenados em bancos de dados que não sejam do SQL Server 7.0.
Se estiver utilizando o Macintosh e desejar utilizar um procedimento armazenado em um banco
de dados que não seja do SQL Server 7.0, crie uma conexão avançada ColdFusion, utilizando o
JDBC para estabelecer a conexão com o banco de dados na fase de design. Para conhecer os
procedimentos, veja “Como criar uma conexão UD4 ColdFusion avançada (para usuários
do Macintosh)”, na página 152.
Para criar uma conexão UD4 ColdFusion normal:
1 Abra uma página do ColdFusion no Dreamweaver e, em seguida, abra o painel Bancos de dados
(Janela > Bancos de dados).
2 Clique no botão de adição (+) do painel e selecione Nome da fonte de dados no menu pop-up.
3 Se esta for a primeira conexão que estiver sendo criada para o site, o Dreamweaver solicitará o
nome de usuário e a senha do ColdFusion RDS (Serviços de desenvolvimento remoto, Remote
Development Services).
Depois de efetuar o logon, o Dreamweaver se conecta ao servidor, recupera as fontes de dados
do ColdFusion e exibe a caixa de diálogo Nome da fonte de dados.
Para obter instruções, clique no botão Ajuda da caixa de diálogo.
A nova conexão é exibida no painel Bancos de dados.
Como criar uma conexão UD4 ColdFusion avançada (para usuários

do Macintosh)
A conectividade do UltraDev ColdFusion no Macintosh não oferece suporte aos procedimentos
armazenados em bancos de dados que não sejam do SQL Server 7.0. Se você for usuário do
Macintosh e desejar utilizar um procedimento armazenado em um banco de dados que não seja do
SQL Server 7.0, deverá criar uma conexão ColdFusion avançada.
Para criar uma conexão avançada ao banco de dados ColdFusion no Dreamweaver:
1 Abra uma página do ColdFusion no Dreamweaver e, em seguida, abrir o painel Bancos de dados
2 Clique no botão de adição (+) do painel e selecionar Nome da fonte de dados – Avançado no
menu-pop-up.
3 Se esta for a primeira conexão que estiver sendo criada para o site, o Dreamweaver solicitará o
nome de usuário e a senha do ColdFusion RDS.
Depois de efetuar o logon, o Dreamweaver se conecta ao servidor, recupera os DSNs do
ColdFusion e exibe a caixa de diálogo Nome da fonte de dados - Avançado.
152 Capítulo 7
Edição ou exclusão de uma conexão UD4 ColdFusion
Ao criar uma conexão de banco de dados, o Dreamweaver armazena as informações de conexão
em um arquivo na subpasta Conexões, localizada na pasta-raiz do site. Na realidade, o
Dreamweaver não criará uma conexão de banco de dados para o aplicativo ColdFusion até o
usuário definir um conjunto de registros para uma página do aplicativo (veja “Definição de um
conjunto de registros”, na página 544). Nesse caso, o Dreamweaver gravará um código no arquivo
para estabelecer a conexão e inserirá uma instrução de inclusão na página. Durante a execução, o
servidor insere o código de conexão no documento.
Para atualizar uma conexão:
1 Abra uma página do ColdFusion no Dreamweaver MX e, em seguida, abra o painel Bancos de

dados (Janela > Bancos de dados).
Uma lista de conexões é exibida no painel.
2 Clique com o botão direito do mouse na conexão desejada e escolher Editar conexão no menu
pop-up.
A caixa de diálogo utilizada para criar a conexão é exibida.
3 Faça as alterações e clique em OK.
O Dreamweaver atualiza automaticamente o arquivo da inclusão que, por sua vez, atualiza todas
as páginas do site que estiverem utilizando a conexão.
Para excluir uma conexão:
1 Abra uma página do ColdFusion no Dreamweaver e, em seguida, abra o painel Bancos de dados
2 Clique com o botão direito do mouse na conexão desejada e escolha Excluir a conexão no
menu pop-up.
3 Confirmar se deseja excluir a conexão.
Para evitar a ocorrência de erros após excluir uma conexão, atualize todos os conjuntos de registros
que utilizam a conexão antiga, clicando duas vezes no nome do conjunto de registro no painel
Ligações e escolhendo uma nova conexão.
Conexões de banco de dados para programadores ColdFusion 153

154 Capítulo 7
CAPÍTULO 8
programadores ASP.NET
Para utilizar um banco de dados com um aplicativo ASP.NET, é necessário criar uma conexão de
banco de dados no Macromedia Dreamweaver MX. Este capítulo descreve como criar a conexão
de banco de dados.
Observação: Se estiver desenvolvendo aplicativos com o Microsoft Active Server Pages (ASP), veja “Conexões
de banco de dados para programadores ASP”, na página 161.
Este capítulo pressupõe que um aplicativo ASP.NET esteja configurado (veja “Configuração de
um aplicativo para a Web”, na página 137). Também pressupõe que um banco de dados esteja
configurado no computador local ou em um sistema ao qual você tem acesso de rede ou FTP.
Para se conectar ao banco de dados de exemplo instalado com o Dreamweaver, veja a Ajuda do
Dreamweaver (Ajuda > Como utilizar o Dreamweaver). Para aprender mais sobre os bancos de
dados e as correspondentes conexões, veja “Guia do iniciante em bancos de dados”, na
página 705.

Esta seção descreve como se conectar a um banco de dados ao desenvolver um aplicativo
ASP.NET no Dreamweaver MX.
Antes de se conectar a um banco de dados, é necessário obter um provedor de bancos de dados
OLE (incorporação e vinculação de objetos) para o banco de dados. Se desejar se conectar a um
banco de dados Microsoft SQL Server, é possível utilizar o Provedor de dados gerenciados para
SQL Server que é fornecido pelo .NET Framework. Para obter mais informações, veja “Obtenção
de um provedor de bancos de dados OLE para o banco de dados”, na página 156.
Uma vez instalado o provedor de banco de dados, é possível utilizá-lo para efetuar uma conexão
ao banco de dados. Para obter instruções, ver as seções a seguir:
• “Criação de uma conexão de banco de dados no Dreamweaver”, na página 156
• “Criação de uma conexão utilizando Propriedades de link de dados”, na página 157
155
Obtenção de um provedor de bancos de dados OLE para o banco de dados
Um aplicativo ASP.NET deve se conectar a um banco de dados por meio de um provedor de
bancos de dados OLE. O provedor atua como um intérprete e permite que o aplicativo ASP.NET
se comunique com um banco de dados. Para obter mais informações sobre um banco de dados
OLE e a função dos provedores de banco de dados, veja “Como estabelecer a interface com o
banco de dados”, na página 712.
Se desejar se conectar a um banco de dados Microsoft SQL Server, utilize o Provedor de dados
gerenciados para SQL Server que é fornecido com o .NET Framework. Esse provedor, que é
otimizado para SQL Server e muito veloz, é instalado durante a instalação do .NET Framework.
Se desejar se conectar a um banco de dados que não seja o SQL Server, certifique-se da presença
de um provedor de bancos de dados OLE instalado para o banco de dados no computador que
está executando o .NET Framework. Um provedor de bancos de dados OLE é instalado
automaticamente para o Microsoft Access quando é efetuado o download do pacote Microsoft
Data Access Components (MDAC) 2.7 no computador.
Observação: É altamente recomendável instalar o MDAC 2.7 quando se instala o .NET Framework. Para obter mais
informações, veja “Instalação de um servidor de aplicativos ASP.NET”, na página 141.
É possível efetuar o download de provedores de bancos de dados OLE para bancos de dados
Oracle9i e Oracle8i diretamente do site da Oracle na Web, em http://otn.oracle.com/software/
tech/windows/ole_db/content.html (é necessário registrar-se). Também é possível adquirir
provedores de bancos de dados OLE de outros revendedores.
Uma vez que se tenha um provedor para o banco de dados, é possível utilizá-lo para criar conexões
de banco de dados no Dreamweaver.
Criação de uma conexão de banco de dados no Dreamweaver

Depois de obter um provedor de bancos de dados OLE para o banco de dados, é possível utilizá-
lo para criar uma conexão de banco de dados no Dreamweaver.
Uma outra opção é utilizar a caixa de diálogo Propriedades de link de dados da Microsoft, que ajuda
a criar a conexão. Para obter instruções, veja “Criação de uma conexão utilizando Propriedades de
link de dados”, na página 157.
Para criar uma conexão de banco de dados para ASP.NET:
1 Abra uma página ASP.NET no Dreamweaver e, em seguida, abrir o painel Bancos de dados
O painel exibe as conexões definidas para o site.
2 Clique no botão de adição (+) do painel e selecionar Conexão com banco de dados OLE ou
Conexão de servidor SQL no menu pop-up.
Observação: Selecione Conexão de servidor SQL somente se desejar se conectar a um banco de dados
Microsoft SQL Server.
A caixa de diálogo Conexão com banco de dados OLE ou Conexão de servidor SQL é exibida.
156 Capítulo 8
Criação de uma conexão utilizando Propriedades de link de dados
Depois de obter um provedor de banco de dados OLE para o banco de dados (veja “Obtenção de
um provedor de bancos de dados OLE para o banco de dados”, na página 156), é possível criar
uma conexão de banco de dados utilizando a caixa de diálogo Propriedades de link de dados no
Windows.
Importante: É possível utilizar este método somente se o provedor de bancos de dados OLE que
deseja utilizar estiver instalado no mesmo computador com o Windows que o Dreamweaver.
Para criar uma conexão de banco de dados utilizando Propriedades de link de dados:
O painel exibe as conexões definidas para o site.
2 Clique no botão de adição (+) do painel e escolher Conexão com banco de dados OLE no menu
pop-up.
A caixa de diálogo Conexão com banco de dados OLE é exibida.
3 Clique no botão Construir.
A caixa de diálogo Propriedades de link de dados é exibida. Esta caixa de diálogo do Windows
exibe os provedores de bancos de dados OLE existentes no computador com o Windows que
está executando o Dreamweaver.
4 Preencha a caixa de diálogo Propriedades de link de dados e clique em OK.
O Dreamweaver insere uma seqüência de caracteres de conexão na caixa de diálogo Conexão
com banco de dados OLE.
5 Clique em Testar.
O Dreamweaver tenta estabelecer uma conexão com o banco de dados. Se a conexão falhar,
verificar-novamente a seqüência de caracteres de conexão. Se ainda assim a conexão falhar,
verificar as definições da pasta que o Dreamweaver utiliza para processar páginas dinâmicas (veja
“Como especificar onde as páginas dinâmicas podem ser processadas”, na página 144).
6 Clique em OK.
Parâmetros de conexão com banco de dados OLE de exemplo para ASP.NET

Uma seqüência de caracteres de conexão com o banco de dados OLE combina todas as
informações de que o aplicativo ASP.NET precisa para se conectar a um banco de dados. O
Dreamweaver insere essa seqüência de caracteres nos scripts de servidor da página para posterior
processamento pelo servidor de aplicativos.
O Dreamweaver fornece modelos de seqüências de caracteres para criar seqüências de caracteres
de conexão com o banco de dados OLE para aplicativos ASP.NET (veja “Criação de uma conexão
de banco de dados no Dreamweaver”, na página 156). Para criar uma seqüência de caracteres de
conexão, substituir os alocadores de espaço do modelo pelos valores de parâmetros solicitados.
Esta seção exibe parâmetros de exemplo para bancos de dados Microsoft Access e SQL Server.
Observação: Para obter os valores de parâmetros específicos de outros bancos de dados, ver a documentação do
revendedor do banco de dados ou consultar o administrador do sistema.
Conexões de banco de dados para programadores ASP.NET 157

Caso 1: O .NET Framework está instalado no computador local e o usuário deseja se conectar a
um banco de dados Microsoft Access chamado sdSchool.mdb e localizado nesta pasta do disco
rígido: c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb. Aqui estão os parâmetros
necessários para criar esta seqüência de caracteres de conexão:
Provider=Microsoft.Jet.OLEDB.4.0;
Data Source=c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb;
Caso 2: O .NET Framework é utilizado em um servidor de desenvolvimento remoto e o usuário
deseja se conectar a um banco de dados Microsoft Access chamado mtnSchool.mdb e localizado
nesta pasta do servidor: d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb. Aqui
estão os parâmetros necessários para criar a seqüência de caracteres de conexão:
Provider=Microsoft.Jet.OLEDB.4.0;
Data Source=d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb;
Caso 3: Suponha que o .NET Framework seja utilizado em um servidor de rede de
desenvolvimento chamado Savant e o usuário deseja se conectar a um banco de dados Microsoft
SQL Server chamado pubs no servidor. Seu nome de usuário do SQL Server é “sa” e não existe
uma senha. Se for utilizado o Provedor de dados gerenciados para SQL Server (ou seja, se foi
escolhida a opção Conexão SQL no painel Bancos de dados), aqui estão os parâmetros necessários
para criar a seqüência de caracteres de conexão:
Data Source=Savant;
Initial Catalog=pubs;
User ID=sa;
Password=;

Dreamweaver não criará uma conexão de banco de dados para o aplicativo ASP.NET até que seja
definido um dataset para uma página do aplicativo (veja “Definição de um conjunto de registros”,
na página 544). Nesse caso, o Dreamweaver gravará um código no arquivo para estabelecer a
conexão e inserirá uma instrução de inclusão na página. Durante a execução, o servidor insere o
código de conexão no documento.
2 Clique com o botão direito do mouse na conexão desejada e escolher Editar conexão no menu
pop-up.
O Dreamweaver atualiza automaticamente o arquivo de inclusão que, por sua vez, atualiza
automaticamente todas as páginas do site que estiverem utilizando a conexão.
158 Capítulo 8
Se uma conexão for renomeada, será necessário atualizar todos os conjuntos de registros que
utilizam o nome da conexão antiga; para isso, clique-duas vezes no conjunto de registros no painel
Ligações e escolher um novo nome de conexão na caixa de diálogo DataSet.
2 Clique com o botão direito do mouse na conexão desejada e escolher Excluir a conexão no
menu pop-up.
Observação: Para evitar a ocorrência de erros após excluir uma conexão, atualizar todos os conjuntos de
registros que utilizam a conexão antiga; para tanto, clique duas vezes no nome do conjunto de registros no
painel Ligações e escolher uma nova conexão na caixa de diálogo Dataset.
Conexões de banco de dados para programadores ASP.NET 159

160 Capítulo 8
CAPÍTULO 9
programadores ASP
Para utilizar um banco de dados com um aplicativo Active Server Pages (ASP) da Microsoft, é
necessário criar uma conexão de banco de dados no Macromedia Dreamweaver MX. Este capítulo
descreve como criar a conexão de banco de dados.
Observação: Se estiver desenvolvendo aplicativos ASP.NET, veja “Conexões de banco de dados para
programadores ASP.NET”, na página 155.
Este capítulo pressupõe que um aplicativo ASP já esteja configurado (veja “Configuração de um
aplicativo para a Web”, na página 137). Também pressupõe que um banco de dados esteja
configurado no computador local ou em um sistema ao qual você tem acesso de rede ou FTP.
• “Como compreender as conexões de banco de dados ASP”, na página 162
• “Criação de uma conexão DSN”, na página 163
• “Criação de uma conexão sem DSN”, na página 165
• “Como efetuar a conexão com um banco de dados através de um ISP”, na página 168
dados e as correspondentes conexões, consulte o Anexo A, “Guia do iniciante em bancos de
dados”, na página 705.
161
Como compreender as conexões de banco de dados ASP
Um aplicativo ASP deve conectar-se a um banco de dados por meio de um driver ODBC
(conectividade aberta de banco de dados) ou de um provedor de banco de dados OLE
(incorporação e vinculação de objetos). O driver ou provedor atua como um intérprete que
permite ao aplicativo para a Web comunicar-se com o banco de dados. Para obter mais
informações sobre a função dos drivers de banco de dados, veja “Como estabelecer a interface com
o banco de dados”, na página 712. A tabela a seguir mostra alguns drivers que podem ser
utilizados com bancos de dados Microsoft Access, Microsoft SQL Server e Oracle:
Banco de dados Driver de banco de dados
Microsoft Access Driver (ODBC) do Microsoft Access
Microsoft SQL Server Driver (ODBC) do Microsoft SQL Server

Provedor (de banco de dados OLE) do Microsoft SQL Server
Oracle Driver (ODBC) da Microsoft para bancos de dados Oracle

Provedor de bancos de dados OLE da Oracle
É possível utilizar um DSN (nome de fonte de dados) ou uma seqüência de caracteres de conexão
para se conectar ao banco de dados.
Um DSN é um identificador formado por uma única palavra (por exemplo: Acme) direcionado
ao banco de dados que contém todas as informações necessárias para se conectar a este. O DSN é
definido no Windows. É possível utilizar um DSN para se conectar por meio de um driver
ODBC instalado no sistema Windows. Para obter instruções detalhadas, veja “Criação de uma
conexão DSN”, na página 163.
Uma seqüência de caracteres de conexão é uma expressão codificada manualmente que identifica
o banco de dados e lista as informações necessárias para se conectar a ele. Exemplo:
Driver={SQL Server};Server=Socrates;Database=AcmeMktg;
UID=wiley;PWD=roadrunner
É necessário utilizar uma seqüência de caracteres de conexão se estiver se conectando por meio de
um destes recursos:
• Um provedor de bancos de dados OLE
• Um driver ODBC não instalado no sistema Windows
Para obter instruções detalhadas, ver as seções a seguir:
• “Criação de uma conexão sem DSN”, na página 165
• “Como efetuar a conexão com um banco de dados através de um ISP”, na página 168
Observação: Também é possível utilizar uma seqüência de caracteres de conexão se estiver se conectando por
meio de um driver ODBC instalado no sistema Windows, mas a utilização de um DSN facilita a conexão.
162 Capítulo 9
Criação de uma conexão DSN
É possível utilizar um DSN para criar uma conexão ODBC entre o aplicativo para a Web e o
banco de dados. Um DSN é um nome que contém todos os parâmetros necessários para se
conectar a um determinado banco de dados utilizando um driver ODBC. Para obter mais
informações, veja “Como compreender os DSNs”, na página 727.
Observação: Uma vez que se pode especificar somente um driver ODBC em um DSN, é necessário utilizar uma
seqüência de caracteres de conexão se desejar utilizar um provedor de bancos de dados OLE. Para obter mais
informações, veja “Criação de uma conexão de banco de dados OLE”, na página 167.
É possível definir o DSN em um computador com o Windows local ou remoto. Os tópicos a

seguir descrevem métodos para criar ambos os tipos de conexões:
• “Criação de uma conexão utilizando um DSN local”, na página 163
• “Criação de uma conexão utilizando um DSN remoto”, na página 164
Criação de uma conexão utilizando um DSN local
É possível utilizar um DSN definido localmente para criar uma conexão com um banco de dados
no Dreamweaver. Se desejar utilizar um DSN local, o DSN deve ser definido em um computador
com o Windows no qual o Dreamweaver está em execução.
Para criar uma conexão de banco de dados com um DSN definido localmente:
1 Defina um DSN no computador com o Windows no qual o Dreamweaver está em execução.

Para obter instruções, veja “Como criar um DSN”, na página 728.
2 Abra uma página ASP no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela >
Bancos de dados).
O Dreamweaver exibe todas as conexões definidas para o site.
3 Clique no botão de adição (+) do painel e selecione Nome da fonte de dados (DSN) no
menu pop-up.
A caixa de diálogo Nome da fonte dos dados (DSN) é exibida.
4 Digite um nome para a nova conexão.

Observação: Não utilizar espaços ou caracteres especiais no nome.
5 Selecione a opção Utilizando o DSN local, na parte inferior da caixa de diálogo.
Conexões de banco de dados para programadores ASP 163

6 Selecione o DSN desejado no menu pop-up Nome da fonte de dados (DSN).
Se desejar utilizar um DSN local que ainda não foi definido, clique em Definir para abrir o
administrador de fontes de dados ODBC do Windows. Para obter instruções, veja “Criação de
uma conexão DSN”, na página 163.
7 Se necessário, preencher as caixas Nome do usuário e Senha.
8 Se desejar, é possível limitar o número de itens de banco de dados a serem recuperados pelo
Dreamweaver na fase de design. Para isso, clique em Avançado e digite um nome de esquema
ou catálogo.
Para obter mais informações, veja “Restrição de uma informação do banco de dados no
Observação: É impossível criar um esquema ou catálogo no Microsoft Access.
9 Clique em Testar.
verifique novamente o DSN. Se ainda assim a conexão falhar, verifique as definições da pasta
que o Dreamweaver utiliza para processar páginas dinâmicas (veja “Como especificar onde as
páginas dinâmicas podem ser processadas”, na página 144).
10 Clique em OK.
Criação de uma conexão utilizando um DSN remoto

É possível utilizar um DSN definido em um computador remoto para criar uma conexão com um
banco de dados no Dreamweaver. Se desejar utilizar um DSN remoto, o DSN deve ser definido
em um computador com o Windows no qual o servidor de aplicativos está sendo executado
(provavelmente um servidor IIS).
Para criar uma conexão de banco de dados com um DSN definido remotamente:
1 Defina um DSN no sistema remoto que estiver executando o servidor de aplicativos.

Bancos de dados).
3 Clique no botão de adição (+) do painel e selecione Nome da fonte de dados (DSN) no
menu pop-up.
A caixa de diálogo Nome da fonte dos dados (DSN) é exibida.
5 Selecione a opção Utilizando o DSN no servidor de teste, na parte inferior da caixa de diálogo.
6 Digite o DSN.
Clique no botão DSN para se conectar ao servidor e selecione o DSN definido nele.
7 Se necessário, preencha as caixas Nome do usuário e Senha.
164 Capítulo 9
8 Se desejar, é possível limitar o número de itens de banco de dados a serem recuperados pelo
Dreamweaver na fase de design. Para isso, clique em Avançado e digite um nome de esquema
ou catálogo.
Para obter mais informações, veja “Restrição de uma informação do banco de dados no
Observação: É impossível criar um esquema ou catálogo no Microsoft Access.
9 Clique em Testar.
verifique novamente o DSN. Se ainda assim a conexão falhar, verifique as definições da pasta
que o Dreamweaver utiliza para processar páginas dinâmicas (veja “Como especificar onde as
páginas dinâmicas podem ser processadas”, na página 144).
10 Clique em OK.
Criação de uma conexão sem DSN

É possível utilizar uma conexão sem DSN para criar uma conexão de banco de dados ODBC ou
OLE entre o aplicativo para a Web e o banco de dados.
Utilize uma seqüência de caracteres de conexão para criar a conexão. As seqüências de caracteres
de conexão combinam todas as informações de que o aplicativo para a Web precisa sobre o
servidor para se conectar a um banco de dados. O Dreamweaver insere essa seqüência de
caracteres nos scripts de servidor da página para posterior processamento pelo servidor de
aplicativos.
Este é um exemplo de uma seqüência de caracteres de conexão:
Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\Academy\curriculum.mdb
A seguir, um outro exemplo:
Driver={SQL Server};Server=Socrates;Database=MedCenter;
UID=mwelby;PWD=realme
• “Criação de uma conexão de banco de dados utilizando uma seqüência de caracteres de
conexão”, na página 166
• “Como gravar uma seqüência de caracteres de conexão”, na página 166
• “Criação de uma conexão de banco de dados OLE”, na página 167

Criação de uma conexão de banco de dados utilizando uma seqüência de
caracteres de conexão
É possível utilizar uma seqüência de caracteres de conexão para criar uma conexão de banco de dados
entre o aplicativo para a Web e o banco de dados.
Para criar uma conexão sem DSN:
Bancos de dados).
O Dreamweaver exibe todas as conexões definidas para o site, se houver alguma.
2 Clique no botão de adição (+) do painel e selecione Seqüência personalizada de caracteres da
conexão no menu pop-up.
A caixa de diálogo Seqüência personalizada de caracteres da conexão é exibida como segue.

Para obter mais informações, seguir um dos procedimentos abaixo:
• Pressione o botão Ajuda da caixa de diálogo.
• Veja “Como gravar uma seqüência de caracteres de conexão”, na página 166.
Como gravar uma seqüência de caracteres de conexão
As seqüências de caracteres de conexão combinam todas as informações de que o aplicativo para a
Web precisa sobre o servidor para se conectar a um banco de dados. O Dreamweaver insere essa
seqüência de caracteres nos scripts de servidor da página para posterior processamento pelo
servidor de aplicativos.
As seqüências de caracteres de conexão para bancos de dados Microsoft Access e SQL Server
consistem em uma combinação dos parâmetros a seguir, separados por ponto-e-vírgula:
O parâmetro Provider especifica o provedor de bancos de dados OLE do banco de dados. A
seguir, alguns exemplos de parâmetros de provedores de bancos de dados OLE conhecidos para
bancos de dados Access, SQL Server e Oracle, respectivamente:
Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
Para obter o valor do parâmetro do provedor de bancos de dados OLE, ver a documentação do
revendedor do provedor ou consultar o administrador do sistema.
166 Capítulo 9
Se não for incluso um parâmetro Provider, o provedor de banco de dados OLE padrão para
ODBC será utilizado e será necessário especificar um driver ODBC adequado para o banco de
dados.
O parâmetro Driver especifica o driver ODBC a ser utilizado se não for especificado um provedor
de bancos de dados OLE para o banco de dados.
O parâmetro Server especifica o servidor que hospedará o banco de dados SQL Server se o
aplicativo para a Web for executado em um outro servidor.
O parâmetro Database corresponde ao nome de um banco de dados SQL Server.
O parâmetro DBQ representa o caminho de um banco de dados com base em arquivos (por
exemplo: um banco de dados que tenha sido criado no Microsoft Access). O caminho
corresponde àquele no servidor que hospedará o arquivo de banco de dados.
O parâmetro UID especifica o nome do usuário.
O parâmetro PWD especifica a senha do usuário.
O parâmetro DSN representa o nome da fonte de dados, se estiver sendo utilizada. Dependendo
da maneira como o DSN é definido no servidor, é possível omitir outros parâmetros da seqüência
de caracteres de conexão. Por exemplo: DSN=Results poderá ser uma seqüência de caracteres de
conexão válida se os demais parâmetros para criação do DSN forem definidos (veja “Como criar
um DSN”, na página 728).
É possível que as seqüências de caracteres de conexão de outros tipos de bancos de dados não
utilizem os parâmetros listados anteriormente ou terão nomes ou usos diferentes para os
parâmetros. Para obter mais informações, ver a documentação do revendedor do provedor de
bancos de dados ou consultar o administrador do sistema.
A seguir, um exemplo de uma seqüência de caracteres de conexão que cria uma conexão ODBC a
um banco de dados Access denominado trees.mdb:
DBQ=C:\Inetpub\wwwroot\Research\trees.mdb
A seguir, um exemplo de uma seqüência de caracteres de conexão que cria uma conexão de banco
de dados OLE com um banco de dados SQL Server denominado Mothra e localizado em um
servidor chamado Gojira:
Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith;
PWD=orlando8
Criação de uma conexão de banco de dados OLE

É possível utilizar um provedor de bancos de dados OLE para se comunicar com o banco de
dados. A criação de uma conexão de banco de dados OLE direta pode aumentar a velocidade da
conexão, uma vez que elimina a camada ODBC entre o aplicativo para a Web e o banco de dados.
A utilização de um provedor de banco de dados OLE voltado especificamente para bancos de
dados elimina o intermediário ODBC.
Se não for especificado um provedor de banco de dados OLE para o banco de dados, o ASP
utilizará o provedor de banco de dados OLE padrão para drivers ODBC para se comunicar com
um driver ODBC, que, por sua vez, se comunicará com o banco de dados.
O banco de dados OLE está disponível somente no Windows NT, 2000 ou XP.

Há outros provedores de bancos de dados OLE para bancos de dados distintos. É possível obter
provedores de bancos de dados OLE para o Microsoft Access e SQL Server efetuando o download
e instalando os pacotes Microsoft Data Access Components (MDAC) 2.5 e 2.6 no computador
com o Windows no qual está sendo executado o IIS ou o PWS (se aplicável). É possível efetuar o
download gratuito dos pacotes MDAC a partir do site da Microsoft na Web, em http://
www.microsoft.com/data/download.htm.
Observação: Certifique-se de instalar o MDAC 2.5 antes de instalar o MDAC 2.6.
É possível efetuar o download de provedores de bancos de dados OLE para bancos de dados
Oracle9i e Oracle8i diretamente do site da Oracle na Web, em http://otn.oracle.com/software/
tech/windows/ole_db/content.html (é necessário registrar-se).
No Dreamweaver MX, as conexões de banco de dados OLE são criadas incluindo-se um
parâmetro Provider em uma seqüência de caracteres de conexão. A seguir, alguns exemplos de
parâmetros de provedores de bancos de dados OLE conhecidos para bancos de dados Access, SQL
Server e Oracle, respectivamente:
Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
Para obter o valor do parâmetro do provedor de bancos de dados OLE, ver a documentação do
revendedor do provedor ou consultar o administrador do sistema.
Como efetuar a conexão com um banco de dados através

de um ISP
Se você é um programador ASP e trabalha com um ISP (provedor de serviços de Internet)
comercial, é possível que não conheça o caminho físico dos arquivos para upload, incluindo o(s)
arquivo(s) de banco de dados. Se o ISP não definir um DSN para você ou se demorar a fazê-lo,
será necessário encontrar uma outra forma de criar as conexões com os arquivos de banco de
dados. Uma alternativa é criar uma conexão sem DSN com um arquivo de banco de dados, mas
somente será possível definir esta conexão se o usuário souber o caminho físico do arquivo de
banco de dados no servidor do ISP.
Esta seção descreve como obter o caminho físico de um arquivo de banco de dados em um
servidor utilizando o método MapPath do objeto de servidor ASP. Esta seção contém os tópicos a
seguir:
• “Como compreender os caminhos físicos e virtuais”, na página 169
• “Como localizar um caminho físico de um arquivo utilizando o caminho virtual”, na
página 169
• “Como utilizar um caminho virtual para se conectar a um banco de dados”, na página 170
Observação: As técnicas discutidas neste capítulo serão aplicáveis somente se o banco de dados se basear em
arquivos, como no caso de um banco de dados Microsoft Access no qual os dados são armazenados em um
arquivo .mdb.
168 Capítulo 9
Como compreender os caminhos físicos e virtuais
Após utilizar o Dreamweaver para efetuar o upload dos arquivos em um servidor remoto, os
arquivos são armazenados em uma pasta na árvore de diretórios locais do servidor. Por exemplo:
em um servidor com o Microsoft IIS, o caminho para a home page será este:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Este caminho é conhecido como o caminho físico do arquivo.
A URL utilizada para abrir o arquivo, no entanto não utiliza o caminho físico. Ela utiliza o nome
do servidor ou domínio seguido de um caminho virtual, como no exemplo a seguir:
www.plutoserve.com/jsmith/index.htm
O caminho virtual, /jsmith/index.htm, representa o caminho físico,
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm.
Como localizar um caminho físico de um arquivo utilizando o caminho virtual

Se você tiver uma conta em um ISP, é possível que não saiba o caminho físico dos arquivos
carregados. Os ISPs normalmente fornecem um host FTP, possivelmente um diretório do host,
bem como um nome e uma senha para efetuar logon. Eles também especificam uma URL que
permite exibir suas páginas na Internet, como www.plutoserve.com/jsmith/.
Se você souber a URL, poderá obter o caminho virtual do arquivo, ou seja, o caminho que
acompanha o nome do servidor ou domínio em uma URL. Uma vez conhecido o caminho
virtual, é possível obter o caminho físico do arquivo no servidor através do método MapPath.
Entre outras coisas, o método MapPath considera o caminho virtual como um argumento e
retorna o caminho físico e o nome do arquivo. A seguir, a sintaxe do método:
Server.MapPath("/virtualpath")
Suponha que o caminho virtual de um arquivo seja /jsmith/index.htm. A expressão a seguir
retornará o caminho físico:
Server.MapPath("/jsmith/index.htm")
É possível tentar utilizar o método MapPath como segue.
1 Abra uma página ASP no Dreamweaver e alterne para a visualização do código (Exibir >
Código).
2 Digite esta expressão no código HTML da página.
<%Response.Write(stringvariable)%>
3 Utilize o método MapPath para obter um valor para o argumento stringvariable.

Por exemplo:
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
4 Alternar para a visualização do projeto (Exibir > Projeto) e ativar o Live Data (Exibir > Live Data)
para exibir a página.
A página exibe o caminho físico do arquivo no servidor de aplicativos. Utilizando o exemplo
desta seção, a página exibe este caminho físico:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Para obter mais informações sobre o método MapPath, veja a documentação on-line fornecida
com o Microsoft IIS ou PWS.

Como utilizar um caminho virtual para se conectar a um banco de dados
Para gravar uma seqüência de caracteres de conexão sem DSN em um arquivo de banco de dados
localizado em um servidor remoto, é necessário conhecer o caminho físico do arquivo. O exemplo
a seguir é uma seqüência de caracteres de conexão sem DSN típica para um banco de dados
Microsoft Access:
DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Se o caminho físico dos arquivos existentes no servidor remoto não for conhecido, é possível obtê-
lo utilizando o método MapPath na seqüência de caracteres de conexão.
Para criar uma conexão sem DSN utilizando o método MapPath:
1 Efetue o upload do arquivo de banco de dados no servidor remoto.

Anote o caminho virtual do arquivo (por exemplo: /jsmith/data/statistics.mdb).
Bancos de dados).
3 Clique no botão de adição (+) do painel e selecione Seqüência personalizada de caracteres da
conexão no menu pop-up.
5 Digite a seqüência de caracteres de conexão e utilize o método MapPath para fornecer o

parâmetro DBQ.
Suponha que o caminho virtual do banco de dados Microsoft Access seja /jsmith/data/
statistics.mdb. A seqüência de caracteres de conexão pode ser expressa como a seguir se o
VBScript for utilizado como linguagem de scripts:
“Driver={Microsoft Access Driver (*.mdb)};DBQ=” & Server.MapPath¬
("/jsmith/data/statistics.mdb")
O ‘E’ comercial (&) é utilizado para concatenar (combinar) duas seqüências de caracteres. A
primeira seqüência de caracteres está entre aspas e a segunda é retornada pela expressão
Server.MapPath. Quando as duas seqüências de caracteres são combinadas, é criada esta
seqüência de caracteres:
Driver={Microsoft Access Driver (*.mdb)}; ¬
DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Se o JavaScript for utilizado, a expressão será idêntica exceto pelo uso de um sinal de adição (+)
em vez de um ‘E’ comercial (&) para concatenar as duas seqüências de caracteres:
“Driver={Microsoft Access Driver (*.mdb)};DBQ=” + Server.MapPath¬
("/jsmith/data/statistics.mdb")
6 Selecione a opção Utilizando o driver no servidor de teste.
170 Capítulo 9
7 Clique em Testar.
verifique novamente a seqüência de caracteres de conexão.
Se ainda assim a conexão falhar, entre em contato com o ISP para certificar-se de que o driver
de banco de dados especificado na seqüência de caracteres de conexão foi instalado no servidor
remoto. Verifique também se o ISP possui a versão mais recente do driver. Por exemplo: um
banco de dados criado no Microsoft Access 2000 não funcionará com o Microsoft Access
Driver 3.5. É necessário um Microsoft Access Driver 4.0 ou mais avançado.
8 Clique em OK.
9 Atualize a conexão de banco de dados das páginas dinâmicas existentes e utilize a nova conexão
com qualquer página nova que for criada.
Para atualizar a conexão de uma página dinâmica, abra a página no Dreamweaver, clique duas
vezes no nome do conjunto de registros localizado no painel Ligações ou no painel
Comportamentos de servidor e, no menu pop-up Conexão, selecione a conexão recém-criada.

Dreamweaver não criará uma conexão de banco de dados para o aplicativo ASP até que o usuário
defina um conjunto de registros para uma página do aplicativo (veja “Definição de um conjunto
de registros”, na página 544). Nesse caso, o Dreamweaver gravará um código no arquivo para
estabelecer a conexão e inserirá uma instrução de inclusão na página. Durante a execução, o
Bancos de dados).
2 Clique com o botão direito do mouse na conexão e escolha Editar conexão no menu pop-up,
como segue.

1 Abra uma página ASP no Dreamweaver e, em seguida, abrir o painel Bancos de dados (Janela >
Bancos de dados).
2 Clique com o botão direito do mouse na conexão desejada e escolher Excluir a conexão no
menu pop-up.
Observação: Para evitar a ocorrência de erros após excluir uma conexão, atualize todos os conjuntos de
registros que utilizam a conexão antiga, clicando duas vezes no nome do conjunto de registro no painel
Ligações e escolhendo uma nova conexão.
172 Capítulo 9
CAPÍTULO 10
programadores JSP
Para utilizar um banco de dados com aplicativos JavaServer Pages (JSP), é necessário criar uma
conexão de banco de dados no Macromedia Dreamweaver MX. Este capítulo descreve como criar
a conexão de banco de dados.
Este capítulo pressupõe que um aplicativo JSP já esteja configurado (veja “Configuração de um
aplicativo para a Web”, na página 137). Também pressupõe que um banco de dados tenha sido
configurado no computador local ou em um sistema ao qual o usuário tem acesso de rede ou FTP.
• “Como compreender as conexões JSP”, na página 173
• “Como efetuar a conexão através de um driver ODBC”, na página 176
dados e as correspondentes conexões, veja “Guia do iniciante em bancos de dados”, na
página 705.
Como compreender as conexões JSP

Um aplicativo JSP deve conectar-se a um banco de dados por meio de um driver JDBC. O driver
atua como intérprete e permite que o aplicativo JSP se comunique com um banco de dados. Para
obter mais informações sobre JDBC e a função dos drivers de banco de dados, veja “Como
estabelecer a interface com o banco de dados”, na página 712.
É necessário especificar determinados valores de parâmetros para efetuar uma conexão por meio de
um driver JDBC. Para obter mais informações, veja “Sobre os parâmetros de conexão JDBC”, na
página 175. Para obter os valores de parâmetros específicos do driver, veja a documentação do
revendedor do driver ou consulte o administrador do sistema.
Também é possível utilizar um driver ODBC (conectividade aberta de banco de dados, Open
Database Connectivity), ou DSN no Windows, se houver um bridge driver JDBC-ODBC. Para
obter mais informações, veja “Como efetuar a conexão através de um driver ODBC”, na
página 176.
173
Esta seção descreve como conectar-se a um banco de dados ao desenvolver um aplicativo JSP no
Dreamweaver MX.
Esta seção pressupõe que um aplicativo JSP esteja funcionando em um computador local ou
remoto. Para obter mais informações, veja “Configuração de um aplicativo para a Web”, na
página 137.
Antes de conectar-se a um banco de dados, é necessário obter um driver JDBC para o banco de
dados.
Após instalar o driver de banco de dados, é possível conectar-se ao banco de dados. Para obter
instruções, veja “Criação de uma conexão de banco de dados para JSP”, na página 174.
Obtenção de um driver JDBC para o banco de dados

Certifique-se da presença de um driver JDBC para o banco de dados antes de tentar criar uma
conexão de banco de dados. Alguns drivers JDBC comuns são o driver Oracle Thin JDBC,
Oracle Java Driver e os drivers i-net JDBC para Microsoft SQL Server.
Revendedores de sistemas de banco de dados como a Oracle normalmente já incluem os drivers
em seus sistemas. Também é possível adquirir os drivers de outros revendedores. Por exemplo: é
possível obter um driver JDBC para Microsoft SQL Server da i-net software em
http://www.inetsoftware.de/English/Produkte/JDBC_Overview/default.htm.
A Sun também fornece uma lista de drivers JDBC e seus respectivos fornecedores que podem ser
encontrados no site da Web, em http://industry.java.sun.com/products/jdbc/drivers.
Uma vez instalado o driver JDBC para o banco de dados, é possível criar uma conexão de banco
de dados.
Criação de uma conexão de banco de dados para JSP

Após instalar o driver JDBC apropriado para o banco de dados no computador com o servidor de
aplicativos, é possível criar uma conexão de banco de dados no Dreamweaver.
Para criar uma conexão de banco de dados para JSP:
1 Abra uma página JSP no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela >
Bancos de dados).
O Dreamweaver exibe as conexões definidas para o site.
2 Clique no botão de adição (+) e escolha um driver no menu pop-up.
Se o driver não estiver listado, escolha Conexão JDBC personalizada.
Uma caixa de diálogo de conexão é exibida.
3 Digite os parâmetros de conexão na caixa de diálogo de conexão.
Para obter mais informações, veja “Sobre os parâmetros de conexão JDBC”, na página 175.
4 Especifique a localização do driver JDBC que deseja utilizar.
• Se o driver JDBC estiver instalado no mesmo computador que o Dreamweaver, selecione a
opção Utilizando o driver nesta máquina.
• Se o driver JDBC não estiver instalado no mesmo computador que o Dreamweaver, selecione a
opção Utilizando o driver no servidor de teste.
174 Capítulo 10
5 Clique em Testar.
verifique novamente os parâmetros de conexão. Se ainda assim a conexão falhar, verifique as
definições da pasta que o Dreamweaver utiliza para processar páginas dinâmicas (veja “Como
especificar onde as páginas dinâmicas podem ser processadas”, na página 144).
6 Clique em OK.
Sobre os parâmetros de conexão JDBC

As conexões JDBC geralmente são formadas por quatro parâmetros: o driver, o nome do usuário,
a senha e a URL (que especifica a localização do banco de dados). Geralmente, os valores do
parâmetro do driver e do parâmetro da URL dependem do driver.
Esta seção demonstra como definir parâmetros de conexão no Dreamweaver utilizando o driver
Oracle Thin JDBC como exemplo. Para obter os parâmetros de conexão de outros drivers,
consultar a documentação do revendedor do driver.
O driver Oracle Thin JDBC oferece suporte aos bancos de dados Oracle. Se desejar utilizar este
driver para se conectar ao banco de dados Oracle, clique no botão de adição (+) exibido no painel
Bancos de dados e escolher Oracle Thin Driver (Oracle) no menu pop-up. A caixa de diálogo
exibida a seguir é mostrada parcialmente completa:
Digite um nome de conexão e substituir os alocadores de espaço (entre colchetes) por parâmetros
de conexão válidos. Para o alocador de espaço [hostname], digite o endereço IP ou nome atribuído
ao servidor de banco de dados pelo administrador do sistema. Para o alocador de espaço [sid],
digite o identificador do sistema de banco de dados. Se houver mais de um banco de dados Oracle
em execução no mesmo sistema, utilize o valor de SID para diferenciá-los.
Conexões de banco de dados para programadores JSP 175

Por exemplo: se o servidor se chamar Aristóteles, a porta do banco de dados for 1521 e o SID
definido para o banco de dados for patients naquele servidor, digite estes valores de parâmetros
no Dreamweaver:
Como efetuar a conexão através de um driver ODBC

Embora os aplicativos JSP tenham de se comunicar com bancos de dados por meio de drivers
JDBC, eles podem se comunicar por meio de drivers ODBC se houver um bridge driver JDBC-
ODBC. O driver ODBC permite utilizar um Windows DSN, simplificando a tarefa de criar a
conexão. O bridge driver funciona como intérprete entre o aplicativo JSP, com linguagem JDBC,
e o driver ODBC, com linguagem ODBC. Esse canal de comunicação permite ao aplicativo JSP
“conversar” com o banco de dados.
Este tipo de conexão oferece duas vantagens principais. Primeiro, é possível utilizar drivers ODBC
gratuitos da Microsoft. Segundo, é possível utilizar um DSN para simplificar a tarefa de criação da
conexão.
Os requisitos a seguir devem ser satisfeitos para se efetuar uma conexão por meio de um driver
ODBC:
• O servidor de aplicativos JSP deve estar instalado e funcionando em um computador com o
sistema Windows.
• Um driver ODBC para o banco de dados deve estar instalado no computador com o Windows
no qual o servidor de aplicativos está sendo executado. Para obter mais informações, veja
“Verificação de um driver ODBC”, na página 177.
• Um bridge driver JDBC-ODBC deve estar instalado no computador com o Windows no qual
o servidor de aplicativos está sendo executado. Para obter mais informações, veja “Instalação do
bridge driver JDBC-ODBC da Sun”, na página 177.
Se esses requisitos forem atendidos, a conexão por meio de um driver ODBC poderá ser feita.
Para obter instruções, veja “Criação de uma conexão ODBC”, na página 177.
176 Capítulo 10
Verificação de um driver ODBC
Certifique-se de que o driver ODBC para o banco de dados foi instalado no computador com o
Windows no qual o servidor de aplicativos JSP está sendo executado. Para saber se o driver
ODBC foi instalado ou não, veja “Para exibir os drivers ODBC que estão instalados em um
sistema Windows”, na página 715. Se um driver apropriado não estiver instalado, efetuar o
download e instalar o pacote de aplicativos Microsoft Data Access Components (MDAC) 2.5 e
2.6 no computador com o servidor de aplicativos JSP. É possível efetuar o download gratuito dos
pacotes MDAC no site da Microsoft na Web, em http://www.microsoft.com/data/download.htm.
Esses pacotes contêm os drivers ODBC mais recentes da Microsoft.
Observação: Instalar o MDAC 2.5 antes de instalar o MDAC 2.6.
Se houver um driver ODBC para o banco de dados, instalar um driver JDBC-ODBC em seguida.
Instalação do bridge driver JDBC-ODBC da Sun

Para conectar-se por meio de um driver ODBC, é necessário instalar o bridge driver JDBC-
ODBC da Sun no computador com o Windows no qual o servidor de aplicativos JSP está em
execução. Este driver é fornecido com o Sun Java 2 SDK, edição padrão, para Windows.
Para saber se já possui o Java 2 SDK com o driver, verifique se as pastas c:\jdk1.2.2 ou c:\jdk1.3
existem no disco rígido.
Observação: Java 1.2.2 e 1.3 são o mesmo que Java 2.
Se não tiver o SDK, efetuar o download no site da Sun na Web, em http://java.sun.com/j2se/, e

instalá-lo. O driver é instalado automaticamente junto com o SDK.
Embora seja adequado utilizar o bridge driver JDBC-ODBC da Sun com sistemas de bancos de
dados mais comuns (como o Microsoft Access) com fins de desenvolvimento, esse bridge driver
não se destina ao uso de produção. Por exemplo: ele permite que apenas uma página JSP se
conecte ao banco de dados de cada vez (em outras palavras, não permite o uso simultâneo de
vários segmentos). Para obter mais informações sobre as limitações do driver, consulte o artigo
12409 na Central de suporte da Macromedia, no endereço
http://www.macromedia.com/go/jdbc-odbc_problems.
Após instalar o bridge driver, é possível criar a conexão de banco de dados.
Criação de uma conexão ODBC

Antes de se conectar por meio de um driver ODBC, certifique-se de que o driver ODBC
apropriado e o bridge driver JDBC-ODBC da Sun estejam instalados no computador com o
Windows no qual o servidor de aplicativos JSP está em execução .
Para conectar-se por meio de um driver ODBC em JSP:
1 Defina um DSN no sistema Windows no qual está localizado o servidor de aplicativos.

Bancos de dados).
O painel exibe as conexões definidas para esse site.

3 Clique no botão de adição (+) exibido no painel e escolher “ODBC Database (Sun JDBC-
ODBC Driver)” no menu pop-up.
A caixa de diálogo ODBC Database (Sun JDBC-ODBC Driver) é exibida.
5 Substitua o alocador de espaço [odbc dsn] na caixa URL pelo DSN definido na etapa 1.
A caixa URL deverá ter esta aparência:
jdbc:odbc:myDSN
6 Especifique o nome de usuário e a senha de acesso ao banco de dados.

Se o nome de usuário ou a senha não forem necessários, deixe as caixas em branco. Por
exemplo: se o DSN for denominado Acme e não for necessário um nome de usuário ou uma
senha para acessar o banco de dados, digite estes valores de parâmetro:
Driver: sun.jdbc.odbc.JdbcOdbcDriver
URL: jdbc:odbc:Acme
Nome de usuário:
Senha:
7 Especifique a localização do bridge driver JDBC-ODBC.
• Se o driver estiver instalado no mesmo computador que o Dreamweaver, selecione a opção
Utilizando o driver nesta máquina.
• Se o driver não estiver instalado no mesmo computador que o Dreamweaver, selecione a opção
Utilizando o driver no servidor de teste.
8 Clique em Testar.
verifique novamente o DSN e os demais parâmetros de conexão. Se ainda assim a conexão
falhar, verifique as definições da pasta que o Dreamweaver utiliza para processar páginas
dinâmicas (veja “Como especificar onde as páginas dinâmicas podem ser processadas”, na
página 144).
9 Clique em OK.
178 Capítulo 10
Dreamweaver não criará uma conexão de banco de dados para o aplicativo JSP até que o usuário
Bancos de dados).
2 Clique com o botão direito do mouse na conexão desejada e escolha Editar conexão no menu
pop-up.
Se o usuário renomear uma conexão, deverá atualizar todos os conjuntos de registros que utilizam
o nome da conexão antiga. Para isso, deverá clicar duas vezes no conjunto de registros localizado
no painel Ligações e escolher um novo nome de conexão na caixa de diálogo Conjunto de
registros.
Bancos de dados).
menu pop-up.
Para evitar a ocorrência de erros após excluir uma conexão, atualize todos os conjuntos de registros
que utilizam a conexão antiga. Para isso, clique duas vezes no nome do conjunto de registros no
painel Ligações e escolha uma nova conexão na caixa de diálogo Conjunto de registros.

180 Capítulo 10
CAPÍTULO 11
programadores PHP
Para utilizar um banco de dados com um aplicativo PHP, é necessário criar uma conexão de banco
de dados no Macromedia Dreamweaver MX. Este capítulo descreve como criar a conexão de
banco de dados.
Para fins de desenvolvimento PHP, o Dreamweaver oferece suporte apenas para o sistema de
banco de dados MySQL. Outros sistemas de banco de dados, como Microsoft Access ou Oracle,
não são suportados. O MySQL é um software de código-fonte aberto que pode ser copiado
gratuitamente pela Internet para uso não-comercial. Para obter mais informações, veja o site do
MySQL na Web, em http://www.mysql.com/downloads/mysql.html.
Este capítulo pressupõe que um aplicativo PHP já esteja configurado (veja “Configuração de um
aplicativo para a Web”, na página 137). Também pressupõe que um banco de dados MySQL esteja
configurado no computador local ou em um sistema ao qual o usuário tem acesso de rede ou FTP.
dados e as correspondentes conexões, veja “Guia do iniciante em bancos de dados”, na página 705.

Esta seção descreve como conectar-se a um banco de dados ao desenvolver um aplicativo PHP no
Dreamweaver. Esta seção pressupõe que o usuário tem um ou mais bancos de dados MySQL e
que o servidor MySQL está iniciado.
Para criar uma conexão de banco de dados com o banco de dados MySQL:
1 Abra uma página PHP no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela >
Bancos de dados).
2 Clique no botão de adição (+) exibido no painel e escolher Minha conexão SQL no menu pop-up.
A caixa de diálogo Minha conexão SQL é exibida.
181
Dreamweaver não criará uma conexão de banco de dados para o aplicativo PHP até que o usuário
Bancos de dados).
2 Clique com o botão direito do mouse na conexão desejada e escolha Editar conexão no menu
pop-up.
Bancos de dados).
menu pop-up.
Para evitar a ocorrência de erros após excluir uma conexão, atualizar todos os conjuntos de
registros que utilizam a conexão antiga. Para isso, clique duas vezes no nome do conjunto de
registros no painel Ligações e escolha uma nova conexão na caixa de diálogo Conjunto de
registros.
182 Capítulo 11
Parte III
Parte III
Como trabalhar com
códigos de página
Utilize as ferramentas de codificação avançadas do

Dreamweaver para criar ou modificar páginas.
• Capítulo 12, “Configuração do seu ambiente de
codificação”
• Capítulo 13, “Codificação no Dreamweaver”
• Capítulo 14, “Otimização e depuração do código”
• Capítulo 15, “Edição do código na visualização do
projeto”
CAPÍTULO 12
Configuração do seu ambiente de codificação
É possível adaptar o ambiente de codificação no Macromedia Dreamweaver MX à sua forma de

trabalho. Por exemplo: é possível alterar a forma de exibir códigos, configurar diferentes atalhos de
teclado, ou importar e utilizar a biblioteca de tags favorita.
Este capítulo aborda os tópicos a seguir:
• “Exibição do seu código”, na página 185
• “Definição de preferências de visualização”, na página 186
• “Definição de preferências de codificação”, na página 187
• “Personalização de atalhos de teclado”, na página 191
• “Definição de preferências de codificação”, na página 187
• “Definição de preferências do Validador”, na página 191
• “Gerenciamento de bibliotecas de tags”, na página 192
• “Importação de tags personalizadas para o Dreamweaver”, na página 195
• “Utilização de um editor de HTML externo com o Dreamweaver”, na página 198
Exibição do seu código

É possível exibir o código-fonte do documento atual de várias maneiras: é possível exibi-lo na janela
do documento ativando a visualização do código, dividir a janela do documento para exibir a página
e o código associado, ou trabalhar no inspetor de código, uma janela de codificação separada.
Observação: Visualização do código e inspetor de código compartilham a mesma funcionalidade.
Esta seção contém instruções para alterar a forma de exibição de código.
Para exibir o código na janela do documento:
Escolha Exibir > código.
Para exibir o código em uma janela separada:
Escolha Janela > Outras > Inspetor de código.
185
Para codificar e editar visualmente uma página na janela do documento ao mesmo tempo:
1 Escolha Exibir > código e projeto.

O código é exibido no painel superior e a página, no painel inferior.
2 Para exibir a página na parte superior, escolher Exibir > Visualização do projeto no alto.
3 Para ajustar o tamanho dos painéis na janela do documento, arraste a barra de divisão até a
posição desejada.
A barra de divisão está localizada entre os dois painéis.
A visualização do código é atualizada automaticamente quando são feitas alterações na
visualização do projeto. Mas, após fazer alterações na visualização do código, é necessário atualizar
manualmente o documento na visualização do projeto. Para fazer isso, clique na visualização do
projeto e pressionar F5.
Definição de preferências de visualização

É possível definir a quebra automática de linha, exibir números de linha para o código, realçar o
código HTML inválido, definir a sinalização da sintaxe por cores para elementos de código e
definir o recuo no menu Exibir > Opções de visualização do código.
Para definir opções para a visualização do código e para o inspetor de código:
1 Exibir pelo menos uma página na visualização do código ou no inspetor de código.

2 Escolha Exibir > Opções de visualização do código.
Um menu pop-up é exibido com uma marca de seleção ao lado de cada opção já definida.
3 Selecione qualquer uma destas opções do menu:
• A opção Quebra automática de linha quebra automaticamente o código para permitir exibi-lo
sem rolar horizontalmente. Esta opção não insere quebras de linha, apena facilita a visualização
do código.
• A opção Números de linha exibe números de linha ao lado do código.
• A opção Realçar o HTML incorreto faz com que o Dreamweaver realce em amarelo qualquer
HTML inválido não suportado por navegadores. Quando uma tag inválida for selecionada, o
inspetor de propriedades exibirá informações sobre como corrigir o erro.
• A opção Sinalização da sintaxe por cores ativa e desativa a codificação por cores. Para alterar o
esquema de cores, veja “Definição de preferências de cores de código”, na página 190.
• A opção Recuo automático faz o recuo automático de código quando o usuário pressiona a
tecla Enter enquanto grava o código. Para alterar o espaçamento do recuo ou as tags que geram
recuo automático, veja “Definição de preferências de formatação de código”, na página 187.
Caso uma opção já marcada tenha sido selecionada, ela será desativada. Caso contrário, a opção
será definida.
186 Capítulo 12
Definição de preferências de codificação
É possível definir as preferências de codificação a seguir no Dreamweaver:
• As preferências de formatação de código determinam as opções comuns de formatação de
código, como tamanho e recuo da linha. Veja “Definição de preferências de formatação de
código”, na página 187. Também é possível aplicar novas preferências de formatação a
documentos HTML existentes. Veja “Aplicação de novas preferências de formatação a
documentos existentes”, na página 189.
• As preferências Dicas de código permitem ativar ou desativar dicas de código e personalizar as
dicas exibidas. As dicas de código oferecem ajuda em linha enquanto o usuário digita na
visualização do código. Por exemplo: se for digitado um colchete da tag de abertura (<), será
exibido um menu listando as possíveis tags. Em vez de digitar o restante da tag manualmente, é
possível selecionar uma das dicas listadas no menu e pressionar Enter para digitá-la
automaticamente. Veja “Definição de preferências de dicas de código”, na página 189.
• As preferências de regravação de código determinam quais alterações, se houver, o
Dreamweaver fará no código quando um documento HTML ou de script for aberto. Veja
“Definição de preferências de regravação de código”, na página 189.
• Preferências de codificação por cores permitem definir formatação especial e sinalização da
sintaxe por cores para elementos de código como tags, comentários e scripts. Veja “Definição
de preferências de cores de código”, na página 190.
Para definir preferências avançadas, utilizar o Editor de bibliotecas de tags (veja “Gerenciamento de
bibliotecas de tags”, na página 192).
Definição de preferências de formatação de código

É possível alterar a aparência do código especificando preferências de formatação como recuo,
tamanho de linha, a caixa da tag e nomes de atributos.
Observar que todas as preferências, exceto “Ignorar a caixa de”, afetam apenas os novos
documentos e inclusões feitos nos documentos existentes. Ou seja, quando um documento
HTML criado anteriormente for aberto, estas opções de formatação não serão aplicadas a ele; para
reformatar documentos HTML existentes, utilizar o comando Aplicar a formatação de origem.
Para obter mais informações, veja “Aplicação de novas preferências de formatação a documentos
existentes”, na página 189.
Para definir preferências de formatação de código:
1 Selecione Editar > Preferências > Formato do código.

A caixa de diálogo Formato do código é exibida.
Configuração do seu ambiente de codificação 187

2 Ajuste qualquer uma destas definições da caixa de diálogo:
A opção Utilizar especifica se os recuos serão feitos com espaços ou tabulações.
A opção Tamanho do recuo determina o tamanho dos recuos. O tamanho será medido em
espaços se a opção Utilizar estiver definida para espaços, ou em tabulações se essa opção estiver
definida para tabulações.
A opção Tamanho da tabulação determina o tamanho das tabulações (medido em espaços de
caracteres).
Quebra automática de linha adiciona uma quebra de linha incondicional quando uma linha
atinge a largura de coluna especificada (o Dreamweaver insere quebras de linha incondicionais
apenas nos locais onde estas não alteram a aparência do documento nos navegadores. Por isso,
algumas linhas podem ser mantidas mais longas que a especificação na opção Quebra
automática de linha). De modo contrário, a opção Quebra automática de linha, na visualização
do código, adiciona uma quebra “condicional” às linhas que ultrapassam a largura da janela.
A opção Tipo de quebra de linha especifica o tipo de servidor remoto (Windows, Macintosh ou
UNIX) que serve de host para o site remoto. A escolha do tipo adequado dos caracteres de
quebra de linha garante que o código-fonte HTML será exibido corretamente no servidor
remoto (para o FTP, essa definição se aplica apenas ao modo de transferência binária; o modo
de transferência ASCII do Dreamweaver ignora essa definição. Quando é efetuado o download
dos arquivos no modo ASCII, o Dreamweaver define as quebras de linha com base no sistema
operacional do computador; se for efetuado upload dos arquivos no modo ASCII, todas as
quebras de linha serão definidas como CR LF). Essa definição também é útil quando se está
trabalhando com um editor de texto externo que reconhece apenas determinados tipos de
quebras de linha. Por exemplo: utilizar CR LF se o Bloco de Notas for o editor externo.
As opções Caixa padrão da tag e Caixa padrão do atributo controlam a utilização de maiúsculas
e minúsculas nos nomes de tags e atributos. Estas opções são aplicadas a tags e atributos
inseridos ou editados na janela do documento, mas não às tags e aos atributos digitados
diretamente na visualização do código, ou àqueles em um documento quando este for aberto (a
menos que uma ou ambas as opções em Ignorar a caixa de sejam selecionadas).
A opção Ignorar a caixa de: Tags e atributos especifica se as opções de caixa definidas serão
implementadas sempre, inclusive quando for aberto um documento HTML existente. Quando
uma destas opções for selecionada, todas as tags ou atributos nos documentos abertos serão
imediatamente convertidos na caixa especificada, bem como todas as tags ou atributos abertos
daqui em diante (até que seja cancelada novamente esta opção). As tags ou atributos digitados
na visualização do código e no Quick Tag Editor também serão convertidos na caixa
especificada, da mesma forma que as tags ou os atributos inseridos utilizando a barra Inserir.
Por exemplo: se desejar que nomes de tags sejam sempre convertidos em minúsculas,
especificar minúsculas em Caixa para tags e, em seguida, selecione a opção Ignorar a caixa de:
Tags. Em seguida, quando for aberto um documento contendo nomes de tags em maiúsculas,
o Dreamweaver os converterá em minúsculas.
A opção Centralização especifica se os elementos devem ser centralizados utilizando div
align="center" ou center. Ambos fazem parte da especificação HTML 4.0 Transitional, mas
center conta com suporte de um número maior de navegadores.
188 Capítulo 12
Aplicação de novas preferências de formatação a documentos existentes
As opções de formatação de código especificadas em preferências de formato do código só se
aplicam a quaisquer documentos novos criados com o Dreamweaver. Para aplicar novas
preferências de formatação a documentos existentes, utilizar o comando Aplicar a formatação de
origem.
Para aplicar novas preferências de formatação a um documento existente:
1 Abra o documento no Dreamweaver.

2 Escolha Comandos > Aplicar a formatação de origem.
Definição de preferências de dicas de código

A opção Dicas de código permite inserir rapidamente nomes de tags, atributos e valores à medida
que códigos são digitados. Para definir preferências, escolher Editar > Preferências > Dicas de
código.
Dica: Mesmo se a opção Dicas de código estiver desativada, será possível exibir uma dica pop-up na visualização
do código ou no inspetor de código pressionando a tecla Control-barra de espaço no Windows.
Para definir preferências de dicas de código:
1 Selecione Editar > Preferências > Dicas de código.

A caixa de diálogo Dicas de código é exibida.
A opção Ativar o preenchimento automático da tagpermite o preenchimento automático da
tag.
A opção Ativar as dicas de código ativa dicas de código enquanto o código é digitado na
visualização do código. Arrastar o controle deslizante de atraso para definir o tempo em
segundos antes de o programa exibir dicas apropriadas.
A opção Menus permite definir o tipo exato de dicas de código a ser exibido durante a
digitação. É possível utilizar todos ou alguns menus.
Definição de preferências de regravação de código

A opção Preferências de regravação de código determina a ação do Dreamweaver durante a
abertura de documentos. Essas preferências não provocam qualquer efeito sobre a edição de
HTML ou scripts na visualização do código.
Se as opções de regravação forem desativadas, o Dreamweaver exibirá itens de markup inválidos
na janela do documento para o HTML que seria regravado.
Se um documento HTML for importado do Microsoft Word, é possível utilizar o comando
Limpar o HTML do Word para remover os códigos HTML desnecessários. Para obter mais
informações, veja “Como limpar o HTML do Microsoft Word” na ajuda do Dreamweaver
(Ajuda > Como utilizar o Dreamweaver).

Para definir preferências de regravação de código:
1 Selecione Editar > Preferências > Regravação de código.

A caixa de diálogo Regravação de código é exibida.
A opção Ajustar as tags abertas e aninhadas incorretamente regrava as tags sobrepostas. Por
exemplo: <b><i>text</b></i> é regravado como <b><i>text</i></b>. Esta opção também insere
colchetes e aspas finais quando eles estão ausentes.
A opção Ao colar, renomear os itens de formulário garante a não existência de nomes
duplicados para objetos de formulário.
A opção Remover as tags adicionais de finalização exclui as tags de finalização sem tags de
abertura correspondentes.
A opção Advertir quando resolver ou remover tagsexibe um resumo de HTMLs tecnicamente
inválidos que o Dreamweaver tentou corrigir. O resumo indica o local do problema (sob a
forma de números de linha e coluna), para que seja localizada a correção e garantido o seu
processamento adequado.
A opção Nunca regravar o código: Em Arquivos com extensões permite evitar que o
Dreamweaver regrave o código em arquivos com extensões de nome de arquivo especificadas.
Esta opção é especialmente útil para arquivos contendo tags de outros fabricantes.
A opção Codificar caracteres especiais em URLs utilizando % garante que a URL contém
apenas caracteres válidos.
A opção Codificar <, >, & e " em valores de atributo utilizando & garante que a URL contém
apenas caracteres válidos.
Definição de preferências de cores de código

Sintaxe por cores ajuda a identificar blocos de código em documentos grandes. É possível definir
preferências de sintaxe por cores para elementos de código como comentários e scripts, e para tags
em geral. Para definir preferências de cores para tags específicas, editar a definição de tag no Editor
de bibliotecas de tags. Para obter mais informações, veja “Edição de bibliotecas, tags e atributos”,
na página 194.
Para definir preferências de codificação por cores:
1 Escolha Editar > Preferências > Codificação por cores.

2 Escolha um tipo de documento e clique em Editar o esquema de cores.
A caixa de diálogo Editar o esquema de cores é exibida.
3 Selecione um item e definir a cor de texto, a cor de fundo e o estilo (negrito, itálico ou
sublinhado).
É possível visualizar o esquema de cores no painel Visualizar.
4 Ao concluir, clique em OK.
190 Capítulo 12
Personalização de atalhos de teclado
É possível utilizar os atalhos de teclado favoritos no Dreamweaver. Se o usuário estiver
acostumado a utilizar atalhos de teclado (por exemplo: Control-Enter para adicionar uma quebra
de linha, Control-G para ir até uma posição específica no código ou Shift+F6 para validar um
arquivo), ele poderá adicioná-los ao Dreamweaver usando o Editor de atalhos de teclado. Para
obter mais informações, veja “Utilização do editor de atalhos de teclado”, na página 56.
Abertura de arquivos na visualização do código como padrão

É possível configurar o Dreamweaver para abrir automaticamente arquivos com determinadas
extensões na visualização do código em vez da visualização do projeto.
Quando o usuário abre um tipo de arquivo que não costuma conter HTMLs (por exemplo: um
arquivo JavaScript), o arquivo é aberto na visualização do código (ou no inspetor de código) e não
na visualização do projeto. É possível editar o arquivo e salvá-lo como um arquivo HTML ou não-
HTML.
Para definir a visualização padrão de arquivos não-HTML:
1 Escolha Editar > Preferências > Tipos de arquivo/editores.

2 Na caixa de texto Abra na visualização do código, digite as extensões de nome de arquivo a
serem abertas automaticamente nessa visualização. Coloque um espaço entre cada tipo de
arquivo.
As extensões de arquivo padrão listadas são .js, .txt e .asa. É possível adicionar quantas o usuário
quiser.
Definição de preferências do Validador

É possível utilizar o Validador no Dreamweaver para localizar rapidamente erros de tag ou de
sintaxe no código (veja “Validação das tags”, na página 217). É possível especificar os idiomas
baseados em tag nos quais o Validador deve fazer a verificação, os problemas específicos a serem
verificados pelo Validador e os tipos de erros a serem relatados pelo Validador.
Para definir preferências para o Validador:
1 Escolha Editar > Preferências > Validador.

2 Selecione as bibliotecas de tags a serem validadas.
Algumas bibliotecas de tags são construídas sobre outras. Por exemplo: se HTML 4.0 for
selecionado, HTML 3.2 e HTML 2.0 serão automaticamente selecionados, pois a definição de
HTML 4.0 fica incompleta sem eles.
Observação: Se CFML e HTML forem validados em um único documento, o Validador não poderá avaliar o
sinal de número (#). Isto ocorre pois, no CFML, # é um erro e ## está correto; enquanto no HTML, ## é um erro
e # está correto.
3 Clique em Opções.
A caixa de diálogo Opções do Validator é exibida.

4 Selecione a opção Exibir para cada tipo de erro a ser incluído pelo relatório do Validador.
5 Selecione itens a serem verificados pelo Validador.
6 Clique em OK para fechar a caixa de diálogo Opções do Validator e, em seguida, clique em
OK para fechar a caixa de diálogo Preferências.
Gerenciamento de bibliotecas de tags

É possível utilizar o Editor de bibliotecas de tags para gerenciar as bibliotecas de tags no
Dreamweaver. O Editor de bibliotecas de tags permite adicionar e excluir bibliotecas de tags, tags
e atributos, definir propriedades para uma biblioteca de tags e editar tags e atributos.
Para abrir o Editor de bibliotecas de tags, escolher Editar > bibliotecas de tags. O Editor de
bibliotecas de tags é exibido conforme descrito a seguir (o conteúdo desta caixa de diálogo é
alterado de acordo com a tag selecionada).

• “Adição de bibliotecas, tags e atributos”, na página 193
• “Edição de bibliotecas, tags e atributos”, na página 194
• “Exclusão de bibliotecas, tags e atributos”, na página 195
Veja também “Importação de tags personalizadas para o Dreamweaver”, na página 195.
192 Capítulo 12
Adição de bibliotecas, tags e atributos
É possível utilizar o Editor de bibliotecas de tags para adicionar bibliotecas de tags, tags e atributos
às bibliotecas de tags no Dreamweaver.
Observação: Para importar uma tag, veja “Importação de tags personalizadas para o Dreamweaver”, na
página 195.
Para adicionar uma biblioteca de tags:
1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), clique no botão de adição (+) e
escolha Nova biblioteca de tags.
A caixa de diálogo Nova biblioteca de tags é exibida.
2 Na caixa de texto Nome da biblioteca, digite um nome (por exemplo: Tags PHP).
3 Clique em OK.
Para adicionar uma ou mais tags em uma biblioteca de tags:
1 No Editor de bibliotecas de tags (Editar > bibliotecas de tags), clique no botão de adição (+) e
escolha Novas tags.
A caixa de diálogo Novas tags é exibida.
2 No menu pop-up Biblioteca de tags, escolha uma biblioteca de tags (por exemplo: Tags
CFML).
Por padrão, a biblioteca de tags selecionada no editor de tags é exibida na caixa Biblioteca de
tags.
3 Na caixa de texto Nomes das tags, digite um nome para a tag.
Se estiver adicionando mais de uma tag, digite os nomes das tags, separados por uma vírgula e
um espaço (por exemplo: cfgraph, cfgraphdata).
4 Para adicionar cada tag com uma tag de finalização complementar (</...>), selecione Com tags
de finalização complementares.
5 Clique em OK.
Para adicionar um ou mais atributos em uma tag:
1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), clique no botão de adição (+) e
escolha Novos atributos.
A caixa de diálogo Novos atributos será exibida.
2 No menu pop-up Biblioteca de tags, escolha uma biblioteca de tags.
Por padrão, a biblioteca de tags selecionada no editor de tags é exibida na caixa de texto
Biblioteca de tags.
3 No menu pop-up Tag, escolha uma tag (por exemplo: cfgraph).
Por padrão, a tag selecionada no editor de tags é exibida na caixa Tag.
4 Na caixa de texto Nomes dos atributos, digite um nome para o atributo (por exemplo: type).
Para adicionar mais de um atributo, digite os nomes dos atributos, separados por uma vírgula e
um espaço.
5 Clique em OK.

Edição de bibliotecas, tags e atributos
É possível utilizar o Editor de bibliotecas de tags para definir propriedades para uma biblioteca de
tags e editar tags e atributos em uma biblioteca, seja para atributos, valores ou formato (para facilitar
a identificação no código).
Para definir as propriedades de uma biblioteca de tags:
1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), selecione uma biblioteca de tags
no menu pop-up Tags.
2 Na caixa Utilizado em, selecione todos os tipos de documento que devem utilizar a biblioteca
de tags.
As tags da biblioteca de tags estão disponíveis apenas nos tipos de documentos selecionados
aqui.
3 Se as tags da biblioteca de tags precisarem de um prefixo, digite o prefixo na caixa de texto
Prefixo da tag.
4 Ao concluir as alterações no Editor de bibliotecas de tags, clique em OK.
Para editar uma tag em uma biblioteca de tags:
1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), abra uma biblioteca de tags no
menu pop-up Tags e selecione uma tag.
2 Defina qualquer uma destas opções de Formato da tag:
• A opção Quebras de linha especifica onde o Dreamweaver insere quebras de linha para uma tag.
• A opção Conteúdo especifica como o Dreamweaver insere o conteúdo de uma tag, ou seja, se
ele aplica quebra de linha e regras de formatação ao conteúdo.
• A opção Caixa especifica a caixa para determinada tag. Escolha entre Padrão, Minúsculas,
Maiúsculas, ou Maiúsculas e minúsculas. Se for escolhida a opção Maiúsculas e minúsculas, a
caixa de diálogo Nome da tag em maiúsc./minúsc. será exibida. Digite como o Dreamweaver
deve inserir a tag (por exemplo: getProperty) e clique em OK.
• A opção Definir os padrões define a caixa padrão para todas as tags. Na caixa de diálogo Caixa
padrão da tag que é exibida, escolha <MAIÚSCULAS> ou <minúsculas> e clique em OK.
Dica: Talvez seja necessário definir a caixa padrão como minúsculas por questões de compatibilidade com os
padrões XML e XHTML.
Para editar um atributo para uma tag:
1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), abra uma biblioteca de tags no
menu pop-up Tags, abra uma tag e selecione um atributo de tag.
2 No menu pop-up Caixa do atributo, escolha Padrão, Minúsculas, Maiúsculas, ou Maiúsculas e
minúsculas.
Se for escolhido Maiúsculas e minúsculas, na caixa de diálogo Nome do atributo em maiúsc./
minúsc., digite como o Dreamweaver deve inserir o atributo (por exemplo: onClick). Clique
em OK.
Clique no link Definir padrão para definir a caixa padrão para todos os atributos.
194 Capítulo 12
3 No menu pop-up Tipo de atributo, selecione o tipo de atributo.
Ao escolher Enumerados, digite cada valor permitido para o atributo na caixa de texto Valores.
Separe cada valor por uma vírgula e sem espaço. Por exemplo: para o tipo de atributo da tag
cfgraph, digite bar,horizontalBar,line,pie.
Exclusão de bibliotecas, tags e atributos

É possível utilizar o Editor de bibliotecas de tags para excluir bibliotecas de tags, tags e atributos.
Para excluir uma biblioteca, uma tag ou um atributo:
1 No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), selecione uma biblioteca de tags,
uma tag ou um atributo no menu pop-up Tags.
2 Clique no botão com o sinal de subtração (-).
3 Se for solicitada a confirmação da exclusão, clique em OK.
O item é removido do menu pop-up Tags.
4 Para não excluir o item permanentemente, clique em Cancelar.
O Editor de bibliotecas de tags é fechado sem excluir o item e sem salvar quaisquer alterações
feitas no Editor de bibliotecas de tags desde a sua abertura.
5 Para excluir permanentemente o item, clique em OK.
Importação de tags personalizadas para o Dreamweaver

É possível importar tags personalizadas para o Dreamweaver de forma que elas se tornem parte
integral do ambiente de autorização. Por exemplo: quando o usuário começa a digitar uma tag
personalizada na visualização do código, o recurso Dicas de código lista automaticamente os
atributos de tag e permite escolher um dos atributos.
• “Importação de tags de arquivos XML”, na página 195
• “Importação de tags ASP.NET personalizadas”, na página 196
• “Importação de tags JSP de um arquivo”, na página 196
• “Importação de tags JSP de um servidor (web.xml)”, na página 197
• “Importação de tags JRun”, na página 197
Importação de tags de arquivos XML

É possível importar tags de um arquivo DTD (Definição de tipo de documento, Document Type
Definition) XML ou de um esquema.
Para importar tags de um DTD XML ou de um esquema:
1 Abra o Editor de bibliotecas de tags (Editar > bibliotecas de tags).

2 Clique no botão de adição (+) e escolha Esquema DTD > Importar arquivo XML, DTD ou
Schema.
3 Digite o arquivo ou a URL do arquivo DTD ou Schema.

4 Digite o prefixo a ser utilizado com as tags.
O prefixo é utilizado para identificar uma tag em uma página como parte de determinada
biblioteca de tags.
5 Clique em OK.
Importação de tags ASP.NET personalizadas

É possível importar tags ASP.NET personalizadas para o Dreamweaver.
Antes de iniciar, certifique-se de que a tag personalizada esteja instalada no servidor de teste
definido na caixa de diálogo Definição de sites (veja “Como especificar onde as páginas dinâmicas
podem ser processadas”, na página 144). Tags compiladas (arquivos .dll) devem ser colocadas na
pasta de compartimentos na raiz do site. Tags não-compiladas (arquivos .ascx) podem residir em
qualquer diretório ou subdiretório virtual no servidor. Para obter mais informações, veja a
documentação do Microsoft ASP.NET.
Para importar tags personalizadas ASP.NET para o Dreamweaver:
1 Abra uma página ASP.NET no Dreamweaver.

3 Clique no botão de adição (+) e escolha uma das opções a seguir:
• Para importar todas as tags personalizadas ASP.NET do servidor de aplicativos, escolha
ASP.NET > Importar todas as tags ASP.NET personalizadas.
• Para importar apenas determinadas tags personalizadas do servidor de aplicativos, escolha
ASP.NET > Importar as tags ASP.NET personalizadas selecionadas.
A caixa de diálogo Importar as tags ASP NET personalizadas selecionadas é exibida, listando
todas as tags personalizadas ASP.NET instaladas no servidor de aplicativos. Mantenha a tecla
Control pressionada e clique em tags da lista e, em seguida, em OK.
Importação de tags JSP de um arquivo

É possível importar uma biblioteca de tags JSP para o Dreamweaver de diversos tipos de arquivo.
Para importar uma biblioteca de tags JSP para o Dreamweaver:
1 Abra uma página JSP no Dreamweaver.

3 Clique no botão de adição (+) e escolher JSP > Importar do arquivo (*.tld, *.jar, *.zip).
4 Especifique o arquivo .tld, .jar ou .zip que contém a biblioteca de tags.
5 Digite uma URI para identificar a biblioteca de tags.
A URI (Uniform Resource Identifier) consiste normalmente na URL da organização que
mantém a biblioteca de tags. A URL não é utilizada para acessar a organização, mas para
identificar exclusivamente a biblioteca de tags.
196 Capítulo 12
biblioteca de tags.
7 Clique em OK.
Importação de tags JSP de um servidor (web.xml)

É possível importar tags JSP de um servidor.
Para importar tags JSP de um servidor:

3 Clique no botão de adição (+) e escolher JSP > Importar do servidor (web.xml).
A caixa de diálogo Importar do servidor é exibida.
4 Selecione uma biblioteca de tags.
A URI (Uniform Resource Identifier) consiste normalmente na URL da organização que
mantém a biblioteca de tags. A URL não é utilizada para acessar a organização, mas para
identificar exclusivamente a biblioteca de tags.
6 Clique em OK.
Importação de tags JRun

Caso seja utilizado o Macromedia JRun, será possível importar tags JRun para o Dreamweaver.
Para importar tags JRun para o Dreamweaver:

3 No Editor de bibliotecas de tags, clique no botão de adição (+) e escolher JSP > Importar as
tags do servidor JRUN a partir da pasta.
4 Especifique uma pasta contendo as tags JRun.
biblioteca de tags.
7 Ao concluir as alterações, clique em OK para fechar o Editor de bibliotecas de tags.

Utilização de um editor de HTML externo com o Dreamweaver
É possível iniciar um editor de HTML ou de texto externo, a partir do Dreamweaver, para editar
o código-fonte para o documento atual e, em seguida, voltar ao Dreamweaver a fim de continuar
a edição graficamente. O Dreamweaver detecta quaisquer alterações salvas no documento
externamente e lhe avisa para recarregá-lo ao retornar.
É possível utilizar editores de HTML integrados a seguir: Macromedia HomeSite. Também é
possível utilizar outro editor de texto, como Bloco de Notas, SimpleText, vi, emacs e TextPad.
Utilização de um editor de HTML integrado

Ao instalar o Dreamweaver, é possível instalar o HomeSite no Windows ou uma versão de teste do
BBEdit no Macintosh. O Dreamweaver está totalmente integrado com esses dois produtos.
Graças a essa integração, é possível editar um documento no Dreamweaver e no HomeSite/
BBEdit, alternando de um aplicativo para outro. O documento é mantido em sincronização
automática nos dois aplicativos. Além disso, os dois programas controlam a seleção atual; por
exemplo: se o usuário selecionar um texto no Dreamweaver e alternar para BBEdit, o mesmo
elemento será selecionado em BBEdit.
Utilização do HomeSite (apenas no Windows)

Não é necessário ativar a integração para o HomeSite, pois ele é integrado automaticamente
quando o programa é instalado.
Para utilizar o HomeSite:
1 Escolha Editar > Editar com o HomeSite.

2 Edite o documento no HomeSite e salve as alterações.
3 Para retornar ao Dreamweaver, clique em Dreamweaver na barra de ferramentas Editor.
Utilização do BBEdit (apenas no Macintosh)

É possível desativar a integração com o BBEdit se for mais conveniente trabalhar com uma versão
mais antiga do BBEdit ou com um outro editor de texto HTML. As seleções não serão
controladas se a integração com o BBEdit estiver desativada.
Para utilizar o BBEdit com o Dreamweaver:
1 Escolha Editar > Editar com o BBEdit.

2 Edite o documento no BBEdit.
3 Clique no botão Dreamweaver, na paleta de ferramentas de HTML, no BBEdit, para retornar
ao Dreamweaver.
Para desativar a integração com o BBEdit:
1 Escolha Editar > Preferências e selecionar Tipos de arquivos/editores.

2 Cancele a seleção de Ativar a integração com o BBEdit e clique em OK.
198 Capítulo 12
Utilização de editores externos
É possível abrir outros editores externos a partir do Dreamweaver, mas o documento não é
mantido em sincronização nos dois aplicativos, como ocorre com o HomeSite ou o BBEdit. Ao
concluir as alterações no editor externo, é necessário atualizar manualmente o documento no
Dreamweaver.
Para escolher um editor de HTML externo:
1 Escolha Editar > Preferências e selecionar Tipos de arquivos/editores.

2 (Apenas no Macintosh) Cancele a seleção da opção Ativar a integração com o BBEdit para
poder utilizar um editor de HTML que não seja o BBEdit. Para utilizar o BBEdit, manter a
opção Ativar a integração com o BBEdit selecionada e ignorar as etapas restantes.
3 Clique no botão Navegar ao lado da caixa de texto Editor de código externo e escolha um
editor de texto.
4 Na opção Recarregar os arquivos modificados, especifique o que o Dreamweaver deverá fazer
ao detectar alterações externas em um documento aberto no Dreamweaver.
5 Na opção Salvar na iniciação, especificar se o Dreamweaver deve sempre salvar o documento
antes de iniciar o editor, nunca salvar o documento ou lhe perguntar se salvará ou não o
documento quando o editor de texto externo for iniciado.
Para iniciar um editor de HTML externo:
Escolha Editar > Editar com [nome do editor].

200 Capítulo 12
CAPÍTULO 13
Codificação no Dreamweaver
O Macromedia Dreamweaver MX oferece um ambiente de codificação completo projetado para

qualquer tipo de operação de desenvolvimento para a Web, desde a elaboração de páginas HTML
simples à criação, aos testes e à implementação de aplicativos para a Web complexos.
Este capítulo contém os tópicos a seguir:
• “Sobre o ambiente de codificação do Dreamweaver”, na página 201
• “Como gravar e editar o código”, na página 203
• “Como copiar e colar códigos”, na página 207
• “Como procurar e substituir tags e atributos”, na página 209
• “Acesso a referências de linguagem”, na página 214
Para obter informações sobre como migrar do Macromedia HomeSite para o Dreamweaver,
visitar a Central de suporte do Dreamweaver MX, em http://www.macromedia.com/go/
migrate_from_homesite.
“Configuração do seu ambiente de codificação”, na página 185
“Otimização e depuração do código”, na página 215
“Edição do código na visualização do projeto”, na página 229
Sobre o ambiente de codificação do Dreamweaver

O ambiente de codificação do Dreamweaver oferece pleno acesso ao código das páginas. Esta
seção contém os tópicos a seguir:
• “Tipos de arquivos que contam com suporte”, na página 202
• “Como o Dreamweaver respeita os códigos”, na página 202
• “Sobre o Roundtrip HTML”, na página 202
• “Sobre o código inserido por comportamentos de servidor”, na página 203
Tópico relacionado
“Exibição do seu código”, na página 185
201
Tipos de arquivos que contam com suporte
Para a codificação do cliente, é possível trabalhar com diversos tipos de arquivos no Dreamweaver,
inclusive HTML, XML, CSS (Folhas de estilos em cascata, Cascading Style Sheets), JavaScript,
VBScript, WML (Linguagem de marcação sem fio, Wireless Markup Language), EDML
(Linguagem de marcação de dados de extensão, Extension Data Markup Language), modelo do
Dreamweaver (.dwt) e arquivos de texto.
Para codificação do servidor, é possível trabalhar com os tipos de arquivos a seguir: ColdFusion,
componente de ColdFusion (.cfc), ASP.NET Visual Basic, ASP.NET C#, ASP VBScript, ASP
JavaScript, JSP e PHP. Também é possível criar arquivos independentes em C#, Visual Basic e
Java.
Como o Dreamweaver respeita os códigos

O Dreamweaver gera um código válido e limpo nos ambientes visual e de codificação. Ele
também respeita o código criado pelo usuário manualmente ou gerado por um outro editor. O
Dreamweaver nunca regrava códigos do usuário. Por exemplo: o Dreamweaver não altera os
espaços em branco nem altera o uso de caixa alta ou baixa dos atributos. Se for escolhida a opção
Exibir > Opções de visualização do código > Realçar o HTML incorreto, o Dreamweaver exibirá
os erros realçados em amarelo. Como opção, o usuário pode limpar o código de acordo com
critérios por ele especificados. Também é possível personalizar a maneira como o Dreamweaver
formata o código. Para obter mais informações, veja “Definição de preferências de codificação”,
na página 187.
Sobre o Roundtrip HTML

O Roundtrip HTML permite movimentar os documentos entre um editor de HTML baseado
em texto e o Dreamweaver com pouco ou nenhum impacto sobre o conteúdo e a estrutura do
código-fonte HTML original do documento. Seus principais recursos incluem:
• Por padrão, ao voltar para o Dreamweaver estando em um editor externo ou ao abrir um
documento HTML que não foi criado com o Dreamweaver, este regrava as tags sobrepostas,
adiciona as tags de finalização necessárias e remove as tags adicionais de finalização. No
entanto, o Dreamweaver não faz nenhuma outra alteração no código, mesmo que ele seja
inválido, desde que os navegadores possam interpretar corretamente o código inválido.
É possível desativar a regravação do código (veja “Definição de preferências de regravação de
código”, na página 189).
• O Dreamweaver não altera as tags que não reconhece — inclusive tags XML — porque não
dispõe de um critério para avaliá-las. Se uma tag não-reconhecida se sobrepõe a uma outra tag
(por exemplo: <MyNewTag><b>text</MyNewTag></b>), o Dreamweaver marca essa tag como um
erro, mas não regrava o código.
• Opcionalmente, é possível definir o Dreamweaver para que realce em amarelo o código HTML
inválido que não conta com suporte dos navegadores. Quando é selecionada uma seção
realçada, o inspetor de propriedades exibe informações sobre como corrigir o erro.
• O Dreamweaver permite iniciar um editor de texto de outros fabricantes para editar o
documento atual. Para obter mais informações, veja “Utilização de um editor de HTML
externo com o Dreamweaver”, na página 198.
202 Capítulo 13
Sobre o código inserido por comportamentos de servidor
Ao desenvolver uma página dinâmica e escolher um comportamento de servidor no painel
Comportamentos de servidor, o Dreamweaver insere um ou mais blocos de código (ou
“participantes”) na página para ativar o comportamento de servidor.
Se o código for alterado em um participante, não será mais possível utilizar uma ferramenta visual
para editar ou excluir o comportamento de servidor. O Dreamweaver procura padrões específicos
no código da página para detectar comportamentos de servidor e exibi-los no painel
Comportamentos de servidor. Se o código de um participante for alterado de alguma forma,
inclusive se for alterado o espaçamento entre palavras e as quebras de linha, o Dreamweaver não
mais conseguirá detectar o comportamento de servidor nem exibi-lo no painel Comportamentos
de servidor. No entanto, o comportamento de servidor continuará existindo na página e poderá
ser editado no ambiente de codificação do Dreamweaver.
Como gravar e editar o código

O Dreamweaver oferece diversos recursos que ajudam a gravar e editar o código de modo
eficiente. Esta seção apresenta estes recursos, como se segue:
• “Como utilizar as Dicas de código”, na página 203
• “Como trabalhar com trechos de código”, na página 204
• “Como inserir código rapidamente utilizando a barra Inserir”, na página 205
• “Como inserir tags com o Seletor de tags”, na página 206
• “Edição de tags utilizando editores de tags”, na página 206
• “Edição de tags utilizando o inspetor de tags”, na página 207
• “Como recuar blocos de código”, na página 207
• “Como copiar e colar códigos”, na página 207
• “Como inserir comentários de HTML”, na página 208
• “Como listar funções JavaScript e VBScript na página”, na página 209
Como utilizar as Dicas de código

As Dicas de código permitem inserir e editar código conforme ele é digitado na visualização do
código (ou no inspetor de código). Ao digitar determinados caracteres, é exibida uma lista
sugerindo opções para concluir a entrada. É possível utilizar este recurso para inserir ou editar
código ou apenas para examinar os atributos disponíveis para uma tag, os parâmetros disponíveis
para uma função ou os métodos disponíveis para um objeto.
É possível definir por quanto tempo as Dicas de código devem esperar para exibir uma lista de
opções, especificar as tags a serem incluídas na lista de tags ou desativar totalmente as Dicas de
código. Para obter mais informações, veja “Definição de preferências de dicas de código”, na
página 189.
Para inserir uma tag utilizando as Dicas de código:
1 Digite um parêntese inicial (<) para exibir uma lista de tags.

2 Pressione a tecla Escape para fechar a lista.
3 Role a lista para baixo e clique duas vezes em uma tag para inseri-la.
Codificação no Dreamweaver 203

4 Se a tag oferecer suporte a atributos, pressionar a barra de espaço para exibir uma lista de
atributos permitidos para a tag. Selecione um atributo e pressionar a tecla Enter.
5 Digite o valor para o atributo ou, se o atributo aceitar somente determinados valores, selecionar
um valor na lista de valores permitidos para o atributo.
6 Para cada atributo a ser adicionado à tag, repetir as duas etapas anteriores, certificando-se de
não pressionar a barra de espaço entre um valor e as aspas finais (").
7 Digite o parêntese final para a tag (>) após o último par atributo-valor.
Para editar uma tag, seguir um dos procedimentos abaixo:
• Para adicionar um atributo, colocar o ponto de inserção à esquerda do parêntese final de uma
tag (>) e pressionar a barra de espaço para exibir uma lista de atributos permitidos para a tag.
Inserir o atributo e seu valor conforme descrito anteriormente.
• Para alterar um atributo, excluí-lo e adicionar um atributo, conforme descrito anteriormente.
• Para alterar um valor, excluí-lo e adicionar um valor, conforme descrito anteriormente.
Para inserir ou editar código referente a uma função ou objeto:
1 Escolha Editar > Preferências > Dicas de código ou Dreamweaver > Preferências > Dicas de
código (no Mac OS X) e definir as preferências de exibição sem atraso.
2 Na visualização do código (ou no inspetor de código), digitar o código de funções ou de objeto
normalmente.
Sempre que é digitada uma palavra-chave ou um caractere para o qual há Dicas de código
disponíveis, é exibido um menu pop-up de opções de conclusão. Quando desejado, selecionar
uma opção na lista e pressionar a tecla Enter.
Para configurar ou desativar as Dicas de código, veja “Definição de preferências de dicas de
código”, na página 189.
Como trabalhar com trechos de código

Os trechos de código permitem armazenar conteúdo para que este possa ser reutilizado
rapidamente. É possível criar e inserir trechos de código HTML, JavaScript, CFML, ASP, JSP e de
outras linguagens de programação. O Dreamweaver também contém alguns trechos predefinidos
que podem ser utilizados como ponto de partida.
É possível indicar se o trecho de código será colocado ao redor de uma seleção ou se existirá apenas
como um bloco de código. Por exemplo: é possível vincular a uma página que é exibida diversas
vezes no site, mas está anexada a diferentes objetos e textos. É possível selecionar um objeto,
clique com o botão direito do mouse ao clicar em um trecho de código exibido no painel Trechos
e escolher Inserir, no menu pop-up. O código referente ao link é colocado ao redor da seleção.
Também é possível comentar os trechos para ajudar outros usuários a utilizá-los corretamente.
Para inserir um trecho de código:
1 Coloque o ponto de inserção na posição desejada no documento; para inserir um trecho de

código ao redor de uma seleção, fazer a seleção no documento.
2 No painel Trechos (Janela > Trechos), clique duas vezes no trecho.
Também é possível clicar com o botão direito do mouse ao clicar no trecho e, em seguida,
escolher Inserir, no menu pop-up.
204 Capítulo 13
Para criar um trecho de código:
1 Na parte inferior do painel Trechos, clique no ícone Novo trecho.

A caixa de diálogo Trecho é exibida.
Para editar ou excluir um trecho de código:
1 Na parte inferior do painel Trechos, selecionar um trecho e clique no ícone Editar o trecho ou
Remover.
É possível identificar o ícone Editar o trecho ou Remover por sua dica de ferramentas.
Para criar pastas de trechos de código e gerenciar trechos de código:
1 Na parte inferior do painel Trechos, clique no ícone Nova pasta de trechos.

2 Arrastar trechos para a nova pasta ou para outras pastas, conforme desejado.
Para compartilhar um trecho com outros membros da equipe:
1 Localize o trecho a ser compartilhado na pasta Configuration\Snippets da pasta do aplicativo

Dreamweaver MX.
2 Copie o trecho para uma pasta compartilhada do computador ou de um computador de rede.
3 Solicitar aos outros membros da equipe que copiem o trecho para a respectiva pasta
Configuration\Snippets.
Qualquer usuário com acesso à pasta compartilhada poderá, a partir de agora, adicionar, editar e
excluir trechos dessa pasta.
Como inserir código rapidamente utilizando a barra Inserir

É possível utilizar a barra Inserir para adicionar códigos a uma página rapidamente. Basta posicionar
o ponto de inserção no código e clique em um ícone da barra Inserir. Ao clicar em um ícone, o
código poderá ser exibido na página imediatamente ou poderá ser exibida uma caixa de diálogo
solicitando mais informações para concluir o código.
Para saber o que os ícones fazem, colocar o mouse sobre o ícone e aguardar a exibição da dica de
ferramentas. A quantidade e o tipo de ícones disponíveis na barra Inserir varia de acordo com o
tipo de documento aberto no Dreamweaver. Também depende de o usuário estar utilizando a
visualização do código ou a visualização do projeto.
Embora a barra Inserir forneça uma série de tags utilizadas com freqüência, ela não é abrangente.
Para poder escolher dentre uma seleção mais abrangente de tags, utilizar o Seletor de tags.

Como inserir tags com o Seletor de tags
É possível utilizar o Seletor de tags para inserir na página qualquer tag das bibliotecas de tags do
Dreamweaver (que incluem bibliotecas de tags ColdFusion e ASP.NET). Para obter mais
informações sobre as bibliotecas de tags, veja “Gerenciamento de bibliotecas de tags”, na
página 192.
Para inserir uma tag utilizando o Seletor de tags:
1 Posicionar o ponto de inserção no código, clique com o botão direito do mouse ao clicar e
escolher Inserir tag.
O Seletor de tags é exibido. O painel esquerdo contém uma lista de bibliotecas de tags que
contam com suporte e o painel direito mostra as tags individuais na pasta de biblioteca de tags
selecionada.
2 Selecione uma tag na lista.
3 Se desejar exibir informações de uso e sintaxe da tag, clique no botão Informações sobre a tag.
Se disponível, a ajuda referente à tag será exibida na caixa de diálogo.
4 Se desejar obter informações de referência sobre a tag, clique no ícone <?>.
Se disponíveis, informações de referência sobre a tag serão exibidas no painel Referência.
5 Clique em Inserir para inserir no código a tag selecionada.
As tags que não exigem informações adicionais, que são exibidas no painel direito entre
parênteses (por exemplo: <HTML></HTML>), são inseridas no documento no local indicado
pelo ponto de inserção. Todas as demais tags exibem seus próprios editores de tag.
6 Se for aberto um editor de tags, inserir as informações adicionais e clique em OK.
Veja “Edição de tags utilizando editores de tags”, na página 206.
Edição de tags utilizando editores de tags

Os editores de tags permitem especificar ou editar os atributos de uma tag utilizando uma caixa de
diálogo. Se for utilizado o Seletor de tags para inserir uma tag e se a tag exigir informações
adicionais, o respectivo editor de tags será exibido automaticamente. Caso contrário, o
procedimento a seguir explica como abrir o editor de tags de uma tag. Para obter mais
informações, veja “Como inserir tags com o Seletor de tags”, na página 206.
Para acessar o editor de tags de uma tag:
1 Coloque o ponto de inserção dentro de uma tag.

2 Clique com o botão direito do mouse ao clicar e, no menu pop-up, selecionar Editar a tag.
Dica: Para obter mais informações sobre a tag no editor de tags, clique em Informações sobre a tag.
206 Capítulo 13
Edição de tags utilizando o inspetor de tags
É possível utilizar o inspetor de tags para editar tags em uma folha de propriedades semelhante
àquelas encontradas em outros IDEs (Ambientes integrados de desenvolvimento, Integrated
Development Environments).
Para editar uma tag utilizando o inspetor de tags:
1 Certifique-se de que o inspetor de tags esteja aberto (Janela > Inspetor de tags).
2 Na visualização do código (ou no inspetor de código), clique em qualquer lugar dentro de uma
tag.
Se a tag oferecer suporte a atributos, o Dreamweaver exibirá os atributos e seus valores atuais na
folha de propriedades do inspetor de tags.
3 Faça as alterações na tag na folha de propriedades.
Clique no nome de um atributo para digitar um valor ou, se o atributo aceitar valores
predefinidos, para selecionar um valor na lista.
4 Se o atributo aceitar um valor de uma fonte de conteúdo dinâmico (como um banco de dados),
clique no ícone de raio, no final da linha do atributo selecionado, e selecionar a fonte.
Para obter informações sobre como definir fontes de conteúdo dinâmico, veja “Definição das
fontes de conteúdo dinâmico”, na página 543.
5 Clique em qualquer outro lugar do painel para atualizar a tag no documento.
Como recuar blocos de código

À medida que se grava e edita o código na visualização do código ou no inspetor de código, é
possível recuar blocos de código para separar visualmente o bloco do restante, o que facilita sua
localização.
Para recuar um bloco de código:
1 Selecione a(s) linha(s) do bloco de código a ser(em) recuada(s) (é necessário selecionar a linha
inteira).
2 Escolha Editar > Recuar o código.
O código é recuado. Escolha Editar > Remover o recuo do código para retornar o código
recuado à posição inicial.
Como copiar e colar códigos

É possível copiar e colar o código-fonte de um outro aplicativo ou da própria visualização do
código. É possível copiar e colar o código como um texto ou como um código com as tags
intactas.
Para copiar e colar o código-fonte como texto:
1 Copie o código pelo Dreamweaver ou por um outro aplicativo.

2 Coloque o ponto de inserção diretamente na visualização do projeto e escolher Editar > Colar.

Para copiar e colar o código-fonte com as tags intactas:
1 Copie o código pelo Dreamweaver ou por um outro aplicativo.

Para copiar pela visualização do projeto, escolher Editar > Copiar como HTML.
• Na visualização do código, posicionar o ponto de inserção e escolher Editar > Colar. Se estiver
utilizando a visualização do projeto, pressionar a tecla F5 para atualizar a exibição do
documento.
• Na visualização do projeto, posicionar o ponto de inserção e escolher Editar > Colar como
HTML.
Como inserir comentários de HTML

Um comentário é um texto descritivo inserido no código HTML para explicá-lo ou fornecer
outras informações. O texto do comentário aparece somente na visualização do código e não é
exibido na página da Web no navegador.
Para inserir um comentário:
1 Na visualização do código ou do projeto, colocar o ponto de inserção no local onde deseja

inserir o comentário.
2 Clique no ícone Comentário, localizado na guia Comuns da barra Inserir.
Utilize as dicas de ferramentas para identificar o ícone Comentário.
• Na visualização do código, o Dreamweaver insere uma tag  na página. Digite o
comentário dentro da tag.
• Na visualização do projeto, o Dreamweaver exibe a caixa de diálogo Comentário. Digite o
comentário e clique em OK.
Para exibir marcadores de comentário na visualização do projeto, escolher Exibir > Auxílios
visuais > Elementos invisíveis. Certifique-se de que os comentários estejam selecionados nas
preferências de elementos invisíveis; caso contrário, o marcador não será exibido.
Para adicionar um comentário existente, seguir um dos procedimentos abaixo:
• Na visualização do projeto, selecionar o marcador Comentário e digitar o texto no inspetor de

propriedade.
• Localize o comentário no código e adicionar o texto diretamente nele.
208 Capítulo 13
Como listar funções JavaScript e VBScript na página
Em uma página aberta na visualização do código, é possível exibir todas as funções JavaScript ou
VBScript.
Para exibir as funções de script em uma página:
1 Abra o documento na visualização do código.

2 Certifique-se de que a barra de ferramentas Documento esteja sendo exibida (Exibir > Barras
de ferramentas > Documento).
3 Clique no ícone Navegação por códigos, na barra de ferramentas.
O ícone é formado por um par de chaves ({ }).
Observação: O ícone fica desativado na visualização do projeto.
Se o código contiver funções JavaScript ou VBScript, elas serão exibidas no menu pop-up.
Para ver as funções listadas em ordem alfabética, manter pressionada a tecla Control ao clicar no
botão Navegação por códigos.
Para ir até uma função no código:
Selecione uma função no menu pop-up Navegação por códigos. A função será realçada na
visualização do código (ou no inspetor de código).
Como procurar e substituir tags e atributos

É possível utilizar o Dreamweaver para procurar e substituir tags e atributos no código. Esta seção
contém os tópicos a seguir:
• “Sobre buscas de código-fonte HTML”, na página 209
• “Como procurar tags e atributos”, na página 210
• “Como procurar texto contido em tags específicas”, na página 210
• “Como salvar padrões de busca”, na página 211
• “Sobre expressões comuns”, na página 212
Sobre buscas de código-fonte HTML

Utilize a opção Código-fonte, da caixa de diálogo Localizar e substituir, para procurar
determinadas seqüências de texto no código-fonte HTML. Por exemplo: uma busca por black
dog no código a seguir retornaria duas correspondências (no atributo alt e na primeira frase):
<img src="barnaby.gif" width="100" height="100"
alt="Barnaby, a black dog."><br>
We saw several black dogs in the park yesterday. The black
<a href="barnaby.html">dog</a> we liked best was called Barnaby.
A frase black dog também é exibida na segunda oração, porém ela não gera correspondências
porque é interrompida por um link.
Para obter mais informações, veja “Busca e substituição de texto”, na página 316.

Como procurar tags e atributos
Utilize a opção Tag específica, da caixa de diálogo Localizar e substituir, para procurar tags,
atributos e valores de atributos específicos. Por exemplo: é possível procurar todas as tags img sem
nenhum atributo alt.
Para executar uma busca de tag:
1 Escolha Editar > Localizar e substituir e especificar em quais arquivos deverá ser feita a busca.
2 No menu pop-up Procurar, escolher Tag específica.
3 No menu pop-up junto ao menu pop-up Procurar, escolher uma tag específica, digitar uma tag
ou escolher [any tag].
Se desejar apenas procurar todas as ocorrências da tag especificada, pressionar o botão de
subtração (-) e passar à etapa 6. Caso contrário, ir para a etapa 4.
4 Limitar a busca utilizando um dos modificadores de tags a seguir:
• O modificador Com atributo escolhe um atributo que deve estar na tag para que esta
corresponda aos critérios de busca. É possível especificar um determinado valor para o atributo
ou escolher [qualquer valor].
• O modificador Sem atributo escolhe um atributo que não pode estar na tag para que esta
corresponda aos critérios de busca. Por exemplo: escolher esta opção para procurar todas as tags
IMGsem o atributo ALT.
• O modificador Contendo especifica um texto ou uma tag que deve estar contida na tag original
para que haja correspondência com os critérios de busca. Por exemplo: no código <b><font
face="Arial">heading 1</font></b>, a tag font está contida na tag b.
• O modificador Não contendo especifica um texto ou uma tag que não pode estar contida na tag
original para que haja correspondência com os critérios de busca.
• O modificador Dentro da tag especifica uma tag dentro da qual deve estar a tag de destino para
que haja correspondência com os critérios de busca.
• O modificador Fora da tag especifica uma tag dentro da qual não deve estar a tag de destino
para que haja correspondência com os critérios de busca.
5 Clique no botão de adição (+) e repetir a etapa 4 para restringir ainda mais a busca.
6 Inicie a busca:
• Clique em Localizar o próximo para realçar a próxima instância da tag no documento atual e
em qualquer documento subseqüente se a busca estiver sendo feita em mais de um documento.
• Clique em Localizar todos para gerar uma lista de todas as instâncias da tag no documento
atual ou, se estiver pesquisando em um diretório ou site, gerar uma lista de documentos que
contêm a tag. A lista é exibida na guia Buscar do painel Resultados.
Como procurar texto contido em tags específicas

Utilize a opção Texto avanç., na caixa de diálogo Localizar e substituir, para procurar
determinadas seqüências de texto que podem estar ou não em um conjunto de tags recipientes.
Por exemplo: é possível procurar a expressão Sem título entre as tags <title> para localizar todas as
páginas sem título do site.
210 Capítulo 13
Para executar uma busca de texto avançada:
1 Escolha Editar > Localizar e substituir e especificar em quais arquivos deverá ser feita a busca.
2 No menu pop-up Procurar, selecione Texto avanç.
3 Digite o texto a ser pesquisado no campo de texto adjacente ao menu pop-up Procurar.
Por exemplo: digitar a expressão Sem título.
4 Escolha Dentro da tag ou Fora da tag e, em seguida, selecione uma tag no menu pop-up
adjacente.
Por exemplo: escolher Dentro da tag e, em seguida, title.
5 Clique no botão de adição (+) para restringir a busca a tags com um ou mais atributos
específicos.
Uma vez que a tag <title> não possui atributos, não é necessário utilizar esta opção para
localizar todas as páginas sem título do site.
6 Inicie a busca:
• Clique em Localizar o próximo para realçar a próxima instância do texto no documento atual e
em qualquer documento subseqüente se a busca estiver sendo feita em mais de um documento.
• Clique em Localizar todos para gerar uma lista de todas as instâncias do texto no documento
atual ou, se estiver pesquisando em um diretório ou site, gerar uma lista de documentos que
contêm a tag. A lista é exibida na guia Buscar do painel Resultados.
Como salvar padrões de busca

É possível salvar padrões de busca para uso posterior clicando no ícone Salvar a consulta (o ícone em
forma de disco), na caixa de diálogo Localizar e substituir. O salvamento de uma consulta é
conveniente se a mesma busca for realizada com freqüência e se o usuário não desejar reconstruir
esse padrão de busca várias vezes. Por exemplo: é recomendável retirar tags não-padronizadas de
documentos criados com um outro editor visual de HTML ou confirmar se todas as imagens
contidas em um arquivo têm os atributos height, width e alt antes de o documento ser publicado na
Web.
Para salvar um padrão de busca:
1 Na caixa de diálogo Localizar e substituir (Editar > Localizar e substituir), definir os parâmetros
para a busca.
Se estiver executando uma busca de tag ou texto avançado, veja “Como procurar tags e
atributos”, na página 210 ou “Como procurar texto contido em tags específicas”, na
página 210 para obter informações sobre como definir parâmetros adicionais de busca.
2 Clique no ícone Salvar a consulta (o ícone em forma de disco).
O local padrão onde as consultas são salvas é a pasta Configuration/Queries, contida na pasta
do aplicativo Dreamweaver.
3 Na caixa de diálogo que aparece, atribuir ao arquivo um nome que identifique a consulta e
clique em Salvar.
Por exemplo: se o padrão de busca envolve a localização de tags img sem o atributo alt, a
consulta pode se chamar img_no_alt.dwr. As consultas de localização terminam com a
extensão .dwq; as consultas de substituição terminam com a extensão .dwr.

Para chamar um padrão de busca novamente:
1 Escolha Editar > Localizar e substituir.

2 Clique no botão Carregar a consulta (o ícone da pasta).
A caixa de diálogo Carregar a consulta é aberta automaticamente na pasta Configuration/
Queries. É possível navegar até uma outra pasta se houver consultas salvas em outras pastas.
3 Selecione um arquivo de consulta e clique em Abrir.
Na caixa de diálogo Localizar, apenas as consultas de localização (arquivos .dwq) estão
disponíveis. Na caixa de diálogo Substituir, tanto as consultas de localização (arquivos .dwq)
quanto as de substituição (arquivos .dwr) estão disponíveis.
4 Clique em Localizar o próximo, Localizar todos, Substituir ou Substituir todos para iniciar a
busca.
Sobre expressões comuns

As expressões comuns consistem em padrões que descrevem as combinações de caracteres no
texto. Utilize essas expressões em suas buscas, para que auxiliem o usuário a descrever conceitos
como “frases iniciadas com ‘O’” e “valores de atributo que contenham um número”. A tabela a
seguir lista os caracteres especiais em expressões comuns, seus significados e exemplos de uso.
Para localizar o texto contendo um dos caracteres especiais da tabela, preceda o caractere especial
com uma barra invertida. Por exemplo: para localizar o asterisco na frase some conditions apply*, o
padrão de busca deve ter esta aparência: apply\*. Se não for colocada uma barra inclinada antes do
asterisco, serão localizadas todas as ocorrências de “aplicam” (assim como de “aplic”, “aplica” e
“aplicar”), e não apenas aquelas seguidas do sinal de asterisco.
Caractere Coincide com Exemplo
^ Início da entrada ou linha. ^T coincidirá com “T” em “Terracota”,

mas não em “Cabana do Pai Tomás”
$ Final da entrada ou linha. o$ coincidirá com “o” em “número”,

mas não em “números”
* O caractere precedente 0 ou mais vezes. um* coincidirá com ”um” em “rum”, “umi” em
“luminoso” e “u” em “azul”
+ O caractere precedente uma ou mais vezes. um+ coincidirá com “um” em “rum” e “umi” em
“luminoso”, porém não coincidirá com
qualquer ocorrência de “azul”
? O caractere precedente no máximo uma vez re?ta coincidirá com “rta” em “curta” e “reta”
(isto é, indica que o caractere precedente é em “preta”, porém não coincidirá com
opcional). qualquer ocorrência de “caneta” ou “brotar”
. Qualquer caractere único, exceto nova linha. .pr coincidirá com “propriedades” e
“programa” na frase “propriedades
do programa”
x|y x ou y. FF0000|0000FF coincide com “FF0000” em

bgcolor=”#FF0000” e “0000FF’” em font
color=”#0000FF”
{n} Exatamente 'n' ocorrências do caractere r{2} coincidirá com “rr” em “carro” e com os
precedente. primeiros dois erres em “brrrrrr”, porém não
coincidirá com qualquer ocorrência de “for”
{n,m} Ao menos 'n' e no máximo 'm' ocorrências do F{2,4} coincidirá com “FF” em “#FF0000” e
caractere precedente. com os primeiros quatro efes em #FFFFFF
212 Capítulo 13
Caractere Coincide com Exemplo
[abc] Qualquer um dos caracteres dentro dos [e-g] coincidirá com “e” em “tabela”, “f” em
colchetes. Especifique uma faixa de “fraude” e “g" em “Aguarde”
caracteres com um hífen (por exemplo: [a-f]
equivale a [abcdef]).
[âbc] Qualquer um dos caracteres que não esteja [âeiou] coincidirá inicialmente com “r”
dentro dos colchetes. Especifique uma faixa em “cravo”, “b” em “biblioteca” e “f”
de caracteres com um hífen (por exemplo [â- em “OFF!”
f] equivale a [âbcdef]).
\b Um limite de palavra (como um espaço ou \bb coincidirá com “b” em “blasfêmia”, porém
retorno de carro). não coincidirá com qualquer ocorrência de
“abrir” ou “liberdade”
\B Um limite sem palavra. \Bb coincidirá com “b” em “liberdade”, porém

não coincidirá com “blasfêmia”
\d Qualquer caractere numérico. Equivale a [0- \d coincidirá com ”3” em “C3PO” e “2” em
9]. “apartamento 2G”
\D Qualquer caractere não numérico. Equivale a \D coincidirá com ”S” em “900S” e ”Q” em
[^0-9]. “Q45”
\f Avanço de página.
\n Avanço de linha.
\r Retorno de carro.
\s Qualquer caractere contendo espaço em \scoluna coincidirá com ”coluna” em “100

branco, inclusive espaços, tabulações, colunas”, porém não coincidirá com
avanços de página ou avanços de linha. “colunas”
\S Qualquer caractere que não contenha \Scoluna coincidirá com “coluna” em

espaços em branco. “colunas:”, porém não coincidirá com
“100 colunas”
\t Uma tabulação.
\w Qualquer caractere alfanumérico, inclusive o b\w* coincidirá com “Alfabeto” em “Alfabeto

sinal de sublinhado. Equivale a [A-Za-z0-9_]. cirílico” e com “objeto” e “abstrato” em
“nenhum objeto abstrato”
\W Qualquer caractere não alfanumérico. \W coincidirá com “&” em “Joca & Mateus” e
Equivale a [Â-Za-z0-9_]. com “%” em “100%”
Control+Enter ou Caractere de retorno. Certifique-se de

Shift+Enter desmarcar a opção Ignorar os diferentes
espaços em branco ao efetuar essa busca se
não forem utilizadas expressões comuns.
Observar que isso coincide com um
determinado caractere, mas não com a
noção geral de quebra de linha; por exemplo:
não coincide com uma tag <br> ou <p>. Os
caracteres de retorno de carro são exibidos
na forma de espaços na janela do documento
e não na forma de quebras de linha.
Utilize parênteses para definir agrupamentos nas expressões comuns a serem mencionadas
posteriormente. Utilize $1, $2, $3, etc. (utilize ($) no campo Localizar e barra invertida (\) no
campo Substituir para referir-se ao primeiro, segundo, terceiro, etc. agrupamento entre
parênteses. Por exemplo: a busca de (\d+)\/(\d+)\/(\d+) e sua substituição por $2/$1/$3 troca o
dia e o mês em uma data separada por barras inclinadas (na conversão entre o formato de datas no
estilo americano e europeu).

Acesso a referências de linguagem
O painel Referência é uma ferramenta de referência rápida para as linguagens de markup, objetos
JavaScript, estilos CSS e seus atributos. O painel Referência fornece informações relativas a tags,
objetos ou estilos específicos com os quais o usuário está trabalhando na visualização do código
(ou no inspetor de código).
Para abrir o painel Referência:
1 Na visualização do código, clique com o botão direito do mouse ao clicar em uma tag, em um
atributo ou em uma palavra-chave.
2 No menu pop-up, escolher Referência.
É exibido o painel Referência, mostrando informações sobre a tag, o atributo ou a palavra-chave
clicada. Para ajustar o tamanho do texto no painel Referência, selecione Fonte grande, Fonte
média ou Fonte pequena no menu de opções (a seta pequena na parte superior direita do painel).
O menu pop-up Livro exibe o nome do livro do qual provém o material de referência: Para exibir
as tags, os objetos ou estilos de um outro livro, escolher um livro diferente no menu-pop-
up Livro.
O menu pop-up Tag, Objeto ou Estilo (dependendo do livro selecionado) exibe a tag, o objeto ou
estilo escolhido na visualização do código (ou no inspetor de código). Para exibir informações
sobre outra tag, objeto ou estilo, selecione uma nova opção no menu.
Ao lado do menu pop-up Tag, Objeto ou Estilo, há um menu que contém a lista de atributos da
tag escolhida. A seleção padrão é Descrição, que exibe uma descrição da tag escolhida. Também é
possível selecionar um atributo no menu para exibir mais informações sobre ele.
214 Capítulo 13
CAPÍTULO 14
Otimização e depuração do código
É possível utilizar o Macromedia Dreamweaver MX para otimizar e depurar o código. É possível,

por exemplo: validar tags, tornar o documento compatível com XHTML ou depurar JavaScripts.
• “Limpeza do código”, na página 215
• “Como verificar se as tags e chaves estão ajustadas”, na página 216
• “Validação das tags”, na página 217
• “Como tornar as páginas compatíveis com XHTML”, na página 217
• “Como utilizar o depurador JavaScript”, na página 221
• “Como utilizar o depurador de ColdFusion”, na página 227
Limpeza do código
Utilize o comando Limpar o HTML ou Limpar o XHTML para remover tags vazias, combinar
tags font aninhadas e aprimorar o código HTML/XHTML confuso ou ilegível.
Para um documento XHTML, o comando Limpar o XHTML corrige erros de sintaxe, define o
uso de caixa dos atributos de tag como minúsculas e adiciona ou reporta os atributos exigidos
ausentes de uma tag (após a execução do comando Limpar o XHTML, é exibida uma caixa de
diálogo que lista o número de tags img e area que não têm um atributo alt).
Para limpar o HTML gerado por um documento do Microsoft Word, veja “Como limpar o
HTML do Microsoft Word”, na ajuda do Dreamweaver (Ajuda > Como utilizar o Dreamweaver).
Para limpar o código:
1 Abra um documento.
• Se o documento estiver em HTML, escolha Comandos > Limpar o HTML.
• Se o documento estiver em XHTML, escolha Comandos > Limpar o XHTML.
2 Na caixa de diálogo que é exibida, escolha uma das opções a seguir:
• A opção Remover tags recipientes vazias remove todas as tags que não comportam conteúdo
entre elas. Por exemplo: <b></b> e <font color="FF0000"></font> são consideradas tags vazias,
mas a tag <b> em <b>um texto</b> não é.
• A opção Remover tags aninhadas redundantes remove todas as ocorrências redundantes de
uma tag. Por exemplo, no código <b>This is what I <b>really</b> wanted to say </b>, as tags b
próximas à palavra “really” são redundantes e devem ser removidas.
215
• A opção Remover comentários de HTML não pertencentes ao Dreamweaver remove todos os
comentários que não foram inseridos pelo Dreamweaver. Por exemplo: 
seria removido, mas  não, porque é um comentário do
Dreamweaver que marca o início de uma região editável em um modelo.
• Remover markup especial do Dreamweaver
• A opção Remover tag(s) específico(s) remove as tags especificadas no campo de texto
adjacente. Utilize esta opção para remover tags personalizadas, inseridas por outros editores
visuais, e outras tags que não devem ser exibidas no site (Por exemplo: blink). Separe várias tags
com vírgulas (por exemplo: font, blink).
• A opção Combinar os tags de <font> aninhadas sempre que possível consolida duas ou mais tags
font quando elas controlam a mesma faixa de texto. Por exemplo: <font size="7"><font
color="#FF0000">big red</font></font> seria alterado para <font font="7" font="#FF0000">big
red</font>.
• A opção Mostrar o registro quando concluir exibe uma caixa de alerta com detalhes sobre as
alterações feitas no documento logo que a limpeza é concluída.
3 Clique em OK.
Dependendo do tamanho do documento e do número de opções selecionadas, a limpeza
poderá demorar alguns segundos.
Como verificar se as tags e chaves estão ajustadas

À medida que se edita o código na visualização do código ou no inspetor de código é editado, é
possível se certificar de que as tags ou as chaves ({ }) exibidas na página estão ajustadas. A
verificação das tags para ver se estão ajustadas ajuda a garantir que todas contêm tags de abertura e
finalização. Esse procedimento é especialmente útil quando diversos níveis de alinhamento forem
utilizados no código (por exemplo: quando há várias tabelas aninhadas em outras tabelas.
Para verificar se as tags estão ajustadas:

2 Coloque o ponto de inserção no código aninhado a ser verificado.
3 Escolha Editar > Selecionar a tag-mãe.
As tags correspondentes de abertura e finalização aparecem realçadas no código. Se continuar
escolhendo Editar > Selecionar a tag-mãe e as tags estiverem ajustadas, ocasionalmente o
Dreamweaver realçará as tags <html> e </html> externas.
Para verificar se as chaves estão ajustadas:

2 Coloque o ponto de inserção no código aninhado a ser verificado.
3 Escolha Editar > Ajustar as chaves.
As tags correspondentes de abertura e finalização aparecem realçadas no código. Escolha
novamente Editar > Ajustar as chaves realçará as tags correspondentes que envolvem a seleção
anterior.
216 Capítulo 14
Validação das tags
É possível utilizar o Validador do Dreamweaver para saber se o código apresenta erros de tag ou
sintaxe. O Validador oferece suporte a várias linguagens baseadas em código, incluindo diversas
versões de HTML, XHTML, CFML (Linguagem de markup ColdFusion, ColdFusion Markup
Language), JavaServer Pages (JSP) e Wireless Markup Language (WML). Também é possível
validar um documento XML.
Observação: Para validar o documento para fins de acessibilidade, veja “Teste de acessibilidade do site da Web”,
na página 370.
É possível definir preferências para o Validador. Pode-se, por exemplo: especificar linguagens
baseadas em tags a serem verificadas pelo Validador, os problemas específicos que o Validador deve
verificar e os tipos de erros que ele deve reportar. Para obter mais informações, veja “Definição de
preferências do Validador”, na página 191.
É possível executar o Validador no documento atual ou em uma tag selecionada.
Para executar o validador:

• Para um arquivo XML (ou XHTML), escolha Arquivo > Verificar página > Validar como
XML.
• Caso contrário, escolha Arquivo > Verificar página > Validar o markup.
A guia Validação do painel Resultados exibe uma mensagem “Não foram encontrados erros ou
advertências” ou lista os erros de sintaxe encontrados.
2 Clique duas vezes em uma mensagem de erro para realçá-la no documento.
3 Clique com o botão direito do mouse no relatório para salvá-lo como um arquivo XML ou
exibi-lo em um navegador (o que permite imprimi-lo).
Como tornar as páginas compatíveis com XHTML

Esta seção descreve o XML e XHTML, os requisitos de XHTML, os requisitos de CSS (folhas de
estilos em cascata) para XHTML e como criar documentos compatíveis com XHTML.
• “XML e XHTML”, na página 218
• “Sobre o código XHTML gerado pelo Dreamweaver”, na página 219
• “Como utilizar as CSS com a linguagem XHTML”, na página 220
• “Como tornar os documentos compatíveis com XHTML”, na página 221
Otimização e depuração do código 217

XML e XHTML
A XML (Extensible Markup Language) define a estrutura de informações ou como elas podem ser
armazenadas em um banco de dados. Por exemplo: uma linguagem XML para culinária poderia ter
uma tag denominada <receita> e <receita> poderia conter tags para <nome>, <ingredientes> e
<modo de fazer>. O ponto forte da linguagem XML está no fato de que as informações podem ser
armazenadas e recuperadas em um banco de dados, processadas em uma série de formatos e
utilizadas para uma variedade de objetivos (por exemplo: em uma página da Web, em um
computador portátil ou no telefone celular ou ainda para um livro de receitas de culinária, fichas de
receitas ou um livro sobre coentro).
A XHTML (Extensible Hypertext Markup Language) é uma reformulação da linguagem HTML
como uma aplicação da XML. Ela é quase idêntica à HTML 4.01, porém é mais rigorosa e limpa.
Vantagens da linguagem XHTML

Geralmente, com a XHTML pode-se perceber os benefícios da XML e também assegurar a
compatibilidade com versões anteriores e futuras dos documentos da Web. Abaixo, alguns
motivos específicos para se utilizar a linguagem XHTML:
• A XHTML foi desenvolvida para substituir a HTML. Se desejar que seu site da Web na
Internet fique visível e seja processado corretamente no futuro, é um investimento seguro
começar a codificar em XHTML desde já.
• A XHTML foi desenvolvida para funcionar em diversos dispositivos e não somente em PCs.
• A XHTML é uma linguagem XML, por isso oferece potencial de extensibilidade. Também é
possível utilizar ferramentas XML padrão para exibir, editar e validar documentos XHTML.
• Os documentos XHTML podem utilizar aplicativos como scripts e applets que se baseiam no
modelo de objeto de documento HTML ou no modelo de objeto de documento XML.
• A XHTML requer um código de qualidade. Isso reduz as discrepâncias entre a forma como
agentes de usuários distintos (como navegadores da Web) processam um documento da Web,
uma vez que muitas dessas discrepâncias são geradas devido ao código formatado incorreta ou
inadequadamente.
Migração de HTML para XHTML

A linguagem XHTML funciona com navegadores e outros agentes de usuário que oferecem
suporte à HTML 4 e com aqueles que oferecem suporte à XML. Desse modo, é possível alternar
para a XHTML sem excluir ninguém ou ter de aguardar que os agentes de usuário XML sejam a
maioria. Como a XHTML é tão parecida com a HTML, não é um processo difícil passar da
HTML para a XHTML.
Recursos da Web para XHTML

Para obter mais informações sobre XHTML, visitar o site do World Wide Web Consortium
(W3C), que contém as especificações da linguagem XHTML 1.1 - XHTML baseada em módulos
(http://www.w3.org/TR/xhtml11/) e XHTML 1.0 (http://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).
218 Capítulo 14
Sobre o código XHTML gerado pelo Dreamweaver
O Dreamweaver gera código XHTML e limpa o código XHTML existente de uma forma que
atende a muitos dos requisitos de XHTML automaticamente. Para os poucos requisitos de
XHTML que não são atendidos, o Dreamweaver fornece as ferramentas necessárias.
Observação: Alguns dos requisitos descritos nesta seção também são exigidos em diversas versões da linguagem
HTML.
A tabela a seguir descreve os requisitos de XHTML atendidos automaticamente pelo

Dreamweaver.
requisito de XHTML Para atender a este requisito, o Dreamweaver faz

isto...
Quando a codificação de caracteres de um documento Adiciona uma declaração XML a um documento

é diferente da codificação UTF-8 padrão, o documento XHTML e especifica a codificação, por exemplo:
deve ter uma declaração XML. <?xml version="1.0" encoding="iso-8859-1"?>
Deve haver uma declaração DOCTYPE no documento Adiciona uma declaração XHTML DOCTYPE a um
antes do elemento raiz e a declaração deve fazer documento XHTML:
referência a um dos três arquivos DTD (Definição de <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
tipo de documento, Document Type Definition) para Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
XHTML (Strict, Transitional ou Frameset). xhtml1-transitional.dtd">
Ou se o documento XHTML tem um conjunto de
molduras:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-frameset.dtd">
O elemento raiz do documento deve ser “html” e o Adiciona o atributo namespace ao elemento html,
elemento html deve designar o espaço para nome como segue:
XHTML. <html xmlns="http://www.w3.org/1999/xhtml">
Um documento padrão deve ter os elementos Inclui os elementos cabeçalho, título e corpo em um
estruturais cabeçalho, título e corpo. Um documento de documento padrão e, em um documento de conjunto de
conjunto de molduras deve ter os elementos estruturais molduras, inclui os elementos cabeçalho, título e
cabeçalho, título e conjunto de molduras. conjunto de molduras.
Todos os elementos do documento devem ser Gera corretamente o código aninhado e, ao limpar o
aninhados corretamente: XHTML, corrige o aninhamento no código que não foi
<p>Este é um <i>exemplo com erro.</p></i> gerado pelo Dreamweaver.
<p>Este é um <i>bom exemplo.</i></p>
Todos os nomes de elementos e atributos devem ficar Impõe o uso de minúsculas para os nomes de elementos
em minúsculas. e atributos HTML no código XHTML que gera e ao
limpar o XHTML, independentemente das preferências
de caixa da tag e do atributo.
Todos os elementos devem ter uma tag final, a menos Insere tags finais no código que gera e ao limpar o
que estejam declarados no arquivo DTD como EMPTY. XHTML.
Os elementos vazios devem ter uma tag final ou a tag Insere elementos vazios com um espaço antes da barra
inicial deve terminar com />. Por exemplo: a tag <br> não inclinada de fechamento em tags vazias no código que
é válida; a forma correta é <br></br> ou <br/>. Em gera e ao limpar o XHTML.
seguida, estão os elementos vazios: area, base,
basefont, br, col, frame, hr, img, input, isindex, link, meta
e param.
E para fins de compatibilidade com versões anteriores
de navegadores que não são ativados por código XML
deve haver um espaço antes de /> (por exemplo: <br />
e não <br/>).

requisito de XHTML Para atender a este requisito, o Dreamweaver faz
isto...
Os atributos não podem ser minimizados; por exemplo: Insere pares atributo-valor integrais no código que gera
<td nowrap> é um atributo inválido; a forma correta é e ao limpar o XHTML.
<td nowrap="nowrap">. Nota: Se um navegador HTML não oferecer suporte a
Isso afeta os atributos a seguir: checked, compact, HTML 4, poderá interpretar incorretamente esses
declare, defer, disabled, ismap, multiple, noresize, atributos booleanos quando exibidos na forma por
noshade, nowrap, readonly e selected. extenso.
Todos os valores de atributos devem ser exibidos entre Coloca os valores de atributos entre aspas no código
aspas. que gera e ao limpar o XHTML.
Os elementos a seguir devem ter um atributo id e um Define os atributos name e id com o mesmo valor,
atributo name: a, applet, form, frame, iframe, img e map. sempre que o atributo name é definido por um inspetor
Por exemplo: de propriedades, no código que o Dreamweaver gera e
<a name="intro">Introduction</a> é inválido; a forma ao limpar o XHTML.
correta é
<a id="intro">Introduction</a> ou
<a id="section1" name="intro">
Introduction</a>.
Para atributos com valores de um tipo enumerado, os Impõe o uso de minúsculas para os valores de tipos
valores devem ser especificados em minúsculas. enumerados no código que gera e ao limpar o XHTML.
Um valor de tipo enumerado é um valor de uma lista
especificada de valores permitidos; por exemplo: o
atributo align tem estes valores permitidos: center,
justify, left e right.
Todos os elementos de estilo e script devem ter um Define os atributos type e language nos elementos de
atributo type. script, e o atributo type nos elementos de estilo, no
(O atributo type do elemento de script é exigido desde o código que gera e ao limpar o XHTML.
HTML 4, quando o atributo language foi reprovado.)
Todos os elementos img e area devem ter um atributo Define esses atributos no código que gera e, ao limpar o
alt. XHTML, reporta os atributos alt ausentes.
Como utilizar as CSS com a linguagem XHTML

Para determinados estilos CSS, um agente de usuário HTML (como um navegador da Web) pode
produzir resultados visuais ou auditivos diferentes daqueles produzidos por um agente de usuário
XML. Abaixo são apresentadas algumas regras que visam a reduzir essas discrepâncias:
• Utilize minúsculas para nomes de elementos e atributos em folhas de estilos CSS.
O Dreamweaver impõe o uso de minúsculas para nomes de atributos e elementos de estilo em um
documento XHTML, independentemente das preferências do usuário, no código que gera e ao
limpar o XHTML.
• Os analisadores HTML inferem o elemento tbody, mas os analisadores XML não. Portanto, se
for definido um estilo tbody, adicionar o elemento tbody às suas tabelas.
• A CSS define regras distintas de conformidade para documentos HTML e XML; por isso,
deve-se levar em consideração que as regras de HTML se aplicam a um documento XHTML
fornecido como HTML e que as regras de XML se aplicam a um documento XHTML
fornecido como XML.
Observação: Em documentos que especificam o espaço para nome XHTML, espera-se que navegadores e outros
agentes de usuário continuem reconhecendo os atributos class e id como um atributo do tipo ID. Portanto, é
possível continuar utilizando a sintaxe abreviada “.” para fazer referência a uma classe CSS de um seletor (por
exemplo: P.note) e utilizar a sintaxe de seletor abreviada “#” mesmo que o agente de usuário não leia o arquivo DTD.
220 Capítulo 14
Como tornar os documentos compatíveis com XHTML
Esta seção descreve como tornar um novo documento compatível com XHTML e como tornar
um documento HTML existente compatível com XHTML.
Para criar um novo documento compatível com XHTML:
1 Escolha Arquivo > Novo.

A caixa de diálogo Novo documento é exibida.
2 Escolha um tipo de documento.
3 Selecione a opção Tornar o documento compatível com XHTML.
4 Clique em OK.
Para criar documentos compatíveis com XHTML como padrão:
1 Escolha Editar > Preferências e selecionar a categoria Novo documento.

2 Na categoria Novo documento, escolher um tipo de documento e selecionar a opção Tornar o
documento compatível com XHTML.
3 Clique em OK.
Para tornar um documento HTML existente compatível com XHTML:
Abra um documento.
• Para um documento sem molduras, escolher Arquivo > Converter > XHTML.
• Para um documento com molduras, selecione uma moldura e escolher Arquivo > Converter >
XHTML. Para converter todo o documento, repetir esta etapa para cada documento com
moldura e conjuntos de molduras.
Observação: É impossível converter uma instância de um modelo porque ela deve ter sido criada na mesma
linguagem que o modelo no qual se baseia. Por exemplo: uma instância de um modelo XHTML sempre será uma
instância XHTML, uma instância de um modelo HTML sempre será uma instância HTML e não poderá ser
convertida para XHTML ou para qualquer outra linguagem.
Como utilizar o depurador JavaScript

O depurador JavaScript ajuda a isolar erros no código JavaScript do cliente. É possível escrever o
código na visualização do código (ou no inspetor de código) e, em seguida, executar o depurador
para verificar se há erros lógicos e de sintaxe no código. Se a página apresentar um ou mais erros
de sintaxe, o navegador exibirá uma mensagem de erro; se a página contiver um erro lógico, ela
funcionará incorretamente, mas o navegador não exibirá uma mensagem de erro.
É possível utilizar o depurador JavaScript com o Microsoft Internet Explorer e o Netscape
Navigator 4.0 (mas não com o Netscape Navigator 6.0).
Inicialmente, o depurador verifica se há erros de sintaxe no código e, em seguida, é executado com
o navegador para auxiliar na identificação dos erros lógicos. Se houver erros lógicos, é possível
utilizar a caixa de diálogo Depurador JavaScript para examinar as variáveis e propriedades do
documento enquanto o programa está em execução. É possível definir pontos de interrupção
(semelhantes a instruções de alerta) no código a fim de interromper a execução do programa e
exibir os valores dos objetos e propriedades JavaScript em uma lista de variáveis. Também é
possível avançar até a próxima instrução ou até uma chamada de função para examinar a alteração
nos valores de variável.

• “Como executar o depurador JavaScript”, na página 222
• “Como localizar erros de sintaxe”, na página 223
• “Como localizar e corrigir erros lógicos”, na página 224
• “Definição de pontos de interrupção”, na página 224
• “Como analisar o código”, na página 225
• “Como examinar e editar valores de variáveis”, na página 226
Como executar o depurador JavaScript

Depois de escrever o código JavaScript, é possível iniciar o depurador JavaScript para verificar se
há erros no código. Inicialmente, o depurador verifica os erros de sintaxe e, em seguida, abre a
página no navegador para que o usuário possa verificar se há erros lógicos.
Para iniciar a depuração:
1 Escolha Arquivo > Depurar no navegador e, em seguida, selecione um navegador na lista.

No Windows, escolher o Internet Explorer ou o Netscape Navigator.
Se o depurador encontrar um erro de sintaxe, interromperá a execução e listará o erro na janela
Erros de sintaxe JavaScript. Para obter mais informações, veja “Como localizar erros de
sintaxe”, na página 223.
2 Se estiver utilizando o Netscape Navigator, clique em OK na caixa de advertência do depurador
e, em seguida, clique em Conceder na caixa de diálogo Segurança Java.
Observação: Se o usuário já tiver aceito um certificado de segurança da Macromedia, talvez a caixa de diálogo
Segurança Java não seja exibida.
3 (Apenas no Windows) Se estiver utilizando o Internet Explorer, clique em Sim na caixa de

diálogo Segurança Java e clique em OK na caixa de advertência do depurador.
Observação: A caixa de diálogo de segurança é necessária porque o depurador utiliza um protocolo de Internet
para se conectar com o navegador — na verdade, ele não efetua uma conexão de rede nem se conecta a um
servidor de Internet.
A caixa de diálogo Depurador JavaScript é exibida com a janela do navegador. O depurador

interrompe a operação automaticamente na primeira linha de código.
A figura abaixo mostra a barra de ferramentas da caixa de diálogo Depurador JavaScript:
Remover todos
Parar a os pontos de
depuração interrupção Depuração total
Executar Definir/remover Depuração Depuração

o ponto de parcial circular
interrupção
222 Capítulo 14
Para executar o depurador:
Na parte superior da caixa de diálogo Depurador JavaScript, clique no botão Executar.
Para interromper a execução do depurador:
Na parte superior da caixa de diálogo Depurador JavaScript, clique no botão Parar a depuração. A
caixa de diálogo Depurador JavaScript é fechada.
Como localizar erros de sintaxe

Se o depurador encontrar erros de sintaxe em uma página, ele interromperá sua execução e listará
os erros na caixa de diálogo Erros de sintaxe JavaScript, conforme mostra a figura abaixo:
Para exibir a descrição do erro:
Selecione um erro na caixa de diálogo Erros de sintaxe JavaScript. Uma descrição do erro é exibida
na caixa Descrição detalhada.
Para ter acesso ao erro selecionado no código, seguir um dos procedimentos abaixo:
• Clique duas vezes no erro.

• Clique em Ir para a linha.
O código é realçado na visualização do código ou, se a visualização do código não estiver aberta,
no inspetor de código.

Como localizar e corrigir erros lógicos
Ao iniciar o depurador, a caixa de diálogo Depurador JavaScript é aberta e interrompe a execução
do navegador na primeira linha do código. É possível definir pontos de interrupção adicionais em
qualquer linha do código. O depurador interrompe a execução do código em cada ponto de
interrupção, possibilitando examinar os valores dos objetos e das propriedades JavaScript no
painel da lista de variáveis.
Depois que o depurador pára em um ponto de interrupção, é possível analisar o código (executar
uma instrução por vez). Este procedimento permite verificar se o programa é executado da forma
como deveria. O depurador pode analisar até mesmo código vinculado. Por exemplo: se o código
contiver um link para um arquivo de origem, o depurador analisará o arquivo de origem e o
exibirá na caixa de diálogo Depurador JavaScript. À medida que avança na análise do código, é
possível acompanhar as alterações nos valores das variáveis no programa.
Definição de pontos de interrupção

Um ponto de interrupção indica um ponto do código no qual se deseja interromper a execução do
programa. Ao definir um ponto de interrupção, ele é marcado com um pequeno ponto vermelho
na margem esquerda da caixa de diálogo Depurador JavaScript. Quando a execução do programa
é interrompida no ponto de interrupção, uma pequena seta é exibida sobre o ponto, e o usuário
pode examinar os objetos e as propriedades existentes neste ponto. Com isso, é possível identificar
rapidamente a origem do problema no código JavaScript.
Os pontos de interrupção podem ser definidos apenas no código JavaScript (entre as tags script)
ou em uma linha com um manipulador de evento. Se for definido um ponto de interrupção em
outro lugar, o Dreamweaver automaticamente o definirá na próxima linha válida de código (ou
colocará o ponto de inserção nesta linha se ela já tiver um ponto de interrupção definido). Se não
houver linhas válidas nas quais o ponto de interrupção possa ser definido, será emitido um alerta
sonoro.
224 Capítulo 14
Para definir um ponto de interrupção:
1 Na caixa de diálogo Depurador JavaScript, coloque o ponto de inserção na linha em que deseja
definir o ponto de interrupção.
2 Na barra de ferramentas, clique no botão Definir/remover o ponto de interrupção.
3 Para remover o ponto de interrupção, clique novamente em Definir/remover o ponto de
interrupção.
Para remover todos os pontos de interrupção, seguir um dos procedimentos abaixo:
• Na parte superior da caixa de diálogo Depurador JavaScript, clique no botão Remover todos os
pontos de interrupção.
• Na visualização do código (ou no inspetor de código), escolher Editar > Remover todos os
pontos de interrupção.
Como analisar o código

É possível “analisar” o código a executar as instruções uma de cada vez e observar os resultados.
Por exemplo: é possível analisar uma condição if para verificar se o programa pára na primeira
linha da instrução condicional ou na próxima linha executável após a instrução if.
Quando o depurador pára em uma instrução com uma chamada de função, é possível verificar a
função para se certificar de que será executada corretamente. Se a função estiver correta, é possível
determinar que o depurador execute uma depuração circular até que a função seja retornada. A
execução do programa será novamente interrompida na próxima instrução após o local indicado
da chamada de função. Se o usuário tentar depurar uma instrução que contém uma função
JavaScript não-padronizada, o depurador JavaScript executará a depuração parcial.
Para efetuar a depuração parcial de uma instrução:
Na parte superior da caixa de diálogo Depurador JavaScript, clique no botão Depuração parcial.
Quando o programa para em qualquer instrução (inclusive naquelas com uma chamada de
função), é possível efetuar a depuração parcial da instrução para continuar e interromper o
processo antes da próxima instrução.
Para efetuar a depuração total de uma função:
Na parte superior da caixa de diálogo Depurador JavaScript, clique no botão Depuração total.
Para efetuar a depuração circular de uma função:
Na parte superior da caixa de diálogo Depurador JavaScript, clique no botão Depuração circular.
Também é possível utilizar a Depuração circular quando o depurador está em uma função
definida pelo usuário. A depuração circular faz com que as instruções restantes na definição da
função sejam executadas. O depurador faz uma pausa na instrução seguinte.

Como examinar e editar valores de variáveis
Para verificar os valores das variáveis à medida que examina o código, utilizar o painel da lista de
variáveis, localizado na parte inferior da caixa de diálogo Depurador JavaScript. Ao adicionar uma
variável, seu nome é exibido na coluna à esquerda; a coluna à direita exibe seu valor atual quando
o programa interrompe a execução em um ponto de interrupção ou depois que o usuário efetua a
depuração total do código.
A figura abaixo mostra o valor atual de diversas variáveis:
Para adicionar uma variável à lista de variáveis, seguir um dos procedimentos abaixo:
• Selecione o nome da variável na seção do código da caixa de diálogo Depurador JavaScript.

Clique no botão de adição (+) e pressionar a tecla Enter.
• Clique no botão de adição (+), digite o nome da variável a ser examinada e pressionar a tecla
Enter.
Os valores são exibidos ao lado de cada variável à medida que o código é examinado. Se a variável
for um objeto com propriedades, é possível expandi-la para exibir as propriedades e os valores
correspondentes. Para expandir a variável, clique no botão de adição (+) exibido ao lado da
variável na lista. A variável expandida se fecha automaticamente sempre que o código é
examinado.
Para remover uma variável da lista:
1 Selecione o item na lista de variáveis.

226 Capítulo 14
Para editar um valor:
1 Selecione o item na lista de variáveis.

2 Clique no valor da lista de variáveis.
3 Na caixa de texto que é exibida, digite um novo valor.
Como utilizar o depurador de ColdFusion

Ao desenvolver aplicativos com o Macromedia ColdFusion, é possível configurar o ColdFusion
para exibir informações em um navegador que ajudarão a depurar esses aplicativos. Por exemplo:
se uma página contiver um erro, o ColdFusion exibirá as possíveis causas do erro na parte inferior
de uma página ColdFusion quando a página for aberta em um navegador. Se você é um
programador de ColdFusion e está utilizando o Macromedia ColdFusion MX como servidor de
teste Dreamweaver, é possível exibir essas informações e corrigir a página sem sair do
Dreamweaver.
Observação: Este recurso não conta com suporte no sistema operacional Macintosh. Os programadores de
Macintosh podem utilizar o comando Visualizar no navegador (F12) para abrir uma página ColdFusion em um
navegador distinto. Se a página contiver erros, informações sobre as possíveis causas do erro serão exibidas na
parte inferior da página.
Antes de começar, certifique-se de que as definições de depuração estejam ativadas no

Administrador de ColdFusion. Para obter mais informações, ver a ajuda do ColdFusion no
Dreamweaver (Ajuda > Como utilizar o ColdFusion). Além disso, certifique-se de que o servidor
de teste Dreamweaver esteja executando o ColdFusion MX. Para obter mais informações sobre o
servidor de teste Dreamweaver, veja “Como especificar uma pasta para processar páginas
dinâmicas”.

Para depurar uma página ColdFusion:
1 Abra a página ColdFusion no Dreamweaver.

2 Clique no ícone Depuração pelo servidor, na barra de ferramentas do documento (o ícone com
o globo e um raio) ou selecione Exibir > Depuração pelo servidor.
O Dreamweaver solicita o arquivo do servidor ColdFusion MX e o exibe em uma janela
interna do navegador Internet Explorer. Se a página contiver erros, as possíveis causas dos erros
serão exibidas na parte inferior da página.
Ao mesmo tempo, é exibido um painel Depuração pelo servidor. O painel fornece diversas
informações úteis, como todas as páginas processadas pelo servidor para interpretar a página,
todas as consultas SQL executadas na página e todas as variáveis do servidor e seus respectivos
valores, se houver. O painel também fornece um resumo das execuções.
3 Se uma categoria Exceções for exibida no painel Depuração pelo servidor, clique no ícone de
adição (+) para expandi-la.
A categoria Exceções é exibida quando o servidor encontra problemas na página. Expandir a
categoria para obter mais informações sobre o problema.
4 Na coluna Local do painel Depuração pelo servidor, clique na URL da página para abri-la na
visualização do código e corrigi-la.
Se o Dreamweaver localizar a página, ela será aberta com a(s) linha(s) indicando o problema
realçada(s). Se o Dreamweaver não conseguir localizar a página, ele solicitará a localização.
5 Corrija o erro, salve o arquivo no servidor e clique em Procurar.
O Dreamweaver processa a página no navegador interno novamente e atualiza o painel
Depuração pelo servidor. Se não houver mais nenhum problema na página, a categoria
Exceções não reaparecerá no painel.
6 Para sair do modo de depuração, alternar para a visualização do código (Exibir > Código) ou
para a visualização do projeto (Exibir > Projeto).
Para assegurar que as informações de depuração sejam atualizadas todas as vezes em que uma
página for exibida no navegador interno, certifique-se de que o Internet Explorer verifica se há
versões mais recentes do arquivo sempre que este é solicitado. No Internet Explorer, escolher
Ferramentas > Opções da Internet, selecionar a guia Geral e clique no botão Configurações,
exibido na área Arquivos de Internet temporários. Na caixa de diálogo Definições, selecionar a
opção “A cada visita à página”.
228 Capítulo 14
CAPÍTULO 15
Edição do código na visualização do projeto
Embora o Macromedia Dreamweaver MX permita criar e editar páginas da Web visualmente sem
se preocupar com o código-fonte adjacente, algumas vezes é necessário editar o código para maior
controle ou para solucionar problemas na página da Web.
Por exemplo: suponha que você selecionou um texto no documento e aplicou uma nova fonte, mas
esse procedimento afetou somente metade da frase. Ao observar o código, você percebe que a tag de
fechamento </font> está no meio da frase. Movendo a tag </font> para o final da frase, o problema é
resolvido.
Este capítulo destina-se às pessoas que preferem trabalhar na visualização do projeto, mas também
desejam ter acesso rápido ao código. O Dreamweaver permite editar o código e trabalhar na
visualização do projeto ao mesmo tempo.
O capítulo contém os tópicos a seguir:
• “Edição do código com o inspetor de propriedades”, na página 229
• “Edição do código com um editor de tags”, na página 230
• “Edição de códigos com o Quick Tag Editor”, na página 230
• “Edição do código com o seletor de tags”, na página 233
• “Edição de scripts”, na página 234
• “Como trabalhar com inclusões do servidor”, na página 235
Edição do código com o inspetor de propriedades

O inspetor de propriedades pode ser usado para verificar e editar os atributos de texto ou dos objetos
em uma página.
Para utilizar o inspetor de propriedades:
1 Clique no texto ou selecione um objeto na página.

O inspetor de propriedades referente ao texto ou objeto é exibido abaixo da janela do
documento. Se o inspetor de propriedades não estiver visível, selecione Janela > Propriedades.
2 Faça alterações nos atributos no inspetor de propriedades.
229
Edição do código com um editor de tags
É possível utilizar um editor de tags para inspecionar e editar os atributos de objetos de uma
página.
Para utilizar um editor de tags:
1 Clique com o botão direito do mouse no objeto da página e escolha Editar tag no menu pop-up.
O editor de tags desse objeto é exibido.
2 Faça alterações nos atributos do objeto e clique em OK.
Edição de códigos com o Quick Tag Editor

Utilize o Quick Tag Editor para inspecionar e editar tags HTML rapidamente sem sair da
visualização do projeto. Para abrir o Quick Tag Editor, pressione as teclas Control + T.
• “Sobre o Quick Tag Editor”, na página 230
• “Como inserir uma tag HTML com o Quick Tag Editor”, na página 231
• “Edição de uma tag HTML com o Quick Tag Editor”, na página 231
• “Como aplicar HTML a uma seleção com o Quick Tag Editor”, na página 232
• “Como utilizar o menu de sugestões”, na página 232
Sobre o Quick Tag Editor

O Quick Tag Editor dispõe de três modos:
• O modo Inserir HTML, utilizado para inserir o novo código HTML.
• O modo Editar a tag, utilizado para editar uma tag existente.
• O modo Colocar a tag ao redor, utilizado para colocar uma nova tag ao redor da seleção atual.
O modo em que o Quick Tag Editor será exibido dependerá da seleção na opção Visualização de
projeto. Nos três modos, as operações básicas do Quick Tag Editor são as mesmas: abrir o editor,
digite ou editar as tags e os atributos e fechar o editor.
É possível navegar através dos vários modos clicando em Control+T no Windows enquanto o
Quick Tag Editor estiver ativo.
Se for utilizado qualquer HTML inválido no Quick Tag Editor, o Dreamweaver tentará corrigi-
lo, inserindo aspas de finalização e sinais de maior, onde for necessário.
Para executar uma edição de HTML mais abrangente, utilizar a visualização do código. Para obter
mais informações, veja “Codificação no Dreamweaver”, na página 201.
230 Capítulo 15
Como inserir uma tag HTML com o Quick Tag Editor
Utilize o Quick Tag Editor para inserir uma tag HTML no documento.
Para inserir uma tag HTML com o Quick Tag Editor:
1 Na visualização do projeto, clique na página para colocar o ponto de inserção no local onde
deseja inserir o código.
2 Pressione Control + T.
O Quick Tag Editor se abre no modo de inserção de HTML.
3 Digite a tag HTML e pressione Enter.

A tag é inserida no código.
4 Pressione a tecla Escape para sair sem fazer alterações.
Edição de uma tag HTML com o Quick Tag Editor

Utilize o Quick Tag Editor para editar uma tag HTML no documento.
Para editar uma tag HTML com o Quick Tag Editor:
1 Selecione um objeto na visualização do projeto.

A tag a ser editada também pode ser selecionada no seletor de tags, na parte inferior da janela do
documento. Para obter mais informações, veja “Edição do código com o seletor de tags”, na
página 233.
2 Pressione Control + T.
O Quick Tag Editor se abre no modo Editor de tag.
3 Digite novos atributos, edite os já existentes ou edite o nome da tag.
4 Pressione a tecla Tab para avançar de um atributo ao outro e pressione Shift+Tab para voltar.
Por padrão, as alterações são aplicadas ao documento pressionando-se Tab ou Shift+Tab. Para
desativar as atualizações automáticas, selecione Editar > Preferências > Quick Tag Editor. A
caixa de diálogo Preferências do Quick Tag Editor é exibida. Desmarque a opção Aplicar as
modificações durante a edição e clique em OK. Para obter mais informações, clique no botão
Ajuda da caixa de diálogo.
5 Para fechar o Quick Tag Editor e aplicar todas as alterações, pressione Enter.
6 Para sair sem fazer nenhuma alteração, pressione a tecla Escape.
Edição do código na visualização do projeto 231

Como aplicar HTML a uma seleção com o Quick Tag Editor
Utilize o Quick Tag Editor para incluir uma seleção em seu documento com tags HTML de
abertura e fechamento.
Como aplicar HTML a uma seleção com Quick Tag Editor:
1 Selecione um objeto ou texto não formatado na visualização do projeto.

Se for selecionado um texto ou objeto que inclua uma tag HTML de abertura ou finalização, o
Quick Tag Editor será aberto no modo Editar a tag.
2 Pressione as teclas Control + T ou clique no botão Quick Tag Editor, no inspetor de
propriedades.
O Quick Tag Editor se abre no modo Colocar a tag ao redor.
3 Digite uma única tag de abertura, como <font="verdana"> e pressione Enter.
A tag é inserida no início da seleção atual e a tag de finalização correspondente é colocada no
final.
4 Pressione a tecla Escape para sair sem fazer alterações.
Como utilizar o menu de sugestões

No Quick Tag Editor, é possível acessar um menu de sugestões de atributos que lista todos os
atributos válidos da tag que está sendo editada ou inserida. Se o Dreamweaver não reconhecer a
tag que estiver sendo editada, o menu de sugestões apresentará todos os atributos que o
Dreamweaver reconhece para qualquer tag.
Também é possível desativar o menu de sugestões ou ajustar o intervalo de exibição antes do
menu pop-up no Quick Tag Editor.
Para exibir uma lista de atributos válidos para uma tag, interromper a operação por alguns segundos
e editar um nome de atributo no Quick Tag Editor. É exibido um menu de sugestões listando todos
os atributos válidos para a tag que está sendo editada.
Utilize o menu de sugestões como segue:
• Ao iniciar a digitação de um nome de atributo, o menu de sugestões realça o primeiro nome de
atributo começa com as letras digitadas.
• Para mover o realce para cima ou para baixo no menu, utilize as teclas de seta para cima e seta
para baixo ou a barra de rolagem.
• Para selecionar o nome do atributo realçado, pressione Enter. Como alternativa, clique duas
vezes em um nome de atributo no menu.
• Para ignorar o menu de sugestões sem selecionar uma entrada, pressione a tecla Escape ou
continuar digitando.
Quando ocorre uma pausa durante a digitação ou edição de um nome de tag, é exibido um menu
de sugestões semelhante listando nomes de tags em vez de nomes de atributos.
232 Capítulo 15
Para desativar o menu de sugestões ou alterar o intervalo de exibição:
1 Escolha Editar > Preferências e selecionar Quick Tag Editor.

A caixa de diálogo Preferências do Quick Tag Editor é exibida.
2 Para desativar o menu de sugestões, desmarque a opção Ativar a sugestão de tags.
3 Para alterar o intervalo de exibição do menu, ajuste o botão deslizante Atraso.
4 Clique em OK.
Edição do código com o seletor de tags

É possível utilizar o seletor de tags para selecionar, editar ou remover tags sem sair da visualização
do projeto. O seletor de tags está localizado na barra de status, na parte inferior da janela do
documento, e consiste em uma série de tags, como a seguir.
Para editar um tag:
1 Clique no documento.
As tags aplicáveis no ponto de inserção são exibidas no seletor de tags.
2 Clique com o botão direito do mouse em uma tag do seletor de tags.
O menu pop-up é exibido.
3 Selecione Editar a tag no menu.
O Quick Tag Editor é exibido. Para obter mais informações, veja “Edição de uma tag HTML
com o Quick Tag Editor”, na página 231.
Para remover uma tag:
2 Clique com o botão direito do mouse em uma tag do seletor de tags.
O menu pop-up é exibido.
3 No menu, selecione Remover a tag.
Para selecionar um objeto representado por uma tag:
2 Clique em uma tag no seletor de tags.
O objeto representado pela tag é selecionado na página.
Dica: Utilize esta técnica para selecionar linhas de tabelas (tags tr) ou células (tags td) individualmente.

Edição de scripts
É possível trabalhar com JavaScripts e VBScripts de cliente na visualização do código e do projeto.
• “Como gravar um script de cliente na visualização do projeto”, na página 234
• “Como vincular a um arquivo de script externo”, na página 234
• “Edição de um script na visualização do projeto”, na página 235
Como gravar um script de cliente na visualização do projeto
É possível gravar um JavaScript ou VBScript na página sem sair da visualização do projeto. Antes
de começar, certifique-se de que o Dreamweaver exibe marcadores de script na página. Para exibir
os marcadores de script, selecione Exibir > Auxílios visuais > Elementos invisíveis.
Para inserir um script de cliente na visualização do projeto:
1 Coloque o ponto de inserção no local onde deseja inserir o script.

2 Selecione Inserir > Objetos de script > Script.
A caixa de diálogo Script é exibida.
Como vincular a um arquivo de script externo

É possível criar um link no documento para um arquivo de script externo sem sair da visualização
do projeto. Antes de começar, certifique-se de que o Dreamweaver exibe marcadores de script na
página. Para exibir os marcadores de script, selecione Exibir > Auxílios visuais > Elementos
invisíveis.
Para vincular a um arquivo de script externo:
1 Coloque o ponto de inserção no local onde deseja inserir o script.

2 Selecione Inserir > Objetos de script > Script.
A caixa de diálogo Script é exibida.
3 Clique em OK sem inserir nada na caixa de texto Conteúdo.
4 Selecione o marcador de script na visualização do projeto da janela do documento.
5 No inspetor de propriedades, clique no ícone de pasta para procurar e selecionar o arquivo de
script externo ou digitar o nome do arquivo na caixa Origem.
234 Capítulo 15
Edição de um script na visualização do projeto
É possível editar um script sem sair da visualização do projeto. Antes de começar, certifique-se de
que o Dreamweaver exibe marcadores de script na página. Para exibir os marcadores de script,
selecione Exibir > Auxílios visuais > Elementos invisíveis.
Para editar o script na visualização do projeto:
1 Selecione o marcador de script.

2 No inspetor de propriedades, clique no botão Editar.
O script é exibido na caixa de diálogo Propriedades do roteiro.
Se tiver sido criado um link com um arquivo de script externo, o arquivo será aberto
automaticamente na visualização do código, onde é possível fazer edições.
Observação: Se não houver um código entre as tags de script, a caixa de diálogo Propriedades do roteiro será
aberta mesmo que haja um link para um arquivo de script externo.
3 Faça as edições no script e clique em OK.

Para obter mais informações, clique no botão Ajuda da caixa de diálogo Propriedades do
roteiro.
Como trabalhar com inclusões do servidor

As inclusões do servidor são instruções feitas ao servidor da Web para incluir um arquivo
especificado em uma página da Web antes de disponibilizá-la ao navegador. É possível utilizar o
Dreamweaver para inserir inclusões do servidor nas páginas, editar as inclusões ou visualizar as
páginas contendo inclusões.
• “Sobre as inclusões do servidor”, na página 235
• “Como inserir uma inclusão do servidor”, na página 236
• “Edição do conteúdo de uma inclusão do servidor”, na página 237
Sobre as inclusões do servidor
Ao abrir um documento que está em um servidor da Web, o servidor processa as instruções de
inclusão e cria um novo documento no qual tais instruções são substituídas pelo conteúdo do
arquivo incluído. O servidor envia esse novo documento ao navegador. No entanto, ao abrir um
documento local diretamente em um navegador, não há nenhum servidor para processar as
instruções de inclusão nesse documento. Por isso, o navegador abre o documento sem processar
essas instruções e o arquivo que deveria ser incluído não é exibido no navegador. Desse modo, sem
utilizar o Dreamweaver, pode ser difícil visualizar os arquivos locais e verificar a aparência que
terão para os visitantes após serem colocados no servidor.
Com o Dreamweaver, no entanto, é possível visualizar os documentos exatamente como eles serão
exibidos depois de inseridos no servidor, tanto na visualização do projeto quanto na visualização
no navegador.
A colocação de uma inclusão do servidor em um documento insere uma referência a um arquivo
externo. O conteúdo do arquivo especificado não é inserido no documento atual. O
Dreamweaver exibe o conteúdo do arquivo externo na visualização do projeto, facilitando a
criação de páginas.

É impossível editar o arquivo incluído diretamente em um documento. Para editar o conteúdo de
uma inclusão do servidor, é necessário editar diretamente o arquivo a ser incluído. Todas as
alterações feitas no arquivo externo são automaticamente refletidas em todos os documentos que
incluírem tal arquivo.
Há dois tipos de inclusões do servidor: Virtual e Arquivo. A escolha a ser feita depende do tipo de
servidor da Web utilizado:
• Se for um servidor Apache da Web, escolher Virtual (esta é a opção padrão no Dreamweaver).
No Apache, a opção Virtual funciona em todos os casos, enquanto Arquivo funciona apenas
em alguns.
• Se o servidor for um Microsoft Internet Information Server (IIS), escolha Arquivo (virtual
funciona com o IIS somente em circunstâncias específicas). Infelizmente, o IIS não permite
incluir um arquivo em uma pasta acima da pasta atual na hierarquia de pastas, a não ser que
algum software especial tenha sido instalado no servidor. Se houver necessidade de incluir um
arquivo de uma pasta que está em uma posição superior na hierarquia de pastas do servidor IIS,
perguntar ao administrador do sistema se o software necessário está instalado.
• Para outros tipos de servidores ou caso desconheça o tipo de servidor em uso, pergunte ao
administrador do sistema qual opção deverá ser utilizada.
Alguns servidores estão configurados para examinar todos os arquivos, verificando se eles contêm
inclusões do servidor. Outros servidores estão configurados para examinar somente os arquivos de
uma determinada extensão, como .shtml, .shtm ou .inc. Se uma inclusão do servidor não estiver
funcionando, pergunte ao administrador do sistema se é necessário utilizar uma extensão especial
no nome do arquivo que utiliza a inclusão (por exemplo: se o arquivo é denominado canoe.html,
talvez seja necessário renomeá-lo como canoe.shtml). Se desejar que os arquivos permaneçam com
as extensões .html ou .htm, solicite ao administrador do sistema para configurar o servidor para
examinar todos os arquivos (não apenas os arquivos com uma determinada extensão) quanto à
ocorrência de inclusões do servidor. Todavia, a análise de um arquivo quanto à ocorrência de
inclusões do servidor é mais demorada. Portanto, as páginas que o servidor analisa são fornecidas
um pouco mais lentamente do que as demais. Em função disso, alguns administradores de sistema
não disponibilizam a opção de análise de todos os arquivos.
Como inserir uma inclusão do servidor

É possível utilizar o Dreamweaver para inserir inclusões do servidor em uma página.
Para inserir uma inclusão do servidor:
1 Escolha Inserir > Objetos de script > Inclusão do servidor.

2 Na caixa de diálogo que é exibida, procure e selecione um arquivo.
Para alterar o arquivo a ser incluído:
1 Selecione a inclusão do servidor na janela do documento.

2 Abra o inspetor de propriedades (Janela > Propriedades).
• Clique no ícone de pasta, procure e selecione um novo arquivo a ser incluído.
• Na caixa de texto, digite o caminho e o nome do novo arquivo a ser incluído.
236 Capítulo 15
Edição do conteúdo de uma inclusão do servidor
É possível utilizar o Dreamweaver para editar inclusões do servidor. Para editar o conteúdo
associado ao arquivo incluído, é necessário abrir o arquivo.
Para editar uma inclusão do servidor:
1 Selecione a inclusão do servidor na visualização do projeto ou na visualização do código e, no

inspetor de propriedades, clique em Editar.
O arquivo incluído é aberto em uma nova janela do documento.
2 Edite o arquivo e salve-o em seguida.
As alterações são imediatamente refletidas no documento atual e em qualquer documento
subseqüente que for aberto e inclui esse arquivo.

238 Capítulo 15
Parte IV
Parte IV
Como projetar um
layout de página
Utilize as ferramentas de projetos visuais do Dreamweaver

para criar layouts de página sofisticados.
• Capítulo 16, “Apresentação do conteúdo com tabelas”
• Capítulo 17, “Definição do layout de páginas na
visualização de layout”
• Capítulo 18, “Utilização de molduras”
CAPÍTULO 16
Apresentação do conteúdo com tabelas
As tabelas são ferramentas poderosas para a apresentação de dados tabulares e para a definição do
layout de textos e gráficos em uma página HTML. Uma tabela consiste em uma ou mais linhas,
sendo que cada linha é formada por uma ou mais células. Embora normalmente as colunas não
sejam especificadas de forma explícita no código HTML, o Dreamweaver permite manipulá-las,
bem como linhas e células.
Após criar uma tabela, é possível modificar facilmente sua aparência e estrutura. É possível
executar qualquer um dos procedimentos abaixo:
• Adicionar conteúdo
• Adicionar, excluir, dividir e mesclar linhas e colunas
• Modificar propriedades de tabelas, linhas ou células para adicionar cor e alinhamento
• Copiar e colar células
Observação: A maioria dos designers utiliza tabelas para definir o layout de páginas da Web. O Dreamweaver
fornece dois modos de visualização e manipulação de tabelas: Visualização padrão, na qual as tabelas são
apresentadas como grades de linhas e colunas, e Visualização de layout, que permite desenhar, redimensionar e
mover as caixas na página enquanto estiver usando tabelas para a estrutura subjacente (consulte o Capítulo 17,
“Definição do layout de páginas na visualização de layout”, na página 257).

• “Como inserir uma tabela”, na página 242
• “Como adicionar conteúdo a uma célula da tabela”, na página 242
• “Como importar dados tabulares”, na página 243
• “Como selecionar elementos da tabela”, na página 243
• “Formatação de tabelas e células”, na página 245
• “Como redimensionar tabelas”, na página 249
• “Como alterar a largura da coluna e a altura da linha”, na página 249
• “Como adicionar e remover linhas e colunas”, na página 250
• “Como aninhar tabelas”, na página 253
• “Como recortar, copiar e colar células”, na página 253
• “Como ordenar tabelas”, na página 255
• “Como exportar dados da tabela”, na página 256
241
Como inserir uma tabela
Utilize a barra Inserir ou o menu Inserir para criar uma nova tabela. Para obter mais informações
sobre como criar tabelas acessíveis no Dreamweaver, veja “Autoria da acessibilidade”, na
página 363.
Para inserir uma tabela:
1 Na visualização do projeto da janela do documento, colocar o ponto de inserção no local onde

deseja que a tabela seja exibida.
Observação: Se o documento não tiver nenhum conteúdo, o único local para colocar o ponto de inserção será o
início do documento.

• Clique no botão Tabela na categoria Comuns da barra Inserir.
• Selecione Inserir > Tabela.
A caixa de diálogo Inserir tabela é exibida.
3 Digite novos valores conforme desejado.
Como adicionar conteúdo a uma célula da tabela

É possível adicionar textos e imagens às células da tabela do mesmo modo que se adicionam textos e
imagens fora de uma tabela.
Para obter mais informações, consulte o Capítulo 19, “Como inserir e formatar texto”, na
página 291 e Capítulo 20, “Como inserir imagens”, na página 319.
Ao adicionar ou editar o conteúdo de uma tabela, é possível economizar tempo utilizando o
teclado para navegar pela tabela.
Para passar de uma célula a outra utilizando o teclado, seguir um dos procedimentos abaixo:
• Pressione a tecla Tab para passar à célula seguinte.

Ao pressionar Tab na última célula de uma tabela, outra linha é adicionada automaticamente
à tabela.
• Pressione Shift+Tab para voltar à célula anterior.
• Pressione as teclas de seta para mover para cima, para baixo, esquerda ou direita.
242 Capítulo 16
Como importar dados tabulares
Os dados tabulares criados com outro aplicativo (como o Microsoft Excel) e salvos em um
formato de texto delimitado (com itens separados por tabulações, vírgulas, dois-pontos, ponto-e-
vírgula ou outros delimitadores) podem ser importados para o Dreamweaver e formatados como
uma tabela.
Para importar os dados da tabela:

• Escolha Arquivo > Importar > Dados tabulares.
• Escolha Inserir > Objetos de tabela > Importar os dados tabulares.
A caixa de diálogo Importar os dados tabulares é exibida.
2 Na caixa de diálogo, fornecer as informações sobre o arquivo que contém os dados.

Capítulo 34, “Como exibir os registros de bancos de dados”, na página 569
Como selecionar elementos da tabela

É possível selecionar uma tabela, uma linha ou uma coluna inteira ao mesmo tempo. Também é
possível selecionar um bloco contíguo de células dentro de uma tabela. Após selecionar uma
tabela ou células, seguir os procedimentos abaixo:
• Modificar a aparência das células selecionadas ou do texto ali contido. Veja “Formatação de
tabelas e células”, na página 245.
• Copie e colar as células. Veja “Como recortar, copiar e colar células”, na página 253.
Também é possível selecionar várias células não-adjacentes de uma tabela e modificar suas
propriedades. É impossível copiar ou colar conjuntos de células não-adjacentes.
Apresentação do conteúdo com tabelas 243

Para selecionar uma tabela inteira, seguir um dos procedimentos abaixo:
• Clique no canto superior esquerdo da tabela ou em qualquer ponto da extremidade direita

ou inferior.
• Clique em uma célula da tabela e, em seguida, selecione a tag table no seletor de tags, no canto
inferior esquerdo da janela do documento.
• Clique em uma célula da tabela e selecione Modificar > Tabela > Selecionar a tabela.
• Clique em uma célula da tabela e selecione a tag table no inspetor de tags.
Alças de seleção são exibidas nas bordas inferior e direita da tabela selecionada.
Para selecionar linhas ou colunas:
1 Posicionar o ponteiro de forma que aponte para a margem esquerda de uma linha ou para a
margem superior de uma coluna.
2 Quando o ponteiro se transformar em uma seta de seleção, clique para selecionar uma linha ou
coluna ou arrastar para selecionar várias linhas ou colunas.
Para selecionar uma única célula, seguir um dos procedimentos abaixo:
• Clique na célula e, em seguida, selecione a tag td no seletor de tags, no canto inferior esquerdo
da janela do documento.
• Clique na célula e escolher Editar > Selecionar tudo.
Dica: Escolha Editar > Selecionar tudo novamente quando a célula estiver selecionada a fim de selecionar a
tabela inteira.
• Clique em uma célula da tabela e selecione a tag td no inspetor de tags.
244 Capítulo 16
Para selecionar uma linha ou um bloco retangular de células, seguir um dos procedimentos
abaixo:
• Arrastar de uma célula a outra.

• Clique em uma célula e pressionar a tecla Shift ao clicar em outra célula.
Todas as células dentro da região linear ou retangular definida pelas duas células são
selecionadas.
Para selecionar células não-adjacentes:
Manter a tecla Control pressionada e clique nas células, linhas ou colunas que deseja selecionar.
Se as células, linhas ou colunas nas quais o usuário clicar ainda não estiverem selecionadas, elas
serão adicionadas à seleção. Se já tiverem sido selecionadas, serão removidas da seleção.
Formatação de tabelas e células

É possível alterar a aparência das tabelas definindo-se as propriedades da tabela e das células ou
aplicando-se um estilo predefinido à tabela. Veja “Exibição e definição de propriedades da tabela”,
na página 246, “Exibição e definição das propriedades de célula, linha e coluna”, na página 247 e
“Como utilizar um esquema de desenho para formatar uma tabela”, na página 248.
Para formatar o texto nas tabelas, é possível aplicar formatação ao texto selecionado ou utilizar
estilos. Consulte o Capítulo 19, “Como inserir e formatar texto”, na página 291.
Sobre conflitos na formatação de tabelas

Ao formatar tabelas na visualização do projeto, é possível definir propriedades para toda a tabela
ou para linhas, colunas ou células selecionadas da tabela. Quando uma propriedade, como cor de
fundo ou alinhamento, é definida com um valor para toda a tabela e outro valor para células
individuais, a formatação da célula tem precedência sobre a formatação da linha, que, por sua vez,
tem precedência sobre a formação da tabela.
A ordem de precedência para formatação da tabela é esta:
1 Células
2 Linhas
3 Tabela
Por exemplo: se definir a cor de fundo azul para uma única célula e definir a cor de fundo amarelo
para toda a tabela, a célula azul não mudará para a cor amarela, uma vez que a formatação das
células tem precedência sobre a formatação da tabela.
Observação: Quando se definem propriedades em uma coluna, o Dreamweaver modifica os atributos da tag td
correspondente a cada célula da coluna.

Exibição e definição de propriedades da tabela
Quando uma tabela é selecionada, o inspetor de propriedades permite exibir e alterar
propriedades da tabela.
Para exibir as propriedades da tabela:
1 Selecione a tabela.
2 Escolha Janela > Propriedades para abrir o inspetor de propriedades.
Para exibir todas as propriedades da tabela:
Se o inspetor de propriedades não estiver expandido, clique na seta de expansão, no canto inferior
direito, para ver todas as propriedades.
Para formatar uma tabela no inspetor de propriedades:
1 Selecione uma tabela. Para obter mais informações, veja “Como selecionar elementos da
tabela”, na página 243.
3 Alterar a formatação da tabela definindo as propriedades.
Para obter mais informações, clique no botão Ajuda do inspetor de propriedades.
“Como utilizar um esquema de desenho para formatar uma tabela”, na página 248
246 Capítulo 16
Exibição e definição das propriedades de célula, linha e coluna
Quando uma célula ou um conjunto de células é selecionado, o inspetor de propriedades permite
exibir e alterar propriedades da célula.
Observação: Quando se definem propriedades em uma coluna, o Dreamweaver modifica os atributos da tag td
correspondente a cada célula da coluna. Quando se definem certas propriedades para uma linha, no entanto, o
Dreamweaver altera os atributos da tag tr em vez de alterar os atributos de cada tag td da linha. Ao aplicar o
mesmo formato a todas as células de uma linha, a aplicação do formato à tag tr produz um código HTML mais
conciso e limpo.
Para exibir as propriedades dos elementos da tabela:
1 Selecione uma célula ou um conjunto de células em uma linha ou coluna.

Para exibir todas as propriedades da célula, linha ou coluna:
Se o inspetor de propriedades não estiver expandido, clique na seta de expansão, no canto inferior
direito, para ver todas as propriedades.
Para formatar elementos da tabela no inspetor de propriedades:
1 Selecione uma célula, linha ou coluna. Para obter mais informações, veja “Como selecionar
elementos da tabela”, na página 243.
3 Alterar a formatação do elemento da tabela definindo as propriedades.
“Como selecionar elementos da tabela”, na página 243

Como utilizar um esquema de desenho para formatar uma tabela
Utilize o comando Formatar a tabela para aplicar rapidamente um estilo predefinido a uma tabela.
Em seguida, as opções podem ser selecionadas para personalizar o estilo ainda mais.
Observação: Somente as tabelas mais simples podem ser formatadas usando estilos predefinidos. É impossível
utilizar esses estilos para formatar tabelas que contêm células mescladas (colspan ou rowspan), grupos de colunas
ou outras formatações pouco comuns que impedem que a tabela seja uma simples grade retangular de células.
Para utilizar um estilo de tabela predefinido:
1 Selecione a tabela e escolha Comandos > Formatar a tabela.

A caixa de diálogo Formatar a tabela é exibida.
2 Personalizar as opções, conforme desejado.

3 Clique em Aplicar ou em OK para formatar a tabela com o estilo selecionado.
248 Capítulo 16
Como redimensionar tabelas
É possível redimensionar uma tabela inteira ou determinadas linhas e colunas da tabela. Quando
uma tabela inteira é redimensionada, o tamanho de todas as células da tabela é alterado na mesma
proporção.
Observação: Se as células de uma tabela tiverem larguras ou alturas especificadas explicitamente, o
redimensionamento da tabela alterará o tamanho visual das células na janela do documento, mas não modificará as
larguras e alturas especificadas das células.
Para redimensionar uma tabela:
• Para redimensionar a tabela horizontalmente, arraste a alça de seleção à direita.
• Para redimensionar a tabela verticalmente, arraste a alça de seleção da parte inferior.
• Para redimensionar em ambas as dimensões, arraste a alça de seleção no canto inferior direito.
Como alterar a largura da coluna e a altura da linha

É possível alterar a largura de uma coluna ou a altura de uma linha utilizando o inspetor de
propriedades ou arrastando as bordas da coluna ou linha. Também é possível alterar a largura e a
altura da célula diretamente no código HTML utilizando a visualização do código.
Se houver dificuldade para redimensionar a largura das colunas ou altura das linhas, volte e
comece novamente.
Dica: Podem-se especificar larguras e alturas como pixels ou porcentagens e também converter de pixels para
porcentagens e vice-versa. Para obter mais informações, veja “Exibição e definição de propriedades da tabela”, na
página 246.
Para redimensionar uma coluna ou uma linha visualmente, siga um dos procedimentos abaixo:
• Para alterar a largura de uma coluna, selecione a coluna e arrastar sua borda direita.
Se a coluna não for a coluna mais à direita da tabela, a largura da coluna adjacente também
mudará, mantendo a mesma largura geral da tabela. Se a coluna for a coluna mais à direita, a
largura da tabela como um todo será alterada e todas as colunas aumentarão ou diminuirão na
mesma proporção.
• Para alterar a altura de uma linha, selecione a linha e arrastar sua borda inferior.
Para definir a largura de uma coluna ou a altura de uma linha utilizando o inspetor de
propriedades:
1 Selecione a coluna ou linha.

3 Alterar a formatação do elemento da tabela definindo as propriedades.

Para limpar todas as larguras ou alturas definidas:
• Para remover todas as larguras especificadas, escolha Modificar > Tabela > Limpar as larguras
das células ou clique no botão Limpar as larguras das colunas, no inspetor de propriedades.
• Para remover todas as alturas especificadas, escolha Modificar > Tabela > Limpar as alturas das
células ou clique no botão Limpar as alturas das linhas, no inspetor de propriedades.
“Como redimensionar tabelas”, na página 249
“Codificação no Dreamweaver”, na página 201
Como adicionar e remover linhas e colunas

Para adicionar e remover linhas e colunas, utilize os comandos do submenu Modificar > Tabela.
Dica: Ao pressionar Tab na última célula de uma tabela, outra linha é adicionada automaticamente à tabela.
Para adicionar linhas ou colunas:
1 Clique em uma célula.

• Para adicionar uma linha acima da célula atual, escolha Modificar > Tabela > Inserir linha.
• Para adicionar uma coluna à esquerda da célula atual, escolha Modificar > Tabela > Inserir
coluna.
• Para adicionar várias linhas ou colunas de uma vez ou para adicionar uma linha abaixo da
célula atual ou uma coluna à direita dela, escolha Modificar > Tabela > Inserir linhas
ou colunas.
A caixa de diálogo Inserir linhas ou colunas é exibida.
3 Se a opção Inserir linhas ou colunas for escolhida, insira as informações necessárias na caixa de
diálogo e clique em OK.
Para excluir uma linha ou coluna:
1 Clique em uma célula dentro da linha ou coluna a ser excluída.

• Para excluir uma linha, escolher Modificar > Tabela > Excluir a linha.
• Para excluir uma coluna, escolher Modificar > Tabela > Excluir a coluna.
Dica: Como opção, é possível selecionar uma linha ou coluna completa e escolher Editar > Limpar ou pressionar a
tecla Delete para remover toda a linha ou coluna da tabela.
250 Capítulo 16
Para adicionar ou excluir linhas ou colunas utilizando o inspetor de propriedades:
1 Selecione a tabela inteira.

2 No inspetor de propriedades, siga um dos procedimentos abaixo:
• Aumente ou diminua o valor Linhas para adicionar ou excluir linhas.
O Dreamweaver permite adicionar e remover linhas na parte inferior da tabela.
• Aumente ou diminua o valor Cols para adicionar ou excluir colunas.
O Dreamweaver adiciona e remove colunas à direita da tabela.
Observação: O Dreamweaver não avisa quando as linhas ou colunas que contêm dados estão sendo excluídas.
“Como inserir uma tabela repetitiva”, na página 481
“Como exibir diversos registros”, na página 576
Como dividir e mesclar células

Utilize o inspetor de propriedades ou os comandos do submenu Modificar > Tabela para
dividir ou mesclar células. É possível mesclar qualquer número de células adjacentes (contanto
que a seleção inteira seja uma linha ou um retângulo de células) para produzir uma única célula
abrangendo diversas colunas ou linhas. É possível dividir uma célula em várias linhas ou colunas,
independentemente de ela já ter sido mesclada. O Dreamweaver reestrutura automaticamente a
tabela (adicionando os atributos COLSPAN ou ROWSPAN necessários) para criar o formato especificado.
Na ilustração a seguir, as células no meio das duas primeiras linhas foram mescladas, de forma a
abrangerem duas linhas.
Como método alternativo para mesclar e dividir células, o Dreamweaver também fornece
ferramentas para aumentar e diminuir o número de linhas ou colunas estendidas por uma célula.

Para mesclar duas ou mais células de uma tabela:
1 Selecione as células. As células selecionadas devem ser contíguas e ter formato retangular.
Na ilustração a seguir, a seleção é um retângulo de células, por isso elas podem ser mescladas.
Na ilustração a seguir, a seleção não é retangular, por isso as células não podem ser mescladas.
2 Escolha Modificar > Tabela > Mesclar as células ou clique no botão Mesclar as células, no
inspetor de propriedades.
O conteúdo das células individuais é colocado na célula mesclada resultante. As propriedades
da primeira célula selecionada são aplicadas à célula mesclada.
Para dividir uma célula:
1 Clique na célula.
2 Escolha Modificar > Tabela > Dividir a célula ou clique no botão Dividir a célula, no inspetor
de propriedades.
3 Na caixa de diálogo Dividir a célula, especificar o modo como a célula deve ser dividida.
Para aumentar ou diminuir o número de linhas ou colunas estendidas por uma célula:
1 Selecione uma célula.

2 Escolha Modificar > Tabela > Aumentar a extensão da linha ou Modificar > Tabela > Aumentar
a extensão da coluna ou Modificar > Tabela > Diminuir a extensão da linha ou Modificar >
Tabela > Diminuir a extensão da coluna.
252 Capítulo 16
Como aninhar tabelas
Uma tabela aninhada é uma tabela dentro de uma célula de outra tabela. É possível formatar uma
tabela aninhada como qualquer outra tabela; contudo, sua largura está limitada pela largura da
célula na qual é exibida.
Para aninhar uma tabela na célula de uma tabela:
1 Clique em uma célula da tabela existente.

2 Selecione Inserir > Tabela.
3 Na caixa de diálogo Inserir tabela, especifique as propriedades desejadas para a tabela aninhada e
clique em OK.
Como recortar, copiar e colar células

É possível recortar, copiar ou colar uma única célula da tabela ou diversas células de uma só vez.
conservando sua formatação.
As células podem ser coladas no ponto de inserção ou no lugar de uma seleção feita em uma tabela
existente. Para colar diversas células da tabela, o conteúdo da área de transferência deve ser
compatível com a estrutura da tabela ou da seleção da tabela na qual as células serão coladas.

Para recortar ou copiar células da tabela:
1 Selecione uma ou mais células da tabela. As células selecionadas devem ser contíguas e ter
formato retangular.
Na ilustração a seguir, a seleção é um retângulo de células, por isso as células podem ser recortadas
ou copiadas.
Na ilustração a seguir, a seleção não é um retângulo, por isso as células não podem ser
recortadas ou copiadas.
2 Recortar ou copiar as células utilizando Editar > Recortar ou Editar > Copiar.
Se uma linha ou coluna inteira tiver sido selecionada e a opção Editar > Recortar tiver sido
escolhida, a linha ou coluna inteira será removida da tabela (não apenas o conteúdo das
células).
Para colar as células da tabela:
1 Escolha onde deseja colar as células.

• Para substituir as células existentes pelas células que estão sendo coladas, selecione um conjunto
de células existentes com o mesmo layout das células que estão na área de transferência. Por
exemplo: se um bloco de células 3 x 2 for copiado ou recortado, é possível selecionar outro
bloco de células 3 x 2 para substituir aquele por colagem.
• Para colar uma linha inteira de células acima de uma determinada célula, clique nesta célula.
• Para colar uma coluna inteira de células à esquerda de uma determinada célula, clique nesta
célula.
• Para criar uma nova tabela com as células coladas, colocar o ponto de inserção fora da tabela.
Observação: Se houver menos de uma linha ou coluna inteira de células na área de transferência e o usuário
clicar em uma célula e colar as células da área de transferência, a célula clicada e as células vizinhas poderão ser
substituídas pelas células que estão sendo coladas (dependendo de sua posição na tabela).
254 Capítulo 16
2 Escolha Editar > Colar.
Se forem coladas linhas ou colunas inteiras em uma tabela existente, elas serão adicionadas à
tabela. Se estiver colando um célula separada, o conteúdo da célula selecionada será
substituído. Se a colagem tiver que ser feita fora de uma tabela, as linhas, colunas ou células
serão utilizadas para definir uma nova tabela.
Para remover o conteúdo das células e mantê-las intactas:
1 Selecione uma ou mais células (certifique-se de que a seleção não é formada totalmente por
linhas ou colunas completas).
2 Escolha Editar > Limpar ou pressionar a tecla Delete.
Observação: Se forem selecionadas somente linhas ou colunas completas ao escolher Editar > Limpar ou ao
pressionar a tecla Delete, as linhas ou colunas inteiras serão removidas da tabela (e não somente seu conteúdo).
Para excluir linhas ou colunas que contêm células mescladas:
1 Selecione a linha ou coluna a ser excluída.

2 Escolha Modificar > Tabela > Excluir a linha ou Modificar > Tabela > Excluir a coluna.
Como ordenar tabelas

É possível ordenar as linhas de uma tabela com base no conteúdo de uma única coluna. Também
é possível fazer uma ordenação mais complexa da tabela com base no conteúdo de duas colunas.
É impossível ordenar tabelas que contêm os atributos COLSPAN ou ROWSPAN, ou seja, aquelas que
comportam células mescladas (para obter mais informações, veja “Como dividir e mesclar
células”, na página 251).
Para ordenar uma tabela:
1 Selecione a tabela (ou clique em uma célula qualquer).

2 Escolha Comandos > Ordenar a tabela.
A caixa de diálogo Ordenar a tabela é exibida.
3 Na caixa de diálogo Ordenar a tabela, especificar o modo como a tabela deve ser ordenada.

Como exportar dados da tabela
É possível exportar dados da tabela do Dreamweaver para um arquivo de texto com o conteúdo
das células adjacentes separado por um delimitador. É possível utilizar vírgulas, dois-pontos,
ponto-e-vírgulas ou espaços como delimitadores.
Quando uma tabela é exportada, toda ela é exportada; é impossível selecionar partes de uma
tabela para exportação. Se desejar exportar somente alguns dados de uma tabela (por exemplo: as
seis primeiras linhas ou as seis primeiras colunas), copie as células que contêm os dados, cole-as
fora da tabela (para criar uma nova tabela) e exporte a nova tabela.
Para exportar uma tabela:
1 Coloque o ponto de inserção em qualquer célula da tabela.

2 Escolha Arquivo > Exportar > Tabela.
A caixa de diálogo Exportar tabela é exibida.
3 Na caixa de diálogo Exportar tabela, especifique opções para exportar a tabela.

4 Clique em Exportar.
5 Na caixa de diálogo que for exibida, digite um nome para o arquivo e clique em Salvar.
256 Capítulo 16
CAPÍTULO 17
Definição do layout de páginas na
visualização de layout
O Dreamweaver oferece várias maneiras diferentes de definir o layout de páginas da Web.

Um método comum de se criar um layout de página consiste na utilização de tabelas HTML para
posicionar os elementos. No entanto, pode ser difícil utilizar tabelas para layouts, pois elas foram
criadas originalmente para exibir dados tabulares e não para definir o layout de páginas da Web.
Para dinamizar o processo de utilização de tabelas para o layout de página, o Dreamweaver fornece a
visualização de layout. Na visualização de layout, é possível criar uma página utilizando tabelas
como a estrutura básica, ao mesmo tempo em que se evitam alguns dos problemas que ocorrem com
freqüência na criação de projetos baseados em tabelas através dos meios convencionais. Por
exemplo: na visualização de layout, é possível desenhar células de layout na página e movê-las para
qualquer local desejado. Também é possível criar facilmente layouts de largura fixa e layouts que
podem ser automaticamente expandidos de acordo com a largura total da janela do navegador (veja
“Definição da largura de colunas”, na página 267).
Ainda é possível dispor as páginas utilizando tabelas segundo a maneira tradicional (veja
“Apresentação do conteúdo com tabelas”, na página 241) ou utilizando camadas e, depois,
convertendo-as em tabelas (veja “Utilização de tabelas e camadas para o layout”, na página 418). No
entanto, a visualização de layout é a maneira mais fácil de configurar o layout da página.
Observação: Na visualização de layout, é impossível utilizar as ferramentas Inserir tabela e Desenhar camada como
na visualização padrão. Para utilizar estas ferramentas, é necessário primeiro alternar para a visualização padrão.

• “Sobre as células e tabelas de layout”, na página 258
• “Como entrar e sair da visualização de layout”, na página 259
• “Como desenhar células e tabelas de layout”, na página 259
• “Como adicionar conteúdo a uma célula de layout”, na página 263
• “Como mover e redimensionar células e tabelas de layout”, na página 264
• “Como formatar células e tabelas de layout”, na página 266
• “Definição da largura de colunas”, na página 267
• “Definição das preferências de visualização de layout”, na página 271
257
Sobre as células e tabelas de layout
Na visualização de layout, é possível definir o layout de uma página antes de adicionar o
conteúdo. Por exemplo: é possível desenhar uma célula na parte superior da página para conter
um gráfico de cabeçalho, outra célula no lado esquerdo da página para conter uma barra de
navegação e uma terceira célula, à direita, para o conteúdo.
(Outro método consiste em desenhar cada célula apenas quando estiver pronto para inserir
conteúdo ali. Este método proporciona maior flexibilidade, pois mantém mais espaço em branco
na tabela de layout durante um maior período de tempo, o que confere maior facilidade para
mover ou redimensionar células).
Ao desenhar uma célula de layout fora de uma tabela de layout, o Dreamweaver cria
automaticamente uma tabela de layout como um recipiente para a célula. Uma célula de layout
não pode existir fora de uma tabela de layout.
É possível definir o layout de uma página utilizando várias células de layout dentro de uma tabela
de layout - que é o método mais comum para a definição do layout de uma página na Web - ou
utilizar diversas tabelas de layout para layouts mais complexos. O uso de diversas tabelas de layout
isola seções do layout, de modo que não possam ser afetadas por alterações feitas em outras seções.
Também é possível aninhar tabelas de layout ao inserir uma nova tabela de layout dentro de uma
tabela existente. Esta estrutura permite simplificar a estrutura da tabela quando as linhas ou coluna
em uma parte do layout não estiveram alinhadas com as linhas ou colunas em outra parte do layout.
Por exemplo: ao utilizar tabelas de layout aninhadas seria possível criar facilmente um layout com
duas colunas e quatro linhas na coluna esquerda e três linhas na coluna direita. Para obter mais
informações, veja “Como desenhar uma tabela de layout aninhada”, na página 261.
258 Capítulo 17
Como entrar e sair da visualização de layout
Para poder desenhar tabelas de layout ou células de layout, é necessário alternar da visualização
padrão para a visualização de layout.
Dica: Se o usuário criar uma tabela na visualização padrão e depois alternar para a visualização de layout, a tabela
de layout resultante poderá conter células de layout vazias. Talvez seja preciso excluir essas células de layout vazias
para poder criar novas células de layout ou mover as célula de layout pela tabela. Ao criar um novo layout para ser
editado na visualização de layout, é mais fácil criar a tabela na visualização de layout em vez de criá-la na
visualização padrão.
Para passar à visualização de layout:
1 Se a visualização do projeto não estiver visível, escolha Exibir > Projeto ou Exibir > Código e
projeto.
A visualização de layout não pode ser ativada ou desativada na visualização do código.
2 Selecione Exibir > Visualização de tabelas > Visualização de layout ou clique no botão
Visualização de layout na categoria Layout da barra Inserir (na área de trabalho de quatro
estilos flutuantes do Dreamweaver, com uma barra Inserir vertical, os itens relativos ao layout
são exibidos na parte inferior do painel e não em uma categoria distinta).
Uma barra cinza denominada Visualização de layout é exibida na parte superior da visualização
do projeto para indicar que o usuário está na visualização de layout. Se houver tabelas nesta
página, serão exibidas como tabelas de layout.
Para sair da visualização de layout:
1 Se a visualização do projeto não estiver visível, escolher Exibir > Projeto ou Exibir > Código e
projeto.
A visualização de layout não pode ser ativada ou desativada na visualização do código.
2 Selecione Exibir > Visualização de tabelas> Visualização padrão ou clique no botão
Visualização padrão na categoria Layout da barra Inserir.
Como desenhar células e tabelas de layout

É possível desenhar células e tabelas de layout na página enquanto se está na visualização de
layout. Ao desenhar uma célula de layout fora de uma tabela de layout, o Dreamweaver cria
automaticamente uma tabela de layout como um recipiente para a célula. Uma célula de layout
não pode existir fora de uma tabela de layout.
Observação: Quando o Dreamweaver cria uma tabela de layout de modo automático, a tabela é exibida
inicialmente para preencher toda a visualização do projeto, mesmo que o tamanho da janela do documento seja
alterado. Esta tabela de layout padrão que ocupa todo o espaço da janela permite desenhar células de layout em
qualquer local na visualização do projeto. É possível definir um tamanho específico para a tabela clicando na borda
da tabela e arrastando suas alças de redimensionamento.
Para desenhar uma célula de layout:
1 Certifique-se de estar na visualização de layout (veja “Como entrar e sair da visualização de

layout”, na página 259) e, em seguida, clique no botão Desenhar a célula de layout na categoria
Layout da barra Inserir (na área de trabalho de quatro estilos flutuantes do Dreamweaver, com
uma barra Inserir vertical, os itens relativos ao layout são exibidos na parte inferior do painel e
não em uma categoria distinta).
O ponteiro do mouse se transforma em um sinal de adição (+).
Definição do layout de páginas na visualização de layout 259

2 Posicione o ponteiro onde deseja iniciar a célula na página e arraste-o para criar a célula de
layout. Para criar várias células sem precisar clicar no botão Desenhar a célula de layout
repetidamente, crie a célula de layout pressionando a tecla Control ao arrastar.
A célula será exibida contornada em azul na página (azul é a cor de contorno padrão para células
de layout. Para alterar as cores de contorno, veja “Definição das preferências de visualização de
layout”, na página 271). A largura de cada célula é exibida na área de cabeçalho da coluna, na
parte superior da coluna, se as guias da tabela de layout estiverem visíveis (veja “Definição das
preferências de visualização de layout”, na página 271). Para obter mais informações sobre
larguras de colunas, veja “Definição da largura de colunas”, na página 267.
É exibida uma grade de linhas claras que se estende das extremidades da nova célula de layout para
as extremidades da tabela de layout que a contém. Estas linhas ajudam a alinhar as novas células às
células antigas e visualizar a estrutura da tabela HTML oculta.
No Dreamweaver, as extremidades das novas células são alinhadas automaticamente com as
extremidades das células existentes (as células de layout não podem ser sobrepostas). As
extremidades da célula também se encaixam automaticamente às extremidades da tabela de layout
que contém a célula se uma célula for desenhada próxima à extremidade de uma tabela. Para
desativar temporariamente o encaixe, manter pressionada a tecla Alt ao desenhar a célula.
Para desenhar uma tabela de layout:
1 Certifique-se de estar na visualização de layout. Depois, seguir um dos procedimentos abaixo:

• Para desenhar uma tabela de layout, clique no botão Desenhar a tabela de layout na categoria
Layout da barra Inserir. O ponteiro do mouse se transforma em um sinal de adição (+).
• Para desenhar mais de uma tabela de layout sem precisar clicar repetidamente no botão
Desenhar a tabela de layout, manter a tecla Control pressionada e clique neste botão. Ao
terminar de desenhar a tabela de layout, é possível criar imediatamente uma outra tabela.
2 Posicionar o ponteiro do mouse na página e arrastá-lo para criar a tabela de layout.
Se não houver nenhum outro conteúdo na página, a nova tabela será posicionada
automaticamente no canto superior esquerdo desta.
A tabela é exibida com um contorno verde na página (verde é a cor de contorno padrão para
tabelas de layout. Para alterar as cores de contorno, veja “Definição das preferências de
visualização de layout”, na página 271). Uma guia denominada Tabela de layout é exibida na parte
superior de cada tabela desenhada para ajudar a selecioná-la e distingui-la de outros elementos da
página.
A largura da tabela (em pixels ou como porcentagem da largura da página) é exibida na área de
cabeçalho da coluna, na parte superior da tabela, se as guias da tabela de layout estiverem visíveis
(veja “Definição das preferências de visualização de layout”, na página 271). Para obter mais
informações sobre larguras de tabela e de colunas, veja “Definição da largura de colunas”, na
página 267.
260 Capítulo 17
É possível criar uma tabela de layout em uma área vazia do layout da página ou ao redor de células
e tabelas de layout existentes ou mesmo aninhada em uma tabela de layout existente. As tabelas
não podem se sobrepor umas às outras, mas uma tabela pode ser totalmente inserida em outra
tabela. Para obter mais informações, veja “Como desenhar uma tabela de layout aninhada”, na
página 261.
Dica: É impossível desenhar uma tabela de layout próxima a um conteúdo existente. Se a página já tiver conteúdo,
é possível desenhar uma nova tabela de layout somente abaixo da parte inferior do conteúdo existente. Se tentar
desenhar uma tabela de layout sob um conteúdo existente, mas se o ponteiro não disponível surgir, tentar
redimensionar a janela do documento para aumentar o espaço em branco entre a parte inferior do conteúdo
existente e a parte inferior da janela.
Como desenhar uma tabela de layout aninhada

É possível desenhar uma tabela de layout dentro de outra tabela de layout para criar uma tabela
aninhada. As células internas de uma tabela aninhada não podem ser modificadas em relação à
tabela externa; por exemplo: ao modificar o tamanho de uma linha ou coluna na tabela externa, o
tamanho das células da tabela interna não é modificado.
É possível inserir diversos níveis de tabelas aninhadas. Uma tabela de layout aninhada não pode
ser maior do que a tabela que a contém.
Observação: Se uma tabela de layout for desenhada no centro da página antes de uma célula de layout ser
desenhada, a tabela desenhada será aninhada automaticamente dentro de uma tabela maior.
Para desenhar uma tabela de layout aninhada:
1 Certifique-se de estar na visualização de layout e, em seguida, clique no botão Desenhar a

tabela de layout na categoria Layout da barra Inserir.
2 Aponte para qualquer área vazia (cinza) em uma tabela de layout existente e, em seguida, arrastar
para criar a tabela de layout aninhada.
Observação: É impossível criar uma tabela de layout dentro de uma célula de layout. Só é possível criar uma
tabela de layout aninhada em uma área vazia de uma tabela de layout existente ou ao redor de células existentes.

Para desenhar uma tabela de layout ao redor de células ou tabelas de layout já existentes:
1 Certifique-se de estar na visualização de layout e, em seguida, clique no botão Desenhar a

tabela de layout na categoria Layout da barra Inserir.
2 Arraste o ponteiro para desenhar um retângulo ao redor de um conjunto de células ou tabelas
de layout existentes.
É exibida uma tabela de layout aninhada, incluindo as células ou tabelas existentes.
Dica: Para encaixar perfeitamente uma célula de layout em uma das bordas da nova tabela aninhada, começar a
arrastá-la próximo à borda da célula. A borda da nova tabela se encaixará à borda da célula. É impossível arrastar
do centro de uma célula de layout, pois não se pode criar uma tabela de layout inteiramente no interior de uma
célula de layout.
Como encaixar células de layout na grade

É possível ativar a grade do Dreamweaver para servir como um guia visual ao desenhar o layout. À
medida que os elementos da página forem movidos, é possível encaixá-los automaticamente na
grade e alterá-la ou controlar o comportamento de encaixe especificando definições da grade. O
encaixe funciona independentemente da visibilidade da grade.
Para mostrar ou ocultar a grade:
Escolha Exibir > Grade > Mostrar a grade.
Para ativar ou desativar o encaixe:
Escolha Exibir > Grade > Encaixar na grade.
Para alterar as definições da grade:
1 Escolha Exibir > Grade > Definições da grade.

A caixa de diálogo Definições da grade é exibida.
2 Defina as opções, conforme desejado.

3 Clique em OK.
262 Capítulo 17
Como adicionar conteúdo a uma célula de layout
É possível adicionar texto, imagens e outros tipos de conteúdo às células de layout na visualização
de layout, do mesmo modo que o conteúdo é adicionado às células da tabela na visualização
padrão. Clique na célula onde deverá ser adicionado o conteúdo e, em seguida, digite o texto ou
inserir outro conteúdo.
É possível inserir conteúdo apenas em uma célula de layout, mas não em uma área vazia (cinza) de
uma tabela de layout. Desse modo, para poder adicionar conteúdo, é necessário primeiro criar as
células de layout (veja “Como desenhar células e tabelas de layout”, na página 259).
Ao adicionar conteúdo maior do que a célula, a célula de layout se expandirá automaticamente. À
medida que a célula se expande, a coluna onde a célula está localizada também se expande, o que
pode alterar o tamanho da células circunvizinhas. A área de cabeçalho dessa coluna modifica-se para
mostrar a largura que aparece no código, seguido pela largura visual da coluna (a largura do modo
como é exibido na tela do usuário) entre parênteses (para obter mais informações sobre larguras de
colunas, veja “Definição da largura de colunas”, na página 267).
Para adicionar texto a uma célula de layout:
Coloque o ponto de inserção na célula de layout em que deseja adicionar texto e seguir um dos
• Digite o texto na célula. A célula se expande automaticamente à medida que um texto é
digitado, se necessário.
• Colar o texto copiado de outro documento. Utilize o comando Colar. Para obter mais
informações, veja “Como inserir e formatar texto HTML”, na página 291.
Para adicionar uma imagem a uma célula de layout:
1 Coloque o ponto de inserção na célula de layout em que deseja adicionar a imagem.

• Clique no botão Inserir imagem, na categoria Comuns da barra Inserir.
• Escolha Inserir > Imagem.
3 Na caixa de diálogo Selecionar a imagem, escolher um arquivo de imagem.
Para obter mais informações, veja “Como inserir uma imagem”, na página 320.

Como limpar automaticamente as alturas das células
Ao criar uma célula de layout, o Dreamweaver especifica automaticamente uma altura para a
célula, de modo que ela seja exibida com a altura selecionada mesmo que estiver vazia. Após
inserir conteúdo na célula, não será mais preciso especificar a altura; por isso é possível remover da
tabela as alturas da célula.
Para limpar as alturas da célula, seguir um dos procedimentos abaixo:
• Selecione Limpar as alturas das células no menu de cabeçalho da coluna.

O Dreamweaver limpa todas as alturas especificadas na tabela. Algumas células da tabela
podem encolher verticalmente.
• Selecione uma tabela de layout, clicando na guia exibida na parte superior da tabela, e clique no
botão Limpar as alturas das colunas, no inspetor de propriedades.
O Dreamweaver limpa todas as alturas especificadas na tabela.
Como mover e redimensionar células e tabelas de layout

Para ajustar o layout da página, é possível mover e redimensionar células de layout e tabelas de
layout aninhadas (a parte externa da tabela só pode ser redimensionada).
As células de layout não podem ser sobrepostas. É impossível mover ou redimensionar uma célula
para que ela ultrapasse os limites da tabela de layout que a contém. Uma célula de layout não pode
ser reduzida a um tamanho menor do que seu conteúdo.
Uma tabela de layout não pode ser redimensionada a um tamanho menor do que o menor
retângulo que contém todas as suas células. Uma tabela de layout também não pode ser
redimensionada de modo que sobreponha outras tabelas ou células.
Para redimensionar uma célula de layout:
1 Selecione uma célula clicando em uma extremidade desta ou mantendo a tecla Control
pressionada e clique em qualquer local da célula.
São exibidas alças de seleção ao redor da célula.
264 Capítulo 17
2 Arrastar uma alça de seleção para redimensionar a célula.
As extremidades da célula encaixam-se automaticamente para se alinhar com as extremidades

de outras células.
Para mover uma célula de layout:
São exibidas alças de seleção ao redor da célula.
• Arraste a célula para outro local dentro da tabela de layout.
• Pressione as teclas de seta para mover a célula 1 pixel por vez. Mantenha pressionada a tecla
Shift ao utilizar as teclas de seta para mover a célula 10 pixels de cada vez.
Para redimensionar uma tabela de layout:
1 Selecione uma tabela clicando na guia, na parte superior da tabela.

São exibidas alças de seleção ao redor da tabela.
2 Arraste as alças de seleção para redimensionar a tabela.
As extremidades da tabela encaixam-se automaticamente para se alinhar com as extremidades
de outras células e tabelas.
Para mover uma tabela de layout:
1 Selecione uma tabela clicando na guia, na parte superior da tabela.

São exibidas alças de seleção ao redor da tabela.
• Arraste a tabela para outro local na página.
Observação: É possível mover uma tabela de layout somente se ela estiver aninhada no interior de outra tabela
de layout.
• Pressione as teclas de seta para mover a tabela 1 pixel por vez. Mantenha pressionada a tecla
Shift ao utilizar as teclas de seta para mover a tabela 10 pixels de cada vez.
Tópico relacionado
Para utilizar a grade do Dreamweaver como guia ao mover ou redimensionar as células e tabelas,
veja “Como encaixar células de layout na grade”, na página 262.

Como formatar células e tabelas de layout
É possível alterar a aparência de qualquer célula ou tabela de layout utilizando o inspetor de
propriedades.
Como formatar células de layout

É possível definir vários atributos de uma célula de layout no inspetor de propriedades, incluindo
largura e altura, cor de fundo e alinhamento do conteúdo da célula.
Para formatar uma célula de layout no inspetor de propriedades:
2 Abra o inspetor de propriedades escolhendo Janela > Propriedades.
3 Modifique a formatação da célula definindo as propriedades.
Como formatar tabelas de layout

É possível definir vários atributos de uma tabela de layout no inspetor de propriedade, incluindo
largura, altura, preenchimento e espaçamento.
Para formatar uma tabela de layout:
1 Selecione uma tabela clicando na parte superior desta ou clicando na tag <table> do seletor de
tags.
2 Abra o inspetor de propriedades escolhendo Janela > Propriedades.
3 Altere a formatação da tabela definindo as propriedades.
266 Capítulo 17
Definição da largura de colunas
Uma coluna na visualização de layout pode ter uma largura fixa ou uma largura que se expande
automaticamente para preencher o máximo possível a janela do navegador (“alongamento
automático”). As informações sobre largura são exibidas na área de cabeçalho da coluna, na parte
superior de cada coluna da tabela selecionada, se as guias da tabela de layout estiverem visíveis
(veja “Definição das preferências de visualização de layout”, na página 271).
Uma coluna com largura fixa tem uma largura numérica específica, como 300 pixels, sendo que a
largura é exibida na área de cabeçalho da coluna (a menos que a coluna seja muito estreita para
exibir os números). A largura de uma coluna com alongamento automático é modificada
automaticamente, dependendo da largura da janela do navegador. A área de cabeçalho da coluna
de uma coluna com alongamento automático mostra uma linha ondulada em vez de um número.
Se o layout incluir uma coluna com alongamento automático, ele sempre preencherá a largura
inteira da janela do navegador do visitante.
Observação: A largura especificada para uma coluna é aplicada a todas as células dessa coluna.
É possível fazer com que somente uma coluna de uma determinada tabela de layout seja alongada
automaticamente. Um método de layout comum consiste em provocar o alongamento
automático da coluna que comporta o conteúdo principal da página, o que define
automaticamente todas as outras colunas para uma largura fixa.
Por exemplo: suponha que o layout tenha uma imagem grande à esquerda da página e uma coluna
de texto à direita. É possível definir a coluna da esquerda com uma largura fixa e provocar o
alongamento automático da área da barra lateral.

Ao provocar o alongamento automático de uma coluna, o Dreamweaver insere imagens espaçadoras
nas colunas com largura fixa para assegurar que essas colunas tenham a largura apropriada, a menos
que seja especificado que nenhuma imagem espaçadora deva ser utilizada. Uma imagem espaçadora
é uma imagem transparente utilizada para controlar o espaçamento, mas não fica visível na janela do
navegador. Para obter mais informações, veja “Como utilizar imagens espaçadoras”, na página 269.
Observação: Provocar o alongamento automático de uma coluna antes de o layout estar completo pode causar
efeitos inesperados sobre o layout da tabela. Para evitar que as colunas se tornem mais largas ou estreitas além do
esperado, finalizar o layout e utilizar imagens espaçadoras antes de provocar o alongamento automático de uma
coluna (no entanto, se cada coluna comporta outro conteúdo que mantém a coluna com a largura desejada, não é
necessário utilizar imagens espaçadoras).
Às vezes, a largura visual de uma coluna no modo como é exibida na visualização de layout não
corresponde à largura especificada no código HTML. Nesse caso, são exibidos dois números na
área de cabeçalho da coluna. (Para obter mais informações sobre larguras inconsistentes, clique no
botão Ajuda do inspetor de propriedades da tabela de layout.)
Para provocar o alongamento automático de uma coluna, seguir um dos procedimentos abaixo:
• Na área de cabeçalho da coluna, na parte superior de uma coluna de largura fixa, selecione
Provocar o alongamento automático da coluna no menu do cabeçalho da coluna. É possível
alongar automaticamente apenas uma coluna de uma determinada tabela.
• Selecione uma célula da coluna clicando em uma extremidade da célula ou mantendo a tecla
Control pressionada ou clique em qualquer local da célula. Em seguida, no inspetor de
propriedades, clique em Alongamento automático.
268 Capítulo 17
Para definir uma largura fixa para a coluna, seguir um dos procedimentos abaixo:
• Na área de cabeçalho da coluna, na parte superior de uma coluna com alongamento

automático, selecione Tornar fixa a largura da coluna no menu do cabeçalho da coluna.
A opção Tornar fixa a largura da coluna especifica uma largura para a coluna (no código) que
corresponde à largura visual da coluna.
• Selecione uma célula da coluna clicando em uma extremidade da célula ou mantendo a tecla
Control pressionada e clique em qualquer local da célula. Em seguida, no inspetor de
propriedades, clique na opção Fixa e digitar um valor numérico.
Se o usuário inserir um valor numérico menor que a largura do conteúdo da coluna, o
Dreamweaver definirá automaticamente a largura para corresponder à largura do conteúdo.
Para definir a largura das células conforme especificado pelo código HTML para corresponder à
largura visual das células:
Selecione Tornar consistentes as larguras das células no menu de cabeçalho de qualquer coluna.
“Definição das preferências de visualização de layout”, na página 271
Como utilizar imagens espaçadoras

Uma imagem espaçadora (também conhecida como GIF de espaçamento) é uma imagem
transparente utilizada para controlar o espaçamento em tabelas com alongamento automático.
Uma imagem espaçadora consiste em uma imagem GIF transparente de um único pixel alongada
para ter um número específico de pixels. O navegador não pode desenhar uma coluna da tabela
mais estreita do que a imagem mais larga contida em uma célula daquela coluna, por isso colocar
uma imagem espaçadora em uma coluna da tabela requer que os navegadores mantenham a
coluna ao menos com a mesma largura da imagem.
O Dreamweaver adiciona automaticamente imagens espaçadoras ao definir uma coluna para
alongamento automático, a menos que seja determinado que nenhuma imagem espaçadora deva
ser utilizada. É possível inserir e remover imagens espaçadoras manualmente em cada coluna, se
preferir. As colunas que contêm imagens espaçadoras têm uma barra dupla na área de cabeçalho
da coluna.
Observação: Se preferir não utilizar imagens espaçadoras em tabelas com alongamento automático, as colunas de
largura fixa poderão ter seus tamanhos alterados ou mesmo poderão desaparecer completamente da visualização
do projeto se não comportarem conteúdo (as colunas continuarão existindo no código, mesmo que não sejam
exibidas na visualização do projeto).
Ao inserir uma imagem espaçadora em uma coluna ou definir o alongamento automático para a
coluna, é exibida uma caixa de diálogo perguntando como você deseja configurar o arquivo da
imagem espaçadora. Se uma imagem espaçadora já tiver sido definida para o site nas preferências
do Dreamweaver, a caixa de diálogo não será exibida (veja “Definição das preferências de
visualização de layout”, na página 271).
É possível inserir e remover manualmente as imagens espaçadoras de colunas específicas ou
remover todas as imagens espaçadoras da página.

Para configurar uma imagem espaçadora:
1 Defina uma coluna com alongamento automático ou escolha Adicionar imagem espaçadora no
menu de cabeçalho da coluna.
A caixa de diálogo Escolha a imagem espaçadora é exibida.

2 Escolha uma imagem das opções.
3 Clique em OK.
Para inserir uma imagem espaçadora em uma coluna:
Selecione Adicionar imagem espaçadora no menu de cabeçalho da coluna.

A imagem espaçadora é inserida na coluna. A imagem não fica visível, mas a coluna pode
apresentar uma pequena mudança de forma; além disso, uma barra dupla é exibida na parte
superior para indicar que a coluna contém uma imagem espaçadora.
Para remover uma imagem espaçadora de uma coluna:
Selecione Remover a imagem espaçadora no menu de cabeçalho da coluna.

A imagem espaçadora é removida. A coluna pode mudar.
Para remover todas as imagens espaçadoras de uma tabela:
Siga um dos procedimentos abaixo:

• Selecione Remover todas as imagens espaçadoras do menu de cabeçalho da coluna de qualquer
coluna da tabela.
• Clique no botão Remover todos os espaçadores do inspetor de propriedades da tabela de
layout.
O layout de toda a tabela pode ser modificado. Se algumas colunas não comportarem conteúdo,
elas poderão desaparecer completamente da visualização do projeto.
270 Capítulo 17
Definição das preferências de visualização de layout
Utilize a categoria Visualização de layout, na caixa de diálogo Preferências, para especificar
informações sobre arquivos de imagens espaçadoras e sobre as cores que o Dreamweaver utiliza
para desenhar tabelas de layout e células de layout.
Por padrão, a guia denominada Tabela de layout é exibida na parte superior de cada tabela de
layout na visualização de layout e um conjunto de controles de largura de coluna é exibido na
parte superior da tabela de layout que está selecionada. Se preferir, é possível ocultar as guias e
controles.
Observação: Mesmo quando as guias estão visíveis, a tabela de layout na parte superior da página não exibe uma
guia quando selecionada. A guia da tabela de layout na parte superior da página somente é exibida quando a tabela
não está selecionada.
Para definir as preferências da visualização de layout:

2 Selecione Visualização de layout na lista Categoria.
4 Clique em OK para fechar a caixa de diálogo.
Para desativar as guias da tabela de layout e os controles de largura de coluna na visualização de

layout:
Escolha Exibir > Visualização de tabelas > Mostrar as guias da tabela de layout.

272 Capítulo 17
CAPÍTULO 18
Utilização de molduras
As molduras permitem dividir uma janela do navegador em várias regiões, podendo cada uma
exibir um documento HTML diferente. Em sua utilização mais comum, uma moldura exibe um
documento que contém controles de navegação, enquanto a outra exibe um documento com
conteúdo.
Por exemplo: o layout da moldura pode consistir em três molduras: uma moldura estreita lateral
que contém uma barra de navegação, outra moldura na parte superior, contendo o logotipo e o
nome do site da Web, e uma moldura grande que ocupa o restante da página e acomoda o
conteúdo principal. Cada uma dessas molduras exibe um documento HTML distinto.
Neste exemplo, o documento exibido na moldura superior nunca se altera à medida que o
visitante navega pelo site. A barra de navegação da moldura lateral contém links. Clique em um
desses links altera o conteúdo da moldura principal de conteúdo, mas o conteúdo da própria
moldura lateral permanece inalterado. A moldura principal de conteúdo à direita exibe o
documento adequado para qualquer link no qual o visitante clicar à esquerda.
Uma discussão detalhada sobre todas as maneiras de projetar e utilizar molduras, bem como o
código necessário para a codificação manual, não é abrangida pelo escopo deste capítulo. Se forem
necessárias informações detalhadas sobre o código utilizado em layouts de moldura avançados,
veja documento sobre molduras e conjuntos de molduras.
273
• “Sobre molduras e conjuntos de molduras”, na página 274
• “Como decidir se as molduras devem ser utilizadas”, na página 275
• “Sobre como criar páginas da Web com base em molduras no Dreamweaver”, na página 277
• “Criação de molduras e conjuntos de molduras”, na página 278
• “Como selecionar molduras e conjuntos de molduras”, na página 281
• “Como salvar arquivos de moldura e de conjunto de molduras”, na página 283
• “Visualização e definição das propriedades da moldura”, na página 284
• “Visualização e definição das propriedades de um conjunto de molduras”, na página 285
• “Como controlar um conteúdo de moldura com links”, na página 286
• “Como tratar um navegador que não pode exibir molduras”, na página 287
• “Utilização de comportamentos JavaScript com molduras”, na página 287
Sobre molduras e conjuntos de molduras

Uma moldura é uma região de uma janela do navegador que pode exibir um documento HTML
independentemente do que está sendo exibido no restante da janela do navegador.
Um conjunto de molduras é um arquivo HTML que define o layout e as propriedades de uma
série de molduras, incluindo o número de molduras, seu tamanho e posicionamento, bem como a
URL da página a ser inicialmente exibida em cada moldura. O próprio arquivo do conjunto de
molduras não comporta conteúdo HTML a ser exibido em um navegador, exceto na seção
noframes (veja “Como tratar um navegador que não pode exibir molduras”, na página 287); o
arquivo do conjunto de molduras apenas fornece informações para o navegador sobre como um
conjunto de molduras deve ser exibido e quais documentos devem ser exibidos nele.
Para exibir um conjunto de molduras em um navegador, digite a URL do arquivo do conjunto de
molduras. O navegador abrirá os documentos relevantes para exibi-los nas molduras. O arquivo
do conjunto de molduras de um site geralmente é denominado index.html de forma que ele seja
exibido como padrão se um visitante não especificar um nome de arquivo.
Observar que uma moldura não é um arquivo. Pode-se pensar que o documento que está sendo
exibido no momento em uma moldura é parte integrante da moldura, mas na realidade o
documento não faz parte dela — qualquer moldura pode exibir qualquer documento.
Observação: A palavra página pode ser utilizada livremente para fazer referência a um único documento HTML ou
a todo o conteúdo de uma janela do navegador em um determinado momento, mesmo que vários documentos
HTML estejam sendo exibidos simultaneamente. A frase “uma página que utiliza molduras”, por exemplo:
normalmente se refere a um conjunto de molduras e aos documentos que são exibidos inicialmente
nessas molduras.
No Dreamweaver, é possível criar um conjunto de molduras de uma destas maneiras:

• Para criar um conjunto de molduras com o documento atual exibido em uma das molduras,
utilizar a categoria Molduras da barra Inserir.
• Para criar um conjunto de molduras com todas as molduras em branco, utilizar a categoria
Conjunto de molduras na caixa de diálogo Novo documento.
274 Capítulo 18
É possível formatar todas as molduras e conjuntos de molduras utilizando o inspetor de
propriedades. É possível definir a rolagem como ativada ou desativada, definir a largura e altura,
nomear todas as molduras e muito mais. Para obter mais informações, veja “Visualização e
definição das propriedades da moldura”, na página 284 e “Visualização e definição das
propriedades de um conjunto de molduras”, na página 285.
Um site que é exibido em um navegador como uma única página formada por três molduras
consiste, na verdade, em pelo menos quatro documentos HTML distintos: o arquivo do conjunto
de molduras e os três documentos que comportam o conteúdo exibido inicialmente dentro
das molduras. Ao projetar uma página utilizando conjuntos de molduras no Dreamweaver, esses
quatro arquivos devem ser salvos para que a página funcione corretamente no navegador. Para
obter mais informações sobre como criar com êxito páginas da Web que utilizam molduras, veja
“Sobre como criar páginas da Web com base em molduras no Dreamweaver”, na página 277.
Como decidir se as molduras devem ser utilizadas

A utilização mais comum de molduras é para navegação. Um conjunto de molduras geralmente
inclui uma moldura contendo uma barra de navegação e uma outra moldura que exibe as páginas
principais de conteúdo.
Entretanto, projetar com molduras pode ser confuso e, em muitos casos, é possível criar uma
página da Web sem molduras que atinge muitos dos mesmos objetivos de um conjunto de
molduras. Por exemplo: se desejar que a barra de navegação seja exibida no lado esquerdo da
página, é possível substituir a página por um conjunto de molduras ou apenas incluir a barra de
navegação em cada página do site (o Dreamweaver ajuda a criar várias páginas que utilizam o
mesmo layout; veja “Sobre os modelos do Dreamweaver”, na página 472). A imagem a seguir
mostra um projeto de página com um layout semelhante a moldura, mas que não utiliza molduras.
Utilização de molduras 275

Muitos designers da Web profissionais preferem não utilizar molduras, e muitas pessoas que
navegam na Web não as apreciam. Na maioria dos casos, isso é devido à existência de sites que
utilizam molduras de forma inadequada ou desnecessária (como um conjunto de molduras que
recarrega o conteúdo das molduras de navegação sempre que um visitante clica em um botão de
navegação). Quando as molduras são bem utilizadas (por exemplo: para manter os controles de
navegação estáticos em uma moldura enquanto permitem que o conteúdo de outra moldura se
altere), elas podem ser muito úteis para alguns sites.
Nem todos os navegadores fornecem bom suporte a molduras, e elas podem representar dificuldade
para visitantes que ainda não têm experiência em navegar; portanto, ao utilizar molduras, fornecer
sempre uma seção noframes no conjunto de molduras para aqueles visitantes que não podem vê-las.
Também é recomendável fornecer um link visível para uma versão do site sem molduras para os
visitantes cujos navegadores oferecem suporte a molduras, mas que não gostam de utilizá-las.
As vantagens de se utilizarem molduras incluem:
• O navegador de um visitante não precisa recarregar imagens relacionadas à navegação para cada
página.
• Cada moldura tem sua própria barra de rolagem (se o conteúdo for muito grande para caber
em uma janela); portanto, um visitante pode rolar as molduras independentemente (por
exemplo: um visitante que tiver efetuado a rolagem para a parte inferior de uma longa página
de conteúdo em uma moldura não precisa rolar de volta para a parte superior para utilizar a
barra de navegação, se esta estiver em uma outra moldura).
As desvantagens de se utilizarem molduras incluem:
• O alinhamento gráfico preciso dos elementos em diversas molduras pode ser difícil.
• O teste de navegação pode ser muito demorado.
• As URLs das páginas com molduras individuais não são exibidas no navegador; portanto, pode
ser difícil para um visitante incluir um marcador em uma página específica (exceto se for
fornecido o código do servidor que permite ao visitante carregar uma versão com molduras de
determinada página).
“Como controlar um conteúdo de moldura com links”, na página 286
“Como tratar um navegador que não pode exibir molduras”, na página 287
276 Capítulo 18
Sobre como criar páginas da Web com base em molduras no
Dreamweaver
O Dreamweaver permite exibir e editar todos os documentos associados a um conjunto de
molduras, todos em uma única janela do documento. Essa abordagem permite ver de modo
aproximado como as páginas com molduras serão exibidas em um navegador à medida que são
editadas. Entretanto, alguns aspectos dessa abordagem podem ser confusos, até que se tornem
familiares.
Lembre-se de que cada moldura exibe um documento HTML distinto. Mesmo que os
documentos estejam vazios, é necessário salvá-los para poder visualizá-los (porque o conjunto de
molduras pode ser visualizado com precisão apenas se contiver a URL de um documento a ser
exibido em cada moldura).
Para se certificar de que o conjunto de molduras será exibido corretamente nos navegadores:
1 Crie o conjunto de molduras e especificar um documento para ser exibido em cada moldura
(veja “Criação de molduras e conjuntos de molduras”, na página 278).
2 Salve cada arquivo a ser exibido em uma moldura. Lembre-se de que cada moldura exibe um
documento HTML distinto e que cada documento deve ser salvo. Salvar também o arquivo do
conjunto de molduras (veja “Como salvar arquivos de moldura e de conjunto de molduras”, na
página 283).
3 Defina as propriedades de cada moldura e do conjunto de molduras. Isso inclui nomear cada
moldura e definir opções fixas e de rolagem, entre outros (veja “Visualização e definição das
propriedades da moldura”, na página 284 e “Visualização e definição das propriedades de um
conjunto de molduras”, na página 285).
Dica: Também é possível definir o atributo title para uma moldura a fim de melhorar a acessibilidade. (Observar
que o atributo title não é igual ao atributo name). Para definir o atributo title, selecionar a moldura e escolher
Modificar > Editar a tag e, em seguida, selecionar a categoria Folha de estilos/acesso e digitar um título na caixa
de texto Título. Como alternativa, ativar a opção de autorização de acessibilidade para molduras. Para obter mais
informações, veja “Autoria da acessibilidade”, na página 363.
4 Certifique-se de que foi definida a propriedade Destino no inspetor de propriedades para todos
os links para que o conteúdo com links seja exibido na área correta (veja “Como controlar um
conteúdo de moldura com links”, na página 286).

Criação de molduras e conjuntos de molduras
Há duas maneiras de criar um conjunto de molduras no Dreamweaver: é possível desenhá-lo
ou escolher entre vários conjuntos de molduras predefinidos. A seleção de um conjunto de
molduras predefinido configura automaticamente todos os conjuntos de molduras e molduras
necessários à criação do layout e é a maneira mais fácil de criar rapidamente um layout-com base
em molduras. Só é possível inserir um conjunto de molduras predefinido na visualização do
projeto da janela do documento.
Como criar um conjunto de molduras predefinido

Os conjuntos de molduras predefinidos facilitam a seleção do tipo de conjunto de molduras a
ser criado.
Há duas maneiras de criar um conjunto de molduras predefinido: utilizando a barra Inserir e a
caixa de diálogo Novo documento. A barra Inserir permite criar um conjunto de molduras e exibir
o documento atual em uma das novas molduras; a caixa de diálogo Novo documento cria um
novo conjunto de molduras vazio.
Os ícones do conjunto de molduras predefinido na categoria Molduras da barra Inserir e na
categoria Conjuntos de molduras da caixa de diálogo Novo documento fornecem uma
representação visual de cada conjunto de molduras conforme aplicado ao documento atual.
Quando se aplica um conjunto de molduras utilizando a barra Inserir, o Dreamweaver

automaticamente configura o conjunto de molduras para exibir o documento atual (o documento
no qual o ponto de inserção está localizado) em uma das molduras. A área azul de um ícone de
conjunto de molduras predefinido representa o documento atual e as áreas brancas representam
molduras que exibirão outros documentos.
Para criar um conjunto de molduras predefinido e exibir um documento existente em uma

moldura:
1 Coloque o ponto de inserção em um documento.

• Na categoria Molduras da barra Inserir, clique no ícone de um conjunto de molduras
predefinido.
• Escolha um conjunto de molduras predefinido no submenu Inserir > Molduras.
Para criar um novo conjunto de molduras predefinido vazio:
1 Escolha Arquivo > Novo.

2 Na caixa de diálogo Novo documento, selecionar a categoria Conjuntos de molduras.
3 Selecione um conjunto de molduras na lista Conjuntos de molduras.
4 Clique em Criar.
278 Capítulo 18
Como criar e editar um conjunto de molduras
Antes de criar um conjunto de molduras ou de trabalhar com molduras, tornar as bordas das
molduras visíveis na visualização do projeto da janela do documento, escolhendo Exibir >Auxílios
visuais > Bordas da moldura.
Para criar um conjunto de molduras:
Escolha um item de divisão (como Dividir a moldura para a esquerda ou Dividir a moldura para a
direita) no submenu Modificar > Conjunto de molduras.
A janela será dividida em molduras e o documento iniciado será exibido em uma das molduras.
Para dividir uma moldura em molduras menores, seguir um dos procedimentos abaixo:
• Para dividir a moldura onde está o ponto de inserção, escolher um item de divisão no submenu
Modificar > Conjunto de molduras.
• Para dividir uma moldura ou conjunto de molduras vertical ou horizontalmente, arrastar uma
borda da moldura da margem da visualização do projeto para o meio da visualização do
projeto.
• Para dividir uma moldura utilizando uma borda de moldura que não está na margem da
visualização do projeto, manter pressionada a tecla Alt e arrastar a borda da moldura.
• Para dividir uma moldura em quatro molduras, arrastar uma borda da moldura de uma das
margens da visualização do projeto para o meio de uma moldura.
Dica: Para criar três molduras, iniciar com duas molduras e, depois, dividir uma delas. Não é fácil mesclar duas
molduras adjacentes sem editar o código do conjunto de molduras; portanto, transformar quatro molduras em
três é mais difícil do que transformar duas molduras em três.
Para excluir uma moldura:
Arrastar a borda da moldura para fora da página ou até a borda da moldura -mãe.
Se houver conteúdo não salvo em um documento de uma moldura que estiver sendo removida, o
Dreamweaver solicitará que o documento seja salvo.
Observação: É impossível remover um conjunto de molduras inteiro arrastando as bordas. Para remover um
conjunto de molduras, fechar a janela do documento que o exibe. Se o arquivo do conjunto de molduras tiver sido
salvo, excluir o arquivo.

Sobre conjuntos de molduras aninhados
Um conjunto de molduras que estiver dentro de outro é denominado um conjunto de molduras
aninhado. Um único arquivo do conjunto de molduras pode conter vários conjuntos de molduras
aninhados. A maioria das páginas da Web que utilizam molduras na verdade utilizam molduras
aninhadas, e a maioria dos conjuntos de molduras predefinidos no Dreamweaver também
utilizam o aninhamento. Qualquer conjunto de molduras no qual há números diferentes de
molduras em linhas ou colunas distintas requer um conjunto de molduras aninhado.
Por exemplo: o layout de molduras mais comum tem uma moldura na linha da parte superior
(onde é exibido o logotipo da empresa) e duas molduras na linha da parte inferior (uma moldura
de navegação e uma moldura de conteúdo). Esse layout requer um conjunto de molduras
aninhado: um conjunto de molduras de duas linhas, com um conjunto de molduras de duas
colunas aninhado na segunda linha.
Conjunto de molduras
principal
As molduras do menu e
do conteúdo estão
aninhadas dentro do
conjunto de molduras
principal
O Dreamweaver se encarrega do aninhamento de conjuntos de molduras conforme necessário. Se

forem utilizadas ferramentas para divisão de molduras no Dreamweaver, não será necessário se
preocupar com os detalhes de quais molduras são aninhadas ou não. Para obter mais informações
sobre essas ferramentas, veja “Como criar e editar um conjunto de molduras”, na página 279.
Há duas maneiras de aninhar conjuntos de molduras em HTML: o conjunto de molduras interno
pode ser definido no mesmo arquivo que o do conjunto de molduras externo ou em um arquivo
próprio distinto. Cada conjunto de molduras predefinido no Dreamweaver define todos os seus
conjuntos de molduras no mesmo arquivo.
Os dois tipos de aninhamento produzem os mesmos resultados visuais; não é fácil diferenciar, sem
examinar o código, o tipo de aninhamento que está sendo utilizado. A situação mais provável na
qual um arquivo de conjunto de molduras externo seria utilizado no Dreamweaver é quando o
comando Abrir na moldura é utilizado para abrir um arquivo do conjunto de molduras dentro de
uma moldura; fazer isso pode resultar em problemas ao definir destinos para os links. Em geral é
mais simples manter todos os conjuntos de molduras definidos em um único arquivo.
280 Capítulo 18
Como selecionar molduras e conjuntos de molduras
Para fazer alterações nas propriedades de uma moldura ou de um conjunto de molduras, começar
selecionando a moldura ou o conjunto de molduras que deseja modificar. É possível selecionar
uma moldura ou um conjunto de molduras na janela do documento ou utilizando o painel
Molduras.
Ao selecionar uma moldura ou um conjunto de molduras, é exibido um contorno da seleção ao
redor da moldura ou do conjunto de molduras tanto no painel Molduras quanto na visualização
do projeto da janela do documento.
Como selecionar molduras e conjuntos de molduras no painel Molduras

O painel Molduras fornece uma representação visual das molduras em um conjunto de molduras.
Pode-se clicar em uma moldura ou em um conjunto de molduras, no painel Molduras, para
selecioná-los no documento e, em seguida, no inspetor de propriedades, exibir ou editar as
propriedades do item selecionado. Para obter mais informações, veja “Visualização e definição das
propriedades da moldura”, na página 284 e “Visualização e definição das propriedades de um
conjunto de molduras”, na página 285.
O painel Molduras mostra a hierarquia da estrutura do conjunto de molduras de um modo que
pode não ser visível na janela do documento. Nesse painel, uma borda muito espessa envolve cada
conjunto de molduras; cada moldura é contornada por uma linha fina cinza e é identificada por
um nome.
Para exibir o painel Molduras:
Escolha Janela > Outras > Molduras.

Para selecionar uma moldura no painel Molduras:
Clique na moldura, no painel Molduras.

Para selecionar um conjunto de molduras no painel Molduras:
Clique na borda que circunda o conjunto de molduras, no painel Molduras.

Como selecionar molduras e conjuntos de molduras na janela do documento
Na visualização do projeto da janela do documento, quando uma moldura é selecionada, suas bordas
são marcadas com uma linha pontilhada; quando um conjunto de molduras é selecionado, todas as
bordas das molduras desse conjunto de molduras são marcadas com uma linha pontilhada clara.
Observação: Coloque o ponto de inserção em um documento que é exibido em uma moldura não é o mesmo que
selecionar uma moldura. Há várias operações (como definição das propriedades da moldura) nas quais é preciso
selecionar uma moldura.
Quando uma moldura ou um conjunto de molduras é selecionado, o inspetor de propriedades

exibe as propriedades do item selecionado, permitindo alterar as propriedades (veja “Visualização
e definição das propriedades da moldura”, na página 284 e “Visualização e definição das
propriedades de um conjunto de molduras”, na página 285).
Para selecionar uma moldura na janela do documento:
Pressione a tecla Alt e clique dentro de uma moldura na visualização do projeto.
Para selecionar um conjunto de molduras na janela do documento:
Clique em uma das bordas da moldura interna do conjunto de molduras na visualização do projeto
(as bordas da moldura devem estar visíveis para que isso seja possível, escolha Exibir >Auxílios
visuais > Bordas da moldura para tornar as bordas da moldura visíveis, caso não estejam).
Observação: Em geral é mais fácil selecionar conjuntos de molduras no painel Molduras do que na janela do
documento. Para obter mais informações, veja “Como selecionar molduras e conjuntos de molduras no painel
Molduras”, na página 281.
Para selecionar uma outra moldura ou conjunto de molduras, seguir um dos procedimentos abaixo:
• Para selecionar a moldura ou conjunto de molduras anterior ou seguinte no mesmo nível

hierárquico que a seleção atual, pressionar a tecla Alt e a seta à esquerda ou Alt e a seta à direita
e a seta à esquerda. Ao utilizar essas teclas, é possível alternar entre as molduras e conjuntos de
molduras na ordem em que são definidos no arquivo do conjunto de molduras.
• Para selecionar o conjunto-pai de molduras (o conjunto de molduras que contém a seleção
atual), pressionar Alt e seta para cima.
• Para selecionar a primeira moldura-filha ou conjunto-filho de molduras do conjunto de
molduras atualmente selecionado (isto é, primeiro na ordem em que eles são definidos no
arquivo do conjunto de molduras), pressionar Alt e seta para baixo.
Como abrir um documento em uma moldura

Pode-se especificar o conteúdo inicial de uma moldura inserindo o novo conteúdo em um
documento vazio em uma moldura ou abrindo um documento existente em uma moldura.
Para abrir um documento existente em uma moldura:
1 Coloque o ponto de inserção em uma moldura.

2 Escolha Arquivo > Abrir na moldura.
3 Selecione um documento a ser aberto na moldura e clique em OK.
O documento é exibido na moldura.
4 Para tornar esse documento o padrão a ser exibido na moldura quando o conjunto de molduras
for aberto em um navegador, salve o conjunto de molduras.
282 Capítulo 18
Como salvar arquivos de moldura e de conjunto de molduras
Para poder visualizar um conjunto de molduras em um navegador, é necessário salvar o arquivo do
conjunto de molduras e todos os documentos que serão exibidos nas molduras. É possível salvar
cada arquivo do conjunto de molduras e o documento com moldura individualmente ou salvar o
arquivo do conjunto de molduras e todos os documentos que são exibidos em molduras de uma
só vez.
Ao utilizar ferramentas visuais no Dreamweaver para criar um conjunto de molduras, cada novo
documento que é exibido em uma moldura recebe um nome de arquivo padrão. Por exemplo: o
primeiro arquivo do conjunto de molduras é denominado UntitledFrameset-1, enquanto o
primeiro documento em uma moldura é denominado UntitledFrame-1.
Ao selecionar um dos comandos de salva, é exibida uma caixa de diálogo, pronta para salvar um
documento com o nome de arquivo padrão. Como os nomes de arquivo padrão são muito
semelhantes, pode ser difícil determinar qual documento está sendo salvo. Para identificar a
moldura que exibe o documento que está sendo salvo, veja o contorno da seleção da moldura na
janela do documento, na visualização do projeto.
Para salvar um arquivo de conjunto de molduras:
1 Selecione o conjunto de molduras no painel Molduras ou na janela do documento.

2 Escolha uma dentre as opções a seguir:
• Para salvar o arquivo do conjunto de molduras, escolher Arquivo > Salvar o conjunto de
molduras.
• Para salvar o arquivo de conjunto de molduras como um novo arquivo, escolha Arquivo >
Salvar o conjunto de molduras como.
Caso o arquivo do conjunto de molduras não tenha sido salvo anteriormente, esses dois
comandos serão equivalentes.
Para salvar um documento que é exibido em uma moldura:
Clique na moldura e, em seguida, escolher Arquivo > Salvar a moldura ou Arquivo > Salvar a
moldura como.

Para salvar todos os arquivos associados a um conjunto de molduras:
Escolha Arquivo > Salvar todas as molduras.

Isso salvará todos os documentos abertos no conjunto de molduras, incluindo o arquivo do
conjunto de molduras e todos os documentos com moldura. Se o arquivo do conjunto de
molduras ainda não tiver sido salvo, uma borda mais espessa será exibida ao redor do conjunto de
molduras na visualização do projeto e uma caixa de diálogo permitirá escolher um nome de
arquivo. Em seguida, para cada moldura que ainda não tiver sido salva, será exibida uma borda
mais espessa ao redor da moldura e uma caixa de diálogo permitirá escolher um nome de arquivo.
Observação: Se o comando Arquivo > Abrir na moldura tiver sido utilizado para abrir um documento em uma
moldura, ao salvar o conjunto de molduras, o documento aberto na moldura se tornará o documento padrão a ser
exibido naquela moldura. Se não desejar que o documento seja o padrão, não salvar o arquivo do conjunto de
molduras.
Visualização e definição das propriedades da moldura

Utilize o inspetor de propriedades para exibir e definir a maioria das propriedades da moldura.
Para alterar a cor do fundo de uma moldura, definir a cor de fundo do documento na moldura.
Para exibir ou definir as propriedades da moldura:
1 Selecione uma moldura, seguindo um dos procedimentos abaixo:

• Mantenha pressionada a tecla Alt e clique em uma moldura na visualização do projeto da janela
do documento.
• Clique em uma moldura no painel Molduras.
2 Escolha Janela > Propriedades para abrir o inspetor de propriedades caso ainda esteja fechado.
3 Para examinar todas as propriedades das molduras, clique na seta de expansão, no canto
inferior direito do inspetor de propriedades.
Para alterar a cor do fundo de um documento em uma moldura:
1 Coloque o ponto de inserção na moldura.

2 Escolha Modificar > Propriedades da página.
3 Clique no menu pop-up Fundo para selecionar uma cor.
“Visualização e definição das propriedades de um conjunto de molduras”, na página 285
“Definição das propriedades do documento”, na página 121
284 Capítulo 18
Visualização e definição das propriedades de um conjunto de
molduras
Utilize o inspetor de propriedades para exibir e definir a maioria das propriedades dos conjuntos
de molduras. Para definir o título do conjunto de molduras selecionado, utilizar a caixa de diálogo
Propriedades da página ou o campo Título na barra de ferramentas da janela do documento.
Para exibir ou definir propriedades de um conjunto de molduras:
1 Selecione um conjunto de molduras, seguindo um dos procedimentos abaixo:

• Clique em uma borda entre duas molduras no conjunto de molduras da visualização do projeto
• Clique na borda que circunda um conjunto de molduras no painel Molduras.
2 Escolha Janela > Propriedades para abrir o inspetor de propriedades caso ainda esteja fechado.
3 Para examinar todas as propriedades dos conjunto de molduras, clique na seta de expansão, no
canto inferior direito do inspetor de propriedade.
Para definir um título para um documento do conjunto de molduras:
1 Selecione um conjunto de molduras, seguindo um dos procedimentos abaixo:

• Clique em uma borda entre duas molduras no conjunto de molduras da visualização do projeto
• Clique na borda que circunda um conjunto de molduras no painel Molduras.
2 No campo Título da barra de ferramentas do documento, digite um nome para o documento.
Quando um visitante vê o conjunto de molduras em um navegador, o título é exibido na barra
de títulos do navegador.
“Visualização e definição das propriedades da moldura”, na página 284
“Definição das propriedades do documento”, na página 121
“Utilização da barra de ferramentas do documento”, na página 44

Como controlar um conteúdo de moldura com links
Para utilizar um link de uma moldura para abrir um documento em outra moldura, é necessário
definir um destino para o link. O atributo target de um link especifica a moldura ou janela na
qual o conteúdo com link será aberto. Por exemplo: se a barra de navegação estiver na moldura
esquerda e se desejar que o material com link seja exibido na moldura principal de conteúdo à
direita, será necessário especificar o nome da moldura principal de conteúdo como destino para
cada um dos links da barra de navegação. Quando um visitante clica em um link de navegação, o
conteúdo especificado é aberto na moldura principal.
Para selecionar uma moldura na qual o arquivo será aberto, utilizar o menu pop-up Destino do
inspetor de propriedades. É possível definir um arquivo para substituir o documento que está
sendo exibido em outra moldura, para ser exibido no lugar do conjunto de molduras inteiro, para
ser exibido na moldura na qual o link estava (não escolhendo um destino) ou para ser aberto em
uma nova janela do navegador.
Para utilizar uma moldura como destino:
1 Na visualização do projeto, selecione um texto ou um objeto.

2 No campo Link do inspetor de propriedades, siga um dos procedimentos abaixo:
• Clique no ícone de pasta e selecionar o arquivo ao qual será vinculado.
• Arraste o ícone Indicar o arquivo para selecionar o arquivo ao qual será vinculado.
3 No menu pop-up Destino, escolha a moldura ou janela na qual o documento vinculado deverá
ser exibido.
• Se as molduras tiverem sido nomeadas no inspetor de propriedades, seus nomes serão exibidos
nesse menu. Selecione uma moldura com nome para abrir o documento vinculado
nessa moldura.
Observação: Os nomes de moldura serão exibidos apenas ao editar um documento dentro de um conjunto de
molduras. Ao editar um documento na própria janela do documento, fora do conjunto de molduras, os nomes
das molduras não serão exibidos no menu pop-up Destino. Se estiver editando um documento fora do conjunto
de molduras, será possível digitar o nome da moldura de destino na caixa de texto Destino.
• _blank abre o documento vinculado em uma nova janela do navegador e deixa a janela atual
inalterada.
• _parent abre o documento com link no conjunto-pai de molduras da moldura na qual o link
será exibido, substituindo o conjunto de molduras inteiro.
• _self abre o link na moldura atual, substituindo o conteúdo desta.
• _top abre o documento com links na janela atual do navegador, substituindo todas as molduras.
Dica: Se estiver vinculando a uma página fora do seu site, utilizar sempre target="_top" ou target="_blank"
para garantir que a página não pareça fazer parte do seu site.
286 Capítulo 18
Como tratar um navegador que não pode exibir molduras
O Dreamweaver permite especificar o conteúdo a ser exibido em navegadores com base em texto
e em navegadores gráficos mais antigos que não contam com suporte a molduras. Esse conteúdo é
armazenado no arquivo do conjunto de molduras, contido em uma tag noframes. Quando um
navegador que não conta com suporte a molduras carrega o arquivo do conjunto de molduras, ele
exibe apenas o conteúdo delimitado pela tag noframes.
Observação: O conteúdo na área noframes deve ser maior do que apenas uma observação que diz “É necessário
fazer upgrade para um navegador que pode lidar com molduras”. Algumas pessoas têm boas razões para utilizar
um sistema que não permite a exibição de molduras. Tentar tornar o conteúdo o mais acessível possível para tais
visitantes.
Para fornecer conteúdo a navegadores que não contam com suporte a molduras:
1 Escolha Modificar > Conjunto de molduras > Editar o conteúdo NoFrames.

O Dreamweaver limpa a visualização do projeto e as palavras “Conteúdo NoFrames” são
exibidas na parte superior da visualização do projeto.
2 Para criar o conteúdo NoFrames, siga um dos procedimentos abaixo:
• Na janela do documento, digite ou insira o conteúdo da mesma maneira que faria para um
documento comum.
• Escolha Janela > Inspetor de código, posicione o ponto de inserção entre as tags body que são
exibidas dentro das tags noframes e digitar o código HTML do conteúdo.
3 Escolha novamente Modificar > Conjunto de molduras > Editar o conteúdo NoFrames para
retornar à exibição normal do documento do conjunto de molduras.
Utilização de comportamentos JavaScript com molduras

Há vários comportamentos JavaScript e comandos relacionados à navegação que são
particularmente apropriados para utilização com molduras.
A ação Definir o texto da moldura substitui o conteúdo e a formatação de determinada moldura
pelo conteúdo especificado. O conteúdo pode incluir qualquer HTML válido. Utilize esta ação
para exibir informações de modo dinâmico em uma moldura (veja “Defina o texto da moldura”,
na página 395).
A ação Ir para a URL abre uma nova página na janela atual ou na moldura especificada. Esta ação
é particularmente útil para alterar o conteúdo de duas ou mais molduras com um clique (veja “Ir
para a URL”, na página 389).
O comando Inserir barra de navegação adiciona uma barra de navegação a uma página; após
inserir uma barra de navegação, é possível anexar comportamentos às suas imagens e definir qual
imagem será exibida com base nas ações de um visitante. Por exemplo: é recomendável mostrar a
imagem de um botão no estado Ativo ou Inativo para permitir que o visitante saiba qual página
de um site está sendo exibida (veja “Inserção de uma barra de navegação”, na página 449).
O comando Inserir menu de salto permite configurar uma lista de menus de links que abrem
arquivos em uma janela do navegador quando clicados. É possível ainda designar uma
janela ou moldura como destino, na qual o documento é aberto (veja “Inserção de um menu de
salto”, na página 446).

288 Capítulo 18
Parte V
Parte V
Como adicionar
conteúdo
Beneficie-se das ferramentas visuais do Dreamweaver para

adicionar uma variedade de conteúdo às páginas da Web.
Com elas você pode adicionar e formatar elementos como
texto, imagens, cores, filmes, som e outras formas de mídia.
Você pode tornar o conteúdo de suas páginas acessível a
visitantes com deficiência física.
• Capítulo 19, “Como inserir e formatar texto”
• Capítulo 20, “Como inserir imagens”
• Capítulo 21, “Integração do Dreamweaver com outros
aplicativos”
• Capítulo 22, “Como inserir mídia”
• Capítulo 23, “Dreamweaver e Acessibilidade”
CAPÍTULO 19
Como inserir e formatar texto
O Macromedia Dreamweaver MX oferece diversas formas de adicionar e formatar texto em um

documento. Este capítulo descreve como inserir texto, definir tipo de fonte, tamanho, cor e
atributos de alinhamento, além de como criar e aplicar seus próprios estilos personalizados usando
estilos HTML e CSS (Folhas de estilos em cascata, Cascading Style Sheet).
• “Como inserir e formatar texto HTML”, na página 291
• “Formatação do texto”, na página 294
• “Utilização dos estilos HTML para formatar o texto”, na página 301
• “Sobre CSSs (Cascading Style Sheets)”, na página 306
• “Conversão de estilos CSS em tags de HTML”, na página 314
• “Busca e substituição de texto”, na página 316
Como inserir e formatar texto HTML

A formatação no Dreamweaver é semelhante à utilização de um processador de texto padrão. No
inspetor de propriedades, utilizar o submenu Texto > Formato do parágrafo ou o menu pop-up
Formato para definir o estilo de formatação padrão (Parágrafo, Pré-formatado, Cabeçalho 1,
Cabeçalho 2, etc.) para um bloco de texto. Para alterar a fonte, o tamanho, a cor e o alinhamento
do texto selecionado, use o menu Texto ou o inspetor de propriedades. Para aplicar formatação de
texto como negrito, itálico, código, sublinhado, etc., utilizar o submenu Texto > Estilo.
É possível também combinar várias tags HTML padrão para formar um único estilo, denominado
estilo HTML. Por exemplo: é possível aplicar a formatação HTML manualmente utilizando uma
combinação de tags e atributos e salvar essa formatação como um estilo HTML; isso é salvo no
painel Estilos HTML. Sempre que o usuário desejar formatar texto utilizando essa combinação de
tags HTML, basta selecionar o estilo salvo no painel Estilos HTML. Os estilos HTML contam
com suporte de quase todos os navegadores da Web e economizam tempo em relação à
formatação manual de texto.
291
Outro tipo de estilo, denominado folhas de estilos em cascata (Cascading Style Sheets – CSS),
permite formatar as páginas e o texto, com a vantagem da atualização automática. Os estilos CSS
podem ser armazenados diretamente no documento ou, para se obter mais capacidade e
flexibilidade, em uma folha de estilos externa. Se uma folha de estilos externa for anexada a várias
páginas da Web, todas as páginas refletirão automaticamente quaisquer alterações feitas na folha
de estilos. Para acessar estilos CSS, utilizar o painel Estilos CSS ou o modo CSS do inspetor de
propriedades do texto. Para obter mais informações sobre a utilização do inspetor de propriedades
do texto para aplicar estilos HTML ou CSS, veja opções de propriedades Definição do texto na
Ajuda do Dreamweaver.
A formatação HTML manual e os estilos HTML aplicam a formatação usando as tags HTML
padrão (tais como b, i, font e code) que contam com suporte de todos os navegadores da Web
conhecidos. Os estilos CSS definem a formatação para o texto inteiro em uma determinada classe
ou redefinem a formatação para uma tag HTML específica (como h1, h2, p ou li). Os estilos CSS
contam com suporte apenas dos navegadores da Web Netscape Navigator 4.0 e Microsoft Internet
Explorer 4.0, e de suas versões mais avançadas.
Em uma mesma página, podem ser utilizados os estilos CSS e HTML, bem como a formatação
HTML manual. A formatação é aplicada de uma forma hierárquica, a formatação HTML manual
anula a formatação aplicada por um estilo HTML ou CSS, e estilos CSS incorporados em um
documento anulam estilos CSS externos. Veja “Sobre CSSs (Cascading Style Sheets)”, na
página 306.
Adição de texto a um documento

Há várias formas de adicionar texto a um documento do Dreamweaver. É possível digitar texto
diretamente na janela do documento do Dreamweaver ou recortar e colar ou importar texto de
outros documentos.
Para adicionar texto a um documento, seguir um dos procedimentos abaixo:
• Digite o texto diretamente na janela do documento.

• Copie o texto de outro aplicativo, alternar para o Dreamweaver, posicionar o ponto de inserção
na visualização do projeto da janela do documento e escolher Editar > Colar. O Dreamweaver
não manterá a formatação de texto que foi aplicada no outro programa, mas preservará as
quebras de linha.
Como importar texto de outros documentos

É possível importar dados tabulares para um documento através da salva inicial dos arquivos (tais
como arquivos do Microsoft Excel ou de um banco de dados) como arquivos de texto
delimitados. Para obter informações adicionais sobre como importar e formatar dados de tabela,
veja “Como importar dados tabulares” no Capítulo 19, “Como inserir e formatar texto”, na
página 291.
Também é possível importar texto de documentos HTML do Microsoft Word. Para obter
informações sobre como importar documentos HTML do Word, veja “Como abrir documentos
existentes”, na página 120.
292 Capítulo 19
Para importar dados tabulares:
1 Escolha Arquivo > Importar > Importar os dados tabulares ou selecione Inserir > Dados
tabulares.
A caixa de diálogo Importar os dados da tabela é exibida.
Procure o arquivo desejado ou digite o seu nome na caixa de texto.
2 Selecione o delimitador utilizado quando o arquivo foi salvo como texto delimitado. As opções
disponíveis são Tabulação, Vírgula, Ponto-e-vírgula, Dois pontos e Outro.
Se for selecionado Outro, aparecerá um campo em branco ao lado da opção. Digite o caractere
que foi utilizado como um delimitador.
3 Utilize as demais opções para formatar ou definir a tabela para a qual os dados
serão importados.
4 Clique em OK quando terminar.
Adição de espaço entre caracteres

O HTML só permite um espaço entre caracteres. Para adicionar espaço adicional em um
documento, é necessário inserir um espaço não-separável.
É possível definir uma preferência para adicionar automaticamente espaços não-separáveis em um
documento. Para definir esta preferência, escolha Editar > Preferências e, na categoria Geral,
certificar-se de que Permitir múltiplos espaços consecutivos esteja marcada.
Para inserir um espaço não-separável, seguir um dos procedimentos abaixo:
• Na barra Inserir, selecione Caractere e, em seguida, clique no ícone Inserir espaço não-
separável.
• Escolha Inserir > Caracteres especiais > Espaço não-separável.
• Pressione Control+Shift+Barra de espaço.
Adição de espaços entre parágrafos
O Dreamweaver funciona de forma semelhante a vários aplicativos de processamento de texto: o
usuário pressiona Enter para criar um novo parágrafo. Navegadores da Web inserem
automaticamente um espaço de linha em branco entre os parágrafos. É possível adicionar um
espaço de uma única linha entre parágrafos inserindo uma quebra de linha.
Para adicionar um retorno de parágrafo:
• Pressione a tecla Enter.

Para adicionar uma quebra de linha, seguir um dos procedimentos abaixo:
• Pressione Shift+Enter.
• Na barra Inserir, selecione Caractere e, em seguida, clique no ícone Quebra de linha.
• Escolha Inserir > Caracteres especiais > Quebra de linha.
Como inserir e formatar texto 293

Formatação do texto
Pode-se aplicar formatação de texto HTML a uma letra ou criar um site inteiro, utilizando os
comandos Texto > Formato do parágrafo ou as opções no inspetor de propriedades. Esse tipo de
formatação manual substitui ou anula a formatação definida por um estilo HTML ou CSS.
Para aplicar a formatação de texto HTML, utilizar o inspetor de propriedades e os comandos no
menu Texto. Por exemplo: Texto > Formato do parágrafo, e Texto > Estilo.
“Utilização dos estilos HTML para formatar o texto”, na página 301
“Criação de um estilo HTML”, na página 303
“Criação de um novo estilo CSS”, na página 309
Definição e alteração de fontes e estilos

Utilize opções do inspetor de propriedades ou do menu Texto para definir ou alterar
características da fonte de um texto selecionado. É possível definir o tipo de fonte, o estilo (como
negrito ou itálico) e o tamanho.
Quando é utilizado o inspetor de propriedades para aplicar o estilo negrito ou itálico, o
Dreamweaver aplica a tag <strong> ou <em>, respectivamente, de modo automático. Se estiverem
sendo criadas páginas para visitantes que possuem navegadores versão 3.0 ou mais antigas, alterar
essa preferência na categoria Geral da caixa de diálogo Preferências (Editar > Preferências).
Os tamanhos de fontes HTML são pontos de tamanho relativo e não específico. Os usuários
definem o tamanho do ponto da fonte padrão para os seus navegadores; esse tamanho de fonte
será visto quando for selecionado Padrão ou 3, no inspetor de propriedades ou no submenu
Texto > Tamanho. Os tamanhos 1 e 2 aparecerão menores do que o tamanho padrão de fonte; os
tamanhos 4 a 7 aparecerão maiores. Além disso, as fontes costumam parecer maiores no Windows
do que no Macintosh, apesar de o Internet Explorer 5 no Macintosh utilizar o mesmo tamanho
de fonte padrão que o Windows.
Dica: Um modo de garantir a consistência com o tamanho da fonte é utilizar os estilos CSS com o tamanho da sua
fonte definido em pixels. Para obter mais informações sobre as CSS, veja “Sobre CSSs (Cascading Style Sheets)”,
na página 306.
Tópico relacionado
“Modificação de combinações de fontes”, na página 295
294 Capítulo 19
Para definir ou alterar características da fonte:
1 Selecione o texto. Se nenhum texto for selecionado, a alteração será aplicada ao texto
subseqüente que for digitado.
2 Escolha uma das seguintes opções:
• Para alterar a fonte, escolha uma combinação de fontes no inspetor de propriedades ou no
submenu Texto > Fonte.
Escolha Padrão para remover as fontes aplicadas anteriormente. A opção Padrão aplica a fonte
padrão ao texto selecionado (a fonte padrão do navegador ou aquela designada para essa tag na
folha de estilos CSS).
• Para alterar o estilo da fonte, clique em Negrito ou Itálico, no inspetor de propriedades, ou
escolher um estilo de fonte (negrito, itálico, sublinhado, etc.) no submenu Texto > Estilo.
• Para alterar o tamanho da fonte, escolha um tamanho (1 a 7), no inspetor de propriedades ou
no submenu Texto > Tamanho.
• Para aumentar ou diminuir o tamanho do texto selecionado, escolha um tamanho relativo (+1
a + 4 ou –1 a –3) no inspetor de propriedades ou no submenu Texto > Alterar o tamanho.
Observação: Esses números indicam uma diferença relativa do tamanho da fonte básica. O valor da fonte
básica padrão é 3. Então, um valor +4 resulta em um tamanho de fonte de 3 + 4 ou 7. O total máximo dos valores
de tamanho de fonte é 7. Se tentar-se definir um valor superior, ele será exibido como 7. O Dreamweaver não
exibe a tag basefont (que aparece na seção head), embora o tamanho da fonte deva ser exibido corretamente
em um navegador. Para testar esse procedimento, compare textos definidos para 3 e +3.
Modificação de combinações de fontes

Utilize o comando Editar a lista de fontes para definir as combinações de fontes que aparecem no
inspetor de propriedades e no submenu Texto > Fonte.
As combinações de fontes determinam como um navegador exibe o texto na sua página da Web. O
navegador utiliza a primeira fonte na combinação que estiver instalada no sistema do usuário; se
nenhuma das fontes na combinação estiver instalada, ele exibirá o texto conforme a especificação
das preferências do navegador do usuário.
Para modificar as combinações de fontes:
1 Escolha Texto > Fonte > Editar a lista de fontes.

2 Selecione a combinação de fontes na lista situada no alto da caixa de diálogo.
As fontes na combinação selecionada estão relacionadas na lista Fontes escolhidas, no canto
inferior esquerdo da caixa de diálogo. À direita, há uma lista com todas as fontes disponíveis,
instaladas no seu sistema.

• Para adicionar ou remover fontes de uma combinação de fontes, clique no botão de seta (<<
ou >>) entre as listas Fontes escolhidas e Fontes disponíveis.
• Para adicionar ou remover uma combinação de fontes, clique nos botões com sinal de adição
(+) e de subtração (–), no alto da caixa de diálogo.
• Para adicionar uma fonte não instalada no sistema, digite o nome da fonte no campo de texto
abaixo da lista Fontes disponíveis e clique no botão << para adicioná-la na combinação. A
adição de uma fonte não instalada no sistema é útil, por exemplo, para designar uma fonte
específica do Windows quando o usuário está desenvolvendo páginas em um Macintosh.
• Para mover a combinação de fontes para cima ou para baixo na lista, clique nos botões de seta,
na parte superior da caixa de diálogo.
Para adicionar uma nova combinação a uma lista de fontes:
1 Escolha Texto > Fonte > Editar a lista de fontes.

2 Selecione uma fonte na lista Fontes disponíveis e clique no botão << para mover a fonte para a
lista Fontes escolhidas.
3 Repita a etapa 2 para cada fonte subseqüente na combinação.
Para adicionar uma fonte não instalada no sistema, digite o nome da fonte no campo de texto
abaixo da lista Fontes disponíveis e clique no botão << para adicioná-la na combinação de
fontes. A adição de uma fonte não instalada no sistema é útil, por exemplo: para designar uma
fonte específica do Windows quando o usuário está desenvolvendo páginas em um Macintosh.
4 Ao terminar a seleção das fontes específicas, selecione uma família de fontes genérica no menu
Fontes disponíveis e clique no botão <<, para mover a família genérica para a lista Fontes
escolhidas.
As famílias de fontes genéricas incluem cursivas, fantasia, monoespaçadas, sans-serif e serif. Se
nenhuma das fontes na lista Fontes escolhidas estiver disponível no sistema do usuário, o texto
aparecerá na fonte padrão associada à família de fontes genérica. Por exemplo: a fonte
monoespaçada padrão na maioria dos sistemas é Courier.
Formatação de parágrafos
Utilize o menu pop-up Formato, no inspetor de propriedades, ou o submenu Texto > Formato do
parágrafo para aplicar as tags de cabeçalho e parágrafo padrão.
Quando uma tag de cabeçalho é aplicada a um parágrafo, o Dreamweaver adiciona
automaticamente a próxima linha de texto como um parágrafo padrão. Para alterar esta definição,
escolha Editar > Preferências e, em seguida, na categoria Geral, em Opções de edição, certificar-se
de que a opção Alternar para o parágrafo simples depois do cabeçalho esteja desmarcada.
“Criação de um estilo HTML”, na página 303
Opções de propriedades Definição do texto (na Ajuda do Dreamweaver)
Definição de propriedades de tipo CSS (na Ajuda do Dreamweaver)
296 Capítulo 19
Para aplicar uma tag de cabeçalho ou parágrafo:
1 Coloque o ponto de inserção no parágrafo ou selecionar uma parte do texto no parágrafo.

2 No submenu Texto > Formato do parágrafo ou no menu pop-up Formato, no inspetor de
propriedades, escolha uma opção:
• Selecione um formato de parágrafo (por exemplo: Cabeçalho 1, Cabeçalho 2, Texto pré-
formatado, etc.). A tag HTML associada ao estilo selecionado (por exemplo: h1 para Cabeçalho
1, h2 para Cabeçalho 2, pre para Texto pré-formatado, etc.) será aplicada ao parágrafo inteiro.
• Escolha Nenhum, para remover um formato de parágrafo.
Alinhamento de texto
Alinhar o texto na página usando o inspetor de propriedades ou o submenu Texto > Alinhar. É
possível centralizar qualquer elemento em uma página utilizando o comando Texto > Alinhar >
No centro.
Para alinhar o texto:
1 Selecione o texto a ser alinhado ou simplesmente inserir o indicador no início do texto.

2 Clique em uma opção de alinhamento (À esquerda, À direita, No centro), no inspetor de
propriedades, ou escolha Texto > Alinhar e selecionar um comando de alinhamento.
Para centralizar os elementos:
1 Selecione o elemento (imagem, plug-in, tabela ou um outro elemento da página) a

ser centralizado.
2 Escolha Texto > Alinhar > No centro.
Observação: É possível alinhar e centralizar blocos inteiros de texto; é impossível alinhar ou centralizar parte de um
cabeçalho ou de um parágrafo.
Recuo de texto
O uso do comando Recuo aplica a tag de HTML blockquote a um parágrafo de texto, recuando o
texto nos dois lados da página.
Para recuar o texto e remover o recuo:
1 Coloque o ponto de inserção no parágrafo a ser recuado.

2 Clique no botão Recuo ou Remover o recuo, no inspetor de propriedades, escolha
Texto >Recuo ou Remover o recuo ou selecionar Lista > Recuo ou Remover o recuo no menu
contextual.
Observação: É possível aplicar vários recuos a um parágrafo. Cada vez que este comando é escolhido, o texto
recua mais nos dois lados do documento.

Alteração da cor do texto
É possível alterar a cor do texto selecionado, para que a nova cor anule a cor do texto definida em
Propriedades da página (se nenhuma cor tiver sido definida em Propriedades da página, a cor de
texto padrão será preto).
Para alterar a cor do texto:
1 Selecione o texto.
• Escolha uma cor na paleta de cores aceitas pelo navegador clicando no seletor de cores, no
• Escolha Texto > Cor. A caixa de diálogo Seletor de cores do sistema é exibida. Selecione uma
cor e clique em OK.
• Digite o nome da cor ou um número hexadecimal diretamente no campo do inspetor de
propriedades.
• Para definir a cor padrão do texto, utilizar o comando Modificar > Propriedades da página.
Veja “Definição das cores padrão do texto”, na página 124.
Para retornar o texto à cor padrão:
1 No inspetor de propriedades, clique na caixa de cores para abrir a paleta de cores aceitas
pela-Web.
2 Clique no botão Riscado (o botão quadrado branco com uma linha vermelha cortando-o,
situado no canto superior direito).
Criação de listas com marcadores e numeradas

À medida que digita na janela do documento, podem ser criadas listas numeradas (ordenadas),
listas com marcadores (não-ordenadas) e listas de definições com base em um texto existente ou
em um novo texto. As listas de definições não utilizam caracteres à esquerda, como marcadores ou
números, porém estes são utilizados freqüentemente em glossários ou descrições. As listas também
podem ser aninhadas. Listas aninhadas são listas que contêm outras listas. Por exemplo: o usuário
poderá querer aninhar uma lista ordenada ou com marcadores em uma outra lista numerada ou
ordenada.
Para obter informações sobre a definição de um tipo de lista específico e outras opções de lista
para uma lista inteira ou um item de lista específico (por exemplo: redefinir a numeração, utilizar
numerais romanos em uma lista ordenada ou definir marcadores quadrados), veja Definição de
opções de propriedade de lista na Ajuda do Dreamweaver.
Para criar uma nova lista:
1 No documento do Dreamweaver, colocar o ponto de inserção onde será adicionada uma lista e,
em seguida, seguir um dos procedimentos abaixo:
• Clique no botão Lista com marcadores ou Lista numerada no inspetor de propriedades
• Escolha Texto > Lista e selecionar o tipo de lista desejado - Lista não-ordenada (com
marcadores), Lista ordenada (numerada) ou Lista de definições.
O caractere à esquerda do item de lista especificado é exibido na janela do documento.
298 Capítulo 19
2 Digite o texto do item de lista e, em seguida, pressionar Enter para criar um outro item de lista.
3 Para concluir a lista, pressionar duas vezes Enter.
Para criar uma lista usando texto já existente:
1 Escolha uma série de parágrafos para transformá-los em uma lista.

2 Clique nos botões Lista com marcadores ou Lista numerada, no inspetor de propriedades, ou
escolha Texto > Lista e selecionar o tipo de lista desejado: Lista não-ordenada, Lista ordenada
ou Lista de definições.
Para criar uma lista aninhada:
1 Selecione os itens da lista a serem aninhados.

2 Clique no botão Recuo, no inspetor de propriedades, ou escolha Texto > Recuo.
O Dreamweaver recuará o texto e criará uma lista separada com os atributos HTML da lista
original.
3 Aplicar um novo estilo ou tipo de lista ao texto recuado, seguindo o mesmo procedimento
utilizado acima.
Como inserir datas

O Dreamweaver fornece um objeto Data conveniente, que insere a data atual em qualquer
formato preferido (com ou sem a hora) e dá ao usuário a opção de atualizar a data sempre que o
arquivo for salvo.
Observação: As datas e horas mostradas na caixa de diálogo Inserir data não representam a data atual nem
refletem as datas/horas vistas por um visitante quando ele exibe o seu site. Estes são apenas exemplos da maneira
de mostrar essas informações.
Para inserir a data atual em um documento:
1 Na janela do documento, colocar o ponto de inserção onde a data deverá ser inserida.
• Escolha Inserir > Data.
• Na barra Inserir, selecione Comuns e, em seguida, clique no botão Data.
3 Na caixa de diálogo que aparecer, selecionar os formatos para o nome do dia da semana, a data
e a hora.
4 Para que a hora inserida seja atualizada sempre que o documento for salvo, selecione Atualizar
automaticamente ao salvar. Para transformar a data em texto simples, quando for inserida, e
nunca atualizá-la automaticamente, desmarque esta opção.
5 Clique em OK, para inserir a data.
Dica: Se for escolhida a opção Atualizar automaticamente ao salvar, é possível editar o formato da data após ter
sido inserida no documento, através do clique no texto formatado e da seleção de Editar o formato da data, no

Como inserir caracteres especiais
Alguns caracteres especiais são representados em HTML por um nome ou número, referenciado
como uma entidade. O HTML inclui nomes de entidades para caracteres como símbolo de
copyright (©), o "e" comercial (&) e o símbolo de marca registrada (®). Cada entidade
contém um nome (por exemplo: —) e um equivalente numérico (por exemplo: ).
Dica: O HTML utiliza chaves <> no seu código, mas talvez seja necessário expressar os caracteres especiais
correspondentes a maior ou menor do que, sem que o Dreamweaver os interprete como código. Nesse caso,
utilizar > para maior do que (>) e ⁢ para menor do que (<).
Infelizmente, muitos navegadores (especialmente, os mais antigos e aqueles diferentes do

Navigator e Internet Explorer) não exibem corretamente muitas das entidades denominadas.
É possível inserir vários caracteres especiais (como entidades HTML) escolhendo a categoria
Caracteres na barra Inserir.
Para inserir um caractere especial em um documento:
1 Na janela do documento, colocar o ponto de inserção onde o caractere especial deverá ser
inserido.
• Escolha o nome do caractere no submenu Inserir > Caracteres.
• Na barra Inserir, escolha a categoria Caracteres e selecionar o caractere desejado.
Dica: Há vários outros caracteres especiais disponíveis. Para selecionar um deles, escolha Inserir > Caracteres >
Mais ou selecionar o ícone Inserir mais caracteres, na barra Inserir, selecione um caractere e clique em OK.
Utilização de réguas horizontais

As réguas horizontais (linhas) são úteis para organizar informações. Em uma página, o texto e os
objetos podem ser separados visualmente por meio de uma ou mais réguas.
Para criar uma régua horizontal:
1 Na janela do documento, colocar o ponto de inserção onde será inserida uma régua horizontal.
• Escolha Inserir > Régua horizontal.
• Na barra Inserir, selecione Comuns e, em seguida, clique no botão Régua horizontal.
Para modificar uma régua horizontal:
1 Na janela do documento, selecione uma régua horizontal.

2 Escolha Janela > Propriedades, para abrir o inspetor de propriedades, e modifique as propriedades
conforme desejar.
L e U especificam a largura e a altura da régua em pixels ou como uma percentagem do
tamanho da página.
Alinhar especifica o alinhamento da régua (Padrão, À esquerda, No centro ou À direita). Esta
definição será aplicada apenas quando a largura da régua for menor do que a da janela do
navegador.
Sombreado especifica se a régua será desenhada com sombreado. Desmarcar esta opção para
desenhar a régua com uma cor sólida.
300 Capítulo 19
Utilização dos estilos HTML para formatar o texto
Ao configurar estilos HTML, é possível aplicar com rapidez e consistência formatação de fonte ao
texto de documentos. Os estilos HTML podem consistir em um único ou em vários atributos de
tag de fonte HTML, como cor, tamanho da fonte, tamanho, bem como outros atributos de
formatação como negrito ou itálico. Por exemplo: é possível criar um estilo HTML para texto que
é Arial, tamanho 4+, verde e itálico. Depois, é possível aplicar rapidamente o estilo selecionando o
texto em que deseja aplicá-lo e, em seguida, selecionando o estilo HTML do painel Estilos
HTML.
Como os estilos HTML consistem apenas em tags de fonte, eles podem ser exibidos por
navegadores que não dão suporte a CSSs, como o 3.0 e navegadores anteriores.
Uma desvantagem de estilos HTML é que as alterações feitas em um estilo HTML não são
automaticamente atualizadas no documento. Caso tenha aplicado um estilo e posteriormente o
alterado, será necessário aplicar novamente o estilo ao texto para atualizar a formatação.
Diferentemente dos estilos CSS, a formatação com o estilo HTML afeta apenas o texto ao qual foi
aplicada ou o texto que tiver sido criado com um estilo HTML selecionado. Para poder alterar a
formatação e, automaticamente, atualizar todas as ocorrências dessa formatação, utilizar os estilos
CSS; veja “Sobre CSSs (Cascading Style Sheets)”, na página 306.
É possível utilizar o painel Estilos HTML para configurar os estilos HTML utilizados no site e,
em seguida, compartilhá-los com outros usuários, sites locais ou remotos. Para obter informações,
veja “Utilização dos seus estilos HTML em outros sites”, na página 305.
Para exibir o painel Estilos HTML, seguir um dos procedimentos abaixo:
• Escolha Janela > Estilos HTML.

• Pressione Control + F11.
• Clique no ícone Estilos HTML no Iniciador.
Utilização do painel Estilos HTML
O painel Estilos HTML exibe os estilos HTML que estão disponíveis para o site local atual.
Há dois tipos de Estilos HTML: Estilos de parágrafo e Estilos de seleção. Eles podem ser
identificados pelo símbolo na primeira coluna do painel Estilos HTML:
Estilos de parágrafo são precedidos por uma marca de parágrafo e permitem formatar parágrafos.

Estilos de seleção são precedidos por um a e permitem formatar texto já selecionado. Os dois
primeiros estilos do painel Estilos HTML, Limpar o estilo da seleção e Limpar o estilo do
parágrafo, permitem remover todas as tags de formato do texto selecionado e no qual elas são
aplicadas.
No painel Estilos HTML anterior, observar o estilo em Negrito. Um sinal de adição (+)
precedendo um estilo indica que o estilo adiciona formatação ao texto ao qual ele é aplicado. Se
um estilo não possuir um sinal de adição, qualquer estilo existente será limpado antes de o estilo
selecionado ser aplicado. Por exemplo: a utilização do Estilo HTML "a+ Vermelho" simplesmente
adiciona vermelho a qualquer formatação que já tenha sido aplicada ao texto selecionado. Já a
utilização do estilo HTML "Ênfase" limpa qualquer formatação existente antes da aplicação desse
estilo.
Para exibir os atributos de estilo de um estilo HTML existente:
1 No painel Estilos HTML, selecione um estilo.

2 No painel Estilos HTML, clique com o botão direito do mouse e escolha Editar, no menu
contextual, ou clique duas vezes no estilo HTML e selecionar Editar, no menu contextual.
3 Na caixa de diálogo Definir o estilo HTML, especifique as definições para o estilo.
As opções Aplicar a determinam se o estilo será aplicado ao texto selecionado (Seleção) ou ao
bloco de texto atual (Parágrafo). As opções Ao aplicar determinam se as definições para o estilo
serão adicionadas à formatação original do texto (Adicionar ao estilo existente) ou removidas
da formatação existente e substituídas pelas novas configurações (Limpar o estilo existente).
Para aplicar um estilo HTML existente:
No painel Estilos HTML, selecione um estilo.

• Se a caixa de seleção Aplicação automática, na parte inferior do painel, estiver selecionada,
clique uma vez no estilo.
• Se a caixa de seleção Aplicação automática não estiver selecionada, clique no estilo e, depois,
em Aplicar.
Para limpar a formatação de texto do documento:
1 Selecione o texto formatado.

2 No painel Estilos HTML, clique em Limpar o estilo do parágrafo ou Limpar o estilo da
seleção.
Limpar o estilo do parágrafo remove a formatação do bloco de texto atual no documento.
Limpar o estilo da seleção remove a formatação do texto selecionado.
Observação: As opções Limpar o estilo do parágrafo e Limpar o estilo da seleção podem ser utilizadas para
remover qualquer formatação (exceto CSS), independentemente de como a formatação original tenha sido
aplicada (por exemplo: através do painel Estilos HTML ou do inspetor de propriedades).
Para remover um estilo do painel Estilos HTML:
1 No painel Estilos HTML, desmarque a caixa de seleção para desativar a opção Aplicação
automática.
2 Selecione um estilo HTML.
3 Clique no ícone de Excluir o estilo (lixeira), na parte inferior direita do painel.
302 Capítulo 19
Criação de um estilo HTML
É possível criar estilos de duas formas: é possível formatar o texto no documento e, em seguida,
criar um estilo com base no texto selecionado ou pode-se criar um estilo no painel Estilos HTML
selecionando os atributos de formatação a serem aplicados.
Para criar um novo estilo HTML:
1 No painel Estilos HTML, clique no ícone de Novo estilo. É possível também escolher Texto>
Estilos HTML > Novo estilo.
A caixa de diálogo Definir o estilo HTML é exibida.
2 Na caixa de texto Nome, digite um nome para o estilo.

3 Em Aplicar a, seguir um dos procedimentos abaixo para escolher como este estilo será aplicado:
• Para definir um estilo de seleção, escolha Seleção.
• Para definir um estilo de parágrafo, escolha Parágrafo.
Observação: Um estilo de parágrafo se aplica ao bloco inteiro de texto, no qual está localizado o ponto de
inserção, independente do texto que está realmente selecionado.
4 Em Ao aplicar, escolher se o estilo HTML será aplicado além do estilo já existente do texto ou
parágrafo selecionado, ou para limpar a formatação da seleção ou do parágrafo e aplicar o novo
estilo HTML.
Observação: A hierarquia para aplicar estilos é esta: os estilos HTML precedem os estilos CSS, que
prevalecem sobre os estilos CSS externos. Para obter mais informações, veja “Sobre CSSs (Cascading Style
Sheets)”, na página 306.
5 Em Atributos da fonte, utilizar os menus pop-up para selecionar as opções de formatação a serem
aplicadas.
6 Se estiver criando um estilo de parágrafo, em Atributos de parágrafo, no menu pop-up
Formatar, escolha uma tag de parágrafo (por exemplo: parágrafo, Cabeçalho1, Pré-formatado).

7 Em Alinhamento, clique no botão de alinhamento esquerdo, central ou direito para definir o
alinhamento de parágrafo desejado.
8 Clique em OK.
O estilo é adicionado à lista Estilos HTML.
Para criar um novo estilo HTML com base em um texto existente:
1 No documento, selecionar ou criar o texto que contém a formatação a ser utilizada no novo
estilo HTML.
Dica: É possível utilizar o inspetor de propriedades para exibir e aplicar formatação e, em seguida, salvar a
formatação como um estilo HTML.
2 No painel Estilos HTML, clique no ícone de Novo estilo (+), localizado no canto inferior direito.
3 Na caixa de texto Nome, digite um nome para o estilo.
4 Em Aplicar a, seguir um dos procedimentos abaixo para escolher como este estilo será aplicado:
• Para definir um estilo de seleção, escolha Seleção.
• Para definir um estilo de parágrafo, escolha Parágrafo.
Observação: Um estilo de parágrafo se aplica ao bloco inteiro de texto, no qual está localizado o ponto de
inserção, independente do texto que está realmente selecionado.
5 Em Ao aplicar, escolher se o estilo HTML será aplicado além do estilo já existente do texto ou
parágrafo selecionado, ou para limpar a formatação da seleção ou do parágrafo e aplicar o novo
estilo HTML.
Observação: A hierarquia para aplicar estilos é esta: os estilos HTML precedem os estilos CSS, que
prevalecem sobre os estilos CSS externos. Para obter mais informações, veja “Sobre CSSs (Cascading Style
Sheets)”, na página 306.
6 Se estiver criando um estilo de parágrafo, em Atributos de parágrafo, no menu pop-up

Formatar, escolha uma tag de parágrafo (por exemplo: parágrafo, Cabeçalho1, Pré-formatado).
7 Em Alinhamento, clique no botão de alinhamento esquerdo, central ou direito para definir o
alinhamento de parágrafo desejado.
8 Clique em OK.
Aplicação de um estilo HTML

Aplicar um estilo é tão fácil quanto selecionar o texto ou o parágrafo ao qual o estilo será aplicado
e, em seguida, selecione o estilo no painel Estilos HTML.
Para aplicar um Estilo HTML:
1 No canto inferior esquerdo do painel Estilos HTML, certifique-se de que a opção Aplicar
esteja selecionada, para aplicar automaticamente o estilo selecionado.
2 Na janela do documento, seguir um dos procedimentos abaixo para selecionar o texto ao qual o
estilo será aplicado:
• Coloque o ponto de inserção em qualquer local em um parágrafo para aplicar um estilo de
parágrafo.
• Utilize o cursor para selecionar o texto ao qual um estilo de seleção será aplicado.
304 Capítulo 19
3 No painel Estilos HTML, clique no estilo HTML a ser aplicado ao texto.
O texto é atualizado automaticamente na janela do documento.
Edição de um estilo HTML

Quando um estilo HTML é editado, o Dreamweaver não atualiza automaticamente o texto que
tenha sido formatado previamente utilizando este estilo. Para atualizar o estilo para o texto
formatado previamente, é necessário aplicar novamente o estilo manualmente.
Para editar um estilo HTML existente:
1 Certifique-se de que não haja texto selecionado na janela do documento.

2 No painel Estilos HTML, certifique-se de que a caixa de seleção Aplicação automática esteja
desmarcada.
Se a opção Aplicação automática estiver ativada, o estilo HTML será aplicado quando este for
escolhido no painel Estilos HTML.
3 No painel Estilos HTML, seguir um dos procedimentos abaixo:
• Clique com o botão direito do mouse e, em seguida, escolha Editar no menu contextual.
• Clique duas vezes no estilo.
4 Na caixa de diálogo, definir opções de atributo de estilo para o estilo.
5 Para redefini-lo com as opções padrão, clique em Limpar.
Utilização dos seus estilos HTML em outros sites

O painel Estilos HTML pode servir para registrar os estilos HTML utilizados em um site, a fim
de poderem ser compartilhados com outros usuários, sites locais ou remotos.
Os estilos HTML são automaticamente armazenados na pasta Biblioteca do site local em um
arquivo chamado Styles.xml. É possível copiar o arquivo Styles.xml da pasta Biblioteca de um site
local para a pasta Biblioteca de um outro site local e reutilizar estilos criados.
Observação: Cada site só pode conter um arquivo Styles.xml; então, se tiverem sido criados novos estilos HTML
no site para o qual um arquivo Styles.xml esteja sendo copiado, o arquivo copiado substituirá o arquivo existente. As
alterações de formatação já aplicadas não serão perdidas. É possível recriar os estilos selecionando texto no
documento e definindo um novo estilo HTML.
Para compartilhar os seus estilos HTML com outros sites ou usuários:
1 Escolha Janela > Site ou Site > Arquivos do site para abrir o painel Site na visualização Arquivos
do site.
2 No painel Site, localizar e abrir a pasta Biblioteca.
Há um arquivo chamado styles.xml. Esse arquivo contém todos os estilos HTML do site. Ele
pode ser colocado, obtido, devolvido, retirado e copiado como qualquer outro no site.
Também é possível criar Design Notes para o arquivo styles.xml. Para criar ou editar um estilo
para um site remoto, é necessário retirar primeiro o arquivo styles.xml.
Para obter mais informações sobre o uso dessas opções, veja “Como configurar uma pasta
remota”, na página 69.

Sobre CSSs (Cascading Style Sheets)
CSS (Cascading Style Sheets) são um conjunto de regras de formatação que controlam a aparência
do conteúdo em uma página da Web. Estilos CSS oferecem grande flexibilidade e controle da
aparência exata da página, desde o posicionamento preciso do layout até fontes e estilos
específicos.
Os estilos CSS permitem controlar muitas propriedades que não podem ser controladas apenas
através do HTML. Por exemplo: é possível atribuir marcadores de listas personalizados e
especificar diferentes tamanhos de fontes e unidades (pixels, pontos, etc.). É possível garantir um
tratamento mais consistente do layout e da aparência da página em vários navegadores, utilizando
estilos CSS e definindo tamanhos de fontes em pixels. Além da formatação do texto, é possível
controlar o formato e o posicionamento de elementos em nível de bloco em uma página da Web.
Por exemplo: é possível definir margens, bordas, texto flutuante em torno de outro texto, e assim
por diante.
Uma regra de estilo CSS consiste em duas partes - o seletor e a declaração. O seletor é o nome do
estilo (como TR ou P) e a declaração define os elementos do estilo. A declaração consiste em duas
partes, a propriedade (como font-family) e o valor (como Helvetica). O termo em cascata se refere
à sua habilidade para aplicar várias folhas de estilo à mesma página da Web. Por exemplo: é
possível criar uma folha de estilo para aplicar cor e outra para aplicar margens, e aplicá-los à
mesma página para criar o projeto desejado.
Uma grande vantagem de estilos CSS é que eles oferecem a capacidade de fácil atualização.
Quando um estilo CSS é atualizado, a formatação de todos os documentos que utilizam esse estilo
é atualizada automaticamente par ao novo estilo.
No Dreamweaver, é possível utilizar o painel Estilos CSS para criar, exibir e anexar atributos de
estilo a documentos. Para obter informações sobre a utilização do painel Estilos CSS, veja “Como
utilizar o painel Estilos CSS”, na página 307. Além dos estilos e das folhas de estilos criadas, é
possível utilizar folhas de estilo que acompanham o Dreamweaver para aplicar estilos aos
documentos. Veja “Como criar um documento a partir de um arquivo de projeto do
É possível definir os tipos de folhas de estilos CSS a seguir no Dreamweaver:
• Estilos CSS personalizados, também chamados de estilos de classe, permitem definir atributos
de estilo a qualquer faixa ou bloco de texto. Veja “Aplicação de um estilo (classe) CSS
personalizado”, na página 310.
• Os estilos de tags HTML redefinem a formatação de uma tag específica, como h1. Quando for
criado ou alterado um estilo CSS para a tag h1, todos os textos formatados com a tag h1 serão
imediatamente atualizados.
• Os estilos do seletor CSS redefinem a formatação de uma determinada combinação de tags
(por exemplo: td h2 será aplicado sempre que um cabeçalho h2 aparecer em uma célula de
tabela) ou de todas as tags que contiverem um atributo id (por exemplo: #myStyle será aplicado
a todas as tags que contiverem o par atributo-valor ID="myStyle").
As folhas de estilos CSS residem na área head de um documento. Estilos CSS podem definir os
atributos de formatação para tags HTML, faixas de texto identificadas por um atributo class. O
Dreamweaver MX reconhece os estilos definidos em documentos existentes, contanto que eles
estejam em conformidade com as instruções CSS.
Dica: Para exibir o guia O’Reilly de referência de CSS, distribuído com o Dreamweaver, clique no botão Referência,
localizado na barra de ferramentas, e escolha Referência de HTML O'Reilly, no menu pop-up.
306 Capítulo 19
A formatação HTML manual anula a formatação aplicada com os estilos CSS (ou HTML). Para
que os estilos CSS controlem a formatação de um parágrafo, remover toda a formatação HTML
manual ou os estilos HTML.
A maioria dos atributos de estilo aplicados podem ser exibidos na janela do documento. Também
é possível visualizar o documento em uma janela do navegador para vê-lo aplicado. Alguns dos
atributos de estilo CSS têm uma aparência diferente no Microsoft Internet Explorer 4.0 e no
Netscape Navigator 4.0, e alguns não contam atualmente com suporte de nenhum navegador.
Durante o trabalho no painel Estilos CSS, é possível utilizar o recurso Folhas de estilo para design
do Dreamweaver. Este recurso permite ocultar ou mostrar atributos de folha de estilo durante o
projeto de uma página no Dreamweaver (por exemplo: para exibir um documento com uma folha
de estilo projetada para o Navigator ou o Internet Explorer). Para obter informações sobre a
utilização de Folhas de estilo para design, veja “Utilização de folhas de estilos para design”, na
página 313.
Como utilizar o painel Estilos CSS

O painel Estilos CSS é utilizado para criar, exibir propriedades de e aplicar estilos CSS a
elementos de um documento.
Para abrir o painel Estilos CSS, seguir um dos procedimentos abaixo:
• Escolha Janela > Estilos CSS.

• Pressione Shift+F11.
Os botões de opção Aplicar estilos e Editar estilos, localizados na parte superior do painel Estilos
CSS, permitem selecionar diferentes visualizações dos estilos CSS associados ao documento atual.
É possível utilizar a visualização Aplicar estilos para selecionar um estilo de classe para aplicar a
um elemento no documento. A visualização Aplicar estilos só exibe estilos (classe) personalizados.
Estilos HTML redefinidos e estilos de seletor não são exibidos neste painel. Como eles estão
associados a uma tag de HTML, seus atributos de estilo são automaticamente aplicados a
quaisquer tags do documento afetadas pelo estilo definido. Por exemplo: se forem definidos
atributos de estilo para a tag de tabela, uma tabela do documento será atualizada automaticamente
com as definições de estilo selecionadas.

A visualização Editar estilos permite verificar a definição de estilo dos estilos associados ao
documento atual. A visualização Editar estilos exibe definição de estilo de estilos (classe) CSS
personalizados, tags HTML redefinidas e estilos de seletor CSS. A visualização Editar estilos
também é utilizada para exibir Folhas de estilo para design que foram aplicadas ao documento.
À medida que uma folha de estilo CSS é criada ou anexada, o nome e os atributos do estilo são
exibidos na visualização Editar estilos do painel Estilos CSS. Editar estilos lista todos os seletores
definidos em todas as tags de estilo e vinculados externamente ou folhas de estilo importadas.
Aplicar estilos permite exibir estilos aplicados no documento atual, bem como estilos disponíveis
em uma folha de estilo externa anexada.
Quando for criado um estilo (classe) personalizado, ele aparecerá no painel Estilos CSS e no
submenu Texto > Estilos CSS.
Os botões a seguir estão localizados na parte inferior do painel Estilos CSS:
O botão Anexar a folha de estilos abre a caixa de diálogo Vincular a folha de estilos externa.
Selecione uma folha de estilos externa para vincular ou importar para o documento atual. Para
obter informações sobre como anexar uma folha de estilos externa, veja “Criação e vinculação de
uma folha de estilos CSS externa”, na página 311.
O botão Novo estilo CSS abre a caixa de diálogo Novo estilo CSS. Utilize o diálogo Novos estilos
CSS para selecionar o tipo de estilo que está sendo criado - por exemplo: para criar um estilo de
classe, redefinir uma tag de HTML ou definir um seletor CSS. Para obter informações sobre
como criar um novo estilo, veja “Criação de um novo estilo CSS”, na página 309.
A opção Editar a folha de estilos abre a caixa de diálogo Definição de estilos CSS. Editar qualquer
um dos estilos no documento atual ou em uma folha de estilos externa. Para obter informações
sobre a atualização de uma folha de estilos, veja “Edição de um estilo CSS”, na página 312.
A opção Excluir o estilo CSS remove o estilo selecionado do painel Estilos CSS e remove a
formatação de qualquer elemento ao qual o estilo tenha sido aplicado.
Observação: Clique com o botão direito do mouse no painel Estilos CSS para abrir um menu contextual de opções
para trabalhar com comandos da Folha de estilos CSS.
308 Capítulo 19
Criação de um novo estilo CSS
Crie um estilo CSS para automatizar a formatação das tags HTML ou uma faixa de texto
identificada por um atributo class.
Para criar um novo estilo CSS:
1 Coloque o ponto de inserção no documento e seguir um dos procedimentos abaixo para abrir a
caixa de diálogo Novo estilo CSS:
• No painel Estilos CSS (Janela > Estilos CSS), clique no botão Novo estilo CSS (+), localizado
na área inferior direita do painel.
• No inspetor de propriedades do texto, clique no botão Alternar modo CSS/HTML, se
necessário, para alternar para o Modo CSS e, em seguida, no menu pop-up Estilo CSS,
selecione Novo estilo CSS.
• Escolha Texto > Estilos CSS > Novo estilo CSS.
A caixa de diálogo Novo estilo CSS é exibida.
2 Defina o tipo de estilo CSS que deseja criar:
• Para criar um estilo personalizado que possa ser aplicado como um atributo class a uma faixa
ou bloco de texto, selecione Criar estilo personalizado (Classe) e, em seguida, no campo Nome,
digite um nome para o estilo.
Observação: Os nomes de estilo personalizado (classe) devem iniciar com um ponto e podem conter qualquer
combinação de letras e números. Por exemplo: .cabeçalhocomercial1. Caso o ponto não seja inserido, o
Dreamweaver o digitará automaticamente.
• Para redefinir a formatação padrão de uma HTML específica, selecione Redefinir a tag de
HTML e, em seguida, no campo Tag, digite uma tag de HTML ou escolher uma no menu
pop-up.
• Para definir a formatação de uma determinada combinação de tags ou de todas as tags que
contêm um atributo Id específico, selecione Utilizar o seletor de CSS e, em seguida, no campo
Seletor, digite uma ou mais tags de HTML ou escolha uma no menu pop-up. Os seletores
disponíveis no menu pop-up são a:active, a:hover, a:link e a:visited.
3 Selecione o local onde o estilo será definido:
• Para criar uma folha de estilos externa, escolha Novo arquivo de folha de estilos.
• Para incorporar o estilo no documento atual, escolha Apenas este documento.
4 Clique em OK.
A caixa de diálogo Definição do estilo é exibida.
5 Escolha as opções de estilo a serem definidas para o novo estilo CSS.
6 Ao concluir a definição de atributos de estilo, clique em OK.
Para obter informações sobre definições de estilo CSS específicas, veja os tópicos a seguir na Ajuda
do Dreamweaver:
• Definição de propriedades do tipo CSS
• Definição de propriedades de fundo do estilo CSS
• Definição de propriedades de bloco do estilo CSS
• Definição de propriedades de caixa do estilo CSS

• Definição de propriedades de borda do estilo CSS
• Definição de propriedades de lista do estilo CSS
• Definição de propriedades de posicionamento do estilo CSS
• Definição de propriedades de extensões do estilo CSS
Aplicação de um estilo (classe) CSS personalizado

Os estilos (classes) personalizados são o único tipo de estilo CSS que pode ser aplicado a qualquer
texto em um documento, sem levar em consideração as tags que o controlam. Todos os estilos
(classe) personalizados associados ao documento atual são exibidos na visualização Aplicar estilo
do painel Estilos CSS e no modo CSS do inspetor de propriedades do texto.
A maioria dos estilos atualizados é exibida de imediato, mas é necessário visualizar a página em
um navegador para verificar se um estilo foi aplicado conforme esperado. Quando dois ou mais
estilos CSS forem aplicados ao mesmo texto, estes poderão se tornar conflitantes e produzir
resultados inesperados. Consulte “Sobre os estilos conflitantes”, na página 314, para obter mais
informações.
Para aplicar um estilo CSS personalizado:
1 No documento, selecione o texto ao qual será aplicado um estilo CSS.

Coloque o ponto de inserção em um parágrafo, para aplicar o estilo ao parágrafo inteiro.
Se for selecionada uma faixa de texto em um único parágrafo, o estilo CSS afetará apenas a faixa
selecionada.
Para especificar a tag exata à qual o estilo CSS deve ser aplicado, selecione a tag no seletor de
tags, localizado na parte inferior esquerda da janela do documento.
2 Para aplicar um estilo de classe, seguir um dos procedimentos abaixo:
• No painel Estilos CSS (Janela > Estilos CSS), selecione Aplicar estilos e, em seguida, na lista
Estilos CSS, clique no nome do estilo que deseja aplicar.
necessário, para alternar para o Modo CSS e, em seguida, no menu pop-up Estilo CSS, selecione
o estilo de classe que deseja aplicar.
• Na janela do documento, clique com o botão direito do mouse no texto selecionado e, no
menu contextual, escolha Estilos CSS e selecionar o estilo que deseja aplicar.
• Selecione Texto > Estilos CSS e, no submenu, selecione o estilo que deseja aplicar.
Para remover um estilo personalizado de uma seleção:
Selecione o objeto ou texto cujo estilo deseja remover e seguir um dos procedimentos abaixo:
necessário, para alternar para o Modo CSS e, em seguida, no menu pop-up Estilo CSS,
selecione Nenhum estilo CSS.
• No painel Estilos CSS, selecione a visualização Aplicar estilos e escolha Nenhum estilo CSS.
310 Capítulo 19
Criação e vinculação de uma folha de estilos CSS externa
Uma folha de estilos CSS é um arquivo de texto externo que contém especificações de estilos e
formatação. Quando uma folha de estilos CSS externa for editada, todos os documentos a ela
vinculados serão atualizados com essas alterações. É possível exportar os estilos CSS de um
documento para criar uma nova folha de estilos CSS e, em seguida, anexar ou vincular a uma
folha de estilos externa, a fim de aplicar os estilos nela contidos.
Além das folhas de estilos CSS criadas, é possível utilizar as folhas de estilos CSS que acompanham
o Dreamweaver e anexá-las a páginas de um site. Para obter informações sobre a utilização de folhas
de estilos de projeto incluídas no Dreamweaver, veja “Como criar um documento a partir de um
arquivo de projeto do Dreamweaver”, na página 117.
Para obter informações sobre a aplicação de um estilo, veja “Aplicação de um estilo (classe) CSS
personalizado”, na página 310.
Para vincular ou importar uma folha de estilos CSS externa:
1 Abra o painel Estilos CSS seguindo um dos procedimentos abaixo:

• Escolha Janela > Estilos CSS
• Pressione Shift + F11
• Clique no ícone Estilos CSS no Iniciador.
2 No painel Estilos CSS, clique no botão Anexar a folha de estilos.
A caixa Vincular a folha de estilos externa é exibida.
3 Na caixa de diálogo Vincular a folha de estilos externa, seguir um dos procedimentos abaixo:
• Clique em Procurar para procurar uma folha de estilos CSS externa, ou digite o caminho da
folha de estilos na caixa Arquivo/URL.
4 Em Adicionar como, selecionar uma das opções:
• Para criar um link entre o documento atual e uma folha de estilos externa, escolha Link.
Isso cria uma tag link href no código HTML e referencia a URL na qual está localizada a folha
de estilos publicada. Esse método conta com suporte do Microsoft Internet Explorer e do
Netscape Navigator.
• Para referenciar uma folha de estilos externa, escolha Importar. Isto cria uma tag @import no
código HTML, e referencia a URL na qual a folha de estilos publicada está localizada. Este
método não funciona com o Netscape Navigator.
5 Clique em OK.
O nome da folha de estilos CSS externa é exibido na visualização Editar estilos do painel
Estilos CSS, e estilos (classe) personalizados são exibidos na visualização Aplicar estilos
precedidos do identificador da folha de estilos externa.

Edição de um estilo CSS
É possível editar facilmente os estilos internos e externos aplicados a um documento. Na
visualização Editar estilos, selecionar o estilo a ser alterado e, em seguida, abrir a caixa de diálogo
Definição de estilos CSS e modificar o estilo.
Quando uma folha de estilos CSS que controla o texto no documento for editada, o texto inteiro
controlado por essa folha de estilos CSS será reformatado instantaneamente. As edições em uma
folha de estilos externa afetam todos os documentos vinculados a ela.
É possível definir um editor externo para editar folhas de estilo. Para obter informações sobre a
configuração de um editor externo, veja “Como iniciar um editor externo para arquivos de
mídia”, na página 346.
Observação: Caso o TopStyle, um editor CSS da Bradbury Software, tenha sido instalado no seu computador, o
Dreamweaver o detectará automaticamente e o definirá como o editor externo para arquivos .css. Uma cópia de
avaliação do Topstyle acompanha o Dreamweaver.
Para editar um estilo CSS:
1 No painel Estilos CSS, clique no botão de opção Editar os estilos para visualizar os estilos no
documento atual.
2 Clique no estilo a ser editado para selecioná-lo e, em seguida, seguir um dos procedimentos
abaixo:
• Clique duas vezes no estilo selecionado.
• Clique com o botão direito do mouse e em seguida, escolha Editar.
• Clique no botão Editar folha de estilos, localizado na parte inferior do painel Estilos CSS.
A caixa de diálogo Definição de estilos CSS é aberta.
3 Modificar o estilo conforme desejado e, em seguida, clique em OK.
Edição de uma folha de estilos CSS

Uma folha de estilos CSS costuma incluir um ou mais estilos. É possível editar um estilo separado
em uma folha de estilos CSS (veja “Edição de um estilo CSS”, na página 312), mas às vezes é
necessário editar vários estilos.
A caixa de diálogo Editar folha de estilos permite trabalhar com folhas de estilos de diversas
formas. Utilize essa caixa para vincular a uma folha de estilos CSS externa, criar uma nova folha de
estilos CSS, editar uma folha de estilos CSS existente ou para duplicar ou remover uma folha de
estilos CSS.
Para editar uma folha de estilos CSS:
1 No painel Estilos CSS, selecione Editar os estilos.

2 Na lista Estilos, clique na folha de estilos a ser editada para selecioná-lo e, em seguida, seguir
um dos procedimentos abaixo:
• Clique no botão Editar folhas de estilos, localizado na parte inferior do painel Estilos CSS.
• Clique com o botão direito do mouse na folha de estilos e, em seguida, escolha Editar folha de
estilos. Depois, na caixa de diálogo que for exibida, selecionar a folha de estilos a ser editada e,
em seguida, clique em Editar.
Os estilos da folha de estilos CSS selecionada são exibidos na caixa de diálogo.
312 Capítulo 19
3 Na caixa de diálogo, selecionar o estilo a ser editado e, em seguida, clique em Editar.
A caixa de diálogo Definição de estilos CSS é exibida.
4 Modificar os estilos conforme desejado e, em seguida, clique em OK.
Utilização de folhas de estilos para design

Folhas de estilos para design permitem mostrar ou ocultar design aplicado por uma folha de
estilos CSS, conforme o usuário trabalha em um documento Dreamweaver. Por exemplo: é
possível utilizar esta opção para incluir ou excluir o efeito de uma folha de estilos apenas do
Macintosh ou apenas do Windows, conforme o usuário projeta uma página.
As folhas de estilos para design só se aplicam durante o design utilizando o documento do
Dreamweaver. Quando a página é exibida em uma janela do navegador, apenas os estilos
realmente anexados ou incorporados no documento são exibidos em um navegador.
Para mostrar ou ocultar uma folha de estilos CSS para design:
1 Abra a caixa de diálogo Folhas de estilos para design, seguindo um dos procedimentos abaixo:
• Clique com o botão direito do mouse no painel Estilos CSS. No menu contextual, selecione
Folha de estilos para design.
• Escolha Texto > Estilos CSS > Folhas de estilos para design.
2 Na caixa de diálogo, definir opções para mostrar ou ocultar uma folha de estilos selecionada.
• Para exibir uma folha de estilos CSS para design, clique no botão de adição (+) acima de
Mostrar apenas na fase de design. Em seguida, na caixa de diálogo Selecionar uma folha de
estilos, navegar até a folha de estilos CSS a ser mostrada.
• Para ocultar uma folha de estilos CSS, clique no botão de adição (+) acima de Ocultar na fase
de design. Em seguida, na caixa de diálogo Selecionar uma folha de estilos, navegar até a folha
de estilos CSS a ser mostrada.
• Para remover uma folha de estilos de uma das listas, clique na folha de estilos a ser removida.
Em seguida, clique no botão de subtração (–) apropriado.
3 Clique em OK para fechar o diálogo.
O painel Estilos CSS é atualizado com o nome da folha de estilos selecionada junto com um
indicador, “oculto” ou “design”, para refletir o status da folha de estilos.
Exportação de estilos para criar uma folha de estilos CSS

Os estilos de um documento podem ser exportados para criar uma nova folha de estilos CSS. Em
seguida, ela pode ser vinculada a outros documentos, para que os estilos sejam aplicados.
Para exportar estilos CSS de um documento e criar uma folha de estilos CSS:
1 Escolha Arquivo > Exportar > Exportar os estilos CSS, ou selecionar Texto > Exportar a folha
de estilos.
A caixa de diálogo Exportar os estilos como um arquivo CSS é exibida.
2 Digite um nome para o estilo e clique em Salvar.
O estilo será salvo como uma folha de estilos CSS.

Sobre os estilos conflitantes
Quando dois ou mais estilos CSS forem aplicados ao mesmo texto, estes poderão se tornar
conflitantes e produzir resultados inesperados. Os navegadores aplicam os atributos de estilo
segundo as regras abaixo:
• Se dois estilos forem aplicados ao mesmo texto, o navegador exibirá todos os atributos de
ambos os estilos, a menos que os atributos específicos sejam conflitantes. Por exemplo: um
estilo pode especificar azul para a cor do texto e outro definir vermelho.
• Se os atributos de dois estilos aplicados ao mesmo texto forem conflitantes, o navegador exibirá
o atributo do estilo mais próximo (àquele do texto).
• Se houver um conflito direto, os atributos dos estilos CSS (aplicados com o atributo class )
anularão aqueles dos estilos de tags HTML.
No exemplo a seguir, o estilo definido para h1 deve especificar a fonte, o tamanho e a cor para todos
os parágrafos h1, mas o estilo CSS personalizado .Blue aplicado a esse parágrafo anula a definição de
cor no estilo H1. O segundo estilo CSS personalizado .Red anula o .Blue porque ele está contido no
estilo .Blue.
<h1><span class="Blue">Este parágrafo está controlado pelo estilo personalizado .Blue e pelo
estilo h1
de tag de HTML.<span class="Red">Exceto pelo fato de esta sentença ser controlada pelo estilo
.Red.</span>
Agora, estamos de volta ao estilo .Blue.</span></h1>
Conversão de estilos CSS em tags de HTML

Se os estilos CSS forem utilizados para especificar a formatação do texto (como família, tamanho,
cor e decoração das fontes) e, posteriormente, o usuário decidir tornar a formatação visível em um
navegador 3.0, será possível utilizar o comando Arquivo > Converter > compatível com navegador
3.0, para converter o maior número de informações possíveis sobre os estilos para as tags de
HTML.
Observação: Nem todos os estilos CSS podem ser convertidos em HTML, porque as tags HTML não abrangem
ou oferecem suporte a todos os atributos possíveis nas CSS.
Para converter um arquivo que utiliza os estilos CSS em um arquivo compatível com navegador 3.0:
1 Escolha Arquivo > Converter > Compatível com navegador 3.0.

2 Na caixa de diálogo que aparecer, escolha Estilos CSS em markup de HTML.
Quando a opção Camadas em tabelas for selecionada, o Dreamweaver substituirá todas as
camadas por uma tabela e manterá o posicionamento original.
Os estilos CSS serão substituídos, onde for possível, por tags de HTML, como b e font.
Qualquer markup de CSS que não puder ser convertido em HTML será removido. Veja
“Tabela de conversão de CSS em markup de HTML”, na página 315 para obter informações
sobre quais estilos serão convertidos e quais serão removidos.
3 Clique em OK. O Dreamweaver abrirá o arquivo convertido em uma nova janela sem título.
Observação: É necessário executar este procedimento de conversão sempre que o arquivo original for alterado,
para atualizar o arquivo compatível com a versão-3.0. Por esse motivo, recomendamos que isto seja efetuado
apenas depois que você estiver inteiramente satisfeito com o arquivo original.
314 Capítulo 19
Tabela de conversão de CSS em markup de HTML
Os atributos CSS relacionados na tabela abaixo são convertidos em markup de HTML utilizando
o comando Arquivo > Converter > Compatível com navegador 3.0 (veja “Conversão de estilos
CSS em tags de HTML”, na página 314). Os atributos não contidos na tabela serão removidos.
Atributo CSS Convertido em
color FONT COLOR
font-family FONT FACE
font-size FONT SIZE="[1-7]"
font-style: oblique I
font-style: italic I
font-weight B
list-style-type: square UL TYPE="square"
list-style-type: circle UL TYPE="circle"
list-style-type: disc UL TYPE="disc"
list-style-type: upper-roman OL TYPE="I"
list-style-type: lower-roman OL TYPE="i"
list-style-type: upper-alpha OL TYPE="A"
list-style-type: lower-alpha OL TYPE="a"
list-style UL ou OL com TYPE, conforme for adequado
text-align P ALIGN ou DIV ALIGN, conforme for adequado
text-decoration: underline U
text-decoration: line-through STRIKE
Verificação ortográfica
Utilize o comando Verificar a ortografia, no menu Texto, para verificar a ortografia no documento
atual. Esse comando ignora as tags HTML e valores de atributos.
Como padrão, a verificação ortográfica utiliza o dicionário ortográfico de inglês dos EUA. Para
alterar o dicionário, escolha Editar > Preferências > Geral. Em seguida, no menu pop-up
Dicionário ortográfico, selecionar o dicionário a ser utilizado. Pode-se fazer o download de
dicionários para idiomas adicionais a partir da Central de suporte do Dreamweaver.

Para verificar e corrigir a ortografia:
1 Escolha Texto > Verificar a ortografia ou pressionar Shift+F7.

Quando o Dreamweaver encontra uma palavra não reconhecida, a caixa de diálogo Verificar a
ortografia é exibida.
2 Na caixa Verificar a ortografia, escolher a opção apropriada com base na forma como a
discrepância será tratada:
Adicionar ao dicionário pessoal adiciona a palavra não-reconhecida ao seu dicionário pessoal.
Ignorar ignora a ocorrência de uma palavra não-reconhecida.
Ignorar todas ignora todas as ocorrências de uma palavra não-reconhecida.
A opção Alterar substitui esta instância da palavra não-reconhecida pelo texto digitado na caixa
de texto Alterar para, ou pela seleção na lista Sugestões.
Alterar todas substitui todas as ocorrências da palavra não-reconhecida.
Busca e substituição de texto

É possível realizar uma busca de texto, texto circundado por determinadas tags ou tags e atributos
HTML no documento atual, em arquivos específicos, em um diretório ou no site inteiro.
Comandos diferentes são utilizados para procurar arquivos/texto e/ou tags de HTML 1 em
arquivos: Localizar no site local e Localizar no site remoto buscam arquivos, enquanto Editar >
Localizar e substituir procura texto e tags em arquivos.
Para buscar texto e/ou HTML em documentos:

• Na visualização do projeto, na janela do documento ou no painel do site, escolha Editar >
Localizar e Substituir.
• Na visualização do código, clique com o botão direito do mouse e escolher Localizar e
substituir no menu contextual.
2 Na caixa de diálogo Localizar e substituir que é exibida, utilizar a opção Localizar em para
especificar os arquivos nos quais a busca deverá ser executada:
• Documento atual restringe a busca ao documento ativo. Esta opção estará disponível apenas
quando for escolhida Localizar ou substituir, na janela ativa do documento ou no menu
contextual, no inspetor de código.
• A escolha de Todo o site local expande a busca para todos os documentos HTML, arquivos de
biblioteca e documentos de texto localizados no site. Após a escolha de Site atual, o nome deste
aparecerá à direita do menu pop-up. Se este não for o site no qual deseja efetuar a busca,
escolher um outro site no menu pop-up do site atual, no painel do site.
• Arquivos selecionados do site restringe a busca aos arquivos e pastas que estiverem selecionados
no momento no painel do site. Esta opção estará disponível apenas quando Localizar ou
substituir tiver sido escolhida no painel do site ativo (isto é, na frente da janela do documento).
• A escolha de Pasta restringe a busca a um grupo específico de arquivos. Após escolher a pasta,
clique no ícone correspondente à pasta, para procurar e selecionar o diretório no qual será
efetuada a busca.
316 Capítulo 19
3 Utilize a opção Procurar para especificar o tipo de busca a ser efetuada.
• A escolha de Código-fonte permite procurar determinadas seqüências de texto no código-fonte
HTML. Veja “Como procurar e substituir tags e atributos”, na página 209.
• A escolha de Texto permite procurar determinadas seqüências de texto na janela do
documento. Uma busca de texto ignora qualquer HTML que interrompa a seqüência. Por
exemplo: uma busca de o cão preto coincidiria com o cão preto e o <i>cão</i> preto.
• A escolha de Texto avanç. permite procurar determinadas seqüências de texto dentro ou fora de
uma ou mais tags. Por exemplo: em um documento que contém o código HTML a seguir, a
procura de tenta fora da tag i acarretaria a localização apenas da segunda instância da palavra
tenta: João <i>tenta</i> entregar o trabalho dentro do prazo, mas nem sempre consegue. Ele
sempre tenta cumprir os prazos. Veja “Como procurar texto contido em tags específicas”, na
página 210.
• A escolha de Tag específica permite procurar determinadas tags, atributos e valores de atributo,
como todas as tags td com a definição de valign para top. Veja “Como procurar tags e
atributos”, na página 210.
Observação: A ativação através das teclas Control e Enter ou Shift e Enter adiciona quebras de linha nos
campos de busca de texto, permitindo a procura de um caractere de retorno. Certifique-se de que a opção
Ignorar os diferentes espaços em branco esteja desmarcada ao fazer essa busca, quando não forem utilizadas
as expressões regulares. Observar que esse procedimento localiza um determinado caractere de retorno, mas
não apenas uma quebra de linha; por exemplo: não localizará uma tag <br> ou <p>. Os caracteres de retorno são
exibidos como espaços na visualização do projeto e não como quebras de linha.
4 Utilize uma das opções a seguir para expandir ou limitar a busca:

• A opção Coincidir maiúsc./minúsc restringe a busca ao texto que coincidir exatamente com a
caixa do texto a ser localizado. Por exemplo: se você tentar localizar o chapéu marrom, não
encontrará O chapéu marrom.
Observação: A opção Ignorar os diferentes espaços em branco trata qualquer espaço em branco como espaço
simples, com o intuito de coincidir com a busca. Por exemplo: com esta opção selecionada, this text coincidiria
com this text, porém não com thistext. Esta opção não estará disponível quando Utilizar expressões
regulares estiver selecionada; neste caso, será necessário escrever textualmente a expressão normal para
ignorar qualquer espaço em branco Observe que as tags <p> e <br> não são consideradas espaço em branco.
• A opção Utilizar expressões regulares acarreta a interpretação de certos caracteres e cadeias de

caracteres pequenas (como ?, *, \w e \b) da seqüência de busca como operadores comuns de
expressões. Por exemplo: a busca de o cão b\w*\b coincidirá com o cão preto e o cão policial.
Veja “Sobre expressões comuns”, na página 212.
Observação: Se você estiver trabalhando na visualização de código, fizer alterações no seu documento e tentar
localizar e substituir qualquer item que não seja código-fonte, aparecerá uma caixa de diálogo informando que o
Dreamweaver está sincronizando as duas visualizações antes de efetuar a busca. Para obter mais informações
sobre a sincronização de visualizações, consultar “Exibição do seu código”, na página 185.

318 Capítulo 19
CAPÍTULO 20
Como inserir imagens
As imagens costumam ser utilizadas para adicionar interfaces gráficas (como botões de navegação),
apelo visual (por exemplo: fotografias) ou elementos de design interativos, como imagens
cambiáveis ou um mapa de imagens.
Em Macromedia Dreamweaver MX, é possível trabalhar na visualização do projeto ou do código
para inserir imagens em um documento. Ao adicionar imagens em um documento Dreamweaver,
é possível definir ou modificar propriedades da imagem e exibir as alterações diretamente na
Para configurar um fluxo de trabalho de criação da Web eficiente, é possível selecionar uma
preferência do editor de imagens e iniciá-la automaticamente para editar imagens durante o
trabalho no Dreamweaver.
• “Sobre uma imagem”, na página 319
• “Como inserir uma imagem”, na página 320
• “Redimensionamento de uma imagem”, na página 324
• “Criação de uma imagem cambiável”, na página 325
• “Utilização de um editor de imagens externo”, na página 326
• “Aplicação de um comportamento a imagens”, na página 327
Sobre uma imagem

Existem muitos tipos diferentes de formatos de arquivos gráficos, mas três formatos são
geralmente utilizados nas páginas da Web — GIF, JPEG e PNG. Atualmente, os formatos de
arquivo GIF e JPEG são os que apresentam melhor suporte e podem ser exibidos na maioria dos
navegadores.
Os arquivos PNG adaptam-se melhor a quase todos os tipos de gráfico da Web devido a sua
flexibilidade e pequeno tamanho de arquivo; entretanto, a exibição de imagens PNG conta com
suporte parcial apenas em Microsoft Internet Explorer (4.0 e navegadores posteriores) e em
Netscape Navigator (4.04 e navegadores posteriores). Portanto, a não ser que seu projeto se
destine a um público-alvo específico que utiliza um navegador com suporte para o formato PNG,
utilizar GIFs ou JPEGs para atingir um público maior.
319
Os arquivos GIF (Graphic Interchange Format) utilizam um máximo de 256 cores, e são mais
apropriados para exibir imagens em tons descontínuos ou aquelas que contêm grandes superfícies
de cores sólidas, como barras de navegação, botões, ícones, logotipos ou outras imagens com
matizes e cores uniformes, por exemplo).
O formato de arquivo JPEG (Joint Photographic Experts Group) é a opção mais avançada para
imagens fotográficas ou de tons contínuos, porque os arquivos JPEG podem conter milhões de
cores. À medida que a qualidade do arquivo JPEG aumenta, também aumentam o tamanho do
arquivo e o tempo de download. Geralmente é possível equilibrar a qualidade da imagem e o
tamanho do arquivo, compactando um arquivo JPEG.
O formato de arquivo PNG (Portable Network Group) é um substituto livre de patentes ao GIF,
que inclui suporte para as imagens que tiverem as cores indexadas, escala de cinza e true-color,
além de suporte ao canal alfa de transparência. O formato PNG é o formato de arquivo nativo de
Macromedia Fireworks MX. Os arquivos PNG mantêm todas as informações sobre camadas,
vetores, cores e efeitos originais (por exemplo: aplicação de sombra) e, a qualquer momento, todos
os elementos podem ser editados. Os arquivos devem ter extensão .png, para serem reconhecidos
como PNG por Macromedia Dreamweaver MX.
Observação: O suporte a PNG é inconsistente nos navegadores; portanto, ao trabalhar com arquivos PNG,
também é necessário exportá-los como GIFs ou JPEGs para garantir versões prontas para Web desses arquivos.
Como inserir uma imagem

Ao inserir uma imagem em um documento de Dreamweaver, o programa gerará automaticamente
uma referência desse arquivo no código-fonte HTML. Para garantir que essa referência esteja
correta, o arquivo de imagem deverá estar no site. Caso não esteja no site atual, o Dreamweaver
perguntará se o arquivo deve ser copiado para o site.
Também é possível adicionar imagens como conteúdo dinâmico. Para obter informações, veja
“Como tornar dinâmicas as imagens”, na página 564.
Para inserir uma imagem:
1 Posicione o ponto de inserção onde a imagem deverá ser exibida na janela do documento e,
depois, seguir um dos procedimentos abaixo:
• Na categoria Comuns da barra Inserir, clique no ícone Imagem.
• Na categoria Comuns da barra Inserir, arraste o ícone Imagem para a janela do documento (ou
para a janela de visualização do código se estiver trabalhando no código).
• Arraste uma imagem do painel Propriedades (Janela > Propriedades) até a localização desejada
na janela do documento; em seguida, ir para a etapa 3.
• Arraste uma imagem do painel Site até a localização desejada na janela do documento; em
seguida, ir para a etapa 3.
• Arraste uma imagem da área de trabalho até a localização na janela do documento; em seguida,
ir para a etapa 3.
2 Na caixa de diálogo exibida, seguir um dos procedimentos abaixo:
• Escolha Sistema de arquivos para escolher um arquivo gráfico.
• Escolha Fonte de dados para escolher uma origem da imagem dinâmica.
320 Capítulo 20
3 Procurar para escolher a imagem ou origem do conteúdo a ser inserido.
Se você estiver trabalhando em um documento que não foi salvo, o Dreamweaver irá gerar uma
referência file:// para esse arquivo de imagem. Ao salvar o documento em algum lugar do site,
Dreamweaver converterá a referência em um caminho relativo ao documento.
4 No inspetor de propriedades (Janela > Propriedades), definir propriedades da imagem.
Para obter mais informações, veja Definição das propriedades da imagem na Ajuda do
Dreamweaver.
“Definição de uma imagem de fundo ou de uma cor de fundo para a página”, na página 122
“Como utilizar imagens espaçadoras”, na página 269
Como inserir um alocador de espaço de imagem

Um alocador de espaço de imagem é um gráfico utilizado até que a arte-final esteja pronta para ser
adicionada a uma página da Web.
É possível definir determinados atributos do alocador de espaço. É possível, também, definir o
tamanho e a cor do alocador de espaço, bem como fornecê-la com um identificador de texto. A
cor de um alocador de espaço de imagem, os atributos de tamanho e identificador são exibidos
quando o alocador de espaço de imagem é exibido na janela do documento de Dreamweaver.
Quando exibido em uma janela do navegador, o texto do identificador e tamanho não é exibido.
Para inserir um alocador de espaço de imagem:
1 Na janela do documento, colocar o ponto de inserção onde deseja inserir o gráfico do alocador
de espaço.
• Na barra Inserir, selecione Comuns e, em seguida, clique no ícone Alocador de espaço de
imagem.
• Na barra Inserir, selecione Comuns e, em seguida, arraste no ícone Alocador de espaço de
imagem para a janela do documento.
• Escolha Inserir > Alocador de espaço de imagem.
A caixa de diálogo Alocador de espaço de imagem é exibida.
3 Na caixa de diálogo, selecione opções para o alocador de espaço de imagem.
Para obter informações detalhadas sobre como definir opções do alocador de espaço de
imagem, clique no botão Ajuda da caixa de diálogo.
4 Clique em OK.
Como inserir imagens 321

“Substituição de um alocador de espaço de imagem”, na página 322
“Redimensionamento de uma imagem”, na página 324
“Atualização de um alocador de espaço de imagem do Dreamweaver no Fireworks”, na
página 333.
Substituição de um alocador de espaço de imagem

Um alocador de espaço de imagem não é uma imagem gráfica exibida em um navegador. Antes da
publicação no seu site, é necessário substituir quaisquer alocadores de espaços de imagens que
tiver adicionado com arquivos gráficos amigáveis para Web, como GIFs ou JPEGs.
Com Fireworks MX, será possível criar uma nova imagem no alocador de espaço de imagem de
Dreamweaver. A nova imagem está definida para o mesmo tamanho que a imagem do alocador de
espaço. É possível editar a imagem e depois recolocá-la no Dreamweaver. Para obter informações
sobre a criação de uma imagem de substituição em Fireworks MX, veja “Atualização de um
alocador de espaço de imagem do Dreamweaver no Fireworks”, na página 333.
Para atualizar a origem da imagem:
1 Na janela do documento, seguir um dos procedimentos abaixo:

• Clique duas vezes no alocador de espaço de imagem.
• Clique no alocador de espaço de imagem para selecioná-lo e, em seguida, no inspetor de
propriedades (Janela > Propriedades), depois, clique no ícone correspondente à pasta próximo
ao campo Orig.
A caixa de diálogo Fonte da imagem é exibida.
2 Na caixa de diálogo, navegar para a imagem que substituirá o alocador de espaço de imagem.
3 Clique em OK.
A imagem selecionada é exibida no documento.
322 Capítulo 20
Alinhamento de uma imagem
Utilize o inspetor de propriedades para definir o alinhamento de uma imagem em relação a outros
elementos na mesma linha ou parágrafo.
Observação: HTML não fornece um modo de colocar texto ao redor dos limites da imagem, como é possível fazê-
lo com alguns aplicativos de processamento de texto.
É possível alinhar uma imagem a um texto, a outra imagem, a um plug-in ou a outros elementos na
mesma linha. Também é possível utilizar os botões de alinhamento (à esquerda, à direita e no
centro) para definir o alinhamento horizontal de uma imagem.
A opção Padrão geralmente especifica um alinhamento da linha de base. (o padrão pode ser
diferente, dependendo do navegador do visitante do site).
As opções Linha de base e Pela base alinham a parte inferior do objeto selecionado à linha de
base do texto (ou de outro elemento do mesmo parágrafo).
A opção Pelo topo alinha a parte superior de uma imagem à parte superior do item mais alto
(imagem ou texto) na linha atual.
A opção No meio alinha a parte central da imagem à linha de base da linha atual.
A opção Alto do texto alinha a parte superior da imagem à parte superior do caractere mais alto da
linha de texto.
A opção No meio absoluto alinha a parte central da imagem à parte central do texto da linha atual.
A opção O mais abaixo alinha a parte inferior da imagem à parte inferior da linha de texto (que
inclui descendentes, como na letra g).
A opção À esquerda coloca a imagem selecionada na margem esquerda, quebrando
automaticamente as linhas do texto em volta dele à direita. Se o texto alinhado à esquerda-preceder
o objeto na linha, ele geralmente forçará os objetos alinhados à esquerda a passarem para a próxima
linha.
A opção À direita coloca o objeto na margem direita, quebrando automaticamente as linhas do
texto em volta dele à esquerda. Se o texto alinhado à direita preceder o objeto na linha, ele
geralmente forçará os objetos alinhados à direita a passarem para a próxima linha.

Redimensionamento de uma imagem
É possível redimensionar visualmente elementos, como as imagens, plug-ins, filmes Macromedia
Shockwave ou Flash, applets e controles ActiveX na visualização do projeto na janela do
documento de Dreamweaver. O redimensionamento visual ajuda a determinar como um
elemento afetará o layout em diferentes dimensões.
O redimensionamento altera os atributos width e height do elemento para seus tamanhos
originais. Os campos L e A, no inspetor de propriedades, exibem a largura e altura do elemento
durante o redimensionamento. O tamanho do arquivo do elemento não é alterado.
Os elementos dos mapas de bits, como as imagens GIF, JPEG e PNG, podem tornar-se mal
definidos ou distorcidos, se os atributos width e height forem aumentados ou diminuídos.
Mantenha a tecla Shift pressionada durante o redimensionamento de um mapa de bits, para
manter as mesmas proporções. Contudo, recomendamos que esses elementos sejam
redimensionados visualmente no Dreamweaver apenas para determinar o layout. Após ter
especificado o tamanho da imagem, editar o arquivo em um aplicativo de edição de imagens. A
edição da imagem também poderá reduzir o seu respectivo tamanho de arquivo e, por
conseqüência, o tempo de download.
Para redimensionar um elemento:
1 Selecione o elemento (uma imagem ou filme Shockwave, por exemplo) na janela do

documento.
As alças de redimensionamento são exibidas na parte inferior, no lado direito do elemento e no
canto inferior direito. Se as alças de redimensionamento não forem exibidas, clique fora do
elemento a ser redimensionado e, em seguida, escolhê-lo novamente ou clique na tag
apropriada no seletor de tags, para selecionar o elemento.
2 Redimensionar o elemento, seguindo um dos procedimentos abaixo:
• Para ajustar a largura do elemento, arraste a alça de seleção no lado direito.
• Para ajustar a altura do elemento, arraste a alça de seleção da parte inferior.
• Para ajustar a largura e altura do elemento simultaneamente, arraste a alça de seleção do canto.
• Pressione a tecla Shift e arraste a alça de seleção do canto para preservar as proporções (entre
largura e altura) do elemento ao ajustar as suas dimensões.
Os elementos podem ser redimensionados visualmente até um mínimo de 8 pixels por 8. Para
ajustar a largura e a altura de um elemento a um tamanho menor (por exemplo: 1 pixel por 1),
utilizar o inspetor de propriedades para digitar um valor numérico.
Para retornar um elemento redimensionado às suas escalas originais, no inspetor de propriedades,
excluir os valores nos campos L e A, ou clique no botão Redefinir o tamanho.
324 Capítulo 20
Criação de uma imagem cambiável
Uma imagem cambiável é aquela que, quando exibida em um navegador, é alterada quando o
ponteiro é movido sobre a mesma. Esse tipo de imagem consiste, de fato, em duas imagens: a
imagem primária (exibida quando a página for carregada pela primeira vez) e a imagem secundária
(que será exibida quando o cursor for deslizado sobre a imagem primária). As imagens cambiáveis
deverão ter o mesmo tamanho; caso contrário, o Dreamweaver redimensionará automaticamente a
segunda imagem para que coincida com as propriedades da primeira.
É impossível veja o efeito de uma imagem cambiável na janela do documento de Dreamweaver.
Para veja o efeito cambiável, pressionar F12 para visualizar a página em um navegador e, depois,
rolar o ponteiro sobre a imagem.
As imagens cambiáveis são automaticamente definidas para responder ao evento onMouseOver.
Para obter informações sobre a definição de uma imagem que responda a um evento diferente
(um clique do mouse, por exemplo) ou sobre a edição de uma imagem cambiável para que exiba
uma imagem diferente, veja “Permutar a imagem”, na página 403.
A barra de navegação é uma forma mais complexa de imagem cambiável. Para criar uma barra de
navegação, utilizar o comando Inserir > Imagens interativas > Barra de navegação; veja “Inserção de
uma barra de navegação”, na página 449.
Para criar uma imagem cambiável:
1 Na janela do documento, coloque o ponto de inserção no local onde deverá ser exibida a
imagem cambiável.
2 Inserir a imagem cambiável por meio de um destes métodos:
• Na barra Inserir, selecione Comuns e depois clicar no ícone Alocador de espaço de imagem.
• Na barra Inserir, selecione Comuns e, em seguida, arraste o ícone de Imagem cambiável para o
local desejado na janela do documento.
• Escolha Inserir > Imagens interativas > Imagem cambiável.
A caixa de diálogo Inserir imagem cambiável é exibida.
3 Na caixa de texto Nome da imagem, digite um nome para a imagem cambiável.
4 Na caixa de texto Imagem original, clique em Procurar e selecione a imagem a ser exibida
quando a página carregar ou digitar o caminho do arquivo de imagem na caixa de texto.
5 Na caixa de texto Imagem cambiável, clique em Procurar e selecione a imagem a ser exibida
quando o ponteiro passar por cima da imagem original, ou digitar o caminho do arquivo de
imagem na caixa de texto.
6 Se desejar que as imagens sejam pré-carregadas no cache do navegador para não ocorrerem
atrasos quando o usuário passar o ponteiro sobre a imagem, selecione a opção Pré-carregar as
imagens.
7 Na caixa de texto Quando tiver clicado, vá para a URL, clique em Procurar e selecione o
arquivo ou digitar o caminho do arquivo a ser aberto quando um usuário clicar na imagem
cambiável.
Observação: Se não for definido um link para a imagem, Dreamweaver insere um link nulo (#) no código-fonte
HTML ao qual o comportamento de imagem cambiável estiver anexado. Se o link nulo for removido, a imagem
cambiável não funcionará.
8 Clique em OK para fechar a caixa de diálogo Inserir imagem cambiável.

9 Selecione Arquivo > Visualizar no navegador ou pressionar a tecla F12.
10 No navegador, passar o cursor sobre a imagem original.
A exibição pode alternar para a imagem cambiável.
Utilização de um editor de imagens externo

No Dreamweaver, é possível abrir uma imagem selecionada em um editor de imagens externo. Ao
retornar para o Dreamweaver, após salvar o arquivo de imagem editado, as alterações feitas na
imagem estarão visíveis na janela do documento.
É possível utilizar Macromedia Fireworks como um editor de imagens externo. Fireworks 3 e
posteriores utilizam Design Notes para controle onde o arquivo PNG original será armazenado no
disco rígido local. Ao abrir a imagem em Fireworks, ele permitirá a edição de PNG original.
Caso qualquer outro aplicativo tenha sido escolhido como editor de imagens externo e iniciado a
partir do Dreamweaver, o aplicativo abrirá a imagem selecionada. Utilize o editor de imagens para
modificar a imagem, salvar as alterações e, em seguida, exibir a imagem atualizada no
Dreamweaver.
Se o arquivo de imagem tiver sido gerado de um arquivo PNG, será possível abrir manualmente o
arquivo original, fazer alterações e salvar a imagem alterada. Dreamweaver ainda atualizará a
imagem na janela do documento no retorno ao programa.
Caso a imagem não apareça atualizada após voltar à janela de Dreamweaver, selecione a imagem e,
em seguida, clique no botão Atualizar, no inspetor de propriedades.
Como iniciar um editor de imagens externo

Escolha Editar > Preferências > Tipos de arquivos/editores para definir um editor de imagens
externo para os tipos de imagens especificados. Para obter mais informações sobre como escolher
um editor de imagens, veja Definição das preferências do editor de imagens externo, na Ajuda do
Dreamweaver.
Para iniciar o editor de imagens externo, seguir um dos procedimentos abaixo:
• Clique duas vezes nas imagens a serem editadas.

• Clique com o botão direito (em Windows) e na imagem a ser editada e, depois, escolha Editar
com >Procurar e selecione um editor.
• Selecione a imagem a ser editada e clique em Editar a imagem, no Inspetor de propriedades.
• Clique duas vezes no arquivo de imagem, no painel Site, para iniciar o editor de imagens
primário. Se não for especificado um editor de imagens, Dreamweaver iniciará o editor padrão
para o tipo de arquivo.
Observação: Quando uma imagem for aberta no painel Site, os recursos de integração de Fireworks descritos
acima não estarão em vigor e Fireworks não abrirá o arquivo PNG original. Para poder utilizar os recursos de
integração de Fireworks, abrir as imagens na janela do documento.
326 Capítulo 20
Aplicação de um comportamento a imagens
É possível aplicar qualquer comportamento disponível a uma imagem ou ponto ativo de imagem.
Quando um comportamento for aplicado a um ponto ativo, Dreamweaver inserirá o código-fonte
HTML na tag area. Três comportamentos se aplicam especificamente às imagens: Pré-carregar as
imagens, Permutar a imagem e Restaurar as imagens permutadas.
A opção Pré-carregar as imagens carrega as imagens que não são exibidas na página
imediatamente (como aquelas que serão permutadas com as linhas de tempo, comportamentos,
camadas ou JavaScript) no cache do navegador. Esse processo evita os atrasos causados pelo
download quando as imagens tiverem de ser exibidas. Veja “Pré-carregar as imagens”, na
página 393.
A opção Permutar a imagem permuta uma imagem por outra, alterando o atributo SRC da tag img.
Utilize esta ação para criar botões cambiáveis e outros efeitos em imagens (inclusive a permuta
simultânea de mais de uma imagem). Veja “Permutar a imagem”, na página 403.
A opção Restaurar as imagens permutadas restaura o último conjunto de imagens permutadas
aos seus arquivos de origem anteriores. Essa ação será adicionada automaticamente, sempre que
for anexada a ação Permutar a imagem a um objeto, como padrão. Não será necessário selecioná-
la manualmente. Veja “Restaurar a imagem permutada”, na página 404.
Também é possível utilizar comportamentos para criar sistemas de navegação mais sofisticados,
como uma barra de navegação ou um menu de salto. Veja “Criação das barras de navegação”, na
página 448 e “Criação de menus de salto”, na página 446.

328 Capítulo 20
CAPÍTULO 21
Integração do Dreamweaver com outros
aplicativos
O Macromedia Fireworks MX e o Macromedia Flash MX são ferramentas de desenvolvimento da

Web poderosas projetadas para criar imagens gráficas e filmes SWF visíveis em páginas da Web. O
Macromedia Dreamweaver MX é rigorosamente integrado a essas ferramentas para permitir a
simplificação do fluxo de trabalho de criação para a Web.
Para configurar uma integração suave entre o Dreamweaver e o Flash ou Fireworks, ative as
Design Notes ao definir os sites Dreamweaver. Por padrão, essa opção é selecionada previamente
na configuração do Site. Para obter mais informações sobre a ativação das Design Notes, veja
“Como ativar e desativar as Design Notes”, na página 105.
Ao exportar os arquivos do Fireworks ou Flash diretamente para um site Dreamweaver definido,
as Design Notes que contêm as referências ao arquivo de autoria PNG ou Flash (FLA) são
automaticamente exportadas para o site junto com o arquivo pronto para Web (GIF, JPEG, or
SWF).
É possível inserir facilmente as imagens ou tabelas do Fireworks e os filmes Flash em um
documento do Dreamweaver. Também é possível aproveitar a vantagem dos recursos de
integração entre o Dreamweaver e o Fireworks ou Flash para fazer as alterações em uma imagem
ou filme após a inserção em um documento do Dreamweaver.
Enquanto estiver trabalhando no Dreamweaver, também é possível iniciar o processo de produção
gráfica inserindo e atualizando um gráfico do alocador de espaço da imagem. Para obter
informações sobre os alocadores de espaço de imagens, veja “Como inserir um alocador de espaço
de imagem”, na página 321. Depois de inserir um alocador de espaço de imagem no
Dreamweaver, é possível acionar o Fireworks MX para criar uma nova imagem gráfica. No
Fireworks, é possível projetar a imagem gráfica, adicionar pontos ativos, comportamentos ou
qualquer elemento que deseje. É possível salvar a imagem gráfica como PNG e exportá-la como
arquivo ou arquivos gráficos prontos para Web, como GIF, JPEG ou, no caso de uma tabela
cortada, exportá-la como HTML e imagens.
Ao retornar ao Dreamweaver, a imagem ou a tabela substituída do Fireworks é atualizada
no documento.
329
“Especificação das preferências de acionamento e edição para os arquivos de origem do
Fireworks”, na página 332
“Como trabalhar com o Dreamweaver e o Fireworks”, na página 331
“Edição de uma imagem ou tabela do Fireworks”, na página 335
“Criação de um álbum de fotografias na Web”, na página 339
“Como trabalhar com Dreamweaver e Flash”, na página 341
“Edição de um filme Flash do Dreamweaver”, na página 342
Sobre a integração do Fireworks e do Flash

A edição Roundtrip e as Design Notes ativam o Dreamweaver para operações de integração com o
Fireworks e com o Flash. A edição Roundtrip garante que as atualizações do código são
transferidas corretamente entre o Dreamweaver e esses outros aplicativos, por exemplo: para
preservar os comportamentos cambiáveis ou os links para outros arquivos, enquanto as Design
Notes permitem que o Dreamweaver localize o documento de origem apropriado para uma
imagem exportada ou arquivo de filme. Para obter informações sobre a utilização das Design
Notes no Dreamweaver, veja “Como utilizar as Design Notes no Fireworks e no Flash com o
Além das informações de localização, as Design Notes contêm outras informações pertinentes sobre
os arquivos exportados. Por exemplo: ao exportar uma tabela do Fireworks, o Fireworks escreve uma
Design Note para cada arquivo de imagem exportado na tabela. Se o arquivo exportado contém
pontos ativos ou cambiáveis, o JavaScript dos pontos ativos ou cambiáveis está contido no
documento HTML que o Fireworks exporta.
Para obter melhores resultados, ao desenvolver imagens gráficas e filmes para publicação na Web,
salve a origem do Fireworks e do Flash e os arquivos prontos para Web em um site definido do
Dreamweaver. Esse procedimento garante que qualquer usuário que compartilhe o site poderá
localizar o documento de origem ao editar uma imagem ou tabela do Fireworks, ou ao editar um
filme SWF enquanto trabalha no Dreamweaver.
A chave para desenvolver um fluxo de trabalho suavemente integrado com esses aplicativos é
configurar primeiro o ambiente de trabalho. Para obter informações sobre a configuração do
ambiente de trabalho do Dreamweaver e do Fireworks, veja “Como trabalhar com o
Dreamweaver e o Fireworks”, na página 331. Para obter informações sobre a configuração do
ambiente de trabalho do Dreamweaver e do Flash, veja “Como trabalhar com Dreamweaver e
Flash”, na página 341.
330 Capítulo 21
Como trabalhar com o Dreamweaver e o Fireworks
O Dreamweaver e o Fireworks reconhecem e compartilham muitas edições de arquivos iguais,
incluindo alterações em links, mapas de imagens, cortes de tabela, etc. Juntos, os dois aplicativos
fornecem um fluxo de trabalho contínuo para edição, otimização e colocação dos arquivos
gráficos da Web em páginas HTML.
Para configurar um ambiente de trabalho integrado, conclua algumas tarefas preliminares, tais
como definir um site local no Dreamweaver e verificar se as Design Notes estão ativadas para o
site. As Design Notes são automaticamente ativadas, a menos que as definições padrão sejam
alteradas.
É necessário definir também o Fireworks como o editor de imagens externo primário para o
Dreamweaver acionar facilmente o Fireworks para edição. Para obter informações sobre a
definição do Fireworks como editor externo, veja “Utilização de um editor de imagens externo”,
na página 326.
Para garantir uma integração suave ao processo de acionamento e edição, quando estiver pronto
para exportar os arquivos Fireworks HTML e de imagens gráficas, exporte-os para a pasta do site
do Dreamweaver. Ao exportar uma imagem gráfica GIF ou JPEG do Fireworks para uma pasta do
site do Dreamweaver, o Fireworks cria uma pasta named _notes na mesma pasta. Essa pasta
contém as Design Notes, pequenos arquivos com a extensão de arquivo do Macromedia Note
(.mno).
As Design Notes contêm informações sobre os arquivos gráficos que o Fireworks exporta. Ao
acionar e editar uma imagem do Fireworks ou uma tabela no Dreamweaver, o Dreamweaver
utiliza essas informações para localizar o PNG de origem. Para obter informações sobre a
especificação de o Dreamweaver acionar automaticamente o arquivo PNG quando disponível,
veja “Especificação das preferências de acionamento e edição para os arquivos de origem do
Fireworks”, na página 332.
Ao selecionar uma imagem em um documento do Dreamweaver que foi exportado do Fireworks e
tem um arquivo .mno correspondente, o inspetor de propriedades exibe o ícone do Fireworks e o
caminho da origem do arquivo.
A definição do Fireworks como editor de imagens externo do Dreamweaver possibilita transitar
facilmente entre o Dreamweaver e o Fireworks quando é necessário editar uma imagem. Nas
preferências do Dreamweaver, defina o Fireworks como editor primário para os tipos de arquivos
gráficos—GIF, PNG e JPEG. Para obter informações sobre a definição de um editor de imagem,
veja “Utilização de um editor de imagens externo”, na página 326 ou Definição de preferências do
editor de imagem externo na Ajuda de Dreamweaver.
Integração do Dreamweaver com outros aplicativos 331

Especificação das preferências de acionamento e edição para os arquivos de
origem do Fireworks
As preferências de acionamento e edição do Fireworks permitem a especificação de como tratar os
arquivos de origem PNG ao acionar os arquivos do Fireworks de outro aplicativo, como o
Dreamweaver.
O Dreamweaver reconhece as preferências de acionamento e edição do Fireworks somente em
certos casos onde o usuário aciona e otimiza uma imagem do Fireworks. Especificamente, é
preciso estar acionando e otimizando uma imagem que não é parte de uma tabela do Fireworks e
não contém um caminho correto das Design Notes para um arquivo PNG de origem. Em todos
os outros casos, incluindo todos os casos de acionamento e edição das imagens do Fireworks, o
Dreamweaver aciona automaticamente o arquivo PNG de origem, solicitando a localização do
arquivo de origem, caso ele não possa ser encontrado.
Para especificar as preferências de acionamento e edição do Fireworks:
1 No Fireworks, escolha Editar > Preferências e clique na guia Acionar e editar.

2 Especifique as opções de preferência que serão utilizadas ao editar ou otimizar as imagens do
Fireworks colocadas em um aplicativo externo:
A opção Usar sempre o PNG de origem aciona automaticamente o arquivo PNG do Fireworks
que é definido na Design Note como a origem da imagem posicionada. As atualizações são
feitas tanto no PNG de origem quanto na imagem posicionada correspondente.
A opção Nunca usar o PNG de origemaciona automaticamente a imagem posicionada do
Fireworks, caso exista ou não um arquivo PNG de origem. As atualizações são feitas na imagem
posicionada apenas.
A opção Perguntar ao acionar permite a especificação que acionar ou não o arquivo PNG de
origem. Ao editar ou otimizar uma imagem posicionada, o Fireworks exibe uma mensagem
solicitando que ele tome uma decisão de acionamento e edição. Também é possível especificar
as preferências globais de acionamento e edição dessa mensagem.
Como inserir uma imagem do Fireworks em um documento Dreamweaver

As imagens gráficas do Fireworks podem ser colocadas em um documento Dreamweaver de várias
maneiras. É possível colocar uma imagem gráfica exportada do Fireworks diretamente em um
documento Dreamweaver, utilizando o comando Inserir imagem, ou criar uma nova imagem
gráfica do Fireworks de um alocador de espaço de imagem do Dreamweaver.
Para inserir um caractere especial em um documento:
1 No documento Dreamweaver, coloque o ponto de inserção onde deseja que a imagem seja
exibida e, depois, siga um dos procedimentos abaixo:
• Na categoria Comuns da barra Inserir, clique no botão Imagem ou arraste-o para o documento.
2 Navegue para o arquivo exportado do Fireworks desejado e clique em OK.
Observação: Se o arquivo do Fireworks não estiver no site do Dreamweaver atual, será exibida uma mensagem
perguntando se o usuário deseja copiar o arquivo para a pasta raiz. Clique em Sim.
332 Capítulo 21
Atualização de um alocador de espaço de imagem do Dreamweaver no
Fireworks
É possível criar uma imagem do alocador de espaço em um documento Dreamweaver e acionar o
Fireworks para projetar uma imagem gráfica ou tabela do Fireworks para substituí-lo. Para obter
informações sobre a inserção de um alocador de espaço de imagem, veja “Como inserir um
alocador de espaço de imagem”, na página 321.
Para criar uma nova imagem de um alocador de espaço de imagem, o usuário deve ter o
Dreamweaver MX e o Fireworks MX instalados no sistema. O Fireworks reconhece as definições a
seguir do alocador de espaço de imagem, que podem ter sido definidas ao trabalhar com o alocador
de espaço de imagem no Dreamweaver: tamanho da imagem relacionado ao tamanho da tela do
Fireworks, ID da imagem que o Fireworks utiliza como nome de documento padrão do arquivo de
origem e do arquivo de exportação criado, alinhamento de texto e comportamentos reconhecidos
pelo Fireworks (tais como imagem de troca, menu pop-up, barra de navegação e texto definido). O
Fireworks também reconhece os links anexados ao alocador de espaço de imagem enquanto trabalha
no Dreamweaver.
Observação: Apesar de os links adicionados a um alocador de espaço de imagem não poderem ser vistos no
Fireworks, eles são preservados. Se o usuário desenhar um ponto ativo e adicionar um link ao Fireworks MX, ele
não excluirá o link adicionado ao alocador de espaço de imagem no Dreamweaver. Entretanto, se desenhar um
corte no Fireworks na nova imagem, ele excluirá o link no documento Dreamweaver ao substituir o alocador de
espaço de imagem.
Essas definições do alocador de espaço de imagem são desativadas no inspetor de propriedades do

alocador de espaço de imagem, já que elas não foram reconhecidas pelo Fireworks: alinhamento
de imagem, cor, Vspace e Hspace e mapas.
No Fireworks MX, crie a nova imagem e clique em Concluído. O Fireworks solicita que o arquivo
seja salvo como um arquivo PNG (documento de origem) e exporte o arquivo em um formato
pronto para Web, tal como GIF, JPEG ou, no caso de imagens cortadas, como HTML e imagens.
A nova imagem ou tabela do Fireworks substitui automaticamente o alocador de espaço de
imagem no documento Dreamweaver.
Para editar uma imagem do alocador de espaço do Dreamweaver no Fireworks:
1 Certifique-se de que o Fireworks já foi definido como editor de imagens para os arquivos .png.
Para obter informações, veja Definição das preferências do editor de imagens externo na Ajuda
do Dreamweaver.
2 Na janela do documento, clique no alocador de espaço de imagem para selecioná-la.
3 Siga um dos procedimentos abaixo para acionar a edição do Fireworks:
• No inspetor de propriedades, clique em Criar.
• Pressione a tecla Control e clique duas vezes no alocador de espaço de imagem.

• Clique com o botão direito do mouse no alocador de espaço de imagem e escolha Criar
imagem no Fireworks.
O Fireworks é acionado no modo Edição do Dreamweaver
4 Utilize as opções do Fireworks para projetar a imagem.

5 Ao finalizar, clique em Concluído.
A caixa de diálogo Salvar como é exibida. O Fireworks avisa o usuário para salvar o arquivo
PNG.
6 No campo Salvar em, escolha a pasta definida como pasta do site local do Dreamweaver.
Se o usuário denominou o alocador de espaço de imagem quando o inseriu no documento
Dreamweaver, o Fireworks preenche o campo Nome do arquivo com esse nome. É possível alterar
o nome se desejar.
7 Clique em Salvar, para salvar o arquivo PNG.
A caixa de diálogo Exportar é exibida. Utilize essa caixa de diálogo para exportar a imagem
como GIF.
8 Na caixa de diálogo Salvar em, escolha a pasta do site local do Dreamweaver.
9 O campo de texto Nome é atualizado automaticamente com o mesmo nome utilizado para o
arquivo PNG. Digite o texto para alterar o nome, se desejar.
10 Para Salvar como tipo, selecione o tipo de arquivo ou arquivos que deseja exportar, por
exemplo: Somente imagens ou HTML e Imagens.
11 Clique em Salvar, para salvar o arquivo exportado.
O arquivo é salvo, e o foco retorna ao Dreamweaver. No documento Dreamweaver, o arquivo
exportado ou a tabela do Fireworks substitui o alocador de espaço de imagens.
334 Capítulo 21
Edição de uma imagem ou tabela do Fireworks
É possível acionar o Fireworks para editar as imagens inseridas em um documento Dreamweaver.
Quando o usuário aciona e edita uma imagem ou corte de imagem que é parte de uma tabela do
Fireworks, o Dreamweaver aciona o Fireworks e o arquivo PNG do qual a imagem ou tabela foi
exportada.
Quando a imagem é parte de uma tabela do Fireworks, é possível acionar a tabela inteira do
Fireworks para edições, enquanto houver o comentário  no código HTML. Se o
PNG de origem foi exportado do Fireworks para um site do Dreamweaver utilizando o HTML
do estilo Dreamweaver e a definição de imagens, o comentário da tabela do Fireworks é
automaticamente inserido no código HTML.
Para acionar e editar uma imagem do Fireworks colocada no Dreamweaver:
1 No Dreamweaver, escolha Janela > Propriedades para abrir o inspetor de propriedades caso
ainda não esteja aberto.
2 Clique na imagem ou corte de imagem para selecioná-la.
O inspetor de propriedades identifica a seleção como uma imagem ou tabela do Fireworks com
base no item selecionado, e exibe o nome do arquivo de origem PNG.
3 Para acionar a edição do Fireworks, siga um dos procedimentos abaixo:
• No inspetor de propriedades, clique em Editar.
• Pressione a tecla Control e clique duas vezes na imagem selecionada.
• Clique com o botão direito do mouse na imagem selecionada e escolha Editar com Fireworks
no menu contextual.
O Fireworks aciona e abre o PNG associado para edição.
Observação: Se o Fireworks não puder localizar o arquivo de origem, ele solicitará a localização do arquivo de
origem PNG. Ao trabalhar com o arquivo de origem do Fireworks, as alterações são salvas para o arquivo de
origem e para o arquivo exportado; caso contrário, somente o arquivo exportado é atualizado.
4 No Fireworks, edite o PNG de origem.

5 Ao terminar a edição, clique em Concluído.
O Fireworks salva as alterações no arquivo PNG, exporta a imagem atualizada (ou HTML e imagens)
e volta o foco ao Dreamweaver. No Dreamweaver, a imagem ou tabela atualizada é exibida.
Abertura de um Menu Pop-up do Fireworks no Dreamweaver

O Fireworks suporta menus pop-up baseados em imagem e em HTML. O Dreamweaver só
suporta menus pop-up baseados em HTML. No Dreamweaver, é possível abrir um menu pop-up
do Fireworks e fazer edições em todas as propriedades de item de menu, exceto para as imagens de
segundo plano dos menus pop-up baseados em imagem.
O comportamento da opção Mostrar menu pop-up, no Dreamweaver, permite a edição ou
atualização do conteúdo de um menu pop-up baseado em HTML do Fireworks. É possível
adicionar, excluir ou alterar os itens de menu, reorganizá-los e definir onde um menu está
posicionado em uma página. Para obter informações sobre a definição ou modificação das opções
do menu pop-up no Dreamweaver, veja “Mostrar o menu pop-up”, na página 399.

Se o menu pop-up que será editado é um menu pop-up baseado em imagem e é desejado
preservar o segundo plano da célula baseada em imagem, edite o menu pop-up no Fireworks em
vez do Dreamweaver.
Para editar as imagens de segundo plano em um menu pop-up baseado em imagem, selecione a
imagem que deseja atualizar e clique em Editar. Para obter informações sobre a edição de uma
imagem do Fireworks, veja “Edição de uma imagem ou tabela do Fireworks”, na página 335.
Para abrir o menu pop-up do Fireworks:
1 No documento Dreamweaver, selecione o ponto ativo ou a imagem que aciona o menu pop-
up.
2 Abra o painel Comportamentos (Shift+F3), se ele ainda não estiver aberto, e, na lista Ações,
clique-duas vezes em Mostrar o menu pop-up.
A caixa de diálogo Mostrar o menu pop-up é exibida.
3 Faça as alterações que desejar no menu pop-up.
4 Ao finalizar a modificação do menu pop-up, clique em OK.
Acionamento do Fireworks para otimizar uma imagem

É possível acionar o Fireworks do Dreamweaver para fazer alterações de exportação rápidas, tais
como redimensionamento de uma imagem ou alteração do tipo de arquivo, para imagens e
animações posicionadas do Fireworks. O Fireworks permite as alterações nas definições de
otimização, nas definições de animação, no tamanho e na área da imagem exportada.
Para alterar as definições de otimização de uma imagem do Fireworks colocada no

Dreamweaver:
1 No Dreamweaver, selecione a imagem desejada e escolha Comandos >

Otimizar Imagem no Fireworks.
2 Se solicitado, especifique se é para acionar um arquivo de origem do Fireworks para a imagem
posicionada.
3 No Fireworks, faça as alterações desejadas na caixa de diálogo Otimização:
• Para editar as definições de otimização, clique na guia Opções. Para obter mais informações,
veja Como utilizar o Fireworks.
• Para editar o tamanho e a área da imagem exportada, clique na guia Arquivo.
4 Ao terminar a edição da imagem, clique em Atualizar.
Ao clicar em Atualizar, a imagem é exportada utilizando as novas definições de otimização, o
GIF ou JPEG posicionado no Dreamweaver é atualizado, e o arquivo de origem PNG é salvo,
se um arquivo de origem foi selecionado.
Se o usuário alterou o formato da imagem, o verificador do link do Dreamweaver avisa sobre a
atualização das referências à imagem. Por exemplo: se o usuário alterou o formato de uma
imagem chamada my_image de GIF para JPEG, clicando em OK em, este prompt muda todas
as referências a my_image.gif no site para my_image.jpg.
336 Capítulo 21
Como inserir código HTML do Fireworks em um documento Dreamweaver
O comando Export no Fireworks permite a exportação e gravação das imagens otimizadas e dos
arquivos HTML em um local na pasta desejada do site do Dreamweaver. É possível inserir o arquivo
no Dreamweaver.
Para obter informações sobre os arquivos de exportação do Fireworks como HTML, veja Como
utilizar o Fireworks.
O Dreamweaver permite a inserção de um código HTML gerado pelo Fireworks, preenchido com
imagens associadas, cortes e JavaScript, em um documento. Esse recurso de inserção facilita a
criação de elementos de design no Fireworks e a incorporação deles a um documento
Dreamweaver existente.
Para inserir HTML do Fireworks em um documento do Dreamweaver:
1 No Dreamweaver, coloque o ponto de inserção onde deseja que comece o código HTML do
Fireworks.
• Escolha Inserir > Imagens interativas > HTML do Fireworks.
• Na categoria Comuns da barra Inserir, clique no botão Inserir HTML do Fireworks.
3 Na caixa de diálogo que for exibida, clique em Procurar para escolher o arquivo HTML
desejado do Fireworks.
4 Selecione a opção Excluir arquivo após inserção para mover o arquivo HTML do Fireworks
original para a Lixeira quando a operação estiver concluída.
Utilize essa opção, se não precisar mais do arquivo HTML do Fireworks após inseri-lo. Essa
opção não afeta o arquivo PNG de origem associado ao arquivo HTML.
Observação: Se o arquivo HTML estiver em uma unidade de disco da rede, ele será permanentemente
excluído—não movido para a Lixeira.
5 Clique em OK para inserir o código HTML, junto com as imagens associadas, cortes e
JavaScript, no documento Dreamweaver.
Como colar o código HTML do Fireworks no Dreamweaver

Uma maneira rápida de colocar as imagens e tabelas geradas pelo Fireworks no Dreamweaver é
copiar e colar o código HTML do Fireworks diretamente no documento do Dreamweaver.
Para copiar e colar o código HTML do Fireworks no Dreamweaver:
1 No Fireworks, escolha Editar > Copiar código HTML.

2 Siga o assistente pelas definições de exportação de HTML e 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 código HTML para a área
de transferência.
3 No Dreamweaver, posicione o ponto de inserção no documento onde deseja colar o código
HTML e escolha Editar > Colar.
Todos os códigos HTML e JavaScript associados aos arquivos Fireworks exportados são
copiados para o documento Dreamweaver, e todos os links para as imagens são atualizados.

Para exportar e colar o código HTML do Fireworks no Dreamweaver:
1 No Fireworks, escolha Arquivo > Exportar.

2 Na caixa de diálogo Exportar, especifique a pasta no site do Dreamweaver como destino para as
imagens exportadas.
3 No menu pop-up Salvar como, escolha HTML e Imagens.
4 No menu pop-up HTML, escolha Copiar para Área de transferência.
5 No Dreamweaver, posicione o ponto de inserção no documento onde deseja colar o código
HTML exportado e escolha Editar > Colar.
Todos os códigos HTML e JavaScript associados aos arquivos Fireworks exportados são
copiados para o documento Dreamweaver, e todos os links para as imagens são atualizados.
Como atualizar o HTML do Fireworks posicionado no Dreamweaver

No Fireworks, o comando Arquivo > Atualizar HTML fornece uma alternativa para a técnica
acionar e editar de atualização de arquivos do Fireworks colocados no Dreamweaver. Com a
Atualização de HTML, é possível editar uma imagem do PNG de origem no Fireworks e atualizar
automaticamente qualquer código HTML e arquivo de imagem exportado colocado em um
documento Dreamweaver. Este comando permite a atualização dos arquivos do Dreamweaver
mesmo quando o Dreamweaver não está em execução.
Para atualizar o código HTML do Fireworks colocado no Dreamweaver:
1 No Fireworks, abra o PNG de origem e faça as edições desejadas nele.

2 Escolha Arquivo > Salvar.
3 No Fireworks, escolha Arquivo > Atualizar HTML.
4 Navegue no arquivo do Dreamweaver que contém o código HTML que deseja atualizar e
clique em Abrir.
5 Navegue no destino da pasta em que deseja colocar os arquivos de imagem atualizados e clique
em Selecionar.
O Fireworks atualiza o código HTML e JavaScript no documento Dreamweaver. O Fireworks
também exporta as imagens atualizadas associadas ao código HTML e coloca as imagens na
pasta de destino especificada.
Se o Fireworks não puder localizar o código HTML correspondente para atualizar, ele fornece a
opção de inserir um novo código HTML no documento Dreamweaver. O Fireworks coloca a
seção JavaScript do novo código no começo do documento e coloca a tabela HTML ou o link
para a imagem no fim.
338 Capítulo 21
Criação de um álbum de fotografias na Web
O comando Criar álbum de fotografias na Web do Dreamweaver permite a geração automática de
um site na Web que sirva de vitrine para um álbum de imagens de uma determinada pasta. Este
comando utiliza o JavaScript para chamar o Fireworks, que cria uma miniatura e uma imagem
maior para cada imagem na pasta. O Dreamweaver cria uma página da Web com todas as
miniaturas, bem como os links para as imagens maiores. Para utilizar o comando Criar álbum de
fotografias na Web, é preciso ter o Dreamweaver e o Fireworks 4 ou mais avançado instalados no
sistema.
Antes de começar, coloque todas as imagens do álbum de fotografias em uma única pasta (a pasta
não precisa estar em um site). Além disso, certifique-se de que os nomes de arquivos das imagens
terminam em extensões reconhecidas pelo comando Criar álbum de fotografias na Web (.gif, .jpg,
.jpeg, .png, .psd, .tif ou .tiff ). As imagens com extensões de arquivo não reconhecidas não são
incluídas no álbum de fotografias.
Para criar um álbum de fotografias na Web:
1 No Dreamweaver, escolha Comandos > Criar álbum de fotografias na Web.

2 No campo de texto Título do álbum de fotografias, digite um título. O título será exibido em
um retângulo cinza na parte superior da página que contém as miniaturas.
Se desejar, é possível digitar até duas linhas de texto adicional para que sejam exibidas
diretamente abaixo do título, nos campos Informações do sub-cabeçalho e Outras informações.
3 Escolha a pasta que contém as imagens de origem clicando no botão Procurar junto ao campo
de texto Pasta de imagens de origem. Escolha (ou crie) uma pasta de destino na qual coloque
todas as imagens exportadas e os arquivos HTML clicando no botão Procurar perto do campo
de texto Pasta de destino.
A pasta de destino não deve conter ainda um álbum de fotografias—se contiver, e se alguma
imagem nova tiver os mesmos nomes que as imagens utilizadas anteriormente, é possível
sobregravar a miniatura existente e os arquivos de imagem.
4 Especifique as opções de exibição das imagens miniaturas:
• Escolha um tamanho para as imagens miniaturas no menu pop-up Tamanho da miniatura. As
imagens são escaladas proporcionalmente para criar miniaturas que se ajustem em um
quadrado com as dimensões de pixel indicadas.
• Para exibir o nome de arquivo de cada imagem original embaixo da miniatura correspondente,
selecione Mostrar os nomes dos arquivos.
• Digite o número de colunas da tabela que exibe as miniaturas.
5 Escolha um formato para as imagens miniaturas do menu pop-up Formato da miniatura:
O formato GIF WebSnap 128 cria miniaturas GIF que utilizam uma paleta adaptativa para
Web de até 128 cores.
O formato GIF WebSnap 256 cria miniaturas GIF que utilizam uma paleta adaptativa para
Web de até 256 cores.
O formato JPEG—melhor qualidade cria miniaturas JPEG com qualidade relativamente mais
alta e tamanhos de arquivo maiores.
O formato JPEG—menor arquivo cria miniaturas JPEG com qualidade relativamente mais
baixa e tamanhos de arquivo menores.

6 Escolha um formato para as imagens grandes do menu pop-up Formato da fotografia. Uma
imagem grande do formato especificado é criada para cada imagem original. É possível especificar
um formato das imagens grandes diferente do formato especificado para as miniaturas.
Observação: O comando Criar álbum de fotografias na Web não permite a utilização dos arquivos de imagem
originais como as imagens grandes, porque os formatos da imagem original diferentes de GIF e JPEG talvez não
sejam exibidos adequadamente em todos os navegadores. Observe que se as imagens originais são arquivos
JPEG, as imagens grandes geradas podem ter tamanhos maiores ou qualidade menor que os arquivos originais.
7 Escolha um percentual de escala para as imagens grandes.

Ao definir como 100%, o sistema cria imagens grandes com o mesmo tamanho das originais.
Observe que o percentual da escala é aplicado a todas as imagens; se as imagens originais não
forem todas do mesmo tamanho, escalá-las com o mesmo percentual talvez não produza os
resultados desejados.
8 Selecione Criar página de navegação para cada fotografia para criar uma página da Web
individual para cada imagem de origem, contendo os links de navegação Voltar, Inicial e Avançar.
Caso selecione essa opção, as miniaturas são ligadas às páginas de navegação. Se não selecionar
esta opção, as miniaturas são ligadas diretamente às imagens grandes.
9 Clique em OK para criar o código HTML e os arquivos de imagem do álbum de fotografias na
Web.
O Fireworks é acionado (se ainda não estiver em execução) e cria as miniaturas e as imagens
grandes. Esse procedimento pode durar vários minutos, se o usuário tiver incluído um grande
número de arquivos de imagem. Quando o processamento é concluído, o Dreamweaver fica
ativo novamente e cria a página que contém as miniaturas.
10 Quando for exibida uma caixa de diálogo “Álbum criado”, clique em OK. Talvez seja preciso
aguardar alguns segundos para que a página do álbum de fotografias seja exibida. As miniaturas
são mostradas em ordem alfabética por nome de arquivo.
Observação: Clique no botão Cancelar da caixa de diálogo Dreamweaver, após o início do processamento, não
interrompe a criação do álbum de fotografias; isso simplesmente impede o Dreamweaver de exibir a página
principal do álbum de fotografias.
340 Capítulo 21
Como trabalhar com Dreamweaver e Flash
É possível inserir facilmente um filme Flash (arquivo SWF) em um documento Dreamweaver. É
possível utilizar o inspetor de propriedades para definir as opções de execução e exibição do arquivo
SWF na página da Web. Para obter informações sobre a inserção de um filme Flash no Dreamweaver,
veja “Como inserir filmes Flash”, na página 352.
O verificador de link no Dreamweaver permite a edição fácil de links em arquivos inseridos em
um documento Dreamweaver, incluindo filmes Flash. É possível atualizar o link no filme SWF e
atualizar a alteração no documento de autoria Flash. Para obter informações, veja “Atualização de
links em um arquivo SWF”, na página 343.
Se o usuário tem o Macromedia Flash MX e o Dreamweaver MX, é possível atualizar um filme
colocado em um documento Dreamweaver. Quando os dois aplicativos estão instalados no
computador, e um filme SWF é selecionado no documento Dreamweaver, o inspetor de
propriedades exibe um botão Editar. Caso não tenha o Flash MX, o botão Editar fica desativado.
Quando o usuário clica em Editar, o Dreamweaver aciona o Flash, e o Flash tenta localizar o
arquivo de autoria do Flash (.FLA) para o arquivo SWF selecionado. As informações sobre o
arquivo de origem inicial são armazenadas automaticamente em uma Design Note do arquivo
SWF, quando ele é exportado para um site do Dreamweaver (se as Design Notes estiverem
ativadas para o site do Dreamweaver). Se o Flash não puder localizar o arquivo de autoria Flash, o
sistema solicitará a sua localização. É impossível atualizar um arquivo SWF diretamente. Altere o
arquivo de origem e o exporte como um arquivo de filme SWF.
Depois de acionar com êxito um documento de origem para edição, é possível trabalhar no Flash
para fazer alterações em um filme. Ao terminar as alterações, clique em Concluído. O Flash
atualiza o documento de autoria do Flash, exporta novamente o arquivo de filme, fecha e retorna
o foco para o documento Dreamweaver. É possível exibir o SWF atualizado no documento,
clicando em Executar no inspetor de propriedades, ou pressionar F12 para visualizar a página em
uma janela do navegador.
“Edição de um filme Flash do Dreamweaver”, na página 342
“Atualização de links em um arquivo SWF”, na página 343

Edição de um filme Flash do Dreamweaver
É impossível editar diretamente um arquivo SWF, se deseja fazer alterações em um SWF
exportado, selecione o alocador de espaço de filme Flash no documento Dreamweaver e, no
inspetor de propriedades, clique em Editar. A edição aciona o Flash e, se o caminho para o
documento de origem (FLA) estiver disponível, aciona também o arquivo FLA. Quando as
edições estiverem concluídas, o Flash salva as alterações no documento de origem FLA e exporta
novamente o arquivo de filme SWF.
Para acionar e editar um filme Flash inserido do Dreamweaver:
1 No Dreamweaver, escolha Janela > Propriedades para abrir o inspetor de propriedades caso
ainda não esteja aberto.
2 No documento Dreamweaver, siga um dos procedimentos abaixo:
• Clique no alocador de espaço de filme Flash para selecioná-lo; no inspetor de propriedades,
clique em Editar.
• Pressione a tecla Control e clique duas vezes no alocador de espaço do filme que deseja editar.
• Clique com o botão direito do mouse no filme desejado e escolha Editar com Flash no menu
contextual.
O Dreamweaver aciona o Flash e abre o arquivo FLA para edição ou avisa o usuário para abri-
lo, caso ele não possa ser localizado.
Observação: Se o arquivo FLA ou SWF estiver bloqueado, o Dreamweaver avisa o usuário para verificar o
arquivo, cancelar a solicitação ou exibir o arquivo.
342 Capítulo 21
3 No Flash, edite o filme. A janela do documento indica que um filme do Dreamweaver está
sendo modificado.
4 Ao terminar a edição, clique em Concluído.

Clique em Concluído salva as alterações no arquivo FLA de origem e atualiza o arquivo SWF.
Atualização de links em um arquivo SWF

É possível atualizar um link em um arquivo SWF na visualização do mapa do site do Dreamweaver.
Para obter informações sobre a visualização do mapa do site, veja “Como utilizar o mapa do site”, na
página 87. Antes de criar um mapa do site, é necessário definir uma página inicial para o site. Na
visualização no mapa do site, é necessário exibir os arquivos dependentes para atualizar um link em
um arquivo SWF. Por padrão, o mapa do site não exibe os arquivos dependentes; para obter
informações sobre a exibição de arquivos dependentes, veja “Como mostrar e ocultar os arquivos do
mapa do site”, na página 91.
Selecione o link que deseja atualizar e selecione umas das opções de links de alteração dependendo
do que deseja fazer—alterar um link individual ou alterar o link no site inteiro.
Qualquer link atualizado pelo Dreamweaver no arquivo SWF é transmitido para o documento de
origem FLA quando um acionamento e uma edição são realizados. O Dreamweaver registra
automaticamente qualquer alteração de link no arquivo SWF nas Design Notes, e quando o Flash
passa as alterações para o arquivo FLA, ele as remove das Design Notes.

Para atualizar um link de URL em um arquivo SWF:
1 Configure uma página inicial para o site, se ainda não o tiver feito. É necessário configurar uma
página inicial para criar um mapa do site.
2 Abra a visualização do mapa do site
3 Para mostrar os arquivos dependentes, escolha Exibir > Mostrar os arquivos dependentes.
O link é exibido no arquivo SWF.
4 Altere o link seguindo um dos procedimentos abaixo:
• Para alterar o link no SWF selecionado, clique com o botão direito do mouse no link, escolha
Alterar o link e, na caixa de diálogo que é exibida no campo URL, digite o caminho novo da
URL.
• Para atualizar todas as instâncias do link, escolha Site > Alterar o link no site inteiro e, na caixa
de diálogo que é exibida, no campo Alterar todos os links, procure ou digite o caminho do link
que está sendo alterado e, no campo Em links a, procure ou digite o caminho da nova URL.
5 Clique em OK.
344 Capítulo 21
CAPÍTULO 22
Como inserir mídia
Macromedia Dreamweaver permite adicionar som ou filmes aos sites da Web de maneira rápida e
fácil. É possível incorporar ou editar os arquivos e objetos multimídia, como, por exemplo: filmes
Macromedia Flash e Shockwave, applets Java, Quicktime, Active X e arquivos de áudio. É possível
anexar Design Notes a esses objetos, que permitem a comunicação com o grupo. Agora é possível
inserir objetos de botão e texto Flash no próprio Dreamweaver.
• “Como inserir e executar um objeto de mídia”, na página 345
• “Como iniciar um editor externo para arquivos de mídia”, na página 346
• “Utilização das Design Notes com um objeto de mídia”, na página 347
• “Sobre o conteúdo Flash”, na página 348
• “Como inserir um objeto de botão Flash”, na página 348
• “Como inserir um objeto de texto Flash”, na página 351
• “Como inserir filmes Flash”, na página 352
• “Como inserir filmes Shockwave”, na página 353
• “Como adicionar vídeo”, na página 353
• “Como adicionar um som a uma página”, na página 354
• “Como inserir o conteúdo do plug-in do Netscape Navigator”, na página 356
• “Como inserir um controle ActiveX”, na página 357
• “Como inserir um applet Java”, na página 358
• “Utilização dos comportamentos para controlar os elementos de mídia”, na página 358
Como inserir e executar um objeto de mídia

É possível inserir um filme ou objeto Flash, um filme QuickTime ou Shockwave, applet Java,
controle ActiveX ou outros objetos de áudio ou vídeo em um documento Dreamweaver.
Utilize a categoria Mídia da barra Inserir ou o menu Inserir para selecionar o tipo de objeto que
deseja inserir em um documento. Os filmes e objetos Flash, Shockwave, Applets e ActiveX têm
botões definidos. Utilize o botão plug-in do Netscape Navigator para inserir outros arquivos de
mídia. Para obter mais informações, veja “Como inserir o conteúdo do plug-in do Netscape
Navigator”, na página 356.
345
Para inserir um objeto de mídia em uma página:
1 Posicionar o ponto de inserção na janela do documento onde deseja inserir o objeto e seguir
• Na barra Inserir, selecione Mídia e clique no botão para o tipo de objeto que deseja inserir ou
arrastar para a janela do documento.
• Escolha o objeto apropriado do submenu Inserir > mídia ou Inserir > imagens interativas.
Na maioria dos casos, será exibida uma caixa de diálogo que permite escolher um arquivo de
origem e especificar certos parâmetros do objeto de mídia.
Dica: Para evitar a exibição de certas caixas de diálogo, escolha Editar > Preferências > Geral e, em seguida,
desmarcar a opção Mostrar a caixa de diálogo quando inserir objetos. Para anular qualquer preferência definida
para exibir caixas de diálogo, manter pressionada a tecla Control enquanto o objeto é inserido (por exemplo: para
inserir um alocador de espaço para um filme Shockwave sem especificar o arquivo, manter pressionada a tecla
Control e clique no botão Shockwave).
Dreamweaver insere automaticamente o código-fonte HTML necessário à exibição do objeto ou

do alocador de espaço na página. Para especificar o arquivo de origem, definir as dimensões e
outros parâmetros e atributos, utilizar o inspetor de propriedades correspondente a cada objeto.
Como iniciar um editor externo para arquivos de mídia

É possível clicar duas vezes na maioria dos arquivos no painel Site para editá-los diretamente. Se o
arquivo for um arquivo HTML, ele será aberto no Dreamweaver. Se ele for de outro tipo, como
um arquivo de imagem, ele será aberto em um editor externo apropriado, como Macromedia
Fireworks.
Cada tipo de arquivo com que Dreamweaver não lida diretamente pode ser associado a um ou
mais editores externos do sistema. O editor iniciado quando o usuário clica duas vezes no arquivo
no painel Site é denominado editor primário. É possível definir qual editor será associado a que
tipo de arquivo nas preferências dos Tipos de arquivos/editores.
Se houver mais de um editor associado ao tipo de arquivo, será possível iniciar um editor
secundário para um determinado arquivo: Clique com o botão direito do mouse (no Windows)
no nome do arquivo no painel Site e escolha um editor no submenu Abrir com, do menu
contextual.
Para especificar explicitamente os editores externos que deverão ser iniciados para um
determinado tipo de arquivo, escolha Editar > Preferências, e, na lista de categorias, selecione
Tipos de arquivos/editores. As extensões dos nomes de arquivos, como .gif, .wav e .mpg,
encontram-se listadas à esquerda, em Extensões. Os editores associados à extensão selecionada
encontram-se listados à direita, abaixo de Editores.
Também é possível procurar um editor externo para editar o arquivo. Clique com o botão direito
do mouse (no Windows) no arquivo na visualização do projeto da janela do documento, e, em
seguida, escolha Editar com > Procurar, ou selecionar o arquivo e escolha > Editar > Editar com
editor externo.
346 Capítulo 22
Para adicionar um tipo de arquivo à lista de extensões nas preferências Tipos de arquivos/
editores:
1 Clique no botão de adição (+), situado acima da lista de extensões.

2 Digite a extensão do tipo de arquivo (incluindo o ponto no início da extensão), ou diversas
extensões relacionadas, separadas por espaços.
Por exemplo: é possível digitar .css, .png .jpg.
Para adicionar um editor a um determinado tipo de arquivo:
1 Selecione a extensão do tipo de arquivo na lista Extensões.

2 Clique no botão de adição (+), situado acima da lista de editores.
3 Na caixa de diálogo que for exibida, escolha o aplicativo a ser adicionado à lista Editores.
Por exemplo: escolha o ícone do aplicativo Excel, para adicioná-lo à lista Editores.
Para remover um tipo de arquivo da lista:
1 Selecione o tipo de arquivo na lista Extensões.

Observação: É impossível desfazer a ação após remover um tipo de arquivo; portanto é necessário ter certeza
de que deseja removê-lo.
2 Clique no botão de subtração (-), situado acima da lista de extensões.
Para tornar um editor o editor primário de um tipo de arquivo:
1 Selecione o tipo de arquivo.

2 Selecione o editor (ou adicioná-lo, se já não estiver na lista).
3 Clique em Tornar primário.
Para dissociar um editor de um tipo de arquivo:
1 Selecione o tipo de arquivo na lista Extensões.

2 Selecione o editor na lista Editores.
3 Clique no botão de subtração (-) acima da lista de editores.
Utilização das Design Notes com um objeto de mídia

Assim como ocorre com outros objetos no Dreamweaver, é possível adicionar Design Notes a um
objeto de mídia. Para obter mais informações sobre como trabalhar com Design Notes, veja
“Como utilizar as Design Notes”, na página 105.
Para adicionar Design Notes a um objeto de mídia:
1 Clique com o botão direito do mouse (no Windows) no objeto da janela do documento.
Observação: É necessário definir o site antes de adicionar Design Notes a qualquer objeto (veja “Como ativar e
desativar as Design Notes”, na página 105).
2 No menu contextual, escolha Design Notes.

3 Digite as informações que deseja na Design Note.
Dica: Também é possível adicionar uma Design Note a um objeto de mídia na painel Site: ao selecionar o
arquivo, exibir o menu contextual e selecionar as Design Notes neste menu.
Como inserir mídia 347

Sobre o conteúdo Flash
A tecnologia Macromedia Flash constitui a solução mais eficiente para a produção de gráficos e
animações com base em vetores. Flash Player está disponível tanto como um plug-in de Netscape
Navigator quanto um controle ActiveX para Microsoft Internet Explorer no PC, tendo sido
incluído nas versões mais recentes de Netscape Navigator, Microsoft Internet Explorer e
America Online.
Dreamweaver vem com objetos Flash para uso com ou sem Flash. É possível utilizar esses objetos
para criar botões Flash e textos Flash para inserção em um documento Dreamweaver. Caso Flash
esteja no sistema, veja “Como trabalhar com Dreamweaver e Flash”, na página 341 para obter
mais informações sobre a utilização desses aplicativos de maneira integrada.
Antes de utilizar os comandos Flash disponíveis no Dreamweaver, é necessário revisar os três tipos
diferentes de arquivos Flash.
O arquivo Flash (.fla) é um arquivo-fonte para qualquer projeto e é criado no programa de mesmo
nome. Esse tipo de arquivo pode ser aberto apenas em Flash, mas não no Dreamweaver ou em
navegadores. É possível abrir o arquivo Flash em Flash e, subseqüentemente, exportá-lo como um
arquivo SWF ou SWT para ser utilizado nos navegadores.
O arquivo de filme Flash (.swf) é uma versão compactada do arquivo Flash (.fla), otimizado para
visualização na Web. Esse arquivo pode ser executado em navegadores e visualizado no
Dreamweaver, mas não pode ser editado no Flash. Esse é o tipo de arquivo criado ao utilizar os
objetos de texto e botão Flash. Para obter mais informações, veja “Como inserir um objeto de
botão Flash”, na página 348 e “Como inserir um objeto de texto Flash”, na página 351 e “Como
inserir filmes Flash”, na página 352.
Os arquivos do modelo Flash (.swt) possibilitam a modificação e substituição de informações num
arquivo de filme Flash. Esses arquivos são utilizados no objeto de botão Flash, permitindo a
modificação do modelo com os seus próprios textos ou links, para criar um SWF personalizado para
inserir no documento. No Dreamweaver, estes arquivos de modelo podem ser encontrados nas pastas
Dreamweaver/Configuration/Flash Objects/Flash Buttons e Flash Text.
Também é possível efetuar download de novos modelos de botão no site Macromedia Exchange
para o Dreamweaver na Web e colocá-los na pasta Botão Flash. Para obter mais informações sobre
a criação de novos modelos de botão, veja o artigo sobre esse tópico encontrado no site da
Macromedia na Web em http://www.macromedia.com/go/flash_buttons.
Como inserir um objeto de botão Flash

O objeto de botão Flash é um botão atualizável baseado em um modelo Flash. É possível
personalizar um objeto de botão Flash, adicionando texto, cor de fundo e links para outros
arquivos. É possível inserir botões Flash durante o trabalho na visualização do projeto ou na
visualização do código.
Observação: É necessário salvar os documentos antes de inserir um objeto de botão ou texto Flash.
Utilize a caixa de diálogo Botão Flash para selecionar a partir de um conjunto de botões Flash
designados. É possível exibir um exemplo de botão no campo Exemplo. Clique nessa exemplo
para verificar como ela funciona no navegador. Durante a definição do botão Flash (por exemplo:
alteração do texto ou opções de fonte), o campo Exemplo deve ser atualizado manualmente para
refletir as alterações. Essas alterações serão exibidas quando a caixa de diálogo for fechada e o
botão for exibido na visualização do projeto.
348 Capítulo 22
Para inserir um objeto de botão Flash:
1 Na janela do documento, coloque o ponto de inserção onde deseja inserir o botão Flash.
2 Para abrir a caixa de diálogo Inserir objeto Flash, siga um dos procedimentos abaixo:
• Na barra Inserir, selecionar Mídia e, em seguida, clique no ícone do Botão Flash.
• Na barra Inserir, selecionar Mídia e, em seguida, arraste o ícone do botão Flash para a janela do
documento, ou para a visualização do código se estiver trabalhando no código.
• Escolha Inserir > Imagens interativas > Botão Flash.
A caixa de diálogo Inserir botão Flash é exibida.
3 Na lista de estilos, selecionar o estilo de botão que deseja.

4 No campo Texto do botão (opcional), digite o texto que deseja que seja exibido.
Esse campo aceitará alterações apenas se o botão selecionado tiver um parâmetro {Button Text}
definido. Isso será mostrado no campo Exemplo. O texto digitado substituirá o parâmetro
{Button Text} quando o arquivo for visualizado.
5 No menu pop-up Fonte, selecione a fonte que deseja utilizar.
Se a fonte padrão de um botão não estiver disponível no sistema, selecione uma outra fonte no
menu pop-up. A fonte selecionada não será vista no campo Exemplo, mas é possível clicar em
Aplicar, para inserir o botão na página, para examinar a aparência do texto.
6 No campo Tamanho, digite um valor numérico para o tamanho da fonte.
7 No campo Link (opcional), digite um link relativo a documento ou absoluto para o botão.
8 No campo Destino (opcional), especificar a localização na qual o documento com link será
aberto. É possível selecionar uma moldura ou opção de janela no menu pop-up. Nomes de
molduras são listados somente se o objeto Flash estiver sendo editado enquanto estiver em um
conjunto de molduras.
9 No campo Cor de fundo (opcional), defina a cor de fundo para o filme Flash. Utilize o seletor
de cores ou digitar um valor hexadecimal da Web (como, por exemplo: #FFFFFF).

10 No campo Salvar como, digite um nome de arquivo para salvar o novo arquivo SWF.
É possível utilizar o nome de arquivo padrão (por exemplo: button1.swf ) ou digitar um novo
nome. Se o arquivo contiver um link relativo a documento, será necessário salvar o arquivo no
mesmo diretório que o documento HTML atual, para manter os links relativos a documento.
11 Clique em Obter mais estilos para ir ao site Macromedia Exchange e efetuar o download de
mais estilos de botões.
Para obter mais informações, veja “Como adicionar extensões no Dreamweaver”, na página 59.
12 Clique em Aplicar ou OK para inserir o botão Flash na janela do documento.
Dica: Selecione Aplicar, para examinar as alterações na visualização do projeto enquanto mantém a caixa de
diálogo aberta. É possível prosseguir com as alterações no botão.
Modificação de um objeto de botão Flash

É possível modificar as propriedades e conteúdo de um objeto de botão Flash.
Para modificar um objeto de botão Flash:
1 Na janela do documento, clique no objeto de botão Flash para selecioná-lo.

2 Abra o inspetor de propriedades, se ele ainda não tiver sido aberto.
O inspetor de propriedades exibirá as propriedades do botão Flash. Utilize o inspetor de
propriedades para modificar os atributos HTML do botão, como largura, altura e Cor de fundo.
3 Para alterar o conteúdo, exibir a caixa de diálogo Inserir botão Flash utilizando um dos
métodos a seguir:
• Clique duas vezes no objeto de botão Flash.
• No inspetor de propriedades, clique em Editar.
• Clique com o botão direito do mouse (no Windows) e escolha Editar no menu contextual.
4 Na caixa de diálogo Inserir botão Flash, efetuar as edições desejadas nos campos descritos no
procedimento anterior “Como inserir um objeto de botão Flash”, na página 348.
Na visualização do projeto, é possível redimensionar o objeto facilmente utilizando as alças de
redimensionamento. Para redimensionar o objeto ao seu tamanho original, selecione Redefinir
o tamanho, no inspetor de propriedades (veja “Redimensionamento de uma imagem”, na
página 324).
Execução de um objeto de botão Flash no documento

É possível visualizar um botão Flash na janela do documento de Dreamweaver.
Para visualizar a execução do objeto de botão Flash na janela do documento:
1 Na visualização do projeto, selecione um objeto de botão Flash.

2 No inspetor de propriedades, clique em Executar.
3 Clique em Parar, para terminar a visualização.
Observação: Não é possível editar o objeto de botão Flash enquanto esse estiver em execução.
Também é conveniente visualizar o documento no navegador para verificar a aparência exata do

botão Flash.
350 Capítulo 22
Como inserir um objeto de texto Flash
O objeto de texto Flash permite criar e inserir um filme Flash que contém apenas texto. Isso
permite criar um pequeno filme gráfico com base em vetores com as fontes de designer e o texto
escolhido.
Para inserir um objeto de texto Flash:
1 Na janela do documento, colocque o ponto de inserção onde deseja inserir o texto Flash.
2 Para abrir a caixa de diálogo Inserir objeto Flash, siga um dos procedimentos abaixo:
• Na barra Inserir, selecionar Mídia e, em seguida, clique no ícone de Texto Flash.
• Na barra Inserir, selecionar Mídia e, em seguida, arraste o ícone de texto Flash para a janela do
documento (ou para a visualização do código, se estiver trabalhando no código).
• Escolha Inserir > Imagens interativas > Texto Flash.
A caixa de diálogo Inserir texto Flash é exibida.
3 No menu pop-up Fontes, selecionar uma fonte.

Esse menu contém uma lista de todas as fontes TrueType contidas no sistema.
4 Digite um tamanho de fonte no campo Tamanho. Esses são tamanhos de pontos.
5 Especifique os atributos de estilo, como negrito ou itálico, e o alinhamento do texto clicando
nos botões de estilo apropriados.
6 No campo Cor, definir a cor do texto, com a utilização do seletor de cores ou a digitação do
valor hexadecimal da Web (#FFFFFF, por exemplo).
7 No campo Cor da imagem cambiável, definir a cor que será exibida quando o ponteiro for
passado sobre o objeto de texto Flash. Utilize o seletor de cores ou digitar um valor
hexadecimal da Web (#FFFFFF, por exemplo).
8 Digite o texto desejado no campo Texto.
Para examinar o estilo da fonte que está sendo exibido no campo Texto, selecione Mostrar a
fonte.

9 Se desejar associar um link ao objeto de texto Flash, digite um link absoluto ou relativo a
documento no campo Link.
Os links relativos a site não são aceitos porque os navegadores não os reconhecem nos filmes
Flash. Se utilizar um link relativo a documento, certifique-se de que o arquivo SWF foi salvo
no mesmo diretório que o arquivo HTML (a interpretação de links relativos a documento varia
nos navegadores. Para garantir que os links funcionarão corretamente, salvar o arquivo no
mesmo diretório).
10 Se tiver digitado um link, pode-se especificar uma moldura ou janela de destino onde colocar o
link no campo Destino.
11 No campo Cor de fundo, escolha uma cor de fundo para o texto. Utilize o seletor de cores ou
digitar um valor hexadecimal da Web (#FFFFFF, por exemplo).
12 No campo Salvar como, digite um nome para o arquivo.
É possível utilizar o nome de arquivo padrão (por exemplo: tex1.swf ) ou digite um novo nome.
Se o arquivo contiver um link relativo a documento, será necessário salvar o arquivo no mesmo
diretório que o documento HTML atual, para manter os links relativos a documento.
13 Clique em Aplicar ou OK para inserir o texto Flash na janela do documento.
Se clicar em Aplicar, a caixa de diálogo permanecerá aberta e será possível visualizar o texto no
documento.
Para modificar ou executar o objeto de texto Flash, utilizar o mesmo procedimento adotado para
o botão Flash (veja “Modificação de um objeto de botão Flash”, na página 350).
Como inserir filmes Flash

Ao inserir um filme Flash em um documento, Dreamweaver utilizará as tags object (definida por
Microsoft Internet Explorer para os controles ActiveX) e embed (definida por Netscape Navigator),
para obter os melhores resultados em todos os tipos de navegadores. Ao alterar o filme no inspetor
de propriedades, Dreamweaver mapeará as entradas dos parâmetros apropriados às tags object e
embed.
Para inserir um filme Flash:
1 Na visualização do projeto, na janela do documento, colocar o ponto de inserção onde deseja

inserir o filme.
• Na barra Inserir, selecione Mídia e, em seguida, clique no ícone de Inserir Flash.
• Na barra Inserir, selecione Mídia e, em seguida, arrastar o ícone Inserir Flash para a janela do
documento.
• Escolha Inserir > Mídia > Flash.
2 Na caixa de diálogo que será exibida, selecione um arquivo de filme Flash (.swf ).
Um alocador de espaço Flash será exibido na janela do documento (diferentemente dos objetos
de botão e texto Flash). Para obter mais informações sobre a definição de propriedades para um
filme Flash, selecionar o alocador de espaço e, em seguida, clique no botão Ajuda do inspetor
de propriedades.
352 Capítulo 22
Para visualizar um filme Flash na janela do documento:
1 Na janela do documento, clique no alocador de espaço Flash para selecionar o filme Flash que
deseja visualizar.
2 No inspetor de propriedades, clique no botão Editar. Clique em Parar, para terminar a
visualização. Também é possível visualizar o filme Flash em um navegador, pressionando a tecla
F12.
Dica: Para visualizar todo o conteúdo Flash numa página, pressionar simultaneamente as teclas
Control+Alt+Shift+P (no Windows). Todos os objetos e filmes Flash estão definidos para Executar.
Como inserir filmes Shockwave

Shockwave, o padrão da Macromedia para multimídia interativa na Web, é um formato
compactado que permite o download rápido dos arquivos de mídia criados em Macromedia
Director, para que sejam executados pela maior parte dos navegadores mais comuns.
O software que executa os filmes Shockwave está disponível como um plug-in de Netscape
Navigator e um controle ActiveX. Ao inserir um filme Shockwave, Dreamweaver utilizará as tags
object (para o controle ActiveX) e embed (para o plug-in), para obter os melhores resultados em
todos os navegadores. Ao alterar o filme no inspetor de propriedades, Dreamweaver mapeará as
entradas dos parâmetros apropriados às tags object e embed.
Para inserir um filme Shockwave:
1 Na janela do documento, colocar o ponto de inserção onde deseja inserir o filme Shockwave e
seguir um dos procedimentos abaixo:
• Na barra Inserir, selecionar Mídia e, em seguida, clique no ícone Shockwave.
• Na barra Inserir, selecionar Mídia e, em seguida, arrastar o ícone Shockwave para a janela do
documento, ou para a visualização do código no caso de estar trabalhando no código.
• Escolha Inserir > Mídia > Shockwave.
2 Na caixa de diálogo que será exibida, selecionar um arquivo de filme.
3 No inspetor de propriedades, digite a largura e altura do filme, nas caixas L e A.
Como adicionar vídeo

É possível adicionar vídeo à página da Web de diversas maneiras e utilizando vários formatos. É
possível efetuar o download de vídeo para o usuário ou ele pode ser transferido gradualmente para
que seja executado durante o download. Os formatos mais comuns de transferência gradual
disponíveis na Web para a transmissão de arquivos de vídeo são RealMedia, QuickTime e
Windows Media. É necessário efetuar o download de um aplicativo auxiliar para exibir esses
formatos. Com esses formatos, é possível transferir gradualmente áudio e vídeo simultaneamente.
Se desejar incluir um clipe breve cujo download pode ser efetuado em vez de utilizar a
transferência gradual, será possível vincular o clipe, ou incorporá-lo, à página. Esses clipes estão
geralmente no formato de arquivo AVI ou MPEG.
É possível utilizar Director para filmes Shockwave ou Flash para criar apresentações multimídia,
com pouca largura de banda e interativas para a Web. Com Flash, o tamanho do arquivo é
surpreendentemente pequeno e a tecnologia funciona em várias plataformas (é claro que os
usuários precisam, primeiro, efetuar o download de um plug-in de aparelho de reprodução
gratuito antes de poderem exibir esses arquivos).

Como adicionar um som a uma página
Há vários tipos diferentes de arquivos e formatos de som, assim como diversas maneiras de
adicionar som às páginas da Web. Dentre os fatores a serem considerados antes de decidir qual
formato e método serão utilizados para adicionar o som, estão o objetivo, o público, o tamanho
do arquivo, a qualidade do som e as diferenças entre os navegadores.
Observação: Os arquivos sonoros são tratados de forma diferente e inconsistente pelos diversos navegadores.
Pode-se desejar adicionar um arquivo de som a um filme Flash e, em seguida, incorporar o arquivo SWF para
melhorar a consistência.
Sobre os formatos de arquivos de áudio

A lista a seguir descreve os formatos de arquivos de áudio mais comuns, junto com algumas das
vantagens e desvantagens de cada um para os projetos da Web.
O formato .midi ou .mid (Interface digital de instrumento musical, Musical Instrument Digital
Interface) destina-se à música instrumental. Arquivos MIDI contam com suporte em diversos
navegadores e não requerem um plug-in. Apesar de sua qualidade de som ser muito boa, ela pode
variar dependendo da placa de som de um visitante. Um pequeno arquivo MIDI pode fornecer
um longo clipe de som. Os arquivos MIDI não podem ser gravados e devem ser sintetizados num
computador com hardware e software especiais.
Os arquivos no formato .wav (extensão Waveform) têm boa qualidade de som, contam com
suporte em vários navegadores e não requerem um plug-in. É possível gravar arquivos WAV
próprios de um CD, fita, microfone e outros dispositivos. No entanto, o grande tamanho dos
arquivos limita seriamente o comprimento dos clipes de som que podem ser utilizados nas páginas
da Web.
O formato .aif (ou AIFF - formato de arquivo de intercâmbio de áudio, Audio Interchange File
Format), assim como o formato WAV, possui uma qualidade de som boa, pode ser executado pela
maioria dos navegadores, e não necessita de plug-ins. É possível gravar arquivos AIFF de um CD,
fita, microfone etc. No entanto, o grande tamanho dos arquivos limita seriamente o comprimento
dos clipes de som que podem ser utilizados nas páginas da Web.
O formato .mp3 (áudio do Motion Picture Experts Group ou Camada-3 de áudio MPEG) é um
formato compactado que torna os arquivos de som consideravelmente menores. A qualidade som
é muito boa: se um arquivo MP3 tiver sido gravado e compactado corretamente, a sua qualidade
pode competir com a de um CD. Novas tecnologias permitem transferir o arquivo gradualmente,
para que o visitante não precise esperar pelo download do arquivo inteiro até poder ouvi-lo. No
entanto, o tamanho do arquivo é maior do que um arquivo Real Audio. Por isso, é possível que o
download de uma música inteira em uma conexão de linha telefônica comum ainda demore um
pouco. Para executar os arquivos MP3, os visitantes devem efetuar o download e instalar um
aplicativo auxiliar ou plug-in, como QuickTime, Windows Media Player ou RealPlayer.
O grau de compactação do formato .ra, .ram, .rpm ou Real Audio é muito alto e os tamanhos de
arquivos são menores do que os arquivos no formato MP3. É possível efetuar o download de
arquivos de música completos num período de tempo razoável. Como os arquivos podem ser
transferidos gradualmente de um servidor da Web normal, os visitantes podem começar a ouvir o
som antes que o download do arquivo tenha sido concluído. A qualidade de som é inferior à dos
arquivos MP3, mas novos aparelhos de reprodução e codificadores melhoraram a sua qualidade
consideravelmente. Para poder executar esses arquivos, os visitantes deverão efetuar o download e
instalar o aplicativo auxiliar RealPlayer ou plug-in.
354 Capítulo 22
Vinculação a um arquivo de áudio
A vinculação a um arquivo de áudio é uma maneira simples e efetiva de adicionar som às páginas
da Web. Esse método de incorporar arquivos de som permite aos visitantes escolha se desejam
ouvir o arquivo e coloca o arquivo à disposição de um público maior (alguns navegadores não
oferecem suporte a arquivos de som incorporados). Veja “Incorporação de um arquivo de som”,
na página 355.
Criação de um link a um arquivo de áudio:
1 Selecione o texto ou a imagem que deseja utilizar como link ao arquivo de áudio.
2 No inspetor de propriedades, clique no ícone correspondente à pasta, para procurar o arquivo
de áudio, ou digitar o caminho e o nome do arquivo no campo Link.
Incorporação de um arquivo de som

A incorporação de áudio encaixa o aparelho de reprodução de som diretamente na página, mas o
som só será executado se os visitantes do seu site contarem com o plug-in apropriado ao arquivo
escolhido. Incorporar os arquivos, se desejar utilizar o som como música de fundo ou se desejar
mais controle sobre a própria apresentação de som. Por exemplo: é possível ajustar o volume, a
aparência do aparelho de reprodução na página e os pontos de início e fim do arquivo de som.
Para incorporar um arquivo de áudio
1 Na visualização do projeto, colocar o ponto de inserção onde deseja incorporar o arquivo e

seguir um dos procedimentos abaixo:
• Na barra Inserir, selecione Mídia e, em seguida, clique no ícone Plug-in.
• Na barra Inserir, selecione Mídia e, em seguida, arrastar o ícone Plug-in para a janela do
• Escolha Inserir > Mídia > Plug-in.
Para obter mais informações sobre o objeto de plug-in, veja “Como inserir o conteúdo do plug-
in do Netscape Navigator”, na página 356.
2 No inspetor de propriedades, clique no ícone correspondente à pasta, para procurar o arquivo
de áudio, ou digitar o caminho e o nome do arquivo no campo Link.
3 Digite a largura e a altura, através da inserção dos valores nos campos apropriados ou do
redimensionamento do alocador de espaço de plug-in, na janela Documento.
Esses valores determinam o tamanho com o qual os controles de áudio serão exibidos no
navegador. Por exemplo: tentar uma largura de 144 pixels e uma altura de 60 pixels, para
examinar como o aparelho de reprodução de áudio será exibido em Netscape Navigator e em
Internet Explorer.

Como inserir o conteúdo do plug-in do Netscape Navigator
Os plug-ins aprimoram o funcionamento de Netscape Navigator, possibilitando maneiras de
exibir o conteúdo de mídia em diversos formatos. Plug-ins são o meio pelo qual os arquivos de
conteúdo são executados e exibidos no site da Web. Por exemplo: dentre os plug-ins mais
freqüentes estão o RealPlayer e QuickTime, enquanto alguns arquivos de conteúdo incluem
MP3s e filmes QuickTime.
Após criar o conteúdo de um plug-in do Navigator, é possível utilizar Dreamweaver para inserir esse
conteúdo em um documento HTML. O Dreamweaver utiliza a tag embed para marcar a referência ao
arquivo de conteúdo.
Para inserir o conteúdo de plug-in do Navigator:
1 Na visualização do projeto, na janela do documento, colocar o ponto de inserção onde deseja

inserir o filme.
• Na barra Inserir, selecione Mídia e, em seguida, clique no ícone Plug-in.
• Escolha Inserir > Mídia > Plug-in.
2 Na caixa de diálogo que será exibida, selecione um arquivo de conteúdo para o plug-in do
Navigator.
Como executar um plug-in na janela do documento

É possível visualizar filmes e animações que dependem dos plug-ins de Navigator (elementos que
utilizam a tag embed) diretamente na visualização do projeto da janela do documento (é impossível
visualizar, na janela do documento, os filmes ou animações que dependem dos controles ActiveX).
É possível executar todos os elementos de plug-in simultaneamente, para examinar a aparência
que a página terá para o usuário, ou executar cada elemento individualmente, para garantir que
tenha sido incorporado o elemento de mídia correto.
Para executar os filmes, é necessário que os plug-ins adequados tenham sido instalados no
computador. Ao inicializar Dreamweaver, ele procurará automaticamente todos os plug-ins
instalados, inicialmente na pasta Configuration/Plugins e, em seguida, nas pastas de plug-ins de
todos os navegadores que estiverem instalados.
Para executar o conteúdo de plug-ins na janela do documento:
1 Inserir um ou mais elementos de mídia, escolhendo Inserir > Mídia > Shockwave, Inserir >
Media > Flash, ou Inserir > Mídia > Plug-in.
2 Executar o conteúdo do plug-in:
• Selecione um dos elementos de mídia que foi inserido e escolha Exibir > Plug-ins > Executar,
ou clique no botão Executar, no inspetor de propriedades.
• Escolha Exibir > Plug-ins > Executar todos, para executar todos os elementos de mídia na
página selecionada que dependerem de plug-ins.
Observação: A opção Executar todos se aplica ao documento atual e não a outros documentos num conjunto de
molduras, por exemplo.
356 Capítulo 22
Para interromper a execução do conteúdo de plug-ins:
Selecione um elemento de mídia e escolha Exibir > Plug-ins > Parar, ou clique no botão Parar, no
Também é possível selecionar Exibir> Plug-ins > Parar todos, para interromper a execução de
todos os conteúdos de plug-in.
Resolução de problemas relacionados aos plug-ins do Navigator

Se, após ter seguido essas etapas para executar o conteúdo do plug-in na janela do documento,
alguns elementos do conteúdo do plug-in não forem executados, tentar um dos procedimentos
abaixo:
• Certifique-se de que o plug-in associado está instalado no computador e se o conteúdo do
mesmo é compatível com a versão do plug-in existente.
• Abra o arquivo Configuration/Plugins/UnsupportedPlugins.txt em um editor de texto e
procurar, na lista, o plug-in com problemas. Esse arquivo mantém um registro dos plug-ins que
causam problemas no Dreamweaver e, por isso, não contam com suporte. (se houver
problemas com qualquer outro plug-in, adicioná-lo a esse arquivo).
• Verificar se há memória suficiente. Alguns plug-ins exigem entre 2 MB e 5 MB a mais de
memória, para que sejam executados.
Como inserir um controle ActiveX

Os controles ActiveX (anteriormente conhecidos como controles OLE) são componentes
reutilizáveis semelhantes a applets que podem funcionar como plug-ins dos navegadores. Eles são
executados em Internet Explorer com Windows. No Dreamweaver, o objeto ActiveX permite
fornecer atributos e parâmetros a um controle ActiveX no navegador do visitante.
Dreamweaver utiliza a tag object para marcar o local na página onde o controle ActiveX será
exibido e para fornecer parâmetros ao controle ActiveX.
Para inserir o conteúdo de controles ActiveX:
1 Na janela do documento, colocar o ponto de inserção onde deseja inserir o conteúdo e seguir
• Na barra Inserir, selecione Mídia e, em seguida, clique no ícone ActiveX.
• Na barra Inserir, selecione Mídia e, em seguida, arrastar o ícone ActiveX para a janela do
• Escolha Inserir > Mídia > ActiveX.
Um ícone marca o local onde o controle ActiveX será exibido na página no Internet Explorer.

Como inserir um applet Java
Java é uma linguagem de programação que permite o desenvolvimento de aplicativos pequenos
(applets) que podem ser incorporados às páginas da Web.
Após criar o applet Java, é possível inseri-lo em um documento HTML usando Dreamweaver.
Dreamweaver utiliza a tag applet para marcar a referência ao arquivo do applet.
Para inserir um applet Java:
1 Na janela do documento, colocar o ponto de inserção onde deseja inserir o applet e seguir um
dos procedimentos abaixo:
• Na barra Inserir, selecionar Mídia e em seguida clicar no ícone Applet.
• Na barra Inserir, selecionar Mídia e, em seguida, arrastar o ícone Applet para a janela do
• Escolha Inserir > Mídia > Applet. Também é possível arrastar o ícone do botão Flash até a
2 Na caixa de diálogo que será exibida, selecionar um arquivo que contenha o applet Java.
Utilização dos comportamentos para controlar os elementos de

mídia
É possível adicionar comportamentos à página, para iniciar e interromper diversos objetos de
mídia.
A opção Controlar o Shockwave ou Flash permite executar, parar, rebobinar ou ir para um quadro
de um filme Shockwave ou Flash (veja “Controlar o Shockwave ou Flash”, na página 385).
A opção Executar o som permite executar um som. Por exemplo: é possível executar um efeito de
som sempre que o usuário mover o ponteiro do mouse sobre um link (veja “Executar o som”, na
página 392).
A opção Verificar o plug-in permite verificar se os visitantes do seu site já possuem o plug-in
necessário instalado e, em seguida, os direcionar para outras URLs, dependendo de eles contarem
com o plug-in correto. Isso se aplica somente aos plug-ins do Netscape, pois o comportamento
Verificar o plug-in não verifica os controles ActiveX. Para obter mais informações, veja “Verificar
o plug-in”, na página 384.
358 Capítulo 22
CAPÍTULO 23
Dreamweaver e Acessibilidade
A acessibilidade refere-se a projetar sites e produtos da Web úteis para portadores de deficiência
auditiva, visual, motora e outras. O Macromedia Dreamweaver MX fornece as ferramentas que
tornam o produto acessível e ajudam a produzir conteúdo acessível.
Os exemplos de recursos de acessibilidade para produtos de software e sites da Web incluem
suporte à leitora de tela, equivalentes de texto para gráfico, atalhos de teclado, alteração de cores
para alto contraste, etc.
Como o número de pessoas deficientes que acessam a Web continua a crescer, é cada vez mais
importante que os programadores tornem seus produtos e sites da Web acessíveis a todos os usuários
em potencial. Para isso, o governo dos EUA e outras organizações estabeleceram legislação e
diretrizes para garantir que os programadores produzam conteúdo acessível. Para obter mais
informações sobre duas iniciativas significativas, veja World Wide Web Consortium Web
Accessibility Initiative (http://www.w3.org/wai) e a seção 508 do Federal Rehabilitation Act (http:/
/www.section508.gov).
Para um designer da WebDreamweaver que precisa utilizar os recursos de acessibilidade do
Dreamweaver, este capítulo informa sobre Dreamweaver suporte à leitora de tela, navegação de
teclado e suporte à acessibilidade do sistema operacional.
Para um designer da Web Dreamweaver que precisa criar conteúdo acessível, este capítulo informa
sobre a utilização das caixas de diálogo Acessibilidade Dreamweaver e testa a acessibilidade do site.
A projeção de um site da Web acessível exige o entendimento das necessidades de acessibilidade e a
tomada de muitas decisões subjetivas. O Dreamweaver auxilia na criação de sites da Web acessíveis.
Por exemplo: o Dreamweaver permite adicionar textos equivalentes para os gráficos—e igualmente
lembrar o usuário a fazer isso, caso esqueça. Entretanto, nenhuma ferramenta de autoria pode
automatizar o processo de desenvolvimento. Os designers precisam pensar sobre como os usuários
com deficiências interagem com as páginas da Web. A melhor maneira de garantir que um site da
Web está acessível é por meio de planejamento deliberado, desenvolvimento, teste e avaliação.
• “Utilização dos recursos de acessibilidade do Dreamweaver”, na página 360
• “Autoria da acessibilidade”, na página 363
• “Teste de acessibilidade do site da Web”, na página 370
359
Utilização dos recursos de acessibilidade do Dreamweaver
O Dreamweaver fornece recursos que o tornam acessível aos usuários com deficiências.
Especificamente, o Dreamweaver oferece suporte a leitoras de tela, recursos de acessibilidade do
sistema operacional e navegação pelo teclado.
Observação: Os modos Dreamweaver 4 Workspace e Dreamweaver 5 Workspace suportam os recursos de
acessibilidade do Dreamweaver, mas é recomendável utilizar o Dreamweaver 4 workspace. Para alterar os modos,
escolha Editar > Preferências e selecione Geral na lista de categorias à esquerda. Clique no botão Alterar
Workspace, selecione Dreamweaver 4 Workspace e clique em OK.
Utilização das leitoras de tela com Dreamweaver

Uma leitora de tela relaciona o texto exibido na tela do computador. Ela também lê as
informações não textuais, tais como identificadores de botão ou descrições de imagem no
aplicativo, fornecidas nas guias de acessibilidade ou atributos durante a autoria.
O Dreamweaver suporta as leitoras de tela JAWS for Windows, do Freedom Scientific (http://
www.freedomscientific.com), e Window Eyes, do GW Micro (http://www.gwmicro.com). Como
usuário do Dreamweaver, é possível utilizar uma leitora de tela para auxiliá-lo na criação de páginas
da Web. A leitora de tela inicia a leitura no canto superior esquerdo da janela do documento.
Utilização dos recursos de acessibilidade do sistema operacional

O Dreamweaver suporta a definição de alto contraste do sistema operacional Windows. O usuário
ativa esta opção por meio do painel de controle do Windows. Quando o alto contraste está
ativado, ele afeta o Dreamweaver como segue:
• As caixas de diálogo e os painéis utilizam as definições de cor do sistema.
Por exemplo: se definir a cor como Branco ou Preto, todas as caixas de diálogo e painéis do
Dreamweaver serão exibidos com uma cor de primeiro plano branca e de segundo plano preta.
• A sinalização da sintaxe por cores da visualização do código está desativada.
A visualização do código utiliza a janela do sistema e a cor do texto da janela, e ignora as
definições de cor em Preferências. Por exemplo: se definir a cor do sistema como Branco ou
Preto e alterar as cores do texto em Preferências > Codificação por cores, o Dreamweaver
ignora a definição de cores em Preferências e exibe o texto do código com uma cor branca em
primeiro plano e preta em segundo plano.
• A visualização do projeto utiliza as cores de segundo plano e texto definidas em Modificar >
Propriedades de página para que o design das páginas processe as cores como um browser.
Utilização do teclado para navegar nos painéis

É possível utilizar o teclado para navegar nos painéis flutuantes, no inspetor de propriedades, nas
caixas de diálogo, nas molduras e nas tabelas do Dreamweaver sem um mouse.
• “Painéis de navegação”, na página 361
• “Como navegar no inspetor de propriedades”, na página 361
• “Caixas de diálogo de navegação”, na página 362
• “Como navegar em molduras”, na página 362
• “Como navegar nas tabelas”, na página 363
360 Capítulo 23
Painéis de navegação
É possível utilizar o teclado para navegar nos painéis
Observação: A utilização de tabulação e teclas de setas é suportada somente pelo Windows.
Para navegar nos painéis:
1 Na janela do documento, pressione Control+Alt+Tab para mudar o foco para um painel.

Um contorno branco em torno da barra de títulos do painel indica que o foco está nesse painel.
A leitora de tela lê a barra de títulos do painel que está no foco.
2 Pressione Control+Alt+Tab novamente para mudar o foco para o próximo painel.
Continue até ter o foco no painel com o qual deseja trabalhar.
3 Pressione Control+Alt+ Shift+Tab para mudar o foco para o painel anterior, se necessário.
4 Se o painel desejado não estiver aberto, utilize os atalhos de teclado listados no menu Windows
para exibir o painel apropriado e pressione Control+Alt+Tab para mudar o foco para esse
painel.
Se o painel desejado estiver aberto, mas não expandido, coloque o foco na barra de títulos do
painel e pressione a barra de espaço. Pressione a barra de espaço novamente para reduzir o
painel.
5 Pressione a tecla Tab para percorrer as opções no painel.
Um contorno pontilhado em torno da opção indica que o foco está nessa opção.
6 Utilize as teclas de seta quando apropriado.
• Se uma opção contém outras opções, utilize as teclas de setas para percorrer as opções e
pressione a barra de espaço para fazer uma seleção.
• Se houver guias no grupo de painel para abrir outros painéis, coloque o foco na guia aberta e
utilize a tecla de seta para a esquerda ou para a direita para abrir outras guias. Ao abrir uma
nova guia, pressione a tecla Tab para percorrer as opções nesse painel.
Como navegar no inspetor de propriedades

É possível utilizar o teclado para navegar no inspetor de propriedades e fazer alterações no
documento.
Para navegar no inspetor de propriedades:
1 Pressione Control+F3 para exibir o inspetor de propriedades, se ele ainda não estiver visível.
2 Pressione Control+Alt+Tab até mudar o foco para o inspetor de propriedades.
3 Pressione a tecla Tab para percorrer as opções do inspetor de propriedades.
4 Utilize as teclas de setas conforme apropriado para percorrer as opções e pressione Enter para
fazer uma seleção.
5 Pressione Control+Tab para abrir e fechar a seção expandida do inspetor de propriedades
quando necessário, ou, com o foco na seta de expansão na parte inferior direita, pressione a
barra de espaço.
Dreamweaver e Acessibilidade 361

Caixas de diálogo de navegação
É possível utilizar o teclado para navegar nas caixas de diálogo.
Observação: A utilização de tabulação e teclas de setas é só é possivel no Windows.
Para navegar em uma caixa de diálogo:
1 Pressione a tecla Tab para percorrer as opções em uma caixa de diálogo.

2 Utilize as teclas de setas para percorrer as opções de uma opção.
Por exemplo: se uma opção tem um menu pop-up, mova o foco para essa opção e utilize a seta
para baixo para percorrer as opções.
3 Se a caixa de diálogo tem uma lista de categorias, pressione Control+Tab para mudar o foco para
a lista de categorias e utilize as teclas de seta para mover-se para cima ou para baixo na lista.
4 Pressione Control+Tab novamente para mudar as opções de uma categoria.
5 Pressione Enter para sair da caixa de diálogo.
Como navegar em molduras

Se o documento contém molduras, é possível utilizar as teclas de setas para mudar o foco para
uma moldura.
Para selecionar uma moldura:
1 Coloque o ponto de inserção na janela do documento.

2 Pressione Alt+Seta para Cima, para selecionar a moldura que atualmente está no foco.
Uma linha pontilhada indica a moldura que está no foco.
3 Continue pressionando Alt+Seta para Cima para mudar o foco para o conjunto de molduras e,
em seguida, conjuntos de molduras-pai, se houver conjuntos de molduras aninhados.
4 Pressione Alt+Seta para Baixo, para mudar o foco para um conjunto de molduras filho ou uma
única moldura no conjunto de molduras.
5 Com o foco em uma única moldura, pressione Alt+Seta para a Esquerda ou para a Direita para
percorrer as molduras.
6 Pressione Alt+Seta para a Direita para colocar o ponto de inserção na janela do documento.
362 Capítulo 23
Como navegar nas tabelas
Após selecionar uma tabela, é possível utilizar o teclado para navegar nela.
Para navegar em uma tabela:
1 Na janela do documento, siga um dos procedimentos abaixo para selecionar a tabela:

• Se o ponto de inserção estiver à esquerda da célula, pressione Shift+Seta para a Direita.
• Se o ponto de inserção estiver à direita da célula, pressione Shift+ Seta para a Esquerda.
2 Pressione a seta para baixo para posicionar o cursor na primeira célula.
3 Utilize as teclas de setas ou pressione Tab para percorrer as outras células quando necessário.
Dica: Quando a tecla de tabulação for pressionada na célula mais à direita, será adicionada automaticamente
outra linha à tabela.
4 Para selecionar uma célula, pressione Control+A enquanto o ponto de inserção está na célula.
5 Para sair da tabela, utilize o comando Selecionar Tudo (Control+A) duas vezes, e pressione a
tecla de seta para cima, para a esquerda ou para a direita.
Autoria da acessibilidade
O Dreamweaver auxilia o usuário a criar páginas acessíveis com conteúdo útil para as leitoras de
tela e são compatíveis com as diretrizes do governo (veja http://www.section508.gov).
Ao ativar as caixas de diálogo de acessibilidade (veja “Ativação das caixas de diálogo
Acessibilidade”, na página 364), o Dreamweaver solicita que sejam inseridos atributos de
acessibilidade sempre que forem inseridos elementos de página.
Observação: Para ver as páginas de exemplo projetadas para a acessibilidade, selecione Arquivo > Novo. Na caixa
de diálogo Novo documento, selecione Projeto de página (Acessibilidade) na lista de categorias e selecione uma
página na lista Projeto de página (Acessibilidade). Para obter mais informações, veja “Como trabalhar com a caixa
de diálogo Novo documento”, na página 116.
Desenvolvimento de conteúdo para leitoras de tela

Para tornar as informações acessíveis às leitoras de tela e aos usuários do site da Web, o
Dreamweaver facilita a adição de equivalentes de texto para elementos gráficos de uma página, e
permite observar as tabelas e formatos em HTML para leitoras de tela e outras tecnologias
auxiliares.
Por exemplo: é possível adicionar uma imagem de produto ao documento e associar uma descrição
qualquer. Em seguida, quando a imagem for exibida em uma página para um usuário com
deficiência visual, a leitora de tela lê a descrição, e o usuário sabe qual produto é exibido na página.
O Dreamweaver solicita adicionar equivalentes de texto para elementos gráficos e marcas
relacionadas à acessibilidade ao ativar as caixas de diálogo Acessibilidade, como descrito em
“Ativação das caixas de diálogo Acessibilidade”, na página 364.

Ativação das caixas de diálogo Acessibilidade
Ao criar páginas acessíveis, é necessário associar informações, tais como identificadores e
descrições, aos objetos da página para tornar o conteúdo acessível a todos os usuários. Para fazer
isso, ativar as caixas de diálogo Acessibilidade, de maneira que o Dreamweaver solicite as
informações que o usuário necessita adicionar para obter acessibilidade. Essas caixas de diálogo
são exibidas ao inserir um objeto para o qual o usuário ativou a caixa de diálogo Acessibilidade
correspondente.
Para ativar as caixas de diálogo Acessibilidade:

2 Na lista de categorias, à esquerda, selecione Acessibilidade.
A caixa de diálogo Preferências exibe as opções de acessibilidade.

4 Clique em OK.
Para cada elemento selecionado, uma caixa de diálogo Acessibilidade solicita a digitação das guias
de acessibilidade e os atributos ao inserir esse elemento em um documento.
Para obter mais informações sobre a adição de conteúdo acessível ao site da Web, veja as seções a
seguir:
• “Como inserir imagens acessíveis”, na página 365
• “Como inserir objetos de formulário acessíveis”, na página 366
• “Como inserir molduras acessíveis”, na página 367
• “Como inserir objetos de mídia acessíveis”, na página 368
• “Como inserir tabelas acessíveis”, na página 369
364 Capítulo 23
Como inserir imagens acessíveis
Ao inserir uma imagem, tendo selecionado a opção Imagens nas preferências de Acessibilidade, o
Dreamweaver solicita a digitação das informações para tornar a imagem acessível.
Observação: Para tornar acessíveis os alocadores de espaço da imagem e as imagens interativas, tais como
imagens cambiáveis e barras de navegação, digite o Texto alternativo ao inserir a imagem. Para obter mais
informações, veja “Como inserir imagens”, na página 319.
Para inserir uma imagem acessível:
1 Coloque o ponto de inserção na janela do documento em que deseja adicionar a imagem.

• Clique no botão Imagem na guia Comuns da barra Inserir.
• Arraste o ícone Imagem da barra Inserir para o documento.
A caixa de diálogo Fonte da imagem é exibida.
3 Clique em Procurar, para escolher um arquivo, ou digite o caminho do arquivo de imagem.
Se estiver trabalhando em um documento que não foi salvo, o Dreamweaver gera uma referência
da localização do arquivo para o arquivo de imagem. Ao salvar o documento em algum lugar
do site, Dreamweaver converterá a referência em um caminho relativo ao documento.
4 Clique em OK.
A caixa de diálogo Atributos de acesso da tag de imagens é exibida.
5 Digite os valores nas caixas de texto Alt e Longdesc.

Observação: É possível inserir uma ou duas caixas de texto, dependendo das necessidades.
6 Clique em OK.
A imagem é exibida no documento.
Observação: Caso pressione Cancelar, a imagem é exibida no documento, mas o Dreamweaver não associa
tags de acessibilidade a ele.
Para editar os valores de acessibilidade de uma imagem:
1 Na janela do documento, selecione a imagem.

• Edite os atributos de imagem apropriados na visualização do código:
• Clique com o botão direito do mouse e escolha Editar o código da tag.
• Edite o valor Alt no inspetor de propriedades.

Como inserir objetos de formulário acessíveis
Ao inserir um objeto de formulário, e tendo selecionado a opção Objeto de formulário nas
preferências de Acessibilidade, o Dreamweaver solicita a digitação das informações para tornar o
objeto de formulário acessível.
Para adicionar um objeto de formulário acessível:
1 No documento, coloque o ponto de inserção no local onde deverá ser exibido o formulário.
2 Para inserir um objeto de formulário, siga um dos procedimentos abaixo:
• Escolha Inserir > Objeto de formulário, e selecione um objeto de formulário a inserir.
• Na barra Inserir, selecione a guia Formulários e clique em um botão de objeto.
• Na barra Inserir, selecione a guia Formulários e arraste o ícone apropriado para o documento.
A caixa de diálogo Atributos de acesso da tag de entrada é exibida.

4 Clique em OK.
Observação: Caso pressione Cancelar, o objeto de formulário é exibido no documento, mas o Dreamweaver
não associa tags de acessibilidade a ele.
5 Se o Dreamweaver solicitar a inserção de uma tag de formulário, clique em Sim.

O objeto de formulário será exibido no documento.
Para editar os valores de acessibilidade de um objeto de formulário:
1 Na janela do documento, selecione o objeto.

• Edite os atributos apropriados na visualização do código.
366 Capítulo 23
Para tornar dinâmico um objeto de formulário acessível:
1 Na janela do documento, selecione o objeto de formulário que deseja tornar dinâmico.

2 Clique com o botão direito do mouse e escolha Editar o código da tag.
3 Edite os atributos necessários para tornar o objeto dinâmico.
Observação: É impossível utilizar o painel de ligações para adicionar um objeto de formulário dinâmico acessível.
Como inserir molduras acessíveis

Ao inserir um conjunto de molduras, tendo selecionado a opção Imagens nas preferências de
acessibilidade, o Dreamweaver solicita que digite um nome para cada moldura ficar acessível.
Para inserir um conjunto de molduras acessível:
1 Coloque o ponto de inserção no documento.

2 Siga um dos procedimentos abaixo para inserir um conjunto de molduras:
• Escolha Inserir > Molduras, e selecione um conjunto de molduras.
• Clique na guia Molduras, na barra Inserir, e no botão do conjunto de molduras apropriado.
• Clique na guia Molduras, na barra Inserir, e arraste o ícone do conjunto de molduras
apropriado para o documento.
O conjunto de molduras é exibido no documento e a caixa de diálogo Atributos de acesso da
tag de molduras é exibida.
3 Selecione uma moldura do menu pop-up e digite um nome para a moldura.

Dica: Escolha Janela > Outras > Molduras para exibir um diagrama das molduras que o usuário está
denominando.
4 Repita a etapa anterior até denominar cada moldura.

5 Clique em OK.
Observação: Caso pressione Cancelar, o conjunto de molduras é exibido no documento, mas o Dreamweaver
não associa tags de acessibilidade a ele.

Para editar os valores de acessibilidade de uma moldura:
1 Exiba a visualização do código ou a visualização dividida do documento, se estiver visualizando

o projeto atualmente.
2 Escolha Janela > Outras> Molduras, para abrir o painel Molduras.
3 Selecione uma moldura colocando o ponto de inserção em uma das molduras:
O Dreamweaver realça a tag da moldura no código.
• Edite o código na visualização do código
Como inserir objetos de mídia acessíveis
Ao inserir um objeto de mídia, tendo selecionado a opção Mídia nas preferências de
acessibilidade, o Dreamweaver solicita a digitação das informações para tornar o objeto de mídia
acessível.
Para inserir um objeto de mídia acessível:
1 Na janela do documento, coloque o ponto de inserção no local onde deverá ser exibido o objeto
de mídia.
• Escolha Inserir > Mídia e selecione um item.
• Clique na guia Mídia na barra Inserir e clique em um botão de objeto.
• Clique na guia Mídia na barra Inserir e arraste o ícone apropriado para o documento.
Uma caixa de diálogo Selecionar arquivo ou Inserir flash é exibida.
Observação: Para objetos Active X, a caixa de diálogo de acessibilidade é exibida. Para esses objetos, ignore a
próxima etapa.
3 Preencha a caixa de diálogo Selecionar arquivo ou Inserir flash, e clique em OK.

A caixa de diálogo Atributos de acesso da tag de objeto é exibida.

5 Clique em OK.
O objeto de mídia é exibido no documento.
Observação: Caso pressione Cancelar, o alocador de espaço do objeto de mídia será exibido no documento,
mas o Dreamweaver não associa tags de acessibilidade a ele.
368 Capítulo 23
Para editar valores de acessibilidade de um objeto de mídia:
1 Na janela do documento, selecione o objeto.

• Edite os atributos apropriados na visualização do código.
Como inserir tabelas acessíveis
Ao inserir uma tabela, tendo selecionado a opção Tabelas nas preferências de acessibilidade, o
Dreamweaver solicita que digite um nome para cada tabela para torná-la acessível.
Para inserir uma tabela acessível:
1 Na janela do documento, coloque o ponto de inserção no local onde deverá ser exibida a
tabela.
• Selecione Inserir > Tabela.
• Clique no botão Tabela na guia Comuns da barra Inserir.
• Arraste o ícone Tabela da guia Comuns na barra Inserir para o documento.
A caixa de diálogo Inserir tabela com atributos de acesso é exibida.

4 Clique em OK.
A tabela será exibida no documento.
Observação: Se pressionar Cancelar, a tabela não será exibida no documento.
Para editar os valores de uma tabela:
1 Na janela do documento, selecione a tabela.

• Edite os atributos da tabela apropriada na visualização do código.

Teste de acessibilidade do site da Web
A melhor maneira de garantir que o site está acessível a todos os usuários é projetar o site de
acordo com as diretrizes de acessibilidade da Seção 508 do Ato de Reabilitação 1998. Em seguida,
utilize o recurso de relatórios do Dreamweaver para verificar se as diretrizes foram implementadas
no site.
É possível executar um relatório de acessibilidade sobre o documento atual, os arquivos
selecionados, uma pasta ou um site inteiro.
Para executar um relatório de acessibilidade sobre o documento atual:
1 Abra o documento que deseja verificar.

2 Escolha Arquivo > Verificar página > Verificar acessibilidade.
Os resultados do relatório são exibidos no painel Relatórios do site (no grupo de painel
Resultados).
Para executar um relatório de acessibilidade sobre o conteúdo selecionado:
1 Siga um dos procedimentos abaixo para selecionar o conteúdo que deseja verificar:
• Abra um documento.
• Selecione os arquivos no painel Site.
• Escolha um site no menu pop-up Site do painel Site.
Observação: Para executar um relatório de acessibilidade sobre uma pasta, não é necessário selecionar agora;
selecione a pasta na caixa de diálogo Relatórios.
2 Escolha Site > Relatórios

3 Selecione o conteúdo desejado no menu pop-up Relatório sobre e selecione Acessibilidade.

Observação: Se selecionar Pasta no menu pop-up Relatório sobre, clique em Procurar para selecionar uma
pasta.
370 Capítulo 23
4 Clique em Executar.
Resultados).
Para exibir e editar os problemas informados:
1 Execute um relatório de acessibilidade sobre o conteúdo do site da Web, caso ainda não tenha
feito.
Resultados). Selecione qualquer linha no relatório e clique no botão Mais info, no lado
esquerdo do painel Relatórios do site, para obter uma descrição do problema e sugestões para
resolvê-lo.
As informações aparecerão no painel Referência (no grupo de painéis Código).
2 Clique duas vezes em qualquer linha do relatório, para exibir o código correspondente na
Observação: Na visualização do projeto, o Dreamweaver altera a exibição para visualização dividida para
mostrar o problema relatado em código.
3 Na janela do documento, na visualização do código, edite ou adicione atributos às tags

apropriadas para tornar o conteúdo compatível com as diretrizes de acessibilidade.
Para utilizar o editor de tags para auxiliar na codificação, selecione o código, clique com o botão
direito do mouse e escolha o editor de tags. Para obter mais informações sobre tags e atributos,
selecione Referência HTML O’Reilly no painel Referência (no grupo de painel Código), e
selecione uma tag.
Para salvar um relatório de acessibilidade:
Clique no botão Salvar, no lado esquerdo do painel Relatórios do site.
Sobre este recurso

O recurso de validação da acessibilidade no Dreamweaver MX utiliza a tecnologia UsableNet. A
UsableNet é líder na indústria de desenvolvimento de software fácil de utilizar para automatizar a
utilização e o processo de reparo e teste de acessibilidade. Para obter auxílio adicional com o teste
de acessibilidade, tente o UsableNet LIFT for Macromedia Dreamweaver, uma solução completa
para desenvolvimento de sites da Web úteis e acessíveis. O UsableNet Lift for Macromedia
Dreamweaver inclui assistentes de reparo para tabelas complexas, formulários e imagens; um
editor ALT global; relatórios personalizáveis; e um novo modo de monitoramento ativo que
garante a acessibilidade do conteúdo conforme as páginas são construídas. Solicite uma
demonstração do Lift for Macromedia Dreamweaver em http://www.usablenet.com.

372 Capítulo 23
Parte VI
Parte VI
Como trabalhar com
comportamentos e
animações
Muitas páginas da Web contêm apenas texto e imagens, sem

elementos interativos. Use comportamentos JavaScript e
animação em camadas do Dreamweaver para maior
interatividade e tornar suas páginas animadas para atrair
mais visitantes ao seu site.
• Capítulo 24, “Como utilizar comportamentos
JavaScript”
• Capítulo 25, “Animação de camadas”
CAPÍTULO 24
Como utilizar comportamentos JavaScript
Os comportamentos Dreamweaver colocam o código JavaScript nos documentos para permitir que
os visitantes interajam com uma página da Web de diversas maneiras ou determinem a execução de
certas tarefas. Um comportamento é uma combinação entre um evento e uma ação por ele
disparada. No painel Comportamentos, é possível adicionar um comportamento a uma página
especificando uma ação e, depois, o evento que irá dispará-la.
Observação: O código do comportamento é um código JavaScript do cliente, ou seja, ele é executado nos
navegadores, não nos servidores.
Na realidade, os eventos são mensagens geradas por navegadores, que indicam algum tipo de
interação do visitante com a sua página. Por exemplo: quando um visitante move o ponteiro sobre
um link, o navegador gera um evento onMouseOver correspondente ao link; em seguida, o
navegador verifica se existe algum código JavaScript (especificado na página que está sendo
exibida) que deve ser chamado quando o evento for gerado para esse link. Diferentes eventos são
definidos para diferentes elementos de página. Por exemplo: na maior parte dos navegadores,
onMouseOver e onClick são eventos associados a links, enquanto onLoad é um evento associado a
imagens e à seção body do documento.
Uma ação consiste no código previamente escrito em JavaScript, que executa uma tarefa
específica, como a abertura de uma janela do navegador, a exibição ou ocultação de uma camada,
a execução de um som ou a interrupção de um filme Shockwave. As ações fornecidas com o
Macromedia Dreamweaver MX são cuidadosamente escritas pelos programadores do
Dreamweaver, para proporcionar o máximo de compatibilidade entre os diferentes navegadores.
Depois de anexar um comportamento a um elemento da página, sempre que o evento
especificado ocorrer para o elemento, o navegador chamará a ação (o código JavaScript) a ele
associado (os eventos que podem ser utilizados para disparar uma determinada ação variam de
acordo com o navegador utilizado). Por exemplo: se você anexar a ação Mensagem pop-up a um
link e especificar que ela será disparada pelo evento onMouseOver, sempre que alguém indicar o link
com o ponteiro do mouse no navegador, a mensagem será exibida em uma caixa de diálogo.
Um único evento pode disparar diversas ações e é possível especificar a ordem na qual estas ações
ocorrerão.
375
O Dreamweaver MX oferece cerca de 24 ações de comportamentos. É possível ter acesso a outras
ações no site Macromedia Exchange na Web, assim como em sites de outros programadores (veja
“Download e instalação de comportamentos de outros fabricantes”, na página 381). Se souber
utilizar os recursos JavaScript, você poderá gravar as suas próprias ações relacionadas a
comportamentos. Para obter mais informações sobre como gravar ações de comportamentos, veja
Extensão dos recursos do Dreamweaver.
Observação: Os termos comportamento e ação se relacionam ao Dreamweaver, e não ao HTML. Do ponto de vista
do navegador, uma ação se assemelha a qualquer outro tipo de código JavaScript.

• “Como utilizar o painel Comportamentos”, na página 376
• “Sobre os eventos”, na página 376
• “Aplicação de um comportamento”, na página 377
• “Sobre comportamentos e texto”, na página 378
• “Como anexar um comportamento a uma linha de tempo”, na página 379
• “Como alterar um comportamento”, na página 380
• “Como atualizar um comportamento”, na página 380
• “Como criar novas ações”, na página 380
• “Download e instalação de comportamentos de outros fabricantes”, na página 381
• “Como utilizar as ações de comportamentos enviadas com o Dreamweaver”, na página 381
Como utilizar o painel Comportamentos

Utilize o painel Comportamentos para anexar comportamentos a elementos de página (mais
especificamente, às tags) e para modificar os parâmetros de comportamentos anexados
anteriormente.
Para abrir o painel Comportamentos, escolher Janela > Comportamentos.
Os comportamentos que já tiverem sido anexados ao elemento selecionado da página aparecerão
na lista de comportamentos (a área principal do painel), em ordem alfabética, conforme o evento.
Se houver diversas ações para o mesmo evento, elas serão executadas na ordem em que são
exibidas na lista. Se não houver qualquer comportamento na lista de comportamentos, o
elemento selecionado não apresenta qualquer comportamento a ele anexado.
Para obter mais informações sobre as opções no painel Comportamentos, escolher Ajuda no
menu Opções na barra de títulos do grupo do painel.
Sobre os eventos
Cada navegador fornece um conjunto de eventos que podem ser associados às ações listadas no
menu pop-up Ações (+) do painel Comportamentos. Quando um visitante de sua página da Web
interagir com ela — clicando em uma imagem, por exemplo — o navegador gerará eventos, que
podem ser utilizados para chamar as funções JavaScript responsáveis pela ocorrência da ação (Os
eventos também podem ser gerados sem a interação com o usuário, como no caso da definição de
atualização automática de uma página a cada 10 segundos). O Dreamweaver fornece muita ações
comuns que podem ser ativadas utilizando esses eventos.
376 Capítulo 24
Para obter os nomes e as descrições dos eventos fornecidos por cada navegador, veja na
Dreamweaver Central de suporte em http://www.macromedia.com/br/support/.
Observar que a maior parte dos eventos só poderá ser utilizada com certos elementos de página. Para
determinar os eventos correspondentes a um determinado elemento de página que recebem o
suporte de um determinado navegador, inserir o elemento de página no documento e anexar um
comportamento a ele. Em seguida, consultar o menu pop-up Eventos, no painel Comportamentos.
Para obter uma consulta bem detalhada das tags que poderão ser utilizadas com um dado evento em
um determinado navegador, procurar o evento em um dos arquivos da pasta Dreamweaver/
Configuration/Behaviors/Events.
Aplicação de um comportamento
É possível anexar comportamentos ao documento inteiro (ou seja, à tag body) ou aos links,
imagens, elementos de formulários ou qualquer um dos vários elementos HTML. O navegador de
destino que tiver sido selecionado determinará quais eventos associados a um determinado
elemento contarão com suporte. O Internet Explorer 4.0, por exemplo: dispõe de um conjunto
muito maior de eventos para cada elemento do que o Navigator 4.0 ou qualquer navegador de
versão 3.0.
Observação: Não é possível anexar um comportamento a texto simples. Para obter mais informações, veja “Sobre
comportamentos e texto”, na página 378.
É possível especificar mais de uma ação por evento. As ações ocorrem na ordem em que aparecem
na lista da coluna Ações do painel Comportamentos. Para obter mais informações sobre como
alterar a ordem das ações, veja “Como alterar um comportamento”, na página 380.
Para anexar um comportamento:
1 Selecione um elemento na página, como uma imagem ou link, por exemplo.

Para anexar um comportamento à página inteira, clique na tag <body>, no seletor de tags
situado no canto inferior esquerdo da janela do documento.
2 Escolha Janela > Comportamentos, para abrir o painel Comportamentos.
3 Clique no botão com o sinal de adição (+) e escolher uma ação no menu pop-up Ações.
As ações que estiverem esmaecidas no menu não poderão ser escolhidas. É possível que elas
estejam esmaecidas porque o documento não apresenta um objeto necessário. Por exemplo: a
ação Executar a linha de tempo estará esmaecida se o documento não possuir linhas de tempo,
enquanto que a ação Controlar o Shockwave ou Flash estará esmaecida se o documento não
contiver filmes Shockwave ou Flash. Se não houver qualquer evento disponível para o objeto
selecionado, todas as ações estarão esmaecidas.
Ao escolher uma ação, é exibida uma caixa de diálogo que mostra os parâmetros e as instruções
referentes à ação.
4 Digite os parâmetros relativos à ação e clique em OK.
Todas as ações enviadas com o Dreamweaver funcionam com os navegadores das versões 4.0 e
posteriores. Algumas ações não funcionam nos navegadores mais antigos. Veja “Como utilizar
as ações de comportamentos enviadas com o Dreamweaver”, na página 381.
Como utilizar comportamentos JavaScript 377

5 O evento padrão que desencadeia a ação aparecerá na coluna Eventos. Se este não for o evento
de desencadeamento desejado, escolher outro evento no menu pop-up Eventos (para abrir o
menu pop-up Eventos, selecione um evento ou ação no painel Comportamentos e clique na
seta preta para baixo que aparecerá entre o nome do evento e o da ação).
Os eventos que aparecerão no menu pop-up Eventos dependerão do objeto selecionado e dos
navegadores especificados no submenu Mostrar os eventos de. É possível que alguns eventos
estejam esmaecidos, se os objetos relevantes ainda não existirem na página ou se o objeto
selecionado não puder receber eventos. Se os eventos esperados não aparecerem, certifique-se
de que o objeto correto esteja selecionado ou altere os navegadores de destino no menu pop-up
Mostrar os eventos de.
Se você estiver anexando um comportamento a uma imagem, alguns eventos (como
onMouseOver) aparecerão entre parênteses. Estes eventos estarão disponíveis apenas para os links.
Ao ser escolhido um deles, o Dreamweaver colocará uma tag a ao redor da imagem, para definir
um link nulo. Na caixa de texto do link no inspetor de propriedades, o link nulo é representado
por javascript:;. É possível alterar o valor do link se desejar torná-lo um link real a outra
página, porém, se o link JavaScript for excluído e não for substituído por outro link, o
comportamento será removido.
Sobre comportamentos e texto

Não é possível anexar um comportamento a texto simples. As tags p e span não geram eventos nos
navegadores, portanto não é possível desencadear uma ação a partir destas tags.
No entanto, é possível anexar um comportamento a um link. Assim, para anexar um
comportamento a um trecho de texto, a abordagem mais simples consiste em adicionar um link
nulo (que não indicará qualquer elemento) ao texto e, em seguida, anexar o comportamento ao
link. Observar que, ao executar este procedimento, o texto aparecerá como um link. É possível
alterar a cor do texto e remover o seu sublinhado se for preferível que ele não se assemelhe a um
link; porém, é possível que o visitante do site não perceba que há um motivo para clicar no texto.
Para anexar um comportamento ao texto selecionado:
1 No inspetor de propriedades, digite javascript:; no campo Link. Assegure-se de ter incluído os

sinais de dois pontos e ponto-e-vírgula.
Observação: Ao invés destes, é possível utilizar o sinal # no campo Link, se preferir. O problema em utilizar o
sinal numérico é que quando um visitante clicar no link, alguns navegadores podem saltar para a parte superior
da página. O ato de clicar no link nulo de JavaScript não provocará qualquer efeito sobre a página, sendo,
portanto, geralmente preferível.
2 Mantendo o texto selecionado, abrir o painel Comportamentos (Janela > Comportamentos).

3 No menu pop-up Ações, escolher uma ação, digite os parâmetros a ela correspondentes e
escolher um evento para dispará-la. Para obter detalhes, veja “Aplicação de um
comportamento”, na página 377.
378 Capítulo 24
Para alterar a aparência do texto do link de maneira que não se pareça com um link:
1 Abra a visualização do código da janela do documento, escolhendo Exibir >Código.

2 Localize o link.
3 Na tag a href do link, inserir este atributo: style="text-decoration:none; color:black".
Esta definição de atributo desativa o sublinhado e torna preta a cor do texto. Obviamente, se o
texto circundante tiver outra cor, utilizá-la em vez da cor preta.
Observar que esse atributo é um estilo CSS em linha. Um estilo em linha aplicado a um único
link substitui outros estilos CSS aplicáveis a esse link, mas não tem efeito fora desse link. Para
alterar a aparência de texto com links em toda a página ou em todo o site, utilizar os estilos CSS
para criar um estilo novo para os links. Para obter detalhes, consulte o Capítulo 19, “Como
inserir e formatar texto”, na página 291.
Como anexar um comportamento a uma linha de tempo

Para disparar um comportamento em um determinado quadro de uma linha de tempo (em vez de
esperar que a interação com o visitante o dispare), colocar o comportamento na linha de tempo
(para obter informações sobre como criar uma linha de tempo, veja “Animação de camadas”, na
página 420). Por exemplo: é possível iniciar a reprodução de um som no quadro 15 de uma linha
de tempo.
Apenas um tipo de evento pode desencadear uma ação em uma linha de tempo: a animação que
atinge um determinado quadro (um evento onFrame7, por exemplo).
Além dos objetos de uma linha de tempo, o comportamento pode afetar qualquer objeto na página.
Visualize a linha de tempo em um navegador, para examinar o funcionamento do comportamento.
Não é possível visualizar os comportamentos no Dreamweaver.
Para colocar um comportamento em uma linha de tempo:
1 Clique em um quadro do canal de comportamentos, no painel Linhas de tempo.

2 Utilize o painel Comportamentos para escolher uma ação a ser executada no quadro.
A ação aparecerá no painel Comportamentos, e um evento indicará o número do quadro no qual
ela será disparada. Aparecerá um sinal de subtração (–) no canal de comportamentos do quadro
da linha de tempo.

Como alterar um comportamento
Depois de anexar um comportamento, você poderá alterar o evento que dispara a ação, adicionar
ou remover ações e alterar os parâmetros relativos às ações.
Para alterar um comportamento:
1 Selecione um objeto que possua um comportamento a ele anexado.

2 Escolha Janela > Comportamentos, para abrir o painel Comportamentos.
Os comportamentos aparecerão no painel, em ordem alfabética, segundo o evento. Se houver
diversas ações para o mesmo evento, elas serão exibidas na ordem em que serão executadas.
3 Escolha uma das opções a seguir:
• Para editar os parâmetros de uma ação, clique duas vezes no nome do comportamento ou
selecioná-lo e pressionar a tecla Enter. Em seguida, alterar os parâmetros na caixa de diálogo e
clique em OK.
• Para alterar a ordem das ações de um determinado evento, selecionar uma ação e clique no
botão de seta acima ou abaixo.
• Para excluir um comportamento, selecioná-lo e clique no botão com o sinal de subtração (–),
ou pressionar a tecla Delete.
Como atualizar um comportamento

Se as suas páginas contiverem comportamentos criados com o Dreamweaver 1 ou com o
Dreamweaver 2, esses comportamentos não serão atualizados automaticamente quando as páginas
forem abertas na versão atual do Dreamweaver. Entretanto, quando você atualizar uma ocorrência
de um comportamento em uma página (adotando o procedimento exposto abaixo), todas as
outras ocorrências do comportamento na página também serão atualizadas. Os comportamentos
criados com o Dreamweaver 3 funcionarão sem alterações no Dreamweaver 4.
Para atualizar um comportamento em uma página:
1 Selecione um elemento ao qual tiver sido anexado o comportamento.

2 Abra o painel Comportamentos.
3 Clique duas vezes no comportamento.
4 Clique em OK na caixa de diálogo do comportamento.
Todas as ocorrências desse comportamento na página serão atualizadas.
Como criar novas ações

As ações consistem de código JavaScript e HTML. Se estiver bastante familiarizado com
JavaScript, você poderá escrever novas ações e adicioná-las ao menu pop-up Ações, no painel
Comportamentos. Para obter mais informações, veja Extensão dos recursos do Dreamweaver.
380 Capítulo 24
Download e instalação de comportamentos de outros
fabricantes
Um dos aspectos mais úteis do Dreamweaver é a possibilidade de estender os seus recursos — ou
seja, ele oferece aos usuários que já estão familiarizados com JavaScript a oportunidade de escrever
o código JavaScript que poderá estender os recursos do Dreamweaver. Muitos destes usuários
optaram por compartilhar suas extensões com outros usuários ao enviá-las ao site Macromedia
Exchange para o Dreamweaver na Web.
Para efetuar o download e instalar novos comportamentos do site de intercâmbio:
1 Abra o painel Comportamentos e, no menu pop-up Ações (+), escolher Obter mais
comportamentos.
O navegador primário será aberto e o site de intercâmbio aparecerá. (é necessário estar
conectado à Web para poder efetuar o download de comportamentos).
2 Procure os pacotes.
3 Efetue o download e instale o pacote de extensão desejado.
Para obter detalhes, veja “Como adicionar extensões no Dreamweaver”, na página 59.
Como utilizar as ações de comportamentos enviadas com

o Dreamweaver
As ações de comportamento incluídas com o Dreamweaver foram criadas para que funcionem
com todas as versões do Netscape Navigator 4.0 e posteriores, e nas versões 4.0 e mais avançadas
do Internet Explorer. A maioria dessas ações de comportamento também funciona no Netscape
Navigator nas versões 3.0 e posteriores (os comportamentos referentes à camada não funcionam
no Navigator 3.0). A maioria dessas ações de comportamento falha silenciosamente na versão 3.0
do Internet Explorer.
Observação: As ações do Dreamweaver foram escritas para que possam ser executadas no maior número possível
de navegadores. Caso o código de uma ação do Dreamweaver seja removido manualmente ou substituído por
código de sua própria autoria, é possível que a compatibilidade com outros navegadores seja perdida.
Embora as ações do Dreamweaver tenham sido escritas visando maximizar a compatibilidade

entre os diferentes navegadores, algumas ações não funcionam nas versões mais antigas de alguns
navegadores. Além disso, alguns navegadores não oferecem qualquer suporte ao JavaScript, e
muitos usuários que consultam a Web mantêm o JavaScript desativado em seus navegadores. Para
obter os melhores resultados de compatibilidade entre diversas plataformas, forneça interfaces
alternativas delimitadas por tags noscript, de maneira que os usuários que não contarem com o
JavaScript possam utilizar o seu site.

Chamar o JavaScript
A ação Chamar o JavaScript permite utilizar o painel Comportamentos para especificar a
execução de uma função ou linha de código personalizada de JavaScript quando ocorrer
um evento. (é possível escrever o JavaScript ou utilizar o código disponível gratuitamente em
diversas bibliotecas de JavaScript na Web).
Para poder utilizar a ação Chamar o JavaScript:
1 Selecione um objeto e abrir o painel Comportamentos.

2 Clique no botão de adição (+) e escolher Chamar o JavaScript, no menu pop--up Ações.
3 Digite o JavaScript a ser executado ou o nome de uma função.
Por exemplo: para criar um botão Voltar, digite if (history.length > 0){history.back()}. Se
tiver encapsulado o código em uma função, digite apenas o nome da função (hogBack(), por
exemplo).
4 Clique em OK.
5 Verificar se o evento padrão corresponde ao desejado.
Se não corresponder, escolher um outro evento no menu pop-up. Se os eventos desejados não
estiverem listados, alterar o navegador de destino, no menu pop-up Mostrar os eventos de.
Alterar a propriedade
Utilize a ação Alterar a propriedade, para alterar o valor de uma das propriedades de um objeto (a
cor de fundo de uma camada ou a ação relacionada a um formulário, por exemplo). As
propriedades que podem ser afetadas são determinadas pelo navegador; um número maior de
propriedades poderá ser alterado por este comportamento no Internet Explorer 4.0 do que no
IE 3.0 ou nas versões 3.0 e 4.0 do Navigator. Por exemplo: é possível definir dinamicamente a cor
de fundo de uma camada.
Observação: Utilize esta ação apenas se já estiver muito familiarizado com HTML e JavaScript.
Para poder utilizar a ação Alterar a propriedade:
1 Selecione um objeto e abra o painel Comportamentos.

2 Clique no botão de adição (+) e escolha Alterar a propriedade, no menu-pop-up Ações.
3 No menu pop-up Tipo de objeto, escolha o tipo de objeto cuja propriedade deseja alterar.
O menu pop-up Objeto com nome passará a listar todos os objetos com nome do
tipo selecionado.
4 Escolha um objeto no menu pop-up Objeto com nome.
5 Escolha uma propriedade no menu pop-up Propriedade ou digite o nome da propriedade no
campo de texto.
Para poder examinar as propriedades que podem ser alteradas em cada navegador, escolher
navegadores diferentes ou versões de navegadores diferentes, no menu pop-up de navegadores. Se
estiver digitando o nome de uma propriedade, certifique-se de utilizar o nome correto da
propriedade JavaScript (e lembre-se de que as propriedades JavaScript levam em conta-maiúsc./
minúsc.).
6 Digite o novo valor da propriedade, no campo Novo valor, e clique em OK.
382 Capítulo 24
7 Verificar se o evento padrão corresponde ao desejado. Quando o evento ocorrer, a ação será
executada e a propriedade alterada.
Verificar o navegador
Utilize a ação Verificar o navegador, para enviar os visitantes a outras páginas, dependendo da
marca e versão do seu navegador. Por exemplo: é possível optar por enviar os visitantes para uma
página, se eles estiverem utilizando a versão 4.0 ou mais avançada do Navigator, para outra
página, se utilizarem a versão 4.0 ou mais avançada do Internet Explorer 4.0, ou por mantê-los na
mesma página, caso estejam utilizando qualquer outro navegador.
É útil anexar este comportamento à tag body de uma página que seja compatível com praticamente
qualquer navegador (e que não utilize outro JavaScript); desta maneira, mesmo os visitantes que
chegarem à página com o JavaScript desativado poderão ver algo.
Uma outra opção seria anexar este comportamento a um link nulo (<um href="javascript:;">, por
exemplo), de forma que a ação determinasse o destino do link, com base na marca e versão do
navegador do visitante.
Para poder utilizar a ação Verificar o navegador:

2 Clique no botão com o sinal de adição (+) e escolher Verificar o navegador, no menu
pop-up Ações.
3 Determine como gostaria de separar os visitantes: por marca de navegador, por versão de
navegador ou por ambos.
Por exemplo: você prefere que todos os visitantes com um navegador da versão 4.0 vejam uma
página, enquanto os visitantes com outras versões vejam uma página diferente? Ou, talvez, que
os usuários do Netscape Navigator vejam uma página, e os usuários do Internet Explorer,
outra.
4 Especifique uma versão do Netscape Navigator.
5 Nos menus pop-up adjacentes, escolher as opções que indicam as ações a serem tomadas se a
versão do navegador corresponder ou for mais avançada do que a versão do Netscape Navigator
especificada e como proceder no caso contrário.
As opções são Ir para a URL, Ir para a URL Alt. e Continuar nesta página.
6 Especifique uma versão do Internet Explorer.
7 Nos menus pop-up adjacentes, escolher as opções que indicam as ações a serem tomadas se a
versão do navegador corresponder ou for mais avançada do que a versão do Internet Explorer
especificada e como proceder no caso contrário.
As opções são Ir para a URL, Ir para a URL Alt. e Continuar nesta página.

8 No menu pop-up Outros navegadores, escolher uma opção, para especificar as ações que serão
tomadas se o navegador não for o Navigator ou o Internet Explorer. Por exemplo: é possível
que o visitante esteja utilizando um navegador com base em texto, como o Lynx.
Continuar nesta página é a melhor opção para os navegadores diferentes do Navigator e IE
porque a maioria não oferece suporte ao JavaScript — e, se não puderem ler este
comportamento, eles permanecerão na página de qualquer maneira.
9 Digite os caminhos e nomes de arquivos da URL e da URL alternativa nos campos de texto
situados na parte inferior da caixa de diálogo. Se você digite uma URL remota, digite também
o prefixo http://, além do endereço www.
10 Clique em OK.
Lembrar-se de que o objetivo desse comportamento é verificar as diferentes versões do
navegador, portanto, é melhor escolher um evento que funcione nos navegadores 3.0 e mais
avançados.
Verificar o plug-in
Utilize a ação Verificar o plug-in, para enviar os visitantes a outras páginas, dependendo da ocorrência
de um determinado plug-in instalado. Por exemplo: é possível optar por enviar os usuários para uma
página se eles possuírem o Shockwave, ou para outra página, se não contarem com ele.
Observação: Não é possível detectar determinados plug-ins no Internet Explorer utilizando o JavaScript. Contudo, a
seleção de Flash ou Director adicionará o código VBScript apropriado à página, para detectar os plug-ins no IE do
Windows. A detecção de plug-ins não é possível no Internet Explorer que estiver sendo executado no Macintosh.
Para poder utilizar a ação Verificar o plug-in:

2 Clique no botão com o sinal de adição (+) e escolher Verificar o plug-in, no menu
pop-up Ações.
3 No menu pop-up Plug-in, escolher um plug-in, ou clique na tecla Enter e digite o nome exato
do plug-in no campo adjacente.
É necessário o nome exato do plug-in, conforme o especificado em negrito na página Sobre os
plug-ins, no Navigator No Windows, escolher Ajuda do Navigator > comando Sobre os plug-
ins; no Macintosh, escolher Sobre os plug-ins, no menu Apple.
4 No campo Se for localizado, ir para a URL, especificar uma URL para os visitantes que contam
com o plug-in.
Se especificar uma URL remota, digite também o prefixo http:// no endereço.
Para garantir que os visitantes com o plug-in permanecerão na mesma página, deixar este
campo em branco.
5 No campo Caso contrário, vá para a URL, especificar uma URL alternativa para os visitantes
que não possuem o plug-in.
Para garantir que os visitantes sem o plug-in permanecerão na mesma página, deixar este
campo em branco.
384 Capítulo 24
6 A maioria dos plug-ins não pode ser detectada no Internet Explorer que estiver sendo
executado no Windows e é impossível sua detecção no Macintosh. Como padrão, quando a
detecção for impossível, o visitante será enviado para a URL listada no campo Caso contrário.
Para, em vez disso, enviar o visitante para a primeira URL (Se for localizado), selecionar a
opção Ir sempre para a primeira URL se a detecção não for possível. A seleção desta opção
implicará aceitar que “o visitante dispõe do plug-in, exceto se o navegador indicar
explicitamente que o plug-in não está presente”.
Em geral, se o conteúdo do plug-in for parte integrante da página, deve-se selecionar a opção
“Vá sempre para a primeira URL se a detecção não for possível”; os visitantes que não
possuírem o plug-in serão solicitados pelo navegador a efetuar o download do plug-in. Se o
conteúdo do plug-in não for essencial para a página, deixar esta opção desmarcada.
Esta opção se aplica apenas ao Internet Explorer; o Navigator é sempre capaz de detectar os
plug-ins.
7 Clique em OK.
Controlar o Shockwave ou Flash

Utilize a ação Controlar o Shockwave ou Flash para executar, parar, rebobinar ou ir para um
quadro de um filme Macromedia Shockwave ou Macromedia Flash.
Para utilizar a ação Controlar o Shockwave ou Flash:
1 Escolha Inserir > Mídia > Shockwave, ou Inserir > Mídia > Flash, para inserir um filme
Shockwave ou Flash, respectivamente.
2 Escolha Janela > Propriedades, e digite o nome de um filme, no campo de texto no alto mais à
esquerda (ao lado do ícone de Shockwave ou Flash). É necessário dar um nome ao filme, para
poder controlá-lo com a ação Controlar o Shockwave ou Flash.
3 Selecione os itens a serem utilizados no controle do filme Shockwave ou Flash. Por exemplo: se
houver uma imagem de um botão “Executar” a ser utilizada na reprodução do filme, selecione-
a.
4 Abra o painel Comportamentos (Janela > Comportamentos).
5 Clique no botão com o sinal de adição (+) e escolher Controlar o Shockwave ou Flash, no menu
pop-up Ações.
Uma caixa de diálogo com os parâmetros é exibida.
6 No menu pop-up Filme, escolher um filme.
O Dreamweaver automaticamente listará os nomes de todos os filmes Shockwave e Flash do
documento atual. (Especificamente, o Dreamweaver apresentará uma lista com os filmes cujos
nomes de arquivos terminem com .dcr, .dir, .swf ou .spl e que estiverem em tags object ou
embed.
7 Escolha uma das ações para executar, parar, rebobinar ou ir para um quadro do filme. A opção
Executar executa o filme a partir do quadro no qual ocorre a ação.
8 Clique em OK.

estiverem listados, alterar o navegador de destino no submenu Mostrar os eventos de, no menu
pop-up Eventos.
Arrastar a camada
A ação Arrastar a camada permite ao visitante arrastar uma camada. Utilize esta ação para criar
quebra-cabeças, controles deslizantes e outros elementos móveis de interface.
É possível especificar, entre outros aspectos, em qual direção o visitante poderá arrastar a camada
(horizontal, verticalmente ou em qualquer uma das direções), um destino até o qual a camada
deverá ser arrastada, se a camada se encaixará no destino, se esta estiver distante um certo número
de pixels, e o que deverá ser feito quando a camada alcançar o destino.
Como a ação Arrastar a camada deve ser chamada antes que a camada possa ser arrastada pelo
visitante, certifique-se de que o evento que disparará a ação ocorrerá antes que o visitante tente
arrastar a camada. É melhor anexar a ação Arrastar a camada ao objeto body (com o evento onLoad),
embora ela também possa ser anexada a um link que preencha toda a camada (ao redor de uma
imagem, por exemplo) e que utilize o evento onMouseOver.
Para poder utilizar a ação Arrastar a camada:
1 Escolha Inserir > Camada, ou clique no botão Desenhar Camada, na barra de Inserção, e
desenhar uma camada na visualização do projeto da janela do documento.
2 Selecione a tag body, clicando em <body>, no seletor de tags, situado na parte inferior da janela do
documento.
4 Clique no botão de adição (+) e escolher Arrastar a camada, no menu-pop-up Ações.
Se a opção Arrastar a camada não estiver disponível, é provável que já haja uma camada
selecionada. Como as camadas não aceitam eventos em ambos os navegadores da versão 4.0,
selecionar um outro objeto — como a tag body ou um link (uma tag) — ou, no menu pop-up
Mostrar os eventos de, alterar o navegador de destino para IE 4.0.
5 No menu pop-up Camada, selecionar a camada que deseja tornar arrastável.
6 No menu pop-up Movimento, escolher Restrito ou Não restrito.
O movimento não restrito é adequado aos quebra-cabeças e outros jogos que envolvem arrastar
e soltar elementos. No caso dos controles deslizantes e cenários móveis, como gavetas de
arquivos, cortinas e mini-persianas, opte pelo movimento restrito.
7 Digite os valores do movimento restrito (expressos em pixels) nos campos Acima, Abaixo, À
esquerda e À direita.
Os valores se relacionam à posição inicial da camada. Para restringir o movimento a uma região
retangular, digite valores positivos nos quatro campos. Para permitir apenas o movimento
vertical, digite valores positivos em Acima e Abaixo, e zero em À esquerda e À direita. Para
permitir apenas o movimento horizontal, digite valores positivos em À esquerda e À direita, e
zero em Acima e Abaixo.
386 Capítulo 24
8 Digite os valores do destino de soltura (em pixels) nos campos À esquerda e Acima.
O destino de soltura é o ponto até o qual você deseja que o visitante arraste a camada. A
camada terá alcançado o destino de soltura quando as suas coordenadas esquerda e do alto
coincidirem com os valores digitados nos campos À esquerda e Acima. Os valores se relacionam
ao canto superior esquerdo da janela do navegador. Clique em Obter a posição atual, para
preencher automaticamente os campos com a posição da camada.
9 Digite um valor (em pixels) no campo Encaixar, se distante, a fim de determinar a distância
mínima do destino de soltura da qual o visitante deverá se aproximar para a camada se encaixar
no destino.
Quanto maior o valor, mais fácil será para o visitante detectar o destino de soltura.
10 No caso de quebra-cabeças simples e manipulações de cenários, não há necessidade de
ultrapassar este ponto. Para definir a alça de arraste da camada, controlar o movimento da
camada enquanto estiver sendo arrastada e disparar uma ação quando a camada for solta, clique
na guia Avançado.
11 Para especificar se o visitante deverá clicar em uma determinada área da camada para que esta
seja arrastada, escolher Área dentro da camada, no menu pop-up Alça de arraste; em seguida,
digite as coordenadas da esquerda e do alto, assim como a largura e altura da alça de arraste.
Esta opção é útil quando a imagem dentro da camada possuir um elemento que sugere o
arraste, como uma barra de título ou alça de desenho, por exemplo. Não selecionar esta opção
se preferir permitir ao visitante clicar em qualquer ponto da camada para poder arrastá-la.
12 Escolha qualquer opção Enquanto arrasta que desejar utilizar:
• Selecione Trazer a camada para frente, se preferir que a camada seja transferida para a frente da
ordem de empilhamento enquanto for arrastada. Se selecionar esta opção, utilizar o menu pop-
up para optar por deixar a camada na frente ou restaurá-la à sua posição original na ordem de
empilhamento.
• Digite um código JavaScript ou um nome de função (monitorLayer(), por exemplo) no campo
Chamar o JavaScript, a fim de executar repetidamente o código ou função enquanto a camada
for arrastada. Por exemplo: é possível gravar uma função que monitore as coordenadas da
camada e exiba indicações como “você está próximo” ou “muito distante do destino de soltura”
em um campo de texto.
13 Digite um código JavaScript ou um nome de função (evaluateLayerPos(), por exemplo) no
segundo campo Chamar o JavaScript, a fim de executar o código ou função quando a camada
for solta. Selecione Apenas se estiver encaixada, nos casos em que o JavaScript for executado
apenas se a camada tiver alcançado o destino de soltura.
14 Clique em OK.
Lembre-se de que as camadas não contam com o suporte dos navegadores da versão 3.0.
Observação: É impossível anexar a ação Arrastar a camada a um objeto associado aos eventos onMouseDown ou
onClick.

Como reunir informações sobre a camada arrastável
Ao ser anexada a ação Arrastar a camada a um objeto, o Dreamweaver inserirá a função
MM_dragLayer() na seção head do documento. Além de registrar a camada como arrastável, esta
função definirá três propriedades de cada camada arrastável — MM_LEFTRIGHT, MM_UPDOWN e
MM_SNAPPED — que você poderá utilizar nas suas próprias funções JavaScript, a fim de determinar as
posições relativas horizontal e vertical da camada e se a camada atingiu o destino de soltura.
Observação: As informações fornecidas aqui se destinam ao uso apenas de programadores de JavaScript que já
contem com experiência.
Por exemplo: a função a seguir exibe o valor da propriedadeMM_UPDOWN (a posição vertical da

camada) em um campo de formulário denominado curPosField. Por serem dinâmicos, os campos
de formulário são úteis para exibir informações atualizadas continuamente, ou seja, é possível
alterar o seu conteúdo depois que a página tiver sido carregada, tanto no Navigator quanto no
Internet Explorer.
function getPos(layername){
var layerRef = MM_findObj(layername);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
Em vez de exibir o valor de MM_UPDOWN ou MM_LEFTRIGHT em um campo de formulário, grave uma
função que exiba uma mensagem no campo de formulário, dependendo de quão próximo o valor
estiver da zona de soltura, ou chame outra função que mostre ou oculte uma camada, dependendo
do valor. Os limites de sua imaginação e a sua habilidade de lidar com os recursos JavaScript
ditarão como você reagirá aos valores de MM_UPDOWN ou MM_LEFTRIGHT.
É especialmente útil ler a propriedade MM_SNAPPED quando houver várias camadas na mesma
página. Todas estas camadas deverão alcançar os seus destinos para que o visitante possa avançar
até a próxima página ou tarefa. Por exemplo: grave uma função que conte quantas camadas
possuem um valor de MM_SNAPPED correspondente a true e chame-a sempre que uma camada for
solta. Quando a contagem de camadas encaixadas atingir o número desejado, envie o visitante
para a próxima página ou exiba uma mensagem parabenizando-o.
Se você tiver utilizado o evento onMouseOver para anexar a ação Arrastar a camada a links
localizados em diversas camadas, será necessário efetuar uma pequena alteração à função
MM_dragLayer(), para evitar que a propriedade MM_SNAPPED de uma camada encaixada seja redefinida
como false se o ponteiro do mouse for passado sobre a própria. Isto poderá ocorrer quando tiver
utilizado Arrastar a camada para criar um quebra-cabeça, já que é provável que o visitante passe o
ponteiro do mouse sobre as peças já encaixadas enquanto posiciona outras. A função
MM_dragLayer() não é capaz de evitar este comportamento porque algumas vezes ele é preferível
(por exemplo: se desejar definir diversos destinos de soltura para uma única camada).
Para evitar o novo registro de camadas já encaixadas:
1 Faça uma cópia de segurança do documento antes de alterar o código. É possível fazê-lo na
janela do site do Dreamweaver, no Windows Explorer.
2 Escolha Editar > Localizar.
3 No menu pop-up Localizar, escolher Origem de HTML.
4 Digite (!curDrag) no campo de texto adjacente.
388 Capítulo 24
5 Clique em Localizar o próximo.
Se o Dreamweaver perguntar se deseja continuar a procurar desde o início do documento,
clique em Sim. O Dreamweaver localiza esta instrução:
if (!curDrag) return false;
6 Feche a caixa de diálogo Localizar e modifique a instrução na visualização do código da janela

do documento ou no inspetor de código, para que corresponda a:
if (!curDrag || curDrag.MM_SNAPPED != null) return false;
Os dois pipes (||) significam "ou", enquanto que curDrag é uma variável que representa a
camada que está sendo registrada como arrastável. O significado aproximado da instrução é “Se
curDrag não for um objeto ou se já tiver um valor MM_SNAPPED, não será necessário executar o
restante da função”.
Ir para a URL
A ação Ir para a URL abre uma nova página na janela ou na moldura especificada. Esta ação é
particularmente útil para alterar o conteúdo de duas ou mais molduras com um clique Ela
também pode ser chamada em uma linha de tempo, para que salte até uma nova página depois de
um determinado intervalo de tempo.
Para poder utilizar a ação Ir para a URL:

2 Clique no botão de adição (+) e escolher Ir para a URL, no menu-pop-up Ações.
3 Na lista de seleção Abrir em, escolher um destino para a URL.
A lista Abrir em automaticamente listará os nomes de todas as molduras no conjunto de
molduras, assim como na janela principal. Se não houver molduras, a janela principal será a
única opção.
Observação: Esta ação poderá provocar resultados inesperados se houver qualquer moldura com os nomes top,
blank, self ou parent. Algumas vezes, os navegadores confundem estes nomes com os dos destinos reservados.
4 Clique em Procurar, para selecionar um documento que será aberto, ou digite o caminho e o
nome do documento no campo URL.
5 Repita as etapas 3 e 4, para abrir outros documentos em outras molduras.
6 Clique em OK.

Menu de salto
Quando for criado um menu de salto utilizando Inserir > Objetos de formulário > Menu de salto,
o Dreamweaver criará um objeto de menu e lhe anexará o comportamento Menu de salto (ou Ir
do menu de salto). Em geral, não é necessário anexar manualmente a ação Menu de salto a um
objeto. Para obter informações sobre os menus de salto e como criá-los, veja “Inserção de um
menu de salto”, na página 446.
É possível editar um menu de salto já existente de duas maneiras distintas:
• É possível editar e reordenar os itens de menu, alterar os arquivos para os quais serão efetuados os
saltos e alterar a janela na qual os arquivos serão abertos, ao clicar duas vezes em uma ação já
existente Menu de salto, no painel Comportamentos.
• É possível editar os itens do menu da mesma maneira que faria em qualquer outro menu, ao
selecioná-lo e utilizar o botão Listar os valores, no inspetor de propriedades. Veja “Criação de
menus pop-up”, na página 636 para obter detalhes.
Para editar um menu de salto utilizando o painel Comportamentos:
1 Crie um objeto de menu de salto, se já não houver algum no documento.

2 Selecione o objeto de menu de salto e abrir o painel Comportamentos.
3 Na coluna Ações, clique duas vezes em Menu de salto.
4 Faça as alterações desejadas na caixa de diálogo Menu de salto e, em seguida, clique em OK.
Opção Ir do menu de salto

A ação Ir do menu de salto está intimamente associada à ação Menu de salto; Ir do menu de salto
permite associar um botão Ir a um menu de salto. Para poder utilizar esta ação, é necessária a
existência de um menu de salto no documento. A ação de clicar no botão Ir abrirá o link que
estiver selecionado no menu de salto. Normalmente, os menus de salto não exigem a ocorrência
de um botão Ir; em geral, a escolha de um item em um menu de salto acarreta a carga de uma
URL, sem qualquer intervenção por parte do usuário. Porém, se o visitante escolher o mesmo
item que já estiver escolhido no menu de salto, este não ocorrerá. Em geral, isto não fará
diferença, porém, se o menu de salto aparecer em uma moldura e os itens deste menu se
vincularem a páginas em outras molduras, o botão Ir poderá ser útil, permitindo aos visitantes
escolher novamente um item que já tenha sido selecionado no menu de salto.
Para adicionar uma ação Ir do menu de salto:
1 Selecione um objeto a ser utilizado como botão Ir (geralmente uma imagem de botão) e abrir o
painel Comportamentos.
2 Clique no botão de adição (+) e escolher Ir do menu de salto, no menu pop-up Ações.
3 No menu pop-up Escolher o menu de salto, selecionar um menu do botão Ir para ser ativado.
4 Clique em OK.
390 Capítulo 24
Abra a janela do navegador
Utilize a ação Abrir a janela do navegador, para abrir uma URL em uma nova janela. É possível
especificar as propriedades da nova janela, inclusive o seu tamanho, nome e atributos (se ela será
redimensionável, possuirá uma barra de menus, etc.). Por exemplo: é possível utilizar este
comportamento para abrir uma imagem maior em outra janela quando o visitante clicar em uma
imagem em miniatura; com este comportamento, é possível adequar o tamanho da nova janela ao
da imagem.
Se você não especificar qualquer atributo da janela, ela será aberta no tamanho e com os atributos
da janela que a tiver iniciado. A especificação de qualquer atributo da janela automaticamente
desativará todos os outros atributos que não estiverem explicitamente ativos. Por exemplo: se você
não definir qualquer atributo para a janela, ela poderá ser aberta com 640 por 480 pixels e possuir
uma barra de navegação, barra de ferramentas de localização, barra de status e barra de menus. Se
você definir a largura explicitamente como sendo 640 e a altura como sendo 480 pixels e não
definir outros atributos, a janela será aberta com 640 por 480 pixels e não possuirá barras de
navegação, de ferramentas de localização, de status ou de menus, qualquer alça de
redimensionamento ou barras de rolagem.
Para poder utilizar a ação Abrir a janela do navegador:

2 Clique no botão com o sinal de adição (+) e escolher Abrir a janela do navegador, no
menu-pop-up Ações.
3 Clique em Procurar, para selecionar um arquivo ou digite a URL a ser exibida.
4 Defina qualquer uma das opções a seguir:
Largura da janela especifica a largura da janela, em pixels.
Altura da janela especifica a altura da janela, em pixels.
Barra de ferramentas de navegação é a linha de botões do navegador que inclui Voltar, Avançar,
Página inicial e Atualizar.
Barra de ferramentas de localização é a linha de opções do navegador que incluem o campo de
localização.
Barra de status é
a área situada na parte inferior da janela do navegador, na qual são exibidas as
mensagens (como o tempo restante de transferência e as URLs associadas aos links).
Barra de menus é a área da janela do navegador, onde aparecem os menus Arquivo, Editar,
Exibir, Ir e Ajuda. Defina explicitamente esta opção, se desejar que os visitantes possam navegar
a partir da nova janela. Se você não definir esta opção, o usuário poderá apenas fechar ou
minimizar a janela a partir da nova janela.
Barras de rolagem, se necessárias especifica que as barras de rolagem aparecerão se o conteúdo
ultrapassar a área visível. Se você não definir esta opção explicitamente, as barras de rolagem
não aparecerão. Se a opção Alças de redimensionamento também estiver desativada, o visitante
não poderá exibir o conteúdo que ultrapassar o tamanho original da janela (apesar de poder
rolar a janela ao arrastar a margem da mesma).

Alças de redimensionamento especifica que o usuário poderá redimensionar a janela,
arrastando o canto inferior direito da mesma ou clicando no botão de maximização, situada no
canto superior direito. Se esta opção não estiver definida explicitamente, os controles de
redimensionamento não estarão disponíveis e o canto inferior direito da janela não poderá ser
arrastado.
Nome da janela é o nome da nova janela. Dar um nome à nova janela se desejar atribuir links a
ela ou controlá-la com o JavaScript. Este nome não pode conter espaços ou caracteres especiais.
5 Clique em OK.
Executar o som
Utilize a ação Executar o som, para executar um som. Por exemplo: é possível executar um efeito
sonoro sempre que o ponteiro do mouse for passado sobre um link ou executar um clipe de
música quando a página for carregada.
Observação: É possível que os navegadores exijam algum tipo de suporte adicional de áudio (como um plug-in de
áudio) para que possam executar sons. Por conseguinte, diferentes navegadores dotados de diferentes plug-ins
muitas vezes executam os sons de maneiras diferentes. É difícil prever com exatidão como serão executados os
sons que você programou aos visitantes do seu site.
Para poder utilizar a ação Executar o som:

2 Clique no botão de adição (+) e escolher Executar o som no menu-pop-up Ações.
3 Clique em Procurar, para selecionar um arquivo de som, ou digite o caminho e o nome do
arquivo no campo Executar o som.
4 Clique em OK.
Mensagem pop-up
A ação Mensagem pop-up exibe um alerta em JavaScript com a mensagem por você especificada.
Como os alertas em JavaScript possuem apenas um botão (OK), utilizar esta ação para fornecer
informações ao usuário, em vez de apresentar-lhe uma opção.
É possível incorporar qualquer chamada válida de função JavaScript, propriedade, variável global
ou outra expressão no texto. Para incorporar uma expressão JavaScript, colocá-la entre chaves ({}).
Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
Exemplo
A URL desta página é {window.location}, e hoje é {new Date()}.
Observação: Não é possível controlar a aparência do alerta JavaScript; ela será determinada pelo navegador
utilizado pelo visitante. Se desejar exercer um controle maior sobre a aparência da mensagem, considere a
possibilidade de utilizar o comportamento Abrir a janela do navegador. Para obter detalhes, veja “Abra a janela do
navegador”, na página 391.
392 Capítulo 24
Para poder utilizar a ação Mensagem pop-up:

2 Clique no botão de adição (+) e escolher Mensagem pop-up, no menu-pop-up Ações.
3 Digite a mensagem no campo Mensagem.
4 Clique em OK.
Pré-carregar as imagens
A ação Pré-carregar as imagens carrega no cache do navegador as imagens que não aparecem na
página imediatamente (como aquelas que serão permutadas com as linhas de tempo,
comportamentos ou JavaScript, por exemplo). Esse processo evita os atrasos causados pelo
download quando as imagens tiverem de ser exibidas.
Observação: Quando a opção Pré-carregar as imagens, na caixa de diálogo Permutar a imagem, for selecionada, a
ação Permutar a imagem pré-carregará automaticamente todas as imagens de realce, dispensando a necessidade
de adicionar manualmente a opção Pré-carregar as imagens quando estiver utilizando Permutar a imagem.
Para poder utilizar a ação Pré-carregar as imagens:

2 Clique no botão de adição (+) e escolher Pré-carregar as imagens, no menu-pop-up Ações.
3 Clique em Procurar, para selecionar o arquivo de imagem que será pré-carregado, ou digite o
caminho e o nome do arquivo de imagem no campo Arquivo de origem da imagem.
4 Clique no botão com o sinal de adição (+), situado no alto da caixa de diálogo, para adicionar a
imagem à lista Pré-carregar as imagens.
Observação: Se você não clicar no botão com o sinal de adição antes de digitar a próxima imagem, a
imagem escolhida na lista será substituída pela próxima imagem escolhida.
5 Para todas as imagens restantes que serão pré-carregadas na página atual, repetir as etapas 3 e 4.
6 Para remover uma imagem da lista Pré-carregar as imagens, selecionar a imagem na lista e
clique no botão com o sinal de subtração (–).
7 Clique em OK.

Defina a imagem da barra de navegação
Utilize a ação Definir a imagem da barra de navegação para transformar uma imagem em uma
imagem de barra de navegação ou para alterar a exibição e ações relacionadas às imagens de uma
barra de navegação (para obter mais informações, veja “Inserção de uma barra de navegação”, na
página 449).
Utilize a guia Básico da caixa de diálogo Definir a imagem da barra de navegação, para criar ou
atualizar uma imagem ou conjunto de imagens da barra de navegação, para alterar a URL exibida
quando um botão da barra de navegação for clicado e para selecionar uma janela diferente na qual
deseja exibir a URL.
Utilize a guia Avançado da caixa de diálogo Definir a imagem da barra de navegação, para alterar
o estado de outras imagens em um documento com base no estado do botão. Por padrão, a ação
de clicar em um elemento da barra de navegação automaticamente retornará todos os outros
elementos desta barra ao seu estado Ativo; utilizar a guia Avançado se desejar definir um outro
estado para uma imagem quando este for Inativo ou Sobreposto.
Para editar uma ação Definir a imagem da barra de navegação:
1 Selecione a imagem da barra de navegação a ser editada e abrir o painel Comportamentos.

2 Na coluna Ações do painel Comportamentos, clique duas vezes na ação Definir a imagem da
barra de navegação associada ao evento que estiver alterando.
3 Na guia Básico da caixa de diálogo Definir a imagem da barra de navegação, selecionar as
opções de edição de imagens.
Para definir diversas imagens para um botão da barra de navegação:
1 Selecione a imagem da barra de navegação a ser editada e abrir o painel Comportamentos.

2 Na coluna Ações do painel Comportamentos, clique duas vezes na ação Definir a imagem da
barra de navegação associada ao evento que estiver alterando.
3 Clique na guia Avançado da caixa de diálogo Definir a imagem da barra de navegação.
4 No menu pop-up Quando o elemento estiver sendo exibido, escolher um estado para a
imagem. Para obter informações sobre os estados das imagens, veja “Criação das barras de
navegação”, na página 448.
• Escolha Imagem inativa, se desejar alterar a exibição de uma outra imagem depois que um
usuário tiver clicado na imagem selecionada.
• Escolha Imagem sobreposta ou Imagem sobreposta enquanto inativa, se desejar alterar a
exibição de uma outra imagem quando o ponteiro estiver sobre a imagem selecionada.
5 Na lista Definir também a imagem, selecionar uma outra imagem a ser definida na página.
6 Clique em Procurar, para selecionar o arquivo de imagem a ser exibido, ou digite o caminho e
nome do arquivo de imagem no campo Para o arquivo de imagem.
7 Se tiver selecionado Imagem sobreposta ou Imagem sobreposta enquanto inativa na etapa 4,
ainda há uma opção adicional. Clique em Procurar, no campo de texto Se inativa, o arquivo de
imagem, para selecionar o arquivo de imagem, ou digite o caminho e nome do arquivo de
imagem a ser exibido.
394 Capítulo 24
Defina o texto da moldura
A ação Definir o texto da moldura permite definir dinamicamente o texto de uma moldura,
substituindo o conteúdo e a formatação da moldura pelo conteúdo especificado. O conteúdo
pode incluir qualquer HTML válido. Utilize esta ação para exibir informações dinamicamente.
Embora ação Definir o texto da moldura substitua a formatação de uma moldura, é
possível selecionar a opção Preservar a cor de fundo, para preservar os atributos das cores do fundo
da página e do texto.
Exemplo
Para criar um conjunto de molduras:
Escolha Modificar > Conjunto de molduras > Dividir a moldura para a esquerda, para a direita,
para cima ou para baixo.
Para obter mais informações, veja “Criação de molduras e conjuntos de molduras”, na
página 278.
Para poder utilizar a ação Definir o texto da moldura:

2 Clique no botão de adição (+) e escolher Definir o texto > Definir o texto da moldura, no
3 Na caixa de diálogo Definir o texto da moldura, escolher a moldura de destino no menu-pop-
up Moldura.
4 Clique no botão Obter o HTML atual, para copiar o conteúdo da seção body da moldura de
destino.
5 Digite uma mensagem no campo Novo HTML e, em seguida, clique em OK.
6 Verificar se o evento padrão corresponde ao desejado. Se não corresponder, escolher um outro
evento no menu-pop-up.
Se não forem exibidos os eventos desejados, alterar o navegador de destino no menu-pop-
up Mostrar os eventos de.
Defina o texto da camada

A ação Definir o texto da camada substitui o conteúdo e a formatação de uma camada já existente
em uma página pelo conteúdo especificado. O conteúdo pode incluir qualquer código-fonte
HTML válido.
A ação Definir o texto da camada substitui o conteúdo e a formatação de uma camada, mas
mantém os atributos da mesma, inclusive a cor. Formate o conteúdo, inclusive as tags HTML no
campo Novo HTML, na caixa de diálogo Definir o texto da camada.

Exemplo
Para criar uma camada:
1 Escolha Inserir > Camada.

Para obter mais informações, veja “Criação de camadas na página”, na página 409.
2 No inspetor de propriedades, digite um nome para a camada.
Para anexar uma ação Definir o texto da camada:

2 Clique no botão com o sinal de adição (+) e escolher Definir o texto > Definir o texto da
camada, no menu pop-up Ações.
3 Na caixa de diálogo Definir o texto da camada, utilizar o menu pop-up Camada, para escolher
a camada de destino.
4 Digite uma mensagem no campo Novo HTML e, em seguida, clique em OK.
Defina a mensagem de status

A ação Definir a mensagem de status mostra uma mensagem na barra de status, na parte inferior
esquerda da janela do navegador. Por exemplo: é possível utilizar esta ação para descrever o destino
de um link na barra de status, em vez de mostrar a URL a ele associada. Para examinar um
exemplo de mensagem de status, passe o mouse sobre qualquer um dos botões de navegação na
Ajuda do Dreamweaver. Observe, contudo, que os visitantes geralmente ignoram as mensagens na
barra de status (e nem todos os navegadores fornecem suporte total para definir o texto da barra
de status); se a mensagem for importante, pense na possibilidade de exibi-la como uma mensagem
pop-up ou texto de uma camada.
Exemplo
Para poder utilizar a ação Definir a mensagem de status:

2 Clique no botão de adição (+) e escolher Definir o texto > Definir o texto da barra de status, no
396 Capítulo 24
3 Na a caixa de diálogo Definir a mensagem de status, digite a mensagem no campo Mensagem.
A mensagem deverá ser concisa. Se a mensagem não couber na barra de status, o navegador a
truncará.
4 Clique em OK.
Defina o texto do campo de texto

A ação Definir o texto do campo de texto substitui o conteúdo de um campo de texto de um
formulário pelo conteúdo especificado.
Exemplo
Para criar um campo de texto com nome:
1 Escolha Inserir > Objetos de formulário > Campo de texto.

Se o Dreamweaver solicitar a adição de uma tag de formulário, clique em Sim. Para obter mais
informações, veja “Criação de formulários interativos”, na página 621.
2 No inspetor de propriedades, digite um nome para o campo de texto. Certifique-se de que o
nome seja exclusivo à página (não utilize o mesmo nome para diversos elementos na mesma
página, mesmo se estiverem em formulários diferentes).
Para poder utilizar a ação Definir o texto do campo de texto:
1 Selecione um campo de texto e abrir o painel Comportamentos.

2 Clique no botão com o sinal de adição (+) e escolher Definir o texto > Definir o texto do
campo de texto, no menu pop-up Ações.
3 Na caixa de diálogo Definir o texto do campo de texto, escolher o campo de texto de destino
no menu-pop-up Campo de texto.
4 Digite o texto no campo Novo texto e, em seguida, clique em OK.

Mostrar/ocultar as camadas
A ação Mostrar/ocultar as camadas mostra, oculta ou restaura a visibilidade padrão de uma ou mais
camadas. Esta ação é útil para mostrar informações à medida que o usuário interage com a página.
Por exemplo: à medida que o usuário passar o ponteiro do mouse sobre a imagem de uma planta,
uma camada poderá ser disparada, mostrando detalhes sobre a época e região de crescimento da
planta, a quantidade de sol necessária, o tamanho que a planta pode atingir e assim por diante.
A ação Mostrar/ocultar as camadas também é útil para criar uma camada de pré-carga — ou seja,
uma camada grande que obscurece o conteúdo da página inicialmente, desaparecendo em seguida,
quando todos os componentes da página tiverem sido carregados.
Para poder utilizar a ação Mostrar/ocultar as camadas:
1 Escolha Inserir > Camada, ou clique no botão Camada, situado na barra Inserir, e desenhar
uma camada na janela do documento.
Repita esta etapa para criar outras camadas.
2 Clique na janela do documento para desmarcar a camada e, em seguida, abrir o
painel Comportamentos.
3 Clique no botão de adição (+) e escolher Mostrar-ocultar as camadas, no menu pop-up Ações.
Se a opção Mostrar/ocultar as camadas não estiver disponível, é provável que já haja uma
camada selecionada. Como as camadas não aceitam eventos em ambos os navegadores da
versão 4.0, selecionar um outro objeto — como a tag body ou um link (uma tag) — ou, no menu
pop-up Mostrar os eventos de, alterar o navegador de destino para IE 4.0.
4 No menu pop-up Camadas com nome, selecionar a camada cuja visibilidade deseja alterar.
5 Clique em Mostrar, para mostrar a camada, Ocultar, para ocultá-la, ou Padrão, para restaurar a
visibilidade padrão da mesma.
6 Repita as etapas 4 e 5 para todas as camadas cuja visibilidade ainda deseja alterar. É possível
alterar a visibilidade de diversas camadas com um único comportamento.
7 Clique em OK.
Quando forem exibidas em uma janela do Netscape Navigator, é possível que as camadas sejam
reduzidas, para acomodar todo o conteúdo. A fim de impedir que isso ocorra, adicionar texto ou
imagens às camadas ou definir valores de corte das mesmas.
Para criar uma camada de pré-carga:
1 Clique no botão Desenhar a camada, na categoria Comuns da barra Inserir, e desenhar uma
camada grande na visualização do projeto da janela do documento.
Certifique-se de que a camada cubra todo o conteúdo da página.
2 No painel Camadas, arrastar o nome da camada até o alto da lista de camadas, para especificar
que esta camada deverá aparecer na frente da ordem de empilhamento.
3 Selecione a camada, se ainda não tiver sido selecionada, e nomeá-la como loading, utilizando o
campo mais à esquerda do inspetor de propriedades de camadas.
398 Capítulo 24
4 Mantendo a camada selecionada, definir, no inspetor de propriedades, a cor de fundo da
camada como sendo a mesma cor que o fundo da página.
5 Clique dentro da camada (que deverá estar obscurecendo o restante do conteúdo da página) e,
se desejar, digite uma mensagem.
Por exemplo: as mensagens “Aguarde até que a página seja carregada” ou “Carregando...”
mantêm o visitante informado sobre o que está ocorrendo, para que ele não pense que a página
não possui um conteúdo.
6 Clique na tag <body> no seletor de tags, situado no canto inferior esquerdo da janela do
documento.
7 No menu pop-up Ações do painel Comportamentos, escolher Mostrar/ocultar as camadas.
8 Na lista Camadas com nome, selecione a camada denominada carregando
9 Clique em Ocultar.
10 Clique em OK.
11 Certifique-se de que o evento listado ao lado da ação Mostrar/ocultar as camadas, na lista de
comportamentos seja onLoad. Se não for, selecione o evento e clique no triângulo para baixo,
situado entre o evento e a ação. Na lista de eventos do menu pop-up, escolher onLoad.
Mostrar o menu pop-up

Utilize o comportamento de Mostrar o menu pop-up para criar ou editar um menu pop-up
Dreamweaver ou para abrir e modificar um menu pop-up Fireworks inserido em um documento
Dreamweaver.
Defina as opções na caixa de diálogo Mostrar o menu pop-up para criar um menu pop-up
horizontal ou vertical. É possível utilizar esta caixa de diálogo para definir ou modificar a cor, o
texto e a posição de um menu pop-up.
Observação: É necessário utilizar o botão Editar, no inspetor de propriedades do Dreamweaver, para editar
imagens em um menu pop-up baseado em imagem. Entretanto, é possível utilizar o comando Mostrar o menu pop-
up para alterar o texto em um menu pop-up baseado em imagem. Para obter informações sobre a edição de
imagens no Fireworks MX, consulte o Capítulo 21, “Integração do Dreamweaver com outros aplicativos”, na
página 329.
Para ver um menu pop-up em um documento, é necessário abrir o documento em uma janela do
navegador e rolar o ponteiro sobre a imagem ou link acionado.

Para utilizar a ação Mostrar o menu pop-up:
1 Selecione um objeto ao qual deseja anexar o comportamento e abrir o painel Comportamentos

(Shift+F3).
2 Clique no botão de adição (+) e escolher Mostrar o menu pop-up no menu pop-up Ações.
3 Na caixa de diálogo Mostrar o menu pop-up que é exibida, utilizar as guias a seguir para definir
as opções do menu pop-up.
A guia Conteúdo permite definir o nome, a estrutura, a URL e o destino dos itens de menu
individuais.
A guia Aparência permite definir a aparência dos estados Ativo e Sobreposto do menu e as
opções de fonte para o texto do item de menu.
A guia Avançado permite definir as propriedades das células de menu. Por exemplo: é possível
definir a largura e a altura da célula, a cor da célula e a largura da borda, o recuo do texto e o
tempo de atraso antes de o menu ser exibido após o usuário mover o ponteiro sobre o
disparador.
A guia Posição permite definir onde o menu está posicionado em relação a imagem ou link
disparado.
Adicionar, remover e alterar a ordem dos itens do menu pop-up

Utilize a guia Conteúdo na caixa de diálogo Mostrar o menu pop-up para criar itens de menu. É
possível utilizar essa guia para remover os itens existentes ou alterar a ordem em que eles são
exibidos em um menu.
Para adicionar itens do menu pop-up:
1 Na guia Conteúdo, criar um item de menu pop-up seguindo um dos procedimentos abaixo:
No campo Texto, selecione o texto padrão (Novo Item) e digite o texto que será exibido no
menu pop-up.
2 Defina as opções adicionais desejadas.
Para que o item de menu abra outro arquivo quando clicado, no campo Link, digite o caminho
do arquivo ou clique no ícone Pasta e navegar para o documento que deseja abrir.
Para definir uma localização onde abrir o documento, por exemplo: em uma nova janela ou em
uma moldura específica, no menu pop-up Destino, escolher a localização desejada.
Observação: Se a moldura a ser designada não for exibida no menu pop-up Destino, fechar a caixa de diálogo
Mostrar o menu pop-up e, na janela Documento, selecionar o nome da moldura.
3 Clique no botão de adição (+) para adicionar outras entradas à lista de visualização Mostrar o
menu pop-up.
Ao finalizar a adição dos itens de menu, clique em OK para aceitar as definições padrão ou
selecionar outra guia de Mostrar o menu pop-up para definir as opções adicionais.
400 Capítulo 24
Para criar um item de submenu:
Na lista Mostrar o menu pop-up, selecionar o item que deseja transformar em um item de
submenu e seguir um dos procedimentos abaixo:
• Para recuar um item na lista de menus, clique no botão Recuar o item.
• Para remover um recuo, clique no botão Remover o recuo do item.
Observação: Não é possível transformar o primeiro item do menu na lista em um item de submenu.
Para alterar a ordem de um item no menu:
Na lista Mostrar o menu pop-up, selecionar o item que deseja mover para cima ou para baixo,
clique na seta para cima ou para baixo para mover o item aonde se deseja que ele seja exibido.
Para remover um item do menu:
1 Na guia Conteúdo, selecionar a entrada de menu que deseja remover na lista Mostrar o menu
pop-up.
Definição da aparência de um menu pop-up.

Após criar os itens de menu, deve-se utilizar a guia Aparência de Mostrar o menu pop-up para
definir a orientação, os atributos de fonte e os atributos de estado do botão do menu pop-up.
Observação: O painel de visualização da guia Aparência fornece um processamento aproximado das opções
definidas nesta guia.
Para definir a aparência de um menu pop-up.
1 No menu pop-up na parte superior da guia Aparência, escolher Menu Vertical ou Menu
Horizontal para definir a orientação do menu.
2 Defina as opções de formatação de texto desejadas:
No menu pop-up Fonte, selecionar a fonte que se deseja aplicar aos itens de menu.
Observação: Se a fonte que se deseja aplicar não se encontra na lista de fontes, utilizar a opção Editar lista de
fontes, para adicionar a fonte desejada à lista de fontes. Para garantir que o menu será exibido conforme se
deseja, é necessário escolher uma fonte que o visitante do site deve ter.
Defina o tamanho da fonte, os atributos de estilo e as opções de alinhamento ou justificação do

texto do item de menu.
3 Nas caixas Estado ativo e Estado sobre, utilizar o seletor de cor para definir as cores do texto e
da célula dos botões do item de menu.
4 Ao finalizar a definição das opções de aparência, clique em OK ou selecionar outra guia de
Mostrar o menu pop-up para definir as opções adicionais.

Definição das opções de aparência avançadas
Utilize as opções na guia Avançada para especificar atributos adicionais das células de menu. Por
exemplo: é possível definir a largura, a altura, o espaçamento de célula ou o preenchimento do
botão de menu, recuar o texto e definir os atributos da borda.
Para definir os atributos de formatação avançados de um menu pop-up:
1 Clique na guia Avançada e definir as opções que se deseja aplicar aos itens de menu:
A opção Largura da célula define uma largura específica, em pixels, para os botões de menu. A
largura da célula é definida automaticamente com base no maior item; para aumentar a largura
da célula, deve-se selecionar Pixels no menu pop-up e inserir um valor maior que o valor da
caixa de texto Largura da célula.
A opção Altura da célula define a altura específica, em pixels, dos botões do menu. Para
aumentar a altura da célula, selecionar Pixels no menu pop-up e inserir um valor maior que o
valor da caixa de texto Altura da célula.
A opção Preenchimento da célula determina o número de pixels entre o conteúdo da célula e as
suas bordas.
A opção Espaçamento entre as células determina o número de pixels entre células adjacentes.
A opção Recuo do texto permite especificar, em pixels, o recuo de texto em um item de
menu na célula.
A opção Atraso do menu define o tempo entre o movimento do ponteiro pelo usuário sobre a
imagem ou link disparado e o momento em que o menu é exibido. Os valores são em
milissegundo para que a definição padrão, 1000, seja igual a 1 segundo. Para cada segundo de
atraso, adicionar 000; por exemplo: para um atraso de 3 segundos, digite 3000.
A opção Bordas pop-up determina se uma borda é exibida em torno dos itens no menu. Se
desejar que uma borda seja exibida em torno dos itens de menu, certifique-se de que a caixa de
seleção Exibir bordas está marcada.
A opção Largura da borda define o tamanho da borda em pixels.
As opções Sombreado, Cor da borda e Realce permitem selecionar uma cor para essas opções
de borda. O sombreado e o realce não são exibidos na visualização.
2 Ao finalizar a definição das opções avançadas de aparência, clique em OK ou selecionar uma
outra guia de Mostrar o menu-pop-up para definir opções adicionais.
Definição da posição do menu pop-up em um documento

Utilize as opções de posição para definir onde o menu pop-up é exibido em relação à imagem ou
ao link disparado. É possível também definir se o menu fica oculto ou não quando o usuário move
o ponteiro para longe do disparador.
Para definir as opções de posição do menu pop-up:
1 Na caixa de diálogo Mostrar o menu pop-up, clique na guia Posição.

2 Defina a localização do menu pop-up, seguindo um dos procedimentos abaixo:
• Escolha uma das opções predefinidas:
• Defina as coordenadas da posição personalizada digitando um número na caixa de texto X, para
definir a coordenada horizontal, e digitando um número na caixa de texto Y, para definir uma
coordenada vertical. As coordenadas são contadas a partir do canto superior esquerdo do menu.
402 Capítulo 24
3 Para ocultar o menu pop-up quando o ponteiro não estiver sobre ele, certifique-se de que se a
opção Ocultar evento onMouseOut do menu está marcada. Para que o menu seja exibido,
cancelar a seleção dessa opção.
4 Ao finalizar a criação ou modificação do menu pop-up, clique em OK.
Modificação de um menu pop-up

O comportamento de Mostrar o menu pop-up permite editar ou atualizar o conteúdo de um
menu pop-up. É possível adicionar, excluir ou alterar os itens de menu, reorganizá-los e definir
onde um menu é posicionado em relação à imagem ou link disparado.
Para abrir um menu pop-up existente baseado em HTML:
1 No documento do Dreamweaver, selecionar o link ou a imagem que aciona o menu pop-up.

2 Abra o painel Comportamentos (Shift + F3), se ele ainda não estiver aberto, e, na lista Ações,
clique duas vezes em Mostrar o menu pop-up.
A caixa de diálogo Mostrar o menu pop-up é exibida.
3 Faça as alterações que desejar no menu pop-up.
4 Ao finalizar a modificação do menu pop-up, clique em OK.
Para obter informações detalhadas sobre a definição das opções do menu pop-up, veja “Mostrar o
menu pop-up”, na página 399.
Permutar a imagem
A ação Permutar a imagem permuta uma imagem por outra, ao alterar o atributo src da tag img.
Utilize esta ação para criar botões cambiáveis e outros efeitos em imagens (inclusive a permuta
simultânea de mais de uma imagem). Ao inserir uma imagem cambiável, automaticamente é
adicionado um comportamento Permutar a imagem à página.
Observação: Como apenas o atributo src é afetado por essa ação, a nova imagem a ser empregada deverá ter as
mesmas dimensões (altura e largura) que a original. Caso contrário, a nova imagem aparecerá compactada ou
expandida, para se ajustar às dimensões da imagem original.
Para poder utilizar a ação Permutar a imagem:
1 Escolha Inserir > Imagem, ou clique no botão Imagem, situado na barra Inserir, para
inserir uma imagem.
2 Nomear a imagem na caixa de texto mais à esquerda, no inspetor de propriedades.
A ação Permutar a imagem funcionará mesmo que você não nomeie as imagens; esta ação
nomeia automaticamente as imagens sem nome quando o comportamento for anexado a um
objeto. Contudo, é mais fácil distinguir as imagens na caixa de diálogo Permutar a imagem se
todas tiverem sido nomeadas previamente.
3 Repita as etapas 1 e 2 para inserir outras imagens.
4 Selecione um objeto (geralmente a imagem a ser permutada) e abrir o painel Comportamentos.
5 Clique no botão de adição (+) e escolher Permutar a imagem, no menu-pop-up Ações.
6 Na lista Imagens, selecione a imagem cuja origem deseja alterar.
7 Clique em Procurar, para selecionar o arquivo da nova imagem, ou digite o caminho e o nome
do arquivo da nova imagem na caixa de texto Definir a origem como.

8 Repita as etapas 6 e 7 para quaisquer outras imagens a serem alteradas. Utilize a mesma a ação
de permuta de imagens simultaneamente em todas as imagens a serem modificadas; caso
contrário, a ação Restaurar a imagem permutada a ela correspondente não irá restaurar todas as
imagens.
9 Quando a página tiver sido carregada, selecionar a opção Pré-carregar as imagens para carregar
as novas imagens no cache do navegador.
Esse processo evita os atrasos causados pelo download quando as imagens tiverem de
ser exibidas.
10 Clique em OK.
Restaurar a imagem permutada

A ação Restaurar a imagem permutada restaura o último conjunto de imagens permutadas aos
seus arquivos de origem anteriores. Esta ação é adicionada automaticamente, sempre que você
anexar a ação Permutar a imagem a um objeto; não será necessário selecioná-la manualmente se
tiver deixado selecionada a opção Restaurar durante a anexação de Permutar a imagem.
Ir para o quadro da linha de tempo

A ação Ir para o quadro da linha de tempo move o cabeçote de execução até o quadro
especificado. É possível utilizar esta ação no canal de comportamentos, no painel Linhas de
tempo, para que certas partes da linha de tempo sejam repetidas o número de vezes especificado,
para criar um link ou botão Rebobinar ou para permitir que o usuário salte até partes diversas da
animação.
Para poder utilizar a ação Ir para o quadro da linha de tempo:
1 Escolha Janela > Linha de tempo para abrir o painel Linhas de tempo e se certificar de que o
documento contém uma linha de tempo.
Se não houver barras de animação roxas no painel Linhas de tempo, o documento não contém
uma linha de tempo. Veja “Como mover uma camada utilizando uma animação de linha de
tempo”, na página 422.
2 Selecione um objeto ao qual deseja anexar o comportamento.
Para anexar o comportamento a um quadro da Linha de tempo, clique no canal
Comportamentos do quadro desejado.
4 Clique no botão de adição (+) e escolher Linha de tempo > Ir para o quadro da linha de tempo,
no menu-pop-up Ações. Se esta ação estiver esmaecida, o documento não contém uma linha de
tempo.
5 Selecione uma linha de tempo, no menu pop-up Linha de tempo.
6 Digite um número de quadro na caixa de texto Ir para o quadro.
404 Capítulo 24
7 Se estiver sendo adicionada esta ação no canal de comportamentos de uma linha de tempo e se
desejar repetir um segmento desta, deve-se digitar o número de repetições na caixa de texto
Loop.
É necessário deixar esta caixa de texto em branco se não se estiver anexando Ir para o quadro da
linha de tempo a um quadro da linha de tempo.
8 Clique em OK.
Executar a linha de tempo e Parar a linha de tempo

Utilize as ações Executar a linha de tempo e Parar a linha de tempo, para permitir que o visitante
inicie ou pare uma linha de tempo ao clicar em um link ou botão ou inicie ou pare uma linha de
tempo automaticamente ao passar o cursor sobre um link, imagem ou outro objeto. A ação
Executar a linha de tempo será automaticamente anexada à tag body com o evento onLoad quando
for selecionada a opção Execução automática, no painel Linhas de tempo.
Para poder utilizar as ações Executar a linha de tempo e Parar a linha de tempo:
1 Escolha Janela > Linha de tempo para abrir o painel Linhas de tempo e se certificar de que o
documento contém uma linha de tempo.
Se não houver barras de animação roxas no painel Linhas de tempo, o documento não contém
uma linha de tempo. Veja “Como mover uma camada utilizando uma animação de linha de
3 Clique no botão de adição (+) e escolher Executar a linha de tempo ou Parar a linha de tempo,
no menu-pop-up Ações.
4 Selecione a linha de tempo a ser executada ou parada ou optar por parar todas linhas de tempo,
no menu-pop-up.
5 Clique em OK.
Validar o formulário
A ação Validar o formulário verifica o conteúdo de determinados campos de texto, a fim de
garantir que o usuário tenha digitado o tipo correto de dados. Anexar esta ação a certos campos de
texto com o evento onBlur, a fim de validar os campos à medida que o usuário estiver preenchendo
o formulário, ou anexá-la ao formulário com o evento onSubmit, a fim de avaliar diversos campos
de texto simultaneamente quando o usuário clicar no botão Enviar. A anexação desta ação a um
formulário evita que este seja enviado ao servidor se algum dos campos contiver dados incorretos.

Para poder utilizar a ação Validar o formulário:
1 Escolha Inserir > Formulário, ou clique no botão Formulário, situado na barra Inserir, para
inserir um formulário.
2 Escolha Inserir > Objetos de formulário > Campo de texto, ou clique no botão Campo de
texto, situado na barra Inserir, para inserir um campo de texto.
Repita esta etapa para inserir outros campos de texto.
• Para validar determinados campos à medida que o usuário estiver preenchendo o formulário,
selecionar um campo de texto e escolher Janela > Comportamentos.
• Para validar vários campos quando o usuário enviar o formulário, clique na tag <form> no
seletor de tags, situado no canto inferior esquerdo da janela do documento, e escolher Janela >
Comportamentos.
4 No menu pop-up Ações, escolher Validar o formulário.
• Se estiver validando determinados campos, selecionar o mesmo campo que tiver selecionado na
janela do documento, na lista Campos com nome.
• Se estiver validando vários campos, selecionar um campo de texto na lista Campos com nome.
6 Selecione a opção apropriada, se o campo se destinar a receber dados.
7 Escolha uma dentre as opções a seguir de Aceitar:
• Utilize a opção Qualquer item, se o campo for necessário, porém não precisar conter qualquer
tipo específico de dados. Esta opção não terá significado (ela equivale à ausência, no campo, da
ação Validar o formulário) se a opção Necessário não estiver selecionada.
• Utilize a opção Endereço eletrônico, para verificar se o campo contém um sinal de @.
• Utilize a opção Número, para verificar se o campo contém apenas algarismos numéricos.
• Utilize a opção Número de, para verificar se o campo contém apenas um número em uma faixa
específica.
8 Se estiver validando vários campos, repita as etapas 6 e 7 para quaisquer outros campos a serem
validados.
9 Clique em OK.
Se estiver validando vários campos quando o usuário enviar o formulário, o evento onSubmit
aparecerá automaticamente no menu pop-up Eventos.
10 Se estiver validando um determinado campo, certifique-se de que o evento padrão seja onBlur
ou onChange.
Se não for, selecionar onBlur ou onChange no menu pop-up. Ambos os eventos disparam a ação
Validar o formulário, assim que o usuário mover o cursor para fora do campo. A diferença entre
estes eventos está na ocorrência invariável de onBlur, se o usuário tiver digitado no campo ou
não, enquanto que onChange ocorrerá apenas se o usuário tiver alterado o conteúdo do campo.
O evento onBlur é preferível quando tiver sido especificado que o campo é necessário.
406 Capítulo 24
CAPÍTULO 25
Animação de camadas
As camadas são elementos de página HTML que podem ser posicionados em qualquer ponto da
página. Elas podem conter texto, imagens ou qualquer outro conteúdo que possa ser inserido no
corpo de um documento HTML.
Com o Dreamweaver, pode-se inserir e animar as camadas, sem ter que codificar nada em
JavaScript ou HTML. É possível colocar as camadas na frente ou atrás de outras, ocultá-las
enquanto outras são exibidas e movê-las na tela. Coloque uma imagem de fundo em uma camada
e, em seguida, uma segunda camada contendo texto com um fundo transparente na frente da
primeira camada. As camadas também podem ser animadas, para que apareçam ou desvaneçam.
As camadas oferecem bastante flexibilidade para inserir conteúdo. Contudo, os navegadores da
Web que forem mais antigos do que o Microsoft Internet Explorer 4.0 e Netscape Navigator 4.0
não podem exibir as camadas, e os navegadores da versão 4 não são totalmente consistentes na
exibição das mesmas. Para garantir que todos possam visualizar a sua página da Web, conceba o
layout da página com camadas e, em seguida, converta-as em tabelas. Para obter mais
informações, veja “Utilização de tabelas e camadas para o layout”, na página 418. Contudo, se for
provável que a sua audiência esteja utilizando navegadores mais recentes, crie layouts apenas com
as camadas, sem convertê-las em tabelas.
Observação: Se não estiver familiarizado com a utilização de camadas e CSS, é recomendável utilizar as tabelas
ou a visualização de layout para dispor os elementos do layout da página (veja “Apresentação do conteúdo com
tabelas”, na página 241 e “Definição do layout de páginas na visualização de layout”, na página 257). A visualização
de layout é uma maneira fácil de implementar tabelas como estrutura subjacente na sua página de layout.

• “Sobre o código HTML das camadas”, na página 408
• “Criação de camadas na página”, na página 409
• “Aninhamento de camadas”, na página 411
• “Manipulação de camadas”, na página 412
• “Como adicionar conteúdo às camadas”, na página 414
• “Como exibir e definir as propriedades da camada”, na página 415
• “Utilização de tabelas e camadas para o layout”, na página 418
• “Animação de camadas”, na página 420
• “Animação de camadas utilizando as ações de comportamentos”, na página 428
407
Sobre o código HTML das camadas
Quando se coloca uma camada em um documento, o Dreamweaver insere a tag HTML
correspondente à camada no código. Defina o Dreamweaver para utilizar a tag div ou span nas
camadas. Como padrão, o Dreamweaver cria as camadas utilizando a tag div.
Observação: Existem duas outras tags que podem ser utilizadas na criação de camadas: layer e ilayer. Contudo,
essas tags são aceitas apenas no Netscape Navigator 4. O Internet Explorer não oferece suporte a essas tags e o
Netscape deixou de oferecê-lo nas versões posteriores. O Dreamweaver reconhece as tags layer e ilayer, mas
não cria camadas utilizando-as.
Para alterar a tag padrão, veja “Definição das preferências de camadas”, na página 410.
A diferença entre as tags div e span é que os navegadores que não oferecem suporte a camadas
colocam quebras de linha adicionais antes e depois da tag div ; ou seja, a tag div é um elemento
em nível de bloco, enquanto que a tag span é um elemento em linha. Na maioria dos casos de
navegadores que não oferecem suporte a camadas, é melhor que o conteúdo da camada apareça
em um parágrafo próprio, por isso é mais conveniente utilizar a tag div em vez de span. Para
melhorar ainda mais a leitura pelos navegadores mais antigos, tenha cuidado ao escolher o local
onde será colocado o código correspondente a uma camada.
O código que define uma camada pode estar em qualquer parte do corpo de um arquivo HTML.
Em uma camada desenhada no Dreamweaver, ela será exibida no local em que você a desenhou,
mas o Dreamweaver inserirá o código a ela correspondente no início da página, logo após a tag
body. (se for utilizado o comando Inserir camada, em vez de desenhá-la, o código da camada será
adicionado no ponto de inserção). Se for criada uma camada aninhada, o Dreamweaver inserirá o
código na tag que define a camada-mãe.
Observação: Qualquer que seja a tag utilizada, as versões do Internet Explorer e do Netscape Navigator anteriores
à 4.0 exibem o conteúdo da camada, mas não a posicionam. O conteúdo da camada aparecerá no mesmo ponto
da página que o seu código; por exemplo: se o código da camada estiver no início da página, o seu conteúdo
aparecerá nesse mesmo local, nos navegadores que não oferecerem suporte a camadas.
A seguir está um exemplo de código HTML para uma camada:

<div id="Layer1" style="position:absolute; visibility:inherit; width:200px; height:115px; z-
index:1">
</div>
A seguir está um exemplo de código HTML para uma camada aninhada dentro de outra camada:
<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px; height:158px; z-
index:1;">
Conteúdo da camada-mãe.
<div id="Nested" style="position:absolute; left:97px; top:114px; width:54px; height:69px; z-
index:1;">
Conteúdo da camada aninhada.
</div>
</div>
É possível definir as propriedades das camadas na página, inclusive as coordenadas x e y, o índice z
(ou ordem de empilhamento), além da visibilidade. Para obter mais informações, veja “Como
exibir e definir as propriedades da camada”, na página 415.
408 Capítulo 25
Criação de camadas na página
O Dreamweaver permite criar, com facilidade, camadas na página e posicioná-las com precisão.
Para criar uma camada, siga um dos procedimentos abaixo:
• Para desenhar uma camada, clique no botão Desenhar camada, na barra Inserir e, em seguida,
arraste a visualização do projeto da janela do documento.
• Para inserir o código de uma camada em um determinado local do documento, posicione o
ponto de inserção na janela do documento e, em seguida, escolha Inserir > camada.
Se a opção Elementos invisíveis estiver sendo exibida, aparecerá um marcador correspondente
ao código da camada na visualização do projeto, sempre que uma camada for colocada na
página. Se os marcadores correspondentes ao código das camadas não estiverem visíveis, para
vê-los, escolha Exibir > Auxílios visuais > Elementos invisíveis.
Observação: Se a opção Elementos invisíveis estiver ativa, os elementos na página poderão parecer
deslocados. Contudo, como os elementos invisíveis não aparecem nos navegadores, quando a página for
exibida em um navegador, todos os elementos visíveis aparecerão nas posições corretas.
Para desenhar diversas camadas consecutivamente:
1 Clique no botão Desenhar camada, na barra Inserir.

2 Mantenha a tecla Control pressionada e arraste para desenhar cada camada.
Você poderá continuar a desenhar novas camadas, contanto que não solte a tecla Control.
“Sobre o painel Camadas”, na página 409
“Definição das preferências de camadas”, na página 410
“Como evitar as sobreposições de camadas”, na página 419
Sobre o painel Camadas

O painel Camadas constitui um meio de gerenciar as camadas dos documentos. Para abrir o
painel Camadas, escolha Janela > Outros > Camadas. As camadas são exibidas como uma lista de
nomes, organizada de acordo com o índice z; a primeira camada criada está na parte inferior da
lista, enquanto que a camada criada mais recentemente está no alto da lista. As camadas aninhadas
são exibidas como nomes conectados às camadas-mãe. Clique nos ícones de sinal de adição (+) ou
de subtração (–) para mostrar ou ocultar as camadas aninhadas.
Utilize o painel Camadas para evitar sobreposições, alterar a visibilidade das camadas, aninhar ou
empilhar camadas e selecionar uma ou mais camadas.
Animação de camadas 409

“Criação de camadas na página”, na página 409
“Definição das preferências de camadas”, na página 410
“Aninhamento de camadas”, na página 411
“Seleção de camadas”, na página 412
“Como exibir e definir as propriedades da camada”, na página 415
“Alteração da ordem de empilhamento de camadas”, na página 416
“Alteração da visibilidade das camadas”, na página 417
Definição das preferências de camadas

Utilize a categoria Camadas, na caixa de diálogo Preferências, para especificar as definições padrão
das novas camadas.
Para exibir ou definir as preferências de camadas:

2 Selecione Camadas, na lista de categorias.
4 Clique em OK, para fechar a caixa de diálogo.
“Aninhamento de camadas”, na página 411
“Alteração da ordem de empilhamento de camadas”, na página 416
“Alteração da visibilidade das camadas”, na página 417
410 Capítulo 25
Aninhamento de camadas
A camada aninhada é aquela cujo código está contido em uma outra camada. O aninhamento é
utilizado regularmente para agrupar as camadas. Uma camada aninhada se move com a sua
camada-mãe e pode ser definida para herdar a visibilidade da mãe.
Para criar uma camada aninhada, insira ou desenhe uma camada dentro de outra, ou utilize o
painel Camadas. Para forçar o aninhamento automático das camadas ao desenhar uma camada
dentro de outra, selecione a opção Aninhamento, nas preferências de camadas. Para obter mais
informações, veja “Definição das preferências de camadas”, na página 410.
Observação: Utilize o ajuste de redimensionamento da Netscape quando estiver utilizando camadas aninhadas na
página (Comandos > Adicionar/Remover o ajuste do redimensionamento da Netscape). Do contrário, as camadas
perderão a sua posição quando o visitante redimensionar a janela do navegador, nas versões 4 do Netscape
Navigator. Defina uma opção das preferências, para sempre inserir o ajuste de redimensionamento da Netscape;
para obter mais informações, consulte a Ajuda do Dreamweaver (Ajuda > Como utilizar o Dreamweaver).
Para criar uma camada aninhada, siga um dos procedimentos abaixo:
• Para inserir uma camada aninhada, coloque o ponto de inserção dentro de uma camada existente e
escolha Inserir > camada.
• Para desenhar uma camada aninhada, clique no botão Desenhar camada, na barra Inserir e, em
seguida, arraste uma camada para dentro da camada existente. Se Aninhamento estiver
desativado nas preferências de camadas, mantenha pressionada a tecla Alt e arraste para
desenhar uma camada dentro de outra já existente.
Dica: É possível que as camadas aninhadas sejam exibidas de maneira diferente nos diversos navegadores. Ao
criar camadas aninhadas, verifique com freqüência a sua aparência em diversos navegadores durante o
processo de criação.
Para aninhar uma camada existente dentro de uma outra camada utilizando o painel Camadas:
1 Escolha Janela > Outros > Camadas, para abrir o painel Camadas.
2 Selecione uma camada no painel Camadas, em seguida, mantenha a tecla Control e arraste-a
até a camada de destino no painel Camadas. Solte o botão do mouse quando o nome da
camada de destino for realçado.

Manipulação de camadas
As camadas podem ser selecionadas, movidas, redimensionadas ou alinhadas durante o trabalho
no layout da página. É necessário selecionar uma camada, para poder mover, redimensionar ou
alinhá-la.
Para evitar que as camadas se sobreponham quando forem movidas ou redimensionadas, utilize a
opção Evitar sobreposições (veja “Como evitar as sobreposições de camadas”, na página 419).
Seleção de camadas
Selecione uma ou mais camadas, para manipulá-las ou alterar as suas propriedades.
Para selecionar uma camada, siga um dos procedimentos abaixo:
• Clique no nome da camada, no painel Camadas.

• Clique na alça de seleção da camada. Se a alça de seleção não estiver visível, clique em qualquer
ponto dentro da camada para tornar a alça visível.
• Clique na borda de uma camada.

• Mantenha pressionadas as teclas Control-Shift e clique dentro de uma camada. Se forem
selecionadas diversas camadas, esse procedimento cancelará a seleção de todas as outras e
selecionará apenas aquela que tiver sido clicada.
• Na visualização do projeto, clique no marcador do código da camada, que representa o local da
mesma no código HTML. Se o marcador do código da camada não estiver visível, escolha
Exibir > Auxílios Visuais > Elementos invisíveis.
Para selecionar camadas múltiplas, siga um dos procedimentos abaixo:
• Pressione a tecla Shift enquanto clica nos nomes de duas ou mais camadas, no painel Camadas.
• Pressione a tecla Shift e clique dentro ou na borda de duas ou mais camadas.
Quando houver camadas múltiplas selecionadas, as alças da última camada escolhida estarão
realçadas em preto. As alças de redimensionamento das outras camadas estarão realçadas em
branco.
412 Capítulo 25
Redimensionamento de camadas
É possível redimensionar uma única ou várias camadas simultaneamente, para tornar iguais as
suas larguras e alturas.
Se a opção Evitar sobreposições estiver ativada, não será possível redimensionar uma camada para
que esta se sobreponha a outra camada (veja “Como evitar as sobreposições de camadas”, na
página 419).
Para redimensionar a camada selecionada, siga um dos procedimentos abaixo:
• Para redimensionar arrastando o cursor, arraste qualquer uma das alças de redimensionamento
da camada.
• Para redimensionar um pixel por vez, pressione a tecla Control e uma das teclas de seta.
Observação: As teclas de seta moverão as bordas direita e inferior da camada; essa técnica não permite
redimensionar a camada utilizando as bordas superior e esquerda.
• Para redimensionar de acordo com o incremento de encaixe na grade, mantenha pressionadas

as teclas Shift-Control e uma das teclas de seta. Para obter informações sobre a definição de
incrementos de encaixe na grade, veja “Encaixe de camadas na grade”, na página 414.
• No inspetor de propriedades, digite os valores da largura (W) e altura (H).
O redimensionamento de uma camada irá alterar a sua largura e altura. Ele não definirá a extensão
do conteúdo da camada que estará visível. Para definir a região visível de uma camada, veja
“Como exibir e definir as propriedades da camada”, na página 415.
Para redimensionar diversas camadas simultaneamente:
1 Na visualização do projeto, selecione duas ou mais camadas.

• Escolha Modificar > Alinhar > Tornar as larguras iguais, ou Modificar > Alinhar > Tornar as
alturas iguais.
As primeiras camadas selecionadas assumirão a largura ou altura da última camada selecionada
(realçada em preto).
• No inspetor de propriedades, abaixo de Camadas múltiplas, digite os valores de largura e
altura. Os valores serão aplicados a todas as camadas selecionadas.
Como mover as camadas

É possível mover as camadas na visualização do projeto da mesma maneira que os objetos são
deslocados na maioria dos aplicativos gráficos básicos.
Se a opção Evitar sobreposições estiver ativa, não será possível mover uma camada para que se
sobreponha a outra. Veja “Como evitar as sobreposições de camadas”, na página 419.
Para mover uma ou mais camadas selecionadas, siga um dos procedimentos abaixo:
• Para mover arrastando, arraste a alça de seleção da última camada selecionada (realçada em preto).
• Para mover um pixel de cada vez, utilize as teclas de seta. Mantenha pressionada a tecla Shift e
uma das teclas de seta, para mover a camada de acordo com o incremento de encaixe na grade.
Para obter informações sobre a definição de incrementos de encaixe na grade, veja “Encaixe de
camadas na grade”, na página 414.

Alinhamento de camadas
Utilize os comandos de alinhamento de camadas, para alinhar uma ou mais camadas com uma borda
da última camada selecionada.
Durante o alinhamento de camadas, quando uma camada-mãe for selecionada e movida, é
possível que as camadas-filhas que não estiverem selecionadas se movam. Para evitar esse tipo de
problema, não utilize camadas aninhadas.
Para alinhar duas ou mais camadas:
1 Selecione as camadas.
2 Escolha Modificar > Alinhar e selecione uma opção de alinhamento.
Por exemplo: se você selecionar No alto, todas as camadas se moverão, de maneira que as suas
bordas superiores assumirão a mesma posição vertical que a borda superior da última camada
selecionada (realçada em preto).
Encaixe de camadas na grade

Utilize a grade como um guia visual para desenhar, posicionar ou redimensionar as camadas na
visualização do projeto da janela do documento. À medida que os elementos da página forem
movidos, é possível encaixá-los automaticamente na grade e alterá-la ou controlar o
comportamento de encaixe, através da especificação das definições de grade. O encaixe funcionará
independentemente da visibilidade da grade.
Para mostrar ou ocultar a grade:
Escolha Exibir > Grade > Mostrar a grade.
Para ativar ou desativar o encaixe:
Escolha Exibir > Grade > Encaixar na grade.
Para alterar as definições da grade:
1 Escolha Exibir > Grade > Definições da grade.

Aparecerá a caixa de diálogo Definições da grade.
2 Defina as opções desejadas.
3 Clique em OK.
Como adicionar conteúdo às camadas

Antes de colocar objetos numa camada, é necessário colocar o ponto de inserção dentro da
mesma.
Para colocar o ponto de inserção em uma camada:
Clique em qualquer ponto dentro das bordas da camada.

As bordas da camada serão realçadas e a alça de seleção aparecerá, mas a camada não estará
selecionada. Para obter informações sobre como selecionar as camadas, veja “Seleção de camadas”,
na página 412.
414 Capítulo 25
Como exibir e definir as propriedades da camada
É possível exibir e definir diversos atributos de uma camada no inspetor de propriedades.
Para exibir todas as propriedades de uma camada:
1 Selecione uma camada. Para obter informações sobre como selecionar as camadas, veja “Seleção
de camadas”, na página 412.
2 Abra o inspetor de propriedades, escolhendo Janela > Propriedades.
3 Se o inspetor de propriedades não estiver expandido, clique na sua seta de expansão, no canto
inferior direito, para examinar todas as propriedades.
Para definir as propriedades da camada com o inspetor de propriedades:
1 Selecione uma camada. Para obter informações sobre como selecionar as camadas, veja “Seleção
3 Altere os atributos da camada definindo as propriedades.
Como exibir e definir as propriedades de diversas camadas

Quando duas ou mais camadas forem selecionadas, o inspetor de propriedades das camadas
exibirá as propriedades de texto e um subconjunto de todas as propriedades das camadas,
permitindo que sejam modificadas várias camadas simultaneamente.
Para selecionar diversas camadas:
Mantenha pressionada a tecla Shift enquanto seleciona as camadas. Para obter informações sobre
como selecionar as camadas, veja “Seleção de camadas”, na página 412.
Para examinar todas as propriedades de diversas camadas:
1 Selecione diversas camadas.

3 Se o inspetor de propriedades não estiver expandido, clique na sua seta de expansão, no canto
inferior direito, para examinar todas as propriedades.

Para definir as propriedades de diversas camadas simultaneamente com o inspetor de
propriedades:
1 Selecione diversas camadas.

3 Altere os atributos das camadas, definindo as propriedades.
“Como exibir e definir as propriedades da camada”, na página 415
Alteração da ordem de empilhamento de camadas

Utilize o inspetor de propriedades ou o painel Camadas para alterar a ordem de empilhamento das
camadas. A camada na parte superior do painel Camadas está situada no alto da ordem de
empilhamento e aparecerá na frente das outras camadas.
No código HTML, a ordem de empilhamento das camadas, ou índice z, determina a ordem
segundo a qual elas serão desenhadas em um navegador. O índice z de cada camada pode ser
alterado no inspetor de propriedades ou no painel Camadas.
Para alterar a ordem de empilhamento das camadas no painel Camadas:
Escolha Janela > Outros > Camadas, para abrir o painel Camadas. Siga um dos procedimentos
abaixo:
• Selecione e arraste uma camada para cima ou para baixo, de acordo com a ordem de
empilhamento desejada. À medida que a camada for movida, aparecerá uma linha que indica o
local onde será colocada a camada. Solte o botão do mouse quando a linha de colocação
aparecer no ponto desejado da ordem de empilhamento.
• Na coluna Z, clique no número da camada que estiver sendo alterada. Digite um número mais
alto que o existente, para mover a camada para uma posição superior na ordem de
empilhamento, ou um número mais baixo, para mover a camada até uma posição inferior na
ordem de empilhamento.
Para alterar a ordem de empilhamento das camadas com o inspetor de propriedades:
1 Escolha Janela > Outros > Camadas, para abrir o painel Camadas e examinar a ordem de
empilhamento atual.
2 Selecione uma camada no painel ou na janela do documento.
3 No inspetor de propriedades da camada, digite um número na caixa de texto Índice Z.
• Digite um número mais alto, para mover a camada até uma posição superior na ordem de
empilhamento.
• Digite um número mais baixo, para mover a camada até uma posição inferior na ordem de
empilhamento.
416 Capítulo 25
Alteração da visibilidade das camadas
Ao trabalhar em um documento, você poderá mostrar ou ocultar as camadas manualmente com o
painel Camadas, para examinar a aparência da página em diversas condições.
Observação: A camada selecionada se tornará sempre visível e aparecerá na frente das outras camadas enquanto
estiver selecionada.
Para alterar a visibilidade de uma camada:
2 Clique na coluna do ícone representando um olho, para alterar a sua visibilidade.
• Um olho aberto significa que a camada está visível.
• Um olho fechado significa que a camada está invisível.
• Se não houver um ícone representando um olho, a camada costuma herdar as definições de
visibilidade da camada-mãe. Quando as camadas não estiverem aninhadas, a camada-mãe será
o corpo do documento, que está sempre visível. O ícone representando um olho estará ausente
quando não for especificada uma visibilidade (que aparecerá no inspetor de propriedades como
visibilidade padrão).
Para alterar a visibilidade de todas as camadas simultaneamente:
2 Clique no ícone representando um olho, no alto da coluna do cabeçalho.
Observação: Esse procedimento poderá tornar todas as camadas visíveis ou ocultas, mas estas não poderão
herdar a visibilidade da mãe.
Para obter informações sobre como definir a visibilidade padrão de novas camadas, veja
“Definição das preferências de camadas”, na página 410.

Utilização de tabelas e camadas para o layout
Em vez de utilizar tabelas ou a visualização de layout para criar o layout (veja “Apresentação do
conteúdo com tabelas”, na página 241 e “Definição do layout de páginas na visualização de
layout”, na página 257), alguns designers da Web preferem trabalhar com camadas e tabelas. O
Dreamweaver permite criar o layout utilizando camadas e, se desejar, convertê-las em tabelas, já
que os navegadores 3.0 não oferecem suporte a camadas. É possível ajustar o layout e otimizar o
desenho da página movimentando-se entre as diversas camadas e tabelas.
As camadas não podem ser convertidas em tabelas ou vice-versa em um modelo de documento ou
em um documento ao qual tiver sido aplicado um modelo. Em vez disso, crie o layout em um
documento que não seja um modelo e converta-o antes de salvá-lo como um modelo.
Uma única tabela ou camada não pode ser convertida. As camadas podem ser convertidas em
tabelas ou vice-versa somente em uma página inteira.
Se desejar gerar outros arquivos compatíveis com os navegadores das versões 3.0 a partir de um
arquivo que utilize camadas, utilize as opções de conversão do menu Arquivo (veja “Conversão
para obter compatibilidade com os navegadores da versão 3.0”, na página 419).
Observação: A conversão de camadas em tabelas poderá resultar em tabelas com um grande número de células
vazias.
Conversão entre camadas e tabelas

É possível criar o layout utilizando camadas e, em seguida, convertê-las em tabelas, para que o
layout possa ser visualizado nos navegadores mais antigos.
Para converter camadas em uma tabela:
1 Escolha Modificar > Converter > Camadas em tabela.

2 Na caixa de diálogo que aparecer, selecione as opções desejadas.
3 Clique em OK.
As camadas serão convertidas em uma tabela.
Para converter tabelas em camadas:
1 Escolha Modificar > Converter > Tabelas em camadas.

2 Na caixa de diálogo que aparecer, selecione as opções desejadas.
3 Clique em OK.
As tabelas serão convertidas em camadas. As células vazias não serão convertidas em camadas, a
não ser que elas tenham cores de fundo.
Observação: Os elementos de página que estavam fora das tabelas também serão colocados em camadas.
418 Capítulo 25
Como evitar as sobreposições de camadas
Como as células de tabelas não podem se sobrepor, o Dreamweaver não poderá criar uma tabela a
partir de camadas sobrepostas. Se estiver planejando converter as camadas de um documento em
tabelas para garantir a compatibilidade com os navegadores da versão 3.0, utilize a opção Evitar
sobreposições, que restringirá o movimento e posicionamento das camadas, de maneira que não
haja sobreposição.
Para evitar as sobreposições de camadas, siga um dos procedimentos abaixo:
• Selecione a opção Evitar sobreposições, no painel Camadas.

• Escolha Modificar > Organizar > Evitar sobreposições de camadas.
Quando esta opção estiver ativada, uma camada não poderá ser criada na frente de, movida ou
redimensionada sobre ou aninhada dentro de uma camada existente. Se esta opção for ativada
depois da criação de camadas sobrepostas, arraste a camada sobreposta e afaste-a das
outras camadas. O Dreamweaver não corrigirá automaticamente as camadas sobrepostas na
página quando a opção Evitar sobreposições de camadas for ativada.
Quando essa opção e o encaixe estiverem ativos, a camada não se encaixará na grade, se isto
acarretar a sobreposição de duas camadas. Em vez disso, ela se encaixará na margem da
camada mais próxima.
Observação: Certas ações permitem que as camadas se sobreponham, mesmo quando a opção Evitar
sobreposições estiver ativada. Se você inserir uma camada utilizando o menu Inserir, digite números no inspetor de
propriedades ou reposicionar as camadas editando o código-fonte HTML, poderá provocar a sobreposição ou o
aninhamento de camadas enquanto essa opção estiver ativada. Se as sobreposições ocorrerem, arraste as
camadas sobrepostas até a visualização do projeto, a fim de separá-las.
Conversão para obter compatibilidade com os navegadores da versão 3.0

É possível converter uma página que utilize camadas ou CSS em outra que utilize tabelas e
markup de HTML, para torná-la compatível com os navegadores da versão 3.0. O Dreamweaver
cria um outro documento convertido, mantendo inalterado o documento original.
Em geral, essas conversões deverão ser efetuadas apenas quando você estiver inteiramente satisfeito
com o layout do documento original; caso contrário, será necessário repetir a conversão a cada vez
que esse documento for alterado.
Para converter um arquivo a ser utilizado com os navegadores da versão 3.0:
1 Escolha Arquivo > Converter > Compatível com navegador 3.0.

2 Na caixa de diálogo que aparecer, escolha se deseja converter as camadas em tabelas, os estilos
CSS em markup de HTML (estilos de caracteres), ou ambos.
3 Clique em OK.
O Dreamweaver abrirá o arquivo convertido em uma nova janela sem título. Quando a opção
Converter camadas em tabelas ou Ambos for selecionada, todas as camadas serão substituídas por
uma única tabela, que manterá o posicionamento original do conteúdo.
Observação: Não é possível converter as camadas sobrepostas ou fora da página, à esquerda ou no alto.

Se a opção Converter estilos CSS em markup de HTML ou Ambos for selecionada, o markup de
CSS será substituído, onde for possível, por estilos de caracteres HTML. Qualquer markup de
CSS que não puder ser convertido em HTML será removido. Para obter informações sobre os
estilos que são convertidos e os que são removidos, veja “Tabela de conversão de CSS em markup
de HTML”, na página 315.
O código de linhas de tempo que anima as camadas será removido. O código de linhas de tempo
que não estiver relacionado às camadas (comportamentos ou alterações ao arquivo de origem da
imagem, por exemplo) continuará a ser executado conforme especificado. A linha de tempo será
automaticamente rebobinada até o quadro 1. Para obter mais informações sobre as linhas de
tempo, veja “Como mover uma camada utilizando uma animação de linha de tempo”, na
página 422.
Animação de camadas
O HTML dinâmico, ou DHTML, refere-se à combinação entre HTML e uma linguagem de
criação de scripts que permite alterar as propriedades de estilo ou posicionamento de elementos
HTML. No Dreamweaver, as linhas de tempo utilizam o HTML dinâmico para alterar as
propriedades de camadas e imagens ao longo do tempo. Utilize as linhas de tempo para criar
animações que dispensem quaisquer controles ActiveX, plug-ins ou applets Java (mas que
requerem JavaScript).
Observação: A palavra dinâmico pode ter diferentes significados, dependendo do contexto relacionado à Web.
Não confunda o HTML dinâmico com as páginas dinâmicas da Web, que são aquelas geradas de maneira dinâmica
por códigos do servidor antes de serem veiculadas aos visitantes. Para obter mais informações sobre como criar as
páginas dinâmicas, consulte o Capítulo 30, “Fluxo de trabalho do Dreamweaver para projetos de páginas
dinâmicas”, na página 523.
As linhas de tempo possibilitam alterar a posição, visibilidade, ordem de empilhamento e o

tamanho de uma camada. As funções de camadas das linhas de tempo funcionam apenas nos
navegadores das versões 4.0 ou mais avançadas. As linhas de tempo também são úteis para outras
ações que deverão ocorrer após o final da carga da página. Por exemplo: as linhas de tempo podem
alterar o arquivo de origem de uma tag de imagem, para que imagens diversas apareçam na página
durante um certo período de tempo.
Abra a visualização de código da janela do documento para examinar o código JavaScript gerado
por uma linha de tempo. O código da linha de tempo está na função MM_initTimelines, em uma
tag script, na seção head do documento.
Ao editar o HTML de um documento que contém linhas de tempo, certifique-se de não mover,
renomear ou excluir qualquer elemento ao qual se refere a linha de tempo.
420 Capítulo 25
Utilização do painelLinhas de tempo
O painel Linhas de tempo mostra como as propriedades das camadas e imagens se alteram ao
longo do tempo. Escolha Janela > Outros > Linhas de tempo, para abrir o painel Linhas de
tempo.
Menu pop-up Linha de tempo
Cabeçote de execução
Números de quadros
Canal de
comportamentos
Quadros primários Canal de animação

Barra de animação
Menu pop-up Linha de tempo especifica quais linhas de tempo do documento estão exibidas no
painel Linhas de tempo.
Cabeçote de execução mostra o quadro da linha de tempo que está em exibição na janela do
documento.
Números de quadros indicam o número seqüencial de quadros. O número entre os botões Voltar
e Executar representa o quadro atual. Controle a duração da animação ao definir o número total
de quadros e o número de quadros por segundo (qps). A definição padrão de 15 quadros por
segundo constitui uma boa taxa média, a ser utilizada na maior parte dos navegadores executados
nos sistemas mais comuns do Windows.
Observação: É possível que as taxas mais rápidas não melhorem o desempenho. Os navegadores sempre
executam cada quadro da animação, mesmo se não puderem atingir a taxa de quadros especificada. A taxa de
quadros será ignorada se for mais alta do que o navegador pode gerenciar.
Menu contextual contém diversos comandos relacionados às linhas de tempo.

Canal de comportamentos éo canal contendo os comportamentos que deverão ser executados em
um determinado quadro da linha de tempo.
Barras de animação mostram a duração de cada animação de objeto. Uma única linha pode incluir
várias barras, que representam diversos objetos. Barras diferentes não podem controlar o mesmo
objeto no mesmo quadro.
Quadros primários são quadros situados em uma barra na qual haviam sido especificadas algumas
propriedades (como a posição) do objeto. O Dreamweaver calcula os valores intermediários dos
quadros situados entre os quadros primários. Os quadros primários são indicados por pequenos
círculos.
Canais de animação exibem barras para animar as camadas e imagens.

Opções de execução
As seguintes são opções de execução para exibir a animação.
Rebobinar move o cabeçote de execução até o primeiro quadro da linha de tempo.

Voltar move o cabeçote de execução um quadro à esquerda. Clique em Voltar e mantenha
pressionado o botão do mouse, para executar a linha de tempo de trás para diante.
Executar move o cabeçote de execução um quadro à direita. Clique em Executar e mantenha
pressionado o botão do mouse, para executar a linha de tempo normalmente.
Execução automática inicia a execução automática de uma linha de tempo quando a página tiver
sido carregada em um navegador. A execução automática anexa um comportamento à tag body da
página, que executa a ação Executar a linha de tempo quando a página for carregada.
Loop provoca a repetição indefinida da linha de tempo quando a página estiver aberta em um
navegador. A opção Loop insere o comportamento Ir para o quadro da linha de tempo, no canal
de comportamentos, após o último quadro da animação. No canal de comportamentos, clique
duas vezes no marcador do comportamento, para editar os parâmetros do mesmo e alterar o
número de repetições.
Como mover uma camada utilizando uma animação de linha de tempo

O tipo mais comum de animação de linha de tempo envolve o movimento da camada ao longo de
um caminho. As linhas de tempo podem mover apenas as camadas. Para mover imagens ou texto,
crie uma camada utilizando o botão Desenhar camada, na barra Inserir e, em seguida, insira
imagens, texto ou qualquer outro tipo de conteúdo na camada (veja “Criação de camadas na
página”, na página 409).
As linhas de tempo também podem alterar outros atributos das camadas e imagens; para obter
mais informações, veja “Alteração das propriedades das imagens e camadas com as linhas de
Para animar uma camada utilizando uma linha de tempo:
1 Mova a camada até o ponto inicial da animação.

2 Escolha Janela > Outros > Linhas de tempo.
422 Capítulo 25
3 Selecione a camada a ser animada.
Certifique-se de ter selecionado o elemento desejado. Clique no marcador ou na alça de seleção
da camada, ou utilize o painel Camadas para selecionar uma camada. Para obter mais
informações, veja “Manipulação de camadas”, na página 412. Quando a camada estiver
selecionada, aparecerão alças ao seu redor, como mostra a seguinte ilustração.
Clique na alça de seleção da camada para
selecioná-la
Camada selecionada contendo uma

imagem
Ao clicar na camada, surgirá um ponto de inserção piscando dentro da mesma, porém isso não
indica que ela esteja selecionada.
4 Escolha Modificar > Linha de tempo >Adicionar objeto à linha de tempo, ou simplesmente
arraste a camada selecionada até o painel Linhas de tempo.
Aparecerá uma barra no primeiro canal da linha de tempo. O nome da camada aparecerá
na barra.
5 Clique no marcador do quadro primário, no final da barra.
6 Mova a camada na página para onde deverá estar ao final da animação.
Uma linha aparecerá exibindo o caminho da animação na janela do documento.
7 Se desejar que a camada se mova em uma curva, selecione a respectiva barra de animação e,
mantendo pressionada a tecla Control, clique num quadro no meio da barra de animação, para
adicionar um quadro primário na posição do cursor, ou clique em um quadro no meio da barra
de animação e, no menu de atalhos, escolha Adicionar quadro primário.
Repita essa etapa para definir outros quadros primários.
8 Mantenha pressionado o botão Executar, para visualizar a animação na página.
Repita o procedimento para adicionar outras camadas e imagens à linha de tempo, e criar uma
animação mais complexa.

Criação de uma linha de tempo arrastando um caminho
Se desejar criar uma animação com um caminho complexo, a gravação do caminho à medida que
arrasta a camada poderá ser mais eficiente do que a criação de quadros primários individuais.
Para criar uma linha de tempo arrastando um caminho:
1 Selecione uma camada.

2 Mova a camada até o ponto inicial da animação.
Certifique-se de ter selecionado a camada; se o ponto de inserção estiver dentro da mesma, a
camada não será selecionada. Para selecionar uma camada, clique no marcador ou na alça de
seleção da mesma, ou utilize o painel Camadas. Para obter mais informações, veja
“Manipulação de camadas”, na página 412.
3 Escolha Modificar > Linha do tempo > Gravar o caminho da camada.
4 Arraste a camada pela página para criar um caminho.
5 Solte a camada no ponto em que a animação deverá parar.
O Dreamweaver adicionará uma barra de animação à linha de tempo, que possuirá o número
apropriado de quadros primários.
6 No painel Linhas de tempo, clique no botão Rebobinar; em seguida, mantenha pressionado o
botão Executar, para visualizar a animação.
Modificação das linhas de tempo

Após ter definido os componentes básicos de uma linha de tempo, faça alterações, como adicionar
e remover quadros, alterar o início da animação, etc.
Para modificar uma linha de tempo, siga um dos procedimentos abaixo:
Para tornar a animação mais longa, arraste o marcador do quadro final para a direita. Todos os
quadros primários da animação serão acomodados no novo espaço, mantendo constantes as suas
posições relativas. Para impedir que os outros quadros primários se movam, pressione a tecla Alt
enquanto arrasta o marcador do quadro final.
• Para antecipar ou retardar a chegada da camada à posição de um quadro primário, mova o
marcador do quadro primário para a direita ou esquerda, ao longo da barra.
• Para alterar o início de uma animação, selecione uma ou mais barras associadas à animação
(pressione a tecla Shift para selecionar mais de uma barra simultaneamente) e arraste-a para
a esquerda ou direita.
• Para alterar a localização de toda a animação, selecione a barra inteira e arraste o objeto sobre a
página. O Dreamweaver ajustará a posição de todos os quadros primários. Qualquer tipo de
alteração feita com uma barra inteira selecionada modificará todos os quadros primários.
• Para adicionar ou remover quadros da linha de tempo, escolha Modificar > Linha de tempo >
Adicionar quadro, ou Modificar > Linha de tempo > Remover o quadro.
424 Capítulo 25
• Para que a linha de tempo seja executada automaticamente quando a página for aberta em um
navegador, clique em Execução automática. Esta opção anexará um comportamento à página,
que executará a ação Executar a linha de tempo quando a página for carregada.
• Para que a linha de tempo seja repetida continuamente, clique em Loop. Esta opção inserirá a
ação Ir para o quadro da linha de tempo no canal de comportamentos, após o último quadro
da animação. É possível editar os parâmetros relacionados a esse comportamento, para definir o
número de repetições.
Alteração das propriedades das imagens e camadas com as linhas de tempo

Além de mover as camadas com as linhas de tempo, é possível alterar a visibilidade, ordem de
empilhamento e o tamanho de uma camada, assim como o arquivo de origem de uma imagem.
Para alterar as propriedades de imagens e camadas com uma linha de tempo:
1 No painel Linhas de tempo, siga um dos procedimentos abaixo:

• Selecione um quadro primário na barra que controla o objeto a ser alterado. Os quadros inicial
e final são sempre primários.
• Crie um novo quadro primário, clicando em um quadro no meio da barra de animação e
escolhendo Modificar > Linha de tempo > Adicionar quadro primário. Ao invés disso, é
possível criar um novo quadro primário, mantendo pressionada a tecla Control enquanto clica
num quadro da barra de animação.
2 Defina as novas propriedades do objeto, seguindo um dos procedimentos abaixo:
• Para alterar o arquivo de origem de uma imagem, clique no ícone correspondente à pasta, ao
lado da caixa de texto Orig, no inspetor de propriedades e, em seguida, procure e selecione uma
nova imagem.
• Para alterar a visibilidade de uma camada, escolha default (padrão), inherit (herdar), visible
(visível) ou hidden (oculta), na caixa de texto Vis, no inspetor de propriedades. Ou utilize os
ícones representando um olho, no painel Camadas. Veja “Alteração da visibilidade das
camadas”, na página 417.
• Para alterar o tamanho de uma camada, arraste suas alças de redimensionamento ou digite
novos valores nas caixas de texto Largura e Altura, no inspetor de propriedades. Nem todos os
navegadores podem alterar dinamicamente o tamanho de uma camada.
• Para alterar a ordem de empilhamento de uma camada, digite um novo valor na caixa de texto
Índice Z ou utilize o painel Camadas (veja “Alteração da ordem de empilhamento de camadas”,
na página 416).
3 Mantenha pressionado o botão Executar, para examinar a animação.

Utilização de múltiplas linhas de tempo
Em vez de tentar controlar todas as ações em uma página com uma linha de tempo, é mais fácil
trabalhar com linhas de tempo individuais que controlam partes distintas da página. Por exemplo:
a página poderá incluir elementos interativos que acionam linhas de tempo diferentes.
Para gerenciar diversas linhas de tempo, siga um dos procedimentos abaixo:
• Para criar uma nova linha de tempo, escolha Modificar > Linha de tempo > Adicionar linha de
tempo.
• Para remover a linha de tempo selecionada, escolha Modificar > Linha de tempo > Remover a
linha de tempo. Esta opção removerá permanentemente todas as animações da linha de tempo
selecionada.
• Para renomear a linha de tempo selecionada, escolha Modificar > Linha de tempo > Renomear
a linha de tempo, ou digite um novo nome no menu pop-up Linha de tempo, no painel Linhas
de tempo.
• Para exibir uma outra linha de tempo no painel Linhas de tempo, escolha uma nova linha de
tempo no menu pop-up Linha de tempo, no painel Linhas de tempo.
Como copiar e colar as animações

Quando a seqüência de animação o satisfizer, copie e cole-a em outra área da linha de tempo, em
outra linha de tempo do mesmo documento ou em uma linha de tempo de outro documento.
Também é possível copiar e colar várias seqüências simultaneamente.
Para recortar, ou copiar e colar seqüências de animação:
1 Clique em uma barra de animação para selecionar uma seqüência. Para selecionar diversas
seqüências, pressione a tecla Shift-enquanto clica em diversas barras de animação; para selecionar
todas as seqüências, pressione a teclas Control + A.
2 Copie ou recorte a seleção.
• Mova o cabeçote de execução para um outro ponto da linha de tempo.
• Selecione uma outra linha de tempo, no menu pop-up Linha de tempo.
• Abra outro documento ou crie um novo e, em seguida, clique no painel Linhas de tempo.
4 Cole a seleção na linha de tempo.
As barras de animação de um mesmo objeto não podem se sobrepor porque uma camada não
pode ocupar dois lugares simultaneamente (nem uma imagem pode ter duas origens diferentes
ao mesmo tempo). Se a barra de animação a ser colada se sobrepuser a uma outra do mesmo
objeto, o Dreamweaver acomodará automaticamente a seleção até o primeiro quadro sem
sobreposição.
426 Capítulo 25
Há dois princípios a serem levados em conta quando forem coladas seqüências de animação em um
outro documento:
• Se você copiar uma seqüência de animação de uma camada e o novo documento já contiver
uma camada com o mesmo nome, o Dreamweaver aplicará as propriedades da animação à
camada existente no novo documento.
• Se você copiar uma seqüência de animação de uma camada e o novo documento não contiver
uma camada com o mesmo nome, o Dreamweaver colará a camada e o seu conteúdo do
documento original, juntamente com a seqüência de animação. Para aplicar a seqüência de
animação colada a uma outra camada no novo documento, escolha Alterar o objeto, no menu
contextual e, no menu pop-up, selecione o nome da segunda camada. Se desejar, exclua a
camada colada.
Aplicação de uma seqüência de animação a um objeto diferente

Para economizar tempo, é possível criar uma seqüência de animação e aplicá-la a cada uma das
camadas restantes do documento.
Para aplicar uma seqüência de animação existente a outros objetos:
1 No painel Linhas de tempo, selecione a seqüência de animação e copie-a.

2 Clique em qualquer quadro do painel Linhas de tempo e cole a seqüência no quadro.
3 Clique com o botão direito do mouse na seqüência de animação colada e escolha Alterar o
objeto, no menu contextual.
4 Na caixa de diálogo que aparecer, escolha outro objeto no menu pop-up e clique em OK.
5 Repita as etapas 2 a 4 para quaisquer outros objetos aos quais será associada a mesma seqüência
de animação.
Depois de criada a seqüência de animação, ainda é possível mudar de opinião sobre as camadas
que deverão ser animadas; basta seguir as etapas 3 e 4, acima, (não é necessário copiar ou colar).
Como renomear as linhas de tempo
Para renomear a linha de tempo exibida no painel Linhas de tempo:
1 Escolha Modificar > Linha de tempo > Renomear a linha de tempo.

2 Digite um novo nome na caixa de diálogo Renomear a linha de tempo.
Se o documento contiver a ação de comportamento Executar a linha de tempo (por exemplo: se
ele contiver um botão que deve ser clicado para iniciar a linha de tempo), edite o comportamento,
para que ele represente o novo nome da linha de tempo.
Sugestões de animação para as linhas de tempo

As seguintes sugestões podem melhorar o desempenho das animações e facilitar a sua criação:
• Mostre e oculte as camadas, em vez de alterar o arquivo de origem nas animações que
compreendem várias imagens. A alternância de arquivos de origem de uma imagem poderá
tornar a animação mais lenta porque deverá ser feito o download da nova imagem. Se for
efetuado o download de todas as imagens simultaneamente em camadas ocultas, antes da
execução da animação, não haverá pausas perceptíveis ou imagens ausentes.

• Estenda as barras de animação, para criar um movimento mais suave. Se a animação e as
imagens estiverem saltando entre as posições, arraste o quadro final da barra de animação
da camada para permitir o movimento ao longo de um número maior de quadros. O aumento
da barra de animação cria mais pontos de dados entre os pontos inicial e final do movimento e
também provoca o movimento mais lento do objeto. Tente aumentar o número de quadros por
segundo (qps) para melhorar a velocidade, porém leve em conta que a maioria dos navegadores
executados nos sistemas mais comuns não podem animar muito mais rápido do que 15 qps.
Teste a animação em diversos sistemas, com navegadores diferentes, para estabelecer as
melhores definições.
• Não anime mapas de bits grandes. A animação de imagens grandes resulta em animações
lentas. Em vez disso, crie imagens compostas e mova apenas pequenas partes da imagem. Por
exemplo: mostre o movimento de um carro animando apenas as suas rodas.
• Crie animações simples. Não crie animações que exijam mais recursos do que os navegadores
atuais podem oferecer. Os navegadores sempre executam cada quadro de uma animação de
linha de tempo, mesmo quando o desempenho do sistema ou da Internet diminuir.
Animação de camadas utilizando as ações de comportamentos

Anexe as seguintes ações de comportamentos a um link, botão ou outro objeto, a fim de controlar
as linhas de tempo e as camadas. Para criar efeitos interessantes, coloque os comportamentos que
contêm estas ações no canal de comportamentos. Por exemplo: faça com que uma linha de tempo
interrompa a execução de si própria. Para obter mais informações, veja “Como anexar um
comportamento a uma linha de tempo”, na página 379 e “Como utilizar comportamentos
Arrastar a camada permite ao visitante arrastar uma camada. Utilize esta ação para criar quebra-
cabeças, controles deslizantes e outros elementos móveis da interface do usuário. Veja “Arrastar a
camada”, na página 386.
Mostrar/ocultar as camadas mostra, oculta ou restaura a visibilidade padrão de uma ou mais
camadas. Esta ação é útil para mostrar informações à medida que o visitante interage com a
página. Veja “Mostrar/ocultar as camadas”, na página 398.
Executar a linha de tempo e Parar a linha de tempo permite ao visitante iniciar e parar a linha de
tempo clicando em um link ou botão. Estas ações também podem iniciar e parar uma linha de
tempo automaticamente quando o visitante indicar um link, uma imagem ou outro objeto com o
ponteiro. Veja “Executar a linha de tempo e Parar a linha de tempo”, na página 405.
Ir para o quadro da linha de tempo faz com que a linha de tempo salte para um determinado quadro.
A caixa de seleção Loop, no painel Linhas de tempo, adiciona a ação Ir para o quadro da linha de
tempo após o último quadro da animação, retornando-a ao primeiro quadro e iniciando a animação
novamente. Veja “Ir para o quadro da linha de tempo”, na página 404.
Definir o texto da camada substitui o conteúdo e a formatação de uma camada em uma página pelo
conteúdo especificado. O conteúdo pode incluir qualquer HTML válido. Veja “Defina o texto da
camada”, na página 395.
428 Capítulo 25
Parte VII
Parte VII
Como trabalhar com
várias páginas
Crie links entre suas páginas e reutilize elementos de projeto

e layouts de uma página a outra. Teste seu site em seguida.
• Capítulo 26, “Links e navegação”
• Capítulo 27, “Como gerenciar as propriedades do site,
bibliotecas e modelos”
• Capítulo 28, “Como testar um site”
CAPÍTULO 26
Links e navegação
Após especificar um site local para armazenar os documentos do site da Web e criar as páginas
HTML, talvez seja conveniente estabelecer conexões entre os seus e outros documentos ou tipos
de arquivos.
O Macromedia Dreamweaver MX oferece diversos modos de criar links de hipertexto para
documentos, imagens, arquivos de multimídia ou programas dos quais se pode efetuar o download.
Podem ser estabelecidos links a qualquer texto ou imagem em qualquer parte de um documento,
inclusive texto ou imagens localizados em um cabeçalho, lista, tabela, camada ou moldura.
Para exibir uma representação visual de como os arquivos são vinculados, utilize o mapa do site.
Nesse mapa, é possível adicionar novos documento ao site, criar e remover links ao documento e
verificar os links para arquivos dependentes (veja “Como utilizar o mapa do site”, na página 87).
Há várias maneiras diferentes de criar e gerenciar os links. Alguns designers da Web preferem criar
links a páginas ou arquivos inexistentes, à medida que trabalham, enquanto outros acham mais
conveniente criar primeiro todos os arquivos e páginas e, em seguida, adicionar os links. Outra
maneira de gerenciar os links é criar páginas alocadoras de espaço, que representam o arquivo final
e permitem adicionar links rapidamente e verificá-los, antes que as páginas tenham sido realmente
concluídas. Para obter mais informações sobre a verificação dos links, veja “Como verificar os
links em uma página ou site”, na página 504.
“Sobre as localizações e os caminhos dos documentos”, na página 432
“Criação de links”, na página 435
“Gerenciamento de links”, na página 442
“Criação de menus de salto”, na página 446
“Criação das barras de navegação”, na página 448
“Criação dos mapas de imagens”, na página 450
“Anexação de comportamentos aos links”, na página 452
431
Sobre as localizações e os caminhos dos documentos
Ao criar links, é essencial compreender o caminho de arquivo entre o documento do qual parte o
link e o que está sendo vinculado.
Cada página da Web tem um endereço único chamado Universal Resource Locator (URL) (para
obter mais informações sobre as URLs, veja a página do World Wide Web Consortium sobre
atribuição de nomes e endereços). Contudo, quando é criado um link local (entre dois
documentos no mesmo site), normalmente, a URL inteira do documento que está sendo
vinculado não é especificada; em vez disso, é indicado um caminho relativo ao documento atual
ou à pasta raiz do site.
Os três tipos de caminhos de link são os seguintes:
• Caminhos absolutos (por exemplo: http://www.macromedia.com/support/dreamweaver/
contents.html). Veja “Caminhos absolutos”, na página 432.
• Caminhos relativos a documento (por exemplo: dreamweaver/contents.html). Veja “Caminhos
relativos a documento”, na página 433.
• Caminhos relativos à raiz do site (por exemplo: /support/dreamweaver/contents.html). Veja
“Caminhos relativos à raiz do site”, na página 434.
Com o Dreamweaver, é possível selecionar facilmente o tipo de caminho de documento a ser
criado para os links. Veja “Vinculação de arquivos e documentos”, na página 436.
Observação: É melhor utilizar o tipo de link preferido ou mais confortável, relativo ao documento ou ao site. A
busca de links, ao contrário da digitação de caminhos, garante que o caminho inserido estará sempre correto.
Caminhos absolutos
Caminhos absolutos fornecem a URL completa do documento vinculado, inclusive o protocolo a
ser utilizado (normalmente http:// para as páginas da Web). Por exemplo: http://
www.macromedia.com/support/dreamweaver/contents.html é um caminho absoluto.
Deve ser utilizado um caminho absoluto para estabelecer um link a um documento em outro
servidor. Os links de caminho absoluto também podem ser utilizados para os links locais (a
documentos no mesmo site), mas essa abordagem não é recomendada; se o site for deslocado para
outro domínio, todos os seus links de caminho absoluto irão se partir. Além disso, a utilização de
caminhos relativos para os links locais possibilita maior flexibilidade quando for necessário mover
os arquivos no site.
Observação: Ao inserir imagens (mas não links): se for utilizado um caminho absoluto a uma imagem que resida em
um servidor remoto e que não esteja disponível no disco rígido local, não será possível exibi-la na janela do
documento. Em vez disso, o documento deve ser visualizado em um navegador. Se for possível, utilize os caminhos
relativos a documento ou à raiz do site para as imagens. Para obter mais informações, veja “Como inserir uma
imagem”, na página 320.
432 Capítulo 26
Caminhos relativos a documento
Caminhos relativos a documentos são os mais apropriados para os links locais na maioria dos sites
da Web. Eles são particularmente úteis quando o documento atual e o vinculado estiverem na
mesma pasta, e possivelmente permanecerão juntos. O caminho relativo a documento também é
utilizado para estabelecer um link a um documento em outra pasta, especificando o caminho
através da hierarquia de pastas, do documento atual ao vinculado.
Na especificação desse caminho, não consta a parte da URL absoluta, que é a mesma para ambos
os documentos. É fornecido apenas o segmento do caminho que é diferente.
• Para estabelecer um link a outro arquivo na mesma pasta que o documento atual, basta indicar
o nome do arquivo.
• Para vincular a um arquivo em uma subpasta da pasta do documento atual, forneça o nome da
subpasta, coloque uma barra inclinada para a direita (/) e, em seguida, o nome do arquivo.
• Para vincular a um arquivo em uma pasta-mãe daquela onde está o documento atual, preceda o
nome do arquivo por ../ (onde “..” significa “um nível acima na hierarquia de pastas”).
Por exemplo: suponha que o site tenha esta estrutura:
mnu_site (pasta raiz)
suporte
conteúdo.html
horas.html
recursos
dicas.html
produtos
catálogo.html
índice.html (home page)
Links e navegação 433

Para estabelecer um link de contents.html a outros arquivos:
• Para estabelecer um link de contents.html a hours.html (ambos os arquivos estão na mesma

pasta), o nome do arquivo é o caminho relativo: hours.html.
• Para vincular a tips.html (na subpasta chamada resources), utilize o caminho relativo resources/
tips.html.
Cada barra inclinada (/) representa mover um nível abaixo na hierarquia de pastas.
• Para vincular a index.html (na pasta-mãe, um nível acima de contents.html), utilize o caminho
relativo ../index.html.
Cada ../ representa mover um nível acima na hierarquia de pastas.
• Para vincular a catalog.html (em uma subpasta da pasta-mãe), utilize o caminho relativo ../
products/catalog.html.
A ../ move um nível acima em direção à pasta-mãe; products/ move um nível para baixo na
subpasta products.
Observação: Salve sempre um novo arquivo antes de criar um caminho relativo a documento, já que esse caminho
não será válido sem um ponto de partida definido. Se você criar um caminho relativo a documento antes de salvar o
arquivo, o Dreamweaver utilizará temporariamente um caminho absoluto iniciado por file://, até que o arquivo seja
salvo e, em seguida, o programa converterá o caminho file:// em um caminho relativo.
Quando um grupo de arquivos for movido em conjunto — por exemplo: quando uma pasta for
transferida inteira, de maneira que os arquivos dentro dela mantenham os mesmos caminhos
relativos entre si — os links relativos a documento não precisarão ser atualizados entre esses
arquivos. Contudo, quando um arquivo individual que contém links relativos a documento ou
que está vinculado por esse mesmo tipo de ligação for movido, torna-se absolutamente necessário
atualizar esses links. Se os arquivos forem movidos ou renomeados utilizando o painel Site, o
Dreamweaver atualizará automaticamente todos os links relevantes.
Caminhos relativos à raiz do site

Caminhos relativos à raiz do sitefornecem o caminho da pasta raiz do site a um documento. Pode
ser conveniente utilizar esses tipos de caminhos ao trabalhar em um site grande da Web, que use
vários servidores, ou um servidor que hospede diversos sites diferentes. Contudo, se você não
estiver familiarizado com esse tipo de caminho, pode ser melhor continuar usando os caminhos
relativos a documento.
Um caminho relativo à raiz do site inicia com uma barra inclinada para a direita, que representa a
pasta raiz do site. Por exemplo: /support/tips.html é um caminho relativo à raiz do site para um
arquivo (tips.html) na subpasta support, dentro da pasta raiz do site.
Um caminho relativo à raiz do site é, normalmente, o melhor modo de especificar links em um
site da Web, no qual os arquivos HTML precisam ser movidos com freqüência de uma pasta para
outra. Quando um documento que contém links relativos à raiz for movido, não é necessário
alterá-los; por exemplo: quando os arquivos HTML utilizam links relativos à raiz para os arquivos
dependentes (como as imagens), se um arquivo HTML for movido, os seus links dos arquivos
dependentes ainda serão válidos. Contudo, quando os links dos documentos forem relativos à raiz
e estes forem movidos ou renomeados, é absolutamente necessário atualizar esses links, mesmo
que os caminhos dos documentos relativos entre si não tenham sido alterados.
Por exemplo: se uma pasta for movida, todos os links relativos à raiz para os arquivos nessa pasta
devem ser atualizados. Se os arquivos forem movidos ou renomeados utilizando o painel Site, o
Dreamweaver atualizará automaticamente todos os links relevantes.
434 Capítulo 26
Para utilizar os caminhos relativos à raiz do site, defina primeiro um site local no Dreamweaver
escolhendo uma pasta raiz local que seja equivalente à raiz do documento em um servidor (veja
“Como configurar um site do Dreamweaver”, na página 66).
O Dreamweaver utiliza essa pasta para determinar os caminhos relativos à raiz do site para
os arquivos.
Observação: Os links relativos à raiz são interpretados pelos servidores, e não pelos navegadores, por isso, se for
aberta uma página que utiliza links relativos à raiz no seu navegador (sem usar Visualizar no navegador, no
Dreamweaver), os links não funcionarão. Quando o recurso Visualizar no navegador for utilizado para visualizar um
documento que contém links relativos à raiz, o Dreamweaver converterá temporariamente esses links (apenas no
arquivo visualizado) para usar os caminhos relativos a documentos. Contudo, é possível visualizar apenas uma
página de cada vez, que utilize os links relativos à raiz — se um link for seguido a partir da página visualizada, os links
relativos à raiz da próxima página não serão convertidos e o navegador não poderá segui-los. A exibição de páginas
em conjuntos de molduras que utilizam links relativos à raiz causa problemas semelhantes.
Para visualizar um conjunto de páginas que utilizam links relativos à raiz, siga um dos
• Coloque os arquivos em um servidor remoto e exiba-os nesse local.

• (Apenas no Windows) Escolha Editar > Preferências, selecione Visualizar no navegador, na lista
de categorias, à esquerda, em seguida, selecione Visualizar utilizando o servidor local.
Observação: Para usar essa opção, é necessário que um servidor da Web esteja em execução no seu
computador local.
Criação de links
A tag HTML para criação de um link de hipertexto é chamada de tag de âncora ou de tag a. O
Dreamweaver cria um tag de âncora para objetos, texto ou imagens vinculados. Podem ser criados
links a outros documentos e arquivos, e a locais específicos em um único documento utilizando a
tag a href.
Por exemplo: se for selecionado na janela do documento o texto Home Page e, em seguida, for
criado um link a um arquivo denominado home.htm, o código-fonte HTML para o link deve ter
a aparência abaixo:
<a href="home.htm">Home Page</a>
Se um link for criado para um local específico de um documento, é necessário criar primeiro uma
âncora com nome. Por exemplo: a name="MainMenu". Em seguida, crie um link dentro da página
que se refira a essa âncora com nome. Por exemplo: a href="#MainMenu".
Antes de criar os links, certifique-se de ter compreendido como funcionam os caminhos relativos
a documento, relativos à raiz do site e absolutos (veja “Sobre as localizações e os caminhos dos
documentos”, na página 432).
Podem ser criados diversos tipos de links em um documento.
• Um link a outro documento ou arquivo, como um arquivo de imagem, filme, PDF ou de som.
Veja “Vinculação de arquivos e documentos”, na página 436.
• Um link de âncora com nome, que salta para uma localização específica em um documento.
Veja “Estabelecimento de um link a um local específico de um documento”, na página 439.
• Um link de correio eletrônico, que cria uma nova mensagem com o endereço do destinatário já
preenchido. Veja “Criação de um hyperlink”, na página 440.
• Os links nulos e de script, que permitem anexar comportamentos a um objeto ou criar um link
que execute código JavaScript. Veja “Criação de links nulos e de script”, na página 441.

Com o Dreamweaver, há diversas maneiras de criar facilmente links locais (entre os documentos
de um mesmo site):
• Utilize a janela do mapa do site para exibir, criar, alterar ou excluir links.
• Na janela do documento, selecione um elemento do texto ou da página, em seguida, utilize
Modificar > Criar link, para selecionar um arquivo a ser vinculado.
• Utilize o inspetor de propriedades para estabelecer o link a um arquivo, utilizando o ícone da
pasta, para procurar e selecionar um arquivo através do ícone do indicador de arquivos, para
selecionar um arquivo ou digitar o seu caminho.
Observação: A digitação de URLs ou caminhos a um arquivo pode produzir links e caminhos incorretos que
não funcionam. Para garantir um caminho correto, utilize o ícone correspondente à pasta para procurar o link.
• Na janela do documento, selecione um elemento do texto ou da página, escolha Criar link, no

menu contextual, para selecionar um arquivo a ser vinculado.
Para criar um link externo (a um documento em outro site), digite um caminho absoluto (com
o protocolo adequado) no inspetor de propriedades. Ao criar links externos, verifique se foi
digitado o caminho completo (incluindo http://).
Vinculação de arquivos e documentos

Utilize o inspetor de propriedades e o ícone do indicador de arquivos para criar links de uma
imagem, objeto ou texto a outro documento ou arquivo. Para obter informações sobre a utilização
do mapa do site para criar links, veja “Como criar e modificar os links no mapa do site”, na
página 444.
Para vincular documentos utilizando o ícone de pasta do inspetor de propriedades ou a caixa de

texto do link:
1 Selecione o texto ou uma imagem na visualização do projeto, na janela do documento.

2 Abra o inspetor de propriedades (Janela > Propriedades) e siga um dos procedimentos abaixo:
• Clique no ícone de pasta, à direita do campo Link, para procurar e selecionar um arquivo.
O caminho para o documento vinculado aparecerá no campo URL. Utilize o menu pop-up
Relativo a, na caixa de diálogo Selecionar o arquivo HTML, para escolher se o caminho será
relativo a documento ou à raiz e, em seguida, clique em Selecionar.
Observação: Quando o tipo de caminho for alterado no campo Relativo a, o Dreamweaver definirá a seleção
como o tipo de caminho padrão para os links posteriores até que ela seja modificada.
• Digite o caminho e nome do arquivo do documento no campo Link.

Para criar um link a um documento no site, digite um caminho relativo a documento ou à raiz
do site. Para criar um link a um documento fora do site, digite um caminho absoluto que inclua
o protocolo (por exemplo: http://). Esse procedimento pode ser utilizado para digitar um link a
um arquivo que ainda não foi criado.
436 Capítulo 26
3 No menu pop-up Destino, selecione um local para abrir o documento.
Para que o documento vinculado apareça em um local diferente da janela ou moldura atual,
selecione uma opção no menu pop-up Destino, no inspetor de propriedades.
• _blank carrega o documento vinculado em uma janela nova e sem nome do navegador.
• _parent carrega o documento vinculado na moldura-mãe ou na janela da moldura que contém
o link. Se a moldura onde está o link não estiver aninhada, o documento vinculado será
carregado na janela inteira do navegador.
• _self carrega o documento vinculado na mesma moldura ou janela que o link. Esse destino é o
padrão, portanto geralmente não é necessário especificá-lo.
• _topcarrega o documento vinculado na janela inteira do navegador, removendo, por
conseguinte, todas as molduras.
Dica: Se todos os links da página forem definidos para o mesmo destino, é possível especificá-lo uma vez,
escolhendo Inserir > Tags do cabeçalho > Base e selecionando as informações do destino. Para obter
informações sobre a maneira de designar molduras, veja “Como controlar um conteúdo de moldura com links”,
na página 286.
Para vincular documentos usando o ícone do indicador de arquivos:

2 Arraste o ícone do indicador de arquivos, à direita do campo Link, no inspetor de
propriedades, e indique um outro documento aberto, uma âncora visível em um documento
aberto ou um documento no painel Site.
O campo Link será atualizado para mostrar o link.
Observação: Pode ser estabelecido um vínculo a um documento aberto apenas quando os seus documentos
não estiverem maximizados na janela do documento. Quando se indica um documento, ele é movido para o
primeiro plano da tela durante a seleção.
3 Solte o botão do mouse.
Como arrastar o ícone do indicador de arquivos do inspetor de propriedades até um arquivo no

painel Site.
Para criar um link a partir de uma seleção em um documento aberto:
1 Selecione o texto na janela do documento.

2 Mantenha a tecla Shift pressionada e arraste a partir da seleção.
O ícone do indicador de arquivos aparecerá à medida que o cursor for arrastado.

3 Indique um outro documento aberto, uma âncora visível de um documento aberto ou um
documento no painel Site.
Observação: Pode ser estabelecido um vínculo a um documento aberto apenas quando os seus documentos
não estiverem maximizados na janela do documento. Quando se indica um documento, ele é movido para o
primeiro plano da tela durante a seleção.
Pressione a tecla Shift e arraste o ícone do indicador de arquivos, do texto na janela do documento
até um arquivo no painel Site.
Para criar um link a documentos usando o mapa do site e o ícone do indicador de arquivos:
1 Expanda o painel Site e exiba as visualizações de arquivos do site e de mapa do site mantendo
pressionado o ícone de mapa do site e escolhendo Mapa e arquivos.
2 Selecione um arquivo HTML no mapa do site.
O ícone do indicador de arquivos aparecerá ao lado do arquivo.
3 Arraste o ícone do indicador de arquivos e indique outro arquivo no mapa do site ou um
arquivo local na visualização dos arquivos do site.
Um link de hipertexto com o nome do arquivo vinculado será colocado na parte inferior do
arquivo HTML selecionado. Esse método funciona bem quando um site está sendo construído
e se deseja criar links no site inteiro rapidamente.
438 Capítulo 26
Estabelecimento de um link a um local específico de um documento
O inspetor de propriedades pode ser utilizado para estabelecer um link a uma determinada seção
de um documento, criando primeiro as âncoras com nomes. Estas permitem definir marcadores
em um documento e são colocadas, com freqüência, em um tópico específico ou no alto do
documento. Podem ser criados links para essas âncoras com nome, que levam rapidamente o
visitante até a posição especificada.
A criação de um link a uma âncora com nome é um processo em duas etapas. Primeiro, crie uma
âncora com nome e, em seguida, crie um link a essa âncora.
Para criar uma âncora com nome:
1 Na visualização do projeto, na janela do documento, posicione o ponto de inserção no local

onde deseja inserir a âncora com nome.
• Escolha Inserir > Âncora com nome.
• Pressione as teclas Control, Alt e A.
• Na barra Inserir, selecione a guia Comuns e clique no botão Âncora com nome.
Será exibida a caixa de diálogo Âncora com nome.
3 No campo Âncora com nome, digite um nome para a âncora.

O marcador da âncora aparecerá no ponto de inserção.
Observação: Se o marcador da âncora não estiver visível, escolha Exibir > Auxílios Visuais > Elementos invisíveis.
Para estabelecer um link a uma âncora com nome:
1 Na visualização do projeto, na janela do documento, selecione um texto ou uma imagem da

qual será criado um link.
2 No campo Link, no inspetor de propriedades, digite um sinal de número (#) e o nome da
âncora. Por exemplo:
• Para estabelecer um link a uma âncora com o nome "alto" no documento atual, digite #alto.
• Para estabelecer um link a uma âncora com o nome “alto” em um documento diferente, na
mesma pasta, digite nomedoarquivo.html#alto.
Observação: Os nomes de âncoras reconhecem maiúsculas e minúsculas.

Para estabelecer um link a uma âncora utilizando o método de indicação de arquivos:
1 Abra o documento que contém a âncora com nome escolhida.

Observação: Se a âncora estiver invisível, escolha Exibir > Auxílios visuais >Elementos invisíveis, para tornar a
âncora visível.
2 Na visualização do projeto, na janela do documento, selecione um texto ou uma imagem da

qual será criado um link. Se este for outro documento aberto, alterne para ele.
• Clique no ícone do indicador de arquivos, à direita do campo Link, no inspetor de
propriedades, e arraste-o até a âncora que será vinculada: uma âncora no mesmo documento ou
em outro documento aberto.
• Pressione a tecla Shift e arraste o cursor na janela do documento, a partir do texto ou imagem
selecionada até a âncora que será vinculada: uma âncora no mesmo documento ou em outro
documento aberto.
Criação de um hyperlink
É possível adicionar texto de hyperlink para estabelecer um vínculo a outro arquivo.
Para adicionar um hyperlink utilizando o comando Hyperlink:
1 Coloque o ponto de inserção onde o hyperlink deve ser inserido no documento.

2 Siga um dos procedimentos abaixo para exibir a caixa de diálogo Inserir hyperlink:
• Escolha Inserir > Hyperlink.
• Na barra Inserir, selecione a guia Comuns e clique no botão Hyperlink.
Aparecerá a caixa de diálogo Hyperlink.

4 Clique em OK.
Criação de um link de correio eletrônico

Um link de correio eletrônico abrirá uma nova janela de mensagem (utilizando o programa de
correio eletrônico associado ao navegador do usuário) sempre que for clicado. Na janela de
mensagem eletrônica, o campo Para será atualizado automaticamente com o endereço
especificado no link de correio eletrônico.
440 Capítulo 26
Para criar um link de correio eletrônico utilizando o comando Inserir link de correio eletrônico:
1 Na visualização do projeto, na janela do documento, coloque o ponto de inserção onde deverá

aparecer o link de-correio eletrônico, ou selecione o texto ou a imagem a ser mostrada neste
lugar.
2 Siga um dos procedimentos abaixo para inserir o link:
• Escolha Inserir > Link de correio eletrônico.
• Na barra Inserir, selecione a guia Comuns e clique no botão Inserir link de correio eletrônico.
Será exibida a caixa de diálogo Inserir link de correio eletrônico.

4 Clique em OK.
Para criar um link de correio eletrônico utilizando o inspetor de propriedades:

2 No campo Link, no inspetor de propriedades, digite mailto: seguido de um
endereço-de correio eletrônico.
Não digite espaços entre os dois pontos e o endereço eletrônico. Por exemplo: digite
mailto:jdoe@macromedia2.com.
Criação de links nulos e de script

Os tipos mais comuns de links ocorrem entre documentos e âncoras com nome (descritos em
“Vinculação de arquivos e documentos”, na página 436 e “Estabelecimento de um link a um local
específico de um documento”, na página 439, respectivamente), mas há também outros tipos de
links.
Um link nulo é aquele não designado. Utilize esse tipo de link para anexar comportamentos a
objetos ou texto em uma página. Após a criação de um link nulo, a ele poderá ser anexado a um
comportamento para permutar uma imagem ou exibir uma camada, quando o cursor for movido
sobre o link. Para obter informações sobre a anexação de comportamentos a objetos, veja
“Aplicação de um comportamento”, na página 377.
Links de scripts executam o código JavaScript ou chamam uma função JavaScript, sendo úteis
para fornecer informações adicionais ao usuário sobre um item, sem sair da página atual da Web.
Os links de scripts também podem ser utilizados para cálculos, validações de formulários e outras
tarefas de processamento, quando um usuário clicar em um determinado item.

Para criar um link nulo:
1 Selecione o texto, uma imagem ou um objeto na visualização do projeto, na janela do

documento.
2 No inspetor de propriedades, digite javascript:; (a palavra javascript, seguida de dois pontos e
de um ponto-e-vírgula) na caixa de texto Link.
Para criar um link de script:
1 Selecione o texto, uma imagem ou um objeto na visualização do projeto, na janela do

documento.
2 No campo Link, no inspetor de propriedades, digite javascript: seguido de código JavaScript
ou de uma chamada a função.
Por exemplo: a digitação de javascript:alert('Este link conduz ao índice') no campo Link
produz um link que, quando clicado, exibe uma caixa de alerta JavaScript com a mensagem
Este link conduz ao índice.
Observação: Como o código JavaScript aparece entre aspas duplas no HTML (assim como o valor do atributo
href ), é necessário utilizar aspas simples no código do script ou preceder as aspas duplas por barras invertidas
(por exemplo: \"Este link conduz ao índice\").
Gerenciamento de links
O Dreamweaver pode atualizar os links de e para um documento, sempre que este for movido ou
renomeado em um site local. Esse recurso funciona melhor quando o site inteiro for armazenado
(ou uma seção inteira deste) no disco local. O Dreamweaver não altera os arquivos na pasta
remota até que os arquivos locais sejam colocados ou devolvidos ao servidor remoto.
Para ativar o gerenciamento de links no Dreamweaver:

2 Selecione Geral na lista de categorias, à esquerda.
Serão exibidas as opções de Preferências gerais.
442 Capítulo 26
3 Na seção Opções do documento, selecione Sempre ou Solicitar, no menu pop-up Atualizar os
links ao mover os arquivos.
Se for escolhida a opção Sempre, o Dreamweaver atualizará automaticamente todos os links
para e de um documento selecionado, sempre que este for movido ou renomeado. (Para obter
instruções específicas sobre o que fazer quando um arquivo for excluído, veja “Alteração de um
link no site inteiro”, na página 445).
Quando for escolhida a opção Solicitar, o Dreamweaver exibirá primeiramente uma caixa de
diálogo contendo uma lista de todos os arquivos afetados pela alteração. Clique em Atualizar,
para atualizar os links nesses arquivos, ou em Não atualizar, para deixá-los inalterados.
4 Clique em OK.
Para tornar mais rápido o processo de atualização, o Dreamweaver pode criar um arquivo de
cache, no qual ele armazenará informações sobre todos os links da pasta local. Esse arquivo de
cache será criado quando a opção Cache for selecionada na caixa de diálogo Definição do site, e
será atualizado imperceptivelmente durante a utilização do Dreamweaver para adicionar, alterar
ou excluir links a arquivos no site local.
Para criar um arquivo de cache do site:

3 Selecione Informações locais, na lista de categorias, à esquerda.
A caixa de diálogo Definição do site exibirá as opções de Informações locais.
4 Na categoria Informações locais, marque a caixa de seleção Ativar o cache.
Na primeira vez em que os links a arquivos forem alterados ou excluídos no site local, após ter
iniciado o Dreamweaver, este aplicativo lhe solicitará a carga do cache. Se você clicar em Sim, o
cache será carregado e o Dreamweaver atualizará todos os links ao arquivo alterado. Se escolher
Não, as alterações poderão ser observadas no cache, porém este não será carregado e o
Dreamweaver não atualizará os links.
É possível que o cache demore alguns minutos para ser carregado nos sites maiores; a maior parte
deste período é gasta na comparação entre os horários dos arquivos no site local e aqueles
registrados no cache, a fim de verificar se este está desatualizado. Se nenhum arquivo tiver sido
alterado fora do Dreamweaver, não haverá problemas em clicar em Parar, quando o botão for
exibido.
Para criar novamente o cache do site:
No painel Site, escolha>Recriar o cache do site.

Como criar e modificar os links no mapa do site
A estrutura do site pode ser modificada no mapa do site através da inclusão, alteração e remoção
dos links. O Dreamweaver atualiza automaticamente o mapa do site para exibir as alterações
efetuadas no site.
Para adicionar um link, siga um dos procedimentos abaixo:
• Arraste uma página do Windows Explorer e solte-a em uma página do mapa do site.
Observação: Certifique-se de que o painel Site está encaixado e, em seguida, clique na seta de expansão.
Mantenha pressionado o botão Mapa do site e, em seguida, selecione, Arquivos e mapa.
• No mapa do site, selecione uma página HTML e escolha Site > Link a um arquivo existente ou
escolha Link a um arquivo existente, no menu contextual.
• No mapa do site, selecione uma página HTML e escolha Site > Link a um novo arquivo ou
escolha Link a um novo arquivo, no menu contextual.
• Selecione uma página HTML no mapa do site; aparecerá o ícone do indicador de arquivos.
Arraste o ícone até o objeto a ser vinculado: um arquivo na visualização dos arquivos do site,
um documento do Dreamweaver aberto ou uma âncora com nome em um documento aberto
na área de trabalho.
Observação: Para obter mais informações, veja “Vinculação de arquivos e documentos”, na página 436.
Para alterar um link:
1 No mapa do site, selecione uma página da qual será alterado o link (para que o documento
vinculado a esta página indique outra) e siga um dos procedimentos abaixo:
• Escolha Site > Alterar o link.
Observação: Utilize o menu Site do painel Site.
• Clique com o botão direito do mouse e escolha Alterar o link, no menu contextual.
2 Vá até o arquivo que o link irá indicar ou digite uma URL.
3 Clique em OK.
Para remover um link, siga um dos procedimentos abaixo:
• Selecione a página no mapa do site e escolha Site > Remover o link.

Observação: Utilize o menu Site do painel Site.
• No mapa do site, selecione a página e clique com o botão direito do mouse e, em seguida,
escolha Remover o link, no menu contextual.
A remoção de um link não exclui o arquivo, mas remove o link da origem de HTML na página
que está indicando o link.
444 Capítulo 26
Para abrir a origem de um link:
No mapa do site, selecione um arquivo e siga um dos procedimentos abaixo:

• Escolha Site > Abrir a origem do link.
• Clique com o botão direito do mouse e, em seguida, escolha Abrir a origem do link, no
menu contextual.
O inspetor de propriedades e o arquivo de origem que contém o link serão abertos na janela do
documento, com o link realçado.
Alteração de um link no site inteiro

Além de o Dreamweaver atualizar os links de modo automático sempre que um arquivo for
movido ou renomeado, também é possível alterar manualmente todos os links (inclusive os de
correio eletrônico, FTP, nulos e de scripts) para que estes indiquem outras localizações.
Esta opção pode ser utilizada a qualquer momento (por exemplo: as palavras “os filmes deste mês”
podem ser vinculadas a /movies/julho.html no site inteiro e, em primeiro de agosto, esses links
devem ser alterados para indicar /movies/agosto.html), mas é particularmente útil quando for
necessário excluir um arquivo vinculado a outros arquivos.
Para alterar um link no site inteiro:
1 Selecione um arquivo na visualização local do painel Site.

Observação: Se a alteração for efetuada em um link de correio eletrônico, FTP ou script, não é necessário
selecionar um arquivo.
2 Escolha Site > Alterar o link no site inteiro.

Será exibida a caixa de diálogo Alterar o link no site inteiro.

4 Clique em OK.
O Dreamweaver atualizará os documentos que se vincularem ao arquivo selecionado, de
maneira que indiquem o novo arquivo, utilizando o formato de caminho existente no
documento (por exemplo: se o caminho antigo for relativo a documento, o novo caminho
também será do mesmo tipo). O tipo de link, relativo a documento ou à raiz, não é
importante. O Dreamweaver atualizará automaticamente o link.
Após a alteração de um link no site inteiro, o arquivo selecionado se tornará órfão (ou seja,
nenhum arquivo na unidade local o indicará). A exclusão do mesmo não causará problemas, pois
não romperá quaisquer links existentes no site local do Dreamweaver.
Observação: Como todas as alterações estão ocorrendo localmente, será necessário excluir manualmente o
arquivo órfão correspondente no site remoto e colocar ou devolver quaisquer arquivos nos quais tiverem ocorrido
alterações nos links para que os visitantes do seu site possam visualizá-las.

Criação de menus de salto
Um menu de salto é um menu pop-up em um documento, visível aos usuários do site, que lista as
opções que estabelecem links a documentos e arquivos. Podem ser criados links a documentos no seu
site da Web, a documentos em outros sites da Web, links de correio eletrônico, links a imagens ou a
qualquer tipo de arquivo que possa ser aberto em um navegador.
Um menu de salto contém três componentes básicos:
• Um aviso de seleção no menu, como uma descrição da categoria para os itens do menu, ou
instruções. Por exemplo: “Escolha uma opção”. (Opcional)
• Uma lista de itens de menu vinculados: um usuário escolhe uma opção e um documento ou
arquivo vinculado é aberto. (Necessário)
• Um botão Ir. (Opcional)
Inserção de um menu de salto
Para inserir um menu de salto no documento, utilize o objeto de formulário Menu de salto.
Para criar um menu de salto:
1 Abra um documento, em seguida coloque o ponto de inserção na janela do documento.

• Escolha Inserir > Objeto formulário > Menu de salto.
• Na barra Inserir, selecione a guia Formulário e clique no botão Menu de salto.
Será exibida a caixa de diálogo Menu de salto.

4 Clique em OK.
O menu de salto será exibido no documento.
446 Capítulo 26
Edição dos itens do menu de salto
Para alterar os itens do menu de salto, utilize o inspetor de propriedades ou o painel
Comportamentos. É possível alterar a ordem da lista ou o arquivo ao qual um item está vinculado,
ou adicionar, excluir ou renomear um item.
Para alterar a localização na qual um arquivo vinculado é aberto, adicionar ou alterar um aviso de
seleção no menu, deve ser utilizado o painel Comportamentos (veja “Menu de salto”, na
página 390).
Para editar um item do menu de salto com o inspetor de propriedades:
1 Escolha Janela > Propriedades para abrir o inspetor de propriedades, caso ainda esteja fechado.
2 Na visualização do projeto da janela do documento, clique no objeto menu de salto para
selecioná-lo.
Aparecerá o ícone de menu de lista, no inspetor de propriedades.
3 No inspetor de propriedades, clique no botão Valores da lista.
A caixa de diálogo Valores da lista é exibida.
4 Altere os itens do menu e, em seguida, clique em OK.
Resolução de problemas nos menus de salto

Quando os usuários escolhem um item de menu de salto, não é possível selecioná-lo novamente,
caso eles retornem a essa página ou se o campo Abrir a URL em especificar uma moldura. Há
duas maneiras de contornar esse problema:
• Utilize um aviso de seleção no menu, como uma categoria ou instrução do
usuário, por exemplo: “Escolha uma opção”. O aviso de seleção no menu é escolhido
novamente, de modo automático, após cada seleção no menu.
• Utilize um botão Ir, que permite ao usuário visitar de novo o link que estiver selecionado.
Observação: Selecione apenas uma destas opções para cada menu de salto, na caixa de diálogo Inserir menu de
salto, porque as opções são aplicadas a um menu de salto inteiro.

Criação das barras de navegação
Uma barra de navegação é composta por uma ou um conjunto de imagens, que exibe as alterações
com base nas ações de um usuário. As barras de navegação são, com freqüência, um modo fácil de se
mover entre as páginas e arquivos de um site.
Antes de utilizar o comando Inserir barra de navegação, crie um conjunto de imagens para exibir
os estados de cada elemento de navegação. Pode ser mais fácil imaginar um elemento da barra de
navegação como um botão porque, quando clicado, ele conduzirá o usuário a outra página.
Um elemento da barra de navegação pode apresentar quatro estados:
• Ativa: a imagem que aparece quando o usuário ainda não clicou ou interagiu com o elemento.
Por exemplo: o elemento nesse estado parece que não foi clicado.
• Sobreposta: a imagem que aparecerá quando o cursor for movido sobre uma imagem ativa. A
aparência do elemento é alterada (por exemplo: poderá ficar mais clara) para informar aos
usuários que eles não podem interagir com o elemento.
• Inativa: a imagem que aparece após o clique no elemento.

Por exemplo: quando um usuário clica em um elemento, uma nova página é carregada e a barra
de navegação ainda estará em exibição, mas o elemento clicado estará escurecido para mostrar
que foi selecionado.
• Imagem sobreposta enquanto inativa: a imagem que aparecerá quando o cursor for deslizado
sobre a imagem inativa, após o clique do usuário.
Por exemplo: o elemento aparece esmaecido ou cinza. Esse estado pode ser utilizado como uma
informação visual aos usuários de que esse elemento não pode ser clicado novamente enquanto
estiverem nesta parte do site.
Não é necessário incluir imagens de barra de navegação para os quatro estados; por exemplo:
talvez sejam escolhidos apenas os estados Ativa e Inativa.
Você pode criar uma barra de navegação, copiá-la em outra páginas no seu site, utilizá-la com
molduras e editar os comportamentos da página, para mostrar os diferentes estados à medida que
as páginas são acessadas.
448 Capítulo 26
Inserção de uma barra de navegação
Quando uma barra de navegação é inserida, os nomes dos elementos da barra recebem nomes e
são escolhidas imagens que os representem.
Para criar uma barra de navegação:

• Escolha Inserir > Imagens interativas > Barra de navegação.
• Na barra Inserir, selecione a guia Comuns e clique no botão Inserir barra de navegação.
Aparecerá a caixa de diálogo Inserir barra de navegação.

3 Clique em OK.
Modificação de uma barra de navegação

Quando uma barra de navegação for criada para um documento, as suas imagens poderão ser
adicionadas ou removidas, através do comando Modificar a barra de navegação. Esse comando
serve para alterar uma imagem ou um conjunto de imagens, mudar o arquivo que será aberto
quando um botão for clicado, selecione uma janela ou moldura diferente na qual abrir um
arquivo, e reordenar a posição das imagens.

Para modificar uma barra de navegação:
1 Escolha Modificar > Barra de navegação.

Aparecerá a caixa de diálogo Modificar a barra de navegação.
2 Na lista Elementos da barra de navegação, selecione o elemento a ser editado.

4 Clique em OK.
Criação dos mapas de imagens

Um mapa de imagens é uma imagem que foi dividida em regiões, ou pontos ativos; quando um
ponto ativo for clicado, ocorrerá uma ação (um novo arquivo será aberto, por exemplo). Utilize o
inspetor de propriedades da imagem para criar e editar graficamente os mapas de imagens do
cliente.
Os mapas de imagens do cliente armazenam as informações sobre o link de hipertexto no
documento HTML — e não em um arquivo de mapa separado, como fazem os mapas de imagens
do servidor. Quando um visitante do site clica em um ponto ativo na imagem, a URL a ele
associada é enviada diretamente ao servidor. Isso torna os mapas de imagens de clientes mais
rápidos que os do servidor, porque o servidor não precisará interpretar onde o usuário clicou. Os
mapas de imagens de clientes contam com suporte do Netscape Navigator 2.0 e mais avançado,
NCSA Mosaic 2.1 e 3.0, e de todas as versões do Microsoft Internet Explorer.
O Dreamweaver não altera as referências de mapas de imagens do servidor nos documentos
existentes; é possível utilizar mapas de imagens de clientes e do servidor em um mesmo
documento. Contudo, os navegadores que oferecem suporte a ambos os tipos de mapas de
imagens priorizam os do cliente. Para incluir um mapa de imagens do servidor em um
documento, é necessário gravar o código HTML adequado.
450 Capítulo 26
Inserção de mapas de imagens de clientes
Quando você inserir um mapa de imagens de cliente, estará criando uma área de ponto ativo e,
em seguida, defina o link que será aberto quando o usuário clicar nessa área.
Observação: Podem ser criadas várias áreas de pontos ativos, mas elas fazem parte do mesmo mapa de imagens.
Para criar um mapa de imagens do cliente:
1 Na janela do documento, selecione a imagem.

2 Clique na seta de expansão, no canto inferior direito do inspetor de propriedades, para examinar
todas as propriedades.
3 No campo Nome do mapa, digite um nome exclusivo para o mapa de imagens.
Observação: Caso sejam utilizados vários mapas de imagens no mesmo documento, verifique se cada mapa
tem um nome exclusivo.
4 Para definir as áreas do mapa de imagens, siga um dos procedimentos abaixo:

• Selecione a ferramenta de círculo e arraste o cursor sobre a imagem para criar um ponto
ativo circular.
• Selecione a ferramenta de retângulo e arraste o cursor sobre a imagem para criar um
ponto ativo retangular.
• Selecione a ferramenta de polígono e defina um ponto ativo com forma irregular, clicando uma
vez em cada canto. Clique na ferramenta de seta para fechar o formato.
Após a criação do ponto ativo, será exibido respectivo inspetor de propriedades.
5 Preencha o inspetor de propriedades do ponto ativo.
6 No final do mapeamento da imagem, clique em uma área em branco no documento para
alterar o inspetor de propriedades.
Modificação de um mapa de imagens

Os pontos ativos criados em um mapa de imagens podem ser facilmente editados. É possível
mover uma área de ponto ativo, redimensionar pontos ativos e movê-los para frente ou para trás
em uma camada.
É possível 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; os pontos ativos associados a uma imagem
também serão copiados no novo documento.
Para selecionar vários pontos ativos em um mapa de imagens:
1 Utilize a ferramenta de indicador de ponto ativo para selecionar um ponto ativo.

• Pressione a tecla Shift e clique nos outros pontos ativos a serem selecionados
• Pressione as teclas Control e A para selecionar todos os pontos ativos.

Para mover um ponto ativo:
1 Utilize a ferramenta de indicador de ponto ativo, para selecionar o ponto ativo a ser movido.
• Arraste o ponto ativo para uma nova área.
• Utilize a tecla Shift e as teclas de seta para mover o ponto ativo 10 pixels na direção selecionada.
• Utilize as teclas de seta para mover um ponto ativo um pixel na direção selecionada.
Para redimensionar um ponto ativo:
1 Utilize a ferramenta de indicador de ponto ativo para selecionar o ponto ativo a ser
redimensionado.
2 Arraste uma alça do seletor de pontos ativos para alterar o tamanho ou a forma do ponto ativo.
Anexação de comportamentos aos links

Um comportamento pode ser anexado a qualquer link em um documento (veja “Aplicação de um
comportamento”, na página 377). Considere a possibilidade de utilizar os seguintes
comportamentos ao inserir elementos vinculados em seus documentos:
Definir a mensagem de status mostra uma mensagem na barra de status, na parte inferior
esquerda da janela do navegador. Por exemplo: é possível utilizar esta ação para descrever o destino
de um link na barra de status, em vez de mostrar a URL a ele associada (veja “Defina a mensagem
de status”, na página 396).
Abrir a janela do navegador abre uma URL em uma nova janela. É possível especificar as
propriedades da nova janela, inclusive o seu tamanho, nome e atributos (se ela será
redimensionável, possuirá uma barra de menus, etc.). (Veja “Abra a janela do navegador”, na
página 391).
Menu de salto edita um menu de salto. É possível alterar a lista de menus, especificar um arquivo
vinculado diferente ou modificar o local do navegador no qual os documentos vinculados serão
abertos (veja “Menu de salto”, na página 390).
Definir a imagem da barra de navegaçãopermite alterar o comportamento da barra de navegação.
Utilize esse comportamento para personalizar a maneira como as imagens serão exibidas na barra
de navegação. Por exemplo: quando o cursor estiver sobre uma parte da barra de navegação, a
exibição das outras imagens na barra ou no documento será alterada (veja “Defina a imagem da
barra de navegação”, na página 394).
452 Capítulo 26
CAPÍTULO 27
Como gerenciar as propriedades do site,
bibliotecas e modelos
Ao desenvolver sites da Web, você pode acumular um número cada vez maior de propriedades.
Em alguns casos, é possível utilizar as mesmas propriedades para vários sites ou definir um
conjunto de propriedades preferidas que podem ser utilizadas para todos os seus sites. Com o
Macromedia Dreamweaver MX, é possível utilizar o painel Propriedades para ajudá-lo a gerenciar
as propriedades de seu site. O painel Propriedades permite localizar facilmente e visualizar
diversos tipos de propriedades armazenadas em seu site, como imagens, filmes, cores, scripts e
links. Você pode arrastar facilmente uma propriedade do painel Propriedades a seu documento
para inseri-lo em uma página.
O painel Propriedades também fornece acesso a dois tipos especiais de recursos: bibliotecas e
modelos. Os itens da biblioteca e modelos são propriedades vinculadas: edição de um item de
biblioteca ou modelo atualiza todos os documentos nos quais as propriedades foram aplicadas.
Utilize os itens de biblioteca e modelos quando quiser reutilizar conteúdo ou elementos de projeto
específicos em um site ou em vários sites. Os itens de biblioteca são reservados para use com
elementos de projeto individuais, como informações de direito autorais de um site ou logotipo.
Os modelos permitem controlar uma área de projeto maior. O autor de modelo desenvolve uma
página e define quais áreas da página podem aceitar edições de projeto ou conteúdo.
Os seguintes tópicos são discutidos neste capítulo:
• “Como utilizar o painel Propriedades”, na página 454
• “Como gerenciar o painel Propriedades”, na página 463
• “Como trabalhar com itens de biblioteca”, na página 466
• “Como criar, gerenciar e editar itens de biblioteca”, na página 467
• “Sobre os modelos do Dreamweaver”, na página 472
• “Como criar um modelo no Dreamweaver”, na página 477
• “Como definir regiões de modelos”, na página 472
• “Como criar um documento de um modelo”, na página 487
• “Como criar um modelo aninhado”, na página 493
• “Como editar e atualizar os modelos”, na página 495
• “Como exportar e importar o conteúdo XML do modelo”, na página 497
453
Como utilizar o painel Propriedades
As propriedades envolvem uma variedade de elementos que podem ser armazenados em um site,
como imagens ou arquivo de filme.
É possível obter propriedades de várias fontes. Por exemplo: as propriedades podem ser criadas em
um aplicativo como o Macromedia Fireworks ou Macromedia Flash, recebidas de um colega de
trabalho ou cliente, copiadas de um CD de clip-art ou copiar uma imagem de um site de imagens.
Para obter mais informações sobre o planejamento e obtenção de propriedades, consulte “Sobre o
planejamento e projeto de sites”, na página 61.
O painel Propriedades pode ser utilizado de duas maneiras: como uma lista facilmente acessível
das propriedades do site (a lista Site) ou como um modo de organizar as propriedades que são
utilizadas com mais freqüência (a lista Favoritos). O painel Propriedades coloca automaticamente
as propriedades do site na lista Site. É possível adicionar qualquer propriedade desejada à lista de
favoritos.
A maioria das operações do painel Propriedades funcionam do mesmo modo que as listas Site e
Favoritos. Contudo, há algumas tarefas que podem ser executadas apenas na lista Favoritos
(consulte “Configurar propriedades na lista de Favoritos”, na página 464).
Como abrir o painel Propriedades

Use o painel Propriedades para exibir as propriedades no site atual ou exibir propriedades salvas
em uma lista de favoritos.
É preciso definir um site local antes de visualizar as propriedades no painel Propriedades.
Para abrir o painel Propriedades:
Selecione Janela > Propriedades.

O painel Propriedades é exibido. A categoria Imagens é selecionada por padrão.
454 Capítulo 27
Como selecionar uma categoria de propriedades
O painel Propriedades ajuda a gerenciar e organizar as propriedades do site mais facilmente do
que no painel Site. As propriedades são categorizadas e exibidas em uma lista.
Para exibir as propriedades em uma determinada categoria, clique no ícone apropriado. O
Dreamweaver exibe as categorias de propriedades a seguir:
Imagens são arquivos de imagens nos formatos GIF, JPEG ou PNG. Para obter informações sobre
as imagens, consulte “Como inserir imagens”, na página 319.
Cores são as cores utilizadas em documentos e folhas de estilos no site, incluindo cores do texto,
cores de fundo e dos links.
URLs são os links externos nos documentos do site. Essa categoria inclui os seguintes tipos de links:
FTP, gopher, HTTP, HTTPS, JavaScript, correio eletrônico (mailto) e arquivo local (file://).
Filmes Flash são arquivos em qualquer versão do formato Macromedia Flash. O painel
Propriedades exibe apenas os arquivos SWF (arquivos Flash compactados), mas não exibe os
arquivos FLA (Flash). Veja “Sobre o conteúdo Flash”, na página 348.
Filmes Shockwave são arquivos em qualquer versão do formato Macromedia Shockwave. Veja
“Como inserir filmes Shockwave”, na página 353.
Filmes são arquivos de filme no formato QuickTime ou MPEG. Veja “Como inserir mídia”, na
página 345.
Scripts são arquivos JavaScript ou VBScript. Observe que os scripts nos arquivos HTML (ao invés
dos arquivos JavaScript ou VBScript independentes) não aparecerão no painel Propriedades. Para
obter informações sobre o trabalho com JavaScript no Dreamweaver, consulte “Como utilizar o
depurador JavaScript”, na página 221.
Modelos asseguram uma maneira fácil de reutilizar o mesmo layout de página em diversas páginas
e modificar o layout em todas as páginas anexadas a um modelo quando um modelo for
modificado. Veja “Sobre os modelos do Dreamweaver”, na página 472.
Itens de biblioteca sãoelementos utilizados em várias páginas. Quando um item de biblioteca for
modificado, todas as páginas que o contêm serão atualizadas. Veja “Como trabalhar com itens de
biblioteca”, na página 466
Observação: Apenas os arquivos que se enquadram nessas categorias serão mostrados no painel Propriedades.
Outros tipos de arquivos que são às vezes denominados propriedades não serão mostrados no painel.
Como gerenciar as propriedades do site, bibliotecas e modelos 455

Exibir propriedades no painel Propriedades
O painel Propriedades oferece duas maneiras de exibir as propriedades: a lista Site, que exibe todas
as propriedades do site, e a lista Favoritos, que exibe apenas as propriedades selecionadas.
As propriedades são divididas em categorias em ambas as listas: selecione a categoria de
propriedades a ser listada clicando em um dos botões de categoria no lado esquerdo do painel.
Tanto a lista Site quanto a lista Favoritos estão disponíveis para todas as categorias de
propriedades, exceto os modelos e itens de biblioteca.
A lista Site exibe todos as propriedades existentes como arquivos em seu site, bem como todas as
cores e URLs que são utilizados em qualquer documento do site.
A maioria dos procedimentos abaixo podem ser executados na lista Site ou Favoritos.
Para exibir a lista Site:
Clique em Site, no alto do painel Propriedades.

Observação: Nas categorias Modelos e Biblioteca, as opções Site e Favoritos não estão disponíveis.
Para exibir a lista Favoritos:
Clique em Favoritos, no alto do painel Propriedades.

A lista Favoritos estará vazia até que as propriedades sejam incluídas.
Para exibir as propriedades de uma determinada categoria:
Clique no ícone de categoria adequado e clique em Site ou Favoritos. Por exemplo: para exibir
todas as imagens no site, clique no ícone de Imagens e, em seguida, clique em Site.
Para visualizar uma propriedade:
Selecione a propriedade no painel Propriedades.

A área de visualização, no alto do painel, mostra a pré-visualização da propriedade. Por exemplo:
ao selecionar uma propriedade de filme, a área de visualização exibe um ícone. Para exibir um
filme, clique no botão Executar (triângulo verde), no canto superior direito da área de
visualização.
Para alterar o tamanho da área de visualização:
Arraste para cima ou para baixo a barra de divisão (entre a área de visualização e a lista de
propriedades).
456 Capítulo 27
Atualizar o painel Propriedades
O painel pode demorar alguns segundos até criar a lista Site, pois é necessário ler o cache do site
para criar a lista.
Algumas alterações não aparecerão imediatamente no painel Propriedades:
• Ao adicionar ou remover uma propriedade do site, as alterações não aparecerão no painel
Propriedades até que a lista Site seja atualizada, clicando no botão Atualizar a lista Site. Se uma
propriedade for adicionada ou removida fora do Dreamweaver (utilizando o Windows
Explorer, por exemplo) é necessário recriar o cache do site para atualizar o painel Propriedades.
• Ao remover a única instância de uma determinada cor ou URL no site ou quando um novo
arquivo salvo contiver uma cor ou uma URL ainda não utilizada anteriormente no site, as
alterações não aparecerão no painel Propriedades até que a lista Site seja atualizada.
Para atualizar manualmente a lista Site:
1 Clique em Site no painel Propriedades para exibir a lista Site

2 Clique no botão Atualizar a lista Site, na parte inferior do painel Propriedades.
O cache do site será criado ou atualizado conforme necessário e o painel Propriedades será
atualizado para exibir as propriedades do site.
Para recriar o cache do site manualmente e atualizar a lista Site:
Clique na tecla Control no painel Propriedades e selecione Atualizar a lista Site.
Como adicionar propriedade a uma página

A maior parte dos tipos de propriedades pode ser inserida em um documento arrastando-as para a
visualização do projeto ou visualização do código da janela do documento ou utilizando o botão
Inserir. É possível inserir cores e URLs ou aplicá-las no texto selecionado, na visualização do
projeto (as URLs também podem ser aplicadas a outros elementos, como as imagens, na
visualização do projeto). Os modelos são aplicados ao documento inteiro.
Para inserir uma propriedade em um documento:
1 Coloque o ponto de inserção na visualização do projeto onde a propriedade deverá aparecer.

2 Selecione Janela > Propriedades para abrir o painel Propriedades, caso ainda não esteja aberto.
3 Selecione a categoria de propriedade para o tipo de propriedade a ser inserido.
Selecione qualquer categoria, exceto Modelos. Um modelo pode ser aplicado apenas a um
documento inteiro e não pode ser inserido em um documento.
4 Selecione Site ou Favoritos e localize a propriedade desejada.
Não há listas Site ou Favoritos para os itens de biblioteca. Ignore essa etapa ao inserir um item de
biblioteca.

• Arraste a propriedade do painel para o documento. Arraste os scripts até a área de conteúdo do
cabeçalho, na janela do documento. Se esta área não estiver visível, selecione Exibir >
Conteúdo do cabeçalho.
• Selecione a propriedade no painel e clique em Inserir.
A propriedade é inserida no documento. Se a propriedade for uma cor, ela será aplicada a partir
do ponto de inserção, ou seja, a digitação subseqüente será exibida nesta cor.
Utilize o painel Propriedades para aplicar uma cor

As cores no painel Propriedades representa as cores que você aplicou a vários elementos do site,
como texto, borda da tabela, cor de fundo e assim por diante. É possível utilizar exemplos de cores
na categoria Cores para aplicar as opções de cores a objetos em uma página de forma consistente.
Para obter mais informações sobre como adicionar uma cor à categoria de cores, consulte “Como
criar uma nova cor ou URL para adicionar à lista Favoritos”, na página 465.
Para alterar a cor do texto selecionado em um documento:
1 Selecione o texto no documento.

2 Selecione a categoria Cores no painel Propriedades.
3 Selecione a cor desejada.
4 Clique em Aplicar.
Como utilizar o painel Propriedades para adicionar um link URL ao

documento
Você pode utilizar o painel Propriedades para inserir link URL em um documento ou aplicar link
URL ao texto selecionado.
Para adicionar um link à seleção atual em um documento:
1 Selecione o texto ou imagem em que deseja aplicar a URL.

2 Selecione a categoria URLs no painel Propriedades e localize a URL desejada.
• Arraste a URL do painel para a seleção na visualização do projeto.
• Selecione a URL e clique no botão Inserir.
Para adicionar um link a um documento:
1 Coloque o ponto de inserção no documento onde a URL deve ser inserida.

2 Selecione a categoria URLs no painel Propriedades e localize a URL desejada.
• Arraste a URL do painel para a seleção na visualização do projeto.
• Selecione a URL e clique no botão Inserir.
458 Capítulo 27
Como selecionar e editar as propriedades
O painel Propriedades permite selecionar várias propriedades simultaneamente. Este painel
também fornece um modo rápido de iniciar a edição das propriedades.
Para selecionar várias propriedades:
Selecione uma das propriedades clicando nesse item. Em seguida, escolha as outras propriedades
de uma das seguintes maneiras:
• Pressione a tecla Shift e clique para selecionar uma série consecutiva de propriedades.
• Pressione a tecla Control e clique para adicionar uma propriedade individual à seleção (seja ela
adjacente ou não à seleção existente). Pressione a tecla Control ou Command e clique em uma
propriedade escolhida para cancelar a sua seleção.
Para editar uma propriedade:

• Clique duas vezes na propriedade.
• Selecione a propriedade e, em seguida, clique em Editar.
No caso de alguns tipos de propriedades (imagens, por exemplo), a edição da propriedade será
iniciada em um aplicativo de edição externo. Quanto às cores e URLs, a edição da propriedade
permite alterar o valor desta apenas na lista Favoritos. As cores e URLs não podem ser editadas
na lista Site. No caso dos modelos e itens de biblioteca, a edição da propriedade permite alterá-
la no Dreamweaver.
Se um editor externo não for aberto para uma propriedade que deveria utilizá-lo, selecione
Editar > Preferências, selecione a categoria Tipos de arquivos/editores e certifique-se de que haja
um editor externo definido para o tipo de arquivo da propriedade. Veja “Como iniciar um editor
externo para arquivos de mídia”, na página 346.
2 Altere a propriedade conforme desejar.
3 Ao concluir a edição da propriedade, siga um dos procedimentos abaixo:
• Se a propriedade estiver na forma de um arquivo (qualquer uma diferente de cor ou URL),
salve-a (utilizando qualquer editor empregado para editá-la) e feche a propriedade.
• Se a propriedade for uma URL, clique em OK ao terminar a edição na caixa de diálogo Editar
a URL.
Se a propriedade for uma cor, o seletor de cores do Dreamweaver se fechará automaticamente
quando uma cor for escolhida. Para fechar o seletor de cores sem escolher uma cor, pressione a
tecla Esc.

Como utilizar a categoria Biblioteca do painel Propriedades
A categoria Biblioteca do painel Propriedades exibe todos os itens na biblioteca do site atual.
Para obter mais informações sobre como alterar ou atualizar um item de biblioteca, consulte “Como
editar um item de biblioteca”, na página 468.
Para criar um novo item de biblioteca vazio no painel Propriedades:
1 Certifique-se de que não haja qualquer elemento selecionado na janela do documento.

Se algum item for selecionado, a seleção será colocada no novo item de biblioteca.
2 Na parte inferior do painel Propriedades, clique no botão Novo item de biblioteca.
Um novo item sem título é adicionado à lista de itens do painel.
3 Enquanto o item estiver selecionado, digite um nome para ele.
Para adicionar um item de biblioteca a um documento:
1 Na janela do documento, coloque o ponto de inserção onde deseja inserir o item de biblioteca.
2 Selecione a categoria Biblioteca no painel Propriedades e localize o item de biblioteca desejado.
• Arraste o item de biblioteca do painel para a seleção na visualização do projeto.
• Selecione o item de biblioteca e clique no botão Inserir.
Para editar um item de biblioteca:
Selecione um item de biblioteca na lista e clique no botão Editar ou clique duas vezes no nome do
item na lista.
Para excluir um item de biblioteca:
1 Selecione o item de biblioteca no painel Propriedades.

2 Clique no botão Excluir ou pressione a tecla Del para confirmar a exclusão do item
de biblioteca.
O item de biblioteca será excluído do site.
Tópico relacionado
“Como utilizar o painel Propriedades”, na página 454
460 Capítulo 27
Como utilizar o painel Propriedades para inserir modelos
É possível utilizar a categoria Modelos do painel Propriedades para criar novos modelos e
gerenciar os existentes.
Para obter mais detalhes sobre a criação e a edição de modelos, consulte “Como criar um modelo no
Dreamweaver”, na página 477. Para obter mais detalhes sobre como utilizar o painel Propriedades
para gerenciar as propriedades, consulte “Como utilizar o painel Propriedades”, na página 454.
Para utilizar o painel Propriedades para criar um novo modelo em branco
1 Escolha Janela > Modelos.

O painel Propriedades aparecerá com a categoria Modelos selecionada.
2 Na parte inferior do painel Propriedades clique no botão Novo modelo do painel Propriedades.
Um novo modelo vazio e sem título será adicionado à lista de modelos no painel.
3 Com o modelo selecionado, digite um nome para ele.
4 Isto cria um novo modelo em branco no painel Propriedade e na pasta Modelos, mas não cria
um arquivo .dwt. Para começar a definir as regiões editáveis, clique no botão Editar ao fundo
do painel Propriedades.
Para obter mais informações sobre como definir regiões de modelos editáveis, consulte “Como
inserir uma região editável”, na página 479.
Para editar um arquivo de modelo:
1 Escolha Janela > Propriedades e clique no ícone Modelos para exibir os modelos.
O painel inferior do painel Propriedades contém uma lista de todos os modelos disponíveis
para o seu site. A área superior exibe uma visualização do modelo selecionado.
2 Na lista Nome, siga um dos procedimentos abaixo:
• Clique duas vezes no nome do modelo.
• Na parte inferior do painel Propriedades, clique no botão Editar o modelo.
3 Edite o modelo na janela do documento. Crie regiões editáveis no modelo como desejar
(consulte “Como definir regiões de modelos”, na página 472).
4 Salve o modelo editado selecionando Arquivo >Salvar.
Observação: Se você ainda não definiu nenhuma região editável, o Dreamweaver advertirá o usuário que
o modelo não contém nenhuma região editável. Você poderá salvar ou modificar o modelo mesmo se não
contiver regiões editáveis, mas não poderá modificar documentos baseado naquele modelo até que possua
uma região editável.
Para aplicar um modelo ao documento ativo:
1 Abra o documento no qual o modelo será aplicado

2 Selecione a categoria Modelo, no painel Propriedades, e localize o modelo a ser aplicado.
• Arraste o modelo do painel para a janela do documento.
• Selecione o modelo e clique no botão Aplicar.
Observação: Você deve atribuir o conteúdo existente no documento para uma região editável do modelo, ou o
Dreamweaver rejeitará o conteúdo.

Para renomear um modelo no painel Propriedades:
1 Clique no nome do modelo para selecioná-lo.

2 Clique no nome novamente para tornar o texto selecionável e digite um novo nome.
Observação: Este método funciona da mesma forma que renomear um arquivo no Windows Explorer. Do
mesmo modo que no Windows Explorer, certifique-se de fazer uma pequena pausa entre os cliques. Não clique
duas vezes no nome, pois isto abre o modelo para edição.
3 Clique em outra área do painel Propriedades ou pressione a tecla Enter para que a alteração
tenha efeito.
4 O Dreamweaver perguntará se você deseja atualizar os documentos que se basearem
neste modelo.
• Para atualizar todos os documentos no site que se basearem neste modelo, clique em Atualizar.
• Para evitar a atualização de todos os documentos baseados neste modelo, clique em Não
atualizar. Um documento que você escolheu não atualizar ainda se baseará no modelo original
(não desanexado). Para atualizar o documento posteriormente, abra o documento e selecione
Modificar > Modelos > Atualizar.
Para excluir um arquivo de modelo:
1 Selecione o modelo no painel Propriedades.

2 Clique no botão Excluir e confirme que deseja excluir o modelo.
Após excluir um arquivo de modelo, não será possível recuperá-lo. O arquivo de modelo será
excluído do site. Os documentos que se baseavam neste modelo não serão desanexados do
modelo. Eles conservarão a estrutura e as regiões editáveis que o arquivo de modelo possuía
antes de ser excluído.
Para transformar tal documento em um arquivo HTML normal sem regiões editáveis ou
bloqueadas, utilize Modificar> Modelos > Desanexar do modelo. Para obter mais informações,
veja “Como desanexar um documento de um modelo”, na página 494.
Como trabalhar com propriedades e sites

Talvez seja conveniente procurar um arquivo no painel Site correspondente a uma propriedade no
painel Propriedades. Esse procedimento pode ser útil, por exemplo: durante a transferência de
uma propriedade para ou de um site remoto.
O painel Propriedades mostra todas as propriedades (dos tipos reconhecidos) no site atual. O site
atual é aquele que contém o documento ativo. Para utilizar uma propriedade do site atual em
outro site, copie-a no outro site. É possível copiar uma propriedade individual, um conjunto de
propriedades ou uma pasta Favoritos inteira de uma só vez.
Observação: O painel Site pode exibir um site diferente daquele mostrado no painel Propriedades. Isso ocorre
porque o painel Propriedade está associado ao documento ativo. Para determinar qual site do painel Propriedades
está em exibição, observe a barra de título do painel.
462 Capítulo 27
Para localizar um arquivo de propriedade no painel Site:
Clique com o botão direito do mouse e clique no nome da propriedade ou no ícone

correspondente no painel Propriedades e selecione Localizar no site, no menu contextual.
O painel do site é exibido com o arquivo de propriedade selecionado.
Localize no site não está disponível para cores e URLs que não correspondam aos arquivos do site.
Observe que Localizar no site localiza o arquivo correspondente à propriedade e não um arquivo
que a utiliza.
Para copiar as propriedades da lista Site ou Favoritos em outro site:
1 Clique com o botão direito do mouse e clique no ícone ou no nome de uma ou mais propriedades
para copiá-la(s).
Na lista Favoritos, é possível copiar uma pasta Favoritos, bem como propriedades individuais
(para obter informações sobre as pastas Favoritos, consulte “Como agrupar as propriedades na
pasta Favoritos”, na página 466).
2 No menu contextual, escolha Copiar para o site e o nome do site de destino no submenu. O
submenu listará todos os sites que o usuário tiver definido.
As propriedades são copiadas no site especificado, nas localizações correspondentes àquelas no
site atual. O Dreamweaver cria novas pastas na hierarquia do site de destino, se necessário.
As propriedades também são adicionadas à lista Favoritos do site especificado.
Quando um documento for aberto no site de destino, o painel Propriedades alternará para este
site e exibirá a propriedade copiada.
Observação: Se a propriedade copiada for uma cor ou URL, ela aparecerá na lista Favoritos e não na lista Site
do outro site. Isso ocorre porque não há qualquer arquivo correspondente à cor ou à URL. Portanto, nenhum
arquivo poderá ser copiado no outro site.
Como gerenciar o painel Propriedades

Como padrão, as propriedades em uma determinada categoria são listadas por nomes em ordem
alfabética. O nome da propriedade pode ser um nome de arquivo (como no caso das imagens),
um número hexadecimal (por exemplo: cores) ou uma URL. As propriedades também podem ser
classificadas por meio dos vários critérios.
Para listar as propriedades em uma ordem diferente:
Clique em um dos cabeçalhos de colunas.

Por exemplo: para classificar a lista de imagens por tipo, de modo que todas as imagens GIF, JPEG
etc. sejam agrupadas, clique no cabeçalho de coluna Tipo.
Para alterar a largura de uma coluna:
1 Posicione o cursor sobre a linha que separa dois cabeçalhos de colunas.

2 Arraste esta linha para alterar a largura da coluna.

Configurar propriedades na lista de Favoritos
A maioria das operações do painel Propriedades são idênticas nas listas Site e Favoritos (consulte
“Como utilizar o painel Propriedades”, na página 454). Contudo, há várias tarefas que podem ser
executadas apenas na lista Favoritos.
Uma vez que a lista Site do painel Propriedades mostra todas as propriedades reconhecidas no site,
esta lista torna-se muito longa no caso de alguns sites grandes. Se as propriedades utilizadas com
freqüência forem adicionadas à lista Favoritos, as que tiverem relação entre si poderão ser
agrupadas e receber nomes que lembrem sua função, para que sejam localizadas facilmente no
painel Propriedades.
Observação: As propriedades favoritas não são armazenadas como arquivos separados no disco rígido. Na
verdade, são referências de propriedades existentes na lista Site. O Dreamweaver controla quais propriedades da
lista Site serão exibidas na lista Favoritos.
Como adicionar e remover as propriedades da lista Favoritos

Há várias maneiras de adicionar propriedades à lista Favoritos do site.
Para adicionar propriedades à lista Favoritos, siga um dos procedimentos abaixo:
• Selecione uma ou mais propriedades na lista Site e clique no botão Adicionar à pasta Favoritos.
• Selecione uma ou mais propriedades na lista Site e escolha Adicionar à pasta Favoritos no menu
contextual.
• Clique com o botão direito do mouse e clique em um elemento na visualização do projeto da
janela do documento, e selecione o comando no menu contextual para adicionar o elemento à
categoria Favoritos apropriada.
Por exemplo: pode ser selecionada uma imagem e escolhida a opção Adicionar à pasta de
imagens favoritas, no menu contextual. Observe que o menu contextual correspondente ao
texto conterá Adicionar à pasta de cores favoritas ou Adicionar à pasta de URLs favoritas,
dependendo de o texto incluir ou não um link anexado. Observe também que apenas os
elementos que se enquadrarem em uma das categorias no painel Propriedades poderão ser
adicionados à lista Favoritos.
• Selecione um ou mais arquivos no painel Site e escolha Adicionar à pasta Favoritos, no menu
contextual. Os arquivos que não se enquadrarem em uma categoria no painel Propriedades
serão ignorados.
Independentemente do método escolhido, as propriedades serão adicionadas à lista Favoritos e o
painel Propriedades exibirá esta lista.
Observação: Não há listas Favoritos para os modelos e itens de biblioteca.
Para remover propriedades da lista Favoritos:
1 Selecione uma ou mais propriedades (ou uma pasta Favoritos) na lista Favoritos.
2 Clique no botão Remover da pasta Favoritos na parte inferior do painel Propriedades.
As propriedades serão removidas da lista Favoritos, mas ainda aparecerão na lista Site. Se uma
pasta Favoritos for removida, esta pasta e todas as propriedades nela contidas serão excluídas da
lista Favoritos.
464 Capítulo 27
Como criar uma nova cor ou URL para adicionar à lista Favoritos
É possível utilizar o painel Propriedades para adicionar novas cores ou URLs à lista de favoritos.
Observe que novas cores ou URLs podem ser adicionadas à lista Site, que contém apenas as
propriedades que já estiverem em uso no site.
Para criar uma nova cor:
1 Clique no botão de categoria Cores.

2 Clique em Favoritos para exibir a lista Favoritos.
3 Clique no botão Nova cor.
4 Selecione uma cor utilizando o seletor de cores.
Para sair do seletor de cores sem escolher uma cor, pressione a tecla Esc ou clique na barra
cinza, no alto do seletor. Para obter mais informações sobre o uso do seletor de cores, consulte
“Como trabalhar com as cores”, na página 122.
5 Se desejar, dê um nome à cor.
Para criar uma nova URL:
1 Clique no botão de categoria URLs.

3 Clique no botão Nova URL.
4 Digite uma URL e um apelido na caixa de diálogo Adicionar URL e clique em OK.
Como criar um apelido para uma propriedade favorita

As propriedades na lista Favoritos podem ter apelidos. O apelido é exibido no lugar do nome do
arquivo ou do valor da propriedade. Por exemplo: se uma cor for chamada de #999900, deverá ser
utilizado um apelido mais descritivo, cor_de_fundo_da_página ou cor_de_texto_importante.
Apenas as propriedades da lista Favoritos podem ter apelidos. Na lista Site, as propriedades são
listadas pelos seus nomes de arquivos reais (ou seus valores, no caso das cores e URLs).
Para dar nomes às propriedades favoritas:
1 Clique na categoria que contém a propriedade escolhida.

• Clique com o botão direito do mouse e clique no nome da propriedade ou no ícone
correspondente no painel Propriedades e escolha Editar o apelido, no menu contextual.
• Clique uma vez no nome da propriedade, faça uma pausa e clique nele novamente. Não clique
duas vezes de uma só vez.
4 Digite um apelido para a propriedade, em seguida, pressione a tecla Enter.
O apelido aparecerá na coluna Apelido.

Como agrupar as propriedades na pasta Favoritos
Em uma categoria da lista Favoritos, é possível criar e denominar grupos de propriedades,
chamados de pastas Favoritos. Por exemplo: se houver um conjunto de imagens utilizadas em
várias páginas de catálogos em um site de comércio eletrônico, elas poderão ser agrupadas em uma
pasta chamada Imagens_de_catálogo.
Observação: A inserção de uma propriedade em uma pasta Favoritos não irá alterara localização do arquivo da
propriedade no disco rígido.
Para criar uma pasta Favoritos:
1 Clique em Favoritos (no alto do painel Propriedades) para exibir a lista Favoritos.
2 Clique no botão Nova pasta Favoritos.
3 Dê um nome à pasta.
4 Arraste as propriedades para a pasta.
Como trabalhar com itens de biblioteca

Uma biblioteca é um arquivo especial do Dreamweaver que contém uma coleção “propriedades”
individuais ou cópias de propriedades criadas por você para serem inseridas nas páginas da Web.
Se desejar apenas que as páginas tenham os mesmos cabeçalhos e rodapés, mas com layouts
variáveis, utilize os itens de biblioteca para armazenar os cabeçalhos e rodapés. Os itens de
biblioteca são elementos de página armazenados que podem ser reutilizados em diversas páginas.
É possível atualizar todas as páginas que utilizam um item de biblioteca, sempre que desejar
alterar o conteúdo do item.
É possível armazenar todos os tipos de elementos de página, como imagens, tabelas, sons e filmes
Flash em uma biblioteca.
Ao utilizar um item de biblioteca, o Dreamweaver não insere o item de biblioteca na página da
Web, em vez disso, insere um link ao item. Caso seja necessário alterar um item de biblioteca
posteriormente, por exemplo: modificar algum texto ou uma imagem, a atualização do item de
biblioteca automaticamente atualiza a instância da biblioteca em qualquer página na qual o item
biblioteca foi inserido.
“Como criar um item de biblioteca”, na página 467
“Como inserir um item de biblioteca em um documento”, na página 468
“Como editar um item de biblioteca”, na página 468
“Como tornar editáveis os itens de biblioteca de um documento”, na página 470
466 Capítulo 27
Como criar, gerenciar e editar itens de biblioteca
As bibliotecas constituem uma maneira de armazenar elementos de páginas como, por exemplo:
imagens, texto e outros objetos, que são reutilizados ou atualizados com freqüência no site da
Web. Estes elementos são denominados itens de biblioteca.
Quando um item de biblioteca é colocado em um documento, o Dreamweaver insere uma cópia
do código-fonte HTML correspondente ao item no documento e adiciona um comentário
HTML com uma referência ao item externo original. A referência ao item externo da biblioteca
possibilita a atualização simultânea do conteúdo de um site inteiro, por meio da alteração do item
de biblioteca e, em seguida, da utilização dos comandos de atualização no submenu Modificar >
Biblioteca.
O Dreamweaver armazena os itens de biblioteca na pasta Library localizada na pasta raiz local de
cada site. Todos os sites possuem a sua própria biblioteca. Para copiar um item de biblioteca de
um site para outro, utilize o comando Copiar para o site no painel Propriedades. Para obter mais
informações, veja “Como utilizar a categoria Biblioteca do painel Propriedades”, na página 460.
Observação: Se o item de biblioteca contiver links, os links poderão não funcionar no novo site. Além disso, as
imagens de um item de biblioteca não serão copiadas para o novo site.
A seguir um exemplo de utilização de um item de biblioteca: suponha que esteja criando um site
grande para uma empresa. O slogan da empresa deve aparecer em todas as páginas do site, mas o
departamento de marketing ainda não se decidiu quanto aos detalhes do conteúdo do slogan. Se
um item de biblioteca for criado para conter o slogan para ser utilizado em todas as páginas,
quando o departamento de marketing fornecer o slogan final, você poderá alterar o item de
biblioteca e automaticamente atualizar todas as páginas que o utilizarem.
Os itens de biblioteca também podem conter comportamentos, porém há requisitos especiais para a
edição dos comportamentos nesses itens. Consulte “Como editar um comportamento em um item
de biblioteca”, na página 471. Os itens de biblioteca não podem conter linhas de tempo ou folhas de
estilos, porque o código correspondente a esses elementos integra a seção head (cabeçalho).
Como criar um item de biblioteca

É possível criar um item de biblioteca a partir de qualquer elemento na seção body de um
documento, incluindo texto, tabelas, formulários, applets de Java, plugins, elementos ActiveX,
barras de navegação e imagens.
No caso de itens vinculados, como as imagens, a biblioteca armazenará somente uma referência ao
item. O arquivo original deverá permanecer no local especificado para que o item de biblioteca
funcione corretamente. Mesmo assim, poderá ser útil armazenar uma imagem em um item de
biblioteca, por exemplo: você pode armazenar uma tag img completa em um item de biblioteca,
que permitiria alterar facilmente o texto alt da imagem, ou o seu atributo src no site inteiro. No
entanto, não utilize esta técnica para alterar os atributos de width e height de uma imagem, a não
ser que utilize também um editor de imagens para alterar o tamanho real da imagem.

Para criar um item de biblioteca:
1 Selecione uma parte de um documento para salvá-la como um item de biblioteca.

• Selecione Janela > Biblioteca e arraste a seleção para a categoria Biblioteca, no painel
Propriedades.
• Na parte inferior do painel Propriedades (na categoria Biblioteca), clique no botão Novo item
de biblioteca.
• Escolha Modificar > Biblioteca > Adicionar objeto à biblioteca.
3 Digite um nome para o novo item de biblioteca.
Cada item de biblioteca será salvo como um arquivo separado (com extensão .lbi) na pasta
Library da pasta raiz local do site.
Como inserir um item de biblioteca em um documento

Quando um item de biblioteca for adicionado a uma página, o conteúdo atual será inserido no
documento juntamente com uma referência ao item de biblioteca.
Para inserir um item de biblioteca em um documento:
1 Coloque o ponto de inserção na janela do documento.

2 Escolha Janela > Biblioteca.
O painel Propriedades aparecerá exibindo a categoria Biblioteca.
3 Arraste um item de biblioteca do painel Propriedades até a janela do documento ou selecione
um item e clique no botão Inserir.
Para inserir o conteúdo de um item de biblioteca sem criar uma referência deste no
documento, pressione a tecla Control enquanto arrasta um item para fora da categoria
Biblioteca, no painel Propriedades. Se um item for inserido desta forma, você poderá editá-lo
no documento, mas o documento não será atualizado ao atualizar as páginas que utilizam o
item de biblioteca.
Como editar um item de biblioteca

Ao alterar um item de biblioteca, é possível atualizar todos os documentos que o utilizam. Se
preferir não atualizar, os documentos permanecerão associados ao item de biblioteca. É possível
atualizá-los mais tarde selecionando Modificar > Biblioteca > Atualizar as páginas.
Outros tipos de alterações aos itens de biblioteca incluem a sua renomeação, para romper a sua
conexão com os documentos e modelos, a sua exclusão da biblioteca do site e a recriação de um item
de biblioteca perdido.
Observação: O painel Estilos CSS e Linha de tempo estão disponíveis ao editar um item de biblioteca quando você
estiver editando um item de biblioteca, uma vez que estes itens podem contar apenas elementos body, sendo que o
código de Linha de tempo e Folha de estilo CSS é inserido na seção head de um documento. A caixa de diálogo
Propriedades de página também não estará disponível, porque um item de biblioteca não pode incluir uma tag body
ou seus atributos.
468 Capítulo 27
Para editar um item de biblioteca:
1 Escolha Janela > Biblioteca.

A categoria Biblioteca é exibida no painel Propriedades.
2 Selecione um item de biblioteca.
A visualização do item de biblioteca é exibida no alto do painel Propriedades. Não é possível
editar os elementos da visualização.
3 Na parte inferior do painel Propriedades, clique no botão Editar. De maneira alternativa, clique
duas vezes no item de biblioteca.
O Dreamweaver abrirá uma nova janela para a edição do item de biblioteca. Esta janela é
semelhante a uma janela de documento, mas a sua visualização do projeto possui um fundo
cinza, indicando a edição do item de biblioteca ao invés do documento.
4 Edite o item de biblioteca e, em seguida, salve as alterações.
5 Na caixa de diálogo que aparecer, escolha se deseja atualizar os documentos no site local que
utilizam o item de biblioteca editado:
• Selecione Atualizar, para atualizar todos os documentos no site local com o item de
biblioteca editado.
• Escolha Não atualizar para evitar que os documentos sejam alterados até que você utilize
Modificar > Biblioteca > Atualizar a página atual ou Atualizar as páginas.
Para atualizar o documento atual de forma a utilizar a versão mais recente de todos os itens de
biblioteca:
Selecione Modificar > Biblioteca > Atualizar a página atual.
Para atualizar o site inteiro ou todos os documentos que utilizarem um item de biblioteca
específico:
1 Selecione Modificar > Biblioteca > Atualizar as páginas.

A caixa de diálogo Atualizar as páginas é exibida.
2 No menu pop-up Procurar em, siga um dos procedimentos abaixo:
• Selecione Site inteiro e, em seguida, escolha o nome do site no menu pop-up adjacente. Este
procedimento atualizará todas as páginas no site selecionado, para que utilizem a versão atual
de todos os itens de biblioteca.
• Escolha Arquivos que utilizam e, em seguida, escolha um item de biblioteca no menu pop-
up adjacente. Este procedimento atualizará todas as páginas no site atual que utilizarem o item
de biblioteca selecionado.
3 Verifique se a opção Itens de biblioteca está selecionada na opção Atualizar. Para atualizar os
modelos simultaneamente, assegure-se de que a opção Modelos esteja selecionada. Para obter
mais informações, consulte “Como atualizar documentos baseados em um modelo”, na
página 495.
4 Clique em Iniciar.
O Dreamweaver atualizará os arquivos conforme indicado. Caso você tenha selecionado a
opção Mostrar o registro, o Dreamweaver fornecerá informações sobre os arquivos que tentar
atualizar, incluindo informações sobre o êxito em sua atualização.

Para renomear um item de biblioteca no painel Propriedades:
1 Clique no nome do item de biblioteca uma vez para selecioná-lo.

2 Após uma pequena pausa, clique novamente.
3 Quando o nome se tornar editável, digite um novo nome.
Observação: Este método funciona da mesma forma que a renomeação de um arquivo no Windows Explorer.
Do mesmo modo que no Windows Explorer ou Finder, certifique-se de fazer uma pequena pausa entre os
cliques. Não clique duas vezes no nome, pois o item de biblioteca será aberto para edição.
4 Clique em outro local ou pressione a tecla Enter.

5 O Dreamweaver perguntará se você deseja atualizar os documentos que utilizam este item.
• Para atualizar todos os documentos no site que utilizarem este item, clique em Atualizar.
• Para evitar a atualização de qualquer documento que utilizar este item, clique em Não atualizar.
Para excluir um item de uma biblioteca:
1 Selecione o item na categoria Biblioteca, no painel Propriedades.

2 Clique no botão Excluir e confirme que deseja excluir o item.
Tenha cuidado ao excluir um item de biblioteca, pois não será possível utilizar o comando
Refazer para recuperá-lo. No entanto, talvez você possa recriá-lo, como descrito no próximo
procedimento.
A exclusão de um item remove-o da biblioteca, mas não altera o conteúdo de qualquer um dos
documentos que utilizam o item.
Para recriar um item de biblioteca ausente ou excluído:
1 Selecione uma instância do item em um documento.

2 Clique no botão Recriar no inspetor de propriedades.
Como tornar editáveis os itens de biblioteca de um documento

Se tiver adicionado um item de biblioteca ao documento e desejar editá-lo especificamente em uma
página, será necessário romper o link entre o item do documento e a biblioteca. Quando a instância
do item de biblioteca tornar-se editável, essa instância não poderá ser atualizada quando o item de
biblioteca tiver sido modificado.
Para tornar editável um item de biblioteca:
1 Selecione um item de biblioteca no documento atual.

2 Clique em Desanexar do original, no inspetor de propriedades.
A ocorrência selecionada do item de biblioteca perderá a cor de realce (se esta estiver visível) e
não poderá mais ser atualizada quando o item de biblioteca original for alterado.
470 Capítulo 27
Como editar um comportamento em um item de biblioteca
Quando for criado um item de biblioteca que contém um elemento com um anexo de
comportamento, o Dreamweaver copiará o elemento e o seu manipulador de evento, o atributo
que especifica o evento que iniciará a ação (como onClick, onLoad ou onMouseOver) e que ação
deverá ser chamada quando ocorrer o evento, para o arquivo do item de biblioteca. O programa
não copiará para o item de biblioteca as funções JavaScript associadas. Em vez disso, quando você
inserir o item de biblioteca no documento, o Dreamweaver inserirá automaticamente as funções
JavaScript apropriadas na seção head do documento (caso ainda não estejam na seção).
Observação: Se codificar manualmente o JavaScript (ou seja, se for criado sem utilizar os comportamentos do
Dreamweaver), você poderá integrá-lo a um item de biblioteca o comportamento Chamar o JavaScript for utilizado
para executar o código. Se você não utilizar um comportamento do Dreamweaver para executar o código, este não
será mantido como parte do item de biblioteca.
É preciso inicialmente inserir o item de biblioteca em um documento para editar o

comportamento na biblioteca e, em seguida, tornar editável o item no documento. Depois de
fazer as alterações desejadas, é possível recriar o item de biblioteca substituindo o item na
biblioteca pelo item editado do documento.
Para obter mais informações sobre os comportamentos, consulte “Como utilizar comportamentos
Para editar um comportamento em um item de biblioteca:
1 Abra um documento que contenha o item de biblioteca.

Anote o nome do item, bem como as tags que ele contém. Estas informações serão necessárias
nas etapas 8 e 9.
2 Selecione o item de biblioteca e clique em Desanexar do original, no inspetor de propriedades.
3 Selecione o elemento que contém o comportamento anexado.
4 Escolha Janela > Comportamentos para abrir o painel Comportamentos. No painel
Comportamentos, clique duas vezes na ação que deseja alterar.
5 Na caixa de diálogo que aparecer, faça as alterações necessárias e clique em OK.
6 Escolha Janela > Biblioteca para abrir a categoria Biblioteca, no painel Propriedades.
7 Assegure-se de ter gravado o nome exato do item de biblioteca original. Em seguida, selecione
o item de biblioteca original e exclua-o clicando no botão Excluir no painel Propriedades.
8 Na janela do documento, selecione todos elementos que compõem o item de biblioteca.
Selecione exatamente os mesmos elementos contidos no item de biblioteca original.
9 No painel Propriedades, clique no botão Novo item de biblioteca e denomine o novo item
utilizando o mesmo nome do que foi excluído na etapa 7.
Certifique-se de utilizar exatamente a mesma grafia e caixa alta ou baixa.
10 Para atualizar o item de biblioteca nos outros documentos do site, escolha Modificar >
Biblioteca > Atualizar as páginas.
11 Na caixa de diálogo Atualizar as páginas, no menu pop-up Procurar em, selecione
Arquivos que utilizam.
12 Escolha o nome do item de biblioteca recém criado no menu pop-up adjacente.

13 Na opção Atualizar, certifique-se de que os itens de biblioteca tenham sido selecionados e, em
seguida, clique em Iniciar.
14 Quando tiver concluído as atualizações, clique em Fechar para sair da caixa de diálogo
Atualizar as páginas.
Sobre os modelos do Dreamweaver

Um modelo de Dreamweaver é um tipo especial de documento utilizado para criar um layout de
página “bloqueado”. O autor do modelo desenvolve o layout da página e cria regiões no modelo
que são editáveis em documentos baseados em um modelo. Em um modelo, o designer controla
quais elementos um usuário de modelo, como programadores, artistas gráficos ou outros
desenvolvedores, podem editar. Para obter informações sobre como criar um modelo, veja “Como
criar um modelo no Dreamweaver”, na página 477. Para obter mais informações sobre como criar
uma página com base no modelo, veja “Como criar um documento de um modelo”, na
página 487.
Uma das principais e mais poderosa característica dos modelos é sua capacidade de atualizar
diversas páginas simultaneamente. Um documento criado de um modelo permanece conectado
àquele modelo (a menos que o documento seja posteriormente desanexado). É possível modificar
um modelo e atualizar imediatamente o projeto em todos os documentos baseados nele.
Um modelo controla as regiões fixas e editáveis de um documento com base em um modelo. Há
vários tipos de regiões de modelo que podem ser incluídas em um documento. Para obter mais
informações sobre estes tipos de regiões de modelo, veja “Como definir regiões de modelos”, na
página 472.
É possível adicionar uma folha de estilo em cascata (CSS), linha de tempo ou comportamento a
um documento baseado em um modelo, pois o Dreamweaver insere uma região editável
automaticamente na seção head de um documento.
As operações relacionadas ao modelo (como adicionar regiões editáveis) são ativadas através dos
modos Visualização de código e Visualização do projeto. Algum opções de personalização de
modelos está disponível somente na visualização de código. Para obter mais informações sobre
como adicionar expressões de modelo, consulte Como gravar uma expressão de modelo.
Se desejar armazenar informações adicionais sobre um modelo como, por exemplo: o autor do
modelo, a data da última alteração ou o motivo de certas decisões de layout, é possível criar um
arquivo Design Notes para o modelo. Os documentos que se basearem no modelo não herdarão
as Design Notes. Para obter mais informações, veja “Como salvar as informações sobre o arquivo
contidas nas Design Notes”, na página 106.
Como definir regiões de modelos

Um modelo determina a estrutura básica de um documento e contém elementos como texto,
imagens, layout de página, estilos e regiões editáveis.
O Dreamweaver bloqueia automaticamente a maioria das regiões de um documento ao salvar o
documento como modelo. Como autor do modelo, você pode definir quais regiões de um
documento baseado em modelo serão editáveis inserindo regiões editáveis ou parâmetros editáveis
no modelo. Enquanto o arquivo de modelo estiver sendo criado, é possível alterar as regiões
editáveis e regiões bloqueadas. Em um documento baseado no modelo, no entanto, um usuário
do modelo pode efetuar alterações somente nas regiões editáveis. As regiões bloqueadas não
podem ser modificadas.
472 Capítulo 27
Há quatro tipos de regiões de modelos: regiões editáveis, regiões repetidas, regiões opcionais e
atributos de tags editáveis.
Região editáveil é uma região bloqueada em um documento baseado no modelo, ou seja, uma
seção editável pelo o usuário do modelo. O autor do modelo pode definir qualquer área de um
modelo como editável. Para que um modelo seja efetivo, deve conter uma região editável pelo
menos, caso contrário, as páginas baseadas no modelo não poderão ser editadas. Para obter
informações sobre uma região editável, veja “Como inserir uma região editável”, na página 479.
Região repetida é uma seção em um documento que pode ser repedita diversas vezes. Por
exemplo: é possível repetir uma linha da tabela. Ao repetir a linha de uma tabela, permite-se que
usuário do modelo crie uma lista de expansão, enquanto mantém o projeto sob controle do autor
do modelo. Em um documento baseado no modelo você poderá utilizar opções de controle de
regiões repetidas para adicionar ou excluir cópias da região repetida. Há dois tipos de regiões
repetidas você podem ser inseridas em um modelo: região repetida e tabela repetida. Para obter
mais informações sobre como inserir uma região repetida em um modelo, veja “Como criar uma
região repetitiva em um modelo”, na página 481. Para obter informações sobre como criar uma
tabela repetida, veja “Como inserir uma tabela repetitiva”, na página 481. Para obter mais
informações sobre como inserir uma região repetida ema página baseada em um modelo, veja
“Como adicionar, excluir modificar a ordem de uma entrada de região repetitiva”, na página 490.
Região opcional é uma seção de um modelo que um designer define como opcional, para
armazenar conteúdo como texto opcional ou uma imagem que podem ou não aparecer em um
documento baseado no modelo. Na página baseada no modelo, o editor do conteúdo controla se
o conteúdo deve ser exibido ou não, normalmente. Para obter mais informações sobre como
definir regiões repetidas em um modelo, veja “Como inserir uma região opcional”, na página 485.
Para obter mais informações sobre como definir regiões opcionais em uma página baseada em um
modelo, veja “Como modificar parâmetros de modelo da região opcioinal”, na página 490.
Um atributo de tag editável permite desbloquear um atributo de tag em um modelo, de modo que
o atributo possa ser editado em uma página baseada em modelo. Por exemplo: é possível
“bloquear” a imagem que aparece no documento, mas permitir que o autor da página defina o
alinhamento à esquerda, direita ou centralizado. Para obter mais informações sobre como definir
atributos de tags editáveis, consulte “Como definir atributos de tags editáveis em um modelo”, na
página 483. Para obter mais informações sobre como editar as tags em uma página baseada em
um modelo, veja “Como modificar propriedades do modelo”, na página 488.
Sobre parâmetros de modelos

É possível utilizar parâmetros de modelo para definir as regiões opcionais, atributos de tags
editáveis ou definir valores transferidos a um documento anexado.
Como criar um parâmetro de modelo e permitir definir valores para controle de conteúdo em
documentos baseados em um modelo. Para cada parâmetro é possível definir um nome, tipo de
dados e um valor padrão. Cada parâmetro deve ter um nome único e deve reconhecer maiúsculas
e minúsculas.
Os parâmetros de modelo são repassados ao documento como parâmetros de instância e podem
ser acessados pelo comando Modificar > Propriedades do modelo. Na maioria dos casos, o usuário
do modelo pode editar o valor padrão do parâmetro para personalizar o que aparece no
documento baseado no documento. Em outros casos, o autor do modelo pode utilizar uma
expressão de texto digitado para determinar o que deve aparecer no documento, baseado no valor
da expressão. Para obter mais informações, veja Como gravar uma expressão de modelo na ajuda
do Dreamweaver.

Para editar o código fora das tags HTML
Alguns scripts de servidor são inseridos bem no início ou no final do documento (antes da tag
<html> ou após a tag</html>). Esses scripts requerem tratamento especial em modelos e
documentos baseados em modelos. Normalmente, se você fizer alterações no código do script
antes da tag <html> ou após a tag </html> em um modelo, as alterações não serão copiadas aos
documentos baseados neste modelo. Isto pode causar erros de servidor se outros scripts de
servidor dependessem dos scripts que não foram copiados dentro do corpo principal do modelo.
Como resultado, o Dreamweaver o adverte se uma alteração for feitas nos scripts antes da tag
<html> ou após a tag </html> em um modelo.
Para evitar este problema, insira o código a seguir na seção head do modelo:

Quando este código estiver presente em um modelo, as alterações feitas nos scripts antes da tag <html>
ou após a tag </html> serão copiadas aos documentos baseados naquele modelo. No entanto, não será
permitido editar esses scripts em documentos baseados no modelo. Assim, você pode escolher entre
editar os scripts no modelo ou em documentos baseados no modelo, mas não em ambos.
Sobre links em modelos

Para criar um link em um arquivo de modelo, utilize o ícone de pasta ou o ícone do indicador de
arquivos no inspetor de propriedades. Não digite o nome do arquivo a ser vinculado. Se você
digitar o nome, o link não funcionará como esperado. Esta seção explica como o Dreamweaver
manipula os links em modelos.
Ao criar um arquivo de modelo de uma página existente, salve a página como modelo. O
Dreamweaver atualizará os links de modo que apontem para os mesmos arquivos que antes. Uma
vez que os modelos são salvos na pasta Templates, o caminho para o link relativo ao documento é
modificado ao salvar a página como modelo. No Dreamweaver, ao criar um novo documento
baseado naquele modelo e salvar o novo documento, todos os links relativos ao documento são
atualizados de modo que continuem apontando para os arquivos corretos.
Ao adicionar um link relativo a documento em um arquivo de modelo, mesmo o caminho for
digitado na caixa de texto do link no inspetor de propriedades, é possível digitar um caminho
incorreto por engano. O caminho correto é o caminho da pasta Templates ao documento
vinculado, e não o caminho da pasta do documento baseado no modelo ao documento vinculado.
Para obter mais informações sobre como vincular usando o ícone do indicador de arquivos,
consulte “Vinculação de arquivos e documentos”, na página 436.
Observação: Em alguns casos (como, por exemplo: caminhos de arquivos em manipuladores de eventos nos
modelos) não será possível utilizar o ícone de pasta ou o ícone indicador de arquivos. Nesses casos, digite o
caminho correto manualmente.
474 Capítulo 27
Como exibir modelos no modo de visualização do projeto
Em arquivos de modelos e documentos baseados em modelos, as regiões editáveis aparecerão na
visualização do projeto da janela do documento entre contornos retangulares, na cor de realce
apropriada. (Para obter mais informações sobre como definir as preferências de cores de destaque,
consulte Definir preferências de destaque de modelos na ajuda do Dreamweaver). Uma pequena
guia aparecerá no canto superior esquerdo de cada região editável exibindo o nome de cada região
editável. As regiões de modelos também incluem uma borda destacada. O conteúdo das regiões
editáveis e bloqueadas pode ser alterado.
Os arquivos de modelos podem ser identificados pelo título <<Template>> e extensão de arquivo
.dwt na janela Documento.
Como exibir modelos no modo de visualização do projeto

Na visualização de código é possível efetuar alterações tanto no código-fonte editável como no
código HTML bloqueado em um modelo. O conteúdo editável é assinalado no HTML com os
comentários . Qualquer texto entre
esses comentários é editável nos documentos baseados no modelo. O código-fonte HTML para a
região editável do exemplo anterior se parece como no exemplo a seguir:
<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>

<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>

</table>

Exibir documentos baseados no modelo na visualização do projeto
Nos documentos baseados em modelos, além dos contornos de regiões editáveis, a página inteira
estará circundada por um contorno de cor diferente com uma guia no canto superior direito
mostrando o nome do modelo no qual o documento se baseia. Este retângulo realçado está
presente para lembrar que o documento se baseia em um modelo e que nada poderá ser
modificado fora das regiões editáveis.
Observação: Se você tentar editar uma região bloqueada em um documento com base em modelo quando o
realce estiver desativado, o ponteiro do mouse se modificará, indicando que não é possível clicar na região
bloqueada.
Exibir documentos baseados no modelo na visualização do projeto

Na visualização de código, as regiões editáveis de um documento derivadas de um modelo são
exibidas com uma cor diferente do código nas regiões não editáveis. É possível alterar os códigos
das regiões editáveis ou parâmetros editáveis.
O conteúdo editável é marcado no HTML com os comentários do Dreamweaver
. Todos os textos entre esses
comentários são editáveis.
476 Capítulo 27
O código-fonte HTML de uma região editável, poderá ter a seguinte aparência:


</head>
<body bgcolor="#FFFFFF" leftmargin="0">

<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>

<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>

</table>
</body>

A configuração padrão para textos não editáveis é cinza. É possível definir uma cor diferente para
as regiões editáveis e não editáveis na caixa de diálogo Preferências. Selecione Editar > Preferências
e selecione Codificação por cores. Para obter mais informações, consulte Definição de preferências
para um documento de modelo na ajuda do Dreamweaver.
Observação: O Dreamweaver evita a digitação nas regiões bloqueadas na visualização de código da janela
Documento.
Como criar um modelo no Dreamweaver

É possível criar um modelo de documento existente (como um documento HTML, ColdFusion
da Macromedia ou Active Server Pages da Microsoft) ou criar um modelo de um novo
documento novo em branco.
A caixa de diálogo Novo documento (Arquivo > Novo) fornece várias opções para a criação de
novos modelos e de páginas baseadas em modelos. Para obter informações, consulte “Como
trabalhar com a caixa de diálogo Novo documento”, na página 116.
O Dreamweaver salva os modelos com a extensão de arquivo. dwt. Os modelos são salvos em uma
pasta especial chamada Templates na pasta raiz local do site. Se a pasta Templates ainda não existir
no site, o Dreamweaver criará a pasta quando você salvar um novo modelo.
Observação: Não remova os modelos da pasta Templates e não coloque arquivos que não sejam modelos nesta
pasta. Além disso, não mova a pasta Templates da pasta raiz local. Ao fazer isto, você estará provocando erros nos
caminhos dos modelos.
“Como salvar um documento como modelo”, na página 478
“Como inserir uma região editável”, na página 479
“Como criar um modelo aninhado”, na página 493

Como salvar um documento como modelo
É possível criar um modelo de documento novo ou de um documento existente.
Se uma região de modelo for inserida em um documento que não foi salvo como modelo, o
Dreamweaver advertirá que o documento será salvo automaticamente como modelo.
Para criar um modelo:
1 Abra o documento que deseja salvar como um modelo na janela de documento efetuando um
dos procedimentos a seguir:
• Para abrir um documento existente, selecione Arquivo >Abrir e selecione o documento.
• Para abrir um novo documento em branco, escolha Arquivo > Novo. Na caixa de diálogo que
se abre, selecione Páginas básicas ou Páginas dinâmicas. Na lista de documentos selecione o
tipo de página com a qual deseja trabalhar e clique em Criar.
2 Quando o documento for aberto, escolha Arquivo > Salvar como modelo.
Observação: A menos que a opção Não notificar novamente for selecionada, surgirá uma advertência
informando que o documento que está sendo salvo não possui nenhuma região editável. Clique em OK para
salvar o documento como modelo ou clique em Cancelar para sair dessa caixa de diálogo sem criar um modelo.
3 Na caixa de diálogo que aparece, selecione um site para salvar o modelo no menu pop-up Site e
digite um nome exclusivo para o modelo na caixa de texto Salvar como.
4 Clique em Salvar.
O arquivo de modelo será salvo na pasta Templates com a extensão .dwt.
Para criar um novo modelo no painel Propriedades:
1 Abra o painel Propriedades (Janela > Propriedades ou F11), caso não esteja aberto.
2 Selecione a categoria Modelos.
3 Clique no botão Novo modelo no painel Propriedades.
Um novo documento novo é adicionado à lista Nome. O nome do documento é realçado.
4 Digite um nome para o documento.
5 Clique no botão Editar no painel Propriedades.
O documento de modelo se abre na janela do documento.
Para obter mais informações sobre como definir regiões editáveis no modelo, consulte “Como
inserir uma região editável”, na página 479.
478 Capítulo 27
Como criar regiões editáveis
As regiões editáveis dos modelos controlam as áreas de uma página baseada em modelo que
podem ser editadas.
É possível marcar como editável uma tabela inteira ou uma célula de tabela, no entanto, não é
possível marcar várias células de tabela como uma única região editável. Se a tag <td> for
selecionada, a região editável incluirá a região ao redor da célula, caso contrário, a região editável
afetará o conteúdo dentro da célula.
As camadas e o seu conteúdo são elementos separados. Ao tornar uma camada editável, sua
posição, assim como o seu conteúdo, podem ser alterados e ao tornar o conteúdo da camada
editável permitirá alterar somente o conteúdo da camada e não a sua posição. Para selecionar o
conteúdo da camada, clique na camada e selecione Editar > Selecionar tudo. Para selecionar a
camada, certifique-se de que os elementos invisíveis estejam aparecendo e clique no ícone que
representa o local da camada. Para obter mais informações sobre as camadas, consulte “Animação
Como inserir uma região editável

Antes de inserir uma região editável, salve o documento atual como modelo. Se você inserir uma
região editável em um documento em vez de um arquivo de modelo, o Dreamweaver o advertirá
que o documento será salvo automaticamente como modelo.
Para definir uma região de modelo editável:
1 Na janela do documento, siga um dos procedimentos abaixo para selecionar a região:

• Selecione o texto ou conteúdo a ser definido como uma região editável.
• Coloque o ponto de inserção onde deseja inserir uma região editável.
2 Siga um dos procedimentos abaixo para inserir uma região editável:
• Selecione Inserir > Objetos de modelos > Nova região editável.
• Clique com o botão direito do mouse (no Windows) no texto selecionado e no escolha Nova
região editável no menu contextual.
• Na barra Inserir, selecione Modelos e clique no botão Região editável.
A caixa de diálogo Região editável é exibida.
3 Na caixa de texto Nome, digite um nome único para a região. Em um determinado modelo,
não é possível utilizar o mesmo nome para mais de uma região editável.
Observação: Não é permitido utilizar caracteres especiais no campo Nome.
4 Clique em OK.
A região editável é inserida em um contorno retangular realçado no modelo com a cor de
destaque definida em preferências. Para obter mais informações sobre como definir as
preferências de cores de destaque, consulte Definir preferências de destaque de modelos na
ajuda do Dreamweaver.
Uma guia no canto superior esquerdo da região mostra o nome da região. Se uma região
editável vazia for inserida no documento, o nome da região também aparecerá dentro da
região.

Como remover uma região editável
Se você marcar uma região do arquivo de modelo como editável e, subseqüentemente, desejar
bloqueá-la (torná-la não-editável) novamente, utilize o comando Remover a região editável.
Observação: Não é possível bloquear uma região em um arquivo com baseado em modelo. Só é possível bloquear
uma região em um arquivo de modelo.
Para remover uma região editável:
1 No documento ou no seletor de tags, selecione a região editável a ser modificada.

2 Escolha Modificar > Modelos > Remover o markup do modelo.
A região não será mais editável.
Como criar regiões repetitivas

Uma região repetitiva adiciona diversas cópias da região selecionada em um documento baseado
em modelo. Você pode utilizar regiões repetitivas para controlar o layout de regiões que deseja
repetir em uma página, como um item de catálogo e layout descritivo ou repetir uma linha de
dados, como uma lista de itens.
Há dois objetos de modelo de região repetitiva que podem ser utilizados:
Região repetitiva permite repetir uma região, mas não inclui uma região editável. No entanto, é
possível inserir uma região editável em uma região repetitiva para torná-la editável.
O exemplo a seguir mostra uma região repetitiva em um modelo. Em um documento baseado
neste modelo, o usuário pode repetir linha realçada da tabela para ampliá-la.
Tabela repetitiva permite definir uma tabela e definir onde as regiões editáveis se encontram em
cada célula na região repetitiva. Defina as opções para controlar quais linhas serão incluídas na
região repetitiva.
“Como criar uma região repetitiva em um modelo”, na página 481
“Como inserir uma tabela repetitiva”, na página 481
“Como adicionar, excluir modificar a ordem de uma entrada de região repetitiva”, na página 490
480 Capítulo 27
Como criar uma região repetitiva em um modelo
Uma região repetitiva é uma seção de um modelo que pode ser duplicada quantas vezes quanto
necessário em uma página baseada em modelo. As regiões repetitivas são normalmente utilizadas
com tabelas, no entanto, também é possível definir uma região repetitiva para outros elementos da
página.
Uma região repetitiva não é uma região editável. Para tornar editável o conteúdo de uma região
repetitiva (por exemplo: permitir a um usuário digitar texto em uma célula da tabela), é necessário
inserir uma região editável na região repetitiva. Para obter mais informações sobre a criação de
regiões repetitivas, veja “Como inserir uma região editável”, na página 479. Para obter mais
informações sobre a criação de tabelas repetitivas editáveis, veja “Como inserir uma tabela
repetitiva”, na página 481.
Como inserir uma região repetitiva em um modelo:
1 Na janela do documento, siga um dos procedimentos abaixo:

• Selecione o texto ou conteúdo a ser definido como uma região repetitiva.
• Coloque o ponto de inserção onde deseja inserir a região repetitiva no documento.
2 Siga um dos procedimentos abaixo para criar uma região repetitiva:
• Selecione Inserir > Objetos de modelos > Região repetitiva.
• Clique com o botão direito do mouse e clique no conteúdo selecionado e selecione Nova região
repetitiva no menu contextual.
• Na categoria Modelos da barra Inserir, clique no botão Região repetitiva.
A caixa de diálogo Região repetitiva é exibida.
3 Na caixa de texto Nome, digite um nome único para a região de modelo (não é possível utilizar
o mesmo nome para mais de uma região repetitive em um modelo).
Observação: Não utilize caracteres especiais ao nomear uma região.
4 Clique em OK.
A região repetitiva será selecionada no documento.
Observação: Uma região repetitiva não é editável no documento baseado no modelo, a menos que contenha
uma região editável. Para obter mais informações sobre como inserir uma região editável, veja “Como inserir
uma região editável”, na página 479.
Como inserir uma tabela repetitiva

Você pode utilizar tabelas repetitivas para definir uma região repetitiva que inclui regiões editáveis
em um formato de tabela. É possível definir atributos da tabela e definir quais células da tabela são
editáveis.
Para inserir uma tabela repetitiva:
1 Na janela do documento, coloque o ponto de inserção onde deseja inserir a tabela repetitiva no
documento.

• Selecione Inserir > Objetos de modelos > Nova tabela repetitiva.
• Clique com o botão direito do mouse e clique no conteúdo selecionado e escolha Nova tabela
repetitiva no menu contextual.
• Na categoria Modelos da barra Inserir, clique no botão Tabela repetitiva.
A caixa de diálogo Tabela repetitiva é exibida.
3 Digite novos valores conforme desejado.

4 Clique em OK.
Defina cores de fundo alternativas em uma região repetitiva

É possível personalizar uma tabela repetitiva alternando a cor de fundo das linhas da tabela.
Para definir a alternância das cores de fundo da linha da tabela:
1 Na janela Documento, selecione a linha da tabela da região repetida.

2 Clique no botão Mostrar a visualização de código e do projeto na barra de ferramentas do
documento pra acessar o código da linha da tabela selecionada.
3 Em Visualização de código, edite a tag <tr> para incluir o código a seguir:
<tr bgcolor="@@(_index & 1) ? '#FFFFFF' : '#CCCCCC'@@">
Substitua os valores hexadecimais #FFFFFF e #CCCCCC por outras cores de sua escolha.
Este é um exemplo de código de uma tabela que inclui cores de fundo de linhas de tabela
alternantes:
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>

<tr bgcolor="@@(_index & 1) ? '#FFFFFF' : '#CCCCCC' @@">
<td>  name 
</td>
<td>  phone 
</td>
<td>  email 
</td>
</tr>

</table>
482 Capítulo 27
Como definir atributos de tags editáveis
Use o comando Tornar editável o atributo para permitir a um usuário do modelo modificar os
atributos da tag especificas em um documento baseado em modelo. Por exemplo: é possível
definir uma cor de fundo no documento de modelo para permitir a um usuário do modelo definir
uma cor de fundo diferente para páginas que criarem. O usuário pode atualizar somente os
atributos definidos como editáveis.
Crie um atributo de tag editável para inserir um parâmetro de modelo no código. Um valor inicial
para o atributo é definido no documento do modelo. Quando um documento baseado no modelo
for criado, o parâmetro é atribuído automaticamente ao documento. O usuário domodelo poderá
então editar o parâmetro no documento.
Os tipos de dados a seguir são suportados: texto, booleanos (true/false), cores e URL. Para obter
mais informações sobre como definir atributos de tags editáveis, consulte “Como definir atributos
de tags editáveis em um modelo”, na página 483.
Para obter mais informações sobre como editar as tags em um documento baseado em modelo,
veja “Como modificar propriedades do modelo”, na página 488.
Como definir atributos de tags editáveis em um modelo

É possível definir diversos atributos editáveis para um elemento de página. Somente atributos de
tags definidos para o elemento devem aparecer inicialmente no menu pop-up Atributo. Por
exemplo: com uma tag de imagem, os atributos largura e altura podem ser os únicos exibidos no
menu.
Se o atributo que você desejar tornal editável não estiver listado no menu pop-up Atributo, clique
em Adicionar para acrescentar o atributo à lista.
Para definir um atributo de tag editável:
1 Na janela Documento, selecione um item para o qual deseja definir um atributo de tag
editável.
2 Selecione Modificar > Modelos > Tornar editável o atributo.
3 Na caixa de diálogo exibida, seguir um dos procedimentos abaixo:
• Se o atributo que você desejar tornar editável estiver listado no menu pop-up Atributo,
selecione-o.
• Se o atributo que você deseja tornar editável não estiver listado no menu Atribut, clique em
Adicionar e, na caixa de diálogo que se abre, digite o nome do atributo a ser adicionado e clique
em OK.
4 Certifique-se de que a opção Tornar editável o atributo esteja selecionada.
Na caixa de diálogo, preencha os campos para definir os valores desejados.
5 Na caixa de texto Identificador, digite um nome único para o atributo.
Dica: Para tornar mais fácil a identificação de um atributo de tag específico posteriormente, utilize um nome que
identifique o elemento e o atributo. Por exemplo: é possível identificar uma imagem cuja fonte é logoSrc editável
ou identificar a cor de fundo editável da tag body em bodyBgcolor.

6 No menu pop-up Tipo, selecione o tipo de valor permitido para este atributo definindo uma
das opções a seguir:
• Para permitir que um usuário digite um valor de texto para o atributo, escolha Texto. Por
exemplo: é possível utilizar texto com o atributo align. Nesse caso, o usuário pode definir o
valor do atributo à esquerda, direita ou centralizado.
• Para definir o link a um elemento, como o caminho de arquivo para uma imagem, escolha
URL. A opção URL permite que o Dreamweaver atualize o caminho utilizado em um link
automaticamente. Se o usuário mover a imagem para uma nova pasta, a caixa de diálogo
Atualizar os vinculas será exibida.
• Para tornar o seletor de cores disponível para seleção de um valor, escolha Cor.
• Para permitir que o usuário do modelo digite um valor numérico para atualizar um atributo
(por exemplo: modificar os valores de altura ou largura de uma imagem), escolha Número.
7 O campo Padrão exibe o valor do atributo de tag selecionado no modelo. Digite um novo valor
neste campo para definir um valor inicial diferente para o parâmetro no documento-baseado
no modelo.
8 Se desejar efetuar alterações em outro atributo de tag selecionado, repitas as etapas 3 a 7.
9 Clique em OK.
Como tornar um atributo de tag editável em não-editável

Uma tag marcada como editável pode ser marcada como não-editável. Faça a alteração no modelo
e atualize as páginas derivadas do modelo.
Para redefinir um atributo de tag editável:
1 No documento do modelo, clique no elemento associado ao atributo editável ou use o seletor

de tags para selecionar a tag.
2 Selecione Modificar > Modelos > Tornar editável o atributo.
3 No menu pop-up Atributos, selecione o atributo a ser modificado.
4 Desmarque a caixa de seleção Tornar editável o atributo.
5 Clique em OK.
Sobre as regiões opcionais

Uma região opcional é uma região em um modelo que pode definida para ser exibida ou ocultada
em um documento baseado em modelo. Use a região opcional quando você desejar definir as
condições de exibição de conteúdo em um documento. É possível definir valores específicos para
um parâmetro de modelo ou definir instruções condicionais em um modelo. Com base nas
condições definidas, os usuários do modelo podem editar os parâmetros em documentos criados
por eles e controlar se a região opcional deve ser exibidas ou não.
É possível criar parâmetros e expressões do modelo na caixa de diálogo Região opcional ou
diretamente em Visualização de código. Ao utilizar o objeto de modelo Região opcional, o
Dreamweaver insere comentários de modelo no código.
Um parâmetro de modelo está definido na seção head:

484 Capítulo 27
No local onde a região opcional é inserida, um código semelhante ao código abaixo é exibido:

<p><img src="/images/airfare_on.gif" width="85" height="22"> </p>

Os parâmetros de modelo criados para regiões opcionais podem ser acessados e editados no
documento baseado no modelo ou por meio da caixa de diálogo Propriedades do modelo
(Modificar > Propriedades do modelo).
Há dois objetos de região opcionais: um permite que o autor do modelo controle as regiões que
devem ser mostradas ou ocultadas sem permitir a edição do conteúdo pelo usuário, enquanto que
a outra permite aos usuários do modelo editar o conteúdo e definir se a região deve ser exibida ou
ocultada.
“Como inserir uma região opcional”, na página 485
“Como modificar propriedades do modelo”, na página 488
Como inserir uma região opcional

Use a região opcional para controlar o conteúdo que pode não ser exibido em um documento
baseado em modelo. Uma região opcional é controlada por uma instrução condicional. A guia de
modelo de uma região opcional é precedida pela palavra if. Com base na condição definida no
modelo, os usuários do modelo pode definir se a região é visível nas páginas que criarem.
Um região editável opcional permite a um usuário do modelo editar o conteúdo em uma região
opcional. Por exemplo: se a região opcional incluir uma imagem ou texto, o usuário do modelo
pode definir se o conteúdo é exibido, bem como editar o conteúdo, se desejado. As regiões
editáveis são controladas por uma instrução condicional. É possível criar parâmetros e expressões
de modelo na caixa de diálogo Região opcional ou digitando os parâmetros e instruções
condicionais na visualização de código.
Como inserir uma região opcional:
1 Na janela do documento, selecione o elemento que deseja definir como região opcional.
• Na barra Inserir, selecione a categoria Modelos e escolha o botão Região opcional.
• Selecione Inserir > Objetos de modelos > Região opcional.
• Clique com o botão direito do mouse no conteúdo selecionado e, no menu contextual,
selecione Nova região opcional.
3 Defina as opções para a região opcional.
Para obter mais informações sobre regiões opcionais, clique no botão Ajuda da caixa de
diálogo.
4 Clique em OK.

Para inserir uma região opcional editável:
1 Na janela do documento, posicione o ponteiro onde deseja inserir a região opcional.

Dica: Não é possível realçar uma seleção para criar uma região editável opcional. Insira a região e, em seguida,
insira o conteúdo na região.
2 Siga um dos procedimentos abaixo para abrir a caixa de diálogo Região opcional:
• Na barra Inserir, selecione a categoria Modelos e escolha o botão Região opcional editável.
• Selecione Inserir > Objetos de modelos > Região opcional editável.
• Clique com o botão direito do mouse no conteúdo selecionado e, no menu contextual,
selecione Região opcional editável.
A caixa de diálogo Região opcional é exibida.
3 Defina as opções para a região opcional.
Para obter mais informações sobre regiões opcionais, clique no botão Ajuda da caixa de
diálogo.
4 Clique em OK.
Modificar uma região opcional

É possível editar definições de região opcional após inserir a região em um modelo. Por exemplo:
você pode definir se o padrão do conteúdo deve ser exibido ou não, vincular um parâmetro a uma
região opcional existente ou modificar uma expressão de modelo.
Para reabrir a caixa de diálogo Região opcional:
1 Abra o inspetor de propriedades, se ainda não estiver aberto.

2 Na janela do documento, siga um dos procedimentos abaixo:
• Em Visualização do projeto, clique na guia modelo da região editável a ser modificada.
• Em Visualização do projeto, clique no conteúdo da região do modelo e, no seletor de tags,
clique na tag do modelo, <mmtemplate:if>.
• Em Visualização de código, clique na guia comentário da região do modelo a ser modificada.
3 No inspetor de propriedades, clique em Editar.
A caixa de diálogo Região opcional é exibida.
4 Faça as alterações desejadas e clique em OK.
486 Capítulo 27
Como criar um documento de um modelo
Uma vez definido o design do modelo, é possível aplicar o modelo a um documento em branco
ou documento que já contêm conteúdo.
Para criar um novo documento baseado em um modelo, use o painel Propriedades ou a caixa de
diálogo Novo documento. O painel Propriedades relaciona os modelos contidos no site
Dreamweaver atual. Clique com o botão direito do mouse na categoria Modelos do painel
Propriedades para criar um novo modelo e criar novos documentos de um modelo.
Na caixa de diálogo Novo documento, é possível selecionar um modelo de qualquer site
Dreamweaver definido para criar um novo documento com base naquele modelo. Ao criar um
novo documento de um modelo, você pode escolher se o documento deve permanecer anexado ao
modelo. Por padrão, ao modificar um modelo, todos os documentos anexados são atualizados
para refletir as alterações feitas no modelo. Se a opção Atualizar a página quando o modelo for
alterado for desmarcada ao criar um documento novo, o documento novo será criado como papel
de carta: um arquivo HTML independente, sem regiões de modelos. As atualizações feitas no
modelo não modificam o documento.
Para criar um documento baseado em modelo na caixa de diálogo Novo documento:
1 Selecione Arquivo > Novo para abrir a caixa de diálogo Novo documento.
2 Na caixa de diálogo Novo documento, selecione a categoria Modelos.
3 Na lista Modelos para, selecione o site que contém o modelo que você deseja utilizar.
A lista de modelos de sites é atualizada para exibir os modelos no site selecionado.
4 Na lista, selecione o modelo a ser utilizado.
5 Clique em Criar para criar uma nova página do modelo.
O documento é aberto na janela Documento.
Para criar um novo documento de um modelo no painel Propriedades:
1 Abra o painel Propriedades (F11), se ainda não estiver aberto.

2 No painel Propriedades, clique no ícone Modelos para exibir os modelos do site.
Dica: Se você acabou de criar o modelo que deseja aplicar, talvez seja preciso clicar no botão Atualizar para
visualizá-lo.
3 Clique no modelo a ser aplicado e selecione Novo a partir de modelo.

O documento é aberto na janela Documento.

Como editar conteúdo uma página baseada em modelo
É possível identificar facilmente e selecionar facilmente regiões de modelo no documento de
modelo e em documentos baseados em modelos. As regiões editáveis do modelo são listas na
parter inferior do submenu Modificar > Modelos.
As regiões editáveis dentro de uma região repetida não aparecem no menu. É necessário localizar
estas regiões procurando pelas bordas com guia na janela Documento.
Para obter mais informações sobre como localizar e modificar tags editáveis em um modelo
baseado em modelo, veja “Como modificar propriedades do modelo”, na página 488.
Para localizar uma região editável e selecioná-la no documento:
Escolha Modificar > Modelos e selecione o nome da região na lista, na parte inferior do submenu.
A região editável é selecionada no documento.
Como modificar propriedades do modelo

Após criar parâmetros em um modelo, os documentos baseados no modelo recebem os
parâmetros e suas definições de valores iniciais automaticamente. O usuário do modelo pode
atualizar atributos de tags editáveis e outros parâmetros do modelo (como configurações de região
opcional) na caixa de diálogo Propriedades do modelo.
Para obter mais informações sobre como criar uma tag editável em um modelo, veja “Como
definir atributos de tags editáveis em um modelo”, na página 483. Para obter mais informações
sobre a criação de regiões opcionais, veja “Como inserir uma região opcional”, na página 485.
Para modificar um atributo de tag editável:
1 Abra o documento baseado em modelo e escolha Modificar > Propriedades do modelo.

A caixa de diálogo Propriedades do modelo se abre. O exemplo a seguir mostra duas
propriedades de modelo. Uma é a região opcional e a outro um atributo de tag editável para a
cor de fundo do modelo.
488 Capítulo 27
2 Na lista Identificador, selecione a propriedade.
A área de fundo da caixa de diálogo é atualizada para exibir o identificador da propriedade
selecionada e seu valor atribuído.
3 No campo à direita do identificador da propriedade, edite o valor para modificar a propriedade

no documento.
Observação: O nome do campo e os valores atualizáveis são definidos no modelo. Os atributos que não
aparecem na lista Nome não são atualizáveis no documento.
4 Se você estiver definindo um atributo de tag editável em um modelo aninhado, siga um dos
procedimentos abaixo para definir se o parâmetro deve ser repassado aos documentos baseado
no modelo aninhado:
• Marque a caixa de seleção Permitir que os modelos aninhados controlem isso para transferir a
propriedade editável aos documentos baseados no modelo aninhado. O parâmetro aparecerá
nas caixa de diálogo Propriedades do modelo para os documentos baseados naquele modelo
aninhado.
• Para evitar que o parâmetro seja repassado, não selecione esta opção.

Como modificar parâmetros de modelo da região opcioinal
1 Abra o documento baseado em modelo e escolha Modificar > Propriedades do modelo.
A caixa de diálogo Propriedades do modelo se abre.
2 Na lista Identificador, selecione uma propriedade.
A caixa de diálogo é atualizada para exibir o identificador da propriedade selecionada e seu
valor atribuído.
3 Marque a caixa de seleção Exibir para exibir a região opcional no documento ou desmarque a
caixa de seleção para ocultá-la.
Observação: O nome do campo e os valores padrão são definidos no modelo.
4 Marque a caixa de seleção Permitir que os modelos aninhados controlem isso para repassar a
propriedade editável aos documentos baseados no modelo aninhado.
Como adicionar, excluir modificar a ordem de uma entrada de região

repetitiva
Use a região repetitiva para controlar, excluir ou modificar a ordem das entradas. Quando uma
entrada de região repetitiva é adicionada, uma cópia de toda a região repetitiva é adicionada. Para
atualizar o conteúdo das regiões repetitivas, o modelo original deve incluir uma região editável na
região repetitiva.
As opções para editar as regiões repetitivas também estão disponíveis no menu Modificar >
Modelos e no menu Editar > Entradas repetidas.
490 Capítulo 27
Para adicionar, excluir ou modificar a ordem de uma região repetitiva:
Coloque o ponto de inserção na região repetitiva para selecioná-la e siga um dos procedimentos:
• Clique no botão de adição (+) para adicionar uma entrada de região repetitiva sob a entrada
selecionada.
• Clique no botão de subtração (-) para excluir a entrada da região repetitiva.
• Clique no botão Seta abaixo para mover a entrada selecionada uma posição para baixo.
• Clique no botão Seta acima para mover a entrada selecionada uma posição acima.
• Escolha Modificar > Modelo > Entradas repetitivas e selecione uma das opções do menu. Use
este menu para inserir uma nova entrada repetitiva ou mover a posição da entrada selecionada.
Para recortar, copiar e excluir entradas:
Coloque o ponto de inserção na região repetitiva para selecioná-la e siga um dos procedimentos:
• Selecione Editar > Entradas repetidas > Recortar entradas repetitivas para recortar uma entrada
repetida.
• Selecione Editar > Entradas repetidas > Copiar entradas repetitivas para copiar uma entrada
repetida.
• Selecione Editar > Entradas repetidas > Excluir entradas repetitivas para remover uma entrada
repetida.
• Selecione Editar > Colar para colocar uma entrada repetitiva.
A opção colar insere uma nova entrada, mas não substitui uma entrada existente.
Sobre os modelos aninhados

Um modelo aninhado é um modelo cujo projeto e regiões editáveis se baseiam em outro modelo.
Para criar um modelo aninhado, salve o modelo original ou básico primeiro e, em seguida, crie
um novo documento baseado no modelo e salve o documento como modelo. No novo modelo, é
possível definir posteriormente regiões editáveis em áreas originalmente definidas como editáveis
do modelo básico.
Os modelos aninhados são utilizados para controlar o conteúdo em páginas de um site que
compartilham muitos elementos de design, mas possuem poucas variações entre as páginas. Por
exemplo: um modelo básico pode conter áreas de projeto maiores e é utilizado por diversos
fornecedores de conteúdo de um site, enquanto que um modelo aninhado pode definir as regiões
editáveis das páginas em uma seção específica do site.
As regiões editáveis em um modelo básico são repassadas ao modelo aninhado e permanecem
editáveis em páginas criadas de um modelo aninhado, a menos que sejam novas regiões do
modelo sejam inseridas nestas regiões.
As modificações feitas em um modelo básico são automaticamente atualizadas nos modelos com
base no modelo básico e em todos os documentos baseados no modelo a partir do modelo
principal e modelos aninhados.

Exemplo: O modelo básico do site de aluguel de veículos Global contém duas regiões editáveis
denominadas body e footer:
Para criar um modelo aninhado, criamos um novo documento baseado no modelo e salvamos o
documento como modelo com o nome global_aninhado. No modelo aninhado, fizemos alterações
na região editáveis denominada body. Inserimos uma imagem na coluna esquerda e uma nova
região editável na coluna direita.
492 Capítulo 27
Ao adicionar uma nova região editável em uma região editável repassada ao modelo aninhado, a cor
de destaque da região editável muda para laranja. O conteúdo adicionado a uma região editável,
como a imagem na coluna esquerda, não será mais editável em documentos baseado no modelo
aninhado. As áreas editáveis realçadas em azul, adicionadas ao modelo aninhado ou repassadas do
modelo básico, permanecem editáveis nos documentos baseados no modelo aninhado. As regiões
de modelo às quais não são inseridas regiões editáveis são repassas aos documentos baseados-no
modelo como regiões editáveis.
Como criar um modelo aninhado

É possível criar um modelo aninhado salvando um documento baseado em um modelo ao criar
um novo modelo daquele documento. Os modelos aninhados permitem criar variações de um
modelo básico. É possível aninhar diversos modelos para definir o crescente número de layout
específicos.
Para criar um modelo aninhado:
1 Crie um documento do modelo no qual o modelo aninhado deve se basear efetuando um dos
procedimentos a seguir:
• Na categoria Modelos do painel Propriedades, clique com o botão direito do mouse no modelo
do qual que deseja criar um novo documento e selecione Novo a partir de modelo.
• Selecione Arquivo > Novo. Na caixa de diálogo Novo documento, clique na guia Modelos e
selecione o site que contém o modelo a ser utilizado e, em seguida, na lista de documentos,
clique duas vezes no modelo para criar um novo documento.
Um novo documento é exibido na janela do documento.
2 Escolha Arquivo > Salvar como modelo ou clique no botão Criar um modelo aninhado na
barra Inserir para salvar o novo documento como modelo.
3 No modelo novo, adicione conteúdo e regiões editáveis.
4 Salve o modelo.
Em documentos baseados no modelo aninhado, é possível adicionar ou modificar conteúdo
em regiões editáveis repassadas do modelo básico, bem como em regiões editáveis criadas no
modelo novo.

Como aplicar um modelo a um documento existente
Ao aplicar um modelo a um documento que com conteúdo existente, o Dreamweaver tentará
corresponder o conteúdo existente a uma região do modelo. Se você estiver aplicando uma versão
revisada de um dos modelos existentes, é provável que os nomes sejam correspondentes. O
Dreamweaver compara os nomes das regiões editáveis no documento com os nomes das regiões
editáveis no novo modelo. Para cada nome de região coincidente, o Dreamweaver coloca o
conteúdo existente daquela região na nova região com o mesmo nome.
Se um modelo for aplicado a um documento que não teve um modelo aplicado a ele, não haverá
nenhuma região editável para comparar e ocorrerá um erro de correspondência.
O Dreamweaver localiza os erros de correspondência e os listará na caixa de diálogo Nomes
inconsistentes de regiões. É possível selecionar as região ou regiões para as quais o conteúdo da
página atual deve ser transferido ou excluir o conteúdo não correspondente. Se desejar manter o
conteúdo, selecione o nome de uma região editável do menu pop-up na caixa de diálogo. Caso
contrário, selecione “em lugar nenhum” para descartar o conteúdo não solucionado.
Para aplicar um modelo a um documento existente:
1 Selecione Arquivo > Abrir para abrir o documento ao qual deseja aplicar o modelo.
2 Efetue um dos procedimentos a seguir:
• Clique na janela do documento e, em seguida, escolha Modificar > Modelos > Aplicar o
modelo à página. Escolha um modelo na lista e clique em Selecionar.
• Selecione o modelo na categoria Modelos do painel Propriedades e clique no botão Aplicar.
• Arraste o modelo da categoria Modelos, no painel Propriedades, para a visualização do projeto
3 Se houver conteúdo no documento que não pode ser atribuído automaticamente a uma região
de modelo, a caixa de diálogo Nomes inconsistentes de regiões será exibida. A caixa listará
todas as regiões editáveis no modelo que está sendo aplicado. Utilize-a para escolher um destino
para o conteúdo.
Para obter mais informações sobre como mover o conteúdo existente a regiões editáveis no
documento, veja Como solucionar nomes inconsistes de regiões na ajuda do Dreamweaver.
Como desanexar um documento de um modelo

Para fazer alterações nas regiões bloqueadas de um documento baseado em um modelo, é
necessário desanexar o documento do modelo. Quando o documento for desanexado, o
documento inteiro se torna editável.
Para desanexar um documento de um modelo:
1 Abra o documento baseado em modelo a ser desanexado.

2 Escolha Modificar > Modelos > Desanexar do modelo.
O documento é desanexado do modelo e todos os códigos do modelo são removidos.
494 Capítulo 27
Como editar e atualizar os modelos
Ao salvar um modelo, o Dreamweaver pergunta se você deseja atualizar todos os documentos
anexados ao modelo. Para isso, use o comando Modificar > Modelos > Atualizar as páginas. O
Dreamweaver atualiza os documentos baseados no modelo no mesmo site que o modelo. O
Dreamweaver atualizará automaticamente os documentos baseado no modelo, incluindo modelos
aninhados baseados no modelo que estiver sendo atualizado.
Atualizar modelos do Dreamweaver 4

É possível continuar trabalhando com modelos criados no Dreamweaver 4 na versão atual do
Dreamweaver. O Dreamweaver não modificará a sintaxe do modelo automaticamente nos
arquivos de modelo do Dreamweaver 4, portanto, esses arquivos podem ser utilizados tanto com o
Dreamweaver 4 como Dreamweaver MX. No entanto, se você inserir uma nova região de modelo
em um modelo do Dreamweaver 4 com o Dreamweaver MX, a nova sintaxe do modelo do
Dreamweaver MX será utilizada e você não poderá utilizar aquele modelo no Dreamweaver 4.
Como atualizar documentos baseados em um modelo

Quando uma alteração for feita em um modelo, o Dreamweaver solicitará a atualização das
páginas que o utilizarem. Podem ser utilizados também os comandos de atualização para atualizar
manualmente o documento atual ou o site inteiro. A utilização dos comandos de atualização
funciona da mesma maneira que a reaplicação do modelo.
Para abrir e modificar um modelo anexado:
1 Como o documento baseado em modelo na janela Documento, selecione Modificar >

Modelos > Abrir o modelo anexado.
2 Modifique o conteúdo do modelo como desejar. Para modificar as propriedades da página do
modelo, escolha Modificar > Propriedades da página. Os documentos baseados no modelo
recebem as propriedades da página do modelo.
3 Salve o documento. O Dreamweaver solicita que você atualize as páginas baseadas no modelo.
Para aplicar as modificações do modelo ao documento:
Selecione Modificar > Modelos > Atualizar a página atual.
Para atualizar o site inteiro ou todos os documentos que utilizarem um modelo anexado:
1 Selecione Modificar > Modelos > Atualizar as páginas.

A caixa de diálogo Atualizar as páginas é exibida.
2 No menu pop-up Procurar em, siga um dos procedimentos abaixo:
• Selecione Site inteiro e, em seguida, escolha o nome do site no menu pop-up adjacente. Este
procedimento atualizará todas as páginas no site selecionado de acordo com os modelos
correspondentes.
• Selecione Os arquivos que utilizam e, em seguida, escolha o nome do modelo no menu pop-up
adjacente. Este procedimento atualizará todas as páginas no site atual que utilizam o modelo
selecionado.

3 Verifique se a opção Modelos está selecionada na opção Atualizar.
4 Clique em Iniciar.
O Dreamweaver atualizará os arquivos conforme indicado. Se a opção Mostrar o registro for
selecionada, o Dreamweaver fornecerá informações sobre os arquivos que tentar atualizar,
incluindo informações sobre o êxito em sua atualização.
Verificar a sintaxe do modelo

O Dreamweaver verifica a sintaxe do modelo automaticamente ao salvar um modelo. Uma caixa
de diálogo com mensagem será exibida se a sintaxe for digitada incorretamente. A mensagem de
erro descreve o erro e indica a linha específica no código onde o erro ocorreu.
Use o comando Verificar a sintaxe do modelo para verificar a sintaxe do modelo antes de salvar
um modelo. Por exemplo: se um parâmetro ou expressão for adicionado ao modelo manualmente
na visualização de código, use o comando para verificar se o código contém a sintaxe correta.
Para verificar a sintaxe de modelo válida, siga um dos procedimentos abaixo:
Selecione Modificar > Modelos > Verificar a sintaxe do modelo.
Sobre o XML
XML, Extensible Markup Language, é uma linguagem de marcação para documentos
estruturados. Esta linguagem se assemelha a uma generalização do HTML para a definição
de tags. O XML deriva-se do SGML (Standard Generalized Markup Language). Do mesmo
modo que o SGML, o XML é uma linguagem para definição de tags e as relações entre elas.
As tags XML são semelhantes às tags HTML, consistindo em um nome de tag além de atributos
opcionais cercados colchetes angulares. Do mesmo modo que o HTML, o conteúdo está
localizado entre tag inicial e uma tag final (em que o nome da tag é precedido por uma barra
invertida ). Uma diferença entre as sintaxes é que, em XML, uma tag vazia (que utiliza uma tag
única, como <img>, ao invés de uma tag de abertura e uma tag final contendo texto ou outro
material) deverá terminar com uma barra invertida antes do colchete. Por exemplo: uma tag <img>
no XML terá a seguinte aparência:
<img src="test.png" />
A sintaxe do XML é mais restritiva do que a sintaxe HMTL. Os arquivos que não estiverem
estritamente de acordo com a sintaxe do XML serão rejeitados pelos analisadores XML.
O XML oferece uma maneira de marcar seqüências de caracteres literais, que podem incluir tags
que dispensam a análise. Este método envolve um elemento denominado seção CDATA, que inclui
uma seqüência de caracteres literal entre colchetes. Qualquer elemento contido entre os colchetes
será omitido pelo analisador XML. O XML-exportado do Dreamweaver utiliza seções CDATA de
forma extensiva.
496 Capítulo 27
Como exportar e importar o conteúdo XML do modelo
Um documento baseado em modelo contém um conjunto de dados representados por pares
nome/valor. Cada par consiste em um nome de região editável e no respectivo conteúdo da região.
Suponha que um modelo contenha três regiões editáveis: número_do_item, preço_do_item e
cor_do_item. É possível descrever por completo um documento com base no modelo, fornecendo
o nome do modelo e os pares nome/valor correspondentes.
O Dreamweaver permite exportar os pares nome/valor para um arquivo XML, de modo que seja
possível trabalhar com os dados do documento fora do Dreamweaver (em um editor XML ou
editor de texto, por exemplo: ou mesmo aplicativos de banco de dados). Por outro lado, é possível
importar os dados de um documento XML que estiver estruturado adequadamente para um
documento com base em um modelo do Dreamweaver. Para obter mais informações, veja “Sobre
o XML”, na página 496.
Para exportar as regiões editáveis do documento como XML:
1 Selecione Arquivo > Abrir e abra um documento baseado em modelo que contenha
regiões editáveis.
2 Selecione Arquivo > Exportar > Dados do modelo como XML.
3 Na caixa de opção Exportar dados do modelo como XML, Notação, selecione uma das opções
a seguir:
• Se o documento contiver regiões repetitivas ou parâmetros de modelo, selecione Utilizar os
rótulos padrões de XML do Dreamweaver.
• Para modelos que não contêm regiões repetitivas ou parâmetros de modelo, selecione Utilizar
os nomes de regiões editáveis como rótulos de XML.
4 Clique em OK.
5 Na caixa de diálogo que aparecer, digite o nome do arquivo XML e clique em Salvar.
O Dreamweaver irá gerar um arquivo XML contendo o material dos parâmetros e regiões
editáveis do documento, incluindo regiões editáveis dentro das regiões repetitivas ou regiões
opcionais. O arquivo XML inclui o nome do modelo original, bem como o nome e o conteúdo
de cada região do modelo.
Observação: O conteúdo nas regiões bloqueadas não será exportado para o arquivo XML.
Para importar um conteúdo XML:
1 Selecione Arquivo > Importar >Importar XML para o modelo.

2 Na caixa de diálogo Importar XML, selecione o arquivo XML e clique em Abrir.
O Dreamweaver criará um novo documento a partir do modelo especificado no arquivo XML. O
programa preencherá o conteúdo de cada região editável do documento utilizando os dados do
arquivo XML. O documento resultante será aberto na janela do documento.
Observe que se o arquivo XML não estiver definido exatamente como o Dreamweaver espera,
talvez não seja possível importar os dados. Uma solução para este problema é exportar um arquivo
XML fictício do Dreamweaver, para que exista um arquivo XML com a estrutura correta. Em
seguida, copie os dados do arquivo original XML para o arquivo XML exportado. O resultado é
um arquivo XML com a estrutura correta que contém os dados apropriados, todos prontos para
serem importados.

Como utilizar as notações de tags XML
O Dreamweaver permite exportar o conteúdo XML utilizando tags XML padrão do
Dreamweaver.
A maneira mais fácil de analisar as notações de tags, se você compreender a sintaxe XML, é
observar um exemplo. O código XML a seguir foi exportado de um documento que se baseou em
um modelo denominado newstemplate. O documento contém uma região editável definida,
conhecida como News_Story e uma região editável padrão (doctitle), que contém a tag title).
As tags XML padrão do Dreamweaver utilizam uma tag denominada item. A tag item possui um
atributo name, que dá o nome à região editável. A tag contém uma seção CDATA que, por sua vez,
contém o conteúdo da região editável. Neste exemplo, a tag item com name="doctitle" identifica o
título do documento e a tag item com name="News_Story" refere-se à região editável.
<?xml version="1.0"?>
<templateItems template="/Templates/newstemplate.dwt">
<item name="doctitle">
<![CDATA[<title>Today’s Headline Story</title>]]>
</item>
<item name="News_Story">
<![CDATA[<p>This is where the story goes.</p>]]>
</item>
</templateItems>
498 Capítulo 27
CAPÍTULO 28
Como testar um site
Antes de carregar o site em um servidor e prepará-lo para a exibição, é recomendável testá-lo

localmente (recomenda-se testar e verificar se há problemas no site com freqüência durante a sua
construção. Desta forma, é possível descobrir problemas com antecedência e evitar que se
repitam).
Certifique-se de que a aparência e o funcionamento das páginas nos navegadores de destino
estejam de acordo com o esperado, que não haja links rompidos e que o download das páginas
não demore demais. É possível também testar e solucionar problemas em todo o site executando
um relatório do site.
As orientações a seguir o ajudarão a tornar seu site uma experiência agradável para os visitantes:
• Certifique-se de que as páginas estejam funcionando conforme o esperado nos navegadores de
destino e se não apresentam problemas ou “falhem” em outros navegadores.
As páginas devem ser legíveis e funcionais nos navegadores que não oferecerem suporte aos
estilos, camadas, plugins ao JavaScript (consulte “Como verificar a compatibilidade com o
navegador”, na página 501). No caso das páginas que não funcionam adequadamente em
navegadores de versões anteriores, é possível utilizar o comportamento Verificar o navegador
para redirecionar os visitantes automaticamente a uma outra página (consulte “Verificar o
navegador”, na página 383).
• Visualize as páginas no maior número possível de navegadores e plataformas diferentes.
Este procedimento possibilita a exibição de diferenças no layout, cores, tamanhos de fonte e
tamanho padrão de janelas do navegador, que não podem ser previstos em uma verificação de
navegador de destino (consulte “Como visualizar as páginas nos navegadores”, na página 502).
• Verifique se há links rompidos no site e ajuste-os.
Uma vez que os outros sites também sofrem reformas e reorganizações, a página à qual está
vinculando o seu site pode ter sido transferida ou excluída. É possível executar um relatório de
verificação do link para testar os (consulte “Como verificar os links em uma página ou site”, na
página 504, “Como ajustar os links rompidos”, na página 505, “Como abrir documentos
vinculados no Dreamweaver”, na página 506 ou “Como utilizar os relatórios para testar um
site”, na página 508).
499
• Monitore o tamanho das páginas e o tempo de download (consulte “Como definir o tempo e o
tamanho do download”, na página 507).
Lembre-se de que as páginas que consistem de uma tabela maior serão visualizadas pelos
visitantes somente após o término da descarga da tabela inteira. Há também o recurso de
desmembrar tabelas grandes. Caso isto não seja possível, coloque um conteúdo pequeno (como
uma mensagem de boas-vindas ou uma faixa de propaganda) fora da tabela no alto da página,
para que os visitantes possam visualizar esse material enquanto for feito o download da tabela.
• Execute alguns relatórios de site para testar e solucionar problemas no site como um todo.
É possível diagnosticar problemas em todo o seu site, como, por exemplo: documentos sem
títulos, tags vazias e tags redundantes aninhadas (consulte “Como utilizar os relatórios para
testar um site”, na página 508).
• Depois que seção maior do site tiver sido publicada, prossiga com sua atualização e
manutenção.
A publicação do site, ou seja, colocá-lo “no ar”, pode ser efetuada de várias maneiras e é um
processo contínuo. A definição e implementação de um sistema de controle de versão é um
processo importante, tanto com as ferramentas do Macromedia Dreamweaver MX, quanto
com um aplicativo externo de controle de versão.
• Utilize os fóruns de discussão do Dreamweaver no site da Macromedia na Web. Para mais
informações sobre como acessar os grupos de discussão, consulte http://
www.macromedia.com/go/dreamweaver_newsgroup.
Os fóruns podem fornecer informações importantes sobre navegadores, plataformas e assim por
diante. Também é possível discutir assuntos técnicos e compartilhar sugestões úteis com outros
usuários do Dreamweaver.
• “Como verificar a compatibilidade com o navegador”, na página 501
• “Como utilizar os comportamentos para detectar os navegadores e plug-ins”, na página 502
• “Como visualizar as páginas nos navegadores”, na página 502
• “Como verificar os links em uma página ou site”, na página 504
• “Como ajustar os links rompidos”, na página 505
• “Como abrir documentos vinculados no Dreamweaver”, na página 506
• “Como definir o tempo e o tamanho do download”, na página 507
• “Como utilizar os relatórios para testar um site”, na página 508
500 Capítulo 28
Como verificar a compatibilidade com o navegador
O Dreamweaver permite criar páginas da Web com elementos suportados por todos os
navegadores (imagens e texto de parágrafo, por exemplo), bem como elementos suportados
apenas por navegadores mais recentes (estilos e camadas, por exemplo).
O recurso Verificar os navegadores de destino testa o HTML nos documentos para verificar se
alguma tag ou atributo não possui suporte dos navegadores de destino. A verificação não altera
nenhum aspecto do documento.
O recurso Verificar os navegadores de destino utiliza arquivos de texto, denominados perfis de
navegadores, que determinam quais as tags suportadas pelos por navegadores específicos. O
Dreamweaver inclui perfis predefinidos para Netscape Navigator versões 2.0 e posteriores,
Internet Explorer versões 2.0 e posteriores e Opera versões 2.1 e posteriores. Para modificar os
perfis existentes ou criar novos perfis, consulte a seção de personalização do Dreamweaver no link
http://www.macromedia.com/br/support/.
É possível executar uma verificação de navegador de destino em um documento, diretório ou
no site inteiro.
Observação: A verificação de um navegador de destino não é o mesmo que verificar scripts em seu site.
Para executar uma verificação de navegador de destino:

• Para executar a verificação no documento atual, salve primeiro o arquivo. O Dreamweaver
efetuará a verificação da última versão do arquivo salvo e não inclui as modificações não salvas.
• Para efetuar a verificação em um diretório ou site, selecione um site no menu Site atual no
painel Site. O Dreamweaver efetuará a verificação do navegador de destino em todos os
arquivos HTML nesta pasta e em qualquer subpasta. É possível executar verificações do
navegador de destino apenas em arquivos locais.
2 Selecione Arquivo > Verificar a página > Verificar os navegadores de destino.
O Dreamweaver solicitará que você selecione um navegador primário, caso ainda não tenha
selecionado.
3 Na lista de navegadores, selecione o navegador de destino o qual deseja verificar para o seu site.
4 Clique em Verificar.
O relatório é exibido no painel no painel Verificação do navegador de destino (no grupo de
painéis Resultados).
5 Para salvar o relatório, clique no botão Salvar o relatório no painel Verificação do navegador de
destino.
Observação: O relatório do navegador de destino é um arquivo temporário e será perdido se não for salvo.
Como testar um site 501

Como utilizar os comportamentos para detectar os navegadores
e plug-ins
Os comportamentos podem ser utilizados para determinar qual navegador os visitantes do site
estão utilizando e se possuem um plug-in instalado. Para obter mais informações sobre os
comportamentos, consulte “Como utilizar comportamentos JavaScript”, na página 375.
Verificar o navegador envia os visitantes a outras páginas, dependendo do tipo e versão do
navegador (consulte “Verificar o navegador”, na página 383). Por exemplo: é possível enviar os
usuários a uma página se estiverem utilizando a versão 4.0 ou mais avançada do Netscape
Navigator, a uma outra página se utilizarem a versão 4.0 ou mais avançada do Microsoft Internet
Explorer 4.0 ou mantê-los na mesma página, caso estejam utilizando qualquer outro navegador.
Verificar o plug-in enviaos visitantes a outras páginas, dependendo da ocorrência de um
determinado plug-in instalado (consulte “Verificar o plug-in”, na página 384). Por exemplo: você
pode enviar os usuários a uma página se tiverem o Shockwave da Macromedia instalado ou a uma
outra página, se não tiverem.
Como visualizar as páginas nos navegadores

É recomendável testar as páginas visualizando-as nos navegadores normalmente durante o projeto e
o processo de criação das páginas. Com este método você poderá detectar erros com antecedência
sem copiá-los ou repeti-los.
É possível visualizar documentos nos navegadores de destino a qualquer momento. Não é
necessário salvar o documento. Todas as funções relacionadas aos navegadores devem funcionar,
inclusive os comportamentos JavaScript, links relativos a-documentos e absolutos, controles
ActiveX e plug-ins do Netscape Navigator, contanto que os plug-ins ou controles ActiveX
necessários estejam instalados.
O conteúdo vinculado a um caminho relativo à raiz não aparece quando os documentos são
visualizados em um navegador local (a menos que a opção Visualizar utilizando arquivo temporário
seja selecionada em Preferências (consulte “Como visualizar as páginas nos navegadores”, na
página 502). Isto ocorre porque os navegadores não reconhecem a raiz dos sites, ao contrário dos
servidores. Para visualizar o conteúdo vinculado aos caminhos relativos à raiz, coloque o arquivo em
um servidor remoto e selecione Arquivo > Visualizar no navegador para visualizá-lo (consulte
“Caminhos relativos à raiz do site”, na página 434).
É possível definir até 20 navegadores para a visualização. Todos os navegadores definidos
aparecerão no menu Visualizar no navegador. Os seguintes navegadores são recomendados para
visualização: Internet Explorer 4.0, Netscape Navigator 4.0 ou no mínimo um navegador
somente para texto, como o Lynx.
Para visualizar o documento num navegador, siga um dos procedimentos abaixo:
• Selecione Arquivo > Visualizar no navegador e, em seguida, escolha um dos navegadores

listados.
Se você ainda não selecionou um navegador, selecione Editar > Preferências e selecione a
categoria Visualizar no navegador à esquerda para selecionar um navegador.
• Pressione a tecla F12 para exibir o documento no navegador primário.
• Pressione as teclas Control+F12 para exibir o documento no navegador secundário.
502 Capítulo 28
Para testar os links em um navegador:
1 Selecione Arquivo > Visualizar no navegador ou pressione a tecla F12.

2 Clique nos links ativos para verificar se estão funcionando corretamente.
Para configurar ou alterar as preferências dos navegadores primários e secundários:
1 Efetue um dos procedimentos a seguir para abrir as opções Visualizar no navegador:

• Selecione Editar > Preferências e selecione Visualizar no navegador na lista de categorias à
esquerda.
• Selecione Arquivos > Visualizar no navegador > Editar a lista de navegadores.
A caixa de diálogo Preferências é exibida as opções de visualização no navegador.

3 Clique em OK.

Como verificar os links em uma página ou site
A correção dos links rompidos (aqueles que não mais seguem um caminho válido ou indicam
arquivos inexistentes) em um site grande pode se tornar uma tarefa tediosa e demorada. Isto se deve
ao fato de um grande site conter centenas de links a documentos internos e externos e que podem
se modificar ao longo do tempo. Os arquivos órfãos (arquivos que ainda existem no site, mas não
estão mais vinculados a nenhum arquivo) também são um problema, pois ocupam espaço em disco
e podem confundir outros membros da equipe que estiverem trabalhando no site.
Utilize o recurso Verificar os links para localizar links rompidos e arquivos sem referências em um
arquivo aberto, em uma parte do site ou no site local inteiro. O Dreamweaver verificará apenas os
links aos documentos dentro do site e compilará uma lista de links externos que aparecem no
documento ou documentos selecionados, porém não os verificará.
Quando o Dreamweaver finaliza a verificação dos links nos arquivos especificados, abre o painel
Verificador de links (no grupo de painéis Resultados). Esta caixa de diálogo exibe uma lista de
links rompidos, links externos (impossíveis de serem verificados pelo Dreamweaver) e arquivos
órfãos. Para obter mais informações, veja “Como abrir documentos vinculados no Dreamweaver”,
na página 506.
Para verificar os links no documento:
1 Salve o arquivo em um local no site Dreamweaver local.

2 Selecione Arquivo > Verificar a página > Verificar os links.
O relatório é exibido no painel Verificador de links (no grupo de painéis Resultados).
3 Para salvar o relatório, clique no botão Salvar o relatório no painel Verificador de links.
Observação: O relatório do navegador de destino é um arquivo temporário e será perdido se não for salvo.
Para verificar os links em uma parte de um site local:
1 No painel Site, selecione um site no menu pop-up Site atual.

2 Em Visualização do local, selecione os arquivos ou pastas a serem verificados.
3 Inicie a verificação seguindo um dos procedimentos abaixo:
• Clique com o botão direito do mouse e, no menu contextual, selecione Verificar os links >
Arquivos/pastas selecionadas.
• Selecione Arquivo > Verificar a página > Verificar os links.
4 No painel Verificador de links, selecione um relatório de links específico no menu pop-up
Mostrar para exibir outro relatório.
As opções do relatório são Links rompidos e Links externos. É possível verificar arquivos órfãos
ao verificar os links em todo o site (veja procedimento a seguir).
504 Capítulo 28
Para verificar os links no site inteiro:
1 No painel Site, selecione um site no menu pop-up Site atual.

2 Escolha Site > Verificar os links no site inteiro.
3 No painel Verificador de links, selecione um relatório de links específico no menu pop-up
Mostrar para exibir outro relatório.
As opções são Links rompidos, Links externos e Arquivos órfãos.
4 Uma lista de arquivos correspondentes ao tipo de relatório selecionado aparece na caixa de
diálogo Verificador de links.
Observação: Se Arquivos órfãos for selecionado como tipo de relatório, é possível exclui-los diretamente
da caixa de diálogo Verificador de links selecionando um arquivo da lista e pressionando a tecla Del.
Uma lista de arquivos correspondentes ao tipo de relatório selecionado aparecerá no painel

Verificador de links.
Como ajustar os links rompidos

Ao verificar os links no Dreamweaver, o painel Verificador de links exibe um relatório de links
rompidos, links externos e arquivos órfãos, se todo o site for selecionado (consulte “Como
verificar os links em uma página ou site”, na página 504).
É possível ajustar os links e referências a imagens rompidos diretamente no painel Verificador de
links ou abrir os arquivos da lista e ajustar os links no inspetor de propriedades.
Para ajustar os links no painel Verificador de links:
1 Execute um relatório de verificação de links (consulte “Como verificar os links em uma página
ou site”, na página 504).
2 Na coluna Links rompidos (não da coluna Arquivos) do painel Verificador de links (no grupo
de painel Resultados), selecione o link rompido.
Um ícone de pasta ao lado do link rompido é exibido.
3 Clique no ícone correspondente à pasta para localizar o arquivo correto ou digite o caminho
correto e o nome do arquivo para associar o link.
4 Clique na tecla Tab ou Enter.
Se houver outras referências rompidas a este mesmo arquivo, aparecerá uma caixa de diálogo
que o solicitará a ajustar as referências também nos outros arquivos. Clique em Sim, para que o
Dreamweaver atualize todos os documentos da lista que fizerem referência a este arquivo.
Clique em Não para que o Dreamweaver atualize apenas a referência atual.
Observação: Se a opção Ativar a devolução e retirada de arquivos estiver ativada neste site, o Dreamweaver
tentará retirar os arquivos que precisarem ser alterados. Se não conseguir retirar um arquivo, o Dreamweaver exibirá
uma caixa de diálogo de advertência e manterá inalteradas as referências rompidas. Veja “Como utilizar as opções
de devolução e retirada de arquivos”, na página 94.

Para ajustar os links no inspetor de propriedades:
1 Execute um relatório de verificação de links (consulte “Como verificar os links em uma página
ou site”, na página 504).
2 Clique no painel Verificador de links (no painel de grupo Resultados) e clique duas vezes em uma
entrada na coluna Arquivo.
O Dreamweaver abrirá o documento, selecionará a imagem ou link com problema e realçará o
caminho e o nome do arquivo no inspetor de propriedades. Caso o inspetor de propriedades
não esteja visível, escolha Janela > Propriedades, para abri-lo.
3 Clique no ícone correspondente à pasta para localizar o arquivo correto ou sobrescreva o texto
realçado para definir um novo caminho e nome de arquivo no inspetor de propriedades.
Se estiver atualizando a referência de uma imagem e a nova imagem aparecer com o tamanho
incorreto, clique nos identificadores L e U, no inspetor de propriedades, ou clique no botão
Atualizar para redefinir os valores relativos à altura e largura. Os identificadores L e U passarão
de negrito ao tipo normal.
4 Salve o arquivo.
À medida que os links forem ajustados, as entradas desaparecem da lista do verificador de links. Se
uma entrada permanecer na lista após a digitação do novo caminho e nome de arquivo no
Verificador de links (ou após o salvamento das alterações feitas no inspetor de propriedades),
indicará que o Dreamweaver não conseguiu localizar o novo arquivo.
Como abrir documentos vinculados no Dreamweaver

Os links não estão ativos no Dreamweaver, ou seja, não é possível abrir um documento vinculado
clicando no link na janela do documento.
Para abrir documentos vinculados no Dreamweaver, siga um dos procedimentos abaixo:
• Selecione o link e escolha Modificar > Abrir a página vinculada.

• Pressione a tecla Control e clique duas vezes no link.
Observação: O documento vinculado deve estar localizado no disco local.
506 Capítulo 28
Como definir o tempo e o tamanho do download
O Dreamweaver calculará o tamanho com base no conteúdo de toda a página, incluindo todos os
objetos vinculados, como imagens e plug-ins. O Dreamweaver estimará o tempo de download
com base na velocidade de conexão digitada nas preferências da barra de status. O tempo do
download é variável e depende das condições gerais da Internet.
Recomenda-se o uso da regra de oito segundos após a verificação dos períodos de download de
uma determinada página da Web. Ou seja, a maioria dos usuários não esperará mais do que oito
segundos para que a página seja carregada completamente.
Para definir as preferências de tempo e tamanho do download:

2 Selecione Barra de status Bar na lista Categoria à esquerda.
A opção de preferência Barra de status é exibida.
3 Selecione uma velocidade de conexão com a qual deseja calcular o tempo do download.
A velocidade média de conexão no Brasil é 28,8 kbps. Se o seu projeto destinar-se a uma
intranet, selecione 1500 (velocidade T1).
Para obter mais informações sobre as preferências da barra de status, consulte “Definição das
preferências da barra de status”, na página 44.
4 Clique em OK.

Como utilizar os relatórios para testar um site
Ao testar o site, é possível compilar e gerar relatórios relativos a vários atributos HTML,
utilizando o comando Relatórios. Este comando permite verificar os links externos, tags
combináveis de fontes aninhadas, texto alternativo ausente, tags aninhados redundantes, tags
vazias removíveis e documentos sem título. É possível verificar problemas de HTML em
documentos selecionados ou um site inteiro antes de publicá-lo.
Após executar um relatório, é possível salvá-lo em um arquivo XML e importá-lo a uma instância
de modelo, banco de dados ou planilha eletrônica e imprimi-lo ou exibi-lo em um site da Web. É
possível adicionar também diversos tipos de relatórios ao Dreamweaver através do site
Macromedia Dreamweaver Exchange (consulte “Como adicionar extensões no Dreamweaver”, na
página 59).
Para utilizar o comando Relatórios para trabalhar com o sistema de devoluções e retiradas de
arquivos e com as Design Notes, consulte “Como utilizar os relatórios para aprimorar o fluxo de
trabalho”, na página 109.
Para executar relatórios de teste de um site:
1 Escolha Site > Relatórios.

2 Selecione uma categoria para criar um relatório e um tipo de relatório para executar.
3 Clique em Executar para criar o relatório.
Dependendo do tópico do relatório, você receberá uma mensagem para salvar o arquivo,
definir o site ou selecionar uma pasta (se ainda não o tiver feito).
Uma lista de resultados aparece no painel Relatórios do site (no painel de grupo Resultados).
508 Capítulo 28
Para utilizar e salvar um relatório:
1 Para organizar os resultados, clique no cabeçalho da coluna de acordo com a qual deseja
ordenar.
É possível ordenar pelo nome do arquivo, número da linha ou descrição.
2 Selecione um item do relatório e clique duas vezes para abrir o arquivo na janela Documento.
3 Clique em Salvar o relatório para salvar o relatório.
Ao salvar um relatório, é possível importá-lo a uma instância de modelo, banco de dados ou
planilha eletrônica, imprimi-lo ou exibi-lo em um site da Web.
Dica: Após executar os relatórios HTML, utilize o comando Limpar o HTML para corrigir quaisquer erros de HTML
que tiverem sido listados pelos relatórios.

510 Capítulo 28
Parte VIII
Parte VIII
Como tornar as
páginas dinâmicas
Utilize as ferramentas de desenvolvimento de aplicativos do

Dreamweaver para adicionar conteúdo dinâmico a suas
páginas.
• Capítulo 29, “Otimização da área de trabalho para
desenvolvimento visual”
• Capítulo 30, “Fluxo de trabalho do Dreamweaver para
projetos de páginas dinâmicas”
• Capítulo 31, “Como armazenar e recuperar dados para a
página”
• Capítulo 32, “Definição das fontes de conteúdo
dinâmico”
• Capítulo 33, “Como adicionar conteúdo dinâmico às
páginas da Web”
• Capítulo 34, “Como exibir os registros de bancos de
dados”
• Capítulo 35, “Como utilizar os componentes
ColdFusion”
• Capítulo 36, “Como utilizar os serviços da Web”
• Capítulo 37, “Como adicionar comportamentos de
servidor personalizados”
• Capítulo 38, “Criação de formulários interativos”
CAPÍTULO 29
Otimização da área de trabalho para
desenvolvimento visual
É possível otimizar a área de trabalho do Macromedia Dreamweaver MX para desenvolver

aplicativos para a web visualmente. Por exemplo: é possível utilizar painéis para construir
rapidamente páginas dinâmicas e exibir dados ao vivo nas suas páginas enquanto trabalha.
• “Exibição de um painel útil”, na página 513
• “Exibir a estrutura do banco de dados no Dreamweaver”, na página 515
• “Exibição de Live Data na visualização do projeto”, na página 516
• “Como trabalhar na visualização do projeto sem o Live Data”, na página 520
• “Visualização de páginas dinâmicas em um navegador”, na página 520
• “Restrição de uma informação do banco de dados no Dreamweaver”, na página 521
Exibição de um painel útil

Clique na guia Aplicativo na barra Inserir para exibir um conjunto de botões que permitem
adicionar conteúdo dinâmico e comportamentos de servidor à sua página, da seguinte maneira:
O número e o tipo de ícones exibidos depende do tipo de documento aberto na janela do

documento. A barra Inserir inclui botões para adicionar os seguintes itens à página:
• Conjuntos de registros
• Texto ou tabelas dinâmicas
• Formulários para inserir ou atualizar registros em um banco de dados
• Barras de navegação dos registros
Se passar para visualização do código (Exibir > Código), painéis adicionais podem ser exibidos
para permitir a inserção de códigos na página. Por exemplo: se uma página JSP for exibida no
modo de visualização do código, um painel JSP aparecerá na barra Inserir da seguinte maneira:
513
Para descobrir o que cada ícone da barra Inserir faz, mova o mouse sobre um ícone. Será exibida
uma dica de ferramenta, da seguinte maneira:
Se desejar definir origens de conteúdo dinâmico para sua página e adicionar o conteúdo à página,
selecione Janela > Ligações. O painel Ligações é exibido da seguinte maneira:
Para obter mais informações, selecione Ajuda no menu pop-up do grupo de painel.
Se desejar adicionar lógica do servidor às páginas dinâmicas, selecione Janela > Comportamentos
de servidor. O painel Comportamentos de servidor é exibido da seguinte maneira:
Um comportamento de servidor é o conjunto de instruções inseridas em uma página dinâmica na

fase de criação e executado no servidor em tempo de execução. Para obter mais informações,
selecione Ajuda no menu pop-up do grupo de painel.
Se desejar explorar bancos de dados ou criar conexões de bancos de dados, selecione Janela >
Bancos de dados. O painel Bancos de dados é exibido da seguinte maneira:
514 Capítulo 29
Se desejar inspecionar, adicionar ou modificar o código para JavaBeans, componentes
Macromedia ColdFusion ou serviços da Web, selecione Janela > Componentes. O painel
Componentes é exibido da seguinte maneira:
Observação: O painel Componentes será ativado apenas se abrir uma página ColdFusion, JSP ou ASP.NET. Além
disso, o documento pode não oferecer suporte a determinados componentes. Os documentos do ColdFusion, por
exemplo: não oferecem suporte a JavaBeans.
Exibir a estrutura do banco de dados no Dreamweaver

Após a conexão ao banco de dados, é possível exibir sua estrutura no Dreamweaver. Por exemplo:
é possível exibir os nomes das tabelas, colunas, visualizações e procedimentos armazenados no
banco de dados. O Dreamweaver também identifica a chave primária de cada tabela e os tipos de
dados de cada coluna. É possível visualizar até os dados armazenados nas tabelas de banco de
dados.
Para exibir a estrutura de um banco de dados:
1 Abra o painel Banco de dados (Janela > Banco de dados).

O Dreamweaver preenche o painel Banco de dados com todos os bancos de dados para os quais
foram criadas conexões. Se estiver desenvolvendo um site ColdFusion, o Dreamweaver
preencherá o painel com todos os bancos de dados para os quais foram definidas fontes de
dados no administrador de ColdFusion.
Observação: O Dreamweaver procura o servidor ColdFusion definido para o site atual. Veja “Como especificar
onde as páginas dinâmicas podem ser processadas”, na página 144.
Se os bancos de dados não forem exibidos no painel, será necessário criar uma conexão de
banco de dados. Para obter mais informações, veja “Como efetuar a conexão com um banco de
dados”, na página 146.
2 Para exibir as tabelas, os procedimentos armazenados e visualizações no banco de dados, clique
no ícone de adição (+) ao lado de uma conexão na lista.
3 Para exibir as colunas da tabela, clique em um nome de tabela.
Os ícones colunas refletem o tipo de dados e também indicam a chave primária.
4 Para exibir os dados em uma tabela, clique com o botão direito do mouse no nome da tabela da
lista e escolha Exibir dados no menu pop-up.
Otimização da área de trabalho para desenvolvimento visual 515

Exibição de Live Data na visualização do projeto
Por padrão, o modo Visualização do projeto (Visualizar > Projeto) fornece uma representação
visual da página sem o conteúdo dinâmico. A visualização padrão não é ideal para exibição de
páginas dinâmicas, pois o conteúdo dinâmico pode alterar fundamentalmente o layout da página.
Para saber como o conteúdo dinâmico pode afetar o layout de uma página, selecione Exibir > Live
Data. O Dreamweaver exibe a página na visualização do projeto completa com conteúdo
dinâmico. As ilustrações a seguir mostram uma página dinâmica com Live Data desativado.
As ilustrações a seguir mostram a mesma página com Live Data ativado:
516 Capítulo 29
Quando o Live Data é ativado na visualização do projeto, é possível fazer o seguinte:
• Ajuste o layout da página utilizando as ferramentas de design de página
• Adicionar, editar ou excluir o conteúdo dinâmico
• Adicionar, editar ou excluir comportamentos de servidor
Observação: Os links não funcionam na visualização do projeto. Para testar seus links, utilize o recurso Visualizar
no navegador (veja “Visualização de páginas dinâmicas em um navegador”, na página 520).
Ao realizar uma alteração na página que afete o conteúdo dinâmico, será possível atualizar a
página clicando no botão Atualizar (o ícone de seta em círculo). O Dreamweaver também pode
atualizar automaticamente a página. Para obter mais informações, veja “Atualização da página”, na
página 519.
Requisitos para exibição de live data

Para exibir o live data na visualização do projeto, você deve fazer o seguinte:
• Defina uma pasta para processar páginas dinâmicas. Para obter instruções, consulte “Como
especificar onde as páginas dinâmicas podem ser processadas”, na página 144.
Ao ativar o Live Data, uma cópia temporária do documento aberto é enviada à pasta para
processamento. A página resultante será retornada e exibida na visualização do projeto,
enquanto a cópia temporária que estiver no servidor será excluída.
Se a página exibir uma mensagem de erro ao ativar o Live Data, certifique-se de que o prefixo
da URL na caixa de diálogo Definição do site esteja correto. Para obter mais informações, veja
“O prefixo de URL”, na página 145.
• Copie os arquivos relacionados (se houver) para a pasta. Para obter mais informações, veja
“Como copiar arquivos dependentes”, na página 517.
• Crie a página com todos os parâmetros que um usuário normalmente criaria. Para obter
instruções, consulte “Como fornecer uma página com os parâmetros esperados”, na
página 518.
Se tiver dificuldade ao obter a visualização do Live Data para trabalhar, veja “Como solucionar
problemas na visualização do Live Data”, na página 519.
Como copiar arquivos dependentes

Algumas páginas dinâmicas dependem de outros arquivos para um funcionamento adequado. É
necessário carregar todos os arquivos relacionados contendo inclusões do servidor e arquivos
dependentes, como arquivos de imagem e arquivos de classe JSP, na pasta definida para
processamento de páginas dinâmicas (veja “Como especificar onde as páginas dinâmicas podem
ser processadas”, na página 144). O Dreamweaver não copia automaticamente arquivos
dependentes à pasta ao ativar o Live Data na visualização do projeto.
Observação: O Live Data oferece suporte a códigos em inclusões do servidor e arquivos de aplicativo como
global.asa (ASP) e application.cfm (ColdFusion). Certifique-se de carregar estes arquivos para o servidor antes de
ativar o recurso Live Data.

Para copiar os arquivos dependentes para o servidor de aplicativos:
1 Abra o painel Site (Janela > Arquivos do site) e clique no botão Expandir (o último ícone na
barra de ferramentas do painel).
O painel Site se expandirá para o tamanho máximo.
2 Clique no ícone Servidor de aplicativos na barra de ferramentas do painel Site expandida
(segundo ícone da esquerda para a direita).
A pasta da raiz do servidor de aplicativos será exibida abaixo de site remoto.
3 Em Pasta local, selecione os arquivos dependentes.
4 Clique na seta para cima azul na barra de ferramentas para copiar os arquivos ao servidor de
aplicativos ou arraste os arquivos para a pasta apropriada em Site remoto.
Faça isso apenas uma vez para seu site, exceto se adicionar mais arquivos dependentes. Nesse caso,
será necessário copiá-los para a pasta também.
Como fornecer uma página com os parâmetros esperados

Para gerar conteúdo dinâmico, algumas páginas requerem parâmetros do usuário, por exemplo:
uma página requer o número de identificação de um registro para localizar e exibir esse registro.
Sem esses dados, o Dreamweaver não pode gerar o conteúdo dinâmico a ser exibido na
visualização do projeto.
Se uma página estiver esperando parâmetros do usuário, é necessário fornecê-los da seguinte
maneira.
Para fornecer à página os dados esperados do usuário:
1 Na janela do documento, escolha Definições do Live Data, no menu Exibir.

A caixa de diálogo Definições do Live Data é exibida.

518 Capítulo 29
Se o método GET tiver sido especificado na caixa de diálogo Definições do Live Data, será
exibida uma caixa de texto na barra de ferramentas da visualização do projeto. Utilize esta caixa de
texto para digitar outros parâmetros de URL e, em seguida, clique no botão Atualizar (ícone de
seta em círculo) para ver como os parâmetros afetam a página.
Digite cada parâmetro de URL no seguinte formato:
name=value;
Neste formato, name é o nome do parâmetro da URL esperado pela página e value corresponde ao
valor assumido por aquele parâmetro. Para obter mais informações, veja “Como compreender um
parâmetro URL”, na página 534.
Atualização da página
Com o Live Data ativado, clique no botão Atualizar (ícone de seta em círculo) na barra de
ferramentas do documento para atualizar a página após alterar o conteúdo dinâmico.
É possível também selecionar a opção Atualização automática na barra de ferramentas. Com essa
opção ativada, a página é atualizada sempre que o usuário efetuar uma alteração no conteúdo
dinâmico. Se a conexão com o banco de dados for lenta, deixe esta opção em branco enquanto
estiver trabalhando na janela do Live Data.
Como solucionar problemas na visualização do Live Data

Muitos problemas com a visualização do Live Data têm sua origem em valores ausentes ou
incorretos na caixa de diálogo Definição do site (Site > Editar sites).
Verifique a categoria Servidor de aplicativos da caixa de diálogo Definição do site. A caixa Pasta
remota deve especificar uma pasta capaz de processar páginas dinâmicas (veja “Como especificar
onde as páginas dinâmicas podem ser processadas”, na página 144). A seguir um exemplo de uma
pasta remota adequada se o IIS ou PWS for executado no disco rígido:
C:\Inetpub\wwwroot\myapp\
Verifique se a caixa Prefixo da URL especifica uma URL que corresponde (ou “indica”) à pasta
remota. Por exemplo: se o PWS ou IIS for executado no computador local, as seguintes pastas
remotas terão os seguintes prefixos URL:
Pasta remota: Prefixo da URL
C:\Inetpub\wwwroot http://localhost/
C:\Inetpub\wwwroot\myapp\ http://localhost/myapp/
C:\Inetpub\wwwroot\fs\planes http://localhost/fs/planes
Para obter mais informações, veja “O prefixo de URL”, na página 145.

Como trabalhar na visualização do projeto sem o Live Data
Se o Live Data estiver desativado ou se estiver temporariamente desconectado do servidor de
aplicativos, ainda será possível trabalhar com as páginas dinâmicas na visualização do projeto. O
Dreamweaver utiliza alocadores de espaço para representar visualmente o conteúdo dinâmico na
página. Por exemplo: o alocador de espaço para texto dinâmico extraído de um banco de dados
utiliza a sintaxe {RecordsetName.ColumnName}, onde Recordset é o nome do conjunto de registros e
ColumnName é o nome da coluna escolhida do conjunto de registros.
Às vezes, o comprimento dos alocadores de espaço de texto dinâmico distorce o layout da página
na visualização do projeto. Solucione o problema utilizando as chaves vazias como alocadores de
espaço.
Para utilizar as chaves vazias como alocadores de espaço para texto dinâmico:
1 Selecione Editar > Preferências > Elementos invisíveis.

2 No menu pop-up Mostrar o texto dinâmico como, selecione {}.
3 Clique em OK.
Visualização de páginas dinâmicas em um navegador

Os desenvolvedores de aplicativos para a Web freqüentemente depuram suas páginas verificando-
as de forma rápida em um navegador da Web. O Dreamweaver aciona este recurso de trabalho
com o comando Visualizar no navegador (F12). O comando permite exibir rapidamente páginas
dinâmicas em um navegador sem carregá-las em um servidor primeiro.
Dica: É possível também utilizar a visualização do projeto para verificar rapidamente suas páginas enquanto
trabalha nelas. A visualização do projeto exibe uma representação visual e totalmente editável da sua página,
incluindo Live Data. Para obter mais informações, veja “Exibição de Live Data na visualização do projeto”, na
página 516.
Ao utilizar esse comando, o Dreamweaver executa uma cópia temporária da página no servidor da
Web antes de exibi-la no navegador. Em seguida, o Dreamweaver exclui o arquivo temporário do
servidor.
Para visualizar as páginas dinâmicas, é necessário completar a categoria Servidor de aplicativos da
caixa de diálogo Definição do site. Para obter mais informações, veja “Como especificar onde as
páginas dinâmicas podem ser processadas”, na página 144.
A opção Visualizar no navegador não carrega as páginas relacionadas, como as páginas de
resultados ou de detalhes, arquivos dependentes, como os arquivos de imagens, ou inclusões do
servidor. Para carregar um arquivo ausente, selecione Janela > Site para abrir o painel Site,
selecione o arquivo sob Pasta local e clique na seta para cima azul na barra de ferramentas para
copiar o arquivo à pasta do servidor web.
520 Capítulo 29
Restrição de uma informação do banco de dados no
Dreamweaver
Usuários avançados de sistemas de bancos de dados de grande porte, como o Oracle, devem
restringir o número de itens do banco de dados recuperados e exibidos pelo Dreamweaver na fase
de projeto. O banco de dados Oracle pode conter itens que o Dreamweaver não conseguirá
processar na fase de projeto. No Oracle, é possível criar um esquema e utilizá-lo no Dreamweaver
para filtrar itens desnecessários na fase de projeto.
Observação: Não é possível criar um esquema ou catálogo no Microsoft Access.
Outros usuários podem se beneficiar da restrição da quantidade de informação a ser recuperada

pelo Dreamweaver na fase de projeto. Como alguns bancos de dados contêm dezenas ou até
mesmo centenas de tabelas, portanto, é recomendável evitar que o Dreamweaver apresente todas
as tabelas enquanto trabalha. Na caixa de diálogo Conjunto de registros do Dreamweaver, por
exemplo: clique no menu pop-up Tabelas para listar todas as tabelas do banco de dados
especificado. Se o banco de dados contiver dezenas de tabelas, a lista será extensa e de difícil
utilização. Se o banco de dados possuir muitas tabelas, o Dreamweaver poderá levar muito tempo
recuperando-as em determinados sistemas. Um esquema ou catálogo pode restringir o número de
itens de banco de dados que o Dreamweaver obtém na fase de projeto.
É necessário criar um esquema ou catálogo no sistema de banco de dados antes de aplicá-lo no
Dreamweaver. Consulte a documentação do sistema do banco de dados ou o administrador do
sistema.
É impossível aplicar um esquema ou catálogo no Dreamweaver se você estiver desenvolvendo um
aplicativo ColdFusion.
Para aplicar um esquema ou catálogo no Dreamweaver caso esteja desenvolvendo um aplicativo

diferente de um aplicativo ColdFusion:
1 Abra uma página dinâmica no Dreamweaver e, em seguida, abra o painel Bancos de dados
Se a conexão ao banco de dados já existir, será exibida uma lista de conexões no painel. Clique
com o botão direito do mouse (Windows) na conexão e, no menu pop-up, escolha Editar a
conexão. A caixa de diálogo correspondente à conexão é exibida.
Se a conexão não existir, clique no botão de adição (+) para criá-la. Para obter mais
informações, veja “Como efetuar a conexão com um banco de dados”, na página 146.
2 Na caixa de diálogo para a conexão, clique em Avançado.
A caixa de diálogo Restringir é exibida.
3 Especifique seu esquema ou catálogo e clique em OK.

522 Capítulo 29
CAPÍTULO 30
Fluxo de trabalho do Dreamweaver para
projetos de páginas dinâmicas
Uma das principais vantagens do Dreamweaver MX é a capacidade de criar sites da web

dinâmicos sem que para isso seja necessário ter experiência em linguagens de programação. As
ferramentas visuais de Dreamweaver permitem desenvolver sites da web dinâmicos sem a
necessidade de codificar manualmente a complexa lógica de programação exigida para criar um
site com exibição de conteúdo dinâmico armazenado em um banco de dados. Com o
Dreamweaver, é possível criar sites da web dinâmicos utilizando qualquer uma das diversas
linguagens de programação para web e tecnologias de servidor conhecidas. Entre elas estão
Macromedia ColdFusion, ASP.NET, Microsoft Active Server Pages (ASP), JavaServer Pages (JSP)
e PHP.
Este capítulo descreve as principais etapas que devem ser seguidas pelo usuário para projetar e
criar com êxito um site da web dinâmico. Ao final de cada seção, são apresentadas referências aos
procedimentos específicos necessários para desenvolver uma página dinâmica. As cinco principais
etapas do desenvolvimento de uma página da web dinâmica são as seguintes:
• Como projetar a página
• Como criar uma fonte de conteúdo dinâmico
• Como adicionar conteúdo dinâmico a uma página da web
• Como aprimorar a funcionalidade de uma página dinâmica
• Como testar e depurar a página
523
Como projetar a página
Uma das principais etapas da criação de qualquer site da web, seja estático ou dinâmico, é o projeto
visual da página. Ao adicionar elementos dinâmicos a uma página da web, o projeto da página torna-
se crucial para seu aproveitamento. Deve-se atentar para a forma como os usuários vão interagir com
páginas individuais e com o site da Web como um todo.
Um método conhecido para se incorporar conteúdo dinâmico a uma página da web é criar uma
tabela para apresentar o conteúdo e importar o conteúdo dinâmico para uma ou mais células da
tabela. Com esse método, é possível apresentar informações de diversos tipos em um formato
estruturado.
Para obter informações sobre como projetar páginas, consulte os capítulos a seguir:
• Capítulo 17, “Definição do layout de páginas na visualização de layout”, na página 257
• Capítulo 16, “Apresentação do conteúdo com tabelas”, na página 241
• Capítulo 19, “Como inserir e formatar texto”, na página 291
• Capítulo 20, “Como inserir imagens”, na página 319
Como criar uma fonte de conteúdo dinâmico

Os sites da web dinâmicos exigem uma fonte de conteúdo da qual extraem os dados a serem
exibidos em uma página da web. No Dreamweaver, essas fontes de dados podem ser bancos de
dados, variáveis de solicitação, variáveis de servidor, variáveis de formulário ou procedimentos
armazenados.
Para poder utilizar essas fontes de conteúdo em uma página da web, é necessário:
• Crie uma conexão com a fonte de conteúdo dinâmico (um banco de dados, por exemplo) e
com o servidor de aplicativos que está processando a página
• Especifique as informações contidas no banco de dados que deverão ser exibidas ou as variáveis
a serem incluídas na página
• Utilize a interface do tipo apontar-e-clicar do Dreamweaver para selecionar e inserir elementos
de conteúdo dinâmico na página selecionada
O Dreamweaver também permite conectar-se de modo fácil a um banco de dados e criar um
conjunto de registros do qual será extraído o conteúdo dinâmico. Um conjunto de registros é o
resultado de uma consulta ao banco de dados. Ele extrai as informações específicas solicitadas pelo
usuário e permite exibir essas informações em uma página específica. O conjunto de registros deve
ser definido com base nas informações contidas no banco de dados e no conteúdo que se deseja
exibir.
Diferentes fornecedores de tecnologia podem utilizar diferentes terminologias para fazer referência
a um conjunto de registros. Nas tecnologias ASP e ColdFusion, um conjunto de registros é
definido como uma consulta. Em JSP, um conjunto de registros é denominado conjunto de
resultados. ASP.NET refere-se a um conjunto de registros como DataSet. Se você estiver
utilizando outras fontes de dados, como entradas do usuário ou variáveis de servidor, o nome da
fonte de dados definido no Dreamweaver é igual ao nome da própria fonte de dados.
524 Capítulo 30
Para utilizar uma fonte de conteúdo no Dreamweaver, utilize o painel Ligações para criar a fonte
de dados. O painel Ligações mostrado a seguir permite criar fontes de dados para bancos de dados
e diferentes tipos de variáveis. Ao criar uma fonte de dados, ela é armazenada no painel Ligações,
onde pode ser selecionada e inserida na página atual.
Para criar um conjunto de registros no Dreamweaver, é necessário utilizar a caixa de diálogo

Conjunto de registros. É possível iniciar a caixa de diálogo Conjunto de registros no painel
Servidor da barra Inserir ou no painel Ligações. A caixa de diálogo simples Conjunto de registros
permite selecionar uma conexão de banco de dados existente e criar uma consulta de banco de
dados selecionando-se a(s) tabela(s) cujos dados serão incluídos no conjunto de registros. Pode-se
até mesmo utilizar a seção Filtro da caixa de diálogo para criar critérios simples de pesquisa e
retorno para a consulta. É possível testar a consulta na caixa de diálogo Conjunto de registros e
fazer quaisquer ajustes necessários antes de adicioná-la ao painel Ligações.
Uma vez estabelecida a conexão com o banco de dados e após a definição de um conjunto de
registros, o conjunto de registros é exibido no painel Ligações. Nesse painel, é possível importar o
conjunto de registros para qualquer página da web do site definido. A ilustração abaixo mostra o
painel Ligações com o conjunto de registros referente a um banco de dados de funcionários
aberto. É possível inserir em uma página da web qualquer um dos valores mostrados, selecione o
item e clique no botão Inserir na parte inferior do painel. O item selecionado é inserido no
alocador de espaço especificado na página.
Fluxo de trabalho do Dreamweaver para projetos de páginas dinâmicas 525

Para obter informações sobre bancos de dados e os procedimentos necessários para criar uma
conexão com o banco de dados, consulte os seguintes capítulos:
• Capítulo 32, “Definição das fontes de conteúdo dinâmico”, na página 543
• Anexo A, “Guia do iniciante em bancos de dados”, na página 705
• Anexo C, “Como configurar DSNs no Windows”, na página 727
Como adicionar conteúdo dinâmico a uma página da web

Após definir um conjunto de registros ou outra fonte de dados e adicioná-los ao painel Ligações, é
possível inserir o conteúdo dinâmico representado pelo conjunto de registros na página da web. A
interface baseada em menus do Dreamweaver torna a adição de elementos de conteúdo dinâmico
tão fácil quanto selecionar uma fonte de conteúdo dinâmico no painel Ligações e inseri-la em um
objeto de texto, imagem ou formulário apropriado da página atual.
Ao inserir um elemento de conteúdo dinâmico ou outro comportamento de servidor em uma
página, o Dreamweaver insere um script de servidor no código-fonte da página. Esse script instrui
o servidor a recuperar dados da fonte de dados definida e processá-los na página da web.
Para inserir conteúdo dinâmico em uma página da web, é possível:
• Colocá-lo no ponto de inserção especificado pelo cursor na visualização do código ou do
projeto.
• Substitua uma seqüência de texto ou outro alocador de espaço.
• Inseri-lo em um atributo HTML. Por exemplo: o conteúdo dinâmico pode definir o atributo
src de uma imagem ou o atributo value de um campo de formulário.
Para conhecer os procedimentos detalhados para adicionar conteúdo dinâmico a uma página,
consulte:
• Capítulo 33, “Como adicionar conteúdo dinâmico às páginas da Web”, na página 561
• Capítulo 38, “Criação de formulários interativos”, na página 621
Como aprimorar a funcionalidade de uma página dinâmica

Além de adicionar conteúdo dinâmico, o Dreamweaver permite incorporar de modo fácil lógicas
complexas de aplicativos às páginas da web. Isso pode ser feito utilizando-se Comportamentos de
servidor. Comportamentos de servidor são partes predefinidas do código do servidor que
adicionam lógica de aplicativos às páginas da web, proporcionando maior interação e
funcionalidade. Os comportamentos de servidor do Dreamweaver permitem adicionar a lógica de
aplicativos a um site da web sem a necessidade de escrever o código. Os comportamentos de
servidor fornecidos com Dreamweaver MX oferecem suporte a tipos de documentos ColdFusion,
ASP, ASP.NET, JSP e PHP.
Os comportamentos de servidor são gravados e testados para serem rápidos, seguros e confiáveis.
Os comportamentos de servidor internos do Dreamweaver foram criados para oferecer suporte a
páginas da web em várias plataformas para todos os navegadores.
526 Capítulo 30
Como adicionar comportamentos de servidor a uma página
Para adicionar comportamentos de servidor a uma página, selecione-os na barra Inserir ou no
painel Comportamentos de servidor. Para utilizar a barra Inserir, clique na guia Aplicativo e no
botão de um comportamento de servidor. Para utilizar o painel Comportamentos de servidor,
selecione Janela > Comportamentos de servidor, clique no botão de adição (+) no painel e escolha
um comportamento de servidor no menu pop-up. A ilustração abaixo mostra os botões de
Comportamentos do servidor disponíveis na barra Inserir.
O Dreamweaver oferece uma interface do tipo apontar-e-clicar que faz com que a aplicação de
conteúdo dinâmico e de comportamentos complexos seja tão simples quanto inserir elementos
textuais e de design. Os seguintes comportamentos de servidor estão disponíveis:
• Defina um conjunto de registros a partir de um banco de dados existente. O conjunto de
registros definido é armazenado no painel Ligações.
• Exibir vários registros em uma única página. Selecione uma tabela inteira ou células ou linhas
individuais que tenham conteúdo dinâmico e especifique o número de registros a serem exibidos
em cada visualização de página.
• Crie e inserir uma tabela dinâmica em uma página e associar a tabela a um conjunto de
registros. Posteriormente, pode-se modificar a aparência das tabelas e a região repetida com o
inspetor de propriedades e o Comportamento de servidor da região repetida, respectivamente.
• Inserir um objeto de texto dinâmico em uma página. O objeto de texto inserido é um item de
um conjunto de registros predefinido, ao qual é possível aplicar qualquer um dos formatos de
dados de Dreamweaver MX.
• Crie controles de status e de navegação de registro, páginas-mestras/detalhes e formulários para
atualizar informações contidas em um banco de dados.
• Exibir mais de um registro a partir de um registro de banco de dados.
• Crie links de navegação do conjunto de registros que permitam ao usuários visualizar os
próximos registros ou os anteriores em um registro de banco de dados.
• Adicionar um contador de registros para ajudar os usuários a controlar a quantidade de
registros que foram retornados e a respectiva localização no resultado retornado.
Também é possível estender os comportamentos de servidor do Dreamweaver criando
comportamentos próprios ou instalando comportamentos de servidor desenvolvidos por outros
fabricantes.
Para obter mais informações sobre como aprimorar a funcionalidade de páginas da web utilizando
comportamentos de servidor, consulte os seguintes capítulos:
• Capítulo 34, “Como exibir os registros de bancos de dados”, na página 569
• Capítulo 40, “Como criar páginas que realizam buscas em bancos de dados”, na página 655
• Capítulo 41, “Como criar páginas para modificar bancos de dados”, na página 669
• Capítulo 42, “Como criar páginas que restringem o acesso ao site”, na página 691
• Capítulo 37, “Como adicionar comportamentos de servidor personalizados”, na página 603

Como testar e depurar a página
Antes de disponibilizar uma página dinâmica (ou um site inteiro) na web, é necessário testar sua
funcionalidade. Capítulo 28, “Como testar um site”, na página 499 contém instruções que
ajudam a testar a usabilidade de um site da web e sua compatibilidade com diversas plataformas.
Para obter mais informações sobre como projetar sites da web para portadores de deficiência
auditiva, visual ou outras, consulte o Capítulo 23, “Dreamweaver e Acessibilidade”, na
página 359. É necessário familiarizar-se com as questões descritas neste capítulo e levar em
consideração o modo como a funcionalidade dos aplicativos pode afetar os portadores de
deficiência.
Teste do conteúdo dinâmico

O Dreamweaver permite visualizar e editar o conteúdo dinâmico por meio da janela do Live
Data.
Observação: Os links não funcionam na janela do Live Data. Para testá-los, utilize o recurso Visualizar no
navegador de Dreamweaver (veja “Como visualizar as páginas nos navegadores”, na página 502).
Enquanto o conteúdo dinâmico estiver sendo exibido, é possível executar as seguintes tarefas:
• Ajuste o layout da página utilizando as ferramentas de projeto de página do Dreamweaver
• Adicionar, editar ou excluir o conteúdo dinâmico
• Adicionar, editar ou excluir comportamentos de servidor
Para obter este efeito, o Dreamweaver executa a página dinâmica no servidor antes de exibi-la na
janela do Live Data. Sempre que o usuário alterna para a janela do Live Data, uma cópia
temporária do documento aberto é enviada para o servidor de aplicativos para fins de
processamento. A página resultante é retornada e exibida na janela do Live Data e a cópia
temporária que está no servidor é excluída.
Para alternar entre a janela do documento e a do Live Data, selecione a opção Live Data do menu
Exibir. Se uma página estiver esperando dados do usuário, o número de identificação de um
registro selecionado em uma página mestra, por exemplo: o próprio usuário poderá fornecer esses
dados na caixa de diálogo Definições do Live Data.
Para digitar parâmetros do Live Data:
1 Faça as alterações necessárias na página.

2 Se a página estiver esperando parâmetros da URL de um formulário HTML que utiliza o
método GET, digite os pares nome/valor na caixa de texto exibida na barra de ferramentas e
clique no botão Atualizar (o ícone em forma de-seta circular).
Digite os dados de teste no seguinte formato:
name=value;
Neste formato, name é o nome do parâmetro da URL esperado pela página e value corresponde
ao valor assumido por esse parâmetro.
Também é possível definir os pares nome/valor na caixa de diálogo Definições do Live Data
(Exibir > Definições do Live Data) e salvá-los com a página.
3 Para atualizar a página, clique no botão Atualizar.
528 Capítulo 30
Edição do conteúdo dinâmico de uma página
É possível modificar ou remover o conteúdo dinâmico de uma página alterando-se o
comportamento de servidor que fornece o conteúdo ou excluindo-se o comportamento. Por
exemplo: é possível editar um comportamento de servidor do conjunto de registros para que
retorne mais registros à página.
O conteúdo dinâmico de uma página é listado no painel Comportamentos de servidor. Por
exemplo: quando um conjunto de registros é adicionado à página, o painel Comportamentos de
servidor lista o conjunto da seguinte forma:
Recordset(myRecordset)
Se outro conjunto de registros for adicionado à página, o painel Comportamentos de servidor
listará ambos os conjuntos de registros da seguinte forma:
Recordset(mySecondRecordset)
Para editar um comportamento de servidor que fornece conteúdo dinâmico:
1 Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor).

2 Clique no botão de adição (+) para exibir os comportamentos de servidor e, no painel
Comportamentos de servidor, clique duas vezes no comportamento de servidor desejado.
É exibida a caixa de diálogo que foi utilizada para definir a fonte de dados original.
3 Faça as alterações na caixa de diálogo e clique em OK.
Também é possível utilizar o inspetor de propriedades para editar os conjuntos de registros da
página. Abra o inspetor de propriedades (Janela > Propriedades) e, em seguida, selecione o
conjunto de registros no painel Comportamentos de servidor (Janela > Comportamentos de
servidor). Este é o inspetor de propriedades de um conjunto de registros:
Como excluir o conteúdo dinâmico

Após adicionar o conteúdo dinâmico a uma página, é possível exclui-lo selecionando-o na página
e pressionando Excluir. Também é possível exclui-lo através da seleção deste no painel
Comportamentos de servidor e, em seguida, clicando o botão com o sinal de subtração (-).
Observação: Essa operação remove o script do servidor na página que recupera o conteúdo dinâmico do banco de
dados. Ela não exclui os dados do banco de dados.

530 Capítulo 30
CAPÍTULO 31
Como armazenar e recuperar dados para a
página
Os aplicativos para a Web e sites da web dinâmicos requerem uma fonte de conteúdo da qual se
recuperam dados. Os dados e as fontes de dados podem ter diversos formatos. Geralmente, os
dados consistem de informações textuais ou numéricas retornadas para uma página da Web e
exibidas para o usuário em um determinado formato.
• “Uso de um banco de dados para armazenar conteúdo”, na página 531
• “Coleta de dados enviados por usuários”, na página 532
• “Acesso a dados armazenados em variáveis de sessão”, na página 536
Uso de um banco de dados para armazenar conteúdo

O uso de um banco de dados para armazenar conteúdo permite separar o projeto do site da Web
do conteúdo a ser exibido aos usuários do site. Em vez de criar arquivos HTML individuais para
cada página, pode-se apenas escrever uma página (ou modelo) para os diferentes tipos de
informações a serem apresentadas. Utilizando um banco de dados, é possível fornecer um novo
conteúdo a um site da Web bastando para isso carregar o conteúdo em um banco de dados e, em
seguida, recuperar esse conteúdo de modo dinâmico em resposta à solicitação de um usuário.
Uma das principais vantagens de armazenar informações de conteúdo em um banco de dados é a
capacidade de atualizar informações em uma única fonte e, em seguida, propagar essa alteração
por todo o site da Web, sem a necessidade de pesquisar em todas as páginas que podem conter
essas informações e editar cada página manualmente.
Os bancos de dados têm vários formatos, dependendo do volume e da complexidade dos dados
que devem armazenar. O banco de dados geralmente instalado em computadores com o sistema
Windows é o Microsoft Access. Para iniciantes em bancos de dados, o Access oferece uma
interface fácil de usar que permite trabalhar com tabelas de banco de dados. Embora seja possível
utilizar o Access como fonte de dados para a maioria dos aplicativos para sites da web, está
limitado a arquivos de 2 GB e pode ser utilizado por 255 usuários simultâneos, no máximo. Por
esse motivo, o Access é uma opção mais adequada para o desenvolvimento de sites da web e
grupos de trabalho corporativos. No entanto, se há previsão de que o site será acessado por um
grande número de usuários, deve-se planejar o uso de um banco de dados projetado para oferecer
suporte à futura base de usuários dos sites.
531
Para os sites da Web que exigem maior grau de flexibilidade na criação de um modelo de dados e
a capacidade de oferecer suporte a grandes comunidades de usuários simultâneos, os bancos de
dados relacionais baseados em servidor (normalmente conhecidos como RDBMS) são utilizados
com freqüência. Entre os bancos de dados relacionais conhecidos utilizados para armazenar o
conteúdo de aplicativos baseados na-Web e sites dinâmicos estão MySQL, Microsoft SQL Server
e Oracle.
É possível utilizar o Dreamweaver na criação de formulários da web para inserir, atualizar ou
excluir dados do banco de dados, independentemente do banco de dados escolhido para oferecer
suporte ao site da web
Para obter mais detalhes sobre bancos de dados, consulte o Anexo A, “Guia do iniciante em
bancos de dados”, na página 705.
Acesso a dados armazenados em um banco de dados

As páginas da Web não podem acessar de forma direta os dados armazenados em um banco de
dados. Em vez disso, elas interagem com um conjunto de registros. Um conjunto de registros é
um subconjunto das informações (ou registros) extraídas do banco de dados. Esse subconjunto de
informações é extraído utilizando uma consulta ao banco de dados. Uma consulta consiste em
uma instrução de pesquisa criada para localizar e extrair informações específicas de um banco de
dados. O Dreamweaver MX utiliza a linguagem estruturada de consultas, ou Structured Query
Language (SQL) para criar as consultas. Embora não seja necessário ser conhecedor de SQL para
criar consultas simples com o Dreamweaver, algum conhecimento básico dessa linguagem fácil de
ser aprendida permite criar consultas mais avançadas e, desse modo, proporciona maior
flexibilidade para desenvolver páginas dinâmicas. Para aprender os conceitos básicos de SQL,
consulte o Anexo B, “Manual básico de SQL”, na página 719.
Uma consulta SQL pode produzir um conjunto de registros que inclui apenas determinadas
colunas, somente certos registros ou uma combinação de ambos. Um conjunto de registros
também pode conter todos os registros e colunas de uma tabela de banco de dados. No entanto,
como os aplicativos raramente precisam utilizar todos os dados de um banco de dados, deve-se
procurar reduzir ao máximo os conjuntos de registros. Como o servidor web armazena o conjunto
de registros temporariamente na memória, o uso de um conjunto de registros menor consome
menos memória e pode melhorar potencialmente o desempenho do servidor.
Coleta de dados enviados por usuários

É possível utilizar páginas da web para coletar informações de usuários, armazená-las na memória
do servidor e usá-las para criar uma resposta dinâmica com base na entrada do usuário. As
ferramentas mais conhecidas para a coleta de informações são os formulários HTML e as seleções
de link de hipertexto.
Os formulários HTML permitem coletar informações de usuários e armazená-las na memória do
servidor. Um formulário HTML pode enviar as informações como parâmetros de formulário ou
parâmetros da URL. Se o atributo de método do formulário for definido como POST, o
navegador incluirá os valores do formulário no corpo da mensagem enviada ao servidor. Se o
atributo de método do formulário for definido como GET, o navegador anexará os valores do
formulário à URL especificada no atributo de ação e enviará as informações ao servidor.
532 Capítulo 31
Os links de hipertexto também permitem coletar informações de usuários e armazená-las na
memória do servidor. Para especificar um valor ou valores a serem enviados quando um usuário
clicar em um link (uma preferência, por exemplo), é necessário anexar o valor à URL especificada
na tag de ancoragem. Quando um usuário clica no link, o navegador envia ao servidor a URL e o
valor anexado.
Esta seção descreve como criar parâmetros de formulário e URL para uso em aplicativos da web.
Os seguintes tópicos são discutidos nesta seção:
• “Como compreender um parâmetro de formulário”, na página 533
• “Como compreender um parâmetro URL”, na página 534
• “Criação de um parâmetro da URL utilizando links HTML”, na página 536
• “Recuperação de formulário e parâmetros URL”, na página 536
Como compreender um parâmetro de formulário

Os parâmetros de formulário são enviados ao servidor por meio de um formulário HTML
utilizando o método POST ou GET. Se o método POST for utilizado, os parâmetros serão enviados
com o corpo da mensagem. De outro modo, o método GET anexa os parâmetros à URL solicitada.
É possível utilizar o Dreamweaver para criar formulários HTML que enviem parâmetros de
formulário ao servidor de modo rápido. Para obter instruções, consulte o Capítulo 38, “Criação
de formulários interativos”, na página 621. Certifique-se de observar o método escolhido para
transmitir informações do navegador para o servidor. O exemplo a seguir ilustra o inspetor de
propriedades de um formulário com o método do formulário definido como POST:
Os parâmetros do formulário assumem os nomes dos objetos de formulário correspondentes. Por

exemplo: se o formulário contém um campo de texto denominado txtLastName, o seguinte
parâmetro de formulário é enviado ao servidor quando o usuário clica no botão Enviar:
txtLastName=enteredvalue
Como armazenar e recuperar dados para a página 533

Nos casos em que um aplicativo para a Web espera um valor de parâmetro preciso (quando ele
executa uma ação com base em uma dentre várias opções, por exemplo), utilize um objeto de
formulário botão de opção, caixa de seleção ou lista/menu para controlar os possíveis valores a
serem enviados pelo usuário. Isso impede que os usuários digitem informações incorretas e
provoquem um erro de aplicativo. O exemplo a seguir ilustra um formulário de menu pop-up
com três opções:
Cada opção de menu corresponde a um valor inserido no código que é enviado ao servidor como
um parâmetro de formulário. A caixa de diálogo Valores da lista, mostrada a seguir, faz a
correspondência de cada item da lista a um valor (Adicionar, Atualizar ou Excluir):
Como compreender um parâmetro URL

Um parâmetro da URL é um par nome/valor anexado a uma URL. O parâmetro começa com
um ponto de interrogação (?) e assume o formato name=value. Quando há mais de um parâmetro
da URL, cada parâmetro é separado por um 'e' comercial (&). O exemplo a seguir mostra um
parâmetro da URL com dois pares nome/valor:
http://server/path/document?name1=value1&name2=value2
Os parâmetros da URL devem ser utilizados para passar as informações fornecidas pelo usuário do
navegador para o servidor. Quando um servidor recebe uma solicitação e os parâmetros são
anexados à URL da solicitação, o servidor coloca os parâmetros à disposição da página solicitada
antes de disponibilizar essa página ao navegador.
534 Capítulo 31
Neste exemplo, imagine que o aplicativo é a vitrine de uma loja baseada na web. Como o objetivo
é atingir o maior número possível de pessoas, os programadores do site o criaram de forma a
aceitar moedas estrangeiras. Quando os usuários efetuam logon no site, podem selecionar a
moeda em que desejam ver os preços dos itens disponíveis.
1 O navegador solicita a página report.cfm do servidor. A solicitação inclui o parâmetro da URL
Currency=“euro”. A variável Currency=“euro” especifica que todas as quantias monetárias
recuperadas sejam exibidas com a moeda euro da União Européia.
2 O servidor armazena temporariamente o parâmetro da URL na memória.
3 A página report.cfm recupera e utiliza o parâmetro para recuperar o custo dos itens em euros. Essas
quantias monetárias podem ser armazenadas em uma tabela de banco de dados de diferentes
moedas ou convertidas de uma única moeda associada a cada item para qualquer moeda aceita pelo
aplicativo.
4 O servidor envia a página report.cfm ao navegador e exibe o valor dos itens na moeda solicitada.
Quando esse usuário termina a sessão, o servidor destrói o valor do parâmetro da URL, liberando
sua memória para que armazene as solicitações de novos usuários que efetuarem logon no site.
SERVIDOR DA WEB
http:/www.mysite.com/
report.cfm?Currency=" "
Currency=" "
Navegador da Web
<HTML>
</HTML>
report.cfm
Os parâmetros da URL são criados quando o método GET do protocolo HTTP é usado junto com
um formulário HTML. O método GET especifica que o valor do parâmetro seja anexado à
solicitação de URL quando o formulário é enviado.
Os usos comuns dos parâmetros da URL incluem a personalização de sites da Web com base nas
preferências de um usuário. Por exemplo: um parâmetro da URL formado por um nome de
usuário e uma senha pode ser utilizado para autenticar um usuário, exibindo apenas as
informações às quais o usuário tem direito. Os exemplos mais conhecidos são os sites financeiros
que exibem preços de ações individuais com base nos símbolos do mercado de ações
anteriormente escolhidos pelo usuário. Os programadores de aplicativos para a Web geralmente
utilizam parâmetros da URL para repassar valores às variáveis nos aplicativos. É possível, por
exemplo: transferir termos de busca para variáveis SQL a um aplicativo da Web para que este gere
os resultados da pesquisa.

Criação de um parâmetro da URL utilizando links HTML
Para poder criar parâmetros da URL em um link HTML, é necessário utilizar o atributo href da
tag de ancoragem HTML. É possível digitar os parâmetros da URL diretamente no atributo
alternando para a visualização de código (Exibir > Código). No exemplo a seguir, três links criam
um único parâmetro da URL (action) com três possíveis valores (Add, Update e Delete).
Dependendo do link clicado pelo usuário, um valor de parâmetro diferente é enviado ao servidor
e a ação solicitada é executada:
<a href=”http://www.mysite.com/myfiles/
index.asp?action=Add”>Add a record</a>
index.asp?action=Update”>Update a record</a>
index.asp?action=Delete”>Delete a record</a>
É possível utilizar o inspetor de propriedades do Dreamweaver para criar os mesmos parâmetros
da URL selecionando o link e escolhendo Janela > Propriedades. No exemplo a seguir, o
parâmetro da URL foi digitado no inspetor de propriedades:
Recuperação de formulário e parâmetros URL

Após a criação de um parâmetro de formulário ou URL, o Dreamweaver pode recuperar o valor e
utilizá-lo em um aplicativo da web. Para obter mais informações, veja “Definição dos parâmetros
da URL”, na página 549.
Após a definição do parâmetro de formulário ou URL no Dreamweaver, é possível inserir o valor
do parâmetro em uma página. Para obter mais informações, consulte o Capítulo 33, “Como
adicionar conteúdo dinâmico às páginas da Web”, na página 561.
Acesso a dados armazenados em variáveis de sessão

As variáveis de sessão oferecem um mecanismo por meio do qual as informações do usuário podem
ser armazenadas e acessadas para uso pelos aplicativos da web. Normalmente as variáveis de sessão
armazenam informações (geralmente, parâmetros de formulário ou URL enviados por usuários) e
tornam essas informações disponíveis para todas as páginas dos aplicativos durante a visita do
usuário. Por exemplo: quando os usuários efetuam logon em um portal da web que fornece acesso
a e-mail, cotações de ações, previsão do tempo e noticiário, o aplicativo da web armazena as
informações de logon em uma variável de sessão que identifica o usuário em todas as páginas do
site. Isto permite que o usuário visualize somente os tipos de conteúdo que ele selecionou ao
navegar pelo site. As variáveis de sessão também podem fornecer um mecanismo de segurança na
forma de tempo limite, que termina a sessão do usuário se a conta permanecer inativa por um
longo período de tempo. Isto também libera a memória do servidor e os recursos de processamento
quando os usuários se esquecem de efetuar logoff de um site da Web.
As variáveis de sessão são normalmente utilizadas para armazenar as preferências de exibição do
usuário, respostas a questionários de várias partes, itens selecionados para compra nos aplicativos
que funcionam como “carrinho de compras” e contadores de pontos obtidos em jogos on-line.
536 Capítulo 31
Esta seção descreve os seguintes tópicos sobre variáveis de sessão:
• “Como compreender uma variável de sessão”, na página 537
• “Coleta de informações a serem armazenadas em variáveis de sessão”, na página 538
• “Armazenar informações em uma variável de sessão”, na página 539
• “Exemplo de informações armazenadas em variáveis de sessão”, na página 540
• “Recuperação de dados de uma variável de sessão”, na página 541
Como compreender uma variável de sessão

Os servidores Web (ou melhor, protocolos HTTP) não contêm informações de status, ou seja,
não mantêm um registro dos navegadores que se conectam a eles ou das solicitações de páginas
individuais feitas pelos usuários. Sempre que um navegador da web recebe uma solicitação de uma
página da web e responde a ela disponibilizando a página correspondente para o navegador do
usuário, o servidor da web “se esquece” do navegador que fez a solicitação e da página da web que
foi enviada. Posteriormente, quando o mesmo usuário solicita uma página relacionada, o servidor
da web envia a página sem se lembrar da última página que enviou para esse usuário.
Apesar de a natureza do HTTP torná-lo um protocolo simples e fácil de implementar, ela dificulta
as aplicações mais avançadas da web, como a geração de páginas personalizadas. Por exemplo: para
personalizar o conteúdo do site de um usuário individual, primeiro é necessário identificar o
usuário. Para tanto, a maioria dos sites da web utiliza alguma forma de logon com nome de
usuário/senha. Se forem exibidas várias páginas personalizadas, é necessário utilizar um
mecanismo que mantenha um registro dos usuários que estão conectados, pois a maioria dos
usuários não aceitariam fornecer seu nome de usuário ou senha em cada página do site.
Para possibilitar a criação de aplicativos para a Web complexos e o armazenamento de dados
fornecidos pelo usuário em todas as páginas de um site, a maioria das tecnologias de servidores de
aplicativos incluem suporte a gerenciamento de sessão. O gerenciamento de sessão possibilita que
os aplicativos da web mantenham o estado em várias solicitações HTTP, permitindo que as
solicitações de um usuário por páginas da web durante um determinado período sejam exibidas
como parte da mesma sessão interativa.
As variáveis de sessão armazenam informações durante a sessão do usuário. A sessão do usuário
tem início ao abrir a página pela primeira vez no aplicativo. A sessão termina quando o usuário
não abre outra página no aplicativo durante um determinado período ou quando encerra
explicitamente a sessão (normalmente, clicando em um link de “logoff ”). Enquanto estiver ativa,
a sessão é específica de um usuário individual e cada usuário tem uma sessão separada.
Utilize as variáveis de sessão para armazenar informações que todas as páginas de um aplicativo da
web podem acessar. As informações podem ser tão diversas quanto o nome do usuário ou
tamanho de fonte preferido ou um sinalizador indicando se o usuário foi bem-sucedido ou não ao
efetuar logon. Outro uso comum das variáveis de sessão é manter um contador, como o número
de perguntas que o usuário respondeu corretamente em um teste de conhecimentos on-line ou os
produtos que ele selecionou até aquele momento em um catálogo on-line.
Observe que as variáveis de sessão funcionam somente se o navegador do usuário estiver
configurado para aceitar cookies. O servidor cria um número de identificação da sessão, que
identifica o usuário de modo exclusivo quando a sessão é iniciada e depois envia um cookie
contendo esse número para o navegador do usuário. Quando o usuário solicita outra página no
servidor, o servidor lê o cookie no navegador para identificar o usuário e recuperar as variáveis de
sessão do usuário armazenadas na memória do servidor.

Coleta de informações a serem armazenadas em variáveis de sessão
Antes de criar uma variável de sessão, é preciso obter as informações a serem armazenadas e depois
enviá-las ao servidor para que sejam armazenadas. Esta seção descreve como coletar e enviar
informações ao servidor usando formulários HTML ou links de hipertexto contendo parâmetros
da URL. Também é possível obter informações nos cookies armazenados no computador do
usuário, nos cabeçalhos HTTP enviados pelo navegador do usuário junto com uma solicitação de
página ou em um banco de dados.
Armazenar um parâmetro da URL em uma variável de sessão

No exemplo a seguir, um catálogo de produtos usa parâmetros da URL inseridos no código que
foram criados através de um link de hipertexto para enviar informações sobre produtos de volta ao
servidor para que sejam armazenadas em uma variável de sessão. Quando um usuário clica no link
“Adicionar ao carro de compras”, a identificação do produto (neste exemplo, 3202) é armazenada
em uma variável de sessão enquanto o usuário continua fazendo compras. Quando o usuário
prossegue até a página de verificação, o número do produto armazenado na variável de sessão é
recuperado.
538 Capítulo 31
Armazenar parâmetros de formulário em uma variável de sessão
Neste exemplo, uma página de teste de conhecimentos baseada em formulário envia as informações
selecionadas de volta ao servidor, onde a página marks.cfm registra a pontuação obtida no teste de
conhecimentos e armazena o número de respostas corretas em uma variável de sessão.
Armazenar informações em uma variável de sessão

Uma vez que as informações são enviadas ao servidor, armazenar as informações nas variáveis de
sessão adicionando o código apropriado para o modelo do servidor à página especificada pelo
parâmetro da URL ou formulário. Conhecida como página de “destino”, esta página é
especificada no atributo action do formulário HTML ou no atributo href do link de hipertexto
na página inicial.
A sintaxe HTML de cada um aparece deste modo:
<form action="destination.html" method="get" name="myform"> </form>
<param name="href"value="destination.html">
Tanto a tecnologia de servidor utilizada quanto o método usado para obter as informações
determinam o código empregado para armazenar as informações em uma variável de sessão. A
sintaxe básica de cada tecnologia de servidor é descrita da seguinte maneira:
ColdFusion
<CFSET session.variable_name = value>
ASP e ASP.NET
<% Session("variable_name") = value %>
A expressão value é geralmente uma expressão do servidor, como Request.Form(“lastname”). Por
exemplo: se um parâmetro URL denominado product (ou um formulário HTML com o método
get e um campo de texto chamado product) for utilizado para coletar informações, as seguintes
instruções armazenarão as informações em uma variável de sessão denominada prodID:

ColdFusion
<CFSET session.prodID = url.product>
ASP e ASP.NET
<% Session("prodID") = Request.QueryString("product") %>
Se for utilizado um formulário HTML com o método post e um campo de texto denominado
txtProduct para coletar as informações, as seguintes instruções armazenarão as informações na
variável de sessão:
ColdFusion
<CFSET session.prodID = form.txtProduct>
ASP e ASP.NET
<% Session("prodID") = Request.Form("txtProduct") %>
Exemplo de informações armazenadas em variáveis de sessão

Você está trabalhando em um site cuja maioria dos usuários são pessoas idosas. No Dreamweaver,
é possível adicionar dois links à página inicial que permitam aos usuário personalizar o tamanho
do texto do site. Para visualizar um texto com letras maiores que facilitem a leitura, o usuário clica
em um link e, para ler o texto no tamanho usual, clica em outro link:
Cada link tem um parâmetro da URL denominado fontsize que envia as preferências de texto do
usuário ao servidor, conforme ilustrado neste exemplo do Macromedia ColdFusion:
<a href="resort.cfm?fontsize=large">Larger Text</a><br>
<a href="resort.cfm?fontsize=small">Normal Text</a>
Você é quem decide se deve armazenar a preferência de texto do usuário em uma variável de sessão
e utilizá-la para definir o tamanho da fonte em cada página solicitada pelo usuário.
Próximo do início da página de destino, especifique o código a seguir para criar uma sessão
denominada font_pref que armazena a preferência do usuário quanto ao tamanho de fonte.
ColdFusion
<CFSET session.font_pref = url.fontsize>
ASP e ASP.NET
<% Session("font_pref") = Request.QueryString("fontsize") %>
540 Capítulo 31
Quando o usuário clica no link de hipertexto, a página envia a preferência de texto do usuário em
um parâmetro da URL para a página de destino. O código da página de destino armazena o
parâmetro da URL na variável de sessão font_pref. Durante a sessão do usuário, todas as páginas
do aplicativo recuperam esse valor e exibem o tamanho de fonte selecionado.
Recuperação de dados de uma variável de sessão

Depois que um valor é armazenado em uma variável de sessão, é possível utilizar o Dreamweaver
para recuperar o valor de variáveis de sessão e utilizá-lo em um aplicativo da web. Para obter mais
informações, veja “Definição das variáveis de sessão”, na página 552.
Após a definição da variável de sessão em Dreamweaver, é possível inserir o respectivo valor em
uma página. Para obter mais informações, consulte o Capítulo 33, “Como adicionar conteúdo
dinâmico às páginas da Web”, na página 561.

542 Capítulo 31
CAPÍTULO 32
Definição das fontes de conteúdo dinâmico
Os sites da Web dinâmicos necessitam de uma fonte de dados da qual o conteúdo dinâmico é
recuperado e exibido. O Macromedia Dreamweaver MX permite utilizar bancos de dados,
variáveis de solicitação, de URL, de servidor e de formulário; procedimentos armazenados e outras
fontes de conteúdo dinâmico. Dependendo da fonte de dados, é possível recuperar um novo
conteúdo para atender à solicitação ou modificar a página para satisfazer as necessidades dos
usuários.
Este capítulo descreve os procedimentos para definir bancos de dados e variáveis como fontes de
conteúdo dinâmico. Para saber mais sobre as tecnologias discutidas neste capítulo, veja “Recursos
de tecnologias da Web e HTML”, na página 32.
• “Como compreender as fontes de conteúdo dinâmico”, na página 544
• “Definição de um conjunto de registros”, na página 544
• “Definição dos parâmetros da URL”, na página 549
• “Definição das variáveis de sessão”, na página 552
• “Definição das variáveis de aplicativo”, na página 553
• “Definição das variáveis de servidor”, na página 553
• “Armazenamento em cache das fontes de conteúdo”, na página 558
• “Como alterar ou excluir as fontes de conteúdo”, na página 559
• “Como copiar um conjunto de registros para outra página”, na página 559
543
Como compreender as fontes de conteúdo dinâmico
Uma fonte de conteúdo dinâmico é um recipiente de informações do qual é possível recuperar e
exibir conteúdo dinâmico para ser utilizado em uma página da Web. As fontes de conteúdo
dinâmico incluem não somente as informações armazenadas em um banco de dados, mas também
os valores enviados pelos formulários HTML e os contidos nos objetos de servidor, os valores das
propriedades dos componentes de software reutilizáveis para Java e outras fontes de conteúdo.
Qualquer fonte de conteúdo definida no Dreamweaver é adicionada à lista de fontes de conteúdo
no painel Ligações. Depois que uma fonte de conteúdo tiver sido criada e inserida no painel
Ligações, é possível inseri-la com facilidade na página que estiver selecionada.
Definição de um conjunto de registros

Ao utilizar um banco de dados como fonte de conteúdo para uma página da Web, é necessário
criar primeiro um conjunto de registros no qual os dados recuperados serão armazenados.
Conjuntos de registros servem como intermediário entre o banco de dados que armazena o
conteúdo e o servidor de aplicativos que gera a página. Os conjuntos de registros consistem nos
dados obtidos em uma consulta ao banco de dados e são temporariamente armazenados na
memória do servidor de aplicativos, para que a recuperação seja mais rápida. O servidor descarta o
conjunto de registros quando deixar de ser necessário.
O conjunto de registros é uma coleção de dados recuperados em um determinado banco de dados.
Ele pode incluir uma tabela inteira de banco de dados ou um subconjunto de linhas e colunas da
tabela. Essas linhas e colunas são recuperadas como resultado de uma consulta ao banco de dados
que está definida no conjunto de registros. As consultas ao banco de dados são escritas em
Structured Query Language (SQL, linguagem de consulta estruturada), uma linguagem simples
que permite recuperar, adicionar e excluir dados de/para um banco de dados. O criador de SQL
incluído no Dreamweaver permite criar consultas simples sem a necessidade de conhecer a SQL.
Contudo, para criar consultas SQL complexas, é necessário aprender SQL e escrever manualmente
as instruções SQL a serem inseridas.
Observação: O Microsoft ASP.NET refere-se a um conjunto de registros como DataSet. Se você estiver
trabalhando com tipos de documento ASP.NET, as caixas de diálogo e opções de menu especificarão o uso de
ASP.NET no rótulo DataSet. A documentação do Dreamweaver refere-se a ambos os tipos como conjuntos de
registros, mas utiliza DataSet ao descrever especificamente os recursos do ASP.NET.
544 Capítulo 32
Para obter mais informações sobre a utilização de bancos de dados e SQL, consulte os seguintes
capítulos: Anexo A, “Guia do iniciante em bancos de dados”, na página 705 e Anexo B, “Manual
básico de SQL”, na página 719.
Antes de poder definir um conjunto de registro a ser utilizado no Dreamweaver, é necessário criar
um banco de dados e digite-os no banco de dados, caso ainda não existam. Se você ainda não tiver
definido uma conexão de banco de dados para o seu site, consulte o capítulo sobre este assunto
para obter informações sobre a tecnologia de servidor que está sendo desenvolvida e siga as
instruções para criação de uma conexão de banco de dados.
As conexões de banco de dados para todas as tecnologias de servidor aceitas pelo Dreamweaver
estão descritas nos seguintes capítulos:
• Capítulo 7, “Conexões de banco de dados para programadores ColdFusion”, na página 149
• Capítulo 9, “Conexões de banco de dados para programadores ASP”, na página 161
• Capítulo 8, “Conexões de banco de dados para programadores ASP.NET”, na página 155
• Capítulo 10, “Conexões de banco de dados para programadores JSP”, na página 173
• Capítulo 11, “Conexões de banco de dados para programadores PHP”, na página 181
Esta seção contém os seguintes tópicos:
• “Criação de um conjunto de registros sem escrever SQL”, na página 545
• “Criação de conjunto de registros avançado gravando SQL”, na página 546
• “Criação de consultas SQL utilizando a hierarquia de itens de banco de dados”, na página 548
Criação de um conjunto de registros sem escrever SQL
Esta seção descreve como definir um conjunto de registros utilizando a caixa de diálogo Conjunto
de registros do Dreamweaver, que permite criar um conjunto de registros sem ter que inserir
manualmente as instruções SQL. A definição de um conjunto de registros utilizando este método
é tão fácil quanto a seleção de uma conexão e uma tabela de banco de dados nos menus pop-up da
caixa de diálogo Conjunto de registros.
Se desejar escrever as suas próprias instruções SQL, utilize a caixa de diálogo avançada Conjunto
de registros (veja “Criação de conjunto de registros avançado gravando SQL”, na página 546).
Para definir um conjunto de registros sem utilizar SQL:
1 Na janela do documento, abra a página que utilizará o conjunto de registros.

2 Escolha Janela > Ligações para exibir o painel Ligações.
Definição das fontes de conteúdo dinâmico 545

3 No painel Ligações, clique no botão com o sinal de adição (+) e escolha Conjunto de registros
(consulta), no menu pop-up.
Será exibida a caixa de diálogo simples Conjunto de registros. Se você estiver desenvolvendo um
site do Macromedia ColdFusion MX ou do ASP.NET, a caixa de diálogo Conjunto de registros
será um pouco diferente do exemplo mostrado abaixo. Se, em vez disso, aparecer a caixa de
diálogo avançada Conjunto de registros, alterne para a caixa de diálogo simples Conjunto de
registros, clicando no botão Simples.

Para obter mais informações, clique no botão Ajuda, na caixa de diálogo Conjunto de registros.
5 Clique no botão Teste para executar a consulta e assegurar que ela recupere as
informações desejadas.
Se tiver sido definido um filtro que utilize parâmetros inseridos pelo usuário, o botão Teste
exibirá a caixa de diálogo Valor de teste. Digite um valor na caixa de texto Valor de teste e
clique em OK. Se for criada corretamente uma instância do conjunto de registros, será exibida
uma tabela mostrando os dados extraídos desse conjunto.
6 Clique em OK para adicionar o conjunto de registros à lista de fontes de conteúdo disponíveis
no painel Ligações.
Criação de conjunto de registros avançado gravando SQL

A caixa de diálogo avançada Conjunto de registros permite gravar as suas próprias instruções SQL
ou utilizar a hierarquia gráfica Itens de banco de dados para criar uma instrução SQL.
Observação: Se você estiver gravando instruções SQL para tipos de documentos ASP.NET, veja “Gravação de
SQL para ASP.NET”, na página 548 para obter as regras específicas ao ASP.NET.
Para definir um conjunto de registros gravando SQL:
1 Na janela do documento, abra a página que utilizará o conjunto de registros.

546 Capítulo 32
(consulta), no menu-pop up.
Será exibida a caixa de diálogo avançada Conjunto de registros. Se você estiver desenvolvendo
um site do Macromedia ColdFusion MX ou do ASP.NET, a caixa de diálogo Conjunto de
registros será um pouco diferente do exemplo mostrado abaixo. Se, em vez disso, aparecer a
caixa de diálogo simples Conjunto de registros, alterne para a caixa de diálogo avançada
Conjunto de registros, clicando no botão Avançado.

Para obter instruções sobre o preenchimento da caixa de diálogo Conjunto de registros, clique
no botão Ajuda da caixa de diálogo.
5 Clique no botão Teste para executar a consulta e assegurar que ela recupere as
informações desejadas.
Se tiver sido definido um filtro que utilize parâmetros inseridos pelo usuário, o botão Teste
exibirá a caixa de diálogo Valor de teste. Digite um valor na caixa de texto Valor de teste e
clique em OK. Se for criada corretamente uma instância do conjunto de registros, será exibida
uma tabela mostrando os dados extraídos desse conjunto.
6 Clique em OK para adicionar o conjunto de registros à lista de fontes de conteúdo disponíveis
no painel Ligações.

Gravação de SQL para ASP.NET
Ao gravar as instruções SQL na caixa de diálogo avançada DataSet, há condições específicas ao
ASP.NET das quais é necessário estar ciente:
Parâmetros
A sintaxe utilizada nas referências aos parâmetros varia dependendo da conexão de banco de dados
utilizada. São estes os tipos de conexão:
OLE DB
Quando a conexão ao banco de dados for estabelecida utilizando a tecnologia OLE DB, a
referência aos parâmetros deve conter um ponto de interrogação (?). Por exemplo:
SELECT * FROM Employees WHERE HireDate > ?
Microsoft SQL Server

Quando for estabelecida a conexão ao Microsoft SQL Server utilizando o Managed Data Provider
for SQL Server, fornecido com o .NET Framework, todos os parâmetros devem ter um nome. Por
exemplo:
SELECT * FROM Employees WHERE HireDate > @hireDate
Inserção de código nas instruções SQL

Ao inserir código nas instruções SQL gravadas para ASP.NET, todas as seqüências de caracteres
devem estar envolvidas em aspas duplas (“ “) e o código deve ser colocado entre parênteses ( ):
SELECT * FROM Employees WHERE HireDate > “+ (Request.queryString(“hireDate”))
Conexões de banco de dados em ASP.NET

Para aprender mais sobre bancos de dados, consulte o Capítulo 8, “Conexões de banco de dados
para programadores ASP.NET”, na página 155.
Criação de consultas SQL utilizando a hierarquia de itens de banco de dados

Em vez de inserir manualmente as instruções SQL na caixa de texto SQL, é possível utilizar a
interface apontar e clique do item de banco de dados para criar consultas SQL complexas. A
hierarquia de itens de banco de dados permite selecionar objetos de banco de dados e vinculá-los
às cláusulas SELECT, WHERE e ORDER BY da SQL. Após a criação de uma consulta SQL,
podem ser definidas quaisquer variáveis utilizando a área Variáveis da caixa de diálogo.
Os exemplos abaixo descrevem duas instruções SQL e as etapas para criá-las, utilizando a
hierarquia de itens de banco de dados da caixa de diálogo avançada Conjunto de registros.
Seleção de uma tabela

Este exemplo seleciona todo o conteúdo da tabela Empregados (Employees). Esta é a instrução
SQL que define a consulta:
SELECT * FROM Employees
548 Capítulo 32
Para criar esta consulta:
1 Expanda a ramificação Tabelas para exibir todas as tabelas do banco de dados selecionado.
2 Selecione a tabela Empregados.
3 Clique no botão Selecionar.
4 Clique em OK para adicionar o conjunto de registros ao painel Ligações.
Seleção de linhas específicas em uma tabela e ordenação dos resultados

O exemplo abaixo seleciona duas linhas na tabela Empregados, e escolhe o tipo de trabalho
utilizando uma variável que você deve definir. Os resultados serão ordenados por nome de
empregado.
SELECT emplNo, emplName
FROM Employees
WHERE emplJob = 'varJob'
ORDER BY emplName
Para criar esta consulta:
1 Expanda a ramificação Tabelas para exibir todas as tabelas do banco de dados selecionado e, em
seguida, expanda a tabela Employees para exibir as linhas individuais da tabela.
2 Crie a instrução SQL da seguinte forma:
• Selecione emplNo e clique no botão Selecionar.
• Selecione emplName e clique no botão Selecionar.
• Selecione emplJob e clique no botão Onde.
• Selecione emplName e clique no botão Classificar por.
3 Coloque o ponto de inserção após WHERE emplJob, na área de texto SQL, e digite ='varJob'
(inclua o sinal de igual).
4 Defina a variável 'varJob', clicando no botão com o sinal de adição (+), na área Variáveis, e
inserindo os seguintes valores nas colunas Nome, Valor padrão e Valor em tempo de execução:
varJob, CLERK, Request("job").
5 Clique em OK para adicionar o conjunto de registros ao painel Ligações.
Definição dos parâmetros da URL

Os parâmetros da URL armazenam as informações recuperadas, que foram inseridas pelos
usuários. Para definir um parâmetro da URL, crie um formulário ou link de hipertexto que utilize
o método GET para enviar dados. As informações são anexadas à URL da página solicitada e
comunicadas ao servidor. Quando as variáveis de URL são utilizadas, a seqüência de caracteres da
consulta contém um ou mais pares de nome/valor que estão associados aos campos de formulário.
Esses pares de nome/valor são anexados à URL.
Antes de iniciar, certifique-se de ter repassado um formulário ou parâmetro da URL ao servidor.
Para obter instruções, veja “Como compreender um parâmetro de formulário”, na página 533.

Para definir um parâmetro da URL:
1 Na janela do documento, abra a página que utilizará a variável.

3 No painel Ligações, clique no botão com o sinal de adição (+) e escolha uma das seguintes
opções no menu pop-up:
Tipos de Item de menu no painel Ligações para a variável de URL

documentos
ASP Variável de solicitação > Request.QueryString
ColdFusion Variável de URL
JSP Variável de solicitação
PHP Variável de URL
Será exibida a caixa de diálogo Variável de URL.
4 Digite o nome da variável de URL na caixa de texto e clique em OK.

Normalmente, o nome da variável de URL é o mesmo do campo de formulário HTML ou do
objeto utilizado para obter esse valor.
5 A variável de URL é exibida no painel Ligações.
Após definir a variável de URL, o seu valor pode ser utilizado na página selecionada. Para obter
mais informações, consulte o Capítulo 33, “Como adicionar conteúdo dinâmico às páginas da
550 Capítulo 32
Definição dos parâmetros de formulário
Os parâmetros de formulário armazenam as informações recuperadas, que são incluídas na
solicitação de HTTP de uma página da Web. Se for criado um formulário que utilize o método
POST, os dados enviados pelo formulário serão repassados ao servidor. Antes de iniciar, certifique-se
de ter repassado um parâmetro de formulário ao servidor. Para obter instruções, consulte o
Capítulo 31, “Como armazenar e recuperar dados para a página”, na página 531.
Para definir um parâmetro de formulário:
1 Na janela do documento, abra a página que utilizará a variável.

3 No painel Ligações, clique no botão com o sinal de adição (+) e escolha uma das seguintes
opções no menu pop-up:
Tipos de Item de menu no painel Ligações da variável de formulário

documentos
ASP Variável de solicitação > Request.Form
ColdFusion Variável de formulário
JSP Variável de solicitação
PHP Variável de formulário
Será exibida a caixa de diálogo Variável de formulário.
4 Digite o nome da variável de formulário na caixa de diálogo e clique em OK.

Normalmente, o nome do parâmetro de formulário é o mesmo do campo de formulário
HTML ou do objeto utilizado para obter esse valor.
5 O parâmetro de formulário é exibido no painel Ligações.
Após definir o parâmetro de formulário como uma fonte de conteúdo, pode-se utilizar o seu valor
na página. Para obter mais informações, consulte o Capítulo 31, “Como armazenar e recuperar
dados para a página”, na página 531.

Definição das variáveis de sessão
É possível utilizar as variáveis de sessão para armazenar e exibir as informações mantidas durante a
visita (ou sessão) do usuário. O servidor cria um objeto de sessão diferente para cada usuário e o
mantém durante um período de tempo definido ou até que o objeto seja explicitamente
finalizado. Para obter mais informações, veja “Acesso a dados armazenados em variáveis de sessão”,
na página 536.
As variáveis de sessão são ideais para armazenar as preferências do usuário, porque elas se mantêm
durante toda a sessão e permanecem constantes quando o usuário se move de uma página para
outra no site da Web. As variáveis de sessão também podem ser utilizadas para inserir um valor no
código HTML da página, designar o valor de uma variável local ou fornecer um valor para avaliar
uma expressão condicional.
Antes de definir as variáveis de sessão para uma página, é necessário criá-las no código-fonte. Para
obter instruções, consulte as seções abaixo:
• “Coleta de dados enviados por usuários”, na página 532
• “Acesso a dados armazenados em variáveis de sessão”, na página 536
Depois de criar uma variável de sessão no código-fonte do aplicativo para a Web, é possível utilizar
o Dreamweaver para recuperar o seu valor e usá-lo na página da Web.
Para configurar uma variável predefinida de sessão:
1 Crie uma variável de sessão no código-fonte e atribua-lhe um valor.

Por exemplo: este exemplo de ASP produz a instância de uma sessão chamada username e atribui
a ela o valor Cornelius:
<% Session(username) = "Cornelius" %>
3 Clique no botão com o sinal de adição (+) e selecione Variável de sessão, no menu-pop up.
4 Digite o nome da variável definida no código-fonte.
Neste exemplo, o nome é username.
5 Clique em OK.
A variável de sessão é exibida no painel Ligações.
Após definir a variável de sessão, o seu valor pode ser utilizado na página. Para obter mais
informações, consulte o Capítulo 33, “Como adicionar conteúdo dinâmico às páginas da Web”,
na página 561.
552 Capítulo 32
Definição das variáveis de aplicativo
Em ASP e ColdFusion, é possível utilizar as variáveis de aplicativo para armazenar e exibir as
informações que são mantidas pelo tempo de utilização do aplicativo e que permanecem constantes
de usuário para usuário. O tempo de utilização do aplicativo se prolongará desde o momento em
que o primeiro usuário solicitar uma página no aplicativo até o momento em que o servidor da Web
for parado. Um aplicativo é definido como todos os arquivos num diretório virtual e os seus
subdiretórios.
As variáveis de aplicativo são ideais para armazenar as informações que devem existir para todos os
usuários como, por exemplo: a data e hora correntes, porque elas se mantêm durante o tempo de
utilização do aplicativo e permanecem constantes de usuário para usuário. O valor da variável de
aplicativo é definido no código do aplicativo.
Observação: Não há objetos de aplicativo em JSP ou PHP.
Para definir a variável de aplicativo para a página:
1 Abra um tipo de documento dinâmico na janela do documento.

3 Clique no botão com o sinal de adição (+) e selecione Variável de aplicativo, no menu-pop up.
4 Digite o nome da variável definida no código-fonte do aplicativo.
5 Clique em OK.
A variável de aplicativo é exibida no painel Ligações.
Após definir a variável de aplicativo, o seu valor pode ser utilizado na página. Para obter mais
informações, consulte o Capítulo 33, “Como adicionar conteúdo dinâmico às páginas da
Definição das variáveis de servidor

É possível definir as variáveis de servidor como fontes de conteúdo dinâmico a serem utilizadas
em um aplicativo para a Web.
As variáveis de servidor variam para cada tipo de documento e incluem variáveis de formulário, de
URL, de sessão e de aplicativo. Para obter mais informações sobre esses tipos de variáveis, consulte
as seções abaixo:
• “Definição dos parâmetros de formulário”, na página 551
Esta sessão discute as variáveis de servidor para diferentes tipos de documentos que podem ser
definidos como fontes de conteúdo. Estes são os tipos de documentos e suas correspondentes
seções:
• “Definição das variáveis de servidor ASP”, na página 554
• “Definição das variáveis de servidor ColdFusion”, na página 555
• “Definição das variáveis de servidor JSP”, na página 556
• “Definição dos componentes de software reutilizáveis para Java (apenas JSP)”, na página 556

Definição das variáveis de servidor ASP
As variáveis de servidor ASP podem ser definidas como fontes de conteúdo dinâmico:
Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables
e
Request.ClientCertificates.
Para definir uma variável de servidor de uma página ASP:
1 Abra o painel Ligações, escolhendo Janela > Ligações.

2 Clique no botão com o sinal de adição (+) e selecione Variável de solicitação, no menu-pop up.
Será exibida a caixa de diálogo Variável de solicitação.
3 Escolha um dos conjuntos de solicitação no menu pop-up Tipo.

Por exemplo: se desejar acessar as informações no conjunto Request.ServerVariables, escolha
Variáveis de servidor. Se desejar acessar as informações no conjunto Request.Form, escolha
Formulário.
Para obter mais informações sobre as variáveis de servidor ASP, clique no botão Ajuda.
4 Especifique a variável no conjunto a ser acessado.
Por exemplo: se desejar acessar as informações na variável
Request.ServerVariables("HTTP_USER_AGENT"), digite o argumentoHTTP_USER_AGENT. Se desejar
acessar as informações na variável Request.Form("lastname"), digite o argumentolastname.
5 Clique em OK.
A variável de servidor é exibida no painel Ligações.
554 Capítulo 32
Definição das variáveis de servidor ColdFusion
É possível definir as seguintes variáveis de servidor ColdFusion como fontes de conteúdo
dinâmico: cliente, cookie, CGI, servidor e variáveis locais.
Variáveis de cliente associam os dados a um determinado cliente. Essas variáveis são utilizadas
para manter o estado do aplicativo à medida que o usuário se move de uma página para outra no
aplicativo, assim como de uma sessão para outra. Manter o estado significa preservar as
informações de uma página (ou sessão) para a próxima, para que o aplicativo ”se lembre” do
usuário e de suas escolhas e preferências anteriores.
Variáveis de cookie acessam os cookies repassados para o servidor pelo navegador.
Variáveis de CGI fornecem informações sobre o servidor que executa o ColdFusion, o navegador
que solicita a página e outras informações sobre o ambiente de processamento.
Variáveis de servidor podem ser acessadas por todos os clientes e aplicativos no servidor. Elas se
mantêm até que o servidor seja parado.
Variáveis locais são criadas com a tag CFSET ou CFPARAM, na página ColdFusion.
Para definir uma variável de servidor de uma página ColdFusion:

2 Clique no botão com o sinal de adição (+) e escolha a variável de servidor, no menu-pop up.
3 Digite o nome da variável.
Para obter mais informações sobre as possíveis entradas de nomes, clique no botão Ajuda.
4 Clique em OK.
A variável de servidor ColdFusion é exibida no painel Ligações.
Para obter mais informações, veja:
• Capítulo 33, “Como adicionar conteúdo dinâmico às páginas da Web”, na página 561
Definição das variáveis de servidor PHP
Para definir uma variável de servidor de uma página PHP:

2 Clique no botão com o sinal de adição (+) e selecione a variável no menu-pop up.
4 Clique em OK.
A variável de servidor PHP é exibida no painel Ligações.
Para obter mais informações, consulte o Capítulo 32, “Definição dos parâmetros da URL”, na
página 549, Capítulo 33, “Como adicionar conteúdo dinâmico às páginas da Web”, na
página 561.

Definição das variáveis de servidor JSP
É possível definir uma variável de solicitação como uma fonte de conteúdo dinâmico para as
páginas JSP.
Para definir uma variável de solicitação de uma página JSP:

2 Clique no botão com o sinal de adição (+) e selecione Variável de solicitação, no menu-pop up.
4 Clique em OK.
A variável de servidor JSP é exibida no painel Ligações.
Para obter mais informações, veja “Definição dos parâmetros da URL”, na página 549 e o
Capítulo 33, “Como adicionar conteúdo dinâmico às páginas da Web”, na página 561.
Definição dos componentes de software reutilizáveis para Java (apenas JSP)

Os componentes de software reutilizáveis para Java são elementos comuns da arquitetura dos
aplicativos JSP de níveis múltiplos. Normalmente, esses componentes são utilizados como parte
de uma camada intermediária de lógica de negócios, que efetua a transição da lógica de acesso de
dados para a lógica de apresentação. Nesses aplicativos, os componentes de software reutilizáveis
para Java (e não as páginas JSP) contêm a lógica que acessa diretamente o banco de dados.
No Dreamweaver, os componentes de software reutilizáveis para Java são tratados como fontes de
conteúdo dinâmico das páginas JSP e são exibidos no painel Ligações. É possível clicar duas vezes
nos componentes de software reutilizáveis para Java, no painel Ligações, para exibir as suas
propriedades e, em seguida, arrastá-las até a página, criando assim as referências aos dados
dinâmicos.
Pode-se definir também um conjunto de componentes de software reutilizáveis para Java como
uma fonte de conteúdo dinâmico. Contudo, o Dreamweaver oferece suporte apenas às regiões
repetitivas e às ligações dinâmicas quando são utilizados os conjuntos de componentes de software
reutilizáveis para Java.
As cópias da classe dos componentes de software reutilizáveis para Java (ou do arquivo com
extensão .zip ou .jar, contendo a classe dos componentes) devem residir nos seguintes locais:
• No sistema onde o Dreamweaver estiver em execução, uma cópia da classe dos componentes de
software reutilizáveis para Java deve residir na pasta Configuration\classes do Dreamweaver ou
no caminho da classe do sistema. O Dreamweaver utiliza essa cópia da classe em tempo de
projeto.
• No sistema onde o servidor do aplicativo JSP estiver em execução, a classe dos componentes de
software reutilizáveis para Java deve residir no caminho da classe do servidor do aplicativo. O
servidor do aplicativo utiliza essa cópia da classe em tempo de execução. O caminho da classe
do servidor do aplicativo varia de um servidor do aplicativo para outro, mas geralmente o
caminho da classe é para uma pasta WEB-INF com uma subpasta classes/bean.
556 Capítulo 32
Se o Dreamweaver e o servidor do aplicativo forem executados no mesmo sistema e o servidor do
aplicativo utilizar o caminho da classe do sistema (e não um caminho da classe interno), uma
única cópia da classe dos componentes de software reutilizáveis para Java poderá residir no
computador, no caminho da classe do sistema. O servidor do aplicativo e o Dreamweaver
utilizarão esta cópia da classe. Em outros casos, as cópias da classe dos componentes de software
reutilizáveis para Java deverão residir em dois caminhos no computador, como descrito acima.
A estrutura da pasta deve corresponder ao pacote de componentes de software reutilizáveis para
Java. Por exemplo: se o pacote de componentes de software reutilizáveis para Java for denominado
com.ardvark.myBean, ele deve ser armazenado no diretório /com/ardvark/, no caminho da classe ou
na pasta Configuration/classes do Dreamweaver.
Para definir um componente de software reutilizável para Java de uma página JSP:

2 Clique no botão com o sinal de adição (+) e selecione Componente de software reutilizável
para Java, no menu-pop up.
Será exibida a caixa de diálogo Componente de software reutilizável para Java.

Para obter instruções sobre o preenchimento da caixa de diálogo Componente de software
reutilizável para Java, clique no botão Ajuda da caixa de diálogo.
4 O componente de software reutilizável para Java definido recentemente é exibido no painel
Ligações.

Para definir um componente de software reutilizável para Java de uma página JSP:

2 Clique no botão com o sinal de adição (+) e selecione o conjunto de componentes de software
reutilizáveis para Java, no menu-pop up.
Será exibida a caixa de diálogo Conjunto de componentes de software reutilizáveis para Java.

Para obter instruções sobre o preenchimento da caixa de diálogo Componente de software
reutilizável para Java, clique no botão Ajuda da caixa de diálogo.
4 O componente de software reutilizável para Java definido recentemente será exibido no painel
Ligações.
Armazenamento em cache das fontes de conteúdo

É possível armazenar em cache as fontes de conteúdo dinâmico em uma Design Note. Esse
recurso permite trabalhar em um site mesmo que o usuário não tenha acesso ao banco de dados
ou ao servidor de aplicativos que armazena as fontes de conteúdo dinâmico. O armazenamento
em cache também acelera o desenvolvimento, eliminando o acesso repetitivo através de uma rede
ao banco de dados e ao servidor de aplicativos.
Para armazenar em cache as fontes de conteúdo, clique no botão de seta, no canto superior direito
do painel Ligações, e altere a opção Armazenar em cache, no menu pop-up.
Se uma das fontes de conteúdo for alterada, o cache poderá ser atualizado, clicando no botão
Atualizar (o ícone de seta em círculo), no canto superior direito do painel Ligações. Expanda o
painel, se o botão não estiver visível.
558 Capítulo 32
Como alterar ou excluir as fontes de conteúdo
É possível alterar ou excluir qualquer fonte de conteúdo dinâmico, ou seja, todas as que estiverem
discriminadas no painel Ligações.
A alteração ou exclusão de uma fonte de conteúdo no painel Ligações não altera ou exclui
qualquer instância desse conteúdo na página. Esse procedimento somente a altera ou exclui como
uma possível fonte de conteúdo para a página. Para editar ou excluir uma instância do conteúdo
na página, veja “Como alterar o conteúdo dinâmico”, na página 568 e “Como excluir o conteúdo
dinâmico”, na página 568.
Para alterar uma fonte de conteúdo no painel Ligações:
1 No painel Ligações, clique duas vezes no nome da fonte de conteúdo a ser editado.
2 Faça as alterações na caixa de diálogo que for exibida.
3 Se estiver satisfeito com a alteração, clique em OK.
Para excluir uma fonte de conteúdo no painel Ligações:
1 No painel Ligações, selecione a fonte de conteúdo na lista.

Como copiar um conjunto de registros para outra página

É possível copiar um conjunto de registros de uma página para outra no site.
Para copiar um conjunto de registros para outra página:
1 Selecione o conjunto de registros, no painel Ligações ou no painel Comportamentos de

servidor.
2 Clique com o botão direito do mouse no conjunto de registros e escolha Copiar de, no menu
pop-up.
3 Abra a página na qual será copiado o conjunto de registros.
4 Clique com o botão direito do mouse no painel Ligações ou na barra de ferramentas
Comportamentos de servidor, e escolha Colar, no menu pop-up.

560 Capítulo 32
CAPÍTULO 33
Como adicionar conteúdo dinâmico às
páginas da Web
Após definir um ou mais fontes de conteúdo dinâmico, é possível utilizar as fontes para adicionar
conteúdo dinâmico à página. As fontes de conteúdo podem incluir uma coluna em um conjunto
de registros, um valor enviado por um formulário HTML, o valor contido num objeto do
servidor e outros dados. Para obter mais informações, consulte o Capítulo 32, “Definição das
No Dreamweaver MX, é possível inserir conteúdo dinâmico em quase todos os locais da página
ou no código-fonte HTML:
• É possível inserir o conteúdo no ponto de inserção.
• É possível substituir uma seqüência de caracteres de texto por conteúdo dinâmico.
• É possível inseri-lo em um atributo HTML.
Por exemplo: o conteúdo dinâmico pode definir o atributo src de uma imagem ou o atributo
value de um campo de formulário.
• “Como tornar o texto dinâmico”, na página 562
• “Como tornar dinâmicas as imagens”, na página 564
• “Como tornar dinâmicos os atributos HTML”, na página 565
• “Como tornar dinâmicos os objetos ActiveX, Flash e outros parâmetros de objetos”, na
página 567
• “Como alterar o conteúdo dinâmico”, na página 568
561
Como adicionar conteúdo dinâmico
É possível adicionar conteúdo dinâmico selecionando uma das fontes de conteúdo no painel
Ligações. O Dreamweaver insere um script do servidor na página do código-fonte, instruindo o
servidor a transferir os dados da fonte de conteúdo ao código-fonte HTML da página quando esta
for solicitada por um navegador.
Normalmente há mais de uma maneira de tornar dinâmico um determinado elemento de página.
Por exemplo: para tornar dinâmica uma imagem, é possível utilizar o painel Ligações, o inspetor
de propriedades ou o comando Imagem no menu Inserir. Este capítulo descreve as maneiras mais
eficientes de tornar dinâmicos vários elementos de página.
Como padrão, uma página HTML pode exibir somente um registro de cada vez. Para exibir
os outros registros no conjunto de registros, é possível adicionar um link, para mover pelos
registros, um de cada vez (consulte “Como criar links de navegação para conjuntos de registros”,
na página 572) ou criar uma região repetida, para exibir mais de um registro em uma única
página (consulte “Como exibir diversos registros”, na página 576).
Como tornar o texto dinâmico

É possível substituir um texto existente por um texto dinâmico ou colocar um texto dinâmico em
um ponto de inserção específico na página.
O texto dinâmico adotará qualquer formatação de texto aplicada ao texto existente ou ao ponto
de inserção. Por exemplo: se um estilo de folha em estilo em cascata (CSS) afetar o texto
selecionado, o conteúdo dinâmico que o substituir também será afetado pelo estilo. Também é
possível adicionar ou alterar o formato de texto do conteúdo dinâmico utilizando qualquer uma
das ferramentas de formatação de texto do Dreamweaver “Como aplicar elementos tipográficos e
layout de página a dados dinâmicos”, na página 570.
Também é possível aplicar um formato de dados ao texto dinâmico. Por exemplo: se os dados
consistirem em datas, é possível especificar um formato de data especial como, por exemplo: 04/
17/00 para os visitantes americanos ou 17/04/00 para os visitantes brasileiros. “Como aplicar
formatos aos dados”, na página 570.
É possível substituir um texto comum na página por um texto dinâmico ou adicionar um texto
dinâmico no ponto de inserção na página.
Para adicionar um texto dinâmico:
1 Abra o painel Ligações selecionando Janela > Ligações.

2 Certifique-se de que o painel Ligações relacione as fontes de dados que você deseja utilizar.
A fonte de conteúdo deve conter texto simples (texto ASCII). O texto simples inclui HTML.
Se nenhuma fonte de conteúdo aparecer na lista ou se as fontes de conteúdo disponíveis não
atenderem às suas necessidades, clique no botão com o sinal de adição (+) para definir uma
nova fonte de conteúdo. Consulte o Capítulo 32, “Definição das fontes de conteúdo
dinâmico”, na página 543.
3 No modo de visualização do projeto, selecione o texto da página ou clique no local onde deseja
adicionar o texto dinâmico.
562 Capítulo 33
4 No painel Ligações, selecione uma fonte de conteúdo na lista. Se um conjunto de registros for
selecionado, especifique a coluna desejada no conjunto de registros.
5 Clique em Inserir ou arraste a fonte de conteúdo para a página.

O conteúdo dinâmico será exibido na página se você estiver trabalhando na visualização do
projeto com Live Data ativado (Exibir > Live Data).
Se o Live Data estiver ativo, um alocador de espaço será exibido. Se for selecionado um texto na
página, o alocador de espaço substituirá a seleção de texto. O alocador de espaço de uma fonte de
dados de conjunto de registros utiliza a sintaxe {RecordsetName.ColumnName}, onde Recordset é o
nome do conjunto de registros e ColumnName é o nome da coluna escolhida do conjunto de
registros.
Às vezes, o comprimento dos alocadores de espaço de texto dinâmico distorce o layout da página
na janela do documento. Solucione o problema utilizando as chaves vazias como alocadores de
espaço.
Para criar alocadores de espaço de texto dinâmico:
1 Selecione Editar > Preferências > Elementos invisíveis.

2 No menu pop-up Mostrar o texto dinâmico como, selecione {}.
3 Clique em OK.
Como adicionar conteúdo dinâmico às páginas da Web 563

Como tornar dinâmicas as imagens
É possível tornar dinâmicas as imagens na página. Por exemplo: suponha que uma página seja
projetada para exibir os itens para vendas num leilão de caridade. Cada página incluiria um texto
descritivo e uma fotografia de um item. O layout geral da página permaneceria o mesmo para
cada item, mas a fotografia e o texto descritivo podem mudar.
Para tornar dinâmica uma imagem:
1 Com a página aberta na visualização do projeto da janela (Exibir > Projeto), coloque o ponto
de inserção onde deseja que a imagem apareça na página e, em seguida, selecione Inserir >
Imagem.
A caixa de diálogo Selecionar a fonte da imagem é exibida.
2 Clique na opção Fontes dos dados.

Uma lista de fontes de conteúdo é exibida.
3 Selecione uma fonte de conteúdo na lista.
A fonte de dados deve ser um conjunto de registros contendo os caminhos para os arquivos de
imagens. Dependendo da estrutura de arquivos do site, os caminhos podem ser absolutos,
relativos ao documento ou relativos à raiz.
Observação: O Dreamweaver MX ainda não oferece suporte a imagens binárias armazenadas em bancos de
dados.
Se nenhum conjunto de registros for exibido na lista ou se os que estiverem disponíveis não
atenderem às suas necessidades, defina um novo conjunto de registros. Para obter instruções,
consulte “Definição de um conjunto de registros”, na página 544.
4 Clique em OK.
564 Capítulo 33
Como tornar dinâmicos os atributos HTML
É possível alterar dinamicamente a aparência da página ligando os atributos HTML aos dados.
Por exemplo: é possível alterar a imagem de fundo de uma tabela, ligando o atributo background da
tabela a um campo de um conjunto de registros.
É possível ligar os atributos HTML ao painel Ligações ou ao inspetor de propriedades. Os dois
métodos acima são descritos a seguir.
Para tornar dinâmicos os atributos HTML com o painel Ligações:
1 Abra o painel Ligações selecionando Janela > Ligações.

2 Certifique-se de que o painel Ligações relacione as fontes de dados que deseja utilizar.
A fonte de conteúdo deve conter os dados apropriados ao atributo HTML que você deseja
relacionar. Se nenhuma fonte de conteúdo aparecer na lista ou se as fontes de conteúdo
disponíveis não atenderem às suas necessidades, clique no botão com o sinal de adição (+) para
definir uma nova fonte de dados. Para obter instruções, consulte o Capítulo 32, “Definição das
3 Na visualização do projeto, selecione um objeto HTML.
Por exemplo: para selecionar uma tabela HTML, clique no interior da tabela e clique na tag
<table> no seletor de tags no canto inferior esquerdo da janela Documento.
4 No painel Ligações, selecione uma fonte de dados na lista.
5 Na caixa Ligar a, selecione um atributo HTML do menu pop-up.
6 Clique em Ligar a.
Sempre que a página for executada no servidor de aplicativos, o valor da fonte de dados será
atribuído ao atributo HTML.
Para tornar dinâmicos os atributos HTML com o inspetor de propriedades:
1 Na visualização do projeto, selecione um objeto HTML e abra o inspetor de propriedades

(Janela > Propriedades).
Por exemplo: para selecionar uma tabela HTML, clique no interior da tabela e clique na tag
<table> no seletor de tags no canto inferior esquerdo da janela Documento.
2 Se na visualização padrão do inspetor houver um ícone de pasta ao lado do atributo a ser ligado,
clique no ícone de pasta para abrir uma caixa de diálogo de seleção de arquivo e, em seguida,
clique na opção Fontes de dados para exibir uma lista de fontes de dados. Passe à etapa 6.
3 Se na visualização padrão não houver um ícone de pasta ao lado do atributo que deseja ligar,
clique na guia Lista (a mais inferior das duas guias) no lado esquerdo do inspetor.
A visualização de lista do inspetor de propriedades é exibida.
4 Se o atributo que deseja ligar não estiver discriminado na visualização de lista, clique no botão
com o sinal de adição (+) e, em seguida, digite o nome do atributo ou clique no botão de seta
pequena e selecione o atributo no menu pop-up.

5 Para tornar dinâmico o valor do atributo, clique no atributo e, em seguida, clique no ícone de
raio ou no ícone de pasta no final da linha do atributo.
Se você clicar no ícone de raio, uma lista de fontes de dados será exibida.
Por exemplo:
Se você clicar no ícone de pasta, será exibida uma caixa de diálogo de seleção de arquivo.
Clique na opção Fontes de dados para exibir uma lista de fontes de conteúdo.
6 Selecione uma fonte de dados na lista de fontes de dados.
A fonte de dados deve conter os dados apropriados ao atributo HTML que você deseja ligar. Se
nenhuma fonte de dados aparecer na lista ou se as fontes de dados disponíveis não atenderem às
suas necessidades, defina uma nova fonte de dados. Para obter instruções, consulte o Capítulo 31,
“Como armazenar e recuperar dados para a página”, na página 531.
7 Clique em OK.
Sempre que a página for executada no servidor de aplicativos, o valor da fonte de dados será
atribuído ao atributo HTML.
566 Capítulo 33
Como tornar dinâmicos os objetos ActiveX, Flash e outros
parâmetros de objetos
É possível tornar dinâmicos os parâmetros dos miniaplicativos e plug-ins Java, bem como os
parâmetros dos objetos ActiveX, Flash, Shockwave, Director e Generator.
Antes de começar, assegure-se de que os campos no conjunto de registros contenham dados
apropriados para os parâmetros dos objetos que deseja ligar.
Para tornar dinâmicos os parâmetros de objetos:
1 Na visualização do projeto, selecione um objeto na página e abra o inspetor de propriedades

(Janela > Propriedades).
Este é o inspetor de propriedades de um objeto Flash:
2 Clique no botão Parâmetros.

A caixa de diálogo Parâmetros é exibida.
3 Se o parâmetro não aparecer na lista, clique no botão com o sinal de adição (+) e digite um
nome de parâmetro na coluna Parâmetro.
4 Clique na coluna Valor do parâmetro e, em seguida, clique no ícone de raio para especificar um
valor dinâmico.
Uma lista de fontes de dados é exibida.
5 Selecione uma fonte de dados na lista.
A fonte de dados deve conter os dados apropriados ao parâmetro do objeto que você deseja
ligar. Se nenhuma fonte de dados aparecer na lista ou se as fontes de dados disponíveis não
atenderem às suas necessidades, defina uma nova fonte de dados. Para obter instruções,
consulte o Capítulo 32, “Definição das fontes de conteúdo dinâmico”, na página 543.
6 Clique em OK.

Como alterar o conteúdo dinâmico
É possível alterar o conteúdo dinâmico na página editando o comportamento do servidor que
fornece o conteúdo. Por exemplo: é possível editar um comportamento do servidor do conjunto de
registros para que forneça mais registros à página.
O conteúdo dinâmico de uma página é listado no painel Comportamentos de servidor. Por
exemplo: quando um conjunto de registros é adicionado à página, o painel Comportamentos de
servidor lista o conjunto da seguinte forma:
Se outro conjunto de registros for adicionado à página, o painel Comportamentos de servidor
listará ambos os conjuntos de registros da seguinte forma:
Recordset(mySecondRecordset)
Para editar um comportamento do servidor que fornece o conteúdo dinâmico, clique duas vezes
no comportamento do servidor no painel Comportamentos de servidor. A mesma caixa de
diálogo utilizada para definir a fonte de dados original será exibida. Faça as alterações na caixa de
diálogo e clique em OK.
Também é possível utilizar o inspetor de propriedades para editar os conjuntos de registros na
página. Abra o inspetor de propriedades (Janela > Propriedades) e, em seguida, selecione o
conjunto de registros no painel Comportamentos de servidor (Janela > Comportamentos de
servidor). Este é o inspetor de propriedades de um conjunto de registros:
Se um conjunto de registros for editado na janela do Live Data com a opção Atualização
automática não selecionada, será necessário atualizar a página para visualizar as alterações. Para
atualizar a página, clique no botão Atualizar e escolha Exibir > Atualizar o Live Data.
Como excluir o conteúdo dinâmico

Após adicionar o conteúdo dinâmico a uma página, é possível exclui-lo selecionando-o na página
e pressionando Excluir. Também é possível exclui-lo através da seleção deste no painel
Comportamentos de servidor e, em seguida, clicando o botão com o sinal de subtração (-).
Observação: Essa operação remove o script do servidor na página que recupera o conteúdo dinâmico do banco de
dados. Ela não exclui os dados do banco de dados.
568 Capítulo 33
CAPÍTULO 34
Como exibir os registros de bancos de dados
A exibição de registros de banco de dados envolve a recuperação de informações armazenadas em

um banco de dados ou outra fonte de conteúdo e submeter essas informações a uma página da
Web. O Macromedia Dreamweaver MX fornece diversos métodos de exibição de conteúdo
dinâmico e vários comportamentos de servidor incorporados, que possibilitam aprimorar a
apresentação de conteúdo dinâmico e permitem aos usuários efetuar uma busca e navegar com
mais facilidade através das informações retornadas de um banco de dados.
O Dreamweaver fornece os comportamentos de servidor e elementos de formatação a seguir para
aprimorar a exibição de dados dinâmicos:
Formatos permite aplicar tipos diferentes de valores numéricos, monetários, data/hora e
percentagem ao texto dinâmico.
O comportamento de servidor região repetida permite exibir itens múltiplos retornados de uma
consulta ao banco de dados e especificam o número de registros a ser exibido por página.
O comportamento de servidor navegação do conjunto de registros permite inserir elementos de
navegação de modo que os usuários possam mover ao conjunto de registros seguinte ou anterior
retornados pelo conjunto de registros. Por exemplo: se 10 registros forem exibidos por página
utilizando o objeto de servidor Região repetida e o conjunto de registros retornarem 40 registros,
é possível navegar através dos 10 registros de uma só vez.
O comportamento de servidor barra de status do conjunto de registros inclui um contador que
mostra aos usuários onde se encontram dentro de um conjunto de registros relativo ao número
total de registros devolvidos.
O comportamento de servidor Mostrar a região permite mostrar ou ocultar itens na página com
base na importância dos registros exibidos. Por exemplo: se um usuário navegou até o último
registro de um conjunto de registros, é possível omitir o link “seguinte” e exibir apenas o link dos
registros “anteriores”.
• “Como aplicar elementos tipográficos e layout de página a dados dinâmicos”, na página 570
• “Como aplicar formatos aos dados”, na página 570
• “Como criar links de navegação para conjuntos de registros”, na página 572
• “Mostrar ou ocultar as regiões com base nos resultados do conjunto de registros”, na página 575
• “Como exibir diversos registros”, na página 576
• “Como criar um controle da Web DataGrid ou DataList do ASP.NET”, na página 582
• “Como criar um contador de registros”, na página 579
569
Como aplicar elementos tipográficos e layout de página a dados
dinâmicos
Um recurso poderoso do Dreamweaver é a capacidade de apresentar dados dinâmicos em uma
página estruturada e aplicar formatação tipográfica utilizando HTML e CSS. Para aplicar
formatos a dados dinâmicos no Dreamweaver, formate as tabelas e alocadores de espaço para os
dados dinâmicos utilizando as ferramentas de formatação do Dreamweaver. Quando o dados
forem inseridos da fonte de dados, o programa adotará automaticamente a formatação das fontes,
parágrafos e tabelas especificadas.
Para obter mais informações sobre os recursos de formatação do Dreamweaver como aplicá-los a
elementos de dados dinâmicos, consulte o Capítulo 16, “Apresentação do conteúdo com tabelas”,
na página 241 e Capítulo 19, “Como inserir e formatar texto”, na página 291.
Como aplicar formatos aos dados

O Dreamweaver vem com vários formatos de dados predefinidos que podem ser aplicados a
elementos de dados dinâmicos. Os dados incluem formatos de data e hora, moeda, numéricos e
percentagem.
Por exemplo: se o preço de um item em um conjunto de registros for 10,989, é possível exibir o
preço na página como $ 10,99 selecionando o formato “Moeda - Duas casas decimais” do
Dreamweaver. Este formato exibirá um número com duas casas decimais. Se o número tiver mais
de duas casas decimais, o formato de dados arredondará o número para o decimal mais próximo.
Se o número não tiver nenhuma casa decimal, o formato de dados adicionará um ponto decimal e
dois zeros.
Para aplicar formato de dados ao texto dinâmico:
1 Selecione o conteúdo dinâmico na janela Live Data ou seu alocador de espaço na

janela Documento
3 Clique no botão de seta para baixo na coluna Formato.
Se a seta abaixo não estiver visível, expanda o painel.
4 No menu pop-up Formato, selecione a categoria de formato de dados desejada.
Certifique-se de que o formato de dados seja apropriado para o tipo de dados que está sendo
formatado. Por exemplo: o formato Moeda funcionará somente se os dados dinâmicos
contiverem algarismos. Observe que não é possível aplicar mais de um formato aos mesmos
dados.
5 Verifique se o formato foi aplicado corretamente visualizando a página na janela Live Data ou
navegador.
570 Capítulo 34
Como personalizar os formatos de dados existentes
É possível personalizar os formatos de dados do Dreamweaver ou criar seus próprios formatos.
Para personalizar um formato de dados:
1 Abra uma página que contém dados dinâmicos na visualização do projeto.

2 Selecione os dados dinâmicos cujo formato deseja personalizar.
O item de dados ligados cujo texto dinâmico selecionado será realçado.
4 Clique na seta abaixo na coluna Formato para expandir o menu pop-up dos formatos de dados
disponíveis.
5 Selecione Editar a lista de formatos no menu pop-up.
A caixa de diálogo Editar a lista de formatos é exibida.
Como criar novos formatos de dados

É possível criar novos formatos de dados para adequar-se a quaisquer tipos de dados dinâmicos
que desejar exibir.
Para criar um novo formato de dados:
1 Abra uma página que contenha dados dinâmicos na visualização do projeto.

2 Selecione os dados dinâmicos para o qual deseja criar um formato personalizado.
3 Selecione Janela > Ligações para exibir o painel Ligações e clique no botão de seta na coluna
Formato.
4 Selecione Editar a lista de formatos no menu pop-up.
A caixa de diálogo Editar a lista de formatos é exibida.
5 Clique no botão com sinal de adição (+) 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.
8 Clique em OK para fechar a caixa de diálogo Editar a lista de formatos.
Como exibir os registros de bancos de dados 571

Como criar links de navegação para conjuntos de registros
Os links de navegação de conjuntos de registros permitem aos usuários mover de um registro a
outro ou de um conjunto de registros a outro. Por exemplo: após projetar uma página para exibir
cinco registros de cada vez, adicione links como “Avançar” ou “Anterior” para que os usuários
possam visualizar os cinco registros anteriores seguintes ou anteriores, respectivamente.
O Dreamweaver permite criar quatro tipos de links de navegação para mover por um conjunto de
registros: Primeiro, Anterior, Próximo e Último. Uma única página pode conter qualquer número
destes links, desde que todos eles funcionem em apenas um único conjunto de registros. Não é
possível adicionar links para mover-se por um segundo conjunto de registros na mesma página.
Observação: O Microsoft ASP.NET refere-se a um conjunto de registros como DataSet. Se você estiver
trabalhando com tipos de documento ASP.NET, as caixas de diálogo e opções de menu especificarão o uso de
ASP.NET no rótulo DataSet. A documentação do Dreamweaver refere-se a ambos os tipos como conjuntos de
registros, mas utiliza DataSet ao descrever especificamente os recursos do ASP.NET.
Os links de navegação dos conjuntos de registros requerem os seguintes elementos dinâmicos:

• um conjunto de registros, para navegar
• conteúdo dinâmico na página, para exibir o registro ou os registros
• texto ou imagens na página, para atuar como uma barra de navegação clicável
• um conjunto “Ir para o registro” de comportamentos do servidor para navegar pelo conjunto
de registros
É possível adicionar os dois últimos elementos utilizando o objeto de servidor Barra de navegação
do registro ou adicioná-los separadamente utilizando as ferramentas de criação do Dreamweaver e
o painel Comportamentos de servidor.
Como criar uma barra de navegação utilizando o comportamento de servidor

Barra de navegação de conjunto de registros
É possível criar uma barra de navegação do conjunto de registros em uma única operação
utilizando o comportamento de servidor Barra de navegação do conjunto de registros. O objeto
de servidor adicionará os seguintes blocos de criação à página:
• Uma tabela HTML com links de texto ou imagem
• Um conjunto de comportamentos de servidor “Ir para”
• Um conjunto de comportamentos de servidor “Mostrar a região”
A versão textual da barra de de navegação do conjunto de registro se parece com a do exemplo:
A versão gráfica da barra de de navegação do conjunto de registro se parece com a do exemplo:
Antes de colocar a barra de navegação na página, certifique-se de que a página contenha um

conjunto de registros de navegação e um layout de página para exibir os registros.
572 Capítulo 34
Após inserir a barra de navegação na página, é possível utilizar as ferramentas de projeto do
Dreamweaver para personalizar a barra de acordo com suas preferências. Também é possível editar
os comportamentos de servidor “Ir para” e “Mostrar a região” clicando duas vezes nos
comportamentos no painel Comportamentos de servidor.
Se desejar criar a barra de navegação bloco a bloco utilizando as ferramentas de projeto do
Dreamweaver e o painel Comportamentos de servidor, consulte “Como criar uma barra de
navegação do conjunto de registros personalizada”, na página 574.
Para criar a barra de navegação do conjunto de registros com o objeto de servidor:
1 Na visualização do projeto, coloque o ponto de inserção no local da página no local desejado

para a barra de navegação.
2 Exibir a caixa de diálogo Barra de navegação do conjunto de registros (Inserir > Objetos de
aplicativos > Barra de navegação do conjunto de registros).
A caixa de diálogo Inserir barra de navegação do conjunto de registros é exibida.
3 Selecione o conjunto de registros pelo qual deseja navegar no menu pop-up Conjunto de
registros.
4 Na seção Exibir utilizando, selecione o formato com o qual os links de navegação da página
serão exibidos. A opção Texto insere links de texto na página, enquanto a opção Imagens
permite utilizar imagens gráficas como links.
Na versão da imagem da barra de navegação, o Dreamweaver utiliza seus próprios arquivos de
imagens. É possível substituir estas imagens por seus próprios arquivos de imagem depois de
inserir a barra na página.
5 Clique em OK.
O Dreamweaver cria uma tabela contendo links de texto ou imagens que permitem ao usuário
navegar pelo conjunto de registros selecionado quando clicado. Quando o primeiro registro do
conjunto de registros for exibido, os links ou as imagens “Primeiro” e “Anterior” são ocultados.
Quando o último registro do conjunto de registros for exibido, os links ou as imagens
“Próximo” e “Último” são ocultados.
É possível personalizar o layout da barra de navegação utilizando as ferramentas de projeto do
Dreamweaver.

Como criar uma barra de navegação do conjunto de registros personalizada
Se desejar criar uma barra de navegação para um conjunto de registros utilizando estilos de layout
e formatação mais complexos do que os oferecidos pela tabela simples criada pelo objeto de
servidor Barra de navegação do conjunto de registros, é possível criar sua própria barra de
navegação. Para isto, é preciso criar primeiro os links de navegação em forma de texto ou imagens,
inseri-los na página no modo de visualização do projeto e atribuir comportamentos de servidor
individuais a cada link de navegação.
Os comportamentos de servidor individuais que podem ser atribuídos a links de navegação são os
seguintes:
• Mover para a primeira página
• Mover para a última página
• Mover para a próxima página
• Mover para a página anterior
Se preferir utilizar o objeto de servidor Barra de navegação do conjunto de registros incorporado
no Dreamweaver para criar uma barra de navegação, consulte “Como criar uma barra de
navegação utilizando o comportamento de servidor Barra de navegação de conjunto de registros”,
na página 572.
Tarefas de criação da barra de navegação

Ao criar uma barra de navegação, comece criando sua representação visual utilizando as
ferramentas de criação de páginas do Dreamweaver. Não é necessário criar um link para a
seqüência de caracteres de texto ou imagem, pois o Dreamweaver o criará automaticamente.
A página a ser criada a barra de navegação deve conter um conjunto de registros para navegação.
Consulte “Definição de um conjunto de registros”, na página 544, para obter mais informações.
Uma barra de navegação de conjunto de registros simples deve parecer como a do exemplo, com
botões de links criados a partir de imagens ou outros elementos de conteúdo:
Após adicionar um conjunto de registro a uma página e criar uma barra de navegação, é necessário
aplicar comportamentos de servidor individuais a cada elemento de navegação. Por exemplo: uma
barra de navegação de conjunto de registros típica contém representações dos links correspondentes
ao comportamento apropriado:
Link de navegação Comportamentos de servidor
Ir para a primeira página Mover para a primeira página
Ir para a página anterior Mover para a página anterior
Ir para a próxima página Mover para a próxima página
Ir para a última página Mover para a última página
574 Capítulo 34
Para atribuir comportamentos de servidor a links de navegação de registros:
1 No modo de visualização do projeto, selecione a seqüência de caracteres de texto ou imagem na

página que deseja utilizar como link de navegação de registro.
2 Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor) e clique
no botão com o sinal de adição (+).
3 Selecione Paginação de conjunto de registros no menu pop-up e selecione um comportamento
de servidor apropriado para aquele link na lista de comportamentos de servidor.
Observe que se o conjunto de registros contiver muitos registros, é possível que o
comportamento de servidor Ir para o último registro demore bastante para ser executado
quando o usuário clicar neste link.
4 No menu pop-up Conjunto de registros, selecione o conjunto de registros que contém os
registros.
5 Clique em OK.
Mostrar ou ocultar as regiões com base nos resultados do

conjunto de registros
O Dreamweaver inclui um conjunto de comportamentos de servidor que permitem exibir ou
ocultar uma região com base nos resultados retornados por um conjunto de registros. Por
exemplo: em uma página utilizando os links de registro “Anterior” e “Próximo” para navegar por
uma página de resultados, é possível especificar que o link de registro “Anterior” seja exibido em
todas as páginas de resultados, exceto a primeira (que não possui nenhum resultado anterior) e
que o link de registro “Próximo” seja mostrado em todas as páginas com exclusão da última (que
não possui nenhum resultado posterior).
Também é possível especificar que uma região seja exibida ou ocultada com base em um conjunto
de registros vazio ou não. Se um conjunto de registros estiver vazio (nenhum registro corresponde
à consulta, por exemplo), é possível exibir uma mensagem que informa ao usuário que nenhum
registro foi devolvido. Isto é útil principalmente ao criar páginas de busca que dependem dos
termos de entrada de busca do usuário para executar consultas. Do mesmo modo, é possível exibir
uma mensagem de erro se houver algum problema de conexão a um banco de dados ou se o nome
de usuário e senha de um usuário não corresponder àqueles reconhecidos pelo servidor.
Os comportamentos de servidor Mostrar a região são os seguintes:
• Mostrar se o conjunto de registros estiver vazio
• Mostrar se o conjunto de registros não estiver vazio
• Mostrar se for a primeira página
• Mostrar se não for a primeira página
• Mostrar se for a última página
• Mostrar se não for a última página

Para exibir uma região apenas quando for necessária:
1 Na visualização do projeto, selecione a região da página a ser exibida ou ocultada.

2 No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no
botão com o sinal de adição (+).
3 Selecione Mostrar a região no menu pop-up, e, em seguida, escolha um dos comportamentos
de servidor listados.
4 Clique em OK.
Como exibir diversos registros

O comportamento de servidor Região repetida permite exibir diversos registros de um conjunto
de registros dentro de uma página. Qualquer seleção de dados dinâmicos pode ser transformada
em uma região repetida. As regiões mais comuns, no entanto, são uma tabela, uma linha da tabela
ou uma série de linhas da tabela.
O exemplo a seguir ilustra como o comportamento de servidor Região repetida é aplicado a linha
da tabela e especifica que nove registros sejam exibidos por página. A própria linha exibe quatro
registros diferentes: cidade, estado, endereço e CEP.
Para criar uma tabela como a do exemplo acima, é necessário criar uma tabela com conteúdo
dinâmico e aplicar o comportamento de servidor Região repetida à linha da tabela que contém o
conteúdo dinâmico. Quando a página é processada pelo servidor de aplicativos, a linha é repetida o
número de vezes especificado no objeto de servidor Região repetida com um registro diferente
inserido em cada nova linha.
A página a ser criada a barra de navegação deve conter um conjunto de registros para navegação.
Para obter mais informações, veja “Definição de um conjunto de registros”, na página 544.
576 Capítulo 34
Para criar uma região repetida:
1 Na visualização do projeto, selecione uma região que contenha conteúdo dinâmico.

A seleção pode ser qualquer elemento, incluindo uma tabela, uma linha de tabela ou até
mesmo um parágrafo de texto.
Para selecionar com exatidão uma região na página, utilize o seletor de tags no canto esquerdo
da janela de documento. Por exemplo: se a região for uma linha de tabela, clique dentro da
linha na página e, em seguida, clique no ícone <tr> mais à direita na barra de status para
selecionar uma linha de tabela.
2 Selecione Janela > Comportamentos de servidor para exibir o painel Comportamentos de
servidor.
3 Clique no botão com sinal de adição (+) e selecione Região repetida.
A caixa de diálogo Repetir a região é exibida.
4 Selecione o nome do conjunto de registros a ser utilizado no menu pop-up.

5 Selecione o número de registros a serem exibidos por página.
6 Clique em OK.
Um contorno cinza estreito aparecerá na janela do documento dotado de guias ao redor da
região repetida. Na janela do Live Data (Exibir > Live Data), o contorno cinza desaparecerá e a
seleção se expandirá para exibir o número de registros que você tiver especificado.
Como criar uma tabela com um comportamento de servidor

Região repetitiva
O objeto de servidor Tabela dinâmica permite criar uma tabela com conteúdo dinâmico e aplica o
comportamento Região repetida de uma única caixa de diálogo. Este objeto de servidor é bastante
útil, pois preenche simultaneamente uma tabela com conteúdo dinâmico de um conjunto de
registros e aplica o comportamento de servidor Região repetida.
Observação: O objeto de servidor Tabela dinâmica não está disponível ao utilizar tipos de documento ASP.NET.
Para criar uma tabela com conteúdo dinâmico e regiões repetidas é necessário inserir tabela manualmente, inserir
conteúdo dinâmico no painel Ligações e aplicar um comportamento de servidor de região repetida, se necessário.
Para obter mais informações, veja “Como exibir diversos registros”, na página 576.

Para criar uma tabela dinâmica:
1 Selecione Inserir > Objetivos de aplicativo > Tabela dinâmica para exibir a caixa de diálogo
Tabela dinâmica.
A caixa de diálogo Tabela dinâmica é exibida.
2 Selecione o conjunto de registros que deseja utilizar no menu pop-up Conjunto de registros.
3 Selecione o número de registros a serem exibidos por página.
4 Nesse ponto, é possível inserir valores de entradas para a borda da tabela, preenchimento e
espaçamento da célula.
A caixa de diálogo Tabela dinâmica mantém os valores inseridos para as bordas da tabela,
preenchimento e espaçamento da célula. Se você estiver trabalhando em um projeto que
necessita de várias tabelas dinâmicas que requerem a mesma aparência, é possível digitar os
valores de layout da tabela, uma vez que isto simplifica o desenvolvimento da página. Observe
que é possível ajustar estes valores após inserir a tabela utilizando o inspetor de propriedades da
tabela.
5 Clique em OK.
A tabela e alocadores de espaço definidos em seu conjunto de registros correspondente para o
conteúdo dinâmico são inseridos na página.
Neste exemplo, o conjunto de registros contém quatro registros: FIRSTNAME, LASTNAME,

TITLE e DEPARTMENT. A linha Cabeçalho da tabela é preenchida com os nomes de cada
item de registro. É possível editar os cabeçalhos que utilizam qualquer texto descritivo desejado
ou substitui-los por imagens representativas.
578 Capítulo 34
Como criar um contador de registros
Os contadores de registro oferecem aos usuários um ponto de referência quando estiverem
navegando por um conjunto de registros. Normalmente, os contadores de registro exibem o
número total de registros retornado e os registros atuais visualizados. Por exemplo: se um conjunto
de registros retornar 40 registros individuais e oito registros forem exibidos por página, o contador
de registro indicaria “Exibindo registros 1-8 de 40” na primeira página.
Para criar um contador de registro para uma página, é necessário criar um conjunto de registros
para a página primeiro, um layout de página apropriado para conter o conteúdo dinâmico e uma
barra de navegação de conjunto de registros. Para saber mais sobre como criar estes elementos e
adicioná-los a uma página, veja as seções seguintes:
• “Como criar uma tabela com um comportamento de servidor Região repetitiva”, na
página 577
Uma vez que os elementos acima estejam na página, é possível criar um contador de registro.
Como criar um contador de registro utilizando o objeto Status de navegação

do conjunto de registros
O objeto Status de navegação do conjunto de registros cria uma entrada de texto na página para
exibir o estado de registro atual.
Para utilizar o objeto Status de navegação do conjunto de registros:
1 Coloque o cursor no ponto em que deseja inserir o contador de registro.

2 Selecione Inserir > Objetos de aplicativos > Status de navegação do conjunto de registros.
A caixa de diálogo Inserir status de navegação do conjunto de registros é exibida.
Selecione o conjunto de registros que deseja utilizar no menu pop-up Conjunto de registros.

3 Clique em OK.
O objeto de servidor Status de navegação do conjunto de registros insere um contador de
registro de texto similar ao exibido abaixo:
É possível utilizar as ferramentas de criação de páginas do Dreamweaver para personalizar o

contador de registro.
Quando visualizado na janela Live Data ou em um navegador, o contador será similar ao
mostrado abaixo:
Crie contadores de registro personalizados

É possível utilizar comportamentos de contagem de registros individuais para criar contadores de
registro personalizados. A criação de um contador de registro personalizado permite criar um
contador de registro mais completo do que a tabela simples com uma única linha inserida pelo
objeto de servidor Status de navegação do conjunto de registros. É possível organizar elementos de
design de diversas formas criativas e aplicar um comportamento de servidor apropriado a cada
elemento.
É possível criar um contador de registro simples utilizando o objeto de servidor Status de
navegação do conjunto de registros. Este objeto de servidor insere um contador de registro
completo com o qual é possível aplicar formatação de texto com as ferramentas de criação de
páginas do Dreamweaver.
Os comportamentos de servidor do contador de registro são os seguintes:
• Exibir o número do registro inicial
• Exibir o número do registro final
• Exibir o total de registros
Para criar um contador de registro personalizado para uma página, é necessário criar um conjunto
de registros para a página primeiro, um layout de página apropriado para conter o conteúdo
dinâmico e uma barra de navegação de conjunto de registros. Para saber mais sobre como criar
estes elementos e adicioná-los a uma página, veja as seções seguintes:
• “Como criar uma tabela com um comportamento de servidor Região repetitiva”, na
página 577
Uma vez que os elementos acima estejam na página, é possível criar um contador de registro
personalizado.
580 Capítulo 34
Este exemplo cria um contador de registro que será similar ao da seção anterior “Como criar um
contador de registro utilizando o objeto Status de navegação do conjunto de registros”, na
página 579. O contador de registro neste exemplo como o do exemplo:
Exibir registros StartRow até EndRow do RecordSet.RecordCount.
Neste exemplo o texto com fonte de san-serif representa os alocadores de espaço que serão
inseridos na página.
Para criar um contador de registro personalizado:
1 Na visualização do projeto, digite o texto do contador na página. Escolha o texto de sua

preferência.
Exibir os registros até.
2 Coloque o ponto de inserção no final da seqüência de caracteres de texto.

3 Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor).
4 Clique no botão de adição (+) no canto esquerdo superior e clique em Exibir contagem de
registro. Neste submenu, selecione Exibir o total de registros. O comportamento Exibir o total
de registros é inserido na página e um alocador de espaço é inserido no local do ponto de
inserção. A seqüência de texto deve ser similar à do exemplo:
Exibir registros até {Recordset1.RecordCount}.
5 Coloque o ponto de inserção após a palavra records e selecione Exibir o número de contagem
do registro inicial no painel Comportamentos de servidor > botão de adição (+) > Contagem
de registro. A seqüência de texto deve ser similar à do exemplo:
Exibir registros {StartRow_Recordset1} até {Recordset1.RecordCount}.
6 Em seguida, coloque o ponto de inserção após a palavra thru e of e selecione Exibir o número
de contagem do registro inicial no painel Comportamentos de servidor > botão de adição (+) >
Contagem de registro. A seqüência de texto deve ser similar à do exemplo:
Exibir registros {StartRow_Recordset1} até {EndRow_Recordset1} de
{Recordset1.RecordCount}.
7 Verifique se o contador funciona corretamente visualizando a página na janela Live Data

(Exibir > Live Data). O contador deve ser semelhante ao do exemplo abaixo:
Exibir registros 1 até 8 de 40.
Se a página de resultados tiver um link de navegação para mover ao próximo conjunto de

registros, clique no link para atualizar a leitura do contador de registro do seguinte modo:
Exibir registros 9 até 16 de 40.
Os links não funcionam na janela do Live Data. Para testá-los, utilize o recurso Visualizar no
navegador do Dreamweaver. Certifique-se de que a opção Visualizar utilizando o servidor Live
Data seja selecionada em Preferências (Editar > Preferências > Visualizar no navegador) e
selecione Arquivo > Visualizar no navegador.

Como criar um controle da Web DataGrid ou DataList do
ASP.NET
Os controles DataGrid e DataList o ASP.NET fornecem diversas opções para exibir dados
diferentes tipos de dados (principalmente conteúdo dinâmico de um banco de dados) e simplifica
o processo de ligação de fontes de dados aos controles. O Dreamweaver suporta tanto o controle
DataGrid como DataList como comportamentos de servidor. Os controles oferecem os recursos a
seguir:
DataGrid cria uma grade com diversas colunas ligadas por meio de dados. Este controle permite
definir vários tipos de colunas, tanto para o layout de conteúdo da grade e adicionar
funcionalidades específicas (editar colunas de botão, colunas de hyperlink e assim por diante).
DataList exibe os itens de uma fonte de dados que utiliza modelos. É possível personalizar a
aparência do controle manipulando os modelos que compõem seus componentes diferentes.
Adicionar um DataGrid à página

O recurso DataGrid do Dreamweaver permite inserir um controle da Web DataGrid
ASP.NET. O controle DataGrid insere tabelas como grades multi-coluna e pode incluir coluna
diferentes tipos de coluna (colunas heterogêneas) para definir o layout de conteúdo da célula.
Estes incluem colunas ligadas, de botões e modelos, entre outros. Além disso, o DataGrid
suporta a funcionalidade interativa como ordenação de colunas, edição e comandos. Os tipos
de coluna disponíveis no DataGrid são os seguintes:
Tipo de coluna DataGrid Descrição
Campo de dados simples Denominado de “coluna ligada” no ASP.NET, a coluna Campo de dados
simples permite especificar qual campo de fonte de dados a ser exibido e
formato dos dados que o campo utilizará com expressão de formatação .NET.
Formulário livre Denominado “coluna modelo” no ASP.NET, a coluna Formulário livre permite
criar combinações de texto HTML e controles de servidor para conceber um
layout personalizado da coluna. Os controles de uma coluna de formulário livre
podem ser ligados por dados. Colunas de formulário livre oferece maior
flexibilidade na definição do layout e funcionalidade do conteúdo da grade, pois
é possível ter controle total sobre a disposição dos dados e o que acontece
quando os usuários interagem com as linhas da grade.
Hyperlink A coluna Hyperlink exibe informações em forma de links de hipertexto. Um uso

comum consiste em exibir os dados (como número do cliente ou nome produto)
como um hyperlink que os usuários podem clicar para navegar a uma página
separada fornecendo detalhes sobre aquele item.
Botões Editar, Atualizar, Conhecida como Coluna editar comando no ASP.NET a coluna Botão Editar,
Cancelar Atualizar e Cancelar permite aos usuários efetuar edições no local das
informações do DataGrid. Para isso, crie uma coluna Editar, Atualizar, Cancelar.
Em tempo de execução, esta coluna exibe um botão denominado “Editar”.
Quando o usuário clica no botão Editar, os dados da linha são exibidos em
controles editáveis como caixas de texto e o botão Editar é substituído pelo
botões Atualizar e Cancelar.
botões Excluir O botão Excluir permite a um usuário remover uma linha individual clicando no
botão.
582 Capítulo 34
Para obter mais detalhes sobre o controle DataGrid e como pode ser usado para formatar dados
dinâmicos, visite os sites a seguir na Web:
• Microsoft MSDN no endereço: http://msdn.microsoft.com
• Microsoft ASP.NET: http://asp.net
Antes de inserir o comportamento de servidor DataGrid, é preciso definir um DataSet (conhecido
também como conjunto de registros em outros tipos de documentos) para o DataGrid. Para obter
mais informações, veja “Definição de um conjunto de registros”, na página 544.
Para adicionar um objeto DataGrid à página:
1 Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no

botão com o sinal de adição (+) e selecione DataGrid.
A caixa de diálogo DataGrid é exibida.
2 Preencha a caixa de diálogo DataGrid e clique em OK.

Na janela Documento, o DataGrid será exibido com um contorno cinza provido de uma guia ao
redor dele. Na janela Live Data (Exibir > Live Data), o contorno cinza desaparecerá e os
alocadores e espaço do objeto são substituídos pelo DataGrid especificado.

Como adicionar uma lista de dados à página
O comportamento de servidor lista de dados do Dreamweaver permite inserir o controle DataLista
do ASP.NET em uma página. O controle DataList é utilizado para implementar fontes de dados
externa baseada em formulário e permite apresentar os dados em uma grade em que cada registro é
distribuído em uma fila diferente, sendo que podem ser exibidas muitas linhas de cada vez.
Para obter mais detalhes sobre o controle DataList e como pode ser usado para formatar dados
dinâmicos, visite os sites a seguir na Web:
• Microsoft MSDN no endereço: http://msdn.microsoft.com
• Microsoft ASP.NET: http://asp.net
Antes de inserir o comportamento de servidor DataList, é preciso definir um DataSet (conhecido
também como conjunto de registros em outros tipos de documentos) para o DataList. Para obter
mais informações, veja “Definição de um conjunto de registros”, na página 544.
Para adicionar um objeto DataList à página:

botão com o sinal de adição (+) e selecione DataList.
A caixa de diálogo DataList é exibida.
2 Preencha a caixa de diálogo DataList e clique em OK.

Na janela Documento, o DataList será exibido com um contorno cinza provido de uma guia ao
redor dele. Na janela Live Data (Exibir > Live Data), o contorno cinza desaparecerá e os
alocadores e espaço do objeto são substituídos pelo DataList especificado.
584 Capítulo 34
Como modificar um objeto DataGrid ou DataList
Há quatro modos de modificar objetos DataGrid e DataList:
• Na visualização do projeto, clique no ícone localizado no canto esquerdo superior do DataGrid
ou DataList para alternar o modo de edição e, em seguida, adicione ou modifique o conteúdo
de quaisquer regiões exibidas com guias
Observação: Também é possível arrastar fontes de conteúdo dinâmico do painel Ligações a uma região com
guia
• Na visualização do projeto, selecione o objeto e utilize o inspetor de propriedades para

modificar seus atributos
• Clique duas vezes no objeto no painel Comportamentos de servidor e modifique suas
propriedades na caixa de diálogo que se abre
• Na visualização de código, selecione DataGrid ou DataList na página e utilize o diálogo da tag
para alterar seus atributos

586 Capítulo 34
CAPÍTULO 35
Como utilizar os componentes ColdFusion
Os componentes ColdFusion (CFC) permitem ao usuário encapsular lógicas de aplicação e de

negócios (business logic) em unidades auto-controladas reutilizáveis. Os componentes
ColdFusion também oferecem uma maneira rápida e fácil de se criar serviços para a Web.
É possível utilizar o Macromedia Dreamweaver MX para criar e modificar CFCs. Também é
possível utilizar o Dreamweaver para construir páginas da web que utilizam CFCs.
Observação: Os CFCs podem ser utilizados somente com o Macromedia ColdFusion MX. Os CFCs não são
suportados no ColdFusion 5.

• “Como compreender os componentes ColdFusion”, na página 587
• “Como criar visualmente um componente no Dreamweaver”, na página 588
• “Como exibir os componentes ColdFusion no Dreamweaver”, na página 589
• “Como editar os componentes ColdFusion no Dreamweaver”, na página 590
• “Como criar páginas da Web que utilizam componentes ColdFusion”, na página 591
Como compreender os componentes ColdFusion

Um componente ColdFusion é uma unidade de software reutilizável escrita em linguagem de
marcação ColdFusion (CFML). Os CFCs ajudam a tornar o código reutilizável e fácil de manter.
Esta seção descreve as vantagens dos CFCs. As seções posteriores descrevem como o Dreamweaver
pode ajudar o usuário a trabalhar com CFCs. Para obter mais informações sobre tags CFC,
consulte a ajuda do ColdFusion no Dreamweaver (Ajuda > Como utilizar o ColdFusion).
A finalidade dos componentes ColdFusion é assegurar aos desenvolvedores um modo simples,
mas poderoso de encapsular elementos de seus sites na Web. Esses componentes geralmente são
utilizados para lógica de aplicação ou negócios. Use tags personalizadas para elementos de
apresentação, como saudações, menus dinâmicos e assim por diante.
Da mesma forma que muitos outros tipos de construção, os sites dinâmicos podem normalmente
beneficiar-se das partes intercambiáveis. Por exemplo: um site dinâmico pode executar a mesma
consulta repetidamente ou calcular o preço total de páginas com carrinho de compras e recalculá-
lo sempre que item for adicionado. Estas tarefas podem ser controladas por componentes. É
possível ajustar, aperfeiçoar, estender e até mesmo substituir um componente com impacto
mínimo sobre o restante do aplicativo.
587
Vamos supor que uma loja on-line calcule as taxas de remessa com base no preço dos pedidos.
Para pedidos abaixo de R$ 20, o custo da remessa será R$ 4. Para pedidos entre R$ 20 e R$ 40, o
custo da remessa será R$ 6 e assim sucessivamente. É possível inserir a lógica para calcular o custo
da remessa tanto na página do carrinho de compra como na página de resumo do pedido, mas isso
confundiria o código de apresentação HTML e o código de lógica CFML e geralmente tornaria o
código difícil de manter e reutilizar.
Neste caso, recomenda-se criar um componente ColdFusion de denominado Pricing, que possui,
entre outras coisas, uma função chamada processamento de compras (ShippingCharge). Esta
função toma um preço como argumento e retorna uma taxa de remessa. Por exemplo: se o valor
do argumento for 32,80, a função retornará o valor 6.
Tanto na página de carrinho de compra como na página de resumo do pedido, é possível inserir
uma tag especial para chamar a função de processamento de compras. Quando a página é
solicitada, a função é ativada e uma taxa de remessa retorna à página.
Em seguida, a loja anuncia uma promoção especial: remessa grátis para todos os pedidos acima de
R$ 100. A mudança é feita nas taxas de remessa em um local (função ShippingCharge do
componente Pricing) e todas as páginas que utilizam a função automaticamente adquirem taxas
de remessa exatas.
Como criar visualmente um componente no Dreamweaver

É possível utilizar o Dreamweaver para definir um componente ColdFusion e suas funções
visualmente. O Dreamweaver cria um arquivo .cfc e insere as tags CFML necessárias
automaticamente.
Observação: Dependendo do componente, talvez você tenha de completar algum código à mão.
Para criar visualmente um componente ColdFusion:
1 Abra uma página ColdFusion no Dreamweaver.

2 No painel Componentes (Janela > Componentes), selecione Componentes CF no menu
pop-up.
3 No painel Componentes, clique no botão de adição (+).
A caixa de diálogo Criar componente se abre.
O Dreamweaver grava um arquivo .cfc e o salva na pasta especificada. O novo componente
também aparece no painel Componentes (após clicar em Atualizar).
Para remover um componente, é necessário excluir o arquivo .cfc do servidor manualmente.
588 Capítulo 35
Como exibir os componentes ColdFusion no Dreamweaver
Há uma maneira de examinar visualmente os componentes ColdFusion definidos para o site no
Dreamweaver. O Dreamweaver lê os arquivos .cfc localizados no servidor e exibe as informações
sobre eles em uma exibição hierárquica fácil de navegar no painel Componentes.
Observação: O Dreamweaver procura pelos componentes no servidor de teste (consulte “Como especificar onde
as páginas dinâmicas podem ser processadas”, na página 144). Se desejar exibir os componentes localizados em
outro servidor, modifique as configurações do servidor de teste.
É possível executar de modo específico quaisquer uma das ações a seguir no Dreamweaver:
• Listar todos os componentes ColdFusion definidos para o site
• Explorar as funções e argumentos de cada componente
• Inspecionar as propriedades das funções supridas como serviços da Web
Para exibir os componentes ColdFusion no Dreamweaver:
1 Abra qualquer página ColdFusion no Dreamweaver.

2 No painel Componentes (Janela > Componentes), selecione Componentes CF no menu
pop-up.
3 Clique no botão Atualizar no painel para recuperar os componentes.
O Dreamweaver exibe os pacotes de componentes no servidor. Um pacote de componentes é
uma pasta que contém arquivos CFC.
Se os pacotes de componentes existentes não forem exibidos, clique no botão Atualizar na barra
de ferramentas do painel.
4 Clique no ícone de adição (+) ao lado do nome do pacote para exibir os componentes
armazenados no pacote.
5 Para listar as funções de um componente, clique no ícone (+) ao lado do nome do componente.
6 Para visualizar os argumentos de uma função, bem como o tipo de argumento e se são exigidos
ou opcionais, abra a ramificação da função na árvore hierárquica.
As funções que não levam argumentos têm possuem o ícone de adição (+) ao lado delas.
7 Para exibir rapidamente os detalhes de um argumento, função, componente ou pacote,
selecione o item na árvore hierárquica e clique no ícone Obter detalhes na barra de ferramentas
do painel.
Também é possível clicar com o botão direito do mouse no item e selecionar Obter detalhes no
menu pop-up.
O Dreamweaver exibirá os detalhes sobre o item em uma caixa de mensagem.
Como utilizar os componentes ColdFusion 589

Como editar os componentes ColdFusion no Dreamweaver
O Dreamweaver oferece uma maneira simples e eficaz de editar o código dos componentes
ColdFusion definidos para seu site. Por exemplo: é possível adicionar, modificar ou excluir
qualquer função de componente sem sair do Dreamweaver.
Para utilizar este recurso, o ambiente de desenvolvimento deve estar configurado do seguinte
modo:
• O ColdFusion MX deve estar funcionando localmente.
• Na caixa de diálogo Avançado da Definição do site no Dreamweaver, o tipo de acesso
especificado na categoria Servidor de teste deve ser Local/Rede.
• Na caixa de diálogo Avançado em Definição do site, o caminho da pasta raiz local deve ser a
mesma que a do caminho da pasta do servidor de teste (por exemplo:
c:\Inetpub\wwwroot\cf_projetos\myNewApp \). É possível verificar e modificar esses
caminhos selecionando Site > Editar os sites.
• O componente deve estar armazenado na pasta do site local ou em qualquer subpasta em seu
disco rígido.
Antes de editar um CFC, abra qualquer página ColdFusion no Dreamweaver e visualize os
componentes no painel Componentes. Para exibir os componentes, abra o painel Componentes
(Janela > Componentes), selecione Componentes CF no menu pop-up e clique no botão
Atualizar no painel.
Uma vez que ColdFusion MX está funcionando localmente, o Dreamweaver exibe pacotes de
componentes em seu disco rígido. Para obter mais informações, veja “Como exibir os componentes
ColdFusion no Dreamweaver”, na página 589.
Para editar um componente:
1 Geralmente, para editar um arquivo de componente, abra o pacote e clique duas vezes no
nome do componente na árvore hierárquica.
O Dreamweaver abrirá o arquivo do componente na visualização de código.
2 Para editar uma função, argumento ou propriedade específica, clique duas vezes no item na
árvore hierárquica.
3 Efetue as alterações manualmente na visualização de código.
4 Salve o arquivo (Arquivo > Salvar).
Para exibir qualquer função nova no painel Componentes, atualize a exibição clicando no botão
Atualizar na barra de ferramentas do painel.
590 Capítulo 35
Como criar páginas da Web que utilizam componentes
ColdFusion
Uma maneira de utilizar uma função de componente em suas páginas da Web é escrever código na
página que chama a função quando a página é solicitada. É possível utilizar o Dreamweaver para
ajudá-lo a escrever este código.
Observação: Para conhecer outros métodos de uso de componentes, veja a ajuda do ColdFusion no Dreamweaver
(Ajuda > Como utilizar o ColdFusion).
Para utilizar componente ColdFusion em uma página da Web:
1 No Dreamweaver, abra a página ColdFusion que utilizará a função do componente.

2 Alterne para o modo de visualização de código (Exibir > Código).
3 Abra o painel Componentes (Janela > Componentes) e selecione Componentes CF no menu
pop-up do painel.
4 Localize o componente que deseja inserir utilizando um dos métodos a seguir:
• Arraste uma função da árvore hierárquica para a página. O Dreamweaver insere o código na
página para chamar a função.
• Selecione a função no painel e clique no ícone Inserir na barra de ferramentas do painel
(segundo ícone à direita). O Dreamweaver insere o código no ponto de inserção da página.
5 Se você inserir uma função com argumentos, complete o código de argumento manualmente.
Para obter mais informações, veja a ajuda do ColdFusion no Dreamweaver (Ajuda > Como
utilizar o ColdFusion).
6 Salve a página (Arquivo > Salvar).
Como utilizar os componentes ColdFusion 591

592 Capítulo 35
CAPÍTULO 36
Como utilizar os serviços da Web
Os serviços da Web são uma tecnologia emergente que possibilitam à páginas da Web acessar
aplicativos distribuídos. Ao oferecer tanto acesso a informações e funcionalidades de aplicativos,
os serviços da Web podem ser providos e cobrados como pacotes de serviços que permitem acesso
de qualquer ponto e por meio de qualquer plataforma. A página da Web que se conecta ao serviço
da web é normalmente conhecida como consumidor e o serviço em si é conhecido como
provedor. O Macromedia Dreamweaver MX permite criar páginas e sites que são consumidores
de serviços da Web. O Dreamweaver atualmente suporta a criação de consumidores de serviço da
Web que utilizam tipos de documento ColdFusion, ASP.NET e Java Server Pages (JSP). O
Dreamweaver permite de modo mais específico executar as tarefas de desenvolvimento de serviço
da Web a seguir:
• Selecione os serviços da Web disponíveis na Internet
• Gere um proxy de serviço da Web que permite à página da Web comunicar-se com
o integrador de serviço da Web
O proxy (também conhecido como classe de abstração) contém os campos, métodos de
obtenção de dados e propriedades do serviço da Web e os torna disponíveis para a página host
local. Ao gerar um proxy para sua página, o Dreamweaver permite exibi-los no painel
Componentes.
• Arraste os métodos de obtenção de dados e tipos de dados ao código da página
Antes de criar uma página com serviço da Web, é necessário familiarizar-se com a tecnologia
básica do servidor do aplicativo que deseja utilizar e a programação cria o que é exigido pelo
aplicativo.
O Dreamweaver permite criar páginas da Web com acesso aos serviços da Web através das
funcionalidades que os serviços oferecem. Além disso, é possível criar, desenvolver e publicar
serviços da Web para o ColdFusion MX da Macromedia.
• “Como compreender os serviços da Web”, na página 594
• “Como instalar e configurar os geradores proxy”, na página 596
• “Como adicionar um proxy de serviço da Web utilizando a descrição WSDL”, na página 599
• “Como adicionar um serviço da Web a uma página”, na página 600
• “Como editar a lista de sites de serviços da Web UDDI”, na página 602
593
Como compreender os serviços da Web
Os serviços da e Web permitem que os aplicativos se comuniquem e compartilham informações
através da Internet, independentemente do sistema operacional ou linguagem de programação. Os
exemplos de serviços da Web e as informações e funcionalidades que fornecem são os seguintes:
• Autenticação e autorização do usuário
• Validação de cartão de crédito
• Serviços de mercados financeiros que envolvem preços de ações associados a símbolos de
registradores especificados
• Aquisição de serviços que permitem aos usuários solicitar e comprar produtos on-line
• Serviços de informação que fornecem notícias ou outros tipos de informação com base no
interesse, local ou outras informações pessoais selecionadas
Ao fornecer funcionalidade como um serviço ao qual a página da Web se conecta e utiliza quando
necessário, os serviços da Web oferecem aos desenvolvedores e provedores de serviço maior
flexibilidade ao criar e distribuir aplicativos poderosos.
As partes de um serviço da Web

Os serviços da Web consistem dos componentes básicos a seguir:
• Integradores de serviço fornecem os aplicativos centrais e torna-os disponíveis para uso. Os
serviços da Web podem ser fornecidos gratuitamente ou mediante o pagamento de uma taxa.
• Os agentes de serviços mantêm um registro dos integradores de serviço com descrições de
ofertas de serviço e links a seus aplicativos.
• Consumidores do serviço são as páginas da Web que acessam e usam o serviço da Web remoto.
Localize integradores de serviço da Web

Os serviços da Web são disponibilizados pelos integradores de serviço. Normalmente, o
integrador de serviço disponibiliza seu serviço da Web através de um portal de registro na Web
com um diretório de serviços que podem ser acessados. Diversos sites da Web fornecem este
diretório, por exemplo:
• X Methods no endereço http://www.xmethods.net
• IBM Business Registry no endereço http://www-
3.ibm.com/services/uddi/protect/registry.html
• Registro Microsoft UDDI no endereço http://uddi.microsoft.com/default.aspx
Estes registros utilizam o serviço Descrição, Descoberta e Integração Universal - Universal
Description, Discovery and Integration (UDDI), um registro de serviço de e-commerce aberto
com um fórum para que as empresas possam descrever os bens ou serviços que fornecem a outras
empresas. Um grupo de empresas chamado de operadoras efetuam a manutenção dos registros. As
operadoras compartilham todas as informações públicas sobre participantes entre eles e entre
usuários do serviço e mantêm a interoperabilidade entre os múltiplos nós de rede do serviço
UDDI. Além de serviços da Web públicos, há também registros UDDI privados disponíveis por
meio de assinatura.
A especificação UDDI baseia-se em padrões Internet existentes, portanto, não é necessário
implementar nenhum tipo de plataforma.
594 Capítulo 36
Componentes de software do serviço da Web
Para que uma página da Web possa acessar e utilizar um serviço da Web, ela deve comunicar-se
com o serviço e ter uma descrição da funcionalidade que o serviço oferece, os métodos disponíveis
que podem ser ativados e os parâmetros retornados pelo serviço. A linguagem Web Service
Description Language (WSDL) é a linguagem descritiva do serviço baseada em XML. Cada
serviço da Web fornece um WSDL que descreve como ligar ao serviço, os métodos disponíveis
que a página da Web pode ativar e as entradas e saídas de dados. O WSDL pode residir em
arquivo ou gerado pelo serviço da Web em tempo de execução.
A comunicação entre a página da Web que solicita o serviço e o próprio serviço da Web utiliza o
protocolo Simple Object Access Protocol (SOAP). SOAP é um protocolo baseado em XML que
possibilita a um cliente da Web acessar e comunicar-se com os métodos e parâmetros do serviço
da Web.
Informações e especificações dos serviços da Web

Para saber mais sobre serviços da Web e as tecnologias básicas que os tornam possíveis, visite os
sites da Web a seguir:
• WSDL specification no endereço http://www.w3.org/TR/wsdl
• UDDI specification no endereço http://www.uddi.org/specification.html
• XML specification no endereço http://www.w3.org/TR/REC-xml
• SOAP specification no endereço http://www.w3.org/TR/SOAP/
Fluxo de trabalho do serviço da Web no Dreamweaver

Para criar uma página ou site de acesso a um serviço da Web utilizando o Dreamweaver, é
necessário executar as seguintes tarefas:
1 Instalar e configurar um servidor proxy.
Os geradores proxy geram um proxy para o serviço da Web, um componente de software que a
página da Web utiliza para comunicar-se com o integrador de serviços da Web. O proxy do
serviço da Web é gerado a partir do WSDL que descreve o serviço da Web. Dependendo da
tecnologia de servidor para a qual deseja desenvolver consumidores de serviço da Web, será
preciso instalar e configurar um servidor proxy com suporte para aquela tecnologia.
O Dreamweaver vem pré-configurado com AXIX, o gerador proxy SOAP da Apache que
suporta serviços da Web em JSP. Se você estiver desenvolvendo páginas em ColdFusion 6, o
gerador proxy do serviço da Web será incluído no servidor ColdFusion. O estabelecimento de
uma conexão com o servidor ColdFusion fornece acesso ao servidor proxy.
Se você estiver desenvolvendo páginas de serviço da Web para uso com ASP.NET, é preciso
instalar o ASP.NET SDK, que está disponível no site da Microsoft.
Para obter mais informações sobre como instalar e configurar um servidor proxy não fornecido
com o Dreamweaver, consulte “Como instalar e configurar os geradores proxy”, na página 596.
Como utilizar os serviços da Web 595

2 Com o navegador, visualize o registro de serviços da Web.
Há diversas fontes de serviços da Web, variando de sites de registro de serviços da Web até listas
simples. Os registros utilizando UDDI, um padrão que permite aos provedores e consumidores
de serviço se localizarem e efetuarem transações entre si. O UDDI permite às empresas
localizarem serviços na Web de acordo com suas necessidades. Por exemplo: com o UDDI é
possível especificar certos critérios, como o menor preço para um determinado serviço ou
informações específicas.
3 Após localizar e selecionar um serviço da Web com a funcionalidade de que você necessita,
digite a URL do WSDL na caixa de diálogo Adicionar um serviço da Web.
4 Gere um proxy para o serviço da Web na descrição WSDL do integrador de serviço.
Para incorporar um serviço da Web em uma página da Web, é necessário criar um proxy. O
proxy fornece a página da Web com as informações necessárias para comunicar-se com o
serviço da Web e acessa os métodos que o serviço da Web oferece.
Para criar um proxy do arquivo WSDL, utilize um servidor proxy. Após criar o proxy, é possível
instalá-lo nos seguintes locais:
• No computador local em que você está desenvolvendo o consumidor de serviço da Web.
• No computador servidor com o servidor de aplicativos. Para distribuir a página da Web e fazer
com que se comunique com o integrador de serviços da Web, é necessário instalar o proxy no
servidor.
5 No Dreamweaver, adicione o serviço da Web a uma página e edite os parâmetros e métodos
necessários para utilizar a funcionalidade do serviço.
Para obter mais informações, veja “Como adicionar um serviço da Web a uma página”, na
página 600.
Como instalar e configurar os geradores proxy

O Dreamweaver instala o gerador proxy AVIS, que suporta serviços da Web em JSP. O AXIS é um
gerador proxy de tecnologia aberta distribuído pelo projeto SOAP da Apache. Além disso, é
possível adicionar geradores proxy com suporte para a implementação de serviço da Web de
outros fornecedores ou novas tecnologias de serviço da Web. Esta seção descreve como obter
geradores proxy e os configurá-los para funcionar com o Dreamweaver.
Para obter mais detalhes sobre o AXIS, consulte o site Apache AXIS na Web:
http://xml.apache.org/axis/index.html.
596 Capítulo 36
Como obter geradores proxy adicionais
Se desejar instalar um gerador proxy não fornecido com o Dreamweaver, é preciso obter o gerador
proxy e qualquer componente de software correspondente de outro fornecedor. Você deve
descarregar todos os arquivos necessários do site do fornecedor na Web.
Alguns geradores proxy criam proxies que dependem de outras bibliotecas de software, as quais
devem ser instaladas adequadamente de modo que o gerador proxy tenha acesso a elas. Por
exemplo: o gerador proxy AXIS cria proxies que dependem da biblioteca SOAP da Apache que,
por sua vez, depende de outras bibliotecas de software (observe que todo o software necessário
para uso do AXIS encontra-se normalmente instalado no Dreamweaver). Ao selecionar um
gerador proxy, consulte a documentação fornecida e certifique-se de ter todos os componentes e
bibliotecas de software exigidos, de modo que seja possível instalá-los e configurá-los
corretamente.
Após instalar e configurar corretamente o gerador proxy, é necessário configurá-lo para funcionar
com o Dreamweaver.
Observação: Atualmente, o desenvolvimento de serviços da Web no Dreamweaver está limitado ao ambiente
Windows. Para desenvolver páginas que acessam serviços da Web no Macintosh, é necessário utilizar um servidor
de aplicativos separado no Windows NT/2000/XP ou UNIX para executar o serviço da Web e seu ambiente de
aplicação.
Para configurar um gerador proxy para funcionar com o Dreamweaver:
1 Selecione Janela > Componentes de servidor para abrir o painel Componentes de servidor.
2 No painel Componentes, escolha Serviços da Web no menu pop-up no canto superior

esquerdo do painel e clique no sinal de adição (+) para adicionar um serviço da Web e selecione
Adicionar utilizando WDSL.
A caixa de diálogo Adicionar utilizando WSDL é exibida.

3 Na caixa de diálogo Adicionar utilizando WSDL, selecione Editar a lista de geradores proxy no
menu pop-up Gerador proxy. A caixa de diálogo Geradores proxy é exibida.
4 Clique em Novo, selecione o gerador proxy no menu pop-up e clique em Concluída.

Se o gerador proxy que você deseja utilizar não aparecer na lista, escolha Gerador proxy padrão
para exibir a caixa de diálogo Gerador proxy padrão.
5 A caixa de diálogo Gerador proxy padrão permite configurar o gerador proxy selecionado ou
configurar um gerador proxy novo. As caixas de texto da caixa de diálogo variam, dependendo
do gerador proxy selecionado. Preencha a caixa de diálogo e clique em OK.
Para obter mais informações sobre como preencher a caixa de texto do diálogo, clique no botão
Ajuda na caixa de diálogo.
598 Capítulo 36
6 Após preencher as definições da caixa Gerador de proxy padrão, clique em OK.
Quando o Dreamweaver ler uma descrição WSDL de um serviço da Web, o Dreamweaver
executará as ações a seguir correspondentes aos campos do Gerador proxy padrão:
• Efetua a leitura do WSDL como entrada para localizar o serviço da Web.
• Gera o proxy de serviço do serviço da Web com o ambiente de execução especificado.
• Compila o proxy com o compilador especificado.
• Produz o código-fonte do proxy e o proxy compilado na pasta de destino especificada.
Como adicionar um proxy de serviço da Web utilizando a

descrição WSDL
Após especificar um gerador proxy e configurar os modelos de servidor da Web para suporte, é
necessário localizar um serviço da Web que forneça a funcionalidade desejada e gere um proxy
para aquele serviço.
Para selecionar um serviço da Web e gerar proxy de seu arquivo WSDL:
1 Abra a página à qual deseja adicionar o serviço da Web.

2 Selecione Janela > Componentes de servidor para abrir o painel Componentes de servidor.
esquerdo do painel, clique no sinal de adição (+) para e selecione Adicionar utilizando WDSL.
4 Especifique a URL do arquivo WSDL que deseja utilizar.

Se a URL do arquivo WSDL for conhecida, digite a URL da caixa de texto WSDL.
Se a URL do arquivo WSDL não for conhecida, procure a URL em um diretório de serviços da
Web. Ao localizar o serviço da Web desejado, copie e cole a URL do serviço da Web na caixa de
edição do WSDL. Para iniciar o navegador da Web, clique no botão procurar UDDI e
selecione um dos registros de serviço da Web listados. O Dreamweaver iniciará o navegador e
abrirá o registro selecionado. Localize o serviço da Web que deseja utilizar e copie a URL de seu
arquivo WSDL para a área de trabalho do Windows. Retorne ao seletor de serviços da Web e
cole a URL na caixa de diálogo.
É possível editar a lista de registros de serviços da Web para incluir diretórios de serviço da Web
adicionais ou provedores de serviço da Web específicos. Para obter mais informações, veja
“Como editar a lista de sites de serviços da Web UDDI”, na página 602.

5 Selecione um gerador proxy que oferece suporte para o modelo de servidor de serviço da Web
desejado no menu pop-up Geradores proxy.
Certifique-se de que o gerador proxy esteja instalado e configurado em seu sistema. Para obter
mais informações, veja “Como instalar e configurar os geradores proxy”, na página 596.
6 Clique em OK.
O gerador proxy cria um proxy para o serviço da Web e inicia uma sondagem. Sondagem é o
processo em que o gerador proxy examina a estrutura interna do proxy de serviço da Web para
tornar as interfaces, métodos e propriedades disponíveis através do Dreamweaver.
O serviço da Web está agora disponível para uso no site e é exibido no painel Componentes de
servidor.
Como adicionar um serviço da Web a uma página

Após selecionar um serviço da Web gerando seu proxy e adicionando-o ao painel Componentes
de servidor, é possível inseri-lo em uma página. A ilustração a seguir mostra o painel
Componentes de servidor com o proxy de serviço da Web Helloworld adicionado. O proxy
Helloworld gera um método, sayHello, imprimindo a expressão “Olá mundo!”.
Os exemplos a seguir criam instâncias do serviço da Web HelloWorld utilizando o ColdFusion.

Para obter mais informações sobre como criar serviços da Web e exibir exemplos adicionais que
utilizando .NET e JSP, visite o Centro de suporte da Macromedia:
http://www.macromedia.com/go/creating_web_services.
Para adicionar um serviço da Web a uma página:
1 Na janela Documento, Visualização de código, arraste o método sayHello para o HTML da

página.
O Dreamweaver adiciona o método e parâmetros fictícios à página.
600 Capítulo 36
2 Edite o código inserido com nomes de instâncias de serviço apropriados, tipos de dados e
valores de parâmetro conforme exigido pelo serviço da Web. O serviço da Web deve fornecer
descrições dos tipos de dados e valores de parâmetro.
No exemplo em ColdFusion a seguir, o serviço da Web inclui as tags <cfinvoke>. Ao
desenvolver um serviço da Web em ColdFusion, use <cfinvoke> para criar instâncias do serviço
da Web e iniciar seus métodos.
<html>
<head>
<title>Web Service</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<cfinvoke
webservice="http://velcro-qa-7:8100/helloworld/HelloWorld.cfc?wsdl"
method="sayHello"
returnvariable="aString">
</cfinvoke>
</body>
</html>
3 Se desejar ligar um valor de retorno a um elemento visual, alterne para o modo de visualização
do projeto e coloque um elemento visual na página que pode aceitar ligações de dados. Em
seguida, retorne para a visualização de código e digite o código apropriado para ligar o valor
retornado ao elemento visual. Ao criar serviços da Web, consulte a documentação do provedor
de tecnologia para obter a sintaxe adequada para criar instâncias do serviço e exibir os valores
retornados à página.
Neste exemplo, o valor retornado para a variável aString é produzido utilizando a tag
<cfoutput> no ColdFusion. Isto exibirá a sentença “O serviço da web diz: Hello world!” na
página.
<html>
<head>
<title>Web Service</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<cfinvoke
webservice="http://velcro-qa-7:8100/helloworld/HelloWorld.cfc?wsdl"
method="sayHello"
returnvariable="aString">
</cfinvoke>
The web service says: <cfoutput>#aString#</cfoutput>

</body>
</html>
4 Ao distribuir páginas da Web a um servidor de produção, o Dreamweaver copia

automaticamente as páginas, o proxy e qualquer biblioteca necessária para o servidor da Web.
Observação: Se o aplicativo for desenvolvido com um proxy instalado em um computador separado daquele
em que as páginas estão sendo desenvolvidas ou se você estiver utilizando uma ferramenta de gerenciamento
de site que não pode copiar todos os arquivos dependentes para o servidor, é necessário preparar tanto o proxy
como quaisquer outros arquivos de biblioteca dependentes, caso contrário, suas páginas não poderão se
comunicar com o aplicativo de serviço da Web.

Como editar a lista de sites de serviços da Web UDDI
O seletor de serviços da Web fornece uma lista de diretórios de serviços da Web baseado em
UDDI, da qual é possível selecionar serviços da Web. É possível editar esta lista para adicionar ou
excluir diretórios de serviço da Web.
Para editar a lista de sites de serviços da Web
1 No Dreamweaver, selecione Janela > Componentes para abrir o painel Componentes.

esquerdo do painel e clique no sinal de adição (+) para adicionar um serviço da Web.
3 No seletor de serviços da Web, clique no ícone em forma de globo e escolha Editar a lista de
sites UDDI no menu pop-up.
A caixa de diálogo Sites UDDI é exibida.
4 Na caixa de diálogo Sites UDDI é possível adicionar novos sites de serviço da Web, editar o
nome e URL de sites existentes e remover sites não desejados.
Para remover uma conexão existente, selecione-a na lista e clique no botão Remover. Para
adicionar um site novo ou modificar um site existente, clique no botão Novo ou Editar e
preencha a caixa de diálogo.
602 Capítulo 36
CAPÍTULO 37
Como adicionar comportamentos de servidor
personalizados
O Macromedia Dreamweaver MX vem com um conjunto de comportamentos de servidor

incorporados que permitem adicionar facilmente recursos dinâmicos a um site. Para aprimorar as
funcionalidades do Dreamweaver, é preciso criar novos comportamentos de servidor para adequar
às suas necessidades de desenvolvimento ou obter comportamentos de servidor do site
Macromedia Exchange na Web.
• “Instalação de outro comportamento de servidor”, na página 603
• “Como criar comportamentos de servidor”, na página 604
• “Como editar e modificar o código de comportamento do servidor”, na página 618
Instalação de outro comportamento de servidor

Muitos parceiros de Macromedia e desenvolvedores independentes criam comportamentos de
servidor personalizados para atender às necessidades de desenvolvimento específicas da Web. É
possível acessar e efetuar o download desses comportamentos de servidor personalizados do site de
intercâmbio da Macromedia para o Dreamweaver na Web.
Os comportamentos do servidor e outras extensões disponíveis através do site Macromedia
Exchange na Web permitem adicionar facilmente novos recursos ao Dreamweaver. Cada
comportamento de servidor inclui uma breve descrição, análises de usuário e um grupo de
discussão no qual é possível formular questões e obter suporte para os comportamentos de
servidor cujo download foi efetuado.
Para acessar o Macromedia Exchange:
1 No Dreamweaver MX, selecione Ajuda > Dreamweaver Exchange.

O navegador abrirá a página Macromedia Exchange para o Dreamweaver na Web.
2 Efetue logon no Exchange com o identificador Macromedia ou, se ainda não tiver criado um
identificador para acessar o Macromedia Exchange, siga as instruções para abrir uma conta
Macromedia.
Observação: O Macromedia Exchange também pode ser acessado no painel Comportamentos de servidor
(Janela > Comportamentos), clicando no botão com sinal de adição (+) e escolhendo Obter outros comportamentos
de servidor.
603
Para instalar um comportamento de servidor ou outra extensão em Dreamweaver:
1 Inicie o Extension Manager selecionando Ajuda > Gerenciar extensões.

2 Selecione Arquivo > Instalar o pacote no Extension Manager.
Para obter mais informações, consulte a ajuda on-line do Extension Manager.
Como criar comportamentos de servidor

Se você for programador experiente em ColdFusion, ASP.NET, JavaScript, VBScript, PHP ou
Java, é possível gravar os próprios comportamentos de servidor. As etapas para criar um
comportamento de servidor incluem as seguintes tarefas:
• Escrever um ou mais blocos de código que executam a ação necessária.
Para obter mais informações sobre a criação de comportamentos de servidor com o Criador de
comportamentos de servidor do Dreamweaver, consulte “Utilização do Criador de
comportamentos de servidor”, na página 605. Para obter mais informações sobre a sintaxe que
os comportamentos de servidor do Dreamweaver pode suportar, veja “Gravação de um bloco
de código”, na página 608.
• Como especificar onde o bloco de código deve ser inserido no código HTML da página
Para obter mais informações sobre o posicionamento de blocos de código em uma página, veja
“Posicionamento de um bloco de código”, na página 614.
• Se o comportamento do servidor exigir a especificação de um valor para um parâmetro, crie
uma caixa de diálogo solicitando que o programador da Web que aplica o comportamento
forneça um valor apropriado.
Para obter mais informações sobre valores de parâmetro para um comportamento de servidor
utilizando uma caixa de diálogo, veja “Criação de uma caixa de diálogo para um
comportamento de servidor personalizado”, na página 615.
• Teste do comportamento do servidor antes de torná-lo disponível a outros comportamentos.
Para obter instruções sobre o teste de comportamentos de servidor, veja “Teste de um
comportamento de servidor”, na página 617.
604 Capítulo 37
Utilização do Criador de comportamentos de servidor
Use o Criador de comportamentos de servidor para adicionar um ou mais blocos de código que o
comportamento insere na página.
Para gravar blocos de código de comportamento de servidor:

botão com sinal de adição (+) e escolha Novo comportamento de servidor no menu pop-up.
2 A caixa de diálogo Novo comportamento de servidor é exibida.
3 No menu pop-up Tipo de documento, selecione o tipo de documento para o qual o

comportamento de servidor está sendo desenvolvido.
4 Na caixa de texto Nome, digite o nome do comportamento de servidor.
5 Se desejar copiar um comportamento de servidor existente para adicioná-lo ao comportamento
que está sendo criado, selecione a caixa de seleção Copiar o comportamento de servidor
existente.
Quando esta caixa for selecionada, uma lista de comportamentos de servidor disponíveis será
exibida no menu pop-up Comportamento a ser copiado.
6 Clique em OK.
A caixa de diálogo Criador de comportamentos de servidor é exibida.
Como adicionar comportamentos de servidor personalizados 605

7 Para adicionar um novo bloco de código, clique no botão de adição (+).
A caixa de diálogo Criar um novo bloco de código é exibida.
8 Digite um nome para o bloco de código a ser criado.

9 Na caixa de texto Bloco de código, digite o código necessário para implementar o
comportamento de servidor. Ao digitar o código na caixa de texto, é possível inserir apenas
uma única tag ou um único bloco de código. Se for necessário digitar várias tags ou blocos de
código, será preciso criar a mesma quantidade de blocos de código individuais na caixa de
diálogo Criador de comportamentos de servidor.
10 Se o comportamento de servidor exibir parâmetros de execução, é possível incluí-los no código
clicando no botão Inserir parâmetros no bloco de código. A caixa de diálogo Inserir parâmetros
no bloco de código é exibida.
11 Digite um nome para os parâmetros no menu pop-up Nome do parâmetro e clique em OK.
O parâmetro será inserido no bloco de código no ponto de inserção criado pelo cursor antes da
definição do parâmetro.
12 Selecione uma opção no menu pop-up Inserir código especificando a localização na qual
incorporar os blocos de código.
Para obter mais informações, veja “Posicionamento de um bloco de código”, na página 614.
606 Capítulo 37
13 É possível especificar informações adicionais sobre o servidor que está sendo criado utilizando o
painel Opções avançadas.
Clique no botão Avançado para exibir as opções avançadas.
Identificador especifica se o bloco de código deve ou não ser tratado como um identificador.
Por padrão, cada bloco de código é um identificador. Ao encontrar um bloco de código
identificador em algum local de um documento, o Dreamweaver listará o comportamento no
painel Comportamentos de servidor. Use a caixa de seleção Identificador para especificar se o
bloco de código deve ser tratado como um identificador.
Pelo menos um dos blocos de código do comportamento de servidor deve ser um identificador.
Um bloco de código não deverá ser um identificador se o mesmo bloco de código for utilizado
em outro comportamento de servidor ou se o bloco de código fornecer uma parte da
funcionalidade normalmente utilizada que ocorre naturalmente em uma página.
Título do comportamento de servidor especifica o título do comportamento conforme aparece
no painel Comportamentos de servidor.
Quando o designer da página clicar no botão de adição (+) no painel Comportamentos de
servidor, o título do novo comportamento de servidor será exibido no menu pop-up. Quando um
designer aplicar uma instância de um comportamento de servidor em um documento, o
comportamento será exibido na lista de comportamentos aplicados no painel Comportamentos
de servidor. Use a caixa Título do comportamento de servidor para especificar o conteúdo do
menu pop-up do sinal de adição (+) e da lista de comportamentos aplicados.
O valor inicial na caixa é o nome fornecido na caixa de diálogo Novo comportamento de
servidor. À medida que os parâmetros forem definidos, o nome será automaticamente
atualizado para que os parâmetros sejam exibidos dentro dos parênteses, após o nome do
comportamento de servidor.
Set Session Variable (@@Name@@, @@Value@@)
Se o usuário aceitar o valor padrão, o que estiver antes dos parênteses aparecerá no menu pop-up do
sinal de adição (+) (por exemplo: Set Session Variable). O nome e os parâmetros serão mostrados na
lista de comportamentos aplicados, por exemplo: Set Session Variable ("abcd", "5").
Bloco de código a ser selecionado especifica o bloco de código selecionado quando o usuário
escolhe o comportamento no painel Comportamentos de servidor.
Quando um comportamento de servidor for aplicado, um dos blocos de código do
comportamento será designado como “bloco de código a ser selecionado”. Se o comportamento
de servidor for aplicado e selecionado em seguida no painel Comportamentos de servidor na
janela Documento, o Dreamweaver selecionará automaticamente o bloco designado. Por padrão,
o Dreamweaver seleciona o primeiro bloco de código que não estiver acima da tag html. Se todos
os blocos de código estiverem acima da tag html, o Dreamweaver selecionará o primeiro bloco. Os
usuários experientes podem especificar qual bloco de código será selecionado.

14 Se for necessário criar mais blocos de código, repita as etapas de 7 a 13 se necessário.
15 Se o comportamento de servidor exigir o fornecimento de parâmetros, será preciso criar uma
caixa de diálogo que aceite parâmetros de quem estiver aplicando o comportamento.
Para criar uma caixa de diálogo que aceite parâmetros de entrada do usuário, veja “Criação de
uma caixa de diálogo para um comportamento de servidor personalizado”, na página 615.
16 Após executar as etapas anteriores conforme solicitado pelo comportamento de servidor que
está sendo criado, clique em OK.
Após a criação de um comportamento de servidor, ele será listado no painel Comportamentos
de servidor. Testar o comportamento de servidor e assegurar que ele funcione adequadamente.
Para obter mais informações, consulte as seções a seguir:
• “Gravação de um bloco de código”, na página 608
• “Uso de parâmetros em um comportamento de servidor”, na página 609
• “Como tornar um bloco de código condicional”, na página 610
• “Repetição de um bloco de código”, na página 611
• “Instruções de codificação”, na página 613
• “Posicionamento de um bloco de código”, na página 614
Gravação de um bloco de código

Os blocos de código criados no Criador de comportamentos de servidor são encapsulados em um
comportamento de servidor, que é exibido no painel Comportamentos de servidor. O código
pode ser qualquer código em execução válido para o modelo de servidor especificado. Por
exemplo: se for escolhido ColdFusion como o tipo de documento para o comportamento de
servidor personalizado, o código escrito deverá ser um código ColdFusion válido executado em
um servidor de aplicativos ColdFusion.
Como inserir blocos de código

É possível criar os blocos de código diretamente no Criador de comportamentos de servidor ou
copiar e colar o código de outras fontes. Cada bloco de código criado no Criador de
comportamentos de servidor deve apenas ser uma tag ou bloco de script. Se for necessário inserir
vários blocos de tag, dividi-los em blocos de código separados.
Inclusão de parâmetros
É possível incluir parâmetros no seu código em execução e permitir que o designer da página
forneça os valores de parâmetros. Para isso, digite os marcadores de parâmetro no código, da
seguinte maneira:
@@parameterName@@
Para obter mais informações, veja “Uso de parâmetros em um comportamento de servidor”, na
página 609.
608 Capítulo 37
Aplicação de uma condição e repetição de um elemento para um bloco
de código
Para executar o bloco de código ou parte dele apenas se determinada condição ou condições se
aplicarem, utilize a seguinte sintaxe:
<@ if (expression1) @>
code block1
[<@ elseif (expression2) @>
code block2]*
[<@ else @>
code block3]
<@ endif @>
Os colchetes ([ ]) indicam o código opcional e o asterisco (*) denota zero ou mais instâncias. A
expressão de condição é qualquer expressão de condição JavaScript válida e pode conter
parâmetros de comportamento de servidor. Para obter mais informações, veja “Como tornar um
bloco de código condicional”, na página 610.
Para repetição do bloco de código ou de parte dele um determinado número de vezes, utilize a
seguinte sintaxe:
<@ loop (@@param1@@,@@param2@@) @>
code block
<@endloop@>
A diretiva ‘loop’ considera uma lista separada por vírgulas de matrizes de parâmetros como
argumentos. O texto que se repete será duplicado n vezes, em que n é o comprimento dos argumentos
de matrizes de parâmetros. Se mais de um argumento de matriz de parâmetros for especificado, todas
as matrizes deverão ter o mesmo comprimento. Na enésimaavaliação do loop, os enésimos elementos
das matrizes de parâmetros substituem as instâncias de parâmetro associadas no bloco de código. Para
obter mais informações, veja “Repetição de um bloco de código”, na página 611.
Para obter informações genéricas sobre codificação, consulte “Instruções de codificação”, na
página 613.
Uso de parâmetros em um comportamento de servidor

É possível incluir parâmetros no código de comportamento de um servidor e permitir que o
designer da página forneça os valores de parâmetro necessários antes da inserção do código de
comportamento de servidor na página. Para permitir que o designer da página forneça valores de
parâmetros, digite os marcadores de parâmetro no código, conforme mostrado:
@@parameterName@@
O exemplo de comportamento de servidor ASP a seguir contém o parâmetro formParam, o qual
requer que o usuário que está inserindo o comportamento forneça o nome de um objeto de
formulário:
<% Session(“lang_pref”) = Request.Form(“formParam”); %>
Para criar um parâmetro que permite ao usuário fornecer o valor necessário:
1 Incluir a seqüência de caracteres formParam nos marcadores de parâmetro:

<% Session(“lang_pref”) = Request.Form(“@@formParam@@”); %>
2 Crie uma caixa de diálogo que solicita ao designer que forneça o nome do objeto de
formulário. Para obter mais informações, consulte “Criação de uma caixa de diálogo para um
comportamento de servidor personalizado”, na página 615.

Como tornar um bloco de código condicional
O Dreamweaver permite desenvolver blocos de código que incorporam instruções de controle
executadas condicionalmente. O Criador de comportamentos de servidor usa instruções if,
elseif e else e pode conter parâmetros de comportamento de servidor. Isto permite inserir blocos
de texto alternativos com base nos valores de relações OR entre parâmetros de comportamento de
servidor. As instruções if, elseif e else aparecem conforme mostrado a seguir. Observe que os
colchetes ([ ]) denotam código opcional e o asterisco (*) denota zero ou mais instâncias.
<@ if (expression1) @>
conditional text1
[<@ elseif (expression2) @>
conditional text2]*
[<@ else @>
conditional text3]
<@ endif @>
As expressões de condição podem ser qualquer expressão JavaScript que pode ser avaliada com a
função JavaScript eval() e podem incluir um parâmetro de comportamento de servidor marcado
por @@ (as @@ são necessárias para distinguir o parâmetro das variáveis e palavras-chave
JavaScript).
É possível aninhar qualquer número de condicionais ou uma diretiva loop (consulte “Repetição
de um bloco de código”, na página 611) em um diretiva condicional. Por exemplo: é possível
especificar que, se uma expressão for verdadeira, um loop deverá ser executado.
Observação: Novas linhas após cada “@>” são ignoradas.
Uso eficaz de uma expressão condicional

Ao utilizar diretivas if, else e elseif na tag insertText XML, o texto participante será pré-
processado para resolver as diretivas if e para determinar qual texto deve ser incluído no resultado.
As diretivas if e elseif tratam a expressão como um argumento. A expressão de condição é
idêntica àquelas expressões de condição em JavaScript e também pode conter parâmetros de
comportamento de servidor. Diretivas como estas permitem escolher entre blocos de código
alternativos com base nos valores de parâmetros de comportamento de servidor ou de relações
entre eles.
Por exemplo: o código JSP mostrado a seguir vem de um comportamento de servidor
Dreamweaver MX que usa o bloco de código condicional:
@@rsName@@.close();
<conditional_code>
@@rsName@@_hasData = @@rsName@@.next();
Se o comportamento de servidor usar um conjunto de registros normal, o alocador de espaço
<conditional_code> será substituído por:
@@rsName@@ = Statement@@rsName@@.executeQuery();
Se o comportamento de servidor utilizar um conjunto de registros de um objeto chamável,
utilizará o seguinte código em substituição:
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();
610 Capítulo 37
Se o comportamento de servidor for adicionado para um objeto chamável, o usuário digitará um
valor para o parâmetro @@callableName@@ na caixa de diálogo Parâmetro do comportamento de
servidor. Caso contrário, o parâmetro @@callableName@@ deverá estar vazio. Assim, é possível
regravar o texto inserido anteriormente com o uso de @@callableName@@ como o argumento if.
Nesse exemplo, se o parâmetro @@callableName@@ for fornecido com um valor e o primeiro bloco
de código condicional (que contém o método getResultSet() ) for selecionado:
@@rsName@@.close();
<@ if (@@callableName@@ != '') @>
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();@ else @>
@@rsName@@ = Statement@@rsName@@.executeQuery();
<@ endif @>
@@rsName@@_hasData = @@rsName@@.next();
Repetição de um bloco de código

Ao criar comportamentos de servidor, é possível usar construções de loop para repetir um bloco
de código um certo número de vezes. A sintaxe do loop é:
<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>
code block
<@endloop@>
A diretiva ‘loop’ aceita uma lista separada por vírgulas de matrizes de parâmetros como
argumentos. Nesse caso, os argumentos de matriz de parâmetros permitem que um usuário
forneça vários valores para um único parâmetro. O texto que se repete será duplicado n vezes, em
que n é o comprimento dos argumentos de matrizes de parâmetros. Se mais de um argumento de
matriz de parâmetros for especificado, todas as matrizes deverão ter o mesmo comprimento. Na
enésimaavaliação do loop, os enésimos elementos das matrizes de parâmetros substituem as
instâncias de parâmetro associadas no bloco de código.
Ao criar uma caixa de diálogo posteriormente para o comportamento de servidor (consulte
“Criação de uma caixa de diálogo para um comportamento de servidor personalizado”, na
página 615), será possível adicionar um controle à caixa de diálogo que permitirá ao designer da
página criar matrizes de parâmetros. O Dreamweaver inclui um simples controle de matrizes que
pode ser usado para criar caixas de diálogo. Este controle, chamado Lista de campos de texto
separada por vírgulas, está disponível através do Criador de comportamentos de servidor. Para criar
elementos de interface do usuário de maior complexidade, consulte a documentação API para criar
uma caixa de diálogo com um controle para matrizes (um controle de grade, por exemplo).
Diretivas ‘loop’ não podem ser aninhadas, mas diretivas condicionais (veja “Como tornar um
bloco de código condicional”, na página 610) podem ser aninhadas em uma diretiva ‘loop’.
O exemplo a seguir mostra como tais blocos de código repetidos podem ser usados para criar
comportamentos de servidor (o exemplo é um comportamento 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>

Nesse exemplo, a tag CFSTOREDPROC pode incluir zero ou mais tags CFPROCPARAM. Entretanto, sem
suporte para a diretiva ‘loop’, não há como incluir as tags CFPROCPARAM na tag inserida
CFSTOREDPROC. Se essas tags forem criadas como um comportamento de servidor sem o uso da
diretiva ‘loop’, será preciso dividir esse exemplo em dois participantes: uma tag principal
CFSTOREDPROC e uma tag CFPROCPARAM cujo tipo de participante é múltiplo.
Ao utilizar a diretiva ‘loop’, o mesmo procedimento pode ser escrito da seguinte maneira:
<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>
No exemplo anterior e no caso de blocos de código condicionais, as novas linhas após @> são
ignoradas.
Se o usuário digitar os valores de parâmetro a seguir na caixa de diálogo Comportamento de
servidor:
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 inserirá o seguinte código em execução na página:
<CFSTOREDPROC procedure="proc1"
datasource=#MM_connection1_DSN#
username=#MM_connection1_USERNAME#
password=#MM_connection1_PASSWORD#>
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#"

<CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#"
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>
Observação: Matrizes de parâmetros não podem ser utilizadas fora de um loop, exceto como parte de uma
expressão diretiva condicional.
Uso das variáveis _length e _index da diretiva ‘loop’

A diretiva ‘loop’ inclui duas variáveis internas que podem ser usadas para condições if
incorporadas. As variáveis são: _length e _index. A variável _length avalia o comprimento das
matrizes processadas pela diretiva ‘loop’, enquanto a variável _index avalia o índice atual da
diretiva ‘loop’. Para assegurar que as variáveis sejam reconhecidas apenas como diretivas e não
como parâmetros reais a serem passados no loop, não as inclua em @@.
612 Capítulo 37
Um exemplo do uso de variáveis internas é aplicá-las ao atributo import da diretiva de página. O
atributo import requer a separação dos pacotes por vírgulas. Se a diretiva loop se estender ao redor do
atributo import inteiro, é recomendável só processar o nome do atributo import= como saída na
primeira iteração do loop (isso incluiria as aspas duplas de fechamento (”) e não a saída de uma
vírgula na última iteração do loop). Ao utilizar a variável interna, é possível expressá-la do seguinte
modo:
<@loop (@@Import@@)@>
<@ if(_index == 0)@>import="
<@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>,
<@ endif @>
<@endloop@>
Instruções de codificação
De modo geral, o código do comportamento de servidor deve ser compacto e confiável. Os
desenvolvedores de aplicativos para a Web são geralmente bastante exigentes quanto ao código
adicionado às suas páginas. Siga as práticas de codificação geralmente aceitas para as linguagens de
tipos de documentos (ColdFusion, ASP.NET, JavaScript, VBScript, PHP, Visual Basic ou Java).
Ao gerar comentários, leve em consideração os diferentes públicos técnicos que podem precisar
compreender o código, como designers da Web e de interação ou outros programadores de
aplicativos da Web. Incluir comentários que descrevam exatamente o objetivo do código e
quaisquer instruções especiais para inclusão em uma página.
Verificação de erros
Um requisito importante é a verificação de erros. O código do comportamento de servidor deve
tratar as ocorrências de erros de forma precisa. Prever qualquer eventualidade. E se uma solicitação
de parâmetro falar, por exemplo? E se nenhum registro retornar de uma consulta?
Utilize nomes exclusivos

O código deve ser claramente identificável e evitar conflitos de nomes com o código existente. Por
exemplo: se a página contiver uma função denominada hideLayer() e uma variável global
denominada ERROR_STRING e o comportamento de servidor inserir código que utilize esses mesmos
nomes, o comportamento de servidor poderá entrar em conflito com o código existente.
Crie um prefixo para as funções e variáveis globais do código

Crie seu próprio prefixo para as funções e variáveis globais em execução que serão incluídas em
uma página. Uma convenção seria utilizar as iniciais do nome do usuário. Nunca utilize o prefixo
MM_: ele está reservado apenas para uso da Macromedia. A Macromedia precede todas as funções e
variáveis globais do prefixo MM_ para evitar que elas entrem em conflito com o código.
var MM_ERROR_STRING = "...";
function MM_hideLayer() {
Evitar blocos de código semelhantes

Certifique-se de que o código nos blocos não seja muito semelhante ao código nos outros blocos.
Se um bloco de código for muito parecido com outro bloco de código na página, o painel
Comportamentos de servidor poderá identificar incorretamente o primeiro bloco como uma
instância do segundo bloco (ou vice-versa). Uma solução simples seria adicionar um comentário a
um bloco de código para torná-lo mais exclusivo.

Posicionamento de um bloco de código
Após gravar blocos de código no Criador de comportamentos de servidor, é necessário especificar
onde inseri-los no código-fonte HTML da página.
No menu pop-up Inserir código, é possível escolher se o bloco de código será inserido acima da
tag de abertura <html>, abaixo da tag de finalização </html>, em relação a outra tag na página ou a
uma tag selecionada pelo criador da página.
Para posicionar um bloco de código acima da tag <html>:
1 No menu pop-up Inserir código escolha Acima da tag <html>.

2 Especifique um local acima da tag, escolhendo uma opção no menu pop-up Posição relativa.
O bloco pode ser inserido no início do arquivo, antes dos blocos de código que abrem os
conjuntos de registros e após os blocos de código que abrem os conjuntos de registros ou
imediatamente acima da tag <html>. É possível especificar também uma posição personalizada.
3 Para especificar uma posição personalizada, escolha Posição personalizada no menu pop-up
Posição relativa e, em seguida, atribua um peso ao bloco de código.
O Dreamweaver atribui peso 50 a todos os blocos de código de abertura de conjuntos de
registros inseridos acima da tag <html>. Se o peso de dois ou mais blocos coincidir, o
Dreamweaver determinará aleatoriamente a ordem dos blocos.
Use a opção Posição personalizada quando for necessário inserir mais de um bloco de código
em uma determinada ordem. Por exemplo: se desejar inserir uma série ordenada de três blocos
de código após os blocos que abrem os conjuntos de registros, digite um peso 60 para o
primeiro bloco, 65 para o segundo e 70 para o terceiro.
Para posicionar um bloco de código abaixo da tag de finalização </html>:
1 No menu pop-up Inserir código, escolha Abaixo da tag </html>.

2 Especifique um local abaixo da tag, escolhendo uma opção no menu pop-up Posição relativa.
O bloco pode ser inserido logo depois da tag </html>, imediatamente antes dos blocos de
código que fecham os conjuntos de registros, imediatamente após os blocos de código que
fecham os conjuntos de registros ou imediatamente antes do final do arquivo. É possível
especificar também uma posição personalizada.
3 Para especificar uma posição personalizada, escolha Posição personalizada no menu pop-up
Posição relativa e, em seguida, atribua um peso ao bloco de código.
O Dreamweaver atribui o peso 50 a todos os blocos de código de finalização dos conjuntos
de registros inseridos abaixo da tag /html>. Se o peso de dois ou mais blocos coincidir, o
Dreamweaver determinará aleatoriamente a ordem dos blocos.
Use a opção Posição personalizada quando for necessário inserir mais de um bloco de código
em uma determinada ordem. Por exemplo: para inserir uma série ordenada de três blocos de
código antes dos blocos que fecham os conjuntos de registros, digite um peso 30 para o
primeiro bloco, 35 para o segundo e 40 para o terceiro.
614 Capítulo 37
Para posicionar um bloco de código em relação a outra tag na página:
1 No menu pop-up Inserir código, escolha Relativo a uma determinada tag.

2 Na caixa de texto Tag, digite a tag ou selecione uma no menu pop-up.
Se uma tag for digitada, não inclua os colchetes angulares (< >).
3 Especifique um local em relação à tag, com a escolha de uma opção no menu pop-up Posição
relativa.
O bloco de código pode ser inserido logo antes ou logo depois das tags de abertura ou
finalização. Também é possível substituir a tag pelo código, inserir o código como valor de um
atributo da tag (será exibida uma caixa que permite escolher o atributo) ou inserir o código na
tag de abertura.
Para posicionar um bloco de código em relação a uma tag selecionada pelo designer da página:
1 No menu pop-up Inserir código, escolha Relativo à seleção.

2 Especifique um local relativo à seleção com a escolha de uma opção no menu pop-up Posição
relativa.
O bloco de código pode ser inserido logo antes ou logo depois da seleção. A seleção também
pode ser substituída pelo bloco de código ou ele poderá envolver a seleção.
Para colocar o bloco de código em torno de uma seleção, ela deve consistir em tags de abertura
e finalização sem conteúdo, conforme mostrado a seguir.
<CFIF Day=”Monday”></CFIF>
A parte da tag de abertura do bloco de código será inserida antes da tag de abertura da seleção e
a parte da tag de finalização do bloco de código será inserida após a tag de finalização da
seleção.
Criação de uma caixa de diálogo para um comportamento de servidor

personalizado
Os comportamentos de servidor muitas vezes requerem que o designer da página forneça um
valor de parâmetro. Esse valor deve ser inserido antes que o código do comportamento de servidor
seja inserido na página. Para isso, é possível criar uma caixa de diálogo que solicita um valor de
parâmetro a quem estiver implementando o comportamento de servidor.
Crie a caixa de diálogo definindo os parâmetros fornecidos pelo designer no código. Após definir
todos os parâmetros, será possível gerar uma caixa de diálogo para o comportamento de servidor.
Observação: Um parâmetro será inserido no bloco de código sem a interferência do usuário, se for especificado
que o código deve ser incluído em relação a uma tag específica escolhida pelo designer da página (ou seja,
selecionando Relativo a uma determinada tag, no menu pop-up Inserir código). O parâmetro adiciona um menu de
tags à caixa de diálogo do comportamento para que o designer da página possa escolher uma tag.
Para criar um parâmetro no código do comportamento de servidor:
Digite um marcador de parâmetro em uma posição no código na qual o valor do parâmetro

fornecido deverá ser inserido. A sintaxe do parâmetro deve ser a seguinte:
@@parameterName@@
Por exemplo: se o comportamento de servidor contiver o seguinte bloco de código:
<% Session(“lang_pref”) = Request.Form(“Form_Object_Name”); %>

Para permitir que o designer da página forneça o valor de Form_Object_Name, delimite a seqüência
de caracteres em marcadores de parâmetro (@@):
<% Session(“lang_pref”) = Request.Form(“@@Form_Object_Name@@”); %>
É possível também realçar a seqüência de caracteres e, em seguida, clique no botão Inserir o
parâmetro no bloco de código. Digite um nome de parâmetro e clique em OK. O Dreamweaver
substitui cada instância da seqüência de caracteres realçada pelo nome do parâmetro especificado
delimitado pelos marcadores de parâmetro.
O Dreamweaver usa as seqüências de caracteres delimitadas entre marcadores de parâmetros para
identificar os controles na caixa de diálogo que ele gera (veja procedimento a seguir). No exemplo
anterior, o Dreamweaver cria uma caixa de diálogo com o seguinte identificador:
Observação: Nomes de parâmetros no código do comportamento de servidor não podem ter espaços. Portanto,
os identificadores da caixa de diálogo não podem ter espaços. Para incluir espaços no identificador, é possível
editar o arquivo HTML gerado.
Para criar uma caixa de diálogo para um comportamento de servidor:
1 No Criador de comportamentos de servidor, clique em Avançar.

Será exibida a caixa de diálogo que lista todos os parâmetros fornecidos pelo designer
definidos no código.
2 A ordem de exibição dos controles na caixa de diálogo também pode ser alterada, através da
seleção de um parâmetro e com um clique nas setas para cima e para baixo.
616 Capítulo 37
3 Outra alternativa é alterar o controle do parâmetro selecionando o parâmetro e escolhendo
outro controle na coluna Exibir como.
4 Clique em OK.
O Dreamweaver gera uma caixa de diálogo com um controle identificado para cada parâmetro
fornecido pelo designer, definido anteriormente. Para exibir a caixa de diálogo, clique no botão
com sinal de adição (+), no painel Comportamentos de servidor (Janela > Comportamentos de
servidor), e selecione o seu comportamento de servidor no menu pop-up.
Para editar a caixa de diálogo de um comportamento de servidor criado:
1 No painel Comportamentos de servidor (janela > Comportamentos de servidor), clique no

botão de adição (+) e selecione Editar os comportamentos de servidor no menu pop-up.
2 Selecione o comportamento de servidor na lista e clique em Abrir.
O Criador de comportamentos de servidor será exibido com o comportamento de servidor.
3 Clique em Avançar.
A caixa de diálogo que lista todos os parâmetros fornecidos pelo designer definida no código é
exibida.
4 A ordem de exibição dos controles na caixa de diálogo também pode ser alterada, através da
seleção de um parâmetro e com um clique nas setas para cima e para baixo.
5 Outra alternativa é alterar o controle do parâmetro selecionando o parâmetro e escolhendo
outro controle na coluna Exibir como.
6 Clique em OK.
Teste de um comportamento de servidor

O Macromedia Exchange recomenda que sejam feitos os seguintes testes em cada comportamento
de servidor criado:
• Aplique o comportamento pelo painel Comportamentos de servidor. Se o comportamento
contiver uma caixa de diálogo, digite dados válidos em cada campo e clique em OK. Verifique
se não ocorrem erros quando o comportamento é aplicado. Verifique se o código em execução
para o comportamento de servidor foi exibido no Inspetor de código.
• Aplique novamente o comportamento de servidor e digite dados inválidos em cada campo da
caixa de diálogo. Experimente deixar o campo em branco utilizando números grandes ou
negativos, caracteres inválidos (por exemplo: /, ?, :, *, etc.) e letras em campos numéricos. É
possível gravar rotinas de validação de formulário para manipular dados inválidos (as rotinas de
validação envolvem codificação manual, que está além do escopo deste manual).
Após aplicar com êxito o comportamento de servidor à página, verifique o seguinte:
• Verifique o painel Comportamentos de servidor para certificar-se de que o nome do
comportamento de servidor foi exibido na lista de comportamentos adicionados à página.
• Se for aplicável, verifique se os ícones de scripts de servidor são mostrados na página. Os ícones
de scripts de servidor genéricos são escudos dourados. Para ver os ícones, ative os Elementos
invisíveis (Exibir > Auxílios visuais > Elementos invisíveis).
• Na visualização de código (Exibir > Código), verifique se nenhum código inválido foi gerado.

Além disso, se o comportamento de servidor inserir código no documento que estabeleça uma
conexão a um banco de dados, crie um banco de dados de teste para testar o código incluído no
documento. Verifique a conexão definindo consultas que produzem conjuntos de dados diferentes
e de vários tamanhos.
Por fim, carregue à página no servidor e à abra em um navegador. Visualize o código-fonte
HTML da página e verifique se os scripts de servidor não geraram nenhum HTML inválido.
Como editar e modificar o código de comportamento do servidor

É possível editar qualquer comportamento de servidor criado com o Criador de comportamento de
servidor, incluindo comportamentos de servidor descarregados do site Macromedia Exchange na
Web ou de outros fornecedores.
Se um comportamento de servidor for aplicado a uma página e, em seguida, editado no
Dreamweaver, as instâncias do comportamento anterior não aparecerão mais no painel
Comportamentos de servidor. Esse painel procurará na página o código correspondente ao código
dos comportamentos de servidor conhecidos. Se o código de um comportamento de servidor
reconhecido pelo painel for alterado, o painel não reconhecerá as versões anteriores do
comportamento na página.
Para que a versões novas e antigas do comportamento sejam exibidas no painel, clique no botão
com sinal de adição (+) no painel Comportamentos de servidor, escolha Novo comportamento de
servidor e crie uma cópia do antigo comportamento de servidor.
Como editar um comportamento de servidor
Para editar o código de um comportamento de servidor gerado com o Criador de

comportamentos de servidor:
1 No painel Comportamentos de servidor (janela > Comportamentos de servidor), clique no

botão de adição (+) e selecione Editar os comportamentos de servidor no menu pop-up.
A caixa de diálogo Editar os comportamentos de servidor é exibida com todos os
comportamentos para a tecnologia de servidor atual.
618 Capítulo 37
2 Selecione o comportamento de servidor e clique em Editar.
A caixa de diálogo Criador de comportamentos de servidor é exibida.
3 Selecione o bloco de código apropriado e modifique o código a ser inserido nas páginas.
4 Altere ou adicione marcadores de parâmetros ao código, se desejado.
Para obter instruções, consulte “Criação de uma caixa de diálogo para um comportamento de
servidor personalizado”, na página 615.
5 Altere o local de inserção do bloco de código no código-fonte HTML da página, através da
escolha de outra opção no menu pop-up Inserir código, se preferir.
Para obter instruções, consulte “Posicionamento de um bloco de código”, na página 614.
6 Se o código modificado não contiver nenhum parâmetro fornecido pelo designer, clique em OK.
O Dreamweaver recupera o comportamento de servidor sem uma caixa de diálogo. O novo
comportamento de servidor aparecerá no menu pop-up do sinal de adição (+) do painel
Comportamentos de servidor.
7 Se o código modificado contiver parâmetros fornecidos pelo designer, clique em Avançar.
O Dreamweaver perguntará se você deseja criar uma nova caixa de diálogo para substituir a
anterior. Faça as alterações e clique em OK.
O Dreamweaver salva todas as alterações no arquivo EDML do comportamento de servidor.

620 Capítulo 37
CAPÍTULO 38
Criação de formulários interativos
Os formulários permitem interagir com ou reunir informações dos visitantes a um site da Web.
Os formulários coletam informações dos usuários e as enviam ao servidor para serem processadas.
Os formulários podem conter vários objetos que possibilitam a interação do usuário. Os objetos
de formulário incluem campos de texto, caixas de listagem, caixas de seleção e botões de opção. A
tag form inclui parâmetros que permitem especificar um caminho até o aplicativo ou script do
servidor que processará os dados do formulário, bem como o método que será utilizado ao
transmitir os dados do navegador ao servidor.
Quando um visitante insere informações no formulário do site da Web e clica no botão Enviar, os
dados são enviados ao servidor que contém o script ou aplicativo que as processa. O servidor
responderá enviando a informação solicitada pelo usuário ou efetuando alguma ação com base no
conteúdo do formulário. Normalmente, as informações são processadas por um script GGI
(Common Gateway Interface), página ColdFusion, Java Server Page (JSP) ou Active Server Page
(ASP). Observe que não é possível obter os dados do formulário sem utilizar um aplicativo ou
script de servidor para processar os dados.
3 Um novo documento HTML

é criado e enviado ao visitante
<HTML>
</HTML>
2 O script CF
processa o
formulário
1 O visitante preenche o
formulário e o envia a um
servidor da Web, para
processamento
O Dreamweaver MX permite criar diversos objetos de formulário, como campos de texto, campos
de senha, botões de opção, caixas de seleção, menus pop-up e imagens “clicáveis” (como um botão
Enviar).
621
O Dreamweaver também inclui o comportamento Validar o formulário que serve para verificar as
informações fornecidas pelo visitante. Por exemplo: é possível verificar se um endereço de correio
eletrônico contém o símbolo “@” ou se um campo necessário foi preenchido.
• Os objetos de formulário
• Como criar um formulário
• Como compreender os objetos de formulário
• Como inserir caixas de seleção e botões de rádio
• Incluir listas e menus
• Inclusão de botões de formulário
• A criação de formulários
• Utilização da função JavaScript do cliente para processar um formulário
• Como utilizar os comportamentos com formulários
• Criação de objetos de formulário dinâmicos
Os objetos de formulário
No Dreamweaver, os tipos de entrada em formulários são denominados objetos de formulário.
Os objetos de formulários são inseridos selecionando-se Inserir > Objetos de formulário ou
acessando os objetos de formulário no painel Formulários da barra Inserir mostrada abaixo.
A categoria Formulários apresenta os seguintes botões:

Formulário insere um formulário no documento. O Dreamweaver insere tags form de abertura e
finalização no código-fonte HTML. Quaisquer outros objetos de formulário, como campos de
texto, botões e outros, devem ser inseridos entre as tags form, para que os dados sejam processados
corretamente por todos os navegadores.
Campo de texto insere um campo de texto em um formulário. Os campos de texto aceitam
qualquer tipo de entrada alfanumérica. O texto digitado pode ser exibido como uma linha
simples, linhas múltiplas, marcadores ou asteriscos (para proteção das senhas).
Campo oculto insere um campo oculto no documento, no qual é possível armazenar dados do
usuário. Os campos ocultos permitem armazenar informações digitadas pelo usuário (como um
nome, endereço de correio eletrônico ou preferência de compra) e, em seguida, utilizá-las quando
o usuário visitar o site novamente.
Caixa de seleção insere uma caixa de seleção em um formulário. As caixas de seleção permitem
múltiplas respostas em um único grupo de opções. O usuário poderá selecionar quantas opções
forem aplicáveis.
Botão de opção insere um botão de opção em um formulário. Os botões de opção representam
opções exclusivas. A seleção de um botão em um grupo cancela a escolha de todos os outros
botões do mesmo. Por exemplo: o usuário pode selecionar Sim ou Não.
622 Capítulo 38
Grupo de botões de opção insere vários botões de opção com o mesmo nome.
Lista/menus permite criar opções do usuário em uma lista. A opção Lista exibirá os valores de
opção em uma lista de rolagem e permitirá aos usuários selecionar diversas opções na lista. A
opção Menu exibe os valores de opção em um menu pop-up e permite aos usuários selecionar
apenas uma única opção.
Menu de salto insere uma lista de navegação ou menu pop-up. Os menus de salto permitem
inserir um menu no qual cada opção é vinculada a um documento ou arquivo. Veja “Criação de
menus de salto”, na página 446.
Campo de imagens permite inserir uma imagem em um formulário. Os campos de imagens
podem ser utilizados em lugar dos botões Enviar para criar botões com aparência gráfica.
Campo de arquivos insere um campo de texto em branco e um botão Procurar em um
documento. Os campos de arquivos permitem que o usuário procure os arquivos nos discos
rígidos e efetue o upload como dados do formulário.
Botão insere um botão de texto em um formulário. Os botões realizam tarefas quando forem
clicados, como o envio e redefinição dos formulários. É possível adicionar um nome ou
identificador personalizado ao botão, ou utilizar um dos identificadores predefinidos: “Enviar” ou
“Redefinir”.
Como criar um formulário

A barra Inserir do Dreamweaver permite criar um formulário e inserir objetos nele, por exemplo:
campos de texto, botões, caixas de listagem e botões de opção.
Para adicionar um formulário a um documento:
1 Coloque o ponto de inserção onde o formulário deve ser exibido.

2 Escolha Inserir > Formulário ou selecione a categoria Formulários na barra Inserir e clique no
ícone de Formulário.
O Dreamweaver inserirá o formulário. Com a página no modo de visualização do projeto, os
formulários são indicados por um contorno pontilhado em vermelho. Se este contorno não estiver
visível, verifique se a opção Exibir > Auxílios visuais > Elementos invisíveis está selecionada.
3 Na janela do documento, clique no contorno do formulário para selecionar o formulário ou

selecione a tag <form>, no seletor de tags situado no canto inferior esquerdo da janela do
documento.
Criação de formulários interativos 623

4 No campo Nome do formulário no inspetor de propriedades, digite um nome exclusivo para
identificar o formulário.
Nomear um formulário possibilita fazer referências a ele ou controlá-lo com uma linguagem de
criação de scripts, como JavaScript ou VBScript. Se o formulário não for denominado, o
Dreamweaver irá gerar um nome utilizando a sintaxe formn e incrementará o valor n para cada
formulário incluído na página.
5 No inspetor de propriedades, especifique no campo Ação, o caminho até a página ou o script

dinâmico que processará o formulário. O caminho completo pode ser digitado no campo Ação
ou clique no ícone de pasta para navegar até a pasta adequada que contém a página do script ou
aplicativo.
Se estiver especificando um caminho até uma página dinâmica, o caminho até a URL terá uma
aparência semelhante à do exemplo:
http://www.meu_site.com/nome_do_aplicativo/process.cfm
6 No menu pop-up Método, escolha o método de transmissão dos dados do formulário ao

servidor. Os métodos de processamento de formulários são:
POST Incorpora os dados do formulário à solicitação HTTP.
GET Anexa o valor à URL que solicita a página.
Padrão Utiliza a definição padrão do navegador para enviar os dados do formulário ao servidor.
Normalmente, o padrão utilizado é o método GET.
Observe que o método escolhido pode ser definido pelo servidor da Web ou de aplicativos que
esteja em uso. Entre em contato com o administrador de servidores da sua empresa para obter
mais informações.
Não utilize o método GET para enviar formulários extensos. As URLs estão limitadas a 8.192
caracteres. Se o volume de dados enviados for muito grande, os dados serão truncados,
resultando em falha de processamento ou situações inesperadas. Além disso, não utilize o
método GET para enviar nomes de usuários e senhas confidenciais, números de cartões de
crédito ou outras informações sigilosas. O método GET não é seguro para transmitir
informações.
7 O menu pop-up Tipo de codif. permite especificar o tipo de codificação MIME dos dados
enviados ao servidor para processamento.
A definição padrão application/x-www-form-urlencode é utilizada normalmente com o método
POST. Se você estiver criando um campo para upload de arquivos, especifique o tipo de MIME
multipart/form-data.
624 Capítulo 38
8 O menu pop-up Destino especifica a janela na qual serão exibidos os dados enviados pelo
programa utilizado.
Se a janela denominada ainda não estiver aberta, uma nova janela será aberta com o mesmo
nome. Os valores do destino são:
_blank carrega o documento correspondente ao destino em uma janela nova e sem nome.
_parent abre o documento correspondente ao destino na janela principal daquela que está
exibindo o documento.
_selfabre o documento correspondente ao destino na mesma janela em que o formulário foi
enviado.
_top abre o documento correspondente ao destino na janela que estiver aberta. Este valor pode
ser utilizado para assegurar que o documento correspondente ao destino ocupe a janela inteira,
mesmo que o documento original seja exibido em uma moldura.
Como compreender os objetos de formulário

Os objetos de formulário são mecanismo que permitem aos usuários inserir dados. Antes de criar
um objeto de formulário, é necessário inserir um formulário na página.
Dica: Se você tentar inserir um objeto de formulário sem criar o formulário, a seguinte mensagem do Dreamweaver
será exibida: “Deseja adicionar tags de formulário?”. Escolha Sim para que o Dreamweaver crie tags "form" para o
objeto.
Os objetos de formulário que podem ser adicionados a um formulário são os seguintes:

Campos de texto aceitam qualquer tipo de entrada de texto alfanumérico. O texto pode ser
exibido como uma linha simples, linhas múltiplas e uma série de pontos ou asteriscos no caso de
informações confidenciais (com a finalidade de proteger a senha, por exemplo).
Campos ocultos permitem armazenar informações digitadas pelo usuário (como nome, endereço
de correio eletrônico ou preferência de exibição) e, em seguida, utilizá-las quando o usuário visitar
o site novamente.
Botões executam ações quando clicados. Normalmente, as ações incluem o envio ou a redefinição
de um formulário. É possível adicionar um nome ou identificador personalizado ao botão ou
utilizar um dos identificadores predefinidos: “Enviar” ou “Redefinir”.
Caixas de seleção permitem obter múltiplas respostas a partir de um único grupo de opções. O
usuário pode escolher quantas opções forem necessárias.
Botões de opção representam opções exclusivas. A seleção de um dos botões do grupo cancela a
seleção de todos os outros (um grupo consiste em dois ou mais botões com o mesmo nome). Por
exemplo: em um formulário de assinatura de usuário, é necessário selecionar “sexo masculino” ou
“sexo feminino”.
Lista/Menus exibem valores de opção em uma lista de rolagem que permite aos usuários selecionar
várias opções. A opção Menu exibe os valores de opção em um menu pop-up e permite aos
usuários selecionar apenas um único item.
Menus de salto são listas navegáveis ou menus pop-up que permitem inserir um menu no qual
cada opção está vinculada a um documento ou arquivo. Veja “Criação de menus de salto”, na
página 446.

Campos de arquivos permitem ao usuário procurar arquivos no computador e efetue o upload dos
arquivos como dados do formulário.
Campos de imagens permitem inserir uma imagem em um formulário. Os campos de imagens
podem ser utilizados para criar botões com aparência gráfica (por ex.: os botões Enviar e Redefinir).
Utilização dos campos de formulário

Os campos de formulário permitem que os usuários digitem texto em um formulário. Há três
tipos de campos de formulário:
• Campos de texto (nos quais o usuário digita uma resposta).
• Campos de arquivos (nos quais o usuário digita o caminho de um arquivo com o objetivo de
efetuar o upload para um servidor).
• Campos ocultos (que armazenam as informações digitadas pelo usuário em outro campo).
Ao adicionar um campo a um formulário, é possível a sua extensão, o número de linhas, número
máximo de caracteres que podem ser digitados pelo usuário e se é um campo de senha.
Como criar campos de texto

Um campo de texto é um objeto de formulário no qual os usuários podem digitar uma resposta.
Há três tipos de campo de texto:
Campos de texto de linha simples normalmente são utilizados para fornecer uma resposta com
uma única palavra ou frase breve, como um nome ou endereço.
Campos de texto de linhas múltiplas fornecem ao visitante uma área maior, na qual podem digitar
uma resposta. É possível especificar o número máximo de linhas que o visitante poderá utilizar e o
número de caracteres que o objeto pode conter. Se o texto digitado ultrapassar as definições, o
campo se estende de acordo com a definição especificada no atributo de quebra de linha.
Campos de senhas são um tipo especial de campo de texto. Quando o usuário digita em um
campo de senha, o texto inserido é substituído por asteriscos ou marcadores para que não seja
reconhecido, impedindo que a informação seja visualizada.
Observe que as senhas e outras informações enviadas a um servidor por meio de campos de senhas
não são criptografadas. Os dados transferidos podem ser interceptados e lidos como texto
alfanumérico. Por este motivo, é necessário criptografar sempre os dados que deseja proteger.
626 Capítulo 38
Para criar um campo de texto de linha única ou de senha:
1 Coloque o ponto de inserção dentro do contorno do formulário:

O campo de texto no documento e o inspetor de propriedades de campos de texto são exibidos.
3 No campo Campo de texto, no inspetor de propriedades, digite um nome exclusivo para o

campo.
O nome escolhido deve identificar exclusivamente o campo de texto no formulário. Os nomes
de objetos de formulário não podem conter espaços ou caracteres especiais. Pode ser utilizada
qualquer combinação de caracteres alfanuméricos e um sinal de sublinhado (_). Observe que o
identificador atribuído ao Campo de texto é o nome da variável que armazenará o valor (os
dados digitados) do campo. Este valor será enviado ao servidor para processamento.
4 No campo Largura do caractere, siga um dos procedimentos abaixo:
• Aceite a definição padrão, que estabelece a extensão do campo de texto em
aproximadamente 20 caracteres.
• Especifique o tamanho máximo do campo de texto. O tamanho máximo do campo de texto
corresponde ao número máximo de caracteres exibidos simultaneamente no campo. Por
exemplo: se o campo Largura do caractere for definido para 20 (o valor padrão) e o usuário
digitar 100 caracteres, apenas 20 caracteres serão exibidos no campo de texto. Observe que,
embora não seja possível ver os caracteres no campo, eles são reconhecidos pelo objeto de
campo e enviados ao servidor para processamento.
5 No campo Nº máx. de caracteres, digite o valor do número máximo de caracteres que o usuário
pode digitar no campo de texto. Este valor define o limite de tamanho do campo de texto e é
utilizado para validar o formulário.
Se o campo Nº máx. de caracteres for deixado em branco, os usuários poderão inserir texto de
qualquer tamanho. Ao ultrapassar o número de caracteres permitido no campo, o texto é
“rolado”. Se o usuário ultrapassar o número máximo de caracteres, o formulário produzirá um
alerta sonoro.
6 Selecione Linha simples ou Senha para especificar o tipo de texto a ser criado.
Também é possível escolher a criação de um campo de texto com linhas múltiplas. Para obter
instruções sobre a criação de campos de textos de linhas múltiplas, veja “Criação de campos de
texto de linhas múltiplas”, na página 628.
7 Se desejar exibir o texto padrão no campo, digite-o no campo Valor inicial do inspetor de
propriedades.
Esse texto será exibido no campo de texto quando o formulário for carregado pela primeira vez
no navegador do usuário. Por exemplo: indique que o usuário deve digitar informações no
campo incluindo uma nota ou um exemplo de valor.

8 Para identificar o campo na página, coloque o ponto de inserção próximo ao objeto e digite
qualquer texto desejado.
É possível aplicar formatação de texto aos identificadores dos objetos do formulário. Para obter
mais informações, veja “Definição e alteração de fontes e estilos”, na página 294. O exemplo a
seguir mostra um campo de texto de linha única com o identificador “Digite o seu nome de
usuário:”. Observe que o inspetor de propriedades de campos de texto especifica que o campo
exibirá até 30 caracteres no campo Largura do caractere, mas poderá acomodar 50 caracteres, no
máximo.
Criação de campos de texto de linhas múltiplas

Os campos de texto de linhas múltiplas permitem digitar textos com várias linhas. Ao criar um
campo de texto de linhas múltiplas, é possível especificar o número de linhas de texto que o
usuário pode digitar.
Para criar um campo de texto de linhas múltiplas:

O campo de texto no documento e o inspetor de propriedades de campos de texto são exibidos.
628 Capítulo 38
3 No campo Campo de texto, no inspetor de propriedades, digite um nome exclusivo para o
campo.
O nome escolhido deve identificar exclusivamente o campo de texto no formulário. Os nomes
de objetos de formulário não podem conter espaços ou caracteres especiais. Pode ser utilizada
qualquer combinação de caracteres alfanuméricos e um sinal de sublinhado (_). Observe que o
identificador atribuído ao Campo de texto é o nome da variável que armazenará o valor (os
dados digitados) do campo. Este valor será enviado ao servidor para processamento.
4 No campo Largura do caractere, siga um dos procedimentos abaixo:
• Aceite a definição padrão, que estabelece a extensão do campo de texto em
aproximadamente 20 caracteres.
• Especifique o tamanho máximo do campo de texto. O tamanho máximo do campo de texto
corresponde ao número máximo de caracteres exibidos simultaneamente no campo. Por
exemplo: se o campo Largura do caractere for definido para 20 (o valor padrão) e o usuário
digitar 100 caracteres, apenas 20 caracteres serão exibidos no campo de texto. Observe que,
embora não seja possível ver os caracteres no campo, eles são reconhecidos pelo objeto de
campo e enviados ao servidor para processamento.
5 Selecione Multilinha para especificar o tipo de campo de texto a ser criado.
6 No campo Número de linhas, especifique o número máximo de linhas a serem exibidas.
A definição padrão especifica um campo de texto com duas linhas.
7 No menu pop-up Quebra autom. de linha, selecione uma definição para estabelecer como a
entrada do usuário será exibida quando esta exceder a área de texto especificada. As opções de
quebra automática de linha são:
Inativo ou Padrão impede que haja quebra automática de linha. Quando a entrada do usuário
exceder a margem direita da área de texto, o texto será quebrado para a esquerda. O usuário
deve pressionar a tecla Return para mover o ponto de inserção para a linha seguinte na área de
texto.
Virtual define a quebra de linha na área de texto. Quando a entrada do usuário exceder a
margem direita da área de texto, este será quebrado para a linha seguinte. Quando os dados
forem enviados para processamento, a quebra de linha não será aplicada aos dados. Eles serão
enviados como uma seqüência de caracteres de dados.
Física define a quebra de linha na área de texto assim como nos dados, quando estes forem enviados
para processamento.
8 Se desejar exibir o texto padrão no campo, digite-o no campo Valor inicial do inspetor de
propriedades.
Esse texto será exibido no campo de texto quando o formulário for carregado pela primeira vez
no navegador do usuário. Por exemplo: indique que o usuário deve digitar informações no
campo incluindo uma nota ou um exemplo de valor.
9 Para identificar o campo na página, coloque o ponto de inserção próximo ao objeto e digite
qualquer texto desejado.
É possível aplicar formatação de texto aos identificadores dos objetos do formulário. Para obter
mais informações, veja “Definição e alteração de fontes e estilos”, na página 294.

Criação de um campo para upload de arquivos
É possível criar um campo para upload de arquivos que permita ao usuário selecionar um arquivo
em seu computador, um documento de processamento de dados ou arquivo de imagem gráfica,
por exemplo: e efetuar o upload do arquivo para o servidor. Um campo de arquivos se parece com
outros campos de texto, exceto pela presença de um botão Procurar. O usuário pode digitar o
caminho do arquivo do qual ele deseja efetuar o upload ou utilizar o botão Procurar para localizar
e selecionar o arquivo.
Os campos de arquivos requerem o método POST para transmitir os arquivos do navegador ao
servidor. O arquivo é enviado para o endereço configurado no campo Ação do formulário.
Observação: Antes de utilizar o campo de arquivos, confirme com o administrador do servidor se é permitido o
upload anônimo de arquivos.
Para criar um campo de arquivos em um formulário:
1 Insira um formulário na página (Inserir > Formulário).

2 Selecione o formulário. O inspetor de propriedades de formulários é exibido.
3 Defina o método do formulário como POST.
4 No menu pop-up Tipo de codif., selecione multipart/form-data.
5 Coloque o ponto de inserção dentro do contorno do formulário e, em seguida, escolha

Inserir > Objetos de formulário> Campo de arquivos ou clique no ícone de Inserir campo de
arquivos na guia Formulários da barra Inserir.
O campo de arquivos é inserido no formulário.
6 No campo Nome do campo de arquivos, no inspetor de propriedades, digite o nome do objeto
campo de arquivos.
7 No campo Largura do caractere, especifique o número máximo de caracteres que o campo pode
exibir.
8 No campo Nº máx. de caracteres, especifique o número máximo de caracteres que o campo
conterá.
Se o usuário procurar o arquivo, o nome e caminho do arquivo poderão ultrapassar o valor
especificado em Nº máx. de caracteres. No entanto, se o usuário tentar digitar o nome e
caminho do arquivo, o campo de arquivos aceitará apenas o número de caracteres especificado
pelo valor do campo Nº máx. de caracteres.
630 Capítulo 38
O exemplo mostrado abaixo representa um campo de arquivos simples. Observe que o campo Nº
máx. de caracteres do inspetor de propriedades foi definido como 75, enquanto que o campo
Largura do caractere foi especificado como 30. Isto significa que apenas 30 caracteres que compõem
o caminho do arquivo estarão visíveis para o usuário. Observe cuidadosamente quais os tipos de
arquivos que podem ser carregados pelo usuário e se precisam visualizar o caminho completo do
arquivo na caixa de texto do campo de arquivos.
Como criar um campo oculto

Os campos ocultos são campos de texto utilizados para coletar informações sobre os usuários. As
informações armazenadas nesses campos são transferidas para o servidor simultaneamente ao
envio do formulário.
Quando um campo oculto é inserido, o Dreamweaver adiciona um marcador no documento. Se
você inserir um campo oculto e o marcador não for exibida, selecione Exibir > Auxílios visuais >
Elementos invisíveis para revelar o marcador.
Para criar um campo oculto:

2 Selecione Inserir > Objetos de formulário > Campo oculto.
Um marcador é exibido no documento.
3 No campo Campo oculto, no inspetor de propriedades, digite um nome exclusivo para o
campo.
4 No campo Valor, digite o valor que deseja atribuir ao campo.

Como inserir caixas de seleção e botões de rádio
Utilize os objetos de formulário caixa de seleção e botão de opção para configurar objetos de
seleção predefinidos. O usuário clica numa caixa de seleção ou botão de opção para fazer uma
escolha.
Como compreender as caixas de seleção e os botões de opção

Nas caixas de seleção, o usuário alterna cada resposta para “inativa” ou “ativa”. Portanto, o usuário
pode selecionar mais de uma opção em um grupo de caixas de seleção. O exemplo abaixo mostra
esse recurso por meio da seleção de três itens nas caixas de seleção: Surfe, mountain bike e
canoagem.
Os botões de opção funcionam como um grupo e fornecem valores de seleção mutuamente

exclusivos. O usuário pode selecionar apenas uma opção em um grupo de botões de opção. No
exemplo abaixo, “canoagem” é a opção escolhida. Se o usuário clicar em “surfe”, o botão
correspondente a “canoagem” será desmarcado automaticamente.
632 Capítulo 38
Como inserir uma caixa de seleção
As caixas de seleção permitem ao usuário selecionar mais de uma opção em um conjunto de
opções.
Para inserir uma caixa de seleção:
1 Coloque o ponto de inserção dentro do contorno do formulário e siga um dos procedimentos

abaixo:
• Escolha Inserir > Objetos de formulário > Caixa de seleção.
• Na categoria Comuns da barra Inserir, clique no ícone Caixa de seleção.
2 No campo Nome da caixa de seleção, no inspetor de propriedades, digite um nome descritivo
único para a caixa de seleção.
3 No campo Valor selecionado, digite o valor da caixa de seleção.
Por exemplo: em uma pesquisa, é possível associar o valor 4 à opinião “concordo plenamente”,
e o valor 1 à opinião “discordo totalmente”.
4 Na opção Estado inicial, clique em Selecionado, se desejar que uma opção apareça selecionada
quando o formulário for carregado pela primeira vez no navegador.
Como inserir um botão de opção

Utilize os botões de opção quando o usuário tiver que selecionar apenas uma opção em um grupo
de opções. Normalmente, os botões de opção são utilizados em grupos. Todos os botões de opção
de um grupo devem ter o mesmo nome e conter diferentes valores de campo.
Para inserir os botões de opção como um grupo:

2 Insira o objeto de formulário Grupo de botões de opção do seguinte modo:
• Clique na guia Formulários e no ícone de Grupo de botões de opção.
• Selecione Inserir > Objetos de formulário > Botão de opção.
A caixa de diálogo Grupo de botões de opção é exibida.

3 Preencha a caixa de diálogo Grupo de botões de opção e clique em OK.
Para obter mais instruções sobre como preencher a caixa de diálogo Grupo de botões de opção,
clique no botão de ajuda da caixa de diálogo.
O Dreamweaver insere o grupo de botões de opção no formulário HTML. Caso você ainda não
tenha inserido um formulário na página, o Dreamweaver irá adicioná-lo. Se desejar, é possível
alterar o layout do grupo. Os botões de opção também podem ser editados utilizando o inspetor de
propriedades ou diretamente na visualização de código.
Para inserir um botão de opção de cada vez:

2 Insira um objeto de formulário botão de opção escolhendo Inserir > Objetos de formulário >
Botão de opção.
3 No campo Nome do botão de opção, no inspetor de propriedades, digite um nome descritivo
para o grupo de opções.
Se você criar diversas interações com botões de opção em um formulário, certifique-se de que
cada conjunto de botões de opção tenha um nome exclusivo. Contudo, se estiver incluindo
botões de opção individualmente para criar um grupo, será necessário identificar cada um
deles.
4 No campo Valor selecionado, digite o valor que deseja enviar para o aplicativo ou script do
servidor quando o usuário selecionar esse botão de opção. Por exemplo: digite futebol, no
campo Valor selecionado, para indicar que o usuário escolheu futebol.
5 Na opção Estado inicial, clique em Selecionado, se desejar que uma opção apareça selecionada
quando o formulário for carregado pela primeira vez no navegador.
Incluir listas e menus

As listas e menus são um recurso que permite exibir várias opções aos usuários em um espaço
limitado. As listas contêm uma barra de rolagem que permite ao usuário navegar pelos itens e fazer
diversas escolhas. Os menus suspensos exibem um único item, que é também a seleção ativa. Os
usuários podem escolher apenas um item em cada menu.
Como criar uma lista de rolagem

As listas de rolagem permitem exibir diversas opções em um espaço limitado. O usuário pode
percorrer a lista e selecionar vários itens.
634 Capítulo 38
Para criar uma lista de rolagem:

2 Escolha Inserir > Objetos de formulário > Lista/menu e selecione o elemento resultante, se
necessário.
O objeto de formulário Lista/menu será mostrado dentro do contorno do formulário e o
inspetor de propriedades de lista/menu será exibido. Na ilustração abaixo, o inspetor de
propriedades de lista/menu exibe o botão Dinâmico. Este botão é utilizado para criar objetos
de formulário lista/menu dinâmicos e exibe apenas um tipo de documento dinâmico escolhido
anteriormente.
3 No campo Lista/menu, no inspetor de propriedades, digite um nome exclusivo para a lista.

4 Em Tipo, selecione a opção Lista.
5 No campo Altura, digite um número para especificar o número de linhas (ou itens) a serem
exibidas na lista.
As barras de rolagem aparecerão quando o número especificado for menor do que o número de
opções contido na lista.
6 Se desejar permitir ao usuário selecionar mais de uma opção na lista, selecione Permitir
múltiplas (ao lado da opção Seleções).
7 Clique em Valores da lista para adicionar as opções.
8 Com o ponto de inserção no campo Identificador do item, digite o texto que deseja incluir na
lista.
9 No campo Valor, digite os dados que deseja enviar ao servidor quando o usuário selecionar esse
item.
10 Para adicionar um outro item à lista de opções, clique no botão com o sinal de adição (+) e, em
seguida, repita as etapas 7 e 8.

11 Quando terminar de adicionar os itens à lista, clique em OK para fechar a caixa de
diálogo Valores da lista.
O inspetor de propriedades é exibido. As opções estarão visíveis no campo Selecionados
inicialmente.
12 Para que um dos itens da lista seja exibido selecionado como padrão, escolha-o no campo
Selecionados inicialmente, no inspetor de propriedades.
Criação de menus pop-up

Os menus pop-up permitem que o visitante selecione um único item em uma lista com várias
opções. Os menus pop-up são úteis quando houver espaço limitado, mas que é necessário exibir
vários itens. Observe que somente uma opção é visível quando o formulário do menu for exibido
em um navegador. Para exibir as outras opções, o usuário deve clicar na seta abaixo para exibir
toda a lista.
Observação: O menu pop-up elemento de formulário não é o mesmo que o menu pop-up gráfico. Para obter mais
informações sobre a criação, edição e exibição de um menu pop-up gráfico, veja “Mostrar o menu pop-up”, na
página 399.
Para criar um menu pop-up:

2 Escolha Inserir > Objetos de formulário > Lista/menu e selecione o elemento resultante, se
necessário.
O objeto de formulário Lista/menu será mostrado dentro do contorno do formulário e será
exibido o inspetor de propriedades de lista/menu.
3 No campo Lista/menu, no inspetor de propriedades, digite um nome exclusivo para o menu.

4 Em Tipo, selecione a opção Menu.
636 Capítulo 38
5 Clique em Valores da lista para adicionar as opções.
6 Com o ponto de inserção no campo Identificador do item, digite o texto a ser exibido na lista.
7 No campo Valor, digite os dados que deseja enviar ao servidor quando o usuário selecionar esse
item.
8 Para adicionar um outro item à lista de opções, clique no botão com o sinal de adição (+) e, em
seguida, repita as etapas 6 e 7.
9 Quando terminar de adicionar os itens à lista, clique em OK, para fechar a caixa de
diálogo Valores da lista.
10 Para que um dos itens da lista seja exibido selecionado como padrão, escolha-o no campo
Selecionados inicialmente, no inspetor de propriedades.
Inclusão de botões de formulário

Os botões de formulário controlam as operações relacionadas aos formulários. Utilize um botão
de formulário para enviar ao servidor os dados digitados em um formulário ou para redefinir o
formulário. É possível atribuir aos botões outras tarefas de processamento definidas em um script.
Por exemplo: o botão de formulário deverá calcular o custo total dos itens selecionados com base
nos valores a eles atribuídos.

Inserção de botões de formulário padrão
O estilo dos botões de formulário é semelhante ao do botão padrão do navegador, que contém
texto a ser exibido. Normalmente, os botões de formulário são identificados como Enviar ou
Redefinir.
Para criar um botão de texto:

2 Escolha Iniciar > Objetos de formulário > Botão ou clique no ícone de Botão, no painel
Formulários.
O Dreamweaver insere o objeto de formulário Botão no formulário e exibe o inspetor
de propriedade do botão.
3 No campo Nome do botão, no inspetor de propriedades, digite um nome para o botão.

Existem dois nomes reservados: “Enviar”, que envia os dados do formulário para
processamento, e “Redefinir”, que redefine todos os campos do formulário aos seus valores
originais.
4 No campo Identificador, no inspetor de propriedades, digite o texto que será exibido no botão.
5 Na seção Ação, selecione uma opção. As ações disponíveis são:
Enviar o formulário para processamento quando o botão for clicado.
Redefinir o formulário quando o botão for clicado.
Nenhuma para ativar uma ação com base no script de processamento quando o botão for
clicado. Para especificar uma ação, selecione a tag Form na barra de status da janela do
documento para selecionar e exibir o inspetor de propriedades do formulário. No menu pop-
up Ação, selecione um script ou página para processar o formulário.
Como criar um botão gráfico Enviar

É possível especificar imagens para representar ícones de botões. A utilização de uma imagem para
efetuar tarefas diferentes do envio de dados requer a anexação de um comportamento ao objeto de
formulário. O comportamento pode ser atribuído ao botão através do painel Comportamentos do
Dreamweaver ou utilizando uma função JavaScript do cliente para realizar uma ação.
Para saber como anexar um comportamento a um objeto, veja “Aplicação de um
comportamento”, na página 377.
Para criar um botão gráfico Enviar:
1 No documento, coloque o ponto de inserção dentro do contorno do formulário:

2 Escolha Inserir > Objetos de formulário > Campo de imagens.
3 No inspetor de propriedades, altere o texto do campo Campo de imagens para Enviar.
638 Capítulo 38
4 Para selecionar a imagem a ser utilizada como botão, clique no ícone de pasta do campo de
origem e procure o arquivo de imagem.
5 No campo Alt, digite o texto que será exibido no lugar da imagem nos navegadores somente de
texto ou naqueles nos quais o download de imagens é feito manualmente.
A criação de formulários
É possível utilizar quebras de linha, parágrafo, texto pré-formatado ou tabelas para formatar os
formulários. Um formulário não pode ser inserido em outro formulário, ou seja, as tags não
podem ser sobrepostas, embora seja possível incluir mais de um formulário em uma página.
Quando estiver criando um formulário, lembre-se de identificar os campos com texto descritivo
para permitir ao usuário identificar o título da pergunta, por exemplo: “Digite o seu nome”, para
solicitar o nome do usuário.
Como inserir tabelas em formulários

É possível criar formulários mais atraentes através da inserção de tabelas. Utilize as tabelas para
fornecer uma estrutura para os objetos de formulário e os identificadores dos campos. As tabelas
facilitam o alinhamento das opções, tanto vertical quanto horizontalmente. Ao utilizar as tabelas em
formulários, certifique-se de que todas as tags table estejam delimitadas por tags form.
Utilização da função JavaScript do cliente para processar um

formulário
Os formulários são processados pelo script ou aplicativo especificado no atributo action da tag
form. Para verificar se uma ação está associada a um formulário, selecione-a e examine o inspetor
de propriedades. O campo Ação indicará a ação associada.
Os formulários mais simples utilizam JavaScript ou VBScript para processar os formulários no
cliente (o que evita a necessidade de enviar os dados do formulário ao servidor para
processamento). Por exemplo: imagine que você esteja trabalhando com um pequeno formulário,
localizado na parte inferior de uma página que contém apenas dois botões de opção, identificados
por Sim e Não, além de um botão Enviar. É possível que a ação do formulário seja uma função
JavaScript definida na seção head do documento, que exibirá um alerta se o usuário selecionar Sim
e outro alerta se o usuário selecionar Não:
function processForm(){
if (document.forms[0].elements[0].checked){
alert('Sim');
}else{
alert('Não');
}
}

Para utilizar uma função JavaScript do cliente como ação do formulário:
1 Em um formulário, selecione um botão Enviar.

2 Anexe o comportamento Chamar o JavaScript ao botão (veja “Chamar o JavaScript”, na
página 382).
3 Na caixa de texto JavaScript que aparecer durante a anexação do comportamento, digite
processForm().
4 Adicione uma função JavaScript processForm() (como a mostrada acima) à seção head do
documento.
É possível lidar com muitas tarefas de processamento de formulários utilizando os recursos de
criação de scripts do cliente, porém os dados digitados pelo usuário não podem ser salvos ou
enviados a terceiros. Para salvar os dados ou transmiti-los a outro aplicativo para processamento, é
necessário utilizar um script ou aplicativo de cliente. Os scripts CGI (Common Gateway
Interface) são os mecanismos de criação de scripts de cliente mais conhecidos para o
processamento de dados dos formulários. Há diversos sites na Web que oferecem scripts CGI
gratuitos para a sua utilização. O provedor de serviço que hospeda o seu site poderá fornecer
scripts CGI que executem várias tarefas comuns, como a coleta de endereços de correio eletrônico
ou a permissão a visitantes para que enviem seus comentários através de um formulário da Web.
Como utilizar os comportamentos com formulários

É possível anexar comportamentos aos formulários e objetos de formulários utilizando qualquer
um dos comportamentos que aparecerem no painel Comportamentos quando o formulário ou
objeto de formulários for selecionado. Os comportamentos Validar o formulário e Definir o texto
do campo de texto estarão disponíveis apenas se tiver sido inserido um campo de texto no
documento. Ao anexar o comportamento Validar o formulário a um objeto de formulário, é
necessário especificar o campo de texto que deverá ser validado. Por exemplo: se o
comportamento Validar o formulário for anexado ao botão Enviar, você poderá especificar um
campo de texto criado para “Nome” para verificar se o usuário digitou texto no campo Nome.
Ao aplicar comportamentos, é necessário assegurar-se que todos os objetos do formulário no
documento (e cada objeto) tenham um nome exclusivo. Se for utilizado o mesmo nome para dois
objetos diferentes, é possível que os comportamentos não funcionem adequadamente, mesmo se
os objetos estiverem em formulários diferentes.
Os dois comportamentos específicos aos formulários são explicados abaixo. Para obter
informações sobre outros comportamentos, consulte o Capítulo 24, “Como utilizar
comportamentos JavaScript”, na página 375.
Validar o formulárioverifica o conteúdo de determinados campos de texto para assegurar que o
usuário tenha digitado o tipo correto de dados (veja “Validar o formulário”, na página 405).
Definir o texto do campo de texto substitui
o conteúdo de um campo de texto pelo conteúdo
especificado (veja “Defina o texto do campo de texto”, na página 397).
640 Capítulo 38
Criação de objetos de formulário dinâmicos
É possível criar formulários dinâmicos HTML para que mostrem os registros de um banco de
dados e coletem informações dos usuários. Por exemplo: o formulário pode exibir as informações
de contato de um fornecedor, recuperadas em uma tabela do banco de dados.
Os formulários dinâmicos podem simplificar a manutenção de sites. Por exemplo: muitos sites
utilizam menus de formulários HTML para permitir que os usuários se movam para outras áreas
do site. Normalmente, esse tipo de menu é exibido em vários locais do site. Se o menu for
dinâmico, será possível adicionar um novo item de menu uma vez, na tabela do banco de dados,
para atualizar todos os menus do site.
As listas/menus são objetos de formulário dinâmicos comuns. Também é possível criar e utilizar
botões de opção, caixas de seleção, campos de texto e campos de imagens dinâmicos.
Esta seção descreve como tornar dinâmicos os objetos de formulário.
Observação: O Dreamweaver MX não fornece os seguintes objetos de formulário dinâmicos para o aplicativo
ASP.NET: Campos de texto, caixas de seleção, listas/menus ou grupos de botões de opção dinâmicos.
Criação de uma lista/menu dinâmico

É possível preencher dinamicamente um objeto de formulário lista ou menu com as entradas de
um banco de dados.
Para incluir uma lista/menu dinâmico:
1 Clique no interior do formulário HTML na página.

2 Escolha Inserir > Objetos de formulário > Lista/menu.
O Dreamweaver insere um objeto de formulário Lista/menu na página.
3 Selecione o objeto de formulário Lista/menu.
É exibido o inspetor de propriedades de lista/menu.
4 No inspetor de propriedades de lista/menu, clique no botão Dinâmico para exibir a caixa de

diálogo Lista/menu dinâmico. Preencha a caixa de diálogo e clique em OK.
Para obter instruções sobre o preenchimento dos campos da caixa de diálogo Lista/menu
dinâmico, clique no botão Ajuda da caixa de diálogo.

5 Clique em OK.
O Dreamweaver insere a lista/menu dinâmico no formulário HTML. O menu pode ser
editado utilizando o painel Comportamentos do servidor ou o inspetor de propriedades.
Também é possível editar diretamente o código-fonte do menu.
Como tornar dinâmico uma lista/menu existente

É possível tornar dinâmica uma lista/menu existente.
Para tornar dinâmica uma lista/menu existente:
1 Selecione o objeto de formulário lista/menu para torná-lo dinâmico.

2 No inspetor de propriedades, clique no botão Dinâmico.
A caixa de diálogo Lista/menu dinâmico é exibida.
Para obter informações sobre como preencher a caixa de diálogo Lista/menu dinâmico, clique no
botão Ajuda da caixa de diálogo.
Como tornar dinâmicos os campos de texto e imagens

É possível tornar dinâmicos os campos de texto e imagens de um formulário.
Para tornar dinâmicos os campos de texto:
1 Selecione uma caixa de texto no formulário HTML na página.

2 Selecione Janela > Comportamentos de servidor para exibir o painel Comportamentos de
servidor.
3 Clique no botão com o sinal de adição (+) e selecione Elementos dinâmicos > Campo de texto
dinâmico no menu pop-up.
A caixa de diálogo Campo de texto dinâmico é exibida.
Para obter mais instruções sobre como preencher a caixa de diálogo, clique no botão de ajuda
da caixa de diálogo.
O campo de texto exibirá conteúdo dinâmico quando o formulário for visualizado em um
navegador.
Para tornar dinâmicos os campos de imagens:
1 Coloque o ponto de inserção onde deseja que o campo de imagens apareça na página e, em
seguida, selecione Inserir > Objetos de formulário> Campo de imagens.
A caixa de diálogo Selecionar a fonte da imagem é exibida.
2 Clique na opção Fontes dos dados.
Uma lista de fontes de dados é exibida.
642 Capítulo 38
3 Selecione uma fonte de dados na lista.
A fonte de dados deve ser um conjunto de registros que contém os caminhos aos arquivos de
imagens. Dependendo da estrutura de arquivos do site, os caminhos podem ser absolutos,
relativos a documento ou relativos à raiz.
Observação: O Dreamweaver ainda não oferece suporte a imagens binárias armazenadas em bancos de
dados.
Se nenhum conjunto de registros for exibido na lista ou se os que estiverem disponíveis não
atenderem às suas necessidades, defina um novo conjunto de registros. Para obter instruções,
consulte “Definição de um conjunto de registros”, na página 544.
4 Clique em OK.
O campo de imagens exibirá uma imagem dinâmica selecionada quando o formulário for
visualizado em um navegador.
Como tornar dinâmicas as caixas de seleção

Utilize as caixas de seleção em um formulário para que os usuários possam escolher vários itens
disponíveis em uma lista. Para criar uma caixa de seleção dinâmica, é necessário especificar um
tipo de documento dinâmico e associar um conjunto de registros ou uma outra fonte de dados do
conteúdo dinâmico à página. A origem de dados deve estar na forma booleana, como Yes/No ou
true/false.
Para pré-selecionar dinamicamente uma caixa de seleção:
1 Selecione um objeto de formulário caixa de seleção.

2 No inspetor de propriedades, clique no botão Dinâmico.
A caixa de diálogo Caixa de seleção dinâmica é exibida.

Para obter mais informações sobre como preencher a caixa de diálogo Caixa de seleção
dinâmica, clique no botão de ajuda da caixa de diálogo.
A caixa de seleção será exibida selecionada ou não (dependendo dos dados), quando o formulário
for visualizado em um navegador.

Como tornar dinâmicos os botões de opção
É possível pré-selecionar dinamicamente um botão de opção com base em um valor do conjunto
de registros. Para criar uma caixa de seleção dinâmica, é necessário especificar um tipo de
documento dinâmico e associar um conjunto de registros ou uma outra fonte de dados do
conteúdo dinâmico à página.
Para pré-selecionar dinamicamente um botão de opção:
1 Assegure-se de que a página possua ao menos um grupo de botões de opção.

O grupo de botões de opção pode ser criado selecionando o ícone de Grupo de botões de
opção, na guia Formulários da barra Inserir. Para obter mais informações, veja “Como inserir
um botão de opção”, na página 633.
2 No painel Comportamentos de servidor, clique no botão com um sinal de adição (+) e
selecione Elementos de formulário dinâmico > Grupo dinâmico de botões de opção.
A caixa de diálogo Grupo dinâmico de botões de opção é exibida. A caixa de diálogo exibida
poderá parecer diferente do exemplo mostrado abaixo, dependendo do tipo de documento com o
qual você estiver trabalhando.

Para obter mais informações sobre como preencher a caixa de diálogo Botões de opção
dinâmicos, clique no botão de ajuda da caixa de diálogo.
644 Capítulo 38
Parte IX
Parte IX
Como desenvolver
aplicativos em pouco
tempo
Os aplicativos para a Web geralmente apresentam páginas

que permitem aos usuários localizar um banco de dados,
páginas que permitem aos usuários inserir, atualizar ou
excluir dados em um banco de dados e páginas que
restringem o acesso a um site da Web. Você poderá criar
qualquer uma dessas páginas com o Dreamweaver.
• Capítulo 39, “Como criar páginas-mestras/detalhes”
• Capítulo 40, “Como criar páginas que realizam buscas
em bancos de dados”
• Capítulo 41, “Como criar páginas para modificar bancos
de dados”
• Capítulo 42, “Como criar páginas que restringem o
acesso ao site”
CAPÍTULO 39
Como criar páginas-mestras/detalhes
Com o Macromedia Dreamweaver MX, é possível criar conjuntos de páginas que apresentam
informações em dois níveis de detalhes. Este capítulo descreve como criar páginas-mestras/detalhes
nas seguintes seções:
• “Páginas-mestras/detalhes”, na página 647
• “Como construir páginas-mestras/detalhes rapidamente”, na página 649
• “Como criar páginas-mestras/detalhes bloco a bloco”, na página 650
• “Como modificar páginas-mestras/detalhes”, na página 653
Páginas-mestras/detalhes
Uma página mestra é uma página que discrimina os registros e os links correspondentes a estes.
Quando o usuário clica em um link, a página detalhes é aberta exibindo mais informações sobre o
registro. A seguir um exemplo de uma página mestra de um site de intranet de uma empresa
fictícia:
647
Quando o usuário clicar em um dos ícones de visualização vinculados, uma página de detalhes
será aberta:
Uma página de resultados é um tipo comum de página mestra. No entanto, diferentemente da

página mestra descrita nesta seção, a lista de registros em uma página de resultados não é
determinada pelo designer, mas pelo usuário. O usuário determina a lista através de uma busca no
banco de dados. Para obter mais informações sobre este tipo de página mestra, consulte “Como
criar páginas que realizam buscas em bancos de dados”, na página 655.
Uma página de detalhes pode ser utilizada para atualizar ou excluir o registro exibido. Para obter
mais informações sobre as páginas de atualização e exclusão, consulte “Como criar uma página
para atualizar os registros”, na página 673 e “Como criar uma página para excluir um registro”, na
página 678.
Uma página mestra consiste nos seguintes blocos de criação:
• um conjunto de registros
• um layout de página para exibir diversos registros
• Um comportamento de servidor Ir para a página Detalhes, para abrir a página de detalhes e
repassar a identificação do registro clicado pelo usuário
Uma página de detalhes consiste nos seguintes blocos de criação:
• Um layout de página para exibir um único registro
• Um conjunto de registros para abrigar os detalhes do registro
• um filtro de conjunto de registros, para recuperar um registro específico da tabela do banco de
dados, ou um comportamento de servidor Ir para um determinado registro, para ir para um
registro específico no conjunto de registros.
648 Capítulo 39
Como construir páginas-mestras/detalhes rapidamente
É possível criar rapidamente páginas-mestras/detalhes utilizando o objeto live Conjunto de
páginas-mestras/detalhes.
Observação: Este objeto live não é suportado pelo PHP ou ASP.NET.
Para completar o conjunto de páginas-mestras/detalhes com um objeto live:
1 Crie uma página mestra vazia e adicione um conjunto de registros a ela.

Assegure-se de que o conjunto de registros contenha não somente todas as colunas de que você
necessitar na página mestra, mas também todas as colunas de que necessitar na página de
detalhes.
O conjunto de registros pode ser definido durante o projeto (consulte “Definição de um
conjunto de registros”, na página 544) ou pelo usuário em tempo de execução (consulte
“Como criar páginas que realizam buscas em bancos de dados”, na página 655).
Normalmente, o conjunto de registros na página mestra extrai algumas colunas de uma tabela de
banco de dados, enquanto que o conjunto de registros na página detalhes extrai mais colunas da
mesma tabela para fornecer mais detalhes.
2 Abra a página mestra na visualização do projeto e, em seguida, escolha Inserir > Objetos de
aplicativos > Conjunto de páginas mestras detalhes.
A caixa de diálogo Conjunto de páginas-mestras/detalhes é exibida.
Como criar páginas-mestras/detalhes 649

4 Clique em OK.
O objeto live também criará uma página de detalhes, se ainda não tiver sido criada, e
adicionará conteúdo dinâmico e comportamentos de servidor tanto à página mestra quanto à
de detalhes.
5 Personalize as páginas-mestras e de detalhes de acordo com suas preferências.
É possível personalizar totalmente o layout de cada página utilizando as ferramentas de projeto
de página do Dreamweaver MX. É possível também editar os comportamentos de servidor,
clicando duas vezes nos mesmos no painel Comportamentos de servidor.
Como criar páginas-mestras/detalhes bloco a bloco

Esta seção descreve como criar um conjunto de páginas-mestras/detalhes sem utilizar o objeto live
Conjunto de páginas-mestras/detalhes. Para obter instruções sobre como utilizar o objeto live,
consulte “Como construir páginas-mestras/detalhes rapidamente”, na página 649.
Para completar o conjunto de páginas-mestras/detalhes, é necessário realizar as seguintes tarefas:
• Crie uma página mestra vazia e defina um conjunto de registros para ela.
• Exibir os registros na página mestra.
• Transfira a identificação do registro que o usuário selecionou para a página de detalhes.
• Localize o registro no banco de dados e exiba-o na página de detalhes.
Crie uma página mestra vazia e defina um conjunto de registros para ela.
O primeiro passo é criar uma página mestra em branco e acrescentar um conjunto de registros a ela.
O conjunto de registros pode ser definido durante o projeto (consulte “Definição de um conjunto
de registros”, na página 544) ou pelo usuário em tempo de execução (consulte “Como criar
páginas que realizam buscas em bancos de dados”, na página 655).
Assegure-se de que o conjunto de registros contenha não somente todas as colunas de que você
necessitar na página mestra, mas também todas as colunas de que necessitar na página de detalhes.
Normalmente, o conjunto de registros na página mestra extrai algumas colunas de uma tabela de
banco de dados, enquanto que o conjunto de registros na página detalhes extrai mais colunas da
mesma tabela para fornecer mais detalhes.
650 Capítulo 39
Exibir os registros na página mestra
Após criar uma página mestra em branco e definir um conjunto de registros para ela, é necessário
exibir os registros na página.
Para exibir os registros na página mestra:
1 Crie um layout de página, para exibir diversos registros e ligar as colunas dos conjuntos de
registros à página.
Um método comum consiste em criar uma tabela HTML com duas linhas na página mestra e
arrastar um número limitado de colunas de conjuntos de registros do painel Ligações (Janela >
Ligações) para a segunda linha da tabela (utilize a primeira linha para exibir os cabeçalhos das
colunas da tabela).
2 Crie uma região repetida para exibir mais de um registro por vez.
A região repetida normalmente se aplica à linha da tabela que contiver conteúdo dinâmico.
Como abrir a página detalhes e repassar uma identificação de registro a ela

Após criar a página mestra e exibir registros nela, é necessário criar links para abrir a página
detalhes e transferir o ID do registro que o usuário selecionou para ela.
Usuários de PHP, ASP.NET e ColdFusion devem criar um link com parâmetros URL no código.
Para obter mais informações, veja “Criação de um parâmetro da URL utilizando links HTML”,
na página 536. Coloque as tags de ancoragem ao redor do conteúdo dinâmico que você deseja
servir como link.
Para abrir a página de detalhes e repassar a ela um parâmetro da URL que contém a identificação
do registro no qual o usuário clicou (somente usuários ASP e JSP):
1 Na região repetida da página mestra, selecione o conteúdo dinâmico que atuará como link.
botão com sinal de adição (+) e escolha Ir para a página Detalhes no menu pop-up.
A caixa de diálogo Ir para a página Detalhes é exibida.


4 Clique em OK.
O Dreamweaver coloca um link especial ao redor do texto selecionado. Quando o usuário clica
no link, o comportamento de servidor Ir para a página Detalhes transfere um parâmetro da
URL que contém o ID do registro para a página de detalhes. Por exemplo: se o parâmetro da
URL for denominado id e a página de detalhes for denominada detalhesdocliente.asp, quando
o usuário clicar no link, a URL terá uma aparência semelhante ao exemplo:
http://www.mysite.com/detalhesdocliente.asp?id=43
A primeira parte da URL, http://www.meusite.com/detalhesdocliente.asp, abrirá a página
de detalhes. A segunda parte, ?id=43, é o parâmetro da URL. Ela indica à página de detalhes
qual registro deverá ser localizado e exibido. O termo id é o nome do parâmetro da URL e 43 é
o seu valor. Neste exemplo, o parâmetro da URL contém o número de identificação do
registro, 43.
Para obter mais informações sobre parâmetros de URL, consulte “Como compreender um
parâmetro URL”, na página 534.
Como localizar e exibir o registro solicitado na página de detalhes

Após completar a página mestra, é necessário localizar o registro solicitado no banco de dados e
exibi-lo na página de detalhes. O procedimento consiste em definir um conjunto de registros para
manter um único registro (o registro solicitado pela página mestra) e ligar as colunas do conjunto
de registros à página.
Para localizar e exibir o registro solicitado na página de detalhes:
1 Alterne para a página de detalhes.

ou DataSet (ASP.NET) no menu pop-up.
A caixa de diálogo simples Conjunto de registros é exibida. Se a caixa de diálogo Conjunto de
registros avançada aparecer, clique em Simples.
3 Atribua um nome ao conjunto de registros e, em seguida, escolha uma conexão e uma tabela de
banco de dados que fornecerá dados ao conjunto de registros.
4 Na área Coluna, selecione as colunas da tabela a serem incluídas no conjunto de registros.
O conjunto de registros pode ser idêntico ou diferente do conjunto de registros na página
mestra. Normalmente, um conjunto de registros de uma página de detalhes possui mais
colunas para exibir mais detalhes.
Se os conjuntos de registros forem diferentes, o conjunto de registros na página de detalhes
deverá conter ao menos uma coluna em comum com a página mestra. Normalmente, a coluna
em comum é a coluna de identificação do registro, mas pode ser também o campo de junção
das tabelas relacionadas.
Para incluir apenas algumas das colunas da tabela no conjunto de registros, clique em
Selecionado e escolha as colunas desejadas, clicando na lista e pressionando simultaneamente a
tecla Control.
652 Capítulo 39
5 Preencha a seção Filtro para localizar e exibir o registro especificado no parâmetro da URL
transferido da página de resultados, do seguinte modo:
• No primeiro menu pop-up da área Filtro, selecione a coluna da tabela do banco de dados que
contém os valores que coincidem com o valor do parâmetro da URL transferido da página
mestra.
Por exemplo: se o parâmetro da URL contiver um número de identificação de registro, escolha
a coluna que contém os números de identificação de registro.
• No menu pop-up ao lado do primeiro menu, selecione o sinal de igual (que já deve ter sido
selecionado).
• No terceiro menu pop-up, selecione Parâmetro da URL.
A página mestra transferirá as informações que identificam a seleção do usuário à página de
detalhes em um parâmetro da URL.
• Na quarta caixa, digite o nome do parâmetro da URL transferido da página mestra.
Por exemplo: se a URL da página mestra utilizada para abrir a página de detalhes for
www.meusite.com/detalhesdocliente.asp?id=43, digite id.
Também é possível obter o nome alternando para a página mestra, abrindo o painel
Comportamentos de servidor (Janela > Comportamentos de servidor) e clicando duas vezes no
comportamento de servidor Ir para a página Detalhes. Verifique o nome associado à opção
Repassar o parâmetro da URL.
6 Clique em OK.
O conjunto de registros é exibido no painel Ligações.
7 Ligue as colunas do conjunto de registros à página selecionando-as no painel Ligações (Janela >
Ligações) e arrastando-as até a página.
Como modificar páginas-mestras/detalhes

Após criar páginas-mestras/detalhes com comportamentos de servidor, utilize o painel
Comportamentos de servidor para modificar os vários blocos de criação nas páginas. Para obter
mais informações, veja “Como editar um comportamento de servidor”, na página 618.
Se você criou páginas com o objeto live, é necessário utilizar também o painel Comportamentos
de servidor para editar os blocos de criação que o objeto live insere nas páginas. O objeto live
adicionará os seguintes blocos de criação à página mestra:
• Uma tabela básica com uma região repetida, para exibir diversos registros
• Uma barra de navegação do conjunto de registros
• Um contador de registros
• Um comportamento de servidor Ir para a página Detalhes, para abrir a página de detalhes e
repassar a identificação do registro clicado pelo usuário
O objeto live adicionará também os seguintes blocos de criação à página:
• Uma tabela básica, para exibir um único registro
• um conjunto de registros filtrado, para localizar e exibir o registro no qual o usuário tiver
clicado na página mestra

654 Capítulo 39
CAPÍTULO 40
Como criar páginas que realizam buscas em
bancos de dados
O Dreamweaver MX pode ser utilizado para criar um conjunto de páginas para permitir que os
usuários efetuem buscas no banco de dados.
• “Como criar a página de busca”, na página 656
• “Como criar a página de resultados”, na página 657
• “Como criar uma página de detalhes para uma página de resultados”, na página 662
• “Como trabalhar com as páginas relacionadas (apenas usuários de ASP e JSP)”, na página 666
As páginas de busca/resultados
São necessárias pelo menos duas páginas para adicionar este recurso ao aplicativo da Web. A
primeira página contém um formulário HTML, no qual os usuários digitarão os parâmetros de
busca. Embora não efetue nenhuma busca na realidade, a página é conhecida como “página de
busca”.
A segunda página necessária é a página de resultados, o elemento fundamental do conjunto de
páginas. A página de resultados efetua as seguintes tarefas:
• Lê os parâmetros de busca enviados pela página de busca
• Conecta-se ao banco de dados e realiza a busca dos registros
• Cria um conjunto de registros a partir dos registros localizados
• Exibe o conteúdo do conjunto de registros
Opcionalmente, é possível adicionar uma página de detalhes. Uma página de detalhes fornece aos
usuários as informações sobre um determinado registro da página de resultados.
Se houver apenas um parâmetro de busca, o Dreamweaver permitirá adicionar o recurso de busca
ao aplicativo da Web sem o uso de consultas e variáveis SQL. Basta projetar as páginas e preencher
algumas caixas de diálogo. Se houver mais de um parâmetro de busca, será necessário codificar
uma instrução SQL e definir diversas variáveis para ela.
655
Como criar a página de busca
Normalmente, as páginas de busca na Web contêm campos de formulário, nos quais o usuário
digitará os parâmetros de busca. Quando o usuário clicar no botão Busca do formulário, os
parâmetros de busca serão enviados à página de resultados no servidor. A página de resultados no
servidor (e não a página de busca do navegador) é responsável pela recuperação dos registros do
banco de dados.
Para iniciar esta parte do aplicativo para a Web, crie duas páginas: uma página de busca, que
permitirá ao usuário digitar os parâmetros de busca, e uma página de resultados que exibirá os
registros localizados. É possível, inclusive, combinar as duas páginas em uma só. A página de
busca deve ter pelo menos um formulário HTML com um botão Enviar.
Para adicionar um formulário HTML a uma página de busca:
1 Abra a página de busca e selecione Formulário no menu Inserir.

Um formulário vazio é criado na página. Talvez seja preciso ativar os Elementos invisíveis
(Exibir > Auxílios visuais > Elementos invisíveis) para exibir os limites do formulário, que são
representados por linhas finas vermelhas.
2 Adicione objetos de formulário para os usuários digitarem os parâmetros de busca escolhendo
Objetos de formulário no menu Inserir.
Os objetos de formulário incluem campos de texto, menus de lista, caixas de seleção e botões
de opção. É possível adicionar tantos objetos de formulário quantos desejar para auxiliar os
usuários a aprimorar as suas buscas. Contudo, lembre-se de que quanto mais parâmetros de
busca na página, mais complexa será a instrução SQL.
Para obter mais informações sobre objetos de formulário, consulte o Capítulo 38, “Criação de
formulários interativos”, na página 621.
3 Adicione ao formulário um botão Enviar (Inserir > Objetos de formulário > Botão).
4 Se desejar, altere o identificador do botão Enviar selecionando o botão. Em seguida, abra o
inspetor de propriedades (Janela > Propriedades) e digite um novo valor na caixa Identificador.
Por exemplo: este é o inspetor de propriedades de um botão identificado como “busca”:
Em seguida, indique ao formulário para onde enviar os parâmetros de busca quando o usuário
clicar no botão Enviar.
5 Selecione o formulário selecionando a tag <form> no seletor de tags na parte inferior da janela
do documento, como no exemplo a seguir:
6 Na caixa de diálogo Ação, no inspetor de propriedades do formulário, digite o nome do

arquivo da página de resultados que irá efetuar a busca no banco de dados.
656 Capítulo 40
7 No menu pop-up Método, escolha um dos seguintes métodos para determinar como o
formulário enviará os dados ao servidor:
• GETenvia os dados do formulário anexando-os à URL como uma seqüência de caracteres de
consulta. Como as URLs limitam-se a 8192 caracteres, não utilize o método GET com
formulários longos.
• POST envia os dados de formulário no corpo de uma mensagem.
• Default utiliza o método padrão do navegador (normalmente GET).
A página de busca está pronta. Em seguida, prepare a página de resultados.
Como criar a página de resultados

Depois que o usuário digitar os parâmetros de busca, o aplicativo deve recuperar os registros do
banco de dados. Esta tarefa é executada pela página de resultados.
Veja abaixo as funções da página de resultados:
• Obter os parâmetros de busca da página de busca.
• Conectar-se ao banco de dados e buscar os registros.
• Crie um conjunto de registros com os registros localizados.
• Exibir o conteúdo do conjunto de registros.
Se a página de busca tiver apenas um parâmetro de busca (um único campo de texto, por
exemplo), é possível criar a página de resultados sem consultas e variáveis SQL. É possível criar
um conjunto de registros básico e, em seguida, adicionar-lhe um filtro para excluir os registros que
não correspondem aos parâmetros de busca enviados pela página de busca. Para obter instruções,
consulte “Como efetuar uma busca com um único parâmetro de busca”, na página 657.
Se a página de busca possuir mais de um parâmetro de busca, será necessário codificar uma
instrução SQL e definir diversas variáveis para ela. Para obter instruções, consulte “Como efetuar
uma busca com diversos parâmetros de busca”, na página 659.
Como efetuar uma busca com um único parâmetro de busca

Se a página de busca enviar um único parâmetro de busca ao servidor, é possível criar a página de
resultados sem consultas e variáveis SQL. Crie um conjunto de registros básico com um filtro que
excluirá os registros que não correspondem ao parâmetro de busca enviado pela página de busca.
Observação: Se houver mais de uma condição de busca, será necessário utilizar a caixa de diálogo avançada
Conjunto de registros para definir o conjunto de registros. A caixa de diálogo simples Conjunto de registros oferece
suporte a apenas uma condição de busca. Para obter mais informações, veja “Como efetuar uma busca com
diversos parâmetros de busca”, na página 659.
Para criar o conjunto de registros que abrigará os resultados da busca:
1 Abra a página de resultados na janela Documento.

2 Crie um novo conjunto de registro no painel Ligações (Janela > Ligações), clique no botão com
o sinal de adição (+) e selecione Conjunto de registros ou DataSet (ASP.NET) no menu pop-
up.
Como criar páginas que realizam buscas em bancos de dados 657

3 Certifique-se de que a caixa de diálogo simples Conjunto de registros ou DataSet seja exibida.
Se a caixa de diálogo avançada for exibida, alterne para a caixa de diálogo simples clicando no
botão Simples.
4 Digite um nome para o conjunto de registros e escolha uma conexão.
A conexão deve ocorrer com um banco de dados que contenha os dados a serem pesquisados
pelo usuário.
5 No menu pop-up Tabela, selecione a tabela do banco de dados na qual será efetuada a busca.
Observação: Numa busca com um único parâmetro, é possível efetuar a busca nos registros com apenas uma
única tabela. Para efetuar uma busca simultânea em mais de uma tabela, é necessário utilizar a caixa de diálogo
avançada 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 na lista e pressionando simultaneamente a
tecla Control.
Selecione as colunas que contêm as informações que desejar exibir na página de resultados.
Mantenha aberta a caixa de diálogo Conjunto de registros ou DataSet, por enquanto. Ela será
utilizada a seguir para efetuar uma busca dos parâmetros enviados pela página de busca e criar um
filtro do conjunto de registros, para excluir os registros que não corresponderem aos parâmetros.
Para criar o filtro do conjunto de registros:
1 No primeiro menu pop-up da área Filtro, selecione uma coluna na tabela que será comparada
com o parâmetro de busca enviado pela página de busca.
Por exemplo: se o valor enviado pela página de busca for um nome de cidade, selecione a
coluna na tabela que contiver nomes de cidades.
2 No menu pop-up ao lado do primeiro menu, selecione o sinal de igual (que deve ser o padrão).
Esta opção informa que o usuário deseja apenas os registros nos quais a coluna da tabela
selecionada for exatamente a mesma que a especificada na página de busca.
658 Capítulo 40
3 No terceiro menu pop-up, selecione Variável de formulário, se o formulário na página de busca
utilizar o método POST, ou o parâmetro da URL, se utilizar o método GET.
Este menu pop-up especifica onde o valor enviado pela página de busca foi armazenado no
servidor. No ASP, se o formulário de busca utilizar o método POST, o valor será armazenado no
conjunto Request.Form. Se o formulário de busca utilizar o método GET, o valor será
armazenado no conjunto Request.QueryString.
4 Na quarta caixa, digite o nome do objeto de formulário que aceitará o parâmetro de busca na
página de busca.
É possível obter o nome alternando para a página de busca, clicando no objeto de
formulário no formulário para selecioná-lo e marcando o nome do objeto no inspetor de
propriedades.
Por exemplo: suponha que você deseja criar um conjunto de registros que inclua somente
viagens de aventuras para um determinado país. Imagine que há uma coluna na tabela
denominada TRIPLOCATION. Imagine também que um formulário HTML na página de busca
utilize o método GET e contenha um objeto de lista/menu, denominado Locação, que exibe
uma lista de países. Esta é a aparência que a seção Filtro deverá ter:
5 Se desejar, clique em Testar, digite um valor de teste e clique em OK para conectar-se ao banco
de dados e criar uma instância do conjunto de registros.
O valor de teste simula o valor que teria sido retornado da página de busca. Clique em OK
para fechar o conjunto de registros.
6 Se estiver satisfeito com o conjunto de registros, clique em OK.
O Dreamweaver insere um script do servidor na página que, quando executado no servidor,
verificará cada registro na tabela do banco de dados. Se o campo especificado em um registro
corresponder à condição de filtragem, o registro será incluído em um conjunto de registros. O script
válido criará um conjunto de registros apenas com os resultados da busca.
A próxima etapa consiste em exibir o conjunto de registros na página de resultados. Para obter
mais informações, veja “Como exibir os registros”, na página 661.
Como efetuar uma busca com diversos parâmetros de busca

Se a página de busca enviar mais de um parâmetro de busca ao servidor, será necessário codificar
uma consulta SQL para a página de resultados e utilizar os parâmetros de busca em variáveis SQL.
Depois que o Dreamweaver inserir a consulta SQL na página e esta for executada no servidor,
cada registro na tabela do banco de dados será verificado. Se o campo especificado em um registro
corresponder às condições da consulta SQL, o registro será incluído em um conjunto de registros.
A consulta SQL válida criará um conjunto de registros apenas com os resultados da busca.

Por exemplo: os funcionários de vendas podem informar quais clientes de uma determinada área
possuem salários acima de um determinado nível. No formulário de uma página de busca, o
funcionário de vendas digitará uma área geográfica e um valor mínimo de nível de salário e, em
seguida, cliqueá no botão Enviar para enviar os dois valores ao servidor. No servidor, os valores
serão repassados à instrução SQL da página de resultados, que criará um conjunto de registros
contendo apenas os clientes na área específica, cujos salários se situam acima do nível especificado.
Para efetuar uma busca dos registros de um banco de dados utilizando SQL:
1 Abra a página de resultados no Dreamweaver e, em seguida, crie um novo conjunto de registros

abrindo o painel Ligações (Janela > Ligações), clicando no botão com o sinal de adição (+) e
selecionando Conjunto de registros ou DataSet (ASP.NET) no menu pop-up.
2 Certifique-se de que a caixa de diálogo avançada de Conjunto de registros ou DataSet seja
exibida.
Se a caixa de diálogo simples for exibida, alterne para a caixa de diálogo simples clicando no
botão Avançado.
3 Digite um nome para o conjunto de registros e escolha uma conexão.
A conexão deve ocorrer com um banco de dados que contenha os dados a
serem pesquisados pelo usuário.
4 Insira uma instrução Select na área de texto SQL.
Certifique-se de que a instrução inclua uma cláusula Where com variáveis para abrigar os
parâmetros de busca. No seguinte exemplo, as variáveis são denominadas varLastName e varDept:
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION ¬
FROM EMPLOYEE WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT ¬
LIKE 'varDept'
Para reduzir o tempo de digitação, é possível utilizar a hierarquia de itens de banco de dados na
parte inferior da caixa de diálogo avançada Conjunto de registros. Para obter instruções,
consulte “Criação de conjunto de registros avançado gravando SQL”, na página 546.
Para obter ajuda sobre a sintaxe de SQL, consulte “Manual básico de SQL”, na página 719.
660 Capítulo 40
5 Atribua às variáveis SQL os valores dos parâmetros de busca, clicando no botão com o sinal de
adição (+) na área Variáveis e digitando o nome da variável, o valor padrão (valor que a variável
deve assumir, se nenhum valor em tempo de execução for retornado) e o valor em tempo de
execução (normalmente um objeto de servidor contendo um valor enviado pelo navegador
como, por exemplo: uma variável de solicitação).
No exemplo em ASP a seguir, o formulário em HTML da página de busca utiliza o método GET
e contém um campo de texto denominado “LastName” (Sobrenome) e outro denominado
“Departamento” (Departamento).
No Macromedia ColdFusion, os valores em tempo de execução seriam #LastName# e

#Department#. No JSP, os valores em tempo de execução seriam
request.getParameter("LastName") e request.getParameter("Department").
6 Se desejar, clique em Testar para criar uma instância do conjunto de registros utilizando os
valores padrão das variáveis.
Os valores padrão simulam os valores que seriam retornados da página de busca. Clique em
OK, para fechar o conjunto de registros de teste.
7 Se estiver satisfeito com o conjunto de registros, clique em OK.
Como exibir os registros

Depois de criar um conjunto de registros para abrigar os resultados da busca, é possível exibir as
informações na página de resultados. A exibição dos registros consiste apenas em arrastar as
colunas do painel Ligações até a página de resultados. É possível adicionar links de navegação,
para mover para frente e para trás no conjunto de registros ou criar uma região repetida para exibir
mais de um registro na página. Também é possível adicionar links a uma página de detalhes.
Para obter mais informações sobre como exibir conteúdo dinâmico em uma página, veja:
• “Como criar uma página de detalhes para uma página de resultados”, na página 662
• “Como adicionar conteúdo dinâmico às páginas da Web”, na página 561
• “Como exibir os registros de bancos de dados”, na página 569

Como criar uma página de detalhes para uma página de
resultados
O conjunto de páginas de busca pode conter uma página de detalhes, que exibirá mais
informações sobre determinados registros da página de resultados. Na página de resultados, os
registros são normalmente exibidos em uma região repetida e cada registro possui um link.
Quando o usuário clicar em um link, a página de detalhes se abre exibindo mais informações
sobre o registro selecionado.
“Como modificar uma página de resultados para que funcione com uma página de detalhes”, na
página 662
“Como criar a página de detalhes utilizando um comportamento de servidor (somente usuários
ASP e JSP)”, na página 663
“Como criar a página de detalhes utilizando um conjunto de registros filtrado”, na página 664
Como modificar uma página de resultados para que funcione com uma
página de detalhes
A página de resultados deve possuir uma região repetida para exibir mais de um registro por vez e
cada registro na região repetida deve possuir um link à página de detalhes. O link não deve apenas
abrir a página de detalhes, mas informá-la sobre qual registro o usuário selecionou. O
comportamento de servidor Ir para página Detalhes cria este tipo de link (apenas para usuários
ASP e JSP).
Usuários de PHP, ASP.NET e ColdFusion devem criar um link com parâmetros URL no código.
Para obter mais informações, veja “Criação de um parâmetro da URL utilizando links HTML”,
na página 536.
Para modificar uma página de resultados para que funcione com uma página de detalhes (apenas
para usuários ASP e JSP):
1 Crie uma página de detalhes vazia (Arquivo > Novo) e dê um nome ao arquivo.
Deixe de lado a página, por enquanto. Você trabalhará nela mais tarde.
2 Abra a página de resultados no Dreamweaver.
3 Certifique-se de que os resultados sejam exibidos em uma região repetida.
Para obter instruções, consulte “Como exibir diversos registros”, na página 576.
4 Na região repetida, selecione o texto ou a imagem que funcionarão como um link.
Se estiver trabalhando na janela do Live Data, selecione o texto ou a imagem na primeira região
exibida.
Observação: O texto ou a imagem que selecionar podem ser dinâmicos.
662 Capítulo 40
5 Crie o link à página de detalhes, abrindo o painel Comportamentos de servidor (Janela >
Comportamentos de servidor), clicando no botão com o sinal de adição (+) e selecionando Ir
para a página Detalhes no menu pop-up.
A caixa de diálogo Ir para a página Detalhes é exibida.

7 Clique em OK.
A página de resultados repassará o valor à página de detalhes em um parâmetro da URL, que é
simplesmente uma variável anexada ao final da URL utilizada para abrir a página de detalhes. Por
exemplo: se o parâmetro da URL for denominado id e a página de detalhes for denominada
detalhesdocliente.asp, quando o usuário clicar no link, a URL terá uma aparência semelhante ao
exemplo:
http://www.mysite.com/detalhesdocliente.asp?id=43
A primeira parte da URL, http://www.meusite.com/detalhesdocliente.asp, abrirá a página
de detalhes. A segunda parte, ?id=43, é o parâmetro da URL. Ela indica à página de detalhes qual
registro deverá ser localizado e exibido. O termo id é o nome do parâmetro da URL e 43 é o seu
valor. Neste exemplo, o parâmetro da URL contém o número de identificação do registro, 43.
Como criar a página de detalhes utilizando um comportamento de servidor

(somente usuários ASP e JSP)
Depois de modificar a página de resultados para que funcione com a página de detalhes, complete
a página de detalhes. É possível criar a página de detalhes com uma combinação de um conjunto
de registros normal e um comportamento de servidor ou criá-la utilizando apenas um conjunto de
registros filtrado. Esta seção descreve como criar o primeiro tipo de página de detalhes (para
usuários ASP e JSP somente). Para aprender como criar o segundo tipo, consulte “Como criar a
página de detalhes utilizando um conjunto de registros filtrado”, na página 664.
Primeiramente, crie a página de detalhes utilizando as ferramentas de projeto do Dreamweaver.
Para obter mais informações, veja “Como criar páginas-mestras/detalhes”, na página 647.
Em seguida, defina um conjunto de registros para a página ou copie e cole o conjunto de registros
da página de resultados. A página de detalhes extrairá os detalhes do registro deste conjunto de
registros. Para obter instruções, consulte “Definição de um conjunto de registros”, na página 544
e “Como copiar um conjunto de registros para outra página”, na página 559.

A seguir, ligue as colunas do conjunto de registros à página. No painel Ligações (Janela >
Ligações), selecione as colunas no conjunto de registros e arraste-as até a página.
Em seguida, adicione um comportamento de servidor que efetue a leitura da identificação do
registro no parâmetro da URL, transferido da página de resultados, e recupere o registro. Se esta
etapa for omitida, o servidor irá recuperar o primeiro registro no conjunto de registros.
Para recuperar um registro específico utilizando um comportamento de servidor (usuários ASP e

JSP somente):

botão com o sinal de adição (+), selecione Ir para o registro no menu pop-up e escolha Ir
para um determinado registro.
A caixa de diálogo Ir para um determinado registro é exibida.

3 Clique em OK.
Sempre que a página for solicitada por uma navegador, o navegador reconhecerá a identificação
do registro no parâmetro da URL repassado pelo navegador e moverá ao registro especificado no
conjunto de registros.
Como criar a página de detalhes utilizando um conjunto de registros filtrado

Outra maneira de criar uma página de detalhes consiste em filtrar o conjunto de registros para que
reste apenas um único registro, ou seja, aquele que o usuário tiver selecionado na página de
resultados. Este método pode melhorar o desempenho do aplicativo porque o conjunto de
registros conterá apenas um registro.
Primeiramente, crie a página utilizando as ferramentas de projeto do Dreamweaver. Para obter
mais informações, veja “Como criar páginas-mestras/detalhes”, na página 647.
Em seguida, defina um conjunto de registros para a página ou copie e cole o conjunto de registros
da página de resultados. A página de detalhes extrairá os detalhes do registro deste conjunto de
registros. Para obter instruções, consulte “Definição de um conjunto de registros”, na página 544
e “Como copiar um conjunto de registros para outra página”, na página 559.
A seguir, crie um filtro de conjunto de registros para recuperar o registro especificado na página de
resultados. Se um conjunto de registros for criado através da caixa de diálogo simples Conjunto de
registros, é possível utilizar as caixas Filtro para criar o filtro. Se a caixa de diálogo avançada
Conjunto de registros for utilizada, é possível modificar a consulta SQL para criar o filtro.
664 Capítulo 40
Para recuperar um determinado registro utilizando um filtro de conjunto de registros:
1 Certifique-se de que a página de detalhes contenha um conjunto de registros.

2 Abra o conjunto de registros clicando duas vezes no seu nome no painel Ligações (Janela >
Ligações).
3 Certifique-se de que a caixa de diálogo simples Conjunto de registros ou DataSet seja exibida.
Se a caixa de diálogo avançada aparecer, alterne para a caixa de diálogo simples clicando no
botão Simples. Se o Dreamweaver informar que não é possível alternar para a caixa simples
(normalmente porque a consulta é demasiado complexa para ser exibida na caixa de diálogo
simples), será necessário utilizar uma consulta SQL para localizar o registro. Passe ao
procedimento seguinte nesta seção.
4 Preencha a seção Filtro para localizar e exibir o registro especificado no parâmetro da URL
transferido da página de resultados, do seguinte modo:
• No primeiro menu pop-up da área Filtro, selecione a coluna da tabela do banco de dados que
contém os valores que coincidem com o valor do parâmetro da URL, repassado da página de
resultados.
Por exemplo: se o parâmetro da URL contiver um número de identificação de registro, escolha
a coluna que contém os números de identificação de registro.
• No menu pop-up ao lado do primeiro menu, selecione o sinal de igual (que já deve ter sido
selecionado).
• No terceiro menu pop-up, selecione Parâmetro da URL.
A página de resultados repassará as informações que identificam a seleção do usuário à página
de detalhes em um parâmetro da URL.
• Na quarta caixa de texto, digite o nome do parâmetro da URL transferido da página de
resultados.
Por exemplo: se a URL da página de resultados utilizada para abrir a página de detalhes for
www.meusite.com/detalhesdocliente.asp?id=43, digite id.
Se o comportamento de servidor Ir para a página Detalhes for utilizado na página de
resultados, será possível também obter o nome alternando para a página de resultados, abrindo
o painel Comportamentos de servidor (Janela > Comportamentos de servidor) e clicando duas
vezes no comportamento de servidor Ir para a página Detalhes. Verifique o nome associado à
opção Repassar o parâmetro da URL.
5 Clique em OK.
6 Caso ainda não tenha feito, ligue as colunas do conjunto de registros à página selecionando-as
no painel Ligações (Janela > Ligações) e arrastando-as até a página.
Para recuperar um determinado registro utilizando uma consulta SQL:
1 Certifique-se de que a página de detalhes contenha um conjunto de registros.

2 Abra o conjunto de registros clicando duas vezes no seu nome no painel Ligações (Janela >
Ligações).
3 Verifique se a caixa de diálogo avançada Conjunto de registros foi exibida.
Se a caixa de diálogo simples Conjunto de registros aparecer, alterne para a caixa de diálogo
avançada Conjunto de registros clicando no botão Avançada.

4 Adicione uma cláusula Where à instrução SQL para localizar o registro que o usuário tiver
selecionado na página de resultados.
A cláusula Where deve conter uma variável para armazenar o valor repassado no parâmetro da
URL. No seguinte exemplo, a variável é denominada varDept:
SELECT * FROM EMPLOYEES
WHERE DEPARTMENT = 'varDept'
Para obter ajuda sobre a sintaxe de SQL, consulte “Manual básico de SQL”, na página 719.
5 Atribua à variável o valor que a página de resultados tiver repassado ao parâmetro da URL
clicando no botão com o sinal de adição (+) na área Variáveis e digitando o nome da variável, o
valor padrão (o valor que a variável deverá assumir se nenhum valor em tempo de execução for
retornado) e o valor em tempo de execução.
No seguinte exemplo em ASP, a página de resultados repassará um parâmetro da URL
denominado Department.
6 Clique em OK.
7 Caso ainda não tenha feito, ligue as colunas do conjunto de registros à página selecionando-as
no painel Ligações (Janela > Ligações) e arrastando-as até a página.
Como trabalhar com as páginas relacionadas (apenas usuários

de ASP e JSP)
Em algumas situações, o usuário pode desejar exibir uma página diferente da página de busca, da
página de resultados ou da página de detalhes, mas sem perder as informações que a página
recebeu de um formulário HTML ou parâmetro de URL. Em vez de utilizar um link padrão para
abrir a página relacionada, crie o link utilizando o comportamento de servidor Ir para a página
relacionada. O link resultante abrirá a página relacionada e repassará os parâmetros existentes à
página. Por exemplo: é possível repassar os parâmetros de busca de uma página para outra,
evitando que o usuário tenha que digitar novamente os parâmetros de busca.
Observação: Este comportamento de servidor está disponível para páginas ASP e JSP somente.
Antes de adicionar à página um comportamento de servidor Ir para a página relacionada,

certifique-se de que a página receba os parâmetros de um formulário HTML (em outras palavras,
o atributo ACTION do formulário especifica a página) ou de um parâmetro da URL como, por
exemplo: quando a página for o link de destino de outra página com um comportamento de
servidor Ir para a página relacionada.
666 Capítulo 40
Para criar um link que repassa parâmetros de formulário existentes a uma página relacionada:
1 Na página, selecione a seqüência de caracteres de texto ou imagens que deverão funcionar

como link à página relacionada.
botão com o sinal de adição (+) e escolha Ir para a página relacionada no menu pop-up.
A caixa de diálogo Ir para a página relacionada é exibida.

4 Clique em OK.
Quando um usuário clicar no novo link, a página repassará os parâmetros à página relacionada
utilizando os parâmetros da URL. Por exemplo: suponha que parâmetro de formulário seja
denominado “lastname” (sobrenome) e a página relacionada seja denominada oferta_especial.asp.
Quando o usuário clicar no link, a URL terá a seguinte aparência:
http://www.mysite.com/oferta_especial.asp?lastname=Anderson
A primeira parte da URL, http://www.mysite.com/oferta_especial.asp, abre a página relacionada.
A segunda parte, ?lastname=Anderson, é o parâmetro da URL que repassará o parâmetro do
formulário à página relacionada.

668 Capítulo 40
CAPÍTULO 41
Como criar páginas para modificar bancos de
dados
O Dreamweaver MX da Macromedia é distribuído com um conjunto de comportamentos de

servidor que permitem aos usuários adicionar, atualizar e excluir registros utilizando os seus
navegadores da Web Podem ser utilizados objetos de aplicativos na criação de formulários HTML
totalmente funcionais para inserir ou atualizar os registros.
• “Como criar uma página para inserir registros”, na página 670
• “Como criar uma página para atualizar os registros”, na página 673
• “Como criar uma página para excluir um registro”, na página 678
• “Como utilizar os procedimentos armazenados para modificar bancos de dados”, na
página 681
• “Como utilizar comandos ASP para modificar um banco de dados”, na página 686
• “Como utilizar as instruções preparadas JSP para modificar um banco de dados”, na
página 688
669
Como criar uma página para inserir registros
O aplicativo pode conter uma página que permite aos usuários inserir novos registros em um
banco de dados. Por exemplo: a página a seguir insere um novo registro em um banco de dados de
funcionários:
Uma página de inserção é composta por dois blocos básicos:

• Um formulário HTML que permite aos usuários inserir dados
• Um comportamento de servidor Inserir registro que atualiza o banco de dados
Os blocos de criação podem ser inseridos em uma única operação utilizando o objeto live
Formulário de inserção de registros ou adicionados separadamente através das ferramentas de
formulário e do painel Comportamentos de servidor do Dreamweaver.
Observação: A página de inserção pode conter apenas um comportamento de servidor de edição de registros de
cada vez. Por exemplo: não é possível adicionar um comportamento de servidor Atualizar o registro ou Excluir o
registro na página de inserção.
Como construir uma página de inserção em pouco tempo

Os blocos de criação básicos de uma página de inserção podem ser adicionados por meio de uma
única operação com o objeto live Formulário de inserção de registros. O objeto live inclui um
formulário HTML e um comportamento de servidor Inserir registro na página.
Os blocos de criação também podem ser adicionados separadamente por intermédio das
ferramentas de formulário e do painel Comportamentos de servidor. Para obter mais informações,
veja “Como criar uma página de inserção em blocos”, na página 671.
Após colocar os blocos de criação em uma página, utilize as ferramentas de projeto do Dreamweaver
para personalizar o formulário como desejar ou o painel Comportamentos de servidor para editar o
comportamento Inserir registro.
670 Capítulo 41
Para criar a página de inserção com o objeto live Formulário de inserção de registros:
1 Abra a página no modo de visualização do projeto e selecione Inserir > Objetos de aplicativo >
Formulário de inserção de registros.
A caixa de diálogo Inserir formulário de inserção de registros é exibida.

3 Clique em OK.
O Dreamweaver adiciona um formulário HTML e um comportamento de servidor Inserir
registro à página. Os objetos de formulário são dispostos em uma tabela básica, que pode ser
livremente personalizada utilizando as ferramentas de desenvolvimento de projetos de página do
Dreamweaver (certifique-se de que todos os objetos de formulário estejam dentro dos limites do
formulário).
Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela >
Comportamentos de servidor) e clique duas vezes no comportamento Inserir registro.
Como criar uma página de inserção em blocos

Os blocos de criação básicos de uma página de inserção podem ser adicionados separadamente
utilizando as ferramentas de formulário e o painel Comportamentos de servidor.
Os blocos de criação também podem ser adicionados simultaneamente utilizando o objeto
live Formulário de inserção de registros. Para obter mais informações, veja “Como construir uma
página de inserção em pouco tempo”, na página 670.
A primeira etapa é a inclusão de um formulário HTML na página para que os usuários possam
digitar dados.
Como criar páginas para modificar bancos de dados 671

Para adicionar um formulário HTML a uma página de inserção:
1 Crie uma nova página (Arquivo > Novo) e defina seu layout utilizando as ferramentas de
desenvolvimento de projetos do Dreamweaver.
2 Adicione um formulário HTML colocando o ponto de inserção onde o formulário deverá
aparecer e escolha Formulário no menu Inserir.
3 Denomine o formulário HTML clicando na tag <form> na parte inferior da janela do
documento para selecionar o formulário e, em seguida, abra o inspetor de propriedades
(Janela > Propriedades) e digite um nome na caixa Nome do formulário.
Não é necessário especificar um atributo action ou method ao formulário para informá-lo para
onde e como enviar os dados do registro quando o usuário clicar no botão Enviar. O
comportamento de servidor Inserir registro define esses atributos para o usuário.
4 Adicione um objeto de formulário (Inserir > Objetos de formulário) para cada coluna na tabela
de banco de dados na qual os registros serão inseridos.
Os objetos de formulário destinam-se à entrada de dados. Os campos de texto servem
comumente a este objetivo, mas também podem ser utilizados listas/menus, caixas de seleção e
botões de opção.
Para obter mais informações sobre objetos de formulário, veja “Criação de formulários
interativos”, na página 621.
Por exemplo: este é o inspetor de propriedades de um botão identificado por “Inserir registro”:
A etapa seguinte é a inclusão de um comportamento de servidor Inserir registro para adicionar

registros em uma tabela de banco de dados.
672 Capítulo 41
Para adicionar um comportamento de servidor que insira registros em uma tabela de banco de
dados:
No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão

com sinal de adição (+) e escolha Inserir registro no menu pop-up (usuários ASP.NET devem
selecionar Inserir registros no formulário Submit).
A caixa de diálogo Inserir registro é exibida.

2 Clique em OK.
O Dreamweaver adiciona um comportamento de servidor à página que permite aos usuários
inserir registros em uma tabela de banco de dados preenchendo o formulário HTML e clicando
no botão Enviar.
Como criar uma página para atualizar os registros

O aplicativo pode conter uma página que permite aos usuários atualizar os registros existentes em
uma tabela de banco de dados. Uma página de atualização é normalmente uma página Detalhes
que funciona junto com uma página de resultados. A página de resultados permite ao usuário
escolher um registro para atualizá-lo e, em seguida, a seleção é repassada para a página de
atualização.
Uma página de atualização é composta por três blocos de criação:
• Um conjunto de registros filtrado para recuperar o registro de uma tabela de banco de dados.
• Um formulário HTML que permite aos usuários modificar os dados do registro
• Um comportamento de servidor Atualizar o registro para atualizar a tabela de banco de dados
O formulário HTML e o comportamento de servidor podem ser adicionados a uma página em
uma única operação por meio do objeto live Formulário de atualização de registros ou podem ser
adicionados separadamente utilizando as ferramentas de formatação e o painel Comportamentos
de servidor do Dreamweaver.
Observação: A página de atualização pode conter apenas um comportamento de servidor de edição de registros
de cada vez. Por exemplo: não é possível incluir um comportamento de servidor Inserir registro ou Excluir o registro
na página de atualização.

Como identificar o registro a ser atualizado
Quando os usuários desejam atualizar um registro, é necessário localizá-lo primeiro no banco de
dados. Da mesma forma, são necessárias as páginas de busca e de resultados para funcionarem
com a página de atualização. Para obter instruções sobre a criação das páginas de busca e de
resultados, consulte “Como criar páginas que realizam buscas em bancos de dados”, na
página 655.
A página de resultados informa à página de atualização qual registro será atualizado repassando–
lhe um parâmetro da URL. Portanto, certifique-se de que a página de resultados contenha um
comportamento de servidor Ir para a página Detalhes, que determina a página de atualização
como a página de detalhes. Para obter instruções, consulte “Como modificar uma página de
resultados para que funcione com uma página de detalhes”, na página 662.
Como recuperar o registro a ser atualizado

Após a página de resultados repassar o parâmetro da URL à página de atualização para identificar
o registro a ser atualizado, a página de atualização deve ler o parâmetro, recuperá-lo na tabela do
banco de dados e armazená-lo temporariamente em um conjunto de registros.
Para recuperar um registro a ser atualizado:
1 No painel Ligações (Janela > Ligações), clique no botão com sinal de adição (+) e escolha
Conjunto de registros ou DataSet (ASP.NET).
Se a caixa de diálogo avançada for exibida, clique no botão Simples para abrir a caixa de diálogo
simples.
2 Denomine o conjunto de registros e especifique o local onde estão os dados a serem atualizados
utilizando os menus pop-up Conexão e Tabela.
3 Clique na opção Selecionados e escolha uma coluna de chave (em geral, a coluna de
identificação de registro) e as colunas que contêm os dados a serem atualizados.
4 Configure a área Filtro para que o valor da coluna de chave seja igual ao valor do parâmetro da
URL correspondente repassado pela página de resultados.
Este tipo de filtro cria um conjunto de registros que contém apenas o registro especificado pela
página de resultados. Por exemplo: se a coluna-chave contiver informações de identificação de
registro, se for chamada de PRID e a página de resultados repassar as informações de
identificação de registro correspondentes no parâmetro da URL id, esta será a aparência da área
Filtro:
Para obter mais informações, veja “Como criar a página de detalhes utilizando um conjunto de
registros filtrado”, na página 664.
5 Clique em OK.
Quando o usuário seleciona um registro na página de resultados, a página de atualização produz
um conjunto de registros contendo apenas o registro selecionado.
674 Capítulo 41
Como preencher rapidamente a página de atualização
Os dois blocos de criação finais de uma página de atualização podem ser adicionados em uma
única operação utilizando o objeto live Formulário de atualização de registros. O objeto live
adiciona à página um formulário HTML e um comportamento de servidor Atualizar o registro.
Antes de utilizar o objeto live, o aplicativo da Web deve identificar o registro a ser atualizado e a
página de atualização deve ser capaz de recuperá-lo (veja “Como identificar o registro a ser
atualizado”, na página 674 e “Como recuperar o registro a ser atualizado”, na página 674).
O formulário HTML e o comportamento de servidor Atualizar o registro podem ser adicionados
separadamente utilizando as ferramentas de formulário e o painel Comportamentos de servidor
(veja “Como preencher a página de atualização bloco a bloco”, na página 676).
Depois que o objeto live coloca os blocos de criação em uma página, utilize as ferramentas de
projeto do Dreamweaver para personalizar o formulário, de acordo com suas preferências, ou o
painel Comportamentos de servidor para editar o comportamento Inserir registro.
Para criar a página de atualização com o objeto live Formulário de atualização de registros:
1 Abra a página no modo de visualização do projeto e selecione Inserir > Objetos de aplicativo >
Formulário de atualização de registros.
A caixa de diálogo Formulário de atualização de registros é exibida.

3 Clique em OK.
O objeto live adiciona um formulário HTML e um comportamento de servidor Atualizar o
registro à página. Os objetos de formulário são dispostos em uma tabela básica, que pode ser
personalizada por meio das ferramentas de desenvolvimento de projetos de página do
Dreamweaver (certifique-se de que todos os objetos de formulário estejam dentro dos limites do
formulário).
Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela >
Comportamentos de servidor) e clique duas vezes no comportamento Atualizar o registro.

Como preencher a página de atualização bloco a bloco
Os dois blocos de criação básicos finais de uma página de atualização podem ser adicionados
separadamente utilizando as ferramentas de formulário e o painel Comportamentos de servidor.
Antes de adicionar os blocos, o aplicativo da Web deve identificar o registro a ser atualizado e a
página de atualização deve ser capaz de recuperá-lo (veja “Como identificar o registro a ser
atualizado”, na página 674 e “Como recuperar o registro a ser atualizado”, na página 674).
Os blocos de criação restantes também podem ser adicionados simultaneamente utilizando o
objeto live Formulário de atualização de registros (veja “Como preencher rapidamente a página de
atualização”, na página 675).
A primeira etapa é a inclusão de um formulário HTML na página para que os usuários possam
modificar os dados.
Para adicionar um formulário HTML a uma página de atualização:
1 Crie uma página nova (Arquivo > Novo).

2 Cria o layout da página com as ferramentas de projeto do Dreamweaver.
Não é necessário especificar um atributo action ou method para o formulário de modo a instrui-
lo para onde e como enviar os dados do registro quando o usuário clicar no botão Enviar. O
comportamento de servidor Atualizar o registro define esses atributos para o usuário.
5 Adicione um objeto de formulário (Inserir > Objetos de formulário) para cada coluna a ser
atualizada na tabela de banco de dados.
Os objetos de formulário destinam-se à entrada de dados. Os campos de texto servem
comumente a este objetivo, mas também podem ser utilizados listas/menus, caixas de seleção e
botões de opção.
A cada objeto de formulário deve corresponder uma coluna no conjunto de registros definido
anteriormente. A única exceção é a coluna de chave exclusiva, à qual não deve corresponder
nenhum objeto de formulário.
Para obter mais informações sobre objetos de formulário, veja “Criação de formulários
interativos”, na página 621.
676 Capítulo 41
Por exemplo: este é o inspetor de propriedades de um botão identificado por
“Atualizar registro”:
A próxima etapa é a exibição do registro no formulário através da ligação dos objetos de

formulário às colunas da tabela de banco de dados.
Para exibir o registro no formulário:
1 Certifique-se de ter definido um conjunto de registros para conter o registro que o usuário
deseja atualizar.
Para obter mais informações, veja “Como recuperar o registro a ser atualizado”, na página 674.
2 Arraste uma coluna da tabela de banco de dados do painel Ligações (Janela > Ligações) até o
objeto de formulário correspondente na página.
Para obter mais informações, veja “Como tornar dinâmicos os objetos ActiveX, Flash e outros
parâmetros de objetos”, na página 567.
A etapa final é a inclusão do comportamento de servidor Atualizar o registro para atualizar a
tabela de banco de dados, depois que o usuário modificar o registro.
Para adicionar um comportamento de servidor a fim de atualizar a tabela do banco de dados:

botão com sinal de adição (+) e escolha Atualizar o registro no menu pop-up.
A caixa de diálogo Atualizar o registro é exibida.

3 Clique em OK.
inserir registros em um banco de dados modificando as informações do formulário HTML e
clicando no botão Enviar.

Como criar uma página para excluir um registro
O aplicativo pode conter uma página que permite aos usuários excluir os registros existentes em
uma tabela de banco de dados. Uma página de exclusão é normalmente uma página de detalhes
que funciona junto com uma página de resultados. A página de resultados permite ao usuário
escolher um registro a ser excluído, em seguida, a seleção será transferida para a página de
exclusão.
Uma página de exclusão é composta por quatro blocos de criação:
• Um conjunto de registros filtrado para recuperar o registro de uma tabela de banco de dados.
• Uma exibição somente de leitura dos dados que serão excluídos
• Um botão Enviar que serve para enviar o comando de exclusão ao servidor
• Um comportamento de servidor Excluir o registro para atualizar a tabela do banco de dados
Observação: A página de exclusão pode conter apenas um comportamento de servidor de edição de registros de
cada vez. Por exemplo: não é possível incluir um comportamento de servidor Inserir registro ou Atualizar o registro
na página de exclusão.
Como identificar o registro a ser excluído

Quando os usuários planejam excluir um registro, é necessário localizá-lo primeiro no banco de
dados. Da mesma forma, são necessárias as páginas de busca e de resultados para funcionarem
com a página de exclusão. Para obter instruções sobre a criação das páginas de busca e de
resultados, consulte “Como criar páginas que realizam buscas em bancos de dados”, na
página 655.
A página de resultados informa à página de exclusão qual registro será excluído repassando–lhe
um parâmetro da URL. Portanto, certifique-se de que a página de resultados contenha um
comportamento de servidor Ir para a página Detalhes, que determine a página de exclusão como a
página de detalhes. Para obter instruções, consulte “Como modificar uma página de resultados
para que funcione com uma página de detalhes”, na página 662.
Como recuperar o registro a ser excluído

Depois que a página de resultados repassar o parâmetro da URL à página de exclusão para
identificar o registro a ser excluído, a página de exclusão deve ler o parâmetro, recuperá-lo na
tabela de banco de dados e armazená-lo temporariamente em um conjunto de registros.
Para recuperar um registro a ser excluído:
1 No painel Ligações (Janela > Ligações), clique no botão com sinal de adição (+) e escolha
Conjunto de registros ou DataSet (ASP.NET).
Se a caixa de diálogo avançada for exibida, clique no botão Simples para abrir a caixa de diálogo
simples.
2 Denomine o conjunto de registros e especifique o local onde estão os dados a serem excluídos
através dos menus pop-up Conexão e Tabela.
3 Na área Coluna, selecione a opção Todas para selecionar todas as colunas na tabela de banco de
dados.
678 Capítulo 41
4 Configure a área Filtro para que o valor da coluna de chave seja igual ao valor do parâmetro da
URL correspondente repassado pela página de resultados.
Este tipo de filtro cria um conjunto de registros que contém apenas o registro especificado pela
página de resultados. Por exemplo: se a coluna-chave contiver informações de identificação de
registro, se for chamada de PRID e a página de resultados repassar as informações de
identificação de registro correspondentes no parâmetro da URL id, esta será a aparência da área
Filtro:
Para obter mais informações, veja “Como criar a página de detalhes utilizando um conjunto de
registros filtrado”, na página 664.
5 Clique em OK.
Quando o usuário selecionar um registro na página de resultados, a página de exclusão produzirá
um conjunto de registros contendo apenas o registro selecionado.
Em seguida, adicione uma exibição somente de leitura dos dados a serem excluídos.
Como exibir os dados a serem excluídos

O procedimento adequado é exibir o registro antes da exclusão para que o usuário possa
confirmar sua remoção.
Para adicionar uma exibição somente de leitura do registro a ser excluído:
1 Certifique-se de definir um conjunto de registros para conter o registro que o usuário deseja
excluir.
Para obter mais informações, veja “Como recuperar o registro a ser excluído”, na página 678.
2 Arraste uma coluna do painel Ligações (Janela > Ligações) até a página.
O conteúdo dinâmico é exibido na página. Este conteúdo pode ser colocado na página em sua
forma original na página ou em uma tabela HTML. Para obter mais informações, veja “Como
tornar o texto dinâmico”, na página 562.
Como enviar o comando de exclusão ao servidor

A página de exclusão utiliza um botão Enviar para remeter o comando de exclusão ao servidor.
Para adicionar à página um botão Enviar, deve ser criado um formulário HTML. O formulário
pode conter apenas o botão Enviar.
Para adicionar um botão Enviar à página de exclusão:
1 Na visualização do projeto, coloque o ponto de inserção onde o botão Enviar deverá aparecer e
escolha Formulário no menu Inserir.

Não é necessário especificar um atributo action ou method para o formulário de modo a instrui-
lo para onde e como enviar os dados do registro quando o usuário clicar no botão Enviar. O
comportamento de servidor Excluir o registro define esses atributos para o usuário.
Por exemplo: este é o inspetor de propriedades de um botão identificado como “Excluir o
registro”:
Em seguida, adicione o comportamento de servidor Excluir o registro para atualizar a tabela de

banco de dados depois que o usuário clicar no botão Enviar.
Como excluir o registro de uma tabela de banco de dados

A etapa final é a inclusão do comportamento de servidor Excluir o registro para atualizar a tabela
de banco de dados, depois que o usuário clicar no botão Enviar.
Para adicionar um comportamento de servidor que exclua a tabela de banco de dados:

botão com sinal de adição (+) e escolha Excluir o registro no menu pop-up.
A caixa de diálogo Excluir o registro é exibida.

3 Clique em OK.
excluir registros em uma tabela de banco de dados clicando no botão Enviar.
680 Capítulo 41
Como utilizar os procedimentos armazenados para modificar
bancos de dados
É possível utilizar um procedimento armazenado para modificar um banco de dados. Um
procedimento armazenado é um item de banco de dados reutilizável que executa algumas
operações no banco de dados. Um procedimento armazenado contém códigos SQL que pode,
entre outras coisas, inserir, atualizar ou excluir registros. Os procedimentos armazenados podem
também alterar a estrutura do próprio banco de dados. Por exemplo: é possível utilizar um
procedimento armazenado para adicionar uma coluna da tabela ou mesmo excluir uma tabela.
O procedimento armazenado também pode chamar outro procedimento armazenado, bem como
aceitar parâmetros de entrada e retornar valores múltiplos para o procedimento de chamada em
formato de parâmetros de saída.
O procedimento armazenado é reutilizável, ou seja, é possível utilizar novamente uma única
versão compilada do procedimento para executar uma operação de banco de dados várias vezes. Se
uma tarefa de banco de dados for executada mais de uma vez ou se a mesma tarefa for executada
por aplicativos diferentes, o uso de um procedimento armazenado para executar esta tarefa pode
tornar as operações de banco de dados mais eficazes.
Observação: Os bancos de dados mySQL e Microsoft Access não oferecem suporte para procedimentos
armazenados.
Antes de utilizar um procedimento armazenado para modificar um banco de dados, certifique-se

de que o procedimento armazenado contenha o SQL que modifica o banco de dados de algum
modo. Para criar e armazenar o SQL em seu banco de dados, consulte a documentação do banco
de dados e um bom manual sobre Transact-SQL.
O procedimento para uso de um procedimento armazenado varia, dependendo do modelo de
servidor.

Como executar o procedimento armazenado no ColdFusion
Com as páginas do Macromedia ColdFusion no Dreamweaver, é necessário adicionar um
comportamento de servidor Procedimento armazenado a uma página para executar um
procedimento armazenado.
Para adicionar um procedimento armazenado a uma página do ColdFusion:
1 No Dreamweaver, abra a página onde o procedimento armazenado será executado.

2 No painel Ligações, clique no botão de adição (+) botão e selecione Procedimento armazenado.
A caixa de diálogo Procedimento armazenado é exibida.

As caixas de diálogo do ColdFusion 4 e do ColdFusion MX diferem entre si.
4 Clique em OK.
Após fechar a caixa de diálogo Procedimento armazenado, o Dreamweaver insere o código
ColdFusion em sua página de modo que, ao ser executado no servidor, chama um procedimento
armazenado no banco de dados. O procedimento armazenado, por sua vez, executa uma operação
de banco de dados, como inserir um registro.
Se o procedimento armazenado exigir parâmetros, é possível criar uma página para reunir os
valores de parâmetros e os submeter em seguida à página com o procedimento armazenado. Por
exemplo: é possível criar uma página que utiliza parâmetros da URL ou formulário HTML para
coletar valores de parâmetro de usuários.
682 Capítulo 41
Como executar o procedimento armazenado em ASP
Com as páginas ASP no Dreamweaver, é necessário adicionar um objeto de comando a uma
página para executar um procedimento armazenado. Para obter mais informações sobre objetos de
comando, veja “Como compreender objetos de comando ASP”, na página 686.
Para adicionar um procedimento armazenado a uma página ASP:

2 No painel Ligações, clique no botão de adição (+) botão e selecione Comando (Procedimento
armazenado).
A caixa de diálogo Comando é exibida.
3 Digite um nome para o comando, escolha uma conexão ao banco de dados que contém o
procedimento armazenado e selecione Procedimento armazenado no menu pop-up Tipo.
4 Selecione o procedimento armazenado expandindo a ramificação Procedimentos armazenados
na caixa Itens de banco de dados, selecionando o procedimento armazenado da lista e clicando
no botão Procedimento.
5 Insira quaisquer parâmetros necessários na tabela Variáveis.
Não é necessário inserir parâmetros para a variável RETURN_VALUE.
6 Clique em OK.
Após fechar a caixa de diálogo, o Dreamweaver insere o código ASP em sua página de modo que,
ao ser executado no servidor, cria um objeto de comando que ativa o procedimento armazenado
no banco de dados. O procedimento armazenado, por sua vez, executa uma operação de banco de
dados, como inserir um registro.
Por padrão, o código define a propriedade Preparado do objeto de comando para true, que faz o
servidor de aplicativos reutilizar uma única versão compilada do objeto sempre que o
procedimento armazenado for executado. Se o comando for executado diversas vezes, uma única
versão compilada do objeto pode melhorar a eficiência de operações de banco de dados. No
entanto, se o comando for executado apenas uma ou duas vezes, o uso de um único comando
poderá tornar lento o procedimento do aplicativo para a Web, pois o sistema deve ser
interrompido para compilar o comando. Para alterar a configuração, alterne para o modo de
visualização de código e modifique a propriedade Preparado para false.
Observação: Nem todos os provedores de banco de dados oferecem suporte a comandos preparados. Se o
banco de dados não tiver suporte para esses comandos, uma mensagem de erro poderá surgir quando você
executar a página. Alterne para Visualização e código e modifique a propriedade Preparado para false.

Como executar o procedimento armazenado com ASP.NET
Com as páginas ASP.NET no Dreamweaver, é necessário adicionar um comportamento de
servidor Procedimento armazenado a uma página para executar um procedimento armazenado.
Para adicionar um procedimento armazenado a uma página ASP.NET:

2 No painel Ligações, clique no botão de adição (+) botão e selecione Procedimento armazenado.
A caixa de diálogo Procedimento armazenado é exibida.

4 Clique em OK.
Após fechar a caixa de diálogo, o Dreamweaver insere o código ASP.NET em sua página de modo
que, ao ser executado no servidor, chama um procedimento armazenado no banco de dados. O
procedimento armazenado, por sua vez, executa uma operação de banco de dados, como inserir
um registro ou efetuar uma consulta.
684 Capítulo 41
Como executar o procedimento armazenado em JSP
Com as páginas JSP no Dreamweaver, é necessário adicionar um objeto de comando Chamável a
uma página para executar um procedimento armazenado.
Para adicionar um procedimento armazenado a uma página JSP:

2 No painel Ligações, clique no botão de adição (+) botão e selecione Chamável (Procedimento
armazenado).
A caixa de diálogo Chamável (Procedimento armazenado) é exibida.

4 Clique em OK.
Após fechar a caixa de diálogo Chamável (Procedimento armazenado), o Dreamweaver insere o
código JSP em sua página de modo que, ao ser executado no servidor, chama um procedimento
armazenado no banco de dados. O procedimento armazenado, por sua vez, executa uma operação
de banco de dados, como inserir um registro.

Como utilizar comandos ASP para modificar um banco de dados
O Dreamweaver pode ser utilizado para criar objetos de comando ASP para inserir, atualizar ou
excluir registros em um banco de dados. O objeto de comando pode ser fornecido com a
instrução SQL que executa a operação no banco de dados.
É possível também fornecer o objeto com procedimentos armazenados para executar a operação.
Para obter mais informações, veja “Como executar o procedimento armazenado em ASP”, na
página 683.
Como compreender objetos de comando ASP

Um objeto de comando é um objeto de servidor que executa algumas operações em um banco de
dados. O objeto pode conter qualquer instrução SQL válida, incluindo uma instrução que retorna
um conjunto de registros ou outra que insere, atualiza ou exclui registros de um banco de dados.
Um objeto de comando pode alterar a estrutura de um banco de dados se a instrução SQL
adicionar ou excluir uma coluna de tabela. É possível também utilizar um objeto de comando
para executar um procedimento armazenado em um banco de dados.
Um objeto de comando pode ser reutilizável, ou seja, o servidor de aplicativos pode utilizar
novamente uma única versão compilada do objeto para executar o comando várias vezes. Para
tornar um comando reutilizável, defina a propriedade Preparado do objeto de comando para true,
como na instrução VBScript a seguir:
mycommand.Prepared = true
Se o comando for executado diversas vezes, uma única versão compilada do objeto pode tornar as
operações de banco de dados mais eficientes.
Observação: Nem todos os provedores de banco de dados oferecem suporte a comandos preparados. Se o
banco de dados não oferecer suporte a comandos desse tipo, uma mensagem de erro poderá retornar ao definir
esta propriedade para true. Pode até mesmo ignorar o pedido para preparar o comando e definir a propriedade
Preparada para false.
Um objeto de comando é criado por meio scripts em uma página ASP, mas o Dreamweaver
permite criar objetos de comando sem que seja necessário escrever uma única linha de código ASP.
O restante desta seção descreve como utilizar ferramentas de desenvolvimento rápido de
aplicativos (Rapid Application Development – RAD ) no Dreamweaver para criar objetos de
comando ASP que editam registros de banco de dados.
Como criar um comando que utiliza SQL para editar um banco de dados
É possível utilizar um objeto de comando ASP que utiliza uma instrução SQL para inserir,
atualizar ou excluir registros de um banco de dados.
Para criar o objeto de comando:
1 No Dreamweaver, abra a página ASP onde que irá executar o comando.

botão com o sinal de adição (+) e selecione Comando.
A caixa de diálogo Comando é exibida.
686 Capítulo 41
3 Digite um nome para o comando, escolha uma conexão para o banco de dados contendo os
registros que deseja editar e selecione a operação de edição que deseja efetuar: Inserir, Atualizar
ou Excluir.
O Dreamweaver inicia a instrução SQL para você com base no tipo de operação selecionada. O
exemplo a seguir mostra a caixa de diálogo após a seleção de Inserir:
4 Preencha a instrução SQL.

Para obter mais informações sobre como criar instruções SQL para modificar bancos de dados,
consulte um manual Transact-SQL.
5 Use a área Variáveis para definir qualquer variável de SQL.
O exemplo a seguir exibe uma instrução Inserir que contém três variáveis SQL. Os valores
destas variáveis são fornecidos por parâmetros da URL repassados à página, conforme definidos
na coluna Valor-em tempo de execução da área Variáveis.
Após fechar a caixa de diálogo, o Dreamweaver insere o código ASP em sua página de modo
que, ao ser executado no servidor, cria um comando que insere, atualiza ou exclui registros no
banco de dados.
Por padrão, o código define a propriedade Preparado do objeto de comando para true, que faz
o servidor de aplicativos reutilizar uma única versão compilada do objeto sempre que o
comando for executado. Para alterar esta configuração, alterne para o modo de visualização de
código e modifique a propriedade Preparado para false.
Seguindo o exemplo anterior, você provavelmente criaria uma página com um formulário
HTML, de modo que os usuários pudessem digitar dados de registro. O formulário HTML
conteria três campos de texto (txtFirstName, txtLastName e txtDept) e um botão de envio. Da
mesma forma, o formulário utilizaria o método GET e enviaria os valores do campo de texto à
página que contém seu comando.

Como utilizar as instruções preparadas JSP para modificar um
banco de dados
O Dreamweaver pode ser utilizado para criar instruções preparadas JSP para inserir, atualizar ou
excluir registros em um banco de dados. A instrução preparada pode ser fornecida com o SQL que
executa a operação no banco de dados.
Como compreender as instruções JSP preparadas

Uma instrução JSP preparada é um objeto de servidor reutilizável que contém uma instrução SQL.
É possível colocar qualquer instrução SQL válida em uma instrução preparada. Por exemplo: a
instrução preparada pode conter qualquer instrução SQL que retorna um conjunto de registros ou
outra que insere, atualiza ou exclui registros de um banco de dados.
Uma instrução preparada é reutilizável, ou seja, o servidor de aplicativos utiliza uma única
instância do objeto de instrução preparado para consultar o banco de dados diversas vezes. Ao
contrário do objeto de instrução JSP, não é criada uma nova instância do objeto de instrução
preparado para cada nova consulta no banco de dados. Se a instrução for executada diversas vezes,
uma única instância do objeto pode tornar as operações de banco de dados mais eficientes e
ocupar menos quantidade de memória do servidor.
Um objeto de instrução preparado é criado por um scriptlet Java em uma página JSP. O
Dreamweaver, no entanto, permite criar instruções preparadas sem que seja preciso escrever uma
única linha de código Java.
Se você estiver interessado no código, o scriptlet a seguir criará uma instrução preparada:
String myquery = “SELECT * FROM EMPLOYEES WHERE DEPARTMENT = ?”;
PreparedStatement mystatement = connection.prepareStatement(myquery);
A primeira linha armazena a instrução SQL em uma variável de seqüência de caracteres chamada
myquery, com um ponto de interrogação que serve como alocador de espaço para o valor da
variável SQL. A segunda linha cria um objeto de instrução preparado chamado mystatement.
Em seguida, atribua um valor à variável SQL, do seguinte modo:
mystatement.setString(1, request.getParameter(“myURLparam”));
O método setString atribui o valor à variável e leva dois argumentos. O primeiro argumento
especifica a variável afetada por sua posição (no exemplo, a primeira posição na instrução SQL).
O segundo argumento especifica o valor da variável. Neste exemplo, o valor é fornecido por um
parâmetro URL repassado à página.
Observação: É necessário utilizar métodos diferentes para atribuir valores que não sejam seqüências de caracteres
a variáveis SQL. Por exemplo: para atribuir um valor interior a uma variável, utilize o método
mystatement.setInt().
Por último, gere o conjunto de registros do seguinte modo:

ResultSet myresults = mystatement.execute();
O restante desta seção descreve como criar instruções preparadas JSP utilizando ferramentas de
desenvolvimento rápido de aplicativos (RAD) no Dreamweaver. Estas ferramentas permitem criar
instruções preparadas sem que seja preciso escrever uma única linha de código JSP.
688 Capítulo 41
Como criar uma instrução preparada para editar um registro de banco de
dados
A instrução preparada JSP pode ser utilizada para criar instruções para inserir, atualizar ou excluir
registros em um banco de dados.
Para criar a instrução preparada:
1 No Dreamweaver, abra a página JSP que irá executar o comando.

botão com o sinal de adição (+) e selecione Preparado (Inserir, Atualizar, Excluir).
A caixa e diálogo Preparado (Inserir, Atualizar, Excluir) é exibida:

4 Clique em OK.
Após fechar a caixa de diálogo, o Dreamweaver insere o código JSP em sua página de modo que,
ao ser executado no servidor, cria uma instrução preparada que insere, atualiza ou exclui registros
no banco de dados.

690 Capítulo 41
CAPÍTULO 42
Como criar páginas que restringem o acesso
ao site
O Dreamweaver MX da Macromedia pode ser utilizado para criar os tipos de páginas a seguir que
restringem o acesso a um site:
• Páginas que requerem o registro dos usuários ao visitarem o site pela primeira vez (veja “Como
criar uma página de registro”, na página 692)
• Páginas que permitem aos usuários registrados conectar-se ao site (veja “Como criar uma
página de acesso (login)”, na página 696)
• Páginas que podem ser visualizadas apenas por usuários autorizados (veja “Como criar uma
página que apenas os usuários autorizados podem acessar”, na página 699)
Observação: O Dreamweaver não possui comportamentos de servidor de autenticação para páginas ASP.NET ou
PHP.
691
Como criar uma página de registro
O aplicativo da Web pode conter uma página que solicita o registro dos usuários na primeira vez que
eles visitam o site.
PHP.
A página a seguir, por exemplo: solicita o registro dos usuários que visitam o site pela primeira vez
Uma página de registro é composta dos seguintes blocos de criação:

• Uma tabela de banco de dados para armazenar as informações de acesso dos usuários (login).
• Um formulário HTML que permite aos usuários escolher um nome de usuário e uma senha.
O formulário também pode ser utilizado para obter informações pessoais dos usuários.
• Um comportamento de servidor Inserir registro para atualizar a tabela de banco de dados dos
usuários de site.
• Um comportamento de servidor Verificar o novo nome de usuário para garantir que o nome
digitado pelo usuário não seja utilizado por outra pessoa.
Observação: É possível excluir ou alterar as propriedades de qualquer comportamento de servidor adicionado a
uma página (veja “Como editar um comportamento de servidor”, na página 618).
692 Capítulo 42
Como armazenar as informações de acesso dos usuários (login)
Uma página de registro requer uma tabela de banco de dados para armazenar as informações de
login inseridas pelos usuários. Certifique-se de que a tabela de banco de dados contenha uma
coluna de nome de usuário e de senha. Para que os usuários que efetuaram-login tenham
diferentes privilégios de acesso, inclua uma coluna de privilégio de acesso (veja “Como armazenar
os privilégios de acesso no banco de dados de usuários”, na página 701).
Se desejar definir uma senha comum para todos os usuários do site, configure o seu aplicativo de
banco de dados (Microsoft Access, Microsoft SQL Server, Oracle, etc.) para inserir a senha em
cada novo registro de usuário, como padrão. Na maioria dos aplicativos de banco de dados, é
possível definir um valor padrão para uma coluna sempre que um novo registro for criado. Defina
o valor padrão da senha.
A tabela de banco de dados também pode ser utilizada para armazenar outras informações úteis
sobre o usuário.
Como permitir que os usuários escolham um nome e uma senha

O formulário HTML é adicionado à página de registro para permitir que os usuários escolham
um nome de usuário e uma senha (se for aplicável).
Para permitir que os usuários escolham um nome de usuário e uma senha:
1 Crie uma nova página (Arquivo > Novo) e defina o layout da página de registro utilizando as
ferramentas de desenvolvimento de projetos do Dreamweaver.
Não é necessário especificar um atributo action ou method para o formulário de modo a instrui-lo
para onde e como enviar os dados do registro quando o usuário clicar no botão Enviar. O
comportamento de servidor Inserir registro define esses atributos para o usuário (consulte
“Como atualizar a tabela de usuários no banco de dados”, na página 694).
4 Adicione campos de texto (Inserir > Objetos de formulário > Campo de texto) para permitir que o
usuário digite um nome de usuário e uma senha.
O formulário pode conter também outros objetos de formulário para registrar outros dados
pessoais.
Devem ser incluídos identificadores (em forma de texto ou de imagens) ao lado de cada objeto
de formulário para informar aos usuários o que são. Os objetos de formulário também devem
ser alinhados, colocando-os em uma tabela HTML. Para obter mais informações sobre objetos
de formulário, veja “Criação de formulários interativos”, na página 621.
Como criar páginas que restringem o acesso ao site 693

Este é um exemplo de inspetor de propriedades de um botão identificado por “Registre-se”:
A etapa seguinte é a inclusão de um comportamento de servidor Inserir registro para adicionar

registros em uma tabela de usuários no banco de dados.
Como atualizar a tabela de usuários no banco de dados

Adicione um comportamento de servidor Inserir registro para atualizar a tabela de usuários
no banco de dados.
Para atualizar a tabela de usuários no banco de dados:

botão com sinal de adição (+) e escolha Inserir registro, no menu pop-up.
A caixa de diálogo Inserir registro é exibida.
2 Utilize os menus pop-up Conexão e Inserir na tabela para especificar a tabela de usuários
no banco de dados.
3 Na caixa Após a inserção, ir para, digite a página a ser aberta depois que o registro tiver sido
inserido na tabela.
4 No menu pop-up Obter os valores de, escolha o formulário HTML utilizado para obter o
nome de usuário e a senha do usuário.
O Dreamweaver selecionará automaticamente o primeiro formulário na página.
5 Especifique o que cada objeto no formulário atualizará na tabela de banco de dados,
selecionando um objeto de formulário na lista Elementos de formulário e escolhendo uma
coluna da tabela, no menu pop-up Coluna, e um tipo de dado, no menu pop-up Enviar como.
Tipo de dados significa os dados que a coluna espera receber na tabela de banco de dados
(texto, números, valores booleanos para caixas de seleção). As colunas de senha ou de nome de
usuário normalmente esperam receber texto.
Por exemplo: na lista Elementos de formulário, clique no campo de texto da senha, escolha a
coluna na tabela de banco de dados onde a senha deverá ser armazena e, em seguida, escolha o
tipo de dado Texto.
Repita o procedimento para cada objeto de formulário na lista Elementos de formulário.
6 Clique em OK.
A etapa final é assegurar que o nome de usuário não seja utilizado por outro usuário registrado.
694 Capítulo 42
Como assegurar-se de que o nome de usuário escolhido é exclusivo
O comportamento de servidor é adicionado para garantir que o nome de usuário inserido não será
utilizado por outro usuário registrado.
Quando o usuário clica no botão Enviar na página de registro, o comportamento de servidor
compara o nome de usuário digitado com os nomes de usuário armazenados em um banco de
dados. Se não for encontrado nenhum nome de usuário correspondente na tabela de banco de
dados, o comportamento de servidor continuará normalmente a operação de inserção do registro.
Se for encontrado um nome de usuário coincidente, o comportamento de servidor cancelará a
operação de inserção do registro e abrirá uma nova página (em geral, uma página para alertar a
pessoa que o nome de usuário já foi utilizado).
Para assegurar que o nome de usuário escolhido seja exclusivo:

botão com sinal de adição (+) e escolha Autenticação de usuário > Verificar o novo nome de
usuário no menu pop-up.
A caixa de diálogo Verificar o novo nome de usuário é exibida.

3 Clique em OK.
O Dreamweaver adiciona um comportamento de servidor à página de registro, que verifica se o
nome de usuário submetido por um visitante é exclusivo antes de adicionar as informações
daquele visitante ao banco de dados de usuários registrados.

Como criar uma página de acesso (login)
O aplicativo da Web pode conter uma página que permite aos usuários registrados efetuar login
no site.
PHP.
A seguinte página, por exemplo: solicita aos usuários registrados que efetuem login:
Uma página de login é composta dos seguintes blocos de criação:

• Uma tabela de banco de dados de usuários registrados
• Um formulário HTML que permite aos usuários digitar um nome de usuário e uma senha
• Um comportamento de servidor Efetuar login de usuário, para validar o nome de usuário e a
senha digitados
Uma variável de sessão, que consiste no nome de usuário seja criada para o usuário quando ele efetuar
login com sucesso.
Observação: É possível excluir ou alterar as propriedades de qualquer comportamento de servidor adicionado a
uma página (veja “Como editar um comportamento de servidor”, na página 618).
Como criar uma tabela de banco de dados de usuários registrados

É necessário uma tabela de banco de dados de usuários registrados para verificar se o nome de
usuário e a senha digitados na página de login são válidos. Utilize o aplicativo de banco de dados e
uma página de registro para criar a tabela. Para obter mais informações, veja “Como criar uma
página de registro”, na página 692.
696 Capítulo 42
Como permitir que os usuários efetuem login
Um formulário HTML é adicionado à página para permitir que os usuários efetuem login
digitando um nome de usuário e uma senha.
Para permitir que os usuários efetuem login:
1 Crie uma nova página (Arquivo > Novo) e defina o layout da página de login utilizando as
ferramentas de desenvolvimento de projetos do Dreamweaver.
(Janela ) e digite um nome na caixa Nome do formulário.
Não é necessário especificar um atributo action ou method para o formulário de modo a instrui-lo
para onde e como enviar os dados do registro quando o usuário clicar no botão Enviar. O
comportamento de servidor Efetuar login de usuário define esses atributos para você (consulte
“Como verificar o nome de usuário e a senha”, na página 698).
4 Adicione um campo de texto de nome de usuário e de senha (Inserir > Objetos de formulário >
Campo de texto) ao formulário.
Adicione identificadores (como texto ou imagens) ao lado de cada campo de texto e alinhe os
campos colocando-os em uma tabela HTML, e defina 0 para o atributo border da tabela.
Este é um exemplo de inspetor de propriedades de um botão identificado por “Login”:
A próxima etapa é adicionar o comportamento de servidor Efetuar login de usuário para assegurar
que o nome de usuário e a senha digitados sejam válidos.

Como verificar o nome de usuário e a senha
Um comportamento de servidor Efetuar login de usuário é adicionado para assegurar que o nome de
usuário e a senha digitados sejam válidos.
Quando um usuário clica no botão Enviar, na página de login, o comportamento de servidor
Efetuar login de usuário compara os valores digitados pelo usuário àqueles dos usuários
registrados. Se os valores forem coincidentes, o comportamento de servidor abrirá uma página
(normalmente, a página inicial do site). Se os valores não corresponderem, o comportamento de
servidor abrirá outra página (em geral, uma página alertando o usuário de a tentativa de login
falhou).
Para verificar o nome de usuário e a senha:

botão com sinal de adição (+) e escolha Autenticação de usuário > Efetuar login de usuário no
menu pop-up.
A caixa de diálogo Efetuar login de usuário é exibida.

3 Clique em OK.
O Dreamweaver adiciona um comportamento de servidor à página de login que verifica se o
nome de usuário e a senha digitada pelo visitante são válidos.
698 Capítulo 42
Como criar uma página que apenas os usuários autorizados
podem acessar
O aplicativo da Web pode conter uma página protegida, na qual apenas os usuários autorizados
podem ter acesso.
PHP.
Por exemplo: se um usuário tentar ignorar a página de login, digitando a URL da página
protegida em um navegador, ele será redirecionado para outra página. Da mesma forma, se for
definido o nível de autorização Administrador para uma página, somente os usuários com este
privilégio de acesso poderão visualizá-la. Se um usuário que efetuou login tentar acessar a página
protegida sem os privilégios de acesso adequados, ele será redirecionado para outra página.
Os níveis de autorização também podem ser utilizados para rever os usuários recém-registrados
antes de lhes conceder acesso total ao site. Por exemplo: pode ser conveniente receber o
pagamento antes de permitir um acesso de usuário às páginas componentes do site. Para isso,
proteja as páginas com um nível de autorização “membro” e conceda aos usuários recém-
registrados apenas os privilégios de visitante (guest). Após receber o pagamento do usuário, é
possível atualizar os seus privilégios de acesso para membro (na tabela de banco de dados de
usuários registrados).
Se não forem utilizados os níveis de autorização, qualquer página poderá ser protegida no site
através da inclusão de um comportamento de servidor Restringir o acesso à página. O
comportamento de servidor redirecionará para outra página qualquer usuário que não tenha
efetuado login com sucesso.
Se não forem utilizados os níveis de autorização, qualquer página poderá ser protegida no site
utilizando os seguintes blocos de criação:
• Uma coluna extra na tabela de banco de dados para armazenar os privilégios de cada usuário
• Um comportamento de servidor Restringir o acesso à página para redirecionar os usuários não-
autorizados para outra página
Nesse caso, o comportamento de servidor redirecionará à outra página qualquer usuário que não
tenha os privilégios de acesso necessários.
Em qualquer caso, é possível adicionar um link à página protegida, que permite ao usuário efetuar
logout e limpar qualquer variável de sessão. Para obter mais informações, veja “Como efetuar
logout de usuários”, na página 701.

Como redirecionar os usuários não-autorizados para outra página
Para evitar que os usuários não-autorizados acessem uma página, adicione um comportamento de
servidor Restringir o acesso à página. O comportamento de servidor redirecionará o usuário à
outra página se ele tentar ignorar a página de login, digitando a URL de uma página protegida em
um navegador ou se o usuário tiver efetuado login mas tentar acessar a página protegida sem os
privilégios de acesso adequados.
Observação: O comportamento de servidor Restringir o acesso à página pode proteger apenas as páginas HTML.
Este comportamento não protege outros recursos do site (arquivos de imagem e de áudio, por exemplo).
Se desejar definir os mesmos privilégios de acesso a muitas páginas, copie e cole os direitos de
acesso de uma página para outra.
Para redirecionar os usuários não-autorizados para outra página:
1 Abra a página a ser protegida.

botão com sinal de adição (+) e escolha Autenticação de usuário > Restringir o acesso à página
no menu pop-up.
A caixa de diálogo Restringir o acesso à página é exibida.

4 Clique em OK.
O Dreamweaver adiciona um comportamento de servidor à página que permite apenas aos usuários
autorizados visualizar a página.
Para copiar e colar os direitos de acesso da página em outra página no site:
1 Abra a página protegida e selecione o comportamento de servidor Restringir o acesso à página

listado no painel Comportamento de servidor (e não aquele no menu pop-up com sinal de
adição(+)).
2 Clique no botão de seta, no canto superior direito do painel, e escolha Copiar no menu
pop-up.
O comportamento de servidor Restringir o acesso à página será copiado na área de
transferência do sistema.
700 Capítulo 42
3 Abra outra página a ser protegida utilizando o mesmo procedimento.
botão de seta, no canto superior direito, e escolha Colar no menu pop-up.
5 Repita as etapas 3 e 4 para cada página a ser protegida.
Como armazenar os privilégios de acesso no banco de dados de usuários

Este bloco de criação é requerido apenas quando determinados usuários que efetuaram login
necessitarem de privilégios de acesso diferentes. Se os usuários tiverem que efetuar apenas login,
não será preciso armazenar os privilégios de acesso.
Para que determinados usuários tenham diferentes privilégios de acesso, verifique se as tabelas de
usuários no banco de dados contêm uma coluna que especifica os privilégios de acesso de cada
usuário (guest, usuário, administrador etc.). Os privilégios de acesso de cada usuário devem ser
inseridos no banco de dados pelo administrador do site.
Na maioria dos aplicativos de banco de dados, é possível definir um valor padrão para uma coluna
sempre que um novo registro for criado. Defina o valor padrão para o privilégio de acesso mais
comum no site (por exemplo: visitante) e, em seguida, altere manualmente as exceções (por
exemplo: passe de visitante para administrador). O usuário poderá agora acessar todas as páginas
do administrador.
Verifique se cada usuário no banco de dados tem um privilégio de acesso exclusivo (guest ou
administrador, por exemplo) e não diversos privilégios (como “usuário, administrador”). Se
desejar definir vários privilégios de acesso às suas páginas (por exemplo: todos os visitantes e
administradores podem visualizar esta página), defina-os para cada página, mas não para nível de
o banco de dados. Para obter mais informações, veja “Como redirecionar os usuários não-
autorizados para outra página”, na página 700.
Como efetuar logout de usuários

Quando um usuário efetua login com sucesso, é criada uma variável de sessão que consiste no
nome de usuário. Quando o usuário sair do site, é possível remover a variável de sessão e
redirecionar o usuário à outra página (normalmente, uma página com mensagem “até logo” ou
“obrigado”) utilizando o comportamento de servidor Efetuar logout de usuário.
O comportamento de servidor Efetuar logout de usuário pode ser chamado quando o usuário
clicar em um link ou quando uma página específica for carregada.
Para adicionar um link que permite aos usuários efetuar logout:
1 Na página, selecione um texto ou uma imagem para servir de link.

2 No painel Comportamentos de servidor, clique no botão com sinal de adição (+) e escolha
Autenticação de usuário > Efetuar logout de usuário.
A caixa de diálogo Efetuar logout de usuário é exibida.
3 Especifique uma página a ser aberta quando o usuário clicar no link.
Normalmente, é uma página de despedida ou de agradecimento.
4 Clique em OK.

Para efetuar logout de um usuário quando uma página específica for carregada:
1 Abra a página que será carregada no Dreamweaver.

Normalmente, é uma página de despedida ou de agradecimento.
2 No painel Comportamentos de servidor, clique no botão com sinal de adição (+) e escolha
Autenticação de usuário > Efetuar logout de usuário.
A caixa de diálogo Efetuar logout de usuário é exibida.
3 Selecione a opção “Efetuar logout quando a página for carregada”.
4 Clique em OK.
702 Capítulo 42
Parte X
Parte X
Apêndices
Os apêndices fornecem mais ajuda para desenvolver seus

aplicativos para a Web.
• Anexo A, “Guia do iniciante em bancos de dados”
• Anexo B, “Manual básico de SQL”
• Anexo C, “Como configurar DSNs no Windows”
• Anexo D, “Referência rápida: Tags do Macromedia
ASP.NET”
ANEXO A
Guia do iniciante em bancos de dados
Este apêndice destina-se aos usuários do Dreamweaver MX da Macromedia que têm pouca ou
nenhuma experiência com bancos de dados ou conexões de bancos de dados. São explicados os
conceitos gerais, mas não os procedimentos específicos. Para saber como esses conceitos são
aplicados na prática, consulte o restante do guia do usuário.
O apêndice descreve como projetar um banco de dados, mas não como criá-lo utilizando um
aplicativo como o Microsoft Access ou SQL Server. Esse procedimento é descrito na
documentação on-line ou impressa que acompanha o sistema de banco de dados.
O apêndice contém as seguintes seções:
• “Os bancos de dados”, na página 705
• “Conceitos básicos do projeto de um banco de dados”, na página 706
• “Como compreender as conexões de bancos de dados”, na página 712
Os bancos de dados
O ponto de partida para a criação de um banco de dados é o registro. Um registro é uma coleção
de dados relacionados tratada como uma entidade única. Por exemplo: a ficha de um jogador de
futebol pode ser chamada de um registro: ela contém o nome, fotografia, time e estatísticas de um
jogador. Empregando a terminologia de banco de dados, cada um desses itens relacionados seria
chamado de campo: cada “registro” de ficha de jogador contém um campo de nome, um campo
de fotografia, um campo de time e vários campos de estatísticas.
Uma coleção de registros que compartilham os mesmos campos é chamada de tabela, porque esses
tipos de informações podem ser facilmente apresentados no formato de tabela: cada coluna
representa um campo e cada linha representa um registro. Na verdade, a palavra coluna é
sinônima de campo e linha é sinônima de registro.
Campos (colunas)
Número Sobrenome Nome Posição Objetivos
Registros
(linhas)
Um banco de dados pode conter mais de uma tabela, cada uma delas com um nome exclusivo.
Essas tabelas podem ser relacionadas ou independentes.
705
Um conjunto de registros é um subconjunto de registros extraídos de uma ou mais tabelas de um
banco de dados (ou um conjunto de dados no ASP.NET). Um conjunto de registros é também
uma tabela, por ser uma coleção de registros que compartilham as mesmas colunas. Por exemplo:
uma lista de escalação, que relaciona os nomes e as posições dos jogadores poderia ser chamada de
conjunto de registros: ela consiste em um subconjunto de todas as informações possíveis sobre os
jogadores, incluindo número de gols, assistências, penalidades, etc.
Número Sobrenome Nome Posição Objetivos
Tabela do banco de dados
Sobrenome Nome Posição
Tabela do conjunto de registros
Para criar um conjunto de registros, é necessário fazer uma consulta ao banco de dados. Um
consulta consiste em um critério de pesquisa. Por exemplo: a consulta pode especificar que apenas
algumas colunas serão inseridas no conjunto de registros ou que somente alguns registros serão
incluídos. Para obter mais informações, veja “Definição de um conjunto de registros”, na
página 544.
Conceitos básicos do projeto de um banco de dados

O projeto do banco de dados é a primeira etapa da criação de qualquer site da Web com base em
banco de dados. Esta seção apresenta um estudo de caso para explicar os princípios básicos do
projeto de um banco de dados. O estudo de caso envolve um aplicativo para a Web encomendado
por uma empresa fictícia chamada Serviços Aéreos Seta, empresa que administra uma pequena
frota de jatos comerciais.
• “Análise das regras e políticas comerciais da Serviços Aéreos Seta”, na página 707
• “Análise das características da solicitação da Serviços Aéreos Seta”, na página 707
• “Quais consultas os usuários farão ao banco de dados?”, na página 708
• “Escolha das tabelas do banco de dados”, na página 708
• “Escolha das colunas em cada tabela”, na página 709
• “Definição das relações entre as tabelas”, na página 710
• “Criação do banco de dados”, na página 712
706 Anexo A
Análise das regras e políticas comerciais da Serviços Aéreos Seta
Você foi contratado temporariamente para criar um aplicativo para a Web encomendado pela
Serviços Aéreos Seta. Antes de iniciar o projeto do banco de dados, é necessário certificar-se de ter
compreendido todas as regras e políticas comercias da empresa relacionadas ao aplicativo. Esta
seção descreve as regras e políticas comerciais (simplificadas) da Serviços Aéreos Seta.
A Seta administra uma frota de cinco jatos comerciais de vários tamanhos e modelos para seus
proprietários. Cada jato possui até oito arrendatários, ou seja, empresas ou pessoas físicas que
adquiriram parte das ações das aeronaves (“charter”). Esse tipo de acordo é comum entre pessoas
ou empresas que não necessitam de um jato comercial durante um ano inteiro.
Esses proprietários, ou “acionistas”, pagam a Serviços Aéreos Seta as seguintes taxas:
• Uma taxa mensal de administração, proporcional à parte de cada proprietário da aeronave, para
cobrir os custos de pagamento do piloto, seguro e hangar
• Uma taxa de ocupação por hora que abrange todos os custos diretos, como manutenção,
sobressalentes para o motor e refeições.
Por sua vez, um acionista notifica a Serviços Aéreos Seta quando e para onde irá viajar e a empresa
tomará as providências necessárias, incluindo a obtenção de equipes de terra e ar, além do
fornecimento de refeições durante o vôo. A empresa pede que seja notifica com oito horas de
antecedência a fim de poder preparar a aeronave para um vôo.
A Serviços Aéreos Seta garante “800 horas de ocupação” por ano para cada aeronave. As horas de
ocupação são aquelas em que o jato está transportando um passageiro, pelo menos. As horas de
ocupação têm início seis minutos (0,1 de uma hora) antes da decolagem da aeronave com os
passageiros e termina seis minutos após a aterrissagem da aeronave.
Cada avião pode pertencer a oito proprietários, no máximo. Por exemplo: uma pessoa física ou
corporação pode adquirir uma participação em sociedade de 1/5 (ou uma ação correspondente a
um quinto) de um jato. Uma vez que a Serviços Aéreos Seta garante 800 horas de vôo com
passageiros por ano, o proprietário da ação correspondente a 1/5 do avião tem direito a 160 horas
de ocupação (800 horas/5 = 160).
Análise das características da solicitação da Serviços Aéreos Seta

A Serviços Aéreos Seta o contratou para criar um aplicativo para a Web com as seguintes
características:
• Permitir que qualquer acionista da aeronave solicite um jato para um vôo
• Fornecer ao Departamento de Operações de Vôo (operadores de vôo) todas as informações
necessárias para iniciar a preparação da aeronave, incluindo os detalhes da solicitação do
arrendatário (itinerário, data e hora da partida, refeições necessárias, etc.), horas de ocupação
restantes do arrendatário e a disponibilidade do avião para a viagem proposta
• Permitir aos operadores de vôo reservar a aeronave para evitar conflitos de agendamento
Guia do iniciante em bancos de dados 707

Quais consultas os usuários farão ao banco de dados?
Após familiarizar-se com as características propostas para o aplicativo para a Web, reúna os
usuários do banco de dados e faça a seguinte pergunta: “Quais consultas vocês farão ao banco de
dados?
Você ficará sabendo que alguns dos arrendatários das aeronaves desejam fazer as
seguintes consultas ao banco de dados:
• De quantas horas de ocupação ainda disponho?
• O meu jato está disponível nesta(s) data(s)?
Depois que um arrendatário solicitar um avião, os funcionários de operações de vôo farão as
seguintes consultas ao banco de dados:
• Onde o arrendatário deseja ir?
• Qual é o itinerário: somente de ida, ida e volta, várias cidades? Os operadores de vôo
necessitam dessas informações para iniciar o planejamento do vôo (verificar as previsões
meteorológicas, apresentar os planos de vôo, etc.) e estimar as horas de ocupação.
• O arrendatário dispõe de horas de ocupação suficientes para o itinerário proposto?
• Quando o arrendatário deseja partir?
• Qual é o jato do arrendatário?
• O jato está disponível para o itinerário proposto?
• Quantos passageiros acompanharão os arrendatários?
• Qual é a quantidade de bagagem dos passageiros: leve (bagagem de mão), normal (uma mala
por passageiro) ou pesada (mais de uma mala)?
• Quais são as refeições necessárias aos arrendatários?
• Qual é a taxa de ocupação por hora do jato?
• Onde posso contatar o arrendatário para confirmar o vôo e a taxa estimada?
Escolha das tabelas do banco de dados
Após conhecer as consultas que os usuários farão ao banco de dados, imagine a estrutura do banco
de dados de modo a responder da melhor forma possível a essas perguntas. A primeira etapa é
escolher as tabelas do banco de dados.
Em um banco de dados relacional, todos os dados são representados em tabelas compostas por
linhas e colunas. Cada tabela descreve uma coleção de entidades relacionadas, como pessoas,
objetos ou eventos. Cada linha descreve uma ocorrência da entidade e cada coluna descreve uma
propriedade da entidade, por exemplo: o sobrenome de uma pessoa, cor de um objeto, data de um
evento etc.
708 Anexo A
Escolha as cinco tabelas abaixo para o banco de dados da Serviços Aéreos Seta:
• Uma tabela de aeronaves, que descreve todos os jatos comerciais administrados pela Serviços
Aéreos Seta
• Uma tabela de reserva das aeronaves, que enumera todas as datas em que os jatos estarão
reservados ou indisponíveis para vôos
• Uma tabela de arrendatários, que descreve todas as corporações e pessoas físicas que possuem
ações dos jatos
• Uma tabela de itinerários, que descreve todos os itinerários solicitados pelos arrendatários
• Uma tabela de vôos, que descreve todas etapas (“vôos”) dos itinerários.
Escolha das colunas em cada tabela
A próxima etapa é escolher as colunas em cada tabela. As colunas descrevem as propriedades de
cada entidade da tabela.
Uma boa regra prática a ser utilizada durante a escolha das colunas é evitar a duplicação de dados.
Por exemplo: no caso do aplicativo da Serviços Aéreos Seta, você sabe que os nomes dos acionistas
deverão estar associados às datas dos itinerários para responder à seguinte pergunta dos operadores
de vôo: “Quais são refeições necessárias a um arrendatário em um determinado itinerário?”
Um método é colocar as colunas correspondentes ao nome e ao sobrenome dos acionistas tanto na
tabela de arrendatários quanto na tabela de itinerários. Contudo, essa estratégia obrigaria não só a
uma duplicação dos dados relativos a nomes em duas tabelas, mas também de várias ocorrências
nas tabelas de itinerários (seria necessário que digitar o nome do acionista na tabela de itinerários
sempre que um arrendatário solicitasse um novo itinerário). Este método aumenta o trabalho
gasto com a entrada de dados, induz a erros e ameaça a integridade dos dados (uma alteração feita
em uma parte do banco de dados deverá ser repetida em outras partes).
Outra solução seria digitar o nome e sobrenome dos arrendatários uma única vez somente na
tabela de acionistas. Quando se apresentar o momento de responder à pergunta acima dos
operadores de vôo, as tabelas de arrendatários e de itinerários poderão ser unidas por meio de uma
expressão SQL.
Certifique-se de que as suas tabelas contêm uma coluna de chave primária. Uma coluna de chave
primária contém valores únicos para cada linha. Este procedimento permite detectar a linha exata
ao pesquisar no banco de dados. A maioria das colunas de chaves primárias consiste de números
de identificação, mas é possível utilizar chaves primárias originais, como números de formulários
do governo ou números de série de aeronaves.

Após algumas considerações, escolha as seguintes propriedades e chaves primárias para as tabelas
do banco de dados da Serviços Aéreos Seta:
Definição das relações entre as tabelas

Após definir as colunas básicas e as chaves primárias das tabelas, comece a definir as relações entre as
tabelas. Ao terminar de definir as relações, você poderá escrever as instruções SQL no Dreamweaver
MX para combinar os dados de duas tabelas (veja “Como unir as tabelas”, na página 725).
Por exemplo: cada aeronave administrado pela Serviços Aéreos Seta é propriedade de vários
arrendatários. É possível estabelecer uma relação individual para o coletivo (“one-to-many”)
semelhante entre cada aeronave na tabela de aeronaves e os arrendatários na tabela de
arrendatários. Esse procedimento economizaria o tempo gasto em digitação e no controle de
dados de aeronaves redundantes na tabela de arrendatários.
Em uma relação de banco de dados individual para o coletivo, uma única linha de uma tabela está
relacionada a várias linhas em outra tabela. Pode-se definir esse tipo de relação incluindo uma chave
estrangeira na tabela que fornece as diversas linhas, no exemplo acima, a tabela de arrendatários. A
chave estrangeira é uma coluna que contém valores correspondentes aos da coluna de chaves
primárias de outra tabela. A chave primária da tabela de aeronaves é chamada ac_serial. A inclusão
de uma chave estrangeira chamada ac_serial na tabela de acionistas, portanto, definiria a relação
“uma aeronave para muitos arrendatários”.
710 Anexo A
Conhecendo as características da solicitação do cliente, bem como as regras e políticas comercias
da empresa, é mais conveniente definir as seguintes relações um para muitos no banco de dados:
• A cada aeronave podem ser atribuídos muitos arrendatários
• A cada aeronave podem ser atribuídas muitas reservas
• A cada aeronave podem ser atribuídos muitos itinerários
• A cada arrendatário podem ser atribuídos muitos itinerários
• A cada itinerário podem ser atribuídos muitos vôos (ou etapas)
Estes são os diagramas revisados das tabelas, depois da inclusão das chaves estrangeiras que
definem essas relações:
Eles são conhecidos como diagramas R-E, ou seja, diagramas de relações entre entidades.

Criação do banco de dados
A etapa final do projeto é a criação do banco de dados utilizando um sistema de banco de dados,
como Microsoft Access, SQL Server, Oracle9i ou MySQL. Para obter mais informações, consulte a
documentação do sistema de banco de dados.
Como compreender as conexões de bancos de dados

Se for utilizado um banco de dados com o aplicativo para a Web, será necessário criar pelo menos
uma conexão de banco de dados. Sem esta conexão, o aplicativo não saberá onde localizar o banco
de dados ou como conectar-se a ele. A conexão de banco de dados pode ser criada no
Dreamweaver fornecendo as informações (ou “parâmetros”) dos quais o aplicativo necessita para
contatar o banco de dados.
Observação: Não é necessário criar conexões de banco de dados para as páginas ColdFusion no Dreamweaver
MX. A conexão é estabelecida utilizando as fontes de dados ColdFusion definidas no ColdFusion Administrator.
Esta seção discute as conexões de banco de dados em termos gerais. Para obter informações
específicas sobre a criação de conexões no Dreamweaver MX, veja “Como efetuar a conexão com
um banco de dados”, na página 146.
Como estabelecer a interface com o banco de dados

Os dados armazenados em um banco de dados estão normalmente em formato proprietário, do
mesmo modo que o texto em um arquivo de processador-de texto. Este é um exemplo de
aparência dos dados no Microsoft Access:
712 Anexo A
Esta é a aparência do mesmo banco de dados no bloco de notas:
O aplicativo para a Web tem o mesmo problema que o bloco de notas ou qualquer outro
aplicativo ao tentar acessar os dados em um formato desconhecido: o aplicativo não pode decifrar
os dados. É necessário uma interface de software entre o aplicativo para a Web e o banco de dados
para permitir que eles se comuniquem.
Três interfaces comuns permitem que os aplicativos estabeleçam comunicação com os bancos de
dados. A primeira chama-se conectividade aberta de banco de dados, Open Database
Connectivity (ODBC), a segunda é chamada de OLE DB (banco de dados de vinculação e
incorporação de objetos) e a terceira é a Java Database Connectivity, ou JDBC.
A função dessas interfaces é atuar como intérpretes. Por exemplo: quando um discurso é feito em
inglês nas Nações Unidas, um intérprete o traduz para os delegados que falam francês e outro
intérprete o faz para os participantes que falam alemão. Da mesma forma, deve-se utilizar a
interface OLE DB para os aplicativos que compreendem esta linguagem, outra interface, ODBC,
para os aplicativos da Web que a compreendem e outra, JDBC, para estabelecer a interface entre
os aplicativos que a compreendem. Os aplicativos ColdFusion MX e JSP compreendem a
linguagem JDBC, os aplicativos ASP e ASP.NET entendem a OLE DB, e os aplicativos
ColdFusion 4 ou 5 compreendem as linguagens ODBC e OLE DB.
Os aplicativos ASP (mas não os aplicativos ASP.NET) também podem compreender a linguagem
ODBC graças ao conversor OLE DB/ODBC incorporado. Por exemplo: suponha que seu
aplicativo precisa se comunicar com um banco de dados do Microsoft Access utilizando uma
interface ODBC. No ASP, se for especificada apenas a interface ODBC, mas nenhuma OLE DB,
o aplicativo utilizará como padrão um conversor OLE DB/ODBC para traduzir OLE DB em
ODBC e, em seguida, será utilizado o conversor ODBC/Access especificado para converter
ODBC em algo que o Access possa compreender.

A ilustração abaixo dá uma idéia do processo:
Aplicativo ASP para a Web
Interface OLE-DB para ODBC
Interface ODBC Interface ODBC Interface ODBC
Acesso SQL DB2

Server
Observação: SQL Server e DB2, da Microsoft e IBM respectivamente, são sistemas de banco de dados com base
em servidor.
Como utilizar os drivers de bancos de dados para estabelecer a interface com

um banco de dados
As interfaces ODBC, OLE DB e JDBC são implementadas pelos drivers de bancos de dados (ou
“provedores de dados” no OLE DB), que são apenas partes de um software. Quando o aplicativo
para a Web se comunica com o banco de dados, isto é feito por intermédio de um driver.
Os drivers de bancos de dados são específicos ao banco de dados. Por exemplo: podem ser
utilizados os drivers do Microsoft Access, SQL Server e dBase. Da mesma forma, é possível usar os
provedores OLE, como o OLE DB para o SQL Server. A escolha depende do banco de dados que
está sendo utilizado.
Os drivers são produzidos pelos fabricantes de bancos de dados, como a Microsoft e Oracle, e por
vários outros-fabricantes de software. A Microsoft oferece vários drivers ODBC e provedores OLE
DB para os pacotes mais conhecidos de bancos de dados, como o Microsoft Access, Microsoft
SQL Server e Oracle. Os drivers ODBC, que podem ser executados apenas na plataforma
Windows, são automaticamente instalados com o Microsoft Office e com o Windows 2000. Esses
drivers também são fornecidos com o pacote Microsoft Data Access Components (MDAC) 2.5,
2.6 e 2.7, cujo download pode ser efetuado gratuitamente do site da Microsoft na Web: http://
www.microsoft.com/data/download.htm. O MDAC 2.6 instala vários provedores OLE DB.
Observação: Primeiro, instale o MDAC 2.5 e, em seguida, o MDAC 2.6.
Para saber quais drivers ODBC estão instalados em um sistema Windows, consulte “Para exibir os
drivers ODBC que estão instalados em um sistema Windows”, na página 715.
Como o Macintosh é raramente utilizado como uma plataforma de banco de dados, há poucos
drivers para esse sistema.
714 Anexo A
Alguns drivers JDBC conhecidos incluem o driver I-net JDBC para os bancos de dados do
Microsoft SQL Server, o driver Oracle Thin para os bancos de dados da Oracle e o JDBC Driver
for DB2 para os bancos de dados DB2 da IBM. Para obter mais informações sobre os drivers
JDBC e seus fabricantes, pesquise o banco de dados de drivers JDBC no site da Sun na Web no
endereço http://industry.java.sun.com/products/jdbc/drivers.
Estas são as interfaces de banco de dados para cada tipo de aplicativo para a Web e alguns dos seus
respectivos drivers comuns de banco de dados:
aplicativo da Web Interface de banco de Drivers comuns

dados
ColdFusion MX JDBC driver Sun JDBC-ODBC

JSP driver I-net Sprinta JDBC para SQL Server
driver Thin JDBC da Oracle
ColdFusion 4 ou 5 ODBC ou OLE DB drivers originais ColdFusion

driver Microsoft Access
driver SQL Server da Microsoft
ASP ODBC ou OLE DB driver Microsoft Access

driver SQL Server da Microsoft
provedor SQL Server da Microsoft
ODBC da Microsoft para Oracle
ASP.NET OLE DB provedor Microsoft Jet

provedor SQL Server da Microsoft
provedor da Microsoft para Oracle
PHP específico ao MySQL driver MySQL
Para exibir os drivers ODBC que estão instalados em um sistema Windows

Se necessitar de um determinado driver ODBC e o servidor da Web for executado em um sistema
Windows, você poderá determinar com facilidade se o driver ODBC está instalado no sistema.
Para exibir os drivers ODBC que estão instalados em um sistema Windows:
1 Abra o ODBC Data Source Administrator da seguinte maneira:

• No Windows 95, 98 ou NT selecione Iniciar > Configurações > Painel de controle e clique
duas vezes no ícone de Fontes dos dados ODBC. Dependendo do sistema, o ícone também
poderá se chamar ODBC ou ODBC de 32 bits.
• No Windows 2000, escolha Iniciar > Configurações > Painel de controle > Ferramentas de
administração > Fontes dos dados.
• No Windows XP, selecione Iniciar > Painel de controle > Desempenho e manutenção >
Ferramentas de administração > Fontes de dados (ODBC).

2 Clique na guia Drivers.
Será exibida uma lista de drivers ODBC instalados no sistema.
Como chamar os drivers de bancos de dados

Um aplicativo deve chamar um driver de banco de dados para estabelecer comunicações em dois
sentidos com um banco de dados. Um aplicativo para a Web chama um driver utilizando
uma seqüência de caracteres de conexão. Esta é composta por todas as informações (ou
parâmetros) necessárias para estabelecer uma conexão com um banco de dados. Em sua forma
mais simples, uma seqüência de caracteres de conexão especifica um driver e um banco de dados,
como neste exemplo:
DBQ=C:\Inetpub\wwwroot\Scaal\scaalcoffee.mdb
As seqüências de caracteres de conexão ASP podem conter um parâmetro Provedor que
especifique um provedor OLE DB. Se este parâmetro for omitido, o ASP utilizará como padrão o
provedor OLE DB para os drivers ODBC. No exemplo acima, o provedor OLE DB se comunica
com o driver ODBC e o driver do Microsoft Access que, por sua vez, estabelece comunicação com
o banco de dados do Access, scaalcoffee.mdb.
Os parâmetros em uma seqüência de caracteres de conexão podem variar dependendo do driver.
Esta é uma seqüência de caracteres de conexão para um banco de dados do SQL Server chamada
Cases localizada em um servidor denominado Hoover:
Driver={SQL Server};Server=Hoover;Database=Cases;
UID=DanaS;PWD=Queequeg
Observação: UID representa a identificação do usuário e PWD representa a senha.
716 Anexo A
O Dreamweaver simplifica o processo de inserção de seqüências de caracteres de conexão em suas
páginas, fornecendo uma caixa de diálogo na qual são digitados os diferentes parâmetros de
conexão. Por exemplo: esta é a aparência da definição de uma conexão em uma caixa de diálogo
quando o usuário estiver programando um aplicativo JSP:
Após preencher a caixa de diálogo e clique em OK, o Dreamweaver inserirá a seqüência de

caracteres de conexão em um arquivo de inclusão no seu site.
Como utilizar uma DSN em uma seqüência de caracteres de conexão

Os nomes das fontes dos dados (DSNs) podem ser especificados em algumas conexões. O DNS é
um tipo de atalho que o usuário cria no Windows para uma seqüência de caracteres de conexão.
Após essa definição, é possível referir-se à seqüência de caracteres apenas pelo nome. Por exemplo:
uma seqüência de caracteres de conexão pode consistir nos seguintes parâmetros:
Driver={SQL Server};Server=Clinic-6;Database=Patients;
UID=dholmes;PWD=stetson2
Após a definição de um DSN chamado patients no Windows com os parâmetros acima, a
seqüência de caracteres de conexão pode ser utilizada no seu aplicativo especificando um único
parâmetro:
dsn=patients
Se o servidor de aplicativos estiver em execução em um sistema Windows e tiver sido definido um
DNS nesse sistema, o DNS poderá ser utilizado para definir uma conexão ASP ou ColdFusion 4
ou 5.
Caso você não tenha acesso físico a um servidor e, por isso, não for capaz de definir um DNS
nesse local, será necessário utilizar uma seqüência de caracteres de conexão para comunicar-se com
o banco de dados.
Para obter mais informações, veja “Como configurar DSNs no Windows”, na página 727.

718 Anexo A
ANEXO B
Manual básico de SQL
Este apêndice descreve como utilizar a Linguagem de Pesquisa Estruturada (SQL, Structured
Query Language) para criar conjuntos de registros destinados às páginas dinâmicas. A SQL é uma
linguagem que permite ler e gravar dados de um banco de dados. Esta linguagem é composta por
algumas palavras-chaves apenas e regras simples de sintaxe, mas permite executar operações de
banco de dados sofisticadas.
Este apêndice contém as seguintes seções:
• “Princípios básicos de sintaxe”, na página 719
• “Definição das colunas de um conjunto de registros”, na página 721
• “Limite do número de registros de um conjunto de registros”, na página 721
• “Ordenação dos registros em um conjunto de registros”, na página 724
• “Como unir as tabelas”, na página 725
Observação: A Macromedia não oferece suporte técnico para as tecnologias de outros fabricantes como o SQL.
Princípios básicos de sintaxe

A instrução SQL mais comumente utilizada para criar um conjunto de registros é SELECT, que
extrai determinadas colunas de uma ou mais tabelas de bancos de dados para criar um conjunto
de registros. A sintaxe básica da instrução SELECT é apresentada abaixo:
SELECT ColumnName FROM TableName
É possível adicionar quebras de linha, guias e outros tipos de espaço em branco às instruções para
tornar clara a lógica: O SQL ignora todos os tipos de espaço em branco. Por exemplo: a seguinte
instrução é válida:
SELECT PaidDues
FROM Members
As seguintes palavras-chave identificam os comandos SQL comumente utilizados:
Palavra-chave Descrição
SELECT Recupera os registros especificados no banco de dados
INSERT Inclui um novo registro em uma tabela de banco de dados
UPDATE Altera os valores nos registros de banco de dados especificados
DELETE Remove os registros de banco de dados especificados
719
As seguintes palavras-chave são utilizadas para refinar as instruções SQL:
Palavra-chave Descrição
FROM Denomina a fonte de dados de uma operação
WHERE Define uma ou mais condições para a operação
ORDER BY Classifica as linhas de conjuntos de registros em uma determinada ordem
GROUP BY Agrupa o conjunto de registros pelos itens especificados, selecionados em uma lista
Os seguintes operadores especificam condições e executam funções numéricas e lógicas:
Operador Significado
= Igual a
LIKE Como (caracteres curingas são aceitos)
<> Diferente de
NOT LIKE Não igual a (curingas são aceitos)
< Menor que
> Maior que
<= Menor ou igual a
>= Maior ou igual a
AND Ambas as condições devem ser atendidas, como Bahia AND Minas Gerais
OR Pelo menos uma das condições deve ser atendida, como Matos OR Mattos
NOT Exclui a condição seguinte, como Paris NOT França
Se o item que estiver sendo comparado for texto, coloque-o entre aspas simples, como no exemplo
a seguir:
...WHERE Country = 'Germany'
Se o item que estiver sendo comparado for uma data e você estiver trabalhando com um banco de
dados do Microsoft Access, delimite-o pelo sinal #:
...WHERE DateOfBirth < #01/01/1970#
Outros bancos de dados podem conter suas próprias convenções de datas. Consulte a
documentação do sistema de banco de dados.
Alguns sistemas de bancos de dados podem utilizar sintaxes fora do padrão SQL em seus
produtos. Consulte a documentação do sistema de banco de dados.
720 Anexo B
Definição das colunas de um conjunto de registros
O SQL pode ser utilizado para definir os conjuntos de registros de uma página. Um conjunto de
registros é um subconjunto extraído de um banco de dados. Para obter mais informações, veja
“Os bancos de dados”, na página 705.
Esta é a sintaxe SQL básica para definir as colunas de um conjunto de registros:
SELECT ColumnName1, ColumnName2, ColumnNameX FROM TableName
Para incluir todas as colunas de uma tabela no conjunto de registros, utilize o caractere curinga (*)
da seguinte forma:
SELECT * FROM TableName
Por exemplo: suponha que você esteja trabalhando com uma tabela denominada Customers. Para
extrair todas as colunas, digite a seguinte instrução SELECT:
SELECT * FROM Customers
Suponha que você necessite apenas dos dados contidos em duas colunas da tabela Customers: nas
colunas YearBorn e DateLastPurchase. Para criar um conjunto de registros que contenha apenas os
dados destas duas colunas, digite a seguinte instrução SELECT:
SELECT YearBorn, DateLastPurchase
FROM Customers
Limite do número de registros de um conjunto de registros

Utilize uma cláusula WHERE para limitar o número de registros no conjunto de registros. Por
exemplo: apenas os clientes que ganham mais de R$ 50mil por ano serão incluídos. Suponha que
uma coluna da tabela denominada Earnings informa os rendimentos de cada cliente. A instrução
SELECT teria a seguinte aparência:
SELECT YearBorn, DateLastPurchase FROM Customers
WHERE Earnings > 50000
Para filtrar os registros do banco de dados, especifique uma ou mais condições em uma cláusula
WHERE. As seções seguintes descrevem maneiras de filtrar registros com a cláusula WHERE:
• “Filtragem de registros com base na igualdade de dois valores”, na página 721

• “Filtragem de registros com base na semelhança de dois valores”, na página 722
• “Filtragem dos registros com base em uma faixa de valores”, na página 723
• “Filtragem dos registros com base em uma combinação de condições de busca”, na página 724
Filtragem de registros com base na igualdade de dois valores

É possível filtrar registros em um banco de dados com base na igualdade do valor de um
parâmetro em relação ao valor de uma coluna de registros.
Suponha que você decidiu permitir que os usuários pesquisassem o banco de dados por
departamento. Siga a lógica a seguir para criar o conjunto de registros resultante da busca:
• Verifique um registro na tabela do banco de dados.
• Se o valor na coluna “departamento” do registro for igual ao nome do departamento enviado
pelo usuário, inclua esse registro no conjunto de registros resultante da busca.
• Verifique o próximo registro da tabela.
Manual básico de SQL 721

A lógica pode ser expressa com a seguinte cláusula WHERE:
WHERE ColumnName = ParameterValue
ParameterValue é uma variável SQL que contém um parâmetro de busca. Em um aplicativo para a
Web, o usuário normalmente fornece esse parâmetro utilizando um formulário HTML.
Esta consulta ao banco de dados poderia ser expressa inteiramente na linguagem SQL, da seguinte
forma:
SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL
FROM EMPLOYEES
WHERE DEPARTMENT = 'varDept'
A instrução SQL localiza todos os registros na tabela de funcionários que contenham um valor
DEPARTMENT igual àquele encontrado na variável varDept. Por exemplo: se o usuário
especificar o nome do departamento em Operações, a instrução SQL deverá gerar o seguinte
conjunto de registros:
Filtragem de registros com base na semelhança de dois valores

É possível filtrar registros em um banco de dados com base na semelhança do valor de um
parâmetro em relação ao valor de uma coluna de registros.
A utilização da semelhança em vez da igualdade permite aos usuários uma maior flexibilidade ao
especificar o valor desses parâmetros. Por exemplo: as palavras da busca não necessitam distinguir
maiúsculas de minúsculas. Se o usuário digitar “bahia” e a coluna da tabela contiver o valor
“Bahia”, a correspondência será estabelecida.
Além disso, a semelhança possibilita o uso de caracteres curinga para que os usuários possam fazer
buscas de partes de palavras e também em ordem alfabética. Por exemplo: se o usuário digitar “m”
e a coluna da tabela contiver os valores “Matos”, “Madureira” e “Miranda”, será possível utilizar
um caractere curinga na instrução SQL para que as três correspondências sejam estabelecidas.
O caractere curinga padrão é o sinal de percentagem (%):
...WHERE LastName LIKE 'Mc%'
Suponha que você decidiu permitir que os usuários pesquisem o banco de dados por sobrenome.
Siga a lógica a seguir para criar o conjunto de registros resultante da busca:
• Se o valor na coluna “sobrenome” do registro contiver um valor semelhante ao que o usuário
enviou, inclua esse registro no conjunto de registros resultante da busca.
WHERE ColumnName LIKE ParameterValue
ParameterValue é uma variável SQL que contém um parâmetro de busca. Em um aplicativo para a
Web, o usuário normalmente fornece esse parâmetro utilizando um formulário HTML.
722 Anexo B
Esta consulta ao banco de dados poderia ser expressa inteiramente na linguagem SQL, da seguinte
forma:
SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL
FROM EMPLOYEES
WHERE DEPARTMENT LIKE 'varLastName'
Para que os usuários possam executar buscas utilizando partes de palavras, combine a variável com
um caractere curinga. O caractere curinga da SQL utilizado nesse caso é o sinal de percentagem
(%). Por exemplo:
...WHERE LASTNAME LIKE 'varLastName%'
Por exemplo: se o usuário digitar o parâmetro de busca “s”, todos os registros contendo
sobrenomes iniciados com a letra “s” serão incluídos no conjunto de registros, conforme mostrado
abaixo:
+Se o usuário especificar o parâmetro de busca “si”, apenas os registros que contenham
sobrenomes iniciados com as letras “si” serão incluídos no conjunto de registros:
Filtragem dos registros com base em uma faixa de valores

Os registros de um banco de dados podem ser filtrados estabelecendo-se que um valor da coluna
de registros pertença a uma faixa limitada por dois valores de parâmetros.
Suponha que você decidiu permitir que os usuários pesquisassem o banco de dados por uma faixa
de datas. Siga a lógica a seguir para criar o conjunto de registros resultante da busca:
• Se o valor na coluna “data” do registro se encontrar entre dois valores de data enviados pelo
usuário, inclua esse registro no conjunto de registros resultante da busca.
WHERE ColumnName BETWEEN ParameterValue1 AND ParameterValue2
ParameterValue1 e ParameterValue2 são variáveis SQL que contêm os parâmetros da busca. Em um
aplicativo para a Web, o usuário normalmente fornece esses parâmetros utilizando um formulário
HTML.
Esta é a maneira de expressar em SQL esse tipo de consulta ao banco de dados:
SELECT FIRSTNAME, LASTNAME, DEPARTMENT, STARTDATE
FROM EMPLOYEES
WHERE STARTDATE BETWEEN #varStartRange# AND #varEndRange#

Por exemplo: se o usuário digitar os parâmetros “01/07/99” e “31/12/99” da faixa, todos os
funcionários que começaram a trabalhar na segunda metade de 1999 serão incluídos no conjunto
de registros, como mostrado abaixo:
Filtragem dos registros com base em uma combinação de condições de

busca
Esta seção descreve como incluir registros no conjunto de registros resultante da busca com base
em uma combinação de condições de busca. Combine as condições na linguagem SQL utilizando
os operadores lógicos AND, OR e NOT.
Se desejar que todas as condições sejam verdadeiras (true) para um registro incluído no conjunto
de registros, utilize o operador AND da seguinte forma:
...WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept'
Se desejar que qualquer uma das condições seja verdadeira (true) para um registro no conjunto de
registros, utilize o operador OR da seguinte forma:
...WHERE LASTNAME LIKE 'varLastName' OR DEPARTMENT LIKE 'varDept'
Se desejar que uma condição seja verdadeira (true), mas não outra, utilize o operador NOT da
seguinte forma:
...WHERE DEPARTMENT LIKE 'varDept' AND NOT COUNTRY LIKE 'varCountry'
Utilize os parênteses para agrupar as condições de busca:
...WHERE (DEPARTMENT LIKE 'varDept' AND STARTDATE < #varStart#)
OR STARTDATE BETWEEN #varStartRange# AND #varEndRange#
Ordenação dos registros em um conjunto de registros

Utilize a cláusula ORDER BY para ordenar os registros do conjunto de registros. Por exemplo:
suponha que deseja ordenar os registros do conjunto de registros de acordo com a renda do
cliente, da mais baixa para a mais alta. No SQL, ordene os registros da seguinte forma:
SELECT LastName, FirstName, Earnings FROM Customers
ORDER BY Renda
Como padrão, a cláusula ORDER BY ordena os registros na ordem ascendente (1, 2, 3... ou A, B,
C...). Se desejar classificá-los na ordem descendente, da renda mais alta para a mais baixa, utilize a
palavra-chave DESC da seguinte forma:
ORDER BY Earnings DESC
724 Anexo B
Como unir as tabelas
É possível utilizar uma única instrução SELECT para recuperar dados de uma ou mais tabelas de um
banco de dados. Esta instrução une as tabelas e retorna um único conjunto de registros que contém
dados selecionados em cada tabela.
Por exemplo: o banco de dados de uma empresa pode conter uma tabela com os dados pessoais
dos funcionários e uma outra tabela que acomoda os dados sobre os seus departamentos. Para
criar um catálogo de funcionários com os respectivos nomes, números de telefone e
departamentos, é necessário recuperar informações das duas tabelas simultaneamente.
Para isso, crie uma união especificando todas as tabelas a serem incluídas e como se relacionam.
Por exemplo:
SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME
FROM EMPLOYEES, DEPARTMENTS
WHERE EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID
Observação: Utilize a notação de pontos para identificar com precisão as colunas. Por exemplo:
EMPLOYEES.DEPT_ID refere-se à coluna DEPT_ID na tabela EMPLOYEES.
A primeira linha especifica as colunas a serem recuperadas. As três primeiras colunas,

FIRSTNAME, LASTNAME, PHONE, constam da tabela EMPLOYEES, enquanto que a
quarta coluna, DEPTNAME, está contida apenas da tabela DEPARTMENTS.
A segunda linha especifica as duas tabelas das quais os dados serão recuperados, EMPLOYEES e
DEPARTMENTS.
A última linha especifica os registros a serem unidos e recuperados nas duas tabelas. Cada tabela
contém uma coluna chamada DEPT_ID (na tabela DEPARTMENTS, esta coluna é a chave
primária). Para obter mais informações, consulte “Definição das relações entre as tabelas”, na
página 710. A cláusula WHERE compara o valor de DEPT_ID de uma tabela com esse mesmo valor
em outra tabela. Quando uma correspondência for encontrada, todos os campos do registro na
tabela EMPLOYEES serão unidos a todos os campos do registro na tabela DEPARTMENTS. Em
seguida, os dados combinados serão filtrados para criar um novo registro constituído das colunas
FIRSTNAME, LASTNAME, PHONE e DEPTNAME. Finalmente, o novo registro será
incluído no conjunto de registros.
A utilização de uma sintaxe de união um pouco diferente poderá ser mais conveniente em alguns
sistemas de banco de dados. Por exemplo: a seguinte instrução SQL utiliza as palavras-chave SQL
INNER JOIN...ON para obter os mesmos resultados que o exemplo anterior:
SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME
FROM EMPLOYEES INNER JOIN DEPARTMENTS
ON EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID
Consulte a documentação do sistema de banco de dados para determinar qual sintaxe de união
deverá ser utilizada.

726 Anexo B
ANEXO C
Como configurar DSNs no Windows
As DSNs consistem de um tipo de atalho do Windows utilizados para estabelecer conexões de

bancos de dados (veja “Como compreender as conexões de bancos de dados”, na página 712).
Para utilizar um DSN em seu aplicativo para a Web, é necessário configurá-lo no computador ou
no servidor remoto, conforme a descrição neste apêndice.
Este apêndice se aplicará apenas quando o banco de dados estiver em um sistema compatível com
nomes de fontes de dados (DSNs) ODBC, ou seja, sistemas como o Microsoft Windows e
Windows NT.
Este apêndice contém as seguintes seções:
• “Como compreender os DSNs”, na página 727
• “Como criar um DSN”, na página 728
Como compreender os DSNs

Um DSN é um identificador de uma única palavra composto de um conjunto de parâmetros de
conexão de banco de dados. Os parâmetros podem incluir o nome do servidor, o nome ou o
caminho até o banco de dados, o driver ODBC a ser utilizado e o nome e senha do usuário, se
forem aplicáveis.
Por exemplo: suponha que haja um banco de dados do Microsoft SQL Server denominado
Precinct, localizado em um servidor denominado Kojak. Para ter acesso ao banco de dados, é
necessário digitar o nome de usuário “columbo” e a senha “savalas7”. Depois de utilizar estes
parâmetros para definir um DSN denominado ourcops, será possível criar a conexão digitando
uma única palavra, ourcops no Dreamweaver MX, em vez de todos os parâmetros.
727
Como criar um DSN
Para criar um DSN, um driver ODBC deve ser instalado no banco de dados no computador onde
o sistema Windows estiver executando o servidor de aplicativos. ODBC (conectividade aberta de
banco de dados) é um software intermediário que estabelece a comunicação entre um aplicativo e
um banco de dados. Para obter mais informações, veja “Como estabelecer a interface com o banco
de dados”, na página 712.
Certifique-se de que o sistema contém o driver adequado ao banco de dados. Para obter uma lista
de drivers ODBC nos sistemas Windows 95, 98 ou NT, escolha Iniciar > Configurações > Painel
de controle e, em seguida, clique duas vezes no ícone de Fontes dos dados ODBC. Dependendo
do sistema, o ícone também poderá se chamar ODBC ou ODBC de 32 bits. Ao clicar na guia
Drivers, você verá uma lista dos drivers instalados no sistema. No Windows 2000, escolha
Iniciar > Configurações > Painel de controle > Ferramentas de administração > Fontes dos dados
e, em seguida, clique na guia Drivers. No Windows XP, escolha Iniciar > Painel de controle >
Desempenho e manutenção > Ferramentas de administração > Fontes de dados (ODBC), em
seguida, clique na guia Drivers.
Se o driver necessário não estiver instalado, efetue o download e instale os pacotes Microsoft Data
Access Components (MDAC) 2.5 e 2.6, que podem ser obtidos gratuitamente por download no
site da Microsoft na Web: http://www.microsoft.com/data/download.htm. Esses pacotes contêm
os drivers ODBC da Microsoft mais recentes para os bancos de dados mais conhecidos.
Observação: Primeiro, instale o MDAC 2.5 e, em seguida, o MDAC 2.6.
Se o MDAC não contiver um driver ODBC para o seu banco de dados, entre em contato com o
revendedor do banco de dados.
Para criar um DSN:
1 Abra o ODBC Data Source Administrator do Windows da seguinte maneira:

• No Windows 95, 98 ou NT selecione Iniciar > Configurações > Painel de controle e clique
duas vezes no ícone de Fontes dos dados ODBC. Dependendo do sistema, o ícone também
poderá se chamar ODBC ou ODBC de 32 bits.
• No Windows 2000, escolha Iniciar > Configurações > Painel de controle > Ferramentas de
administração > Fontes dos dados.
• No Windows XP, selecione Iniciar > Painel de controle > Desempenho e manutenção >
Ferramentas de administração > Fontes de dados (ODBC).
728 Anexo C
2 Na caixa de diálogo do Dreamweaver utilizada para criar uma conexão de DSN, clique no
botão Definir.
O ODBC Data Source Administrator é exibido:
3 Clique na guia DSN do sistema.

A guia exibe a lista de DSNs do sistema.
4 Clique em Adicionar para adicionar um novo DSN à lista.
A caixa de diálogo Criar nova fonte de dados é exibida com todos os drivers carregados no
sistema.
5 Selecione um driver da lista e, em seguida, clique em Concluir
Por exemplo: se o banco de dados for um arquivo do Microsoft Access, selecione Driver do
Microsoft Access (*.mdb). Se a lista não apresentar um driver correspondente ao produto
utilizado, será preciso efetuar o download do driver no site do revendedor na Web e instalá-lo.
6 Na caixa de diálogo que aparecer, digite um nome para o DSN e especifique os parâmetros da
conexão.
As caixas de diálogo para especificar os parâmetros vão variar, dependendo do driver que tiver
sido selecionado. Para o driver do Microsoft Access, digite um nome, clique em Selecionar,
localize o arquivo do banco de dados no disco rígido e clique em OK.
7 Clique em OK para fechar a caixa de diálogo.
O novo DSN será adicionado à lista de DSNs de sistema.
Como configurar DSNs no Windows 729

730 Anexo C
ANEXO D
Referência rápida: Tags do Macromedia
ASP.NET
O Macromedia Dreamweaver MX utiliza uma série de tags personalizadas para criar

comportamentos de servidor em páginas ASP.NET. É possível também utilizar essas tags em suas
próprias páginasASP.NET.
Este apêndice descreve as tags Macromedia a seguir:
• “MM:DataSet”, na página 731
• “MM:If ”, na página 734
O Dreamweaver também utiliza as tags a seguir para criar comportamentos de servidor:
• “MM:Insert”, na página 734
• “MM:Update”, na página 735
• “MM:Delete”, na página 736
Por último, se uma tag contiver uma instrução SQL ou procedimento armazenado que leva
parâmetros, utilize as duas tags a seguir para especificar os valores de parâmetro:
• “Parâmetros”, na página 737
• “Parâmetro”, na página 737
Observação: Do mesmo modo que as tags Microsoft ASP.NET, cada tag Macromedia personalizada requer um
atributo runat="server".
Para uma descrição mais detalhada das tags e seus atributos, visite a Central de suporte do
Dreamweaver no endereço http://www.macromedia.com/go/customtags_asp.
MM:DataSet
Utilize a tag MM:DataSet para criar um DataSet. Os DataSets ASP.NET são bastante parecidos
com os conjuntos de daods ASP.
Exemplo
<MM:DataSet
id="fruitsDS"
runat="server"
CommandText=”SELECT name, color FROM fruits”
ConnectionString=<%# MM_NOTD_STRING %>
/>
731
Diretivas exigidas
<%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>
Se as tags de parâmetros forem utilizadas, as diretivas a seguir serão freqüentemente necessárias
(mas não sempre):
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Data.OleDb" %>
Atributo
CommandText
Exigido. Especifica uma instrução SQL ou o nome de um procedimento armazenado. A instrução
SQL pode ser parametrizada por meio de pontos de interrogação como alocadores de espaço. Veja
“Parâmetros”, na página 737.
ConnectionString
Exigido. Especifica uma seqüência de caracteres de conexão contendo informações para conexão a
um banco de dados.
CreateDataSet
Opcional. True ou False. Se for false, o DataSet não será criado. O valor padrão é true.
Expression
Opcional. True ou False. Permite controlar quando a instrução CommandText é executada. Se for
false, a instrução CommandText não será executada. É possível alternar o valor por meio de
programação.
IsStoredProcedure
Opcional. True ou False. Permite indicar a natureza do CommandText. O valor padrão é false.
PageSize
Número inteiro opcional. Quando CreateDataSet for verdadeiro (true), permite dividir os
registros em grupos (páginas) de tamanho fixo. Veja CurrentPage. Não definir PageSize/
CurrentPage e StartRecord/MaxRecords. Se ambos os atributos forem especificados, o anterior
(PageSize/CurrentPage) será utilizado.
CurrentPage
Número inteiro opcional. Quando PageSize for utilizado, permite especificar uma página em
especial (grupos de registros). O índice da primeira página é zero. Veja PageSize.
StartRecord
Número inteiro opcional. Um deslocamento do primeiro registro em um DataSet (o índice do
primeiro registro é zero). Quando CreateDataSet for verdadeiro (true), permite recuperar um
subconjunto de registros junto com o atributo de MaxRecords. Não definir PageSize/CurrentPage
e StartRecord/MaxRecords. Se ambos os atributos forem especificados, o anterior (PageSize/
CurrentPage) será utilizado. Se PageSize for maior que zero, então StartRecord será calculado
automaticamente como (PageSize * CurrentPage).
MaxRecords
Número inteiro opcional. Permite especificar o número de registros a ser recuperado iniciando no
deslocamento de StartRecord. Veja StartRecord.
732 Anexo D
GetRecordCount
Opcional. True ou False. Quando PageSize for utilizado, permite desativar a contagem de registros
para melhorar o desempenho. Se a página nunca utilizar os atributos RecordCount ou LastPage,
não é necessário contar os registros. O valor padrão é true.
RecordCountCommandText
Opcional. Para melhorar o desempenho quando GetRecordCount for verdadeiro (true), permite
especificar uma instrução SQL explícita para obter uma contagem de registro. A instrução deve
estar no formato SELECT COUNT (*) FROM... e pode incluir cláusulas WHERE, mas não parâmetros.
EndRecord
Opcional. Somente leitura. Permite obter o valor mínimo de (CurrentPage + 1) * PageSize e
RecordCount.
LastPage
Opcional. Somente leitura. Quando PageSize for utilizado e GetRecordCount for verdadeiro
(true), permite obter o índice zerado da última página.
RecordCount
Opcional. Somente leitura. Quando CreateDataSet e GetRecordCount forem ambos verdadeiros,
permite obter o número total de registros gerado pela expressão CommandText.
theDS
Opcional. Somente leitura. Fornece acesso ao DataSet que mantém os registros recuperados como
resultado da configuração de CreateDataSet em verdadeiro (true).
DefaultView
Opcional. Somente leitura. Fornece acesso às tabelas DS.Tables[0].DefaultView
Debug
Opcional. True ou False. Permite exibir dicas adicionais se a execução desta tag enviar uma
exceção. Se o atributo Debug for true (verdadeiro), FailureURL será ignorado (veja FailureURL).
Ao desenvolver a página, defina Debug como verdadeiro (true) para obter informações de
diagnósticos concisas sobre problemas com a página. Ao distribuir a página, defina Debug como
false (falso), de modo que os visitantes externos não possam ver os diagnósticos e outras
informações internas no caso de problemas com a página.
FailureURL
Opcional. Permite especificar a URL de uma página que será aberta se uma exceção for lançada
durante a execução de CommandText ou se os atributos determinados forem conflitantes.
SuccessURL
Opcional. Permite especificar a URL de uma página que será aberta se a instrução CommandText
for executada sem exceções lançadas.
Referência rápida: Tags do Macromedia ASP.NET 733

MM:If
Utilize a tag MM:If tag para controlar a inclusão de conteúdo ou lógica a uma página.
Exemplo
<MM:If
runat="server"
Expression="<%# (fruitsDS.CurrentPage == 0) %>">
<ContentsTemplate>
<font color='#CCCCCC'>Previous</font>
</ContentsTemplate>
</MM:If>
Diretiva exigida
Atributo
Expression
Exigido. Permite especificar uma expressão de resolução. Se a expressão for verdadeira, o conteúdo
interno da tag será utilizado. Se a expressão for falsa, o conteúdo interno será ignorado.
MM:Insert
Use a tag MM:Insert para inserir registros em um banco de dados.
Exemplo
<MM:Insert
runat="server"
CommandText="INSERT INTO fruits (name, color) VALUES (?, ?)"
ConnectionString='<%# MM_NOTD_STRING %>'
Expression=<%# Request.Form["MM_insert"] == "true" %>
Debug=”true”
CreateDataSet="false"
>
<Parâmetros>
<Parameter Value='<%# Request.Form["fruitName"] %>' />
<Parameter Value='<%# Request.Form["fruitColor"] %>' />
</Parameters>
</MM:Insert>
Diretiva exigida
Atributo
A tag MM:Insert utiliza a mesma lógica da tag MM:DataSet e compartilha todos os atributos
daquela tag. Para obter mais informações, veja “MM:DataSet”, na página 731. Observe os valores de
atributos a seguir:
734 Anexo D
Expression
Ao definir este atributo em false, a tag fica inativa. Ou seja, a instrução SQL ou procedimento
armazenado especificados no atributo CommandText não são executados. É possível utilizar o
atributo Expression para controlar quando a operação de inserção ocorre. Por exemplo: talvez seja
preciso validar o formulário no servidor antes de executar a operação de inserção. Em outro caso, o
código poderá definir Expression em true somente se o formulário que contém os dados a serem
inseridos forem enviados.
CommandText
Normalmente, esta é uma instrução INSERT SQL ou um procedimento armazenado que insere
registros.
CreateDataSet
Este atributo é normalmente definido em false, pois o DataSet não foi criado após a execução da
instrução INSERT. No caso de um procedimento armazenado, no entanto, o DataSet pode ser
criado após a operação de inserção.
MM:Update
Use a tag MM:Update para atualizar registros em um banco de dados.
Exemplo
<MM:Update
runat="server"
CommandText="UPDATE fruits SET color=? WHERE name=?"
Expression=<%# Request.Form["MM_update"] == "true" %>
Debug=”true”
>
<Parâmetros>
<Parameter Value='<%# Request.Form["updateNames"] %>' />
</Parameters>
</MM:Update>
Diretiva exigida
Atributo
A tag MM:Update utiliza a mesma lógica da tag MM:DataSet, desse modo, compartilha todos os
atributos daquela tag. Para obter mais informações, veja “MM:DataSet”, na página 731. Observe os
valores de atributos a seguir:
Expression
Ao definir este atributo em false, a tag fica inativa. Ou seja, a instrução SQL ou procedimento
armazenado especificados no atributo CommandText não são executados. É possível utilizar o
atributo Expression para controlar quando a operação de atualização ocorre. Por exemplo: talvez seja
preciso validar o formulário no servidor antes de executar a operação de atualização. Em outro caso,
o código poderá definir Expression em true somente se o formulário que contém os dados a serem
atualizados forem enviados.

CommandText
Normalmente, esta é uma instrução UPDATE SQL ou um procedimento armazenado que
atualiza registros.
CreateDataSet
instrução UPDATE. No caso de um procedimento armazenado, no entanto, o DataSet pode ser
criado após a operação de atualização.
MM:Delete
Use a tag MM:Delete para excluir registros em um banco de dados.
Exemplo
<MM:Delete
runat="server"
CommandText="DELETE FROM fruits WHERE name=?"
Expression=<%# Request.Form["MM_delete"] == "true" %>
Debug=”true”
>
<Parâmetros>
<Parameter Value='<%# Request.Form["deleteNames"] %>' />
</Parameters>
</MM:Delete>
Diretiva exigida
Atributo
A tag MM:Delete utiliza a mesma lógica da tag MM:DataSet, desse modo, compartilha todos os
atributos daquela tag. Para obter mais informações, veja “MM:DataSet”, na página 731. Observe os
valores de atributos a seguir:
Expression
Ao definir o atributo Expression em false, a tag fica inativa. Ou seja, a instrução SQL ou
procedimento armazenado especificados no atributo CommandText não são executados. É
possível utilizar o atributo Expression para controlar quando a operação de exclusão ocorre. Por
exemplo: talvez seja preciso executar a validação do formulário no servidor antes de executar a
operação de exclusão.
CommandText
Normalmente, esta é uma instrução DELETE SQL ou um procedimento armazenado que exclui
registros.
CreateDataSet
instrução DELETE. No caso de um procedimento armazenado, no entanto, o DataSet pode ser
criado após a operação de exclusão.
736 Anexo D
Parâmetros
Use a tag Parameters para especificar parâmetros. Há duas condições em que os parâmetros
podem ser especificados:
• O atributo CommandText da tag principal especifica uma instrução de SQL parametrizada.
Esta instrução SQL possui pontos de interrogação (?) como alocadores de espaço para
parâmetros.
Observação: Não é permitido parametrizar todas as partes de cada instrução SQL. Por exemplo: é possível
parametrizar a cláusula WHERE de uma instrução SELECT, mas não a cláusula ORDER BY. Geralmente, é
possível parametrizar quaisquer pares de nome/valor em uma instrução SQL.
• O atributo CommandText especifica um procedimento armazenado que leva parâmetros.

Em ambos os casos, os valores do parâmetro são fornecidos por tags Paremeter que aparecem na
mesma ordem que os alocares de espaço (veja “Parâmetro”, na página 737). As tags Parameter
devem finalizada por uma tag Parameters.
Exemplo
<MM:Update
runat="server"
CommandText="UPDATE fruits SET color=? WHERE name=?"
Expression=<%# Request.Form["MM_update"] == "true" %>
Debug=”true”
>
<Parâmetros>
<Parameter Value='<%# Request.Form["updateNames"] %>' />
</Parameters>
</MM:Update>
Parâmetro
Use a tag Parameter para especificar valores de parâmetros.
Exemplo
<MM:Insert
runat="server"
CommandText="INSERT INTO fruits (name, color) VALUES (?, ?)"
Expression=<%# Request.Form["MM_insert"] == "true" %>
Debug=”true”
>
<Parâmetros>
<Parameter Value='<%# Request.Form["fruitName"] %>' />
</Parameters>
</MM:Insert>

Atributo
Value
Exigido. Valor a ser atribuído aos parâmetros Input ou InputOutput (veja Direction). O valor será
lançado a um tipo de dados apropriado antes de ser repassado ao banco de dados. O lançamento
depende da configuração do atributo Type. Quando o atributo Direction for Output,
InputOutput ou ReturnValue, o valor será definido depois que o CommandText for executado.
Direction
Opcional. Permite especificar um dos valores abaixo: Input, InputOutput, Output, ReturnValue.
O valor padrão é Input.
Nome
Opcional. Para instruções SQL parametrizadas, o nome pode ser qualquer coisa. Normalmente, o
nome está relacionado ao significado do parâmetro, como @deptName, e inicia com o caractere
@. No entanto, a única exigência é que a ordem na qual as tags Parameter devem ser exibidas deve
corresponder à ordem dos pontos de interrogação na instrução SQL. Considerando que o nome é
opcional, você pode omitir este atributo. Nesse caso, o nome será definido como “parameter_”,
mais o índice baseado em um do parâmetro na lista de parâmetros fornecida.
Para procedimentos armazenados, o nome deve corresponder aos marcadores do parâmetro no
procedimento armazenado (por exemplo: @id). Isto significa que é necessário fornecer este atributo ao
utilizar procedimentos armazenados. Se um parâmetro do tipo ReturnValue for necessário, sua tag
Parameter deve ocorrer antes de qualquer outra tag Parameter.
Size
Opcional. O tamanho do valor do parâmetro. Também é conhecido como a largura da coluna. Se
não for fornecido, o valor deste atributo é deduzido dos atributos Type e Value.
Type
Opcional. Especifica o tipo de parâmetro. É possível especificar os tipos de dados a seguir, cada
qual expressado em um de dois modos.
(int)OleDbType.Boolean "Boolean"
(int)OleDbType.UnsignedTinyInt "UnsignedTinyInt"
(int)OleDbType.Char "Char"
(int)OleDbType.DBTimeStamp "DBTimeStamp"
(int)OleDbType.Decimal "Decimal"
(int)OleDbType.Double "Double"
(int)OleDbType.Single "Single"
(int)OleDbType.Integer "Integer"
(int)OleDbType.SmallInt "SmallInt"
(int)OleDbType.BigInt "BigInt"
(int)OleDbType.VarChar "VarChar"
(int)OleDbType.UnsignedSmallInt "UnsignedSmallInt"
(int)OleDbType.UnsignedInt "UnsignedInt"
(int)OleDbType.UnsignedBigInt "UnsignedBigInt"
738 Anexo D
(int)OleDbType.Currency "Currency"
(int)OleDbType.DBDate "DBDate"
(int)OleDbType.TinyInt "TinyInt"
(int)OleDbType.DBTime "DBTime"
(int)OleDbType.VarNumeric "VarNumeric"
Os valores OleDbType a seguir não são suportados:
(int)OleDbType.Guid "Guid"
(int)OleDbType.Variant "Variant"

740 Anexo D
ÍNDICE REMISSIVO
Símbolos acessibilidade 359–371

@import 311 autoria da 363
caixa de diálogo, ativação 364
A Federal Rehabilitation Act 359
abertura de arquivos não-HTML 191 imagens 365
preferências 191 leitora de tela 360
ação Abrir a janela do navegador 391 molduras 367
ação Alterar a propriedade 382 navegação somente pelo teclado 360
ação Arrastar a camada 386 objetos de mídia 368, 369
ação Chamar o JavaScript 382 objetos, como inserir 366
ação Controlar o Shockwave ou Flash 385 recursos do sistema operacional 360
ação Definir a imagem da barra de navegação 394 teste 370
ação Definir a mensagem de status 396 Web Accessibility Initiative (W3C) 359
ação Definir o texto da camada 395 ações
ação Definir o texto da moldura 395 como alterar em comportamentos 380
ação Definir o texto do campo de texto 397 como escolher no painel Comportamentos 377
ação Executar a linha de tempo 405 compatibilidade com os navegadores 381
ação Executar o som 392 controlar as linhas de tempo 428
ação Ir do menu de salto 390 criar 380
ação Ir para a URL 389 definidos 375
ação Ir para o quadro da linha de tempo 404 incluídas com o Dreamweaver 381–406
ação Mensagem pop-up 392 Veja também ações individuais pelo nome
ação Menu de salto 390 acoplar painéis e grupos de painéis 50
ação Mostrar/ocultar as camadas 398 adicionar
ação Parar a linha de tempo 405 conteúdo dinâmico 561
ação Permutar a imagem 403 extensões ao Dreamweaver 59
ação Pré-carregar as imagens 393 links 458, 460
ação Restaurar a imagem permutada 404 objeto a uma linha de tempo 422
ação Validar o formulário 405 quadros a uma linha de tempo 424
ação Verificar o navegador 383 Ajuda 18
ação Verificar o plug-in 384 Ajuda do Dreamweaver 18
álbuns de fotografias na Web, criação de 339
alinhamento
elementos da página 323
imagens 297
imagens de rastreamento 127
opções 323
texto 297
741
Alinhamento à direita (inspetor de propriedades da área de trabalho 35
imagem) 323 layout 36
Alinhamento à esquerda (inspetor de propriedades da layout flutuante 39
imagem) 323 sobre 37
Alinhamento alto do texto (inspetor de propriedades da armazenar em cache as fontes de dados 558
imagem) 323 arquivos
Alinhamento da linha de base (inspetor de propriedades colocação 99
da imagem) 323 criar 116
Alinhamento no meio (inspetor de propriedades da download e upload 97
imagem) 323 encobrimento 101
Alinhamento no meio absoluto (inspetor de exibição no painel Site 84
propriedades da imagem) 323 navegação 86
Alinhamento o mais abaixo (inspetor de propriedades organização 63
da imagem) 323 pesquisar 316
Alinhamento padrão do navegador (inspetor de sincronização dos sites local e remoto 100
propriedades da imagem) 323 texto 120
Alinhamento pela base (inspetor de propriedades da tipos que contam com suporte 202
imagem) 323 upload 99
Alinhamento pelo topo (inspetor de propriedades da arquivos de correio eletrônico 120
imagem) 323 arquivos de texto
alinhar como abrir 120
camadas 414 arquivos dependentes
alongamento automático (visualização de layout) 267 colocação 99
ambiente de codificação 201 exibição e ocultamento 91
ambientes de trabalho obtenção 98
janela do Live Data 516 arquivos do Microsoft Excel, como importar 243
âncoras com nome arquivos DTD 195
criar 439 arquivos DTD XML 195
âncoras, com nome 439 arquivos HTML
animações importação 121
ao longo de um caminho complexo 424 arquivos jar 196
aplicar a objetos 427 arquivos ocultos, exibição e ocultamento 91
copiar e colar 426 arquivos órfãos 504
criar 422 arquivos tld 196
linhas de tempo 420 ASP 141
melhorar 427 conexões de banco de dados 161
visão geral 22 ASP.NET 141
aninhar 410 conexões de banco de dados 155
camadas 411 DataGrid 582
aplicativos para a Web Botões Editar, Atualizar, Cancelar 582
requisitos 138 botões Excluir 582
aplicativos, outros, utilizar com o Dreamweaver 55 Campo de dados simples 582
applets Java Formulário livre 582
inserir 345, 358
tornar dinâmico 567
visão geral 358
applets. Veja applets de Java
742 Índice remissivo

Hyperlink 582 barra de status 42
DataList 582 como definir o texto (comportamento) 396
elementos de formulário dinâmicos 641 menu pop-up Tamanho da janela 42
gravar SQL para 548 preferências 44
importação de tags 196 barra do Iniciador 40, 44
tag Parameter 737 personalizar 52
tag Parameters 737 barra Inserir 40, 205
tag personalizada Delete 736 categorias 47
tag personalizada do Dataset 731 de encaixe 50
tag personalizada If 734 preferências 49
tag personalizada Insert 734 visão geral 46
tag personalizada Update 735 bibliotecas de tags 192
tags personalizadas da Macromedia 731 blockquote
atalhos de teclado, editar 56 como aplicar 297
atributo usemap 451 blocos de código
atributos gravação 605
buscas 210 instruções de codificação 613
tornar dinâmico 565 marcadores de parâmetros 615
Veja também tags posicionar 614
atributos de tags editáveis (modelos) 473, 483 botão Cor do sistema 123
atributos HTML, como tornar dinâmicos 565 botão Cor padrão 123
atualização automática 519 botão Executar novamente 129
atualizar os links 442 botão Ir, como associar a um menu de salto 390
áudio. Veja som botão Roda de cores (cor do sistema) 123
botão Tachado (cor padrão) 123
B botões
banco de dados botões Enviar, gráficos 638
armazenar conteúdo 531 botões Ir 390
conexões, sobre 712 como criar botões de formulário 637
projeto 706 botões de opção 632
registros 705 botões de opção, como tornar dinâmicos 644
tabelas, sobre 705 botões Enviar 638
banco de dados OLE 167 Bridge driver JDBC-ODBC da Sun 177
bancos de dados
esquemas e catálogos 521 C
MySQL 181 cabeçote de execução 421
sobre 705 caixa de diálogo Botão Flash 348
barra de ferramentas caixa de diálogo Botões de opção dinâmicos 644
títulos dos documentos, como alterar 121 caixa de diálogo Caixa de seleção dinâmica 643
barra de ferramentas do documento 40 caixa de diálogo Conjunto de registros
barra de ferramentas padrão 40, 46 avançada 546
barra de navegação simples 546
adicionar imagens à 449 caixa de diálogo Dados dinâmicos 566
criar 448 caixa de diálogo Definições do Live Data 518
estados da imagem 448 caixa de diálogo Definir o estilo HTML 302
modificar os elementos 450 caixa de diálogo Editar a folha de estilos 312
barra de navegação dos registros caixa de diálogo Editar a lista de formatos 571
como ocultar 575 caixa de diálogo Grupo de botões de opção 633
criar 572 caixa de diálogo Hyperlink 440
caixa de diálogo Inserir âncora com nome 439
caixa de diálogo Inserir barra de navegação 449
Índice remissivo 743

caixa de diálogo Inserir link de correio eletrônico 441 caminhos relativos à raiz
caixa de diálogo Inserir menu de salto 446 definir 436
caixa de diálogo Lista/menu dinâmico 642 preferência Visualizar utilizando o servidor local
caixa de diálogo Novo documento 116 435
caixa de diálogo Parâmetros 567 sobre 434
caixa de diálogo Propriedades do modelo 490 caminhos relativos à raiz do site. Veja caminhos
caixa de diálogo Texto Flash 351 relativos à raiz
caixa de diálogo Verificador de links 505 Campo de texto Imagem cambiável 325
caixa de diálogo Vincular a folha de estilos externa 311 campos
caixas de seleção 632 campos de arquivos 630
caixas de seleção, como tornar dinâmicas 643 como criar campos de texto 626
camadas 428 como criar campos ocultos 631
alinhar 414 como efetuar o upload de arquivos para um servidor
alterar a ordem de empilhamento 416 630
alterar a visibilidade com o painel Camadas 417 campos de texto, como definir o texto com
aninhar 411 comportamentos 397
arrastáveis 388 caracteres especiais
como alterar a visibilidade com os comportamentos inserir 300
398 quebra de linha 293
converter em tabelas 418 características da fonte
converter para navegadores 3.0 419 alterar 295
criar 409 catálogos 521
desenhar diversas 409 categorias
encaixar na grade 414 preferências 55
evitar sobreposições 419 propriedades 455
inserir 409 células da tabela
manipular 412 como dividir 251
marcadores, exibir 409 como mesclar 251
mover 413 como recortar, copiar e colar 253
na criação de tabelas 418 formatação 247
posicionar 415 Veja também células de layout, tabelas
preferências 410 células de layout 258
propriedades 415 alinhamento 266
propriedades de múltiplas 415 como desenhar 259
redimensionar 413 como limpar as alturas 264
selecionar 412 cor de fundo 266
selecionar múltiplas 415 formatação 266
visibilidade 417 opção Sem quebra 266
caminho físico 169 preferências 271
caminho virtual 169 células. Veja células de layout, células da tabela
caminhos Centro de suporte do Dreamweaver 19
absolutos 432 CGI
relativos a documento 433 material de referência 32
relativos à raiz 434 CGI (Common Gateway Interface)
caminhos absolutos 432 scripts 640
caminhos relativos a documento chaves, como ajustar 216
definir 436 codificações 56
sobre 433 código
edição com o BBEdit 198
preferências de formatação 187

código-fonte comando Alinhar com a seleção 127
atualização do código HTML do Fireworks comando Alterar o link no site inteiro 445
colocado no Dreamweaver 338 comando Âncora com nome 439
buscas de tags 210 comando Aplicar a formatação de origem 189
como copiar e colar do Fireworks para o comando Aplicar o modelo à página 494
Dreamweaver 337 comando Atualizar a página atual 469, 495
como copiar e colar, geral 207 comando Atualizar as páginas 495
como gravar e editar 203, 207 comando Atualizar HTML 338
como limpar 215 comando Atualizar o local 91
como selecionar na janela do documento 124 comando Colocar 99
conversão de atributos CSS 315 comando Converter as camadas em tabela 418
edição com o BBEdit 198 comando Converter tabelas em camadas 419
editores externos 198 comando Criar álbum de fotografias na Web 339
estilos de tags 306 comando Definir como home page 91
formatação em documentos existentes 189 comando Definir o esquema de cores 124
material de referência 32 comando Desanexar do modelo 494
opções 186 comando Desmarcar a região editável 480
preferências de cores 190 comando Dividir as células 252
preferências de formatação, definição de 187 comando Editar a lista de fontes 295
preferências de regravação 189 comando Editar com o BBEdit 198
procurar 209 comando Editar com o HomeSite 198
referência 214 comando Editar o conteúdo NoFrames 287
visão geral das preferências de formatação 187 comando Evitar sobreposições de camadas 419
código-fonte HTML comando Exportar tabela 256
estilos de tags 306 comando Formatar a tabela 248
pesquisar 316 comando Gravar o caminho da camada 424
ColdFusion 140 comando Importar o HTML do Word 121
como criar fontes de dados 150 comando Importar os dados da tabela 243
componentes 587–591 comando Inserir campo de imagens 638
conexões de banco de dados 149 comando Inserir dados tabulares 243
conexões do UltraDev 4 151 comando Limpar o HTML 215
depurador 227 comando Link a um arquivo existente 90
páginas que utilizam componentes 591 comando Link a um novo arquivo 90
painel Componentes 591 comando Mesclar as células 251
UltraDev 4 137 comando Novo a partir de modelo 119, 487
variáveis ColdFusion 555 comando Obter 97
variáveis de cliente 555 comando Obter mais comportamentos 381
colocação de arquivos em um servidor remoto 99 comando Otimizar imagem no Fireworks 336
colocação e obtenção arquivos 97 comando Redefinir a origem 126
coluna Formato 570 comando Redefinir a posição 127
colunas, linhas e células comando Relatórios 508
como adicionar e remover 250 comando Remover a linha de tempo 426
formatação 247 comando Remover o quadro 422
comando Abrir 120 comando Renomear o grupo de painéis 51
comando Abrir a página vinculada 506 comando Salvar 120
comando Abrir o modelo anexado 495 comando Salvar a moldura 283
comando Adicionar objeto à biblioteca 468 comando Salvar a moldura como 283
comando Adicionar objeto à linha de tempo 422 comando Salvar o conjunto de molduras 283
comando Adicionar quadro 422 comando Salvar o conjunto de molduras como 283
comando Ajustar a posição 127 comando Salvar todas as molduras 284

comando Selecionar um remoto mais novo 100 como executar o Validador de tags 217
comando Verificar a ortografia 315 como executar os objetos Flash 350
comando Verificar os links no site inteiro 505 como exibir
comando Verificar os navegadores de destino 501 conteúdo do head 128
comando Visualizar no navegador 502 elementos invisíveis 125
comando Visualizar utilizando o servidor local 435 imagens de rastreamento 127
comandos modelos em visualização de código 475
acessar nos menus contextuais 44, 46 modelos na visualização do projeto 475
como criar, a partir de etapas do histórico 132 regiões do modelo na visualização de código 476
como gravar 133 como exportar dados da tabela 256
comandos Dividir a moldura 278 como exportar os estilos 313
combinar os painéis flutuantes 50 para criar uma folha de estilos CSS 313
comentários, como inserir 208 como gravar comandos 133
Common Gateway Interface (CGI). Consulte CGI 640 como gravar o código (visualização do código ou
como abrir inspetor de código) 203, 207
arquivos de texto 120 como iniciar um editor de imagens externo 326
documentos existentes. Veja documentos 120 como inserir
como abrir arquivos HTML do Word 121 Imagens do Fireworks no Dreamweaver 332
como abrir documentos vinculados 506 como inserir propriedades. Consulte propriedades
como adicionar como inserir um alocador de espaço de imagem 321
linhas e colunas 250 como ir para uma página de detalhes 662
como ajustar as chaves 216 como localizar e substituir. Veja como procurar
como analisar o código 225 como localizar um determinado registro 664
como aninhar como manter as informações de estado 666
molduras 280 como ocultar
como aplicar links 575
cores ao texto 458 como ocultar os elementos invisíveis 125
de comportamentos a imagens 327 como planejar
estilos CSS 310 molduras 275
estilos HTML 304 como remover linhas e colunas 250
estilos personalizados 310 como repetir as etapas 129
como atualizar como restringir o acesso ao site 691
lista Site (painel Propriedades) 457 como reutilizar
como atualizar os registros 673 buscas 211
como automatizar as tarefas 129 itens de biblioteca 468
como colar como salvar
etapas do histórico 132 arquivos em molduras e conjuntos de molduras 283
como coletar dados dos usuários 656 buscas 211
como copiar e colar documentos 120
HTML do Fireworks 337 como selecionar
como copiar etapas do histórico 132 células e tabelas de layout 264
como definir sites 142 molduras e conjuntos de molduras 281
como depurar páginas ColdFusion 227 objetos na janela do documento 124
como desenhar como sobrepor tags 202
células e tabelas de layout 259 como utilizar molduras como destino para
como efetuar a conexão com um banco de dados 146 _blank 286
como efetuar logout de usuários 701 _parent 286
como efetuar o download _self 286
comportamentos 381 _top 286
tamanho, tempo estimado 507 como utilizar o painel Estilos CSS 307

como utilizar os relatórios para testar um site 508 Conexão com banco de dados OLE 156
como verificar os links 504 Conexão de servidor SQL 156
como visualizar em navegadores conexão do UltraDev 4 ColdFusion 151
visão geral 502 conexões de banco de dados 146
compatibilidade da camada com o Netscape Navigator ASP 161
4 410 ASP.NET 155
comportamento Atualizar o registro 677 banco de dados OLE 167
comportamento Excluir o registro 680 ColdFusion 149
comportamento Inserir registro 673 JSP 173
comportamento Ir para a página Detalhes 651, 662 PHP 181
comportamento Ir para a página relacionada 667 seqüências de caracteres de conexão 166
comportamento Ir para o registro 575 conjunto de registros
comportamento Ir para um determinado registro 664 armazenar em cache 558
comportamento Mostrar a região 575 caixa de diálogo simples Conjunto de registros 546
comportamento Repetir a região 576 colunas, definir (SQL) 721
comportamentos 375–406 copiar e colar 559
ações, como criar 380 definir sem utilizar SQL 545
alterar 380 editar ou excluir 559
como anexar 377 em uma página de detalhes 652
como desencadear 377 em uma página de resultados 657
compatibilidade com os navegadores 381 filtrar registros (SQL) 721, 724
de outros fabricantes 381 hierarquia de itens de banco de dados 548
definidos 375 limitar os registros retornados (SQL) 721
e formulários 640 sintaxes SQL 719
e imagens 327 sobre 544
e itens de biblioteca 471 união de tabelas (SQL) 725
e linhas de tempo 379 conjunto de resultados, JSP 524
e links 452 conjuntos de molduras 278–287
e mídia 358 aninhados 280
exclusão 380 como salvar 283
nas linhas de tempo 421 como selecionar 281
comportamentos de edição de registros 669 designar links em 436
comportamentos de servidor predefinidos, como inserir 278
como atualizar os registros 677 propriedades 285
como codificar 203 Veja também molduras
como editar comportamentos personalizados 618 conjuntos de registros
como editar os registros 669 simples, criar 545
como excluir os registros 680 SQL, gravar instruções personalizadas 546
como inserir registros 673 contador de registros, como criar 579
como ir para um determinado registro 664 conta-gotas 122
como ir para uma página de detalhes 651, 662
como ir para uma página relacionada 667
como ocultar as regiões 575
criação de caixas de diálogo para 615
criar 604
instalação de outros 603
instruções de codificação 613
ir para os registros 575
regiões repetidas 576
teste 617

conteúdo dinâmico 546 definição
atributos 565 pontos de interrupção 224
como adicionar às páginas 561 propriedades do documento 121
como substituir 568 definir
conjunto de registros, criar 545 fontes e alteração de características 294
conjunto de registros, definição 544 depurador JavaScript 221
excluir de uma página 529 caixa de advertência 222
formulários 641 como examinar as variáveis 226
imagens 564 definição dos pontos de interrupção 224
objetos 567 depuração total, depuração circular, depuração
remover 568 parcial 225
sobre 544 erros de sintaxe 223
texto 562 erros lógicos 224
conteúdo Flash janela 224
visão geral 348 lista de variáveis 226
conteúdo, como adicionar a tabelas 242 desacoplar painéis e grupos de painéis 50
controle de origem 94 desenhar
controles ActiveX camadas 409
inserir 357 desenho da Web, níveis de experiência no 25
visão geral 357 Design Notes
controles deslizantes, como criar 386 adição de opções de status 108
convenções 27 configuração 105
convenções tipográficas 27 para documentos e objetos 107
conversão de estilos para objetos de mídia 347
em HTML para os arquivos do Fireworks 109
estilos CSS em tags de HTML 314 relatórios 110
copiar e colar salvamento das informações sobre o arquivo 105,
conjuntos de registros 559 106
cores visão geral 105
aceitas pela Web 123 designar links
como criar propriedades de cores 465 abrir documentos em uma nova janela 437
como escolher 122 em documentos 436
como propriedades. Consulte propriedades designar os navegadores de destino
conta-gotas, como utilizar 122 converter um arquivo para se tornar compatível com
exemplos 122 o navegador 3.0 419
fundo da moldura 284 devolução e retirada de arquivos
fundo da página 122 cancelamento de uma retirada 97
padrão do texto da página 124 visão geral 95
texto, como alterar 298, 458 Devolver o(s) arquivo(s) 79
Criador de comportamentos de servidor 604 Devolver/retirar 94
criar 441 Dicas de código 203
cores e URLs 465 preferências 189
links 435 dicionário pessoal de ortografia 316
um estilo HTML 303 Director, criação de filmes Shockwave com 353
um novo estilo CSS 309 diretório inicial 145
uma imagem cambiável 325 diretório virtual 145
Document Type Definition 195
D Documentação Extensão dos recursos do Dreamweaver
dados tabulares, como importar 243 MX 19
datas
inserir 299

documentos editores. Veja editores externos
aplicar um modelo 494 elementos
como abrir 120 alinhamento 323
como abrir novos. Veja documentos 117 elementos de formulário dinâmicos
como salvar 120 ASP.NET 641
como verificar os links 504 elementos de mídia
como visualizar em navegadores 502 inserir 345
criar 116 elementos invisíveis
definição das propriedades 121 comentários 208
Design Notes, utilização com 105 como mostrar e ocultar 125
modelos, como desanexar de 494 como selecionar 124
pesquisar 316 scripts 234
salvar como um modelo 478 encobrimento 101
tamanho do download, tempo 507 erros de sintaxe 223
título da página 121 erros lógicos no código JavaScript 224
documentos vinculados, como abrir 506 erros no código JavaScript 224
download de arquivos 97 espaço não-separável, como inserir 293
drivers de banco de dados esquemas 521
como exibir os drivers instalados 715 estilo HTML
conceitos básicos 712 edição de um estilo existente 305
DSN 163 estilos 306
DSN, conexões sem 165 como aplicar os estilos personalizados 310
como converter em HTML 314
E conflitantes 314
edição estilos conflitantes 314
código (visualização do código ou inspetor de HTML 301
código) 203, 207 tabela de conversão de CSS em markup de HTML
objetos de botão Flash 350 315
editar Veja também folhas de estilos
atalhos de teclado 56 Sobre estilos de cascata
comportamentos de servidor 618 Veja também folhas de estilos
conjuntos de registros 559 estilos CSS 118
folha de estilos CSS 312 aplicação de personalização (classe) 310
folhas de estilos externas 312 atributo class 309
fontes de dados 559 atributos, como converter em HTML 315
propriedades 459 como aplicar os personalizados 310
um estilo HTML 305 como utilizar com XHTML 220
uma folha de estilos CSS 312 criar 309
editor de atalhos de teclado 56 exportação 313
Editor de bibliotecas de tags 192 navegadores e 314
editores de tags 206, 230 remoção de estilo de uma seleção 310
editores de texto remover 308
arquivos criados por 120
editores de texto de HTML Veja editores externos
editores de texto. Veja editores externos
editores externos
BBEdit (no Macintosh), integração com 198
HTML, visão geral 198
imagens 326
mídia 346
texto, visão geral 198

estilos HTML filmes QuickTime
como aplicar 302, 304 como propriedades. Consulte propriedades
como exibir 302 inserir 356
como limpar 302 filmes Shockwave
como remover do painel 302 como controlar 385
como utilizar em outros sites 305 como propriedades. Consulte propriedades
criar 303, 304 inserir 353
excluir 302 visão geral 353
ícone de Novo estilo 303 filmes, como inserir 345
modificar 305 Fireworks
estilos person. Veja folhas de estilos Design Notes no 109
estrutura de diretórios, site. Consulte sites fluxo de trabalho
evento onBlur 405 para páginas dinâmicas 523–529
eventos folhas de estilos
como alterar em comportamentos 380 caixa de diálogo Editar a folha de estilos 312
como desencadear ações 377 edição das folhas de estilos externas 312
definidos 375 editar 312
disponíveis para diversos navegadores e objetos 376 externas 311
Excel. Veja arquivos do Microsoft Excel, como visão geral 306
importar. Ver também estilos
excluir folhas de estilos externas
conteúdo dinâmico 529, 568 como vincular 311
um conjunto de registros 559 criar 311
uma fonte de dados 559 editar 312
exclusão fontes
linhas e colunas 250 codificações, definir fontes para 56
exemplos, cor 122 como alterar as características 294
exibição dos elementos invisíveis 125 como alterar as combinações 295
exibir fontes de dados
camadas 417 armazenar em cache 558
registros múltiplos 576 componentes de software reutilizáveis para Java 556
exportação conjuntos de registros, criar (simples) 545
sites 92 conjuntos de registros, sobre 544
XML, notações de tag para 498 editar ou excluir 559
expressões comuns 212 enviados por usuários 532
extensibilidade excluir 559
comportamentos de outros fabricantes 381 parâmetros de formulário, sobre 533
Extension Manager 59 parâmetros de URL, sobre 534
extensões 59 sobre 544
criar 604 variáveis ColdFusion 555
instalação 603 variáveis de aplicativo 553
variáveis de sessão 552
F variáveis de sessão, sobre 536
filmes Flash variáveis JSP 556
como controlar 385 formatação do código-fonte HTML
como propriedades. Consulte propriedades preferências 187
inserir 352 formatos de arquivo, imagem 319
visão geral 348
filmes MPEG, como propriedades. Consulte
propriedades

formatos de dados grade
como aplicar 570 como guia 126
criar 571 como mostrar 262
editar 571 encaixar as camadas na 414
formulários encaixar na 262
botões 637 espaçamento 262
botões Enviar 638 mostrar 414
campo de senha 626 gráficos Veja imagens
campos de texto, criar 626 gravação de blocos de código 605
campos, como validar 405 Grupo de discussão do Dreamweaver 19
como adicionar a um documento 623 grupos de painéis 40
como criar campos de arquivos 630 Guia de introdução
como inserir tabelas 639 visão geral 18
como tornar dinâmicas as caixas de seleção 643 guias visuais
como tornar dinâmicos os botões de opção 644 imagens de rastreamento 126
como tornar dinâmicos os campos de imagens 642 réguas 126
como tornar dinâmicos os campos de texto 642 visão geral 126
como utilizar para coletar dados 656
comportamentos, utilização com 640 H
criação de scripts do servidor 640 hierarquia de itens de banco de dados 548
criação de scripts pelo cliente 639 home page, definição 91
criar 623 HomeSite 198
grupos de botões de opção 633 HTML
listas de rolagem 634 espaço não-separável 293
menu pop-up 636 estilos de tags 306
menus de salto, criar 446 formatação 291
objetos de lista/menu, como tornar dinâmicos 642 inserir 291
visão geral 621 pesquisar 316
formulários HTML. Consulte formulários
fóruns on-line 19 I
fotografias 319 IBM WebSphere 141
FTP 70 ícone Anexar a folha de estilos 311
obter e colocar 97 imagens
registro 98 alinhamento 297
resolução de problemas 71 alterar o arquivo de origem com as linhas de tempo
fundo 425
imagem e cor da página 122 aplicação de comportamentos a 327
transparência no 122 como inserir na visualização de layout 263
como permutar (comportamento) 403
G como pré-carregar (comportamento) 393
gerenciar como propriedades. Consulte propriedades
extensões 59 como restaurar as permutadas (comportamento)
grupos de painéis 50 404
links 442 edição 326
propriedades. Consulte propriedades editores de imagens externos 326
sites 75 formatos, com suporte 319
inserir 320
mapas de imagens 450
redimensionamento 324
sobre 319
tornar dinâmico 564

imagens cambiáveis 325 inspetor de propriedades 40, 229
criação de um link 325 como ajustar os links rompidos 506
criar 325 como tornar dinâmicos os atributos HTML 565
imagens de rastreamento 126 editar um conjunto de registros 529, 568
imagens espaçadoras exibir 49
preferências 269 expandir 49
imagens GIF visualização de lista 565
como imagem de rastreamento 126 visualização padrão 565
utilizações de 319 Inspetor de tags 207
imagens JPEG inspetores
como imagem de rastreamento 126 abrir e fechar com a barra do Iniciador 44
utilizações de 319 inspetor de imagens 450
imagens PNG inspetor de propriedades 49
como imagem de rastreamento 126 Veja também painéis
utilizações de 319 instruções de codificação 613
importação integração com o BBEdit (apenas no Macintosh) 198
arquivos HTML do Word 121 integração do Dreamweaver e do Fireworks
dados tabulares 292 acionamento e edição das imagens do Fireworks
folha de estilos CSS externa 311 335, 342
sites 92 acionamento e otimização das imagens do Fireworks
texto de outros documentos 292 336
importação de tags JSP 196 atualização do código HTML do Fireworks 338
importação de tags personalizadas 195 comando Otimizar imagem no Fireworks 336
inclusões do servidor 235 como inserir arquivos do Fireworks 332
edição 237 criação de álbuns de fotografias na Web 339
inserir 236 preferências Acionar e editar 332
Índice, Ajuda 18 integração do Dreamweaver e do Fireworks . Veja
iniciar 25 integração do Dreamweaver e do Fireworks
inserir integrar o Dreamweaver com outros aplicativos 55
applets Java 358 interatividade 22
caracteres especiais 300 introdução ao Dreamweaver 25
controles ActiveX 357 ir
datas 299 a uma página de detalhes 662
elementos de mídia 345 para uma página relacionada 666
filmes Flash 352 ISP 168
filmes Shockwave 353 itálico 294
imagens 320 itens de biblioteca 467
imagens cambiáveis 325 como adicionar às páginas 460, 468
inclusões do servidor 236 como editar os comportamentos em 471
objetos de botão Flash 348 como propriedades. Consulte propriedades
objetos de texto Flash 351 como tornar editáveis os itens de documentos 470
propriedades 457 criar 467
inspetor de código 185 editar 460, 468
inspetor de imagens 450 excluir 470
visão geral 467

J L
Jakarta Tomcat 141 layout de página. Ver visualização de layout, modelos
janela Bem-vindo 40 layout, como planejar.Veja visualização de layout,
janela do documento 40 modelos
barra de status 42 leitora de tela
barra de título 41 Window Eyes 360
como abrir documentos existentes 120 leitoras de tela
como abrir um novo documento 117 JAWS for Windows: 360
como executar os plug-ins do Navigator 356 linhas de tempo
como selecionar elementos 124 adicionar e remover quadros 424
conceitos básicos 41 adicionar objetos às 422
exibir o código 41 alterar as propriedades das camadas 425
menu pop-up Tamanho da janela 42 alterar o arquivo de origem da imagem 425
molduras na 283 cabeçote de execução 421
redimensionar 42 caminhos complexos 424
seletor de tags 42 como anexar um comportamento 379
tamanho da página e tempo de download 42 como executar e parar utilizando os
janela do Live Data comportamentos 405
arquivos ausentes 517 controlar com os comportamentos 428
atualização automática 519 criar 422
como fornecer os parâmetros esperados 518 executar automaticamente 424
descrita 516 modificar 424
parâmetros da URL na barra de ferramentas 519, múltiplas 426
528 quadros primários 422
sobre 528 renomear 427
janela do site repetir continuamente 424
como procurar texto 316 sugestões de animação 427
janela Documento link 435
como procurar texto 316 link href 311
janelas links
Veja também inspetores, painéis a âncoras 439
JavaScript a folhas de estilos 311
ações 376 a um documento 435
alertas 392 abrir a origem 444
arquivos 120 alterar no site inteiro 445
como executar 382 arquivo de cache 442
como inserir scripts 234 atualizar 442
comportamentos 375 como ajustar 505
JavaServer Pages como alterar uma moldura com 286
componentes de software reutilizáveis para Java 556 como aplicar à seleção 458, 460
conjunto de resultados, definição 524 como ocultar 575
variáveis JSP 556 como verificar 504
JDBC designar 435
drivers 174 em modelos 474
parâmetros de conexão 175 mapa do site 444
JRun 141, 197 opção Relativo a documento 436
JSP 141 opção Relativo à raiz do site 436
conexões de banco de dados 173 remover 444
importação de tags 196

links de correio eletrônico menu pop-up
alterar 445 criar 636
criar 440 menu pop-up Tamanho da janela 42
links de hipertexto 435 menus contextuais 44, 46
links de navegação para registros 572 menus de atalhos. Veja menus contextuais
links de scripts menus de salto
alterar 445 adicionar os itens de menus 446
criar 441 alterar os itens de menu 447
links e navegação 431 botões Ir 390
links externos 504 botões Ir, adicionar automaticamente 446
links nulos criar um aviso de seleção para 446
alterar 445 edição 390
criar 441 Microsoft Word
links rompidos 504 arquivos, como abrir 121
lista de sites, atualizar 457 modelos 119, 498
lista de variáveis 226 aninhar 491
listas atributos de tags editáveis 473, 483
criar 298 atualizar documentos 495
listas de rolagem 634 atualizar o Dreamweaver 4 495
localhost 145 como aplicar a um documento existente 494
como aplicar ao documento 461
M como clicar em regiões bloqueadas 476
Macromedia Director, criação de filmes Shockwave como criar novos documentos com 119, 487
com 353 como criar regiões editáveis 479
Macromedia Exchange 59, 603 como desanexar um documento de 494
Macromedia HomeSite 198 como editar o código fora das tags HTML 474
Macromedia JRun 141, 197 como localizar as regiões editáveis 488
macros (como criar comandos) 132 como propriedades. Consulte propriedades
manipuladores de eventos. Veja eventos como tornar uma região não-editável 480
mapa de percurso (onde iniciar) 25 criar 477
mapas de bits, redimensionamento 324 editar 461
Veja tambémimagens editar os scripts de servidor nos documentos 474
mapas de imagens links 474
criar para o cliente 451 modificar propriedades 488
pontos ativos 451 Painel Propriedades 461
selecionar vários pontos ativos 451 região opcional 473, 484
visão geral 450 região repetida 473
mapas de imagens do servidor 450 região repetitiva 480
mapas de sites 86 regiões editáveis 473
adição de arquivos a um site 90 regiões editáveis e regiões bloqueadas 473
alterar os links nos 444 renomear 462
comando Link a um novo arquivo 90 verifica a sintaxe 496
como exibir uma ramificação dos 92 visão geral 472
como mostrar os arquivos dependentes nos 91 XML 497
links 444 modelos aninhados 491
remover os links nos 444 modificar
salvamento como um arquivo de imagem 92 bancos de dados, utilizar procedimentos
marcadores de elementos invisíveis 125 armazenados 681
marcadores de parâmetros 615 propriedades da página 121
material de referência 32
menu do cabeçalho da coluna 268

molduras 273–287 objeto live Status de navegação do conjunto de registros
aninhados 280 579
como alterar a cor do fundo 284 objetos
como alterar o conteúdo 286 adição de Design Notes 107
como designar como destino 286 caixas de seleção e botões de opção 632
como salvar 283 inserir com a barra Inserir 46
como selecionar 281 tornar dinâmico 567
compatibilidade com os navegadores 287 objetos ActiveX, dinâmicos 567
comportamentos, utilização com 287 objetos de botão Flash 348
criar 278, 279 modificar 350
definidos 274 visualização 350
etapas para criar 277 objetos de lista/menu, como tornar dinâmicos 642
exclusão 279 objetos de texto Flash
painel 281 inserir 351
propriedades 284 visualização 350
utilização de links 286 objetos do servidor
visão geral 273 objetos da sessão 552
multimídia. Veja mídia objetos do aplicativo 553
MySQL 181 variáveis ColdFusion 555
objetos Flash, dinâmicos 567
N objetos Generator, dinâmicos 567
não-separável, como inserir espaço 293 objetos Live
navegador de arquivos 86 Barra de navegação do conjunto de registros 572
navegadores conjunto de páginas-mestras/detalhes 649
arquivos compatíveis com a versão 3.0 419 formulário de atualização de registros 675
como visualizar 502 formulário de inserção de registros 670
compatibilidade, como planejar 62 Status de navegação do conjunto de registros 579
compatibilidade, como testar 501 objetos Shockwave, dinâmicos 567
cores, aceitas 123 obtenção e colocação de arquivos 97
designar 501 Ocultar o menu pop-up 402
e estilos CSS 314 ODBC
primário, como definir 503 como exibir os drivers instalados 715
versões, como verificar 383 opção Aninhar se criada em camada 410
.NET Framework 141 opção Aplicação automática (painel Estilos HTML)
níveis de autorização 699 302
nome da fonte de dados, configurar 727 opção Arquivos locais 82
nomes de usuário opção Arquivos remotos 82
como armazenar 693 opção caixa de cores 122
como permitir aos usuários escolher 693 opção Chamável (procedimento armazenado) 681
como verificar a exclusividade 695 opção Código-fonte 209
como verificar durante o login 698 opção Coincidir maiúsc./minúsc. 317
novos recursos no Dreamweaver 28 opção Colunas (Inserir tabela) 242
opção Comando (procedimento armazenado) 681
O opção Cor do link (Propriedades da página) 124
objeto Âncora (barra Inserir) 439 opção Cor do texto (Propriedades da página) 124
objeto live Barra de navegação do conjunto de registros opção Cor dos links ativos (Propriedades da página)
572 124
objeto live Conjunto de páginas-mestras/detalhes 649 opção Cor dos links visitados (Propriedades da página)
objeto live Formulário de atualização de registros 675 124
objeto Live Formulário de inserção de registros 670 opção Desanexar do original 470

opção Espaçamento entre as células (Inserir tabela) 242 páginas
opção Execução automática 421 atualizar 673
opção Execução automática (painel Linhas de tempo) busca 656
422 color 122
opção Exibir os arquivos dependentes 91 como alterar o título 121
opção Ignorar os diferentes espaços em branco 317 como restringir o acesso às 699
opção Índice Z (para camadas) como visualizar em navegadores 502
alterar a ordem de empilhamento 416 cores padrão do texto 124
opção Limpar o estilo da seleção 302 Design Notes, utilização com 105
opção Limpar o estilo do parágrafo 302 detalhes 662
opção Linhas (Inserir tabela) 242 excluir 678
opção Loop 421 imagem de fundo 122
opção Mostrar as guias da tabela de layout 259 inserir 670
opção Mostrar o iniciador na barra de status 52 login 696
opção Preenchimento da célula (Inserir tabela) 242 protótipos 64
opção Procedimento armazenado (ColdFusion) 681 redimensionar para caber no monitor 42
opção Tamanhos de janela 44 registro do usuário 692
opção Utilizar expressões regulares 317 relacionadas 666
opção Velocidade de conexão 44 resultados 657
opções de acesso 69 tamanho 507
opções de exibição tempo de download, estimado 507
fontes 56 páginas de busca 656
painéis flutuantes 52 páginas de detalhes
opções de Localizar em 316 como criar um link a 662
opções de Procurar 317 localizar um determinado registro 652, 664
Oracle Thin Driver 175 páginas de login 696
ordem de empilhamento páginas de resultados
alterar com as linhas de tempo 425 como ir para uma página de detalhes 662
camadas 416 como utilizar um conjunto de registros avançado
ortografia 659
como verificar 316 como utilizar um conjunto de registros simples 657
dicionários 316 páginas relacionadas 666
páginas-mestras/detalhes 662
P painéis
página de atualização, como criar 673 abrir e fechar com a barra do Iniciador 44
página de exclusão, como criar 678 barra do Iniciador 44
página de inserção, como criar 670 de encaixe 50
página de registro 692 definir as preferências de flutuação 52
painel Comportamentos 376
painel Histórico 53
Painel Propriedades 460
painel Propriedades, categoria Modelos 461
Respostas 54
painel Camadas 409
painel Componentes do ColdFusion 591
painel Comportamentos 376
Painel de respostas 54
painel Estilos CSS 307

painel Histórico pasta local 143
comandos, como criar a partir de etapas do histórico pasta remota 69, 143
132 resolução de problemas 71
como automatizar as tarefas com 129 pastas
etapas, como aplicar a outros objetos 130 busca de texto 316
etapas, como copiar e colar 132 Favoritos 466
etapas, como repetir 129 pesquisar 316
limpar a lista de histórico 54 pastas Favoritos 466
número máximo de etapas, definir 54 personalizar
visão geral 53 barra do Iniciador 52
painel Ligações Dreamweaver
coluna Formato 570 conceitos básicos 55
como adicionar texto dinâmico 562 pesquisar
como criar um contador de registros 581 Ajuda 18
como tornar dinâmicos os atributos HTML 565 arquivos 316
como tornar dinâmicos os formulários 641 como localizar e substituir 316
excluir as fontes de dados 559 texto nos arquivos 316
painel Linhas de tempo 421 PHP 142
painel Molduras 281 conexões de banco de dados 181
painel Referência 214 Mac OS X 138
painel Site 40, 76 pixels transparentes no fundo 122
alteração da exibição 82 pixels, transparentes, no fundo 122
busca de arquivos 85 planejamento 61
colunas 80 propriedades 65
comando Colocar 99 planejamento da navegação de um site 65
comando Obter 97 planejamento de sites 61
como exibir os sites 82 plug-ins
mapas de sites 86 como executar na janela do documento 356
navegação pelos arquivos 86 como verificar 384
opções da barra de ferramentas 77 resolução de problemas 357
procurar texto e/ou HTML em documentos 316 tornar dinâmico 567
visualização do mapa do site 78 plug-ins do Netscape Navigator
visualização dos arquivos do site 78 como executar na janela do documento 356
painel Site, Consulte o painel Site 76 resolução de problemas 357
painel Trechos 204 pontos ativos
paleta de cores Cubos de cor 123 aplicação de comportamentos a 327
paleta de cores Mac OS 123 em mapas de imagens 451
paleta de cores Passar à cor aceita pela Web 123 redimensionar 452
paleta de cores Tom contínuo 123 selecionar vários em um mapa de imagens 451
paleta de cores Tons de cinza 123 pontos de interrupção no depurador JavaScript 224
paleta de cores Windows OS 123 posicionar
paletas, cor 122 blocos de código 614
parágrafo 293
quebra de linha 293
parágrafos
formatação 296
parâmetros (modelos) 473
parâmetros de conexão 175
parâmetros de conexão com banco de dados OLE 157
parâmetros de modelos 473

preferências proporção, manutenção 324
Acionar e editar 332 propriedades
atualizar os links 442 camada 415
barra de status 44 camadas múltiplas 415
barra Inserir 49 categoria Biblioteca do painel Propriedades 460
camadas 410 categoria Modelos do painel Propriedades 461
Codificação por cores 190 categorias 455
Dicas de código 189 células de layout 266
dicionário para verificação ortográfica 315 coluna, linha e célula 247
editores externos 346 como abrir o painel Propriedades 454
fontes/codificação 56 como alterar com comportamentos 382
Formato do código 187 como aplicar as cores ao texto 458
gerais 56 como atualizar a lista Site 457
painéis 52 conjunto de molduras 285
painéis flutuantes 52 cores, como criar 465
Regravação de código 189 documento, definição 121
Site 79 editar 459
Tipos de arquivos/editores 346, 347 exibir 49
Validador 191 exibir no painel Propriedades 456
visão geral 55 inserir 457
Visualização de layout 271 listas Favoritos 464
Visualizar utilizando o servidor local (links relativos moldura 284
à raiz) 435 pastas Favoritos 466
preferências Acionar e editar 332 planejamento 65
Preferências de cores de código 190 selecionar múltiplas 459
preferências de fontes/codificação 56 tabela 246
Preferências do site 79 tabelas de layout 266
preferências dos tipos de arquivos/editores 199, 347 URLs, como criar 465
preferências gerais 56 visão geral 454
Prefixo de URL 145 propriedades da página
princípios básicos do Dreamweaver 25 título, como alterar 121
privilégios de acesso Propriedades de link de dados 157
como adicionar às páginas 700 protótipos 64
como armazenar em um banco de dados 701 provedores de bancos de dados OLE 156
exemplo 699 público 62
procedimentos armazenados público-alvo 62
como criar um objeto de procedimento armazenado
681 Q
modificar bancos de dados 681 qps (quadros por segundo) 421
processadores de texto, arquivos criados por 120 quadros por segundo (qps) 421
procurar quadros primários
como salvar padrões de busca 211 criar 422
expressões comuns 212 visão geral 421
tags e atributos 210 Quick Tag Editor 230
texto entre tags específicas 210
texto no código HTML 209 R
projeto 61 recursos
arquivos 117 para obter informações sobre tecnologias da Web 32
molduras 275 recursos, novos no Dreamweaver 28
projeto de sites 61 Redimensionamento de uma imagem 324

redimensionar S
alças 324 scripts
camadas 413 chaves ajustadas 216
células da tabela 249 como exibir as funções 209
células e tabelas de layout 264 como propriedades. Consulte propriedades
região opcional (modelos) 473, 484 digitação 234
região repetida (modelos) 473 edição de externos 234
região repetitiva seção head, edição do conteúdo na 128
adicionar uma entrada 490 Secure Shell 70
editar região 490 segurança 691
excluir entrada 490 selecionar
região repetitiva (modelos) 480 camadas 412
alternar cores 482 seletor de cores
criar 481 Dreamweaver 122
regiões sistema 123
como ocultar 575 seletor de cores do sistema 123
regiões bloqueadas Seletor de tags 206
como clicar em 476 seletor de tags 40, 233
regiões editáveis senhas
criar 479 como armazenar 693
remover 480 como permitir aos usuários escolher 693
regiões editáveis (modelos) 473 como verificar durante o login 698
regiões, bloqueadas seqüência de caracteres de conexão, banco de dados
como clicar em 476 OLE 157
registros seqüências de caracteres de conexão 166
atualizar 673 serviços da Web
como criar um contador 579 adicionar à página 600
como exibir mais de um 576 diretórios UDDI 594
excluir 678 fluxo de trabalho 595
inserir 670 gerador proxy AXIS 596
links de navegação 572 geradores proxy, adicionais 596
réguas 126 geradores proxy, configurar 597
réguas horizontais, como inserir e modificar 300 geradores proxy, instalar 596
relatórios 109 lista de sites UDDI, editar 602
fluxo de trabalho 110 SOAP 595
Retirado por 110 sobre 593
relatórios de devoluções e retiradas 110 serviços de hospedagem na Web 168
relatórios de fluxo de trabalho 110 servidor da Web
remover quadros de uma linha de tempo 424 configuração 139
repetir as linhas de tempo continuamente 424 servidor de aplicativos
requisitos como escolher 140
aplicativos para a Web 138 configuração 139
resolução de problemas servidor de teste 144
erros do servidor 146 configuração 139
plug-ins do Navigator 357 servidor HTTP 139
transferência de arquivos 99 servidores
restrição de tabelas 521 definição de sites remotos 69
Retirar o(s) arquivo(s) 79 opções de acesso 69
retorno 293 resolução de problemas de configuração 71
Roundtrip HTML 202

servidores de aplicativos som 354–355
como solucionar erros 146 adicionar à página 354
sincronização dos sites local e remoto 100 como executar 392
sistemas multiusuário 60 SQL 719
sistemas operacionais, multiusuário 60 ASP.NET 548
site do Dreamweaver 142 colunas, definir 721
sites como filtrar registros 721, 724
adição de arquivos e pastas 84 como limitar registros 721
alteração da exibição 82 como unir tabelas 725
alterar os links no site inteiro 445 conjunto de registros, definir com SQL 546
arquivo de cache 443 DELETE 719
cache 442 FROM 720
como ajustar os links rompidos 505 GROUP BY 720
como definir um site dinâmico 142 hierarquia de itens de banco de dados 548
como procurar os arquivos nos 316 INSERT 719
como verificar os links 504 instrução SELECT 719
como visualizar em navegadores 502 operadores 720
compatibilidade com os navegadores 62, 501 ORDER BY 720
Design Notes, utilização com 105 UPDATE 719
devolução e retirada de arquivos 95 WHERE 720
edição 72 SSH 70
encobrimento de arquivos 101 sublinhado 294
estrutura de planejamento 63 submenu Estilo 294
estrutura e navegação 75 Substituição de um alocador de espaço de imagem 322
grandes, propriedades em 464
importação e exportação 92 T
links 431 tabela repetitiva (modelos) 481
locais e remotos 66 tabelas 639
locais, criação, configuração 66 células, como dividir 252
localização de arquivos nos 85 colunas, linhas e células 247
material de referência 32 como adicionar conteúdo a 242
obter relatórios 508 como adicionar e remover linhas e colunas 250
planejamento da navegação 65 como ajustar linhas e colunas 249
projeto e planejamento 61 como alterar a largura das colunas 249
relatórios, execução 110 como aninhar 253
remoção da lista de sites 93 como exportar dados 256
remoto 69 como importar dados tabulares 292
remoto, localização de arquivos no 85 como limpar a largura e a altura das células 250
remoto, resolução de problemas de configuração 71 como mesclar as células 252
remotos, opções de acesso 69 como ordenar 255
segurança 691 como selecionar elementos 243
seleção dos arquivos atualizados 84 converter a partir de camadas 418
teste 499 criar 242
sites locais estilos predefinidos para 248
Consulte sites 66 formatação 245
Sitespring 111 importação 243
SOAP e serviços da Web 595 propriedades 246
solução de problemas redimensionar 249
como clicar em regiões bloqueadas 476 restrição 521
visão geral 241
Veja também colunas, linhas e células

tabelas de layout 258 texto
alinhamento 266 alinhamento 297
aninhados 261 como adicionar a um documento 292
como desenhar 259 como alterar a cor 298, 458
como limpar as alturas 266 como alterar as combinações de fontes 295
cor de fundo 266 como formatar com os estilos HTML 301
espaçamento entre células 266 como importar de outros documentos 292
formatação 266 como procurar nos documentos 316
opção Remover o aninhamento 266 como recuar 297
opção Remover todos os espaçadores 266 cor padrão nas páginas 124
opção Tornar consistentes as larguras 266 editores externos. Veja editores externos
preenchimento da célula 266 espaço não-separável 293
preferências 271 formatação 291, 294
tag inserir 291
cabeçalho, aplicação 297 remoção do recuo 297
parágrafo, aplicação 297 tornar dinâmico 562
tag body 128 texto em negrito 294
tag If personalizada (ASP.NET) 734 tipos de arquivos
tag map 451 arquivos Flash 348
tag Parameter (ASP.NET) 737 tipos de arquivos que contam com suporte 202
tag Parameters (ASP.NET) 737 título
tag personalizada Delete (ASP.NET) 736 alterar 121
tag personalizada do Dataset (ASP.NET) 731 transferência de arquivos, resolução de problemas 99
tag personalizada Insert (ASP.NET) 734 trechos de código 204
tag personalizada Update (ASP.NET) 735
tags U
body 128 UDDI
buscas 210 diretórios públicos 594
como selecionar 124 lista de sites, editar 602
como sobrepor 202 UltraDev 4 137
inválidas 202 upload anônimo de arquivos 630
tags inválidas upload de arquivos 97, 99
como exibir 202 URLs
tags personalizadas, importação 195 como aplicar à seleção 458, 460
tags, importação 195 como criar propriedades de URLs 465
tamanho do monitor, redimensionar as páginas para como propriedades. Consulte propriedades
que caibam 42 URLs. Veja caminhos
tempo de download 42 Utilização de folhas de estilos para design 313
teste de acessibilidade 370 Utilização de um editor de imagens externo 326
teste dos comportamentos de servidor 617 Utilização dos seus estilos HTML em outros sites 305
V
Validador 217
preferências 191
variáveis de aplicativo 553
variáveis de sessão 552
dados, armazenar 539
dados, recuperar 541
e parâmetros de formulário 539
e parâmetros de URL 538
sobre 536

VBScript 234 visualização dos arquivos do site 84
verificação ortográfica 315 visualização padrão no inspetor de propriedades 565
vincular
a âncoras com nome usando o ícone do indicador de W
arquivos 440 web.xml 197
a documentos usando o ícone do indicador de
arquivos 437 X
a uma folha de estilos CSS externa 311 XHTML, como tornar as páginas compatíveis com
âncoras 439 217
documentos 436 XML 218, 496
visão geral em modelos 497
do Dreamweaver 17 notações de tags para a exportação 498
visualização de código visão geral 496
alternar para a visualização do projeto 41
visualizar modelos 475
visualização de layout 257
alongamento automático 267
atributos Limpar a altura 266
como adicionar conteúdo a 263
como alternar para 257
como desenhar células e tabelas de layout 259
como formatar as células de layout 266
como formatar tabelas de layout 266
como limpar as alturas das células 264
como mover células e tabelas de layout 264
como redimensionar células e tabelas de layout 264
definição da largura 267
espaçamento entre células 266
grade 262
imagens espaçadoras, preferências 269
largura fixa 267
menu do cabeçalho da coluna 268
opção Remover o aninhamento 266
opção Remover todos os espaçadores 266
opção Tornar consistentes as larguras 266
preenchimento da célula 266
preferências 271
preferências de imagem espaçadora 269
seleção de células e tabelas de layout 264
sobre células e tabelas de layout 258
tabelas de layout aninhadas 261
visão geral 257
visualização de lista no inspetor de propriedades 565
visualização do código 185
abertura de arquivos não-HTML 191
como gravar e editar o código 203, 207
opções 186
visualização do projeto
alternar para a visualização de código 41
visualizar modelos 475

Usando o Dream Weaver MX

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Usando o Dream Weaver MX

Enviado por

Direitos autorais:

Formatos disponíveis

Usando o

Isenção de responsabilidade da Apple

ÍNDICE REMISSIVO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741

Aprenda como utilizar a documentação e outros recursos do

O Dreamweaver MX da Macromedia é um editor de HTML profissional para desenhar, codificar

Extensão dos recursos do Dreamweaver

Centro de suporte do Dreamweaver

Central para designer e desenvolvedor

Fóruns on-line do Dreamweaver

Sobre o planejamento do site

Sobre a criação de páginas da Web

Sobre interatividade e animação

Sobre os testes e a publicação do seu site

Sobre o desenvolvimento rápido de aplicativos

Para iniciantes em desenho da Web:

1 Inicie lendo os dois primeiros capítulos do Guia de introdução.

1 Inicie lendo o primeiro e o terceiro capítulos do Guia de introdução.

Para os designers da Web experientes, que já estão familiarizados com o Dreamweaver, e

1 Inicie lendo o primeiro, quarto e quinto capítulos do Guia de introdução.

Para os desenvolvedores de aplicativos para a Web que não utilizaram o Dreamweaver ou o

Para os desenvolvedores de aplicativos para a Web que utilizaram o UltraDev 4:

1 Inicie pela leitura de “Novidades do Dreamweaver MX”, na página 28.

Controle total sobre o código e o projeto

Suporte avançado a todas as tecnologias de servidor mais recentes

Acesso fácil aos padrões mais recentes

Utilização da área de trabalho do Dreamweaver

Para escolher um layout de área de trabalho:

Selecione um dos seguintes layouts:

A área de trabalho do Dreamweaver 4 apresenta um layout semelhante ao utilizado no

1 Escolha Editar > Preferências.

Sobre a área de trabalho integrada do Dreamweaver MX no Windows

inspetor de propriedades painel Site

Exploração da área de trabalho 37

grupos de painéis barra Inserir

seletor de tags Inspetor de propriedades janela do documento

barra de ferramentas do documento

seletor de tags inspetor de propriedades

Exploração da área de trabalho 39

Utilização de janelas e painéis no Dreamweaver

Exploração da área de trabalho 41

seletor de tags menu pop-up Tamanho da janela

Redimensionamento da janela do documento

Para redimensionar a janela do documento de acordo com um tamanho predeterminado:

Para alterar os valores na lista do menu pop-up Tamanho da janela:

1 No menu pop-up Tamanho da janela, escolha Editar os tamanhos.

Para adicionar um novo tamanho ao menu pop-up Tamanho da janela:

1 No menu pop-up Tamanho da janela, escolha Editar os tamanhos.

Para maximizar a janela do documento (apenas na área de trabalho integrada do Windows):

Clique no botão Maximizar, na barra de título da janela do documento.

Exploração da área de trabalho 43

Utilização da barra do Iniciador

Utilização da barra de ferramentas do documento

Exploração da área de trabalho 45

Utilização dos menus contextuais

Para utilizar um menu contextual:

1 Clique com o botão direito do mouse no objeto ou na janela.

Utilização da barra Inserir:

Para mostrar ou ocultar a barra Inserir:

Para expandir ou reduzir a barra Inserir:

Clique na seta de expansão, no canto esquerdo da barra de título da barra Inserir.

Para inserir um objeto:

1 Selecione a guia adequada na barra Inserir.

Pressione Control e clique no botão correspondente ao objeto.

Exploração da área de trabalho 47